/* keyboard.css — the on-screen keyboard, TypeDojo theme.
 * Self-contained component: link it on any page that needs the keyboard
 * (play screen, typing test, games). Requires critical.css for the tokens.
 *
 * Class names match the existing markup, so no HTML changes are needed.
 * Key states share the typing-tile colour language:
 *   highlight (next key) = #ffcc00 · correct = #adff2f · incorrect = coral
 * Flat and calm — no glows/heavy shadows. Everything scales from --key.
 */

.keyboard-bg {
  --key: 50px;                        /* one number sizes the whole board */
  --kgap: 10px;                       /* between keys, within a row */
  --krow: 10px;                       /* between rows */
  display: grid;
  gap: var(--krow);
  margin-top: 50px;
  margin-bottom: 400px;
  position: relative;                 /* anchor for the hands overlay */
}

/* Hands guide — overlaid ON the keyboard, fingertips resting on the home row.
   Position/scale are by-eye; nudge `top` and `width` to align fingers to keys. */
/* Toggled by the "Keyboard" switch (typing.js). */
.keyboard-bg.is-hidden { display: none; }

/* Hands / finger guide styles live in fingers.css (loaded after this file). */

.row {
  display: grid;
  gap: var(--kgap);
  grid-template-rows: 1fr;
}

/* Row templates — modifier widths kept proportional to --key */
.row1 { grid-template-columns: repeat(13, var(--key)) 1fr; }
.row2 { grid-template-columns: calc(var(--key) * 1.54) repeat(12, var(--key)) 1fr; }
.row3 { grid-template-columns: calc(var(--key) * 2.02) repeat(11, var(--key)) 1fr; }
.row4 { grid-template-columns: calc(var(--key) * 2.69) repeat(10, var(--key)) 1fr; }
.row5 {
  grid-template-columns:
    calc(var(--key) * 1.92) calc(var(--key) * 1.15) calc(var(--key) * 1.15)
    calc(var(--key) * 1.15) calc(var(--key) * 6.73) calc(var(--key) * 1.15)
    calc(var(--key) * 1.15) 1fr;
}

/* ══════════════════════════
   BASE KEY — matches the typing keycaps
══════════════════════════ */
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                        /* the grid column sets the width */
  height: var(--key);
  box-sizing: border-box;
  border-radius: 4px;                 /* keycap-realistic; tiles stay rounder */
  background: #262C42;                /* solid — renders consistently */
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);    /* modifier labels — dimmer than letters */
  font-family: var(--ff);             /* Nunito for modifier labels */
  font-weight: 700;
  font-size: calc(var(--key) * 0.26);
  transition: background 0.25s ease-out, border-color 0.25s ease-out, color 0.25s ease-out;
}

/* Letter keys use the SAME font as the typing tiles so letterforms match.
   (The @font-face lives in typing.css — declare it on any other
   page that uses this keyboard, or it falls back to the next mono.) */
.key.letter {
  font-family: 'Atkinson Hyperlegible Mono', 'Comic Mono', 'Cousine', monospace;
  font-size: calc(var(--key) * 0.36);
  color: rgba(255, 255, 255, 0.6);    /* same as the modifier/Caps Lock keys */
}

/* Modifier labels sit in the top corner */
.key.keyboard-tab,
.key.caps-lock,
.key.left-shift,
.key.left-ctrl,
.key.left-fn,
.key.left-alt {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 9px 0 0 10px;
  font-weight: 600;
}
.key.backspace,
.key.enter,
.key.right-shift,
.key.right-ctrl,
.key.right-fn,
.key.right-alt {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 9px 10px 0 0;
  font-weight: 600;
}

/* Two-row keys (~ ` / ! 1 …) */
.key.two-row { flex-direction: column; justify-content: space-around; }
.key.two-row > div { display: flex; align-items: center; justify-content: center; width: 100%; }

/* ══════════════════════════
   STATES — same colour language as the typing tiles, flat (no glow)
══════════════════════════ */
/* Next key to press — the key "lights up" as a muted-gold FILL with dark text.
   Keyboard states use fill (a lit physical key); the typing tiles use outline. */
.key.highlight,
.key.left-shift.active,
.key.right-shift.active {
  background: #4f86e8;
  border-color: #6c9ef0;
  color: #ffffff;
}
/* Typed correctly */
.key.correct,
.key.left-shift.correct,
.key.right-shift.correct {
  background: #adff2f;
  border-color: #adff2f;
  color: #1A2038;
}
/* Mistyped — matches the typing tile's error look (calm dark coral + border) */
.key.incorrect,
.key.left-shift.incorrect,
.key.right-shift.incorrect {
  background: #3f1f28;
  border: 2px solid #d1667e;
  color: #ffd3dc;
}

/* ══════════════════════════
   RESPONSIVE — one variable scales the whole board
══════════════════════════ */
@media (max-width: 900px) { .keyboard-bg { --key: 44px; --kgap: 6px; --krow: 7px; } }
@media (max-width: 760px) { .keyboard-bg { --key: 36px; --kgap: 5px; --krow: 6px; } }
@media (max-width: 560px) { .keyboard-bg { --key: 28px; --kgap: 4px; --krow: 4px; } }
@media (max-width: 420px) { .keyboard-bg { --key: 22px; --kgap: 3px; --krow: 3px; } }