:root{--bg:#090a0f;--panel:#11131b;--panel2:#151822;--line:#2a2d38;--muted:#8a8d9b;--text:#f4f3ee;--gold:#e9b875;--pink:#d885a4;--cyan:#8bd2ce;--mono:'DM Mono',monospace;--sans:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#292638 0,#141622 31%,var(--bg) 67%);color:var(--text);font-family:var(--sans);letter-spacing:.01em}.app-shell{min-height:100vh;position:relative;overflow:hidden;padding:0 6vw}.app-shell:before{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 75%)}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;border-bottom:1px solid rgba(255,255,255,.06)}.brand{font:500 13px var(--mono);letter-spacing:.16em;display:flex;align-items:center;gap:13px}.brand em{font-style:normal;color:var(--gold)}.brand-mark{display:grid;grid-template-columns:repeat(2,5px);gap:3px}.brand-mark i{width:5px;height:5px;background:var(--gold);border-radius:50%;box-shadow:0 0 7px var(--gold)}.top-meta,.eyebrow,.option-title,.role-label,.score-caption,.setup-footer{font:500 10px var(--mono);letter-spacing:.15em;color:var(--muted)}.top-meta{display:flex;align-items:center;gap:10px}.slash{color:#444754}.live-dot,.pulse{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan)}.setup-view{max-width:780px;margin:0 auto;padding:86px 0 44px;position:relative;z-index:1}.eyebrow{color:var(--gold);margin-bottom:18px}h1{font-size:clamp(48px,8vw,84px);line-height:.98;letter-spacing:-.07em;margin:0 0 25px;font-weight:600}h1 span{color:var(--gold);font-style:italic}.intro{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 42px}.mode-tabs{display:flex;gap:12px;margin-bottom:22px}.mode-tab{flex:1;display:flex;align-items:center;gap:16px;padding:18px 20px;background:rgba(22,24,34,.65);border:1px solid var(--line);border-radius:12px;color:var(--muted);text-align:left;cursor:pointer;transition:.25s}.mode-tab:hover{border-color:#66616a}.mode-tab.active{border-color:var(--gold);background:linear-gradient(120deg,rgba(221,169,106,.14),rgba(21,23,32,.65));color:var(--text);box-shadow:0 0 30px rgba(220,165,101,.08)}.mode-tab b{display:block;font:500 11px var(--mono);letter-spacing:.08em}.mode-tab small{display:block;font-size:12px;margin-top:5px;color:var(--muted)}.tab-icon{font-size:25px;color:var(--gold)}.setup-card{padding:28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,rgba(25,27,38,.94),rgba(14,15,22,.94));box-shadow:0 24px 80px rgba(0,0,0,.26)}.form-grid{display:grid;grid-template-columns:1fr 38px 1fr;gap:14px;align-items:end}.form-grid label>span{display:block;color:var(--muted);font:500 10px var(--mono);letter-spacing:.12em;margin-bottom:10px}.form-grid label small{float:right;color:var(--gold);font-size:9px}input{width:100%;background:#0d0f15;border:1px solid #30333e;border-radius:8px;padding:15px;color:var(--text);font:15px var(--sans);outline:0;transition:.2s}input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,184,117,.1)}input::placeholder{color:#555866}.versus{text-align:center;color:#686b77;font:11px var(--mono);padding-bottom:15px}.ai-options{display:flex;gap:36px;margin-top:26px;padding-top:22px;border-top:1px solid #292c35}.option-block{flex:0 0 auto}.option-title{display:block;font-size:9px;margin-bottom:11px}.segmented,.difficulty-pills{display:flex;gap:5px}.segmented button,.difficulty-pills button{border:1px solid #343743;background:transparent;color:var(--muted);border-radius:6px;padding:9px 14px;font:500 10px var(--mono);cursor:pointer}.segmented button.selected,.difficulty-pills button.selected{background:var(--gold);color:#1c1711;border-color:var(--gold)}.primary-button{border:0;background:var(--gold);color:#1c1711;border-radius:7px;padding:16px 20px;font:600 11px var(--mono);letter-spacing:.1em;cursor:pointer;transition:.2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(233,184,117,.2)}.primary-button span{font-size:18px;line-height:0;margin-left:25px}.setup-card>.primary-button{width:100%;margin-top:28px}.setup-footer{display:flex;align-items:center;gap:15px;margin-top:33px}.setup-footer div{height:1px;background:#41434d;flex:1}.hidden{display:none!important}
.game-view{max-width:970px;margin:0 auto;padding:66px 0 35px;position:relative;z-index:1}.game-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}.game-heading h2{margin:0;font-size:30px;letter-spacing:-.04em}.game-heading h2 span{color:var(--gold);font-family:var(--mono);font-size:20px}.mode-chip{font:10px var(--mono);color:var(--muted);border:1px solid var(--line);padding:9px 12px;border-radius:5px}.score-row{display:grid;grid-template-columns:1fr 120px 1fr;gap:18px;align-items:stretch}.player-card{position:relative;padding:18px 21px;background:rgba(22,24,34,.75);border:1px solid var(--line);border-radius:10px;transition:.35s}.player-card.active{border-color:rgba(233,184,117,.72);box-shadow:0 0 26px rgba(233,184,117,.08)}.card-top{display:flex;justify-content:space-between;align-items:center}.symbol{font-size:30px;line-height:20px}.symbol.x{color:var(--gold)}.symbol.o{color:var(--cyan)}.player-card h3{font-size:15px;letter-spacing:.05em;margin:20px 0 10px;text-transform:uppercase}.wins{display:flex;align-items:baseline;gap:7px}.wins strong{font-size:24px;font-weight:500}.wins span,.match-score small{font:10px var(--mono);color:var(--muted);letter-spacing:.12em}.active-line{position:absolute;bottom:0;left:20px;right:20px;height:2px;background:var(--gold);opacity:0;box-shadow:0 0 10px var(--gold)}.player-card.active .active-line{opacity:1}.match-score{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #393c47;border-radius:10px}.score-caption{font-size:8px;margin-bottom:10px}.match-score div{display:flex;align-items:baseline;gap:7px}.match-score b{font-size:25px;font-weight:500}.board-wrap{max-width:510px;margin:30px auto}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;aspect-ratio:1}.cell{position:relative;border:1px solid #2c2f3b;border-radius:12px;background:linear-gradient(145deg,#171a25,#10121a);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 22px rgba(0,0,0,.2);cursor:pointer;display:grid;place-items:center;transition:.18s}.cell:hover:not(.filled){transform:translateY(-3px);border-color:#69606b;background:#1b1e2a}.cell.preview-x:after,.cell.preview-o:after{position:absolute;opacity:0;transition:.2s;filter:blur(1px)}.cell.preview-x:after{content:'×';font-size:65px;color:var(--gold)}.cell.preview-o:after{content:'○';font-size:58px;color:var(--cyan)}.cell:hover:after{opacity:.22}.cell.filled{cursor:default}.cell.mark-x,.cell.mark-o{animation:pop .32s cubic-bezier(.2,.9,.3,1.4)}.cell .mark{font-size:82px;line-height:1;font-weight:400}.mark.x{color:var(--gold);text-shadow:0 0 22px rgba(233,184,117,.3)}.mark.o{color:var(--cyan);font-size:70px;text-shadow:0 0 22px rgba(139,210,206,.25)}.cell.winner{border-color:var(--gold);box-shadow:0 0 24px rgba(233,184,117,.3),inset 0 0 20px rgba(233,184,117,.08);animation:glow 1.2s ease-in-out infinite}.board.has-winner .cell:not(.winner){opacity:.4}.game-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #252833;padding-top:20px}.status-note{font:10px var(--mono);color:var(--muted);letter-spacing:.08em;display:flex;gap:9px;align-items:center}.actions{display:flex;gap:8px}.ghost-button{border:1px solid #30333e;color:var(--muted);background:transparent;border-radius:6px;padding:10px 12px;font:10px var(--mono);cursor:pointer;transition:.2s}.ghost-button:hover{color:var(--text);border-color:#77717a}.result-overlay{position:fixed;inset:0;background:rgba(5,6,10,.76);backdrop-filter:blur(9px);display:grid;place-items:center;z-index:10;animation:fade .25s}.result-card{text-align:center;width:min(380px,90vw);padding:42px 35px;border:1px solid #5a4a3c;border-radius:15px;background:linear-gradient(145deg,#1b1b27,#101118);box-shadow:0 25px 90px rgba(0,0,0,.6)}.result-kicker{font:10px var(--mono);letter-spacing:.17em;color:var(--gold)}.result-symbol{font-size:68px;color:var(--gold);height:82px;margin:17px 0 7px;text-shadow:0 0 30px rgba(233,184,117,.35)}.result-card h2{font-size:31px;letter-spacing:-.05em;margin:0 0 8px}.result-card p{color:var(--muted);font:12px var(--mono);margin:0 0 29px}.result-actions{display:flex;flex-direction:column;gap:17px}.text-button{border:0;background:none;color:var(--muted);font:10px var(--mono);letter-spacing:.1em;cursor:pointer}.text-button:hover{color:var(--text)}@keyframes pop{0%{transform:scale(.5);opacity:0}75%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes glow{50%{transform:scale(1.025);filter:brightness(1.28)}}@keyframes fade{from{opacity:0}}@media(max-width:680px){.app-shell{padding:0 20px}.topbar{height:72px}.top-meta{font-size:8px}.setup-view,.game-view{padding-top:57px}.intro br{display:none}.mode-tabs{flex-direction:column}.setup-card{padding:20px}.form-grid{grid-template-columns:1fr;gap:18px}.versus{display:none}.ai-options{gap:20px;flex-wrap:wrap}.difficulty{width:100%}.game-heading{align-items:start;gap:16px;flex-direction:column}.game-heading h2{font-size:25px}.score-row{grid-template-columns:1fr 70px 1fr;gap:7px}.player-card{padding:13px 12px}.role-label{font-size:8px}.player-card h3{font-size:12px;margin:16px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.symbol{font-size:23px}.board-wrap{margin:20px auto}.cell .mark{font-size:58px}.cell .mark.o{font-size:52px}.game-footer{align-items:start;flex-direction:column;gap:18px}.actions{flex-wrap:wrap}.ghost-button span{display:inline}.match-score{border:0}.mode-chip{align-self:flex-start}.setup-footer{margin-top:22px}}
/* Bright pixel arcade skin */
:root{--bg:#100629;--panel:#1d0e3c;--line:#5b2e87;--muted:#c19bdc;--text:#fff8ff;--gold:#ffe45c;--pink:#ff4fa3;--cyan:#35f5df;--pixel:'Press Start 2P',monospace}
body{background:#100629;background-image:radial-gradient(circle at 15% 12%,rgba(255,79,163,.28),transparent 25%),radial-gradient(circle at 85% 8%,rgba(53,245,223,.22),transparent 24%),linear-gradient(135deg,#100629 0%,#1d0b42 52%,#090b29 100%)}.app-shell:before{opacity:.25;background-size:32px 32px}.topbar{border-bottom:2px solid rgba(255,228,92,.35)}.brand{font-family:var(--pixel);font-size:10px;text-shadow:3px 3px 0 #5e217e}.brand em{color:var(--pink)}.brand-mark i{border-radius:0;background:var(--cyan);box-shadow:3px 3px 0 var(--pink)}.top-meta,.eyebrow,.option-title,.role-label,.score-caption,.setup-footer{font-family:var(--pixel);color:var(--cyan);font-size:9px}.live-dot,.pulse{border-radius:0;background:var(--pink);box-shadow:0 0 0 3px rgba(255,79,163,.25),0 0 14px var(--pink)}h1{font-family:var(--pixel);font-size:clamp(33px,6vw,62px);line-height:1.3;letter-spacing:-.03em;text-shadow:5px 5px 0 #8e267e}h1 span{color:var(--gold);font-style:normal}.intro{color:#d8b9e9}.mode-tab,.setup-card,.player-card,.cell,.result-card{border:2px solid var(--line);border-radius:4px;background:linear-gradient(135deg,rgba(44,18,85,.95),rgba(18,10,49,.96));box-shadow:6px 6px 0 rgba(8,3,27,.7),inset 0 0 0 1px rgba(255,255,255,.08)}.mode-tab:hover{border-color:var(--cyan);transform:translate(-2px,-2px)}.mode-tab.active{border-color:var(--gold);box-shadow:6px 6px 0 #691b7b,0 0 22px rgba(255,228,92,.28)}.tab-icon{color:var(--pink);text-shadow:2px 2px 0 var(--cyan)}.form-grid label>span,.form-grid label small{font-family:var(--pixel)}input{border:2px solid #653790;border-radius:2px;background:#0e0827;color:var(--text);font-family:var(--pixel);font-size:11px;box-shadow:inset 3px 3px 0 rgba(0,0,0,.25)}input:focus{border-color:var(--cyan);box-shadow:4px 4px 0 var(--pink)}.segmented button,.difficulty-pills button,.ghost-button{border:2px solid #713d9d;border-radius:2px;font-family:var(--pixel);font-size:9px}.segmented button.selected,.difficulty-pills button.selected{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:3px 3px 0 #7d236e}.primary-button{border-radius:2px;background:var(--gold);box-shadow:5px 5px 0 #bd397b;color:#2b1044;font-family:var(--pixel);font-size:10px}.primary-button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #bd397b,0 0 24px rgba(255,228,92,.5)}.game-heading h2{font-family:var(--pixel);font-size:20px;line-height:1.6}.game-heading h2 span{color:var(--gold);font-family:var(--pixel);font-size:14px}.mode-chip{border:2px solid var(--cyan);border-radius:2px;color:var(--cyan);font-family:var(--pixel);font-size:8px}.player-card.active{border-color:var(--gold);box-shadow:6px 6px 0 #7d236e,0 0 24px rgba(255,228,92,.22)}.symbol{font-family:var(--pixel);text-shadow:3px 3px 0 #7d236e}.symbol.x{color:var(--gold)}.symbol.o{color:var(--cyan)}.active-line{height:4px;background:var(--pink);box-shadow:0 0 12px var(--pink)}.match-score{border:2px dashed var(--pink);border-radius:2px}.score-caption,.wins span,.match-score small{font-family:var(--pixel);font-size:8px}.wins strong,.match-score b{font-family:var(--pixel);color:var(--gold)}.board{gap:13px}.cell{border:3px solid #62338f;border-radius:3px;background:linear-gradient(135deg,#2d1558,#160b38);box-shadow:5px 5px 0 #08031f,inset 0 0 0 2px rgba(255,255,255,.06);transition:.12s}.cell:hover:not(.filled){transform:translate(-2px,-2px);border-color:var(--cyan);box-shadow:7px 7px 0 #08031f,0 0 18px rgba(53,245,223,.35)}.cell .mark{width:1em;height:1em;display:flex;align-items:center;justify-content:center;line-height:1;font-family:var(--pixel);font-size:clamp(42px,8vw,70px);font-weight:400}.cell .mark.o{font-size:clamp(42px,8vw,70px)}.mark.x{color:var(--gold);text-shadow:4px 4px 0 #c32b85,0 0 20px var(--gold)}.mark.o{color:var(--cyan);text-shadow:4px 4px 0 #2266a2,0 0 20px var(--cyan)}.cell.preview-x:after{font-family:var(--pixel);font-size:clamp(35px,7vw,60px);color:var(--gold)}.cell.preview-o:after{font-family:var(--pixel);font-size:clamp(35px,7vw,60px);color:var(--cyan)}.cell.winner{border-color:var(--gold);box-shadow:5px 5px 0 #bd397b,0 0 30px var(--gold)}.game-footer{border-top:2px solid rgba(255,79,163,.45)}.status-note{font-family:var(--pixel);color:var(--cyan);font-size:8px}.ghost-button:hover{color:#fff;border-color:var(--gold);box-shadow:3px 3px 0 #bd397b}.result-overlay{background:rgba(10,2,29,.82)}.result-card{border-color:var(--gold);box-shadow:7px 7px 0 #bd397b,0 0 60px rgba(255,79,163,.3)}.result-kicker{font-family:var(--pixel);color:var(--cyan);font-size:9px}.result-symbol{font-family:var(--pixel);text-shadow:5px 5px 0 #bd397b}.result-card h2{font-family:var(--pixel);font-size:22px;line-height:1.6}.result-card p,.text-button{font-family:var(--pixel);font-size:9px}.difficulty-pills{flex-wrap:wrap}.cell .mark.o{font-size:clamp(42px,8vw,70px)}
@keyframes soft-pop{0%{transform:scale(.88);opacity:0;filter:blur(2px)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
.cell.mark-x,.cell.mark-o{animation:soft-pop .28s ease-out}
.app-shell:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.018) 4px);mix-blend-mode:screen;opacity:.35}.pixel-burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}.pixel-burst i{position:absolute;left:50%;top:50%;width:7px;height:7px;box-shadow:2px 2px 0 rgba(0,0,0,.25);animation:burst 1s cubic-bezier(.2,.7,.4,1) var(--delay) both}@keyframes burst{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(180deg);opacity:0}}

