/* =========================================================================
   Escultoriam — componentes reutilizables
   ========================================================================= */

/* ---------------------------------------------------------------- ornamento */

/* Gema heráldica: mismo signo en tres escalas (nav activa, divisor, viñeta). */
.gem {
  display: inline-block;
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: linear-gradient(to right, var(--leonhart-blue) 50%, var(--leonhart-burgundy) 50%);
  box-shadow: 0 0 0 1px var(--gold-500);
  rotate: 45deg;
}

.gem--sm {
  width: 0.4rem;
  height: 0.4rem;
}

.gem--lg {
  width: 0.85rem;
  height: 0.85rem;
}

.rule {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}

.rule::before,
.rule::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-strong), transparent);
  content: "";
}

/* Marca de esquina: dos ángulos dorados en diagonal, nunca los cuatro. */
.corner-ticks::before,
.corner-ticks::after {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  content: "";
  pointer-events: none;
}

.corner-ticks::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--gold-500);
  border-left: 1px solid var(--gold-500);
}

.corner-ticks::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid var(--gold-500);
  border-bottom: 1px solid var(--gold-500);
}

.rule--spaced {
  margin-top: var(--s-6);
}

.prose p + p {
  margin-top: var(--s-4);
}

.panel__note {
  margin-top: var(--s-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- botones */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.875rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    translate var(--dur-fast) var(--ease-out);
}

.btn:hover {
  translate: 0 -1px;
}

.btn:active {
  translate: 0 1px;
  transition-duration: 60ms;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn--primary {
  border-color: var(--gold-600);
  background: linear-gradient(to bottom, var(--burgundy-500), var(--leonhart-burgundy) 60%, var(--burgundy-700));
  color: var(--parchment-100);
  box-shadow: var(--shadow-raised);
}

.btn--primary:hover {
  border-color: var(--gold-500);
  color: #fff;
  box-shadow: var(--glow-gold);
}

.btn--ghost {
  border-color: var(--rule-strong);
  /* Alfa sin desenfoque: solo se usa sobre el diorama del hero, y un
     `backdrop-filter` delante del personaje que respira ata los dos y se nota
     el tirón. Ver `.hero .btn--primary` en hero.css. */
  background: rgb(16 46 85 / 0.66);
  color: var(--gold-200);
}

.btn--ghost:hover {
  border-color: var(--gold-500);
  background: rgb(16 46 85 / 0.82);
  color: var(--parchment-100);
}

/* Familia secundaria del sistema: azul Leonhart macizo con filo dorado. Nace
   para el Reloj del Duelo, que va al lado del CTA y necesita el mismo peso sin
   ser un segundo borgoña compitiendo. */
.btn--noble {
  border-color: var(--gold-600);
  background: linear-gradient(to bottom, #1b446f, var(--leonhart-blue) 58%, #0a1e39);
  color: var(--parchment-100);
  box-shadow: var(--shadow-raised);
}

.btn--noble:hover {
  border-color: var(--gold-500);
  color: #fff;
  box-shadow: var(--glow-gold);
}

/* El icono es el propio glifo del cronómetro (U+23F1) en el HTML: se lee de
   inmediato y no hay que dibujar un reloj con pseudoelementos, que a este
   tamaño no se leía. Va SIN selector de variación (U+FE0F) y con
   `font-variant-emoji: text` para que el navegador use la forma monocroma y
   herede el pergamino del botón: el glifo de color es un cronómetro de
   plástico gris que no pinta nada sobre el azul con filo dorado. Donde la
   plataforma solo tenga la versión de color, se sigue viendo un cronómetro. */
.nav__clock-icon {
  flex: none;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif;
  font-size: 1.25em;
  font-variant-emoji: text;
  line-height: 1;
  /* El glifo trae su propio interlineado: este empujón lo centra con el rótulo
     y con el alto del botón. */
  translate: 0 -0.02em;
}

/* En la barra el reloj va siempre como icono, sin rótulo. No es una decisión
   estética: con los cinco enlaces (615px), el rótulo completo (189px) y la
   reserva (186px), el contenido pide 1279px y el contenedor da 1152 — y no
   mejora en pantallas mayores, porque `--container` está topado en 78rem.
   El nombre completo vive en `aria-label`, en el `title`, en el menú y en la
   propia sección. Mismo azul y mismo alto que la reserva: mismo peso. */
.nav__clock-label {
  display: none;
}

.btn--sm {
  min-height: 2.375rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-2xs);
}

/* ---------------------------------------------------------------- paneles */

.panel {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.panel--noble {
  background: var(--surface-noble);
}

.panel--intrigue {
  background: var(--surface-intrigue);
}

.panel--parchment {
  background: var(--surface-parchment);
  border-color: rgb(140 104 40 / 0.5);
  color: var(--text-on-parchment);
}

.panel--parchment h3 {
  color: var(--burgundy-700);
}

.panel--parchment .panel__label {
  color: var(--gold-600);
}

/* ---------------------------------------------------------------- ficha */

.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-4);
  background: rgb(140 104 40 / 0.35);
  border: 1px solid rgb(140 104 40 / 0.35);
}

.spec__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--s-3) var(--s-4);
  background: #f2e5cb;
}

.spec__value {
  color: var(--burgundy-700);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
}

.spec__label {
  color: rgb(36 26 18 / 0.66);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contents {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.contents li {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgb(140 104 40 / 0.22);
  font-size: var(--fs-sm);
}

.contents li:last-child {
  border-bottom: 0;
}

/* ---------------------------------------------------------------- estandartes */

.factions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 5vw, 2.25rem) clamp(1rem, 4vw, 2rem);
  margin-top: var(--s-7);
}

.faction {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* El estandarte: barra dorada + paño con muesca inferior, todo en CSS. */
.faction__rod {
  position: relative;
  width: 78%;
  height: 3px;
  background: linear-gradient(to bottom, var(--gold-200), var(--gold-600));
  border-radius: 2px;
}

.faction__rod::before,
.faction__rod::after {
  position: absolute;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--gold-300);
  border-radius: 50%;
  content: "";
  translate: 0 -50%;
}

