:root {
  --bg: #12100e;
  --surface: #1c1916;
  --surface-2: #262119;
  --border: #3a3226;
  --gold: #e0b84a;
  --gold-dark: #a8842f;
  --logo-gold: #E6B528;
  --text: #f2ede3;
  --text-muted: #9c9488;
  --danger: #d9534f;
  --success: #4caf6d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Safety net: nothing on the page should ever force horizontal scrolling
     of the whole app — any element that's too wide should be contained (or
     shrink) inside its own box instead of dragging the header/nav sideways. */
  overflow-x: hidden;
}

/* ---- Auth page ---- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #ffffff;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--text);
}
.logo span { color: var(--gold); }
.logo-img {
  height: 24px;
  width: auto;
  display: block;
  flex-shrink: 0;
  background: var(--logo-gold);
  border-radius: 6px;
  padding: 3px 7px;
  border: 1px solid var(--gold-dark);
}
.auth-page .logo-img { height: 30px; padding: 4px 9px; }
.topbar .logo { justify-content: flex-start; margin: 0; gap: 8px; }

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 10px;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form.hidden { display: none; }

.auth-form input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 15px;
}
.auth-form input:focus { outline: none; border-color: var(--gold-dark); }

.auth-form button {
  background: var(--gold);
  border: none;
  border-radius: 8px;
  padding: 12px;
  color: #1a1712;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 4px;
}
.auth-form button:hover { background: #eec868; }

.auth-error { color: var(--danger); font-size: 13px; min-height: 16px; margin: 0; }

/* ---- Game page ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--logo-gold);
  border-bottom: 1px solid var(--border);
}
.topbar .logo { color: #201c16; }
.topbar .logo span { color: #1b2a63; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.balance { color: var(--gold-dark); font-weight: 700; }
.username { color: #6b6357; }
.link-btn {
  background: none;
  border: none;
  color: #6b6357;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}

/* ---- Language toggle (EN / አማ) ---- */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lang-btn {
  background: var(--surface-2);
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--border); }
.lang-btn.active {
  background: var(--gold);
  color: #12100e;
}
.lang-btn:disabled { opacity: 0.6; cursor: wait; }

