/* ============================================================
   SELF-HOSTED FONTS — no CDN, fully offline-first.
   Cinzel (display) · Sora (body) · JetBrains Mono (data)
   ============================================================ */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cinzel-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/cinzel-latin-900-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sora-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sora-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sora-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/sora-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');}

/* ============================================================
   SPELLING ARENA — "THE LEXICON ARENA" SKIN
   One cohesive premium theme for hub + arena + teacher studio.
   Fully token-driven. Beautiful standalone (pure CSS/SVG).
   ------------------------------------------------------------
   ASSET SLOTS (optional — drop PNGs into /assets/img/ to upgrade):
     --img-bg      → assets/img/arena-bg.png     (coliseum backdrop)
     --img-logo    → assets/img/logo.png         (wordmark)
     --img-boss    → assets/img/boss-<week>.png  (set per-week in JS)
     .gem[data-gem]      → assets/img/gem-<n>.png (crystal art)
     .avatar[data-av]    → assets/img/avatar-<id>.png
     .rank-sigil[data-r] → assets/img/rank-<name>.png
   Each has a full CSS/SVG fallback, so art is additive, never required.
   ============================================================ */

:root {
  /* palette — obsidian coliseum, molten gold, arc cyan */
  --bg-0:#05060f; --bg-1:#080a1a; --bg-2:#0d1024;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(120,150,220,.14);
  --gold:#f5c451; --gold-hi:#ffe08a; --gold-lo:#b87814;
  --cyan:#35e0ff; --cyan-lo:#0a7c8c;
  --green:#35f0a0; --red:#ff4d6d;
  --ink:#dbe4ff; --ink-dim:rgba(219,228,255,.55); --ink-faint:rgba(219,228,255,.32);
  /* type */
  --f-display:'Cinzel',Georgia,serif;
  --f-body:'Sora','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  /* form */
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --shadow:0 24px 70px rgba(0,0,0,.6);
  --glow-gold:0 0 34px rgba(245,196,81,.35);
  --glow-cyan:0 0 34px rgba(53,224,255,.30);
  /* asset slots (unset by default → CSS fallbacks used) */
  --img-bg:none; --img-logo:none;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;background:var(--bg-0);color:var(--ink);font-family:var(--f-body);}
body{overflow-x:hidden;}

/* ── ATMOSPHERE ─────────────────────────────────────────── */
/* The coliseum backdrop is applied directly and ALWAYS (no JS needed).
   If the file is ever missing, it falls back to the obsidian colour. */
.arena-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:url('img/arena-bg.webp') center center / cover no-repeat, var(--bg-0);}
/* light readability scrim — keeps text legible while letting the backdrop show */
.arena-atmos::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(53,224,255,.07), transparent 55%),
    radial-gradient(120% 90% at 50% 115%, rgba(245,196,81,.07), transparent 55%),
    radial-gradient(ellipse at 50% 42%, rgba(5,6,15,.10), rgba(5,6,15,.55) 95%);
}
/* faint arch ribs (kept very subtle now that there's a real backdrop) */
.arena-atmos::after{
  content:'';position:absolute;inset:0;opacity:.18;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(120,150,220,.05) 78px 80px);
  mask-image:radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.embers{position:absolute;inset:0;}
.ember{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:var(--gold-hi);box-shadow:0 0 8px var(--gold);opacity:0;
  animation:rise linear infinite;}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0;}
  10%{opacity:.7;}90%{opacity:.5;}100%{transform:translateY(-105vh) scale(.4);opacity:0;}}
.star{position:absolute;border-radius:50%;background:#fff;animation:tw var(--d,3s) ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.08;}50%{opacity:var(--op,.6);}}
@media(prefers-reduced-motion:reduce){.ember,.star{animation:none;opacity:.3;}}

/* ── TYPE ───────────────────────────────────────────────── */
.display{font-family:var(--f-display);font-weight:900;letter-spacing:.04em;line-height:1;}
.mono{font-family:var(--f-mono);}
.eyebrow{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);}
.gold-text{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(245,196,81,.32));
}

