*{box-sizing:border-box}:root{--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;--font-display: "Karla", var(--font-sans);--color-bg: #0e1116;--color-bg-alt: #171c24;--color-surface: #1f2732;--color-surface-alt: #2a3442;--color-border: #2f3a48;--color-accent: #6366f1;--color-accent-hover: #4f46e5;--color-accent-rgb: 99,102,241;--color-danger: #ef4444;--color-danger-rgb: 239,68,68;--color-success: #10b981;--color-warning: #f59e0b;--color-text: #e2e8f0;--color-text-dim: #94a3b8;--color-win: #fbbf24;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--shadow-sm: 0 1px 2px rgba(0,0,0,.25);--shadow-md: 0 4px 10px -2px rgba(0,0,0,.35);--shadow-lg: 0 10px 30px -5px rgba(0,0,0,.45);--transition: .14s cubic-bezier(.4,0,.2,1);--focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), .35)}body{margin:0;font-family:var(--font-sans);background:radial-gradient(circle at 30% 20%,#1c2530,#0e1116 70%) fixed;color:var(--color-text);min-height:100vh;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}#root{flex:1;display:flex}.app-shell{width:100%;display:grid;grid-template-columns:1fr;padding:clamp(1rem,2vw,2rem)}.app-shell.centered{place-items:center}.game-shell{grid-template-areas:"header" "players" "board" "footer";gap:1.25rem;max-width:1200px;margin-inline:auto}@media (min-width: 960px){.game-shell{grid-template-columns:240px 1fr;grid-template-areas:"header header" "players board" "footer footer"}}.game-header{grid-area:header;display:flex;flex-direction:column;gap:.75rem}.room-title{font-family:var(--font-display);font-weight:600;margin:0;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.5px}.room-code{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));-webkit-background-clip:text;background-clip:text;color:transparent}.meta-line{display:flex;flex-wrap:wrap;gap:.5rem}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem clamp(1.25rem,2vw,2rem);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.panel-elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(145deg,rgba(var(--color-accent-rgb),.08),#fff0);pointer-events:none}.intro-panel,.lobby-panel{max-width:480px;width:100%}.form-stack{display:flex;flex-direction:column;gap:1rem;width:100%}.form-grid.room-form{display:grid;gap:.75rem;width:100%;grid-template-columns:1fr auto auto;align-items:stretch}.input{font:inherit;padding:.85rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-alt);color:var(--color-text);transition:var(--transition)}.input:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--color-accent)}.input.text{font-size:1rem}.input.code{text-align:center;letter-spacing:2px;font-weight:600;font-size:1rem}.btn{--btn-bg: var(--color-surface-alt);--btn-color: var(--color-text);font:inherit;font-weight:600;border-radius:var(--radius-md);border:1px solid var(--color-border);padding:.75rem 1.25rem;cursor:pointer;background:var(--btn-bg);color:var(--btn-color);display:inline-flex;align-items:center;gap:.5rem;position:relative;overflow:hidden;transition:var(--transition)}.btn:not(:disabled):hover{filter:brightness(1.08)}.btn:not(:disabled):active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn.primary{--btn-bg: linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));border:none}.btn.secondary{--btn-bg: var(--color-surface-alt)}.btn.danger{--btn-bg: linear-gradient(135deg, rgba(var(--color-danger-rgb),.9), var(--color-danger));border:none}.btn.ghost{--btn-bg: transparent;border:1px solid var(--color-border)}.btn:disabled{opacity:.45;cursor:not-allowed}.badge{font-size:.7rem;text-transform:uppercase;letter-spacing:.75px;background:var(--color-surface-alt);padding:.35rem .55rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;font-weight:600;border:1px solid var(--color-border)}.badge.conn.connected{background:var(--color-success);color:#062d1f;border-color:var(--color-success)}.badge.conn.disconnected,.badge.conn.error{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.badge.conn.connecting{background:var(--color-warning);color:#301d00;border-color:var(--color-warning)}.badge.phase{background:var(--color-surface-alt)}.badge.phase-finished{background:var(--color-win);color:#3d2e00}.badge.turn{background:rgba(var(--color-accent-rgb),.15);color:var(--color-accent)}.players-panel{grid-area:players;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow-sm)}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.player-list li{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;border-radius:var(--radius-sm);background:var(--color-surface-alt);border:1px solid transparent;position:relative}.player-list li.current{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.turn-indicator{font-size:.75rem;color:var(--color-accent)}.winner-banner{background:linear-gradient(135deg,var(--color-win),#ffd56b);color:#3a2a00;padding:.6rem .8rem;border-radius:var(--radius-md);font-weight:600;text-align:center;box-shadow:var(--shadow-sm)}.inline-warning{font-size:.7rem;color:var(--color-danger);text-align:center}.board-wrapper{grid-area:board;display:flex;justify-content:center}.bingo-card{--cell-size: clamp(54px, 7.5vw, 84px);display:grid;gap:.75rem;grid-template-columns:repeat(5,var(--cell-size));grid-template-rows:repeat(5,var(--cell-size));padding:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);position:relative}.bingo-cell{position:relative;font:600 1.25rem/1 var(--font-display);display:flex;align-items:center;justify-content:center;background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 1px #ffffff08,var(--shadow-sm)}.bingo-cell:hover:not(:disabled){background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));color:#fff}.bingo-cell.held{background:linear-gradient(135deg,#34d399,#059669);color:#053524;border-color:#0f5132;box-shadow:0 4px 10px -2px #10b98180}.bingo-cell.disabled{cursor:not-allowed;opacity:.45}.bingo-cell:focus-visible{outline:none;box-shadow:var(--focus-ring)}.bingo-cell:active:not(.disabled){transform:scale(.96)}@keyframes markPop{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}.bingo-cell.held{animation:markPop .35s ease}.controls-bar{grid-area:footer;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;background:var(--color-surface);border:1px solid var(--color-border);padding:.9rem 1.25rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.app-title,.subheading{font-family:var(--font-display);letter-spacing:.5px}.app-title{margin:0 0 .5rem;font-weight:600}.subheading{margin:0 0 .25rem;font-size:.9rem;text-transform:uppercase;color:var(--color-text-dim);letter-spacing:1px}.tagline{margin:-.5rem 0 1.25rem;color:var(--color-text-dim);font-size:.9rem}.hint{margin:1rem 0 0;font-size:.7rem;color:var(--color-text-dim);letter-spacing:.5px}.player-id{margin:0 0 1rem;font-size:.9rem;color:var(--color-text-dim)}.error.inline-error{color:var(--color-danger);font-size:.75rem;margin-top:.25rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-bg-alt)}::-webkit-scrollbar-thumb{background:var(--color-surface-alt);border-radius:6px;border:2px solid var(--color-bg-alt)}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}@media (prefers-color-scheme: light){:root{--color-bg: #f4f7fa;--color-bg-alt: #e9eef5;--color-text: #1f2937;--color-text-dim: #5b6472;--color-surface: #ffffff;--color-surface-alt: #f1f5f9;--color-border: #d8dee5}body{background:linear-gradient(135deg,#eef2f7,#dbe4ee 65%)}.bingo-cell,.players-panel,.controls-bar,.panel{background:#fff}}