*{box-sizing:border-box}body{margin:0;font-family:Arial;background:#eef4f8;color:#172333}body.dark{background:#101827;color:#f5f7fb}button{cursor:pointer}header{background:linear-gradient(100deg,#1555d5,#842ee8);color:white;padding:15px 18px;display:flex;justify-content:space-between;align-items:center}header b{font-size:23px}header small{display:block;opacity:.8}header button{background:#ffffff22;color:white;border:1px solid #ffffff55;border-radius:10px;padding:9px}main{max-width:1150px;margin:auto;padding:14px}.hidden{display:none}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}.stats>div{background:#34485e;color:white;border-radius:13px;padding:10px;text-align:center}.stats>div:first-child{background:#ffc928;color:#172333}.stats>div:last-child{background:#18ad57}.hero,.panel{background:white;border-radius:18px;padding:14px;box-shadow:0 4px 15px #0002}.dark .hero,.dark .panel{background:#1d2938}.hero{text-align:center}.logo{font-size:30px;font-weight:1000;letter-spacing:9px;background:linear-gradient(90deg,#2867ee,#e53935,#e8ad0a,#18ad57,#893cdc);color:transparent;background-clip:text}.hero p,p{color:#718090}.picker{display:grid;grid-template-columns:1.5fr .9fr;gap:14px;margin-top:14px}.tickets{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;max-height:530px;overflow:auto;padding:8px;background:#eef4f8;border-radius:12px}.dark .tickets{background:#101827}.ticket{padding:10px 3px;border:1px solid #d5dfe8;border-radius:8px;background:white;font-weight:900}.dark .ticket{background:#263447;color:white}.ticket.selected{background:#18ad57;color:white}.ticket.sold{opacity:.3}.empty{min-height:300px;display:flex;align-items:center;justify-content:center;border:2px dashed #b7c4d0;border-radius:14px;color:#718090}.preview{border:3px solid #2867ee;border-radius:14px;padding:8px}.title{display:flex;justify-content:space-between;font-weight:900}.bingo,.card{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.head b{color:white;text-align:center;padding:6px;border-radius:4px}.head b:nth-child(1){background:#2867ee}.head b:nth-child(2){background:#e53935}.head b:nth-child(3){background:#e8ad0a}.head b:nth-child(4){background:#18ad57}.head b:nth-child(5){background:#893cdc}.cell{background:#e9eff4;padding:9px 2px;text-align:center;font-weight:900;border-radius:4px}.dark .cell{background:#29384b}.free,.marked{background:#18ad57!important;color:white}.primary{width:100%;margin-top:12px;padding:14px;border:0;border-radius:12px;background:#2867ee;color:white;font-weight:900}.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.slot{background:white;border:2px dashed #b7c4d0;border-radius:14px;padding:8px;min-height:160px;text-align:center}.dark .slot{background:#1d2938}.slot .mini .cell{padding:5px;font-size:10px}.game{display:grid;grid-template-columns:320px 1fr;gap:14px}.letters{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.letters b{color:white;text-align:center;padding:8px;border-radius:4px}.letters b:nth-child(1){background:#2867ee}.letters b:nth-child(2){background:#e53935}.letters b:nth-child(3){background:#e8ad0a}.letters b:nth-child(4){background:#18ad57}.letters b:nth-child(5){background:#893cdc}.board{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:4px}.board div{background:#eef4f8;padding:8px 2px;text-align:center;font-weight:900;border-radius:4px}.dark .board div{background:#29384b}.board .called{background:#18ad57;color:white}.board .latest{background:#ffc928;color:#172333;outline:3px solid #e59f00}.play{text-align:center}.ball{width:145px;height:145px;border-radius:50%;margin:4px auto 8px;display:flex;align-items:center;justify-content:center;color:white;font-size:37px;font-weight:1000;border:8px solid white;box-shadow:0 5px 16px #0004}.green{background:#18ad57}.red{background:#e53935}.play>p{font-size:12px}.recent{min-height:34px;margin:8px}.recent span{display:inline-block;background:#e53935;color:white;border-radius:50%;padding:8px;margin:2px;font-size:12px;font-weight:900}.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.pcard{background:white;padding:10px;border-radius:15px;box-shadow:0 4px 15px #0002;width:310px}.dark .pcard{background:#1d2938}.win{background:#2867ee;color:white;border-radius:12px;padding:13px;font-size:25px;font-weight:1000;margin:10px}.hidden{display:none!important}@media(max-width:800px){.picker,.game{grid-template-columns:1fr}.tickets{grid-template-columns:repeat(5,1fr)}.slots{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
#slot3{display:none}

/* Latest called number on the master board */
.board .latest{
  background:#ffc928 !important;
  color:#172333 !important;
  outline:3px solid #e59f00;
}

/* Ticket buying flow: selected cards remain visible in the bottom tray. */
.ticket-picker,.ticket-tray{background:#dce6ef;border:1px solid #aebdca;border-radius:28px;padding:18px;box-shadow:inset 0 1px #fff8}.dark .ticket-picker,.dark .ticket-tray{background:#182536;border-color:#3a4b5e}.picker-heading,.tray-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px;font-size:17px}.picker-heading span,.tray-heading span{font-size:12px;font-weight:700;color:#718090}.ticket-picker .tickets{max-height:465px;grid-template-columns:repeat(8,minmax(0,1fr));gap:11px;padding:0;background:transparent}.ticket-picker .ticket{min-height:40px;padding:7px 3px;border:1px solid #ced8e1;border-radius:10px;box-shadow:0 2px 5px #263a4a20;font-size:16px;color:#172333}.ticket-picker .ticket.sold{background:#d4dee7;color:#9aa8b5;opacity:.72;box-shadow:none}.ticket-picker .ticket.selected{background:#12b95c;color:white;border-color:#ffe060;outline:2px solid #ffd342;box-shadow:0 2px 6px #08783466}.ticket-tray{margin-top:14px;background:#fff;border-radius:20px}.dark .ticket-tray{background:#1d2938}.tray-heading{margin-bottom:10px}.slots{display:flex;gap:13px;align-items:stretch;justify-content:flex-start}.slot{position:relative;width:240px;min-height:175px;padding:9px;background:#f7f9fc;border:2px dashed #9facb9;border-radius:18px;text-align:center}.slot.chosen{border:0;background:white;box-shadow:0 4px 14px #24344728;padding:7px}.dark .slot.chosen{background:#263447}.empty-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a4b4}.empty-slot strong{font-size:35px;line-height:1}.empty-slot small{margin-top:10px;font-size:11px;font-weight:900;letter-spacing:.6px}.slot .preview{border:0;padding:0;text-align:left}.slot .title{font-size:12px;color:#2867ee;padding:0 2px 3px}.slot .head b{padding:3px;font-size:10px}.slot .card{gap:2px}.slot .cell{border:1px solid #d5dfe8;padding:4px 1px;font-size:12px;background:#f3f6f8;color:#172333}.slot .free{background:#ffc928!important;color:#172333}.remove-ticket{position:absolute;z-index:1;right:-8px;top:-10px;width:29px;height:29px;border:0;border-radius:50%;background:#ee3830;color:#fff;font-size:22px;line-height:20px;box-shadow:0 2px 5px #0004}.ticket-tray .primary{max-width:340px;margin:15px 0 0}.dark .ticket-picker .ticket{color:white}.dark .slot .cell{color:white}
@media(max-width:800px){main{padding:0}.ticket-picker{border-radius:0;padding:13px 18px}.ticket-picker .tickets{grid-template-columns:repeat(8,minmax(32px,1fr));gap:8px;max-height:520px}.ticket-picker .ticket{min-height:38px;font-size:15px}.ticket-tray{position:sticky;bottom:0;margin:0;border-radius:18px 18px 0 0;padding:13px 18px;box-shadow:0 -5px 20px #17233330}.tray-heading span{display:none}.slots{gap:9px}.slot{width:calc(50vw - 23px);min-height:155px}.slot .cell{padding:3px 1px;font-size:11px}.ticket-tray .primary{margin:11px 0 0;max-width:none}}

/* Live game: keep the called board and the player's ticket visible together. */
#game .stats{margin-bottom:0;border-radius:0}#game .game{min-height:calc(100vh - 150px);grid-template-columns:218px minmax(0,1fr);gap:0;background:linear-gradient(135deg,#edf3f8,#dfe8f1)}.dark #game .game{background:#101827}#game .game>.panel{border-radius:0;background:#f8fafc;box-shadow:2px 0 9px #1d304218;padding:6px}#game .game>.panel h2{display:none}#game .letters{gap:3px}#game .letters b{padding:8px 1px;font-style:italic}#game .board{gap:3px}#game .board div{padding:7px 1px;border:1px solid #ccd6df;border-radius:2px;background:#fff;font-size:16px}#game .play{position:relative;padding:230px 18px 24px;text-align:center;overflow:hidden}#game .ball{position:absolute;top:18px;right:24px;width:125px;height:125px;margin:0;font-size:31px;border-width:6px}#game #msg{position:absolute;top:155px;right:20px;left:20px;color:#536779}#game .recent{position:absolute;top:18px;left:20px;right:160px;margin:0;min-height:48px}#game .cards{flex-direction:column;align-items:center;justify-content:flex-start;gap:15px}.pcard{width:min(350px,100%);padding:16px;border-radius:24px;background:white;box-shadow:0 9px 24px #26394a38;overflow:hidden}.pcard .preview{border:0;padding:0}.pcard .title{padding:0 5px 5px;color:#2867ee}.pcard .head b{padding:7px}.pcard .cell{min-height:45px;padding:9px 2px;border:1px solid #c7d2dc;font-size:18px;box-shadow:inset 0 -2px #d9e1e8}.pcard footer{margin:15px -16px -16px;padding:10px 17px;background:#2867ee;color:#fff;text-align:right;font-size:31px;font-weight:1000;font-style:italic}.pcard footer small{font-size:13px;font-style:normal}.card-loading{margin-top:120px;padding:18px;border-radius:14px;background:#fff;color:#718090;font-weight:700}.dark .pcard{background:#263447}.dark #game .game>.panel{background:#1d2938}.dark #game .board div{background:#263447}.dark .pcard .cell{border-color:#3f5266}#game .play>p{display:none}
@media(max-width:800px){#game .stats{grid-template-columns:repeat(4,1fr);gap:0}#game .stats>div{border-radius:0;padding:9px 2px;font-size:11px}#game .game{grid-template-columns:calc(37vw) minmax(0,1fr);min-height:calc(100vh - 130px)}#game .game>.panel{padding:5px}#game .letters b{padding:6px 1px;font-size:13px}#game .board{gap:3px}#game .board div{padding:6px 0;font-size:15px}#game .play{padding:220px 9px 15px}#game .ball{top:12px;right:14px;width:108px;height:108px;font-size:25px}#game #msg{top:130px;font-size:12px;left:6px;right:6px}#game .recent{left:8px;right:120px;top:14px}.pcard{padding:10px;border-radius:18px}.pcard .head b{padding:4px;font-size:11px}.pcard .cell{min-height:42px;padding:7px 1px;font-size:17px}.pcard footer{margin:10px -10px -10px;padding:8px 12px;font-size:25px}}

/* These selectors override the white board-cell rule in the live layout. */
#game .board div.called{background:#18ad57!important;color:#fff!important;border-color:#0d8740!important}
#game .board div.latest{background:#ffc928!important;color:#172333!important;border-color:#e59f00!important;outline:3px solid #e59f00}
#game .win:not(.hidden){position:fixed;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 36px));margin:0;padding:28px 20px;background:linear-gradient(135deg,#1764ed,#7a2be2);box-shadow:0 14px 50px #0a1b3690;font-size:30px;text-align:center;border:3px solid #ffd342}

/* Zhaan Bingo palette: inspired by the supplied magenta, violet, gold and blue logo. */
body{background:radial-gradient(circle at 75% 12%,#ffe984 0,#f8c8e8 24%,#e7d8ff 53%,#e7f3ff 100%)}
header{background:linear-gradient(105deg,#8700ad,#ef008c 52%,#6422dc);box-shadow:0 3px 13px #4c00636b}.brand{display:flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:cover;border-radius:50%;border:2px solid #ffd744;box-shadow:0 2px 7px #26002a88}header button{background:#ffffff2b;border-color:#ffd3f4}.stats>div{background:linear-gradient(145deg,#6620a3,#37245c)}.stats>div:first-child{background:linear-gradient(145deg,#ffe644,#f5aa00);color:#352000}.stats>div:nth-child(3){background:linear-gradient(145deg,#ee228d,#a000a9)}.stats>div:last-child{background:linear-gradient(145deg,#1ecf77,#069f5d)}.ticket-picker{background:linear-gradient(135deg,#f6d9fa,#dce0ff 55%,#d4f5ff)}.ticket-tray{border-color:#e5a1de;box-shadow:0 7px 24px #88006a22}.ticket-picker .ticket.selected{background:linear-gradient(145deg,#1dcc75,#069c59);border-color:#ffdc30;outline-color:#ffbd19}.ticket-tray .primary{background:linear-gradient(105deg,#ef008c,#8c13ce);box-shadow:0 4px 11px #8c005d55}.slot .title{color:#df007f}.head b:nth-child(1),#game .letters b:nth-child(1){background:#2867ee}.head b:nth-child(2),#game .letters b:nth-child(2){background:#ed2178}.head b:nth-child(3),#game .letters b:nth-child(3){background:#ffc400;color:#4b3100}.head b:nth-child(4),#game .letters b:nth-child(4){background:#16ae5e}.head b:nth-child(5),#game .letters b:nth-child(5){background:#8b27d5}.pcard footer{background:linear-gradient(105deg,#205be5,#a400b9)}#game .win:not(.hidden){background:linear-gradient(135deg,#ef008c,#7024d8);border-color:#ffd528}

/* Yellow ticket finish. */
.ticket-picker .ticket{background:#fff4b8;border-color:#e8c75e}.slot.chosen,.pcard{background:linear-gradient(145deg,#fffbe7,#ffe89b)}.slot .cell,.pcard .cell{background:#fff8cf;border-color:#e2c966}.slot .cell.free,.pcard .cell.free{background:#fffde8!important;color:#f5ba00!important;border-color:#ffd12b!important;font-size:21px;text-shadow:0 1px 0 #fff}.dark .slot.chosen,.dark .pcard{background:#58411c}.dark .slot .cell,.dark .pcard .cell{background:#745f28;color:#fff8cf}

/* Deep-purple Zhaan theme from the latest reference. */
body,body.dark{color:#fff;background:radial-gradient(circle at 50% 12%,#7b29f5 0,#3b0d89 38%,#190044 100%)}
header{background:#190044cc;border-bottom:1px solid #8e48ff;box-shadow:0 3px 20px #10002a88}.brand img{border-color:#ffdf00}.stats{padding:10px;border:2px solid #8844ef;border-radius:24px;background:#25005ecc;box-shadow:0 8px 22px #0f002f77}.stats>div,.stats>div:first-child,.stats>div:nth-child(3),.stats>div:last-child{background:transparent;color:#fff;border-radius:0;border-right:1px solid #8142e6}.stats>div:last-child{border-right:0}.stats>div:first-child b,.stats>div:nth-child(3) b{color:#ffdc00}.stats>div:nth-child(2) b{color:#4df06f}.ticket-picker,.ticket-tray{background:linear-gradient(145deg,#4d129e,#230061);border:2px solid #8844ef;box-shadow:0 8px 26px #0c002c77}.picker-heading,.tray-heading{color:#fff}.picker-heading span,.tray-heading span{color:#d8c4ff}.ticket-picker .ticket{background:linear-gradient(145deg,#fff,#e9deff);color:#260061;border-color:#fff;border-radius:10px;box-shadow:0 2px 7px #12003c88}.ticket-picker .ticket.sold{background:#573a87;color:#bba9d9;border-color:#684d98}.ticket-picker .ticket.selected{background:linear-gradient(145deg,#20d56a,#0ba44f);border-color:#ffdf00;outline-color:#ffdf00}.ticket-tray{background:linear-gradient(145deg,#431087,#24005e)}.slot,.empty-slot{background:#2a0763;border-color:#ffdf00;color:#fff}.slot.chosen,.pcard{background:linear-gradient(145deg,#fff,#eee5ff);color:#260061;box-shadow:0 9px 22px #12003c80}.slot .cell,.pcard .cell{background:linear-gradient(145deg,#fff,#eee6ff);color:#260061;border-color:#d9c6ff}.slot .cell.free,.pcard .cell.free{background:#ffdf00!important;color:#5d2500!important;border-color:#ffdf00!important}.ticket-tray .primary{background:linear-gradient(105deg,#ffcf00,#f28a00);color:#260061;box-shadow:0 4px 14px #16003d99}.remove-ticket{background:#ed2079}.dark .ticket-picker,.dark .ticket-tray{background:linear-gradient(145deg,#421080,#210055)}.dark .slot.chosen,.dark .pcard{background:#eee5ff;color:#260061}.dark .slot .cell,.dark .pcard .cell{background:#eee6ff;color:#260061}
#game .game{background:linear-gradient(145deg,#4d129e,#210057)}#game .game>.panel{background:#300073;border-right:2px solid #8844ef}#game .board div{background:linear-gradient(145deg,#fff,#e9deff);color:#260061;border-color:#fff}.dark #game .game>.panel{background:#300073}.dark #game .board div{background:#e9deff;color:#260061}.pcard footer{background:linear-gradient(105deg,#6b1fe3,#bd1cdb);color:#fff}#game .win:not(.hidden){background:linear-gradient(135deg,#7925e4,#d719b8);border-color:#ffdf00}

/* Replace remaining white surfaces and keep every ticket square equal on phones. */
.ticket-tray,.empty-slot,#game .game>.panel{background:#fff3bc}.pcard .card,.slot .card{grid-template-columns:repeat(5,minmax(0,1fr))}.pcard .cell,.slot .cell{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.pcard .cell{padding:2px}.slot .cell{padding:1px}#game .board div{background:#fff7d3}.dark .ticket-tray,.dark .empty-slot,.dark #game .game>.panel{background:#453616}

/* Live game: keep the live call and each player's ticket together without a blank middle area. */
#game .play{
  padding:18px;
  display:grid;
  grid-template-columns:minmax(145px,1fr) minmax(245px,350px);
  grid-template-rows:auto auto 1fr;
  align-items:start;
  gap:10px 18px;
  text-align:center;
}
#game .ball{
  position:static;
  grid-column:1;
  grid-row:1;
  margin:0 auto;
}
#game #msg{
  position:static;
  grid-column:1;
  grid-row:2;
  color:#f0e7ff;
}
#game .recent{
  position:static;
  grid-column:1;
  grid-row:3;
  margin:0;
  min-height:0;
}
#game .cards{
  grid-column:2;
  grid-row:1 / span 3;
  width:100%;
  align-items:flex-start;
}
#game .card-loading{margin-top:0}
@media(max-width:800px){
  #game .play{padding:12px 8px;display:flex;flex-direction:column;align-items:stretch;gap:8px}
  #game .ball{width:92px;height:92px;font-size:22px;margin:0 auto}
  #game #msg{font-size:12px}
  #game .recent{min-height:0}
  #game .cards{width:100%}
}