/* ===========================================================
   CODE ESCAPE — Design tokens
   Palette: deep lab-navy base, cyan signal, magenta alarm,
   amber warning, mint success. Display face = Chakra Petch
   (angular, technical, reads like lab signage). Body = Inter.
   Data/code = JetBrains Mono.
=========================================================== */
:root{
  --bg-0:#000000;
  --bg-1:#000000;
  --bg-2:#000000;
  --surface:rgba(20,28,48,.55);
  --surface-hi:rgba(28,38,64,.7);
  --border:rgba(120,160,220,.16);
  --border-hi:rgba(120,200,255,.35);

  --cyan:#4fd8ff;
  --cyan-dim:#1c8fb8;
  --magenta:#ff3d81;
  --amber:#ffb347;
  --mint:#3dffa6;
  --violet:#a78bfa;

  --text-0:#eaf2ff;
  --text-1:#aebcd9;
  --text-2:#6d7ba0;

  --font-display:'Chakra Petch', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;

  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:radial-gradient(ellipse 120% 80% at 50% -10%, #101a34 0%, var(--bg-0) 55%);
  color:var(--text-0);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:.02em; margin:0; }
p{ margin:0; }
button{ font-family:var(--font-body); }
a{ color:var(--cyan); }
::selection{ background:var(--cyan); color:#00131a; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Focus visibility */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* Background canvas — circuit grid + particles */
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

#app{ position:relative; z-index:1; min-height:100vh; }

/* ---------- Utility ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:.85;
}
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.btn{
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.85rem 1.6rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-hi);
  background:transparent;
  color:var(--text-0);
  cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  position:relative;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px -8px rgba(79,216,255,.35); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:linear-gradient(135deg, var(--cyan), #2ba9e0);
  color:#00131a;
  border:none;
  font-weight:600;
  box-shadow:0 0 0 1px rgba(79,216,255,.25), 0 10px 30px -10px rgba(79,216,255,.6);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(79,216,255,.4), 0 14px 36px -8px rgba(79,216,255,.75); }
.btn-ghost{ border-color:var(--border); color:var(--text-1); }
.btn-danger{ border-color:rgba(255,61,129,.5); color:var(--magenta); }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-sm{ padding:.5rem 1rem; font-size:.75rem; }

.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.78rem;
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
  color:var(--text-1);
}

/* ---------- Scanline / glitch overlay ---------- */
.scanlines::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

/* ===========================================================
   LANDING SCREEN
=========================================================== */
.landing{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem;
  position:relative;
}
.landing .lockdown-tag{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.2em;
  color:var(--magenta); border:1px solid rgba(255,61,129,.4);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.6rem;
  background:rgba(255,61,129,.06);
  animation:pulseWarn 2.4s ease-in-out infinite;
}
@keyframes pulseWarn{ 0%,100%{opacity:.7} 50%{opacity:1} }

.landing h1.logo{
  font-size:clamp(3rem, 10vw, 6.5rem);
  line-height:.95;
  background:linear-gradient(180deg, #fff 0%, var(--cyan) 60%, var(--cyan-dim) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(79,216,255,.25);
  margin-bottom:.6rem;
  letter-spacing:.02em;
}
.landing .tagline{
  font-family:var(--font-mono); color:var(--text-1); font-size:1.1rem;
  margin-bottom:.4rem;
}
.landing .sub{
  max-width:520px; color:var(--text-2); font-size:.95rem; margin:1rem 0 2.4rem;
  line-height:1.6;
}
.landing .btn-row{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.2rem; }
.landing .menu-links{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; }
.menu-link{
  background:none; border:none; color:var(--text-2); font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  padding:.3rem .2rem; border-bottom:1px solid transparent;
}
.menu-link:hover{ color:var(--cyan); border-color:var(--cyan); }

.landing footer{
  position:absolute; bottom:1.2rem; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-2);
}
.landing footer .links a{ color:var(--text-2); margin:0 .5rem; text-decoration:none; }
.landing footer .links a:hover{ color:var(--cyan); }

/* terminal boot sequence, signature element */
.boot-terminal{
  width:min(560px, 90vw);
  text-align:left;
  margin-bottom:2rem;
  padding:1rem 1.2rem;
  font-family:var(--font-mono); font-size:.82rem; color:var(--mint);
  min-height:6.4em;
}
.boot-terminal .line{ opacity:0; animation:typeIn .4s forwards; white-space:pre-wrap; }
.boot-terminal .cursor{ display:inline-block; width:.55em; height:1em; background:var(--mint); vertical-align:-2px; animation:blink 1s step-end infinite; }
@keyframes typeIn{ to{ opacity:1; } }
@keyframes blink{ 50%{ opacity:0; } }

/* ===========================================================
   TOP BAR / HUD (persistent across game screens)
=========================================================== */
.hud{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1.2rem;
  border-bottom:1px solid var(--border);
  background:rgba(9,13,24,.75);
  backdrop-filter:blur(12px);
  flex-wrap:wrap;
}
.hud .hud-left{ display:flex; align-items:center; gap:.8rem; }
.hud .brand{
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.05em;
  color:var(--text-0); cursor:pointer; background:none; border:none;
  display:flex; align-items:center; gap:.4rem;
}
.hud .brand::before{ content:'◆'; color:var(--cyan); font-size:.8rem; }
.hud .hud-stats{ display:flex; gap:.65rem; flex-wrap:wrap; }
.stat-chip{
  display:flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.78rem;
  padding:.32rem .65rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
}
.stat-chip .lbl{ color:var(--text-2); }
.stat-chip.xp{ color:var(--cyan); border-color:rgba(79,216,255,.3); }
.stat-chip.coins{ color:var(--amber); border-color:rgba(255,179,71,.3); }
.stat-chip.lives{ color:var(--magenta); border-color:rgba(255,61,129,.3); }
.stat-chip.streak{ color:var(--mint); border-color:rgba(61,255,166,.3); }

.xp-track{
  width:110px; height:6px; border-radius:99px; background:rgba(255,255,255,.08);
  overflow:hidden; margin-left:.3rem;
}
.xp-track > i{ display:block; height:100%; background:linear-gradient(90deg, var(--cyan), var(--mint)); transition:width .5s var(--ease); }

/* ===========================================================
   MISSION MAP
=========================================================== */
.map-wrap{ max-width:1100px; margin:0 auto; padding:2.4rem 1.5rem 4rem; }
.map-header{ margin-bottom:2rem; }
.map-header .eyebrow{ margin-bottom:.5rem; display:block; }
.map-header h2{ font-size:clamp(1.7rem,4vw,2.4rem); }
.map-header p{ color:var(--text-2); margin-top:.5rem; max-width:60ch; }

.level-track{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.1rem;
}
.level-card{
  position:relative; padding:1.3rem 1.2rem 1.2rem;
  border-radius:var(--radius-md); border:1px solid var(--border);
  background:linear-gradient(160deg, var(--surface), rgba(12,17,32,.4));
  cursor:pointer; text-align:left; color:var(--text-0);
  transition:border-color .2s, transform .18s var(--ease), box-shadow .2s;
  display:flex; flex-direction:column; gap:.55rem; min-height:150px;
}
.level-card:hover{ border-color:var(--border-hi); transform:translateY(-3px); box-shadow:0 12px 28px -14px rgba(79,216,255,.4); }
.level-card.locked{ cursor:not-allowed; opacity:.55; }
.level-card.locked:hover{ transform:none; box-shadow:none; }
.level-card.completed{ border-color:rgba(61,255,166,.4); }
.level-card.boss{ border-color:rgba(255,61,129,.4); background:linear-gradient(160deg, rgba(46,10,26,.5), rgba(12,17,32,.4)); }
.level-num{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); letter-spacing:.1em; }
.level-title{ font-family:var(--font-display); font-size:1.15rem; }
.level-desc{ font-size:.82rem; color:var(--text-2); line-height:1.45; flex:1; }
.level-footer{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); }
.level-card .lock-icon{ font-size:1.1rem; }
.level-card .check{ color:var(--mint); }

