:root{color-scheme:dark;--bg:#302e2b;--panel:#262521;--line:#45443e;--muted:#aaa9a1;--green:#81b64c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f4ee;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.app{display:flex;min-height:100vh}.nav{width:188px;background:#252421;display:flex;flex-direction:column;padding:27px 16px 24px;position:fixed;inset:0 auto 0 0}.logo{font-weight:900;letter-spacing:-1.1px;font-size:23px;text-decoration:none;color:#f7f8f2;white-space:nowrap}.logo>span:first-child{font-size:29px;color:#81b64c;margin-right:4px}.logo>span:nth-child(2){color:#a5ce78}.logo small{font-size:8px;letter-spacing:1px;color:#a6a99f;margin-left:5px}.nav-group{margin-top:48px;display:grid;gap:6px}.nav-group a,.nav-active{color:#c7c6bd;text-decoration:none;padding:13px 12px;border-radius:8px;font-size:14px;font-weight:700}.nav-group span{font-size:20px;display:inline-block;width:32px;color:#a3a89b}.nav-active{background:#393c31;color:#fff}.nav-active span{color:#9bcc69}.nav-group a:hover{background:#33322e}.nav-foot{margin-top:auto;color:#8d8d83;font-size:12px;line-height:1.7}.nav-foot strong{color:#c9c9bf}.nav-dot{margin-top:22px;color:#a2be8d;font-size:10px}main{margin-left:188px;width:calc(100% - 188px);padding:38px clamp(20px,4vw,64px) 20px;max-width:1700px}.top{max-width:1260px;display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.15em;color:#a4c482}.top h1{font-size:clamp(25px,2.8vw,36px);letter-spacing:-1px;margin:7px 0 4px}.top h1 span{color:#9bc96d}.top p{color:#aead9f;font-size:13px;margin:0}.top-badge{font-size:10px;letter-spacing:1px;color:#c1ceb4;border:1px solid #51564b;border-radius:20px;padding:8px 11px;white-space:nowrap}.top-badge i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#85bb52;margin-right:5px}.game-layout{display:grid;grid-template-columns:minmax(300px,710px) minmax(295px,365px);gap:28px;max-width:1120px;align-items:start}.board-area{min-width:0}.player{display:flex;align-items:center;gap:11px;margin:0 0 10px;min-height:44px}.bottom-player{margin:10px 0}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;font-size:27px}.bot{background:#bac7d2;color:#3b4a55}.human{background:#9a896e;color:#faf2df}.player strong,.player span{display:block}.player strong{font-size:14px}.player span{font-size:11px;color:#b5b3aa;margin-top:3px}.turn-chip{margin-left:auto;color:#888982;font-size:10px;letter-spacing:.04em;font-weight:800}.turn-chip.active{color:#acd888}.board{aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border-radius:4px;overflow:hidden;box-shadow:0 14px 35px #0003;touch-action:manipulation}.square{position:relative;border:0;padding:0;display:grid;place-items:center;min-width:0;cursor:pointer}.square.light{background:#ebecd0}.square.dark{background:#779556}.square.last.light{background:#f4f682}.square.last.dark{background:#bbcc44}.square.selected.light{background:#f6f68a}.square.selected.dark{background:#bacb42}.square:focus-visible{outline:3px solid #ffde72;outline-offset:-3px;z-index:3}.piece{width:100%;height:100%;position:absolute;z-index:1;user-select:none;touch-action:none}.dot{width:26%;height:26%;border-radius:50%;background:#0003;z-index:2;pointer-events:none}.capture{position:absolute;inset:4%;border:6px solid #0003;border-radius:50%;z-index:2;pointer-events:none}.coord{position:absolute;font-weight:800;font-size:clamp(8px,1vw,13px);z-index:2;pointer-events:none}.rank{top:2px;left:4px}.file{right:4px;bottom:1px}.light .coord{color:#779556}.dark .coord{color:#ebecd0}.board-meta{display:flex;justify-content:space-between;align-items:center;color:#aaa99f;font-size:11px;margin-top:15px}.board-meta button{border:0;color:#c0bfb5;background:none;cursor:pointer;font-weight:650}.side{display:grid;gap:14px}.panel{background:var(--panel);border:1px solid #393832;border-radius:10px;padding:21px}.panel-head,.setup-title{display:flex;justify-content:space-between;align-items:center}.panel h2{font-size:20px;letter-spacing:-.4px;margin:5px 0 0}.panel-icon{display:grid;place-items:center;background:#41483b;border-radius:10px;width:42px;height:42px;color:#b9d69e;font-size:28px}.status-box{margin-top:20px;background:#33382e;border:1px solid #46533d;border-radius:7px;display:flex;align-items:center;gap:10px;padding:12px}.status-indicator{width:8px;height:8px;background:#91c462;border-radius:50%;flex:none}.status-box strong,.status-box span{display:block}.status-box strong{font-size:13px}.status-box span{font-size:11px;color:#a9b4a1;margin-top:3px}.move-head{display:flex;justify-content:space-between;margin:22px 0 10px;color:#aaa99d;font-size:10px;letter-spacing:.09em;font-weight:800}.move-head span:last-child{color:#77796f}.move-list{height:145px;overflow:auto;background:#302f2b;border-radius:6px;font-size:13px}.empty{color:#84847b;text-align:center;padding:55px 8px;font-size:12px}.move-row{display:grid;grid-template-columns:42px 1fr 1fr;padding:7px 10px}.move-row:nth-child(even){background:#373631}.move-row .num{color:#9e9d92}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.btn{border:0;border-radius:6px;padding:12px;font-weight:800;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#41403b;color:#e4e4dc;font-size:12px}.secondary:hover:not(:disabled){background:#515049}.setup-title>span{font-size:20px;color:#999a90}.field-label{display:flex;justify-content:space-between;margin-top:19px;font-size:12px;font-weight:750}.field-label b{color:#b4dc8c;font-size:15px}input[type=range]{accent-color:#86b653;width:100%;margin:13px 0 4px;cursor:pointer}.range-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.07em;color:#8e8e85;font-weight:800}.disclaimer{font-size:11px;color:#9c9d92;line-height:1.4}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0 17px}.colors button{background:#363530;color:#aaa9a1;border:1px solid #494842;border-radius:6px;padding:9px 4px;font-size:11px;font-weight:700;cursor:pointer}.colors button span{font-size:19px;display:block;color:#e8e9de}.colors button.selected{background:#404e34;border-color:#83b757;color:#e0f3ce}.primary{width:100%;background:#81b64c;color:white;box-shadow:0 4px 0 #5f8d35;font-size:14px}.primary:hover{background:#92c65c}.primary span{float:right}.help{font-size:11px;color:#98998f;line-height:1.5;margin:15px 0 0}footer{max-width:1120px;border-top:1px solid #494740;margin-top:30px;padding:18px 0;color:#85857d;font-size:10px;font-weight:700;letter-spacing:.08em}footer span{color:#77a950;margin:0 8px}footer a{float:right;color:#a4a99a;letter-spacing:0}dialog{background:#292923;color:#fff;border:1px solid #646458;border-radius:12px;text-align:center}dialog::backdrop{background:#000a}#promotion-options{display:flex;gap:8px}#promotion-options button{background:#484840;border:0;border-radius:7px;padding:5px;cursor:pointer}#promotion-options img{width:60px;display:block}@media(max-width:1050px){.nav{width:65px;align-items:center;padding:22px 5px}.logo{font-size:0}.logo>span:first-child{font-size:32px}.logo>span:nth-child(2),.logo small,.nav-foot{display:none}.nav-group{width:100%;text-align:center}.nav-group a,.nav-active{font-size:0;padding:12px 0}.nav-group span{width:auto;font-size:23px}main{margin-left:65px;width:calc(100% - 65px);padding:30px 22px}.game-layout{gap:18px;grid-template-columns:minmax(300px,1fr) minmax(275px,330px)}}@media(max-width:720px){.nav{position:static;width:auto;height:58px;flex-direction:row;justify-content:space-between;padding:0 16px}.logo{font-size:20px}.logo>span:first-child{font-size:25px}.logo>span:nth-child(2){display:inline}.nav-group{display:flex;margin:0;width:auto}.nav-group a,.nav-active{padding:8px 12px}.app{display:block}main{width:100%;margin:0;padding:25px 16px}.game-layout{display:flex;flex-direction:column;gap:20px}.board-area,.side{width:100%;max-width:600px;margin:auto}.top{margin-bottom:22px}.top-badge{display:none}.top h1{font-size:25px}.move-list{height:110px}.empty{padding:39px 8px}footer a{float:none;display:block;margin-top:10px}}

/* Visual feedback and motion */
.board{position:relative;isolation:isolate}.square{transition:filter .15s ease}.square:hover{filter:brightness(1.08)}.square.check{background:radial-gradient(circle at center,#fa3d37 0%,#d53232 45%,#8e231e 84%);animation:check-pulse .8s ease-out}.square.check .coord{color:#fff}.square.selected{box-shadow:inset 0 0 0 3px #ffed99}.piece{transition:filter .16s ease}.square:hover .piece{filter:drop-shadow(0 3px 3px #0005)}.square .dot{box-shadow:0 0 0 1px #ffffff28}.capture{border-width:7px}.moving-piece{position:absolute;pointer-events:none;z-index:9;object-fit:contain;filter:drop-shadow(0 5px 4px #0005)}.captured{display:flex;min-height:0;align-items:center;flex-wrap:wrap;max-width:190px}.captured:empty{display:none}.captured img{width:19px;height:19px;margin-right:-4px}.board-tools{display:flex;gap:8px}.board-tools button{white-space:nowrap}.move-legend{display:flex;gap:14px;padding-top:12px;color:#a9aaa0;font-size:10px}.move-legend span{display:flex;align-items:center;gap:5px}.move-legend i{width:9px;height:9px;background:#829c69;border-radius:50%}.move-legend span:nth-child(2) i{background:#e34e43}.copy-game{width:100%;border:1px solid #484740;background:transparent;color:#b9bab0;padding:10px;margin-top:9px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700}.copy-game:hover{background:#36352f;color:#fff}.move-row span.current{background:#646e4f;border-radius:3px;color:#fff;font-weight:800}.status-box{transition:background .2s,border-color .2s}.status-box.check-status{background:#472e2b;border-color:#a14c43}.status-box.check-status .status-indicator{background:#f06e5e}.turn-chip.active{animation:turn-pulse 1.8s ease-in-out infinite}.btn,.colors button,.board-tools button{transition:background .2s,transform .2s}.btn:active,.colors button:active{transform:translateY(2px)}@keyframes check-pulse{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}@keyframes turn-pulse{50%{opacity:.6}}@media(max-width:480px){.board-meta{align-items:flex-start;gap:8px;flex-wrap:wrap}.board-tools{margin-left:auto}.captured img{width:16px;height:16px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}