/* ============================================================
   juego.css — las piezas del juego

   Desafíos, jefes, el mapa, la arena del relámpago, el formulario, la
   pantalla de logros y la música en vivo. La regla de la casa sigue
   valiendo: el adorno en los bordes, la lectura limpia. Lo que se gana
   va en ORO; lo nuestro, en LILA; lo que falla, en rosa.
   ============================================================ */

/* ------------------------------------------------------------ desafíos */

.ds {
  position: relative;
  border: var(--filete-ancho) solid color-mix(in srgb, var(--lila) 55%, transparent);
  background: linear-gradient(180deg, var(--lila-velo), transparent 70%);
  padding: .85rem 1.05rem 1rem;
}
.ds::before {
  content: '';
  position: absolute; left: -1px; top: -1px; width: 16px; height: 16px;
  border-top: 2px solid var(--lila); border-left: 2px solid var(--lila);
}
.ds-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.ds-etq { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lila); }
.ds-xp { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.ds-tilde { width: 1.1em; height: 1.1em; }
.ds-md { margin-bottom: .7rem; }
.ds-md p + p { margin-top: .4rem; }

.ds-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .45rem; }
.ds-ops-vf { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.ds-op {
  display: flex; align-items: center; gap: .65rem;
  font: inherit; text-align: left; color: var(--crema);
  background: var(--noche-2);
  border: var(--filete-ancho) solid var(--filete);
  padding: .5rem .75rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.ds-op:hover:not(:disabled) { border-color: var(--lila); background: var(--lila-velo); transform: translateY(-1px); }
.ds-op:disabled { cursor: default; }
.ds-op-letra {
  flex: none; width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: .78rem;
  border: 1px solid var(--filete); color: var(--crema-2);
}
.ds-op-txt { min-width: 0; }
.ds-vf { justify-content: center; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; }
.ds-op.es-mala { border-color: var(--alerta); background: var(--alerta-velo); color: var(--crema-2); opacity: .75; }
.ds-op.es-mala .ds-op-letra { border-color: var(--alerta); color: var(--alerta); }
.ds-op.es-correcta { border-color: var(--oro); background: var(--oro-velo); opacity: 1; }
.ds-op.es-correcta .ds-op-letra { background: var(--oro); border-color: var(--oro); color: var(--sobre-acento); }

.ds-num { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.ds-num-etq { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--crema-2); }
.ds-input, .ds-celda {
  font: inherit; font-family: var(--f-mono); font-size: .98rem;
  color: var(--crema); background: var(--hoja);
  border: var(--filete-ancho) solid var(--filete);
  padding: .42rem .6rem;
  min-width: 0;
}
.ds-input { width: 13rem; max-width: 100%; }
.ds-input:focus, .ds-celda:focus { outline: none; border-color: var(--lila); box-shadow: 0 0 0 3px var(--lila-velo); }
.ds-input:disabled, .ds-celda:disabled { color: var(--oro); border-color: color-mix(in srgb, var(--oro) 45%, transparent); }
.ds-unidad { color: var(--crema-2); }
.ds-lee { font-family: var(--f-mono); font-size: .86rem; color: var(--crema-3); }

.ds-mat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.2rem; }
.ds-tabla { border-collapse: separate; border-spacing: 4px; }
.ds-tabla th { font-family: var(--f-mono); font-weight: 400; font-size: .82rem; color: var(--crema-2); padding: 0 .2rem; }
.ds-celda { width: 4.6rem; text-align: center; padding: .38rem .2rem; }
.ds-celda.mala { border-color: var(--alerta); background: var(--alerta-velo); }
.ds-celda.buena { border-color: color-mix(in srgb, var(--oro) 55%, transparent); }
.ds-suma { font-family: var(--f-mono); font-size: .82rem; color: var(--alerta); padding-left: .4rem; white-space: nowrap; }
.ds-suma[data-cero] { color: var(--acento); }
.ds-suma-cab { color: var(--crema-3) !important; }

.ds-fb { margin-top: .55rem; min-height: 0; font-size: .97rem; }
.ds-fb:empty { display: none; }
.fb-bien { color: var(--oro); font-family: var(--f-mono); letter-spacing: .06em; }
.fb-mal { color: var(--alerta); }
.fb-visto { color: var(--crema-3); }
.ds-acciones { display: flex; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.ds-acciones:empty { display: none; }
.ds-pista, .ds-ver {
  font: inherit; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--crema-2); background: none; border: 1px dashed var(--filete); padding: .3rem .6rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.ds-pista:hover, .ds-ver:hover { color: var(--lila); border-color: var(--lila); }
.ds-pista-txt { margin-top: .5rem; padding: .5rem .75rem; border-left: 2px solid var(--lila); background: var(--lila-velo); font-size: .97rem; }
.ds-porque { margin-top: .7rem; padding: .6rem .8rem .65rem; border-left: 2px solid var(--oro); background: var(--oro-velo); font-size: .98rem; }
.ds-porque-etq { display: block; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin-bottom: .15rem; }

.ds.ds-ok { border-color: color-mix(in srgb, var(--oro) 55%, transparent); background: linear-gradient(180deg, var(--oro-velo), transparent 70%); }
.ds.ds-ok::before { border-color: var(--oro); }
.ds.ds-ok .ds-etq { color: var(--oro); }
.ds.ds-visto { border-style: dashed; }
.ds.sacudir { animation: sacudir .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes sacudir {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); }
}

/* ------------------------------------------------------------ jefes */

.jf-grilla { display: grid; gap: .8rem; }
.jf-tarjeta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  color: var(--crema);
  background: var(--noche-2);
  border: var(--filete-ancho) solid color-mix(in srgb, var(--alerta) 45%, transparent);
  transition: border-color .2s, transform .2s, background .2s;
}
.jf-tarjeta:hover { color: var(--crema); border-color: var(--alerta); transform: translateY(-2px); background: color-mix(in srgb, var(--alerta) 6%, var(--noche-2)); }
.jf-tarjeta.vencido { border-color: color-mix(in srgb, var(--oro) 55%, transparent); }
.jf-tarjeta.vencido:hover { border-color: var(--oro); background: var(--oro-velo); }
.jf-tarjeta-ico { width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; color: var(--alerta); border: 1.5px solid currentColor; transform: rotate(45deg); }
.jf-tarjeta-ico .ico { transform: rotate(-45deg); width: 1.35rem; height: 1.35rem; }
.jf-tarjeta.vencido .jf-tarjeta-ico { color: var(--oro); }
.jf-tarjeta-txt { display: flex; flex-direction: column; min-width: 0; }
.jf-tarjeta-etq { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--alerta); }
.jf-tarjeta.vencido .jf-tarjeta-etq { color: var(--oro); }
.jf-tarjeta-nom { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.2; }
.jf-tarjeta-res { color: var(--crema-2); font-size: .95rem; line-height: 1.35; }
.jf-tarjeta-vida { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 4.5rem; }
.jf-vida-barra { display: block; width: 4.5rem; height: 6px; background: var(--filete); position: relative; overflow: hidden; }
.jf-vida-barra i { position: absolute; inset: 0; background: var(--alerta); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.jf-vida-num { font-family: var(--f-mono); font-size: .8rem; color: var(--crema-2); }
.jf-tarjeta.vencido .jf-vida-num { color: var(--oro); }

.jefe { max-width: 46rem; margin: 0 auto; }
.jf-cab { margin: 1rem 0 2rem; }
.jf-cab-fila { display: flex; align-items: center; gap: 1.3rem; margin: .6rem 0 1rem; }
.jf-retrato {
  flex: none; width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  color: var(--alerta);
  border: 2px solid currentColor; transform: rotate(45deg);
  box-shadow: 0 0 32px -6px color-mix(in srgb, var(--alerta) 60%, transparent), inset 0 0 0 6px var(--alerta-velo);
}
.jf-retrato .ico { transform: rotate(-45deg); width: 2.4rem; height: 2.4rem; }
.jefe.vencido .jf-retrato { color: var(--oro); box-shadow: 0 0 32px -6px color-mix(in srgb, var(--oro) 60%, transparent), inset 0 0 0 6px var(--oro-velo); }
.jf-cab-txt { min-width: 0; }
.jf-titulo { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.jf-vida { display: flex; align-items: center; gap: .8rem; }
.jf-vida-etq { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--alerta); }
.jf-vida-barra.grande { flex: 1; width: auto; height: 12px; border: 1px solid color-mix(in srgb, var(--alerta) 45%, transparent); background: var(--noche-2); }
.jf-vida .jf-vida-num { min-width: 2.6rem; text-align: right; }
.jefe.vencido .jf-vida-etq { color: var(--oro); }
.jf-derrota { margin-top: .8rem; color: var(--oro); font-family: var(--f-mono); letter-spacing: .08em; display: flex; align-items: center; gap: .5rem; }
.jefe.golpe .jf-retrato { animation: golpe .45s ease-out; }
.jefe.golpe .jf-vida-barra.grande { animation: golpeBarra .45s ease-out; }
.jefe.cayendo .jf-retrato { animation: cae 1.1s cubic-bezier(.2, .7, .2, 1); }
@keyframes golpe {
  0% { transform: rotate(45deg) scale(1); filter: brightness(1); }
  25% { transform: rotate(52deg) scale(.88) translateX(6px); filter: brightness(2.2); }
  60% { transform: rotate(40deg) scale(1.04); }
  100% { transform: rotate(45deg) scale(1); filter: none; }
}
@keyframes golpeBarra { 30% { transform: translateX(-4px); box-shadow: 0 0 18px color-mix(in srgb, var(--alerta) 70%, transparent); } }
@keyframes cae {
  0% { transform: rotate(45deg) scale(1); }
  40% { transform: rotate(225deg) scale(1.25); filter: brightness(2); }
  100% { transform: rotate(405deg) scale(1); }
}

.jf-enunciado { padding: 1rem 1.2rem; background: var(--noche-2); border: 1px solid var(--filete); }
.jf-enunciado-etq { display: block; color: var(--crema-2); margin-bottom: .4rem; }
.jf-enunciado-md p + p { margin-top: .55rem; }
.jf-estrategia { margin: 1rem 0 1.4rem; border-left: 2px solid var(--lila); background: var(--lila-velo); padding: .5rem .9rem; }
.jf-estrategia summary { cursor: pointer; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lila); display: flex; align-items: center; gap: .4rem; list-style: none; }
.jf-estrategia summary::-webkit-details-marker { display: none; }
.jf-estrategia-md { margin-top: .4rem; }
.jf-fases { display: grid; gap: .9rem; }
.jf-solucion { margin-top: 2.2rem; display: grid; gap: .9rem; }
.jf-desarrollo, .jf-compacto { border: 1px solid var(--filete); background: var(--hoja); padding: .55rem 1rem .7rem; }
.jf-desarrollo summary, .jf-compacto summary { cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; list-style: none; padding: .2rem 0; }
.jf-desarrollo summary::-webkit-details-marker, .jf-compacto summary::-webkit-details-marker { display: none; }
.jf-sol-tit { font-family: var(--f-display); font-size: 1.25rem; }
.jf-spoiler { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--crema-3); }
.jefe.vencido .jf-spoiler { color: var(--oro); }
.jf-compacto-md { margin-top: .5rem; font-size: .98rem; }
.jf-compacto-md ul { padding-left: 1.2rem; }
.jf-trampas { padding: .8rem 1rem; border-left: 2px solid var(--alerta); background: var(--alerta-velo); }
.jf-trampas .etq { color: var(--alerta); }
.jf-trampas ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.jf-trampas li + li { margin-top: .3rem; }

