:root{color-scheme:light;--bg:#edf3ef;--ink:#203f3a;--green:#365f51;--line:#cbd8cd;font-family:'Microsoft YaHei',system-ui,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:24px 16px}
button,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:11px 16px;background:#f7f9f5}
button:hover:not(:disabled){background:#e0e8da}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,select:focus-visible{outline:3px solid #c76850;outline-offset:3px}
.game{width:100%;max-width:420px;margin:0 auto}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
h1{font-size:22px;margin:0;font-weight:600}
select{min-width:130px;max-width:65%;background:#f7f9f5;border:1px solid var(--line);border-radius:5px;padding:8px 10px}
.board-surround{background:var(--green);padding:12px 12px 0;border-radius:8px}
.board{position:relative;aspect-ratio:4/5;width:100%;background:#26483b;border-radius:4px;touch-action:none;user-select:none;-webkit-user-select:none}
.piece{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#b5c6ae;color:#304c40;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .12s ease;will-change:transform}
.piece.dragging{cursor:grabbing;z-index:2;transition:none}
.piece.cao{background:#c96b52;color:#fff1d6}
.piece.horizontal{background:#d4c79e}
.piece.soldier{background:#dde3d0;color:#62765b}
.piece-name{font-family:'Songti SC',SimSun,serif;font-size:26px;pointer-events:none}
.vertical .piece-name{writing-mode:vertical-rl;letter-spacing:5px}
.cao .piece-name{font-size:34px}
.exit{height:28px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#d4dfc6;margin:0 25%;border-top:3px solid #9cac86}
.game-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:20px 0;gap:10px;text-align:center}
.game-stats span{font-size:12px;color:#6b7e70;display:block}
.game-stats strong{display:block;font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:6px}
.game-actions{display:flex;gap:10px}
.game-actions button{flex:1;min-width:0}
#status{font-size:12px;color:#61766a;line-height:1.7;min-height:21px;margin:12px 0 0;text-align:center}
.piece.hinted{outline:4px solid #fff0a6;outline-offset:-5px;z-index:2}
.hint-target{position:absolute;z-index:0;border:3px dashed #ffe589;border-radius:6px;background:#ffe58935;box-shadow:inset 0 0 0 1px #fff8c4;pointer-events:none;animation:targetPulse 1.2s ease-in-out infinite alternate}
@keyframes targetPulse{to{background:#ffe58965;box-shadow:inset 0 0 0 2px #fff9d4}}
dialog{width:calc(100% - 32px);max-width:360px;border:1px solid var(--line);border-radius:8px;padding:24px;background:#f1f5ed;color:var(--ink)}
dialog::backdrop{background:#16392c77}
dialog h2{font-size:22px;margin:0 0 14px}
dialog p{font-size:14px;line-height:1.8;margin-bottom:22px}
dialog button{margin-right:8px}
@media(max-width:380px){body{padding:16px 12px}.piece-name{font-size:23px}.cao .piece-name{font-size:29px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}