/* Juegos vibe de Super Cash: una sola pantalla para todos, con emojis. */
#vibe{position:fixed;inset:0;z-index:24000;font-family:"Segoe UI",Arial,sans-serif;color:#fff;background:#05060c;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#vibe[hidden]{display:none}
#vibe *{box-sizing:border-box}
#vibe button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}
#vibe button:disabled{cursor:default;opacity:.42}
.vb-app{position:absolute;inset:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:100%;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c2) 55%,transparent),transparent 62%),linear-gradient(180deg,var(--c1),#05060c 88%)}
.vb-emo{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;line-height:1}

/* barra de arriba */
.vb-top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0009;border-bottom:1px solid #ffffff1f}
.vb-top h1{flex:1;min-width:0;margin:0;font-size:clamp(16px,2.4vw,26px);font-weight:900;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 #000}
.vb-top h1 small{font-size:.55em;font-weight:600;opacity:.7;margin-left:8px;letter-spacing:1px;text-transform:uppercase}
.vb-top button{min-width:42px;height:40px;border-radius:10px;background:#ffffff14;border:1px solid #ffffff2a;font-size:19px}
.vb-top button:hover{background:#ffffff26}
.vb-top .vb-exit{background:#c2263233;border-color:#ff5d6a66}

/* franja de giros gratis */
.vb-banner{min-height:0;text-align:center;font-weight:900;font-size:clamp(14px,2.2vw,22px);color:#ffe86b;text-shadow:0 2px 0 #000;padding:0 8px}
.vb-banner:not(:empty){padding:6px 8px;background:linear-gradient(90deg,transparent,#000a,transparent)}

/* rodillos */
.vb-stage{position:relative;display:grid;place-items:center;min-height:0;width:100%;max-width:none;margin:0;padding:8px}
.vb-frame{position:relative;padding:calc(var(--cell)*.08);border-radius:calc(var(--cell)*.22);
  background:linear-gradient(160deg,#ffffff38,#ffffff08 40%,#0000004d),var(--c1);box-shadow:0 0 0 2px #ffffff30,0 18px 40px #000c,inset 0 0 30px #0008}
.vb-reels{display:grid;grid-template-columns:repeat(var(--R),var(--cell));gap:calc(var(--cell)*.06)}
.vb-reel{position:relative;height:calc(var(--cell)*var(--F));overflow:hidden;border-radius:calc(var(--cell)*.14);
  background:linear-gradient(180deg,#0b0d18,#1b2033 50%,#0b0d18);box-shadow:inset 0 6px 14px #000c,inset 0 -6px 14px #000c}
.vb-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.vb-cell{height:var(--cell);display:grid;place-items:center;font-size:calc(var(--cell)*.6);position:relative;transition:filter .2s,transform .2s}
.vb-cell span{filter:drop-shadow(0 3px 2px #000a)}
.vb-cell.w{animation:vbLatido .55s ease-in-out infinite alternate}
.vb-cell.w::after{content:"";position:absolute;inset:6%;border-radius:18%;border:3px solid var(--lc,#ffe24a);box-shadow:0 0 16px var(--lc,#ffe24a),inset 0 0 12px var(--lc,#ffe24a)}
.vb-cell.apag{filter:brightness(.38) saturate(.5)}
.vb-cell.especial span{filter:drop-shadow(0 0 10px #ffd84a)}
@keyframes vbLatido{from{transform:scale(1)}to{transform:scale(1.1)}}
.vb-exp{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cell)*1.3);background:#1a1200c9;border:3px solid #ffcf4d;border-radius:inherit;z-index:3;animation:vbExp .45s ease-out}
@keyframes vbExp{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
.vb-lines{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.vb-lines polyline{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #000)}
.vb-msg{position:absolute;left:50%;bottom:calc(var(--cell)*-.1);translate:-50% 0;z-index:6;padding:6px 16px;border-radius:999px;background:#000c;border:1px solid #ffffff40;
  font-weight:800;font-size:clamp(14px,2vw,20px);white-space:nowrap;max-width:96%;overflow:hidden;text-overflow:ellipsis}
.vb-msg:empty{display:none}
.vb-msg.big{color:#ffe14d;font-size:clamp(18px,3vw,30px);animation:vbPop .4s ease-out}
@keyframes vbPop{from{transform:scale(.6)}to{transform:none}}

/* consola */
.vb-console{display:grid;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#0006,#000d);border-top:1px solid #ffffff22}
.vb-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vb-meter{background:#00000080;border:1px solid #ffffff22;border-radius:10px;padding:4px 8px;text-align:center;min-width:0}
.vb-meter small{display:block;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:1px}
.vb-meter b{display:block;font-size:clamp(15px,2.3vw,24px);font-variant-numeric:tabular-nums;color:#ffe86b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-controls{display:flex;gap:8px;align-items:stretch;justify-content:center;flex-wrap:wrap}
.vb-adj{display:flex;align-items:center;background:#00000080;border:1px solid #ffffff2a;border-radius:12px;overflow:hidden}
.vb-adj label{font-size:11px;opacity:.75;padding:0 6px;text-transform:uppercase;letter-spacing:.5px}
.vb-adj button{width:40px;height:46px;font-size:22px;font-weight:900;background:#ffffff12}
.vb-adj output{min-width:54px;text-align:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
#vibe .vb-btn{min-width:84px;height:48px;padding:0 14px;border-radius:12px;font-weight:900;letter-spacing:.5px;background:linear-gradient(#3a4566,#20273e);border:1px solid #ffffff33;box-shadow:0 3px 0 #000}
#vibe .vb-btn.on{background:linear-gradient(#2fb36b,#147a42)}
#vibe .vb-btn.dob{background:linear-gradient(#d23b4a,#8e1823)}
#vibe .vb-start{min-width:130px;height:56px;border-radius:16px;font-size:20px;font-weight:900;letter-spacing:1px;color:#1b1300;
  background:radial-gradient(circle at 50% 30%,#fff7b0,#ffc928 45%,#d88a00);border:2px solid #fff3;box-shadow:0 4px 0 #6b4200,0 0 22px #ffbf2f66}
#vibe .vb-start:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #6b4200}

/* capas */
.vb-ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:14px;background:#000b;backdrop-filter:blur(3px)}
.vb-ov[hidden]{display:none}
.vb-card{width:min(760px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#1b2033,#0d1020);border:1px solid #ffffff33;border-radius:18px;padding:18px;box-shadow:0 30px 60px #000c}
.vb-card h2{margin:0 0 10px;font-size:clamp(20px,3vw,30px);text-align:center;color:#ffe86b;text-shadow:0 2px 0 #000}
.vb-card p{margin:6px 0;line-height:1.4;opacity:.92}
.vb-card .vb-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.vb-big{font-size:clamp(40px,9vw,80px);text-align:center;margin:6px 0}
.vb-num{font-size:clamp(26px,5vw,44px);font-weight:900;text-align:center;color:#7dffb0}

/* tabla de pagos */
.vb-pay{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:8px 0}
.vb-pay div{display:flex;gap:10px;align-items:center;background:#ffffff0d;border-radius:10px;padding:6px 10px}
.vb-pay .vb-emo{font-size:34px;width:42px;text-align:center}
.vb-pay small{display:block;opacity:.75}
.vb-pay b{color:#ffe86b;font-variant-numeric:tabular-nums}
.vb-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin:8px 0}
.vb-mini svg{width:100%;background:#0006;border-radius:6px}
.vb-sec{margin-top:12px;padding-top:8px;border-top:1px solid #ffffff1f}
.vb-sec h3{margin:0 0 4px;font-size:16px;color:#9fd3ff}

/* bono de elegir */
.vb-cajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:10px;margin:12px 0}
#vibe .vb-caja{aspect-ratio:1;border-radius:16px;font-size:clamp(34px,7vw,56px);background:radial-gradient(circle at 40% 30%,#ffffff40,#ffffff08 60%),var(--c2);border:2px solid #ffffff55;box-shadow:0 6px 0 #0008}
.vb-caja:hover:not(:disabled){transform:translateY(-3px)}
#vibe .vb-caja.abierta{background:#0c3a22;border-color:#5dffa0;font-size:clamp(18px,3.4vw,26px);font-weight:900;color:#7dffb0}
#vibe .vb-caja.trampa{background:#4a0d14;border-color:#ff5d6a;color:#ff9aa3}

/* doblar */
.vb-cartas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0}
#vibe .vb-carta{width:clamp(64px,13vw,104px);aspect-ratio:5/7;border-radius:10px;background:repeating-linear-gradient(45deg,#7b1730 0 8px,#5a0f22 8px 16px);border:3px solid #fff;
  display:grid;place-items:center;font-size:clamp(28px,6vw,46px);font-weight:900;color:#111;box-shadow:0 8px 16px #0009}
#vibe .vb-carta.cara{background:#fff}
#vibe .vb-carta.roja{color:#d0142c}
.vb-carta.crup{outline:3px solid #ffe86b;outline-offset:3px}
button.vb-carta:hover:not(:disabled){transform:translateY(-4px)}
.vb-hist{display:flex;gap:6px;justify-content:center;min-height:30px}
.vb-hist span{width:22px;height:30px;border-radius:4px;background:#fff;color:#111;display:grid;place-items:center;font-size:14px;font-weight:900}
.vb-hist span.r{color:#d0142c}
.vb-rojo{background:linear-gradient(#e2313f,#8d1520)!important}
.vb-negro{background:linear-gradient(#3b3b3b,#0d0d0d)!important}

.vb-err .vb-card{border-color:#ff6a75}

@media (max-width:640px){
  #vibe .vb-start{min-width:100%;order:9;height:54px}
  #vibe .vb-btn{min-width:64px;height:44px;padding:0 8px;font-size:13px}
  .vb-top{padding:6px 8px;gap:6px}
  .vb-top button{min-width:36px;height:36px;font-size:17px}
  .vb-adj button{width:34px;height:42px}
  .vb-adj output{min-width:44px;font-size:15px}
  .vb-btn{min-width:64px;height:44px;padding:0 8px;font-size:13px}
  .vb-start{min-width:100%;order:9;height:54px}
  .vb-meter small{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.vb-cell.w{animation:none}}