@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Outfit:wght@400;500;600;700&display=swap";:root{--bg-dark:#08090f;--bg-panel:#0d0f1bb3;--neon-cyan:#00f3ff;--neon-magenta:#f05;--neon-purple:#b000ff;--neon-green:#39ff14;--text-primary:#f0f3f8;--text-muted:#b8c0e0;--border-color:#00f3ff40;--font-display:"Orbitron", sans-serif;--font-body:"Outfit", sans-serif;--c4-cell-size:65px;--c4-piece-size:52px;--ttt-cell-size-3:100px;--ttt-cell-size-4:80px;--ttt-cell-size-5:65px;font-family:var(--font-body);color:var(--text-primary);background-color:var(--bg-dark);box-sizing:border-box;margin:0;padding:0;font-weight:500;line-height:1.5}body{background:radial-gradient(circle,#141729 0%,#08090f 100%);justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex;overflow-x:hidden}#root{flex-direction:column;align-items:center;width:100%;max-width:1200px;padding:2rem;display:flex}@keyframes neon-glow-cyan{0%,to{border-color:#00f3ffcc;box-shadow:0 0 10px #00f3ff66,0 0 20px #00f3ff33}50%{border-color:#00f3ff;box-shadow:0 0 20px #00f3ffb3,0 0 35px #00f3ff66}}@keyframes neon-glow-magenta{0%,to{border-color:#f05c;box-shadow:0 0 10px #f056,0 0 20px #f053}50%{border-color:#f05;box-shadow:0 0 20px #ff0055b3,0 0 35px #f056}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.cyber-card{background:var(--bg-panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:500px;padding:2.5rem;transition:all .3s cubic-bezier(.165,.84,.44,1);position:relative;overflow:hidden;box-shadow:0 8px 32px #00000080}.cyber-card:before{content:"";background:linear-gradient(90deg, transparent, var(--neon-cyan), transparent);width:100%;height:2px;animation:4s linear infinite scanline;position:absolute;top:0;left:0}.cyber-card:hover{border-color:#00f3ff80;box-shadow:0 0 20px #00f3ff33,0 8px 32px #0009}h1.cyber-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:4px;text-align:center;background:linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-purple) 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 15px #00f3ff4d;-webkit-background-clip:text;margin-bottom:2rem;font-size:2.8rem;font-weight:900}.cyber-subtitle{font-family:var(--font-display);letter-spacing:2px;color:var(--neon-cyan);text-transform:uppercase;text-align:center;margin-bottom:1.5rem;font-size:1.2rem}.cyber-input-group{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;display:flex}.cyber-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-size:.9rem}.cyber-input{color:var(--text-primary);font-family:var(--font-body);letter-spacing:1px;box-sizing:border-box;background:#08090fcc;border:1px solid #f0f3ff1a;border-radius:6px;width:100%;padding:.8rem 1rem;font-size:1.1rem;transition:all .3s}.cyber-input:focus{border-color:var(--neon-cyan);outline:none;box-shadow:0 0 10px #00f3ff4d}.cyber-btn{font-family:var(--font-body);text-transform:uppercase;letter-spacing:1px;cursor:pointer;box-sizing:border-box;border-radius:8px;width:100%;margin-top:1rem;padding:.8rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1)}.cyber-btn-cyan{background:var(--neon-cyan);color:#08090f;border:1px solid var(--neon-cyan);box-shadow:0 4px 15px #00f3ff40}.cyber-btn-cyan:hover{background:#00d2dd;border-color:#00d2dd;transform:translateY(-1px);box-shadow:0 0 20px #00f3ff73}.cyber-btn-magenta{background:var(--neon-magenta);color:#fff;border:1px solid var(--neon-magenta);box-shadow:0 4px 15px #ff005540}.cyber-btn-magenta:hover{background:#dd004a;border-color:#dd004a;transform:translateY(-1px);box-shadow:0 0 20px #ff005573}.cyber-btn-outline{color:var(--text-primary);border:1px solid var(--border-color);box-shadow:none;background:0 0}.cyber-btn-outline:hover{border-color:var(--text-primary);background:#ffffff0d;transform:translateY(-1px)}.cyber-btn:disabled{cursor:not-allowed;opacity:.6;color:#ffffff40!important;box-shadow:none!important;background:#ffffff08!important;border-color:#ffffff14!important;transform:none!important}.game-layout{flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:2.5rem;width:100%;display:flex;position:relative}@media (width<=950px){.game-layout{flex-flow:column wrap;align-items:center;gap:1.5rem}}.board-layout-column{flex-direction:column;flex:1.4;align-items:center;width:100%;max-width:650px;display:flex}.board-container{background:var(--bg-panel);border:1px solid var(--border-color);box-sizing:border-box;border-radius:12px;flex-direction:column;align-items:center;width:100%;padding:2rem;display:flex;box-shadow:0 8px 32px #00000080}.ttt-grid{background:#191d3180;border:1px solid #00f3ff26;border-radius:12px;gap:10px;padding:10px;display:grid;box-shadow:inset 0 0 15px #0009}.ttt-cell{aspect-ratio:1;cursor:pointer;font-family:var(--font-display);-webkit-user-select:none;user-select:none;background:#08090fd9;border:1px solid #00f3ff1a;border-radius:8px;justify-content:center;align-items:center;font-size:2.2rem;font-weight:900;transition:all .25s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}.ttt-cell:hover{background:#00f3ff0d;border-color:#00f3ff66;box-shadow:0 0 10px #00f3ff33}.ttt-cell.selected{border-color:var(--neon-cyan);z-index:10;background:#00f3ff26;transform:translateY(-8px)scale(1.1);box-shadow:0 10px 20px #00f3ff66,0 0 15px #00f3ff80}.ttt-cell.valid-target{border-color:var(--neon-green);background:#39ff140d}.ttt-cell.valid-target:hover{background:#39ff1433;box-shadow:0 0 15px #39ff1480}.piece-x{color:var(--neon-cyan);text-shadow:0 0 10px #00f3ffcc}.piece-o{color:var(--neon-magenta);text-shadow:0 0 10px #f05c}.game-info-panel{background:var(--bg-panel);border:1px solid var(--border-color);box-sizing:border-box;border-radius:12px;flex-direction:column;flex:.85;align-self:flex-start;gap:1.5rem;max-width:350px;padding:1.5rem;display:flex;box-shadow:0 8px 32px #00000080}.game-status-bar{text-transform:uppercase;letter-spacing:2px;text-align:center;color:var(--neon-cyan);font-size:1.1rem;font-family:var(--font-display);background:#00f3ff0d;border:1px solid #00f3ff33;border-radius:6px;padding:.8rem}.game-status-bar.your-turn{animation:2s infinite neon-glow-cyan}.game-status-bar.opponent-turn{color:var(--neon-magenta);background:#ff00550d;border-color:#f053}.player-tag{background:#08090f99;border-left:3px solid #0000;border-radius:6px;justify-content:space-between;align-items:center;padding:.6rem 1rem;display:flex}.player-tag.active-x{border-left-color:var(--neon-cyan)}.player-tag.active-o{border-left-color:var(--neon-magenta)}.error-banner{border:1px solid var(--neon-magenta);color:#fcc;box-sizing:border-box;text-align:center;letter-spacing:1px;background:#ff005526;border-radius:6px;width:100%;max-width:500px;margin-bottom:1.5rem;padding:.8rem 1rem;font-size:.95rem}.ultimate-grid{box-sizing:border-box;aspect-ratio:1;background:#000;border:4px solid #000;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:8px;width:500px;max-width:100%;padding:8px;display:grid}.ttt-subboard{box-sizing:border-box;aspect-ratio:1;background:#000;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;transition:all .25s;display:grid;position:relative}.ttt-subboard.tint-x{background:#ff3b30!important}.ttt-subboard.tint-x .ttt-micro-cell{background:#ffe5e5}.ttt-subboard.tint-o{background:#007aff!important}.ttt-subboard.tint-o .ttt-micro-cell{background:#e5f0ff}.ttt-subboard.tint-draw{background:#8e8e93!important}.ttt-subboard.tint-draw .ttt-micro-cell{background:#f2f2f7}.ttt-subboard.active-zone{outline:4px solid var(--neon-cyan);outline-offset:-2px;z-index:2}.ttt-micro-cell{aspect-ratio:1;cursor:pointer;font-family:var(--font-display);-webkit-user-select:none;user-select:none;box-sizing:border-box;background:#fff;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5rem;font-weight:900;line-height:1;transition:all .2s;display:flex;overflow:hidden}.ttt-micro-cell:hover{background:#f5f5f7}.piece-x-ult{color:#ff3b30;text-shadow:none;font-family:var(--font-display);font-weight:900}.piece-o-ult{color:#007aff;text-shadow:none;font-family:var(--font-display);font-weight:900}.game-select-container{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.5rem;display:grid}.game-select-card{cursor:pointer;text-align:center;background:#08090f99;border:1px solid #f0f3ff1a;border-radius:8px;padding:1rem;transition:all .3s}.game-select-card:hover{border-color:var(--neon-cyan);background:#00f3ff05}.game-select-card.active{transform:scale(1.02);border-color:var(--neon-cyan)!important;background:#00f3ff1f!important;box-shadow:0 0 20px #00f3ff59,inset 0 0 10px #00f3ff26!important}.game-select-title{font-family:var(--font-display);color:var(--text-primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem;font-size:1rem;font-weight:700}.game-select-desc{color:var(--text-muted);font-size:.8rem}@keyframes confettiFall{0%{opacity:1;transform:translateY(-5vh)rotate(0)}to{opacity:0;transform:translateY(105vh)rotate(360deg)}}.confetti-particle{z-index:9999;pointer-events:none;animation:3s linear forwards confettiFall;position:fixed;top:-15px}@keyframes winWave{0%,to{filter:brightness();box-shadow:none;transform:scale(1)translateY(0)}30%{filter:brightness(1.25);box-shadow:0 0 12px var(--neon-cyan);transform:scale(1.08)translateY(-5px)}60%{transform:scale(.97)translateY(1px)}}.winning-cell-animate{border-color:var(--neon-cyan)!important;z-index:15!important;background:#00f3ff33!important;animation:1.2s ease-in-out infinite winWave!important}.winning-cell-animate-magenta{border-color:var(--neon-magenta)!important;z-index:15!important;background:#f053!important;animation:1.2s ease-in-out infinite winWave!important}.theme-monochrome{--bg-dark:#000;--bg-panel:#111111e6;--neon-cyan:#fff;--neon-magenta:#777;--neon-purple:#333;--neon-green:#999;--text-primary:#fff;--text-muted:#888;--border-color:#ffffff40;min-height:100vh;background:radial-gradient(circle,#1a1a1a 0%,#000 100%)!important}.theme-wood{--bg-dark:#2d1a0f;--bg-panel:#382619d9;--neon-cyan:#dfb182;--neon-magenta:#a05a2c;--neon-purple:#704224;--neon-green:#c8963e;--text-primary:#fbf5e8;--text-muted:#bd9f86;--border-color:#dfb18240;min-height:100vh;background:radial-gradient(circle,#422d1d 0%,#21130a 100%)!important}.c4-cabinet{background:var(--bg-panel);border:4px solid var(--border-color);border-radius:16px;flex-direction:column;align-items:center;margin-top:10px;padding:15px;display:flex;box-shadow:0 10px 30px #0009,inset 0 0 20px #0006}.c4-grid{grid-template-columns:repeat(7, var(--c4-cell-size));grid-template-rows:repeat(6, var(--c4-cell-size));background:#0a143266;border-radius:8px;gap:8px;padding:10px;display:grid}.c4-cell{width:var(--c4-cell-size);height:var(--c4-cell-size);cursor:pointer;background:#00000080;border:1px solid #ffffff0d;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.c4-cell:hover{border-color:var(--neon-cyan);background:#ffffff0d}.c4-piece-cyan{width:var(--c4-piece-size);height:var(--c4-piece-size);background:var(--neon-cyan);box-shadow:0 0 12px var(--neon-cyan);border-radius:50%;animation:.4s cubic-bezier(.25,.46,.45,.94) forwards discFall}.c4-piece-magenta{width:var(--c4-piece-size);height:var(--c4-piece-size);background:var(--neon-magenta);box-shadow:0 0 12px var(--neon-magenta);border-radius:50%;animation:.4s cubic-bezier(.25,.46,.45,.94) forwards discFall}@keyframes discFall{0%{opacity:0;transform:translateY(-200px)}to{opacity:1;transform:translateY(0)}}@keyframes blinkVanish{0%,to{opacity:1;box-shadow:0 0 10px var(--neon-magenta);border-color:var(--neon-magenta)!important}50%{opacity:.3;box-shadow:none;border-color:#ffffff1a!important}}.blinking-vanish{animation:1.2s ease-in-out infinite blinkVanish!important}.players-status-container{justify-content:space-around;gap:15px;width:100%;margin-bottom:1.5rem;display:flex}.player-status-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:3px;padding:.5rem 1rem;transition:all .3s;display:flex;position:relative}.player-status-card.active-turn{border-color:var(--neon-cyan);background:#00f3ff0d;box-shadow:0 0 15px #00f3ff33}.player-status-card.active-turn-magenta{border-color:var(--neon-magenta);background:#ff00550d;box-shadow:0 0 15px #f053}.player-status-name{font-family:var(--font-body);color:var(--text-primary);align-items:center;gap:8px;font-size:.95rem;font-weight:600;display:flex}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.online{background:var(--neon-green);box-shadow:0 0 8px var(--neon-green)}.status-dot.offline{box-shadow:none;background:#555}.player-status-symbol{font-family:var(--font-display);font-size:1.2rem;font-weight:700}.game-overlay-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;background:#08090fb3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.4s forwards fadeIn;display:flex;position:fixed;top:0;left:0}.game-overlay-card{background:var(--bg-panel);border:2px solid var(--border-color);text-align:center;border-radius:16px;width:90%;max-width:380px;padding:2.5rem;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards zoomIn;box-shadow:0 15px 40px #000c}.game-overlay-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:2px;margin-bottom:.8rem;font-size:2rem;font-weight:900}.game-overlay-title.won{color:var(--neon-cyan);text-shadow:0 0 15px #00f3ff99}.game-overlay-title.lost{color:var(--neon-magenta);text-shadow:0 0 15px #f059}.game-overlay-title.draw{color:var(--text-primary);text-shadow:0 0 15px #f0f3ff66}.game-overlay-desc{color:var(--text-muted);margin-bottom:1.5rem;font-size:.95rem;line-height:1.5}@keyframes zoomIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.ghost-piece{opacity:0;font-family:var(--font-display);-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:900;transition:opacity .15s}.ttt-cell:hover .ghost-piece{opacity:.15!important}.ttt-micro-cell:hover .ghost-piece{opacity:.25!important}.ghost-piece-c4{width:var(--c4-piece-size);height:var(--c4-piece-size);opacity:0;pointer-events:none;background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan);border-radius:50%;transition:opacity .15s}.ghost-piece-c4.magenta{background:var(--neon-magenta);box-shadow:0 0 10px var(--neon-magenta)}.c4-cell:hover .ghost-piece-c4{opacity:.2!important}@media (width<=768px){.game-select-container{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){:root{--c4-cell-size:min(42px, 12vw);--c4-piece-size:min(34px, 9.5vw);--ttt-cell-size-3:min(80px, 24vw);--ttt-cell-size-4:min(64px, 18vw);--ttt-cell-size-5:min(50px, 14vw)}body{background:radial-gradient(circle,#0f111f 0%,#040508 100%)}#root{padding:1rem .5rem}h1.cyber-title{letter-spacing:2px;margin-bottom:1.2rem;font-size:1.8rem}.cyber-card{border-radius:8px;padding:1.2rem}.board-container{border-radius:8px;padding:1rem}.game-select-container{grid-template-columns:1fr;gap:8px}.game-select-card{padding:.8rem}.game-info-panel{align-self:stretch;width:100%;max-width:100%;padding:1rem}.game-overlay-card{width:92%;padding:1.5rem}.game-overlay-title{font-size:1.5rem}.c4-grid{gap:4px;padding:6px}.c4-cabinet{padding:8px}.ultimate-grid{border-width:2px;gap:4px;padding:4px}.ttt-subboard{gap:1px;padding:1px}.ttt-micro-cell{font-size:1.1rem}.players-status-container{gap:8px}.player-status-card{padding:.4rem .6rem}.player-status-name{font-size:.8rem}.player-status-symbol{font-size:1rem}}@keyframes timerPulseThump{0%{transform:scale(1)}50%{filter:brightness(1.2);text-shadow:0 0 8px var(--neon-magenta);transform:scale(1.15)}to{transform:scale(1)}}.timer-thump{animation:1s ease-in-out infinite timerPulseThump;display:inline-block}