.faction__rod::before {
  left: -0.3rem;
}

.faction__rod::after {
  right: -0.3rem;
}

/* El paño cuelga de su barra y se mece. La amplitud es una variable, así que
   el vaivén se aviva al pasar por encima sin cambiar de animación: basta con
   que el keyframe vuelva a resolverse con otro valor. */
.faction__banner {
  position: relative;
  width: 68%;
  aspect-ratio: 5 / 8;
  background: var(--gold-500);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  transform-origin: 50% 0;
  --sway: 1.2deg;
  animation: banner-sway var(--sway-dur, 6s) var(--ease-inout) var(--sway-delay, 0s) infinite;
}

@keyframes banner-sway {
  0%,
  100% {
    rotate: calc(var(--sway) * -1);
  }

  50% {
    rotate: var(--sway);
  }
}

/* Siete compases distintos, repartidos con un ciclo que no divide a diez: así
   no hay dos paños vecinos meciéndose al unísono, que delataría la animación.
   Los retardos negativos arrancan cada uno a mitad de su recorrido. */
.faction:nth-child(7n + 1) .faction__banner {
  --sway-dur: 6.4s;
  --sway-delay: -0.4s;
}

.faction:nth-child(7n + 2) .faction__banner {
  --sway-dur: 7.6s;
  --sway-delay: -2.1s;
}

.faction:nth-child(7n + 3) .faction__banner {
  --sway-dur: 5.8s;
  --sway-delay: -1.3s;
}

.faction:nth-child(7n + 4) .faction__banner {
  --sway-dur: 8.2s;
  --sway-delay: -3.4s;
}

.faction:nth-child(7n + 5) .faction__banner {
  --sway-dur: 6.9s;
  --sway-delay: -0.9s;
}

.faction:nth-child(7n + 6) .faction__banner {
  --sway-dur: 7.1s;
  --sway-delay: -2.8s;
}

.faction:nth-child(7n) .faction__banner {
  --sway-dur: 6.1s;
  --sway-delay: -1.8s;
}

.faction:hover .faction__banner,
.faction:focus-within .faction__banner {
  --sway: 4deg;
  animation-duration: 1.5s;
}

.faction__field {
  position: absolute;
  inset: 1.5px;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, var(--field-1, #16406e), var(--field-2, #0a1c33));
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}

.faction__charge {
  color: var(--charge, var(--gold-200));
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  translate: 0 -6%;
}

.faction__name {
  margin-top: var(--s-3);
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.faction__trait {
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-style: italic;
}

.faction--leonhart-name .faction__name {
  color: var(--gold-200);
}

/* ---------------------------------------------------------------- ronda */

.phases {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.phase {
  position: relative;
  /* El hueco se reserva a partir del propio cuerpo del numeral: "III" ocupa
     mucho más que "I" y no puede invadir el titular. */
  padding-left: calc(var(--fs-numeral) * 1.5);
}

.phase__numeral {
  position: absolute;
  top: -0.15em;
  left: 0;
  width: 1.2em;
  color: var(--gold-600);
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  font-weight: 600;
  line-height: 1;
}

.phase h3 {
  margin-bottom: var(--s-2);
}

.phase p {
  max-width: 34rem;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- formulario */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.field {
  flex: 1;
  /* Sin esto el ancho intrínseco del input (size=20) ensancha el panel. */
  min-width: 0;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgb(6 16 32 / 0.55);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}

.field::placeholder {
  color: rgb(244 232 206 / 0.42);
}

.field:hover {
  border-color: var(--rule-strong);
}

.form__note {
  color: var(--text-mute);
  font-size: var(--fs-2xs);
}

.form__status {
  color: var(--gold-200);
  font-size: var(--fs-xs);
}

.form__status:empty {
  display: none;
}

/* ---------------------------------------------------------------- navegación */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    -webkit-backdrop-filter var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Sobre el hero la cabecera es transparente y compite con el arte del arco.
   Este velo no dibuja una barra: oscurece el borde superior de la escena,
   igual que hace el propio hero en formato retrato. */
.site-header::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(var(--nav-h) * 2);
  background: linear-gradient(
    to bottom,
    rgb(5 13 26 / 0.88) 0%,
    rgb(5 13 26 / 0.62) 42%,
    rgb(5 13 26 / 0.24) 74%,
    rgb(5 13 26 / 0) 100%
  );
  content: "";
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Al hacer scroll manda la barra sólida: el velo sobraría. */
.site-header.is-scrolled::before {
  opacity: 0;
}

.site-header.is-scrolled {
  background: rgb(6 16 32 / 0.86);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav {
  display: flex;
  align-items: center;
  /* Mismo ritmo que separa los enlaces entre sí: el CTA no puede quedar
     más pegado al último enlace de lo que lo están los enlaces entre ellos. */
  gap: var(--s-5);
  height: var(--nav-h);
}

/* Separador heráldico: hace visible que el CTA es otro grupo. */
.nav__sep {
  display: none;
  width: 1px;
  height: 1.6rem;
  background: linear-gradient(to bottom, transparent, var(--rule-strong), transparent);
}

@media (min-width: 1280px) {
  .nav__sep {
    display: block;
  }

  .nav__list {
    gap: var(--s-5);
  }
}

/* La marca no se comprime nunca. Es un `img` con alto fijo y ancho automático,
   así que si el contenedor se encoge, `max-width: 100%` lo estrecha sin bajar el
   alto: el logo sale aplastado. Con `flex: none` la barra cede por otro lado. */
.nav__brand {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  margin-right: auto;
  line-height: 0;
}

.nav__logo {
  max-width: none;
}

/* Reflejo al pasar por encima: no escala ni desplaza el logo —eso quedaba
   feo—, solo recorre un brillo por dentro de su silueta, recortado con su
   propia imagen. Lleva el mismo `translate` que el logo para calzar con él. */
.nav__brand::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    104deg,
    transparent 34%,
    rgb(255 248 230 / 0.82) 50%,
    transparent 66%
  );
  background-repeat: no-repeat;
  background-size: 280% 100%;
  background-position: -50% 0;
  mask-image: url("../assets/hero/wordmark-shield-500.webp");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  content: "";
  translate: 0 4.8%;
  pointer-events: none;
}

.nav__brand:hover::after,
.nav__brand:focus-visible::after {
  /* Lento a propósito: a 850 ms el reflejo pasaba antes de que te dieras
     cuenta. Con 2.2 s recorre el wordmark con calma, entra y sale con una
     rampa suave y se queda un instante en el centro, que es donde luce. */
  animation: brand-sheen 2200ms var(--ease-inout);
}

@keyframes brand-sheen {
  0% {
    opacity: 0;
    background-position: -55% 0;
  }

  18% {
    opacity: 1;
  }

  50% {
    background-position: 45% 0;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    background-position: 155% 0;
  }
}

.nav__list {
  display: none;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Con el reloj y la reserva en la barra, a 1024 no hay margen: los enlaces no
   se parten y el aire entre ellos se aprieta hasta que aparece el separador. */
.nav__link {
  white-space: nowrap;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 0;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-base) var(--ease-out);
}

.nav__link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-500);
  content: "";
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--gold-200);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  scale: 1 1;
}

