/* ============================================================
   HINTS — all hints-system styling in one place.
   (.kb + --kb-* here; .pd-* face atoms, shoulder button, PLAY icon colors
   and helpbar rows below — moved here from ui.css/console.css.)
   Designed in assets/artwork/keyboard-hints.af, deployed here:
   public/css/hints.css (loaded after ui.css + console.css).
   The genre-accent wash (FULL ACCENT) still lives in console.css — that is
   the site theme, not hints: it colors all text including hints.
   ------------------------------------------------------------
   One div per key, the text sits raw inside it. The div IS the inner
   box; ::after draws the outer box around it.
   Equal air on all sides => always square as a minimum.
   Long text (BACKSPACE) only makes them wider.
   --kb-shift moves outer down (positive = overlap at the top).
   Usage: <link rel="stylesheet" href="css/hints.css">
         <span class="kb">W</span>
   ============================================================ */

:root {
  --kb-bg: var(--bg);
  --kb-ink: var(--ink);
  --kb-line: var(--sub);

  --kb-inner: 18px;      /* inner minimum (square) */
  --kb-font-size: 11px;

  --kb-stroke: 1px;
  --kb-radius: 6px;      /* outer radius (inner = this minus pad) */
  --kb-pad: 3px;         /* air between the boxes, all the way around */
  --kb-shift: 3px;       /* outer shifted down — overlaps the top lines */
  --kb-pad-x: 5px;       /* extra side room for long text */
  --kb-key-gap: 18px;    /* distance between keys */
}

.kb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kb-inner);
  height: var(--kb-inner);
  width: max-content;
  padding: 0 var(--kb-pad-x);
  /* the outer box sticks out past the element — reserve the room here,
     so there is always at least the flex gap (2px minimum) to neighbors and text */
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  /* .kb is never pixel font — re-enable smoothing so it doesn't inherit
     -webkit-font-smoothing:none from pixel parents (.play-btn, .shoulder) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}

/* inner box — above outer */
.kb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: calc(var(--kb-radius) - var(--kb-pad));
  pointer-events: none;
}

/* outer box — rearmost */
.kb::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: calc(-1 * var(--kb-pad));
  right: calc(-1 * var(--kb-pad));
  top: calc(var(--kb-shift) - var(--kb-pad));
  bottom: calc(-1 * (var(--kb-pad) + var(--kb-shift)));
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: var(--kb-radius);
  pointer-events: none;
  background: var(--kb-bg);
}

.keys {
  display: flex;
  gap: var(--kb-key-gap);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   FACE ATOMS (.pd-*) — gamepad icons in the same language as .kb
   (vars, double shape, shift). .pd-round is a FULLY ROUND button
   (arrows + A/B/X/O); .pd-pill/.pd-shoulder have their own shape.
   Reuses the --kb-* vars so faces follow the accent automatically.
   ============================================================ */
.pd-round {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kb-inner);
  height: var(--kb-inner);
  padding: 0;
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.pd-round::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: 999px;
  pointer-events: none;
}
/* inner + outer same diameter (both round), outer shifted down. */
.pd-round.v-shift::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  transform: translateY(var(--kb-shift));
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: 999px;
  pointer-events: none;
}

/* .pd-pill: Select/Start — oblong, fully round corners, 2px shorter than .pd-round. */
.pd-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--kb-inner) - 2px);
  padding: 0 8px;
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.pd-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: 999px;
}
.pd-pill::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  transform: translateY(var(--kb-shift));
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: 999px;
  pointer-events: none;
}

/* .pd-shoulder: L1/R1 — wider, round on top, 2px radius at the bottom. */
.pd-shoulder {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--kb-inner);
  padding: 0 6px;
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.pd-shoulder.bumpL {
  border-top-right-radius: 2px;
}
.pd-shoulder.bumpR {
  border-top-left-radius: 2px;
}
.pd-shoulder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: 6px 6px 2px 2px;
}
.pd-shoulder.bumpL::before {
  border-top-right-radius: 2px;
}
.pd-shoulder.bumpR::before {
  border-top-left-radius: 2px;
}
.pd-shoulder::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  transform: translateY(var(--kb-shift));
  border: var(--kb-stroke) solid var(--kb-line);
  border-radius: 6px 6px 2px 2px;
  pointer-events: none;
}
.pd-shoulder.bumpL::after {
  border-top-right-radius: 2px;
}
.pd-shoulder.bumpR::after {
  border-top-left-radius: 2px;
}

/* ---------- shoulder button: invisible wrapper around the kb/pd icon ----------
   (Q/E in the rail — hints.js swaps content per input). */
.shoulder {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: var(--ico);
  padding: 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  align-self: center;
}
/* If the button holds a .pd-shoulder, the old button styling falls
   away so the chip design takes over. Deliberately does NOT reset
   padding/min: the wrapper must measure the same in kb and pad states
   (same tie-break regardless of file order — see the rail rule in
   console.css). */
.shoulder:has(.pd-shoulder) {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ============================================================
   HELPBAR — the hint rows (shelf footer + stacked player panel).
   .hint-kb/.hint-pad show/hide via body[data-input] (hints.js
   sets it); hints.js syncs all dynamic content.
   ============================================================ */
.helpbar {
  flex: none;
  z-index: 20;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: var(--fs-m);
  flex-wrap: wrap;
  padding: var(--fs-s) calc(var(--gutter) / 2);
  border-top: var(--border);
  font-size: var(--fs-s);
}
.helpbar b { color: var(--ink); }
.hint-kb .sep, .hint-pad .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 8px; }
.hint-grid { margin-inline: auto; }
.hint-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; text-decoration: none; }
.hint-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.hint-link:hover .hint-label { text-decoration-color: transparent; }
.hint-kb, .hint-pad { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hint-pad { display: none; }
body[data-input="gamepad"] .hint-kb { display: none; }
body[data-input="gamepad"] .hint-pad { display: inline-flex; }
.helpbar--stacked {
  border-top: 0;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  gap: 0;
}
.helpbar--stacked .hint-grid { margin-inline: 0; }
.helpbar--stacked .hint-link { flex-wrap: wrap; }
/* Tidy rows: text left, keys grouped right. Continuation lines
   (Z X / A B without label) go all the way right under the other keys. */
.helpbar--stacked .hint-kb, .helpbar--stacked .hint-pad { width: 100%; }
.helpbar--stacked .hint-link { display: flex; width: 100%; }
.helpbar--stacked .keys { margin-left: auto; gap: 12px; }
/* Full width (gutter respected by the panel padding): a rule between all
   lines, never at the bottom — the first visible line has none. */
.helpbar--stacked .hint-kb, .helpbar--stacked .hint-pad {
  border-top: var(--border);
  padding-top: var(--fs-s);
  padding-bottom: var(--fs-s);
}
.helpbar--stacked .is-first { border-top: 0; padding-top: 0; }
/* Continuation lines (Z X / A B) belong with the line above: no rule. */
.helpbar--stacked .cont { border-top: 0; padding-top: 0; }