/* Hallmark · macrostructure: Marquee Hero · tone: luxury technical · anchor hue: champagne · genre: atmospheric · theme: LUM360 production DNA */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 · contrast: pass (46–50) · slop: pass (53–55) · honest: pass (56) · chrome: pass (57) · tokens: pass (58) · mobile: pass (36, 59, 61–68) */
/* Hallmark · redesign 2026-10-02: hero con onda de digitalización, secciones de producto (cómo se juega, capturas, dificultades, destinos, retos, tecnología) · motion: reveal + parallax, reduced-motion respetado */
/* Hallmark · component: flight console (radio cards) · states: default · hover · focus · active · disabled · checked · busy · locked (reto) */
/*
 * Digitaliza el Mundo · pantalla de inicio, escenario, HUD y paneles.
 * Requiere /lab/assets/lab.css. El escenario es siempre oscuro (es una superficie de medio, como un video),
 * así que dentro de .dx-dark los tokens del sitio se fijan a sus variantes oscuras.
 */

.dx-dark {
  color-scheme: dark;
  --color-text-primary: var(--color-dark-text);
  --color-text-secondary: var(--color-dark-text-secondary);
  --color-text-muted: var(--color-media-text-muted);
  --color-accent: var(--color-dark-accent);
  --color-accent-strong: var(--color-media-accent);
  --color-border: color-mix(in srgb, var(--color-dark-text) 16%, transparent);
  --color-border-strong: color-mix(in srgb, var(--color-dark-text) 34%, transparent);
  --color-button-primary-bg: var(--color-media-accent);
  --color-button-primary-text: var(--color-dark-surface);
  --color-focus: var(--color-media-accent);
  --color-link: var(--color-media-accent);
  --lab-line: var(--color-border);
  --lab-line-strong: var(--color-border-strong);
  /* Negro del escenario: teñido hacia el tono cálido de la marca, no negro puro. */
  --dx-black: color-mix(in srgb, var(--color-dark-surface) 45%, var(--color-mask-solid));
  --dx-scrim: color-mix(in srgb, var(--color-mask-solid) 74%, transparent);
  --dx-scrim-soft: color-mix(in srgb, var(--color-mask-solid) 46%, transparent);
  --dx-gold-dim: color-mix(in srgb, var(--color-media-accent) 22%, transparent);
  --dx-gold-wash: color-mix(in srgb, var(--color-media-accent) 9%, transparent);
  /* Paneles: superficie opaca, para que el contraste del texto no dependa de la escena que haya detrás. */
  --dx-panel: var(--color-dark-surface);
  --dx-glass: color-mix(in srgb, var(--color-dark-surface) 80%, transparent);
  /* Único color fuera de la marca: aviso de choque (el mismo de los puntos ciegos en 3D). */
  --dx-danger: #ff8a6e;
  --dx-safe-top: max(0.85rem, env(safe-area-inset-top));
  --dx-safe-right: max(0.85rem, env(safe-area-inset-right));
  --dx-safe-bottom: max(0.85rem, env(safe-area-inset-bottom));
  --dx-safe-left: max(0.85rem, env(safe-area-inset-left));
  color: var(--color-text-primary);
}

/* ── Pantalla de inicio ─────────────────────────────────────────────────── */

.dx-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - var(--lab-nav)), 54rem);
  background: var(--color-dark-surface);
  overflow: clip;
}

.dx-hero__poster,
.dx-hero__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.dx-hero__poster { z-index: -2; view-transition-name: lab-exp-poster; }

.dx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--dx-black) 0%, var(--dx-scrim) 28%, transparent 68%),
    linear-gradient(to right, var(--dx-scrim) 0%, var(--dx-scrim-soft) 38%, transparent 72%);
}

.dx-hero__content {
  padding-block: var(--lab-space-3xl) clamp(2rem, 6vh, 4rem);
  min-width: 0;
}

.dx-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lab-space-xs) var(--lab-space-md);
  margin-bottom: var(--lab-space-lg);
}

.dx-kicker a { color: var(--color-accent-strong); text-decoration: none; }
.dx-kicker a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.dx-kicker span + span::before,
.dx-kicker a + span::before { content: "/"; margin-right: var(--lab-space-md); color: var(--color-border-strong); }

.dx-hero__title { max-width: 12ch; }

.dx-hero__alt {
  display: block;
  margin-top: var(--lab-space-sm);
  font-size: 0.36em;
  font-style: italic;
  letter-spacing: 0;
  color: var(--color-accent-strong);
}

.dx-hero .lab-lead { margin-top: var(--lab-space-lg); color: var(--color-text-secondary); }

.dx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lab-space-xs) 0;
  margin-top: var(--lab-space-xl);
  list-style: none;
}

.dx-facts li { padding-right: var(--lab-space-md); margin-right: var(--lab-space-md); border-right: 1px solid var(--color-border-strong); }
.dx-facts .lab-code { color: var(--color-text-primary); }
.dx-facts li:last-child { border-right: 0; padding-right: 0; margin-right: 0; }

/* Consola de vuelo: panel de vidrio con la dificultad, el reto recibido, el despegue y la marca personal. */
.dx-console {
  position: relative;
  width: min(100%, 41rem);
  margin-top: var(--lab-space-lg);
  padding: var(--lab-space-md) var(--lab-space-md) var(--lab-space-md);
  border: 1px solid var(--dx-gold-dim);
  background: var(--dx-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* Escuadras: el panel se lee como un instrumento, no como una tarjeta. */
.dx-console::before,
.dx-console::after {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border: solid var(--color-accent-strong);
  pointer-events: none;
}
.dx-console::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.dx-console::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

.dx-console__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lab-space-2xs) var(--lab-space-md); color: var(--color-text-secondary); }
.dx-console__hint { color: var(--color-accent-strong); }

.dx-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lab-space-xs); margin-top: var(--lab-space-sm); }

.dx-level {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--lab-space-2xs) var(--lab-space-xs);
  min-width: 0;
  padding: var(--lab-space-sm);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.dx-level__index { font-size: var(--lab-text-xs); color: var(--color-text-muted); }
.dx-level strong { grid-column: 1 / -1; margin-top: var(--lab-space-xs); font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 400; line-height: 1.05; white-space: nowrap; }
.dx-level__tag { grid-column: 1 / -1; font-size: var(--lab-text-sm); line-height: 1.35; color: var(--color-text-secondary); }
.dx-level__meter { display: flex; align-items: center; gap: var(--lab-space-3xs); }
.dx-level__meter i { width: 0.95rem; height: 0.2rem; background: var(--color-border-strong); transition: background-color var(--dur-short) var(--ease-out); }
.dx-level__meter i[data-on] { background: var(--color-accent-strong); }
.dx-level__spec { grid-column: 1 / -1; margin-top: var(--lab-space-xs); color: var(--color-text-muted); }
.dx-level__spec .lab-code { color: var(--color-text-primary); }

@media (hover: hover) and (pointer: fine) {
  .dx-level:not(:disabled):hover { border-color: var(--color-border-strong); background: var(--dx-gold-wash); }
}
.dx-level:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dx-level:not(:disabled):active { transform: translateY(1px); }
.dx-level[aria-checked="true"] { border-color: var(--color-accent-strong); background: var(--dx-gold-dim); }
.dx-level[aria-checked="true"] .dx-level__index { color: var(--color-accent-strong); }
.dx-level:disabled { cursor: default; }
.dx-level:disabled:not([aria-checked="true"]) { opacity: 0.4; }

