/*
 * ONIKIX PLAY UI SYSTEM v3
 * Fuente canónica. No enlazar directamente desde los cartuchos.
 * Ejecutar scripts/sync-ui-system.sh para copiar este archivo dentro de cada juego.
 */

:root {
  --mute: #6B6258;
  --mute-decor: #8A8175;
  --control-radius: 14px;
  --panel-radius: 20px;
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --focus-ring: 0 0 0 3px var(--canvas), 0 0 0 6px var(--ink);
}

[hidden] { display: none !important; }

/* Enlaces (solo existen en contexto web: marca de portada y salida del modal;
   los pinta el bridge sobre [data-play-hub]). Peso visual del sistema, no del UA. */
a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button:focus-visible,
a[href]:focus-visible,
[tabindex]:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.screen.is-active {
  animation: onikixScreenFade 220ms var(--ease-out-quint) both;
}

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

.sound-btn,
.hud-back {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.sound-btn:active,
.hud-back:active { transform: scale(.985); }
.sound-btn.is-muted { color: var(--mute); }
.stat small { font-size: max(10px, .625rem); color: var(--mute); }

/* ── HUD de partida: cabe entero en cualquier móvil (26/07/2026) ──
   El HUD crece con los marcadores de cada juego y con los dos controles
   de la derecha, y en pantalla estrecha se desbordaba: medido en
   producción, 388px de contenido en 375 de ancho (Memoria), 387
   (Gemas) y 376 (Rompecabezas). El botón de sonido quedaba fuera de la
   pantalla y el de ayuda a medias.

   Orden de cesión: primero el aire, después el rótulo del nivel, luego
   el ancho de los marcadores y, solo si hace falta, el cuerpo de sus
   etiquetas. Los tres controles (volver, ayuda, sonido) NO ceden nunca:
   son justamente los que no pueden quedar fuera, y mantienen sus 44px
   de área táctil.

   Vive aquí y no en cada juego porque este archivo carga DESPUÉS del
   CSS del cartucho: así ninguno se queda atrás y ningún juego futuro
   puede volver a olvidarlo. */
@media (max-width: 480px) {
  .hud {
    gap: 5px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .hud-back,
  .hud .help-btn,
  .hud .sound-btn { flex: none; }

  .hud-level {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hud-stats {
    min-width: 0;
    flex-shrink: 1;
    gap: 5px;
  }

  .hud-stats .stat {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Móviles estrechos (SE, Androids de 360): las etiquetas bajan un punto
   antes que dejar un control fuera de la pantalla. */
@media (max-width: 380px) {
  .hud { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .hud-stats { gap: 4px; }
  .hud-stats .stat { padding-left: 5px; padding-right: 5px; }
  .hud-stats .stat small { font-size: 8.5px; letter-spacing: 0; }
}
.btn { min-height: 48px; border-radius: var(--control-radius); }
.btn:active { transform: scale(.985); }
/* un <a> no centra su contenido como un <button> */
a.btn { display: flex; align-items: center; justify-content: center; }
.modal-card,
.win-card,
.win-crown,
.levelpop { animation-timing-function: var(--ease-out-quint); }
.card-inner { transition-timing-function: var(--ease-out-quint); }

@keyframes levelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.92); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Portada canónica · sistema editorial premium */
.cover-theme--melisa {
  --cover-accent: #0A5261;
  --cover-accent-2: #126A77;
  --cover-accent-soft: #E0F4F7;
  --cover-accent-pale: #F3FBFC;
  --cover-accent-border: rgba(10, 82, 97, .32);
  --cover-accent-shadow: rgba(10, 82, 97, .18);
}

.cover-theme--amalia {
  --cover-accent: #7B2053;
  --cover-accent-2: #A2446C;
  --cover-accent-soft: #F7DFED;
  --cover-accent-pale: #FFF6FA;
  --cover-accent-border: rgba(123, 32, 83, .30);
  --cover-accent-shadow: rgba(123, 32, 83, .18);
}

.cover-theme--sofia {
  --cover-accent: #6C3B10;
  --cover-accent-2: #8E5625;
  --cover-accent-soft: #F5E7DA;
  --cover-accent-pale: #FFF9F2;
  --cover-accent-border: rgba(108, 59, 16, .30);
  --cover-accent-shadow: rgba(108, 59, 16, .18);
}

.cover-theme--camila {
  --cover-accent: #4A1A7A;
  --cover-accent-2: #7042A6;
  --cover-accent-soft: #EAE3FE;
  --cover-accent-pale: #FAF7FF;
  --cover-accent-border: rgba(74, 26, 122, .30);
  --cover-accent-shadow: rgba(74, 26, 122, .19);
}

.cover-theme--isabela {
  --cover-accent: #3F530F;
  --cover-accent-2: #667A2A;
  --cover-accent-soft: #F6FAE2;
  --cover-accent-pale: #FBFDF2;
  --cover-accent-border: rgba(63, 83, 15, .30);
  --cover-accent-shadow: rgba(63, 83, 15, .18);
}

.cover-theme--collection {
  --cover-accent: #6A4325;
  --cover-accent-2: #916136;
  --cover-accent-soft: #F4E8D9;
  --cover-accent-pale: #FFFAF3;
  --cover-accent-border: rgba(145, 97, 54, .34);
  --cover-accent-shadow: rgba(88, 53, 28, .20);
}

.home-screen {
  min-height: 100svh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(115% 54% at 50% 0%, var(--cover-accent-pale) 0%, rgba(248, 245, 239, 0) 72%),
    var(--canvas);
  scrollbar-width: none;
}

.home-screen::-webkit-scrollbar { display: none; }

.home-screen .brand {
  min-height: 64px;
  padding: max(12px, env(safe-area-inset-top)) 18px 0;
}

/* Red de seguridad de la cabecera de marca.
   Va en :where() → especificidad CERO: cualquier regla propia del cartucho
   gana siempre, aunque este archivo se cargue después. Solo actúa cuando el
   cartucho no ha declarado nada, que es exactamente lo que pasó en
   Rompecabezas (fila rota + logo invisible) y en Solitario y Conecta (logo
   invisible). Así ningún juego futuro puede volver a olvidarlo. */
:where(.brand) { display: flex; align-items: center; gap: 12px; }
:where(.brand-mark) {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  /* Máscara, no imagen de fondo: es lo que hacen los nueve cartuchos que sí
     lo tenían, y así el logo toma el color de la tinta en vez del que traiga
     el SVG. Los tres que no lo declaraban quedan idénticos a los demás. */
  background: var(--ink);
  -webkit-mask: url("../assets/img/onikix-mark.svg") no-repeat center / contain;
  mask: url("../assets/img/onikix-mark.svg") no-repeat center / contain;
}

/* Marca envuelta en <a class="brand-home"> (salida al hub en web).
   ⚠️ display:flex es ESTRUCTURAL: .brand-mark es un <span> dimensionado
   que colapsa a 0×0 si su padre directo no lo blockifica. */
.brand-home { display: flex; align-items: center; gap: 10px; }
.home-screen .brand-home[href] { min-height: 44px; border-radius: 12px; }
@media (hover: hover) {
  .home-screen .brand-home[href]:hover { opacity: .78; }
}

.home-screen .brand-mark { width: 30px; height: 30px; }
.home-screen .brand-word { font-size: 14px; letter-spacing: .24em; }
.home-screen .brand-word em { color: color-mix(in srgb, var(--cover-accent) 54%, var(--mute)); }

.home-screen .sound-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);
  box-shadow: 0 8px 22px rgba(31, 27, 22, .06);
}

.cover-main {
  --cover-banner-height: clamp(230px, 39svh, 300px);
  --cover-banner-gap: clamp(18px, 3.1svh, 28px);
  --cover-action-gap: clamp(28px, 5.2svh, 46px);
  --cover-bottom-gap: clamp(10px, 1.8svh, 16px);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 0;
  padding: 8px 18px 0;
}

.cover-main--memory,
.cover-main--lluvia {
  --cover-banner-height: clamp(164px, 27svh, 230px);
  --cover-banner-gap: clamp(14px, 2.4svh, 22px);
  --cover-action-gap: clamp(14px, 2.4svh, 22px);
}

/* Portada horizontal 2:1. Esta clase es reversible: al retirarla vuelve a
   aplicarse la altura editorial anterior de cada cartucho. */
.cover-main--artwork {
  --cover-banner-height: clamp(154px, calc((100vw - 36px) / 2), 222px);
}

.cover-banner {
  position: relative;
  height: var(--cover-banner-height);
  min-height: var(--cover-banner-height);
  flex: 0 0 var(--cover-banner-height);
  overflow: hidden;
  border: 1px solid var(--cover-accent-border);
  border-radius: 26px;
  background: var(--cover-accent-soft);
  box-shadow: 0 18px 42px rgba(31, 27, 22, .08);
  isolation: isolate;
  margin-bottom: var(--cover-banner-gap);
}

.cover-banner::before,
.cover-banner::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.cover-banner::before {
  z-index: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, .92) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 76%, rgba(255, 255, 255, .62) 0 1px, transparent 2px),
    radial-gradient(ellipse at 18% 50%, rgba(255, 255, 255, .76), transparent 58%);
  opacity: .78;
}

.cover-banner::after {
  z-index: 2;
  background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 58%, transparent 76%);
}

