/* Helvetica Neue local. Los archivos Light y Medium también están en
   assets/fonts/helvetica/ si más adelante se necesita un peso intermedio. */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('assets/fonts/helvetica/HelveticaNeue-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('assets/fonts/helvetica/HelveticaNeue-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Paleta de marca ----------
   La línea que se promociona ahora es Pitahaya (bío:renew): envases magenta con
   tapa negra, foto de referencia del usuario. El magenta (--he-pink*) es una
   estimación visual de esa foto — no se pudo muestrear en píxeles porque llegó
   pegada en el chat, sin archivo. --he-fruit-flesh SÍ está muestreado en
   píxeles, de assets/media/big_price.png (el confeti del premio mayor en
   celebration.js). Todo el texto del juego es --he-white puro, por pedido
   explícito: nada de verde, rojo ni magenta en el texto (el magenta solo
   aparece como resplandor/sombra, nunca como color de relleno). El crema se
   agregó por pedido explícito para el marco de los rodillos. */
:root {
  --he-pink: #d4106d;         /* magenta del envase Pitahaya (estimado de foto) */
  --he-pink-bright: #ff4fa0;  /* tinte claro, para resplandor y hover */
  --he-pink-deep: #5a0a35;    /* tono profundo para el mueble */
  --he-pink-night: #2b0518;   /* extremo más oscuro del degradado del mueble */
  --he-fruit-flesh: #f0d0b0;  /* pulpa de la pitahaya, muestreado de big_price.png */
  --he-cream: #f2e8d0;        /* crema cálido para el marco de los rodillos */
  --he-cream-shadow: #d8c89a; /* sombra del crema, para relieve sutil */
  --he-white: #ffffff;
}

* {
  box-sizing: border-box;
}

/* El juego nunca debe requerir scroll: html/body se fijan al alto real del
   viewport (100dvh, que en móvil descuenta la barra del navegador) con
   overflow:hidden como garantía dura. Que el contenido realmente QUEPA ahí
   depende de que cada medida de abajo use vmin (el lado más chico de la
   pantalla) en vez de vw — así una ventana ancha pero baja también encoge el
   mueble, no solo una angosta. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, #3d0a24 0%, var(--he-pink-night) 70%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--he-white);
  padding: clamp(6px, 2vmin, 16px);
  box-sizing: border-box;
}

/* El mueble hace de envase: magenta profundo, como el frasco de Pitahaya. */
.cabinet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: 100%;
  overflow: hidden;
  background: linear-gradient(170deg, var(--he-pink-deep) 0%, var(--he-pink-night) 100%);
  padding: clamp(10px, 3vmin, 28px);
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 0 50px #00000088, inset 0 1px 0 #ffffff1a;
  box-sizing: border-box;
}

.brandbar {
  margin: 0 0 clamp(6px, 2vmin, 20px);
}

/* Logotipo oficial (assets/media/Herbal-Essences-Logo.png): insignia circular
   con relleno blanco, así que se ve como un sello sobre el mueble magenta,
   igual que las ventanas de los rodillos. Es cuadrado en origen (2031x2039). */
.brandbar-logo {
  display: block;
  width: clamp(48px, 12vmin, 104px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  filter: drop-shadow(0 3px 8px #00000055);
}

.mute-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff24;
  color: var(--he-white);
  border: 1px solid #ffffff59;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, transform 0.1s ease;
}

.mute-btn:hover {
  background: #ffffff40;
  transform: scale(1.08);
}

/* El ícono es un SVG en currentColor (blanco), sin emoji. Silenciado: se
   oculta la onda de sonido y aparece la barra diagonal. */
.mute-icon-slash {
  display: none;
}

.mute-btn.muted .mute-icon-wave {
  display: none;
}

.mute-btn.muted .mute-icon-slash {
  display: block;
}

/* Crema cálido, para que el borde magenta de los rodillos se lea como un
   acabado cálido en vez de magenta sobre negro. Ahora .frame ES el botón de
   girar (antes solo envolvía los rodillos), así que además de la piel de
   siempre lleva los resets de un <button> nativo (sin borde, sin fuente
   propia, ancho completo) y los estados de interacción. */
.frame {
  display: block;
  width: 100%;
  background: linear-gradient(170deg, var(--he-cream) 0%, var(--he-cream-shadow) 100%);
  padding: clamp(8px, 2.4vmin, 22px);
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #ffffff80, inset 0 2px 6px #00000022;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.frame:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px #ffffff80, inset 0 2px 6px #00000022, 0 0 0 3px var(--he-pink-bright);
}

.frame:active:not(:disabled) {
  transform: scale(0.985);
}

.frame:focus-visible {
  outline: 3px solid var(--he-pink-bright);
  outline-offset: 3px;
}

.frame:disabled {
  cursor: not-allowed;
}

.reels {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 2vmin, 18px);
}

/* El ancho ya respondía al viewport (100% del contenedor flex, tope 190px),
   pero ese tope era un px fijo sin relación con el alto disponible: en una
   ventana ancha y baja, el rodillo llegaba a su máximo ancho y con el
   aspect-ratio 13:30 terminaba más alto que la pantalla. min(190px, 30vmin)
   agrega ese segundo tope según el lado más chico de la ventana. */
.reel-window {
  position: relative;
  width: 100%;
  max-width: min(190px, 30vmin);
  aspect-ratio: 13 / 30;
  overflow: hidden;
  background: var(--he-white);
  border: clamp(2px, 1vmin, 8px) solid var(--he-pink);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px var(--he-pink-bright);
  transition: box-shadow 0.3s ease;
}

.reel-window.revealed {
  box-shadow: inset 0 0 0 2px var(--he-pink-bright), 0 0 18px 4px var(--he-pink-bright);
}

