/* PlanetPast shared film player: shell layout, splash, card, subtitles, dock, chapter rail, panel, Audio & Subtitles menu.
   A story only sets its look with tokens (fonts, --acc per chapter) and styles its own HUD extras and panel blocks. */
:root{
  color-scheme:dark;
  --void:#03050a; --panel:#0a0e15; --raise:#111824; --line:#1f2937;
  --ink:#eceef1; --dim:#9aa4b3; --faint:#5f6a7b;
  --acc:#ffb36b; --acc-soft:#ffd7ad; --acc-deep:#5e3a1a; --acc-ink:#1a0d02;
  --f-title:'Newsreader',Georgia,'Times New Roman',serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --f-th-title:'Noto Serif Thai','Newsreader',Georgia,serif;
  --f-th-body:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;
  --lb:7.5%;
}
html,body{height:100%;margin:0;background:var(--void);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.65}
*{box-sizing:border-box}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc-soft);outline-offset:2px}
a{color:var(--dim)}
[hidden]{display:none!important}
html[lang=th]{--f-title:var(--f-th-title);--f-body:var(--f-th-body)}
html[lang=th] .card h1{line-height:1.25}html[lang=th] .splash h1{line-height:1.2}html[lang=th] h2{line-height:1.38}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:minmax(0,1fr) 430px;height:100%}
.app[data-mode=film]{grid-template-columns:minmax(0,1fr)}
.app[data-mode=film] .panel{display:none}
.stage{position:relative;overflow:hidden;background:#000;min-width:0}
.stage>canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.stage>canvas#gl:active{cursor:grabbing}
.lb{position:absolute;left:0;right:0;height:0;background:#000;z-index:4;transition:height .9s cubic-bezier(.6,0,.2,1);pointer-events:none}
.lb.t{top:0}.lb.b{bottom:0}
.app[data-mode=film] .lb{height:var(--lb)}

/* ---------- chapter card ---------- */
.card{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none;transition:opacity 1.1s ease;overflow:hidden}
.card.on{opacity:1;pointer-events:auto;cursor:pointer}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.on img{animation:pp-kb 9s ease-out both}
@keyframes pp-kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(var(--px,-1.5%),var(--py,-1%))}}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.15) 42%,rgba(0,0,0,0) 60%),radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.card .ct{position:absolute;left:clamp(20px,6vw,80px);right:clamp(20px,6vw,80px);bottom:clamp(70px,16%,150px);z-index:2;display:grid;gap:8px}
.card .ch{font-family:var(--f-mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.card .k{font-family:var(--f-mono);font-size:clamp(12px,1.3vw,15px);letter-spacing:.14em;color:var(--acc-soft)}
.card h1{font-family:var(--f-title);font-weight:700;font-size:clamp(32px,6vw,80px);line-height:1.12;margin:0;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.card .d{max-width:60ch;color:#d9dde3;font-size:clamp(13px,1.3vw,16px)}
.card .x{position:absolute;right:18px;top:16px;z-index:3;font-size:12px;color:#c7ccd3;background:rgba(0,0,0,.45);padding:3px 10px;border-radius:999px}
.app[data-mode=film] .card .x{top:calc(var(--lb) + 10px)}
.card.on .ct{animation:pp-rise 1.6s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes pp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- subtitles ---------- */
.subs{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);width:min(880px,calc(100% - 32px));text-align:center;z-index:5;pointer-events:none;
  font-family:var(--f-title);font-weight:500;font-size:clamp(16px,1.9vw,24px);line-height:1.45;color:#fff;text-shadow:0 1px 3px #000,0 0 22px rgba(0,0,0,.9);transition:opacity .35s}
.subs:lang(th){font-family:var(--f-th-title);line-height:1.55}
.subs.hide{opacity:0}
.app[data-mode=film] .subs{bottom:calc(var(--lb) + 110px)}

/* ---------- HUD, readout, pins ---------- */
.hud{position:absolute;left:18px;top:16px;display:grid;gap:3px;pointer-events:none;max-width:calc(100% - 330px);z-index:5}
.app[data-mode=film] .hud{top:calc(var(--lb) + 10px)}
.hud .brand{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-soft)}
.hud .clock{font-family:var(--f-mono);font-size:clamp(20px,2.8vw,30px);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2;text-shadow:0 1px 8px #000}
.hud .sub{font-size:13px;color:var(--acc-soft);text-shadow:0 1px 6px #000}
.hud .scale{font-size:11.5px;color:var(--faint)}
.readout{position:absolute;right:16px;top:16px;width:min(270px,calc(100% - 32px));background:rgba(9,12,17,.78);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:12.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5}
.app[data-mode=film] .readout{display:none}
.readout h4{margin:0 0 6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500}
.readout .row{display:flex;justify-content:space-between;gap:10px}
.readout .row b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.readout .hint{color:var(--faint);margin-top:6px;line-height:1.45}
.readout .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.readout .acts button{border:1px solid var(--acc-deep);background:#0e141d;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--acc-soft)}
.readout .acts button:hover,.readout .acts button.on{background:var(--acc);color:var(--acc-ink)}
.readout canvas{display:block;width:100%;height:auto;margin:6px 0 2px;border-radius:4px;background:#070a0f}
.meter{height:5px;border-radius:3px;background:#1d2530;margin:3px 0 6px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--acc)}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--dim)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.pins{position:absolute;inset:0;pointer-events:none;z-index:3}
.app[data-mode=film] .pins{display:none}
.pin{position:absolute;transform:translate(-50%,-100%);font-size:11.5px;white-space:nowrap;display:flex;flex-direction:column;align-items:center}
.pin span{background:rgba(4,5,8,.7);padding:1px 6px;border-radius:3px;border:1px solid var(--line)}
.pin i{width:1px;height:14px;background:var(--acc-soft)}
.pin.main span{border-color:var(--acc);color:var(--acc-soft)}

/* ---------- dock ---------- */
.dock{position:absolute;left:0;right:0;bottom:0;padding:10px 16px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;z-index:7;background:linear-gradient(0deg,rgba(0,0,0,.9) 30%,rgba(0,0,0,0))}
.app[data-mode=film] .dock{opacity:.35;transition:opacity .3s}
.app[data-mode=film] .dock:hover,.app[data-mode=film] .dock:focus-within,.app[data-mode=film].menu-open .dock{opacity:1}
.bar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.scrub{display:flex;align-items:center;gap:10px;flex:1 1 320px;min-width:0}
.play,.nav{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--raise);display:grid;place-items:center;cursor:pointer;padding:0}
.nav{width:30px;height:30px}
.play:hover,.nav:hover{border-color:var(--acc)}
.play svg,.nav svg{width:13px;height:13px;fill:var(--ink)}
.play[hidden],#scrub[hidden],.scrub .lbl[hidden]{display:none!important}
#scrub{flex:1;min-width:0;accent-color:var(--acc);height:22px}
.scrub .lbl{flex:none;font-family:var(--f-mono);font-size:12px;color:var(--dim);min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.tools{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.tbtn{border:1px solid #2c3644;background:#10151d;border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tbtn:hover{border-color:var(--acc)}
.tbtn.hot{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.tbtn svg{width:16px;height:16px;flex:none}
.tbtn.av[aria-expanded=true]{background:#fff;color:#000;border-color:#fff}
.rail{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{flex:1 0 auto;min-width:92px;border:0;background:none;padding:4px 6px 2px;text-align:left;cursor:pointer;color:var(--faint);display:grid;gap:3px}
.rail .segs{display:flex;gap:2px}
.rail .segs i{flex:1;height:2px;background:#283240}
.rail .segs i.done{background:var(--acc-deep)}
.rail .segs i.on{background:var(--acc)}
.rail b{font-family:var(--f-mono);font-weight:500;font-size:11px}
.rail span{font-size:12.5px;white-space:nowrap}
.rail button:hover{color:var(--dim)}
.rail button.on{color:var(--ink)}

/* ---------- Audio & Subtitles menu (Netflix-style) ---------- */
.avmenu{position:absolute;right:16px;bottom:118px;z-index:30;min-width:min(420px,calc(100% - 32px));max-width:calc(100% - 32px);
  background:rgba(20,22,26,.96);border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.6);
  padding:18px 8px 10px;font-family:system-ui,-apple-system,'Segoe UI','IBM Plex Sans Thai',sans-serif;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.avmenu.at-top{top:calc(60px + env(safe-area-inset-top,0px));bottom:auto}
.app[data-mode=film] .avmenu:not(.at-top){bottom:calc(var(--lb) + 104px)}
.avcols{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.avcol h4{margin:0 0 8px;padding:0 14px;font-size:17px;font-weight:700;letter-spacing:0}
.avcol ul{list-style:none;margin:0;padding:0}
.avcol button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:#b3b3b3;font-size:15px;line-height:1.3;text-align:left;padding:8px 14px 8px 38px;cursor:pointer;position:relative;border-radius:4px}
.avcol button:hover,.avcol button:focus-visible{color:#fff;background:rgba(255,255,255,.06)}
.avcol button[aria-checked=true]{color:#fff;font-weight:600}
.avcol button[aria-checked=true]::before{content:"";position:absolute;left:14px;top:50%;width:13px;height:7px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-70%) rotate(-45deg)}
.avcol button small{font-size:11.5px;color:#8a8a8a;font-weight:400}
.avfoot{display:flex;flex-wrap:wrap;gap:8px;margin:12px 14px 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.avfoot button{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);background:none;color:#ddd;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.avfoot button i{width:26px;height:15px;border-radius:999px;background:#555;position:relative;flex:none;transition:background .2s}
.avfoot button i::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .2s}
.avfoot button[aria-checked=true] i{background:#e50914}
.avfoot button[aria-checked=true] i::after{transform:translateX(11px)}
.avnote{margin:8px 14px 2px;font-size:12px;color:#9a9a9a;line-height:1.45}
.avpick{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;z-index:21;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(0,0,0,.45);color:#fff;padding:6px 14px 6px 11px;font:500 13px system-ui,-apple-system,'Segoe UI','IBM Plex Sans Thai',sans-serif;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.avpick:hover,.avpick[aria-expanded=true]{background:rgba(0,0,0,.7);border-color:#fff}
.avpick svg{width:17px;height:17px}

/* ---------- splash ---------- */
.splash{position:absolute;inset:0;z-index:20;background:#000;display:grid;align-items:end;overflow:hidden;transition:opacity 1s}
.splash.gone{opacity:0;pointer-events:none}
.splash>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pp-kb 20s ease-out both;opacity:.85}
.splash::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 8%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.35) 100%)}
.splash .in{position:relative;z-index:2;padding:clamp(24px,6vw,80px);display:grid;gap:14px;max-width:920px}
.splash .k{font-family:var(--f-mono);letter-spacing:.2em;font-size:13px;color:var(--acc-soft);text-transform:uppercase}
.splash h1{font-family:var(--f-title);font-weight:700;font-size:clamp(40px,8vw,104px);line-height:1.05;margin:0;text-wrap:balance}
.splash p{margin:0;color:#d5d9df;max-width:58ch;font-size:clamp(14px,1.4vw,17px)}
.splash .five{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--f-mono);font-size:12px;color:var(--dim)}
.splash .five span b{color:var(--ink);font-weight:500}
.splash .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.bigbtn{border:0;border-radius:999px;padding:12px 22px;font-size:15px;cursor:pointer;font-weight:600}
.bigbtn.primary{background:var(--acc);color:var(--acc-ink)}
.bigbtn.primary:hover{background:var(--acc-soft)}
.bigbtn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:var(--ink)}
.bigbtn:disabled{opacity:.45;cursor:wait}
.prog{font-family:var(--f-mono);font-size:12px;color:var(--dim)}

/* ---------- side panel (shared content blocks) ---------- */
.panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;min-width:0}
.panel-inner{padding-inline:22px;padding-block:20px 40px;display:grid;gap:18px}
.kicker{font-family:var(--f-mono);font-size:12px;color:var(--acc-soft)}
.panel h2{font-family:var(--f-title);font-weight:700;font-size:28px;line-height:1.25;margin:0;text-wrap:balance}
.lead{margin:0;max-width:65ch}
.panel p{margin:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:0}
.stat{background:var(--panel);padding:10px 12px;display:grid;gap:2px;align-content:start;min-width:0}
.stat dt{font-size:12px;color:var(--dim)}
.stat dd{margin:0;font-family:var(--f-mono);font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat dd.t{font-family:var(--f-body);font-size:14px}
.stat small{font-size:11.5px;color:var(--faint);line-height:1.4}
.stat.wide{grid-column:1/-1}
.panel h3{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:6px 0 0;font-weight:500}
.chain{margin:0;padding:0;list-style:none;display:grid;counter-reset:c}
.chain li{position:relative;padding:0 0 12px 30px;counter-increment:c}
.chain li::before{content:counter(c);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;border:1px solid var(--acc-deep);color:var(--acc-soft);font:500 11px/18px var(--f-mono);text-align:center}
.chain li::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:1px;background:var(--line)}
.chain li:last-child::after{display:none}
.list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.list li .t{font-family:var(--f-mono);font-size:12.5px;color:var(--acc-soft);min-width:64px}
.note{font-size:13px;color:var(--dim);border-left:2px solid var(--line);padding-left:12px}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);margin:0 4px 4px 0}
.refs{font-size:12px;color:var(--faint);line-height:1.7}
.howto{font-size:12.5px;color:var(--faint)}

/* ---------- small screens ---------- */
@media (max-width:900px){
  html,body{height:auto}
  .app{grid-template-columns:1fr;height:auto}
  .stage{height:66vh;min-height:420px}
  .app[data-mode=film]{height:100%}
  .app[data-mode=film] .stage{height:100svh}
  .panel{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .panel-inner{padding-inline:16px}
  .hud{max-width:calc(100% - 32px)}
  .readout{top:auto;bottom:178px;right:12px;width:min(230px,calc(100% - 24px));padding:8px 10px}
  .subs{bottom:160px}
  .tools{margin-left:0}
  .panel h2{font-size:24px}
}
@media (max-width:600px){.stage{height:80svh;min-height:560px}.hud{left:12px;top:10px}.hud .clock{font-size:20px}.hud .sub{font-size:12px}
  .subs{bottom:200px;font-size:15.5px;line-height:1.4;width:calc(100% - 20px)}.tbtn{padding:4px 10px;font-size:12px}.dock{gap:6px;padding:8px 10px 10px}
  .tbtn .lbl-long{display:none}
  .avmenu{left:10px;right:10px;min-width:0;max-width:none;bottom:150px}
  .avcol h4{font-size:15px;padding:0 10px}.avcol button{font-size:14px;padding:7px 10px 7px 32px}.avcol button[aria-checked=true]::before{left:11px}}
@media (max-width:420px){.stats{grid-template-columns:1fr}.hud .scale{display:none}
  .readout{top:78px;bottom:auto;right:8px;left:auto;width:auto;max-width:70%;padding:6px 8px;font-size:11px}
  .readout .row,.readout .hint,.readout .legend,.readout canvas,.readout .meter{display:none}
  .readout h4{margin:0 0 2px;font-size:10px}.readout .acts{margin-top:2px;gap:4px}.readout .acts button{padding:3px 8px;font-size:11px}
  .readout.noacts{display:none}}
@media (prefers-reduced-motion:reduce){.card.on img,.splash>img{animation:none}}