/* ── BUTTONS (gel) ──────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:700;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 30px;border:none;border-radius:50px;cursor:pointer;overflow:hidden;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,filter .16s;text-decoration:none;}
.btn::after{content:'';position:absolute;inset:0 0 55%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);pointer-events:none;}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.btn-gold{background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));color:#1a1204;
  box-shadow:0 6px 0 #7a4e08,0 12px 30px rgba(245,196,81,.4);}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 9px 0 #7a4e08,0 18px 40px rgba(245,196,81,.5);}
.btn-gold:active{transform:translateY(3px);box-shadow:0 2px 0 #7a4e08;}
.btn-ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--cyan);color:#fff;box-shadow:var(--glow-cyan);}
.btn-danger{background:linear-gradient(140deg,#ff7a8c,#c31b39);color:#fff;box-shadow:0 6px 0 #7a0f22,0 12px 30px rgba(255,77,109,.35);}
.btn-danger:hover{transform:translateY(-3px);}
.btn-danger:active{transform:translateY(3px);box-shadow:0 2px 0 #7a0f22;}
.btn-sm{padding:9px 18px;font-size:.72rem;}

/* ── HUD (top bar, shared) ──────────────────────────────── */
.hud{position:relative;z-index:6000;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,34px);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(5,6,15,.9),rgba(5,6,15,.4));backdrop-filter:blur(10px);}
.hud-brand{font-family:var(--f-display);font-weight:700;font-size:clamp(.8rem,1.6vw,1.05rem);
  letter-spacing:.16em;text-transform:uppercase;}
.hud-brand small{display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.28em;color:var(--ink-faint);margin-top:3px;}
.hud-right{display:flex;align-items:center;gap:14px;}

/* champion chip */
.champ-chip{display:flex;align-items:center;gap:12px;padding:7px 14px 7px 8px;border:1px solid var(--line);
  border-radius:50px;background:var(--panel);}
.avatar{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:2rem;background:radial-gradient(circle at 35% 25%,#243056,#0b0e1e);
  border:2px solid var(--gold);box-shadow:0 0 16px rgba(245,196,81,.3);background-size:cover;background-position:center;}
.champ-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.champ-name{font-weight:700;font-size:.85rem;line-height:1;white-space:nowrap;}
.champ-rank{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);}
.rank-sigil{color:var(--gold);}
.xp-track{width:120px;height:5px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:3px;}
.xp-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--cyan-lo),var(--cyan));box-shadow:0 0 10px var(--cyan);transition:width .8s cubic-bezier(.23,1,.32,1);}
.flame{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:.7rem;color:var(--gold-hi);}
.flame b{font-size:.95rem;}

/* mute toggle */
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-dim);font-size:1.05rem;cursor:pointer;display:grid;place-items:center;transition:.2s;}
.icon-btn:hover{color:var(--gold);border-color:var(--gold);box-shadow:var(--glow-gold);}

/* ── PANELS / CARDS ─────────────────────────────────────── */
.wrap{position:relative;z-index:10;max-width:1000px;margin:0 auto;padding:0 clamp(16px,4vw,28px);}
.panel{background:linear-gradient(150deg,var(--bg-1),var(--bg-2));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);}

/* ── GEM GRID (crystalline, charge-fill) ────────────────── */
.gem-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,2.4vw,18px);}
@media(max-width:560px){.gem-grid{grid-template-columns:repeat(4,1fr);}}
.gem{position:relative;aspect-ratio:1;border-radius:18px;cursor:pointer;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:900;font-size:clamp(1rem,3vw,1.5rem);
  border:1px solid rgba(255,255,255,.16);overflow:hidden;background-size:cover;background-position:center;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,filter .22s;}