.dx-level-note { min-height: 2.9em; margin-top: var(--lab-space-sm); font-size: var(--lab-text-sm); line-height: 1.45; color: var(--color-text-secondary); }

.dx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lab-space-md) var(--lab-space-lg);
  margin-top: var(--lab-space-md);
}

/* Reto recibido */
.dx-invite { margin-bottom: var(--lab-space-md); padding-bottom: var(--lab-space-md); border-bottom: 1px solid var(--dx-gold-dim); }
.dx-invite[hidden] { display: none; }
:root[data-dx-invite] .dx-invite[hidden] { display: block; visibility: hidden; }
.dx-invite__target { margin-top: var(--lab-space-2xs); font-family: var(--font-display); font-size: var(--lab-text-3xl); font-weight: 300; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.dx-invite__unit { font-size: 0.42em; color: var(--color-text-secondary); }
.dx-invite__note { margin-top: var(--lab-space-xs); font-size: var(--lab-text-sm); color: var(--color-text-secondary); }

.dx-records { min-height: 1.5em; min-height: 1lh; margin-top: var(--lab-space-md); padding-top: var(--lab-space-sm); border-top: 1px solid var(--color-border); color: var(--color-accent-strong); }
.dx-records[hidden] { display: none; }
:root[data-dx-records] .dx-records[hidden] { display: block; visibility: hidden; }

/* Pantalla ancha: el título a la izquierda y la consola a la derecha, para despegar sin hacer scroll. */
@media (min-width: 72rem) {
  .dx-hero__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 36rem); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
  /* El título comparte fila con la consola: se ajusta al ancho de su columna para no partirse dentro de una palabra. */
  .dx-hero__title { font-size: clamp(3.2rem, 5.6vw, 6.4rem); }
  .dx-hero__content > * { grid-column: 1; }
  .dx-hero__content > .dx-console { grid-column: 2; grid-row: 1 / span 8; align-self: end; margin-top: 0; }
}

/* Teléfono: las tres dificultades en filas (nombre a la izquierda, medidor y multiplicador a la derecha) y despegue a todo el ancho. */
@media (max-width: 35.99rem) {
  .dx-levels { grid-template-columns: minmax(0, 1fr); }
  .dx-hero__content { padding-top: var(--lab-space-xl); }
  .dx-hero .dx-kicker { margin-bottom: var(--lab-space-md); }
  .dx-kicker > span:last-child { display: none; }
  .dx-hero .lab-lead { margin-top: var(--lab-space-md); }
  .dx-facts { margin-top: var(--lab-space-md); }
  .dx-console { margin-top: var(--lab-space-md); padding: var(--lab-space-sm); }
  .dx-level { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; align-content: center; gap: var(--lab-space-sm); min-height: 2.9rem; padding-block: var(--lab-space-2xs); }
  .dx-level strong { grid-column: auto; margin-top: 0; }
  .dx-level__tag { display: none; }
  .dx-level__meter { order: 3; }
  .dx-level__spec { grid-column: auto; order: 4; margin-top: 0; }
  .dx-level__spec { font-size: 0; }
  .dx-level__spec .lab-code { font-size: var(--lab-text-xs); }
  .dx-level-note { min-height: 2.9em; margin-top: var(--lab-space-xs); }
  .dx-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-xs); margin-top: var(--lab-space-sm); }
  .dx-actions .lab-btn { width: 100%; }
  .dx-sound { justify-self: start; }
}

.dx-sound {
  display: inline-flex;
  align-items: center;
  gap: var(--lab-space-xs);
  min-height: 2.75rem;
  font-size: var(--lab-text-sm);
  color: var(--color-text-secondary);
}

.dx-sound input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent-strong); }

.dx-note { margin-top: var(--lab-space-md); font-size: var(--lab-text-sm); color: var(--color-text-muted); max-width: 30rem; }

.dx-fallback { display: none; margin-top: var(--lab-space-lg); max-width: 32rem; }
.dx-fallback p { font-size: var(--lab-text-base); line-height: 1.6; color: var(--color-text-secondary); margin-bottom: var(--lab-space-md); }
.dx-hero[data-state="unsupported"] .dx-fallback { display: block; }
.dx-hero[data-state="unsupported"] .dx-note,
.dx-hero[data-state="unsupported"] .dx-console { display: none; }

.dx-defs { position: absolute; }

/* ── Pantalla de inicio · acabado de producto ───────────────────────────── */

/*
 * Escena del hero: un fotograma real del juego. Al cargar, una onda dorada «digitaliza» la imagen
 * (de retícula apagada a escena completa), igual que en el juego. Sin movimiento reducido, solo se ve la escena.
 */
@property --dx-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.dx-hero { --dx-flip: 1; --dx-sx: 58%; --dx-sy: 64%; }

.dx-hero__poster img {
  object-position: 50% 58%;
  transform-origin: 50% 58%;
  transform: scale(calc(var(--dx-flip) * 1.04), 1.04);
  translate: calc(var(--dx-px, 0) * -0.7rem) calc(var(--dx-py, 0) * -0.45rem);
  animation: dx-settle 3200ms var(--ease-out) both;
  transition: translate 400ms var(--ease-out);
}

@keyframes dx-settle { from { transform: scale(calc(var(--dx-flip) * 1.14), 1.14); } }

.dx-hero__raw {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--dx-gold-dim) 0 1px, transparent 1px 3.25rem),
    repeating-linear-gradient(to bottom, var(--dx-gold-dim) 0 1px, transparent 1px 3.25rem),
    color-mix(in srgb, var(--dx-black) 90%, transparent);
  -webkit-mask-image: radial-gradient(circle at var(--dx-sx) var(--dx-sy), transparent var(--dx-r), var(--color-mask-solid) calc(var(--dx-r) + 7%));
  mask-image: radial-gradient(circle at var(--dx-sx) var(--dx-sy), transparent var(--dx-r), var(--color-mask-solid) calc(var(--dx-r) + 7%));
  animation: dx-scan 2800ms var(--ease-in-out) 450ms both;
}

.dx-hero__raw::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-media-accent);
  -webkit-mask-image: radial-gradient(circle at var(--dx-sx) var(--dx-sy), transparent calc(var(--dx-r) - 0.5%), var(--color-mask-solid) var(--dx-r), transparent calc(var(--dx-r) + 0.5%));
  mask-image: radial-gradient(circle at var(--dx-sx) var(--dx-sy), transparent calc(var(--dx-r) - 0.5%), var(--color-mask-solid) var(--dx-r), transparent calc(var(--dx-r) + 0.5%));
  opacity: 0.7;
  animation: inherit;
}

@keyframes dx-scan { from { --dx-r: 0%; } to { --dx-r: 112%; } }

@media (min-width: 72rem) {
  .dx-hero { --dx-flip: -1; --dx-sx: 42%; --dx-sy: 64%; }
}

@media (max-width: 43.99rem) {
  .dx-hero { --dx-sx: 62%; --dx-sy: 58%; }
  .dx-hero__poster img { object-position: 60% 50%; }
}

/* Menos velo que en el diseño anterior: la escena es parte del producto; el texto se apoya en un degradado solo donde hace falta. */
.dx-hero::after {
  background:
    linear-gradient(to top, var(--dx-black) 0%, var(--dx-scrim-soft) 20%, transparent 48%),
    linear-gradient(to right, color-mix(in srgb, var(--color-mask-solid) 68%, transparent) 0%, color-mix(in srgb, var(--color-mask-solid) 38%, transparent) 34%, transparent 64%);
}

