/* 1337 Integration Quest — shared theme (extracted from the demo artifact). Era tokens switch via [data-era=stone|medieval|future] on any ancestor. */
:root{
  /* Layout concept: one projector stage — full-bleed era backdrop, HUD strip on top, era-material question card over a 2x2 symbol-tile grid, portrait frame "tablets" for standings. */
  color-scheme:dark;
  /* era palette (future = default, used by lobby + podium) */
  --c-bg:#060c22; --c-panel:#0a1d3c; --c-ink:#dcf5ff; --c-accent:#2ee6ff; --c-accent2:#9b5cff; --c-glow:#38e8ff;
  /* shared */
  --c-page:#03060f; --c-night:#050a1c; --c-shade:#010208; --c-cream:#fff6e6; --c-text:#f3ecdf; --c-dim:#9aa6bd;
  --c-good:#46d483; --c-bad:#ff5a47; --c-brick:#6d655c; --c-brick-dark:#37312c;
  /* answer symbols (fixed, from the schedule medallions) */
  --t-hand:#b8361b; --t-fleur:#1d4cb8; --t-tower:#c48a10; --t-planet:#5b31cc; --t-planet2:#16a9cc;
  /* the three gates */
  --e-stone:#ff8a3d; --e-medieval:#e9b949; --e-future:#2ee6ff; --e-violet:#a066ff;
  /* fonts */
  --f-body:"Barlow Semi Condensed","Barlow","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-hud:"Chakra Petch","Bahnschrift","DIN Alternate","Arial Narrow",sans-serif;
  --f-pixel:"Silkscreen","VT323","Courier New",monospace;
  --f-carved:"Cinzel","Trajan Pro","Cormorant SC","Times New Roman",serif;
  --f-rough:"Rubik Dirt","Impact","Haettenschweiler","Arial Black",sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-display:var(--f-hud); --f-num:var(--f-hud);
}
[data-era=stone]{
  --c-bg:#1c1008; --c-panel:#d6b588; --c-ink:#2e1a0c; --c-accent:#b9411e; --c-accent2:#e59a43; --c-glow:#ff8a3d;
  --f-display:var(--f-rough); --f-num:var(--f-rough);
  --frame-img:url(assets/frame-stone.jpg); --frame-ar:2/3; --frame-inv:1.5; --in-t:8%; --in-x:12%; --in-b:15%;
  --portal-x:9.5%;
  --card-bg:url(assets/frame-stone.jpg) 50% 46% / 260% auto no-repeat, var(--c-panel);
  --card-edge:#5a3315;
  --card-clip:polygon(1% 7%,14% 1%,38% 4%,63% 0,86% 3%,99% 1%,100% 38%,98% 70%,100% 95%,80% 100%,52% 97%,24% 100%,2% 98%,0 64%,2% 34%);
  --tile-clip:polygon(2% 6%,20% 0,46% 4%,72% 0,97% 4%,100% 42%,98% 80%,100% 97%,70% 100%,40% 96%,12% 100%,0 92%,2% 55%,0 22%);
  --btn-clip:polygon(3% 10%,30% 0,70% 6%,97% 0,100% 55%,96% 100%,60% 94%,20% 100%,0 88%);
  --btn-bg:linear-gradient(180deg,var(--c-accent2),var(--c-accent)); --btn-ink:var(--c-cream);
}
[data-era=medieval]{
  --c-bg:#160d0c; --c-panel:#ead6a6; --c-ink:#2c1a0e; --c-accent:#a3182b; --c-accent2:#1f3f8f; --c-glow:#e9b949;
  --f-display:var(--f-carved); --f-num:var(--f-carved);
  --frame-img:url(assets/frame-medieval.jpg); --frame-ar:2/3; --frame-inv:1.5; --in-t:9%; --in-x:16%; --in-b:35%;
  --portal-x:50%;
  --card-bg:url(assets/frame-medieval.jpg) 50% 33% / 270% auto no-repeat, var(--c-panel);
  --card-edge:var(--c-glow);
  --card-clip:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  --tile-clip:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  --btn-clip:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  --btn-bg:linear-gradient(180deg,#c22238,var(--c-accent)); --btn-ink:var(--c-cream);
}
[data-era=future]{
  --c-bg:#060c22; --c-panel:#0a1d3c; --c-ink:#dcf5ff; --c-accent:#2ee6ff; --c-accent2:#9b5cff; --c-glow:#38e8ff;
  --f-display:var(--f-hud); --f-num:var(--f-hud);
  --frame-img:url(assets/frame-future.jpg); --frame-ar:847/1200; --frame-inv:1.4168; --in-t:11%; --in-x:17%; --in-b:27%;
  --portal-x:94.8%;
  --card-bg:linear-gradient(180deg,color-mix(in srgb,var(--c-panel) 70%,transparent),color-mix(in srgb,var(--c-bg) 80%,transparent)), url(assets/frame-future.jpg) 50% 40% / 240% auto no-repeat, var(--c-panel);
  --card-edge:var(--c-accent);
  --card-clip:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
  --tile-clip:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  --btn-clip:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  --btn-bg:linear-gradient(180deg,#7ff3ff,var(--c-accent)); --btn-ink:var(--c-night);
}

/* ---------- base ---------- */
html,body{height:100%;margin:0}
body{background:var(--c-page);color:var(--c-text);font-family:var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c-glow);outline-offset:3px}
code{font-family:var(--f-mono);font-size:.88em;padding:.05em .3em;border-radius:4px;background:color-mix(in srgb,var(--c-ink) 12%,transparent)}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ico{width:1em;height:1em;fill:currentColor;flex:none}

#app{position:relative;height:100%;overflow:hidden;isolation:isolate;container-type:size;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- backdrops ---------- */
.bd{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;overflow:hidden;z-index:0}
#app[data-bg=hero] .bd-hero,#app[data-bg=stone] .bd-stone,#app[data-bg=medieval] .bd-medieval,#app[data-bg=future] .bd-future{opacity:1}
.bd-img{position:absolute;inset:-48px;background-size:cover;background-position:center;filter:blur(18px) brightness(.42) saturate(1.3);transform:scale(1.05)}
.bd-stone .bd-img{background-image:url(assets/frame-stone.jpg)}
.bd-medieval .bd-img{background-image:url(assets/frame-medieval.jpg)}
.bd-future .bd-img{background-image:url(assets/frame-future.jpg);filter:blur(14px) brightness(.5) saturate(1.4)}
.bd::after{content:"";position:absolute;inset:0}
.bd-stone::after{background:radial-gradient(ellipse 80% 50% at 50% 110%,color-mix(in srgb,var(--e-stone) 38%,transparent),transparent 70%),radial-gradient(ellipse at center,transparent 35%,color-mix(in srgb,var(--c-shade) 85%,transparent))}
.bd-medieval::after{background:radial-gradient(circle at 6% 45%,color-mix(in srgb,var(--e-medieval) 30%,transparent),transparent 24%),radial-gradient(circle at 94% 45%,color-mix(in srgb,var(--e-medieval) 30%,transparent),transparent 24%),radial-gradient(ellipse at center,transparent 35%,color-mix(in srgb,var(--c-shade) 85%,transparent))}
.bd-future::after{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--c-shade) 35%,transparent) 0 1px,transparent 1px 4px),radial-gradient(ellipse 70% 50% at 50% 110%,color-mix(in srgb,var(--e-violet) 35%,transparent),transparent 70%),radial-gradient(ellipse at center,transparent 35%,color-mix(in srgb,var(--c-shade) 85%,transparent))}
.bd-hero{background:url(assets/hero-gates.jpg) 50% 100% / cover no-repeat var(--c-night)}
.bd-hero::after{background:
  radial-gradient(ellipse 40% 30% at 12% 34%,color-mix(in srgb,var(--e-stone) 22%,transparent),transparent 70%),
  radial-gradient(ellipse 40% 30% at 88% 30%,color-mix(in srgb,var(--e-future) 18%,transparent),transparent 70%),
  linear-gradient(180deg,var(--c-night) 0,var(--c-night) 31%,color-mix(in srgb,var(--c-night) 86%,transparent) 37%,color-mix(in srgb,var(--c-night) 30%,transparent) 46%,transparent 56%,transparent 70%,color-mix(in srgb,var(--c-night) 75%,transparent) 86%,var(--c-night) 100%)}