.nav__link .gem {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.nav__link[aria-current="true"] .gem {
  opacity: 1;
}

/* La acción principal va primero: el orden de lectura es el comercial —reservar
   antes que la herramienta— y el reloj queda como lo que es, un accesorio. */
.nav__cta {
  display: none;
  flex: none;
  margin-right: 0.4rem;
}

/* El reloj se queda en la barra tambien en movil: es la herramienta que se
   usa con el juego en la mesa y debe estar a un toque desde cualquier parte. */
.nav__clock {
  flex: none;
  gap: 0.45em;
}

/* El <summary> es el botón: se le quita el triángulo nativo. */
.nav__menu > summary {
  list-style: none;
}

.nav__menu > summary::-webkit-details-marker {
  display: none;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgb(9 24 44 / 0.5);
  cursor: pointer;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 1.05rem;
  height: 1px;
  background: var(--gold-300);
  transition: translate var(--dur-base) var(--ease-out), rotate var(--dur-base) var(--ease-out);
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  position: absolute;
  content: "";
}

.nav__toggle-bars::before {
  translate: 0 -0.32rem;
}

.nav__toggle-bars::after {
  translate: 0 0.32rem;
}

.nav__menu[open] .nav__toggle-bars {
  background: transparent;
}

.nav__menu[open] .nav__toggle-bars::before {
  translate: 0 0;
  rotate: 45deg;
}

.nav__menu[open] .nav__toggle-bars::after {
  translate: 0 0;
  rotate: -45deg;
}

/* Panel móvil: una tarjeta heráldica flotante, no una banda a toda pantalla.
   Lo muestra y lo oculta el propio <details>; la animación es solo de entrada,
   porque al cerrar el contenido desaparece del árbol. */
.nav__panel {
  position: fixed;
  inset: calc(var(--nav-h) + 0.4rem) var(--gutter) auto;
  max-height: calc(100svh - var(--nav-h) - 1.5rem);
  /* Recorta los ornamentos de esquina y deja el desplazamiento solo en vertical. */
  overflow: hidden auto;
  /* Solo hace falta desplazar en un móvil apaisado muy bajo, y ahí la barra
     estorbaría más que ayudar: se oculta y se navega con el dedo. */
  scrollbar-width: none;
  padding: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgb(18 48 79 / 0.97) 0%, rgb(11 29 52 / 0.97) 62%, rgb(8 22 37 / 0.98) 100%);
  box-shadow: var(--shadow-panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: panel-in var(--dur-base) var(--ease-out) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 -0.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Dos columnas: seis destinos en tres filas en vez de una columna de seis. */
.nav__panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rejilla de filetes dorados entre celdas, sin cerrar el bloque por fuera. */
.nav__panel li {
  border-bottom: 1px solid rgb(201 154 69 / 0.16);
}

.nav__panel li:nth-child(odd) {
  border-right: 1px solid rgb(201 154 69 / 0.16);
}

.nav__panel li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* Solo los enlaces de la lista: sin acotar a `ul`, esta regla también pisaba
   el botón de reserva del panel —tiene más peso que `.btn`— y le quitaba el
   centrado, el relleno lateral y la tipografía de botón. */
.nav__panel ul a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  padding: 0.6rem 0.7rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.nav__panel ul a .gem {
  opacity: 0.4;
  transition: opacity var(--dur-base) var(--ease-out);
}

.nav__panel ul a:hover,
.nav__panel ul a:focus-visible {
  color: var(--gold-200);
}

.nav__panel ul a:hover .gem,
.nav__panel ul a:focus-visible .gem {
  opacity: 1;
}

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

/* El ornamento va a ras: los -2px con los que se monta sobre el borde en los
   paneles de pergamino generaban aquí 2px de área desplazable, y con ellos una
   barra de scroll en un panel que cabe de sobra. */
.nav__panel .corner-art--br {
  right: 0;
  bottom: 0;
}

.nav__panel .corner-art--tl {
  top: 0;
  left: 0;
}

.nav__panel-cta {
  width: 100%;
  margin-top: var(--s-4);
}

/* Los dos botones —la herramienta y la acción principal— están en la barra
   desde 600px. Por debajo solo caben el logo y el menú. */
@media (min-width: 600px) {
  .nav__cta {
    display: inline-flex;
  }
}

/* La lista de enlaces mide 615px: con el reloj y la reserva al lado, el
   conjunto pide 1158px de contenedor y eso no llega hasta los 1280 de
   ventana. Por debajo, los enlaces viven en el menú desplegable, que se
   queda visible junto a los dos botones. */
@media (min-width: 1280px) {
  .nav__list {
    display: flex;
  }

  .nav__menu {
    display: none;
  }
}

/* ---------------------------------------------------------------- la pala */

/* Firma estructural: una pala heráldica que recorre la página, marca cada
   sección con una gema y se llena de oro conforme se desciende. */
.rail {
  position: fixed;
  top: 50%;
  left: 1.75rem;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  /* Sobre el hero la pala estorba: nace oculta y el JS la revela al salir de
     él. Sin JS se queda visible, que es el estado útil. */
  translate: 0 -50%;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.rail[data-visible="false"] {
  translate: -0.75rem -50%;
  opacity: 0;
  pointer-events: none;
}

.rail::before {
  position: absolute;
  top: -1.5rem;
  bottom: -1.5rem;
  left: 50%;
  width: 1px;
  background: var(--rule);
  content: "";
  translate: -50% 0;
}

.rail::after {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 1px;
  height: calc(var(--rail-progress, 0) * 100%);
  max-height: 100%;
  background: linear-gradient(to bottom, var(--gold-500), var(--gold-600));
  content: "";
  translate: -50% 0;
}

.rail__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.rail__dot .gem {
  opacity: 0.32;
  transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

.rail__dot:hover .gem,
.rail__dot[aria-current="true"] .gem {
  opacity: 1;
  scale: 1.25;
}

.rail__label {
  position: absolute;
  left: 1.75rem;
  color: var(--text-mute);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.rail__dot:hover .rail__label,
.rail__dot:focus-visible .rail__label {
  opacity: 1;
}

@media (min-width: 1200px) {
  .rail {
    display: flex;
  }
}

/* ---------------------------------------------------------------- pie */

.site-footer {
  padding-block: var(--s-8) var(--s-6);
  border-top: 1px solid var(--rule);
  background: linear-gradient(to bottom, var(--blue-900), #040b16);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-5);
}

.site-footer h2 {
  margin-bottom: var(--s-3);
  color: var(--gold-500);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  text-decoration: none;
}

/* La letra pequeña es una columna más del pie, no un párrafo colgado del
   cierre: así ocupa el hueco que dejaban las dos listas y no estira la página.
   Se queda alineada a la izquierda como el resto de columnas.

   Sin medida por defecto: cuando el aviso cae debajo de las listas —apilado en
   móvil o cruzando el ancho entre 768 y 1024— tiene que ocupar todo lo que
   tenga delante. La medida solo entra cuando es una columna de verdad. */
.site-footer__legal p {
  margin: 0;
  color: var(--text-mute);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.site-footer__legal a {
  font-size: inherit;
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer a:hover {
  color: var(--gold-200);
  text-decoration: underline;
}

/* El cierre del pie: la placa del estudio y, debajo, la línea de copyright a
   todo el ancho del contenedor. La letra pequeña ya no vive aquí: es una
   columna de la retícula, arriba. */
.colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgb(201 154 69 / 0.16);
  color: var(--text-mute);
  font-size: var(--fs-2xs);
  text-align: center;
}

/* A todo el ancho y con su propio filo: es el último renglón de la página y se
   lee como una banda, no como un párrafo centrado más. */
.colophon__rights {
  width: 100%;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid rgb(201 154 69 / 0.16);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-wrap: balance;
}

.colophon__rights strong {
  color: var(--gold-300);
  font-weight: 600;
}

/* La placa va en pergamino, la familia clara del sistema de paneles: sobre el
   azul del pie el logo de Olart —azul y verde— se perdía contra el fondo, y
   aclarar el azul no lo arreglaba porque la «O» es del mismo color de la casa.
   El degradado es el mismo que el de los paneles de pergamino, con un filo
   dorado y la sombra que despega la pieza del pie. */
.made-by {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--gold-600);
  border-radius: var(--radius);
  background: var(--surface-parchment);
  box-shadow: var(--shadow-raised);
  color: var(--text-on-parchment);
}

.made-by__line {
  white-space: nowrap;
}

/* El corazón es el único rojo del pie. Sobre pergamino el borgoña de la casa
   entra directo, sin aclarar. */
.made-by__heart {
  color: var(--burgundy-600);
  /* El corazón de la fuente de lectura sale pequeño respecto al renglón. */
  font-size: 1.15em;
  vertical-align: -0.03em;
}

.made-by__logo {
  width: auto;
  height: 1.9rem;
}

@media (min-width: 768px) {
  .form__row {
    flex-direction: row;
  }

  /* Las dos listas caben en dos columnas; el aviso pasa debajo, cruzando el
     ancho, hasta que hay sitio para las tres columnas. */
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  /* La columna de derechos ocupa el hueco que dejaban las dos listas: el pie
     queda repartido de lado a lado en vez de vacío por la derecha. */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr minmax(0, 1.9fr);
    gap: var(--s-6);
  }

  .site-footer__legal {
    grid-column: auto;
  }

  /* Ya es una columna: aquí sí se acota, que un renglón de 90 caracteres no se
     lee. */
  .site-footer__legal p {
    max-width: 46ch;
  }
}

/* =========================================================================
   Las facciones del Reino
   Los diez estandartes reutilizan la construcción del blasón: filo dorado,
   campo propio de la facción y carga central. El color de cada campo sale de
   la lámina de facciones del instructivo.
   ========================================================================= */

.faction--veraluz {
  --field-1: #c98a2b;
  --field-2: #6b4310;
}

.faction--arcano {
  --field-1: #6b5ac4;
  --field-2: #2a2160;
}

.faction--robledal {
  --field-1: #6f7a2e;
  --field-2: #2e3312;
}

.faction--aerelis {
  --field-1: #51aeb8;
  --field-2: #1b4c57;
  --charge: #0b2a31;
}

.faction--corsarios {
  --field-1: #1f6b7a;
  --field-2: #0c2e36;
}

.faction--escarlata {
  --field-1: #b8281c;
  --field-2: #4e0d08;
}

.faction--olartum {
  --field-1: #7c838c;
  --field-2: #2c3138;
  --charge: #10161c;
}

.faction--caravana {
  --field-1: #3a4694;
  --field-2: #151a45;
}

.faction--azuralis {
  --field-1: #2f9c7f;
  --field-2: #0e3a2f;
}

.faction--leonhart {
  --field-1: #16406e;
  --field-2: #0a1c33;
}

/* ---------------------------------------------------------------- figuras */

/* Pieza real del juego presentada sobre el fondo, sin marco que compita. */
.figure {
  margin: 0;
}

.figure img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 32px rgb(4 10 20 / 0.6));
}

.figure figcaption {
  margin-top: var(--s-3);
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-style: italic;
  text-align: center;
}

.figure--board img {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  filter: none;
}

/* Ornamento de esquina del instructivo, en las dos esquinas opuestas. */
.corner-art {
  position: absolute;
  width: clamp(3rem, 7vw, 4.5rem);
  opacity: 0.75;
  pointer-events: none;
}

.corner-art--tl {
  top: -2px;
  left: -2px;
}

.corner-art--br {
  right: -2px;
  bottom: -2px;
  rotate: 180deg;
}

/* ---------------------------------------------------------------- escudos */

.shields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 2rem);
  margin-top: var(--s-6);
  text-align: center;
}

.shield-card img {
  /* Altura común para que los tres nombres queden a la misma línea. */
  width: auto;
  height: clamp(6rem, 13vw, 9.5rem);
  margin-inline: auto;
  filter: drop-shadow(0 14px 22px rgb(4 10 20 / 0.65));
  transition: translate var(--dur-base) var(--ease-out);
}

.shield-card:hover img {
  translate: 0 -4px;
}

.shield__name {
  margin-top: var(--s-3);
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
}

@media (min-width: 768px) {
  .shield__name {
    font-size: var(--fs-lg);
  }
}

.shield__note {
  color: var(--text-mute);
  font-size: var(--fs-xs);
}

.shields__rule {
  max-width: var(--measure);
  margin-top: var(--s-6);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- casillas */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.tile {
  position: relative;
  padding: var(--s-4);
  border: 1px solid rgb(201 154 69 / 0.18);
  border-left: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  background: rgb(16 46 85 / 0.28);
}

.tile h4 {
  margin-bottom: var(--s-2);
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.tile p {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.subsection {
  margin-top: var(--s-8);
  color: var(--parchment-100);
}

/* ---------------------------------------------------------------- personajes */

.cast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: clamp(0.75rem, 3vw, 1.75rem);
  margin-top: var(--s-6);
  align-items: end;
  justify-items: center;
}

/* Los personajes se igualan por ALTURA, no por ancho: son figuras de pie sobre
   un mismo suelo. Con `width: 100%` todos ocupaban el ancho de su columna y el
   bardo —mucho más estrecho que el resto: 0.451 de proporción frente a
   0.59-0.67— salía un 40 % más alto que los demás. */
.cast img {
  width: auto;
  height: clamp(8rem, 62vw, 15rem);
  /* Crecen desde los pies: están de pie sobre el mismo suelo. */
  transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 26px rgb(4 10 20 / 0.7));
  transition:
    translate var(--dur-slow) var(--ease-out),
    scale var(--dur-slow) var(--ease-out);
}

.cast figure:hover,
.cast figure:focus-within {
  /* Al crecer invade a sus vecinos: el que se mira va delante. */
  z-index: 1;
}

.cast figure:hover img,
.cast figure:focus-within img {
  translate: 0 -6px;
  scale: 1.25;
}

/* ---------------------------------------------------------------- mazos */

/* Cada fase lleva el color de su mazo: el mismo código que en la mesa. */
.phase--oraculo {
  --deck: var(--deck-oraculo-lit);
}

.phase--conclave {
  --deck: var(--deck-conclave-lit);
}

.phase--juicio {
  --deck: var(--deck-juicio-lit);
}

.phase--hechizos {
  --deck: var(--deck-hechizos-lit);
}

.phase__numeral {
  color: var(--deck, var(--gold-600));
}

.phase__deck {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--s-2);
  color: var(--deck, var(--gold-500));
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.phase__deck::before {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid currentcolor;
  border-radius: 2px;
  background: color-mix(in srgb, currentcolor 45%, transparent);
  content: "";
}

/* ---------------------------------------------------------------- hechizos */

.spells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.spell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-4);
  border: 1px solid rgb(138 95 224 / 0.34);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgb(41 4 103 / 0.6), rgb(12 8 32 / 0.75));
  box-shadow: var(--shadow-panel);
}

