/* 1337 Integration Quest — player app. Builds on theme.css (era tokens, tile materials, timers, pillars).
   Layout concept: the poster is the world. A cover-fitted camera frames it: wide on the title screens (sign-in,
   PIN, lobby, podium), pushed into an era's gate for the round intro and kept, softened, behind the round. The
   poster's own lettering slots become ours: a title plate where its logo is printed, a base where "STAY TUNED"
   is. Phones stack thumb-first; laptops (the "wide" query at the end) get a two-pane stage. */

/* ---------- shell ---------- */
html,body{height:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:var(--c-night)}
button,input{font:inherit}
#app{height:100vh;height:100dvh;padding:0;display:flex;flex-direction:column;
  /* the camera box: the 16:9 poster, cover-fitted to the app (container units resolve against #app) */
  --cw:max(100cqw,177.7778cqh);--ch:max(100cqh,56.25cqw);
  --gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px));
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  --s:1;--tx:0%;--ty:0%;--cut:22px}
#app .screens{flex:1;min-height:0;height:auto}
#app .screen{padding:max(14px,var(--st)) var(--gr) max(14px,var(--sb)) var(--gl);transition:opacity .22s ease,visibility 0s linear .22s}
#app .screen.on{transition:opacity .45s ease .1s,visibility 0s}
#app[data-hud] .screen{padding-top:6px}
.dots i{font-style:normal;animation:dot 1.4s infinite both}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.15}40%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- the world ---------- */
.world{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--c-night)}
.cam{position:absolute;left:calc(50% - var(--cw) / 2);top:calc(50% - var(--ch) / 2);width:var(--cw);height:var(--ch);
  transform:scale(var(--s)) translate(var(--tx),var(--ty));transform-origin:50% 50%;will-change:transform;
  transition:transform 1.3s cubic-bezier(.65,0,.3,1)}
.cam{animation:fadeIn .7s ease both}
.cam-img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;user-select:none}
.cam-img.soft{opacity:0;filter:blur(5px) brightness(.85) saturate(1.3);transition:opacity .9s ease}
#app.cut .cam{transition:none}

/* Shots. Gate centres in poster coordinates: stone (21%, 60%), kingdom (50%, 60%), future (80%, 60%); translate = 50% − centre.
   "-near" frames the gate, "-in" walks into its light, the bare era name frames the gate again, softened: the air of the round.
   Gate framings stay between y 40.5% and 86.4% of the poster, so no cover or panel is ever in shot. */
#app[data-shot^=stone]{--tx:29%}
#app[data-shot^=medieval]{--tx:0%}
#app[data-shot^=future]{--tx:-30%}
#app[data-shot$=-near],#app[data-shot=stone],#app[data-shot=medieval],#app[data-shot=future]{--s:2.4;--ty:-13%}
#app[data-shot$=-in]{--s:4.4;--ty:-10%}
#app[data-shot=stone] .cam-img.soft,#app[data-shot=medieval] .cam-img.soft,#app[data-shot=future] .cam-img.soft{opacity:1}
#app[data-shot$=-near] .cam{transition-duration:.6s;transition-timing-function:cubic-bezier(.3,0,.25,1)}
#app[data-shot$=-in] .cam{transition-duration:.75s;transition-timing-function:cubic-bezier(.55,0,.9,.45)}
/* landscape screens are width-limited sooner: zoom further so the gate shots always cover the screen */
@media (min-aspect-ratio:1/1){
  #app[data-shot$=-near],#app[data-shot=stone],#app[data-shot=medieval],#app[data-shot=future]{--s:2.6;--ty:-12%}
  #app[data-shot$=-in]{--s:5.4}
}

/* Covers live in poster coordinates (inside .cam), so the printed lettering stays hidden at every size and through
   every camera move. Sky: the clock numerals and title rules. Title: "WEEK" and "MONDAY 19 OCTOBER". Floor: "STAY TUNED".
   They are always on; the crisp panels on top are decoration for the title screens. */
