.app{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-primary);padding:clamp(10px,3vw,20px);box-sizing:border-box;transition:background .3s ease,color .3s ease}.error-message{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:1rem 1.5rem;background:#b91c1c;color:#fff!important;border:2px solid #dc2626;border-radius:8px;font-weight:700;font-size:clamp(.85rem,2.5vw,.95rem);z-index:1000;animation:errorSlideIn .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #0009;max-width:min(450px,90%);text-align:center;word-break:break-word;text-shadow:0 1px 3px rgba(0,0,0,.5)}[data-theme=modern] .error-message{background:#dc2626;color:#fff!important;border:2px solid #f87171;box-shadow:0 8px 32px #000c,0 0 40px #dc262666;text-shadow:0 2px 4px rgba(0,0,0,.8)}@keyframes errorSlideIn{0%{transform:translate(-50%) translateY(-40px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}h1{color:transparent;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);background-clip:text;-webkit-background-clip:text;font-size:clamp(2rem,5vw,3rem);margin-bottom:.5em;text-align:center;font-weight:800;letter-spacing:-.02em}@media (max-width: 600px){.app{padding:10px}.error-message{top:10px;padding:.85rem 1.2rem;max-width:min(380px,85%);font-size:.85rem}}@media (max-width: 400px){.app{padding:5px}.error-message{padding:.75rem 1rem;max-width:min(320px,85%);font-size:.8rem;gap:8px}}.app-container{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}.app-container.game-screen{width:100%;display:flex;justify-content:center;align-items:center}*{box-sizing:border-box}.lobby-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem;color:var(--text-primary);overflow-x:hidden}.lobby-screen h1{font-size:clamp(2rem,6vw,3rem);background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);background-clip:text;-webkit-background-clip:text;color:transparent;margin-bottom:.5rem;font-weight:800;letter-spacing:-.02em;text-shadow:0 0 40px rgba(59,130,246,.3)}.subtitle{font-size:clamp(.95rem,2.5vw,1.1rem);color:var(--text-muted);margin-bottom:2rem;text-align:center;font-weight:500}.lobby-container{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:2rem;border-radius:20px;width:calc(100% - 2rem);max-width:380px;display:flex;flex-direction:column;gap:1rem;border:1px solid var(--border-primary);box-shadow:var(--shadow-xl),0 0 60px #3b82f61a;margin:0 auto;align-items:center;box-sizing:border-box;overflow:hidden;position:relative}.lobby-container:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-primary),transparent);opacity:.5}.input-field{width:100%;max-width:100%;padding:.85rem 1rem;border:1px solid var(--border-primary);border-radius:10px;background:#0f172a99;color:var(--text-primary);font-size:clamp(.9rem,2.5vw,1rem);transition:all var(--transition-normal);box-sizing:border-box;font-weight:500}.input-field:focus{outline:none;border-color:var(--accent-primary);background:#0f172acc;box-shadow:0 0 0 3px #3b82f626,var(--shadow-md);transform:translateY(-1px)}.button-group{display:flex;flex-direction:column;gap:.75rem;width:100%;align-items:center;box-sizing:border-box;max-width:100%}.input-error{border-color:#f44336!important;box-shadow:0 0 0 3px #f4433633!important}.error-message{color:#f44336;text-align:center;margin-top:-.5rem;margin-bottom:.5rem;font-size:.875rem;font-weight:500;width:100%}.btn{width:100%;padding:.85rem 1rem;border:none;border-radius:10px;font-size:clamp(.9rem,2.5vw,1rem);font-weight:700;cursor:pointer;transition:all var(--transition-normal);box-sizing:border-box;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff1a;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn-create{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-primary-hover) 100%);color:#fff;box-shadow:var(--shadow-md),0 0 20px #3b82f633}.btn-create:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 30px #3b82f666;transform:translateY(-2px)}.btn-create:active:not(:disabled){transform:translateY(0)}.btn-toggle{background:transparent;border:2px solid var(--border-primary);color:var(--text-secondary)}.btn-toggle:hover:not(:disabled){background:#3b82f61a;border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}.btn-join{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-primary-hover) 100%);color:#fff;box-shadow:var(--shadow-md),0 0 20px #3b82f633}.btn-join:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 30px #3b82f666;transform:translateY(-2px)}.btn-join:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.divider{text-align:center;color:var(--text-dim);font-size:clamp(.75rem,2vw,.85rem);position:relative;margin:.5rem 0;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:linear-gradient(to right,transparent,var(--border-primary),transparent)}.divider:before{left:0}.divider:after{right:0}.join-section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border-secondary);width:100%;align-items:center;box-sizing:border-box;max-width:100%}@media (max-width: 600px){.lobby-screen{padding:1rem}.lobby-container{padding:1.5rem;max-width:340px;width:calc(100% - 1.5rem)}.input-field,.btn{padding:.75rem}}@media (max-width: 400px){.lobby-screen{padding:.75rem}.lobby-container{padding:1.25rem;border-radius:16px;max-width:280px;width:calc(100% - 1rem);gap:.7rem}.button-group,.join-section{gap:.55rem}}@media (min-width: 768px){.lobby-container{max-width:400px;padding:2rem}}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;width:100%;height:100%;min-height:100vh;margin:0}.game-info{text-align:center;width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem;font-size:1.05rem}.game-info h2{margin:0;font-size:1.4rem;color:var(--text-primary);font-weight:700;letter-spacing:-.01em}.players-info{display:flex;justify-content:center;gap:1rem;font-size:1rem;flex-wrap:wrap}.player{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;border:1px solid var(--border-primary);box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.player:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.player-name{font-weight:600;color:var(--text-primary)}.player-symbol{font-weight:800;font-size:1.2rem}.player-symbol.symbol-X{color:var(--player-x);text-shadow:0 0 8px var(--player-x-glow)}.player-symbol.symbol-O{color:var(--player-o);text-shadow:0 0 8px var(--player-o-glow)}.current-turn{font-size:1.05rem;font-weight:600;color:var(--text-secondary);padding:.5rem 1rem;background:var(--bg-card);border-radius:10px;border:1px solid var(--border-secondary)}.active-board-info{margin-top:.25rem;padding:.6rem 1rem;background:linear-gradient(135deg,#3b82f626,#8b5cf626);border:1px solid var(--border-accent);border-radius:10px;font-weight:600;font-size:.95rem;color:var(--accent-primary);box-shadow:0 0 20px #3b82f633}.active-board-info .highlight{color:var(--accent-primary);font-weight:700}.winner-announcement{margin-top:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#10b98133,#05966933);border:2px solid var(--accent-success);border-radius:12px;font-size:1.25rem;font-weight:700;color:var(--accent-success);box-shadow:0 0 30px #10b9814d;animation:winnerPulse 2s ease-in-out infinite}.draw-announcement{margin-top:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#fbbf2433,#f59e0b33);border:2px solid #fbbf24;border-radius:12px;font-size:1.25rem;font-weight:700;color:#fbbf24;box-shadow:0 0 30px #fbbf244d;animation:drawPulse 2s ease-in-out infinite}@keyframes drawPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes winnerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.game-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;background:var(--bg-secondary);padding:10px;border-radius:16px;aspect-ratio:1;border:2px solid var(--border-primary);width:100%;max-width:480px;height:auto;box-shadow:var(--shadow-xl),0 0 60px #3b82f61a;position:relative}.game-board:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:16px;opacity:.1;z-index:-1}.mini-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;background:var(--bg-tertiary);padding:4px;position:relative;border-radius:8px;border:2px solid var(--border-secondary);transition:all var(--transition-normal)}.mini-board:hover{border-color:var(--border-accent);transform:scale(1.02)}.mini-board.active-board{background:#3b82f626;border:2px solid var(--accent-primary);box-shadow:0 0 20px #3b82f64d,inset 0 0 12px #3b82f61a;animation:activeBoardPulse 2s ease-in-out infinite}@keyframes activeBoardPulse{0%,to{box-shadow:0 0 20px #3b82f64d,inset 0 0 12px #3b82f61a}50%{box-shadow:0 0 30px #3b82f680,inset 0 0 16px #3b82f633}}.mini-board.disabled-board{opacity:.4;pointer-events:none;background:#33415580;border-color:var(--border-secondary);box-shadow:inset 0 0 8px #0000004d}.mini-board-winner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;background:#0f172af2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;border-radius:6px;animation:winnerAppear .4s cubic-bezier(.4,0,.2,1)}@keyframes winnerAppear{0%{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.mini-board-winner.winner-X{color:var(--player-x);text-shadow:0 0 20px var(--player-x-glow)}.mini-board-winner.winner-O{color:var(--player-o);text-shadow:0 0 20px var(--player-o-glow)}.cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;background:var(--bg-primary);border:1px solid var(--border-secondary);border-radius:6px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);position:relative;padding:0}.cell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(59,130,246,.1),transparent);border-radius:6px;opacity:0;transition:opacity var(--transition-fast)}.cell:hover:not(:disabled):before{opacity:1}.cell:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--accent-primary);transform:scale(1.08);box-shadow:0 0 15px #3b82f64d}.cell:active:not(:disabled){transform:scale(.95)}.cell:disabled{cursor:not-allowed;opacity:.7}.cell-X{color:var(--player-x);text-shadow:0 0 10px var(--player-x-glow)}.cell-O{color:var(--player-o);text-shadow:0 0 10px var(--player-o-glow)}.back-button{padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent-danger),#dc2626);border:1px solid rgba(239,68,68,.5);border-radius:10px;cursor:pointer;transition:all var(--transition-normal);margin-top:.5rem;max-width:200px;flex-shrink:0;box-shadow:var(--shadow-md)}.back-button:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px #ef44444d}.back-button:active{transform:translateY(0)}@media (max-width: 480px){.game-container{gap:.75rem;padding:.75rem}.game-info{max-width:95%}.game-board{gap:4px;padding:8px;max-width:380px}.mini-board{gap:2px;padding:3px}.cell{font-size:1.3rem}.mini-board-winner{font-size:2.5rem}}@media (max-width: 360px){.game-board{gap:3px;padding:6px;max-width:340px}.cell{font-size:1.2rem}.mini-board-winner{font-size:2.2rem}}@media (min-width: 768px){.game-container{gap:1.25rem}.game-board{max-width:520px}.cell{font-size:1.6rem}.mini-board-winner{font-size:3rem}}@media (min-width: 1024px){.game-board{max-width:560px}}.cell{font-size:1.8rem}.mini-board-winner{font-size:3rem}.waiting-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.waiting-container{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;padding:2rem;max-width:440px;width:100%;box-shadow:var(--shadow-xl),0 0 60px #3b82f626;text-align:center;animation:fadeIn .5s ease-in;border:1px solid var(--border-primary);color:var(--text-primary);position:relative}.waiting-container:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent-primary),var(--accent-secondary),transparent);border-radius:24px 24px 0 0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.spinner-container{margin-bottom:1.5rem}.spinner{width:70px;height:70px;border:6px solid var(--bg-tertiary);border-top:6px solid var(--accent-primary);border-right:6px solid var(--accent-secondary);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite;box-shadow:0 0 20px #3b82f64d}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.waiting-container h2{color:var(--text-primary);margin-bottom:.75rem;font-size:1.75rem;font-weight:700}.player-info{color:var(--text-secondary);margin-bottom:1.75rem;font-size:1rem}.player-info strong{color:var(--accent-primary);font-weight:700}.game-id-section{margin-bottom:1.5rem}.game-id-section h3{color:var(--text-primary);font-size:1.1rem;margin-bottom:.75rem;font-weight:600}.game-id-box{display:flex;gap:10px;align-items:center;background:#0f172acc;padding:1rem 1.25rem;border-radius:12px;border:1px solid var(--border-primary);box-shadow:var(--shadow-sm)}.game-id-box .game-id{flex:1;font-family:SF Mono,Monaco,Courier New,monospace;font-size:1.3rem;font-weight:700;color:var(--accent-primary);letter-spacing:.1em;text-shadow:0 0 10px var(--player-x-glow);line-height:1;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:transparent;border:none;border-radius:0}.share-section{margin-bottom:1.5rem}.share-text{color:var(--text-muted);font-size:.9rem;margin-bottom:.75rem;font-weight:500}.share-url-box{display:flex;gap:10px;align-items:center}.share-url-input{flex:1;padding:.85rem 1rem;border:1px solid var(--border-primary);border-radius:10px;font-size:.85rem;font-family:SF Mono,Monaco,Courier New,monospace;background:#0f172a99;color:var(--text-secondary);transition:all var(--transition-normal)}.share-url-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #3b82f626}.copy-btn{padding:.75rem 1.25rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover));color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:1rem;transition:all var(--transition-normal);white-space:nowrap;box-shadow:var(--shadow-md),0 0 20px #3b82f633;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.copy-btn:hover{background:linear-gradient(135deg,var(--accent-primary-hover),#1d4ed8);transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 30px #3b82f666}.copy-btn:active{transform:translateY(0)}.waiting-instructions{background:#0f172a99;padding:1rem;border-radius:10px;margin-bottom:1.25rem;border-left:4px solid var(--accent-primary);box-shadow:var(--shadow-sm)}.waiting-instructions p{margin:7px 0;color:var(--text-secondary);font-size:.85rem;text-align:left;line-height:1.6}.cancel-btn{width:100%;padding:.85rem;background:linear-gradient(135deg,var(--accent-danger),#dc2626);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:700;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.cancel-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px #ef44444d}.cancel-btn:active{transform:translateY(0)}@media (max-width: 600px){.waiting-screen{padding:40px 15px 30px;align-items:center}.waiting-container{padding:1.5rem;border-radius:20px}.spinner{width:60px;height:60px;border-width:5px}.waiting-container h2{font-size:1.5rem}.game-id{font-size:1.1rem}.spinner-container{margin-bottom:1rem}.player-info{margin-bottom:1.25rem;font-size:.95rem}.game-id-section{margin-bottom:1.25rem}.game-id-section h3{font-size:1rem;margin-bottom:.6rem}.game-id-box{padding:.85rem 1rem}.share-section{margin-bottom:1.25rem}.waiting-instructions{padding:1rem;margin-bottom:1.25rem}.waiting-instructions p{font-size:.85rem;margin:6px 0}.cancel-btn{padding:.85rem;font-size:.95rem}.game-id-box .game-id{font-size:1rem;word-break:break-all}.game-id-box,.share-url-box{flex-direction:column}.share-url-input{width:100%;text-align:center;font-size:.8rem}.copy-btn{width:100%}}@media (max-width: 400px){.waiting-screen{padding:20px 10px}.waiting-container{padding:1.25rem;border-radius:16px}.waiting-container h2{font-size:1.35rem}.spinner{width:50px;height:50px;border-width:4px}}.join-game-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.join-container{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;padding:2.5rem;max-width:440px;width:100%;box-shadow:var(--shadow-xl),0 0 60px #3b82f626;text-align:center;animation:fadeIn .5s ease-in;border:1px solid var(--border-primary);color:var(--text-primary);position:relative}.join-container:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent-primary),var(--accent-secondary),transparent);border-radius:24px 24px 0 0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.join-container h1{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));background-clip:text;-webkit-background-clip:text;color:transparent;margin-bottom:.75rem;font-size:2rem;font-weight:800;letter-spacing:-.02em}.subtitle{color:var(--text-muted);margin-bottom:1.5rem;font-size:1rem;font-weight:500}.game-id{font-family:SF Mono,Monaco,Courier New,monospace;font-size:1.4rem;font-weight:700;color:var(--accent-primary);letter-spacing:.1em;margin-bottom:1.5rem;word-break:break-all;padding:.6rem;background:#3b82f61a;border-radius:12px;border:1px solid var(--border-accent);text-shadow:0 0 10px var(--player-x-glow);text-align:center}.input-field{width:100%;padding:1rem 1.25rem;margin-bottom:1.5rem;border:1px solid var(--border-primary);border-radius:12px;font-size:1rem;background:#0f172a99;color:var(--text-primary);text-align:center;transition:all var(--transition-normal);font-weight:500}.input-field::placeholder{color:var(--text-dim)}.input-field:focus{outline:none;border-color:var(--accent-primary);background:#0f172acc;box-shadow:0 0 0 3px #3b82f633}.input-error{border-color:#f44336!important;box-shadow:0 0 0 3px #f4433633!important;animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.btn-join{width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover));color:#fff;border:none;border-radius:12px;cursor:pointer;font-weight:700;font-size:1.05rem;transition:all var(--transition-normal);box-shadow:var(--shadow-md),0 0 20px #3b82f633;position:relative;overflow:hidden}.btn-join:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-join:hover:before{width:400px;height:400px}.btn-join:hover{background:linear-gradient(135deg,var(--accent-primary-hover),#1d4ed8);transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 30px #3b82f666}.btn-join:active{transform:translateY(0)}.btn-join:disabled{opacity:.5;cursor:not-allowed;transform:none!important}@media (max-width: 600px){.join-container{padding:2rem;border-radius:20px}.join-container h1{font-size:1.75rem}.game-id{font-size:1.2rem}}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dialog-box{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;padding:2.5rem;box-shadow:var(--shadow-xl),0 0 60px #3b82f633;max-width:440px;width:90%;text-align:center;border:1px solid var(--border-primary);animation:slideIn .3s cubic-bezier(.4,0,.2,1);position:relative}.dialog-box:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent-danger),transparent);border-radius:20px 20px 0 0}@keyframes slideIn{0%{transform:translateY(-40px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.dialog-message{color:var(--text-primary);font-size:1.15rem;margin-bottom:1.75rem;line-height:1.7;font-weight:500}.dialog-button{background:linear-gradient(135deg,var(--accent-danger),#dc2626);color:#fff;border:none;padding:.85rem 2.5rem;font-size:1rem;font-weight:700;border-radius:12px;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md),0 0 20px #ef44444d;position:relative;overflow:hidden}.dialog-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.dialog-button:hover:before{width:300px;height:300px}.dialog-button:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:var(--shadow-lg),0 0 30px #ef444480;transform:translateY(-2px)}.dialog-button:active{transform:translateY(0);box-shadow:var(--shadow-md),0 0 15px #ef44444d}@media (max-width: 768px){.dialog-box{max-width:360px;padding:2rem;border-radius:18px}.dialog-message{font-size:1.05rem;margin-bottom:1.5rem}.dialog-button{padding:.75rem 2rem;font-size:.95rem}}@media (max-width: 480px){.dialog-box{max-width:300px;padding:1.75rem;border-radius:16px}.dialog-message{font-size:1rem;margin-bottom:1.25rem}.dialog-button{padding:.7rem 1.75rem;font-size:.9rem;border-radius:10px}}.theme-switcher{position:fixed;top:20px;right:20px;display:flex;align-items:center;gap:8px;padding:.6rem 1rem;background:#2d3748e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(99,179,237,.3);border-radius:8px;color:#e2e8f0;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;z-index:900;box-shadow:0 4px 12px #0003}.theme-switcher:hover{background:#4299e133;border-color:#63b3ed80;transform:translateY(-2px);box-shadow:0 6px 16px #0000004d}.theme-switcher:active{transform:translateY(0)}.theme-icon{font-size:1.2rem;line-height:1}.theme-label{font-family:inherit}[data-theme=modern] .theme-switcher{background:var(--bg-card);border-color:var(--border-accent);box-shadow:var(--shadow-md),0 0 20px #3b82f633}[data-theme=modern] .theme-switcher:hover{background:#3b82f626;border-color:var(--accent-primary);box-shadow:var(--shadow-lg),0 0 30px #3b82f64d}@media (max-width: 600px){.theme-switcher{top:15px;right:15px;padding:.5rem .8rem;font-size:.85rem}.theme-icon{font-size:1.1rem}}@media (max-width: 400px){.theme-switcher{top:10px;right:10px;padding:.45rem .7rem;font-size:.8rem}.theme-label{display:none}.theme-icon{font-size:1.3rem}}:root,:root[data-theme=modern]{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-card: rgba(30, 41, 59, .95);--bg-overlay: rgba(15, 23, 42, .7);--accent-primary: #3b82f6;--accent-primary-hover: #2563eb;--accent-secondary: #8b5cf6;--accent-success: #10b981;--accent-danger: #ef4444;--accent-warning: #f59e0b;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-dim: #64748b;--border-primary: rgba(148, 163, 184, .2);--border-secondary: rgba(148, 163, 184, .1);--border-accent: rgba(59, 130, 246, .5);--player-x: #60a5fa;--player-o: #f472b6;--player-x-glow: rgba(96, 165, 250, .5);--player-o-glow: rgba(244, 114, 182, .5);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 4px 16px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .3);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .4);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);color-scheme:dark;color:var(--text-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-primary-hover)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal)}button:hover{border-color:var(--border-accent);transform:translateY(-1px)}button:active{transform:translateY(0)}button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}html,body,#root{height:100%;margin:0;padding:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}body{overflow-x:hidden;background-color:#2d3748;transition:background-color .3s ease}[data-theme=modern] body{background-color:var(--bg-primary)}#root{min-height:100vh}:root[data-theme=classic]{--bg-gradient-start: #2d3748;--bg-gradient-end: #1a202c;--bg-primary: #2d3748;--bg-secondary: #1a202c;--bg-tertiary: #2d3748;--bg-card: rgba(45, 55, 72, .9);--bg-overlay: rgba(0, 0, 0, .7);--text-primary: #e2e8f0;--text-secondary: #cbd5e1;--text-muted: #a0aec0;--text-dim: #718096;--accent-primary: #63b3ed;--accent-primary-hover: #4299e1;--accent-secondary: #4299e1;--accent-success: #4ade80;--accent-danger: #dc2626;--accent-warning: #f59e0b;--player-x: #4da6ff;--player-o: #ff4d6d;--player-x-glow: rgba(77, 166, 255, .6);--player-o-glow: rgba(255, 77, 109, .6);--border-primary: rgba(74, 85, 104, .6);--border-secondary: rgba(74, 85, 104, .4);--border-accent: rgba(99, 179, 237, .8);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .3);--shadow-md: 0 8px 32px rgba(0, 0, 0, .3);--shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 60px rgba(0, 0, 0, .5);--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;color-scheme:dark;background-color:#2d3748}[data-theme=classic] body{background:linear-gradient(135deg,#2d3748,#1a202c);background-attachment:fixed}[data-theme=classic] .app{background:linear-gradient(135deg,#2d3748,#1a202c)}[data-theme=classic] h1,[data-theme=classic] .lobby-screen h1{color:#63b3ed;background:none;background-clip:unset;-webkit-background-clip:unset;font-weight:700;letter-spacing:normal;text-shadow:none}[data-theme=classic] .error-message{padding:.7rem 1rem;background:#b91c1c;color:#fff!important;border:2px solid #dc2626;border-radius:4px;font-size:clamp(.8rem,2.5vw,.9rem);font-weight:700;box-shadow:0 4px 12px #0000004d;max-width:min(450px,90%);text-shadow:0 1px 3px rgba(0,0,0,.5)}[data-theme=classic] .subtitle{color:#a0aec0;font-weight:400}[data-theme=classic] .lobby-container{background:#2d3748e6;padding:1.5rem;border-radius:8px;max-width:320px;gap:.85rem;border:1px solid rgba(74,85,104,.6);box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classic] .lobby-container:before{display:none}[data-theme=classic] .input-field{padding:.6rem .8rem;border:1px solid rgba(74,85,104,.8);border-radius:4px;background:#1a202ccc;font-size:clamp(.85rem,2.5vw,.95rem);font-weight:400}[data-theme=classic] .input-field::placeholder{color:#a0aec0}[data-theme=classic] .input-field:focus{border-color:#63b3ed;background:#1a202cf2;box-shadow:0 0 0 2px #63b3ed33;transform:none}[data-theme=classic] .btn{padding:.6rem;border-radius:4px;font-size:clamp(.85rem,2.5vw,.95rem);font-weight:600}[data-theme=classic] .btn:before{display:none}[data-theme=classic] .btn-create,[data-theme=classic] .btn-join{background:linear-gradient(135deg,#4299e1,#3182ce);box-shadow:none}[data-theme=classic] .btn-create:hover:not(:disabled),[data-theme=classic] .btn-join:hover:not(:disabled){background:linear-gradient(135deg,#63b3ed,#4299e1);box-shadow:none}[data-theme=classic] .btn-toggle{border:1px solid rgba(74,85,104,.8);color:#a0aec0}[data-theme=classic] .btn-toggle:hover:not(:disabled){background:#2d374899;border-color:#63b3ed;color:#63b3ed;transform:none}@media (max-width: 600px){[data-theme=classic] .lobby-container{padding:1.25rem;max-width:300px}[data-theme=classic] .input-field,[data-theme=classic] .btn{padding:.55rem}}@media (max-width: 400px){[data-theme=classic] .lobby-container{padding:1rem;max-width:280px;gap:.7rem}}@media (min-width: 1024px){[data-theme=classic] .lobby-container{max-width:350px;padding:2rem}}[data-theme=classic] .waiting-screen{background:linear-gradient(135deg,#2d3748,#1a202c)}[data-theme=classic] .waiting-container{background:#2d3748e6;border-radius:20px;padding:10px;max-width:390px;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(74,85,104,.6);-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classic] .waiting-container:before{display:none}[data-theme=classic] .spinner{width:60px;height:60px;border:6px solid #4a5568;border-top:6px solid #63b3ed}[data-theme=classic] .waiting-container h2{color:#e2e8f0;font-size:28px;font-weight:700}[data-theme=classic] .player-info{color:#a0aec0;font-size:16px;font-weight:400}[data-theme=classic] .player-info strong{color:#63b3ed}[data-theme=classic] .game-id-section h3{color:#e2e8f0;font-size:18px;font-weight:600}[data-theme=classic] .game-id-box{background:#1a202ccc;padding:15px;border-radius:10px;border:1px solid rgba(74,85,104,.8)}[data-theme=classic] .game-id{font-size:20px;font-weight:700;color:#63b3ed;letter-spacing:2px}[data-theme=classic] .share-text{color:#a0aec0;font-size:14px}[data-theme=classic] .share-url-input{padding:12px;border:1px solid rgba(74,85,104,.8);border-radius:8px;font-size:12px;background:#1a202ccc;color:#e2e8f0}[data-theme=classic] .share-url-input:focus{border-color:#63b3ed;box-shadow:none}[data-theme=classic] .copy-btn{padding:12px 20px;background:linear-gradient(135deg,#4299e1,#3182ce);border-radius:8px;font-size:14px;box-shadow:none}[data-theme=classic] .copy-btn:hover{background:linear-gradient(135deg,#63b3ed,#4299e1);box-shadow:0 4px 12px #63b3ed33}[data-theme=classic] .waiting-instructions{background:#1a202ccc;padding:20px;border-radius:10px;border-left:4px solid #63b3ed}[data-theme=classic] .waiting-instructions p{color:#a0aec0;font-size:13px}[data-theme=classic] .cancel-btn{padding:15px;background:#dc3545;border-radius:10px;font-size:16px;box-shadow:none}[data-theme=classic] .cancel-btn:hover{background:#c82333;box-shadow:0 4px 12px #dc354566}@media (max-width: 600px){[data-theme=classic] .waiting-container{padding:15px 10px}[data-theme=classic] .spinner{width:40px;height:40px;border-width:4px}[data-theme=classic] .waiting-container h2{font-size:18px}[data-theme=classic] .player-info{font-size:14px}[data-theme=classic] .game-id-section h3{font-size:16px}[data-theme=classic] .game-id-box,[data-theme=classic] .waiting-instructions{padding:10px}[data-theme=classic] .waiting-instructions p{font-size:12px}[data-theme=classic] .cancel-btn{padding:12px;font-size:14px}[data-theme=classic] .game-id{font-size:14px}[data-theme=classic] .share-url-input{font-size:12px}}[data-theme=classic] .join-game-screen{background:linear-gradient(135deg,#2d3748,#1a202c)}[data-theme=classic] .join-container{background:#2d3748e6;border-radius:20px;padding:40px;max-width:400px;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(74,85,104,.6);-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classic] .join-container:before{display:none}[data-theme=classic] .join-container h1{color:#e2e8f0;font-size:28px;font-weight:700}[data-theme=classic] .join-container .subtitle{color:#a0aec0;font-size:16px;font-weight:400}[data-theme=classic] .join-container .game-id{font-size:20px;font-weight:700;color:#63b3ed;letter-spacing:2px}[data-theme=classic] .join-container .input-field{padding:15px;border:1px solid rgba(74,85,104,.8);border-radius:8px;font-size:16px;background:#1a202ccc;text-align:center}[data-theme=classic] .join-container .input-field:focus{border-color:#63b3ed;box-shadow:none;transform:none}[data-theme=classic] .join-container .btn-join{padding:15px;background:linear-gradient(135deg,#4299e1,#3182ce);border-radius:8px;font-size:16px;box-shadow:none}[data-theme=classic] .join-container .btn-join:hover{background:linear-gradient(135deg,#63b3ed,#4299e1);box-shadow:0 4px 12px #63b3ed33}[data-theme=classic] .game-container{gap:.5rem;padding:.5rem}[data-theme=classic] .game-info{gap:.5rem;font-size:1.05rem}[data-theme=classic] .game-info h2{font-size:1.15rem;font-weight:600;letter-spacing:normal}[data-theme=classic] .players-info{gap:.75rem;font-size:1rem}[data-theme=classic] .player{gap:.3rem;padding:.25rem .5rem;background:#ffffff0d;border-radius:4px;border:1px solid rgba(99,102,241,.2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classic] .player:hover{transform:none;box-shadow:none}[data-theme=classic] .player-symbol{font-weight:700;font-size:1.05rem}[data-theme=classic] .player-symbol.symbol-X{color:#4da6ff;text-shadow:0 0 4px rgba(77,166,255,.6)}[data-theme=classic] .player-symbol.symbol-O{color:#ff4d6d;text-shadow:0 0 4px rgba(255,77,109,.6)}[data-theme=classic] .current-turn{font-size:1rem;padding:.3rem;background:none;border:none;border-radius:0}[data-theme=classic] .active-board-info{margin-top:.25rem;padding:.4rem .65rem;background:#3b82f626;border:1px solid rgba(59,130,246,.3);border-radius:4px;font-size:.95rem;color:#a8d5ff;box-shadow:none}[data-theme=classic] .active-board-info .highlight{color:#63b3ed;font-weight:700}[data-theme=classic] .winner-announcement{margin-top:.25rem;padding:.5rem;background:#22c55e26;border:1px solid #22c55e;border-radius:4px;font-size:1.15rem;color:#4ade80;box-shadow:none;animation:none}[data-theme=classic] .game-board{gap:4px;background:#1a202ce6;padding:7px;border-radius:8px;border:2px solid rgba(74,85,104,.5);max-width:400px;box-shadow:none}[data-theme=classic] .game-board:before{display:none}[data-theme=classic] .mini-board{gap:2px;background:#2d3748e6;padding:3px;border-radius:4px;border:2px solid rgba(74,85,104,.6)}[data-theme=classic] .mini-board:hover{border-color:#63b3ed80;transform:none}[data-theme=classic] .mini-board.active-board{background:#3182ce40;border:2px solid rgba(66,153,225,.8);box-shadow:0 0 12px #4299e14d,inset 0 0 8px #4299e11a;animation:none}[data-theme=classic] .mini-board.disabled-board{opacity:.5;background:#2d374899;border-color:#4a556866;box-shadow:inset 0 0 6px #0000004d}[data-theme=classic] .mini-board-winner{font-size:2.6rem;background:#1a202cf2;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:3px;animation:none}[data-theme=classic] .mini-board-winner.winner-X{color:#63b3ed}[data-theme=classic] .mini-board-winner.winner-O{color:#f56565}[data-theme=classic] .cell{font-size:1.4rem;background:#4a5568e6;border:1px solid rgba(113,128,150,.5);border-radius:3px}[data-theme=classic] .cell:hover:not(:disabled){background:#4299e140;border-color:#4299e1b3;transform:scale(1.05)}[data-theme=classic] .cell:active:not(:disabled){transform:scale(.95)}[data-theme=classic] .cell-X{color:#4da6ff;text-shadow:0 0 3px rgba(77,166,255,.5)}[data-theme=classic] .cell-O{color:#ff4d6d;text-shadow:0 0 3px rgba(255,77,109,.5)}[data-theme=classic] .back-button{padding:.4rem .5rem;font-size:.9rem;background:linear-gradient(135deg,#dc2626,#b91c1c);border:1px solid rgba(185,28,28,.8);border-radius:4px;margin-top:.3rem;max-width:200px}[data-theme=classic] .back-button:hover{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444e6;box-shadow:0 0 12px #dc26264d}@media (max-width: 480px){[data-theme=classic] .game-container{gap:.45rem;padding:.45rem}[data-theme=classic] .game-board{gap:3px;padding:5px;max-width:350px}[data-theme=classic] .mini-board{gap:1.5px;padding:2px}[data-theme=classic] .cell{font-size:1.2rem}[data-theme=classic] .mini-board-winner{font-size:2.2rem}[data-theme=classic] .game-info{font-size:.95rem}[data-theme=classic] .game-info h2{font-size:1rem}[data-theme=classic] .players-info{font-size:.9rem}}@media (max-width: 360px){[data-theme=classic] .game-container{gap:.35rem;padding:.35rem}[data-theme=classic] .game-board{gap:2.5px;padding:4px;max-width:320px}[data-theme=classic] .mini-board{gap:1.5px;padding:2px}[data-theme=classic] .cell{font-size:1.1rem}[data-theme=classic] .mini-board-winner{font-size:1.9rem}}@media (min-width: 768px){[data-theme=classic] .game-container{gap:.8rem;padding:1rem}[data-theme=classic] .game-board{max-width:450px;gap:5px;padding:8px}[data-theme=classic] .mini-board{gap:2.5px;padding:3.5px}[data-theme=classic] .cell{font-size:1.6rem}[data-theme=classic] .mini-board-winner{font-size:2.8rem}}@media (min-width: 1024px){[data-theme=classic] .game-container{gap:1rem;padding:1.25rem}[data-theme=classic] .game-board{max-width:500px;gap:5.5px;padding:9px}[data-theme=classic] .cell{font-size:1.8rem}[data-theme=classic] .mini-board-winner{font-size:3rem}}[data-theme=classic] .dialog-overlay{background-color:#000000b3;-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classic] .dialog-box{background:linear-gradient(135deg,#1e293b,#334155);border-radius:16px;padding:32px;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classic] .dialog-box:before{display:none}[data-theme=classic] .dialog-message{font-size:18px;margin-bottom:24px;line-height:1.6;font-weight:400}[data-theme=classic] .dialog-button{background:linear-gradient(135deg,#3b82f6,#2563eb);padding:12px 32px;font-size:16px;font-weight:600;border-radius:8px;box-shadow:0 4px 12px #3b82f64d}[data-theme=classic] .dialog-button:before{display:none}[data-theme=classic] .dialog-button:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 16px #3b82f666}[data-theme=classic] .dialog-button:active{box-shadow:0 2px 8px #3b82f64d}