/* =============================================================
   GAME: Box Pusher
   ============================================================= */
.board-boxpusher {
  --cell: min(calc((100vw - 60px) / var(--cols, 8)), 52px);
  --bp-glow: #ff8a3d;
  display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%;
}
.bp-stage {
  position: relative; display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell));
  touch-action: none; border-radius: 14px; outline: none; padding: 6px;
  filter: drop-shadow(0 0 16px rgba(255, 138, 61, .22)) drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
}
.bp-stage:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.bp-floor {
  position: relative; margin: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .035) 25%, transparent 25% 50%, rgba(255, 255, 255, .035) 50% 75%, transparent 75%) 0 0 / 50% 50%,
    #17122f;
  box-shadow: inset 0 0 0 1px rgba(160, 130, 255, .07);
}
.bp-goal::after {
  content: ""; position: absolute; inset: 27%; border-radius: 50%;
  border: 2px solid var(--bp-glow);
  background: radial-gradient(circle, rgba(255, 138, 61, .55) 0 18%, rgba(255, 138, 61, .12) 45%, transparent 70%);
  box-shadow: 0 0 10px rgba(255, 138, 61, .65), inset 0 0 6px rgba(255, 138, 61, .5);
  animation: bpgoal 1.6s ease-in-out infinite alternate;
}
@keyframes bpgoal { to { transform: scale(.82); box-shadow: 0 0 16px rgba(255, 138, 61, .9), inset 0 0 6px rgba(255, 138, 61, .5); } }
.bp-wall {
  position: relative;
  background: linear-gradient(160deg, #5a3f9e, #34236b 55%, #241852);
  box-shadow: inset 0 2px 0 rgba(220, 200, 255, .32), inset 0 -3px 0 rgba(0, 0, 0, .38), inset 2px 0 0 rgba(220, 200, 255, .1), 0 0 0 .5px #241852;
}
.bp-wall::after {
  content: ""; position: absolute; inset: 22%; border-radius: 30%;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.bp-box, .bp-player {
  position: absolute; left: 6px; top: 6px; width: var(--cell); height: var(--cell); pointer-events: none;
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell)));
  transition: transform .12s ease-out;
}
.bp-instant .bp-box, .bp-instant .bp-player { transition: none; }
.bp-box svg, .bp-player svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bp-box svg { padding: 4%; }
.bp-player { z-index: 2; }
.bp-player svg { padding: 3%; }

/* crate */
.bp-c-shadow { fill: rgba(0, 0, 0, .45); }
.bp-c-body { fill: #d9732a; stroke: #ffb46a; stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.bp-c-hi { fill: rgba(255, 236, 200, .35); }
.bp-c-panel { fill: #b45a1c; stroke: #7a3a0c; stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.bp-c-brace { stroke: #ffcf94; stroke-width: 3; stroke-linecap: round; fill: none; opacity: .9; }
.bp-c-bolt { fill: #ffe2b8; }
.bp-on svg { filter: drop-shadow(0 0 7px rgba(80, 255, 190, .85)); }
.bp-on .bp-c-body { fill: #1fbf8f; stroke: #9dffd9; }
.bp-on .bp-c-panel { fill: #138a68; stroke: #0b5440; }
.bp-on .bp-c-brace { stroke: #c4ffe9; }
.bp-on .bp-c-hi { fill: rgba(220, 255, 240, .4); }
.bp-done .bp-box svg { animation: bpcheer .7s ease-in-out infinite alternate; }
@keyframes bpcheer { to { transform: translateY(-8%) scale(1.04); } }

/* worker robot */
.bp-r-shadow { fill: rgba(0, 0, 0, .45); }
.bp-r-ant { stroke: #9ae8ff; stroke-width: 2; stroke-linecap: round; }
.bp-r-tip { fill: #ff5fd2; filter: drop-shadow(0 0 3px #ff5fd2); }
.bp-r-foot { fill: #1b5f8c; }
.bp-r-arm { fill: #23a6d8; stroke: #9ae8ff; stroke-width: 1; }
.bp-r-body { fill: #36d3ff; stroke: #c9f6ff; stroke-width: 1.4; }
.bp-r-hi { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-linecap: round; }
.bp-r-face { fill: #0b1030; stroke: #1a8fbf; stroke-width: 1; }
.bp-r-eye { fill: #7dfcff; filter: drop-shadow(0 0 2px #7dfcff); transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.bp-r-eyes { transition: transform .12s; }
.bp-r-cheek { fill: #ff8fd0; opacity: .85; }
.bp-player svg { filter: drop-shadow(0 0 6px rgba(54, 211, 255, .55)); }
.bp-face-l .bp-r-eyes { transform: translateX(-2.4px); }
.bp-face-r .bp-r-eyes { transform: translateX(2.4px); }
.bp-face-u .bp-r-eyes { transform: translateY(-1.8px); }
.bp-face-d .bp-r-eyes { transform: translateY(1.4px); }
.bp-happy .bp-r-eye { transform: scaleY(.35); }
.bp-happy svg { animation: bphop .5s ease-in-out infinite alternate; }
@keyframes bphop { to { transform: translateY(-10%); } }
.bp-bump-l svg { animation: bpbl .16s ease-out; }
.bp-bump-r svg { animation: bpbr .16s ease-out; }
.bp-bump-u svg { animation: bpbu .16s ease-out; }
.bp-bump-d svg { animation: bpbd .16s ease-out; }
@keyframes bpbl { 50% { transform: translateX(-8%); } }
@keyframes bpbr { 50% { transform: translateX(8%); } }
@keyframes bpbu { 50% { transform: translateY(-8%); } }
@keyframes bpbd { 50% { transform: translateY(8%); } }

/* on-screen pad */
.bp-pad {
  display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 50px); gap: 8px;
  grid-template-areas: "undo u reset" "l d r";
}
.bp-pad button {
  border: 0; border-radius: 14px; cursor: pointer; font: 700 1.35rem/1 var(--font-body); color: var(--ink);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .45), 0 4px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(255, 138, 61, .12);
  touch-action: manipulation; transition: transform .08s, box-shadow .08s;
}
.bp-pad button:hover { box-shadow: inset 0 0 0 1px var(--bp-glow), 0 4px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 138, 61, .3); }
.bp-pad button:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px var(--bp-glow), 0 1px 0 rgba(0, 0, 0, .35); }
.bp-pad-u { grid-area: u; } .bp-pad-d { grid-area: d; } .bp-pad-l { grid-area: l; } .bp-pad-r { grid-area: r; }
.bp-pad-undo { grid-area: undo; } .bp-pad-reset { grid-area: reset; }
.bp-pad .bp-pad-undo, .bp-pad .bp-pad-reset { font-size: 1.15rem; color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }

.bp-dot { background: radial-gradient(circle at 35% 30%, #ffd2a8, #ff8a3d 55%, #a84a10); }
.bp-best { color: #ffc08a; }
.bp-lvl select { max-width: 9.5em; }
@media (max-width: 600px) {
  .bp-pad { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(2, 54px); }
  .statusbar .bp-goals { display: none; }
}