:root{--ttt-bg:#0b0816;--ttt-deep:#120b22;--ttt-panel:#1a1230;--ttt-panel2:#241741;--ttt-purple:#3f2a64;--ttt-purple2:#7556ad;--ttt-cream:#fff3cf;--ttt-muted:#c8b8df;--ttt-cyan:#5df2d6;--ttt-coral:#ff8a5b;--ttt-yellow:#ffd166;--ttt-pink:#ef70c3;--ttt-shadow:#05030b}body.xarmo-game-tictactoe>main.ttt-page{display:block!important;padding:clamp(1rem,3vw,2rem) 1rem 2.2rem!important;background:linear-gradient(rgba(93,242,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(93,242,214,.035) 1px,transparent 1px),radial-gradient(circle at 50% -10%,rgba(239,112,195,.18),transparent 34rem),var(--ttt-bg)!important;background-size:24px 24px,24px 24px,auto,auto!important;color:var(--ttt-cream)!important}.ttt-game{width:min(100%,1120px);margin:0 auto;font-family:"Courier New",ui-monospace,monospace}.ttt-heading{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:1rem}.ttt-heading h1{margin:0;color:var(--ttt-cream);font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(3rem,9vw,6.4rem);line-height:.82;letter-spacing:.035em;text-transform:uppercase;text-shadow:5px 5px 0 var(--ttt-purple),9px 9px 0 var(--ttt-shadow)}.ttt-heading p:not(.ttt-kicker){max-width:62ch;margin:1rem 0 0;color:var(--ttt-muted);font-weight:700;line-height:1.55}.ttt-kicker{margin:0 0 .65rem;color:var(--ttt-cyan);font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.ttt-layout{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:1rem;align-items:start}.ttt-panel,.ttt-cabinet{border:5px solid var(--ttt-cream);background:var(--ttt-purple);box-shadow:9px 9px 0 var(--ttt-shadow),inset 0 0 0 5px var(--ttt-panel)}.ttt-panel{padding:1rem}.ttt-panel:not(.ttt-panel--active){opacity:.82}.ttt-setup{display:grid;gap:.9rem}.ttt-setup fieldset{display:grid;gap:.5rem;margin:0;padding:.8rem;border:3px solid var(--ttt-deep);background:var(--ttt-panel)}.ttt-setup legend,.ttt-field span{color:var(--ttt-pink);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.ttt-setup label{font-weight:800}.ttt-field{display:grid;gap:.35rem}.ttt-field input,.ttt-field select{width:100%;box-sizing:border-box;min-height:44px;border:3px solid var(--ttt-cream);border-radius:0;background:var(--ttt-deep);color:var(--ttt-cream);font:800 .9rem/1 "Courier New",monospace;padding:.65rem}.ttt-button{min-height:44px;border:3px solid var(--ttt-cream);border-radius:0;background:var(--ttt-coral);box-shadow:4px 4px 0 var(--ttt-shadow);color:var(--ttt-deep);font:900 .78rem/1 "Courier New",monospace;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}.ttt-button--quiet{background:var(--ttt-purple2);color:var(--ttt-cream)}.ttt-button:hover{filter:brightness(1.08)}.ttt-button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ttt-shadow)}.ttt-button:focus-visible,.ttt-cell:focus-visible,.ttt-text-button:focus-visible,.ttt-field input:focus-visible,.ttt-field select:focus-visible{outline:4px solid var(--ttt-yellow);outline-offset:3px}.ttt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:1rem;border:4px solid var(--ttt-deep);background:var(--ttt-deep)}.ttt-stats div{display:grid;gap:.2rem;padding:.65rem .35rem;background:var(--ttt-panel);text-align:center}.ttt-stats span{color:var(--ttt-muted);font-size:.62rem;font-weight:900;text-transform:uppercase}.ttt-stats strong{color:var(--ttt-cyan);font-size:1.25rem}.ttt-text-button{display:block;margin:.65rem auto 0;border:0;background:transparent;color:var(--ttt-muted);font:800 .72rem/1 "Courier New",monospace;text-decoration:underline;cursor:pointer}.ttt-cabinet{padding:1rem}.ttt-status{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.8rem;padding:.8rem;border:4px solid var(--ttt-deep);background:var(--ttt-panel)}.ttt-status span{color:var(--ttt-pink);font-size:.72rem;font-weight:900;text-transform:uppercase}.ttt-status strong{color:var(--ttt-cyan);text-align:right}.ttt-board{width:min(100%,650px);aspect-ratio:1;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;box-sizing:border-box;border:6px solid var(--ttt-deep);background:var(--ttt-deep);box-shadow:0 0 0 4px var(--ttt-cream),8px 8px 0 var(--ttt-shadow)}.ttt-cell{border:0;background:var(--ttt-panel2);color:var(--ttt-cream);font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(3.5rem,12vw,8rem);line-height:1;cursor:pointer;text-shadow:4px 4px 0 var(--ttt-shadow)}.ttt-cell[data-mark=X]{color:var(--ttt-cyan)}.ttt-cell[data-mark=O]{color:var(--ttt-coral)}.ttt-cell[data-winning=true]{background:var(--ttt-yellow);color:var(--ttt-deep);animation:ttt-flash .45s steps(2,end) infinite}.ttt-cell:disabled{cursor:default}.ttt-actions,.ttt-overlay__actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap}.ttt-actions{margin-top:1rem}.ttt-actions .ttt-button,.ttt-overlay__actions .ttt-button{padding:.75rem 1rem}.ttt-overlay{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:1rem;background:rgba(11,8,22,.82)}.ttt-overlay[hidden]{display:none}.ttt-overlay>div{width:min(100%,460px);box-sizing:border-box;padding:1.4rem;border:5px solid var(--ttt-cream);background:var(--ttt-panel);box-shadow:10px 10px 0 var(--ttt-shadow);text-align:center}.ttt-overlay h2{margin:.2rem 0 .7rem;color:var(--ttt-yellow);font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(2.2rem,7vw,4rem);text-transform:uppercase;text-shadow:4px 4px 0 var(--ttt-purple)}.ttt-overlay p{color:var(--ttt-muted);font-weight:700;line-height:1.5}.ttt-overlay__eyebrow{color:var(--ttt-cyan)!important;font-size:.7rem!important;font-weight:900!important;letter-spacing:.13em;text-transform:uppercase}.ttt-help{margin:1rem 0 0;color:var(--ttt-muted);font-size:.75rem;font-weight:700;text-align:center}@keyframes ttt-flash{50%{filter:brightness(1.35)}}@media(max-width:820px){.ttt-heading{display:grid;align-items:start}.ttt-layout{grid-template-columns:1fr}.ttt-panel{order:2}.ttt-cabinet{order:1}}@media(max-width:480px){.ttt-panel,.ttt-cabinet{border-width:4px;box-shadow:6px 6px 0 var(--ttt-shadow),inset 0 0 0 3px var(--ttt-panel)}.ttt-cabinet{padding:.65rem}.ttt-board{gap:4px;padding:4px;border-width:4px}.ttt-status{display:grid}.ttt-status strong{text-align:left}}@media(prefers-reduced-motion:reduce){.ttt-cell[data-winning=true]{animation:none}}