/* CONSUMERLAND — casino styles. Scoped entirely to #v-casino.

   This is not a second design system: it uses the same type scale, the same
   display/body/mono faces and the same spacing conventions as index.html. What it
   does do is commit to one dark world regardless of the app theme, so walking into
   the casino feels like walking into a different room. Every token here is local
   and nothing leaks back out. */

#v-casino{
  --cs-bg:#07090A; --cs-panel:#0E1211; --cs-raise:#1B2321;
  --cs-line:#1D2422; --cs-line-2:#2C3733;
  --cs-ink:#F3F7F5; --cs-ink-2:#8E9C96; --cs-ink-3:#5B6A64;
  --cs-felt:#0C3A2C; --cs-felt-2:#082A20;
  --cs-accent:#D9B571;              /* champagne, used sparingly and never as a fill */
  --cs-win:#3DDC97; --cs-lose:#FF6B6B;
  --cw:70px;                        /* card width — everything else scales off it */
  color:var(--cs-ink);
}
.cs{background:var(--cs-bg);border:1px solid var(--cs-line);border-radius:20px;overflow:hidden}

/* ------------------------------------------------------------- header */
.cs-top{padding:26px 26px 22px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--cs-line);
  background:radial-gradient(120% 140% at 8% 0%,rgba(217,181,113,.07),transparent 58%),var(--cs-panel)}
.cs-title{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4.4vw,38px);
  letter-spacing:.02em;line-height:1;margin:0}
.cs-sub{color:var(--cs-ink-3);font-size:11.5px;margin-top:7px}
.cs-bal{margin-left:auto;text-align:right}
.cs-bal .k{font-size:9px;letter-spacing:.2em;color:var(--cs-ink-3);font-weight:700}
.cs-bal .v{font-family:var(--disp);font-weight:800;font-size:clamp(24px,4vw,32px);
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.cs-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:16px}