.occ{position:absolute;display:block;pointer-events:none;background:var(--c-night)}
.occ-sky{left:-1%;right:-1%;top:-1%;height:37.5%;background:linear-gradient(180deg,var(--c-night) 81%,transparent)}
.occ-title{left:35.6%;width:28.8%;top:27%;height:12.6%;box-shadow:0 0 14px 9px var(--c-night)}
.occ-floor{left:28%;width:44%;top:87.6%;height:10%;box-shadow:0 0 16px 10px var(--c-night)}
.panel{position:absolute;display:block;pointer-events:none;opacity:0;transition:opacity .45s ease;
  --rim:color-mix(in srgb,var(--e-future) 55%,var(--c-cream));--fill:linear-gradient(180deg,#071131,var(--c-night) 45%,#081638)}
.panel::before{content:"";position:absolute;inset:2px;background:var(--fill);clip-path:var(--shape)}
.panel{background:var(--rim);clip-path:var(--shape)}
/* the pill echoes the poster's own date pill; the tab hangs from the top for the PIN console; the base holds the main action */
.panel-pill{left:34.6%;width:30.8%;top:27.4%;height:12.9%;--shape:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.panel-tab{left:30.5%;width:39%;top:-1%;height:41.3%;background:linear-gradient(180deg,transparent 55%,var(--rim) 90%);
  --shape:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.panel-tab::before{inset:0 2px 2px;--fill:linear-gradient(180deg,var(--c-night) 55%,#081638)}
.panel-base{left:26%;width:48%;top:86.4%;height:15%;background:linear-gradient(0deg,transparent 30%,var(--rim));
  --shape:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%,0 var(--cut))}
.panel-base::before{inset:2px 2px 0;--fill:linear-gradient(0deg,var(--c-night) 45%,#081638)}
.panel-pill,.panel-base{opacity:1}
#app[data-screen=pin] .panel-pill{opacity:0}
#app[data-screen=pin] .panel-tab{opacity:1}

/* the gates breathe on the title screens */
.glow{position:absolute;top:44%;width:13%;height:36%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--gc),transparent);mix-blend-mode:screen;transition:opacity 1s ease}
.g-stone{left:14.5%;--gc:color-mix(in srgb,var(--e-stone) 55%,transparent)}
.g-medieval{left:43.5%;--gc:color-mix(in srgb,var(--e-medieval) 45%,transparent)}
.g-future{left:73.5%;--gc:color-mix(in srgb,var(--e-future) 45%,transparent)}
#app[data-shot=title] .glow{opacity:1;animation:breathe 5.5s ease-in-out infinite}
#app[data-shot=title] .g-medieval{animation-delay:-1.8s}#app[data-shot=title] .g-future{animation-delay:-3.6s}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.9}}

/* your nameplate over the walker in the hoodie */
.tag{position:absolute;left:50%;top:60.4%;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;transform:translate(-50%,-100%);
  font:700 16px/1 var(--f-hud);letter-spacing:.02em;color:var(--c-cream);white-space:nowrap;border-radius:999px;
  background:color-mix(in srgb,var(--c-night) 82%,transparent);border:1.5px solid var(--e-medieval);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--e-medieval) 18%,transparent),0 0 26px color-mix(in srgb,var(--e-medieval) 45%,transparent);
  opacity:0;transition:opacity .6s ease}
.tag::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:12px;margin-left:-1px;background:linear-gradient(var(--e-medieval),transparent)}
.tag .avatar{font-size:14px}
#app[data-screen=lobby] .tag{opacity:1;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,calc(-100% - 5px))}}

/* screen-space light: a vignette on the title screens, the era's air during a round */
.shade{position:absolute;inset:0;pointer-events:none}
.shade::before,.shade::after{content:"";position:absolute;inset:0;transition:opacity .9s ease}
.shade::before{background:radial-gradient(ellipse 130% 75% at 50% 62%,transparent 52%,color-mix(in srgb,var(--c-shade) 55%,transparent))}
.shade::after{opacity:0}
#app:not([data-shot=title]) .shade::before{opacity:0}
#app[data-shot=stone] .shade::after,#app[data-shot=medieval] .shade::after,#app[data-shot=future] .shade::after{opacity:1}
#app[data-era=stone] .shade::after{background:
  radial-gradient(ellipse 80% 45% at 50% 105%,color-mix(in srgb,var(--e-stone) 34%,transparent),transparent 70%),
  radial-gradient(ellipse at center,transparent 30%,color-mix(in srgb,var(--c-shade) 80%,transparent)),
  color-mix(in srgb,#1c1008 38%,transparent)}
#app[data-era=medieval] .shade::after{background:
  radial-gradient(circle at 4% 42%,color-mix(in srgb,var(--e-medieval) 26%,transparent),transparent 26%),
  radial-gradient(circle at 96% 42%,color-mix(in srgb,var(--e-medieval) 26%,transparent),transparent 26%),
  radial-gradient(ellipse at center,transparent 30%,color-mix(in srgb,var(--c-shade) 80%,transparent)),
  color-mix(in srgb,#160d0c 40%,transparent)}
#app[data-era=future] .shade::after{background:
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--c-shade) 30%,transparent) 0 1px,transparent 1px 4px),
  radial-gradient(ellipse 80% 45% at 50% 108%,color-mix(in srgb,var(--e-violet) 34%,transparent),transparent 70%),
  radial-gradient(ellipse at center,transparent 30%,color-mix(in srgb,var(--c-shade) 80%,transparent)),
  color-mix(in srgb,#060c22 36%,transparent)}

/* ambient motes: a handful of CSS-animated specks (compositor only) */
.motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;transition:opacity .6s}
#app[data-screen=question] .motes,#app[data-screen=boot] .motes{opacity:0}
.motes i{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;background:var(--e-medieval);
  box-shadow:0 0 8px currentColor;color:var(--e-medieval);animation:mote var(--d) linear var(--dl) infinite;will-change:transform,opacity}
#app[data-shot=title] .motes i:nth-child(odd),#app[data-era=stone]:not([data-shot=title]) .motes i{background:var(--e-stone);color:var(--e-stone)}
#app[data-shot=title] .motes i:nth-child(even),#app[data-era=future]:not([data-shot=title]) .motes i{background:var(--e-future);color:var(--e-future);border-radius:0}
#app[data-era=future]:not([data-shot=title]) .motes i:nth-child(3n){background:var(--e-violet);color:var(--e-violet)}
@keyframes mote{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.85}80%{opacity:.5}100%{transform:translate3d(var(--dx),-105vh,0);opacity:0}}

/* the gate's light: walking through it whites the screen out for a beat */
.flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,var(--c-cream) 0,color-mix(in srgb,var(--c-glow) 85%,var(--c-cream)) 28%,color-mix(in srgb,var(--c-glow) 55%,transparent) 62%,color-mix(in srgb,var(--c-glow) 20%,transparent))}
#app.walk .flash{animation:walkFlash 1.75s ease both}
@keyframes walkFlash{0%,52%{opacity:0}70%{opacity:1}100%{opacity:0}}

/* ---------- shared pieces ---------- */
.cta{--k:15px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55em;width:min(100%,400px);min-height:62px;
  padding:0 1.8em;border:0;background:none;cursor:pointer;color:var(--c-night);font:700 19px/1 var(--f-hud);letter-spacing:.09em;text-transform:uppercase;
  transition:transform .15s ease,filter .2s ease;filter:drop-shadow(0 8px 26px color-mix(in srgb,var(--e-medieval) 32%,transparent))}
.cta::before,.cta::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% 50%,calc(100% - var(--k)) 100%,var(--k) 100%,0 50%)}
.cta::before{background:linear-gradient(180deg,color-mix(in srgb,var(--c-cream) 45%,transparent),transparent 46%,color-mix(in srgb,var(--c-shade) 14%,transparent)),
  linear-gradient(90deg,var(--e-stone),var(--e-medieval) 50%,var(--e-future))}
