*,*:before,*:after{box-sizing:border-box}html{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark}body{margin:0;padding:0;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);color:#333;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:1rem}.app-header{text-align:center;color:#fff;margin-bottom:2rem}.app-header h1{font-size:2.5rem;margin:0 0 .5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.1rem;margin:0;opacity:.9}.app-main{flex:1;display:flex;flex-direction:column;gap:2rem}.app-footer{text-align:center;color:#fff;margin-top:2rem;opacity:.8;font-size:.9rem}.connection-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 8px 32px #0000001a;margin:0 auto;max-width:600px;width:100%}.connection-controls h2{margin:0 0 1.5rem;color:#333;text-align:center}.connection-option{margin-bottom:2rem;padding:1.5rem;border:2px solid #f0f0f0;border-radius:8px;transition:border-color .3s ease}.connection-option:hover{border-color:#667eea}.connection-option h3{margin:0 0 .5rem;color:#333}.connection-option p{margin:0 0 1rem;color:#666}.input-group{display:flex;gap:.5rem;flex-wrap:wrap}.input-group textarea{flex:1;min-width:200px;padding:.75rem;border:2px solid #ddd;border-radius:6px;font-family:inherit;font-size:.9rem;resize:vertical;min-height:100px}.input-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}button{padding:.75rem 1.5rem;border:none;border-radius:6px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block;text-align:center}.primary-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.secondary-btn{background:#f8f9fa;color:#333;border:2px solid #ddd}.secondary-btn:hover:not(:disabled){background:#e9ecef;border-color:#bbb}button:disabled{opacity:.6;cursor:not-allowed}.share-section,.answer-section{margin-top:1.5rem;padding:1.5rem;background:#f8f9fa;border-radius:8px}.share-section.hidden,.answer-section.hidden{display:none}.code-display{margin:1rem 0}.code-display textarea{width:100%;font-family:Consolas,Monaco,monospace;font-size:.8rem;background:#fff;border:2px solid #ddd;border-radius:6px;padding:.75rem;resize:vertical;min-height:100px}.qr-code-container{text-align:center;margin:1rem 0}.qr-code-container img{max-width:256px;border-radius:8px;margin:1rem 0}.status-indicator{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem;background:#e3f2fd;border-radius:6px;color:#1976d2}.spinner{width:16px;height:16px;border:2px solid #1976d2;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.connection-status{text-align:center;margin-top:1rem;padding:.5rem}.status-connected{color:#2e7d32}.status-disconnected{color:#d32f2f}.status-connecting{color:#1976d2}.status-failed{color:#d32f2f}.game-container{display:flex;flex-direction:column;gap:2rem;max-width:800px;margin:0 auto;width:100%}.game-container.hidden{display:none}.game-status{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 20px #0000001a}.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.status-header h2{margin:0;color:#333}.player-info{font-size:1.1rem;color:#666}.player-symbol{font-weight:700;color:#667eea;font-size:1.2em}.status-message{text-align:center;font-size:1.2rem;font-weight:600;padding:1rem;border-radius:8px;margin-bottom:1rem}.status-my-turn{background:#e8f5e8;color:#2e7d32}.status-opponent-turn{background:#fff3e0;color:#f57c00}.status-win{background:#e8f5e8;color:#2e7d32}.status-lose{background:#ffebee;color:#d32f2f}.status-draw{background:#f3e5f5;color:#7b1fa2}.status-waiting{background:#e3f2fd;color:#1976d2}.game-controls{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}.game-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding-top:1rem;border-top:1px solid #eee}.info-item{display:flex;justify-content:space-between;align-items:center}.info-item .label{font-weight:600;color:#666}.info-item .value{color:#333}.game-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:400px;margin:0 auto;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a}.game-cell{aspect-ratio:1;font-size:3rem;font-weight:700;background:#f8f9fa;border:3px solid #ddd;border-radius:8px;cursor:pointer;transition:all .3s ease;color:#333;display:flex;align-items:center;justify-content:center;min-height:80px}.game-cell:hover:not(:disabled):not(.occupied){background:#e3f2fd;border-color:#667eea;transform:scale(1.05)}.game-cell:focus{outline:none;box-shadow:0 0 0 3px #667eea4d}.game-cell.occupied{background:#fff;border-color:#667eea;cursor:default}.game-cell:disabled{opacity:.6;cursor:not-allowed}.game-cell.disabled{background:#f5f5f5;color:#999}@media (max-width: 768px){.app-container{padding:.5rem}.app-header h1{font-size:2rem}.connection-panel{padding:1.5rem}.status-header{flex-direction:column;text-align:center}.game-controls{flex-direction:column}.game-cell{font-size:2.5rem;min-height:60px}.input-group{flex-direction:column}.input-group textarea{min-width:auto}}@media (max-width: 480px){.app-header h1{font-size:1.5rem}.game-cell{font-size:2rem;min-height:50px}.connection-panel{padding:1rem}}@media (prefers-color-scheme: dark){body{background:linear-gradient(135deg,#2d3748,#4a5568)}.connection-panel,.game-status,.game-board{background:#2d3748;color:#e2e8f0}.connection-option{border-color:#4a5568}.connection-option:hover{border-color:#667eea}.game-cell{background:#4a5568;border-color:#718096;color:#e2e8f0}.game-cell:hover:not(:disabled):not(.occupied){background:#2b6cb0;border-color:#667eea}.game-cell.occupied{background:#2d3748;border-color:#667eea}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spinner{animation:none}}@media (prefers-contrast: high){.game-cell{border-width:4px}.primary-btn{background:#000;color:#fff}.secondary-btn{background:#fff;color:#000;border-color:#000}}.game-cell:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid #667eea;outline-offset:2px}