/* On-screen keyboard. Sizes come from --unit / --gap, set by the
   practice stage (practice.css). */

.keyboard {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  border-radius: calc(var(--unit) * 0.2);
  background: var(--color-border);
  user-select: none;
}

.keyboard__row {
  display: flex;
  gap: var(--gap);
}

.key {
  position: relative;
  flex: none;
  width: calc(var(--w) * var(--unit) + (var(--w) - 1) * var(--gap));
  height: var(--unit);
  border: 1px solid var(--color-key-border);
  border-radius: calc(var(--unit) * 0.15);
  background: var(--color-key);
  color: var(--color-key-text);
  font-size: calc(var(--unit) * 0.34);
  line-height: 1;
  transition: transform 80ms ease-out, background-color 80ms;
}

.key--spacer {
  visibility: hidden;
}

.key[data-finger-group="5"] { background: var(--finger-5); }
.key[data-finger-group="4"] { background: var(--finger-4); }
.key[data-finger-group="3"] { background: var(--finger-3); }
.key[data-finger-group="2"] { background: var(--finger-2); }
.key[data-finger-group="thumb"] { background: var(--finger-thumb); }

.key__label {
  position: absolute;
}

.key__label--letter {
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35em;
  font-weight: 600;
}

.key__label--shift { top: 12%; left: 14%; }
.key__label--base { bottom: 12%; left: 14%; font-size: 1.15em; }
.key__label--altgr { bottom: 12%; right: 14%; opacity: 0.8; }

.key--modifier .key__label {
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  padding: 0 0.3em;
  text-align: center;
}

.key--pressed {
  transform: translateY(2px);
  filter: brightness(0.85);
}

/* Result of the key just pressed: green if it produced the right character, red if not. */
.key--hit {
  outline: 4px solid var(--color-correct);
  outline-offset: 2px;
}

.key--miss {
  outline: 4px solid var(--color-wrong-text);
  outline-offset: 2px;
  background: var(--color-wrong-bg) !important;
}

/* --- Guidance: key to press now (and keys held with it) light up in the finger color. --- */

.key:is([data-role="primary"], [data-role="modifier"]) {
  z-index: 1;
  color: var(--finger-on-strong);
  box-shadow: 0 0 0 3px var(--color-text);
  animation: key-pulse 1.1s ease-in-out infinite;
}

.key:is([data-role="primary"], [data-role="modifier"])[data-finger-group="5"] { background: var(--finger-5-strong); }
.key:is([data-role="primary"], [data-role="modifier"])[data-finger-group="4"] { background: var(--finger-4-strong); }
.key:is([data-role="primary"], [data-role="modifier"])[data-finger-group="3"] { background: var(--finger-3-strong); }
.key:is([data-role="primary"], [data-role="modifier"])[data-finger-group="2"] { background: var(--finger-2-strong); }
.key:is([data-role="primary"], [data-role="modifier"])[data-finger-group="thumb"] { background: var(--finger-thumb-strong); }

/* "Mi progreso": keys with most errors. */
.key[data-role="trouble"] {
  z-index: 1;
  background: var(--color-wrong-bg) !important;
  color: var(--color-wrong-text);
  box-shadow: 0 0 0 3px var(--color-wrong-text);
}

/* Key to press right after (the letter following a dead key). */
.key[data-role="secondary"] {
  z-index: 1;
  outline: 3px dashed var(--color-text);
  outline-offset: 1px;
}

/* Keys that belong to a finger (hands intro): their own color, outlined, no pulse. */
.key[data-role="zone"] {
  box-shadow: inset 0 0 0 3px var(--color-text);
}

.key__badge {
  position: absolute;
  top: -0.55em;
  right: -0.45em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.85em;
  font-weight: 700;
}

@keyframes key-pulse {
  50% { transform: scale(1.08); }
}