.tile, .letter-box, .puzzle-cell {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  transition: border-color 0.15s, background-color 0.15s;
}
.tile.correct, .letter-box.correct {
  border-color: var(--correct);
  background: var(--correct-bg);
  color: var(--correct);
  box-shadow: 0 0 12px var(--green-glow);
}
.tile.wrong, .letter-box.wrong {
  border-color: var(--wrong);
  background: var(--wrong-bg);
  color: var(--wrong);
}


@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --bg:         #080810;   /* neutral near-black, NO green tint */
  --surface:    #0e0e1a;
  --surface2:   #14142a;
  --border:     #1e1e38;
  --text:       #e8e8f0;   /* cool white, not green-tinted */
  --muted:      #5a5a7a;

  /* The star: electric green — use sparingly */
  --green:      #00ff88;   /* shifted slightly blue-green, more 2026 */
  --green-dim:  #007a40;
  --green-glow: rgba(0,255,136,.18);
  --green-pale: rgba(0,255,136,.06);

  /* Game states */
  --correct:    #00ff88;
  --correct-bg: rgba(0,255,136,.08);
  --wrong:      #ff3366;   /* hotter red-pink, more dramatic */
  --wrong-bg:   rgba(255,51,102,.08);
  --gold:       #ffd700;
  --gold-bg:    rgba(255,215,0,.08);
  --amber:      #ffb300;

  /* Language colors — keep as-is */
  --c-python:   var(--c-python);
  --c-js:       #f7c948;
  --c-css:      var(--c-css);
  --c-sql:      #34d399;

  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  14px;
  --font-ui:    'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);  /* Space Grotesk for prose */
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-shadow: 0 0 8px var(--green); }

/* ── CRT scanlines ───────────────────────────────────────────────────────── */

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0,0,0,.06) 2px,
    rgba(0,0,0,.06) 4px
  );
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  backdrop-filter: blur(12px);
  z-index: 100;
}

.nav-brand {
  font-size: 1rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.5px;
  text-shadow: 0 0 14px var(--green-glow);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
}

.prompt { color: var(--muted); }
.brand-text { color: var(--green); }

.cursor {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  background: var(--green);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  box-shadow: 0 0 6px var(--green);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.nav-right { display: flex; gap: 20px; align-items: center; }
.nav-link  { color: var(--muted); font-size: 0.82rem; letter-spacing: .04em; }
.nav-link:hover { color: var(--text); text-shadow: none; }

/* ── Main ────────────────────────────────────────────────────────────────── */

.main { max-width: 760px; margin: 0 auto; padding: 40px 20px 100px; }

/* ── Home ────────────────────────────────────────────────────────────────── */

.boot-screen {
  margin-bottom: 32px;
  border-left: 2px solid var(--green-dim);
  padding: 16px 20px;
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.boot-line { font-size: 0.88rem; color: var(--green); margin-bottom: 3px; }
.boot-line.dim { color: var(--muted); }

/* ── Mode tabs ───────────────────────────────────────────────────────────── */

.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.mode-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: .04em;
  transition: border-color .15s, color .15s, background .15s;
}

.mode-tab:hover { color: var(--text); border-color: var(--muted); }
.mode-tab.active {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-pale);
  box-shadow: 0 0 12px var(--green-glow);
}

/* ── Language grid ───────────────────────────────────────────────────────── */

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 44px;
}

.lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  cursor: pointer;
  font-family: var(--font-mono);
}

.lang-btn:hover {
  border-color: var(--green);
  box-shadow: 0 0 16px var(--green-glow), 0 4px 20px rgba(0,0,0,.4);
  transform: translateY(-2px);
  color: var(--green);
  text-shadow: none;
}

.lang-python:hover { border-color: var(--c-python); box-shadow: 0 0 16px rgba(74,158,255,.2), 0 4px 20px rgba(0,0,0,.4); color: var(--c-python); }
.lang-js:hover     { border-color: var(--c-js);     box-shadow: 0 0 16px rgba(247,201,72,.2), 0 4px 20px rgba(0,0,0,.4); color: var(--c-js); }
.lang-css:hover    { border-color: var(--c-css);    box-shadow: 0 0 16px rgba(192,132,252,.2), 0 4px 20px rgba(0,0,0,.4); color: var(--c-css); }
.lang-sql:hover    { border-color: var(--c-sql);    box-shadow: 0 0 16px rgba(52,211,153,.2), 0 4px 20px rgba(0,0,0,.4); color: var(--c-sql); }
.lang-all:hover    { border-color: var(--green);    box-shadow: 0 0 16px var(--green-glow), 0 4px 20px rgba(0,0,0,.4); color: var(--green); }