/* Tier tabs */
.tier-tabs-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.tier-tab{
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.03em;
  padding:.6rem 1.1rem; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); color:var(--text-1); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.tier-tab .tier-count{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); margin-left:.3rem; }
.tier-tab.active{ border-color:var(--border-hi); background:rgba(79,216,255,.08); color:var(--text-0); }
.tier-tab.locked{ opacity:.5; cursor:not-allowed; }
.tier-tab.core-tab.active{ border-color:rgba(255,61,129,.5); background:rgba(255,61,129,.08); }

/* Pagination */
.page-controls{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem; font-family:var(--font-mono); font-size:.8rem; color:var(--text-2);
  flex-wrap:wrap; gap:.6rem;
}
.page-indicator{ letter-spacing:.03em; }

/* ===========================================================
   CHALLENGE SCREEN
=========================================================== */
.stage-wrap{ max-width:920px; margin:0 auto; padding:2rem 1.5rem 4rem; }
.stage-story{
  padding:1.4rem 1.5rem; margin-bottom:1.6rem; border-left:3px solid var(--cyan);
}
.stage-story .eyebrow{ margin-bottom:.4rem; display:block; }
.stage-story p{ color:var(--text-1); line-height:1.6; font-size:.95rem; }

.panel{ padding:1.6rem; margin-bottom:1.3rem; }
.panel h3{ font-size:1.05rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }

.code-block{
  font-family:var(--font-mono); font-size:.88rem; line-height:1.65;
  background:#080c16; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1rem 1.1rem; overflow-x:auto; color:#c9e6ff; white-space:pre;
}
.code-block .kw{ color:var(--violet); }
.code-block .num{ color:var(--amber); }
.code-block .cm{ color:var(--text-2); font-style:italic; }

.question-text{ font-size:1.05rem; margin:1rem 0 1.1rem; color:var(--text-0); }

.options-grid{ display:grid; gap:.7rem; }
.option-btn{
  text-align:left; padding:.9rem 1.1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--text-0);
  cursor:pointer; font-family:var(--font-body); font-size:.92rem;
  display:flex; gap:.7rem; align-items:flex-start;
  transition:border-color .15s, background .15s, transform .1s;
}
.option-btn .tag{ font-family:var(--font-mono); color:var(--cyan); flex-shrink:0; }
.option-btn:hover:not(:disabled){ border-color:var(--border-hi); background:rgba(79,216,255,.05); }
.option-btn.correct{ border-color:var(--mint); background:rgba(61,255,166,.1); }
.option-btn.wrong{ border-color:var(--magenta); background:rgba(255,61,129,.1); }
.option-btn:disabled{ cursor:default; }

/* Logic gate toggles */
.gate-sim{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:center; padding:1.2rem 0; }
.toggle-input{ text-align:center; }
.toggle-input .name{ font-family:var(--font-mono); color:var(--text-2); font-size:.8rem; margin-bottom:.5rem; }
.bit-btn{
  width:56px; height:56px; border-radius:12px; font-family:var(--font-mono); font-size:1.3rem;
  border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text-1); cursor:pointer;
}
.bit-btn.on{ background:linear-gradient(135deg,var(--cyan),var(--cyan-dim)); color:#00131a; border-color:var(--cyan); font-weight:700; }
.gate-op{ font-family:var(--font-display); font-size:1.6rem; color:var(--text-2); }
.gate-output{
  width:64px; height:64px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:1.5rem; font-weight:700; border:2px solid var(--border);
}
.gate-output.on{ border-color:var(--mint); color:var(--mint); box-shadow:0 0 24px -4px rgba(61,255,166,.5); }
.gate-output.off{ border-color:var(--text-2); color:var(--text-2); }

/* Loop lab grid */
.loop-grid-wrap{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.loop-grid{ display:grid; grid-template-columns:repeat(6,42px); grid-template-rows:repeat(1,42px); gap:4px; }
.loop-cell{ width:42px; height:42px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.loop-cell.robot{ background:rgba(79,216,255,.18); border-color:var(--cyan); }
.loop-cell.exit{ background:rgba(61,255,166,.12); border-color:var(--mint); }
.loop-cell.crash{ background:rgba(255,61,129,.18); border-color:var(--magenta); }
.loop-controls{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-mono); }
.loop-controls input[type=number]{
  width:64px; padding:.5rem; text-align:center; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:8px; color:var(--text-0); font-family:var(--font-mono); font-size:1rem;
}

/* Array vault */
.array-row{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:1rem 0; }
.array-cell{ display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.array-idx{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-2); }
.array-box{
  width:56px; height:56px; border-radius:10px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:1.05rem;
  background:rgba(255,255,255,.03); cursor:pointer; transition:.15s;
}
.array-box:hover{ border-color:var(--border-hi); }
.array-box.correct{ border-color:var(--mint); color:var(--mint); }
.array-box.wrong{ border-color:var(--magenta); color:var(--magenta); }

/* Stack visualization */
.stack-wrap{ display:flex; flex-direction:column-reverse; align-items:center; gap:4px; min-height:220px; justify-content:flex-start; width:140px; margin:0 auto; }
.stack-slot{
  width:120px; height:40px; border-radius:8px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  background:rgba(255,255,255,.03); position:relative;
}
.stack-slot.top::after{ content:'← TOP'; position:absolute; right:-64px; font-size:.68rem; color:var(--cyan); }

/* Function core diagram */
.fn-diagram{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; padding:1rem 0; }
.fn-input{ font-family:var(--font-mono); background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:.6rem 1rem; }
.fn-box{ font-family:var(--font-display); background:linear-gradient(135deg,var(--violet),#6d5bd0); color:#fff; padding:.8rem 1.2rem; border-radius:10px; }
.fn-arrow{ color:var(--text-2); font-size:1.3rem; }
.fn-output{ font-family:var(--font-mono); border:1px solid var(--mint); color:var(--mint); border-radius:8px; padding:.6rem 1rem; }

/* Sort arena */
.sort-bars{ display:flex; align-items:flex-end; gap:6px; height:160px; padding:1rem 0; }
.sort-bar{ width:28px; background:linear-gradient(180deg,var(--cyan),var(--cyan-dim)); border-radius:4px 4px 0 0; transition:height .3s var(--ease), transform .3s; display:flex; align-items:flex-start; justify-content:center; font-family:var(--font-mono); font-size:.68rem; color:#00131a; font-weight:700; }
.sort-bar.active{ background:linear-gradient(180deg,var(--amber),#c98423); }
.sort-bar.sorted{ background:linear-gradient(180deg,var(--mint),#1fa06b); }
.sort-stats{ display:flex; gap:1.2rem; font-family:var(--font-mono); font-size:.82rem; color:var(--text-1); flex-wrap:wrap; }

/* Debug room */
.bug-line{ position:relative; }
.bug-line.flagged{ background:rgba(255,61,129,.14); border-radius:4px; }

/* Hint + actions row */
.action-row{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:1.2rem; }
.hint-box{
  font-size:.85rem; color:var(--amber); background:rgba(255,179,71,.08);
  border:1px solid rgba(255,179,71,.3); padding:.7rem 1rem; border-radius:var(--radius-sm);
  margin-top:.9rem; display:none;
}
.hint-box.show{ display:block; }

.timer-badge{ font-family:var(--font-mono); font-size:.9rem; color:var(--amber); }
.combo-badge{ font-family:var(--font-mono); font-size:.85rem; color:var(--magenta); }

/* ===========================================================
   FEEDBACK OVERLAYS (success / fail / score)
=========================================================== */
.overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(4,6,12,.78); backdrop-filter:blur(6px); padding:1.5rem;
  animation:fadeIn .25s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.overlay-card{
  width:min(460px,100%); text-align:center; padding:2.4rem 2rem;
  animation:popIn .35s var(--ease);
}
@keyframes popIn{ from{ opacity:0; transform:scale(.9) translateY(10px);} to{ opacity:1; transform:scale(1) translateY(0);} }
.overlay-card .icon{ font-size:3rem; margin-bottom:.6rem; }
.overlay-card h3{ font-size:1.5rem; margin-bottom:.4rem; }
.overlay-card .reward-row{ display:flex; justify-content:center; gap:1.4rem; margin:1.2rem 0; font-family:var(--font-mono); }
.overlay-card .reward{ display:flex; flex-direction:column; gap:.2rem; }
.overlay-card .reward .v{ font-size:1.3rem; font-weight:700; }
.overlay-card .reward.xp .v{ color:var(--cyan); }
.overlay-card .reward.coins .v{ color:var(--amber); }
.overlay-card .reward .k{ font-size:.68rem; color:var(--text-2); letter-spacing:.1em; }
.overlay-card.success{ border-color:rgba(61,255,166,.4); box-shadow:0 0 60px -10px rgba(61,255,166,.25); }
.overlay-card.fail{ border-color:rgba(255,61,129,.4); box-shadow:0 0 60px -10px rgba(255,61,129,.25); }

.score-list{ text-align:left; font-family:var(--font-mono); font-size:.88rem; display:flex; flex-direction:column; gap:.5rem; margin:1.2rem 0; }
.score-list div{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--border); padding-bottom:.4rem; }

/* ===========================================================
   PROFILE / ACHIEVEMENTS / LEADERBOARD
=========================================================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }

.avatar-grid{ display:flex; gap:.7rem; flex-wrap:wrap; }
.avatar-opt{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; border:2px solid var(--border); background:rgba(255,255,255,.03); cursor:pointer;
}
.avatar-opt.selected{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(79,216,255,.2); }

.achv-list{ display:grid; gap:.7rem; }
.achv-item{ display:flex; gap:.8rem; align-items:flex-start; padding:.8rem; border-radius:var(--radius-sm); border:1px solid var(--border); }
.achv-item.locked{ opacity:.4; }
.achv-item .ico{ font-size:1.4rem; }
.achv-item .title{ font-family:var(--font-display); font-size:.92rem; }
.achv-item .desc{ font-size:.78rem; color:var(--text-2); }

.leader-row{ display:flex; align-items:center; gap:.8rem; padding:.65rem .4rem; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:.88rem; }
.leader-row .rank{ width:1.8rem; color:var(--text-2); }
.leader-row.me{ color:var(--cyan); }
.leader-row .xp{ margin-left:auto; }
.leader-tabs{ display:flex; gap:.5rem; margin-bottom:1rem; }
.leader-tabs button{ font-family:var(--font-mono); font-size:.75rem; }

/* modal (how to play / settings) */
.modal-backdrop{ position:fixed; inset:0; background:rgba(4,6,12,.75); z-index:60; display:flex; align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:blur(6px); }
.modal-card{ width:min(560px,100%); max-height:85vh; overflow-y:auto; padding:2rem; position:relative; }
.modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--text-2); font-size:1.4rem; cursor:pointer; }
.howto-step{ display:flex; gap:.9rem; margin-bottom:1.1rem; }
.howto-step .n{ font-family:var(--font-display); color:var(--cyan); font-size:1.3rem; width:2rem; flex-shrink:0; }
.howto-step h4{ font-size:.98rem; margin-bottom:.2rem; }
.howto-step p{ font-size:.85rem; color:var(--text-2); }

.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--border); }
.switch{ position:relative; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background:rgba(255,255,255,.1); border-radius:99px; cursor:pointer; transition:.2s; }
.switch .track::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--text-1); border-radius:50%; transition:.2s; }
.switch input:checked + .track{ background:rgba(79,216,255,.3); }
.switch input:checked + .track::before{ transform:translateX(20px); background:var(--cyan); }

/* toasts */
#toast-layer{ position:fixed; top:1rem; right:1rem; z-index:80; display:flex; flex-direction:column; gap:.6rem; }
.toast{
  font-family:var(--font-mono); font-size:.82rem; padding:.7rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border-hi); background:rgba(12,17,32,.92); color:var(--text-0);
  animation:toastIn .3s var(--ease), toastOut .3s var(--ease) 2.6s forwards;
  min-width:200px;
}
@keyframes toastIn{ from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);} }
@keyframes toastOut{ to{opacity:0; transform:translateX(30px);} }

/* boss */
.boss-header{ text-align:center; margin-bottom:1.4rem; }
.boss-health-track{ width:100%; max-width:460px; height:14px; border-radius:99px; background:rgba(255,255,255,.06); margin:0 auto; overflow:hidden; border:1px solid var(--border); }
.boss-health-track > i{ display:block; height:100%; background:linear-gradient(90deg,var(--magenta),#ff8a3d); transition:width .4s var(--ease); }

/* mobile refinements */
@media (max-width:640px){
  .hud{ padding:.6rem .8rem; }
  .hud-stats{ gap:.4rem; }
  .stat-chip{ font-size:.68rem; padding:.28rem .5rem; }
  .xp-track{ width:70px; }
  .stage-wrap, .map-wrap{ padding:1.4rem 1rem 3rem; }
  .fn-diagram{ gap:.6rem; }
}