/* ==========================================================================
   "Descargar y jugar" (/jugar). Se carga despues de estilo.css (bloque "cabeza" de jugar.html).
   Solo usa las variables de estilo.css (seccion 1, Tokens): sigue los dos temas sin repetir colores.
   Sin JavaScript (CSP estricta): los problemas comunes van en <details>.
   ========================================================================== */

.jugar { max-width: 860px; margin-inline: auto; }
.jugar__cab { margin-bottom: var(--e7); }
.jugar__cab h1 { margin-bottom: .3em; }

/* Los 5 pasos: las tarjetas numeradas de la portada (.pasos/.paso de estilo.css), en una sola columna */
.pasos.pasos--lista { grid-template-columns: minmax(0, 1fr); gap: calc(var(--e6) + 10px); }
.pasos--lista .paso > h2 { font-size: 1.3rem; margin-bottom: .55em; }
.jugar-lista { margin: 0 0 .9em; padding-left: 1.25em; color: var(--tinta-suave); line-height: 1.55; }
.jugar-lista:last-child { margin-bottom: 0; }
.jugar-lista li + li { margin-top: .45em; }
.jugar-lista li::marker { color: var(--oro); font-weight: 700; }
.jugar-lista strong, .paso p strong { color: var(--tinta); }

/* Boton de descarga y sus datos */
.jugar-descarga {
  display: grid; gap: var(--e3); justify-items: start;
  margin: 0 0 var(--e4); padding: var(--e4);
  background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-chico);
}
.jugar-descarga .boton { max-width: 100%; white-space: normal; }
.jugar-descarga .boton .icono { transform: rotate(90deg); }        /* la flecha del sprite apunta a la derecha */
.jugar-descarga__solo { margin: 0; font-size: .88rem; font-weight: 700; color: var(--tinta-suave); }
.jugar-descarga__datos { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--tinta-suave); }
@media (max-width: 559px) { .jugar-descarga .boton { width: 100%; padding-inline: 1em; } }

/* Teclas */
.jugar kbd {
  font: 700 .85em var(--mono); padding: .05em .45em; white-space: nowrap;
  color: var(--tinta); background: var(--campo); border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 6px;
}

/* Secciones despues de los pasos */
.jugar-seccion { margin-top: var(--e7); }
.jugar-seccion > h2 { margin-bottom: var(--e4); }
.jugar .aviso p { margin: 0; flex: 1; min-width: 0; }
.jugar-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.jugar-datos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: var(--e3) var(--e4); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  color: var(--tinta-suave); line-height: 1.5;
}
.jugar-datos .icono { width: 24px; height: 24px; color: var(--oro); }
.jugar-datos strong { color: var(--tinta); }

/* Problemas comunes */
.jugar-problema { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.jugar-problema + .jugar-problema { margin-top: var(--e3); }
.jugar-problema > summary {
  display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: var(--e2) var(--e4);
  cursor: pointer; list-style: none; font-weight: 700; color: var(--tinta); border-radius: var(--radio-chico);
}
.jugar-problema > summary::-webkit-details-marker { display: none; }
.jugar-problema > summary::before {
  content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 1.05rem/1 var(--sans); color: var(--oro-brillo); border: 1.5px solid var(--oro);
}
.jugar-problema[open] > summary::before { content: "−"; }
.jugar-problema > summary:hover { background: var(--oro-suave); }
.jugar-problema > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.jugar-problema[open] > summary { border-bottom: 1px solid var(--borde-suave); border-radius: var(--radio-chico) var(--radio-chico) 0 0; }
.jugar-problema > :not(summary) { margin-inline: var(--e4); color: var(--tinta-suave); }
.jugar-problema > summary + * { margin-top: var(--e4); }
.jugar-problema > :last-child { margin-bottom: var(--e4); }

/* Huella SHA-256 y comando para comprobarla */
.jugar-huella code { display: block; padding: var(--e3) var(--e4); font-size: .95rem; letter-spacing: .03em; word-break: break-all; user-select: all; }
.jugar-comando {
  margin: 0 0 1em; padding: var(--e3) var(--e4); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-chico); color: var(--tinta);
}
.jugar-comando code { user-select: all; }

@media (forced-colors: active) {
  .jugar-problema > summary::before { border-color: CanvasText; }
}