/* ══════════════════════════════════════════════════════════════
   IMMORTAL COMPOSERS v1
   Fixed-timestep engine · frame-data combat · reactive AI · cinematics
   ══════════════════════════════════════════════════════════════ */

/* Press Start 2P draws the capitals Č Š Ž as small lowercase letters: these three come from a copy
   with the real capital and a caron above (fonts/ps2p-caps.woff2, built from the OFL font) */
@font-face{font-family:'Press Start 2P';src:url(fonts/ps2p-caps.woff2) format('woff2');unicode-range:U+010C,U+0160,U+017D;font-display:swap;
  ascent-override:100%;descent-override:0%;line-gap-override:0%;}

:root{
  --v1:#1a0035; --v2:#3d0070; --v3:#6a0dad; --v4:#9b30ff; --v5:#c084fc;
  --gold:#f5a623; --gold2:#fcd34d;
  --red:#dc2626; --red2:#f87171;
  --cyan:#06b6d4; --p1c:#38bdf8; --p2c:#fb7185; --green:#22c55e;
  --dark:#070010; --fg:#ede9fe;
  --ff-px:'Press Start 2P',monospace;
  --ff-hd:'Bebas Neue',sans-serif;
  --ff-ui:'Rajdhani',sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#000;font-family:var(--ff-ui);overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:none;}
body{display:flex;align-items:center;justify-content:center;}
button{font-family:inherit;}

/* ── overlay layers ─────────────────────────────────────────── */
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.8) 100%);}
body.nofx #scanlines,body.nofx #vignette{display:none;}
body.lowgfx #scanlines,body.lowgfx .menu-particles{display:none;}

/* ── game container ─────────────────────────────────────────── */
#gc{--ch:min(calc(var(--ch)*1),calc(var(--cw)*0.5625));   /* 1% of the 16:9 container height */
  --cw:min(calc(var(--cw)*1),calc(var(--ch)*1.7778));     /* 1% of the 16:9 container width  */
  position:relative;width:100vw;height:100vh;
  background:var(--dark);overflow:hidden;
  box-shadow:inset 0 0 40px rgba(106,13,173,.05);}
/* the arena is drawn 16:9 and letterboxed inside the box; the menus use the whole window */
#cv{position:absolute;left:var(--gx,0);top:var(--gy,0);width:var(--gw,100%);height:var(--gh,100%);display:block;}

#ultFlash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50;}

/* ── screens ────────────────────────────────────────────────── */
.scr{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;z-index:10;}
.scr.on{display:flex;}

.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.ico.big{stroke-width:1.7;}
/* icons keep the colour the emoji used to have, so the UI stays as lively as before */
.ic-trophy,.ic-medal,.ic-badge,.ic-star,.ic-slot,.ic-gift,.ic-cap,.ic-bag{color:#fbbf24;}
.ic-bolt,.ic-spark,.ic-burst{color:#fde047;}
.ic-fire,.ic-skull,.ic-swords,.ic-cross,.ic-warn{color:#f87171;}
.ic-globe,.ic-monitor,.ic-link,.ic-cloud,.ic-clock{color:#38bdf8;}
.ic-robot,.ic-gamepad,.ic-user,.ic-teacher{color:#c4b5fd;}
.ic-book,.ic-news,.ic-calendar,.ic-film{color:#fcd34d;}
.ic-check,.ic-shield,.ic-chat{color:#4ade80;}
.ic-gem,.ic-eye,.ic-target{color:#f472b6;}
.ic-music,.ic-speaker{color:#a5b4fc;}
.ic-fist,.ic-hand,.ic-jump{color:#fdba74;}
.ic-lock{color:#94a3b8;} .ic-unlock{color:#86efac;}
.ic-wrench,.ic-gear,.ic-chart,.ic-scale{color:#cbd5e1;}
.ic-share{color:#67e8f9;} .ic-home{color:#fca5a5;} .ic-dice{color:#f0abfc;}
.ic-refresh,.ic-up{color:#86efac;} .ic-logout{color:#fca5a5;} .ic-help{color:#fcd34d;}
.ic-play,.ic-skip,.ic-pause{color:#86efac;}
/* on a coloured or selected surface the icon follows the text again */
.seg button.sel .ico,.mbtn:hover .ico,.mtile:hover .ico,.set-btn:hover .ico,.q-btn .ico,.dq-btn .ico,
.tb .ico,.lb-tab.on .ico,.chip:hover .ico{color:inherit;}
.cdeco{position:absolute;width:38px;height:38px;border:2px solid var(--v4);opacity:.55;pointer-events:none;}
.cdeco.tl{top:12px;left:12px;border-right:0;border-bottom:0;}
.cdeco.tr{top:12px;right:12px;border-left:0;border-bottom:0;}
.cdeco.bl{bottom:12px;left:12px;border-right:0;border-top:0;}
.cdeco.br{bottom:12px;right:12px;border-left:0;border-top:0;}

/* ── main menu ──────────────────────────────────────────────── */
#sMenu{background:linear-gradient(160deg,rgba(26,0,53,.97),rgba(10,0,20,.99));
  padding-top:calc(var(--ch)*2);padding-bottom:calc(var(--ch)*7);}
.menu-bg-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(106,13,173,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(106,13,173,.07) 1px,transparent 1px);
  background-size:44px 44px;animation:gridMove 12s linear infinite;}
@keyframes gridMove{to{background-position:44px 44px;}}
.menu-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}

.logo-svg{height:clamp(52px,calc(var(--ch)*28),224px);width:auto;max-width:min(calc(var(--cw)*58),840px);flex:none;display:block;overflow:visible;filter:drop-shadow(0 6px 18px rgba(0,0,0,.65));}
.logo-svg text{font-family:var(--ff-hd);text-anchor:middle;paint-order:stroke fill;stroke-linejoin:round;}
.lg-htl{font-size:100px;letter-spacing:10px;fill:url(#lgViolet);stroke:#12002b;stroke-width:9;}
.lg-bg{font-size:106px;letter-spacing:10px;fill:url(#lgGold);stroke:#2b0a00;stroke-width:9;filter:url(#lgGlow);}
.lg-plate path{fill:rgba(20,0,44,.72);stroke:rgba(155,48,255,.75);stroke-width:2.5;}
.lg-deco2 path{stroke:rgba(155,48,255,.55);stroke-width:2;fill:none;}
.logo-svg .lg-deco{animation:lgPulse 3.4s ease-in-out infinite;}
@keyframes lgPulse{50%{opacity:.45;}}
body.nofx .logo-svg .lg-deco,body.lowgfx .logo-svg .lg-deco{animation:none;}
body.nofx .lg-bg{filter:none;}
.logo-wrap{position:relative;width:100%;display:flex;justify-content:center;align-items:center;text-align:center;margin-bottom:clamp(8px,calc(var(--ch)*3.5),40px);
  animation:logoIn .8s cubic-bezier(.22,1,.36,1) both;}
@keyframes logoIn{from{transform:scale(.7) translateY(-30px);opacity:0}to{transform:none;opacity:1}}
.logo-badge{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*1.95),13.5px);color:var(--v5);
  letter-spacing:4px;margin-bottom:calc(var(--ch)*1.2);opacity:.7;animation:badgePulse 3s ease-in-out infinite;}
@keyframes badgePulse{0%,100%{opacity:.7}50%{opacity:1}}
.logo-line1{font-family:var(--ff-hd);font-size:clamp(26px,calc(var(--ch)*13),102px);line-height:.85;letter-spacing:-1px;
  background:linear-gradient(180deg,#fff,var(--v5) 60%,var(--v4));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px var(--v4));animation:logoGlow 3s ease-in-out infinite;}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 20px var(--v4))}
  50%{filter:drop-shadow(0 0 40px var(--v4)) drop-shadow(0 0 70px var(--v3))}}
.logo-line2{font-family:var(--ff-hd);font-size:clamp(16px,calc(var(--ch)*8),64px);
  letter-spacing:clamp(6px,calc(var(--cw)*1.5),20px);color:var(--gold);
  text-shadow:0 0 15px var(--gold),0 0 40px rgba(245,166,35,.4),3px 3px 0 rgba(0,0,0,.8);}
.logo-tagline{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*1.65),13px);color:var(--v5);
  letter-spacing:5px;margin-top:calc(var(--ch)*.9);opacity:.6;}

.menu-btns{display:flex;flex-direction:column;gap:clamp(3px,calc(var(--ch)*1.1),10px);width:100%;
  align-items:center;width:100%;}
.mbtn{position:relative;overflow:hidden;background:rgba(61,0,112,.25);
  border:1px solid rgba(155,48,255,.4);color:var(--fg);font-weight:700;
  letter-spacing:2px;
  padding:clamp(4px,calc(var(--ch)*1.1),13px) clamp(12px,calc(var(--cw)*2.4),34px);
  cursor:pointer;outline:none;
  width:clamp(220px,calc(var(--cw)*34),450px);
  min-height:clamp(34px,calc(var(--ch)*8),72px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"icon main" "icon sub";
  column-gap:clamp(9px,calc(var(--cw)*1.1),15px);row-gap:1px;align-items:center;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition:background .15s,border-color .15s,transform .1s;text-align:left;}
.mbtn::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(155,48,255,.15),transparent);
  transform:translateX(-100%);transition:transform .4s;}
.mbtn:hover::before{transform:translateX(100%);}
.mbtn:hover,.mbtn:focus-visible,.mbtn.kbfocus{background:rgba(106,13,173,.4);border-color:var(--v5);
  box-shadow:0 0 24px rgba(155,48,255,.4),inset 0 0 12px rgba(155,48,255,.1);transform:translateX(6px);}
.mbtn:active{transform:translateX(6px) scale(.98);}
.mbtn-icon{grid-area:icon;font-size:clamp(12px,calc(var(--ch)*3.9),25px);line-height:1;
  width:1.5em;text-align:center;}
.mbtn-main{grid-area:main;font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*4.2),27px);
  letter-spacing:clamp(1px,calc(var(--ch)*.45),3px);line-height:1.06;white-space:nowrap;}
.mbtn-sub{grid-area:sub;font-size:clamp(8px,calc(var(--ch)*1.69),12px);color:var(--v5);
  font-family:var(--ff-px);letter-spacing:1px;line-height:1.3;white-space:nowrap;}
/* buttons with no sub-label keep the same footprint as the rest */
.mbtn:not(:has(.mbtn-sub)){grid-template-areas:"icon main";align-content:center;}

.menu-footer{display:none;}
.menu-unlock-txt{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*1.65),13px);color:var(--gold2);
  letter-spacing:1px;margin-bottom:calc(var(--ch)*.9);}
.menu-credit{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.12),10px);
  color:rgba(192,132,252,.4);letter-spacing:2px;}

/* audio toggle chip */
.topchips{position:absolute;top:10px;right:12px;display:flex;gap:6px;z-index:40;}
/* ── menu layout: side panels left and right of the main buttons ── */
.mn-top{position:absolute;top:clamp(6px,calc(var(--ch)*1.8),14px);display:flex;gap:6px;z-index:40;align-items:flex-start;}
.mn-top.left{left:clamp(8px,calc(var(--cw)*1.4),16px);}
.mn-top.right{right:clamp(8px,calc(var(--cw)*1.4),16px);}
.mn-coins{position:absolute;top:calc(clamp(6px,calc(var(--ch)*1.8),14px) + clamp(34px,calc(var(--ch)*8.6),58px));
  right:clamp(8px,calc(var(--cw)*1.4),16px);z-index:40;display:none;align-items:center;gap:6px;
  font-family:var(--ff-px);font-size:clamp(9px,calc(var(--ch)*2),14px);color:#fde68a;letter-spacing:1px;
  background:rgba(12,2,28,.72);border:1px solid rgba(245,158,11,.5);padding:5px 11px;}
.mn-coins.on{display:inline-flex;}
.mn-coins .ico{width:1.25em;height:1.25em;}
.ico-chip{padding:6px 8px;}
.ico-chip .ico{width:1.25em;height:1.25em;}
.acc-chip{display:inline-flex;align-items:center;gap:6px;}
.acc-chip .chip-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.acc-chip .chip-txt b{font-weight:normal;}
.acc-chip .chip-txt i{font-style:normal;color:#fde68a;display:none;align-items:center;gap:3px;}
.acc-chip .chip-txt i.on{display:inline-flex;}
.acc-chip .chip-txt i .ico{width:1.05em;height:1.05em;}
.mn-fs{position:absolute;left:clamp(8px,calc(var(--cw)*1.4),16px);bottom:clamp(8px,calc(var(--ch)*2),16px);z-index:40;padding:7px 9px;}
.mn-fs .ico{width:1.25em;height:1.25em;}
.mn-credit{position:absolute;right:clamp(16px,calc(var(--cw)*2.4),34px);bottom:clamp(12px,calc(var(--ch)*3),22px);z-index:30;
  font-family:var(--ff-px);font-size:clamp(5px,calc(var(--ch)*.95),8px);color:var(--v5);opacity:.4;letter-spacing:1px;white-space:nowrap;}
.mn-grid{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:clamp(10px,calc(var(--cw)*2.2),38px);z-index:20;
  padding:clamp(34px,calc(var(--ch)*10),74px) clamp(12px,calc(var(--cw)*2.4),40px) clamp(26px,calc(var(--ch)*7),48px);}
.mn-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;
  width:clamp(220px,calc(var(--cw)*38),520px);}
.mn-side{display:flex;flex-direction:column;gap:clamp(8px,calc(var(--ch)*2.4),20px);width:100%;
  max-width:clamp(150px,calc(var(--cw)*26),360px);min-width:0;}
.mn-side.right{max-width:clamp(160px,calc(var(--cw)*29),400px);}
.mn-side.left{justify-self:start;} .mn-side.right{justify-self:end;}
.mn-card{background:linear-gradient(180deg,rgba(26,0,53,.85),rgba(9,0,20,.85));border:1px solid rgba(155,48,255,.4);
  padding:clamp(9px,calc(var(--ch)*2.6),20px) clamp(10px,calc(var(--cw)*1.6),20px);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
.mn-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;row-gap:2px;font-family:var(--ff-hd);
  font-size:clamp(11px,calc(var(--ch)*3.1),23px);letter-spacing:2px;color:var(--gold2);white-space:nowrap;}
.mn-card-h span{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;}
.mn-card-h span .ico{flex:none;}
.mn-card-h i{flex:none;}
.mn-card-h i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.55),11px);color:var(--v5);letter-spacing:0;}
.mn-newsbtn{display:block;width:100%;margin-top:6px;padding:0;background:rgba(0,0,0,.35);border:1px solid rgba(155,48,255,.35);
  cursor:pointer;position:relative;overflow:hidden;text-align:left;}
.mn-newsbtn:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(245,166,35,.35);}
.mn-newsbtn img{display:block;width:100%;height:clamp(46px,calc(var(--ch)*15.5),120px);object-fit:cover;opacity:.9;}
.mn-news-txt{display:block;padding:7px 9px;background:linear-gradient(180deg,rgba(10,0,22,.2),rgba(10,0,22,.9));}
.mn-news-txt b{display:block;font-family:var(--ff-hd);font-weight:normal;letter-spacing:1px;color:#fff;
  font-size:clamp(11px,calc(var(--ch)*2.7),19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-news-txt i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.5),11px);color:#fde68a;}
.mn-srow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px;}
.mn-sbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 3px;cursor:pointer;color:var(--v5);
  background:rgba(61,0,112,.3);border:1px solid rgba(155,48,255,.4);font-family:var(--ff-px);
  font-size:clamp(6px,calc(var(--ch)*1.45),10px);letter-spacing:.5px;}
.mn-sbtn .ico{width:clamp(13px,calc(var(--ch)*3.6),24px);height:clamp(13px,calc(var(--ch)*3.6),24px);}
.mn-sbtn:hover,.mn-sbtn:focus-visible{background:var(--v3);color:#fff;border-color:var(--v5);}
.mn-ref{margin-top:9px;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.45),11px);color:var(--v5);line-height:1.6;}
.mn-refpay{display:flex;align-items:center;justify-content:center;gap:6px;color:#fde68a;
  font-size:clamp(8px,calc(var(--ch)*1.9),14px);letter-spacing:1px;}
.mn-refpay .ico{width:1.3em;height:1.3em;}
.mn-refpay b{font-weight:normal;font-size:1.3em;color:#fff;}
.mn-refsub{margin-top:5px;text-align:center;opacity:.85;}
.mn-referr{margin-top:5px;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.45),11px);
  color:#fca5a5;text-align:center;line-height:1.5;}
.mn-referr:empty{display:none;}
.mn-ref b{color:#fde68a;font-weight:normal;}
.mn-ref button{margin-top:6px;width:100%;font:inherit;color:#fde68a;background:rgba(245,158,11,.16);
  border:1px solid rgba(245,158,11,.55);padding:7px 4px;cursor:pointer;letter-spacing:.5px;}
.mn-ref button:hover{background:rgba(245,158,11,.3);}
.mn-refin{display:none;gap:3px;margin-top:4px;}
.mn-refin.on{display:flex;}
.mn-refin input{flex:1;min-width:0;background:#12052a;border:1px solid rgba(155,48,255,.55);color:#fff;
  font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.45),11px);padding:6px;text-transform:uppercase;}
.mn-refin button{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.45),11px);padding:6px 8px;cursor:pointer;
  color:#fff;background:var(--v3);border:1px solid var(--v4);}
.mn-daily-body{display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.7),13px);margin-top:10px;}
.dq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  padding:clamp(8px,calc(var(--ch)*2.2),16px) clamp(9px,calc(var(--cw)*1.1),14px);
  background:rgba(0,0,0,.3);border-left:3px solid var(--v4);}
.dq.done{border-left-color:#22c55e;background:rgba(34,197,94,.12);}
.dq.claimed{opacity:.45;}
.dq-i{display:flex;align-items:center;justify-content:center;color:var(--v5);}
.dq.done .dq-i{color:#86efac;}
.dq-i .ico{width:clamp(18px,calc(var(--ch)*4.8),32px);height:clamp(18px,calc(var(--ch)*4.8),32px);}
.dq-t{font-family:var(--ff-ui);font-weight:600;color:#fff;line-height:1.12;
  font-size:clamp(10px,calc(var(--ch)*2.8),19px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dq-bar{height:clamp(5px,calc(var(--ch)*1.4),10px);margin-top:5px;background:rgba(0,0,0,.5);border:1px solid rgba(155,48,255,.3);margin-top:3px;position:relative;}
.dq-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#a855f7,#f0abfc);}
.dq.done .dq-bar i{background:linear-gradient(90deg,#16a34a,#86efac);}
.dq-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:2px;
  font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.7),13px);color:var(--v5);margin-top:4px;}
.dq-foot b{font-weight:normal;color:#fde68a;display:inline-flex;align-items:center;gap:2px;}
.dq-foot b .ico{width:1.1em;height:1.1em;}
.dq-btn{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.7),13px);padding:6px 11px;cursor:pointer;color:#fff;
  background:rgba(22,163,74,.5);border:1px solid rgba(34,197,94,.9);letter-spacing:.5px;}
.dq-btn:disabled{background:rgba(0,0,0,.25);border-color:rgba(155,48,255,.3);color:var(--v5);cursor:default;}
.dq-btn.go{animation:qPulse 1s ease-in-out infinite;}
.mn-daily-note{font-family:var(--ff-ui);font-size:clamp(9px,calc(var(--ch)*2.25),15px);color:var(--v5);text-align:center;padding:6px 2px;line-height:1.25;}
.mn-daily-note .ico{width:1.6em;height:1.6em;display:block;margin:0 auto 4px;opacity:.7;}
.mn-daily-login{margin-top:7px;width:100%;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.6),12px);padding:8px 5px;
  cursor:pointer;color:#fde68a;background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.6);}
.mn-daily-login:hover{background:rgba(245,158,11,.32);}
/* phones in landscape: the panels get out of the way of the buttons */
@media (max-height:460px){
  .mn-grid{gap:5px;padding-top:clamp(26px,calc(var(--ch)*8),40px);}
  .mn-newsbtn img{height:clamp(30px,calc(var(--ch)*10),52px);}
  .mn-sbtn span{display:none;}
  .mn-sbtn{padding:5px 2px;}
  .mn-card-h i{display:none;}
}
.chip{background:rgba(61,0,112,.4);border:1px solid rgba(155,48,255,.45);color:var(--v5);
  font-family:var(--ff-px);font-size:11px;padding:7px 9px;cursor:pointer;letter-spacing:1px;
  transition:background .15s,color .15s;}
.chip:hover{background:rgba(106,13,173,.7);color:#fff;}
.chip.off{opacity:.4;}

/* ── how to play / settings / story ─────────────────────────── */
#sHowto,#sSettings,#sStory{background:linear-gradient(160deg,rgba(26,0,53,.98),rgba(8,0,18,.99));
  overflow-y:auto;justify-content:flex-start;
  padding:clamp(10px,calc(var(--ch)*3),32px) calc(var(--cw)*3) clamp(14px,calc(var(--ch)*4),40px);}
.pg-title{font-family:var(--ff-hd);font-size:clamp(26px,calc(var(--cw)*4.2),52px);color:var(--gold);
  letter-spacing:clamp(4px,calc(var(--cw)*1),12px);text-shadow:0 0 20px rgba(245,166,35,.5);margin-bottom:.5em;flex-shrink:0;}
.howto-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(8px,calc(var(--cw)*1.4),20px);
  width:100%;max-width:1150px;align-items:start;}
.ctrl-panel,.rules-panel{background:rgba(61,0,112,.16);border:1px solid rgba(155,48,255,.3);
  padding:clamp(9px,calc(var(--ch)*1.5),17px);}
.ctrl-player-lbl{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.9),24px);letter-spacing:3px;
  margin-bottom:9px;text-align:center;}
.ctrl-row{display:flex;align-items:center;gap:5px;margin-bottom:5px;
  font-size:clamp(13px,calc(var(--cw)*1.35),17.55px);color:#d8d0f0;}
.ctrl-row span{margin-left:auto;text-align:right;opacity:.82;}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(19px,calc(var(--cw)*2),27px);
  height:clamp(19px,calc(var(--cw)*2),27px);padding:0 4px;background:rgba(155,48,255,.16);
  border:1px solid rgba(155,48,255,.55);border-bottom-width:3px;border-radius:4px;
  font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*0.94),12px);color:var(--v5);}
.rules-title{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.9),24px);color:var(--gold2);
  letter-spacing:3px;margin-bottom:9px;text-align:center;}
.rules-list{list-style:none;}
.rules-list li{font-size:clamp(13px,calc(var(--cw)*1.35),17.55px);color:#d8d0f0;padding:3px 0 3px 15px;position:relative;line-height:1.35;}
.rules-list li::before{content:"\25B8";position:absolute;left:0;color:var(--v4);}
.rules-note{margin-top:9px;padding:8px 10px;background:rgba(245,166,35,.09);
  border-left:3px solid var(--gold);font-size:clamp(13px,calc(var(--cw)*1.32),16.2px);color:#e8dcc0;line-height:1.4;}
.rules-note.alt{background:rgba(6,182,212,.09);border-left-color:var(--cyan);color:#cfe9f2;}

/* back buttons live in the layout flow (page header / footer row), so they
   can never float over other content */
.back-btn{position:static;flex-shrink:0;white-space:nowrap;
  background:rgba(61,0,112,.5);border:1px solid var(--v4);color:var(--v5);
  font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*2.25),15px);letter-spacing:2px;
  padding:clamp(6px,calc(var(--ch)*1.5),11px) clamp(10px,calc(var(--cw)*1.8),22px);
  cursor:pointer;transition:background .15s,color .15s;}
.pg-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  width:100%;max-width:1150px;margin-bottom:clamp(8px,calc(var(--ch)*2),20px);flex-shrink:0;}
.pg-head .back-btn{justify-self:start;}
.pg-head .pg-title{margin:0;text-align:center;white-space:nowrap;}
.back-btn:hover{background:var(--v3);color:#fff;}

/* ── settings ───────────────────────────────────────────────── */
.set-grid{width:100%;max-width:1120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:clamp(10px,calc(var(--cw)*1.2),18px);align-items:start;}
.set-card{background:rgba(20,6,40,.55);border:1px solid rgba(155,48,255,.32);padding:clamp(10px,calc(var(--ch)*2),18px);
  display:flex;flex-direction:column;gap:8px;}
.set-h{font-family:var(--ff-hd);font-weight:normal;font-size:clamp(20px,calc(var(--cw)*2.1),28px);letter-spacing:3px;
  color:var(--gold2);margin:0 0 4px;display:flex;align-items:center;gap:10px;}
.set-h span{font-size:.85em;}
.set-card .set-row{background:rgba(0,0,0,.22);}
.vol{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.vol input[type=range]{-webkit-appearance:none;appearance:none;width:clamp(120px,calc(var(--cw)*14),210px);height:8px;
  background:linear-gradient(90deg,var(--gold) var(--p,50%),rgba(155,48,255,.3) var(--p,50%));outline:none;cursor:pointer;}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#fff;
  border:3px solid var(--v3);box-shadow:0 0 10px rgba(245,166,35,.6);cursor:pointer;}
.vol input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#fff;border:3px solid var(--v3);cursor:pointer;}
.vol-val{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1),13px);color:#fff;min-width:4.6em;text-align:right;}
.vol-mute{background:rgba(61,0,112,.45);border:1px solid rgba(155,48,255,.5);color:#fff;font-size:18px;width:38px;height:34px;cursor:pointer;}
.vol-mute.off{opacity:.45;text-decoration:line-through;}
.set-vol.off input[type=range]{opacity:.35;}
.set-btn{background:rgba(61,0,112,.45);border:1px solid rgba(155,48,255,.55);color:#fff;font-family:var(--ff-px);
  font-size:clamp(10px,calc(var(--cw)*1),13px);padding:9px 14px;cursor:pointer;letter-spacing:1px;}
.set-btn:hover{background:var(--v3);}
.set-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.set-stat{background:rgba(0,0,0,.3);border:1px solid rgba(155,48,255,.22);padding:10px 6px;text-align:center;}
.set-stat b{display:block;font-family:var(--ff-hd);font-weight:normal;font-size:clamp(22px,calc(var(--cw)*2.4),32px);color:#fff;line-height:1;}
.set-stat span{display:block;font-size:clamp(12px,calc(var(--cw)*1.05),14px);color:var(--v5);margin-top:4px;font-weight:600;}
@media (max-width:640px){ .set-row{flex-wrap:wrap;} .vol input[type=range]{width:140px;} }
.set-list{width:100%;max-width:580px;display:flex;flex-direction:column;gap:9px;}
.set-row{display:flex;align-items:center;gap:12px;background:rgba(61,0,112,.18);
  border:1px solid rgba(155,48,255,.28);padding:clamp(8px,calc(var(--ch)*1.4),14px) clamp(12px,calc(var(--cw)*1.8),20px);}
.set-txt{flex:1;min-width:0;}
.set-lbl{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.8),22px);letter-spacing:2px;color:var(--fg);line-height:1;}
.set-desc{font-size:clamp(13px,calc(var(--cw)*1.28),16.2px);color:var(--v5);opacity:.75;line-height:1.25;margin-top:2px;}
.seg{display:flex;border:1px solid rgba(155,48,255,.45);flex-shrink:0;}
.seg button{background:transparent;border:0;color:var(--v5);font-family:var(--ff-px);
  font-size:clamp(10px,calc(var(--cw)*1.05),13.5px);padding:8px 10px;cursor:pointer;letter-spacing:1px;
  transition:background .15s,color .15s;}
.seg button+button{border-left:1px solid rgba(155,48,255,.35);}
.seg button.sel{background:var(--v3);color:#fff;}
.seg button:hover:not(.sel){background:rgba(106,13,173,.35);}
.danger-btn{background:rgba(220,38,38,.18);border:1px solid rgba(220,38,38,.55);color:var(--red2);
  font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.05),13.5px);padding:9px 14px;cursor:pointer;letter-spacing:1px;}
.danger-btn:hover{background:rgba(220,38,38,.4);color:#fff;}

/* ── character select ───────────────────────────────────────── */
#sCharSel{background:linear-gradient(160deg,rgba(20,0,42,.985),rgba(6,0,14,.995));
  justify-content:flex-start;padding:clamp(6px,calc(var(--ch)*1.4),14px) 0;}
.cs-top{text-align:center;flex-shrink:0;padding:0 12px;}
.cs-title{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--cw)*3),38px);color:var(--gold);letter-spacing:clamp(3px,calc(var(--cw)*.8),10px);}
.cs-subtitle{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.14),13.5px);color:var(--v5);letter-spacing:2px;margin-top:3px;}
.cs-body{flex:1;display:grid;grid-template-columns:clamp(130px,calc(var(--cw)*21),290px) 1fr clamp(130px,calc(var(--cw)*21),290px);
  gap:clamp(6px,calc(var(--cw)*1.1),16px);width:100%;padding:clamp(5px,calc(var(--ch)*1.1),11px) clamp(8px,calc(var(--cw)*1.4),18px);min-height:0;}
.cs-prev{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:rgba(61,0,112,.14);border:1px solid rgba(155,48,255,.26);padding:7px 6px;min-height:0;overflow:hidden;}
.prev-lbl{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.27),16.5px);letter-spacing:2px;margin-bottom:3px;}
.prev-cv{width:100%;flex:0 0 auto;height:clamp(120px,calc(var(--ch)*30),270px);display:block;}
.prev-name{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--cw)*1.5),21px);color:#fff;letter-spacing:1px;
  text-align:center;line-height:1;margin-top:3px;word-break:break-word;}
.prev-role{font-size:clamp(13px,calc(var(--cw)*1.12),16px);color:var(--v5);opacity:.8;text-align:center;margin-bottom:4px;line-height:1.1;}
.prev-stats{width:100%;display:flex;flex-direction:column;gap:3px;}
.pstat{display:flex;align-items:center;gap:5px;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*0.72),11px);color:var(--v5);}
.pstat-bar{flex:1;height:5px;background:rgba(0,0,0,.5);border:1px solid rgba(155,48,255,.3);}
.pstat-fill{height:100%;}

.cs-grid-wrap{overflow-y:auto;overflow-x:hidden;min-height:0;
  border:1px solid rgba(155,48,255,.2);background:rgba(10,0,24,.5);padding:8px;
  scrollbar-width:thin;scrollbar-color:var(--v3) transparent;}
.cs-grid-wrap::-webkit-scrollbar{width:8px;}
.cs-grid-wrap::-webkit-scrollbar-thumb{background:var(--v3);}
.cs-grid-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,.3);}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(52px,calc(var(--cw)*5.2),78px),1fr));
  gap:clamp(4px,calc(var(--cw)*.55),8px);}
.cc{position:relative;aspect-ratio:3/4;background:rgba(61,0,112,.2);
  border:1px solid rgba(155,48,255,.3);display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;cursor:pointer;overflow:hidden;
  transition:transform .1s,border-color .12s,background .12s;padding-top:2px;}
.cc canvas{width:78%;flex:1;min-height:0;display:block;pointer-events:none;}
.cc-name{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--cw)*1.22),17.55px);color:#fff;letter-spacing:.4px;
  line-height:1;text-align:center;width:100%;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-role{font-size:clamp(8px,calc(var(--cw)*0.79),11px);color:var(--v5);opacity:.7;line-height:1.1;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px;}
.cc.unlocked:hover,.cc.unlocked.kbfocus{transform:scale(1.07);border-color:var(--v5);
  background:rgba(106,13,173,.42);z-index:2;}
.cc.locked{background:rgba(12,8,22,.82);border-color:rgba(80,80,100,.22);cursor:not-allowed;
  align-items:center;justify-content:center;}
.cc-lock{font-size:clamp(13px,calc(var(--cw)*1.7),22px);opacity:.3;}
.cc.boss{border-color:rgba(245,166,35,.6);box-shadow:inset 0 0 14px rgba(245,166,35,.14);}
.cc-star{position:absolute;top:0;right:3px;color:var(--gold);font-size:clamp(13px,calc(var(--cw)*1.28),16.2px);
  z-index:3;text-shadow:0 0 6px var(--gold);}
.cc.p1sel{border:2px solid var(--p1c);box-shadow:0 0 18px rgba(56,189,248,.65);background:rgba(56,189,248,.14);}
.cc.p2sel{border:2px solid var(--p2c);box-shadow:0 0 18px rgba(251,113,133,.65);background:rgba(251,113,133,.14);}