.gem::before{content:'';position:absolute;inset:0 0 50%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none;}
/* facet lines */
.gem::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 44%,rgba(255,255,255,.18) 50%,transparent 56%);}
.gem .gem-charge{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.28));transition:height .6s ease;}
.gem .gem-num{position:relative;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.gem:not(.locked):hover{transform:translateY(-6px) scale(1.06);filter:brightness(1.18);box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 24px currentColor;}
.gem:not(.locked):active{transform:translateY(1px) scale(.97);}
.gem:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.gem.locked{cursor:not-allowed;filter:grayscale(1) brightness(.32);background:rgba(15,15,25,.85)!important;color:transparent;}
.gem.locked .gem-num{opacity:0;}
.gem.locked::after{content:'🔒';display:grid;place-items:center;font-size:1.1rem;color:rgba(255,255,255,.2);background:none;}
.gem.cleared .gem-badge{position:absolute;top:5px;right:7px;font-size:.7rem;color:#fff;z-index:3;filter:drop-shadow(0 0 3px rgba(0,0,0,.6));}

/* ── DROP-IN ART (applied by ArenaCore.art when a PNG exists) ──
   Elements keep their emoji/number fallback until real art loads,
   then .has-art reveals the image and hides the placeholder glyph. */
.has-art{background-size:cover;background-position:center;background-repeat:no-repeat;}
.gem.has-art .gem-num{opacity:0;}
.gem.has-art::before,.gem.has-art::after{opacity:.35;}
.avatar.has-art,.hud-avatar.has-art,.av-chip.has-art,.rank-sigil.has-art,.boss-portrait.has-art{color:transparent!important;text-shadow:none!important;}
.rank-sigil.has-art{display:inline-block;width:20px;height:20px;vertical-align:-.34em;margin-right:.25em;}

/* ── FORGE (gameplay letter cells) ──────────────────────── */
.forge-stage{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;}
.forge-cells{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:64px;}
.cell{width:46px;height:58px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:700;font-size:1.5rem;text-transform:uppercase;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  transition:transform .12s,background .12s,border-color .12s,box-shadow .12s;}
.cell.filled{border-color:var(--gold);color:var(--gold-hi);box-shadow:inset 0 0 14px rgba(245,196,81,.14);}
.cell.forged{animation:forgeflash .5s ease;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:#1a1204;border-color:var(--gold-hi);box-shadow:0 0 22px var(--gold);}
@keyframes forgeflash{0%{transform:translateY(6px) scale(.9);}55%{transform:translateY(-8px) scale(1.14);}100%{transform:none;}}
.cell.blank{color:var(--ink-faint);border-style:dashed;}
.forge-input{width:min(520px,92vw);background:transparent;border:none;border-bottom:2px solid var(--line);
  color:#fff;font-family:var(--f-mono);font-size:clamp(1.4rem,5vw,2rem);text-align:center;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 4px;outline:none;transition:border-color .2s,box-shadow .2s;}
.forge-input:focus{border-color:var(--cyan);box-shadow:0 3px 0 -1px var(--cyan);}
.forge-input.wrong{border-color:var(--red);animation:shake .38s;}
.forge-input.correct{border-color:var(--green);box-shadow:0 3px 0 -1px var(--green);}
@keyframes shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(4px);}30%,50%,70%{transform:translateX(-8px);}40%,60%{transform:translateX(8px);}}

/* combo meter */
.combo{display:flex;flex-direction:column;align-items:center;gap:6px;}
.combo-x{font-family:var(--f-display);font-weight:900;font-size:clamp(1.6rem,5vw,2.4rem);
  color:var(--gold-hi);text-shadow:var(--glow-gold);transition:transform .16s;}
.combo-x.pop{animation:pop .2s;}
@keyframes pop{50%{transform:scale(1.35);}}
.combo-track{width:min(280px,70vw);height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.combo-track .fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));box-shadow:0 0 12px var(--gold);transition:width .3s;}

/* timer rail */
.timer-rail{position:fixed;top:0;left:0;right:0;height:5px;background:rgba(255,255,255,.05);z-index:30;}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),#a0f8ff);transition:width .05s linear,background .3s;}

