/* LOCKSTEP — cabinet-specific bits. Shared chrome is engine/cabinet.css. */
:root { --ember: #ffc857; --ember-hot: #fff0c2; }

.meta .flex { flex: 1; }
#par-chip b { color: var(--ember); font-variant-numeric: tabular-nums; }

.board-key {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 7px 0 4px; color: var(--dim); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
}
.board-key span { display: inline-flex; align-items: center; gap: 4px; }
.board-key b { font-size: 15px; line-height: 1; }
.key-walker { color: var(--ember); }
.key-plate { color: #9aa4b6; }
.key-wall { color: #353b49; }

.help-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.help-actions .primary { margin-top: 12px; }
.help-actions .ghost { border: 0; padding: 4px 10px; }

#rack {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px;
  margin-bottom: 7px;
}
.slot {
  position: relative; aspect-ratio: 1/1.35; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer; user-select: none;
  transition: border-color .1s, background .1s, transform .1s;
}
.slot:hover { border-color: #3b3b4d; }
.slot .sn { position: absolute; top: 2px; left: 4px; font-size: 8px; color: #4a4f5e; }
.slot .sg { font-size: 17px; line-height: 1; color: var(--ember); }
.slot .sl { font-size: 7px; letter-spacing: .06em; color: var(--dim); }
.slot .se { font-size: 7px; letter-spacing: .08em; color: #687084; }
.slot.empty { border-style: dashed; }
.slot.dead { opacity: .3; }                 /* past the first gap: never runs */
.slot.pc {
  border-color: var(--ember); background: #221a06; transform: translateY(-3px);
  box-shadow: 0 0 14px rgba(255,200,87,.35);
}
#rack.locked .slot { cursor: default; }

.program-key {
  display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 7px;
  align-items: baseline; margin: 0 auto 14px; max-width: 370px;
  color: var(--dim); font-size: 9px;
}
.program-key b { color: var(--ember); font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
.program-key span { white-space: nowrap; }

#controls .row { display: flex; gap: 8px; }
.score.perfect { color: #6ee7a8; text-shadow: 0 0 30px rgba(110,231,168,.55); }

@media (max-width: 420px) {
  .slot .sl { display: none; }
  .slot .sg { font-size: 15px; }
}

/* A 7x7 floor does not need the full 620px column — at that size the cells are
   huge and the program rack falls below the fold, which is the one place the
   player's eyes need to be at the same time as the board. */
#board-wrap { width: min(100%, max(280px, calc(100vh - 430px)), 460px); margin: 0 auto; }