:root{--bg-1: #5b7cfa;--bg-2: #7d4fd4;--panel: rgba(255, 255, 255, .12);--text: #ffffff;--text-dark: #23304a;--muted: rgba(255, 255, 255, .82);--button: #49b96e;--button-hover: #3ca35f;--accent: #ffd166;--radius: 22px;--shadow: 0 18px 40px rgba(12, 20, 44, .26);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--app-width: min(100vw - 20px, 560px);--app-height: min(100dvh - 20px - var(--safe-top) - var(--safe-bottom), 920px);--title-size: clamp(1.5rem, 3.4vw, 2.7rem);--subtitle-size: clamp(.82rem, 1.8vw, .98rem);--meta-size: clamp(.8rem, 1.7vw, .92rem);--status-size: clamp(.95rem, 2vw, 1.15rem);--control-size: clamp(.88rem, 1.8vw, .98rem);--section-gap: clamp(8px, 1.4vh, 14px);--inner-pad: clamp(10px, 1.8vh, 18px);--grid-gap: clamp(7px, 1vh, 12px);--board-max: min(84vw, 42vh, 340px);--cell-size: calc((var(--board-max) - (var(--grid-gap) * 2)) / 3)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(255,255,255,.18),transparent 26%),radial-gradient(circle at bottom right,rgba(255,255,255,.12),transparent 22%),linear-gradient(135deg,var(--bg-1),var(--bg-2));min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:max(10px,var(--safe-top)) 10px max(10px,var(--safe-bottom));overflow:hidden}.app{width:var(--app-width);height:var(--app-height);max-width:100%;max-height:100%;background:#ffffff14;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}.screen{position:absolute;inset:0;padding:var(--inner-pad);display:flex;flex-direction:column;gap:var(--section-gap);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;min-height:0}.screen.active{opacity:1;pointer-events:auto;transform:translateY(0)}.setup-screen{justify-content:center}.game-screen{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;align-content:stretch}.top,.game-header{display:grid;gap:min(8px,1vh);text-align:center}h1,.game-title{margin:0;line-height:1.05;letter-spacing:.02em;text-shadow:0 3px 10px rgba(0,0,0,.22)}h1{font-size:var(--title-size)}.game-title{font-size:clamp(1.3rem,2.8vw,2rem)}.subtitle{margin:0;color:var(--muted);font-size:var(--subtitle-size);line-height:1.3}.meta{color:var(--muted);font-size:var(--meta-size);min-height:1.2em;line-height:1.25}.panel{background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:clamp(10px,1.7vh,14px)}.options{display:grid;gap:clamp(10px,1.4vh,12px)}.option-row{display:grid;gap:8px}.option-label{font-size:clamp(.84rem,1.6vw,.9rem);color:var(--muted)}.segmented{display:flex;flex-wrap:wrap;gap:8px}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented label{padding:8px 12px;border-radius:999px;background:#ffffff17;border:1px solid rgba(255,255,255,.12);cursor:pointer;font-size:var(--control-size);transition:.18s ease;user-select:none;touch-action:manipulation;text-align:center;flex:1 1 auto;min-width:110px}.segmented label:hover{background:#ffffff29;transform:translateY(-1px)}.segmented input:checked+label{background:#fffffff2;color:var(--text-dark);border-color:transparent;font-weight:700}.primary-action,.controls button,.postgame-actions button{border:none;border-radius:999px;padding:10px 16px;font-size:var(--control-size);font-weight:800;cursor:pointer;transition:.2s ease;touch-action:manipulation;box-shadow:0 8px 18px #141a302e}.primary-action{width:100%;background:var(--button);color:#fff}.primary-action:hover,.btn-primary:hover,.postgame-actions .btn-primary:hover{background:var(--button-hover);transform:translateY(-2px)}.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.score-card{background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:8px;text-align:center}.score-card div{font-size:clamp(.78rem,1.5vw,.9rem);line-height:1.2}.score-card strong{display:block;font-size:clamp(1.05rem,2.1vw,1.28rem);margin-top:4px}.micro-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.micro-card{background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:8px 10px;text-align:center;font-size:clamp(.78rem,1.5vw,.9rem)}.status{min-height:1.35em;text-align:center;font-size:var(--status-size);font-weight:700;margin:0;line-height:1.25}.thinking{display:inline-flex;align-items:center;gap:6px}.dots{display:inline-flex;gap:4px;vertical-align:middle}.dots span{width:6px;height:6px;border-radius:999px;background:currentColor;opacity:.35;animation:blink 1.1s infinite}.dots span:nth-child(2){animation-delay:.18s}.dots span:nth-child(3){animation-delay:.36s}@keyframes blink{0%,80%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}.board-area{min-height:0;min-width:0;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:2px 0;container-type:size}.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--grid-gap);aspect-ratio:1 / 1;width:min(100cqw,100cqh,var(--board-max));height:min(100cqw,100cqh,var(--board-max))}.cell{width:100%;height:100%;min-width:0;min-height:0;border:none;border-radius:18px;background:#fffffff0;color:var(--text-dark);font-size:calc(min(100cqw,100cqh,var(--board-max)) / 3 * .4);font-weight:800;box-shadow:0 10px 24px #1018302e;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.cell:hover:not(:disabled),.cell:focus-visible:not(:disabled){transform:translateY(-3px);box-shadow:0 14px 28px #10183042;background:#fff;outline:none}.cell:disabled{cursor:not-allowed}.cell.x{color:#4961d6}.cell.o{color:#da5f7a}.cell.winning{background:linear-gradient(135deg,#ffe38a,#ffd166);animation:pulse .7s ease-in-out infinite alternate}.controls,.postgame-actions{display:grid;gap:8px;padding-top:2px}.btn-primary{background:var(--button);color:#fff}.btn-secondary{background:#fffffff0;color:var(--text-dark)}.btn-tertiary{background:#ffffff1f;color:#fff;border:1px solid rgba(255,255,255,.14)}.btn-secondary:hover,.btn-tertiary:hover{transform:translateY(-2px)}.postgame{display:none;background:#ffd16624;border:1px solid rgba(255,209,102,.28);border-radius:18px;padding:10px;text-align:center;gap:10px}.postgame.show{display:grid}.postgame.show~.controls #restartSameBtn{display:none}.postgame-message{font-weight:800;color:#fff7d1}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.04)}}@media(max-width:420px){:root{--board-max: min(92vw, 38vh, 250px)}.scoreboard{grid-template-columns:1fr}.segmented{flex-direction:column}.segmented label{min-width:0;width:100%}}@media(max-height:760px){:root{--board-max: min(84vw, 34vh, 270px);--section-gap: clamp(6px, .8vh, 10px)}}@media(max-height:680px){:root{--board-max: min(80vw, 29vh, 225px);--inner-pad: 10px}.subtitle{display:none}}@media(max-height:620px){:root{--board-max: min(74vw, 25vh, 190px);--grid-gap: 7px}.app{border-radius:22px}.score-card{padding:6px}.primary-action,.controls button,.postgame-actions button{padding:8px 14px}}@media(orientation:landscape)and (max-height:500px){:root{--inner-pad: 6px;--section-gap: 4px;--grid-gap: 5px;--board-max: min(72vh, 48vw, 220px)}.meta,.micro-stats{display:none}.game-title{font-size:1rem}.status{font-size:.85rem}.score-card{padding:4px}.score-card div{font-size:.7rem}.score-card strong{font-size:.9rem;margin-top:2px}.controls{grid-auto-flow:column;grid-auto-columns:1fr}.primary-action,.controls button,.postgame-actions button{padding:6px 10px;font-size:.8rem}}