.reel-window::before,
.reel-window::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  pointer-events: none;
  z-index: 2;
}

.reel-window::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffffcc, transparent);
}

.reel-window::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffffcc, transparent);
}

.reel-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--he-white);
  border-bottom: 1px solid #e7efe9;
}

/* Los productos vienen en proporciones muy distintas (frascos altos, tarros
   cuadrados), así que se ajustan por el lado más largo sin deformarse. */
.cell img {
  max-width: 74%;
  max-height: 74%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Los envases altos y angostos (shampoo, acondicionador) se escalan por su altura:
   con el mismo límite que los tarros cuadrados quedaban con la mitad de presencia
   visual en la celda. */
.cell img.tall {
  max-width: 100%;
  max-height: 96%;
}

@keyframes spin-loop {
  from { transform: translateY(0); }
  to { transform: translateY(var(--loop-distance)); }
}

/* Los tres estados (gana, pierde, premio mayor) usan el mismo blanco puro:
   sin verde, sin rojo/magenta, solo el color del texto que pide la marca. El
   resplandor rosado del premio mayor es una sombra (text-shadow), no el color
   del texto, así que no cuenta como "texto en color". */
.result {
  min-height: clamp(20px, 5vmin, 36px);
  margin-top: clamp(10px, 2.6vmin, 20px);
  font-size: clamp(0.85rem, 2.6vmin, 1.4rem);
  font-weight: 700;
  color: var(--he-white);
}

.result.jackpot {
  font-size: clamp(0.95rem, 3.2vmin, 1.8rem);
  text-shadow: 0 0 10px #ff4fa099;
}

/* Mensaje inicial ("toca los rodillos para girar"), antes del primer giro:
   mismo blanco, solo más tenue para no confundirlo con un resultado real. */
.result.hint {
  opacity: 0.75;
  font-weight: 400;
}

/* ---------- Celebración: confeti y luces ---------- */

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

/* Las luces solo se ven mientras <body> tiene la clase .celebrating (premio mayor). */
#celebration-lights {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  transition: opacity 0.4s ease;
}

body.celebrating #celebration-lights {
  opacity: 1;
}

/* Abanico de rayos que gira alrededor del centro de la pantalla. */
.light-beams {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(
    from 0deg,
    #ff4fa05c 0deg 5deg,
    transparent 5deg 24deg
  );
  mix-blend-mode: screen;
}

.light-beams-alt {
  background: repeating-conic-gradient(
    from 12deg,
    #2ed13440 0deg 3deg,
    transparent 3deg 30deg
  );
}

body.celebrating .light-beams {
  animation: beam-spin 7s linear infinite;
}

body.celebrating .light-beams-alt {
  animation: beam-spin 11s linear infinite reverse;
}

.light-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #fffaec 0%, #ff4fa066 38%, transparent 70%);
  opacity: 0;
}

body.celebrating .light-flash {
  animation: big-flash 4.6s ease-out;
}

body.celebrating .cabinet {
  animation: cabinet-glow 0.9s ease-in-out infinite;
}

body.celebrating .reel-window {
  box-shadow: inset 0 0 0 2px var(--he-pink-bright), 0 0 22px 6px var(--he-pink-bright);
}

body.celebrating .result.jackpot {
  animation: jackpot-pulse 0.7s ease-in-out infinite;
}

@keyframes beam-spin {
  to { transform: rotate(360deg); }
}

@keyframes big-flash {
  0% { opacity: 0; }
  4% { opacity: 0.9; }
  14% { opacity: 0.2; }
  24% { opacity: 0.75; }
  36% { opacity: 0.18; }
  48% { opacity: 0.6; }
  62% { opacity: 0.15; }
  76% { opacity: 0.45; }
  100% { opacity: 0; }
}

@keyframes cabinet-glow {
  0%, 100% { box-shadow: 0 0 50px #00000088; }
  50% { box-shadow: 0 0 90px 22px #ff4fa0cc, 0 0 50px #00000088; }
}

@keyframes jackpot-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 10px #ff4fa099; }
  50% { transform: scale(1.08); text-shadow: 0 0 26px var(--he-pink-bright), 0 0 46px var(--he-pink); }
}

@media (prefers-reduced-motion: reduce) {
  body.celebrating #celebration-lights { opacity: 0; }
  body.celebrating .cabinet,
  body.celebrating .result.jackpot { animation: none; }
}

/* ---------- Panel de debug ----------
   Deliberadamente fuera del lenguaje visual de marca (gris neutro, monoespaciado,
   sin magenta/dorado/blanco-de-marca) para que se lea como herramienta de
   desarrollo y no como parte del juego. Fixed en la esquina, así que no ocupa
   espacio en el flujo — no compite con el requisito de que el juego nunca
   necesite scroll. */
.debug-panel {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

.debug-toggle {
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #cfcfcf;
  background: #1a1a1acc;
  border: 1px solid #ffffff33;
  border-radius: 6px;
  cursor: pointer;
}

.debug-toggle:hover {
  background: #2a2a2acc;
}

.debug-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #1a1a1ae6;
  border: 1px solid #ffffff33;
  border-radius: 8px;
}

/* Sin esto, el atributo [hidden] no oculta nada: es un estilo del navegador
   (display:none) con la misma prioridad que un selector de clase, y como
   .debug-menu ya fija display:flex como estilo de autor, ese siempre gana
   por origen — el menú quedaba abierto para siempre pase lo que pase con
   el atributo. */
.debug-menu[hidden] {
  display: none;
}

.debug-btn {
  padding: 5px 10px;
  font-family: inherit;
  font-size: 0.72rem;
  color: #e6e6e6;
  background: #333;
  border: 1px solid #ffffff26;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

.debug-btn:hover:not(:disabled) {
  background: #464646;
}

.debug-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}