.cta::after{background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--c-cream) 75%,transparent) 48%,transparent 60%) -200% 0/250% 100% no-repeat;animation:sheen 4.5s ease-in-out 1.2s infinite}
.cta .ico{font-size:.95em}
.cta:hover{filter:drop-shadow(0 8px 30px color-mix(in srgb,var(--e-medieval) 55%,transparent)) brightness(1.05)}
.cta:active{transform:scale(.97)}
.cta:disabled{cursor:default;filter:saturate(.35) brightness(.75);transform:none}
.cta:disabled::after{animation:none}
.link-btn{min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;color:var(--c-dim);font:600 16px/1 var(--f-body);
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:5px}
.link-btn:hover{color:var(--c-cream)}
.link-btn:disabled{opacity:.5;cursor:default}
.note{margin:0;font:600 16px/1.35 var(--f-body);color:var(--c-text);text-align:center;text-wrap:balance}
.note:empty{display:none}
.note.bad{color:#ff8f80}
#app .toast{z-index:10;bottom:max(18px,var(--sb));max-width:calc(100% - 32px);text-align:center;font:600 15px/1.25 var(--f-hud);border-radius:6px}
#fx-conf{z-index:8}

/* connection lost: a bar that drops from the top, over everything */
.conn{position:absolute;z-index:9;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:calc(var(--st) + 11px) 16px 11px;font:600 15px/1.2 var(--f-hud);letter-spacing:.03em;color:var(--c-night);
  background:linear-gradient(180deg,#ffd36b,var(--e-medieval));box-shadow:0 8px 28px color-mix(in srgb,var(--c-shade) 70%,transparent);animation:connIn .35s cubic-bezier(.2,1,.3,1) both}
.conn-dot{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes connIn{from{transform:translateY(-100%)}to{transform:none}}

/* ---------- title screens: the plate (head + pill, or the PIN tab) and the base ---------- */
/* Same geometry as the panels, mapped from poster to screen coordinates: y = 50% + (p − 50%) × camera height. */
#app .title-screen{padding:0;overflow:hidden}
.plate{position:absolute;left:0;right:0;top:0;margin:0 auto;z-index:1;width:calc(100% - var(--gl) - var(--gr));
  height:max(200px,calc(50% - var(--ch) * .097));
  display:flex;flex-direction:column;align-items:center;text-align:center}
.plate-head{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(10px,var(--st)) 0 6px}
.plate-pill{flex:none;height:max(76px,calc(var(--ch) * .129));width:min(100%,calc(var(--cw) * .308 - 48px));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.plate.tab{width:min(calc(100% - var(--gl) - var(--gr)),max(300px,calc(var(--cw) * .39 - 64px)));justify-content:center;padding:max(10px,var(--st)) 0 calc(var(--cut) + 6px)}
.base{position:absolute;left:0;right:0;bottom:0;margin:0 auto;z-index:1;
  width:min(calc(100% - var(--gl) - var(--gr)),max(300px,calc(var(--cw) * .48 - 72px)));
  min-height:max(84px,calc(50% - var(--ch) * .364));
  padding:calc(var(--cut) * .5) 0 max(10px,var(--sb));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.base-row{width:min(100%,420px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{font-size:min(calc(var(--cw) * .062),calc((100cqw - 56px) / 4.2),124px)}
.plate-line{margin:0;max-width:32ch;font:500 clamp(17px,calc(var(--ch) * .021),22px)/1.32 var(--f-body);color:var(--c-text);text-wrap:balance}
.plate-kicker{margin:0;font:600 13px/1 var(--f-hud);letter-spacing:.24em;text-transform:uppercase;color:var(--c-dim)}
.base-line{margin:0;font:500 15px/1.3 var(--f-body);color:var(--c-dim)}

/* boot */
.boot-line{margin:6px 0 0;display:flex;align-items:center;gap:12px;font:600 14px/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--c-dim)}
.boot-bar{position:relative;display:inline-block;width:56px;height:3px;overflow:hidden;background:color-mix(in srgb,var(--c-cream) 14%,transparent)}
.boot-bar i{position:absolute;inset:0;background:var(--c-glow);transform:translateX(-100%);animation:load 1.1s cubic-bezier(.6,0,.4,1) infinite}
@keyframes load{to{transform:translateX(100%)}}

/* sign-in */
.lockup{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4cqh,16px)}
.lockup-sub{display:flex;align-items:center;gap:.8em;padding-left:.32em;font:600 clamp(13px,min(calc(var(--cw) * .0125),4.1cqw),24px)/1 var(--f-hud);letter-spacing:.32em;text-transform:uppercase;color:var(--c-cream);white-space:nowrap}
.lockup-sub i{display:block;width:clamp(18px,4cqw,64px);height:2px;background:linear-gradient(90deg,transparent,var(--e-future))}
.lockup-sub i:last-child{transform:scaleX(-1)}
#s-signin.on .lockup{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
#s-signin.on .plate-line{animation:rise .7s cubic-bezier(.2,.8,.2,1) .12s both}
#s-signin.on .base>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) .22s both}

/* PIN entry: six slots over a real input */
.pin-form{width:min(100%,372px);display:flex;flex-direction:column;align-items:stretch;gap:12px}
.pin-title{margin:0;font:600 19px/1.2 var(--f-hud);letter-spacing:.04em;color:var(--c-cream)}
.pin-title label{cursor:text}
.pin-field{position:relative;height:66px}
.pin-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.pin-cells i{position:relative;display:grid;place-items:center;font:700 34px/1 var(--f-hud);font-style:normal;color:var(--c-cream);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c-panel) 85%,transparent),color-mix(in srgb,var(--c-shade) 70%,transparent));
  border:1.5px solid color-mix(in srgb,var(--e-future) 30%,transparent);border-radius:8px;transition:border-color .15s,box-shadow .15s,transform .15s}
.pin-cells i:nth-child(3){margin-right:6px}.pin-cells i:nth-child(4){margin-left:6px}
.pin-cells i.on{border-color:color-mix(in srgb,var(--e-future) 60%,transparent);animation:digit .22s cubic-bezier(.3,1.6,.5,1)}
@keyframes digit{from{transform:scale(.8)}}
.pin-field:focus-within .pin-cells i.cur{border-color:var(--e-future);box-shadow:0 0 0 3px color-mix(in srgb,var(--e-future) 28%,transparent),0 0 20px color-mix(in srgb,var(--e-future) 30%,transparent)}
.pin-field:focus-within .pin-cells i.cur::after{content:"";width:2px;height:30px;background:var(--e-future);animation:blink 1s steps(2) infinite}
.pin-cells.bad i{border-color:var(--c-bad)}
.pin-in{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:8px;background:transparent;color:transparent;caret-color:transparent;
  font:16px/1 var(--f-hud);text-align:center;letter-spacing:1em;outline:none;cursor:text}
.pin-in::selection{background:transparent}
.pin-cells i:empty::before{content:"";width:14px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--c-cream) 22%,transparent)}
.pin-field:focus-within .pin-cells i.cur:empty::before{display:none}
.pin-in:focus-visible{outline:none}
.pin-form .cta{width:100%}
.pin-help{margin:0;font:500 15px/1.3 var(--f-body);color:var(--c-dim)}
#pin-msg:not(:empty){padding:10px 14px;text-align:left;font-size:16px;color:var(--c-cream);border-radius:6px;
  background:color-mix(in srgb,var(--c-bad) 18%,var(--c-night));border:1px solid color-mix(in srgb,var(--c-bad) 55%,transparent)}
