/* StenoSam — consola de estenotipia.
   Chasis crema setentero (paleta de recursos/colores.jpg) con un monitor de
   fósforo verde empotrado arriba. Todo en vw/vh para caber sin scroll. */

:root {
  /* Paleta muestreada de recursos/colores.jpg */
  --coral: #f37d59;
  --red: #dd5341;
  --teal: #68c7c1;
  --brown: #764838;
  --yellow: #faca78;
  --cream: #faebcc;

  --desk: #ecd6a9; /* crema oscurecido: la mesa bajo la máquina */
  --ivory: #fdf6e7; /* teclas en reposo */
  --ink: #4a2c20; /* texto sobre las teclas */
  --label: var(--brown); /* rótulos serigrafiados sobre la mesa */
  --bezel: var(--brown); /* marco del monitor */
  --shadow: color-mix(in srgb, var(--brown) 55%, transparent);

  /* Monitor */
  --glass: #0c170f;
  --phosphor: #5ce85c;

  /* El teclado mide 11 columnas de ancho; se limita por ambos ejes. */
  --key-size: min(7.5vw, 10.4vh);
  --gap: min(0.8vw, 1.1vh);
  --radius: min(0.9vw, 1.2vh);

  /* Futura es la geométrica de los rótulos de máquina de los 70,
     y viene instalada en macOS e iPadOS. */
  --face: Futura, "Futura PT", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* La misma máquina en nogal oscuro. Los cinco colores de banco no cambian
   —son la señal que enseña la teoría— y el CRT tampoco: un tubo es un tubo. */
:root[data-theme="dark"] {
  --desk: #17110e;
  --cream: #2c201a; /* chasis */
  --ivory: #48382e; /* teclas */
  --ink: #f4e6cc; /* texto sobre las teclas */
  --label: #d3a07a;
  --bezel: #4c3126;
  --shadow: rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--face);
}

.machine {
  height: 100%;
  padding: max(2vh, env(safe-area-inset-top)) 2vw 2.5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4vh;
}

/* ---------- Rótulo del chasis ---------- */

.plate {
  width: min(88vw, calc(var(--key-size) * 11.6));
  display: flex;
  align-items: baseline;
  gap: 1.2vw;
  font-size: min(1.9vh, 1.9vw);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

.plate__brand b {
  font-weight: 700;
  color: var(--red);
}

/* Línea de puntos entre la marca y los botones, como en un panel serigrafiado. */
.plate__leader {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--label) 45%, transparent);
  transform: translateY(-0.35em);
}

/* ---------- Monitor CRT ---------- */

.crt {
  position: relative; /* ancla el botón de retroceso |< */
  width: min(88vw, calc(var(--key-size) * 11.6));
  padding: min(1.1vh, 1vw);
  background: var(--bezel);
  border-radius: calc(var(--radius) * 1.6);
  /* Carcasa: luz arriba, sombra abajo, y la pantalla hundida en el marco. */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 min(0.5vh, 0.5vw) 0 var(--shadow);
}

.crt__glass {
  position: relative;
  overflow: hidden;
  padding: min(1.4vh, 1.3vw) min(2.5vw, 2.5vh);
  min-height: min(13vh, 13vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6vh;

  background: radial-gradient(ellipse at 50% 45%, #16281a 0%, var(--glass) 78%);
  border-radius: calc(var(--radius) * 1.1);
  box-shadow:
    inset 0 0 min(3vh, 3vw) rgba(0, 0, 0, 0.9),
    inset 0 0 min(1vh, 1vw) rgba(92, 232, 92, 0.12);
}

/* Líneas de barrido. */
.crt__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

/* Viñeteado: el tubo pierde brillo hacia las esquinas. */
.crt__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* El texto crece hacia abajo y se desplaza solo: se lee siempre el final. */
.crt__line {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  font-family: var(--mono);
  font-size: min(3.6vh, 3.2vw);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  color: var(--phosphor);
  text-shadow:
    0 0 0.06em rgba(255, 255, 255, 0.75),
    0 0 0.4em var(--phosphor),
    0 0 1.1em rgba(92, 232, 92, 0.55);
}

.crt__line::-webkit-scrollbar {
  display: none;
}

.crt__cursor {
  display: inline-block;
  vertical-align: text-bottom;
  width: 0.55em;
  height: 1em;
  background: var(--phosphor);
  box-shadow: 0 0 0.5em var(--phosphor);
  animation: blink 1.1s steps(1) infinite;
}

/* Línea de servicio: qué hizo el último golpe. Deliberadamente pequeña —
   informa mientras aprendes sin competir con el texto. */
.crt__status {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--mono);
  font-size: min(1.7vh, 1.7vw);
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--phosphor) 65%, transparent);
}

/* Acorde en curso: aún hay dedos encima y puede crecer. */
.crt__status--live {
  color: color-mix(in srgb, var(--phosphor) 45%, transparent);
}

.crt__status--miss {
  color: var(--yellow);
}

.crt__status--error {
  color: var(--coral);
}

