:root{color-scheme:dark;--bg:#080b19;--panel:#0f1429;--panel-soft:#111a34;--border:#25304f;--text:#f4f5ff;--muted:#929ab6;--cyan:#40e5e4;--purple:#bd81ff;--gold:#ffcf77;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans HK",sans-serif}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 65% 65% at 75% 0%,#161a3b 0%,transparent 70%),linear-gradient(160deg,#090c1d 0%,#080b19 70%);color:var(--text);font-family:var(--font);line-height:1.5;min-height:100vh;overflow-x:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #68ffff;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}[hidden]{display:none!important}.shell{width:min(1260px,calc(100% - 72px));margin-inline:auto}.ambient-glow{position:fixed;pointer-events:none;filter:blur(100px);opacity:.15;z-index:-1}.ambient-glow--cyan{width:360px;height:360px;left:-190px;top:240px;background:#00f0e8}.ambient-glow--purple{width:360px;height:360px;right:-150px;bottom:10px;background:#7746ff}
.topbar{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(143,159,210,.1)}.logo{text-decoration:none;color:white;display:flex;align-items:center;gap:12px}.logo-icon{width:41px;height:41px;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;background:linear-gradient(135deg,rgba(45,224,222,.18),rgba(180,113,255,.19));border:1px solid #2b4161;border-radius:11px;font-size:22px;font-weight:900;line-height:1}.logo-icon span:first-child{color:var(--cyan)}.logo-icon span:last-child{color:var(--purple)}.logo-text{font-size:23px;font-weight:900;letter-spacing:-1.2px;line-height:1}.logo-accent{color:var(--cyan)}.logo-text small{display:block;font-size:9px;font-weight:700;letter-spacing:3.1px;margin-top:6px;color:#9da8d1}.topbar-right{display:flex;align-items:center;gap:19px}.online-pill{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#929ab0;display:flex;align-items:center;gap:9px}.online-pill>span:first-child,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#36e8b6;box-shadow:0 0 11px #37e8bb}.icon-button{width:41px;height:41px;border-radius:12px;background:rgba(20,28,55,.9);border:1px solid #2c3755;color:#d6d9ec;font-size:19px}.icon-button:hover{border-color:var(--cyan)}
.main-layout{display:grid;grid-template-columns:minmax(315px,405px) minmax(0,1fr);gap:43px;padding-top:44px;padding-bottom:46px}.sidebar{min-width:0}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2.4px;color:#61dedd}.sparkle{font-size:16px;margin-right:6px}.intro h1{font-size:clamp(33px,3.2vw,44px);letter-spacing:-1.9px;line-height:1.23;margin:20px 0 15px;font-weight:900}.intro h1 span{background:linear-gradient(100deg,#39e3ec 0%,#a68aff 84%);color:transparent;background-clip:text;-webkit-background-clip:text}.intro p{margin:0;color:#9ca4c0;font-size:13px;line-height:1.9}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin:34px 0 14px}.panel-heading h2{margin:0;font-size:13px;font-weight:850;letter-spacing:1px}.panel-heading span{font-size:10px;font-weight:700;color:#667292;letter-spacing:1px}.mode-list{display:grid;gap:11px}.mode-card{position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid #27304b;background:linear-gradient(135deg,rgba(20,26,51,.94),rgba(14,19,38,.91));border-radius:15px;padding:13px 14px;color:var(--text);min-height:77px;transition:transform .15s,border-color .15s,background .15s}.mode-card:hover{transform:translateY(-2px);border-color:#52729a}.mode-card[aria-pressed=true]{border-color:#36bbcd;box-shadow:inset 0 0 0 1px rgba(54,226,220,.17),0 4px 28px rgba(0,222,238,.055);background:linear-gradient(122deg,rgba(16,46,61,.87),rgba(19,24,49,.96))}.mode-icon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:12px;background:#1b2742;font-size:29px;font-weight:500}.mode-icon--orbit{color:#4ce7e6;background:#163b46}.mode-icon--rush{color:#ffbd72;background:#382a35}.mode-icon--classic{color:#b993fb;background:#2a234b;font-size:23px;font-weight:900}.mode-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.mode-copy strong{font-size:14px;font-weight:850;white-space:nowrap}.mode-copy strong i{font-style:normal;font-size:9px;color:#161f26;background:#46ddd4;border-radius:4px;margin-left:6px;padding:2px 5px;vertical-align:2px}.mode-copy small{color:#9fa9c4;font-size:11px;white-space:normal}.mode-check{margin-left:auto;font-size:12px;color:#45e6e3;border:1px solid #39c8ce;background:#123948;border-radius:50%;height:20px;width:20px;display:grid;place-items:center;opacity:0}.mode-card[aria-pressed=true] .mode-check{opacity:1}
.settings-card,.progress-card{border:1px solid #25304b;border-radius:17px;background:rgba(15,20,40,.77);margin-top:20px;padding:21px}.settings-title{display:flex;align-items:center;justify-content:space-between;color:#e7eaff;font-weight:850;font-size:13px;padding-bottom:18px}.tiny-dot{font-size:6px;color:#576587}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.setting-row:last-child{margin-bottom:0}.setting-label{font-size:12px;color:#aab3cc;flex:0 0 44px}.segment{display:flex;gap:3px;background:#090e20;border:1px solid #26324a;padding:4px;border-radius:9px;flex:1;min-width:0}.segment button{border:0;background:transparent;border-radius:6px;color:#8790ac;flex:1;padding:7px 5px;font-size:11px;font-weight:700;white-space:nowrap}.segment button[aria-pressed=true]{color:#f3faff;background:#264258;box-shadow:0 1px 4px #040714}.segment button:hover:not([aria-pressed=true]){color:white}.progress-card{padding:20px}.progress-top,.level-desc{display:flex;align-items:center;justify-content:space-between}.progress-top>span{font-size:12px;font-weight:800;color:#e0e6f7}.progress-top strong{font-size:12px;color:var(--cyan)}.progress-top strong span{font-size:9px;color:#8794b3;font-weight:600;letter-spacing:1px;margin-left:3px}.level-track{height:6px;border-radius:10px;background:#26334f;overflow:hidden;margin-top:16px}.level-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#27dce9,#b079ff);transition:width .5s ease}.level-desc{color:#7f8da8;font-size:10px;margin:9px 0 18px}.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #253049;padding-top:17px}.stat-strip>div{display:flex;flex-direction:column;text-align:center;gap:2px}.stat-strip>div+div{border-left:1px solid #26334c}.stat-strip strong{font-size:21px;line-height:1.1;color:#f7f7ff;font-variant-numeric:tabular-nums}.stat-strip small{font-size:10px;color:#8692b1}
.game-panel{min-width:0;background:linear-gradient(160deg,rgba(19,25,49,.8),rgba(11,16,34,.85));border:1px solid #273150;border-radius:22px;box-shadow:0 25px 60px rgba(0,0,0,.16);padding:22px 24px 18px;align-self:start}.arena-top,.arena-top-left{display:flex;align-items:center}.arena-top{justify-content:space-between;gap:12px}.arena-top-left{gap:10px;color:#d4deef;font-size:11px;font-weight:850;letter-spacing:1.6px}.arena-delimiter{color:#4a5576}.round-badge{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#acb6d0;background:#202942;border-radius:7px;padding:8px 10px}.scoreline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 4px 15px}.player{display:flex;align-items:center;gap:10px;min-width:0}.player-token{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;font-size:31px;line-height:1;font-weight:600}.player-token--x{background:#16383f;color:#42f0ed;border:1px solid #21575e}.player-token--o{background:#322447;color:#be83ff;border:1px solid #4b3264}.player-copy{display:flex;flex-direction:column;gap:1px;min-width:0}.player-copy strong{font-size:14px;font-weight:850;white-space:nowrap}.player-copy span{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#7b8aa7;white-space:nowrap}.score{font-size:24px;font-weight:850;color:#f7f9ff;margin-inline:10px;font-variant-numeric:tabular-nums}.versus{font-size:10px;letter-spacing:1px;color:#63708a;font-weight:950}.player.is-active .player-copy strong{color:var(--cyan)}.player--o.is-active .player-copy strong{color:var(--purple)}
.arena-stage{height:clamp(380px,41vw,488px);position:relative;isolation:isolate;overflow:hidden;border-radius:15px;border:1px solid #243151;background:radial-gradient(ellipse at 50% 53%,rgba(30,47,89,.47),transparent 58%),linear-gradient(160deg,#0d1632,#091026 82%);touch-action:manipulation}.arena-stage:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,#34547b 1px,transparent 1px);background-size:23px 23px;mask-image:radial-gradient(ellipse,black,transparent 75%);z-index:-1}.arena-stage canvas{display:block;width:100%;height:100%;outline:none;touch-action:manipulation;position:relative;z-index:1}.stage-corner{width:14px;height:14px;position:absolute;z-index:3;pointer-events:none;border-color:#385c80}.stage-corner--tl{top:16px;left:16px;border-top:1px solid;border-left:1px solid}.stage-corner--tr{top:16px;right:16px;border-top:1px solid;border-right:1px solid}.stage-corner--bl{bottom:16px;left:16px;border-bottom:1px solid;border-left:1px solid}.stage-corner--br{bottom:16px;right:16px;border-bottom:1px solid;border-right:1px solid}.stage-label{position:absolute;z-index:2;pointer-events:none;font-size:8px;letter-spacing:2px;color:#465a7a;font-weight:850;bottom:28px}.stage-label--left{left:27px}.stage-label--right{right:26px}.stage-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#7c8da9;font-size:12px;z-index:5}.loader-orbit{width:16px;height:16px;border:2px solid #225a6d;border-top-color:#55e6e9;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.fallback-board{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(82%,370px);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--board-size,3),1fr);gap:7px}.cell{min-width:0;min-height:0;border:1px solid #2f486c;background:linear-gradient(145deg,#1c2a49,#111b36);border-radius:11px;color:#e7faff;font-size:clamp(35px,8vw,71px);line-height:1;display:grid;place-items:center;box-shadow:0 3px 0 #071024,0 6px 12px rgba(0,0,0,.1);transition:transform .1s,border-color .1s}.cell:not(:disabled):hover{transform:translateY(-2px);border-color:#3de4df}.cell.x{color:var(--cyan);text-shadow:0 0 16px #2deaea88}.cell.o{color:var(--purple);text-shadow:0 0 16px #9e66ff88}.cell.last{outline:1px solid #b1bfff88}.cell.hint{background:#234f5d;border-color:var(--cyan);box-shadow:0 0 18px #3af9e955}.cell.win{background:#315066;border-color:#f8d27d}.cell:disabled{opacity:1;cursor:default}.fallback-board[data-size="4"]{gap:5px}.fallback-board[data-size="4"] .cell{font-size:clamp(31px,6vw,55px);border-radius:8px}
.stage-hint{position:absolute;z-index:4;top:22px;left:50%;transform:translateX(-50%);color:#5bf3e6;background:#102d40d9;border:1px solid #2d7a86;border-radius:999px;white-space:nowrap;font-size:11px;font-weight:850;padding:8px 13px}.result-card{position:relative;width:min(390px,100%);margin:auto;padding:clamp(24px,5vw,34px) 24px 24px;text-align:center;border:1px solid #517589;border-radius:19px;background:linear-gradient(155deg,rgba(30,51,76,.98),rgba(21,25,56,.99));box-shadow:0 25px 65px #020916d9,0 0 45px #46b9ce1a}.result-emoji{font-size:43px}.result-card h2{font-size:25px;letter-spacing:-.6px;margin:10px 0 5px}.result-card p{font-size:12px;color:#a8b9d3;margin:0 0 14px}.xp-reward{display:block;font-size:13px;font-weight:900;color:#5fe8de;margin-bottom:16px}.result-play{width:100%;padding:13px;border:0;border-radius:10px;color:#09202a;font-weight:900;font-size:13px;background:linear-gradient(95deg,#4fe5e3,#89ddd9)}
.game-status{display:flex;align-items:center;gap:13px;background:#121c37;border:1px solid #29385a;border-radius:12px;margin-top:14px;padding:14px 16px;min-height:69px}.status-indicator{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#17434c;color:#52ece5;font-size:25px;font-weight:800}.game-status[data-turn="O"] .status-indicator{background:#35244c;color:var(--purple)}.status-copy{display:flex;flex:1;flex-direction:column;min-width:0;gap:3px}.status-copy strong{font-size:13px;color:#f4f7ff}.status-copy span{font-size:11px;color:#8798b9;line-height:1.4}.status-tag{font-size:9px;font-weight:900;letter-spacing:1px;color:#46deda;white-space:nowrap}.game-actions{display:flex;gap:10px;margin-top:14px}.game-actions button{border-radius:10px;min-height:44px;font-size:12px;font-weight:800}.primary-action{flex:1.3;border:1px solid #43dadd;background:linear-gradient(100deg,#36d5e1,#67ddd7);color:#07202e}.primary-action span{font-size:19px;vertical-align:-1px;margin-right:5px}.secondary-action{flex:1;border:1px solid #36425c;background:#1b2642;color:#dde9fa}.secondary-action:hover:not(:disabled){border-color:#6b8ab0}.secondary-action small{font-size:10px;color:#8fa3c0}.rules-note{font-size:10px;line-height:1.65;color:#8192b0;margin-top:15px;min-height:30px;display:flex;align-items:flex-start;gap:8px}.rules-note>span{color:#57e1e2;font-size:17px;line-height:1.2}.footer-note{display:flex;justify-content:space-between;color:#536688;font-size:9px;letter-spacing:1px;font-weight:750;border-top:1px solid #202c46;margin-top:15px;padding-top:15px}.site-footer{border-top:1px solid #1d2641;padding:22px 0 30px;color:#586583;display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1.25px}
@media(max-width:1100px){.shell{width:min(100% - 48px,1000px)}.main-layout{gap:24px;grid-template-columns:minmax(295px,360px) minmax(0,1fr)}.game-panel{padding:17px}.score{margin-inline:2px}.arena-stage{height:430px}.status-tag{display:none}.player-token{width:40px;height:40px}.mode-copy small{font-size:10px}}
@media(max-width:810px){.main-layout{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:25px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.intro{grid-column:1/-1}.intro h1{margin:10px 0;font-size:36px}.intro p{font-size:12px}.panel-heading,.mode-list{grid-column:1/-1}.panel-heading{margin-top:23px}.mode-list{grid-template-columns:repeat(3,1fr);gap:9px}.mode-card{flex-direction:column;align-items:flex-start;gap:7px;padding:13px;min-height:133px}.mode-icon{width:35px;height:35px;flex-basis:35px;font-size:24px}.mode-copy strong{font-size:12px}.mode-copy small{font-size:10px}.mode-check{position:absolute;right:10px;top:12px}.settings-card,.progress-card{margin-top:16px}.game-panel{max-width:690px;width:100%;margin:auto}.arena-stage{height:490px}}
@media(max-width:575px){.shell{width:calc(100% - 28px)}.topbar{height:74px}.logo-icon{width:35px;height:35px;font-size:19px}.logo-text{font-size:20px}.logo-text small{font-size:8px}.online-pill{display:none}.main-layout{padding-top:22px;gap:20px;padding-bottom:22px}.sidebar{display:block}.intro h1{font-size:clamp(30px,8vw,39px);margin:12px 0}.intro p{font-size:12px}.desktop-break{display:none}.panel-heading{margin:23px 0 11px}.mode-list{grid-template-columns:1fr 1fr;gap:9px}.mode-card{min-height:116px;gap:8px;padding:12px}.mode-icon{height:35px;width:35px;flex-basis:35px}.mode-copy strong{font-size:12px}.mode-copy small{font-size:10px;line-height:1.5}.mode-check{right:8px;top:8px;width:18px;height:18px}.settings-card,.progress-card{margin-top:13px;padding:15px}.settings-title{padding-bottom:12px}.setting-row{margin-bottom:9px}.progress-card{padding:16px}.stat-strip{padding-top:13px}.game-panel{padding:12px;border-radius:17px}.arena-top{padding:3px}.scoreline{margin:15px 0 14px;gap:5px}.player{gap:6px}.player-token{width:36px;height:36px;font-size:26px;border-radius:10px}.player-copy strong{font-size:12px}.player-copy span{font-size:8px}.score{font-size:20px;margin:0 3px}.versus{font-size:9px}.arena-stage{height:min(109vw,440px);min-height:340px}.game-status{padding:12px 11px;gap:9px;margin-top:11px}.status-copy strong{font-size:12px}.status-copy span{font-size:10px}.status-indicator{width:30px;height:30px}.game-actions{gap:7px;margin-top:10px}.game-actions button{font-size:11px;min-height:42px}.secondary-action small{font-size:9px}.footer-note{font-size:8px}.site-footer{font-size:8px;line-height:1.6;gap:10px}.site-footer span{text-align:right}.rules-note{margin-top:11px}.stage-label{bottom:18px;font-size:7px}.stage-label--left{left:17px}.stage-label--right{right:17px}.stage-corner--tl{top:10px;left:10px}.stage-corner--tr{top:10px;right:10px}.stage-corner--bl{bottom:10px;left:10px}.stage-corner--br{bottom:10px;right:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Dedicated one-tap two-player launch buttons for all game variants. */
.mode-option{display:flex;gap:8px;align-items:stretch;min-width:0}
.mode-option .mode-card{flex:1;min-width:0}
.two-player-start{flex:0 0 66px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid #415474;border-radius:13px;background:linear-gradient(145deg,#182944,#16223d);color:#b7f1fa;transition:background .15s,border-color .15s;min-height:75px}
.two-player-start strong{font-size:17px;letter-spacing:.5px;line-height:1.1}
.two-player-start small{font-size:10px;color:#9eb8d4;font-weight:750}
.two-player-icon{font-size:13px;color:#7edee4;letter-spacing:-4px;padding-right:4px}
.two-player-start:hover{border-color:#55dfeb;background:#21445a}
.two-player-start[aria-pressed=true]{border-color:#42e5e4;background:linear-gradient(155deg,#1a4854,#193347);box-shadow:inset 0 0 0 1px #20abbb55}
.local-2p-note{font-size:11px;line-height:1.6;color:#b0d9ea;margin:-8px 0 16px;padding:10px;background:#132b3b;border-radius:9px;border:1px solid #285368}
@media(max-width:810px){.mode-option{flex-direction:column;gap:7px}.mode-option .mode-card{width:100%}.two-player-start{flex:auto;min-height:37px;flex-direction:row;gap:6px;padding:5px 6px}.two-player-start strong{font-size:13px}.two-player-start small{font-size:10px}.two-player-icon{font-size:11px}}
@media(max-width:575px){.mode-option:nth-child(3){grid-column:1/-1}.mode-option:nth-child(3) .mode-card{flex-direction:row;min-height:65px}.mode-option:nth-child(3){flex-direction:row}.mode-option:nth-child(3) .two-player-start{flex:0 0 66px;flex-direction:column}.mode-option:nth-child(3) .mode-card{flex:1}.mode-option .mode-card{min-height:115px}.mode-option:nth-child(3) .mode-card{min-height:69px}.two-player-start{min-height:38px}.mode-option:nth-child(3) .two-player-start{min-height:69px}}

/* Persistent bilingual switch: compact enough to stay visible on phones. */
.language-switch{display:flex;gap:2px;align-items:center;border:1px solid #344565;border-radius:10px;padding:3px;background:#0c152c;flex-shrink:0}
.language-switch button{border:0;border-radius:7px;background:transparent;color:#8fa2c0;padding:7px 11px;font-size:11px;font-weight:850;white-space:nowrap;min-width:40px}
.language-switch button[aria-pressed="true"]{background:#25435b;color:#57e9e7;box-shadow:0 1px 5px #0005}
.language-switch button:hover:not([aria-pressed="true"]){color:#effaff}
.intro .intro-headline-top{background:none;color:var(--text);-webkit-text-fill-color:var(--text)}
@media(max-width:575px){.topbar-right{gap:9px}.language-switch button{padding:7px 9px;font-size:10px}}
html[lang="en"] .intro h1{font-size:clamp(28px,2.85vw,39px);letter-spacing:-1.45px}
html[lang="en"] .intro p{font-size:12px}
html[lang="en"] .mode-copy strong{white-space:normal}
html[lang="en"] .setting-label{flex-basis:61px;font-size:10.5px}
html[lang="en"] .segment button{font-size:10px}
@media(max-width:575px){html[lang="en"] .intro h1{font-size:clamp(26px,6.5vw,35px)}html[lang="en"] .mode-copy strong{font-size:11px}html[lang="en"] .mode-copy small{font-size:9.5px}}

.online-pill .online-text{display:inline;white-space:nowrap;width:auto;height:auto;border-radius:0;background:none;box-shadow:none}

/* The victory/draw message must be centred in the visible screen, NOT in
   the scrolled 3D board (which is clipped and can be below the fold). */
.result-overlay{
  position:fixed;inset:0;z-index:10000;
  width:100%;height:100vh;height:100dvh;
  display:flex;overflow-y:auto;overscroll-behavior:contain;
  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:rgba(4,9,25,.80);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
body.result-open{overflow:hidden}
.result-card h2{font-size:clamp(24px,6vw,31px);line-height:1.22;overflow-wrap:anywhere}
.result-card p{font-size:13px;line-height:1.6}
.result-emoji{font-size:52px;line-height:1.2}
.result-play{min-height:48px}
.result-view-board{display:block;width:100%;margin-top:10px;padding:10px;border:1px solid #466279;border-radius:10px;background:#1a3048;color:#cceaf7;font-weight:800;font-size:12px;min-height:42px}
.result-view-board:hover{border-color:#73dbe0;color:white}
@media(max-height:480px){.result-card{padding:16px 20px}.result-emoji{font-size:30px}.result-card h2{margin:5px 0}.result-card p{margin-bottom:5px}.xp-reward{margin-bottom:8px}}