.lb-icon { display: flex; align-items: center; justify-content: center; height: 36px; }
.lb-name { font-weight: 700; font-size: 0.9rem; }
.lb-sub  { font-size: 0.68rem; color: var(--muted); }

/* ── Home scores ─────────────────────────────────────────────────────────── */

.home-scores { margin-top: 8px; }

/* ── Pills ───────────────────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: 1px solid;
  font-family: var(--font-mono);
}

.pill-python     { color: var(--c-python); border-color: rgba(74,158,255,.3); background: rgba(74,158,255,.08); }
.pill-javascript { color: var(--c-js);     border-color: rgba(247,201,72,.3); background: rgba(247,201,72,.08); }
.pill-css        { color: var(--c-css);    border-color: rgba(192,132,252,.3); background: rgba(192,132,252,.08); }
.pill-sql        { color: var(--c-sql);    border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.pill-type  { color: var(--muted); border-color: var(--border); background: transparent; }
.pill-pts   { color: var(--green-dim); border-color: var(--green-dim); background: transparent; }
.diff-1 { color: var(--correct); border-color: rgba(88,224,64,.3); background: rgba(88,224,64,.06); }
.diff-2 { color: var(--gold);    border-color: rgba(255,200,0,.3); background: rgba(255,200,0,.06); }
.diff-3 { color: var(--wrong);   border-color: rgba(255,75,75,.3); background: rgba(255,75,75,.06); }

/* ── Scores table ────────────────────────────────────────────────────────── */

.section-label {
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.scores-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 24px;
}

.scores-table th {
  text-align: left;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px 6px 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 0.68rem;
}

.scores-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.scores-table .gold   td { color: var(--gold); }
.scores-table .silver td { color: #c0c0c0; }
.scores-table .bronze td { color: #cd7f32; }
.score-val { color: var(--green); font-weight: 700; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */

.hud {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
}

.hud-lives { display: flex; gap: 6px; align-items: center; flex: 1; }

.life-dot {
  font-size: 1.3rem;
  transition: all .3s;
  filter: drop-shadow(0 0 3px currentColor);
}

.life-dot.live { color: var(--wrong); }
.life-dot.dead { color: var(--border); filter: none; }

@keyframes heart-break {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  60%  { transform: scale(0.8) rotate(-10deg); }
  100% { transform: scale(1); }
}

.life-dot.breaking { animation: heart-break .4s ease; }

.hud-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 48px;
}

.hud-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 60px;
}

.timer-label, .score-label {
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.timer-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px var(--green);
  min-width: 2ch;
  text-align: center;
}

.timer-val.warning { color: var(--amber); text-shadow: 0 0 10px var(--amber); }
.timer-val.danger  { color: var(--wrong); text-shadow: 0 0 12px var(--wrong); animation: pulse-num .5s ease-in-out infinite alternate; }

@keyframes pulse-num {
  from { opacity: 1; }
  to   { opacity: 0.6; }
}

#score-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255,200,0,.4);
  font-variant-numeric: tabular-nums;
  transition: transform .2s;
}

.score-pop { animation: score-pop .4s cubic-bezier(.34,1.56,.64,1); }

@keyframes score-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ── Timer bar ───────────────────────────────────────────────────────────── */

.timer-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 24px;
}

.timer-bar {
  height: 100%;
  width: 100%;
  background: var(--green);
  transition: width .2s linear, background .4s;
  box-shadow: 0 0 8px var(--green);
}

.timer-bar.warning { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.timer-bar.danger  {
  background: var(--wrong);
  box-shadow: 0 0 12px var(--wrong);
  animation: pulse-bar .35s ease-in-out infinite alternate;
}

@keyframes pulse-bar {
  from { opacity: 1; box-shadow: 0 0 12px var(--wrong); }
  to   { opacity: 0.6; box-shadow: 0 0 4px var(--wrong); }
}

/* ── Puzzle ──────────────────────────────────────────────────────────────── */

.puzzle-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.puzzle-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 20px;
  line-height: 1.3;
  text-shadow: 0 0 20px rgba(57,255,20,.15);
  font-family: var(--font-ui);
}

.code-block {
  background: #05050a;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.9;
  overflow-x: auto;
  margin-bottom: 28px;
  white-space: pre;
  tab-size: 4;
  color: var(--text);
  box-shadow: inset 0 0 30px rgba(0,0,0,.3);
}