/* Fogonazo de fósforo al cerrar el acorde. */
.crt__line--flash {
  animation: bloom 380ms ease-out;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@keyframes bloom {
  from {
    color: #eaffea;
    text-shadow:
      0 0 0.1em #fff,
      0 0 0.7em var(--phosphor),
      0 0 2em var(--phosphor);
  }
}

/* Botón de retroceso |<: borra el último golpe. Va sobre el marco del monitor,
   a la derecha, sin invadir el cristal. Se oculta durante las lecciones (que
   tienen su propia lógica) y en solo-teclado (el monitor no se ve). */
.crt__back {
  position: absolute;
  top: 50%;
  right: min(1.6vw, 1.6vh);
  transform: translateY(-50%);
  padding: 0.3em 0.7em;
  border: 1px solid color-mix(in srgb, var(--phosphor) 55%, transparent);
  border-radius: 0.5em;
  background: rgba(0, 0, 0, 0.35);
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: min(2.4vh, 2.2vw);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.crt__back:hover {
  background: rgba(92, 232, 92, 0.15);
}

:root[data-mode="lesson"] .crt__back {
  display: none;
}

/* ---------- Rótulos ---------- */

.hint {
  margin: 0;
  font-size: min(1.6vh, 1.7vw);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}

/* En vertical las 11 columnas obligan a teclas pequeñas: se sugiere girar. */
.hint--rotate {
  display: none;
  color: var(--red);
}

@media (orientation: portrait) {
  .hint--rotate {
    display: block;
  }
}

/* ---------- Teclado ---------- */

.keyboard {
  position: relative; /* origen de los puentes entre teclas señaladas */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--gap) * 1.6);
  background: var(--cream);
  border-radius: calc(var(--radius) * 1.8);
  box-shadow: 0 min(0.5vh, 0.5vw) 0 var(--shadow);

  /* Imprescindible en tablet: sin esto el navegador interpreta los dedos como
     scroll o zoom y se pierden pulsaciones a mitad del acorde. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.area {
  display: flex;
  gap: calc(var(--gap) * 3);
}

.area--number,
.area--number .bank {
  width: 100%;
}

.area--thumbs {
  /* Las vocales van bajo los asteriscos, como en la máquina real: A/O casi bajo
     el asterisco izquierdo y E/U bajo el derecho. El gap junta los dos grupos y
     el translate corre el conjunto para alinearlo con los asteriscos (los bancos
     no son simétricos: 5 columnas a la izquierda, 6 a la derecha). En unidades
     de tecla para que escale con el teclado. */
  gap: calc(var(--key-size) * 0.5);
  margin-top: calc(var(--gap) * 0.4);
  transform: translateX(calc(var(--key-size) * -0.5));
}

.bank {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--key-size));
  gap: var(--gap);
}

.bank--number {
  grid-template-columns: 1fr;
}

/* El color no decora: dice a qué banco pertenece cada tecla. */
.bank--left {
  --bank: var(--coral);
  --bank-ink: #5a2a17;
}
.bank--right {
  --bank: var(--teal);
  --bank-ink: #123c39;
}
.bank--vowels_left,
.bank--vowels_right {
  --bank: var(--yellow);
  --bank-ink: #5a3d12;
}
.bank--number {
  --bank: var(--brown);
  --bank-ink: var(--cream);
}
/* La estrella no es de ningún banco: parte el acorde en dos. */
.key[data-key="*"] {
  --bank: var(--red);
  --bank-ink: #fff3e4;
}

/* ---------- Teclas ---------- */

.key {
  height: var(--key-size);
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--ivory);
  color: var(--ink);
  border-radius: var(--radius);
  /* Franja inferior: en reposo es lo único que delata el banco. */
  border-bottom: min(0.6vh, 0.6vw) solid var(--bank);
  box-shadow: 0 min(0.45vh, 0.45vw) 0 var(--shadow);

  font-size: min(2.5vh, 2.4vw);
  font-weight: 600;
  letter-spacing: 0.04em;

  /* La respuesta al dedo tiene que ser inmediata; solo se suaviza la vuelta. */
  transition: background-color 90ms ease-out, color 90ms ease-out;
}

.bank--number .key {
  height: calc(var(--key-size) * 0.55);
  font-size: min(1.9vh, 1.8vw);
}

/* Dedo encima ahora mismo: la tecla se hunde y se llena del color del banco. */
.key--pressed {
  background: var(--bank);
  color: var(--bank-ink);
  border-bottom-color: transparent;
  box-shadow: none;
  transform: translateY(min(0.45vh, 0.45vw));
}

/* Tecla ya soltada pero que sigue contando para el acorde en curso. */
.key--in-chord {
  background: var(--bank);
  background: color-mix(in srgb, var(--bank) 42%, var(--ivory));
  color: var(--ink);
}

/* Pista de lección: esta tecla entra en el golpe que toca. El halo late para
   que se vea de un vistazo sin tapar la letra. */
.key--hint {
  outline: min(0.45vh, 0.45vw) dashed var(--bank);
  outline-offset: min(-0.5vh, -0.5vw);
  animation: hint 1.3s ease-in-out infinite;
}

@keyframes hint {
  50% {
    background: color-mix(in srgb, var(--bank) 28%, var(--ivory));
  }
}

/* Puente sobre la ranura entre dos teclas señaladas: las une visualmente para
   que se lea "un dedo aquí en medio" en vez de "dos dedos". */
.key-bridge {
  position: absolute;
  background: var(--coral);
  pointer-events: none;
  animation: hint 1.3s ease-in-out infinite;
}

/* Práctica de memoria: las teclas se quedan mudas pero conservan la franja de
   color, así que sigues sabiendo a qué banco pertenece cada una. Cubre también
   los estados pulsados, que si no ganarían por especificidad. */
:root[data-hide-labels="true"] .key,
:root[data-hide-labels="true"] .key--pressed,
:root[data-hide-labels="true"] .key--in-chord {
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .crt__cursor,
  .crt__line--flash,
  .key--hint {
    animation: none;
  }
  .key {
    transition: none;
  }
}