.cs-footer{flex-shrink:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;padding:0 clamp(8px,calc(var(--cw)*1.4),18px);}
.cs-footer .back-btn{justify-self:start;}
.cs-footer-mid{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;}
.cs-fight{display:inline-flex;align-items:center;justify-content:center;gap:clamp(5px,calc(var(--cw)*.8),12px);cursor:pointer;
  font-family:var(--ff-hd);letter-spacing:clamp(2px,calc(var(--cw)*.45),6px);
  font-size:clamp(17px,calc(var(--cw)*2.9),40px);line-height:1;
  padding:clamp(6px,calc(var(--ch)*1.7),15px) clamp(20px,calc(var(--cw)*4),64px);
  color:#04240f;background:linear-gradient(180deg,#b9f6ca,#22c55e 52%,#118a3d);
  border:2px solid #d9fbe4;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:0 0 24px rgba(34,197,94,.5);transition:transform .12s;}
.cs-fight .ico{width:1.05em;height:1.05em;color:#04240f;stroke-width:2.2;}
.cs-fight:not(:disabled){animation:fightPulse 1.2s ease-in-out infinite;}
.cs-fight:not(:disabled):hover{transform:scale(1.04);}
.cs-fight:not(:disabled):active{transform:scale(.97);}
@keyframes fightPulse{50%{box-shadow:0 0 40px rgba(34,197,94,.95),0 0 10px #fff inset;}}
.cs-fight:disabled{cursor:default;color:#9b8fc0;background:linear-gradient(180deg,rgba(61,0,112,.5),rgba(20,6,40,.6));
  border-color:rgba(155,48,255,.45);box-shadow:none;text-shadow:none;}
.cs-fight:disabled .ico{color:#9b8fc0;}
body.nofx .cs-fight:not(:disabled){animation:none;}
.cs-confirm{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.32),16.5px);color:var(--gold2);letter-spacing:2px;
  opacity:0;transition:opacity .2s;}
.cs-confirm.show{opacity:1;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.3}}
.cs-confirm{min-height:1em;}
/* random pick: just a die, in the bottom-right corner (away from the FIGHT button) */
.cs-rand{position:absolute;right:clamp(10px,calc(var(--cw)*1.6),24px);bottom:clamp(8px,calc(var(--ch)*1.8),20px);z-index:5;
  width:clamp(40px,calc(var(--ch)*9),62px);aspect-ratio:1;display:grid;place-items:center;padding:0;cursor:pointer;
  background:linear-gradient(145deg,#4c1d95,#1e0a3c);border:2px solid rgba(216,180,254,.7);border-radius:22%;
  box-shadow:0 4px 0 #07050d,0 0 16px rgba(155,48,255,.45);transition:transform .15s,box-shadow .15s;}
.cs-rand .ico{color:#fff;width:62%;height:62%;}
.cs-rand:hover,.cs-rand:focus-visible{transform:rotate(-12deg) scale(1.08);box-shadow:0 4px 0 #07050d,0 0 26px rgba(216,180,254,.8);outline:none;}
.cs-rand:active{transform:rotate(200deg) scale(.92);transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
/* who is picking right now (local versus and training) */
.cs-who{display:none;gap:clamp(6px,calc(var(--cw)*1),14px);justify-content:center;margin-top:clamp(4px,calc(var(--ch)*1.2),10px);}
.cs-who.on{display:flex;}
.cs-who-btn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-width:clamp(72px,calc(var(--cw)*11),150px);
  background:rgba(12,2,28,.6);border:1px solid rgba(155,48,255,.45);color:var(--v5);
  padding:clamp(3px,calc(var(--ch)*1),8px) clamp(8px,calc(var(--cw)*1.4),18px);transition:background .15s,border-color .15s;}
.cs-who-btn b{font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*2.6),18px);letter-spacing:2px;font-weight:normal;}
.cs-who-btn i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.4),10px);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cs-who-btn.p1{color:var(--p1c);} .cs-who-btn.p2{color:var(--p2c);}
.cs-who-btn.act{background:rgba(155,48,255,.28);border-color:currentColor;box-shadow:0 0 14px rgba(155,48,255,.4);}
.cs-who-btn.act b{color:#fff;}

.story-brief{width:min(760px,96%);background:rgba(20,6,40,.62);border:1px solid rgba(155,48,255,.34);
  padding:clamp(7px,calc(var(--ch)*1.5),15px) clamp(10px,calc(var(--cw)*1.8),22px);
  margin-bottom:clamp(7px,calc(var(--ch)*1.4),15px);text-align:left;}
.story-brief .sb-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.story-brief .sb-stage{font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--cw)*1.75),23px);color:#fff;letter-spacing:1px;}
.story-brief .sb-steps{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*0.9),13px);color:var(--gold2);white-space:nowrap;}
.story-brief .sb-barbg{height:5px;background:rgba(0,0,0,.5);border:1px solid rgba(155,48,255,.3);margin:6px 0 8px;}
.story-brief .sb-bar{height:100%;width:0;background:linear-gradient(90deg,#9b30ff,#f5a623);transition:width .4s;}
.story-brief .sb-quote{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.08),13.5px);color:#e9d5ff;
  font-style:italic;line-height:1.6;}
.story-brief .sb-row{display:flex;justify-content:space-between;gap:10px;margin-top:7px;flex-wrap:wrap;}
.story-brief .sb-mod{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*0.93),13px);color:#fca5a5;letter-spacing:1px;}
.story-brief .sb-rew{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*0.93),13px);color:#fde68a;letter-spacing:1px;}
.story-brief .sb-go{width:100%;margin-top:9px;min-height:clamp(30px,calc(var(--ch)*6.5),52px);}
.story-brief .sb-go .mbtn-main{font-size:clamp(12px,calc(var(--ch)*3.4),24px);}

/* ── story ladder ───────────────────────────────────────────── */
.story-hero{display:flex;align-items:center;gap:clamp(10px,calc(var(--cw)*1.8),24px);margin-bottom:clamp(8px,calc(var(--ch)*1.6),18px);
  background:rgba(61,0,112,.18);border:1px solid rgba(155,48,255,.3);padding:clamp(8px,calc(var(--ch)*1.4),14px) clamp(12px,calc(var(--cw)*2),24px);}
.story-hero canvas{width:clamp(44px,calc(var(--cw)*5),66px);height:clamp(60px,calc(var(--cw)*6.8),90px);display:block;}
.story-hero-txt{text-align:left;}
.story-hero-name{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.4),30px);color:#fff;letter-spacing:2px;line-height:1;}
.story-hero-sub{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*0.98),13px);color:var(--gold2);letter-spacing:1px;margin-top:5px;}
.ladder{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(5px,calc(var(--cw)*.9),12px);
  max-width:1000px;width:100%;}
.rung{position:relative;width:clamp(62px,calc(var(--cw)*7.6),104px);background:rgba(20,6,40,.7);
  border:1px solid rgba(155,48,255,.28);padding:5px 3px;display:flex;flex-direction:column;align-items:center;}
.rung canvas{width:72%;aspect-ratio:3/4;display:block;}
.rung-n{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--cw)*1.42),18.9px);color:#fff;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.rung-i{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--cw)*0.65),10px);color:var(--v5);opacity:.7;margin-top:3px;
  line-height:1.3;word-break:break-word;text-align:center;max-width:100%;}
.rung.done{border-color:rgba(34,197,94,.55);background:rgba(6,40,20,.6);}
.rung.done::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(24px,calc(var(--cw)*3.4),46px);color:rgba(34,197,94,.75);text-shadow:0 0 12px rgba(34,197,94,.7);}
.rung.cur{border:2px solid var(--gold);box-shadow:0 0 22px rgba(245,166,35,.5);
  animation:rungPulse 1.4s ease-in-out infinite;}
@keyframes rungPulse{0%,100%{box-shadow:0 0 18px rgba(245,166,35,.42)}50%{box-shadow:0 0 34px rgba(245,166,35,.8)}}
.rung.future{opacity:.42;}
.rung-m{position:absolute;top:2px;right:3px;font-size:clamp(13px,calc(var(--cw)*1.22),16px);color:#fca5a5;}
.rung.bossrung{border-color:rgba(220,38,38,.6);background:rgba(40,4,10,.6);}

/* ── map select: the arenas as cards; against a person both vote ─────── */
#sMap{background:radial-gradient(ellipse at 50% 0%,#2a0a52 0%,#0b0118 60%,#05010c 100%);align-items:center;
  padding:calc(var(--ch)*3) calc(var(--cw)*3) calc(var(--ch)*3);gap:calc(var(--ch)*2.4);overflow:hidden;}
.map-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;}
.map-top .back-btn{justify-self:start;}
.map-head{text-align:center;}
.map-title{font-family:var(--ff-hd);font-size:clamp(26px,calc(var(--cw)*4.4),64px);letter-spacing:4px;line-height:1;
  background:linear-gradient(180deg,#fffdf0,#f8d774 45%,#e08a13);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(245,166,35,.45));}
.map-sub{font-family:var(--ff-px);font-size:clamp(9px,calc(var(--cw)*1.05),14px);color:#c4b5fd;letter-spacing:2px;margin-top:6px;min-height:1.3em;}
.map-timer{justify-self:end;font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--cw)*3),40px);color:#fde68a;min-width:2ch;text-align:right;}
.map-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,auto));gap:calc(var(--cw)*1.2);width:min(100%,calc(var(--cw)*94));
  flex:1 1 auto;min-height:0;align-content:center;}
.map-card{position:relative;display:flex;flex-direction:column;background:#0b0418;border:2px solid rgba(155,48,255,.45);padding:0;
  cursor:pointer;color:#fff;overflow:hidden;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);transition:transform .18s,border-color .18s,filter .18s;
  animation:mapIn .45s cubic-bezier(.2,1.2,.4,1) both;}