#pin-msg.info:not(:empty){background:color-mix(in srgb,var(--e-medieval) 14%,var(--c-night));border-color:color-mix(in srgb,var(--e-medieval) 55%,transparent)}
.who{display:flex;align-items:center;gap:10px;width:min(100%,380px)}
.who .avatar{font-size:17px}
.who-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.who-name b{font:700 18px/1.1 var(--f-hud);color:var(--c-cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-name span{font:500 14px/1 var(--f-body);color:var(--c-dim)}
#s-pin.on .pin-form{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}

/* lobby */
.big-title{margin:0;font:700 clamp(44px,calc(var(--cw) * .042),76px)/.95 var(--f-hud);letter-spacing:.02em;color:var(--c-cream);
  text-shadow:0 0 28px color-mix(in srgb,var(--e-future) 55%,transparent)}
.lobby-count{margin:0;display:flex;align-items:center;gap:8px;font:600 16px/1 var(--f-hud);color:var(--c-dim);white-space:nowrap}
.lobby-count b{font-size:24px;color:var(--c-cream)}
#s-lobby.on .big-title{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}

/* podium / ended */
.fin-title{margin:0;max-width:100%;font-size:min(calc(var(--cw) * .036),calc((100cqw - 40px) / 8),60px);line-height:1}
.fin-title .glitch{line-height:1.05}
.fin-me{margin:4px 0 0;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:.35em;font:600 18px/1 var(--f-hud);color:var(--c-dim)}
.fin-me b{font:700 clamp(46px,calc(var(--cw) * .04),72px)/.9 var(--f-hud);color:var(--c-cream);text-shadow:0 0 30px color-mix(in srgb,var(--e-medieval) 55%,transparent)}
.fin-stats{margin:0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font:600 15px/1 var(--f-hud);color:var(--c-dim)}
.fin-stats b{font-size:19px;color:var(--c-cream)}
#s-final.on .plate>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
#s-final.on .plate>:nth-child(2){animation-delay:.12s}#s-final.on .plate>:nth-child(3){animation-delay:.24s}
/* the champions stand on the road between the plate and the base */
.champs{position:absolute;z-index:1;left:0;right:0;top:max(220px,calc(50% - var(--ch) / 2 + var(--ch) * .4));bottom:max(96px,calc(50% + var(--ch) / 2 - var(--ch) * .864));
  margin:0;padding:0 var(--gr) 0 var(--gl);list-style:none;display:flex;align-items:flex-end;justify-content:center;gap:10px;pointer-events:none}
.champ{flex:0 1 112px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.champ[data-place="1"]{order:2}.champ[data-place="2"]{order:1}.champ[data-place="3"]{order:3}
/* each champion wears the lobby's nameplate, so names read over any part of the poster */
.champ-plate{max-width:100%;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;
  background:color-mix(in srgb,var(--c-night) 86%,transparent);border:1.5px solid color-mix(in srgb,var(--c-cream) 22%,transparent);box-shadow:0 6px 18px color-mix(in srgb,var(--c-shade) 50%,transparent)}
.champ .avatar{font-size:14px}
.champ-who{min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.champ-name{font:700 14px/1.1 var(--f-body);color:var(--c-cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.champ-score{font:600 11px/1 var(--f-hud);color:var(--c-dim);white-space:nowrap}
.champ.me .champ-plate{border-color:var(--e-medieval);box-shadow:0 0 0 3px color-mix(in srgb,var(--e-medieval) 18%,transparent),0 0 22px color-mix(in srgb,var(--e-medieval) 40%,transparent)}
.champ .pillar{width:100%;padding-top:12px;gap:6px;box-shadow:0 -6px 30px color-mix(in srgb,var(--c-shade) 40%,transparent)}
.champ[data-place="1"] .pillar{height:clamp(96px,22cqh,210px);padding-top:30px}
.champ[data-place="2"] .pillar{height:clamp(72px,15cqh,150px)}
.champ[data-place="3"] .pillar{height:clamp(56px,11cqh,112px)}
.champ .pnum{font-size:clamp(30px,6cqh,56px)}
.champ .pill-ico{width:clamp(22px,4cqh,40px);height:clamp(22px,4cqh,40px)}
.champ .banner-flag{width:30%}
#s-final.on .champ{animation:pillarUp .9s cubic-bezier(.2,.9,.25,1.04) both}
#s-final.on .champ[data-place="3"]{animation-delay:.25s}#s-final.on .champ[data-place="2"]{animation-delay:.55s}#s-final.on .champ[data-place="1"]{animation-delay:.9s}
@keyframes pillarUp{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}

/* ---------- HUD ---------- */
.hud-bar{position:relative;z-index:4;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"era score mute" "road road q";
  align-items:center;column-gap:6px;row-gap:0;padding:max(4px,var(--st)) calc(var(--gr) - 6px) 0 var(--gl)}
.hud-bar .hud-era{grid-area:era;min-width:0;gap:9px;font-size:12px;letter-spacing:.12em}
.hud-bar .hud-era .ico{font-size:30px}
.hud-era-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.hud-bar .hud-era b{font-size:18px;line-height:1;overflow:hidden;text-overflow:ellipsis}
#app[data-era=stone] .hud-bar .hud-era b{font-size:19px}
.road{grid-area:road;min-width:0;padding:4px 10px 0 0}
.road-segs{display:flex;gap:3px;height:5px}
.road-segs i{flex:1;min-width:2px;background:color-mix(in srgb,var(--c-cream) 15%,transparent);transform:skewX(-28deg);transition:background .4s,box-shadow .4s}
.road-segs i.gap{margin-left:7px}
.road-segs i.done{background:color-mix(in srgb,var(--c-cream) 42%,transparent)}
.road-segs i.ok{background:var(--c-good)}
.road-segs i.miss{background:color-mix(in srgb,var(--c-bad) 75%,transparent)}
.road-segs i.cur{background:var(--c-glow);box-shadow:0 0 10px var(--c-glow)}
.hud-bar .hud-q{grid-area:q;justify-self:center;margin:0;padding-top:4px;font:700 13px/1 var(--f-hud);letter-spacing:.04em;color:var(--c-cream)}
.hud-q-of{color:var(--c-dim)}
.hud-bar .hud-score{grid-area:score;gap:6px;align-items:baseline;font-size:15px}
.hud-bar .hud-score b{font-size:22px;letter-spacing:.01em}
.hud-pts{font:600 12px/1 var(--f-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--c-dim)}
.hud-bar .streak{align-self:center;font-size:16px}
#app .hud-mute{grid-area:mute;width:44px;height:44px;border:0;border-radius:10px;background:none;backdrop-filter:none;font-size:22px;color:var(--c-dim)}
#app .hud-mute:hover{color:var(--c-cream);background:color-mix(in srgb,var(--c-cream) 8%,transparent)}

/* ---------- round intro ---------- */
#s-intro{align-items:center;justify-content:center;text-align:center}
#s-intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 120% 52% at 50% 54%,color-mix(in srgb,var(--c-shade) 72%,transparent),transparent 72%)}
#s-intro{isolation:isolate}
.intro-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(100%,900px);padding:4vh 0}
.intro-round{margin:0;font:700 15px/1 var(--f-hud);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--c-glow)}
.intro-name{margin:0;font:400 min(13.5vw,110px)/.98 var(--f-display);color:var(--c-cream);text-transform:uppercase;text-wrap:balance;
  text-shadow:0 4px 0 var(--c-shade),0 0 44px color-mix(in srgb,var(--c-glow) 60%,transparent)}
[data-era=medieval] .intro-name{font-weight:900;letter-spacing:.02em}
[data-era=stone] .intro-name,[data-era=stone] .v-main,[data-era=stone] .v-text.text .v-main,[data-era=stone] .v-rank b{--pit:#8a6542;
  text-shadow:2px 2px 0 var(--pit),-2px -2px 0 var(--pit),2px -2px 0 var(--pit),-2px 2px 0 var(--pit),0 6px 0 color-mix(in srgb,var(--c-shade) 65%,transparent),0 0 40px color-mix(in srgb,var(--c-glow) 45%,transparent)}
[data-era=future] .intro-name{font-weight:700;letter-spacing:.05em}
.intro-line{margin:0;max-width:28ch;font:500 19px/1.35 var(--f-body);color:var(--c-text);text-wrap:balance}
.intro-ready{margin:8px 0 0;display:flex;align-items:center;gap:12px;font:600 13px/1 var(--f-hud);letter-spacing:.3em;text-transform:uppercase;color:var(--c-glow)}
#s-intro.on .intro-card>*{animation:introIn .55s cubic-bezier(.2,.9,.3,1.1) 1.05s both}
#s-intro.on .intro-name{animation-name:introName;animation-duration:.6s}
#s-intro.on .intro-card>:nth-child(3){animation-delay:1.2s}#s-intro.on .intro-card>:nth-child(4){animation-delay:1.3s}
@keyframes introIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes introName{from{opacity:0;transform:scale(1.25);letter-spacing:.18em;filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- question ---------- */
.round .stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
/* the slate: on phones the era's card material; on laptops (and for standings) the whole era frame */
.slate{position:relative;isolation:isolate;flex:none;color:var(--c-ink);filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--c-shade) 60%,transparent))}
.slate::before,.slate::after{content:"";position:absolute;z-index:-1;clip-path:var(--card-clip)}
.slate::before{inset:0;background:var(--card-edge)}
.slate::after{inset:4px;background:var(--card-bg)}
[data-era=medieval] .slate::after{box-shadow:inset 0 0 0 4px var(--c-panel),inset 0 0 0 6px var(--c-accent),inset 0 0 50px color-mix(in srgb,var(--c-ink) 28%,transparent)}
[data-era=future] .slate::after{inset:2px}
[data-era=future] .slate{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--c-accent) 45%,transparent))}
.slate-in{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 18px 18px}
.slate-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#app .slate .timer{width:100px;flex:none}
#app .timer svg.t-v{display:none}
#app[data-era=stone] .timer svg.t-fuse,#app[data-era=medieval] .timer svg.t-candle,#app[data-era=future] .timer svg.t-ring{display:block}
.answered{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.answered b{font:400 30px/1 var(--f-num)}
[data-era=medieval] .answered b{font-weight:900}
[data-era=future] .answered b{font-weight:700}
.answered span{font:600 12px/1.2 var(--f-hud);letter-spacing:.06em;opacity:.78}
#app .q-text{font-size:22px;line-height:1.22;outline:none}
#app .q-text.long{font-size:19px}
#s-question.on .slate{animation:slateIn .45s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes slateIn{from{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:none}}

.pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.answers{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(60px,1fr);gap:9px}
.answers[data-n="2"]{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(140px,1fr)}
#app .answers .tile{min-height:60px;touch-action:manipulation}
#app .answers .tile[hidden]{display:none}
#app .answers .tile-body{position:absolute;inset:0;min-height:0;gap:14px;padding:8px 16px 8px 12px}
#app .answers[data-n="2"] .tile-body{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;align-content:center;text-align:center;padding:14px 12px}
#app .answers .medal{width:50px}
#app .answers[data-n="2"] .medal{width:68px}
#app .answers .tile-text{font-size:20px;line-height:1.16}
#app .answers.long .tile-text{font-size:17px}
#app .answers .tile-key{display:none}
#app .answers .tile:not(:disabled):hover{transform:none}
#app .answers .tile:not(:disabled):active{transform:scale(.97)}
#app .answers.waiting .tile{opacity:.55}
#app .answers.locked .tile:not(.picked){opacity:.24;filter:saturate(.2) brightness(.85);transform:scale(.97)}
#app .answers.timeup .tile{opacity:.3;filter:saturate(.25)}
#s-question.on .answers .tile{animation:tileIn .42s cubic-bezier(.2,.9,.3,1.15) both}
#s-question.on .answers .tile:nth-child(2){animation-delay:.06s}#s-question.on .answers .tile:nth-child(3){animation-delay:.12s}#s-question.on .answers .tile:nth-child(4){animation-delay:.18s}
@keyframes tileIn{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
#s-question.on .answers.locked .tile:not(.picked),#s-question.on .answers.timeup .tile{animation:none}

/* lock-in: the picked tile flashes, a seal is stamped on its corner, the rest fall back */
#s-question.on .answers.locked .tile.picked{animation:picked .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes picked{0%{transform:scale(.95)}45%{transform:scale(1.03)}100%{transform:none}}
#app .answers .tile.picked .tile-body{animation:pickFlash .6s ease-out both}
@keyframes pickFlash{0%{filter:brightness(1.9) saturate(1.2)}100%{filter:none}}
#app .answers .tile.picked{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c-glow) 80%,transparent)) drop-shadow(0 0 2px var(--c-cream))}
#app .answers .tile.picked::after{content:"";position:absolute;inset:-3px;border:2px solid var(--c-glow);border-radius:6px;pointer-events:none;opacity:0;animation:shock .7s ease-out both}
@keyframes shock{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.08,1.3)}}
#app .answers .tile-tag{position:absolute;z-index:2;right:-6px;top:-10px;bottom:auto;width:50px;height:50px;padding:0;display:none;place-items:center;
  color:var(--c-cream);background:var(--t-hand);border-radius:50%;font-size:27px;letter-spacing:0;
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c-shade) 30%,transparent),0 4px 12px color-mix(in srgb,var(--c-shade) 55%,transparent)}
#app .answers .tile.picked .tile-tag{display:grid;animation:stamp .45s cubic-bezier(.2,1.4,.4,1) .06s both}
#app .answers .tile-tag .ico{font-size:1em}
@keyframes stamp{0%{opacity:0;transform:scale(2.6) rotate(-35deg)}55%{opacity:1}100%{opacity:1;transform:rotate(-12deg)}}
[data-era=stone] .answers .tile-tag{border-radius:46% 54% 42% 58% / 55% 45% 55% 45%;background:radial-gradient(circle at 40% 35%,#d4512b,#8e2a12)}
[data-era=medieval] .answers .tile-tag{color:var(--e-medieval);background:radial-gradient(circle at 38% 32%,#c8283f,#7d0f1f 70%);
  box-shadow:inset 0 0 0 4px #9a1529,inset 0 0 0 6px color-mix(in srgb,var(--e-medieval) 55%,transparent),0 4px 12px color-mix(in srgb,var(--c-shade) 60%,transparent);border-radius:47% 53% 50% 50% / 52% 48% 52% 48%}
[data-era=future] .answers .tile-tag{color:var(--c-night);background:var(--e-future);border-radius:0;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);font-size:24px}
[data-era=future] .answers .tile.picked .tile-tag{animation-name:stampHex}
@keyframes stampHex{0%{opacity:0;transform:scale(2.6) rotate(-60deg)}55%{opacity:1}100%{opacity:1;transform:none}}

#app .q-status{flex:none;min-height:22px;text-align:center;font:600 15px/1.25 var(--f-hud);letter-spacing:.03em;color:var(--c-cream)}
#app .q-status .err{color:#ff8f80}
#app .q-status b{color:var(--c-glow)}

/* ---------- result ---------- */
#s-result{isolation:isolate}
#s-result::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease}
#app[data-res] #s-result::before{opacity:1}
#app[data-res=good] #s-result::before{background:radial-gradient(ellipse 85% 50% at 50% 34%,color-mix(in srgb,var(--c-glow) 34%,transparent),transparent 72%),
  radial-gradient(ellipse 70% 40% at 50% 100%,color-mix(in srgb,var(--c-glow) 22%,transparent),transparent 70%)}
#app[data-res=bad] #s-result::before{background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 40%,color-mix(in srgb,var(--c-bad) 30%,transparent)),
  color-mix(in srgb,var(--c-shade) 35%,transparent)}
#app[data-res=none] #s-result::before{background:radial-gradient(ellipse 90% 55% at 50% 34%,color-mix(in srgb,var(--c-glow) 20%,transparent),transparent 72%)}
.recap{display:none}
.verdict{flex:1;width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding-bottom:4vh}
.v-hero{position:relative;width:120px;height:120px;display:grid;place-items:center;flex:none}
.rays{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c-glow) 30%,transparent) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 92%);mask:radial-gradient(closest-side,#000 18%,transparent 92%)}
#app[data-res=good] .rays{opacity:1;animation:spin 40s linear infinite}
.v-seal{position:relative;width:104px;height:104px;display:grid;place-items:center;font-size:58px;color:var(--c-cream);background:var(--c-good);border-radius:50%;
  box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c-cream) 50%,transparent),0 0 40px color-mix(in srgb,var(--c-good) 60%,transparent)}
