/* ===================== JUEGA GRATIS · Banco del Lobo ===================== */
body.g-bloqueo { overflow: hidden; }
.g-moneda { width: 22px; height: 22px; vertical-align: -5px; }

/* ---- Botones ---- */
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 10px; border: 0; cursor: pointer;
  font: 700 15px 'Montserrat', sans-serif; color: #fff; text-decoration: none; transition: transform .2s ease, filter .2s ease, opacity .2s; }
.g-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.g-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.g-btn-rojo { background: linear-gradient(135deg, #F01636, #FF2147); box-shadow: 0 0 22px rgba(255,33,71,.4); }
.g-btn-borde { background: rgba(2,13,38,.4); border: 1.5px solid rgba(255,255,255,.35); }
.g-btn-oro { background: linear-gradient(180deg, #ffd76a, #F5B82E 55%, #d48d0c); color: #2a1600; box-shadow: 0 6px 0 #9b6200, 0 10px 26px rgba(245,184,46,.35); }
.g-btn-oro:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #9b6200; }
.g-btn-block { width: 100%; }
.g-link { background: none; border: 0; color: var(--gris-2); font: 600 13px 'Montserrat', sans-serif; cursor: pointer; padding: 6px; }
.g-link:hover { color: #fff; }
.g-link:disabled { opacity: .4; }

.g-pill { display: inline-block; padding: 8px 16px; border: 1.5px solid rgba(245,184,46,.7); border-radius: 30px; background: rgba(2,13,38,.55);
  color: var(--dorado); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.g-pill-rojo { border-color: rgba(255,33,71,.7); color: #ff6a84; }

/* ---- Barra de saldo ---- */
.g-barra { position: sticky; top: 100px; z-index: 50; background: rgba(6,26,58,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.g-barra-in { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 50px; }
.g-barra-etq { color: var(--gris-2); font-size: 13px; font-weight: 600; }
.g-saldo { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 30px; background: rgba(245,184,46,.12); border: 1px solid rgba(245,184,46,.45); color: #ffd76a; font-weight: 800; }
.g-saldo b { font-size: 16px; min-width: 2ch; }
.g-saldo.pulso { animation: gPulso .6s ease; }
@keyframes gPulso { 40% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(245,184,46,.25); } }
.g-barra-btn { padding: 7px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }

/* ---- Hero + banco ---- */
.g-hero { position: relative; overflow: hidden; padding: 64px 0 56px;
  background: radial-gradient(700px 420px at 78% 40%, rgba(245,184,46,.16), transparent 65%), radial-gradient(800px 500px at 10% 0%, rgba(22,139,255,.14), transparent 60%); }
.g-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.g-hero .h-titulo { font-size: clamp(36px, 4.6vw, 64px); line-height: .98; }
.g-sub { color: var(--gris); font-size: 17px; line-height: 1.65; margin: 18px 0 28px; max-width: 560px; }
.g-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.g-banco { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 380px; }
.g-banco-lobo { position: absolute; left: 0; bottom: -10px; height: 370px; width: auto; z-index: 2; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); pointer-events: none; }
.g-banco-caja { position: relative; z-index: 1; width: min(380px, 100%); margin-left: 215px; padding: 24px; border-radius: 22px;
  background: linear-gradient(180deg, #0d3270, #061a3a); border: 1.5px solid rgba(245,184,46,.5); box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.g-banco-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.g-banco-tit { white-space: nowrap; font-family: "Anton", sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: .5px; color: #ffd76a; }
.g-banco-tag { white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: rgba(34,199,122,.16); color: #6ff0b2; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.g-banco-saldo { padding: 10px 16px; border-radius: 14px; background: rgba(2,13,38,.55); border: 1px solid var(--borde); margin-bottom: 14px; text-align: center; }
.g-banco-saldo small { display: block; color: var(--gris-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.g-banco-saldo div { font-size: 30px; font-weight: 900; color: #fff; }
.g-banco-saldo .g-moneda { width: 34px; height: 34px; vertical-align: -6px; }
.g-banco-info { margin-top: 14px; color: var(--gris-2); font-size: 13px; line-height: 1.5; text-align: center; }
.g-lluvia { position: absolute; top: 20%; width: 34px; height: 34px; z-index: 3; pointer-events: none; animation: gLluvia 1.5s cubic-bezier(.3,.1,.6,1) both; }
@keyframes gLluvia { 0% { transform: translateY(-120px) rotate(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(260px) rotate(540deg) scale(1); opacity: 0; } }

/* ---- Secciones ---- */
.g-seccion { padding: 56px 0; }
.g-cab { margin-bottom: 28px; }
.g-cab p { color: var(--gris-2); margin-top: 8px; }

.g-juegos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.g-juegos > .g-juego { flex: 0 1 calc((100% - 80px) / 5); min-width: 0; }
.g-juego { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--borde); border-radius: 20px; overflow: hidden; cursor: pointer; color: #fff; font-family: inherit;
  background: linear-gradient(180deg, #0a2a5a, #061a3a); box-shadow: 0 20px 50px rgba(0,0,0,.35); transition: transform .25s ease, border-color .25s ease; }
.g-juego:hover { transform: translateY(-6px); border-color: rgba(240,22,54,.55); }
.g-juego-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.g-juego-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.g-juego:hover .g-juego-img img { transform: scale(1.05); }
.g-juego-tag { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 8px; background: #22C77A; color: #03231a; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.g-juego-cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.g-juego-cuerpo h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.g-juego-cuerpo p { color: var(--gris); font-size: 14.5px; line-height: 1.55; flex: 1; margin-bottom: 18px; }
.g-juego-cuerpo .g-btn { align-self: flex-start; padding: 12px 22px; }

.g-juego-loto { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1e3d78, #061a3a 75%); }
.g-mini-loto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; width: 46%; background: #1a1a1a; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); transform: rotate(-4deg); }
.g-mini-loto i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; font: 900 clamp(11px, 1.3vw, 17px) 'Montserrat', sans-serif; color: #1a1a1a; font-style: normal; }
.c-y { background: #FFE600; } .c-p { background: #E0158C; } .c-g { background: #7DC21E; } .c-b { background: #0B7BD6; }

/* ---- Bingos ---- */
.g-bingos { background: linear-gradient(180deg, transparent, rgba(240,22,54,.06) 30%, rgba(22,139,255,.06) 80%, transparent); }
.g-bingos-cab { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; margin-bottom: 34px; }
.g-bingos-logo { width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(180,60,255,.35)); }
.g-bingos-cab p { color: var(--gris); font-size: 16px; line-height: 1.6; margin-top: 12px; max-width: 720px; }
.g-bingos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.g-bingo { border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #0a2a5a, #061a3a); border: 1px solid var(--borde); display: flex; flex-direction: column; }
.g-bingo-vis { height: 190px; display: grid; place-items: center; position: relative; overflow: hidden; }
.g-bingo-cuerpo { padding: 20px 22px 24px; }
.g-bingo h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.g-bingo p { color: var(--gris); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
.g-bingo ul { list-style: none; display: grid; gap: 6px; }
.g-bingo li { position: relative; padding-left: 24px; font-size: 14px; font-weight: 600; }
.g-bingo li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: rgba(34,199,122,.18); color: #22C77A; font-size: 11px; display: grid; place-items: center; }

.g-vis-clasico { background: radial-gradient(circle at 50% 30%, #2a1060, #0b0a2e 80%); }
.g-carton75 { display: grid; grid-template-columns: repeat(5, 30px); gap: 3px; padding: 8px; border-radius: 10px; background: #fff; transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.g-carton75 b { height: 22px; display: grid; place-items: center; border-radius: 4px; background: #E0158C; color: #fff; font-size: 13px; }
.g-carton75 b:nth-child(2) { background: #0B7BD6; } .g-carton75 b:nth-child(3) { background: #F01636; } .g-carton75 b:nth-child(4) { background: #7DC21E; } .g-carton75 b:nth-child(5) { background: #F5B82E; }
.g-carton75 i { height: 24px; display: grid; place-items: center; border-radius: 4px; background: #eef2fb; color: #14204a; font: 800 12px 'Montserrat', sans-serif; }
.g-carton75 i.m { background: radial-gradient(circle, #F01636 55%, #b30020 56%); color: #fff; }

.g-vis-rapido { background: radial-gradient(circle at 50% 50%, #5a0b2a, #12051e 80%); }
.g-bolas { display: flex; gap: 8px; }
.g-bolas span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 900 13px/1.05 'Montserrat', sans-serif; color: #14204a;
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, transparent 31%), var(--c); box-shadow: inset 0 -6px 10px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.4); animation: gBota 1.4s ease-in-out infinite; }
.g-bolas .b1 { --c: #0B7BD6; } .g-bolas .b2 { --c: #F01636; animation-delay: .1s; } .g-bolas .b3 { --c: #ddd; animation-delay: .2s; } .g-bolas .b4 { --c: #7DC21E; animation-delay: .3s; } .g-bolas .b5 { --c: #F5B82E; animation-delay: .4s; }
@keyframes gBota { 50% { transform: translateY(-10px); } }
.g-rayo { position: absolute; bottom: 18px; font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 2px; color: #ffd76a; text-shadow: 0 0 14px rgba(255,201,74,.7); }

.g-vis-loto { background: url('/bingo/assets/img/fondo-loto.webp') 55% 35% / cover; }
.g-vis-loto::before { content: ''; position: absolute; inset: 0; background: rgba(2,13,38,.45); }
.g-mini-loto-g { position: relative; width: 150px; transform: rotate(3deg); }
.g-mini-loto-g i.f { box-shadow: 0 0 0 2px #fff, 0 0 12px #ffd700; }

.g-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding: 28px 32px; border-radius: 20px;
  background: linear-gradient(120deg, #b3122e, #F01636 45%, #7a0b3d); box-shadow: 0 20px 50px rgba(240,22,54,.3); }
.g-cta h3 { font-family: 'Anton', sans-serif; font-size: 30px; text-transform: uppercase; letter-spacing: .5px; }
.g-cta p { color: #ffe1e6; margin-top: 4px; }
.g-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.g-cta .g-btn-rojo { background: #fff; color: #c0102c; box-shadow: none; }

/* ---- Pasos ---- */
.g-pasos { padding-top: 10px; }
.g-pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-paso { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--borde); }
.g-paso span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rojo); font-weight: 900; margin-bottom: 12px; }
.g-paso h4 { font-size: 17px; margin-bottom: 6px; }
.g-paso p { color: var(--gris-2); font-size: 14px; line-height: 1.5; }

.g-aviso { margin: 10px 0 40px; padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.18); color: var(--gris-2); font-size: 13px; line-height: 1.6; text-align: center; }
.h-footer a { color: var(--gris); }

/* ===================== Ventana del juego ===================== */
.g-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(1,6,20,.82); backdrop-filter: blur(6px); }
.g-modal-caja { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 22px;
  background: linear-gradient(180deg, #0b2b5e, #04122c); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.g-modal-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g-modal-cab h3 { flex: 1; font-family: 'Anton', sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: .5px; }
.g-saldo-mini b { font-size: 15px; }
.g-sonido, .g-cerrar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.g-sonido.apagado { opacity: .6; }
.g-cerrar { font-size: 26px; line-height: 1; }
.g-cerrar.oculto { visibility: hidden; }
.g-etq { display: block; color: var(--gris-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }

.g-msg { margin: 16px 0; padding: 12px 16px; border-radius: 12px; text-align: center; font-weight: 700; background: rgba(2,13,38,.7); border: 1px solid var(--borde); min-height: 48px; }
.g-msg.gano { background: rgba(10,70,40,.85); border-color: rgba(34,199,122,.7); color: #8dffc6; animation: gPulso .6s ease; }
.g-msg.perdio { color: #c9d3ec; }
.g-controles { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.g-fichas { display: flex; gap: 8px; }
.g-ficha { width: 54px; height: 54px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.5); cursor: pointer; font: 900 15px 'Montserrat', sans-serif; color: #fff;
  background: radial-gradient(circle, #1e4a92 55%, #0d2a5c 56%); box-shadow: 0 4px 0 #061a3a; transition: transform .15s; }
.g-ficha.activa { background: radial-gradient(circle, #F01636 55%, #a50a24 56%); border-color: #fff; transform: translateY(-3px); box-shadow: 0 7px 0 #61061a, 0 0 18px rgba(255,33,71,.5); }
.g-ficha:disabled { opacity: .6; cursor: not-allowed; }
.g-btn-girar { min-width: 170px; padding: 17px 30px; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }

/* ---- Tragamonedas ---- */
.g-maquina { position: relative; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #c8102e, #7a0019); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 16px 40px rgba(0,0,0,.5); }
.g-maquina-luces { position: absolute; inset: 6px; border-radius: 18px; pointer-events: none;
  background: radial-gradient(circle, #fff4bd 0 2.5px, transparent 3px) 0 0 / 18px 18px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; animation: parpadeoVegas 1s infinite alternate; }
.g-rodillos { --alto: 110px; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; border-radius: 14px; background: #1a0008; }
.g-rodillo { position: relative; height: calc(var(--alto) * 3); overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #c9cfdc, #fff 30%, #fff 70%, #c9cfdc); }
.g-rodillo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 28%, transparent 72%, rgba(0,0,0,.45)); }
.g-tira { will-change: transform; }
.g-simb { height: var(--alto); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.g-simb img, .g-simb svg { display: block; height: calc(var(--alto) - 22px); width: auto; max-width: 92%; object-fit: contain; }
.g-simb.gana { animation: gGana .5s ease-in-out infinite alternate; }
@keyframes gGana { to { transform: scale(1.12); filter: drop-shadow(0 0 10px #ffd700) brightness(1.15); } }
.g-linea { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: rgba(255,215,0,.85); box-shadow: 0 0 10px #ffd700; pointer-events: none; z-index: 2; }
.g-tabla { margin-top: 18px; }
.g-tabla-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.g-pago { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.g-pago .g-simb { height: 30px; width: 30px; }
.g-pago .g-simb img, .g-pago .g-simb svg { height: 26px; max-width: 30px; }
.g-pago b { margin-left: auto; color: var(--dorado); }
.g-cual { font-size: 11px; color: var(--gris-2); margin-left: 4px; }

/* ---- Ruleta ---- */
.g-rueda-wrap { position: relative; width: min(380px, 80vw); aspect-ratio: 1; margin: 0 auto; }
.g-rueda { width: 100%; height: 100%; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.g-rueda-txt { font: 900 13px 'Montserrat', sans-serif; fill: #fff; }
.g-rueda-txt.cero { fill: rgba(255,255,255,.45); font-size: 12px; }
.g-rueda-txt.oscuro { fill: #2a1600; }
.g-rueda-flecha { position: absolute; top: -8px; left: 50%; z-index: 2; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid #fff; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.g-rueda-centro { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #13306a, #020D26); border: 4px solid #F5B82E; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.g-rueda-centro img { width: 78%; }

/* ---- Loto demo ---- */
.g-loto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.g-loto-izq { text-align: center; }
.g-loto-carton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; background: #1a1a1a; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.5); max-width: 330px; margin: 0 auto 6px; }
.g-celda { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; font: 900 clamp(22px, 4vw, 34px) 'Montserrat', sans-serif; color: #1a1a1a; transition: filter .3s, transform .3s; }
.g-celda span { position: relative; z-index: 1; }
.g-celda.entra { animation: gEntra .35s ease both; }
@keyframes gEntra { from { transform: scale(.6) rotateY(90deg); opacity: 0; } }
.g-celda.marcada::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(255,255,255,.2) 70%); box-shadow: inset 0 0 0 4px rgba(26,26,26,.85); animation: gFicha .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes gFicha { from { transform: scale(0); } }
.g-celda.apagada { filter: brightness(.45) saturate(.5); }
.g-celda.figura { z-index: 2; transform: scale(1.04); box-shadow: 0 0 0 4px #fff, 0 0 26px rgba(255,255,255,.8); animation: gBrilla 1s ease-in-out infinite alternate; }
@keyframes gBrilla { to { box-shadow: 0 0 0 4px #ffd700, 0 0 34px rgba(255,215,0,.9); } }
.g-loto-bolas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 16px; }
.g-bola { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 900 15px 'Montserrat', sans-serif; font-style: normal; color: #1a1a1a; background: radial-gradient(circle at 35% 30%, #fff, #ffe600 70%); box-shadow: inset 0 -4px 6px rgba(0,0,0,.25); }
.g-bola.vacia { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.g-bola.sale { animation: gSale .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes gSale { from { transform: scale(0) rotate(-180deg); } }
.g-tabla-loto { margin-top: 0; display: grid; gap: 5px; }
.g-pago-loto { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 13.5px; font-weight: 600; }
.g-pago-loto b { color: var(--dorado); }
.g-pago-loto.resaltada { background: rgba(34,199,122,.18); box-shadow: inset 0 0 0 1px rgba(34,199,122,.6); }
.g-mini { display: grid; grid-template-columns: repeat(4, 9px); gap: 2px; }
.g-mini i { width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.14); }
.g-mini i.on { background: #FFE600; }
.g-nota { margin-top: 14px; color: var(--gris-2); font-size: 12.5px; text-align: center; }
.g-nota a { color: #ff6a84; font-weight: 700; }

/* ---- Sin monedas ---- */
.g-modal-chica { width: min(400px, 100%); text-align: center; padding: 26px 24px 24px; overflow: visible; }
.g-modal-chica .g-cerrar { position: absolute; top: 12px; right: 12px; }
.g-sin-lobo { height: 150px; margin: -80px auto 6px; display: block; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.g-modal-chica h3 { font-family: 'Anton', sans-serif; font-size: 26px; text-transform: uppercase; margin-bottom: 8px; }
.g-modal-chica p { color: var(--gris); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.g-sin-o { margin: 14px 0; color: var(--gris-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }


/* ---- Bingos con premios (imágenes) ---- */
.g-premio-real { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 9px 18px 9px 12px; border-radius: 40px;
  background: linear-gradient(135deg, #ffe08a, #F5B82E 45%, #d4890b); color: #2a1600; font-size: 13px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 0 0 3px rgba(245,184,46,.25), 0 10px 26px rgba(245,184,46,.35), inset 0 1px 0 rgba(255,255,255,.6); position: relative; overflow: hidden; }
.g-premio-real svg { width: 20px; height: 20px; }
.g-premio-real::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); animation: gBrillo 3s ease-in-out infinite; }
@keyframes gBrillo { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.g-bingo-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.g-bingo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.g-bingo:hover .g-bingo-img img { transform: scale(1.05); }
.g-bingo-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, #0a2a5a); }
.g-bingo-tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 11px; border-radius: 8px; background: linear-gradient(135deg, #ffe08a, #F5B82E); color: #2a1600; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.g-bingo { transition: transform .25s, border-color .25s; }
.g-bingo:hover { transform: translateY(-5px); border-color: rgba(245,184,46,.5); }
.g-bingo-link { display: inline-block; margin-top: 16px; color: #ffd76a; font-weight: 800; font-size: 14px; text-decoration: none; }
.g-bingo-link:hover { text-decoration: underline; }

/* ---- Clásico demo ---- */
.g-cla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.g-cla-izq { text-align: center; }
.g-cla-carton { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 10px; border-radius: 14px; background: #fff; max-width: 330px; margin: 0 auto 6px; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.g-cla-carton b { height: 34px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 19px; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.g-cla-carton i { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; background: #e6ebf5; color: #18224a; font: 800 clamp(14px, 2.4vw, 19px) 'Montserrat', sans-serif; font-style: normal; transition: filter .3s; }
.g-cla-carton i span { position: relative; z-index: 1; }
.g-cla-carton i.marcada::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff5a7a, #e0103c 60%, #a0001f); animation: gFicha .3s cubic-bezier(.2,1.6,.4,1); }
.g-cla-carton i.marcada { color: #fff; }
.g-cla-carton i.libre { background: linear-gradient(135deg, #F5B82E, #ff8a00); color: #fff; font-size: 20px; }
.g-cla-carton i.libre::before { display: none; }
.g-cla-carton i.figura { z-index: 2; box-shadow: 0 0 0 3px #ffd700, 0 0 18px rgba(255,215,0,.9); animation: gBrilla 1s ease-in-out infinite alternate; }
.g-cla-carton i.apagada { filter: brightness(.6); }
.g-cla-actual { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.g-cla-bola { --c: #33415f; width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0 6%, transparent 22%), radial-gradient(circle, var(--c) 0 60%, #000 140%); box-shadow: inset -8px -10px 18px rgba(0,0,0,.4), 0 10px 20px rgba(0,0,0,.4); }
.g-cla-bola span { width: 56%; height: 56%; border-radius: 50%; background: #fff; display: grid; place-items: center; align-content: center; color: #14204a; font-weight: 900; font-size: 19px; line-height: .9; }
.g-cla-bola small { font-size: 10px; color: var(--c); }
.g-cla-bola.sale { animation: gSale .35s cubic-bezier(.2,1.6,.4,1); }
.g-cla-cuenta { font-size: 24px; font-weight: 900; }
.g-cla-hist { display: flex; gap: 5px; overflow: hidden; height: 32px; margin-bottom: 14px; -webkit-mask: linear-gradient(90deg, #000 75%, transparent); mask: linear-gradient(90deg, #000 75%, transparent); }
.g-cla-hist i { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 900 12px 'Montserrat', sans-serif; font-style: normal; color: #14204a; background: radial-gradient(circle, #fff 0 52%, var(--c) 54%); }
.g-mini5 { grid-template-columns: repeat(5, 7px); }
.g-mini5 i { width: 7px; height: 7px; }

/* ---- Rápido demo ---- */
.g-rap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.g-rap-mios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.g-rap-mios b { --c: #33415f; aspect-ratio: 1; max-height: 70px; border-radius: 12px; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #1a1a1a; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 0 0 3px #fff; transition: box-shadow .3s; }
.g-rap-mios b.vacio { background: rgba(255,255,255,.06); color: var(--gris-2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.g-rap-mios b.ok { box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 0 0 3px #fff, 0 0 20px 4px rgba(255,215,0,.9); animation: gPulso .5s ease; }
.g-rap-teclado { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 4px; }
.g-rap-tecla { height: 42px; border-radius: 10px; border: 0; cursor: pointer; font: 900 18px 'Montserrat', sans-serif; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); transition: transform .12s; }
.g-rap-tecla.activa { background: var(--c); color: #1a1a1a; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 0 0 2px #fff; transform: translateY(-2px); }
.g-rap-tecla:disabled { cursor: not-allowed; opacity: .7; }
#gRapAzar { display: block; margin: 0 auto 10px; }
.g-rap-pt { font-size: 12px; letter-spacing: 1px; color: #22C77A; }
.g-rap-pt i { color: rgba(255,255,255,.2); font-style: normal; }
.g-nada { color: var(--gris-2) !important; }
.g-rap-der .g-rueda-wrap { width: min(330px, 78vw); }
.g-rap-num { font: 900 22px 'Montserrat', sans-serif; fill: #1a1a1a; }
#gRapRueda [data-n].salio { filter: grayscale(1) brightness(.45); transition: filter .4s; }
#gRapRueda text.salio { opacity: .4; }
.g-centro { text-align: center; margin-top: 14px; }
.g-rap-salen { display: grid; grid-template-columns: repeat(4, 50px); gap: 8px; justify-content: center; }
.g-rap-salen .g-bola { font-size: 20px; }

@media (max-width: 1180px) { .g-juegos > .g-juego { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 860px) { .g-juegos > .g-juego { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 720px) {
  .g-cla, .g-rap { grid-template-columns: 1fr; gap: 14px; }
  .g-cla-der { display: contents; }
  .g-cla-actual { order: -2; margin-bottom: 0; }
  .g-cla-hist { order: -1; margin-bottom: 0; }
  .g-cla-izq { order: 0; }
  #gClaTabla { order: 1; }
  .g-cla-carton { max-width: 300px; }
  .g-rap-der { order: -1; }
  .g-rap-der .g-rueda-wrap { width: min(250px, 70vw); }
}

/* ===================== Responsive ===================== */
@media (max-width: 1040px) {
  .g-barra { top: 88px; }
  .g-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .g-banco { min-height: 0; justify-content: flex-start; }
  .g-banco { justify-content: center; }
  .g-banco-caja { margin-left: 190px; }
  .g-banco-lobo { height: 330px; left: calc(50% - 300px); }
  .g-bingos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-bingos-cab { grid-template-columns: 180px 1fr; }
}
@media (max-width: 720px) {
  .contenedor { padding: 0 16px; }
  .g-barra-etq { display: none; }
  .g-barra-in { justify-content: space-between; }
  .g-hero { padding: 36px 0 30px; }
  .g-sub { font-size: 15.5px; }
  .g-banco { flex-direction: column; align-items: center; }
  .g-banco-lobo { position: relative; height: 200px; left: auto; bottom: auto; margin-bottom: -30px; }
  .g-banco-caja { margin-left: 0; padding: 18px; }
  .g-banco-tit { font-size: 20px; }
  .g-bingos-grid, .g-pasos-grid { grid-template-columns: 1fr; }
  .g-juegos > .g-juego { flex-basis: 100%; }
  .g-bingos-cab { grid-template-columns: 1fr; text-align: center; }
  .g-bingos-logo { width: 200px; margin: 0 auto; }
  .g-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 18px; }
  .g-cta h3 { font-size: 24px; }
  .g-cta-btns .g-btn { flex: 1; }
  .g-seccion { padding: 40px 0; }
  .g-modal { padding: 0; align-items: stretch; }
  .g-modal-caja { max-height: 100vh; height: 100%; border-radius: 0; padding: 14px; }
  .g-modal-chica { height: auto; align-self: center; margin: 16px; border-radius: 20px; width: auto; }
  .g-modal-cab h3 { font-size: 19px; }
  .g-rodillos { --alto: 82px; gap: 6px; padding: 6px; }
  .g-maquina { padding: 12px; }
  .g-loto { grid-template-columns: 1fr; gap: 14px; }
  .g-loto-carton { max-width: 250px; }
  .g-celda { font-size: 24px; }
  .g-controles { flex-direction: column; align-items: stretch; }
  .g-fichas { justify-content: space-between; }
  .g-btn-girar { width: 100%; }
}
@keyframes parpadeoVegas { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

/* ---- Ruleta del banco (1 al 10) ---- */
.g-banco-ruleta { position: relative; width: 210px; aspect-ratio: 1; margin: 4px auto 10px; }
.g-banco-ruleta svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.g-br-num { font: 900 21px 'Montserrat', sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 2px; }
.g-br-luz { fill: #fff4bd; animation: parpadeoVegas 1s infinite alternate; }
.g-br-flecha { position: absolute; top: -8px; left: 50%; z-index: 2; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 24px solid #fff; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.g-br-centro { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #04122c; border: 3px solid #F5B82E; display: grid; place-items: center; }
.g-br-centro img { width: 88%; }
.g-br-premio { text-align: center; font-weight: 800; font-size: 14px; color: var(--gris); margin-bottom: 12px; min-height: 20px; }
.g-br-premio.gano { color: #6ff0b2; font-size: 17px; animation: gPulso .6s ease; }

/* ---- Raspadito 46 ---- */
.g-rs { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 26px; align-items: start; }
.g-rs-der .g-msg { margin-top: 0; }
.g-rs-der .g-tabla { margin-top: 18px; }
.g-rs-ticket { position: relative; padding: 16px 16px 14px; border-radius: 22px; color: #fff; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(120% 70% at 50% 0%, #ff3b6b 0%, #b3123e 38%, #5a0a3a 75%, #2b0630 100%);
  box-shadow: 0 0 0 4px #2a0012, 0 0 0 8px #f5b82e, 0 0 0 11px #6b3c00, 0 24px 50px rgba(0,0,0,.55); margin: 11px; }
.g-rs-ticket.gana { animation: gRsGana .5s ease 3; }
@keyframes gRsGana { 50% { transform: scale(1.03); box-shadow: 0 0 0 4px #2a0012, 0 0 0 8px #fff1b0, 0 0 0 11px #6b3c00, 0 0 60px 10px rgba(255,215,0,.7); } }
.g-rs-borde { position: absolute; inset: 6px; border-radius: 16px; border: 2px dashed rgba(255,231,160,.55); pointer-events: none; }
.g-rs-cab { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.g-rs-cab img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.g-rs-cab small { display: block; font-weight: 800; font-size: 13px; color: #ffe9b0; letter-spacing: .5px; }
.g-rs-logo { display: block; white-space: nowrap; font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 1.5px;
  background: linear-gradient(180deg, #fff 0%, #ffe28a 45%, #f5b82e 65%, #b46a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #4a1500); }
.g-rs-logo span { background: linear-gradient(180deg, #fff, #9ad8ff 50%, #168bff); -webkit-background-clip: text; background-clip: text; }
.g-rs-zona { position: relative; border-radius: 16px; padding: 8px; background: linear-gradient(180deg, #fff6d8, #f3dc9a); box-shadow: inset 0 3px 8px rgba(0,0,0,.25), 0 0 0 3px #6b3c00; }
.g-rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-rs-cel { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fff, #fbeec5 70%, #eed48a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(107,60,0,.25); }
.g-rs-cel img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.g-rs-cel img[src=""] { visibility: hidden; }
.g-rs-cel.visto img { animation: gRsAparece .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes gRsAparece { from { transform: scale(.5); } }
.g-rs-grid.terminado .g-rs-cel { filter: saturate(.6) brightness(.85); }
.g-rs-grid.terminado .g-rs-cel.gana { filter: none; box-shadow: 0 0 0 3px #ffd700, 0 0 22px 4px rgba(255,215,0,.85); animation: gRsBrilla .6s ease-in-out infinite alternate; position: relative; z-index: 1; }
@keyframes gRsBrilla { to { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 30px 8px rgba(255,215,0,1); } }
.g-rs-foil { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 12px; touch-action: none; cursor: grab; transition: opacity .6s; z-index: 2; }
.g-rs-foil.fuera { opacity: 0; }
.g-rs-foil.bloqueado { pointer-events: none; }
.g-rs-espera { position: absolute; inset: 8px; z-index: 3; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; background: rgba(20,4,30,.62); color: #fff; }
.g-rs-espera[hidden] { display: none; }
.g-rs-espera img { width: 64px; height: 64px; animation: gRsGira 3s linear infinite; }
@keyframes gRsGira { 50% { transform: rotateY(180deg); } }
.g-rs-espera b { font-size: 18px; }
.g-rs-espera span { font-size: 13px; color: #f2dbe6; }
.g-rs-espera span b { font-size: inherit; color: #ffe066; }
.g-rs-premios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-rs-premio { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 12px; background: rgba(2,13,38,.6); border: 1px solid var(--borde); }
.g-rs-premio span { display: flex; }
.g-rs-premio img { width: 26px; height: 26px; object-fit: contain; margin-right: -4px; }
.g-rs-premio b { color: #ffd76a; font-size: 17px; font-weight: 900; }
.g-rs-premio:first-child { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(245,184,46,.18), rgba(2,13,38,.6)); border-color: rgba(245,184,46,.5); }
.g-rs-premio.resaltada { background: rgba(10,70,40,.85); border-color: #22C77A; box-shadow: 0 0 16px rgba(34,199,122,.5); }
.g-btn-girar.g-rs-todo { background: linear-gradient(180deg, #f4f6fb, #a8afc2); color: #1c2340; box-shadow: 0 6px 0 #5b6378; }
@media (max-width: 860px) {
  .g-rs { grid-template-columns: 1fr; gap: 12px; }
  .g-rs-ticket { width: calc(100% - 22px); max-width: 380px; margin: 11px auto; }
}
@media (max-width: 720px) {
  .g-rs-ticket { padding: 12px 10px 10px; }
  .g-rs-cab img { width: 44px; height: 44px; }
  .g-rs-logo { font-size: 24px; }
  .g-rs-grid { gap: 6px; }
  .g-rs-der .g-msg { margin-bottom: 10px; }
}

/* La ruleta al girar no debe sacar barra de desplazamiento horizontal */
.g-modal-caja { overflow-x: hidden; overflow-y: auto; }
.g-rueda-wrap, .g-banco-ruleta { overflow: clip; overflow-clip-margin: 14px; }

/* De "Juegos gratis" para abajo se usa todo el ancho de la pantalla (el hero queda igual) */
.g-seccion > .contenedor, .contenedor.g-ancho { max-width: 1840px; padding: 0 48px; }
.g-juegos { gap: 24px; }
.g-juegos > .g-juego { flex-basis: calc((100% - 96px) / 5); }
@media (min-width: 1500px) {
  .g-juego-cuerpo { padding: 24px 26px 28px; }
  .g-juego-cuerpo h3 { font-size: 22px; }
  .g-juego-cuerpo p { font-size: 15.5px; }
}
@media (max-width: 1180px) { .g-seccion > .contenedor, .contenedor.g-ancho { padding: 0 32px; } .g-juegos > .g-juego { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 860px) { .g-juegos > .g-juego { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 720px) { .g-seccion > .contenedor, .contenedor.g-ancho { padding: 0 16px; } .g-juegos > .g-juego { flex-basis: 100%; } }

/* ===================== Dados y naipes ===================== */
.g-mesa { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 190px; padding: 24px 18px; margin-bottom: 16px; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 35%, #12804f 0%, #0a5a37 55%, #063a24 100%); box-shadow: inset 0 0 0 3px rgba(245,184,46,.55), inset 0 0 40px rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.4); overflow: hidden; }
.g-mesa::before { content: ''; position: absolute; inset: 10px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.18); pointer-events: none; }
.g-dados { display: flex; gap: 26px; perspective: 700px; }
.g-dado { --t: 82px; width: var(--t); height: var(--t); position: relative; }
.g-dados-3 .g-dado { --t: 72px; }
.g-dados-1 .g-dado { --t: 118px; }
.g-dado.rueda { animation: gDadoSalta 1s cubic-bezier(.3,.7,.4,1); }
@keyframes gDadoSalta { 0% { transform: translate(-60px, -30px) scale(.8); } 35% { transform: translate(-10px, -46px); } 60% { transform: translate(6px, 0); } 75% { transform: translate(10px, -12px); } 100% { transform: none; } }
.g-dado::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.4); filter: blur(5px); }
.g-dado-cubo { position: absolute; inset: 0; transform-style: preserve-3d; }
.g-dado-cara { position: absolute; inset: 0; border-radius: 16%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%; gap: 3%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #f1f1f4 55%, #d5d7df); box-shadow: inset 0 0 0 2px rgba(0,0,0,.06), inset -4px -6px 10px rgba(0,0,0,.12); backface-visibility: hidden; }
.g-dado-cara i, .g-cara i { display: block; border-radius: 50%; }
.g-dado-cara i.on { background: radial-gradient(circle at 35% 30%, #4a4f63, #11131c); box-shadow: inset 0 2px 2px rgba(255,255,255,.25); }
.g-dado-cara.c1 i.on { background: radial-gradient(circle at 35% 30%, #ff5a74, #b5001f); transform: scale(1.25); }
.g-dado-cara.c1 { transform: translateZ(calc(var(--t) / 2)); }
.g-dado-cara.c6 { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.g-dado-cara.c2 { transform: rotateY(90deg) translateZ(calc(var(--t) / 2)); }
.g-dado-cara.c5 { transform: rotateY(-90deg) translateZ(calc(var(--t) / 2)); }
.g-dado-cara.c3 { transform: rotateX(90deg) translateZ(calc(var(--t) / 2)); }
.g-dado-cara.c4 { transform: rotateX(-90deg) translateZ(calc(var(--t) / 2)); }
.g-dado.gana .g-dado-cara { background: radial-gradient(circle at 30% 25%, #fffbe6, #ffe48a 60%, #f5b82e); }
.g-dado::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,.55), transparent 65%); opacity: 0; transition: opacity .3s; }
.g-dado.gana::before { opacity: 1; }
.g-mesa-lobo .g-dado-cara { background: radial-gradient(circle at 30% 25%, #2b62c4, #123a85 60%, #0a2257); }
.g-mesa-lobo .g-dado-cara i.on { background: radial-gradient(circle at 35% 30%, #fff6c8, #f5b82e); }
.g-mesa-lobo .g-dado-cara.c1 i.on { background: radial-gradient(circle at 35% 30%, #ff5a74, #d10a2e); }
.g-mesa-lobo { background: radial-gradient(ellipse at 50% 35%, #8a1030 0%, #5a0a2a 55%, #2b0620 100%); min-height: 220px; }
.g-mesa-lobo-img { position: absolute; left: 6%; bottom: 8px; width: 120px; opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.g-suma { min-width: 84px; padding: 10px 14px; border-radius: 16px; text-align: center; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); }
.g-suma small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #bfe9d2; }
.g-suma b { font: 400 40px/1.1 'Anton', sans-serif; color: #fff; }
.g-suma.gano { border-color: #ffd76a; box-shadow: 0 0 22px rgba(255,215,0,.55); }
.g-suma.gano b { color: #ffd76a; }

.g-ops { display: grid; gap: 10px; }
.g-ops-3 { grid-template-columns: repeat(3, 1fr); }
.g-ops-6 { grid-template-columns: repeat(6, 1fr); }
.g-ops-sb { grid-template-columns: repeat(6, 1fr); }
.g-ops-sb .g-op:not(.g-op-num) { grid-column: span 2; }
.g-op { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 8px; border-radius: 14px; cursor: pointer; color: #fff; font-family: inherit;
  background: linear-gradient(180deg, #123a7a, #0a2654); border: 2px solid rgba(255,255,255,.12); box-shadow: 0 4px 0 #061a3a; transition: transform .15s, border-color .15s; }
.g-op b { font-size: 15px; font-weight: 800; }
.g-op small { font-size: 11.5px; color: var(--gris-2); }
.g-op i { font-style: normal; font-weight: 900; color: #ffd76a; font-size: 15px; }
.g-op-num i { font-size: 10.5px; }
.g-op-oro { background: linear-gradient(180deg, #5c3a00, #3a2400); }
.g-op:hover:not(:disabled) { transform: translateY(-2px); }
.g-op.activa { border-color: #ff2147; background: linear-gradient(180deg, #c8102e, #7a0019); box-shadow: 0 4px 0 #4a000f, 0 0 18px rgba(255,33,71,.45); }
.g-op.activa small { color: #ffd0d8; }
.g-op:disabled { cursor: default; }
.g-op.salio { border-color: #ffd76a; }
.g-op.salio::after, .g-op.acerto::after { content: 'SALIÓ'; position: absolute; top: -9px; right: 8px; padding: 2px 7px; border-radius: 6px; background: #ffd76a; color: #3a2400; font-size: 9.5px; font-weight: 900; letter-spacing: .5px; }
.g-op.acerto { border-color: #22C77A; background: linear-gradient(180deg, #13995d, #0a5a37); box-shadow: 0 4px 0 #063a24, 0 0 22px rgba(34,199,122,.6); }
.g-op.acerto::after { content: '¡GANA!'; background: #22C77A; color: #03231a; }
.g-cara { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width: 38px; height: 38px; padding: 6px; border-radius: 8px; background: #f4f5f8; box-shadow: inset -2px -3px 5px rgba(0,0,0,.15); }
.g-cara i.on { background: #11131c; }
.g-cara[data-v="1"] i.on { background: #d10a2e; transform: scale(1.3); }
.g-ops-6 .g-cara { width: 46px; height: 46px; }

/* ---- Naipes ---- */
.g-carta { --w: 96px; width: var(--w); aspect-ratio: 5 / 7; perspective: 800px; flex: none; }
.g-carta-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.g-carta.oculta .g-carta-in { transform: rotateY(180deg); }
.g-carta-frente, .g-carta-dorso { position: absolute; inset: 0; border-radius: 10%/7%; backface-visibility: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.g-carta-frente { background: linear-gradient(160deg, #ffffff, #f2f0ea); color: #14161f; border: 1px solid rgba(0,0,0,.15); }
.g-carta.roja .g-carta-frente { color: #d10a2e; }
.g-c-esq { position: absolute; top: 6%; left: 9%; display: flex; flex-direction: column; align-items: center; font: 800 calc(var(--w) * .22)/1 'Montserrat', sans-serif; }
.g-c-esq i { font-style: normal; font-size: .8em; margin-top: 2px; }
.g-c-esq.abajo { top: auto; left: auto; bottom: 6%; right: 9%; transform: rotate(180deg); }
.g-c-palo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--w) * .5); line-height: 1; }
.g-carta-dorso { transform: rotateY(180deg); display: grid; place-items: center; border: 3px solid #fff;
  background: repeating-linear-gradient(45deg, #c8102e 0 6px, #a00b25 6px 12px); }
.g-carta-dorso img { width: 62%; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.g-carta.entra { animation: gCartaEntra .35s cubic-bezier(.2,.8,.3,1.1); }
@keyframes gCartaEntra { from { transform: translate(40px, -30px) rotate(8deg); opacity: 0; } }
.g-carta.mini { --w: 38px; }
.g-carta.mini .g-c-esq.abajo, .g-carta.mini .g-c-palo { display: none; }
.g-carta.mini .g-c-esq { font-size: 13px; }

.g-hl-mesa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 35%, #12804f 0%, #0a5a37 55%, #063a24 100%); box-shadow: inset 0 0 0 3px rgba(245,184,46,.55), inset 0 0 40px rgba(0,0,0,.45); }
.g-hl-slot { display: flex; justify-content: center; }
.g-hl-slot .g-carta { --w: 120px; }
.g-hl-centro { text-align: center; padding: 12px 18px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); min-width: 150px; }
.g-hl-centro .g-etq { color: #bfe9d2; margin-bottom: 2px; }
.g-hl-mult { display: block; font: 400 40px/1.1 'Anton', sans-serif; color: #ffd76a; }
.g-hl-monto { font-size: 13px; font-weight: 700; color: #e8fff2; }
.g-hl.gano .g-hl-centro { border-color: #22C77A; box-shadow: 0 0 22px rgba(34,199,122,.55); }
.g-hl.perdio .g-hl-mult { color: #9aa3bd; text-decoration: line-through; }
.g-hl-hist { display: flex; gap: 6px; justify-content: center; min-height: 54px; margin: 12px 0; }
.g-hl-btns, .g-bj-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-acc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 14px; border: 0; cursor: pointer; color: #fff; font-family: inherit; box-shadow: 0 5px 0 rgba(0,0,0,.35); transition: transform .12s, opacity .15s; }
.g-acc b { font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.g-acc small { font-size: 12.5px; font-weight: 800; opacity: .9; }
.g-acc:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.g-acc:disabled { opacity: .35; cursor: not-allowed; }
.g-acc-mayor { background: linear-gradient(180deg, #22C77A, #0f8a50); }
.g-acc-menor { background: linear-gradient(180deg, #168BFF, #0b5ab8); }
.g-acc-cobrar { background: linear-gradient(180deg, #ffd76a, #e09a10); color: #3a2400; }

.g-bj { padding: 18px; border-radius: 20px; background: radial-gradient(ellipse at 50% 30%, #12804f 0%, #0a5a37 55%, #063a24 100%); box-shadow: inset 0 0 0 3px rgba(245,184,46,.55), inset 0 0 40px rgba(0,0,0,.45); }
.g-bj-fila { display: flex; align-items: center; gap: 16px; min-height: 150px; }
.g-bj-fila + .g-bj-fila { border-top: 1px dashed rgba(255,255,255,.2); margin-top: 6px; padding-top: 6px; }
.g-bj-cab { width: 80px; flex: none; text-align: center; }
.g-bj-cab span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #bfe9d2; }
.g-bj-cab b { display: inline-block; min-width: 56px; margin-top: 4px; padding: 4px 8px; border-radius: 12px; background: rgba(0,0,0,.4); font: 400 30px/1.1 'Anton', sans-serif; }
.g-bj-cartas { display: flex; padding-left: 26px; }
.g-bj-cartas .g-carta { margin-left: -26px; }
.g-bj-btns { margin-top: 14px; }
.g-bj.gano #gBjTotJ { background: #22C77A; color: #03231a; }
.g-bj.perdio #gBjTotJ { background: #7a0019; }

@media (max-width: 720px) {
  .g-mesa { min-height: 150px; gap: 16px; padding: 18px 10px; }
  .g-dados { gap: 16px; }
  .g-dado { --t: 64px; }
  .g-dados-3 .g-dado { --t: 54px; }
  .g-dados-1 .g-dado { --t: 96px; }
  .g-suma { min-width: 64px; padding: 8px 10px; }
  .g-suma b { font-size: 30px; }
  .g-mesa-lobo-img { width: 70px; left: 8px; }
  .g-ops-3 .g-op { padding: 10px 4px; }
  .g-op b { font-size: 13.5px; }
  .g-ops-sb { gap: 7px; }
  .g-ops-sb .g-op-num { grid-column: span 2; flex-direction: row; gap: 8px; padding: 8px 4px; }
  .g-ops-6 { grid-template-columns: repeat(3, 1fr); }
  .g-cara { width: 32px; height: 32px; padding: 5px; }
  .g-ops-6 .g-cara { width: 40px; height: 40px; }
  .g-hl-mesa { padding: 14px 10px; gap: 8px; }
  .g-hl-slot .g-carta { --w: 82px; }
  .g-hl-centro { min-width: 0; padding: 8px; }
  .g-hl-mult { font-size: 28px; }
  .g-acc { padding: 12px 4px; }
  .g-acc b { font-size: 14.5px; }
  .g-acc small { font-size: 11px; }
  .g-bj { padding: 12px 10px; }
  .g-bj-fila { min-height: 112px; gap: 8px; }
  .g-bj-cab { width: 58px; }
  .g-bj-cab b { font-size: 24px; min-width: 44px; }
  .g-bj-cartas .g-carta { --w: 68px; }
  .g-bj-cartas { padding-left: 22px; }
  .g-bj-cartas .g-carta { margin-left: -22px; }
}

/* ---- Dados v2: cuerpo sólido, puntos hundidos y bisel ---- */
.g-dados { perspective: none; }
.g-dado { perspective: 1100px; }
.g-dado-cubo { --c1: #ffffff; --c2: #eceef3; --c3: #c9cdd8; --borde: #b9bdc9; }
.g-dado-cara, .g-dado-nucleo { position: absolute; inset: 0; backface-visibility: hidden; }
.g-dado-nucleo { border-radius: 7%; background: var(--borde); }
.g-dado-nucleo.c1 { transform: translateZ(calc(var(--t) / 2 - 1.5px)); }
.g-dado-nucleo.c6 { transform: rotateY(180deg) translateZ(calc(var(--t) / 2 - 1.5px)); }
.g-dado-nucleo.c2 { transform: rotateY(90deg) translateZ(calc(var(--t) / 2 - 1.5px)); }
.g-dado-nucleo.c5 { transform: rotateY(-90deg) translateZ(calc(var(--t) / 2 - 1.5px)); }
.g-dado-nucleo.c3 { transform: rotateX(90deg) translateZ(calc(var(--t) / 2 - 1.5px)); }
.g-dado-nucleo.c4 { transform: rotateX(-90deg) translateZ(calc(var(--t) / 2 - 1.5px)); }
.g-dado-cara { border-radius: 20%; padding: 17%; gap: 9%;
  background: radial-gradient(120% 120% at 28% 22%, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 3px 3px 5px rgba(255,255,255,.9), inset -4px -5px 9px rgba(0,0,0,.16), inset 0 0 calc(var(--t) * .12) rgba(0,0,0,.08); }
.g-dado-cara i.on { transform: none;
  background: radial-gradient(circle at 50% 38%, #050608 0%, #1b1d26 55%, #3b3f4f 100%);
  box-shadow: inset 0 calc(var(--t) * .025) calc(var(--t) * .03) rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(0,0,0,.08); }
.g-dado-cara.c1 { padding: 30%; }
.g-dado-cara.c1 i.on { transform: scale(1.7); background: radial-gradient(circle at 50% 38%, #7a0014 0%, #c4001f 55%, #ff3d5c 100%); }
.g-dado-brillo { display: none; }
.g-dado::after { left: 2%; right: 2%; bottom: -10%; height: 18%; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); filter: blur(4px); }

/* ganador: dorado */
.g-dado.gana .g-dado-cubo { --c1: #fffbe8; --c2: #ffe48a; --c3: #e8a91c; --borde: #c98a10; }
.g-dado.gana .g-dado-cara { background: radial-gradient(120% 120% at 28% 22%, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%); }

/* Sic Bo: dados rojos translúcidos tipo casino */
.g-dados-3 .g-dado-cubo { --c1: #ff7a8e; --c2: #e0153a; --c3: #8f0020; --borde: #7a001b; }
.g-dados-3 .g-dado-cara i.on, .g-dados-3 .g-dado-cara.c1 i.on { background: radial-gradient(circle at 50% 38%, #c9ccd6 0%, #f2f3f7 55%, #ffffff 100%); box-shadow: inset 0 calc(var(--t) * .025) calc(var(--t) * .03) rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.35); }
.g-dados-3 .g-dado-cara { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 3px 3px 6px rgba(255,255,255,.45), inset -4px -5px 9px rgba(0,0,0,.3); }
.g-dados-3 .g-dado.gana .g-dado-cubo { --c1: #fffbe8; --c2: #ffe48a; --c3: #e8a91c; --borde: #c98a10; }
.g-dados-3 .g-dado.gana .g-dado-cara i.on { background: radial-gradient(circle at 50% 38%, #050608 0%, #1b1d26 55%, #3b3f4f 100%); }

/* Dado del Lobo: azul con puntos dorados */
.g-mesa-lobo .g-dado-cubo { --c1: #4f8cf0; --c2: #1d4fae; --c3: #0b2766; --borde: #0a2257; }
.g-mesa-lobo .g-dado-cara { background: radial-gradient(120% 120% at 28% 22%, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 3px 3px 6px rgba(255,255,255,.35), inset -5px -6px 10px rgba(0,0,0,.35); }
.g-mesa-lobo .g-dado-cara i.on { background: radial-gradient(circle at 50% 38%, #8a5600 0%, #f5b82e 55%, #fff1b0 100%); box-shadow: inset 0 calc(var(--t) * .025) calc(var(--t) * .03) rgba(60,30,0,.7), 0 1px 0 rgba(255,255,255,.4); }
.g-mesa-lobo .g-dado-cara.c1 i.on { background: radial-gradient(circle at 50% 38%, #7a0014 0%, #e0153a 55%, #ff7a8e 100%); }
.g-mesa-lobo .g-dado.gana .g-dado-cubo { --c1: #fffbe8; --c2: #ffe48a; --c3: #e8a91c; --borde: #c98a10; }
.g-mesa-lobo .g-dado.gana .g-dado-cara i.on { background: radial-gradient(circle at 50% 38%, #050608 0%, #1b1d26 55%, #3b3f4f 100%); }
.g-dados { gap: 34px; }
@media (max-width: 720px) { .g-dados { gap: 22px; } .g-dados-3 .g-dado { --t: 52px; } }
.g-cara { padding: 17%; gap: 8%; border-radius: 22%; background: radial-gradient(120% 120% at 28% 22%, #fff 0%, #eceef3 50%, #c9cdd8 100%); box-shadow: inset 2px 2px 3px rgba(255,255,255,.9), inset -2px -3px 5px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.35); }
.g-cara i.on { background: radial-gradient(circle at 50% 38%, #050608 0%, #1b1d26 55%, #3b3f4f 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.9); }
.g-cara[data-v="1"] { padding: 30%; }
.g-cara[data-v="1"] i.on { transform: scale(1.6); background: radial-gradient(circle at 50% 38%, #7a0014 0%, #c4001f 55%, #ff3d5c 100%); }
/* caras de dado en los botones: tamaño fijo (el padding en % tomaba el ancho del botón) */
.g-cara { flex: none; width: 40px; height: 40px; padding: 6px; gap: 3px; }
.g-cara[data-v="1"] { padding: 6px; }
.g-cara[data-v="1"] i.on { transform: scale(1.5); }
.g-ops-6 .g-cara { width: 50px; height: 50px; padding: 8px; gap: 4px; }
.g-op-num { flex-direction: row; gap: 10px; }
.g-op-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.g-op-txt b { font-size: 15px; }
.g-op-txt i { font-size: 13px; }
.g-ops-sb .g-op-num { padding: 10px 6px; }
@media (min-width: 721px) { .g-ops-sb .g-op-num { flex-direction: column; gap: 6px; } .g-ops-sb .g-op-txt { align-items: center; } }
@media (max-width: 720px) { .g-cara { width: 36px; height: 36px; padding: 5px; } .g-ops-6 .g-cara { width: 44px; height: 44px; padding: 7px; } }
.g-cara i { width: 100%; aspect-ratio: 1; align-self: center; }