/* ── Answer area ─────────────────────────────────────────────────────────── */

.answer-area {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 2px solid var(--green-dim);
  border-radius: var(--radius);
  padding: 0 0 0 16px;
  margin-bottom: 12px;
  transition: border-color .15s, box-shadow .15s;
}

.answer-area:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 16px var(--green-glow);
}

.prompt-prefix {
  color: var(--green);
  font-size: 1.1rem;
  margin-right: 8px;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--green);
}

.answer-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 14px 8px;
  outline: none;
  caret-color: var(--green);
  min-width: 0;
  letter-spacing: .02em;
}

.answer-input::placeholder { color: var(--muted); }

.submit-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 14px 18px;
  cursor: pointer;
  letter-spacing: .06em;
  transition: color .15s, background .15s;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.submit-btn:hover:not(:disabled) { color: var(--green); background: var(--green-pale); }
.submit-btn:disabled { opacity: 0.4; cursor: default; }

.practice-badge {
  display: inline-block;
  background: var(--gold-bg);
  border: 1px solid rgba(255,200,0,.2);
  color: var(--amber);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hint-text {
  color: var(--amber);
  font-size: 0.82rem;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--gold-bg);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: slide-up .2s ease;
}

/* ── Feedback ────────────────────────────────────────────────────────────── */

.feedback-panel {
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 8px;
  animation: slide-up .25s ease;
}

.feedback-panel.is-correct {
  background: var(--correct-bg);
  border: 2px solid rgba(88,224,64,.25);
}

.feedback-panel.is-wrong {
  background: var(--wrong-bg);
  border: 2px solid rgba(255,75,75,.25);
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.fb-icon { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.fb-icon.correct { color: var(--correct); text-shadow: 0 0 12px var(--correct); }
.fb-icon.wrong   { color: var(--wrong);   text-shadow: 0 0 12px var(--wrong); }

.fb-label { font-size: 1.05rem; font-weight: 700; font-family: var(--font-ui); }
.fb-label.correct { color: var(--correct); }
.fb-label.wrong   { color: var(--wrong); }

.fb-pts {
  margin-left: auto;
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 0 8px rgba(255,200,0,.4);
}

.fb-answer {
  font-size: 0.85rem;
  color: var(--wrong);
  margin-bottom: 10px;
  padding: 7px 12px;
  background: rgba(255,75,75,.06);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.fb-explanation {
  font-size: 0.85rem;
  line-height: 1.75;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px;
  margin-bottom: 20px;
  color: var(--text);
  font-family: var(--font-mono);
}

.fb-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--correct);
  color: #000;
  font-weight: 800;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  padding: 11px 24px;
  border-radius: var(--radius-lg);
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}

.continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,.3), 0 0 20px rgba(88,224,64,.3);
  text-shadow: none;
  color: #000;
  opacity: 1;
}

.scores-link { color: var(--muted); font-size: 0.82rem; }

/* ── Game over ───────────────────────────────────────────────────────────── */

.game-over-panel { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.go-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wrong);
  text-shadow: 0 0 16px var(--wrong);
  letter-spacing: .15em;
  font-family: var(--font-mono);
}

.go-stats { color: var(--text); font-size: 0.88rem; font-family: var(--font-ui); }
.go-stats strong { color: var(--gold); }

/* ── Result page ─────────────────────────────────────────────────────────── */

.result-wrap { max-width: 540px; margin: 60px auto 0; text-align: center; }

.result-header { margin-bottom: 48px; }

.result-type {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.result-type.victory {
  color: var(--green);
  text-shadow: 0 0 30px var(--green), 0 0 60px rgba(57,255,20,.3);
}

.result-type.gameover { color: var(--wrong); text-shadow: 0 0 20px var(--wrong); }
.result-tag { color: var(--muted); font-size: 0.88rem; }

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 48px;
}

@media (max-width: 480px) {
  .result-stats { grid-template-columns: 1fr 1fr; }
}

.rs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rs-card.big { border-color: rgba(255,200,0,.2); }
.rs-card.big .rs-num { color: var(--gold); text-shadow: 0 0 12px rgba(255,200,0,.4); }
.rs-num   { font-size: 1.8rem; font-weight: 700; color: var(--green); font-family: var(--font-mono); }
.rs-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.result-actions { display: flex; justify-content: center; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ── Scores page ─────────────────────────────────────────────────────────── */

.scores-wrap { max-width: 540px; }

.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 28px;
  font-family: var(--font-ui);
  text-shadow: 0 0 20px rgba(57,255,20,.2);
}