.v-seal .ico{width:1em;height:1em}
.v-seal.bad,.v-seal.late{background:var(--c-bad);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c-cream) 45%,transparent),0 0 40px color-mix(in srgb,var(--c-bad) 55%,transparent)}
.v-seal.late{background:color-mix(in srgb,var(--c-bad) 50%,var(--c-shade))}
.v-seal.none{background:color-mix(in srgb,var(--c-glow) 45%,var(--c-shade));box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c-cream) 45%,transparent)}
[data-era=stone] .v-seal{border-radius:46% 54% 42% 58% / 55% 45% 55% 45%}
[data-era=medieval] .v-seal{border-radius:0;clip-path:polygon(0 0,100% 0,100% 52%,92% 74%,74% 90%,50% 100%,26% 90%,8% 74%,0 52%);box-shadow:none;font-size:52px;padding-bottom:8px}
[data-era=medieval] .v-seal::before{content:"";position:absolute;inset:5px;z-index:-1;clip-path:inherit;border:0;background:transparent}
[data-era=future] .v-seal{border-radius:0;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);box-shadow:none}
#s-result.on .v-seal{animation:sealIn .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes sealIn{from{transform:scale(.2) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.v-text{display:flex;flex-direction:column;align-items:center;gap:8px}
.v-main{margin:0;font:400 min(22vw,96px)/.95 var(--f-display);color:var(--c-cream);letter-spacing:.01em;
  text-shadow:0 4px 0 color-mix(in srgb,var(--c-shade) 60%,transparent),0 0 40px color-mix(in srgb,var(--c-glow) 55%,transparent);font-variant-numeric:tabular-nums}
