body{
    background:#151515;
    color:white;
    font-family:Arial,sans-serif;
}
.ruleta-bg{
    min-height:100vh;
    background: radial-gradient(circle at top left, rgba(255,193,7,.22), transparent 30%),
                linear-gradient(135deg,#101010,#250000 55%,#050505);
}
.logo-ruleta{
    font-weight:900;
    color:#ffcc00;
    letter-spacing:.5px;
    text-shadow:0 0 14px rgba(255,204,0,.25);
}
.logo-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffcc00,#ff6b00);
    color:#111;
    box-shadow:0 0 18px rgba(255,204,0,.4);
    margin-right:8px;
}
.sidebar{
    background:rgba(0,0,0,.45);
    min-height:100vh;
    border-right:1px solid rgba(255,255,255,.08);
}
.menu-link{
    display:block;
    padding:11px 14px;
    border-radius:12px;
    color:#fff;
    text-decoration:none;
    margin-bottom:8px;
    background:rgba(255,255,255,.06);
}
.menu-link:hover,.menu-link.active{
    background:#ffc107;
    color:#111;
    font-weight:700;
}
.num-box,.cell{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    border-radius:6px;
    color:white;
    margin:2px;
    float:left;
    position:relative;
}
.rojo{background:#c40000;}
.negro{background:#000;}
.verde{background:#008c17;}
.frio{border:3px solid yellow;}
.borde-azul{border:3px solid blue; box-shadow:0 0 8px blue;}
.borde-verde{border:3px solid green; box-shadow:0 0 8px green;}
.tablero{overflow:hidden; width:max-content; margin:auto; position:relative;}
.fila{overflow:hidden;}
.cero{
    height: calc(46px * 3 + 4px);
    margin-right:6px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.contador{
    position:absolute;
    bottom:2px;
    right:4px;
    font-size:10px;
    color:#ffff66;
}
.clear{clear:both;}
.ficha{
    width:28px;
    height:28px;
    font-size:10px;
    border-radius:50%;
    background:yellow;
    position:absolute;
    transform:translate(-50%, -50%);
    color:black;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 6px rgba(0,0,0,.5);
    border:2px solid #000;
}
.ficha-extra{
    background:#ffea00 !important;
    border:3px solid #fff !important;
    box-shadow:0 0 12px #ffea00;
}
.hist-marcado{
    border:3px solid #ffd700 !important;
    box-shadow:0 0 6px #ffd700;
}
.hist-win{
    background:#0aa84f !important;
    border:3px solid #00ff6a !important;
    box-shadow:0 0 8px rgba(0,255,106,.45) !important;
}
.hist-win-extra{
    background:#ffdf00 !important;
    color:#000 !important;
    border:4px solid #fff200 !important;
    box-shadow:0 0 14px #fff200 !important;
}
.hist-sad{
    position:absolute;
    bottom:2px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;
    line-height:1;
    opacity:.9;
}
.hist-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.stats-wrap{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.stats-box{
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.15);
    padding:8px 12px;
    border-radius:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.stats-box span{
    background:rgba(255,255,255,.12);
    padding:2px 8px;
    border-radius:8px;
    font-weight:800;
}
.lila-num{
    color:#c77dff !important;
    text-shadow: 0 0 6px rgba(199,125,255,.85);
}
#clickZone{
    height:38px;
    margin-top:-14px;
    cursor:pointer;
    background:transparent;
    position:relative;
}
.info-mini{
    font-size:13px;
    color:#fff9b0;
}
.switch-menor-box{
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    font-weight:700;
    min-height:48px;
}
.switch-menor-box label{
    cursor:pointer;
    user-select:none;
}
@media(max-width:768px){
    .sidebar{min-height:auto;}
    .tablero{transform:scale(.74); transform-origin:left; margin-bottom:-20px;}
    .num-box,.cell{width:42px;height:42px;}
    .cero{height: calc(42px * 3 + 4px);}
}


/* Landing V2 */
.hero-main{
    position:relative;
    overflow:hidden;
    padding:90px 0;
}
.hero-main:before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,193,7,.28),transparent 68%);
    top:-120px;
    right:-80px;
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,193,7,.12);
    color:#ffda6a;
    border:1px solid rgba(255,193,7,.35);
    border-radius:999px;
    padding:8px 14px;
    font-weight:700;
}
.btn-pulse{
    animation:pulseGold 1.4s infinite;
    box-shadow:0 0 0 rgba(255,193,7,.7);
}
@keyframes pulseGold{
    0%{box-shadow:0 0 0 0 rgba(255,193,7,.7);}
    70%{box-shadow:0 0 0 16px rgba(255,193,7,0);}
    100%{box-shadow:0 0 0 0 rgba(255,193,7,0);}
}
.feature-card{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    padding:24px;
    height:100%;
}
.video-box{
    background:#050505;
    border:1px solid rgba(255,193,7,.35);
    border-radius:24px;
    min-height:315px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.video-box .play{
    width:86px;
    height:86px;
    border-radius:50%;
    background:#ffc107;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    padding-left:5px;
}
.testimonial{
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:22px;
    height:100%;
}
.warning-game{
    background:rgba(255,193,7,.12);
    border:1px solid rgba(255,193,7,.4);
    border-radius:18px;
    padding:18px;
}
.tiros-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:999px;
    background:rgba(255,193,7,.12);
    border:1px solid rgba(255,193,7,.35);
    margin-top:8px;
}
.tiros-pill .num{
    background:#ffc107;
    color:#111;
    border-radius:999px;
    padding:4px 10px;
    font-weight:900;
    min-width:60px;
    text-align:center;
}
.admin-search{
    max-width:420px;
}
.small-logo-icon{
    width:42px;
    height:42px;
    object-fit:contain;
}