.scores-table.full { font-size: 0.88rem; }
.dim { color: var(--muted); }
.rank { color: var(--muted); }
.empty-state { color: var(--muted); margin-bottom: 24px; }
.back-btn { display: inline-block; color: var(--muted); font-size: 0.82rem; margin-top: 8px; }
.back-btn:hover { color: var(--text); text-shadow: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 500px) {
  .hud { gap: 12px; padding: 10px 14px; }
  .code-block { font-size: 0.8rem; }
  .lang-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Rank bar (home page) ────────────────────────────────────────────────── */

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rank-label {
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

.rank-name {
  color: var(--green);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--green);
  min-width: 90px;
}

.rank-xp {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
  margin-right: 4px;
}

.streak-badge {
  font-size: 0.72rem;
  color: var(--amber);
  white-space: nowrap;
  margin-right: 6px;
  font-weight: 600;
}

.rank-bar-wrap {
  flex: 1;
  min-width: 80px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.rank-bar {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--green);
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
  min-width: 4px;
}

/* ── Achievement toasts ──────────────────────────────────────────────────── */

#toasts {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 280px;
}

.ach-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--green-dim);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 16px var(--green-glow);
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .35s ease, transform .35s ease;
  font-family: var(--font-mono);
}

.ach-toast.ach-show { opacity: 1; transform: translateX(0); }

.rank-toast { border-color: var(--green); box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 20px var(--green-glow); }

.ach-toast-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; color: var(--green); }
.ach-toast-label { font-size: 0.6rem; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.ach-toast-name  { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.ach-toast-desc  { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* ── Achievements page ───────────────────────────────────────────────────── */

.ach-wrap { max-width: 600px; margin: 0 auto; }

.ach-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.ach-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green);
  font-family: var(--font-mono);
  text-shadow: 0 0 20px rgba(57,255,20,.2);
  margin-bottom: 4px;
}

.ach-subtitle { font-size: 0.78rem; color: var(--muted); }
.ach-rank { color: var(--green); }

.ach-count {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.ach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

@media (max-width: 480px) {
  .ach-grid { grid-template-columns: 1fr; }
}

.ach-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color .2s;
}

.ach-card.earned { border-color: rgba(57,255,20,.2); }
.ach-card.earned:hover { border-color: var(--green); }
.ach-card.locked { opacity: 0.35; }

.ach-card-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; color: var(--green); }
.ach-card.locked .ach-card-icon { color: var(--border); font-size: 1rem; }
.ach-card-body { min-width: 0; }
.ach-card-name { font-size: 0.85rem; font-weight: 700; margin-bottom: 3px; font-family: var(--font-ui); }
.ach-card-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.45; font-family: var(--font-mono); }
.ach-card-date { font-size: 0.65rem; color: var(--green); margin-top: 6px; font-weight: 700; }

/* ── Mobile improvements ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .main { padding: 20px 12px 80px; }

  .nav { padding: 0 12px; height: 50px; }

  .boot-screen { padding: 12px 14px; }
  .boot-line { font-size: 0.8rem; }

  .lang-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lang-btn { padding: 16px 10px; }
  .lb-icon { font-size: 1.2rem; }
  .lb-name { font-size: 0.82rem; }
  .lb-sub  { font-size: 0.62rem; }

  .hud { gap: 10px; padding: 10px 12px; }
  .hud-timer, .hud-score { min-width: 40px; }
  .timer-val, #score-val { font-size: 1.2rem; }

  .code-block {
    font-size: 0.78rem;
    padding: 14px 12px;
    -webkit-overflow-scrolling: touch;
  }

  .puzzle-title { font-size: 1rem; }

  .answer-area { padding-left: 12px; }
  .answer-input { font-size: 0.95rem; padding: 12px 6px; }
  .submit-btn { padding: 12px 14px; font-size: 0.78rem; }

  .result-stats { grid-template-columns: 1fr 1fr; }
  .rs-num { font-size: 1.4rem; }

  #toasts { right: 8px; max-width: calc(100vw - 16px); }
}

/* ── Syntax highlighting (highlight.js) ─────────────────────────────────── */

.code-block .hljs { background: transparent; padding: 0; }

/* ── On-demand hint button ───────────────────────────────────────────────── */

.hint-btn {
  background: transparent;
  border: 1px dashed var(--green-dim, rgba(57,255,20,.25));
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 12px;
  letter-spacing: .05em;
  transition: color .15s, border-color .15s;
  display: inline-block;
}
.hint-btn:hover { color: var(--green); border-color: var(--green-dim, rgba(57,255,20,.4)); }