.cover-banner--melisa { background: linear-gradient(135deg, #F8FEFF, #DDF3F6 78%); }
.cover-banner--amalia { background: linear-gradient(135deg, #FFF9FC, #F8DBE9 80%); }
.cover-banner--camila { background: linear-gradient(135deg, #FCFAFF, #E8DDFB 80%); }
.cover-banner--isabela { background: linear-gradient(135deg, #FCFDF7, #EEF4D2 80%); }
.cover-banner--sofia,
.cover-banner--gemas { background: linear-gradient(135deg, #FFFBF5, #F3E2D2 80%); }
.cover-banner--lluvia { background: #2D231D; }

.cover-banner--artwork::before,
.cover-banner--artwork::after { display: none; }

.cover-banner__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.cover-banner__title {
  position: absolute;
  left: clamp(20px, 6vw, 28px);
  top: 50%;
  z-index: 3;
  max-width: 57%;
  transform: translateY(-50%);
  color: var(--ink);
  line-height: .9;
}

.cover-banner__title::after {
  display: block;
  width: clamp(76px, 24vw, 112px);
  height: 1px;
  margin-top: clamp(14px, 2.2svh, 20px);
  background: linear-gradient(90deg, transparent, var(--cover-accent) 18%, var(--cover-accent) 82%, transparent);
  content: "";
  opacity: .48;
}

.cover-banner__title em {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 12.6vw, 58px);
  font-style: italic;
  font-weight: 650;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.cover-banner__title span {
  display: block;
  margin-top: clamp(8px, 1.5svh, 12px);
  color: var(--cover-accent);
  font-family: var(--font-head);
  font-size: clamp(13px, 3.8vw, 17px);
  font-weight: 800;
  letter-spacing: .30em;
}

/* El H1 sigue disponible para accesibilidad y rollback. Quitar esta clase
   recupera el título visible sin reconstruir el HTML. */
.cover-banner__title--embedded {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cover-banner__title--embedded::after { display: none; }

.cover-banner__character {
  position: absolute;
  right: -6px;
  top: -2px;
  z-index: 1;
  width: auto;
  height: clamp(360px, 60svh, 510px);
  filter: drop-shadow(0 14px 18px rgba(31, 27, 22, .16));
}

.cover-banner--melisa .cover-banner__character {
  right: -12px;
  height: clamp(380px, 64svh, 540px);
}

/* Cada render tiene una silueta distinta. Estos offsets reservan una zona limpia
   para el título: personaje y tipografía nunca se cruzan en móvil. */
.cover-banner--amalia .cover-banner__character { right: -58px; }
.cover-banner--isabela .cover-banner__character { right: -100px; }
.cover-banner--camila .cover-banner__character { right: -14px; }

.cover-banner__group {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(.92) contrast(1.03);
}

.cover-banner--lluvia::before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(31, 22, 18, .78), rgba(31, 22, 18, .54) 43%, rgba(31, 22, 18, .14) 78%),
    linear-gradient(0deg, rgba(31, 22, 18, .42), transparent 62%);
  opacity: 1;
}

.cover-banner--lluvia::after {
  z-index: 2;
  background: radial-gradient(circle at 22% 70%, rgba(201, 150, 46, .24), transparent 42%);
}

.cover-banner__title--over-image {
  top: auto;
  bottom: clamp(18px, 3svh, 28px);
  max-width: 64%;
  transform: none;
  color: var(--card);
  text-shadow: 0 3px 14px rgba(31, 22, 18, .52);
}

.cover-banner__title--over-image::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88) 18%, rgba(201,150,46,.9) 82%, transparent);
  opacity: .84;
}

.cover-banner__title--over-image em { font-size: clamp(36px, 10.5vw, 48px); }
.cover-banner__title--over-image span { color: #FFF8EC; }

.how-to {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 9px;
  min-height: 0;
  padding: 0;
}

.how-to__title {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 13px;
  padding: 0 4px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.how-to__title::before,
.how-to__title::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cover-accent-border));
  content: "";
}

.how-to__title::after { transform: scaleX(-1); }

.how-to__step {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  min-width: 0;
  min-height: clamp(50px, 7svh, 62px);
  padding: 8px 15px;
  border: 1px solid color-mix(in srgb, var(--cover-accent) 18%, var(--line));
  border-radius: 17px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 24px rgba(31, 27, 22, .045);
  color: var(--soft-ink);
  font-family: var(--font-head);
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 650;
  line-height: 1.2;
}

.how-to__num {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 9.6vw, 40px);
  height: clamp(34px, 9.6vw, 40px);
  flex: 0 0 clamp(34px, 9.6vw, 40px);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cover-accent-2), var(--cover-accent));
  color: var(--card);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 14px var(--cover-accent-shadow);
}

.how-to__num::after {
  position: absolute;
  left: calc(100% + 10px);
  width: 1px;
  height: 22px;
  background: var(--cover-accent-border);
  content: "";
}

.cover-choice {
  display: grid;
  gap: 8px;
}

.how-to + .cover-choice { margin-top: var(--cover-action-gap); }

.cover-choice__label {
  color: var(--soft-ink);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.level-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.level-option {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 65px;
  padding: 8px 5px;
  border: 1px solid color-mix(in srgb, var(--cover-accent) 14%, var(--line));
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 5px 16px rgba(31, 27, 22, .04);
  text-align: center;
  transition: border-color 170ms var(--ease-out-quint), background 170ms var(--ease-out-quint), transform 170ms var(--ease-out-quint);
}

.level-option[aria-pressed="true"] {
  border-color: var(--cover-accent);
  background: var(--cover-accent-soft);
  box-shadow: inset 0 0 0 1px var(--cover-accent), 0 7px 18px var(--cover-accent-shadow);
}

.level-option:active { transform: scale(.985); }
.level-option__name { font-family: var(--font-head); font-size: 14px; font-weight: 800; }
.level-option__meta { color: var(--soft-ink); font-size: 10px; font-weight: 600; }
.level-option__best { color: var(--mute); font-family: var(--font-head); font-size: 10px; font-weight: 700; }

.level-options--extended .level-option {
  min-height: 54px;
  padding: 6px 4px;
}

.level-options--extended .level-option__name { font-size: 13px; }
.level-options--extended .level-option__best { font-size: 9.5px; }

.level-options--ten {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.level-options--ten .level-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 4px 2px;
  border-radius: 13px;
  text-align: center;
}

.level-options--ten .level-option__name {
  display: block;
  width: 100%;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.cast-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.cast-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 76px;
  padding: 6px 2px 5px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  transition: background 170ms var(--ease-out-quint), border-color 170ms var(--ease-out-quint), transform 170ms var(--ease-out-quint);
}

.cast-option img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pj-soft);
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--pj);
}

.cast-option__name {
  overflow: hidden;
  max-width: 100%;
  color: var(--pj);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-option__best {
  color: var(--mute);
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
}

.cast-option__check {
  position: absolute;
  top: 3px;
  right: 4px;
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pj);
  color: var(--card);
  font-size: 11px;
  font-weight: 900;
}

.cast-option[aria-pressed="true"] {
  border-color: var(--pj);
  background: var(--pj-soft);
  box-shadow: 0 7px 18px rgba(31, 27, 22, .06);
}
.cast-option[aria-pressed="true"] .cast-option__check { display: grid; }
.cast-option:active { transform: scale(.985); }

.home-primary {
  display: grid;
  gap: 7px;
  margin-top: var(--cover-action-gap);
  margin-bottom: var(--cover-bottom-gap);
  padding: 0;
}

.home-cta {
  position: relative;
  width: 100%;
  min-height: clamp(58px, 8svh, 68px);
  overflow: hidden;
  padding: 0 54px;
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--cover-accent-2), var(--cover-accent));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 12px 26px var(--cover-accent-shadow);
  color: var(--card);
  font-family: var(--font-head);
  font-size: clamp(19px, 5.3vw, 23px);
  font-weight: 800;
  letter-spacing: .015em;
  transition: filter 170ms var(--ease-out-quint), transform 170ms var(--ease-out-quint), opacity 170ms var(--ease-out-quint);
}

