/* b1ngo — two themes, light by default.

   Light is what everyone gets until they say otherwise, whatever the device
   is set to. Following the device sounded right, but it means someone whose
   phone is in dark mode is met by a wall of near-black on the way in, and
   this is a party game, not a terminal.

   Dark is one button away and is remembered from then on. The TV view has
   the same button in its own corner, because a television's setting says
   nothing about the room the set is standing in. */

:root {
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Light is the fallback, so a browser that tells us nothing gets the
     friendlier of the two. */
  --bg: #f5f7fc;
  --surface: #ffffff;
  --surface-2: #eaeef7;
  --cell-empty: #dfe4ef;
  --border: #d3dae8;
  --text: #141828;
  --muted: #5b6478;
  --accent: #d81e42;
  --accent-dark: #ad1734;
  --gold: #8a5a00;
  --on-gold: #ffffff;
  --green: #1a8f4e;
  --overlay: rgba(245, 247, 252, 0.95);
}

/* An explicit choice beats the device, in both directions. */
:root[data-theme="light"] {
  --bg: #f5f7fc;
  --surface: #ffffff;
  --surface-2: #eaeef7;
  --cell-empty: #dfe4ef;
  --border: #d3dae8;
  --text: #141828;
  --muted: #5b6478;
  --accent: #d81e42;
  --accent-dark: #ad1734;
  --gold: #8a5a00;
  --on-gold: #ffffff;
  --green: #1a8f4e;
  --overlay: rgba(245, 247, 252, 0.95);
}

:root[data-theme="dark"] {
  --bg: #10131c;
  --surface: #191d2b;
  --surface-2: #232838;
  --cell-empty: #141826;
  --border: #2f3547;
  --text: #eef1f8;
  --muted: #9aa3ba;
  --accent: #ff3d5a;
  --accent-dark: #c72740;
  --gold: #ffc93c;
  --on-gold: #10131c;
  --green: #2ed47a;
  --overlay: rgba(16, 19, 28, 0.94);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.02em; }
h2 { font-size: 20px; }
p { line-height: 1.5; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
}
.logo b { color: var(--accent); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
input[type=text], input[type=number], select {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px; /* below 16px iOS zooms in on focus */
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.option { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.option input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.option label { margin: 0; color: var(--text); font-size: 16px; }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px; /* thumb friendly */
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.primary:hover:not(:disabled) { background: var(--accent-dark); }
.full { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- bingo card ---------- */

.card {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  background: var(--border);
  border: 4px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text);
  font-size: clamp(13px, 3.6vw, 22px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 0;
  border-radius: 4px;
  padding: 0;
  min-height: 0;
  cursor: pointer;
}
.cell.empty { background: var(--cell-empty); cursor: default; }
.cell.marked { background: var(--accent); color: #fff; }
.cell.drawn { box-shadow: inset 0 0 0 2px var(--gold); }

/* ---------- board with all 90 numbers ---------- */

.board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.board span {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 4px;
  font-size: clamp(10px, 2vw, 14px);
  font-variant-numeric: tabular-nums;
}
.board span.out { background: var(--accent); color: #fff; font-weight: 700; }
.board span.last { background: var(--gold); color: var(--on-gold); font-weight: 800; }

/* ---------- status and winning tiers ---------- */

.patterns { list-style: none; padding: 0; margin: 0; }
.patterns li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.patterns li:last-child { border-bottom: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); flex: none; }
.patterns li.open .dot { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.patterns li.won .dot { background: var(--green); }
.patterns li.won { color: var(--muted); }
.patterns .who { margin-left: auto; font-weight: 700; color: var(--green); }

.msg {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border-left: 4px solid var(--gold);
  margin-bottom: 14px;
}
.msg.error { border-left-color: var(--accent); }
.msg.ok { border-left-color: var(--green); }

.code {
  font-size: clamp(32px, 9vw, 52px);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.qr { background: #fff; padding: 10px; border-radius: 12px; display: block; width: 180px; height: 180px; }

.offline {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 50;
}

/* ---------- TV view ---------- */

body.tv { overflow: hidden; }
.tv-layout {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 26vw);
  gap: 2vw;
  padding: 2.5vw;
}
.tv-main { display: flex; flex-direction: column; gap: 2vh; min-width: 0; }
.tv-number {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 24px;
  border: 1px solid var(--border);
  min-height: 0;
}
.tv-number .big {
  font-size: min(34vh, 26vw);
  font-weight: 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.tv-number .big.pulse { animation: pulse 0.6s ease-out; }
@keyframes pulse {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.tv-number .sub { font-size: clamp(16px, 2vw, 26px); color: var(--muted); margin-top: 1vh; }
.tv-side { display: flex; flex-direction: column; gap: 2vh; min-width: 0; overflow: hidden; }
.tv-side .panel { margin: 0; }
.tv .board span { font-size: clamp(12px, 1.5vw, 22px); }
.tv-winner {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  z-index: 100;
  text-align: center;
  padding: 4vw;
}
.tv-winner .word { font-size: min(16vh, 14vw); font-weight: 800; color: var(--accent); line-height: 1; }
.tv-winner .name { font-size: min(8vh, 8vw); font-weight: 700; margin-top: 2vh; }
.tv-winner .tier { font-size: min(4vh, 4vw); color: var(--gold); margin-top: 1vh; }
.hidden { display: none !important; }

@media (max-width: 860px) {
  .tv-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- the two ways in ---------- */

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.choices .panel { margin: 0; display: flex; flex-direction: column; }
.choice h2 { margin-bottom: 6px; }
.choice form { margin-top: auto; }
.choice .btn { margin-top: auto; }

.small-btn { padding: 8px 14px; min-height: 40px; font-size: 14px; }

summary::-webkit-details-marker { color: var(--muted); }

/* ---------- page header ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* The actions stay together on the right rather than being spread apart by
   the header's own justify-content. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.topbar-actions form { margin: 0; }