/* Mini Games Platform — Mobile-first styles */
:root {
  --bg: #171612;
  --surface: #25231d;
  --surface2: #38342a;
  --primary: #d94b2b;
  --primary-hover: #a8321c;
  --accent: #e2a624;
  --green: #9bad70;
  --yellow: #f0bd43;
  --red: #ee765c;
  --text: #fff8e8;
  --text-dim: #c7bea9;
  --radius: 4px;
  --radius-sm: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100dvh;
}

/* Screens */
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; min-height: calc(100dvh - 32px); }

/* HOME */
.home-hero {
  text-align: center;
  padding: 40px 0 24px;
}
.logo { font-size: 64px; margin-bottom: 8px; }
.home-hero h1 {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.subtitle { color: var(--text-dim); margin-top: 8px; font-size: 15px; }

.home-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

input[type="text"] {
  background: var(--surface);
  border: 2px solid var(--surface2);
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 16px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
input[type="text"]:focus { border-color: var(--primary); }
input[type="text"]::placeholder { color: var(--text-dim); }

.btn {
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--surface2); color: var(--text); }
.btn-secondary:hover { background: #2f2f55; }
.btn-small { padding: 8px 16px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-large { padding: 18px; font-size: 18px; margin-top: 16px; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 13px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--surface2);
}

.join-row {
  display: flex;
  gap: 8px;
}
.join-row input { flex: 1; text-align: center; font-size: 20px; letter-spacing: 4px; font-weight: 700; }
.join-row .btn { flex-shrink: 0; }

.error-msg {
  color: var(--red);
  text-align: center;
  font-size: 14px;
  min-height: 20px;
  margin-top: 12px;
}

/* LOBBY */
.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.lobby-header h2 { font-size: 20px; }
.code-badge {
  font-family: monospace;
  font-size: 24px;
  background: var(--primary);
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  letter-spacing: 3px;
}

.players-section { margin: 16px 0; }
.players-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.players-section h3 { font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.btn-bot { background: var(--surface2); border: 1px dashed var(--text-dim); font-size: 12px; padding: 6px 12px; }
#player-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
#player-list li {
  background: var(--surface);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#player-list li .host-badge { font-size: 11px; }
.bot-badge {
  font-size: 10px;
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
  color: var(--text-dim);
}
.remove-bot {
  margin-left: 6px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.remove-bot:hover { opacity: 1; color: var(--red); }

.game-picker { margin: 20px 0; }
.game-picker h3 { font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-card {
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.game-card:hover { border-color: var(--surface2); }
.game-card.selected { border-color: var(--primary); background: #1e1e40; }
.game-card .game-icon { font-size: 32px; margin-bottom: 6px; }
.game-card .game-name { font-size: 14px; font-weight: 600; }
.game-card .game-desc { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

.waiting-text { text-align: center; color: var(--text-dim); padding: 20px; font-size: 15px; }

/* GAME HUD */
.game-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface2);
  margin-bottom: 16px;
}
.game-title { font-weight: 700; font-size: 16px; }
.game-round { font-size: 13px; color: var(--text-dim); }

.game-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* RESULTS */
.results-content {
  padding: 24px 0;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.results-content h2 { font-size: 28px; margin-bottom: 24px; }

.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 24px;
  min-height: 180px;
}
.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.podium-bar {
  width: 80px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  font-size: 24px;
  font-weight: 800;
}
.podium-name { font-size: 14px; font-weight: 600; }
.podium-score { font-size: 12px; color: var(--text-dim); }
.podium-item.rank-1 .podium-bar { height: 120px; background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.podium-item.rank-2 .podium-bar { height: 90px; background: linear-gradient(180deg, #94a3b8, #64748b); }
.podium-item.rank-3 .podium-bar { height: 70px; background: linear-gradient(180deg, #cd7c32, #a0522d); }

.results-list {
  list-style: none;
  text-align: left;
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
}
.results-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.results-list li:nth-child(odd) { background: var(--surface); }
.results-list .rank { color: var(--text-dim); width: 30px; }
.results-list .score { font-weight: 700; color: var(--primary); }

/* GAME-SPECIFIC STYLES */

/* Reaction Race */
.reaction-zone {
  width: 100%;
  height: 300px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  margin: 20px 0;
}
.reaction-zone.waiting { background: var(--surface2); }
.reaction-zone.ready { background: var(--red); color: white; }
.reaction-zone.go { background: var(--green); color: #0f0f23; }
.reaction-zone.early { background: var(--yellow); color: #0f0f23; }

/* Trivia */
.trivia-question {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  line-height: 1.4;
}
.trivia-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}
.trivia-option {
  background: var(--surface);
  border: 2px solid var(--surface2);
  color: var(--text);
  padding: 16px;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.trivia-option:hover { border-color: var(--primary); }
.trivia-option.selected { border-color: var(--primary); background: #1e1e40; }
.trivia-option.correct { border-color: var(--green); background: #0d2818; }
.trivia-option.wrong { border-color: var(--red); background: #2a0a0a; }
.trivia-timer {
  width: 100%;
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  margin: 16px 0;
  overflow: hidden;
}
.trivia-timer-bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s linear;
}

/* Tap Frenzy */
.tap-zone {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s;
  margin: 20px 0;
}
.tap-zone:active { transform: scale(0.93); }
.tap-leaderboard {
  width: 100%;
  margin-top: 16px;
}
.tap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
}
.tap-bar {
  flex: 1;
  height: 24px;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.tap-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 12px;
  transition: width 0.3s;
}
.tap-bar-count {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
}

/* Word Scramble */
.scramble-word {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 8px;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--radius);
  margin: 20px 0;
  font-family: monospace;
}
.scramble-input {
  display: flex;
  gap: 8px;
  width: 100%;
}
.scramble-input input {
  flex: 1;
  text-align: center;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.scramble-hint { color: var(--text-dim); font-size: 13px; margin-top: 8px; }
.scramble-solvers {
  width: 100%;
  margin-top: 20px;
}
.solver-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 14px;
}
.solver-rank { color: var(--yellow); font-weight: 700; }

/* Emoji Match */
.emoji-board {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 16px auto;
}
.emoji-cell {
  aspect-ratio: 1;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.emoji-cell.revealed { background: var(--surface); }
.emoji-cell.matched { background: #0d2818; border: 2px solid var(--green); opacity: 0.7; }
.emoji-cell.hidden::after { content: '❓'; }
.emoji-turn-info {
  text-align: center;
  font-size: 16px;
  padding: 8px;
  color: var(--text-dim);
}
.emoji-turn-info .current { color: var(--primary); font-weight: 700; }

/* Math Blitz */
.math-problem {
  font-size: 42px;
  font-weight: 800;
  text-align: center;
  padding: 28px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  margin: 16px 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 2px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.math-timer-bar {
  width: 100%;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 16px;
}
.math-timer-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: background 0.3s;
  width: 100%;
}
.math-input-area {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.math-answer-input {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--surface2);
  color: var(--text);
  padding: 16px;
  border-radius: var(--radius);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.math-answer-input::-webkit-inner-spin-button,
.math-answer-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.math-answer-input:focus { border-color: var(--primary); }
.math-submit {
  width: 56px;
  font-size: 20px;
  flex-shrink: 0;
}
.math-feedback {
  text-align: center;
  font-size: 15px;
  padding: 12px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  white-space: pre-line;
  min-height: 40px;
}
.math-feedback.correct { color: var(--green); background: #0d2818; }
.math-feedback.wrong { color: var(--red); background: #2a0a0a; }
.math-feedback.result { color: var(--text); background: var(--surface); }
.math-level {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* Simon Says */
.simon-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin: 20px auto;
}
.simon-pad {
  aspect-ratio: 1;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  border: 3px solid transparent;
  opacity: 0.5;
}
.simon-pad.red { background: #dc2626; }
.simon-pad.blue { background: #2563eb; }
.simon-pad.green { background: #16a34a; }
.simon-pad.yellow { background: #eab308; }

.simon-pad.lit {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(255,255,255,0.3);
}

.simon-board.input-mode .simon-pad {
  opacity: 0.7;
  cursor: pointer;
}
.simon-board.input-mode .simon-pad:hover {
  opacity: 0.9;
}
.simon-board.input-mode .simon-pad:active,
.simon-pad.pressed {
  opacity: 1;
  transform: scale(0.95);
}

.simon-board.showing-mode .simon-pad {
  cursor: default;
  opacity: 0.4;
}

.simon-board.eliminated .simon-pad {
  opacity: 0.2;
  cursor: not-allowed;
}

.simon-progress {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 12px;
  min-height: 28px;
}
.simon-info {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 8px;
}

/* Countdown overlay */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 35, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.countdown-number {
  font-size: 120px;
  font-weight: 800;
  color: var(--primary);
  animation: countPulse 0.5s ease-out;
}
@keyframes countPulse {
  from { transform: scale(2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Game status messages */
.game-status {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius);
  margin: 12px 0;
}
.game-status.success { background: #0d2818; color: var(--green); }
.game-status.warning { background: #2a1a00; color: var(--yellow); }
.game-status.info { background: #1a1a2e; color: var(--text); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fade-in { animation: fadeIn 0.3s ease-out; }
.shake { animation: shake 0.3s ease; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 2px; }

/* Reconnect overlay */
#reconnect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 35, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.reconnect-content { text-align: center; }
.reconnect-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface2);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.reconnect-text { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.reconnect-sub { font-size: 14px; color: var(--text-dim); }

/* Away badge */
.away-badge {
  font-size: 11px;
  margin-left: 4px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 200;
  animation: fadeIn 0.2s;
}

/* ─── Type Racer ─────────────────────────────────────────────────────────── */

/* Type Racer root — stretch to full container width */
#game-container .game-status,
.tr-sentence,
.tr-input-area,
.tr-feedback,
.tr-progress-list,
.math-timer-bar {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

.tr-sentence {
  font-size: 22px;
  line-height: 1.7;
  letter-spacing: 0.5px;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  padding: 20px;
  margin: 12px 0;
  min-height: 80px;
  word-break: break-word;
  font-family: 'Courier New', Courier, monospace;
  color: var(--text-dim);
}
.tr-char-correct  { color: var(--green); }
.tr-char-wrong    { color: var(--red); background: rgba(239,68,68,0.15); border-radius: 2px; }
.tr-char-cursor   { color: var(--text); background: var(--primary); border-radius: 2px; }
.tr-char-pending  { color: var(--text-dim); }

.tr-input-area { margin: 8px 0; }
.tr-typing-input {
  width: 100%;
  font-size: 18px;
  font-family: 'Courier New', Courier, monospace;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.tr-typing-input:focus { border-color: var(--primary); }
.tr-typing-input:disabled { opacity: 0.5; cursor: not-allowed; }
.tr-typing-input::placeholder { color: var(--text-dim); }

.tr-feedback {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 8px;
  min-height: 32px;
  color: var(--text-dim);
}
.tr-feedback.correct { color: var(--green); }
.tr-feedback.wrong   { color: var(--red); }

.tr-progress-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tr-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.tr-player-name {
  width: 100px;
  flex-shrink: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-player-bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}
.tr-player-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.15s ease-out;
}
.tr-player-pct {
  width: 36px;
  text-align: right;
  color: var(--text-dim);
  font-size: 12px;
}
.tr-result-row {
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
}

/* ─── Hangman ─────────────────────────────────────────── */
.hg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-dim);
}
.hg-round { font-weight: 600; color: var(--primary); }
.hg-timer { font-weight: 700; color: var(--yellow); }
.hg-hint  { font-size: 12px; }

.hg-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hg-scaffold-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.hg-svg {
  width: 120px;
  height: 102px;
}

.hg-wrong-count {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  text-align: center;
}

.hg-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hg-blanks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.hg-blank {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 26px;
  height: 34px;
  border-bottom: 2px solid var(--text-dim);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  transition: color 0.2s;
}
.hg-blank.revealed {
  color: var(--green);
  border-bottom-color: var(--green);
}

.hg-wrong-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}
.hg-wrong-badge {
  display: inline-block;
  background: #3b1212;
  color: var(--red);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
}

.hg-keyboard { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.hg-kb-row { display: flex; gap: 4px; }
.hg-key {
  width: 28px;
  height: 28px;
  border: 1px solid var(--surface2);
  background: var(--surface);
  color: var(--text);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.hg-key:hover:not(:disabled) { background: var(--primary); color: white; }
.hg-key.wrong  { background: #3b1212; color: var(--red);   opacity: 0.7; cursor: default; }
.hg-key.right  { background: #0d2818; color: var(--green); opacity: 0.7; cursor: default; }

.hg-word-guess {
  display: flex;
  gap: 6px;
}
.hg-word-guess input {
  flex: 1;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--surface2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
}
.hg-word-guess input:focus {
  outline: none;
  border-color: var(--primary);
}

.hg-feedback {
  font-size: 13px;
  min-height: 18px;
  text-align: center;
}
.hg-feedback.success { color: var(--green); }
.hg-feedback.danger  { color: var(--red); }
.hg-feedback.warning { color: var(--yellow); }

.hg-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 8px 0;
}
.hg-reveal-word {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.hg-reveal-hint { color: var(--text-dim); font-size: 13px; }

@media (max-width: 340px) {
  .hg-key { width: 24px; height: 24px; font-size: 11px; }
  .hg-svg { width: 100px; height: 85px; }
}

/* ── Number Guess ─────────────────────────────────────────────── */
.ng-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.ng-round   { color: var(--text-dim); }
.ng-range   { color: var(--text); }
.ng-timer   { color: var(--primary); font-weight: 600; min-width: 32px; text-align: right; }

.ng-timer-bar {
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}
.ng-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: background 0.3s;
}

.ng-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.ng-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--surface2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.ng-input:focus  { outline: none; border-color: var(--primary); }
.ng-input::-webkit-inner-spin-button,
.ng-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ng-input:disabled { opacity: 0.5; cursor: not-allowed; }

.ng-submit { white-space: nowrap; padding: 10px 16px; font-size: 14px; }

.ng-feedback {
  min-height: 20px;
  text-align: center;
  font-size: 13px;
  margin-bottom: 8px;
}
.ng-feedback.success { color: var(--green); font-weight: 600; }
.ng-feedback.warning { color: var(--yellow); }

.ng-log {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--surface2);
  padding-top: 8px;
}
.ng-log-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 8px 0; }

.ng-log-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
}
.ng-log-correct { border-left: 3px solid var(--green); }
.ng-log-higher  { border-left: 3px solid var(--primary); }
.ng-log-lower   { border-left: 3px solid var(--yellow); }

.ng-log-player { font-weight: 600; color: var(--primary); }
.ng-log-hint   { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.ng-log-points { color: var(--green); font-weight: 700; font-size: 12px; }

/* Result screen */
.ng-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.ng-result-number {
  font-size: 64px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}
.ng-result-label  { font-size: 14px; color: var(--text-dim); margin-top: -4px; }
.ng-result-msg    { font-size: 15px; color: var(--text); }
.ng-result-log    {
  width: 100%;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

/* ─── Arcade Field Guide identity and responsive shell ─── */
:root{
  --ink:#171612;--ink-soft:#29271f;--paper:#f4e8ca;--paper-deep:#ddcda8;
  --vermilion:#d94b2b;--vermilion-dark:#a8321c;--marigold:#e2a624;--moss:#526343;--clay:#a66f57;
  --bg:var(--ink);--surface:#25231d;--surface2:#38342a;--primary:var(--vermilion);--primary-hover:var(--vermilion-dark);
  --accent:var(--marigold);--green:#9bad70;--yellow:#f0bd43;--red:#ee765c;--text:#fff8e8;--text-dim:#c7bea9;
  --radius:4px;--radius-sm:3px;--font-display:Georgia,'Times New Roman',serif;--font-ui:Atkinson Hyperlegible,Inter,system-ui,sans-serif;--font-mono:'SFMono-Regular',Consolas,monospace
}
*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:smooth}body{font-family:var(--font-ui);background:var(--ink);color:var(--text);min-height:100dvh;overflow-x:hidden;background-image:radial-gradient(rgba(244,232,202,.05) 1px,transparent 1px);background-size:5px 5px}
button,input{font:inherit}button{min-height:44px}button,[role=button]{touch-action:manipulation}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:9999;transform:translateY(-150%);visibility:hidden;background:var(--paper);color:var(--ink);padding:12px 16px}.skip-link:focus{transform:none;visibility:visible}
:focus-visible{outline:3px solid var(--marigold)!important;outline-offset:3px}main{width:min(1240px,100%);margin:auto;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.screen{display:none}.screen.active{display:block;min-height:calc(100dvh - 42px);animation:pageReveal .42s ease both}.screen[hidden]{display:none!important}.eyebrow{font:800 .72rem/1 var(--font-mono);letter-spacing:.17em;text-transform:uppercase;color:var(--marigold);margin-bottom:12px}
.home-layout{min-height:calc(100dvh - 48px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:clamp(44px,7vw,104px)}.home-hero{text-align:left;padding:32px 0;position:relative}.home-hero h1{font-family:var(--font-display);font-size:clamp(4.2rem,8.5vw,8rem);font-weight:500;line-height:.76;letter-spacing:-.06em;color:var(--paper);background:none;-webkit-text-fill-color:initial}.home-hero h1 em{font-weight:400;color:var(--vermilion);font-size:.62em;letter-spacing:-.04em}.subtitle{font-size:clamp(1rem,2vw,1.2rem);line-height:1.55;max-width:48ch;color:var(--text-dim);margin-top:30px}.edition-mark{position:absolute;right:0;top:4%;width:94px;height:94px;border:2px solid var(--marigold);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(7deg);color:var(--marigold);font-family:var(--font-mono)}.edition-mark span{font-size:1.1rem;font-weight:900}.edition-mark b{font-size:.7rem;letter-spacing:.08em}.field-notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.field-notes span{border:1px solid #736b58;padding:8px 11px;font:700 .75rem var(--font-mono);text-transform:uppercase;letter-spacing:.055em}
.paper-panel{position:relative;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--vermilion);padding:clamp(24px,4vw,42px)}.home-actions{display:flex;flex-direction:column;gap:11px;margin:0;transform:rotate(-.4deg)}.home-actions h2{font-family:var(--font-display);font-size:2rem;margin-bottom:12px}.home-actions label{font:800 .75rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.panel-number{position:absolute;right:20px;top:16px;font:900 3rem var(--font-display);color:rgba(23,22,18,.1);pointer-events:none}
input[type=text],input[type=number]{min-height:50px;background:#fff9e8;border:2px solid var(--ink);border-radius:0;color:var(--ink);padding:12px 14px;box-shadow:none}input[type=text]::placeholder{color:#766e5c}input[type=text]:focus,input[type=number]:focus{border-color:var(--vermilion);outline:3px solid rgba(217,75,43,.25)}.btn{border:2px solid var(--ink);border-radius:2px;padding:11px 18px;font-weight:800;letter-spacing:.01em;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}.btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}.btn:active:not(:disabled){transform:translate(0);box-shadow:none}.btn-primary{background:var(--vermilion);color:#fff9e8}.btn-secondary,.btn-small{background:var(--paper);color:var(--ink)}.btn:disabled{opacity:.48;cursor:not-allowed}.divider{color:#665e4e;margin:6px 0}.divider:before,.divider:after{background:#9f947b}.error-msg{text-align:left;color:#9e2819;font-weight:700;margin:0}.join-row{gap:8px}
.lobby-header,.game-hud{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid #5e5748;margin-bottom:28px}.lobby-header h2,.game-title,.results-content h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,5vw,4rem);line-height:1}.code-badge{font:900 .8em var(--font-mono);background:var(--marigold);color:var(--ink);padding:5px 10px;border-radius:0;letter-spacing:.16em}.lobby-layout{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:clamp(28px,5vw,64px);align-items:start}.players-section{margin:0;box-shadow:7px 7px 0 var(--moss);padding:24px}.players-header{border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:14px}.players-section h3,.game-picker h3{font-family:var(--font-display);font-size:1.7rem;text-transform:none;letter-spacing:0;color:inherit}.btn-bot{background:var(--paper-deep);border:2px solid var(--ink)}#player-list{display:grid;gap:8px}#player-list li{background:transparent;color:var(--ink);border-bottom:1px solid #b3a789;border-radius:0;min-height:44px;padding:8px 4px}.remove-bot{margin-left:auto;min-width:44px;min-height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--vermilion)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section-heading h3{font-size:2.7rem}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.game-card{position:relative;min-height:150px;background:#2a2821;border:1px solid #5e5849;border-radius:2px;padding:18px;color:var(--text);text-align:left;cursor:pointer;overflow:hidden}.game-card:before{content:attr(data-index);position:absolute;right:10px;top:6px;color:#8d8572;font:900 2.5rem var(--font-display);pointer-events:none}.game-card:hover{border-color:var(--marigold);transform:translateY(-2px)}.game-card.selected{border-color:var(--vermilion);background:#33251e;box-shadow:inset 5px 0 0 var(--vermilion)}.game-card .game-icon{font-size:1.8rem;filter:grayscale(.25);margin-bottom:18px}.game-card .game-name{font-family:var(--font-display);font-size:1.35rem}.game-card .game-desc{font-size:.82rem;line-height:1.4;color:#d3cab6}.lobby-action-tray{position:relative;z-index:5;background:var(--ink);padding:14px 0}.btn-large{width:100%;margin:0}.waiting-text{color:var(--text-dim)}
.game-hud-actions{display:flex;align-items:center;gap:12px}.game-container{min-height:clamp(480px,70vh,760px);background:#211f1a;border:1px solid #5e5849;border-radius:3px;padding:clamp(16px,4vw,40px);overflow:hidden}.game-status{max-width:100%}.results-content{max-width:860px;margin:auto;padding:8vh 0}.results-content h2{font-size:clamp(3.4rem,10vw,7.5rem);color:var(--paper)}.results-list{width:min(100%,620px)}.results-list li{border-radius:0;border-bottom:1px solid #5e5849}.celebration{height:20px;display:flex;justify-content:center;gap:38px}.celebration i{width:10px;height:10px;background:var(--marigold);animation:confetti 1.6s ease-out infinite}.celebration i:nth-child(even){background:var(--vermilion);animation-delay:.2s}.podium-bar{border-radius:2px 2px 0 0}.podium-item.rank-1 .podium-bar{background:var(--marigold)}.podium-item.rank-2 .podium-bar{background:var(--moss)}.podium-item.rank-3 .podium-bar{background:var(--clay)}
.connection-status{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:100;background:var(--moss);color:#fff;padding:7px 11px;border:1px solid var(--paper);font:800 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;transform:translateY(150%);transition:transform .2s}.connection-status.visible{transform:none}.connection-status.offline{background:var(--vermilion)}#reconnect-overlay{position:fixed;inset:0;z-index:200;background:rgba(23,22,18,.9);display:grid;place-items:center}.reconnect-content{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--vermilion);padding:30px;text-align:center;max-width:90%}.reconnect-spinner{width:36px;height:36px;border:4px solid var(--paper-deep);border-top-color:var(--vermilion);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}.toast{border-radius:0;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--marigold)}
@keyframes pageReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes confetti{0%{opacity:0;transform:translateY(-15px) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(55px) rotate(180deg)}}@keyframes spin{to{transform:rotate(1turn)}}
@media(max-width:900px){.home-layout{grid-template-columns:1fr;gap:10px;align-content:start}.home-hero{padding:30px 0 16px}.home-hero h1{font-size:clamp(3.8rem,15vw,6.7rem)}.subtitle{margin-top:20px}.edition-mark{width:72px;height:72px}.home-actions{max-width:600px;width:100%;margin:auto}.lobby-layout{grid-template-columns:1fr}.players-section{position:static}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){main{padding:10px 14px max(18px,env(safe-area-inset-bottom))}.screen.active{min-height:calc(100dvh - 20px)}.home-hero{padding:12px 0 8px}.home-hero h1{font-size:17vw;line-height:.78;padding-right:66px}.home-hero h1 em{font-size:.58em}.eyebrow{font-size:.75rem;margin-bottom:8px}.subtitle{font-size:.94rem;line-height:1.42;margin-top:14px}.field-notes{margin-top:12px}.field-notes span{font-size:.7rem;padding:6px 8px}.edition-mark{top:4px;width:62px;height:62px}.edition-mark span{font-size:.9rem}.edition-mark b{font-size:.62rem}.paper-panel{padding:18px 16px;box-shadow:7px 7px 0 var(--vermilion)}.home-actions{gap:8px}.home-actions h2{font-size:1.65rem;margin-bottom:4px}.join-row{display:grid;grid-template-columns:1fr 92px}.lobby-header,.game-hud{align-items:flex-end}.lobby-header .btn-small{max-width:112px}.game-hud-actions{flex-direction:column;align-items:flex-end}.game-grid{gap:8px}.game-card{min-height:140px;padding:14px}.game-card .game-name{font-size:1.08rem}.game-card .game-desc{font-size:.75rem}.game-container{min-height:calc(100dvh - 150px);padding:14px}.podium{gap:4px}.podium-bar{width:26vw;max-width:80px}}
@media(min-width:521px) and (max-width:700px){.panel-number{font-size:2.2rem;right:12px;top:10px}.home-actions h2{padding-right:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.screen.active{animation:none}.btn:hover:not(:disabled),.game-card:hover{transform:none}.reconnect-spinner{animation:none;border-color:var(--vermilion)}}
.tap-player-name{width:70px;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tap-results{width:100%;margin-top:16px}