.home-cta::before,
.home-cta::after {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,.80);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.home-cta::before { left: 34px; }
.home-cta::after { right: 34px; }
.home-cta:active { transform: scale(.985); }
.home-cta:disabled { cursor: not-allowed; filter: saturate(.55); opacity: .48; }

.home-record {
  min-height: 19px;
  margin: 0;
  color: var(--soft-ink);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.home-record::before {
  margin-right: 7px;
  color: var(--cover-accent);
  font-size: 15px;
  content: "♛";
}

.home-record strong { color: var(--cover-accent); }

.home-screen .home-foot {
  position: relative;
  margin-top: 0;
  padding: 24px 16px max(12px, env(safe-area-inset-bottom));
  color: var(--mute);
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
}

.home-screen .home-foot::before {
  position: absolute;
  top: 9px;
  left: 16%;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cover-accent-border) 18%, var(--cover-accent-border) 82%, transparent);
  content: "";
}

.home-screen .home-foot::after {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--canvas);
  border: 1px solid var(--cover-accent-border);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

/* Diálogos y orientación */
[role="dialog"]:focus { outline: 0; }

.rotate-notice {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 24px;
  background: var(--canvas);
  color: var(--ink);
  text-align: center;
}

.rotate-notice__card {
  max-width: 330px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--card);
  box-shadow: 0 18px 50px rgba(31,27,22,.14);
}