.icon-toggle-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.icon-toggle-btn[aria-pressed="false"] { opacity: 0.5; }
.topbar .icon-toggle-btn { background: #fff; border-color: var(--gold-dark); }

.main-nav {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 16px 0;
  gap: 8px;
  /* On narrow phones the 6 tabs don't all fit at flex:1 without wrapping
     their labels — let the strip scroll horizontally on its own instead of
     forcing the whole page (header included) to grow wider than the screen. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-btn {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 4px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.nav-btn:hover { border-color: var(--gold-dark); color: var(--text); }
.nav-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1712;
}

.game-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

.view.hidden { display: none; }

.panel-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 340px;
  margin: 0 auto;
}
.panel-box h3 { margin: 0 0 10px; color: var(--gold); }
.panel-box input, .panel-box select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 8px;
}
.panel-box select { appearance: auto; }

.hidden { display: none; }
.flash-success { color: var(--success, #3ba55d); font-size: 13px; margin: 0 0 8px; }

.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-dark);
}

.profile-box { max-width: 380px; }
.profile-box h4 { margin: 0 0 8px; color: var(--gold); font-size: 14px; }
.profile-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.profile-avatar-preview,
.profile-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.profile-avatar-preview { object-fit: cover; }
.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--gold);
  font-size: 28px;
  font-weight: 700;
}
.profile-avatar-actions { flex: 1; }
.profile-avatar-actions .modal-hint { margin: 6px 0 0; }

.deposit-instructions {
  background: var(--surface-2);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.deposit-instructions-label {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.deposit-instructions-value {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.transactions-box { max-width: 440px; }

.wallet-box { max-width: 440px; }
.wallet-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 16px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(224, 190, 45, 0.10);
  border: 1px solid rgba(224, 190, 45, 0.25);
}
.wallet-balance-label { font-size: 0.85em; color: var(--muted, #a8a8a8); }
.wallet-balance-value { font-size: 1.8em; font-weight: 700; color: var(--gold); }
.wallet-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.wallet-actions .mini-btn { flex: 1; }
.wallet-history-title { margin: 0 0 8px; color: var(--gold); font-size: 1em; }

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.tx-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.tx-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.tx-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.tx-type {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.tx-type-deposit { background: rgba(46, 160, 90, 0.18); color: #4fce7f; }
.tx-type-withdraw { background: rgba(224, 108, 45, 0.18); color: #f0975a; }
.tx-amount { font-weight: 700; color: var(--text); }
.tx-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.tx-status-pending { background: rgba(224, 190, 45, 0.18); color: #e0c02d; }
.tx-status-approved { background: rgba(46, 160, 90, 0.18); color: #4fce7f; }
.tx-status-rejected { background: rgba(214, 60, 60, 0.18); color: #e06c6c; }
.tx-reject-reason {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(214, 60, 60, 0.10);
  border: 1px solid rgba(214, 60, 60, 0.25);
  color: #e06c6c;
  font-size: 12px;
}

.role-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 8px;
}
.role-badge-admin { background: rgba(224, 190, 45, 0.22); color: var(--gold-dark); }
.role-badge-manager { background: rgba(90, 140, 224, 0.18); color: #3568c9; }

.status-bar { text-align: center; margin-bottom: 16px; }
.status-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
}
.status-panel.hidden { display: none; }
#countdown-secs { color: var(--gold); font-weight: 700; font-size: 20px; }

.vip-day-banner {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color: #1a1300;
  text-align: center;
  font-weight: 700;
  padding: 10px 14px;
  font-size: 14px;
  letter-spacing: 0.2px;
}
.vip-day-banner.hidden { display: none; }

.card-picker.hidden, .board-area.hidden { display: none; }
#my-card.hidden { display: none; }

/* ==========================================================================
   Kuraz-style neon theme, scoped to the card-selection board and calling
   board only (the rest of the app keeps the gold/brown theme).
   ========================================================================== */
.card-picker, .calling-board {
  --nv-bg: #171034;
  --nv-surface: #1e1748;
  --nv-surface-2: #251d59;
  --nv-border: rgba(93, 211, 255, 0.35);
  --nv-border-soft: rgba(93, 211, 255, 0.18);
  --nv-text: #f4f2ff;
  --nv-text-muted: #9d97c9;
  --nv-b: #2fbf71;
  --nv-i: #9b5de5;
  --nv-n: #e8823a;
  --nv-g: #3d8bf2;
  --nv-o: #f0508f;
  --nv-gold: #ffd54a;
  background: linear-gradient(180deg, var(--nv-bg), #120c29);
  border: 1px solid var(--nv-border);
  border-radius: 14px;
  padding: 10px;
  color: var(--nv-text);
  box-shadow: 0 0 0 1px rgba(93, 211, 255, 0.06), 0 8px 24px rgba(0,0,0,0.35);
  max-width: 420px;
  margin: 0 auto;
}

/* ---- Shared stat strip (4 boxes) ---- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.stat-box {
  background: var(--nv-surface);
  border: 1px solid var(--nv-border-soft);
  border-radius: 8px;
  padding: 5px 2px;
  text-align: center;
}
.stat-box-label {
  display: block;
  font-size: 8.5px;
  color: var(--nv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.stat-box-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--nv-text);
}
.stat-box.stat-danger .stat-box-value { color: #ff6b6b; }

/* ---- Card selection instruction banner ---- */
.picker-instructions {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nv-text-muted);
  background: var(--nv-surface);
  border: 1px solid var(--nv-border-soft);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.picker-instructions strong { color: var(--nv-text); }
.card-picker h2 { display: none; }

.picker-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 640px) {
  .picker-layout { grid-template-columns: 1fr; }
}

.card-grid-wrap { min-width: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.card-cell {
  aspect-ratio: 1;
  background: var(--nv-surface-2);
  border: 1px solid var(--nv-border-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--nv-text);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.card-cell:hover { border-color: #5dd3ff; }
.card-cell.taken { opacity: 0.3; cursor: not-allowed; color: var(--nv-text-muted); }
.card-cell.mine {
  background: rgba(240, 160, 40, 0.18);
  color: #ffb84d;
  border-color: #ffb84d;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 184, 77, 0.35);
}
.card-cell.mine:hover { background: #c0392b; border-color: #c0392b; color: #fff; box-shadow: none; }
.card-cell.mine:hover::after { content: ' ✕'; }
.card-cell.disabled-full { opacity: 0.4; cursor: not-allowed; }

/* ---- Right-side "your selected cards" panel ---- */
.selected-panel {
  background: var(--nv-surface);
  border: 1px solid var(--nv-border-soft);
  border-radius: 10px;
  padding: 12px;
  position: sticky;
  top: 12px;
}
.selected-panel h3 { margin: 0 0 10px; font-size: 13px; color: #5dd3ff; text-transform: uppercase; letter-spacing: 0.4px; }
.selected-cards { display: flex; flex-direction: column; gap: 10px; }
.selected-cards .modal-hint { margin: 0; font-size: 12px; color: var(--nv-text-muted); }
.selected-card-mini {
  background: var(--nv-surface-2);
  border: 1px solid #ffb84d;
  border-radius: 8px;
  padding: 8px;
}
.selected-card-mini-label {
  font-size: 11px;
  font-weight: 700;
  color: #ffb84d;
  margin: 0 0 6px;
  text-align: center;
}
.mini-bingo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.mini-bingo-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nv-surface);
  border-radius: 3px;
  font-size: 9px;
  color: var(--nv-text-muted);
}
.mini-bingo-cell.free { background: #ffb84d; color: #1a1712; }
.picker-wait-msg {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--success);
  text-align: center;
}

/* ==========================================================================
   Calling board: header stats, current-call circle, recent chips, and the
   full 1-75 B-I-N-G-O board.
   ========================================================================== */
.calling-board { margin-bottom: 12px; }

.recent-calls {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.recent-calls.hidden { display: none; }
.recent-call-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  background: var(--nv-surface-2);
  opacity: 0.6;
}
.recent-call-chip.latest { opacity: 1; box-shadow: 0 0 8px currentColor; }
.recent-call-chip.col-b { background: rgba(47,191,113,0.28); color: #4fe89a; }
.recent-call-chip.col-i { background: rgba(155,93,229,0.28); color: #c299f5; }
.recent-call-chip.col-n { background: rgba(232,130,58,0.28); color: #ffab6b; }
.recent-call-chip.col-g { background: rgba(61,139,242,0.28); color: #7fb1ff; }
.recent-call-chip.col-o { background: rgba(240,80,143,0.28); color: #ff8cb8; }

.current-call-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--nv-surface);
  border: 1px solid var(--nv-border-soft);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 10px;
}
.current-call-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--nv-text);
}
.current-call-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #4fe89a, var(--nv-b) 65%, #1c7a49 100%);
  box-shadow: 0 0 0 3px var(--nv-gold), 0 0 14px rgba(255,213,74,0.7), 0 0 10px rgba(47,191,113,0.6);
  animation: final-ball-pulse 1.1s ease-in-out infinite;
  transition: background 0.2s ease;
}
.current-call-circle.col-b { background: radial-gradient(circle at 32% 28%, #6ef5a8, var(--nv-b) 65%, #1c7a49 100%); }
.current-call-circle.col-i { background: radial-gradient(circle at 32% 28%, #c299f5, var(--nv-i) 65%, #5a2f96 100%); }
.current-call-circle.col-n { background: radial-gradient(circle at 32% 28%, #ffb37a, var(--nv-n) 65%, #a4531a 100%); }
.current-call-circle.col-g { background: radial-gradient(circle at 32% 28%, #8fc0ff, var(--nv-g) 65%, #204f96 100%); }
.current-call-circle.col-o { background: radial-gradient(circle at 32% 28%, #ff9dc1, var(--nv-o) 65%, #a12360 100%); }

.automatic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.automatic-label { font-size: 12px; font-weight: 700; color: #4fe89a; }
.automatic-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--nv-border-soft);
  background: #5a5a5a;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.automatic-switch::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.automatic-switch[aria-pressed="true"] { background: #2fbf71; border-color: #2fbf71; }
.automatic-switch[aria-pressed="true"]::after { transform: translateX(16px); background: #fff; }
.automatic-switch[aria-pressed="false"] { background: #5a5a5a; border-color: var(--nv-border-soft); }
.automatic-state-text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ff6b6b;
  min-width: 28px;
}
.automatic-state-text.is-on { color: #4fe89a; }

/* Vertical calling board: one column per B-I-N-G-O letter, with a pinned
   letter header on top and that letter's 15 numbers running top-to-bottom
   underneath it. All 5 columns fit on screen at once — no scrolling, so no
   number is ever hidden off-screen. */
.bingo-board-wrap {
  overflow: visible;
  width: 100%;
}
.bingo-board-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(16px, auto);
  gap: 2px;
  width: 100%;
}
.bb-letter-cell {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  width: 100%;
  height: 18px;
}
.bb-letter-cell.col-b { background: var(--nv-b); }
.bb-letter-cell.col-i { background: var(--nv-i); }
.bb-letter-cell.col-n { background: var(--nv-n); }
.bb-letter-cell.col-g { background: var(--nv-g); }
.bb-letter-cell.col-o { background: var(--nv-o); }

.bb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  background: var(--nv-surface-2);
  border: 1px solid var(--nv-border-soft);
  border-radius: 3px;
  font-size: 7.5px;
  font-weight: 600;
  color: var(--nv-text-muted);
  overflow: hidden;
}
.bb-cell.called { color: #fff; font-weight: 700; }
.bb-cell.col-b.called { background: rgba(47,191,113,0.85); box-shadow: 0 0 5px rgba(47,191,113,0.6); }
.bb-cell.col-i.called { background: rgba(155,93,229,0.85); box-shadow: 0 0 5px rgba(155,93,229,0.6); }
.bb-cell.col-n.called { background: rgba(232,130,58,0.85); box-shadow: 0 0 5px rgba(232,130,58,0.6); }
.bb-cell.col-g.called { background: rgba(61,139,242,0.85); box-shadow: 0 0 5px rgba(61,139,242,0.6); }
.bb-cell.col-o.called { background: rgba(240,80,143,0.85); box-shadow: 0 0 5px rgba(240,80,143,0.6); }

/* The exact ball currently "on air" — same gold ring used on the Current
   circle above, and later on the matching cell of the winning card, so the
   final call is instantly recognizable as the same ball everywhere. */
.bb-cell.current,
.bingo-cell.final-ball {
  box-shadow: 0 0 0 2px var(--nv-gold), 0 0 10px rgba(255,213,74,0.85) !important;
  animation: final-ball-pulse 1s ease-in-out infinite !important;
}
@keyframes final-ball-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

.calling-board-waiting {
  text-align: center;
  color: var(--nv-text-muted);
  font-size: 13px;
  padding: 30px 10px;
}

/* ---- Board area: player's card(s) on the left, calling board filling the
   rest, both fitting together on one screen with no scrolling needed. ---- */
.board-layout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.board-side {
  flex: 0 0 auto;
  width: 50%;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The calling board no longer centers itself with a fixed max-width when
   it's sharing the row with the card column — it fills the remaining space. */
.board-layout .calling-board {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
}
/* The calling board is narrower now that it shares the row with the card
   column, so its stats/current-call circle scale down a notch too. */
.board-layout .calling-board .stat-strip { gap: 4px; margin-bottom: 6px; }
.board-layout .calling-board .stat-box { padding: 4px 2px; }
.board-layout .calling-board .stat-box-label { font-size: 7px; }
.board-layout .calling-board .stat-box-value { font-size: 11px; }
.board-layout .calling-board .current-call-row { padding: 5px 8px; margin-bottom: 8px; }
.board-layout .calling-board .current-call-label { font-size: 11px; }
.board-layout .calling-board .current-call-circle { width: 36px; height: 36px; font-size: 10.5px; }
.board-layout .calling-board .recent-call-chip { min-width: 30px; height: 20px; font-size: 9px; padding: 0 6px; }
@media (max-width: 420px) {
  /* Very narrow phones: keep the side-by-side layout (per spec) but trim
     the calling-board's share a little further so both sides stay legible. */
  .board-side { width: 46%; min-width: 120px; }
}

/* ---- Player's own card(s): stacked in the left column. A single card is
   free to grow and fill the column; each extra card shrinks the whole set
   (via the [data-count] tiers below) so everything still fits on one page. ---- */
.my-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 0;
}
.my-cards-wrap.hidden { display: none; }

.bingo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
.bingo-header {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 5px;
}
.bingo-header span {
  text-align: center;
  font-weight: 700;
  color: var(--gold);
  font-size: 14px;
}
.bingo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.bingo-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

/* Size tiers: one card gets to be big and easy to read; each additional
   card trims padding/gaps/font-size so the whole stack still fits in the
   side column without scrolling. */
.my-cards-wrap[data-count="1"] .bingo-card { padding: 12px; border-radius: 12px; }
.my-cards-wrap[data-count="1"] .bingo-header { gap: 4px; margin-bottom: 6px; }
.my-cards-wrap[data-count="1"] .bingo-header span { font-size: 16px; }
.my-cards-wrap[data-count="1"] .bingo-grid { gap: 4px; }
.my-cards-wrap[data-count="1"] .bingo-cell { font-size: 16px; border-radius: 7px; }

.my-cards-wrap[data-count="2"] .bingo-card { padding: 8px; border-radius: 10px; }
.my-cards-wrap[data-count="2"] .bingo-header { gap: 3px; }
.my-cards-wrap[data-count="2"] .bingo-header span { font-size: 12px; }
.my-cards-wrap[data-count="2"] .bingo-grid { gap: 3px; }
.my-cards-wrap[data-count="2"] .bingo-cell { font-size: 12px; }

.my-cards-wrap[data-count="3plus"] .bingo-card { padding: 5px; border-radius: 8px; }
.my-cards-wrap[data-count="3plus"] .bingo-header { gap: 2px; margin-bottom: 3px; }
.my-cards-wrap[data-count="3plus"] .bingo-header span { font-size: 9px; }
.my-cards-wrap[data-count="3plus"] .bingo-grid { gap: 2px; }
.my-cards-wrap[data-count="3plus"] .bingo-cell { font-size: 9px; border-radius: 4px; }
.bingo-cell.free { background: var(--gold-dark); color: #1a1712; font-weight: 700; }
/* Called but NOT yet marked: a clear "you can tap this" indicator \u2014 an
   outline + pulse on the normal cell background. This must look distinctly
   different from an actually-marked cell, or auto-mark OFF looks broken:
   players see every called number light up the same way whether or not it
   was really marked. */
.bingo-cell.called:not(.marked) {
  background: var(--surface-2);
  border: 2px solid var(--gold);
  color: var(--text);
  font-weight: 700;
}
.bingo-cell.markable {
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(224, 184, 74, 0.55);
  animation: markable-pulse 1.2s ease-in-out infinite;
}
/* Actually marked (auto-marked or tapped): solid gold fill + green ring +
   checkmark, unambiguously "done" \u2014 the only state that looks like this. */
.bingo-cell.called.marked {
  background: var(--gold);
  color: #1a1712;
  font-weight: 700;
  border-color: var(--success);
  box-shadow: inset 0 0 0 3px var(--success);
  position: relative;
}
.bingo-cell.called.marked::after {
  content: '\2713';
  position: absolute;
  top: 1px; right: 3px;
  font-size: 10px;
  font-weight: 900;
  color: var(--success);
}
.bingo-cell.not-called { cursor: default; }
@keyframes markable-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224, 184, 74, 0.5); }
  50% { box-shadow: 0 0 0 3px rgba(224, 184, 74, 0.9); }
}
.my-card-block { width: 100%; }
.my-card-label { text-align: center; font-size: 12px; color: var(--text-muted); margin: 0 0 6px; }
.my-cards-wrap[data-count="1"] .my-card-label { font-size: 14px; margin-bottom: 8px; }
.my-cards-wrap[data-count="3plus"] .my-card-label { font-size: 10px; margin-bottom: 3px; }
.bingo-cell.winning-cell {
  background: var(--success);
  color: #0d1f14;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--success), 0 0 10px rgba(76, 175, 109, 0.7);
  animation: winning-pulse 1.1s ease-in-out infinite;
}
@keyframes winning-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.winner-card-area { text-align: center; }
.winner-card-area.hidden { display: none; }
.winner-card-label { font-size: 15px; font-weight: 700; color: var(--gold); margin: 0 0 10px; }
.winner-card { border-color: var(--gold-dark); }

/* ---- Welcome overlay ---- */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 9, 7, 0.88);
  backdrop-filter: blur(4px);
}
.welcome-overlay.hidden { display: none; }
.welcome-card {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.welcome-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 26px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.welcome-logo span { color: var(--gold); }

.welcome-anim {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  height: 56px;
  align-items: flex-end;
}
.welcome-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #1a1712;
  background: radial-gradient(circle at 32% 28%, #fff6d6, var(--gold) 60%, var(--gold-dark) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  animation: welcome-ball-bounce 1.4s ease-in-out infinite;
}
.welcome-ball-b { animation-delay: 0s; }
.welcome-ball-i { animation-delay: 0.12s; }
.welcome-ball-n { animation-delay: 0.24s; }
.welcome-ball-g { animation-delay: 0.36s; }
.welcome-ball-o { animation-delay: 0.48s; }
@keyframes welcome-ball-bounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-22px); }
  55% { transform: translateY(0); }
}
.welcome-greeting { margin: 0 0 4px; font-size: 15px; }
.welcome-balance { margin: 0 0 16px; color: var(--gold); font-size: 15px; }
.welcome-status {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.welcome-rules { text-align: left; margin-bottom: 20px; }
.welcome-rules h3 { color: var(--gold); font-size: 14px; margin: 0 0 8px; }
.welcome-rules ol { margin: 0 0 10px; padding-left: 20px; font-size: 13px; color: var(--text); }
.welcome-rules li { margin-bottom: 4px; }
.welcome-hint { font-size: 12px; color: var(--text-muted); margin: 0; }
#welcome-enter-btn { width: 100%; }

/* ---- Spectator / late-join wait state ---- */
.spectator-wait {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.spectator-wait.hidden { display: none; }
.spectator-icon { font-size: 26px; margin-bottom: 6px; }
.spectator-wait h3 { margin: 0 0 6px; color: var(--gold); font-size: 14px; }
.spectator-wait p { margin: 0 0 6px; font-size: 11px; color: var(--text); }
.spectator-subtext { color: var(--text-muted) !important; font-size: 10.5px !important; }

.error-banner {
  text-align: center;
  color: var(--danger);
  background: rgba(217,83,79,0.1);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 10px;
  margin-top: 14px;
  font-size: 14px;
}
.error-banner.hidden { display: none; }
.error-banner.banner-success {
  color: var(--success);
  background: rgba(76,175,109,0.1);
  border-color: var(--success);
}

.mini-btn {
  background: var(--gold);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  color: #1a1712;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.mini-btn-outline {
  background: none;
  border: 1px solid var(--gold-dark);
  color: var(--gold);
}
.mini-btn-danger {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.mini-btn-danger:hover { background: rgba(217,83,79,0.12); }
.profile-logout-btn { width: 100%; padding: 10px 12px; }

.prize-line { color: var(--gold); font-size: 13px; margin-top: 4px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 320px;
}
.modal-box h3 { margin: 0 0 10px; color: var(--gold); }
.modal-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.modal-box input, .modal-box select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 8px;
}
.modal-box select { appearance: auto; }
.modal-error { color: var(--danger); font-size: 13px; min-height: 16px; margin: 0 0 8px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Fullscreen board mode: entered when a round goes active/finishes,
   so only the calling board + player cards are on screen (header, nav,
   status strip and the VIP banner are hidden, and the game area expands
   to use the full viewport instead of the normal centered/padded card). ---- */
body.board-fullscreen .topbar,
body.board-fullscreen .main-nav,
body.board-fullscreen #vip-day-banner,
body.board-fullscreen .status-bar {
  display: none !important;
}
body.board-fullscreen .game-main {
  max-width: none;
  padding: 8px;
  min-height: 100vh;
}
body.board-fullscreen #error-banner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: 92vw;
}