.spell__kind {
  color: var(--deck-hechizos-lit);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.spell__name {
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.spell__quote {
  color: var(--text);
  font-size: var(--fs-sm);
  font-style: italic;
}

.spell__effect {
  color: var(--text-mute);
  font-size: var(--fs-xs);
}

.spell__moment {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid rgb(138 95 224 / 0.24);
  color: var(--text-dim);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- nota */

.note {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--rule-strong);
}

.note h3 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-lg);
}

.note p {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.panel__subhead {
  margin-top: var(--s-5);
}

/* ---------------------------------------------------------------- piezas nuevas */

/* El wordmark es toda la marca: se dimensiona contra la altura de la barra,
   así escala con ella en cada breakpoint sin reglas duplicadas.
   Proporción 3:1: a 0.78 de la barra el wordmark ocupa ~190 px de ancho. */
.nav__logo {
  width: auto;
  height: calc(var(--nav-h) * 0.78);
  /* El pie de la T baja más que el resto de letras, así que el bloque de
     mayúsculas queda un 4.8% por encima del centro del PNG y el logo se ve
     alto junto a los enlaces. Se compensa ópticamente. */
  translate: 0 4.8%;
  /* La cabecera es transparente sobre el hero: necesita despegarse del arte. */
  filter: drop-shadow(0 2px 7px rgb(4 10 20 / 0.75));
}

.treasury {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: end;
  margin-top: var(--s-6);
}

/* El `width: 100%` no sobra: sin él, el `margin-inline: auto` convierte la
   ficha en un item de retícula que se encoge hasta su contenido, y ese
   contenido es la imagen. Mientras no ha llegado, la caja mide lo que mide el
   pie —205 px—, y al cargar salta a los 350 del ancho disponible: la sección
   crecía 92 px con la página ya a la vista. Con el ancho declarado, la
   proporción de la imagen reserva el alto correcto desde el primer pintado y
   el `auto` solo se ocupa de centrar dentro de las 40rem. */
.figure--wall {
  width: 100%;
  max-width: 40rem;
  margin: var(--s-8) auto 0;
}

.figure--spellbook img {
  filter:
    drop-shadow(0 0 42px rgb(138 95 224 / 0.32))
    drop-shadow(0 18px 30px rgb(4 10 20 / 0.6));
}

.closing__crown {
  width: 3.25rem;
  height: auto;
  margin-bottom: var(--s-3);
}

/* Los nombres de facción son largos: mandan sobre el tamaño del titular. */
.faction__name {
  font-size: var(--fs-sm);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .faction__name {
    font-size: var(--fs-base);
  }
}


/* =========================================================================
   Densidad para el formato de una sección por pantalla
   Estas reglas ajustan piezas definidas más arriba en este mismo archivo, así
   que viven aquí y no en layout.css: components.css se carga después y las de
   allí perdían por orden de cascada.
   Todo va tras `min-width`: en móvil el contenido sigue apilado y completo, y
   la sección crece si no cabe. Aquí solo se reparte a lo ancho lo que en
   escritorio sobra de ancho y falta de alto.
   ========================================================================= */

@media (min-width: 768px) {
  .phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-6);
    margin-top: var(--s-6);
  }

  .factions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-4) clamp(1rem, 3vw, 1.75rem);
    margin-top: var(--s-6);
  }

  .subsection {
    margin-top: var(--s-6);
  }
}