/* alternate cabinet finish */
:root{--bg:#070b12;--panel:#0c151b;--panel2:#101e25;--line:#24505a;--muted:#91aeb0;--text:#f4ffff;--gold:#c8ff4a;--pink:#ff6b35;--cyan:#52e7ff}
body{background-color:#070b12;background-image:linear-gradient(115deg,rgba(255,107,53,.13),transparent 32%),linear-gradient(300deg,rgba(82,231,255,.14),transparent 38%),radial-gradient(ellipse at 50% 0,#23353a 0,transparent 52%)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background:linear-gradient(90deg,transparent 49.8%,#52e7ff 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#ff6b35 50%,transparent 50.2%);background-size:96px 96px;mask-image:linear-gradient(to bottom,black,transparent 60%)}
.app-shell:before{opacity:.14;background-size:48px 48px}.topbar{border-bottom:1px solid rgba(82,231,255,.45)}.brand{font-family:var(--pixel);text-shadow:3px 3px 0 #ff6b35}.brand em{color:var(--cyan)}.brand-mark i{background:var(--gold);box-shadow:3px 3px 0 var(--pink)}.top-meta,.eyebrow,.option-title,.role-label,.score-caption,.setup-footer{color:var(--gold)}.live-dot,.pulse{background:var(--gold);box-shadow:0 0 0 3px rgba(200,255,74,.18),0 0 14px var(--gold)}
h1{font-family:var(--sans);font-weight:700;font-size:clamp(55px,8vw,88px);letter-spacing:-.09em;line-height:.95;text-transform:uppercase;text-shadow:6px 6px 0 #ff6b35}h1 span{color:var(--cyan);font-style:italic}.intro{color:#a8c1c3}.mode-tab,.setup-card,.player-card,.cell,.result-card{border:1px solid #24505a;border-radius:12px;background:linear-gradient(145deg,rgba(18,34,40,.94),rgba(7,14,20,.97));box-shadow:8px 8px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)}.mode-tab:hover{border-color:var(--cyan);transform:translateY(-3px)}.mode-tab.active{border-color:var(--gold);background:linear-gradient(110deg,rgba(200,255,74,.16),rgba(13,30,35,.92));box-shadow:8px 8px 0 #173b42,0 0 26px rgba(200,255,74,.15)}.tab-icon{color:var(--pink);text-shadow:2px 2px 0 var(--cyan)}
.form-grid label>span,.form-grid label small{font-family:var(--mono)}input{border:1px solid #32636b;border-radius:6px;background:#071016;color:var(--text);box-shadow:inset 3px 3px 0 rgba(0,0,0,.28)}input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,255,74,.12)}.segmented button,.difficulty-pills button,.ghost-button{border:1px solid #32636b;border-radius:6px}.segmented button.selected,.difficulty-pills button.selected{background:var(--gold);border-color:var(--gold);color:#0a1615;box-shadow:3px 3px 0 #ff6b35}.primary-button{border-radius:6px;background:var(--gold);box-shadow:5px 5px 0 #ff6b35;color:#101b18}.primary-button:hover{box-shadow:7px 7px 0 #ff6b35,0 0 24px rgba(200,255,74,.26)}
.game-heading h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.05em}.game-heading h2 span{color:var(--gold);font-family:var(--mono)}.mode-chip{border-color:var(--pink);color:var(--pink);border-radius:5px}.player-card.active{border-color:var(--gold);box-shadow:8px 8px 0 #173b42,0 0 24px rgba(200,255,74,.18)}.symbol{font-family:var(--sans);font-weight:700;text-shadow:3px 3px 0 #ff6b35}.symbol.x{color:var(--gold)}.symbol.o{color:var(--cyan)}.active-line{background:var(--gold);box-shadow:0 0 12px var(--gold)}.match-score{border-color:var(--pink);border-radius:8px}.wins strong,.match-score b{font-family:var(--sans);font-weight:700;color:var(--gold)}
.board{gap:12px}.cell{border:2px solid #24505a;border-radius:10px;background:linear-gradient(145deg,#14262c,#091217);box-shadow:6px 6px 0 #03070a,inset 0 0 0 1px rgba(255,255,255,.07)}.cell:hover:not(.filled){transform:translateY(-4px);border-color:var(--cyan);box-shadow:8px 8px 0 #03070a,0 0 18px rgba(82,231,255,.3)}.cell .mark{font-family:var(--sans);font-weight:700}.mark.x{color:var(--gold);text-shadow:4px 4px 0 #ff6b35,0 0 20px rgba(200,255,74,.5)}.mark.o{color:var(--cyan);text-shadow:4px 4px 0 #1b8195,0 0 20px rgba(82,231,255,.5)}.cell.winner{border-color:var(--pink);box-shadow:6px 6px 0 #8b301e,0 0 30px rgba(255,107,53,.55)}.status-note{color:var(--gold)}.ghost-button:hover{border-color:var(--cyan);box-shadow:3px 3px 0 #ff6b35}.result-card{border-color:var(--gold);box-shadow:8px 8px 0 #ff6b35,0 0 60px rgba(82,231,255,.2)}.result-kicker{color:var(--gold)}.result-symbol{color:var(--gold);text-shadow:5px 5px 0 #ff6b35}.result-card h2{font-family:var(--sans);font-weight:700;text-transform:uppercase}
.game-view{max-width:1240px;min-height:calc(100vh - 127px);display:grid;grid-template-columns:210px minmax(420px,560px) 210px;grid-template-rows:auto 1fr auto auto;justify-content:center;align-items:center;column-gap:clamp(28px,6vw,90px);row-gap:18px;padding:44px 0 28px}.game-heading{grid-column:1 / 4;grid-row:1;width:100%;padding-bottom:18px;border-bottom:1px solid rgba(82,231,255,.25);align-items:center}.game-heading h2{font-size:24px}.score-row{display:contents}.player-card{width:100%;min-height:245px;display:flex;flex-direction:column;justify-content:space-between;padding:22px 18px}.player-card:first-of-type{grid-column:1;grid-row:2}.player-card:last-of-type{grid-column:3;grid-row:2}.match-score{grid-column:2;grid-row:3;justify-self:center;width:170px;height:46px;flex-direction:row;gap:16px;border-style:solid}.board-wrap{grid-column:2;grid-row:2;width:100%;max-width:none;margin:0;align-self:center}.board{gap:0;border:2px solid var(--cyan);padding:9px;background:rgba(4,12,17,.5);box-shadow:0 0 0 7px rgba(82,231,255,.08),12px 12px 0 rgba(0,0,0,.35)}.cell{border-width:1px;border-radius:0;box-shadow:none;background:rgba(9,20,25,.75)}.cell:hover:not(.filled){transform:none;background:rgba(82,231,255,.12);box-shadow:inset 0 0 22px rgba(82,231,255,.15)}.game-footer{grid-column:1 / 4;grid-row:4;width:100%;padding-top:16px}.card-top{border-bottom:1px solid rgba(82,231,255,.2);padding-bottom:14px}.player-card h3{font-family:var(--pixel);font-size:12px;letter-spacing:.08em}.wins{padding-top:12px;border-top:1px solid rgba(82,231,255,.2)}.active-line{left:0;right:0;bottom:-2px;height:3px}.setup-view{max-width:1120px;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(440px,1fr);column-gap:clamp(44px,8vw,120px);align-items:center;padding-top:70px}.setup-view>.eyebrow,.setup-view>h1,.setup-view>.intro,.setup-view>.setup-footer{grid-column:1}.setup-view>h1{font-size:clamp(46px,6vw,78px)}.mode-tabs,.setup-card{grid-column:2}.setup-view>.eyebrow{align-self:end;margin:0 0 12px}.setup-view>.intro{margin:0}.setup-view>.setup-footer{align-self:start}.setup-card{grid-row:1 / span 4;grid-column:2}
@media(max-width:900px){.game-view{grid-template-columns:150px minmax(300px,480px) 150px;column-gap:20px}.setup-view{grid-template-columns:1fr;max-width:780px}.setup-view>.eyebrow,.setup-view>h1,.setup-view>.intro,.setup-view>.setup-footer,.mode-tabs,.setup-card{grid-column:1}.setup-card{grid-row:auto}.mode-tabs{margin-bottom:20px}}
@media(max-width:680px){.game-view{display:flex;min-height:0;padding-top:57px;flex-direction:column;gap:18px}.game-heading{width:100%;order:0}.score-row{display:grid;order:1;width:100%;grid-template-columns:1fr 60px 1fr;gap:7px}.player-card{min-height:150px}.player-card:first-of-type,.player-card:last-of-type{grid-column:auto;grid-row:auto}.board-wrap{order:2;width:100%;margin:0}.match-score{order:3}.game-footer{order:4}.setup-view{display:flex;flex-direction:column;align-items:stretch}.setup-view>.eyebrow,.setup-view>h1,.setup-view>.intro,.setup-view>.setup-footer,.mode-tabs,.setup-card{width:100%}}
.game-view{isolation:isolate}.game-heading,.score-row,.board-wrap,.game-footer{position:relative;z-index:1}.setup-card{position:relative;overflow:hidden}.setup-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--gold);box-shadow:0 0 18px var(--gold)}
.app-shell{background:#f6e7d4;color:#241c31}.app-shell:before{display:none}.topbar{border-bottom:3px solid #241c31}.brand{font-family:var(--sans);font-weight:800;letter-spacing:.04em;color:#241c31;text-shadow:none}.brand em{color:#f05d4e}.brand-mark i{background:#241c31;box-shadow:none;border-radius:1px}.top-meta{color:#241c31}.live-dot,.pulse{background:#f05d4e;box-shadow:none;border-radius:50%}.setup-view{max-width:1180px;grid-template-columns:1.05fr .95fr;gap:70px;padding-top:90px}.setup-view>h1{font-family:var(--sans);font-size:clamp(58px,8vw,110px);line-height:.85;letter-spacing:-.1em;text-shadow:8px 8px 0 #f5b944}.setup-view>h1 span{color:#f05d4e}.intro{color:#65586c}.eyebrow,.option-title,.role-label,.score-caption,.setup-footer{color:#f05d4e;font-family:var(--mono);font-weight:700}.mode-tab,.setup-card,.player-card,.cell,.result-card{border:3px solid #241c31;border-radius:18px;background:#fff8ed;box-shadow:8px 8px 0 #241c31}.mode-tab{color:#65586c}.mode-tab.active{border-color:#241c31;background:#f5b944;box-shadow:8px 8px 0 #241c31}.mode-tab:hover{transform:translateY(-4px);border-color:#f05d4e}.tab-icon{color:#f05d4e;text-shadow:none}.setup-card{padding:34px}.form-grid label>span{color:#65586c;font-weight:700}input{border:3px solid #241c31;border-radius:9px;background:#fff;color:#241c31;box-shadow:none}input:focus{border-color:#f05d4e;box-shadow:4px 4px 0 #f5b944}.segmented button,.difficulty-pills button,.ghost-button{border:3px solid #241c31;border-radius:7px;color:#241c31}.segmented button.selected,.difficulty-pills button.selected{background:#f05d4e;border-color:#241c31;color:#fff;box-shadow:3px 3px 0 #241c31}.primary-button{border:3px solid #241c31;border-radius:8px;background:#241c31;color:#fff8ed;box-shadow:5px 5px 0 #f05d4e}.primary-button:hover{box-shadow:7px 7px 0 #f05d4e;transform:translate(-2px,-2px)}
.game-view{max-width:1240px;grid-template-columns:230px minmax(430px,600px) 230px;column-gap:40px;padding-top:44px}.game-heading{border-bottom:3px solid #241c31}.game-heading h2{font-family:var(--sans);font-size:32px;color:#241c31}.game-heading h2 span{color:#f05d4e}.mode-chip{border:3px solid #241c31;color:#241c31;background:#f5b944}.player-card{border-radius:18px;background:#fff8ed;box-shadow:8px 8px 0 #241c31}.player-card.active{border-color:#241c31;background:#f5b944;box-shadow:8px 8px 0 #241c31}.player-card h3{font-family:var(--sans);font-weight:800;color:#241c31}.symbol{font-family:var(--sans);font-weight:900;text-shadow:none}.symbol.x{color:#f05d4e}.symbol.o{color:#3ca6a6}.active-line{background:#f05d4e;box-shadow:none}.match-score{border:3px solid #241c31;background:#f05d4e;color:white}.score-caption,.wins span,.match-score small{color:#fff8ed}.wins strong,.match-score b{color:#241c31}.board{border:5px solid #241c31;padding:0;gap:0;background:#f5b944;box-shadow:10px 10px 0 #241c31}.cell{border:0;border-right:3px solid #241c31;border-bottom:3px solid #241c31;border-radius:0;background:#fff8ed;box-shadow:none}.cell:nth-child(3n){border-right:0}.cell:nth-child(n+7){border-bottom:0}.cell:hover:not(.filled){transform:none;background:#ffd874;box-shadow:none}.mark.x{color:#f05d4e;text-shadow:3px 3px 0 #f5b944}.mark.o{color:#3ca6a6;text-shadow:3px 3px 0 #9ad8cd}.cell.winner{border-color:#241c31;background:#f05d4e;box-shadow:inset 0 0 0 5px #f5b944}.game-footer{border-top:3px solid #241c31}.status-note{color:#241c31}.ghost-button{background:#fff8ed;color:#241c31;box-shadow:3px 3px 0 #241c31}.ghost-button:hover{color:#241c31;border-color:#f05d4e;box-shadow:4px 4px 0 #f05d4e}.result-overlay{background:rgba(36,28,49,.75)}.result-card{background:#f5b944;border-color:#241c31;box-shadow:10px 10px 0 #f05d4e}.result-kicker{color:#f05d4e}.result-card h2{font-family:var(--sans);font-size:34px;color:#241c31}.result-card p{color:#65586c}.result-symbol{color:#f05d4e;text-shadow:4px 4px 0 #fff8ed}.text-button{color:#241c31}
@media(max-width:680px){.setup-view{padding-top:57px}.game-view{grid-template-columns:1fr;column-gap:0}.board{width:100%}.player-card{box-shadow:5px 5px 0 #241c31}.setup-card{box-shadow:5px 5px 0 #241c31}.game-heading h2{font-size:24px}}