:root { color-scheme: dark; --canvas: #121713; --surface: #1c241f; --surface-subtle: #273029; --surface-strong: #0d120f; --ink: #f0f2eb; --ink-muted: #9ba69d; --line: #313c34; --line-strong: #526057; --accent: #78a784; --accent-hover: #8ab896; --accent-soft: #26372c; --accent-ink: #dff0e2; --on-accent: #101712; --danger: #e37a70; --danger-fill: #963f38; --danger-soft: #3b2522; --board-light: #e7ddc6; --board-dark: #6f8b72; --focus: #75c7ee; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.28); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); scrollbar-gutter: stable; }
body { min-height: 100vh; min-height: 100svh; margin: 0; color: var(--ink); background: radial-gradient(circle at 26% 12%, rgba(89, 124, 97, 0.14), transparent 30rem), var(--canvas); line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
::selection { color: var(--on-accent); background: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: 0; }
.shell { width: min(calc(100% - 1rem), 72rem); margin-inline: auto; }
.site-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header > p { display: none; margin: 0; color: var(--ink-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wordmark { min-height: 44px; display: inline-flex; align-items: center; gap: 0.68rem; color: var(--ink); font-size: 1.08rem; font-weight: 830; letter-spacing: -0.035em; line-height: 1; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; display: block; flex: 0 0 auto; border-radius: 10px; box-shadow: 0 1px 2px rgba(24, 33, 27, 0.12); }
.brand-name { translate: 0 -0.02em; }
.site-footer { color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface); font-size: 0.7rem; }
.site-footer-inner { min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 1rem; padding-block: 0.8rem; }
.site-footer p { margin: 0; }
.footer-brand { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; gap: 0.52rem; color: var(--ink); font-size: 0.84rem; font-weight: 820; letter-spacing: -0.025em; text-decoration: none; }
.footer-mark { width: 26px; height: 26px; display: block; flex: 0 0 auto; border-radius: 7px; }
.footer-promise { grid-column: 1 / -1; grid-row: 2; line-height: 1.35; }
.footer-promise span { margin-inline: 0.28rem; color: var(--line-strong); }
.footer-meta { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; }
.eyebrow, .section-label, .step, .system-label { margin-bottom: 0.65rem; color: var(--accent); font-size: 0.7rem; font-weight: 820; letter-spacing: 0.12em; text-transform: uppercase; }
.hero { min-height: calc(100svh - 137px); display: grid; gap: 2rem; align-items: center; padding-block: 2rem 3rem; }
.hero-copy { min-width: 0; }
.hero h1 { max-width: 10ch; margin-bottom: 1rem; font-size: clamp(2.8rem, 13vw, 5.25rem); font-weight: 760; letter-spacing: -0.07em; line-height: 0.94; }
.lede { max-width: 34rem; margin-bottom: 0; color: var(--ink-muted); font-size: clamp(0.96rem, 4vw, 1.1rem); line-height: 1.6; }
.trust-row { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-top: 1.25rem; color: var(--ink-muted); font-size: 0.72rem; font-weight: 680; }
.trust-row span { display: inline-flex; align-items: center; gap: 0.4rem; }
.trust-row b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent); border-radius: 50%; background: var(--accent-soft); font-size: 0.65rem; }
.create-card-wrap { width: min(100%, 30.5rem); min-width: 0; margin-inline: auto; }
.create-card-wrap:focus-visible { outline: 0; }
.create-card { padding: clamp(1.1rem, 4vw, 1.55rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.card-heading { margin-bottom: 1rem; }
.card-heading h2 { margin: 0 0 0.2rem; font-size: clamp(1.55rem, 7vw, 1.9rem); font-weight: 760; letter-spacing: -0.045em; line-height: 1.08; }
.card-heading p { margin: 0; color: var(--ink-muted); font-size: 0.8rem; }
.interactivity-gate, .field { min-width: 0; margin: 0; padding: 0; border: 0; }
.interactivity-gate[disabled] { opacity: 0.72; }
.create-card .client-loading { margin: 0 0 1rem; color: var(--accent); font-size: 0.74rem; font-weight: 760; }
.field { margin-bottom: 0.85rem; }
.field.compact { margin-bottom: 0.85rem; }
.field label, .field legend, .claim-card label { display: block; margin-bottom: 0.45rem; color: var(--ink); font-size: 0.72rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; }
.field label span, .claim-card label span { color: var(--ink-muted); font-size: 0.64rem; font-weight: 600; }
.field input, .claim-card input { width: 100%; min-height: 44px; padding: 0.62rem 0.75rem; color: var(--ink); border: 1px solid transparent; border-radius: 9px; outline: 0; background: var(--surface-subtle); transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.field input::placeholder, .claim-card input::placeholder { color: var(--ink-muted); }
.field input:focus, .claim-card input:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.choice-grid button { min-height: 52px; display: grid; align-content: center; gap: 0.08rem; padding: 0.5rem 0.6rem; color: var(--ink-muted); border: 1px solid transparent; border-radius: 9px; background: var(--surface-subtle); text-align: left; }
.choice-grid button strong { color: var(--ink); font-size: 0.76rem; }
.choice-grid button span { font-size: 0.62rem; }
.choice-grid button.selected { color: var(--on-accent); background: var(--accent); }
.choice-grid button.selected strong { color: var(--on-accent); }
.preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.preset:first-child { grid-column: span 2; }
.preset, .color-choice button { min-height: 46px; padding: 0.45rem; color: var(--ink-muted); border: 1px solid transparent; border-radius: 9px; background: var(--surface-subtle); cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.preset strong, .preset span { display: block; }
.preset strong { color: var(--ink); font-size: 0.78rem; font-weight: 780; }
.preset span { margin-top: 0.12rem; font-size: 0.62rem; }
.preset.selected, .color-choice button.selected { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.preset.selected strong { color: var(--on-accent); }
.time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.unit-input { position: relative; }
.unit-input input { padding-right: 2.9rem; }
.unit-input span { position: absolute; top: 50%; right: 0.8rem; translate: 0 -50%; color: var(--ink-muted); font-size: 0.7rem; }
.color-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.color-choice button { min-height: 52px; display: grid; place-items: center; align-content: center; gap: 0.08rem; padding-inline: 0.2rem; font-size: 0.78rem; font-weight: 650; line-height: 1.05; }
.color-choice button span { font-size: 0.84rem; }
.create-button, .primary-action, .system-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.7rem 1rem; color: var(--on-accent); border: 0; border-radius: 10px; background: var(--accent); font-weight: 800; text-decoration: none; cursor: pointer; transition: background 140ms ease, translate 140ms ease; }
.create-button, .primary-action { width: 100%; justify-content: space-between; }
.create-button:disabled, .primary-action:disabled { opacity: 0.64; }
.privacy-note, .privacy { margin: 0.6rem 0 0; color: var(--ink-muted); font-size: 0.66rem; text-align: center; }
.privacy-note span, .privacy span { color: var(--accent); }
.validation-message, .field-error, .submit-error, .room-error { color: var(--danger); font-size: 0.78rem; line-height: 1.45; }
.submit-error, .room-error { margin: 0.75rem 0 0; }
.spinner { width: 17px; height: 17px; border: 2px solid rgba(16, 23, 18, 0.28); border-top-color: var(--on-accent); border-radius: 50%; animation: spin 700ms linear infinite; }
.system-page, .room-failure { display: grid; place-items: center; align-content: center; padding-block: 2.5rem; text-align: center; }
.system-page { min-height: calc(100vh - 188px); min-height: calc(100svh - 188px); }
.room-failure { min-height: 100vh; min-height: 100svh; }
.system-card { width: min(100%, 36rem); padding: clamp(1.5rem, 7vw, 3rem); position: relative; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.system-piece { position: absolute; top: -1.5rem; right: 0.5rem; color: var(--accent-soft); font-size: clamp(7rem, 28vw, 11rem); line-height: 1; pointer-events: none; }
.system-card h1 { max-width: 13ch; margin-bottom: 0.75rem; position: relative; font-size: clamp(2.25rem, 11vw, 3.8rem); font-weight: 760; letter-spacing: -0.06em; line-height: 1; }
.system-card > p:not(.system-label, .system-reference) { max-width: 46ch; margin-bottom: 1.35rem; position: relative; color: var(--ink-muted); }
.system-reference { display: grid; gap: 0.25rem; margin-bottom: 1.35rem; color: var(--ink-muted); font-size: 0.76rem; }
.system-reference span { font-weight: 750; }
.system-reference code { overflow-wrap: anywhere; color: var(--ink); }
body:has(.game-page) .site-header, body:has(.game-page) .site-footer { display: none; }
.game-page:has( .game-room > .claim-shell, .game-room > .room-failure, .game-room > .room-shell ) > .game-loading-shell { display: none; }
.game-page > .game-room:has(> .initialization-status) { min-height: 0; }
.game-loading-shell { position: relative; }
.loading-board { width: 100%; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; overflow: hidden; padding: 6px; border: 1px solid #354239; border-radius: 14px; background: linear-gradient(145deg, #202a23, #0c110e); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34); }
.loading-board span.light { background: var(--board-light); }
.loading-board span.dark { background: var(--board-dark); }
.loading-player-strip { color: var(--ink-muted); }
.loading-seat { background: var(--surface-subtle); animation: loading-pulse 1.4s ease-in-out infinite alternate; }
.player-identity .loading-seat::before { content: none; }
.loading-game-panel { min-height: 18rem; }
.loading-move-lines { display: grid; gap: 0.5rem; }
.loading-move-lines span, .loading-actions span { display: block; min-height: 34px; border-radius: 7px; background: var(--surface-subtle); animation: loading-pulse 1.4s ease-in-out infinite alternate; }
.loading-actions span { min-height: 44px; border-radius: 9px; }
.loading-actions .wide { grid-column: 1 / -1; }
.game-room { min-height: 100vh; min-height: 100svh; }
.room-failure > span { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 1rem; color: var(--on-accent); border-radius: 20px; background: var(--accent); font-size: 2.8rem; animation: breathe 1.3s ease-in-out infinite alternate; }
.room-failure h1, .claim-card h1 { margin-bottom: 0.5rem; font-size: clamp(2.2rem, 11vw, 3.8rem); font-weight: 760; letter-spacing: -0.06em; line-height: 1; }
.room-failure p { color: var(--ink-muted); }
.room-failure a { min-height: 46px; display: inline-flex; align-items: center; margin-top: 0.75rem; padding: 0 1rem; color: var(--on-accent); border-radius: 10px; background: var(--accent); font-weight: 800; text-decoration: none; }
.claim-shell { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding-block: 2.5rem; }
.claim-card { width: min(100%, 31rem); margin-inline: auto; padding: clamp(1.35rem, 6vw, 2.25rem); border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.claim-card > p:not(.section-label, .room-error, .privacy) { color: var(--ink-muted); }
.claim-card label { margin-top: 1.35rem; }
.claim-home { width: 100%; justify-content: center; margin-top: 0.4rem; }
.room-shell { width: min(calc(100% - 0.75rem), 70rem); padding-block: clamp(0.5rem, 1.5vw, 0.85rem) 1rem; }
.connection-banner { width: max-content; max-width: min(calc(100vw - 1rem), 32rem); min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0; padding: 0.55rem 0.8rem; position: fixed; z-index: 900; bottom: max(0.75rem, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; color: var(--accent-ink); border: 1px solid rgba(120, 167, 132, 0.34); border-radius: 10px; background: #26372c; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); font-size: 0.72rem; font-weight: 760; line-height: 1.35; text-align: left; pointer-events: none; }
.connection-banner.danger { color: #ffd9d4; border-color: rgba(229, 119, 108, 0.45); background: #502522; }
.pulse, .waiting-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; animation: connection-pulse 900ms ease-in-out infinite alternate; }
.room-header { width: min(100%, 70rem); min-height: 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; margin-inline: auto; padding: 0.35rem 0 0.55rem; }
.room-header h1 { margin: 0; font-size: clamp(1.15rem, 4vw, 1.45rem); font-weight: 780; letter-spacing: -0.035em; line-height: 1.08; }
.room-code { margin: 0.12rem 0 0; color: var(--ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.64rem; }
.room-header-actions, .invite-actions { min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
.room-home { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.75rem; color: var(--ink-muted); border: 1px solid transparent; border-radius: 9px; font-size: 0.72rem; font-weight: 760; text-decoration: none; }
.appearance-trigger { gap: 0.42rem; background: transparent; }
.appearance-trigger-icon, .board-swatch { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; }
.appearance-trigger-icon { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 4px; }
.appearance-trigger-icon i:nth-child(1), .appearance-trigger-icon i:nth-child(4) { background: var(--board-light); }
.appearance-trigger-icon i:nth-child(2), .appearance-trigger-icon i:nth-child(3) { background: var(--board-dark); }
.appearance-panel { width: min(100%, 70rem); display: grid; gap: 0.9rem; margin: 0 auto 0.85rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(28, 36, 31, 0.97); box-shadow: var(--shadow-sm); }
.appearance-panel > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.appearance-panel .section-label { margin-bottom: 0.16rem; font-size: 0.58rem; }
.appearance-panel h2 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.025em; }
.appearance-panel header p:last-child { margin: 0.08rem 0 0; color: var(--ink-muted); font-size: 0.66rem; }
.appearance-close { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; color: var(--ink-muted); border: 0; border-radius: 9px; background: var(--surface-subtle); font-size: 1.2rem; line-height: 1; }
.appearance-options { min-width: 0; display: grid; gap: 0.65rem; }
.appearance-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.appearance-group legend { margin-bottom: 0.35rem; color: var(--ink-muted); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.piece-designs > div, .board-themes > div { display: grid; gap: 0.4rem; }
.piece-designs > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-themes > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piece-designs button, .board-themes button, .shadow-setting button { min-width: 0; min-height: 52px; color: var(--ink-muted); border: 1px solid transparent; border-radius: 9px; background: var(--surface-subtle); }
.piece-designs button, .board-themes button { min-height: 66px; display: grid; place-items: center; align-content: center; gap: 0.2rem; padding: 0.35rem 0.2rem; font-size: 0.68rem; font-weight: 760; }
.piece-designs button.selected, .board-themes button.selected { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.piece-designs img, .piece-designs svg { width: 34px; height: 38px; display: block; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3)); }
.board-swatch { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.board-swatch.forest i:nth-child(1), .board-swatch.forest i:nth-child(4) { background: #e7ddc6; }
.board-swatch.forest i:nth-child(2), .board-swatch.forest i:nth-child(3) { background: #6f8b72; }
.board-swatch.walnut i:nth-child(1), .board-swatch.walnut i:nth-child(4) { background: #c48973; }
.board-swatch.walnut i:nth-child(2), .board-swatch.walnut i:nth-child(3) { background: #9d5e50; }
.board-swatch.graphite i:nth-child(1), .board-swatch.graphite i:nth-child(4) { background: #a1a5a3; }
.board-swatch.graphite i:nth-child(2), .board-swatch.graphite i:nth-child(3) { background: #6a706d; }
.shadow-setting button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.65rem; text-align: left; }
.shadow-setting button > span:first-child { min-width: 0; display: grid; }
.shadow-setting strong { color: var(--ink); font-size: 0.7rem; }
.shadow-setting small { overflow: hidden; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.switch-track { width: 34px; height: 20px; flex: 0 0 auto; padding: 2px; border-radius: 999px; background: var(--line-strong); transition: background 140ms ease; }
.switch-track i { width: 16px; height: 16px; display: block; border-radius: 50%; background: var(--ink); transition: translate 140ms ease; }
.shadow-setting button[aria-checked="true"] .switch-track { background: var(--accent); }
.shadow-setting button[aria-checked="true"] .switch-track i { translate: 14px 0; background: var(--on-accent); }
.quiet-button, .primary-small, .draw-offer button, .danger-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 0.85rem; color: var(--ink); border: 0; border-radius: 9px; background: var(--surface-subtle); font-size: 0.76rem; font-weight: 760; text-decoration: none; cursor: pointer; }
.primary-small { color: var(--on-accent); background: var(--accent); }
.quiet-button:disabled, .draw-offer button:disabled, .danger-button:disabled { opacity: 0.56; }
.invite-strip { display: grid; gap: 1rem; margin: 0.75rem 0; padding: 1rem; border: 0; border-radius: var(--radius-md); background: var(--accent-soft); }
.invite-strip > div:first-child { min-width: 0; display: flex; align-items: flex-start; gap: 0.65rem; }
.invite-strip h2, .invite-strip p { margin: 0; }
.invite-strip h2 { font-size: 0.98rem; font-weight: 780; }
.invite-strip p { margin-top: 0.2rem; color: var(--ink-muted); font-size: 0.74rem; }
.waiting-dot { width: 9px; height: 9px; margin-top: 0.35rem; color: var(--accent); }
.invite-actions { display: grid; align-items: stretch; }
.invite-link-label, .copy-help, .board-instructions, .status-announcement, .dialog-focus-sentinel { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invite-link { width: 100%; min-width: 0; min-height: 44px; padding: 0 0.7rem; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; }
.invite-open { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-size: 0.75rem; font-weight: 780; }
.game-layout { width: min(100%, 70rem); display: grid; gap: 0.85rem; align-items: start; margin: 0 auto; }
.board-column { width: 100%; min-width: 0; max-width: 42rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.5rem, 1vw, 0.625rem); margin-inline: auto; }
.room-shell:has(.invite-strip) .board-column { max-width: 36rem; }
.player-strip { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.45rem 0.35rem 0.72rem; position: relative; border-radius: 9px; transition: background 160ms ease; }
.player-strip.active { background: linear-gradient(90deg, rgba(120, 167, 132, 0.12), rgba(120, 167, 132, 0.025) 74%, transparent); }
.player-strip.active::before { content: ""; width: 3px; position: absolute; top: 0.55rem; bottom: 0.55rem; left: 0; border-radius: 999px; background: var(--accent); }
.player-identity { min-width: 0; display: flex; align-items: center; gap: 0.55rem; }
.player-identity > div { min-width: 0; }
.seat-marker { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid rgba(225, 231, 224, 0.72); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); }
.seat-marker.white { background: #eee7d7; }
.seat-marker.black { border-color: #879289; background: #202722; box-shadow: inset 0 0 0 2px #0f1411, 0 1px 3px rgba(0, 0, 0, 0.32); }
.player-name { min-width: 0; display: flex; align-items: center; gap: 0.45rem; }
.player-name strong { max-width: min(50vw, 27rem); overflow: hidden; font-size: 0.87rem; text-overflow: ellipsis; white-space: nowrap; }
.material-score { flex: 0 0 auto; color: var(--ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; font-weight: 800; }
.player-meta { min-width: 0; display: block; margin-top: 0.03rem; overflow: hidden; color: var(--ink-muted); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.player-clock { min-width: 5.1ch; flex: 0 0 auto; padding: 0.18rem 0.42rem; color: var(--ink); border: 1px solid transparent; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.18rem, 6vw, 1.6rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.06em; line-height: 1.2; text-align: right; }
.player-strip.active .player-clock { color: #101712; border-color: #9ac2a3; background: #8fba99; box-shadow: 0 4px 14px rgba(73, 115, 84, 0.2); }
.player-clock.untimed { min-width: 0; padding: 0.34rem 0.55rem; color: var(--ink-muted); border-color: var(--line); background: var(--surface-subtle); box-shadow: none; font-family: inherit; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap; }
.player-strip.active .player-clock.untimed { color: var(--ink-muted); border-color: var(--line); background: var(--surface-subtle); box-shadow: none; }
.board-frame { width: 100%; position: relative; overflow: hidden; padding: clamp(4px, 0.65vw, 6px); border: 1px solid #344139; border-radius: clamp(10px, 1.4vw, 14px); background: #18211b; box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.3); }
.chess-board { --legal-marker: rgba(8, 20, 12, 0.84); min-width: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; overflow: hidden; border-radius: clamp(6px, 0.9vw, 9px); contain: layout paint; isolation: isolate; touch-action: manipulation; }
body:has(.chess-board .square:focus-visible) { overflow: hidden; }
.chess-board.theme-forest, .appearance-trigger-icon.theme-forest { --board-light: #e7ddc6; --board-dark: #6f8b72; --board-coordinate-light: #58705d; --board-coordinate-dark: #e8e0cb; }
.chess-board.theme-walnut, .appearance-trigger-icon.theme-walnut { --board-light: #c48973; --board-dark: #9d5e50; --board-coordinate-light: #3a221c; --board-coordinate-dark: #fff4ec; }
.chess-board.theme-graphite, .appearance-trigger-icon.theme-graphite { --board-light: #a1a5a3; --board-dark: #6a706d; --board-coordinate-light: #303633; --board-coordinate-dark: #f8faf9; }
.square { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0; position: relative; border: 0; border-radius: 0; container-type: inline-size; cursor: pointer; transition: filter 100ms ease, box-shadow 100ms ease; }
.square.move-target { z-index: 6; overflow: visible; }
.square[aria-disabled="true"] { color: inherit; cursor: default; }
.square[draggable="true"] { cursor: grab; }
.square[draggable="true"]:active { cursor: grabbing; }
.square.light { background-color: var(--board-light); }
.square.dark { background-color: var(--board-dark); }
.square.last-move::before, .square.selected::before, .square.in-check::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.square.last-move::before { background: rgba(221, 188, 72, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 236, 149, 0.2); }
.square.last-move-from::before { background: rgba(221, 188, 72, 0.22); box-shadow: inset 0 0 0 clamp(2px, 0.45vw, 4px) rgba(255, 230, 133, 0.64); }
.square.last-move-to::before { background: rgba(221, 188, 72, 0.52); box-shadow: inset 0 0 0 1px rgba(255, 241, 174, 0.24); }
.square.selected::before { z-index: 1; background: rgba(238, 198, 65, 0.28); box-shadow: inset 0 0 0 clamp(3px, 0.55vw, 5px) #f1c84f; }
.square.in-check::before { background: radial-gradient(circle, rgba(211, 66, 55, 0.9), rgba(194, 55, 47, 0.18) 68%, transparent 76%); }
.square.legal::after { content: ""; width: 22%; aspect-ratio: 1; position: absolute; z-index: 4; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; background: var(--legal-marker); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); pointer-events: none; }
.square.legal.capture::after { width: 80%; border: clamp(4px, 0.65vw, 7px) solid var(--legal-marker); background: transparent; box-shadow: none; }
.square:focus-visible { z-index: 5; outline: 3px solid var(--focus); outline-offset: -3px; }
.piece { width: 90%; height: 90%; display: block; position: relative; z-index: 3; overflow: hidden; pointer-events: none; shape-rendering: geometricPrecision; transform-origin: 50% 72%; animation: piece-enter 150ms cubic-bezier(0.2, 0.8, 0.2, 1); transition: scale 120ms ease, filter 120ms ease; }
.chess-board.piece-shadows .piece.white { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.32)) drop-shadow(0 3px 2px rgba(11, 20, 14, 0.26)); }
.chess-board.piece-shadows .piece.black { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 3px 2px rgba(5, 10, 7, 0.34)); }
.chess-board.piece-flat .piece { filter: none; }
.chess-board.pieces-classic .piece { object-fit: contain; }
.piece.pawn { width: 86%; height: 86%; }
.piece.knight { width: 92%; height: 92%; }
.piece.moving { animation: piece-move var(--move-duration, 250ms) cubic-bezier(0.3, 0, 0.2, 1) both; }
.move-x-m7 { --move-x: -700cqw; }
.move-x-m6 { --move-x: -600cqw; }
.move-x-m5 { --move-x: -500cqw; }
.move-x-m4 { --move-x: -400cqw; }
.move-x-m3 { --move-x: -300cqw; }
.move-x-m2 { --move-x: -200cqw; }
.move-x-m1 { --move-x: -100cqw; }
.move-x-0 { --move-x: 0cqw; }
.move-x-p1 { --move-x: 100cqw; }
.move-x-p2 { --move-x: 200cqw; }
.move-x-p3 { --move-x: 300cqw; }
.move-x-p4 { --move-x: 400cqw; }
.move-x-p5 { --move-x: 500cqw; }
.move-x-p6 { --move-x: 600cqw; }
.move-x-p7 { --move-x: 700cqw; }
.move-y-m7 { --move-y: -700cqw; }
.move-y-m6 { --move-y: -600cqw; }
.move-y-m5 { --move-y: -500cqw; }
.move-y-m4 { --move-y: -400cqw; }
.move-y-m3 { --move-y: -300cqw; }
.move-y-m2 { --move-y: -200cqw; }
.move-y-m1 { --move-y: -100cqw; }
.move-y-0 { --move-y: 0cqw; }
.move-y-p1 { --move-y: 100cqw; }
.move-y-p2 { --move-y: 200cqw; }
.move-y-p3 { --move-y: 300cqw; }
.move-y-p4 { --move-y: 400cqw; }
.move-y-p5 { --move-y: 500cqw; }
.move-y-p6 { --move-y: 600cqw; }
.move-y-p7 { --move-y: 700cqw; }
.move-distance-1 { --move-duration: 220ms; }
.move-distance-2 { --move-duration: 235ms; }
.move-distance-3 { --move-duration: 250ms; }
.move-distance-4 { --move-duration: 265ms; }
.move-distance-5 { --move-duration: 280ms; }
.move-distance-6 { --move-duration: 295ms; }
.move-distance-7 { --move-duration: 310ms; }
.piece.opponent-move.move-distance-1 { --move-duration: 290ms; }
.piece.opponent-move.move-distance-2 { --move-duration: 320ms; }
.piece.opponent-move.move-distance-3 { --move-duration: 350ms; }
.piece.opponent-move.move-distance-4 { --move-duration: 380ms; }
.piece.opponent-move.move-distance-5 { --move-duration: 408ms; }
.piece.opponent-move.move-distance-6 { --move-duration: 432ms; }
.piece.opponent-move.move-distance-7 { --move-duration: 454ms; }
.square.pending .piece { opacity: 0.68; }
.coordinate { position: absolute; z-index: 5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(0.46rem, 0.9vw, 0.6rem); font-weight: 850; line-height: 1; pointer-events: none; }
.square.light .coordinate { color: var(--board-coordinate-light, #58705d); }
.square.dark .coordinate { color: var(--board-coordinate-dark, #e8e0cb); }
.coordinate.file { right: 4px; bottom: 4px; }
.coordinate.rank { top: 4px; left: 4px; }
.game-panel { width: 100%; min-width: 0; max-width: 42rem; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(28, 36, 31, 0.94); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22); backdrop-filter: blur(16px); }
.status-card, .moves-card, .game-actions { padding: 0.85rem 1rem; }
.status-card, .moves-card { border-bottom: 1px solid var(--line); }
.status-card .section-label { margin-bottom: 0.28rem; }
.status-card h2 { margin-bottom: 0.2rem; font-size: 1.3rem; font-weight: 780; letter-spacing: -0.035em; }
.status-card > p:not(.section-label, .room-error) { margin: 0; color: var(--ink-muted); font-size: 0.78rem; }
.status-card.completed { background: linear-gradient(135deg, rgba(120, 167, 132, 0.13), transparent 78%); }
.post-game-actions { display: grid; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.post-game-primary { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; padding: 0.65rem 0.85rem; color: var(--canvas); border-radius: 10px; background: var(--accent); text-decoration: none; transition: background 140ms ease, translate 140ms ease; }
.post-game-primary::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 1rem; font-size: 1.1rem; }
.post-game-primary span { font-size: 0.8rem; font-weight: 820; }
.post-game-primary small { color: currentColor; font-size: 0.62rem; }
.post-game-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); border-radius: 9px; background: var(--surface-subtle); font-size: 0.74rem; font-weight: 760; text-decoration: none; }
.autoplay-tester { border-bottom: 1px solid var(--line); background: var(--surface); }
.autoplay-tester summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 1rem; color: var(--ink-muted); cursor: pointer; list-style: none; }
.autoplay-tester summary:focus-visible { outline-offset: -3px; }
.autoplay-tester summary::-webkit-details-marker { display: none; }
.autoplay-tester summary span:first-child { min-width: 0; display: grid; }
.autoplay-tester summary strong { color: var(--ink); font-size: 0.72rem; }
.autoplay-tester summary small { font-size: 0.62rem; }
.details-mark { font-size: 1.1rem; transition: rotate 140ms ease; }
.autoplay-tester[open] .details-mark { rotate: 45deg; }
.autoplay-content { padding: 0 1rem 0.85rem; }
.autoplay-content > button { width: 100%; }
.autoplay-copy, .autoplay-waiting, .autoplay-engine-line { margin: 0.5rem 0 0; color: var(--ink-muted); font-size: 0.66rem; line-height: 1.45; }
.autoplay-waiting { color: var(--accent); font-weight: 720; }
.autoplay-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0.65rem 0 0; }
.autoplay-metrics > div { min-width: 0; padding: 0.55rem; border-radius: 7px; background: var(--surface-subtle); }
.autoplay-metrics dt { color: var(--ink-muted); font-size: 0.58rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; }
.autoplay-metrics dd { margin: 0.2rem 0 0; overflow: hidden; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.autoplay-engine-line + .autoplay-engine-line { margin-top: 0.15rem; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; }
.panel-heading h2 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.panel-heading span { color: var(--ink-muted); font-size: 0.65rem; }
.move-log { --move-row-height: 33px; max-height: 270px; display: flex; flex-direction: column; }
.move-list { max-height: calc(270px - var(--move-row-height)); overflow: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.empty-moves { margin: 1.5rem 0; color: var(--ink-muted); font-size: 0.74rem; text-align: center; }
.move-row { min-height: var(--move-row-height); display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); align-items: center; border: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; }
.move-row > span { color: var(--ink-muted); }
.move-row b { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.latest-move { flex: 0 0 var(--move-row-height); padding-inline: 0.35rem; border: 0; border-radius: 5px; background: var(--accent-soft); }
.game-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.game-actions > .quiet-button { width: 100%; }
.danger-link { min-height: 44px; grid-column: 1 / -1; color: var(--danger); border: 0; border-radius: 9px; background: transparent; font-size: 0.76rem; font-weight: 720; cursor: pointer; }
.game-actions > .quiet-button:first-child:nth-last-child(2) + .danger-link { grid-column: auto; }
.draw-offer, .resign-confirm { grid-column: 1 / -1; }
.draw-offer { padding: 0.8rem; border: 0; border-radius: 10px; background: var(--accent-soft); }
.draw-offer p, .resign-confirm p { margin: 0 0 0.65rem; font-size: 0.76rem; }
.draw-offer > div, .resign-confirm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.danger-button { color: #ffffff; background: var(--danger-fill); }
.resign-confirm p { grid-column: 1 / -1; }
.promotion-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; background: rgba(18, 24, 20, 0.72); backdrop-filter: blur(8px); }
.promotion-picker { width: min(100%, 27rem); padding: 1.25rem; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.promotion-picker h3 { margin: 0 0 0.25rem; font-size: 1.35rem; font-weight: 780; }
.promotion-picker > p { margin-bottom: 1rem; color: var(--ink-muted); font-size: 0.82rem; }
.promotion-picker > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.promotion-picker > div button { min-height: 92px; display: grid; place-items: center; color: var(--ink); border: 0; border-radius: 10px; background: var(--canvas); }
.promotion-picker .piece { width: 56px; height: 56px; }
.promotion-picker button span { font-size: 0.68rem; }
.promotion-picker .cancel { min-height: 44px; margin-top: 0.75rem; padding: 0 1rem; color: var(--ink-muted); border: 0; border-radius: 9px; background: var(--surface-subtle); }
#blazor-error-ui { width: 100%; display: none; padding: 0.8rem 4rem 0.8rem 1rem; position: fixed; z-index: 1100; bottom: 0; left: 0; color: #ffffff; background: #7f302b; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18); }
#blazor-error-ui a { color: inherit; font-weight: 800; }
#blazor-error-ui .dismiss { min-width: 44px; min-height: 44px; position: absolute; top: 50%; right: 0.5rem; translate: 0 -50%; color: #ffffff; border: 0; background: transparent; font-size: 1.4rem; }
@keyframes spin { to { rotate: 1turn; } }
@keyframes loading-pulse { to { opacity: 0.42; } }
@keyframes breathe { to { scale: 0.95; opacity: 0.78; } }
@keyframes connection-pulse { to { opacity: 0.34; } }
@keyframes piece-enter { from { scale: 0.86; opacity: 0.72; } }
@keyframes piece-move {
  0%, 8% { transform: translate3d(var(--move-x), var(--move-y), 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (hover: hover) {
  .create-button:hover:not(:disabled), .primary-action:hover:not(:disabled), .system-action:hover, .primary-small:hover, .post-game-primary:hover { background: var(--accent-hover); translate: 0 -1px; }
  .choice-grid button:hover:not(.selected), .preset:hover:not(.selected), .color-choice button:hover:not(.selected), .quiet-button:hover:not(:disabled), .draw-offer button:hover:not(:disabled), .promotion-picker button:hover, .room-home:hover, .post-game-secondary:hover { background: var(--accent-soft); }
  .square[aria-disabled="false"]:hover { z-index: 2; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); filter: brightness(1.035); }
  .square[aria-disabled="false"]:hover .piece { scale: 1.045; }
}
@media (min-width: 26.25rem) {
  .preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preset:first-child { grid-column: auto; }
  .promotion-picker > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 35rem) {
  .shell { width: min(calc(100% - 2rem), 72rem); }
  .site-header > p { display: block; }
  .site-footer-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; }
  .footer-promise { grid-column: 2; grid-row: 1; justify-self: center; }
  .footer-meta { grid-column: 3; }
  .room-shell { width: min(calc(100% - 1.5rem), 70rem); }
  .room-header { padding-inline: 0; }
}
@media (min-width: 45rem) {
  .hero { padding-block: 3rem; }
  .invite-strip { grid-template-columns: minmax(13rem, 1fr) minmax(18rem, auto); align-items: center; }
  .invite-actions { grid-template-columns: minmax(12rem, 20rem) auto auto; }
  .appearance-options { grid-template-columns: minmax(12rem, 0.9fr) minmax(15rem, 1.35fr) minmax(11rem, 0.9fr); align-items: end; }
}
@media (min-width: 58rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(25rem, 30.5rem); align-items: start; gap: clamp(3rem, 7vw, 6rem); padding-block: 1rem 2rem; }
  .hero-copy { align-self: center; }
  .appearance-panel { grid-template-columns: minmax(9rem, 0.62fr) minmax(0, 2.38fr); align-items: end; padding: 0.75rem 0.85rem; }
  .game-layout { grid-template-columns: minmax(0, 42rem) minmax(18rem, 20rem); justify-content: center; gap: 1.5rem; }
  .room-shell { padding-bottom: 0; }
  .board-column, .room-shell:has(.invite-strip) .board-column { max-width: min(42rem, calc(100svh - 11.5rem)); }
  .game-panel { max-width: none; margin-inline: 0; position: sticky; top: 0.5rem; margin-top: 3.1rem; }
  .status-card, .moves-card, .game-actions { padding: 1rem; }
}
@media (min-width: 68rem) {
  .preset-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 50rem) and (max-height: 38.75rem) and (orientation: landscape) {
  .room-header { min-height: 44px; padding-block: 0.2rem 0.4rem; }
  .game-layout { grid-template-columns: minmax(26rem, calc(100svh - 10rem)) minmax(18rem, 20rem); margin-top: 0; }
  .board-column { max-width: calc(100svh - 10rem); }
  .player-strip { min-height: 46px; }
  .game-panel { margin-top: 2.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --ink-muted: #cbd2cc; --line: #728077; --line-strong: #a7b1a9; --accent: #a0d0ab; --danger: #ff9d93; --focus: #a4ddf8; }
  .square.selected::before { box-shadow: inset 0 0 0 5px #ffffff; }
  .square.legal::after { background: #000000; }
  .square.legal.capture::after { border-color: #000000; background: transparent; }
}
@media (forced-colors: active) {
  .brand-mark, .footer-mark, .seat-marker, .square { forced-color-adjust: none; }
  input, .preset, .color-choice button, .quiet-button, .primary-small, .draw-offer button, .danger-button, .promotion-picker button, .post-game-primary, .post-game-secondary, .piece-designs button, .board-themes button, .shadow-setting button, .appearance-close { border: 1px solid ButtonText; }
}