@media (min-width: 1024px) {
  /* Con el titular dentro de la retícula, la entradilla ya no es la única voz
     del bloque: baja al cuerpo de texto y libera un renglón de alto. */
  .split--lead .lede {
    font-size: var(--fs-base);
  }

  /* el juego */
  .treasury {
    margin-top: var(--s-5);
  }

  .treasury img {
    width: auto;
    max-height: 5rem;
    margin-inline: auto;
  }

  .rule--spaced {
    margin-block: var(--s-3);
  }

  .note {
    padding-block: var(--s-2);
  }

  /* la ronda */
  .phases {
    gap: var(--s-4) var(--s-6);
  }

  .phase h3 {
    font-size: var(--fs-lg);
  }

  .phase p {
    font-size: var(--fs-xs);
  }

  /* Dentro de la retícula del titular estas figuras ya no llevan aire propio.
     El tope va en el alto y el ancho queda `auto`: nunca se deforman. */
  .figure--wall,
  .figure--board {
    max-width: 100%;
    margin: 0;
  }

  .figure--wall img {
    display: block;
    width: auto;
    max-height: 20svh;
    margin-inline: auto;
  }

  .figure--spellbook img {
    width: auto;
    max-height: 32svh;
    margin-inline: auto;
  }

  /* las facciones */
  .cast img {
    height: 13svh;
  }

  /* el mapa */
  .shield-card img {
    height: clamp(4.5rem, 6vw, 6rem);
  }

  /* Los escudos se alinean con el bloque de texto, no con el ancho de la
     columna: repartidos en tres `1fr` ocupaban los 730 px de la retícula y el
     de bronce quedaba muy a la derecha de donde acaba el párrafo. */
  .shields {
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: start;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
  }

  .shields,
  .shields__rule {
    margin-top: var(--s-5);
  }

  .figure--board img {
    width: auto;
    max-height: 44svh;
  }

  .tiles {
    gap: var(--s-3);
    margin-top: var(--s-4);
  }

  .tile {
    padding: var(--s-3);
  }

  .tile p {
    font-size: var(--fs-xs);
  }
}