/* -------------------------------------------------------- game cards */
.cs-games{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cs-game{position:relative;border:1px solid var(--cs-line);border-radius:16px;overflow:hidden;
  background:var(--cs-panel);text-align:left;padding:0;display:flex;flex-direction:column;
  transition:transform .18s cubic-bezier(.2,.9,.3,1),border-color .18s,box-shadow .18s}
.cs-game:hover{transform:translateY(-3px);border-color:var(--cs-line-2);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.cs-game:active{transform:translateY(-1px)}
.cs-prev{height:124px;position:relative;overflow:hidden;
  background:radial-gradient(90% 120% at 50% 120%,var(--cs-felt),var(--cs-felt-2) 70%)}
.cs-game-b{padding:15px 16px 16px;border-top:1px solid var(--cs-line)}
.cs-game-n{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.08em;
  display:flex;align-items:center;gap:9px}
.cs-game-n i{color:var(--cs-accent);font-style:normal;font-size:16px}
.cs-game-d{color:var(--cs-ink-3);font-size:12px;margin-top:4px}

/* the previews: small, slow, and they only really move on hover */
.pv-card{position:absolute;width:38px;height:53px;border-radius:5px;background:#F7F9F8;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.8);display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:15px;color:#101413}
.pv-card.r{color:#C8303B}
.pv-1,.pv-2{transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.pv-1{left:calc(50% - 40px);top:36px;transform:translate(-8px,0) rotate(-5deg)}
.pv-2{left:calc(50% + 2px);top:36px;transform:translate(6px,0) rotate(4deg)}
.cs-game:hover .pv-1{transform:translate(-26px,0) rotate(-9deg)}
.cs-game:hover .pv-2{transform:translate(20px,-6px) rotate(8deg)}
.pv-wheel{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  border-radius:50%;border:2px solid var(--cs-line-2);animation:pvSpin 22s linear infinite;
  background:conic-gradient(from 0deg,#222D29 0 10deg,#8E2B33 0 20deg,#222D29 0 30deg,#8E2B33 0 40deg,
    #222D29 0 50deg,#8E2B33 0 60deg,#222D29 0 70deg,#8E2B33 0 80deg,#222D29 0 90deg,#8E2B33 0 100deg,
    #222D29 0 110deg,#8E2B33 0 120deg,#222D29 0 130deg,#8E2B33 0 140deg,#222D29 0 150deg,#8E2B33 0 160deg,
    #222D29 0 170deg,#8E2B33 0 180deg,#222D29 0 190deg,#8E2B33 0 200deg,#222D29 0 210deg,#8E2B33 0 220deg,
    #222D29 0 230deg,#8E2B33 0 240deg,#222D29 0 250deg,#8E2B33 0 260deg,#222D29 0 270deg,#8E2B33 0 280deg,
    #222D29 0 290deg,#8E2B33 0 300deg,#222D29 0 310deg,#8E2B33 0 320deg,#222D29 0 330deg,#8E2B33 0 340deg,
    #222D29 0 350deg,#0E7A55 0 360deg)}
.cs-game:hover .pv-wheel{animation-duration:6s}
@keyframes pvSpin{to{transform:rotate(360deg)}}
.pv-hub{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;background:var(--cs-panel);border:1px solid var(--cs-line-2)}
.pv-chips{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex}
.pv-chip{width:34px;height:34px;border-radius:50%;margin-left:-11px;
  border:3px dashed rgba(255,255,255,.55);box-shadow:0 6px 14px -6px rgba(0,0,0,.9);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.cs-game:hover .pv-chip:nth-child(1){transform:translateY(-7px)}
.cs-game:hover .pv-chip:nth-child(2){transform:translateY(-12px)}
.cs-game:hover .pv-chip:nth-child(3){transform:translateY(-7px)}

/* --------------------------------------------------------- the table */
.cs-felt{border-radius:18px;border:1px solid var(--cs-line);position:relative;overflow:hidden;
  padding:22px;min-height:320px;display:flex;flex-direction:column;gap:14px;
  background:
    radial-gradient(120% 100% at 50% -10%,rgba(255,255,255,.045),transparent 60%),
    radial-gradient(100% 120% at 50% 110%,var(--cs-felt),var(--cs-felt-2) 72%)}
.cs-seat{display:flex;flex-direction:column;gap:9px;align-items:center}
.cs-seat.you{margin-top:auto}
.cs-label{font-size:9px;letter-spacing:.24em;font-weight:700;color:rgba(255,255,255,.42);
  display:flex;align-items:center;gap:9px}
.cs-total{font-family:var(--disp);font-weight:800;font-size:15px;background:rgba(0,0,0,.34);
  padding:3px 10px;border-radius:999px;color:#fff;font-variant-numeric:tabular-nums;
  border:1px solid rgba(255,255,255,.1)}
.cs-total.bust{color:var(--cs-lose)}
.cs-total.good{color:var(--cs-win)}
.cs-hand{display:flex;gap:7px;justify-content:center;min-height:calc(var(--cw)*1.4);flex-wrap:wrap}

/* ------------------------------------------------------ playing card */
.pcw{width:var(--cw);height:calc(var(--cw)*1.4);perspective:900px;flex:0 0 auto;position:relative}
.pcw.deal{animation:dealIn .38s cubic-bezier(.16,.9,.28,1.04) backwards;
  animation-delay:calc(var(--i,0)*80ms)}
@keyframes dealIn{
  0%{transform:translate(38%,-190%) rotate(14deg) scale(.86);opacity:0}
  62%{opacity:1}
  84%{transform:translate(0,3%) rotate(-1.2deg) scale(1.015)}
  100%{transform:none;opacity:1}
}
.pci{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.3,.85,.25,1)}
.pcw.down .pci{transform:rotateY(180deg)}
.pcf,.pcb{position:absolute;inset:0;border-radius:calc(var(--cw)*.11);backface-visibility:hidden;
  -webkit-backface-visibility:hidden;box-shadow:0 8px 18px -8px rgba(0,0,0,.85)}
.pcf{background:linear-gradient(170deg,#FFFFFF,#EEF2F0);color:#121715;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--cw)*.09)}
.pcf.red{color:#C8303B}
.pcb{transform:rotateY(180deg);border:1px solid rgba(255,255,255,.1);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 4px,transparent 4px 8px),
    linear-gradient(160deg,#173A30,#0C221C)}
.pc-r{font-family:var(--disp);font-weight:800;font-size:calc(var(--cw)*.27);line-height:1;
  letter-spacing:-.04em;position:relative;z-index:2}
.pc-s{font-size:calc(var(--cw)*.24);line-height:1;align-self:flex-end;position:relative;z-index:2}
.pc-mid{position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--cw)*.42);opacity:.14}
.pcw.win .pcf{box-shadow:0 0 0 2px var(--cs-win),0 10px 26px -8px rgba(61,220,151,.6)}
.pcw.dim{opacity:.34;filter:saturate(.5)}
.pcw.held .pcf{box-shadow:0 0 0 2px var(--cs-accent),0 10px 22px -10px rgba(217,181,113,.7)}
.pcw.pick{cursor:pointer;transition:transform .16s}
.pcw.pick:hover{transform:translateY(-8px)}
.pc-hold{position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;font-size:8.5px;
  letter-spacing:.16em;font-weight:700;color:var(--cs-accent);opacity:0;transition:opacity .16s;
  white-space:nowrap}
.pcw.held .pc-hold{opacity:1}

/* ----------------------------------------------------------- buttons */
.cs-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.cs-btn{min-height:46px;padding:0 22px;border-radius:12px;font-family:var(--disp);font-weight:800;
  font-size:13px;letter-spacing:.09em;border:1px solid var(--cs-line-2);background:var(--cs-raise);
  color:var(--cs-ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .11s,background .14s,border-color .14s,box-shadow .14s}
.cs-btn:hover:not([disabled]){background:#222C29;border-color:#3A4844;transform:translateY(-1px)}
.cs-btn:active:not([disabled]){transform:translateY(0) scale(.975)}
.cs-btn[disabled]{opacity:.34;cursor:not-allowed}
.cs-btn.go{background:var(--cs-accent);border-color:transparent;color:#0A0C0B;
  box-shadow:0 10px 24px -12px rgba(217,181,113,.8)}
.cs-btn.go:hover:not([disabled]){background:#E5C482}
.cs-btn.ghost{background:transparent}
.cs-btn.wide{width:100%}
.cs-btn.sm{min-height:36px;padding:0 14px;font-size:11.5px;border-radius:10px}

/* ------------------------------------------------------------- betting */
.cs-betbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
  padding:16px;border-radius:14px;background:var(--cs-panel);border:1px solid var(--cs-line)}
.cs-stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--cs-line-2);
  border-radius:12px;overflow:hidden;background:var(--cs-bg)}
.cs-stepper button{width:42px;height:46px;font-size:18px;color:var(--cs-ink-2);transition:background .12s}
.cs-stepper button:hover{background:var(--cs-raise);color:var(--cs-ink)}
.cs-stepper input{width:104px;height:46px;text-align:center;background:transparent;border:none;
  font-family:var(--disp);font-weight:800;font-size:17px;color:var(--cs-ink);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cs-stepper input::-webkit-outer-spin-button,
.cs-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cs-presets{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.cs-preset{min-height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--cs-line-2);
  background:transparent;color:var(--cs-ink-2);font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;transition:all .13s}
.cs-preset:hover{border-color:var(--cs-accent);color:var(--cs-ink)}
.cs-preset[aria-pressed="true"]{background:var(--cs-accent);border-color:transparent;color:#0A0C0B}

/* --------------------------------------------------------------- chips */
.chip{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--disp);font-weight:800;font-size:11px;color:#0A0C0B;position:relative;
  border:3px dashed rgba(255,255,255,.62);box-shadow:0 7px 16px -7px rgba(0,0,0,.95);
  transition:transform .15s cubic-bezier(.2,1.4,.4,1)}
.chip:hover{transform:translateY(-5px)}
.chip.drop{animation:chipDrop .34s cubic-bezier(.2,1.3,.4,1) backwards;
  animation-delay:calc(var(--i,0)*55ms)}
@keyframes chipDrop{
  0%{transform:translateY(-52px) scale(.8);opacity:0}
  70%{transform:translateY(3px) scale(1.04)}
  100%{transform:none;opacity:1}
}
.cs-stack{display:flex;justify-content:center;min-height:44px;align-items:center}
.cs-stack .chip{margin-left:-13px}
.cs-stack .chip:first-child{margin-left:0}

/* -------------------------------------------------------------- result */
.cs-result{text-align:center;padding:16px;border-radius:14px;border:1px solid var(--cs-line);
  background:var(--cs-panel);animation:resIn .3s cubic-bezier(.2,1.1,.3,1)}
@keyframes resIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cs-result.win{border-color:color-mix(in srgb,var(--cs-win) 42%,var(--cs-line));
  background:linear-gradient(180deg,rgba(61,220,151,.1),var(--cs-panel) 70%)}
.cs-result.lose{border-color:color-mix(in srgb,var(--cs-lose) 32%,var(--cs-line))}
.cs-result .rl{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.16em}
.cs-result.win .rl{color:var(--cs-win)}
.cs-result.lose .rl{color:var(--cs-lose)}
.cs-result .rv{font-family:var(--disp);font-weight:800;font-size:clamp(28px,5.5vw,40px);
  letter-spacing:-.035em;line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
.cs-result .rd{color:var(--cs-ink-3);font-size:12px;margin-top:5px}
.cs-result.big{border-color:var(--cs-accent);
  background:linear-gradient(180deg,rgba(217,181,113,.15),var(--cs-panel) 72%)}
.cs-result.big .rl{color:var(--cs-accent);font-size:17px;letter-spacing:.22em}

/* ------------------------------------------------------------ roulette */
.rl-wrap{display:grid;gap:16px;grid-template-columns:minmax(210px,290px) 1fr;align-items:start}
.rl-wheel{position:relative;aspect-ratio:1;width:100%;overflow:visible;cursor:pointer}
.rl-wheel svg{width:100%;height:100%;display:block}
.rl-readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  pointer-events:none}
.rl-num{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.04em}
.rl-num.red{color:#E4565F}
.rl-num.black{color:var(--cs-ink)}
.rl-num.green{color:var(--cs-win)}
.rl-col{font-size:9px;letter-spacing:.22em;font-weight:700;margin-top:3px;color:var(--cs-ink-3)}
.rl-board{display:grid;gap:5px}
.rl-nums{display:grid;gap:4px}
.rl-cell{aspect-ratio:1;border-radius:6px;font-family:var(--disp);font-weight:800;font-size:11px;
  display:grid;place-items:center;border:1px solid transparent;position:relative;color:#fff;
  transition:transform .12s,box-shadow .12s}
.rl-cell:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(0,0,0,.9);
  border-color:var(--cs-accent)}
.rl-cell.red{background:#8E2B33}
.rl-cell.black{background:#171D1B}
.rl-cell.green{background:#0E7A55}
.rl-cell.hit{box-shadow:0 0 0 2px var(--cs-accent),0 0 22px -4px var(--cs-accent);z-index:2}
.rl-cell .bp,.rl-out .bp{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;
  border-radius:9px;background:var(--cs-accent);color:#0A0C0B;font-size:9px;display:grid;
  place-items:center;padding:0 3px;font-variant-numeric:tabular-nums;font-family:var(--body)}
.rl-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.rl-out{min-height:38px;border-radius:8px;border:1px solid var(--cs-line-2);background:var(--cs-panel);
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--cs-ink-2);position:relative;
  display:grid;place-items:center;transition:all .13s}
.rl-out:hover{border-color:var(--cs-accent);color:var(--cs-ink)}
.rl-out.red{background:#6E222A;color:#fff;border-color:transparent}
.rl-out.black{background:#141A18;color:#fff}
.rl-slip{display:flex;gap:6px;flex-wrap:wrap}
.rl-slip .s{font-size:11px;padding:4px 9px;border-radius:7px;background:var(--cs-raise);
  border:1px solid var(--cs-line-2);display:inline-flex;gap:7px;align-items:center}
.rl-slip .s b{font-variant-numeric:tabular-nums}
.rl-slip .s button{color:var(--cs-ink-3);font-size:13px;line-height:1}
.rl-slip .s button:hover{color:var(--cs-lose)}
.spinning{font-size:10px;letter-spacing:.3em;color:var(--cs-ink-3);font-weight:700;
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ------------------------------------------------------------- history */
.cs-panel{border:1px solid var(--cs-line);border-radius:14px;background:var(--cs-panel);overflow:hidden}
.cs-panel-h{padding:13px 16px;border-bottom:1px solid var(--cs-line);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.cs-panel-h h4{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.18em;margin:0}
.cs-tots{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--cs-line)}
.cs-tot{padding:13px 16px;border-right:1px solid var(--cs-line)}
.cs-tot:last-child{border-right:none}
.cs-tot .k{font-size:9px;letter-spacing:.17em;color:var(--cs-ink-3);font-weight:700}
.cs-tot .v{font-family:var(--disp);font-weight:800;font-size:17px;margin-top:3px;
  font-variant-numeric:tabular-nums}
.cs-tot .v.up{color:var(--cs-win)}
.cs-tot .v.down{color:var(--cs-lose)}
.cs-hrow{display:flex;align-items:center;gap:11px;padding:10px 16px;
  border-bottom:1px solid var(--cs-line)}
.cs-hrow:last-child{border-bottom:none}
.cs-hrow .g{font-size:9px;letter-spacing:.16em;font-weight:700;color:var(--cs-ink-3);
  width:74px;flex:0 0 74px}
.cs-hrow .l{font-size:12px;color:var(--cs-ink-2);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cs-hrow .n{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.cs-hrow .n.up{color:var(--cs-win)}
.cs-hrow .n.down{color:var(--cs-lose)}
.cs-hrow .t{font-size:10.5px;color:var(--cs-ink-3);width:66px;text-align:right;flex:0 0 66px}
.cs-note{font-size:10.5px;color:var(--cs-ink-3);text-align:center;line-height:1.7}
.cs-note b{color:var(--cs-ink-2);font-weight:700}
.cs-empty{padding:26px 16px;text-align:center;color:var(--cs-ink-3);font-size:12.5px}

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  .rl-wrap{grid-template-columns:1fr}
  .rl-wheel{max-width:270px;margin:0 auto}
}
@media (max-width:620px){
  #v-casino{--cw:56px}
  .cs-top{padding:20px 16px 16px}
  .cs-body{padding:16px}
  .cs-felt{padding:14px;min-height:0}
  .cs-tots{grid-template-columns:1fr}
  .cs-tot{border-right:none;border-bottom:1px solid var(--cs-line)}
  .cs-nums-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .rl-nums{grid-template-columns:repeat(12,minmax(28px,1fr));min-width:380px}
  .cs-btn{flex:1 1 auto;min-width:96px;padding:0 12px}
  .cs-stepper input{width:82px}
  .cs-hrow .g{width:58px;flex:0 0 58px}
  .cs-hrow .t{display:none}
}
@media (max-width:380px){ #v-casino{--cw:50px} }

/* The board proper: zero spanning the left, three rows of twelve, and the 2:1
   column buttons at the end of the row each one actually pays on. */
.rl-nums{grid-template-columns:38px repeat(12,1fr) 40px;grid-template-rows:repeat(3,1fr)}
.rl-zero{grid-row:1 / span 3;grid-column:1;aspect-ratio:auto}
.rl-col2{border-radius:6px;border:1px solid var(--cs-line-2);background:var(--cs-panel);
  color:var(--cs-ink-2);font-family:var(--disp);font-weight:800;font-size:10px;position:relative;
  display:grid;place-items:center;transition:all .13s}
.rl-col2:hover{border-color:var(--cs-accent);color:var(--cs-ink);transform:translateY(-2px)}
@media (max-width:620px){
  .rl-nums{grid-template-columns:32px repeat(12,minmax(26px,1fr)) 34px;min-width:430px}
}


/* The wheel sits back on its own axis and casts a shadow onto the felt, which is
   most of what separates a wheel from a pie chart. Three nested wrappers, each
   doing exactly one thing: the shadow lives OUTSIDE the clip (a circular
   overflow:hidden would cut it off), the clip contains the zoom, and the tilt is
   its own layer so the SVG geometry stays circular and the ball's orbit becomes
   an ellipse in projection for free. */
.rl-shadow{position:absolute;left:9%;right:9%;bottom:-2%;height:24%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,0));
  filter:blur(10px);z-index:0;pointer-events:none}
.rl-clip{position:absolute;inset:0;overflow:hidden;border-radius:50%;z-index:1}
.rl-stage{perspective:1200px;perspective-origin:50% 34%;width:100%;height:100%}
.rl-tilt{width:100%;height:100%;transform:rotateX(21deg);transform-style:preserve-3d}
.rl-cam{width:100%;height:100%;transform-origin:50% 11%;will-change:transform;
  backface-visibility:hidden}
.rl-readout{z-index:3;text-shadow:0 2px 12px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){
  .rl-cam{transform:none!important}
  .rl-tilt{transform:none}
}

/* ============================================================ the Grand
   Same world as the rest of Consumerland: its type, its yellow, its radii. The room is
   still dark, because a casino is, but it is a venue in the mall rather than a
   different website. */
#v-casino{--cs-accent:#FFD23F;--cs-bg:#0E0F12;--cs-panel:#15171B;--cs-raise:#1E2126;--cs-line:#24272D;--cs-line-2:#343841}
.cs{border-radius:12px;border:none}
.cs-top{background:linear-gradient(180deg,#1A1C21,#121317);border-bottom:3px solid var(--cs-accent)}
.cs-title{letter-spacing:-.02em;font-weight:800}
.cs-sub{font-size:13px;color:#9AA0AA}
.cs-bal .k{letter-spacing:.14em}
.cs-game{border-radius:10px}
.cs-game-n i{color:var(--cs-accent);font-style:normal}
.cs-btn.go{background:var(--cs-accent)!important;color:#16181D!important;border-color:var(--cs-accent)!important}
.sl-prev{display:flex;align-items:center;justify-content:center;gap:4px}
.sl-prev img,.sl-prev .g{width:26%;height:auto;font-size:40px}
/* slots */
.sl-machine{position:relative;background:linear-gradient(180deg,#2A1E08,#120D04);border:3px solid var(--cs-accent);border-radius:16px;padding:18px;max-width:520px;margin:4px auto 0;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 20px 40px -20px rgba(0,0,0,.8)}
.sl-reels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sl-win{height:104px;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#D8D4CB,#fff 30%,#fff 70%,#D8D4CB);position:relative}
.sl-win.tease{box-shadow:0 0 0 3px var(--cs-accent),0 0 24px rgba(255,210,63,.6);animation:slTease .5s ease-in-out infinite alternate}
@keyframes slTease{to{box-shadow:0 0 0 3px var(--cs-accent),0 0 36px rgba(255,210,63,.9)}}
.sl-win.stop{animation:slStop .22s ease-out}
@keyframes slStop{40%{transform:translateY(3px)}}
.sl-strip{will-change:transform}
.sl-cell{height:104px;display:grid;place-items:center;font-size:60px}
.sl-cell img{height:72%;width:auto}
.sl-line{position:absolute;left:10px;right:10px;top:50%;height:2px;background:rgba(200,16,46,.55);pointer-events:none}
.sl-pays{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:6px}
.sl-pays span{display:flex;align-items:center;gap:1px;font-size:13px;color:#C4C8D0}
.sl-pays img,.sl-pays .g{width:20px;height:20px;font-size:16px}
.sl-pays b{margin-left:6px;color:var(--cs-accent)}