:root{--font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1.0625rem;--text-lg: 1.375rem;--text-xl: 1.875rem;--text-2xl: 2.5rem;--text-3xl: clamp(2.75rem, 6vw, 4.25rem);--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--leading-tight: 1.08;--tracking-display: -.02em;--tracking-label: .08em;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 2.5rem;--space-8: 3rem;--space-10: 4rem;--space-12: 6rem;--radius-sm: 7px;--radius-md: 11px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 999px;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--dur-fast: .13s;--dur-med: .24s;--dur-slow: .42s;--z-sticky: 100;--z-overlay: 1000;--z-modal: 1100;--z-toast: 1200;--board-light: #ead9bd;--board-dark: #9a6f49;--board-frame: #5d4126;--board-coord-on-light: rgba(93, 65, 38, .62);--board-coord-on-dark: rgba(234, 217, 189, .72);--board-highlight: rgba(232, 177, 92, .45);--board-last-move: rgba(232, 177, 92, .32);--board-check: radial-gradient( circle, rgba(214, 78, 64, .92) 0%, rgba(214, 78, 64, .55) 42%, transparent 72% );--board-move-dot: rgba(40, 28, 16, .32)}:root,[data-theme=dark]{color-scheme:dark;--bg: #0f1216;--bg-grad: radial-gradient( 1200px 720px at 18% -8%, rgba(232, 177, 92, .06), transparent 58% ), radial-gradient(900px 560px at 100% 110%, rgba(94, 120, 168, .07), transparent 60%);--bg-elev: #171b21;--bg-elev-2: #1f242c;--bg-inset: #0c0f13;--surface-border: #2a313c;--surface-border-strong: #3a434f;--fg: #eef1f6;--fg-muted: #a3adba;--fg-faint: #6d7783;--accent: #e8b15c;--accent-strong: #f4c074;--accent-soft: rgba(232, 177, 92, .14);--accent-contrast: #1a1206;--danger: #e26b5c;--danger-soft: rgba(226, 107, 92, .14);--success: #6fb481;--shadow-1: 0 1px 2px rgba(0, 0, 0, .45);--shadow-2: 0 12px 40px rgba(0, 0, 0, .5);--shadow-board: 0 30px 70px -28px rgba(0, 0, 0, .85)}[data-theme=light]{color-scheme:light;--bg: #efe9df;--bg-grad: radial-gradient( 1200px 720px at 18% -8%, rgba(185, 116, 42, .08), transparent 58% ), radial-gradient(900px 560px at 100% 110%, rgba(94, 120, 168, .08), transparent 60%);--bg-elev: #fbf8f2;--bg-elev-2: #f1ebe0;--bg-inset: #e6dece;--surface-border: #ddd2bf;--surface-border-strong: #c8bba3;--fg: #211b13;--fg-muted: #6a5f4f;--fg-faint: #9b8e78;--accent: #b5751f;--accent-strong: #9c6216;--accent-soft: rgba(181, 117, 31, .12);--accent-contrast: #fff7ea;--danger: #c0392b;--danger-soft: rgba(192, 57, 43, .1);--success: #3f7a4d;--shadow-1: 0 1px 2px rgba(60, 48, 28, .12);--shadow-2: 0 14px 40px rgba(60, 48, 28, .16);--shadow-board: 0 30px 60px -30px rgba(60, 42, 18, .45)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;color:var(--fg);font-family:var(--font-ui);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);font-optical-sizing:auto;letter-spacing:var(--tracking-display);line-height:var(--leading-tight);margin:0;text-wrap:balance}p{margin:0}button{font-family:inherit}a{color:var(--accent);text-underline-offset:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.app-shell{min-height:100%;display:flex;flex-direction:column}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-theme-toggle{position:absolute;top:var(--space-4);right:var(--space-5);z-index:var(--z-sticky)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--surface-border);background:color-mix(in srgb,var(--bg-elev) 75%,transparent);backdrop-filter:blur(10px);position:sticky;top:0;z-index:var(--z-sticky)}.brand{font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:.01em;display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;background:none;border:none;color:var(--fg);padding:var(--space-1) var(--space-2);margin:calc(var(--space-1) * -1) calc(var(--space-2) * -1);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out)}.brand:hover{color:var(--accent-strong)}.brand-mark{color:var(--accent);font-size:1.15em;line-height:1}.page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-7) var(--space-4);gap:var(--space-6)}.btn{appearance:none;border:1px solid var(--surface-border-strong);background:var(--bg-elev-2);color:var(--fg);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--weight-semibold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--accent-strong),var(--accent));color:var(--accent-contrast);border-color:transparent;box-shadow:0 1px #ffffff40 inset,0 8px 22px -10px var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent-strong);border-color:transparent;box-shadow:0 1px #ffffff4d inset,0 12px 26px -10px var(--accent)}.btn-danger{border-color:color-mix(in srgb,var(--danger) 55%,var(--surface-border));color:var(--danger)}.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff;border-color:var(--danger)}.btn-ghost{background:transparent;border-color:transparent;color:var(--fg-muted)}.btn-ghost:hover:not(:disabled){background:var(--bg-elev-2);color:var(--fg);transform:none}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}.btn-block{width:100%}.card{background:var(--bg-elev);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:var(--space-6)}.muted{color:var(--fg-muted)}.faint{color:var(--fg-faint)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;align-items:center;gap:var(--space-3)}.spread{justify-content:space-between}input.field,select.field{background:var(--bg-inset);border:1px solid var(--surface-border-strong);border-radius:var(--radius-md);color:var(--fg);padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-family:inherit;width:100%;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}input.field::placeholder{color:var(--fg-faint)}input.field:focus,select.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.segmented{display:inline-flex;background:var(--bg-inset);border:1px solid var(--surface-border-strong);border-radius:var(--radius-md);padding:3px;gap:2px}.segmented.segmented-block{display:flex}.segmented button{appearance:none;border:none;background:transparent;color:var(--fg-muted);padding:var(--space-2) var(--space-4);cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold);border-radius:calc(var(--radius-md) - 4px);flex:1;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.segmented button:hover:not(.active){color:var(--fg)}.segmented button.active{background:var(--accent);color:var(--accent-contrast);box-shadow:var(--shadow-1)}.banner{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);background:var(--bg-elev-2);border:1px solid var(--surface-border)}.banner-error{border-color:color-mix(in srgb,var(--danger) 45%,var(--surface-border));background:var(--danger-soft);color:var(--danger)}.label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-muted)}.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}.home{width:min(880px,100%);display:flex;flex-direction:column;gap:var(--space-8)}.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4)}.hero-title{font-size:var(--text-3xl);font-weight:var(--weight-semibold);max-width:16ch}.hero-title em{font-style:italic;color:var(--accent)}.hero-sub{color:var(--fg-muted);max-width:52ch;font-size:var(--text-md);text-wrap:pretty}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}@media(max-width:620px){.mode-grid{grid-template-columns:1fr}}.mode-card{position:relative;text-align:left;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-2);isolation:isolate;transition:transform var(--dur-med) var(--ease-out),border-color var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out)}.mode-card:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px 260px at 80% -20%,var(--accent-soft),transparent 70%);opacity:0;transition:opacity var(--dur-med) var(--ease-out)}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--shadow-2)}.mode-card:hover:after,.mode-card:focus-visible:after{opacity:1}.mode-card .mode-icon{font-size:2rem;line-height:1;color:var(--accent);margin-bottom:var(--space-2)}.mode-card h2{font-size:var(--text-lg)}.mode-card .mode-go{margin-top:var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--accent);display:inline-flex;align-items:center;gap:var(--space-2)}.mode-card .mode-go span{transition:transform var(--dur-med) var(--ease-out)}.mode-card:hover .mode-go span,.mode-card:focus-visible .mode-go span{transform:translate(4px)}.home-foot{display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap;color:var(--fg-faint);font-size:var(--text-sm)}.home-foot b{color:var(--fg-muted);font-weight:var(--weight-semibold)}.lobby-card{width:min(440px,100%)}.lobby-head h2{font-size:var(--text-xl)}.range-row{display:flex;align-items:center;gap:var(--space-4)}input[type=range]{flex:1;accent-color:var(--accent);height:4px;cursor:pointer}.strength-value{font-family:var(--font-mono);color:var(--accent);font-weight:var(--weight-bold)}.join-row{display:flex;gap:var(--space-3)}.join-row .field{letter-spacing:.15em;font-family:var(--font-mono)}.divider{display:flex;align-items:center;gap:var(--space-3);color:var(--fg-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-label)}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--surface-border)}.room-code{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:.32em;color:var(--accent);text-align:center;padding:var(--space-5);padding-right:calc(var(--space-5) - .32em);background:var(--bg-inset);border:1px dashed var(--surface-border-strong);border-radius:var(--radius-md);width:100%}.copy-btn.copied{border-color:var(--success);color:var(--success)}.spinner{width:30px;height:30px;border:3px solid var(--surface-border-strong);border-top-color:var(--accent);border-radius:var(--radius-full);animation:spin .8s linear infinite}.spinner-lg{width:44px;height:44px;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.game-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(260px,340px);gap:var(--space-6);width:100%;max-width:1040px;align-items:start}@media(max-width:860px){.game-layout{grid-template-columns:1fr;max-width:min(560px,100%)}}.board-column{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}.player-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);background:var(--bg-elev);border:1px solid var(--surface-border);border-radius:var(--radius-md);transition:border-color var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out)}.player-strip.active{border-color:color-mix(in srgb,var(--accent) 60%,var(--surface-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 8px 24px -16px var(--accent)}.player-meta{display:flex;align-items:center;gap:var(--space-3);min-width:0}.player-dot{width:13px;height:13px;border-radius:var(--radius-full);border:1px solid var(--surface-border-strong);flex-shrink:0;position:relative}.player-dot.white{background:linear-gradient(155deg,#fff,#d7d2c8)}.player-dot.black{background:linear-gradient(155deg,#4a505b,#1a1d24)}.player-strip.active .player-dot:after{content:"";position:absolute;inset:-5px;border-radius:var(--radius-full);border:1.5px solid var(--accent);animation:turn-ping 1.8s var(--ease-out) infinite}@keyframes turn-ping{0%{opacity:.9;transform:scale(.85)}70%,to{opacity:0;transform:scale(1.35)}}.player-info{display:flex;flex-direction:column;min-width:0}.player-name{font-weight:var(--weight-semibold);font-size:var(--text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.captured{display:flex;align-items:center;gap:1px;min-height:1.25rem;font-size:1.1rem;line-height:1;color:var(--fg-muted)}.captured .glyph{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.captured .adv{font-size:var(--text-xs);color:var(--accent);font-family:var(--font-mono);font-weight:var(--weight-bold);margin-left:var(--space-2)}.clock{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid transparent;transition:background var(--dur-med) var(--ease-out),border-color var(--dur-med) var(--ease-out)}.player-strip.active .clock{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.clock-time{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--fg)}.clock.low .clock-time{color:var(--danger);animation:clock-pulse 1s var(--ease-out) infinite}@keyframes clock-pulse{0%,to{opacity:1}50%{opacity:.45}}.board-frame{position:relative;padding:var(--space-3);background:linear-gradient(155deg,color-mix(in srgb,var(--board-frame) 88%,#000),var(--board-frame));border-radius:var(--radius-lg);box-shadow:var(--shadow-board)}.board-wrap{position:relative;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 0 0 1px #00000059,inset 0 0 0 1px #ffffff0d}.board-wrap.locked{cursor:default}.side-panel{display:flex;flex-direction:column;gap:var(--space-4)}@media(max-width:860px){.side-panel{order:3}}.panel{background:var(--bg-elev);border:1px solid var(--surface-border);border-radius:var(--radius-md);overflow:hidden}.panel-title{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fg-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-border);display:flex;align-items:center;justify-content:space-between}.move-list{max-height:280px;overflow-y:auto;scrollbar-width:thin}.move-rows{display:grid;grid-template-columns:2.25rem 1fr 1fr;font-family:var(--font-mono);font-size:var(--text-sm);align-items:stretch}.move-rows .move-cell{padding:var(--space-2) var(--space-3);display:flex;align-items:center}.move-rows .move-row-even{background:color-mix(in srgb,var(--bg-inset) 45%,transparent)}.move-num{color:var(--fg-faint);justify-content:flex-end;padding-right:var(--space-3)}.move-rows .ply{color:var(--fg);font-weight:var(--weight-medium);border-radius:var(--radius-sm)}.move-rows .ply.last{color:var(--accent-contrast);background:var(--accent);font-weight:var(--weight-bold);margin:2px;padding:calc(var(--space-2) - 2px) calc(var(--space-3) - 2px)}.move-empty{padding:var(--space-5) var(--space-4);color:var(--fg-faint);font-size:var(--text-sm);text-align:center}.controls{display:flex;flex-wrap:wrap;gap:var(--space-2)}.controls .btn{flex:1;min-width:8rem}.status-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);background:var(--bg-elev-2);border:1px solid var(--surface-border);color:var(--fg-muted)}.status-pill .dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--fg-faint)}.status-pill.warn{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)}.status-pill.warn .dot{background:var(--danger);animation:clock-pulse 1.2s var(--ease-out) infinite}.overlay{position:fixed;inset:0;background:#06080b9e;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:var(--z-modal);animation:fade-in var(--dur-med) var(--ease-out)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay-card{position:relative;background:var(--bg-elev);border:1px solid var(--surface-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);padding:var(--space-8) var(--space-7) var(--space-7);text-align:center;max-width:400px;width:100%;overflow:hidden;animation:pop-in var(--dur-med) var(--ease-out-expo)}.overlay-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--result-accent, var(--accent))}@keyframes pop-in{0%{transform:scale(.94) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.overlay-badge{width:56px;height:56px;margin:0 auto var(--space-4);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:color-mix(in srgb,var(--result-accent, var(--accent)) 16%,transparent);color:var(--result-accent, var(--accent));border:1px solid color-mix(in srgb,var(--result-accent, var(--accent)) 40%,transparent)}.overlay-result{font-size:var(--text-2xl);margin-bottom:var(--space-1)}.overlay-reason{color:var(--fg-muted);margin-bottom:var(--space-6);font-size:var(--text-base)}.overlay-actions{display:flex;gap:var(--space-3)}.overlay-actions .btn{flex:1}.promo{position:absolute;inset:0;background:#06080b8c;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:var(--z-overlay);animation:fade-in var(--dur-fast) var(--ease-out)}.promo-card{background:var(--bg-elev);border:1px solid var(--surface-border-strong);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5) var(--space-5);box-shadow:var(--shadow-2);animation:pop-in var(--dur-fast) var(--ease-out-expo)}.promo-options{display:flex;gap:var(--space-3);margin-top:var(--space-3)}.promo-piece{width:60px;height:60px;font-size:2.3rem;line-height:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--surface-border);border-radius:var(--radius-md);background:var(--bg-elev-2);color:var(--fg);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.promo-piece:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px)}