@media (min-width: 1200px) {
  .phases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .spells {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Los diez estandartes en una sola fila: el muro heráldico completo de un
     vistazo, y la sección cabe en la pantalla. */
  .factions {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: var(--s-3) clamp(0.4rem, 1vw, 0.9rem);
  }

  .faction__banner {
    width: 62%;
  }

  .faction__rod {
    width: 86%;
  }

  .tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* En pantallas cortas se ceden píxeles en las piezas, no en el texto. */
@media (min-width: 1024px) and (max-height: 820px) {
  .treasury img {
    max-height: 3.75rem;
  }

  .shield-card img {
    height: 4rem;
  }

  .figure--board img {
    max-height: 38svh;
  }

  .figure--wall img {
    max-height: 17svh;
  }

  .prose p + p {
    margin-top: var(--s-3);
  }

  .contents li {
    padding: 0.3rem 0;
  }

  .rule--spaced {
    margin-block: var(--s-2);
  }

  .note {
    padding-block: var(--s-1);
  }

  .shields,
  .shields__rule {
    margin-top: var(--s-4);
  }

  .tiles {
    gap: var(--s-2);
  }

  .tile {
    padding: var(--s-2) var(--s-3);
  }
}

/* =========================================================================
   El Reloj del Duelo
   Última sección y única pieza interactiva de la página. Es deliberadamente la
   más vistosa: esfera con anillo que se vacía, haces de luz girando detrás,
   fogonazo al agotarse el tiempo y recuento de duelos cerrados.
   Los estados los pinta el JS con `data-phase` en la sección.
   ========================================================================= */

.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}

/* Mismos tamaños que el resto de secciones: `--fs-h2` en el titular y
   `--fs-lede` en la entradilla. El peso se controla con la longitud del texto
   —una sola línea—, no encogiendo la tipografía del sistema. */
.clock__head {
  /* Ancho generoso a propósito: con `--fs-h2` el titular cabe en una sola
     línea y esos ~58px de alto se los queda la esfera. */
  max-width: 56rem;
}

.clock__head .eyebrow {
  justify-content: center;
}

.clock__head .eyebrow::after {
  display: none;
}

.clock__head .lede {
  margin-top: var(--s-4);
  margin-inline: auto;
}

/* Esfera y controles a un lado, historial al otro. En móvil se apila. */
.clock__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
}

