/* SOUNDING — cabinet-specific bits. Shared chrome is engine/cabinet.css. */
:root { --ember: #7fe3ff; --ember-hot: #d9f6ff; --socket: #7fe3ff; }

.meta .flex { flex: 1; }
#pings-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: 12px; line-height: 1; }
.key-port, .key-distance { color: var(--ember); }
.key-stone { color: #ef7676; font-size: 15px !important; }

#echo-log {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  min-height: 29px; margin: -4px 0 10px;
}
.echo {
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--dim); padding: 4px 8px; font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.echo b { color: var(--ember-hot); }
.echo.stopped b { color: #ef7676; }
.echo-empty { color: #4a4f5e; font-size: 10px; padding: 4px 0; }

.place-key {
  margin: -7px 0 12px; color: var(--dim); text-align: center; font-size: 10.5px;
}
.place-key b { color: var(--ink); font-weight: 600; }
.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(4, 1fr); gap: 7px; justify-content: center; margin-bottom: 14px; }
.piece {
  min-width: 0; padding: 10px 4px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
  color: inherit; font: inherit; text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.piece b { display: block; font-size: 10px; letter-spacing: .08em; color: var(--dim); white-space: nowrap; }
.piece span { font-size: 10px; letter-spacing: .1em; color: #4a4f5e; }
.piece.sel { border-color: var(--ember); background: #06222b; transform: translateY(-2px); }
.piece.sel b { color: var(--ember); }
.piece.erase.sel { border-color: #ef7676; background: #2a0d12; }
.piece.erase.sel b { color: #ef7676; }

@media (max-width: 390px) {
  .piece { padding: 9px 2px; }
  .piece b { font-size: 9px; }
  .piece span { font-size: 8px; letter-spacing: .04em; }
}

#controls .row { display: flex; gap: 8px; }
.score.perfect { color: var(--ember-hot); text-shadow: 0 0 30px rgba(127,227,255,.55); }
.score.partial { color: #ffb34d; text-shadow: 0 0 26px rgba(255,179,77,.35); }
.score.wrong { color: var(--bad); text-shadow: 0 0 26px rgba(239,83,80,.4); }

#board-wrap { width: min(100%, max(300px, calc(100vh - 400px)), 520px); margin: 0 auto; }