*{box-sizing:border-box}
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f3f5fa;font-synthesis:none}
body{margin:0;min-height:100vh}
.topbar{background:#18243d;color:#fff;padding:16px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar strong{font-size:1.15rem}.subtitle{display:block;color:#c8d3e9;font-size:.85rem;margin-top:3px}
main{max-width:1400px;margin:28px auto;padding:0 18px}
footer{text-align:center;color:#657087;font-size:.82rem;padding:24px}
h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 8px}h2{font-size:1.25rem;margin:0 0 14px}h3{font-size:1rem;margin:22px 0 10px}
p{line-height:1.5}.muted{color:#6d7890;font-size:.9rem}
.panel,.subpanel{background:white;border:1px solid #e1e6f0;border-radius:16px;padding:clamp(16px,2.5vw,26px);box-shadow:0 6px 24px #1e31500b}
.subpanel{box-shadow:none;background:#fafbfe}
.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
label{display:block;font-weight:600;font-size:.92rem;margin:12px 0}
input{display:block;width:100%;font:inherit;margin-top:6px;padding:11px 12px;border:1px solid #cbd3e1;border-radius:9px;background:white;color:#172033}
input:focus{outline:3px solid #d7e5ff;border-color:#4479d8}
button{font:inherit;font-weight:650;border:0;border-radius:9px;padding:10px 15px;background:#245cc5;color:#fff;cursor:pointer;transition:filter .15s,transform .15s}
button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
button:disabled{opacity:.45;cursor:not-allowed}
form button{margin-top:8px}
.secondary{background:#e6ebf4;color:#1c2a43}.success{background:#14804a}.danger{background:#b82f42}
.hidden{display:none!important}
.notice{margin-bottom:18px;padding:12px 15px;background:#e0f2e8;border:1px solid #b2e0c7;color:#155d36;border-radius:10px}
.notice.error{background:#fff0f0;border-color:#f1bcbc;color:#922626}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.section-head p{margin:4px 0 0;color:#6d7890}
.game-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.game-meta strong{font-size:1.5rem;letter-spacing:.1em;color:#1e54b7}
.pill{display:inline-block;background:#e9eef8;color:#324360;border-radius:999px;padding:5px 10px;font-size:.8rem;font-weight:700;white-space:nowrap}
.pill.winner{background:#fff0bd;color:#7c4b00}
.inline-form{display:flex;align-items:end;gap:12px;margin:10px 0 18px}.inline-form label{flex:1;margin:0}
.credential{background:#e8f6ed;border:1px solid #b6e2c5;border-radius:10px;padding:14px;margin:12px 0;line-height:1.8;overflow-wrap:anywhere}
.credential code{font-size:1rem;font-weight:800}
.player-list{margin:16px 0}.player-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #edf0f6;padding:12px 0}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px}
.number-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.number-button{padding:8px 0;background:#edf2fc;color:#1b3f80;border:1px solid #dce5f7;border-radius:7px}
.number-button.called{background:#253858;color:#fff;opacity:.45}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.called-list{display:flex;flex-wrap:wrap;gap:6px;min-height:28px}
.called-chip{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:8px;background:#e8efff;color:#204d9c;font-weight:750}
.event-log{max-height:360px;overflow:auto;border-top:1px solid #edf0f6}
.event{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #edf0f6;font-size:.9rem}
.event time{font-size:.76rem;color:#758098;min-width:120px}
.event span{display:block;margin-top:2px;color:#56627a}
.player-instructions{padding:12px;background:#eef4ff;border-radius:10px;margin-bottom:18px;color:#25416e}
.bingo-scroll{overflow-x:auto}
.bingo-card{border-collapse:separate;border-spacing:5px;width:100%;max-width:850px;margin:0 auto}
.bingo-card td{width:11.11%;height:clamp(42px,7vw,76px);text-align:center}
.card-number{width:100%;height:100%;min-height:42px;border-radius:10px;background:#f0f3f8;color:#25344e;border:2px solid #e0e6ef;font-size:clamp(1rem,2.5vw,1.5rem);padding:5px}
.card-number.announced{background:#e3edff;border-color:#98b7f4;color:#194ca8}
.card-number.checked{background:#13824d;border-color:#0c6c3e;color:#fff;box-shadow:inset 0 0 0 2px #ffffff40}
.empty-cell{background:#f7f8fb;border-radius:10px}
@media(max-width:850px){.dashboard-grid{grid-template-columns:1fr}.number-board{grid-template-columns:repeat(9,minmax(0,1fr))}.two-cols{grid-template-columns:1fr}}
@media(max-width:560px){main{padding:0 10px;margin:16px auto}.section-head{align-items:flex-start;flex-direction:column}.inline-form{align-items:stretch;flex-direction:column}.number-board{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.number-button{padding:9px 0}.event{gap:8px;flex-direction:column}.event time{min-width:0}.topbar{align-items:flex-start}.subtitle{max-width:230px}}

/* Separate public display window */
.display-page{background:#101a2d;color:#f5f7fc;min-height:100vh}
.display-page main{max-width:1800px;margin:0 auto;padding:24px}
.display-header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}
.display-header h1{font-size:clamp(1.8rem,4vw,3rem);margin:0}
.display-code{font-size:1.2rem;color:#b9c9e8;letter-spacing:.14em}
.display-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:22px;align-items:start}
.display-panel{background:#1a2943;border:1px solid #304363;border-radius:18px;padding:22px;box-shadow:0 12px 32px #0003}
.display-panel h2{font-size:1.45rem;color:#dce7fb}
.display-numbers{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}
.display-number{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#263b5f;border:1px solid #3c5680;border-radius:12px;font-size:clamp(1.1rem,2.2vw,2rem);font-weight:800;color:#dbe8ff}
.display-number.latest{background:#e4b33d;color:#18243a;border-color:#ffe08a;box-shadow:0 0 0 3px #e4b33d33}
.display-events{display:flex;flex-direction:column;gap:10px;min-height:130px}
.display-event{background:#253958;border-left:5px solid #55c58a;border-radius:10px;padding:13px 15px;animation:display-in .2s ease-out;transition:opacity .2s}
.display-event.bingo{border-left-color:#f0c44e;background:#514322}
.display-event strong{display:block;font-size:1.2rem;margin-bottom:3px}
.display-event span{color:#d5e0f2;font-size:1rem}
.display-event time{display:block;color:#aebed8;font-size:.78rem;margin-top:5px}
.display-empty{color:#aebed8;padding:12px 0}
.display-status{color:#b9c9e8;margin:0}
@keyframes display-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.display-layout{grid-template-columns:1fr}.display-numbers{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(max-width:560px){.display-page main{padding:12px}.display-panel{padding:14px}.display-header{align-items:flex-start;flex-direction:column}.display-numbers{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}}

.iframe-settings{margin:18px 0}.player-iframe-wrap{width:100%;height:clamp(220px,35vw,460px);margin:0 0 20px;border:1px solid #d8dfeb;border-radius:12px;overflow:hidden;background:#f6f8fc}.player-iframe-wrap iframe{display:block;width:100%;height:100%;border:0;background:#fff}