:root {
  --iit-bg: #0d1117;
  --iit-text: #c9d1d9;
  --iit-accent: #3b82f6;
  --iit-muted: #8b949e;
  --iit-canvas-bg: #1a1f29;
}
[data-theme="light"] {
  --iit-bg: #ffffff;
  --iit-text: #24292f;
  --iit-accent: #2563eb;
  --iit-muted: #6b7280;
  --iit-canvas-bg: #f3f4f6;
}
body { margin: 0; background: var(--iit-bg); color: var(--iit-text); font-family: system-ui, sans-serif; }

#game-root .game-header {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 24px; gap: 14px; flex-wrap: wrap;
}
/* DecodeIIT corporate logo — fixed bottom-left. Typography mirrors the
   homepage's .nav-logo-brand / .nav-logo-tag (see /css/styles.css:90)
   so the brand reads identically across pages. No background pill — the
   homepage nav has none either. */
#game-root .game-brand-decodeiit {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 950;
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1;
}
#game-root .game-brand-decodeiit-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.42rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f5c518;
  text-decoration: none;
  display: block;
}
#game-root .game-brand-decodeiit-name span {
  color: #fff;
  font-weight: 300;
}
#game-root .game-brand-decodeiit-tag {
  display: block;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--iit-muted);
  text-transform: none;
  margin-top: 0.35rem;
  white-space: nowrap;
}
#game-root .game-brand-decodeiit-tag a {
  color: #f5c518;
  text-decoration: none;
  border-bottom: 1px dotted #f5c518;
}
#game-root .game-brand-decodeiit-tag a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
#game-root .game-brand {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
}
#game-root .game-brand-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.42rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f5c518;
  margin: 0;
}
#game-root .game-brand-name span { color: #fff; font-weight: 300; }
#game-root .game-brand-tag {
  display: block;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--iit-muted);
  text-transform: none;
  margin-top: 0.4rem;
  white-space: nowrap;
}
#game-root .game-brand-tag a { color: #f5c518; text-decoration: none; border-bottom: 1px dotted #f5c518; }
#game-root .game-brand-tag a:hover { color: #fff; border-bottom-color: #fff; }
#game-root .canvas-wrap { position: relative; max-width: 900px; margin: 0 auto; }
#game-root #game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 500; background: var(--iit-canvas-bg); border: 1px solid #30363d; touch-action: none; }
#game-root #game-ui { padding: 12px 24px; }

.dpad { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none; }
.dpad-left { display: flex; gap: 14px; pointer-events: none; }
.dpad-btn { pointer-events: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(20, 25, 35, 0.55); border: 2px solid rgba(200, 210, 225, 0.45);
  color: rgba(240, 246, 252, 0.95); font-size: 28px; font-family: system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; touch-action: none;
  cursor: pointer; padding: 0; line-height: 1;
  transition: background 0.08s, transform 0.08s; }
.dpad-btn:hover { background: rgba(40, 60, 90, 0.7); }
.dpad-btn.pressed { background: rgba(59, 130, 246, 0.9); transform: scale(0.92); }
.dpad-btn.dpad-jump { width: 76px; height: 76px; font-size: 32px; }
.dpad.hidden { display: none; }
@media (max-width: 520px) {
  .dpad { padding: 10px 12px; }
  .dpad-btn { width: 52px; height: 52px; font-size: 22px; }
  .dpad-btn.dpad-jump { width: 60px; height: 60px; font-size: 26px; }
}

