:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--slate-100: #f1f5f9;--slate-300: #cbd5e1;--slate-800: #1f2937;--slate-900: #0f1724;--red-300: #fca5a5;--red-500: #ef4444;--red-600: #dc2626;--red-800: #991b1b;--blue-300: #93c5fd;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-800: #1e40af;--gray-400: #9ca3af;--gray-600: #4b5563;--white-20: rgba(255,255,255,.2);--white-10: rgba(255,255,255,.1);--card-shadow: 0 10px 30px rgba(2,6,23,.12);--square-size: clamp(64px, 12vw, 120px)}.text-white{color:#fff!important}.text-slate-800{color:var(--slate-900)!important}.font-bold{font-weight:700!important}.text-sm{font-size:.9rem!important}.text-lg{font-size:1.1rem!important}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.app-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;overflow:hidden;transition:all .28s ease;color:#0f1724}.app-container.bg-menu{background:linear-gradient(135deg,var(--slate-100),var(--slate-300))}.app-container.bg-red{background:linear-gradient(135deg,var(--red-300),var(--red-500))}.app-container.bg-blue{background:linear-gradient(135deg,var(--blue-300),var(--blue-500))}.app-container.bg-gray{background:linear-gradient(135deg,#d1d5db,#9ca3af)}.app-container.dark{color:#fff}.app-container.dark.bg-menu{background:linear-gradient(135deg,var(--slate-800),var(--slate-900))}.app-container.dark.bg-red{background:linear-gradient(135deg,var(--red-600),var(--red-800))}.app-container.dark.bg-blue{background:linear-gradient(135deg,var(--blue-600),var(--blue-800))}.app-container.dark.bg-gray{background:linear-gradient(135deg,#4b5563,#1f2937)}.card{border-radius:20px;padding:1.25rem;background:var(--white-20);border:1px solid rgba(255,255,255,.12);box-shadow:var(--card-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .22s ease;color:inherit}.app-container.dark .card{background:var(--white-10);border:1px solid rgba(255,255,255,.12)}.center-card{max-width:760px;width:100%;margin:8px;text-align:center}.main-title{font-size:clamp(28px,6vw,56px);margin:0 0 1rem;font-weight:800;letter-spacing:-.02em}.title{font-size:clamp(18px,3.6vw,28px);margin:0 0 .75rem;font-weight:700}.btn{display:inline-block;padding:12px 16px;border-radius:14px;border:none;background:#ffffff38;color:inherit;cursor:pointer;font-weight:700;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;margin:8px 0}.app-container.dark .btn{background:#ffffff0f}.btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #0206171f}.btn.primary{background:#0f1724;color:#fff}.btn.big{width:100%;padding:14px 18px;font-size:1rem}.settings-button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#ffffff2e;border:none;cursor:pointer}.app-container.dark .settings-button{background:#ffffff0f}.menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}.options-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.option{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:14px;background:var(--white-20);border:1px solid rgba(255,255,255,.06);cursor:pointer;text-align:left}.app-container.dark .option{background:var(--white-10)}.option .opt-title{font-weight:700}.option .opt-desc{font-size:.92rem;opacity:.86;margin-top:6px}.option.active{box-shadow:0 8px 30px #0206171f;transform:translateY(-3px);background:#ffffff5c}.app-container.dark .option.active{background:#ffffff1f}.settings-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:14px}.setting-info{display:flex;align-items:center;gap:12px}.setting-icon{font-size:1.1rem}.setting-label{font-weight:600}.toggle{width:56px;height:30px;border-radius:999px;background:#94a3b8;border:none;position:relative;cursor:pointer}.toggle .toggle-dot{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .18s ease}.toggle.on{background:#10b981}.toggle.on .toggle-dot{left:30px}.scoreboard{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:20}.score-card{background:var(--white-20);padding:10px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center}.app-container.dark .score-card{background:var(--white-10)}.score-value{font-weight:800;font-size:1.25rem}.score-value.red{color:var(--red-500)}.score-value.blue{color:var(--blue-500)}.score-sep{width:28px;height:2px;background:#0000000f;margin:6px 0}.app-container.dark .score-sep{background:#ffffff0f}.hold-return{position:fixed;right:6px;top:50%;transform:translateY(-50%);z-index:20}.hold-button{width:48px;height:110px;border-radius:14px 0 0 14px;border:none;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--white-20);cursor:pointer}.app-container.dark .hold-button{background:var(--white-10)}.hold-beam{position:absolute;left:6px;top:0;width:6px;border-radius:999px;background:linear-gradient(to top,#fffffff2,#fff9,#fff0);transition:height .08s linear,opacity .12s}.board-wrap{position:relative;width:100%;max-width:980px;display:flex;justify-content:center;margin-top:10px}.board-area{display:flex;align-items:center;justify-content:center;margin-top:8px;width:100%}.board{display:grid;grid-template-columns:repeat(3,var(--square-size));gap:12px;padding:18px;border-radius:18px;background:var(--white-20);border:1px solid rgba(255,255,255,.12)}.app-container.dark .board{background:var(--white-10)}.square{width:var(--square-size);height:var(--square-size);display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#ffffffe6;cursor:pointer;font-weight:800;font-size:clamp(20px,5vw,40px);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.app-container.dark .square{background:#374151;border-color:#ffffff0f;color:#fff}.square:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 12px 28px #0206171f;background:#f8fafc}.square:disabled{cursor:not-allowed;opacity:.85;transform:none;box-shadow:none}.square-x{color:var(--red-500)}.square-o{color:var(--blue-500)}.square.thinking{opacity:.8}.icon{display:block;color:currentColor;transition:transform .6s ease,opacity .6s ease}.icon.shrink{transform:scale(0);opacity:0}.turn-indicator{position:absolute;left:50%;transform:translate(-50%) translateY(-180%);transition:all .6s cubic-bezier(.2,.9,.2,1);opacity:0;z-index:15;pointer-events:none}.turn-indicator.bottom{transform:translate(-50%) translateY(180%)}.turn-indicator.visible{transform:translate(-50%) translateY(0);opacity:1}.turn-card{width:240px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:8px;background:var(--white-20);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px #0206171f}.app-container.dark .turn-card{background:var(--white-10)}.thinking-dots{display:flex;gap:6px;align-items:center}.dot{width:8px;height:8px;border-radius:999px;background:var(--blue-300);display:inline-block;animation:bounce .8s infinite ease-in-out}@keyframes bounce{0%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}60%{transform:translateY(0);opacity:.7}to{transform:translateY(0);opacity:.45}}.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;background:#0206175c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal{max-width:520px;width:92%;text-align:center;padding:22px;border-radius:22px}.winner-icon{margin-bottom:10px}.winner-title{font-size:1.6rem;margin:8px 0;font-weight:800}.winner-title.red{color:var(--red-500)}.winner-title.blue{color:var(--blue-500)}.modal-actions{display:flex;gap:12px;flex-direction:column;margin-top:12px}.modal .btn.primary{background:#0f1724;color:#fff}.modal .btn{width:100%;padding:12px}.small{font-size:.95rem;font-weight:700;color:inherit}@media (max-width:480px){:root{--square-size: clamp(56px, 18vw, 96px)}.hold-button{height:92px;width:44px}.turn-card{width:200px;height:56px}.center-card{padding:12px}}