[data-theme="dark"]{--bg:#0b0f14;--card:#151d27;--line:#243041;--muted:#8b9bb0;--green:#22c55e;--gold:#f59e0b;--blue:#3b82f6;--ball-bg:#1a2430;--ball-border:#2c3b4f;--ball-called-bg:#22c55e;--ball-called-color:#052e16;--bingo-bg:#111821;--bingo-border:#243041;--td-bg:#1a2430;--td-border:transparent;--td-marked-bg:#22c55e;--td-marked-color:#052e16;--winner-bg:#151d27;--winner-color:#e8eef6;--overlay-bg:rgba(0,0,0,.75);--toast-bg:#1a2430;--toast-color:#e8eef6;--switch-bg:#111821;--switch-border:#243041;--switch-color:#e8eef6;--leave-bg:rgba(239,68,68,.12);--leave-border:rgba(239,68,68,.4);--leave-color:#fca5a5;--text-color:#e8eef6}
[data-theme="light"]{--bg:#f1f5f9;--card:#ffffff;--line:#e2e8f0;--muted:#64748b;--green:#16a34a;--gold:#d97706;--blue:#3b82f6;--ball-bg:#f1f5f9;--ball-border:#cbd5e1;--ball-called-bg:#16a34a;--ball-called-color:#052e16;--bingo-bg:#ffffff;--bingo-border:#e2e8f0;--td-bg:#f8fafc;--td-border:transparent;--td-marked-bg:#16a34a;--td-marked-color:#052e16;--winner-bg:#ffffff;--winner-color:#0f172a;--overlay-bg:rgba(241,245,249,.92);--toast-bg:#1e293b;--toast-color:#fff;--switch-bg:#f8fafc;--switch-border:#e2e8f0;--switch-color:#0f172a;--leave-bg:#fef2f2;--leave-border:#fca5a5;--leave-color:#b91c1c;--text-color:#0f172a}
[data-theme="violet"]{--bg:#5b21b6;--card:rgba(255,255,255,0.14);--line:rgba(255,255,255,0.2);--muted:rgba(255,255,255,0.72);--green:#4ade80;--gold:#facc15;--blue:#a78bfa;--ball-bg:rgba(255,255,255,0.12);--ball-border:rgba(255,255,255,0.25);--ball-called-bg:#4ade80;--ball-called-color:#052e16;--bingo-bg:rgba(255,255,255,0.12);--bingo-border:rgba(255,255,255,0.22);--td-bg:rgba(255,255,255,0.1);--td-border:transparent;--td-marked-bg:#4ade80;--td-marked-color:#052e16;--winner-bg:rgba(255,255,255,0.16);--winner-color:#fff;--overlay-bg:rgba(45,15,110,0.75);--toast-bg:rgba(30,10,80,0.95);--toast-color:#fff;--switch-bg:rgba(255,255,255,0.12);--switch-border:rgba(255,255,255,0.22);--switch-color:#fff;--leave-bg:rgba(251,113,133,0.18);--leave-border:rgba(251,113,133,0.45);--leave-color:#fecdd3;--text-color:#ffffff}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;height:100vh;height:100svh;background:var(--bg);color:var(--text-color);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;display:flex;flex-direction:column}
header{flex:0 0 auto;height:62px;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.head-left{display:flex;align-items:center;gap:12px;color:var(--text-color)}
.head-left small{color:var(--muted)}
.live{color:var(--green);font-weight:800}
.live i{display:inline-block;width:9px;height:9px;background:var(--green);border-radius:50%;margin-right:5px}
.prize-block{text-align:right;line-height:1.3}
.prize-block small{display:block;color:var(--muted);font-size:10px;letter-spacing:.06em}
.prize-block b{color:var(--green);font-size:16px}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.status{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.stat-block{flex:0 0 auto;color:var(--text-color)}
.stat-block.center{flex:1;display:flex;justify-content:center}
.stat-block.center strong{display:block;font-size:42px;line-height:1;color:var(--gold);min-width:96px;text-align:center}
.stat-block.count strong{display:block;font-size:16px;font-weight:800;line-height:1;color:var(--blue);min-width:auto;text-align:right}
.last-called{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.lc-label{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.lc-balls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.lc-balls span{width:30px;height:30px;border-radius:50%;background:var(--ball-bg);border:1px solid var(--ball-border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:var(--text-color)}
.lc-balls span:last-child:not(.empty){background:var(--green);color:#071a0e;border-color:#7effaf;transform:scale(1.12)}
.lc-balls span.empty{color:var(--muted);background:transparent;border-style:dashed}
.game-layout{flex:1;min-height:0;display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;padding:12px}
.number-board,.card-side{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.number-board h3{margin:0 0 8px;flex:0 0 auto;text-align:center;color:var(--text-color)}
.numbers{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto repeat(15,minmax(0,1fr));gap:4px}
.board-head{text-align:center;color:var(--gold);font-weight:900;padding:2px 0}
.ball{min-height:0;width:100%;height:100%;border:1px solid var(--ball-border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--ball-bg);font-size:clamp(9px,1.7vw,15px);color:var(--text-color);transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease}
.ball.called{background:var(--ball-called-bg);color:var(--ball-called-color);border-color:#86efac;transform:scale(1.02)}
.card-side-head{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:6px;flex-wrap:wrap;color:var(--text-color)}
.card-side-head h3{display:none;margin:0}
.controls{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.switch-pill{display:inline-flex;align-items:center;gap:4px;background:var(--switch-bg);border:1px solid var(--switch-border);border-radius:999px;padding:4px 9px;cursor:pointer;color:var(--switch-color);font:inherit;font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1.2}
/* No green circle dots on Blink / Auto */
.switch-pill .dot{display:none !important}
.switch-pill.leave{background:var(--leave-bg);border-color:var(--leave-border);color:var(--leave-color);padding:4px 9px}
.switch-pill.leave:active{background:#4a1a1a}
.switch-pill.icon-only{padding:4px 7px;gap:0;font-size:13px}
/* Auto: green = on, red = off */
.switch-pill.auto-toggle{justify-content:center;padding:4px 10px}
.switch-pill.auto-toggle.on{background:rgba(34,197,94,.22)!important;border-color:rgba(34,197,94,.7)!important;color:#86efac!important}
.switch-pill.auto-toggle.off{background:rgba(239,68,68,.2)!important;border-color:rgba(239,68,68,.6)!important;color:#fca5a5!important}
/* Blink: green when on; neutral when off */
.switch-pill.blink-toggle.on{background:rgba(34,197,94,.22)!important;border-color:rgba(34,197,94,.7)!important;color:#86efac!important}
.switch-pill.blink-toggle:not(.on){background:var(--switch-bg);border-color:var(--switch-border);color:var(--switch-color)}
.switch-pill.show-all-btn{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.45);color:#93c5fd;padding:4px 9px}
.color-picker-btn .color-dot{width:12px;height:12px}
/* Default in-game cards: sized so ~2 cards fit; scroll for more */
.cards{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;display:grid;grid-template-columns:1fr;gap:8px;align-content:start}
.bingo{background:var(--bingo-bg);border:1px solid var(--bingo-border);border-radius:10px;padding:6px;color:var(--text-color)}
.ct{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px}
.ct small{color:var(--muted)}
.bingo table{width:100%;border-collapse:separate;border-spacing:2px}
.bingo th{color:var(--gold);font-size:13px;padding:0}
.bingo td{height:32px;text-align:center;background:var(--td-bg);border:1px solid var(--td-border);border-radius:5px;font-weight:800;font-size:13px;cursor:pointer;color:var(--text-color)}
.bingo td.marked {
  background:var(--td-marked-bg, #00d26a);
  color:#fff;
  border-color:var(--td-marked-bg, #00d26a);
  transition: background 0.2s, border-color 0.2s;
}
.bingo td.free{font-size:10px}
.bingo td.blink{animation:blink 1s steps(2,start) infinite;box-shadow:0 0 0 2px var(--gold)}
@keyframes blink{50%{opacity:.25;transform:scale(.94);background:#6d5110}}
.bingo button{width:100%;border:0;border-radius:8px;background:var(--gold);color:#111;font-weight:900;padding:8px;margin-top:5px;cursor:pointer;font-size:13px}
.bingo button:disabled{background:#444;color:#aaa}
/* Show-all modal: bottom sheet; header + called numbers stay visible above */
.all-cards-overlay{
  display:none;position:fixed;left:0;right:0;bottom:0;top:0;
  z-index:25;pointer-events:none;
}
.all-cards-overlay.show{display:block;pointer-events:auto;}
.all-cards-overlay::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;
  background:rgba(0,0,0,.45);
}
.all-cards-panel{
  position:absolute;left:0;right:0;bottom:0;
  /* A bit taller: leave only header + status strip at top */
  top:clamp(100px,22vh,160px);
  background:var(--card);border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;min-height:0;
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
  padding:10px 12px 16px;
}
.all-cards-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px;color:var(--text-color);
}
.all-cards-grid{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;
}
.all-cards-grid .bingo{padding:5px}
.all-cards-grid .bingo th{font-size:11px}
.all-cards-grid .bingo td{height:26px;font-size:11px}
.all-cards-grid .bingo button{padding:6px;font-size:11px;margin-top:4px}
@media(max-width:520px){
  .all-cards-grid{grid-template-columns:repeat(2,1fr);}
  .all-cards-grid .bingo td{height:28px;font-size:12px}
}
.overlay{display:none;position:fixed;inset:0;background:var(--overlay-bg);z-index:20;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.winner{max-width:440px;width:100%;background:var(--winner-bg);border-radius:18px;padding:20px;text-align:center;color:var(--winner-color)}
.winner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:15px 0}
.winner-grid span{padding:12px 2px;background:var(--td-bg);border-radius:6px;color:var(--text-color)}
.winner-grid .win{background:var(--green);color:#071a0e;font-weight:bold;outline:2px solid #b8ffca}
.returning{color:var(--muted);font-size:13px}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120px);background:var(--toast-bg);padding:12px 16px;border-radius:9px;transition:.2s;z-index:30;color:var(--toast-color)}
.toast.show{transform:translate(-50%,0)}
@media(max-width:760px){
  header{height:auto;min-height:56px;font-size:12px}
  .status{gap:8px;padding:8px}
  .stat-block.center strong{font-size:32px;min-width:70px}
  .stat-block.count strong{font-size:13px}
  .lc-balls span{width:24px;height:24px;font-size:9px}
  .game-layout{grid-template-columns:38% 62%;gap:7px;padding:7px}
  .number-board,.card-side{padding:6px;border-radius:8px}
  .cards{grid-template-columns:1fr;gap:6px}
  .bingo td{height:30px;font-size:12px}
  .bingo th{font-size:12px}
  .card-side h3{display:none}
  .switch-pill{font-size:9px;padding:3px 7px}
}
/* Color Picker Styles */
.color-picker-btn {
  position:relative;
}
.color-picker-btn .color-dot {
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-block;
  border:2px solid var(--card);
  box-shadow:0 0 4px rgba(0,0,0,0.3);
  flex:0 0 auto;
}
.color-picker-modal {
  max-width:340px;
  width:100%;
  background:var(--card);
  border-radius:18px;
  padding:24px;
  text-align:center;
  border:1px solid var(--line);
  color:var(--text-color);
}
.color-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:10px 0;
}
.color-option {
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  border:3px solid transparent;
  cursor:pointer;
  transition:all 0.2s ease;
  position:relative;
}
.color-option:hover {
  transform:scale(1.1);
}
.color-option.active {
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(230,161,0,0.4);
}
.color-option.active::after {
  content:'✓';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  font-size:18px;
  font-weight:bold;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
}

/* Override for light theme */
[data-theme="light"] .color-option.active {
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(196,138,0,0.3);
}
[data-theme="light"] .color-picker-modal {
  border-color:var(--line);
}

/* violet playboard — classic/instant/special inherit parent theme vars */
html[data-theme="violet"] body.game-page,
html[data-theme="violet"] .game-layout {
  /* uses CSS variables from index theme */
}

html[data-theme="violet"] body{
  background:
    radial-gradient(ellipse 120% 80% at 10% -10%, #a855f7 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 100% 20%, #6366f1 0%, transparent 50%),
    linear-gradient(165deg, #6d28d9 0%, #5b21b6 40%, #4c1d95 100%) !important;
  background-attachment:fixed;
}
html[data-theme="violet"] header,
html[data-theme="violet"] .status,
html[data-theme="violet"] .number-board,
html[data-theme="violet"] .card-side{
  background:rgba(255,255,255,0.12)!important;
  backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,0.2)!important;
}
html[data-theme="violet"] .bingo button{
  background:linear-gradient(180deg,#fde047,#eab308)!important;
  color:#1e1035!important;
}

html[data-theme="dark"] body{
  background:#0b0f14 !important;
  color:#e8eef6 !important;
}
html[data-theme="light"] body{
  background:#f1f5f9 !important;
  color:#0f172a !important;
}
html[data-theme="light"] header,
html[data-theme="light"] .status,
html[data-theme="light"] .number-board,
html[data-theme="light"] .card-side{
  background:#ffffff !important;
  border-color:#e2e8f0 !important;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}

html[data-theme="violet"] .overlay{
  background:rgba(45,15,110,0.75) !important;
}
html[data-theme="violet"] .winner{
  background:rgba(255,255,255,0.16) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(16px);
}
html[data-theme="dark"] .winner{ background:#151d27 !important; color:#e8eef6 !important; }
html[data-theme="light"] .winner{ background:#fff !important; color:#0f172a !important; }
html[data-theme="violet"] .toast{
  background:rgba(30,10,80,0.95) !important;
  color:#fff !important;
}

.winner-timer-wrap{margin-top:16px;width:100%;}
.winner-timer-bar{height:6px;border-radius:999px;background:rgba(127,127,127,.25);overflow:hidden;}
.winner-timer-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#facc15,#22c55e);transform-origin:left center;}
.winner .returning{margin:8px 0 0;font-size:12px;}
/* Bolder, clearer 1–75 board */
.ball{font-weight:900!important;font-size:clamp(11px,2vw,16px)!important;}
.board-head{font-weight:900!important;font-size:14px!important;letter-spacing:.04em;}
.number-board h3{font-weight:900;letter-spacing:.12em;}
.stat-block.center strong{font-weight:900;}

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");}
/* ==========================================================================
   Kal Bingo "Ink & Saffron" (v1) — overrides for the in-game screen
   ========================================================================== */
[data-theme="dark"]{--bg:#161B3D;--card:#1F2756;--line:#2E3874;--muted:#A3ABD6;--green:#1FC8A6;--gold:#F6B93B;--blue:#8E9BFF;--ball-bg:#1A2150;--ball-border:#323C7C;--ball-called-bg:#F6B93B;--ball-called-color:#231800;--bingo-bg:#1F2756;--bingo-border:#2E3874;--td-bg:#28316A;--td-marked-bg:#1FC8A6;--td-marked-color:#0E1530;--winner-bg:#1F2756;--winner-color:#F1F3FF;--overlay-bg:rgba(12,14,38,.8);--toast-bg:#28316A;--toast-color:#F1F3FF;--switch-bg:#1A2150;--switch-border:#323C7C;--switch-color:#F1F3FF;--leave-bg:rgba(255,107,94,.14);--leave-border:rgba(255,107,94,.5);--leave-color:#FFB4AC;--text-color:#F1F3FF}
[data-theme="light"]{--bg:#ECEEF9;--card:#FFFFFF;--line:#DCE0F3;--muted:#5A628F;--green:#0E9E80;--gold:#C98A0E;--blue:#3F4FD8;--ball-bg:#F3F4FC;--ball-border:#D3D7F0;--ball-called-bg:#F6B93B;--ball-called-color:#231800;--bingo-bg:#FFFFFF;--bingo-border:#DCE0F3;--td-bg:#F3F4FC;--td-marked-bg:#12B394;--td-marked-color:#06231C;--text-color:#1A1F45}
:root{--kb-b:#F6B93B;--kb-i:#1FC8A6;--kb-n:#FF6B5E;--kb-g:#8E9BFF;--kb-o:#FF8FC7}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Ethiopic",sans-serif}
header{position:relative;border-bottom:none;padding-bottom:16px;height:70px;background:#1C2252;color:#F1F3FF}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'%3E%3Crect width='36' height='10' fill='%23161B3D'/%3E%3Cpath d='M0 5 L5 0 L10 5 L5 10Z' fill='%23F6B93B'/%3E%3Cpath d='M12 5 L17 0 L22 5 L17 10Z' fill='%231FC8A6'/%3E%3Cpath d='M24 5 L29 0 L34 5 L29 10Z' fill='%23FF6B5E'/%3E%3C/svg%3E") repeat-x 0 0/29px 8px}
header .head-left, header .head-left small{color:#F1F3FF}
.prize-block small{color:#AEB6E6}
.prize-block b{color:#F6B93B;font-size:19px;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.stat-block.center strong{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:var(--gold)}
.status{border-bottom:none}
.number-board,.card-side{border-radius:18px}
.numbers{gap:3px}
.ball{border-radius:50%;aspect-ratio:auto}
.numbers > .board-head{font-family:"Bricolage Grotesque",system-ui,sans-serif;border-radius:8px;color:#161B3D;font-size:13px}
.numbers > :nth-child(5n+1){--kc:var(--kb-b)}
.numbers > :nth-child(5n+2){--kc:var(--kb-i)}
.numbers > :nth-child(5n+3){--kc:var(--kb-n)}
.numbers > :nth-child(5n+4){--kc:var(--kb-g)}
.numbers > :nth-child(5n+5){--kc:var(--kb-o)}
.numbers > .board-head{background:var(--kc)}
.ball.called{background:var(--kc,var(--ball-called-bg));color:#161B3D;border-color:transparent;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.lc-balls span{background:var(--ball-bg)}
.lc-balls span:last-child:not(.empty){background:#F6B93B;color:#231800;border-color:#FFE19A}
.bingo{border-radius:14px}
.bingo th{font-family:"Bricolage Grotesque",system-ui,sans-serif}
.bingo th:nth-child(1){color:var(--kb-b)}.bingo th:nth-child(2){color:var(--kb-i)}.bingo th:nth-child(3){color:var(--kb-n)}.bingo th:nth-child(4){color:var(--kb-g)}.bingo th:nth-child(5){color:var(--kb-o)}
.bingo td{border-radius:8px}
.switch-pill.show-all-btn{background:rgba(142,155,255,.15);border-color:rgba(142,155,255,.5);color:#C8CFFF}