: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);
}

/* ---- 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;
}
.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;
}
/* Admin/staff calling pages: the caller board is a wide kiosk-style layout,
   not the narrow centered mobile card view — let it use the full page
   width and sit against the left edge instead of centering. */
.admin-view .game-main {
  max-width: 1300px;
  margin: 0;
}

.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; }
.pattern-counts-row { display: flex; gap: 16px; flex-wrap: wrap; margin: -8px 0 16px; }
.pattern-counts-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pattern-counts-row input { width: 70px; }
.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; }

.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; }

/* ---- Admin "buy card for player" board (admin/game.php): light-blue
   panel of round white number buttons, matching the reference design —
   distinct from the public player-facing navy-purple neon theme above,
   which stays untouched. Higher specificity (.admin-view prefix) lets
   these simply override the shared .card-grid-wrap/.card-cell rules. ---- */
.admin-view .card-picker {
  max-width: none;
  margin: 0 0 14px;
  padding: 14px;
}
.admin-view .picker-layout {
  grid-template-columns: 1fr 230px;
  gap: 18px;
}
.admin-view .card-grid-wrap {
  min-width: 0;
  background: #bfe4ef;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 14px 10px;
}
.admin-view .card-grid {
  grid-template-columns: repeat(15, 1fr);
  gap: 10px 8px;
  max-height: 380px;
  padding: 4px 6px;
}
@media (max-width: 900px) {
  .admin-view .card-grid { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 640px) {
  .admin-view .card-grid { grid-template-columns: repeat(6, 1fr); }
}
.admin-view .card-cell {
  background: #ffffff;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  box-shadow: 0 2px 3px rgba(0,0,0,0.35);
  transition: none;
}
.admin-view .card-cell:hover { background: #eef8fb; border-color: #2a2a2a; transform: translateY(-1px); }
.admin-view .card-cell.taken { opacity: 0.35; cursor: not-allowed; background: #d7d7d7; color: #1a1a1a; box-shadow: none; }
.admin-view .card-cell.mine {
  background: var(--nv-gold, #f2c14e);
  color: #1a1712;
  border-color: #c99a2e;
  box-shadow: none;
}
.admin-view .card-cell.mine:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.admin-view .card-cell.disabled-full { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.admin-view .selected-panel { background: #14101f; border-color: #2a2440; }
.admin-view .selected-panel h3 { color: #f2c14e; }

/* ---- 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; }
/* Admin view: numbers-only badges laid out in a horizontal row, not stacked. */
.admin-view .selected-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-view .selected-card-mini { width: 52px; padding: 6px 4px; }
.admin-view .selected-card-mini-label { margin: 0; font-size: 12px; }
.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; }
.mini-bingo-cell.pattern-hl {
  background: var(--pattern-color, var(--success));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 0 6px 0 var(--pattern-color, var(--success));
}
.mini-bingo-cell.pattern-hl.free { background: var(--pattern-color, var(--success)); color: #fff; }

/* ---- "Winning shape" template preview: small read-only grid shown to
   every player (and the caller) so everyone can see what the currently
   selected pattern looks like before/while the round is played. ---- */
.pattern-template-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--pattern-color, rgba(41,194,209,0.35));
  border-radius: 8px;
  transition: border-color 0.2s;
}
.pattern-template-wrap .pattern-template-caption {
  font-size: 11px;
  font-weight: 700;
  color: var(--pattern-color, var(--text-muted));
}
.pattern-template-grid {
  width: 44px;
}
.pattern-template-grid .mini-bingo-grid { gap: 1px; }
.pattern-template-grid .mini-bingo-cell { font-size: 0; }
.pattern-template-wrap.hidden { display: none; }
.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; }

/* Admin caller board: last-3-calls row, kept on its own line below the
   current-call ball (not merged into that panel) — each call rendered as
   its own separated mini ball, lined up in a row. */
.caller-recent-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 6px;
}
.caller-recent-ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  line-height: 1;
  opacity: 0.7;
}
.caller-recent-ball.latest { opacity: 1; box-shadow: 0 0 8px currentColor, 0 2px 5px rgba(0,0,0,0.25); }
.caller-recent-ball-letter { font-size: 9px; font-weight: 800; }
.caller-recent-ball-number { font-size: 15px; font-weight: 800; }
.caller-recent-ball.col-b { background: var(--nv-b); color: #fff; }
.caller-recent-ball.col-i { background: var(--nv-i); color: #fff; }
.caller-recent-ball.col-n { background: var(--nv-n); color: #fff; }
.caller-recent-ball.col-g { background: var(--nv-g); color: #fff; }
.caller-recent-ball.col-o { background: var(--nv-o); color: #fff; }

.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; }
}

/* ---- Board area: one or two full-size cards side by side ---- */
.my-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 0;
}
.my-cards-wrap.hidden { display: none; }
/* Admin view: numbers-only badges laid out in a horizontal row, not the
   wide 300px full-card blocks used for the interactive player grid. */
.admin-view .my-cards-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}
.admin-view .my-card-block { flex: unset; width: 52px; }

.called-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
  max-height: 90px;
  overflow-y: auto;
}
.called-ball {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--gold-dark);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.called-ball.latest { background: var(--gold); color: #1a1712; }

.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;
}
.bingo-cell.free { background: var(--gold-dark); color: #1a1712; font-weight: 700; }
.bingo-cell.called { background: var(--gold); color: #1a1712; font-weight: 700; }
.bingo-cell.marked { box-shadow: inset 0 0 0 2px var(--success); }
.bingo-cell.not-called { cursor: default; }
.bingo-cell.markable { cursor: pointer; box-shadow: 0 0 0 2px rgba(224, 184, 74, 0.5); animation: markable-pulse 1.4s ease-in-out infinite; }
@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; }
.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; }

.pending-winner-banner {
  text-align: center;
  background: rgba(224, 184, 74, 0.12);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 14px;
}
.pending-winner-banner.hidden { display: none; }
.pending-winner-banner p { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.pending-winner-banner p:last-child { margin-bottom: 0; }
#check-winner-btn:disabled { opacity: 0.6; cursor: default; }
.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: 28px 20px;
  max-width: 340px;
  margin: 0 auto;
}
.spectator-wait.hidden { display: none; }
.spectator-icon { font-size: 34px; margin-bottom: 8px; }
.spectator-wait h3 { margin: 0 0 8px; color: var(--gold); }
.spectator-wait p { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.spectator-subtext { color: var(--text-muted) !important; font-size: 12px !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);
}

/* ---- Caller board: full-screen bingo calling display (admin/staff only) ---- */
.caller-board {
  background: linear-gradient(180deg, #163a6e, #0f2c56);
  border: 1px solid #0a2143;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
}
.caller-left {
  width: 250px;
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.caller-current-call {
  background: #eef0f1;
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.caller-current-call-header {
  background: #2b2b2b;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 10px 6px;
}
.caller-ball-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  gap: 10px;
}
.caller-ball {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5c565, #d99a2b 55%, #a86f16 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 -6px 10px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: caller-ball-pop 0.35s ease;
}
.caller-ball.hidden { display: none; }
@keyframes caller-ball-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.caller-ball-inner {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.caller-ball-letter { font-size: 15px; font-weight: 800; color: #1a1a1a; }
.caller-ball-number { font-size: 30px; font-weight: 800; color: #1a1a1a; }
.caller-call-count {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
  text-align: center;
}
.caller-bet-box {
  background: #0c0c0c;
  border: 2px solid #f2a71b;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #f2a71b;
  letter-spacing: 0.4px;
}
.caller-bet-box .caller-bet-label { color: #e9e9e9; margin-right: 6px; }

.caller-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.caller-grid {
  display: grid;
  grid-template-columns: 56px repeat(15, 1fr);
  gap: 3px;
  background: #000;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 3px;
}
.caller-letter-cell, .caller-num-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-weight: 800;
  font-size: clamp(11px, 1.4vw, 22px);
}
.caller-letter-cell {
  background: linear-gradient(180deg, #e8514c, #c0221f);
  color: #fff;
  font-size: clamp(14px, 1.8vw, 26px);
}
.caller-num-cell {
  background: #6f6f6f;
  color: #1a1a1a;
}
.caller-num-badge {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.caller-num-cell.called .caller-num-badge {
  background: #fff;
  color: #16309e;
  border: 3px solid #f2a71b;
}
.caller-num-cell.current .caller-num-badge {
  background: #fdf3d8;
  color: #16309e;
  border: 3px solid #f2a71b;
  box-shadow: 0 0 0 2px rgba(242,167,27,0.5);
}

.caller-prize {
  text-align: center;
  margin-top: auto;
  padding-top: 6px;
}
.caller-prize-label { color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 15px; }
.caller-prize-amount { color: #fff; font-weight: 800; font-size: 40px; line-height: 1.3; }
.caller-prize-currency { color: #fff; font-size: 16px; }

.caller-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.caller-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(41,194,209,0.4);
  color: #29c2d1;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
}
.caller-btn:hover:not(:disabled) { background: rgba(41,194,209,0.15); }
.caller-btn:disabled {
  color: #7a8a94;
  border-color: rgba(122,138,148,0.3);
  cursor: not-allowed;
}
.caller-check-group { display: inline-flex; gap: 6px; align-items: center; }
.caller-check-input {
  width: 90px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(122,138,148,0.4);
  border-radius: 6px;
  padding: 9px 10px;
  color: #fff;
  font-size: 13px;
}
.caller-pattern-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(41,194,209,0.4);
  border-radius: 6px;
  padding: 9px 10px;
  color: #29c2d1;
  font-weight: 700;
  font-size: 13px;
  appearance: auto;
}
.caller-pattern-select:disabled {
  color: #7a8a94;
  border-color: rgba(122,138,148,0.3);
  cursor: not-allowed;
}

/* ---- "Winning pattern" panel: now its own standalone section (not mixed
   in with the plain action buttons), with a header + live color-coded
   badge, and the picker / H-V-D boxes / Apply button each on their own
   row so nothing gets cramped or missed. ---- */
.pattern-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--pattern-color, rgba(41,194,209,0.35));
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset, 0 0 18px -6px var(--pattern-color, rgba(41,194,209,0.5));
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pattern-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pattern-panel-icon { font-size: 18px; line-height: 1; }
.pattern-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #e9e9e9;
}
.pattern-panel-badge {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pattern-color, #29c2d1);
  border: 1px solid var(--pattern-color, rgba(41,194,209,0.4));
  background: rgba(41,194,209,0.12);
  background: color-mix(in srgb, var(--pattern-color, #29c2d1) 15%, transparent);
  white-space: nowrap;
}
.pattern-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pattern-panel-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #cbd5db;
}
.pattern-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pattern-color, #29c2d1);
  box-shadow: 0 0 6px 1px var(--pattern-color, #29c2d1);
  flex: none;
}
.pattern-panel .caller-pattern-select {
  border-color: var(--pattern-color, rgba(41,194,209,0.4));
  color: var(--pattern-color, #29c2d1);
  transition: border-color 0.2s, color 0.2s;
  min-width: 220px;
  flex: 1;
}
.pattern-panel-counts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.12);
}
.pattern-panel-counts.hidden { display: none; }
.pattern-count-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pattern-count-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: var(--pattern-color, #29c2d1);
  color: #10151a;
  font-weight: 800;
  font-size: 13px;
  cursor: default;
  user-select: none;
}
.pattern-panel-row-apply { justify-content: space-between; }
.pattern-apply-btn {
  border-color: var(--pattern-color, rgba(41,194,209,0.4));
  color: var(--pattern-color, #29c2d1);
}
.pattern-apply-btn:hover:not(:disabled) {
  background: rgba(41,194,209,0.15);
  background: color-mix(in srgb, var(--pattern-color, #29c2d1) 18%, transparent);
}

.caller-fullscreen-btn {
  margin-left: auto;
  background: #ff2d78;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
}
.caller-fullscreen-btn:hover { background: #e02268; }

/* ---- Kiosk / fullscreen mode (admin caller board on a projector/TV) ----
   Toggled by game.js on `document.fullscreenchange`. Hides the branding
   header, back-link, and free-play hint that only matter while browsing
   the admin panel normally, and lets the board use the full screen width
   instead of staying capped at the ordinary page's 1300px max-width.
   Every size below that used to be a fixed px value is now a vh-based
   clamp() instead, so the whole board shrinks or grows to fit whatever
   screen height is actually available — the goal is that nothing needs
   scrolling to be seen. overflow-y:auto is still kept as a last-resort
   safety net for extreme aspect ratios, not as the primary fix. */
body.is-fullscreen {
  overflow-y: auto;
  min-height: 100vh;
}
body.is-fullscreen .topbar,
body.is-fullscreen .admin-game-back,
body.is-fullscreen #admin-free-hint {
  display: none;
}
.admin-view.is-fullscreen .game-main {
  max-width: 100%;
  padding: 0 16px 16px;
}

/* Compact the controls/pattern strip above the board so more height is
   left for the board itself. */
body.is-fullscreen .caller-controls { margin: 8px 0; gap: 6px; }
body.is-fullscreen .caller-btn { padding: 6px 12px; font-size: 12px; }
body.is-fullscreen .pattern-panel { padding: 8px 12px; margin: 0 0 8px; gap: 6px; }
body.is-fullscreen .pattern-panel-title { font-size: 12px; }
body.is-fullscreen .pattern-panel-row { gap: 6px; }
body.is-fullscreen .pattern-template-wrap { padding: 3px 8px; margin: 2px 0; }

body.is-fullscreen .caller-board {
  padding: 8px;
  gap: 8px;
  margin-bottom: 0;
}
body.is-fullscreen .caller-left {
  width: clamp(140px, 16vw, 220px);
  flex: 0 0 clamp(140px, 16vw, 220px);
  gap: clamp(4px, 1vh, 10px);
}
body.is-fullscreen .caller-current-call {
  min-height: clamp(80px, 20vh, 150px);
}
body.is-fullscreen .caller-current-call-header {
  font-size: clamp(9px, 1.6vh, 14px);
  padding: clamp(3px, 0.8vh, 8px) 6px;
}
body.is-fullscreen .caller-ball-stage {
  padding: clamp(2px, 0.8vh, 10px) 0;
  gap: clamp(3px, 0.8vh, 8px);
}
body.is-fullscreen .caller-ball {
  width: clamp(50px, 12vh, 100px);
  height: clamp(50px, 12vh, 100px);
}
body.is-fullscreen .caller-ball-inner { width: 74%; height: 74%; }
body.is-fullscreen .caller-ball-letter { font-size: clamp(8px, 1.5vh, 14px); }
body.is-fullscreen .caller-ball-number { font-size: clamp(15px, 3.2vh, 26px); }
body.is-fullscreen .caller-call-count { font-size: clamp(9px, 1.5vh, 14px); }
body.is-fullscreen .caller-recent-row { padding: clamp(3px, 0.8vh, 8px) 4px; gap: clamp(4px, 1vw, 10px); }
body.is-fullscreen .caller-recent-ball {
  width: clamp(24px, 5vh, 40px);
  height: clamp(24px, 5vh, 40px);
}
body.is-fullscreen .caller-recent-ball-letter { font-size: clamp(6px, 1.1vh, 9px); }
body.is-fullscreen .caller-recent-ball-number { font-size: clamp(10px, 2vh, 15px); }
body.is-fullscreen .caller-bet-box {
  padding: clamp(4px, 1vh, 10px) 8px;
  font-size: clamp(10px, 1.6vh, 14px);
}

/* The number grid normally sizes each cell as a square driven by column
   WIDTH (aspect-ratio: 1), which on a wide screen made cells tall enough
   that the 5-row grid alone could exceed the visible height. In fullscreen
   the row height is capped by vh instead, and the aspect-ratio dropped, so
   width and height scale independently and the grid always fits. */
body.is-fullscreen .caller-grid {
  flex: 1;
  gap: 2px;
  padding: 2px;
  grid-template-columns: 34px repeat(15, 1fr);
  grid-auto-rows: clamp(20px, 6.2vh, 58px);
}
body.is-fullscreen .caller-letter-cell,
body.is-fullscreen .caller-num-cell {
  aspect-ratio: auto;
}
body.is-fullscreen .caller-letter-cell { font-size: clamp(9px, 1.8vh, 20px); }
body.is-fullscreen .caller-num-cell { font-size: clamp(8px, 1.5vh, 17px); }
body.is-fullscreen .caller-num-cell .caller-num-badge { border-width: 2px; }

body.is-fullscreen .caller-prize { padding-top: clamp(2px, 0.6vh, 6px); }
body.is-fullscreen .caller-prize-label { font-size: clamp(9px, 1.3vh, 13px); }
body.is-fullscreen .caller-prize-amount { font-size: clamp(18px, 4vh, 34px); line-height: 1.15; }
body.is-fullscreen .caller-prize-currency { font-size: clamp(9px, 1.3vh, 14px); }

@media (max-width: 900px) {
  .caller-board { flex-direction: column; }
  .caller-left { width: 100%; flex: unset; flex-direction: row; }
  .caller-current-call { min-height: 170px; }
  .caller-grid { grid-template-columns: 34px repeat(15, 1fr); }
}
@media (max-width: 640px) {
  .caller-left { flex-direction: column; }
  .caller-ball { width: 100px; height: 100px; }
  .caller-ball-inner { width: 74px; height: 74px; }
  .caller-ball-number { font-size: 22px; }
  .caller-prize-amount { font-size: 30px; }
}

.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);
}

.admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 12px 16px;
}
.admin-controls .mini-btn { padding: 8px 14px; }
.admin-controls .mini-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-check-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.admin-check-input {
  width: 90px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
}
.modal-box-wide { max-width: 380px; }
#check-card-display { margin: 10px 0; }
#check-card-message { font-weight: 700; }

.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; }

/* ---- Shuffle overlay: bouncing ball cage shown while numbers reshuffle ---- */
.shuffle-overlay { z-index: 60; background: rgba(0,0,0,0.75); }
.shuffle-modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.shuffle-cage {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 6px solid #f2a71b;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0.45));
  box-shadow: 0 0 0 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: shuffle-cage-spin 1.4s linear infinite;
}
.shuffle-ball {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5c565, #d99a2b 55%, #a86f16 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 9px;
  color: #1a1a1a;
  animation-name: shuffle-bounce;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shuffle-cage-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shuffle-bounce {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--tx, 20px), var(--ty, 20px)); }
}
.shuffle-caption {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-align: center;
}