/* Bingos Royal: esfera dorada, express y salón europeo. Móvil vertical primero (~390 px de ancho, ~664 de alto útil).
   La pantalla mide lo que ve la persona (--rs-h = window.innerHeight, que descuenta la barra de Safari) y el mando queda siempre dentro. */
.bg-pantalla{--bg-ac:#e2b53a;--pap:#f7f0dc;--cartel:#1b2a52;
  inset:var(--ctl-top,28px) 0 auto 0;height:calc(100vh - var(--ctl-top,28px));height:calc(var(--rs-h,100vh) - var(--ctl-top,28px))}
.bgv-esfera{background:var(--rp-fondo,none) center/cover no-repeat,radial-gradient(520px 360px at 30% 10%,#2a1f5a66 0,#0000 70%),radial-gradient(520px 360px at 90% 40%,#7a561a40 0,#0000 70%),linear-gradient(180deg,#07060e,#0e0c1a 60%,#05040a)}
.bgv-domo{--bg-ac:#c4161c;--pap:#f3f1ec;--cartel:#6e1020;background:var(--rp-fondo,none) center/cover no-repeat,radial-gradient(520px 360px at 60% 0,#7a0f1c55 0,#0000 70%),linear-gradient(180deg,#0b0508,#150a0f 60%,#060304)}
.bgv-jaula{--bg-ac:#2f8f5f;--pap:#fbf4de;--cartel:#0a3a24;background:var(--rp-fondo,none) center/cover no-repeat,radial-gradient(560px 380px at 50% 0,#0f5a3a66 0,#0000 70%),linear-gradient(180deg,#04100b,#0a1d14 60%,#030a07)}
.bg-scroll{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .4rem .8rem}
.bg-fijo{position:sticky;top:0;z-index:4;margin:0 -.4rem;padding:.25rem .4rem .2rem;background:#05040a;box-shadow:0 6px 8px -4px #000c}
.bg-sala{position:relative;height:clamp(150px,calc(var(--rs-h,664px)*.29),230px)}
.bg-sala canvas{display:block;width:100%;height:100%}
.bg-actual{position:absolute;display:grid;place-items:center;pointer-events:none}
.bg-actual{inset:0;margin:auto;width:max-content;height:max-content;z-index:3}
.bg-actual.pop{animation:bg-pop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes bg-pop{0%{transform:translateY(-34px) scale(.35);opacity:0}60%{opacity:1}100%{transform:none}}
.bg-actual .bb i{position:absolute;top:13%;font:700 calc(var(--d)*.16) Georgia,serif;color:#16161d;z-index:1}
.bg-actual .bb b{font-size:calc(var(--d)*.34);margin-top:calc(var(--d)*.06)}
.bg-banner{position:absolute;left:0;right:0;top:34%;text-align:center;font:800 2rem Georgia,serif;letter-spacing:.08em;color:#ffd24a;text-shadow:0 0 18px #ffb300,0 2px 0 #5a3d06,0 4px 12px #000;pointer-events:none;z-index:5}
.bg-banner.va{animation:bg-ban 1.7s ease-out}
@keyframes bg-ban{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.15);opacity:1}30%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
.bg-locutor{position:absolute;right:3%;top:2%;width:42%;display:flex;gap:.4rem;align-items:flex-start}
.bg-mic{width:26px;flex:none;filter:drop-shadow(0 2px 3px #000a)}
.bg-voz{flex:1;position:relative;background:#fbf4de;color:#1a1a22;border-radius:12px;padding:.25rem .45rem;font:700 .74rem Georgia,serif;box-shadow:0 3px 8px #0009;border:2px solid #d4a62a}
.bg-voz::before{content:"";position:absolute;left:-8px;top:10px;border:6px solid transparent;border-right-color:#d4a62a;border-left:0}
.bg-rack{display:flex;align-items:center;gap:.5rem;padding:.1rem .1rem 0;min-height:42px}
.bg-ultimas{display:flex;gap:.28rem;align-items:center;flex:1;min-width:0;overflow:hidden;padding:4px 0 4px 5px}
.bg-ultimas .bb:first-child{box-shadow:inset calc(var(--d)*-.1) calc(var(--d)*-.12) calc(var(--d)*.2) #0009,inset calc(var(--d)*.06) calc(var(--d)*.06) calc(var(--d)*.12) #fff6,0 0 0 2px #ffd24a,0 0 12px #ffb300}
.bg-cuenta{flex:none;color:#cdbf98;font:600 .74rem "Segoe UI",system-ui}

/* bola 3D (HTML): esfera con luz arriba a la izquierda, número en disco marfil y brillo */
.bb{--d:44px;--c1:#ff6a5e;--c2:#8a0d16;position:relative;display:inline-grid;place-items:center;width:var(--d);height:var(--d);border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 28%,#fff 0,var(--c1) 14%,var(--c1) 40%,var(--c2) 80%,#000 135%);
  box-shadow:inset calc(var(--d)*-.1) calc(var(--d)*-.12) calc(var(--d)*.2) #0009,inset calc(var(--d)*.06) calc(var(--d)*.06) calc(var(--d)*.12) #fff6,0 calc(var(--d)*.16) calc(var(--d)*.22) #000b}
.bb::before{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 32%,#fffef6,#efe8d2 62%,#c4b998);box-shadow:inset 0 0 calc(var(--d)*.06) #0007}
.bb::after{content:"";position:absolute;left:15%;top:8%;width:36%;height:21%;border-radius:50%;background:radial-gradient(ellipse,#fffe 0,#fff0 72%);transform:rotate(-35deg)}
.bb b{position:relative;z-index:1;font:700 calc(var(--d)*.3) Georgia,serif;color:#16161d}

/* tablero de bolas cantadas */
.bg-tablero{--cols:15;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2px;margin:.35rem 0;padding:.3rem;border-radius:10px;background:#000a;border:1px solid #b8860b66}
.bg-tablero.con-letra{grid-template-columns:14px repeat(var(--cols),1fr)}
.bg-tablero em{font:700 .62rem Georgia,serif;color:#ffd24a;display:grid;place-items:center}
.bg-tablero span{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font:600 .56rem "Segoe UI",system-ui;color:#8a8472;background:#ffffff0d}
.bg-tablero span.sal{color:#1a1200;background:radial-gradient(circle at 35% 30%,#fff2b8,#d4a62a 65%,#8a6212);box-shadow:0 0 4px #ffb30088}
.bg-tablero span.ult{box-shadow:0 0 0 2px #fff,0 0 10px #ffd24a;transform:scale(1.25);z-index:1}
.bg-estado{min-height:2.2rem;margin:.3rem 0;text-align:center;font:600 .86rem Georgia,serif;color:#ffe9a8}
.bg-estado .suave{font-weight:400}
.bg-hito{padding:.3rem .5rem;border-radius:10px;background:#000a;border:1px solid #ffffff22}
.bg-hito.mio{border-color:#7dff9a;color:#7dff9a;background:#0a2a14cc}
.bg-lista{list-style:none;margin:.35rem 0;padding:0;text-align:left;font:500 .78rem "Segoe UI",system-ui;color:#e9dfc0}
.bg-lista li{padding:.2rem .1rem;border-bottom:1px solid #ffffff14}.bg-lista .mas{color:#7dff9a}
.bg-sala-txt{font-size:.74rem}

/* cartones de papel con marcas de sello dorado */
.bg-cartones{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.bg-vacio{text-align:center;color:#cdbf98;padding:1rem .5rem;font-size:.85rem}.bg-vacio img{width:84px;opacity:.9;filter:drop-shadow(0 3px 6px #000a)}
.bg-carton{--ac:var(--bg-ac);position:relative;flex:1 1 150px;max-width:260px;border-radius:12px;padding:.3rem .3rem .35rem;color:#1a1a22;
  background:var(--bg-papel,none) center/cover,linear-gradient(160deg,var(--pap),#e9dfc0);border:3px solid transparent;
  background-clip:padding-box;box-shadow:0 8px 18px #000b,inset 0 0 0 1px #fff8;outline:3px solid var(--ac);outline-offset:-3px}
.bg-carton.n1{max-width:340px;flex-basis:300px}
.bg-carton.b90{flex:1 1 100%;max-width:400px}
.bg-carton.gana{animation:bg-gana .8s ease-in-out infinite alternate;outline-color:#ffd24a}
@keyframes bg-gana{from{box-shadow:0 8px 18px #000b,0 0 6px #ffd24a}to{box-shadow:0 8px 18px #000b,0 0 22px #ffd24a,0 0 40px #ffb30077}}
.bg-ch{display:flex;align-items:center;gap:.3rem;margin:0 0 .2rem .1rem;font:700 .7rem Georgia,serif;color:var(--cartel)}
.bg-ce{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#2a4f9a,#0a1534 75%);box-shadow:0 0 0 2px #e2b53a;overflow:hidden;display:grid;place-items:center}
.bg-ce img{width:112%;height:112%;object-fit:contain}
.bg-ch small{margin-left:auto;font:600 .64rem "Segoe UI",system-ui;color:#6b5a2a}
.bg-grid{display:grid;gap:2px}
.bg-grid.g5{grid-template-columns:repeat(5,1fr)}
.bg-grid.g9{grid-template-columns:repeat(9,1fr)}
.bg-grid em{display:grid;place-items:center;height:20px;border-radius:6px 6px 0 0;font:800 .9rem Georgia,serif;color:#fff;background:linear-gradient(180deg,var(--cartel),#000a);font-style:normal}
.bg-c{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:4px;background:#fffdf4;box-shadow:inset 0 0 0 1px #c9b27a,inset 0 -2px 0 #0001;font:700 .98rem Georgia,serif;overflow:hidden;touch-action:manipulation}
.g9 .bg-c{aspect-ratio:auto;height:38px;font-size:1rem}
.bg-c.vacia{background:repeating-linear-gradient(135deg,#e6d9ae 0 4px,#f0e6c2 4px 8px);box-shadow:inset 0 0 0 1px #c9b27a}
.bg-c.libre{background:#0a1534}.bg-c.libre img{width:92%;height:92%;object-fit:contain}
.bg-c span{position:relative;z-index:1}
.bg-c.mk::after{content:"";position:absolute;inset:8%;border-radius:50%;z-index:2;background:radial-gradient(circle at 36% 30%,#fff8,#0000 38%),radial-gradient(circle,#e8b82bd8 0,#c9922ad0 62%,#8a5d10c8 100%);box-shadow:0 1px 3px #0008,inset 0 0 0 1.5px #fff4;animation:bg-sello .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes bg-sello{from{transform:scale(2.2);opacity:0}}
.bg-c.pide{animation:bg-pide .8s ease-in-out infinite alternate;box-shadow:inset 0 0 0 2px #ffb300}
@keyframes bg-pide{from{background:#fffdf4}to{background:#ffe9a8}}

/* mando fijo abajo */
.bg-mando{position:relative;z-index:6;background:linear-gradient(180deg,#000a,#000e);border-top:1px solid #b8860b66;padding:.3rem .4rem calc(.4rem + env(safe-area-inset-bottom))}
.bg-sel{display:flex;gap:.35rem;justify-content:center;margin-bottom:.3rem}
.bg-sel button{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:0;padding:.22rem .2rem;border-radius:12px;border:1px solid #b8860b88;background:linear-gradient(180deg,#2a2418,#14110a);color:#e9dfc0;font:600 .7rem "Segoe UI",system-ui}
.bg-sel button b{font:800 1.05rem Georgia,serif;color:#ffd24a;display:inline}
.bg-sel button small{color:#cdbf98;font-size:.68rem}
.bg-sel button.sel{background:linear-gradient(180deg,#ffe58a,#d4a62a);color:#1a1200;box-shadow:0 0 0 2px #fff3,0 0 12px #ffb30077}.bg-sel button.sel b,.bg-sel button.sel small{color:#1a1200}
#bg-jugar{width:100%;max-width:380px;font-size:.98rem;padding:.62rem .6rem}
.bg-ctrl{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.bg-ctrl .rp-boton.chico{font-size:.82rem;padding:.5rem .8rem}
.bg-pie{margin:.5rem .1rem}
.bg-pie p{margin:.3rem 0}.bg-pr{margin:.2rem 0 .2rem 1.1rem;padding:0}
@media(min-width:700px){.bg-pantalla{max-width:520px;margin:0 auto}}