:root{--bg-deep: oklch(.22 .03 145);--bg: oklch(.28 .035 145);--bg-lift: oklch(.34 .04 145);--ink: oklch(.93 .02 95);--ink-muted: oklch(.72 .025 95);--accent: oklch(.72 .14 75);--accent-hot: oklch(.68 .16 45);--square-dark: oklch(.38 .045 145);--square-light: oklch(.78 .04 95);--square-edge: oklch(.55 .08 145);--red-piece: oklch(.55 .18 30);--red-piece-edge: oklch(.4 .16 28);--black-piece: oklch(.25 .02 250);--black-piece-edge: oklch(.15 .015 250);--hint: oklch(.78 .14 145 / .55);--wrap-glow: oklch(.75 .12 200 / .45);--danger: oklch(.65 .18 25);--panel: oklch(.26 .03 145 / .85);--font-display: "Fraunces", Georgia, serif;--font-body: "IBM Plex Sans", system-ui, sans-serif;--board-max: min(72vmin, 560px);--radius: 14px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(ellipse 80% 60% at 20% 10%,oklch(.35 .06 145 / .5),transparent 55%),radial-gradient(ellipse 70% 50% at 90% 80%,oklch(.32 .05 75 / .35),transparent 50%),linear-gradient(165deg,var(--bg-deep),var(--bg) 45%,oklch(.24 .04 160));background-attachment:fixed}#app{min-height:100dvh;display:grid;place-items:center;padding:1.25rem clamp(.75rem,3vw,2rem)}.screen{width:min(100%,720px);animation:fade-up .45s ease both}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hero{text-align:center;margin-bottom:2rem}.brand{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,8vw,3.6rem);letter-spacing:-.02em;line-height:1.05;margin:0 0 .6rem;background:linear-gradient(120deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin:0 auto;max-width:28rem;color:var(--ink-muted);font-size:1.05rem;line-height:1.45}.mode-grid{display:grid;gap:.85rem;margin-top:1.75rem}.mode-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid oklch(.5 .05 145 / .35);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);border-radius:var(--radius);padding:1.15rem 1.35rem;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.mode-card:hover,.mode-card:focus-visible{outline:none;transform:translateY(-2px);border-color:var(--accent);background:#263826f2}.mode-card h2{font-family:var(--font-display);font-size:1.35rem;margin:0 0 .35rem;font-weight:600}.mode-card p{margin:0;color:var(--ink-muted);font-size:.92rem;line-height:1.4}.rules{margin-top:2rem;padding:1rem 1.15rem;border-left:3px solid var(--accent);color:var(--ink-muted);font-size:.88rem;line-height:1.5}.rules strong{color:var(--ink);font-weight:600}.play{width:min(100%,920px);display:grid;gap:1.25rem;grid-template-columns:1fr}@media (min-width: 860px){.play{grid-template-columns:var(--board-max) 1fr;align-items:start}}.board-shell{position:relative;width:var(--board-max);max-width:100%;margin-inline:auto}.board-wrap-hint{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:18px;pointer-events:none;border:1px dashed oklch(.65 .08 200 / .35);box-shadow:inset 0 0 40px #14717514}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px #040e048c,0 0 0 1px #556a554d;-webkit-user-select:none;user-select:none;touch-action:manipulation}.square{position:relative;display:grid;place-items:center;border:none;padding:0;cursor:default;transition:background .15s ease}.square.light{background:var(--square-light)}.square.dark{background:var(--square-dark);cursor:pointer}.square.edge-col{box-shadow:inset -3px 0 0 var(--wrap-glow),inset 3px 0 0 var(--wrap-glow)}.square.edge-row{box-shadow:inset 0 -3px 0 var(--wrap-glow),inset 0 3px 0 var(--wrap-glow)}.square.edge-col.edge-row{box-shadow:inset -3px 0 0 var(--wrap-glow),inset 3px 0 0 var(--wrap-glow),inset 0 -3px 0 var(--wrap-glow),inset 0 3px 0 var(--wrap-glow)}.square.selected{background:#417843}.square.hint:after{content:"";width:28%;aspect-ratio:1;border-radius:50%;background:var(--hint);animation:pulse 1.2s ease infinite}.square.hint.capture:after{width:72%;background:transparent;border:3px solid oklch(.7 .16 45 / .75);border-radius:50%}.square.last-from,.square.last-to{background:#785724}.square.last-from.light,.square.last-to.light{background:#b59b63}@keyframes pulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.15);opacity:1}}.piece{width:72%;aspect-ratio:1;border-radius:50%;position:relative;z-index:1;box-shadow:inset 0 -4px 8px #00000059,inset 0 3px 4px #ffffff40,0 3px 6px #00000059;transition:transform .18s ease;pointer-events:none}.square:hover .piece{transform:scale(1.04)}.piece.red{background:radial-gradient(circle at 35% 30%,oklch(.7 .16 35),var(--red-piece) 55%,var(--red-piece-edge))}.piece.black{background:radial-gradient(circle at 35% 30%,oklch(.4 .03 250),var(--black-piece) 55%,var(--black-piece-edge))}.piece.queen:before{content:"";position:absolute;top:22%;right:22%;bottom:22%;left:22%;border-radius:50%;border:2px solid oklch(.88 .08 85 / .9);box-shadow:0 0 0 1px #392c0c66}.piece.queen:after{content:"♛";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:clamp(.7rem,3.2vmin,1.15rem);color:#fde1a7;text-shadow:0 1px 2px oklch(0 0 0 / .5)}.piece.black.queen:after{color:#d6c298}.labels{display:flex;justify-content:space-between;padding:.35rem .15rem 0;font-size:.72rem;letter-spacing:.04em;color:var(--ink-muted);font-variant-numeric:tabular-nums}.side{display:flex;flex-direction:column;gap:1rem;min-width:0}.panel{background:var(--panel);border:1px solid oklch(.5 .04 145 / .3);border-radius:var(--radius);padding:1rem 1.15rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel h1{font-family:var(--font-display);font-size:1.55rem;margin:0 0 .25rem;font-weight:700}.turn-row{display:flex;align-items:center;gap:.65rem;margin-top:.75rem}.turn-dot{width:1rem;height:1rem;border-radius:50%;box-shadow:inset 0 -2px 4px #0000004d}.turn-dot.red{background:var(--red-piece)}.turn-dot.black{background:var(--black-piece)}.turn-label{font-weight:600;font-size:1rem}.status-line{margin:.55rem 0 0;color:var(--ink-muted);font-size:.9rem;line-height:1.4;min-height:2.6em}.status-line.win{color:var(--accent);font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:.55rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid oklch(.55 .05 145 / .4);background:#283828;color:var(--ink);font-family:var(--font-body);font-weight:500;font-size:.9rem;padding:.55rem .95rem;border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.btn:hover,.btn:focus-visible{outline:none;border-color:var(--accent);background:#314a32}.btn.primary{background:linear-gradient(135deg,var(--accent-hot),var(--accent));border-color:transparent;color:#211209;font-weight:600}.btn.primary:hover{filter:brightness(1.05)}.legend{font-size:.82rem;color:var(--ink-muted);line-height:1.45;margin:0}.legend dt{color:var(--ink);font-weight:600;margin-top:.45rem}.legend dd{margin:.15rem 0 0}.cpu-thinking{display:inline-flex;align-items:center;gap:.4rem}.cpu-thinking:before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);animation:blink .8s ease infinite}@keyframes blink{0%,to{opacity:.3}50%{opacity:1}}.capture-trail{position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:#d86d3859;pointer-events:none}