/* DonutFortune games — game view layout + every game's stage. Loaded by casino.html. */

/* ================= GAME VIEW LAYOUT (bet panel left, stage right) ================= */
.gv { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .gv { grid-template-columns: 1fr; } }
.gv-side { position: sticky; top: calc(var(--topH) + 14px); align-self: start; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); }
@media (max-width: 980px) { .gv-side { position: static; } }
.gv-side label { margin-bottom: 7px; }
.gv-side input, .gv-side select { margin-bottom: 12px; }
.gv-side select { width: 100%; font-family: var(--font); font-weight: 600; font-size: 14px; color: var(--text); background: rgba(0,0,0,0.32); border: 1px solid var(--border); border-radius: 11px; outline: none; padding: 11px 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.gv-side select:focus { border-color: rgba(77,163,255,0.55); }
.gv-side .btn.big { padding: 15px 18px; font-size: 14px; margin-top: 4px; }
.gv-side .btn.cash { color: #061a0c; background: linear-gradient(180deg, #5ce89b, #2fc975); box-shadow: 0 6px 18px rgba(61,220,133,0.3); }
.gv-side .btn.danger { color: #fff; background: linear-gradient(180deg, #ff7280, #e8455b); box-shadow: 0 6px 18px rgba(255,92,114,0.3); }
.gv-side .btn + .btn { margin-top: 8px; }
.gv-actions:empty { display: none; }
.gv-actions { margin-top: 8px; }
.modeswitch { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,0.32); border: 1px solid var(--border); margin-bottom: 14px; }
.modeswitch button { flex: 1; cursor: pointer; font-weight: 800; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); background: none; border: none; border-radius: 9px; padding: 9px 4px; transition: all .15s ease; }
.modeswitch button.sel { color: #fff; background: var(--panel3); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.modeswitch button[disabled] { opacity: .4; cursor: default; }
.autopanel { padding: 12px; border-radius: 12px; background: rgba(0,0,0,0.22); border: 1px solid var(--border); margin-bottom: 12px; }
.autopanel .ar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.autopanel input { margin-bottom: 10px; padding: 9px 11px; font-size: 13px; }
.autopanel .seg { margin-bottom: 8px; }
.autopanel .seg .opt { padding: 8px 4px; font-size: 11px; }
.autostat { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--border); }
.autostat b { color: var(--text); font-family: var(--mono); }
.autostat b.w { color: var(--win); } .autostat b.l { color: var(--red); }
.bet-row { display: flex; gap: 6px; margin-bottom: 12px; }
.bet-row .bet-in { position: relative; flex: 1; min-width: 0; }
.bet-row .bet-in input { margin: 0; padding-left: 28px; font-variant-numeric: tabular-nums; font-family: var(--mono); font-weight: 700; }
.bet-row .bet-in .cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--gold); font-size: 13px; pointer-events: none; }
.bet-row .bet-in input.bump { animation: betBump .28s cubic-bezier(.2,.8,.2,1); }
@keyframes betBump { 0% { transform: scale(1); } 40% { transform: scale(1.035); border-color: rgba(77,163,255,0.6); } 100% { transform: scale(1); } }
.bq { flex: 0 0 auto; cursor: pointer; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; transition: all .16s ease; }
.bq:active { transform: scale(.94); }
.bq:hover { color: var(--text); border-color: var(--border2); background: rgba(255,255,255,0.08); }
.bq.sel { color: #fff; background: rgba(77,163,255,0.12); border-color: rgba(77,163,255,0.5); }
.seg { display: flex; gap: 6px; margin-bottom: 12px; }
.seg .opt { flex: 1; text-align: center; cursor: pointer; font-weight: 800; font-size: 12px; letter-spacing: 0.02em; color: var(--muted); background: rgba(0,0,0,0.28); padding: 11px 6px; border-radius: 10px; border: 1px solid var(--border); transition: all .16s ease; }
.seg .opt:hover { color: var(--text); border-color: var(--border2); }
.seg .opt.sel { color: #fff; background: rgba(77,163,255,0.12); border-color: rgba(77,163,255,0.55); }
.seg .opt.red.sel { background: rgba(255,92,114,0.12); border-color: rgba(255,92,114,0.55); }
.seg .opt.green.sel { background: rgba(61,220,133,0.12); border-color: rgba(61,220,133,0.55); }
.seg .opt[disabled], .seg.locked .opt { opacity: .55; cursor: default; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.stats .st { padding: 9px 10px; border-radius: 10px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); min-width: 0; }
.stats .st .l { font-size: 9px; font-weight: 800; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats .st .v { font-weight: 800; font-size: 15px; color: var(--gold); margin-top: 3px; font-variant-numeric: tabular-nums; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats .st .v.green { color: var(--win); }
.stats .st .v.small { font-size: 12.5px; color: var(--text); }
.stats.three { grid-template-columns: 1fr 1fr 1fr; }
.gv-odds { margin-top: 12px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; line-height: 1.6; }
.gv-odds .fair-chip { display: flex; width: 100%; justify-content: center; margin-top: 10px; padding: 7px 10px; border-radius: 9px; }
.gv-stagewrap { min-width: 0; display: flex; flex-direction: column; container-type: inline-size; }
.gv-hist { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-height: 28px; margin-bottom: 10px; }
.gv-hist:empty { display: none; }
.ch { flex: 0 0 auto; font-family: var(--mono); font-weight: 700; font-size: 11px; border-radius: 8px; padding: 5px 10px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); animation: chin .25s ease; }
.ch.hi { color: var(--win); border-color: rgba(61,220,133,0.4); background: rgba(61,220,133,0.06); }
.ch.lo { color: var(--red); }
.ch.mid { color: var(--gold); border-color: rgba(245,197,66,0.35); }
.ch.rd { color: #fff; background: #d63a4a; border-color: transparent; }
.ch.bk { color: #fff; background: #222838; }
.ch.gn { color: #fff; background: #1f9d55; border-color: transparent; }
@keyframes chin { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.gv-stage { position: relative; flex: 1; min-height: 580px; padding: 24px; border-radius: 18px; background: radial-gradient(700px 320px at 50% 0%, rgba(77,163,255,0.08), transparent 70%), var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.gv-stage canvas { max-width: 100%; }
.gv-stage .stagenote { font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 14px; text-align: center; min-height: 15px; }
.result { text-align: center; font-weight: 800; font-size: 15.5px; letter-spacing: 0.01em; line-height: 1.7; margin: 10px 0 4px; min-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.result.win { color: var(--win); } .result.lose { color: var(--red); }
.winpop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; text-align: center; padding: 16px 28px; border-radius: 16px; background: rgba(10,13,19,0.92); border: 1px solid rgba(61,220,133,0.55); box-shadow: 0 0 0 1px rgba(61,220,133,0.15), 0 18px 50px rgba(0,0,0,0.6), 0 0 40px rgba(61,220,133,0.25); animation: winpop .35s cubic-bezier(.2,.9,.2,1.2); pointer-events: none; }
.winpop .wm { font-family: var(--mono); font-weight: 700; font-size: 36px; color: var(--win); line-height: 1.1; }
.winpop .wv { font-weight: 800; font-size: 14px; color: var(--gold); margin-top: 6px; font-family: var(--mono); }
.winpop.lose { border-color: rgba(255,92,114,0.5); box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
.winpop.lose .wm { color: var(--red); }
@keyframes winpop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.stage-title { position: absolute; left: 18px; top: 14px; font-weight: 800; font-size: 10px; letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; opacity: .8; }
.hintline { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin: -4px 0 10px; }
.paytable { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.paytable .pr { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,0.22); border: 1px solid var(--border); }
.paytable .pr b { color: var(--gold); font-variant-numeric: tabular-nums; font-family: var(--mono); }
.paytable .pr.hit { color: #fff; border-color: rgba(61,220,133,0.5); background: rgba(61,220,133,0.1); }
.paytable .pr.hit b { color: var(--win); }
.paytable .pr svg { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); outline: none; margin: 8px 0 14px; padding: 0; border: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #0a0d14; box-shadow: 0 0 0 2px rgba(77,163,255,0.5); cursor: pointer; }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #0a0d14; cursor: pointer; }

/* ================= COINFLIP (heads & tails table) ================= */
.cftable { position: relative; width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* Felt slab the coin lands on: warm rail, dark inner felt, soft vignette. */
.cffelt { position: relative; width: 100%; padding: 34px 26px 26px; border-radius: 26px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.07), transparent 62%),
    radial-gradient(90% 70% at 50% 118%, rgba(0,0,0,0.5), transparent 70%),
    linear-gradient(165deg, #14202c, #0b141d 55%, #0a1119);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 90px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; align-items: center; }
.cffelt::before { content: ''; position: absolute; inset: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; }
.cffelt::after { content: ''; position: absolute; inset: 18px; border-radius: 14px; border: 1px dashed rgba(255,210,77,0.13); pointer-events: none; }
/* The shadow puck the coin hovers over — gives the flip somewhere to land. */
.cfpuck { position: absolute; left: 50%; top: 176px; width: 190px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.62), transparent 72%); filter: blur(2px); transition: transform .3s ease, opacity .3s ease; }
.cfstack.flying .cfpuck { transform: translateX(-50%) scale(.72); opacity: .55; }
.cfstack { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.coinwrap { perspective: 1400px; width: 210px; height: 210px; position: relative; z-index: 2; }
.coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(.16,.72,.16,1); }
/* Each face is a milled disc: bevelled rim, engraved ring, big letter. */
.coin .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center;
  font-weight: 900; font-size: 62px; letter-spacing: -0.02em; }
.coin .face.heads { color: #6b4708;
  background: conic-gradient(from 210deg, #b8801a, #ffe89a 18%, #f5c542 34%, #a8720f 52%, #ffe89a 70%, #d9a02a 86%, #b8801a);
  box-shadow: inset 0 0 0 10px rgba(120,80,10,0.3), inset 0 4px 18px rgba(255,255,255,0.35), inset 0 -10px 22px rgba(0,0,0,0.32), 0 18px 40px rgba(0,0,0,0.5); }
.coin .face.tails { transform: rotateY(180deg); color: #2b3240;
  background: conic-gradient(from 210deg, #5b6473, #e7ebf2 18%, #b6bfcd 34%, #566070 52%, #e7ebf2 70%, #9aa4b5 86%, #5b6473);
  box-shadow: inset 0 0 0 10px rgba(40,50,70,0.3), inset 0 4px 18px rgba(255,255,255,0.35), inset 0 -10px 22px rgba(0,0,0,0.32), 0 18px 40px rgba(0,0,0,0.5); }
.coin .face .ring { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.16); box-shadow: inset 0 0 0 5px rgba(255,255,255,0.14); }
.coin .face .pip { position: absolute; bottom: 26px; font-size: 9px; font-weight: 900; letter-spacing: 0.22em; opacity: .5; }
/* The lift and the bounce live on the wrapper: the coin itself only ever
   rotates, so the two transforms never fight (an animation on .coin used to
   replace the rotation and the coin just jumped to its final face). */
.coinwrap.flipping { animation: coinlift 1.7s cubic-bezier(.16,.72,.16,1); }
@keyframes coinlift { 0% { transform: translateY(0) scale(1); } 42% { transform: translateY(-104px) scale(1.1); } 100% { transform: translateY(0) scale(1); } }
.coinwrap.landed { animation: coinbounce .52s cubic-bezier(.2,.9,.2,1.35); }
@keyframes coinbounce { 0% { transform: translateY(-16px); } 55% { transform: translateY(5px) scaleY(.96); } 100% { transform: translateY(0); } }
/* Score rail under the felt: last flips + the running streak. */
.cfrail { display: flex; align-items: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.cfrail .cfr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; border: 1px solid rgba(255,255,255,0.1); }
.cfrail .cfr.h { color: #6b4708; background: linear-gradient(150deg, #ffe89a, #d9a02a); }
.cfrail .cfr.t { color: #2b3240; background: linear-gradient(150deg, #e7ebf2, #99a3b4); }
.cfrail .cfr.new { animation: cfPop .34s cubic-bezier(.2,.9,.2,1.4); }
@keyframes cfPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.cfrail .cflab { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; margin-right: 2px; }
/* Two side plates flanking the coin so the table reads as a real layout. */
.cfsides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: 100%; max-width: 520px; margin-top: 24px; }
.cfside { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(0,0,0,0.3); text-align: center; transition: all .2s ease; }
.cfside .l { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.cfside .v { margin-top: 5px; font-size: 15px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.cfside.on.h { border-color: rgba(245,197,66,0.5); background: rgba(245,197,66,0.09); box-shadow: 0 0 0 1px rgba(245,197,66,0.16); }
.cfside.on.t { border-color: rgba(174,186,204,0.5); background: rgba(174,186,204,0.09); box-shadow: 0 0 0 1px rgba(174,186,204,0.16); }
.cfsplit { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; color: var(--faint); }
.cf-streakline b { font-family: var(--mono); letter-spacing: 0.06em; }
/* Left-panel side picker. */
.sidepick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sidepick .opt { cursor: pointer; text-align: center; padding: 13px 8px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); font-weight: 800; font-size: 12px; letter-spacing: 0.05em; color: var(--muted); transition: all .16s ease; }
.sidepick .opt:hover { color: var(--text); border-color: var(--border2); }
.sidepick .opt .mini { width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #6b4708;
  background: conic-gradient(from 210deg, #b8801a, #ffe89a 20%, #f5c542 40%, #a8720f 60%, #ffe89a 80%, #b8801a); box-shadow: inset 0 0 0 3px rgba(120,80,10,0.3), 0 4px 10px rgba(0,0,0,0.4); }
.sidepick .opt .mini.t { color: #2b3240; background: conic-gradient(from 210deg, #5b6473, #e7ebf2 20%, #b6bfcd 40%, #566070 60%, #e7ebf2 80%, #5b6473); box-shadow: inset 0 0 0 3px rgba(40,50,70,0.3), 0 4px 10px rgba(0,0,0,0.4); }
.sidepick .opt.sel { color: #fff; border-color: rgba(245,197,66,0.55); background: rgba(245,197,66,0.08); }
.sidepick .opt.sel:has(.mini.t) { border-color: rgba(174,186,204,0.55); background: rgba(174,186,204,0.08); }

/* ================= DICE ================= */
.dicestage { width: 100%; max-width: 820px; padding: 30px 10px 10px; }
.dtrack { position: relative; height: 16px; border-radius: 999px; background: linear-gradient(90deg, #ff5c72, #ff7a8a); overflow: visible; margin: 46px 0 34px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }
.dtrack .win { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #3ddc85, #5ce89b); border-radius: 999px; transition: left .15s ease, width .15s ease; }
.dtrack .tgt { position: absolute; top: 50%; width: 36px; height: 36px; border-radius: 10px; transform: translate(-50%, -50%) rotate(45deg); background: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 3px rgba(77,163,255,0.3); z-index: 2; transition: left .15s ease; }
.dtrack .tgt span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); font-weight: 800; font-size: 11px; color: #04122b; }
.dtrack .roll { position: absolute; top: -48px; transform: translateX(-50%); z-index: 3; opacity: 0; transition: left .55s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.dtrack .roll.show { opacity: 1; }
.dtrack .roll .bub { font-family: var(--mono); font-weight: 700; font-size: 15px; padding: 6px 10px; border-radius: 9px; background: var(--panel3); border: 2px solid var(--muted); color: var(--text); white-space: nowrap; }
.dtrack .roll.w .bub { border-color: var(--win); color: var(--win); box-shadow: 0 0 18px rgba(61,220,133,0.35); }
.dtrack .roll.l .bub { border-color: var(--red); color: var(--red); }
.dtrack .roll::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--muted); }
.dtrack .roll.tick .bub { animation: rollflick .08s linear infinite; }
.dtrack .roll.land { animation: rollland .35s cubic-bezier(.2,.9,.2,1.4); }
@keyframes rollland { 0% { transform: translateX(-50%) scale(.7); } 60% { transform: translateX(-50%) scale(1.15); } 100% { transform: translateX(-50%); } }
.dscale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: -22px; padding: 0 2px; }
.dreadout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 30px; }
.dreadout .st { text-align: center; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); }
.dreadout .st .l { font-size: 9px; font-weight: 800; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; }
.dreadout .st input { margin: 4px 0 0; text-align: center; padding: 8px; font-family: var(--mono); font-weight: 700; }
.dreadout .st .v { font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--gold); margin-top: 6px; }

/* ================= LIMBO ================= */
.limbostage { text-align: center; padding: 10px; }
.limbonum { font-family: var(--mono); font-weight: 700; font-size: 108px; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; transition: color .2s ease, transform .2s ease; }
.limbonum.up { color: var(--win); text-shadow: 0 0 32px rgba(61,220,133,0.45); transform: scale(1.06); }
.limbonum.down { color: var(--red); text-shadow: 0 0 26px rgba(255,92,114,0.4); }
.limbonum.rolling { animation: numjitter .08s linear infinite; }
@keyframes numjitter { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
.limbotgt { margin-top: 18px; font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.limbotgt b { color: var(--gold); }
.limbobar { width: 260px; height: 6px; margin: 16px auto 0; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.limbobar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--win)); transition: width .1s linear; }
.limborocket { width: 170px; height: 170px; object-fit: contain; margin: 0 auto 6px; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.55)); transition: transform .25s ease; }
.limbostage.rolling .limborocket { animation: rocketshake .12s linear infinite; }
@keyframes rocketshake { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, -2px); } }
.limbostage.up .limborocket { transform: translateY(-14px) scale(1.08); }

/* ================= CRASH (shared round, rocket climb) ================= */
.crashlayout { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 12px; width: 100%; align-items: stretch; }
@container (max-width: 720px) { .crashlayout { grid-template-columns: 1fr; } }
.crashwrap { position: relative; width: 100%; min-height: 320px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 100%, rgba(77,163,255,0.13), transparent 62%), linear-gradient(185deg, #070b14 0%, #0a1220 55%, #0b1526 100%);
  border: 1px solid var(--border2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.crashwrap canvas { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
/* Parallax starfield behind the curve; it drifts while the round runs. */
.crashstars { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .8; }
.crashstars i { position: absolute; border-radius: 50%; background: #fff; opacity: var(--o); animation: starDrift var(--sd) linear infinite; }
@keyframes starDrift { from { transform: translateY(0); } to { transform: translateY(26px); } }
.crashwrap.running .crashstars { opacity: 1; }
/* Horizon glow that intensifies as the multiplier climbs. */
.crashglow { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(61,220,133,0.18), transparent 78%); opacity: 0; transition: opacity .4s ease; }
.crashwrap.running .crashglow { opacity: 1; }
.crashwrap.boomed .crashglow { opacity: 1; background: linear-gradient(0deg, rgba(255,92,114,0.24), transparent 78%); }
.crashover { position: absolute; left: 0; right: 0; top: 21%; text-align: center; pointer-events: none; z-index: 4; }
.crashmult { font-family: var(--mono); font-weight: 800; font-size: 70px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; transition: color .15s ease; }
.crashmult.wait { color: var(--text); text-shadow: 0 0 26px rgba(255,255,255,0.2); }
.crashmult.g { color: var(--win); text-shadow: 0 0 26px rgba(61,220,133,0.4); }
.crashmult.y { color: var(--gold); text-shadow: 0 0 26px rgba(245,197,66,0.4); }
.crashmult.b { color: var(--accent); text-shadow: 0 0 28px rgba(77,163,255,0.5); }
.crashmult.p { color: #c9a4ff; text-shadow: 0 0 30px rgba(167,139,250,0.55); }
.crashmult.dead { color: var(--red); text-shadow: 0 0 28px rgba(255,92,114,0.55); animation: badgepop .4s cubic-bezier(.2,.9,.2,1.3); }
.crashsub { font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 10px; }
.crashbarwrap { width: 230px; height: 6px; margin: 12px auto 0; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.crashbarwrap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--win)); transition: width .12s linear; }
.crashwrap.boomed canvas { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* The rocket: a drawn ship that tilts along the curve with a live thruster. */
.crashship { position: absolute; z-index: 3; width: 62px; height: 62px; transform: translate(-50%, -50%); pointer-events: none;
  transition: none; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6)); }
.crashship svg { width: 100%; height: 100%; overflow: visible; }
.crashship .flame { transform-origin: 20px 34px; animation: flameFlick .11s steps(2, end) infinite; opacity: 0; }
.crashwrap.running .crashship .flame { opacity: 1; }
@keyframes flameFlick { 0% { transform: scaleY(1) scaleX(1); } 100% { transform: scaleY(1.35) scaleX(.88); } }
.crashwrap.running .crashship { animation: shipHum .28s ease-in-out infinite alternate; }
@keyframes shipHum { from { margin-top: 0; } to { margin-top: -2px; } }
/* On a crash the ship tumbles away instead of blowing up. */
.crashwrap.boomed .crashship { animation: shipFall 1.1s cubic-bezier(.35,0,.85,.4) forwards; }
@keyframes shipFall { 0% { opacity: 1; } 100% { opacity: 0; margin-top: 190px; transform: translate(-50%, -50%) rotate(128deg) scale(.72); } }
/* Betting-phase launch pad the ship sits on before liftoff. */
.crashpad { position: absolute; z-index: 2; left: 7%; bottom: 9%; width: 96px; height: 8px; transform: translateX(-50%); border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent); opacity: 0; transition: opacity .3s ease; }
.crashwrap.waiting .crashpad { opacity: 1; }
/* Round history chips above the canvas. */
.crashhist { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 0 8px; }
.crashhist .ch { font-family: var(--mono); font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,0.32); border: 1px solid var(--border); }
.crashhist .ch.lo { color: var(--red); } .crashhist .ch.mid { color: var(--gold); } .crashhist .ch.hi { color: var(--accent); }
.crashside { display: flex; flex-direction: column; min-height: 320px; max-height: 540px; border-radius: 16px; background: rgba(0,0,0,0.24); border: 1px solid var(--border); overflow: hidden; }
.cs-head { display: flex; align-items: baseline; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); }
.cs-head b { font-family: var(--mono); font-size: 15px; color: var(--gold); margin-right: auto; }
.cs-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.cs-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "av name bet" "av name st"; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 9px; font-size: 12px; cursor: pointer; animation: chin .25s ease; }
.cs-row:hover { background: rgba(255,255,255,0.04); }
.cs-row.me { background: rgba(77,163,255,0.1); border: 1px solid rgba(77,163,255,0.3); }
.cs-row.out { background: rgba(61,220,133,0.08); }
.cs-row img, .cs-row .cs-hid { grid-area: av; width: 22px; height: 22px; border-radius: 6px; image-rendering: pixelated; background: var(--panel3); display: block; }
.cs-row .n { grid-area: name; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-row .b { grid-area: bet; font-family: var(--mono); color: var(--muted); font-size: 11px; text-align: right; }
.cs-row .m { grid-area: st; font-family: var(--mono); font-weight: 700; font-size: 10.5px; text-align: right; white-space: nowrap; }
.cs-row .m.w { color: var(--win); } .cs-row .m.l { color: var(--red); } .cs-row .m.p { color: var(--faint); }
.cs-empty { padding: 22px 10px; text-align: center; color: var(--faint); font-size: 12px; font-weight: 700; line-height: 1.5; }
/* Proof strip: the round's committed hash, and the seed once it has blown. */
.crashfair { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; cursor: pointer; }
.crashfair:hover { color: var(--muted); background: rgba(255,255,255,0.03); }
.crashfair svg { width: 12px; height: 12px; flex: 0 0 auto; }
.crashfair code { font-family: var(--mono); font-size: 9px; letter-spacing: 0; color: #7fe0a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= MINES / TOWERS ================= */
.minepick { margin-bottom: 12px; }
.minepick .mp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.minepick .mp-head b { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--red); }
.minepick .mp-head b .g { font-size: 11px; color: var(--faint); font-family: var(--font); font-weight: 700; margin-left: 6px; }
.minepick .range { margin: 6px 0 10px; }
.minepick .range::-webkit-slider-thumb { background: var(--red); box-shadow: 0 0 0 2px rgba(255,92,114,0.45); }
.minepick .seg { margin-bottom: 0; }
.minepick .seg .opt { padding: 8px 2px; font-size: 11px; }
.minepick .seg .opt.sel { background: rgba(255,92,114,0.12); border-color: rgba(255,92,114,0.55); }
.minegrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; max-width: 560px; }
.mtile { position: relative; aspect-ratio: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 13px;
  background: linear-gradient(180deg, #232c3d, #171d2a); border: 1px solid var(--border2); box-shadow: 0 4px 0 #0d1118, 0 8px 14px rgba(0,0,0,0.35); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.mtile:hover { transform: translateY(-3px); border-color: rgba(77,163,255,0.6); }
.mtile:active { transform: translateY(1px); box-shadow: 0 2px 0 #0d1118; }
.mtile.safe { cursor: default; background: linear-gradient(180deg, rgba(61,220,133,0.18), rgba(61,220,133,0.06)); border-color: rgba(61,220,133,0.55); transform: none; box-shadow: 0 0 16px rgba(61,220,133,0.18); animation: tilepop .32s cubic-bezier(.2,.9,.2,1.3); }
.mtile.boom { cursor: default; background: linear-gradient(180deg, rgba(255,92,114,0.24), rgba(255,92,114,0.08)); border-color: rgba(255,92,114,0.6); animation: shake .35s; transform: none; box-shadow: 0 0 18px rgba(255,92,114,0.3); }
.mtile.mine { cursor: default; background: rgba(0,0,0,0.3); border-color: rgba(255,92,114,0.3); transform: none; opacity: .75; }
.mtile.idle { cursor: default; opacity: .4; transform: none; }
.mtile.idle:hover, .mtile.safe:hover, .mtile.mine:hover { transform: none; }
.mtile svg { width: 58%; height: 58%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); }
@keyframes tilepop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.mtile.flip, .trow .tt.flip { animation: tileflip .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tileflip { 0% { transform: rotateY(90deg) scale(.9); } 100% { transform: none; } }
.mtile.mine.late, .trow .tt.trap.late { animation: minelate .3s ease-out both; }
@keyframes minelate { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: .75; } }
.tower { display: flex; flex-direction: column-reverse; gap: 8px; width: 100%; max-width: 580px; }
.trow { display: flex; align-items: center; gap: 7px; }
.trow .tm { flex: 0 0 62px; text-align: right; font-family: var(--mono); font-weight: 700; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.trow.active .tm { color: var(--gold); }
.trow.done .tm { color: var(--win); }
.trow .tt { flex: 1; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: linear-gradient(180deg, #232c3d, #171d2a); border: 1px solid var(--border); opacity: .45; transition: all .14s ease; }
.trow.active .tt { opacity: 1; cursor: pointer; border-color: var(--border2); box-shadow: 0 3px 0 #0d1118; animation: rowglow 1.4s ease-in-out infinite; }
.trow.active .tt:hover { transform: translateY(-2px); border-color: rgba(77,163,255,0.6); }
.trow .tt.safe { opacity: 1; background: rgba(61,220,133,0.14); border-color: rgba(61,220,133,0.55); animation: tilepop .3s cubic-bezier(.2,.9,.2,1.3); }
.trow .tt.boom { opacity: 1; background: rgba(255,92,114,0.2); border-color: rgba(255,92,114,0.6); animation: shake .35s; }
.trow .tt.trap { opacity: .7; background: rgba(255,92,114,0.08); border-color: rgba(255,92,114,0.3); }
.trow .tt svg { width: 26px; height: 26px; }
@keyframes rowglow { 0%, 100% { box-shadow: 0 3px 0 #0d1118; } 50% { box-shadow: 0 3px 0 #0d1118, 0 0 16px rgba(245,197,66,0.35); border-color: rgba(245,197,66,0.5); } }

/* ================= CHICKEN ROAD ================= */
.roadwrap { width: 100%; }
.roadwrap canvas { display: block; width: 100%; height: auto; border-radius: 12px; cursor: pointer; }

/* ================= PLINKO ================= */
.plinkowrap { width: 100%; max-width: 960px; }
.plinkowrap canvas { display: block; width: 100%; height: auto; }

/* ================= WHEEL ================= */
.wheelwrap { position: relative; width: 420px; height: 420px; max-width: 100%; }
.wheelwrap canvas { display: block; width: 100%; height: 100%; }
.wheelhub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 22px; color: var(--text); background: radial-gradient(circle at 38% 30%, #232c3d, #131824); border: 1px solid var(--border2); box-shadow: 0 6px 18px rgba(0,0,0,0.55); font-variant-numeric: tabular-nums; }
.wheelhub.land { animation: badgepop .35s cubic-bezier(.2,.9,.2,1.3); }
.wheelpin { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); z-index: 2; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid var(--gold); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.legend { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 10.5px; color: var(--muted); }
.legend .lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ================= KENO ================= */
.keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; width: 100%; max-width: 640px; }
.kn { aspect-ratio: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--muted); border-radius: 11px;
  background: linear-gradient(180deg, #232c3d, #171d2a); border: 1px solid var(--border); transition: all .14s ease; font-variant-numeric: tabular-nums; }
.kn:hover { color: var(--text); border-color: var(--border2); transform: translateY(-2px); }
.kn.pick { color: #04122b; background: var(--accent); border-color: transparent; font-weight: 800; }
.kn.drawn { color: var(--text); background: rgba(255,255,255,0.09); border-color: var(--border2); animation: knpop .28s cubic-bezier(.2,.8,.2,1); }
.kn.hit { color: #221600; background: var(--gold); border-color: transparent; font-weight: 800; animation: knpop .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 16px rgba(245,197,66,0.45); }
.kn.miss { opacity: .55; }
@keyframes knpop { from { transform: scale(.6); } to { transform: none; } }
.keno-info { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--faint); margin-top: 14px; min-height: 16px; }
.keno-info b { color: var(--gold); }
.kenopay { display: flex; gap: 4px; width: 100%; max-width: 640px; margin-top: 14px; }
.kenopay .kp { flex: 1; text-align: center; padding: 6px 2px; border-radius: 7px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); font-size: 9.5px; font-weight: 800; color: var(--muted); min-width: 0; overflow: hidden; }
.kenopay .kp span { display: block; font-size: 8.5px; color: var(--faint); font-weight: 700; margin-bottom: 2px; }
.kenopay .kp.pay { color: var(--gold); }
.kenopay .kp.hit { color: #221600; background: var(--gold); border-color: transparent; }
.kenopay .kp.hit span { color: #5a3d00; }

/* ================= SLOTS ================= */
.slotmachine { width: 100%; max-width: 560px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, #1f2637, #12161f); border: 1px solid var(--border2); box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 20px 50px rgba(0,0,0,0.5); }
.slotwin { display: flex; gap: 10px; position: relative; }
.slotwin::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(245,197,66,0.6); z-index: 2; pointer-events: none; box-shadow: 0 0 10px rgba(245,197,66,0.5); }
.slotwin.win::before { animation: linepulse .5s ease-in-out 4; }
@keyframes linepulse { 0%, 100% { box-shadow: 0 0 10px rgba(245,197,66,0.5); } 50% { box-shadow: 0 0 26px rgba(255,210,77,1); background: #fff; } }
.sreel { flex: 1; height: 300px; overflow: hidden; border-radius: 13px; background: rgba(0,0,0,0.45); border: 1px solid var(--border2); position: relative; }
.sreel::before, .sreel::after { content: ''; position: absolute; left: 0; right: 0; height: 70px; z-index: 1; pointer-events: none; }
.sreel::before { top: 0; background: linear-gradient(180deg, rgba(10,13,19,0.95), transparent); }
.sreel::after { bottom: 0; background: linear-gradient(0deg, rgba(10,13,19,0.95), transparent); }
.sreel.stopped { animation: reelbump .22s ease-out; }
@keyframes reelbump { 0% { transform: translateY(0); } 40% { transform: translateY(6px); } 100% { transform: none; } }
.sstrip { will-change: transform; }
.ssym { height: 100px; display: flex; align-items: center; justify-content: center; }
.ssym svg { width: 66px; height: 66px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.sreel.won { border-color: rgba(245,197,66,0.7); box-shadow: 0 0 22px rgba(245,197,66,0.35); }

/* ================= ROULETTE ================= */
.roul { width: 100%; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; align-items: start; }
@container (min-width: 820px) { .roul { grid-template-columns: 300px minmax(0, 1fr); justify-items: stretch; } }
@supports not (container-type: inline-size) { @media (min-width: 1700px) { .roul { grid-template-columns: 250px minmax(0, 1fr); justify-items: stretch; } } }
.roulwheel { position: relative; width: 300px; height: 300px; }
.roulwheel canvas { display: block; width: 100%; height: 100%; }
.roulwheel canvas.ball { position: absolute; inset: 0; pointer-events: none; }
.roulnum { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 26px; color: #fff; background: #131824; border: 2px solid var(--border2); box-shadow: 0 6px 18px rgba(0,0,0,0.55); }
.roulnum.red { background: #d63a4a; } .roulnum.black { background: #222838; } .roulnum.green { background: #1f9d55; }
.rtable { display: grid; grid-template-columns: 34px repeat(12, minmax(0, 1fr)) 40px; grid-auto-rows: 38px; gap: 3px; width: 100%; max-width: 640px; user-select: none; }
.rc { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 7px; font-weight: 800; font-size: 11.5px; color: #fff; border: 1px solid rgba(255,255,255,0.08); transition: transform .1s ease, filter .1s ease; min-width: 0; overflow: hidden; }
.rc:hover { filter: brightness(1.2); transform: translateY(-1px); }
.rc.red { background: #b7303f; } .rc.black { background: #232a3a; } .rc.green { background: #1b7f46; grid-row: span 3; }
.rc.out { background: rgba(255,255,255,0.05); color: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; }
.rc.out.rr { background: rgba(214,58,74,0.25); color: #ffb3bb; } .rc.out.bb { background: rgba(0,0,0,0.35); }
.rc.col { background: rgba(255,255,255,0.05); color: var(--muted); font-size: 10px; }
.rc.winner { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(245,197,66,0.6); z-index: 2; animation: cellpulse .6s ease-in-out 3; }
@keyframes cellpulse { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
.rc .chip { position: absolute; right: -4px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 9px; color: #221600; background: radial-gradient(circle at 40% 30%, #ffe1a0, var(--gold) 60%, #b8801a); border: 2px dashed rgba(0,0,0,0.35); box-shadow: 0 3px 8px rgba(0,0,0,0.5); z-index: 3; animation: tilepop .2s ease; }
.chiprow { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.chiprow .chipbtn { cursor: pointer; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 10px; color: #fff; border: 3px dashed rgba(255,255,255,0.45); background: #3b4a6b; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: transform .12s ease; }
.chiprow .chipbtn:hover { transform: translateY(-2px); }
.chiprow .chipbtn.sel { box-shadow: 0 0 0 3px var(--gold), 0 4px 10px rgba(0,0,0,0.5); }
.chiprow .chipbtn.c1 { background: #4a7fd6; } .chiprow .chipbtn.c2 { background: #2e9e5b; } .chiprow .chipbtn.c3 { background: #b7303f; } .chiprow .chipbtn.c4 { background: #7a4bd6; } .chiprow .chipbtn.c5 { background: #c78a1f; color: #221600; }
.roulhist .ch { min-width: 28px; text-align: center; }

/* ================= CARDS (blackjack, hilo, war) ================= */
/* ---- blackjack: a real felt table with an arc, a shoe and a chip tray ---- */
/* Same navy felt and oval rail as the multiplayer tables, so both blackjacks
   read as one family. The rail is drawn INSIDE the felt (it used to spill
   past the edge) and the table clips its contents. */
.bjtable { position: relative; overflow: hidden; width: 100%; max-width: 700px; padding: 22px 22px 26px; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #1e2842, #151c30 55%, #111729 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex; flex-direction: column; gap: 18px; }
.bjtable::before { content: ''; position: absolute; left: 7%; right: 7%; top: 18px; bottom: 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.14); pointer-events: none; }
.bjtable::after { content: ''; position: absolute; left: calc(7% + 10px); right: calc(7% + 10px); top: 28px; bottom: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.05); pointer-events: none; }
.bjrules { position: relative; z-index: 1; text-align: center; pointer-events: none; margin: -4px 0; }
.bjrules .r1 { display: inline-block; padding: 6px 30px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.22em; color: rgba(255,255,255,0.32); background: rgba(0,0,0,0.28); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.bjrules .r2 { display: inline-block; margin-top: 5px; padding: 4px 22px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.2em; color: rgba(255,255,255,0.22); background: rgba(0,0,0,0.22); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.bjtable { min-height: 520px; justify-content: space-between; }
/* Chip tray sunk into the felt in front of the dealer. */
.bjtray { position: absolute; left: 20px; top: 18px; display: flex; gap: 5px; z-index: 1; opacity: .85; }
.bjtray i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.28), inset 0 -4px 8px rgba(0,0,0,0.4), 0 3px 7px rgba(0,0,0,0.5); }
.bjtray i:nth-child(1) { background: #d63a4a; } .bjtray i:nth-child(2) { background: #2b86f0; }
.bjtray i:nth-child(3) { background: #1f2733; } .bjtray i:nth-child(4) { background: #e9edf3; } .bjtray i:nth-child(5) { background: #f5c542; }
/* The player's betting circle: the chip that represents this hand's stake. */
.bjspot { position: relative; z-index: 1; margin: 2px auto 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  border: 2px dashed rgba(255,255,255,0.16); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.05), transparent 70%); transition: all .25s ease; }
.bjspot .bl { font-size: 8px; font-weight: 900; letter-spacing: 0.16em; color: rgba(255,255,255,0.3); }
.bjspot .bv { margin-top: 2px; font-size: 13px; font-weight: 900; color: rgba(255,255,255,0.42); font-variant-numeric: tabular-nums; }
.bjspot.live { border-style: solid; border-color: rgba(255,210,77,0.6); background: radial-gradient(circle at 50% 35%, rgba(255,210,77,0.2), rgba(255,210,77,0.04) 70%); box-shadow: 0 0 0 6px rgba(255,210,77,0.06), 0 8px 22px rgba(0,0,0,0.45); }
.bjspot.live .bl { color: rgba(255,210,77,0.75); }
.bjspot.live .bv { color: #ffe089; }
.bjspot.doubled { animation: bjSpotPush .5s cubic-bezier(.2,.9,.2,1.35); }
@keyframes bjSpotPush { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
.bjhand { position: relative; z-index: 1; text-align: center; }

.bjlab { font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px; }
.bjlab b { display: inline-block; min-width: 26px; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-family: var(--mono); font-size: 12px; }
.bjlab b.bust { color: var(--red); } .bjlab b.bj { color: var(--gold); } .bjlab b.tag { color: var(--gold); }
.bjlab b.pop { animation: badgepop .3s cubic-bezier(.2,.9,.2,1.3); }
@keyframes badgepop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.cards { display: flex; justify-content: center; gap: 0; min-height: 100px; }
.card { width: 84px; height: 120px; margin-left: -20px; border-radius: 10px; background: linear-gradient(157deg, #ffffff 0%, #f3f6fa 52%, #e2e8f0 100%); color: #171a22; position: relative; box-shadow: 0 10px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.22); font-weight: 800; transform-style: preserve-3d; transition: transform .26s ease-in; }
.card::after { content: ''; position: absolute; inset: 4px; border-radius: 7px; border: 1px solid rgba(0,0,0,0.07); pointer-events: none; }
.card:first-child { margin-left: 0; }
.card.red { color: #d63a4a; }
.card .r { position: absolute; left: 7px; top: 5px; font-size: 15px; line-height: 1; }
.card .s { position: absolute; left: 7px; top: 22px; font-size: 13px; line-height: 1; }
.card .big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.card .r2 { position: absolute; right: 7px; bottom: 5px; font-size: 15px; line-height: 1; transform: rotate(180deg); }
.card.back { background: repeating-linear-gradient(45deg, #2b86f0 0 6px, #1b5fb3 6px 12px); border-color: rgba(255,255,255,0.2); }
.card.back::after { border-color: transparent; }
.card.back::after { content: ''; position: absolute; inset: 6px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.35); }
.card.deal { animation: carddeal .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes carddeal { from { transform: translate(260px, -180px) rotate(22deg) scale(.8); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.card.flipping { transform: rotateY(90deg); }
.card.flipped { animation: cardunflip .26s ease-out both; }
@keyframes cardunflip { from { transform: rotateY(-90deg); } to { transform: none; } }
.cards.bust .card { animation: shake .4s; filter: saturate(.6) brightness(.85); }
.cards.glow .card { box-shadow: 0 0 0 2px rgba(255,210,77,0.7), 0 0 24px rgba(255,210,77,0.5), 0 8px 20px rgba(0,0,0,0.5); }
.bjactions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.bjactions .btn.cash { background: linear-gradient(180deg, #2fd07a, #1fa85e); }
.bjactions .btn { padding: 12px 8px; font-size: 12px; }
.bjdeck { position: absolute; right: 26px; top: 40px; width: 52px; height: 74px; z-index: 3; }
.bjdeck i { position: absolute; inset: 0; border-radius: 7px; background: repeating-linear-gradient(45deg, #2b86f0 0 6px, #1b5fb3 6px 12px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.45); }
.bjdeck i:nth-child(2) { transform: translate(2px, -2px); } .bjdeck i:nth-child(3) { transform: translate(4px, -4px); }

/* ---- hilo ---- */
.hilostage { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 0; }
.hl-cur { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 176px; }
.hl-cur .card { width: 140px; height: 200px; margin: 0; border-radius: 16px; }
.hl-cur .card .r { font-size: 22px; left: 10px; top: 8px; } .hl-cur .card .s { font-size: 18px; left: 10px; top: 34px; } .hl-cur .card .big { font-size: 72px; } .hl-cur .card .r2 { font-size: 22px; right: 10px; bottom: 8px; }
.hl-cur .card.slide { animation: hlslide .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hlslide { from { transform: translateX(120px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.hl-cur .card.out { position: absolute; animation: hlout .4s ease both; }
@keyframes hlout { to { transform: translateX(-140px) scale(.8); opacity: 0; } }
.hl-cur .card.wrong { animation: shake .4s, hlfade .5s .3s both; }
@keyframes hlfade { to { filter: saturate(.4) brightness(.7); } }
.hl-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; }
.hl-btn { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--border2); background: linear-gradient(180deg, #232c3d, #171d2a); color: var(--text); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; transition: all .15s ease; }
.hl-btn small { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--gold); }
.hl-btn .pc { font-size: 10px; color: var(--faint); font-weight: 700; letter-spacing: 0.05em; }
.hl-btn.hi:hover { border-color: rgba(61,220,133,0.6); background: rgba(61,220,133,0.12); transform: translateY(-2px); }
.hl-btn.lo:hover { border-color: rgba(255,92,114,0.6); background: rgba(255,92,114,0.12); transform: translateY(-2px); }
.hl-btn.same { grid-column: span 2; flex-direction: row; justify-content: center; gap: 12px; padding: 11px; }
.hl-btn.same:hover { border-color: rgba(245,197,66,0.6); background: rgba(245,197,66,0.1); }
.hl-btn[disabled] { opacity: .35; cursor: default; transform: none !important; }
.hl-btn svg { width: 22px; height: 22px; }
.hl-strip { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 30px; }
.hl-strip .hc { width: 26px; height: 36px; border-radius: 5px; background: #fff; color: #1a1d26; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,0.4); animation: chin .25s ease; position: relative; }
.hl-strip .hc.red { color: #d63a4a; }
.hl-strip .hc.skip { opacity: .45; }
.hl-strip .hc.bad { box-shadow: 0 0 0 2px var(--red); }
.hl-strip .hc i { position: absolute; right: -5px; top: -5px; width: 13px; height: 13px; border-radius: 50%; font-style: normal; font-size: 8px; display: flex; align-items: center; justify-content: center; color: #04122b; background: var(--win); }
.hl-strip .hc i.lo { background: var(--red); color: #fff; }
.hl-strip .hc i.sk { background: var(--muted); color: #fff; }

/* ---- casino war ---- */
.warstage { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.war-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: 100%; }
.war-seat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.war-seat .who { font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.war-seat .cards { min-height: 110px; gap: 8px; }
.war-seat .card { width: 96px; height: 136px; margin: 0; }
.war-seat .card .big { font-size: 34px; }
.war-seat.win .card { box-shadow: 0 0 0 2px rgba(61,220,133,0.8), 0 0 26px rgba(61,220,133,0.45), 0 8px 20px rgba(0,0,0,0.5); }
.war-seat.lose .card { filter: saturate(.5) brightness(.7); }
.war-vs { font-weight: 800; font-size: 22px; color: var(--faint); font-family: var(--mono); }
.war-vs.war { color: var(--red); animation: badgepop .4s cubic-bezier(.2,.9,.2,1.3); text-shadow: 0 0 18px rgba(255,92,114,0.6); }
.war-banner { font-weight: 800; font-size: 13px; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; min-height: 18px; animation: chin .3s ease; }
.war-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 420px; }
.war-pay .wp { text-align: center; padding: 8px; border-radius: 10px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); font-size: 10px; font-weight: 800; color: var(--faint); letter-spacing: 0.06em; }
.war-pay .wp b { display: block; font-family: var(--mono); font-size: 14px; color: var(--gold); margin-top: 2px; }

/* ---- rock paper scissors: best-of arena, real countdown, hand cycling ---- */
.rpsstage { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* Scoreboard strip across the top: your score, the round pill, the house score. */
.rps-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: 100%; max-width: 560px;
  padding: 12px 16px; border-radius: 16px; background: rgba(0,0,0,0.32); border: 1px solid var(--border); }
.rps-score { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rps-score .n { font-size: 9.5px; font-weight: 900; letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; }
.rps-score .v { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
.rps-score.lead .v { color: var(--gold); text-shadow: 0 0 18px rgba(255,210,77,0.35); }
.rps-round { font-size: 9.5px; font-weight: 900; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); white-space: nowrap; }
/* The two hands and the strike zone between them. */
.rps-arena { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: 100%; max-width: 620px;
  padding: 26px 20px; border-radius: 24px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(77,163,255,0.09), transparent 65%), linear-gradient(170deg, #161c28, #0d1119);
  border: 1px solid var(--border2); box-shadow: 0 24px 56px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); }
.rps-seat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rps-seat .who { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.rps-seat .who img { width: 20px; height: 20px; border-radius: 5px; image-rendering: pixelated; }
.rps-hand { position: relative; width: 156px; height: 156px; border-radius: 34px; display: grid; place-items: center;
  background: linear-gradient(180deg, #263045, #151b27); border: 1px solid var(--border2);
  box-shadow: 0 16px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07); transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease, filter .22s ease; }
.rps-hand svg { width: 96px; height: 96px; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55)); }
/* Both fists pump three times, mirrored, before they open. */
.rps-hand.pump { animation: rpsPump .42s cubic-bezier(.4,0,.6,1) 3; }
.rps-seat.house .rps-hand.pump { animation-name: rpsPumpMirror; }
@keyframes rpsPump { 0%, 100% { transform: translateY(0) rotate(-6deg); } 45% { transform: translateY(-26px) rotate(-16deg); } }
@keyframes rpsPumpMirror { 0%, 100% { transform: translateY(0) rotate(6deg); } 45% { transform: translateY(-26px) rotate(16deg); } }
.rps-hand.reveal { animation: rpsReveal .3s cubic-bezier(.2,.9,.2,1.4); }
@keyframes rpsReveal { 0% { transform: scale(.82) rotate(-10deg); } 60% { transform: scale(1.09); } 100% { transform: none; } }
.rps-seat.win .rps-hand { border-color: rgba(61,220,133,0.7); box-shadow: 0 0 0 2px rgba(61,220,133,0.45), 0 0 34px rgba(61,220,133,0.34), 0 16px 34px rgba(0,0,0,0.5); transform: scale(1.05); }
.rps-seat.lose .rps-hand { filter: saturate(.35) brightness(.62); transform: scale(.95); }
.rps-seat.tie .rps-hand { border-color: rgba(255,210,77,0.5); box-shadow: 0 0 0 2px rgba(255,210,77,0.28), 0 16px 34px rgba(0,0,0,0.5); }
/* Centre column: countdown -> VS -> the "X beats Y" verdict. */
.rps-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; }
.rps-count { font-family: var(--mono); font-size: 30px; font-weight: 900; color: var(--gold); line-height: 1; min-height: 32px; text-shadow: 0 0 22px rgba(255,210,77,0.4); }
.rps-count.tick { animation: rpsTick .4s cubic-bezier(.2,.9,.2,1.3); }
@keyframes rpsTick { 0% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.rps-vs { font-weight: 900; font-size: 15px; letter-spacing: 0.14em; color: var(--faint); font-family: var(--mono); }
/* Which hand beats which, drawn as a live triangle under the arena. */
.rps-key { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rps-keyi { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; transition: all .2s ease; }
.rps-keyi svg { width: 15px; height: 15px; }
.rps-keyi.hot { color: #cfe6ff; border-color: rgba(77,163,255,0.5); background: rgba(77,163,255,0.1); }
.rps-banner { font-weight: 900; font-size: 13.5px; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; min-height: 19px; text-align: center; }
.rps-banner.win { color: var(--win); } .rps-banner.lose { color: var(--red); }
/* Left-panel picker: three big hand buttons + an auto-shuffle option. */
.rps-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.rps-pick .opt { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 6px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); font-weight: 800; font-size: 10px; letter-spacing: 0.06em; color: var(--muted); transition: all .16s ease; }
.rps-pick .opt svg { width: 38px; height: 38px; transition: transform .16s ease; }
.rps-pick .opt:hover { color: var(--text); border-color: var(--border2); transform: translateY(-2px); }
.rps-pick .opt:hover svg { transform: scale(1.08); }
.rps-pick .opt.sel { color: #fff; background: rgba(77,163,255,0.12); border-color: rgba(77,163,255,0.55); box-shadow: 0 0 0 1px rgba(77,163,255,0.2); }
.rps-pick .opt.rand { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; padding: 10px; font-size: 10px; }
.rps-pick .opt.rand svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .rps-hand { width: 118px; height: 118px; border-radius: 26px; }
  .rps-hand svg { width: 72px; height: 72px; }
}

/* ================= POOL (eight ball, PvP) ================= */
.poolpage { width: 100%; }
.pool-head { margin-bottom: 18px; }
.pool-title { font-size: 17px; font-weight: 900; letter-spacing: 0.12em; color: var(--text); }
.pool-sub { margin-top: 6px; max-width: 720px; font-size: 12px; line-height: 1.6; color: var(--faint); }
.pool-make { max-width: 380px; padding: 16px; border-radius: 16px; background: rgba(0,0,0,0.26); border: 1px solid var(--border); margin-bottom: 20px; }
.pool-make label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; margin-bottom: 7px; }
.pool-rake { margin-top: 8px; font-size: 10.5px; color: var(--faint); }
.pool-lab { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; margin: 0 0 8px; }
.pool-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pool-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(0,0,0,0.26); border: 1px solid var(--border); }
.pool-row:hover { border-color: var(--border2); }
.pr-who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--text); min-width: 0; }
.pr-who img { width: 24px; height: 24px; border-radius: 7px; image-rendering: pixelated; }
.pr-wager { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--gold); }
.pool-row .joinbtn { flex: 0 0 auto; }
/* ---- the frame ---- */
.pool-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pool-pot { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); }
.pool-pot b { font-family: var(--mono); font-size: 15px; color: var(--gold); margin-left: 6px; letter-spacing: 0; }
.pool-turn { margin-left: auto; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.pool-turn.mine { color: #0b1a12; background: var(--win); border-color: transparent; animation: poolPulse 1.6s ease-in-out infinite; }
.pool-turn.over { color: var(--gold); border-color: rgba(255,210,77,0.4); background: rgba(255,210,77,0.08); }
@keyframes poolPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61,220,133,0.5); } 50% { box-shadow: 0 0 0 8px rgba(61,220,133,0); } }
.pool-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; max-width: 620px; }
.pool-player { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 13px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); transition: all .2s ease; }
.pool-player img, .pool-player .bjt-hid { width: 30px; height: 30px; border-radius: 8px; image-rendering: pixelated; }
.pp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-n { font-size: 12.5px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-g { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); }
.pp-g.solids { color: #ffd24d; } .pp-g.stripes { color: #4da3ff; }
.pool-player.on { border-color: rgba(61,220,133,0.5); background: rgba(61,220,133,0.08); }
.pool-player.me .pp-n { color: #cfe6ff; }
.pool-player.won { border-color: rgba(255,210,77,0.6); background: rgba(255,210,77,0.1); box-shadow: 0 0 22px rgba(255,210,77,0.18); }
.pool-felt { position: relative; width: 100%; max-width: 1040px; }
.pool-felt canvas { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.6); cursor: crosshair; }
.pool-shotnote { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.45); padding: 5px 12px; border-radius: 999px; pointer-events: none; }
.pool-ctrl { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; max-width: 1040px; }
.pool-power { flex: 1; min-width: 220px; }
.pool-power label { display: flex; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; margin-bottom: 7px; }
.pool-power label b { font-family: var(--mono); color: var(--gold); font-size: 12px; letter-spacing: 0; }
.pool-powerbar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.pool-powerbar i { display: block; height: 100%; width: 70%; border-radius: 999px; background: linear-gradient(90deg, #3ddc85, #f5c542 55%, #ff5d6c); box-shadow: 0 0 12px rgba(255,210,77,0.35); transition: width .08s linear; }
.pool-ctrl .btn.big { flex: 0 0 auto; width: auto; padding: 14px 30px; }
.pool-ctrl .btn.alt { flex: 0 0 auto; width: auto; padding: 14px 20px; }
.pool-result { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; min-height: 20px; }
.pool-result.win { color: var(--win); } .pool-result.lose { color: var(--red); }
.pool-fair { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.pool-fair svg { width: 12px; height: 12px; }
.pool-fair code { font-family: var(--mono); font-size: 9px; letter-spacing: 0; color: #7fe0a8; }
@media (max-width: 700px) { .pool-scores { grid-template-columns: 1fr; } }

/* ================= BLACKJACK TABLES (multiplayer, Rainbet layout) ================= */
.bjtpage { width: 100%; }
.bjt-head { margin-bottom: 18px; }
.bjt-title { font-size: 17px; font-weight: 900; letter-spacing: 0.12em; color: var(--text); }
.bjt-sub { margin-top: 6px; max-width: 720px; font-size: 12px; line-height: 1.6; color: var(--faint); }
.bjt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tone-bronze { --tt: #c98a4a; } .tone-silver { --tt: #b9c4d4; } .tone-gold { --tt: #f5c542; }
.tone-violet { --tt: #a78bfa; } .tone-crimson { --tt: #ff5d6c; }
/* ---- lobby cards ---- */
.bjt-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in srgb, var(--tt) 10%, #141a26), #0f141e);
  border: 1px solid color-mix(in srgb, var(--tt) 32%, transparent); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bjt-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tt) 60%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
.bjt-card.mine { border-color: color-mix(in srgb, var(--tt) 75%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tt) 40%, transparent); }
.bjt-felt-mini { position: relative; height: 62px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden;
  background: radial-gradient(90% 90% at 50% 0%, rgba(255,255,255,0.05), transparent 60%), #171f33; border: 1px solid rgba(255,255,255,0.07); }
.bjt-felt-mini::before { content: ''; position: absolute; left: 10%; right: 10%; top: 26%; height: 120%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); }
.bjt-felt-mini .chip { width: 26px; height: 26px; }
.bjt-felt-mini .chip .chipsvg text { font-size: 12px; }
.bjt-badge { position: absolute; right: 12px; top: 12px; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; padding: 4px 8px; border-radius: 999px; color: #0b0d13; background: var(--tt); z-index: 1; }
.bjt-badge.inline { position: static; margin-left: 8px; }
.bjt-name { font-size: 14px; font-weight: 900; letter-spacing: 0.06em; color: var(--text); }
.bjt-limits { display: flex; align-items: baseline; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); }
.bjt-limits b { font-family: var(--mono); font-size: 12.5px; color: var(--tt); letter-spacing: 0; }
.bjt-entry { font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--tt) 80%, #fff); }
.bjt-entry.open { color: var(--faint); }
.bjt-seatsline { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
.bjt-dot { width: 7px; height: 7px; border-radius: 50%; background: #3a4356; }
.bjt-dot.live { background: var(--win); box-shadow: 0 0 8px var(--win); }
.bjt-faces { display: flex; gap: 4px; min-height: 24px; align-items: center; }
.bjt-faces img, .bjt-hid { width: 24px; height: 24px; border-radius: 7px; image-rendering: pixelated; background: var(--panel3); }
.bjt-hid { background: repeating-linear-gradient(45deg, #2a3040 0 4px, #1d2330 4px 8px); }
.bjt-empty { font-size: 10.5px; color: var(--faint); }
/* ---- chips: SVG discs with notched edges, Rainbet colours by denomination index ---- */
.chip { position: relative; display: inline-block; width: 46px; height: 46px; border-radius: 50%; user-select: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); }
.chip .chipsvg { display: block; width: 100%; height: 100%; }
.chip.sm { width: 32px; height: 32px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.chip.sm .chipsvg text { font-size: 11px; }
/* ---- the table ---- */
.bjt-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bjt-bartitle { display: flex; align-items: center; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; color: var(--text); }
.bjt-barlim { font-family: var(--mono); font-size: 12px; color: var(--tt); }
.bjt-phase { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255,210,77,0.09); border: 1px solid rgba(255,210,77,0.28); }
.bjt-phase i { display: block; width: 46px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.bjt-phase i b { display: block; height: 100%; width: 100%; background: currentColor; transition: width .12s linear; }
.bjt-table { position: relative; height: 520px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1e2842, #151c30 55%, #111729 100%); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05); }
/* Rainbet's oval rail: one big rounded pill drawn as an outline. */
.bjt-rail { position: absolute; left: 12%; right: 12%; top: 30px; bottom: 96px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.14); pointer-events: none; }
.bjt-rail::after { content: ''; position: absolute; inset: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.05); }
/* Centre ribbons, hexagon-ended like the reference. */
.bjt-ribbons { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.bjt-ribbon { position: relative; padding: 7px 34px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.22em; color: rgba(255,255,255,0.32); background: rgba(0,0,0,0.28); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.bjt-ribbon.sub { padding: 5px 26px; font-size: 8.5px; letter-spacing: 0.2em; color: rgba(255,255,255,0.22); }
/* Shoe at the right edge, half off the table like the reference. */
.bjt-shoe { position: absolute; right: -14px; top: 22%; width: 70px; height: 100px; transform: translateY(-50%) rotate(-6deg); }
.bjt-shoe i { position: absolute; inset: 0; border-radius: 9px; background: repeating-linear-gradient(45deg, #2b86f0 0 6px, #1b5fb3 6px 12px); border: 2px solid rgba(255,255,255,0.35); box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.bjt-shoe i:nth-child(2) { transform: translate(-4px, 3px); } .bjt-shoe i:nth-child(3) { transform: translate(-8px, 6px); } .bjt-shoe i:nth-child(4) { transform: translate(-12px, 9px); }
.bjt-shoe .n { position: absolute; right: 22px; bottom: -18px; font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.3); white-space: nowrap; transform: rotate(6deg); }
/* Dealer hand top centre. */
.bjt-dealer { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bjt-dlab { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; color: rgba(255,255,255,0.45); }
.bjt-val { min-width: 26px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-family: var(--mono); font-size: 12px; text-align: center; }
.bjt-val.bust { color: var(--red); border-color: rgba(255,92,114,0.5); } .bjt-val.bj { color: var(--gold); border-color: rgba(255,210,77,0.5); }
.bjt-val.pop { animation: badgepop .3s cubic-bezier(.2,.9,.2,1.3); }
.bjt-cards { display: flex; min-height: 96px; }
.bjt-cards .card { width: 68px; height: 96px; margin-left: -24px; border-radius: 9px; }
.bjt-cards .card:first-child { margin-left: 0; }
.bjt-cards .card .r, .bjt-cards .card .r2 { font-size: 13px; } .bjt-cards .card .s { font-size: 11px; top: 19px; } .bjt-cards .card .big { font-size: 34px; }
.bjt-cards .card.fresh { animation: bjtDeal .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bjtDeal { from { transform: translate(340px, -120px) rotate(18deg) scale(.86); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
/* Five boxes along the bottom arc; each is absolutely placed on the rail curve. */
.bjt-seat { position: absolute; bottom: 42px; width: 150px; margin-left: -75px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .25s ease; }
.bjt-seat.s0 { left: 14%; bottom: 128px; } .bjt-seat.s1 { left: 32%; bottom: 72px; } .bjt-seat.s2 { left: 50%; bottom: 52px; } .bjt-seat.s3 { left: 68%; bottom: 72px; } .bjt-seat.s4 { left: 86%; bottom: 128px; }
.bjt-seat .bjt-cards { min-height: 0; }
.bjt-seat .bjt-cards .card { width: 54px; height: 76px; margin-left: -20px; }
.bjt-seat .bjt-cards .card .r, .bjt-seat .bjt-cards .card .r2 { font-size: 11px; left: 5px; top: 4px; }
.bjt-seat .bjt-cards .card .r2 { left: auto; right: 5px; top: auto; bottom: 4px; }
.bjt-seat .bjt-cards .card .s { font-size: 9px; left: 5px; top: 16px; } .bjt-seat .bjt-cards .card .big { font-size: 26px; }
.bjt-hands { display: flex; gap: 10px; align-items: flex-end; }
.bjt-hand { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 10px; padding: 4px; transition: background .2s ease, box-shadow .2s ease; }
.bjt-hand.cur { background: rgba(255,210,77,0.08); box-shadow: inset 0 0 0 1px rgba(255,210,77,0.4); }
.bjt-hand .bjt-val { font-size: 11px; padding: 1px 7px; }
/* The betting circle with its chip stack. */
.bjt-spot { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(255,255,255,0.18); transition: border-color .2s ease, background .2s ease; }
.bjt-seat.empty .bjt-spot { cursor: pointer; }
.bjt-seat.empty:hover .bjt-spot { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.bjt-spot .plus { font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.35); }
.bjt-spot.live { border-style: solid; border-color: rgba(255,210,77,0.5); background: rgba(255,210,77,0.06); }
.bjt-stack { position: absolute; left: 50%; bottom: 10px; width: 30px; height: 30px; margin-left: -15px; }
.bjt-stack .chip { position: absolute; left: 0; top: 0; }
.bjt-stack .chip.fly { animation: chipFly .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chipFly { from { transform: translateY(280px) translateX(-40px) rotate(-30deg) scale(.55); opacity: 0; } 60% { opacity: 1; } 85% { transform: translateY(-4px) scale(1.05); } to { transform: none; opacity: 1; } }
/* Settlement moves: losing stacks are swept up to the dealer, a payout stack
   drops in beside a winning bet, a push just flashes the circle. */
.bjt-stack.sweep { animation: chipSweep .7s cubic-bezier(.4,0,.8,.4) .1s forwards; }
@keyframes chipSweep { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--sweepx, 0), -300px) scale(.5); opacity: 0; } }
.bjt-pay { position: absolute; left: 50%; bottom: 10px; width: 32px; height: 32px; margin-left: 4px; animation: chipPay .6s cubic-bezier(.2,.8,.2,1) both; }
.bjt-pay .chip { position: absolute; left: 0; top: 0; }
@keyframes chipPay { from { transform: translate(60px, -320px) scale(.5); opacity: 0; } 65% { opacity: 1; } 88% { transform: translate(0, -4px); } to { transform: none; opacity: 1; } }
.bjt-spot.flash { animation: spotFlash .9s ease; }
@keyframes spotFlash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 5px rgba(255,255,255,0.18), 0 0 22px rgba(255,255,255,0.25); } }
/* Last round's cards slide off the felt before the next deal. */
.bjt-cards .card.gone { animation: cardGone .4s ease-in forwards; pointer-events: none; }
@keyframes cardGone { to { transform: translate(120px, -160px) rotate(12deg); opacity: 0; } }
.bjt-stakelab { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: #ffe089; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
/* Name plate under the box, with the turn ring around the avatar. */
.bjt-plate { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.09); max-width: 150px; margin-top: 12px; }
.bjt-seat.me .bjt-plate { border-color: rgba(77,163,255,0.55); background: rgba(77,163,255,0.14); }
.bjt-av { position: relative; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; }
.bjt-av img, .bjt-av .bjt-hid { width: 18px; height: 18px; border-radius: 5px; }
.bjt-av svg { position: absolute; inset: -3px; width: 28px; height: 28px; transform: rotate(-90deg); }
.bjt-av svg circle { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 75.4; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset .12s linear; }
.bjt-pname { font-size: 10.5px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bjt-seat.turn .bjt-plate { box-shadow: 0 0 0 1px rgba(255,210,77,0.5), 0 0 18px rgba(255,210,77,0.25); }
.bjt-res { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; animation: tilepop .4s cubic-bezier(.2,.9,.2,1.3); z-index: 2; }
.bjt-res.win, .bjt-res.blackjack { color: #0b1a12; background: var(--win); box-shadow: 0 0 16px rgba(61,220,133,0.45); }
.bjt-res.push { color: var(--text); background: rgba(255,255,255,0.16); }
.bjt-res.lose, .bjt-res.bust { color: #fff; background: rgba(255,92,114,0.9); }
.bjt-seat.o-lose .bjt-cards, .bjt-seat.o-bust .bjt-cards { opacity: .7; filter: saturate(.6); }
.bjt-seat.o-lose .bjt-stakelab, .bjt-seat.o-bust .bjt-stakelab { opacity: .35; text-decoration: line-through; }
.bjt-seat.o-win .bjt-cards .card, .bjt-seat.o-blackjack .bjt-cards .card { box-shadow: 0 0 0 2px rgba(61,220,133,0.6), 0 0 18px rgba(61,220,133,0.4), 0 10px 24px rgba(0,0,0,0.55); }
/* ---- Rainbet control bar under the table ---- */
.bjt-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,0.26); border: 1px solid var(--border); }
.bjt-cl { display: flex; flex-direction: column; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.bjt-cl b { font-family: var(--mono); font-size: 13px; color: var(--text); letter-spacing: 0; }
.bjt-cr { display: flex; justify-content: flex-end; gap: 8px; }
.bjt-cc { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.bjt-bigbet { width: 320px; max-width: 100%; padding: 15px 20px; border-radius: 12px; font-size: 14px; font-weight: 900; letter-spacing: 0.06em; color: #04160b; background: linear-gradient(180deg, #37d97f, #22b866); box-shadow: 0 10px 26px rgba(61,220,133,0.28), inset 0 1px 0 rgba(255,255,255,0.35); cursor: pointer; border: none; transition: transform .14s ease, filter .14s ease; }
.bjt-bigbet:hover { transform: translateY(-1px); filter: brightness(1.05); }
.bjt-bigbet:disabled { filter: grayscale(.5) brightness(.6); cursor: default; transform: none; box-shadow: none; }
.bjt-actions { display: flex; gap: 8px; }
.bjt-act { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: var(--text); background: rgba(255,255,255,0.05); border: 1px solid var(--border2); cursor: pointer; transition: all .14s ease; }
.bjt-act svg { width: 16px; height: 16px; }
.bjt-act:hover:not(:disabled) { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.bjt-act:disabled { opacity: .35; cursor: default; }
.bjt-act.stand:not(:disabled) { border-color: rgba(61,220,133,0.5); color: #9ff7cf; }
.bjt-act.hit:not(:disabled) { border-color: rgba(77,163,255,0.5); color: #bfe0ff; }
.bjt-act.double:not(:disabled) { border-color: rgba(255,210,77,0.5); color: #ffe089; }
.bjt-act.split:not(:disabled) { border-color: rgba(167,139,250,0.5); color: #d8c7ff; }
.bjt-act .x2 { font-family: var(--mono); font-weight: 900; color: var(--gold); }
.bjt-tray { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bjt-tray .chip { cursor: pointer; transition: transform .14s ease, filter .14s ease; }
.bjt-tray .chip:hover { transform: translateY(-4px) scale(1.06); }
.bjt-tray .chip:active { transform: translateY(0) scale(.96); }
.bjt-tray .chip.off { opacity: .35; cursor: default; transform: none; filter: grayscale(.6); }
.bjt-amt { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); }
.bjt-amt .cur { font-weight: 800; color: var(--gold); font-size: 13px; }
.bjt-amt input { width: 132px; margin: 0; padding: 8px 6px; background: transparent; border: none; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.bjt-amt .bq { padding: 8px 10px; border-radius: 9px; }
.bjt-hint { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
.bjt-hist { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.bjt-hl { font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: var(--faint); }
.bjt-hc { font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--muted); padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); }
.bjt-hc.bust { color: var(--win); border-color: rgba(61,220,133,0.35); }
.bjt-hc.bj { color: var(--gold); border-color: rgba(255,210,77,0.35); }
.bjt-hseed { font-family: var(--mono); font-size: 9px; color: #7fe0a8; margin-left: 6px; }
@media (max-width: 900px) {
  .bjt-table { height: 560px; }
  .bjt-seat { width: 120px; margin-left: -60px; }
  .bjt-seat.s0 { left: 12%; } .bjt-seat.s4 { left: 88%; }
  .bjt-controls { grid-template-columns: 1fr; }
  .bjt-cr { justify-content: center; }
}

/* ================= CASES (horizontal reel, odds list) ================= */
.casespage { width: 100%; }
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cp-title { font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -0.01em; line-height: 1.3; }
.cp-sub { font-size: 12.5px; color: var(--faint); margin-top: 4px; font-weight: 500; }
.cd-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border); margin-bottom: 16px; }
.cd-back { padding: 12px 16px; font-size: 16px; }
.cd-icon { width: 64px; height: 64px; border-radius: 14px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cd-icon img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55)); }
.cd-icon img.shake { animation: caseshake .6s cubic-bezier(.3,.7,.3,1); }
.cd-titles { min-width: 0; flex: 1; }
.cd-name { font-weight: 800; font-size: 20px; letter-spacing: 0.02em; color: #fff; }
.cd-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.cd-price { font-family: var(--mono); font-weight: 700; font-size: 22px; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.cd-price .wcoin, .cd-rval .wcoin { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #2a1c00; font-size: 11px; font-weight: 800; font-family: var(--font); }
.hreels { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: radial-gradient(700px 300px at 50% 0%, rgba(77,163,255,0.08), transparent 70%), var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); min-height: 260px; margin-bottom: 16px; overflow: hidden; }
.hreel-idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 226px; color: var(--faint); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; position: relative; }
.hreel-idle::before { content: ''; position: absolute; left: 50%; top: 42%; width: 240px; height: 240px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(77,163,255,0.22), transparent 70%); animation: pulse 2.4s ease-in-out infinite; pointer-events: none; }
.hreel-idle img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.6)); animation: tntIdle 2.2s ease-in-out infinite; position: relative; }
@keyframes tntIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hreel { position: relative; height: 226px; overflow: hidden; border-radius: 14px; background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55)); border: 1px solid var(--border2); box-shadow: inset 0 0 34px rgba(0,0,0,0.5); --tc: var(--gold); }
.hreel::before, .hreel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
.hreel::before { left: 0; background: linear-gradient(90deg, rgba(10,13,19,0.95), transparent); }
.hreel::after { right: 0; background: linear-gradient(270deg, rgba(10,13,19,0.95), transparent); }
.hreel.landed { border-color: var(--tc); box-shadow: 0 0 30px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 0 34px rgba(0,0,0,0.5); }
.hstrip { position: absolute; left: 0; top: 10px; display: flex; flex-direction: row; gap: 6px; will-change: transform, filter; }
.hcard { position: relative; flex: 0 0 156px; width: 156px; height: 206px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px 18px; text-align: center; overflow: hidden;
  background: radial-gradient(110px 70px at 50% 25%, color-mix(in srgb, var(--tc) 26%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--tc) 12%, #171d2a), #131824); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.hc-art img.iimg, .hc-art svg { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55)); }
.hc-n { font-weight: 700; font-size: 12px; color: var(--tc); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-v { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--muted); }
.hc-bar { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 2px; background: var(--tc); opacity: .8; }
.hcard.win { box-shadow: 0 0 28px color-mix(in srgb, var(--tc) 70%, transparent), 0 0 0 2px color-mix(in srgb, var(--tc) 85%, transparent); animation: tilepop .45s cubic-bezier(.2,.9,.2,1.3); z-index: 2; }
.hcard.win::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.38) 50%, transparent 70%); transform: translateX(-130%); animation: shine 1s .2s ease-out forwards; pointer-events: none; }
@keyframes shine { to { transform: translateX(130%); } }
.hreel.landed .hcard:not(.win) { opacity: .32; filter: saturate(.5); transition: opacity .4s ease; }
.hwin { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 164px; margin-left: -82px; z-index: 3; pointer-events: none; border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); box-shadow: 0 0 18px rgba(255,210,77,0.35) inset, 0 0 18px rgba(255,210,77,0.45); border-radius: 6px; }
.hreel.landed .hwin { border-color: var(--tc); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 40%, transparent) inset, 0 0 18px color-mix(in srgb, var(--tc) 55%, transparent); }
.cd-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cd-ctl .qtyrow { margin: 0; display: flex; gap: 0; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.cd-ctl .qtyrow .opt { min-width: 74px; padding: 12px 10px; border: none; background: none; border-radius: 9px; font-size: 13px; }
.cd-ctl .qtyrow .opt.sel { background: var(--panel3); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.cd-open { width: auto; min-width: 280px; padding: 16px 34px; font-size: 14px; }
.cd-open.short { background: linear-gradient(180deg, #d9a54a, #b07d22); color: #2a1c00; }
.cd-ctl .toggle { margin: 0; padding: 12px 14px; gap: 12px; font-size: 11.5px; letter-spacing: 0.08em; }
.cd-demo { cursor: pointer; font-weight: 800; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
.cd-demo:hover { color: var(--text); border-color: var(--border2); }
.cd-summary { margin: 6px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: chin .35s ease; }
.cs-items { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cs-it { width: 122px; padding: 10px 8px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 22%, #171d2a), #131824); border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); border-bottom: 3px solid var(--tc); animation: tilepop .45s cubic-bezier(.2,.9,.2,1.3) backwards; }
.cs-it img.iimg, .cs-it svg { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.cs-it .in { font-weight: 700; font-size: 11px; color: var(--text); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-it .iv { font-family: var(--mono); font-weight: 700; font-size: 11.5px; color: var(--tc); margin-top: 2px; }
.cs-it .ir { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--tc); margin-top: 4px; opacity: .9; }
.cs-total { display: flex; align-items: baseline; gap: 12px; font-weight: 800; flex-wrap: wrap; justify-content: center; }
.cs-total .l { font-size: 10px; letter-spacing: 0.14em; color: var(--faint); }
.cs-total b { font-family: var(--mono); font-size: 28px; color: var(--gold); font-variant-numeric: tabular-nums; }
.cs-total .d { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cs-total .d.w { color: var(--win); } .cs-total .d.l { color: var(--red); }
.cd-result { text-align: center; margin: 0 0 12px; font-weight: 800; font-size: 14px; min-height: 20px; color: var(--muted); }
.cd-result.win { color: var(--win); } .cd-result.lose { color: var(--red); }
.hreels .rareflash { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; animation: rareflash 1.1s ease-out forwards; background: radial-gradient(circle at 50% 45%, rgba(255,210,77,0.55), rgba(167,139,250,0.2) 45%, transparent 70%); }
@keyframes rareflash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes caseshake { 0% { transform: none; } 20% { transform: rotate(-7deg) scale(1.06); filter: brightness(1.3); } 40% { transform: rotate(7deg) scale(1.1); } 60% { transform: rotate(-4deg) scale(1.08); filter: brightness(1.6); } 80% { transform: rotate(3deg) scale(1.04); } 100% { transform: none; } }
.cd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@media (max-width: 860px) { .cd-list { grid-template-columns: 1fr; } }
.cd-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid color-mix(in srgb, var(--tc) 70%, transparent); }
.cd-ricon { width: 50px; height: 50px; border-radius: 11px; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--border); }
.cd-ricon img.iimg, .cd-ricon svg { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.cd-rmeta { flex: 1; min-width: 0; }
.cd-rname { font-weight: 800; font-size: 14px; color: var(--tc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-rsub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cd-rval { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--gold); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lastdrops { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; min-height: 0; justify-content: center; }
.lastdrops .ld { font-weight: 700; font-size: 10.5px; padding: 4px 8px; border-radius: 7px; background: rgba(0,0,0,0.3); border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); color: var(--tc); animation: chin .25s ease; }
.toggle { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 12px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); margin-bottom: 12px; cursor: pointer; }
.toggle .sw { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.12); position: relative; transition: background .15s ease; }
.toggle .sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.toggle.on .sw { background: var(--accent); } .toggle.on .sw::after { left: 17px; }
.qtyrow { display: flex; gap: 6px; margin-bottom: 12px; }
.qtyrow .opt { flex: 1; text-align: center; cursor: pointer; font-weight: 800; font-size: 12px; color: var(--muted); background: rgba(0,0,0,0.28); padding: 10px 4px; border-radius: 10px; border: 1px solid var(--border); transition: all .16s ease; }
.qtyrow .opt.sel { color: #fff; background: rgba(77,163,255,0.12); border-color: rgba(77,163,255,0.5); }
.crows { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 14px; }
.crow { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid var(--cc, var(--accent)); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; overflow: hidden; }
.crow:hover { transform: translateY(-2px); border-color: var(--border2); background: var(--panel3); }
.crow-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 12px; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--border); }
.crow-icon .cicon { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.crow-icon .cicon.chest { width: 44px; height: 44px; }
.crow-meta { min-width: 0; flex: 1; }
.crow-name { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow-price { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: var(--gold); margin-top: 3px; }
.crow-top { flex: 0 0 auto; max-width: 40%; font-size: 10px; font-weight: 700; color: var(--faint); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= FX: confetti, flashes, shakes ================= */
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.confetti i { position: absolute; width: 8px; height: 11px; opacity: 0; animation: confetti var(--dur) cubic-bezier(.2,.7,.3,1) var(--delay) forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 30% { transform: translate(calc(var(--dx) * .45), var(--dy)) rotate(calc(var(--rot) * .4)); opacity: 1; } 100% { transform: translate(var(--dx), var(--fall)) rotate(var(--rot)); opacity: 0; } }
.flashlayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit; animation: flashfade .7s ease-out forwards; }
.flashlayer.win { background: radial-gradient(circle at 50% 50%, rgba(61,220,133,0.35), transparent 70%); }
.flashlayer.lose { background: radial-gradient(circle at 50% 50%, rgba(255,92,114,0.35), transparent 70%); }
.flashlayer.gold { background: radial-gradient(circle at 50% 50%, rgba(255,210,77,0.45), transparent 70%); }
@keyframes flashfade { from { opacity: 1; } to { opacity: 0; } }
.shake { animation: shake .4s; }
.winpop::before, .winpop::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; animation: spark 1.2s ease-out .1s; }
.winpop::before { left: -8px; top: -8px; } .winpop::after { right: -8px; bottom: -8px; animation-delay: .35s; }
@keyframes spark { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes rollflick { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }

/* ================= MODERN POLISH PASS (applies across every stage) ================= */
/* Every stage gets a faint dot-grid and a light pool at the top, so the games
   share one surface instead of each floating on flat black. */
#gameview .gv-stage { background-image: radial-gradient(720px 340px at 50% -8%, rgba(77,163,255,0.1), transparent 70%), radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1.4px); background-size: auto, 22px 22px; background-position: 0 0, 11px 11px; }
/* Result line becomes a pill that glows in the outcome colour. */
#gameview .result { display: inline-block; margin: 14px auto 0; padding: 11px 22px; border-radius: 999px; font-size: 13px; letter-spacing: 0.1em; border: 1px solid transparent; transition: all .2s ease; }
#gameview .result:empty { display: none; }
#gameview .result.win { background: rgba(61,220,133,0.1); border-color: rgba(61,220,133,0.4); box-shadow: 0 0 26px rgba(61,220,133,0.18); animation: resultIn .35s cubic-bezier(.2,.9,.2,1.35); }
#gameview .result.lose { background: rgba(255,92,114,0.09); border-color: rgba(255,92,114,0.35); animation: resultIn .3s ease; }
@keyframes resultIn { from { transform: translateY(6px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
/* Bet panel + play button: glassier, with a soft pressed state. */
#gameview .gv-side { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), var(--panel); }
#gameview #playbtn { box-shadow: 0 10px 26px rgba(77,163,255,0.28), inset 0 1px 0 rgba(255,255,255,0.28); }
#gameview #playbtn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 4px 12px rgba(77,163,255,0.2); }
/* ---- Mines: tiles get depth, a hover glow and a real flip on reveal ---- */
.minegrid { perspective: 900px; }
.mtile { background: linear-gradient(160deg, #2b3548, #1a2130 60%, #151a26); border-color: rgba(255,255,255,0.09); box-shadow: 0 4px 0 #0d1118, 0 10px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
.mtile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,0.08), transparent 70%); pointer-events: none; }
.mtile[data-tile]:hover { border-color: rgba(77,163,255,0.7); box-shadow: 0 4px 0 #0d1118, 0 0 22px rgba(77,163,255,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
.mtile.safe { animation: tileFlipSafe .5s cubic-bezier(.2,.8,.2,1) both; background: linear-gradient(160deg, rgba(61,220,133,0.26), rgba(61,220,133,0.06)); box-shadow: 0 0 22px rgba(61,220,133,0.32), inset 0 0 0 1px rgba(61,220,133,0.35); }
.mtile.safe svg { filter: drop-shadow(0 0 8px rgba(61,220,133,0.7)); }
@keyframes tileFlipSafe { 0% { transform: rotateY(90deg) scale(.9); opacity: .4; } 60% { transform: rotateY(-8deg) scale(1.04); opacity: 1; } 100% { transform: none; } }
.mtile.boom { animation: tileBoom .55s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 0 30px rgba(255,92,114,0.5), inset 0 0 0 1px rgba(255,92,114,0.5); }
@keyframes tileBoom { 0% { transform: rotateY(90deg) scale(.9); } 45% { transform: scale(1.14); } 60% { transform: translateX(-4px); } 75% { transform: translateX(4px); } 100% { transform: none; } }
.mtile.mine.late { animation: tileFlipSafe .4s ease both; }
/* ---- Towers: taller tiles with a lit active floor and a sheen sweep ---- */
.trow .tt { height: 56px; border-radius: 12px; background: linear-gradient(160deg, #26304a, #171d2b 65%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.trow .tm { font-size: 12px; padding: 3px 8px; border-radius: 7px; background: rgba(0,0,0,0.28); }
.trow.active .tm { background: rgba(245,197,66,0.12); box-shadow: 0 0 12px rgba(245,197,66,0.25); }
.trow.active .tt { position: relative; overflow: hidden; background: linear-gradient(160deg, #2f3b58, #1c2334 65%); border-color: rgba(245,197,66,0.35); }
.trow.active .tt::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.09) 50%, transparent 60%); animation: towerSheen 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes towerSheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.trow.active .tt:hover { border-color: rgba(77,163,255,0.7); box-shadow: 0 3px 0 #0d1118, 0 0 20px rgba(77,163,255,0.28); }
.trow .tt.safe { box-shadow: 0 0 20px rgba(61,220,133,0.3), inset 0 0 0 1px rgba(61,220,133,0.35); }
.trow .tt.safe svg { filter: drop-shadow(0 0 8px rgba(61,220,133,0.7)); }
.trow .tt.boom { box-shadow: 0 0 26px rgba(255,92,114,0.45), inset 0 0 0 1px rgba(255,92,114,0.5); }
.trow.done .tt:not(.safe):not(.trap) { opacity: .28; }
/* ---- Plinko: pegs and buckets read at a glance ---- */
.plinkowrap canvas { filter: drop-shadow(0 0 0 transparent); }
/* the taller Towers tiles pushed the top floor under the stage title */
.tower { margin-top: 22px; }

/* ================= ROULETTE (shared table) ================= */
.roulbar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 900px; margin: 0 auto 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); }
.roulsub { font-size: 10px; font-weight: 900; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; }
.roulclock { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--text); min-width: 60px; }
.roulbarwrap { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.roulbarwrap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--red)); transition: width .12s linear; }
.rc { position: relative; }
.rc .others { position: absolute; right: 3px; bottom: 3px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 999px; font-size: 8px; font-weight: 800; color: #e6ebf3; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18); pointer-events: none; animation: chin .3s ease; }
.rc .others b { font-size: 8px; color: var(--gold); }
.rc.winner { box-shadow: 0 0 0 2px rgba(255,210,77,0.85), 0 0 22px rgba(255,210,77,0.55); z-index: 2; }
.roulwheel { position: relative; }
.roulflash { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.roulflash.on { opacity: 1; }
.roulflash.red { box-shadow: 0 0 0 4px rgba(214,58,74,0.6), 0 0 60px rgba(214,58,74,0.55); }
.roulflash.black { box-shadow: 0 0 0 4px rgba(255,255,255,0.35), 0 0 60px rgba(255,255,255,0.25); }
.roulflash.green { box-shadow: 0 0 0 4px rgba(31,157,85,0.7), 0 0 60px rgba(31,157,85,0.55); }
.roulside { width: 100%; max-width: 900px; margin: 12px auto 0; display: flex; flex-direction: column; max-height: 260px; border-radius: 14px; background: rgba(0,0,0,0.24); border: 1px solid var(--border); overflow: hidden; }
.roulside .cs-list { max-height: 190px; }
.roulside .cs-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; grid-template-areas: "av name bet st"; column-gap: 10px; }
.roulside .cs-row .n { display: flex; flex-direction: column; gap: 3px; }
.rpicks { display: flex; gap: 3px; flex-wrap: wrap; }
.rp { font-family: var(--mono); font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 4px; color: #fff; background: rgba(255,255,255,0.1); }
.rp.red { background: #d63a4a; } .rp.black { background: #1d222e; border: 1px solid rgba(255,255,255,0.2); } .rp.green { background: #1f9d55; } .rp.out { background: rgba(77,163,255,0.25); } .rp.more { color: var(--faint); background: transparent; }
.gv-hist .ch.rd { color: #ff8c98; } .gv-hist .ch.bk { color: #c6cdd9; } .gv-hist .ch.gn { color: #3ddc85; }
#gameview #playbtn.pulse { animation: betPulse 1.4s ease-in-out infinite; }
@keyframes betPulse { 0%, 100% { box-shadow: 0 10px 26px rgba(77,163,255,0.28); } 50% { box-shadow: 0 10px 26px rgba(77,163,255,0.28), 0 0 0 6px rgba(77,163,255,0.18); } }