/* ── Auth forms ──────────────────────────────────────────────────────────── */

.auth-wrap {
  max-width: 420px;
}

.auth-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.72rem;
  color: var(--green);
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
}

.form-label-hint {
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.auth-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 10px 14px;
  outline: none;
  caret-color: var(--green);
  transition: border-color .15s, box-shadow .15s;
  letter-spacing: .02em;
}

.auth-input::placeholder { color: var(--muted); }

.auth-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 12px var(--green-glow);
}

.auth-submit-btn {
  background: var(--green-pale);
  border: 1px solid var(--green-dim);
  border-radius: var(--radius);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 12px 24px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  text-transform: uppercase;
  align-self: flex-start;
}

.auth-submit-btn:hover {
  background: rgba(57,255,20,.12);
  border-color: var(--green);
  box-shadow: 0 0 16px var(--green-glow);
}

.auth-error {
  color: var(--wrong);
  font-size: 0.82rem;
  padding: 8px 12px;
  background: var(--wrong-bg);
  border-left: 2px solid var(--wrong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.auth-switch {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: -4px;
}

/* ── Nav user badge ──────────────────────────────────────────────────────── */

.user-badge {
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--green);
}

.nav-link-enlist {
  color: var(--green);
  font-weight: 700;
  border: 1px solid var(--green-dim);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.nav-link-enlist:hover {
  background: var(--green-pale);
  border-color: var(--green);
}

/* ── Login prompt ────────────────────────────────────────────────────────── */

.login-prompt {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 20px;
  padding: 8px 12px;
  background: var(--surface);
  border-left: 2px solid var(--green-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prompt-arrow {
  color: var(--green-dim);
  margin-right: 6px;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */

.lb-wrap { max-width: 680px; }

.lb-table .lb-gold   td { color: var(--gold); }
.lb-table .lb-silver td { color: #c0c0c0; }
.lb-table .lb-bronze td { color: #cd7f32; }

.lb-table .lb-me td {
  background: var(--green-pale);
}

.lb-username {
  font-weight: 700;
  color: var(--text);
}

.lb-you {
  font-size: 0.62rem;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-left: 6px;
  opacity: 0.7;
}

.rank-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: 1px solid;
}

.rank-badge-civilian  { color: var(--muted);    border-color: var(--border);              background: transparent; }
.rank-badge-analyst   { color: var(--c-python);  border-color: rgba(74,158,255,.3);        background: rgba(74,158,255,.06); }
.rank-badge-specialist{ color: var(--c-js);      border-color: rgba(247,201,72,.3);        background: rgba(247,201,72,.06); }
.rank-badge-operative { color: var(--c-sql);     border-color: rgba(52,211,153,.3);        background: rgba(52,211,153,.06); }
.rank-badge-ghost     { color: var(--green);     border-color: rgba(57,255,20,.3);         background: rgba(57,255,20,.06); text-shadow: 0 0 8px var(--green); }

/* ── Scores nav ──────────────────────────────────────────────────────────── */

.scores-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

/* ── My score highlight ──────────────────────────────────────────────────── */

.scores-table .my-score td {
  background: var(--green-pale);
}

.score-player {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ── Game-feel: floating XP numbers ─────────────────────────────────────── */

.xp-float {
  position: fixed;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 10px var(--green);
  pointer-events: none;
  z-index: 9999;
  animation: xp-rise 1.2s ease-out forwards;
}

@keyframes xp-rise {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-60px); }
  100% { opacity: 0; transform: translateY(-90px); }
}

/* ── Game-feel: combo banner ─────────────────────────────────────────────── */

.combo-banner {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 12px var(--gold);
  margin: 0.5rem 0;
  animation: combo-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes combo-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Duel mode ─────────────────────────────────────────────── */
.duel-wrap { max-width: 800px; margin: 0 auto; padding: 1rem; }
.duel-intro { color: var(--fg-dim); margin-bottom: 1.5rem; }

/* Card component */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.9rem 0.75rem;
  width: 140px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center;
}
.card:hover, .card-playable:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 24px rgba(57,255,20,0.2);
}
.card-attack  { border-color: var(--wrong); }
.card-shield  { border-color: var(--c-python); }
.card-heal    { border-color: var(--correct); }
.card-drain   { border-color: var(--c-css); }

.card-rarity-rare      { box-shadow: 0 0 8px rgba(247,201,72,0.3); }
.card-rarity-legendary { box-shadow: 0 0 16px rgba(192,132,252,0.5); animation: legendary-glow 2s ease-in-out infinite; }
@keyframes legendary-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(192,132,252,0.5); }
  50%       { box-shadow: 0 0 28px rgba(192,132,252,0.8); }
}

.card-rarity-badge { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-dim); }
.card-rarity-rare .card-rarity-badge { color: var(--gold); }
.card-rarity-legendary .card-rarity-badge { color: var(--c-css); }
.card-type-icon { font-size: 1.5rem; }
.card-name { font-weight: 700; font-size: 0.75rem; color: var(--fg); }
.card-flavor { font-size: 0.6rem; color: var(--fg-dim); font-style: italic; font-family: 'JetBrains Mono', monospace; }
.card-effect { font-size: 0.65rem; color: var(--fg-dim); }
.card-solve-hint { font-size: 0.55rem; color: var(--green); opacity: 0.6; margin-top: auto; }
.card-form { display: inline-block; }

/* Card preview on lobby */
.duel-card-preview { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.duel-start-btn {
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.75rem 2.5rem;
  cursor: pointer;
  transition: background 0.15s;
  margin: 1rem 0;
  display: block;
  text-shadow: 0 0 8px var(--green);
  box-shadow: 0 0 16px rgba(57,255,20,0.2);
}
.duel-start-btn:hover { background: rgba(57,255,20,0.1); }
.duel-cards-owned { color: var(--fg-dim); font-size: 0.8rem; }

/* Duel HUD */
.duel-hud { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.duel-side { flex: 1; }
.duel-vs { font-weight: 900; font-size: 1.2rem; color: var(--wrong); }
.duelist-label { font-size: 0.75rem; color: var(--fg-dim); margin-bottom: 0.3rem; }
.hp-bar-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; height: 10px; overflow: hidden; }
.hp-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.player-hp-bar { background: var(--correct); }
.ai-hp-bar { background: var(--wrong); }
.hp-val { font-size: 0.75rem; color: var(--fg-dim); margin-top: 0.2rem; }
.shield-badge { font-size: 0.7rem; color: var(--c-python); margin-top: 0.2rem; }

/* Battle log */
.battle-log {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  max-height: 140px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}
.log-entry { color: var(--fg-dim); margin-bottom: 0.2rem; }
.log-entry:last-child { color: var(--fg); }

/* Hand */
.hand-label { font-size: 0.75rem; color: var(--fg-dim); margin: 1rem 0 0.5rem; }
.duel-hand { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.duel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.turn-label { font-size: 0.8rem; color: var(--fg-dim); }
.forfeit-link { font-size: 0.75rem; color: var(--fg-dim); }
.forfeit-link:hover { color: var(--wrong); }

/* Duel puzzle screen */
.duel-puzzle-wrap { max-width: 700px; margin: 0 auto; padding: 1rem; }
.casting-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.5rem; }
.casting-label { font-size: 0.75rem; color: var(--fg-dim); margin: 0; }
.card-casting { width: auto; min-width: 200px; flex-direction: row; min-height: auto; align-items: center; gap: 0.75rem; }
.casting-prompt { color: var(--fg-dim); font-size: 0.85rem; margin: 0; }
.duel-mini-hud { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--fg-dim); margin-bottom: 1rem; }
.mini-sep { color: var(--border); }
.cast-btn { background: rgba(57,255,20,0.08); }

/* Win/loss */
.duel-over { text-align: center; padding: 1rem; }
.win-msg .go-title { color: var(--green); text-shadow: 0 0 16px var(--green); font-size: 1.5rem; font-weight: 900; }
.loss-msg .go-title { color: var(--wrong); text-shadow: 0 0 16px var(--wrong); font-size: 1.5rem; font-weight: 900; }

/* Mobile */
@media (max-width: 600px) {
  .duel-hand { gap: 0.5rem; }
  .card { width: 110px; min-height: 150px; }
  .duel-hud { flex-direction: column; gap: 0.5rem; }
}

/* ── Legal pages ──────────────────────────────────────────── */
.legal-wrap { max-width: 680px; margin: 0 auto; padding: 1rem; }
.legal-date { font-size: 0.8rem; color: var(--muted); margin-bottom: 2rem; }
.legal-body h3 { color: var(--text); font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.legal-body p, .legal-body li { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.legal-body ul { padding-left: 1.5rem; }
.legal-link { color: var(--green); text-decoration: none; }
.legal-link:hover { text-decoration: underline; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 1rem;
  font-size: 0.75rem;
}
.footer-link { color: var(--muted); text-decoration: none; }
.footer-link:hover { color: var(--text); }
.footer-sep { color: var(--border); margin: 0 0.5rem; }

/* ── Mute button ──────────────────────────────────────────── */
.mute-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
  color: var(--muted);
  line-height: 1;
}
.mute-btn:hover { color: var(--text); }

/* ── Grade selector ───────────────────────────────────────── */
.grade-selector { margin: 1rem 0; }
.grade-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.grade-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.grade-tab:hover { border-color: var(--green); color: var(--fg); }
.grade-tab.active { border-color: var(--green); color: var(--green); background: rgba(57,255,20,0.08); }

/* ── Round 3: ASCII Hero ─────────────────────────────────────────────────── */
.ascii-hero {
  font-family: monospace;
  font-size: clamp(0.26rem, 1.05vw, 0.58rem);
  line-height: 1.2;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 12px 0;
  opacity: 0.82;
  display: block;
}

/* ── Round 3: Rank Icon Badge ────────────────────────────────────────────── */
.rank-icon-badge {
  font-size: 0.95rem;
  margin-left: 4px;
  opacity: 0.9;
}
.rank-icon-badge.rank-ghost      { color: var(--green); text-shadow: 0 0 8px var(--green); }
.rank-icon-badge.rank-operative  { color: var(--gold); }
.rank-icon-badge.rank-specialist { color: var(--c-python); }
.rank-icon-badge.rank-analyst    { color: var(--c-css); }
.rank-icon-badge.rank-civilian   { color: #666; }

/* ── Round 3: Share / Challenge ─────────────────────────────────────────── */
.btn-share {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  padding: 6px 14px;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 3px;
  transition: background 0.15s;
}
.btn-share:hover { background: rgba(57,255,20,0.1); }
.share-url {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #888;
  margin-top: 6px;
  word-break: break-all;
}

/* ── Round 3: Duel Card Grid ─────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.duel-card {
  border: 2px solid #2a3a2a;
  border-radius: 8px;
  padding: 12px 10px 10px;
  background: #0d120d;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.duel-card:hover,
button.duel-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px #00000088; }
.duel-card.rarity-common    { border-color: #3a4a3a; }
.duel-card.rarity-uncommon  { border-color: #2a4a7a; box-shadow: 0 0 4px var(--c-python)22; }
.duel-card.rarity-rare      { border-color: #5a3a7a; box-shadow: 0 0 6px var(--c-css)33; }
.duel-card.rarity-legendary { border-color: #7a6010; box-shadow: 0 0 10px var(--gold)44; }
.duel-card-rarity-pip {
  position: absolute;
  top: 5px; right: 7px;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.rarity-common    .duel-card-rarity-pip { color: #666; }
.rarity-uncommon  .duel-card-rarity-pip { color: var(--c-python); }
.rarity-rare      .duel-card-rarity-pip { color: var(--c-css); }
.rarity-legendary .duel-card-rarity-pip { color: var(--gold); }
.duel-card-icon  { font-size: 1.5rem; margin-bottom: 4px; }
.duel-card-name  { font-size: 0.75rem; font-weight: 600; color: #d0d0d0; }
.duel-card-type  { font-size: 0.62rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }
.duel-card-power { font-size: 0.7rem; color: var(--green); margin-top: 4px; }
.duel-card-hint  { font-size: 0.6rem; color: #555; margin-top: 4px; }
button.duel-card { all: unset; border: 2px solid #3a4a3a; border-radius: 8px; padding: 12px 10px 10px;
  background: #0d120d; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; box-sizing: border-box; }

/* ── Tutorial ────────────────────────────────────────────────────────────── */
.tut-wrap { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; }
.tut-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.tut-label { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); }
.tut-skip { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); }
.tut-skip:hover { color: var(--text); }

.tut-steps { display: flex; gap: 8px; margin-bottom: 28px; }
.tut-step-pip { width: 28px; height: 4px; border-radius: 2px; background: var(--border); transition: background 0.3s; }
.tut-step-pip.active { background: var(--green); box-shadow: 0 0 6px var(--green); }
.tut-step-pip.done   { background: var(--green); }

.tut-step { display: none; }
.tut-step.active { display: block; animation: tut-fade 0.25s ease; }
@keyframes tut-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tut-guide {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.guide-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.guide-text { font-size: 0.9rem; color: var(--text); line-height: 1.6; margin-bottom: 8px; }
.guide-text.dim { color: var(--muted); font-size: 0.84rem; margin-bottom: 0; }
.guide-text code { background: var(--surface2); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; color: var(--green); }

.tut-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.tut-type-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 10px;
  text-align: center;
  display: flex; flex-direction: column; gap: 5px;
}
.tut-type-icon { font-size: 1.4rem; }
.tut-type-name { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--green); font-weight: 600; }
.tut-type-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