#app[data-screen=podium] .bd-hero::before{content:"";position:absolute;inset:0;z-index:1;background:color-mix(in srgb,var(--c-night) 35%,transparent)}
canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fx-amb{z-index:1}
#fx-conf{z-index:5}

/* ---------- screens ---------- */
.screens{position:relative;height:100%;z-index:2}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;overflow-x:hidden;overflow-y:auto;
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  transition:opacity .5s ease,visibility 0s linear .5s}
.screen.on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.screen:focus{outline:none}

.toolbar{position:absolute;z-index:6;top:max(12px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:8px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--c-accent) 55%,transparent);background:color-mix(in srgb,var(--c-shade) 55%,transparent);color:var(--c-cream);border-radius:10px;cursor:pointer;backdrop-filter:blur(6px);font-size:22px}
.icon-btn:hover{background:color-mix(in srgb,var(--c-accent) 22%,transparent)}
.icon-btn .off{display:none}
.icon-btn[aria-pressed=true] .on{display:none}
.icon-btn[aria-pressed=true] .off{display:block}

/* ---------- generic era button ---------- */
.btn{position:relative;isolation:isolate;border:0;background:none;cursor:pointer;color:var(--btn-ink);
  font:700 clamp(16px,2.2cqmin,26px)/1 var(--f-hud);letter-spacing:.12em;text-transform:uppercase;padding:.95em 1.9em;display:inline-flex;align-items:center;justify-content:center;gap:.6em;transition:transform .15s ease,filter .2s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg);clip-path:var(--btn-clip)}
.btn::after{content:"";position:absolute;inset:3px;z-index:-1;clip-path:var(--btn-clip);border:2px solid color-mix(in srgb,var(--c-cream) 35%,transparent);pointer-events:none}
[data-era=stone] .btn{font-family:var(--f-rough);font-weight:400;letter-spacing:.06em}
[data-era=medieval] .btn{font-family:var(--f-carved);font-weight:900}
[data-era=medieval] .btn::after{border-color:var(--c-glow)}
[data-era=future] .btn{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c-accent) 55%,transparent))}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn .ico{font-size:1.1em}
.btn-ghost{background:none;border:1px solid color-mix(in srgb,var(--c-accent) 50%,transparent);color:var(--c-ink);font:600 15px/1 var(--f-hud);letter-spacing:.12em;text-transform:uppercase;padding:.8em 1.1em;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;border-radius:6px}
.btn-ghost:hover{background:color-mix(in srgb,var(--c-accent) 15%,transparent)}

/* ---------- glitch logotype ---------- */
.glitch{position:relative;display:inline-block;font-family:var(--f-pixel);font-weight:700;line-height:.9;color:var(--c-cream);letter-spacing:.04em;
  text-shadow:0 0 18px color-mix(in srgb,var(--e-future) 75%,transparent),0 0 2px var(--c-cream)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen;opacity:.85;pointer-events:none}
.glitch::before{color:var(--e-violet);animation:glitchA 4.2s steps(1) infinite}
.glitch::after{color:var(--e-future);animation:glitchB 4.2s steps(1) infinite}
@keyframes glitchA{0%,84%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}86%{transform:translate(-7px,2px);clip-path:inset(12% 0 58% 0)}90%{transform:translate(6px,-1px);clip-path:inset(62% 0 10% 0)}94%{transform:translate(-3px,0);clip-path:inset(34% 0 44% 0)}}
@keyframes glitchB{0%,84%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}87%{transform:translate(6px,-2px);clip-path:inset(48% 0 30% 0)}91%{transform:translate(-5px,1px);clip-path:inset(4% 0 80% 0)}95%{transform:translate(4px,0);clip-path:inset(70% 0 4% 0)}}
.bits{position:absolute;inset:0;pointer-events:none}
.bits i{position:absolute;width:.09em;height:.09em;background:var(--e-future);box-shadow:0 0 10px var(--e-future);animation:blink 2.4s steps(2) infinite}
.bits i:nth-child(1){left:-.35em;top:.35em}.bits i:nth-child(2){left:-.2em;top:.55em;animation-delay:.6s;width:.05em;height:.05em}
.bits i:nth-child(3){right:-.3em;top:.15em;animation-delay:1.1s}.bits i:nth-child(4){right:-.45em;top:.42em;width:.06em;height:.06em;background:var(--e-violet);animation-delay:.3s}
.bits i:nth-child(5){left:30%;top:.47em;width:.5em;height:2px;box-shadow:none;opacity:.7}
@keyframes blink{50%{opacity:.15}}

