: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}.app-explain-it-active{height:100dvh;max-height:100dvh;min-height:100dvh;display:flex;flex-direction:column;align-items:stretch;place-content:flex-start stretch;padding:.35rem .5rem .5rem}.app-explain-it-active .explain-it-active-display{flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;display:flex}.explain-it-active-display{width:min(100%,42rem);margin:0 auto}.explain-it-game-surface{flex:1 1 auto;min-height:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-areas:"team-tl center team-tr" "words-left center words-right" "team-bl center team-br";gap:clamp(.35rem,.9vw,.7rem);padding:clamp(.45rem,1.2vw,.85rem);border-radius:clamp(.6rem,1.2vw,1rem);background:radial-gradient(circle at 18% 12%,rgba(88,28,135,.35),transparent 42%),radial-gradient(circle at 82% 88%,rgba(30,64,175,.35),transparent 45%),linear-gradient(160deg,#050816,#0b1224 48%,#111827);border:1px solid rgba(99,102,241,.35);box-shadow:0 0 40px #3b82f61f,inset 0 0 60px #0f172aa6;position:relative}.explain-it-title{margin:0;flex-shrink:0;font-size:clamp(1.45rem,3vw,2.5rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f8fafc;text-shadow:0 0 12px rgba(147,197,253,.55),0 0 28px rgba(59,130,246,.35)}.explain-it-center{grid-area:center;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(.35rem,1vw,.75rem);padding:clamp(.15rem,.6vw,.5rem) clamp(.25rem,.8vw,.75rem)}.explain-it-center-phase{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.25rem,.75vw,.65rem);min-height:0;min-width:0;width:100%}.explain-it-active-team{margin:0;font-size:clamp(1.05rem,2.2vw,1.6rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cbd5e1}.explain-it-active-explainer{margin:0;font-size:clamp(1.25rem,2.8vw,2rem);font-weight:700;color:#f1f5f9;text-shadow:0 0 16px rgba(148,163,184,.35)}.explain-it-waiting-message{margin:0;font-size:clamp(.95rem,1.6vw,1.2rem);color:#94a3b8}.explain-it-final-guess-headline{margin:0;font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fde68a;text-shadow:0 0 18px rgba(251,191,36,.45)}.explain-it-final-guess-subhead{margin:0;font-size:clamp(1rem,2vw,1.45rem);font-weight:600;color:#fcd34d}.explain-it-turn-stats-compact{margin:0;font-size:clamp(.85rem,1.5vw,1.1rem);font-weight:600;color:#93c5fd;font-variant-numeric:tabular-nums}.explain-it-provisional-hint{margin:0;font-size:clamp(.75rem,1.2vw,.95rem);color:#94a3b8}.explain-it-timer{position:relative;width:clamp(9rem,22vw,15.5rem);aspect-ratio:1;margin:clamp(.15rem,.6vw,.45rem) 0;flex-shrink:0}.explain-it-timer-ring{width:100%;height:100%;transform:rotate(-90deg)}.explain-it-timer-ring-track{fill:none;stroke:#94a3b840;stroke-width:5}.explain-it-timer-ring-progress{fill:none;stroke:#38bdf8;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(56,189,248,.75));transition:stroke-dashoffset .25s linear}.explain-it-timer-value{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(2.5rem,6.5vw,4.5rem);font-weight:800;font-variant-numeric:tabular-nums;color:#f8fafc;text-shadow:0 0 14px rgba(56,189,248,.65),0 0 28px rgba(59,130,246,.45)}.explain-it-team-card{min-width:0;min-height:0;padding:clamp(.45rem,1vw,.75rem);border-radius:clamp(.45rem,.9vw,.7rem);background:#0f172ab8;border:2px solid rgba(148,163,184,.35);text-align:left;box-shadow:0 4px 18px #00000040}.explain-it-team-card-top-left{grid-area:team-tl;align-self:start}.explain-it-team-card-top-right{grid-area:team-tr;align-self:start}.explain-it-team-card-bottom-left{grid-area:team-bl;align-self:end}.explain-it-team-card-bottom-right{grid-area:team-br;align-self:end}.explain-it-team-card-name{margin:0;font-size:clamp(.7rem,1.2vw,.9rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.explain-it-team-card-score{margin:clamp(.1rem,.3vw,.2rem) 0 0;font-size:clamp(1.5rem,3vw,2.35rem);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}.explain-it-team-card-roster{margin:clamp(.15rem,.4vw,.3rem) 0 0;font-size:clamp(.68rem,1.1vw,.85rem);color:#cbd5e1;line-height:1.35;overflow:hidden;text-overflow:ellipsis}.explain-it-team-green{border-color:#22c55e8c}.explain-it-team-green .explain-it-team-card-name,.explain-it-team-green .explain-it-team-card-score{color:#86efac}.explain-it-team-yellow{border-color:#eab3088c}.explain-it-team-yellow .explain-it-team-card-name,.explain-it-team-yellow .explain-it-team-card-score{color:#fde047}.explain-it-team-blue{border-color:#3b82f68c}.explain-it-team-blue .explain-it-team-card-name,.explain-it-team-blue .explain-it-team-card-score{color:#93c5fd}.explain-it-team-red{border-color:#ef44448c}.explain-it-team-red .explain-it-team-card-name,.explain-it-team-red .explain-it-team-card-score{color:#fca5a5}.explain-it-team-card-active.explain-it-team-green{background:#16653459;border-color:#4ade80;box-shadow:0 0 22px #22c55e73,inset 0 0 18px #22c55e1f}.explain-it-team-card-active.explain-it-team-yellow{background:#713f1259;border-color:#facc15;box-shadow:0 0 22px #eab30873,inset 0 0 18px #eab3081f}.explain-it-team-card-active.explain-it-team-blue{background:#1e40af59;border-color:#60a5fa;box-shadow:0 0 22px #3b82f673,inset 0 0 18px #3b82f61f}.explain-it-team-card-active.explain-it-team-red{background:#7f1d1d59;border-color:#f87171;box-shadow:0 0 22px #ef444473,inset 0 0 18px #ef44441f}.explain-it-word-pile{min-width:0;width:100%;height:auto;align-self:center;min-height:clamp(8.5rem,24dvh,12.5rem);max-height:clamp(11rem,44dvh,28rem);display:flex;flex-direction:column;gap:clamp(.2rem,.5vw,.4rem);padding:clamp(.35rem,.8vw,.6rem);border-radius:clamp(.45rem,.9vw,.7rem);background:#0f172a8c;border:1px solid rgba(148,163,184,.25);overflow:hidden}.explain-it-word-pile-skipped{grid-area:words-left;border-color:#f472b673;box-shadow:inset 0 0 20px #ec489914}.explain-it-word-pile-correct{grid-area:words-right;border-color:#4ade8073;box-shadow:inset 0 0 20px #22c55e14}.explain-it-word-pile-title{margin:0;font-size:clamp(.65rem,1.1vw,.85rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase}.explain-it-word-pile-skipped .explain-it-word-pile-title{color:#f9a8d4}.explain-it-word-pile-correct .explain-it-word-pile-title{color:#86efac}.explain-it-word-pile-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:clamp(.15rem,.35vw,.3rem);flex:1 1 auto;min-height:0;max-height:clamp(6.5rem,30dvh,18rem);overflow:hidden}.explain-it-word-pile-list li{font-size:clamp(.72rem,1.15vw,.95rem);font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.explain-it-word-pile-skipped .explain-it-word-pile-list li{color:#fbcfe8}.explain-it-word-pile-correct .explain-it-word-pile-list li{color:#bbf7d0}.explain-it-word-pile-empty{margin:0;font-size:clamp(.7rem,1.1vw,.9rem);color:#64748b}.explain-it-word-pile-earlier{margin:0;font-size:clamp(.65rem,1vw,.8rem);color:#94a3b8;font-weight:600}.explain-it-turn-completed-overlay,.explain-it-winner-screen{grid-column:1 / -1;grid-row:1 / -1;z-index:2;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,1.2vw,1rem);padding:clamp(1rem,2.5vw,2rem);border-radius:clamp(.6rem,1.2vw,1rem);text-align:center}.explain-it-turn-completed-overlay{background:#0f172aeb;border:2px solid rgba(96,165,250,.65);box-shadow:0 0 36px #3b82f659,inset 0 0 40px #1e40af33}.explain-it-turn-completed-heading{margin:0;font-size:clamp(1.5rem,3.5vw,2.5rem);letter-spacing:.1em;text-transform:uppercase;color:#f8fafc;text-shadow:0 0 18px rgba(96,165,250,.55)}.explain-it-turn-completed-score{margin-bottom:.5rem}.explain-it-turn-completed-team{margin:0;font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:700;text-transform:uppercase}.explain-it-turn-completed-delta{margin:.25rem 0 0;font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;font-variant-numeric:tabular-nums}.explain-it-turn-completed-reason{margin:.15rem 0 0;color:#93c5fd;font-size:clamp(.85rem,1.4vw,1.05rem)}.explain-it-turn-completed-word{margin:.5rem 0 0;font-size:clamp(.95rem,1.6vw,1.15rem);color:#d1d5db}.explain-it-winner-screen{background:#064e3be0;border:2px solid rgba(74,222,128,.65);box-shadow:0 0 40px #22c55e59,inset 0 0 40px #16653440}.explain-it-winner-headline{margin:0;font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800;text-transform:uppercase;color:#bbf7d0;text-shadow:0 0 22px rgba(74,222,128,.55)}.explain-it-final-scores{width:min(100%,28rem)}.explain-it-final-scores h3{margin:0 0 .65rem;font-size:clamp(.95rem,1.6vw,1.15rem);color:#d1fae5;letter-spacing:.06em;text-transform:uppercase}.explain-it-final-score-row{display:flex;justify-content:space-between;gap:1rem;margin:.2rem 0;font-size:clamp(1rem,2vw,1.35rem);font-weight:700;font-variant-numeric:tabular-nums}.explain-it-final-score-row.explain-it-team-green{color:#86efac}.explain-it-final-score-row.explain-it-team-yellow{color:#fde047}.explain-it-final-score-row.explain-it-team-blue{color:#93c5fd}.explain-it-final-score-row.explain-it-team-red{color:#fca5a5}