/* ========= Encapsulado ========= */
.ruleta-gocho {}

/* Colores de marca */
:root {
  --wood:#6a2818;
  --wood-2:#8c3922;
  --accent:#ffdb4f;
  --accent-dark:#e6c94a;
}
h1.font-1 {
        color: black;
    padding-top: 0px !important;
    margin-bottom: 30px !important;
    font-family: 'Hartwell Bold', sans-serif;
}

/* -------- Top controls (TV friendly) -------- */
.ruleta-gocho .rg-top-controls .rg-label{
  color:var(--wood); font-weight:800; text-transform:uppercase; color: black !important;
}
.ruleta-gocho .rg-top-controls .rg-help{ color:#6a2818; opacity:.7; font-weight:600; }
.ruleta-gocho .rg-top-controls .form-control-lg{
  font-size:1.4rem; padding:.75rem 1rem;
}

/* -------- Stage / reels -------- */

.ruleta-gocho .rg-reels-wrap{
  padding:1.25rem; margin-inline:auto;
  border-radius:1rem;
  background: radial-gradient(ellipse at 50% 40%, #fff, #fff9dd 55%, #f5e39b 100%);
  width:min(100%, 920px);
}
.ruleta-gocho .rg-reels{ display:flex; gap:.75rem; justify-content:center; align-items:stretch; }
.ruleta-gocho .rg-reel{
  width:120px; overflow:hidden; border:4px solid var(--wood); border-radius:.6rem; background:#fff;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.06);
}
.ruleta-gocho .rg-track{ transition:transform 4s ease; will-change:transform; }
.ruleta-gocho .rg-cell{
  height:110px; display:flex; align-items:center; justify-content:center;
  font:900 3.2rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--wood);
  text-shadow:1px 1px 0 #fff, 2px 2px 4px rgba(0,0,0,.2);
}
@media (max-width: 992px){
  .ruleta-gocho .rg-reel{ width:92px; }
  .ruleta-gocho .rg-cell{ height:92px; font-size:2.6rem; }
}
@media (max-width: 576px){
  .ruleta-gocho .rg-reel{ width:72px; }
  .ruleta-gocho .rg-cell{ height:72px; font-size:2.2rem; }
}

/* Brillos */
.ruleta-gocho .rg-top-gloss{
  position:absolute; left:0; right:0; top:0; height:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));
  pointer-events:none;
}
.ruleta-gocho .rg-bottom-shadow{
  position:absolute; left:0; right:0; bottom:0; height:28px;
  background:linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,0));
  pointer-events:none;
}

/* -------- Bingo ball -------- */
.ruleta-gocho .rg-bingo{ display:flex; justify-content:center; }
.ruleta-gocho .rg-ball{
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fff 35%, var(--accent) 36%, var(--accent-dark) 100%);
  border:8px solid var(--wood);
  display:flex; align-items:center; justify-content:center;
  font:900 3.4rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--wood);
  box-shadow: 0 0 0 6px rgba(255,255,255,.5) inset, 0 14px 30px rgba(0,0,0,.35);
}
.ruleta-gocho .rg-ball.pop{ animation:rg-pop .6s ease; }
@keyframes rg-pop{ 0%{transform:scale(1);} 50%{transform:scale(1.18);} 100%{transform:scale(1);} }

/* -------- Historial -------- */
.ruleta-gocho .rg-history-card{ border:4px solid var(--wood); border-radius:1rem; overflow:hidden; }
.ruleta-gocho .rg-history-title{
  background:#ffdb4f; color:black;
  font-weight:900; text-transform:uppercase;
}
.card-header {
    border-bottom: 0px !important;
}
.ruleta-gocho .rg-history{
  max-height:520px; overflow:auto; background:#fff;
}
.ruleta-gocho .rg-history .list-group-item{
  font-size:2rem; color:black !important;
}

/* -------- Botones grandes -------- */
.ruleta-gocho .btn-xxl{
  font-size:1.2rem; padding:0.7rem 2rem; 
}
.ruleta-gocho .btn-primary{
  background:black !important; border-color:var(--wood); color:white !important;
}
.ruleta-gocho .btn-primary:hover{ background:var(--wood-2); border-color:var(--wood-2); }
.ruleta-gocho .btn-outline-secondary{ color:var(--wood); border-color:var(--wood); }
.ruleta-gocho .btn-outline-secondary:hover{ background:var(--wood); color:var(--accent); }
/* ===== Overlay ganador ===== */
.ruleta-gocho .rg-overlay{
  position:fixed; inset:0; display:none; z-index:1050;
}
.ruleta-gocho .rg-overlay.show{ display:block; }
.ruleta-gocho .rg-overlay-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.85);
}
.ruleta-gocho .rg-overlay-content{
  position:absolute; inset:0; display:grid; place-items:center; padding:1rem;
}
.ruleta-gocho .rg-overlay-inner{
  text-align:center; color:#fff;
  transform:translateY(20px); animation:rg-fadeup .35s ease forwards;
}
.ruleta-gocho .rg-overlay-title{
  font:800 2rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; margin-bottom:1rem; letter-spacing:.04em;
}
@keyframes rg-fadeup{ to{ transform:translateY(0); opacity:1; } }