/* stat pills */
.stat-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.stat{min-width:96px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);text-align:center;}
.stat small{display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.stat b{font-family:var(--f-display);font-size:1.5rem;color:#fff;}
.stat.bump{animation:bump .2s;}
@keyframes bump{50%{transform:scale(1.18);}}

/* ── BOSS BATTLE ────────────────────────────────────────── */
.boss-stage{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;}
.boss-portrait{width:clamp(120px,30vw,180px);height:clamp(120px,30vw,180px);border-radius:26px;
  display:grid;place-items:center;font-size:clamp(3.6rem,12vw,6rem);position:relative;overflow:hidden;
  background:radial-gradient(circle at 40% 30%,#3a1230,#120820);border:2px solid var(--red);
  box-shadow:0 0 40px rgba(255,77,109,.35);background-size:cover;background-position:center;}
.boss-portrait.hurt{animation:bosshurt .3s;}
@keyframes bosshurt{0%{filter:brightness(2.4) hue-rotate(-20deg);transform:scale(1.05) translateX(-6px);}100%{filter:none;transform:none;}}
.boss-name{font-family:var(--f-display);font-weight:900;font-size:1.3rem;letter-spacing:.1em;color:var(--red);text-transform:uppercase;}
.boss-hp-wrap{width:min(460px,90vw);}
.boss-hp-bar{height:16px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden;}
.boss-hp-fill{height:100%;width:100%;border-radius:10px;background:linear-gradient(90deg,#c31b39,var(--red));box-shadow:0 0 14px var(--red);transition:width .4s cubic-bezier(.23,1,.32,1);}
.boss-hp-label{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;color:var(--ink-faint);margin-top:6px;text-transform:uppercase;}

/* ── POPUPS ─────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:radial-gradient(ellipse at 50% 34%, rgba(5,6,15,.10), rgba(5,6,15,.42) 76%);
  transition:opacity .45s,visibility .45s;}
.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.popup{display:none;position:fixed;inset:0;z-index:8000;background:rgba(4,5,12,.86);backdrop-filter:blur(14px);
  align-items:center;justify-content:center;padding:20px;animation:fade .25s ease;}
.popup.open{display:flex;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.popup-box{position:relative;width:min(560px,94vw);max-height:90vh;overflow:auto;padding:clamp(28px,5vw,46px);
  background:linear-gradient(150deg,#0c0f22,#12142c);border:1px solid rgba(245,196,81,.34);border-radius:26px;
  text-align:center;box-shadow:0 0 60px rgba(245,196,81,.12),var(--shadow);animation:pin .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes pin{from{transform:scale(.82);opacity:0;}to{transform:scale(1);opacity:1;}}
.popup-box .close-x{position:absolute;top:12px;left:16px;font-size:26px;color:var(--gold);opacity:.6;cursor:pointer;line-height:1;}
.popup-box .close-x:hover{opacity:1;}
.rule{display:flex;align-items:center;gap:12px;justify-content:center;margin:16px 0;color:var(--ink-faint);}
.rule::before,.rule::after{content:'';height:1px;flex:1;max-width:90px;background:linear-gradient(90deg,transparent,var(--line),transparent);}
.rule span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);}
.score-huge{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,12vw,5rem);line-height:1;}

/* ── IDENTITY PICKER ────────────────────────────────────── */
.picker-grid{display:grid;gap:10px;}
.nick-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
.av-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));}
.chip{padding:10px 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  cursor:pointer;font-size:.82rem;transition:.16s;text-align:center;}
.chip:hover{border-color:var(--cyan);color:#fff;}
.chip.sel{border-color:var(--gold);background:rgba(245,196,81,.12);color:var(--gold-hi);box-shadow:var(--glow-gold);}
.av-chip{aspect-ratio:1;display:grid;place-items:center;font-size:1.8rem;border-radius:14px;background-size:cover;background-position:center;}

/* ── TEACHER STUDIO ─────────────────────────────────────── */
.sheet{background:#fff;color:#111;border-radius:12px;padding:26px 30px;}
/* native dropdown lists render on a white system menu — force dark, readable text */
select option{background:#0d1024;color:#dbe4ff;}
select{color:var(--ink);}
.sheet h2{font-family:var(--f-display);color:#111;}
.wordlist{columns:2;column-gap:34px;margin-top:14px;}
.wordlist li{break-inside:avoid;margin:0 0 7px;font-size:.95rem;}
.wk-head{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:#a06a00;margin:14px 0 6px;border-bottom:1px solid #eab;}
@media print{
  html,body{background:#fff!important;} .arena-atmos,.hud,.no-print{display:none!important;}
  .sheet{box-shadow:none;border:none;} .wrap{max-width:none;padding:0;}
}

/* toast */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:9000;
  padding:12px 22px;border-radius:50px;background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));color:#1a1204;
  font-family:var(--f-display);font-weight:700;letter-spacing:.08em;box-shadow:var(--glow-gold),var(--shadow);
  opacity:0;transition:.3s;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

footer{position:fixed;left:0;right:0;bottom:0;z-index:7000;width:100%;box-sizing:border-box;text-align:center;padding:12px 26px;
  border-top:1px solid var(--line);background:linear-gradient(180deg, rgba(8,10,26,.90), rgba(4,5,13,.985));backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-dim);}
footer a{color:var(--gold);text-decoration:none;font-weight:600;transition:.2s;}
footer a:hover{color:var(--gold-hi);text-shadow:var(--glow-gold);}
footer .brandline{display:none;} /* keep the bar to a single copyright line, like the other Toolkit apps */
body{padding-bottom:46px;} /* clear the fixed footer bar */
@media print{footer{display:none;} body{padding-bottom:0;}}

/* ── CHAMPION RAIL (left, full height) — big avatar/rank + defeated bosses ── */
.champ-rail{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:6000;box-sizing:border-box;
  display:flex;flex-direction:column;gap:16px;padding:20px 15px 56px;overflow-y:auto;
  background:linear-gradient(180deg, rgba(9,11,28,.94), rgba(5,6,15,.97));border-right:1px solid var(--line);
  backdrop-filter:blur(12px);scrollbar-width:thin;}
.champ-rail::-webkit-scrollbar{width:6px;}
.champ-rail::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--gold-lo));border-radius:6px;}
.rail-brand{text-decoration:none;text-align:center;font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  letter-spacing:.05em;color:var(--ink);line-height:1.05;}
.rail-brand small{display:block;font-family:var(--f-mono);font-size:.46rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px;}
.rail-profile{display:flex;flex-direction:column;align-items:center;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.rail-avatar{width:120px;height:120px;font-size:3.4rem;border-width:3px;box-shadow:0 0 26px rgba(245,196,81,.4);}
.rail-name{font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:var(--gold-hi);text-align:center;line-height:1.05;text-shadow:var(--glow-gold);}
.rail-rank{display:flex;flex-direction:column;align-items:center;gap:7px;}
.rail-sigil{color:var(--gold);font-size:1.7rem;}
.rail-profile .rail-sigil.has-art{width:70px;height:70px;vertical-align:middle;margin:0;}
.rail-rankname{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.rail-xp{width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;}
.rail-xp .xp-track{width:100%;height:7px;margin-top:0;}
.rail-xp-text{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.05em;color:var(--ink-dim);text-align:center;}
.rail-flame{justify-content:center;font-size:.82rem;}
.rail-bosses{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0;}
.rail-section-title{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);text-align:center;}
.boss-trophies{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-content:start;}
.boss-trophy{aspect-ratio:1;border-radius:13px;display:grid;place-items:center;font-size:1.7rem;position:relative;overflow:hidden;
  background:radial-gradient(circle at 40% 30%, rgba(40,50,90,.45), rgba(9,11,26,.85));border:1.5px solid var(--line);
  background-size:cover;background-position:center;transition:transform .15s;}
.boss-trophy.won{border:2px solid var(--gold);box-shadow:0 0 16px rgba(245,196,81,.45),inset 0 0 20px rgba(0,0,0,.4);}
.boss-trophy.won:hover{transform:scale(1.1);z-index:2;}
.boss-trophy.locked{opacity:.4;font-size:1.1rem;}
.boss-trophy.has-art{color:transparent;}
.rail-controls{display:flex;justify-content:center;gap:10px;padding-top:14px;border-top:1px solid var(--line);}
.rail-controls .icon-btn{width:38px;height:38px;font-size:.95rem;}

/* inset the main content to the right of the rail (desktop) */
.overlay{left:240px;}
#gameplay{margin-left:240px;min-height:100vh!important;}

/* mobile: rail collapses to a compact top bar */
@media (max-width:820px){
  .champ-rail{left:0;right:0;top:0;bottom:auto;width:auto;height:auto;flex-direction:row;align-items:center;
    gap:12px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--line);}
  .rail-brand{display:none;}
  .rail-profile{flex-direction:row;align-items:center;border-bottom:none;padding:0;gap:9px;flex:none;}
  .rail-avatar{width:46px;height:46px;font-size:1.4rem;border-width:2px;box-shadow:0 0 12px rgba(245,196,81,.3);}
  .rail-name{font-size:.92rem;}
  .rail-rank{flex-direction:row;gap:6px;}
  .rail-profile .rail-sigil.has-art{width:24px;height:24px;}
  .rail-rankname{font-size:.56rem;}
  .rail-xp{width:82px;}
  .rail-xp-text{display:none;}
  .rail-flame{font-size:.72rem;}
  .rail-bosses{display:none;}
  .rail-controls{border-top:none;padding-top:0;margin-left:auto;gap:6px;flex:none;}
  .overlay{left:0;top:70px;}
  #gameplay{margin-left:0;margin-top:70px;min-height:calc(100vh - 70px)!important;}
  #grade-badge{top:auto!important;bottom:54px;right:12px;z-index:5001;}
}

/* ── RANK-UP CELEBRATION ─────────────────────────────────── */
.rankup-box{max-width:440px;border-color:rgba(245,196,81,.55);
  box-shadow:0 0 60px rgba(245,196,81,.3),inset 0 0 40px rgba(245,196,81,.06);
  background:radial-gradient(ellipse at 50% 25%, rgba(35,26,10,.9), var(--panel));animation:rankPop .5s cubic-bezier(.2,1.3,.4,1);}
@keyframes rankPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.rankup-eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.4em;color:var(--cyan);margin-bottom:14px;}
.rankup-sigil{font-size:3.6rem;color:var(--gold);margin:0 auto 6px;display:grid;place-items:center;
  filter:drop-shadow(0 0 18px rgba(245,196,81,.55));animation:sigilPulse 1.8s ease-in-out infinite;}
.rankup-box .rankup-sigil.has-art{width:128px;height:128px;background-size:contain;background-repeat:no-repeat;background-position:center;}
@keyframes sigilPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.rankup-title{font-family:var(--f-display);font-weight:900;font-size:2.6rem;color:var(--gold-hi);letter-spacing:.06em;
  text-shadow:0 0 26px rgba(245,196,81,.6);margin:6px 0 2px;}
.rankup-name{font-family:var(--f-mono);font-size:1rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.rankup-sub{color:var(--ink-dim);font-size:.86rem;line-height:1.5;max-width:340px;margin:0 auto 22px;}

/* ── LAUNCH LOADING SCREEN (5s cinematic intro) ──────────── */
.launch{position:fixed;inset:0;z-index:12000;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg-0);
  opacity:1;transition:opacity .8s ease, transform .8s ease;}
.launch.done{opacity:0;transform:scale(1.04);pointer-events:none;}

/* coliseum backdrop with a slow ken-burns push-in */
.launch-bg{position:absolute;inset:0;
  background:url('img/arena-bg.webp') center center / cover no-repeat, var(--bg-1);
  transform:scale(1.06);animation:launchKen 5.6s ease-out forwards;will-change:transform;}
@keyframes launchKen{0%{transform:scale(1.06)}100%{transform:scale(1.16)}}
.launch-scrim{position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(53,224,255,.10), transparent 52%),
    radial-gradient(120% 90% at 50% 108%, rgba(245,196,81,.14), transparent 55%),
    radial-gradient(ellipse at 50% 45%, rgba(4,5,12,.35), rgba(4,5,12,.86) 96%);}
