/* ===== PLACEHOLDERS DE MARCA — reemplazar cuando lleguen los assets definitivos =====
   - Tipografía: cambiar el @import de Google Fonts de abajo por @font-face con la
     fuente real (o dejar el import de Google Fonts si la tipografía está ahí).
   - Colores de los sectores: ver PLACEHOLDER_COLORS en wheel.js (son los hex de marca).
   - Logo central: reemplazar public_html/assets/logo-placeholder.svg por el PNG real
     y actualizar el src en index.html.
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

:root{
  --brand-font: 'Poppins', system-ui, Arial, sans-serif;
  --marquee-bg: rgba(10, 10, 15, 0.82);
  --marquee-fg: #ffffff;
  --marquee-border: #F4B908; /* marca */
  --pointer-color: #F4B908;  /* marca */
}

*{box-sizing:border-box}
html,body{
  margin:0;
  height:100%;
  background:transparent; /* fondo transparente para usar como overlay/OBS */
  font-family:var(--brand-font);
  color:var(--marquee-fg);
  overflow:hidden;
}

.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  height:100vh;
  padding:20px;
}

/* "Cartelito"/marquesina con el nombre que va pasando y el ganador final */
.marquee{
  background:var(--marquee-bg);
  border:3px solid var(--marquee-border);
  border-radius:14px;
  padding:14px 38px;
  min-width:320px;
  max-width:90vw;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.marquee span{
  display:inline-block;
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:70vw;
}
.marquee.winner{
  border-color:#2ecc71;
}
.marquee.winner span{
  color:#2ecc71;
}

.wheel-wrap{
  position:relative;
  width:min(640px, 80vw);
  height:min(640px, 80vw);
  display:flex;
  align-items:center;
  justify-content:center;
}
#wheel{
  width:100%;
  height:100%;
  display:block;
}

/* Flecha fija que marca el ganador (arriba de la ruleta) */
.pointer{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-top:38px solid var(--pointer-color);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  z-index:3;
}

.hub{
  position:absolute;
  width:22%;
  height:22%;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 4px rgba(255,255,255,.85), 0 4px 14px rgba(0,0,0,.5);
  background:#fff;
  z-index:2;
}
.hub img{
  width:88%;
  height:88%;
  object-fit:contain;
}