/* TAKXO 3.2 / SENSORY EDITION. Static state remains legible without any effects. */
:root{--bg:#090e12;--panel:#131c22;--panel2:#1b2830;--text:#f3f6f4;--muted:#a2b1b8;--line:#34464e;--x:#ff7466;--o:#45d4e7;--accent:#d9ee9a;--spring:cubic-bezier(.18,.9,.22,1.16)}
html{background:var(--bg)}body{background:radial-gradient(ellipse at 50% 0,#16253080,transparent 55%);overflow-x:clip}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.primary{background:var(--accent);color:#131d17;border-radius:15px;box-shadow:inset 0 1px 0 #ffffff80,0 4px 0 #71834c,0 10px 22px #0003;transition:transform .17s var(--spring),box-shadow .17s,background .17s}
.primary:hover{background:#e5f7b8;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff9,0 5px 0 #71834c,0 14px 30px #0005}
.primary:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 0 #fff6,0 1px 0 #71834c,0 4px 10px #0003}
.secondary{background:linear-gradient(145deg,#25333c77,#121b2244);border-color:#71858f40;box-shadow:inset 0 1px 0 #ffffff06}
.icon-btn{min-width:44px;height:44px;background:#ffffff03;border-color:#ffffff16}.icon-btn:hover{color:#fff;background:#ffffff0b}
.topbar{height:88px}.brand img{width:139px}.eyebrow{color:#bdcec8;font-weight:700;letter-spacing:.19em}
.home-screen{max-width:1230px;padding-top:45px;padding-bottom:95px;gap:36px;min-height:calc(100svh - 175px)}
.home-copy h1{font-weight:750;letter-spacing:-.068em;font-size:clamp(62px,7vw,94px);text-shadow:0 5px 35px #0003}
.hero-lead{color:#d2dde0;font-size:18px;line-height:1.6}.sublead{color:#9eafb6}
.experience-tag{display:inline-flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;padding:7px 10px;border:1px solid #d9ee9a25;border-radius:7px;background:#d9ee9a05}
.experience-tag i{width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 9px #d9ee9a44}
.home-copy .eyebrow{margin-bottom:14px;font-size:9px;color:#8d9fa8}.home-actions{margin-top:30px}.home-actions>.primary{min-height:64px;font-size:15px}.home-links button{min-height:44px}
.home-bottom{color:#a0afb6}.home-bottom .tiny{font-size:9px}.home-bottom .tiny:first-child{color:var(--accent)}
.showcase{min-height:470px}.demo-stage{width:350px}.demo-board{background:linear-gradient(135deg,#354650,#18232b);border-color:#91a5af77;gap:9px;border-radius:28px;box-shadow:-10px 16px 0 #070c10,-11px 17px 0 #60758144,-20px 42px 60px #0009}
.demo-cell{background:radial-gradient(ellipse at 50% 30%,#25343c,#0d171e);border-color:#8b9fa42c;box-shadow:inset 0 4px 10px #0005}
.demo-token{font-weight:750;border:2px solid currentColor;box-shadow:0 5px 0 #091017,0 7px 0 currentColor,0 10px 12px #0006;text-shadow:none}
.demo-token.x{background:radial-gradient(circle at 35% 25%,#84413b,#2b1f24 75%)}.demo-token.o{background:radial-gradient(circle at 35% 25%,#226777,#132630 75%)}
.demo-cell.locked .demo-token{background:linear-gradient(135deg,#ffad94,var(--x));color:#281919;border-color:#ffbda166;border-radius:12px;box-shadow:0 6px 0 #8b3b38,0 8px 0 #361c20}
.demo-cell.won{border-color:var(--accent);box-shadow:0 0 0 1px #d9ee9a44,0 0 25px #d9ee9a18}
.demo-caption{bottom:0;color:#edf4f0;font-size:11px}.demo-step{color:var(--accent)}.orbit1{border-color:#708c9930}.orbit2{border-color:#708c9918}
.aura{filter:none;opacity:.25}.aura.coral{background:radial-gradient(ellipse,#f05b4f15,transparent 67%)}.aura.cyan{background:radial-gradient(ellipse,#20b6d223,transparent 66%)}
.contained h1{font-weight:680}.panel{border-color:#71868f33;background:linear-gradient(145deg,#1e2b33,#111b22);box-shadow:0 16px 45px #0002}
.variant-card{transition:transform .18s var(--spring),border-color .18s,background .18s}.variant-card:hover{transform:translateY(-2px);border-color:#8ba3ad66}.variant-card b{font-weight:650}.variant-card[aria-pressed=true]{background:linear-gradient(145deg,#d9ee9a12,#15202a);border-color:#d9ee9a77}.variant-card[aria-pressed=true]::after{color:var(--accent)}
.game-screen{max-width:620px;padding:4px 24px 28px}.game-top{margin-bottom:17px}.game-rule strong{font-weight:650;letter-spacing:.02em}.move-number{font-size:18px;font-variant-numeric:tabular-nums;color:#8c9fa8}.scoreboard{margin-bottom:14px}
.player-card{padding:12px;border-radius:16px;background:#17232a;border-color:#a0b7c218;box-shadow:inset 0 1px 0 #ffffff05;transition:border-color .18s,background .18s,box-shadow .18s}
.player-card.active.x{background:linear-gradient(120deg,#ff746619,#17232a);border-color:#ff74667a;box-shadow:inset 3px 0 0 var(--x)}.player-card.active.o{background:linear-gradient(120deg,#45d4e713,#17232a);border-color:#45d4e77a;box-shadow:inset 3px 0 0 var(--o)}
.player-card b{font-weight:600}.player-icon{font-weight:750;background:#ffffff04}.player-card small{font-variant-numeric:tabular-nums}.turn-status>p:first-child{font-size:16px;font-weight:650}.turn-status .micro{color:#9eafb8}.turn-status{min-height:51px;margin-bottom:10px}
.board-shell{border-radius:27px;padding:14px;background:linear-gradient(135deg,#364650 0%,#23313b 18%,#121d25 72%,#26353e);border:1px solid #9db1b84d;box-shadow:inset 0 1px 0 #cde9ef20,0 5px 0 #04090d,0 6px 0 #52646e55,0 26px 65px #0006}
.game-screen .board-shell{animation:none}.board-shell::before{content:'';position:absolute;inset:5px;border:1px solid #bed5da0e;border-radius:22px;pointer-events:none}.board{gap:10px}
.cell{background:radial-gradient(ellipse at 50% 65%,#1c2a33,#0b131a 85%);border-color:#a2b6c028;border-radius:15px;box-shadow:inset 0 4px 12px #0006,inset 0 -1px 0 #d1e5ef10;overflow:visible;isolation:isolate}
.cell.legal:hover{background:radial-gradient(ellipse at 50% 60%,#2c424e,#121e28);border-color:#b5cace66}.cell.legal:active{transform:scale(.974)}.cell>small{top:8px;left:9px;font-size:8px;color:#95a7b0;z-index:12}.cell.legal::after{background:#a6bec647;width:4px;height:4px}
.cell.last-played:not(.winning){border-color:#bdced04a}.cell.blocked{border-style:dashed;border-color:#a4b6c080}.cell.blocked .ban{top:5px;right:6px;color:#d0dfe5}
.cell .token,.cell .token.x,.cell .token.o,.cell .token.buried,.cell .token.buried.x,.cell .token.buried.o{position:absolute;inset:auto;left:50%;top:53%;width:65%;height:65%;aspect-ratio:1;transform:translate(-50%,calc(-50% - var(--layer,0)*13%));border:0;background:none;border-radius:50%;box-shadow:none;font-size:clamp(24px,4vw,40px);color:var(--x);font-weight:750;line-height:1;transition:none;pointer-events:none}
.cell .token.o{color:var(--o)}.token-face{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:2px solid currentColor;background:radial-gradient(circle at 32% 18%,#623c3a,#30242a 65%,#1d1b23);box-shadow:inset 0 2px 0 #fff3,inset 0 -2px 0 #0004,0 4px 0 #090e13,0 5px 0 #ad514c,0 9px 9px #0005;position:relative;transform-origin:center}
.token.o .token-face{background:radial-gradient(circle at 32% 18%,#286374,#172f3d 66%,#13232d);box-shadow:inset 0 2px 0 #fff3,inset 0 -2px 0 #0004,0 4px 0 #090e13,0 5px 0 #2b7f90,0 9px 9px #0005}
.cell .token.buried .token-face{font-size:0;box-shadow:inset 0 1px 0 #ffffff1a,0 4px 0 #090e13,0 5px 0 currentColor;filter:none}.cell .token.buried.x{color:#a95a52}.cell .token.buried.o{color:#338191}
.cell .lock-plate{inset:14% 13% 18%;border-radius:13px;border:1px solid #ffc4af85;color:#2b1b1d;background:linear-gradient(140deg,#ffb49a,#ff8070 46%,#e05a55);font-weight:850;font-size:clamp(29px,4.6vw,47px);box-shadow:inset 0 2px 0 #ffe3bf70,inset 0 -2px 0 #6c292e33,0 4px 0 #803f3d,0 6px 0 #0b1117;z-index:8;pointer-events:none}
.cell.owner-o .lock-plate{color:#122b36;background:linear-gradient(140deg,#b4eff0,#53d6e5 46%,#249fb6);border-color:#c5f7f580;box-shadow:inset 0 2px 0 #ffffff66,inset 0 -2px 0 #1b536e33,0 4px 0 #2b6a7e,0 6px 0 #0b1117}
.cell.locked{border-color:#ff74664a;background:radial-gradient(ellipse,#3b292b,#151c24 80%)}.cell.locked.owner-o{border-color:#45d4e74a;background:radial-gradient(ellipse,#183f4a,#141f29 80%)}.cell .lock-label{font-size:7px;letter-spacing:.14em;bottom:7px;line-height:1;font-weight:750;color:#ffa898}.cell.owner-o .lock-label{color:#7de1ed}
.cell .pips{bottom:7px;gap:4px}.pips i{width:7px;height:3px;border-radius:2px}.pips i.filled{opacity:.85}.impact-ring{position:absolute;inset:3%;border:2px solid currentColor;border-radius:inherit;pointer-events:none;z-index:16;opacity:0}
.cell.winning{animation:none;background:#2d3b3544;box-shadow:inset 0 0 0 1px currentColor;border-color:currentColor}.board.has-winner .cell:not(.winning){opacity:.50!important}
.win-lines{inset:0;width:100%;height:100%;z-index:14;overflow:visible}.win-lines path{stroke-width:3;stroke-dasharray:none;stroke-dashoffset:0;animation:none;filter:none;opacity:.9}
.action-strip{border-bottom:1px solid #839aa51c;padding-bottom:10px;margin-top:15px;font-size:10px;min-height:32px}.game-buttons{gap:10px}.game-buttons button{min-height:44px}.game-buttons .secondary{min-height:44px}.game-buttons .primary{box-shadow:0 3px 0 #71834c;font-size:11px}.hint-text{min-height:0}
dialog{background:linear-gradient(140deg,#25333d,#121d26 80%);border-color:#a1b5bf55;box-shadow:0 30px 100px #000b;border-radius:26px}dialog h2{font-weight:680}dialog::backdrop{background:#03070acc;backdrop-filter:blur(5px)}.toggle b{font-weight:650}.toggle input:checked{background:#779943}.volume input{accent-color:var(--accent)}
.feel-profile{display:block;border-top:1px solid #ffffff13;padding:18px 0 10px}.feel-profile span{display:block;font-size:13px;font-weight:650;margin-bottom:10px}.feel-profile select{width:100%;height:46px;border:1px solid #6f87934d;border-radius:11px;background:#121e27;color:var(--text);padding:8px 12px;font-size:13px}
.feel-preview{border:1px solid #7c94a647;border-radius:12px;min-height:50px;display:grid;place-items:center;letter-spacing:.2em;font-size:10px;color:var(--accent);background:#0f1922;margin:10px 0 15px}.feel-preview[data-event=lock]{color:var(--x)}.feel-preview[data-event=win]{background:#d9ee9a0a;color:var(--accent)}
.result-emblem{font-weight:800;border-radius:24px;box-shadow:0 6px 0 #071016,inset 0 1px 0 #ffffff25;background:#22343d}.result-emblem.x{background:linear-gradient(140deg,#ffb49a,#ed675f);color:#2a1c1c}.result-emblem.o{background:linear-gradient(140deg,#b5f0ec,#37b8d0);color:#12323c}#resultTitle{font-size:35px}.result-score{font-variant-numeric:tabular-nums}
html[data-feel=focus] .ambient *,html[data-feel=focus] .demo-stage,html[data-feel=focus] .orbit2{animation:none!important}html[data-feel=focus] .orbit2{opacity:.4}.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
@media(min-width:641px) and (max-width:1000px){.home-screen{gap:10px}.demo-stage{width:280px}.home-copy h1{font-size:64px}.showcase{min-height:385px}.orbit1{width:320px;height:320px}.orbit2{width:370px;height:370px}}
@media(max-width:640px){
 .topbar{height:72px;padding:0 20px}.brand img{width:119px}.top-tools{gap:5px}.icon-btn{min-width:42px;height:42px}.home-screen{padding:25px 23px 24px;gap:0}.experience-tag{font-size:8px;margin-bottom:17px}.home-copy h1{font-size:clamp(49px,14.5vw,69px)}.home-copy .eyebrow{font-size:8px;margin-bottom:13px}.hero-lead{font-size:14px;max-width:295px}.sublead{font-size:11px}.home-actions{margin-top:25px}.home-actions>.primary{min-height:57px;font-size:14px}.home-actions .two .secondary{min-height:57px}.home-links{margin-top:14px}.showcase{min-height:295px;margin:17px auto 16px;max-width:350px}.demo-stage{width:240px}.demo-board{gap:6px;padding:9px;border-radius:20px}.demo-cell{border-radius:9px}.demo-token{font-size:23px}.orbit1{width:272px;height:272px}.orbit2{width:326px;height:326px}.demo-caption{bottom:0;width:246px;font-size:10px}.home-bottom{gap:12px;line-height:1.7}.home-bottom .tiny{font-size:8px}
 body.playing .topbar{height:62px}.game-screen{padding:0 17px 20px}.game-top{margin-bottom:14px}.scoreboard{margin-bottom:12px;gap:7px}.player-card{padding:10px;gap:8px;border-radius:13px}.player-card b{font-size:11px}.player-icon{width:31px;height:31px;font-size:20px}.score-divider{min-width:20px}.turn-status{min-height:48px;margin-bottom:8px}.turn-status>p:first-child{font-size:15px}.turn-status .micro{font-size:10px}.board-shell{padding:10px;border-radius:22px}.board-shell::before{border-radius:18px}.board{gap:8px}.cell{border-radius:11px}.cell>small{top:6px;left:7px;font-size:7px}
 .cell .token,.cell .token.x,.cell .token.o,.cell .token.buried{font-size:clamp(22px,7.4vw,32px);width:65%;height:65%;inset:auto;top:53%;left:50%;transform:translate(-50%,calc(-50% - var(--layer,0)*13%))}.token-face{border-width:1.7px}.cell .lock-plate{font-size:32px;border-radius:9px}.cell .lock-label{font-size:6px;bottom:6px}.cell .pips{bottom:6px;gap:3px}.pips i{width:6px;height:2px}.board[data-size='5'] .token{font-size:22px}.board[data-size='5'] .lock-plate{font-size:25px}.board[data-size='5'] .lock-label{font-size:5px}.win-lines{inset:0;width:100%;height:100%}.win-lines path{stroke-width:2.5}.game-screen .board-shell{box-shadow:inset 0 1px 0 #cde9ef20,0 4px 0 #04090d,0 5px 0 #52646e44,0 16px 35px #0005}.action-strip{margin-top:13px;font-size:9px;padding-bottom:8px}.game-buttons{gap:7px}.game-buttons .text-btn{font-size:11px;padding:10px}.clock{font-size:15px}.hint-text{font-size:10px;margin-top:8px}dialog::backdrop{backdrop-filter:none}.aura{filter:none}.feel-profile select{font-size:12px}
}
@media(max-width:360px){.game-screen{padding-left:12px;padding-right:12px}.home-screen{padding-left:20px;padding-right:20px}.home-copy h1{font-size:48px}.brand img{width:107px}.topbar{padding:0 15px}.player-card{padding:8px;gap:6px}.cell .lock-label{font-size:5px}.cell .lock-plate{font-size:28px}.cell>small{font-size:6px}.token-face{border-width:1.3px}}
@media(max-height:760px) and (max-width:640px){body.playing .topbar{height:55px}.game-top{margin-bottom:10px}.player-card{padding:8px}.scoreboard{margin-bottom:10px}.turn-status{min-height:43px;margin-bottom:7px}.game-screen{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.win-lines path{stroke-dashoffset:0}.demo-stage{transform:rotateX(49deg) rotateZ(-31deg)}.primary:hover,.cell.legal:active{transform:none}}

/* Difficulty is an explicit choice, immediately above the start action. */
.difficulty-options{border:0;padding:0;margin:20px 0 12px;min-width:0}
.difficulty-options .field-label{margin:0 0 10px;padding:0}
.setup-options .difficulty-options .micro{margin:10px 0 0}
.difficulty-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.difficulty-choices button{min-height:44px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:#10191e;color:var(--muted);font-size:13px}
.difficulty-choices button[aria-pressed="true"]{border-color:var(--o);background:#20b6d219;color:var(--text);box-shadow:inset 0 0 0 1px var(--o)}
.difficulty-choices button:focus-visible,.difficulty-current:focus-visible{outline:2px solid var(--o);outline-offset:3px}
.difficulty-current{display:block;width:100%;min-height:44px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:-10px 0 16px;background:#142027;color:var(--text);font-size:12px}
.difficulty-current[hidden]{display:none}
#difficultyDialog .difficulty-choices{margin-top:20px}
@media(max-width:640px){.setup-options{order:-1}}

.game-help{flex:none;min-height:38px;padding:7px 11px;border:1px solid #7b99a660;border-radius:10px;background:#1b2a32;color:#e4f4f8;font-size:11px;font-weight:700;white-space:nowrap}
.game-help:hover{background:#253944;border-color:#96c0cf}
.tutorial-tile{margin:18px auto 6px;cursor:default}
.tutorial-tile.line-demo{width:min(300px,100%);height:100px;gap:6px;padding:12px}
.tutorial-tile.line-demo span{flex:1;min-width:0;width:auto}
.tutorial-visual{text-align:center;color:#c5d4db;font-size:12px;min-height:20px;margin-bottom:16px}
.tutorial-variant{border-left:2px solid var(--o);padding:5px 0 5px 12px;margin-top:12px;color:#c5d4db;font-size:12px;line-height:1.5}
#tutorialSkip{margin-top:5px}
@media(max-width:640px){.game-top{gap:8px}.game-rule{min-width:0}.game-rule strong,.game-rule small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-help{min-height:36px;padding:6px 8px;font-size:10px}.move-number{white-space:nowrap}}