:root{ --gold:#f0cd7e; --gold2:#ffb347; --ink:#f4ead6; --dim:rgba(244,234,214,.7); --faint:rgba(244,234,214,.45); --glass:rgba(10,8,6,.62); --line:rgba(240,205,126,.25);
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif; --display:'Cinzel', 'Trajan Pro', Georgia, serif; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:#000; color:var(--ink); font-family:var(--serif); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
*::selection{ background:transparent; }
#film{ position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden{ display:none !important; }
.screen{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 40%, rgba(60,36,10,.55), rgba(0,0,0,.92) 70%); overflow-y:auto; }
.startBox{ width:min(620px, 100%); text-align:center; margin:auto; }
.kicker{ font-family:var(--display); letter-spacing:.35em; text-transform:uppercase; font-size:12px; color:var(--gold); opacity:.85; }
h1{ font-family:var(--display); font-weight:700; font-size:clamp(34px, 7vw, 64px); line-height:1.02; margin:14px 0 10px; letter-spacing:.06em; text-shadow:0 0 40px rgba(255,170,60,.35); }
h1 span{ font-size:.62em; color:var(--gold); letter-spacing:.14em; }
h2{ font-family:var(--display); font-weight:500; font-size:clamp(24px, 4.6vw, 38px); margin:12px 0 22px; letter-spacing:.04em; }
.lede{ font-size:clamp(16px, 2.4vw, 19px); color:var(--dim); line-height:1.5; margin:0 auto 22px; max-width:520px; font-style:italic; }
.bigPlay{ display:inline-flex; align-items:center; gap:10px; padding:14px 30px 14px 24px; border-radius:999px; border:1px solid rgba(255,205,126,.7); background:radial-gradient(circle at 50% 30%, rgba(255,190,90,.35), rgba(120,70,20,.35)); color:var(--ink); font-family:var(--display); font-size:18px; letter-spacing:.2em; cursor:pointer; box-shadow:0 0 40px rgba(255,160,50,.25); }
.bigPlay svg{ width:22px; height:22px; fill:var(--gold); }
.bigPlay:hover{ box-shadow:0 0 60px rgba(255,160,50,.45); }
.startMeta{ margin-top:12px; font-size:14px; color:var(--faint); }
.toggle{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; color:var(--dim); cursor:pointer; }
.toggle input{ accent-color:#d9922b; width:16px; height:16px; }
.chapters{ margin-top:26px; display:grid; gap:6px; text-align:left; border-top:1px solid var(--line); padding-top:16px; }
.chap{ display:grid; grid-template-columns:78px 1fr auto; gap:10px; align-items:baseline; padding:7px 10px; border-radius:10px; background:transparent; border:0; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.chap:hover, .chap.now{ background:rgba(240,205,126,.1); }
.chap .n{ font-family:var(--display); color:var(--gold); font-size:13px; letter-spacing:.1em; }
.chap .nm{ font-size:17px; }
.chap .nm small{ display:block; color:var(--faint); font-size:13px; font-style:italic; }
.chap .at{ color:var(--faint); font-size:13px; font-variant-numeric:tabular-nums; }

#ui{ position:fixed; inset:0; z-index:10; pointer-events:none; transition:opacity .4s; }
#ui.idle{ opacity:0; }
#ui.idle *{ cursor:none; }
.topBar{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:14px; padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 30px max(16px, env(safe-area-inset-left)); background:linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.back{ pointer-events:auto; display:inline-flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; font-size:15px; padding:6px 10px 6px 4px; border-radius:10px; }
.back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.chapterNow{ font-family:var(--display); letter-spacing:.14em; font-size:12px; color:var(--gold); text-transform:uppercase; margin-left:auto; text-align:right; }
.bottomBar{ position:absolute; left:0; right:0; bottom:0; padding:30px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background:linear-gradient(0deg, rgba(0,0,0,.75), transparent); pointer-events:auto; }
.row{ display:flex; align-items:center; gap:6px; }
.grow{ flex:1; }
.icon{ width:40px; height:40px; border-radius:10px; border:0; background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#ppBtn svg{ fill:currentColor; stroke:none; }
.icon.txt{ width:auto; padding:0 8px; font:700 11px/1 system-ui, sans-serif; letter-spacing:.08em; color:var(--faint); border:1px solid rgba(255,255,255,.18); height:26px; }
.icon.txt.on{ color:#1a1206; background:var(--gold); border-color:var(--gold); }
.icon:hover{ background:rgba(255,255,255,.08); }
.time{ font:13px system-ui, sans-serif; color:var(--dim); font-variant-numeric:tabular-nums; margin-left:6px; white-space:nowrap; }
.vol{ display:inline-flex; align-items:center; gap:4px; }
.vol svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
.vol input{ width:80px; accent-color:#d9922b; }
.scrub{ position:relative; height:22px; margin-bottom:4px; cursor:pointer; touch-action:none; }
.scrub .track{ position:absolute; left:0; right:0; top:9px; height:4px; border-radius:4px; background:rgba(255,255,255,.2); overflow:hidden; }
.scrub .track i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #d9922b, var(--gold)); }
.scrub .knob{ position:absolute; top:5px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(255,180,80,.6); }
#scrubTicks i{ position:absolute; top:7px; width:2px; height:8px; margin-left:-1px; background:rgba(0,0,0,.7); }
.scrub .tip{ position:absolute; bottom:22px; transform:translateX(-50%); background:var(--glass); border:1px solid var(--line); padding:4px 8px; border-radius:8px; font:12px system-ui, sans-serif; white-space:nowrap; display:none; }
.scrub:hover .tip{ display:block; }
.chapMenu{ position:absolute; right:max(16px, env(safe-area-inset-right)); bottom:84px; width:min(340px, calc(100vw - 32px)); max-height:60vh; overflow-y:auto; background:rgba(12,9,6,.92); border:1px solid var(--line); border-radius:14px; padding:12px; pointer-events:auto; }
.chapMenu h3{ margin:2px 8px 8px; font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--gold); font-weight:500; }
.endBox h2{ text-shadow:0 0 30px rgba(255,170,60,.35); }
.endBtns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:var(--ink); text-decoration:none; font:600 15px system-ui, sans-serif; cursor:pointer; }
.btn.gold{ background:linear-gradient(180deg, #f3c66f, #c7862b); color:#1d1206; border-color:#ffd88a; }
#rotateHint{ position:fixed; left:50%; bottom:max(90px, calc(env(safe-area-inset-bottom) + 80px)); transform:translateX(-50%); z-index:11; background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font:13px system-ui, sans-serif; color:var(--dim); pointer-events:none; white-space:nowrap; }
@media (max-width:560px){ .vol input{ width:56px; } .time{ font-size:12px; } .icon{ width:34px; } .back span{ display:none; } }

/* version picker */
.versions{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 auto 18px; max-width:560px; }
.versions .ver{ border:1px solid var(--line); background:rgba(0,0,0,.35); color:var(--ink); border-radius:12px; padding:10px 8px; cursor:pointer; font:inherit; text-align:center; }
.versions .ver b{ display:block; font-family:var(--display); font-size:15px; letter-spacing:.06em; }
.versions .ver small{ display:block; color:var(--faint); font-size:12.5px; font-style:italic; margin-top:3px; }
.versions .ver.on{ border-color:var(--gold); background:rgba(240,205,126,.14); box-shadow:0 0 18px rgba(255,170,60,.18); }
.versions.small{ grid-template-columns:1fr; gap:6px; margin:0 0 12px; }
.versions.small .ver{ text-align:left; padding:8px 10px; }
@media (max-width:520px){ .versions{ grid-template-columns:1fr; } .versions .ver{ text-align:left; } }
.adsLink{ display:flex; flex-direction:column; gap:3px; margin:18px auto 0; max-width:460px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(240,205,126,.07); color:var(--ink); text-decoration:none; text-align:center; }
.adsLink b{ font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:14px; color:var(--gold); }
.adsLink span{ font-size:14px; color:var(--dim); font-style:italic; }
.adsLink:hover{ background:rgba(240,205,126,.14); }