/* ---------- HUD chip ---------- */
.hud-chip{--cut:14px;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.9em;padding:.55em 1.8em;font-family:var(--f-hud);color:var(--c-ink)}
.hud-chip::before,.hud-chip::after{content:"";position:absolute;z-index:-1;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,var(--cut) 100%,0 50%)}
.hud-chip::before{inset:0;background:var(--c-accent);filter:drop-shadow(0 0 8px var(--c-accent))}
.hud-chip::after{inset:2px;background:color-mix(in srgb,var(--c-bg) 90%,transparent)}

/* ---------- avatars ---------- */
.avatar{--av:var(--t-fleur);width:2em;height:2em;flex:none;display:grid;place-items:center;font:700 .78em/1 var(--f-hud);color:var(--c-cream);background:var(--av);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);letter-spacing:.02em}

/* ---------- LOBBY ---------- */
#s-lobby{align-items:stretch}
.lobby-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(8px,2.6cqh,40px);gap:clamp(6px,1.4cqh,18px)}
.kicker-line{margin:0;font:600 clamp(12px,1.5cqmin,17px)/1 var(--f-hud);letter-spacing:.35em;text-transform:uppercase;color:var(--c-dim)}
.logo{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1cqh,14px)}
.logo .glitch{font-size:clamp(56px,15cqmin,190px)}
.logo-sub{display:flex;align-items:center;gap:.8em;font:600 clamp(16px,3cqmin,40px)/1 var(--f-hud);letter-spacing:.38em;color:var(--c-cream);text-transform:uppercase;padding-left:.38em}
.logo-sub i{display:block;width:clamp(30px,7cqw,140px);height:2px;background:linear-gradient(90deg,transparent,var(--c-accent))}
.logo-sub i:last-child{transform:scaleX(-1)}
.pin{font-size:clamp(14px,2cqmin,24px)}
.pin span{font-size:.7em;letter-spacing:.3em;text-transform:uppercase;color:var(--c-dim)}
.pin b{font-weight:700;letter-spacing:.18em;color:var(--c-cream);font-size:1.15em}
.lobby-gap{flex:1;min-height:16cqh}
.dock{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,370px);gap:clamp(14px,2.4cqw,40px);
  width:min(1500px,100%);margin:0 auto;padding:clamp(14px,2.2cqmin,28px) clamp(16px,2.8cqmin,36px)}
.dock::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--c-panel) 80%,transparent),color-mix(in srgb,var(--c-bg) 94%,transparent));
  clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%,0 30px);backdrop-filter:blur(8px)}
.dock-line{position:absolute;top:0;left:30px;right:30px;height:2px;background:linear-gradient(90deg,var(--e-stone),var(--e-medieval),var(--e-future));box-shadow:0 0 14px var(--c-accent)}
.dock-head{display:flex;align-items:center;gap:.7em;margin:0 0 12px;font:600 clamp(13px,1.6cqmin,18px)/1 var(--f-hud);letter-spacing:.24em;text-transform:uppercase;color:var(--c-dim)}
.dock-head b{color:var(--c-cream);font-size:1.3em;letter-spacing:.05em}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--c-good);box-shadow:0 0 10px var(--c-good);animation:blink 1.4s infinite}
.players{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;max-height:28cqh;overflow:auto}
.pchip{display:inline-flex;align-items:center;gap:.55em;padding:.3em .9em .3em .3em;font:600 clamp(14px,1.7cqmin,20px)/1 var(--f-body);color:var(--c-cream);
  background:color-mix(in srgb,var(--c-panel) 85%,transparent);border:1px solid color-mix(in srgb,var(--c-accent) 30%,transparent);border-radius:4px;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.pchip.me{border-color:var(--e-medieval);background:color-mix(in srgb,var(--e-medieval) 18%,var(--c-panel))}
.pchip .avatar{font-size:clamp(13px,1.5cqmin,18px)}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.dock-play{display:flex;flex-direction:column;gap:12px;justify-content:center}
.dock-play label{font:600 13px/1 var(--f-hud);letter-spacing:.24em;text-transform:uppercase;color:var(--c-dim)}
.name-in{width:100%;font:700 clamp(18px,2.4cqmin,26px)/1 var(--f-hud);color:var(--c-cream);background:color-mix(in srgb,var(--c-shade) 60%,transparent);border:2px solid color-mix(in srgb,var(--c-accent) 55%,transparent);border-radius:6px;padding:.5em .7em;letter-spacing:.06em}
.name-in:focus-visible{outline-offset:2px;border-color:var(--c-accent)}
.btn-start{position:relative;isolation:isolate;border:0;background:none;cursor:pointer;color:var(--c-night);font:700 clamp(24px,3.6cqmin,44px)/1 var(--f-hud);letter-spacing:.32em;padding:.7em 1em .7em 1.32em;
  display:flex;align-items:center;justify-content:center;gap:.4em;transition:transform .15s,filter .2s;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--e-medieval) 45%,transparent))}
.btn-start::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--e-stone),var(--e-medieval) 50%,var(--e-future));clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%)}
.btn-start::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--c-cream) 70%,transparent) 45%,transparent 60%) -200% 0/250% 100% no-repeat;animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{60%,100%{background-position:200% 0}}
.btn-start:hover{transform:translateY(-2px) scale(1.01);filter:drop-shadow(0 0 26px color-mix(in srgb,var(--e-medieval) 70%,transparent))}
.btn-start .ico{font-size:.8em}
.dock-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dock-meta{margin:0;font:500 14px/1.3 var(--f-hud);color:var(--c-dim);letter-spacing:.05em}