.rotate-notice__icon { display: block; margin-bottom: 10px; font-size: 30px; }
.rotate-notice strong { display: block; font-family: var(--font-head); font-size: 18px; }
.rotate-notice p { margin-top: 6px; color: var(--soft-ink); font-size: 14px; line-height: 1.4; }

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-notice { display: grid; }
}

@media (max-height: 700px) {
  .home-screen .brand {
    min-height: 54px;
    padding-top: max(7px, env(safe-area-inset-top));
  }

  .home-screen .brand-mark { width: 27px; height: 27px; }
  .home-screen .brand-word { font-size: 13px; }
  .home-screen .sound-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 14px; }

  .cover-main {
    --cover-banner-height: clamp(218px, 36svh, 240px);
    --cover-banner-gap: 13px;
    /* 18px -> 12px (29/07/2026): los 6px que necesita el enlace de ayuda para
       llegar a 44px salen de aqui, que es aire, no de un control. */
    --cover-action-gap: 12px;
    --cover-bottom-gap: 8px;
    padding-top: 4px;
  }

  .cover-main--memory,
  .cover-main--lluvia {
    --cover-banner-height: clamp(148px, 24svh, 162px);
    --cover-banner-gap: 12px;
    --cover-action-gap: 12px;
  }

  .cover-main--artwork {
    --cover-banner-height: clamp(154px, calc((100vw - 36px) / 2), 222px);
  }

  .cover-banner { border-radius: 22px; }
  .cover-banner__title::after { margin-top: 11px; }
  .cover-banner__character { height: clamp(330px, 57svh, 380px); }
  .cover-banner--melisa .cover-banner__character { height: clamp(350px, 61svh, 407px); }
  .cover-banner--amalia .cover-banner__character { right: -35px; }
  .cover-banner--isabela .cover-banner__character { right: -80px; }

  .how-to { gap: 6px; }
  .how-to__title { font-size: 14px; }
  .how-to__step { min-height: 46px; padding-block: 5px; font-size: 13px; }
  .how-to__num { width: 30px; height: 30px; flex-basis: 30px; font-size: 13px; }

  .level-options--ten .level-option { min-height: 44px; }
  .cast-option { min-height: 70px; padding-block: 4px; }
  .cast-option img { width: 40px; height: 40px; }

  .home-primary { gap: 4px; }
  .home-cta { min-height: 52px; font-size: 18px; }
  .home-record { min-height: 17px; font-size: 11.5px; }
  .home-record::before { font-size: 13px; }

  .home-screen .home-foot {
    padding-top: 20px;
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    font-size: 10px;
  }

  .home-screen .home-foot::before { top: 7px; }
  .home-screen .home-foot::after { top: 4px; }
}