.tut-next-btn {
  background: var(--green);
  color: var(--bg);
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 8px;
  transition: opacity 0.15s;
}
.tut-next-btn:hover { opacity: 0.85; }

.tut-puzzle-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
}
.tut-puzzle-meta { margin-bottom: 10px; }
.tut-puzzle-q { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.tut-answer-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tut-feedback {
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 4px;
  display: none;
}
.tut-feedback.tut-correct { display: block; background: rgba(57,255,20,0.1); border: 1px solid var(--green)44; color: var(--green); }
.tut-feedback.tut-wrong   { display: block; background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.25); color: #ff8080; }
.tut-feedback code { background: rgba(57,255,20,0.15); padding: 1px 4px; border-radius: 2px; }

/* Complete screen */
.tut-complete { text-align: center; padding: 20px 0 32px; }
.tut-complete-icon { font-size: 2.8rem; color: var(--green); margin-bottom: 8px; text-shadow: 0 0 20px var(--green)66; }
.tut-complete-title { font-size: 1.6rem; font-weight: 700; color: var(--green); margin-bottom: 10px; }
.tut-complete-sub { font-size: 0.9rem; color: var(--muted); max-width: 480px; margin: 0 auto 24px; line-height: 1.6; }
.tut-complete-tips {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  padding: 16px 20px;
  text-align: left;
  max-width: 480px;
  margin: 0 auto 28px;
}
.tut-complete-tips ul { list-style: none; padding: 0; margin: 10px 0 0; }
.tut-complete-tips li { font-size: 0.85rem; color: var(--text); padding: 5px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.tut-complete-tips li:last-child { border-bottom: none; }
.tut-complete-tips li::before { content: '// '; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.tut-complete-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.tut-ranked-btn {
  display: inline-block;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 4px;
  transition: background 0.15s;
}
.tut-ranked-btn:hover { background: rgba(57,255,20,0.1); }

/* Tutorial CTA on home page */
.tutorial-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 10px 0 4px;
}
.tutorial-link { color: var(--green); border-bottom: 1px solid var(--green)44; }
.tutorial-link:hover { border-color: var(--green); }

@media (max-width: 500px) {
  .tut-types-grid { grid-template-columns: 1fr; }
  .tut-complete-actions { flex-direction: column; align-items: center; }
}

/* ── Classroom ───────────────────────────────────────────────────────────── */
.classroom-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.cls-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap; gap: 12px; }
.cls-code-box { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 16px; text-align: center; }
.cls-code-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.cls-code { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 700; color: var(--green); letter-spacing: 0.15em; text-shadow: 0 0 10px var(--green); }
.cls-code-inline { font-family: 'JetBrains Mono', monospace; color: var(--green); }
.cls-teacher-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--gold); margin-bottom: 16px; }
.cls-intro { font-size: 0.88rem; color: var(--muted); margin-bottom: 24px; line-height: 1.6; max-width: 520px; }
.cls-actions { display: flex; gap: 14px; align-items: center; margin-top: 24px; flex-wrap: wrap; }

.cls-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.cls-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px 16px; }
.cls-form-title { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.cls-input { width: 100%; box-sizing: border-box; margin-bottom: 10px; }

.cls-list { display: flex; flex-direction: column; gap: 8px; }
.cls-list-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; transition: border-color 0.15s; }
.cls-list-item:hover { border-color: #39ff14; }
.cls-list-name { font-weight: 600; color: var(--text); flex: 1; }
.cls-list-meta { font-size: 0.78rem; color: var(--muted); }
.cls-list-code { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #39ff14; letter-spacing: 0.1em; }

/* ── Tournament ──────────────────────────────────────────────────────────── */
.tournament-meta { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.t-week-label { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); }
.t-days-left { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #f7c948; background: rgba(247,201,72,0.08); border: 1px solid rgba(247,201,72,0.25); padding: 2px 8px; border-radius: 3px; }

@media (max-width: 500px) {
  .cls-forms { grid-template-columns: 1fr; }
  .cls-header { flex-direction: column; }
}