@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:Manrope,sans-serif;color:var(--paper);background:var(--bg-deep);font-synthesis:none;--paper: #f3efe6;--muted: #a3b0a8;--line: rgba(243, 239, 230, .14);--green: #5d7d66;--lime: #d7e77a;--cream: #d6cebc;--ink: #0e1716;--bg-deep: #0d1716;--bg-wash: rgba(93, 125, 102, .18);--accent-wash: rgba(215, 231, 122, .1);--square-dark: #7d9a82;--turn-white: #f2fcfc;--turn-black: #394444;--square-label: rgba(21,34,31,.58);--square-label-dark: rgba(243,239,230,.64);--piece-shadow: rgba(0,0,0,.6);--piece-white-shadow: #738776;--piece-black-stroke: rgba(11,17,16,.86);--piece-black-shadow: rgba(0,0,0,.45);--piece-black-panel: #485d59;--panel-surface: rgba(18,27,27,.8);--cell-split-bg: rgba(246,240,223,.9);--cell-split-border: rgba(21,34,31,.48);--move-glow: rgba(122, 231, 226, .712);--move-ring: rgba(215,231,122,.8);--board-shadow: rgba(0,0,0,.27);--promotion-backdrop: rgba(8,14,14,.72);--promotion-surface: #1b2a26;--subtle-contrast: rgba(255,255,255,.05);--button-hover: rgba(255,255,255,.08);--button-active: rgba(215,231,122,.18);--monospace-font: 500 10px/1.2 "DM Mono", monospace}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 6% 12%,var(--bg-wash),transparent 25rem),radial-gradient(circle at 86% 82%,var(--accent-wash),transparent 25rem),var(--bg-deep)}button{font:inherit}hr{margin:5px 0;border:0;border-top:1px solid var(--line)}.shell{margin:auto;padding:15px;height:100dvh}.topbar,.game-layout{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:13px}.brand-mark{color:var(--lime);font-size:25px}.monospace{font:var(--monospace-font);text-transform:uppercase}.m-3{margin:3px}.ms-auto{margin-left:auto}.accent{color:var(--lime)!important}.brand h1{margin:0;font-size:18px}.button{border:1px solid var(--line);background:transparent;color:var(--paper);padding:11px 15px;border-radius:3px;font-size:12px;cursor:pointer;text-wrap:nowrap}.button span{color:var(--lime);margin-left:12px;font-size:16px}.game-layout{align-items:flex-start;gap:5vw;min-width:0}.board-wrap{display:flex;flex-direction:column;flex:0 1 auto;min-width:100px;width:min(100%,calc(100dvh - 142px));max-width:100%;max-height:calc(100dvh - 30px)}.status{display:inline-flex;gap:9px;align-items:center;margin:5px 0 10px;color:var(--paper);font-size:14px;font-weight:500}.board-shell{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 18px;align-items:stretch;min-height:0;max-height:calc(100dvh - 100px);transform-origin:center}.rank-labels,.file-labels{display:grid;height:100%;width:100%}.rank-labels{grid-column:1;grid-row:1;grid-template-rows:repeat(8,minmax(0,1fr))}.file-labels{grid-column:2;grid-row:2;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center}.label{display:grid;place-items:center;width:100%;height:100%;color:var(--muted);-webkit-user-select:none;user-select:none}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;overflow:hidden;box-shadow:0 22px 60px var(--board-shadow);grid-column:2;grid-row:1;width:100%;max-height:100%}.square{position:relative;display:grid;place-items:center;border:0;padding:0;aspect-ratio:1;container-type:inline-size;cursor:pointer;transition:filter .18s ease}.square.light{background:var(--cream)}.square.dark{background:var(--square-dark)}.square:hover{filter:brightness(1.08)}.square.last:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--move-glow);pointer-events:none}.square.target:before{content:"";position:absolute;z-index:10;width:15%;aspect-ratio:1;border-radius:50%;background:var(--lime);border:2px solid rgba(14,23,22,.72);box-sizing:border-box}.square.merge-target:after{content:"+";position:absolute;z-index:11;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transform:scale(4);color:var(--lime);text-align:center;pointer-events:none;text-shadow:-.5px -.5px 0 rgba(14,23,22,.9),.5px -.5px 0 rgba(14,23,22,.9),-.5px .5px 0 rgba(14,23,22,.9),.5px .5px 0 rgba(14,23,22,.9)}.square.capture-target:before{z-index:10;width:75%;background:transparent;border:4px solid var(--move-ring);box-shadow:0 0 0 2px #0e1716b8;box-sizing:border-box}.square.selected{box-shadow:inset 0 0 0 4px var(--lime);z-index:2}.stack{position:relative;z-index:1;display:flex;align-items:center;width:100%;height:100%;justify-content:center;overflow:hidden}.stack.stacked{display:block}.stack.stacked .piece{position:absolute;left:50%;top:50%;width:auto;min-width:0;flex:none;font-family:Georgia,serif;font-size:clamp(15px,calc(90cqw/sqrt(var(--stack-size))),42px);z-index:2;text-shadow:0 4px 3px var(--piece-shadow);transform:translate(-50%,-50%) rotate(calc(var(--layer) * 1turn / var(--stack-size))) translateY(calc((-10 - var(--stack-size)) * 2cqw));filter:saturate(1.08)}.piece{position:relative;z-index:2;display:block;min-width:0;font-family:Georgia,serif;font-size:clamp(20px,82cqw,100px);text-shadow:0 4px 3px rgba(0,0,0,.2)}.piece.white{color:var(--paper);text-shadow:0 2px 0 var(--ink),0 5px 7px var(--piece-shadow)}.piece.black{color:var(--ink);text-shadow:0 2px 0 var(--paper),0 5px 7px var(--piece-shadow)}.stack-count{position:absolute;z-index:0;right:-2px;bottom:-2px;display:grid;place-items:center;min-width:16px;min-height:16px;padding:2px 4px;border-radius:999px}.stack-count.white{background:var(--ink);color:var(--paper)}.stack-count.black{background:var(--paper);color:var(--ink)}.legend{display:flex;gap:25px;margin-top:14px;color:var(--muted)}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.dot.white{background:var(--turn-white)}.dot.black{background:var(--turn-black)}.dot.move{background:var(--lime)}.dot.last{border:0;border-radius:0;background:#7ae7e2b6}.dot.capture{border:2px solid var(--lime)}.dot.merge:after{content:"+";color:var(--lime);transform:scale(2);display:inline-block}.cell-split{position:absolute;z-index:0;left:0;bottom:0;padding:2px;border:1px solid var(--cell-split-border);background:var(--cell-split-bg);color:var(--ink);cursor:pointer}.cell-split.on{background:var(--lime);border-color:var(--ink)}.promotion-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:var(--promotion-backdrop)}.promotion-prompt{width:min(380px,100%);padding:28px;border:1px solid var(--line);background:var(--promotion-surface);box-shadow:0 24px 70px #0006;text-align:center}.promotion-prompt h2{margin:0 0 22px;color:var(--paper);font-size:24px}.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.promotion-choice{display:grid;gap:5px;justify-items:center;padding:10px 5px;border:1px solid var(--line);background:var(--subtle-contrast);color:var(--paper);cursor:pointer}.promotion-choice:hover,.promotion-choice:focus-visible{border-color:var(--lime);background:#d6e17a1f;outline:none}.promotion-choice span{font:42px Georgia,serif;color:var(--cream);line-height:1}.promotion-choice small{color:var(--muted);font:9px DM Mono,monospace;text-transform:uppercase}.game-actions{display:flex;gap:8px}.rotate-control{position:relative;display:flex}.rotate-main{border-radius:3px 0 0 3px}.rotate-dropdown summary{display:grid;place-items:center;width:30px;height:100%;border:1px solid var(--line);border-left:0;border-radius:0 3px 3px 0;background:transparent;color:var(--lime);cursor:pointer;list-style:none}.rotate-dropdown summary::-webkit-details-marker{display:none}.rotate-dropdown[open] summary,.rotate-dropdown summary:hover{background:var(--button-hover)}.rotate-menu{position:absolute;z-index:15;top:calc(100% + 6px);right:0;width:170px;padding:5px;border:1px solid var(--line);background:var(--promotion-surface);box-shadow:0 12px 30px #0000004d}.auto-rotate-option{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 8px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:11px;text-align:left;cursor:pointer}.auto-rotate-option span:last-child{color:var(--muted);font:9px DM Mono,monospace;text-transform:uppercase}.auto-rotate-option.active{border-color:var(--lime);background:var(--button-active);color:var(--lime)}.auto-rotate-option.active span:last-child{color:var(--lime)}.board.rotated{transform:rotate(180deg);transform-origin:center}.board.rotated>.square>*{transform:rotate(180deg)}