@media (max-width: 360px) {
  .cover-main { padding-inline: 14px; }
  .cover-banner__title { left: 17px; max-width: 59%; }
  .cover-banner__title em { font-size: 42px; }
  .cover-banner__title span { font-size: 12px; }
  .cover-banner__title--over-image em { font-size: 34px; }
  .level-options--ten { gap: 4px; }
  .level-options--ten .level-option__name { font-size: 11px; }
  .how-to__title { gap: 9px; padding-inline: 2px; }
  .how-to__step { gap: 20px; padding-inline: 12px; }
  .cast-options { gap: 2px; }
  .cast-option img { width: 39px; height: 39px; }
  .home-cta::before { left: 26px; }
  .home-cta::after { right: 26px; }
}

@media (hover: hover) and (pointer: fine) {
  .home-cta:hover { filter: brightness(.95); }
  .level-option:hover,
  .cast-option:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active { animation: none; }
  .home-cta,
  .level-option,
  .cast-option { transition-duration: 1ms; }
}

/* ════════════════════════════════════════════════════════════════════
   LA CHICA DE ESTE CARTUCHO — token único (28/07/2026)
   ════════════════════════════════════════════════════════════════════
   Por qué existe: hasta hoy cada juego pintaba su botón principal por su
   cuenta y de tres maneras distintas. Nueve usaban `--ink`, así que el
   botón salía NEGRO mientras el resto de la tarjeta iba del color de la
   chica; los otros tres usaban `--camila`, `--deep` y `--pj`. Cuatro
   vocabularios para el mismo concepto.

   A partir de ahora hay uno: `--pj-deep` / `--pj-mid` / `--pj-soft`.
   El nombre no es nuevo — La Frase Oculta ya lo usaba para rotar de
   chica; se adopta el suyo en vez de inventar otro.

   Cómo se fija:
     · Estático  → `data-pj="<slug>"` en el <html> del cartucho.
     · Rotando   → el juego escribe las variables en `document.docu-
       mentElement` cuando cambia de chica. El estilo en línea gana a la
       regla de aquí, así que se actualiza solo y sin coordinación.

   Los tres niveles de una paleta viajan SIEMPRE juntos: mezclar el Deep
   de una con el Soft de otra está prohibido por el Brand Book.
   ════════════════════════════════════════════════════════════════════ */