/* rotating light rays behind the crest */
.launch-rays{position:absolute;top:38%;left:50%;width:150vmax;height:150vmax;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,
    rgba(245,196,81,.10) 0deg 6deg, transparent 6deg 22deg);
  mask-image:radial-gradient(circle at center,#000 0%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at center,#000 0%,transparent 62%);
  animation:launchRays 40s linear infinite;}
@keyframes launchRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.launch-embers{position:absolute;inset:0;pointer-events:none;}

.launch-inner{position:relative;z-index:2;text-align:center;padding:24px;
  display:flex;flex-direction:column;align-items:center;
  animation:launchIn .9s cubic-bezier(.2,.9,.3,1) both;}
@keyframes launchIn{0%{opacity:0;transform:translateY(18px) scale(.97)}100%{opacity:1;transform:none}}

.launch-eyebrow{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.38em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:18px;
  animation:launchGlow 2.4s ease-in-out infinite;}
@keyframes launchGlow{0%,100%{opacity:.65}50%{opacity:1}}

.launch-logo{width:min(560px,82vw);height:auto;
  filter:drop-shadow(0 6px 30px rgba(245,196,81,.4)) drop-shadow(0 0 60px rgba(53,224,255,.15));
  animation:launchLogo 5.6s ease-out both;}
