:root{--bg-primary: #1a1814;--bg-secondary: #121110;--bg-surface: rgba(245, 235, 220, .07);--bg-surface-hover: rgba(245, 235, 220, .12);--text-primary: #f5f0e8;--text-secondary: rgba(245, 240, 232, .65);--text-muted: rgba(245, 240, 232, .35);--accent-x: #dcb965;--accent-x-dim: rgba(220, 185, 101, .15);--accent-x-glow: rgba(220, 185, 101, .35);--accent-o: #8a9ab0;--accent-o-dim: rgba(138, 154, 176, .15);--accent-o-glow: rgba(138, 154, 176, .35);--accent-win: #5fa879;--accent-win-glow: rgba(95, 168, 121, .45);--border-subtle: rgba(245, 235, 220, .1);--border-glow: rgba(245, 235, 220, .18);--success: #8fae6b;--warning: #d4a857;--danger: #c45a50;--glass-bg: rgba(22, 20, 18, .82);--glass-border: rgba(245, 235, 220, .1);--glass-blur: 20px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .6);--shadow-glow-x: 0 0 20px var(--accent-x-glow);--shadow-glow-o: 0 0 20px var(--accent-o-glow);--font-family: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-family);color:var(--text-primary);background:linear-gradient(145deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);min-height:100vh;min-width:320px;line-height:1.5;overflow:hidden}#root{width:100vw;height:100vh;position:relative}::selection{background:var(--accent-x-dim);color:var(--accent-x)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#f5ebdc1f;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#f5ebdc38}a{color:var(--accent-x);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}a:hover{color:var(--accent-o)}button{font-family:var(--font-family);font-size:.875rem;font-weight:600;cursor:pointer;border:none;outline:none;transition:all var(--duration-normal) var(--ease-out)}button:focus-visible{outline:2px solid var(--accent-x);outline-offset:2px}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.glow-border-x{box-shadow:var(--shadow-md),inset 0 0 0 1px var(--accent-x-dim),0 0 15px var(--accent-x-glow)}.glow-border-o{box-shadow:var(--shadow-md),inset 0 0 0 1px var(--accent-o-dim),0 0 15px var(--accent-o-glow)}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hud{position:absolute;top:20px;left:20px;z-index:10;width:220px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(245,235,220,.12) transparent;padding:20px;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);animation:fade-in var(--duration-slow) var(--ease-out) forwards;display:flex;flex-direction:column;gap:14px}.hud__player-badge{display:flex;align-items:center;gap:10px}.hud__symbol-chip{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;flex-shrink:0}.hud__symbol-chip--x{background:var(--accent-x-dim);color:var(--accent-x);border:1px solid rgba(220,185,101,.3)}.hud__symbol-chip--o{background:var(--accent-o-dim);color:var(--accent-o);border:1px solid rgba(138,154,176,.3)}.hud__symbol-chip--spectator{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-subtle);font-size:.85rem}.hud__player-info{display:flex;flex-direction:column}.hud__player-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.hud__player-name{font-size:.9rem;font-weight:700;color:var(--text-primary)}.hud__turn{padding:10px 14px;border-radius:var(--radius-md);text-align:center;font-weight:700;font-size:.85rem;transition:all var(--duration-normal) var(--ease-out)}.hud__turn--your-turn{background:#dcb96538;color:var(--accent-x);border:1px solid rgba(220,185,101,.35);animation:pulse-glow 2s ease-in-out infinite}.hud__turn--your-turn.is-o{background:#8a9ab038;color:var(--accent-o);border-color:#8a9ab059}.hud__turn--waiting{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-subtle)}.hud__winner{padding:12px 14px;border-radius:var(--radius-md);text-align:center;font-weight:800;font-size:.95rem;color:var(--accent-win);background:#5fa87914;border:1px solid rgba(95,168,121,.2);animation:pulse-glow 1.5s ease-in-out infinite}.hud__room{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-surface);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}.hud__room:hover{background:var(--bg-surface-hover)}.hud__room-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.hud__room-code{font-size:.8rem;font-weight:600;color:var(--text-secondary);font-family:var(--font-mono)}.hud__room-copy{margin-left:auto;font-size:.7rem;color:var(--text-muted);transition:color var(--duration-fast) var(--ease-out)}.hud__room:hover .hud__room-copy{color:var(--accent-x)}.hud__btn{width:100%;padding:10px 16px;border-radius:var(--radius-md);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);text-align:center}.hud__btn--reset{background:var(--bg-surface-hover);color:var(--text-primary);border:1px solid var(--border-subtle)}.hud__btn--reset:hover{background:#f5ebdc1f;border-color:var(--accent-x);box-shadow:0 0 12px var(--accent-x-dim)}.hud__btn--play-again{background:var(--accent-win);color:#121110;border:1px solid transparent;box-shadow:0 4px 14px #5fa87940}.hud__btn--play-again:hover{transform:translateY(-1px);box-shadow:0 6px 20px #5fa87966}.hud__btn--new-room{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle)}.hud__btn--new-room:hover{color:var(--text-primary);border-color:var(--border-glow)}.hud__miniboards{display:flex;flex-direction:column;gap:10px}.hud__miniboards-title{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:2px}.hud__layer{display:flex;flex-direction:column;gap:4px}.hud__layer-label{font-size:.65rem;font-weight:600;color:var(--text-muted)}.hud__layer-grid{display:grid;grid-template-columns:repeat(3,26px);gap:3px}.hud__cell{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;cursor:pointer;border-radius:4px;background:var(--bg-surface);border:1px solid var(--border-subtle);transition:all var(--duration-fast) var(--ease-out)}.hud__cell:hover{background:var(--bg-surface-hover);border-color:var(--border-glow)}.hud__cell--x{color:var(--accent-x);background:var(--accent-x-dim);border-color:#dcb96540}.hud__cell--o{color:var(--accent-o);background:var(--accent-o-dim);border-color:#8a9ab040}.hud__cell--win{color:var(--accent-win);background:#5fa8791a;border-color:#5fa8794d;animation:pulse-glow 1.5s ease-in-out infinite}.hud__divider{height:1px;background:var(--border-subtle)}@media(max-width:640px){.hud{width:180px;padding:14px;top:12px;left:12px;max-height:calc(100vh - 24px)}.hud__layer-grid{grid-template-columns:repeat(3,22px)}.hud__cell{width:22px;height:22px;font-size:.6rem}}.hud__scores{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#0003;border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.hud__scores-title{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.hud__scores-row{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.hud__score-box{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:800}.hud__score-box.divider{color:var(--text-muted);font-weight:400}.hud__score-label{font-size:.95rem;font-weight:800}.hud__score-label.X{color:var(--accent-x)}.hud__score-label.O{color:var(--accent-o)}.hud__score-val{color:var(--text-primary);font-family:var(--font-mono)}.hud__draws-label{font-size:.65rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.hud__room-details{display:flex;flex-direction:column;gap:8px}.hud__spectators{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;color:var(--text-secondary);animation:fade-in var(--duration-normal) var(--ease-out) forwards}.video-chat__panel{position:absolute;bottom:20px;right:20px;z-index:100;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;display:flex;flex-direction:column;gap:8px;transition:width var(--duration-normal) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.video-chat__panel:active{cursor:grabbing}.video-chat__panel.count-0,.video-chat__panel.count-1,.video-chat__panel.count-2{width:240px}.video-chat__panel.count-3,.video-chat__panel.count-4{width:380px}.video-chat__video-container{position:relative;width:100%;border-radius:var(--radius-md);overflow:hidden;background:#121110;display:grid;gap:6px}.video-chat__video-container.count-0,.video-chat__video-container.count-1{grid-template-columns:1fr;aspect-ratio:4 / 3}.video-chat__video-container.count-2{grid-template-columns:1fr;grid-template-rows:1fr 1fr;aspect-ratio:3 / 4}.video-chat__video-container.count-3,.video-chat__video-container.count-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:4 / 3}.video-chat__video-wrapper{position:relative;width:100%;height:100%;border-radius:var(--radius-sm);overflow:hidden;background:#1a1816}.video-chat__video-element{width:100%;height:100%;object-fit:cover;display:block}.video-chat__label{position:absolute;bottom:8px;left:8px;font-size:.6rem;font-weight:600;color:#f5f0e8;background:#12111099;padding:2px 6px;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;z-index:2}.video-chat__status-overlay{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;padding:4px 8px;background:#121110bf;border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:.65rem;font-weight:600;pointer-events:none}.video-chat__status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.video-chat__status-dot--animated{animation:pulse-glow 1.5s ease-in-out infinite}.video-chat__controls-overlay{position:absolute;bottom:8px;right:8px;display:flex;gap:6px;z-index:10}.video-chat__ctrl-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);border:1px solid var(--glass-border);position:relative;padding:0}.video-chat__ctrl-btn--on{background:#f5ebdc26;color:#f5f0e8}.video-chat__ctrl-btn--on:hover{background:#f5ebdc40;transform:scale(1.08)}.video-chat__ctrl-btn--off{background:var(--danger);color:#fff;border-color:transparent}.video-chat__ctrl-btn--off:hover{background:#c62828;transform:scale(1.08)}.video-chat__ctrl-btn:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(4px);background:#121110e6;color:var(--text-primary);font-size:.55rem;padding:3px 6px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--duration-fast) var(--ease-out)}.video-chat__ctrl-btn:hover:after{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:640px){.video-chat__panel.count-0,.video-chat__panel.count-1,.video-chat__panel.count-2{width:180px}.video-chat__panel.count-3,.video-chat__panel.count-4{width:280px}}.video-chat__spectators-gallery{position:absolute;top:20px;right:20px;z-index:90;display:flex;flex-direction:row-reverse;gap:8px;pointer-events:none}.video-chat__spectator-card{pointer-events:auto;position:relative;width:140px;aspect-ratio:4 / 3;border-radius:var(--radius-md);overflow:hidden;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);animation:fade-in var(--duration-normal) var(--ease-out) forwards}.video-chat__spectator-video{width:100%;height:100%;object-fit:cover;display:block}.video-chat__spectator-label{position:absolute;bottom:4px;left:4px;font-size:.5rem;font-weight:600;color:#f5f0e8;background:#12111099;padding:1px 4px;border-radius:2px;pointer-events:none}