*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(94vw,440px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between}.title{font-size:clamp(28px,8vw,44px);font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(135deg,#e6543b,#b8341f 45%,#7a4a2e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.stats{display:flex;gap:8px}.stat{flex:1;background:linear-gradient(160deg,color-mix(in srgb,var(--board-bg) 82%,#fff 18%),var(--board-bg));color:var(--accent-text);border-radius:8px;padding:6px 10px;text-align:center;box-shadow:inset 0 1px #ffffff2e,0 1px 2px #0000002e}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.stat .value{font-size:22px;font-weight:800;line-height:1.1}.status{font-size:16px;font-weight:700;text-align:center;min-height:22px}.board-wrap{position:relative;width:100%}.board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1 / 1;padding:3.4%;border-radius:14px;gap:0;overflow:hidden;background:repeating-linear-gradient(112deg,#3c221029 0 3px,#784e2a0d 3px 8px,#28160a24 8px 12px),linear-gradient(150deg,#6f4a2c,#5a3a22 48%,#45291607 48%,#7a5231),#5a3a22;box-shadow:inset 0 0 0 2px #ffe1be1a,inset 0 2px 3px #ffebcd24,inset 0 -6px 14px #0000006b,0 10px 26px #00000057,0 2px 5px #00000047}.sq{position:relative;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center}.sq.light{background-color:#e7cfa2;background-image:repeating-linear-gradient(87deg,#9669371a 0 2px,#fff6e01a 2px 4px,#9669370f 4px 7px),radial-gradient(120% 60% at 20% 0%,#fff8e647,#fff8e600 60%),linear-gradient(158deg,#f0dcb4,#dcbf8c)}.sq.dark{background-color:#6f4a2b;cursor:pointer;background-image:repeating-linear-gradient(84deg,#2312073d 0 2px,#78502c1a 2px 5px,#23120729 5px 8px),radial-gradient(130% 70% at 80% 100%,#140a044d,#140a0400 62%),linear-gradient(158deg,#7d5533,#5f3d22)}.sq:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #0000000f;pointer-events:none}.sq.dark:hover{filter:brightness(1.08)}.piece{position:relative;width:78%;height:78%;border-radius:50%;transform:scale(0);transition:transform .16s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center}.piece.filled{transform:scale(1)}.piece.red{background:radial-gradient(circle at 38% 30%,#ff9c82,#ec4a34 42%,#c22a1c 74%,#911b12);box-shadow:0 5px 8px #3c0a056b,0 1px 2px #00000059,inset 0 3px 4px #ffdccd73,inset 0 -6px 9px #5a0a058c,inset 0 0 0 2px #ffe1d238,inset 0 0 0 4px #78140c52,inset 0 0 0 6px #ffd7c824,inset 0 0 0 8px #78140c47}.piece.black{background:radial-gradient(circle at 38% 30%,#7c7c86,#3a3a41 42%,#202024 74%,#0d0d10);box-shadow:0 5px 8px #00000080,0 1px 2px #0006,inset 0 3px 4px #ffffff47,inset 0 -6px 9px #0009,inset 0 0 0 2px #ffffff24,inset 0 0 0 4px #0006,inset 0 0 0 6px #ffffff14,inset 0 0 0 8px #0000005c}.piece.filled:before{content:"";position:absolute;width:58%;height:58%;border-radius:50%;box-shadow:inset 0 1px 2px #00000059,inset 0 -1px 1px #ffffff2e,0 0 0 1px #0000001a}.piece.red.filled:before{background:radial-gradient(circle at 40% 34%,#ffb4a04d,#96190f1f)}.piece.black.filled:before{background:radial-gradient(circle at 40% 34%,#ffffff29,#00000026)}.piece.king:before{box-shadow:inset 0 0 0 2px #ffcd5ad9,inset 0 1px 3px #0006,0 0 8px #ffc44a8c}.piece.king:after{content:"♛";position:relative;font-size:clamp(13px,4.8vw,24px);line-height:1;background:linear-gradient(#fff0b8,#ffcf4a,#e79a1e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 1px rgba(60,30,0,.7));animation:crown-pop .42s cubic-bezier(.34,1.56,.64,1)}@keyframes crown-pop{0%{transform:scale(0) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.sq.cursor{outline:3px solid #4aa3ff;outline-offset:-3px;z-index:5}.sq.sel{box-shadow:inset 0 0 0 4px #ffcd4af2,inset 0 0 14px #ffc44a80;z-index:2}.sq.target{cursor:pointer}.sq.target:before{content:"";position:absolute;width:32%;height:32%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffe598,#f4b62e);box-shadow:0 0 10px #ffc44ab3,inset 0 -2px 3px #78460066;pointer-events:none;z-index:3;animation:target-pulse 1.1s ease-in-out infinite}@keyframes target-pulse{0%,to{transform:scale(1);opacity:.92}50%{transform:scale(1.16);opacity:1}}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);backdrop-filter:blur(2px);border-radius:14px;z-index:10}.overlay[hidden]{display:none}.overlay-card{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}.overlay-msg{font-size:clamp(22px,7vw,32px);font-weight:800;color:var(--text)}.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.how{font-size:13px;opacity:.85;flex:1}.how b{font-weight:700}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px #fff3,0 2px 5px #00000038;transition:filter .12s ease,transform .12s ease}.btn:hover{filter:brightness(1.06)}.btn:active{filter:brightness(.95);transform:translateY(1px)}@media(max-width:375px){.how{font-size:12px}}