*{box-sizing:border-box}
:root{
 --bg:#0b1220;--panel:#172033;--panel2:#1e293b;--text:#f8fafc;--muted:#94a3b8;
 --green:#22c55e;--green2:#15803d;--yellow:#facc15;--red:#ef4444;--blue:#2563eb;
}
body{margin:0;background:linear-gradient(160deg,#11233d,#070d18 70%);color:var(--text);font-family:Arial,Helvetica,sans-serif;min-height:100vh}
.container{width:min(1500px,96%);margin:auto;padding:18px 0 35px}
h1,h2,h3{margin-top:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:15px}
.brand h1{margin:0;font-size:clamp(26px,4vw,44px)} .brand small{color:var(--muted)}
.panel{background:rgba(23,32,51,.94);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label{font-weight:700;color:#cbd5e1}
input,select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #475569;background:#0f172a;color:white;font-size:16px}
.field{margin-bottom:11px}
.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:800;font-size:15px;cursor:pointer;color:white;background:#334155}
.btn:hover{filter:brightness(1.1)} .btn-green{background:var(--green2)} .btn-red{background:#b91c1c}.btn-blue{background:var(--blue)} .btn-yellow{background:#ca8a04}
.badge{display:inline-block;border-radius:999px;padding:5px 10px;font-weight:800;background:#334155}
.badge.running{background:#166534}.badge.setup{background:#854d0e}.badge.finished{background:#7f1d1d}
.status-box{display:flex;gap:10px;flex-wrap:wrap}.stat{background:#0f172a;border-radius:12px;padding:9px 14px;text-align:center;min-width:110px}.stat strong{font-size:27px;display:block}.stat span{font-size:12px;color:var(--muted)}
.draw-area{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center}
.big-ball{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#111827;font-weight:900;font-size:55px;border:7px solid #fef3c7;box-shadow:0 0 35px rgba(250,204,21,.28)}
.last6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.small-ball{min-width:50px;height:58px;border-radius:999px;display:grid;place-items:center;background:#334155;font-size:27px;font-weight:900}.small-ball.first{background:var(--yellow);color:#111827}
.numbers-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.num{min-height:59px;border-radius:10px;border:3px solid transparent;background:#f8fafc;color:#111827;font-size:27px;font-weight:900;display:grid;place-items:center}
.num.drawn{background:linear-gradient(145deg,#22c55e,#15803d);color:#fff;border-color:#86efac}.num.last{border-color:var(--yellow);box-shadow:0 0 18px rgba(250,204,21,.6)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px}
.card-choice{padding:13px;border-radius:13px;background:#0f172a;border:2px solid #334155;text-align:center;cursor:pointer}.card-choice:hover{border-color:#60a5fa}.card-choice.busy{opacity:.42;cursor:not-allowed}.card-choice strong{font-size:22px;display:block}
.bingo-card{width:min(520px,100%);margin:auto;background:#cbd8d6;padding:10px;border-radius:15px;color:#111827;border:4px solid #86a19d}
.bingo-title{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;text-align:center;font-size:35px;font-weight:900;letter-spacing:4px}
.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cell{aspect-ratio:1/1;display:grid;place-items:center;background:#fff;border:3px solid #111827;border-radius:9px;font-size:clamp(24px,6vw,40px);font-weight:900}.cell.marked{background:#22c55e;color:#fff}.cell.free{font-size:16px;background:#e2e8f0}
.notice{padding:12px;border-radius:11px;background:#0f172a;border-left:5px solid #3b82f6;margin:10px 0}.notice.ok{border-color:#22c55e}.notice.warn{border-color:#f59e0b}.notice.danger{border-color:#ef4444}
table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #334155;text-align:left}th{color:#cbd5e1}
a{color:#93c5fd}
.center{text-align:center}
.hidden{display:none!important}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}.numbers-grid{grid-template-columns:repeat(9,1fr)}.draw-area{grid-template-columns:1fr}.big-ball{margin:auto}.last6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:550px){.numbers-grid{grid-template-columns:repeat(5,1fr)}.num{min-height:52px;font-size:23px}.container{width:94%}}

.rulecheck{display:flex;align-items:center;gap:8px;background:#0f172a;padding:10px 12px;border-radius:10px;margin:7px 0;cursor:pointer}
.rulecheck input{width:auto;transform:scale(1.25)}
.game-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #334155;padding:9px 0}
.btn-small{padding:7px 10px;font-size:12px}
.winner-alert{margin:12px 0;padding:15px;border-radius:13px;background:#14532d;border:2px solid #4ade80;font-size:18px;box-shadow:0 0 24px rgba(34,197,94,.2)}
.near-alert{margin:12px 0;padding:13px;border-radius:13px;background:#78350f;border:2px solid #f59e0b}
.winner-row{background:rgba(34,197,94,.16)}.near-row{background:rgba(245,158,11,.12)}
.wintext{color:#86efac;font-weight:900}.neartext{color:#fcd34d;font-weight:800}

.conditions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.condition-card{display:flex;flex-direction:column;gap:7px;background:#14532d;border:2px solid #22c55e;padding:11px;border-radius:12px;text-align:center}
.condition-card.done{background:#334155;border-color:#64748b;opacity:.78}
.condition-card span{font-size:12px;font-weight:900}
.mark-mode{display:flex;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap;margin:13px 0;background:#0f172a;padding:10px;border-radius:11px}
.mark-mode label{display:flex;align-items:center;gap:6px}
.mark-mode input{width:auto}
.bingo-button{width:100%;font-size:22px;margin-top:10px}
.chat-box{margin-top:16px;border-top:1px solid #334155;padding-top:14px}
.chat-messages{height:260px;overflow-y:auto;background:#0f172a;border-radius:11px;padding:9px}
.chat-msg{background:#1e293b;border-radius:9px;padding:8px 10px;margin-bottom:7px;text-align:left}
.chat-msg div{display:flex;justify-content:space-between;gap:8px}
.chat-msg span{font-size:11px;color:#94a3b8}
.chat-msg p{margin:4px 0 0;word-break:break-word}
.chat-send{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}
@media(max-width:900px){.conditions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.conditions{grid-template-columns:1fr}.chat-messages{height:220px}}