@keyframes launchLogo{0%{opacity:0;transform:scale(.9)}18%{opacity:1;transform:scale(1)}
  100%{opacity:1;transform:scale(1.015)}}
.launch-wordmark{display:none;font-size:clamp(2.6rem,10vw,5rem);
  text-shadow:0 0 40px rgba(245,196,81,.5);}

/* glowing gem row that lights up left-to-right */
.launch-gems{display:flex;gap:clamp(8px,2.4vw,18px);margin:26px 0 30px;justify-content:center;}
.launch-gem{width:clamp(30px,7vw,46px);height:clamp(30px,7vw,46px);border-radius:12px;
  background:radial-gradient(circle at 34% 28%, rgba(255,224,138,.6), rgba(184,120,20,.18) 70%);
  background-size:cover;background-position:center;position:relative;
  display:grid;place-items:center;font-family:var(--f-display);font-weight:900;
  color:rgba(255,255,255,.9);font-size:.85rem;
  border:1px solid rgba(245,196,81,.35);
  box-shadow:0 0 0 rgba(245,196,81,0);opacity:0;transform:translateY(10px) scale(.6);
  animation:launchGem .55s cubic-bezier(.2,1.4,.4,1) forwards, launchGemFloat 3.2s ease-in-out infinite;
  animation-delay:calc(.5s + var(--i) * .32s), calc(1.2s + var(--i) * .32s);}
