:root{--color-paper: oklch(96% .015 195);--color-paper-2: oklch(93% .016 195);--color-paper-3: oklch(89% .016 195);--color-rule: oklch(82% .014 195);--color-rule-2: oklch(88% .014 195);--color-muted: oklch(46% .012 195);--color-ink: oklch(22% .014 195);--color-ink-2: oklch(38% .014 195);--color-accent: oklch(46% .16 195);--color-accent-2: oklch(58% .16 350);--color-accent-3: oklch(56% .14 145);--color-accent-ink: oklch(96% .015 195);--color-focus: oklch(50% .19 195);--color-accent-tint: color-mix(in srgb, var(--color-accent) 12%, transparent);--color-accent-tint-2: color-mix(in srgb, var(--color-accent-2) 12%, transparent);--color-accent-tint-3: color-mix(in srgb, var(--color-accent-3) 12%, transparent);--color-accent-tint-strong: color-mix(in srgb, var(--color-accent) 30%, transparent);--color-active-glow: color-mix(in srgb, var(--color-accent) 35%, transparent);--color-active-glow-2: color-mix(in srgb, var(--color-accent-2) 35%, transparent);--color-active-glow-3: color-mix(in srgb, var(--color-accent-3) 35%, transparent);--color-win: oklch(72% .13 75);--color-win-tint: color-mix(in srgb, var(--color-win) 14%, var(--color-paper));--font-display: "Newsreader", ui-serif, Georgia, serif;--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;--font-outlier: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;--text-xs: .64rem;--text-sm: .8rem;--text-base: 1rem;--text-md: 1.25rem;--text-lg: 1.5625rem;--text-xl: 1.9531rem;--text-2xl: 2.4414rem;--text-display: clamp(2.25rem, 4.6vw + .6rem, 4.5rem);--text-display-s: clamp(1.75rem, 3.4vw + .5rem, 3.25rem);--track-tight: -.022em;--track-display: -.018em;--track-cap: .08em;--measure: 64ch;--measure-narrow: 48ch;--space-3xs: .25rem;--space-2xs: .5rem;--space-xs: .75rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4.5rem;--space-3xl: 7rem;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-short: .18s;--dur-medium: .32s;--shadow-rule: 0 1px 0 var(--color-rule);--shadow-soft: 0 1px 2px color-mix(in srgb, var(--color-ink) 6%, transparent);--shadow-rise: 0 4px 18px color-mix(in srgb, var(--color-ink) 8%, transparent);--hit-min: 44px;--rule-weight: 1px;--bg: var(--color-paper);--card-bg: var(--color-paper-2);--fg: var(--color-ink);--muted: var(--color-muted);--border: var(--color-rule);--panel-radius: var(--radius-md);--lb-radius: var(--radius-md);--gap-outer: var(--space-2xs);--gap-inner: 4px;--radius: var(--radius-sm);--lb-bg: var(--color-paper);--lb-bg-done: var(--color-paper-2);--cell-bg: var(--color-paper);--cell-hover: var(--color-paper-2);--cell-bg-pressed: var(--color-paper-3);--lb-border: var(--color-rule);--lb-border-active: var(--color-accent);--lb-glow: var(--color-active-glow);--accent-x: var(--color-accent);--accent-x-glow: var(--color-active-glow);--accent-o: var(--color-accent-2);--accent-o-glow: var(--color-active-glow-2);--accent-t: var(--color-accent-3);--accent-t-glow: var(--color-active-glow-3);--accent-y: var(--color-win);--win-bg: var(--color-win-tint);--font: var(--font-body)}:root[data-theme=dark]{--color-paper: oklch(14% .012 195);--color-paper-2: oklch(18% .014 195);--color-paper-3: oklch(23% .014 195);--color-rule: oklch(30% .012 195);--color-rule-2: oklch(24% .012 195);--color-muted: oklch(64% .01 195);--color-ink: oklch(92% .01 195);--color-ink-2: oklch(72% .01 195);--color-accent: oklch(72% .16 195);--color-accent-2: oklch(78% .16 350);--color-accent-3: oklch(76% .13 145);--color-accent-ink: oklch(14% .012 195);--color-focus: oklch(78% .19 195);--color-active-glow: color-mix(in srgb, var(--color-accent) 45%, transparent);--color-active-glow-2: color-mix(in srgb, var(--color-accent-2) 45%, transparent);--color-active-glow-3: color-mix(in srgb, var(--color-accent-3) 45%, transparent);--color-win-tint: color-mix(in srgb, var(--color-win) 18%, var(--color-paper));--color-accent-tint: color-mix(in srgb, var(--color-accent) 18%, transparent);--color-accent-tint-2: color-mix(in srgb, var(--color-accent-2) 18%, transparent);--color-accent-tint-3: color-mix(in srgb, var(--color-accent-3) 18%, transparent);--color-accent-tint-strong: color-mix(in srgb, var(--color-accent) 32%, transparent);--shadow-rise: 0 4px 18px color-mix(in srgb, var(--color-ink) 30%, transparent);--cell-bg-pressed: var(--color-paper-3)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--color-paper: oklch(14% .012 195);--color-paper-2: oklch(18% .014 195);--color-paper-3: oklch(23% .014 195);--color-rule: oklch(30% .012 195);--color-rule-2: oklch(24% .012 195);--color-muted: oklch(64% .01 195);--color-ink: oklch(92% .01 195);--color-ink-2: oklch(72% .01 195);--color-accent: oklch(72% .16 195);--color-accent-2: oklch(78% .16 350);--color-accent-3: oklch(76% .13 145);--color-accent-ink: oklch(14% .012 195);--color-focus: oklch(78% .19 195);--color-active-glow: color-mix(in srgb, var(--color-accent) 45%, transparent);--color-active-glow-2: color-mix(in srgb, var(--color-accent-2) 45%, transparent);--color-active-glow-3: color-mix(in srgb, var(--color-accent-3) 45%, transparent);--color-win-tint: color-mix(in srgb, var(--color-win) 18%, var(--color-paper));--color-accent-tint: color-mix(in srgb, var(--color-accent) 18%, transparent);--color-accent-tint-2: color-mix(in srgb, var(--color-accent-2) 18%, transparent);--color-accent-tint-3: color-mix(in srgb, var(--color-accent-3) 18%, transparent);--color-accent-tint-strong: color-mix(in srgb, var(--color-accent) 32%, transparent);--shadow-rise: 0 4px 18px color-mix(in srgb, var(--color-ink) 30%, transparent);--cell-bg-pressed: var(--color-paper-3)}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;min-height:100%;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:16px;line-height:1.55;font-feature-settings:"kern","liga","calt","ss01";overscroll-behavior:contain;overflow-x:clip}body{font-weight:400;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}:root[data-theme=dark] body{font-weight:500}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) body{font-weight:500}}.app{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-lg);width:100%;max-width:var(--measure);margin:0 auto;padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,1.75rem) clamp(2.5rem,6vw,4rem);min-height:100dvh}.screen{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-lg)}.screen-lobby{max-width:64rem;margin:0 auto;width:100%}.app-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-md);width:100%;padding-bottom:var(--space-md);border-bottom:var(--rule-weight) solid var(--color-rule)}.app-header:after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--space-md) - 4px);border-bottom:var(--rule-weight) solid var(--color-rule-2)}.header-left{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-sm);min-width:0}.header-center{display:flex;align-items:center;justify-content:center;min-width:0}.header-right{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-xs);min-width:0}.header-logo{display:flex;align-items:center;justify-content:center;margin:0}.header-back-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--color-muted);font:inherit;font-size:.95rem;font-weight:500;padding:.5rem 0;cursor:pointer;letter-spacing:.01em;min-height:var(--hit-min);min-width:var(--hit-min);transition:color var(--dur-short) var(--ease-out)}.header-back-btn:hover,.header-back-btn:focus-visible{color:var(--color-ink)}.header-back-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}.header-back-btn:active{color:var(--color-accent)}.header-icon-btn{width:var(--hit-min);height:var(--hit-min);flex:0 0 var(--hit-min);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-rule);border-radius:999px;color:var(--color-muted);cursor:pointer;font:inherit;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}.header-icon-btn:hover{color:var(--color-ink);border-color:var(--color-ink)}.header-icon-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;color:var(--color-ink);border-color:var(--color-ink)}.header-icon-btn:active{color:var(--color-accent);border-color:var(--color-accent)}.header-icon-btn svg{width:18px;height:18px}.memo-status{grid-column:1 / -1;margin:0;font-family:var(--font-display);font-size:clamp(1.4rem,1.6vw + .5rem,1.85rem);font-weight:500;font-style:normal;line-height:1.18;letter-spacing:var(--track-display);color:var(--color-ink);min-height:2lh}.memo-status.win{font-weight:600;color:var(--color-accent)}.memo-status.draw{color:var(--color-muted)}.memo-status .turn-dot{display:inline-block;width:.55em;height:.55em;margin-right:.4em;border-radius:50%;vertical-align:middle;border:1px solid currentColor;background:var(--color-accent);opacity:.85}.memo-status .turn-dot.mark-x{background:var(--color-accent)}.memo-status .turn-dot.mark-o{background:var(--color-accent-2);border-color:var(--color-accent-2)}.memo-status .turn-dot.mark-t{background:var(--color-accent-3);border-color:var(--color-accent-3)}.memo-status .thinking-hint{display:inline-block;margin-left:.5ch;font-family:var(--font-outlier);font-size:.55em;font-weight:400;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);vertical-align:middle}.memo-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-2xs) var(--space-md);margin:var(--space-2xs) 0 0;padding-top:var(--space-2xs);font-family:var(--font-outlier);font-size:.85rem;color:var(--color-muted);font-variant-numeric:tabular-nums}.memo-meta .meta-cell{display:inline-flex;align-items:baseline;gap:.5ch}.memo-meta .meta-key{text-transform:uppercase;letter-spacing:var(--track-cap)}.memo-meta .meta-val{color:var(--color-ink-2)}.memo-meta .meta-val.is-emph{color:var(--color-accent)}.memo-meta .meta-sep{color:var(--color-rule);margin:0 .25ch}.memo-meta .score-x{color:var(--color-accent);font-weight:500}.memo-meta .score-o{color:var(--color-accent-2);font-weight:500}.memo-meta .score-t{color:var(--color-accent-3);font-weight:500}.memo-meta .score-draw{color:var(--color-muted);font-weight:500}.score-strip{margin:var(--space-xs) 0 0;font-family:var(--font-body);font-size:.9rem;color:var(--color-ink-2);display:flex;align-items:center;flex-wrap:wrap;gap:.5rem var(--space-sm);font-variant-numeric:tabular-nums}.score-strip-label{color:var(--color-muted);font-weight:500;letter-spacing:.01em}.score-strip .score-x{color:var(--color-accent);font-weight:600}.score-strip .score-o{color:var(--color-accent-2);font-weight:600}.score-strip .score-t{color:var(--color-accent-3);font-weight:600}.score-strip .score-draw{color:var(--color-muted);font-weight:600}.score-strip .score-sep{color:var(--color-rule)}.score-reset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--color-rule);color:var(--color-muted);border-radius:999px;padding:0;margin-left:.25rem;font:inherit;font-size:.85rem;line-height:1;cursor:pointer;transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);display:inline-flex;align-items:center;justify-content:center;width:var(--hit-min);height:var(--hit-min);flex:0 0 var(--hit-min)}.score-reset:hover{color:var(--color-ink);border-color:var(--color-ink)}.score-reset:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;color:var(--color-ink)}.score-reset:active{color:var(--color-accent);border-color:var(--color-accent)}.memo{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);width:100%;text-align:center}.memo-eyebrow{margin:0;font-family:var(--font-outlier);font-size:.78rem;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted)}.memo-title{margin:0;font-family:var(--font-display);font-size:var(--text-display);font-weight:500;font-style:normal;line-height:1.04;letter-spacing:var(--track-tight);color:var(--color-ink);max-width:14ch}.memo-lede{margin:0;max-width:var(--measure);font-family:var(--font-body);font-size:var(--text-md);line-height:1.65;color:var(--color-ink-2)}.memo-rules{margin:0;padding:var(--space-md) 0 0;border-top:1px solid var(--color-rule);display:grid;gap:var(--space-sm);font-family:var(--font-body);font-size:.98rem;line-height:1.6;color:var(--color-ink-2)}.memo-rules dt{font-family:var(--font-outlier);font-size:.72rem;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);margin:0 0 .2rem;display:block}.memo-rules dd{margin:0;color:var(--color-ink)}.mode-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm);width:100%;max-width:56rem;border-top:0}@media (max-width: 48rem){.mode-steps{grid-template-columns:1fr}}.mode-step{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-xs);row-gap:var(--space-2xs);background:var(--color-paper);border:1px solid var(--color-rule);border-bottom-width:1px;border-radius:var(--radius-md);padding:var(--space-md);font:inherit;text-align:left;color:var(--color-ink-2);cursor:pointer;min-height:calc(var(--hit-min) * 3);transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}.mode-step:hover,.mode-step:focus-visible{color:var(--color-ink);border-color:var(--color-ink)}.mode-step:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.mode-step:active{transform:translateY(1px)}.mode-step.is-active{color:var(--color-ink);border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent) inset}.mode-step.is-active .mode-step-arrow{color:var(--color-accent);transform:translate(2px)}.mode-step-num{display:none}.mode-step-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}.mode-step-title{font-family:var(--font-display);font-size:clamp(1.25rem,1.4vw + .7rem,1.55rem);font-weight:500;font-style:normal;line-height:1.18;letter-spacing:var(--track-tight);color:inherit}.mode-step-note{font-family:var(--font-body);font-size:.92rem;line-height:1.5;color:var(--color-muted)}.mode-step-arrow{font-family:var(--font-body);font-size:1.25rem;line-height:1;color:var(--color-rule);align-self:center;padding-right:.25rem;transition:color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}.sub-picker{position:relative;padding:var(--space-xs) 0 var(--space-md) calc(3ch + var(--space-md));display:flex;flex-direction:column;gap:var(--space-xs);border-bottom:1px solid var(--color-rule-2);margin:0}.sub-picker:before{content:"";position:absolute;left:3ch;top:var(--space-xs);bottom:var(--space-md);width:2px;background:var(--color-accent);opacity:.7}.sub-picker:last-child{border-bottom-color:var(--color-rule)}.sub-picker-label{font-family:var(--font-outlier);font-size:.72rem;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);margin:0}.sub-picker-row{display:flex;gap:.4rem;flex-wrap:wrap}.sub-pick{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--color-rule);color:var(--color-ink-2);font:inherit;font-size:.88rem;font-weight:500;padding:.55rem 1rem;border-radius:999px;cursor:pointer;min-height:var(--hit-min);transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.sub-pick:hover{color:var(--color-ink);border-color:var(--color-ink)}.sub-pick:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.sub-pick.is-active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.lobby-cta-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding-top:var(--space-xs);border-top:0;flex-wrap:wrap;width:100%;max-width:56rem}.lobby-cta{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-bottom:1px solid transparent;padding:.5rem 0;font:inherit;font-family:var(--font-display);font-style:normal;font-size:clamp(1.25rem,1.4vw + .8rem,1.85rem);font-weight:500;letter-spacing:var(--track-tight);color:var(--color-ink);cursor:pointer;min-height:var(--hit-min);white-space:nowrap;transition:color var(--dur-short) var(--ease-out),border-bottom-color var(--dur-short) var(--ease-out)}.lobby-cta:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}.lobby-cta:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}.lobby-cta:active{color:var(--color-accent)}.lobby-cta-hint{font-family:var(--font-outlier);font-size:.78rem;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);text-align:right;white-space:nowrap}.lobby-cta-counter{font-family:var(--font-outlier);font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--color-muted);text-align:right;white-space:nowrap}@media (max-width: 28rem){.lobby-cta-hint,.lobby-cta-counter{width:100%;text-align:left}}.online-lobby{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-md);width:100%}.online-conn-status{margin:0;font-family:var(--font-outlier);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);display:flex;align-items:center;gap:.5ch}.online-conn-status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-accent-3);opacity:.6}.online-conn-status.connecting:before{background:var(--color-win);animation:pulse-soft 1.5s ease-in-out infinite alternate}.online-conn-status.disconnected:before{background:var(--color-accent-2);opacity:.85}@keyframes pulse-soft{0%{opacity:.35}to{opacity:1}}.online-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--rule-weight) var(--space-md);width:100%;border-top:1px solid var(--color-rule)}@media (max-width: 36rem){.online-actions{grid-template-columns:1fr}}.online-actions .mode-step{border-bottom:1px solid var(--color-rule-2)}.online-waiting-text{margin:0;font-family:var(--font-display);font-style:normal;font-size:clamp(1.4rem,1.6vw + .8rem,1.85rem);font-weight:500;letter-spacing:var(--track-tight);color:var(--color-ink);line-height:1.18}.online-link-box{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-xs);padding:var(--space-md);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md)}.online-room-link{word-break:break-all;font-family:var(--font-outlier);font-size:.95rem;color:var(--color-ink);background:transparent;padding:0;border-radius:0;border:none;-webkit-user-select:all;user-select:all}.online-btn-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.online-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-bottom:1px solid transparent;padding:.4rem 0;font:inherit;font-size:.95rem;font-weight:500;color:var(--color-ink-2);cursor:pointer;min-height:var(--hit-min);display:inline-flex;align-items:center;gap:.45rem;transition:color var(--dur-short) var(--ease-out),border-bottom-color var(--dur-short) var(--ease-out)}.online-btn:hover:not(:disabled){color:var(--color-accent);border-bottom-color:var(--color-accent)}.online-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}.online-btn svg{width:16px;height:16px}.online-btn-hint{font-family:var(--font-outlier);font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:var(--track-cap);padding:.15rem .4rem;border-radius:999px;background:var(--color-paper-3);color:var(--color-muted);white-space:nowrap}.online-btn:disabled{cursor:not-allowed;opacity:.45}.online-btn-primary{color:var(--color-ink)}.online-back-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--hit-min);padding:.4rem 0;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--color-muted);font:inherit;cursor:pointer;transition:color var(--dur-short) var(--ease-out),border-bottom-color var(--dur-short) var(--ease-out)}.online-back-btn:hover{color:var(--color-ink);border-bottom-color:var(--color-rule)}.online-back-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}.online-role-note,.online-opponent-disconnected{margin:0;color:var(--color-muted)}.online-opponent-disconnected{color:var(--color-accent-2)}.online-overlay{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md);width:100%}.online-overlay-msg{margin:0 0 var(--space-md);font-family:var(--font-display);font-style:normal;font-size:1.45rem;font-weight:500;letter-spacing:var(--track-tight);color:var(--color-ink);line-height:1.22}.board-stage{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-xs);width:100%}.board-overview-btn{position:sticky;top:calc(env(safe-area-inset-top) + var(--space-2xs));z-index:20;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-paper);border:1px solid var(--color-rule);padding:.45rem var(--space-xs);font:inherit;font-family:var(--font-outlier);font-size:.78rem;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);cursor:pointer;min-height:var(--hit-min);align-self:flex-start;box-shadow:var(--shadow-rise);transition:color var(--dur-short) var(--ease-out)}.board-overview-btn:hover{color:var(--color-ink)}.board-overview-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}.uttt-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--gap-outer);width:100%;aspect-ratio:1;max-width:560px;padding:10px;margin:0 auto;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-md)}.lb{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--gap-inner);padding:6px;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-md);transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}.uttt-board:has(.lb-forced) .lb:not(.lb-active):not(.lb-done){opacity:.5}.lb-active{border-color:var(--color-accent)}.lb-forced{border-color:var(--color-accent);border-width:2px;transform:translateY(-1px)}.lb-clickable{cursor:pointer}.lb-clickable.ghost-x{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.lb-clickable.ghost-o{border-color:var(--color-accent-2);box-shadow:0 0 0 1px var(--color-accent-2)}.lb-clickable.ghost-t{border-color:var(--color-accent-3);box-shadow:0 0 0 1px var(--color-accent-3)}.lb-done{background:var(--color-paper-2)}.lb-done-x{border-color:var(--color-accent);opacity:.85}.lb-done-o{border-color:var(--color-accent-2);opacity:.85}.lb-done-t{border-color:var(--color-accent-3);opacity:.85}.lb-done-draw{border-color:var(--color-rule);opacity:.7}.area-board{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));max-width:min(720px,calc(100vw - 2rem));gap:6px;padding:8px}.area-lb{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:2px;padding:4px;border-radius:var(--radius-sm)}.area-split-badge{font-family:var(--font-outlier);font-size:clamp(.7rem,1.6vw,1rem);font-weight:500;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--color-muted)}.lb-winning{border-color:var(--color-win);box-shadow:0 0 0 2px var(--color-win-tint);animation:lb-pulse 1.8s ease-in-out infinite}@keyframes lb-pulse{0%,to{transform:translateY(-1px)}50%{transform:translateY(-2px)}}.lb-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:5;padding:15%;background:color-mix(in srgb,var(--color-paper) 70%,transparent);border-radius:calc(var(--radius-md) - 2px);animation:badge-fade-in .45s var(--ease-out) forwards}@keyframes badge-fade-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.lb-badge svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--color-ink) 15%,transparent))}.lb-badge.area-badge{top:10%;right:10%;bottom:10%;left:10%;z-index:2;padding:24%;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}.area-lb-decided:not(.area-lb-full) .lb-badge.area-badge{opacity:.18}.uttt-cell{position:relative;z-index:1;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:10%;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);user-select:none;-webkit-user-select:none;min-height:0;min-width:0;aspect-ratio:1}.uttt-cell:disabled{cursor:default}.uttt-cell svg{width:100%;height:100%}.mark-x{color:var(--color-accent)}.mark-o{color:var(--color-accent-2)}.mark-t{color:var(--color-accent-3)}.mark-draw{color:var(--color-muted)}.path-x,.path-o,.path-draw,.path-t{stroke-dasharray:100;stroke-dashoffset:100;animation:draw-path .45s cubic-bezier(.4,0,.2,1) forwards}.path-x-2{animation-delay:.15s}@keyframes draw-path{to{stroke-dashoffset:0}}.uttt-cell.last{background:var(--color-paper-2);border-color:var(--color-accent)}.uttt-cell.hint{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-tint);animation:hint-pulse 1.5s ease-in-out infinite}@keyframes hint-pulse{0%,to{box-shadow:0 0 0 1px var(--color-accent-tint)}50%{box-shadow:0 0 0 4px var(--color-accent-tint)}}.uttt-cell.hint:after{content:"?";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600;font-family:var(--font-display);font-style:normal;color:var(--color-accent);pointer-events:none;opacity:.7}.hint-btn.active{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}.hint-explanation{width:100%;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--color-ink-2);font-size:.92rem;line-height:1.55}.hint-explanation strong{display:block;margin-bottom:var(--space-2xs);font-family:var(--font-display);font-style:normal;font-size:1.05rem;font-weight:500;color:var(--color-ink)}.hint-explanation ul{margin:0;padding-left:1.1rem}.hint-explanation li+li{margin-top:.2rem}.uttt-cell.focused{outline:2px solid var(--color-focus);outline-offset:-1px;animation:cell-focus 1.5s ease-in-out infinite}@keyframes cell-focus{0%,to{box-shadow:0 0 0 1px var(--color-accent)}50%{box-shadow:0 0 0 3px var(--color-accent-tint)}}.uttt-board:focus{outline:none}.uttt-board:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}.lb-clickable .uttt-cell:not(:disabled):active{background:var(--color-paper-3)}@media (hover: hover){.lb-clickable .uttt-cell:not(:disabled):hover{background:var(--color-paper-2);border-color:var(--color-accent)}.lb-clickable.ghost-x .uttt-cell:not(:disabled):empty:hover:after{content:"";position:absolute;top:30%;right:30%;bottom:30%;left:30%;border-radius:2px;background:var(--color-accent);opacity:.18}.lb-clickable.ghost-o .uttt-cell:not(:disabled):empty:hover:after{content:"";position:absolute;top:30%;right:30%;bottom:30%;left:30%;border-radius:50%;border:3px solid var(--color-accent-2);opacity:.22}}.uttt-controls{display:flex;flex-direction:column;gap:var(--space-sm);width:100%}.action-row{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);padding:var(--space-sm) 0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule)}.mobile-zoom-setting{display:none}@media (max-width: 30rem){.mobile-zoom-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:var(--hit-min);padding:var(--space-xs) 0;border-top:1px solid var(--color-rule-2);border-bottom:1px solid var(--color-rule-2);color:var(--color-ink-2);font-size:.9rem;cursor:pointer}.mobile-zoom-setting input{width:var(--hit-min);height:var(--hit-min);margin:0;accent-color:var(--color-accent);flex:0 0 auto}.mobile-zoom-setting:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}}.reset-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-bottom:1px solid transparent;padding:.5rem 0;font:inherit;font-size:.98rem;font-weight:500;color:var(--color-ink-2);cursor:pointer;min-height:var(--hit-min);display:inline-flex;align-items:center;gap:.5rem;transition:color var(--dur-short) var(--ease-out),border-bottom-color var(--dur-short) var(--ease-out)}.reset-btn:hover:not(:disabled){color:var(--color-ink);border-bottom-color:var(--color-ink)}.reset-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}.reset-btn:active:not(:disabled){color:var(--color-accent);border-bottom-color:var(--color-accent)}.reset-btn:disabled{opacity:.4;cursor:not-allowed}.reset-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}.legend{width:100%;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:.95rem;color:var(--color-ink-2)}.legend summary{cursor:pointer;font-family:var(--font-outlier);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);padding:.25rem 0;outline:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:var(--hit-min)}.legend summary::-webkit-details-marker{display:none}.legend summary:after{content:"+";font-family:var(--font-body);font-size:1rem;color:var(--color-muted)}.legend[open] summary:after{content:"−"}.legend dl{margin:var(--space-sm) 0 0;display:grid;gap:var(--space-sm)}.legend dl>div{display:grid;grid-template-columns:8rem minmax(0,1fr);column-gap:var(--space-md);line-height:1.55;border-top:1px dashed var(--color-rule);padding-top:var(--space-xs)}.legend dt{font-family:var(--font-outlier);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted);margin:0}.legend dd{margin:0}.legend code{background:var(--color-paper-3);color:var(--color-ink);padding:.1rem .35rem;border-radius:var(--radius-sm);font-family:var(--font-outlier);font-size:.85em}@media (max-width: 32rem){.legend dl>div{grid-template-columns:1fr;row-gap:.1rem}}.chat-panel{margin:var(--space-sm) 0 0;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:.9rem}.chat-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:var(--space-xs)}.chat-title{margin:0;font-family:var(--font-outlier);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--color-muted)}.chat-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-rule);background:transparent;color:var(--color-ink-2);border-radius:999px;padding:.2rem .7rem;font-family:var(--font-outlier);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);cursor:pointer;min-height:var(--hit-min);transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}.chat-toggle:hover{color:var(--color-ink);border-color:var(--color-ink)}.chat-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.chat-log{max-height:200px;overflow-y:auto;padding:var(--space-2xs) 0;display:flex;flex-direction:column;gap:.25rem;font-size:.88rem}.chat-empty{color:var(--color-muted);font-family:var(--font-body);font-size:.85rem;margin:.25rem 0}.chat-line{display:flex;gap:.4rem;align-items:baseline}.chat-line-system{font-style:italic;opacity:.85}.chat-meta{display:flex;gap:.3rem;flex-shrink:0}.chat-time{color:var(--color-muted);font-family:var(--font-outlier);font-size:.72rem;min-width:2.4em}.chat-sender{font-weight:600;font-size:.82rem}.chat-text{word-break:break-word}.chat-error{margin:var(--space-xs) 0 0;padding:var(--space-xs) var(--space-sm);background:color-mix(in srgb,var(--color-accent-2) 12%,var(--color-paper));color:var(--color-accent-2);border-radius:var(--radius-sm);font-size:.85rem}.chat-input-row{display:flex;gap:.4rem;margin-top:var(--space-xs)}.chat-input{flex:1 1 auto;min-width:0;min-height:var(--hit-min);background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:.5rem .75rem;font:inherit;font-size:.95rem}.chat-input:focus{outline:2px solid var(--color-focus);outline-offset:-1px;border-color:transparent}.chat-send{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;min-height:var(--hit-min);transition:opacity var(--dur-short) var(--ease-out)}.chat-send:hover{opacity:.88}.chat-send:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.chat-send:disabled{opacity:.4;cursor:not-allowed}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--color-paper) 40%,transparent);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-md);animation:tutorial-fade-in .18s var(--ease-out)}@keyframes tutorial-fade-in{0%{opacity:0}to{opacity:1}}.tutorial-card{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-lg) var(--space-md) var(--space-md);max-width:380px;width:100%;box-shadow:var(--shadow-rise);animation:tutorial-rise .25s var(--ease-out)}@keyframes tutorial-rise{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-progress{display:flex;gap:.4rem;justify-content:center;margin-bottom:var(--space-md)}.tutorial-dot{width:6px;height:6px;border-radius:50%;background:var(--color-rule);transition:background-color var(--dur-short) var(--ease-out)}.tutorial-dot.active{background:var(--color-accent)}.tutorial-dot.done{background:var(--color-accent);opacity:.4}.tutorial-title{margin:0 0 var(--space-xs);font-family:var(--font-display);font-style:normal;font-size:1.35rem;font-weight:500;letter-spacing:var(--track-tight);text-align:center;color:var(--color-ink)}.tutorial-body{margin:0 0 var(--space-md);font-family:var(--font-body);font-size:.95rem;line-height:1.55;color:var(--color-ink-2);text-align:center}.tutorial-visual{display:flex;justify-content:center;margin:0 0 var(--space-md);color:var(--color-accent);min-height:80px;align-items:center}.tutorial-svg{max-width:100%;max-height:80px}.tutorial-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.tutorial-nav{display:flex;gap:.4rem}.tutorial-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-rule);background:transparent;color:var(--color-ink-2);border-radius:999px;padding:.4rem .9rem;font:inherit;font-family:var(--font-outlier);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);cursor:pointer;min-height:var(--hit-min);transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}.tutorial-btn:hover{color:var(--color-ink);border-color:var(--color-ink)}.tutorial-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.tutorial-btn:disabled{opacity:.35;cursor:default}.tutorial-btn-next{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.tutorial-btn-next:hover{opacity:.9}.tutorial-btn-next:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.legal-footer{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--color-rule);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--space-sm);font-family:var(--font-outlier);font-size:.78rem;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--color-muted)}.legal-footer a{display:inline-flex;min-height:44px;padding-inline:var(--space-xs);align-items:center;color:var(--color-ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--dur-short) var(--ease-out),border-bottom-color var(--dur-short) var(--ease-out)}.legal-footer a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}.legal-footer a:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}.legal-footer .sep{color:var(--color-rule)}@media (max-width: 30rem){.compact-board-picker .lb{overflow:hidden}.lb-zoom-trigger{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:flex;align-items:flex-end;justify-content:center;border:0;border-radius:inherit;padding:.25rem;background:color-mix(in srgb,var(--color-paper) 18%,transparent);color:var(--color-ink);font-family:var(--font-outlier);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--track-cap);cursor:pointer}.lb-zoom-trigger:disabled{cursor:default;opacity:.55}.compact-board-focused,.area-board.compact-board-focused{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}.compact-board-focused .lb-compact-hidden{display:none}.compact-board-focused .lb{padding:10px;transform:none;animation:board-zoom-in .3s var(--ease-out)}.compact-board-focused .area-lb{gap:6px}.compact-board-focused.board-zoom-leaving{animation:board-zoom-leave .3s var(--ease-in) forwards}.compact-board-picker.board-zoom-entering{animation:board-zoom-enter .35s var(--ease-out)}@keyframes board-zoom-in{0%{transform:scale(.95);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes board-zoom-leave{0%{transform:scale(1);opacity:1}to{transform:scale(.85);opacity:.2}}@keyframes board-zoom-enter{0%{transform:scale(1.05);opacity:.35}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.compact-board-focused .lb,.compact-board-focused.board-zoom-leaving,.compact-board-picker.board-zoom-entering{animation:none}}:root{--gap-outer: 6px;--gap-inner: 3px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}