/* Layout: one-screen app. Header strip (title + aisle code) / board / counters + controls.
   Look: warehouse floor — concrete, steel racks, kraft boxes, safety-yellow floor paint. */
:root {
  --bg: #d9dedb;          /* concrete, slight green-grey bias */
  --panel: #e8ebe7;
  --fg: #1d262b;
  --muted: #5b676c;
  --line: #b9c1bd;
  --accent: #e0531f;      /* safety orange */
  --paint: #e9b81a;       /* floor paint yellow */
  --ok: #2f8a5b;

  --floor: #e9ece8;
  --floor-seam: #d3d9d5;
  --wall: #34424c;
  --wall-top: #4b5c68;
  --box: #c58e52;
  --box-edge: #8f5f2e;
  --tape: #e7c98f;
  --box-done: #b88a4e;
  --player: #e0531f;
  --hat: #f2c418;
  --dead: #c2362b;
  --l1: #2766c4;          /* destination labels: blue circle */
  --l2: #c23f86;          /* magenta triangle */
  --l3: #1f7a4a;          /* green square */
  --l4: #a86f00;          /* amber diamond (violet was identical to blue for deuteranopes) */
  --sticker-fg: #ffffff;
  --belt: #56636b;        /* roller conveyor */
  --belt-roller: #6f7d85;
  --belt-arrow: #e9b81a;
  --scale: #b7c0c4;       /* platform scale */
  --scale-rim: #7f8b91;
  --shutter: #8a6d3b;     /* roller shutter */
  --shutter-slat: #6b522a;
  --sign: #ffffff;        /* sorting-gate sign */
  --unreach: rgba(52, 66, 76, 0.22);  /* floor the worker can't reach right now */

  --font-display: 'Dela Gothic One', 'Hiragino Kaku Gothic StdN', 'Yu Gothic', sans-serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  --font-num: 'Big Shoulders Stencil Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151a1d; --panel: #1d2428; --fg: #e3e8e5; --muted: #95a29f; --line: #2f393e;
    --accent: #f06a35; --paint: #e6b51e; --ok: #4fb985;
    --floor: #232b30; --floor-seam: #2c363c; --wall: #0b0f12; --wall-top: #3a4852;
    --box: #b98146; --box-edge: #6e4720; --tape: #d9b878; --box-done: #a87a43;
    --player: #f06a35; --hat: #f2c418; --dead: #e2564a;
    --l1: #4a8ef0; --l2: #e65fa8; --l3: #35a86a; --l4: #e3a21a; --sticker-fg: #10161a;
    --belt: #3a454c; --belt-roller: #4c5961; --belt-arrow: #d9a91c;
    --scale: #4a565d; --scale-rim: #6c7a82; --shutter: #8d6e3a; --shutter-slat: #5f4822; --sign: #e9eef0; --unreach: rgba(0, 0, 0, 0.38);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151a1d; --panel: #1d2428; --fg: #e3e8e5; --muted: #95a29f; --line: #2f393e;
  --accent: #f06a35; --paint: #e6b51e; --ok: #4fb985;
  --floor: #232b30; --floor-seam: #2c363c; --wall: #0b0f12; --wall-top: #3a4852;
  --box: #b98146; --box-edge: #6e4720; --tape: #d9b878; --box-done: #a87a43;
  --player: #f06a35; --hat: #f2c418; --dead: #e2564a;
  --l1: #4a8ef0; --l2: #e65fa8; --l3: #35a86a; --l4: #e3a21a; --sticker-fg: #10161a;
  --belt: #3a454c; --belt-roller: #4c5961; --belt-arrow: #d9a91c;
  --scale: #4a565d; --scale-rim: #6c7a82; --shutter: #8d6e3a; --shutter-slat: #5f4822; --sign: #e9eef0; --unreach: rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.app {
  box-sizing: border-box;
  height: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0;
}
.aisle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.aisle-code {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.06em;
  color: var(--fg);
  background: var(--paint);
  color: #1d262b;
  padding: 0 8px;
  line-height: 1.15;
}
.aisle-name { color: var(--muted); font-size: 14px; }

.app > * { flex: none; }      /* only the board area grows and shrinks */
.app > .stage {
  flex: 1 1 auto;
  min-height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
canvas#board {
  display: block;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}
.banner {
  background: var(--panel);
  border: 2px solid var(--fg);
  padding: 6px 10px;
  display: flex;
  gap: 4px 12px;
  align-items: center;
  flex-wrap: wrap;
}
.banner strong { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.banner span { font-size: 13px; flex: 1 1 12em; min-width: 0; }

.note {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
}
.note .tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1d262b;
  background: var(--paint);
  padding: 1px 6px;
}
.legend { border: 1.5px solid var(--line); background: var(--panel); padding: 8px 10px; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 6px 14px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.legend canvas, .legend-frame, .legend-star { flex: none; width: 28px; height: 28px; }
.legend-frame { box-sizing: border-box; border: 3px solid var(--dead); }
.legend-star { color: var(--paint); font-size: 20px; text-align: center; line-height: 28px; }
.status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); }
.status.warn { color: var(--dead); font-weight: 700; }
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.counters { display: flex; gap: 18px; }
.counter { display: flex; flex-direction: column; line-height: 1; }
.counter .label { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }
.counter .value {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}
.counter .value.over { color: var(--muted); }
.counter.par .value { color: var(--muted); }
.banner.perfect { border-color: var(--paint); box-shadow: inset 0 0 0 2px var(--paint); }
@media (max-height: 700px) { .help { display: none; } .note { font-size: 13px; } }
.levels button.perfect::after { content: '★'; font-size: 11px; margin-left: 2px; color: var(--paint); }
.buttons { display: flex; gap: 6px; flex-wrap: wrap; }
button {
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--panel);
  border: 1.5px solid var(--line);
  padding: 7px 11px;
  cursor: pointer;
  border-radius: 3px;
}
button:hover { border-color: var(--fg); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
kbd {
  font-family: var(--font-num);
  font-size: 12px;
  border: 1px solid var(--line);
  padding: 0 4px;
  margin-left: 4px;
  color: var(--muted);
}

.pad {
  display: none;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 48px);
  gap: 6px;
  justify-content: center;
}
.pad button { font-size: 20px; padding: 0; }
.pad .up { grid-column: 2; grid-row: 1; }
.pad .left { grid-column: 1; grid-row: 2; }
.pad .down { grid-column: 2; grid-row: 2; }
.pad .right { grid-column: 3; grid-row: 2; }


.levels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.levels { gap: 6px 14px; }
.chapter { display: flex; gap: 4px; align-items: center; flex: none; }
.chapter-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-right: 2px;
}
.levels button {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 16px;
  min-width: 40px;
  padding: 4px 6px;
}
.levels button.done { border-color: var(--ok); color: var(--ok); }
.levels button.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.help { color: var(--muted); font-size: 13px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* touch devices: compact pad, one scrolling row of aisles (kept last so it wins) */
.touch-only { display: none; }
@media (pointer: coarse) {
  .pad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 42px); }
  kbd, .keys-only { display: none; }
  .touch-only { display: inline; }
  .levels { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .levels button { flex: none; }
}/* very short phones: tapping and swiping already move the worker, give the board the room */
@media (pointer: coarse) and (max-height: 640px) {
  .pad { display: none; }
}