/*
 * ONIKIX PLAY · ayuda contextual v1
 * Fuente canónica para los cartuchos 01–09.
 */

.brand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.brand .brand-actions .sound-btn { margin-left: 0; }

.help-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(31, 27, 22, .055);
  cursor: pointer;
  transition: transform 160ms var(--ease-out-quint), border-color 160ms var(--ease-out-quint), background 160ms var(--ease-out-quint);
}

.help-btn svg { display: block; }
.help-btn:active { transform: scale(.985); }

.home-screen .help-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-color: var(--cover-accent-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  color: var(--cover-accent);
  box-shadow: 0 8px 22px rgba(31, 27, 22, .06);
}

.home-help-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  /* 44px: es el unico acceso a las reglas del juego. Control, no rotulo. */
  min-height: 44px;
  margin: 0 auto;
  padding: 8px 17px;
  border: 1px solid var(--cover-accent-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--cover-accent);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .035em;
  cursor: pointer;
  transition: transform 160ms var(--ease-out-quint), background 160ms var(--ease-out-quint), border-color 160ms var(--ease-out-quint);
}

.home-help-link svg { flex: none; }
.home-help-link:active { transform: scale(.985); }
.home-help-link + .cover-choice,
.home-help-link + .variant-section { margin-top: var(--cover-action-gap); }
.home-help-link + .guide-setting { margin-top: var(--cover-action-gap); }
.home-help-link + .home-primary { margin-top: var(--cover-action-gap); }
/* Faltaba el caso «Ver instrucciones» seguido del bloque «Cómo jugar»: sin
   esta regla el título se pegaba al botón. El valor es el mismo que Encaja la
   Pieza ya tenía en su propio CSS (encaja.css), que es la portada de
   referencia — así los dos quedan idénticos, sin cambiarle nada al 12. */
.home-help-link + .how-to { margin-top: clamp(14px, 2.6svh, 24px); }

.game-help-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(31, 27, 22, .48);
  animation: onikixHelpFade 190ms ease-out both;
}

.game-help-modal[hidden] { display: none; }

.game-help-card {
  width: min(360px, 100%);
  max-height: calc(100svh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--help-accent, var(--cover-accent, var(--ink))) 16%, var(--line));
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(31, 27, 22, .24);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  animation: onikixHelpCardIn 240ms var(--ease-out-quint) both;
}

.game-help-title {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 27px;
  font-style: italic;
  font-weight: 620;
  line-height: 1.05;
  text-align: center;
}

.game-help-body {
  display: grid;
  gap: 11px;
}

.game-help-block {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
}

.game-help-block--accent {
  border-color: color-mix(in srgb, var(--help-accent, var(--cover-accent, var(--ink))) 25%, var(--line));
  background: var(--help-soft, var(--cover-accent-soft, var(--canvas)));
}

.game-help-block h3 {
  margin: 0 0 5px;
  color: var(--help-accent, var(--cover-accent, var(--ink)));
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.game-help-block p,
.game-help-block li {
  color: var(--soft-ink);
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42;
}

.game-help-block p { margin: 0; }
.game-help-block p + p { margin-top: 6px; }
.game-help-block ul { display: grid; gap: 4px; margin: 7px 0 0; padding-left: 18px; }
.game-help-block strong { color: var(--ink); font-weight: 750; }

.game-help-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.game-help-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--card);
  color: var(--soft-ink);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;
}

.game-help-close,
.game-help-action {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--help-accent, var(--cover-accent, var(--ink)));
  color: var(--card);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.game-help-action {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--help-accent, var(--cover-accent, var(--ink))) 30%, var(--line));
  background: var(--card);
  color: var(--help-accent, var(--cover-accent, var(--ink)));
}

@keyframes onikixHelpFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes onikixHelpCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .help-btn:hover,
  .home-help-link:hover { border-color: var(--help-accent, var(--cover-accent, var(--ink))); background: var(--help-soft, var(--cover-accent-soft, var(--card))); }
}

@media (max-height: 700px) {
  .home-screen .help-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 14px; }
  /* 44px y no ceden: la regla canonica dice que primero cede el aire, luego los
     rotulos, y solo entonces el cuerpo de las etiquetas. Los controles NUNCA.
     Los 6px salen de --cover-action-gap, que es aire puro. */
  .home-help-link { min-height: 44px; padding-block: 6px; }
  .game-help-modal { padding: 12px; }
  .game-help-card { max-height: calc(100svh - 24px); padding: 19px 16px 16px; border-radius: 20px; }
  .game-help-title { margin-bottom: 11px; font-size: 24px; }
  .game-help-body { gap: 8px; }
  .game-help-block { padding: 9px 11px; }
  .game-help-block p,
  .game-help-block li { font-size: 12.5px; }
}

@media (max-width: 360px) {
  .brand-actions { gap: 6px; }
  .game-help-modal { padding-inline: 10px; }
  .game-help-card { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-help-modal,
  .game-help-card { animation: none; }
  .help-btn,
  .home-help-link { transition-duration: 1ms; }
}