:root{color-scheme:light;font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;line-height:1.45;font-weight:400;--page-bg: #f5f1e8;--page-bg-deep: #eee7db;--surface: rgba(255, 253, 248, .96);--surface-muted: #f7f2e9;--surface-raised: #fffdfa;--border: #ddd2c0;--border-strong: #cab9a2;--text: #20303d;--text-soft: #60707a;--accent: #5f7988;--accent-strong: #496370;--accent-soft: #dce5ea;--warm: #bf7250;--warm-soft: #f2e2d8;--success-soft: #e6efe8;--draw-soft: #efebe3;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--board-surface: #d5c5ac;--board-surface-deep: #c7b18f;--board-shadow: 0 18px 42px rgba(32, 48, 61, .12);--noughts-tone: #bd7757;--noughts-tone-deep: #9c6044;--crosses-tone: #567588;--crosses-tone-deep: #425d6d;background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),linear-gradient(180deg,var(--page-bg) 0%,var(--page-bg-deep) 100%);color:var(--text)}*{box-sizing:border-box}html{min-height:100%;max-width:100%;overflow-x:clip}body{margin:0;min-width:320px;max-width:100%;min-height:100dvh;overflow-x:clip;color:var(--text);background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),linear-gradient(180deg,var(--page-bg) 0%,var(--page-bg-deep) 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid rgba(95,121,136,.28);outline-offset:3px}#app{min-height:100dvh}.page-shell{width:min(1100px,calc(100% - 16px));max-width:100%;margin:0 auto;padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left))}.game-panel{display:flex;flex-direction:column;gap:12px;width:100%;max-width:100%;min-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));padding:16px;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:0 18px 40px #20303d14;overflow-x:clip}.toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}.game-title{margin:0;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:.96;letter-spacing:-.05em;color:var(--text);white-space:nowrap}.player-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.player-pill,.restart-button,.ghost-button{border-radius:999px;font-weight:700}.player-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);background:var(--surface-muted);color:var(--text)}.player-pill-mark,.status-badge-mark{display:inline-grid;place-items:center;width:28px;aspect-ratio:1 / 1;border-radius:999px;background:#ffffffa8;box-shadow:inset 0 1px #ffffffdb;font-size:1rem;font-weight:800}.player-pill.is-noughts .player-pill-mark,.status-badge.is-noughts .status-badge-mark{color:var(--noughts-tone-deep);background:#fbede5}.player-pill.is-crosses .player-pill-mark,.status-badge.is-crosses .status-badge-mark{color:var(--crosses-tone-deep);background:#e8eff4}.status-badge.is-draw .status-badge-mark{color:var(--text-soft);background:#f7f4ee}.toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.restart-button,.ghost-button,.board-cell{cursor:pointer;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,opacity .14s ease}.restart-button,.ghost-button{padding:11px 16px;border:1px solid transparent}.restart-button{background:var(--accent);color:#f9fbfd;box-shadow:0 10px 24px #5f79882e}.ghost-button{border-color:var(--border);background:var(--surface-muted);color:var(--accent-strong)}.restart-button:hover,.ghost-button:hover,.board-cell:hover:not(:disabled){transform:translateY(-1px)}.restart-button:hover{background:var(--accent-strong)}.ghost-button:hover{border-color:var(--border-strong)}.restart-button:active,.ghost-button:active,.board-cell:active:not(:disabled){transform:translateY(0) scale(.98)}.play-layout{display:flex;flex:1;flex-direction:column;gap:12px;min-height:0}.board-column{display:flex;justify-content:center;align-items:center;min-width:0;min-height:0}.info-column{display:flex;flex-direction:column;gap:10px}.status-badge{display:inline-flex;align-self:center;align-items:center;gap:10px;min-height:52px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface-muted);color:var(--accent-strong);box-shadow:inset 0 1px #ffffffdb}.status-badge.is-noughts{border-color:#bd77574d;background:#faece4;color:var(--noughts-tone-deep)}.status-badge.is-crosses{border-color:#56758842;background:#eaf0f4;color:var(--crosses-tone-deep)}.status-badge.is-draw{border-color:var(--border-strong);background:#f2eee7;color:var(--text-soft)}.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.stat-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border:1px solid var(--border);border-radius:16px;background:var(--surface-muted)}.stat-card.is-noughts{border-color:#bd77574d;background:#faece4}.stat-card.is-crosses{border-color:#56758842;background:#eaf0f4}.stat-card.is-draw{border-color:var(--border-strong);background:var(--draw-soft)}.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft)}.stat-card strong{font-size:clamp(1.04rem,2.4vw,1.28rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}.message{margin:0;min-height:1.4em;text-align:center;color:var(--accent-strong);font-size:clamp(.98rem,2vw,1.08rem);font-weight:700}.hint-text{margin:0;text-align:center;color:var(--text-soft);font-size:.94rem}.board-stage{width:min(100%,calc(100dvh - 316px),560px);max-width:100%;flex:0 1 auto}.board-wrap{position:relative}.board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,14px);width:100%;aspect-ratio:1 / 1;padding:clamp(12px,1.8vw,16px);border-radius:28px;background:linear-gradient(180deg,var(--board-surface) 0%,var(--board-surface-deep) 100%);box-shadow:var(--board-shadow)}.board-cell{position:relative;display:grid;place-items:center;min-width:0;border:1px solid rgba(113,95,73,.14);border-radius:22px;background:linear-gradient(180deg,#fffdf9f5,#f8f1e6f0);box-shadow:inset 0 1px #ffffffe6,0 10px 18px #3e312514}.board-cell:disabled{cursor:default}.board-cell:not(:disabled):hover{border-color:#715f493d}.board-cell.is-winning{box-shadow:inset 0 0 0 3px #ffffff85,0 14px 24px #3e31251f}.board-cell.is-last-move:after{content:"";position:absolute;inset:10px;border:3px solid rgba(95,121,136,.2);border-radius:16px}.board-cell.is-noughts{background:linear-gradient(180deg,#fff7f1,#f7ebdf)}.board-cell.is-crosses{background:linear-gradient(180deg,#f5f9fc,#e8eff3)}.cell-mark{position:relative;z-index:2;font-size:clamp(3rem,10vw,5rem);font-weight:800;line-height:1;letter-spacing:-.08em}.board-cell.is-noughts .cell-mark{color:var(--noughts-tone)}.board-cell.is-crosses .cell-mark{color:var(--crosses-tone)}.winning-line{position:absolute;z-index:3;height:clamp(10px,1.4vw,14px);border-radius:999px;transform-origin:0 50%;pointer-events:none;box-shadow:0 0 0 3px #ffffff9e;opacity:.84}.winning-line[data-player=noughts]{background:#bd77578c}.winning-line[data-player=crosses]{background:#5675888f}@media(orientation:landscape)and (min-width:900px){.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"board info";align-items:center;gap:16px}.board-column{grid-area:board;align-items:center}.info-column{grid-area:info;gap:12px}.status-badge{align-self:flex-start}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.message,.hint-text{text-align:left}.board-stage{width:min(100%,calc(100dvh - 188px),560px)}}@media(max-width:900px){.game-panel{border-radius:24px;padding:14px}.toolbar{grid-template-columns:1fr;justify-items:center}.toolbar-actions{justify-content:center}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.board-stage{width:min(100%,calc(100dvh - 392px),540px)}}@media(max-width:720px){.page-shell{width:min(100%,calc(100% - 12px));padding:max(6px,var(--safe-top)) max(6px,var(--safe-right)) max(6px,var(--safe-bottom)) max(6px,var(--safe-left))}.game-panel{min-height:calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));padding:12px}.play-layout{gap:10px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.board-stage{width:min(100%,calc(100dvh - 438px),520px)}}@media(max-width:520px){.game-title{font-size:1.45rem;white-space:normal;text-align:center}.player-strip,.toolbar-actions{width:100%}.toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.restart-button,.ghost-button{width:100%;padding-inline:10px}.board-stage{width:100%}.player-pill{padding:7px 12px}.player-pill-mark,.status-badge-mark{width:24px;font-size:.92rem}.status-badge{min-height:46px;padding:8px 12px}.stats-grid{gap:6px}.stat-card{padding:8px 6px}.stat-label{font-size:.66rem}.message{font-size:.94rem}.hint-text{display:none}.board{border-radius:24px}.board-cell{border-radius:18px}.cell-mark{font-size:clamp(2.7rem,17vw,4.2rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.restart-button,.ghost-button,.board-cell{transition-duration:0ms}*,*:before,*:after{animation-duration:0ms}}