/* Standalone H5 layout: the same mobile composition at every viewport width. */
:root { color-scheme: dark; --bg:#23111e; --paper:#fff7f0; --gold:#ffd18a; --muted:#d4beca; }
* { box-sizing:border-box; }
html { background:#120b12; scroll-behavior:smooth; scroll-padding-top:20px; }
body { width:100%; max-width:480px; margin:0 auto; padding:0 0 120px; padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)); background:var(--bg); color:var(--paper); font:15px/1.55 Arial,"Noto Sans Devanagari",sans-serif; overflow-wrap:break-word; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
[hidden] { display:none!important; }
header { padding:16px 18px 0; background:#291321; border-bottom:1px solid #f7b5c532; }
.brand-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-size:26px; font-weight:700; letter-spacing:-.7px; }
.brand img { width:40px; height:40px; border-radius:11px; }
.header-free { display:block; padding:3px 7px; color:#ffe5a4; border:1px solid #ffd18a57; border-radius:5px; font-size:10px; font-weight:700; letter-spacing:.3px; }
.header-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.language { border:0; background:none; color:var(--paper); min-height:46px; padding:10px 0; font-size:13px; }
.button,a[data-download].button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 18px; border:1px solid #ffdfa8; border-radius:10px; background:#ffd692; color:#25151c; font-size:16px; font-weight:700; line-height:1.4; text-align:center; -webkit-appearance:none; appearance:none; }
.header-actions .button { width:180px; max-width:65%; min-height:46px; padding:12px; font-size:14px; }
header nav { display:flex; align-items:center; margin-top:10px; border-top:1px solid #f4bed12c; }
header nav a { flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; padding:8px 3px; font-size:12px; text-align:center; }
.download-help { margin:12px 18px; padding:10px 12px; border:1px solid #ffdfa84d; border-radius:10px; background:#341b2c; font-size:13px; }
.download-help summary { color:var(--gold); cursor:pointer; min-height:30px; line-height:30px; }
.download-help p { margin:10px 0; }
.download-help input { display:block; width:100%; padding:10px; border:1px solid #b996aa; border-radius:6px; background:var(--bg); color:white; font-size:16px; -webkit-user-select:text; user-select:text; }
.hero { display:flex; flex-direction:column; position:relative; overflow:hidden; padding-bottom:12px; }
.hero-art { position:absolute; top:0; left:0; width:100%; height:360px; background-color:#321b2b; background-image:linear-gradient(0deg,#23111e 0%,#23111e20 55%,#23111e00 85%),var(--hero-poster,url('assets/posters/she-refused-the-don.webp')); background-size:cover; background-position:center,center 12%; }
.hero-caption { position:relative; order:1; padding:238px 20px 0; text-shadow:0 2px 12px black; }
.hero-caption h2 { margin:0 0 16px; font-size:28px; line-height:1.2; }
.hero-caption .pill,.hero-caption p,.hero-caption>span:last-child,.hero h1,.hero-content>.eyebrow,.hero-bottom { display:none; }
.hero-content { position:relative; order:2; padding:0 20px; }
.hero-description { font-size:15px; line-height:1.6; color:#ffe5a4; margin:0 0 16px; }
.hero-buttons { display:flex; flex-direction:column; gap:10px; }
.hero-buttons .button { width:100%; }
.hero-buttons button[data-preview] { background:#422b3c; color:var(--paper); border-color:#d6a7bf55; }
.hero-buttons .text-link { display:none; }
.micro { color:var(--muted); font-size:12px; margin:12px 0 0; }
.hero-controls { position:relative; order:3; display:flex; justify-content:center; align-items:center; gap:8px; margin:16px 18px 0; }
.hero-dots { display:flex; gap:7px; }
.hero-dot,.hero-pause { width:44px; height:44px; border:1px solid #e7bdd241; border-radius:8px; background:#382032; color:var(--paper); font-size:13px; }
.hero-dot.active { border-color:#ff87a7; background:#754151; color:#fff; }
.hero-arrow { display:none; }
.discovery { padding:28px 18px 32px; }
.eyebrow { margin:0 0 10px; color:#ffb5bf; font-size:10px; font-weight:700; letter-spacing:1.5px; }
.section-head h2 { margin:0; font-size:27px; line-height:1.2; letter-spacing:-.5px; }
.section-head>p { margin:12px 0 0; color:#ffe5a4; font-size:14px; }
.content-types { display:flex; gap:8px; margin-top:22px; padding:5px; border:1px solid #faafc43d; border-radius:12px; background:#382032; }
.content-types a { flex:1; display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 5px; border-radius:8px; font-size:14px; font-weight:700; text-align:center; }
.content-types a:first-child { background:var(--gold); color:#2c1820; }
.story-section { margin-top:28px; scroll-margin-top:20px; }
.story-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.story-section-head h2 { margin:0; font-size:21px; line-height:1.3; letter-spacing:-.4px; }
.story-count { flex-shrink:0; margin:0; padding:5px 7px; border:1px solid #e8a5bd36; border-radius:20px; color:#f8bfd0; font-size:10px; }
.filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.filters button { min-height:44px; padding:9px 11px; border:1px solid #e8b4c43d; border-radius:22px; background:#351d2e; color:#e1cbd6; font-size:12px; }
.filters button.selected { background:#80434e; border-color:#ffb79d; color:white; }
.story-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 12px; }
.story-card { display:block; width:100%; min-width:0; margin:0; padding:0; border:0; background:none; color:inherit; text-align:left; }
.poster { position:relative; width:100%; height:0; padding-bottom:150%; overflow:hidden; border:1px solid #f5c3d12b; border-radius:11px; background:#3c2435; }
.poster img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.poster-tag { position:absolute; top:8px; left:7px; padding:4px 5px; border:1px solid #f2c5d356; border-radius:4px; background:#291322; color:#fff; font-size:8px; }
.card-play { position:absolute; right:8px; bottom:9px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid #ffe2ec9c; border-radius:50%; background:#381a2ccc; color:#fff; font-size:10px; }
.story-card h3 { margin:11px 0 6px; font-size:15px; line-height:1.35; }
.story-card>p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.section-download { margin:24px 0 0; }
.section-download .button { width:100%; }
#ai-anime { padding:22px 10px; margin:32px -10px 0; border:1px solid #c797dc36; border-radius:14px; background:#302036; }
.download-panel { margin:0 18px 30px; padding:24px 18px; border:1px solid #ffb5cb47; border-radius:16px; background:#341b2c; }
.app-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.app-icon { width:56px; height:56px; border-radius:14px; }
.app-name { font-size:27px; font-weight:700; }
.app-brand .eyebrow { margin:5px 0 0; font-size:8px; letter-spacing:1px; }
.download-panel h2 { margin:0; color:#ffe5a4; font-size:29px; line-height:1.25; }
.panel-description { margin:15px 0 22px; color:var(--muted); }
.download-action .button { width:100%; }
.download-meta { margin:10px 0 0; color:#ffe4a1; font-size:12px; text-align:center; }
.how { margin:0 18px 30px; padding:26px 0; border-top:1px solid #f5c3d124; }
.how h2 { margin:0 0 22px; font-size:26px; line-height:1.3; }
.how ol { display:block; list-style:none; margin:0; padding:0; }
.how li { display:flex; align-items:flex-start; gap:12px; padding:18px 14px; margin-top:12px; border:1px solid #edb5ca32; border-radius:13px; background:#341c2d; }
.how b { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:8px; background:#ffbd8b12; color:var(--gold); font-size:13px; }
.how h3 { margin:0 0 6px; font-size:16px; }
.how li p { margin:0; color:var(--muted); font-size:13px; }
footer { display:flex; flex-direction:column; align-items:center; gap:16px; padding:26px 18px; border-top:1px solid #f5c3d125; background:#1e101b; text-align:center; }
footer p,footer .footer-line { margin:0; color:#ffe5a4; font-size:14px; }
footer>.button { width:100%; }
.download-dock { position:fixed; top:auto; right:auto; bottom:0; left:50%; transform:translateX(-50%); z-index:20; display:flex; flex-direction:column; width:100%; max-width:480px; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); background:#2b1626; border-top:1px solid #ffb4ca52; box-shadow:0 -5px 20px #0005; }
.download-dock .button { width:100%; font-size:18px; min-height:54px; }
.download-dock .download-meta { margin-top:6px; font-size:12px; }
.wa-fab { position:fixed; right:14px; bottom:calc(116px + env(safe-area-inset-bottom,0px)); z-index:30; width:54px; height:54px; border:0; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px #0008; }
.wa-fab svg { width:28px; height:28px; fill:#fff; }
.wa-fab[hidden] { display:none; }
body.h5-dialog-open .wa-fab { visibility:hidden; }
dialog { display:none; position:fixed; top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:calc(100% - 24px); max-width:448px; max-height:92vh; max-height:92dvh; margin:0; padding:48px 16px 0; overflow:auto; border:1px solid #edb7cb45; border-radius:14px; background:#2b1926; color:var(--paper); }
dialog[open] { display:block; }
dialog::backdrop { background:#000c; }
.close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:#513146; color:white; font-size:18px; }
.player-layout { display:block; }
.video-wrap { position:relative; overflow:hidden; border-radius:10px; background:#090909; }
#preview-video { display:block; width:100%; max-height:52vh; }
.video-brand { display:flex; align-items:center; gap:8px; margin-top:10px; }
.video-brand img { width:25px; height:25px; border-radius:7px; }
#playback-status { margin:10px 0; color:var(--gold); font-size:12px; }
#video-error { color:#ffc3b1; font-size:13px; }
.player-info { padding:18px 0; }
.player-info h2 { margin:8px 0 12px; font-size:24px; line-height:1.25; }
.player-info>p { margin:10px 0; color:var(--muted); font-size:14px; }
.player-info .eyebrow { color:#ffb5bf; font-size:9px; }
.player-pitch { display:none; }
.player-download-dock { position:sticky; bottom:0; padding:12px 0; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); background:#2b1926; border-top:1px solid #efc87e45; }
.player-download-dock .button { width:100%; font-size:15px; }
#gate { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 14px; text-align:center; background:#281423; }
#gate h2 { margin:0; font-size:26px; line-height:1.25; }
#gate p { margin:0; color:var(--muted); font-size:14px; }
#gate .button { width:100%; font-size:15px; }
.text-link { border:0; background:none; color:var(--gold); min-height:44px; padding:10px 6px; font-size:13px; }
.preview-complete .player-info,.preview-complete .video-brand,.preview-complete #playback-status,.preview-complete .player-download-dock { display:none; }
.preview-complete { padding-bottom:16px; }
#download-dialog { padding:44px 22px 22px; text-align:center; }
#download-dialog h2 { font-size:24px; }
#download-dialog p { color:var(--muted); }
.dialog-fallback { z-index:100; box-shadow:0 0 0 100vmax #000c; }
body.h5-dialog-open { overflow:hidden; }
body.h5-dialog-open>.download-dock { visibility:hidden; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Compact H5 masthead: brand and primary action, followed by navigation. */
.h5-header { padding:14px 16px 0; }
.header-main { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.h5-header .brand { display:flex; align-items:center; gap:8px; min-width:0; max-width:calc(100% - 124px); letter-spacing:0; }
.h5-header .brand img { flex-shrink:0; width:36px; height:36px; border-radius:10px; }
.brand-copy { display:flex; flex-direction:column; min-width:0; gap:3px; }
.brand-copy strong { font-size:21px; line-height:1.15; letter-spacing:-.5px; white-space:nowrap; }
.h5-header .header-free { display:block; padding:0; border:0; border-radius:0; background:none; color:#d4b9c8; font-size:8px; line-height:1.3; font-weight:500; letter-spacing:0; }
.h5-header a.header-download.button { display:inline-flex; flex-shrink:0; width:114px; min-height:44px; padding:11px 8px; border-radius:10px; font-size:13px; line-height:1.35; box-shadow:0 3px 12px #0b040520; }
.header-toolbar { display:flex; align-items:center; gap:10px; margin-top:12px; border-top:1px solid #f4bed126; }
.h5-header nav { flex:1; min-width:0; justify-content:space-between; gap:10px; margin:0; border:0; }
.h5-header nav a { flex:none; justify-content:flex-start; min-height:44px; padding:10px 0; font-size:11px; line-height:1.3; white-space:nowrap; }
.h5-header nav a:last-child { margin-left:0; }
.header-toolbar .language { flex-shrink:0; min-height:36px; min-width:63px; margin-left:2px; padding:6px 7px; border:1px solid #e8b4c43d; border-radius:8px; color:#ead4df; font-size:10px; line-height:1.3; background:#ffffff05; }
.download-help { margin:8px 16px; padding:4px 10px; border:0; background:none; font-size:12px; }
.download-help summary { color:#cdb6c6; min-height:28px; line-height:28px; }
.download-help[open] { padding:10px 12px; border:1px solid #ffdfa84d; background:#341b2c; }

/* Arabic (the official language of Dubai) locale. */
html[lang="ar"] body { font-family:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif; font-size:16px; line-height:1.8; }
html[lang="ar"] .brand,html[lang="ar"] .brand-copy strong,html[lang="ar"] .section-head h2,html[lang="ar"] .story-section-head h2,html[lang="ar"] .eyebrow,html[lang="ar"] .header-free,html[lang="ar"] .app-brand .eyebrow,html[lang="ar"] .poster-tag,html[lang="ar"] .story-count { letter-spacing:0; }
html[lang="ar"] em { font-style:normal; }
html[lang="ar"] .header-free { font-size:9px; }
html[lang="ar"] .hero-caption h2,html[lang="ar"] .section-head h2,html[lang="ar"] .story-section-head h2,html[lang="ar"] .download-panel h2,html[lang="ar"] .how h2,html[lang="ar"] #gate h2,html[lang="ar"] .player-info h2 { line-height:1.45; }
html[lang="ar"] .story-card h3 { line-height:1.55; }
html[dir="rtl"] .story-card { text-align:right; }
html[dir="rtl"] .poster-tag { left:auto; right:7px; }
html[dir="rtl"] .card-play { right:auto; left:8px; }
html[dir="rtl"] .close { right:auto; left:12px; }
html[dir="rtl"] .download-help input { direction:ltr; text-align:left; }

/* Three-language switch: keep the option list LTR even inside the RTL page. */
.header-toolbar .language { direction:ltr; unicode-bidi:isolate; white-space:nowrap; }
.header-toolbar .language b { color:var(--gold); font-weight:700; }

/* Small viewports (<=339px): fit the longer "Popular Dramas" brand name in the masthead. */
@media (max-width:339px) { .h5-header .brand-copy strong { font-size:14px; } }