/* Modo lección: cabecera sobre el monitor y selector de niveles. */

.plate__link {
  padding: 0.25em 0.7em;
  border: 1px solid color-mix(in srgb, var(--label) 45%, transparent);
  border-radius: 1em;
  background: none;
  color: var(--label);
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

.plate__link:hover,
.plate__link:focus-visible {
  background: color-mix(in srgb, var(--label) 18%, transparent);
}

/* ---------- Cabecera de la lección ---------- */

.lesson {
  width: min(88vw, calc(var(--key-size) * 11.6));
  padding: min(1.1vh, 1vw) min(1.6vw, 1.6vh);
  background: var(--cream);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: 0 min(0.4vh, 0.4vw) 0 var(--shadow);
}

.lesson__head {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.lesson__title {
  flex: 1;
  margin: 0;
  font-size: min(2.1vh, 2vw);
  letter-spacing: 0.02em;
}

.lesson__count {
  font-family: var(--mono);
  font-size: min(1.7vh, 1.7vw);
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}

.lesson__exit {
  padding: 0.3em 0.9em;
  border: 0;
  border-radius: 1em;
  background: color-mix(in srgb, var(--label) 20%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: min(1.6vh, 1.6vw);
  cursor: pointer;
}

.lesson__exit:hover {
  background: color-mix(in srgb, var(--label) 32%, transparent);
}

.lesson__bar {
  height: min(0.7vh, 0.7vw);
  margin: min(0.9vh, 0.9vw) 0;
  border-radius: 1em;
  background: color-mix(in srgb, var(--label) 22%, transparent);
  overflow: hidden;
}

.lesson__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--teal);
  transition: width 260ms ease-out;
}

.lesson__tip {
  margin: 0;
  font-size: min(1.55vh, 1.55vw);
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ---------- Selector de niveles ---------- */

.panel--left {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--shadow);
  box-shadow: 0.6rem 0 2rem rgba(0, 0, 0, 0.28);
  transform: translateX(-100%);
}

.panel--left.panel--open {
  transform: translateX(0);
}

.panel__intro {
  margin: 0 0 1.4rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.levels {
  padding: 0;
  margin: 0;
  list-style: none;
}

.levels li + li {
  margin-top: 0.6rem;
}

.level {
  display: flex;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--label) 28%, transparent);
  border-radius: 0.7rem;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.level:hover,
.level:focus-visible {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

/* Numerados porque son una secuencia real: el nivel 3 supone el 2. */
.level__number {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--label) 22%, transparent);
  font-weight: 700;
}

.level.is-done .level__number {
  background: var(--teal);
  color: #123c39;
}

.level__body b {
  display: block;
  font-size: 1rem;
}

.level__body small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}

.level__done {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teal);
}

/* ---------- Nivel de frases ---------- */

/* La frase se ve tenue en el CRT; cada palabra se enciende al acertarla. Se
   juega con la opacidad para no romper el color de fósforo del monitor. */
.phrase__word {
  opacity: 0.4;
  transition: opacity 140ms ease-out;
}

.phrase__word--current {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

.phrase__word--done {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .phrase__word {
    transition: none;
  }
}

/* ---------- Diálogos ---------- */

/* Red de seguridad: un navegador sin soporte de <dialog> lo trataría como un
   bloque normal y lo dejaría visible y tapando la página entera. */
.dialog:not([open]) {
  display: none;
}

.dialog {
  width: min(30rem, 88vw);
  padding: 1.8rem;
  border: 0;
  border-radius: 1rem;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--face);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialog__mark {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--yellow);
}

.dialog__title {
  margin: 0.4rem 0 0;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}

.dialog__goal,
.dialog__score {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.dialog__tip {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--label) 12%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
}

.dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.dialog__button {
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--label) 40%, transparent);
  border-radius: 0.6rem;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.dialog__button:hover {
  background: color-mix(in srgb, var(--label) 14%, transparent);
}

/* Solo uno destacado: el que conviene según dónde estés. */
.dialog__button.is-primary {
  border-color: transparent;
  background: var(--teal);
  color: #123c39;
}

.dialog__button.is-primary:hover {
  background: color-mix(in srgb, var(--teal) 88%, #000);
}

.dialog__note {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.dialog__cancel {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.4rem;
  border: 0;
  background: none;
  color: var(--label);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .lesson__bar span {
    transition: none;
  }
}