html,body{height:100%}.app{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow-x:clip}.game{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"status" "board" "controls";gap:12px;padding:0 16px 16px;width:100%;max-width:var(--page-max);margin:0 auto;min-height:0}.status{grid-area:status}.board-area{grid-area:board}.controls{grid-area:controls}@media(orientation:landscape)and (min-width:560px){.game{grid-template-columns:minmax(0,1fr) minmax(220px,320px);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"board status" "board controls" "board .";column-gap:24px;row-gap:16px}.controls{flex-wrap:wrap}.controls .btn{flex:1 1 40%}.controls .btn.primary{flex-basis:100%;order:-1;min-height:56px}.status .players{grid-template-columns:1fr}.hint{min-height:4.2em}}.status{display:grid;gap:8px;align-content:start}.players{display:grid;grid-template-columns:1fr 1fr;gap:8px}.player{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px;border-radius:var(--radius);background:var(--surface);border:2px solid transparent;box-shadow:var(--shadow);opacity:.6;transition:opacity .3s ease,border-color .3s ease,background-color .3s ease}.player.active{opacity:1}.player-x.active{border-color:var(--x);background:color-mix(in srgb,var(--x-soft) 60%,var(--surface))}.player-o.active{border-color:var(--o);background:color-mix(in srgb,var(--o-soft) 60%,var(--surface))}.player-mark{width:24px;height:24px;flex:none;fill:none;stroke-width:3.2;stroke-linecap:round}.player-x .player-mark{stroke:var(--x)}.player-o .player-mark{stroke:var(--o)}.player-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-score{margin-left:auto;min-width:2em;padding:2px 8px;border-radius:999px;background:var(--surface-2);font-weight:800;font-variant-numeric:tabular-nums;text-align:center}.hint{margin:0;min-height:2.6em;font-size:.98rem;line-height:1.3;color:var(--ink);text-wrap:pretty}.hint strong.x{color:var(--x)}.hint strong.o{color:var(--o)}.status-note{margin:0;font-size:.8rem;color:var(--muted)}.board-area{position:relative;container-type:size;display:grid;place-items:center;min-height:0;min-width:0}.board{display:block;width:min(100cqw,100cqh);height:min(100cqw,100cqh);border-radius:calc(var(--radius) + 6px);background:var(--board);box-shadow:var(--shadow);overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background-color .3s ease}@supports not (width: 1cqw){.board{width:min(100%,70vh);height:auto;aspect-ratio:1}}.board *:focus{outline:none}.controls{display:flex;gap:8px;align-items:stretch}.controls .btn{flex:1 1 0;padding:0 10px}.controls .btn.primary{flex-grow:1.4}@media(max-width:400px){.player{padding:6px 8px;gap:6px}.player-mark{width:20px;height:20px}.player-score{padding:2px 6px}}@media(max-width:360px){.controls .btn:has(>span) svg{display:none}}.result{position:absolute;inset:0;display:grid;place-items:center;padding:16px;pointer-events:none}.result[hidden]{display:none}.result-card{position:relative;pointer-events:auto;width:min(340px,100%);padding:24px 20px 20px;border-radius:calc(var(--radius) + 6px);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow),0 20px 60px #0000002e;text-align:center}.result-mark{width:64px;height:64px;fill:none;stroke-width:5.5;stroke-linecap:round}.result-mark .draw-sign path{stroke:var(--muted)}.result-card h2{margin:6px 0 4px;font-size:1.7rem;letter-spacing:-.02em}.result-card p{margin:0 0 18px;color:var(--muted)}.result-actions{display:flex;gap:8px}.result-actions .btn{flex:1}.confetti{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}.confetti i{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px}@media(orientation:landscape)and (min-width:560px)and (max-height:520px){.topbar{padding-top:4px;padding-bottom:4px}.icon-btn{height:36px}.game{row-gap:8px;padding-bottom:10px}.player{padding:4px 10px}.players{gap:6px}.hint{min-height:0;font-size:.92rem}.status-note{display:none}.btn{min-height:40px}.controls .btn.primary{min-height:44px}}