.map-card:nth-child(2){animation-delay:.05s} .map-card:nth-child(3){animation-delay:.1s} .map-card:nth-child(4){animation-delay:.15s}
.map-card:nth-child(5){animation-delay:.2s} .map-card:nth-child(6){animation-delay:.25s}
.map-card:nth-child(7){animation-delay:.3s} .map-card:nth-child(8){animation-delay:.35s} .map-card:nth-child(9){animation-delay:.4s} .map-card:nth-child(10){animation-delay:.45s}
@keyframes mapIn{from{opacity:0;transform:translateY(calc(var(--ch)*5)) scale(.92)}to{opacity:1;transform:none}}
.map-card{min-height:0;}
/* on a short screen the picture gives way, never the name */
.map-card canvas{display:block;width:100%;aspect-ratio:16/9;height:auto;flex:1 1 auto;min-height:0;object-fit:cover;}
.map-card .map-name{flex:none;}
.map-card .map-name{font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--cw)*1.35),22px);letter-spacing:1px;line-height:1.1;padding:.3em .6em .35em;
  background:linear-gradient(90deg,var(--mc,#9b30ff) 0 4px,rgba(4,0,12,.92) 4px);text-align:left;}
.map-card:hover,.map-card:focus,.map-card.focus{transform:translateY(-4px) scale(1.03);border-color:var(--mc,#9b30ff);
  filter:brightness(1.12);outline:none;box-shadow:0 0 26px var(--mc,#9b30ff);}
.map-card.rand canvas{background:repeating-linear-gradient(135deg,#1a0535 0 14px,#12032a 14px 28px);}
.map-card .map-q{position:absolute;inset:0 0 2.2em 0;display:grid;place-items:center;font-family:var(--ff-hd);
  font-size:clamp(40px,calc(var(--cw)*7),96px);color:#fde68a;text-shadow:0 0 22px rgba(245,166,35,.7);pointer-events:none;}
/* whose vote sits on a card */
.map-card .map-pins{position:absolute;top:6px;right:8%;display:flex;gap:4px;}
.map-pin{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*.95),12px);padding:.35em .5em;color:#07050d;animation:pinPop .35s cubic-bezier(.34,1.56,.64,1) both;}
.map-pin.p1{background:var(--p1c);} .map-pin.p2{background:var(--p2c);}
@keyframes pinPop{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
/* the roulette: the two voted cards take turns lighting up, then one wins */
.map-card.lit{border-color:#fde68a;box-shadow:0 0 34px #f5a623,inset 0 0 0 3px #fde68a;filter:brightness(1.3);transform:scale(1.05);}
.map-card.win{border-color:#fde68a;box-shadow:0 0 50px #f5a623,inset 0 0 0 4px #fde68a;animation:mapWin .6s ease-out both;z-index:2;}
.map-card.lose{filter:grayscale(.85) brightness(.45);transform:scale(.96);}
@keyframes mapWin{0%{transform:scale(1.25);filter:brightness(2.2)}100%{transform:scale(1.06);filter:brightness(1.2)}}
.map-votes{display:grid;grid-template-columns:1fr auto 1fr;gap:calc(var(--cw)*2);align-items:center;width:min(100%,calc(var(--cw)*80));}
.map-vote{display:flex;flex-direction:column;align-items:center;padding:.5em 1em;background:rgba(4,0,12,.6);border:1px solid rgba(155,48,255,.4);}
.map-vote.p1{border-left:4px solid var(--p1c);} .map-vote.p2{border-right:4px solid var(--p2c);}
.map-vote.turn{box-shadow:0 0 18px rgba(253,230,138,.45);border-color:#fde68a;animation:voteTurn 1.2s ease-in-out infinite;}
@keyframes voteTurn{50%{box-shadow:0 0 30px rgba(253,230,138,.75)}}
.mv-who{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*.95),12px);color:#c4b5fd;letter-spacing:1px;}
.map-vote b{font-family:var(--ff-hd);font-size:clamp(16px,calc(var(--cw)*2.2),30px);letter-spacing:2px;color:#fff;font-weight:400;}
.map-odds{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.6),36px);color:#fde68a;letter-spacing:2px;text-align:center;}
#sMap.solo .map-votes{display:none;}
.map-result{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:6;display:none;flex-direction:column;align-items:center;
  pointer-events:none;padding:calc(var(--ch)*2) 0;background:linear-gradient(90deg,transparent,rgba(4,0,12,.9) 20%,rgba(4,0,12,.9) 80%,transparent);}
.map-result.on{display:flex;animation:mapRes .5s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes mapRes{from{opacity:0;transform:translateY(-50%) scaleY(.2)}to{opacity:1;transform:translateY(-50%)}}
.mr-k{font-family:var(--ff-px);font-size:clamp(9px,calc(var(--cw)*1.2),15px);color:#c4b5fd;letter-spacing:3px;}
.mr-name{font-family:var(--ff-hd);font-size:clamp(34px,calc(var(--cw)*6.5),96px);letter-spacing:4px;line-height:1;color:#fff;
  text-shadow:0 0 26px var(--mc,#f5a623);}
@media (max-aspect-ratio:4/3){ .map-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,auto));} }

/* ── fight intro ────────────────────────────────────────────── */
/* ── VS screen: diagonal split, each teacher big in their own half. The portraits glide
   in from their side (left from the left, right from the right), a light sweeps over
   them, the VS slams in the middle, then the name plates rise — nothing overlaps ── */
#sIntro{background:#05010c;overflow:hidden;animation:vsShake .5s .62s cubic-bezier(.36,.07,.19,.97) 2;
  grid-template-columns:minmax(0,1fr) calc(var(--cw)*15) minmax(0,1fr);align-items:center;justify-items:center;
  padding:calc(var(--ch)*5) calc(var(--cw)*3) calc(var(--ch)*10);}
#sIntro.on{display:grid;}
body.nofx #sIntro,body.lowgfx #sIntro{animation:none;}
@keyframes vsShake{
  10%{transform:translate(-7px,4px) rotate(-.25deg)} 25%{transform:translate(6px,-5px) rotate(.2deg)}
  45%{transform:translate(-4px,-3px)} 65%{transform:translate(4px,3px)} 100%{transform:none}}
.vs-bg,.vs-bolt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;}
.vs-bg{z-index:1;animation:vsBgIn .45s ease-out both,vsBgZoom 9s .45s linear both;}
.vs-bolt{z-index:2;}
@keyframes vsBgIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes vsBgZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
/* speed lines racing in with each portrait, then gone */
.vs-speed{position:absolute;top:0;bottom:0;width:50%;z-index:2;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--ch)*2.2),rgba(255,255,255,.16) calc(var(--ch)*2.2) calc(var(--ch)*2.45),transparent calc(var(--ch)*2.45) calc(var(--ch)*5.1));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);}
.vs-speed.left{left:0;animation:vsSpeedL 1.15s .05s ease-out both;}
.vs-speed.right{right:0;animation:vsSpeedR 1.15s .05s ease-out both;}
@keyframes vsSpeedL{0%{opacity:0;transform:translateX(-40%) scaleY(1.4)}25%{opacity:1}100%{opacity:0;transform:translateX(30%) scaleY(1)}}
@keyframes vsSpeedR{0%{opacity:0;transform:translateX(40%) scaleY(1.4)}25%{opacity:1}100%{opacity:0;transform:translateX(-30%) scaleY(1)}}
body.nofx .vs-speed,body.lowgfx .vs-speed{display:none;}
.intro-fighter-wrap{display:flex;flex-direction:column;align-items:center;position:relative;z-index:3;min-width:0;max-width:100%;
  grid-row:1;}
.intro-fighter-wrap.left{grid-column:1;animation:vsDriftFL 8s 1.1s linear both;}
.intro-fighter-wrap.right{grid-column:3;animation:vsDriftFR 8s 1.1s linear both;}
/* the slow drift apart that makes it feel like a movie */
@keyframes vsDriftFL{from{transform:none}to{transform:translateX(calc(var(--cw)*-2.4)) scale(1.04)}}
@keyframes vsDriftFR{from{transform:none}to{transform:translateX(calc(var(--cw)*2.4)) scale(1.04)}}
.vs-face{position:relative;padding:clamp(3px,calc(var(--cw)*.4),6px);background:rgba(4,0,12,.5);
  border:clamp(2px,calc(var(--cw)*.32),4px) solid var(--fc,#9b30ff);
  box-shadow:0 0 34px var(--fc,#9b30ff),inset 0 0 26px rgba(0,0,0,.75);}
.intro-fighter-wrap.left .vs-face{clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);
  animation:vsGlideL 1s cubic-bezier(.12,.9,.18,1) both,vsFloat 4.2s 1.2s ease-in-out infinite;}
.intro-fighter-wrap.right .vs-face{clip-path:polygon(0 0,89% 0,100% 100%,11% 100%);
  animation:vsGlideR 1s cubic-bezier(.12,.9,.18,1) both,vsFloat 4.2s 1.45s ease-in-out infinite;}
@keyframes vsGlideL{0%{transform:translateX(-80vw) skewX(12deg) scale(1.12);opacity:0;filter:blur(7px) brightness(2.2)}
  45%{opacity:1;filter:blur(1px) brightness(1.4)}
  75%{transform:translateX(calc(var(--cw)*1.4)) skewX(-2deg) scale(1.02);filter:none}
  100%{transform:none;opacity:1;filter:none}}
@keyframes vsGlideR{0%{transform:translateX(80vw) skewX(-12deg) scale(1.12);opacity:0;filter:blur(7px) brightness(2.2)}
  45%{opacity:1;filter:blur(1px) brightness(1.4)}
  75%{transform:translateX(calc(var(--cw)*-1.4)) skewX(2deg) scale(1.02);filter:none}
  100%{transform:none;opacity:1;filter:none}}
@keyframes vsFloat{50%{transform:translateY(calc(var(--ch)*-1.1));}}
/* a light sweeps across each portrait once it has landed */
.vs-face::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.12) 55%,transparent 68%);
  transform:translateX(-130%);animation:vsShine .9s 1s ease-in-out both;}
.intro-fighter-wrap.right .vs-face::after{animation-delay:1.18s;}
@keyframes vsShine{to{transform:translateX(130%);}}
body.nofx .vs-face::after{display:none;}
.intro-cv{width:min(calc(var(--cw)*30),calc(var(--ch)*50));aspect-ratio:1;display:block;}
/* the name plate under the portrait: rarity, name, subject — in its own box, under the picture */
.vs-plate{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;max-width:100%;margin-top:calc(var(--ch)*2.2);
  padding:calc(var(--ch)*1.1) calc(var(--cw)*2.6) calc(var(--ch)*1.3);
  background:linear-gradient(90deg,transparent,rgba(4,0,12,.78) 14%,rgba(4,0,12,.78) 86%,transparent);
  animation:vsPlateIn .6s .78s cubic-bezier(.2,1.25,.4,1) both;}
.intro-fighter-wrap.right .vs-plate{animation-delay:.9s;}
@keyframes vsPlateIn{from{opacity:0;transform:translateY(calc(var(--ch)*4)) scaleX(.6)}to{opacity:1;transform:none}}
.vs-plate .tier-badge{margin:0 0 calc(var(--ch)*.8);font-size:clamp(11px,calc(var(--cw)*1.35),19px);animation:vsBadge .45s 1.05s cubic-bezier(.34,1.56,.64,1) both;}
.vs-plate .og-tag{margin:0 0 calc(var(--ch)*.8) 6px;}
@keyframes vsBadge{from{transform:scale(0) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.intro-name{flex-basis:100%;font-family:var(--ff-hd);font-size:clamp(17px,calc(var(--cw)*3.2),46px);letter-spacing:2px;max-width:100%;
  text-shadow:0 0 16px currentColor;text-align:center;line-height:1.05;animation:vsName .8s .85s cubic-bezier(.16,1,.3,1) both;}
.intro-name.long{font-size:clamp(13px,calc(var(--cw)*1.9),28px);letter-spacing:1px;}
@keyframes vsName{from{letter-spacing:.6em;opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
.intro-sub{flex-basis:100%;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*1.05),13px);color:var(--v5);letter-spacing:1px;margin-top:calc(var(--ch)*.9);
  max-width:100%;text-align:center;line-height:1.5;animation:vsFadeIn .5s 1.15s both;}
@keyframes vsFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vs-mid{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;pointer-events:none;}
.vs-ring{position:absolute;width:clamp(90px,calc(var(--cw)*16),260px);aspect-ratio:1;border:3px solid rgba(255,255,255,.85);
  border-radius:50%;animation:vsRing .7s .62s ease-out both;}
@keyframes vsRing{from{transform:scale(.2);opacity:.9}to{transform:scale(2.6);opacity:0}}
.vs-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5;animation:vsFlash .5s .62s ease-out both;}
@keyframes vsFlash{0%{opacity:.85}100%{opacity:0}}
body.nofx .vs-flash{display:none;}
.intro-vs{font-family:var(--ff-hd);font-size:clamp(58px,calc(var(--cw)*11),180px);line-height:.8;letter-spacing:-2px;
  color:transparent;background:linear-gradient(180deg,#fffdf0 6%,#f8d774 34%,#e08a13 52%,#8a4a06 70%,#f7d774 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:clamp(2px,calc(var(--cw)*.42),6px) #1b0730;
  paint-order:stroke fill;filter:drop-shadow(0 0 26px rgba(245,166,35,.85)) drop-shadow(0 6px 10px rgba(0,0,0,.75));
  transform:skewX(-8deg);animation:vsPop .55s .62s cubic-bezier(.34,1.56,.64,1) both,vsBreathe 2.6s 1.25s ease-in-out infinite;}
@keyframes vsPop{from{transform:skewX(-8deg) scale(4.2) rotate(-16deg);opacity:0}
  60%{transform:skewX(-8deg) scale(.92) rotate(2deg);opacity:1}to{transform:skewX(-8deg) scale(1);opacity:1}}
@keyframes vsBreathe{50%{transform:skewX(-8deg) scale(1.045);}}
body.nofx .intro-vs{animation:vsPop .4s .3s ease-out both;}
.intro-stage{position:absolute;bottom:clamp(12px,calc(var(--ch)*3),30px);left:50%;transform:translateX(-50%);font-family:var(--ff-px);z-index:4;
  font-size:clamp(10px,calc(var(--cw)*1.12),13.5px);color:var(--v5);letter-spacing:3px;white-space:nowrap;
  display:flex;align-items:center;gap:calc(var(--cw)*1.2);animation:vsFade .6s 1.2s both;}
.intro-stage::before,.intro-stage::after{content:'';width:calc(var(--cw)*6);height:1px;background:linear-gradient(90deg,transparent,var(--v5));}
.intro-stage::after{transform:scaleX(-1);}
@keyframes vsFade{from{opacity:0}to{opacity:.8}}


/* ── fight HUD (arcade style) ───────────────────────────────── */
#fHUD{position:absolute;inset:var(--gy,0) var(--gx,0);display:none;pointer-events:none;z-index:20;}
#fHUD.on{display:block;transition:opacity .18s;}
#fHUD.cine{opacity:0;}
.hud-side{position:absolute;top:clamp(6px,calc(var(--ch)*1.6),16px);width:41.5%;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(5px,calc(var(--cw)*.7),10px);align-items:start;}
.hud-side.left{left:clamp(8px,calc(var(--cw)*1.2),16px);}
.hud-side.right{right:clamp(8px,calc(var(--cw)*1.2),16px);grid-template-columns:minmax(0,1fr) auto;}
.hud-side.right .hud-port-wrap{order:2;}
.hud-port-wrap{width:clamp(36px,calc(var(--ch)*11),86px);aspect-ratio:1;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#3b1d6e,#0b0418 75%);
  border:2px solid #f3e3a3;box-shadow:0 0 0 2px #07050d,0 4px 14px rgba(0,0,0,.6);transform:skewX(-10deg);}
.hud-side.right .hud-port-wrap{transform:skewX(10deg);}
.hud-port{width:100%;height:100%;display:block;}
.hud-main{min-width:0;display:flex;flex-direction:column;gap:clamp(2px,calc(var(--ch)*.55),5px);}
.hud-side.right .hud-main{align-items:flex-end;}
.hud-nameRow{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;width:100%;min-width:0;}
.hud-side.right .hud-nameRow{flex-direction:row-reverse;}
.hud-id{min-width:0;}
.hud-side.right .hud-id{text-align:right;}
.hud-name{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*4.3),32px);letter-spacing:2px;line-height:.95;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic;padding-right:.15em;
  text-shadow:2px 2px 0 #07050d,-1px -1px 0 #07050d,0 0 14px currentColor;}
.hud-sub{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.31),11px);color:#e9d5ff;opacity:.8;letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;text-shadow:1px 1px 0 #000;}
.hp-bg{position:relative;width:calc(100% - var(--ch)*1.4);height:clamp(14px,calc(var(--ch)*3.8),32px);
  background:linear-gradient(180deg,#4a0b0b,#1c0303);border:2px solid #f3e3a3;
  box-shadow:0 0 0 2px #07050d,0 5px 16px rgba(0,0,0,.55),inset 0 3px 8px rgba(0,0,0,.7);
  overflow:hidden;transform:skewX(-22deg);margin-left:calc(var(--ch)*.7);}
.hud-side.right .hp-bg{transform:skewX(22deg);margin-left:0;margin-right:calc(var(--ch)*.7);}
.hp-ghost{position:absolute;top:0;height:100%;background:linear-gradient(180deg,#ffffff,#ff7a45 35%,#d42020);
  transition:width .55s cubic-bezier(.3,.7,.3,1) .2s;}
.hp-bar{position:absolute;top:0;height:100%;transition:width .08s linear;}
.hp-bar::after{content:'';position:absolute;left:0;right:0;top:10%;height:24%;background:rgba(255,255,255,.42);}
.hp-bar.low{animation:hpLow .45s steps(2) infinite;}
@keyframes hpLow{50%{filter:brightness(1.5)}}
.hud-side.left .hp-bar,.hud-side.left .hp-ghost{left:0;}
.hud-side.right .hp-bar,.hud-side.right .hp-ghost{right:0;}
.hp-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.5),12px);color:#fff;opacity:.85;
  text-shadow:1px 1px 0 #000,0 0 5px #000;z-index:2;transform:skewX(22deg);}
.hud-side.right .hp-num{transform:skewX(-22deg);}
.bar-bg{position:relative;overflow:hidden;background:rgba(7,5,13,.82);}
.bar-fill{position:absolute;top:0;height:100%;transition:width .09s linear;}
.st-bg{width:70%;height:clamp(4px,calc(var(--ch)*1.15),9px);border:1px solid rgba(243,227,163,.75);
  box-shadow:0 0 0 1px #07050d;transform:skewX(-22deg);margin-left:calc(var(--ch)*1.6);}
.hud-side.right .st-bg{transform:skewX(22deg);margin-left:0;margin-right:calc(var(--ch)*1.6);}
.hud-side.left .st-fill{left:0;}
.hud-side.right .st-fill{right:0;}
.st-fill{background:linear-gradient(180deg,#bbf7d0,#22c55e 60%,#15803d);}
.st-bg.low{border-color:var(--red);}
.st-bg.low .st-fill{background:linear-gradient(180deg,#fecaca,#ef4444);}
.wins-row{display:flex;gap:4px;flex-shrink:0;padding-bottom:3px;}
.win-pip{width:clamp(9px,calc(var(--ch)*2),15px);height:clamp(9px,calc(var(--ch)*2),15px);
  background:rgba(0,0,0,.6);border:2px solid rgba(243,227,163,.55);transform:rotate(45deg);box-shadow:0 0 0 1px #07050d;}
.win-pip.lit{background:radial-gradient(circle,#fff3a0,#f5a300);border-color:#fff3a0;box-shadow:0 0 12px var(--gold);}

.hud-center{position:absolute;top:clamp(4px,calc(var(--ch)*1.2),12px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:clamp(1px,calc(var(--ch)*.45),4px);}
.hud-timer{font-family:var(--ff-hd);font-size:clamp(26px,calc(var(--ch)*8.4),64px);color:#fff;line-height:.95;
  min-width:1.55em;text-align:center;padding:.02em .12em 0;background:linear-gradient(180deg,#1f0d3d,#07050d);
  border:2px solid #f3e3a3;box-shadow:0 0 0 2px #07050d,0 4px 14px rgba(0,0,0,.6);
  text-shadow:0 0 12px rgba(155,48,255,.8),2px 2px 0 #000;}
.hud-timer.urgent{color:#ff6b6b;animation:tick .5s steps(2) infinite;}
@keyframes tick{50%{color:#ffffff}}
.hud-ko{font-family:var(--ff-hd);font-size:clamp(10px,calc(var(--ch)*2.7),22px);letter-spacing:1px;color:#fff6c2;
  width:clamp(26px,calc(var(--ch)*6.6),52px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,#ff5a5a,#9b0000 70%);border:2px solid #f3e3a3;box-shadow:0 0 0 2px #07050d;
  text-shadow:1px 1px 0 #000;}
.hud-ko.danger{animation:koBlink .35s steps(2) infinite;}
@keyframes koBlink{50%{background:radial-gradient(circle at 40% 35%,#fff3a0,#ff8a00 70%);color:#3b0000;}}
.hud-round{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.38),11px);color:#e9d5ff;letter-spacing:2px;
  text-shadow:1px 1px 0 #000;white-space:nowrap;}

.hud-super{position:absolute;bottom:clamp(8px,calc(var(--ch)*2.6),24px);width:31%;display:flex;align-items:center;
  gap:clamp(4px,calc(var(--cw)*.6),8px);}
.hud-super.left{left:clamp(10px,calc(var(--cw)*1.6),20px);}
.hud-super.right{right:clamp(10px,calc(var(--cw)*1.6),20px);flex-direction:row-reverse;}
.sup-lbl{font-family:var(--ff-hd);font-style:italic;font-size:clamp(12px,calc(var(--ch)*3.4),26px);letter-spacing:1px;color:#7dd3fc;
  text-shadow:2px 2px 0 #07050d;line-height:1;}
.sup-bg{flex:1;height:clamp(8px,calc(var(--ch)*2.3),18px);border:2px solid #7dd3fc;box-shadow:0 0 0 2px #07050d;transform:skewX(-22deg);}
.hud-super.right .sup-bg{transform:skewX(22deg);}
.hud-super.left .sp-fill{left:0;}
.hud-super.right .sp-fill{right:0;}
.sp-fill{background:linear-gradient(180deg,#e0f2fe,#38bdf8 45%,#1d4ed8);}
.sup-ticks{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(7,5,13,.85) calc(25% - 2px) 25%);}
.sup-max{font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*3),24px);color:#fcd34d;opacity:0;
  text-shadow:2px 2px 0 #07050d,0 0 10px #f59e0b;}
.sup-bg.ready{border-color:#fcd34d;box-shadow:0 0 0 2px #07050d,0 0 16px #f59e0b;}
.sup-bg.ready .sp-fill{background:linear-gradient(90deg,#fff3a0,#f59e0b,#fff3a0);background-size:200% 100%;
  animation:supFlow .7s linear infinite;}
@keyframes supFlow{to{background-position:-200% 0}}
.sup-bg.ready + .sup-max{opacity:1;animation:blink .5s steps(2) infinite;}
#fHUD.tpad .hud-super{bottom:auto;top:clamp(56px,calc(var(--ch)*17),140px);width:24%;}

/* tutorial box */
.tut-box{position:absolute;left:50%;top:clamp(92px,calc(var(--ch)*22),200px);transform:translateX(-50%);width:min(620px,calc(100% - 24px));
  display:none;flex-direction:column;align-items:center;text-align:center;gap:4px;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(26,0,53,.88),rgba(8,0,18,.88));border:2px solid rgba(253,224,71,.55);padding:10px 16px 12px;
  box-shadow:0 0 30px rgba(155,48,255,.35);}
.tut-box.on{display:flex;}
.tut-box.done{border-color:#22c55e;box-shadow:0 0 34px rgba(34,197,94,.55);animation:tutDone .5s ease-out;}
@keyframes tutDone{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%) scale(1)}}
.tut-step{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.4),11px);color:var(--v5);letter-spacing:1px;}
.tut-title{font-family:var(--ff-hd);font-size:clamp(24px,calc(var(--ch)*6),46px);color:#fde68a;letter-spacing:3px;line-height:1;}
.tut-txt{font-size:clamp(14px,calc(var(--ch)*3),21px);color:#fff;line-height:1.25;font-weight:600;}
.tut-txt kbd{font-family:var(--ff-px);font-size:.62em;padding:3px 6px;margin:0 2px;border:1px solid #fde68a;background:rgba(245,158,11,.2);color:#fde68a;vertical-align:middle;}
.tut-prog{display:flex;gap:6px;margin-top:4px;}
.tut-prog i{width:14px;height:14px;border:2px solid rgba(253,224,71,.6);transform:rotate(45deg);}
.tut-prog i.on{background:#fde047;box-shadow:0 0 10px #fde047;}
.tut-hint{font-size:13px;color:var(--v5);min-height:1em;}
.howto-tut{display:flex;justify-content:center;margin:0 auto clamp(8px,calc(var(--ch)*2),18px);}
.howto-tut .mbtn{width:min(520px,100%);justify-content:center;border-color:rgba(253,224,71,.7);}
.howto-tut .mbtn-sub{color:#fde68a;}
/* training readouts */
.train-hud{position:absolute;left:0;right:0;bottom:clamp(40px,calc(var(--ch)*10),84px);display:none;justify-content:space-between;align-items:flex-end;
  padding:0 clamp(8px,calc(var(--cw)*1.5),20px);pointer-events:none;z-index:4;}
.train-hud.on{display:flex;}
.tr-inputs{display:flex;flex-direction:column-reverse;gap:2px;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.5),12px);color:#fff;
  background:rgba(4,0,12,.55);border:1px solid rgba(155,48,255,.35);padding:6px 8px;min-width:clamp(96px,calc(var(--cw)*12),150px);}
.tr-inputs div{display:grid;grid-template-columns:2.4em 1.6em 1fr;gap:6px;align-items:center;white-space:nowrap;opacity:.55;}
.tr-inputs div:first-child{opacity:1;}
.tr-inputs i{font-style:normal;color:var(--v5);text-align:right;}
.tr-inputs b{font-weight:normal;color:#fde68a;}
.tr-stats{display:grid;grid-template-columns:auto auto;gap:3px 12px;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.5),12px);
  background:rgba(4,0,12,.55);border:1px solid rgba(155,48,255,.35);padding:7px 10px;color:var(--v5);}
.tr-stats b{font-weight:normal;color:#fff;text-align:right;}
.tr-stats b.plus{color:#86efac;} .tr-stats b.minus{color:#fca5a5;}
.train-opts{display:none;width:min(680px,100%);margin:clamp(10px,calc(var(--ch)*2),20px) auto 0;flex-direction:column;gap:6px;}
.train-opts.on{display:flex;}
.train-opts .set-row{flex-wrap:wrap;row-gap:6px;}
.train-opts .set-txt{flex:1 1 220px;min-width:min(100%,220px);}
.train-opts .set-row > .seg, .train-opts .set-row > .set-btn{margin-left:auto;}
.train-opts .seg button{padding:7px 8px;font-size:9px;}
.combo-tag{position:absolute;top:clamp(70px,calc(var(--ch)*19),170px);opacity:0;transition:opacity .15s;
  display:flex;flex-direction:column;line-height:.85;font-style:italic;}
.combo-tag.show{opacity:1;animation:cmbPop .22s cubic-bezier(.34,1.56,.64,1);}
@keyframes cmbPop{from{transform:scale(1.7) rotate(-6deg)}to{transform:none}}
.combo-tag.left{left:clamp(12px,calc(var(--cw)*2),26px);align-items:flex-start;transform-origin:left center;}
.combo-tag.right{right:clamp(12px,calc(var(--cw)*2),26px);align-items:flex-end;transform-origin:right center;}
.cmb-n{font-family:var(--ff-hd);font-size:clamp(34px,calc(var(--ch)*13),110px);padding:0 .1em;
  background:linear-gradient(180deg,#ffffff 10%,#fff3a0 40%,#ffb000 65%,#e03a00);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(3px 3px 0 #07050d);}
.cmb-l{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*4.4),36px);color:#fff;letter-spacing:3px;
  text-shadow:2px 2px 0 #07050d;padding:0 .1em;}
.cmb-d{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.62),13px);color:#fcd34d;margin-top:4px;text-shadow:1px 1px 0 #000;}

.announce{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) scale(.6) skewX(-8deg);
  font-family:var(--ff-hd);font-size:clamp(36px,calc(var(--cw)*7),104px);
  background:linear-gradient(180deg,#ffffff 8%,#fff3a0 35%,#ffb000 58%,#ff4d00 80%,#9b0010);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(4px 4px 0 #07050d) drop-shadow(0 0 22px rgba(255,120,0,.55));
  letter-spacing:clamp(2px,calc(var(--cw)*.6),8px);opacity:0;pointer-events:none;
  max-width:92%;text-align:center;line-height:1.05;padding:0 .15em;
  transition:opacity .16s,transform .22s cubic-bezier(.34,1.56,.64,1);}
.intro-quote{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(26px,calc(var(--ch)*7),64px);
  width:min(760px,92%);text-align:center;font-family:var(--ff-px);font-style:italic;
  font-size:clamp(10px,calc(var(--cw)*1.2),15px);color:#e9d5ff;line-height:1.6;text-shadow:1px 1px 0 #000;}
#fHUD.finmode > *:not(#announce){opacity:0;transition:opacity .3s;}
.announce.fin{font-size:clamp(40px,calc(var(--cw)*8),120px);
  background:linear-gradient(180deg,#ffffff 5%,#fecaca 30%,#ef4444 58%,#7f1d1d 90%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(5px 5px 0 #07050d) drop-shadow(0 0 30px rgba(239,68,68,.75));animation:finPulse .5s ease-in-out infinite alternate;}
@keyframes finPulse{to{letter-spacing:clamp(4px,calc(var(--cw)*1),14px);}}
.announce.count{font-size:clamp(54px,calc(var(--cw)*11),150px);letter-spacing:0;}
.announce.long{font-size:clamp(22px,calc(var(--cw)*3.8),56px);letter-spacing:clamp(1px,calc(var(--cw)*.3),4px);}
.announce.on{opacity:1;transform:translate(-50%,-50%) scale(1) skewX(-8deg);}

/* pause button sits under the timer, in the HUD's own column */
.esc-btn{margin-top:clamp(1px,calc(var(--ch)*.4),4px);
  background:rgba(0,0,0,.5);border:1px solid rgba(243,227,163,.45);color:#e9d5ff;
  font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.38),11px);padding:5px 9px;cursor:pointer;
  pointer-events:auto;letter-spacing:1px;white-space:nowrap;}
.esc-btn:hover{background:var(--v3);color:#fff;}

/* ── round end / KO ─────────────────────────────────────────── */
#sKO{z-index:55;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,.55));pointer-events:none;}
#sKO.out{animation:koOut .28s ease-in forwards;}
@keyframes koOut{to{opacity:0}}
.ko-inner{text-align:center;animation:koIn .4s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes koIn{from{transform:scale(2.6) rotate(-9deg);opacity:0}to{transform:none;opacity:1}}
.ko-text{font-family:var(--ff-hd);font-size:clamp(56px,calc(var(--cw)*11),168px);line-height:.95;font-style:italic;
  letter-spacing:clamp(3px,calc(var(--cw)*1),14px);padding:0 .12em;
  background:linear-gradient(180deg,#ffffff 6%,#ffd6d6 30%,#ff3b3b 58%,#8b0000 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(6px 6px 0 #07050d) drop-shadow(0 0 30px rgba(220,38,38,.7));}
.ko-winner{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--cw)*3.2),44px);color:var(--gold);
  letter-spacing:3px;margin-top:10px;text-shadow:0 0 18px var(--gold);}
.ko-sub{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.17),15px);color:var(--v5);letter-spacing:2px;margin-top:10px;}

/* ── game over ──────────────────────────────────────────────── */
#sOver.on{animation:goFade .6s ease-out both;}
/* ── first visit: only the tutorial is open ── */
.tut-main-wrap{display:none;width:100%;flex-direction:column;align-items:stretch;gap:clamp(4px,calc(var(--ch)*1),8px);margin-bottom:clamp(6px,calc(var(--ch)*1.6),14px);}
#sMenu.tut-lock .tut-main-wrap{display:flex;}
.tut-lock-hint{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.5),11px);color:#fde68a;text-align:center;letter-spacing:1px;line-height:1.5;}
#btnTutMain{border-color:#22c55e;background:linear-gradient(90deg,rgba(34,197,94,.28),rgba(61,0,112,.3));animation:tutPulse 1.6s ease-in-out infinite;}
@keyframes tutPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}50%{box-shadow:0 0 22px 4px rgba(34,197,94,.45)}}
#sMenu.tut-lock #btnTutTile,#sMenu.played #btnTutTile{display:none;}
#sMenu.tut-lock .menu-tiles,#sMenu.played .menu-tiles{grid-template-columns:repeat(5,minmax(0,1fr));}
/* the menu reveal after the tutorial: a light burst behind the landing logo */
.mn-burst{position:absolute;left:50%;top:50%;width:min(110%,900px);aspect-ratio:2.2;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(closest-side,rgba(255,246,207,.95),rgba(248,182,43,.55) 38%,rgba(155,48,255,.25) 65%,rgba(155,48,255,0));mix-blend-mode:screen;}
#sMenu.tut-lock button:disabled,#sMenu.tut-lock input:disabled{filter:grayscale(1) brightness(.55);opacity:.5;cursor:not-allowed;pointer-events:none;}
#sMenu.tut-lock .mn-card{filter:grayscale(1);opacity:.45;pointer-events:none;}
/* a guest who earned the tutorial coins: the account chip asks them to collect */
.acc-chip.claim{border-color:#fde047;color:#fde047;animation:tutPulse 1.6s ease-in-out infinite;}
@keyframes goFade{from{opacity:0}}
/* ── the result screen: the winner big on the left, the match head to head on the right ── */
#sOver{--wc:#f5a623;background:radial-gradient(ellipse at 28% 55%,color-mix(in srgb,var(--wc) 22%,#12002a),#07000f 70%);
  overflow-y:auto;overflow-x:hidden;justify-content:flex-start;padding:clamp(10px,calc(var(--ch)*3),28px) clamp(10px,calc(var(--cw)*2.4),30px);}
#sOver.lost{background:radial-gradient(ellipse at 28% 55%,#2a0710,#07000f 70%);}
.go-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.go-rays{position:absolute;left:28%;top:52%;width:180vmax;height:180vmax;transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--wc) 20%,transparent) 0 6deg,transparent 6deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 42%);mask-image:radial-gradient(circle,#000 0,transparent 42%);
  animation:goSpin 40s linear infinite;}
#sOver.lost .go-rays{opacity:.15;}
.go-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--wc) 18%,transparent),transparent 55%);}
#sOver.lost .go-glow{background:radial-gradient(ellipse at 50% 0%,rgba(239,68,68,.16),transparent 55%);}
@keyframes goSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
body.nofx .go-rays,body.lowgfx .go-rays,body.nofx .go-hero-rays,body.lowgfx .go-hero-rays{animation:none;}
.go-inner{position:relative;margin:auto;width:min(100%,calc(var(--cw)*94));display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(6px,calc(var(--ch)*1.6),16px);}
.go-head{text-align:center;display:flex;flex-direction:column;align-items:center;}
.go-title{font-family:var(--ff-hd);font-size:clamp(40px,calc(var(--cw)*7.4),110px);line-height:.9;letter-spacing:clamp(4px,calc(var(--cw)*1.3),18px);
  color:transparent;background:linear-gradient(180deg,#fffdf0 8%,#f8d774 38%,#e08a13 58%,#8a4a06 78%,#f7d774);-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:clamp(1.5px,calc(var(--cw)*.28),4px) #1b0730;paint-order:stroke fill;padding:0 .1em;
  filter:drop-shadow(0 0 22px rgba(245,166,35,.7)) drop-shadow(0 5px 0 #07050d);transform:skewX(-6deg);
  animation:goSlam .7s cubic-bezier(.2,1.4,.4,1) both;}
#sOver.lost .go-title{background:linear-gradient(180deg,#fff1f2 8%,#fca5a5 36%,#ef4444 60%,#7f1d1d 85%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(239,68,68,.6)) drop-shadow(0 5px 0 #07050d);animation:goSlam .7s cubic-bezier(.2,1.4,.4,1) both,goShake .5s .6s both;}
@keyframes goSlam{from{transform:skewX(-6deg) scale(3);opacity:0;filter:blur(8px)}to{transform:skewX(-6deg) scale(1);opacity:1}}
@keyframes goShake{20%{transform:skewX(-6deg) translateX(-6px)}40%{transform:skewX(-6deg) translateX(5px)}60%{transform:skewX(-6deg) translateX(-3px)}80%{transform:skewX(-6deg) translateX(2px)}}
.go-name{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.6),38px);color:#fff;letter-spacing:2px;margin-top:clamp(2px,calc(var(--ch)*.8),8px);
  text-shadow:0 0 16px color-mix(in srgb,var(--wc) 70%,transparent);animation:goUp .5s .3s both;}
/* the score: round pips on both sides of the big number */
.go-score{display:flex;align-items:center;gap:clamp(8px,calc(var(--cw)*1.2),16px);margin-top:clamp(4px,calc(var(--ch)*1),10px);animation:goUp .5s .42s both;}
.gs-who{font-family:var(--ff-px);font-size:clamp(9px,calc(var(--cw)*1.05),14px);letter-spacing:2px;max-width:calc(var(--cw)*16);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-who.p1{color:var(--p1c);} .gs-who.p2{color:var(--p2c);}
.gs-pips{display:flex;gap:6px;}
.gs-pips i{width:clamp(9px,calc(var(--cw)*1),14px);aspect-ratio:1;transform:rotate(45deg);border:2px solid rgba(216,180,254,.45);}
.gs-pips i.on{background:var(--gold);border-color:#fde68a;box-shadow:0 0 10px var(--gold);animation:pipOn .4s both;}
@keyframes pipOn{from{transform:rotate(45deg) scale(2.2);opacity:0}to{transform:rotate(45deg) scale(1);opacity:1}}
.gs-num{font-family:var(--ff-hd);font-size:clamp(24px,calc(var(--cw)*3.4),48px);color:#fff;letter-spacing:4px;line-height:1;}
@keyframes goUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.go-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:clamp(10px,calc(var(--cw)*2),28px);align-items:stretch;}
/* the winner, big and alive */
.go-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:calc(var(--ch)*50);
  border:2px solid color-mix(in srgb,var(--wc) 70%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--wc) 16%,rgba(8,2,20,.9)),rgba(6,1,14,.95));
  clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,0 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.7);overflow:hidden;animation:goHeroIn .7s .2s cubic-bezier(.16,1,.3,1) both;}
@keyframes goHeroIn{from{opacity:0;transform:translateX(-60px) scale(.94)}to{opacity:1;transform:none}}
.go-hero-rays{position:absolute;left:50%;top:45%;width:300%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.5;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--wc) 34%,transparent) 0 8deg,transparent 8deg 22deg);animation:goSpin 26s linear infinite reverse;}
.go-hero-cv{position:absolute;inset:0 0 auto 0;width:100%;height:100%;display:block;}
.go-hero-plate{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;padding:clamp(4px,calc(var(--ch)*1),10px) 8px clamp(6px,calc(var(--ch)*1.4),12px);
  background:linear-gradient(90deg,transparent,rgba(4,0,12,.88) 18%,rgba(4,0,12,.88) 82%,transparent);}
.go-crown{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*.9),12px);letter-spacing:2px;color:#07050d;background:var(--wc);padding:.35em .8em .3em;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
#goHeroName{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.4),34px);color:#fff;letter-spacing:2px;line-height:1.05;text-align:center;}
#goHeroName,#goHeroSub{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#goHeroSub{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--cw)*.8),11px);color:#fde68a;letter-spacing:1px;text-align:center;}
/* head to head */
.go-tape{display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,calc(var(--ch)*.9),9px);padding:clamp(8px,calc(var(--ch)*1.6),16px) clamp(8px,calc(var(--cw)*1.4),18px);
  background:rgba(10,2,24,.82);border:1px solid rgba(155,48,255,.4);box-shadow:0 10px 30px rgba(0,0,0,.45);animation:goTapeIn .7s .32s cubic-bezier(.16,1,.3,1) both;}
@keyframes goTapeIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.go-tape-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding-bottom:clamp(4px,calc(var(--ch)*1),8px);border-bottom:1px solid rgba(155,48,255,.3);}
.go-side{display:flex;align-items:center;gap:8px;min-width:0;}
.go-side.p2{justify-content:flex-end;}
.go-side canvas{width:clamp(30px,calc(var(--ch)*8),52px);height:auto;aspect-ratio:1;background:radial-gradient(circle at 50% 35%,#3b1d6e,#0b0418 75%);border:2px solid var(--p1c);flex:none;}
.go-side.p2 canvas{border-color:var(--p2c);}
.go-side span{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.8),26px);letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.go-side.p1 span{color:var(--p1c);} .go-side.p2 span{color:var(--p2c);}
.go-side.won canvas{box-shadow:0 0 16px var(--gold);border-color:var(--gold);}
.go-tape-vs{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--cw)*.8),11px);letter-spacing:2px;color:#a78bfa;}
.go-stats{display:flex;flex-direction:column;gap:clamp(3px,calc(var(--ch)*.8),8px);}
.go-row{display:grid;grid-template-columns:1fr clamp(76px,calc(var(--cw)*11),150px) 1fr;align-items:center;gap:8px;animation:goUp .45s both;}
.go-v{display:flex;align-items:center;gap:8px;min-width:0;}
.go-v.l{flex-direction:row-reverse;}
.go-v b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(16px,calc(var(--cw)*2.1),30px);color:#e9d5ff;min-width:2.4ch;text-align:center;line-height:1;}
.go-v i{flex:1;height:clamp(6px,calc(var(--ch)*1.3),11px);background:rgba(155,48,255,.14);position:relative;overflow:hidden;}
.go-v i::after{content:'';position:absolute;top:0;bottom:0;width:var(--w,0%);transition:width .9s cubic-bezier(.16,1,.3,1);}
.go-v.l i::after{right:0;background:linear-gradient(270deg,var(--p1c),color-mix(in srgb,var(--p1c) 35%,transparent));}
.go-v.r i::after{left:0;background:linear-gradient(90deg,var(--p2c),color-mix(in srgb,var(--p2c) 35%,transparent));}
.go-v.best b{color:var(--gold2);text-shadow:0 0 12px rgba(245,166,35,.8);}
.go-lbl{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--cw)*.78),11px);letter-spacing:1px;color:#c4b5fd;text-align:center;}
.go-unlock-box{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.5);
  padding:10px 22px;margin-bottom:12px;animation:unlockPop .5s .25s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes unlockPop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.go-unlock-lbl{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.08),13.5px);color:var(--gold2);letter-spacing:2px;}
.go-unlock-name{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.4),32px);color:#fff;letter-spacing:2px;margin-top:5px;}
.go-btns{display:grid;gap:clamp(6px,calc(var(--cw)*.9),12px);grid-template-columns:repeat(auto-fit,minmax(clamp(120px,calc(var(--cw)*15),200px),1fr));
  width:100%;justify-items:stretch;animation:goUp .5s .9s both;}
.go-btns .mbtn{width:100%;min-height:clamp(34px,calc(var(--ch)*6.8),58px);
  grid-template-columns:auto minmax(0,auto);justify-content:center;text-align:left;
  padding-left:clamp(8px,calc(var(--cw)*1.4),20px);padding-right:clamp(8px,calc(var(--cw)*1.4),20px);}
.go-btns .mbtn-main{font-size:clamp(12px,calc(var(--ch)*3.7),23px);letter-spacing:clamp(.5px,calc(var(--ch)*.3),2px);}
.go-btns .mbtn:first-child{background:linear-gradient(180deg,#fde047,#f59e0b);border-color:#fde68a;box-shadow:0 0 22px rgba(245,166,35,.5);}
.go-btns .mbtn:first-child .mbtn-main,.go-btns .mbtn:first-child .ico{color:#1c1003;}
@media (max-aspect-ratio:4/3){ .go-main{grid-template-columns:1fr;} .go-hero{min-height:calc(var(--ch)*32);} }
@media (max-height:430px){ .go-hero{min-height:calc(var(--ch)*43);} .go-inner{gap:4px;} #sOver{padding-top:6px;padding-bottom:6px;} }

/* ── pause overlay ──────────────────────────────────────────── */
.pause-inner{margin:auto;display:flex;flex-direction:column;align-items:center;width:100%;}
#sPause{z-index:60;overflow-y:auto;justify-content:flex-start;
  padding:clamp(10px,calc(var(--ch)*3),30px) 12px;background:rgba(4,0,12,.9);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.pause-title{font-family:var(--ff-hd);font-size:clamp(34px,calc(var(--cw)*5.4),76px);color:var(--v5);
  letter-spacing:clamp(6px,calc(var(--cw)*1.6),20px);margin-bottom:clamp(12px,calc(var(--ch)*2.6),28px);
  text-shadow:0 0 26px var(--v4);}
#sPause .mbtn{width:clamp(180px,calc(var(--cw)*26),330px);
  min-height:clamp(36px,calc(var(--ch)*7),60px);
  grid-template-columns:auto auto;justify-content:center;text-align:left;}

/* ── toast ──────────────────────────────────────────────────── */
#toast{position:absolute;left:50%;bottom:clamp(16px,calc(var(--ch)*4),44px);transform:translate(-50%,16px);
  background:rgba(10,0,24,.94);border:1px solid var(--v4);color:var(--fg);
  font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.08),13.5px);letter-spacing:1px;
  padding:11px 18px;z-index:9000;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;max-width:82%;text-align:center;line-height:1.6;}
#toast.on{opacity:1;transform:translate(-50%,0);}

/* ── touch controls ─────────────────────────────────────────── */
#touch{position:absolute;inset:var(--gy,0) var(--gx,0);z-index:30;display:none;pointer-events:none;}
#touch.on{display:block;}
.tpad{position:absolute;bottom:clamp(6px,calc(var(--ch)*2.4),22px);display:grid;
  gap:clamp(4px,calc(var(--ch)*1.2),8px);pointer-events:auto;}
.tpad.lft{left:clamp(8px,calc(var(--cw)*1.8),20px);grid-template-columns:repeat(3,1fr);}
.tpad.rgt{right:clamp(8px,calc(var(--cw)*1.8),20px);grid-template-columns:repeat(3,1fr);}
.tb{width:clamp(40px,calc(var(--ch)*12.5),66px);height:clamp(40px,calc(var(--ch)*12.5),66px);
  background:rgba(61,0,112,.42);border:2px solid rgba(155,48,255,.55);border-radius:50%;
  color:var(--fg);font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--cw)*1.7),20px);
  display:flex;align-items:center;justify-content:center;user-select:none;
  -webkit-user-select:none;touch-action:none;letter-spacing:0;}
.tb.wide{grid-column:span 1;}
.tb.hold{background:rgba(6,182,212,.25);border-color:rgba(6,182,212,.6);}
.tb.ult{background:rgba(245,166,35,.25);border-color:rgba(245,166,35,.65);color:var(--gold2);}
.tb.down{background:var(--v3);border-color:var(--v5);transform:scale(.92);}
.tb.blank{opacity:0;pointer-events:none;}
.tb.sp{background:rgba(236,72,153,.25);border-color:rgba(236,72,153,.6);color:#fbcfe8;}

/* ── move lists ─────────────────────────────────────────────── */
.prev-moves{width:100%;margin-top:clamp(3px,calc(var(--ch)*.8),8px);display:flex;flex-direction:column;
  gap:clamp(3px,calc(var(--ch)*.6),6px);border-top:1px solid rgba(155,48,255,.22);
  padding-top:clamp(3px,calc(var(--ch)*.7),7px);flex:1 1 auto;min-height:0;overflow-y:auto;}
.mv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.mv-txt{min-width:0;}
.mv-name{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.7),20px);color:#fff;letter-spacing:.8px;
  line-height:1.05;overflow-wrap:anywhere;}
