:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#10151f;color:#f5f7fb;--panel: #1a2330;--panel-2: #202b3a;--line: rgba(255, 255, 255, .16);--muted: #aab6c8;--accent: #f3c653;--cyan: #6fd8d4;--rose: #ef7d9b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(111,216,212,.18),transparent 32rem),linear-gradient(135deg,#10151f,#18202c,#111923)}button{-webkit-tap-highlight-color:transparent;border:0;font:inherit}a{color:inherit;text-decoration:none}.shell{width:min(1120px,100%);min-height:100svh;margin:0 auto;padding:max(16px,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));display:grid;grid-template-rows:auto 1fr auto;gap:16px}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:end}.home-topbar{align-items:center}.home-link{display:inline-flex;width:fit-content;margin:0 0 12px;color:var(--muted);font-weight:850}.eyebrow,.label{margin:0 0 5px;color:var(--muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;font-weight:800}h1{margin:0;font-size:clamp(2rem,8vw,5.4rem);line-height:.9;letter-spacing:0}h2{margin:0;font-size:clamp(1.45rem,4vw,2.4rem);line-height:1;letter-spacing:0}.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.stats span{min-width:72px;text-align:center;padding:10px 12px;background:#ffffff14;border:1px solid var(--line);border-radius:8px;font-weight:800}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:center}.demo-card{position:relative;min-height:420px;display:grid;grid-template-rows:minmax(180px,1fr) auto;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#1a2330d6;box-shadow:0 28px 80px #0000003d;transition:transform .16s ease,border-color .16s ease}.demo-card:hover{transform:translateY(-3px);border-color:#f3c653b8}.demo-art{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px;background:linear-gradient(135deg,rgba(111,216,212,.18),transparent 55%),#090d1461}.demo-art span{display:grid;place-items:center;border-radius:8px;background:#ffffff12;color:var(--accent);font-size:clamp(1.5rem,6vw,4rem);font-weight:900}.ttt-art span{color:var(--cyan)}.ttt-art span:nth-child(odd){color:var(--rose)}.road-art span{color:#78d5ff}.road-art span:nth-child(3n+1){color:#d9a7ff}.demo-copy{padding:18px}.demo-copy p{margin:12px 0 0;color:#dce5f1;line-height:1.45;font-weight:650}.demo-badge{position:absolute;top:14px;right:14px;padding:8px 10px;border-radius:8px;background:#10151fd1;border:1px solid var(--line);color:#fff;font-weight:900}.play-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:16px;align-items:center}.board-wrap{display:grid;place-items:center;min-width:0}.board{width:min(74svh,100%);max-width:680px;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:clamp(5px,1.1vw,10px);padding:clamp(8px,2vw,14px);border:1px solid var(--line);border-radius:8px;background:#070a1070;box-shadow:0 30px 90px #00000047}.chess-board{max-width:640px}.cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border-radius:8px;color:#fff;background:#243041;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -12px 20px #0000001f;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}.cell.light{background:#2a374a}.cell:disabled,.cell.block{cursor:default}.cell.block{background:linear-gradient(135deg,transparent 42%,rgba(255,255,255,.14) 43%,rgba(255,255,255,.14) 56%,transparent 57%),#151c27}.cell.target:before{content:"";width:42%;aspect-ratio:1;border-radius:999px;border:2px solid rgba(243,198,83,.8);box-shadow:0 0 24px #f3c65357}.cell.legal{border-color:#6fd8d4d9;background:#244350}.cell.legal:after{content:"";position:absolute;width:22%;aspect-ratio:1;border-radius:999px;background:var(--cyan);box-shadow:0 0 18px #6fd8d4cc}.cell.occupied span{position:absolute;display:grid;place-items:center;width:78%;aspect-ratio:1;border-radius:8px;font-size:clamp(1.45rem,5.8vw,4.2rem);line-height:1;font-weight:900;box-shadow:0 14px 28px #00000047}.cell.white-piece span{background:#f4ead0;color:#151a23}.cell.black-piece span{background:#161c27;color:#f3c653;border:1px solid rgba(243,198,83,.32)}.cell.selected{outline:3px solid #fff;outline-offset:-5px}.cell.in-check{border-color:#ef7d9bf2;box-shadow:0 0 0 2px #ef7d9b4d,inset 0 -12px 20px #0000001f}.panel{display:grid;gap:12px}.objective,.turn-card{padding:16px;border:1px solid var(--line);border-radius:8px;background:#1a2330e0}.objective p,.turn-card p,.mobile-help p{margin:0;color:#e8edf5;line-height:1.45;font-weight:650}.actions{display:grid;grid-template-columns:54px 54px 1fr;gap:10px}.single-action{grid-template-columns:1fr}.actions button{min-height:52px;border-radius:8px;background:var(--panel-2);color:#fff;border:1px solid var(--line);font-weight:900;cursor:pointer}.actions button span{font-size:1.5rem}#nextBtn,.single-action button{background:var(--accent);color:#10151f}.actions button:disabled{opacity:.45;cursor:default}.mobile-help{display:none}.won .board{border-color:#f3c653e6}.spent:not(.won) .stats span:first-child{color:var(--rose)}.ttt-board{width:min(68svh,100%);max-width:620px;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,16px);padding:clamp(10px,2.4vw,18px);border:1px solid var(--line);border-radius:8px;background:#070a1070;box-shadow:0 30px 90px #00000047}.ttt-cell{display:grid;place-items:center;min-width:0;min-height:0;border-radius:8px;background:#243041;border:1px solid rgba(255,255,255,.1);color:#fff;font-size:clamp(3.4rem,16vw,9rem);line-height:1;font-weight:950;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease}.ttt-cell:disabled{cursor:default}.ttt-cell.x-mark{color:var(--rose)}.ttt-cell.o-mark{color:var(--cyan)}.road-board{position:relative;overflow:hidden;width:min(68svh,100%);max-width:620px;aspect-ratio:7 / 8;border:1px solid var(--line);border-radius:8px;background:radial-gradient(circle at 28% 18%,rgba(120,213,255,.22),transparent 14rem),linear-gradient(180deg,#092e48d1,#0a1f36eb);box-shadow:0 30px 90px #00000047}.river-lanes,.river-entities{position:absolute;top:0;right:0;bottom:0;left:0}.river-lanes{display:grid;grid-template-rows:repeat(8,1fr)}.river-lane{position:relative;overflow:hidden;background:#153f62;border-bottom:1px solid rgba(190,235,255,.08);color:#ddf7ffd1;font-size:clamp(1rem,4vw,2.2rem);font-weight:950;text-shadow:0 2px 10px rgba(4,10,18,.42)}.river-lane:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.07) 31%,transparent 45%),radial-gradient(circle at 72% 22%,rgba(255,255,255,.14),transparent .32rem);opacity:.7}.river-lane.current{background:linear-gradient(135deg,#124a70,#176487)}.river-lane.deep{background:linear-gradient(135deg,#102f55,#0d2445)}.river-lane.reef{background:radial-gradient(circle at 68% 62%,rgba(239,125,155,.2),transparent .68rem),linear-gradient(135deg,#1b695d,#245b50);border-color:#8fd18a80;color:#bff6d0}.river-mark{position:absolute;left:calc((var(--x) + .5) * 100% / 7);top:50%;opacity:.58;transform:translate(-50%,-50%);animation:driftMark 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--delay) * -.12s)}.river-entity{position:absolute;left:calc((var(--x) + .5) * 100% / 7);top:calc((var(--y) + .5) * 100% / 8);display:grid;place-items:center;width:min(11.5vw,3.9rem);aspect-ratio:1;border-radius:999px;transform:translate(-50%,-50%);will-change:left,top;z-index:2;pointer-events:none}.river-entity.hazard{color:#fff;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.32),transparent .66rem),#1e2744d1;font-size:clamp(1.2rem,4.8vw,2.8rem);text-shadow:0 0 16px rgba(217,167,255,.72);animation:hazardGlow .9s ease-in-out infinite alternate}.river-entity.player{background:radial-gradient(circle at 28% 28%,rgba(255,255,255,.42),transparent .72rem),linear-gradient(135deg,#f3c653,#ef7d9b);color:#10151f;font-size:clamp(1.35rem,5.2vw,3.2rem);box-shadow:0 0 0 3px #f3c65347,0 0 22px #f3c6534d;z-index:3}.river-entity.crash{background:linear-gradient(135deg,#ef7d9b,#f3c653)}@keyframes hazardGlow{0%{box-shadow:0 0 16px #78d5ff26}to{box-shadow:0 0 26px #d9a7ff52}}@keyframes driftMark{0%{transform:translate(-55%,-50%)}to{transform:translate(-45%,-50%)}}.road-controls{display:grid;grid-template-columns:repeat(3,54px);grid-template-areas:". up ." "left down right";justify-content:center;gap:10px}.road-controls button{min-height:52px;border-radius:8px;background:var(--panel-2);color:#fff;border:1px solid var(--line);font-size:1.4rem;font-weight:950;cursor:pointer}.road-controls [data-dir=up]{grid-area:up}.road-controls [data-dir=left]{grid-area:left}.road-controls [data-dir=down]{grid-area:down}.road-controls [data-dir=right]{grid-area:right}@media (hover: hover){.cell:not(.block):hover,.actions button:not(:disabled):hover,.ttt-cell:not(:disabled):hover,.road-controls button:hover{transform:translateY(-2px)}.ttt-cell:not(:disabled):hover{border-color:#6fd8d4d9;background:#284052}}@media (max-width: 820px){.shell{gap:12px}.topbar{align-items:start}.play-layout{grid-template-columns:1fr;align-items:start}.demo-grid{grid-template-columns:1fr;align-content:start}.demo-card{min-height:330px}.board{width:min(100%,62svh)}.ttt-board,.road-board{width:min(100%,56svh)}.panel{grid-template-columns:1fr}.objective{display:none}.mobile-help{display:block;padding:10px 0 0}}@media (max-width: 520px){.topbar{display:grid}.home-topbar{align-items:start}h1{font-size:clamp(2.3rem,13vw,4rem)}.stats{justify-content:stretch}.stats span{flex:1}.board{gap:5px;padding:7px}.actions{grid-template-columns:52px 52px minmax(0,1fr)}.single-action{grid-template-columns:1fr}.demo-card{min-height:300px;grid-template-rows:150px auto}.ttt-cell{font-size:clamp(3rem,20vw,6rem)}.road-controls{grid-template-columns:repeat(3,minmax(48px,64px))}}