[data-pj="amalia"]  { --pj-deep: #7B2053; --pj-mid: #E5C3D6; --pj-soft: #F7DFED; }
[data-pj="sofia"]   { --pj-deep: #6C3B10; --pj-mid: #E2CFBF; --pj-soft: #F5E7DA; }
[data-pj="isabela"] { --pj-deep: #3F530F; --pj-mid: #DBE3C5; --pj-soft: #F6FAE2; }
[data-pj="melisa"]  { --pj-deep: #0A5261; --pj-mid: #C4DEE2; --pj-soft: #E0F4F7; }
[data-pj="camila"]  { --pj-deep: #4A1A7A; --pj-mid: #D5C7EC; --pj-soft: #EAE3FE; }

/* ¿Por qué el botón de partida va en Ink y no en el color de la chica?
   Se probó de las dos maneras el 28/07/2026, en el móvil, y esta gana.

   Con el color del personaje quedaban DOS botones rellenos del mismo tono
   en la misma tarjeta —jugar otra vez y la invitación al test— compitiendo
   con el mismo peso. Ninguno ganaba y el color dejaba de significar nada.

   Con Ink la lectura es limpia y la jerarquía queda dicha:
     · Ink              = la mecánica del juego. La voz del sistema.
     · Deep de la chica = la invitación. Lo único con personalidad aquí.

   Ink es acento canónico del Brand Book igual que los Deep, así que esto
   no es una renuncia: es reservar el color para lo que hay que mirar.

   Vive en el sistema y no en cada cartucho porque este fichero carga
   DESPUÉS del CSS del juego: así los trece dicen lo mismo y ninguno
   futuro puede volver a decidirlo por su cuenta. Antes había tres
   vocabularios distintos (`--ink`, `--camila`, `--deep`, `--pj`). */
.btn-primary {
  background: var(--ink);
  color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════════
   FINAL DE PARTIDA — jerarquía (28/07/2026)
   ════════════════════════════════════════════════════════════════════
   El problema, visto en un iPhone real: la tarjeta de fin acumulaba
   hasta CUATRO controles de ancho completo —jugar, compartir, cambiar de
   nivel, todos los juegos— y la invitación al test quedaba la quinta,
   abajo del todo. Con tanto ruido delante, la única pieza que hace
   crecer el proyecto era la menos visible de la pantalla.

   Ahora: un botón de partida, la invitación justo después, y todo lo
   demás en una sola fila de 44px. Se recuperan ~96px y, sobre todo, la
   invitación pasa del quinto lugar al segundo.

   Compartir NO se elimina —es el único bucle de crecimiento orgánico que
   tiene ONIKIX— sino que pasa a icono.
   ════════════════════════════════════════════════════════════════════ */

/* Los tres controles secundarios van SIEMPRE en una sola fila. Con
   `wrap` caían a dos líneas en cuanto las etiquetas eran largas
   («Cambiar de chica» + «Todos los juegos») y la tarjeta terminaba en un
   escalón desordenado. Antes de romper la fila ceden el aire y el cuerpo
   de la letra — en ese orden— y la zona táctil de 44px no cede nunca. */
.play-endrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  min-width: 0;
}

/* Compartir como icono.
   ⚠️ El texto NO se quita del HTML: varios cartuchos reescriben
   `textContent` de este botón para su estado de carga («Preparando…»).
   Si aquí se vaciara el markup, ese código borraría el icono. Se oculta
   con font-size:0 —el lector de pantalla lo sigue leyendo— y el icono
   entra por máscara, que es inmune a lo que haga el JS del juego. */
.play-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pj-deep, var(--ink)) 34%, transparent);
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: var(--pj-deep, var(--ink));
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms ease, transform 180ms var(--ease-out-quint);
}

.play-iconbtn::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  /* Caja con flecha hacia arriba: el gesto de compartir que la gente ya
     tiene interiorizado del móvil. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V3'/><path d='M8 6.5 12 2.5l4 4'/><path d='M5 12.5v7a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-7'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V3'/><path d='M8 6.5 12 2.5l4 4'/><path d='M5 12.5v7a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-7'/></svg>") no-repeat center / contain;
}

@media (hover: hover) and (pointer: fine) {
  .play-iconbtn:hover { background: color-mix(in srgb, var(--pj-deep, var(--ink)) 10%, transparent); }
}

.play-iconbtn:active { transform: scale(.94); }

/* Los controles secundarios pasan de botón de ancho completo a enlace.
   Mantienen sus 44px de zona táctil: los controles no ceden nunca. */
.play-endlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--pj-deep, var(--ink)) 74%, #1F1B16);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .play-endlink:hover { color: var(--pj-deep, var(--ink)); }
}