.clock__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

/* Un botón manda: ancho completo. Los dos ajustes van debajo, a su lado. */
.clock__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  width: min(100%, 20rem);
}

.clock__controls-row {
  display: flex;
  gap: var(--s-3);
}

.clock__controls-row > * {
  flex: 1;
  justify-content: center;
}

.clock__main {
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- la esfera */

/* La esfera es la pieza estelar: crece con el ancho Y con el alto de la
   ventana. El término en `svh` es el que impide que la sección se pase de
   pantalla en portátiles bajos. */
.clock__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: min(84vw, 40svh, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
}

/* Anillo de progreso: una capa cónica recortada en corona, gobernada por
   `--p` (1 = lleno, 0 = agotado), que es lo único que escribe el JS. */
.clock__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--dial, var(--gold-500)) calc(var(--p, 1) * 360deg),
    rgb(201 154 69 / 0.14) 0
  );
  mask-image: radial-gradient(
    farthest-side,
    transparent calc(100% - 0.62rem),
    #000 calc(100% - 0.6rem)
  );
  filter: drop-shadow(0 0 12px rgb(201 154 69 / 0.4));
  transition: filter var(--dur-slow) var(--ease-out);
}

/* Haces de luz detrás de la esfera. Solo se encienden mientras corre. */
.clock__rays {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(201 154 69 / 0.12) 0deg 4deg,
    transparent 4deg 22deg
  );
  mask-image: radial-gradient(closest-side, rgb(0 0 0 / 0.9) 24%, transparent 72%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* Fogonazo del final. */
.clock__flash {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 244 214 / 0.7), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.clock__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(16 46 85 / 0.5), rgb(6 16 32 / 0.92)),
    var(--surface-noble);
  box-shadow: inset 0 0 40px rgb(3 9 18 / 0.75);
}

.clock__time {
  /* Por delante de la masilla: se amasa detrás de la cuenta, no encima. */
  position: relative;
  z-index: 1;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 13vw, 5.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px rgb(201 154 69 / 0.35);
}

/* El rótulo sale del flujo y cuelga de la parte baja de la esfera: así el
   número queda en el centro exacto del círculo, y cambiar de rótulo —de
   «Listo» a «Esculpiendo»— no lo desplaza. */
.clock__caption {
  position: absolute;
  bottom: 13%;
  left: 50%;
  width: 86%;
  translate: -50% 0;
  text-wrap: balance;
  color: var(--gold-200);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-align: center;
  text-transform: uppercase;
}

/* --------------------------------------------------- la masilla del duelo */

/* Al comenzar, un pegote de plastilina sube desde el fondo de la esfera y
   alguien lo amasa antes de ponerse a esculpir. Dos capas: `clay` lleva el
   vaivén de las manos (sube, gira, se va) y `mass` la deformación del barro
   (aplastar y estirar, con el contorno cambiando de forma). Separarlas evita
   que una animación pise la `transform` de la otra. */
.clock__clay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 3 / 2;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
}

