/* The player's page (ticket ef004c3b): a phone held in one hand, in a room, at arm's length.
   Big targets, high contrast, nothing that needs precision. */
:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --surface: #121821;
  --line: #243042;
  --text: #e6edf3;
  --muted: #8aa0b6;
  --accent: #4ea1ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
/* A display rule on a class beats the hidden attribute, so the join form and the game panel
   were both on screen at once: an empty scoreboard under the PIN box, and the PIN box still
   there during the game. Hidden wins here, whatever a class says. */
[hidden] { display: none !important; }

.play { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; min-height: 100svh; }
.play__brand { margin: 8px 0 0; font-size: 1.6rem; letter-spacing: 0.02em; text-align: center; color: var(--accent); }
.play__join { display: flex; flex-direction: column; gap: 14px; }
.play__field { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; color: var(--muted); }
.play__field input {
  font: inherit; font-size: 1.6rem; text-align: center; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 100%;
}
.play__field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.play__btn {
  font: inherit; font-size: 1.2rem; font-weight: 600; padding: 14px; border-radius: 10px; border: none;
  background: var(--accent); color: #06121f; cursor: pointer; min-height: 52px;
}
.play__msg { margin: 0; min-height: 1.4em; color: #e5534b; text-align: center; }
.play__game { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.play__head { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.play__score { font-weight: 700; color: var(--text); }
.play__state { margin: 0; color: var(--muted); text-align: center; }
.play__question { margin: 0; font-size: 1.3rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.play__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1 1 auto; align-content: center; }
@media (max-width: 380px) { .play__answers { grid-template-columns: minmax(0, 1fr); } }
.play__answer {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 96px; padding: 12px;
  border: none; border-radius: 12px; background: var(--qb-c); color: #0b0f14; font: inherit; font-size: 1.05rem;
  font-weight: 600; cursor: pointer; overflow-wrap: anywhere;
}
.play__answer:active { transform: scale(0.98); }
.play__answer--0 { --qb-c: #e4572e; }
.play__answer--1 { --qb-c: #2e86ab; }
.play__answer--2 { --qb-c: #f1a208; }
.play__answer--3 { --qb-c: #3bb273; }
.play__shape svg { width: 28px; height: 28px; fill: #0b0f14; display: block; }
.play__result { margin: 0; text-align: center; font-size: 1.2rem; font-weight: 600; min-height: 1.5em; }