/* ════════════════════════════════════════════════════════════════════
   LA CODA — la invitación al test (v3 · 2026-07-28)
   ════════════════════════════════════════════════════════════════════
   Qué es: al terminar una partida, la anfitriona te devuelve la pregunta
   y te abre la puerta del test, que es donde ONIKIX capta correos.

   v1 (mañana): un filete y un enlace pequeño. Se leía como el pie de
   unas condiciones legales — nadie iba a pulsar ahí.
   v2 (tarde): ya tarjeta, pero seguía la quinta y última.
   v3: sube al segundo lugar y usa el token único de la chica, así que
   en los juegos que rotan de chica se tiñe sola de la que esté en
   pantalla en vez de quedarse con la anfitriona del registro.

   Sigue siendo online-only vía el puente ([data-play-coda]).
   ════════════════════════════════════════════════════════════════════ */

/* ⚠️ SIN CAJA, y no es un olvido.
   La v3 era un rectángulo teñido DENTRO de la tarjeta blanca: tarjeta
   dentro de tarjeta, que el suelo de acabado rechaza por escrito. Medido
   en un iPhone, quedaba encajonada entre el botón (12px arriba) y la fila
   (10px abajo) y era justo lo que se sentía apelotonado.

   Ahora la invitación respira sobre la superficie blanca. Lo que la
   separa es AIRE y un filete de un pelo, no una caja. El color sigue
   estando donde importa —el botón— y el énfasis nace del aire y del
   peso, que es de donde tiene que nacer. */
.play-coda {
  width: 100%;
  /* Separación generosa arriba: aquí empieza otra idea. */
  margin-top: 26px;
  padding-top: 20px;
  /* Elevación una sola vez: filete, sin fondo ni sombra. */
  border-top: 1px solid color-mix(in srgb, var(--pj-deep, var(--ink)) 16%, transparent);
  background: transparent;
  text-align: left;
  box-sizing: border-box;
}

.play-coda__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.play-coda__bust {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pj-soft, var(--surface, #EFE9DC));
  object-fit: cover;
  object-position: center top;
  display: block;
}

.play-coda__body { flex: 1 1 auto; min-width: 0; }

.play-coda__line {
  margin: 0 0 2px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 600;
  /* Sobre superficie con color, el secundario se tiñe del Deep de la
     pieza — el gris frío está retirado del sistema. */
  color: color-mix(in srgb, var(--pj-deep, var(--ink)) 82%, #1F1B16);
}

/* Firma editorial: la pregunta en Fraunces itálica, una sola vez. */
.play-coda__line em {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--pj-deep, var(--ink));
}

/* El gancho: desmonta la objeción real («esto me va a llevar un rato»). */
.play-coda__hook {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11.5px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--pj-deep, var(--ink)) 62%, #1F1B16);
}

.play-coda__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pj-deep, var(--ink));
  color: #fff;
  font-family: var(--font-head, system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  touch-action: manipulation;
  transition: transform 180ms var(--ease-out-quint), filter 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .play-coda__cta:hover { filter: brightness(1.14); }
}

.play-coda__cta:active { transform: scale(0.975); }

/* Pantallas estrechas (320px): cede el retrato antes que el texto. */
@media (max-width: 340px) {
  .play-coda { padding: 10px 10px 11px; }
  .play-coda__bust { width: 38px; height: 38px; }
  .play-coda__head { gap: 8px; }
  .play-coda__line { font-size: 13px; }
  /* A 320px la fila mide 253px de 280 disponibles con el icono entero,
     así que la zona táctil NO cede: ceden el aire y el cuerpo de letra. */
  .play-endrow { gap: 8px; }
  .play-endlink { font-size: 11.5px; }
}

