/* levels — pantalla /niveles (v3 · camino continuo). Dueño: agente NIVELES. Solo clases .lv-*
   Una columna con los 36 niveles seguidos: cada mundo (.lv-world) es una banda + su tramo de vía.
   Colores del mundo en --lv-1 / --lv-2 / --lv-acc (los pone el JS en cada .lv-world y en .lv-screen
   para el ambiente, desde rewards.WORLDS[i].theme o sus 6 paletas propias).
   Rendimiento: las animaciones solo corren en los mundos cerca de la pantalla ([data-live]); la entrada
   con «pop» solo en el mundo actual; nada de backdrop-filter en los nodos (el fondo es fijo y el camino
   se desplaza: obligaría a recomponer en cada frame de scroll). */

@property --lv-1 { syntax: '<color>'; inherits: true; initial-value: #7C5CFF; }
@property --lv-2 { syntax: '<color>'; inherits: true; initial-value: #C155FF; }
@property --lv-acc { syntax: '<color>'; inherits: true; initial-value: #FFD76A; }

.lv-screen, .lv-sheet, .lv-world, .lv-end {
  --lv-glow: color-mix(in srgb, var(--lv-1) 50%, transparent);
  --lv-gold-1: #FFD76A;
  --lv-gold-2: #FFB547;
}

.lv-screen {
  position: relative;
  isolation: isolate;
  transition: --lv-1 700ms ease, --lv-2 700ms ease, --lv-acc 700ms ease;
}

.lv-ic { display: inline-flex; line-height: 0; }
.lv-ic svg { display: block; }

/* ---------- Ambiente del mundo (fijo, detrás de todo; sigue al mundo que cruza el centro) ---------- */
.lv-amb {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.lv-amb-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 55% at 12% 0%, color-mix(in srgb, var(--lv-1) 36%, transparent), transparent 70%),
    radial-gradient(80% 60% at 100% 55%, color-mix(in srgb, var(--lv-2) 26%, transparent), transparent 70%),
    radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--lv-acc) 16%, transparent), transparent 70%),
    var(--bg);
}
.lv-amb-glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  left: 50%;
  top: 40%;
  margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lv-2) 20%, transparent), transparent 62%);
  animation: lv-drift 22s ease-in-out infinite alternate;
}
/* La entrada de pantalla del shell (#app.screen-enter) usa transform: con transform, este fondo «fixed» quedaría
   encerrado en la columna de #app mientras dura y saltaría luego a toda la pantalla (flash centro → laterales).
   En Niveles la entrada es solo de opacidad. */
