.whatsapp-float{background:#25b866;border:1px solid #8ad9aa;border-radius:10px;box-shadow:0 5px 16px #0004;font-size:12px}.whatsapp-float:before{content:"☎";margin-right:6px;font-size:13px}
:root{--bg:#170027;--panel:#30064b;--panel2:#4a0a62;--line:#d40076;--pink:#ef0084;--cyan:#10ddec;--green:#16d84a;--yellow:#ffd34f;--text:#fff;--muted:#d8b9e6}
.winner-card p{max-height:220px;overflow-y:auto}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 15% 0,#5b0a79 0,transparent 35%),linear-gradient(135deg,#150022,#310044 55%,#19002c);color:var(--text)}body{overflow-x:hidden}.gamebar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#22002fe8;border-bottom:2px solid #800052;position:sticky;top:0;z-index:30;font-size:12px}.gamebar a{color:#fff;text-decoration:none;font-weight:900}.gamebar strong{letter-spacing:.06em}.gamebar span{font-size:10px;color:#74f8ff}.game-wrap{width:100%;max-width:1500px;margin:auto;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:12px;align-items:start}.panel{background:linear-gradient(145deg,#3c0754,#260238);border:2px solid #7f0053;border-radius:14px;box-shadow:0 8px 25px #0008}.tombola-panel{padding:10px;min-width:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 4px 8px}.panel-title span{display:block;font-size:15px;font-weight:1000}.panel-title small{display:block;color:#d8a9e6;font-size:9px;margin-top:3px}.panel-title b{font-size:10px;color:#ffd34f;text-align:right;white-space:nowrap}.current-row{display:grid;grid-template-columns:145px minmax(0,1fr);gap:10px;margin-bottom:10px}.current-ball{background:#4a0035;border:2px solid #960060;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:72px}.current-ball small{font-size:12px;color:#ff8dc9;font-weight:1000}.current-ball strong{font-size:48px;line-height:1;text-shadow:0 3px 0 #620039}.drawn-box{min-width:0;background:#24002f;border:1px solid #690044;border-radius:10px;padding:9px}.drawn-box>b{font-size:10px;color:#ffcce9}.drawn-box>div{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.drawn-ball{min-width:29px;height:29px;padding:0 7px;border-radius:50%;display:grid;place-items:center;background:#5a0b72;border:1px solid #a32983;font-size:11px;font-weight:1000}.drawn-ball.latest{background:#e6007f;border-color:#ff83c7;box-shadow:0 0 9px #ff009055}.bingo-board{display:flex;flex-direction:column;gap:4px;background:#1e002b;border:2px solid #8c0059;border-radius:10px;padding:5px;overflow-x:auto}.bingo-row{display:grid;grid-template-columns:44px repeat(15,minmax(38px,1fr));min-width:690px;gap:3px;align-items:center}.bingo-row-letter{height:34px;border-radius:7px;background:linear-gradient(180deg,#f00089,#9c005a);display:grid;place-items:center;font-size:19px;font-weight:1000}.bingo-row:nth-child(1) .bingo-row-letter{background:linear-gradient(180deg,#ffb3dc,#df007d);color:#4b0031}.bingo-row:nth-child(2) .bingo-row-letter,.bingo-row:nth-child(3) .bingo-row-letter,.bingo-row:nth-child(4) .bingo-row-letter,.bingo-row:nth-child(5) .bingo-row-letter{background:linear-gradient(180deg,#f7f7f7,#bcbcbc);color:#4a0040}.ball{height:34px;border-radius:50%;background:#32004d;border:2px solid #b88722;color:#fff5cf;display:grid;place-items:center;font-size:13px;font-weight:1000;box-shadow:inset 0 0 0 1px #4d143f}.ball.drawn{background:#8e0c72;border-color:#ffd34f;color:#fff}.ball.current{background:#00b83c;border-color:#7dff9a;color:#fff;box-shadow:0 0 12px #00e83c88;transform:scale(1.05)}.cards-panel{padding:12px;position:sticky;top:60px;max-height:calc(100vh - 72px);overflow:auto}.search-head{display:flex;justify-content:space-between;gap:8px;align-items:start}.search-head span{font-size:9px;color:#76f8ff;font-weight:1000;letter-spacing:.12em}.search-head h1{font-size:20px;margin:4px 0}.search-head p{margin:0;color:var(--muted);font-size:10px}.back{color:#fff;text-decoration:none;background:#68004b;padding:7px 9px;border-radius:7px;font-size:10px;font-weight:1000}.search{display:grid;grid-template-columns:1fr 72px;gap:6px;margin:10px 0}.search input{width:100%;min-width:0;padding:10px;border:1px solid #8f3a83;border-radius:8px;background:#1b002d;color:#fff;outline:0}.search button{border:0;border-radius:8px;background:linear-gradient(180deg,#12e7f2,#008ed0);color:#fff;font-weight:1000}.search-msg{min-height:16px;color:#d8b9e6;font-size:10px}.table{margin-top:9px;border:1px solid #8d2a78;border-radius:10px;overflow:hidden;background:#21002f}.table-head{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px;background:#3a0752}.table-head b{font-size:13px}.table-head small{color:#e2bde9;font-size:9px}.table-status{font-size:9px;font-weight:1000}.table-status.paid{color:#58ff88}.table-status.reserved{color:#ffd34f}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:6px}.card{background:#fff;color:#16001f;border-radius:6px;padding:4px}.card h4{margin:0 0 3px;text-align:center;color:#4a0b5e;font-size:8px}.grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #a7a7a7}.cell{aspect-ratio:1;display:grid;place-items:center;font-size:8px;font-weight:1000;border-right:1px solid #ddd;border-bottom:1px solid #ddd}.cell:nth-child(5n){border-right:0}.cell:nth-last-child(-n+5){border-bottom:0}.free{background:#ffd34f}.empty{padding:15px;text-align:center;color:#a982b5;font-size:10px}
@media(max-width:900px){.game-wrap{grid-template-columns:1fr}.cards-panel{position:static;max-height:none}.gamebar strong{font-size:10px}.current-row{grid-template-columns:125px 1fr}}@media(max-width:620px){.game-wrap{padding:6px}.tombola-panel{padding:6px}.panel-title span{font-size:12px}.panel-title small{font-size:8px}.current-row{grid-template-columns:105px 1fr}.current-ball{min-height:62px}.current-ball strong{font-size:39px}.current-ball small{font-size:9px}.bingo-board{gap:3px;padding:3px}.bingo-row{grid-template-columns:36px repeat(15,38px);min-width:606px;gap:2px}.bingo-row-letter{height:29px;font-size:16px}.ball{height:29px;font-size:11px}.drawn-ball{min-width:25px;height:25px;font-size:9px}.cards{gap:4px}.cell{font-size:7px}}
.table-score{display:flex;gap:5px;flex-wrap:wrap;padding:7px 8px;background:#190024}.table-score span{padding:4px 6px;border-radius:6px;background:#4a0a62;color:#fff;font-size:8px;font-weight:1000}.card h4{display:flex;justify-content:space-between;gap:4px}.card h4 span{color:#8e5d00;font-size:7px}.cell.marked{background:#74dc9a!important;color:#062615}.cell.target{outline:1px solid #d4a629;outline-offset:-2px}.cell.free.marked{background:#ffd34f!important}.card-winner{box-shadow:0 0 0 2px #16d84a,0 0 15px #16d84a66}.winner-modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:20px;z-index:200}.winner-modal.open{display:flex}.winner-card{width:min(430px,100%);text-align:center;background:linear-gradient(145deg,#4a0a62,#19002a);border:2px solid #ffd34f;border-radius:22px;padding:30px;box-shadow:0 25px 100px #000}.winner-icon{font-size:62px}.winner-kicker{color:#ffd34f;font-size:12px;font-weight:1000;letter-spacing:.15em}.winner-card h2{font-size:28px;margin:8px 0}.winner-card p{color:#e5cdea;line-height:1.6}.winner-card button{border:0;border-radius:10px;padding:12px 20px;background:#16d84a;color:#fff;font-weight:1000;cursor:pointer}
.card{transition:box-shadow .12s ease,transform .12s ease}.card-two-missing{box-shadow:0 0 0 2px #ffd34f,0 0 10px #ffd34f55}.card-one-missing{box-shadow:0 0 0 2px #ff526d,0 0 12px #ff526d66}.card-winner{box-shadow:0 0 0 3px #16d84a,0 0 16px #16d84a88;transform:scale(1.01)}.card-invalid{box-shadow:0 0 0 2px #ff526d;background:#ffeef2}.card h4 span:last-child{font-weight:1000}.card-two-missing h4 span:last-child{color:#9b7600}.card-one-missing h4 span:last-child{color:#c4003d}.card-winner h4 span:last-child{color:#07852f}.card-invalid h4 span:last-child{color:#b00030}.card-two-missing .cell.target{outline-color:#ffd34f}.card-one-missing .cell.target{outline-color:#ff526d}.card-winner .cell.target{outline-color:#16d84a}
.cell.target-unmarked {
background: rgba(241, 196, 15, 0.12);
border: 2px solid #f1c40f !important;
box-shadow: 0 0 12px rgba(241, 196, 15, 0.6);
}
/* Keep the live draw legible at a glance on desktop and mobile */
body{font-family:"Trebuchet MS",Segoe UI,sans-serif;background:radial-gradient(circle at 15% 0,#12445c 0,transparent 32%),linear-gradient(145deg,#071522,#102c3b 62%,#08151e)}
.panel{background:linear-gradient(145deg,#123c50f2,#0b202cf5);border-color:#2aa4ad}.gamebar{background:#071a26f5;border-bottom-color:#d49a36}.current-ball{background:#143b45;border-color:#28c5c2}.current-ball strong{color:#ffe09b}.bingo-row-letter{background:#b78325;color:#071522}.ball{background:#123449;border-color:#28677b}.ball.drawn{background:#158b91;border-color:#66f3df}.ball.current{background:#d49a36;color:#071522;box-shadow:0 0 20px #d49a36aa}.card{border-color:#28677b}
@media(max-width:620px){.current-row{grid-template-columns:92px minmax(0,1fr)}.current-ball strong{font-size:35px}.drawn-box{padding:7px}.bingo-row{grid-template-columns:32px repeat(15,minmax(22px,1fr));min-width:0}.ball{height:auto;aspect-ratio:1;font-size:10px}.bingo-row-letter{height:auto;aspect-ratio:1;font-size:14px}}
.cell.marked.target-marked {
background: #2ecc71 !important;
color: #fff !important;
box-shadow: 0 0 15px rgba(46, 204, 113, 0.7);
border-color: #27ae60;
transform: scale(1.05);
transition: 0.15s ease;
}
.cell.marked.non-target-marked {
background: #9b59b6 !important;
color: #fff !important;
box-shadow: 0 0 10px rgba(155, 89, 182, 0.5);
}
.card-winner {
box-shadow: 0 0 0 3px #16d84a, 0 0 30px #16d84a88 !important;
transform: scale(1.02);
transition: 0.2s ease;
background: radial-gradient(circle at center, #1a3a1a, #0a1a0a);
}
.card-winner .cell.marked.target-marked {
box-shadow: 0 0 25px rgba(46, 204, 113, 0.9);
transform: scale(1.08);
}
.card-winner .cell.target-unmarked {
display: none;
}
.card-winner h4 span:last-child {
color: #16d84a;
font-size: 14px;
text-shadow: 0 0 10px #16d84a88;
}
.card .cell {
font-family: "Arial Black", Arial, sans-serif;
font-size: clamp(12px, 2.1vw, 22px);
font-weight: 900;
line-height: 1;
}
.card .cell .free-mark {
color: #260044;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 1.25em;
line-height: 1;
text-shadow: 0 1px 0 #8f5ab0;
}
@media(max-width:620px){.card .cell{font-size:clamp(11px,3.8vw,18px)}}
.card-letters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:5px 0 2px;text-align:center;color:#ffd34f;font-family:"Arial Black",Arial,sans-serif;font-size:clamp(11px,1.8vw,17px);font-weight:900;line-height:1.2}.card-letters span{padding:2px 0;border-bottom:2px solid #ffd34f}.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border:2px solid #b9ffd0;border-radius:999px;background:#16a05d;color:#fff!important;font-family:Arial,sans-serif;font-size:13px;font-weight:900;line-height:1;text-decoration:none!important;box-shadow:0 5px 18px #0008;white-space:nowrap}.whatsapp-float:hover{background:#20bd70;transform:translateY(-1px)}@media(max-width:620px){.whatsapp-float{right:10px;bottom:10px;padding:10px 13px;font-size:12px}}

/* Compact app-matched layout: keep the board and cards inside the viewport. */
:root{--app-purple:#30064b;--app-purple-dark:#170027;--app-magenta:#ef0084;--app-green:#16d84a;--app-gold:#ffd34f;--app-cyan:#10ddec}
html,body{background:radial-gradient(circle at 15% 0,#5b0a79 0,transparent 35%),linear-gradient(135deg,var(--app-dark,#150022),#310044 55%,var(--app-purple-dark));}
.gamebar{height:48px;background:#22002fe8;border-bottom:2px solid #800052}
.game-wrap{max-width:1500px;padding:10px;grid-template-columns:minmax(0,1fr) minmax(330px,36%);gap:10px}
.panel{background:linear-gradient(145deg,#3c0754,#260238);border-color:#7f0053;border-radius:12px;box-shadow:0 8px 25px #0008}
.tombola-panel{padding:8px}.panel-title{padding:2px 3px 7px}.panel-title span{font-size:14px}.current-row{grid-template-columns:clamp(105px,15vw,145px) minmax(0,1fr);gap:8px;margin-bottom:8px}.current-ball{min-height:68px;background:#4a0035;border-color:#960060}.current-ball strong{font-size:clamp(36px,4vw,48px);color:#fff}.drawn-box{padding:7px;background:#24002f;border-color:#690044}.drawn-ball{min-width:26px;height:26px;padding:0 5px;background:#5a0b72;border-color:#a32983;font-size:10px}.drawn-ball.latest{background:#e6007f;border-color:#ff83c7}
.bingo-board{padding:4px;gap:3px;background:#1e002b;border-color:#8c0059}.bingo-row{grid-template-columns:clamp(28px,4vw,38px) repeat(15,minmax(0,1fr));min-width:0;gap:2px}.bingo-row-letter,.ball{height:auto;aspect-ratio:1}.bingo-row-letter{font-size:clamp(12px,1.5vw,18px)}.ball{border-width:1px;font-size:clamp(9px,1.25vw,13px);border-radius:6px}.ball.current{box-shadow:0 0 8px #00e83c88}
.cards-panel{padding:9px;top:58px;max-height:calc(100vh - 68px)}.search-head h1{font-size:18px}.search-head p{font-size:9px}.search{margin:7px 0}.search input{padding:8px}.table{margin-top:7px}.table-head{padding:6px}.table-head b{font-size:11px}.cards{gap:4px;padding:4px}.card{padding:3px;border-radius:5px}.card h4{font-size:7px;margin-bottom:2px}.card h4 span{font-size:6px}.card-letters{margin:2px 0 1px;font-size:9px}.card-letters span{padding:1px 0;border-bottom-width:1px}.cell,.card .cell{font-size:clamp(7px,1vw,11px);font-weight:900}.table-score{padding:4px 5px;gap:3px}.table-score span{padding:3px 4px;font-size:7px}
.winner-card{padding:22px}.winner-icon{font-size:48px}.winner-card h2{font-size:23px}.winner-card p{line-height:1.35}
@media(max-width:900px){.game-wrap{grid-template-columns:1fr;padding:7px}.cards-panel{position:static;max-height:none}.bingo-row{grid-template-columns:30px repeat(15,minmax(0,1fr))}.ball{font-size:clamp(8px,2vw,12px)}}
@media(max-width:620px){.gamebar{height:42px;padding:0 9px}.gamebar strong{font-size:9px}.game-wrap{padding:4px}.tombola-panel{padding:5px}.panel-title span{font-size:11px}.panel-title small{font-size:7px}.current-row{grid-template-columns:86px minmax(0,1fr);gap:5px}.current-ball{min-height:58px}.current-ball strong{font-size:31px}.current-ball small{font-size:8px}.drawn-box{padding:5px}.drawn-ball{min-width:22px;height:22px;font-size:8px}.bingo-board{padding:3px}.bingo-row{grid-template-columns:25px repeat(15,minmax(0,1fr));gap:1px}.bingo-row-letter,.ball{border-radius:4px}.bingo-row-letter{font-size:11px}.ball{font-size:clamp(7px,2.2vw,10px)}.cards-panel{padding:6px}.card .cell{font-size:clamp(6px,2.2vw,9px)}.card-letters{font-size:8px}.cards{gap:3px}.winner-modal{padding:10px}.winner-card{padding:18px}.winner-icon{font-size:40px}.winner-card h2{font-size:20px}}

/* Card states: make the active pattern unmistakable without glare. */
.card .cell{background:#321047;color:#fff;border-color:transparent;box-shadow:none}
.card .cell.target-unmarked{background:#b56bc4!important;color:#24102f!important;border:2px solid #ffd34f!important;box-shadow:none!important}
.card .cell.marked.target-marked{background:#45b978!important;color:#08261a!important;border:1px solid #27945a!important;box-shadow:none!important;transform:none!important}
.card .cell.marked.non-target-marked{background:#321047!important;color:#fff!important;border:0!important;box-shadow:none!important;transform:none!important}
.card .cell.free{background:#321047;color:#fff;border:0}
.card .cell.free.marked{background:#45b978!important;color:#08261a!important}
.card-winner{box-shadow:0 0 0 2px #16d84a!important;transform:none!important;background:#fff}
.card-winner .cell.marked.target-marked{box-shadow:none!important;transform:none!important}
.card-winner .cell.target-unmarked{display:grid}