/* =========================================================
   CASINO — Sistema visual
   1. Tokens  2. Base  3. Componentes  4. Paneles  5. Lobby
   6. Tragamonedas  7. Ruleta  8. Blackjack  9. Accesibilidad
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#0B0912; --bg2:#120E1C; --panel:#1B1528; --panel2:#241C35; --line:#33294a; --line2:#463a63;
  --gold:#D6A73B; --gold-l:#F6D77B; --gold-d:#8A6212; --gold-xl:#FFF1B8;
  --felt:#07583F; --felt-d:#03281B; --felt-l:#0E7A55;
  --red:#A91636; --red-l:#E2475F; --green:#2BB673; --green-d:#1A7A4B; --blue:#5B8CFF; --violet:#6A2C9A;
  --txt:#F5F0FA; --mut:#A79DBB; --mut2:#7E7494;
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
  --e1:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.25);
  --e2:0 6px 16px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --e3:0 18px 50px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.35);
  --glow-gold:0 0 0 1px rgba(246,215,123,.35),0 0 24px rgba(214,167,59,.25);
  --metal:linear-gradient(180deg,#FFF1B8 0%,#F6D77B 22%,#D6A73B 52%,#A57A1E 78%,#E9C463 100%);
  --metal-dark:linear-gradient(180deg,#3a3050 0%,#241C35 45%,#17111f 100%);
  --glass:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%,rgba(0,0,0,.15));
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"SF Pro Text",Roboto,Arial,sans-serif;
  --serif:Georgia,"Times New Roman","Iowan Old Style",serif;
  --t-fast:140ms; --t:220ms; --t-slow:300ms;
  --z-top:20; --z-modal:100; --z-toast:200;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);height:100%}
body{min-height:100%;color:var(--txt);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(900px 500px at 15% -10%,rgba(106,44,154,.35),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,rgba(214,167,59,.10),transparent 60%),
    radial-gradient(1000px 600px at 50% 120%,rgba(7,88,63,.25),transparent 60%),
    var(--bg);background-attachment:fixed}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--gold-l)}
.boot{display:grid;place-items:center;height:100vh;color:var(--mut)}
.hidden{display:none!important}
.mut{color:var(--mut)} .gold{color:var(--gold-l)} .red{color:var(--red-l)} .green{color:var(--green)}
.num{font-variant-numeric:tabular-nums}
.ico{flex:none;display:block}
.brand{font-family:var(--serif);font-weight:700;letter-spacing:.6px;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px;border-radius:6px}

/* ---------- 3. Componentes ---------- */
/* Botón */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;
  background:var(--metal-dark);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--e1);
  font-weight:650;white-space:nowrap;transition:transform var(--t-fast),filter var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.btn:hover{border-color:#5d4f80;filter:brightness(1.12)}
.btn:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
.btn.gold{background:var(--metal);color:#2a1a00;border-color:#b78a22;text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.18),0 3px 0 #6b4a0a,0 8px 18px rgba(214,167,59,.25)}
.btn.gold:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 1px 0 #6b4a0a}
.btn.green{background:linear-gradient(180deg,#3fd08b,#1f9a5d 55%,#167645);border-color:#2BB673;color:#04150c;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.btn.red{background:linear-gradient(180deg,#e2475f,#a91636 55%,#7b0f27);border-color:#c62a43}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.05)}
.btn.icon{padding:0;width:44px}
.btn.sm{min-height:36px;padding:6px 12px;font-size:13.5px;border-radius:10px}
.btn.sm.icon{width:36px}
.btn.lg{min-height:52px;padding:12px 24px;font-size:17px;border-radius:14px}
.btn.loading{color:transparent!important;text-shadow:none}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.gold.loading::after{border-color:rgba(42,26,0,.25);border-top-color:#2a1a00}
@keyframes spin{to{transform:rotate(360deg)}}

/* Inputs */
.input,select.input{width:100%;min-height:44px;padding:10px 12px;border-radius:12px;background:#0e0b16;border:1px solid var(--line);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,167,59,.18)}
label.f{display:block;margin-bottom:var(--sp3)}
label.f>span{display:block;font-size:13px;color:var(--mut);margin-bottom:6px;font-weight:600}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:48px}
.pw-wrap .eye{position:absolute;right:2px;top:0;width:44px;height:44px;display:grid;place-items:center;color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}

/* Marco metálico y tarjeta */
.metal-frame{position:relative;border-radius:var(--r-xl);padding:3px;background:var(--metal);box-shadow:var(--e3)}
.metal-frame>.inner{border-radius:calc(var(--r-xl) - 3px);overflow:hidden}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:var(--sp4);box-shadow:var(--e1)}

/* Fichas 3D */
.chip3d{--c:#b3122f;position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 50% 50%,var(--c) 0 50%,transparent 51%),
    repeating-conic-gradient(from 8deg,#fff 0 14deg,var(--c) 14deg 45deg);
  box-shadow:0 3px 0 rgba(0,0,0,.45),0 6px 10px rgba(0,0,0,.4),inset 0 0 0 2px rgba(0,0,0,.25);
  transition:transform var(--t-fast),box-shadow var(--t-fast)}
.chip3d::before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px dashed rgba(255,255,255,.75);background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.25),transparent 60%)}
.chip3d span{position:relative;font-weight:800;font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.chip3d.sel{transform:translateY(-6px);box-shadow:0 0 0 3px var(--gold-l),0 10px 18px rgba(0,0,0,.6)}
.chip3d.sm{width:32px;height:32px}.chip3d.sm span{font-size:10px}
.chip3d.sm::before{inset:16%;border-width:1.5px}
button.chip3d:hover{transform:translateY(-3px)}

/* Modal y toast */
.modal-bg{position:fixed;inset:0;background:rgba(5,3,10,.7);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:var(--z-modal);padding:16px;animation:fade var(--t)}
.modal{width:100%;max-width:460px;max-height:min(90vh,900px);overflow:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#221a33,#16111f);border:1px solid var(--line2);border-radius:var(--r-lg);padding:var(--sp5);box-shadow:var(--e3),var(--glow-gold);animation:pop var(--t)}
.modal.wide{max-width:860px}
.modal h3{font-family:var(--serif);font-size:21px;margin-bottom:var(--sp4);color:var(--gold-l)}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--sp4);position:sticky;bottom:-24px;padding:12px 0 4px;background:linear-gradient(transparent,#16111f 30%)}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
#toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:linear-gradient(180deg,#2c2340,#1f182e);border:1px solid var(--line2);padding:11px 16px;border-radius:12px;box-shadow:var(--e3);animation:pop var(--t);font-weight:600;display:flex;gap:8px;align-items:center}
.toast.ok{border-color:var(--green)}.toast.bad{border-color:var(--red-l)}
.toast.ok::before{content:"✓";color:var(--green);font-weight:900}.toast.bad::before{content:"!";color:var(--red-l);font-weight:900}
.err{background:#3a0f18;border:1px solid #7a1d2e;color:#ffc2cd;padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:14px}

/* Skeleton */
.skel-wrap{display:grid;gap:10px}
.skel{height:44px;border-radius:10px;background:linear-gradient(90deg,#1b1528 0%,#2a2140 50%,#1b1528 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- 4. Login y paneles ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b));position:relative;overflow:hidden}
.auth::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(400px 260px at 20% 25%,rgba(214,167,59,.18),transparent 70%),
  radial-gradient(500px 340px at 85% 75%,rgba(106,44,154,.35),transparent 70%),
  radial-gradient(300px 200px at 70% 10%,rgba(7,88,63,.35),transparent 70%);
  animation:ambient 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes ambient{to{transform:translate(3%,-2%) scale(1.05)}}
.auth-box{position:relative;width:100%;max-width:400px;border-radius:var(--r-xl);padding:3px;background:var(--metal);box-shadow:var(--e3),0 0 80px rgba(214,167,59,.12)}
.auth-box form{border-radius:calc(var(--r-xl) - 3px);background:linear-gradient(180deg,rgba(36,28,53,.97),rgba(15,11,22,.98));padding:30px 26px 26px}
.auth-logo{width:104px;height:104px;margin:-6px auto 4px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.auth h1{text-align:center;font-size:30px;line-height:1.15;margin-bottom:6px}
.auth p.sub{text-align:center;color:var(--mut);margin-bottom:22px}
.auth .disclaimer{text-align:center;font-size:12px;color:var(--mut2);margin-top:16px}

.top{position:sticky;top:0;z-index:var(--z-top);display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-t)) 16px 10px;
  background:linear-gradient(180deg,rgba(11,9,18,.95),rgba(11,9,18,.82));backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid rgba(214,167,59,.18);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.top .brand{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .logo{width:36px;height:36px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.role-badge{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:#2b2140;color:#d7c3ff;white-space:nowrap}
.role-badge.owner{background:linear-gradient(180deg,#4a3808,#2e2205);color:var(--gold-l);box-shadow:inset 0 0 0 1px rgba(246,215,123,.3)}
.role-badge.cashier{background:#0e3326;color:#7ee2ae}
.role-badge.player{background:#16284a;color:#9cc0ff}
.tabs{display:flex;gap:2px;padding:8px 16px 0;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none;background:rgba(11,9,18,.5)}
.tabs::-webkit-scrollbar{display:none}
.tab{min-height:44px;padding:10px 14px;border-radius:10px 10px 0 0;color:var(--mut);font-weight:650;white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--t-fast)}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--gold-l);border-bottom-color:var(--gold);background:linear-gradient(180deg,transparent,rgba(214,167,59,.08))}
.page{padding:20px 16px calc(60px + var(--safe-b));max-width:1240px;margin:0 auto}
.h2{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.kpi{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--e1)}
.kpi::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--accent,var(--line2))}
.kpi .l{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.kpi .v{font-size:25px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--mut2);margin-top:4px;line-height:1.35}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .input{width:auto;min-width:150px;padding:8px 10px}
.section{margin-top:26px}
.defs{display:grid;gap:6px;font-size:13px;color:var(--mut)}
.defs b{color:var(--txt)}

/* Gráfico */
.chart-card{padding:16px 16px 8px}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-bottom:8px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart svg{width:100%;height:auto;max-height:300px;display:block}
.chart .bar{transition:opacity var(--t-fast)}
.chart .bar:hover{opacity:.8}

/* Tablas */
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--e1)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{position:sticky;top:0;z-index:2;text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);padding:11px 12px;border-bottom:1px solid var(--line);background:#16111f;white-space:nowrap;font-weight:700}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--txt)}
.tbl th[data-dir]::after{content:" ▲";color:var(--gold)}
.tbl th[data-dir=desc]::after{content:" ▼"}
.tbl td{padding:11px 12px;border-bottom:1px solid #261f36;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#211a30}
.tbl .total-row td{font-weight:800;background:#16111f}
.tbl .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:750;white-space:nowrap}
.tag.add{background:#0e3326;color:#7ee2ae}.tag.rem{background:#3a0f18;color:#ffa3b4}
.tag.new{background:#16284a;color:#a9c7ff}.tag.del{background:#3d1a1a;color:#ff9a9a}
.tag.sys{background:#2b2140;color:#d7c3ff}.tag.off{background:#3a2a0c;color:#ffd27e}
.empty{padding:32px;text-align:center;color:var(--mut)}
@media (max-width:720px){
  .tbl-wrap{max-height:none}
  .tbl.cards thead{display:none}
  .tbl.cards tr{display:block;border-bottom:1px solid var(--line);padding:8px 4px}
  .tbl.cards td{display:flex;justify-content:space-between;gap:10px;border:0;padding:5px 10px;text-align:right}
  .tbl.cards td::before{content:attr(data-l);color:var(--mut);font-size:12px;text-align:left}
  .tbl.cards td.acts-td::before{content:none}
  .tbl.cards .acts{justify-content:flex-start}
}

/* ---------- 5. Lobby ---------- */
.balance{display:flex;align-items:center;gap:8px;min-height:40px;background:linear-gradient(180deg,#1a1408,#0e0b06);border:1px solid #6b4f14;border-radius:30px;padding:4px 14px 4px 5px;font-weight:800;box-shadow:inset 0 1px 0 rgba(246,215,123,.15),0 0 18px rgba(214,167,59,.12)}
.balance .lbl{font-size:10px;letter-spacing:.8px;color:var(--gold);font-weight:800;text-transform:uppercase;display:block;line-height:1}
.balance .amt{display:block;line-height:1.1;font-size:16px}
.balance.flash{animation:balflash .6s}
@keyframes balflash{40%{box-shadow:0 0 0 2px var(--gold-l),0 0 28px rgba(246,215,123,.5)}}
.hero{position:relative;text-align:center;padding:34px 10px 8px}
.hero .logo-xl{width:92px;height:92px;margin:0 auto 6px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(214,167,59,.25))}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.1}
.hero p{color:var(--mut);margin-top:6px}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:22px;perspective:1100px}
.game-tile{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;width:100%;border-radius:var(--r-lg);padding:2px;background:var(--metal);text-align:left;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform var(--t) ease-out,box-shadow var(--t);box-shadow:var(--e2);animation:tileIn .5s both}
.game-tile:nth-child(2){animation-delay:.06s}.game-tile:nth-child(3){animation-delay:.12s}.game-tile:nth-child(4){animation-delay:.18s}
@keyframes tileIn{from{opacity:0;transform:translateY(14px)}}
.game-tile:hover{transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--e3),0 0 30px rgba(214,167,59,.22)}
.game-tile.pressed{transform:scale(.98);box-shadow:var(--e1)}
.game-tile .inner{position:relative;border-radius:calc(var(--r-lg) - 2px);overflow:hidden;background:#0b0912}
.game-tile .cover{position:relative;aspect-ratio:16/10;overflow:hidden}
.game-tile .cover-svg{width:100%;height:100%;display:block;transition:transform .5s ease-out}
.game-tile:hover .cover-svg{transform:scale(1.04)}
.game-tile .shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.18),transparent 60%);opacity:0;transition:opacity var(--t)}
.game-tile:hover .shine{opacity:1}
.game-tile .info{padding:12px 92px 14px 14px;background:linear-gradient(180deg,#1b1528,#120e1c)}
.game-tile .info b{font-family:var(--serif);font-size:18px;display:block}
.game-tile .info span{font-size:13px;color:var(--mut)}
.game-tile .play{position:absolute;right:12px;bottom:14px;font-size:12px;font-weight:800;letter-spacing:.8px;color:#2a1a00;background:var(--metal);padding:6px 12px;border-radius:20px;box-shadow:0 2px 0 #6b4a0a}

/* ---------- 6. Tragamonedas ---------- */
.game-wrap{max-width:1000px;margin:0 auto;padding:14px 12px calc(30px + var(--safe-b))}
.cabinet{--cab1:#3b1a55;--cab2:#1d0f2c;--cab3:#120820;--accent:#c3245d;position:relative;max-width:920px;margin:0 auto;border-radius:34px 34px 22px 22px;padding:3px;background:var(--metal);box-shadow:var(--e3),0 0 60px rgba(214,167,59,.15)}
.cabinet.theme-clasico{--cab1:#6b0f22;--cab2:#33060f;--cab3:#1c0308;--accent:#ff6a3a}
.cab-in{border-radius:31px 31px 19px 19px;overflow:hidden;background:linear-gradient(180deg,var(--cab1),var(--cab2) 45%,var(--cab3))}
.cab-crown{position:relative;text-align:center;padding:16px 16px 12px;background:radial-gradient(120% 140% at 50% 0%,rgba(255,255,255,.12),transparent 60%);border-bottom:2px solid rgba(0,0,0,.4)}
.marquee{display:flex;justify-content:center;gap:clamp(6px,2vw,14px);margin-bottom:8px}
.marquee i{width:9px;height:9px;border-radius:50%;background:#ffd76a;box-shadow:0 0 8px #ffd76a;opacity:.45;animation:bulb 1.6s infinite}
.marquee i:nth-child(odd){background:var(--accent);box-shadow:0 0 8px var(--accent);animation-delay:.8s}
.cabinet.celebrate .marquee i{animation-duration:.35s}
@keyframes bulb{50%{opacity:1}}
.cab-title{font-size:clamp(26px,5vw,40px);line-height:1.05}
.cab-plate{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:20px;background:rgba(0,0,0,.45);border:1px solid rgba(246,215,123,.35);font-size:12.5px;letter-spacing:.8px;color:var(--gold-l);font-weight:700}
.cab-body{display:grid;grid-template-columns:22px 1fr 22px;align-items:stretch;padding:14px 10px}
.cab-rail{border-radius:10px;background:linear-gradient(90deg,#5c4512,#f6d77b 40%,#fff1b8 50%,#b78a22 70%,#4a370c);box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.cab-rail{display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:6px 0}
.cab-rail b{font-size:10px;color:#2a1a00;font-weight:900;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.55)}
.reel-window{position:relative;margin:0 8px;border-radius:16px;padding:8px;background:#05030a;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px rgba(214,167,59,.5),inset 0 10px 30px rgba(0,0,0,.9)}
.reels{position:relative;display:grid;gap:6px;width:max-content;margin:0 auto}
.reel{position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#8f889e 0%,#e8e4f0 14%,#fff 32%,#fff 68%,#e8e4f0 86%,#8f889e 100%)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 78%,rgba(0,0,0,.45));z-index:2}
.reel-strip{will-change:transform}
.reel-strip.blur{filter:blur(1.6px)}
.cell{display:grid;place-items:center;position:relative}
.cell svg{width:80%;height:80%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
.cell.win{z-index:3}
.cell.win svg{animation:symwin .55s ease-in-out infinite alternate}
.cell.win::after{content:"";position:absolute;inset:3px;border-radius:10px;border:3px solid var(--gold-l);box-shadow:0 0 16px var(--gold),inset 0 0 14px rgba(246,215,123,.45)}
.cell.dim{opacity:.35;transition:opacity var(--t)}
@keyframes symwin{to{transform:scale(1.1)}}
.glass{position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:4;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 80%,rgba(255,255,255,.06))}
.lines-svg{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.cab-led{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:0 18px;padding:10px 14px;border-radius:14px;background:#07040c;border:1px solid rgba(214,167,59,.35);box-shadow:inset 0 2px 10px rgba(0,0,0,.8)}
.led-cell .l{font-size:10.5px;letter-spacing:1px;color:var(--mut);text-transform:uppercase;font-weight:700}
.led-cell .v{font-size:20px;font-weight:800;color:#ffd76a;text-shadow:0 0 10px rgba(255,215,106,.5);font-variant-numeric:tabular-nums}
.led-cell.c{text-align:center;min-width:150px}
.led-cell.r{text-align:right}
.led-msg{font-size:13px;color:var(--mut);min-height:20px}
.led-msg b{color:var(--gold-l)}
.cab-controls{display:grid;grid-template-columns:1fr 1fr auto 1.2fr;gap:12px;align-items:center;padding:14px 18px 6px}
.stepper{background:#0b0712;border:1px solid var(--line);border-radius:14px;padding:6px 8px;text-align:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.stepper .l{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.stepper .c{display:flex;align-items:center;justify-content:space-between;gap:6px}
.stepper .c b{font-size:19px;font-variant-numeric:tabular-nums}
.stepper button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--metal-dark);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.stepper button:active{transform:scale(.94)}
.spin-big{position:relative;justify-self:center;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:16px;letter-spacing:1px;color:#2a1a00;
  background:radial-gradient(circle at 50% 35%,#fff7cf,#f6d77b 35%,#d6a73b 65%,#8a6212);
  box-shadow:0 0 0 5px #2a1a00,0 0 0 8px #b78a22,0 8px 0 3px #4a3308,0 14px 26px rgba(0,0,0,.6),inset 0 -6px 12px rgba(0,0,0,.25),inset 0 4px 10px rgba(255,255,255,.6);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.spin-big:active,.spin-big.down{transform:translateY(5px);box-shadow:0 0 0 5px #2a1a00,0 0 0 8px #b78a22,0 3px 0 3px #4a3308,0 6px 12px rgba(0,0,0,.6),inset 0 -4px 10px rgba(0,0,0,.25),inset 0 4px 10px rgba(255,255,255,.6)}
.spin-big:disabled{filter:grayscale(.5) brightness(.75);cursor:wait}
.spin-big.stop{background:radial-gradient(circle at 50% 35%,#ffd1d8,#e2475f 40%,#a91636 75%,#5b0a1c);color:#fff}
.auto-btn{flex-direction:column;gap:2px;min-height:64px;font-size:12px}
.auto-btn.on{background:linear-gradient(180deg,#e2475f,#a91636);border-color:#e2475f}
.cab-tray{height:30px;margin:10px 26px 14px;border-radius:0 0 40px 40px;background:linear-gradient(180deg,#05030a,#1a1324);box-shadow:inset 0 6px 12px rgba(0,0,0,.9),0 1px 0 rgba(246,215,123,.25)}
.cab-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 18px 14px;flex-wrap:wrap}
.paytable{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pt-item{display:flex;gap:10px;align-items:center;background:#0e0b16;border:1px solid var(--line);border-radius:12px;padding:10px}
.pt-item svg{width:52px;height:52px;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.pt-item div{font-size:13px;line-height:1.4}
@media (max-width:720px){
  .cab-controls{grid-template-columns:1fr 1fr;padding:12px 12px 4px}
  .cab-controls .auto-btn{order:3}
  .cab-controls .spin-wrap{order:4}
  .cab-body{grid-template-columns:12px 1fr 12px;padding:10px 6px}
  .cab-rail b{display:none}
  .reel-window{margin:0 5px;padding:6px}
  .cab-led{margin:0 10px;grid-template-columns:1fr 1fr;padding:8px 10px}
  .led-cell.c{grid-column:1/-1;order:-1;min-width:0}
  .led-cell .v{font-size:17px}
  .cab-tray{margin:8px 18px 12px;height:22px}
  .cab-foot{padding:0 12px 12px}
}

/* ---------- 7. Ruleta ---------- */
.rou-wrap{max-width:1040px}
.rou-stage{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:18px;align-items:center}
.wheel-box{position:relative;width:100%;max-width:380px;aspect-ratio:1/1;margin:0 auto;perspective:900px}
.wheel-box canvas{width:100%;height:100%;display:block;transform:rotateX(24deg);transform-origin:50% 60%;filter:drop-shadow(0 26px 24px rgba(0,0,0,.6))}
.rou-panel{display:grid;gap:12px}
.rou-result{display:flex;align-items:center;gap:16px}
.rou-num{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;font-size:36px;font-weight:900;color:#fff;border:3px solid var(--gold);box-shadow:var(--e2),inset 0 -6px 12px rgba(0,0,0,.35),inset 0 6px 10px rgba(255,255,255,.15);background:#2a2238}
.rou-num.red{background:radial-gradient(circle at 40% 30%,#e2475f,#a91636 70%)}.rou-num.black{background:radial-gradient(circle at 40% 30%,#3a3a44,#111 70%)}.rou-num.green{background:radial-gradient(circle at 40% 30%,#2bb673,#0f6b3e 70%)}
.rou-num.pop{animation:numpop .5s}
@keyframes numpop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}}
.rou-msg{font-size:18px;font-weight:800}
.rou-msg small{display:block;font-size:13px;font-weight:500;color:var(--mut)}
.hist{display:flex;gap:5px;flex-wrap:wrap}
.hist span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;box-shadow:inset 0 -2px 4px rgba(0,0,0,.35)}
.hist span:first-child{outline:2px solid var(--gold-l);outline-offset:1px}
.hist .none{width:auto;height:auto;box-shadow:none;color:var(--mut);font-weight:500;outline:0!important}
.hist .red{background:#a91636}.hist .black{background:#1d1d24;border:1px solid #444}.hist .green{background:#0f8a4c}
.rou-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rou-stats>div{background:#0e0b16;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rou-stats .l{font-size:10.5px;letter-spacing:.6px;color:var(--mut);text-transform:uppercase;font-weight:700}
.rou-stats .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.table-outer{position:relative;width:100%;overflow:hidden;margin-top:16px;border-radius:18px}
.table-outer.zoomed{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rtable{position:relative;margin:0 auto;transform-origin:0 0;box-sizing:content-box;user-select:none;-webkit-user-select:none;border-radius:16px;
  background:radial-gradient(ellipse at 50% 40%,#0e7a55,#07583f 55%,#03281b);border:8px solid #4a2a10;
  box-shadow:inset 0 0 0 2px #d6a73b,inset 0 0 40px rgba(0,0,0,.45),var(--e2)}
.rtable::before{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;opacity:.12;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:4px 4px}
.rcell{position:absolute;display:grid;place-items:center;font-weight:800;color:#fff;border:1px solid rgba(246,240,250,.5);cursor:pointer;font-size:18px;transition:background-color var(--t-fast)}
.rcell:hover,.rcell.cover{background-color:rgba(246,215,123,.22)}
.rcell .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 -3px 5px rgba(0,0,0,.35)}
.rcell .n.red{background:#a91636}.rcell .n.black{background:#111116}
.rcell.zero{background:linear-gradient(180deg,#14a35d,#0b6b3c);border-radius:40px 0 0 40px}
.rcell.out{font-size:14px;letter-spacing:.5px}
.rcell .dia{width:34px;height:20px;transform:rotate(45deg) scale(.8);border-radius:3px}
.rcell.hit{box-shadow:inset 0 0 0 4px var(--gold-l),0 0 20px rgba(246,215,123,.6);background-color:rgba(246,215,123,.3);z-index:1}
.hot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;cursor:pointer;z-index:4}
.hot:hover{background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(246,215,123,.8)}
.pchip{position:absolute;z-index:5;pointer-events:none;margin:-16px 0 0 -16px;animation:chipdrop .18s ease-out}
.pchip .chip3d{box-shadow:0 2px 0 rgba(0,0,0,.5),0 4px 0 color-mix(in srgb,var(--c) 70%,#000),0 6px 0 rgba(0,0,0,.45),0 8px 10px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.25)}
@keyframes chipdrop{from{transform:translateY(-10px);opacity:0}}
.chips-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 10px}
.rou-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.rou-actions .total{padding:0 8px;font-weight:700}
.rou-sticky{padding:4px 0 6px}
.rules-note{color:var(--mut);text-align:center;font-size:13px;margin-top:8px}
@media (max-width:760px){
  .rou-stage{grid-template-columns:1fr;gap:10px}
  .wheel-box{max-width:250px}
  .rou-panel{padding:12px}
  .rou-num{width:58px;height:58px;font-size:26px}
  .rou-msg{font-size:15px}
  .rou-stats>div{padding:5px 8px}.rou-stats .v{font-size:15px}
  .hist span{width:24px;height:24px;font-size:10.5px}
  .chips-bar{gap:5px}.chips-bar .chip3d{width:40px;height:40px}.chips-bar .chip3d span{font-size:11.5px}
}

/* ---------- 8. Blackjack ---------- */
.bj-wrap{max-width:1000px}
.bj-table{position:relative;overflow:hidden;border-radius:40px 40px 220px 220px/40px 40px 120px 120px;padding:26px 16px 44px;min-height:520px;text-align:center;
  background:radial-gradient(ellipse at 50% 10%,#12895c,#07583f 50%,#03281b);border:12px solid #4a2a10;
  box-shadow:inset 0 0 0 2px #d6a73b,inset 0 0 0 5px #2a1606,inset 0 0 80px rgba(0,0,0,.55),var(--e3)}
.bj-table::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);background-size:4px 4px}
.bj-arc{display:block;width:min(640px,100%);margin:-6px auto -18px;pointer-events:none;opacity:.85}
.shoe{position:absolute;right:22px;top:20px;width:74px;height:58px;border-radius:8px 8px 6px 6px;background:linear-gradient(180deg,#2a1d12,#120b06);box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 0 0 2px #6b4a0a}
.shoe::after{content:"";position:absolute;left:8px;right:8px;top:8px;height:30px;border-radius:4px;background:repeating-linear-gradient(45deg,#7d0f3a 0 4px,#a3184e 4px 8px);box-shadow:inset 0 0 0 2px #fff}
.bj-label{font-size:12px;color:#cfe9db;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;font-weight:700}
.bj-cards{display:flex;justify-content:center;min-height:116px;margin-bottom:8px;perspective:800px}
.bj-cards .pcard+.pcard{margin-left:-22px}
.pcard{position:relative;width:78px;height:112px;border-radius:9px;transform-style:preserve-3d;font-family:var(--serif)}
.pcard .face,.pcard .backf{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pcard .face{background:linear-gradient(160deg,#fff,#f4f1e8);color:#16161c;box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 0 0 1px #d9d3c3}
.pcard.r .face{color:#a91636}
.pcard .backf{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#5a0a2a 0 5px,#8f1446 5px 10px);box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 0 0 4px #fdfcf7,inset 0 0 0 6px #d6a73b}
.pcard.down{transform:rotateY(180deg)}
.pcard .tl{position:absolute;left:6px;top:5px;font-size:18px;font-weight:700;line-height:1;text-align:center}
.pcard .br{position:absolute;right:6px;bottom:5px;font-size:18px;font-weight:700;line-height:1;transform:rotate(180deg);text-align:center}
.pcard .mid{position:absolute;inset:0;display:grid;place-items:center;font-size:40px}
.pcard .tl small,.pcard .br small{display:block;font-size:14px}
.bj-total{display:inline-block;min-width:44px;background:rgba(0,0,0,.5);padding:3px 12px;border-radius:20px;font-weight:800;margin-bottom:10px;border:1px solid rgba(246,215,123,.3);font-variant-numeric:tabular-nums}
.bj-total.bust{background:#7b0f27;border-color:#e2475f}
.bj-hands{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:6px}
.bj-hand{position:relative;padding:10px 10px 8px;border-radius:16px;border:2px solid transparent;transition:border-color var(--t),background var(--t)}
.bj-hand.act{border-color:var(--gold-l);background:rgba(246,215,123,.08);box-shadow:0 0 24px rgba(246,215,123,.18)}
.bj-hand .hl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#cfe9db;margin-bottom:6px;font-weight:700}
.bj-hand .bet{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;margin-top:4px}
.res{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}
.res.win{background:var(--metal);color:#2a1a00}.res.lose{background:#7b0f27;color:#ffd0d8}.res.push{background:#3b3550;color:#e6e0f5}
.bj-msg{font-family:var(--serif);font-size:28px;font-weight:700;min-height:40px;margin:6px 0;text-shadow:0 2px 8px #000}
.bet-circle{width:96px;height:96px;margin:6px auto 4px;border-radius:50%;border:2px dashed rgba(246,215,123,.7);display:grid;place-items:center;position:relative}
.bet-circle .stack{position:relative;width:52px;height:52px}
.bet-circle .stack .chip3d{position:absolute;left:0}
.bet-circle .amt{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-weight:800;color:var(--gold-l);white-space:nowrap}
.bj-ctrl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.bj-ctrl .btn{min-width:118px}
.bj-foot{margin-top:16px;font-size:12px;color:#cfe9db}
.bj-opts{display:flex;justify-content:center;gap:8px;margin-top:8px}
@media (max-width:560px){
  .bj-table{border-width:8px;padding:18px 8px 36px;border-radius:28px 28px 120px 120px/28px 28px 70px 70px;min-height:480px}
  .pcard{width:58px;height:84px}.pcard .mid{font-size:30px}.pcard .tl,.pcard .br{font-size:14px}.pcard .tl small,.pcard .br small{font-size:11px}
  .bj-cards{min-height:88px}.bj-cards .pcard+.pcard{margin-left:-16px}
  .shoe{width:54px;height:44px;right:12px;top:12px}.shoe::after{height:20px}
  .bj-ctrl .btn{min-width:0;flex:1;font-size:15px;padding:10px 6px}
  .bj-msg{font-size:22px}
}

/* ---------- Encabezado de juego (móvil) ---------- */
@media (max-width:600px){
  .top{gap:8px;padding:calc(8px + var(--safe-t)) 10px 8px}
  .top .brand,.top .who{display:none}
  .role-badge{font-size:10px}
  .balance .lbl{display:none}
}

/* ---------- 9. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .auth::before{animation:none}
  .game-tile{transform:none!important}
  .reel-strip.blur{filter:none}
}

/* ---------- 10. Marca: emblema y logotipo ---------- */
.emblem{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.emblem3d{--es:1.6;position:relative;width:calc(var(--es) * 100px);height:calc(var(--es) * 100px);font-size:calc(var(--es) * 100px);perspective:calc(var(--es) * 500px);margin:0 auto}
.emblem-rig{position:absolute;inset:0;transform-style:preserve-3d;animation:emFloat 6s ease-in-out infinite,emSway 9s ease-in-out infinite;will-change:transform}
.emblem-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.emblem-layer:first-child{filter:drop-shadow(0 .06em .08em rgba(0,0,0,.6))}
.emblem-layer+.emblem-layer{filter:drop-shadow(0 .03em .03em rgba(0,0,0,.55))}
.emblem-glow{position:absolute;left:10%;right:10%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(214,167,59,.45),transparent);filter:blur(6px);animation:emGlow 6s ease-in-out infinite}
.emblem3d::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(155,93,229,.28),transparent 70%);pointer-events:none}
.emblem3d .bshine{opacity:1;animation:emShine 5.5s ease-in-out infinite}
.emblem3d .bspark{transform-box:fill-box;transform-origin:center;animation:emSpark 2.8s ease-in-out infinite}
@keyframes emFloat{50%{transform:translateY(-.05em)}}
@keyframes emSway{0%,100%{rotate:y -16deg}50%{rotate:y 16deg}}
@keyframes emGlow{50%{transform:scaleX(.85);opacity:.7}}
@keyframes emShine{0%,55%{transform:translateX(0) rotate(20deg)}85%,100%{transform:translateX(330px) rotate(20deg)}}
@keyframes emSpark{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.15);opacity:1}}
.lockup{display:inline-flex;align-items:center;gap:10px;min-width:0}
.lockup.stacked{flex-direction:column;gap:14px}
.lockup-emb{flex:none;display:block}
.lockup-txt{display:flex;flex-direction:column;line-height:1;min-width:0}
.lockup.stacked .lockup-txt{align-items:center}
.lockup-small{font-size:.5em;letter-spacing:.42em;color:var(--gold);font-weight:800;margin-bottom:.35em;padding-left:.2em}
.lockup-main{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .lockup{font-size:21px}
.top .lockup-small{font-size:9px}
.hero .lockup{font-size:clamp(32px,5.4vw,52px)}
.hero .lockup-small{font-size:clamp(11px,1.4vw,14px)}
.auth .lockup{font-size:32px}
.auth .lockup-small{font-size:11px}

/* Pantalla de carga */
.splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(600px 400px at 50% 40%,rgba(106,44,154,.35),transparent 70%),var(--bg);transition:opacity .45s ease}
.splash.out{opacity:0;pointer-events:none}
.splash-in{display:grid;justify-items:center;gap:22px}
.splash-bar{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.splash-bar::after{content:"";display:block;width:40%;height:100%;background:var(--metal);border-radius:3px;animation:splashBar 1.1s ease-in-out infinite}
@keyframes splashBar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@media (max-width:600px){.top .lockup-txt{display:none}}
@media (prefers-reduced-motion:reduce){
  .emblem-rig,.emblem-glow,.emblem3d .bshine,.emblem3d .bspark,.splash-bar::after{animation:none!important}
  .emblem-rig{transform:rotateY(-10deg)}
}

/* ---------- 11. Lobby premium ---------- */
.lobby{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;max-width:1400px;margin:0 auto;padding:18px 16px calc(60px + var(--safe-b))}
.side{position:sticky;top:78px;align-self:start;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(36,28,53,.75),rgba(18,14,28,.75));border:1px solid var(--line);box-shadow:var(--e1)}
.side-hello{padding:4px 8px 8px;color:var(--mut);font-size:14px;border-bottom:1px solid var(--line)}
.side-hello b{color:var(--txt)}
.side-nav{display:grid;gap:2px}
.side-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 10px;border-radius:12px;color:var(--mut);font-weight:650;text-align:left;transition:background var(--t-fast),color var(--t-fast)}
.side-item:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.side-item.on{color:var(--gold-l);background:linear-gradient(90deg,rgba(214,167,59,.16),rgba(214,167,59,0));box-shadow:inset 3px 0 0 var(--gold)}
.side-item span{flex:1}
.side-item em{font-style:normal;font-size:12px;min-width:22px;text-align:center;padding:1px 6px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--mut)}
.side-item em:empty{display:none}
.side-foot{font-size:12px;color:var(--mut2);padding:8px 8px 2px;border-top:1px solid var(--line)}
.lmain{min-width:0}

.hero-banner{position:relative;display:grid;min-height:clamp(300px,30vw,360px);border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(246,215,123,.25);box-shadow:var(--e3);touch-action:pan-y}
.hb-slide{position:relative;grid-area:1/1;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px;padding:32px 64px 46px;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.hb-slide.on{opacity:1;visibility:visible}
.hb-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,9,18,.55),transparent 55%),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:auto,5px 5px}
.hb-text{position:relative;z-index:1;display:grid;gap:10px;justify-items:start}
.hb-kicker{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.hb-title{font-size:clamp(30px,4vw,50px);line-height:1.05}
.hb-pitch{color:#e6def3;max-width:46ch;font-size:15.5px}
.hb-facts{display:flex;gap:8px;flex-wrap:wrap}
.hb-facts span{font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid rgba(246,215,123,.3);color:var(--gold-l)}
.hb-cta{margin-top:6px}
.hb-art{position:relative;z-index:1;perspective:900px;display:grid;place-items:center}
.hb-frame{width:min(100%,420px);aspect-ratio:16/10;border-radius:18px;overflow:hidden;padding:3px;background:var(--metal);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(214,167,59,.18);transform:rotateY(-12deg) rotateX(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hb-frame .cover-svg{width:100%;height:100%;display:block;border-radius:15px}
.hb-slide:not(.on) .hb-frame{transform:rotateY(-24deg) translateX(40px)}
.hb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(11,9,18,.55);border:1px solid rgba(246,215,123,.3);backdrop-filter:blur(6px);transition:background var(--t-fast)}
.hb-nav:hover{background:rgba(11,9,18,.85)}
.hb-nav.prev{left:12px}.hb-nav.next{right:12px}
.hb-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:4px}
.hb-dots button{width:44px;height:24px;display:grid;place-items:center}
.hb-dots button::after{content:"";width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);transition:background var(--t),width var(--t)}
.hb-dots button.on::after{width:34px;background:var(--metal)}

.lsearch{position:relative;display:flex;align-items:center;gap:8px;margin:18px 0 6px;padding:0 6px 0 14px;min-height:52px;border-radius:16px;background:#0e0b16;border:1px solid var(--line);color:var(--mut);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.lsearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,167,59,.16)}
.lsearch input{flex:1;min-width:0;height:50px;background:none;border:0;outline:none;font-size:16px;color:var(--txt)}
.lsearch input::-webkit-search-cancel-button{display:none}
.chips-nav{display:none;gap:8px;overflow-x:auto;padding:8px 0 4px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
.chips-nav::-webkit-scrollbar{display:none}
.cnav{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--mut);font-weight:650;font-size:14px;white-space:nowrap}
.cnav.on{color:#2a1a00;background:var(--metal);border-color:#b78a22}
.lsec{margin-top:24px}
.lsec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lsec-head .h2{display:flex;align-items:center;gap:10px;margin:0}
.lsec-head .h2 .ico{color:var(--gold)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 40px) / 3));gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;margin:0 -4px;scrollbar-width:none;perspective:1100px}
.rail::-webkit-scrollbar{display:none}
.rail .game-tile{scroll-snap-align:start;animation:none}
.lview-title{margin-top:24px}
.lres{margin:18px 0 4px;color:var(--mut)}
.lempty{display:grid;justify-items:center;gap:6px;text-align:center;padding:40px 20px;color:var(--mut);margin-top:12px}
.lempty .ico{color:var(--gold)}
.lempty b{color:var(--txt);font-size:17px}
.game-tile{cursor:pointer}
.game-tile:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}
.fav{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(11,9,18,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast)}
.fav:hover{transform:scale(1.08)}
.fav.on{color:#ff5c7a;background:rgba(40,8,18,.75);border-color:rgba(255,92,122,.5)}
.fav.on .ico{fill:currentColor}
@media (max-width:980px){
  .lobby{grid-template-columns:1fr;gap:0;padding-top:12px}
  .side{display:none}
  .chips-nav{display:flex}
  .rail{grid-auto-columns:minmax(250px,46%)}
}
@media (max-width:640px){
  .hero-banner{min-height:0}
  .hb-slide{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start;padding:16px 16px 48px;gap:12px}
  .hb-art{order:-1}
  .hb-frame{width:62%;transform:rotateY(-8deg) rotateX(3deg)}
  .hb-title{font-size:30px}
  .hb-facts span{font-size:11.5px;padding:4px 9px}
  .hb-cta{width:100%}
  .hb-pitch{font-size:14.5px}
  .hb-nav{display:none}
  .rail{grid-auto-columns:82%}
  .rail-arrows{display:none}
}
@media (prefers-reduced-motion:reduce){.hb-frame{transform:none!important}}

/* ---------- 12. Portadas (imágenes) y carga de juego ---------- */
.cover-img{display:block;width:100%;height:100%;object-fit:cover;background:#120e1c;transition:transform .5s ease-out}
.game-tile .cover{aspect-ratio:16/9;background:linear-gradient(90deg,#1b1528,#2a2140,#1b1528);background-size:200% 100%;animation:shimmer 1.4s infinite linear}
.game-tile:hover .cover-img{transform:scale(1.04)}
.hb-frame{aspect-ratio:16/9}
.hb-frame picture{display:block;width:100%;height:100%;border-radius:15px;overflow:hidden}
.gload{position:fixed;inset:0;z-index:250;display:grid;place-items:center;background:rgba(5,3,10,.92);backdrop-filter:blur(8px);animation:fade .2s;transition:opacity .45s}
.gload.out{opacity:0;pointer-events:none}
.gload-in{display:grid;justify-items:center;gap:22px;width:min(760px,92vw)}
.gload picture{display:block;width:100%;border-radius:20px;overflow:hidden;padding:3px;background:var(--metal);box-shadow:var(--e3),0 0 60px rgba(214,167,59,.2);animation:pop .4s}
.gload .cover-img{border-radius:17px}

/* ---------- 13. Efectos de victoria de las tragamonedas ---------- */
.sfx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.cabinet.winning{animation:cabGlow .9s ease-in-out infinite alternate}
@keyframes cabGlow{to{box-shadow:var(--e3),0 0 50px rgba(246,215,123,.55),0 0 120px rgba(214,167,59,.25)}}
.cabinet.winning .marquee i{animation:bulbChase .5s steps(2) infinite;opacity:1}
.cabinet.winning .marquee i:nth-child(3n+1){animation-delay:-.33s}.cabinet.winning .marquee i:nth-child(3n+2){animation-delay:-.16s}
@keyframes bulbChase{50%{opacity:.2;filter:brightness(.6)}}
.cabinet.winning .reel-window{box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px var(--gold-l),inset 0 10px 30px rgba(0,0,0,.9),0 0 26px rgba(246,215,123,.45)}
.s7-cele{position:fixed;inset:0;z-index:260;display:grid;place-items:center;align-content:center;gap:10px;overflow:hidden;cursor:pointer;background:radial-gradient(60% 60% at 50% 42%,rgba(120,14,32,.92),rgba(5,3,10,.97) 72%);animation:fade .25s;transition:opacity .45s}
.s7-cele.out{opacity:0}
.s7-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,215,120,.07) 0 6deg,transparent 6deg 18deg);animation:s7spin 14s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 60%);mask-image:radial-gradient(circle,#000 20%,transparent 60%)}
@keyframes s7spin{to{transform:rotate(360deg)}}
.s7-row{position:relative;display:flex;gap:clamp(6px,2vw,24px)}
.s7-big{width:clamp(90px,20vw,220px);aspect-ratio:1/1;animation:s7pop .6s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,80,90,.45))}
.s7-big svg{width:100%;height:100%}
@keyframes s7pop{from{transform:scale(.2) translateY(40px);opacity:0}}
.s7-txt{position:relative;text-align:center;animation:pop .5s .7s both}
.s7-k{font-family:var(--serif);font-size:clamp(26px,5vw,48px);font-weight:700;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.8)}
.s7-v{font-size:clamp(54px,11vw,120px);line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.8))}
.s7-s{color:var(--gold-l);font-weight:800;letter-spacing:4px;text-transform:uppercase;margin-top:6px}
@media (prefers-reduced-motion:reduce){.s7-rays,.cabinet.winning,.cabinet.winning .marquee i{animation:none}}

/* ---------- 14. Interior premium de las tragamonedas ---------- */
.slot-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.slot-scene~.game-wrap{position:relative;z-index:1}
.slot-scene img{width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:sceneIn .8s ease-out both}
.slot-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,18,.75) 0%,rgba(11,9,18,.15) 22%,rgba(11,9,18,.15) 70%,rgba(11,9,18,.85) 100%),radial-gradient(80% 70% at 50% 50%,transparent 40%,rgba(5,3,10,.6))}
@keyframes sceneIn{from{opacity:0;transform:scale(1.04)}}
.cell .sym-img{width:86%;height:86%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.cell.win .sym-img{animation:symwin .55s ease-in-out infinite alternate}
.pt-item .sym-img{width:52px;height:52px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.cabinet.theme-bufon .reel{background:radial-gradient(130% 75% at 50% 50%,#3d1c62 0%,#1b0b30 58%,#0b0414 100%)}
.cabinet.theme-clasico .reel{background:radial-gradient(130% 75% at 50% 50%,#5c1423 0%,#2c0710 58%,#120208 100%)}
.cabinet.theme-bufon .reel::after,.cabinet.theme-clasico .reel::after{background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 20%,transparent 80%,rgba(0,0,0,.55)),linear-gradient(90deg,rgba(255,255,255,.06),transparent 30%,transparent 70%,rgba(255,255,255,.04))}
.cabinet.theme-bufon .cab-in,.cabinet.theme-clasico .cab-in{background:linear-gradient(180deg,color-mix(in srgb,var(--cab1) 88%,transparent),color-mix(in srgb,var(--cab2) 92%,transparent) 45%,var(--cab3))}
@media (prefers-reduced-motion:reduce){.slot-scene img{animation:none}}

@media (max-width:600px){.top #back+.lockup{display:none}}

/* ===== 15. Ruleta 3D (Three.js): mesa de casino a todo el ancho ===== */
.rou-stage{position:relative}
.rou-bg3d{display:none}
.stage3d .rou-bg3d{display:block;position:absolute;z-index:0;pointer-events:none;top:-14px;bottom:-18px;left:calc(50% - 50vw);width:100vw;
}
.stage3d .rou-bg3d::before,.stage3d .rou-bg3d::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.stage3d .rou-bg3d::before{top:0;height:12%;background:linear-gradient(180deg,var(--bg),transparent)}
.stage3d .rou-bg3d::after{bottom:0;height:18%;background:linear-gradient(0deg,var(--bg),transparent)}
.rou-bg3d canvas{display:block;width:100%;height:100%}
.stage3d>.wheel-box,.stage3d>.rou-panel{position:relative;z-index:1}
.wheel-box.is3d #wheel{visibility:hidden}
.wheel-box.is3d{max-width:440px}
.stage3d .rou-panel{background:linear-gradient(180deg,rgba(28,20,40,.62),rgba(12,9,18,.72))!important;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border-color:rgba(246,215,123,.22)}
.rou-stage.stage3d{grid-template-columns:minmax(260px,440px) 1fr;padding:18px 0 22px}
#app{overflow-x:clip}
@media (max-width:760px){.rou-stage.stage3d{grid-template-columns:1fr;padding:6px 0 14px}.wheel-box.is3d{max-width:320px}}

/* ===== 16. Panel de sonido ===== */
.sndpop{position:fixed;z-index:calc(var(--z-top) + 20);width:min(300px,calc(100vw - 16px));padding:14px 16px 16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(40,30,58,.98),rgba(20,15,30,.98));border:1px solid rgba(246,215,123,.28);box-shadow:0 18px 40px rgba(0,0,0,.55);
  display:grid;gap:12px;animation:sndin .16s ease-out}
@keyframes sndin{from{opacity:0;transform:translateY(-6px)}}
.sndttl{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gold,#f6d77b)}
.sndrow{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:10px;font-weight:700;font-size:14px}
.sndrow b{font-variant-numeric:tabular-nums;text-align:right;color:var(--mut);font-size:13px}
.sndrow input[type=range]{width:100%;accent-color:#e2b04a;height:28px;cursor:pointer}
.sndpop .btn{justify-self:stretch}
@media (prefers-reduced-motion:reduce){.sndpop{animation:none}}

/* ===== 17. Celular: espacio para la barra flotante de Safari y líneas discretas ===== */
.lines-svg{transition:opacity .6s ease}
.lines-svg.fade{opacity:0}
@media (hover:none) and (pointer:coarse){
  .game-wrap,.page,.lobby{padding-bottom:calc(96px + var(--safe-b))}
}

/* ===== 18. Gabinete con marcos 3D renderizados y frente de vidrio ahumado ===== */
/* Los marcos son imágenes renderizadas en 3D (arte/marcos): oro para Bufón, cromo para Super 7 */
.cabinet.theme-bufon,.cabinet.theme-clasico{--frame:url(/frames/cab-gold.webp?v=1);--reelf:url(/frames/reel-gold.webp?v=1);--railf:url(/frames/rail-gold.webp?v=1);
  background:none;padding:26px;border-radius:34px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(214,167,59,.12)}
.cabinet.theme-clasico{--frame:url(/frames/cab-chrome.webp?v=1);--reelf:url(/frames/reel-chrome.webp?v=1);--railf:url(/frames/rail-chrome.webp?v=1);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(255,90,90,.10)}
.cabinet.theme-bufon::after,.cabinet.theme-clasico::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  border:44px solid transparent;border-image:var(--frame) 120 / 44px stretch}
.cabinet.theme-bufon .cab-in,.cabinet.theme-clasico .cab-in{border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cab1) 38%,transparent),color-mix(in srgb,var(--cab2) 55%,transparent) 45%,color-mix(in srgb,var(--cab3) 75%,transparent));
  -webkit-backdrop-filter:blur(4px) saturate(1.2);backdrop-filter:blur(4px) saturate(1.2)}
.cabinet.theme-bufon .reel-window,.cabinet.theme-clasico .reel-window{padding:14px;border-radius:18px;background:rgba(4,2,8,.92);box-shadow:inset 0 10px 30px rgba(0,0,0,.9)}
.cabinet.theme-bufon .reel-window::after,.cabinet.theme-clasico .reel-window::after{content:"";position:absolute;inset:-2px;pointer-events:none;z-index:7;
  border:24px solid transparent;border-image:var(--reelf) 90 / 24px stretch}
.cabinet.theme-bufon .cab-rail,.cabinet.theme-clasico .cab-rail{background:none;box-shadow:none;border-radius:0;border-style:solid;border-color:transparent;border-width:9px 0;
  border-image:var(--railf) 40 0 fill / 9px 0 stretch;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.cabinet.theme-bufon .cab-rail b,.cabinet.theme-clasico .cab-rail b{display:none}
.cabinet.theme-bufon .cab-led,.cabinet.theme-clasico .cab-led{background:rgba(5,3,10,.88)}
@media (max-width:720px){
  .cabinet.theme-bufon,.cabinet.theme-clasico{padding:15px;border-radius:24px}
  .cabinet.theme-bufon::after,.cabinet.theme-clasico::after{border-width:30px;border-image-width:30px}
  .cabinet.theme-bufon .cab-in,.cabinet.theme-clasico .cab-in{border-radius:10px}
  .cabinet.theme-bufon .cab-body,.cabinet.theme-clasico .cab-body{grid-template-columns:8px 1fr 8px;padding:8px 2px}
  .cabinet.theme-bufon .reel-window,.cabinet.theme-clasico .reel-window{padding:8px;margin:0 3px;border-radius:12px}
  .cabinet.theme-bufon .reel-window::after,.cabinet.theme-clasico .reel-window::after{inset:-1px;border-width:16px;border-image-width:16px}
  .cabinet.theme-bufon .cab-rail,.cabinet.theme-clasico .cab-rail{border-width:6px 0;border-image-width:6px 0}
  .slot-scene~.game-wrap{padding-top:22px}
}

/* ===== 19. Publicación: aviso +18 y clave débil ===== */
.auth-box .gate{border-radius:calc(var(--r-xl) - 3px);background:linear-gradient(180deg,rgba(36,28,53,.97),rgba(15,11,22,.98));padding:30px 26px 26px;text-align:center}
.gate .sub{margin:10px 0}
.gate-18{width:64px;height:64px;margin:6px auto 8px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff;background:radial-gradient(circle at 40% 30%,#e2475f,#a91636 70%);border:3px solid var(--gold);box-shadow:var(--e2)}
.weak-pw{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:10px 14px;border-radius:12px;background:rgba(169,22,54,.18);border:1px solid rgba(226,71,95,.5);font-size:14px;max-width:1208px}
.weak-pw span{flex:1}
@media (min-width:1272px){.weak-pw{margin:12px auto 0}}

/* ===== 20. Límite diario del cajero ===== */
.limit-bar{position:relative;overflow:hidden;margin:12px 16px 0;padding:10px 14px;border-radius:12px;background:rgba(214,167,59,.10);border:1px solid rgba(214,167,59,.35);font-size:14px;max-width:1208px}
.limit-bar span{position:relative;z-index:1}
.limit-bar i{position:absolute;left:0;bottom:0;height:3px;width:var(--p);background:var(--gold)}
.limit-bar.full{background:rgba(169,22,54,.16);border-color:rgba(226,71,95,.5)}
.limit-bar.full i{background:#e2475f}
@media (min-width:1272px){.limit-bar{margin:12px auto 0}}

/* ===== 21. Tragamonedas con marcos de oro 3D en todas las piezas ===== */
/* Oro con volumen: luz arriba, sombra abajo, bisel interno y externo */
:root{
  --gold3d:linear-gradient(180deg,#fff6d0 0%,#f7d97c 14%,#d9a93c 34%,#9c6f17 52%,#e7bf5a 70%,#fff0b0 84%,#a57a1e 100%);
  --gold3d-h:linear-gradient(90deg,#8a6212 0%,#e6bd58 18%,#fff3c4 32%,#d6a73b 52%,#8a6212 70%,#f2d27a 86%,#7a5410 100%);
  --gold-bevel:inset 0 1px 0 rgba(255,250,225,.9),inset 0 -1px 0 rgba(70,45,5,.9),0 2px 0 #3d2a06,0 4px 10px rgba(0,0,0,.55);
}
/* Super 7 también con marco de oro (antes cromo) */
.cabinet.theme-clasico{--frame:url(/frames/cab-gold.webp?v=1);--reelf:url(/frames/reel-gold.webp?v=1);--railf:url(/frames/rail-gold.webp?v=1);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(214,167,59,.14)}
/* Marco exterior: oro dibujado con CSS debajo del marco renderizado.
   Si un navegador (Safari del iPhone) no dibuja la imagen, igual queda un marco de oro con volumen. */
.cabinet.theme-bufon,.cabinet.theme-clasico{background:none;
  box-shadow:inset 0 0 0 1px #3d2a06,inset 0 0 0 3px #fff6d0,inset 0 0 0 6px #f2d27a,inset 0 0 0 10px #d6a73b,inset 0 0 0 14px #a57a1e,inset 0 0 0 17px #7a5410,inset 0 0 0 20px #c99a34,inset 0 0 0 23px #f6d77b,inset 0 0 0 25px #fff1b8,inset 0 0 0 26px #4a3308,0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(214,167,59,.14)}
@media (max-width:720px){.cabinet.theme-bufon,.cabinet.theme-clasico{box-shadow:inset 0 0 0 1px #3d2a06,inset 0 0 0 2px #fff6d0,inset 0 0 0 4px #f2d27a,inset 0 0 0 6px #d6a73b,inset 0 0 0 8px #a57a1e,inset 0 0 0 10px #7a5410,inset 0 0 0 12px #d6a73b,inset 0 0 0 14px #fff1b8,inset 0 0 0 15px #4a3308,0 20px 40px rgba(0,0,0,.55),0 0 50px rgba(214,167,59,.14)}}
.cabinet.theme-bufon .cab-in,.cabinet.theme-clasico .cab-in{box-shadow:0 0 0 2px #4a3308,0 0 0 3px rgba(255,241,184,.6),inset 0 2px 8px rgba(0,0,0,.6)}
/* El brillo de victoria no debe borrar los anillos de oro: se hace con filtro */
.cabinet.theme-bufon.winning,.cabinet.theme-clasico.winning{animation:cabGlowF .9s ease-in-out infinite alternate}
@keyframes cabGlowF{to{filter:drop-shadow(0 0 22px rgba(246,215,123,.6))}}
@media (prefers-reduced-motion:reduce){.cabinet.theme-bufon.winning,.cabinet.theme-clasico.winning{animation:none}}

/* Cada rodillo con su propio bisel de oro (sin cambiar medidas: son sombras) */
.cabinet .reel{box-shadow:0 0 0 1px #fff1b8,0 0 0 2px #d6a73b,0 0 0 3px #6b4a0a,0 4px 6px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 2px 0 1px rgba(255,241,184,.25)}

/* Cartel con el título: placa de oro */
.cabinet .cab-plate{background:var(--gold3d);color:#2a1a00;border:1px solid #5c400a;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:var(--gold-bevel)}
.cabinet .cab-title{filter:drop-shadow(0 2px 0 #4a3308) drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.cabinet .cab-crown{border-bottom:0}
.cabinet .cab-crown::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:6px;border-radius:3px;background:var(--gold3d-h);box-shadow:var(--gold-bevel)}
/* Lamparitas con casquillo de oro */
.cabinet .marquee i{outline:2px solid #b78a22;outline-offset:1px}

/* Visor de apuesta / premio con marco de oro renderizado */
.cabinet .cab-led{border:14px solid transparent;border-image:url(/frames/reel-gold.webp?v=1) 90 / 14px stretch;padding:6px 8px;border-radius:0;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.cabinet .led-cell.c .v{font-size:24px}

/* Selectores de líneas y ficha: marco de oro y botones con aro de oro */
.cabinet .stepper{border:2px solid transparent;background:linear-gradient(#0b0712,#0b0712) padding-box,var(--gold3d) border-box;box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 2px 6px rgba(0,0,0,.6)}
.cabinet .stepper button{background:radial-gradient(circle at 50% 35%,#fff7cf,#f6d77b 35%,#d6a73b 65%,#8a6212);color:#2a1a00;border:1px solid #4a3308;box-shadow:0 2px 0 #3d2a06,inset 0 1px 0 rgba(255,255,255,.7)}
.cabinet .auto-btn{border:2px solid transparent;background:linear-gradient(180deg,#2e2440,#160f22) padding-box,var(--gold3d) border-box;box-shadow:0 3px 0 #3d2a06,0 6px 12px rgba(0,0,0,.5)}
.cabinet .auto-btn.on{background:linear-gradient(180deg,#e2475f,#a91636) padding-box,var(--gold3d) border-box}
/* Botón GIRAR con aro de oro doble */
.cabinet .spin-big{box-shadow:0 0 0 4px #2a1a00,0 0 0 6px #fff1b8,0 0 0 9px #d6a73b,0 0 0 11px #6b4a0a,0 9px 0 5px #3d2a06,0 16px 28px rgba(0,0,0,.65),inset 0 -6px 12px rgba(0,0,0,.25),inset 0 4px 10px rgba(255,255,255,.6)}
.cabinet .spin-big:active,.cabinet .spin-big.down{box-shadow:0 0 0 4px #2a1a00,0 0 0 6px #fff1b8,0 0 0 9px #d6a73b,0 0 0 11px #6b4a0a,0 4px 0 5px #3d2a06,0 8px 14px rgba(0,0,0,.6),inset 0 -4px 10px rgba(0,0,0,.25),inset 0 4px 10px rgba(255,255,255,.6)}
/* Bandeja de monedas con labio de oro */
.cabinet .cab-tray{border-top:5px solid transparent;background:linear-gradient(180deg,#05030a,#1a1324) padding-box,var(--gold3d-h) border-box;box-shadow:inset 0 6px 12px rgba(0,0,0,.9),0 4px 10px rgba(0,0,0,.5)}
.cabinet .cab-foot .btn{border:1px solid #b78a22}
@media (max-width:720px){
  .cabinet .cab-led{border-width:10px;border-image-width:10px;padding:4px 6px}
  .cabinet .reel{box-shadow:0 0 0 1px #fff1b8,0 0 0 2px #d6a73b,0 0 0 3px #4a3308,0 2px 4px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.6)}
}

/* ===== 22. Premio grande: monto en placa de oro, lluvia de monedas y "tocá para saltar" ===== */
.jp-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.s7-cele .s7-row,.s7-cele .s7-txt{z-index:3}
.s7-cele,.bf-cele{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.jp-plate{display:inline-block;margin:6px 0 2px;padding:10px 26px 12px;border:22px solid transparent;border-image:url(/frames/cab-gold.webp?v=1) 120 / 22px stretch;
  background:radial-gradient(120% 140% at 50% 0%,rgba(80,40,120,.85),rgba(8,4,14,.94) 70%) padding-box;filter:drop-shadow(0 12px 26px rgba(0,0,0,.7))}
.jp-plate .num{font-variant-numeric:tabular-nums;display:block;min-width:4ch}
.jp-counting .jp-plate{animation:jpPulse .5s ease-in-out infinite alternate}
@keyframes jpPulse{to{filter:drop-shadow(0 12px 26px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(255,214,110,.55))}}
.jp-done .jp-plate{animation:jpLand .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes jpLand{0%{transform:scale(1.18)}100%{transform:none}}
.jp-hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:4;padding:8px 16px;border-radius:20px;
  background:rgba(0,0,0,.55);border:1px solid rgba(246,215,123,.45);color:#fff1b8;font-weight:700;font-size:14px;letter-spacing:.4px;white-space:nowrap;
  animation:jpHint 1.2s ease-in-out infinite alternate;transition:opacity .3s}
.jp-done .jp-hint{opacity:0}
@keyframes jpHint{from{opacity:.55}to{opacity:1}}
@media (max-width:640px){.jp-plate{border-width:14px;border-image-width:14px;padding:6px 14px 8px}}
@media (prefers-reduced-motion:reduce){.jp-counting .jp-plate,.jp-done .jp-plate,.jp-hint{animation:none}}