.dx-facts { gap: var(--lab-space-xs); margin-top: var(--lab-space-lg); }
.dx-facts li,
.dx-facts li:last-child {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--dx-gold-dim);
  background: color-mix(in srgb, var(--dx-black) 52%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-text-secondary);
}

/* Botón principal: el más claro de la página. */
.dx-play {
  min-height: 3.6rem;
  padding-inline: var(--lab-space-xl);
  font-size: 0.86rem;
  box-shadow: 0 0 0 0 var(--dx-gold-dim);
  animation: dx-pulse 3200ms var(--ease-out) 2800ms infinite;
}
.dx-play::after {
  width: 0.7rem;
  height: 0.8rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .dx-play:hover::after { transform: translateX(0.2rem); }
}
.dx-hero:not([data-state="init"]) .dx-play { animation: none; }
@keyframes dx-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-media-accent) 46%, transparent); }
  70%, 100% { box-shadow: 0 0 0 1.1rem transparent; }
}

.dx-console { border-color: color-mix(in srgb, var(--color-media-accent) 40%, transparent); box-shadow: 0 2rem 5rem var(--dx-scrim-soft); }
.dx-console__meta { margin-top: var(--lab-space-sm); color: var(--color-text-muted); }
.dx-records ~ .dx-console__meta { margin-top: var(--lab-space-sm); }

.dx-hero__cue {
  position: absolute;
  z-index: 1;
  left: max(var(--lab-gutter), calc((100% - var(--lab-max)) / 2));
  bottom: 1.1rem;
  display: none;
  align-items: center;
  gap: var(--lab-space-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.dx-hero__cue i { width: 1px; height: 1.6rem; background: linear-gradient(to bottom, var(--color-media-accent), transparent); transform-origin: top; animation: dx-cue 2200ms var(--ease-in-out) infinite; }
.dx-hero__cue:hover { color: var(--color-media-accent); }
@keyframes dx-cue { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@media (min-width: 72rem) and (min-height: 46rem) { .dx-hero__cue { display: inline-flex; } }

/* ── Revelados ──────────────────────────────────────────────────────────── */

.dxp-js [data-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.dxp-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Estructura común de las secciones ─────────────────────────────────── */

.dx-sechead { max-width: 48rem; margin-bottom: var(--lab-space-2xl); }
.dx-sechead > .lab-label { margin-bottom: var(--lab-space-md); }
.dx-sechead .lab-prose { max-width: 40rem; }

.dx-band {
  position: relative;
  isolation: isolate;
  padding-block: var(--lab-space-4xl);
  background:
    radial-gradient(60rem 30rem at 88% 0%, var(--dx-gold-wash), transparent 70%),
    var(--dx-black);
  border-block: 1px solid var(--dx-gold-dim);
}
.dx-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--color-media-accent) 5%, transparent) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-media-accent) 5%, transparent) 0 1px, transparent 1px 4.5rem);
  -webkit-mask-image: linear-gradient(to bottom, var(--color-mask-solid), transparent 70%);
  mask-image: linear-gradient(to bottom, var(--color-mask-solid), transparent 70%);
}
.dx-band .lab-link,
.dx-band .lab-prose a { color: var(--color-media-accent); }

.dx-how,
.dx-levels-sec,
.dx-reto,
.dx-tech,
.dx-more { padding-block: var(--lab-space-4xl); }

@media (max-width: 40rem) {
  .dx-band, .dx-how, .dx-levels-sec, .dx-reto, .dx-tech, .dx-more { padding-block: var(--lab-space-3xl); }
  .dx-sechead { margin-bottom: var(--lab-space-xl); }
}

/* ── Cómo se juega ──────────────────────────────────────────────────────── */

.dx-how { --dx-warn: #ff8a6e; }
:root[data-theme="light"] .dx-how { --dx-warn: #b3391b; }

.dx-how__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-2xl); align-items: start; }

.dx-demo { min-width: 0; }

.dx-demo__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--lab-line-strong);
  background: var(--color-dark-surface);
  box-shadow: 0 2rem 4rem color-mix(in srgb, var(--color-mask-solid) 28%, transparent);
}
.dx-demo__frame::before,
.dx-demo__frame::after { content: ""; position: absolute; z-index: 2; width: 1rem; height: 1rem; border: solid var(--color-media-accent); pointer-events: none; }
.dx-demo__frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.dx-demo__frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

.dx-demo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-dark-surface); }

.dx-demo__hots { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.dx-hot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--color-media-accent);
  color: var(--color-dark-surface);
  font-family: var(--lab-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--color-media-accent) 28%, transparent), 0 0.3rem 1rem var(--color-dark-overlay-strong);
}
.dx-hot--1 { left: 12%; top: 19%; }
.dx-hot--2 { left: 50%; top: 19%; }
.dx-hot--3 { left: 89%; top: 19%; }
.dx-hot--4 { left: 8%; top: 80%; }
.dx-hot--5 { left: 76%; top: 80%; }

.dx-demo__legend { margin-top: var(--lab-space-lg); }
.dx-demo__legend ol { list-style: none; counter-reset: hot; margin-top: var(--lab-space-sm); border-top: 1px solid var(--lab-line); }
.dx-demo__legend li {
  counter-increment: hot;
  position: relative;
  padding: var(--lab-space-sm) 0 var(--lab-space-sm) 2.4rem;
  border-bottom: 1px solid var(--lab-line);
  font-size: var(--lab-text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.dx-demo__legend li::before { content: counter(hot); position: absolute; left: 0.2rem; top: 0.95rem; font-family: var(--lab-font-mono); font-size: var(--lab-text-xs); font-weight: 700; color: var(--color-accent-strong); }
.dx-demo__legend b { color: var(--color-text-primary); font-weight: 600; }

.dx-how__side { min-width: 0; }

.dx-steps { list-style: none; display: grid; gap: var(--lab-space-lg); }
.dx-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--lab-space-md); align-items: start; }
.dx-steps__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--lab-accent-line); background: var(--lab-accent-faint); color: var(--color-accent-strong); }
.dx-steps__icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dx-steps__icon--warn { border-color: color-mix(in srgb, var(--dx-warn) 55%, transparent); background: color-mix(in srgb, var(--dx-warn) 9%, transparent); color: var(--dx-warn); }
.dx-steps h3 { font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 500; line-height: 1.15; color: var(--color-text-primary); }
.dx-steps p { margin-top: var(--lab-space-2xs); font-size: var(--lab-text-sm); line-height: 1.65; color: var(--color-text-muted); max-width: 32rem; }

.dx-keys { margin-top: var(--lab-space-xl); border-top: 1px solid var(--lab-line); }
.dx-keys > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-2xs) var(--lab-space-md); padding-block: var(--lab-space-md); border-bottom: 1px solid var(--lab-line); }
.dx-keys dd { font-size: var(--lab-text-sm); line-height: 1.9; color: var(--color-text-secondary); }
kbd {
  display: inline-block;
  min-width: 1.7em;
  margin-inline: 0.15em;
  padding: 0.1em 0.45em 0.05em;
  border: 1px solid var(--lab-line-strong);
  border-bottom-width: 2px;
  background: var(--lab-accent-faint);
  color: var(--color-text-primary);
  font-family: var(--lab-font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 40rem) {
  .dx-keys > div { grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 62rem) {
  .dx-how__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--lab-space-3xl); }
  .dx-demo { position: sticky; top: calc(var(--lab-nav) + 1.5rem); }
}

/* ── Capturas ───────────────────────────────────────────────────────────── */

