/* top6/css/top6.css
   Estilos del experimento Top 6 adaptados a MasterRoulette
   - No pisa el header/nav/footer del sitio
   - Usa tipografía del sitio (Inter/estilo.css)
*/

:root{
  --mr-bg: #f6f7f9;
  --mr-card: #ffffff;
  --mr-text: #111;
  --mr-muted: #666;
  --mr-border: rgba(0,0,0,.08);
  --mr-shadow: 0 10px 30px rgba(0,0,0,.06);
  --mr-radius: 16px;
}

/* OJO: no tocamos body global para no chocar con estilo.css */
.contenido{
  max-width: 980px;
  margin: 18px auto 40px;
  padding: 0 14px;
}

/* Barra interna del experimento */
.navbar{
  max-width: 980px;
  margin: 16px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  background: var(--mr-card);
  box-shadow: var(--mr-shadow);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.navbar .logo{
  font-weight: 700;
  color: var(--mr-text);
  font-size: 1.05rem;
}

.navbar .botonera{
  display:flex;
  align-items:center;
  gap: 10px;
}

.navbar .botonera a{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--mr-border);
  text-decoration:none;
  font-weight: 600;
  color: #b1144f; /* acento similar al sitio */
  background: rgba(233,30,99,0.08);
  transition: transform .08s ease, box-shadow .08s ease;
}

.navbar .botonera a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

/* Tarjeta principal del contenido del experimento */
.contenido{
  background: transparent;
}

/* Bloque del formulario y secciones, estilo “card” */
.contenido form,
.contenido > ul,
.contenido .ruleta,
.contenido .historial{
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow);
}

/* Form */
.contenido form{
  padding: 14px 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin: 14px 0;
}

.contenido form label{
  font-weight: 600;
  color: var(--mr-text);
}

.contenido form input[type="number"]{
  width: 140px;
  padding: 10px 12px;
  border: 1px solid var(--mr-border);
  border-radius: 12px;
  outline: none;
  font-size: 1rem;
  background: #fff;
}

.contenido form input[type="number"]:focus{
  box-shadow: 0 0 0 3px rgba(233,30,99,0.15);
  border-color: rgba(233,30,99,0.35);
}

.contenido form button{
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  background: rgba(233,30,99,0.12);
  color: #b1144f;
  border: 1px solid rgba(233,30,99,0.25);
  transition: transform .08s ease, box-shadow .08s ease;
}

.contenido form button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

/* Títulos */
.contenido h3{
  margin: 18px 0 10px;
  color: var(--mr-text);
  font-size: 1.05rem;
}

/* Lista de apuestas */
.contenido > ul{
  padding: 12px 16px;
  margin: 0;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Los “chips” de números */
.numero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f0f1f3;
  color: var(--mr-text);
  cursor: pointer;
  min-width: 52px;
  text-align: center;
  font-weight: 700;
  user-select: none;
  transition: transform .06s ease, filter .06s ease;
}

.numero:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
}

/* Colores de ruleta (suaves y legibles) */
.rojo{
  background: #d32f2f;
  border-color: rgba(0,0,0,.12);
  color: #fff;
}

.negro{
  background: #111;
  border-color: rgba(255,255,255,.10);
  color: #fff;
}

.verde{
  background: #1b7f4a;
  border-color: rgba(0,0,0,.12);
  color: #fff;
}

.gris{
  background: #eceff3;
  border-color: rgba(0,0,0,.06);
  color: #9aa0a6;
  cursor: default;
}

/* Historial */
.historial{
  padding: 12px 12px;
  display:flex;
  overflow-x: auto;
  gap: 8px;
  scroll-snap-type: x mandatory;
}

.historial .numero{
  scroll-snap-align: start;
  min-width: 44px;
}

/* Tablero de ruleta */
.ruleta{
  padding: 14px 14px;
  margin-top: 10px;
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:flex-start;
}

.columna-0{
  display:flex;
  flex-direction: column;
  align-items:center;
}

.columna{
  display:flex;
  flex-direction: column-reverse;
  gap: 6px;
}

/* Cuadros del tablero */
.ruleta .numero{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  line-height: 44px;
  font-size: 14px;
  padding: 0;
}

/* Bloques de info (fallos/tiros) */
.contenido > div[style*="font-size: 1.2em"]{
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow);
  padding: 12px 16px;
}

/* Link de reset abajo */
.contenido p a{
  color: #b1144f;
  font-weight: 700;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 520px){
  .navbar{
    flex-direction: column;
    align-items:flex-start;
  }

  .contenido form{
    flex-direction: column;
    align-items: stretch;
  }

  .contenido form input[type="number"]{
    width: 100%;
  }

  .ruleta{
    overflow-x: auto;
    justify-content:flex-start;
  }
}