/* =============================================================================
 * games.css — the pokie cabinet and the ten-seat blackjack table
 * ========================================================================== */

/* ============================== POKIES ================================== */
.machine{
  border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#37131f,#1a080d 45%,#12060a);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 0 0 4px #6b4a18,
    0 0 0 5px #a8791f,
    0 0 0 8px #4a3210,
    0 0 0 9px rgba(0,0,0,.9),
    0 30px 70px rgba(0,0,0,.72);
}
/* a hairline of light along the top edge of the cabinet */
.machine::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:9;
  background:linear-gradient(90deg,transparent,rgba(255,235,180,.55),transparent);
}

.topglass{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  padding:18px 22px 16px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 155%, rgba(255,190,80,.34), transparent 66%),
    linear-gradient(180deg,#63152a 0%,#3d0d1b 55%,#26080f 100%);
  border-bottom:1px solid rgba(0,0,0,.85);
  box-shadow:inset 0 -14px 26px rgba(0,0,0,.5);
}
.topglass::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#c9922e 18%,#f7dc9a 50%,#c9922e 82%,transparent);
}
.glasstext{flex:1;min-width:0}
.topglass h2{
  font-family:'Bevan',Georgia,serif;font-weight:400;line-height:.94;
  font-size:clamp(27px,4.6vw,46px);letter-spacing:.01em;
  background:linear-gradient(180deg,#fff8e2 4%,#f7dc9a 26%,#e0a53a 46%,#8a5c14 58%,#e8b44e 76%,#fff3cf 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.7)) drop-shadow(0 8px 18px rgba(201,146,46,.4));
}
.topglass p{
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,225,180,.6);margin-top:9px;
}
.glassinfo{flex:0 0 auto;margin-top:3px}