/* ---------- ERA INTRO ---------- */
.intro{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(20px,5cqw,90px);position:relative;min-height:0}
.intro-roman{position:absolute;inset:0;display:grid;place-items:center;font:900 60cqh/1 var(--f-carved);color:var(--c-glow);opacity:.06;pointer-events:none;user-select:none}
.portal-wrap{flex:none;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--c-glow) 70%,transparent))}
#s-intro.on .portal-wrap{animation:portalIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes portalIn{0%{transform:scale(.6) translateY(30px);opacity:0;filter:brightness(3) drop-shadow(0 0 80px var(--c-glow))}100%{transform:none;opacity:1}}
.portal{height:min(66cqh,calc(40cqw * 1.25));aspect-ratio:4/5;background:url(assets/hero-gates.jpg) var(--portal-x) 63% / 364% auto no-repeat}
[data-era=stone] .portal{clip-path:polygon(6% 8%,22% 2%,50% 0,78% 3%,95% 9%,100% 40%,97% 100%,3% 100%,0 45%)}
[data-era=medieval] .portal{border-radius:50% 50% 6px 6px / 30% 30% 6px 6px;border:6px solid var(--c-glow);box-shadow:inset 0 0 0 3px var(--c-accent)}
[data-era=future] .portal{clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px))}
.intro-text{max-width:min(46cqw,720px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.8cqh,22px)}
#s-intro.on .intro-text>*{animation:rise .7s ease both}
#s-intro.on .intro-text>*:nth-child(2){animation-delay:.12s}#s-intro.on .intro-text>*:nth-child(3){animation-delay:.24s}#s-intro.on .intro-text>*:nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.intro-kicker{margin:0;font:700 clamp(15px,2.2cqmin,26px)/1 var(--f-hud);letter-spacing:.45em;text-transform:uppercase;color:var(--c-glow)}
.intro-title{margin:0;font:400 clamp(36px,7.5cqmin,112px)/.95 var(--f-display);color:var(--c-cream);text-transform:uppercase;text-shadow:0 4px 0 var(--c-shade),0 0 40px color-mix(in srgb,var(--c-glow) 55%,transparent)}
[data-era=medieval] .intro-title{font-weight:900;letter-spacing:.03em}
[data-era=future] .intro-title{font-weight:700;letter-spacing:.06em}
.intro-sub{margin:0;font:500 clamp(18px,2.6cqmin,30px)/1.3 var(--f-body);color:var(--c-text);max-width:30ch}
.intro-go{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.auto-bar{width:140px;height:4px;background:color-mix(in srgb,var(--c-cream) 18%,transparent);overflow:hidden;border-radius:2px}
.auto-bar i{display:block;height:100%;background:var(--c-glow);transform-origin:left;transform:scaleX(0)}
#s-intro.on .auto-bar i{animation:fill 4.2s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}

/* ---------- QUESTION ---------- */
.hud{flex:none;display:flex;align-items:center;gap:clamp(10px,2cqw,28px);padding-right:56px;min-height:48px;margin-bottom:clamp(8px,1.4cqh,16px)}
.hud-era{display:flex;align-items:center;gap:.55em;font:600 clamp(13px,1.6cqmin,19px)/1 var(--f-hud);letter-spacing:.18em;text-transform:uppercase;color:var(--c-dim);white-space:nowrap}
.hud-era .ico{font-size:1.9em;color:var(--c-glow);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c-glow) 70%,transparent))}
.hud-era b{font:400 1.35em/1 var(--f-display);color:var(--c-cream);letter-spacing:.06em}
[data-era=medieval] .hud-era b{font-weight:900}
[data-era=future] .hud-era b{font-weight:700}
.hud-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;min-width:0}
.hud-q{font:700 clamp(14px,1.8cqmin,21px)/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--c-cream);white-space:nowrap}
.pips{display:flex;align-items:center;gap:5px}
.pip{width:clamp(10px,1.3cqw,22px);height:7px;background:color-mix(in srgb,var(--c-cream) 18%,transparent);transform:skewX(-20deg)}
.pip.gap{margin-left:10px}
.pip.cur{background:var(--c-glow);box-shadow:0 0 10px var(--c-glow)}
.pip.ok{background:var(--c-good)}
.pip.miss{background:var(--c-bad);opacity:.7}
.hud-score{display:flex;align-items:center;gap:.6em;font:600 clamp(14px,1.8cqmin,20px)/1 var(--f-hud);color:var(--c-dim);white-space:nowrap}
.hud-score b{font:700 1.4em/1 var(--f-num);color:var(--c-cream)}
.streak{display:inline-flex;align-items:center;gap:.15em;color:var(--e-stone);font:700 1em/1 var(--f-hud)}
.streak .ico{font-size:1.25em;filter:drop-shadow(0 0 6px var(--e-stone))}

.q-stage{flex:1;min-height:0;display:flex;gap:clamp(12px,2cqw,32px);container-type:size}
.q-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(10px,1.8cqh,20px);position:relative}
.q-card{flex:none;position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2cqw,32px);
  padding:clamp(14px,3cqh,34px) clamp(18px,3cqw,48px);min-height:min(30cqh,250px);color:var(--c-ink);filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--c-shade) 70%,transparent))}