/* ------------------------------------------------------------ el mapa */

.mapa-pagina .cab-pagina { margin-bottom: 1.6rem; }
.mp-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; max-width: 52rem; margin: 0 auto 1.4rem; }
.mp-dato { display: flex; flex-direction: column; align-items: center; padding: .7rem .5rem; border: 1px solid var(--filete); background: var(--noche-2); }
.mp-dato-n { font-family: var(--f-mono); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--oro); }
.mp-dato-n small { font-size: .55em; color: var(--crema-3); font-weight: 400; }
.mp-dato-t { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--crema-2); text-align: center; }
.mp-control { border-color: color-mix(in srgb, var(--oro) 50%, transparent); }

.mapa-wrap { display: flex; justify-content: center; overflow: hidden; padding: .4rem 0; }
.mapa-svg { width: 100%; height: auto; display: block; overflow: visible; max-width: 960px; }
.mapa-arista { fill: none; stroke: var(--crema-3); stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .7; }
.mapa-punta { fill: none; stroke: var(--crema-3); stroke-width: 1.3; opacity: .8; }
.mapa-nodo { cursor: pointer; }
.mapa-nodo:focus { outline: none; }
.mapa-forma { fill: var(--hoja); stroke: var(--acento); stroke-width: 2; transition: fill .2s, stroke-width .2s; }
.mapa-forma2 { fill: none; stroke: var(--acento); stroke-width: 1; opacity: .6; }
.tipo-jefe .mapa-forma { stroke: var(--alerta); }
.tipo-arena .mapa-forma, .tipo-arena .mapa-forma2 { stroke: var(--lila); }
.mapa-nodo.secreto .mapa-forma { stroke-dasharray: 4 3; }
.mapa-nodo:hover .mapa-forma, .mapa-nodo:focus-visible .mapa-forma { fill: var(--noche-3); stroke-width: 3; }
.mapa-num { font-family: var(--f-mono); font-weight: 700; font-size: 25px; fill: var(--acento); }
.mapa-ico { fill: none; stroke: var(--alerta); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mapa-ico.lleno { fill: var(--lila); stroke: none; }
.mapa-nom { font-family: var(--f-texto); font-size: 13.5px; fill: var(--crema); }
.mapa-sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--crema-3); }
.mapa-c3 { font-family: var(--f-mono); font-size: 10px; font-weight: 700; fill: var(--oro); }
.mapa-est { fill: var(--filete); }
.mapa-est.on { fill: var(--oro); }
.mapa-avance { fill: none; stroke: var(--oro); stroke-width: 2.5; stroke-linecap: round; }
.mapa-nodo.hecho .mapa-forma { fill: color-mix(in srgb, var(--acento) 22%, var(--hoja)); }
.mapa-nodo.hecho.tipo-jefe .mapa-forma { fill: color-mix(in srgb, var(--oro) 22%, var(--hoja)); stroke: var(--oro); }
.mapa-nodo.hecho.tipo-jefe .mapa-ico { stroke: var(--oro); }
.mapa-nodo.hecho .mapa-sub { fill: var(--oro); }
.mapa-latido { fill: none; stroke: var(--oro); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: latido 1.8s ease-out infinite; }
@keyframes latido { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.45); } }
.mapa-ficha { transition: transform .42s cubic-bezier(.5, -0.3, .4, 1.4); }
.mapa-ficha-c { fill: var(--hielo); }
.mapa-ficha-halo { fill: var(--hielo); opacity: .25; animation: respirarF 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes respirarF { 50% { opacity: .55; transform: scale(1.3); } }
.mapa-ley { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.4rem; margin-top: 1.2rem; color: var(--crema-2); font-size: .92rem; }
.ley { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: .3rem; border: 2px solid var(--acento); border-radius: 50%; }
.ley-jefe { border-color: var(--alerta); border-radius: 0; transform: rotate(45deg) scale(.85); }
.ley-hecho { background: color-mix(in srgb, var(--acento) 35%, transparent); }
.ley-c3 { font-family: var(--f-mono); font-size: .78rem; color: var(--oro); }

/* ------------------------------------------------------------ la música en vivo */

.musica .mu-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 1.4rem; align-items: center; }
.mu-svg { width: 100%; height: auto; display: block; }
.mu-red { stroke: var(--filete); stroke-width: 1; }
.mu-flecha { fill: none; stroke: var(--oro); stroke-linecap: round; opacity: .85; }
.mu-punta { stroke-width: 1.6 !important; }
.mu-r { font-family: var(--f-mono); font-size: 10.5px; fill: var(--oro); }
.mu-c { fill: var(--hoja); stroke: var(--lila); stroke-width: 1.4; transition: fill .4s; }
.mu-t { font-family: var(--f-mono); font-size: 11px; fill: var(--crema-2); }
.mu-nodo.on .mu-c { fill: color-mix(in srgb, var(--lila) 30%, var(--hoja)); stroke: var(--crema); stroke-width: 2.4; }
.mu-nodo.on .mu-t { fill: var(--crema); font-weight: 700; }
.mu-halo { fill: none; stroke: var(--lila); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: latido 2.4s ease-out infinite; }
.mu-lect { margin: 0; display: grid; gap: .45rem; }
.mu-lect div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--filete-2); padding-bottom: .25rem; }
.mu-lect dt { color: var(--crema-2); font-size: .92rem; }
.mu-lect dd { margin: 0; font-family: var(--f-mono); color: var(--crema); text-align: right; }
.mu-nota { margin-top: .7rem; font-size: .92rem; color: var(--lila); }
.mu-historia { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .7rem; font-family: var(--f-mono); font-size: .8rem; }
.mu-historia-etq { color: var(--crema-3); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin-right: .4rem; }
.mu-chip { padding: .05rem .4rem; border: 1px solid var(--filete); color: var(--crema-2); }
.mu-chip.on { border-color: var(--lila); color: var(--crema); background: var(--lila-velo); }
.mu-sep { color: var(--crema-3); }

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