/* Bola gigante en overlay + entrada */
.ruleta-gocho .rg-overlay-ball-wrap{ display:flex; justify-content:center; }
.ruleta-gocho .rg-overlay-ball{
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fff 35%, var(--accent) 36%, var(--accent-dark) 100%);
  border:10px solid var(--wood);
  display:flex; align-items:center; justify-content:center;
  font:900 5rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--wood);
  box-shadow: 0 0 0 8px rgba(255,255,255,.45) inset, 0 20px 40px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-40px) scale(.9);
}
.ruleta-gocho .rg-overlay-ball.enter{
  animation: rg-ball-in .65s cubic-bezier(.2,.9,.2,1.2) forwards;
}
@keyframes rg-ball-in{
  0%{ opacity:0; transform:translateY(-60px) scale(.85); }
  60%{ opacity:1; transform:translateY(10px) scale(1.05); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===== Palanca (lever) ===== */
.ruleta-gocho .rg-lever{
  position:relative; width:80px; height:220px; margin:0 4px;
  cursor:pointer; outline:none;
}
.ruleta-gocho .rg-lever-base{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:70px; height:38px; border-radius:10px;
  background:linear-gradient(180deg,#7a2f1e,#5a2317);
  border:3px solid var(--wood);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.15);
}
.ruleta-gocho .rg-lever-arm{
  position:absolute; bottom:36px; left:50%; transform-origin:bottom center; transform:translateX(-50%) rotate(-8deg);
  width:16px; height:140px; background:linear-gradient(90deg,#d8bfb1,#8b5a3c,#d8bfb1);
  border:2px solid #5c3a28; border-radius:8px;
  transition:transform .25s ease;
}
.ruleta-gocho .rg-lever-knob{
  position:absolute; bottom:170px; left:50%; transform:translateX(-50%);
  width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #fff 35%, var(--accent) 36%, var(--accent-dark) 100%);
  border:4px solid var(--wood); box-shadow:0 10px 16px rgba(0,0,0,.25);
  transition:transform .25s ease;
}
.ruleta-gocho .rg-lever.pull .rg-lever-arm{ transform:translateX(-50%) rotate(24deg); }
.ruleta-gocho .rg-lever.pull .rg-lever-knob{ transform:translateX(-50%) translateY(12px); }

/* Botón grande coherente (ya estaba, reforzamos) */
.ruleta-gocho .btn-xxl{ font-size:1.2rem; padding:0.7rem 2rem; }
/* ===== Overlay base (ya existía, reforzamos) ===== */
.ruleta-gocho .rg-overlay{ position:fixed; inset:0; display:none; z-index:1050; }
.ruleta-gocho .rg-overlay.show{ display:block; }
.ruleta-gocho .rg-overlay-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.85); }
.ruleta-gocho .rg-overlay-content{ position:absolute; inset:0; display:grid; place-items:center; padding:1rem; }

/* Canvas de confeti ocupa todo el overlay */
.ruleta-gocho .rg-confetti{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* Caja central y bola (ya definida antes; mantenemos) */
.ruleta-gocho .rg-overlay-inner{ text-align:center; color:#fff; transform:translateY(20px); animation:rg-fadeup .35s ease forwards; }
.ruleta-gocho .rg-overlay-title{ font:800 2rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; margin-bottom:1rem; letter-spacing:.04em; }
@keyframes rg-fadeup{ to{ transform:translateY(0); opacity:1; } }

.ruleta-gocho .rg-overlay-ball-wrap{ display:flex; justify-content:center; }
.ruleta-gocho .rg-overlay-ball{
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fff 35%, var(--accent) 36%, var(--accent-dark) 100%);
  border:10px solid var(--wood);
  display:flex; align-items:center; justify-content:center;
  font:900 5rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--wood);
  box-shadow: 0 0 0 8px rgba(255,255,255,.45) inset, 0 20px 40px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-40px) scale(.9);
}
.ruleta-gocho .rg-overlay-ball.enter{ animation: rg-ball-in .65s cubic-bezier(.2,.9,.2,1.2) forwards; }
@keyframes rg-ball-in{
  0%{ opacity:0; transform:translateY(-60px) scale(.85); }
  60%{ opacity:1; transform:translateY(10px) scale(1.05); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.visibility-hidden {
   display:none;
}
div.tambor {
   padding: 0px !important; 
   height: 143px;
}
div.card {
    background: transparent !important;
    box-shadow: inherit !important;
}
button.btn-secondary {
    background: #ffdb4f !important;
    color: black !important;
}
.footer-winners-tambor {
    background: #6a2818 !important;
}
.footer-winners-tambor .btn{
    background: white !important;
    color: black !important;
    font-weight: 700 !important;
    border: 0px !important;
}
@media (max-width: 767px){
    div.tambor {
        height: 118px !important;
    }
}
@media (max-width: 431px){
    div.tambor {
        height: 105px !important;
    }
    .buttons-tambor button{
        width: 100% !important;
    }
    .buttons-tambor .btn-primary {
        margin-bottom: 15px !important;
    }
}