:root{color:#e2e8f0;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg-start:#0f172a;--bg-mid:#1e293b;--bg-end:#020617;--bg-accent:#fbbf2447;--orb-one:radial-gradient(circle, #fbbf2457, #fbbf2400);--orb-two:radial-gradient(circle, #38bdf82e, #38bdf800);--card-bg:#0f172ad1;--card-border:#ffffff1f;--card-shadow:#02061773;--brand-surface:#0f172ae6;--soft-surface:#94a3b81f;--soft-border:#94a3b833;--menu-bg:#0f172af0;--overlay-bg:#02061794;--text-main:#f8fafc;--text-soft:#cbd5e1;--text-muted:#94a3b8;--accent-text:#fbbf24;--segment-active-bg:#f8fafc1f;--segment-active-text:#f8fafc;--input-bg:#0f172aa6;--input-border:#94a3b840;--square-bg:linear-gradient(180deg, #1e293bf5, #0f172af5);--square-bg-hover:linear-gradient(180deg, #334155fa, #0f172afa);--square-border:#94a3b829;--square-highlight:#ffffff14;--square-highlight-strong:#ffffff1f;--square-shadow:#0f172a52;--winning-bg:linear-gradient(180deg, #f59e0b, #d97706);--winning-text:#111827;--action-primary-bg:linear-gradient(135deg, #fbbf24, #f59e0b);--action-primary-text:#0f172a;--focus-ring:#3b82f6d9;--focus-ring-soft:#3b82f640;--avatar-surface:#1e293bb3;--avatar-selected-bg:#3b82f62e;--history-item-bg:#0f172a66;--history-win:#4ade80;--history-loss:#f87171;--history-draw:#fbbf24;--success-bg:#22c55e24;--success-border:#22c55e47;--success-text:#bbf7d0;--error-bg:#f8717124;--error-border:#f8717147;--error-text:#fecaca;background:#020617;font-family:Trebuchet MS,Segoe UI,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{color:#0f172a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-start:#fff8ed;--bg-mid:#fde68a;--bg-end:#dbeafe;--bg-accent:#fb923c42;--orb-one:radial-gradient(circle, #fb923c52, #fb923c00);--orb-two:radial-gradient(circle, #0ea5e93d, #0ea5e900);--card-bg:#fffcf5c7;--card-border:#fb923c33;--card-shadow:#fb923c2e;--brand-surface:#fff7eddb;--soft-surface:#ffffffa3;--soft-border:#94a3b857;--menu-bg:#fffaf0f5;--overlay-bg:#0f172a38;--text-main:#0f172a;--text-soft:#3f3f46;--text-muted:#64748b;--accent-text:#c2410c;--segment-active-bg:#f9731629;--segment-active-text:#9a3412;--input-bg:#ffffffb8;--input-border:#fb923c38;--square-bg:linear-gradient(180deg, #fffffffa, #ffedd5eb);--square-bg-hover:linear-gradient(180deg, #fff, #fed7aaf2);--square-border:#fb923c38;--square-highlight:#ffffffeb;--square-highlight-strong:#fffffff2;--square-shadow:#fb923c2e;--winning-bg:linear-gradient(180deg, #fb923c, #f97316);--winning-text:#431407;--action-primary-bg:linear-gradient(135deg, #f97316, #fb923c);--action-primary-text:#431407;--focus-ring:#0ea5e9b3;--focus-ring-soft:#0ea5e92e;--avatar-surface:#ffedd5b8;--avatar-selected-bg:#f9731624;--history-item-bg:#ffffff94;--history-win:#15803d;--history-loss:#dc2626;--history-draw:#b45309;--success-bg:#22c55e1f;--success-border:#22c55e3d;--success-text:#166534;--error-bg:#ef44441f;--error-border:#ef44443d;--error-text:#991b1b;background:#f8fafc}*{box-sizing:border-box}html,body,#root{min-height:100%}body,button,h1,p{margin:0}button{font:inherit}h1{color:var(--text-main);font-size:clamp(2.2rem,6vw,3.4rem);line-height:1}.game-shell{isolation:isolate;min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:radial-gradient(circle at top, var(--bg-accent), transparent 34%), linear-gradient(165deg, var(--bg-start) 0%, var(--bg-mid) 48%, var(--bg-end) 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:background .18s;display:flex;position:relative}.game-shell:before,.game-shell:after{content:"";pointer-events:none;z-index:-1;filter:blur(8px);border-radius:999px;position:absolute}.game-shell:before{background:var(--orb-one);width:min(34vw,280px);height:min(34vw,280px);top:8%;left:5%}.game-shell:after{background:var(--orb-two);width:min(28vw,220px);height:min(28vw,220px);bottom:10%;right:7%}.shell-topbar,.panel{width:min(100%,560px)}.shell-topbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.brand-mark{background:var(--brand-surface);border:1px solid var(--soft-border);width:50px;height:50px;color:var(--text-main);letter-spacing:.08em;border-radius:18px;place-items:center;font-weight:800;display:grid}.banner{top:max(18px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));z-index:50;width:min(360px,100vw - 32px);box-shadow:0 14px 30px var(--card-shadow);border:1px solid #0000;border-radius:18px;padding:14px 16px;font-size:.95rem;animation:.18s toast-in;position:fixed}.banner.success{color:var(--success-text);background:var(--success-bg);border-color:var(--success-border)}.banner.error{color:var(--error-text);background:var(--error-bg);border-color:var(--error-border)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.panel,.modal-card{border:1px solid var(--card-border);background:var(--card-bg);box-shadow:0 28px 60px var(--card-shadow);-webkit-backdrop-filter:blur(14px);border-radius:28px;padding:clamp(20px,4vw,32px)}.panel-copy{margin-bottom:24px}.panel h2,.modal-card h2{color:var(--text-main);margin:0;font-size:1.4rem}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px;font-size:.82rem;font-weight:700}.lead,.subtle-text{color:var(--text-soft)}.lead{margin-top:12px}.subtle-text{margin-top:6px;font-size:.92rem}.auth-switcher{background:var(--soft-surface);border:1px solid var(--soft-border);border-radius:18px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px;padding:6px;display:grid}.segment{min-height:44px;color:var(--text-soft);cursor:pointer;background:0 0;border:0;border-radius:14px;font-weight:700}.segment.active{background:var(--segment-active-bg);color:var(--segment-active-text)}.form{gap:18px;display:grid}.field{gap:8px;display:grid}.field span{color:var(--text-soft);font-size:.92rem}.field input{border:1px solid var(--input-border);background:var(--input-bg);width:100%;min-height:50px;color:var(--text-main);border-radius:16px;outline:none;padding:0 15px}.field input::placeholder{color:var(--text-muted)}.field input:focus{border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--focus-ring-soft)}.avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.avatar-option{border:1px solid var(--soft-border);background:var(--soft-surface);cursor:pointer;border-radius:20px;min-height:72px;font-size:1.9rem;transition:transform .14s,border-color .14s,background .14s}.avatar-option.selected{border-color:var(--focus-ring);background:var(--avatar-selected-bg);transform:translateY(-2px)}.game-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.player-card{align-items:center;gap:14px;display:flex}.player-avatar{background:var(--avatar-surface);border:1px solid var(--soft-border);border-radius:20px;place-items:center;width:60px;height:60px;font-size:1.8rem;display:grid}.menu-shell,.actions,.profile-actions{gap:12px;display:flex}.menu-shell{align-items:flex-end;position:relative}.hamburger-button{border:1px solid var(--soft-border);background:var(--soft-surface);cursor:pointer;border-radius:18px;flex-direction:column;justify-content:center;gap:5px;width:52px;height:52px;padding:0;display:inline-flex}.hamburger-button span{background:var(--text-main);border-radius:999px;width:22px;height:2px;margin:0 auto;display:block}.hamburger-menu{z-index:30;border:1px solid var(--soft-border);background:var(--menu-bg);min-width:280px;box-shadow:0 18px 34px var(--card-shadow);border-radius:22px;padding:12px;position:absolute;top:calc(100% + 12px);right:0}.menu-profile-button{cursor:pointer;background:0 0;border:0;width:100%;margin:0 0 8px;padding:0}.menu-profile{background:var(--soft-surface);text-align:left;border-radius:18px;align-items:center;gap:12px;padding:12px;display:flex}.menu-avatar{background:var(--avatar-surface);border:1px solid var(--soft-border);border-radius:16px;place-items:center;width:48px;height:48px;font-size:1.5rem;display:grid}.menu-profile strong{color:var(--text-main);display:block}.menu-profile p{color:var(--text-muted);margin-top:2px;font-size:.84rem}.menu-link{width:100%;min-height:52px;color:var(--text-main);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:16px;gap:2px;padding:10px 14px;display:grid}.menu-link span{font-weight:700}.menu-link small{color:var(--text-muted);font-size:.8rem}.menu-link:hover{background:var(--soft-surface)}.menu-link.danger span{color:var(--history-loss)}.theme-toggle,.action-button,.modal-close{cursor:pointer;touch-action:manipulation;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:12px 16px;font-size:.95rem;font-weight:700;display:inline-flex}.theme-toggle,.action-button.secondary,.modal-close{border:1px solid var(--soft-border);background:var(--soft-surface);color:var(--text-main)}.theme-icon{font-size:1.05rem;line-height:1}.status-row,.scoreboard-header,.modal-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.status-row{margin:18px 0 12px}.status{color:var(--text-soft);margin:0;font-size:1.05rem}.saving-indicator{color:var(--text-muted);white-space:nowrap;font-size:.86rem}.scoreboard-header{margin-bottom:14px}.link-button{color:var(--accent-text);cursor:pointer;background:0 0;border:0;padding:0;font-weight:700}.scoreboard{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px;display:grid}.score-pill{background:var(--soft-surface);border:1px solid var(--soft-border);text-align:center;border-radius:18px;padding:14px 12px}.score-label{color:var(--text-muted);margin-bottom:4px;font-size:.8rem;display:block}.score-pill strong{color:var(--text-main);font-size:1.5rem}.board{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,12px);display:grid}.square{aspect-ratio:1;border:1px solid var(--square-border);min-height:84px;color:var(--text-main);background:var(--square-bg);box-shadow:inset 0 1px 0 var(--square-highlight);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:22px;font-size:clamp(2.25rem,11vw,3.4rem);font-weight:800;transition:transform .14s,background .14s,box-shadow .14s}.square:hover{background:var(--square-bg-hover);box-shadow:inset 0 1px 0 var(--square-highlight-strong), 0 14px 24px var(--square-shadow);transform:translateY(-2px)}.square.winning{background:var(--winning-bg);color:var(--winning-text);border-color:#0000}.actions{margin-top:24px}.action-button{border:0;flex:1;transition:transform .14s,background .14s}.action-button.primary{color:var(--action-primary-text);background:var(--action-primary-bg)}.submit-button{width:100%}.submit-button:disabled{opacity:.7;cursor:wait}.modal-overlay{z-index:40;background:var(--overlay-bg);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.history-modal{width:min(100%,620px);max-height:min(80vh,720px);overflow:auto}.history-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0;display:grid}.history-stat{background:var(--soft-surface);border:1px solid var(--soft-border);text-align:center;border-radius:18px;padding:14px}.history-stat span{color:var(--text-muted);margin-bottom:4px;font-size:.82rem;display:block}.history-stat strong{color:var(--text-main);font-size:1.4rem}.history-list{gap:10px;display:grid}.history-item{background:var(--history-item-bg);border:1px solid var(--soft-border);border-radius:18px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.history-item p{color:var(--text-muted);margin-top:4px;font-size:.85rem}.history-result{text-transform:capitalize;color:var(--text-main)}.history-result.win{color:var(--history-win)}.history-result.loss{color:var(--history-loss)}.history-result.draw{color:var(--history-draw)}.history-badge{background:var(--soft-surface);border:1px solid var(--soft-border);color:var(--text-soft);text-transform:capitalize;border-radius:999px;padding:7px 12px;font-size:.85rem}.history-empty{text-align:center;color:var(--text-muted);background:var(--soft-surface);border:1px solid var(--soft-border);border-radius:18px;padding:18px}.hamburger-button:focus-visible,.square:focus-visible,.action-button:focus-visible,.theme-toggle:focus-visible,.segment:focus-visible,.avatar-option:focus-visible,.menu-link:focus-visible,.menu-profile-button:focus-visible,.link-button:focus-visible,.modal-close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}@media (hover:hover){.theme-toggle:hover,.action-button:hover,.avatar-option:hover,.hamburger-button:hover{transform:translateY(-1px)}}@media (width<=640px){.game-shell:before{top:5%;left:-8%}.game-shell:after{bottom:8%;right:-6%}.shell-topbar,.game-header,.status-row,.scoreboard-header,.actions,.profile-actions,.modal-header{flex-direction:column;align-items:stretch}.theme-toggle,.action-button,.modal-close,.link-button,.menu-shell,.hamburger-menu{width:100%}.hamburger-menu{min-width:0;position:static}.banner{width:auto;left:16px;right:16px}.scoreboard,.history-summary{grid-template-columns:1fr}.modal-overlay{align-items:end;padding:12px}.history-modal{border-bottom-right-radius:20px;border-bottom-left-radius:20px;width:100%;max-height:82vh}.history-item{flex-direction:column;align-items:flex-start}}