: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: #ede5d7;--surface: rgba(255, 252, 247, .96);--surface-muted: #f7f1e7;--surface-raised: #fffdfa;--border: #dccfbe;--border-strong: #cdb89f;--text: #22303a;--text-soft: #66747d;--accent: #5d7888;--accent-strong: #47616f;--accent-soft: #dce6eb;--sun-tone: #c9845f;--sun-tone-deep: #9f6648;--sun-soft: #f8ece2;--moon-tone: #5b7f96;--moon-tone-deep: #466477;--moon-soft: #e8eff4;--draw-soft: #efe9df;--board-surface: #d8cab1;--board-surface-deep: #ccb795;--board-shadow: 0 18px 42px rgba(34, 48, 58, .12);--dot-size: clamp(14px, 2vw, 18px);--edge-size: clamp(20px, 4vw, 28px);--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);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(93,120,136,.28);outline-offset:3px}#app{min-height:100dvh}.page-shell{width:min(1120px,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 #22303a14;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.55rem,2.9vw,2.25rem);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}.player-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--border);background:var(--surface-muted)}.player-pill-copy{display:flex;flex-direction:column;gap:1px;line-height:1.1}.player-pill-copy strong{font-size:.95rem}.player-pill-copy small{color:var(--text-soft);font-size:.78rem}.player-pill-mark,.status-badge-mark{display:inline-grid;place-items:center;width:28px;aspect-ratio:1 / 1;border-radius:999px;background:#ffffffc7;box-shadow:inset 0 1px #ffffffe0}.player-pill-mark:after,.status-badge-mark:after{content:"";width:12px;aspect-ratio:1 / 1;border-radius:999px}.player-pill.is-sun .player-pill-mark:after,.status-badge.is-sun .status-badge-mark:after{background:var(--sun-tone)}.player-pill.is-moon .player-pill-mark:after,.status-badge.is-moon .status-badge-mark:after{background:var(--moon-tone)}.toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.restart-button,.ghost-button,.edge-button{transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,opacity .14s ease,transform .14s ease}.restart-button,.ghost-button{padding:11px 16px;border:1px solid transparent;font-weight:700;cursor:pointer}.restart-button{background:var(--accent);color:#f9fbfd;box-shadow:0 10px 24px #5d78882e}.restart-button:hover{background:var(--accent-strong)}.ghost-button{border-color:var(--border);background:var(--surface-muted);color:var(--accent-strong)}.ghost-button:hover{border-color:var(--border-strong)}.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;justify-content:center;gap:10px;width:min(100%,18rem);max-width:100%;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 strong{flex:1;text-align:center}.status-badge.is-sun{border-color:#c9845f4d;background:var(--sun-soft);color:var(--sun-tone-deep)}.status-badge.is-moon{border-color:#5b7f963d;background:var(--moon-soft);color:var(--moon-tone-deep)}.status-badge.is-draw{border-color:var(--border-strong);background:var(--draw-soft);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-sun{border-color:#c9845f4d;background:var(--sun-soft)}.stat-card.is-moon{border-color:#5b7f963d;background:var(--moon-soft)}.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{display:flex;align-items:center;justify-content:center;margin:0;min-height:2.9em;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 - 304px),640px);max-width:100%;flex:0 1 auto}.board{display:grid;grid-template-columns:repeat(var(--boxes-per-side),var(--dot-size) 1fr) var(--dot-size);grid-template-rows:repeat(var(--boxes-per-side),var(--dot-size) 1fr) var(--dot-size);gap:0;width:100%;aspect-ratio:1 / 1;padding:clamp(16px,2vw,20px);border-radius:30px;background:linear-gradient(180deg,var(--board-surface) 0%,var(--board-surface-deep) 100%);box-shadow:var(--board-shadow)}.board-dot{align-self:center;justify-self:center;width:var(--dot-size);aspect-ratio:1 / 1;border-radius:999px;background:#4a3d32a8;box-shadow:0 2px #ffffff47,0 4px 10px #3a2f261f}.box-cell{display:grid;place-items:center;min-width:0;min-height:0;margin:6px;border-radius:22px;background:#fffaf385;box-shadow:inset 0 1px #ffffff57}.box-cell.is-sun{background:#f8ece2e6}.box-cell.is-moon{background:#e8eff4eb}.box-cell.is-fresh{box-shadow:inset 0 0 0 3px #fff6,0 10px 20px #3a2f2614}.box-owner{display:inline-grid;place-items:center;width:clamp(34px,7vw,46px);aspect-ratio:1 / 1;border-radius:18px;font-size:clamp(.95rem,2.2vw,1.15rem);font-weight:800;letter-spacing:.02em;color:transparent}.box-cell.is-sun .box-owner{background:#c9845f29;color:var(--sun-tone-deep)}.box-cell.is-moon .box-owner{background:#5b7f9629;color:var(--moon-tone-deep)}.edge-button{position:relative;margin:0;padding:0;border:0;background:transparent;cursor:pointer}.edge-button:before{content:"";display:block;width:100%;height:100%;border-radius:999px;background:#fffcf7a8;box-shadow:inset 0 0 0 1px #5749391f,0 2px 8px #3a2f2614}.edge-button.is-horizontal{align-self:center;justify-self:stretch;min-height:var(--edge-size)}.edge-button.is-vertical{align-self:stretch;justify-self:center;min-width:var(--edge-size)}.edge-button:hover:before,.edge-button:focus-visible:before{background:#fffcf7e6;box-shadow:inset 0 0 0 1px #5749392e,0 6px 14px #3a2f261f}.edge-button.is-sun:before{background:linear-gradient(180deg,#f0b592 0%,var(--sun-tone) 100%);box-shadow:inset 0 1px #ffffff57,0 8px 16px #9f66482e}.edge-button.is-moon:before{background:linear-gradient(180deg,#89a9bc 0%,var(--moon-tone) 100%);box-shadow:inset 0 1px #ffffff57,0 8px 16px #4664772e}.edge-button.is-last-move{transform:scale(1.02)}.edge-button:disabled{cursor:default}@media(orientation:landscape)and (min-width:960px){.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}.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}.message{justify-content:flex-start}.board-stage{width:min(100%,calc(100dvh - 180px),640px)}}@media(max-width:960px){.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 - 404px),620px)}}@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}.board-stage{width:min(100%,calc(100dvh - 452px),560px)}}@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}.player-pill{flex:1 1 0;justify-content:center;padding:7px 12px}.player-pill-copy strong{font-size:.9rem}.player-pill-copy small{font-size:.74rem}.player-pill-mark,.status-badge-mark{width:24px}.player-pill-mark:after,.status-badge-mark:after{width:10px}.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;padding:14px}.box-cell{margin:4px;border-radius:18px}.board-stage{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.restart-button,.ghost-button,.edge-button{transition-duration:0ms}*,*:before,*:after{animation-duration:0ms}}