.dx-caps { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--lab-space-lg); }
.dx-cap { grid-column: span 2; display: grid; align-content: start; border: 1px solid var(--dx-gold-dim); background: color-mix(in srgb, var(--dx-panel) 70%, transparent); transition: border-color var(--dur-short) var(--ease-out); }
.dx-cap:nth-child(n + 4) { grid-column: span 3; }

.dx-cap__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dx-black); }
.dx-cap__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.dx-cap__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--dx-scrim) 0%, transparent 46%); }
.dx-cap__badge {
  position: absolute;
  z-index: 1;
  left: var(--lab-space-md);
  bottom: var(--lab-space-md);
  right: var(--lab-space-md);
  display: flex;
  align-items: center;
  gap: var(--lab-space-sm);
}
.dx-cap__badge svg { flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0.35rem; border: 1px solid var(--dx-gold-dim); background: var(--dx-scrim); fill: none; stroke: var(--color-media-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dx-cap__badge span { color: var(--color-text-primary); text-shadow: 0 1px 10px var(--dx-black); }

.dx-cap__body { padding: var(--lab-space-lg); }
.dx-cap__n { font-size: var(--lab-text-xs); color: var(--color-media-accent); }
.dx-cap__n span { color: var(--color-text-muted); }
.dx-cap__name { margin-top: var(--lab-space-xs); font-family: var(--font-display); font-size: var(--lab-text-2xl); font-weight: 400; line-height: 1.08; }
.dx-cap__where { margin-top: var(--lab-space-xs); color: var(--color-text-muted); }
.dx-cap__text { margin-top: var(--lab-space-md); font-size: var(--lab-text-sm); line-height: 1.7; color: var(--color-text-secondary); }

@media (hover: hover) and (pointer: fine) {
  .dx-cap:hover { border-color: var(--color-media-accent); }
  .dx-cap:hover .dx-cap__media img { transform: scale(1.05); }
}
@media (max-width: 62rem) {
  .dx-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-cap, .dx-cap:nth-child(n + 4) { grid-column: span 1; }
  .dx-cap:last-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .dx-caps { grid-template-columns: minmax(0, 1fr); }
  .dx-cap:last-child { grid-column: auto; }
}

/* ── Dificultades ───────────────────────────────────────────────────────── */

.dx-diffs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-lg); }

.dx-diff { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; border: 1px solid var(--lab-line); background: var(--color-surface-soft); transition: border-color var(--dur-short) var(--ease-out); }
.dx-diff__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-dark-surface); }
.dx-diff__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.dx-diff__idx { position: absolute; left: var(--lab-space-md); top: var(--lab-space-md); padding: 0.25rem 0.55rem; background: var(--color-dark-overlay-strong); color: var(--color-dark-accent); font-size: var(--lab-text-xs); }
.dx-diff[data-diff="piloto"] .dx-diff__idx,
.dx-diff[data-diff="maestro"] .dx-diff__idx { color: var(--color-media-accent); }
.dx-diff__body { padding: var(--lab-space-lg); display: grid; align-content: start; }
.dx-diff__name { font-family: var(--font-display); font-size: var(--lab-text-3xl); font-weight: 300; line-height: 1; }
.dx-diff__tag { margin-top: var(--lab-space-xs); color: var(--color-accent-strong); }
.dx-diff__note { margin-top: var(--lab-space-md); font-size: var(--lab-text-sm); line-height: 1.6; color: var(--color-text-secondary); min-height: 3.2em; }
.dx-diff__stats { margin-top: var(--lab-space-md); border-top: 1px solid var(--lab-line); }
.dx-diff__stats > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--lab-space-sm); align-items: baseline; padding-block: var(--lab-space-sm); border-bottom: 1px solid var(--lab-line); }
.dx-diff__stats dd { font-size: var(--lab-text-sm); color: var(--color-text-primary); }
.dx-diff__stats .lab-code { font-size: var(--lab-text-base); }
.dx-bar { position: relative; display: block; height: 3px; margin-top: 0.4rem; background: var(--lab-line); }
.dx-bar::after { content: ""; position: absolute; inset: 0; background: var(--color-accent-strong); transform: scaleX(var(--v, 1)); transform-origin: left center; transition: transform 1100ms var(--ease-out) 250ms; }
.dxp-js .dx-diff:not(.is-in) .dx-bar::after { transform: scaleX(0); }
.dx-diff__cta { margin-top: var(--lab-space-lg); width: 100%; justify-content: space-between; }

@media (hover: hover) and (pointer: fine) {
  .dx-diff:hover { border-color: var(--color-accent-strong); }
  .dx-diff:hover .dx-diff__media img { transform: scale(1.05); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .dx-diff { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); }
  .dx-diff__media { aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 64rem) {
  .dx-diffs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dx-score { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-md); margin-top: var(--lab-space-xl); padding: var(--lab-space-lg); border: 1px solid var(--lab-accent-line); background: var(--lab-accent-faint); }
.dx-score__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--lab-space-md) var(--lab-space-lg); }
.dx-score__list li { padding-left: var(--lab-space-md); border-left: 1px solid var(--lab-accent-line); font-size: var(--lab-text-sm); line-height: 1.55; color: var(--color-text-secondary); }
.dx-score__list .lab-code { display: block; font-variant-numeric: lining-nums tabular-nums; font-family: var(--font-display); font-size: var(--lab-text-2xl); font-weight: 400; color: var(--color-text-primary); }
.dx-score__note { max-width: 52rem; font-size: var(--lab-text-sm); line-height: 1.65; color: var(--color-text-muted); }

/* ── Destinos ───────────────────────────────────────────────────────────── */

.dx-dests { --dx-dest-w: 46rem; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-md); }

.dx-dest--cancun { --c1: #f2b77c; --c2: #2a5868; --c3: #1c8f93; --c4: #e7dece; --c5: #ffd9a3; }
.dx-dest--tulum { --c1: #f59a8a; --c2: #7a4a6a; --c3: #2fa58c; --c4: #e9dcc2; --c5: #ffc9b0; }
.dx-dest--playa { --c1: #ff9e6e; --c2: #3d5f86; --c3: #2a9cb6; --c4: #f4efe6; --c5: #ffd2a0; }
.dx-dest--bacalar { --c1: #e8a8c8; --c2: #5a5a9a; --c3: #3aa6d8; --c4: #dfe3e0; --c5: #ffe0d0; }

.dx-dest {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--dx-gold-dim);
  background: var(--dx-black);
}
.dx-dest picture { position: absolute; inset: 0; display: block; }
.dx-dest img { position: absolute; top: 0; left: 50%; display: block; width: 100%; height: 100%; object-fit: cover; transform: translateX(-50%); transition: transform 1200ms var(--ease-out); }
.dx-dest::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--dx-black) 0%, var(--dx-scrim) 30%, transparent 62%); }

.dx-dest__info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--lab-space-lg); }
.dx-dest__tab {
  display: flex;
  align-items: baseline;
  gap: var(--lab-space-sm);
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: default;
}
.dx-dest__idx { font-size: var(--lab-text-xs); color: var(--color-media-accent); }
.dx-dest__name { font-family: var(--font-display); font-size: var(--lab-text-2xl); font-weight: 400; line-height: 1.02; text-wrap: balance; text-shadow: 0 1px 18px var(--dx-black); }
.dx-dest__note { margin-top: var(--lab-space-xs); font-size: var(--lab-text-sm); line-height: 1.45; color: var(--color-text-secondary); transition: opacity 500ms var(--ease-out); }
.dx-dest__sw { display: flex; gap: 0.3rem; margin-top: var(--lab-space-sm); list-style: none; transition: opacity 500ms var(--ease-out); }
.dx-dest__sw li { width: 1.7rem; height: 0.4rem; background: var(--sw, var(--c1)); }
.dx-dest__sw li:nth-child(1) { --sw: var(--c1); }
.dx-dest__sw li:nth-child(2) { --sw: var(--c2); }
.dx-dest__sw li:nth-child(3) { --sw: var(--c3); }
.dx-dest__sw li:nth-child(4) { --sw: var(--c4); }
.dx-dest__sw li:nth-child(5) { --sw: var(--c5); }