.q-card::before,.q-card::after{content:"";position:absolute;z-index:-1;clip-path:var(--card-clip)}
.q-card::before{inset:0;background:var(--card-edge)}
.q-card::after{inset:4px;background:var(--card-bg)}
[data-era=medieval] .q-card::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) 30%,transparent)}
[data-era=future] .q-card{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--c-accent) 55%,transparent))}
[data-era=future] .q-card::before{inset:0}
[data-era=future] .q-card::after{inset:2px}
.deco{position:absolute;pointer-events:none;display:none;z-index:0}
[data-era=stone] .deco-stone,[data-era=medieval] .deco-medieval,[data-era=future] .deco-future{display:block}
.deco-stone{width:clamp(26px,4cqw,58px);height:auto;color:var(--c-accent);opacity:.75;mix-blend-mode:multiply}
.deco-stone.a{left:2.2%;bottom:10%;transform:rotate(-18deg)}
.deco-stone.b{right:2.2%;top:10%;transform:rotate(14deg) scaleX(-1)}
.deco-medieval{width:clamp(20px,2.6cqw,38px);color:var(--c-accent);opacity:.85}
.deco-medieval.a{left:14px;top:12px}.deco-medieval.b{right:14px;top:12px}
.deco-future{font:600 12px/1 var(--f-hud);letter-spacing:.3em;color:var(--c-accent);opacity:.8}
.deco-future.a{left:40px;top:10px}.deco-future.b{right:48px;bottom:10px}
.q-text{margin:0;font:700 clamp(20px,min(2.8cqw,5.4cqh),52px)/1.18 var(--f-body);text-align:center;text-wrap:balance;position:relative;z-index:1}
[data-era=medieval] .q-text{font-weight:800}
.timer{position:relative;z-index:1;width:clamp(104px,min(13cqw,22cqh),190px)}
.timer svg{display:block;width:100%;height:auto;overflow:visible}
.t-v{display:none}
[data-era=stone] .t-fuse,[data-era=medieval] .t-candle,[data-era=future] .t-ring{display:block}
.t-n{font-size:46px;fill:var(--c-ink)}
.t-fuse .t-n{font-family:var(--f-rough);font-size:50px}
.t-candle .t-n{font-family:var(--f-carved);font-weight:900;font-size:56px;fill:var(--c-accent)}
.t-ring .t-n{font-family:var(--f-hud);font-weight:700;font-size:42px;filter:drop-shadow(0 0 6px var(--c-accent))}
.fuse-bg{fill:none;stroke:color-mix(in srgb,var(--c-ink) 50%,transparent);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 5}
.fuse-lit{fill:none;stroke:var(--c-accent2);stroke-width:6;stroke-linecap:round;stroke-dasharray:100 200}
.spark-glow{fill:color-mix(in srgb,var(--c-glow) 50%,transparent);animation:flick .18s steps(2) infinite}
.spark-core{fill:var(--c-cream)}
.spark-rays{stroke:var(--c-glow);stroke-width:2.2;stroke-linecap:round;fill:none;animation:spin .5s linear infinite;transform-box:fill-box;transform-origin:center}
.pit-stones{fill:var(--c-ink)}
.pit-fire{fill:var(--c-accent)}
.pit-fire2{fill:var(--c-accent2)}
@keyframes flick{50%{transform:scale(1.35);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
.wax{fill:var(--c-cream);stroke:color-mix(in srgb,var(--c-ink) 35%,transparent);stroke-width:1.5}
.holder{fill:var(--c-glow);stroke:var(--c-ink);stroke-width:1.5}
.flame-o{fill:var(--c-glow)}
.flame-i{fill:var(--c-cream)}
.halo{fill:color-mix(in srgb,var(--c-glow) 30%,transparent)}
.flame-anim{animation:candle .22s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes candle{to{transform:scale(.9,1.12) skewX(4deg)}}
.wick{stroke:var(--c-ink);stroke-width:2}
.ring-ticks{fill:none;stroke:color-mix(in srgb,var(--c-accent) 45%,transparent);stroke-width:6;stroke-dasharray:1 4}
.ring-bg{fill:none;stroke:color-mix(in srgb,var(--c-accent) 14%,transparent);stroke-width:8}
.ring-arc{fill:none;stroke:var(--c-accent);stroke-width:8;stroke-dasharray:100 100;filter:drop-shadow(0 0 6px var(--c-accent))}
.timer.low .t-n{fill:var(--c-bad)}
.timer.low .ring-arc{stroke:var(--c-bad);filter:drop-shadow(0 0 8px var(--c-bad))}
.timer.low{animation:throb .5s ease-in-out infinite alternate}
@keyframes throb{to{transform:scale(1.06)}}
.ans-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:clamp(70px,9cqw,140px)}
.ans-in b{font:400 clamp(30px,min(4.6cqw,9cqh),70px)/1 var(--f-num)}
[data-era=medieval] .ans-in b{font-weight:900}
[data-era=future] .ans-in b{font-weight:700}
.ans-in span{font:600 clamp(11px,1.3cqmin,15px)/1.2 var(--f-hud);letter-spacing:.2em;text-transform:uppercase;opacity:.8;text-align:center}
.chart{display:none;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,96px));justify-content:center;gap:clamp(10px,3cqw,48px);height:clamp(96px,22cqh,190px);position:relative;z-index:1}
.q-card.revealed .timer,.q-card.revealed .ans-in{display:none}
.q-card.revealed{grid-template-columns:minmax(0,1fr)}
.q-card.revealed .chart{display:grid}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:0;height:100%}
.bar-n{font:700 clamp(16px,2.6cqh,26px)/1 var(--f-hud);display:flex;align-items:center;gap:4px}
.bar-n .ico{color:var(--c-good);font-size:1.1em}
.bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0}
.bar{width:100%;height:0;background:var(--tbg);transition:height .9s cubic-bezier(.2,.8,.2,1);min-height:4px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c-shade) 25%,transparent)}
.bar-col.wrong{opacity:.45}
.bar-sym{width:clamp(20px,3.6cqh,34px);height:clamp(20px,3.6cqh,34px);color:var(--tc)}

.tiles{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:clamp(10px,1.6cqmin,20px)}
.tile{--tbg:var(--tc);position:relative;display:block;border:0;padding:0;background:none;cursor:pointer;text-align:left;min-height:70px;transition:transform .15s ease,opacity .35s ease,filter .35s ease}
.tile[data-i="0"]{--tc:var(--t-hand)}.tile[data-i="1"]{--tc:var(--t-fleur)}.tile[data-i="2"]{--tc:var(--t-tower)}
.tile[data-i="3"]{--tc:var(--t-planet);--tbg:linear-gradient(135deg,var(--t-planet),var(--t-planet2))}
.bar-col[data-i="0"]{--tc:var(--t-hand);--tbg:var(--t-hand)}.bar-col[data-i="1"]{--tc:var(--t-fleur);--tbg:var(--t-fleur)}.bar-col[data-i="2"]{--tc:var(--t-tower);--tbg:var(--t-tower)}
.bar-col[data-i="3"]{--tc:var(--t-planet2);--tbg:linear-gradient(180deg,var(--t-planet2),var(--t-planet))}
.tile-body{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(10px,1.6cqw,24px);padding:clamp(10px,2cqh,22px) clamp(14px,2cqw,30px);
  background:var(--tbg);clip-path:var(--tile-clip);color:var(--c-cream);overflow:hidden}
