/* ═══════════════════════════════════════════════════════════
   AURUM CASINO — Design System v5 "Obsidian Emerald"
   Rediseño desde cero (P27) · estándar P26 · Triple AAA (P29)
   Sistema: carbón profundo #0B0E11 · esmeralda #10B981 · marfil #F5F7F8
   Tipografía: Inter (UI) + tabular-nums en datos
   ═══════════════════════════════════════════════════════════ */
:root{
  /* superficies — carbón neutro, cero tinte marrón */
  --bg:#0B0F12; --bg2:#101619; --panel:#141B20; --panel2:#1A242B;
  --raised:#1F2B33;
  /* acento: esmeralda de sala de juego profesional */
  --em:#10B981; --em-bright:#34D399; --em-dim:#0A8A61; --em-deep:#065F46;
  /* neutros de texto */
  --ink:#F2F5F7; --ink-dim:#9AA7B0; --ink-faint:#5C6B75;
  /* señal */
  --green:#10B981; --red:#F0525F; --red-dim:#B33841; --amber:#F5B840;
  /* meta */
  --line:rgba(148,163,184,.14); --line2:rgba(148,163,184,.26);
  --line-em:rgba(16,185,129,.35);
  --r:14px; --r-sm:10px;
  --t-fast:150ms; --t-med:320ms; --t-slow:650ms;
  --e:cubic-bezier(.22,1,.36,1);
  --shadow:0 16px 44px rgba(2,6,10,.5);
  --glow:0 0 0 1px var(--line-em),0 8px 30px rgba(16,185,129,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:14.5px/1.55 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(16,185,129,.32)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#2A3A44;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--em-dim)}

/* fondo: malla sutil + respiración esmeralda (reemplaza aurora) */
#aurora{position:fixed;inset:0;z-index:-2;opacity:.5}
#gold-dust{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ─────────── gate ─────────── */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:
  radial-gradient(1000px 460px at 50% -8%,rgba(16,185,129,.07),transparent 60%),
  var(--bg);z-index:50;transition:opacity var(--t-slow) var(--e)}
.gate.away{opacity:0;pointer-events:none}
.gate-card{width:min(430px,92vw);background:linear-gradient(170deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:20px;padding:34px 30px 26px;text-align:center;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.gate-card::before{content:"";position:absolute;inset:0;background:
  radial-gradient(420px 130px at 50% 0%,rgba(16,185,129,.08),transparent 70%);pointer-events:none}
.crest{width:58px;height:58px;margin:0 auto 10px;display:grid;place-items:center;
  border:1.5px solid var(--em);border-radius:50%;color:var(--em);font-size:24px;
  box-shadow:var(--glow);animation:breathe 3.6s var(--e) infinite}
.crest-sm{width:40px;height:40px;font-size:17px;margin:0;animation:none}
@keyframes breathe{0%,100%{box-shadow:0 0 14px rgba(16,185,129,.16)}50%{box-shadow:0 0 28px rgba(16,185,129,.34)}}
.brand{font:800 38px/1 "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.18em;color:var(--ink)}
.brand b,.brand em{font-style:normal;color:var(--em-bright,#34D399)}
.brand-sub{font-size:10.5px;letter-spacing:.3em;color:var(--ink-dim);margin:8px 0 22px}
.gate-tabs{display:flex;gap:6px;background:var(--bg2);padding:5px;border-radius:11px;margin-bottom:20px}
.gtab{flex:1;padding:9px;border-radius:8px;color:var(--ink-dim);font-weight:600;font-size:13.5px;
  transition:all var(--t-fast) var(--e)}
.gtab.active{background:var(--raised,#22303A);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.field{text-align:left;margin-bottom:14px}
.field span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:6px}
.field input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--ink);outline:none;transition:border var(--t-fast),box-shadow var(--t-fast)}
.field input:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(16,185,129,.14)}
.auth-err{background:rgba(240,82,95,.1);border:1px solid rgba(240,82,95,.4);color:#FFAAB4;
  padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:14px;text-align:left}
.gate-note{margin-top:18px;font-size:11.5px;color:var(--ink-faint)}

/* ─────────── botones ─────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:11px;font-weight:700;letter-spacing:.03em;
  transition:transform var(--t-fast) var(--e),box-shadow var(--t-fast),filter var(--t-fast);
  position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#3ADFA4,var(--em) 60%,var(--em-dim));color:#04251A;
  box-shadow:0 6px 20px rgba(16,185,129,.3)}
.btn-gold:hover{filter:brightness(1.08);box-shadow:0 8px 28px rgba(16,185,129,.45)}
.btn-ghost{border:1px solid var(--line-em);color:var(--em-bright,#34D399)}
.btn-ghost:hover{background:rgba(16,185,129,.09)}
.btn-outline{border:1px solid var(--line2);color:var(--ink)}
.btn-outline:hover{border-color:var(--em);color:var(--em-bright,#34D399)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.45;pointer-events:none}

/* ─────────── topbar ─────────── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:12px 22px;background:rgba(11,15,18,.86);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.top-left{display:flex;align-items:center;gap:11px}
.brand-sm{font:800 17px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.18em;color:var(--ink)}
.brand-sm::first-letter{color:var(--em)}
.tagline{font-size:9.5px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase}
.mainnav{display:flex;gap:4px;margin-left:8px}
.navbtn{padding:9px 15px;border-radius:9px;color:var(--ink-dim);font-weight:600;font-size:13.5px;
  transition:all var(--t-fast) var(--e);position:relative}
.navbtn:hover{color:var(--ink)}
.navbtn.active{color:var(--ink);background:var(--raised,#22303A);box-shadow:inset 0 0 0 1px var(--line-em);font-weight:700}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.wallet{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line2);
  padding:8px 14px;border-radius:11px;font-variant-numeric:tabular-nums}
.wallet .coin{color:var(--em);font-size:13px}
.wallet b{font-size:15px;color:var(--ink)}
.wallet .cur{font-size:10px;color:var(--ink-faint);letter-spacing:.12em}
.wallet.flash{animation:walletFlash .7s var(--e)}
@keyframes walletFlash{0%{box-shadow:0 0 0 rgba(16,185,129,0)}35%{box-shadow:0 0 20px rgba(16,185,129,.55);border-color:var(--em)}100%{}}
.userchip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  padding:6px 12px 6px 6px;border-radius:12px;font-size:13.5px;font-weight:600}
.uavatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#123A2C,#1B5A44);color:var(--em-bright,#34D399);font-weight:800;font-size:12px;
  border:1px solid var(--em-dim)}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);color:var(--ink-dim);
  display:grid;place-items:center;transition:all var(--t-fast)}
.iconbtn:hover{color:var(--em);border-color:var(--em)}

/* ─────────── layout ─────────── */
#views{max-width:1180px;margin:0 auto;padding:26px 22px 60px}
.view{display:none;animation:vin var(--t-med) var(--e)}
.view.active{display:block}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero{margin:14px 0 30px;max-width:860px}
.hero h1{font:800 33px/1.2 "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em}
.hero em{font-style:normal;color:var(--em-bright,#34D399)}
.hero p{color:var(--ink-dim);margin-top:10px;font-size:14.5px}
.hero-stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.hstat small{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.hstat b{font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.panel{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-bottom:20px;box-shadow:0 8px 26px rgba(2,6,10,.35)}
.panel-title{font:700 14px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.08em;color:var(--ink-dim);
  margin-bottom:14px;display:flex;align-items:center;gap:9px;text-transform:uppercase}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--em);
  box-shadow:0 0 8px var(--em);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.dualcol{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:18px}
.foot{max-width:1180px;margin:0 auto;padding:22px;text-align:center;color:var(--ink-faint);
  font-size:11.5px;border-top:1px solid var(--line)}

/* ─────────── mesas ─────────── */
.tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px;margin-bottom:26px}
.table-card{position:relative;border-radius:var(--r);padding:20px;border:1px solid var(--line);
  background:linear-gradient(170deg,var(--panel2),var(--panel));overflow:hidden;
  transition:transform var(--t-med) var(--e),box-shadow var(--t-med)}
.table-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.table-card::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(300px 90px at 50% 0%,var(--tc,rgba(16,185,129,.12)),transparent 70%)}
.table-card.da{--tc:rgba(16,185,129,.15)} .table-card.db{--tc:rgba(148,163,184,.12)}
.table-card.dc{--tc:rgba(245,184,64,.1)}
.table-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.table-name{font:800 19px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink)}
.table-mult{font-weight:800;color:var(--em);font-size:15px}
.table-mult small{font-weight:600;color:var(--ink-faint);font-size:10px;letter-spacing:.1em}
.table-serial{font-size:10.5px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.06em}
.badge.hot{background:rgba(240,82,95,.12);color:#FFA3AB;border:1px solid rgba(240,82,95,.4)}
.badge.calm{background:rgba(16,185,129,.1);color:var(--em);border:1px solid rgba(16,185,129,.3)}
.timerbar{height:5px;background:var(--bg2);border-radius:6px;overflow:hidden;margin:12px 0 6px}
.timerbar i{display:block;height:100%;background:linear-gradient(90deg,var(--em),var(--em-bright,#34D399));
  border-radius:6px;transition:width .95s linear}
.timerlabel{font-size:11px;color:var(--ink-faint);display:flex;justify-content:space-between}
.pick-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:13px 0}
.pick{aspect-ratio:1;border-radius:7px;background:var(--bg2);border:1px solid var(--line);
  color:var(--ink-dim);font-size:11.5px;font-weight:700;display:grid;place-items:center;
  transition:all var(--t-fast) var(--e)}
.pick:hover{border-color:var(--em);color:var(--em-bright,#34D399)}
.pick.sel{background:linear-gradient(135deg,#3ADFA4,var(--em));color:#04251A;border-color:var(--em);
  box-shadow:0 0 14px rgba(16,185,129,.45);transform:scale(1.08)}
.pick.hit{background:linear-gradient(135deg,#4AE3B0,var(--em));color:#04251A;border-color:var(--em);
  box-shadow:0 0 16px rgba(16,185,129,.6);animation:hitPop .6s var(--e)}
@keyframes hitPop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1.08)}}
.betrow{display:flex;gap:8px}
.betrow input{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.betrow input:focus{border-color:var(--em)}
.betrow .btn{padding:10px 16px;white-space:nowrap}
.table-foot{display:flex;justify-content:space-between;margin-top:11px;font-size:11.5px;color:var(--ink-faint)}
.table-foot b{color:var(--ink-dim);font-variant-numeric:tabular-nums}

/* resultado del sorteo */
.drawn-strip{display:flex;gap:9px;flex-wrap:wrap;min-height:46px;align-items:center}
.dball{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  font-size:14.5px;background:radial-gradient(circle at 34% 30%,#5CE8BC,var(--em) 62%,var(--em-dim));
  color:#04251A;box-shadow:0 4px 14px rgba(16,185,129,.4);animation:dballIn .5s var(--e)}
.dball small{display:block;font-size:8px;font-weight:700;opacity:.75;text-align:center;line-height:1}
@keyframes dballIn{from{transform:scale(0) rotate(-120deg);opacity:0}to{transform:scale(1);opacity:1}}
.dball.mine{outline:2px solid #7CFFC9;outline-offset:2px}

/* ─────────── pools ─────────── */
.poolcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:18px;margin-bottom:24px}
.pool-card{border-radius:var(--r);border:1px solid var(--line);padding:20px;
  background:linear-gradient(170deg,var(--panel2),var(--panel));position:relative;overflow:hidden}
.pool-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--pc,var(--em)),transparent)}
.pool-card.da{--pc:var(--em)} .pool-card.db{--pc:#8FA3B3} .pool-card.dc{--pc:var(--amber)}
.pool-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pool-name{font:800 18px "Avenir Next","Segoe UI",system-ui,sans-serif}
.pool-chip{font-size:11px;font-weight:800;letter-spacing:.14em;color:#04251A;
  background:linear-gradient(135deg,#3ADFA4,var(--em));padding:4px 11px;border-radius:20px}
.pool-card.db .pool-chip{background:linear-gradient(135deg,#D7E0E8,#8FA3B3);color:#10181D}
.pool-card.dc .pool-chip{background:linear-gradient(135deg,#FFD98A,var(--amber));color:#241A03}
.pmetrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.pmetric{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.pmetric small{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase}
.pmetric b{font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.lprow{display:flex;gap:8px}
.lprow input{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.chartbox h4{font-size:12px;letter-spacing:.1em;color:var(--ink-dim);margin-bottom:8px;text-transform:uppercase}
.chartbox canvas{width:100%;height:110px;display:block}
.chartbox .nowprice{font-size:12.5px;color:var(--em-bright,#34D399);font-variant-numeric:tabular-nums}

/* ─────────── swap ─────────── */
.swap-panel{display:grid;grid-template-columns:1.2fr .9fr;gap:26px}
.swap-box{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px}
.swap-box label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:6px}
.swap-box select,.swap-box input{width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;color:var(--ink);outline:none;margin-bottom:14px}
.swap-box select:focus,.swap-box input:focus{border-color:var(--em)}
.swap-arrow{text-align:center;color:var(--em);font-size:19px;margin:-6px 0 8px;animation:nudge 2.2s var(--e) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.swap-quote{background:var(--panel);border:1px dashed var(--line2);border-radius:10px;padding:13px;
  font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink-dim);margin-bottom:14px;min-height:60px}
.swap-quote b{color:var(--ink)}
.swap-aside h4{color:var(--ink);margin-bottom:9px;font:700 15px "Avenir Next","Segoe UI",system-ui,sans-serif}
.swap-aside p{color:var(--ink-dim);font-size:13.5px}
.mini-list{margin-top:12px;padding-left:18px;color:var(--ink-faint);font-size:12.5px}
.mini-list li{margin-bottom:5px}

/* ─────────── tablas ─────────── */
.tablewrap{overflow-x:auto;border-radius:10px;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.tbl th{background:var(--bg2);color:var(--ink-faint);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;text-align:left;padding:10px 13px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 13px;border-bottom:1px solid rgba(148,163,184,.08);font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(16,185,129,.05)}
.tag-won{color:var(--em);font-weight:700}
.tag-lost{color:var(--red);font-weight:700}
.tag-active{color:var(--em-bright,#34D399);font-weight:700}
.amount-pos{color:var(--em)} .amount-neg{color:#FFA3AB}

/* ─────────── verify ─────────── */
.verify-list{display:grid;gap:12px}
.vcard{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.vhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.vbadge{font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:3px 10px;border-radius:20px}
.vbadge.ok{background:rgba(16,185,129,.12);color:var(--em);border:1px solid rgba(16,185,129,.35)}
.vbadge.pend{background:rgba(148,163,184,.1);color:var(--ink-dim);border:1px solid var(--line2)}
.vdrawn{font:800 23px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--em-bright,#34D399)}
.vmeta{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:11px;color:var(--ink-faint);
  word-break:break-all;line-height:1.7}
.vmeta b{color:var(--ink-dim)}

/* ─────────── house ─────────── */
.housegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px;margin-bottom:20px}
.statcard{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 16px}
.statcard .statlabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.statcard b{display:block;font:800 21px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink);margin:5px 0 3px;
  font-variant-numeric:tabular-nums}
.statcard small{font-size:11px;color:var(--ink-faint)}
.leverrow{display:flex;gap:10px;flex-wrap:wrap}
.leverout{margin-top:13px;background:var(--bg2);border:1px dashed var(--line);border-radius:10px;
  padding:11px 13px;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:11.5px;color:var(--ink-dim);
  max-height:190px;overflow:auto;white-space:pre-wrap}

/* ─────────── toasts ─────────── */
.toasts{position:fixed;bottom:22px;right:22px;z-index:90;display:flex;flex-direction:column;gap:9px}
.toast{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line2);
  border-left:3px solid var(--em);border-radius:10px;padding:12px 16px;min-width:240px;max-width:340px;
  box-shadow:var(--shadow);font-size:13.5px;animation:toastIn .4s var(--e)}
.toast.ok{border-left-color:var(--em)} .toast.err{border-left-color:var(--red)}
.toast b{color:var(--ink)}
@keyframes toastIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.toast.bye{transition:all .3s;opacity:0;transform:translateX(30px)}

/* ─────────── modal ─────────── */
.modal-back{position:fixed;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(6px);
  z-index:80;display:grid;place-items:center;animation:fade .25s var(--e)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:min(430px,92vw);background:linear-gradient(170deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:16px;padding:24px;box-shadow:var(--shadow);
  animation:mIn .35s var(--e)}
@keyframes mIn{from{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal h3{font:800 19px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink);margin-bottom:12px}
.modal p{color:var(--ink-dim);font-size:13.5px;margin-bottom:14px}
.modal .rowbtns{display:flex;gap:10px;justify-content:flex-end}

/* ─────────── reveal on scroll ─────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e)}
.reveal.in{opacity:1;transform:none}

/* ─────────── responsive ─────────── */
@media(max-width:920px){
  .mainnav{overflow-x:auto;max-width:52vw}
  .navbtn{padding:8px 11px;font-size:12.5px}
  .dualcol,.swap-panel{grid-template-columns:minmax(0,1fr)}
  .tagline{display:none}
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .top-right{margin-left:auto}
  #views{padding:20px 14px 50px}
}
@media(max-width:560px){
  .mainnav{order:3;width:100%;max-width:none}
  .userchip #uname{display:none}
  .hero h1{font-size:26px}
  .pick-grid{gap:3px}
  .pick{font-size:10px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ─────────── juegos v2: slots / poker / craps / baccarat / keno ─────────── */
.slot-machine{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:14px;justify-items:center}
.slot-window{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#0E1A16;
  border:2px solid var(--em-dim);border-radius:14px;padding:16px;box-shadow:var(--glow),inset 0 0 24px rgba(2,8,6,.6)}
.slot-reel{width:86px;height:100px;display:grid;place-items:center;font-size:44px;border-radius:10px;
  background:linear-gradient(180deg,#132720,#0B1512);border:1px solid var(--line);position:relative;overflow:hidden}
.slot-reel.spin{animation:reelSpin .55s linear infinite}
@keyframes reelSpin{0%{transform:translateY(-14%) scale(.94);filter:blur(2px)}50%{transform:translateY(6%) scale(1.04)}100%{transform:translateY(-6%) scale(.98)}}
.slot-reel.landed{animation:reelLand .45s var(--e)}
@keyframes reelLand{0%{transform:translateY(-18px) scale(1.06)}60%{transform:translateY(2px) scale(.98)}100%{transform:none}}
.slot-reel.win{box-shadow:0 0 24px rgba(16,185,129,.7);border-color:var(--em-bright,#34D399);animation:reelLand .45s var(--e),winPulse 1.2s var(--e) 3}
@keyframes winPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.slot-result{font:700 16px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink-dim);min-height:26px;text-align:center}
.slot-result.win{color:var(--em-bright,#34D399);text-shadow:0 0 14px rgba(16,185,129,.45)}
.slot-result.jack{color:#7CFFC9;text-shadow:0 0 20px rgba(16,185,129,.75);animation:winPulse 1.2s var(--e) 4}
.slot-result.lose{color:var(--ink-faint)}

.pk-hand{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;max-width:480px}
.pkcard{cursor:pointer;padding:8px 0;text-align:center;transition:all var(--t-fast) var(--e);position:relative}
.pkcard.hold{transform:translateY(-8px);border-color:var(--em);box-shadow:0 0 16px rgba(16,185,129,.4)}
.pkcard .pkhold{position:absolute;top:-20px;left:0;right:0;font-size:9.5px;letter-spacing:.14em;color:var(--em);font-weight:800}
.pkcard.dim{opacity:.35}
.craps-table{display:grid;gap:12px;justify-items:center;width:100%}
.craps-dice{display:flex;gap:16px;justify-content:center}
.die{font-size:64px;line-height:1;filter:drop-shadow(0 6px 10px rgba(2,6,10,.6))}
.die.rolling{animation:diceRoll .35s linear infinite}
@keyframes diceRoll{0%{transform:rotate(0) translateY(0)}25%{transform:rotate(90deg) translateY(-6px)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg) translateY(-4px)}100%{transform:rotate(360deg)}}
.craps-status{font:700 15px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink);min-height:22px;text-align:center}
.craps-history{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:420px}
.ch-die{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:19px;
  background:var(--panel2);border:1px solid var(--line)}
.ch-die.win{border-color:var(--em);color:var(--em)}
.ch-die.lose{border-color:rgba(240,82,95,.5);color:#FFA3AB}
.bacc-table{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;width:100%}
.bacc-side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.bacc-side h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:9px}
.bacc-vs{font:800 15px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--ink-faint)}
.bacc-point{font:800 22px "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--em-bright,#34D399);margin-top:8px;font-variant-numeric:tabular-nums}
.bacc-betrow{flex-wrap:wrap;justify-content:center}
.keno-top{display:grid;grid-template-columns:auto 1fr;gap:20px;margin-bottom:14px}
.keno-picks{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-width:520px}
.kball{aspect-ratio:1;border-radius:50%;background:var(--bg2);border:1px solid var(--line);color:var(--ink-dim);
  font-size:13px;font-weight:700;display:grid;place-items:center;transition:all var(--t-fast) var(--e);cursor:pointer}
.kball:hover{border-color:var(--em)}
.kball.sel{background:linear-gradient(135deg,#3ADFA4,var(--em));color:#04251A;border-color:var(--em);
  box-shadow:0 0 12px rgba(16,185,129,.45)}
.kball.hit{background:linear-gradient(135deg,#4AE3B0,var(--em));color:#04251A;border-color:var(--em);
  box-shadow:0 0 14px rgba(16,185,129,.6)}
.kball.drawn-ball{background:var(--panel2);border-color:var(--line);color:var(--ink-faint);font-size:10px;cursor:default}
.keno-drawn{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:420px;align-content:start}
.keno-tables{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.keno-table{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.keno-tables h4{font-size:11.5px;letter-spacing:.14em;color:var(--ink-dim);margin-bottom:7px}
.keno-tables .ktrow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-dim);
  padding:3px 0;border-bottom:1px solid rgba(148,163,184,.06)}
.keno-tables .ktrow b{color:var(--ink);font-variant-numeric:tabular-nums}
.slot-machine .betrow{width:100%;max-width:560px}
.slot-machine select{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--ink);outline:none}
.slot-machine select:focus{border-color:var(--em)}
@media(max-width:640px){
  .bacc-table{grid-template-columns:1fr}
  .keno-top{grid-template-columns:1fr}
  .keno-tables{grid-template-columns:1fr}
  .slot-reel{width:70px;height:88px;font-size:36px}
}

/* ─── contención móvil ─── */
@media(max-width:920px){
  .mainnav{flex-wrap:nowrap;min-width:0}
  .topbar{min-width:0}
  .topbar>*{min-width:0}
}
@media(max-width:560px){
  .mainnav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .slot-machine .betrow,.betrow{flex-wrap:wrap}
  .slot-machine .betrow>*,.betrow>*{flex:1 1 140px;min-width:0}
  .slot-machine .betrow .btn,.betrow .btn{flex:1 1 45%;white-space:nowrap}
  .craps-betrow{flex-wrap:wrap}
  .craps-betrow>*{flex:1 1 140px;min-width:0}
  .craps-betrow .btn{flex:1 1 45%}
  .slot-window{transform:scale(.82);transform-origin:top center;margin-bottom:-14px}
}
@media(max-width:420px){
  .slot-window{transform:scale(.72);margin-bottom:-22px}
}

/* ─────────── ruleta + blackjack (juegos v2) ─────────── */
.roul-top{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.roul-number{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;
  background:linear-gradient(135deg,#122019,#16281F);border:2px solid var(--em-dim);box-shadow:var(--glow)}
.rc-red{color:#FF6B6B}.rc-black{color:#C6CFD8}.rc-green{color:#35D07F}
.roul-hist{display:flex;gap:6px;flex-wrap:wrap}
.rh-ball{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;
  border:1px solid var(--line2);background:var(--panel2)}
.roul-bets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.rbtn{padding:10px 6px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;display:grid;gap:2px;transition:all var(--t-fast)}
.rbtn small{color:var(--em-bright,#34D399);font-size:10px}
.rbtn:hover{border-color:var(--em);transform:translateY(-1px)}
.rbtn.red{border-color:var(--red-dim,#B33841)}.rbtn.black{border-color:#4A5A66}.rbtn.green{border-color:var(--em-dim)}
.bj-live{margin-top:12px;display:grid;gap:10px}
.bj-cards{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}
.bjcard{display:inline-grid;place-items:center;min-width:34px;height:46px;padding:0 8px;border-radius:8px;
  background:linear-gradient(160deg,#FDFDFB,#E4E8EB);color:#10181D;font-weight:800;font-size:15px}
/* ═══════════════════════════════════════════════════════════ *//* ═══════════════ CASINO AAA REPLICA LAYER v6 ═══════════════
   Fieltro de mesa · cartas 52 reales · dados con puntos · rueda de ruleta · slot cabinet
   ═══════════════════════════════════════════════════════════ */

/* fieltro de mesa profesional (verde casino) */
.felt{position:relative;border-radius:var(--r);padding:26px 20px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(16,185,129,.10),transparent 55%),
    radial-gradient(ellipse at 50% 45%,#0E4D3A 0%,#0A3A2C 55%,#072A20 100%);
  border:1px solid rgba(16,185,129,.25);
  box-shadow:inset 0 0 60px rgba(2,10,7,.7),0 14px 34px rgba(2,6,10,.45);
  display:grid;gap:16px;justify-items:center}
.felt::before{content:"";position:absolute;inset:10px;border:1.5px solid rgba(220,235,225,.12);
  border-radius:calc(var(--r) - 6px);pointer-events:none}
.felt::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.03),transparent 45%)}

/* ── CARTAS 52 reales ── */
.ccard{position:relative;width:74px;height:106px;border-radius:9px;
  background:linear-gradient(160deg,#FDFEFD,#E9EDF0 80%,#DDE3E7);
  box-shadow:0 4px 12px rgba(2,6,10,.4),inset 0 0 0 1px rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;
  transition:transform var(--t-fast) var(--e),box-shadow var(--t-fast)}
.ccard:hover{transform:translateY(-3px)}
.ccard .cc-rank{font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.ccard .cc-suit-big{font-size:34px;line-height:1;margin-top:2px}
.ccard .cc-corner{position:absolute;top:6px;left:8px;display:flex;flex-direction:column;align-items:center;line-height:1}
.ccard .cc-corner.br{top:auto;left:auto;right:8px;bottom:6px;transform:rotate(180deg)}
.ccard .cc-corner b{font-size:13px;font-weight:800}
.ccard .cc-corner i{font-style:normal;font-size:11px}
.ccard.red{color:#D7263D}
.ccard.black{color:#17242B}
.ccard.dealing{animation:dealIn .45s var(--e) backwards}
@keyframes dealIn{from{transform:translateY(-22px) rotate(-6deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.ccard.flipped{background:linear-gradient(160deg,#123A2C,#0A2A20 70%);
  box-shadow:inset 0 0 0 2px rgba(16,185,129,.35),0 4px 12px rgba(2,6,10,.4)}
.ccard.flipped::after{content:"✦";color:rgba(16,185,129,.5);font-size:30px}
.ccard.hold{transform:translateY(-10px);box-shadow:0 8px 20px rgba(16,185,129,.35),0 0 0 2px var(--em)}
.ccard.win-card{box-shadow:0 6px 18px rgba(16,185,129,.5),0 0 0 2px var(--em)}
.ccard.sm{width:52px;height:76px}
.ccard.sm .cc-rank{font-size:19px}.ccard.sm .cc-suit-big{font-size:23px}
.ccard.sm .cc-corner b{font-size:10px}.ccard.sm .cc-corner i{font-size:9px}

/* ── DADOS con puntos (pips CSS) ── */
.die3d{width:72px;height:72px;border-radius:14px;position:relative;
  background:linear-gradient(145deg,#FDFEFD,#DFE5E9 85%);
  box-shadow:0 10px 22px rgba(2,6,10,.5),inset 0 -3px 6px rgba(0,0,0,.14),inset 0 2px 3px rgba(255,255,255,.85);
  transform-style:preserve-3d}
.die3d.sm{width:40px;height:40px;border-radius:9px;box-shadow:0 4px 10px rgba(2,6,10,.4),inset 0 -2px 4px rgba(0,0,0,.12)}
.die3d .pip{position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3B4854,#101820 70%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25)}
.die3d.sm .pip{width:7px;height:7px}
/* posiciones de pips (grid 3×3) */
.pip.p1{top:30px;left:30px} .pip.p1.sm{top:16.5px;left:16px}
.pip.p2a{top:12px;left:12px}.pip.p2b{bottom:12px;right:12px}
.pip.p3a{top:30px;left:12px}.pip.p3b{top:30px;left:30px}.pip.p3c{top:30px;right:12px}
.pip.p4a{top:12px;left:12px}.pip.p4b{top:12px;right:12px}.pip.p4c{bottom:12px;left:12px}.pip.p4d{bottom:12px;right:12px}
.pip.p5a{top:12px;left:12px}.pip.p5b{top:12px;right:12px}.pip.p5c{top:30px;left:30px}
.pip.p5d{bottom:12px;left:12px}.pip.p5e{bottom:12px;right:12px}
.pip.p6a{top:12px;left:12px}.pip.p6b{top:12px;right:12px}.pip.p6c{top:30px;left:12px}.pip.p6d{top:30px;right:12px}
.pip.p6e{bottom:12px;left:12px}.pip.p6f{bottom:12px;right:12px}
.die3d.rolling{animation:dieTumble .4s linear infinite}
@keyframes dieTumble{0%{transform:rotate(0) translate(0,0)}25%{transform:rotate(92deg) translate(-4px,-5px)}
  50%{transform:rotate(185deg) translate(3px,-2px)}75%{transform:rotate(278deg) translate(-3px,4px)}100%{transform:rotate(365deg)}}
.die3d.landed{animation:dieLand .5s var(--e)}
@keyframes dieLand{0%{transform:scale(1.16) rotate(10deg)}55%{transform:scale(.96) rotate(-3deg)}100%{transform:scale(1)}}

/* ── RUEDA DE RULETA real (SVG + animación) ── */
.wheel-wrap{position:relative;width:250px;height:250px;margin:0 auto}
.wheel{width:250px;height:250px;transition:transform 3.4s cubic-bezier(.15,.85,.15,1)}
.wheel-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 24px rgba(2,6,10,.5))}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:18px solid var(--em);filter:drop-shadow(0 2px 4px rgba(2,6,10,.5));z-index:2}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#1E2C26,#0D1512 75%);
  border:2px solid var(--em-dim);display:grid;place-items:center;color:var(--em-bright,#34D399);
  font-weight:800;font-size:22px;z-index:2;box-shadow:0 4px 14px rgba(2,6,10,.55)}
.wheel-spinning .wheel-svg{animation:wheelShake 3.4s ease}
@keyframes wheelShake{0%,100%{filter:none}8%{filter:saturate(1.4)}50%{filter:saturate(1.2)}}
.rnum-lg{font:800 44px/1 "Avenir Next","Segoe UI",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.rnum-lg.red{color:#FF6B6B}.rnum-lg.black{color:#E8EDF2}.rnum-lg.green{color:#35D07F}

/* ── SLOT gabinete con reel-strip ── */
.slot-cabinet{background:linear-gradient(180deg,#1A242B,#0E1418);
  border:1px solid var(--line2);border-radius:18px;padding:20px;display:grid;gap:14px;justify-items:center;
  box-shadow:0 16px 40px rgba(2,6,10,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.slot-marquee{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3em;
  font-size:12px;color:var(--em-bright,#34D399);text-transform:uppercase}
.slot-marquee::before,.slot-marquee::after{content:"";width:46px;height:2px;
  background:linear-gradient(90deg,transparent,var(--em),transparent)}
.slot-marquee::after{transform:scaleX(-1)}
.slot-window{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#050B08;
  border-radius:14px;padding:14px 16px;position:relative;overflow:hidden;
  box-shadow:inset 0 4px 18px rgba(2,6,10,.75),0 0 0 1px rgba(16,185,129,.25)}
.slot-window::before{content:"";position:absolute;left:0;right:0;top:44%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(16,185,129,.5),transparent);pointer-events:none}
.slot-reel{width:96px;height:110px;display:grid;place-items:center;font-size:52px;border-radius:10px;
  background:linear-gradient(180deg,#10201A 0%,#0B1713 40%,#0D1F18 100%);
  border:1px solid rgba(16,185,129,.18);position:relative;overflow:hidden}
.slot-reel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 30%,transparent 70%,rgba(0,0,0,.35));
  pointer-events:none;border-radius:10px}
.slot-reel.spin .reelstrip{animation:stripSpin .5s linear infinite}
.reelstrip{position:absolute;inset:0;display:grid;place-items:center;font-size:52px}
@keyframes stripSpin{0%{transform:translateY(-58%)}100%{transform:translateY(58%)}}
.slot-lever{display:flex;align-items:center;gap:6px;color:var(--em-bright,#34D399);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* ── KENO esferas ── */
.kball{width:100%;aspect-ratio:1;border-radius:50%;position:relative;
  background:radial-gradient(circle at 34% 28%,#233238,#0F171B 70%);
  border:1px solid var(--line);color:var(--ink-dim);font-size:13.5px;font-weight:800;
  display:grid;place-items:center;transition:all var(--t-fast) var(--e);cursor:pointer;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.06),0 2px 6px rgba(2,6,10,.4)}
.kball:hover{border-color:var(--em);transform:translateY(-2px)}
.kball.sel{background:radial-gradient(circle at 34% 28%,#4AE3B0,var(--em) 68%,var(--em-dim));
  color:#04251A;border-color:var(--em);box-shadow:0 4px 12px rgba(16,185,129,.5);transform:scale(1.06)}
.kball.hit{background:radial-gradient(circle at 34% 28%,#6FF5C6,var(--em) 60%,var(--em-dim));
  color:#04251A;border-color:var(--em);box-shadow:0 0 16px rgba(16,185,129,.65);animation:hitPop .55s var(--e)}
.kball.drawn-ball{background:radial-gradient(circle at 34% 28%,#243239,#141D22 70%);
  color:var(--ink-faint);font-size:10.5px;cursor:default;transform:none;box-shadow:none}
.kball.drawn-ball.hit{color:#04251A;font-size:12px}

/* ── ruleta layout ── */
.roul-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
.roul-side{display:grid;gap:14px;justify-items:center}

/* ── baccarat: placa de mesa ── */
.bacc-felt{width:100%;max-width:640px;border-radius:16px;padding:18px 14px;
  background:radial-gradient(ellipse at 50% 40%,#0D4436,#083126 60%,#062418);
  border:1px solid rgba(220,235,225,.14);box-shadow:inset 0 0 44px rgba(2,10,7,.5)}
.bacc-side{background:rgba(6,14,10,.55);border:1px solid rgba(220,235,225,.12);border-radius:12px;padding:14px;text-align:center;backdrop-filter:blur(2px)}
.bacc-side h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(220,235,225,.55);margin-bottom:9px}
.bacc-point{font:800 24px/1 "Avenir Next",system-ui,sans-serif;color:var(--em-bright,#34D399);margin-top:10px;font-variant-numeric:tabular-nums}
.bacc-vs{color:rgba(220,235,225,.4);font-weight:800;letter-spacing:.2em}

/* ── craps: mesa con paredes ── */
.craps-felt{width:100%;max-width:520px;border-radius:16px;padding:26px 18px;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(16,185,129,.08),transparent 55%),
    radial-gradient(ellipse at 50% 45%,#0C4234,#073024 62%,#05251A);
  border:10px solid #16201F;border-radius:22px;
  box-shadow:inset 0 0 50px rgba(2,10,7,.65),0 16px 38px rgba(2,6,10,.5);
  display:grid;gap:14px;justify-items:center;position:relative}
.craps-felt::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(220,235,225,.1)}

@media(max-width:640px){
  .ccard{width:56px;height:82px}
  .ccard .cc-rank{font-size:19px}.ccard .cc-suit-big{font-size:25px}
  .ccard .cc-corner b{font-size:10px}.ccard .cc-corner i{font-size:8px}
  .die3d{width:56px;height:56px}.pip{width:9px;height:9px}
  .pip.p1{top:22px;left:22px}.pip.p3b{top:22px;left:22px}
  .wheel-wrap{width:210px;height:210px}.wheel{width:210px;height:210px}
  .slot-reel{width:66px;height:86px;font-size:38px}
}
@media(max-width:420px){
  .slot-reel{width:56px;height:76px;font-size:32px}
  .ccard{width:48px;height:66px}
}
/* ═══════════════ FIN REPLICA LAYER v6 ═══════════════ */
/* ═══════════ RÉPLICA AAA v6.1 — celdas de cinta, dados mini, cartas mini, keno pop ═══════════════ */
.reelstrip{display:grid;gap:4px;place-items:center;justify-items:center}
.reelstrip.spinning{animation:stripFlow .42s linear infinite}
@keyframes stripFlow{0%{transform:translateY(-34%)}100%{transform:translateY(34%)}}
.reelstrip.stopped{animation:stripSettle .45s var(--e) backwards}
@keyframes stripSettle{0%{transform:translateY(-18%);opacity:.4}100%{transform:none;opacity:1}}
.rcell{width:74px;height:64px;display:grid;place-items:center;font-size:44px;
  background:linear-gradient(180deg,#132B22,#0C1B15);border:1px solid rgba(16,185,129,.22);
  border-radius:10px;box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 -1px 2px rgba(255,255,255,.05)}
.rcell.big{font-size:56px;width:86px;height:96px;box-shadow:0 0 20px rgba(16,185,129,.28),inset 0 2px 8px rgba(0,0,0,.5)}
.rcell.scell{color:#FFE9A8;text-shadow:0 0 16px rgba(245,184,64,.55)}
.rcell.wcell{color:var(--em-bright,#34D399);font-size:20px;gap:1px;letter-spacing:.1em}
.rcell.wcell .wcrest{font-size:30px;text-shadow:0 0 18px rgba(16,185,129,.7)}
.rcell.wcell small{font-size:7.5px;letter-spacing:.3em;font-weight:800;color:var(--em);opacity:.8}
.die3d.xs{width:28px;height:28px;border-radius:6px;box-shadow:0 2px 5px rgba(2,6,10,.4),inset 0 -1px 2px rgba(0,0,0,.12)}
.die3d.xs .pip{width:5px;height:5px}
.die3d.xs .pip.p1{top:11px;left:11px}
.die3d.xs .pip.p2a{top:4px;left:4px}.die3d.xs .pip.p2b{bottom:4px;right:4px}
.die3d.xs .pip.p3a{top:11px;left:4px}.die3d.xs .pip.p3b{top:11px;left:11px}.die3d.xs .pip.p3c{top:11px;right:4px}
.die3d.xs .pip.p4a{top:4px;left:4px}.die3d.xs .pip.p4b{top:4px;right:4px}.die3d.xs .pip.p4c{bottom:4px;left:4px}.die3d.xs .pip.p4d{bottom:4px;right:4px}
.die3d.xs .pip.p5a{top:4px;left:4px}.die3d.xs .pip.p5b{top:4px;right:4px}.die3d.xs .pip.p5c{top:11px;left:11px}
.die3d.xs .pip.p5d{bottom:4px;left:4px}.die3d.xs .pip.p5e{bottom:4px;right:4px}
.die3d.xs .pip.p6a{top:4px;left:4px}.die3d.xs .pip.p6b{top:4px;right:4px}.die3d.xs .pip.p6c{top:11px;left:4px}.die3d.xs .pip.p6d{top:11px;right:4px}
.die3d.xs .pip.p6e{bottom:4px;left:4px}.die3d.xs .pip.p6f{bottom:4px;right:4px}
.ccard.mini{width:34px;height:48px;border-radius:5px}
.ccard.mini .cc-rank{font-size:11px}.ccard.mini .cc-suit-big{font-size:13px}
.ccard.mini .cc-corner{display:none}
.dice-pair{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.ch-roll{display:inline-grid;grid-auto-flow:column;gap:3px;padding:3px;border-radius:8px;
  background:rgba(6,14,10,.5);border:1px solid var(--line);transition:border-color var(--t-fast)}
.ch-roll.win{border-color:var(--em);box-shadow:0 0 10px rgba(16,185,129,.35)}
.ch-roll.lose{border-color:rgba(240,82,95,.4)}
.craps-dice{min-height:84px;display:flex;gap:18px;align-items:center;justify-content:center}
.kball.kball-pop{animation:kballPop .45s var(--e) backwards}
@keyframes kball-pop-in{0%{transform:scale(0) rotate(-90deg);opacity:0}70%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.kball.kball-pop{animation:kball-pop-in .45s var(--e) backwards}
.bjtable-felt .bj-cards{min-height:80px}
.keno-drawn .kball{font-size:13px;font-weight:800;min-height:34px}
.slot-marquee{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3em;
  font-size:13px;color:var(--em-bright,#34D399);text-transform:uppercase}

/* ═══════════════ CASINO AAA REPLICA LAYER v7 — COMPLETAMENTE COMPLETO ═══════════════
   Mesa física de ruleta (plenos clicables) · bola orbital · chip visual · puck ON/OFF craps
   Big Road baccarat · flip de cartas · reparto escalonado · palanca slot · sonido WebAudio
   · ráfaga de premio · historial visual de ruleta · barra de progreso de giro */

/* ── 1. MESA FÍSICA DE RULETA (apuestas plenas clicables) ── */
.roul-board{width:100%;max-width:660px;border-radius:12px;overflow:hidden;
  border:3px solid #6E1F2A;background:linear-gradient(180deg,#0D4436,#083126);
  box-shadow:inset 0 0 40px rgba(2,10,7,.6),0 10px 30px rgba(2,6,10,.5);user-select:none}
.roul-board-row{display:grid;grid-template-columns:2.2fr repeat(12,1fr) .8fr;gap:2px;padding:2px}
.roul-board-row+.roul-board-row{margin-top:2px}
.rp-cell{min-height:34px;display:grid;place-items:center;border-radius:4px;
  font-weight:800;font-size:12px;color:#F2F5F7;cursor:pointer;
  border:1px solid rgba(230,240,238,.18);transition:all var(--t-fast)}
.rp-cell.num{font-variant-numeric:tabular-nums}
.rp-cell.num.r{background:linear-gradient(160deg,#B33040,#8E2532)}
.rp-cell.num.b{background:linear-gradient(160deg,#1A2228,#12181D)}
.rp-cell.num.z{background:linear-gradient(160deg,#0E8A5F,#0A6A49)}
.rp-cell:hover{transform:scale(1.06);box-shadow:0 0 10px rgba(255,255,255,.25);z-index:2}
.rp-cell.active-chip{box-shadow:0 0 0 2px #7CFFC9,0 0 14px rgba(16,185,129,.55)}
.rp-cell.outside{background:rgba(6,14,10,.5);font-size:10.5px;letter-spacing:.06em;min-height:30px}
.rp-cell.outside.half{background:rgba(6,14,10,.35)}
.rp-cell.dozen{background:rgba(6,14,10,.6)}
.roul-zero-col{display:grid;grid-template-rows:1fr 1fr 1fr;gap:2px}
.chips-on-board{min-height:22px;font-size:10px;color:var(--em-bright,#34D399);letter-spacing:.12em;
  text-transform:uppercase;text-align:center;padding-top:5px}

/* ── 2. BOLA ORBITAL en la rueda ── */
.wheel-orbit{position:absolute;inset:0;pointer-events:none;z-index:1}
.wheel-orbit .wball{position:absolute;top:-5px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#B9C4CC 70%);
  box-shadow:0 1px 3px rgba(2,6,10,.7),0 0 6px rgba(255,255,255,.4);opacity:0}
.wheel-spinning .wheel-orbit{animation:ballOrbit 1.15s cubic-bezier(.3,.05,.4,1) infinite}
@keyframes ballOrbit{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.wheel-settled .wheel-orbit .wball{opacity:1}

/* ── 3. CHIP de fichas (betrow + apuestas plenas) ── */
.chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;font-size:10.5px;font-weight:800;color:#04251A;
  background:radial-gradient(circle at 35% 30%,#4AE3B0,var(--em) 62%,var(--em-dim));
  box-shadow:0 2px 6px rgba(2,6,10,.45),inset 0 0 0 2px rgba(255,255,255,.5),inset 0 0 0 5px rgba(4,37,26,.25);
  border:1.5px dashed rgba(255,255,255,.55)}
.chip.silver{background:radial-gradient(circle at 35% 30%,#E7EDF2,#9AA9B4 65%);color:#10181D}
.chip.gold{background:radial-gradient(circle at 35% 30%,#FFE29A,var(--amber) 62%,#B8842A);color:#241A03}
.chip-drop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
  animation:chipDrop .45s var(--e)}
@keyframes chipDrop{0%{transform:translate(-50%,-140%) scale(1.3);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}

/* ── 4. PUCK ON/OFF de craps ── */
.craps-puck{position:absolute;top:12px;right:14px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.04em;
  border:3px solid rgba(255,255,255,.25);transition:all var(--t-med) var(--e);z-index:2}
.craps-puck.off{background:radial-gradient(circle at 35% 30%,#F4F7F9,#C9D2D8 70%);color:#3B4854;
  transform:rotate(180deg)}
.craps-puck.on{background:radial-gradient(circle at 35% 30%,#FFFDF6,#EDE3C8 70%);color:#8E2532;
  border-color:rgba(255,255,255,.5);box-shadow:0 4px 14px rgba(2,6,10,.5),0 0 18px rgba(245,184,64,.35)}
.craps-puck .pnum{display:none}
.craps-puck.on .pnum{display:block}
.craps-puck.on .pword{display:none}
.craps-puck .pnum{font-size:15px}

/* ── 5. BIG ROAD de baccarat (historial de resultados) ── */
.big-road{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,16px);gap:2px;
  padding:8px;border-radius:10px;background:rgba(6,14,10,.5);border:1px solid var(--line);
  max-width:420px;overflow:hidden;justify-content:start;min-height:112px}
.big-road .br-cell{width:20px;height:16px;border-radius:4px;border:1px solid rgba(148,163,184,.2);
  display:grid;place-items:center;font-size:9px;font-weight:800}
.br-cell.p{background:rgba(53,120,246,.35);border-color:rgba(53,120,246,.55);color:#BFDBFE}
.br-cell.b{background:rgba(240,82,95,.3);border-color:rgba(240,82,95,.5);color:#FECDD3}
.br-cell.t{background:rgba(245,184,64,.3);border-color:rgba(245,184,64,.5);color:#FDE9B8}
.br-cell.empty{visibility:hidden}

/* ── 6. Flip 3D del crupié y reparto escalonado ── */
.ccard{transform-style:preserve-3d;perspective:600px}
.ccard.dealing{animation:dealIn .45s var(--e) backwards}
.ccard.flip-in{animation:cardFlip .5s var(--e) backwards}
@keyframes cardFlip{0%{transform:rotateY(90deg) scale(.85);opacity:0}55%{opacity:1}100%{transform:none}}
.bj-dealer-flip{animation:dealerReveal .55s var(--e)}
@keyframes dealerReveal{0%{transform:rotateY(90deg)}60%{transform:rotateY(-8deg)}100%{transform:none}}

/* ── 7. Palanca del slot (one-armed bander) ── */
.slot-lever-arm{position:absolute;right:-34px;top:18px;width:20px;height:120px;pointer-events:none}
.slot-lever-stick{position:absolute;left:8px;top:14px;width:6px;height:74px;border-radius:4px;
  background:linear-gradient(180deg,#C9D2D8,#8FA3B3);box-shadow:0 2px 5px rgba(2,6,10,.4)}
.slot-lever-knob{position:absolute;left:1px;top:0;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF8A8A,var(--red) 70%);box-shadow:0 2px 6px rgba(2,6,10,.5)}
.slot-machine.is-spinning .slot-lever-stick-wrap{animation:leverPull .55s var(--e)}
.slot-lever-stick-wrap{position:absolute;transform-origin:12px 24px}
@keyframes leverPull{0%{transform:rotate(0)}45%{transform:rotate(130deg)}100%{transform:rotate(0)}}

/* ── 8. Ráfaga de premio (coins burst) ── */
.win-burst{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden}
.win-burst .coin{position:absolute;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE29A,#F5B840 65%,#B8842A);
  box-shadow:0 2px 6px rgba(2,6,10,.5),inset 0 0 0 2px rgba(255,255,255,.35);
  animation:coinFall 1.15s var(--e) forwards}
@keyframes coinFall{0%{transform:translateY(-10px) rotate(0) scale(.6);opacity:0}
  12%{opacity:1}100%{transform:translateY(46vh) rotate(340deg) scale(1);opacity:0}}
.win-flash{position:fixed;inset:0;pointer-events:none;z-index:94;
  background:radial-gradient(ellipse at center,rgba(16,185,129,.14),transparent 60%);
  animation:flashFade .9s var(--e) forwards}
@keyframes flashFade{0%{opacity:1}100%{opacity:0}}

/* ── 9. Historial visual de ruleta (carril con color) ── */
.rh-ball.rc-red{background:linear-gradient(160deg,#B33040,#8E2532);color:#FFE4E4;border-color:rgba(255,255,255,.2)}
.rh-ball.rc-black{background:linear-gradient(160deg,#1A2228,#12181D);color:#C6CFD8;border-color:rgba(255,255,255,.16)}
.rh-ball.rc-green{background:linear-gradient(160deg,#0E8A5F,#0A6A49);color:#D8FFE9;border-color:rgba(255,255,255,.2)}

/* ── 10. Barra de cierre de giro (ruleta) refinada ── */
.timerbar i{background:linear-gradient(90deg,var(--em),#7CFFC9)}
.table-card.wheel-closing{animation:closeWarn 1s var(--e) infinite}
@keyframes closeWarn{0%,100%{border-color:var(--line)}50%{border-color:var(--amber)}}

/* ── 10b. Ambience: botón de sonido en topbar ── */
.sndbtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink-dim);font-size:15px;
  transition:all var(--t-fast)}
.sndbtn:hover{border-color:var(--em);color:var(--em-bright,#34D399)}
.sndbtn.on{color:var(--em);border-color:var(--line-em);box-shadow:var(--glow)}

/* ── móvil ── */
@media(max-width:640px){
  .roul-board{max-width:100%}
  .rp-cell{min-height:24px;font-size:9.5px}
  .roul-board-row{grid-template-columns:1.4fr repeat(12,minmax(14px,1fr)) .6fr;gap:1px}
  .rp-cell.outside{font-size:8px;padding:2px 1px;letter-spacing:0}
  .slot-lever-arm{display:none}
  .big-road{grid-template-rows:repeat(6,14px)}
  .big-road .br-cell{width:15px;height:14px;font-size:7px}
  .craps-puck{width:36px;height:36px;font-size:10px}
}
@media(max-width:420px){
  .roul-board{border-width:2px}
  .rp-cell{min-height:18px;font-size:7.5px;border-radius:3px}
  .roul-board-row{grid-template-columns:1fr repeat(12,minmax(11px,1fr)) .6fr;gap:1px;padding:1px}
  .rp-cell.dozen,.rp-cell.outside{font-size:6.5px}
  .craps-puck{width:30px;height:30px;font-size:8px;border-width:2px}
}