@media (min-width: 40rem) and (max-width: 61.99rem) {
  .dx-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .dx-dests { display: flex; gap: 0.75rem; height: clamp(26rem, 36vw, 33rem); }
  .dx-dest { flex: 1 1 0; min-width: 0; aspect-ratio: auto; }
  .dx-dest img { width: max(100%, var(--dx-dest-w)); }
  .dx-dest__tab { cursor: pointer; }
  .dx-dest__name { font-size: var(--lab-text-xl); }
  .dxp-js .dx-dest { transition: flex-grow 800ms var(--ease-out), border-color var(--dur-short) var(--ease-out); }
  .dxp-js .dx-dest[data-active="true"] { flex-grow: 4.4; border-color: var(--color-media-accent); }
  .dxp-js .dx-dest[data-active="true"] .dx-dest__name { font-size: var(--lab-text-2xl); }
  .dxp-js .dx-dest:not([data-active="true"])::after { background: linear-gradient(to top, var(--dx-black) 0%, var(--dx-scrim-soft) 36%, transparent 70%); }
  .dxp-js .dx-dest:not([data-active="true"]) .dx-dest__note,
  .dxp-js .dx-dest:not([data-active="true"]) .dx-dest__sw { opacity: 0; }
  .dxp-js .dx-dest:not([data-active="true"]) .dx-dest__tab { color: var(--color-text-secondary); }
}

/* ── Retos ──────────────────────────────────────────────────────────────── */

.dx-reto__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-2xl); align-items: center; }
.dx-reto__copy .lab-label { margin-bottom: var(--lab-space-md); }
.dx-reto__steps { list-style: none; display: grid; gap: var(--lab-space-sm); margin-top: var(--lab-space-lg); }
.dx-reto__steps li { display: flex; align-items: baseline; gap: var(--lab-space-md); font-size: var(--lab-text-base); color: var(--color-text-primary); }
.dx-reto__steps .lab-code { flex: 0 0 auto; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--lab-accent-line); color: var(--color-accent-strong); font-size: var(--lab-text-xs); }
.dx-reto__note { margin-block: var(--lab-space-lg) var(--lab-space-xl); max-width: 36rem; padding-left: var(--lab-space-md); border-left: 2px solid var(--lab-accent-line); font-size: var(--lab-text-sm); line-height: 1.65; color: var(--color-text-muted); }

.dx-code {
  --dx-seg-a: var(--color-media-accent);
  --dx-seg-b: #7fd6d0;
  --dx-seg-c: #f2b77c;
  --dx-seg-d: #cdb8ff;
  position: relative;
  min-width: 0;
  padding: var(--lab-space-lg);
  border: 1px solid var(--dx-gold-dim);
  background:
    radial-gradient(28rem 14rem at 100% 0%, var(--dx-gold-wash), transparent 70%),
    var(--color-dark-surface);
  color: var(--color-dark-text);
  box-shadow: 0 2rem 4rem color-mix(in srgb, var(--color-mask-solid) 24%, transparent);
}
.dx-code::before { content: ""; position: absolute; top: -1px; left: -1px; width: 1rem; height: 1rem; border: solid var(--color-media-accent); border-width: 2px 0 0 2px; }
.dx-code > .lab-label { color: var(--color-dark-text-secondary); }
.dx-code__url { margin-block: var(--lab-space-lg); font-family: var(--lab-font-mono); font-size: clamp(1.05rem, 0.7rem + 2.4vw, 2.05rem); font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; color: var(--color-dark-text); }
.dx-code__key { color: var(--color-dark-text-secondary); opacity: 0.8; }
.dx-code__dash { margin-inline: 0.12em; color: var(--color-dark-text-secondary); opacity: 0.55; }
.dx-code__seg { padding-bottom: 0.1em; border-bottom: 2px solid currentColor; }
.dx-code__seg--a { color: var(--dx-seg-a); }
.dx-code__seg--b { color: var(--dx-seg-b); }
.dx-code__seg--c { color: var(--dx-seg-c); }
.dx-code__seg--d { color: var(--dx-seg-d); }
.dx-code__legend { border-top: 1px solid var(--dx-gold-dim); }
.dx-code__legend > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-2xs) var(--lab-space-md); padding-block: var(--lab-space-sm); border-bottom: 1px solid var(--dx-gold-dim); }
.dx-code__legend dt { display: flex; align-items: center; gap: var(--lab-space-xs); font-size: var(--lab-text-sm); font-weight: 600; color: var(--color-dark-text); }
.dx-code__legend dd { font-size: var(--lab-text-sm); line-height: 1.55; color: var(--color-dark-text-secondary); }
.dx-code__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.dx-code__dot--a { color: var(--dx-seg-a); }
.dx-code__dot--b { color: var(--dx-seg-b); }
.dx-code__dot--c { color: var(--dx-seg-c); }
.dx-code__dot--d { color: var(--dx-seg-d); }

@media (min-width: 40rem) {
  .dx-code__legend > div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 62rem) {
  .dx-reto__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--lab-space-3xl); }
}

/* ── Tecnología ─────────────────────────────────────────────────────────── */

.dx-figures { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lab-space-xl) var(--lab-space-lg); padding-block: var(--lab-space-lg) var(--lab-space-xl); border-block: 1px solid var(--lab-line); }
.dx-figures__n { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); font-weight: 300; line-height: 1; color: var(--color-text-primary); font-variant-numeric: lining-nums tabular-nums; }
.dx-figures__n span { font-size: 0.42em; letter-spacing: 0.02em; color: var(--color-accent-strong); }
.dx-figures__t { margin-top: var(--lab-space-sm); max-width: 15rem; font-size: var(--lab-text-sm); line-height: 1.55; color: var(--color-text-muted); }
.dx-spec { margin-top: 0; border-top: 0; }
@media (min-width: 62rem) {
  .dx-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Más del laboratorio ────────────────────────────────────────────────── */

.dx-more__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-lg); }
.dx-more__card { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--lab-line); background: var(--color-surface-soft); color: var(--color-text-primary); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.dx-more__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-dark-surface); }
.dx-more__media picture { display: block; height: 100%; }
.dx-more__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.dx-more__body { display: grid; gap: var(--lab-space-xs); align-content: start; padding: var(--lab-space-lg); }
.dx-more__meta { color: var(--color-text-muted); }
.dx-more__title { font-family: var(--font-display); font-size: var(--lab-text-2xl); line-height: 1.05; }
.dx-more__text { font-size: var(--lab-text-sm); line-height: 1.6; color: var(--color-text-secondary); max-width: 30rem; }
.dx-more__go { display: inline-flex; align-items: center; gap: var(--lab-space-sm); margin-top: var(--lab-space-sm); color: var(--color-accent-strong); }
.dx-more__go::after { content: ""; width: 1.1rem; height: 1px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
  .dx-more__card:hover { border-color: var(--color-accent-strong); }
  .dx-more__card:hover .dx-more__media img { transform: scale(1.05); }
  .dx-more__card:hover .dx-more__go::after { transform: scaleX(1.8); }
}
@media (min-width: 46rem) {
  .dx-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Cierre ─────────────────────────────────────────────────────────────── */

.dx-end { position: relative; isolation: isolate; padding-block: var(--lab-space-4xl); overflow: clip; background: var(--dx-black); border-top: 1px solid var(--dx-gold-dim); }
.dx-end__bg { position: absolute; inset: 0; z-index: -2; }
.dx-end__bg picture { display: block; height: 100%; }
.dx-end__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.dx-end::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--dx-black) 0%, var(--dx-scrim) 52%, var(--dx-scrim-soft) 100%), linear-gradient(to top, var(--dx-black) 0%, transparent 30%); }
.dx-end .lab-label { margin-bottom: var(--lab-space-md); }
.dx-end .lab-close__links a { background: color-mix(in srgb, var(--dx-black) 40%, transparent); padding-inline: var(--lab-space-sm); }
.dx-end .lab-close__links a span:last-child { color: var(--color-text-secondary); }
.dx-end .lab-btn--ghost { border-color: var(--color-border-strong); }