.machine-picker{display:flex;gap:5px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.mpick{
  padding:8px 20px;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:.05em;
  color:#c2ab8a;background:linear-gradient(180deg,#25101a,#160a0f);
  border:1px solid #4a3210;box-shadow:0 2px 0 rgba(0,0,0,.6);transition:.15s;
}
.mpick:hover{color:#f0d9a8;border-color:#a8791f}
.mpick[aria-selected="true"]{
  background:linear-gradient(180deg,#f3c65c,#a8721f);color:#2a1204;
  border-color:#ffe9ae;box-shadow:0 0 16px rgba(245,185,66,.5),inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------------------------- the reel window --------------------------- */
.reelbox{
  position:relative;padding:13px;
  background:linear-gradient(180deg,#0a0407,#050203);
  box-shadow:inset 0 3px 14px rgba(0,0,0,.95);
}
.reels{
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;position:relative;
  /* centred: the width is capped from JS, and without this the capped grid
     would sit against the left edge of the cabinet */
  margin-inline:auto;
  border-radius:5px;overflow:hidden;
  background:#070305;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(201,146,46,.28),
    inset 0 14px 30px rgba(0,0,0,.85),
    inset 0 -14px 30px rgba(0,0,0,.85);
}
.reel{
  overflow:hidden;height:calc(var(--tile)*3);position:relative;
  /* one continuous surface per reel — the symbols float on this, they do not
     each paint their own block */
  background:
    radial-gradient(ellipse at 50% 50%, #241019 0%, #150a10 62%, #0b0508 100%);
}
.reel + .reel{box-shadow:inset 1px 0 0 rgba(0,0,0,.75), inset 2px 0 0 rgba(255,220,160,.05)}
/* glass: a soft top highlight, a vignette, and one diagonal reflection */
.reel::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(180deg,rgba(255,240,210,.13),transparent 20%,transparent 74%,rgba(0,0,0,.55)),
    linear-gradient(104deg,transparent 34%,rgba(255,255,255,.045) 47%,transparent 58%);
}
/* Promote the strip only while it is actually moving. Leaving will-change on
   permanently keeps five extra compositing layers alive for nothing and is what
   made the overlay's backdrop-filter misbehave in the first place. */
.strip{will-change:auto}
.reel.spinning .strip{will-change:transform}
.sym{
  height:var(--tile);width:100%;background-size:100% 100%;background-position:center;
  position:relative;
}
.sym.blur{filter:blur(2.2px) brightness(.9) saturate(.85)}

/* a win frame that grows rather than a static border */
.sym.on::after{
  content:'';position:absolute;inset:4%;border-radius:6px;z-index:2;
  border:2px solid #ffe9ae;
  box-shadow:0 0 22px rgba(255,215,120,.85), inset 0 0 22px rgba(255,215,120,.5);
  animation:winframe 1.05s cubic-bezier(.25,.9,.3,1) infinite;
}
@keyframes winframe{
  0%{transform:scale(.82);opacity:0}
  28%{transform:scale(1);opacity:1}
  100%{transform:scale(1.1);opacity:0}
}
.sym.scatterhit::before{
  content:'';position:absolute;inset:-2px;border-radius:7px;z-index:2;
  box-shadow:0 0 34px 7px rgba(255,80,50,.8);
  animation:winframe .95s cubic-bezier(.25,.9,.3,1) infinite;
}
.linesvg{position:absolute;inset:0;pointer-events:none;z-index:5}

/* anticipation: the reel that could still complete a feature slows and lights */
.reel.anticipate{box-shadow:inset 0 0 0 2px rgba(255,180,60,.75), inset 0 0 34px rgba(255,140,40,.4)}
.reel.anticipate::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,150,40,.2),transparent 55%);
  animation:antipulse .45s ease-in-out infinite alternate;
}
@keyframes antipulse{from{opacity:.3}to{opacity:.95}}

/* --------------------------- the meter strip --------------------------- */
.meters{
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,#0d0508,#060203);
  border-top:1px solid rgba(201,146,46,.3);
}
.meter{
  flex:1 1 0;min-width:0;
  padding:9px 12px;text-align:center;
  background:linear-gradient(180deg,#0d0508,#060203);
}
.meter + .meter{border-left:1px solid rgba(201,146,46,.22)}
.meter dt{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#a87b28;margin-bottom:3px;
}
.meter dd{
  font-family:'DM Mono',monospace;font-size:21px;font-variant-numeric:tabular-nums;
  color:#ffcf5c;text-shadow:0 0 12px rgba(255,180,60,.6);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* the win cell is the one people look for, so mark it */
.meter.win{background:linear-gradient(180deg,#07140f,#030906);position:relative}
.meter.win::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#3cbb8c,transparent);opacity:.7;
}
.meter.win dt{color:#4fbf95}
.meter.win dd{color:#8ef0c4;text-shadow:0 0 12px rgba(60,230,160,.55)}
.meter.win.hot dd{animation:meterflash .35s steps(2) 6}
@keyframes meterflash{0%,100%{opacity:1}50%{opacity:.35}}

.readout{
  padding:9px 18px;background:linear-gradient(180deg,#0b0407,#070305);
  border-top:1px solid rgba(0,0,0,.8);
  font-family:'DM Mono',monospace;font-size:13px;color:#b9a68c;min-height:38px;
  display:flex;align-items:center;gap:10px;
}
.readout b{color:var(--amber);font-weight:500}
.readout .free{color:#ff9a5c}

.controls{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:15px 18px;
  background:linear-gradient(180deg,#2a0f18,#150709);
  border-top:1px solid #6b4a18;
  box-shadow:inset 0 1px 0 rgba(255,225,170,.14);
}
.betgrp{display:flex;gap:4px;flex-wrap:wrap}
.bet{
  padding:8px 13px;border:1px solid #4a3210;border-radius:4px;
  font-family:'DM Mono',monospace;font-size:12px;color:#c2ab8a;
  background:linear-gradient(180deg,#1d0c13,#110609);
  box-shadow:inset 0 1px 0 rgba(255,225,170,.08),0 2px 0 rgba(0,0,0,.5);transition:.14s;
}
.bet:hover{color:#f0d9a8;border-color:#a8791f}
.bet[aria-pressed="true"]{
  background:linear-gradient(180deg,#f3c65c,#a8721f);color:#2a1204;border-color:#ffe9ae;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 14px rgba(245,185,66,.45);
}
.spinbtn{
  margin-left:auto;font-family:'Bevan',Georgia,serif;font-size:16px;letter-spacing:.11em;
  padding:15px 44px;border-radius:6px;text-transform:uppercase;position:relative;
  background:linear-gradient(180deg,#ffe08a 0%,#f0b93f 18%,#d09426 52%,#a8721f 100%);
  border:1px solid #fff0c4;color:#2a1204;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 6px rgba(120,70,10,.5),
    0 5px 0 #6b4410,
    0 8px 18px rgba(0,0,0,.6),
    0 0 26px rgba(245,185,66,.28);
  transition:transform .06s,box-shadow .06s,filter .15s;
}
.spinbtn:hover:not(:disabled){filter:brightness(1.08)}
.spinbtn:active:not(:disabled){
  transform:translateY(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 4px rgba(120,70,10,.5),0 1px 0 #6b4410;
}
.spinbtn:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.4)}
.autobtn{position:relative}
.autobtn.on::after{
  content:'';position:absolute;inset:-3px;border:2px solid var(--jade);border-radius:var(--r);
  animation:symon .8s ease-in-out infinite alternate;
}

.overlay{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:22px;text-align:center;
  /* NO backdrop-filter here. This panel sits over .strip elements that are
     promoted to their own compositing layers by will-change:transform, and a
     backdrop-filter over promoted layers is painted as a solid black rectangle
     by several browsers. That was the "win box turns completely black" bug. */
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,190,90,.22), transparent 62%),
    radial-gradient(ellipse at 50% 110%, rgba(180,30,40,.30), transparent 68%),
    linear-gradient(180deg, rgba(38,8,16,.97), rgba(12,3,6,.985));
  box-shadow:inset 0 0 0 1px rgba(255,220,150,.18), inset 0 0 90px rgba(0,0,0,.85);
}
.overlay h3{font-family:'Bevan',serif;font-weight:400;font-size:clamp(20px,4.4vw,32px);color:var(--amber);letter-spacing:.03em}
.overlay p{font-size:13px;color:var(--bone-dim);max-width:48ch;line-height:1.6}
.picks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pick{
  border:1px solid var(--brass);border-radius:var(--r);padding:16px 18px;min-width:112px;
  background:linear-gradient(180deg,#3d1622,#1f0b12);transition:transform .12s,background .12s;
}
.pick:hover{transform:translateY(-4px);background:linear-gradient(180deg,#58222f,#2c1019)}
.pick b{display:block;font-family:'Bevan',serif;font-weight:400;font-size:28px;color:var(--amber);line-height:1}
.pick span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-top:7px}
.bigcount{font-family:'DM Mono',monospace;font-size:clamp(30px,7vw,54px);color:#fff6d8;text-shadow:0 0 28px rgba(245,185,66,.75)}

/* pay table inside the info modal */
.pt{width:100%;border-collapse:collapse;font-size:12.5px}
.pt th{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dim);text-align:right;padding:0 0 8px;font-weight:500}
.pt th:first-child{text-align:left}
.pt td{padding:5px 0;border-top:1px solid rgba(201,146,46,.12);text-align:right;font-family:'DM Mono',monospace;font-size:12px;color:var(--bone-dim)}
.pt td:first-child{text-align:left;font-family:'Inter Tight',sans-serif;color:var(--bone)}
.pt td:first-child span{display:inline-flex;align-items:center;gap:9px}
.pt tr.top td{color:#f5d98a}

/* ============================ BLACKJACK ================================= */
.bjroom{display:flex;flex-direction:column;gap:12px}
.felt{
  border:2px solid var(--brass-lo);border-radius:8px;padding:16px;box-shadow:var(--shadow);
  background:radial-gradient(ellipse at 50% -12%, var(--felt-hi), var(--felt) 55%, #052019 100%);
}
.phasebar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(242,234,222,.14);
}
.phasename{
  font-family:'Bevan',serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
}
.countdown{
  font-family:'DM Mono',monospace;font-size:13px;color:var(--bone);
  background:rgba(0,0,0,.4);padding:2px 10px;border-radius:20px;
}
.countdown.urgent{color:#ffbfb2;animation:symon .5s ease-in-out infinite alternate}
.phasebar .rules{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,234,222,.5)}
.shoe{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,234,222,.5)}
.shoebar{width:70px;height:5px;background:rgba(0,0,0,.45);border-radius:3px;overflow:hidden}
.shoefill{height:100%;background:var(--amber);transition:width .3s}

.dealerbox{text-align:center;padding:6px 0 16px;border-bottom:1px dashed rgba(242,234,222,.16);margin-bottom:14px}
.dealerbox .who{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,234,222,.55);margin-bottom:8px}
.dealerbox .cards{justify-content:center}

.seats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:1000px){.seats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.seats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seat{
  border:1px solid rgba(242,234,222,.14);border-radius:5px;padding:8px;min-height:150px;
  background:rgba(0,0,0,.22);display:flex;flex-direction:column;gap:6px;position:relative;
  transition:border-color .2s,background .2s;
}
.seat.empty{border-style:dashed;opacity:.5;align-items:center;justify-content:center;cursor:pointer}
.seat.empty:hover{opacity:.9;border-color:var(--amber);background:rgba(245,185,66,.08)}
.seat.empty span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.seat.you{border-color:var(--brass);background:rgba(201,146,46,.10)}
.seat.active{border-color:var(--amber);box-shadow:0 0 0 2px rgba(245,185,66,.3),0 0 22px rgba(245,185,66,.22)}
.seat.away{opacity:.45}
.seathead{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0}
.seathead .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.seathead .num{font-family:'DM Mono',monospace;font-size:9.5px;color:rgba(242,234,222,.4)}
.seathead .yb{font-size:8.5px;letter-spacing:.12em;background:var(--brass);color:#241005;padding:1px 5px;border-radius:3px}
.seatbet{font-family:'DM Mono',monospace;font-size:11px;color:var(--amber)}
.seatcredits{font-family:'DM Mono',monospace;font-size:10px;color:rgba(242,234,222,.5)}
.hand{border-radius:4px;padding:4px;transition:background .2s}
.hand.activehand{background:rgba(245,185,66,.14);box-shadow:inset 0 0 0 1px rgba(245,185,66,.35)}
.hand.busted{opacity:.5}
.handmeta{font-family:'DM Mono',monospace;font-size:10.5px;color:rgba(242,234,222,.75);margin-top:3px}
.handmeta .bust{color:#ff9a8a}
.handmeta .bj{color:#ffd06b;font-weight:500}
.seatresult{
  font-family:'DM Mono',monospace;font-size:11px;padding:2px 6px;border-radius:3px;text-align:center;
}
.seatresult.win{background:rgba(60,187,140,.2);color:#8ef0c4}
.seatresult.loss{background:rgba(212,80,58,.18);color:#ffb3a3}
.seatresult.push{background:rgba(255,255,255,.1);color:var(--bone-dim)}

.cards{display:flex;min-height:64px}
.card{
  width:44px;height:63px;border-radius:4px;flex:0 0 auto;margin-left:-16px;position:relative;
  background:linear-gradient(160deg,#fffdf7,#e8e1d1);border:1px solid #b5aa93;
  box-shadow:0 3px 8px rgba(0,0,0,.45);font-family:'DM Mono',monospace;color:#1a1a1a;
  animation:deal .26s cubic-bezier(.2,.9,.3,1.1) both;
}
.card:first-child{margin-left:0}
.card.big{width:56px;height:80px;margin-left:-20px}
@keyframes deal{from{transform:translate(22px,-26px) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
.card .r{position:absolute;top:3px;left:4px;font-size:12px;font-weight:500;line-height:1}
.card.big .r{font-size:15px;top:4px;left:6px}
.card .s{position:absolute;bottom:3px;right:4px;font-size:13px;line-height:1}
.card.big .s{font-size:17px}
.card .c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.card.big .c{font-size:29px}
.card.red{color:#b0201d}
.card.hole{background:repeating-linear-gradient(45deg,#5c1526,#5c1526 4px,#7d1e33 4px,#7d1e33 8px);border-color:#3a0c18}

.bjcontrols{
  border:1px solid var(--brass-lo);border-radius:6px;padding:12px 14px;
  background:linear-gradient(180deg,#1c0a12,#120608);
  display:flex;flex-direction:column;gap:10px;
}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{
  width:46px;height:46px;border-radius:50%;font-family:'DM Mono',monospace;
  font-size:11.5px;font-weight:600;letter-spacing:-.02em;
  border:3px dashed rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.16),
             inset 0 -3px 7px rgba(0,0,0,.3);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);transition:transform .1s,filter .12s;
}
.chip:hover:not(:disabled){filter:brightness(1.12)}
.chip:hover:not(:disabled){transform:translateY(-3px)}
.chip:disabled{opacity:.3;cursor:not-allowed}
/* A full denomination scheme. Casino convention where it exists, then a clear
   escalation: every chip in every ladder must have a colour, or it renders as a
   transparent ring and looks broken. */
.chip{background:linear-gradient(180deg,#4a4a52,#2a2a30)}   /* fallback: never transparent */
.c1{background:linear-gradient(180deg,#f2f2f2,#c9c9c9);color:#1a1a1a;border-color:rgba(0,0,0,.35)}
.c5{background:linear-gradient(180deg,#c8323a,#8a1420)}
.c10{background:linear-gradient(180deg,#2f6fc4,#173f7d)}
.c25{background:linear-gradient(180deg,#26935e,#0f4f31)}
.c50{background:linear-gradient(180deg,#8a4fc0,#4a2378)}
.c100{background:linear-gradient(180deg,#33383f,#15181c)}
.c250{background:linear-gradient(180deg,#e0a53a,#8a5c14);color:#241005;border-color:rgba(255,246,216,.8)}
.c500{background:linear-gradient(180deg,#e06a2a,#8a3208)}
.c1000{background:linear-gradient(180deg,#d8d2c4,#8f887a);color:#1a1a1a;border-color:rgba(0,0,0,.35)}
.c2500{background:linear-gradient(180deg,#1fa8a0,#0a5450)}
.c5000{background:linear-gradient(180deg,#c02a6a,#6b0f38)}
.c10000{background:linear-gradient(180deg,#f0d24a,#9a7a0c);color:#241005;border-color:rgba(255,250,220,.85)}
.c25000{background:linear-gradient(180deg,#7a8798,#3a4350)}
.c50000{background:linear-gradient(180deg,#2a2f6b,#12153a)}
.pendingbet{font-family:'DM Mono',monospace;font-size:15px;color:var(--amber);margin-left:6px}
.actionrow{display:flex;gap:8px;flex-wrap:wrap}
.actionrow .btn{min-width:88px;text-align:center;justify-content:center}
.bjmsg{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--bone-dim);min-height:20px}
.bjmsg .w{color:#8ef0c4}.bjmsg .l{color:#ffb3a3}.bjmsg b{color:var(--amber)}
.queuenote{
  padding:9px 12px;border-radius:var(--r);font-size:12.5px;
  background:rgba(245,185,66,.1);border:1px solid var(--brass-lo);color:#f5d98a;
}

/* ===================== top glass with the info button ==================== */
.topglass{display:flex;align-items:flex-start;gap:12px;text-align:left}
.glasstext{flex:1;min-width:0}
.glassinfo{flex:0 0 auto;margin-top:2px;position:relative;z-index:4}

/* ===================== lightning's horizontal top reel =================== */
.toprow{
  /* five columns, first one empty: the four cells then sit exactly over reels
     2-5 whatever the width, with no percentage padding to get wrong */
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  margin:0 auto 4px;
}
.toprow .tspacer{visibility:hidden}
.toprow .tcell{
  height:var(--tile);background-size:100% 100%;background-position:center;
  border:1px solid rgba(127,216,255,.35);border-radius:3px;position:relative;
}
.toprow .tcell.struck::after{
  content:'';position:absolute;inset:-2px;border-radius:4px;
  box-shadow:0 0 26px 5px rgba(127,216,255,.8);animation:symon .5s ease-in-out infinite alternate;
}
.strikecol{
  position:absolute;top:0;bottom:0;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,rgba(127,216,255,.30),rgba(127,216,255,.05));
  border-left:1px solid rgba(159,228,255,.5);border-right:1px solid rgba(159,228,255,.5);
  animation:symon .7s ease-in-out infinite alternate;
}

/* ===================== hold and spin board ============================== */
.hsboard{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:520px}
.hscell{
  aspect-ratio:1/1.15;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:13px;
  background:rgba(0,0,0,.45);border:1px solid rgba(201,146,46,.22);color:var(--bone-dim);
}
.hscell.filled{
  background:linear-gradient(180deg,#7a3c14,#3d1c07);border-color:#e08a1e;color:#ffe9ae;
  box-shadow:0 0 14px rgba(224,138,30,.35) inset;
}
.hscell.diamond{background:linear-gradient(180deg,#1d5c74,#0a2c3a);border-color:#7fd4f0;color:#eafaff}
.hscell.pop{animation:hspop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes hspop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.14)}100%{transform:none}}
.hsline{font-family:'DM Mono',monospace;font-size:14px;color:var(--amber);min-height:22px}
.hsspins{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}

/* ===================== dice feature ===================================== */
.dicewrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:420px}
.die{
  width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:19px;font-weight:500;
  background:linear-gradient(180deg,#f5f0e4,#d8d0bd);color:#2a1a08;
  border:1px solid #a89878;box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.die.locked{background:linear-gradient(180deg,#e6ad3e,#a8721f);color:#241005;border-color:#ffe9ae}
.die.rolling{animation:dieroll .28s ease}
@keyframes dieroll{0%{transform:rotate(-14deg) scale(.86)}100%{transform:none}}

/* ===================== ROULETTE ========================================= */
.rlroom{display:flex;flex-direction:column;gap:12px}
.rlfelt{background:radial-gradient(ellipse at 50% -12%, #14614a, #0b4032 55%, #052019 100%)}
.rltop{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.wheelwrap{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;align-items:center;width:172px}
/* superseded: see the drawn 37-pocket wheel further down */
.rlhistory{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:172px}
.rlhistory span{
  width:21px;height:21px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:10px;color:#fff;
}
.rlhistory .red{background:#8a1420}.rlhistory .black{background:#15151a}.rlhistory .green{background:#0d6b3f}

.rlboard{flex:1;min-width:340px;display:flex;gap:4px}
.rlzero{
  width:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(242,234,222,.28);border-radius:3px;background:#0d6b3f;
  font-family:'DM Mono',monospace;font-size:17px;color:#fff;position:relative;cursor:pointer;
}
.rlmain{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.rlnums{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(3,1fr);gap:2px}
.rlcell{
  position:relative;aspect-ratio:1/1.15;border:1px solid rgba(242,234,222,.22);border-radius:2px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:12px;color:#fff;
}
.rlcell.red{background:#8a1420}.rlcell.black{background:#15151a}
.rlcell:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.rlcolcells{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.rlouter{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.rlout{
  padding:7px 4px;border:1px solid rgba(242,234,222,.22);border-radius:2px;text-align:center;
  font-size:10.5px;letter-spacing:.04em;color:#fff;cursor:pointer;position:relative;
  background:rgba(0,0,0,.25);
}
.rlout:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.rlout.red{background:#8a1420}.rlout.black{background:#15151a}
.rlcolbtns{display:flex;flex-direction:column;gap:2px;width:40px;flex:0 0 auto}
.rlcolbtn{
  flex:1;border:1px solid rgba(242,234,222,.22);border-radius:2px;font-size:10px;
  background:rgba(0,0,0,.25);color:#fff;cursor:pointer;position:relative;
}
.rlcolbtn:hover{box-shadow:inset 0 0 0 2px var(--amber)}

/* split / corner / street hotspots layered over the number grid */
.hot{position:absolute;z-index:3}
.hot:hover{background:rgba(245,185,66,.5);border-radius:2px}
.hot.h-r{right:-3px;top:12%;width:6px;height:76%}
.hot.h-b{bottom:-3px;left:12%;height:6px;width:76%}
.hot.h-br{right:-4px;bottom:-4px;width:8px;height:8px;border-radius:50%}
.hot.h-l{left:-3px;top:12%;width:6px;height:76%}

/* a placed chip */
.rchip{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:22px;height:22px;padding:0 3px;border-radius:11px;pointer-events:none;
  background:linear-gradient(180deg,#e6ad3e,#a8721f);border:1.5px solid #fff6d8;
  color:#241005;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.rchip.edge{width:18px;height:18px;min-width:18px;font-size:8.5px}
.chipsel{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chipsel .chip[aria-pressed="true"]{outline:3px solid var(--amber);outline-offset:2px}
.rlwinner{box-shadow:inset 0 0 0 3px var(--amber),0 0 20px rgba(245,185,66,.7) !important}

/* feature pick cards carry a multiplier pool and a volatility note */
.pick .pool{
  display:block;font-family:'DM Mono',monospace;font-size:11px;
  color:#f5d98a;margin-top:5px;letter-spacing:0;text-transform:none;
}
.pick .prof{
  display:block;font-size:9.5px;color:var(--bone-dim);margin-top:4px;
  letter-spacing:.04em;text-transform:none;max-width:15ch;line-height:1.35;
}
.pick.dg-white{border-color:#e8e8f0}.pick.dg-red{border-color:#d4503a}
.pick.dg-black{border-color:#8a8a95}.pick.dg-blue{border-color:#5b8fd6}
.pick.dg-yellow{border-color:#f5b942}
.pick.lk-blue{border-color:#5b8fd6}.pick.lk-green{border-color:#3cbb8c}
.pick.lk-yellow{border-color:#f5b942}.pick.lk-red{border-color:#d4503a}
.pick.dice{border-color:#c9a6ff}
.picks{max-width:760px}


/* =============================================================================
 * Special symbols move. A wild or a scatter should be findable on a spinning
 * reel without reading it, so each gets its own idle animation rather than all
 * of them sharing one generic glow.
 * ========================================================================== */
.sym.is-wild::after, .toprow .tcell.is-wild::after{
  content:'';position:absolute;inset:3px;border-radius:3px;pointer-events:none;
  box-shadow:0 0 16px 2px rgba(255,215,94,.55) inset, 0 0 10px rgba(255,215,94,.35);
  animation:wildpulse 2.1s ease-in-out infinite;
}
@keyframes wildpulse{0%,100%{opacity:.35}50%{opacity:.95}}

.sym.is-scatter::after, .toprow .tcell.is-scatter::after{
  content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,90,60,.35), transparent 62%);
  animation:scatterbreathe 1.6s ease-in-out infinite;
}
@keyframes scatterbreathe{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}

.sym.is-strike::after, .toprow .tcell.is-strike::after{
  content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,rgba(159,228,255,.5),transparent 55%);
  animation:strikeflicker 1.15s steps(3) infinite;
}
@keyframes strikeflicker{0%,100%{opacity:.25}40%{opacity:.9}60%{opacity:.4}}

.sym.is-bull::after{
  content:'';position:absolute;inset:4px;border-radius:3px;pointer-events:none;
  border:1.5px solid rgba(255,138,61,.7);
  animation:wildpulse 1.7s ease-in-out infinite;
}
.sym.is-diamond::after{
  content:'';position:absolute;inset:2px;border-radius:3px;pointer-events:none;
  box-shadow:0 0 18px 3px rgba(159,232,255,.6) inset;
  animation:scatterbreathe 1.9s ease-in-out infinite;
}
/* the shimmer would be noise on a blurred reel mid-spin */
.sym.blur::after{display:none}

/* =============================================================================
 * POKER
 * ========================================================================== */
.pkfelt{background:radial-gradient(ellipse at 50% -10%, #16564a, #0a3a32 55%, #04201c 100%)}
.pkboard{text-align:center;padding:10px 0 16px;border-bottom:1px dashed rgba(242,234,222,.16);margin-bottom:14px}
.pkpot{
  font-family:'DM Mono',monospace;font-size:17px;color:var(--amber);margin-bottom:10px;
  text-shadow:0 0 14px rgba(245,185,66,.5);
}
#pkCommunity{justify-content:center;min-height:82px}
.pkseats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:820px){.pkseats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkseat{
  border:1px solid rgba(242,234,222,.14);border-radius:5px;padding:8px;min-height:132px;
  background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:5px;position:relative;
  transition:border-color .2s,box-shadow .2s;
}
.pkseat.empty{border-style:dashed;opacity:.45;align-items:center;justify-content:center;cursor:pointer}
.pkseat.empty:hover{opacity:.9;border-color:var(--amber);background:rgba(245,185,66,.08)}
.pkseat.you{border-color:var(--brass);background:rgba(201,146,46,.10)}
.pkseat.acting{border-color:var(--amber);box-shadow:0 0 0 2px rgba(245,185,66,.3),0 0 22px rgba(245,185,66,.22)}
.pkseat.folded{opacity:.42}
.pkseat.aura-gold{box-shadow:0 0 16px rgba(245,185,66,.5)}
.pkseat.aura-neon{box-shadow:0 0 16px rgba(90,190,255,.55)}
.pkseat .btnmark{
  position:absolute;top:6px;right:6px;width:19px;height:19px;border-radius:50%;
  background:#f2eade;color:#1a1a1a;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.pkhead{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0}
.pkhead .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pkstack{font-family:'DM Mono',monospace;font-size:12px;color:var(--amber)}
.pkcommit{font-family:'DM Mono',monospace;font-size:11px;color:#8ef0c4}
.pkaction{font-size:10.5px;letter-spacing:.05em;color:var(--bone-dim);min-height:15px}
.pkaction.aggressive{color:#ffb3a3}
.pkhand{font-size:10.5px;color:#ffd06b}
.pkseat .cards{min-height:56px}
.pkseat .card{width:38px;height:54px;margin-left:-14px}
.pkseat .card.back{
  background:repeating-linear-gradient(45deg,#123c33,#123c33 4px,#1a5445 4px,#1a5445 8px);
  border-color:#0a2a24;
}
.raiserow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.raiserow input[type=range]{flex:1;min-width:150px;accent-color:var(--amber)}
.pkwinner{box-shadow:0 0 0 2px var(--amber),0 0 26px rgba(245,185,66,.5) !important}

/* =============================================================================
 * BACCARAT
 * ========================================================================== */
.bcfelt{background:radial-gradient(ellipse at 50% -10%, #16344f, #0b2338 55%, #05121c 100%)}
.bctop{display:flex;gap:16px;align-items:center;justify-content:center;padding:12px 0 18px;flex-wrap:wrap}
.bchand{flex:1;min-width:180px;text-align:center}
.bchead{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,234,222,.6);margin-bottom:8px}
.bchand .cards{justify-content:center;min-height:82px}
.bcresult{
  font-family:'Bevan',serif;font-size:clamp(15px,3vw,22px);letter-spacing:.05em;
  color:var(--amber);text-align:center;min-width:110px;
}
.bcresult.player{color:#7fc4ff}.bcresult.banker{color:#ff9a8a}.bcresult.tie{color:#8ef0c4}
.bcroad{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-bottom:14px}
.bcroad span{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;color:#fff;
}
.bcroad .P{background:#2668c4}.bcroad .B{background:#a3282a}.bcroad .T{background:#1d7a4c}
.bcboard{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:620px;margin:0 auto}
.bcspot{
  padding:14px 8px;border:1px solid rgba(242,234,222,.25);border-radius:4px;text-align:center;
  cursor:pointer;position:relative;background:rgba(0,0,0,.25);
}
.bcspot:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.bcspot .n{font-size:13px;font-weight:600;display:block}
.bcspot .o{font-size:10px;color:rgba(242,234,222,.6);display:block;margin-top:3px}
.bcspot.player{background:rgba(38,104,196,.35)}
.bcspot.banker{background:rgba(163,40,42,.35)}
.bcspot.tie{background:rgba(29,122,76,.35);grid-column:span 1}
.bcspot.pair{padding:9px 6px}
.bcspot.winner{box-shadow:inset 0 0 0 3px var(--amber),0 0 20px rgba(245,185,66,.6)}

/* =============================================================================
 * SIC BO
 * ========================================================================== */
.sbfelt{background:radial-gradient(ellipse at 50% -10%, #4a2160, #2c1140 55%, #150720 100%)}
.sbtop{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;padding:2px 0 clamp(6px,1.2vh,14px)}
.dicetray{display:flex;gap:10px}
.sbdie{
  width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f7f3e8,#d9d1bd);border:1px solid #a89878;
  box-shadow:0 4px 12px rgba(0,0,0,.6);position:relative;
}
.sbdie.rolling{animation:sbroll .4s ease infinite}
@keyframes sbroll{0%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(10deg) translateY(-7px)}100%{transform:rotate(-12deg) translateY(0)}}
.sbpip{position:absolute;width:9px;height:9px;border-radius:50%;background:#22160a}
.sbsummary{font-family:'DM Mono',monospace;font-size:16px;color:var(--amber);min-width:130px;text-align:center}
.sbhistory{display:flex;flex-wrap:wrap;gap:3px;max-width:190px}
.sbhistory span{
  padding:2px 5px;border-radius:3px;font-family:'DM Mono',monospace;font-size:10px;
  background:rgba(0,0,0,.4);color:var(--bone-dim);
}
.sbhistory span.big{color:#ff9a8a}.sbhistory span.small{color:#7fc4ff}.sbhistory span.triple{color:#ffd06b}
.sbboard{display:flex;flex-direction:column;gap:clamp(2px,.45vh,5px);max-width:820px;margin:0 auto}
.sbrow{display:grid;gap:clamp(2px,.4vh,4px)}
.sbrow.r-even{grid-template-columns:repeat(4,1fr)}
.sbrow.r-total{grid-template-columns:repeat(7,1fr)}
.sbrow.r-single{grid-template-columns:repeat(6,1fr)}
.sbrow.r-triple{grid-template-columns:repeat(7,1fr)}
.sbrow.r-combo{grid-template-columns:repeat(8,1fr)}
.sbspot{
  padding:6px 4px 5px;border:1px solid rgba(242,234,222,.22);border-radius:3px;
  text-align:center;cursor:pointer;position:relative;background:rgba(0,0,0,.28);
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-height:0;
}
.sbspot:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.sbspot .n{
  display:block;font-weight:700;line-height:1.05;
  /* the number is the thing you read, so it scales with the viewport */
  font-size:clamp(13px, 1.55vh, 18px);
  color:#f6efe2;letter-spacing:.01em;
}
.sbspot .o{
  display:block;line-height:1.1;color:rgba(242,234,222,.62);
  font-size:clamp(9.5px, 1.05vh, 12px);
}
.sbspot .o em{
  font-style:normal;color:rgba(242,234,222,.4);margin-left:5px;
  font-size:.9em;
}
.sbspot.hot{background:rgba(163,40,42,.3)}
.sbspot.cool{background:rgba(38,104,196,.3)}
.sbspot.winner{box-shadow:inset 0 0 0 3px var(--amber),0 0 18px rgba(245,185,66,.6)}


/* =============================================================================
 * THE CLOCK — it decides when your money is committed, so it should be the
 * loudest thing on the felt, not a small grey pill.
 * ========================================================================== */
.phasebar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(242,234,222,.14);
}
.phasename{
  font-family:'Bevan',serif;font-size:15px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber);text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.countdown{
  position:relative;flex:0 0 auto;
  width:62px;height:62px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-weight:500;
  background:radial-gradient(circle at 50% 35%, #14202a, #070c11);
  border:2px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 16px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.6);
  padding:0;
}
.countdown .cd-num{font-size:24px;line-height:1;color:#eaf4ff}
.countdown .cd-unit{font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,244,255,.5);margin-top:2px}
/* the ring drains as the clock runs down */
.countdown .cd-ring{
  position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--cd-col,#5cc8ff) calc(var(--cd,1) * 360deg), rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(circle, transparent 0 60%, #000 62%);
          mask:radial-gradient(circle, transparent 0 60%, #000 62%);
}
.countdown.warn{--cd-col:#ffc14d}
.countdown.warn .cd-num{color:#ffe0a3}
.countdown.urgent{--cd-col:#ff5a3c;animation:cdpulse .55s ease-in-out infinite alternate}
.countdown.urgent .cd-num{color:#ffd0c4}
@keyframes cdpulse{
  from{box-shadow:inset 0 0 16px rgba(0,0,0,.9),0 0 0 0 rgba(255,90,60,.5)}
  to{box-shadow:inset 0 0 16px rgba(0,0,0,.9),0 0 0 9px rgba(255,90,60,0)}
}
.phasebar .rules{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,234,222,.5)}
.phasebar .iconbtn{margin-left:auto}

/* =============================================================================
 * WHAT YOU HAVE RIDING — the second thing that matters and it was a small
 * amber word at the end of a chip row.
 * ========================================================================== */
.stakebar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 16px;border-radius:6px;margin-bottom:10px;
  background:linear-gradient(180deg,rgba(245,185,66,.13),rgba(0,0,0,.35));
  border:1px solid var(--brass-lo);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.12);
}
.stakebar.none{background:rgba(0,0,0,.25);border-color:rgba(201,146,46,.22)}
.stakebar dt{
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-dim);
}
.stakebar dd{
  font-family:'DM Mono',monospace;font-size:26px;line-height:1.05;color:#ffe9ae;
  text-shadow:0 0 16px rgba(245,185,66,.65);font-variant-numeric:tabular-nums;
}
.stakebar.none dd{color:#7d7263;text-shadow:none}
.stakebar .sb-block{display:flex;flex-direction:column;gap:2px}
.stakebar .sb-block.small dd{font-size:16px;color:var(--bone)}
.stakebar .sb-spacer{flex:1}
.stakebar .sb-hint{font-size:11.5px;color:var(--bone-dim);max-width:34ch;line-height:1.45}
.stakebar.committed{
  border-color:var(--brass);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.2), 0 0 22px rgba(245,185,66,.22);
}
.stakebar dd.up{color:#8ef0c4;text-shadow:0 0 16px rgba(60,230,160,.5)}
.stakebar dd.down{color:#ffb3a3;text-shadow:0 0 16px rgba(230,90,60,.4)}

/* =============================================================================
 * ROULETTE — a real wheel and a felt that looks like a table rather than a form
 * ========================================================================== */
.rlfelt{
  background:
    radial-gradient(ellipse at 50% -14%, rgba(255,220,150,.10), transparent 62%),
    radial-gradient(ellipse at 50% -10%, #14614a, #0b4032 52%, #04201a 100%);
  border-radius:10px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 0 0 4px #6b4a18,
    0 0 0 5px #a8791f,
    0 0 0 8px #3d2a10,
    0 26px 60px rgba(0,0,0,.68);
  border:none;
}
.rltop{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.wheelwrap{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;align-items:center;width:388px}

.wheel{
  width:380px;height:380px;border-radius:50%;position:relative;
  background:none;border:none;box-shadow:0 22px 54px rgba(0,0,0,.78);
  display:block;
}
@media (max-width:1500px){ .wheelwrap{width:340px} .wheel{width:332px;height:332px} }
@media (max-width:1240px){ .wheelwrap{width:296px} .wheel{width:288px;height:288px} }
@media (max-width:1080px){ .wheelwrap{width:100%} .wheel{width:300px;height:300px} }
.wheel .wheelsvg{width:100%;height:100%;display:block}
.wheel .wheelface{transform-origin:50% 50%}
.wheel.spinning{animation:none}

/* the ball rides in a track just inside the rim */
.rlball{
  position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px;
  border-radius:50%;pointer-events:none;opacity:0;z-index:5;
  background:radial-gradient(circle at 34% 28%, #fff, #dbe2ea 52%, #6e767f);
  box-shadow:0 0 10px rgba(255,255,255,.85), 0 3px 7px rgba(0,0,0,.8),
             inset -2px -2px 4px rgba(0,0,0,.25);
  transform-origin:50% 50%;
  transform:rotate(0deg) translateY(-46%);
  transition:opacity .25s;
}
/* no CSS animation: the ball is driven per frame so it can decelerate and drop
   into the pocket instead of looping at a constant speed */

/* the result readout sits in the middle of the wheel */
.wheel .pocket{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100px;height:100px;border-radius:50%;z-index:4;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:38px;font-weight:500;
  background:rgba(6,3,2,.9);border:2px solid rgba(201,146,46,.7);color:#f0e6d2;
  box-shadow:inset 0 0 14px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6);
}
.wheel .pocket.red{background:#8f1622;border-color:#ff9a9a;color:#fff}
.wheel .pocket.black{background:#17171c;border-color:#a9b0ba;color:#fff}
.wheel .pocket.green{background:#0d6b3f;border-color:#7ff0b8;color:#fff}
.wheel .pocket.settle{animation:pocketpop .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pocketpop{0%{transform:translate(-50%,-50%) scale(.55)}60%{transform:translate(-50%,-50%) scale(1.14)}100%{transform:translate(-50%,-50%) scale(1)}}

.rlhistory{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:376px}
.rlhistory span{
  width:23px;height:23px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:10.5px;color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);
}
.rlhistory .red{background:#8f1622}.rlhistory .black{background:#17171c}.rlhistory .green{background:#0d6b3f}

/* ------------------------------- the layout ----------------------------- */
.rlboard{
  flex:1;min-width:340px;display:flex;gap:3px;
  padding:8px;border-radius:6px;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.12));
  box-shadow:inset 0 0 0 1px rgba(255,235,180,.14), inset 0 2px 12px rgba(0,0,0,.4);
}
.rlzero{
  width:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.35);border-radius:4px 0 0 4px;
  background:linear-gradient(180deg,#0f7d49,#0a5433);
  font-family:'DM Mono',monospace;font-size:19px;color:#fff;position:relative;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.rlzero:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.rlmain{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rlnums{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(3,1fr);gap:2px}
.rlcell{
  position:relative;aspect-ratio:1/1.12;border:1px solid rgba(255,255,255,.28);border-radius:3px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:12.5px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 6px rgba(0,0,0,.3);
  transition:filter .12s;
}
.rlcell.red{background:linear-gradient(180deg,#a51a28,#7c1220)}
.rlcell.black{background:linear-gradient(180deg,#22222a,#131318)}
.rlcell:hover{filter:brightness(1.25)}
.rlcell:hover,.rlout:hover,.rlcolbtn:hover{box-shadow:inset 0 0 0 2px var(--amber)}
.rlcolcells{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.rlouter{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.rlout{
  padding:9px 4px;border:1px solid rgba(255,255,255,.28);border-radius:3px;text-align:center;
  font-size:10.5px;letter-spacing:.05em;color:#fff;cursor:pointer;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);text-transform:uppercase;
}
.rlout.red{background:linear-gradient(180deg,#a51a28,#7c1220)}
.rlout.black{background:linear-gradient(180deg,#22222a,#131318)}
.rlcolbtns{display:flex;flex-direction:column;gap:2px;width:44px;flex:0 0 auto}
.rlcolbtn{
  flex:1;border:1px solid rgba(255,255,255,.28);border-radius:0 4px 4px 0;font-size:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.22));color:#fff;
  cursor:pointer;position:relative;letter-spacing:.06em;
}

/* chips read as stacked discs, not flat pills */
.rchip{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:24px;height:24px;padding:0 3px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 30%, #ffe9ae, #e0a53a 55%, #96651a);
  border:2px dashed rgba(255,255,255,.7);
  color:#2a1204;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 #6b4410, 0 4px 8px rgba(0,0,0,.65);
}
.rchip.edge{width:19px;height:19px;min-width:19px;font-size:8.5px;border-width:1.5px}
.rlwinner{box-shadow:inset 0 0 0 3px var(--amber),0 0 24px rgba(245,185,66,.8) !important;z-index:2}

/* hot and cold numbers, which is the one statistic a roulette table always shows */
.rlstats{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:rgba(242,234,222,.6);margin-top:2px}
.rlstats b{color:var(--amber);font-family:'DM Mono',monospace}

/* =============================================================================
 * MACHINE IDENTITY — four cabinets, not one cabinet with four names on it.
 * Each machine dresses its own bezel, top glass and title.
 * ========================================================================== */
.topglass h2{
  font-size:clamp(30px,5.4vw,54px);letter-spacing:.005em;line-height:.92;
  text-transform:uppercase;
}
.topglass p{font-size:10px;letter-spacing:.3em;margin-top:11px}
.machine-badge{
  display:inline-block;margin-bottom:7px;padding:3px 11px;border-radius:3px;
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
}

/* ---- Dragons: lacquer red and gold ---- */
.machine.theme-crimson{box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 0 4px #6b4a18,0 0 0 5px #a8791f,0 0 0 8px #4a1018,0 0 0 9px rgba(0,0,0,.9),0 30px 70px rgba(0,0,0,.72)}
.theme-crimson .topglass{
  background:radial-gradient(ellipse at 50% 155%, rgba(255,190,80,.34), transparent 66%),
             linear-gradient(180deg,#7a1226 0%,#43091a 55%,#25060d 100%);
}
.theme-crimson .topglass h2{
  background:linear-gradient(180deg,#fff8e2 4%,#f7dc9a 26%,#e0a53a 46%,#8a5c14 58%,#e8b44e 76%,#fff3cf 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.theme-crimson .machine-badge{background:#8a1220;color:#ffd9a8}

/* ---- Lucky 69: imperial red with a heavier gold ---- */
.machine.theme-imperial{box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 0 4px #7d5a10,0 0 0 5px #d4a52a,0 0 0 8px #3d1006,0 0 0 9px rgba(0,0,0,.9),0 30px 70px rgba(0,0,0,.72)}
.theme-imperial .topglass{
  background:radial-gradient(ellipse at 50% 150%, rgba(255,215,94,.42), transparent 62%),
             linear-gradient(180deg,#8f1408 0%,#5a0c05 52%,#2c0602 100%);
}
.theme-imperial .topglass h2{
  font-family:'Bevan',Georgia,serif;
  background:linear-gradient(180deg,#fffbe8 4%,#ffd75e 30%,#d4a52a 50%,#7d5a10 60%,#ffd75e 80%,#fffbe8 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,215,94,.55));
}
.theme-imperial .topglass::after{background:linear-gradient(90deg,transparent,#ffd75e 18%,#fffbe8 50%,#ffd75e 82%,transparent)}
.theme-imperial .machine-badge{background:#ffd75e;color:#3d1006}

/* ---- Lightning: cold storm blue ---- */
.machine.theme-storm{box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 0 4px #1d3a52,0 0 0 5px #4a90c4,0 0 0 8px #0d1c2a,0 0 0 9px rgba(0,0,0,.9),0 30px 70px rgba(0,0,0,.72)}
.machine.theme-storm{background:linear-gradient(180deg,#16283a,#0a1420 45%,#060d15)}
.theme-storm .topglass{
  background:radial-gradient(ellipse at 50% 155%, rgba(127,216,255,.34), transparent 64%),
             linear-gradient(180deg,#173c5c 0%,#0d2136 55%,#060f1a 100%);
  box-shadow:inset 0 -14px 26px rgba(0,0,0,.5);
}
.theme-storm .topglass::after{background:linear-gradient(90deg,transparent,#4a90c4 18%,#c8ecff 50%,#4a90c4 82%,transparent)}
.theme-storm .topglass h2{
  background:linear-gradient(180deg,#ffffff 4%,#c8ecff 26%,#7fd8ff 46%,#2a6b96 58%,#9fe4ff 78%,#ffffff 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(127,216,255,.6));
}
.theme-storm .topglass p{color:rgba(200,236,255,.62)}
.theme-storm .machine-badge{background:#7fd8ff;color:#06141f}
.theme-storm .reel{background:radial-gradient(ellipse at 50% 50%, #14293c 0%, #0b1723 62%, #060d15 100%)}
.theme-storm .reels{box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),inset 0 0 0 2px rgba(74,144,196,.35),inset 0 14px 30px rgba(0,0,0,.85),inset 0 -14px 30px rgba(0,0,0,.85)}
.theme-storm .controls{background:linear-gradient(180deg,#152b3e,#0a141f);border-top-color:#2f5a7c}

/* ---- Bull Stampede: leather, brass and dust ---- */
.machine.theme-dust{box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 0 4px #5a4212,0 0 0 5px #b08a2a,0 0 0 8px #2e1c08,0 0 0 9px rgba(0,0,0,.9),0 30px 70px rgba(0,0,0,.72)}
.machine.theme-dust{background:linear-gradient(180deg,#3a2612,#1e1409 45%,#140d06)}
.theme-dust .topglass{
  background:radial-gradient(ellipse at 50% 155%, rgba(255,180,80,.3), transparent 64%),
             linear-gradient(180deg,#6b3d12 0%,#3d220a 55%,#221204 100%);
}
.theme-dust .topglass::after{background:linear-gradient(90deg,transparent,#b08a2a 18%,#f0d49a 50%,#b08a2a 82%,transparent)}
.theme-dust .topglass h2{
  background:linear-gradient(180deg,#fff3d8 4%,#f0d49a 26%,#c99a3a 46%,#7a5410 58%,#e0b45e 78%,#fff3d8 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.theme-dust .topglass p{color:rgba(255,225,180,.6)}
.theme-dust .machine-badge{background:#b08a2a;color:#221204}
.theme-dust .reel{background:radial-gradient(ellipse at 50% 50%, #2c1c0c 0%, #1a1007 62%, #0e0904 100%)}
.theme-dust .controls{background:linear-gradient(180deg,#3a2612,#1c1208)}

/* the picker echoes the machine you are on */
.mpick[aria-selected="true"][data-m="lightning"]{background:linear-gradient(180deg,#9fe4ff,#2a6b96);color:#06141f;border-color:#e8f7ff;box-shadow:0 0 16px rgba(127,216,255,.55)}
.mpick[aria-selected="true"][data-m="lucky69"]{background:linear-gradient(180deg,#ffd75e,#a8721f);color:#3d1006;border-color:#fffbe8}
.mpick[aria-selected="true"][data-m="bull"]{background:linear-gradient(180deg,#e0b45e,#7a5410);color:#221204;border-color:#fff3d8}

/* =============================================================================
 * TITLE BOXES — four genuinely different signs, not one sign in four colours.
 * ========================================================================== */
.topglass{position:relative;overflow:hidden;padding:20px 24px 18px}
.glass-ornament{position:absolute;inset:0;pointer-events:none}

/* ---- DRAGONS: lacquered panel with gold corner flourishes ---- */
.theme-crimson .topglass{
  background:
    radial-gradient(ellipse at 50% 150%, rgba(255,190,80,.32), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#8a1226 0%,#48091a 52%,#22050c 100%);
}
.theme-crimson .glass-ornament::before,
.theme-crimson .glass-ornament::after{
  content:'';position:absolute;width:34px;height:34px;
  border:2px solid rgba(247,220,154,.55);
}
.theme-crimson .glass-ornament::before{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.theme-crimson .glass-ornament::after{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.theme-crimson .topglass h2{font-family:'Bevan',Georgia,serif;letter-spacing:.02em}

/* ---- LUCKY 69: imperial gilt with a double rule and a coin watermark ---- */
.theme-imperial .topglass{
  background:
    radial-gradient(circle at 88% 40%, rgba(255,215,94,.20), transparent 42%),
    radial-gradient(ellipse at 50% 150%, rgba(255,215,94,.40), transparent 60%),
    linear-gradient(180deg,#a3160a 0%,#630d05 50%,#2e0602 100%);
}
.theme-imperial .glass-ornament::before{
  content:'69';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:'Bevan',Georgia,serif;font-size:70px;line-height:1;
  color:rgba(255,215,94,.07);letter-spacing:-.04em;
}
/* The double rule used to run straight through the tagline. Offsets were tuned
   twice and it came back both times, so it is gone — the sign already has a
   brass edge from .topglass::after. */
.theme-imperial .topglass h2{letter-spacing:.05em}

/* ---- LIGHTNING DOLLAZ: neon sign with a bolt and a scanline field ---- */
.theme-storm .topglass{
  background:
    repeating-linear-gradient(180deg, rgba(127,216,255,.055) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 155%, rgba(127,216,255,.36), transparent 62%),
    linear-gradient(180deg,#1b4a72 0%,#0e2438 52%,#050d17 100%);
}
.theme-storm .glass-ornament::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#9fe4ff,transparent);
  animation:stormscan 3.2s linear infinite;
}
@keyframes stormscan{0%{opacity:.15}50%{opacity:.9}100%{opacity:.15}}
.theme-storm .glass-ornament::after{
  /* clear of the info button, which lives at the top right */
  content:'';position:absolute;right:16px;bottom:-6px;
  width:30px;height:58px;
  background:#9fe4ff;opacity:.16;
  clip-path:polygon(62% 0,18% 52%,48% 52%,34% 100%,86% 40%,54% 40%);
  animation:boltflick 4.5s ease-in-out infinite;
}
@keyframes boltflick{0%,88%,100%{opacity:.14}90%{opacity:.75}94%{opacity:.25}96%{opacity:.6}}
.theme-storm .topglass h2{
  letter-spacing:.06em;
  text-shadow:0 0 26px rgba(127,216,255,.55);
}

/* ---- BULL STAMPEDE: riveted leather panel ---- */
.theme-dust .topglass{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.10) 0 3px, transparent 3px 9px),
    radial-gradient(ellipse at 50% 150%, rgba(255,180,80,.30), transparent 62%),
    linear-gradient(180deg,#7d4715 0%,#42250a 52%,#241304 100%);
}
.theme-dust .glass-ornament::before,
.theme-dust .glass-ornament::after{
  content:'';position:absolute;left:12px;right:12px;height:6px;
  background-image:radial-gradient(circle, #d9b56a 0 2px, rgba(120,80,20,.5) 2.2px, transparent 2.8px);
  background-size:22px 6px;background-repeat:repeat-x;opacity:.65;
}
.theme-dust .glass-ornament::before{top:4px}
.theme-dust .glass-ornament::after{bottom:4px}
.theme-dust .topglass h2{letter-spacing:.04em}

.machine-badge{
  box-shadow:0 1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  font-weight:800;
}

/* =============================================================================
 * FEATURE PRESENTATION
 * ========================================================================== */
/* a HUD that stays on the cabinet for the whole feature */
.feature-hud{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:18;
  display:flex;align-items:center;gap:12px;padding:8px 18px;border-radius:24px;
  background:linear-gradient(180deg,rgba(60,14,24,.95),rgba(18,5,9,.96));
  border:1px solid rgba(255,215,120,.55);
  box-shadow:0 6px 22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,235,180,.3),
             0 0 26px rgba(255,170,60,.3);
  animation:hudin .45s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes hudin{from{transform:translateX(-50%) translateY(-22px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.fh-label{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#e8c98a}
.fh-count{
  font-family:'DM Mono',monospace;font-size:24px;line-height:1;color:#fff3cf;
  text-shadow:0 0 14px rgba(255,200,110,.9);min-width:28px;text-align:center;
}
.fh-count.tick{animation:hudtick .32s cubic-bezier(.3,.9,.3,1.4)}
@keyframes hudtick{0%{transform:scale(1.5);color:#fff}100%{transform:scale(1)}}
.fh-mult{
  font-family:'DM Mono',monospace;font-size:14px;color:#ffd06b;
  padding:2px 9px;border-radius:12px;background:rgba(255,180,60,.16);
  border:1px solid rgba(255,200,110,.4);
}
.fh-total{font-family:'DM Mono',monospace;font-size:15px;color:#8ef0c4}

/* the intro sequence */
.fintro{
  position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,190,90,.26), transparent 62%),
    linear-gradient(180deg, rgba(30,6,12,.97), rgba(8,2,4,.99));
}
.fintro .fi-rays{
  position:absolute;inset:-40%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,205,120,.16) 0deg 5deg, transparent 5deg 14deg);
  animation:firays 9s linear infinite;
}
@keyframes firays{to{transform:rotate(360deg)}}
.fintro .fi-kicker{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:#e8c98a;
  opacity:0;animation:fifade .5s ease .1s forwards;
}
.fintro .fi-title{
  font-family:'Bevan',Georgia,serif;font-size:clamp(30px,7vw,62px);line-height:1;
  text-align:center;
  background:linear-gradient(180deg,#fff8e2 6%,#ffd75e 34%,#c9922e 52%,#7d5a10 62%,#ffd75e 84%,#fff8e2 99%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(255,200,90,.6));
  transform:scale(.4);opacity:0;
  animation:fipop .62s cubic-bezier(.2,.9,.28,1.35) .25s forwards;
}
@keyframes fipop{to{transform:scale(1);opacity:1}}
@keyframes fifade{to{opacity:1}}
.fintro .fi-detail{
  display:flex;gap:22px;align-items:center;opacity:0;
  animation:fifade .5s ease .8s forwards;
}
.fintro .fi-block{text-align:center}
.fintro .fi-block b{
  display:block;font-family:'DM Mono',monospace;font-size:34px;line-height:1;color:#fff3cf;
  text-shadow:0 0 20px rgba(255,200,110,.8);
}
.fintro .fi-block span{
  display:block;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#e8c98a;margin-top:5px;
}
.fintro .fi-go{
  margin-top:6px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:#ffd06b;opacity:0;animation:fiblink 1s ease 1.5s infinite;
}
@keyframes fiblink{0%,100%{opacity:.25}50%{opacity:1}}
.fintro.out{animation:fiout .5s ease forwards}
@keyframes fiout{to{opacity:0;transform:scale(1.08)}}

/* a free game landing a win holds the frame and pulses the window */
.reelbox.freewin{box-shadow:inset 0 0 0 2px rgba(255,205,110,.7), inset 0 3px 14px rgba(0,0,0,.95)}
.reelbox.retrigger::after{
  content:'RETRIGGER';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:25;font-family:'Bevan',serif;font-size:clamp(22px,5vw,44px);letter-spacing:.06em;
  color:#fff3cf;text-shadow:0 0 30px rgba(255,170,60,1);
  animation:retrig 1.5s cubic-bezier(.2,.9,.3,1.2) forwards;pointer-events:none;
}
@keyframes retrig{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
  22%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
  70%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.2);opacity:0}
}

/* the bull board shows dollar amounts, which are wider than a bare number */
.hsboard{gap:5px;max-width:560px}
.hscell{
  font-size:11.5px;letter-spacing:-.01em;
  aspect-ratio:1/1;padding:2px;
}
.hscell.filled{font-weight:500}
.hsline{font-size:15px;min-height:26px}
.hsline .hs-sum{color:var(--bone-dim);font-size:13px}
.hsline .hs-x{color:#ffb3a3;font-size:13px}
.hsline .hs-eq{color:var(--bone-dim);opacity:.7;margin:0 3px}
.hsline b{color:#8ef0c4;font-size:19px;text-shadow:0 0 14px rgba(60,230,160,.5)}
@media (max-width:560px){ .hscell{font-size:9.5px} }

/* the feature overlay panel needs room for the intro to breathe */
.overlay{gap:16px;padding:26px}
.overlay h3{font-size:clamp(22px,4.8vw,36px)}
.bigcount{margin:2px 0}


/* the info button must always sit above whatever the theme draws behind it */
.glassinfo{position:relative;z-index:4}
.glass-ornament{z-index:1}
.glasstext{position:relative;z-index:2}

/* =============================================================================
 * LEGIBILITY — the table games were being squinted at.
 * ========================================================================== */
.card{width:52px;height:74px;margin-left:-18px}
.card.big{width:66px;height:94px;margin-left:-22px}
.card .r{font-size:15px;top:4px;left:5px}
.card.big .r{font-size:19px;top:5px;left:7px}
.card .s{font-size:16px;bottom:4px;right:5px}
.card.big .s{font-size:21px}
.card .c{font-size:27px}
.card.big .c{font-size:36px}
.cards{min-height:78px}

.seat{min-height:172px;padding:10px}
.seathead{font-size:13.5px;gap:7px}
.seathead .num{font-size:11px}
.seathead .yb{font-size:9.5px;padding:2px 6px}
.seatbet{font-size:12.5px}
.seatcredits{font-size:12px}
.handmeta{font-size:12.5px;margin-top:5px}
.seatresult{font-size:12.5px;padding:3px 7px}
.dealerbox .who{font-size:11.5px;letter-spacing:.18em}
.phasename{font-size:16.5px}
.phasebar .rules{font-size:11.5px}
.shoe{font-size:11px}
.bjmsg{font-size:14px}
.queuenote{font-size:13.5px}
.chip{width:52px;height:52px;font-size:13px}
.pendingbet{font-size:16px}
.actionrow .btn{min-width:96px;font-size:14px;padding:10px 16px}

.pkseat{min-height:150px}
.pkhead{font-size:13.5px}
.pkstack{font-size:13.5px}
.pkcommit{font-size:12.5px}
.pkaction{font-size:12px}
.pkhand{font-size:12px}
.pkseat .card{width:46px;height:65px;margin-left:-16px}
.pkpot{font-size:19px}

.bchead{font-size:11.5px;letter-spacing:.18em}
.bcresult{font-size:clamp(17px,3.2vw,25px)}
.bcspot .n{font-size:15px}
.bcspot .o{font-size:11.5px}
.bcroad span{width:25px;height:25px;font-size:11.5px}

.sbsummary{font-size:18px}
.sbdie{width:clamp(46px,6.2vh,64px);height:clamp(46px,6.2vh,64px)}
.sbpip{width:10px;height:10px}
.sbhistory span{font-size:11px;padding:3px 6px}

.rlcell{font-size:14px}
.rlout{font-size:12px;padding:10px 4px}
.rlcolbtn{font-size:11.5px}
.rlzero{width:46px;font-size:21px}
.rlhistory span{width:26px;height:26px;font-size:12px}
.stakebar dd{font-size:28px}
.stakebar dt{font-size:9.5px}
.stakebar .sb-hint{font-size:12.5px}
.countdown{width:70px;height:70px}
.countdown .cd-num{font-size:27px}
.countdown .cd-unit{font-size:8.5px}
.mate{font-size:13px;padding:5px 10px}
.tablemates .tm-label{font-size:10.5px}

/* =============================================================================
 * BLACKJACK — clearer at a glance.
 * ========================================================================== */
.dealerbox{
  padding:10px 0 18px;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,235,190,.07), transparent 65%);
  border-radius:8px;
}
.dealerbox .who{
  display:inline-flex;align-items:center;gap:9px;
  padding:4px 14px;border-radius:14px;
  background:rgba(0,0,0,.4);border:1px solid rgba(242,234,222,.2);
  color:#f2eade;font-weight:600;
}
.dealerbox .who .mono{color:var(--amber);font-size:14px}
.seat.active{
  border-color:#ffd75e;
  box-shadow:0 0 0 2px rgba(255,215,94,.45), 0 0 30px rgba(255,215,94,.3);
}
.seat.active::before{
  content:'YOUR TURN';position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:8.5px;letter-spacing:.18em;padding:2px 8px;border-radius:8px;
  background:#ffd75e;color:#241005;font-weight:700;white-space:nowrap;
}
.seat.active.you::before{content:'YOUR TURN'}
.seat:not(.you).active::before{content:'PLAYING'}
.hand.activehand{
  background:rgba(255,215,94,.18);
  box-shadow:inset 0 0 0 2px rgba(255,215,94,.5);
  border-radius:6px;
}
.handmeta .bust{color:#ff8a76;font-weight:600}
.handmeta .bj{color:#ffd75e;font-weight:700;letter-spacing:.04em}
.seatresult.win{background:rgba(60,187,140,.28);color:#a6f8d2;font-weight:600}
.seatresult.loss{background:rgba(212,80,58,.26);color:#ffc2b4;font-weight:600}
.card.hole{
  background:
    repeating-linear-gradient(45deg,#5c1526,#5c1526 5px,#7d1e33 5px,#7d1e33 10px);
  border-color:#3a0c18;
  box-shadow:inset 0 0 0 2px rgba(255,220,180,.18), 0 3px 8px rgba(0,0,0,.5);
}

/* =============================================================================
 * COMPACTION — applied by fitStage() when a view would otherwise overflow the
 * stage and hand the player a scrollbar. Two stages, so a slightly tall board
 * is nudged rather than crushed.
 * ========================================================================== */
.compact .felt{padding:11px}
.compact .phasebar{padding-bottom:8px;margin-bottom:9px}
.compact .countdown{width:58px;height:58px}
.compact .countdown .cd-num{font-size:22px}
.compact .stakebar{padding:8px 14px;margin-bottom:7px}
.compact .stakebar dd{font-size:22px}
.compact .bjcontrols{padding:9px 12px;gap:7px}
.compact .chip{width:46px;height:46px;font-size:12px}
.compact .actionrow .btn{padding:8px 13px;font-size:13px}
.compact .tablemates{padding:6px 10px}
.compact .mate{padding:3px 8px;font-size:12px}
.compact .bjmsg{font-size:13px}

.compact .seat{min-height:150px;padding:8px}
.compact .card{width:46px;height:65px;margin-left:-16px}
.compact .card.big{width:57px;height:81px;margin-left:-19px}
.compact .cards{min-height:68px}
.compact .dealerbox{padding:6px 0 12px;margin-bottom:10px}

.compact .pkseat{min-height:132px;padding:7px}
.compact .pkboard{padding:6px 0 11px;margin-bottom:10px}
.compact #pkCommunity{min-height:70px}

.compact .sbtop{padding:0 0 6px}
.compact .sbdie{width:46px;height:46px}
.compact .sbspot{padding:4px 3px 3px}
.compact .sbboard{gap:2px}
.compact .sbrow{gap:2px}

.compact .rlboard{padding:6px}
.compact .rlout{padding:7px 3px}
.compact .bcboard{gap:4px}
.compact .bcspot{padding:10px 6px}
.compact .bctop{padding:6px 0 12px}

/* still too tall: trim the type as well, but only as a last resort */
.compact-2 .sbspot .n{font-size:12.5px}
.compact-2 .sbspot .o{font-size:9px}
.compact-2 .sbdie{width:40px;height:40px}
.compact-2 .sbpip{width:8px;height:8px}
.compact-2 .seat{min-height:132px}
.compact-2 .card{width:40px;height:57px;margin-left:-14px}
.compact-2 .card .c{font-size:21px}
.compact-2 .card .r{font-size:12px}
.compact-2 .cards{min-height:60px}
.compact-2 .phasename{font-size:14px}
.compact-2 .stakebar dd{font-size:19px}
.compact-2 .wheel{width:260px;height:260px}
.compact-2 .wheelwrap{width:268px}
.compact-2 .pkseat{min-height:118px}
.compact-2 .tablemates{display:none}

/* A completion panel dresses itself according to the size of the win, instead of
   a second overlay being stacked on top of it. */
.overlay.t-nice .bigcount{color:#fff6d8}
.overlay.t-big .bigcount,
.overlay.t-huge .bigcount,
.overlay.t-mega .bigcount,
.overlay.t-jackpot .bigcount{
  background:linear-gradient(180deg,#fff8e2 8%,#ffd75e 34%,#c9922e 52%,#8a5c14 62%,#ffd75e 84%,#fff8e2 99%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(255,200,90,.7));
}
.overlay.t-huge h3,.overlay.t-mega h3{font-size:clamp(26px,5.4vw,42px)}
.overlay.t-mega,.overlay.t-jackpot{
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,200,110,.34), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(220,60,40,.36), transparent 66%),
    linear-gradient(180deg, rgba(44,10,16,.97), rgba(12,3,6,.985));
}
.overlay.t-jackpot h3{
  background:linear-gradient(180deg,#fff 10%,#ff9a5c 45%,#c2340f 56%,#ffd06b 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.overlay.t-mega::before,.overlay.t-jackpot::before{
  content:'';position:absolute;inset:-40%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,205,120,.13) 0deg 4deg, transparent 4deg 13deg);
  animation:firays 11s linear infinite;
}

/* =============================================================================
 * THE GAMBLE — a card to flip, a ladder to climb, and one button to stop.
 * ========================================================================== */
.overlay.gambling{
  background:
    radial-gradient(ellipse at 50% 8%, rgba(120,200,255,.12), transparent 58%),
    radial-gradient(ellipse at 50% 108%, rgba(190,40,60,.28), transparent 64%),
    linear-gradient(180deg, rgba(16,8,20,.985), rgba(6,3,8,.99));
  gap:12px;padding:20px;
}
.gamble{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:520px}

.g-head{display:flex;align-items:center;gap:12px;width:100%;justify-content:center}
.g-kicker{
  font-family:'Bevan',serif;font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:#ffd75e;text-shadow:0 0 18px rgba(255,200,90,.6);
}
.g-dots{display:flex;gap:5px}
.g-dot{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.g-dot.on{background:#ffd75e;box-shadow:0 0 10px rgba(255,215,94,.85)}
.g-steps{font-family:'DM Mono',monospace;font-size:11px;color:var(--bone-dim)}

/* ---- the card ---- */
.g-stage{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.g-card{
  width:96px;height:136px;position:relative;transform-style:preserve-3d;
  transition:transform .58s cubic-bezier(.3,.8,.25,1);
}
.g-card.flipped{transform:rotateY(180deg)}
.g-face{
  position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.7);
}
.g-back{
  background:
    repeating-linear-gradient(45deg,#5c1526,#5c1526 6px,#7d1e33 6px,#7d1e33 12px);
  border:2px solid #c9922e;
}
.g-back::after{
  content:'?';font-family:'Bevan',serif;font-size:44px;color:rgba(255,235,180,.35);
}
.g-front{
  background:linear-gradient(165deg,#fffdf7,#e6dfcf);
  border:2px solid #b5aa93;color:#17171c;transform:rotateY(180deg);
}
.g-front.red{color:#b0201d}
.g-front .g-r{font-family:'DM Mono',monospace;font-size:34px;font-weight:500;line-height:1}
.g-front .g-su{font-size:44px;line-height:1;margin-top:2px}

.g-amounts{display:flex;flex-direction:column;gap:7px;min-width:150px}
.g-now,.g-alt{
  padding:7px 13px;border-radius:5px;text-align:center;
  border:1px solid rgba(201,146,46,.35);background:rgba(0,0,0,.35);
}
.g-now{border-color:var(--brass);background:rgba(245,185,66,.12)}
.g-now dt,.g-alt dt{
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim);
}
.g-now dd{font-family:'DM Mono',monospace;font-size:24px;color:#ffe9ae;
  text-shadow:0 0 14px rgba(245,185,66,.65);line-height:1.1}
.g-alt dd{font-family:'DM Mono',monospace;font-size:15px;color:#8ef0c4;line-height:1.15}

.g-verdict{
  font-family:'DM Mono',monospace;font-size:14px;color:var(--bone-dim);
  min-height:22px;text-align:center;max-width:44ch;
}
.g-verdict.win{color:#8ef0c4;font-size:19px;text-shadow:0 0 16px rgba(60,230,160,.5)}
.g-verdict.loss{color:#ffb3a3;font-size:17px}

/* ---- the picks ---- */
.g-picks{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.g-picks.waiting{opacity:.4;pointer-events:none}
.g-col{
  min-width:118px;padding:13px 20px;border-radius:6px;
  font-family:'Bevan',serif;font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  border:2px solid rgba(255,255,255,.3);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 0 rgba(0,0,0,.5);
  transition:transform .08s,filter .14s;
}
.g-col.red{background:linear-gradient(180deg,#c8242f,#7c1220)}
.g-col.black{background:linear-gradient(180deg,#2a2a33,#101015)}
.g-col:hover{filter:brightness(1.2)}
.g-col:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(0,0,0,.5)}
.g-suits{display:flex;gap:6px}
.g-suit{
  width:50px;height:50px;border-radius:6px;font-size:24px;line-height:1;
  background:linear-gradient(180deg,#f4f0e6,#d6cfbd);color:#17171c;
  border:2px solid #b5aa93;box-shadow:0 3px 0 rgba(0,0,0,.45);
  transition:transform .08s,filter .14s;
}
.g-suit.red{color:#b0201d}
.g-suit:hover{filter:brightness(1.08)}
.g-suit:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.g-take{padding:11px 30px;font-size:14px;letter-spacing:.05em}

/* ---- the ladder ---- */
.g-ladder{width:100%;max-width:330px;display:flex;flex-direction:column;gap:2px}
.g-rung{
  display:grid;grid-template-columns:26px 1fr 1fr;gap:6px;align-items:center;
  padding:3px 8px;border-radius:3px;background:rgba(255,255,255,.035);
  font-family:'DM Mono',monospace;font-size:11.5px;
}
.g-rung.g-legend{
  background:none;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-dim);
}
.g-rung .g-step{color:var(--amber-dim);text-align:right}
.g-rung .g-c{color:#e0d6c2;text-align:right}
.g-rung .g-s{color:#8ef0c4;text-align:right}
.g-note{
  font-size:10.5px;color:rgba(242,234,222,.5);text-align:center;line-height:1.55;
  max-width:46ch;font-style:italic;
}

@media (max-height:820px){
  .g-card{width:78px;height:110px}
  .g-front .g-su{font-size:34px}
  .g-front .g-r{font-size:27px}
  .g-ladder{max-width:300px}
  .g-note{display:none}
}


/* Major and Minor sit on the machine, top right of its own title box. */
.pokjp{
  flex:0 0 auto;display:flex;gap:7px;align-self:flex-start;
  margin:2px 10px 0 0;position:relative;z-index:3;
}
.pjp{
  min-width:96px;padding:5px 12px 6px;border-radius:5px;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.7));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85), inset 0 0 0 2px rgba(201,146,46,.4),
             0 3px 10px rgba(0,0,0,.5);
}
.pjp dt{
  font-family:'Bevan',Georgia,serif;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;margin-bottom:1px;
}
.pjp dd{
  font-family:'DM Mono',monospace;font-size:16px;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.pjp.major dt{color:#ffcf8a}
.pjp.major dd{color:#ffd75e;text-shadow:0 0 12px rgba(255,200,90,.65)}
.pjp.minor dt{color:#a9d8c4}
.pjp.minor dd{color:#8ef0c4;text-shadow:0 0 12px rgba(60,230,160,.5)}
.pokjp.offline{filter:grayscale(.9) brightness(.55)}
@media (max-width:760px){ .pokjp{display:none} }

/* =============================================================================
 * MACHINE PICKER — four signs, each dressed as its own machine.
 * ========================================================================== */
.machine-picker{gap:8px;margin-bottom:16px}
.mpick{
  position:relative;overflow:hidden;
  padding:11px 22px 12px;border-radius:6px 6px 3px 3px;
  font-family:'Bevan',Georgia,serif;font-weight:400;
  font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 rgba(0,0,0,.55),
             0 6px 14px rgba(0,0,0,.45);
  transition:transform .12s, filter .15s, box-shadow .15s;
}
.mpick::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;opacity:.65;
}
.mpick:hover{transform:translateY(-2px);filter:brightness(1.15)}
.mpick[aria-selected="true"]{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 rgba(0,0,0,.6),
             0 10px 22px rgba(0,0,0,.5), 0 0 26px currentColor;
}
.mpick[aria-selected="true"]::after{height:3px;opacity:1}

/* Dragons — lacquer red and gold */
.mpick[data-m="dragons"]{
  background:linear-gradient(180deg,#7a1226,#3d0a17);color:#f7dc9a;
}
.mpick[data-m="dragons"]::after{background:linear-gradient(90deg,transparent,#f7dc9a,transparent)}
.mpick[data-m="dragons"][aria-selected="true"]{
  background:linear-gradient(180deg,#b21a33,#5c0f1e);color:#fff3cf;
}

/* Lucky 69 — imperial gilt */
.mpick[data-m="lucky69"]{
  background:linear-gradient(180deg,#8f1408,#4a0a04);color:#ffd75e;
}
.mpick[data-m="lucky69"]::after{background:linear-gradient(90deg,transparent,#ffd75e,transparent)}
.mpick[data-m="lucky69"][aria-selected="true"]{
  background:linear-gradient(180deg,#d41d0b,#6b0f05);color:#fffbe8;
}

/* Lightning Dollaz — neon */
.mpick[data-m="lightning"]{
  background:linear-gradient(180deg,#173c5c,#0a1c2c);color:#9fe4ff;
}
.mpick[data-m="lightning"]::after{background:linear-gradient(90deg,transparent,#9fe4ff,transparent)}
.mpick[data-m="lightning"][aria-selected="true"]{
  background:linear-gradient(180deg,#2472ad,#0d2f4c);color:#e8f7ff;
}

/* Bull Stampede — leather and brass */
.mpick[data-m="bull"]{
  background:linear-gradient(180deg,#6b3d12,#33200a);color:#f0d49a;
}
.mpick[data-m="bull"]::after{background:linear-gradient(90deg,transparent,#f0d49a,transparent)}
.mpick[data-m="bull"][aria-selected="true"]{
  background:linear-gradient(180deg,#a35f16,#4d2c0a);color:#fff3d8;
}
@media (max-width:700px){ .mpick{padding:9px 13px;font-size:11.5px} }

/* =============================================================================
 * BLACKJACK — say what the table is waiting for, and make the numbers readable.
 * ========================================================================== */
.bjprompt{display:none}
.bjprompt.show{
  display:block;margin-bottom:10px;padding:11px 16px;border-radius:6px;
  font-size:13.5px;line-height:1.55;color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.25));
  border:1px solid rgba(242,234,222,.18);
}
.bjprompt.show b{color:var(--amber);font-size:15px;display:block;margin-bottom:2px}
.bjprompt.show.urgent{
  background:linear-gradient(180deg,rgba(245,185,66,.16),rgba(0,0,0,.3));
  border-color:var(--brass);
  box-shadow:0 0 22px rgba(245,185,66,.18);
  animation:promptbreathe 2.6s ease-in-out infinite;
}
@keyframes promptbreathe{
  0%,100%{box-shadow:0 0 14px rgba(245,185,66,.12)}
  50%{box-shadow:0 0 28px rgba(245,185,66,.32)}
}

/* the two numbers that matter, made obvious */
.handmeta{
  font-family:'DM Mono',monospace;font-size:15px;font-weight:500;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px;
}
.handmeta .tot{
  font-size:21px;line-height:1;color:#fff6d8;
  padding:2px 10px;border-radius:5px;
  background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,235,180,.28);
}
.handmeta .bust .tot,.handmeta.bust .tot{color:#ff8a76;box-shadow:inset 0 0 0 1px rgba(255,120,90,.5)}
.dealerbox .who .mono{
  font-size:20px;padding:2px 10px;border-radius:5px;
  background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,235,180,.3);
}
.seatbet{font-family:'DM Mono',monospace;font-size:14px;color:#ffe9ae}
.seatcredits{font-family:'DM Mono',monospace;font-size:12.5px}
.bjmsg{font-size:14.5px;line-height:1.5}
.bjmsg b{color:var(--amber);font-size:16px}

/* =============================================================================
 * POKER — dealer button, test seats, and a clearer turn.
 * ========================================================================== */
.pkbtn{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:11px;font-weight:600;
  background:linear-gradient(180deg,#fff,#c9c9c9);color:#1a1a1a;
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.pktest{
  font-size:8px;letter-spacing:.16em;padding:1px 5px;border-radius:3px;
  background:rgba(127,216,255,.22);color:#9fe4ff;
  border:1px solid rgba(127,216,255,.5);
}
.pkseat.dummy{border-style:dashed;border-color:rgba(127,216,255,.45)}
.pkseat.mine:not(.you){box-shadow:0 0 0 1px rgba(127,216,255,.4)}
.pkseat.acting.mine{
  border-color:#9fe4ff;
  box-shadow:0 0 0 2px rgba(159,228,255,.5), 0 0 28px rgba(127,216,255,.35);
}
.pkseat.acting.mine::before{
  content:'ACT FOR THIS SEAT';position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:.14em;padding:2px 8px;border-radius:8px;
  background:#9fe4ff;color:#06141f;font-weight:700;white-space:nowrap;
}
.pkseat.acting.you::before{content:'YOUR TURN';background:#ffd75e;color:#241005}
.btn.ghost{
  background:rgba(127,216,255,.10);border-color:rgba(127,216,255,.45);color:#9fe4ff;
}
.btn.ghost:hover{background:rgba(127,216,255,.2);border-color:#9fe4ff}

/* The gamble button. Visible only when there is a win to risk, disabled while
   the reels are moving or autoplay is running — gambling a figure that is about
   to be replaced is not a thing the machine should let you do. */
.btn.gamblebtn{
  background:linear-gradient(180deg,#c8323a,#7c1220);
  border-color:#ff9a8a;color:#fff;font-weight:600;letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 rgba(0,0,0,.5),
             0 0 18px rgba(200,50,58,.35);
  animation:gamblepulse .85s ease-in-out infinite;
}
@keyframes gamblepulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 rgba(0,0,0,.5),0 0 12px rgba(200,50,58,.3)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 rgba(0,0,0,.5),0 0 26px rgba(230,70,80,.75)}
}
.btn.gamblebtn:hover:not(:disabled){filter:brightness(1.15)}
.btn.gamblebtn:disabled{
  animation:none;opacity:.4;filter:grayscale(.5);cursor:not-allowed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 0 rgba(0,0,0,.4);
}


/* Nothing an ornament draws may sit on top of the machine's own name. The Bull
   rivets used to run straight through the badge and the tagline. */
.topglass{isolation:isolate}
.glass-ornament{z-index:0}
.glasstext{position:relative;z-index:2}
.pokjp,.glassinfo{position:relative;z-index:3}
.machine-badge{position:relative;z-index:2}

/* The ball, once it has landed, sits on the winning number and stays there —
   white, lit, and unmistakably on one pocket. */
.rlball{
  background:radial-gradient(circle at 34% 28%, #ffffff, #f4f6f9 45%, #b9c0c8);
  box-shadow:0 0 12px rgba(255,255,255,.9), 0 3px 7px rgba(0,0,0,.85),
             inset -2px -2px 4px rgba(0,0,0,.22);
}
.wheel.spinning .rlball{
  box-shadow:0 0 16px rgba(255,255,255,1), 0 3px 8px rgba(0,0,0,.85);
}
/* a soft halo under the resting ball so the pocket it chose is obvious */
.rlball::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42), transparent 68%);
  opacity:0;transition:opacity .5s ease .5s;pointer-events:none;
}
.wheel:not(.spinning) .rlball::after{opacity:1}

/* the wheel starting up is the cue that betting is closing */
.wheel.closing{filter:drop-shadow(0 0 18px rgba(255,190,90,.4))}
.wheel.closing + .rlball,.wheel.closing .rlball{opacity:0}


/* =============================================================================
 * The controls: bets on the left, the three things you actually press on the
 * right, in the order you reach for them.
 * ========================================================================== */
.playgroup{
  margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;
}
.playgroup .spinbtn{margin-left:0}
.controls{flex-wrap:wrap;row-gap:10px}
/* the cabinet clips its own overflow, so a wrapped control row must never be
   able to fall outside it */
.machine{overflow:visible}
.machine > .reelbox,.machine > .topglass{overflow:hidden}
.reelbox{border-radius:0}
.machine > .controls{border-radius:0 0 9px 9px}

.btn.gamblebtn{
  padding:11px 20px;font-size:14px;
  animation-duration:.85s;
}
@media (max-width:720px){
  .playgroup{width:100%;margin-left:0;justify-content:flex-end}
}


/* =============================================================================
 * ORNAMENT CLEARANCE
 * Every theme draws something in a band at the top and bottom edge of its sign.
 * Reserve those bands once, here, instead of tuning offsets per theme and
 * finding the tagline sitting in one of them again.
 * ========================================================================== */
:root{ --sign-band: 16px; }
.topglass{
  padding-top:calc(var(--sign-band) + 8px);
  padding-bottom:calc(var(--sign-band) + 8px);
}
.theme-dust .topglass,
.theme-imperial .topglass,
.theme-crimson .topglass,
.theme-storm .topglass{
  padding-top:calc(var(--sign-band) + 8px);
  padding-bottom:calc(var(--sign-band) + 8px);
}
/* the ornament layer may only paint inside those bands, or behind the middle */
.glass-ornament{z-index:0}
.glasstext{position:relative;z-index:2}
/* and the type carries its own shadow, so even a mistake stays readable */
.topglass p{
  position:relative;z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6);
}
.machine-badge{position:relative;z-index:2}


/* Each seat lives in its own slot so only the seat that changed is redrawn —
   rewriting the whole table restarted every card's deal animation, which is what
   made the cards flash whenever anyone acted. */
.pkslot{display:contents}

/* =============================================================================
 * Keeping a panel inside the cabinet, with CSS only.
 *
 * The Dragons choice — five options and a paragraph — was running off the bottom
 * of the reel box on a short window, with the last option cut in half. A
 * scrollbar inside a slot machine is absurd, so instead every part of the panel
 * is sized against the cabinet's own height: the type, the gaps, the padding and
 * the option cards all give ground together as the box gets shorter.
 *
 * This was briefly done in JavaScript, by measuring the panel and scaling it.
 * That worked, and it also disturbed the machine's own DOM badly enough to break
 * the Lightning top reel — the panel is not worth a renderer. Proportional
 * sizing gets most of the way there and cannot break anything.
 * ========================================================================== */
.overlay{
  overflow:hidden;
  gap:clamp(6px, 1.4vh, 14px);
  padding:clamp(10px, 2.2vh, 22px);
}
.overlay h3{
  font-size:clamp(17px, 3.4vh, 34px);
  margin:0;line-height:1.1;
}
.overlay > p,.overlay .ovnote{
  font-size:clamp(10px, 1.5vh, 13.5px);
  line-height:1.42;margin:0;max-width:62ch;
}
.overlay .choices,.overlay .picks{
  gap:clamp(5px, 1.1vh, 12px);
}
.overlay .pick{
  padding:clamp(7px, 1.5vh, 16px) clamp(8px, 1.2vw, 16px);
  min-width:0;
}
.overlay .pick .big,.overlay .pick .pick-n{
  font-size:clamp(19px, 3.2vh, 34px);
}
.overlay .pick small,.overlay .pick .sub{
  font-size:clamp(8.5px, 1.15vh, 11px);
}
.overlay .btn{padding:clamp(7px,1.4vh,12px) clamp(14px,2vw,24px)}
/* on a genuinely short window the options go two-up rather than five-across */
@media (max-height:760px){
  .overlay .choices,.overlay .picks{flex-wrap:wrap;justify-content:center}
}

/* =============================================================================
 * TABLE GAME LEGIBILITY
 *
 * The numbers on the felt were sized for a layout diagram rather than for
 * somebody deciding where to put money. A roulette number you have to lean in
 * to read is not a small aesthetic problem — it is the part of the table you
 * are actually interacting with.
 *
 * Nothing here changes the look: the palette, the felt, the brass and the type
 * are all as they were. What changes is size, weight and contrast, which is
 * where the quality of a real table shows.
 * ========================================================================== */

/* ---------------------------------------------------------- roulette felt */
.rlnums .rlcell,
.rlcell{
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:clamp(12px, 1.05vw, 17px);
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 1px rgba(0,0,0,.9);
}
.rlcell.red{background:linear-gradient(180deg,#c4262e,#8e1219)}
.rlcell.black{background:linear-gradient(180deg,#2a2a2e,#141416)}
.rlcell.green,.rlzero{background:linear-gradient(180deg,#1f7a46,#12512e)}
.rlcell,.rlzero{
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.5);
}
.rlcell:hover,.rlzero:hover{filter:brightness(1.28);border-color:rgba(255,214,120,.7)}
/* The zero's own numeral, and NOT anything else that lands inside the cell.
 *
   A placed chip is a span too, so a rule aimed at "spans in the zero" turned
   its dark lettering white and made the amount unreadable — on that one cell
   and nowhere else, which is why it looked like a quirk of the zero rather than
   a selector that was too greedy. */
.rlzero > span:not(.rchip):not(.chipslot){
  font-size:clamp(13px, 1.1vw, 18px);font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
}
/* and the chip keeps its own colours wherever it lands */
.rlzero .rchip,.rlcell .rchip{
  color:#241005;text-shadow:none;font-size:10px;font-weight:500;
}
.rlzero .rchip.edge,.rlcell .rchip.edge{font-size:8.5px}
/* the outside bets read as labels, so they get the label treatment */
.rlout,.rloutside .cell,.rlbets .out,.rlcolcells .rlcol,.rlouter div{
  font-size:clamp(9.5px, .78vw, 12.5px);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#f6ecd8;text-shadow:0 1px 2px rgba(0,0,0,.8);
}

/* ------------------------------------------------------- hand totals etc. */
.handmeta{
  font-family:'DM Mono',monospace;
  font-size:13.5px;
  color:rgba(246,240,230,.92);
  letter-spacing:.01em;
}
.handmeta .tot{
  font-size:17px;font-weight:600;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.handmeta .bust{color:#ff8a76;font-weight:600}
.handmeta .bj{color:#ffd06b;font-weight:700}
.bjmsg{font-size:13.5px;color:rgba(246,240,230,.85)}

/* ------------------------------------------------- sic bo and baccarat pips */
.sbdie,.sb-die{
  font-size:clamp(20px, 2vw, 30px);font-weight:800;
  text-shadow:0 2px 3px rgba(0,0,0,.6);
}
.sbcell,.bccell,.roundbet{
  font-size:clamp(10.5px, .85vw, 13.5px);
  font-weight:700;letter-spacing:.03em;
  color:#f6ecd8;text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.roundbet .odds,.sbcell .odds,.bccell .odds{
  font-family:'DM Mono',monospace;font-size:11px;
  color:var(--amber);opacity:.95;
}

/* -------------------------------------------------------------- the chips */
.chip{
  font-family:'DM Mono',monospace;
  font-size:12.5px;font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------ seat labels */
.seat .nm,.pkseat .nm,.seat-name{
  font-size:13px;font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.seat .stack,.pkseat .stack{
  font-family:'DM Mono',monospace;font-size:13px;color:#fff;
}

/* =============================================================================
 * BLACKJACK: THE ACTIONS BELONG WITH THE HAND
 *
 * They were in a row at the bottom of the panel, as far from the cards as it is
 * possible to be. At a real table your hands are over your cards, and the
 * decision is made looking at them — so the buttons sit against the felt,
 * directly under the seats, and only when it is your turn.
 * ========================================================================== */
.bjroom .felt{position:relative}
#bjActions{
  gap:9px;justify-content:center;
  transition:opacity .18s ease, transform .18s ease;
}
#bjActions:empty{display:none}
.actionrow.at-seat{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:14;padding:9px 13px;border-radius:12px;
  background:linear-gradient(180deg,rgba(14,28,22,.94),rgba(6,16,12,.97));
  border:1px solid rgba(255,214,120,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  animation:bjact .22s cubic-bezier(.2,1.3,.4,1);
}
@keyframes bjact{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
#bjActions .btn{
  min-width:86px;padding:10px 16px;font-size:13.5px;font-weight:600;
  letter-spacing:.02em;
}
/* the decision you are most likely to want, weighted accordingly */
#bjActions .btn[data-a="hit"]{
  background:linear-gradient(180deg,#2e9c6c,#14603f);border-color:#8ef0c4;color:#eafff5;
}
#bjActions .btn[data-a="stand"]{
  background:linear-gradient(180deg,#8a1226,#4a0912);border-color:#ff9a8a;color:#ffe9e4;
}
#bjActions .btn[data-a="double"],#bjActions .btn[data-a="split"]{
  background:linear-gradient(180deg,#3a2a12,#1c1408);border-color:#c9922e;color:#ffd98a;
}
#bjActions .btn:hover{filter:brightness(1.16);transform:translateY(-1px)}

@media (max-width:820px){
  .actionrow.at-seat{
    position:static;transform:none;animation:none;
    background:transparent;border:0;box-shadow:none;padding:0;
  }
}


/* the seats leave room for the action row that now sits over them */
.bjroom .felt{padding-bottom:76px}
@media (max-width:820px){ .bjroom .felt{padding-bottom:14px} }

/* =============================================================================
 * KENO
 *
 * The reference project's mechanics, in this club's dark palette.
 *
 * The five ball colours and the rule that assigns them are the reference's,
 * unchanged — that pattern is how the game is recognised, and it is not mine to
 * reinterpret. What is different is the surround: everything else in this club
 * is dim, and a bright kiosk screen in the middle of it is a slap.
 * ========================================================================== */
:root{
  --k-red:#ee4338; --k-blue:#00a9dc; --k-green:#43a848;
  --k-gold:#f5b72e; --k-grey:#9b9b9b; --k-sky:#0784bb;
}

/* The view must claim the space the other games claim, or the stage collapses
   to the board's own size and floats in the middle of an empty page — which is
   exactly what it did. */
/* The panel hugs the game.
 *
   It used to fill the whole column, so a board that is 660px wide sat inside a
   slab of dark blue running the length of the page — all of it doing nothing
   except being large. A panel should be the size of what is in it. */
#viewKN{display:flex;flex-direction:column;min-height:0;align-items:stretch}
.kroom{
  /* the two columns sit at the top and take the height they need, rather than
     both being stretched to whichever is taller */
  display:flex;gap:14px;flex:0 1 auto;min-height:0;align-items:flex-start;
}
.kstage{
  position:relative;flex:0 1 auto;min-width:0;max-width:100%;
  display:flex;flex-direction:column;gap:10px;
  align-self:flex-start;
  padding:12px;border-radius:var(--r);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(7,132,187,.14), transparent 58%),
    linear-gradient(180deg,rgba(10,24,34,.92),rgba(5,13,19,.96));
  border:1px solid rgba(7,132,187,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.5);
  overflow:hidden;
}
.kstage-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kgame{font-family:'DM Mono',monospace;font-size:13px;color:rgba(219,231,239,.6)}
.kclock{
  font-family:'DM Mono',monospace;font-size:13.5px;padding:4px 12px;border-radius:13px;
  background:rgba(255,255,255,.07);color:#dbe7ef;transition:.25s;
}
.kclock.live{background:var(--k-gold);color:#0b1620;font-weight:600}

/* -------------------------------------------------------------- the board */



.mode-buy 
.mode-buy .kcell:hover{background:rgba(7,132,187,.24)}
.kn{
  font-size:clamp(11px,1vw,17px);font-weight:800;color:rgba(219,231,239,.5);
  line-height:1;
}
.kcell.picked{border-color:#5fc8f5;background:rgba(7,132,187,.18)}
.kcell.picked .kn{color:#9fe4ff}
.kcell.drawn{border-color:transparent}
.kcell.drawn .kn{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.kcell.drawn.k-red{background:var(--k-red)}
.kcell.drawn.k-blue{background:var(--k-blue)}
.kcell.drawn.k-green{background:var(--k-green)}
.kcell.drawn.k-gold{background:var(--k-gold)}
.kcell.drawn.k-grey{background:var(--k-grey)}
.kcell.drawn.hit{box-shadow:inset 0 0 0 3px #b98cff}
.kcell.fresh{animation:kfresh .8s ease}
@keyframes kfresh{
  0%{transform:scale(.55);opacity:0}
  55%{transform:scale(1.08)}
  100%{transform:none;opacity:1}
}

/* ---------------------------------------------------------------- the orb
 * One number, large, in the middle. The reference's centrepiece. */
.kreveal{
  position:absolute;inset:0;z-index:25;display:grid;place-items:center;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;
}
.kreveal.on{opacity:1;visibility:visible}
.korb{
  width:clamp(110px,17vw,196px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  font-size:clamp(58px,9.4vw,110px);font-weight:900;line-height:1;
  text-shadow:0 4px 0 rgba(0,0,0,.16);
  border:8px solid rgba(255,255,255,.94);
  box-shadow:0 18px 55px rgba(0,0,0,.55),
             inset 0 -12px 20px rgba(0,0,0,.12),
             inset 0 10px 20px rgba(255,255,255,.22);
  transform:scale(.72);
  transition:transform 180ms cubic-bezier(.2,1.25,.35,1), opacity 120ms ease;
}
.kreveal.on .korb{transform:scale(1)}
.kreveal.leaving .korb{transform:scale(.86);opacity:0}
.korb.k-red{background:var(--k-red)} .korb.k-blue{background:var(--k-blue)}
.korb.k-green{background:var(--k-green)} .korb.k-gold{background:var(--k-gold)}
.korb.k-grey{background:var(--k-grey)}
.korb.hit{
  box-shadow:0 0 0 8px #452294, 0 18px 55px rgba(0,0,0,.55),
             inset 0 -12px 20px rgba(0,0,0,.12),
             inset 0 10px 20px rgba(255,255,255,.22);
}

/* ------------------------------------------------------- the announcement */
.kannounce{
  position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;
  background:rgba(4,12,18,.94);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease;
}
.kannounce.on{opacity:1;visibility:visible}
.kpanel-r{
  width:min(560px,92%);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,32,44,.98),rgba(6,16,23,.99));
  border:1px solid rgba(7,132,187,.35);
  box-shadow:0 22px 60px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.97);transition:transform .25s ease;
}
.kannounce.on .kpanel-r{transform:none}
.kstripe{height:8px;background:#5a6a74}
.kannounce.heads .kstripe{background:var(--k-red)}
.kannounce.tails .kstripe{background:var(--k-blue)}
.kannounce.evens .kstripe{
  background:linear-gradient(90deg,var(--k-red) 0 50%,var(--k-blue) 50%);
}
.kannounce.cashwin .kpanel-r{border-color:#e9b72f}
.kannounce.cashwin .kstripe{
  background:linear-gradient(90deg,#f4b525,#ffe585,#f4b525);
}
.kcontent{padding:22px 26px 20px;text-align:center}
.keyebrow{
  text-transform:uppercase;letter-spacing:.24em;font-size:11px;font-weight:800;
  color:rgba(95,200,245,.7);
}
.ktitle{
  margin:5px 0 4px;font-size:clamp(34px,5.6vw,64px);line-height:1;
  font-weight:900;color:#dbe7ef;
}
.ksplit{font-size:18px;font-weight:900;color:rgba(219,231,239,.55)}
.ksplit .h{color:var(--k-red)} .ksplit .t{color:var(--k-blue)}
.kprizebox{
  display:none;margin-top:16px;padding:15px 17px;border-radius:10px;
  background:linear-gradient(135deg,#f4b525,#ffdb66);color:#122a38;
  box-shadow:0 8px 24px rgba(201,147,35,.28);
}
.kprizebox.on{display:block;animation:kprize .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes kprize{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:none}}
.kprize-l{text-transform:uppercase;font-size:11px;letter-spacing:.2em;font-weight:900}
.kprize-a{font-size:clamp(30px,5vw,54px);font-weight:900;line-height:1.05;margin:2px 0}
.kprize-d{font-size:13px;font-weight:800}

/* ------------------------------------------------------------- the side */
.kside{
  width:clamp(250px,23vw,340px);flex:0 0 auto;
  display:flex;flex-direction:column;gap:9px;min-height:0;
}
.ktabs{display:flex;gap:4px;padding:4px;border-radius:9px;background:rgba(0,0,0,.35)}
.ktab{
  flex:1;padding:8px;border-radius:6px;font-size:12.5px;font-weight:700;
  color:rgba(219,231,239,.6);transition:.14s;
}
.ktab.on{background:var(--k-sky);color:#fff}
.kpane{
  padding:11px 13px;border-radius:10px;min-height:64px;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(12,28,40,.9),rgba(6,16,23,.95));
  border:1px solid rgba(7,132,187,.2);
  overflow-y:auto;scrollbar-width:none;
}
.kpane::-webkit-scrollbar{width:0}
.kpane h5{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(95,200,245,.75);margin:0 0 8px;
}
#kenoBuy{display:none}
.mode-buy #kenoBuy{display:block;flex:1 1 auto;min-height:0;overflow-y:auto}
/* the two reference panels share whatever the buy panel is not using */
.kside > .kpane:last-child{flex:1 1 auto;min-height:80px}
.kempty{color:rgba(219,231,239,.4);font-size:12.5px;text-align:center;margin:0;padding:9px}

.kprod{display:flex;gap:5px;margin-bottom:10px}
.kptab{flex:1;padding:9px;border-radius:7px;font-size:12.5px;font-weight:800;
  background:rgba(255,255,255,.06);color:rgba(219,231,239,.72)}
.kptab.on{background:var(--k-sky);color:#fff}
.kpicks-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11px;color:rgba(219,231,239,.55);margin-bottom:6px}
.kpicks-head b{color:#5fc8f5;font-family:'DM Mono',monospace}
.kchips{display:flex;flex-wrap:wrap;min-height:30px;align-items:center}
.khts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.kht{padding:10px 12px;border-radius:8px;text-align:left;font-weight:800;
  background:rgba(255,255,255,.06);color:rgba(219,231,239,.72)}
.kht small{display:block;font-weight:400;font-size:11px;opacity:.75}
.kht b{display:block;font-size:12px;color:#5fc8f5;margin-top:2px}
.kht.on{background:#0e3a52;color:#fff;box-shadow:inset 0 0 0 1px rgba(95,200,245,.5)}
.kht.on b{color:var(--k-gold)}
.kstake{margin-bottom:10px}
.kstake label{display:block;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(95,200,245,.7);margin-bottom:5px}
.kstake-row{display:flex;gap:4px;flex-wrap:wrap}
.kamt{padding:7px 11px;border-radius:6px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.06);color:rgba(219,231,239,.72)}
.kamt.on{background:var(--k-sky);color:#fff}
.kbuybar{display:flex;align-items:center;gap:10px}
.kcost{flex:1}
.kcost span{display:block;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(219,231,239,.5)}
.kcost b{font-family:'DM Mono',monospace;font-size:19px;color:#dbe7ef}
.kprize{margin-top:10px;padding-top:9px;border-top:1px solid rgba(7,132,187,.2)}
.ktable{width:100%;font-size:12px;border-collapse:collapse}
.ktable td{padding:3px 0;color:rgba(219,231,239,.66)}
.ktable td.num{text-align:right;font-family:'DM Mono',monospace;color:var(--k-gold);
  font-weight:700}

.kball{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;color:#fff;font-weight:900;font-size:12px;
  margin:2px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.3);
}
.kball.sm{width:22px;height:22px;font-size:10.5px;margin:1px}
.kball.k-red{background:var(--k-red)} .kball.k-blue{background:var(--k-blue)}
.kball.k-green{background:var(--k-green)} .kball.k-gold{background:var(--k-gold)}
.kball.k-grey{background:var(--k-grey)}

.kticket{padding:9px 10px;border-radius:8px;margin-bottom:6px;
  background:rgba(255,255,255,.045);border-left:3px solid rgba(7,132,187,.35)}
.kticket.live{background:rgba(67,168,72,.1);border-left-color:#43a848}
.kt-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.kt-head b{color:#dbe7ef} .kt-head span{color:rgba(219,231,239,.5)}
.kt-foot{display:flex;justify-content:space-between;font-size:11px;
  color:rgba(219,231,239,.5)}
.kt-foot b.up{color:#6ee7a0}
.khist{display:flex;align-items:center;gap:7px;padding:5px 0;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.06)}
.khist:last-child{border:0}
.khg{font-family:'DM Mono',monospace;font-size:11px;color:rgba(219,231,239,.4);
  flex:0 0 38px}
.khb{flex:1;min-width:0}
.khr{font-size:9.5px;font-weight:900;letter-spacing:.1em;padding:2px 7px;
  border-radius:9px;background:rgba(255,255,255,.08);color:rgba(219,231,239,.7)}
.khr.k-heads{background:var(--k-red);color:#fff}
.khr.k-tails{background:var(--k-blue);color:#fff}
.khr.k-evens{background:var(--k-gold);color:#122a38}

/* it has to survive a narrow window like every other game */
@media (max-width:1000px){
  .kroom{flex-direction:column}
  .kside{width:100%;flex-direction:row;flex-wrap:wrap}
  .ktabs{width:100%}
  .kpane{flex:1 1 240px;max-height:260px}
  .korb{width:clamp(96px,26vw,150px);font-size:clamp(46px,14vw,84px);border-width:6px}
}
@media (max-width:620px){
  .kside{flex-direction:column}
  .kpane{max-height:220px}
  .kball{width:21px;height:21px;font-size:10px}
}

/* =============================================================================
 * TABLE GAME POLISH
 *
 * The tables read as diagrams of a casino rather than as one. Nothing here
 * changes a layout or a rule — it is the difference between a chip drawn as a
 * circle and a chip that looks like it has weight, which is most of what makes
 * a table feel like a table.
 * ========================================================================== */

/* ---- chips: weight, edge, and a response to being picked up ------------- */
.chip{
  position:relative;
  border:3px dashed rgba(255,255,255,.68);
  box-shadow:
    0 4px 10px rgba(0,0,0,.55),
    inset 0 2px 7px rgba(255,255,255,.20),
    inset 0 -4px 9px rgba(0,0,0,.34),
    inset 0 0 0 6px rgba(0,0,0,.10);
  transition:transform .13s cubic-bezier(.2,1.4,.4,1), filter .13s, box-shadow .13s;
}
/* the ring of edge spots a real chip has */
.chip::after{
  content:'';position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}
.chip:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.12)}
.chip:active{transform:translateY(-1px) scale(.98)}
.chip.on,.chip.selected,.chip[aria-pressed="true"]{
  box-shadow:
    0 0 0 3px var(--amber),
    0 6px 16px rgba(0,0,0,.6),
    0 0 22px rgba(245,185,66,.34),
    inset 0 2px 7px rgba(255,255,255,.22),
    inset 0 -4px 9px rgba(0,0,0,.34);
  transform:translateY(-2px);
}

/* ---- the felt: cloth rather than flat colour --------------------------- */
.felt,.rlfelt,.bcfelt,.sbfelt{
  position:relative;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.055), transparent 58%),
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.035) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.016) 0 2px, transparent 2px 4px);
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.42),
    inset 0 2px 0 rgba(255,255,255,.05);
}

/* ---- the stake bar reads as a plate on the rail ------------------------ */
.stakebar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 14px rgba(0,0,0,.35);
}
.stakebar dd{
  font-family:'DM Mono',monospace;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ---- a bet you have placed should be obvious --------------------------- */
.chipslot .chip,.betchip{
  animation:betdrop .26s cubic-bezier(.2,1.6,.4,1);
}
@keyframes betdrop{
  from{transform:translateY(-14px) scale(.7);opacity:0}
  to{transform:none;opacity:1}
}

/* ---- the countdown earns urgency only when it has any ------------------ */
.timer,.rltimer,.roundtimer{transition:color .3s, box-shadow .3s}
.timer.urgent,.rltimer.urgent,.roundtimer.urgent{
  color:#ff9a8a;
  box-shadow:0 0 0 2px rgba(255,120,100,.5), 0 0 20px rgba(255,90,70,.35);
  animation:tickpulse 1s steps(1) infinite;
}
@keyframes tickpulse{0%,49%{opacity:1}50%,100%{opacity:.62}}

/* ---- cards lift off the cloth ------------------------------------------ */
.card,.pcard{
  box-shadow:0 3px 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .15s;
}
.card.dealt{animation:carddeal .28s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes carddeal{
  from{transform:translateY(-20px) rotate(-6deg);opacity:0}
  to{transform:none;opacity:1}
}

/* ---- the winning cell on a settled round ------------------------------- */
.rlcell.won,.sbcell.won,.bccell.won,.roundbet.won{
  box-shadow:0 0 0 3px var(--amber), 0 0 26px rgba(245,185,66,.55) !important;
  animation:wonpulse 1.4s ease-out 2;
}
@keyframes wonpulse{
  0%{filter:brightness(1.5)}
  100%{filter:none}
}

@media (prefers-reduced-motion: reduce){
  .chip,.card,.chipslot .chip,.betchip{animation:none;transition:none}
  .timer.urgent,.rltimer.urgent,.roundtimer.urgent{animation:none}
}

/* the bonus reel: it rattles, then lands */
.kbonus{
  display:none;margin-left:auto;
  font-family:'DM Mono',monospace;font-size:13px;font-weight:700;
  padding:4px 13px;border-radius:13px;letter-spacing:.06em;
  background:rgba(255,255,255,.08);color:#dbe7ef;
  transition:background .25s, color .25s, transform .18s;
}
.kbonus.on{display:inline-block}
.kbonus.rolling{
  background:rgba(245,183,46,.18);color:var(--k-gold);
  transform:scale(1.04);
}
.kbonus.big{
  background:linear-gradient(135deg,#f4b525,#ffdb66);color:#122a38;
  box-shadow:0 0 18px rgba(245,183,46,.5);
  animation:kbonuspop .4s cubic-bezier(.2,1.6,.4,1);
}
@keyframes kbonuspop{from{transform:scale(.7)}to{transform:none}}

/* which games a ticket covers */
.kt-range{
  font-size:10.5px;color:rgba(219,231,239,.45);margin-bottom:4px;
  letter-spacing:.04em;
}
.kt-range b{color:#5fc8f5;font-family:'DM Mono',monospace}

@media (prefers-reduced-motion: reduce){
  .kbonus,.kbonus.big{transition:none;animation:none}
}

/* =============================================================================
 * THE GREEN CAME BACK
 *
 * Flattening the tables to dark plates made them read as wireframes of a casino
 * rather than one. Green cloth is what says "table" before anything else does —
 * it is the single strongest signal the room has, and taking it out to look
 * modern cost more than it bought.
 *
 * This is the felt returned, with the texture and lighting from the polish pass
 * kept on top of it.
 * ========================================================================== */
:root{
  --felt-1:#1c6b47;
  --felt-2:#0f4a30;
  --felt-3:#08301f;
  --felt-edge:#c9922e;
}

.felt,.rlfelt,.bcfelt,.sbfelt,.bjfelt,.roundfelt{
  background-color:var(--felt-2);
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(120,255,190,.10), transparent 56%),
    radial-gradient(ellipse at 50% 108%, rgba(0,0,0,.42), transparent 60%),
    repeating-linear-gradient(45deg,  rgba(0,0,0,.045) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--felt-1), var(--felt-2) 52%, var(--felt-3));
  border:1px solid rgba(201,146,46,.42);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.07),
    0 10px 34px rgba(0,0,0,.55);
}

/* the brass rail around the cloth */
.felt,.rlfelt,.bcfelt,.sbfelt{
  border-radius:14px;
  outline:1px solid rgba(255,214,120,.16);
  outline-offset:-5px;
}

/* the round-game layouts sit ON the cloth rather than replacing it */
.roundbet,.sbcell,.bccell{
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.24));
  border:1px solid rgba(255,214,120,.28);
  color:#f6ecd8;
  transition:background .14s, border-color .14s, transform .1s;
}
.roundbet:hover,.sbcell:hover,.bccell:hover{
  background:linear-gradient(180deg, rgba(255,214,120,.22), rgba(0,0,0,.24));
  border-color:var(--amber);
  transform:translateY(-1px);
}
.roundbet.on,.sbcell.on,.bccell.on{
  background:linear-gradient(180deg, rgba(255,214,120,.3), rgba(120,80,10,.3));
  border-color:var(--amber);
  box-shadow:0 0 16px rgba(245,185,66,.3);
}

/* the outside bets keep their own colours over the green */
.rlout.red,.rlbets .red{background:linear-gradient(180deg,#c4262e,#8e1219) !important}
.rlout.black,.rlbets .black{background:linear-gradient(180deg,#2a2a2e,#141416) !important}

/* the panels around the table pick the green up rather than fighting it */
.stakebar{
  background:linear-gradient(180deg, rgba(28,107,71,.22), rgba(0,0,0,.4));
  border:1px solid rgba(201,146,46,.34);
}
.chiprow{
  padding:10px 12px;border-radius:11px;
  background:linear-gradient(180deg, rgba(15,74,48,.34), rgba(0,0,0,.34));
  border:1px solid rgba(201,146,46,.22);
}

/* the dealer's area reads as part of the same table */
.dealerbox,.bjdealer,.roundhead{
  background:linear-gradient(180deg, rgba(8,48,31,.7), rgba(0,0,0,.35));
  border-bottom:1px solid rgba(201,146,46,.3);
}

/* =============================================================================
 * THE BOARD, AS A REAL KENO SCREEN DRAWS IT
 *
 * A pale blue-grey grid, numbers landing as solid coloured tiles, a red HEADS
 * spine down the top half and a blue TAILS spine down the bottom. That is what
 * the game looks like in a club and it is what makes it recognisable across a
 * room.
 *
 * The board is light; everything AROUND it stays dark, which was the earlier
 * instruction and still holds. A lit screen in a dim room is exactly how one of
 * these looks in real life anyway.
 * ========================================================================== */

.kboardwrap > .kspine,
.kboardwrap > 
/* the screen: spine and grid together, sized by height */



/* the red/blue spine down the left edge */
.kspine{
  flex:0 0 26px;display:flex;flex-direction:column;
}
.kspine span{
  flex:1;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10px;font-weight:800;letter-spacing:.16em;color:#fff;
  text-transform:capitalize;
}
.ksp-heads{background:var(--k-red)}
.ksp-tails{background:var(--k-blue)}

/* the grid itself */


.kn{
  /* Invisible, not absent. `font-size:0` left the grid with no content to size
     itself against, which is half of why it collapsed. */
  color:transparent;
  font-size:clamp(10px,1vw,15px);
}
.mode-buy .kcell:hover{background:#c2d3e4}
.mode-buy .kcell .kn{
  color:#7b8ea0;font-size:clamp(10px,1vw,15px);
}
.kcell.picked{
  background:#b9d4ec;
  box-shadow:inset 0 0 0 2px #0784bb;
}
.kcell.picked .kn{color:#0b4c73;font-size:clamp(10px,1vw,15px)}

/* a drawn number is a solid tile with the number on it */
.kcell.drawn{border-radius:4px}
.kcell.drawn .kn{
  color:#fff !important;
  font-size:clamp(11px,1.1vw,18px) !important;
  font-weight:900;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.kcell.drawn.k-red{background:var(--k-red)}
.kcell.drawn.k-blue{background:var(--k-blue)}
.kcell.drawn.k-green{background:var(--k-green)}
.kcell.drawn.k-gold{background:var(--k-gold)}
.kcell.drawn.k-grey{background:#7a3fb0}
.kcell.drawn.hit{
  /* one of yours. A dark ring reads on every one of the five tile colours,
     which a bright one does not. */
  box-shadow:inset 0 0 0 3px #14181c, 0 0 0 2px #f5b72e;
  z-index:2;
}

/* ---- the header row, as the real screen lays it out -------------------- */
.kstage-head{
  gap:8px;padding:2px 2px 6px;flex-wrap:wrap;
}
.kbrand{
  font-family:Arial Black, Arial, sans-serif;font-weight:900;
  font-size:19px;letter-spacing:-.02em;color:#0784bb;
}
.kbrand b{color:var(--k-red)}
.ktally{
  display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
}
.ktally small{
  font-size:8.5px;font-weight:700;letter-spacing:.06em;
  color:rgba(219,231,239,.55);
}
.ktally b{
  min-width:34px;padding:2px 8px;border-radius:4px;
  font-size:15px;font-weight:900;color:#fff;text-align:center;
}
.ktally.heads b{background:var(--k-red)}
.ktally.tails b{background:var(--k-blue)}
.kbonus{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;padding:5px 11px;border-radius:4px;margin-left:2px;
  font-family:Arial Black, Arial, sans-serif;font-size:13px;font-weight:900;
  background:#e8267d;color:#fff;letter-spacing:.02em;
}
.kbonus.rolling{background:#ff59a3;transform:scale(1.05)}
.kbonus.big{
  background:linear-gradient(135deg,#f4b525,#ffdb66);color:#122a38;
  box-shadow:0 0 16px rgba(245,183,46,.55);
}
.kgamebox{
  display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
  padding:3px 11px;border-radius:4px;background:#0d5fbe;color:#fff;
}
.kgamebox small{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.kgamebox b{font-size:15px;font-weight:900}
.kclock{margin-left:auto}

@media (max-width:1000px){
  .kspine{flex:0 0 20px}
  .kspine span{font-size:9px}
  .kbrand{font-size:16px}
}

/* A floor, so the board is never sized from nothing.
   `flex:1 1 auto` inside a stage whose own height is not definite resolves to
   the content height — and the content is a grid being sized by the box. That
   circle is what collapsed it. A minimum breaks the circle. */

/* the stage no longer needs to be tall for the board to exist */




@media (max-width:1000px){
  
  
  
}

/* =============================================================================
 * THE CABINET
 *
 * A slot machine on a casino floor is a piece of furniture: a lit box with a
 * metal bezel, glass over the reels, and light bleeding between them. On screen
 * the difference between that and a browser game is almost entirely depth —
 * whether the reels look set INTO something, or drawn onto a page.
 *
 * Nothing below changes a mechanic. It is bezel, glass and light.
 * ========================================================================== */

/* ---- the bezel: brushed metal with a machined inner edge ---------------- */
.reels{
  position:relative;
  padding:0;
  border-radius:8px;
  background:#050203;
  box-shadow:
    /* the machined lip the glass sits in */
    inset 0 0 0 1px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(255,220,160,.10),
    inset 0 3px 12px rgba(0,0,0,.85),
    /* the cabinet's own shadow on the page */
    0 18px 44px rgba(0,0,0,.62),
    0 2px 0 rgba(255,225,170,.07);
}
/* the bezel proper, drawn outside the reels */
.reels::before{
  content:'';position:absolute;inset:-9px;border-radius:13px;z-index:-1;
  background:
    linear-gradient(180deg,
      #6b5220 0%, #3d2c0f 16%, #251906 42%,
      #1a1104 58%, #3a2a0e 84%, #7a5f28 100%),
    #2a1d08;
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,.34),
    inset 0 -1px 0 rgba(255,232,180,.18),
    0 22px 50px rgba(0,0,0,.6);
}
/* brushed grain across the bezel, very faint */
.reels::after{
  content:'';position:absolute;inset:-9px;border-radius:13px;z-index:-1;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  opacity:.7;
}

/* ---- light between the reels ------------------------------------------- */
.reel + .reel{
  box-shadow:
    inset 1px 0 0 rgba(0,0,0,.85),
    inset 2px 0 0 rgba(255,222,164,.09),
    inset 3px 0 9px rgba(0,0,0,.5);
}

/* ---- the glass ---------------------------------------------------------
   One curved reflection across the whole window rather than one per reel, so
   it reads as a single sheet of glass in front of five reels — which is what
   it is. A per-reel highlight is the giveaway that there is no glass at all. */
.reels .glass{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:6px;
  background:
    /* the curved sweep near the top */
    radial-gradient(140% 62% at 50% -22%,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 38%,
      transparent 62%),
    /* a single diagonal streak */
    linear-gradient(104deg,
      transparent 34%,
      rgba(255,255,255,.055) 44%,
      rgba(255,255,255,.09) 47%,
      rgba(255,255,255,.03) 51%,
      transparent 60%),
    /* the window darkens at its edges, as glass in a recess does */
    radial-gradient(120% 120% at 50% 50%,
      transparent 52%, rgba(0,0,0,.42) 100%);
}

/* ---- the payline window ------------------------------------------------
   The middle row is where the eye goes, so it gets a touch more light. */
.reels .payband{
  position:absolute;left:0;right:0;top:33.333%;height:33.333%;
  z-index:4;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.10),
    inset 0 -1px 0 rgba(255,225,170,.10);
  background:linear-gradient(180deg,
    rgba(255,225,170,.035), transparent 40%, rgba(255,225,170,.035));
}

/* ---- symbols sit on the reel rather than in it -------------------------- */
.sym{
  background-size:92% 92%;
  background-repeat:no-repeat;
  background-position:center;
}
.sym.blur{filter:blur(3px) brightness(.82) saturate(.8)}

/* a win reads as the symbol lighting up, not as a box drawn around it */
.sym.on::after{
  inset:6%;border-radius:50%;
  border:2px solid rgba(255,233,174,.9);
  box-shadow:
    0 0 26px rgba(255,215,120,.9),
    inset 0 0 26px rgba(255,215,120,.45);
}
.sym.on{
  filter:brightness(1.18) saturate(1.12)
         drop-shadow(0 0 14px rgba(255,206,110,.55));
}

/* =============================================================================
 * THE REST OF THE MACHINE
 *
 * The cabinet is only half of it. What surrounds the reels — the header, the
 * meters, the readouts and the button deck — is what a player looks at between
 * spins, and a flat toolbar there undoes a good reel window.
 * ========================================================================== */

/* ---- the header: a lit marquee, not a coloured bar ---------------------- */
.machinehead{
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 -1px 0 rgba(255,225,170,.22),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 22px rgba(0,0,0,.5);
}
/* a slow sheen across the marquee, the way light moves over a lit sign */
.machinehead::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%, rgba(255,255,255,.09) 47%, transparent 57%);
  transform:translateX(-60%);
  animation:marquee 9s ease-in-out infinite;
}
@keyframes marquee{
  0%,72%{transform:translateX(-60%)}
  100%{transform:translateX(60%)}
}
.machinehead h2,.machinetitle{
  text-shadow:
    0 2px 0 rgba(0,0,0,.5),
    0 0 26px rgba(255,205,110,.4);
}

/* ---- the meters read as lit displays ----------------------------------- */
.jpchip,.meter,.jp-mini{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
  border:1px solid rgba(255,225,170,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -6px 12px rgba(0,0,0,.5),
    0 0 16px rgba(255,190,90,.14);
  text-shadow:0 0 12px rgba(255,205,110,.6);
}

/* ---- the readout strip: an inset panel, lit from within ---------------- */
.readout,.pokreadout{
  background:linear-gradient(180deg, rgba(3,1,2,.92), rgba(10,4,7,.86));
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.8),
    inset 0 -1px 0 rgba(255,225,170,.10);
}
.readout dd,.readout .val{
  font-family:'DM Mono',monospace;
  text-shadow:0 0 14px rgba(255,205,110,.45);
}

/* ---- the button deck --------------------------------------------------- */
.betrow,.deck{
  padding:12px 14px;border-radius:10px;
  background:linear-gradient(180deg, rgba(38,20,10,.5), rgba(8,3,5,.6));
  box-shadow:inset 0 1px 0 rgba(255,225,170,.10), 0 6px 20px rgba(0,0,0,.42);
}
.betbtn{
  border:1px solid rgba(255,225,170,.26);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.4);
  transition:transform .1s, box-shadow .12s, border-color .12s;
}
.betbtn:hover{transform:translateY(-1px);border-color:var(--amber)}
.betbtn.on{
  background:linear-gradient(180deg, rgba(255,205,110,.4), rgba(120,72,10,.5));
  border-color:var(--amber);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(245,185,66,.35);
}

/* the play button is the one thing on the machine you press */
#btnSpin{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f6d488 0%,#e0a53a 34%,#a8700f 62%,#f0c46a 100%);
  color:#2a1503;
  border:1px solid #ffe9ae;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -4px 10px rgba(90,50,0,.5),
    0 6px 20px rgba(0,0,0,.5),
    0 0 26px rgba(245,185,66,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  transition:transform .1s, box-shadow .14s, filter .14s;
}
#btnSpin:hover:not(:disabled){
  filter:brightness(1.07);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -4px 10px rgba(90,50,0,.5),
    0 8px 26px rgba(0,0,0,.55),
    0 0 38px rgba(245,185,66,.5);
}
#btnSpin:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:
    inset 0 3px 8px rgba(90,50,0,.5),
    0 2px 8px rgba(0,0,0,.5);
}
#btnSpin:disabled{filter:grayscale(.5) brightness(.7)}

@media (prefers-reduced-motion: reduce){
  .machinehead::after{animation:none}
}

/* the game just gone, one line under the header */
.klast{
  display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow:hidden;
  padding:5px 2px 2px;min-height:26px;
}
.klast.empty{display:none}
.kl-label{
  flex:0 0 auto;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(219,231,239,.42);margin-right:5px;white-space:nowrap;
}
.kl-ball{
  flex:0 1 auto;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:4px;
  font-size:10px;font-weight:800;color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.kl-ball.k-red{background:var(--k-red)} .kl-ball.k-blue{background:var(--k-blue)}
.kl-ball.k-green{background:var(--k-green)} .kl-ball.k-gold{background:var(--k-gold)}
.kl-ball.k-grey{background:#7a3fb0}
.kl-ball.hit{box-shadow:0 0 0 2px #f5b72e}
.kl-res{
  flex:0 0 auto;margin-left:6px;padding:2px 8px;border-radius:9px;
  font-size:9px;font-weight:900;letter-spacing:.1em;
  background:rgba(255,255,255,.08);color:rgba(219,231,239,.7);
}
.kl-res.k-heads{background:var(--k-red);color:#fff}
.kl-res.k-tails{background:var(--k-blue);color:#fff}
.kl-res.k-evens{background:var(--k-gold);color:#122a38}
@media (max-width:1000px){
  .kl-ball{width:17px;height:17px;font-size:9px}
  .kl-label{display:none}
}


/* =============================================================================
 * THE KENO BOARD, SIZED ONCE
 *
 * This took five attempts because each time I ADDED a rule instead of fixing
 * the wrong one, and ended up with five things all trying to decide the size:
 * a ratio on the screen, a ratio on the board, a min-height on the wrapper, a
 * width cap, and `1fr` rows. They contradicted each other, so which one won
 * depended on the window — hence gaps one day and a postage stamp the next.
 *
 * There is now ONE chain, and it flows in one direction only:
 *
 *   .kboardwrap   is as wide as the stage            (a definite width)
 *   .kscreen      is min(660px, all of it)           (derived from the wrap)
 *   .kspine       is a fixed 26px                    (fixed)
 *   .kboard       takes whatever is left             (derived from the screen)
 *   .kcell        is square                          (derived from the column)
 *   the height    is whatever eight square rows come to
 *
 * Nothing below asks its own parent how big it is, so there is no circularity
 * and nothing to contradict. If the board is ever the wrong size again, the
 * number to change is the 660px — and only that.
 *
 * The one extra term is `132vh`: on a short window eight rows of squares would
 * be taller than the screen, so the width is also capped by the height it would
 * produce. 10/8 of 105vh, near enough.
 * ========================================================================== */
.kboardwrap{
  width:100%;
  display:flex;justify-content:center;align-items:flex-start;
  padding:4px 0 8px;
  min-height:0;
}
.kscreen{
  /* Bigger, and measured against the VIEWPORT rather than the column.
   *
     `100%` meant the width depended on the column, whose width depends on
     whether a vertical scrollbar exists, which depends on how tall the board
     is — so the board changed its own input. That loop is the slow pulsing:
     grow, scrollbar appears, shrink, scrollbar goes, grow. Sizing against vw
     and vh breaks it, because neither of those is affected by anything the
     board does.
     
     Which term binds depends on the window. On a wide screen at a normal
     height it is the vh one, so that is the number to raise when the board
     wants to be bigger — raising the pixel cap alone does nothing.
     
     95vh against a board whose height is about 0.8 of its width leaves the
     header, the last-game strip and a margin comfortably clear. */
  width:min(1040px, 64vw, 95vh);
  display:flex;align-items:stretch;
  border-radius:10px;overflow:hidden;
  background:#fff;
  box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.kspine{
  flex:0 0 26px;display:flex;flex-direction:column;
}
.kboard{
  flex:1 1 auto;min-width:0;
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  grid-auto-rows:auto;
  gap:4px;
  padding:6px;
  background:#fff;
}
.kcell{
  aspect-ratio:1;                  /* the only thing that sets the height */
  min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  background:#dae3ec;
  overflow:hidden;
}
@media (max-width:1000px){
  .kscreen{width:min(760px, 92vw, 78vh)}
  .kspine{flex:0 0 20px}
}

/* the bonus, as something you choose */
.kbonus-opt{
  display:block;padding:9px 12px;margin:8px 0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  transition:border-color .15s, background .15s;
}
.kbonus-opt:hover{border-color:rgba(232,38,125,.5)}
.kbonus-opt.on{
  background:rgba(232,38,125,.13);
  border-color:#e8267d;
}
.kbonus-opt input{margin-right:8px;accent-color:#e8267d;vertical-align:middle}
.kbo-main{font-size:13px;color:var(--bone);font-weight:600}
.kbo-main b{color:#ff6fae;font-family:'DM Mono',monospace}
.kbo-sub{
  display:block;margin-top:3px;margin-left:24px;
  font-size:10.5px;color:rgba(219,231,239,.45);
}
.kt-bonus{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:8px;
  font-size:9px;font-weight:900;letter-spacing:.1em;
  background:#e8267d;color:#fff;vertical-align:middle;
}

/* =============================================================================
 * THE WAGER, LEGIBLE
 *
 * The amount on the felt was `handmeta` at 60% opacity: thin grey text, the
 * same weight as a caption, for the single number that matters most to the
 * person who put it there.
 *
 * It is now a brass chip-plate. Fixed height and a minimum width, so a seat
 * does not change size as the number goes from $5 to $2,500 mid-round — a
 * table that reflows while a hand is being dealt is worse than a quiet number.
 * ========================================================================== */
.seatwager{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;height:22px;padding:0 9px;margin-top:4px;
  border-radius:11px;
  font-family:'DM Mono',monospace;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;
  color:#ffe9b8;
  background:linear-gradient(180deg,rgba(245,185,66,.26),rgba(120,80,10,.34));
  border:1px solid rgba(245,185,66,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 2px 6px rgba(0,0,0,.4);
  white-space:nowrap;
}
.handmeta .wager{
  color:#ffe9b8;font-weight:700;
  font-size:11.5px;
}
.handmeta.nobet{
  color:rgba(242,234,222,.42);font-style:italic;
  /* the same height a wager plate would take, so the seat does not jump when
     somebody finally bets */
  min-height:22px;display:flex;align-items:center;margin-top:4px;
}
/* the seat keeps its shape whatever is in it */
.seat{min-height:0}
.seat .seatwager,.seat .handmeta.nobet{flex:0 0 auto}

@media (max-width:1400px){
  .seatwager{min-width:56px;height:21px;font-size:12px}
  .handmeta .wager{font-size:12px}
}

/* =============================================================================
 * THE SIDE PANELS SCROLL THEMSELVES
 *
 * "Last games" grows by one row every ninety seconds and never stops, so after
 * half an hour it was taller than the screen and the whole PAGE had to be
 * scrolled to see the board — a list of finished games pushing the live one out
 * of view. Tickets do the same to anybody who buys a few.
 *
 * Each panel is bounded and scrolls inside itself. The bound is in `vh` rather
 * than pixels, so a resized window changes what fits without changing anything
 * about the layout: no reflow, nothing moves, the board stays exactly where it
 * was. `min()` with a pixel cap keeps it sensible on a very tall screen.
 * ========================================================================== */
.kside{
  /* the column never outgrows the window, whatever is in it */
  max-height:calc(100vh - 150px);
}
#kenoTickets{
  max-height:min(34vh, 300px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:2px;
}
#kenoHistory{
  max-height:min(38vh, 340px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:2px;
}
/* the pane holding a scroller must not stretch to its content */
.kside .kpane{flex:0 1 auto;min-height:0}

/* a scrollbar that belongs to this screen rather than the browser's default */
#kenoTickets::-webkit-scrollbar,
#kenoHistory::-webkit-scrollbar{width:6px}
#kenoTickets::-webkit-scrollbar-track,
#kenoHistory::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border-radius:3px}
#kenoTickets::-webkit-scrollbar-thumb,
#kenoHistory::-webkit-scrollbar-thumb{
  background:rgba(95,200,245,.35);border-radius:3px;
}
#kenoTickets::-webkit-scrollbar-thumb:hover,
#kenoHistory::-webkit-scrollbar-thumb:hover{background:rgba(95,200,245,.6)}
#kenoTickets,#kenoHistory{
  scrollbar-width:thin;scrollbar-color:rgba(95,200,245,.35) rgba(0,0,0,.25);
}

@media (max-width:1000px){
  .kside{max-height:none}
  #kenoTickets{max-height:min(30vh, 240px)}
  #kenoHistory{max-height:min(32vh, 260px)}
}

/* =============================================================================
 * A SEAT IS A SEAT, WHETHER OR NOT ANYBODY IS IN IT
 *
 * The seat had `min-height:150px` and then grew to fit whatever was in it. So
 * an occupied seat is taller than an empty one — and because they share a grid
 * ROW, sitting down stretched every seat beside you. The table changed shape as
 * people joined, and the action bar, positioned relative to all that, drifted
 * over things it should not touch.
 *
 * The same fault as the Keno board: the CONTENT was deciding the box. So the
 * box decides now. Every seat is a square, always, and what is inside fits or
 * scrolls — it never pushes.
 * ========================================================================== */
.seat{
  aspect-ratio:1 / 1;
  min-height:0 !important;
  height:auto;
  overflow:hidden;
  /* content is laid out from the top and allowed to shrink */
  justify-content:flex-start;
}
/* every child must be willing to give ground rather than force the box open */
.seat > *{min-height:0;flex:0 0 auto}
/* the hands take whatever is left, and scroll if a split needs more */
.seat .hands,
.seat .handwrap{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
}
.seat .hands::-webkit-scrollbar,
.seat .handwrap::-webkit-scrollbar{width:0;height:0}

/* an empty seat is the same square, centred */
.seat.empty{
  align-items:center;justify-content:center;
  aspect-ratio:1 / 1;
}

/* cards shrink to fit rather than forcing the seat wider */
.seat .card{flex:0 1 auto;min-width:0}
.seat .hand{min-width:0}

/* the action bar sits below the table, not on top of a seat that moved */
.bjactions,.actionbar{position:relative;z-index:3}

@media (max-width:1000px){
  /* three across: a square is still a square */
  .seat{aspect-ratio:1 / 1}
}
@media (max-width:620px){
  .seat{aspect-ratio:1 / 1}
}

/* =============================================================================
 * A WINNING SYMBOL, MARKED CLEANLY
 *
 * The highlight was a `drop-shadow`, which bleeds OUTSIDE the tile it belongs
 * to — over the symbol above and below it. On a three-row window that reads as
 * a rectangle cutting through rows rather than as one symbol being picked out.
 *
 * A frame INSIDE the tile cannot do that. It sits exactly on the boundary the
 * symbol already has, so a lit symbol is unmistakably one cell.
 * ========================================================================== */
.sym.on{
  filter:brightness(1.2) saturate(1.14);
  position:relative;
  z-index:2;
  /* inset, so it can never touch the row above or below */
  box-shadow:
    inset 0 0 0 2px rgba(255,210,122,.95),
    inset 0 0 18px rgba(255,206,110,.4);
  border-radius:6px;
  animation:symwin 1.15s ease-in-out infinite;
}
@keyframes symwin{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(255,210,122,.95),
                     inset 0 0 18px rgba(255,206,110,.34)}
  50%    {box-shadow:inset 0 0 0 2px rgba(255,236,180,1),
                     inset 0 0 26px rgba(255,206,110,.6)}
}
.sym.scatterhit{
  filter:brightness(1.22) saturate(1.2);
  position:relative;z-index:2;border-radius:6px;
  box-shadow:
    inset 0 0 0 2px rgba(150,220,255,.95),
    inset 0 0 20px rgba(90,190,255,.45);
  animation:none;
}
/* the payline sits above the symbols but below the panels */
#reels svg,.reelsvg{pointer-events:none;z-index:3}

@media (prefers-reduced-motion: reduce){
  .sym.on{animation:none}
}

/* =============================================================================
 * THE CABINET, LESS LIKE A FLASH GAME
 *
 * The reels sat on a flat panel with square corners. A real machine has a glass
 * screen set into a lit surround, and almost all of the difference is depth:
 * an inner shadow at the top of the window, a rim of brass, and reels that look
 * recessed rather than printed on.
 * ========================================================================== */
#reels,.reels{
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), transparent 12%),
    linear-gradient(0deg, rgba(0,0,0,.4), transparent 14%),
    linear-gradient(180deg,#0b0d14,#05070c);
  box-shadow:
    inset 0 14px 26px rgba(0,0,0,.6),
    inset 0 -10px 22px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(201,146,46,.35),
    0 10px 34px rgba(0,0,0,.6);
}
/* each reel is a strip of glass, not a column of boxes */
.reel{
  border-radius:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.28));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.sym{
  border-radius:6px;
  transition:filter .18s, box-shadow .18s;
}
/* a faint sheen down the glass, so the window reads as covered */
#reels::after,.reels::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:linear-gradient(104deg,
    rgba(255,255,255,.055) 0 18%, transparent 34%,
    transparent 66%, rgba(255,255,255,.03) 84%, transparent);
  z-index:4;
}
#reels,.reels{position:relative}