.f-botones { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.f-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: .8rem; }
.f-caja { background: var(--noche-2); border: 1px solid var(--filete); padding: .8rem 1rem .9rem; position: relative; transition: border-color .2s; }
.f-caja.hot { border-color: var(--linea); }
.f-caja-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin-bottom: .45rem; }
.f-rot { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.f-nom { font-size: 1.04rem; }
.f-ir { margin-left: auto; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: var(--crema-3); }
.f-ir:hover { color: var(--acento); }
.formulario .ficha-fila { font-size: .97rem; }
.formulario.tapado .f-caja:not(.destapada) .ficha-fila:not(:first-child) dd { filter: blur(7px); user-select: none; cursor: pointer; }
.formulario.tapado .f-caja:not(.destapada) { cursor: pointer; border-style: dashed; }
.formulario.solo-hot .f-caja:not(.hot) { display: none; }
.f-sipiden td:first-child { width: 46%; }

/* ------------------------------------------------------------ relámpago */

.rl-tablero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 2rem; margin: 0 auto 1.6rem; min-height: 3.4rem; position: sticky; top: calc(var(--cab-alto) + 6px); z-index: 5; background: color-mix(in srgb, var(--noche) 92%, transparent); padding: .5rem; }
.rl-reloj { font-family: var(--f-mono); font-weight: 700; font-size: 1.7rem; color: var(--acento); display: inline-flex; align-items: center; gap: .5rem; }
.rl-reloj.urgente { color: var(--alerta); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: .55; } }
.rl-marcador { color: var(--crema-2); font-family: var(--f-mono); font-size: .86rem; }
.rl-marcador b { color: var(--crema); }
.rl-final { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.rl-final-n { font-family: var(--f-display); font-size: 2.6rem; color: var(--oro); }
.rl-final-t { color: var(--crema-2); }
.rl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.rl-q { border: 1px solid var(--filete); background: var(--noche-2); padding: .75rem 1rem; }
.rl-q-cab { display: flex; gap: .8rem; align-items: baseline; }
.rl-n { font-family: var(--f-mono); color: var(--lila); font-size: .85rem; }
.rl-bs { display: flex; gap: .5rem; margin-top: .55rem; padding-left: 2.1rem; }
.rl-b { font: inherit; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--crema); background: var(--hoja); border: var(--filete-ancho) solid var(--filete); padding: .4rem .9rem; cursor: pointer; }
.rl-b:hover:not(:disabled) { border-color: var(--lila); }
.rl-b.es-correcta { border-color: var(--oro); background: var(--oro-velo); color: var(--oro); }
.rl-b.es-mala { border-color: var(--alerta); color: var(--alerta); }
.rl-b:disabled { cursor: default; }
.rl-q.bien { border-color: color-mix(in srgb, var(--oro) 45%, transparent); }
.rl-q.mal { border-color: color-mix(in srgb, var(--alerta) 45%, transparent); }
.rl-porque { margin: .55rem 0 0 2.1rem; font-size: .95rem; color: var(--crema-2); }