/* ── Botón flotante «Jugar ahora» ───────────────────────────────────────── */

.dx-fab {
  position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: var(--lab-space-sm);
  min-height: 3rem;
  padding: 0 var(--lab-space-lg);
  background: var(--color-media-accent);
  color: var(--color-dark-surface);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--color-mask-solid) 40%, transparent);
  transition: opacity var(--dur-short) var(--ease-out), transform 400ms var(--ease-out), visibility 0s linear 400ms;
}
.dx-fab svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dxp-js .dx-fab { display: inline-flex; opacity: 0; visibility: hidden; transform: translateY(1rem); pointer-events: none; }
.dxp-js .dx-fab[data-visible="true"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
html:has(.dx-hero[data-state="unsupported"]) .dx-fab { display: none; }
.dx-fab:focus-visible { outline: 2px solid var(--color-dark-text); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .dx-fab:hover { transform: translateY(-2px); }
}

/* ── Teléfono ───────────────────────────────────────────────────────────── */

@media (max-width: 35.99rem) {
  .dx-facts li, .dx-facts li:last-child { padding: 0.4rem 0.6rem; }
  .dx-console__meta { display: none; }
  .dx-play { min-height: 3.4rem; padding-inline: var(--lab-space-lg); }
  .dx-diff__stats > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .dx-cap__body, .dx-diff__body { padding: var(--lab-space-md); }
  .dx-fab { right: 0.75rem; min-height: 2.75rem; padding: 0 var(--lab-space-md); }
  .dx-hot { width: 1.3rem; height: 1.3rem; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dx-hero__raw { display: none; }
  .dx-hero__poster img { animation: none; transition: none; translate: none; }
  .dx-play, .dx-hero__cue i { animation: none; }
  .dxp-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .dxp-js .dx-diff:not(.is-in) .dx-bar::after { transform: scaleX(var(--v, 1)); }
  .dx-bar::after, .dx-cap__media img, .dx-diff__media img, .dx-more__media img, .dx-dest img { transition: none; }
  .dxp-js .dx-dest { transition: none; }
  .dx-fab { transition: none; }
}

/* ── Escenario ──────────────────────────────────────────────────────────── */

html.dx-locked,
html.dx-locked body { overflow: hidden; overscroll-behavior: none; }
html.dx-locked body { position: fixed; left: 0; right: 0; width: 100%; }

.dx-stage {
  position: fixed;
  inset: 0;
  z-index: var(--lab-z-stage);
  height: 100dvh;
  background: var(--dx-black);
  overflow: hidden;
  clip-path: circle(0 at var(--dx-origin-x, 50%) var(--dx-origin-y, 70%));
  transition: clip-path 760ms var(--ease-in-out);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}

.dx-stage[hidden] { display: none; }
.dx-stage[data-open="true"] { clip-path: circle(150vmax at var(--dx-origin-x, 50%) var(--dx-origin-y, 70%)); }

.dx-stage__canvas,
.dx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.dx-stage__canvas { cursor: crosshair; }

.dx-stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 52%, var(--dx-scrim-soft) 100%);
}

.dx-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, var(--color-dark-accent) 0%, var(--color-dark-surface) 62%, var(--dx-black) 100%);
  opacity: 0;
  transition: opacity 900ms var(--ease-in-out);
}

.dx-veil[data-on="true"] { opacity: 1; transition-duration: 700ms; }

/* ── Carga ──────────────────────────────────────────────────────────────── */

.dx-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--lab-space-md);
  background: var(--dx-black);
  transition: opacity 700ms var(--ease-in-out) 200ms;
}

.dx-loader[hidden] { display: none; }

.dx-loader__mark {
  position: relative;
  width: clamp(6.5rem, 22vmin, 9rem);
  aspect-ratio: 1;
  margin-bottom: var(--lab-space-md);
  transition: transform 900ms var(--ease-in), opacity 600ms var(--ease-in) 300ms;
}

.dx-loader__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dx-loader__mark svg:first-child { color: var(--dx-gold-dim); }

.dx-loader__mark svg:last-child {
  color: var(--color-accent-strong);
  -webkit-mask-image: conic-gradient(from -40deg, var(--color-mask-solid) calc(var(--dx-progress, 0) * 1turn), transparent 0);
  mask-image: conic-gradient(from -40deg, var(--color-mask-solid) calc(var(--dx-progress, 0) * 1turn), transparent 0);
}

.dx-loader__value {
  font-family: var(--font-display);
  font-size: var(--lab-text-2xl);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dx-loader__exit { margin-top: var(--lab-space-lg); }

.dx-loader[data-state="done"] { opacity: 0; pointer-events: none; }
.dx-loader[data-state="done"] .dx-loader__mark { transform: scale(13); opacity: 0; }
.dx-loader[data-state="done"] .dx-loader__label,
.dx-loader[data-state="done"] .dx-loader__value,
.dx-loader[data-state="done"] .dx-loader__exit { opacity: 0; transition: opacity 200ms var(--ease-in); }

/* ── HUD ────────────────────────────────────────────────────────────────── */

.dx-hud {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--dx-safe-top) var(--dx-safe-right) var(--dx-safe-bottom) var(--dx-safe-left);
  pointer-events: none;
  animation: dx-fade 600ms var(--ease-out) both;
}

.dx-hud[hidden] { display: none; }

.dx-hud__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "status buttons" "captures captures";
  align-items: center;
  gap: var(--lab-space-xs) var(--lab-space-sm);
}

/* Vidas y puntos: sobre una placa oscura, legibles también con la escena ya iluminada. */
.dx-hud__status {
  grid-area: status;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--lab-space-sm);
  min-height: 3rem;
  padding: 0 var(--lab-space-sm);
  border: 1px solid var(--color-border);
  background: var(--dx-scrim);
}

.dx-lives { display: flex; gap: var(--lab-space-2xs); list-style: none; }
.dx-lives li { width: 1.75rem; height: 1.75rem; color: var(--color-accent-strong); transition: color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), transform var(--lab-dur-long) var(--ease-out); }
/* Cada vida es el isotipo oficial (relleno, sin trazo). */
.dx-lives svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: none; filter: drop-shadow(0 0 0.3rem currentColor); }
.dx-lives li[data-state="off"] svg { filter: none; }
.dx-lives li[data-state="off"] { color: var(--color-text-muted); opacity: 0.38; transform: scale(0.78); }

