*{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}}

.audio-control{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0;padding:10px;border-radius:11px;background:#111827}
.audio-control label{display:flex;align-items:center;gap:7px}.audio-control input{width:auto;transform:scale(1.2)}
.award-chat-card{background:linear-gradient(145deg,#713f12,#a16207)!important;border:2px solid #facc15;box-shadow:0 0 18px rgba(250,204,21,.2)}
.award-chat-card b{color:#fef3c7}.award-chat-card p{font-size:16px;font-weight:800}
.admin-chat-card{background:#172554!important;border:1px solid #3b82f6}
.admin-chat-card b{color:#bfdbfe}
.awards-list{display:grid;gap:8px}
.award-history-card{background:#422006;border:1px solid #f59e0b;border-radius:11px;padding:11px}
.award-history-card b{color:#fde68a}.award-history-card small{color:#fcd34d}

.quick-announcements{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}

.voice-mode-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:#0f172a;
  border:1px solid #334155;
  border-radius:12px;
  padding:12px;
  margin:10px 0 14px
}
.voice-mode-help{color:#94a3b8;font-size:12px;margin-top:3px}
.voice-mode-buttons{display:flex;gap:8px;flex-wrap:wrap}

.admin-login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.admin-login-card{width:min(420px,94vw);background:#172033;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.38);text-align:center}
.admin-login-card input{font-size:26px;text-align:center;letter-spacing:8px}
.admin-lock{font-size:54px;margin-bottom:8px}

.waiting-admin-panel{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#111827;border:2px solid #3b82f6;border-radius:14px;padding:13px;margin:10px 0 14px}
.waiting-admin-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.waiting-admin-controls input{width:78px;text-align:center}
.admin-countdown{grid-column:1/-1;text-align:center;background:#0f172a;border-radius:10px;padding:10px;font-size:25px;font-weight:900;color:#93c5fd}

.waiting-room-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:linear-gradient(145deg,#172554,#1e3a8a);border:2px solid #60a5fa;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 0 25px rgba(59,130,246,.15)}
.waiting-icon{font-size:40px}
.waiting-countdown{font-size:clamp(34px,8vw,58px);font-weight:900;color:#facc15;letter-spacing:2px}
.waiting-players{grid-column:1/-1;text-align:center;color:#bfdbfe;font-weight:700}
@media(max-width:700px){
 .waiting-admin-panel{grid-template-columns:1fr}
 .waiting-admin-controls{justify-content:center}
 .waiting-room-card{grid-template-columns:auto 1fr}
 .waiting-countdown{grid-column:1/-1;text-align:center}
}

.lobby-container{max-width:1350px}
.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.lobby-header h1{margin:0;font-size:clamp(32px,5vw,54px)}
.lobby-header p{margin:6px 0 0;color:#94a3b8;font-size:17px}
.lobby-live{background:#7f1d1d;border:1px solid #ef4444;color:#fecaca;padding:8px 13px;border-radius:999px;font-weight:900;font-size:13px}
.rooms-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.room-card{background:linear-gradient(145deg,#172033,#111827);border:2px solid #334155;border-radius:20px;padding:18px;box-shadow:0 12px 35px rgba(0,0,0,.27);position:relative;overflow:hidden}
.room-card.waiting{border-color:#3b82f6}
.room-card.running{border-color:#22c55e}
.room-card.open{border-color:#64748b}
.room-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.room-card-top h2{margin:5px 0 0;font-size:25px}
.room-id{font-size:11px;color:#94a3b8;font-weight:900;letter-spacing:1px}
.room-status{white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900}
.room-status.waiting{background:#1e3a8a;color:#bfdbfe}
.room-status.running{background:#14532d;color:#bbf7d0}
.room-status.open{background:#334155;color:#e2e8f0}
.room-countdown-wrap{margin:18px 0;text-align:center;background:#0f172a;border-radius:15px;padding:14px;border:1px solid #1d4ed8}
.room-countdown-wrap span{display:block;color:#93c5fd;font-size:13px;font-weight:800}
.room-countdown-wrap strong{display:block;color:#facc15;font-size:clamp(38px,7vw,58px);line-height:1.05;letter-spacing:2px;margin-top:4px}
.room-status-message{margin:18px 0;background:#0f172a;border-radius:13px;padding:16px;text-align:center;font-weight:800;color:#cbd5e1}
.room-occupancy{margin:15px 0}
.room-occupancy-head{display:flex;justify-content:space-between;font-size:13px;color:#cbd5e1;margin-bottom:6px}
.room-progress{height:9px;background:#0f172a;border-radius:99px;overflow:hidden}
.room-progress span{display:block;height:100%;background:#22c55e;border-radius:99px}
.room-enter-btn{display:block;text-align:center;text-decoration:none;background:#2563eb;color:white;border-radius:12px;padding:13px;font-size:17px;font-weight:900;margin-top:14px}
.room-card.running .room-enter-btn{background:#15803d}
.room-enter-btn:hover{filter:brightness(1.12)}
.empty-lobby{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(23,32,51,.75);border:2px dashed #334155;border-radius:22px;padding:30px}
.empty-lobby-icon{font-size:72px;opacity:.65}
.empty-lobby h2{font-size:28px;margin:12px 0 5px}
.empty-lobby p{color:#94a3b8;max-width:520px}
.waiting-dots{display:flex;gap:8px;margin-top:16px}
.waiting-dots span{width:10px;height:10px;border-radius:50%;background:#60a5fa;animation:lobbyDot 1.2s infinite ease-in-out}
.waiting-dots span:nth-child(2){animation-delay:.15s}.waiting-dots span:nth-child(3){animation-delay:.3s}
@keyframes lobbyDot{0%,80%,100%{transform:scale(.65);opacity:.4}40%{transform:scale(1);opacity:1}}
.lobby-footer{text-align:center;color:#64748b;font-size:12px;margin-top:18px}
@media(max-width:600px){
 .rooms-cards{grid-template-columns:1fr}
 .room-card-top{flex-direction:column}
 .room-status{align-self:flex-start}
}