/* ============================================================
   KEYBOARD-HINTS — CSS kopi af artwork/keyboard-hints.af
   Målt via Affinity MCP (128x128, dpi 72):
    bg #000, streg+bogstav #EBEBEB, JetBrains Mono centreret.
   ------------------------------------------------------------
   Én div per tast, teksten står råt i den. Div'en ER inner-
   boksen; ::after tegner outer-boksen udenpå.
   Ens luft i alle sider => altid kvadratisk som minimum.
   Lang tekst (BACKSPACE) gør dem kun bredere.
   --kb-shift flytter outer ned (positiv = overlap i toppen).
   Brug: <link rel="stylesheet" href="keyboard-hints.css">
         <span class="kb">W</span>
   ============================================================ */

:root {
  --kb-bg: #000000;
  --kb-ink: #EBEBEB;

  --kb-inner: 18px;      /* inner minimum (kvadratisk) */
  --kb-font-size: 10px;

  --kb-stroke: 1px;
  --kb-radius: 6px;      /* outer radius (inner = denne minus pad) */
  --kb-pad: 3px;         /* luft mellem boksene, hele vejen rundt */
  --kb-shift: 3px;       /* outer rykket ned — overlapper toplinjerne */
  --kb-pad-x: 5px;       /* ekstra sideplads til lang tekst */
  --kb-key-gap: 18px;    /* afstand mellem taster */
}

.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);
  /* outer-boksen stikker uden for elementet — reservér pladsen her,
     så der altid er minimum flex-gap'en (mindst 2px) til naboer og tekst */
  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 er aldrig pixel-font — slå smoothing til igen, så den ikke arver
     -webkit-font-smoothing:none fra pixel-forældre (.play-btn, .shoulder) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}

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

/* outer-boksen — bagerst */
.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-ink);
  border-radius: var(--kb-radius);
  pointer-events: none;
}

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

.hint {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #bbb;
}
.hint b { color: #fff; font-weight: 600; }