.clock__clay-mass {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(58% 52% at 36% 30%, rgb(186 132 84 / 0.95), transparent 68%),
    radial-gradient(64% 56% at 68% 64%, rgb(96 62 38 / 0.95), transparent 70%),
    linear-gradient(165deg, #8a5f3a 0%, #6b4a2f 52%, #40291a 100%);
  border-radius: 52% 48% 44% 56% / 58% 62% 38% 42%;
  box-shadow:
    inset -0.35rem -0.5rem 1rem rgb(32 18 10 / 0.55),
    inset 0.3rem 0.35rem 0.9rem rgb(214 168 116 / 0.35),
    0 0.5rem 1.2rem rgb(6 14 28 / 0.6);
  transform-origin: 50% 100%;
}

/* Solo al entrar en marcha: una pasada y se retira. Si pausas y continúas,
   vuelve a amasar, que es justo lo que hace quien retoma la escultura. */
[data-phase="running"] .clock__clay {
  animation: clay-hands 2s var(--ease-out) 1 both;
}

[data-phase="running"] .clock__clay-mass {
  animation: clay-knead 2s var(--ease-inout) 1 both;
}

/* La masa se aplasta con el origen en su base, así que al estirarse crece
   hacia arriba: la posición de reposo se baja un 14 % para compensarlo y que
   el pegote quede a la altura de la cuenta, no por encima. */
@keyframes clay-hands {
  0% {
    opacity: 0;
    translate: -50% 26%;
    rotate: -6deg;
  }

  14% {
    opacity: 1;
    translate: -50% -36%;
    rotate: 2deg;
  }

  40% {
    rotate: -3deg;
  }

  62% {
    rotate: 2deg;
  }

  84% {
    opacity: 1;
    translate: -50% -36%;
    rotate: 0deg;
  }

  100% {
    opacity: 0;
    translate: -50% -54%;
    rotate: 0deg;
  }
}

/* El barro se aplasta y se estira; el contorno nunca repite forma. */
@keyframes clay-knead {
  0% {
    scale: 0.62 0.5;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }

  16% {
    scale: 1.08 0.86;
    border-radius: 56% 44% 48% 52% / 62% 58% 42% 38%;
  }

  34% {
    scale: 0.84 1.14;
    border-radius: 44% 56% 62% 38% / 66% 42% 58% 34%;
  }

  52% {
    scale: 1.12 0.8;
    border-radius: 60% 40% 38% 62% / 42% 60% 40% 58%;
  }

  70% {
    scale: 0.9 1.08;
    border-radius: 46% 54% 56% 44% / 58% 46% 54% 42%;
  }

  86% {
    scale: 1.02 0.96;
    border-radius: 52% 48% 46% 54% / 54% 52% 48% 46%;
  }

  100% {
    scale: 0.94 0.9;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
}

/* --- estados --- */

[data-phase="running"] .clock__rays,
[data-phase="urgent"] .clock__rays {
  opacity: 1;
  animation: clock-rays 90s linear infinite;
}

[data-phase="running"] .clock__face {
  animation: clock-breath 4s var(--ease-inout) infinite;
}

/* Último medio minuto: la corona pasa a borgoña y el número late al segundo. */
[data-phase="urgent"] {
  --dial: var(--burgundy-500);
}

[data-phase="urgent"] .clock__ring {
  filter: drop-shadow(0 0 18px rgb(138 33 49 / 0.65));
}

[data-phase="urgent"] .clock__time {
  color: #ffe6c8;
  animation: clock-beat 1s steps(1, end) infinite;
}

[data-phase="paused"] .clock__time {
  color: var(--text-dim);
}

[data-phase="done"] .clock__flash {
  animation: clock-flash 1300ms var(--ease-out) 2;
}

[data-phase="done"] .clock__caption {
  color: var(--parchment-100);
  font-size: var(--fs-xs);
}

@keyframes clock-rays {
  to {
    rotate: 360deg;
  }
}

@keyframes clock-breath {
  0%,
  100% {
    scale: 1;
  }

  50% {
    scale: 1.012;
  }
}

@keyframes clock-beat {
  0%,
  60% {
    text-shadow: 0 0 30px rgb(201 154 69 / 0.5);
  }

  61%,
  100% {
    text-shadow: 0 0 6px rgb(138 33 49 / 0.5);
  }
}

@keyframes clock-flash {
  from {
    opacity: 0.85;
  }

  to {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- controles */



/* Triángulo de play y dos barras de pausa, dibujados en CSS. */
.clock__icon {
  flex: none;
  width: 0.7em;
  height: 0.78em;
  background: currentcolor;
}

.clock__icon--play {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.clock__icon--pause {
  clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 0 0, 68% 0, 100% 0, 100% 100%, 68% 100%, 68% 0);
}

.clock__mute {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.375rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.clock__mute:hover {
  border-color: var(--rule-strong);
  color: var(--gold-200);
}

.clock__mute .gem {
  transition: opacity var(--dur-base) var(--ease-out);
}

.clock__mute[aria-pressed="true"] {
  color: var(--text-mute);
}

.clock__mute[aria-pressed="true"] .gem {
  opacity: 0.25;
}

/* ---------------------------------------------------------------- historial */

.clock__log {
  width: min(100%, 24rem);
}

.clock__log > summary {
  list-style: none;
}

.clock__log > summary::-webkit-details-marker {
  display: none;
}

.clock__log-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.5rem 0;
  color: var(--text-dim);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}

.clock__log-summary:hover {
  color: var(--gold-200);
}

/* Punta que gira al abrir. */
.clock__log-summary::after {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
  content: "";
  rotate: 45deg;
  translate: 0 -0.1rem;
  transition: rotate var(--dur-base) var(--ease-out);
}

.clock__log[open] .clock__log-summary::after {
  rotate: -135deg;
  translate: 0 0.1rem;
}

.clock__log-count {
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0;
}

.clock__log-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
  animation: panel-in var(--dur-base) var(--ease-out) both;
}

/* Solo la tabla se desplaza: con diez duelos crecería más que la pantalla, y
   el botón de borrar tiene que seguir a la vista. */
.clock__log-scroll {
  width: 100%;
  max-height: 11.5rem;
  overflow-y: auto;
}

.duels {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.duels {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Fuera de la tabla: un `<caption>` con `display: flex` pierde su rol de
   `table-caption` y se cuela por debajo de la cabecera. */



.duels th {
  padding: var(--s-2) 0.6rem;
  color: var(--text-mute);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
}

.duels td {
  padding: 0.42rem 0.6rem;
  border-top: 1px solid rgb(201 154 69 / 0.14);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.duels th:first-child,
.duels td:first-child {
  width: 2.5rem;
  padding-left: 0;
  color: var(--gold-500);
}

.duels th:last-child,
.duels td:last-child {
  padding-right: 0;
  text-align: right;
}

/* La fila recién apuntada entra sola. */
.duels tbody tr:first-child {
  animation: row-in var(--dur-slow) var(--ease-out) both;
}

@keyframes row-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Con historial la tabla manda; sin él, solo se ve el aviso. */
.clock__log[data-empty="true"] .duels {
  display: none;
}

.clock__log:not([data-empty="true"]) .clock__empty {
  display: none;
}

.clock__empty {
  color: var(--text-mute);
  font-size: var(--fs-xs);
  text-align: center;
}

.clock__clear {
  align-self: center;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
}

.clock__clear:hover {
  color: var(--gold-300);
}

/* Borrar es destructivo: el primer clic arma, el segundo confirma. */
.clock__clear[data-armed="true"] {
  color: var(--burgundy-500);
  text-decoration-color: currentcolor;
}

.clock__clear:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (min-width: 768px) {
  .clock__dial {
    /* Objetivo ~425px: el tope de 26.5rem la fija en pantallas altas y el
       término en `svh` la reduce en portátiles bajos. */
    width: min(46vw, 47svh, 26.5rem);
  }
}

/* En escritorio la sección tiene que caber en una pantalla: el aire entre
   bloques se aprieta y el resto lo da el centrado de `.section`. */
@media (min-width: 1024px) {
  .clock,
  .clock__stage {
    gap: var(--s-4);
  }

}