.dx-hud__score { min-width: 3.6rem; font-size: var(--lab-text-lg); font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text-primary); }

.dx-hud__captures {
  grid-area: captures;
  justify-self: center;
  display: flex;
  gap: var(--lab-space-sm);
  list-style: none;
  padding: var(--lab-space-xs) var(--lab-space-sm);
}

.dx-hud__captures li {
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--lab-dur-long) var(--ease-out);
}

.dx-hud__captures li[data-state="next"] { border-color: var(--color-accent-strong); transform: scale(1.25); }
.dx-hud__captures li[data-state="done"] { border-color: var(--color-accent-strong); background: var(--color-accent-strong); }
.dx-hud__captures li[data-state="missed"] { border-style: dashed; opacity: 0.55; }

.dx-hud__buttons { grid-area: buttons; display: flex; justify-content: flex-end; gap: var(--lab-space-xs); pointer-events: auto; }

.dx-icon-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--dx-scrim-soft);
  color: var(--color-text-primary);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.dx-icon-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dx-icon-btn:active { transform: scale(0.95); }
.dx-icon-btn[hidden] { display: none; }
.dx-icon-btn [data-dx-off] { display: none; }
.dx-icon-btn[data-muted="true"] [data-dx-off] { display: block; }
.dx-icon-btn[data-muted="true"] [data-dx-on] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .dx-icon-btn:hover { border-color: var(--color-accent-strong); background: var(--dx-scrim); }
}

/* Microcopy de captura */
.dx-toast {
  align-self: start;
  justify-self: center;
  margin-top: clamp(0.5rem, 4vh, 2.5rem);
  padding: var(--lab-space-md) var(--lab-space-xl);
  /* Placa suave detrás del texto: sobre el cielo del atardecer el dorado solo no se lee. */
  background: radial-gradient(closest-side, var(--dx-scrim) 0%, var(--dx-scrim-soft) 62%, transparent 100%);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in);
}

.dx-toast[data-visible="true"] { opacity: 1; transform: none; transition: opacity var(--lab-dur-long) var(--ease-out), transform var(--lab-dur-long) var(--ease-out); }

.dx-toast__icon { display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto var(--lab-space-xs); fill: none; stroke: var(--color-accent-strong); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dx-toast__count { color: var(--color-accent-strong); }
.dx-toast__name {
  margin-top: var(--lab-space-xs);
  font-family: var(--font-display);
  font-size: var(--lab-text-3xl);
  font-weight: 300;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 1px 24px var(--dx-black);
}
.dx-toast__status { margin-top: var(--lab-space-sm); color: var(--color-text-secondary); }
.dx-toast[data-tone="complete"] .dx-toast__status { color: var(--color-accent-strong); }
.dx-toast[data-tone="missed"] .dx-toast__name { color: var(--color-text-muted); }
/* Choque: el icono es el isotipo oficial (toma el color de `color`). */
.dx-toast[data-tone="hit"] .dx-toast__icon { width: 3rem; height: 3rem; color: var(--dx-danger); stroke: none; filter: drop-shadow(0 0 0.4rem currentColor); }
.dx-toast[data-tone="hit"] .dx-toast__count { color: var(--dx-danger); }
.dx-toast[data-tone="hit"] .dx-toast__name { font-size: var(--lab-text-2xl); }

/* Choque: un destello en los bordes de la pantalla, sin tapar el centro. */
.dx-stage__hit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 46%, color-mix(in srgb, var(--dx-danger) 62%, transparent) 100%);
}
.dx-stage[data-hit="true"] .dx-stage__hit { animation: dx-hit 680ms var(--ease-out) both; }
@keyframes dx-hit { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* Pista de control: una sola vez, se retira con el primer movimiento */
.dx-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dx-safe-bottom) + clamp(4.5rem, 16vh, 8rem));
  display: flex;
  align-items: center;
  gap: var(--lab-space-sm);
  padding: var(--lab-space-sm) var(--lab-space-md);
  border: 1px solid var(--color-border);
  background: var(--dx-scrim);
  white-space: nowrap;
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity var(--lab-dur-long) var(--ease-out), transform var(--lab-dur-long) var(--ease-out);
}

.dx-hint[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
.dx-hint svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--color-accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dx-hint [data-for] { display: none; }
.dx-hint[data-input="touch"] [data-for="touch"],
.dx-hint[data-input="mouse"] [data-for="mouse"],
.dx-hint[data-input="keyboard"] [data-for="mouse"] { display: inline; }

.dx-hud__bottom {
  grid-row: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "flight flight flight" "time route next";
  align-items: center;
  gap: var(--lab-space-xs) var(--lab-space-md);
  text-shadow: 0 1px 10px var(--dx-black), 0 0 2px var(--dx-black);
}

.dx-hud__flight { grid-area: flight; color: var(--color-text-primary); }

.dx-hud__time { min-width: 4.5rem; color: var(--color-text-primary); }
.dx-hud__next { text-align: right; color: var(--color-text-secondary); }
.dx-hud__next b { color: var(--color-accent-strong); font-weight: 500; }

.dx-route { height: 1px; background: var(--color-border-strong); }
.dx-route span { display: block; height: 100%; margin-top: -1px; border-top: 3px solid var(--color-accent-strong); transform: scaleX(0); transform-origin: left center; }

@media (min-width: 46rem) {
  .dx-hud__top { grid-template-columns: 1fr auto 1fr; grid-template-areas: "status captures buttons"; }
}

@media (max-width: 30rem) {
  .dx-hud__next span { display: none; }
}

/* ── Paneles: pausa, resultado, error ───────────────────────────────────── */

.dx-panel {
  position: absolute;
  inset: 0;
  display: grid;
  /* El centrado lo hacen los márgenes automáticos de la tarjeta: si no cabe, se desplaza desde arriba sin recortar el título. */
  align-content: start;
  justify-items: start;
  padding: calc(var(--dx-safe-top) + 1rem) max(var(--dx-safe-right), var(--lab-gutter)) calc(var(--dx-safe-bottom) + 1rem) max(var(--dx-safe-left), var(--lab-gutter));
  background: linear-gradient(to right, var(--dx-scrim) 0%, var(--dx-scrim-soft) 60%, transparent 100%), var(--dx-scrim-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-user-select: text;
  user-select: text;
  animation: dx-fade var(--lab-dur-long) var(--ease-out) both;
}

.dx-panel[hidden] { display: none; }
/* Resultado: la escena final debe seguir viéndose, así que solo se oscurece el lado del texto. */
.dx-panel--scene { background: linear-gradient(to right, var(--dx-scrim) 0%, var(--dx-scrim-soft) 42%, transparent 74%); }
/* Tarjeta opaca con filete dorado: el texto nunca se apoya directamente sobre la escena. */
.dx-panel__inner {
  position: relative;
  width: min(100%, 32rem);
  margin-block: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--dx-gold-dim);
  background: var(--dx-panel);
  box-shadow: 0 1.5rem 5rem var(--dx-scrim);
}
.dx-panel__inner::before { content: ""; position: absolute; top: -1px; left: -1px; width: 0.9rem; height: 0.9rem; border: solid var(--color-accent-strong); border-width: 2px 0 0 2px; pointer-events: none; }
.dx-panel__title { margin-top: var(--lab-space-sm); }
.dx-panel__text { margin-top: var(--lab-space-md); font-size: var(--lab-text-base); line-height: 1.6; color: var(--color-text-secondary); }

.dx-panel__actions { display: grid; gap: var(--lab-space-sm); margin-top: var(--lab-space-lg); }
.dx-panel__actions .lab-btn { width: 100%; justify-content: space-between; }

/* «Salir» como enlace solo en teléfono vertical, donde el botón flotante taparía la tarjeta. */
.dx-panel__links .dx-panel__exit { display: none; }
@media (max-width: 46rem) and (orientation: portrait) { .dx-panel__links .dx-panel__exit { display: inline-flex; } }
.dx-panel__links { display: flex; flex-wrap: wrap; gap: var(--lab-space-sm) var(--lab-space-lg); margin-top: var(--lab-space-lg); }
.dx-panel__links a,
.dx-panel__links button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--lab-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.3em;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.dx-panel__links a:hover,
.dx-panel__links button:hover { color: var(--color-accent-strong); text-decoration-color: var(--color-accent-strong); }

/* Puntuación: la cifra grande en claro; el dorado queda para etiquetas, siempre sobre la tarjeta opaca. */
.dx-scoreline { display: grid; gap: var(--lab-space-xs); margin-top: var(--lab-space-lg); }
.dx-scoreline__value { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 4.75rem); font-weight: 300; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--color-text-primary); }
.dx-scoreline__meta { color: var(--color-text-secondary); }
.dx-flag { color: var(--color-accent-strong); }
.dx-flag[hidden], .dx-verdict[hidden] { display: none; }
.dx-flag::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: var(--lab-space-xs); border-radius: 50%; background: currentColor; }
.dx-verdict { margin-top: var(--lab-space-sm); padding: var(--lab-space-sm) var(--lab-space-md); border-left: 2px solid var(--color-accent-strong); background: var(--dx-gold-wash); font-size: var(--lab-text-sm); line-height: 1.5; color: var(--color-text-primary); }
.dx-verdict[data-tone="lose"] { border-left-color: var(--color-border-strong); }
.dx-panel[data-outcome="failed"] .dx-panel__title { color: var(--dx-danger); }
.dx-panel[data-outcome="failed"] #dx-share,
.dx-panel[data-outcome="failed"] #dx-retry-flight { display: none; }