.tile-body::before{content:"";position:absolute;inset:0;pointer-events:none}
[data-era=stone] .tile-body::before{background:url(assets/frame-stone.jpg) 50% 42% / 320% auto;mix-blend-mode:multiply;opacity:.6}
[data-era=medieval] .tile-body::before{background:url(assets/frame-medieval.jpg) 50% 30% / 320% auto;mix-blend-mode:multiply;opacity:.5;
  box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--c-shade) 25%,transparent),inset 0 0 0 7px var(--c-glow)}
[data-era=future] .tile-body::before{background:linear-gradient(180deg,color-mix(in srgb,var(--c-cream) 22%,transparent),transparent 40%),repeating-linear-gradient(90deg,color-mix(in srgb,var(--c-cream) 8%,transparent) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--c-cream) 8%,transparent) 0 1px,transparent 1px 26px)}
[data-era=future] .tile{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tc) 70%,transparent))}
.tile-body>*{position:relative}
.medal{--gap:color-mix(in srgb,var(--tc) 50%,var(--c-shade));width:clamp(42px,min(6.2cqw,11cqh),88px);aspect-ratio:1;display:grid;place-items:center;background:var(--gap);border-radius:50%;
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c-cream) 55%,transparent),0 3px 0 color-mix(in srgb,var(--c-shade) 40%,transparent);color:var(--c-cream)}
[data-era=stone] .medal{border-radius:46% 54% 42% 58% / 55% 45% 55% 45%}
[data-era=medieval] .medal{box-shadow:inset 0 0 0 3px var(--c-glow),0 3px 0 color-mix(in srgb,var(--c-shade) 40%,transparent)}
[data-era=future] .medal{border-radius:0;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);box-shadow:none}
.medal svg{width:66%;height:66%}
.tile-text{font:700 clamp(17px,min(2.15cqw,4.4cqh),38px)/1.15 var(--f-body);text-shadow:0 2px 0 color-mix(in srgb,var(--c-shade) 45%,transparent);overflow-wrap:anywhere}
.tile-text code{background:color-mix(in srgb,var(--c-shade) 30%,transparent)}
.tile-key{position:absolute;right:12px;top:10px;font:700 13px/1 var(--f-hud);padding:4px 7px;border:1px solid color-mix(in srgb,var(--c-cream) 55%,transparent);border-radius:4px;opacity:.85}
.tile-tag{position:absolute;right:12px;bottom:10px;display:none;align-items:center;gap:6px;font:700 13px/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;background:color-mix(in srgb,var(--c-shade) 55%,transparent);padding:6px 9px;border-radius:4px}
.tile-tag .ico{font-size:1.2em}
.tile:not(:disabled):hover{transform:translateY(-3px)}
.tile:not(:disabled):active{transform:scale(.98)}
.tile:disabled{cursor:default}
.tiles.locked .tile:not(.picked){opacity:.45}
.tile.picked .tile-tag{display:inline-flex}
.tiles.revealed .tile{opacity:.28;filter:saturate(.35)}
.tiles.revealed .tile.picked{opacity:.55}
.tiles.revealed .tile.correct{opacity:1;filter:drop-shadow(0 0 10px var(--c-glow)) drop-shadow(0 0 26px color-mix(in srgb,var(--c-glow) 70%,transparent));transform:scale(1.02);animation:win .9s ease-out 1}
.tile.correct .tile-tag{display:inline-flex;background:var(--c-good);color:var(--c-night)}
.tile.picked.wrong{animation:shake .45s ease 1}
@keyframes win{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1.02)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

.q-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.q-status{margin:0;font:600 clamp(14px,1.8cqmin,19px)/1.2 var(--f-hud);letter-spacing:.08em;color:var(--c-dim)}
.q-status kbd{font:700 .9em var(--f-hud);border:1px solid currentColor;border-radius:4px;padding:1px 6px}

.banner{position:absolute;left:50%;top:clamp(80px,26cqh,240px);z-index:3;transform:translate(-50%,0);min-width:min(560px,92%);max-width:94%;text-align:center;padding:clamp(14px,2.4cqh,26px) clamp(22px,4cqw,56px);
  color:var(--c-cream);isolation:isolate;pointer-events:none;animation:drop .6s cubic-bezier(.2,1.4,.4,1) both}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--btn-clip);background:linear-gradient(180deg,color-mix(in srgb,var(--c-good) 92%,var(--c-shade)),color-mix(in srgb,var(--c-good) 55%,var(--c-shade)));box-shadow:0 0 0 4px var(--c-cream)}
