/* House-banked tables: 3-Card Poker, Blackjack, Roulette, Craps.
   Everything inside #hbox is sized in em off one font-size that house.js fits to the free space,
   so each felt scales as a single picture (like the poker table). */

.house-actions { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.house-room .hbox { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
.house-room .hfelt, .house-room .hseats.arc { grid-area: 1 / 1; width: var(--fw, 100em); height: var(--aspect, 62em); position: relative; }
.house-room .hseats.arc { pointer-events: none; }
.house-room .hseats.arc > * { pointer-events: auto; }
.g-roulette .hbox, .g-craps .hbox { grid-template-rows: minmax(0, 1fr) auto; }
.g-roulette .hseats.rail, .g-craps .hseats.rail { grid-area: 2 / 1; }

/* felt cloth + brass rail, recoloured by an equipped felt */
.felt-cloth, .half-moon, .rl-wrap, .cr-wrap {
  --fa: var(--felt-a, #1b3d63); --fb: var(--felt-b, #0c1c30);
  background: radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--fa) 100%, #fff 6%), var(--fa) 42%, var(--fb) 100%);
  box-shadow: inset 0 0 0 .35em #0a121c, inset 0 0 0 .7em #b88a2a, inset 0 0 0 .85em #6d4f14, inset 0 1.4em 4em rgba(0,0,0,.45), 0 1.6em 3em rgba(0,0,0,.55);
}
.half-moon::after, .rl-wrap::after, .cr-wrap::after { /* a faint woven texture so the felt doesn't read as flat colour */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 1px, transparent 1px 4px);
}

/* Tally, the house dealer: a brass plaque until the portrait lands */
.tally { position: absolute; left: 50%; top: 1.6em; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: .1em; padding: .45em 1.6em .5em;
  border-radius: .3em; background: linear-gradient(180deg, #f5d98a, #b9862a 55%, #8a5f17); color: #2a1a04; box-shadow: 0 .2em .6em rgba(0,0,0,.5), inset 0 .08em 0 rgba(255,255,255,.55); }
.tally b { font: 900 1.7em/1 var(--display); letter-spacing: .22em; text-transform: uppercase; }
.tally span { font: 700 .8em/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }

/* ───────── cards ───────── */
.hcard { position: relative; width: 4.4em; height: 6.2em; border-radius: .45em; background: linear-gradient(160deg, #fff, #eef1f4); color: #111; flex: none;
  box-shadow: 0 .15em .4em rgba(0,0,0,.45), inset 0 0 0 .06em rgba(0,0,0,.15); font-family: var(--display); }
.hcard.red { color: #c8333b; }
.hcard .r { position: absolute; left: .35em; top: .2em; font: 800 1.55em/1 var(--display); }
.hcard .s { position: absolute; left: .42em; top: 1.55em; font-size: 1em; }
.hcard .big { position: absolute; right: .3em; bottom: .1em; font-size: 2.6em; line-height: 1; opacity: .9; }
.hcard.back { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.15) 0 18%, transparent 19%), repeating-linear-gradient(45deg, var(--cards-a, #2d5da8) 0 .35em, var(--cards-b, #17325d) .35em .7em);
  box-shadow: 0 .15em .4em rgba(0,0,0,.45), inset 0 0 0 .3em #fff, inset 0 0 0 .38em rgba(0,0,0,.2); }
.hcard.deal { animation: hdeal .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hdeal { from { transform: translate(0, -14em) rotate(-24deg) scale(.6); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
.hand-row { display: flex; gap: .35em; justify-content: center; min-height: 6.2em; }
.hand-row.fan { gap: 0; }
.hand-row.fan .hcard + .hcard { margin-left: -2.4em; }
.hand-row.dealer .hcard { width: 5em; height: 7em; }

/* ───────── chips ───────── */
.chip-x { --a: #e9e6dd; --b: #b9b3a3; --t: #1b1b1b; position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: radial-gradient(circle, var(--a) 0 54%, transparent 55%), repeating-conic-gradient(var(--a) 0 15deg, var(--b) 15deg 30deg);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 0 0 7px rgba(255,255,255,.12), 0 3px 6px rgba(0,0,0,.5); color: var(--t); transition: transform .18s, box-shadow .2s; }
.chip-x b { font: 800 13px/1 var(--num); letter-spacing: -.02em; }
.chip-x.c-pearl { --a: #f1ede4; --b: #c9c2b2; --t: #2a2620; }
.chip-x.c-seal { --a: #2d5da8; --b: #e9eef7; --t: #fff; }
.chip-x.c-green { --a: #1f7a4d; --b: #e7efe9; --t: #fff; }
.chip-x.c-onyx { --a: #17191c; --b: #8c96a2; --t: #f3d27a; }
.chip-x.c-ruby { --a: #a91f2b; --b: #f2dfe0; --t: #fff; }
.chip-x.c-bullion { --a: #d4a537; --b: #7b5714; --t: #241703; }
.chip-x.c-royal { --a: #5b2a91; --b: #e3d4f5; --t: #fff; }
.chip-x.c-vault { --a: #3b4148; --b: #c3ccd4; --t: #f3d27a; }
.fx-chips .chip-x { --a: var(--chips-a, var(--a)); }
.tray { display: flex; gap: 8px; align-items: center; }
.tray .chip-x:hover { transform: translateY(-3px); }
.tray .chip-x.on { transform: translateY(-6px) scale(1.08); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 0 0 3px var(--gold-hi), 0 0 18px rgba(243,210,122,.6), 0 6px 10px rgba(0,0,0,.5); }
.chipfly-h { position: fixed; z-index: 90; width: 28px; height: 28px; pointer-events: none; transition: left .38s cubic-bezier(.3,.7,.3,1), top .38s cubic-bezier(.3,.7,.3,1), opacity .38s; }

/* a stack on the felt: chips piled up, the amount under it */
.cstack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); width: 2.8em; height: 2.8em; pointer-events: none; z-index: 4; animation: drop .25s ease-out; }
.cstack .chip-x { position: absolute; left: 0; top: calc(var(--k) * -.32em); width: 2.8em; height: 2.8em; box-shadow: inset 0 0 0 .2em rgba(0,0,0,.25), 0 .14em .2em rgba(0,0,0,.55); cursor: inherit; }
.cstack b { position: absolute; left: 50%; top: 3em; transform: translateX(-50%); padding: .12em .45em; border-radius: .3em; background: rgba(5,9,14,.82); color: var(--gold-hi); font: 700 1em/1.1 var(--num); white-space: nowrap; }
.cstack.theirs { opacity: .72; transform: translate(-50%, -62%) scale(.8); }
@keyframes drop { from { transform: translate(-50%, -120%) scale(1.25); opacity: 0; } }
.others { position: absolute; right: .2em; top: .2em; z-index: 3; padding: 0 .35em; border-radius: 1em; background: rgba(255,255,255,.14); font-size: .95em; color: var(--silver); pointer-events: none; }

/* ───────── seats ───────── */
.hseat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .3em; z-index: 6; }
.hseat .av { position: relative; width: 5.2em; height: 5.2em; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 .22em #0b1420, 0 0 0 .34em rgba(195,204,212,.4), 0 .4em 1em rgba(0,0,0,.5); }
.hseat .av .face { width: 100%; height: 100%; }
.hseat.you .av { box-shadow: 0 0 0 .22em #0b1420, 0 0 0 .4em var(--gold), 0 0 1.4em rgba(212,165,55,.5); }
.hseat.shooter .av { animation: shooter 1.6s ease-in-out infinite; }
@keyframes shooter { 50% { box-shadow: 0 0 0 .22em #0b1420, 0 0 0 .4em var(--seal-hi), 0 0 1.8em rgba(111,168,255,.7); } }
.hseat .plate { display: grid; justify-items: center; padding: .25em .8em; border-radius: .35em; background: rgba(6,10,16,.86); border: 1px solid var(--rule); min-width: 8em; }
.hseat .plate .n { font: 700 1.15em/1.15 var(--ui); max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hseat .plate .s { font: 700 1.1em/1.1 var(--num); color: var(--gold-hi); }
.hseat.out { opacity: .55; }
.hseat .crown { position: absolute; top: -.7em; left: 50%; transform: translateX(-50%); color: var(--gold-hi); font-size: 1.3em; }
.hseat .ready-tag, .hseat .dice-tag { position: absolute; bottom: -.3em; right: -.6em; padding: .1em .45em; border-radius: 1em; background: var(--seal); font: 700 .85em/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.hseat .dice-tag { background: none; font-size: 1.6em; bottom: -.2em; right: -.5em; }
.open-seat { width: 5.2em; height: 5.2em; border-radius: 50%; border: .14em dashed rgba(195,204,212,.4); background: rgba(6,10,16,.45); display: grid; place-items: center; cursor: pointer; color: var(--silver); font: 800 1.2em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; transition: border-color .2s, color .2s, transform .2s; }
.open-seat span { font-size: .9em; }
button.open-seat:hover { border-color: var(--gold-hi); color: var(--paper); transform: scale(1.06); }
.open-seat.dim { opacity: .3; cursor: default; }
.react { position: absolute; top: -2.2em; left: 50%; transform: translateX(-50%); padding: .3em .7em; border-radius: 1em; background: var(--paper); color: var(--ink); font: 700 1.2em/1 var(--ui); white-space: nowrap; animation: pop .3s ease-out, fadeup 2.6s ease-in forwards; z-index: 20; }
@keyframes fadeup { 80% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -1.4em); } }

/* the rail (Roulette / Craps): a row of compact plates under the layout, px-sized so it never fights the felt for room */
.hseats.rail { display: flex; flex-wrap: wrap; padding: 10px 0 0; min-width: 0; max-width: 100%; gap: 10px; justify-content: center; align-items: center; font-size: 10px; width: 100%; }
.hseats.rail .hseat { position: relative; transform: none; grid-template-columns: auto auto; align-items: center; gap: 8px; }
.hseats.rail .av, .hseats.rail .open-seat { width: 44px; height: 44px; font-size: 10px; }
.hseats.rail .plate { justify-items: start; min-width: 0; font-size: 11px; }

/* ═════════ 3-Card Poker + Blackjack: the half-moon ═════════ */
.house-room .half-moon { position: absolute; inset: 0; border-radius: 0 0 50% 50% / 0 0 92% 92%; overflow: visible; }
.dealer-zone { position: absolute; left: 50%; top: 5.6em; transform: translateX(-50%); display: grid; justify-items: center; gap: .6em; z-index: 2; }
.dealer-note { font: 700 1.3em/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: rgba(243,210,122,.55); transition: color .3s; }
.dealer-note.on { color: var(--gold-hi); text-shadow: 0 0 .8em rgba(212,165,55,.5); }
.dealer-note b { color: #ff8a8a; }
.felt-print { position: absolute; left: 50%; top: 28em; transform: translateX(-50%); width: 64em; display: grid; justify-items: center; gap: .5em; pointer-events: none; }
.felt-print span { font: 700 1.25em/1 var(--display); letter-spacing: .32em; color: rgba(243,210,122,.42); white-space: nowrap; }
.felt-print span:first-child { font-size: 1.6em; color: rgba(243,210,122,.6); }
.shoe { position: absolute; right: -15em; top: .3em; width: 8em; height: 6em; border-radius: .4em .4em .6em .6em; background: linear-gradient(180deg, #2a2f35, #121417); box-shadow: inset 0 0 0 .2em #4a525b, 0 .3em .8em rgba(0,0,0,.6); overflow: hidden; }
.shoe i { position: absolute; left: .6em; right: .6em; bottom: .6em; height: calc(var(--left, 1) * 4.4em); background: repeating-linear-gradient(0deg, #eef0ee 0 .12em, #c8ccd0 .12em .24em); border-radius: .15em; transition: height .6s; }
.shoe.shuffle { animation: shake .3s 8; }
@keyframes shake { 50% { transform: translateX(.3em) rotate(2deg); } }

.spots { position: absolute; inset: 0; pointer-events: none; }
.sspot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .4em; width: 13em; pointer-events: none; transition: filter .3s; }
.sspot.empty { opacity: .25; }
.sspot.mine { z-index: 5; }
.sspot.won { filter: drop-shadow(0 0 1em rgba(243,210,122,.5)); }
.sspot.lost .hand-row { opacity: .5; }
.bcs { display: flex; gap: .3em; align-items: end; justify-content: center; pointer-events: auto; }
.bc { position: relative; width: 4.4em; height: 4.4em; border-radius: 50%; border: .14em solid rgba(243,210,122,.55); background: rgba(0,0,0,.14); color: rgba(243,210,122,.8); display: grid; place-items: center; padding: 0; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.bc em { font: 700 .82em/1 var(--display); letter-spacing: .08em; text-transform: uppercase; font-style: normal; text-align: center; max-width: 4.6em; }
.bc.main, .sspot:not(.bj) .bc:nth-child(2) { width: 5.4em; height: 5.4em; border-width: .18em; }
.bc.side { width: 3.8em; height: 3.8em; border-style: dashed; }
.bc.play { border-color: rgba(195,204,212,.4); color: rgba(195,204,212,.6); cursor: default; }
.sspot.mine .bc[data-spot]:hover { border-color: var(--gold-hi); background: rgba(243,210,122,.12); transform: scale(1.06); }
.sspot:not(.mine) .bc { cursor: default; }
.tagline { font: 700 1.05em/1.2 var(--num); padding: .15em .55em; border-radius: .3em; background: rgba(5,9,14,.82); color: var(--silver); white-space: nowrap; }
.tagline.win { color: var(--gold-hi); }
.tagline.lose { color: #ff9a9a; }
.tagline.fold { color: var(--slate); font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; }
.bj-hands { display: flex; gap: .8em; justify-content: center; min-height: 6.2em; }
.bj-hand { display: grid; justify-items: center; gap: .25em; transition: transform .25s; }
.bj-hand.turn { transform: translateY(-.6em); }
.bj-hand.turn .hand-row { filter: drop-shadow(0 0 .7em rgba(111,168,255,.8)); }
.bj-hand.lost { opacity: .55; }
.bj-hand .tot { font: 800 1.15em/1 var(--num); padding: .2em .5em; border-radius: 1em; background: rgba(5,9,14,.85); color: var(--paper); }
.bj-hand.won .tot { color: var(--gold-hi); }
.act.hinted { outline: 3px solid var(--seal-hi); outline-offset: 3px; }
.linkish { background: none; border: 0; padding: 0; color: var(--seal-hi); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

/* ═════════ Roulette ═════════ */

.rl-wrap { position: absolute; inset: 0; border-radius: 2.4em; display: grid; grid-template-columns: 31em minmax(0, 1fr); align-items: center; gap: 1.6em; padding: 2em 2.6em 2em 1.6em; }
.wheel-zone { position: relative; display: grid; justify-items: center; gap: 1em; padding-top: 3.6em; }
.wheel-zone .tally { top: -.6em; }
.wheel { position: relative; width: 27em; height: 27em; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 63%, #3a2610 63.5% 67%, transparent 67.5%), conic-gradient(from 0deg, #6b4512, #c8962f, #6b4512, #c8962f, #6b4512);
  box-shadow: 0 0 0 .5em #2a1a08, 0 0 0 .8em #b88a2a, 0 1.4em 3em rgba(0,0,0,.6); }
.wheel-rot { position: absolute; inset: 1.4em; border-radius: 50%; background: #0d0f12; }
.wheel .pk { position: absolute; left: 50%; top: 0; width: 2.3em; height: 50%; margin-left: -1.15em; transform-origin: 50% 100%; transform: rotate(var(--a)); clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); }
.wheel .pk::before { content: ""; position: absolute; inset: 0 0 62% 0; background: #15171a; }
.wheel .pk.red::before { background: #b1232d; }
.wheel .pk.green::before { background: #1f7a4d; }
.wheel .pk b { position: absolute; top: .35em; left: 0; right: 0; text-align: center; font: 700 1em/1 var(--num); color: #fff; }
.hub { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f5d98a, #a77a22 55%, #4e3409); box-shadow: 0 .3em 1em rgba(0,0,0,.6); }
.hub::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #c3ccd4 60%, #6d7680); }
.wheel-glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(60% 40% at 35% 25%, rgba(255,255,255,.16), transparent 70%); }
/* the ball rides the rim, then drops to the top pocket (the wheel already turned the winning number under it) */
.ball { position: absolute; left: 50%; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9cfd6 60%, #7c858f); box-shadow: 0 .1em .25em rgba(0,0,0,.7);
  transform: rotate(0deg) translateY(-11.6em); z-index: 4; }
.ball.spin { animation: ballspin var(--ms, 5s) cubic-bezier(.15,.55,.2,1) forwards; }
.ball.land { transform: rotate(0deg) translateY(-11.3em); animation: settle .5s ease-out; }
@keyframes ballspin { from { transform: rotate(0deg) translateY(-12.4em); } 85% { transform: rotate(-1980deg) translateY(-12.2em); } to { transform: rotate(-2160deg) translateY(-11.3em); } }
@keyframes settle { 30% { transform: rotate(6deg) translateY(-11.6em); } 60% { transform: rotate(-3deg) translateY(-11.2em); } }
.rl-result { min-height: 4.4em; display: grid; justify-items: center; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s cubic-bezier(.2,1.6,.4,1); }
.rl-result.on { opacity: 1; transform: none; }
.rl-result b { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; font-size: 2.2em; background: #15171a; box-shadow: 0 0 0 .1em var(--gold-hi), 0 0 1.4em rgba(243,210,122,.5); }
.rl-result.red b { background: #b1232d; }
.rl-result.green b { background: #1f7a4d; }
.rl-result span { margin-top: .3em; font: 700 1.1em/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.rl-hist, .hc { display: flex; flex-wrap: wrap; gap: .3em; justify-content: center; max-width: 28em; }
.rl-hist i, .hc i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; font: 700 .95em/1 var(--num); font-style: normal; background: #15171a; color: #fff; }
.rl-hist i:first-child { box-shadow: 0 0 0 .14em var(--gold-hi); }
.rl-hist i.red, .hc i.red { background: #b1232d; }
.rl-hist i.green, .hc i.green { background: #1f7a4d; }
.hc { justify-content: start; align-items: center; font-size: 12px; margin: 4px 0; }
.hc span { min-width: 34px; color: var(--slate); font: 700 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }

.rl-board { display: grid; gap: 1.2em; align-content: center; }
.rl-board .grid { display: grid; grid-template-columns: 4.6em repeat(12, minmax(0, 1fr)) 4.6em; grid-template-rows: repeat(3, 4.4em) 3.6em 3.6em; border: .14em solid rgba(243,210,122,.7); position: relative; }
.rl-board button { position: relative; border: 0; padding: 0; cursor: pointer; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 .07em rgba(243,210,122,.55); transition: background .15s; }
.rl-board button b { font: 800 1.5em/1 var(--num); pointer-events: none; }
.rl-board .rn b { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; }
.rl-board .rn.red b { background: #b1232d; }
.rl-board .rn.black b { background: #15171a; }
.rl-board .rn.green { background: rgba(31,122,77,.55); border-radius: 50% 0 0 50% / 30% 0 0 30%; }
.rl-board .rn.green b { background: none; font-size: 2em; }
.rl-board .col b, .rl-board .out b { font: 700 1.1em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,210,122,.85); }
.rl-board .ev.red b { color: #e2404b; font-size: 1.8em; }
.rl-board .ev.black b { color: #0b0c0e; font-size: 1.8em; text-shadow: 0 0 .1em rgba(255,255,255,.4); }
.rl-board button:hover { background: rgba(255,255,255,.12); }
.rl-board .rn.hit { animation: hitglow 1.2s ease-in-out infinite; z-index: 3; }
@keyframes hitglow { 50% { background: rgba(243,210,122,.45); box-shadow: inset 0 0 0 .2em var(--gold-hi); } }
.rl-board .rn.lucky { background: radial-gradient(circle, rgba(243,210,122,.55), rgba(212,165,55,.12)); animation: luck 1s ease-in-out infinite alternate; }
.rl-board .rn.lucky::after { content: attr(data-mult); position: absolute; top: .15em; right: .15em; font: 800 .8em/1 var(--num); color: var(--gold-hi); text-shadow: 0 0 .4em #000; pointer-events: none; }
@keyframes luck { to { box-shadow: inset 0 0 0 .2em var(--gold-hi), 0 0 1.2em rgba(243,210,122,.6); } }
/* split / corner / street / six-line hot zones on the cell edges */
.rl-board .z { position: relative; z-index: 2; grid-column: var(--c); grid-row: var(--r, 3); cursor: pointer; border-radius: .3em; transition: background .15s; }
.rl-board .z:hover { background: rgba(243,210,122,.5); }
.rl-board .z.h, .rl-board .z.st { align-self: end; justify-self: center; width: 70%; height: 1.1em; transform: translateY(50%); }
.rl-board .z.v { justify-self: end; align-self: center; width: 1.1em; height: 70%; transform: translateX(50%); }
.rl-board .z.x, .rl-board .z.sl { justify-self: end; align-self: end; width: 1.4em; height: 1.4em; transform: translate(50%, 50%); border-radius: 50%; z-index: 3; }
.rl-board .z .cstack { font-size: .7em; }
.racetrack { display: grid; gap: .6em; }
.racetrack > .call { margin: 0 .3em 0 0; }
.racetrack .call { display: inline-block; border: .1em solid rgba(243,210,122,.5); background: rgba(0,0,0,.2); color: var(--gold-hi); padding: .45em 1em; border-radius: 2em; cursor: pointer; font: 700 1.05em/1 var(--display); letter-spacing: .12em; text-transform: uppercase; box-shadow: none; }
.racetrack .call:hover { background: rgba(243,210,122,.18); }
.track { display: flex; flex-wrap: nowrap; border-radius: 3em; overflow: hidden; border: .12em solid rgba(243,210,122,.6); }
.track .tn { flex: 1; min-width: 0; height: 2.6em; font: 700 .95em/1 var(--num); box-shadow: inset -.05em 0 0 rgba(243,210,122,.35); }
.track .tn.red { background: rgba(177,35,45,.75); }
.track .tn.black { background: rgba(21,23,26,.85); }
.track .tn.green { background: rgba(31,122,77,.85); }
.track .tn:hover { background: var(--gold); color: var(--ink); }
.fav { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fav span { flex: 1; }
.ghost.sm { padding: 4px 8px; font-size: 12px; }

/* ═════════ Craps ═════════ */

.cr-wrap { position: absolute; inset: 0; border-radius: 3em 3em 2em 2em; display: grid; grid-template-rows: 13em minmax(0, 1fr); gap: 1em; padding: 1.6em 2.4em 2em; }
.cr-top { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2em; }
.cr-top .tally { position: relative; left: auto; top: auto; transform: none; justify-self: start; }
.puck { display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 50%; font: 900 1.2em/1 var(--display); letter-spacing: .12em; transition: transform .4s cubic-bezier(.2,1.6,.4,1); }
.puck.off { background: #121417; color: #fff; box-shadow: inset 0 0 0 .3em #fff, 0 .3em .6em rgba(0,0,0,.6); }
.puck.on { background: #fff; color: #121417; box-shadow: inset 0 0 0 .3em #121417, 0 0 1em rgba(255,255,255,.5); }
.cr-top > .puck { position: absolute; left: 18em; top: 50%; transform: translateY(-50%); }
.puck-slot { position: absolute; right: .4em; top: .4em; }
.puck-slot .puck { width: 3.4em; height: 3.4em; font-size: .95em; }
.dice-zone { position: relative; display: flex; gap: 1.4em; padding: 1.6em 2.6em; border-radius: 1em; border: .12em dashed transparent; touch-action: none; user-select: none; }
.dice-zone.mine { border-color: rgba(111,168,255,.6); cursor: grab; background: rgba(111,168,255,.08); }
.dice-zone.grab { cursor: grabbing; }
.die { width: 5.6em; height: 5.6em; border-radius: .9em; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: .7em; gap: .1em;
  background: linear-gradient(145deg, #e23c46, #9c1820); box-shadow: inset 0 -.3em .5em rgba(0,0,0,.35), inset 0 .2em .3em rgba(255,255,255,.35), 0 .5em .9em rgba(0,0,0,.55); }
.die i { border-radius: 50%; }
.die i.on { background: radial-gradient(circle at 40% 35%, #fff, #dfe3e7); box-shadow: inset 0 .08em .1em rgba(0,0,0,.4); margin: .12em; }
.dice-zone.thrown .die { animation: tumble calc(1.6s / var(--pow, 1)) cubic-bezier(.2,.7,.25,1) both; }
.dice-zone.thrown .die + .die { animation-delay: .08s; }
@keyframes tumble { 0% { transform: rotate(var(--ang)) translateX(-14em) rotate(0); } 55% { transform: rotate(0) translateX(.8em) rotate(520deg); } 75% { transform: translateX(-.3em) rotate(700deg); } 100% { transform: none; } }
.throw-hint { position: absolute; left: 50%; bottom: -1.4em; transform: translateX(-50%); font: 700 1em/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--seal-hi); white-space: nowrap; animation: blink 1.2s infinite; }
.cr-log { justify-self: end; display: flex; flex-wrap: wrap; gap: .3em; max-width: 22em; justify-content: end; }
.cr-log i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .4em; font: 700 1em/1 var(--num); font-style: normal; background: rgba(0,0,0,.35); color: var(--silver); }
.cr-log i:first-child { background: var(--paper); color: var(--ink); }
.cr-log i.seven { color: #ff8a8a; }
.cr-layout { display: grid; gap: .5em; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30em;
  grid-template-areas: "pb pb pr" "dc co pr" "fi fi pr" "dp dp pr" "pa pa pr" "od od pr"; grid-template-rows: 12em 4.6em 5.4em 3.6em 4.6em 3.6em; min-height: 0; }
.pboxes { grid-area: pb; display: grid; grid-template-columns: repeat(6, 1fr); gap: .4em; }
.pbox { position: relative; border: .12em solid rgba(255,255,255,.55); border-radius: .4em; display: grid; grid-template-rows: 1fr auto; transition: box-shadow .3s; }
.pbox.point { box-shadow: 0 0 0 .2em var(--gold-hi), 0 0 1.4em rgba(243,210,122,.5); }
.pnum { position: relative; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-content: center; gap: .2em; }
.pnum b { font: 900 2.6em/1 var(--display); letter-spacing: .06em; }
.pnum small { font: 700 .85em/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pnum:hover { background: rgba(255,255,255,.08); }
.ptags { display: grid; gap: .2em; padding: .3em; font: 600 .85em/1.2 var(--num); color: var(--gold-hi); }
.ptags span.dc { color: #ff9a9a; }
.oddsbtn { border: .08em solid rgba(243,210,122,.5); background: rgba(0,0,0,.25); color: var(--gold-hi); border-radius: .3em; padding: .2em; cursor: pointer; font: 700 .9em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.cr { position: relative; border: .12em solid rgba(255,255,255,.55); border-radius: .5em; background: transparent; color: #fff; cursor: pointer; display: grid; place-content: center; text-align: center; gap: .15em; transition: background .15s; }
.cr:hover { background: rgba(255,255,255,.08); }
.cr b { font: 900 1.8em/1 var(--display); letter-spacing: .14em; }
.cr small { font: 700 .9em/1.2 var(--display); letter-spacing: .14em; color: rgba(255,255,255,.65); }
.cr small em { display: block; font-style: normal; color: var(--gold-hi); }
.cr.come { grid-area: co; }
.cr.dcome { grid-area: dc; }
.cr.field { grid-area: fi; }
.cr.field b { color: var(--gold-hi); }
.cr.dpass { grid-area: dp; }
.cr.pass { grid-area: pa; border-radius: .5em .5em 2em 2em; }
.cr.pass b { font-size: 2.4em; letter-spacing: .3em; }
.odds-row { grid-area: od; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.cr.odds b { font-size: 1.2em; color: var(--gold-hi); }
.props { grid-area: pr; display: grid; grid-template-columns: 1fr 1fr; gap: .35em; padding: .6em; border-radius: .6em; border: .12em solid rgba(243,210,122,.6); background: rgba(0,0,0,.2); align-content: stretch; }
.pr { position: relative; border: .08em solid rgba(255,255,255,.35); background: rgba(255,255,255,.03); border-radius: .35em; color: #fff; cursor: pointer; display: grid; place-content: center; gap: .1em; text-align: center; padding: .3em; }
.pr.wide { grid-column: span 2; }
.pr b { font: 800 1.5em/1 var(--display); letter-spacing: .1em; color: #ff6b74; }
.pr.wide b { color: var(--gold-hi); }
.pr small { font: 600 .82em/1.1 var(--ui); color: rgba(255,255,255,.7); }
.pr:hover { background: rgba(255,255,255,.1); }

/* small screens: the felt scales with width and the page scrolls (house.js sets the box height) */
@media (max-width: 1180px), (max-height: 560px) {
  .house-room .hbox { height: auto; }
  .house-room .tray { justify-content: center; flex-wrap: wrap; }
  .house-actions { grid-template-columns: 1fr; }
  .tray .chip-x { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hcard.deal, .cstack, .dice-zone.thrown .die, .ball.spin { animation-duration: .01s !important; }
}

.dealer-zone .tally { position: static; transform: none; margin-bottom: .2em; }
/* side panel: chat gets the height; the info card scrolls inside its own box */
.house-side { grid-template-rows: minmax(0, 1fr) minmax(0, auto); }
.house-side .info-panel { max-height: 48vh; overflow-y: auto; align-content: start; }
.info-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.info-tabs button { border: 1px solid var(--rule); background: rgba(13,19,27,.8); color: var(--slate); padding: 6px 10px; border-radius: 4px; cursor: pointer; font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.info-tabs button.on { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.house-side .legend h4 { margin: 8px 0 2px; font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.house-side .legend h4 small { font: 500 11px var(--ui); letter-spacing: 0; text-transform: none; color: var(--slate); }
.house-side .legend p { margin: 4px 0; line-height: 1.5; }
.hseat .plate { min-width: 7em; }
.md { display: inline-flex; gap: .25em; }
.die.mini { width: 1.7em; height: 1.7em; padding: .2em; border-radius: .3em; gap: 0; }
.die.mini i.on { margin: .05em; }
.cr .cstack, .pnum .cstack { left: auto; right: .4em; top: 50%; transform: translateY(-62%); }
.cr .cstack b, .pnum .cstack b { top: auto; bottom: -.2em; left: auto; right: 3em; transform: none; }
.pr .cstack { font-size: .75em; }

/* ───────── phones ───────── */
.house-room { min-width: 0; width: 100%; }
.house-room .hbox { max-width: 100%; overflow: hidden; }
.narrow .rl-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 1.4em; gap: 1em; justify-items: center; }
.narrow .wheel-zone { grid-template-columns: auto auto; align-items: center; gap: 1.2em; padding-top: 0; }
.narrow .wheel-zone .tally { position: absolute; top: -.4em; left: 0; transform: none; }
.narrow .wheel { width: 24em; height: 24em; }
.narrow .wheel .pk b { font-size: .85em; }
.narrow .rl-hist { grid-column: 1 / -1; }
.narrow .ball { transform: rotate(0deg) translateY(-10.2em); }
.narrow .rl-board { width: 100%; }
.narrow .rl-board .grid { grid-template-columns: 4em repeat(12, minmax(0, 1fr)) 4em; grid-template-rows: repeat(3, 5em) 4em 4em; }
.narrow .rl-board button b { font-size: 1.7em; }
.narrow .cr-wrap { grid-template-rows: 12em minmax(0, 1fr); padding: 1.4em; }
.narrow .cr-top { grid-template-columns: auto 1fr; }
.narrow .cr-top > .puck { left: auto; right: 0; top: 0; transform: none; }
.narrow .cr-log { display: none; }
.narrow .cr-layout { grid-template-columns: 1fr 1fr; grid-template-areas: "pb pb" "dc co" "fi fi" "dp dp" "pa pa" "od od" "pr pr"; grid-template-rows: 11em 5em 6em 4em 5em 4em minmax(0, 1fr); }
.narrow .pnum b { font-size: 2.2em; }
.narrow .cr b { font-size: 2.2em; }
.narrow .props { grid-template-columns: repeat(4, 1fr); }
.narrow .pr small { font-size: 1.1em; }
.narrow .hseat.vacant:has(.dim) { display: none; }

/* lobby: the wheel picker (Roulette) */
.variants { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vpick { display: grid; gap: 2px; text-align: left; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--silver); cursor: pointer; transition: border-color .2s, color .2s, box-shadow .25s, transform .15s; }
.vpick b { font: 800 16px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.vpick small { font-size: 12px; color: var(--slate); }
.vpick:hover { transform: translateY(-1px); color: var(--paper); }
.vpick.on { color: var(--paper); border-color: var(--seal-hi); box-shadow: 0 0 0 1px var(--seal-hi), 0 0 18px rgba(111,168,255,.25); }
.vpick.v-lucky.on { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 22px rgba(243,210,122,.3); }
.vpick.v-lucky b { background: linear-gradient(90deg, var(--gold-hi), #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shimmer 3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ═════════ Slots: a cabinet, five reels, a win bar ═════════ */
.g-slots .hseats, .g-slots .clock { display: none; }
.g-slots .house-actions { grid-template-columns: minmax(0, 1fr) auto; }
.sl-cab { position: absolute; inset: 0; display: grid; grid-template-rows: 8.4em minmax(0, 1fr) 6.6em; gap: 1em; padding: 1.4em 3em 1.6em; border-radius: 3em 3em 2em 2em;
  background: radial-gradient(120% 80% at 50% 0%, #1e3554, #0b1524 60%, #070c14); box-shadow: inset 0 0 0 .35em #0a121c, inset 0 0 0 .7em #b88a2a, inset 0 0 0 .85em #6d4f14, 0 1.6em 3em rgba(0,0,0,.6); }
.sl-cab.m-mint { background: radial-gradient(120% 80% at 50% 0%, #1d4a3f, #0b1f1b 60%, #06100e); }
.sl-cab.m-greenback { background: radial-gradient(120% 80% at 50% 0%, #2c4a1e, #10200c 60%, #081006); }
/* marquee lights around the cabinet: tiny bulbs chasing */
.sl-cab::before { content: ""; position: absolute; inset: .3em; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, rgba(243,210,122,.9) 0 .18em, transparent .22em) 0 0 / 2.4em 2.4em; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: .45em; opacity: .55; animation: bulbs 1.6s linear infinite; }
@keyframes bulbs { to { background-position: 2.4em 0; } }
.sl-top { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.sl-name b { display: block; font: 900 3.6em/.9 var(--display); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #fff, #f3d27a 55%, #b88a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .06em .2em rgba(0,0,0,.6)); }
.sl-name small { font: 700 1.2em/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.sl-jp { display: grid; justify-items: end; padding: .6em 1.4em; border-radius: .6em; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 .12em rgba(243,210,122,.55), 0 0 1.6em rgba(212,165,55,.25); }
.sl-jp span { font: 800 1.1em/1 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); }
.sl-jp b { font: 700 2.8em/1.1 var(--num); color: #fff; text-shadow: 0 0 .5em rgba(243,210,122,.8); }
.sl-window { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: .7em; padding: .9em; border-radius: 1em; background: #04070c;
  box-shadow: inset 0 0 0 .2em #2a3540, inset 0 1.6em 2.4em rgba(0,0,0,.8), inset 0 -1.6em 2.4em rgba(0,0,0,.8); transition: box-shadow .4s; }
.sl-window.fs { box-shadow: inset 0 0 0 .25em var(--gold-hi), 0 0 2.4em rgba(243,210,122,.35), inset 0 1.6em 2.4em rgba(0,0,0,.8); }
.sl-reel { position: relative; overflow: hidden; border-radius: .5em; background: linear-gradient(180deg, #0e1622, #162336 50%, #0e1622); }
.sl-strip { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, 1fr); }
/* the blur strip: 8 symbols twice over, each a third of the reel tall, looping */
.sl-blur { position: absolute; inset: 0; display: none; grid-auto-rows: 33.333%; filter: blur(.25em) brightness(1.15); }
.sl-reel.spin .sl-strip { visibility: hidden; }
.sl-reel.spin .sl-blur { display: grid; animation: reelspin .32s linear infinite; }
@keyframes reelspin { from { transform: translateY(-266.667%); } to { transform: translateY(0); } }
.sl-reel.land .sl-strip { animation: reelland .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes reelland { from { transform: translateY(-14%); } to { transform: none; } }
.sl-reel.tease { box-shadow: 0 0 0 .2em var(--gold-hi), 0 0 2em rgba(243,210,122,.7); animation: tease .3s ease-in-out infinite alternate; }
@keyframes tease { to { box-shadow: 0 0 0 .2em #fff, 0 0 3em rgba(243,210,122,.9); } }
.sy { display: grid; place-items: center; position: relative; min-height: 0; }
.sy.pic { background: var(--sheet) calc(var(--x) * 50%) calc(var(--y) * 50%) / 300% 300% no-repeat; margin: .35em; border-radius: .5em; }
.sl-cab .sy.pic { background-image: var(--sheet); }
.sy.cd b { font: 900 4.4em/1 var(--display); letter-spacing: .02em; background: linear-gradient(180deg, #fff, #c3ccd4 60%, #6d7a88); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .05em .08em rgba(0,0,0,.8)); }
.sy.cd.c-A b { background-image: linear-gradient(180deg, #ffd9dc, #e2404b 60%, #8a1820); }
.sy.cd.c-Kc b { background-image: linear-gradient(180deg, #d9e8ff, #6fa8ff 60%, #2d5da8); }
.sy.cd.c-Q b { background-image: linear-gradient(180deg, #e8dcff, #a77bff 60%, #5b2a91); }
.sy.cd.c-J b { background-image: linear-gradient(180deg, #dcffe9, #3fcf86 60%, #1f7a4d); }
.sy.cd.c-T b { background-image: linear-gradient(180deg, #fff3d6, #f3d27a 60%, #b88a2a); }
.sy.hit { animation: symhit .9s ease-in-out infinite; z-index: 2; }
.sy.pic.hit { box-shadow: 0 0 0 .2em var(--gold-hi), 0 0 1.6em rgba(243,210,122,.8); }
@keyframes symhit { 50% { transform: scale(1.08); filter: brightness(1.3); } }
.sy.held { box-shadow: 0 0 0 .22em #7bf5c1, 0 0 1.4em rgba(123,245,193,.7); }
.sy.held::after { content: "STICKY"; position: absolute; bottom: .2em; left: 50%; transform: translateX(-50%); font: 800 .8em/1 var(--display); letter-spacing: .2em; color: #7bf5c1; text-shadow: 0 0 .4em #000; }
.sl-lines { position: absolute; inset: .9em; width: calc(100% - 1.8em); height: calc(100% - 1.8em); pointer-events: none; z-index: 3; }
.sl-lines .pl { fill: none; stroke: var(--gold-hi); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243,210,122,.9)); stroke-dasharray: 900; animation: drawline .5s ease-out; vector-effect: non-scaling-stroke; }
.sl-lines .pd { fill: #fff; }
@keyframes drawline { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
.sl-foot { display: flex; gap: 1em; align-items: stretch; }
.sl-foot .sl-winbar { flex: 1; }
.sl-fs { display: none; }
.sl-fs.on { display: flex; align-items: center; gap: 1.2em; padding: 0 1.6em; border-radius: .8em; background: linear-gradient(90deg, rgba(243,210,122,.25), rgba(243,210,122,.05)); box-shadow: inset 0 0 0 .12em var(--gold-hi); animation: fsglow 1.4s ease-in-out infinite alternate; }
.sl-fs b { font: 900 1.8em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.sl-fs span { font: 700 1.5em/1 var(--num); }
.sl-fs em { font: 700 1.1em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--silver); }
@keyframes fsglow { to { box-shadow: inset 0 0 0 .12em #fff, 0 0 1.6em rgba(243,210,122,.45); } }
.sl-winbar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 2em; border-radius: .8em; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 .1em var(--rule); }
.sl-winbar span { font: 800 1.6em/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.sl-winbar b { font: 700 3.2em/1 var(--num); color: var(--gold-hi); text-shadow: 0 0 .5em rgba(243,210,122,.6); }
.sl-winbar.won { box-shadow: inset 0 0 0 .14em var(--gold-hi), 0 0 1.6em rgba(243,210,122,.3); }
.sl-winbar.won span { color: #fff; }
/* the controls */
.sl-bet { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--rule); }
.sl-bet .act { min-width: 46px; padding: 12px 0; font-size: 22px; }
.sl-bet span { display: grid; justify-items: center; min-width: 70px; }
.sl-bet small { font: 700 10px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--slate); }
.sl-bet b { font: 700 22px/1.1 var(--num); color: var(--gold-hi); }
.act.on { box-shadow: 0 0 0 2px var(--seal-hi), 0 0 18px rgba(111,168,255,.5); }
.act.sl-spin { min-width: 150px; font-size: 26px; padding: 18px 26px; border-radius: 40px; background: radial-gradient(circle at 50% 30%, #ffe9a8, var(--gold) 60%, #8a5f17); box-shadow: 0 0 0 3px #3b2a08, 0 0 26px rgba(212,165,55,.55), inset 0 -4px 0 rgba(0,0,0,.25); }
.act.sl-spin:not([disabled]) { animation: spinpulse 2.2s ease-in-out infinite; }
@keyframes spinpulse { 50% { box-shadow: 0 0 0 3px #3b2a08, 0 0 40px rgba(243,210,122,.85), inset 0 -4px 0 rgba(0,0,0,.25); } }
/* Crack the Vault */
.sl-bonus { position: absolute; inset: 1em; z-index: 12; border-radius: 2em; display: grid; grid-template-rows: auto 1fr auto; gap: 1em; padding: 2em 3em;
  background: radial-gradient(100% 80% at 50% 0%, #2b3440, #0b1018 70%); box-shadow: inset 0 0 0 .3em #b88a2a, 0 2em 4em rgba(0,0,0,.7); animation: vbin .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes vbin { from { transform: scale(.85); opacity: 0; } }
.vb-head { display: grid; grid-template-columns: auto 1fr; gap: .2em 2em; align-items: center; }
.vb-head .tally { position: static; transform: none; grid-row: span 2; }
.vb-head h3 { margin: 0; font: 900 3.4em/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.vb-head p { margin: 0; font-size: 1.5em; color: var(--silver); }
.vb-doors { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1em 1.4em; min-height: 0; place-items: center; }
.vb-door { position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 50%; width: min(100%, 13em); aspect-ratio: 1; perspective: 40em; background: none; color: #fff; }
.vb-face { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d9dde2, #8a939d 55%, #3b4148); box-shadow: inset 0 0 0 .4em #2a2f35, inset 0 0 0 .6em #c3ccd4, 0 .5em 1em rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.3,1.2,.4,1), opacity .5s .2s; transform-origin: 0 50%; z-index: 1; }
.vb-face i { position: absolute; inset: 30%; border-radius: 50%; border: .35em solid #b88a2a; background: conic-gradient(from 0deg, #f3d27a 0 8%, transparent 8% 25%, #f3d27a 25% 33%, transparent 33% 50%, #f3d27a 50% 58%, transparent 58% 75%, #f3d27a 75% 83%, transparent 83%); }
.vb-door:not([disabled]):hover .vb-face { transform: rotateY(-12deg); box-shadow: inset 0 0 0 .4em #2a2f35, inset 0 0 0 .6em var(--gold-hi), 0 0 1.6em rgba(243,210,122,.6); }
.vb-door.opening .vb-face i { animation: wheel .8s linear infinite; }
@keyframes wheel { to { transform: rotate(360deg); } }
.vb-door.open .vb-face { transform: rotateY(-100deg); opacity: 0; }
.vb-prize { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #3a2a08, #0b0f14 70%); font: 700 1.6em/1 var(--num); color: var(--gold-hi); z-index: 0; }
.vb-door.mine .vb-prize { box-shadow: 0 0 0 .2em var(--gold-hi), 0 0 1.4em rgba(243,210,122,.6); color: #fff; }
.vb-door.open:not(.mine) { opacity: .55; }
.vb-foot { display: flex; align-items: center; justify-content: center; gap: 2em; font-size: 1.4em; }
.vb-foot .act { font-size: .9em; }
.vb-dial { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: conic-gradient(#f3d27a, #b88a2a, #f3d27a, #b88a2a, #f3d27a); box-shadow: 0 0 0 .2em #3b2a08, 0 0 1.4em rgba(243,210,122,.6); }
.vb-dial span { font: 900 1.6em/1 var(--num); color: #241703; }
.vb-dial.stop { animation: pop .4s cubic-bezier(.2,1.8,.4,1); }
.vb-sum b { color: var(--gold-hi); }
/* paytable */
.legend .pt { display: grid; gap: 6px; }
.legend .pt-row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; justify-content: stretch; }
.pt-sym .sy { width: 40px; height: 40px; margin: 0; font-size: 8px; }
.pt-pays { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pt-pays em { font-style: normal; color: var(--slate); margin-right: 3px; font-size: 11px; }
.narrow .sl-cab { padding: 1.4em 1.6em; grid-template-rows: 7em minmax(0, 1fr) 6em; }
.narrow .sl-name small { display: none; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.vpick.v-vault.on { border-color: #c3ccd4; box-shadow: 0 0 0 1px #c3ccd4, 0 0 22px rgba(195,204,212,.3); }
.vpick.v-mint.on { border-color: #7bf5c1; box-shadow: 0 0 0 1px #7bf5c1, 0 0 22px rgba(123,245,193,.25); }
.vpick.v-greenback.on { border-color: #9be36b; box-shadow: 0 0 0 1px #9be36b, 0 0 22px rgba(155,227,107,.25); }
.sl-daily { margin-left: auto; display: grid; justify-items: center; gap: .2em; padding: .7em 1.4em; border-radius: 3em; border: 0; cursor: pointer; color: #241703;
  background: linear-gradient(180deg, #ffe9a8, var(--gold)); box-shadow: 0 0 0 .2em #3b2a08, 0 0 1.6em rgba(243,210,122,.6); animation: spinpulse 2s ease-in-out infinite; }
.sl-daily b { font: 900 1.6em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.sl-daily small { font: 700 .95em/1 var(--ui); }
.vpick { position: relative; }
.motd { position: absolute; top: -9px; right: 8px; padding: 2px 7px; border-radius: 10px; background: var(--gold); color: var(--ink); font: 800 10px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.sl-fs.on { font-size: .9em; }
.narrow .sl-cab { padding: 1.2em 1.2em 1.4em; gap: .8em; grid-template-rows: 6em minmax(0, 1fr) 5.4em; }
.narrow .sl-name b { font-size: 2.6em; }
.narrow .sl-jp b { font-size: 2em; }
.narrow .sl-daily b { font-size: 1.2em; }
.narrow .sl-winbar b { font-size: 2.4em; }
@media (max-width: 720px) {
  .g-slots .btns { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
  .g-slots .btns .act.sm { min-width: 0; padding: 12px 12px; font-size: 15px; letter-spacing: .06em; }
  .g-slots .sl-spin { grid-column: 1 / -1; }
}

/* Tally with his portrait: the picture sits on the plaque's left */
.tally.has-img { display: flex; align-items: center; gap: .6em; padding: .3em 1.2em .3em .3em; }
.tally.has-img img { width: 7.6em; height: 7.6em; border-radius: .35em; object-fit: cover; box-shadow: 0 0 0 .12em #6d4f14, 0 .2em .5em rgba(0,0,0,.45); }
.tally.has-img img.pop { animation: tallypop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes tallypop { from { transform: scale(.7) rotate(-6deg); } }
.tally.has-img .tl { display: grid; justify-items: start; gap: .1em; }
.dealer-zone .tally.has-img { margin-bottom: .4em; }
.cr-top .tally.has-img img { width: 8em; height: 8em; }
.wheel-zone .tally.has-img { top: -1.4em; left: -1.2em; transform: none; }
.wheel-zone .tally.has-img img { width: 6.4em; height: 6.4em; }
.vb-head .tally.has-img img { width: 8em; height: 8em; }