:root{color-scheme:dark;--bg:#11232c;--panel:#1b333e;--text:#e9ece6;--muted:#a9bdc4;--gold:#e2bd79;--line:#35515b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#30444b,transparent 65%),var(--bg);color:var(--text);font:14px system-ui,-apple-system,sans-serif}main{max-width:990px;margin:auto;padding:0 30px}header{height:75px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-weight:700;letter-spacing:2px;text-decoration:none;color:var(--text)}a{color:#c7dce0;text-underline-offset:3px}button,select{font:inherit;color:inherit;border:1px solid #51707a;background:#213e49;border-radius:7px;padding:10px 15px}button{cursor:pointer}button:hover:not(:disabled){background:#395864}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.intro{padding:29px 0 24px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--gold);margin:0 0 10px}h1{font:400 45px/1.05 Georgia,serif;letter-spacing:-1px;margin:0 0 14px}h1 br{display:none}h1 em{color:#ccdfdf;margin-left:8px}.intro>p:last-child{color:var(--muted);font-size:13px;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px}.layout>section{border:1px solid #50636a;border-radius:12px;overflow:hidden;align-self:start;background:#142c37}.statusbar{display:flex;justify-content:space-between;gap:10px;padding:15px 20px;background:#1a3541}.statusbar strong{font-size:13px;color:#e0d3b2}.statusbar span{font-size:10px;color:#b7c5c6;align-self:center}.table{position:relative;background:url('table.webp') center/100% 100%;aspect-ratio:1}.table #board{position:absolute;inset:9.6%;display:grid;box-shadow:0 2px 15px #08131855}#board button{padding:0;border:1px solid #66513a51;background:#715a3a05;border-radius:0;position:relative;display:grid;place-items:center;touch-action:manipulation}#board button:nth-child(even){background:#9c7c4d19}#board button:hover{background:#9c7c4d66}#board button.selected{background:#4f7c82a8;box-shadow:inset 0 0 0 2px #254a59}#board button.legal:after{content:"";width:18%;height:18%;border-radius:50%;background:#247c87aa;position:absolute}#board button.hinted{box-shadow:inset 0 0 0 4px #946622}#board button.special{background:#c89b4099}#board button.special:before{content:"✧";position:absolute;color:#7a582d;font-size:26px}#board button:focus-visible{z-index:3;outline-offset:-3px}.piece{display:grid;place-items:center;width:72%;height:72%;border-radius:50%;position:relative;box-shadow:inset 0 3px 4px #ffffff2b,0 3px 5px #0006;border:2px solid #3a4140;background:radial-gradient(circle at 35% 25%,#556371,#1b2730);z-index:1}.piece.white{background:radial-gradient(circle at 30% 25%,#fffdf0,#cbbd9e);border-color:#f7f1d7}.piece.king{border-color:#aa7438;color:#805024;background:radial-gradient(circle at 30% 25%,#fff8cc,#d4b775);font-size:clamp(16px,2.4vw,30px)}.celllabel{position:absolute;bottom:1px;left:2px;font-size:6px;color:#5d4e38;pointer-events:none}#message{font-size:12px;line-height:1.5;min-height:52px;padding:14px 18px;border-top:1px solid #6c7e77;background:#1d3843}.toolbar{display:flex;justify-content:space-between;gap:10px;padding:12px 15px}.toolbar button{font-size:11px;padding:9px 14px}aside{display:flex;flex-direction:column;gap:14px}.card{background:linear-gradient(145deg,#25414c,#192f39);border:1px solid var(--line);border-radius:10px;padding:20px}.card h2{font:400 26px/1.2 Georgia,serif;margin:12px 0 18px;color:#e0e7de}.card p:not(.eyebrow){color:#b6c7ca;font-size:12px;line-height:1.7;margin:12px 0}.card label{display:block;font-size:10px;color:#c2cfd1;margin:13px 0 6px}.card select{width:100%;font-size:12px;padding:10px 8px}.card p.note{font-size:10px;color:#a3b8bd}.key{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:4px}.ivory{background:#efdfbd}.charcoal{background:#182b36;border:1px solid #829ba2}#log{margin:0;padding-left:16px;color:#b6c8cd;font-size:11px;line-height:1.8}footer{font-size:10px;color:#92aeb8;padding:22px 0 30px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}footer button{border:0;background:none;padding:0;text-decoration:underline;font-size:10px;color:#c0d7d9}footer span{margin-left:auto}dialog{max-width:620px;width:calc(100% - 28px);background:#1b3540;color:#e0e8e4;border:1px solid #809599;border-radius:13px;padding:30px;line-height:1.7;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#041820cc;backdrop-filter:blur(5px)}dialog h2{font:32px Georgia,serif;color:#e4d3a6}dialog p,dialog li{font-size:13px}dialog li{margin:8px 0}#close{position:absolute;right:12px;top:8px;border:0;padding:0 8px;background:none;font-size:25px}code{overflow-wrap:anywhere;font-size:11px}#result{position:absolute;inset:25% 10%;z-index:5;background:#122d38f5;box-shadow:0 15px 60px #0006;border:1px solid #e1c98d;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}#result h2{font:32px Georgia,serif;margin:0;color:#f0deb7}#result p:not(.eyebrow){font-size:12px;line-height:1.6;color:#c6d2cd}.hidden{display:none!important}@media(max-width:760px){main{padding:0 14px}header{height:60px}.brand{font-size:12px;letter-spacing:1.7px}header button{font-size:10px;padding:8px}.intro{padding:23px 0}h1{font-size:34px}h1 br{display:block}h1 em{margin-left:0}.intro>p:last-child{font-size:11px}.layout{grid-template-columns:1fr;gap:14px}.statusbar{padding:13px}.statusbar strong{font-size:11px}.statusbar span{font-size:9px}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card{padding:14px}.card:last-child{grid-column:1/-1}.card h2{font-size:22px}.card p:not(.eyebrow){font-size:10px}.card select{font-size:10px}.card .eyebrow{font-size:8px;letter-spacing:1px}.card p.note{font-size:9px}.toolbar{gap:6px}.toolbar button{font-size:10px;padding:9px 13px}#message{font-size:11px;padding:11px 13px}.piece{border-width:1px}#board button.special:before{font-size:18px}.celllabel{font-size:5px}#result{inset:17% 6%;padding:18px}#result h2{font-size:26px}footer{font-size:9px;line-height:1.7}footer span{margin-left:0;width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
