:root{
      --slot-bg:#050018;
      --slot-bg-2:#0b0220;
      --slot-pink:#ff3fb0;
      --slot-cyan:#19f6ff;
      --slot-gold:#ffc93c;
      --slot-deep:#040013;
    }
    body{font-family:'Orbitron',sans-serif;background:linear-gradient(to bottom,var(--slot-bg),#11071f);color:#f0f0f0}
    /* Cash change animations */
    @keyframes cashUp{0%{transform:translateY(0)}30%{transform:translateY(-6px)}100%{transform:translateY(0)}}
    @keyframes cashDown{0%{transform:translateY(0)}30%{transform:translateY(6px)}100%{transform:translateY(0)}}
    .cash-up{animation:cashUp .6s ease; color:#22c55e !important; text-shadow:0 0 10px rgba(34,197,94,.6)}
    .cash-down{animation:cashDown .6s ease; color:#ef4444 !important; text-shadow:0 0 10px rgba(239,68,68,.6)}
    /* Player card is no longer sticky; only the floating balance badge stays pinned. */
    /* Slots neon redesign */
    .slots-hero{position:relative; padding:56px 0 42px; display:flex; justify-content:center; overflow:hidden;}
    .slots-hero::before,.slots-hero::after{content:""; position:absolute; inset:0; pointer-events:none;}
    .slots-hero::before{background:radial-gradient(38% 38% at 18% 22%, rgba(255,0,170,.18), transparent 60%), radial-gradient(42% 42% at 82% 78%, rgba(0,255,255,.15), transparent 64%), radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.04), transparent 70%); filter:blur(6px);}
    .slots-hero::after{background:radial-gradient(90% 70% at 50% 20%, rgba(160,32,240,.12), transparent 70%); mix-blend-mode:screen;}
    .slot-shell{position:relative; width:min(1200px,96vw); margin:auto; background:linear-gradient(180deg, rgba(8,4,22,.95), rgba(5,0,20,.92)); border-radius:32px; box-shadow:0 32px 80px rgba(0,0,0,.7), 0 0 36px rgba(255,0,204,.25); padding:18px 22px 26px; overflow:hidden;}
    .slot-shell::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.04), transparent 70%); pointer-events:none;}
    .slot-header-bar{position:relative; margin:0 10px 18px; padding:16px 18px; border-radius:18px; background:linear-gradient(90deg, rgba(0,255,255,.28), rgba(255,0,204,.24)); border:2px solid rgba(0,255,255,.4); text-align:center; box-shadow:0 0 32px rgba(0,255,255,.3), 0 0 32px rgba(255,0,204,.2);}
    .slot-header-title{font-size:32px; letter-spacing:3px; font-weight:900; color:var(--slot-cyan); text-shadow:0 0 16px rgba(0,255,255,.85), 0 0 26px rgba(0,255,255,.6);}
    .slot-body{position:relative; padding:0 6px 6px;}
    .slot-frame{position:relative; border-radius:28px; background:radial-gradient(120% 120% at 50% 35%, rgba(12,28,78,.7), rgba(5,7,18,.96)); padding:28px 24px 22px; box-shadow:0 22px 40px rgba(0,0,0,.65); overflow:hidden;}
    .slot-frame::before{content:""; position:absolute; inset:0; border-radius:28px; border:18px solid var(--slot-pink); box-shadow:0 0 44px rgba(255,48,179,.45), 0 0 30px rgba(0,255,255,.22); filter:drop-shadow(0 0 18px rgba(255,48,179,.4)); pointer-events:none;}
    .slot-frame::after{content:""; position:absolute; inset:16px; border-radius:18px; border:3px solid rgba(0,255,255,.38); box-shadow:0 0 24px rgba(0,255,255,.45), inset 0 0 18px rgba(0,0,0,.35); pointer-events:none;}
    .slot-machine{position:relative; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.78)); border-radius:18px; padding:18px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; box-shadow: inset 0 8px 22px rgba(255,255,255,.06), inset 0 -16px 30px rgba(0,0,0,.6); overflow:hidden;}
    .slot-machine::before{content:""; position:absolute; inset:14px; border-radius:12px; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0), rgba(255,255,255,.04)); opacity:.55; pointer-events:none;}
    .slot-machine::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(255,255,255,.07) calc(20% - 1px) 20%); mix-blend-mode:soft-light; opacity:.35; pointer-events:none;}
    .reel{ position:relative; overflow:hidden; border-radius:18px; box-shadow:inset 0 0 22px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.45); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.55)); min-height:220px;}
    .reel .strip{ position:absolute; inset:0 auto auto 0; width:100%; will-change:transform; transform:translateY(0); }
    .reel .cell{ position:relative; height:var(--cellH,72px); display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.08), rgba(0,0,0,.82)); border:1px solid rgba(0,255,255,.08); border-radius:12px; overflow:hidden;}
    .reel .cell img{ max-width:78%; max-height:82%; object-fit:contain; filter: drop-shadow(0 0 10px rgba(255,255,255,.22)) drop-shadow(0 0 12px rgba(32,232,205,.5)); transition: transform .2s, filter .2s; }
    .reel .cell:hover img{ transform:scale(1.04); filter: drop-shadow(0 0 16px rgba(0,255,255,.45)); }
    #slot-stage.spinning #slot-overlay{ opacity:0; transition: opacity .15s ease; }
    #slot-stage{position:relative; max-width:1180px; margin-inline:auto;}
    #slot-stage .slot-reflect{position:absolute; inset:22px; border-radius:18px; background:linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0)); filter:blur(10px); pointer-events:none;}
    .slot-ambient{position:absolute; inset:10px; border-radius:22px; pointer-events:none; background:radial-gradient(120% 80% at 20% 10%, rgba(255,0,170,.08), transparent 60%), radial-gradient(100% 90% at 80% 90%, rgba(0,255,255,.08), transparent 70%);}
    .slot-footer{margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px 14px; box-shadow:inset 0 0 12px rgba(0,0,0,.45);}
    .slot-bet-pill{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.55); border:1px solid rgba(0,255,255,.25); box-shadow:0 0 14px rgba(0,255,255,.18);}
    .slot-bet-pill label{font-size:12px; color:#a5b4fc; text-transform:uppercase; letter-spacing:.05em;}
    .slot-bet-pill input{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); color:#fff; padding:6px 10px; border-radius:10px; width:120px;}
    .slot-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
    .slot-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; font-size:12px; color:#e5e7eb;}
    .slot-spin-btn{padding:10px 22px; border-radius:999px; background:linear-gradient(135deg, #ff3fb0, #7c3aed); color:#fff; font-weight:900; letter-spacing:.05em; box-shadow:0 0 24px rgba(255,63,176,.45), 0 12px 30px rgba(0,0,0,.45); transition:transform .12s ease, box-shadow .12s ease;}
    .slot-spin-btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 0 32px rgba(255,63,176,.6), 0 14px 32px rgba(0,0,0,.5);}
    .slot-spin-btn:disabled{opacity:.65; filter:grayscale(0.3);}
    /* Tabs */
    .tab-btn{padding:.45rem .75rem;border-radius:.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#e5e7eb;font-weight:700}
  .tab-btn:hover{background:rgba(255,255,255,.1)}
  .tab-btn.active{background:rgba(167,139,250,.25);border-color:rgba(167,139,250,.6);color:#fff;box-shadow:0 0 10px rgba(167,139,250,.25) inset}
  .horse-track{position:relative;background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:16px;overflow:hidden}
  .horse-lane{position:relative;display:flex;align-items:center;height:48px;margin:6px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
  .horse-lane:last-child{border-bottom:none}
  .horse-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:8px}
  .horse-body{flex:1;position:relative;height:100%;padding-right:90px;overflow:hidden}
  .horse-runner{position:absolute;top:8px;left:0;transition:transform 4s cubic-bezier(.25,.8,.45,1);display:flex;align-items:center;gap:6px;font-weight:700;color:#e0e7ff}
  .runner-icon{width:30px;height:20px;border-radius:8px;background:linear-gradient(135deg,#fbbf24,#f97316);display:inline-flex;align-items:center;justify-content:center;color:#0b0a17;box-shadow:0 0 12px rgba(251,191,36,.35);animation:gallop .55s infinite ease-in-out}
  .horse-runner.burst .runner-icon{box-shadow:0 0 16px rgba(14,165,233,.6); background:linear-gradient(135deg,#38bdf8,#0ea5e9)}
  @keyframes gallop{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
  .horse-flag{position:absolute;top:6px;right:4px;width:10px;height:34px;background:repeating-linear-gradient(180deg,#f97316 0 6px,#fbbf24 6px 12px);border-radius:4px}
  .horse-meta{font-size:11px;color:#cbd5f5}
  .horse-lane.winner .runner-icon{box-shadow:0 0 14px rgba(34,197,94,.55);background:linear-gradient(135deg,#4ade80,#22c55e)}
  .horse-lane.finished .horse-meta{color:#a5b4fc}
  .horse-progress{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#cbd5f5;background:rgba(0,0,0,.35);padding:2px 6px;border-radius:9999px;border:1px solid rgba(255,255,255,.08)}
  .finish-tape{position:absolute;top:6px;right:22px;width:6px;bottom:6px;background:linear-gradient(180deg,#e11d48,#fb7185);box-shadow:0 0 12px rgba(251,113,133,.4);opacity:.4}
  .horse-status{font-size:13px;color:#c4c7f5}
  .horse-countdown{font-weight:800;letter-spacing:.1em}
  .brand-hat-wrap{display:inline-flex;position:relative;align-items:center;}
  .brand-text{display:inline-flex;align-items:center;}
  .brand-hat{position:absolute;left:-22px;top:-5px;width:48px;transform:rotate(-12deg);pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
  /* Crash (Aviator) */
  .crash-card{background:radial-gradient(circle at 20% 20%, rgba(96,165,250,.08), transparent 38%), rgba(17,24,39,.78); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; box-shadow:0 20px 40px rgba(0,0,0,.35);}
  .crash-meter{height:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:9999px; position:relative; overflow:hidden;}
  .crash-fill{position:absolute; top:0; left:0; bottom:0; width:0%; background:linear-gradient(90deg,#22d3ee,#a855f7); box-shadow:0 0 12px rgba(168,85,247,.45);}
  .crash-rocket{position:absolute; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; background:linear-gradient(135deg,#fbbf24,#f97316); border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(251,191,36,.55); animation:rocket-bob 1.2s ease-in-out infinite alternate;}
  .crash-rocket-label{position:absolute; top:-30px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.65); padding:3px 7px; border-radius:8px; font-size:11px; border:1px solid rgba(255,255,255,.1);}
  .crash-trail{position:absolute; width:6px; height:6px; border-radius:50%; background:rgba(14,165,233,.5); filter:blur(1px); animation: trail 0.7s ease-out forwards;}
  @keyframes trail{ from{opacity:.8; transform:translateY(-2px) scale(1)} to{opacity:0; transform:translateY(6px) scale(0.6)} }
  .crash-history span{display:inline-flex; padding:4px 8px; border-radius:8px; margin-right:6px; font-weight:700; font-size:12px;}
  .crash-chip-win{background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.35); color:#bbf7d0;}
  .crash-chip-lose{background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.3); color:#fecdd3;}
  /* crash overrides */
  .crash-card{background:radial-gradient(140% 120% at 50% 30%, rgba(26,67,118,.22), transparent 60%), radial-gradient(circle at 20% 20%, rgba(96,165,250,.12), transparent 45%), rgba(6,10,18,.92); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; box-shadow:0 20px 40px rgba(0,0,0,.45);}
  .crash-graph{position:relative; background:radial-gradient(120% 140% at 50% 40%, rgba(0,0,0,.65), transparent 70%); overflow:hidden;}
  .crash-graph:after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.05), transparent 55%); pointer-events:none;}
  .crash-rocket-label{background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15);}
  .crash-meter{display:none;}
  @keyframes rocket-bob{from{transform:translate(-50%,-50%) rotate(-4deg);} to{transform:translate(-50%,-50%) rotate(4deg);}}
    .casino-tab.hidden{display:none}
    /* Roulette table cells */
    .cell{display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:.35rem;border:1px solid rgba(255,255,255,.3);font-weight:800;color:#fff;cursor:pointer}
    .cell.red{background:#b91c1c}
    .cell.black{background:#111827}
    .cell.green{background:#065f46}
    .cell.even,.cell.odd,.cell.range,.cell.dozen{background:rgba(255,255,255,.12)}
    .cell:hover{filter:brightness(1.1)}
    .cell.active{outline:3px solid #f59e0b}
    .cell{position:relative}
    /* Table chip marker */
    .bet-amt{position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; background:#fff; color:#000; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; border:3px solid #e5e7eb; box-shadow:0 2px 4px rgba(0,0,0,.3)}
    .bet-amt.red{ border-color:#ef4444 }
    .bet-amt.blue{ border-color:#3b82f6 }
    .bet-amt.orange{ border-color:#f59e0b }
    .bet-amt.gold{ border-color:#eab308 }
    .chip-btn{width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-weight:900;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.25);color:#111827}
    .chip-btn.active{outline:3px solid rgba(139,92,246,.65); color:#111827}
    .chip-btn.minus{width:auto;height:auto;padding:.3rem .6rem;border-radius:.5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:800}
    .chip-btn.minus.active{background:#ef4444;color:#fff;border-color:#f87171}
    .chip-v1{background:radial-gradient(circle at 35% 30%,#fca5a5,#ef4444);border-color:#fecaca}
    .chip-v5{background:radial-gradient(circle at 35% 30%,#93c5fd,#3b82f6);border-color:#bfdbfe}
    .chip-v10{background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b);border-color:#fde68a}
    .chip-v25{background:radial-gradient(circle at 35% 30%,#6ee7b7,#10b981);border-color:#a7f3d0}
    .chip-v100{background:radial-gradient(circle at 35% 30%,#fde68a,#eab308);border-color:#fde68a}
    /* Wheel ball */
    .wheel-wrap{ position:relative }
    #wheel-orbit{ position:absolute; top:50%; left:50%; width:0; height:0; transform:translate(-50%,-50%) rotate(0deg); transform-origin: 0 0; transition: transform 2200ms cubic-bezier(.2,.85,.3,1); pointer-events:none; z-index:3 }

    /* Neon win lines */
    #slot-overlay{ pointer-events:none }
  .slot-line{ fill:none; stroke:#e879f9; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(232,121,249,.7)); opacity:0; animation: line-pop .28s ease forwards; mix-blend-mode: screen; }
    body.slots-lite .reel{ box-shadow: inset 0 0 14px rgba(0,0,0,.45), 0 0 16px rgba(0,0,0,.35); }
    body.slots-lite .reel .cell img{ filter: drop-shadow(0 0 6px rgba(255,255,255,.2)); }
    body.slots-lite .slot-line{ stroke-width:2.5; filter:none; }
    .win-beam{ fill: url(#beamGrad); stroke:#e879f9; stroke-width:4; rx:14; ry:14; filter: drop-shadow(0 0 10px rgba(232,121,249,.55)); opacity:0; animation: line-pop .28s ease forwards; }
    .beam{ transform-box: fill-box; transform-origin: left center; animation: beam-grow .28s ease forwards; }
    @keyframes beam-grow{ from{ transform: scaleX(0)} to{ transform: scaleX(1)} }
    .cell.win img{ transform:none; filter:none; }
    @keyframes line-pop{ from{opacity:0; transform:scale(.98)} to{opacity:.95; transform:scale(1)} }
    #wheel-orbit .ball{ display:block; width:12px; height:12px; background:#fff; border-radius:50%; box-shadow:0 0 8px rgba(255,255,255,.8); transform: translateX(110px) }
    /* Slots win flair */
    .cell.win{animation:slotGlow 1s ease-in-out infinite alternate; filter:drop-shadow(0 0 6px rgba(244,114,182,.8));}
    @keyframes slotGlow{from{transform:scale(1); filter:drop-shadow(0 0 4px rgba(232,121,249,.6));} to{transform:scale(1.05); filter:drop-shadow(0 0 10px rgba(94,234,212,.8));}}
    .slot-shower{position:absolute; top:10%; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#22d3ee); opacity:.9; pointer-events:none; animation:slotFall .9s ease-out forwards;}
    @keyframes slotFall{0%{transform:translateY(0) scale(1);} 100%{transform:translateY(120px) scale(0.4); opacity:0;}}
    /* ---- Roulette board sizing (prevent overflow on widescreens) ---- */
    #roul2-table{ --cell: clamp(32px, 3.3vw, 48px); grid-template-columns: 40px repeat(12, var(--cell)) 40px; width:max-content; align-items:start }
    #roul2-table .col-span-12{ grid-template-columns: repeat(12, var(--cell)); }
    #roul2-table .table-head{ grid-template-columns: repeat(12, var(--cell)); }
    #roul2-table .cell{ min-width: var(--cell); min-height: calc(var(--cell) * 0.9); }
    @media (max-width: 900px){ #roul2-table{ --cell: 34px } }
    #roulette-wrap{ width: fit-content; max-width: 100%; }
    /* --- Blackjack: card UI --- */
    .bj-table{ position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; }
    .bj-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap }
    .bj-hand{ display:flex; align-items:center; gap:10px; min-height:96px; position:relative }
    .bj-shoe{ position:absolute; left:-16px; top:50%; width:36px; height:52px; border-radius:6px; transform:translateY(-50%); background:linear-gradient(180deg,#0b1222,#1f2937); border:1px solid rgba(255,255,255,.15); box-shadow:0 6px 12px rgba(0,0,0,.35) }
    .card{ width:56px; height:80px; border-radius:8px; background:#fff; color:#111; box-shadow:0 6px 14px rgba(0,0,0,.35); border:1px solid rgba(0,0,0,.15); position:relative; display:flex; align-items:center; justify-content:center; font-weight:800; }
    .card.red{ color:#b91c1c }
    .card .rank{ font-size:20px }
    .card .suit{ position:absolute; right:6px; bottom:4px; font-size:14px }
    .card.back{ background:linear-gradient(135deg,#1f2937,#0b1222); border-color:#374151; }
    @keyframes dealIn{ from{ transform:translate(var(--from-x,0), var(--from-y,0)) scale(.9); opacity:.0 } to{ transform:translate(0,0) scale(1); opacity:1 } }
    .card.deal{ animation: dealIn .28s ease forwards }
    /* Let the green board wrap to the grid width to avoid overflow */
    #roul-board{ width: fit-content; max-width: 100%; display: inline-block }