@keyframes launchGem{to{opacity:1;transform:none;
  box-shadow:0 0 22px rgba(245,196,81,.5),inset 0 1px 0 rgba(255,255,255,.25);}}
@keyframes launchGemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 5-second gold loading bar */
.launch-bar{width:min(360px,76vw);height:6px;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(245,196,81,.18);}
.launch-bar span{display:block;height:100%;width:0;border-radius:20px;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));
  box-shadow:0 0 16px rgba(245,196,81,.7);animation:launchBar 5s linear forwards;position:relative;}
.launch-bar span::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:launchShine 1.4s ease-in-out infinite;}
@keyframes launchBar{to{width:100%}}
@keyframes launchShine{to{transform:translateX(220%)}}

.launch-status{margin-top:16px;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
.launch-dots i{font-style:normal;opacity:.2;animation:launchDot 1.4s infinite;}
.launch-dots i:nth-child(2){animation-delay:.2s}
.launch-dots i:nth-child(3){animation-delay:.4s}
@keyframes launchDot{0%,60%,100%{opacity:.2}30%{opacity:1}}

/* Mourad Mekki Teacher Toolkit brand lockup */
.launch-brand{position:absolute;bottom:clamp(22px,5vh,44px);left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:10px;
  animation:launchIn 1.1s .25s cubic-bezier(.2,.9,.3,1) both;}
.launch-brand-mark{color:var(--gold);font-size:.8rem;filter:drop-shadow(0 0 8px rgba(245,196,81,.6));}
.launch-brand-text{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 18px rgba(245,196,81,.35);}

.launch-hint{position:absolute;bottom:clamp(64px,10vh,96px);left:0;right:0;z-index:2;
  text-align:center;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);opacity:0;transition:opacity .4s;
  pointer-events:none;}
.launch-hint.show{opacity:1;animation:launchGlow 1.8s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  .launch-bg{animation:none;transform:scale(1.08);}
  .launch-rays{display:none;}
  .launch-logo,.launch-inner,.launch-brand{animation:none;opacity:1;transform:none;}
  .launch-gem{animation:none;opacity:1;transform:none;
    box-shadow:0 0 18px rgba(245,196,81,.4);}
  .launch-bar span::after{animation:none;}
}