.sokoban-area { max-width:640px; }
.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; flex-wrap:wrap; }
.stats b { color:var(--ink); font-size:17px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.board { display:inline-grid; gap:0; border:1px solid var(--rule); background:var(--panel); margin:0 auto; }
.cell { width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.cell.wall { background:var(--code); }
.cell.floor { background:var(--panel); }
.cell.goal::after { content:""; width:12px; height:12px; border:2px solid var(--cyan); border-radius:50%; }
.cell.box { background:var(--bluewash); }
.cell.box .box-ico { width:22px; height:22px; border-radius:5px; background:var(--orange); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
.cell.box.on-goal .box-ico { background:var(--cyan); }
.cell.player .player-ico { width:20px; height:20px; border-radius:50%; background:var(--blue); }
.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) {
  .cell { width:30px; height:30px; }
  .cell.goal::after { width:9px; height:9px; }
  .cell.box .box-ico { width:17px; height:17px; }
  .cell.player .player-ico { width:15px; height:15px; }
  .controls { flex-direction:column; align-items:stretch; }
  .stats { justify-content:space-between; }
  .actions { justify-content:center; }
}