:root {
  --bg: #071521;
  --panel: rgba(14, 36, 55, .78);
  --panel-2: rgba(18, 47, 71, .78);
  --line: rgba(146, 194, 229, .18);
  --text: #f4f8fb;
  --muted: #9fb6c8;
  --blue: #46a8ee;
  --blue2: #1678c7;
  --gold: #ffd76a;
  --green: #54e6a8;
  --danger: #ff6c87;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; overflow-x: hidden; }
body::before { content:""; position: fixed; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(35,142,219,.16), transparent 42%), radial-gradient(circle at 90% 30%, rgba(255,215,106,.07), transparent 35%), linear-gradient(180deg,#081925 0%,#06111b 100%); z-index: -3; }
.ambient { position: fixed; width: 280px; height: 280px; border-radius: 999px; filter: blur(90px); opacity: .18; z-index: -2; }
.ambient-a { background:#30a6ff; top:-100px; left:-120px; }
.ambient-b { background:#ffd76a; bottom:-160px; right:-100px; }
.shell { width: min(100%, 1120px); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 14px max(40px, env(safe-area-inset-bottom)); }
.glass { background: linear-gradient(145deg, rgba(18,45,67,.88), rgba(9,27,41,.78)); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.18); backdrop-filter: blur(18px); border-radius: 22px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 16px 18px; position: sticky; top: 10px; z-index: 10; }
.brand { font-weight: 900; letter-spacing: .17em; font-size: 19px; }
.subtitle { color: var(--blue); font-size: 10px; letter-spacing: .32em; margin-top:4px; font-weight:800; }
.game-meta { text-align:right; }
.game-code { margin-top:8px; font-weight:700; font-size:12px; color:#c9dae6; letter-spacing:.08em; }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.08em; border:1px solid transparent; }
.badge.playing { background:rgba(84,230,168,.12); color:var(--green); border-color:rgba(84,230,168,.28); }
.badge.open,.badge.scheduled { background:rgba(70,168,238,.12); color:#7cc5fa; border-color:rgba(70,168,238,.28); }
.badge.finished { background:rgba(255,215,106,.12); color:var(--gold); border-color:rgba(255,215,106,.28); }
.badge.idle { background:rgba(159,182,200,.09); color:var(--muted); border-color:var(--line); }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px,.65fr); gap:14px; margin-top:14px; }
.live-card,.number-card,.history-card { padding:16px; }
.section-head,.cards-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-head h2,.cards-title h2 { margin:4px 0 0; font-size:18px; }
.section-head.compact { margin-bottom:12px; }
.eyebrow { display:block; color:var(--blue); font-size:10px; letter-spacing:.16em; font-weight:900; }
.live-dot { color:#ff8196; font-size:10px; font-weight:900; letter-spacing:.09em; display:flex; gap:6px; align-items:center; }
.live-dot i { width:8px; height:8px; border-radius:50%; background:#ff5874; box-shadow:0 0 0 5px rgba(255,88,116,.11); animation:pulse 1.5s infinite; }
.stream-wrap { position:relative; width:100%; aspect-ratio:16/9; margin-top:14px; background:#02070b; border-radius:17px; overflow:hidden; border:1px solid rgba(124,197,250,.15); }
#liveVideo,#liveFrame { width:100%; height:100%; object-fit:cover; border:0; display:none; }
.stream-offline { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; color:var(--muted); padding:20px; }
.stream-offline span { font-size:34px; }
.stream-offline strong { color:#dce8f0; font-size:13px; }
.stream-offline small { font-size:11px; }
.number-card { display:flex; min-height:290px; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.number-ball { width:160px; height:160px; margin:18px 0 12px; border-radius:50%; display:grid; place-items:center; background: radial-gradient(circle at 36% 28%, #fff6c9 0%, #ffe38a 22%, #e7b62f 62%, #9c6f12 100%); color:#071521; border:7px solid rgba(255,255,255,.5); box-shadow:0 18px 45px rgba(225,174,44,.25), inset -14px -18px 32px rgba(112,72,4,.22), inset 12px 10px 25px rgba(255,255,255,.5); }
.number-ball span { font-size:64px; font-weight:950; letter-spacing:-.04em; }
.number-ball.pop { animation: ballpop .55s cubic-bezier(.16,.8,.32,1.25); }
.number-note { color:var(--muted); font-size:11px; max-width:210px; line-height:1.5; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.stat { padding:13px 15px; display:flex; flex-direction:column; gap:6px; }
.stat span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.13em; }
.stat strong { font-size:20px; }
.history-card { margin-bottom:18px; }
.draw-count { font-size:12px; color:var(--muted); font-weight:800; }
.history { display:flex; flex-wrap:wrap; gap:8px; min-height:34px; }
.history-number { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(110,154,185,.12); border:1px solid rgba(130,184,224,.2); color:#dbe9f2; font-weight:800; font-size:12px; }
.history-number.latest { background:var(--gold); color:#10202a; border-color:#ffe18b; box-shadow:0 0 0 4px rgba(255,215,106,.1); }
.cards-section { margin-top:18px; }
.cards-title { margin-bottom:12px; padding:0 4px; }
.connection { font-size:9px; font-weight:900; letter-spacing:.1em; color:var(--muted); }
.connection.online { color:var(--green); }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.tombola { padding:13px; border-radius:22px; background:linear-gradient(150deg,#edf5fb,#d9e9f5); border:3px solid #348ac5; box-shadow:0 16px 34px rgba(0,0,0,.2); color:#132434; }
.tombola-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; font-weight:900; color:#1b6394; font-size:11px; letter-spacing:.04em; }
.tombola-head .dab { background:#155f96; color:white; border-radius:999px; padding:7px 15px; letter-spacing:.13em; }
.tombola-grid { display:grid; grid-template-columns:repeat(9,1fr); border:2px solid #276f9f; background:white; }
.cell { position:relative; aspect-ratio:1.05/1; display:grid; place-items:center; border-right:1px solid #6ea2c5; border-bottom:1px solid #6ea2c5; font-size:clamp(14px,3.2vw,28px); font-weight:900; background:#fafdff; }
.cell:nth-child(9n) { border-right:0; }
.cell:nth-last-child(-n+9) { border-bottom:0; }
.cell.empty { background:#e7f0f6; }
.cell.marked::before { content:""; position:absolute; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3b5,#f1c54d 62%,#bf8a18); border:2px solid #b98011; box-shadow:inset 0 2px 4px rgba(255,255,255,.7); }
.cell.marked span { position:relative; z-index:1; }
.cell.winning { background:#f9f0cc; animation: winnerGlow 1.15s ease-in-out infinite alternate; }
.winner-banner { margin: 0 0 12px; padding:12px; border-radius:16px; text-align:center; font-weight:950; letter-spacing:.05em; background:linear-gradient(90deg,#e9b931,#ffe488,#e9b931); color:#15212a; box-shadow:0 10px 28px rgba(229,177,38,.22); }
.admin-view { padding:18px; text-align:center; color:var(--muted); font-size:12px; }
.empty-state { margin-top:16px; padding:44px 22px; text-align:center; }
.empty-state h2 { margin:8px 0; }
.empty-state p { color:var(--muted); margin:0; }
.empty-icon { font-size:42px; }
.hidden { display:none !important; }
.confetti { position:fixed; top:-20px; width:8px; height:14px; border-radius:2px; z-index:99; pointer-events:none; animation:fall 2.7s linear forwards; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.86); } }
@keyframes ballpop { 0%{transform:scale(.72) rotate(-8deg);opacity:.2} 65%{transform:scale(1.08) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes winnerGlow { from{box-shadow:inset 0 0 0 0 rgba(255,215,106,.1)} to{box-shadow:inset 0 0 24px rgba(255,215,106,.46)} }
@keyframes fall { to{ transform:translateY(110vh) rotate(560deg); opacity:.1; } }
@media (max-width:760px){ .hero-grid{grid-template-columns:1fr}.number-card{min-height:235px}.number-ball{width:130px;height:130px}.number-ball span{font-size:52px}.cards{grid-template-columns:1fr}.topbar{top:6px}.game-code{font-size:10px}.stats{gap:7px}.stat{padding:11px}.stat strong{font-size:17px}.tombola{padding:9px}.tombola-head{font-size:9px}.tombola-head .dab{padding:6px 10px}.cell{font-size:16px} }