:root{color:#f5f5f5;background:#111827;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}*{box-sizing:border-box}body{margin:0;min-height:100vh}.app{min-height:100vh;display:grid;place-content:start center;text-align:center;padding:1rem 1rem 1.5rem;width:100%}.app:has(.lobby-panel){padding:.5rem .75rem .75rem}.app:has(.lobby-panel) .eyebrow{margin-bottom:.25rem;font-size:.75rem}.app-game-active{padding-top:.5rem}.app-game-active .eyebrow{margin-bottom:.25rem;font-size:.65rem}.eyebrow{margin:0 0 .5rem;color:#93c5fd;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase}h1{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3rem)}.pairing-panel{max-width:32rem;margin:0 auto 1.5rem;padding:1.5rem;border:1px solid #374151;border-radius:.75rem;background:#1f2937;text-align:left}.connection-indicator{position:fixed;top:max(.5rem,env(safe-area-inset-top,0px));left:max(.5rem,env(safe-area-inset-left,0px));z-index:60;display:inline-flex;align-items:center;gap:.4rem;pointer-events:none}.connection-indicator-dot{width:.5rem;height:.5rem;border-radius:999px;flex-shrink:0}.connection-indicator-connected .connection-indicator-dot{background:#22c55e;box-shadow:0 0 0 1px #22c55e66}.connection-indicator-connecting .connection-indicator-dot{background:#eab308;box-shadow:0 0 0 1px #eab30873}.connection-indicator-disconnected .connection-indicator-dot{background:#ef4444;box-shadow:0 0 0 1px #ef444473}.connection-indicator-connecting,.connection-indicator-disconnected{padding:.25rem .55rem .25rem .4rem;border-radius:999px;background:#111827e6;border:1px solid #374151;box-shadow:0 2px 8px #00000040;font-size:.75rem;line-height:1.2;color:#d1d5db}.connection-indicator-label{font-weight:500}.pairing-panel h2{margin:0 0 1rem;font-size:1.125rem}.pairing-status{margin:0 0 1rem;font-size:1.125rem;font-weight:600}.pairing-status-host-connected{color:#86efac}.pairing-status-waiting-for-host{color:#fde68a}.pairing-status-pairing-expired,.pairing-status-pairing-error,.pairing-status-host-disconnected{color:#fca5a5}.pairing-instruction{margin:0;color:#d1d5db;font-size:.8125rem}.qr-wrapper{display:inline-block;padding:.5rem;background:#fff;border-radius:.5rem;line-height:0}.pairing-url{margin:0 0 .75rem;font-family:Consolas,Monaco,Courier New,monospace;font-size:.875rem;word-break:break-all;color:#e5e7eb}.pairing-expiry{margin:0;color:#9ca3af;font-size:.875rem}.warning-box{margin:0 0 1rem;padding:.875rem 1rem;border-radius:.5rem;background:#451a03;color:#fde68a;font-size:.9rem}.success-message{margin:0;color:#bbf7d0}.lobby-panel{width:min(100%,72rem);margin:0 auto;padding:.75rem;border:1px solid #374151;border-radius:.75rem;background:#1f2937;text-align:left}.lobby-layout{display:grid;grid-template-columns:minmax(17rem,23rem) minmax(0,1fr);gap:.75rem;align-items:start}.join-panel{display:grid;gap:.5rem;padding:.65rem .75rem;border:1px solid #374151;border-radius:.65rem;background:#111827}.join-panel-overview{display:grid;gap:.35rem}.join-panel-game{margin:0;font-size:.875rem;color:#d1d5db}.join-panel-status{margin:0;font-size:.8125rem;color:#d1d5db}.config-summary-grid{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem .65rem;font-size:.8125rem}.config-summary-grid div{display:grid;gap:.05rem}.config-summary-grid dt{font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:#9ca3af}.config-summary-grid dd{margin:0;color:#e5e7eb}.join-room-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}.join-room-code-block{min-width:0}.join-panel-scan{display:grid;gap:.35rem}.join-panel-qr-row{display:flex;align-items:flex-start;gap:.65rem}.join-panel .pairing-url.join-url-text{margin:0;flex:1;min-width:0;font-size:.75rem;line-height:1.35;color:#cbd5e1;-webkit-user-select:all;user-select:all;text-align:left}.join-panel .warning-box{margin:0;padding:.45rem .6rem;font-size:.8125rem}.seating-panel{min-width:0;padding:.65rem .75rem;border:1px solid #374151;border-radius:.65rem;background:#111827}.seating-title{margin:0 0 .5rem;font-size:.9375rem}.table-label{color:#6b7280;font-size:.875rem;text-transform:uppercase;letter-spacing:.08em}@media(max-width:900px){.lobby-layout{grid-template-columns:1fr}.join-panel-qr-row{flex-direction:column;align-items:center}.join-panel .pairing-url.join-url-text{text-align:center}}.lobby-panel h2{margin:0;font-size:1rem}.room-code-label{margin:0;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:#9ca3af}.room-code{margin:.1rem 0 0;font-size:1.5rem;font-weight:700;letter-spacing:.18em;line-height:1.1}.player-count{margin:0;color:#d1d5db;font-size:.875rem;text-align:right;white-space:nowrap}.empty-lobby{margin:.5rem 0 0;color:#9ca3af;font-size:.875rem}.seating-panel .player-list{margin:.35rem 0 0;gap:.35rem}.seating-panel .player-list li{padding:.45rem .6rem;font-size:.875rem}.explain-it-team-rosters{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem}.explain-it-team-roster h4{margin:0 0 .3rem;font-size:.6875rem;letter-spacing:.05em}.explain-it-team-roster .player-list{margin:0}.explain-it-team-roster .player-list li{padding:.35rem .45rem;font-size:.8125rem}.explain-it-team-roster .empty-team{color:#9ca3af;font-size:.8125rem}.player-list{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem}.player-list li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-radius:.5rem;background:#111827}.player-list .online{color:#86efac}.player-list .offline{color:#fca5a5}.status-banner{margin:0 0 1rem;color:#fde68a;font-weight:600}.seating-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(3.75rem,auto));gap:.5rem;margin:0}.seat-position-top-left{grid-column:1;grid-row:1}.seat-position-top-center{grid-column:2;grid-row:1}.seat-position-top-right{grid-column:3;grid-row:1}.seat-position-middle-left{grid-column:1;grid-row:2}.seat-position-middle-right{grid-column:3;grid-row:2}.seat-position-bottom-left{grid-column:1;grid-row:3}.seat-position-bottom-center{grid-column:2;grid-row:3}.seat-position-bottom-right{grid-column:3;grid-row:3}.table-center{grid-column:2;grid-row:2;display:grid;place-items:center;text-align:center;padding:.5rem;border:1px dashed #4b5563;border-radius:.5rem;background:#0f172a;min-height:4.5rem}.seat-card{min-height:3.75rem;padding:.45rem .5rem;border-radius:.5rem;background:#111827;border:1px solid #374151}.seat-label{margin:0;font-size:.7rem;color:#9ca3af;text-transform:uppercase}.seat-player-name{margin:.35rem 0 0;font-weight:600}.seat-empty{margin:.35rem 0 0;color:#6b7280}.unassigned-players h3{margin:.5rem 0 .35rem;font-size:.875rem}.game-panel{width:min(100%,72rem);margin:0 auto;text-align:left}.room-code-secondary{margin:0 0 .5rem;font-size:.75rem;color:#9ca3af;text-align:right}.game-table-layout{display:grid;grid-template-columns:minmax(8.5rem,1fr) minmax(18rem,3fr) minmax(8.5rem,1fr);grid-template-rows:minmax(4.5rem,auto) minmax(18.75rem,2fr) minmax(4.5rem,auto);grid-template-areas:"top-left top top-right" "left table right" "bottom-left bottom bottom-right";gap:.5rem;width:100%}.game-table-center-cell{grid-area:table;min-height:18.75rem;min-width:0}.pixi-table-shell{width:100%;height:100%;min-height:18.75rem;border:1px solid #374151;border-radius:.75rem;background:radial-gradient(circle at center,#1f2937,#111827 70%);overflow:hidden}.pixi-card-table{width:100%;height:100%}.game-table-seat,.game-seat{min-height:4.5rem;padding:.45rem .5rem;border-radius:.5rem;background:#111827;border:1px solid #374151;text-align:center}.game-seat .seat-label{margin:0;font-size:.65rem;color:#9ca3af;text-transform:uppercase}.game-seat .seat-player-name{margin:.15rem 0 0;font-size:.85rem;font-weight:600}.seat-connection{margin:.15rem 0 0;font-size:.7rem}.game-seat-active{border-color:#60a5fa;box-shadow:0 0 0 2px #60a5fa59}.seat-hand-count{margin:.25rem 0 0;font-size:.85rem;color:#d1d5db}.turn-marker{margin:.35rem 0 0;font-size:.75rem;color:#93c5fd;font-weight:600}.winner-banner{margin:1.5rem 0 0;padding:1rem;border-radius:.5rem;background:#14532d;color:#bbf7d0;font-size:1.25rem;font-weight:700;text-align:center}.card-face{display:grid;place-items:center;width:4rem;height:5.5rem;border-radius:.5rem;background:#f9fafb;border:1px solid #d1d5db;font-weight:700;font-size:1rem;color:#111827}.card-face-red{color:#dc2626}.card-face-black{color:#111827}.card-face-joker{color:#7c3aed}.explain-it-active-display{width:min(100%,42rem);margin:0 auto}.explain-it-scoreboard-team{margin-bottom:.75rem}.explain-it-scoreboard-team-header{display:flex;justify-content:space-between;gap:1rem;font-weight:700;text-transform:uppercase}.explain-it-scoreboard-team-name{letter-spacing:.04em}.explain-it-scoreboard-team-score{font-variant-numeric:tabular-nums}.explain-it-scoreboard-roster{margin:.2rem 0 0;color:#d1d5db;font-size:.95rem}.explain-it-turn-completed-overlay{padding:2rem 1.5rem;border-radius:.75rem;background:#1f2937;border:2px solid #60a5fa}.explain-it-turn-completed-overlay h2{margin:0 0 1.25rem;font-size:clamp(1.5rem,4vw,2.25rem);letter-spacing:.08em}.explain-it-turn-completed-score{margin-bottom:1rem}.explain-it-turn-completed-team{margin:0;font-size:1.5rem;font-weight:700;text-transform:uppercase}.explain-it-turn-completed-delta{margin:.25rem 0 0;font-size:1.75rem;font-weight:700}.explain-it-turn-completed-reason{margin:.15rem 0 0;color:#93c5fd;font-size:1rem}.explain-it-turn-completed-word{margin:1.25rem 0 0;font-size:1.1rem;color:#d1d5db}.explain-it-winner-screen{padding:2rem 1.5rem;border-radius:.75rem;background:#14532d;border:2px solid #4ade80}.explain-it-winner-screen h2{margin:0 0 1rem;font-size:clamp(1.5rem,4vw,2.25rem);letter-spacing:.08em}.explain-it-winner-headline{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3rem);font-weight:800;text-transform:uppercase;color:#bbf7d0}.explain-it-final-scores h3{margin:0 0 .75rem;font-size:1.1rem;color:#d1d5db}.explain-it-final-scores p{margin:.25rem 0;font-size:1.25rem;font-weight:600}