[data-era=medieval] .v-main{font-weight:900}
[data-era=future] .v-main{font-weight:700}
.v-main small{font-size:.36em;margin-left:.18em;letter-spacing:.06em}
.v-text.text .v-main{font-size:min(10.5vw,46px);line-height:1.05;text-wrap:balance;text-shadow:0 3px 0 color-mix(in srgb,var(--c-shade) 60%,transparent)}
.v-sub{margin:0;font:600 20px/1.3 var(--f-body);color:var(--c-text);text-wrap:balance}
#s-result.on .v-text{animation:verdictIn .55s cubic-bezier(.2,1.3,.4,1) .1s both}
@keyframes verdictIn{from{opacity:0;transform:translateY(-26px) scale(.9)}to{opacity:1;transform:none}}
#app[data-res=bad] #s-result.on .verdict{animation:shake .45s ease .15s 1}
.v-streak{margin:0;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font:700 16px/1 var(--f-hud);color:var(--c-cream);
  background:color-mix(in srgb,var(--e-stone) 26%,var(--c-shade));border:1px solid color-mix(in srgb,var(--e-stone) 70%,transparent)}
.v-streak .ico{font-size:22px;color:var(--e-stone);filter:drop-shadow(0 0 6px var(--e-stone))}
#s-result.on .v-streak{animation:rise .5s ease .35s both}
#s-result.on .v-streak .ico{animation:candle .3s ease-in-out infinite alternate;transform-origin:50% 100%}
.v-ans{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left}
.v-label{font:600 13px/1 var(--f-hud);letter-spacing:.08em;color:var(--c-dim)}
.mini-tile{--tc:var(--t-hand);display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 8px;text-align:left;color:var(--c-cream);font:700 18px/1.2 var(--f-body);
  background:var(--tc);clip-path:var(--tile-clip);overflow-wrap:anywhere}
