/* ================================================
   RARE BEAUTY — styles.css
   Target: tablet landscape (1024 × 768)
   ================================================ */

/* ── @font-face ──────────────────────────────── */
@font-face {
  font-family: 'NeueHaasUnica';
  src: url('./fonts/NeueHaasUnicaPro-Regular.woff2') format('woff2'),
       url('./fonts/NeueHaasUnicaPro-Regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueHaasUnica';
  src: url('./fonts/NeueHaasUnicaPro-Medium.woff2') format('woff2'),
       url('./fonts/NeueHaasUnicaPro-Medium.woff')  format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueHaasUnica';
  src: url('./fonts/NeueHaasUnicaPro-Bold.woff2') format('woff2'),
       url('./fonts/NeueHaasUnicaPro-Bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ogg';
  src: url('./fonts/Ogg-Roman.woff2') format('woff2'),
       url('./fonts/Ogg-Roman.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Clases tipográficas ─────────────────────────
   .font-ogg            → Ogg Roman      — títulos, display
   .font-unica-regular  → Unica 400      — cuerpo, mensajes
   .font-unica-medium   → Unica 500      — etiquetas, nav
   .font-unica-bold     → Unica 700      — botones, énfasis
──────────────────────────────────────────────── */
.font-ogg            { font-family: 'Ogg', Georgia, serif;              font-weight: 400; }
.font-unica-regular  { font-family: 'NeueHaasUnica', Helvetica, sans-serif; font-weight: 400; }
.font-unica-medium   { font-family: 'NeueHaasUnica', Helvetica, sans-serif; font-weight: 400; }
.font-unica-bold     { font-family: 'NeueHaasUnica', Helvetica, sans-serif; font-weight: 800; }

/* ── Variables ───────────────────────────────── */
:root {
  --color-bg:       #efe4dd;
  --color-text:     #852c4d;
  --color-text-mid: #852c4d;
  --color-border:   #852c4d;
  --color-surface:  rgba(255, 255, 255, 0.0);

  --font-display: 'Ogg', Georgia, serif;
  --font-body:    'NeueHaasUnica', Helvetica, sans-serif;

  --header-h: 130px;
  --footer-h: 180px;
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ────────────────────────────────────── */
html {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #efe4dd;
}
body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ── Grid principal ──────────────────────────── */
.page {
  width: 100%; height: 100%;
  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  grid-template-areas: "header" "main" "footer";
}

/* ═══════════════════════════════════════════════
   CABECERA
═══════════════════════════════════════════════ */
.site-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 28px;
}
.brand-logo {
  max-width: 475px;
}
.lang-switcher {
  position: absolute;
  right: 28px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  /* JS añade .hidden para ocultarlos durante el juego */
  transition: opacity 0.3s;
}
.lang-switcher.hidden {
  opacity: 0;
  pointer-events: none;
}
.lang-btn {
  background: transparent;
  border: 1px solid var(--color-text);
  border-radius: 15px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.65rem;
  text-align: center;
  padding: 1px 12px 2px 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lang-btn--active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* ═══════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════ */
.main-content {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px 0 40px;
  overflow: hidden;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

/* ── Hero image ──────────────────────────────── */
.hero-image-wrap {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 1250px;
    cursor: pointer;
  /* JS añade .hidden para ocultar completamente */
  transition: opacity 0.3s;
}
.hero-image-wrap.hidden {
  display: none;
}
.hero-image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  display: block;
}

/* ═══════════════════════════════════════════════
   SLOT SECTION
═══════════════════════════════════════════════ */
.slot-section {
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.slot-section.is-visible {
  display: flex;
}

/* Texto encima de los rodillos */
.slot-topbar {
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--color-text);
  text-align: center;
  text-transform: uppercase;
}

/* ── Rodillos — scroll vertical ──────────────── */
.reels-wrap {
  display: flex;
  gap: 20px;
  align-items: stretch;
  justify-content: center;
}

.reel {
  width:  310px;
  height: 370px;
  background: var(--color-bg);
  border: 4px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

/* Fade top/bottom para sensación de profundidad */
.reel::before,
.reel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  z-index: 2;
  pointer-events: none;
}


/* Tira vertical generada por JS */
.reel-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Cada celda ocupa exactamente el alto del reel */
.reel-cell {
  width: 100%;
  height: 370px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  padding: 20px;
  line-height: 1.3;
}

.reel-cell img {
  width: auto;
  height: 85%;
  max-width: 85%;
  object-fit: contain;
  display: block;
}

/* Transición de frenado — arranca a la velocidad del giro y desacelera */
.reel-strip.stopping {
  transition: transform 1.4s cubic-bezier(0, 0.72, 0.3, 1);
}



/* Botón SPIN — siempre presente en main */
.spin-trigger {
  background: var(--color-text);
  border: none;
  border-radius: 40px;
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
  padding: 14px 52px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  flex-shrink: 0;    /* no se encoge cuando hay rodillos */
  margin-top: 20px;
}
.spin-trigger:hover   { opacity: 0.85; transform: translateY(-1px); }
.spin-trigger:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.spin-trigger.hidden  { visibility: hidden; pointer-events: none; }

/* ═══════════════════════════════════════════════
   FOOTER — zona de mensajes rica en HTML
═══════════════════════════════════════════════ */
.message-bar {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

/* Bloque genérico .ft — contenedor de cada template */
.ft {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: ft-in 0.35s ease both;
}
@keyframes ft-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Línea 1: etiqueta pequeña caps (ej. "N E W") */
.ft-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 2rem;
  color: var(--color-text);
  text-transform: uppercase;
}

/* Línea 2: título grande en Ogg */
.ft-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.55rem;
  color: var(--color-text);
  line-height: 1.2;
}

/* Línea 3: subtítulo Unica Bold caps espaciado */
.ft-subtitle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  text-transform: uppercase;
}

/* Línea 4: pill — texto con borde redondeado (NO es botón) */
.ft-pill {
  display: inline-block;
  border: 1px solid var(--color-text);
  border-radius: 50px;
  padding: 4px 18px 5px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--color-text);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Variante ganador: destaca la pill */
.ft-win .ft-pill {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Ajustes fuentes templates */
#messageBar .ft-play .ft-label {
  margin-top: -30px;
}

#messageBar .ft-play .ft-label {
  font-size: 1.5rem;
}

#messageBar .ft-play .ft-title {
  font-size: 2rem;
}

#messageBar .ft-lose {
  margin-top: -75px;;
}

#messageBar .ft-lose .ft-label {
  font-size: 1.1rem;
  margin-bottom: 30px;
}

#messageBar .ft-lose .ft-subtitle {
   margin-bottom: 15px;
}

#messageBar .ft-win {
  margin-top: -100px;;
}

#messageBar .ft-win .ft-label {
  font-size: 4rem;
  font-weight: 800;
}

#messageBar .ft-win .ft-subtitle {
   font-size: 2rem;
   margin-bottom: 10px;
}