.dx-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lab-space-sm);
  margin-top: var(--lab-space-lg);
  padding-block: var(--lab-space-md);
  border-block: 1px solid var(--color-border-strong);
}

.dx-stats dt { color: var(--color-text-secondary); }

/* Dificultad del siguiente vuelo */
.dx-next { margin-top: var(--lab-space-md); }
.dx-next > .lab-label { color: var(--color-text-secondary); }
.dx-next__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--lab-space-xs); border: 1px solid var(--color-border-strong); }
.dx-next__options button {
  min-height: 2.75rem;
  padding: 0 var(--lab-space-xs);
  border: 0;
  border-right: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--lab-text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.dx-next__options button:last-child { border-right: 0; }
.dx-next__options button[aria-checked="true"] { background: var(--color-accent-strong); color: var(--color-dark-surface); font-weight: 600; }
.dx-next__options button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dx-next__options button:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .dx-next__options button:not([aria-checked="true"]):hover { background: var(--dx-gold-wash); color: var(--color-text-primary); }
}

.dx-stats dd {
  margin-top: var(--lab-space-xs);
  font-family: var(--font-display);
  font-size: var(--lab-text-xl);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.dx-panel__close { position: absolute; top: var(--dx-safe-top); right: var(--dx-safe-right); }

/* Rótulo final */
.dx-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--lab-space-md);
  padding: var(--lab-gutter);
  text-align: center;
  pointer-events: none;
  /* backwards: al terminar la entrada vuelve a mandar la propiedad opacity (para poder desvanecer el rótulo). */
  animation: dx-fade 1200ms var(--ease-out) 300ms backwards;
  transition: opacity 500ms var(--ease-in);
}

.dx-title[hidden] { display: none; }
.dx-title[data-compact="true"] { opacity: 0; }
/* El rótulo aparece sobre el amanecer del mundo digitalizado (fondo claro y dorado): va sobre una placa oscura y en texto claro. */
.dx-title__plate {
  display: grid;
  justify-items: center;
  gap: var(--lab-space-sm);
  max-width: min(100%, 44rem);
  padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 6vw, 4rem);
  border-block: 1px solid var(--dx-gold-dim);
  background: linear-gradient(to right, transparent 0%, var(--dx-scrim) 16%, var(--dx-scrim) 84%, transparent 100%);
}
.dx-title .lab-display { font-size: var(--lab-text-3xl); color: var(--color-text-primary); text-shadow: 0 2px 28px var(--dx-black); }
.dx-title__line { font-family: var(--font-display); font-size: var(--lab-text-xl); font-style: italic; color: var(--color-text-primary); text-shadow: 0 1px 18px var(--dx-black); }

.dx-context {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  padding: var(--lab-space-md) var(--lab-space-lg);
  background: var(--dx-scrim);
  transform: translate(-50%, -50%);
}
.dx-stage[data-context="lost"] .dx-context { display: block; }

@keyframes dx-fade { from { opacity: 0; } to { opacity: 1; } }

/* En horizontal con poca altura (teléfono girado) los paneles se compactan para caber sin scroll. */
@media (max-width: 46rem) and (orientation: portrait) {
  .dx-panel { padding-inline: max(var(--dx-safe-left), 0.75rem) max(var(--dx-safe-right), 0.75rem); }
  .dx-panel--scene { background: linear-gradient(to top, var(--dx-black) 0%, var(--dx-scrim) 46%, transparent 78%); }
  .dx-panel__inner { width: 100%; }
  .dx-panel--scene .dx-panel__inner { margin-bottom: 0; }
  .dx-panel--scene .dx-panel__close { display: none; }
}

@media (max-width: 26rem) {
  .dx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-hud__score { min-width: 0; font-size: var(--lab-text-base); }
  .dx-hud__status { gap: var(--lab-space-xs); padding: 0 var(--lab-space-xs); }
  .dx-lives li { width: 1.45rem; height: 1.45rem; }
}

@media (max-height: 30rem) {
  .dx-panel { padding-top: calc(var(--dx-safe-top) + 0.5rem); }
  .dx-panel__inner { width: min(100%, 44rem); }
  .dx-panel__inner { padding: var(--lab-space-md); }
  .dx-panel__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--lab-space-md); }
  .dx-panel__actions .lab-btn { min-width: 0; min-height: 2.75rem; }
  .dx-scoreline { margin-top: var(--lab-space-sm); }
  .dx-scoreline__value { font-size: var(--lab-text-2xl); }
  .dx-next { margin-top: var(--lab-space-sm); }
  .dx-toast__icon { width: 1.6rem; height: 1.6rem; }
  .dx-toast { padding-block: var(--lab-space-xs); }
  .dx-stats { margin-top: var(--lab-space-md); padding-block: var(--lab-space-sm); }
  .dx-panel__links { margin-top: var(--lab-space-sm); }
  .dx-toast__name { font-size: var(--lab-text-2xl); }
  .dx-toast { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dx-stage,
  .dx-stage[data-open="true"] { clip-path: none; transition: none; }
  .dx-loader,
  .dx-loader__mark,
  .dx-veil,
  .dx-toast,
  .dx-hint,
  .dx-title { transition-duration: 150ms; transition-delay: 0ms; }
  .dx-loader[data-state="done"] .dx-loader__mark { transform: none; }
  .dx-hud,
  .dx-panel,
  .dx-title { animation-duration: 150ms; animation-delay: 0ms; }
  .dx-stage[data-hit="true"] .dx-stage__hit { animation-duration: 200ms; }
  .dx-level, .dx-lives li { transition: none; }
}