:root{--color-felt-light: #2A1F2F;--color-felt-dark: #1A1422;--color-surface: #1F1828;--color-border: #3A2D4A;--color-text: #F5F5F0;--color-text-muted: #9A8AB8;--color-ink: #1A1422;--color-gold: #F0C040;--color-gold-hover: #F7D469;--color-teal: #3DC4C7;--color-cta: #3DBA52;--color-cta-hover: #4DCE65;--color-risk: #F0A030;--color-red: #E03048;--color-navy: #1A2540;--color-card: #F5F5F0}.room-view{box-sizing:border-box;width:100%;height:100%;min-height:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%239A8AB8' fill-opacity='0.05' font-size='22' font-family='monospace'%3E%3Ctext x='28' y='46' rotate='12'%3E%E2%99%A0%3C/text%3E%3Ctext x='176' y='92' rotate='-9'%3E%E2%99%A5%3C/text%3E%3Ctext x='86' y='168' rotate='6'%3E%E2%99%A6%3C/text%3E%3Ctext x='212' y='228' rotate='-14'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,var(--color-felt-light) 0%,var(--color-felt-dark) 60%);color:var(--color-text);display:flex;flex-direction:column;align-items:stretch;padding:24px;overflow:hidden;font-family:inherit}.room-view[data-in-room=true][data-phase=in_game]{background-image:linear-gradient(180deg,var(--color-felt-light) 0%,var(--color-felt-dark) 60%);padding:0;height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center}.room-header{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:32px;position:relative}.room-header[data-mode=compact]{margin-bottom:16px;min-height:40px}.room-identity-corner{position:absolute;top:0;right:0;display:flex;align-items:center;gap:10px}.room-title{margin:0;font-size:28px;color:var(--color-gold);letter-spacing:.05em;text-shadow:0 0 14px rgba(240,192,64,.35),0 0 36px rgba(240,192,64,.18)}.room-subtitle{margin:0;font-size:13px;color:var(--color-text-muted)}.room-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:24px;max-width:720px;margin:0 auto;width:100%}.room-body[data-mode=game]{max-width:none;margin:0;padding:0;overflow:visible;align-items:stretch;justify-content:flex-start}.room-placeholder{max-width:480px;text-align:center;padding:24px;border:1px dashed var(--color-border);border-radius:8px;background:#1f182873;color:var(--color-text-muted);font-size:14px;line-height:1.5}.room-placeholder code{background:var(--color-surface);color:var(--color-gold);padding:1px 6px;border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.room-footer{margin-top:32px;padding-top:8px;text-align:center;font-size:12px;letter-spacing:.03em;color:var(--color-text-muted)}.identity-panel{box-sizing:border-box;width:100%;max-width:480px;margin:0 auto;padding:18px 20px;background:#2a2a2a8c;border:1px solid #3A3A3A;border-radius:10px;color:#f5f5f0;display:flex;flex-direction:column;gap:16px}.identity-heading{margin:0;font-size:14px;font-weight:700;color:#c0bfc0;text-transform:uppercase;letter-spacing:.06em}.identity-row{display:flex;align-items:flex-start;gap:16px}.identity-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.identity-label{font-size:12px;color:#9a8ab8;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.identity-name-input{width:100%;box-sizing:border-box;min-height:44px;padding:8px 12px;background:#1f1828;color:#f5f5f0;border:1px solid #5A5A5A;border-radius:6px;font-family:inherit;font-size:15px}.identity-name-input:focus{outline:2px solid #F0C040;outline-offset:1px;border-color:#f0c040}.identity-name-input[aria-invalid=true]{border-color:#e03048}.identity-name-error{color:#e03048;font-size:12px;font-weight:600}.identity-counter{color:#7c9cbf;font-size:12px;text-align:right}.identity-colors{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.identity-color-row{display:flex;flex-wrap:wrap;gap:10px}.identity-color-swatch{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 1px #ffffff2e,0 1px 2px #00000059}.identity-color-swatch:focus-visible{outline:2px solid #F0C040;outline-offset:3px}.identity-color-swatch.selected{border-color:#f5f5f0;box-shadow:0 0 0 2px #1a1422,0 0 0 4px #f0c040}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.identity-loading{color:#9a8ab8;font-size:13px;text-align:center}.identity-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;background:#2a2a2ab3;border:1px solid #3A3A3A;border-radius:999px;color:#f5f5f0;font-family:inherit;font-size:13px;cursor:pointer;transition:border-color .12s ease,background-color .12s ease}.identity-badge:hover,.identity-badge:focus-visible{border-color:#f0c040;background:#3a3a3ad9;outline:none}.identity-badge-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity-modal-backdrop{position:fixed;inset:0;background:#0a0810b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}.identity-modal{width:100%;max-width:480px;background:#1a1422;border:1px solid #3A3A3A;border-radius:12px;box-shadow:0 24px 48px #00000080;color:#f5f5f0;padding:20px 22px;display:flex;flex-direction:column;gap:16px}.identity-modal-header{display:flex;align-items:center;justify-content:space-between}.identity-modal-title{margin:0;font-size:16px;color:#f0c040;letter-spacing:.05em;text-transform:uppercase}.identity-modal-close{background:transparent;border:0;color:#c0bfc0;font-size:24px;line-height:1;cursor:pointer;padding:4px 10px;border-radius:6px}.identity-modal-close:hover,.identity-modal-close:focus-visible{color:#f5f5f0;background:#ffffff0f;outline:none}.identity-modal-footer{display:flex;justify-content:flex-end}.identity-modal-done{min-width:96px;padding:10px 18px;background:#3dba52;border:0;border-radius:8px;color:#0a0810;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}.identity-modal-done:hover,.identity-modal-done:focus-visible{filter:brightness(1.08);outline:2px solid #F0C040;outline-offset:2px}.hero-animation{width:min(1080px,100%,90vh);max-width:100%;aspect-ratio:1080 / 600;margin:12px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #0006;outline:1px solid rgba(240,192,64,.18);outline-offset:-1px;opacity:.95}.hero-animation__canvas{display:block;width:100%;height:100%}@media (prefers-reduced-motion: reduce){.hero-animation{transition:none}}.hero-animation--mobile{width:min(360px,100%);aspect-ratio:360 / 210;animation:hero-mobile-float 6s ease-in-out infinite}@keyframes hero-mobile-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.hero-animation--mobile{animation:none}}.room-occupant-kick{margin-left:auto;min-height:36px;padding:6px 12px;background:transparent;color:#e03048;border:1px solid #E03048;border-radius:6px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer}.room-occupant-kick:hover{background:#e030482e}.room-occupant-kick:focus-visible{outline:2px solid #F0C040;outline-offset:2px}.host-crown-badge{display:inline-flex;align-items:center;gap:4px;line-height:1}.host-crown-label{font-size:10px;font-weight:700;color:#f0c040;text-transform:uppercase;letter-spacing:.04em}.room-removed-banner{padding:14px 18px;background:#e030482e;border:1px solid #E03048;border-radius:8px;color:#f5f5f0;font-weight:700;text-align:center}.room-occupant-ready{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:13px;font-weight:700;line-height:1;user-select:none}.room-occupant-ready.ready{color:#3dba52}.room-occupant-ready.not-ready{color:#5a5a5a}.team-columns{display:flex;flex-direction:column;gap:12px}.team-columns-heading{margin:0;font-size:13px;font-weight:700;color:#c0bfc0;text-transform:uppercase;letter-spacing:.06em}.team-columns-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.team-column{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#1a142299;border:1px solid #3A3A3A;border-radius:8px}.team-column.team-A{border-color:#5a7a9a}.team-column.team-B{border-color:#9a6a7a}.team-column-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.team-column-title{margin:0;font-size:14px;font-weight:700;color:#f5f5f0;letter-spacing:.04em}.team-column-count{font-size:11px;font-weight:700;color:#9a8ab8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.team-join-btn{min-height:44px;padding:8px 12px;background:transparent;color:#f0c040;border:1px solid #F0C040;border-radius:6px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer}.team-join-btn:hover:not(:disabled){background:#f0c04024}.team-join-btn:focus-visible{outline:2px solid #F0C040;outline-offset:2px}.team-join-btn:disabled,.team-join-btn[aria-disabled=true]{opacity:.4;cursor:not-allowed;color:#9a8ab8;border-color:#5a5a5a}.team-occupant-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.team-occupant{display:flex;align-items:center;gap:10px;padding:6px 8px;background:#1f1828b3;border:1px solid transparent;border-radius:6px}.team-occupant.is-you{border-color:#f0c040}.team-occupant-meta,.team-occupant-name-row{display:flex;align-items:center;gap:6px;min-width:0}.team-occupant-name{font-weight:700;color:#f5f5f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-occupant.is-you .team-occupant-name{color:#f0c040}.team-occupant-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-left:auto}.team-column-empty{padding:6px 8px;font-size:12px;font-style:italic;color:#6a6a6a;border:1px dashed #3A3A3A;border-radius:6px;text-align:center}.team-unteamed{display:flex;flex-direction:column;gap:6px;padding-top:4px;border-top:1px dashed #3A3A3A}.team-unteamed-title{margin:0;font-size:11px;font-weight:700;color:#9a8ab8;text-transform:uppercase;letter-spacing:.06em}@media (max-width: 420px){.team-columns-grid{grid-template-columns:1fr}}.room-settings{box-sizing:border-box;width:100%;max-width:480px;margin:0 auto;padding:18px 20px;background:#2a2a2a73;border:1px solid var(--color-border);border-radius:10px;color:var(--color-text);display:flex;flex-direction:column;gap:14px}.room-settings.readonly{background:#1f182873}.room-settings-heading{margin:0;font-size:13px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.room-settings-group{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0}.room-settings-label{font-size:12px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.room-settings-radio-row{display:flex;gap:16px;flex-wrap:wrap}.room-settings-radio{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;cursor:pointer}.room-settings-radio input{width:18px;height:18px;accent-color:var(--color-gold);cursor:pointer}.room-settings-radio input:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-settings-select{width:100%;min-height:44px;padding:8px 12px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;font-family:inherit;font-size:15px;cursor:pointer}.room-settings-select:focus{outline:2px solid var(--color-gold);outline-offset:1px;border-color:var(--color-gold)}.room-settings-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.room-settings-toggle input{width:20px;height:20px;accent-color:var(--color-cta);cursor:pointer}.room-settings-toggle input:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-settings-readonly-list{margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.room-settings-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--color-border)}.room-settings-row:last-child{border-bottom:0}.room-settings-row dt{color:var(--color-text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.room-settings-row dd{margin:0;color:var(--color-text);font-weight:700}.start-game-wrap{display:flex;flex-direction:column;gap:6px;align-items:stretch}.start-game-button{min-height:56px;padding:14px 18px;background:var(--color-cta);color:var(--color-ink);border:none;border-radius:8px;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;letter-spacing:.04em}.start-game-button:hover:not(:disabled){background:var(--color-cta-hover)}.start-game-button:disabled,.start-game-button[aria-disabled=true]{background:var(--color-border);color:var(--color-text-muted);cursor:not-allowed;opacity:.75}.start-game-button:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}.start-game-reason{margin:0;font-size:12px;color:var(--color-risk);text-align:center}.game-starting-placeholder{box-sizing:border-box;width:100%;max-width:560px;margin:24px auto 0;padding:32px 24px;background:#1f1828bf;border:2px dashed var(--color-risk);border-radius:12px;color:var(--color-text);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.game-starting-title{margin:0;font-size:22px;color:var(--color-gold);letter-spacing:.04em}.game-starting-line{margin:0;font-size:14px;color:var(--color-text-muted)}.game-starting-placeholder-tag{margin:0;font-size:12px;color:var(--color-risk);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.game-starting-return{margin-top:8px;min-height:44px;padding:8px 16px;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:6px;font-family:inherit;font-size:12px;cursor:pointer}.game-starting-return:hover{border-color:var(--color-gold);color:var(--color-gold)}.game-starting-return:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.networked-game-view{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}.networked-game-header{display:flex;align-items:center;gap:12px;font-family:inherit;color:var(--text-primary, var(--color-text));width:100%;max-width:1024px;padding:12px 16px;box-sizing:border-box}.networked-game-header-spacer{flex:1}.networked-game-status{font-weight:600;font-size:14px}.networked-game-toast{background:#dc3c3c2e;color:#f5c0c0;padding:4px 12px;border-radius:4px;font-size:12px;border:1px solid rgba(220,60,60,.45)}.networked-game-leave{background:transparent;color:var(--color-text);border:1px solid var(--color-text-muted);border-radius:6px;padding:6px 14px;font-family:inherit;font-size:13px;cursor:pointer}.networked-game-leave:hover,.networked-game-leave:focus-visible{border-color:var(--color-gold);outline:none}.networked-end-of-hand{display:flex;justify-content:center}.networked-conn-banner{width:100%;max-width:1024px;box-sizing:border-box;padding:8px 16px;border-radius:6px;background:#dc3c3c2e;border:1px solid rgba(220,60,60,.45);color:#f5c0c0;font-size:13px;font-weight:600;text-align:center}.reconnect-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0810b8;z-index:60}.reconnect-modal__panel{background:var(--color-surface);border:1px solid rgba(154,138,184,.45);border-radius:10px;padding:24px 28px;max-width:360px;text-align:center;color:var(--text-primary, var(--color-text))}.reconnect-modal__title{margin:0 0 8px;font-size:18px}.reconnect-modal__room{margin:0 0 16px;font-size:13px;color:var(--color-text-muted)}.reconnect-modal__actions{display:flex;gap:12px;justify-content:center}.reconnect-modal__rejoin{background:var(--color-cta);color:#10240f;border:none;border-radius:6px;padding:8px 18px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}.reconnect-modal__leave{background:transparent;color:var(--color-text);border:1px solid var(--color-text-muted);border-radius:6px;padding:8px 18px;font-family:inherit;font-size:14px;cursor:pointer}.networked-game-stage{display:flex;flex-direction:row;align-items:flex-start;gap:16px;flex-wrap:wrap;justify-content:center;width:100%}.event-log-panel{flex:1 1 220px;min-width:200px;max-width:320px;height:fit-content;max-height:600px;align-self:flex-start;display:flex;flex-direction:column;box-sizing:border-box;padding:10px 12px;background:#14101c8c;border:1px solid rgba(154,138,184,.35);border-radius:8px;color:var(--text-primary, var(--color-text))}.event-log-title{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}.event-log-list{list-style:none;margin:0;padding:0;max-height:520px;overflow-y:auto;font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:2px}.event-log-line{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.04);word-break:break-word}.event-log-empty{padding:2px 4px;color:var(--color-text-muted);font-style:italic}@media (max-width: 760px){.event-log-panel{flex-basis:100%;max-width:none;align-self:auto}.event-log-list{max-height:180px}}.hit-zone--shake{animation:hit-zone-shake .36s ease-in-out;box-shadow:0 0 0 2px var(--color-red),0 0 10px #e0304873;border-radius:6px}@keyframes hit-zone-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.illegal-play-msg{position:absolute;transform:translate(-50%,-100%);background:var(--color-surface);color:var(--color-red);border:1px solid var(--color-red);border-radius:6px;padding:5px 10px;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none;z-index:5;animation:illegal-msg-pop .18s ease-out}@keyframes illegal-msg-pop{0%{opacity:0;transform:translate(-50%,-100%) translateY(4px)}to{opacity:1;transform:translate(-50%,-100%)}}@media (prefers-reduced-motion: reduce){.hit-zone--shake,.illegal-play-msg{animation:none}}.turn-timer-ring{position:absolute;pointer-events:none;z-index:4;display:grid;place-items:center}.turn-timer-ring__track{fill:var(--color-surface);stroke:var(--color-border);stroke-width:3}.turn-timer-ring__fill{fill:none;stroke:var(--color-gold);stroke-width:3;stroke-linecap:round;transition:stroke .2s linear}.turn-timer-ring__secs{position:absolute;font-size:13px;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;letter-spacing:.1em;margin-right:-.1em}.turn-timer-ring--urgent .turn-timer-ring__fill{stroke:var(--color-red)}.turn-timer-ring--urgent .turn-timer-ring__secs{color:var(--color-red);animation:timer-urgent-pulse .6s ease-in-out infinite}@keyframes timer-urgent-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}@media (prefers-reduced-motion: reduce){.turn-timer-ring--urgent .turn-timer-ring__secs{animation:none}}.networked-game-view[data-portrait=true] .networked-game-header{flex-wrap:nowrap;gap:6px;padding:6px 8px;min-height:44px;align-items:center}.networked-game-view[data-portrait=true] .networked-game-status{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}.networked-game-view[data-portrait=true] .networked-game-leave{padding:6px 8px;font-size:12px;white-space:nowrap}.networked-game-view[data-portrait=true] .networked-game-stage{justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px)}.log-sheet-toggle{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;min-height:44px;padding:8px 14px;background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-text-muted);border-radius:22px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #0a08108c}.log-sheet{position:fixed;left:0;right:0;bottom:0;z-index:29;max-height:45vh;overflow:hidden;background:var(--color-surface);border-top:1px solid var(--color-border);border-radius:14px 14px 0 0;padding:10px 12px calc(56px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 32px #0a081099}.log-sheet .event-log-panel{width:100%;max-width:none;max-height:calc(45vh - 70px);overflow-y:auto}.trump-splash{position:fixed;top:35%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:100;padding:16px 24px;background:#1a1422d9;border:3px solid #F0C040;border-radius:4px;font-family:m6x11plus,Courier New,monospace;color:#f5f5f0;text-align:center;opacity:0;transition:opacity .2s ease-out}.trump-splash[data-visible=true]{opacity:1}.trump-splash[data-suit=H],.trump-splash[data-suit=D]{border-color:#e03048}.trump-splash[data-suit=S],.trump-splash[data-suit=C]{border-color:#1a2540}.trump-splash__glyph{font-size:64px;line-height:1;margin-bottom:12px;color:#f0c040}.trump-splash[data-suit=H] .trump-splash__glyph,.trump-splash[data-suit=D] .trump-splash__glyph{color:#e03048}.trump-splash[data-suit=S] .trump-splash__glyph,.trump-splash[data-suit=C] .trump-splash__glyph{color:#f5f5f0}.trump-splash__title{font-size:18px;letter-spacing:.05em;margin-bottom:4px}.trump-splash__maker{font-size:14px;color:#f0c040}@media (max-width: 320px){.trump-splash{padding:12px 18px}.trump-splash__glyph{font-size:48px}.trump-splash__title{font-size:16px}}@media (prefers-reduced-motion: reduce){.trump-splash{transition:none}}.ready-toggle{align-self:stretch;min-height:44px;padding:10px 18px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;cursor:pointer;border:2px solid #5A5A5A;background:transparent;color:#c0bfc0;transition:background-color .12s ease,color .12s ease,border-color .12s ease}.ready-toggle.not-ready{border-color:#5a5a5a;color:#c0bfc0;background:#2a2a2a59}.ready-toggle.ready{border-color:#3dba52;color:#1a1422;background:#3dba52}.ready-toggle.ready:hover{background:#4dce65}.ready-toggle.not-ready:hover{border-color:#c0bfc0;color:#f5f5f0}.ready-toggle:focus-visible{outline:2px solid #F0C040;outline-offset:2px}.start-game-button.all-ready{box-shadow:0 0 0 3px #f0c040,0 0 0 6px #f0c04059}.room-lobby{box-sizing:border-box;width:100%;max-width:480px;margin:0 auto;padding:18px 20px;background:#1f18288c;border:1px solid var(--color-border);border-radius:10px;color:var(--color-text);display:flex;flex-direction:column;gap:16px}.room-lobby.in-room{background:#1f1828b3;border-color:var(--color-border)}.room-lobby[data-step=create],.room-lobby[data-step=join]{max-width:560px;gap:12px}.room-lobby[data-step=create] .identity-panel,.room-lobby[data-step=join] .identity-panel{max-width:none;gap:12px}.room-lobby.in-game{max-width:none;background:transparent;border:0;padding:0;margin:0;gap:0;width:100%;align-items:center}.room-lobby-actions{display:flex;gap:12px;flex-wrap:wrap}.room-cta{flex:1;min-width:0;min-height:48px;padding:12px 16px;border-radius:8px;border:none;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}.room-cta.create{background:var(--color-cta);color:var(--color-ink)}.room-cta.create:hover:not(:disabled){background:var(--color-cta-hover)}.room-cta.join{background:transparent;color:var(--color-text);border:1px solid var(--color-teal)}.room-cta.join:hover:not(:disabled){background:#3dc4c726}.room-cta:disabled,.room-cta[aria-disabled=true]{opacity:.5;cursor:not-allowed}.room-cta:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-lobby-hint{margin:0;color:var(--color-text-muted);font-size:12px;text-align:center}.room-how-to-play{align-self:center}.room-back{align-self:flex-start;background:transparent;border:0;padding:4px 6px;margin:-4px 0 -6px -6px;font:inherit;font-size:14px;color:var(--color-text-muted);cursor:pointer}.room-back:hover{color:var(--color-gold)}.room-back:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px;border-radius:4px}.room-join-form{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px dashed var(--color-border)}.room-join-label{font-size:12px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.room-join-input{width:100%;box-sizing:border-box;min-height:44px;padding:8px 12px;background:var(--color-surface);color:var(--color-gold);border:1px solid var(--color-border);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;text-align:center}.room-join-input:focus{outline:2px solid var(--color-gold);outline-offset:1px;border-color:var(--color-gold)}.room-join-input[aria-invalid=true]{border-color:var(--color-red)}.room-join-submit{align-self:flex-end;min-height:44px;padding:10px 20px;background:var(--color-teal);color:var(--color-ink);border:none;border-radius:6px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}.room-join-submit:disabled{opacity:.5;cursor:not-allowed}.room-join-submit:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-join-error{color:var(--color-red);font-size:13px;font-weight:600}.room-create-error{margin-top:10px;color:var(--color-red);font-size:13px;font-weight:600;text-align:center}.room-code{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;background:#1f1828d9;border:1px solid var(--color-border);border-radius:8px}.room-code-label{font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}.room-code-row{display:flex;align-items:center;gap:12px}.room-code-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:32px;letter-spacing:.1em;color:var(--color-gold);user-select:all}.room-code-copy{min-height:44px;min-width:70px;padding:8px 14px;background:var(--color-teal);color:var(--color-ink);border:none;border-radius:6px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}.room-code-copy:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.room-share-btn{min-height:44px;padding:8px 16px;border-radius:6px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:1px solid transparent}.room-share-btn.primary{background:var(--color-cta);color:var(--color-ink)}.room-share-btn.primary:hover{background:var(--color-cta-hover)}.room-share-btn.secondary{background:transparent;color:var(--color-text-muted);border-color:var(--color-teal)}.room-share-btn.secondary:hover{background:#3dc4c726}.room-share-btn:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-share-status{font-size:11px;color:var(--color-cta-hover);text-align:center;min-height:14px}.room-occupants{display:flex;flex-direction:column;gap:10px}.room-occupants-heading{margin:0;font-size:13px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.room-occupants-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.room-occupant{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#1a142299;border:1px solid transparent;border-radius:6px}.room-occupant.is-you{border-color:var(--color-gold)}.room-occupant-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.room-occupant-name-row{display:flex;align-items:center;gap:6px}.room-occupant-name{font-weight:700;color:var(--color-text)}.is-you .room-occupant-name{color:var(--color-gold)}.room-occupant-badge{font-size:10px;color:var(--color-ink);background:var(--color-gold);padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}.room-occupant-host{font-size:16px;color:var(--color-gold)}.room-occupant-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-text-muted)}.room-occupant-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.room-occupant-status-label{text-transform:uppercase;letter-spacing:.05em}.room-leave{align-self:flex-end;min-height:44px;padding:10px 16px;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:6px;font-family:inherit;font-size:13px;cursor:pointer}.room-leave:hover{border-color:var(--color-red);color:var(--color-red)}.room-leave:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.room-lobby.in-room .start-game-wrap{position:sticky;bottom:10px;z-index:3;background:#1f1828eb;border-radius:10px;padding:8px;margin:-8px;box-shadow:0 -12px 22px #0a081073,0 4px 14px #0a08108c;backdrop-filter:blur(4px)}.how-to-play{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:#100b16c7;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);font-family:inherit;color:#f5f5f0}.how-to-play__panel{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#2a1f2f,#1a1422 70%);border:1px solid #4A3A5C;border-radius:12px;box-shadow:0 18px 48px #00000080;overflow:hidden}.how-to-play__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid #3A2D4A}.how-to-play__title{margin:0;font-size:20px;color:#f0c040;letter-spacing:.03em}.how-to-play__close{flex:none;background:transparent;color:#f5f5f0;border:1px solid #5A4A6C;border-radius:8px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}.how-to-play__close:hover{border-color:#f0c040;color:#f0c040}.how-to-play__body{padding:16px 20px 8px;overflow-y:auto;line-height:1.5;font-size:14px}.how-to-play__section{margin-bottom:16px}.how-to-play__section h3{margin:0 0 6px;font-size:14px;color:#5fc9b0;letter-spacing:.02em}.how-to-play__section p{margin:0 0 8px}.how-to-play__rank{background:#f0c04014;border-left:3px solid #F0C040;border-radius:4px;padding:8px 10px}.how-to-play__scoring{margin:0;padding-left:20px}.how-to-play__scoring li{margin-bottom:4px}.how-to-play__footer{padding:14px 20px;border-top:1px solid #3A2D4A;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px}.how-to-play__credit{margin:0;font-size:11px;color:#8a7da0}.how-to-play__credit a{color:inherit;text-decoration:underline}.how-to-play__done{background:#f0c040;color:#1a1422;border:none;border-radius:8px;padding:9px 20px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}.how-to-play__done:hover{background:#f7d469}.how-to-play-trigger{position:relative;background:transparent;border:0;width:44px;height:44px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:#9a8ab8;font:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0}.how-to-play-trigger:before{content:"";position:absolute;width:30px;height:30px;border:1px solid #4A3A5C;border-radius:999px;pointer-events:none}.how-to-play-trigger:hover{color:#f0c040}.how-to-play-trigger:hover:before{border-color:#f0c040}.how-to-play-link{background:transparent;border:0;padding:4px 6px;font:inherit;font-size:14px;color:#9a8ab8;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.how-to-play-link:hover{color:#f0c040}.how-to-play-link:focus-visible{outline:2px solid #F0C040;outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion: reduce){.how-to-play{backdrop-filter:none;-webkit-backdrop-filter:none}}html.crt-subtle:before,html.crt-full:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px)}html.crt-subtle:after,html.crt-full:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9001;background:radial-gradient(ellipse at center,#0000 55%,#0006)}html.crt-full body{text-shadow:0 0 2px rgba(255,255,255,.8),0 0 8px rgba(100,120,255,.15)}@keyframes crt-flicker{0%,to{opacity:1}47%{opacity:1}48%{opacity:.98}49%{opacity:1}50%{opacity:.99}51%{opacity:1}}html.crt-full:before{animation:crt-flicker .25s infinite}@media (prefers-reduced-motion: reduce){html.crt-full:before{animation:none}}@media (prefers-contrast: more){html.crt-subtle:after,html.crt-full:after{display:none}html.crt-full body{text-shadow:none}}