/* ══════════════════════════════════════════════════════════════════
   COP · LA HOJA DE REGISTRO  (23/09/2026)
   ──────────────────────────────────────────────────────────────────
   El menú que sube desde abajo antes de entrar a una sala: dice a qué
   se está entrando, cuánto cuesta, y ofrece Registrarme, Recompensas y
   Ahora no.

   ══ POR QUÉ ES UN COMPONENTE Y NO TRES COPIAS ════════════════════
   Franco, 23/09/2026: *«ahora la única que tiene menú de registro es la
   de Mega Spin, las otras 2 entran directo y no es así, ya que tiene
   una entrada. Así que agregá el menú que sale desde abajo en Mega Spin
   en las otras 2 competencias»*.
   ⚠⚠ La hoja vivía ESCRITA A MANO adentro de `spin.html`. Copiarla a
   Doble o Nada y a Survival habría dejado TRES copias del mismo menú, y
   el día que una cambie de tono o de tamaño de botón las otras dos se
   quedan viejas sin que nadie se entere — que es exactamente lo que ya
   pasó con `.dn-hcard`, duplicada a mano entre Doble o Nada y Survival.

   ══ LO QUE ESTA HOJA NO DIBUJA ════════════════════════════════════
   ⚠ LOS BOTONES SON LOS DEL SISTEMA (`cop-borde` + `cop-borde--boton`),
   con `--gold` para la acción principal y `--blanco` para las otras dos.
   Acá va sólo el tamaño, el ancho y la tinta del texto.

   ══⚠⚠ EL FONDO ES EL DE LA PÁGINA ════════════════════════════════
   Franco: *«ponele el mismo color de fondo a ese menú que se usa para
   la página»*. Venía en `--s2` (#161b25), dos tonos más claro que el
   `--bg` del `body`, y se leía como un panel pegado encima en vez de
   como una continuación de la pantalla. El arnés lo compara contra el
   fondo REAL del `body`, no contra un hex escrito acá: si mañana cambia
   el tono de la app, el control sigue diciendo la verdad.
   ══════════════════════════════════════════════════════════════════ */

.cop-hr{
  position:fixed; inset:0; z-index:80;
  display:none; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.6);
}
.cop-hr.abierta{ display:flex }

.cop-hr-caja{
  width:100%; max-width:560px;
  background:var(--bg, #0b0e14);
  border:1.5px solid var(--card-border, #2a3040);
  border-radius:var(--r-card, 14px) var(--r-card, 14px) 0 0;
  /* ⚠ EL HUECO DE ABAJO DEL TELÉFONO. Sin `env(safe-area-inset-bottom)`
     el último botón queda debajo de la barra de gestos del iPhone y no
     se puede tocar. */
  padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}

.cop-hr-tit{
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400; font-size:var(--fs-lg, 1.15rem);
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--text, #f4f6fb);
  margin:0 0 var(--gap-sm, .5rem);
}
.cop-hr-sub{
  font-family:var(--texto, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-sm, .8rem); line-height:1.5;
  color:var(--text-dim, #9aa3b5);
  margin:0;
}

/* ⚠ LOS TRES BOTONES COMPARTEN CUERPO: un botón de la misma hoja con su
   propio ancho y su propia fuente es como empiezan las pantallas que no
   se parecen a sí mismas. */
.cop-hr-btn, .cop-hr-prem, .cop-hr-cerrar{
  display:block; width:100%;
  font-family:var(--texto, 'Inter', system-ui, sans-serif);
  cursor:pointer; text-align:center;
}
.cop-hr-btn{
  margin-top:var(--gap-lg, 1rem); padding:var(--gap-lg, 1rem);
  font-weight:800; font-size:var(--fs-base, 1rem);
  color:var(--gold, #ffc233);
}
.cop-hr-btn:disabled{ opacity:.6; cursor:default }
/* ⚠ LA SECUNDARIA: mismo cuerpo que Registrarme pero con la tinta del
   texto normal, no la dorada. Va entre la principal y «Ahora no». */
.cop-hr-prem{
  margin-top:var(--gap-md, .7rem); padding:.7rem;
  font-weight:700; font-size:var(--fs-md, .88rem);
  color:var(--text, #f4f6fb); background:transparent;
}
.cop-hr-cerrar{
  margin-top:.5rem; padding:.7rem;
  font-weight:700; font-size:var(--fs-md, .88rem);
  color:var(--text-dim, #8b93a7);
}

/* ⚠ EL ENLACE DE ENTRAR, cuando el servidor contesta que falta sesión.
   Ver el comentario en `cop-hoja-registro.js`. */
.cop-hr-sub a{ color:var(--primary, #0c95eb); font-weight:700; margin-left:var(--gap-xs, .3rem) }