/* Reverse Turing — shared styles. Mobile-first. */

:root {
  --bg: #0d0d12;
  --fg: #f0f0f0;
  --muted: #8a8a98;
  --accent: #ffd400;
  --danger: #ff3b3b;
  --ok: #34d399;
  --card: #1a1a24;
  --border: #2a2a3a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC",
               "Microsoft JhengHei", sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { padding: 16px; max-width: 720px; margin: 0 auto; }

h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 12px 0 8px; color: var(--accent); }
p, label { font-size: 15px; line-height: 1.5; }
.muted { color: var(--muted); font-size: 13px; }

button, input, textarea {
  font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  width: 100%;
}
button {
  background: var(--accent); color: #000; font-weight: 600;
  border: none; cursor: pointer; margin-top: 8px;
}
button:disabled { opacity: 0.5; cursor: default; }
button.secondary { background: var(--card); color: var(--fg); border: 1px solid var(--border); }
button.danger { background: var(--danger); color: #fff; }

textarea { resize: none; min-height: 120px; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin: 12px 0;
}
.q-prompt { font-size: 18px; font-weight: 600; line-height: 1.4; }

.timer {
  font-variant-numeric: tabular-nums;
  font-size: 28px; font-weight: 700; color: var(--accent);
  text-align: center; margin: 12px 0;
}
.timer.warn { color: var(--danger); }

.answer-list { display: flex; flex-direction: column; gap: 10px; }
.answer-item {
  background: var(--card); border: 2px solid var(--border);
  border-radius: 12px; padding: 12px; cursor: pointer;
  transition: border-color 0.1s;
}
.answer-item .label {
  display: inline-block; background: var(--border);
  border-radius: 6px; padding: 2px 8px; font-weight: 700;
  margin-right: 8px; font-size: 13px;
}
.answer-item.selected { border-color: var(--accent); background: #2a2a18; }

.player-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.player-tile {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 8px; text-align: center;
  font-size: 14px; transition: opacity 0.4s, background 0.4s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-tile.dead {
  opacity: 0.3; text-decoration: line-through;
  background: #2a1010; border-color: #5a2020;
}
.player-tile.eliminating {
  animation: shake 0.4s ease-in-out 3, fadeRed 1.2s ease-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes fadeRed {
  0% { background: #ff3b3b; }
  100% { background: var(--card); }
}

.center { text-align: center; }
.big { font-size: 28px; font-weight: 700; }
.huge { font-size: 56px; font-weight: 800; line-height: 1; }

/* Elimination overlay — full screen red flash + alarm visuals */
.eliminated-overlay {
  position: fixed; inset: 0; background: #c00; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; animation: alarmFlash 0.5s steps(2, end) 6;
}
.eliminated-overlay .x { font-size: 120px; font-weight: 800; }
.eliminated-overlay .msg { font-size: 28px; margin-top: 12px; }
@keyframes alarmFlash {
  0%, 49% { background: #c00; }
  50%, 100% { background: #000; }
}

/* Screen view (projector) — larger typography */
body.screen { max-width: none; padding: 32px; }
body.screen h1 { font-size: 36px; }
body.screen .q-prompt { font-size: 32px; }
body.screen .timer { font-size: 64px; }
body.screen .player-wall {
  /* Auto-shrink so 30+ tiles still fit nicely on a 1920px projector */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
body.screen .player-tile { font-size: 18px; padding: 14px 10px; }
/* When there are many players, drop the font a touch */
body.screen .player-wall:has(> :nth-child(20)) .player-tile { font-size: 16px; padding: 12px 8px; }
body.screen .player-wall:has(> :nth-child(28)) .player-tile { font-size: 15px; padding: 10px 8px; }

.qr {
  background: #fff; padding: 16px; border-radius: 12px;
  display: inline-block;
}