/* ==================================================================
   SUPER CASH · MODO MAQUINA (kiosco) + aviso de cashback
   ================================================================== */

/* aviso de cashback: sale en cada tirada pagada (en cualquier modo) */
#cbAviso{position:fixed; left:50%; top:74px; translate:-50% 0; z-index:85; pointer-events:none;
  display:flex; align-items:baseline; gap:8px; padding:7px 14px; border-radius:99px;
  background:linear-gradient(180deg,#0f3a1c,#082612); border:1px solid #2fbf57;
  box-shadow:0 0 18px #2fbf5755, 0 8px 20px #0008; color:#c8ffd6; opacity:0}
#cbAviso b{font:800 20px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.04em; color:#fff;
  text-shadow:0 0 10px #3dff7a}
#cbAviso span{font:800 11px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.24em; color:#8ff0aa}
#cbAviso.sube{animation:cb-sube 1.8s ease-out both}
@keyframes cb-sube{0%{opacity:0; translate:-50% 10px} 12%{opacity:1; translate:-50% 0} 70%{opacity:1} 100%{opacity:0; translate:-50% -14px}}
@media (prefers-reduced-motion:reduce){ #cbAviso.sube{animation:none; opacity:1} }

/* ---------- kiosco: solo lobby y juego ---------- */
body.kiosco #slotPanel,
body.kiosco main > section.machine ~ div,
body.kiosco #raPanelToggle,
body.kiosco #raFocusToggle,
body.kiosco #acc,
body.kiosco .gx-user,
body.kiosco header #status{display:none !important}
body.panel-seguro #acc,
body.panel-seguro .gx-user{display:none !important}
body.kiosco main{grid-template-columns:minmax(0,1fr)}
body.kiosco:not(.ba-enabled):not(.ra-enabled):not(.cg-enabled) main{max-width:1150px; margin:0 auto}

.k-quien{display:flex; align-items:center; gap:10px}
.k-quien #gxQuienMaq{display:flex; flex-direction:column; line-height:1.1; text-align:right}
.k-quien #gxQuienMaq b{font:800 18px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.04em; color:#fff}
.k-quien #gxQuienMaq span{font-size:11px; color:#b9c3e6; letter-spacing:.06em}
.k-quien button{height:34px; padding:0 14px; border-radius:8px; border:1px solid #ffffff40; background:#0006; color:#fff;
  font:800 14px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.12em; cursor:pointer}
.k-quien button:hover{background:#c0161680; border-color:#ff5d5d}

/* pantalla de ingreso de la maquina */
#kIngreso{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px;
  background:radial-gradient(900px 520px at 50% -10%,#3a2600 0%,transparent 60%),
             radial-gradient(800px 480px at 50% 115%,#3a0505 0%,transparent 60%), #07080c}
#kIngreso[hidden]{display:none}
#kIngreso .k-card{width:min(420px,100%); display:grid; gap:14px; padding:34px 30px 26px; border-radius:20px;
  background:#12151ef2; border:1px solid #2b3142; box-shadow:0 30px 80px #000c}
#kIngreso .k-marca{text-align:center; font:900 56px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.05em}
#kIngreso .k-marca b{color:#ffd21f; text-shadow:0 0 22px #ffc40066}
#kIngreso .k-marca i{font-style:normal; color:#ff2b2b; margin-left:.22em; text-shadow:0 0 22px #ff2b2b66}
#kIngreso .k-sub{margin:-4px 0 6px; text-align:center; color:#9aa3ba; font:14px/1.4 'Segoe UI',sans-serif}
#kIngreso label{display:grid; gap:6px}
#kIngreso label span{font:700 12px/1 'Segoe UI',sans-serif; color:#b8c0d4; letter-spacing:.04em}
#kIngreso input{height:50px; padding:0 14px; border-radius:10px; border:1px solid #384058; background:#0a0c12; color:#fff;
  font:600 20px/1 'Segoe UI',sans-serif; outline:none; -webkit-user-select:text; user-select:text}
#kIngreso input:focus{border-color:#ffd21f; box-shadow:0 0 0 3px #ffd21f33}
#kIngreso button{height:54px; border:0; border-radius:12px; cursor:pointer; margin-top:4px;
  background:linear-gradient(180deg,#ffe25c,#ffb800); color:#1d1400;
  font:900 24px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.14em}
#kIngreso button:disabled{opacity:.6}
#kIngreso .k-msg{min-height:18px; color:#ff9d96; font:600 14px/1.3 'Segoe UI',sans-serif; text-align:center}
#kIngreso .k-pie{margin:0; text-align:center; color:#6f7890; font:12px/1.4 'Segoe UI',sans-serif}

/* el bingo va en una capa encima de todo: los avisos tienen que quedar arriba */
body.bingo-open #cbAviso, body.bingo-open #jpWin, body.bingo-open #jpAviso{z-index:100010}

/* ---------- CASHBACK: la maquina se quedo en 0 ---------- */
#cbListo{position:fixed; inset:0; z-index:100015; display:grid; place-items:center; padding:16px;
  background:radial-gradient(ellipse at 50% 45%,#0b3a1ccc 0%,#000000e0 70%)}
#cbListo[hidden], #cbPildora[hidden]{display:none}
#cbListo .cb-caja{position:relative; overflow:hidden; width:min(480px,100%); padding:30px 28px 22px; border-radius:26px;
  text-align:center; isolation:isolate;
  background:linear-gradient(180deg,#113f22,#06200f 60%,#041709); border:3px solid #ffd21f;
  box-shadow:0 0 0 6px #ffd21f22, 0 0 60px #2fff7a55, 0 30px 80px #000c}
#cbListo .cb-rayos{position:absolute; inset:-60%; z-index:-1; opacity:.28;
  background:repeating-conic-gradient(from 0deg,#ffe25c 0 7deg,transparent 7deg 20deg);
  animation:cb-gira 14s linear infinite}
#cbListo p{margin:0}
#cbListo .cb-top{font:800 13px/1 'Segoe UI',sans-serif; letter-spacing:.3em; color:#a8f5c0}
#cbListo .cb-titulo{margin-top:8px; font:400 54px/1 'RJ Bungee','Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.04em;
  color:#ffd21f; text-shadow:0 3px 0 #9a5b00, 0 0 26px #ffc40099}
#cbListo .cb-monto{margin:14px 0 6px; display:flex; justify-content:center; align-items:baseline; gap:6px;
  font:900 64px/1 'Big Shoulders Display','Arial Narrow',sans-serif; color:#fff; text-shadow:0 0 22px #3dff7a, 0 4px 0 #0a5a25}
#cbListo .cb-monto span{font-size:40px; color:#7dffa6}
#cbListo .cb-nota{color:#c8e8d2; font:14px/1.4 'Segoe UI',sans-serif}
#cbListo #cbCobrar{margin-top:18px; width:100%; height:66px; border:0; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,#fff3a0,#ffc400 50%,#e39a00 51%,#ffc93a); color:#2a1600;
  font:400 26px/1 'RJ Bungee','Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.06em;
  box-shadow:0 6px 0 #8a5200, 0 0 30px #ffd21f88; animation:cb-late 1.1s ease-in-out infinite}
#cbListo #cbCobrar:active{translate:0 4px; box-shadow:0 2px 0 #8a5200, 0 0 30px #ffd21f88}
#cbListo #cbCobrar:disabled{animation:none; opacity:.7; cursor:wait}
#cbListo .cb-msg{min-height:18px; margin-top:8px; color:#ffb4ad; font:600 14px/1.3 'Segoe UI',sans-serif}
#cbListo .cb-luego{margin-top:2px; border:0; background:none; color:#9fb7a8; cursor:pointer;
  font:600 13px/1 'Segoe UI',sans-serif; text-decoration:underline}
#cbListo.entra .cb-caja{animation:cb-entra .55s cubic-bezier(.2,1.4,.4,1) both}

#cbPildora{position:fixed; right:18px; bottom:132px; z-index:100014; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:10px 18px; border-radius:16px; cursor:pointer; border:2px solid #ffd21f;
  background:linear-gradient(180deg,#135a2c,#073a18); color:#fff; box-shadow:0 0 24px #2fff7a66, 0 10px 24px #0009;
  animation:cb-late 1.4s ease-in-out infinite}
#cbPildora span{font:800 11px/1 'Segoe UI',sans-serif; letter-spacing:.24em; color:#ffd21f}
#cbPildora b{font:900 26px/1 'Big Shoulders Display','Arial Narrow',sans-serif}

/* el aviso "+X CASHBACK" al cobrar: mas grande y en el centro */
#cbAviso{z-index:100016}

@keyframes cb-gira{to{rotate:360deg}}
@keyframes cb-late{0%,100%{scale:1} 50%{scale:1.04}}
@keyframes cb-entra{0%{opacity:0; scale:.6} 100%{opacity:1; scale:1}}
@media (prefers-reduced-motion:reduce){
  #cbListo .cb-rayos, #cbListo #cbCobrar, #cbPildora, #cbListo.entra .cb-caja{animation:none}
}