/* ------------------------------------------------------------ logros */

.lg-rango { text-align: center; padding: 1.2rem 1rem 1.4rem; border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); background: var(--oro-velo); display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.lg-rango-nom { font-family: var(--f-display); font-size: 2.2rem; color: var(--oro); line-height: 1.05; }
.lg-rango-xp { color: var(--crema-2); font-family: var(--f-mono); font-size: .85rem; }
.lg-escalera { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; font-size: .86rem; color: var(--crema-3); }
.lg-escalera li span { font-family: var(--f-mono); font-size: .74rem; }
.lg-escalera li.on { color: var(--oro); }
.lg-lista { list-style: none; margin: 0; padding: 0; }
.lg-lista a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .5rem .2rem; border-bottom: 1px solid var(--filete-2); color: var(--crema); }
.lg-lista a:hover { background: var(--acento-velo); }
.lg-n { font-family: var(--f-mono); font-weight: 700; color: var(--acento); text-align: center; }
.lg-c { font-family: var(--f-mono); font-size: .8rem; color: var(--crema-2); }
.lg-f { font-size: .86rem; color: var(--crema-3); }
.lg-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .7rem; }
.lg-logro { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .7rem; padding: .7rem .9rem; border: 1px dashed var(--filete); color: var(--crema-3); }
.lg-logro-ico { grid-row: 1 / 3; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.lg-logro-ico .ico { width: 1.5rem; height: 1.5rem; }
.lg-logro-tit { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.lg-logro-como { font-size: .9rem; line-height: 1.35; }
.lg-logro.on { border-style: solid; border-color: var(--oro); background: var(--oro-velo); color: var(--crema-2); }
.lg-logro.on .lg-logro-ico, .lg-logro.on .lg-logro-tit { color: var(--oro); }
.lg-partida { margin-top: 2.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.pg-reiniciar.armado { border-color: var(--alerta); color: var(--alerta); }
.pg-reiniciar.armado:hover { background: var(--alerta); color: var(--sobre-acento); }

@media (max-width: 640px) {
  .mp-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .musica .mu-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .jf-tarjeta { grid-template-columns: auto minmax(0, 1fr); }
  .jf-tarjeta-vida { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
  .jf-retrato { width: 64px; height: 64px; }
  .jf-retrato .ico { width: 1.8rem; height: 1.8rem; }
  .ds-celda { width: 3.7rem; font-size: .9rem; }
  .ds-tabla { border-spacing: 3px; }
  .lg-lista a { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .lg-f { display: none; }
  .rl-bs, .rl-porque { padding-left: 0; margin-left: 0; }
}

/* Los ítems de grilla crecen con su contenido (min-width: auto): una matriz
   en display ensancharía la página en el teléfono. */
.jf-solucion > *, .jf-fases > *, .jf-grilla > *, .rl-lista > *, .f-cajas > *, .lg-logros > * { min-width: 0; }