/* Keno Royal y Raspa Royal. Móvil vertical primero (~390 px de ancho, ~664 de alto útil): todo cabe sin desplazar.
   Paleta: negro laca, marfil y oro. Orden fijo: bombo/boleto → tablero → cuentas → resumen → botones → fichas. */
.lo-pantalla{background:var(--rp-fondo,none) center/cover no-repeat,radial-gradient(560px 380px at 50% 0,#6b4a1a55 0,#0000 70%),linear-gradient(180deg,#0a0807,#15100c 60%,#050403)}
.lo-escena{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:.3rem .45rem 0;position:relative;z-index:2}
.lo-dato{flex:none;min-height:48px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 .45rem;position:relative;z-index:2}
.lo-dato .rj-res{margin:0;width:100%;max-width:24rem}
.lo-dato .rj-c{padding:.18rem .2rem}
.lo-pista-txt{font:600 .78rem "Segoe UI",system-ui;text-align:center;color:#cdbf98;padding:0 .5rem}
.lo-mando{flex:none;display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.3rem .6rem .35rem;position:relative;z-index:6}
.lo-jugar{flex:1;max-width:230px;font-size:.98rem;padding:.5rem .8rem;letter-spacing:.05em;text-transform:uppercase;display:flex;gap:.45rem;justify-content:center;align-items:baseline}
.lo-jugar b{font-size:.88rem;letter-spacing:0}
.lo-lado{padding:.48rem .75rem;font-size:.78rem;white-space:nowrap}
.lo-fichas{flex:none;padding:.1rem 0 calc(.3rem + env(safe-area-inset-bottom));position:relative;z-index:6;display:flex;gap:.3rem;justify-content:center}
.lo-fichas .rp-ficha{--t:36px!important}
.lo-reglas{width:30px;height:30px;padding:0;border-radius:50%;font:700 .95rem Georgia,serif;display:grid;place-items:center}
.lo-pantalla .rp-titulo{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;letter-spacing:0}
.lo-pantalla .rp-barra{gap:.4rem;padding:.3rem .55rem}
.lo-pantalla .rp-casino{padding:.28rem .6rem;font-size:.78rem}
.lo-pantalla .rp-barra .saldo{font-size:.8rem!important;padding:.15rem .55rem!important}
.lo-pantalla .rp-sub,.lo-pantalla .rp-barra>span[style*="flex:1"]{display:none}
.lo-modal{text-align:left}.lo-modal h2,.lo-modal>p:first-of-type{text-align:center}
.lo-reg{list-style:none;padding:0;margin:.5rem 0}.lo-reg li{display:flex;justify-content:space-between;gap:.5rem;padding:.2rem 0;border-bottom:1px solid #ffffff18;font-size:.84rem}.lo-reg i{font-style:normal}.lo-reg b{color:var(--oro,#ffc627);text-align:right}.lo-reg small{color:#cdbf98;font-weight:600}

/* ------------------------------------------------------------ keno: bombo */
.lo-fila-bombo{flex:none;height:clamp(84px,13vh,130px);display:flex;gap:.55rem;align-items:center;padding:0 .2rem}
.lo-bombo{height:100%;aspect-ratio:1;flex:none;filter:drop-shadow(0 8px 10px #000c)}
.lo-bombo svg{display:block;width:100%;height:100%}
.lo-giro{transform-origin:50px 52px;animation:lo-gira 1.5s linear infinite;animation-play-state:paused}
.lo-giro.gira{animation-play-state:running}
@keyframes lo-gira{to{transform:rotate(360deg)}}
.lo-salida{flex:1;min-width:0;height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;column-gap:.6rem;align-items:center;
  background:linear-gradient(180deg,#ffffff0d,#0000 60%),#0d0a08;border:1px solid #d4a62a66;border-radius:14px;padding:.3rem .55rem;box-shadow:inset 0 0 18px #000a}
.lo-actual{grid-row:1;grid-column:1;width:clamp(48px,8.5vh,70px);height:clamp(48px,8.5vh,70px);display:grid;place-items:center}
.lo-cuenta{grid-row:1;grid-column:2;font:700 .95rem Georgia,serif;color:#ffe9a8;letter-spacing:.06em}
.lo-rastro{grid-row:2;grid-column:1/3;display:flex;gap:3px;min-height:20px;align-items:center}
.lo-rastro span{flex:none;min-width:20px;height:20px;padding:0 2px;border-radius:999px;display:grid;place-items:center;font:700 .62rem Georgia,serif;color:#14100c;background:radial-gradient(circle at 35% 30%,#fffdf2,#d9cca4);opacity:.85}
.lo-rastro span.h{background:radial-gradient(circle at 35% 30%,#fff3b0,#d4a62a);box-shadow:0 0 0 1.5px #2ecc71;opacity:1}
.lo-bola{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffdf2 0,#ece1bf 52%,#a99a6a 100%) center/cover;box-shadow:0 4px 10px #000c,inset 0 -4px 8px #6b5a2a66;animation:lo-cae .4s cubic-bezier(.2,1.3,.4,1)}
.lo-bola.oro{background:radial-gradient(circle at 34% 28%,#fff6bf 0,#f0c344 50%,#8a5f10 100%) center/cover;box-shadow:0 0 0 3px #2ecc71,0 4px 12px #000c,inset 0 -4px 8px #5a3d0566}
.lo-bola b{display:grid;place-items:center;width:62%;height:62%;border-radius:50%;background:#fffdf2e6;font:700 clamp(.9rem,3vh,1.3rem) Georgia,serif;color:#14100c}
@keyframes lo-cae{from{transform:translate(-34px,18px) scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ------------------------------------------------------------ keno: tablero 10 x 8 */
.lo-tablero{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:2px;padding:6px 5px;border-radius:14px;
  background:linear-gradient(180deg,#ffffff0f,#0000 40%),linear-gradient(160deg,#16110d,#0a0807);border:2px solid #b8860b99;box-shadow:inset 0 0 20px #000,0 6px 16px #000a}
.lo-tablero.bloqueado{filter:saturate(.9)}
.lo-c{min-width:0;min-height:0;padding:0;border:0;background:none;display:grid;place-items:center;touch-action:manipulation;color:#f5ecd2}
.lo-n{position:relative;height:min(100%,38px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#2c241d,#0d0a08 70%);box-shadow:inset 0 0 0 1px #d4a62a55,inset 0 2px 3px #ffffff14;transition:transform .1s}
.lo-n b{font:700 clamp(.6rem,3.3vw,.82rem) Georgia,serif;color:#efe4c4;line-height:1}
.lo-n i{display:none;position:absolute;right:-3px;top:-4px;width:13px;height:13px;border-radius:50%;background:#1fa853;color:#fff;font:700 9px/13px "Segoe UI",system-ui;font-style:normal;text-align:center;box-shadow:0 1px 3px #000a}
.lo-c:active .lo-n{transform:scale(.92)}
.lo-c.sel .lo-n{background:radial-gradient(circle at 34% 28%,#fff3b0 0,#e2b53a 55%,#8a5f10 100%);box-shadow:0 0 0 1.5px #ffe08a,0 2px 6px #000b}
.lo-c.sel .lo-n b{color:#1a1200}
.lo-c.sale .lo-n{background:radial-gradient(circle at 34% 28%,#fffdf2 0,#d9cca4 70%,#a99a6a 100%);box-shadow:0 0 0 1.5px #fffdf2aa,0 1px 4px #000a;opacity:.82}
.lo-c.sale .lo-n b{color:#2a2418}
.lo-c.acierto .lo-n{background:radial-gradient(circle at 34% 28%,#fff6bf 0,#f0c344 52%,#8a5f10 100%);box-shadow:0 0 0 2.5px #2ecc71,0 0 10px #2ecc71aa,0 2px 6px #000b}
.lo-c.acierto .lo-n b{color:#14100c}
.lo-c.acierto .lo-n i{display:block}
.lo-c.nueva .lo-n{animation:lo-pop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes lo-pop{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

/* tabla de pagos en una línea (con los números elegidos) y cuentas */
.lo-pagos{flex:none;min-height:34px;display:flex;flex-wrap:wrap;gap:3px 4px;align-items:center;justify-content:center;font:600 .66rem "Segoe UI",system-ui;color:#cdbf98;padding:0 .2rem}
.lo-pagos em{font-style:normal;color:#9d927a;margin-right:2px}
.lo-pg{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 2px;border-radius:999px;background:#0d0a08;border:1px solid #d4a62a55}
.lo-pg i{font-style:normal;min-width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font:700 .64rem Georgia,serif;color:#14100c;background:radial-gradient(circle at 34% 28%,#fff3b0,#d4a62a)}
.lo-pg b{color:#ffc627;font-size:.68rem}
.lo-pg.on{border-color:#2ecc71;box-shadow:0 0 0 1px #2ecc71,0 0 8px #2ecc7188;background:#12301c}
.lo-pg-txt{font-size:.74rem}
.lo-cuentas{flex:none;display:flex;gap:.45rem;justify-content:center;align-items:baseline;font:600 .8rem "Segoe UI",system-ui;color:#cdbf98;padding:0 0 .1rem}
.lo-cuentas b{color:#ffc627;font:700 .95rem Georgia,serif;margin-left:2px}
.lo-cuentas i{font-style:normal;color:#7d7358}

/* ------------------------------------------------------------ raspa: boleto de papel de lujo */
.lo-raspa .lo-escena{justify-content:center;align-items:center}
.lo-boleto{position:relative;width:min(96%,372px);padding:9px 10px 8px;border-radius:18px;background:var(--bol,none) center/cover,
  repeating-radial-gradient(circle at 20% 0,#b8860b12 0 2px,#0000 2px 9px),linear-gradient(150deg,#fffaea,#f1e6c2 55%,#e4d4a4);
  border:3px solid #c99a2a;box-shadow:0 0 0 2px #fff3b0 inset,0 0 0 5px #b8860b55 inset,0 14px 30px #000c;color:#2a2010;display:flex;flex-direction:column;gap:6px}
.lo-foil{position:relative;height:42px;border-radius:10px;display:grid;place-items:center;overflow:hidden;border:1px solid #fff9;
  background:linear-gradient(115deg,#ff9ad5,#ffe37a 18%,#7dffd4 36%,#7ab8ff 54%,#d49cff 72%,#ffe37a 90%,#ff9ad5) 0 0/220% 100%;animation:lo-foil 5s linear infinite;box-shadow:inset 0 0 14px #fff8,0 2px 6px #0006}
@keyframes lo-foil{to{background-position:220% 0}}
.lo-foil img{height:130%;width:auto;filter:drop-shadow(0 1px 2px #0008)}
.lo-lectura{position:absolute;inset:0;margin:auto;height:fit-content;width:fit-content;display:flex;gap:.45rem;align-items:baseline;background:#000d;border:1px solid #ffc62799;border-radius:999px;padding:.12rem .9rem;font:700 .86rem Georgia,serif;color:#ffe9a8;box-shadow:0 4px 14px #000a;white-space:nowrap}
.lo-lectura[hidden]{display:none}
.lo-lectura b{font-size:1.1rem;color:#ffc627}
.lo-lectura.va{animation:lo-sale .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes lo-sale{from{transform:scale(.5);opacity:0}to{transform:none}}
.lo-mayor{display:flex;align-items:center;justify-content:center;gap:.4rem;font:700 .74rem Georgia,serif;color:#5a3d05;text-align:center}
.lo-mayor b{color:#a8121a;font-size:.9rem}
.lo-mini{display:inline-block;width:26px;height:26px;flex:none}
.lo-mini svg,.lo-mini img{width:100%;height:100%;display:block}
.lo-rejilla{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;padding:6px;border-radius:12px;background:linear-gradient(160deg,#1c150e,#0a0807);box-shadow:inset 0 0 14px #000,0 0 0 2px #b8860b}
.lo-cas{aspect-ratio:1/.82;border-radius:9px;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#fffdf2,#efe3bf 70%,#d9c88f);box-shadow:inset 0 0 0 2px #c99a2a,inset 0 -6px 10px #a8842a33;overflow:hidden}
.lo-cas svg,.lo-cas img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 2px 2px #0004)}
.lo-cas.pierde{opacity:.45;filter:grayscale(.5)}
.lo-cas.gana{box-shadow:inset 0 0 0 3px #2ecc71,0 0 14px #2ecc71cc;animation:lo-pulso .8s ease-in-out 4}
@keyframes lo-pulso{50%{transform:scale(1.06)}}
.lo-plata{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;touch-action:none;cursor:crosshair;display:block}
.lo-brillo{position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle 70px at var(--px,50%) var(--py,50%),#ffffff55,#0000 70%)}
.lo-viruta{position:absolute;width:5px;height:2px;border-radius:1px;background:linear-gradient(90deg,#fff,#8d949c);pointer-events:none;z-index:4}
.lo-leyenda{display:flex;justify-content:space-between;gap:2px;padding:0 2px}
.lo-leyenda>span{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;border-radius:8px;font:700 .64rem Georgia,serif;color:#5a3d05}
.lo-leyenda .lo-mini{width:24px;height:24px}
.lo-leyenda .mayor{background:#fff3b0aa;box-shadow:0 0 0 1.5px #c99a2a}.lo-leyenda .mayor b{color:#a8121a}
@media(min-height:800px){.lo-cas{aspect-ratio:1/1}.lo-foil{height:50px}.lo-boleto{gap:9px}}
@media(max-height:700px){.lo-cas{aspect-ratio:1/.72}.lo-boleto{gap:4px;padding:8px 9px 6px}.lo-foil{height:36px}}
@media(max-width:380px){.lo-lado{padding:.45rem .55rem;font-size:.72rem}}

/* Raspa Royal: la tabla de premios sobre una placa clara, para que el adorno dorado del boleto no la tape (Nerio, 06/10/2026) */
.lo-leyenda{position:relative;z-index:2;margin:2px 4px 0;padding:4px 4px;border-radius:10px;background:#fff6d8;border:1.5px solid #c99a2a;box-shadow:0 2px 6px #0006,inset 0 0 8px #c99a2a44}
.lo-leyenda>span{color:#3d2700;font-size:.7rem}
.lo-leyenda .mayor{background:#ffe9a0}