/* StoryFlick — portal styles on top of shell.css. Night purple + warm lamp. */
:root{--accent:#7c5cff;--accent2:#ffb86b;--bg:#0f0e1a;--bg2:#17162a;--card:#1e1c33;--line:#2b2944;--paper:#fbf4e6;--ink:#2b2340}
.hero{padding:40px 24px 34px;background:radial-gradient(900px 380px at 15% -20%,rgba(124,92,255,.55),transparent 60%),radial-gradient(700px 300px at 100% 120%,rgba(255,184,107,.35),transparent 60%),var(--bg2)}
.hero .moon{position:absolute;inset-inline-end:48px;top:30px;width:84px;height:84px;border-radius:50%;background:transparent;box-shadow:-24px 12px 0 0 var(--accent2),-24px 12px 50px 8px rgba(255,184,107,.35)}
[dir=rtl] .hero .moon{box-shadow:24px 12px 0 0 var(--accent2),24px 12px 50px 8px rgba(255,184,107,.35)}
.hero .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 10% 20%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 30% 60%,#fff 60%,transparent),radial-gradient(2px 2px at 55% 15%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 75% 70%,#fff 60%,transparent),radial-gradient(1px 1px at 88% 30%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 45% 85%,#fff 60%,transparent),radial-gradient(1px 1px at 20% 90%,#fff 60%,transparent);opacity:.7}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.hero h1,.hero p,.hero .kicker{position:relative}
.hero .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative}
.hero .pills span{background:rgba(255,255,255,.08);border:1px solid var(--line);padding:5px 11px;border-radius:999px;font-size:.78rem;color:var(--muted)}
.chips-row{display:flex;flex-direction:column;gap:2px}
.chips .chip.age{border-color:rgba(255,184,107,.35)}.chips .chip.age.active{background:var(--accent2);color:#2b1a00;border-color:var(--accent2)}
.rail>*{flex:0 0 170px}@media(min-width:760px){.rail>*{flex:0 0 190px}}
.card .fav{position:absolute;top:8px;inset-inline-start:8px;background:rgba(0,0,0,.55);color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px}
.card .fav.on{background:var(--accent);color:#fff}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card .meta .dot::before{content:"·";margin:0 2px}
.card .age-tag{background:rgba(255,184,107,.15);color:var(--accent2);padding:1px 7px;border-radius:999px;font-size:.72rem;font-weight:700}
.card .free-tag{position:absolute;top:8px;inset-inline-end:8px;background:#163d2a;color:#5ee39a;font-size:.7rem;font-weight:800;padding:4px 8px;border-radius:999px}
.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.count{color:var(--muted);font-size:.85rem;font-weight:500}
/* reader */
.reader{display:grid;gap:18px;margin:18px 0 10px}@media(min-width:900px){.reader{grid-template-columns:300px 1fr;align-items:start}}
.reader .side{position:relative}@media(min-width:900px){.reader .side{position:sticky;top:76px}}
.reader .cover{border-radius:22px;width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:var(--shadow)}
.reader h1{margin:14px 0 6px;font-size:1.7rem;line-height:1.2}
.reader .meta{color:var(--muted);margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.reader .actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.moral{background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(255,184,107,.18));border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-weight:600;line-height:1.5}
.moral small{display:block;color:var(--accent2);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
/* player */
.player{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin:14px 0}
.player .row{display:flex;align-items:center;gap:10px}
.player .play{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;display:grid;place-items:center;flex:0 0 52px}
.player .play:disabled{opacity:.5;cursor:not-allowed}
.player .bar{flex:1;height:8px;border-radius:999px;background:var(--bg2);position:relative;cursor:pointer;overflow:hidden}
.player .bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;border-radius:999px}
.player .time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem;min-width:84px;text-align:center;direction:ltr}
.player .opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;align-items:center}
.player .opts .lbl{color:var(--muted);font-size:.78rem;font-weight:700;margin-inline-end:2px}
.player .opt{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.player .opt.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.player .opt.sleep.active{background:var(--accent2);color:#2b1a00;border-color:var(--accent2)}
.player .sleep-left{color:var(--accent2);font-size:.78rem;font-weight:700;margin-inline-start:auto}
.player .note{color:var(--muted);font-size:.78rem;margin-top:8px}
/* read-along text */
.story-text{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 20px 26px;position:relative}
.story-text .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.story-text .tools .opt{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:700}
.story-text .tools .opt.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.prose{font-size:1.25rem;line-height:1.95;max-width:none;letter-spacing:.01em}
.prose p{margin:0 0 1.1em}.prose p.verse{padding-inline-start:18px;border-inline-start:3px solid var(--accent2);font-style:italic;white-space:pre-line}
[lang=ar] .prose{font-size:1.4rem;line-height:2.1;letter-spacing:0}
.prose.big{font-size:1.5rem}[lang=ar] .prose.big{font-size:1.65rem}
.prose .end{color:var(--muted);text-align:center;margin-top:24px;font-size:1rem}
/* paper (lamp) mode */
.story-text.paper{background:var(--paper);color:var(--ink);border-color:#e8dcc4}
.story-text.paper .tools{border-color:#e8dcc4}.story-text.paper .tools .opt{background:#f1e7d3;border-color:#e2d4b8;color:#6b5c82}
.story-text.paper .tools .opt.active{background:var(--accent);color:#fff}
.story-text.paper .prose .end{color:#8a7aa0}
/* lock panel */
.locked .prose{max-height:260px;overflow:hidden;position:relative}
.locked .prose::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(transparent,var(--card))}
.locked .story-text.paper .prose::after{background:linear-gradient(transparent,var(--paper))}
.lock-panel{display:none;margin-top:10px;background:linear-gradient(135deg,rgba(124,92,255,.3),rgba(255,184,107,.2));border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center}
.locked .lock-panel{display:block}.lock-panel h3{margin:0 0 6px}.lock-panel p{margin:0 0 12px;color:var(--muted)}
.is-subscribed .locked .prose{max-height:none}.is-subscribed .locked .prose::after{display:none}.is-subscribed .locked .lock-panel{display:none}
/* page content */
.page{max-width:780px;margin:18px auto}.page h1{font-size:1.8rem;margin:8px 0 14px}.page h2{font-size:1.15rem;margin:22px 0 8px;color:var(--accent2)}
.page p,.page li{color:#d6d4e4;line-height:1.75}.page ul{padding-inline-start:20px}
.page .box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:14px 0}
html[lang=ar] .only-en{display:none}html[lang=en] .only-ar{display:none}
.ftr .logo-sm{font-weight:800;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ftr .logo-sm img{width:22px;height:22px;border-radius:6px}
.brand img{width:30px;height:30px;border-radius:9px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;margin-top:14px}
.next-rail{margin-top:26px}
.empty-fav{padding:26px 14px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:16px}
@media(max-width:420px){.hero{padding:28px 18px 26px}.hero .moon{width:60px;height:60px;top:18px;inset-inline-end:40px}.prose{font-size:1.15rem}[lang=ar] .prose{font-size:1.3rem}}