.mv-kind{font-family:var(--ff-ui);font-weight:600;font-size:clamp(13px,calc(var(--ch)*2.56),18.9px);color:#c4b5fd;line-height:1.15;}
.mv-keys{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0;}
.mk{display:inline-flex;align-items:center;justify-content:center;min-width:1.85em;height:1.85em;padding:0 .4em;
  font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--ch)*2.5),19px);line-height:1;letter-spacing:0;color:#fff;
  background:linear-gradient(180deg,#43207a,#210c42);border:1px solid rgba(216,180,254,.75);border-bottom-width:3px;
  border-radius:5px;box-shadow:0 2px 0 #07050d;}
.mk.arrow{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",system-ui,sans-serif;font-weight:700;color:var(--gold2);}
/* the same move, on the device in the player's hands: touch buttons are round like the
   on-screen pad, controller buttons use the pad's own colours (A green, B red, X blue, Y yellow) */
.mk.tch{border-radius:50%;min-width:1.95em;height:1.95em;padding:0;background:rgba(155,48,255,.28);border:2px solid rgba(216,180,254,.7);box-shadow:none;}
.mk.tch .ico{width:1.05em;height:1.05em;}
.mk.gp{box-shadow:0 2px 0 #07050d;}
.mk.gp-face{border-radius:50%;min-width:1.9em;height:1.9em;padding:0;border:2px solid rgba(0,0,0,.55);font-family:var(--ff-hd);text-shadow:0 1px 0 rgba(0,0,0,.45);}
.mk.gp-a{background:radial-gradient(circle at 35% 30%,#4ade80,#15803d);}
.mk.gp-b{background:radial-gradient(circle at 35% 30%,#f87171,#b91c1c);}
.mk.gp-x{background:radial-gradient(circle at 35% 30%,#60a5fa,#1d4ed8);}
.mk.gp-y{background:radial-gradient(circle at 35% 30%,#fde047,#ca8a04);color:#1c1003;text-shadow:none;}
.mk.gp-sh{border-radius:.9em;background:linear-gradient(180deg,#3f3f46,#18181b);border-color:rgba(228,228,231,.55);font-size:clamp(11px,calc(var(--ch)*2.1),16px);}
.mk.gp-dir{background:linear-gradient(180deg,#3f3f46,#18181b);border-color:rgba(228,228,231,.5);color:#e4e4e7;border-radius:4px;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",system-ui,sans-serif;font-weight:700;}
.tut-txt kbd.gp-face{border-radius:50%;min-width:1.7em;border-color:rgba(0,0,0,.5);color:#fff;}
.tut-txt kbd.gp-a{background:#16a34a;} .tut-txt kbd.gp-b{background:#dc2626;} .tut-txt kbd.gp-x{background:#2563eb;} .tut-txt kbd.gp-y{background:#ca8a04;}
.tut-txt kbd.gp-sh,.tut-txt kbd.gp-dir{background:#27272a;border-color:#a1a1aa;color:#fff;border-radius:6px;}
.tut-txt kbd.tch{border-radius:50%;min-width:1.8em;background:rgba(155,48,255,.3);border-color:#d8b4fe;color:#fff;}
.tut-txt kbd .ico{width:1.1em;height:1.1em;}
.mv-then{font-family:var(--ff-ui);font-weight:700;font-size:clamp(14px,calc(var(--ch)*2.8),22px);color:var(--gold2);margin:0 1px;}
.mv-or{font-family:var(--ff-ui);font-weight:700;font-size:clamp(13px,calc(var(--ch)*2.29),17.55px);color:rgba(233,213,255,.6);margin:0 5px;}
.mv-head{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*2.03),15px);color:var(--gold2);letter-spacing:2px;
  margin:clamp(8px,calc(var(--ch)*1.8),16px) 0 clamp(3px,calc(var(--ch)*.6),6px);}
.mv-head:first-child{margin-top:0;}
/* character-select preview is narrow: keys go under the name */
.prev-moves .mv-row{flex-direction:column;align-items:flex-start;gap:2px;}
.prev-moves .mv-keys{justify-content:flex-start;gap:2px;}
.prev-moves .mv-name{font-size:clamp(13px,calc(var(--ch)*2.7),20.25px);}
.prev-moves .mk{font-size:clamp(13px,calc(var(--ch)*2.36),17.55px);border-bottom-width:2px;}
.prev-moves .mv-then{font-size:clamp(13px,calc(var(--ch)*2.7),20.25px);}
.prev-moves .mv-or{font-size:clamp(13px,calc(var(--ch)*1.89),16px);margin:0 3px;}
.pause-moves{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(10px,calc(var(--cw)*1.6),22px);width:100%;max-width:calc(var(--cw)*92);
  margin-top:clamp(12px,calc(var(--ch)*3),30px);}
.pm-col{background:rgba(18,6,36,.92);border:1px solid rgba(155,48,255,.45);
  padding:clamp(10px,calc(var(--ch)*2),18px) clamp(12px,calc(var(--cw)*1.6),22px);text-align:left;min-width:0;}
.pm-head{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--ch)*3.8),30px);letter-spacing:2px;margin-bottom:8px;}
.pause-moves .mv-row{padding:clamp(4px,calc(var(--ch)*.9),8px) 0;border-bottom:1px solid rgba(155,48,255,.18);}
.pause-moves .mv-row:last-child{border-bottom:0;}

/* ── rarity tiers ───────────────────────────────────────────── */
.tier-badge{display:inline-block;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.31),11px);letter-spacing:1px;
  padding:.35em .6em .3em;line-height:1;color:#07050d;background:var(--tc,#9ca3af);vertical-align:middle;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);white-space:nowrap;font-style:normal;text-shadow:none;}
.tier-common{--tc:#9ca3af;} .tier-rare{--tc:#3b82f6;color:#fff;} .tier-epic{--tc:#a855f7;color:#fff;}
.tier-mythic{--tc:#ef4444;color:#fff;} .tier-legendary{--tc:#f59e0b;}
.tier-special{--tc:#ff4fd8;color:#fff;background:linear-gradient(90deg,#ff4fd8,#7c3aed,#22d3ee,#ff4fd8);background-size:300% 100%;
  animation:tierFlow 2.4s linear infinite;}
.tier-badge.tier-legendary{background:linear-gradient(90deg,#f59e0b,#fff3a0,#f59e0b);background-size:300% 100%;animation:tierFlow 2.8s linear infinite;}
@keyframes tierFlow{to{background-position:-300% 0}}
.og-tag{display:inline-block;margin-left:5px;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.16),10px);
  letter-spacing:1px;padding:.35em .55em .3em;line-height:1;color:#3d2600;vertical-align:middle;white-space:nowrap;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  background:linear-gradient(100deg,#8a5a12 0%,#f7d774 28%,#fffbe8 42%,#f7d774 56%,#8a5a12 100%);
  background-size:280% 100%;animation:ogShine 2.6s linear infinite;
  box-shadow:0 0 10px rgba(247,215,116,.55);text-shadow:0 1px 0 rgba(255,255,255,.35);}
@keyframes ogShine{to{background-position:-280% 0;}}
body.nofx .og-tag{animation:none;background:linear-gradient(180deg,#f7d774,#b5820f);}
.cc-og{position:absolute;top:3px;left:3px;z-index:3;margin:0;}
.tier-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:5px;}
.cc{border-color:color-mix(in srgb,var(--tc,#9b30ff) 55%,transparent);}
.cc-tier{position:absolute;left:0;right:0;bottom:0;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--cw)*0.53),9px);
  letter-spacing:.5px;text-align:center;padding:2px 0 1px;color:#07050d;background:var(--tc);line-height:1;}
.cc.unlocked{padding-bottom:9px;}
.cc.tier-rare .cc-tier,.cc.tier-epic .cc-tier,.cc.tier-mythic .cc-tier{color:#fff;}
.cc.tier-epic.unlocked{box-shadow:inset 0 0 12px rgba(168,85,247,.25);}
.cc.tier-mythic.unlocked{box-shadow:inset 0 0 14px rgba(239,68,68,.3);}
.cc.tier-legendary.unlocked{box-shadow:inset 0 0 16px rgba(245,158,11,.4),0 0 10px rgba(245,158,11,.25);}
.cc.tier-legendary .cc-tier{background:linear-gradient(90deg,#f59e0b,#fff3a0,#f59e0b);background-size:300% 100%;animation:tierFlow 2.8s linear infinite;}
.cc.tier-special.unlocked{box-shadow:inset 0 0 18px rgba(255,79,216,.4),0 0 12px rgba(34,211,238,.3);animation:specialCard 3s linear infinite;}
.cc.tier-special .cc-tier{color:#fff;background:linear-gradient(90deg,#ff4fd8,#7c3aed,#22d3ee,#ff4fd8);background-size:300% 100%;animation:tierFlow 2.4s linear infinite;}
@keyframes specialCard{0%,100%{border-color:#ff4fd8}33%{border-color:#7c3aed}66%{border-color:#22d3ee}}
.cc.locked .cc-tier{opacity:.55;}
.cs-prev .tier-badge{margin-top:4px;}
.hud-id .tier-badge{margin-bottom:3px;font-size:clamp(6px,calc(var(--ch)*1.19),9px);}
.pm-head .tier-badge{margin-left:6px;}
.go-unlock-box .tier-badge{margin:6px 0 2px;}
.rung{border-color:color-mix(in srgb,var(--tc,#9b30ff) 55%,transparent);}
@media (max-width:640px){ .cs-prev .tier-badge{display:none;} }

/* ── Glasbeni avtomat ──────────────────────────────────────────── */
#sGacha{background:linear-gradient(160deg,rgba(26,0,53,.98),rgba(8,0,18,.99));justify-content:flex-start;overflow-y:auto;
  padding:clamp(10px,calc(var(--ch)*2.4),26px) calc(var(--cw)*3) clamp(10px,calc(var(--ch)*2.4),26px);}
.coin-pill{justify-self:end;font-family:var(--ff-hd);font-size:clamp(16px,calc(var(--ch)*4),30px);color:#fde68a;letter-spacing:1px;
  background:rgba(245,158,11,.14);border:2px solid #f59e0b;padding:.1em .6em;white-space:nowrap;box-shadow:0 0 14px rgba(245,158,11,.3);}
.gacha-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(10px,calc(var(--cw)*2),26px);
  width:100%;max-width:1150px;align-items:start;min-height:0;}
#gachaCv{width:100%;aspect-ratio:640/420;display:block;cursor:pointer;border:1px solid rgba(155,48,255,.35);
  box-shadow:0 0 40px rgba(124,58,237,.35);}
.gacha-side{display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.4),12px);min-width:0;}
.gacha-spin{width:100%;min-height:clamp(44px,calc(var(--ch)*10),80px);justify-content:center;
  background:linear-gradient(180deg,rgba(245,158,11,.35),rgba(180,83,9,.35));border-color:#f59e0b;
  animation:spinGlow 1.6s ease-in-out infinite;}
.gacha-spin .mbtn-main{font-size:clamp(18px,calc(var(--ch)*5),36px);color:#fff3a0;}
@keyframes spinGlow{50%{box-shadow:0 0 26px rgba(245,158,11,.6)}}
.gacha-spin.poor{animation:none;filter:grayscale(.7);opacity:.7;}
.gacha-spin.nope{animation:nope .35s;}
@keyframes nope{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.gacha-pity{position:relative;height:22px;background:rgba(0,0,0,.55);border:1px solid rgba(239,68,68,.55);overflow:hidden;}
.gacha-pity-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#7c2d12,#ef4444,#fca5a5);
  transition:width .5s cubic-bezier(.34,1.3,.64,1);}
.gacha-pity.full{border-color:#fde68a;box-shadow:0 0 16px rgba(239,68,68,.7);}
.gacha-pity.full .gacha-pity-fill{background:linear-gradient(90deg,#ef4444,#fde68a,#ef4444);background-size:200% 100%;animation:tierFlow 1.2s linear infinite;}
.gacha-pity-txt{position:relative;display:flex;height:100%;align-items:center;justify-content:center;
  font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*1.8),13.5px);color:#fff;letter-spacing:1px;text-shadow:1px 1px 0 #000;}
.tier-badge.tier-secret{background:linear-gradient(90deg,#1e1b2e,#64748b,#1e1b2e);color:#e2e8f0;}
.cc.tier-secret.unlocked{box-shadow:inset 0 0 16px rgba(139,92,246,.45);}
.cc.tier-secret .cc-tier{background:#334155;color:#e2e8f0;}
.cs-soon-head{grid-column:1/-1;font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.7),22px);letter-spacing:3px;
  color:#94a3b8;border-top:1px dashed rgba(148,163,184,.35);padding-top:8px;margin-top:6px;text-align:center;}
.cs-soon-head small{display:block;font-family:var(--ff-px);font-size:clamp(9px,calc(var(--cw)*0.69),12px);letter-spacing:1px;opacity:.7;margin-top:3px;}
.cc.soon{cursor:default;background:repeating-linear-gradient(135deg,rgba(30,27,46,.85) 0 6px,rgba(22,19,34,.85) 6px 12px);
  border:1px solid rgba(148,163,184,.3);filter:saturate(.3);}
.cc.soon canvas{opacity:.85;}
.cc.soon .cc-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--ff-px);font-size:clamp(6px,calc(var(--cw)*0.62),9px);color:#cbd5e1;text-align:center;letter-spacing:1px;
  background:linear-gradient(180deg,transparent 30%,rgba(10,8,18,.75));pointer-events:none;}
.cc.soon .cc-soon b{font-size:clamp(14px,calc(var(--cw)*1.8),22px);filter:drop-shadow(0 0 6px rgba(0,0,0,.8));}
.cc.soon .cc-name{display:block !important;color:#94a3b8;}
.gacha-info{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*1.95),13.5px);color:#fde68a;line-height:1.6;text-align:center;}
.gacha-odds-h{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--ch)*1.8),13.5px);color:var(--v5);letter-spacing:2px;}
.gacha-odds{display:flex;flex-direction:column;gap:4px;background:rgba(18,6,36,.9);border:1px solid rgba(155,48,255,.4);padding:8px 10px;}
.godd{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;}
.godd .tier-badge{justify-self:start;font-size:clamp(13px,calc(var(--ch)*1.62),16px);}
.godd-p{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*3),22px);color:#fff;min-width:3.5em;text-align:right;}
.godd-o{font-family:var(--ff-ui);font-weight:700;font-size:clamp(13px,calc(var(--ch)*2.7),20.25px);color:#c4b5fd;min-width:3.5em;text-align:right;}
.gacha-tip{font-family:var(--ff-ui);font-weight:600;font-size:clamp(13px,calc(var(--ch)*2.7),18.9px);color:#d8d0f0;line-height:1.35;
  background:rgba(245,158,11,.08);border-left:3px solid #f59e0b;padding:7px 10px;}
.gacha-mbtn{border-color:rgba(245,158,11,.6);}
.gacha-mbtn .mbtn-main{color:#fde68a;}
.go-coin-rows{display:grid;grid-template-columns:auto auto;gap:2px 18px;margin-top:8px;font-family:var(--ff-ui);font-weight:600;
  font-size:clamp(13px,calc(var(--ch)*2.7),18.9px);color:#e9d5ff;text-align:left;}
.go-coin-rows span:nth-child(2n){text-align:right;color:#fde68a;}
#sMenu .mbtn{min-height:clamp(28px,calc(var(--ch)*6.2),58px);padding-top:clamp(2px,calc(var(--ch)*.7),9px);padding-bottom:clamp(2px,calc(var(--ch)*.7),9px);}
#sMenu .menu-btns{gap:clamp(2px,calc(var(--ch)*.8),8px);}
#sMenu .logo-wrap{margin-bottom:clamp(6px,calc(var(--ch)*2.4),28px);}
#sMenu{padding-bottom:calc(var(--ch)*9);}
@media (max-width:640px){ .gacha-body{grid-template-columns:1fr;} }

/* ── account + leaderboards ─────────────────────────────────── */
#sAccount,#sLeader,#sProfile{background:linear-gradient(160deg,rgba(26,0,53,.98),rgba(8,0,18,.99));overflow-y:auto;justify-content:flex-start;
  padding:clamp(10px,calc(var(--ch)*3),32px) calc(var(--cw)*3) clamp(14px,calc(var(--ch)*4),40px);}
.acc-chip.on{color:#fde68a;border-color:rgba(245,158,11,.7);}
.acc-wrap.wide{width:min(1060px,100%);}
.acc-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,calc(var(--cw)*1.6),22px);
  background:linear-gradient(100deg,rgba(106,13,173,.5),rgba(20,6,40,.7) 60%);}
#accAvatar{width:clamp(58px,calc(var(--cw)*6.5),86px);height:clamp(58px,calc(var(--cw)*6.5),86px);display:flex;align-items:center;
  justify-content:center;font-family:var(--ff-hd);font-size:clamp(34px,calc(var(--cw)*4.4),56px);color:#1a0035;
  background:linear-gradient(135deg,#fde68a,#f59e0b);border:3px solid #fff;box-shadow:0 0 22px rgba(245,158,11,.55);}
.acc-rank{text-align:right;font-family:var(--ff-hd);font-size:clamp(16px,calc(var(--cw)*1.8),24px);color:#fde68a;letter-spacing:1px;line-height:1.1;}
.acc-rank small{display:block;font-family:var(--ff-ui);font-weight:600;font-size:13px;color:var(--v5);letter-spacing:0;}
.acc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px;align-items:start;}
.acc-fav{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.3);border:1px solid rgba(155,48,255,.22);padding:8px 10px;min-height:60px;}
.acc-fav canvas{width:44px;height:61px;flex-shrink:0;}
.acc-fav b{display:block;font-family:var(--ff-hd);font-weight:normal;font-size:clamp(18px,calc(var(--cw)*1.9),24px);color:#fff;letter-spacing:1px;}
.acc-fav span{font-size:14px;color:var(--v5);font-weight:600;}
.acc-match canvas{width:36px;height:50px;}
.acc-match .vs{display:flex;align-items:center;gap:4px;}
.acc-match .vs em{font-style:normal;font-family:var(--ff-hd);color:var(--v5);font-size:14px;}
.acc-wrap,.lb-wrap{width:min(620px,100%);display:flex;flex-direction:column;gap:12px;}
.acc-card{background:rgba(20,6,40,.66);border:1px solid rgba(155,48,255,.36);padding:clamp(12px,calc(var(--ch)*2.4),22px);}
.acc-h{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.8),22px);color:var(--gold2);letter-spacing:2px;margin-bottom:8px;}
.acc-p,.acc-small{font-size:clamp(13px,calc(var(--cw)*1.42),17.55px);color:#d8d0f0;line-height:1.5;}
.acc-small{opacity:.7;margin-top:2px;}
.acc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px;}
.acc-tab,.lb-tab{font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--cw)*1.45),18px);letter-spacing:2px;color:var(--v5);
  background:rgba(61,0,112,.3);border:1px solid rgba(155,48,255,.4);padding:8px 6px;cursor:pointer;}
.acc-tab.on,.lb-tab.on{color:#fff;background:linear-gradient(90deg,rgba(155,48,255,.55),rgba(245,166,35,.35));border-color:var(--gold);}
.acc-form{display:flex;flex-direction:column;gap:10px;}
.acc-form label{display:flex;flex-direction:column;gap:5px;font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.05),13.5px);
  color:var(--v5);letter-spacing:1px;}
.acc-form input{font-family:inherit;font-size:16px;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(155,48,255,.5);
  padding:10px 12px;outline:none;letter-spacing:0;font-family:system-ui,sans-serif;}
.acc-form input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,166,35,.25);}
.acc-form input:disabled,.acc-form button:disabled{opacity:.55;}
.acc-go{width:100%;justify-content:center;margin-top:4px;}
.acc-hint{font-size:13px;color:var(--v5);opacity:.8;margin-top:-5px;}
.acc-hint.good{color:#86efac;opacity:1;} .acc-hint.bad{color:#fca5a5;opacity:1;}
.acc-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;}
.acc-links a,.acc-linkbtn{color:#c4b5fd;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;}
.acc-msg{min-height:1.2em;font-size:clamp(13px,calc(var(--cw)*1.42),17.55px);line-height:1.45;color:#d8d0f0;text-align:center;}
.acc-msg.err{color:#fca5a5;} .acc-msg.ok{color:#86efac;}
.acc-top{display:flex;align-items:center;gap:14px;}
.acc-avatar{font-size:40px;width:62px;height:62px;display:flex;align-items:center;justify-content:center;
  background:rgba(155,48,255,.25);border:2px solid var(--gold);}
.acc-name{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--cw)*2.8),34px);color:#fff;letter-spacing:2px;line-height:1;}
.acc-mail,.acc-since{font-size:14px;color:var(--v5);margin-top:3px;}
.acc-cloud{font-size:14px;color:#86efac;margin:12px 0 8px;}
.acc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:6px;}
.acc-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:rgba(0,0,0,.3);border:1px solid rgba(155,48,255,.22);padding:7px 9px;
  font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*0.99),13px);color:var(--v5);align-items:center;}
.acc-stat b{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--cw)*1.5),18px);color:#fff;font-weight:normal;letter-spacing:1px;}
.acc-sub{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.05),13.5px);color:var(--gold2);letter-spacing:2px;margin:14px 0 6px;}
.acc-recent{display:flex;flex-direction:column;gap:4px;}
.acc-match{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:6px 9px;font-size:14px;color:#d8d0f0;
  background:rgba(0,0,0,.28);border-left:3px solid #64748b;}
.acc-match.w{border-left-color:#22c55e;} .acc-match.l{border-left-color:#ef4444;}
.acc-match b{font-family:var(--ff-hd);font-weight:normal;letter-spacing:1px;}
.acc-match.w b{color:#86efac;} .acc-match.l b{color:#fca5a5;}
.acc-match i{font-style:normal;opacity:.7;white-space:nowrap;}
.acc-empty{font-size:14px;color:var(--v5);opacity:.75;}
.acc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.acc-btns .mbtn{justify-content:center;}
.lb-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.lb-tab{font-size:clamp(11px,calc(var(--cw)*1.5),20px);padding:clamp(8px,calc(var(--ch)*2),14px) 2px;letter-spacing:1px;}
.lb-me{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1.2),15px);color:#fde68a;text-align:center;min-height:1em;
  letter-spacing:1px;margin:2px 0 4px;}
.lb-list{display:flex;flex-direction:column;gap:clamp(5px,calc(var(--ch)*1.3),10px);}
.lb-row{display:grid;grid-template-columns:clamp(46px,calc(var(--cw)*6),74px) minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:clamp(10px,calc(var(--cw)*1.5),18px);align-items:center;
  background:linear-gradient(100deg,rgba(40,10,80,.55),rgba(16,4,36,.85) 55%);
  border:1px solid rgba(155,48,255,.34);border-left:4px solid rgba(155,48,255,.6);
  padding:clamp(8px,calc(var(--ch)*2),15px) clamp(10px,calc(var(--cw)*1.6),20px);}
.lb-pos{grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--ff-hd);color:var(--v5);}
.lb-pos b{font-size:clamp(17px,calc(var(--cw)*2.2),30px);font-weight:normal;line-height:1;}
.lb-pos .ico{width:clamp(16px,calc(var(--ch)*3.6),26px);height:clamp(16px,calc(var(--ch)*3.6),26px);}
.lb-user{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*2),27px);color:#fff;letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:baseline;gap:8px;}
.lb-sub{grid-column:2;font-size:clamp(11px,calc(var(--cw)*1.2),15px);color:var(--v5);opacity:.9;margin-top:3px;}
.lb-val{grid-row:1/3;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;
  border-left:1px solid rgba(155,48,255,.3);padding-left:clamp(10px,calc(var(--cw)*1.5),18px);}
.lb-val b{font-family:var(--ff-hd);font-size:clamp(19px,calc(var(--cw)*2.5),34px);color:#fde68a;font-weight:normal;line-height:1;}
.lb-val i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.25),10px);color:var(--v5);
  letter-spacing:1px;margin-top:4px;}
.lb-row.top1{border-left-color:#f59e0b;background:linear-gradient(100deg,rgba(245,158,11,.3),rgba(20,6,40,.7) 58%);}
.lb-row.top2{border-left-color:#cbd5e1;background:linear-gradient(100deg,rgba(203,213,225,.22),rgba(20,6,40,.7) 58%);}
.lb-row.top3{border-left-color:#b45309;background:linear-gradient(100deg,rgba(180,83,9,.24),rgba(20,6,40,.7) 58%);}
.lb-row.me{border-color:#22d3ee;box-shadow:0 0 16px rgba(34,211,238,.3);}
.lb-you{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);letter-spacing:1px;color:#0b3b45;
  background:#22d3ee;padding:2px 6px;}
.lb-pos.m1{color:#fbbf24;} .lb-pos.m2{color:#e2e8f0;} .lb-pos.m3{color:#d97706;}
.lb-load{text-align:center;color:var(--v5);font-size:clamp(12px,calc(var(--cw)*1.3),16px);padding:24px;}
.lb-title{color:#fde68a;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),11px);letter-spacing:1px;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.q-ico .ico{width:1em;height:1em;}
.lb-load{text-align:center;color:var(--v5);font-size:13px;padding:18px;}
.lb-title{color:#fde68a;font-family:var(--ff-px);font-size:9px;letter-spacing:1px;margin-left:8px;vertical-align:middle;opacity:.9;}
/* ── profile: challenges · shop · mastery · card ── */
.pf-wrap{width:min(980px,100%);display:flex;flex-direction:column;gap:12px;}
.pf-coins{justify-self:end;font-family:var(--ff-hd);font-size:clamp(16px,calc(var(--cw)*2),26px);color:#fde68a;letter-spacing:1px;white-space:nowrap;}
.pf-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
.pf-tab{font-size:clamp(13px,calc(var(--cw)*1.62),21px);padding:8px 2px;letter-spacing:1px;position:relative;}
.pf-tab.dot::after{content:'';position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef4444;}
.pf-note{font-size:14px;color:var(--v5);opacity:.85;text-align:center;}
.pf-note b{color:#fde68a;font-weight:600;}
.pf-empty{text-align:center;padding:28px 12px;display:flex;flex-direction:column;gap:14px;align-items:center;color:var(--v5);font-size:15px;}
.pf-empty .mbtn{width:min(360px,100%);justify-content:center;}
.q-list{display:flex;flex-direction:column;gap:8px;}
.q-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:rgba(20,6,40,.66);
  border:1px solid rgba(155,48,255,.36);padding:12px 14px;}
.q-card.done{border-color:rgba(34,197,94,.7);background:linear-gradient(100deg,rgba(34,197,94,.16),rgba(20,6,40,.66) 55%);}
.q-card.claimed{opacity:.55;}
.q-ico{font-size:30px;line-height:1;width:40px;text-align:center;}
.q-txt{font-family:var(--ff-hd);font-size:clamp(16px,calc(var(--cw)*1.9),23px);letter-spacing:1px;color:#fff;line-height:1.05;}
.q-bar{height:9px;background:rgba(0,0,0,.45);border:1px solid rgba(155,48,255,.35);margin-top:7px;position:relative;}
.q-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#a855f7,#f0abfc);}
.q-card.done .q-bar i{background:linear-gradient(90deg,#16a34a,#86efac);}
.q-prog{font-family:var(--ff-px);font-size:10px;color:var(--v5);margin-top:5px;}
.q-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.q-rew{font-family:var(--ff-hd);font-size:20px;color:#fde68a;white-space:nowrap;}
.q-btn{font-family:var(--ff-px);font-size:10px;padding:8px 10px;border:1px solid rgba(34,197,94,.8);background:rgba(22,163,74,.35);color:#fff;cursor:pointer;white-space:nowrap;}
.q-btn:disabled{border-color:rgba(155,48,255,.35);background:rgba(0,0,0,.25);color:var(--v5);cursor:default;}
.q-btn.go{animation:qPulse 1s ease-in-out infinite;}
@keyframes qPulse{50%{box-shadow:0 0 16px rgba(34,197,94,.8);}}
.q-bonus{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border:1px dashed rgba(245,158,11,.6);
  color:#fde68a;font-family:var(--ff-hd);font-size:18px;letter-spacing:1px;}
.q-bonus.got{border-style:solid;background:rgba(245,158,11,.15);}
.sh-sub{display:flex;gap:8px;justify-content:center;}
.sh-sub .lb-tab{flex:1;max-width:240px;}
/* ── shop: pick a teacher from the strip, then their outfits as big cards ── */
/* the teacher strip: a rail with soft edges, a slim themed scrollbar and page arrows */
.sh-strip-wrap{position:relative;padding:6px 0 2px;background:linear-gradient(180deg,rgba(40,10,80,.35),rgba(10,2,24,.2));
  border-top:1px solid rgba(155,48,255,.25);border-bottom:1px solid rgba(155,48,255,.25);}
.sh-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:6px 44px 12px;scroll-snap-type:x proximity;
  scroll-padding:0 44px;overscroll-behavior-x:contain;touch-action:pan-x;
  scrollbar-width:thin;scrollbar-color:#9b30ff rgba(20,6,40,.8);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);}
.sh-strip::-webkit-scrollbar{height:8px;}
.sh-strip::-webkit-scrollbar-track{background:rgba(20,6,40,.8);border-radius:4px;margin:0 44px;}
.sh-strip::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#7c3aed,#c084fc);border-radius:4px;border:1px solid rgba(0,0,0,.4);}
.sh-strip::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#9b30ff,#e9d5ff);}
.sh-strip .sh-face{scroll-snap-align:start;}
.sh-arr{position:absolute;top:50%;transform:translateY(-60%);z-index:2;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:rgba(30,8,60,.92);border:1px solid rgba(216,180,254,.6);border-radius:50%;color:#fff;padding:0;
  box-shadow:0 0 12px rgba(155,48,255,.5);transition:opacity .2s,transform .15s,background .15s;}
.sh-arr .ico{width:18px;height:18px;}
.sh-arr.l{left:4px;} .sh-arr.r{right:4px;}
.sh-arr:hover{background:#6d28d9;transform:translateY(-60%) scale(1.1);}
.sh-strip-wrap.at-start .sh-arr.l,.sh-strip-wrap.at-end .sh-arr.r{opacity:0;pointer-events:none;}
.sh-face{flex:none;width:clamp(64px,calc(var(--cw)*8),96px);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(180deg,rgba(40,10,80,.8),rgba(10,2,24,.9));border:2px solid rgba(155,48,255,.3);
  border-bottom:3px solid var(--tc,#9b30ff);padding:5px 3px;transition:transform .12s,border-color .12s,box-shadow .12s;}
.sh-face canvas{width:100%;aspect-ratio:1;display:block;}
.sh-face span{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.3),9px);color:var(--v5);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-face:hover{transform:translateY(-3px);}
.sh-face.on{border-color:var(--tc,#9b30ff);box-shadow:0 0 18px color-mix(in srgb,var(--tc,#9b30ff) 55%,transparent);}
.sh-face.on span{color:#fff;}
.sh-head{display:flex;align-items:center;gap:14px;padding:clamp(10px,calc(var(--ch)*2.4),18px) clamp(12px,calc(var(--cw)*1.8),22px);
  background:linear-gradient(100deg,color-mix(in srgb,var(--tc,#9b30ff) 34%,transparent),rgba(14,3,32,.9) 60%);
  border:1px solid color-mix(in srgb,var(--tc,#9b30ff) 55%,transparent);border-left:5px solid var(--tc,#9b30ff);}
.sh-head-txt{flex:1;min-width:0;}
.sh-head-name{font-family:var(--ff-hd);font-size:clamp(17px,calc(var(--cw)*2.5),34px);color:#fff;letter-spacing:1px;line-height:1.05;}
.sh-head-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.7),12px);color:var(--v5);letter-spacing:1px;}
.sh-head .q-bar{margin-top:9px;height:8px;}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(10px,calc(var(--cw)*1.6),18px);
  margin-top:clamp(10px,calc(var(--ch)*2.4),18px);}
.sh-item{display:flex;flex-direction:column;gap:0;overflow:hidden;position:relative;
  background:linear-gradient(180deg,rgba(38,8,74,.92),rgba(10,2,24,.95));
  border:2px solid rgba(155,48,255,.35);transition:transform .14s,box-shadow .14s,border-color .14s;}
.sh-item:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.5);}
.sh-item.own{border-color:rgba(34,197,94,.55);}
.sh-item.on{border-color:#fde68a;box-shadow:0 0 22px rgba(253,224,71,.32);}
.sh-item.locked{filter:saturate(.55);}
.sh-art{position:relative;background:
  radial-gradient(ellipse at 50% 96%,color-mix(in srgb,var(--tc,#9b30ff) 55%,transparent),transparent 62%),
  linear-gradient(160deg,color-mix(in srgb,var(--tc,#9b30ff) 30%,transparent),rgba(6,1,16,.6));
  padding:clamp(6px,calc(var(--ch)*1.4),12px) 6px 0;}
.sh-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);}
.sh-art canvas{width:100%;aspect-ratio:5/6;display:block;}
.sh-flag{position:absolute;top:8px;left:0;z-index:2;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.3),10px);
  letter-spacing:1px;padding:4px 9px;background:rgba(34,197,94,.85);color:#04210f;}
.sh-flag.on{background:#fde68a;color:#3b2503;}
.sh-lock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(4,0,12,.62);color:#fff;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.7),12px);letter-spacing:1px;}
.sh-lock .ico{width:2.4em;height:2.4em;color:#fca5a5;}
.sh-lock b{font-weight:normal;}
.sh-name{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.9),24px);letter-spacing:1px;color:#fff;
  text-align:center;padding:clamp(6px,calc(var(--ch)*1.5),11px) 8px clamp(4px,calc(var(--ch)*1),8px);}
.sh-buy{display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;width:100%;
  font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.75),22px);letter-spacing:1px;
  padding:clamp(7px,calc(var(--ch)*1.8),13px) 8px;border:0;border-top:2px solid rgba(0,0,0,.35);color:#fff;
  background:linear-gradient(180deg,#22c55e,#15803d);text-shadow:0 2px 0 rgba(0,0,0,.35);transition:filter .12s;}
.sh-buy .ico{width:1.2em;height:1.2em;}
.sh-buy.buy{background:linear-gradient(180deg,#fbbf24,#b45309);color:#2b1602;text-shadow:0 1px 0 rgba(255,255,255,.35);}
.sh-buy.buy .ico{color:#3b2503;}
.sh-buy.have{background:linear-gradient(180deg,#7c3aed,#4c1d95);}
.sh-buy.lock{background:linear-gradient(180deg,#4b5563,#1f2937);font-size:clamp(10px,calc(var(--cw)*1.25),15px);}
.sh-buy:hover:not(:disabled){filter:brightness(1.12);}
.sh-buy:disabled{opacity:.6;cursor:default;}
.sh-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(8px,calc(var(--cw)*1.4),16px);}
.sh-title{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(160deg,rgba(38,8,74,.92),rgba(10,2,24,.95));
  border:2px solid rgba(155,48,255,.35);}
.sh-title.own{border-color:rgba(34,197,94,.5);} .sh-title.on{border-color:#fde68a;box-shadow:0 0 18px rgba(253,224,71,.3);}
.sh-title-n{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--ff-hd);font-size:clamp(17px,calc(var(--cw)*2.1),27px);color:#fde68a;letter-spacing:1px;
  padding:clamp(14px,calc(var(--ch)*3.4),26px) 12px;}
/* ── mastery: one wide row per teacher ── */
.ms-legend{font-size:clamp(11px,calc(var(--cw)*1.15),15px);color:var(--v5);text-align:center;opacity:.85;margin-bottom:10px;}
.ms-list{display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.4),11px);}
.ms-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(10px,calc(var(--cw)*1.6),20px);align-items:center;
  background:linear-gradient(100deg,color-mix(in srgb,var(--tc,#9b30ff) 20%,transparent),rgba(16,4,36,.85) 45%);
  border:1px solid rgba(155,48,255,.3);border-left:4px solid var(--tc,#9b30ff);
  padding:clamp(7px,calc(var(--ch)*1.7),13px) clamp(10px,calc(var(--cw)*1.6),18px);}
.ms-row.lock{opacity:.4;}
.ms-row.max{border-color:#fde68a;}
.ms-row canvas{width:clamp(44px,calc(var(--ch)*11),70px);height:clamp(44px,calc(var(--ch)*11),70px);display:block;}
.ms-info{min-width:0;}
.ms-top{display:flex;align-items:center;gap:9px;min-width:0;}
.ms-name{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.85),24px);letter-spacing:1px;color:#fff;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ms-sub{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*1),12px);color:var(--v5);margin-top:5px;}
.ms-row .q-bar{height:clamp(6px,calc(var(--ch)*1.5),10px);margin-top:7px;}
.ms-badge{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:clamp(44px,calc(var(--cw)*6),70px);
  border-left:1px solid rgba(155,48,255,.3);padding-left:clamp(8px,calc(var(--cw)*1.2),16px);}
.ms-badge b{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--cw)*2.6),34px);color:#fde68a;line-height:1;}
.ms-badge span{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);color:var(--v5);letter-spacing:1px;}
.ms-badge.off b{color:var(--v5);}
/* ── the player ID card ── */
.id-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#1b0538,#0a0118 55%,#24073f);
  border:2px solid rgba(253,224,71,.5);box-shadow:0 14px 40px rgba(0,0,0,.55);}
.id-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 48%,transparent 56%);}
.id-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#9b30ff) 55%,transparent),rgba(245,158,11,.35));
  padding:clamp(6px,calc(var(--ch)*1.5),11px) clamp(10px,calc(var(--cw)*1.6),18px);
  font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),11px);letter-spacing:2px;color:#fff;}
.id-head-r{color:#fde68a;}
.id-body{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(12px,calc(var(--cw)*2),26px);
  padding:clamp(12px,calc(var(--ch)*2.6),22px);align-items:start;}
.id-photo{display:flex;flex-direction:column;align-items:center;gap:6px;}
.id-photo canvas{width:100%;max-width:150px;aspect-ratio:4/5;border:2px solid rgba(253,224,71,.45);
  background:rgba(0,0,0,.35);display:block;}
.id-photo-cap{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);color:var(--v5);letter-spacing:1px;text-align:center;}
.id-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(7px,calc(var(--ch)*1.6),13px);}
.id-field{border-bottom:1px dashed rgba(155,48,255,.4);padding-bottom:5px;min-width:0;}
.id-field.wide{grid-column:1/-1;}
.id-field i{display:block;font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.25),9px);
  color:var(--v5);letter-spacing:2px;}
.id-field b{display:block;font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.85),26px);color:#fff;
  letter-spacing:1px;line-height:1.15;margin-top:3px;overflow:hidden;text-overflow:ellipsis;}
.id-field.wide b{color:#fde68a;}
.id-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:1px;background:rgba(155,48,255,.25);
  border-top:1px solid rgba(155,48,255,.3);}
.id-stat{background:rgba(10,2,24,.85);padding:clamp(7px,calc(var(--ch)*1.6),12px) 4px;text-align:center;}
.id-stat b{display:block;font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.9),26px);color:#fde68a;line-height:1;}
.id-stat i{display:block;font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.15),9px);
  color:var(--v5);letter-spacing:1px;margin-top:4px;}
.id-strip{display:flex;align-items:flex-end;gap:2px;height:clamp(24px,calc(var(--ch)*5),38px);overflow:hidden;
  padding:0 clamp(10px,calc(var(--cw)*1.6),18px) 6px;background:rgba(0,0,0,.35);}
.id-strip i{display:block;height:100%;background:rgba(226,232,240,.75);}
.id-strip span{margin-left:auto;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);color:var(--v5);letter-spacing:3px;}
.id-sec{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(10px,calc(var(--ch)*2.4),20px);
  border-bottom:1px solid rgba(155,48,255,.3);padding-bottom:6px;
  font-family:var(--ff-px);font-size:clamp(9px,calc(var(--ch)*1.9),13px);color:var(--gold2);letter-spacing:2px;}
.id-sec b{color:#fff;font-weight:normal;}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(6px,calc(var(--cw)*1.1),12px);
  margin-top:clamp(8px,calc(var(--ch)*1.8),14px);}
.ach{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  background:linear-gradient(120deg,rgba(245,158,11,.16),rgba(16,4,36,.9) 60%);border:1px solid rgba(253,224,71,.45);
  padding:clamp(7px,calc(var(--ch)*1.6),12px) clamp(9px,calc(var(--cw)*1.2),14px);}
.ach.off{background:rgba(10,2,24,.7);border-color:rgba(155,48,255,.25);opacity:.55;}
.ach-i{display:flex;align-items:center;justify-content:center;width:clamp(30px,calc(var(--ch)*7),46px);height:clamp(30px,calc(var(--ch)*7),46px);
  border:1px solid rgba(253,224,71,.5);background:rgba(245,158,11,.14);}
.ach.off .ach-i{border-color:rgba(155,48,255,.3);background:rgba(0,0,0,.25);}
.ach-i .ico{width:60%;height:60%;}
.ach-t{min-width:0;}
.ach-t b{display:block;font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--cw)*1.45),19px);color:#fff;letter-spacing:1px;}
.ach-t i{display:block;font-style:normal;font-size:clamp(10px,calc(var(--cw)*1.05),13px);color:var(--v5);margin-top:3px;line-height:1.25;}
.ach-ok{position:absolute;top:5px;right:8px;color:#4ade80;font-size:14px;}
.pc-titles{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:10px;}
.pc-titles .set-btn.sel{background:var(--v3);border-color:#fde68a;color:#fde68a;}
.pc-acc{margin:clamp(12px,calc(var(--ch)*2.6),22px) auto 0;}
/* the payout: coins burst in the middle, then fly into the corner and are counted */
.go-coincv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;}
.go-coinnum{position:absolute;left:50%;top:80%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:61;
  font-family:var(--ff-hd);font-size:clamp(34px,calc(var(--ch)*13),110px);color:#fde68a;letter-spacing:2px;
  text-shadow:0 0 26px rgba(245,158,11,.85),0 6px 0 rgba(120,53,15,.85);}
.go-coinnum.on{animation:coinPop .5s cubic-bezier(.2,1.4,.4,1) forwards;}
.go-coinnum.off{animation:coinGo .45s ease-in forwards;}
@keyframes coinPop{from{opacity:0;transform:translate(-50%,-50%) scale(.4);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes coinGo{from{opacity:1;transform:translate(-50%,-50%) scale(1);}to{opacity:0;transform:translate(-50%,-50%) scale(1.25);}}
.go-cointot{position:absolute;top:clamp(8px,calc(var(--ch)*2.4),20px);right:clamp(10px,calc(var(--cw)*2),28px);
  z-index:61;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .35s;pointer-events:none;
  font-family:var(--ff-px);font-size:clamp(11px,calc(var(--ch)*2.6),19px);color:#fde68a;letter-spacing:1px;
  background:rgba(12,2,28,.8);border:1px solid rgba(245,158,11,.55);padding:7px 13px;}
.go-cointot .ico{width:1.3em;height:1.3em;}
.go-cointot.on{opacity:1;}
.go-xp{align-self:center;font-family:var(--ff-px);font-size:clamp(9px,calc(var(--cw)*1),12px);color:#c4b5fd;text-align:center;min-height:1em;line-height:1.6;
  padding:.4em 1.2em;background:rgba(10,2,24,.7);border:1px solid rgba(155,48,255,.35);border-radius:999px;animation:goUp .5s .75s both;}
.go-xp:empty{visibility:hidden;}
.go-xp b{color:#fde68a;font-weight:normal;}
@media (max-width:640px){ .pc-card{grid-template-columns:1fr;text-align:center;} .pc-stats{grid-template-columns:repeat(2,1fr);} .pf-tabs .pf-tab{font-size:13px;} }
.acc-go,.lb-join,.acc-btns .mbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;}
.acc-go .mbtn-main,.lb-join .mbtn-main,.acc-btns .mbtn-main{font-size:clamp(13px,calc(var(--cw)*1.6),20px);}
@media (max-width:640px){ .lb-tab{font-size:13px;} .acc-btns{grid-template-columns:1fr;} }

/* ── online lobby ─────────────────────────────────────────── */
#sOnline{background:linear-gradient(160deg,rgba(26,0,53,.98),rgba(8,0,18,.99));overflow-y:auto;justify-content:flex-start;
  padding:clamp(10px,calc(var(--ch)*3),32px) calc(var(--cw)*3) clamp(14px,calc(var(--ch)*4),40px);}
.ol-wrap{width:min(1040px,100%);display:flex;flex-direction:column;gap:clamp(10px,calc(var(--ch)*2),18px);}
/* who you are */
.ol-me{display:flex;align-items:center;gap:clamp(8px,calc(var(--cw)*1.2),14px);padding:clamp(6px,calc(var(--ch)*1.2),10px) clamp(8px,calc(var(--cw)*1.2),14px);
  border-radius:14px;background:linear-gradient(90deg,rgba(252,211,77,.12),rgba(12,3,26,.5));border:1px solid rgba(252,211,77,.35);}
.ol-av{flex:none;width:clamp(36px,calc(var(--ch)*8.5),56px);height:clamp(36px,calc(var(--ch)*8.5),56px);border-radius:12px;overflow:hidden;border:2px solid #fcd34d;background:#12032a;}
.ol-av canvas{width:100%;height:100%;display:block;}
.ol-me-t{display:flex;flex-direction:column;min-width:0;flex:1;}
.ol-me-t i{font-style:normal;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.3),9px);color:#c4b5fd;letter-spacing:2px;line-height:1.6;}
.ol-me-t b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(20px,calc(var(--ch)*5),34px);color:#fde68a;letter-spacing:1.5px;line-height:1;padding-top:.1em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ol-me-r{display:flex;align-items:center;gap:10px;}
.ol-guest{font-family:var(--ff-ui);font-weight:600;font-size:clamp(10px,calc(var(--ch)*1.9),13px);color:#c4b5fd;text-align:right;max-width:200px;}
.ol-login{display:flex;align-items:center;gap:6px;padding:.45em .9em;border-radius:999px;cursor:pointer;font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*2.8),19px);
  letter-spacing:1px;color:#12032a;background:linear-gradient(180deg,#fde68a,#f59e0b);border:0;box-shadow:0 4px 14px rgba(245,158,11,.35);}
.ol-login .ico{width:1em;height:1em;} .ol-login:hover,.ol-login:focus-visible{filter:brightness(1.1);outline:none;}
/* the three ways to play */
.ol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,calc(var(--cw)*1.2),16px);align-items:stretch;}
.ol-card{--oc:#a78bfa;display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.4),11px);padding:clamp(10px,calc(var(--ch)*2),16px);border-radius:16px;min-width:0;
  border:1px solid color-mix(in srgb,var(--oc) 50%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.45);animation:hlIn .35s ease-out backwards;
  background:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--oc) 28%,transparent),transparent 60%),linear-gradient(180deg,#1b0936,#0c0320);}
.ol-card:nth-child(2){animation-delay:.06s;} .ol-card:nth-child(3){animation-delay:.12s;}
.ol-card-h{display:flex;align-items:center;gap:10px;}
.ol-card-h > div{display:flex;flex-direction:column;min-width:0;}
.ol-card-h b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(18px,calc(var(--ch)*4.4),30px);letter-spacing:1.5px;color:#fff;line-height:1;padding-top:.1em;}
.ol-card-h span{font-family:var(--ff-ui);font-weight:600;font-size:clamp(10px,calc(var(--ch)*1.9),13.5px);color:color-mix(in srgb,var(--oc) 70%,#fff);}
.ol-card-i{flex:none;width:clamp(34px,calc(var(--ch)*7.5),50px);height:clamp(34px,calc(var(--ch)*7.5),50px);border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--oc) 24%,#0b0118);border:1px solid color-mix(in srgb,var(--oc) 60%,transparent);}
.ol-card-i .ico{width:55%;height:55%;color:var(--oc);}
.ol-card-d{font-family:var(--ff-ui);font-weight:500;font-size:clamp(11px,calc(var(--ch)*2),14px);color:#d8ccf5;line-height:1.3;flex:1;margin:0;}
.ol-go{display:flex;align-items:center;justify-content:center;gap:.45em;width:100%;padding:.55em .8em;border-radius:12px;cursor:pointer;border:0;margin-top:auto;
  font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--ch)*3.4),23px);letter-spacing:1.5px;color:#0b0118;
  background:linear-gradient(180deg,color-mix(in srgb,var(--oc) 55%,#fff),var(--oc));box-shadow:0 4px 0 color-mix(in srgb,var(--oc) 45%,#000),0 8px 20px color-mix(in srgb,var(--oc) 30%,transparent);
  transition:transform .1s,filter .15s,box-shadow .1s;}
.ol-go .ico{width:1em;height:1em;}
.ol-go:hover,.ol-go:focus-visible{filter:brightness(1.12);outline:none;transform:translateY(-1px);}
.ol-go:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--oc) 45%,#000);}
.ol-go:disabled{filter:grayscale(.7) brightness(.7);cursor:default;transform:none;}
.ol-go.sm{width:auto;font-size:clamp(13px,calc(var(--ch)*2.8),18px);padding:.5em .9em;margin:0;white-space:nowrap;}
.ol-or{display:flex;align-items:center;gap:8px;font-family:var(--ff-ui);font-weight:600;font-size:clamp(10px,calc(var(--ch)*1.8),13px);color:#c4b5fd;}
.ol-or::before,.ol-or::after{content:'';flex:1;height:1px;background:rgba(196,181,253,.3);}
.ol-join{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}
.ol-join input{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--ch)*4.2),28px);letter-spacing:.35em;text-align:center;text-transform:uppercase;color:#fff;border-radius:12px;
  background:rgba(0,0,0,.45);border:1px solid color-mix(in srgb,var(--oc) 50%,transparent);padding:.25em .4em;outline:none;min-width:0;}
.ol-join input::placeholder{color:rgba(255,255,255,.3);}
.ol-join input:focus{border-color:var(--oc);box-shadow:0 0 0 3px color-mix(in srgb,var(--oc) 25%,transparent);}
.ol-busy{display:flex;flex-direction:column;align-items:center;gap:14px;}
.ol-codebox{text-align:center;background:rgba(20,6,40,.7);border:1px solid rgba(245,166,35,.6);padding:14px 26px;}
.ol-codelbl{font-family:var(--ff-px);font-size:12px;color:var(--gold2);letter-spacing:2px;}
.ol-code{font-family:var(--ff-hd);font-size:clamp(40px,calc(var(--cw)*6),72px);letter-spacing:10px;color:#fff;
  text-shadow:0 0 18px rgba(245,166,35,.6);margin:4px 0 8px;}
.ol-spin{display:flex;gap:8px;}
.ol-spin i{width:10px;height:10px;background:var(--v4);animation:olb 1s ease-in-out infinite;}
.ol-spin i:nth-child(2){animation-delay:.15s;} .ol-spin i:nth-child(3){animation-delay:.3s;}
@keyframes olb{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-8px);opacity:1}}
.ol-cancel{width:auto;min-width:200px;display:flex;justify-content:center;}
.ol-status{text-align:center;font-size:14px;color:#d8d0f0;min-height:1.3em;}
.ol-status.err{color:#fca5a5;} .ol-status.ok{color:#86efac;}
.ol-note{font-size:13px;color:var(--v5);opacity:.7;text-align:center;line-height:1.5;}
#sMenu .menu-primary{min-height:clamp(34px,calc(var(--ch)*7.6),68px);}

/* ── readability: long sentences in the UI font, not the pixel font ── */
.story-brief .sb-quote,.intro-quote,#toast{font-family:var(--ff-ui);font-weight:700;letter-spacing:.3px;}
.story-brief .sb-quote{font-size:clamp(15px,calc(var(--cw)*1.45),19px);}
.intro-quote{font-size:clamp(15px,calc(var(--cw)*1.5),21px);}
#toast{font-size:clamp(14px,calc(var(--cw)*1.35),18px);}
/* stage names under the ladder rungs: hyphenate instead of breaking mid-word */
.rung-i{font-family:var(--ff-ui);font-weight:700;font-size:clamp(10px,calc(var(--cw)*1),13px);letter-spacing:0;
  word-break:normal;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/* odds table badges back to label size */
.godd .tier-badge{font-size:clamp(9px,calc(var(--ch)*1.3),12px);}
/* main menu: the badge sits clear of the top-right chips, subtitles never spill */
#sMenu .logo-wrap{margin-top:clamp(2px,calc(var(--ch)*1.4),26px);margin-bottom:clamp(4px,calc(var(--ch)*1.4),26px);}
#sMenu .menu-btns{gap:clamp(3px,calc(var(--ch)*.7),9px) !important;}
#sMenu .menu-tiles{margin-top:clamp(5px,calc(var(--ch)*1.4),16px);}
.mtile{height:clamp(50px,calc(var(--ch)*12.5),112px);}
#sMenu .menu-footer{position:relative;bottom:auto;margin-top:clamp(6px,calc(var(--ch)*1.8),22px);}
#sMenu{padding-bottom:clamp(6px,calc(var(--ch)*1.5),18px) !important;overflow-y:auto;}
#sMenu .logo-line1{font-size:clamp(44px,calc(var(--ch)*13),130px);}
#sMenu .logo-line2{font-size:clamp(30px,calc(var(--ch)*8.2),92px);}
#sMenu .logo-tagline{margin-top:calc(var(--ch)*.8);}
#sMenu .logo-badge{letter-spacing:clamp(1px,calc(var(--cw)*.35),5px);font-size:clamp(9px,calc(var(--ch)*1.7),13px);white-space:nowrap;}
.topchips .chip{font-size:clamp(9px,calc(var(--ch)*1.3),12px);padding:6px 9px;}
.mbtn-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#sMenu .menu-primary{min-height:clamp(32px,calc(var(--ch)*7.2),64px);}

/* profile stat tiles: big number on top, readable label below */
.acc-stat{padding:10px 6px !important;}
.acc-stat b{font-size:clamp(22px,calc(var(--cw)*2.5),32px) !important;line-height:1;}
.acc-stat span{font-family:var(--ff-ui);font-weight:700;font-size:clamp(12px,calc(var(--cw)*1.05),14px);line-height:1.2;
  letter-spacing:.5px;color:var(--v5);text-transform:uppercase;}

/* ── dev dashboard ── */
.dev-chip{display:none;background:rgba(245,158,11,.2) !important;border-color:rgba(245,158,11,.7) !important;color:#fde68a !important;}
body.is-dev .dev-chip{display:inline-flex;}
#sDev{overflow-y:auto;background:linear-gradient(160deg,rgba(26,0,53,.98),rgba(8,0,18,.99));justify-content:flex-start;}
#sDev .set-row{flex-wrap:wrap;}
#sDev .set-txt{min-width:min(100%,200px);}
#sDev .seg{flex-wrap:wrap;}
#sDev .pg-title{color:#fde68a;}
.dev-badge{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*1),12px);color:#1c1003;background:#f59e0b;padding:4px 8px;letter-spacing:1px;justify-self:end;}
.dev-btns{display:flex;flex-wrap:wrap;gap:8px;}
.dev-btns .set-btn{padding:9px 12px;}
.dev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;max-height:min(46vh,340px);overflow-y:auto;padding-right:4px;}
.dev-fin{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.28);border:1px solid rgba(155,48,255,.3);padding:6px 8px;cursor:pointer;text-align:left;color:var(--fg);font:inherit;}
.dev-fin:hover{background:rgba(106,13,173,.35);}
.dev-fin b{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.4),18px);letter-spacing:1px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dev-fin small{font-family:var(--ff-px);font-size:10px;opacity:.85;}
.dev-sel{background:#12051f;color:var(--fg);border:1px solid rgba(155,48,255,.55);font-family:var(--ff-ui);font-weight:700;font-size:14px;padding:7px 8px;max-width:100%;}
.dev-num{width:110px;background:#12051f;color:var(--fg);border:1px solid rgba(155,48,255,.55);font-family:var(--ff-ui);font-weight:700;font-size:14px;padding:7px 8px;}
.dev-note{font-size:13px;color:var(--v5);opacity:.8;line-height:1.35;}
.dev-tog.sel{background:var(--v3);}

/* ── settings rows: text never gets squeezed into a one-word column ── */
#sSettings .set-row{flex-wrap:wrap;row-gap:8px;}
#sSettings .set-txt{flex:1 1 210px;min-width:min(100%,210px);}
#sSettings .seg{flex-wrap:wrap;max-width:100%;}
#sSettings .set-row > .seg, #sSettings .set-row > .set-btn, #sSettings .set-row > .danger-btn, #sSettings .set-row > .vol{margin-left:auto;}
#sSettings .set-card[style*="grid-column"]{overflow-x:auto;}
/* settings: one clean column, box after box */
#sSettings .set-grid{display:flex;flex-direction:column;gap:clamp(10px,calc(var(--ch)*1.8),16px);max-width:900px;margin:0 auto;}
#sSettings .set-card{width:100%;grid-column:auto !important;}
/* ── controls panel ── */
.bind-grid{display:grid;grid-template-columns:minmax(110px,1fr) repeat(4,minmax(64px,.8fr));gap:5px;align-items:center;margin-bottom:10px;}
.bind-grid .bh{font-family:var(--ff-px);font-size:clamp(10px,calc(var(--cw)*.95),12px);color:var(--v5);text-align:center;letter-spacing:1px;}
.bind-grid .bl{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.5),19px);letter-spacing:1.5px;color:var(--fg);}
.bind-btn{background:rgba(0,0,0,.35);border:1px solid rgba(155,48,255,.45);color:#fff;font-family:var(--ff-ui);font-weight:700;
  font-size:clamp(13px,calc(var(--cw)*1.2),15px);padding:6px 4px;cursor:pointer;min-height:32px;}
.bind-btn:hover,.bind-btn:focus-visible{background:rgba(106,13,173,.45);outline:none;}
.bind-btn.wait{background:#f59e0b;color:#1c1003;animation:bindPulse .8s infinite;}
.bind-btn.bad{background:#991b1b;}
.bind-btn.fixed{opacity:.45;cursor:default;}
@keyframes bindPulse{50%{filter:brightness(1.3)}}
button:focus-visible,.mbtn:focus-visible{outline:3px solid #fde047;outline-offset:2px;}

/* ── update notes (Steam-style popup, game look) ── */
#upd{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:max(12px,2.5vh) 12px;
  background:rgba(4,0,10,.78);backdrop-filter:blur(3px);}
#upd.on{display:flex;animation:updIn .28s ease-out;}
@keyframes updIn{from{opacity:0}to{opacity:1}}
#upd .u-win{width:min(820px,100%);max-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#1a0535,#0b0118);
  border:1px solid rgba(155,48,255,.55);box-shadow:0 0 0 1px #000,0 18px 60px rgba(0,0,0,.7),0 0 40px rgba(155,48,255,.25);
  animation:updPop .34s cubic-bezier(.2,1.3,.4,1);overflow:hidden;}
@keyframes updPop{from{transform:scale(.92) translateY(12px);opacity:0}to{transform:none;opacity:1}}
#upd .u-top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#070010;border-bottom:1px solid rgba(155,48,255,.35);}
#upd .u-brand{font-family:var(--ff-px);font-size:11px;color:#c4b5fd;letter-spacing:1px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#upd .u-x{background:none;border:1px solid rgba(255,255,255,.18);color:#fff;width:32px;height:32px;cursor:pointer;font-size:18px;line-height:1;}
#upd .u-x:hover{background:#991b1b;}
#upd .u-scroll{overflow-y:auto;flex:1 1 auto;min-height:0;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#upd .u-hero{position:relative;aspect-ratio:1280/720;background:#070010 center/cover no-repeat;}
#upd .u-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,1,24,0) 45%,rgba(11,1,24,.55) 72%,#0b0118);}
#upd .u-tag{position:absolute;left:16px;top:14px;z-index:1;background:#fde047;color:#1c1003;font-family:var(--ff-px);font-size:11px;padding:6px 9px;letter-spacing:1px;
  box-shadow:3px 3px 0 #07050d;}
#upd .u-head{position:relative;margin-top:-64px;z-index:1;padding:0 22px 6px;}
#upd .u-meta{font-family:var(--ff-px);font-size:10px;color:#a78bfa;letter-spacing:1px;margin-bottom:6px;}
#upd .u-title{font-family:var(--ff-hd);font-size:clamp(28px,5vw,48px);line-height:.95;letter-spacing:1.5px;color:#fff;
  text-shadow:0 3px 0 #07050d,0 0 22px rgba(253,224,71,.35);}
#upd .u-sub{font-family:var(--ff-ui);font-weight:700;font-size:15px;color:#d8b4fe;margin-top:6px;}
#upd .u-body{padding:10px 22px 18px;}
#upd .u-sec{margin-top:14px;}
#upd .u-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--ff-hd);font-size:22px;letter-spacing:2px;}
#upd .u-sec h4 i{font-style:normal;font-family:var(--ff-px);font-size:10px;padding:4px 7px;color:#07050d;letter-spacing:1px;}
#upd .u-sec.new h4{color:#86efac;} #upd .u-sec.new h4 i{background:#4ade80;}
#upd .u-sec.imp h4{color:#93c5fd;} #upd .u-sec.imp h4 i{background:#60a5fa;}
#upd .u-sec.fix h4{color:#fca5a5;} #upd .u-sec.fix h4 i{background:#f87171;}
#upd .u-sec ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
#upd .u-sec li{position:relative;padding:8px 10px 8px 30px;background:rgba(0,0,0,.28);border-left:3px solid rgba(155,48,255,.5);
  font-family:var(--ff-ui);font-weight:600;font-size:15px;line-height:1.35;color:#e9e3f5;}
#upd .u-sec li::before{content:'▸';position:absolute;left:11px;top:8px;color:#fde047;}
#upd .u-sec li b{color:#fff;}
#upd .u-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#070010;border-top:1px solid rgba(155,48,255,.35);flex-wrap:wrap;}
#upd .u-nav{display:flex;align-items:center;gap:6px;}
#upd .u-nav button{background:rgba(61,0,112,.5);border:1px solid rgba(155,48,255,.55);color:#fff;font-family:var(--ff-px);font-size:10px;padding:9px 10px;cursor:pointer;letter-spacing:1px;}
#upd .u-nav button:disabled{opacity:.35;cursor:default;}
#upd .u-pos{font-family:var(--ff-px);font-size:10px;color:#a78bfa;min-width:52px;text-align:center;}
#upd .u-go{margin-left:auto;background:linear-gradient(180deg,#fde047,#f59e0b);border:0;color:#1c1003;font-family:var(--ff-hd);font-size:22px;letter-spacing:2px;
  padding:9px 22px;cursor:pointer;box-shadow:3px 3px 0 #07050d;}
#upd .u-go:hover{filter:brightness(1.1);}
@media (max-width:560px){ #upd .u-head{margin-top:-38px;} #upd .u-body,#upd .u-head{padding-left:14px;padding-right:14px;} #upd .u-sec li{font-size:14px;} }
.news-chip{background:rgba(253,224,71,.14) !important;border-color:rgba(253,224,71,.6) !important;color:#fde68a !important;}
.news-chip.dot::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;margin-left:5px;vertical-align:middle;}

/* ── start gate: the browser needs one gesture before it plays audio ── */
#startGate{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,#2a0b4a 0%,#12021f 55%,#050009 100%);
  opacity:0;pointer-events:none;transition:opacity .38s;cursor:pointer;}
#startGate.on{opacity:1;pointer-events:auto;}
#startGate .sg-inner{text-align:center;padding:0 18px;}
#startGate .sg-badge{font-family:var(--ff-px);font-size:clamp(7px,1.35vw,13px);color:#fcd34d;
  letter-spacing:2px;margin-bottom:12px;}
#startGate .sg-title{font-family:var(--ff-hd);font-size:clamp(34px,10.5vw,150px);letter-spacing:4px;
  background:linear-gradient(180deg,#ffffff 8%,#fff3a0 35%,#ffb000 60%,#ff4d00 82%,#9b0010);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(4px 4px 0 #07050d) drop-shadow(0 0 26px rgba(255,120,0,.5));line-height:1;}
#startGate .sg-press{font-family:var(--ff-hd);font-size:clamp(14px,3vw,34px);color:#e9d5ff;
  letter-spacing:3px;margin-top:22px;animation:sgblink 1.15s steps(1) infinite;text-shadow:2px 2px 0 #07050d;}
#startGate .sg-hint{font-family:var(--ff-px);font-size:clamp(6px,1.15vw,11px);color:#9b7fd4;margin-top:16px;}
@keyframes sgblink{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* ── main menu layout ───────────────────────────────────────── */
#sMenu .menu-btns{gap:clamp(4px,calc(var(--ch)*1.1),10px);}
#sMenu .menu-primary{width:100%;min-height:clamp(34px,calc(var(--ch)*8),70px);
  padding-top:clamp(3px,calc(var(--ch)*1),10px);padding-bottom:clamp(3px,calc(var(--ch)*1),10px);}
#sMenu .menu-primary .mbtn-main{font-size:clamp(16px,calc(var(--ch)*5),34px);}
#sMenu .menu-primary .mbtn-sub{font-size:clamp(8px,calc(var(--ch)*1.56),12px);}
#sMenu .menu-primary:first-child{border-color:rgba(245,166,35,.65);background:linear-gradient(90deg,rgba(245,166,35,.18),rgba(61,0,112,.25));}
.menu-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,calc(var(--cw)*.8),10px);
  width:100%;margin-top:clamp(6px,calc(var(--ch)*1.8),18px);position:relative;}
.mtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,calc(var(--ch)*.5),5px);
  height:clamp(56px,calc(var(--ch)*14),118px);padding:4px 2px;cursor:pointer;outline:none;color:var(--fg);
  background:rgba(61,0,112,.28);border:1px solid rgba(155,48,255,.45);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s;}
.mtile:hover,.mtile:focus-visible{background:rgba(106,13,173,.5);border-color:var(--v5);transform:translateY(-3px);
  box-shadow:0 0 22px rgba(155,48,255,.45);}
.mtile:active{transform:translateY(-1px) scale(.97);}
.mtile-icon{font-size:clamp(16px,calc(var(--ch)*4.8),34px);line-height:1;}
.mtile-lbl{font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*2.7),20px);letter-spacing:1px;line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.mtile-sub{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.44),12px);color:#fde68a;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.mtile.gold{border-color:rgba(245,158,11,.75);background:linear-gradient(180deg,rgba(245,158,11,.24),rgba(61,0,112,.3));}
.mtile.gold .mtile-lbl{color:#fde68a;}
.mtile.gold:hover{box-shadow:0 0 24px rgba(245,158,11,.5);}
.mtile{position:relative;}
.mtile.dot::after{content:'';position:absolute;top:7px;right:9px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef4444;}

/* ── scrolling + touch ─────────────────────────────────────── */
.scr,.cs-grid-wrap{touch-action:pan-y;}
#chipFs{display:none;}
@media (pointer:coarse){
  .esc-btn{font-size:12px;padding:9px 12px;}
  .back-btn{font-size:12px;padding:11px 16px;}
  .chip{font-size:12px;padding:10px 12px;}
  .cc.unlocked:hover{transform:none;}
  #chipFs{display:inline-block;}
}

/* ── portrait phones: a 16:9 fighter is unplayable in portrait ── */
#rotate{position:fixed;inset:0;z-index:10000;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;
  background:#050010;color:var(--v5);font-family:var(--ff-px);
  font-size:13px;letter-spacing:2px;line-height:2;}
#rotate .ricon{font-size:54px;animation:rotHint 2.2s ease-in-out infinite;}
@keyframes rotHint{0%,35%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex;}}

/* ── short viewport tweaks ──────────────────────────────────── */
/* container units above already handle short/odd viewports, so no
   viewport-height media queries here -- they measured the wrong box */
@media (max-width:640px){
  .howto-grid{grid-template-columns:1fr;max-width:420px;}
  .cs-body{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;}
  .cs-grid-wrap{grid-column:1 / -1;grid-row:2;}
  .cs-prev{flex-direction:row;align-items:center;gap:8px;padding:5px 8px;}
  .cs-prev .prev-cv{width:clamp(34px,calc(var(--cw)*10),52px);height:clamp(46px,calc(var(--cw)*13),70px);flex:0 0 auto;}
  .prev-stats{flex:1;}
  .prev-moves{display:none;}
}

/* ── the game's own yes/no window (never a browser popup) ── */
#modal{position:absolute;inset:0;z-index:900;display:none;align-items:center;justify-content:center;
  background:rgba(4,0,12,.72);backdrop-filter:blur(2px);padding:16px;}
#modal.on{display:flex;animation:mdIn .16s ease-out;}
@keyframes mdIn{from{opacity:0}to{opacity:1}}
.md-card{width:min(520px,100%);background:linear-gradient(170deg,rgba(32,6,64,.98),rgba(10,2,24,.99));
  border:2px solid rgba(155,48,255,.7);box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 40px rgba(106,13,173,.35);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  padding:clamp(16px,calc(var(--ch)*4),30px) clamp(16px,calc(var(--cw)*2.6),34px);
  animation:mdPop .2s cubic-bezier(.2,1.3,.4,1);}
@keyframes mdPop{from{transform:translateY(14px) scale(.96)}to{transform:none}}
.md-title{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--cw)*3),40px);color:#fff;letter-spacing:2px;
  line-height:1.05;text-align:center;}
.md-text{font-size:clamp(12px,calc(var(--cw)*1.35),17px);color:var(--v5);text-align:center;line-height:1.45;
  margin-top:clamp(8px,calc(var(--ch)*2),16px);}
.md-btns{display:flex;gap:clamp(8px,calc(var(--cw)*1.2),14px);margin-top:clamp(14px,calc(var(--ch)*3.4),26px);}
.md-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:0;
  font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.8),24px);letter-spacing:1px;color:#fff;
  padding:clamp(9px,calc(var(--ch)*2.2),15px) 10px;text-shadow:0 2px 0 rgba(0,0,0,.35);transition:filter .12s;}
.md-btn .ico{width:1.2em;height:1.2em;}
.md-btn.no{background:linear-gradient(180deg,#4b5563,#1f2937);}
.md-btn.yes{background:linear-gradient(180deg,#22c55e,#15803d);}
.md-btn.yes.coins{background:linear-gradient(180deg,#fbbf24,#b45309);color:#2b1602;text-shadow:0 1px 0 rgba(255,255,255,.3);}
.md-btn.yes.coins .ico{color:#3b2503;}
.md-btn.yes.danger{background:linear-gradient(180deg,#ef4444,#991b1b);}
.md-btn:hover{filter:brightness(1.12);}
.md-btn:focus-visible{outline:2px solid #fde68a;outline-offset:2px;}

/* ── online: the opponent dropped out, or we're finding our way back into the match ── */
#olWait{position:absolute;inset:0;z-index:880;display:none;align-items:center;justify-content:center;
  background:rgba(4,0,12,.55);padding:16px;pointer-events:none;}
#olWait.on{display:flex;animation:mdIn .16s ease-out;}
#olWait .olw-card{width:min(460px,100%);text-align:center;pointer-events:auto;
  background:linear-gradient(170deg,rgba(32,6,64,.96),rgba(10,2,24,.98));border:2px solid rgba(251,191,36,.7);
  box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 40px rgba(251,191,36,.18);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  padding:clamp(14px,calc(var(--ch)*3.6),28px) clamp(16px,calc(var(--cw)*2.6),34px);}
.olw-title{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.6),34px);color:#fde68a;letter-spacing:2px;line-height:1.05;}
.olw-num{font-family:var(--ff-px);font-size:clamp(28px,calc(var(--cw)*5),64px);color:#fff;margin-top:clamp(8px,calc(var(--ch)*2),16px);
  text-shadow:0 3px 0 rgba(0,0,0,.4);font-variant-numeric:tabular-nums;}
.olw-text{font-size:clamp(12px,calc(var(--cw)*1.3),16px);color:var(--v5);line-height:1.45;margin-top:clamp(8px,calc(var(--ch)*2),16px);}
#olwBtn{margin:clamp(12px,calc(var(--ch)*3),22px) auto 0;flex:none;min-width:50%;}

/* ── spotlight (spot.js): the winner's cinematic and the replay of their best combos ── */
#spotCv{position:absolute;left:var(--gx,0);top:var(--gy,0);width:var(--gw,100%);height:var(--gh,100%);
  z-index:870;display:none;background:#000;cursor:pointer;touch-action:none;}
#spotCv.on{display:block;animation:goFade .45s ease-out both;}
#spotCv.clear{background:transparent;}
.sp-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(10px,calc(var(--cw)*1.8),22px);align-items:center;
  border:2px solid color-mix(in srgb,var(--tc) 60%,transparent);background:rgba(10,4,22,.72);padding:clamp(8px,calc(var(--cw)*1.2),14px);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
.sp-card.own{border-color:rgba(34,197,94,.6);}
.sp-art{position:relative;display:block;padding:0;border:0;cursor:pointer;background:#000;overflow:hidden;}
.sp-art canvas{width:100%;aspect-ratio:16/9;display:block;transition:transform .25s ease;}
.sp-art:hover canvas{transform:scale(1.03);}
.sp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  width:clamp(44px,calc(var(--cw)*7),76px);aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.8);color:#fff;transition:transform .15s ease,background .15s ease;}
.sp-play .ico{width:45%;height:45%;}
.sp-art:hover .sp-play{transform:translate(-50%,-50%) scale(1.1);background:color-mix(in srgb,var(--tc) 70%,#000);}
.sp-info{display:flex;flex-direction:column;gap:clamp(8px,calc(var(--ch)*1.8),14px);min-width:0;}
.sp-name{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--cw)*2.6),34px);color:#fff;letter-spacing:1px;line-height:1.05;}
.sp-desc{font-size:clamp(11px,calc(var(--cw)*1.2),15px);color:var(--v5);line-height:1.45;}
.sp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media (max-width:700px){ .sp-card{grid-template-columns:1fr;} }

/* the fullscreen pull intro after the Glasbeni avtomat (js/pull.js) */
#pullCv{position:fixed;inset:0;width:100vw;height:100vh;z-index:9000;display:none;background:#000;cursor:pointer;touch-action:none;}
#pullCv.on{display:block;}

/* ══ LIVE (js/live.js): classes, rival, weekly teacher, daily run, finisher album ══ */
.cls-chip{--dc:#9b30ff;display:inline-flex;align-items:center;font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*2.5),17px);letter-spacing:1px;
  color:#fff;background:color-mix(in srgb,var(--dc) 30%,rgba(8,2,20,.9));border:1px solid var(--dc);border-left-width:4px;padding:.12em .5em .08em;line-height:1.1;white-space:nowrap;}
.cls-chip.big{font-size:clamp(16px,calc(var(--ch)*4.2),30px);padding:.1em .45em .05em;box-shadow:0 0 14px color-mix(in srgb,var(--dc) 55%,transparent);}
/* the class picker: department first (their colours), then the class */
#clsPick{position:absolute;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:clamp(8px,calc(var(--ch)*3),24px);
  background:rgba(4,0,10,.86);backdrop-filter:blur(3px);}
#clsPick.on{display:flex;animation:updIn .3s ease-out;}
.cp-win{width:min(100%,calc(var(--cw)*80));max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.6),14px);
  padding:clamp(12px,calc(var(--ch)*3),26px) clamp(12px,calc(var(--cw)*2.4),30px);background:linear-gradient(180deg,#1a0535,#0b0118);
  border:1px solid rgba(155,48,255,.6);box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 40px rgba(155,48,255,.25);animation:updPop .35s cubic-bezier(.2,1.3,.4,1);}
.cp-k{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.7),12px);color:#fde68a;letter-spacing:2px;text-align:center;}
.cp-title{font-family:var(--ff-hd);font-size:clamp(24px,calc(var(--ch)*7),50px);letter-spacing:3px;text-align:center;line-height:1;
  color:transparent;background:linear-gradient(180deg,#fffdf0,#f8d774 45%,#e08a13);-webkit-background-clip:text;background-clip:text;}
.cp-sub{font-family:var(--ff-ui);font-size:clamp(11px,calc(var(--ch)*2.3),15px);color:#c4b5fd;text-align:center;line-height:1.3;max-width:62ch;margin:0 auto;}
.cp-tabs{display:flex;justify-content:center;gap:0;border-bottom:2px solid rgba(155,48,255,.45);}
.cp-tab{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.6),11px);letter-spacing:1px;color:#a78bfa;cursor:pointer;
  padding:clamp(7px,calc(var(--ch)*1.6),12px) clamp(10px,calc(var(--cw)*1.8),22px);background:transparent;border:2px solid transparent;border-bottom:0;margin-bottom:-2px;}
.cp-tab:hover,.cp-tab:focus-visible{color:#fff;outline:none;}
.cp-tab.on{color:#fde68a;background:linear-gradient(180deg,rgba(155,48,255,.3),#12032a);border-color:rgba(155,48,255,.6);}
.cp-depts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,calc(var(--cw)*.8),10px);}
.cp-depts[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr));}
.cp-dept{--dc:#9b30ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:clamp(7px,calc(var(--ch)*1.7),14px) 4px;cursor:pointer;color:#fff;text-align:center;min-width:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--dc) 22%,transparent),rgba(8,2,20,.9));border:2px solid color-mix(in srgb,var(--dc) 55%,transparent);
  border-bottom:4px solid var(--dc);transition:transform .15s,box-shadow .15s;}
.cp-dept b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(13px,calc(var(--ch)*3),21px);letter-spacing:1.5px;line-height:1.05;}
.cp-dept em{font-style:normal;font-family:var(--ff-ui);font-size:clamp(10px,calc(var(--ch)*1.9),13px);color:#e9d5ff;line-height:1.1;}
.cp-dept i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.4),10px);color:#c4b5fd;}
.cp-dept:hover,.cp-dept:focus-visible,.cp-dept.on{transform:translateY(-2px);box-shadow:0 0 22px var(--dc);outline:none;}
.cp-dept.on{background:linear-gradient(180deg,color-mix(in srgb,var(--dc) 50%,transparent),rgba(8,2,20,.9));border-color:var(--dc);}
.cp-grid{--dc:#9b30ff;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,calc(var(--cw)*13),150px),1fr));gap:clamp(4px,calc(var(--cw)*.6),8px);padding:clamp(6px,calc(var(--ch)*1.4),12px);
  background:rgba(0,0,0,.3);border:1px solid color-mix(in srgb,var(--dc) 45%,transparent);}
.cp-cls{display:flex;flex-direction:column;align-items:center;gap:1px;color:#fff;cursor:pointer;padding:.35em .2em;min-width:0;
  background:color-mix(in srgb,var(--dc) 14%,rgba(8,2,20,.85));border:1px solid color-mix(in srgb,var(--dc) 50%,transparent);transition:transform .12s,background .12s;}
.cp-cls:hover,.cp-cls:focus-visible{transform:scale(1.05);background:color-mix(in srgb,var(--dc) 35%,rgba(8,2,20,.85));outline:none;}
.cp-cls b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(14px,calc(var(--ch)*3.1),22px);letter-spacing:1px;line-height:1.05;}
.cp-cls i{font-style:normal;font-family:var(--ff-ui);font-size:clamp(9px,calc(var(--ch)*1.7),12px);color:#c4b5fd;line-height:1.1;}
.cp-cls.on{background:var(--dc);color:#07050d;box-shadow:0 0 18px var(--dc);}
.cp-cls.on i{color:#1e1033;}
.cp-cls.cur{border-style:dashed;}
.cp-foot{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.cp-ok{min-width:min(100%,320px);}
.cp-ok:disabled{opacity:.5;cursor:default;}
/* the menu cards */
.mn-class,.mn-week{display:flex;flex-direction:column;gap:clamp(4px,calc(var(--ch)*1.1),9px);}
.lv-me{display:flex;align-items:center;gap:10px;}
.lv-me-t{display:flex;flex-direction:column;min-width:0;}
.lv-me-t b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(13px,calc(var(--ch)*3.2),22px);color:#fff;letter-spacing:1px;line-height:1;}
.lv-me-t i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.4),10px);color:#c4b5fd;margin-top:3px;}
.lv-top{display:flex;flex-direction:column;gap:3px;}
.lv-top-r{display:grid;grid-template-columns:1.4em auto 1fr;gap:6px;align-items:center;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.6),11px);color:#e9d5ff;}
.lv-top-r b{font-weight:400;text-align:right;color:#fde68a;}
.lv-top-r.mine{background:rgba(245,166,35,.12);}
.lv-top-r .cls-chip{font-size:clamp(10px,calc(var(--ch)*2.2),15px);}
.lv-pos{color:#a78bfa;text-align:center;}
.lv-foot{display:flex;justify-content:space-between;gap:6px;}
.lv-link{background:none;border:0;color:#a78bfa;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.45),10px);letter-spacing:1px;cursor:pointer;padding:3px 0;text-decoration:underline;text-underline-offset:3px;}
.lv-link:hover{color:#fde68a;}
.lv-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:100%;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.5),11px);letter-spacing:1px;
  padding:.7em .6em;color:#fff;cursor:pointer;background:rgba(61,0,112,.55);border:1px solid rgba(155,48,255,.6);}
.lv-btn .ico{width:1.3em;height:1.3em;flex:none;}
.lv-btn:hover{filter:brightness(1.2);}
.lv-btn.go{background:linear-gradient(90deg,#16a34a,#15803d);border-color:#86efac;animation:qPulse 1.2s ease-in-out infinite;}
.lv-btn.gold{background:linear-gradient(180deg,#fde047,#f59e0b);border-color:#fde68a;color:#1c1003;animation:qPulse 1.2s ease-in-out infinite;}
.lv-btn.red{background:linear-gradient(90deg,#b91c1c,#7f1d1d);border-color:#fca5a5;}
.lv-row{display:grid;grid-template-columns:clamp(34px,calc(var(--ch)*9),58px) minmax(0,1fr);gap:9px;align-items:center;padding:6px;
  background:rgba(0,0,0,.28);border-left:3px solid #f59e0b;}
.lv-row.rival{border-left-color:#ef4444;background:rgba(127,29,29,.18);}
.lv-port{width:100%;aspect-ratio:1;display:block;background:radial-gradient(circle at 50% 35%,#3b1d6e,#0b0418 75%);border:1px solid rgba(155,48,255,.45);}
.lv-row.rival .lv-port{border-color:#ef4444;}
.lv-mid{min-width:0;display:flex;flex-direction:column;gap:2px;}
.lv-k{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.35),10px);color:#fde68a;letter-spacing:1px;}
.lv-row.rival .lv-k{color:#fca5a5;}
.lv-n{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*3),21px);color:#fff;letter-spacing:1px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lv-s{font-family:var(--ff-ui);font-weight:600;font-size:clamp(9px,calc(var(--ch)*2),13px);color:#c4b5fd;}
.lv-row .lv-btn{margin-top:3px;}
/* the weekly teacher in the Glasbeni avtomat and in the character select */
.godd-feat{display:flex;align-items:center;gap:8px;padding:6px;margin-bottom:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 30%,transparent),rgba(8,2,20,.6));
  border:1px solid var(--tc);animation:qPulse 1.6s ease-in-out infinite;}
.godd-feat.own{animation:none;opacity:.7;}
.godd-feat canvas{width:clamp(30px,calc(var(--ch)*8),48px);aspect-ratio:1;background:radial-gradient(circle at 50% 35%,#3b1d6e,#0b0418 75%);}
.godd-feat span{display:flex;flex-direction:column;}
.godd-feat i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.3),10px);color:#fde68a;}
.godd-feat b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(13px,calc(var(--ch)*2.8),20px);color:#fff;letter-spacing:1px;}
.godd-feat em{font-style:normal;font-family:var(--ff-ui);font-weight:600;font-size:clamp(9px,calc(var(--ch)*1.9),13px);color:#c4b5fd;}
.cc.feat::after{content:'\2605 TEDEN';position:absolute;top:3px;right:3px;z-index:3;font-family:var(--ff-px);font-size:clamp(5px,calc(var(--ch)*1.1),8px);
  padding:.3em .45em;color:#1c1003;background:linear-gradient(180deg,#fde047,#f59e0b);box-shadow:0 0 8px rgba(245,166,35,.8);}
/* the finisher colour in the shop */
.sh-fcol{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:rgba(10,2,24,.7);border:1px solid rgba(155,48,255,.35);}
.sh-fcol-h{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.6),11px);color:#fde68a;letter-spacing:1px;margin-right:6px;}
.sh-fchip{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.8),19px);letter-spacing:1.5px;color:#fff;cursor:pointer;
  padding:.3em .9em;background:rgba(61,0,112,.45);border:1px solid rgba(155,48,255,.55);}
.sh-fchip .ico{width:1em;height:1em;}
.sh-fchip.prisma{background:linear-gradient(90deg,#ff4fd8,#a855f7,#22d3ee,#4ade80,#fde047);background-size:300% 100%;animation:tierFlow 3s linear infinite;color:#07050d;border-color:#fff;}
.sh-fchip.locked{filter:grayscale(1) brightness(.55);animation:none;}
.sh-fchip.on{box-shadow:0 0 0 2px #fde68a,0 0 16px rgba(245,166,35,.6);}
.sh-title.earned{border-color:#fde68a;background:linear-gradient(180deg,rgba(245,166,35,.18),rgba(10,2,24,.9));}
/* the daily run */
#sDaily,#sAlbum,#sChapters{background:linear-gradient(160deg,rgba(20,0,42,.985),rgba(6,0,14,.995));overflow-y:auto;justify-content:flex-start;padding:clamp(10px,calc(var(--ch)*3),28px) clamp(10px,calc(var(--cw)*2.4),30px);}
.dl-wrap,.al-wrap,.ch-wrap{width:min(100%,calc(var(--cw)*92));margin:clamp(6px,calc(var(--ch)*1.6),14px) auto 0;display:flex;flex-direction:column;gap:clamp(8px,calc(var(--ch)*2),16px);}
.dl-note{font-family:var(--ff-ui);font-size:clamp(12px,calc(var(--ch)*2.6),17px);color:#c4b5fd;text-align:center;padding:20px;}
/* the guest's view */
.dl-hero{display:flex;align-items:center;gap:clamp(10px,calc(var(--cw)*1.6),20px);padding:clamp(10px,calc(var(--ch)*2.2),18px);border-radius:16px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(251,191,36,.2),transparent 60%),linear-gradient(180deg,#1b0936,#0c0320);border:1px solid rgba(251,191,36,.45);}
.dl-hero-i{flex:none;width:clamp(48px,calc(var(--ch)*11),76px);height:clamp(48px,calc(var(--ch)*11),76px);border-radius:16px;display:grid;place-items:center;
  background:rgba(251,191,36,.18);border:1px solid rgba(251,191,36,.6);}
.dl-hero-i .ico{width:55%;height:55%;color:#fbbf24;}
.dl-hero-t{display:flex;flex-direction:column;gap:4px;}
.dl-hero-t b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(22px,calc(var(--ch)*6),42px);letter-spacing:2px;line-height:1;padding-top:.1em;
  background:linear-gradient(180deg,#fffbeb 10%,#fcd34d 55%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dl-hero-t span{font-family:var(--ff-ui);font-weight:500;font-size:clamp(12px,calc(var(--ch)*2.4),16px);color:#e9d5ff;line-height:1.3;}
.dl-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,calc(var(--cw)*.9),12px);}
.dl-feat{--fc:#fbbf24;display:flex;align-items:center;justify-content:center;gap:8px;padding:.6em;border-radius:12px;
  background:color-mix(in srgb,var(--fc) 13%,rgba(10,2,24,.8));border:1px solid color-mix(in srgb,var(--fc) 50%,transparent);}
.dl-feat .ico{width:1.3em;height:1.3em;color:var(--fc);flex:none;}
.dl-feat b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(13px,calc(var(--ch)*2.8),19px);letter-spacing:1px;color:#fff;}
.dl-stages.mystery .dl-stage{opacity:.85;}
.dl-q{width:min(100%,calc(var(--ch)*14));aspect-ratio:1;display:grid;place-items:center;border-radius:12px;background:#12032a;border:1px dashed rgba(196,181,253,.4);
  font-family:var(--ff-hd);font-size:clamp(28px,calc(var(--ch)*8),56px);color:rgba(196,181,253,.5);}
.dl-login{align-self:center;width:auto;min-width:min(100%,360px);}
/* today's run */
.dl-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.dl-date{display:flex;align-items:center;gap:10px;}
.dl-date-i{width:clamp(30px,calc(var(--ch)*6.5),42px);height:clamp(30px,calc(var(--ch)*6.5),42px);border-radius:10px;display:grid;place-items:center;background:rgba(167,139,250,.18);border:1px solid rgba(167,139,250,.5);}
.dl-date-i .ico{width:55%;height:55%;color:#c4b5fd;}
.dl-date b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(18px,calc(var(--ch)*4.4),32px);color:#fff;letter-spacing:2px;line-height:1;padding-top:.1em;}
.dl-chips{display:flex;gap:8px;flex-wrap:wrap;}
.dl-chip{display:inline-flex;align-items:center;gap:6px;padding:.45em .8em;border-radius:999px;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);line-height:1.6;
  color:#ddd6fe;background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.45);}
.dl-chip .ico{width:1.5em;height:1.5em;}
.dl-chip.gold{color:#fde68a;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.5);} .dl-chip.got{color:#86efac;background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.45);}
.dl-stages{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,calc(var(--cw)*1.2),16px);}
.dl-stages::before{content:'';position:absolute;left:8%;right:8%;top:50%;height:3px;background:linear-gradient(90deg,rgba(167,139,250,.1),rgba(167,139,250,.5),rgba(167,139,250,.1));z-index:0;}
.dl-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:clamp(10px,calc(var(--ch)*2),16px) 8px clamp(8px,calc(var(--ch)*1.6),12px);text-align:center;
  border-radius:16px;background:linear-gradient(180deg,#1d0a3a,#0c0320);border:1px solid rgba(155,48,255,.45);box-shadow:0 6px 18px rgba(0,0,0,.45);animation:hlIn .35s ease-out backwards;}
.dl-stage .lv-port{width:min(100%,calc(var(--ch)*14));border-radius:12px;}
.dl-stage.cur{border-color:#fde68a;box-shadow:0 0 0 2px rgba(253,230,138,.35),0 0 26px rgba(245,166,35,.5);transform:translateY(-4px);}
.dl-stage.done{opacity:.6;}
.dl-stage.done::after{content:'\2713';position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(34px,calc(var(--ch)*10),70px);color:#4ade80;
  text-shadow:0 0 18px rgba(74,222,128,.7);background:rgba(5,20,10,.35);border-radius:16px;}
.dl-num{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:clamp(20px,calc(var(--ch)*4.6),30px);height:clamp(20px,calc(var(--ch)*4.6),30px);border-radius:50%;
  display:grid;place-items:center;font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.8),19px);color:#12032a;background:linear-gradient(180deg,#e9d5ff,#a78bfa);border:2px solid #07050d;}
.dl-stage.cur .dl-num{background:linear-gradient(180deg,#fef3c7,#f59e0b);}
.dl-lv{--lc:#a78bfa;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),8.5px);line-height:1.6;padding:.2em .6em;border-radius:999px;color:var(--lc);
  background:color-mix(in srgb,var(--lc) 15%,transparent);border:1px solid color-mix(in srgb,var(--lc) 55%,transparent);}
.dl-t{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.9),20px);color:#fff;letter-spacing:1px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:.1em;}
.dl-rule{display:inline-flex;align-items:center;gap:5px;padding:.25em .6em;border-radius:999px;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.55);}
.dl-rule .ico{width:1.1em;height:1.1em;color:#fca5a5;}
.dl-rule b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(11px,calc(var(--ch)*2.3),16px);letter-spacing:1px;color:#fecaca;}
.dl-rd{font-family:var(--ff-ui);font-weight:600;font-size:clamp(9px,calc(var(--ch)*1.9),12.5px);color:#c4b5fd;line-height:1.2;}
.dl-low{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(8px,calc(var(--cw)*1.6),20px);}
.dl-me,.dl-board{padding:clamp(10px,calc(var(--ch)*2),16px);border-radius:16px;background:rgba(10,2,24,.8);border:1px solid rgba(155,48,255,.4);display:flex;flex-direction:column;gap:8px;}
.dl-me{background:radial-gradient(120% 90% at 0% 0%,rgba(251,191,36,.14),transparent 60%),rgba(10,2,24,.8);border-color:rgba(251,191,36,.4);}
.dl-best-w{display:flex;align-items:center;gap:12px;}
.dl-best-i{flex:none;width:clamp(36px,calc(var(--ch)*8),54px);height:clamp(36px,calc(var(--ch)*8),54px);border-radius:14px;display:grid;place-items:center;background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.5);}
.dl-best-i .ico{width:55%;height:55%;color:#fbbf24;}
.dl-k{display:flex;align-items:center;gap:.5em;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),11px);color:#fde68a;letter-spacing:1px;line-height:1.6;}
.dl-k .ico{width:1.4em;height:1.4em;}
.dl-best{font-family:var(--ff-hd);font-size:clamp(30px,calc(var(--ch)*8),58px);color:#fff;letter-spacing:3px;line-height:1;}
.dl-badge{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),11px);color:#1c1003;background:linear-gradient(90deg,#fde047,#f59e0b);padding:.4em .8em;border-radius:999px;align-self:flex-start;}
.dl-go{margin-top:2px;}
.dl-hint{font-family:var(--ff-ui);font-weight:500;font-size:clamp(9px,calc(var(--ch)*1.9),12.5px);color:#a78bfa;line-height:1.25;}
.dl-row{display:grid;grid-template-columns:2em minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.25);
  font-family:var(--ff-ui);font-weight:600;font-size:clamp(12px,calc(var(--ch)*2.4),16px);color:#e9d5ff;}
.dl-row.me{background:rgba(56,189,248,.18);outline:1px solid rgba(56,189,248,.5);}
.dl-row b{font-family:var(--ff-hd);font-weight:400;color:#fde68a;letter-spacing:1px;}
.dl-pos{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;font-family:var(--ff-hd);font-size:1em;color:#c4b5fd;background:rgba(167,139,250,.15);}
.dl-row.p1 .dl-pos{background:linear-gradient(180deg,#fef3c7,#f59e0b);color:#3b2204;}
.dl-row.p2 .dl-pos{background:linear-gradient(180deg,#f1f5f9,#94a3b8);color:#1e293b;}
.dl-row.p3 .dl-pos{background:linear-gradient(180deg,#fed7aa,#c2410c);color:#3b1204;}
.dl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dl-empty{font-family:var(--ff-ui);color:#a78bfa;font-size:clamp(11px,calc(var(--ch)*2.2),14px);padding:8px 0;}
@media (max-aspect-ratio:4/3){ .dl-feats{grid-template-columns:repeat(2,minmax(0,1fr));} .dl-low{grid-template-columns:1fr;} .dl-stages{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px;} .dl-stages::before{display:none;} }
/* the finisher album */
.al-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.al-count{font-family:var(--ff-hd);font-size:clamp(30px,calc(var(--ch)*8),58px);color:#fde68a;letter-spacing:3px;line-height:1;}
.al-sub{font-family:var(--ff-ui);font-size:clamp(11px,calc(var(--ch)*2.3),15px);color:#c4b5fd;}
.al-head .dq-bar{width:min(100%,420px);}
.al-sec{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.6),12px);color:#fde68a;letter-spacing:2px;margin-top:6px;}
.al-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,calc(var(--cw)*11),150px),1fr));gap:clamp(6px,calc(var(--cw)*.9),12px);}
.al-card{--tc:#9b30ff;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;cursor:pointer;color:#fff;text-align:center;
  background:rgba(12,6,24,.85);border:1px solid rgba(80,80,110,.35);transition:transform .15s,box-shadow .15s;}
.al-card.got{background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 22%,transparent),rgba(10,2,24,.92));border-color:color-mix(in srgb,var(--tc) 70%,transparent);}
.al-card.got:hover{transform:translateY(-3px);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 60%,transparent);}
.al-card .lv-port{width:72%;}
.al-t{font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--ch)*2.4),17px);letter-spacing:1px;line-height:1.05;}
.al-card:not(.got) .al-t{color:#6b7280;}
.al-w{font-family:var(--ff-px);font-size:clamp(5px,calc(var(--ch)*1.15),9px);color:#a78bfa;line-height:1.4;}
.al-x{position:absolute;top:4px;left:6px;font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*2.2),15px);color:#fde68a;}
.al-play{position:absolute;top:4px;right:6px;color:#fff;opacity:.8;}
.al-play .ico{width:1.1em;height:1.1em;}
@media (max-aspect-ratio:4/3){ .dl-stages{grid-template-columns:repeat(3,minmax(0,1fr));} .dl-low{grid-template-columns:1fr;} .cp-depts,.cp-depts[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr));} .cp-depts[data-n="5"] .cp-dept:last-child{grid-column:1/-1;} }
/* the menu with the live cards: every tile in one row, the side cards a little tighter so it all fits */
#sMenu .menu-tiles,#sMenu.tut-lock .menu-tiles,#sMenu.played .menu-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
#sMenu .mtile{height:clamp(48px,calc(var(--ch)*11.5),100px);}
#sMenu .mtile-lbl{font-size:clamp(10px,calc(var(--ch)*2.35),18px);}
#sMenu .mn-newsbtn img{height:clamp(38px,calc(var(--ch)*10),84px);}
#sMenu .mn-card{padding:clamp(7px,calc(var(--ch)*2),16px) clamp(9px,calc(var(--cw)*1.4),18px);}
#sMenu .mn-side{gap:clamp(6px,calc(var(--ch)*1.8),16px);}
#sMenu .mn-daily-body{gap:clamp(4px,calc(var(--ch)*1.1),9px);margin-top:6px;}
#sMenu .dq{padding:clamp(5px,calc(var(--ch)*1.4),11px) clamp(8px,calc(var(--cw)*1),12px);}
#sMenu .dq-t{font-size:clamp(10px,calc(var(--ch)*2.5),17px);}
#sMenu .mn-ref{margin-top:6px;}
.lv-row{grid-template-columns:clamp(30px,calc(var(--ch)*7.5),50px) minmax(0,1fr);padding:4px 6px;gap:8px;}
.lv-row.rival .lv-mid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:center;}
.lv-row.rival .lv-k{grid-column:1 / -1;}
.lv-row.rival .lv-btn{width:auto;margin:0;padding:.6em .7em;}
#sMenu .mtile-lbl{font-size:clamp(9px,calc(var(--ch)*1.8),15px);letter-spacing:.5px;text-overflow:clip;}
#sMenu .mtile-icon .ico{width:clamp(16px,calc(var(--ch)*4.2),30px);height:clamp(16px,calc(var(--ch)*4.2),30px);}
.lv-mid .dq-foot span,.lv-k,.lv-me-t i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.lv-mid .dq-foot b{white-space:nowrap;flex:none;}
/* short screens (phones on their side): the side columns lose their extras and may scroll */
#sMenu .mn-side{max-height:100%;overflow-y:auto;scrollbar-width:none;}
#sMenu .mn-side::-webkit-scrollbar{display:none;}
@media (max-height:520px){
  #sMenu .mn-newsbtn img{display:none;}
  #sMenu .dq-t{-webkit-line-clamp:1;}
  .lv-s{display:none;}
  .lv-top{display:none;}
  #sMenu .mtile-lbl{display:none;}                    /* icon tiles: the labels don't fit on a phone */
  #sMenu .mtile{height:clamp(34px,calc(var(--ch)*9),60px);}
  #sMenu .mn-daily-body > .dq-foot{display:none;}      /* the "all three = bonus" line */
  .lv-mid .dq-bar{display:none;}
}

/* ══ COLLECT: shards, login streak, mastery rewards, match history (js/collect.js) ══ */
.shd{display:inline-flex;align-items:center;gap:.25em;color:#67e8f9;font-family:var(--ff-hd);letter-spacing:1px;}
.shd .ico,.godd-dup .ico,.sh-fprice .ico,.sh-buy.shard .ico,.sh-face-shd .ico{color:inherit;}
.shd .ico{width:1em;height:1em;}
/* the login bonus chip and dialog */
.stk-chip{display:inline-flex;align-items:center;gap:5px;color:#fdba74 !important;border-color:rgba(249,115,22,.6) !important;background:rgba(124,45,18,.35) !important;}
.stk-chip .ico{width:1.15em;height:1.15em;}
.stk-chip.ready{color:#fff7ed !important;background:linear-gradient(180deg,#f97316,#b45309) !important;border-color:#fde68a !important;animation:stkPulse 1.4s ease-in-out infinite;}
@keyframes stkPulse{50%{box-shadow:0 0 18px rgba(249,115,22,.85);transform:scale(1.05);}}
#stkPop{position:absolute;inset:0;z-index:121;display:none;align-items:center;justify-content:center;padding:clamp(8px,calc(var(--ch)*3),24px);
  background:rgba(4,0,10,.82);backdrop-filter:blur(3px);}
#stkPop.on{display:flex;animation:updIn .3s ease-out;}
.sk-win{width:min(100%,calc(var(--cw)*76));max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.8),14px);
  padding:clamp(12px,calc(var(--ch)*3),26px) clamp(12px,calc(var(--cw)*2.4),30px);background:linear-gradient(180deg,#2a0d05,#12020a 60%,#0b0118);
  border:1px solid rgba(249,115,22,.65);box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 40px rgba(249,115,22,.25);animation:updPop .35s cubic-bezier(.2,1.3,.4,1);}
.sk-k{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.7),12px);color:#fdba74;letter-spacing:2px;text-align:center;}
.sk-title{font-family:var(--ff-hd);font-size:clamp(26px,calc(var(--ch)*8),56px);letter-spacing:3px;text-align:center;line-height:1;
  color:transparent;background:linear-gradient(180deg,#fffdf0,#fdba74 45%,#ea580c);-webkit-background-clip:text;background-clip:text;}
.sk-sub{font-family:var(--ff-ui);font-size:clamp(11px,calc(var(--ch)*2.3),15px);color:#fed7aa;text-align:center;line-height:1.3;max-width:62ch;margin:0 auto;opacity:.9;}
.sk-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.5fr);gap:clamp(4px,calc(var(--cw)*.7),9px);}
.sk-day{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,calc(var(--ch)*.6),5px);padding:clamp(6px,calc(var(--ch)*1.4),11px) 2px;
  background:rgba(40,10,5,.8);border:1px solid rgba(249,115,22,.3);animation:goUp .35s ease-out backwards;min-width:0;}
.sk-day i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.25),9px);color:#fdba74;letter-spacing:1px;white-space:nowrap;}
.sk-day .sk-ic{flex:none;width:clamp(22px,calc(var(--ch)*6.5),42px);height:clamp(22px,calc(var(--ch)*6.5),42px);display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fde68a,#b45309);color:#3b1d02;}
.sk-day .sk-ic .ico{width:60%;height:60%;}
.sk-day b{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--ch)*4),28px);color:#fff;font-weight:normal;line-height:1;}
.sk-day em{font-style:normal;font-family:var(--ff-px);font-size:clamp(5px,calc(var(--ch)*1.1),8px);color:#67e8f9;text-align:center;}
.sk-day.big{background:linear-gradient(180deg,rgba(124,45,18,.8),rgba(40,10,5,.9));border-color:#fde68a;}
.sk-day.big .sk-ic{background:radial-gradient(circle at 40% 35%,#a5f3fc,#0e7490);color:#042f2e;}
.sk-day.done{opacity:.55;}
.sk-day.done .sk-ic{background:radial-gradient(circle at 40% 35%,#86efac,#15803d);color:#052e16;}
.sk-day.cur{opacity:1;border-color:#fde68a;box-shadow:0 0 0 2px #f97316,0 0 22px rgba(249,115,22,.7);animation:goUp .35s ease-out backwards,stkDay 1.2s ease-in-out .4s infinite;}
@keyframes stkDay{50%{transform:translateY(-4px);}}
.sk-day.pop{animation:unlockPop .45s cubic-bezier(.2,1.5,.4,1);opacity:1;}
.sk-foot{display:flex;justify-content:center;}
.sk-go{min-width:min(100%,340px);justify-content:center;}
/* shards in the shop */
.sh-face{position:relative;}
.sh-face-shd{position:absolute;top:3px;right:3px;font-style:normal;font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*2.2),15px);letter-spacing:.5px;
  color:#a5f3fc;background:rgba(8,47,73,.85);border:1px solid rgba(103,232,249,.55);padding:0 .35em;line-height:1.3;}
.sh-shards{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:8px 12px;
  background:linear-gradient(90deg,rgba(8,47,73,.75),rgba(10,2,24,.7));border:1px solid rgba(103,232,249,.4);}
.sh-shards-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.sh-shards-l .shd{font-size:clamp(18px,calc(var(--ch)*4.4),30px);}
.sh-shards-l > span:last-child{font-family:var(--ff-ui);font-size:clamp(10px,calc(var(--ch)*2),14px);color:#bae6fd;opacity:.85;}
.sh-sell{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.8),19px);letter-spacing:1px;
  color:#2b1602;padding:.3em .9em;border:0;background:linear-gradient(180deg,#fbbf24,#b45309);}
.sh-sell .ico{width:1.1em;height:1.1em;}
.sh-sell:disabled{filter:grayscale(1);opacity:.5;cursor:default;}
.sh-buy.shard{background:linear-gradient(180deg,#22d3ee,#0e7490);color:#042f2e;text-shadow:0 1px 0 rgba(255,255,255,.3);border-top-color:rgba(0,0,0,.25);}
.sh-buy.shard .ico{color:#083344;}
.sh-fprice{display:inline-flex;align-items:center;gap:3px;color:#a5f3fc;font-size:.85em;margin-left:4px;}
.sh-fchip.gold{background:linear-gradient(180deg,#fde68a,#d97706);color:#3b1d02;border-color:#fde68a;}
.sh-fchip.neon{background:linear-gradient(90deg,#22d3ee,#e879f9);color:#07050d;border-color:#a5f3fc;box-shadow:0 0 12px rgba(34,211,238,.45);}
.sh-fchip.shadow{background:linear-gradient(180deg,#374151,#030712);color:#e5e7eb;border-color:#6b7280;}
.sh-fchip.meister{background:linear-gradient(90deg,#fffbeb,#fde68a,#fffbeb);background-size:200% 100%;animation:tierFlow 2.4s linear infinite;color:#422006;border-color:#fff;}
.sh-fchip.locked.gold,.sh-fchip.locked.neon,.sh-fchip.locked.shadow{filter:saturate(.45) brightness(.75);}
.sh-fchip.locked.gold .sh-fprice,.sh-fchip.locked.neon .sh-fprice,.sh-fchip.locked.shadow .sh-fprice{color:#ecfeff;}
/* the gacha: the duplicate row, the free spin */
.godd.dup{border-top:1px dashed rgba(103,232,249,.35);padding-top:4px;margin-top:2px;}
.godd-dup{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.3),11px);color:#67e8f9;letter-spacing:1px;}
.godd-dup .ico{width:1.2em;height:1.2em;}
.godd.dup .godd-o{color:#67e8f9;font-size:clamp(10px,calc(var(--ch)*1.9),14px);}
.gacha-spin.free{background:linear-gradient(180deg,rgba(34,211,238,.4),rgba(14,116,144,.45));border-color:#67e8f9;animation:freeGlow 1.2s ease-in-out infinite;}
.gacha-spin.free .mbtn-main{color:#ecfeff;}
@keyframes freeGlow{50%{box-shadow:0 0 30px rgba(34,211,238,.75)}}
/* mastery rewards */
.mr-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,calc(var(--cw)*.8),10px);margin-bottom:clamp(8px,calc(var(--ch)*2),14px);}
.mr-step{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:clamp(6px,calc(var(--ch)*1.4),10px) 4px;
  background:linear-gradient(180deg,rgba(61,0,112,.55),rgba(10,2,24,.85));border:1px solid rgba(155,48,255,.4);min-width:0;}
.mr-i{position:relative;flex:none;width:clamp(28px,calc(var(--ch)*7),46px);height:clamp(28px,calc(var(--ch)*7),46px);display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fde68a,#b45309);color:#3b1d02;}
.mr-i .ico{width:55%;height:55%;}
.mr-i .ico,.mr-pips i .ico,.sk-ic .ico{color:inherit;}
.mr-i b{position:absolute;right:-6px;bottom:-4px;font-family:var(--ff-hd);font-weight:normal;font-size:clamp(12px,calc(var(--ch)*2.6),17px);
  color:#fff;background:#6d28d9;border:1px solid #c4b5fd;min-width:1.4em;line-height:1.35;}
.mr-n{font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--ch)*2.5),17px);letter-spacing:1px;color:#fff;line-height:1.05;}
.mr-d{font-family:var(--ff-ui);font-size:clamp(9px,calc(var(--ch)*1.7),12px);color:#c4b5fd;line-height:1.2;}
.mr-pips{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap;}
.mr-pips i{flex:none;width:clamp(16px,calc(var(--ch)*3.4),22px);height:clamp(16px,calc(var(--ch)*3.4),22px);display:grid;place-items:center;border-radius:50%;
  background:rgba(61,0,112,.6);border:1px solid rgba(155,48,255,.45);color:rgba(196,181,253,.45);}
.mr-pips i .ico{width:62%;height:62%;}
.mr-pips i.on{background:radial-gradient(circle at 40% 35%,#fde68a,#b45309);border-color:#fde68a;color:#3b1d02;}
.mr-pips span{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);color:#fde68a;margin-left:4px;letter-spacing:.5px;}
/* the victory line and the shining name */
.go-quote{position:absolute;top:6%;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:2;max-width:92%;display:none;
  font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.6),24px);letter-spacing:1px;color:#1a0533;background:#fffbeb;
  padding:.3em .8em;border:2px solid #07050d;box-shadow:4px 4px 0 var(--wc,#fde68a);white-space:nowrap;text-overflow:ellipsis;}
.go-quote.on{display:block;animation:quoteIn .45s cubic-bezier(.2,1.5,.4,1) .9s backwards;}
.go-quote::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fffbeb;border-right:2px solid #07050d;border-bottom:2px solid #07050d;
  transform:translateX(-50%) rotate(45deg);}
@keyframes quoteIn{from{transform:translateX(-50%) scale(0) rotate(-10deg);opacity:0}to{transform:translateX(-50%) rotate(-2deg);opacity:1}}
.mst10{color:transparent !important;background:linear-gradient(100deg,#fde68a 20%,#fff 35%,#f59e0b 50%,#fde68a 65%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;animation:mstShine 2.4s linear infinite;filter:drop-shadow(0 0 6px rgba(253,224,71,.55));}
@keyframes mstShine{to{background-position:-250% 0;}}
body.nofx .mst10,body.nofx .stk-chip.ready,body.nofx .sk-day.cur{animation:none;}
/* the match history on the profile card */
.mh-box{margin-top:clamp(8px,calc(var(--ch)*1.8),14px);display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.4),10px);}
.mh-form{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.mh-form i{font-style:normal;flex:none;width:clamp(20px,calc(var(--ch)*4.4),28px);height:clamp(20px,calc(var(--ch)*4.4),28px);display:grid;place-items:center;
  font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.8),18px);color:#fff;}
.mh-form i.w{background:linear-gradient(180deg,#22c55e,#15803d);}
.mh-form i.l{background:linear-gradient(180deg,#ef4444,#991b1b);}
.mh-run{margin-left:auto;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);color:#fca5a5;letter-spacing:1px;}
.mh-run.w{color:#86efac;}
.mh-list{display:flex;flex-direction:column;gap:5px;}
.mh-row{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;align-items:center;gap:clamp(6px,calc(var(--cw)*.9),12px);
  padding:5px clamp(6px,calc(var(--cw)*1),12px);background:linear-gradient(90deg,rgba(22,101,52,.35),rgba(10,2,24,.85) 45%);
  border-left:4px solid #22c55e;animation:goUp .3s ease-out backwards;}
.mh-row.l{background:linear-gradient(90deg,rgba(153,27,27,.35),rgba(10,2,24,.85) 45%);border-left-color:#ef4444;}
.mh-row .lv-port{width:clamp(30px,calc(var(--ch)*7),44px);}
.mh-vs{font-family:var(--ff-hd);font-size:clamp(11px,calc(var(--ch)*2.2),15px);color:var(--v5);}
.mh-mid{min-width:0;display:flex;flex-direction:column;}
.mh-mid b{font-family:var(--ff-hd);font-weight:normal;font-size:clamp(14px,calc(var(--ch)*3),20px);color:#fff;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mh-mid i{font-style:normal;font-family:var(--ff-ui);font-size:clamp(10px,calc(var(--ch)*2),13px);color:#c4b5fd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mh-res{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.mh-tag{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);letter-spacing:1px;color:#86efac;}
.mh-row.l .mh-tag{color:#fca5a5;}
.mh-coins{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff-hd);font-size:clamp(12px,calc(var(--ch)*2.4),16px);color:#fde68a;}
.mh-coins .ico{width:1em;height:1em;}
@media (max-width:640px){
  .mr-d{display:none;}
  .sk-days{grid-template-columns:repeat(4,minmax(0,1fr));}
  .mh-row{grid-template-columns:auto auto auto minmax(0,1fr);}
  .mh-res{grid-column:1 / -1;flex-direction:row;justify-content:space-between;}
}
@media (max-height:520px){
  .sk-win{gap:6px;padding:10px 14px;}
  .sk-sub{display:none;}
  .mr-d{display:none;}
}

/* ══ ARENA: banter, finisher prompts, the hazards switch, album extras (js/arena.js) ══ */
/* the two lines before round 1 */
.vs-say{position:absolute;z-index:7;max-width:min(42%,calc(var(--cw)*36));padding:.4em .8em .45em;background:#fffbeb;color:#1a0533;
  font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--cw)*1.9),30px);letter-spacing:1px;line-height:1.1;border:3px solid #07050d;
  box-shadow:5px 5px 0 rgba(0,0,0,.45);opacity:0;pointer-events:none;}
.vs-say.l{left:5%;top:8%;transform-origin:15% 100%;}
.vs-say.r{right:5%;top:20%;transform-origin:85% 100%;}
.vs-say::after{content:"";position:absolute;bottom:-12px;width:16px;height:16px;background:#fffbeb;border-right:3px solid #07050d;border-bottom:3px solid #07050d;transform:rotate(45deg);}
.vs-say.l::after{left:22%;} .vs-say.r::after{right:22%;}
.vs-say.on.l{animation:sayIn .35s 1s cubic-bezier(.2,1.5,.4,1) forwards;}
.vs-say.on.r{animation:sayIn .35s 2s cubic-bezier(.2,1.5,.4,1) forwards;}
.vs-say.new::before{content:"NOV DIALOG!";position:absolute;top:-1.6em;right:0;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--cw)*.75),11px);color:#fde047;
  letter-spacing:1px;text-shadow:1px 1px 0 #000;}
@keyframes sayIn{from{opacity:0;transform:scale(.3) rotate(-6deg)}to{opacity:1;transform:none}}
body.nofx .vs-say.on{animation-duration:.01s;}
/* the finisher prompts: taunt for the winner, the counter for the loser */
#fHUD.finmode > #finPrompt{opacity:1;}
#finPrompt{position:absolute;left:0;right:0;bottom:clamp(44px,15%,110px);display:flex;padding:0 6%;pointer-events:none;z-index:30;}
.fp{pointer-events:auto;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5em;font-family:var(--ff-hd);
  font-size:clamp(16px,calc(var(--cw)*2),30px);letter-spacing:1px;color:#fff;padding:.3em .8em;background:rgba(10,2,24,.88);border:2px solid;
  animation:fpIn .25s cubic-bezier(.2,1.5,.4,1);order:2;margin-left:auto;}
.fp.left{order:0;margin-left:0;margin-right:auto;}
.fp[hidden]{display:none;}
.fp > *{position:relative;}
.fp i{font-style:normal;font-family:var(--ff-px);font-size:.35em;opacity:.8;}
.fp-taunt{border-color:#f472b6;cursor:pointer;touch-action:manipulation;}
.fp-taunt::before{content:"";position:absolute;inset:0;width:calc(var(--k,0)*100%);background:rgba(244,114,182,.45);}
.fp-tap{font-family:var(--ff-px);font-size:.4em;color:#f9a8d4;}
.fp-qte{border-color:#38bdf8;box-shadow:0 0 22px rgba(56,189,248,.55);animation:fpIn .25s cubic-bezier(.2,1.5,.4,1),fpPulse .5s ease-in-out infinite alternate;}
.fp-qte > span{color:#7dd3fc;font-size:1.2em;}
.fp-bar{position:absolute !important;left:0;bottom:0;height:4px;width:calc(var(--k,1)*100%);background:#38bdf8;}
.fp-qte.ok{border-color:#22c55e;box-shadow:0 0 22px rgba(34,197,94,.6);animation:none;} .fp-qte.ok > span{color:#86efac;}
.fp-qte.miss{border-color:#64748b;box-shadow:none;animation:none;opacity:.8;} .fp-qte.miss > span{color:#cbd5e1;font-size:1em;}
@keyframes fpIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes fpPulse{to{transform:scale(1.06);}}
/* the map screen: hazards on / off */
.map-hz{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6em 1em;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*1),12px);
  color:#c4b5fd;letter-spacing:1px;}
.mh-l{color:#fde68a;display:inline-flex;align-items:center;gap:.4em;}
.mh-l .ico{width:1.3em;height:1.3em;color:#fb923c;}
.mh-who{color:#fff;opacity:.8;}
.mh-seg{display:inline-flex;}
.mh-b{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--cw)*1.7),22px);letter-spacing:1.5px;padding:.15em 1em;cursor:pointer;
  background:rgba(61,0,112,.45);border:1px solid rgba(155,48,255,.55);color:#c4b5fd;}
.mh-b + .mh-b{border-left:0;}
.mh-b.on{background:linear-gradient(180deg,#fde68a,#f59e0b);color:#1a0533;border-color:#fde68a;}
.mh-b:disabled{cursor:default;opacity:.6;}
.mh-d{font-family:var(--ff-ui);font-size:clamp(10px,calc(var(--cw)*1.05),14px);letter-spacing:0;opacity:.65;}
.mr-hz{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*1),13px);letter-spacing:2px;color:#94a3b8;margin-top:.5em;}
.mr-hz.on{color:#fb923c;}
/* the album: the arenas a finisher was seen in, the humiliations, the dialogues */
.al-st{display:flex;gap:3px;justify-content:center;margin-top:4px;}
.al-st i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14);}
.al-st i.on{background:var(--sc);box-shadow:0 0 6px var(--sc);}
.bt-list{display:flex;flex-direction:column;gap:6px;}
.bt-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;
  background:rgba(10,2,24,.7);border:1px solid rgba(155,48,255,.3);}
.bt-row.cat{grid-template-columns:minmax(0,1fr);}
.bt-row.got{border-color:rgba(253,224,71,.45);}
.bt-row:not(.got){opacity:.6;}
.bt-row .lv-port{width:clamp(30px,calc(var(--ch)*7),44px);}
.bt-mid{min-width:0;display:flex;flex-direction:column;gap:2px;}
.bt-mid b{font-family:var(--ff-hd);font-weight:normal;font-size:clamp(14px,calc(var(--ch)*3),20px);letter-spacing:1px;color:#fff;}
.bt-mid i{font-style:italic;font-family:var(--ff-ui);font-size:clamp(11px,calc(var(--ch)*2.2),14px);color:#c4b5fd;}
/* the spotlight's endings in the shop */
.sp-ends{margin-top:10px;}
.sp-ends-note{font-family:var(--ff-ui);font-size:12px;color:#c4b5fd;opacity:.7;}
@media (max-height:520px){
  .map-hz .mh-d{display:none;}
  #finPrompt{bottom:clamp(30px,12%,60px);}
}

/* ══ SOCIAL: tag-team, ranked, friends, emotes, sharing (js/social.js) ══ */
/* the TAG-TEAM switch and the partner under each preview */
.cs-tag{display:inline-flex;align-items:center;gap:.4em;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.6),11px);letter-spacing:1px;cursor:pointer;
  color:#c4b5fd;background:rgba(61,0,112,.45);border:1px solid rgba(155,48,255,.55);padding:.5em .9em;}
.cs-tag .ico{width:1.3em;height:1.3em;}
.cs-tag b{font-weight:normal;color:#fff;}
.cs-tag.on{background:linear-gradient(180deg,#f59e0b,#b45309);color:#fff7ed;border-color:#fde68a;}
.cs-tag:disabled{cursor:default;opacity:.85;}
.cs-tag[hidden]{display:none;}
.cs-partner{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.3),10px);
  color:#fde68a;letter-spacing:1px;}
.cs-partner canvas{width:clamp(24px,calc(var(--ch)*5),36px);height:clamp(24px,calc(var(--ch)*5),36px);background:rgba(4,0,12,.5);border:1px solid rgba(253,230,138,.5);}
.cs-partner[hidden]{display:none;}
.cc.p1b{border:2px dashed var(--p1c);background:rgba(56,189,248,.08);}
.cc.p2b{border:2px dashed var(--p2c);background:rgba(251,113,133,.08);}
/* the partner's bar in the fight */
.tag-mini{position:absolute;top:clamp(62px,calc(var(--ch)*15.5),120px);display:flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;
  background:rgba(4,0,12,.72);border:1px solid rgba(155,48,255,.45);font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);color:#c4b5fd;}
.tag-mini.s1{left:clamp(8px,calc(var(--cw)*1.2),16px);}
.tag-mini.s2{right:clamp(8px,calc(var(--cw)*1.2),16px);flex-direction:row-reverse;padding:3px 3px 3px 8px;}
.tag-mini canvas{width:clamp(22px,calc(var(--ch)*5.5),34px);height:clamp(22px,calc(var(--ch)*5.5),34px);}
.tm-bar{width:clamp(50px,calc(var(--cw)*8),110px);height:6px;background:rgba(255,255,255,.12);position:relative;}
.tm-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#fde047,#f59e0b);}
.tag-mini.s2 .tm-bar i{left:auto;right:0;}
.tm-cd{font-weight:normal;color:#64748b;border:1px solid #475569;padding:0 .4em;}
.tag-mini.ready .tm-cd{color:#07050d;background:#fde047;border-color:#fde047;animation:stkPulse 1.2s ease-in-out infinite;}
.tag-mini.out{opacity:.45;} .tag-mini.out canvas{filter:grayscale(1);}
.tag-mini.out .tm-cd{display:none;}
.tag-mini[hidden]{display:none;}
/* ranked grades */
.grade{display:inline-flex;align-items:center;gap:.35em;font-family:var(--ff-hd);letter-spacing:1px;color:#fff;}
.grade b{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .2em;box-sizing:border-box;font-style:italic;font-weight:700;font-family:Georgia,"Times New Roman",serif;letter-spacing:0;background:var(--gc);color:#07050d;border-radius:4px;font-size:1.1em;}
.grade i{font-style:normal;color:var(--gc);}
.grade.sm{font-size:.85em;} .grade.sm i{display:none;}
/* the online screen: switches, ranked, friends */
.ol-social{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(8px,calc(var(--cw)*1.2),16px);width:100%;align-items:start;}
.ol-opts{display:flex;}
.ol-tag{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;color:#fff;padding:clamp(8px,calc(var(--ch)*1.6),12px);border-radius:14px;
  background:rgba(10,2,24,.7);border:1px solid rgba(155,48,255,.4);transition:border-color .15s,background .15s;}
.ol-tag:hover,.ol-tag:focus-visible{border-color:#c084fc;outline:none;}
.ol-tag.on{background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(10,2,24,.7));border-color:rgba(245,158,11,.7);}
.ol-tag:disabled{opacity:.6;cursor:default;}
.ol-tag-i{flex:none;width:clamp(30px,calc(var(--ch)*6.5),42px);height:clamp(30px,calc(var(--ch)*6.5),42px);border-radius:10px;display:grid;place-items:center;background:rgba(245,158,11,.15);}
.ol-tag-i .ico{width:55%;height:55%;color:#fbbf24;}
.ol-tag-t{display:flex;flex-direction:column;flex:1;min-width:0;}
.ol-tag-t b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(15px,calc(var(--ch)*3.2),21px);letter-spacing:1.5px;line-height:1;padding-top:.1em;}
.ol-tag-t span{font-family:var(--ff-ui);font-weight:500;font-size:clamp(10px,calc(var(--ch)*1.8),13px);color:#c4b5fd;}
.ol-sw{flex:none;width:44px;height:24px;border-radius:12px;background:#3b2a55;position:relative;transition:background .15s;}
.ol-sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#e9d5ff;transition:transform .18s;}
.ol-tag.on .ol-sw{background:#f59e0b;} .ol-tag.on .ol-sw i{transform:translateX(20px);background:#fff;}
.ol-ranked{min-height:0;}
.rk-info{display:flex;flex-direction:column;gap:5px;flex:1;}
.rk-me{display:flex;align-items:center;justify-content:space-between;font-size:clamp(18px,calc(var(--ch)*4),28px);}
.rk-me > b{font-family:var(--ff-hd);font-weight:normal;color:#fff;}
.rk-s{font-family:var(--ff-ui);font-weight:500;font-size:clamp(11px,calc(var(--ch)*2),14px);color:#d8ccf5;line-height:1.3;}
.ol-ranked .dq-bar{border-radius:4px;overflow:hidden;border:0;background:rgba(255,255,255,.1);}
.ol-ranked .dq-bar i{background:linear-gradient(90deg,#f59e0b,#fde68a);}
.ol-friends{grid-row:span 2;display:flex;flex-direction:column;gap:6px;padding:clamp(8px,calc(var(--ch)*1.6),12px);border-radius:14px;background:rgba(10,2,24,.7);
  border:1px solid rgba(155,48,255,.4);max-height:clamp(160px,calc(var(--ch)*40),320px);overflow-y:auto;}
.fr-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.5),11px);color:#fde68a;letter-spacing:1px;line-height:1.6;}
.fr-head span{display:inline-flex;align-items:center;gap:.4em;}
.fr-head em{font-style:normal;color:#86efac;}
.fr-note{font-family:var(--ff-ui);font-weight:500;font-size:clamp(11px,calc(var(--ch)*2.1),14px);color:#c4b5fd;}
.fr-add{display:flex;gap:6px;}
.fr-add input{flex:1;min-width:0;font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*2.8),18px);letter-spacing:1px;color:#fff;background:rgba(4,0,12,.8);
  border:1px solid rgba(155,48,255,.5);border-radius:10px;padding:.3em .6em;outline:none;}
.fr-add input:focus{border-color:#c084fc;}
.fr-btn{font-family:var(--ff-hd);font-size:clamp(13px,calc(var(--ch)*2.5),17px);letter-spacing:1px;color:#fff;background:rgba(61,0,112,.6);border:1px solid rgba(155,48,255,.6);
  padding:.2em .8em;cursor:pointer;border-radius:999px;}
.fr-btn:hover,.fr-btn:focus-visible{background:rgba(106,13,173,.8);outline:none;}
.fr-btn.go{background:linear-gradient(180deg,#22c55e,#15803d);border-color:#86efac;}
.fr-list{display:flex;flex-direction:column;gap:4px;}
.fr-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:rgba(4,0,12,.5);border-radius:10px;}
.fr-row.incoming{border-left:3px solid #fde047;}
.fr-dot{width:9px;height:9px;border-radius:50%;background:#475569;flex:none;}
.fr-row.on .fr-dot{background:#22c55e;box-shadow:0 0 6px #22c55e;}
.fr-n{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*2.8),19px);letter-spacing:.5px;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-acts{margin-left:auto;display:flex;align-items:center;gap:5px;}
.fr-wait{font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);color:#64748b;}
.fr-x{background:none;border:0;color:#94a3b8;cursor:pointer;padding:2px;}
.fr-x .ico{width:14px;height:14px;}
@media (max-aspect-ratio:4/3){ .ol-grid,.ol-social{grid-template-columns:1fr;} .ol-friends{grid-row:auto;} }
@media (max-width:720px){ .ol-social{grid-template-columns:1fr;} }
/* the result screen: ranked line, share buttons */
.go-rank{font-family:var(--ff-px);font-size:clamp(8px,calc(var(--cw)*.9),12px);color:#c4b5fd;letter-spacing:1px;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5em;}
.go-rank b.up{color:#86efac;font-weight:normal;} .go-rank b.down{color:#fca5a5;font-weight:normal;}
.go-rank[hidden]{display:none;}
.go-share{position:absolute;top:8px;right:8px;z-index:3;display:flex;flex-direction:column;gap:6px;}
.gs-btn{display:inline-flex;align-items:center;gap:.4em;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--cw)*.75),10px);letter-spacing:1px;color:#fff;cursor:pointer;
  background:rgba(4,0,12,.75);border:1px solid rgba(253,230,138,.6);padding:.55em .8em;}
.gs-btn .ico{width:1.3em;height:1.3em;color:#fde68a;}
.gs-btn:hover{background:rgba(61,0,112,.8);}
.g-share{width:100%;justify-content:center;margin-top:6px;}
.g-share[hidden]{display:none;}
/* emotes */
.emo-btn{position:absolute;left:50%;top:clamp(84px,calc(var(--ch)*18),140px);transform:translateX(-50%);pointer-events:auto;z-index:31;
  width:clamp(30px,calc(var(--ch)*7),44px);height:clamp(30px,calc(var(--ch)*7),44px);display:grid;place-items:center;border-radius:50%;
  background:rgba(4,0,12,.7);border:1px solid rgba(155,48,255,.6);color:#c4b5fd;cursor:pointer;}
.emo-btn .ico{width:55%;height:55%;}
.emo-btn[hidden]{display:none;}
.emo-menu{position:absolute;left:50%;top:clamp(120px,calc(var(--ch)*26),190px);transform:translateX(-50%);pointer-events:auto;z-index:31;display:flex;flex-direction:column;gap:4px;}
.emo-menu[hidden]{display:none;}
.emo-it{font-family:var(--ff-hd);font-size:clamp(14px,calc(var(--ch)*3),20px);letter-spacing:1px;color:#1a0533;background:#fffbeb;border:2px solid #07050d;padding:.2em .8em;cursor:pointer;text-align:left;}
/* recording a K.O. clip: the replay shows, the result waits */
body.clip-rec #sOver{visibility:hidden;}
body.clip-rec::after{content:"● SNEMAM";position:fixed;top:12px;right:14px;z-index:999;font-family:var(--ff-px);font-size:11px;color:#fff;background:#b91c1c;padding:.5em .8em;
  letter-spacing:1px;animation:blink 1s steps(2) infinite;}

/* ══ SCHULJAHRE (story.js): five chapters, comic panels, seasonal events ══ */
.ch-wrap{width:min(100%,calc(var(--cw)*94));margin:clamp(6px,calc(var(--ch)*1.6),14px) auto 0;display:flex;flex-direction:column;gap:clamp(8px,calc(var(--ch)*2),16px);}
.ch-sub{font-family:var(--ff-ui);font-size:clamp(12px,calc(var(--ch)*2.4),16px);color:#c4b5fd;text-align:center;}
.ch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,calc(var(--cw)*1.2),16px);}
.ch-card{--cc:#9b30ff;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(8px,calc(var(--cw)*1),12px);row-gap:6px;
  padding:clamp(8px,calc(var(--ch)*1.8),14px);border-radius:16px;border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.45);
  background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--cc) 26%,transparent),transparent 60%),linear-gradient(180deg,#1b0936,#0c0320);animation:hlIn .35s ease-out backwards;}
.ch-card .lv-port{grid-row:1 / 3;width:clamp(48px,calc(var(--ch)*12),88px);height:auto;border-radius:12px;border:2px solid var(--cc);}
.ch-card.locked{filter:grayscale(.85) brightness(.6);box-shadow:none;}
.ch-card.cur{animation:qPulse 1.6s ease-in-out infinite;}
.ch-card.done{border-color:rgba(74,222,128,.6);}
.ch-tx{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;gap:3px;min-width:0;}
.ch-tx i{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.3),9px);color:var(--cc);letter-spacing:1px;line-height:1.6;}
.ch-tx b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(15px,calc(var(--ch)*3.2),24px);color:#fff;letter-spacing:1px;line-height:1.05;overflow-wrap:anywhere;padding-top:.1em;}
.ch-tx span{font-family:var(--ff-ui);font-weight:500;font-size:clamp(10px,calc(var(--ch)*1.8),13px);color:#c4b5fd;line-height:1.25;}
.ch-bar{height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.12);margin-top:4px;}
.ch-bar i{display:block;height:100%;background:var(--cc);}
.ch-stamp{position:absolute;top:-8px;right:-8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#16a34a;color:#fff;box-shadow:0 0 10px #16a34a;border:2px solid #07050d;}
.ch-stamp .ico{width:16px;height:16px;}
.ch-card .lv-btn{grid-column:1 / -1;margin-top:auto;border-radius:10px;}
.ch-card .lv-btn.go{background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 60%,#fff),var(--cc));color:#12032a;border-color:transparent;}
@media (max-aspect-ratio:4/3){ .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:420px){ .ch-grid{grid-template-columns:minmax(0,1fr);} .ch-card{flex-direction:row;text-align:left;flex-wrap:wrap;} .ch-card .lv-btn{width:100%;} }
#panelCv{position:fixed;inset:0;width:100vw;height:100vh;z-index:9500;display:none;cursor:pointer;touch-action:none;}
#panelCv.on{display:block;}
.ev-chip{display:flex;flex-direction:column;gap:4px;width:min(100%,560px);margin:0 auto clamp(4px,calc(var(--ch)*1),10px);}
.ev-chip[hidden]{display:none;}
.ev-row{--ec:#f97316;display:flex;align-items:center;gap:8px;padding:5px 10px;background:linear-gradient(90deg,color-mix(in srgb,var(--ec) 35%,transparent),rgba(7,3,16,.6));
  border:1px solid var(--ec);font-family:var(--ff-ui);font-size:clamp(10px,calc(var(--ch)*1.9),13px);color:#fff;}
.ev-row .ico{width:18px;height:18px;flex:none;color:var(--ec);}
.ev-row b{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),10px);color:var(--ec);letter-spacing:1px;white-space:nowrap;}
.ev-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-fchip.kuerbis{background:linear-gradient(180deg,#fb923c,#c2410c);color:#1c0a02;border-color:#fdba74;}
.sh-fchip.frost{background:linear-gradient(180deg,#e0f2fe,#38bdf8);color:#0c2a3d;border-color:#e0f2fe;}

/* ══ the winner's card in zones: share buttons and the victory line on top, the teacher in the
   stage box in the middle, the name plate at the bottom — nothing is laid over the teacher ══ */
.go-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "stage" "plate";justify-content:stretch;align-items:stretch;}
.go-hero-top{grid-area:top;position:relative;z-index:3;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,calc(var(--ch)*1),10px);padding:clamp(6px,calc(var(--ch)*1.2),10px) clamp(6px,calc(var(--cw)*.8),10px) 0;}
.go-hero-stage{grid-area:stage;min-height:calc(var(--ch)*14);pointer-events:none;}
.go-hero-plate{grid-area:plate;}
/* the share buttons: in the stage's bottom-right corner, next to the teacher's feet */
.go-share{position:static;grid-area:stage;justify-self:end;align-self:end;flex-direction:column;align-items:flex-end;gap:6px;margin:0 8px 8px 0;}
.go-share:empty{display:none;}
.go-quote{position:relative;top:auto;left:auto;max-width:100%;white-space:normal;text-align:center;line-height:1.15;margin-bottom:12px;transform:rotate(-2deg);}
.go-quote.on{animation:quoteIn2 .45s cubic-bezier(.2,1.5,.4,1) .9s backwards;}
@keyframes quoteIn2{from{transform:scale(0) rotate(-10deg);opacity:0}to{transform:rotate(-2deg);opacity:1}}
/* 4:3 screens and phones on their side: the teacher on the left, the words on the right */
@media (max-aspect-ratio:4/3), (max-height:430px){
  .go-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"stage share" "stage top" "stage ." "stage plate";}
  .go-share{grid-area:share;align-self:start;flex-direction:row;margin:8px 8px 0 0;}
  .go-hero-top{align-items:stretch;padding-left:0;}
  .go-quote{align-self:center;margin:4px 0 0 12px;}
  .go-quote::after{left:-9px;top:50%;bottom:auto;transform:translateY(-50%) rotate(135deg);}   /* the tail points at the teacher */
  .go-hero-plate{background:linear-gradient(90deg,rgba(4,0,12,.5),rgba(4,0,12,.88) 20%,rgba(4,0,12,.88) 85%,transparent);}
}
@media (max-height:430px){
  .gs-btn span{display:none;}                         /* icons only; the title says what they do */
  .gs-btn{padding:.45em;}
  .go-quote{font-size:clamp(11px,calc(var(--ch)*3),15px);}
  #goHeroName{font-size:clamp(14px,calc(var(--ch)*4.6),22px);}
}

/* ══ the menu tiles: two rows of four, icon and label side by side, every label whole ══ */
#sMenu .menu-tiles,#sMenu.tut-lock .menu-tiles,#sMenu.played .menu-tiles{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;grid-auto-columns:auto;
  gap:clamp(5px,calc(var(--ch)*1.1),10px);}
#sMenu .mtile{flex-direction:row;justify-content:center;gap:clamp(5px,calc(var(--cw)*.5),9px);height:clamp(34px,calc(var(--ch)*6.4),54px);padding:0 clamp(5px,calc(var(--cw)*.6),10px);}
#sMenu .mtile-icon{flex:none;display:flex;}
#sMenu .mtile-icon .ico{width:clamp(15px,calc(var(--ch)*3),22px);height:clamp(15px,calc(var(--ch)*3),22px);}
#sMenu .mtile-lbl{font-size:clamp(11px,calc(var(--ch)*2.3),17px);letter-spacing:.5px;overflow:visible;text-overflow:clip;}
#sMenu:not(.played):not(.tut-lock) #btnTutTile{grid-column:1 / -1;order:9;}      /* (the tutorial tile, before the first match: its own row) */
@media (max-height:520px){                              /* phones on their side: one row of icons */
  #sMenu .menu-tiles,#sMenu.tut-lock .menu-tiles,#sMenu.played .menu-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
  #sMenu .mtile{flex-direction:column;padding:4px 2px;height:clamp(34px,calc(var(--ch)*9),60px);}
  #sMenu:not(.played):not(.tut-lock) #btnTutTile{grid-column:auto;order:0;}
}
.ch-card .lv-btn.ch-story{margin-top:0;background:rgba(7,3,16,.6);border-color:color-mix(in srgb,var(--cc) 60%,transparent);}
.ch-card .lv-btn.ch-story .ico{color:var(--cc);}
.go-crown{white-space:nowrap;}
.ch-card .lv-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ══ the Glasbeni avtomat, redesigned: the machine on a lit stage with a marquee of bulbs, the recent pulls
   under it; on the right the spin card with the guarantee meter and the chance board ══ */
#sGacha .gacha-body{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;}
.g-stage{position:relative;padding:clamp(8px,calc(var(--ch)*1.6),16px);display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.2),12px);
  background:radial-gradient(ellipse at 50% 0%,rgba(245,166,35,.22),transparent 60%),linear-gradient(180deg,#1c0838,#0a0318);
  border:2px solid rgba(245,166,35,.7);box-shadow:0 0 34px rgba(155,48,255,.45),0 0 90px rgba(245,166,35,.12),inset 0 0 50px rgba(0,0,0,.65);
  clip-path: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);}
.g-stage::before{content:"";position:absolute;inset:5px;pointer-events:none;border:3px dotted rgba(253,230,138,.95);
  clip-path:inherit;animation:gBulbs 1.1s steps(2) infinite;}
@keyframes gBulbs{0%{border-color:rgba(253,230,138,.95);filter:drop-shadow(0 0 4px #fde68a)}50%{border-color:rgba(255,79,216,.8);filter:drop-shadow(0 0 4px #ff4fd8)}}
body.nofx .g-stage::before{animation:none;}
#gachaCv{border:none;border-radius:10px;box-shadow:0 0 0 1px rgba(155,48,255,.35);position:relative;}
.g-hist{display:flex;align-items:center;gap:clamp(4px,calc(var(--cw)*.5),8px);min-height:clamp(34px,calc(var(--ch)*7),52px);overflow:hidden;position:relative;}
.g-hist-h{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);color:#c4b5fd;letter-spacing:1px;flex:none;margin-right:4px;line-height:1.4;max-width:6.5em;}
.g-hchip{--tc:#a855f7;position:relative;flex:none;width:clamp(34px,calc(var(--ch)*7),52px);aspect-ratio:1;border:2px solid var(--tc);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--tc) 45%,#1a0533),#0b0418 75%);box-shadow:0 0 10px color-mix(in srgb,var(--tc) 60%,transparent);animation:gChipIn .4s cubic-bezier(.2,1.5,.4,1) both;}
.g-hchip canvas{width:100%;height:100%;display:block;}
.g-hchip b{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,40%);font-family:var(--ff-px);font-weight:normal;font-size:clamp(6px,calc(var(--ch)*1.2),9px);
  padding:1px 4px;background:var(--tc);color:#07050d;white-space:nowrap;display:inline-flex;align-items:center;gap:2px;}
.g-hchip.dup b{background:#0e7490;color:#cffafe;}
.g-hchip b .ico{width:1.1em;height:1.1em;}
@keyframes gChipIn{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.g-card{position:relative;padding:clamp(8px,calc(var(--ch)*1.6),14px) clamp(10px,calc(var(--cw)*1.1),16px);
  background:linear-gradient(180deg,rgba(34,9,66,.94),rgba(10,3,24,.96));border:1px solid rgba(155,48,255,.5);box-shadow:0 10px 26px rgba(0,0,0,.45);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.g-spin-card{display:flex;flex-direction:column;gap:clamp(6px,calc(var(--ch)*1.3),12px);border-color:rgba(245,166,35,.6);}
.g-guar{display:flex;flex-direction:column;gap:5px;}
.g-guar-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);letter-spacing:1px;color:#fca5a5;}
.g-guar-h b{font-family:var(--ff-hd);font-weight:normal;font-size:clamp(14px,calc(var(--ch)*2.8),20px);color:#fff;letter-spacing:1px;}
#sGacha .gacha-pity{height:clamp(12px,calc(var(--ch)*2.4),18px);}
#sGacha .gacha-pity::after{content:"";position:absolute;inset:0;pointer-events:none;           /* a notch every five spins */
  background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 2px),rgba(7,5,13,.9) calc(100%/12 - 2px) calc(100%/12));}
#sGacha .gacha-info{font-size:clamp(8px,calc(var(--ch)*1.6),11px);text-align:left;color:#fde68a;}
.g-board-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:clamp(4px,calc(var(--ch)*1),8px);
  font-family:var(--ff-px);font-size:clamp(8px,calc(var(--ch)*1.6),12px);letter-spacing:2px;color:var(--gold2);}
.g-legend{display:inline-flex;align-items:center;gap:5px;font-size:clamp(6px,calc(var(--ch)*1.2),9px);letter-spacing:1px;color:#c4b5fd;}
.g-legend i{display:inline-block;width:10px;height:8px;margin-left:4px;background:#e9d5ff;}
.g-legend i.sh,.godd-bar i.sh{background:repeating-linear-gradient(135deg,#67e8f9 0 3px,#0e7490 3px 6px);}
#sGacha .gacha-odds{background:none;border:none;padding:0;gap:clamp(3px,calc(var(--ch)*.8),7px);}
#sGacha .godd{--tc:#a855f7;grid-template-columns:clamp(74px,calc(var(--cw)*9),112px) minmax(0,1fr) auto clamp(34px,calc(var(--cw)*3.6),48px);
  grid-template-rows:auto auto;column-gap:clamp(6px,calc(var(--cw)*.8),10px);row-gap:1px;padding:3px 0;}
#sGacha .godd .tier-badge{grid-row:1 / 3;align-self:center;}
.godd-bar{display:flex;height:clamp(8px,calc(var(--ch)*1.6),12px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);overflow:hidden;align-self:center;}
.godd-bar i{display:block;height:100%;transition:width .5s cubic-bezier(.16,1,.3,1);}
.godd-bar i.nw{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,#000),var(--tc));box-shadow:0 0 8px var(--tc);}
#sGacha .godd-p{font-family:var(--ff-hd);font-weight:normal;font-size:clamp(14px,calc(var(--ch)*2.8),21px);min-width:3.3em;}
#sGacha .godd-o{font-size:clamp(11px,calc(var(--ch)*2.1),15px);min-width:0;}
.godd-s{grid-column:2 / -1;display:flex;gap:10px;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),9px);letter-spacing:.5px;color:#a78bfa;}
.godd-s b{font-weight:normal;display:inline-flex;align-items:center;gap:3px;}
.godd-s b.nw{color:color-mix(in srgb,var(--tc) 70%,#fff);}
.godd-s b.sh{color:#67e8f9;}
.godd-s .ico{width:1.1em;height:1.1em;}
#sGacha .godd.off{opacity:.4;}
#sGacha .godd.dup{display:flex;justify-content:space-between;gap:8px;margin-top:4px;padding-top:7px;border-top:1px dashed rgba(155,48,255,.4);}
.godd-sum{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.3),10px);letter-spacing:1px;}
.godd-sum.nw{color:#fde68a;} .godd-sum.sh{color:#67e8f9;}
.godd-sum b{font-family:var(--ff-hd);font-weight:normal;font-size:clamp(14px,calc(var(--ch)*2.6),20px);color:#fff;}
.godd-sum .ico{width:1.2em;height:1.2em;}
#sGacha .godd-feat{margin-bottom:clamp(4px,calc(var(--ch)*1),8px);}
#sGacha .gacha-tip{font-size:clamp(10px,calc(var(--ch)*1.9),13px);font-weight:600;color:#a89cc8;background:none;border:none;padding:0 4px;display:flex;gap:6px;align-items:flex-start;}
#sGacha .gacha-tip .ico{flex:none;width:1.2em;height:1.2em;color:#fcd34d;margin-top:.1em;}
@media (max-width:640px){ #sGacha .gacha-body{grid-template-columns:1fr;} }
@media (max-height:520px){ .g-hist{display:none;} #sGacha .gacha-tip{display:none;} .godd-s{display:none;} #sGacha .godd{grid-template-rows:auto;} }

/* the chance board as one grid: the badges, bars and numbers line up over all rarities */
#sGacha .gacha-odds{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content;column-gap:clamp(6px,calc(var(--cw)*.8),12px);
  row-gap:clamp(4px,calc(var(--ch)*.9),8px);align-items:center;}
#sGacha .godd{display:contents;}
#sGacha .godd .tier-badge{grid-row:auto;}
#sGacha .godd-feat,#sGacha .godd.dup{grid-column:1 / -1;}
#sGacha .godd-p{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;}
#sGacha .godd-p.sh{color:#67e8f9;}
#sGacha .godd-p .ico{width:.8em;height:.8em;}
#sGacha .godd-s{grid-column:2 / -1;margin-top:calc(-1*clamp(3px,calc(var(--ch)*.7),6px));}
#sGacha .godd.off > *{opacity:.4;}
#sGacha .godd-feat{padding:4px 8px;gap:8px;}
#sGacha .godd-feat canvas{width:clamp(24px,calc(var(--ch)*5),34px);}
#sGacha .godd-feat span{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;}
#sGacha .godd-feat b{font-size:clamp(12px,calc(var(--ch)*2.3),17px);}
.g-hist-h.empty{max-width:none;color:#8b7bb8;}
/* gradient text is clipped to its box: give the carons of Č Š Ž (and Ř, Ć) room above the capitals */
.logo-line1,.map-title,.intro-vs,.announce,.ko-text,.go-title,.cp-title,.sk-title,#startGate .sg-title,.mst10{padding-top:.16em;margin-top:-.16em;}
/* ══ QUIZ (quiz.js): the question window, the Kviz dvorana, the Glasbeni arhiv ══ */
#quizBox{position:absolute;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:clamp(8px,calc(var(--ch)*3),24px);
  background:rgba(4,0,10,.82);backdrop-filter:blur(3px);}
#quizBox.on{display:flex;animation:updIn .25s ease-out;}
.qz-win{width:min(100%,calc(var(--cw)*72));max-height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;gap:clamp(6px,calc(var(--ch)*1.5),13px);
  padding:clamp(12px,calc(var(--ch)*3),26px) clamp(12px,calc(var(--cw)*2.4),30px);background:linear-gradient(180deg,#1a0535,#0b0118);
  border:1px solid rgba(155,48,255,.6);box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 40px rgba(155,48,255,.25);animation:updPop .3s cubic-bezier(.2,1.3,.4,1);}
.qz-win.fin{border-color:#fcd34d;box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 50px rgba(252,211,77,.35);}
.qz-win.hall,.qz-win.arch{width:min(100%,calc(var(--cw)*86));}
.qz-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.qz-k{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.6),11px);color:#fde68a;letter-spacing:1.5px;line-height:1.5;}
.qz-streak{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),10px);color:#86efac;}
.qz-face{align-self:center;width:clamp(64px,calc(var(--ch)*14),110px);height:auto;border:3px solid #9b30ff;border-radius:12px;background:#2a1450;}
.qz-q{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--ch)*5.2),40px);letter-spacing:1.5px;color:#fff;text-align:center;line-height:1.15;padding-top:.1em;}
.qz-q.big{font-size:clamp(24px,calc(var(--ch)*7),52px);color:#fcd34d;}
.qz-quote{font-family:var(--ff-ui);font-size:clamp(14px,calc(var(--ch)*3),21px);color:#e9d5ff;text-align:center;line-height:1.3;font-weight:600;
  background:rgba(155,48,255,.12);border-left:4px solid #9b30ff;padding:.5em .8em;}
.qz-quote.plain{background:none;border:0;padding:0;font-weight:500;font-size:clamp(12px,calc(var(--ch)*2.5),17px);color:#c4b5fd;}
.qz-play{align-self:center;display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),10px);color:#fde68a;
  background:rgba(252,211,77,.1);border:1px solid rgba(252,211,77,.5);padding:.7em 1em;cursor:pointer;}
.qz-play.on{animation:qzPulse .6s ease-in-out infinite alternate;}
@keyframes qzPulse{to{background:rgba(252,211,77,.3);box-shadow:0 0 16px rgba(252,211,77,.5);}}
.qz-bar{height:6px;background:rgba(255,255,255,.1);} .qz-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#fde047,#ef4444);}
.qz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(5px,calc(var(--cw)*.7),9px);}
.qz-opt{display:flex;align-items:center;gap:.6em;text-align:left;font-family:var(--ff-ui);font-weight:700;font-size:clamp(14px,calc(var(--ch)*3),21px);color:#fff;cursor:pointer;
  padding:.6em .8em;background:rgba(155,48,255,.14);border:2px solid rgba(155,48,255,.55);transition:transform .12s,background .12s;min-height:2.6em;}
.qz-opt kbd{font-family:var(--ff-px);font-size:.55em;color:#c4b5fd;border:1px solid rgba(196,181,253,.5);padding:.3em .45em;flex:none;}
.qz-opt:hover:not(:disabled),.qz-opt:focus-visible{transform:translateY(-2px);background:rgba(155,48,255,.3);outline:none;}
.qz-opt.right{background:#16a34a;border-color:#86efac;} .qz-opt.wrong{background:#b91c1c;border-color:#fca5a5;}
.qz-opt:disabled{cursor:default;}
.qz-res{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.qz-res:empty{display:none;}
.qz-res b{font-family:var(--ff-hd);font-size:clamp(22px,calc(var(--ch)*5.5),40px);letter-spacing:2px;}
.qz-res b.ok{color:#4ade80;} .qz-res b.no{color:#fca5a5;}
.qz-res span{font-family:var(--ff-ui);font-size:clamp(13px,calc(var(--ch)*2.7),18px);color:#e9d5ff;line-height:1.3;max-width:60ch;}
.qz-res em{font-style:normal;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),10px);color:#fde047;animation:qzPulse .5s ease-in-out 4 alternate;padding:.4em .6em;}
.qz-go{min-width:min(100%,260px);align-self:center;}
.qz-foot{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;}
.rz-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;}
.rz-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.7em 0;cursor:pointer;color:#fff;background:rgba(155,48,255,.16);border:2px solid rgba(155,48,255,.55);}
.rz-b b{font-family:var(--ff-hd);font-size:clamp(20px,calc(var(--ch)*5),36px);font-weight:400;} .rz-b span{font-family:var(--ff-ui);font-size:clamp(9px,calc(var(--ch)*1.7),12px);color:#c4b5fd;}
.rz-b:hover,.rz-b:focus-visible,.rz-b.on{background:#9b30ff;outline:none;transform:translateY(-2px);}
/* ── the Kviz dvorana: rank badge, four coloured numbers, five game cards, the archive ── */
.qz-win.hall{gap:clamp(8px,calc(var(--ch)*1.8),16px);background:radial-gradient(120% 70% at 12% 0%,rgba(252,211,77,.12),transparent 55%),linear-gradient(180deg,#1a0535,#0b0118);}
.hl-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,calc(var(--cw)*1.6),20px);}
.hl-badge{--k:0;position:relative;width:clamp(58px,calc(var(--ch)*13),96px);aspect-ratio:1;border-radius:50%;flex:none;
  background:conic-gradient(#fcd34d calc(var(--k)*1%),rgba(255,255,255,.1) 0);box-shadow:0 0 26px rgba(252,211,77,.35);display:grid;place-items:center;}
.hl-badge-in{width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4c1d95,#12032a);border:2px solid #07050d;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
.hl-badge-in .ico{width:42%;height:42%;color:#fcd34d;}
.hl-badge-in b{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),11px);color:#fde68a;}
.hl-title{display:flex;flex-direction:column;gap:3px;min-width:0;}
.hl-title i{font-style:normal;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);color:#c4b5fd;letter-spacing:2px;line-height:1.5;}
.hl-title b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(22px,calc(var(--ch)*6.4),46px);letter-spacing:2px;line-height:1.05;padding-top:.12em;
  background:linear-gradient(180deg,#fffbeb 10%,#fcd34d 55%,#d97706);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hl-title span{font-family:var(--ff-ui);font-weight:600;font-size:clamp(11px,calc(var(--ch)*2.1),15px);color:#e9d5ff;}
.hl-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;max-width:420px;margin-top:2px;}
.hl-bar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#fde68a);border-radius:3px;box-shadow:0 0 8px #f59e0b;}
.hl-side{display:flex;align-items:center;gap:8px;align-self:start;}
.hl-chip{display:flex;align-items:center;gap:6px;padding:.45em .8em;border-radius:999px;cursor:pointer;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.5);
  color:#bbf7d0;font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);line-height:1.6;transition:background .15s,transform .1s;}
.hl-chip .ico{width:1.5em;height:1.5em;} .hl-chip:hover,.hl-chip:focus-visible{background:rgba(74,222,128,.25);outline:none;transform:translateY(-1px);}
.hl-x{width:clamp(30px,calc(var(--ch)*6.5),42px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(196,181,253,.4);color:#e9d5ff;transition:background .15s,transform .15s;}
.hl-x .ico{width:45%;height:45%;} .hl-x:hover,.hl-x:focus-visible{background:rgba(239,68,68,.3);border-color:#f87171;transform:rotate(90deg);outline:none;}
.hl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,calc(var(--cw)*.8),10px);}
.hl-stat{--sc:#fcd34d;display:flex;align-items:center;gap:clamp(6px,calc(var(--cw)*.8),10px);padding:clamp(6px,calc(var(--ch)*1.3),11px);border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sc) 16%,transparent),rgba(0,0,0,.25));border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);min-width:0;}
.hl-stat-i{flex:none;width:clamp(26px,calc(var(--ch)*6),40px);aspect-ratio:1;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--sc) 22%,#0b0118);}
.hl-stat-i .ico{width:55%;height:55%;color:var(--sc);}
.hl-stat div{display:flex;flex-direction:column;min-width:0;}
.hl-stat b{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--ch)*4.4),30px);color:#fff;font-weight:400;line-height:1;letter-spacing:1px;padding-top:.1em;}
.hl-stat span{font-family:var(--ff-ui);font-weight:600;font-size:clamp(9px,calc(var(--ch)*1.8),12px);color:#c4b5fd;line-height:1.15;}
.hl-sec{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.4),10px);color:#c4b5fd;letter-spacing:2px;line-height:1.6;margin-bottom:-4px;}
.hl-games{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,calc(var(--cw)*.9),12px);}
.hl-game{--gc:#a78bfa;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer;color:#fff;
  padding:clamp(9px,calc(var(--ch)*1.8),15px);border-radius:14px;border:1px solid color-mix(in srgb,var(--gc) 55%,transparent);
  background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--gc) 35%,transparent),transparent 60%),linear-gradient(180deg,#1d0a3a,#0d0320);
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s,border-color .15s;animation:hlIn .35s ease-out backwards;}
@keyframes hlIn{from{opacity:0;transform:translateY(10px);}}
.hl-game::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);transform:translateX(-120%);transition:transform .5s;pointer-events:none;}
.hl-game:hover::after,.hl-game:focus-visible::after{transform:translateX(120%);}
.hl-game:hover,.hl-game:focus-visible{transform:translateY(-4px);border-color:var(--gc);box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--gc) 45%,transparent);outline:none;}
.hl-ico{width:clamp(34px,calc(var(--ch)*7.5),52px);height:clamp(34px,calc(var(--ch)*7.5),52px);border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--gc,#a78bfa) 26%,#0b0118);border:1px solid color-mix(in srgb,var(--gc,#a78bfa) 60%,transparent);}
.hl-ico .ico{width:55%;height:55%;color:var(--gc,#fde68a);}
.hl-game b{font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--ch)*3.3),23px);font-weight:400;letter-spacing:1px;line-height:1.05;padding-top:.1em;}
.hl-gd{font-family:var(--ff-ui);font-weight:500;font-size:clamp(10px,calc(var(--ch)*1.9),13.5px);color:#d8ccf5;line-height:1.2;flex:1;}
.hl-gf{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;margin-top:3px;}
.hl-gf em{font-style:normal;font-family:var(--ff-px);font-size:clamp(6px,calc(var(--ch)*1.2),8.5px);color:var(--gc);line-height:1.6;}
.hl-gf strong{font-family:var(--ff-hd);font-weight:400;font-size:clamp(12px,calc(var(--ch)*2.3),16px);letter-spacing:1px;padding:.15em .55em;border-radius:999px;
  background:var(--gc);color:#12032a;white-space:nowrap;}
.hl-arch{--gc:#fcd34d;display:flex;align-items:center;gap:clamp(8px,calc(var(--cw)*1.2),14px);width:100%;text-align:left;cursor:pointer;color:#fff;
  padding:clamp(8px,calc(var(--ch)*1.6),13px) clamp(10px,calc(var(--cw)*1.4),18px);border-radius:14px;border:1px solid rgba(252,211,77,.5);
  background:linear-gradient(90deg,rgba(252,211,77,.16),rgba(12,3,26,.6));transition:transform .15s,box-shadow .15s;}
.hl-arch:hover,.hl-arch:focus-visible{transform:translateY(-2px);box-shadow:0 0 24px rgba(252,211,77,.35);outline:none;}
.hl-arch-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.hl-arch-t b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(16px,calc(var(--ch)*3.6),25px);letter-spacing:1.5px;color:#fde68a;line-height:1;padding-top:.1em;}
.hl-arch-t span{font-family:var(--ff-ui);font-weight:500;font-size:clamp(10px,calc(var(--ch)*1.9),13.5px);color:#d8ccf5;}
@media (max-height:520px){ .hl-gd,.hl-gf em,.hl-arch-t span{display:none;} .hl-game{gap:3px;} .hl-gf{justify-content:flex-end;} }
.hl-arch-n{font-family:var(--ff-hd);font-size:clamp(18px,calc(var(--ch)*4.2),30px);color:#fcd34d;letter-spacing:1px;white-space:nowrap;}
.mt-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .mt-col{display:flex;flex-direction:column;gap:6px;}
.mt-b{display:flex;align-items:center;gap:8px;padding:.45em .6em;cursor:pointer;color:#fff;font-family:var(--ff-ui);font-weight:700;font-size:clamp(13px,calc(var(--ch)*2.7),18px);
  background:rgba(155,48,255,.14);border:2px solid rgba(155,48,255,.5);text-align:left;min-height:2.8em;}
.mt-b canvas{width:34px;height:34px;flex:none;} .mt-b.on{background:#9b30ff;} .mt-b.right{background:#16a34a;border-color:#86efac;} .mt-b:disabled{cursor:default;}
.shake{animation:qzShake .35s;} @keyframes qzShake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.or-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.or-b{display:flex;flex-direction:column;align-items:center;gap:4px;padding:.6em .8em;cursor:pointer;color:#fff;font-family:var(--ff-hd);font-size:clamp(15px,calc(var(--ch)*3.2),22px);letter-spacing:1px;
  background:rgba(155,48,255,.14);border:2px solid rgba(155,48,255,.5);min-width:7em;}
.or-b canvas{width:44px;height:44px;} .or-b.right{background:#16a34a;border-color:#86efac;opacity:.6;}
.or-track{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:2.4em;}
.or-slot{display:flex;align-items:center;gap:6px;font-family:var(--ff-ui);font-weight:700;color:#bbf7d0;background:rgba(22,163,74,.2);border:1px solid #16a34a;padding:.3em .6em;}
.or-slot b{font-family:var(--ff-px);font-size:.6em;color:#fde047;}
.ar-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;max-height:calc(var(--ch)*62);}
.ar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(88px,calc(var(--cw)*10),120px),1fr));gap:8px;}
.ar-c{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.5em .3em;cursor:pointer;color:#fff;background:rgba(155,48,255,.12);border:2px solid rgba(155,48,255,.45);}
.ar-c canvas{width:56px;height:56px;} .ar-c b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(14px,calc(var(--ch)*2.8),19px);}
.ar-c span{font-family:var(--ff-ui);font-size:12px;color:#c4b5fd;} .ar-c i{font-style:normal;font-family:var(--ff-px);font-size:8px;color:#fde047;}
.ar-c:hover,.ar-c:focus-visible{background:rgba(155,48,255,.35);outline:none;}
.ar-card{font-family:var(--ff-ui);font-size:clamp(13px,calc(var(--ch)*2.6),17px);line-height:1.3;color:#d8ccf0;background:rgba(0,0,0,.25);border:1px dashed rgba(155,48,255,.35);padding:.5em .7em;}
.ar-card:not(.got)::before{content:"☆ ";color:#7c6a9e;}
.ar-card.got{color:#f5f3ff;background:rgba(252,211,77,.08);border:1px solid rgba(252,211,77,.45);}
.ar-card.got::before{content:"\2605  ";color:#fde047;}
.ar-sec{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),10px);color:#fde68a;letter-spacing:1.5px;margin-top:6px;}
.ar-top{display:flex;align-items:center;gap:12px;} .ar-top canvas{width:80px;height:80px;border:3px solid #9b30ff;border-radius:10px;background:#2a1450;}
.ar-top b{display:block;font-family:var(--ff-hd);font-weight:400;font-size:clamp(20px,calc(var(--ch)*4.6),32px);color:#fff;letter-spacing:1px;}
.ar-top span{font-family:var(--ff-ui);font-size:clamp(12px,calc(var(--ch)*2.4),16px);color:#c4b5fd;}
.ar-work{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:.4em .6em;background:rgba(155,48,255,.1);}
.ar-work b{font-family:var(--ff-ui);font-weight:700;color:#fff;font-size:clamp(13px,calc(var(--ch)*2.7),18px);} .ar-work span{font-family:var(--ff-ui);color:#a78bfa;font-size:13px;flex:1;}
.ar-tl{display:flex;flex-direction:column;gap:10px;}
.ar-era{--ec:#9b30ff;display:flex;flex-direction:column;gap:6px;padding:.6em .8em;border-left:6px solid var(--ec);background:color-mix(in srgb,var(--ec) 12%,rgba(0,0,0,.3));}
.ar-era-h{display:flex;align-items:baseline;gap:10px;} .ar-era-h b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(18px,calc(var(--ch)*4),28px);color:#fff;letter-spacing:1.5px;}
.ar-era-h span{font-family:var(--ff-px);font-size:9px;color:var(--ec);}
.ar-who{display:flex;flex-wrap:wrap;gap:5px;} .ar-mini{font-family:var(--ff-ui);font-weight:700;font-size:13px;color:#fff;background:rgba(0,0,0,.35);border:1px solid var(--ec);padding:.2em .6em;cursor:pointer;}
.ar-grp{--ec:#9b30ff;display:flex;flex-direction:column;gap:4px;padding:.5em .7em;border-left:5px solid var(--ec);background:rgba(0,0,0,.25);}
.ar-grp > b{font-family:var(--ff-hd);font-weight:400;font-size:clamp(16px,calc(var(--ch)*3.2),22px);color:var(--ec);letter-spacing:1px;}
.ar-inst{display:flex;gap:10px;align-items:baseline;font-family:var(--ff-ui);font-size:clamp(12px,calc(var(--ch)*2.5),16px);color:#e9d5ff;}
.ar-inst b{font-family:var(--ff-hd);font-weight:400;font-size:1.15em;color:#fff;min-width:7.5em;letter-spacing:.5px;}
.go-fact{display:flex;flex-direction:column;align-items:center;gap:4px;margin:8px auto 0;padding:.5em .8em;max-width:96%;text-align:center;
  background:rgba(252,211,77,.08);border:1px solid rgba(252,211,77,.4);font-family:var(--ff-ui);font-size:clamp(12px,calc(var(--ch)*2.4),16px);color:#f5f3ff;line-height:1.3;}
.go-fact b{font-family:var(--ff-px);font-size:clamp(7px,calc(var(--ch)*1.5),10px);color:#fde047;letter-spacing:1.5px;}
.go-fact em{font-style:normal;font-family:var(--ff-px);font-size:8px;color:#86efac;}
.go-fact-play{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ui);font-weight:700;font-size:13px;color:#fde68a;background:none;border:1px solid rgba(252,211,77,.5);padding:.2em .7em;cursor:pointer;}
@media (max-aspect-ratio:4/3){ .rz-grid{grid-template-columns:repeat(5,minmax(0,1fr));} .qz-opts{grid-template-columns:1fr;} .hl-stats{grid-template-columns:repeat(2,minmax(0,1fr));} .hl-games{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* the menu with the UČENJE tile (quiz.js): two rows of five on wide screens */
@media (min-aspect-ratio:4/3){ #sMenu .menu-tiles,#sMenu.tut-lock .menu-tiles,#sMenu.played .menu-tiles{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));}
  #sMenu .mtile{height:clamp(42px,calc(var(--ch)*9.2),86px);flex-direction:column;gap:2px;} #sMenu .mtile-lbl{font-size:clamp(10px,calc(var(--ch)*2),15px);white-space:nowrap;} }
/* the result screen with the fact: the stats close up a little so the buttons stay on screen */
.go-tape:has(.go-fact:not([hidden])) .go-stats{gap:clamp(1px,calc(var(--ch)*.3),4px);}
.go-tape .go-fact{margin-top:clamp(3px,calc(var(--ch)*.8),8px);padding:.3em .6em;gap:2px;}
.go-tape .go-fact span{font-size:clamp(11px,calc(var(--ch)*2.1),14px);}
.go-fact-play{margin-left:4px;padding:.05em .5em;}

/* ── the main menu, final layout (v1.2): logo, four big buttons with a line each, ten tiles in two rows ──
   everything scales with the screen's height so the whole menu fits a laptop (1280×720) and a phone */
#sMenu .logo-svg{height:clamp(46px,calc(var(--ch)*21),180px);}
#sMenu .logo-wrap{margin-top:0;margin-bottom:clamp(4px,calc(var(--ch)*1.4),16px);}
#sMenu .menu-primary{min-height:clamp(30px,calc(var(--ch)*8.4),64px);padding-top:clamp(2px,calc(var(--ch)*.6),8px);padding-bottom:clamp(2px,calc(var(--ch)*.6),8px);}
#sMenu .menu-primary .mbtn-main{font-size:clamp(15px,calc(var(--ch)*4.4),30px);}
#sMenu .menu-primary .mbtn-sub{font-size:clamp(7px,calc(var(--ch)*1.4),11px);opacity:.85;}
#sMenu .menu-primary:first-child .mbtn-sub{color:#fde68a;}
#sMenu #btnTutTile,#sMenu.played #btnTutTile,#sMenu:not(.played):not(.tut-lock) #btnTutTile{display:flex;grid-column:auto;order:0;}
#sMenu.tut-lock #btnTutTile{display:none;}
#sMenu .menu-tiles,#sMenu.tut-lock .menu-tiles,#sMenu.played .menu-tiles{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(4px,calc(var(--ch)*1.2),12px);}
#sMenu .mtile{height:clamp(34px,calc(var(--ch)*8.6),72px);flex-direction:column;gap:2px;border-radius:10px;}
#sMenu .mtile-lbl{font-size:clamp(9px,calc(var(--ch)*1.9),14px);white-space:nowrap;}
@media (max-height:520px){ #sMenu .menu-primary .mbtn-sub{display:none;} #sMenu .mtile-lbl{display:none;} #sMenu .mtile{height:clamp(30px,calc(var(--ch)*9),44px);} }