:root{--acid:#b8ff19;--ink:#111410;--cream:#f4f0df;--red:#ff304a;--blue:#0878ff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--acid);color:var(--ink)}body{font-family:Arial,Helvetica,sans-serif}.hidden{display:none!important}.arcade-shell{min-height:100vh;overflow:hidden;position:relative;padding:38px 20px 74px;background:radial-gradient(circle at 50% 20%,#daff72 0 2%,transparent 35%),repeating-linear-gradient(90deg,transparent 0 44px,rgba(17,20,16,.035) 45px 46px)}.arcade-shell:before,.arcade-shell:after{content:"";position:absolute;border:3px solid var(--ink);width:130px;height:130px;transform:rotate(45deg);opacity:.12}.arcade-shell:before{left:-80px;top:32%}.arcade-shell:after{right:-75px;top:60%}.stars{position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1px,transparent 1px);background-size:35px 35px;opacity:.08;pointer-events:none}.brand{text-align:center;position:relative;z-index:2}.eyebrow{display:inline-block;background:var(--ink);color:var(--acid);padding:7px 14px;font:800 10px/1 monospace;letter-spacing:2px;transform:rotate(-1deg)}.brand h1{margin:16px 0 1px;font:900 clamp(38px,7vw,72px)/.85 Arial;letter-spacing:-5px}.brand h1 span{color:var(--red);text-shadow:3px 3px 0 var(--ink)}.brand h1 b{color:var(--blue);text-shadow:3px 3px 0 var(--ink)}.brand h1 i{font-family:Georgia,serif;font-weight:400;font-size:.52em;letter-spacing:-2px}.brand p{margin:10px 0 22px;font:800 10px monospace;letter-spacing:5px}.cabinet{position:relative;z-index:2;width:min(620px,100%);margin:auto;background:var(--cream);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}.scorebar{display:grid;grid-template-columns:1fr 1.2fr 1fr;background:var(--ink);color:white;text-align:center}.scorebar>div{padding:12px;border-right:1px solid #454a42}.scorebar>div:last-child{border:0}.scorebar small,.scorebar strong{display:block}.scorebar small{color:var(--acid);font:800 9px monospace;letter-spacing:2px}.scorebar strong{font:900 25px monospace;margin-top:3px}.scorebar .round strong{font-size:14px;margin-top:8px;color:var(--cream)}.chooser{padding:34px 34px 39px;text-align:center}.step{font:800 10px monospace;letter-spacing:2px;color:#69705f}.chooser h2{font:900 clamp(32px,7vw,50px)/.88 Arial;margin:13px 0 10px;letter-spacing:-2px}.chooser h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}.chooser>p{font:600 12px monospace;color:#5a6053}.choices{display:grid;grid-template-columns:1fr 38px 1fr;align-items:center;margin-top:26px}.choice{cursor:pointer;background:white;border:2px solid var(--ink);padding:19px 8px 16px;box-shadow:4px 4px 0 var(--ink);transition:.15s;min-width:0}.choice:hover,.choice:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.choice span{font-size:60px;display:block;height:72px}.choice strong,.choice small{display:block}.choice strong{font:900 17px monospace;margin:7px 0}.choice small{font:700 8px monospace;letter-spacing:1px;color:#707569}.choice.window{background:#e8f2ff}.choice.apple{background:#ffedef}.window-icon{color:var(--blue)!important;font-family:Arial,sans-serif;font-weight:900;text-shadow:2px 2px 0 #003f9b}.versus{font:900 13px monospace;background:var(--ink);color:white;width:38px;height:38px;padding-top:12px;z-index:2}.game-stage{min-height:460px;padding:22px 28px 28px;position:relative}.statusline{text-align:center;font:800 10px monospace;letter-spacing:2px;margin-bottom:18px}.dot{display:inline-block;width:7px;height:7px;background:#777;border-radius:50%;margin-right:8px}.dot.active{background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1s infinite}.board{width:min(390px,100%);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:var(--ink);border:7px solid var(--ink)}.board button{border:0;background:var(--cream);font-size:clamp(42px,10vw,72px);cursor:pointer;display:grid;place-items:center;transition:.15s;padding:0}.board button:not(:disabled):hover{background:#dcff81}.board button:disabled{cursor:default}.board .ghost{font:300 22px monospace;color:#d4d0c0}.board .window-icon{font-size:1.12em}.board .winner{animation:winPulse .65s infinite alternate;background:#e4ff97}.result{position:absolute;inset:19px 24px 25px;background:rgba(17,20,16,.95);color:white;display:grid;place-content:center;text-align:center;border:3px solid var(--acid);box-shadow:7px 7px 0 rgba(0,0,0,.3);animation:pop .25s ease-out;z-index:4}.result small{font:800 10px monospace;letter-spacing:3px;color:var(--acid)}.result h2{font:900 clamp(38px,9vw,64px)/.9 Arial;margin:10px 0}.result.won h2{color:var(--acid)}.result.lost h2{color:var(--red)}.result.draw h2{color:#70adff}.result p{font:600 12px monospace;margin:0 0 25px}.result button{border:2px solid var(--acid);background:var(--acid);color:var(--ink);padding:11px 14px;font:900 10px monospace;letter-spacing:1px;cursor:pointer;margin:4px}.result button.secondary{background:transparent;color:white}.cabinet footer{height:48px;background:#ded9c8;border-top:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:800 9px monospace;letter-spacing:1px}.sound{border:0;background:none;font:800 9px monospace;cursor:pointer;padding:8px 0}.sound span{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:7px;background:var(--ink);color:var(--acid)}.marquee{position:absolute;left:0;bottom:0;width:100%;height:34px;background:var(--ink);color:var(--acid);display:flex;overflow:hidden;white-space:nowrap;font:900 11px/34px monospace;letter-spacing:3px;transform:rotate(-.3deg)}.marquee span{min-width:max-content;animation:scroll 15s linear infinite;padding-right:10px}.confetti{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.confetti i{position:absolute;left:var(--x);top:-20px;width:9px;height:16px;background:var(--c);transform:rotate(var(--r));animation:fall 2.4s var(--d) ease-in forwards}@keyframes blink{50%{opacity:.25}}@keyframes winPulse{to{filter:brightness(1.2);transform:scale(.96)}}@keyframes pop{from{opacity:0;transform:scale(.9)}}@keyframes fall{to{top:110vh;transform:rotate(800deg) translateX(50px)}}@keyframes scroll{to{transform:translateX(-100%)}}@media(max-width:520px){.arcade-shell{padding:25px 12px 60px}.brand h1{letter-spacing:-3px}.chooser{padding:26px 16px 31px}.choice span{font-size:46px;height:57px}.choice strong{font-size:13px}.game-stage{padding:18px 15px 22px;min-height:390px}.result{inset:16px 12px 20px}.cabinet{box-shadow:6px 6px 0 var(--ink)}.cabinet footer>span:first-of-type{display:none}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Keep native color emoji fully saturated after a played square becomes disabled. */
.board button:disabled{opacity:1;-webkit-text-fill-color:initial}
.board button.locked{cursor:default;opacity:1;pointer-events:none;-webkit-text-fill-color:initial}
.move-order{display:flex;justify-content:center;gap:7px;margin:18px auto 0}.move-order button{border:2px solid var(--ink);background:transparent;padding:9px 12px;font:800 9px monospace;letter-spacing:.5px;cursor:pointer}.move-order button.selected{background:var(--ink);color:var(--acid);box-shadow:3px 3px 0 #7f8d62}
.second-step{margin-top:22px;color:var(--ink)}
.choice.selected-side{outline:4px solid var(--acid);outline-offset:-7px}.start-game{margin-top:18px;border:2px solid var(--ink);background:var(--ink);color:var(--acid);padding:12px 28px;font:900 11px monospace;letter-spacing:2px;cursor:pointer;box-shadow:4px 4px 0 #7f8d62}.start-game:disabled{opacity:.35;cursor:not-allowed}
