:root{--game-x:#a17cff;--game-o:#52e1d2;--game-line:#ffffff17;--game-panel:linear-gradient(145deg,#191a25f2,#14151df5)}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;scroll-behavior:smooth}
body{min-height:100vh;margin:0;color:#f4f0ff;font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #d3ff4e;outline-offset:3px}
.page-shell{padding-bottom:34px}
.game-card{position:relative;width:min(100%,470px);margin:0 auto;padding:22px;border:1px solid var(--game-line);border-radius:17px;background:var(--game-panel);box-shadow:0 20px 58px #0005,0 1px 0 #ffffff08 inset;backdrop-filter:blur(16px)}
.game-card:before{position:absolute;top:0;left:18%;width:64%;height:1px;background:linear-gradient(90deg,transparent,#a17cff99,#52e1d275,transparent);content:''}
.game-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid #ffffff12}
.section-kicker{color:#d3ff4e;font-size:8px;font-weight:850;letter-spacing:1.25px}.game-heading h2{margin:6px 0 0;color:#f1edfa;font-size:19px;font-weight:760;letter-spacing:-.45px}
.game-live{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #52e1d233;border-radius:99px;background:#52e1d210;color:#92e9dc;font-size:7px;font-weight:850;letter-spacing:.7px;white-space:nowrap}.game-live i{width:6px;height:6px;border-radius:50%;background:#52e1d2;box-shadow:0 0 0 4px #52e1d21a,0 0 10px #52e1d2aa}
.scoreboard{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:10px;margin:16px 0 12px}
.score-player{position:relative;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:8px;min-height:61px;padding:9px 11px;border:1px solid #ffffff14;border-radius:11px;background:#ffffff05;transition:border-color .2s,background .2s,transform .2s}
.score-player.is-active{border-color:#a17cff61;background:linear-gradient(120deg,#a17cff1e,#52e1d210);transform:translateY(-1px)}
.score-o.is-active{border-color:#52e1d266;background:linear-gradient(120deg,#52e1d218,#52e1d208)}
.player-symbol{grid-row:1/3;display:grid;place-items:center;width:29px;height:34px;border:1px solid #a17cff38;border-radius:8px;background:#a17cff15;color:#cfb9ff;font-size:23px;line-height:1}.score-o .player-symbol{border-color:#52e1d238;background:#52e1d214;color:#8ff1e3;font-size:19px}
.player-name{color:#aaa3b6;font-size:7px;font-weight:850;letter-spacing:.7px}.score-player strong{margin-top:2px;color:#f5f1ff;font-size:16px;font-variant-numeric:tabular-nums;line-height:1}
.score-draw{display:grid;justify-items:center;gap:4px;color:#878195}.score-draw span{font-size:7px;font-weight:850;letter-spacing:.8px}.score-draw strong{color:#ddd6e9;font-size:14px;font-variant-numeric:tabular-nums}
.turn-banner{display:flex;align-items:center;gap:9px;min-height:39px;margin:0 0 14px;padding:0 12px;border:1px solid #ffffff12;border-radius:9px;background:#0e0f16;color:#b9b2c6;font-size:8px;font-weight:850;letter-spacing:.9px;transition:border-color .2s}
.turn-pulse{width:6px;height:6px;border-radius:50%;background:var(--game-x);box-shadow:0 0 0 4px #a17cff20;transition:background .2s,box-shadow .2s}.turn-banner.is-o{border-color:#52e1d22b}.turn-banner.is-o .turn-pulse{background:var(--game-o);box-shadow:0 0 0 4px #52e1d220}.turn-symbol{margin-left:auto;color:#cbb3ff;font-size:18px;line-height:1}.turn-banner.is-o .turn-symbol{color:#8deadd}
.board{--cell:clamp(78px,20vw,112px);display:grid;grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(3,var(--cell));justify-content:center;gap:9px;margin:0 auto;padding:10px;border:1px solid #ffffff0e;border-radius:14px;background:radial-gradient(circle at 50% 45%,#a17cff0c,transparent 66%),#101119}
.cell{position:relative;display:grid;place-items:center;width:var(--cell);height:var(--cell);padding:0;border:1px solid #ffffff14;border-radius:10px;background:linear-gradient(145deg,#1c1d28,#151620);cursor:pointer;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}
.cell:not(.x):not(.circle):hover{transform:translateY(-2px);border-color:#a17cff61;background:linear-gradient(145deg,#242231,#171822);box-shadow:0 8px 18px #0003}
.cell.x,.cell.circle{cursor:default}.cell:before,.cell:after{position:absolute;content:'';pointer-events:none;transition:opacity .15s}
.cell.x:before,.cell.x:after{width:54%;height:7px;border-radius:99px;background:linear-gradient(90deg,#b99aff,#8d6cff);box-shadow:0 0 16px #a17cff53}
.cell.x:before{transform:rotate(45deg)}.cell.x:after{transform:rotate(-45deg)}
.cell.circle:before{width:47%;height:47%;border:7px solid #52e1d2;border-radius:50%;box-shadow:0 0 16px #52e1d244}
.board.x .cell:not(.x):not(.circle):hover:before,.board.x .cell:not(.x):not(.circle):hover:after{width:54%;height:7px;border-radius:99px;background:#a17cff5c}.board.x .cell:not(.x):not(.circle):hover:before{transform:rotate(45deg)}.board.x .cell:not(.x):not(.circle):hover:after{transform:rotate(-45deg)}
.board.circle .cell:not(.x):not(.circle):hover:before{width:47%;height:47%;border:7px solid #52e1d25c;border-radius:50%}
.cell.winning{border-color:#d3ff4e87;background:linear-gradient(145deg,#d3ff4e19,#a17cff18);box-shadow:0 0 22px #d3ff4e1c}
.game-actions{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:15px}
.new-game,.reset-score{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid #ffffff1b;border-radius:9px;background:#ffffff08;color:#d5cde5;font:750 9px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer;transition:all .18s}.new-game{border-color:transparent;background:linear-gradient(105deg,#a17cff,#7655ef 56%,#38c9bb);color:#fff;box-shadow:0 7px 20px #8755e932}.new-game:hover{filter:brightness(1.1);transform:translateY(-1px)}.reset-score:hover{border-color:#a17cff75;background:#a17cff14;color:#eee8ff}.new-game svg,.winning-message-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.winning-message{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}.winning-message.show-winning-message{visibility:visible;opacity:1}.win-backdrop{position:absolute;inset:0;background:#080910d9;backdrop-filter:blur(10px)}.win-dialog{position:relative;display:flex;flex-direction:column;align-items:center;width:min(100%,360px);padding:26px 22px 22px;border:1px solid #ffffff1c;border-radius:17px;background:linear-gradient(145deg,#1c1d29,#12131c);box-shadow:0 24px 70px #0009;text-align:center;transform:translateY(8px) scale(.98);transition:transform .2s}.show-winning-message .win-dialog{transform:translateY(0) scale(1)}.win-spark{display:grid;width:43px;height:43px;place-items:center;border:1px solid #d3ff4e37;border-radius:13px;background:#d3ff4e13;color:#d3ff4e;font-size:19px}.win-kicker{margin-top:15px;color:#d3ff4e;font-size:7px;font-weight:850;letter-spacing:1.3px}.winning-message-text{margin:7px 0 0;color:#f4f0ff;font-size:27px;letter-spacing:-.8px}.win-caption{margin:7px 0 18px;color:#a29caf;font-size:10px;line-height:1.6}.winning-message-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px;border:0;border-radius:9px;background:linear-gradient(105deg,#a17cff,#7655ef 56%,#38c9bb);color:#fff;font:800 9px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:0 7px 20px #8755e932}
@media(max-width:520px){.topbar,.page-shell{width:calc(100% - 30px)}.topbar{height:61px}.page-shell{padding-top:30px}.game-card{padding:16px;border-radius:14px}.game-heading h2{font-size:17px}.scoreboard{grid-template-columns:1fr 48px 1fr;gap:6px}.score-player{grid-template-columns:26px 1fr;column-gap:6px;padding:8px;min-height:56px}.player-symbol{width:26px;height:31px}.player-name{font-size:6px;letter-spacing:.5px}.board{--cell:clamp(72px,24vw,100px);gap:7px;padding:8px}.cell{border-radius:9px}.cell.x:before,.cell.x:after,.board.x .cell:not(.x):not(.circle):hover:before,.board.x .cell:not(.x):not(.circle):hover:after{height:6px}.cell.circle:before,.board.circle .cell:not(.x):not(.circle):hover:before{border-width:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition:none!important}}

/* Polished duel arena */
.game-card{width:min(100%,520px);padding:25px;overflow:hidden;border-color:#ffffff20;background:radial-gradient(ellipse at 92% 8%,#a17cff18,transparent 34%),radial-gradient(ellipse at 4% 96%,#52e1d210,transparent 36%),linear-gradient(145deg,#1a1b28f5,#12131cf7);box-shadow:0 28px 78px #0008,0 1px 0 #ffffff0b inset}
.game-card:after{position:absolute;right:-145px;bottom:76px;width:260px;height:260px;border:1px solid #52e1d20d;border-radius:50%;box-shadow:0 0 0 28px #52e1d208,0 0 0 58px #a17cff08;pointer-events:none;content:''}
.game-heading{padding-bottom:18px;border-bottom-color:#ffffff15}
.section-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #d3ff4e2b;border-radius:99px;background:#d3ff4e0d;color:#d9ff7d;font-size:7px;letter-spacing:1.05px}
.section-kicker:before{width:5px;height:5px;border-radius:50%;background:#d3ff4e;box-shadow:0 0 9px #d3ff4e;content:''}
.game-heading h2{margin-top:8px;font-size:21px;letter-spacing:-.6px}
.game-live{padding:8px 10px;border-color:#52e1d23b;background:linear-gradient(110deg,#52e1d211,#a17cff0c);color:#b5eee5}
.scoreboard{grid-template-columns:1fr 58px 1fr;gap:13px;margin:19px 0 13px}
.score-player{grid-template-columns:39px 1fr;column-gap:10px;min-height:76px;padding:11px 12px;border-color:#ffffff17;border-radius:13px;background:linear-gradient(145deg,#ffffff09,#ffffff03);box-shadow:0 8px 22px #0002;transition:transform .24s,border-color .24s,background .24s,box-shadow .24s}
.score-player.is-active{border-color:#a17cff7a;background:linear-gradient(125deg,#a17cff27,#a17cff0b 75%);box-shadow:0 8px 25px #a17cff14,0 0 0 1px #a17cff18 inset;transform:translateY(-2px)}
.score-o.is-active{border-color:#52e1d27a;background:linear-gradient(125deg,#52e1d222,#52e1d209 75%);box-shadow:0 8px 25px #52e1d214,0 0 0 1px #52e1d217 inset}
.player-symbol{width:38px;height:42px;border-color:#a17cff45;border-radius:11px;background:linear-gradient(145deg,#a17cff27,#a17cff0b);font-size:28px;filter:drop-shadow(0 0 8px #a17cff45)}
.score-o .player-symbol{border-color:#52e1d248;background:linear-gradient(145deg,#52e1d225,#52e1d20a);font-size:23px;filter:drop-shadow(0 0 8px #52e1d245)}
.player-name{font-size:7px;letter-spacing:.9px}.score-player strong{font-size:21px;line-height:1.1}
.score-draw{position:relative;gap:3px}.score-draw:before{position:absolute;inset:1px -7px;border:1px solid #ffffff10;border-radius:50%;content:''}.score-draw span{font-size:6px;letter-spacing:1px}.score-draw strong{font-size:15px}
.turn-banner{min-height:42px;margin-bottom:15px;padding:0 13px;border-color:#a17cff2a;background:linear-gradient(105deg,#a17cff10,#52e1d20a 76%),#0e0f16;color:#d6cde7;font-size:8px;letter-spacing:1px}
.turn-banner.is-o{border-color:#52e1d23a;background:linear-gradient(105deg,#52e1d213,#52e1d207 76%),#0e0f16}
.turn-symbol{display:grid;width:25px;height:25px;place-items:center;margin-left:auto;border:1px solid #a17cff34;border-radius:7px;background:#a17cff13;color:#d2beff;font-size:17px}
.turn-banner.is-o .turn-symbol{border-color:#52e1d234;background:#52e1d211;color:#9af1e5}
.board{--cell:clamp(88px,22vw,122px);position:relative;z-index:1;gap:10px;margin:0 auto;padding:13px;border:1px solid #a17cff27;border-radius:19px;background:radial-gradient(circle at 50% 50%,#a17cff0d,transparent 72%),linear-gradient(145deg,#11121b,#0d0e15);box-shadow:0 17px 40px #0005,0 0 35px #a17cff0b inset,0 1px 0 #ffffff0a inset}
.cell{border-color:#ffffff15;border-radius:13px;background:linear-gradient(145deg,#20212e,#151620);box-shadow:0 5px 14px #0003,0 1px 0 #ffffff08 inset;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.cell:not(.x):not(.circle):hover{transform:translateY(-3px) scale(1.015);border-color:#a17cff80;background:linear-gradient(145deg,#29263a,#191a27);box-shadow:0 9px 20px #0005,0 0 22px #a17cff1a}
.cell.x:before,.cell.x:after{height:8px;background:linear-gradient(90deg,#d0baff,#9a75ff 72%,#7955eb);box-shadow:0 0 18px #a17cff70}
.cell.circle:before{border-width:8px;border-color:#69eee0;box-shadow:0 0 18px #52e1d270,inset 0 0 14px #52e1d20b}
.board.x .cell:not(.x):not(.circle):hover:before,.board.x .cell:not(.x):not(.circle):hover:after{height:8px;background:#b393ff67}.board.circle .cell:not(.x):not(.circle):hover:before{border-width:8px;border-color:#69eee067}
.cell.winning{animation:winning-pulse 1.35s ease-in-out infinite alternate;border-color:#d3ff4e;background:linear-gradient(145deg,#d3ff4e25,#a17cff25);box-shadow:0 0 24px #d3ff4e28,0 0 0 1px #d3ff4e35 inset}
.game-actions{margin-top:17px}
.new-game,.reset-score{min-height:41px;padding:0 15px;border-radius:10px;font-size:9px}
.new-game{box-shadow:0 8px 24px #8755e945,0 1px 0 #ffffff38 inset}
.scoreboard{grid-template-columns:1fr 64px 1fr}
.score-draw{width:60px;height:60px;align-content:center;justify-self:center;gap:4px;border:1px solid #ffffff19;border-radius:12px;background:linear-gradient(145deg,#ffffff0c,#ffffff04);box-shadow:0 7px 18px #0002}
.score-draw:before{content:none}
.score-draw span{font-size:7px;letter-spacing:.8px}
.score-draw strong{font-size:16px}
@keyframes winning-pulse{from{filter:brightness(.92)}to{filter:brightness(1.2)}}
@media(max-width:520px){.game-card{padding:17px;border-radius:15px}.game-heading{padding-bottom:14px}.game-heading h2{font-size:19px}.scoreboard{grid-template-columns:1fr 48px 1fr;gap:7px;margin:16px 0 12px}.score-draw{width:46px;height:46px;border-radius:10px}.score-draw span{font-size:6px}.score-draw strong{font-size:14px}.score-player{grid-template-columns:30px 1fr;gap:7px;min-height:66px;padding:8px;border-radius:11px}.player-symbol{width:30px;height:35px;border-radius:9px;font-size:23px}.score-o .player-symbol{font-size:19px}.player-name{font-size:6px}.score-player strong{font-size:18px}.board{--cell:clamp(64px,calc((100vw - 110px)/3),108px);gap:8px;padding:10px;border-radius:16px}.cell{border-radius:11px}.cell.x:before,.cell.x:after,.board.x .cell:not(.x):not(.circle):hover:before,.board.x .cell:not(.x):not(.circle):hover:after{height:7px}.cell.circle:before,.board.circle .cell:not(.x):not(.circle):hover:before{border-width:7px}}