/* Layout: ein 2,39:1-Filmbild, zentriert und letterboxed. HUD, Faktenkarte, Untertitel und Zeitleiste liegen im Bild. */
:root{
  --void:#04070a; --ink:#e7efe3; --mute:#8aa095; --moss:#9be37a; --amber:#ffb257; --teal:#6fe0c8; --warn:#ff7a59;
  --line:rgba(231,239,227,.2); --glass:rgba(4,8,10,.62); --acc:#9be37a;
  --f-voice:"Instrument Serif","Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0;background:var(--void);color:var(--ink);overflow:hidden}
body{font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;background:var(--void)}
#frame{position:absolute;overflow:hidden;background:#000;--u:10px}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#guides{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
   linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.4) calc(33.333% - .5px),rgba(255,255,255,.4) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
   linear-gradient(to right,transparent calc(66.666% - .5px),rgba(255,255,255,.4) calc(66.666% - .5px),rgba(255,255,255,.4) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
   linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.4) calc(33.333% - .5px),rgba(255,255,255,.4) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
   linear-gradient(to bottom,transparent calc(66.666% - .5px),rgba(255,255,255,.4) calc(66.666% - .5px),rgba(255,255,255,.4) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
   linear-gradient(to right,transparent calc(38.2% - .5px),rgba(255,190,90,.55) calc(38.2% - .5px),rgba(255,190,90,.55) calc(38.2% + .5px),transparent calc(38.2% + .5px)),
   linear-gradient(to right,transparent calc(61.8% - .5px),rgba(255,190,90,.55) calc(61.8% - .5px),rgba(255,190,90,.55) calc(61.8% + .5px),transparent calc(61.8% + .5px));}
#labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.lab{position:absolute;left:0;top:0;opacity:0;transition:opacity .6s;white-space:nowrap;will-change:transform}
.lab i{position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 10px var(--acc)}
.lab u{position:absolute;left:3px;top:-1px;width:calc(var(--u)*3.2);height:1px;background:var(--acc);transform-origin:0 0;transform:rotate(-28deg);text-decoration:none;opacity:.8}
.lab span{position:absolute;left:calc(var(--u)*2.9 + 4px);top:calc(var(--u)*-1.9 - .75em);font:500 max(10px,calc(var(--u)*1.02))/1.2 var(--f-mono);color:var(--ink);background:var(--glass);padding:.25em .6em;border:1px solid var(--line);letter-spacing:.02em}
.lab.l span{left:auto;right:calc(var(--u)*2.9 + 4px)}
.lab.l u{transform:scaleX(-1) rotate(-28deg);left:auto;right:3px}
#hudTop{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*2);padding:calc(var(--u)*1.6) calc(var(--u)*2.2);z-index:4;pointer-events:none}
#phase small{display:block;font:500 max(9px,calc(var(--u)*.85))/1 var(--f-mono);letter-spacing:.18em;color:var(--acc);text-transform:uppercase}
#phaseName{display:block;font:italic 400 max(22px,calc(var(--u)*3.6))/1.05 var(--f-voice);margin-top:.15em;text-shadow:0 2px 18px rgba(0,0,0,.7)}
#dayTxt{display:block;margin-top:.45em;font:500 max(11px,calc(var(--u)*1.1))/1 var(--f-mono);color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.8)}
#gauges{display:flex;gap:calc(var(--u)*1.4);align-items:center;background:var(--glass);border:1px solid var(--line);padding:calc(var(--u)*.9) calc(var(--u)*1.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#vpdBox{min-width:calc(var(--u)*13)}
#vpdBox .k{font:500 max(9px,calc(var(--u)*.8))/1 var(--f-mono);letter-spacing:.16em;color:var(--mute);display:flex;justify-content:space-between;gap:1em}
#vpdVal{font:500 max(18px,calc(var(--u)*2.6))/1 var(--f-mono);font-variant-numeric:tabular-nums;margin:.25em 0 .2em}
#vpdVal small{font-size:.42em;color:var(--mute);margin-left:.4em;letter-spacing:.08em}
#vbar{position:relative;height:calc(var(--u)*.7);min-height:6px;background:rgba(255,255,255,.1)}
#vband{position:absolute;top:0;bottom:0;background:var(--acc);opacity:.45}
#vmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);box-shadow:0 0 6px #fff}
#vscale{display:flex;justify-content:space-between;font:400 max(8px,calc(var(--u)*.7))/1 var(--f-mono);color:var(--mute);margin-top:3px}
#vEnv{margin-top:.6em;font:400 max(9px,calc(var(--u)*.85))/1.45 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
#vEnv em{font-style:normal;color:var(--mute)}
#clockBox{text-align:center}
#clock{width:calc(var(--u)*7.2);height:calc(var(--u)*7.2);min-width:48px;min-height:48px;display:block}
#clockTxt{font:500 max(9px,calc(var(--u)*.85))/1 var(--f-mono);color:var(--ink);margin-top:.3em;letter-spacing:.06em}
#card{position:absolute;left:calc(var(--u)*2.2);top:calc(var(--u)*11.5);width:calc(var(--u)*25);background:var(--glass);border:1px solid var(--line);border-left:3px solid var(--acc);padding:calc(var(--u)*1.1) calc(var(--u)*1.4);z-index:4;opacity:0;transform:translateX(-12px);transition:opacity .8s,transform .8s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
#card.on{opacity:1;transform:none}
#card h3{margin:0 0 .7em;font:600 max(11px,calc(var(--u)*1.15))/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
#card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5em 1em;font:400 max(10px,calc(var(--u)*1.0))/1.35 var(--f-mono)}
#card dt{color:var(--mute)}
#card dd{margin:0;color:var(--ink);text-align:right;font-weight:500}
#subs{position:absolute;left:0;right:0;bottom:calc(var(--u)*5.2);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);padding:0 calc(var(--u)*4);z-index:4;pointer-events:none;text-align:center}
.sub{max-width:min(92%,calc(var(--u)*64));opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.sub.on{opacity:1;transform:none}
.sub.p{font:italic 400 max(17px,calc(var(--u)*2.5))/1.2 var(--f-voice);color:#f6f8f1;text-shadow:0 2px 14px #000,0 0 3px #000}
.sub.i{font:400 max(11px,calc(var(--u)*1.25))/1.45 var(--f-mono);color:var(--ink);background:var(--glass);padding:.5em .9em;border-left:2px solid var(--acc);text-align:left;letter-spacing:.01em;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#tl{position:absolute;left:calc(var(--u)*2.2);right:calc(var(--u)*2.2);bottom:calc(var(--u)*1.3);z-index:6;cursor:pointer}
#tlseg{display:flex;gap:2px;height:calc(var(--u)*.55);min-height:5px}
#tlseg div{position:relative;background:rgba(255,255,255,.14);overflow:hidden}
#tlseg div b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc)}
#tlnames{display:flex;gap:2px;margin-top:4px;font:400 max(8px,calc(var(--u)*.72))/1.1 var(--f-mono);color:var(--mute);letter-spacing:.03em}
#tlnames span{overflow:hidden;white-space:nowrap;text-overflow:clip}
#tlnames span.now{color:var(--ink)}
#tlTime{position:absolute;right:0;top:calc(var(--u)*-1.8);font:400 max(9px,calc(var(--u)*.85))/1 var(--f-mono);color:var(--mute);font-variant-numeric:tabular-nums}
#seedTag{display:none;position:absolute;right:calc(var(--u)*2.2);bottom:calc(var(--u)*3.6);font:400 max(8px,calc(var(--u)*.7))/1 var(--f-mono);color:rgba(231,239,227,.4);z-index:4}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
#endcard{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.2);z-index:7;background:rgba(2,5,6,.55);text-align:center;padding:0 calc(var(--u)*3)}
#endcard.on{display:flex}
#endcard h2{margin:0;font:italic 400 max(30px,calc(var(--u)*6))/1 var(--f-voice)}
#endcard p{margin:0;font:400 max(11px,calc(var(--u)*1.2))/1.5 var(--f-mono);color:var(--mute);max-width:calc(var(--u)*55)}
button.b{font:600 max(11px,calc(var(--u)*1.1))/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--void);background:var(--moss);border:0;padding:.9em 1.6em;cursor:pointer}
button.b.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.b:focus-visible,#tools button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#tools{position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 10px);display:flex;gap:6px;z-index:20;opacity:0;transition:opacity .4s}
#tools.show,#tools:hover,#tools:focus-within{opacity:1}
#tools button{font:500 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--ink);background:var(--glass);border:1px solid var(--line);padding:.7em .9em;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#tools button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
#start{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 100%,#0e1f14 0%,var(--void) 62%);padding:max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px))}
#start[hidden]{display:none}
#start .in{max-width:640px;display:flex;flex-direction:column;gap:18px}
#start .eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
#start h1{margin:0;font:italic 400 clamp(44px,9vw,92px)/.95 var(--f-voice);text-wrap:balance}
#start p{margin:0;font:400 15px/1.55 var(--f-ui);color:var(--mute);max-width:52ch}
#start .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
#start .meta{font:400 12px/1.5 var(--f-mono);color:var(--mute)}
#loadmsg{font:400 12px/1.4 var(--f-mono);color:var(--warn)}
.narrow #card{top:calc(var(--u)*13);width:calc(var(--u)*38)}
.narrow #clockBox{display:none}
.narrow #subs{bottom:calc(var(--u)*6.2)}
@media (prefers-reduced-motion:reduce){.sub,#card,.lab{transition:none}}