.mini-tile[data-i="1"]{--tc:var(--t-fleur)}.mini-tile[data-i="2"]{--tc:var(--t-tower)}.mini-tile[data-i="3"]{--tc:linear-gradient(135deg,var(--t-planet),var(--t-planet2))}
.mini-tile .medal{width:40px;flex:none;--gap:color-mix(in srgb,var(--c-shade) 35%,transparent)}
.v-ans.pick .mini-tile{opacity:.62;filter:saturate(.6)}
.v-ans.pick .mini-tile>span:last-child{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--c-cream) 70%,transparent)}
#s-result.on .v-ans{animation:rise .5s ease .3s both}
#s-result.on .v-ans.pick{animation-delay:.4s}
.v-rank{margin:4px 0 0;display:flex;align-items:baseline;gap:8px;font:600 16px/1 var(--f-hud);color:var(--c-dim)}
.v-rank b{font:400 34px/1 var(--f-num);color:var(--c-cream)}
[data-era=medieval] .v-rank b{font-weight:900}
[data-era=future] .v-rank b{font-weight:700}
.v-move{font:700 15px/1 var(--f-hud)}
.v-move.up{color:var(--c-good)}.v-move.down{color:#ff8f80}

/* ---------- standings ---------- */
#s-board .stage{align-items:center;justify-content:center;gap:16px}
/* the era frame as a tablet; the rank is carved into its empty centre */
.slate.stand,.slate.recap{aspect-ratio:var(--frame-ar);background:var(--frame-img) center / contain no-repeat;container-type:size;
  filter:drop-shadow(0 18px 34px color-mix(in srgb,var(--c-shade) 75%,transparent))}
.slate.stand::before,.slate.stand::after,.slate.recap::before,.slate.recap::after{content:none}
.slate.stand .slate-in,.slate.recap .slate-in{position:absolute;top:var(--in-t);bottom:var(--in-b);left:var(--in-x);right:var(--in-x);padding:0;align-items:center;justify-content:center;text-align:center}
.slate.stand{height:min(60cqh,calc((100cqw - 40px) * var(--frame-inv)),560px);flex:none}
[data-era=stone] .slate.stand .slate-in{top:13%;bottom:22%}
[data-era=medieval] .slate.stand .slate-in{top:17%;bottom:37%;left:22%;right:22%}
[data-era=future] .slate.stand .slate-in{top:13%;bottom:31%}
.stand-l{margin:0;font:600 4.2cqh/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.stand-rank{margin:1cqh 0 0;font:400 21cqh/.92 var(--f-num);letter-spacing:-.01em}
[data-era=medieval] .stand-rank{font-weight:900;color:var(--c-accent)}
[data-era=future] .stand-rank{font-weight:700;color:var(--c-cream);text-shadow:0 0 18px var(--c-accent)}
[data-era=stone] .stand-rank{color:#4a1d08;text-shadow:0 0 0 #6b3417}
.stand-of{margin:0;font:600 4.4cqh/1 var(--f-hud);letter-spacing:.06em;opacity:.8}
.stand-chips{margin:2.6cqh 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2cqh}
.chip{display:inline-flex;align-items:center;gap:6px;padding:1.1cqh 2cqh;border-radius:4px;font:700 3.4cqh/1 var(--f-hud);letter-spacing:.02em;white-space:nowrap;
  color:var(--c-ink);background:color-mix(in srgb,var(--c-ink) 10%,transparent);border:1px solid color-mix(in srgb,var(--c-ink) 30%,transparent)}
.chip.gain{color:var(--c-cream);background:var(--c-accent);border-color:transparent}
[data-era=future] .chip.gain{color:var(--c-night)}
.chip.up{color:#17733b;border-color:color-mix(in srgb,#17733b 60%,transparent)}
.chip.down{color:#a3182b;border-color:color-mix(in srgb,#a3182b 55%,transparent)}
[data-era=future] .chip.up{color:var(--c-good)}[data-era=future] .chip.down{color:#ff8f80}
#s-board.on .slate.stand{animation:tabletIn .6s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes tabletIn{from{opacity:0;transform:translateY(24px) rotate(-1.5deg) scale(.96)}to{opacity:1;transform:none}}
#s-board.on .stand-rank{animation:carve .7s cubic-bezier(.3,1.5,.5,1) .25s both}
@keyframes carve{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
.stand-side{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.stand-after{margin:0;font:600 13px/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--c-glow)}
.stand-score{margin:0;font:600 16px/1 var(--f-hud);color:var(--c-dim)}
.stand-score b{font-size:26px;color:var(--c-cream)}
.stand-look{margin:4px 0 0;display:flex;align-items:center;gap:8px;font:600 16px/1.2 var(--f-hud);color:var(--c-cream)}
.stand-look .ico{font-size:20px;color:var(--c-glow);transform:rotate(-90deg)}
#s-board.on .stand-look .ico{animation:nudge 1.3s ease-in-out infinite}
@keyframes nudge{50%{transform:rotate(-90deg) translateX(5px)}}
.stand-next{margin:0;font:500 15px/1.3 var(--f-body);color:var(--c-dim);text-wrap:balance}
.stand-next:empty{display:none}

/* ---------- short phones (iPhone SE and friends) ---------- */
@media (max-height:700px){
  .hud-bar .hud-era .ico{font-size:26px}
  #app .slate .timer{width:84px}
  .answered b{font-size:26px}
  #app .q-text{font-size:20px}
  #app .q-text.long{font-size:17px}
  .answers{grid-auto-rows:minmax(54px,1fr);gap:7px}
  #app .answers .tile{min-height:54px}
  #app .answers .medal{width:42px}
  #app .answers .tile-text{font-size:18px}
  #app .answers.long .tile-text{font-size:16px}
  .pin-field{height:58px}
  .pin-cells i{font-size:30px}
  .pin-form{gap:10px}
  .pin-help{display:none}
  .v-hero{width:96px;height:96px}
  .v-seal{width:84px;height:84px;font-size:46px}
  .verdict{gap:10px}
  .v-main{font-size:min(19vw,80px)}
  .mini-tile{min-height:48px;font-size:17px}
  .champ[data-place="1"] .pillar{padding-top:24px}
}

/* ---------- laptops: a two-pane stage ---------- */
@media (min-width:900px) and (min-height:560px) and (min-aspect-ratio:1/1){
  #app .screen{padding-left:max(32px,var(--gl));padding-right:max(32px,var(--gr))}
  #app[data-hud] .screen{padding-top:10px;padding-bottom:28px}
  .hud-bar{grid-template-columns:minmax(0,1fr) minmax(260px,560px) auto minmax(0,1fr) auto;grid-template-areas:"era road q score mute";column-gap:18px;
    padding:max(14px,var(--st)) max(24px,var(--gr)) 6px max(32px,var(--gl))}
  .road{padding:0}
  .road-segs{height:6px;gap:4px}
  .hud-bar .hud-q{padding:0;font-size:15px}
  .hud-bar .hud-score{justify-self:end}
  .hud-bar .hud-era .ico{font-size:34px}
  .hud-bar .hud-era b{font-size:21px}

  /* the stage: the era tablet on the left, the controls on the right */
  .round .stage{display:grid;grid-template-columns:auto minmax(0,600px);grid-template-rows:minmax(0,1fr);justify-content:center;align-items:center;column-gap:clamp(32px,4.5cqw,80px)}
  #q-card,.slate.recap,.slate.stand{display:block;height:min(100%,800px);aspect-ratio:var(--frame-ar);background:var(--frame-img) center / contain no-repeat;container-type:size;
    filter:drop-shadow(0 20px 40px color-mix(in srgb,var(--c-shade) 75%,transparent))}
  #q-card::before,#q-card::after{content:none}
  #q-card .slate-in{position:absolute;top:var(--in-t);bottom:var(--in-b);left:var(--in-x);right:var(--in-x);padding:2cqh 0;justify-content:center;gap:3cqh}
  #q-card .slate-top{flex-direction:column;gap:1.5cqh}
  #app #q-card .timer{width:min(44cqw,210px)}
  #q-card .answered{align-items:center;text-align:center;flex-direction:row;gap:8px;align-items:baseline}
  #q-card .answered b{font-size:4.4cqh}
  #q-card .answered span{font-size:max(13px,2cqh)}
  #app #q-card .q-text{font-size:clamp(19px,3.9cqh,32px);line-height:1.2}
  #app #q-card .q-text.long{font-size:clamp(16px,2.9cqh,24px)}
  [data-era=medieval] #q-card .slate-in{gap:2cqh}
  .pane{height:min(100%,560px);justify-content:center;gap:14px}
  .answers{flex:0 1 auto;height:100%;max-height:540px;grid-auto-rows:minmax(0,1fr);gap:14px}
  .answers[data-n="2"]{grid-template-columns:minmax(0,1fr);max-height:340px}
  .answers[data-n="3"]{max-height:420px}
  #app .answers .tile{min-height:72px}
  #app .answers .tile-body,#app .answers[data-n="2"] .tile-body{grid-template-columns:auto minmax(0,1fr);grid-template-rows:none;justify-items:stretch;align-content:normal;text-align:left;padding:10px 56px 10px 16px;gap:18px}
  #app .answers .medal,#app .answers[data-n="2"] .medal{width:58px}
  #app .answers .tile-text{font-size:22px}
  #app .answers.long .tile-text{font-size:19px}
  #app .answers .tile-key{display:block;right:16px;top:50%;margin-top:-13px;font-size:14px;min-width:26px;text-align:center}
  #app .answers .tile:not(:disabled):hover{transform:translateX(4px)}
  #app .answers .tile:not(:disabled):hover .tile-body{filter:brightness(1.08)}
  #app .answers .tile-tag{right:-14px;top:-14px;width:56px;height:56px;font-size:30px}
  #app .q-status{font-size:16px}
  #s-question.on .answers .tile{animation-name:tileInSide}
  @keyframes tileInSide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
  #s-question.on #q-card{animation:tabletIn .55s cubic-bezier(.2,.9,.3,1.05) both}

  /* result: the question stays on its tablet, the verdict takes the right */
  .slate.recap .slate-in{gap:2.4cqh}
  .recap-n{margin:0;font:600 max(13px,2.2cqh)/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
  .recap-q{margin:0;font:700 clamp(18px,3.7cqh,30px)/1.22 var(--f-body);text-wrap:balance}
  [data-era=medieval] .recap-q{font-weight:800}
  .verdict{height:min(100%,640px);max-width:600px;justify-content:center;padding:0}
  .v-hero{width:150px;height:150px}
  .v-seal{width:128px;height:128px;font-size:70px}
  .rays{width:720px;height:720px;margin:-360px 0 0 -360px}
  .v-main{font-size:clamp(80px,11cqh,128px)}
  .v-text.text .v-main{font-size:clamp(38px,6cqh,58px)}
  .v-sub{font-size:22px}
  .v-ans{max-width:520px}
  .mini-tile{min-height:62px;font-size:20px}
  .v-rank b{font-size:40px}

  /* standings */
  #s-board .stage{align-items:center}
  .stand-side{align-items:flex-start;text-align:left;gap:12px;max-width:440px}
  .stand-after{font-size:15px}
  .stand-score{font-size:19px}
  .stand-score b{display:block;margin-bottom:4px;font:700 92px/.9 var(--f-hud);letter-spacing:-.01em;text-shadow:0 0 36px color-mix(in srgb,var(--c-glow) 35%,transparent)}
  .stand-look{font-size:20px;margin-top:18px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--c-cream) 16%,transparent);align-self:stretch}
  .stand-look .ico{font-size:24px}
  .stand-next{font-size:18px}

  /* intro */
  .intro-round{font-size:20px}
  .intro-name{font-size:clamp(72px,13cqh,150px)}
  .intro-line{font-size:24px}
  .intro-ready{font-size:15px}

  /* title screens */
  .who{width:min(100%,460px)}
  /* the champions stand before the three gates */
  .champs{display:block;padding:0}
  .champ{position:absolute;bottom:0;width:min(150px,calc(var(--cw) * .09));translate:-50% 0}
  .champ-plate{max-width:250px;padding:5px 14px 5px 5px}
  .champ .avatar{font-size:16px}
  .champ-name{font-size:17px}
  .champ-score{font-size:13px}
  .champ[data-place="2"]{left:calc(50% - var(--cw) * .29)}
  .champ[data-place="1"]{left:50%}
  .champ[data-place="3"]{left:calc(50% + var(--cw) * .30)}
  .champ[data-place="1"] .pillar{height:clamp(120px,24cqh,260px)}
  .champ[data-place="2"] .pillar{height:clamp(90px,17cqh,190px)}
  .champ[data-place="3"] .pillar{height:clamp(70px,12cqh,140px)}
}

@media (prefers-reduced-motion:reduce){
  .cam,.cam-img.soft,.glow,.tag,.shade::before,.shade::after{transition:none}
  .motes{display:none}
  #app .answers.locked .tile:not(.picked){transform:none}
  .rays{display:none}
}