/* ===================== FULL-SCREEN LOBBY (home and language screens) ===================== */
:root{--condensed:'Libre Franklin','Libre Franklin',var(--sans)}
body.in-lobby .topbar{display:none}
body.in-lobby{overflow:hidden}
.lobby-screen{position:relative;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-columns:76px minmax(0,1fr) minmax(320px,420px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top top" "rail stage menu" "ticker dock dock";gap:0 24px;padding:0}
/* Scene */
.scene{position:absolute;inset:0;overflow:hidden;z-index:0;background:linear-gradient(180deg,#030711 0%,#071228 45%,#0b1a33 70%,#000c33 100%)}
.skyline{position:absolute;left:0;right:0;bottom:22%;height:38%;background:
  linear-gradient(180deg,transparent,#0b1a33cc 80%),
  repeating-linear-gradient(90deg,#0c1a30 0 38px,#101f3a 38px 62px,#0a162b 62px 90px,#132444 90px 118px,#0c1a30 118px 160px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 100%);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 100%);opacity:.9}
.skyline::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,transparent 0 12px,#5bbeff22 12px 14px,transparent 14px 31px,#85c8ff1a 31px 33px,transparent 33px 57px),
  repeating-linear-gradient(0deg,transparent 0 9px,#ffffff10 9px 10px,transparent 10px 23px);mix-blend-mode:screen;opacity:.7}
.skyline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:radial-gradient(60% 80% at 30% 100%,#f35e6133,transparent 70%),radial-gradient(50% 70% at 75% 100%,#5bbeff44,transparent 70%),radial-gradient(40% 60% at 55% 100%,#7b8cff33,transparent 70%)}
.beams{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.beams i{position:absolute;top:-20%;width:180px;height:140%;background:linear-gradient(180deg,transparent,#5bbeff14 40%,#5bbeff08 60%,transparent);transform:skewX(-18deg);filter:blur(14px);animation:beam 9s ease-in-out infinite}
.beams i:nth-child(1){left:12%}
.beams i:nth-child(2){left:46%;background:linear-gradient(180deg,transparent,#85c8ff12 40%,transparent 70%);animation-delay:-3s}
.beams i:nth-child(3){left:66%;animation-delay:-6s}
.beams i:nth-child(4){left:84%;background:linear-gradient(180deg,transparent,#f35e6110 40%,transparent 70%);animation-delay:-1.5s}
@keyframes beam{0%,100%{opacity:.5;transform:skewX(-18deg) translateX(0)}50%{opacity:1;transform:skewX(-18deg) translateX(30px)}}
.fog{position:absolute;inset:0;background:radial-gradient(900px 400px at 50% 90%,#0e5f8a33,transparent 70%),radial-gradient(700px 300px at 20% 100%,#3a1b6e44,transparent 70%);animation:fog 14s ease-in-out infinite alternate}
@keyframes fog{to{transform:translateX(40px)}}
#rain{position:absolute;inset:0;width:100%;height:100%}
.floor{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,transparent,#000c33 60%),repeating-linear-gradient(90deg,transparent 0 79px,#5bbeff14 79px 80px);transform:perspective(500px) rotateX(55deg);transform-origin:50% 100%;opacity:.8}
.lobby-screen>*:not(.scene){position:relative;z-index:1}
/* Top HUD */
.lobby-top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px 6px}
.player-card{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#071d55f2,#071d5500);border:0;padding:6px 40px 6px 6px;text-align:left;min-width:0;max-width:360px;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.player-card .avatar{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p,0)*1%),#1f3f84 0);flex:none}
.player-card .avatar i{width:46px;height:46px;border-radius:50%;background-color:#071d55;display:grid;place-items:center;font:700 20px var(--display);color:var(--gold);font-style:normal}
.player-card .avatar b{position:absolute;right:-4px;bottom:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--gold);color:#03246a;font:700 11px var(--mono);display:grid;place-items:center;border:2px solid #000c33}
.card-text{display:grid;gap:3px;min-width:0;width:200px}
.card-text strong{font:700 16px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-text small{font:10px var(--mono);letter-spacing:1px;color:var(--gold);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-text .progress{height:3px;border:0;background:#1f3f84}
.card-text .progress i{background:linear-gradient(90deg,#2d5fa8,#cfe8ff);box-shadow:none}
.lobby-resources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.res{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:#071d55d9;border:1px solid #2c4f96;font:700 13px var(--mono);color:var(--text);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);cursor:default}
.res i{font-style:normal;font-size:11px;color:var(--gold)}
.res small{font:600 9px var(--mono);letter-spacing:1px;color:var(--dim)}
.res.streak{cursor:pointer;color:var(--muted)}
.res.streak.lit{color:#f7893b;border-color:#f7893b66;box-shadow:0 0 14px #f7893b33}
.res.streak .flame{filter:grayscale(1);opacity:.6}
.res.streak.lit .flame{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.lobby-icons{display:inline-flex;gap:6px;margin-left:8px}
.icon-button{width:36px;height:34px;display:grid;place-items:center;background:#071d55d9;border:1px solid #2c4f96;color:var(--gold);font:700 12px var(--mono);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.icon-button:hover{border-color:var(--gold)}
/* Left rail */
.lobby-rail{grid-area:rail;display:flex;flex-direction:column;gap:14px;padding:10px 0 0 18px;align-self:start}
.rail-button{position:relative;width:58px;display:grid;justify-items:center;gap:4px;background:transparent;padding:0;color:var(--muted)}
.rail-button>i{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-style:normal;background:radial-gradient(circle at 50% 30%,#12306e,#071d55);border:1px solid #2c4f96;box-shadow:inset 0 0 0 3px #071d55,inset 0 0 0 4px #2c4f9699;transition:transform .15s,border-color .15s}
.rail-button:hover>i{transform:scale(1.08);border-color:var(--gold)}
.rail-button span{font:700 9px var(--condensed);letter-spacing:1.5px;text-transform:uppercase}
.rail-badge{position:absolute;top:-4px;right:-2px;min-width:20px;height:18px;padding:0 5px;background:#f35e61;color:#fff;font:700 10px var(--mono);display:grid;place-items:center;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.rail-badge.complete{background:var(--gold);color:#03246a}
.rail-badge:empty{display:none}
/* Stage */
.lobby-stage{grid-area:stage;position:relative;display:grid;place-items:end center;min-height:0;pointer-events:none}
.lobby-art{position:relative;z-index:1;width:min(92%,640px);max-height:100%;height:auto;object-fit:contain;filter:drop-shadow(0 0 2px #ffffff90) drop-shadow(0 30px 50px #5bbeff44);animation:hover-art 6s ease-in-out infinite}
.ground{position:absolute;left:50%;bottom:0;width:70%;height:12%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#5bbeff66,transparent 70%);filter:blur(6px)}
.lobby-title{position:absolute;left:110px;bottom:118px;z-index:2;max-width:520px;pointer-events:none}
.lobby-title h1{font:700 clamp(30px,4vw,54px)/1 var(--condensed);letter-spacing:2px;text-transform:uppercase;margin:6px 0 0;text-shadow:0 4px 30px #000}
.lobby-title p{margin:8px 0 0;color:#b9c9df;font-size:14px;max-width:420px;text-shadow:0 2px 12px #000}
/* Right menu of slabs */
.lobby-menu{grid-area:menu;align-self:center;display:grid;gap:10px;padding:0 22px 0 0}
.slab{--slab:var(--accent);position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:14px 22px 14px 20px;text-align:left;color:var(--text);
  background:linear-gradient(90deg,#0a1f5af2 0%,#071d55d9 70%,#071d5599 100%);border:1px solid #2c4f96;border-left:3px solid var(--slab);
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);transform:translateX(0);transition:transform .18s,background .18s,border-color .18s}
.slab::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,color-mix(in srgb,var(--slab) 22%,transparent));opacity:0;transition:opacity .18s;pointer-events:none}
.slab:hover{transform:translateX(-10px);border-color:var(--slab)}
.slab:hover::after{opacity:1}
.slab-icon{flex:none;width:52px;height:44px;display:grid;place-items:center;font-size:24px;color:var(--slab);background:#000c33cc;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.slab-icon .glyph{font:700 20px var(--display);color:var(--slab);text-shadow:0 0 14px color-mix(in srgb,var(--slab) 60%,transparent)}
.slab-text{display:grid;gap:2px;min-width:0;flex:1}
.slab-text strong{font:700 24px/1 var(--condensed);letter-spacing:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab-text small{font:11px var(--mono);letter-spacing:.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab-bar{position:absolute;left:20px;right:40px;bottom:6px;height:2px;background:#1f3f84}
.slab-bar i{display:block;height:100%;background:var(--slab);box-shadow:0 0 8px var(--slab)}
.slab-chevrons{flex:none;font:700 18px var(--condensed);letter-spacing:-2px;color:var(--slab);opacity:.7;margin-right:6px}
.slab-lock{flex:none;font-size:16px;margin-right:6px;opacity:.7}
.slab.primary{padding:20px 22px 20px 20px;border-color:var(--gold);border-left-color:var(--gold);background:linear-gradient(90deg,#0d2a6bf2 0%,#1f1a1fd9 60%,#071d5599 100%);box-shadow:0 0 30px #85c8ff22}
.slab.primary .slab-icon{background:var(--gold);color:#03246a;font-size:20px}
.slab.primary .slab-text strong{font-size:30px;color:#f2f8ff}
.slab.primary .slab-chevrons{color:var(--gold);animation:chev 1.2s ease-in-out infinite}
@keyframes chev{50%{transform:translateX(6px);opacity:1}}
.slab.locked{opacity:.55;filter:grayscale(.6)}
.slab.locked:hover{transform:none}
/* Ticker */
.lobby-ticker{grid-area:ticker;grid-column:1/3;align-self:end;margin:0 0 12px 18px;display:inline-flex;align-items:center;gap:10px;max-width:min(560px,60vw);padding:9px 16px 9px 12px;background:#071d55d9;border:1px solid #2c4f96;border-left:3px solid var(--accent);font-size:13px;color:#c7d6ea;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);justify-self:start}
.lobby-ticker i{font-style:normal}
/* Dock */
.lobby-dock{grid-area:dock;grid-column:2/4;display:flex;justify-content:flex-end;gap:2px;padding:0 22px 12px 0}
.dock-tab{position:relative;display:grid;justify-items:center;gap:3px;min-width:112px;padding:10px 12px 8px;background:linear-gradient(180deg,#0a1f5af2,#04133fe8);border:1px solid #2c4f96;border-bottom:2px solid #2c4f96;color:var(--muted);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:color .15s,border-color .15s,transform .15s}
.dock-tab>i{font-size:20px;font-style:normal}
.dock-tab span{font:700 11px var(--condensed);letter-spacing:1.5px;text-transform:uppercase}
.dock-tab b{position:absolute;top:6px;right:14px;font:700 10px var(--mono);color:var(--gold)}
.dock-tab:hover{color:var(--text);border-bottom-color:var(--gold);transform:translateY(-3px)}
/* Drawer */
.drawer{position:fixed;inset:0;z-index:20;background:#030b19a6;backdrop-filter:blur(4px);display:flex;justify-content:flex-start}
.drawer-inner{position:relative;width:min(440px,92vw);height:100%;overflow:auto;padding:70px 24px 24px 96px;background:linear-gradient(90deg,#071d55f8,#071d55ee);border-right:1px solid #2c4f96;animation:drawer-in .25s ease-out}
@keyframes drawer-in{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.drawer-close{position:absolute;top:18px;right:18px;width:36px;height:36px;background:#132340;border:1px solid #2c4f96;color:var(--text);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.drawer .dash-card{display:grid}
.drawer .dash-card[hidden]{display:none}
/* Tracks lobby */
.tracks-lobby{grid-template-columns:76px minmax(0,1fr) minmax(360px,480px)}
.tracks-lobby .lobby-top{grid-column:1/-1}
.tracks-lobby .lobby-stage{grid-column:1/3}
.emblem-stage{place-items:center}
.emblem{display:grid;justify-items:center;gap:10px;text-align:center;padding:40px;pointer-events:none}
.emblem-glyph{width:220px;height:220px;display:grid;place-items:center;font:900 92px 'Libre Franklin','Arial Black',Impact,sans-serif;color:var(--gold);text-shadow:0 0 40px #85c8ff66;background:radial-gradient(circle at 50% 30%,#12306e,#071d55);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:1px solid var(--gold);animation:hover-art 6s ease-in-out infinite}
.emblem-name{font:700 44px/1 var(--condensed);letter-spacing:3px;text-transform:uppercase}
.emblem-tag{max-width:420px;color:#b9c9df;font-size:14px}
.tracks-lobby .lobby-title{position:static;grid-column:1/3;padding:0 0 0 110px;align-self:end;margin-bottom:24px}
.tracks-lobby .lobby-menu{grid-row:2/4;align-self:center}
/* Responsive */
@media(max-width:1100px){.lobby-screen{grid-template-columns:70px minmax(0,1fr) minmax(300px,360px)}.lobby-title{bottom:104px}}
@media(max-width:900px){
  body.in-lobby{overflow:auto}
  .lobby-screen{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto auto;grid-template-areas:"top" "stage" "title" "menu" "ticker" "dock";gap:12px;padding-bottom:12px}
  .lobby-rail{display:none}
  .lobby-stage{min-height:300px;place-items:center}
  .lobby-art{width:min(80vw,360px);animation:none}
  .lobby-title{position:static;grid-area:title;padding:0 18px;max-width:none}
  .lobby-menu{padding:0 18px}
  .slab-text strong{font-size:20px}
  .slab.primary .slab-text strong{font-size:24px}
  .lobby-ticker{grid-area:ticker;grid-column:auto;margin:0 18px;max-width:none;justify-self:stretch}
  .lobby-dock{grid-area:dock;grid-column:auto;justify-content:stretch;padding:0 18px;overflow:auto}
  .dock-tab{min-width:0;flex:1;padding:8px 6px}
  .dock-tab span{font-size:9px}
  .lobby-top{flex-wrap:wrap}
  .player-card{max-width:100%}
  .card-text{width:auto}
  .tracks-lobby{grid-template-columns:1fr}
  .tracks-lobby .lobby-top,.tracks-lobby .lobby-stage,.tracks-lobby .lobby-title{grid-column:auto}
  .tracks-lobby .lobby-menu{grid-row:auto}
  .emblem-glyph{width:150px;height:150px;font-size:60px}
  .emblem-name{font-size:32px}
  .drawer-inner{padding:70px 20px 24px}
}
/* Fixes: the title is absolutely positioned over the stage; the art sits to the right of the stage column */
.lobby-screen>.lobby-title{position:absolute;left:110px;top:34%;bottom:auto;max-width:440px}
.lobby-stage{place-items:end end;padding-right:12px}
.lobby-art{width:min(78%,600px)}
.ground{left:auto;right:6%;transform:none;width:60%}
.lobby-menu{max-height:100%;overflow:visible}
@media(max-width:1100px){.lobby-screen>.lobby-title{left:96px;top:30%;max-width:360px}.lobby-art{width:min(88%,520px)}}
@media(max-width:900px){.lobby-screen>.lobby-title{position:static;max-width:none;padding:0 18px}.lobby-stage{place-items:center;padding-right:0}.ground{left:50%;right:auto;transform:translateX(-50%)}}
/* Tracks lobby: title left, emblem right, both in the stage row */
.tracks-lobby .lobby-stage{grid-column:1/3;grid-row:2;place-items:center end;padding-right:24px}
.tracks-lobby .lobby-title{grid-column:1/3;grid-row:2;align-self:center;justify-self:start;padding:0 0 0 110px;margin:0;max-width:600px;position:relative;z-index:2}
.tracks-lobby .emblem{padding:20px}
.slab.primary .slab-icon .glyph{color:#03246a;text-shadow:none}
@media(max-width:900px){.tracks-lobby .lobby-stage,.tracks-lobby .lobby-title{grid-column:auto;grid-row:auto;padding:0 18px;place-items:center;max-width:none}}
.tracks-lobby .lobby-title{top:auto;left:auto;bottom:auto;max-width:440px}
.tracks-lobby .emblem{justify-self:end;margin-right:40px}
/* Aztec city key art behind the lobby scene */
.scene{background:#000c33 url('./art/lobby-bg-1672.webp') center 40%/cover no-repeat}
.scene .skyline{display:none}
.scene .floor{opacity:.35;height:18%}
.scene .fog{opacity:.7}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,#000c3366 0%,transparent 22%,transparent 55%,#000c33cc 82%,#000c33 100%),
  linear-gradient(90deg,#000c33b3 0%,transparent 22%,transparent 62%,#000c33b3 100%)}
.tracks-lobby .scene{background-position:center 30%}
@media(max-width:900px){.scene{background-image:url('./art/lobby-bg-960.webp');background-position:center top}.scene::after{background:linear-gradient(180deg,#000c3380 0%,transparent 18%,#000c33d9 55%,#000c33 80%)}}
@media(min-resolution:1.5x) and (max-width:900px){.scene{background-image:url('./art/lobby-bg-1672.webp')}}
.lobby-screen>.lobby-title{padding:18px 40px 18px 0;background:linear-gradient(90deg,#000c33cc 0%,#000c3399 60%,transparent 100%);margin-left:-20px;padding-left:20px}
.lobby-title h1{text-shadow:0 2px 6px #000,0 6px 30px #000}
@media(max-width:900px){.lobby-screen>.lobby-title{margin-left:0;background:none;padding:0 18px}}
/* Hero: waist-up warrior anchored to the bottom, entering from the right */
.lobby-stage{place-items:end center;padding-right:0;overflow:visible}
.lobby-art{width:auto;height:min(84vh,860px);max-width:none;max-height:none;object-fit:contain;object-position:bottom center;justify-self:center;margin-right:-4%;margin-bottom:-2px;filter:drop-shadow(0 0 1px #ffffff70) drop-shadow(0 20px 40px #000c) drop-shadow(0 0 60px #5bbeff22);animation:none}
.lobby-art.enter{animation:hero-in 1.15s cubic-bezier(.16,1,.3,1) both,hero-idle 7s ease-in-out 1.15s infinite}
@keyframes hero-in{0%{transform:translateX(70vw) scale(1.04);opacity:0;filter:drop-shadow(0 0 0 #fff0) blur(6px)}55%{opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes hero-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.lobby-stage::before{content:"";position:absolute;left:50%;bottom:0;width:70%;height:70%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#5bbeff33,transparent 65%);opacity:0;pointer-events:none}
.lobby-stage.flash::before{animation:stage-flash 1.6s ease-out both}
@keyframes stage-flash{0%{opacity:0}35%{opacity:1}100%{opacity:.35}}
.ground{left:50%;right:auto;transform:translateX(-50%);width:62%;height:10%;bottom:-2px;background:radial-gradient(ellipse at 50% 100%,#5bbeff77,transparent 70%)}
.lobby-screen>.lobby-title{top:15%;max-width:400px}
@media(max-width:1100px){.lobby-art{height:min(72vh,700px);margin-right:0}.lobby-screen>.lobby-title{top:14%;max-width:330px}}
@media(max-width:900px){.lobby-stage{min-height:0;place-items:end center}.lobby-art{height:min(52vh,460px);width:auto;max-width:100%;object-fit:contain;margin:0}.lobby-art.enter{animation:hero-in .9s cubic-bezier(.16,1,.3,1) both}}
@media(prefers-reduced-motion:reduce){.lobby-art.enter{animation:none}}
/* Keep the hero inside the stage column: width-driven size, never under the menu */
.lobby-art{width:min(100%,calc(82vh * 1.5));height:auto;max-height:none;margin-right:0;justify-self:end}
.slab{background:linear-gradient(90deg,#0a1f5afa 0%,#071d55f2 70%,#071d55e0 100%)}
.lobby-screen>.lobby-title{top:12%}
@media(max-width:1100px){.lobby-art{width:min(100%,calc(74vh * 1.5))}}
@media(max-width:900px){.lobby-art{width:min(100%,calc(52vh * 1.5));justify-self:center}}
/* Hero shifted to the right of the stage, next to the menu column */
.lobby-stage{place-items:end end;padding-right:0}
.lobby-art{justify-self:end;margin-right:-6%}
.ground{left:auto;right:4%;transform:none;width:58%}
.lobby-stage::before{left:auto;right:0;transform:none;width:75%}
@media(max-width:900px){.lobby-stage{place-items:end center}.lobby-art{justify-self:center;margin-right:0}.ground{left:50%;right:auto;transform:translateX(-50%)}}
/* Logo above the lobby title */
.lobby-logo{display:block;width:min(100%,440px);height:auto;margin:0 0 18px -6px;filter:drop-shadow(0 6px 18px #000c) drop-shadow(0 0 30px #85c8ff33);animation:logo-in 1s cubic-bezier(.16,1,.3,1) both;transform-origin:left center}
@keyframes logo-in{0%{opacity:0;transform:translateY(-18px) scale(1.06);filter:drop-shadow(0 0 0 #0000) brightness(1.6)}100%{opacity:1;transform:none}}
.lobby-screen>.lobby-title{top:9%;max-width:460px;padding-top:12px}
.lobby-title h1{font-size:clamp(26px,3.2vw,44px)}
@media(max-width:1100px){.lobby-logo{width:min(100%,360px)}.lobby-screen>.lobby-title{top:8%;max-width:380px}}
@media(max-width:900px){.lobby-logo{width:min(80vw,320px);margin:0 auto 14px}.lobby-title{text-align:center}.lobby-title h1{font-size:26px}}
@media(prefers-reduced-motion:reduce){.lobby-logo{animation:none}}
.lobby-logo{width:min(100%,540px)}
.lobby-screen>.lobby-title{max-width:580px;top:8%}
@media(max-width:1100px){.lobby-logo{width:min(100%,420px)}.lobby-screen>.lobby-title{max-width:440px}}
@keyframes logo-in{0%{opacity:0;transform:translateY(-18px) scale(1.06)}100%{opacity:1;transform:none}}
/* ===================== GLOBAL SCENE + HUD ON EVERY SCREEN ===================== */
:root{--hud-h:70px}
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000c33 url('./art/lobby-bg-1672.webp') center 40%/cover no-repeat}
#stars,body::before{display:none}
/* The path's backdrop behind a level (app.js setBackdrop): fades over the city art */
.scene-play{position:absolute;inset:0;background:#000c33 center 45%/cover no-repeat;opacity:0;transition:opacity .9s ease}
.scene-play.on{opacity:1}
body.in-play .scene::after{background:linear-gradient(180deg,#000c3399 0%,#000c33a6 35%,#000c33d9 100%)}
body:not(.in-lobby) .scene::after{background:linear-gradient(180deg,#000c33a6 0%,#000c33cc 35%,#000c33e6 100%)}
body:not(.in-lobby) .scene .fog{opacity:.35}
body:not(.in-lobby) .scene .floor{display:none}
.lobby-screen{height:calc(100vh - var(--hud-h));height:calc(100dvh - var(--hud-h))}
body.in-lobby .topbar{display:flex}
/* HUD bar */
.hud-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 22px;min-height:var(--hud-h);background:linear-gradient(180deg,#000c33f2,#000c33c9);border-bottom:1px solid #2c4f96;position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.hud-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold) 75%,transparent)}
.hud-bar .brand{padding:0;background:none;font:inherit;letter-spacing:0;text-shadow:none;flex:none}
.hud-bar .brand img{display:block;height:46px;width:auto;filter:drop-shadow(0 2px 8px #000c)}
.hud-bar .brand span{display:none}
.hud-bar .player-card{padding:4px 34px 4px 4px;background:linear-gradient(90deg,#071d55f2,#071d5500)}
.hud-bar .player-card .avatar{width:44px;height:44px}
.hud-bar .player-card .avatar i{width:36px;height:36px;font-size:16px}
.hud-bar .card-text{width:170px}
.hud-bar .card-text strong{font-size:14px}
.hud-bar .topnav{gap:6px}
.hud-bar .nav-link{padding:8px 10px}
/* Tracks lobby: the screen bar sits where the header used to be */
.tracks-lobby .screen-bar{grid-area:top;padding:12px 22px 0 22px;margin:0;min-height:0}
.tracks-lobby{grid-template-rows:auto minmax(0,1fr) auto}
/* Content screens: opaque panels over the city */
.dash-card,.editor-card,.console-card,.auth-form,.profile-card,.premium-box,.podium-card,.tournament-card,.me-card,.hud,.learning-panel,.result-metric,.arena-table table{background:linear-gradient(165deg,#071d55f7,#04133ff2)}
.arena-table td{background:transparent}
.hub-screen .shell{padding-top:18px}
/* Path screen as a checkpoint list next to the track emblem */
#path-screen .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,560px);grid-template-rows:auto minmax(0,1fr);gap:0 36px;height:calc(100vh - var(--hud-h));overflow:hidden;padding:14px 28px 18px 60px;max-width:none}
#path-screen .screen-bar{grid-column:1/-1;margin-bottom:0}
#path-screen .path-hero{align-self:center;margin:0;max-width:520px}
#path-screen .path-list{overflow:auto;padding-right:10px;align-self:center;max-height:100%;display:grid;gap:8px;scrollbar-width:thin}
.path-list li::before{display:none}
.path-list li+li{border-top:0}
.path-node{background:linear-gradient(90deg,#0a1f5afa 0%,#071d55f2 70%,#071d55e0 100%);border:1px solid #2c4f96;border-left:3px solid #2c4f96;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);padding:12px 30px 12px 14px;gap:14px;transition:transform .18s,border-color .18s}
.path-node:hover{transform:translateX(-8px);background:linear-gradient(90deg,#132344fa,#0a1f5af2)}
.path-node.done{border-left-color:var(--course,var(--accent))}
.path-node.current{border-color:var(--gold);border-left-color:var(--gold);background:linear-gradient(90deg,#0d2a6bf2 0%,#1f1a1fd9 60%,#071d5599 100%)}
.path-node.locked{opacity:.55}
.path-node.locked:hover{transform:none}
.path-node .node-mark{width:52px;height:52px}
.path-node.boss .node-mark{width:56px;height:56px}
.path-node .arrow{font:700 18px var(--condensed);letter-spacing:-2px}
/* Intro as a mission briefing */
#intro-screen .shell{min-height:calc(100vh - var(--hud-h));display:grid;grid-template-rows:auto minmax(0,1fr);padding:14px 28px 24px 60px;max-width:none}
#intro-screen .screen-bar{margin-bottom:0}
.intro-content{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"cat card" "title card" "oracle card" "desc card" "learn card" "tip card" "note card";gap:0 48px;align-content:center;max-width:1180px}
.intro-content>#intro-category{grid-area:cat}
.intro-content>h1{grid-area:title;font:700 clamp(30px,3.6vw,50px)/1.05 var(--condensed);letter-spacing:2px;text-transform:uppercase;margin:8px 0 12px}
.intro-description{grid-area:desc}
.learning-panel{grid-area:learn}
.intro-tip{grid-area:tip}
.intro-note{grid-area:note;margin-top:16px}
.intro-actions{grid-area:card;align-self:center;display:grid;gap:16px;padding:28px;background:linear-gradient(165deg,#0b215ef7,#0a1329f2);border:1px solid var(--gold);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);position:relative}
.intro-actions::before{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
.intro-actions .primary-button{width:100%;justify-content:center;font-size:18px;padding:18px 22px;min-width:0}
.intro-xp{justify-self:center;font-size:14px}
/* Practice */
.practice-wrap{padding-left:60px;padding-right:28px}
.countdown-screen{background:transparent}
/* Arena, account, premium */
#arena-screen .shell,#account-screen .shell,#premium-screen .shell{padding-left:60px}
.shell.narrow{max-width:720px;margin:0 auto;padding-left:28px}
/* Mobile */
@media(max-width:900px){
  #rain{display:none}
  .beams{display:none}
  .scene{background-image:url('./art/lobby-bg-960.webp');background-position:center top}
  body:not(.in-lobby) .scene::after{background:linear-gradient(180deg,#000c33b3,#000c33e6 30%,#000c33f5 100%)}
  .hud-bar{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:8px 12px;min-height:0}
  .hud-bar .topbar-left{grid-column:1/-1;justify-content:space-between}
  .hud-bar .brand img{height:34px}
  .hud-bar .player-card{max-width:calc(100% - 120px)}
  .hud-bar .card-text{width:auto}
  .hud-bar .lobby-resources{justify-self:start;gap:6px}
  .hud-bar .res{padding:6px 9px;font-size:12px}
  .hud-bar .topnav{justify-self:end}
  .hud-bar .topnav .nav-link:not(.arena-link){display:none}
  .lobby-screen{height:auto;min-height:calc(100vh - 110px)}
  .tracks-lobby .screen-bar{padding:12px 16px 0}
  #path-screen .shell{display:block;height:auto;overflow:visible;padding:16px}
  #path-screen .path-list{max-height:none;overflow:visible}
  #intro-screen .shell{padding:16px;min-height:0}
  .intro-content{grid-template-columns:1fr;grid-template-areas:"cat" "title" "oracle" "desc" "learn" "tip" "card" "note";gap:0}
  .intro-actions{margin-top:18px}
  .practice-wrap,#arena-screen .shell,#account-screen .shell,#premium-screen .shell{padding-left:16px;padding-right:16px}
}
@media(max-width:900px){.lobby-art{margin-top:10px;-webkit-mask:linear-gradient(180deg,#000 78%,transparent 100%);mask:linear-gradient(180deg,#000 78%,transparent 100%)}.lobby-logo{margin-top:6px}}

/* ===================== ICON SPRITE (dist/art/icons.webp, 8x5 cells) ===================== */
.ico{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.32em;background:url("./art/icons.webp") no-repeat;background-size:800% 500%;flex:none;font-style:normal}
.ico-play{background-position:0.0000% 0.0000%}
.ico-quests{background-position:14.2857% 0.0000%}
.ico-streak{background-position:28.5714% 0.0000%}
.ico-rank{background-position:42.8571% 0.0000%}
.ico-medals{background-position:57.1429% 0.0000%}
.ico-arena{background-position:71.4286% 0.0000%}
.ico-account{background-position:85.7143% 0.0000%}
.ico-pro{background-position:100.0000% 0.0000%}
.ico-xp{background-position:0.0000% 25.0000%}
.ico-trophy{background-position:14.2857% 25.0000%}
.ico-sound-on{background-position:28.5714% 25.0000%}
.ico-sound-off{background-position:42.8571% 25.0000%}
.ico-language{background-position:57.1429% 25.0000%}
.ico-lock{background-position:71.4286% 25.0000%}
.ico-unlock{background-position:85.7143% 25.0000%}
.ico-check{background-position:100.0000% 25.0000%}
.ico-speed{background-position:0.0000% 50.0000%}
.ico-accuracy{background-position:14.2857% 50.0000%}
.ico-combo{background-position:28.5714% 50.0000%}
.ico-progress{background-position:42.8571% 50.0000%}
.ico-time{background-position:57.1429% 50.0000%}
.ico-errors{background-position:71.4286% 50.0000%}
.ico-attempts{background-position:85.7143% 50.0000%}
.ico-boss{background-position:100.0000% 50.0000%}
.ico-next{background-position:0.0000% 75.0000%}
.ico-back{background-position:14.2857% 75.0000%}
.ico-home{background-position:28.5714% 75.0000%}
.ico-python{background-position:42.8571% 75.0000%}
.ico-javascript{background-position:57.1429% 75.0000%}
.ico-cpp{background-position:71.4286% 75.0000%}
.ico-csharp{background-position:85.7143% 75.0000%}
.ico-settings{background-position:100.0000% 75.0000%}
.ico-close{background-position:0.0000% 100.0000%}
.ico-chat{background-position:14.2857% 100.0000%}
.ico-fire-alert{background-position:28.5714% 100.0000%}
.ico-gift{background-position:42.8571% 100.0000%}
.ico-calendar{background-position:57.1429% 100.0000%}
.ico-shield{background-position:71.4286% 100.0000%}
.ico-bolt-double{background-position:85.7143% 100.0000%}
.ico-crown{background-position:100.0000% 100.0000%}
.res .ico{width:20px;height:20px;vertical-align:middle}
.res.streak .ico.flame{filter:grayscale(1);opacity:.55}
.res.streak.lit .ico.flame{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.icon-button .ico{width:22px;height:22px;vertical-align:middle}
.rail-button i .ico{width:34px;height:34px;vertical-align:middle}
.dock-tab i{display:grid;place-items:center}.dock-tab i .ico{width:30px;height:30px}
.slab-icon .ico{width:36px;height:36px}.slab.primary .slab-icon .ico{width:30px;height:30px}
.slab-lock .ico{width:22px;height:22px;opacity:.9}
.lobby-ticker .ico{width:22px;height:22px}
.drawer-close .ico{width:18px;height:18px;vertical-align:middle}
.quest-check .ico{width:18px;height:18px}
.streak-number .ico{width:48px;height:48px;align-self:center;filter:grayscale(1);opacity:.5}
.streak-number.lit .ico{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.node-mark .ico{width:30px;height:30px}.crown .ico{width:24px;height:24px}.path-node .arrow .ico{width:24px;height:24px}
.primary-button .ico{width:22px;height:22px;vertical-align:middle}
.event .ico{width:26px;height:26px}
.hud-stat span{display:flex;align-items:center;gap:6px}.hud-stat span .ico{width:20px;height:20px}
.result-metric span{display:flex;align-items:center;gap:6px}.result-metric span .ico{width:18px;height:18px}
.boss-label span{display:flex;align-items:center;gap:6px}.boss-label .ico{width:22px;height:22px}
.gain-label{display:inline-flex;align-items:center;gap:6px}.gain-label .ico{width:22px;height:22px}
.profile-stats .ico{width:20px;height:20px;vertical-align:middle}
@media(max-width:700px){.rail-button i .ico{width:28px;height:28px}.slab-icon .ico{width:30px;height:30px}.streak-number .ico{width:38px;height:38px}}
.rail-button>i{display:grid;place-items:center}
.dock-tab>i{display:grid;place-items:center;height:32px}
.dock-tab .dock-label{font:700 11px var(--condensed);letter-spacing:1.5px;text-transform:uppercase}
.hud-stat em,.boss-label em{font:inherit;font-style:normal}

/* ===================== EMBLEM SPRITE (dist/art/emblems.webp, 5x2 cells) ===================== */
.emb{display:inline-block;width:48px;height:48px;background:url("./art/emblems.webp") no-repeat;background-size:500% 200%;flex:none;font-style:normal;vertical-align:middle}
.emb-rank-novice{background-position:0.0000% 0.0000%}
.emb-rank-apprentice{background-position:25.0000% 0.0000%}
.emb-rank-explorer{background-position:50.0000% 0.0000%}
.emb-rank-warrior{background-position:75.0000% 0.0000%}
.emb-rank-legend{background-position:100.0000% 0.0000%}
.emb-medal-gold{background-position:0.0000% 100.0000%}
.emb-medal-silver{background-position:25.0000% 100.0000%}
.emb-medal-bronze{background-position:50.0000% 100.0000%}
.emb-boss{background-position:75.0000% 100.0000%}
.emb-perfect-day{background-position:100.0000% 100.0000%}
.player-card .avatar i.emb{width:44px;height:44px;border-radius:0;background-color:transparent}
.hud-bar .player-card .avatar i.emb{width:36px;height:36px}
.rank-title{align-items:center;justify-content:flex-start;gap:14px}.rank-title .emb{width:64px;height:64px}
.rank-ladder span{display:inline-flex;align-items:center;gap:6px}.rank-ladder .emb{width:22px;height:22px;filter:grayscale(1);opacity:.5}.rank-ladder span.reached .emb{filter:none;opacity:1}
.dash-meta .emb{width:26px;height:26px;margin-right:6px}
.medal-emblem{flex:none;display:grid;place-items:center}.medal-emblem .emb{width:40px;height:40px;filter:drop-shadow(0 2px 6px #000a)}
.result-gain .medal{display:none}.result-gain .slots{margin-left:8px}.result-gain .slots .emb{width:72px;height:72px;filter:drop-shadow(0 4px 12px #000c);animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.celebration-emblem{width:160px;height:160px;filter:drop-shadow(0 0 30px #85c8ff88);animation:pop .8s cubic-bezier(.2,1.4,.4,1)}
.medal-count{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--mono);color:var(--text)}.medal-count .emb{width:26px;height:26px}
.arena-table .medal-count .emb{width:22px;height:22px}
.boss-bar{grid-template-columns:auto 1fr;align-items:center;column-gap:14px}.boss-bar .boss-mask{width:64px;height:64px;grid-row:1/3;filter:drop-shadow(0 0 14px #f35e6166)}
.boss-bar.defeated .boss-mask{filter:grayscale(1) brightness(.6)}
@media(max-width:700px){.rank-title .emb{width:48px;height:48px}.result-gain .slots .emb{width:56px;height:56px}.celebration-emblem{width:120px;height:120px}.boss-bar .boss-mask{width:48px;height:48px}}
@media(max-width:900px){.tracks-lobby .emblem{padding:16px 12px;max-width:100%;margin:0 auto;justify-self:center}.emblem-name{font-size:28px}.emblem-tag{max-width:100%;padding:0 12px}}
/* ===================== LESSONS: concept cards on the intro, language history on the tracks screen ===================== */
.code-sample{margin:0;padding:14px 16px;background:#000c33e6;border:1px solid #1f3f84;font:13px/1.65 var(--mono);color:#c9d8ea;white-space:pre;overflow:auto;tab-size:4;scrollbar-width:thin}
.code-sample .keyword{color:#c6c6ff}.code-sample .string{color:#7fcaff}.code-sample .number{color:#ffd0a9}.code-sample .comment{color:#748ba4;font-style:italic}
/* Intro */
.intro-content{grid-template-areas:"cat card" "title card" "oracle card" "desc card" "concepts card" "learn card" "tip card" "note card";align-content:start;padding-bottom:24px}
.intro-actions{align-self:start;position:sticky;top:calc(var(--hud-h) + 24px);margin-top:36px}
.concept-deck{grid-area:concepts;display:grid;gap:14px;margin:0 0 26px}
.concept-deck[hidden]{display:none}
.concept-lead{margin:0 0 4px;font-size:17px;line-height:1.6;color:#dbe7f5}
.concept-card{position:relative;display:grid;gap:12px;padding:22px 24px 20px;background:linear-gradient(165deg,#071d55f7,#04133ff2);border:1px solid #2c4f96;border-left:3px solid var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.concept-card header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.concept-card header b{font:700 26px/1 var(--condensed);color:var(--gold);letter-spacing:1px}
.concept-index{font:600 10px var(--mono);letter-spacing:1.5px;color:var(--dim)}
.concept-card h3{margin:0;width:100%;font:700 24px/1.1 var(--condensed);letter-spacing:1.5px;text-transform:uppercase}
.concept-card p{margin:0;font-size:15px;line-height:1.65;color:#c9d8ea}
.concept-card p strong{color:var(--text);font-weight:600}
.concept-code{display:grid;gap:6px;margin-top:2px}
.concept-code-label{font:600 11px var(--mono);letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.concept-note{font-size:14px!important;color:var(--muted)!important;padding-left:14px;border-left:1px solid #36599e}
/* Tracks screen: history strip under the title, full story in the drawer */
.tracks-lobby .dossier{grid-column:1/3;grid-row:3;margin:0 0 22px 110px;max-width:760px;display:grid;gap:10px;align-self:end}
.dossier-summary{margin:0;font-size:15px;line-height:1.6;color:#dbe7f5;text-shadow:0 2px 12px #000}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin:0}
.facts.compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fact{display:grid;gap:2px;padding:8px 12px;background:#071d55d9;border:1px solid #2c4f96;border-left:2px solid var(--gold);min-width:0}
.fact dt{font:600 9px var(--mono);letter-spacing:1.5px;color:var(--dim);text-transform:uppercase}
.fact dd{margin:0;font-size:13px;line-height:1.4;color:var(--text)}
.dossier-more{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;font:700 12px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;border-color:var(--gold);color:var(--gold);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:0}
.dossier-more .ico{width:18px;height:18px}
.history-card{gap:14px}
.history-name{margin:0;font:700 40px/1 var(--condensed);letter-spacing:3px;text-transform:uppercase}
.history-tagline{margin:-6px 0 4px;color:var(--muted);font-size:14px;line-height:1.5}
.history-body{display:grid;gap:12px}
.history-body .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-paragraph{margin:0;font-size:14px;line-height:1.7;color:#c9d8ea}
.history-card .code-sample{font-size:12px}
.drawer[data-kind="history"] .drawer-inner{width:min(560px,94vw)}
@media(max-width:1100px){.tracks-lobby .dossier{margin-left:96px}}
@media(max-width:900px){
  .tracks-lobby{grid-template-areas:"top" "stage" "title" "dossier" "menu" "ticker" "dock"}
  .tracks-lobby .dossier{grid-area:dossier;grid-column:auto;grid-row:auto;margin:14px 18px 6px;max-width:none}
  .facts.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-content{grid-template-areas:"cat" "title" "oracle" "desc" "concepts" "learn" "tip" "card" "note"}
  .intro-actions{position:static;margin-top:18px}
  .concept-card{padding:18px 16px 16px}
  .concept-card h3{font-size:21px}
  .code-sample{font-size:12px;padding:12px}
}

/* ===================== HOME: welcome speech, bottom left above the footer ===================== */
/* Title and welcome share one left column that runs from the top of the stage to just above the ticker. */
.lobby-screen>.lobby-left{position:absolute;left:110px;top:12px;bottom:78px;z-index:2;width:min(540px,calc(100% - 560px));display:flex;flex-direction:column;justify-content:space-between;gap:14px;pointer-events:none}
.lobby-left>.lobby-title{position:static;max-width:none;margin:0 0 0 -20px;padding:12px 40px 12px 20px;background:linear-gradient(90deg,#000c33cc 0%,#000c3399 60%,transparent 100%);min-height:0}
.lobby-left .lobby-logo{width:auto;max-width:100%;height:clamp(64px,15vh,170px);margin-bottom:10px}
.lobby-left .lobby-title h1{font-size:clamp(26px,3.2vw,44px)}
.lobby-welcome{position:relative;display:grid;gap:10px;padding:20px 22px 18px;pointer-events:auto;
  background:linear-gradient(160deg,#071d55f5,#060c1af0);border:1px solid #2c4f96;border-left:3px solid var(--gold);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);box-shadow:0 20px 60px #000a}
.lobby-welcome::before{content:"";position:absolute;top:7px;right:7px;width:12px;height:12px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
.lobby-welcome h2{margin:0;font:700 28px/1.05 var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#f2f8ff;text-shadow:0 0 24px #85c8ff44}
.welcome-text{margin:0;font-size:14px;line-height:1.6;color:#c9d8ea}
.welcome-pillars{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.welcome-pillars li{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;background:#000c33b3;border:1px solid #1f3f84;min-width:0}
.welcome-pillars .ico{flex:none;width:26px;height:26px}
.welcome-pillars span{display:grid;gap:2px;min-width:0}
.welcome-pillars b{font:700 13px/1.1 var(--condensed);letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.welcome-pillars small{font-size:11px;line-height:1.35;color:var(--muted)}
.welcome-oath{margin:0;font:600 12px/1.5 var(--mono);letter-spacing:.5px;color:var(--accent)}
@media(max-height:860px){.lobby-welcome{padding:16px 20px 14px;gap:8px}.lobby-welcome h2{font-size:24px}.welcome-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
@media(max-height:760px){.welcome-pillars small{display:none}.welcome-pillars li{align-items:center}}
@media(max-height:660px){.welcome-pillars,.welcome-oath{display:none}}
@media(max-width:1100px){.lobby-screen>.lobby-left{left:96px;width:min(440px,calc(100% - 470px))}.welcome-pillars{grid-template-columns:1fr}.welcome-pillars li{padding:6px 9px}.welcome-pillars small{display:block}}
@media(max-width:1100px) and (max-height:860px){.welcome-pillars small{display:none}.welcome-pillars li{align-items:center}}
@media(max-width:900px){
  .lobby-screen>.lobby-left{display:contents}
  .lobby-left>.lobby-title{margin:0;background:none;padding:0 18px}
  .lobby-left .lobby-logo{width:min(80vw,320px);height:auto;margin:6px auto 14px}
  #home-screen.lobby-screen{grid-template-areas:"top" "stage" "title" "menu" "welcome" "ticker" "dock"}
  .lobby-welcome{grid-area:welcome;margin:6px 18px 0}
  .lobby-welcome h2{font-size:24px}
  .welcome-text{display:block;-webkit-line-clamp:unset;overflow:visible}
  .welcome-pillars{display:grid;grid-template-columns:1fr}
  .welcome-pillars small{display:block}
  .welcome-oath{display:block}
}

/* ===================== LANGUAGE GUARDIANS: centered on the language and path screens, right of the intro ===================== */
.guardian-art{display:block;width:auto;height:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 1px #ffffff70) drop-shadow(0 20px 40px #000c) drop-shadow(0 0 60px #2dcccd22)}
.guardian-art[hidden]{display:none}
.guardian-art.enter{animation:guardian-in 1s cubic-bezier(.16,1,.3,1) both,hero-idle 7s ease-in-out 1s infinite}
@keyframes guardian-in{0%{transform:translateY(40px) scale(.94);opacity:0;filter:blur(6px)}60%{opacity:1}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.guardian-art.enter{animation:none}}
/* Language screen: the guardian stands in the middle of the stage, between the story and the paths */
.tracks-lobby.guarded .lobby-stage{place-items:end center;padding-right:0;grid-row:2/4;align-self:stretch}
/* The guardian stands on the floor and fills the height under the HUD on any screen size (no fixed cap). */
.tracks-lobby.guarded .lobby-stage .guardian-art{height:calc(100dvh - var(--hud-h) - 56px);max-height:100%;width:auto;max-width:none;margin-left:34%;position:relative;z-index:1}
.tracks-lobby.guarded .lobby-title{position:relative;z-index:3}
.tracks-lobby.guarded .dossier{position:relative;z-index:3;max-width:560px}
/* Desktop: the guardian can stand behind the history, a dark fade keeps it readable. */
@media(min-width:901px){.tracks-lobby.guarded .dossier{padding:14px 30px 14px 18px;margin-left:92px;background:linear-gradient(90deg,#000c33e6 0,#000c33cc 72%,#000c3300 100%)}}
/* Path screen: story left, guardian center, checkpoints right */
#path-screen.guarded .shell{grid-template-columns:minmax(300px,420px) minmax(0,1fr) minmax(360px,520px);grid-template-rows:auto minmax(0,1fr)}
.path-guardian{position:relative;display:grid;place-items:end center;min-height:0;align-self:stretch;pointer-events:none}
.path-guardian[hidden]{display:none}
.path-guardian .guardian-art{height:100%;max-height:calc(100vh - var(--hud-h) - 70px);position:relative;z-index:1}
.path-guardian .ground{position:absolute;left:50%;bottom:0;width:80%;height:10%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,#2dcccd55,transparent 70%);filter:blur(6px)}
/* Intro: guardian on the right with the start card below it */
.intro-side{grid-area:card;align-self:start;position:sticky;top:calc(var(--hud-h) + 12px);display:grid;gap:0;margin-top:12px}
.intro-side .intro-actions{position:relative;top:auto;margin-top:-28px;z-index:2;align-self:auto}
.intro-guardian{display:grid;place-items:end center;pointer-events:none}
.intro-guardian[hidden]{display:none}
.intro-guardian .guardian-art{height:min(56vh,520px)}
.intro-guardian[hidden]+.intro-actions{margin-top:24px}
@media(max-width:1100px){
  #path-screen.guarded .shell{grid-template-columns:minmax(260px,340px) minmax(0,1fr) minmax(320px,420px)}
  .tracks-lobby.guarded .lobby-stage .guardian-art{margin-left:40%;height:min(70vh,640px)}
}
@media(max-width:900px){
  .tracks-lobby.guarded .lobby-stage{min-height:0;grid-row:auto;align-self:auto}
  .tracks-lobby.guarded .lobby-stage .guardian-art{margin:0;height:min(48vh,420px)}
  #path-screen.guarded .shell{display:block}
  .path-guardian{margin:8px 0 12px}
  .path-guardian .guardian-art{height:min(44vh,380px)}
  .intro-side{position:static;margin-top:18px}
  .intro-guardian .guardian-art{height:min(42vh,340px)}
}
/* Guardian sizing fixes: explicit heights so the art never collapses inside auto-sized grid tracks */
.path-guardian .guardian-art{height:calc(100vh - var(--hud-h) - 100px);max-height:none;width:auto;max-width:100%}
.intro-content{grid-template-columns:minmax(0,1fr) 420px}
.intro-side{width:100%;justify-self:stretch}
.intro-guardian .guardian-art{width:100%;height:auto;max-height:min(58vh,540px)}
@media(max-width:1100px){.intro-content{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:900px){
  .intro-content{grid-template-columns:1fr}
  .path-guardian .guardian-art{height:min(44vh,380px)}
  .intro-guardian .guardian-art{max-height:min(42vh,340px)}
}
.intro-side .intro-actions{grid-area:auto;width:100%}
/* The path guardian may spill past its narrow column: it is transparent art layered under the panels */
.path-guardian{justify-items:center;z-index:0}
.path-guardian .guardian-art{max-width:none;height:calc(100vh - var(--hud-h) - 90px)}
#path-screen.guarded .path-hero,#path-screen.guarded .path-list{position:relative;z-index:2}
@media(max-width:900px){.path-guardian .guardian-art{max-width:100%;height:min(44vh,380px)}}
/* Path guardian: sized by its column so it stays between the story and the checkpoints */
#path-screen.guarded .shell{grid-template-columns:minmax(280px,380px) minmax(0,1fr) minmax(340px,470px);gap:0 24px}
.path-guardian{place-items:center}
.path-guardian .guardian-art{width:116%;max-width:none;height:auto;max-height:calc(100vh - var(--hud-h) - 90px)}
@media(max-width:1100px){#path-screen.guarded .shell{grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(300px,380px)}}
@media(max-width:900px){.path-guardian .guardian-art{width:auto;max-width:100%;height:min(44vh,380px);max-height:none}}

/* ===================== INTRO WITH GUARDIAN: the art fills the whole right side, start card in the bottom-right corner ===================== */
#intro-screen.guarded{--side-w:min(46vw,860px)}
#intro-screen.guarded .intro-content{grid-template-columns:minmax(0,1fr) calc(var(--side-w) - 40px);max-width:none}
#intro-screen.guarded .intro-side{position:fixed;top:var(--hud-h);right:0;bottom:0;align-self:stretch;height:auto;width:var(--side-w);margin:0;z-index:1;display:block;pointer-events:none}
#intro-screen.guarded .intro-guardian{position:absolute;inset:0;display:block;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 16%);mask:linear-gradient(90deg,transparent 0,#000 16%)}
#intro-screen.guarded .intro-guardian::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#000c33b3 88%,#000c33e6 100%);pointer-events:none}
#intro-screen.guarded .intro-guardian .guardian-art{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover;object-position:center 18%;filter:drop-shadow(0 0 40px #2dcccd22)}
#intro-screen.guarded .intro-guardian .guardian-art.enter{animation:guardian-cover-in 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes guardian-cover-in{0%{transform:translateX(60px) scale(1.06);opacity:0;filter:blur(8px)}60%{opacity:1}100%{transform:none;opacity:1}}
#intro-screen.guarded .intro-side .intro-actions{position:absolute;right:clamp(24px,3vw,48px);bottom:clamp(24px,4vh,44px);width:min(380px,calc(100% - 64px));margin:0;pointer-events:auto;z-index:2;
  box-shadow:0 24px 70px #000d,0 0 50px #85c8ff26}
#intro-screen.guarded .intro-actions .primary-button{font-size:20px;padding:20px 24px}
@media(prefers-reduced-motion:reduce){#intro-screen.guarded .intro-guardian .guardian-art.enter{animation:none}}
@media(max-width:1100px){#intro-screen.guarded{--side-w:44vw}}
@media(max-width:900px){
  #intro-screen.guarded .intro-content{grid-template-columns:1fr}
  #intro-screen.guarded .intro-side{position:relative;top:auto;right:auto;bottom:auto;width:auto;align-self:start;margin:18px -16px 0;height:min(78vh,620px);pointer-events:auto}
  #intro-screen.guarded .intro-guardian{-webkit-mask:linear-gradient(180deg,transparent 0,#000 10%);mask:linear-gradient(180deg,transparent 0,#000 10%)}
  #intro-screen.guarded .intro-side .intro-actions{left:16px;right:16px;bottom:16px;width:auto}
}
#intro-screen.guarded .screen-bar{position:relative;z-index:3}#intro-screen.guarded #intro-position{padding:4px 10px;background:#000c33cc;border:1px solid #2c4f96}

/* ===================== BUTTON SKINS: sprite backgrounds from design/BOTONES.md, stretched with 9-slice on ::before ===================== */
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button){position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--bh);min-height:0;padding:0 calc(var(--bh) * var(--cr) + 10px) 0 calc(var(--bh) * var(--cl) + 10px)!important;background:none!important;border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;transform:none!important;font:700 15px/1 var(--condensed);letter-spacing:2px;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:#f2f8ff;text-shadow:0 1px 2px #000,0 0 10px #000a;transition:filter .15s}
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button)::before{content:"";position:absolute;inset:0;z-index:-1;box-sizing:border-box;border-style:solid;border-width:calc(var(--bh) / 2) calc(var(--bh) * var(--cr)) calc(var(--bh) / 2) calc(var(--bh) * var(--cl));border-image-source:var(--bi);border-image-slice:var(--bs);border-image-repeat:stretch;pointer-events:none}
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button):hover::before{border-image-source:var(--bi-h)}
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button):active::before{border-image-source:var(--bi-p)}
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button):is(:disabled,[aria-disabled="true"])::before{border-image-source:var(--bi-d)}
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button):is(:disabled,[aria-disabled="true"]){color:#9aa3ad;cursor:not-allowed}
:is(.primary-button,.run-button,.outline-button,.back-button,.segment,.icon-button,.drawer-close,.link-button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.primary-button:not(.cta)::after{display:none}
.primary-button.cta{overflow:hidden}
.primary-button.cta::after{top:18%;height:64%}
.primary-button.cta{--bh:62px;--bi:url(./art/btn/cta-normal.webp);--bi-h:url(./art/btn/cta-hover.webp);--bi-p:url(./art/btn/cta-pressed.webp);--bi-d:url(./art/btn/cta-disabled.webp);--bs:44 110 44 110 fill;--cl:calc(110/90);--cr:calc(110/90)}
:is(.primary-button,.run-button):not(.cta){--bh:50px;--bi:url(./art/btn/primary-normal.webp);--bi-h:url(./art/btn/primary-hover.webp);--bi-p:url(./art/btn/primary-pressed.webp);--bi-d:url(./art/btn/primary-disabled.webp);--bs:41 62 41 62 fill;--cl:calc(62/84);--cr:calc(62/84)}
.outline-button:not(.danger){--bh:44px;--bi:url(./art/btn/secondary-normal.webp);--bi-h:url(./art/btn/secondary-hover.webp);--bi-p:url(./art/btn/secondary-pressed.webp);--bi-d:url(./art/btn/secondary-disabled.webp);--bs:42 64 42 64 fill;--cl:calc(64/86);--cr:calc(64/86)}
.back-button{--bh:38px;--bi:url(./art/btn/back-normal.webp);--bi-h:url(./art/btn/back-hover.webp);--bi-p:url(./art/btn/back-pressed.webp);--bi-d:url(./art/btn/back-disabled.webp);--bs:42 36 42 72 fill;--cl:calc(72/86);--cr:calc(36/86)}
.segment{--bh:40px;--bi:url(./art/btn/tab-normal.webp);--bi-h:url(./art/btn/tab-hover.webp);--bi-p:url(./art/btn/tab-pressed.webp);--bi-d:url(./art/btn/tab-disabled.webp);--bs:37 34 37 34 fill;--cl:calc(34/77);--cr:calc(34/77)}
:is(.icon-button,.drawer-close){--bh:38px;--bi:url(./art/btn/icon-normal.webp);--bi-h:url(./art/btn/icon-hover.webp);--bi-p:url(./art/btn/icon-pressed.webp);--bi-d:url(./art/btn/icon-disabled.webp);--bs:58 59 58 59 fill;--cl:calc(59/119);--cr:calc(59/119)}
.outline-button.danger{--bh:44px;--bi:url(./art/btn/danger-normal.webp);--bi-h:url(./art/btn/danger-hover.webp);--bi-p:url(./art/btn/danger-pressed.webp);--bi-d:url(./art/btn/danger-disabled.webp);--bs:41 64 41 64 fill;--cl:calc(64/85);--cr:calc(64/85)}
.link-button{--bh:34px;--bi:url(./art/btn/ghost-normal.webp);--bi-h:url(./art/btn/ghost-hover.webp);--bi-p:url(./art/btn/ghost-pressed.webp);--bi-d:url(./art/btn/ghost-disabled.webp);--bs:46 40 46 40 fill;--cl:calc(40/95);--cr:calc(40/95)}
.primary-button.cta{font-size:19px;letter-spacing:3px;color:#fff;text-shadow:0 2px 3px #02170f,0 0 14px #013d26}
#intro-screen .intro-actions .primary-button.cta{--bh:70px;width:100%;font-size:21px}
:is(.primary-button,.run-button):not(.cta){font-size:15px;color:#fff}
.run-button{--bh:40px;font-size:13px;gap:8px}.run-button kbd{color:#dff8ff;border-color:#dff8ff66}
.outline-button:not(.danger){color:#cfe8ff}
.outline-button.small{--bh:40px;font-size:13px}
.back-button{color:#cfe8ff;font-size:13px;letter-spacing:2px}
.segmented{display:inline-flex;gap:6px;background:none!important;border:0!important;padding:0!important;clip-path:none!important}
.segment{color:var(--muted);font-size:13px}.segment:hover{color:var(--text)}
.segment.active{color:#fff}.segment.active::before{border-image-source:var(--bi-p)}
:is(.icon-button,.drawer-close){width:var(--bh);padding:0!important;font-size:13px;letter-spacing:.5px;color:#cfe8ff}
.drawer-close{position:absolute}
.link-button{font-size:12px;letter-spacing:1.5px;color:#e5cf93}
.link-button:hover{color:#fff}
.dossier-more{clip-path:none!important}
.dossier-more .ico,.outline-button .ico{width:20px;height:20px}
/* Preload hover and pressed skins so the first hover never flickers */
body::after{content:"";position:fixed;width:1px;height:1px;left:-9px;top:-9px;opacity:.01;pointer-events:none;background:url(./art/btn/cta-hover.webp),url(./art/btn/cta-pressed.webp),url(./art/btn/primary-hover.webp),url(./art/btn/primary-pressed.webp),url(./art/btn/secondary-hover.webp),url(./art/btn/secondary-pressed.webp),url(./art/btn/back-hover.webp),url(./art/btn/back-pressed.webp),url(./art/btn/tab-hover.webp),url(./art/btn/tab-pressed.webp),url(./art/btn/icon-hover.webp),url(./art/btn/icon-pressed.webp),url(./art/btn/danger-hover.webp),url(./art/btn/danger-pressed.webp),url(./art/btn/ghost-hover.webp),url(./art/btn/ghost-pressed.webp)}
@media(max-width:900px){.primary-button.cta{font-size:17px}#intro-screen .intro-actions .primary-button.cta{--bh:62px;font-size:18px}}
/* The start button is now a framed plate: drop the old card frame around it */
.intro-actions,#intro-screen.guarded .intro-side .intro-actions{background:none;border:0;clip-path:none;padding:0;box-shadow:none;gap:10px;justify-items:center}
.intro-actions::before{display:none}
#intro-screen.guarded .intro-side .intro-actions{width:min(460px,calc(100% - 56px))}
.intro-actions .intro-xp{padding:5px 14px;background:#000c33cc;border:1px solid #2c4f96;font-size:13px}
@media(max-width:900px){:is(.icon-button,.drawer-close){--bh:32px;font-size:11px}.icon-button .ico{width:18px;height:18px}.primary-button.cta{font-size:16px;letter-spacing:1.5px;gap:8px}.primary-button.cta .ico{width:18px;height:18px}}

/* ===================== SCREEN TRANSITIONS: elements leave, new ones enter; levels open through a portal ===================== */
.anim-in{animation:el-in .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(140ms + var(--i,0) * 55ms)}
@keyframes el-in{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.lobby-menu>.anim-in,.path-list>.anim-in{animation-name:el-in-right}
@keyframes el-in-right{from{opacity:0;transform:translateX(60px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.lobby-rail>.anim-in{animation-name:el-in-left}
@keyframes el-in-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.lobby-dock>.anim-in,.lobby-ticker.anim-in{animation-name:el-in-up}
@keyframes el-in-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
:is(.lobby-stage,.path-guardian,.intro-side).anim-in{animation-name:el-in-stage;animation-duration:.8s}
@keyframes el-in-stage{from{opacity:0;transform:scale(.96);filter:blur(8px) brightness(1.6)}to{opacity:1;transform:none;filter:none}}
.anim-out{animation:el-out .24s ease-in both}
@keyframes el-out{to{opacity:0;transform:translateY(-14px) scale(.98);filter:blur(4px)}}
.lobby-menu>.anim-out,.path-list>.anim-out{animation-name:el-out-right}
@keyframes el-out-right{to{opacity:0;transform:translateX(50px)}}
.screen-leaving{position:fixed!important;left:0;right:0;z-index:4;pointer-events:none;overflow:hidden;margin:0}
.screen-leaving .intro-side{position:absolute}
/* The portal closes two carved doors over the scene with the seal in the middle, then opens on the level */
.portal{position:fixed;inset:0;z-index:60;display:block}
.portal[hidden]{display:none}
.portal-door{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#000c33 0%,#071d55 70%,#0b215e 100%);box-shadow:0 0 60px #000;transform:translateX(-101%);transition:transform .52s cubic-bezier(.7,0,.3,1)}
.portal-door::after{content:"";position:absolute;top:0;bottom:0;width:6px;background:linear-gradient(180deg,transparent,#85c8ff 20%,#cfe8ff 50%,#85c8ff 80%,transparent);box-shadow:0 0 24px #85c8ff88}
.portal-door.left{left:0}
.portal-door.left::after{right:0}
.portal-door.right{right:0;transform:translateX(101%);background:linear-gradient(270deg,#000c33 0%,#071d55 70%,#0b215e 100%)}
.portal-door.right::after{left:0}
.portal-seal{position:absolute;left:50%;top:50%;width:min(46vw,420px);height:auto;transform:translate(-50%,-50%) scale(.6);opacity:0;filter:drop-shadow(0 0 30px #85c8ff66);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s}
.portal.closing .portal-door{transform:none}
.portal.closing .portal-seal{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.25s}
.portal.opening .portal-door.left{transform:translateX(-101%)}
.portal.opening .portal-door.right{transform:translateX(101%)}
.portal.opening .portal-seal{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
@media(prefers-reduced-motion:reduce){.anim-in,.anim-out{animation:none}}

/* ===================== PERFORMANCE: transitions animate only opacity and transform (no blur or filter),
   decorative scene layers pause outside the lobby, and button skins are warmed from JS when idle ===================== */
@keyframes el-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes el-in-right{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes el-in-stage{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes el-out{to{opacity:0;transform:translateY(-14px) scale(.98)}}
@keyframes hero-in{0%{transform:translateX(70vw) scale(1.04);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
@keyframes guardian-in{0%{transform:translateY(40px) scale(.94);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes guardian-cover-in{0%{transform:translateX(60px) scale(1.06);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.anim-in,.anim-out{will-change:opacity,transform}
.lobby-art.enter,.guardian-art.enter{will-change:transform}
body::after{content:none;background:none}
body:not(.in-lobby) .beams{display:none}
body:not(.in-lobby) .fog{animation:none}
@media(max-width:900px){.fog{animation:none}}

/* Phones: one cheap shadow on the big art instead of three filter passes, and a solid HUD instead of a backdrop blur */
@media(max-width:900px){
  .lobby-art,.guardian-art,#intro-screen.guarded .intro-guardian .guardian-art{filter:drop-shadow(0 12px 24px #000b)}
  .hud-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#000c33f5}
  .drawer{backdrop-filter:none;-webkit-backdrop-filter:none;background:#030b19d9}
}

/* ===================== BEAT STAGE: rhythm strip that reacts to every keystroke ===================== */
.beat-stage{position:relative;height:150px;overflow:hidden;border:1px solid #2c4f96;border-left:3px solid var(--gold);
  background:radial-gradient(120% 140% at 18% 56%,#12305a66 0%,transparent 55%),linear-gradient(180deg,#000c33f0,#071d55f0);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.beat-stage[hidden]{display:none}
.beat-stage canvas{display:block;width:100%;height:100%}
.stage-toggle{--bh:30px!important;font-size:11px!important}
@media(max-width:900px){.beat-stage{height:112px}}

/* ===================== PLAY SCREEN: borderless stage and editor over the city, big typing deck, live data column ===================== */
#practice-screen .play-layout{width:100%;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,21vw,320px);grid-template-rows:auto minmax(0,1fr);gap:0 30px;height:calc(100vh - var(--hud-h));height:calc(100dvh - var(--hud-h));padding:12px 28px 16px 60px;overflow:hidden}
#practice-screen .play-layout>.screen-bar{grid-column:1/-1;margin:0 0 4px}
.play-main{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0}
/* Stage and editor lose their boxes */
#practice-screen .beat-stage{height:clamp(140px,21vh,190px);background:none;border:0;clip-path:none;-webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);transition:opacity .5s}
#practice-screen .editor-card{position:relative;display:flex;flex-direction:column;min-height:0;background:none!important;border:0!important;border-radius:0;box-shadow:none;overflow:visible;transition:opacity .55s ease,transform .55s ease}
#practice-screen .editor-card::before,#practice-screen .editor-card::after,#practice-screen .hud::before,#practice-screen .hud::after{display:none}
#practice-screen .editor-card:focus-within{border:0}
#practice-screen .panel-header{background:none;border:0;padding:4px 2px 0;justify-content:space-between;opacity:.75}
#practice-screen .editor-footer{border:0;background:none;padding:8px 2px 0;position:relative;z-index:3}
/* Typing deck */
.typing-deck{flex:1;min-height:0;display:none;align-content:center;justify-items:center;gap:clamp(10px,2.4vh,26px);text-align:center;padding:10px 0;--deck-size:34px}
.deck-mode .typing-deck{display:grid}
.deck-meta{font:600 11px var(--mono);letter-spacing:3px;color:var(--gold);opacity:.8}
.deck-line{max-width:100%;white-space:pre;overflow:hidden;font-family:var(--mono);font-variant-ligatures:none;line-height:1.25}
.deck-line.current{font-size:var(--deck-size);font-weight:600;color:#fff;text-shadow:0 0 22px #5bbeff26;padding:.12em .3em}
.deck-line.prev,.deck-line.next{font-size:calc(var(--deck-size) * .52);color:#c9d8ea}
.deck-line.prev{opacity:.34}
.deck-line.next{opacity:.5}
.deck-line.current span{display:inline-block;min-width:.6em;position:relative;transition:color .12s}
.deck-line.current .todo{color:#ffffff}
.deck-line.current .ok{color:#2dcccd;text-shadow:0 0 14px #2dcccd66}
.deck-line.current .bad{color:#f35e61;background:#f35e6126;box-shadow:inset 0 -3px #f35e61;text-shadow:0 0 14px #f35e6188;animation:bad-hit .25s}
.deck-line.current .sp{color:#ffffff38}
.deck-line.current .ok.nl,.deck-line.current .nl{color:#8aa0bb;opacity:.55}
.deck-line.current .cur{color:#fff;background:#5bbeff1f}
.deck-line.current .cur::before{content:"";position:absolute;left:-1px;top:8%;bottom:8%;width:3px;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:caret 1s steps(2) infinite}
.deck-line.current .cur.sp{color:#a6d8ff99}
.deck-line.current .cur.nl{color:var(--gold);opacity:1}
@keyframes caret{50%{opacity:0}}
/* Exam practice (quiz levels): the question and its four options above the deck, answered with a letter */
.quiz-card{position:relative;z-index:2;flex:none;margin:6px auto 0;width:min(100%,980px);padding:clamp(14px,2.2vh,22px) clamp(16px,2vw,26px);border:1px solid #2c4f96;border-left:3px solid var(--gold);background:linear-gradient(180deg,#071d55e6,#07101fe6);display:grid;gap:clamp(8px,1.4vh,14px)}
.quiz-card[hidden]{display:none}
.quiz-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.quiz-head small{font:600 11px var(--mono);letter-spacing:1.5px;color:#8aa0bb;text-transform:uppercase}
.quiz-text{margin:0;font-size:clamp(17px,1.35vw,22px);line-height:1.45;color:#eef4fb}
.quiz-options{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.quiz-option{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:10px 14px;border:1px solid #2c4f96;background:#071d55;color:#dbe6f3;font:inherit;font-size:clamp(14px,1vw,17px);line-height:1.4;cursor:pointer;transition:border-color .15s,background .15s}
.quiz-option:hover{border-color:#5bbeff;background:#10224a}
.quiz-option b{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font:700 14px var(--mono)}
.quiz-option.reveal{border-color:#2dcccd;background:#2dcccd14}
/* Answer feedback: green card + check when right (then the next question), red card + cross when wrong; the
   wrong options stay crossed out. */
.quiz-card{transition:border-color .2s,background .2s,box-shadow .2s}
.quiz-card.right{border-color:#2dcccd;border-left-color:#2dcccd;background:linear-gradient(180deg,#0d3a2cf0,#07201af0);box-shadow:0 0 0 1px #2dcccd55,0 0 34px #2dcccd3a}
.quiz-card.wrong{border-color:#f35e61;border-left-color:#f35e61;background:linear-gradient(180deg,#3a0f1cf0,#1f0710f0);box-shadow:0 0 0 1px #f35e6155,0 0 34px #f35e613a}
.quiz-card.right.pop{animation:quiz-right .45s cubic-bezier(.34,1.56,.64,1)}
.quiz-card.wrong.pop{animation:quiz-wrong .4s ease-in-out}
.quiz-verdict{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 6px;font:700 13px var(--mono);letter-spacing:1.5px;text-transform:uppercase}
.quiz-verdict .ico{width:26px;height:26px}
.quiz-card.right .quiz-verdict{color:#022a3a;background:#2dcccd}
.quiz-card.wrong .quiz-verdict{color:#fff;background:#f35e61}
.quiz-option.chosen-right{border-color:#2dcccd;background:#2dcccd26;color:#e6fbfb}
.quiz-option.chosen-right b{border-color:#2dcccd;background:#2dcccd;color:#022a3a}
.quiz-option.tried{border-color:#f35e6188;background:#f35e6114;color:#b99aa3;cursor:not-allowed}
.quiz-option.tried span{text-decoration:line-through;text-decoration-color:#f35e61}
.quiz-option.tried b{border-color:#f35e61;color:#f35e61}
.quiz-option.chosen-wrong{border-color:#f35e61;background:#f35e612e;color:#ffe3e8}
.quiz-option.tried:hover{border-color:#f35e6188;background:#f35e6114}
.quiz-card.right .quiz-option:not(.chosen-right){opacity:.45}
@keyframes quiz-right{0%{transform:scale(.98)}55%{transform:scale(1.015)}100%{transform:none}}
@keyframes quiz-wrong{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.quiz-card.pop{animation:none}}
.quiz-option.reveal b{border-color:#2dcccd;color:#2dcccd}
.quiz-review .quiz-review-q{color:#eef4fb;margin:0 0 6px}
.quiz-review .quiz-review-a{color:#2dcccd;margin:0 0 6px}
.quiz-review .quiz-review-a b{font-family:var(--mono);margin-right:4px}
/* Exam review: the four options of each question, the right one in jade with its why, the ones picked by mistake
   in red, and under every other option why it was not the answer. */
.quiz-review-options{list-style:none;margin:8px 0 2px;padding:0;display:grid;gap:6px}
.quiz-review-options li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;border:1px solid #2c4f9666;border-left:3px solid #2c4f96;background:#000c3366}
.quiz-review-options li>b{width:24px;height:24px;display:grid;place-items:center;border:1px solid #3b5a86;color:#8aa0bb;font:700 12px var(--mono)}
.quiz-review-options li>div{display:grid;gap:3px;min-width:0}
.quiz-review-options li span{color:#dbe6f3;font-size:clamp(13.5px,.85vw,16px);line-height:1.45}
.quiz-review-options li small{color:var(--muted);font-size:clamp(12.5px,.78vw,14.5px);line-height:1.5}
.quiz-review-options li em{display:inline-flex;align-items:center;gap:5px;font:700 10px var(--mono);font-style:normal;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.quiz-review-options li em .ico{width:16px;height:16px}
.quiz-review-options li.right{border-color:#2dcccd55;border-left-color:#2dcccd;background:#2dcccd0f}
.quiz-review-options li.right>b{border-color:#2dcccd;background:#2dcccd;color:#022a3a}
.quiz-review-options li.right span{color:#e6fbfb}
.quiz-review-options li.right small{color:#b8e8d2}
.quiz-review-options li.right em{color:#2dcccd}
.quiz-review-options li.picked{border-color:#f35e6155;border-left-color:#f35e61;background:#f35e610d}
.quiz-review-options li.picked>b{border-color:#f35e61;color:#f35e61}
.quiz-review-options li.picked em{color:#f35e61}
@media(max-width:700px){.quiz-review-options li{grid-template-columns:24px minmax(0,1fr)}.quiz-review-options li em{grid-column:2}}
@media(max-width:900px){.quiz-options{grid-template-columns:1fr}}
@keyframes bad-hit{0%{transform:translateX(-3px)}50%{transform:translateX(3px)}100%{transform:none}}
.typing-deck[data-shift="a"] .deck-line{animation:deck-shift-a .38s cubic-bezier(.16,1,.3,1)}
.typing-deck[data-shift="b"] .deck-line{animation:deck-shift-b .38s cubic-bezier(.16,1,.3,1)}
@keyframes deck-shift-a{from{transform:translateY(26px);opacity:.2}to{transform:none}}
@keyframes deck-shift-b{from{transform:translateY(26px);opacity:.2}to{transform:none}}
/* The real textarea stays on top of the deck, invisible, so clicks and the phone keyboard keep working */
.deck-mode .code-scroll{position:absolute;left:0;right:0;top:0;bottom:44px;height:auto;padding:0;overflow:hidden;opacity:0;z-index:2}
.deck-mode .editor-area{width:100%!important;height:100%!important}
.deck-mode #code-input{left:0;width:100%;min-width:0;height:100%;cursor:text}
.deck-mode #code-display,.deck-mode .line-numbers{display:none}
#practice-screen .editor-card:not(.deck-mode) .code-scroll{flex:1;height:auto;min-height:0;padding:18px 12px 18px 0}
/* Live data column */
#practice-screen .hud.play-stats{grid-row:2;grid-column:2;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);padding:12px 0 12px 24px;background:none!important;border:0;border-left:1px solid #2c4f9680;border-radius:0;clip-path:none;box-shadow:none;overflow:auto;scrollbar-width:none;min-height:0}
.stat-block{display:grid;gap:4px}
.stat-block>span{display:flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}
.stat-block>span .ico{width:20px;height:20px}
.stat-block>span em{font-style:normal}
.stat-block strong{font:700 clamp(30px,3.2vw,44px)/1 var(--condensed);color:var(--text);letter-spacing:1px}
.stat-block strong small{font-size:.45em;color:var(--dim);margin-left:2px}
.stat-speed strong{font-size:clamp(44px,4.6vw,64px);color:#fff;text-shadow:0 0 26px #5bbeff44}
.stat-sub{font:12px var(--mono);color:var(--muted)}
.hud-combo strong{color:var(--gold);text-shadow:0 0 20px #85c8ff55}
.hud-combo.hot strong{animation:combo-glow 1.2s ease-in-out infinite}
@keyframes combo-glow{50%{text-shadow:0 0 34px #a6d8ffaa}}
.stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-block.small strong{font-size:26px}
.spark{display:block;width:100%;height:56px;margin-top:4px;overflow:visible}
.spark .line,.chart .line{fill:none;stroke:#5bbeff;stroke-width:2.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #5bbeff88)}
#practice-screen .progress{height:6px;background:#ffffff14;border:0;border-radius:0}
#practice-screen .progress.thin{height:3px}
#practice-screen .progress i{background:linear-gradient(90deg,#1973b8,#5bbeff);box-shadow:0 0 10px #5bbeff88}
.stat-rewards{display:grid;gap:8px;margin-top:auto}
.reward-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:190px;overflow:auto;scrollbar-width:none}
.reward-list .reward-empty{font-size:12px;color:var(--dim);line-height:1.5}
.reward-list .reward{display:flex;align-items:center;gap:10px;padding:6px 10px;background:linear-gradient(90deg,#85c8ff26,transparent);border-left:2px solid var(--gold);animation:reward-in .6s cubic-bezier(.16,1,.3,1)}
.reward-list .reward .ico{width:30px;height:30px;filter:drop-shadow(0 0 8px #a6d8ff88)}
.reward-list .reward span{display:grid}
.reward-list .reward b{font:700 15px/1 var(--condensed);letter-spacing:2px;color:#f2f8ff}
.reward-list .reward small{font:11px var(--mono);color:var(--gold)}
@keyframes reward-in{from{opacity:0;transform:translateX(40px) scale(.9)}60%{transform:translateX(-4px) scale(1.04)}to{opacity:1;transform:none}}
#practice-screen .hud-flash{top:auto;bottom:0;right:0}
/* Result panel: the lines fade out, the results rise in the same place; no page scroll */
#result-panel{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;background:none!important;border:0!important;box-shadow:none;border-radius:0;overflow:auto;scrollbar-width:thin;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .5s ease .15s,transform .6s cubic-bezier(.16,1,.3,1) .15s,visibility 0s linear .7s;pointer-events:none}
#result-panel::before,#result-panel::after{display:none}
#result-panel>.panel-header{display:none}
#result-panel .console-body{padding:8px 4px;width:min(100%,980px);margin:0 auto}
.evaluating-mode #result-panel,.results-mode #result-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:.15s,.15s,0s}
.evaluating-mode .play-main>.editor-card,.results-mode .play-main>.editor-card{opacity:0;transform:translateY(-16px) scale(.98);pointer-events:none}
.results-mode .play-main>.beat-stage{opacity:.18}
.result-output{display:grid;gap:6px;margin-top:14px}
.result-output pre{margin:0;max-height:88px;overflow:auto;padding:10px 12px;background:#000c33b3;border-left:2px solid #2c4f96;font:13px/1.6 var(--mono)!important;color:#c9d8ea}
.evaluating-mode .result-output{margin:0 auto;text-align:center}
.evaluating-mode .result-output .eyebrow{display:none}
.evaluating-mode .result-output pre{background:none;border:0;font-size:16px!important;color:var(--accent);animation:caret 1.2s ease-in-out infinite}
.results-mode.failed .result-output pre{max-height:38vh;border-left-color:#f35e61;color:#ffc2cc}
#result-details .result-heading{margin:0 0 6px;text-align:center;font:700 clamp(38px,5.2vw,76px)/1 var(--condensed);letter-spacing:4px;text-transform:uppercase;background:linear-gradient(180deg,#f2f8ff 10%,#cfe8ff 55%,#4f8fd8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px #85c8ff55);animation:result-drop .8s cubic-bezier(.16,1,.3,1) both}
#result-details .result-heading.error{background:linear-gradient(180deg,#ffd6dc,#f35e61);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 24px #f35e6155)}
@keyframes result-drop{from{opacity:0;transform:translateY(-30px) scale(1.25);letter-spacing:14px}to{opacity:1;transform:none}}
.result-hero{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);margin:4px 0 10px}
.result-hero::before{content:"";position:absolute;left:50%;top:50%;width:min(520px,80vw);height:min(520px,80vw);transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#a6d8ff14 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);animation:rays 18s linear infinite;pointer-events:none;z-index:-1}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.result-hero .slots{margin:0}
.result-hero .slots .emb{width:clamp(96px,11vw,150px);height:clamp(96px,11vw,150px);filter:drop-shadow(0 0 30px #a6d8ff77);animation:medal-in 1s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes medal-in{from{opacity:0;transform:scale(.3) rotate(-35deg)}70%{transform:scale(1.12) rotate(6deg)}to{opacity:1;transform:none}}
.result-hero .result-gain{margin:0;display:grid;justify-items:start;gap:4px;animation:result-drop .8s cubic-bezier(.16,1,.3,1) .35s both}
.result-hero .result-gain strong{font-size:clamp(56px,7vw,104px);color:#fff;text-shadow:0 0 40px #5bbeffaa}
.result-hero .gain-label{display:flex;align-items:center;gap:8px;font:700 14px var(--mono);letter-spacing:3px;color:var(--accent)}
.result-hero .gain-label .ico{width:22px;height:22px}
#result-metrics{display:none}
.result-board{display:grid;gap:14px;justify-items:center}
.board-title{letter-spacing:3px}
.awards{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px}
.award{display:grid;justify-items:center;gap:6px;width:96px;text-align:center;opacity:.32;filter:grayscale(1);animation:award-in .6s cubic-bezier(.16,1,.3,1) calc(.55s + var(--d) * .09s) both}
.award.got{opacity:1;filter:none}
.award-gem{width:58px;height:58px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#12306ecc,#071d55cc);border:1px solid #2c4f96;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.award.got .award-gem{border-color:var(--gold);background:radial-gradient(circle at 50% 35%,#3a2d12,#071d55);box-shadow:inset 0 0 18px #a6d8ff55}
.award-gem .ico{width:34px;height:34px}
.award b{font:700 11px/1.2 var(--condensed);letter-spacing:1.2px;text-transform:uppercase;color:#cfe8ff}
@keyframes award-in{from{opacity:0;transform:translateY(20px) scale(.6)}}
.charts{width:100%;display:grid;grid-template-columns:1.6fr .9fr 1.3fr;gap:14px}
.chart{margin:0;display:grid;grid-template-rows:auto 1fr;gap:8px;padding:14px 16px;background:linear-gradient(160deg,#071d5580,#000c3366);border:1px solid #2c4f9666;border-top-color:#5bbeff33;animation:award-in .7s cubic-bezier(.16,1,.3,1) calc(.8s + var(--i,0) * .12s) both;min-width:0}
.chart:nth-child(2){--i:1}.chart:nth-child(3){--i:2}
.chart figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.chart figcaption b{font:700 26px/1 var(--condensed);color:#fff}
.chart figcaption b small{font-size:12px;color:var(--dim)}
.chart figcaption small{font:11px var(--mono);color:var(--muted)}
.chart svg{width:100%;height:110px;overflow:visible}
.chart .line{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.6s ease-out 1s forwards}
.chart .area{opacity:0;animation:fade-in .8s ease 1.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade-in{to{opacity:1}}
.donut{position:relative;display:grid;place-items:center}
.donut svg{width:min(120px,100%);height:auto;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:9}
.donut .track{stroke:#ffffff12}
.donut .value{stroke:url(#none);stroke:#2dcccd;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);animation:donut 1.4s cubic-bezier(.16,1,.3,1) 1.1s forwards;filter:drop-shadow(0 0 6px #2dcccd88)}
@keyframes donut{to{stroke-dashoffset:var(--v)}}
.donut b{position:absolute;font:700 30px/1 var(--condensed);color:#fff}
.donut b small{font-size:14px;color:var(--dim)}
.bars{display:flex;align-items:flex-end;gap:5px;height:110px}
.bar{flex:1;max-width:22px;height:var(--h);display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,#2dcccd99,#2dcccd26);border-top:2px solid #2dcccd;transform-origin:bottom;animation:grow .7s cubic-bezier(.16,1,.3,1) calc(1.1s + var(--d) * .06s) both}
.bar i{display:block;height:var(--e);background:linear-gradient(180deg,#f35e61cc,#f35e6155)}
@keyframes grow{from{transform:scaleY(0)}}
.chart-attempts{justify-items:center;text-align:center}
.big-number{font:700 64px/1 var(--condensed);color:#fff}
#result-panel .result-events{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0}
#result-panel .result-events .event{background:#071d5599;border:1px solid #2c4f9666}
#result-panel .result-note{text-align:center;margin:10px 0 0;font-size:12px;color:var(--dim)}
#result-panel .result-actions{justify-content:center;margin-top:16px}
#result-panel .boss-bar{max-width:640px;margin:0 auto 10px}
@media(max-height:820px){.result-hero .result-gain strong{font-size:clamp(46px,5.5vw,80px)}.result-hero .slots .emb{width:96px;height:96px}.chart svg,.bars{height:84px}.award-gem{width:48px;height:48px}.award-gem .ico{width:28px;height:28px}}
@media(max-width:1100px){#practice-screen .play-layout{padding-left:24px;gap:0 20px}.charts{grid-template-columns:1fr 1fr}.chart-speed{grid-column:1/-1}}
/* Phones: stats on top, editor below, results as a full-screen layer with its own scroll */
@media(max-width:900px){
  #practice-screen .play-layout{display:block;height:auto;overflow:visible;padding:14px 16px 24px}
  #practice-screen .hud.play-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:6px 0 14px;border:0;border-bottom:1px solid #2c4f9680;overflow:visible}
  #practice-screen .hud.play-stats .spark,#practice-screen .stat-rewards,.stat-sub{display:none}
  .stat-block strong,.stat-speed strong{font-size:28px}
  .stat-pair{grid-column:1/-1}
  .play-main{display:block;margin-top:10px}
  #practice-screen .editor-card{min-height:52vh}
  .typing-deck{min-height:40vh}
  #result-panel{position:fixed;inset:var(--hud-h) 0 0 0;padding:18px 16px 30px;background:#000c33f2!important;justify-content:flex-start}
  .charts{grid-template-columns:1fr}
  .result-hero{flex-direction:column;gap:8px}
  .result-hero .result-gain{justify-items:center}
}

/* Play screen fixes: panel content centers with auto margins (never clipped), medal without the old slot frame, no page scroll */
@media(min-width:901px){body.in-play{overflow:hidden}}
#result-panel{justify-content:flex-start}
#result-panel .console-body{margin:auto}
.result-hero .slots i.emb{transform:none;border:0;opacity:1;box-shadow:none;background-color:transparent}
#practice-screen .hud-flash{display:none}
#result-panel .result-events{margin-top:10px}
#result-panel .result-events .event{padding:6px 12px;font-size:12px}
#result-panel .result-events .event .ico{width:18px;height:18px}
#result-panel .result-actions{margin-top:12px}
.result-output{margin-top:10px}
.result-output pre{max-height:64px}
.award{width:88px}
@media(max-height:900px){#result-details .result-heading{font-size:clamp(34px,4.4vw,60px)}.result-hero{margin:0 0 4px}.result-board{gap:10px}}
/* The result medal: restore the emblem sprite that the old .slots rule resets */
.result-hero .slots i.emb{background:url("./art/emblems.webp") no-repeat;background-size:500% 200%}
.result-hero .slots i.emb-medal-gold{background-position:0% 100%}
.result-hero .slots i.emb-medal-silver{background-position:25% 100%}
.result-hero .slots i.emb-medal-bronze{background-position:50% 100%}
#result-panel{scrollbar-width:none}
#result-panel::-webkit-scrollbar{display:none}
/* Short screens (720-780 px): the result keeps its drama but compacts so the actions stay in view */
@media(min-width:901px) and (max-height:780px){
  #result-details .result-heading{font-size:clamp(30px,3.6vw,46px);letter-spacing:3px}
  .result-hero{gap:18px}
  .result-hero::before{width:360px;height:360px}
  .result-hero .slots .emb{width:72px!important;height:72px!important}
  .result-hero .result-gain strong{font-size:54px}
  .board-title{display:none}
  .award{width:78px;gap:4px}
  .award-gem{width:40px;height:40px}.award-gem .ico{width:24px;height:24px}
  .award b{font-size:10px}
  .chart{padding:10px 12px;gap:4px}
  .chart svg,.bars{height:58px}
  .donut svg{width:70px}.donut b{font-size:20px}
  .chart figcaption b{font-size:20px}
  #result-panel .result-note,.result-output{display:none}
  .results-mode.failed .result-output{display:grid}
  #result-panel .result-events{margin-top:6px}
  #result-panel .result-actions{margin-top:8px}
  #result-panel .primary-button.cta{--bh:54px}
}
/* Phones: glow on every typed letter is expensive to repaint at high pixel density, keep colors only */
@media(max-width:900px){
  .deck-line.current,.deck-line.current span{text-shadow:none!important;transition:none}
  .deck-line.current .cur::before{box-shadow:none}
  #practice-screen .stat-block strong{text-shadow:none}
  #practice-screen .progress i{box-shadow:none}
}
/* The editor is transparent now, so every keystroke would repaint the city behind it. The scene lives on its
   own compositor layer and the typing deck and stat blocks contain their layout, so a key only repaints the letters. */
.scene{will-change:transform;contain:strict}
.typing-deck{contain:layout style}
.deck-line{contain:layout style}
#practice-screen .stat-block{contain:layout style}
/* Width transitions on the live bars re-ran layout on every frame while typing; the bars update per key instantly */
#practice-screen .progress i{transition:none}
@media(max-width:900px){.hud-combo.hot strong{animation:none}}
/* Phones: the HUD bar wraps to two rows, so the result layer covers the whole screen above it */
@media(max-width:900px){#result-panel{inset:0;z-index:30;padding-top:max(20px,env(safe-area-inset-top))}}

/* Typing latency: blurred text-shadows on every letter, an SVG filter on the live chart and a CSS mask on the
   stage canvas were repainted on each key or frame. Colors and sharp strokes keep the look at a fraction of the cost. */
.deck-line.current,.deck-line.current span{text-shadow:none!important;transition:none!important}
.deck-line.current .cur::before{box-shadow:none}
.spark .line{filter:none}
#practice-screen .beat-stage{-webkit-mask:none;mask:none}
.deck-line.current .ok{color:#2dcccd}
.deck-line.current .bad{animation:none}

/* ===================== ON-SCREEN KEYBOARD (desktop): lights the key the player presses ===================== */
.play-main{grid-template-rows:auto minmax(0,1fr) auto}
.keyboard{display:none;justify-self:center;width:min(100%,720px);padding:4px 0 2px;transition:opacity .5s}
.play-main .keyboard.show{display:block}
.kb-board{position:relative}
.kb-image{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
/* Each lit key is its own compositor layer that only changes opacity: nothing is repainted per keystroke */
.kb-glow{position:absolute;display:block;border-radius:6px;background:#2dcccd4d;box-shadow:inset 0 0 0 2px #2dcccd;opacity:0;will-change:opacity;pointer-events:none}
.kb-glow.on{opacity:1}
.kb-glow.bad{background:#f35e614d;box-shadow:inset 0 0 0 2px #f35e61}
.evaluating-mode .keyboard,.results-mode .keyboard{opacity:0}
@media(max-height:820px){.keyboard{width:min(100%,560px)}}
@media(max-height:700px){.keyboard{width:min(100%,460px)}}
@media(max-width:900px){.keyboard{display:none!important}}
/* Bigger letters: the size comes from the current line; lines can grow up to 68 px */
.deck-line.prev,.deck-line.next{font-size:calc(var(--deck-size) * .5)}
/* Short screens: the stage and the keyboard shrink so the typing deck keeps its room */
@media(min-width:901px) and (max-height:820px){#practice-screen .beat-stage{height:clamp(104px,15vh,130px)}.typing-deck{gap:6px}}
@media(min-width:901px) and (max-height:760px){.keyboard{width:min(100%,400px)}}

/* ===================== PLAY LAYOUT FIX: fixed rows so hiding the mini game never pushes the keyboard up,
   giant typing line, small keyboard pinned to the bottom ===================== */
.play-main{grid-template-rows:auto minmax(0,1fr) auto}
.play-main>.beat-stage{grid-row:1}
.play-main>.editor-card{grid-row:2}
.play-main>.keyboard{grid-row:3;align-self:end}
.deck-line.prev,.deck-line.next{font-size:calc(var(--deck-size) * .38)}
.deck-line.current{padding:0 .15em;line-height:1.1}
.typing-deck{gap:clamp(6px,1.4vh,16px);padding:0}
.deck-meta{font-size:12px}
.keyboard{width:clamp(300px,30vw,480px);padding:6px 0 0;opacity:.85}
@media(min-width:901px) and (max-height:820px){.keyboard{width:clamp(280px,26vw,400px)}}
@media(min-width:901px) and (max-height:700px){.keyboard{width:clamp(260px,22vw,340px)}}
/* The focused result action glows so it is obvious that Enter will press it */
#result-actions button:focus-visible{outline:0}
#result-actions button:focus-visible::before{filter:brightness(1.25) drop-shadow(0 0 14px #2dcccd99)}
#result-actions button:focus-visible{transform:scale(1.04)!important;transition:transform .15s}
/* ===================== INTRO READABILITY (desktop): type scales with the screen, roomier cards and spacing ===================== */
@media(min-width:901px){
  #intro-screen .intro-content>#intro-category{font-size:clamp(13px,.8vw,16px);letter-spacing:2px}
  #intro-screen .intro-content>h1{font-size:clamp(46px,3.6vw,72px);margin:10px 0 16px}
  #intro-screen .intro-description{font-size:clamp(20px,1.35vw,27px);line-height:1.6;margin:0 0 clamp(30px,3vh,46px);max-width:60ch}
  #intro-screen .concept-deck{gap:clamp(20px,2.2vh,30px);margin:0 0 clamp(30px,3.4vh,48px)}
  #intro-screen .concept-deck>.eyebrow,#intro-screen .learning-panel .eyebrow{font-size:clamp(13px,.78vw,15px);letter-spacing:2.5px}
  #intro-screen .concept-lead{font-size:clamp(19px,1.2vw,24px);line-height:1.65;margin:0 0 6px}
  #intro-screen .concept-card{gap:clamp(16px,1.6vh,22px);padding:clamp(26px,2.6vh,36px) clamp(28px,2vw,42px) clamp(26px,2.4vh,34px)}
  #intro-screen .concept-card header b{font-size:clamp(30px,2vw,40px)}
  #intro-screen .concept-index{font-size:clamp(11px,.7vw,13px)}
  #intro-screen .concept-card h3{font-size:clamp(28px,1.8vw,36px);letter-spacing:2px}
  #intro-screen .concept-card p{font-size:clamp(17px,1.08vw,21px);line-height:1.75}
  #intro-screen .concept-code{gap:10px}
  #intro-screen .concept-code-label{font-size:clamp(12px,.75vw,14px)}
  #intro-screen .concept-card .code-sample{font-size:clamp(15px,.98vw,19px);line-height:1.7;padding:clamp(16px,1.6vh,22px) clamp(18px,1.3vw,26px)}
  #intro-screen .concept-note{font-size:clamp(16px,.98vw,19px)!important;line-height:1.7;padding-left:18px}
  #intro-screen .learning-panel{padding:clamp(26px,2.6vh,36px) clamp(28px,2vw,42px)}
  #intro-screen .learning-panel p{font-size:clamp(21px,1.35vw,27px);line-height:1.6;margin-top:14px}
  #intro-screen .intro-tip{font-size:clamp(17px,1.08vw,21px);line-height:1.75;margin:clamp(22px,2.4vh,32px) 0 clamp(24px,2.6vh,36px);padding-left:20px}
  #intro-screen .intro-note{font-size:clamp(14px,.85vw,17px)}
}

/* HTML levels: the result shows a live, sandboxed preview of the page next to its visible text */
.html-preview{display:block;width:100%;height:clamp(160px,24vh,260px);border:1px solid #2c4f96;background:#fff;border-radius:4px}
.html-preview[hidden]{display:none}
@media(min-width:901px) and (max-height:780px){.results-mode .html-preview{display:none}}

/* CSS levels: the page being styled is shown inside the mission panel */
.intro-fixture{display:grid;gap:8px;margin-top:18px}
.intro-fixture[hidden]{display:none}
@media(min-width:901px){#intro-screen .intro-fixture .code-sample{font-size:clamp(14px,.9vw,18px);line-height:1.6}}
/* ===================== HISTORY READABILITY (desktop): wider drawer and type that scales with the screen ===================== */
@media(min-width:901px){
  .drawer[data-kind="history"] .drawer-inner{width:clamp(620px,44vw,900px);padding:76px clamp(30px,2.6vw,52px) 40px clamp(96px,6vw,120px)}
  .drawer[data-kind="history"] .history-card{gap:clamp(16px,1.8vh,24px);padding:clamp(26px,2.6vh,36px) clamp(28px,2vw,42px)}
  .history-card>.eyebrow,.history-body .eyebrow{font-size:clamp(13px,.8vw,15px);letter-spacing:2.5px;margin-top:6px}
  .history-name{font-size:clamp(48px,3.4vw,68px);letter-spacing:4px}
  .history-tagline{font-size:clamp(18px,1.15vw,23px);line-height:1.6;margin:0 0 6px}
  .history-body{gap:clamp(14px,1.6vh,22px)}
  .history-body .facts{gap:12px 16px}
  .history-body .fact{padding:clamp(12px,1.2vh,16px) clamp(14px,1vw,18px);gap:6px}
  .history-body .fact dt{font-size:clamp(11px,.7vw,13px);letter-spacing:2px}
  .history-body .fact dd{font-size:clamp(16px,1vw,20px);line-height:1.45}
  .history-paragraph{font-size:clamp(17px,1.08vw,21px);line-height:1.8}
  .history-card .code-sample{font-size:clamp(15px,.95vw,18px);line-height:1.7;padding:clamp(16px,1.6vh,22px) clamp(18px,1.3vw,26px)}
  /* The summary strip on the language screen follows the same scale */
  .dossier-summary{font-size:clamp(16px,1vw,20px);line-height:1.65}
  .facts.compact .fact dt{font-size:clamp(10px,.62vw,12px)}
  .facts.compact .fact dd{font-size:clamp(14px,.88vw,17px)}
}

/* ===================== ACCOUNT BUTTON IN THE HUD: always reachable to save progress; the logo is the home button ===================== */
.hud-bar .account-link{--bh:36px;font-size:12px;gap:8px;white-space:nowrap}
.hud-bar .account-link .ico{width:20px;height:20px}
.hud-bar .account-link.guest{color:#f2f8ff;animation:account-call 2.6s ease-in-out infinite}
@keyframes account-call{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px #85c8ff99) brightness(1.15)}}
@media(prefers-reduced-motion:reduce){.hud-bar .account-link.guest{animation:none}}
@media(max-width:900px){.hud-bar .account-link{--bh:32px;font-size:11px;gap:6px}.hud-bar .account-link .ico{width:16px;height:16px}}

/* ===================== PATH COMPLETED: briefing of the next path over its checkpoint screen ===================== */
.track-unlock{z-index:31}
.unlock-card{--course:var(--gold);position:relative;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:end;width:min(860px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:34px 38px;background:linear-gradient(165deg,#0a1f5afa,#04133ff5);border:1px solid color-mix(in srgb,var(--course) 55%,transparent);border-left:3px solid var(--course);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);box-shadow:0 40px 120px #000c,0 0 60px color-mix(in srgb,var(--course) 20%,transparent);animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.track-unlock .unlock-card{--course:inherit}
.unlock-card:has(.unlock-guardian[hidden]){grid-template-columns:1fr}
.unlock-guardian{width:100%;height:auto;max-height:340px;object-fit:contain;filter:drop-shadow(0 20px 30px #000c) drop-shadow(0 0 40px color-mix(in srgb,var(--course) 30%,transparent));animation:guardian-in .9s cubic-bezier(.16,1,.3,1) both}
.unlock-body{display:grid;gap:10px;min-width:0}
.unlock-done{margin:0;font-size:16px;color:#dbe7f5}
.unlock-index{margin-top:8px;font:600 12px var(--mono);letter-spacing:3px;color:var(--course)}
.unlock-title{font:900 clamp(36px,5vw,58px)/1 'Libre Franklin','Arial Black',Impact,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--course);text-shadow:0 0 30px color-mix(in srgb,var(--course) 40%,transparent)}
.unlock-epithet{margin:0;font:600 12px var(--mono);letter-spacing:1px;color:var(--muted)}
.unlock-description{margin:4px 0 0;font-size:16px;line-height:1.6;color:#c9d8ea;max-width:60ch}
.unlock-levels{list-style:none;counter-reset:lvl;margin:6px 0 0;padding:0;display:grid;gap:6px}
.unlock-levels li{counter-increment:lvl;display:flex;align-items:baseline;gap:12px;padding:8px 12px;background:#000c33b3;border:1px solid #1f3f84}
.unlock-levels li::before{content:counter(lvl,decimal-leading-zero);font:600 12px var(--mono);color:var(--course)}
.unlock-levels li span{flex:1;font:700 15px var(--condensed);letter-spacing:1px;text-transform:uppercase;color:var(--text)}
.unlock-levels li small{font:11px var(--mono);color:var(--dim)}
.unlock-note{margin:0;font:600 12px var(--mono);color:#2dcccd}
.unlock-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
@media(max-width:700px){.unlock-card{grid-template-columns:1fr;padding:26px 20px}.unlock-guardian{max-height:200px}}

/* Finished path: the way forward sits under the progress */
.path-next{display:grid;gap:12px;margin-top:22px;padding:16px 18px;background:linear-gradient(90deg,#071d55f2,#071d5599);border:1px solid color-mix(in srgb,var(--course,var(--gold)) 50%,transparent);border-left:3px solid var(--course,var(--gold));animation:el-in .6s cubic-bezier(.16,1,.3,1) both}
.path-next[hidden]{display:none}
.path-next p{margin:0;font:600 13px var(--mono);letter-spacing:.5px;color:#dbe7f5}
.path-next .primary-button.cta{justify-self:stretch;width:100%;font-size:15px;letter-spacing:2px}

/* ===================== DESKTOP DOWNLOAD (bottom-right of the lobby, replaces the dock) ===================== */
.lobby-dock{align-items:flex-end}
.download-card{display:grid;justify-items:end;gap:8px;padding:14px 18px 10px;text-align:right;background:linear-gradient(270deg,#000c33e6 0%,#000c33b3 70%,transparent 100%)}
.download-card .eyebrow{font-size:11px;letter-spacing:2.5px}
.download-button{--bh:66px!important;min-width:360px;font-size:19px!important;gap:14px!important;text-decoration:none}
.download-button .win-logo{width:24px;height:24px;fill:currentColor;flex:none;filter:drop-shadow(0 1px 2px #02170f)}
.download-button.is-soon{pointer-events:none}
.download-meta{font:11px var(--mono);letter-spacing:.5px;color:var(--muted)}
.download-soon{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);letter-spacing:1px;color:var(--gold)}
.download-soon .ico{width:16px;height:16px}
@media(max-width:1100px){.download-button{min-width:300px;--bh:58px!important;font-size:16px!important}}
@media(max-width:900px){.download-card{justify-items:stretch;text-align:left;background:none;padding:0}.download-button{min-width:0;width:100%}}
/* RESULTS REVIEW: the board splits in two columns (summary | your code line by line + what it outputs), each
   scrolling from the top; the live data column hides because the board already has those numbers. */
.result-review{display:grid;gap:12px;align-content:start;min-width:0}
.review-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.review-head small{font:11px var(--mono);color:var(--muted)}
.review-lines{list-style:none;margin:0;padding:4px;background:linear-gradient(160deg,#000c33cc,#071d55b3);border:1px solid #2c4f9666}
.review-line{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:9px 12px 10px 10px;border-bottom:1px solid #2c4f9640}
.review-line:last-child{border-bottom:0}
.review-line.has-errors{background:#f35e610d}
.review-no{display:grid;align-content:start;justify-items:end;font:600 12px/1.6 var(--mono);color:var(--dim)}
.review-no small{font:10px var(--mono);color:#f35e61}
.has-errors .review-no{color:#f35e61}
.review-line .code-sample{padding:0;background:none;border:0;font-size:clamp(14px,.85vw,17px);white-space:pre-wrap;overflow:visible}
.review-line p{margin:5px 0 0;font-size:clamp(13px,.8vw,15.5px);line-height:1.5;color:var(--muted)}
.review-line p code{font:inherit;font-family:var(--mono);color:#7fcaff}
.result-review .result-output{display:grid;gap:10px;margin:8px 0 0}
.result-review .result-output pre{max-height:none}
.review-story{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.result-charts{width:100%}
.result-charts .charts{grid-template-columns:1.6fr .9fr;margin-top:6px}
.chart-time{justify-items:center;text-align:center}
.chart-time .big-number{font-size:52px}
.chart-time small{font:11px var(--mono);color:var(--muted)}
.results-mode:not(.failed) .result-metrics{display:none}
@media(min-width:901px){
  #practice-screen.results-mode .play-layout,#practice-screen.evaluating-mode .play-layout{grid-template-columns:minmax(0,1fr) 0;gap:0}
  #practice-screen.results-mode .hud.play-stats,#practice-screen.evaluating-mode .hud.play-stats{display:none}
  #result-panel{overflow:hidden}
  #result-panel .console-body{width:100%;height:100%;margin:0;padding:0}
  .result-columns{display:grid;grid-template-columns:minmax(0,1.15fr) 1px minmax(0,1fr);gap:0 clamp(24px,2.4vw,48px);height:100%}
  .result-columns::before{content:"";grid-column:2;grid-row:1;background:#2c4f9680}
  .result-summary{grid-column:1;grid-row:1}
  .result-review{grid-column:3;grid-row:1}
  .result-summary,.result-review{overflow:auto;min-height:0;padding:4px 14px 24px 0;scrollbar-width:thin}
  .result-review{animation:review-in .6s ease .9s both}
  .result-review .result-output,.results-mode .result-review .html-preview{display:grid}
  .result-review .html-preview[hidden]{display:none}
}
@media(max-width:900px){
  .result-review{margin-top:24px}
  .result-charts .charts{grid-template-columns:1fr}
}
@keyframes review-in{from{opacity:0}}
/* NAHUAL STAGE: the rhythm mini game covers the whole play area behind the typing deck (desktop widths); the
   stage row stays as the room where the vine runs above the text, and the deck lines get dark plates so the
   letters stay readable over it. */
@media(min-width:901px){
  #practice-screen .beat-stage{position:static;height:clamp(150px,26vh,300px);background:none;border:0;overflow:visible;-webkit-mask:none;mask:none;pointer-events:none}
  #practice-screen .beat-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .play-main>.editor-card{position:relative;z-index:1}
  .play-main>.keyboard{position:relative;z-index:1}
  .deck-mode .deck-line{background:#000c33b8;box-shadow:0 0 0 1px #2c4f9640;padding:.1em .45em;border-radius:4px}
  .deck-mode .deck-line.prev,.deck-mode .deck-line.next{background:#000c3399}
}
.result-rhythm{margin:0 0 6px;text-align:center;font:600 13px var(--mono);letter-spacing:1.5px;color:var(--gold)}
.result-rhythm[hidden]{display:none}
/* Level briefing: how to play the mini game */
.intro-play{display:grid;gap:10px;width:100%;padding:16px;background:#000c33e0;border:1px solid #2c4f96}
.intro-play[hidden]{display:none}
.intro-play .eyebrow{font-size:12px;letter-spacing:2px}
.play-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.play-mode{display:grid;gap:6px;align-content:start;text-align:left;padding:12px;background:#0b1424cc;border:1px solid #2c4f96;color:var(--muted);cursor:pointer;font:inherit}
.play-mode b{font:700 19px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#f2f8ff}
.play-mode span{font-size:13px;line-height:1.45}
.play-mode:hover{border-color:#85c8ff99}
.play-mode.active{background:#5bbeff1f;border:2px solid var(--gold);color:#dbe7f5}
.play-mode.active b{color:#fff}
.play-speeds{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.play-speeds .segment{font-size:11px;padding:0 6px;min-width:0}
.play-speed-note{margin:0;font-size:14px;line-height:1.5;color:#dbe7f5}
#intro-screen.guarded .intro-side .intro-actions:has(.intro-play:not([hidden])){width:min(520px,calc(100% - 56px))}
@media(min-width:901px){#practice-screen.challenge-level .beat-stage canvas{bottom:auto;height:clamp(150px,26vh,300px)}}
.play-mode.locked{cursor:default;opacity:.92;background:#070c18cc;border-style:dashed;border-color:#2c4f96}
.play-mode.locked:hover{border-color:#2c4f96}
.play-mode.locked b{color:#a7bad2}
.play-lock{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:2px 8px;font:700 10px var(--mono);letter-spacing:1.5px;font-style:normal;color:#03246a;background:var(--gold)}
.play-lock .ico{width:14px;height:14px}
.play-download{justify-self:start;font:700 12px var(--mono);letter-spacing:1px;color:var(--accent,#5bbeff);text-decoration:underline;text-underline-offset:3px}
/* TYPING GUIDE: the keyboard grows to hold the two hands, with the sentence above it */
.keyboard .kb-caption{margin:0 0 4px;min-height:1.3em;text-align:center;font:600 clamp(13px,.9vw,17px)/1.3 var(--sans);text-shadow:0 1px 6px #000}
.keyboard:not(.guided) .kb-caption{display:none}
.keyboard .kb-board{position:relative}
.keyboard .kb-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform}
.play-main>.keyboard.guided{width:clamp(520px,50vw,920px);opacity:.97}
@media(min-width:901px) and (max-height:820px){.play-main>.keyboard.guided{width:clamp(460px,42vw,720px)}}
.typing-prefs{margin-bottom:22px}
.typing-prefs h3{margin:6px 0 0;font:700 20px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:var(--text)}
.typing-prefs p{margin:0;font-size:14px;line-height:1.5;color:#dbe7f5}
.prefs-tabs{display:flex;flex-wrap:wrap;gap:8px}
.prefs-tabs .segment{font-size:12px}
.keyboard .kb-target{position:absolute;display:block;border-radius:10px;box-shadow:0 0 0 3px var(--halo,#a6d8ff),0 0 22px 6px var(--halo,#a6d8ff);pointer-events:none;animation:kb-target 0.9s ease-in-out infinite;will-change:transform,opacity}
.keyboard .kb-target[hidden]{display:none}
@keyframes kb-target{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.35;transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.keyboard .kb-target{animation:none}}
.play-main>.keyboard.guided{opacity:1}
.play-main>.keyboard.guided{width:clamp(600px,56vw,1040px)}
@media(min-width:901px) and (max-height:820px){.play-main>.keyboard.guided{width:clamp(480px,46vw,780px)}}
.keyboard.guided{padding:8px 10px 6px;background:#000c33e0;border:1px solid #2c4f9680;border-radius:14px}
/* NARRATED BRIEFING: the goddess's button, the prelude and the words lighting up as she reads */
.intro-oracle{grid-area:oracle;display:grid;gap:14px;margin:6px 0 22px}
.narrate-button{justify-self:start;display:inline-flex;align-items:center;gap:16px;padding:10px 26px 10px 10px;border:1px solid #85c8ff;border-radius:999px;background:linear-gradient(135deg,#0d2a6bf2,#0b215ef2);color:#f2f8ff;cursor:pointer;box-shadow:0 0 0 0 #a6d8ff99,0 8px 28px #0008;animation:narrate-call 2.2s ease-out infinite;font:inherit;text-align:left}
.narrate-button[hidden]{display:none}
.narrate-button:hover{filter:brightness(1.12)}
.narrate-button:focus-visible{outline:2px solid #f2f8ff;outline-offset:4px}
.narrate-button[data-state=playing],.narrate-button[data-state=loading]{animation:none;box-shadow:0 0 22px #a6d8ff55}
@keyframes narrate-call{0%{box-shadow:0 0 0 0 #a6d8ff99,0 8px 28px #0008}70%{box-shadow:0 0 0 18px #a6d8ff00,0 8px 28px #0008}100%{box-shadow:0 0 0 0 #a6d8ff00,0 8px 28px #0008}}
.narrate-icon{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#85c8ff 45%,#8d6a24);box-shadow:inset 0 0 0 3px #f2f8ff80,0 0 18px #a6d8ff88}
.narrate-icon i{width:0;height:0;margin-left:5px;border-left:18px solid #06194f;border-top:11px solid transparent;border-bottom:11px solid transparent}
.narrate-button[data-state=playing] .narrate-icon i,.narrate-button[data-state=loading] .narrate-icon i{margin:0;width:16px;height:20px;border:0;border-left:5px solid #06194f;border-right:5px solid #06194f}
.narrate-button[data-state=loading] .narrate-icon{animation:narrate-spin 1.2s linear infinite}
@keyframes narrate-spin{to{transform:rotate(360deg)}}
.narrate-text{display:grid;gap:2px}
.narrate-text b{font:700 clamp(18px,1.2vw,22px)/1.1 var(--condensed);letter-spacing:2px;text-transform:uppercase}
.narrate-text small{font-size:13px;color:#e8d6a8}
.intro-prelude{margin:0;padding:14px 20px;border-left:3px solid #85c8ff;background:linear-gradient(90deg,#0d2a6b2e,transparent);font:italic 500 clamp(17px,1.15vw,22px)/1.6 var(--sans);color:#e6f1ff}
#intro-screen [data-say],.lobby-welcome [data-say]{transition:background-color .3s,box-shadow .3s}
.lobby-welcome.narrating [data-say].reading,#intro-screen.narrating [data-say].reading{background-color:#85c8ff14;box-shadow:-10px 0 0 #85c8ff14,10px 0 0 #85c8ff14;border-radius:4px}
.lobby-welcome.narrating [data-say] .w,#intro-screen.narrating [data-say] .w{transition:color .25s,text-shadow .25s}
.lobby-welcome.narrating [data-say].reading .w:not(.said),#intro-screen.narrating [data-say].reading .w:not(.said){opacity:.75}
.lobby-welcome.narrating .w.said,#intro-screen.narrating .w.said{color:#dcefff}
.lobby-welcome.narrating .w.now,#intro-screen.narrating .w.now{color:#fff;text-shadow:0 0 14px #a6d8ffcc}
@media(prefers-reduced-motion:reduce){.narrate-button{animation:none}}
/* While she reads, the button floats at the bottom left so it can always pause her */
#intro-screen.narrating .intro-oracle{padding-top:78px}
#intro-screen.narrating .narrate-button{position:fixed;left:clamp(16px,2vw,32px);bottom:clamp(16px,3vh,32px);z-index:40}
/* The narration downloads when the briefing opens: the button waits, quiet, until the voice is ready */
.narrate-button[data-state=preparing]{animation:none;cursor:progress;filter:saturate(.55) brightness(.85)}
.narrate-button[data-state=preparing] .narrate-icon{animation:narrate-spin 1.4s linear infinite}
.narrate-button[data-state=preparing] .narrate-icon i{margin:0;width:22px;height:22px;border:3px solid #06194f;border-top-color:transparent;border-radius:50%}
/* The results board never shows the keyboard or the hands */
#practice-screen.evaluating-mode .play-main>.keyboard,#practice-screen.results-mode .play-main>.keyboard{opacity:0;visibility:hidden;pointer-events:none}
/* The home welcome's button: the same gold call, sized for the panel */
.narrate-button.compact{gap:12px;padding:6px 18px 6px 6px;margin:2px 0 10px}
.narrate-button.compact .narrate-icon{width:44px;height:44px}
.narrate-button.compact .narrate-icon i{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.narrate-button.compact[data-state=playing] .narrate-icon i,.narrate-button.compact[data-state=loading] .narrate-icon i{width:13px;height:16px;border-left-width:4px;border-right-width:4px}
.narrate-button.compact .narrate-text b{font-size:16px}
.narrate-button.compact .narrate-text small{font-size:12px}
/* While she reads the welcome, the whole text shows (short screens clamp it) and the pillars step aside */
.lobby-welcome.narrating .welcome-text{display:block;-webkit-line-clamp:unset;line-clamp:unset;max-height:none;overflow:visible}
.lobby-welcome.narrating .welcome-pillars{display:none}
/* ===================== PANELS REDESIGN (quests, streak, rank drawers) ===================== */
.drawer-inner{width:min(660px,94vw);padding:72px 30px 30px 110px;background:radial-gradient(ellipse at 20% 0%,#1a2d52ee,transparent 60%),linear-gradient(90deg,#071d55fb,#05164cf5)}
.drawer .dash-card{gap:16px;padding:24px 22px 22px;background:linear-gradient(165deg,#0a2260cc,#041447e6);border:1px solid #2c4f96;border-top:2px solid var(--gold);box-shadow:0 18px 50px #0009,inset 0 1px 0 #ffffff0d}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.panel-head h2{margin:6px 0 0;font:700 clamp(26px,2vw,32px)/1.05 var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#f2f8ff;text-shadow:0 2px 18px #85c8ff33}
.panel-ring{position:relative;flex:none;width:68px;height:68px}
.panel-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.panel-ring .ring-track{fill:none;stroke:#173678;stroke-width:6}
.panel-ring .ring-value{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.panel-ring b{position:absolute;inset:0;display:grid;place-items:center;font:900 22px/1 'Libre Franklin',"Arial Black",sans-serif;color:#fff}
.panel-ring b small{position:absolute;margin-top:30px;font:600 10px var(--mono);color:var(--dim)}
.panel-meta{display:flex;flex-wrap:wrap;gap:8px}
.panel-meta span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font:600 11px var(--mono);letter-spacing:.5px;color:#a7bad2;background:#000c33b3;border:1px solid #1f3f84}
.panel-meta .stake{color:#a6d8ff;border-color:#85c8ff66}
.panel-meta .ico{width:16px;height:16px}.panel-meta .emb{width:20px;height:20px}
/* quests */
.drawer .quest-list{gap:10px}
.drawer .quest{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px 12px 12px;background:linear-gradient(90deg,#132746d9,#071d55cc);border:1px solid #1f3f84;border-left:3px solid #5bbeff;animation:award-in .5s cubic-bezier(.16,1,.3,1) calc(var(--d,0) * .08s) both}
.drawer .quest.done{border-left-color:var(--gold);background:linear-gradient(90deg,#0d2a6bcc,#0f1a30cc);box-shadow:inset 0 0 24px #85c8ff14}
.quest-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;background:radial-gradient(circle at 35% 30%,#1f3a66,#071d55);border:1px solid #2c4f96;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.quest-icon .ico{width:30px;height:30px}
.quest.done .quest-icon{background:radial-gradient(circle at 35% 30%,#6b5220,#2a1d0a);border-color:var(--gold)}
.quest-stamp{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px #a6d8ffaa}
.quest-stamp .ico{width:14px;height:14px}
.drawer .quest-body{gap:4px}
.quest-name{font:700 12px var(--condensed);letter-spacing:2px;text-transform:uppercase;color:#85c8ff}
.drawer .quest-body strong{font:600 15px/1.3 var(--sans);color:#ebf5ff}
.drawer .quest.done .quest-body strong{text-decoration:none;color:#e6f1ff}
.quest-track{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin-top:4px}
.quest-track .progress{height:6px;background:#000c33;border:1px solid #173678}
.quest-track small{font:600 11px var(--mono);color:#8aa0bb}
.drawer .quest-reward{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font:700 13px var(--mono);color:#a6d8ff;background:#000c33cc;border:1px solid #85c8ff66;border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.drawer .quest-reward .ico{width:16px;height:16px}
.drawer .quest-reward.claimed{color:#03246a;background:linear-gradient(180deg,#a6d8ff,#85c8ff);border-color:transparent;font-size:11px;letter-spacing:1px}
.quests-card.perfect{border-top-color:#a6d8ff;box-shadow:0 0 40px #a6d8ff22,0 18px 50px #0009}
/* streak */
.streak-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;background:radial-gradient(ellipse at 20% 50%,#0a2260cc,#000c33cc 70%);border:1px solid #1f3f84}
.streak-hero .ico{width:64px;height:64px;filter:grayscale(1);opacity:.45}
.streak-hero.lit .ico{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.streak-hero strong{font:900 64px/1 'Libre Franklin',"Arial Black",sans-serif;color:#dbe7f5}
.streak-hero.lit strong{color:#f7893b;text-shadow:0 0 28px #f7893b66}
.drawer .streak-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.drawer .streak-week span{display:grid;justify-items:center;gap:4px;padding:8px 0 6px;background:#000c33b3;border:1px solid #173678}
.drawer .streak-week span .ico{width:24px;height:24px;filter:grayscale(1);opacity:.25}
.drawer .streak-week span b{font:700 11px var(--mono);color:#5f7898}
.drawer .streak-week span.on{border-color:#f7893b88;background:#0a2260cc;box-shadow:inset 0 0 14px #f7893b22}
.drawer .streak-week span.on .ico{filter:none;opacity:1}
.drawer .streak-week span.on b{color:#f7893b}
.drawer .streak-week span.today{outline:2px solid #5bbeff66;outline-offset:-2px}
.streak-best{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--mono);color:#a7bad2}
.streak-best .ico{width:20px;height:20px}
/* rank */
.rank-hero{display:flex;align-items:center;gap:16px;padding:14px 16px;background:radial-gradient(ellipse at 15% 50%,#1f3a66cc,#000c33cc 70%);border:1px solid #1f3f84}
.rank-hero .emb{width:84px;height:84px;filter:drop-shadow(0 0 14px #5bbeff55)}
.rank-hero strong{display:block;font:900 26px/1.1 'Libre Franklin',"Arial Black",sans-serif;color:#5bbeff;letter-spacing:1px}
.rank-hero span{font:600 12px var(--mono);color:#a7bad2}
.rank-progress{display:grid;gap:6px}
.rank-progress .progress{height:8px;background:#000c33;border:1px solid #173678}
.rank-progress small{font:600 11px var(--mono);color:#8aa0bb}
.drawer .rank-ladder{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.drawer .rank-ladder li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:8px 12px;background:#000c33b3;border:1px solid #173678;opacity:.6}
.drawer .rank-ladder li .emb{width:38px;height:38px;filter:grayscale(1)}
.drawer .rank-ladder li b{display:block;font:700 15px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#dbe7f5}
.drawer .rank-ladder li small{font:11px var(--mono);color:#748ba9}
.drawer .rank-ladder li>.ico{width:18px;height:18px;opacity:.7}
.drawer .rank-ladder li.reached{opacity:1}
.drawer .rank-ladder li.reached .emb{filter:none}
.drawer .rank-ladder li.current{border-color:#5bbeff;background:linear-gradient(90deg,#123052cc,#000c33cc);box-shadow:inset 3px 0 0 #5bbeff}
@media(max-width:900px){.drawer-inner{padding:70px 16px 24px}.drawer .quest{grid-template-columns:44px minmax(0,1fr)}.drawer .quest-reward{grid-column:2;justify-self:start}.quest-icon{width:44px;height:44px}.streak-hero strong{font-size:48px}}
.drawer .streak-week em.ico,.drawer .streak-goals em.ico{display:block;width:24px;height:24px;filter:grayscale(1);opacity:.25}
.drawer .streak-week span.on em.ico{filter:none;opacity:1}
.drawer .streak-week span b{font:700 11px var(--mono);color:#5f7898}
.streak-body{display:grid;gap:14px}
.streak-goals{display:grid;gap:8px}
.streak-goals ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.streak-goals li{display:grid;justify-items:center;gap:3px;padding:10px 4px;background:#000c33b3;border:1px solid #173678;text-align:center;opacity:.65}
.streak-goals li b{font:900 18px/1 'Libre Franklin',"Arial Black",sans-serif;color:#dbe7f5}
.streak-goals li small{font:600 10px var(--mono);letter-spacing:.5px;color:#8aa0bb;text-transform:uppercase}
.streak-goals li.reached{opacity:1;border-color:#f7893b88;background:#0a2260cc}
.streak-goals li.reached em.ico{filter:none;opacity:1}
.streak-goals li.reached b{color:#f7893b}
.streak-goals li.next{opacity:1;border-color:#5bbeff88;box-shadow:inset 0 0 14px #5bbeff22}
.streak-goals li.next em.ico{opacity:.7}
.streak-best em.ico{display:inline-block;width:20px;height:20px}
.drawer .rank-ladder li>em.emb{display:block;width:38px;height:38px;filter:grayscale(1)}
.drawer .rank-ladder li.reached>em.emb{filter:none}
.drawer .rank-ladder li>em.ico{display:block;width:18px;height:18px;opacity:.7}
.drawer .rank-ladder li.reached>em.emb{filter:none;opacity:1}
.drawer .rank-ladder li.current>em.emb{filter:drop-shadow(0 0 8px #5bbeff88);opacity:1}
/* Header: home and arena with icons, like the account button */
.topnav .nav-home,.topnav .arena-link{gap:8px}
.topnav .nav-home .ico,.topnav .arena-link .ico{width:20px;height:20px}
@media(max-width:900px){.topnav .nav-home span,.topnav .arena-link span{display:none}.topnav .nav-home,.topnav .arena-link{padding:0 8px}}
/* Tooltips (computers only) */
.tooltip{position:fixed;z-index:60;max-width:280px;padding:8px 12px;font:500 13px/1.4 var(--sans);color:#f2f8ff;background:linear-gradient(180deg,#1a2a4af7,#071d55f7);border:1px solid #85c8ff;box-shadow:0 10px 30px #000a;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.tooltip.show{opacity:1;transform:none}
.tooltip[hidden]{display:none}
.tooltip::before{content:"";position:absolute;left:calc(var(--arrow,50%) - 6px);width:10px;height:10px;background:#1a2a4a;border:1px solid #85c8ff;transform:rotate(45deg)}
.tooltip[data-side=below]::before{top:-6px;border-right:0;border-bottom:0}
.tooltip[data-side=above]::before{bottom:-6px;border-left:0;border-top:0;background:#071d55}
@media(hover:none){.tooltip{display:none!important}}
.tooltip[data-side=right]::before{left:-6px;top:calc(var(--arrow,50%) - 6px);border-top:0;border-right:0}
/* ===================== ACCOUNT: full screen with the Nahual and four sections ===================== */
#account-screen.account-lobby{position:relative;min-height:calc(100vh - var(--hud-h));min-height:calc(100dvh - var(--hud-h));padding:0;overflow:hidden}
.account-art{position:absolute;right:0;top:0;bottom:0;width:min(46vw,860px);pointer-events:none;z-index:0}
.account-art::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 55% 45%,#1b8f7a33,transparent 60%);z-index:-1}
.account-art img{position:absolute;right:clamp(0px,2vw,40px);bottom:0;height:min(100%,calc(100dvh - var(--hud-h)));width:auto;max-width:none;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 0 40px #0a3a3088) drop-shadow(0 20px 40px #000c);animation:account-rise .9s cubic-bezier(.16,1,.3,1) both}
@keyframes account-rise{from{opacity:0;transform:translateY(30px)}}
.account-art::after{content:"";position:absolute;left:-10%;right:0;bottom:0;height:22%;background:linear-gradient(0deg,#000c33,transparent)}
.account-main{position:relative;z-index:1;width:min(1060px,100% - min(40vw,760px));min-height:inherit;padding:14px 0 40px 60px;display:grid;align-content:start;gap:22px}
.account-hero{display:grid;gap:18px}
.account-heading h1{margin:6px 0 8px;font:700 clamp(40px,4vw,64px)/1 var(--condensed);letter-spacing:2px;text-transform:uppercase;color:#f2f8ff;text-shadow:0 4px 24px #85c8ff33}
.account-heading p{margin:0;max-width:60ch;font-size:16px;line-height:1.6;color:#bdcfe4}
.account-badge{display:flex;align-items:center;gap:16px;width:min(520px,100%);padding:12px 18px;background:linear-gradient(90deg,#0f2244ee,#05164ccc);border:1px solid #2c4f96;border-left:3px solid var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.account-badge .emb{width:64px;height:64px;flex:none;filter:drop-shadow(0 0 12px #5bbeff55)}
.account-badge>div{display:grid;gap:4px;flex:1;min-width:0}
.account-badge b{font:700 22px/1.1 var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-badge span{font:600 12px var(--mono);color:#a7bad2}
.account-badge .progress{height:6px;background:#000c33;border:1px solid #173678}
.account-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.account-tabs{display:grid;gap:8px;position:sticky;top:calc(var(--hud-h) + 16px)}
.account-tab{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;font:inherit;color:#dbe7f5;cursor:pointer;background:linear-gradient(90deg,#0a2260d9,#05164ccc);border:1px solid #1f3f84;border-left:3px solid transparent;transition:border-color .2s,background .2s,transform .2s}
.account-tab:hover{border-color:#85c8ff88;transform:translateX(3px)}
.account-tab .ico{width:30px;height:30px;flex:none}
.account-tab span{display:grid;gap:2px;min-width:0}
.account-tab b{font:700 16px var(--condensed);letter-spacing:1.5px;text-transform:uppercase}
.account-tab small{font-size:12px;color:#8aa0bb}
.account-tab.active{border-color:var(--gold);border-left-color:var(--gold);background:linear-gradient(90deg,#0d2a6be6,#0f1a30d9);box-shadow:inset 0 0 22px #85c8ff1a,0 0 20px #85c8ff1a}
.account-tab.active b{color:#a6d8ff}
.account-tab.danger b{color:#ff9a9c}
.account-tab.danger.active{border-color:#f35e61;background:linear-gradient(90deg,#3a1018e6,#0f1a30d9)}
.account-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.account-section{display:grid;gap:16px;padding:24px 26px 26px;background:linear-gradient(165deg,#0a2260e6,#041447f0);border:1px solid #2c4f96;border-top:2px solid var(--gold);box-shadow:0 18px 50px #0009;animation:award-in .45s cubic-bezier(.16,1,.3,1) both}
.account-section[hidden]{display:none}
.section-head{display:grid;gap:6px}
.section-head h2{margin:0;font:700 clamp(26px,2.2vw,34px)/1.05 var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#f2f8ff}
.section-head p{margin:0;font-size:14px;line-height:1.5;color:#a7bad2}
.account-section .auth-form,.account-section .typing-prefs{margin:0;padding:18px 20px;background:#000c3399;border:1px solid #173678;border-radius:0;box-shadow:none}
.account-section .auth-form h3,.close-card h3{margin:0;font:700 18px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#a6d8ff}
.account-panel{display:grid;gap:14px}
.identity-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.identity-card>div{display:grid;gap:4px;padding:12px 14px;background:#000c33b3;border:1px solid #173678;min-width:0}
.identity-card span{font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#748ba9}
.identity-card b{font:600 15px var(--sans);color:#ebf5ff;overflow:hidden;text-overflow:ellipsis}
.identity-card b.plan{color:#85c8ff}.identity-card b.plan.pro{color:#2dcccd}
.identity-card .link-button{justify-self:start;font-size:12px}
.identity-card.guest{grid-template-columns:1fr auto;align-items:center;padding:14px 16px;background:#0d2a6b33;border:1px solid #85c8ff66}
.identity-card.guest p{margin:0;color:#e6f1ff;line-height:1.5}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;background:linear-gradient(135deg,#132746cc,#071d55cc);border:1px solid #1f3f84}
.stat-tile .ico{grid-row:span 2;width:34px;height:34px}
.stat-tile span{font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#8aa0bb}
.stat-tile b{font:900 22px/1.1 'Libre Franklin',"Arial Black",sans-serif;color:#fff}
.lang-progress{display:grid;gap:10px}
.lang-progress ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lang-progress li{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:12px;padding:8px 12px;background:#000c33b3;border:1px solid #173678}
.lang-name{font:700 15px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#dbe7f5}
.lang-progress .progress{height:8px;background:#000c33;border:1px solid #173678}
.lang-progress small{font:600 12px var(--mono);color:#8aa0bb;text-align:right}
.account-close{display:grid;gap:14px}
.close-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:#000c3399;border:1px solid #173678}
.close-card>.ico{width:34px;height:34px}
.close-card p{margin:4px 0 0;font-size:14px;color:#a7bad2;line-height:1.5}
.close-card.danger-zone{display:grid;grid-template-columns:1fr;border-color:#f35e6188;background:linear-gradient(135deg,#3a101833,#000c3399)}
.close-card.danger-zone h3{color:#ff9a9c}
@media(max-width:1100px){.account-art{width:40vw;opacity:.55}.account-main{width:auto;padding-right:24px}.account-layout{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:900px){
  .account-art{position:absolute;width:100%;height:420px;bottom:auto;opacity:.28}
  .account-art img{height:420px;right:50%;transform:translateX(50%);animation:none}
  .account-main{width:auto;padding:12px 16px 32px}
  .account-layout{grid-template-columns:1fr}
  .account-tabs{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-tab small{display:none}
  .identity-card,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .identity-card.guest{grid-template-columns:1fr}
  .lang-progress li{grid-template-columns:90px 1fr 54px}
  .close-card{grid-template-columns:1fr}
  .account-section{padding:18px 16px}
}
/* The account screen reuses the lobby's backdrop but not its grid: art pinned right, content on the left */
#account-screen.account-lobby{display:block;height:auto;overflow:hidden}
#account-screen.account-lobby>.account-art{position:absolute}
#account-screen .account-main{width:calc(100% - min(40vw,760px));max-width:1060px}
@media(max-width:1100px){#account-screen .account-main{width:auto}}
#account-screen.account-lobby>.account-art{top:0;bottom:auto;height:calc(100vh - var(--hud-h));height:calc(100dvh - var(--hud-h))}
.stat-tile b.word{font:700 17px/1.15 var(--condensed);letter-spacing:1.5px;text-transform:uppercase;overflow-wrap:anywhere}
.stat-tile{min-width:0}
.account-section .typing-prefs>.eyebrow:first-child{display:none}
#account-screen .screen-bar{position:relative;z-index:2}
@media(max-width:900px){#account-screen.account-lobby>.account-art{height:420px}}
.stat-tile b.word{font-size:15px;letter-spacing:1px;overflow-wrap:normal;word-break:keep-all}
@media(max-width:900px){
  .topnav .nav-home{display:none}
  .topnav .arena-link{--bh:32px;width:var(--bh);min-width:0;padding:0!important;--bi:url(./art/btn/icon-normal.webp);--bi-h:url(./art/btn/icon-hover.webp);--bi-p:url(./art/btn/icon-pressed.webp);--bi-d:url(./art/btn/icon-disabled.webp);--bs:58 58 58 58 fill;--cl:.5;--cr:.5}
  .topnav .arena-link .ico{width:18px;height:18px}
}
/* Laptop widths: the header must stay one row (70 px, --hud-h) or the play screen overflows the window and the
   keyboard is cut at the bottom. Resources never wrap, Inicio/Arena become icon buttons with tooltips. */
@media(min-width:901px){.hud-bar .lobby-resources{flex-wrap:nowrap}.hud-bar{min-height:var(--hud-h)}}
@media(min-width:901px) and (max-width:1500px){
  .hud-bar{gap:10px;padding:8px 16px}
  .hud-bar .card-text{width:130px}
  .hud-bar .player-card{padding-right:18px}
  .hud-bar .res{padding:6px 10px}
  .topnav .nav-home span,.topnav .arena-link span{display:none}
  .topnav .nav-home,.topnav .arena-link{--bh:36px;width:var(--bh);min-width:0;padding:0!important;--bi:url(./art/btn/icon-normal.webp);--bi-h:url(./art/btn/icon-hover.webp);--bi-p:url(./art/btn/icon-pressed.webp);--bi-d:url(./art/btn/icon-disabled.webp);--bs:58 58 58 58 fill;--cl:.5;--cr:.5}
}
/* Short windows: the guided keyboard takes less height so the typing line keeps its room */
@media(min-width:901px) and (max-height:760px){.play-main>.keyboard.guided{width:clamp(420px,40vw,620px)}}
/* ===================== WORLDS: illustrated world cards, and each world's subjects as cards ===================== */
@keyframes world-in{from{opacity:0;transform:translateY(24px)}}
.worlds-screen .shell,.world-screen .shell{max-width:1380px;padding:14px 40px 60px}
.worlds-head,.world-head{display:grid;gap:10px;margin:18px 0 26px;max-width:780px}
.worlds-head h1,.world-head h1{margin:0;font:700 clamp(40px,4.4vw,72px)/1 var(--condensed);letter-spacing:2px;text-transform:uppercase;color:#f2f8ff;text-shadow:0 4px 24px #0009}
.worlds-head p,.world-head p{margin:0;font-size:17px;line-height:1.6;color:#c9d8ea}
.world-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.world-card{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;background:linear-gradient(170deg,#0a2260f2,#041447f7);border:1px solid #2c4f96;border-top:2px solid var(--world);overflow:hidden;box-shadow:0 18px 44px #000a;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;animation:world-in .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) * 90ms)}
.world-card:hover{transform:translateY(-6px);border-color:var(--world);box-shadow:0 24px 60px #000c,0 0 34px color-mix(in srgb,var(--world) 30%,transparent)}
.world-card:focus-visible{outline:2px solid var(--world);outline-offset:3px}
.world-card-art{position:relative;display:block;aspect-ratio:3/2;overflow:hidden}
.world-card-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.world-card:hover .world-card-art img{transform:scale(1.06)}
.world-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#041447 100%)}
.world-card-body{position:relative;z-index:1;display:grid;gap:9px;padding:0 22px 22px;margin-top:-30px}
.world-card-body .eyebrow{color:var(--world)}
.world-card-body strong{font:700 clamp(30px,2.4vw,42px)/1 var(--condensed);letter-spacing:2px;text-transform:uppercase;color:#fff}
.world-card-body small{font-size:14px;line-height:1.55;color:#b5c6db}
.world-chips{display:flex;flex-wrap:wrap;gap:6px}
.world-chip{padding:3px 9px;font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#e7f1fb;background:#000c33b3;border:1px solid color-mix(in srgb,var(--world) 55%,transparent)}
.world-chip.soon{color:#7f93ad;border:1px dashed #2c4f96}
.world-progress{display:grid;gap:6px;font:600 12px var(--mono);color:#a7bad2}
.world-card.locked{cursor:default}
.world-card.locked .world-card-art img{filter:grayscale(.5) brightness(.6)}
.world-card.locked:hover{transform:none;box-shadow:0 18px 44px #000a;border-color:#2c4f96}
.world-lock{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font:700 11px var(--mono);font-style:normal;letter-spacing:2px;color:#06194f;background:var(--gold)}
.world-lock .ico{width:14px;height:14px}
.world-lock.world-pro{background:linear-gradient(90deg,#a6d8ff,#f7893b);letter-spacing:3px}
.world-screen{position:relative}
.world-backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--hud-h);z-index:0;pointer-events:none}
.world-backdrop img{display:block;width:100%;height:100%;object-fit:cover;opacity:.55}
.world-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000c33f2 0%,#000c33b3 45%,#000c3355 100%),linear-gradient(0deg,#000c33 0%,transparent 45%)}
.world-screen .shell{position:relative;z-index:1}
.world-head .eyebrow{color:var(--world)}
.world-head p.world-notice{font-size:12.5px;line-height:1.5;color:#8ea0b8}
.history-notice{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.subject-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;max-width:1180px}
.subject-card{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:18px;min-height:168px;padding:16px 20px 16px 16px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:linear-gradient(120deg,#0a2260f2,#041447e6);border:1px solid #2c4f96;border-left:3px solid var(--subject);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;animation:world-in .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) * 70ms)}
.subject-card:hover{transform:translateY(-4px);border-color:var(--subject);box-shadow:0 18px 40px #000b,0 0 26px color-mix(in srgb,var(--subject) 25%,transparent)}
.subject-card:focus-visible{outline:2px solid var(--subject);outline-offset:3px}
.subject-visual{display:grid;place-items:center;width:132px;height:132px;background:radial-gradient(circle,color-mix(in srgb,var(--subject) 22%,transparent),transparent 70%)}
.subject-visual .ico{width:84px;height:84px}
.subject-visual .glyph{font:900 52px 'Libre Franklin',"Arial Black",sans-serif;color:var(--subject);text-shadow:0 0 22px color-mix(in srgb,var(--subject) 60%,transparent)}
.subject-card.has-guardian .subject-visual img{width:132px;height:176px;object-fit:cover;object-position:50% 8%;margin:-16px 0;filter:drop-shadow(0 6px 16px #000c)}
.subject-body{display:grid;gap:7px;min-width:0}
.subject-body strong{font:700 26px/1.05 var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.subject-body small{font-size:14px;line-height:1.5;color:#b5c6db}
.subject-meta{font:600 12px var(--mono);color:#a7bad2}
.subject-card .world-lock{position:static;justify-self:start}
.subject-card.locked{cursor:default;opacity:.82}
.subject-card.locked:hover{transform:none;box-shadow:none;border-color:#2c4f96}
.subject-card.locked .subject-visual{filter:grayscale(.7)}
.slab-icon .slab-thumb{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.world-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .worlds-screen .shell,.world-screen .shell{padding:12px 16px 40px}
  .world-cards,.subject-cards{grid-template-columns:1fr}
  .subject-card{grid-template-columns:96px minmax(0,1fr);min-height:0}
  .subject-visual{width:96px;height:96px}
  .subject-card.has-guardian .subject-visual img{width:104px;height:140px}
}
/* Math levels: the study table on the intro, and in the deck the given problem and the hidden answer */
.math-table{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.math-table li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 16px;background:#000c33b3;border:1px solid #173678;font:600 clamp(18px,1.4vw,24px) var(--mono);color:#dbe7f5}
.math-table b{font-size:1.15em;color:#a6d8ff}
.math-chips{display:flex;flex-wrap:wrap;gap:8px}
.math-chip{padding:8px 14px;font:700 16px var(--condensed);letter-spacing:1.5px;text-transform:uppercase;color:#f2f8ff;background:#0d2a6b33;border:1px solid #85c8ff88}
.deck-line.current .given{color:#dbe7f5}
.deck-line.current .answer{color:#a6d8ff80}
.deck-line.current .answer.reveal{color:#5bbeffa6}
.deck-line.current .cur.answer{color:#a6d8ff}
.deck-line.current .cur.answer.reveal{color:#5bbeff}

/* ===================== GEMS: difficulty ranks of a subject ===================== */
.gem-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 6px}
.gem-tab{position:relative;display:grid;justify-items:center;gap:1px;padding:10px 6px 9px;font:inherit;color:#dbe7f5;cursor:pointer;text-align:center;background:linear-gradient(180deg,#0a2260d9,#05164ccc);border:1px solid #1f3f84;border-bottom:2px solid transparent;transition:transform .2s,border-color .2s,background .2s}
.gem-tab img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gem) 55%,transparent));transition:transform .3s cubic-bezier(.16,1,.3,1)}
.gem-tab b{font:700 14px var(--condensed);letter-spacing:1.5px;text-transform:uppercase}
.gem-tab small{font-size:11px;line-height:1.2;color:#8aa0bb}
.gem-tab em{font:600 10px var(--mono);font-style:normal;letter-spacing:1px;color:var(--gem)}
.gem-tab:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gem) 60%,transparent)}
.gem-tab:hover img{transform:scale(1.08) rotate(-4deg)}
.gem-tab.active{border-color:var(--gem);border-bottom-color:var(--gem);background:linear-gradient(180deg,color-mix(in srgb,var(--gem) 16%,#0a2260),#05164ce6);box-shadow:inset 0 0 18px color-mix(in srgb,var(--gem) 18%,transparent),0 0 18px color-mix(in srgb,var(--gem) 20%,transparent)}
.gem-tab.active b{color:#fff}
.gem-tab.sealed img{filter:grayscale(.8) brightness(.55)}
.gem-tab.sealed em{color:#7f93ad}
.gem-tab.complete::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--gem);box-shadow:0 0 8px var(--gem)}
.gem-tab:focus-visible{outline:2px solid var(--gem);outline-offset:2px}
.gem-sealed{display:grid;justify-items:center;gap:8px;padding:26px 24px;text-align:center;background:linear-gradient(170deg,#0a2260e6,#041447f0);border:1px dashed color-mix(in srgb,var(--gem) 60%,transparent);animation:world-in .45s cubic-bezier(.16,1,.3,1) both}
.gem-sealed img{width:110px;height:110px;object-fit:contain;filter:grayscale(.5) brightness(.8) drop-shadow(0 0 22px color-mix(in srgb,var(--gem) 45%,transparent))}
.gem-sealed .eyebrow{color:var(--gem)}
.gem-sealed strong{font:700 28px var(--condensed);letter-spacing:2px;text-transform:uppercase;color:#f2f8ff}
.gem-sealed p{margin:0;font-size:14px;line-height:1.55;color:#b5c6db;max-width:40ch}
.gem-pips{display:flex;gap:6px;margin-top:2px}
.gem-pip{display:grid;place-items:center;width:28px;height:28px;background:#000c33b3;border:1px solid #173678;border-radius:50%}
.gem-pip img{width:20px;height:20px;object-fit:contain;opacity:.45;filter:grayscale(.4)}
.gem-pip.started img{opacity:.8;filter:none}
.gem-pip.done{border-color:#85c8ff}
.gem-pip.done img{opacity:1;filter:drop-shadow(0 0 6px #a6d8ff88)}
.gem-pip.sealed img{opacity:.2;filter:grayscale(1)}
.math-example{list-style:none;margin:0;padding:16px 20px;display:grid;gap:6px;background:#000c33b3;border:1px solid #173678;border-left:3px solid #a6d8ff;font:600 clamp(18px,1.4vw,24px) var(--mono);color:#dbe7f5}
.math-example li:last-child{color:#a6d8ff}
@media(max-width:900px){.gem-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===================== ILLUSTRATIONS: track creatures, arena and PRO art ===================== */
.slab-icon .track-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.slab-icon:has(.track-thumb){position:relative;overflow:hidden}
.slab-icon .track-no{position:absolute;right:6px;bottom:1px;z-index:1;font:700 11px var(--mono);color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000}
.slab.primary .slab-icon .track-no{color:#fff}
.path-guardian.creature{place-items:center}
.path-guardian.creature .guardian-art{height:auto;width:min(100%,640px);max-height:calc(100vh - var(--hud-h) - 90px);aspect-ratio:1}
.art-screen{position:relative}
.art-screen .screen-art{position:fixed;right:max(12px,2vw);bottom:0;z-index:0;height:min(calc(100dvh - var(--hud-h) - 30px),900px);width:auto;pointer-events:none;filter:drop-shadow(0 0 1px #ffffff70) drop-shadow(0 20px 40px #000c) drop-shadow(0 0 60px #a6d8ff22);animation:world-in .8s cubic-bezier(.16,1,.3,1) both}
.art-screen .shell{position:relative;z-index:1}
@media(min-width:1280px){.art-screen .shell{margin-left:max(40px,6vw)}}
@media(max-width:1279px){.art-screen .screen-art{opacity:.28}}
@media(max-width:900px){.art-screen .screen-art{display:none}}
#path-screen .path-hero h1{overflow-wrap:anywhere;font-size:clamp(34px,min(4.4vw,calc(520px / var(--title-chars,10) * 1.7)),64px)}

/* ---------- Touch tray (phones and tablets, app.js renderTouch): pieces to tap, number pad, keyboard switch ---------- */
.touch-tray{display:grid;gap:10px;padding:10px 12px 12px;border:1px solid #2c4f9666;background:#050b18e6;border-radius:6px}
.touch-tray[hidden]{display:none}
.touch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 11px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#8ea0b8}
.touch-switch{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid #2c4f96;background:#071d55;color:#c7d6ea;font:600 12px var(--mono);border-radius:4px;cursor:pointer}
.touch-switch svg{width:18px;height:18px}
.touch-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.touch-chip{min-width:48px;min-height:48px;padding:6px 14px;border:1px solid #3a64ad;border-bottom-width:3px;background:linear-gradient(#13284f,#071d55);color:#eef4fb;font:600 clamp(17px,4.6vw,22px)/1.2 var(--mono);border-radius:6px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .08s,opacity .2s}
.touch-chip:active{transform:translateY(2px);border-bottom-width:1px}
.touch-chip.gone{visibility:hidden;min-width:0;padding:0;border:0;width:0}
.touch-chip.hint{border-color:var(--gold);box-shadow:0 0 0 2px #85c8ff66,0 0 18px #85c8ff88;animation:touch-glow 1s ease-in-out infinite alternate}
.touch-chip.wrong{animation:touch-shake .38s;border-color:#ff5d73}
.touch-chip.spent{opacity:.28;pointer-events:none;text-decoration:line-through}
@keyframes touch-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes touch-glow{to{box-shadow:0 0 0 2px #85c8ffaa,0 0 26px #85c8ff}}
.touch-pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.touch-key{min-height:56px;border:1px solid #3a64ad;border-bottom-width:3px;background:linear-gradient(#13284f,#071d55);color:#eef4fb;font:700 24px var(--mono);border-radius:6px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.touch-key:active{transform:translateY(2px);border-bottom-width:1px}
.touch-play .deck-mode .code-scroll{pointer-events:none}
.play-main>.touch-tray{grid-row:3;align-self:end;width:min(100%,760px);justify-self:center}
.evaluating-mode .touch-tray,.results-mode .touch-tray{display:none}
.touch-coach{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#02050bcc}
.touch-coach[hidden]{display:none}
.touch-coach-card{width:min(100%,420px);display:grid;gap:14px;padding:22px 20px;border:1px solid var(--gold);background:#071d55f5;border-radius:8px}
.touch-coach-card ol{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.touch-coach-card li{display:flex;gap:12px;align-items:flex-start;color:#dbe6f3;font-size:15px;line-height:1.45}
.touch-coach-card li b{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font:700 14px var(--mono);border-radius:50%}
@media(max-width:900px){
  #practice-screen.touch-play .editor-card{min-height:30vh}
  #practice-screen.touch-play .typing-deck{min-height:24vh}
  .touch-tray{position:sticky;bottom:0;z-index:5;margin-top:10px;box-shadow:0 -10px 24px #02050bcc}
}

/* Phones in play: the Nahual stage gets the room of everything secondary. The header keeps only the logo, the
   stats, file bar and status line hide (the results board still shows every metric), and the stage sits on top
   of the deck with the touch tray pinned below. */
@media(max-width:900px){
  body.in-play .topbar .lobby-resources,body.in-play .topbar .topnav,body.in-play #player-card{display:none!important}
  body.in-play .topbar{justify-content:center}
  #practice-screen .play-layout{padding-top:6px}
  #practice-screen .screen-bar{margin-bottom:4px}
  #practice-screen:not(.results-mode) .hud.play-stats{display:none}
  #practice-screen .editor-card .panel-header,#practice-screen .editor-footer{display:none}
  #practice-screen .beat-stage{display:block;height:clamp(190px,36vh,330px);margin:0 -16px;border:0;background:none;clip-path:none;-webkit-mask:none;mask:none;pointer-events:none}
  #practice-screen .beat-stage[hidden]{display:none}
  #practice-screen .play-main{margin-top:0}
  #practice-screen .editor-card{min-height:0!important;background:none;border:0;box-shadow:none}
  #practice-screen .typing-deck{min-height:22vh!important}
  .deck-mode .deck-line{background:#000c33b8;box-shadow:0 0 0 1px #2c4f9640;padding:.1em .35em;border-radius:4px}
}
.touch-play .play-main .keyboard{display:none!important}
/* Phones (app.js deckWrap): the current line wraps between words at a readable size; the faded neighbours too */
.typing-deck.wrap .deck-line{white-space:pre-wrap;overflow:visible;overflow-wrap:anywhere}
.typing-deck.wrap .deck-line.current{line-height:1.3}
.typing-deck.wrap .deck-line.current .word{display:inline-block;white-space:nowrap;max-width:100%}
.typing-deck.wrap .deck-line.prev,.typing-deck.wrap .deck-line.next{font-size:calc(var(--deck-size) * .5)}
.typing-deck.wrap .deck-line.prev{display:none}
.typing-deck.wrap .deck-line.next{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.typing-deck.wrap{gap:8px}
@media(max-width:900px){#practice-screen.touch-play .beat-stage{height:clamp(170px,30vh,300px)}}

/* ---------- Phones: hamburger menu (app.js placeHeader/setMenu). The header shows the logo and the toggle; the
   player card, resources and navigation live in a panel that drops over the page. ---------- */
.menu-toggle{display:none}
.menu-panel[hidden]{display:none!important}
@media(max-width:900px){
  .hud-bar{display:flex!important;align-items:center;justify-content:space-between;padding:8px 14px;min-height:56px}
  .hud-bar .topbar-left{flex:none}
  .menu-toggle{display:grid;align-content:center;gap:5px;width:44px;height:44px;padding:0 10px;border:1px solid #2c4f96;background:#071d55;border-radius:6px;cursor:pointer}
  .menu-toggle span{display:block;height:2px;background:var(--gold);border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-panel{position:absolute;top:100%;left:0;right:0;display:grid;gap:14px;padding:16px;background:#000c33f7;border-bottom:1px solid var(--gold);box-shadow:0 18px 40px #000c;max-height:calc(100dvh - 56px);overflow:auto}
  .menu-panel .player-card{max-width:none;width:100%;clip-path:none}
  .menu-panel .card-text{width:auto;flex:1}
  .menu-panel .lobby-resources{justify-content:flex-start;gap:8px}
  .menu-panel .topnav{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
  .menu-panel .topnav .nav-home,.menu-panel .topnav .arena-link,.menu-panel .topnav .account-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:132px;padding:0 18px!important}
  .menu-panel .topnav .nav-home span,.menu-panel .topnav .arena-link span{display:inline}
  body.in-play .menu-toggle{display:none}
}
/* ---------- Phones: bigger buttons. Main actions (primary, CTA, download, narrate, run) take the full width;
   secondary ones (outline, back, link, the Yes/No and tab segments) take at least half of it. Icon buttons,
   touch chips, keypad keys and quiz options keep their own sizes. ---------- */
@media(max-width:900px){
  :is(.primary-button,.download-button,.narrate-button,.continue-button,.run-button):not(.icon-button){width:100%!important;max-width:none!important;min-width:0!important;justify-content:center;--bh:54px!important;font-size:16px!important}
  .primary-button.cta{--bh:60px!important;font-size:17px!important}
  :is(.outline-button,.back-button,.link-button){min-width:calc(50vw - 24px)!important;justify-content:center;--bh:46px!important;font-size:14px!important}
  .menu-panel .topnav :is(.outline-button){min-width:calc(50% - 5px)!important}
  .segment{flex:1 1 calc(50% - 8px);min-width:calc(50% - 8px);justify-content:center;--bh:46px!important;font-size:14px!important}
  :is(.result-actions,.intro-actions,.prefs-tabs,.account-actions,.path-actions,.form-actions){display:flex!important;flex-wrap:wrap;gap:10px}
  :is(.result-actions,.intro-actions,.account-actions,.path-actions,.form-actions)>*{flex:1 1 calc(50% - 10px)}
  .screen-bar{gap:10px}
  .screen-bar .screen-context{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:900px){
  :is(.result-actions,.intro-actions,.account-actions,.path-actions,.form-actions)>:is(.primary-button,.cta,.download-button,.intro-play,.intro-xp){flex:1 1 100%!important}
  .play-speeds{display:flex!important;flex-wrap:wrap;gap:10px}
  .play-speeds>.segment{flex:1 1 calc(50% - 10px)}
  .primary-button.cta{padding-left:56px!important;padding-right:56px!important}
}

/* ---------- Account > Game settings: grouped items, volume sliders and the full-screen flash layer ---------- */
.prefs-item{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid #2c4f9640}
.prefs-item h3{margin:0}.prefs-item p{margin:0}
.typing-prefs>.eyebrow{display:block;margin-top:18px}
.prefs-warning{display:block;color:#ffb36b;font-size:12px;line-height:1.4}
.prefs-slider{display:grid;grid-template-columns:auto 1fr 52px;align-items:center;gap:12px;margin-top:4px;font:600 12px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#8ea0b8}
.prefs-slider.off{opacity:.45}
.prefs-slider b{color:var(--gold);text-align:right}
.prefs-slider input{width:100%;accent-color:var(--gold);height:28px;cursor:pointer}
.screen-flash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:var(--flash-color,#fff);mix-blend-mode:screen}
.screen-flash.go{animation:screen-flash var(--flash-ms,380ms) ease-out}
@keyframes screen-flash{from{opacity:var(--flash-a,.3)}to{opacity:0}}
.no-narration .narrate-button{display:none!important}
/* HOME DOORS: the four home slabs sit in .door wrappers. On hover (mouse only) the slab grows over its
   neighbours like a dock (the next ones grow a little less, then less again) and a big roaring guardian leaps out from behind its left edge, facing left, over spinning light
   rays and lightning, passing behind the whole menu.
   Only opacity/transform animate; the art loads on the first hover (app.js wakeDoorBeasts). */
/* No stacking context per door: every slab (z 2-5) stays above every guardian (z 0-1), so the big beasts
   pass behind the whole menu and never cover a label. */
#lobby-menu{isolation:isolate}
.door{--bw:clamp(340px,26vw,560px);position:relative}
.door>.slab{z-index:2}
.door-beast,.door-fx{display:none}
@media (hover:hover) and (pointer:fine){
  .door-beast,.door-fx{display:block;position:absolute;pointer-events:none}
  .door-beast{--fx:1;z-index:1;right:calc(100% - var(--bw) * .2);top:50%;width:var(--bw);height:var(--bw);object-fit:contain;opacity:0;translate:60% -50%;scale:.45;transform:scaleX(var(--fx));transform-origin:50% 80%;
    filter:drop-shadow(0 10px 24px #000c);transition:opacity .2s,translate .45s cubic-bezier(.34,1.56,.64,1),scale .45s cubic-bezier(.34,1.56,.64,1)}
  .door-beast.flip{--fx:-1}
  .door-fx{z-index:0;right:calc(100% - var(--bw) * .95);top:50%;width:calc(var(--bw) * 1.5);height:calc(var(--bw) * 1.5);opacity:0;translate:0 -50%;scale:.6;transition:opacity .25s,scale .5s cubic-bezier(.16,1,.3,1);
    background:radial-gradient(circle,color-mix(in srgb,var(--slab) 60%,transparent) 0,color-mix(in srgb,var(--slab) 22%,transparent) 34%,transparent 62%)}
  .door-rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--slab) 55%,transparent) 0deg 5deg,transparent 5deg 22deg);
    -webkit-mask:radial-gradient(circle,#000 12%,transparent 66%);mask:radial-gradient(circle,#000 12%,transparent 66%)}
  .door-bolt{position:absolute;left:12%;top:6%;width:22%;height:50%;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--slab) 80%,#fff));opacity:0;rotate:-18deg;
    clip-path:polygon(40% 0,70% 0,52% 38%,78% 38%,22% 100%,38% 52%,14% 52%);filter:drop-shadow(0 0 6px var(--slab))}
  .door-bolt.b2{left:auto;right:10%;top:14%;height:44%;rotate:22deg;scale:-1 1}
  .door>.slab{transform-origin:100% 50%;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s,filter .2s}
  .door:is(:hover,:focus-within)>.slab{z-index:5}
  .door:has(+ .door:is(:hover,:focus-within))>.slab,.door:is(:hover,:focus-within) + .door>.slab{z-index:4}
  .door:has(+ .door + .door:is(:hover,:focus-within))>.slab,.door:is(:hover,:focus-within) + .door + .door>.slab{z-index:3}
  /* Dock magnification: the hovered door, its neighbours and the ones after them, both ways. */
  .door:has(+ .door:is(:hover,:focus-within))>.slab,.door:is(:hover,:focus-within) + .door>.slab{transform:translateX(-10px) scale(1.08);filter:brightness(.9)}
  .door:has(+ .door + .door:is(:hover,:focus-within))>.slab,.door:is(:hover,:focus-within) + .door + .door>.slab{transform:translateX(-4px) scale(1.035);filter:brightness(.8)}
  .door:is(:hover,:focus-within)>.slab{transform:translateX(-22px) scale(1.16);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--slab) 55%,transparent)) drop-shadow(0 12px 24px #000b)}
  .door:is(:hover,:focus-within) .door-beast{opacity:1;translate:0 -50%;scale:1;animation:door-roar 1.1s .32s ease-out both,door-breathe 2.6s 1.45s ease-in-out infinite}
  .door:is(:hover,:focus-within) .door-fx{opacity:1;scale:1}
  .door:is(:hover,:focus-within) .door-rays{animation:door-spin 9s linear infinite}
  .door:is(:hover,:focus-within) .door-bolt{animation:door-bolt 1.6s .25s steps(1,end) infinite}
  .door:is(:hover,:focus-within) .door-bolt.b2{animation-delay:.9s}
  .door:has(+ .door + .door + .door:is(:hover,:focus-within))>.slab,.door:is(:hover,:focus-within) + .door + .door + .door>.slab{filter:brightness(.72)}
}
@keyframes door-roar{0%{transform:scaleX(var(--fx)) rotate(0)}12%{transform:scaleX(var(--fx)) rotate(-7deg) scale(1.1)}22%{transform:scaleX(var(--fx)) rotate(3deg) scale(1.08)}
  32%{transform:scaleX(var(--fx)) rotate(-5deg) scale(1.1)}44%{transform:scaleX(var(--fx)) rotate(2deg) scale(1.06)}58%{transform:scaleX(var(--fx)) rotate(-2deg) scale(1.03)}100%{transform:scaleX(var(--fx)) rotate(0) scale(1)}}
@keyframes door-breathe{0%,100%{transform:scaleX(var(--fx)) scale(1)}50%{transform:scaleX(var(--fx)) scale(1.035) translateY(-3px)}}
@keyframes door-spin{to{rotate:360deg}}
@keyframes door-bolt{0%{opacity:0}6%{opacity:1}10%{opacity:.2}14%{opacity:.9}22%{opacity:0}}
@media(prefers-reduced-motion:reduce){.door-beast,.door-rays,.door-bolt{animation:none!important}.door>.slab,.door-beast{transition-duration:.01s}}
/* PLAYER CARD (header, like the desktop HudBar): a gold progress ring around a dark medallion that holds the rank
   emblem (the old `background` shorthand wiped the sprite, so web showed an empty circle), the gold level badge,
   the name with the PRO tag, the gold rank line and a glowing progress bar. */
.player-card{cursor:pointer;transition:background .2s}
.player-card .avatar{background:conic-gradient(var(--gold) calc(var(--p,0)*1%),#1f3f84 0);box-shadow:0 0 0 1px #000c33,0 0 14px #85c8ff40;transition:box-shadow .25s}
.player-card .avatar::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#1b3358 0,#071d55 62%,#060d1d 100%);box-shadow:inset 0 0 0 1px #85c8ff55,inset 0 -6px 12px #0009}
.player-card .avatar i.emb{position:relative;z-index:1;background-color:transparent;background-image:url("./art/emblems.webp");background-repeat:no-repeat;background-size:500% 200%;filter:drop-shadow(0 2px 4px #000c);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.player-card .avatar b{z-index:2;box-shadow:0 0 8px #85c8ff80}
.player-card .card-text strong{font:700 14px var(--condensed);letter-spacing:2.5px;text-transform:uppercase;color:#f3f7fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-card .card-text small{font:500 10px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.player-card .card-text .progress{margin-top:4px;height:3px;background:#1f3f84}
.player-card .card-text .progress i{background:linear-gradient(90deg,#b8862e,var(--gold) 60%,#f2f8ff);box-shadow:0 0 8px #85c8ff99}
.player-card .pro-tag{margin-left:6px;vertical-align:2px;padding:1px 7px;font:700 9px var(--mono);font-style:normal;letter-spacing:2px;color:#06194f;background:linear-gradient(90deg,#a6d8ff,#f7893b);box-shadow:0 0 10px #ffb34a66}
@media (hover:hover){
  .player-card:hover{background:linear-gradient(90deg,#132a4ff5,#071d5500)}
  .player-card:hover .avatar{box-shadow:0 0 0 1px #000c33,0 0 22px #85c8ff90}
  .player-card:hover .avatar i.emb{transform:scale(1.1)}
}


/* ---------- PRO SUBSCRIPTION (Mercado Pago) ---------- */
.premium-panel .sub-box{display:grid;gap:10px;max-width:760px;padding:18px 20px;border:1px solid #a8d8ff40;border-radius:14px;background:#06121acc}
.premium-panel .sub-box .hint{margin:0}
.premium-panel .sub-line{margin:0;color:#dbe7f5;font-size:15px}
.premium-panel .sub-box .outline-button{justify-self:start}
.premium-panel .hint.error{color:var(--danger)}
.premium-panel .mp-email{max-width:420px}
.premium-panel .mp-email + .plan-fine{margin-top:-12px}


/* ---------- LEGAL (Terms and Conditions, Rules of use) ---------- */
#legal-screen .shell{padding-left:60px;padding-bottom:64px}
.legal-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;max-width:860px}
.legal-head,.legal-doc,.legal-doc section{min-width:0;grid-template-columns:minmax(0,1fr)}
.legal-doc p,.legal-doc li,.legal-lead{overflow-wrap:anywhere}
.legal-head{display:grid;gap:12px}
.legal-head h1{margin:0;font-size:clamp(32px,3.4vw,52px);line-height:1.08}
.legal-tabs{justify-self:start;margin-bottom:8px}
.legal-tabs .segment{text-decoration:none;display:inline-flex;align-items:center}
.legal-meta{margin:0;color:var(--muted);font-size:14px}
.legal-lead{margin:0;color:#dbe7f5;font-size:clamp(16px,1.15vw,19px);line-height:1.7}
.legal-doc{display:grid;gap:8px;padding:28px 32px;border:1px solid #2c4f96;border-radius:16px;background:#060d18e6}
.legal-doc section{display:grid;gap:10px;padding:14px 0;border-bottom:1px solid #1b2b40}
.legal-doc section:last-of-type{border-bottom:0}
.legal-doc h2{margin:0;color:var(--gold, #85c8ff);font-size:clamp(17px,1.2vw,20px);letter-spacing:.02em}
.legal-doc p,.legal-doc li{margin:0;color:#cfdbea;font-size:clamp(15px,1.02vw,17px);line-height:1.75}
.legal-doc ul{margin:0;padding-left:22px;display:grid;gap:6px}
.legal-doc a,.legal-accept a,.plan-fine a{color:#a8d8ff}
.legal-contact{margin-top:10px!important;color:var(--muted)!important;font-size:14px!important}
@media (max-width: 900px){
  #legal-screen .shell{padding-left:16px;padding-right:16px}
  .legal-doc{padding:18px 16px}
  .legal-tabs{justify-self:stretch;display:flex!important;flex-wrap:wrap}
  .legal-tabs .segment{flex:1 1 100%;justify-content:center;text-align:center}
}
.download-card .download-legal{font-size:12px;opacity:.85}
.download-card .download-legal a{color:#a8d8ff;text-decoration:none}
.download-card .download-legal a:hover{text-decoration:underline}


/* ---------- HAZTE PRO (home under the settings door, account header) ----------
   A big golden plate for players without PRO. Only transform/opacity animate (the shine sweep and the hover lift). */
.pro-cta{--h:84px;position:relative;display:flex;align-items:center;gap:16px;min-height:var(--h);padding:12px 26px 12px 18px;overflow:hidden;isolation:isolate;text-decoration:none;color:#06194f;
  background:linear-gradient(100deg,#8a5a12 0%,#85c8ff 22%,#ffe39a 48%,#85c8ff 72%,#a8711c 100%);border:2px solid #dcefff;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 0 0 1px #000a inset,0 10px 30px #0009;filter:drop-shadow(0 0 18px #ffb34a66);transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s}
.pro-cta .ico{width:52px;height:52px;flex:none;filter:drop-shadow(0 2px 3px #0008)}
.pro-cta-text{display:grid;gap:3px;min-width:0;flex:1}
.pro-cta-text b{font:800 clamp(22px,1.9vw,30px)/1 var(--condensed);letter-spacing:4px;text-shadow:0 1px 0 #fff6}
.pro-cta-text small{font:700 clamp(11px,.78vw,13px)/1.3 var(--mono);letter-spacing:.5px;color:#0d2a6b}
.pro-cta-arrow{font:800 40px/1 var(--condensed);font-style:normal;color:#0d2a6b;transition:transform .25s}
.pro-cta-shine{position:absolute;inset:-20% auto -20% 0;width:38%;z-index:-1;background:linear-gradient(100deg,transparent,#fff9 45%,#fff 50%,#fff9 55%,transparent);opacity:.75;
  transform:translateX(-120%) skewX(-18deg);animation:pro-shine 3.4s 1s ease-in-out infinite}
@keyframes pro-shine{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(330%) skewX(-18deg)}}
.pro-cta:hover,.pro-cta:focus-visible{transform:translateX(-10px) scale(1.04);filter:drop-shadow(0 0 26px #ffc95acc);outline:none}
.pro-cta:hover .pro-cta-arrow,.pro-cta:focus-visible .pro-cta-arrow{transform:translateX(6px)}
.pro-cta-home{margin-top:8px}
.account-pro:empty{display:none}
.account-pro .pro-cta{max-width:640px}
@media (max-width: 900px){
  .pro-cta{--h:74px;padding:10px 18px 10px 14px;gap:12px}
  .pro-cta .ico{width:42px;height:42px}
  .pro-cta-text b{font-size:22px;letter-spacing:3px}
}
@media (max-height: 780px) and (min-width: 901px){ .pro-cta-home{--h:68px;margin-top:2px} .pro-cta-home .ico{width:42px;height:42px} }
@media (prefers-reduced-motion: reduce){ .pro-cta-shine{animation:none;opacity:0} .pro-cta{transition-duration:.01s} }
/* Account on phones: grid tracks never grow past the screen (the hero, tabs and prefs pushed it to ~448 px on a 390 px phone). */
.account-main,.account-layout{grid-template-columns:minmax(0,1fr)}
.account-main>*,.account-layout>*{min-width:0}
@media(min-width:901px){.account-layout{grid-template-columns:260px minmax(0,1fr)}}
@media(min-width:901px) and (max-width:1100px){.account-layout{grid-template-columns:220px minmax(0,1fr)}}
.account-body,.account-section{min-width:0}
.account-body .typing-prefs{grid-template-columns:minmax(0,1fr)}
.account-body .typing-prefs>*{min-width:0}