.klotski-area { max-width:520px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.stats { display:flex; gap:16px; color:var(--muted); font-size:14px; }
.stats b { color:var(--ink); font-size:17px; }
.actions { display:flex; gap:8px; }
.board { position:relative; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr); aspect-ratio:4/5; width:100%; max-width:400px; margin:0 auto; border:1px solid var(--rule); background:var(--paper); gap:3px; padding:3px; }
.exit-mark { position:absolute; left:25%; right:25%; bottom:0; height:6px; background:var(--cyan); opacity:.55; border-radius:3px 3px 0 0; pointer-events:none; }
.piece { display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.02em; border:1px solid transparent; user-select:none; cursor:pointer; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:background .15s,border-color .15s; }
.piece.cao { background:#d9a441; color:#2a1e05; font-size:20px; }
.piece.general { background:var(--blue); color:#fff; font-size:14px; }
.piece.guanyu { background:var(--cyan); color:#fff; font-size:15px; }
.piece.soldier { background:var(--muted); color:#fff; font-size:12px; }
.piece.selected { outline:3px solid var(--orange); outline-offset:-2px; }
.touch-pad { display:none; max-width:220px; margin:14px auto 0; grid-template-columns:repeat(3,1fr); gap:8px; }
.touch-pad .touch-btn { padding:10px; font-size:15px; }
.touch-pad .touch-mid { display:contents; }
.win-panel { max-width:360px; margin:18px auto 0; padding:24px; text-align:center; }
.win-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.win-panel p { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) {
  .piece.cao { font-size:15px; }
  .piece.general, .piece.guanyu { font-size:11px; }
  .piece.soldier { font-size:9px; }
  .touch-pad { display:grid; }
  .controls { flex-direction:column; align-items:stretch; }
  .stats { justify-content:space-between; }
  .actions { justify-content:center; }
}