.banner.bad::before{background:linear-gradient(180deg,color-mix(in srgb,var(--c-bad) 90%,var(--c-shade)),color-mix(in srgb,var(--c-bad) 50%,var(--c-shade)))}
.banner{filter:drop-shadow(0 16px 30px color-mix(in srgb,var(--c-shade) 80%,transparent))}
.banner-main{font:400 clamp(34px,min(6cqw,10cqh),92px)/1 var(--f-display);text-shadow:0 3px 0 color-mix(in srgb,var(--c-shade) 50%,transparent)}
[data-era=medieval] .banner-main{font-weight:900}
[data-era=future] .banner-main{font-weight:700}
.banner-main small{font-size:.45em;margin-left:.2em}
.banner.bad .banner-main{font-size:clamp(26px,min(4cqw,7.5cqh),64px)}
.banner-sub{margin-top:8px;font:700 clamp(15px,2cqmin,24px)/1.25 var(--f-body);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.banner-sub .streak{color:var(--c-cream);background:color-mix(in srgb,var(--c-shade) 35%,transparent);padding:4px 10px;border-radius:20px}
@keyframes drop{from{opacity:0;transform:translate(-50%,-40px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- tablets (frame images) ---------- */
.tablet{position:relative;flex:none;aspect-ratio:var(--frame-ar);background:var(--frame-img) center / contain no-repeat;container-type:size;filter:drop-shadow(0 18px 36px color-mix(in srgb,var(--c-shade) 80%,transparent))}
.tablet-in{position:absolute;top:var(--in-t);bottom:var(--in-b);left:var(--in-x);right:var(--in-x);display:flex;flex-direction:column;color:var(--c-ink)}
.tablet-title{margin:0 0 2.2cqh;text-align:center;font:400 5.4cqh/1 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
[data-era=medieval] .tablet-title{font-weight:900;color:var(--c-accent)}
[data-era=future] .tablet-title{font-weight:700;color:var(--c-accent);text-shadow:0 0 12px var(--c-accent)}
.tablet-sub{display:block;font:600 1.7cqh/1.2 var(--f-hud);letter-spacing:.25em;opacity:.7;margin-top:1cqh}
.rows{position:relative;flex:1;min-height:0}
.row{position:absolute;left:0;right:0;top:0;height:calc(100% / 6);display:flex;align-items:center;gap:1.1cqh;padding:0 1.2cqh;font:700 2.5cqh/1 var(--f-body);
  transition:transform .9s cubic-bezier(.25,.85,.25,1),opacity .5s ease}
.row::before{content:"";position:absolute;inset:6% 0;z-index:-1;border-radius:4px;background:color-mix(in srgb,var(--c-ink) 9%,transparent);border-bottom:2px solid color-mix(in srgb,var(--c-ink) 22%,transparent)}
[data-era=future] .row::before{border-radius:0;border-bottom-color:color-mix(in srgb,var(--c-accent) 45%,transparent);background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
.row.me::before{background:color-mix(in srgb,var(--c-accent) 28%,transparent)}
.row.sep::after{content:"";position:absolute;left:10%;right:10%;top:-1%;border-top:2px dashed color-mix(in srgb,var(--c-ink) 45%,transparent)}
.r-rank{width:1.7em;text-align:center;font:400 1.15em/1 var(--f-num);flex:none}
[data-era=medieval] .r-rank{font-weight:900}
.row .avatar{font-size:.8em}
.r-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-up{font:700 .62em/1 var(--f-hud);color:var(--c-good);opacity:0;transition:opacity .4s}
[data-era=stone] .r-up,[data-era=medieval] .r-up{color:#1d7a3e}
.r-delta{font:700 .7em/1 var(--f-hud);padding:.3em .45em;border-radius:3px;background:var(--c-accent);color:var(--c-cream);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;white-space:nowrap}
[data-era=future] .r-delta{color:var(--c-night)}
.row.moved .r-delta,.row.moved .r-up{opacity:1;transform:none}
.r-score{font:700 1em/1 var(--f-hud);min-width:3.6em;text-align:right;flex:none}
.row .streak{font-size:.75em}

#s-question .side{height:min(100cqh,calc(29cqw * var(--frame-inv)));align-self:center;display:none}
@media (min-width:1100px) and (min-aspect-ratio:5/4){#s-question .side{display:block}}

/* ---------- BOARD ---------- */
.board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,5cqw,90px);container-type:size}
.board .tablet{height:min(98cqh,calc(54cqw * var(--frame-inv)))}
.board-side{max-width:min(36cqw,520px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,2.4cqh,24px)}
.board-kicker{margin:0;font:700 clamp(13px,1.9cqmin,20px)/1 var(--f-hud);letter-spacing:.3em;text-transform:uppercase;color:var(--c-glow)}
.board-lead{margin:0;font:400 clamp(30px,6cqmin,76px)/1.02 var(--f-display);color:var(--c-cream);text-shadow:0 3px 0 var(--c-shade);overflow-wrap:anywhere}
[data-era=medieval] .board-lead{font-weight:900}
[data-era=future] .board-lead{font-weight:700}
.board-me{margin:0;font:600 clamp(16px,2.4cqmin,26px)/1.3 var(--f-body);color:var(--c-text)}
.board-me b{font-family:var(--f-hud);color:var(--c-cream)}

/* ---------- PODIUM ---------- */
.pod-top{flex:none;text-align:center;padding-top:clamp(6px,2cqh,30px)}
.pod-title{margin:0;font-size:clamp(26px,6.5cqmin,96px)}
.pod-sub{margin:8px 0 0;font:600 clamp(14px,2.2cqmin,24px)/1 var(--f-hud);letter-spacing:.32em;text-transform:uppercase;color:var(--c-dim)}
.podium{flex:1;min-height:180px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,5cqw,110px);container-type:size;overflow:hidden;position:relative}
.podium::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--e-stone),var(--e-medieval),var(--e-future));box-shadow:0 0 20px var(--e-medieval)}
.pcol{width:min(25cqw,330px);height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.prise{display:flex;flex-direction:column;align-items:center;transform:translateY(105%);opacity:0;transition:transform 1.2s cubic-bezier(.2,.9,.25,1.04),opacity .6s ease}
.pcol.up .prise{transform:none;opacity:1}
.ptag{display:flex;flex-direction:column;align-items:center;gap:.4em;margin-bottom:1.6cqh;text-align:center;max-width:100%}
.ptag .avatar{font-size:clamp(18px,5cqh,34px)}
.pname{font:700 clamp(16px,5.4cqh,40px)/1 var(--f-body);color:var(--c-cream);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pscore{font:700 clamp(13px,3.4cqh,24px)/1 var(--f-hud);color:var(--c-dim);letter-spacing:.08em}
.pillar{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4cqh;gap:2cqh;overflow:hidden}
.pcol[data-place="1"] .pillar{height:58cqh}.pcol[data-place="2"] .pillar{height:43cqh}.pcol[data-place="3"] .pillar{height:31cqh}
.pnum{font-size:clamp(34px,13cqh,120px);line-height:1}
.pill-ico{width:clamp(28px,9cqh,80px);height:clamp(28px,9cqh,80px)}
.p-stone{background:url(assets/frame-stone.jpg) 50% 50% / 420% auto;clip-path:polygon(0 7%,12% 2%,30% 5%,52% 0,74% 4%,100% 1%,100% 100%,0 100%);box-shadow:inset 0 -30px 50px color-mix(in srgb,var(--c-shade) 50%,transparent)}
.p-stone .pnum{font-family:var(--f-rough);color:#5a2a10}
.p-stone .pill-ico{color:var(--t-hand);mix-blend-mode:multiply;opacity:.9}
.p-castle{padding-top:calc(4cqh + 26px);background:
  linear-gradient(180deg,transparent,color-mix(in srgb,var(--c-shade) 45%,transparent)),
  repeating-linear-gradient(0deg,var(--c-brick-dark) 0 3px,transparent 3px 34px),
  repeating-linear-gradient(90deg,var(--c-brick-dark) 0 3px,transparent 3px 56px),
  var(--c-brick);
  clip-path:polygon(0 0,14% 0,14% 26px,29% 26px,29% 0,43% 0,43% 26px,57% 26px,57% 0,71% 0,71% 26px,86% 26px,86% 0,100% 0,100% 100%,0 100%)}
.p-castle .pnum{font-family:var(--f-carved);font-weight:900;color:var(--e-medieval);text-shadow:0 3px 0 var(--c-shade)}
.p-castle .banner-flag{width:38%;color:var(--e-medieval);filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--c-shade) 60%,transparent))}
.p-mono{background:linear-gradient(90deg,#0b1430,#14244c 50%,#0b1430);clip-path:polygon(18% 0,82% 0,100% 6%,100% 100%,0 100%,0 6%)}
.p-mono::before,.p-mono::after{content:"";position:absolute;top:8%;bottom:0;width:5px;background:var(--e-future);box-shadow:0 0 16px var(--e-future),0 0 4px var(--c-cream)}
.p-mono::before{left:10%}.p-mono::after{right:10%}
.p-mono .pnum{font-family:var(--f-hud);font-weight:700;color:var(--e-future);text-shadow:0 0 18px var(--e-future)}
.p-mono .pill-ico{color:var(--e-future);filter:drop-shadow(0 0 8px var(--e-future))}
.pod-foot{flex:none;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3cqw,40px);flex-wrap:wrap;padding-top:clamp(10px,2cqh,22px)}
.pod-me{margin:0;font:600 clamp(16px,2.4cqmin,26px)/1.3 var(--f-body);color:var(--c-text);text-align:center}
.pod-me b{font-family:var(--f-hud);color:var(--c-cream)}

/* ---------- edit dialog ---------- */
dialog.dlg{width:min(860px,94vw);max-height:92%;border:0;padding:0;background:transparent;color:var(--c-ink)}
dialog.dlg::backdrop{background:color-mix(in srgb,var(--c-shade) 72%,transparent);backdrop-filter:blur(4px)}
.dlg-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:26px 28px;max-height:88vh}
.dlg-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-accent);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
.dlg-panel::after{content:"";position:absolute;inset:2px;z-index:-1;background:linear-gradient(180deg,var(--c-panel),var(--c-bg));clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,25px 100%,0 calc(100% - 25px))}
.dlg-panel h2{margin:0;font:700 26px/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--c-cream)}
.dlg-help{margin:0;font:500 15px/1.4 var(--f-body);color:var(--c-dim)}
.dlg-help code{color:var(--c-ink)}
.dlg-ta{width:100%;flex:1;min-height:220px;height:46vh;resize:vertical;font:13px/1.45 var(--f-mono);color:var(--c-ink);background:color-mix(in srgb,var(--c-shade) 70%,transparent);border:1px solid color-mix(in srgb,var(--c-accent) 45%,transparent);border-radius:4px;padding:12px}
.dlg-ta[aria-invalid=true]{border-color:var(--c-bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--c-bad) 40%,transparent)}
.msg{margin:0;min-height:1.4em;font:600 15px/1.35 var(--f-body);display:flex;gap:8px;align-items:flex-start}
.msg.err{color:var(--c-bad)}
.msg.ok{color:var(--c-good)}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.dlg-actions .push{margin-right:auto}
.dlg-actions .btn{font-size:16px;padding:.8em 1.5em}
.toast{position:absolute;z-index:7;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px 18px;font:600 15px/1.2 var(--f-hud);letter-spacing:.06em;color:var(--c-night);background:var(--c-accent);border-radius:4px;opacity:0;transition:opacity .4s;pointer-events:none}
.toast.show{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hud .pips{display:none}
}
@media (max-width:720px), (max-aspect-ratio:4/5){
  .dock{grid-template-columns:1fr}
  .dock-play{order:-1}
  .players{max-height:none}
  .pchip{font-size:14px}
  .lobby-gap{min-height:26cqh}
  .hud{flex-wrap:wrap;gap:8px 14px}
  .hud-mid{justify-content:flex-start;flex:none}
  .q-stage{container-type:normal;flex:none}
  .q-main{flex:none}
  .q-card{grid-template-columns:auto 1fr;grid-template-areas:"timer ans" "text text";min-height:0}
  .q-card .timer{grid-area:timer;width:118px}
  .q-card .ans-in{grid-area:ans;justify-self:end}
  .q-card .q-text{grid-area:text;font-size:clamp(19px,5.4cqw,26px)}
  .q-card.revealed{grid-template-areas:"text" "chart"}
  .q-card .chart{grid-area:chart;height:110px}
  .tiles{grid-template-columns:1fr;grid-auto-rows:auto;flex:none}
  .tile{min-height:76px}
  .tile-body{position:relative;inset:auto;min-height:76px}
  .tile-text{font-size:18px}
  .medal{width:46px}
  .banner{top:42%;position:fixed}
  .intro{flex-direction:column;gap:18px;padding:10px 0}
  .portal{height:min(36cqh,calc(70cqw * 1.25))}
  .intro-text{max-width:100%;align-items:center;text-align:center}
  .board{flex-direction:column;gap:14px}
  .board .tablet{height:min(70cqh,calc(94cqw * var(--frame-inv)))}
  .board-side{max-width:100%;align-items:center;text-align:center}
  .pcol{width:31cqw}
  .podium{gap:2cqw}
}

/* ---------- reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important}
  .glitch::before,.glitch::after,.bits{display:none}
  .tile,.btn,.btn-start,.row,.r-delta{transition-property:opacity,filter,background-color,color !important}
  .prise{transform:none !important;transition:opacity .8s ease !important}
  .tiles.revealed .tile.correct{transform:none}
  .tile:not(:disabled):hover,.btn:hover,.btn-start:hover{transform:none}
}