.control-panel { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 8px 24px 16px; }
.control-panel .rotary { padding: 8px; }
.control-panel .rotary svg { width: 160px; height: 160px; }
.rotary { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
.rotary svg { cursor: grab; touch-action: none; user-select: none; }
.rotary svg:active { cursor: grabbing; }
.rotary-label { font-size: 13px; color: var(--iit-muted); }
.rotary-launch {
  background: var(--iit-accent); color: white; border: none;
  padding: 10px 28px; font-size: 16px; font-weight: 600;
  border-radius: 6px; cursor: pointer;
}
.rotary-launch:hover { filter: brightness(1.1); }
.rotary-launch:active { filter: brightness(0.9); }

.hint-bar { padding: 12px 24px; }
.hint-heading { font-size: 12px; color: var(--iit-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
.hint-revealed { padding: 8px 10px; margin-bottom: 6px; background: #161b22; border-left: 3px solid var(--iit-accent); border-radius: 0 4px 4px 0; font-size: 13px; }
.hint-btn { background: transparent; color: var(--iit-accent); border: 1px solid var(--iit-accent); padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.hint-btn:hover { background: var(--iit-accent); color: white; }
.score-line { padding: 4px 24px; font-size: 13px; color: var(--iit-muted); font-family: ui-monospace, monospace; }
.verdict { display: none; }

.reveal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.reveal-card {
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  padding: 28px 32px; max-width: 560px; width: 92%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.reveal-card h2 { margin: 0 0 6px; font-size: 22px; color: #f0f6fc; }
.reveal-card.reveal-win h2 { color: #3fb950; }
.reveal-card.reveal-lose h2 { color: #f85149; }
.reveal-score { font-size: 14px; color: var(--iit-muted); margin-bottom: 16px; }
.reveal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reveal-table th { text-align: left; padding: 6px 10px 6px 0; color: var(--iit-muted); font-weight: 500; vertical-align: top; width: 130px; }
.reveal-table td { padding: 6px 0; color: var(--iit-text); font-family: ui-monospace, monospace; }
.reveal-close {
  margin-top: 18px; padding: 10px 24px; font-size: 14px; font-weight: 600;
  background: var(--iit-accent); color: white; border: none; border-radius: 6px; cursor: pointer;
}
.reveal-concept { display: inline-block; margin-top: 16px; margin-right: 12px; font-size: 13px; color: var(--iit-accent); text-decoration: none; padding: 6px 12px; border: 1px solid var(--iit-accent); border-radius: 4px; }
.reveal-concept:hover { background: var(--iit-accent); color: white; }
.reveal-card { max-height: 88vh; overflow-y: auto; max-width: 600px; }
.reveal-graph-wrap { margin-top: 14px; display: flex; justify-content: center; }
.reveal-graph { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; max-width: 100%; height: auto; }
.reveal-explanation { margin-top: 18px; padding: 14px 16px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; }
.reveal-explanation-heading { font-size: 12px; color: var(--iit-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.reveal-step { opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; padding: 6px 8px; margin-bottom: 4px; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.5; color: var(--iit-text); border-left: 2px solid transparent; }
.reveal-step.shown { opacity: 1; transform: translateY(0); border-left-color: var(--iit-accent); background: #161b22; }
.reveal-step strong { color: #f0f6fc; }
.reveal-step em { color: #f5c518; font-style: normal; }
.hint-revealed-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hint-revealed-row .hint-revealed { flex: 1; margin-bottom: 0; }
.hint-concept-link { font-size: 11px; color: var(--iit-accent); text-decoration: none; white-space: nowrap; }
.hint-concept-link:hover { text-decoration: underline; }
.lives-bar { display: inline-block; margin-left: 12px; font-size: 14px; }
.lives-bar .heart { color: #e74c3c; }
.lives-bar .heart-empty { color: #30363d; }
.coins-bar { display: inline-block; margin-left: 12px; font-size: 14px; color: #f5c518; }
.toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  padding: 10px 18px; background: #21262d; border: 1px solid #30363d; border-radius: 6px;
  color: var(--iit-text); font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  pointer-events: none; opacity: 0; transition: opacity 0.18s;
  z-index: 900;
}
.toast.show { opacity: 1; }
.intro-banner { padding: 8px 24px; font-size: 13px; color: var(--iit-muted); text-align: center; }
.intro-banner kbd { display: inline-block; padding: 1px 6px; border: 1px solid #30363d; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--iit-text); background: #161b22; margin: 0 2px; }
/* The .audio-toggle styles below are the legacy 'pill in header' rules.
   Music now lives in the floating dock as a .dock-btn (see below); these
   stay only so older entry points that still mount it in the header
   render correctly. */
.audio-toggle:not(.dock-btn) { background: transparent; color: var(--iit-muted); border: 1px solid #30363d; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; margin-left: 12px; }
.audio-toggle:not(.dock-btn):hover { color: var(--iit-text); border-color: var(--iit-accent); }
.level-label { margin-left: 16px; font-size: 13px; color: var(--iit-text); font-weight: 500; }
.level-select { margin-left: 8px; padding: 3px 8px; font-size: 12px; background: #161b22; color: var(--iit-text); border: 1px solid #30363d; border-radius: 4px; cursor: pointer; font-family: inherit; }
.level-select:hover { border-color: var(--iit-accent); }
.time-display { font-family: ui-monospace, monospace; color: #f5c518; font-weight: 600; }
.score-line .muted { color: var(--iit-muted); font-weight: 400; font-size: 12px; }
.lb-new { display: inline-block; margin-left: 8px; padding: 1px 8px; background: #f5c518; color: #000; font-size: 10px; font-weight: 700; border-radius: 3px; letter-spacing: 0.5px; }

/* ===== Mindmap modal ===== */
.mindmap-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.mindmap-modal {
  width: 88vw; max-width: 1100px; height: 80vh; max-height: 720px;
  background: #000;
  border: 1px solid #f5c518;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(245,197,24,0.25), 0 0 120px rgba(0,0,0,0.9);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #eee;
}
.mindmap-modal-guest-banner {
  background: linear-gradient(90deg, #1e3a8a 0%, #0a0a0a 100%);
  border-bottom: 1px solid rgba(59,130,246,0.4);
  padding: 8px 14px;
  font-size: 0.78rem;
  color: #dbeafe;
  display: flex; align-items: center; justify-content: space-between;
}
.mindmap-modal-guest-banner a { color: #f5c518; text-decoration: underline; font-weight: 600; }
.mindmap-modal-guest-banner-close {
  background: none; border: none; color: #888; cursor: pointer; font-size: 1.1rem;
}
.mindmap-modal-cleared-banner {
  background: linear-gradient(90deg, rgba(245,197,24,0.15) 0%, rgba(245,197,24,0.05) 100%);
  border-bottom: 1px solid rgba(245,197,24,0.3);
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.mm-cleared-eyebrow { font-size: 0.7rem; color: #888; letter-spacing: 0.1em; }
.mm-cleared-name { font-size: 1.1rem; color: #f5c518; font-weight: 700; margin-top: 2px; }
.mm-cleared-progress { font-size: 1rem; color: #fff; font-weight: 600; }
.mindmap-modal-canvas-wrap { flex: 1; position: relative; background: radial-gradient(circle at 50% 50%, #1e3a8a 0%, #000 80%); }
.mindmap-modal-canvas { display: block; width: 100%; height: 100%; }
.mindmap-modal-footer {
  padding: 12px 16px;
  background: #0a0a0a;
  border-top: 1px solid #222;
  display: flex; align-items: center; justify-content: space-between;
}
.mindmap-modal-keys { font-size: 0.75rem; color: #888; }
.mindmap-modal-keys kbd {
  background: #222; border: 1px solid #444; padding: 1px 6px;
  border-radius: 3px; font-family: monospace; color: #eee; font-size: 0.7rem;
}
.mindmap-modal-continue {
  background: #f5c518; color: #000; border: none;
  padding: 8px 18px; font-size: 0.85rem; font-weight: 700;
  border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 20px rgba(245,197,24,0.4);
}
/* Toast */
.mindmap-toast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 1100;
  background: rgba(10,10,10,0.95);
  border: 1px solid #f5c518;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #f5c518; font-size: 0.85rem; font-weight: 600;
  display: flex; gap: 18px; align-items: center;
  animation: mindmap-toast-in 0.25s ease-out;
}
.mindmap-toast-cta { color: #888; font-weight: 500; }
@keyframes mindmap-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
/* HUD Map Button */
.hud-map-button {
  background: #1a1a1a; color: #f5c518;
  border: 1px solid #333; border-radius: 4px;
  padding: 4px 10px; cursor: pointer; font-size: 0.8rem;
  margin-left: 8px;
}
.hud-map-button:hover { background: #222; border-color: #f5c518; }

/* ===== Per-level header timer pill ===== */
.header-timer {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 0.85rem; font-weight: 600;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  background: #1a1a1a; color: #c9d1d9;
  border: 1px solid #333; border-radius: 4px;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.header-timer .ht-val { color: inherit; }
.header-timer.penalty {
  color: #f5c518; border-color: #f5c518;
  background: rgba(245,197,24,0.08);
}
.header-timer.penalty-max {
  color: #ff6b6b; border-color: #ff6b6b;
  background: rgba(255,107,107,0.10);
  animation: header-timer-throb 1.6s ease-in-out infinite;
}
@keyframes header-timer-throb {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,107,107,0.18); }
}

/* ===== Floating dock — bottom-right column of small icon buttons.
   Houses the music toggle and calculator launcher. Stays clear of the
   header so primary game state (title, timer, level dropdown) gets
   uncluttered visual real-estate. ===== */
.game-dock {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 950;
  display: flex; flex-direction: column-reverse;
  gap: 10px;
}
.dock-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(13, 17, 23, 0.85);
  color: #c9d1d9;
  border: 1px solid #30363d;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.dock-btn:hover {
  background: rgba(13, 17, 23, 0.95);
  border-color: #f5c518;
  color: #f5c518;
  transform: translateY(-2px);
}
.dock-btn .dock-btn-icon { display: block; line-height: 1; }
.dock-btn.audio-toggle.is-off .dock-btn-icon {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.dock-btn.audio-toggle:not(.is-off) {
  border-color: #f5c518;
  color: #f5c518;
}
.dock-btn.fullscreen-btn.is-active {
  border-color: #f5c518;
  color: #f5c518;
  background: rgba(245,197,24,0.12);
}

/* ===== Fullscreen layout =====
   When #game-root enters fullscreen, the body chrome behind it goes
   black and the game container fills the viewport. The canvas-wrap
   max-width cap is removed so the canvas can grow with its aspect
   ratio preserved; the brand + dock stay in their fixed corners
   inside the fullscreen frame. */
#game-root:fullscreen {
  background: var(--iit-bg);
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  overflow: auto;
}
#game-root:fullscreen .canvas-wrap {
  max-width: none;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
}
#game-root:fullscreen #game-canvas {
  width: auto; height: auto;
  max-width: 100%;
  max-height: 100%;
  /* 900:500 aspect ratio = 1.8. Constrain the canvas so its bounding
     box fits both within (100% width) and within (100% height × 1.8),
     whichever is tighter — preserves the game's intended proportions. */
}
@media (max-width: 520px) {
  .game-dock { right: 10px; bottom: 10px; gap: 8px; }
  .dock-btn { width: 40px; height: 40px; font-size: 1.05rem; }
}

/* ===== Lever idle nudge — pulsing border that fires every 5 s when the
   player has gone idle in the puzzle phase. The pulse is 0.6 s of the
   5 s animation cycle so most of each interval is quiet. ===== */
@keyframes lever-nudge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,197,24,0.0); }
  4%   { box-shadow: 0 0 0 6px rgba(245,197,24,0.45); }
  10%  { box-shadow: 0 0 0 12px rgba(245,197,24,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,24,0.0); }
}
#game-root #game-canvas.lever-nudge {
  animation: lever-nudge-pulse 5s ease-out infinite;
}

/* ===== Scientific calculator widget ===== */
.calc-widget {
  position: fixed;
  /* Anchor above the floating dock (dock = 16px bottom + 44px button +
     gap → ~70px). Visually pops out of the dock when the launcher is
     pressed. */
  right: 16px; bottom: 76px;
  width: 280px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  z-index: 1100;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #c9d1d9;
  user-select: none;
}
@media (max-width: 520px) {
  .calc-widget { right: 10px; bottom: 60px; width: calc(100vw - 20px); max-width: 320px; }
}
.calc-widget.dragging { opacity: 0.85; cursor: grabbing; }
.calc-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #0d1117;
  border-bottom: 1px solid #30363d;
  border-radius: 8px 8px 0 0;
  cursor: grab;
}
.calc-titlebar:active { cursor: grabbing; }
.calc-title { flex: 1; font-size: 0.78rem; color: #8b949e; font-weight: 600; letter-spacing: 0.04em; }
.calc-mode {
  background: transparent; color: #f5c518;
  border: 1px solid #f5c518;
  padding: 2px 8px; border-radius: 3px;
  font-size: 0.68rem; font-weight: 700; cursor: pointer;
  letter-spacing: 0.05em;
}
.calc-mode:hover { background: rgba(245,197,24,0.12); }
.calc-close {
  background: transparent; color: #8b949e; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 4px;
}
.calc-close:hover { color: #f0f6fc; }
.calc-display {
  padding: 10px 12px;
  background: #0d1117;
  text-align: right;
  border-bottom: 1px solid #21262d;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.calc-display-prev {
  font-size: 0.7rem; color: #6b7280;
  min-height: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-display-expr {
  font-size: 1.4rem; color: #f0f6fc; font-weight: 600;
  margin-top: 2px;
  word-break: break-all;
  min-height: 1.6rem;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #21262d;
  padding: 1px;
  border-radius: 0 0 8px 8px;
}
.calc-key {
  background: #161b22;
  color: #c9d1d9;
  border: none;
  padding: 12px 0;
  font-size: 0.95rem; font-weight: 600;
  font-family: 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.08s;
}
.calc-key:hover { background: #21262d; }
.calc-key:active { background: #30363d; }
.calc-key.calc-fn { color: #58a6ff; font-size: 0.82rem; }
.calc-key.calc-op { color: #f5c518; font-weight: 700; }
.calc-key.calc-eq { background: #f5c518; color: #000; font-weight: 700; }
.calc-key.calc-eq:hover { background: #ffd230; }

/* ===== Leaderboard + report buttons ===== */
.lb-btn, .report-btn {
  margin-left: 4px;
  background: #1a1a1a; color: #c9d1d9;
  border: 1px solid #333; border-radius: 4px;
  padding: 4px 10px; cursor: pointer; font-size: 0.8rem;
  white-space: nowrap;
}
.lb-btn:hover { background: #222; border-color: #f5c518; color: #f5c518; }
.report-btn:hover { background: #2a1a1a; border-color: #ff6b6b; color: #ff6b6b; }

/* ===== Mobile / narrow header layout =====
   The header has many small chips (level title, timer, dropdown, map,
   board, report). On narrow screens we collapse text labels to icons
   and let the row wrap. The two brand blocks stay readable. */
@media (max-width: 700px) {
  #game-root .game-header {
    padding: 10px 12px;
    gap: 8px;
  }
  #game-root .game-brand-name { font-size: 1.05rem; }
  #game-root .game-brand-tag { font-size: 0.5rem; }

  .level-label { font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .level-select { max-width: 140px; }
  .header-timer { padding: 3px 8px; font-size: 0.78rem; }

  /* Keep secondary action buttons compact on mobile. */
  .lb-btn, .report-btn, .hud-map-button { padding: 4px 8px; font-size: 0.72rem; }

  /* Bottom-left brand stays text-only; just shrinks proportionally on
     phones so it doesn't compete with the d-pad. */
  #game-root .game-brand-decodeiit {
    left: 10px; bottom: 10px;
  }
  #game-root .game-brand-decodeiit-name { font-size: 1.1rem; }
  #game-root .game-brand-decodeiit-tag { font-size: 0.5rem; margin-top: 0.25rem; }
}
@media (max-width: 420px) {
  /* On the smallest screens, drop both Powered-by taglines so the brand
     blocks stay single-line. */
  #game-root .game-brand-tag { display: none; }
  #game-root .game-brand-decodeiit-tag { display: none; }
}

/* ===== Leaderboard modal ===== */
.lb-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.lb-modal {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  width: 92%; max-width: 580px;
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  color: #c9d1d9;
}
.lb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #21262d;
}
.lb-title { font-size: 1.1rem; font-weight: 700; color: #f5c518; letter-spacing: 0.04em; }
.lb-close {
  background: transparent; color: #8b949e; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 6px;
}
.lb-close:hover { color: #f0f6fc; }
.lb-body { flex: 1; padding: 14px 18px; overflow-y: auto; }
.lb-loading, .lb-empty { color: #8b949e; padding: 20px; text-align: center; }
.lb-table {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
}
.lb-table th {
  text-align: left; color: #8b949e; font-weight: 500;
  padding: 6px 8px; border-bottom: 1px solid #21262d;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.lb-table td { padding: 8px; border-bottom: 1px solid #161b22; }
.lb-table .lb-rank { width: 70px; color: #c9d1d9; font-family: ui-monospace, monospace; }
.lb-table .lb-name { color: #f0f6fc; }
.lb-table .lb-levels { width: 60px; text-align: right; color: #8b949e; font-family: ui-monospace, monospace; }
.lb-table .lb-score { width: 90px; text-align: right; color: #f5c518; font-weight: 700; font-family: ui-monospace, monospace; }
.lb-row-first {
  background: linear-gradient(90deg, rgba(245,197,24,0.10) 0%, rgba(245,197,24,0.02) 100%);
}
.lb-row-first .lb-name { color: #f5c518; font-weight: 600; }
.lb-crown {
  display: inline-block; margin-right: 6px;
  animation: lb-crown-bob 2.5s ease-in-out infinite;
}
@keyframes lb-crown-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(3deg); }
}
.lb-row-me { outline: 1px solid #58a6ff; outline-offset: -1px; }
.lb-row-me .lb-name { color: #58a6ff; font-weight: 700; }
.lb-you {
  display: inline-block; margin-left: 8px;
  background: #58a6ff; color: #000;
  font-size: 0.6rem; font-weight: 700; padding: 1px 6px;
  border-radius: 3px; letter-spacing: 0.05em; vertical-align: middle;
}
.lb-guest-tag {
  display: inline-block; margin-left: 8px;
  font-size: 0.65rem; color: #8b949e;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.lb-me-outside {
  text-align: center; color: #8b949e; padding: 12px 0 6px;
  font-size: 0.75rem; letter-spacing: 0.04em;
}
.lb-table-me { margin-top: 4px; }
.lb-table-me td { border-bottom: none; }
.lb-guest-cta {
  margin-top: 14px; padding: 10px 12px;
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  font-size: 0.8rem; color: #c9d1d9;
}
.lb-guest-cta a { color: #f5c518; text-decoration: underline; font-weight: 600; }
.lb-footer {
  padding: 10px 18px; border-top: 1px solid #21262d;
  font-size: 0.72rem; color: #8b949e;
}
.lb-footer kbd { background: #161b22; border: 1px solid #30363d; padding: 1px 6px;
  border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.7rem; color: #c9d1d9; }

/* ===== #1 crown cinematic — fires when a clear bumps you to rank 1 ===== */
.lb-crown-cinematic {
  position: fixed; inset: 0;
  z-index: 1500;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(245,197,24,0.22) 0%, rgba(0,0,0,0) 60%);
  animation: lb-crown-bg-in 0.4s ease-out;
}
.lb-crown-cinematic.lb-crown-fade { animation: lb-crown-bg-out 0.4s ease-in forwards; }
.lb-crown-burst {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: lb-crown-burst-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.lb-crown-emoji {
  font-size: 6rem;
  filter: drop-shadow(0 0 40px rgba(245,197,24,0.8));
  animation: lb-crown-spin 1.6s ease-in-out;
}
.lb-crown-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 2rem; font-weight: 800;
  color: #f5c518;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-shadow: 0 0 30px rgba(245,197,24,0.7), 0 4px 12px rgba(0,0,0,0.5);
}
@keyframes lb-crown-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lb-crown-bg-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes lb-crown-burst-in {
  0%   { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}
@keyframes lb-crown-spin {
  0%   { transform: rotate(0deg)   scale(1); }
  20%  { transform: rotate(-8deg)  scale(1.1); }
  40%  { transform: rotate(8deg)   scale(1); }
  60%  { transform: rotate(-4deg)  scale(1.05); }
  100% { transform: rotate(0deg)   scale(1); }
}

/* ===== Report-issue modal ===== */
.rep-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.rep-modal {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  width: 92%; max-width: 480px;
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  color: #c9d1d9;
}
.rep-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #21262d;
}
.rep-title { font-size: 1.05rem; font-weight: 700; color: #ff6b6b; letter-spacing: 0.04em; }
.rep-close {
  background: transparent; color: #8b949e; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 6px;
}
.rep-close:hover { color: #f0f6fc; }
.rep-body { padding: 14px 18px; }
.rep-label {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8b949e; margin: 8px 0 4px;
}
.rep-cat, .rep-msg {
  width: 100%; box-sizing: border-box;
  background: #161b22; color: #c9d1d9;
  border: 1px solid #30363d; border-radius: 4px;
  font-family: inherit; font-size: 0.85rem;
  padding: 8px 10px;
}
.rep-cat:focus, .rep-msg:focus { outline: none; border-color: #58a6ff; }
.rep-msg { resize: vertical; min-height: 90px; font-family: ui-monospace, monospace; }
.rep-counter { text-align: right; font-size: 0.7rem; color: #6b7280; margin-top: 2px; }
.rep-context {
  margin-top: 12px; padding: 8px 10px;
  background: #161b22; border: 1px solid #30363d; border-radius: 4px;
  font-size: 0.75rem; color: #8b949e;
}
.rep-context strong { color: #c9d1d9; display: block; margin-bottom: 4px; font-weight: 600; }
.rep-context code { background: #0d1117; padding: 1px 4px; border-radius: 2px; color: #f5c518; }
.rep-status { min-height: 1.1rem; margin-top: 10px; font-size: 0.8rem; color: #8b949e; }
.rep-status-ok { color: #3fb950; }
.rep-status-err { color: #ff6b6b; }
.rep-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid #21262d;
}
.rep-cancel, .rep-submit {
  padding: 8px 16px; font-size: 0.85rem; font-weight: 600;
  border-radius: 4px; cursor: pointer; border: 1px solid transparent;
  font-family: inherit;
}
.rep-cancel { background: transparent; color: #c9d1d9; border-color: #30363d; }
.rep-cancel:hover { border-color: #58a6ff; color: #58a6ff; }
.rep-submit { background: #ff6b6b; color: #fff; }
.rep-submit:hover { background: #ff8585; }
.rep-submit:disabled { opacity: 0.5; cursor: not-allowed; }