body[data-screen="levels"] #app.screen-enter { animation-name: lv-fade; }
.lv-amb-set { position: absolute; inset: 0; animation: lv-fade 700ms ease both; }
/* El primer ambiente aparece junto con la pantalla, sin fundido propio (solo se funde al cambiar de mundo). */
.lv-amb-set.is-instant { animation: none; }
.lv-amb-set.is-leaving { animation: lv-fade-out 600ms ease both; }
.lv-amb-layer {
  position: absolute;
  inset: 0;
}
.lv-deco {
  position: absolute;
  translate: -50% -50%;
  color: var(--lv-1);
  opacity: 0.2;
}
.lv-amb-layer[data-depth="near"] .lv-deco { opacity: 0.3; }
.lv-deco[data-tone="2"] { color: var(--lv-2); }
.lv-deco[data-tone="acc"] { color: var(--lv-acc); }
.lv-deco[data-tone="gold"] { opacity: 0.75; }
.lv-deco-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  rotate: var(--rot, 0deg);
  animation: lv-float var(--dur, 12s) ease-in-out var(--delay, 0s) infinite alternate;
}
.lv-deco-svg * { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lv-deco-svg .f { fill: currentColor; stroke: none; }
.lv-deco-svg .f2 { fill: currentColor; fill-opacity: 0.35; }
.lv-deco-svg .thick { stroke-width: 6; }
.lv-deco-svg .dash { stroke-dasharray: 4 7; }
.lv-deco-svg .gold { fill: #FFD76A; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.8)); }
.lv-deco[data-kind="sparkle"] .lv-deco-svg { animation: lv-twinkle calc(var(--dur, 12s) / 4) ease-in-out var(--delay, 0s) infinite alternate; }

/* ---------- Columna ---------- */
.lv-col {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  /* main#app ya reserva la tabbar; esto deja aire extra bajo la tarjeta final. */
  padding-bottom: calc(var(--tabbar-h, 64px) * 0.5 + 24px);
}

/* ---------- Cabecera fija: estrellas totales + «Nivel N» ---------- */
.lv-head {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 8;
  padding: 2px 0 6px;
  pointer-events: none;
}
.lv-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.lv-topline > * {
  pointer-events: auto;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.55);
}
.lv-total {
  min-height: 40px;
  font-variant-numeric: tabular-nums;
}
/* Las pastillas flotan sobre el camino al hacer scroll: fondo OPACO (el tinte de .chip[data-tone] es
   translúcido y dejaba ver la vía y los nodos por detrás). */
.lv-head .lv-topline > .chip[data-tone] {
  background: linear-gradient(var(--lv-chip-tint), var(--lv-chip-tint)), var(--bg-elevated, var(--bg));
  box-shadow: inset 0 0 0 1px var(--lv-chip-ring), 0 8px 22px -12px rgba(0, 0, 0, 0.55);
}
.lv-head .lv-topline > .chip[data-tone="gold"] {
  --lv-chip-tint: color-mix(in srgb, var(--gold, #FFC940) 18%, transparent);
  --lv-chip-ring: color-mix(in srgb, var(--gold, #FFC940) 40%, transparent);
}
.lv-head .lv-topline > .chip[data-tone="brand"] {
  --lv-chip-tint: var(--accent-soft, rgba(124, 92, 255, 0.2));
  --lv-chip-ring: rgba(124, 92, 255, 0.3);
}
.lv-total .lv-ic { color: var(--lv-gold-2); }
.lv-go {
  min-height: 44px;
  padding-inline: 16px;
  cursor: pointer;
  border: 0;
  font: inherit;
  font-weight: 800;
}
.lv-go:focus-visible { outline: 3px solid var(--lv-1); outline-offset: 3px; }

/* ---------- Mundo: banda (cabecera dentro del camino) ---------- */
.lv-path { position: relative; overflow-x: clip; overflow-clip-margin: 14px; }
.lv-world { position: relative; }
.lv-band {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 28px 0 22px;
}
.lv-world:first-child .lv-band { padding-top: 6px; }
.lv-band-card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 18px 16px;
  text-align: center;
  border-radius: var(--radius-xl, 24px);
  /* Opaco a propósito (sin backdrop-filter): tapa la vía que pasa por detrás. */
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lv-1) 22%, transparent), color-mix(in srgb, var(--lv-2) 10%, transparent) 60%),
    color-mix(in srgb, var(--bg, #07071A) 90%, var(--lv-1));
  border: 1px solid color-mix(in srgb, var(--lv-1) 34%, var(--glass-border, transparent));
  box-shadow: 0 16px 34px -18px var(--lv-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.lv-world[data-locked="true"] .lv-band-card { border-style: dashed; box-shadow: none; }
.lv-band-num {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, var(--lv-1), var(--lv-2));
}
.lv-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lv-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #888) 12%, transparent);
  letter-spacing: 0;
  text-transform: none;
}
.lv-flag-done { background: linear-gradient(135deg, var(--lv-gold-1), var(--lv-gold-2)); color: #3A2400; }
.lv-name {
  margin: 2px 0 0;
  max-width: 100%;
  font-family: var(--font-display, inherit);
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  padding-bottom: 0.06em;
  background: linear-gradient(120deg, color-mix(in srgb, var(--lv-1) 85%, var(--ink)), color-mix(in srgb, var(--lv-2) 50%, var(--ink)) 55%, color-mix(in srgb, var(--lv-acc) 85%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: break-word;
}
.lv-sub { font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }
.lv-score { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 6px; }
.lv-score-num { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: 15px; white-space: nowrap; }
.lv-score-num .lv-ic { color: var(--lv-gold-2); filter: drop-shadow(0 1px 4px rgba(255, 181, 71, 0.6)); }
.lv-score .lv-hbar { flex: 0 1 220px; }
.lv-hbar {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink, #888) 13%, transparent);
}
.lv-hbar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lv-gold-1), var(--lv-gold-2));
  box-shadow: 0 0 10px rgba(255, 181, 71, 0.6);
  transform-origin: left;
}
.lv-world .lv-hbar-fill { animation: lv-grow 900ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) 200ms both; }
.lv-band-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.lv-band-note .lv-ic { margin-top: 2px; }
.lv-world[data-locked="true"] .lv-map { filter: saturate(0.4); opacity: 0.88; }

/* Trozo de vía en CSS que une el final de un mundo con el principio del siguiente (pasa por detrás
   de la banda). Mismas medidas que la vía SVG: lecho 32px, raíles a ±5.5px, traviesas cada 13px. */
.lv-link {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 32px;
  translate: -50% 0;
  pointer-events: none;
  --lv-rail: color-mix(in srgb, var(--ink, #888) 30%, transparent);
  --lv-sleeper: color-mix(in srgb, var(--ink, #888) 20%, transparent);
  --lv-bedc: color-mix(in srgb, var(--ink, #888) 7%, transparent);
  background:
    repeating-linear-gradient(to bottom, var(--lv-rail) 0 2px, transparent 2px 8px) 9px 0 / 3px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--lv-rail) 0 2px, transparent 2px 8px) 20px 0 / 3px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 4.5px, var(--lv-sleeper) 4.5px 8.5px, transparent 8.5px 13px) 6px 0 / 20px 100% no-repeat,
    var(--lv-bedc);
}
.lv-world:first-child .lv-link { top: 50%; }
.lv-world[data-reached="true"] .lv-link {
  --lv-sleeper: color-mix(in srgb, var(--lv-2) 55%, transparent);
  --lv-bedc: color-mix(in srgb, var(--lv-1) 16%, transparent);
  background:
    linear-gradient(var(--lv-1), var(--lv-1)) 8.7px 0 / 3.6px 100% no-repeat,
    linear-gradient(var(--lv-1), var(--lv-1)) 19.7px 0 / 3.6px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 4.5px, var(--lv-sleeper) 4.5px 8.5px, transparent 8.5px 13px) 6px 0 / 20px 100% no-repeat,
    var(--lv-bedc);
}

/* ---------- Mapa y vía ---------- */
.lv-map { position: relative; margin-top: 4px; }
.lv-track-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.lv-stop-1 { stop-color: var(--lv-1); }
.lv-stop-2 { stop-color: var(--lv-2); }
.lv-stop-3 { stop-color: var(--lv-acc); }
.lv-stop-gold { stop-color: #FFD76A; }

.lv-bed { fill: none; stroke: color-mix(in srgb, var(--ink, #888) 7%, transparent); stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.lv-trk.is-lit .lv-bed { stroke: color-mix(in srgb, var(--lv-1) 16%, transparent); }
.lv-sleepers { fill: none; stroke: color-mix(in srgb, var(--ink, #888) 20%, transparent); stroke-width: 4; stroke-linecap: round; }
.lv-trk.is-lit .lv-sleepers { stroke: color-mix(in srgb, var(--lv-2) 55%, transparent); }
.lv-rail { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lv-trk.is-pending .lv-rail { stroke: color-mix(in srgb, var(--ink, #888) 30%, transparent); stroke-dasharray: 0.5 7; }
.lv-trk.is-lit .lv-rail { stroke-width: 3.6; filter: drop-shadow(0 0 5px var(--lv-glow)); }
.lv-core {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.01 0.07;
  opacity: 0.8;
}
.lv-world[data-current="true"] .lv-core { animation: lv-flow 9s linear infinite; }
.lv-branch.is-lit .lv-sleepers { stroke: color-mix(in srgb, var(--lv-gold-2) 55%, transparent); }
.lv-branch.is-lit .lv-bed { stroke: color-mix(in srgb, var(--lv-gold-1) 14%, transparent); }
.lv-branch.is-lit .lv-rail { filter: drop-shadow(0 0 5px rgba(255, 200, 90, 0.6)); }

/* Dibujo animado del tramo recorrido */
.lv-draw .lv-rail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lv-draw var(--dur, 1100ms) var(--ease-out-expo, ease) var(--delay, 0ms) forwards; }
.lv-draw .lv-sleepers, .lv-draw .lv-bed { animation: lv-fade calc(var(--dur, 1100ms) * 0.8) ease var(--delay, 0ms) both; }
.lv-world[data-current="true"] .lv-draw .lv-core { animation: lv-fade 500ms ease calc(var(--delay, 0ms) + var(--dur, 1100ms)) both, lv-flow 9s linear infinite; }
.lv-trk.is-new .lv-rail { animation-timing-function: ease-in-out; }

/* ---------- Nodos de nivel ---------- */
.lv-node {
  --size: 64px;
  position: absolute;
  translate: -50% -50%;
  width: var(--size);
  height: var(--size);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.lv-world[data-animate="true"] :is(.lv-node, .lv-chest, .lv-isle, .lv-bossprize) {
  animation: lv-pop 520ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--d, 0ms) both;
}
.lv-node[data-state="open"] { --size: 80px; z-index: 3; }
.lv-node[data-kind="boss"] { --size: 92px; }
.lv-node:focus-visible { outline: none; }
.lv-node:focus-visible .lv-node-disc { outline: 3px solid var(--lv-1); outline-offset: 4px; }

.lv-node-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 220ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.lv-node:active .lv-node-disc { transform: scale(0.93) translateY(3px); }
.lv-node-num { position: relative; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; }
.lv-node-ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; }

.lv-node[data-state="locked"] { cursor: not-allowed; }
.lv-node[data-state="locked"] .lv-node-disc {
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--ink, #888) 10%, transparent), transparent 55%), color-mix(in srgb, var(--bg, #07071A) 86%, var(--lv-1));
  border: 2px dashed color-mix(in srgb, var(--ink, #888) 30%, transparent);
  /* ink-2 y no ink-3: el candado debe verse también en el tema claro (ink-3 ≥ 4.5:1). */
  color: var(--ink-2);
}

.lv-node[data-state="done"] .lv-node-disc {
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.4), transparent 42%), linear-gradient(145deg, var(--lv-1), var(--lv-2));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 5px 0 color-mix(in srgb, var(--lv-2) 55%, #000),
    0 14px 26px -8px var(--lv-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.lv-node[data-state="open"] .lv-node-disc {
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.6), transparent 45%), linear-gradient(145deg, var(--lv-1), var(--lv-2));
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--lv-2) 55%, #000), 0 16px 34px -8px var(--lv-glow);
}
.lv-node[data-state="open"] .lv-node-num { font-size: 32px; }
.lv-node[data-state="open"] .lv-node-ring {
  border: 3px solid color-mix(in srgb, var(--lv-1) 70%, transparent);
  animation: lv-ring 2s ease-out infinite;
}

/* Jefe */
.lv-node[data-kind="boss"] .lv-node-disc { border: 4px solid var(--lv-gold-1); }
.lv-node[data-kind="boss"][data-state="done"] .lv-node-disc,
.lv-node[data-kind="boss"][data-state="open"] .lv-node-disc {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.5), transparent 42%),
    conic-gradient(from 200deg, var(--lv-2), var(--lv-1), var(--lv-2));
  box-shadow: 0 6px 0 #9A6A12, 0 0 0 6px color-mix(in srgb, var(--lv-gold-1) 22%, transparent), 0 18px 40px -8px rgba(255, 181, 71, 0.6);
}
.lv-node[data-kind="boss"][data-state="locked"] .lv-node-disc { border: 3px dashed color-mix(in srgb, var(--lv-gold-2) 60%, transparent); }
.lv-node[data-kind="boss"] .lv-node-num { font-size: 34px; }
.lv-crown {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  translate: -50% 0;
  color: var(--lv-gold-1);
  filter: drop-shadow(0 2px 6px rgba(255, 181, 71, 0.7));
  animation: lv-crown 3s ease-in-out infinite;
  z-index: 1;
}
.lv-crown .icon path { fill: color-mix(in srgb, var(--lv-gold-1) 55%, transparent); }
.lv-node[data-state="locked"] .lv-crown { color: color-mix(in srgb, var(--lv-gold-2) 60%, var(--ink-3, #888)); filter: none; animation: none; }
.lv-plaque {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  translate: -50% 0;
  padding: 3px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3A2400;
  background: linear-gradient(135deg, var(--lv-gold-1), var(--lv-gold-2));
  box-shadow: 0 4px 0 #9A6A12, 0 8px 16px -6px rgba(255, 181, 71, 0.6);
}

.lv-node-cta, .lv-node-meta {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  translate: -50% 0;
  white-space: nowrap;
}
.lv-node[data-kind="boss"] .lv-node-cta, .lv-node[data-kind="boss"] .lv-node-meta { top: calc(100% + 38px); }
.lv-node-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lv-1), var(--lv-2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 18px -6px var(--lv-glow);
}
.lv-node-meta { display: flex; flex-direction: column; align-items: center; gap: 0; }
.lv-node-best {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, #000) 55%, transparent);
}

.lv-stars { display: inline-flex; gap: 1px; }
.lv-star { color: color-mix(in srgb, var(--ink, #888) 24%, transparent); display: inline-flex; }
.lv-star[data-on] { color: var(--lv-gold-1); filter: drop-shadow(0 1px 3px rgba(255, 181, 71, 0.75)); }
.lv-node .lv-star:nth-child(2) { translate: 0 3px; }
.lv-world[data-animate="true"] .lv-node .lv-star[data-on] { animation: lv-star-pop 520ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) calc(var(--d, 0ms) + 300ms) both; }
.lv-world[data-animate="true"] .lv-node .lv-star:nth-child(2)[data-on] { animation-delay: calc(var(--d, 0ms) + 380ms); }
.lv-world[data-animate="true"] .lv-node .lv-star:nth-child(3)[data-on] { animation-delay: calc(var(--d, 0ms) + 460ms); }

.lv-shake { animation: lv-shake 380ms ease both; }

/* ---------- Cofres ---------- */
.lv-chest {
  position: absolute;
  translate: -50% -50%;
  width: 64px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.lv-chest[data-kind="gold"] { width: 72px; height: 66px; }
.lv-chest:focus-visible { outline: 3px solid var(--lv-1); outline-offset: 4px; border-radius: 14px; }
.lv-ch-svg { overflow: visible; }
.lv-chest[data-kind="gold"] .lv-ch-svg { width: 70px; height: 66px; }
.lv-ch-body { fill: color-mix(in srgb, var(--lv-2) 50%, #5A2D0C); }
.lv-ch-strap { fill: #FFD76A; }
.lv-ch-band { fill: rgba(0, 0, 0, 0.18); }
.lv-ch-lock { fill: #FFE9A8; stroke: #B7791F; stroke-width: 0.8; }
.lv-ch-hole { fill: #5A3A0A; }
.lv-ch-hi { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; stroke-linecap: round; }
.lv-ch-shadow { fill: rgba(0, 0, 0, 0.28); }
.lv-ch-glow { fill: var(--lv-acc); opacity: 0; }
.lv-ch-inner { fill: #2A1A08; opacity: 0; }
.lv-ch-rays { fill: none; stroke: #FFE9A8; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.lv-ch-spark { fill: #FFF3C4; animation: lv-twinkle 1.4s ease-in-out infinite alternate; }
.lv-ch-spark:nth-of-type(2) { animation-delay: -0.5s; }
.lv-ch-spark:nth-of-type(3) { animation-delay: -1s; }
.lv-ch-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform 500ms var(--ease-spring, ease); }

.lv-ch-svg[data-kind="gold"] .lv-ch-body { fill: #F5B82E; }
.lv-ch-svg[data-kind="gold"] .lv-ch-strap { fill: #B7791F; }
.lv-ch-svg[data-kind="gold"] .lv-ch-glow { fill: #FFD76A; }

.lv-ch-svg[data-state="locked"] { filter: grayscale(0.55) brightness(0.85); opacity: 0.85; }
.lv-ch-svg[data-state="ready"] .lv-ch-glow { opacity: 0.4; animation: lv-glow 1.6s ease-in-out infinite alternate; }
.lv-ch-svg[data-state="ready"] .lv-ch-lid { animation: lv-lid 2.2s ease-in-out infinite; }
.lv-ch-svg[data-state="claimed"] .lv-ch-lid { transform: translate(-2px, -8px) rotate(-18deg); }
.lv-ch-svg[data-state="claimed"] .lv-ch-inner { opacity: 1; }
.lv-ch-svg[data-state="claimed"] .lv-ch-rays { opacity: 0.45; }
.lv-ch-svg[data-state="claimed"] .lv-ch-lock, .lv-ch-svg[data-state="claimed"] .lv-ch-hole { opacity: 0; }
.lv-chest[data-state="ready"] .lv-ch-svg { animation: lv-hop 2.2s ease-in-out 1s infinite; }

.lv-chest-tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: #3A2400;
  background: linear-gradient(135deg, var(--lv-gold-1), var(--lv-gold-2));
}

/* ---------- Isla del desvío ---------- */
.lv-isle {
  position: absolute;
  translate: -50% -50%;
  width: 132px;
  height: 88px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  z-index: 2;
}
.lv-isle:focus-visible { outline: 3px solid var(--lv-gold-1); outline-offset: 6px; border-radius: 24px; }
.lv-isle-float { position: absolute; inset: 0; display: block; animation: lv-bob 4.5s ease-in-out infinite; }
.lv-isle-svg { width: 100%; height: 100%; overflow: visible; }
.lv-isle-halo { fill: var(--lv-gold-1); opacity: 0; }
.lv-isle-rock { fill: color-mix(in srgb, var(--lv-2) 40%, #1B1030); }
.lv-isle-crack { fill: none; stroke: rgba(0, 0, 0, 0.25); stroke-width: 2; stroke-linecap: round; }
.lv-isle-top { fill: color-mix(in srgb, var(--lv-acc) 75%, var(--lv-1)); }
.lv-isle-shine { fill: rgba(255, 255, 255, 0.28); }
.lv-isle[data-state="open"] .lv-isle-halo { opacity: 0.3; animation: lv-glow 1.8s ease-in-out infinite alternate; }
.lv-isle[data-state="locked"] .lv-isle-float { filter: saturate(0.3) brightness(0.8); opacity: 0.85; }
.lv-isle-badge {
  position: absolute;
  left: 50%;
  top: 30%;
  translate: -50% -60%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), transparent 45%), linear-gradient(145deg, var(--lv-gold-1), var(--lv-gold-2) 45%, var(--lv-2));
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 0 #9A6A12, 0 12px 24px -6px rgba(255, 181, 71, 0.6);
}
.lv-isle[data-state="locked"] .lv-isle-badge {
  background: color-mix(in srgb, var(--surface, #222) 85%, transparent);
  color: var(--ink-2);
  border: 2px dashed color-mix(in srgb, var(--ink, #888) 35%, transparent);
  box-shadow: none;
}
.lv-isle[data-state="passed"] .lv-isle-badge { background: var(--grad-good, linear-gradient(135deg, #34D399, #10B981)); box-shadow: 0 5px 0 #0B7A55, 0 12px 24px -6px rgba(52, 211, 153, 0.5); }
.lv-isle-item {
  position: absolute;
  right: -2px;
  top: -14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-strong, var(--surface));
  box-shadow: inset 0 0 0 1px var(--glass-border, transparent), 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.lv-isle-new {
  position: absolute;
  right: 0;
  top: -12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3A2400;
  background: linear-gradient(135deg, var(--lv-gold-1), var(--lv-gold-2));
  animation: lv-hop 1.8s ease-in-out infinite;
}
.lv-isle-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  translate: -50% 0;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  line-height: 1.2;
}
/* --gold-text: oro legible en los dos temas (el #FFB547 no llega a 2:1 sobre el fondo claro). */
.lv-isle-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text, var(--lv-gold-2)); }
.lv-isle-name { font-size: 14px; font-weight: 800; color: var(--ink); }

/* Premio del jefe (burbuja junto al nodo) */
.lv-bossprize {
  position: absolute;
  translate: -50% -50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-strong, var(--surface));
  box-shadow: inset 0 0 0 1px var(--glass-border, transparent), 0 10px 22px -10px rgba(255, 181, 71, 0.7);
  pointer-events: none;
  z-index: 1;
}
.lv-bossprize > .lv-item { animation: lv-bob 3.6s ease-in-out 600ms infinite; }
.lv-bossprize[data-state="locked"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lv-gold-2) 55%, transparent), 0 0 18px -4px rgba(255, 181, 71, 0.55); }
.lv-bossprize[data-state="locked"] .lv-item { filter: grayscale(0.4); opacity: 0.8; }
.lv-bossprize-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-good, linear-gradient(135deg, #34D399, #10B981));
}

.lv-item {
  width: var(--lv-item, 56px);
  height: var(--lv-item, 56px);
  display: grid;
  place-items: center;
  color: var(--lv-gold-2);
}
.lv-item > * { max-width: 100%; max-height: 100%; }
.lv-item svg { width: 100%; height: 100%; }
.lv-item > .lv-ic svg { width: auto; height: auto; }

/* ---------- Ojito del jugador ---------- */
.lv-me {
  position: absolute;
  width: 76px;
  translate: -50% -100%;
  z-index: 5;
  pointer-events: none;
  visibility: hidden;
}
.lv-me[data-placed] { visibility: visible; }
.lv-me-shadow {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 50px;
  height: 11px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
}
.lv-me-bob { position: relative; display: block; transform-origin: 50% 100%; animation: lv-idle 2.8s ease-in-out infinite; }
.lv-me-bob > * { display: block; width: 100%; }
.lv-me-bob svg { display: block; width: 100%; height: auto; }
.lv-me.is-walking .lv-me-bob { animation: none; }
.lv-me.is-left .lv-me-bob { scale: -1 1; }
.lv-me.is-happy .lv-me-bob { animation: lv-jump 600ms var(--ease-spring, ease) 3; }
.lv-me-tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  translate: -50% 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--lv-1), var(--lv-2));
  box-shadow: 0 4px 10px -4px var(--lv-glow);
  white-space: nowrap;
}
.lv-eye-wrap { display: block; }
.lv-eye { width: 100%; height: auto; overflow: visible; }
.lv-eye-white { fill: #fff; stroke: rgba(0, 0, 0, 0.18); stroke-width: 1.5; }
.lv-eye-iris { fill: var(--lv-1); }
.lv-eye-pupil { fill: #111; }
.lv-eye-glint { fill: #fff; }
.lv-eye-brow { fill: none; stroke: var(--ink, #fff); stroke-width: 3.5; stroke-linecap: round; }

/* ---------- Fin del camino ---------- */
.lv-end {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 8px;
  padding: 18px;
  border-radius: var(--radius-xl, 24px);
}
.lv-end > .lv-link { top: -22px; bottom: auto; height: 22px; }
.lv-end[data-done="false"] > .lv-link { display: none; }
.lv-end-ic {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #3A2400;
  background: linear-gradient(135deg, var(--lv-gold-1), var(--lv-gold-2));
  box-shadow: 0 10px 24px -8px rgba(255, 181, 71, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lv-end[data-done="false"] .lv-end-ic { filter: saturate(0.5); opacity: 0.85; }
.lv-end-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-end-title { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.lv-end-sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* ---------- Hojas (previa, cofre, desvío) ---------- */
.lv-sheet { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.lv-sheet-head { display: flex; align-items: center; gap: 14px; }
.lv-sheet-num {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: linear-gradient(135deg, var(--lv-1), var(--lv-2));
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 24px -8px var(--lv-glow);
}
.lv-sheet-boss .lv-sheet-num { border: 3px solid var(--lv-gold-1); }
.lv-sheet-boss .lv-sheet-num .lv-ic { color: var(--lv-gold-1); margin-bottom: 2px; }
.lv-detour-badge { background: linear-gradient(145deg, var(--lv-gold-1), var(--lv-gold-2) 50%, var(--lv-2)); border-radius: 50%; }
.lv-detour-sheet[data-state="passed"] .lv-detour-badge { background: var(--grad-good, linear-gradient(135deg, #34D399, #10B981)); }
.lv-sheet-titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.lv-sheet-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.lv-sheet-title { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.lv-sheet-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-top: 4px; }
.lv-sheet-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.lv-chip-done { margin-top: 2px; }

.lv-sheet-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lv-sheet-test { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.lv-sheet-test-x { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-weight: 900; font-size: 14px; background: color-mix(in srgb, var(--ink, #888) 10%, transparent); }
.lv-fam {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(135deg, var(--lv-f1, #7C5CFF), var(--lv-f2, #C155FF));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lv-sheet-test[data-family="punto"] { --lv-f1: #22D3EE; --lv-f2: #6366F1; }
.lv-sheet-test[data-family="linea"] { --lv-f1: #A78BFA; --lv-f2: #D946EF; }
.lv-sheet-test[data-family="angulo"] { --lv-f1: #FB7185; --lv-f2: #F97316; }
.lv-sheet-test[data-family="area"] { --lv-f1: #34D399; --lv-f2: #0891B2; }

.lv-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-sheet-box {
  padding: 12px;
  border-radius: 16px;
  background: var(--glass, var(--surface-2, var(--surface)));
  border: 1px solid var(--glass-border, var(--separator));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lv-sheet-box .lv-sheet-label { margin-top: 0; }
.lv-diff { display: flex; flex-direction: column; gap: 6px; }
.lv-diff-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.lv-diff-bar { width: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ink, #888) 16%, transparent); }
.lv-diff-bar:nth-child(1) { height: 30%; }
.lv-diff-bar:nth-child(2) { height: 45%; }
.lv-diff-bar:nth-child(3) { height: 62%; }
.lv-diff-bar:nth-child(4) { height: 80%; }
.lv-diff-bar:nth-child(5) { height: 100%; }
.lv-diff-bar[data-on] { background: linear-gradient(180deg, var(--lv-2), var(--lv-1)); }
.lv-diff-label { font-weight: 800; font-size: 15px; }
.lv-sheet-best { display: flex; flex-direction: column; }
.lv-sheet-best-num { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lv-sheet-best-sub { font-size: 13px; color: var(--ink-2); }

.lv-thresholds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lv-threshold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 14px;
  border: 1px solid var(--glass-border, var(--separator));
  background: color-mix(in srgb, var(--ink, #888) 5%, transparent);
}
.lv-threshold .lv-star { color: var(--lv-gold-2); }
.lv-threshold[data-on] {
  background: linear-gradient(135deg, rgba(255, 215, 106, 0.22), rgba(255, 181, 71, 0.12));
  border-color: rgba(255, 181, 71, 0.55);
}
.lv-threshold-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-sheet-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }

.lv-prize {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 181, 71, 0.4);
  background: linear-gradient(135deg, rgba(255, 215, 106, 0.14), rgba(255, 181, 71, 0.05));
}
.lv-prize > .lv-item, .lv-coin {
  flex: none;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg, #000) 40%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.35);
}
.lv-coin { width: 60px; height: 60px; display: grid; place-items: center; color: var(--lv-gold-1); }
.lv-prize-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lv-prize-txt .lv-sheet-label { margin-top: 0; }
.lv-prize-name { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }
.lv-rarity {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #888) 14%, transparent);
}
.lv-rarity[data-rarity="raro"] { background: linear-gradient(135deg, #38BDF8, #6366F1); color: #fff; }
.lv-rarity[data-rarity="epico"] { background: linear-gradient(135deg, #A855F7, #EC4899); color: #fff; }
.lv-rarity[data-rarity="legend"] { background: linear-gradient(135deg, var(--lv-gold-1), var(--lv-gold-2)); color: #3A2400; }

.lv-chest-hero { display: grid; place-items: center; padding: 8px 0 0; }
.lv-chest-hero .lv-ch-svg { width: 112px; height: 105px; }
.lv-chest-state { text-align: center; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.lv-chest-state[data-state="ready"] { color: var(--lv-gold-2); }
.lv-chest-sheet .lv-sheet-desc { text-align: center; }
.lv-gold-progress { display: flex; align-items: center; gap: 10px; }
.lv-gold-progress .lv-hbar { flex: 1; }
.lv-gold-num { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; }
.lv-gold-num .lv-ic { color: var(--lv-gold-2); }

.lv-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--lv-1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--lv-1) 35%, transparent);
}
.lv-rule > .lv-ic { color: var(--lv-1); }
.lv-rule .lv-sheet-label { margin-top: 0; }
.lv-rule-txt { font-size: 16px; font-weight: 800; }
.lv-locked-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink, #888) 8%, transparent);
}

/* ---------- Animaciones ---------- */
@keyframes lv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lv-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes lv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lv-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lv-pop { from { scale: 0.3; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes lv-ring {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes lv-star-pop { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes lv-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes lv-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(calc(var(--drift, 12px) * 0.6), calc(var(--drift, 12px) * -1), 0) rotate(12deg); }
}
@keyframes lv-twinkle { from { opacity: 0.35; transform: scale(0.75); } to { opacity: 1; transform: scale(1.1); } }
@keyframes lv-drift { from { transform: translate(-8%, -6%); } to { transform: translate(8%, 6%); } }
@keyframes lv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lv-idle { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.02); } }
@keyframes lv-jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-16px) scale(0.96, 1.05); } 60% { transform: translateY(0) scale(1.06, 0.94); } }
@keyframes lv-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } }
@keyframes lv-crown { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2px); } }
@keyframes lv-glow { from { opacity: 0.2; } to { opacity: 0.55; } }
@keyframes lv-lid { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: translateY(-3px) rotate(-5deg); } 92% { transform: rotate(0); } }

/* ---------- Escritorio ---------- */
@media (min-width: 768px) {
  .lv-col { max-width: 620px; }
  .lv-node { --size: 70px; }
  .lv-node[data-state="open"] { --size: 86px; }
  .lv-node[data-kind="boss"] { --size: 98px; }
  .lv-end { padding: 22px; }
}

/* Táctil (móviles): el brillo que corre por la vía (stroke-dashoffset) obliga a repintar el SVG del mundo
   actual, raíles con drop-shadow incluidos, en cada frame. En móvil queda quieto (solo su fundido de entrada). */
@media (pointer: coarse) {
  .lv-world[data-current="true"] .lv-core { animation: none; }
  .lv-world[data-current="true"] .lv-draw .lv-core { animation: lv-fade 500ms ease calc(var(--delay, 0ms) + var(--dur, 1100ms)) both; }
}

/* Mundos lejos de la pantalla: los bucles infinitos quietos (sin repintar vía, cofres, islas ni Ojito).
   Las entradas (pop, dibujo de la vía, barra) no se pausan: si no, se quedarían invisibles. */
.lv-world:not([data-live]) :is(.lv-core, .lv-node-ring, .lv-crown, .lv-ch-svg, .lv-ch-spark, .lv-ch-glow, .lv-ch-lid,
  .lv-isle-float, .lv-isle-halo, .lv-isle-new, .lv-bossprize > .lv-item, .lv-me-bob) { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .lv-amb-glow, .lv-amb-set, .lv-deco-svg, .lv-node, .lv-chest, .lv-isle, .lv-isle-float, .lv-isle-new,
  .lv-bossprize, .lv-bossprize > .lv-item, .lv-crown, .lv-star, .lv-me-bob, .lv-hbar-fill, .lv-core, .lv-ch-svg, .lv-ch-spark,
  .lv-ch-glow, .lv-ch-lid, .lv-node-ring, .lv-isle-halo, .lv-shake, .lv-draw .lv-rail, .lv-draw .lv-sleepers, .lv-draw .lv-bed {
    animation: none !important;
  }
  .lv-draw .lv-rail { stroke-dashoffset: 0; }
  .lv-node-disc, .lv-ch-lid { transition: none !important; }
  .lv-screen { transition: none; }
}