/* Layout base */
body{
  background:#fff;
  font-family:'Montserrat',Arial,sans-serif;
  margin:0;
  color:#222;
}

/* Contenedor principal */
#ruleta-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;            /* ¡centra horizontal! */
  justify-content:flex-start;
  gap:20px;
  padding:24px 16px 40px;
  text-align:center;
}

/* Formulario centrado */
#ruleta-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:min(92vw, 360px);
  margin:0 auto;
  background:#f8f8f8;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
#ruleta-form input{
  width:100%;
  padding:10px 12px;
  font-size:16px;
  border:1px solid #cfcfcf;
  border-radius:8px;
  text-align:center;
  background:#fff;
}
#ruleta-form button{
  width:100%;
  padding:11px 16px;
  background:#287cb3;
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
}
.ruleta-error{ color:#b42c43; font-weight:700; }

/* Contenedor de la ruleta */
.ruleta-canvas-wrap{
  position:relative;
  width:min(92vw, 560px);
  margin:8px auto 0;
}

/* Canvas 100% circular */
#ruleta-wheel{
  width:100%;
  aspect-ratio:1/1;          /* círculo perfecto */
  display:block;
  border-radius:50%;
  background:transparent;
}

/* Indicador superior */
#ruleta-pointer{
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%) rotate(180deg);
  width:0; height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:36px solid #76008f;
  z-index:5;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

/* Logo único centrado sobre el canvas */
#ruleta-logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:25%;
  height:auto;
  z-index:3;
  pointer-events:none;
}

/* Resultado */
#ruleta-result{
  margin-top:12px;
  font-weight:900;
  font-size:20px;
  color:#28a745;
}

/* Responsive */
@media (max-width:520px){
  #ruleta-pointer{
    top:-24px;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-bottom:32px solid #76008f;
  }
  #ruleta-logo{ width:32%; }
}