/* Pantallas bajas: cede el aire, luego el gancho, luego el retrato — en
   ese orden. Lo que NO cede es el botón: 44px de zona táctil es el suelo
   del proyecto y se respeta también aquí. Medido en 375×667 sobre la
   tarjeta de Memoria, la más cargada: sobran 39px, así que mantenerlo
   entero no cuesta nada. */
@media (max-height: 700px) {
  .play-coda { margin-top: 16px; padding-top: 13px; }
  .play-coda__head { margin-bottom: 10px; gap: 10px; }
  .play-coda__bust { width: 38px; height: 38px; }
  .play-coda__hook { display: none; }
  .play-coda__cta { padding: 8px 12px; font-size: 13px; }
  .play-endrow { margin-top: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   RITMO DE LA TARJETA DE FIN (28/07/2026)
   ════════════════════════════════════════════════════════════════════
   Medido en producción sobre Gemas, en un iPhone: los huecos entre
   bloques eran 17 · 12 · 20 · 18 · 12 · 10px. Todos a media distancia.

   Con todo separado por igual, el ojo no distingue qué va con qué y la
   pantalla se lee como un montón. No faltaba espacio —había 143px
   libres debajo de la tarjeta— sino REPARTO: el suelo de acabado pide
   «grupos apretados, separación generosa», y aquí no había ni grupos ni
   separación, solo un promedio.

   Los cuatro grupos de una tarjeta de fin son:
     1. Quién y qué ha pasado   → retrato, título, voz
     2. Tus números            → marcadores
     3. Qué haces ahora        → el botón de partida
     4. La puerta              → la invitación al test
   y al final, lo secundario.

   Dentro de un grupo, apretado. Entre grupos, generoso. Y más aire
   ENCIMA de un titular que debajo, que es como se lee un titular.

   Se hace desde aquí y con `:where()` —especificidad cero— para que
   cualquier regla propia del cartucho siga ganando: esto es un suelo,
   no una imposición.
   ════════════════════════════════════════════════════════════════════ */

:where(.modal-card, .win-card, .result-card) {
  /* El título necesita aire por encima: es donde arranca la lectura. */
  --end-air-group: 24px;
  --end-air-tight: 8px;
}

/* Grupo 1 — el título respira por arriba y se pega a su voz. */
:where(.modal-card, .win-card, .result-card)
  :where(.modal-title, .result-title, .win-title) {
  margin-top: 14px;
  margin-bottom: var(--end-air-tight);
}

/* Grupo 2 — los números se separan de la voz, no la continúan. */
:where(.modal-card, .win-card, .result-card)
  :where(.result-stats, .win-stats, .modal-stats, .stats) {
  margin-top: var(--end-air-group);
}

/* Grupo 3 — la acción se separa de los números. Es otra decisión. */
:where(.modal-card, .win-card, .result-card) :where(.btn-primary) {
  margin-top: var(--end-air-group);
}

/* Y el aire de abajo de la tarjeta, para que la fila no roce el borde. */
:where(.modal-card, .win-card, .result-card) { padding-bottom: 22px; }

/* En pantallas bajas el ritmo se comprime a la mitad, pero se conserva
   la diferencia entre «dentro de un grupo» y «entre grupos»: si se
   igualan otra vez, vuelve la sensación de montón. */
@media (max-height: 700px) {
  :where(.modal-card, .win-card, .result-card) {
    --end-air-group: 15px;
    --end-air-tight: 6px;
    padding-bottom: 16px;
  }
  :where(.modal-card, .win-card, .result-card)
    :where(.modal-title, .result-title, .win-title) {
    margin-top: 9px;
  }
}

/* ── La voz de la invitación sigue a la chica que está en pantalla ──
   Lluvia, Ecos y La Frase Oculta cambian de chica, y ya seguían el
   retrato y los colores. La FRASE no: se quedaba la de la anfitriona del
   registro y quedaba la cara de Sofía diciendo la frase de Isabela.
   Mezclar el Deep de una con la voz de otra rompe el canon igual que
   mezclarlo con su Soft.

   Las cinco viajan en el markup y aquí se enseña la que toca. En CSS y
   no en JavaScript a propósito: así el copy sigue viviendo en un solo
   sitio —el HTML del cartucho— y sin red también se ve la correcta. */
.play-coda__line > [data-pj-line] { display: none; }
[data-pj="amalia"]  .play-coda__line > [data-pj-line="amalia"],
[data-pj="sofia"]   .play-coda__line > [data-pj-line="sofia"],
[data-pj="isabela"] .play-coda__line > [data-pj-line="isabela"],
[data-pj="melisa"]  .play-coda__line > [data-pj-line="melisa"],
[data-pj="camila"]  .play-coda__line > [data-pj-line="camila"] { display: inline; }