/* phones: no grey or coloured flash over anything you tap */
html { -webkit-tap-highlight-color: transparent; }
:root {
  --void: #050506; --surface: #0E0F12; --surface-2: #15171c; --line: #23262d; --line-2: #31353e;
  --bone: #F4F6F1; --steel: #8A8F98; --steel-2: #a9aeb6;
  --acid: #C8FF2E; --plasma: #2EF2FF; --ultra: #8C6BFF; --signal: #FF3B5C;
  --holo: linear-gradient(110deg, #C8FF2E 0%, #2EF2FF 50%, #8C6BFF 100%);
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'Satoshi', system-ui, sans-serif; /* numbers and labels: Satoshi with tabular figures (was JetBrains Mono) */
  --font-code: var(--font-mono), monospace;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2.4rem, 1.2rem + 4vw, 4.75rem);
  --r: 10px; --r-lg: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html { background: var(--void); color-scheme: dark; }
body { background: var(--void); color: var(--bone); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 85% -10%, rgba(140,107,255,.18), transparent 70%), radial-gradient(50% 40% at 0% 10%, rgba(46,242,255,.10), transparent 70%), radial-gradient(40% 40% at 50% 110%, rgba(200,255,46,.07), transparent 70%); }
main, .topbar, .ticker, .foot { position: relative; z-index: 1; }
main { flex: 1; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--steel); }
.small { font-size: var(--text-xs); }
.acid { color: var(--acid); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--acid); color: var(--void); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--line); background: rgba(5,5,6,.82); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 5; }
.logo { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.02em; color: var(--bone); text-decoration: none; line-height: 1; }
.candle { position: relative; display: inline-block; width: 8px; height: 19px; margin: 0 4px; background: var(--acid); border-radius: 1.5px; box-shadow: 0 0 14px rgba(200,255,46,.55); }
.candle::before, .candle::after { content: ""; position: absolute; left: 50%; width: 2px; transform: translateX(-50%); border-radius: 2px; }
.candle::before { bottom: 100%; height: 7px; background: var(--plasma); box-shadow: 0 0 8px var(--plasma); }
.candle::after { top: 100%; height: 6px; background: var(--ultra); }
@media all { .candle::before { animation: flick 2.4s ease-in-out infinite; } }
@keyframes flick { 0%,100% { opacity: 1; height: 7px; } 45% { opacity: .6; height: 5px; } 60% { opacity: 1; height: 8px; } }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--steel-2); text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--bone); background: var(--surface); }
.nav a.active { color: var(--bone); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--acid); }
.wallet { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.freeplay { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--acid); border: 1px solid rgba(200,255,46,.35); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; }
.balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.balance .lbl, .lbl { font-size: var(--text-xs); color: var(--steel); text-transform: uppercase; letter-spacing: .1em; }
.balance .num { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); }
.balance .num.bump { animation: bump .6s var(--ease); }
@keyframes bump { 0% { color: var(--acid); transform: scale(1.08); } 100% { color: var(--bone); transform: none; } }

/* ---------- Ticker ---------- */
.ticker { display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--surface); height: 36px; overflow: hidden; }
.ticker-tag { flex-shrink: 0; height: 100%; display: flex; align-items: center; padding: 0 14px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; color: var(--void); background: var(--holo); }
.ticker-viewport { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: inline-flex; gap: 32px; white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); padding-left: 24px; will-change: transform; }
@media all { .ticker-track { animation: tick 40s linear infinite; } }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { color: var(--steel-2); }
.tk b { font-weight: 600; }
.tk .up { color: var(--acid); } .tk .dn { color: var(--ultra); } .tk .hot { color: var(--plasma); } .tk .bad { color: var(--signal); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); padding: 12px 20px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); cursor: pointer; text-decoration: none; transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s, opacity .2s; }
.btn:hover:not(:disabled) { border-color: var(--steel); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.sm { padding: 8px 14px; font-size: var(--text-xs); }
.btn-primary { background: var(--acid); color: var(--void); border-color: var(--acid); box-shadow: 0 0 0 0 rgba(200,255,46,.5); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 28px rgba(200,255,46,.45); border-color: var(--acid); }
.btn-ghost { background: transparent; }

/* ---------- Lobby ---------- */
.view { max-width: 1320px; margin: 0 auto; padding: clamp(20px, 4vw, 48px) clamp(16px, 3vw, 32px) 48px; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(8px, 3vw, 32px) 0 clamp(32px, 5vw, 64px); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--plasma); margin-bottom: 16px; }
.hero h1 { font-size: var(--text-2xl); font-weight: 600; margin-bottom: 20px; }
.holo-text { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--steel-2); max-width: 52ch; margin-bottom: 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-chart { position: relative; border-radius: var(--r-lg); padding: 20px; background: var(--surface); border: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--holo); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 30px 80px -30px rgba(140,107,255,.35); }
.hc-head { display: flex; justify-content: space-between; font-size: var(--text-xs); margin-bottom: 8px; gap: 12px; }
.hc-svg { width: 100%; height: auto; display: block; }
.hc-svg .grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.hc-svg .axis text { fill: var(--steel); font-size: 11px; text-anchor: end; }
.hc-svg .xl text { fill: var(--steel-2); font-size: 10.5px; text-anchor: middle; }
.hc-svg .wk { stroke-width: 2; stroke-linecap: round; }
.wk.up { stroke: var(--acid); } .wk.dn { stroke: var(--ultra); } .wk.hi { stroke: var(--plasma); }
.bd.up { fill: var(--acid); } .bd.dn { fill: var(--ultra); } .bd.hi { fill: var(--plasma); }
.hc-note { font-size: var(--text-xs); color: var(--steel); margin-top: 10px; }

.block { padding: clamp(24px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.block-head h2 { font-size: var(--text-xl); }
.dealer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dcard { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; transition: transform .35s var(--ease), border-color .25s, box-shadow .35s; }
.dcard:hover { transform: translateY(-4px); border-color: var(--line-2); }
.dcard[aria-pressed="true"] { border-color: var(--acc, var(--acid)); box-shadow: 0 0 0 1px var(--acc, var(--acid)), 0 20px 50px -20px var(--acc, var(--acid)); }
.dcard img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.dcard:hover img { transform: scale(1.04); }
.dcard .dc-body { position: absolute; inset: auto 0 0 0; padding: 48px 16px 16px; background: linear-gradient(transparent, rgba(5,5,6,.92) 55%); }
.dcard .dc-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); display: flex; align-items: center; gap: 8px; }
.dcard .dc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.dcard .dc-tag { font-size: var(--text-xs); color: var(--steel-2); }
.dcard .dc-sel { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--acc); color: var(--void); padding: 3px 8px; border-radius: 999px; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: .25s var(--ease); }
.dcard[aria-pressed="true"] .dc-sel { opacity: 1; transform: none; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.step-n { font-size: var(--text-xs); color: var(--acid); }
.steps h3 { font-size: var(--text-lg); margin: 10px 0 8px; }
.steps p { color: var(--steel-2); font-size: var(--text-sm); }
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.game { position: relative; border-radius: var(--r-lg); padding: 24px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.game h3 { font-size: var(--text-lg); margin-bottom: 4px; }
.game p { color: var(--steel-2); font-size: var(--text-sm); }
.game.live { background-image: linear-gradient(var(--surface), var(--surface)), var(--holo); background-origin: border-box; background-clip: padding-box, border-box; border-color: transparent; transition: transform .3s var(--ease); }
.game.live:hover { transform: translateY(-3px); }
.game.soon { opacity: .6; }
.pill { position: absolute; top: 16px; left: 24px; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--steel); }
.live-pill { color: var(--acid); display: inline-flex; align-items: center; gap: 6px; }
.live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }

/* ---------- Table ---------- */
#view-table { max-width: 1440px; padding-top: 14px; padding-bottom: 24px; }
.table-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: stretch; }
.dealer-panel, .market { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
@keyframes react { 0% { transform: translate(-50%, 0) scale(1); } 35% { transform: translate(-50%, -4px) scale(1.02); } 100% { transform: translate(-50%, 0) scale(1); } }
.stage { position: relative; z-index: 0; height: clamp(200px, 31vh, 290px); margin: -8px -8px -86px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: radial-gradient(60% 80% at 50% 40%, #161a20 0%, #07080a 75%); }
.stage > img, .stage video, .stage .mood { position: absolute; left: 50%; top: 0; height: 100%; width: auto; aspect-ratio: 3 / 4; transform: translateX(-50%); object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.stage video, .stage .mood { opacity: 0; transition: opacity .35s ease; }
.stage video.on, .stage .mood.on { opacity: 1; }
.stage video { z-index: 1; } .stage video.vd-deal { z-index: 2; } .stage video.vd-win, .stage video.vd-lose { z-index: 3; }
.stage .mood { z-index: 4; }
.stage.mooded video { opacity: 0; }
.stage.react > img, .stage.react .mood { animation: react .7s var(--ease); }
.deal-origin { position: absolute; left: 50%; top: 82%; width: 1px; height: 1px; }
.dealer-zone { z-index: 3; }
.dealer-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dealer-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.1; }
.select { background: var(--surface-2); color: var(--bone); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: var(--text-xs); }
.speech { position: relative; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; font-size: var(--text-sm); color: var(--bone); min-height: 3.2em; }
.speech::before { content: ""; position: absolute; top: -6px; left: 22px; width: 10px; height: 10px; background: var(--surface-2); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }

.felt { position: relative; border-radius: var(--r-lg); padding: clamp(16px, 2.5vw, 28px); display: flex; flex-direction: column; justify-content: flex-start; gap: 12px;
  background: radial-gradient(90% 70% at 50% 40%, #12161a 0%, #0a0c0e 70%), var(--surface); border: 1px solid transparent; background-image: radial-gradient(90% 70% at 50% 40%, #12161a 0%, #090a0c 75%), var(--holo); background-origin: border-box; background-clip: padding-box, border-box; transition: box-shadow .5s var(--ease); overflow: hidden; }
.felt::before { content: "BLACKJACK PAYS 3 TO 2 · DEALER HITS SOFT 17 · EVERY HAND HAS A PRICE"; position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: rgba(138,143,152,.22); white-space: nowrap; pointer-events: none; }
.felt.rising { box-shadow: 0 0 0 1px rgba(200,255,46,.5), 0 0 60px -10px rgba(200,255,46,.45); }
.felt.falling { box-shadow: 0 0 0 1px rgba(140,107,255,.55), 0 0 60px -10px rgba(140,107,255,.5); }
.felt.danger { box-shadow: 0 0 0 2px rgba(255,59,92,.7), 0 0 70px -10px rgba(255,59,92,.55); }
.felt.bigwin::after { content: ""; position: absolute; inset: -2px; background: var(--holo); opacity: 0; mix-blend-mode: screen; pointer-events: none; animation: sweep 1.4s var(--ease); }
@keyframes sweep { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 40% { opacity: .35; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.hand-zone { display: flex; flex-direction: column; gap: 10px; align-items: center; position: relative; z-index: 1; }
.hand-label { position: relative; z-index: 3; display: flex; gap: 10px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .16em; color: var(--bone); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.total { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 24px); line-height: 1; letter-spacing: 0; min-width: 2.4em; text-align: center; padding: 6px 12px; border-radius: 10px; color: var(--void); background: linear-gradient(110deg, #C8FF2E, #7CFFB0); box-shadow: 0 0 18px rgba(200,255,46,.45), inset 0 1px 0 rgba(255,255,255,.5); text-shadow: none; }
.dealer-zone .hand-label > span:first-child { color: var(--plasma); }
.hand-zone:not(.dealer-zone) .hand-label > span:first-child { color: var(--acid); }
.dealer-zone .total { color: #fff; background: linear-gradient(110deg, #2EF2FF, #8C6BFF); box-shadow: 0 0 18px rgba(46,242,255,.45), inset 0 1px 0 rgba(255,255,255,.45); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.felt:has(#rideControls:not([hidden]))::before { opacity: 0; }
.total:empty { display: none; }
.cards { display: flex; justify-content: center; min-height: 110px; padding-left: 32px; }
.card { width: 78px; height: 108px; margin-left: -32px; border-radius: 10px; background: var(--bone); color: #0b0c0f; position: relative; box-shadow: 0 10px 24px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.2); font-family: var(--font-display); font-weight: 600; transform-origin: 50% 100%; flex-shrink: 0; }
@media all { .card.enter { animation: deal .45s var(--ease) both; } .card.flip { animation: flip .5s var(--ease); } }
@keyframes deal { from { opacity: 0; transform: translate(40px, -60px) rotate(8deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.card .cr { position: absolute; top: 7px; left: 9px; font-size: 22px; line-height: 1; text-align: center; }
.card .cr small { display: block; font-size: 16px; }
.card .cc { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; }
.card .cb { position: absolute; bottom: 7px; right: 9px; font-size: 22px; line-height: 1; transform: rotate(180deg); text-align: center; }
.card .cb small { display: block; font-size: 16px; }
.card.red { color: #e11d48; }
.card.back { background: #05060b url("assets/cardback.svg") center / 100% 100% no-repeat; box-shadow: 0 10px 24px -8px rgba(0,0,0,.75), 0 0 0 1px rgba(140,107,255,.25), 0 0 18px -6px rgba(46,242,255,.35); }
.card.back > * { display: none; }
.status { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); min-height: 1.4em; margin-top: auto; position: relative; z-index: 1; }
.status .win { color: var(--acid); } .status .lose { color: var(--signal); } .status .push { color: var(--plasma); }

.controls { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
[hidden] { display: none !important; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.act { min-width: 104px; }
.act.suggest { border-color: var(--plasma); box-shadow: 0 0 0 1px var(--plasma) inset; }
.hint { min-height: 1.4em; text-align: center; }
.ride { display: flex; align-items: center; gap: 14px; background: rgba(14,15,18,.85); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; }
.ride-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 12px var(--plasma); flex-shrink: 0; }
@media all { .ride-dot { animation: pulse 1.4s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
.ride-ring { width: 40px; height: 40px; }
.ride-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line-2); stroke-width: 3; }
.ring-fg { fill: none; stroke: var(--plasma); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 0; }
.ride-text { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }

.market { gap: 10px; padding: 10px; background: linear-gradient(180deg, #101217 0%, var(--surface) 60%); }
.mk-card { background: rgba(5,5,6,.55); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mk-hero { position: relative; overflow: hidden; border-color: var(--line-2); }
.mk-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--holo); opacity: .8; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--steel-2); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
@media all { .live i { animation: pulse 1.6s ease-in-out infinite; } }
.mk-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--steel-2); background: var(--surface-2); white-space: nowrap; }
.mk-chip.up { color: var(--acid); border-color: rgba(200,255,46,.35); background: rgba(200,255,46,.08); }
.mk-chip.dn { color: #b9a6ff; border-color: rgba(140,107,255,.4); background: rgba(140,107,255,.1); }
.mk-offer { font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -.02em; transition: color .3s, text-shadow .3s; }
.mk-offer.up { color: var(--acid); text-shadow: 0 0 24px rgba(200,255,46,.35); } .mk-offer.dn { color: var(--ultra); } .mk-offer.danger { color: var(--signal); }
.mk-sub { font-size: var(--text-xs); color: var(--steel); margin-top: -4px; }
.odds { display: grid; grid-template-columns: 1fr; gap: 8px; }
.odd-top { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--steel-2); margin-bottom: 4px; }
.odd-top .mono { color: var(--bone); font-weight: 600; }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7fae10, var(--acid)); box-shadow: 0 0 10px rgba(200,255,46,.5); transition: width .6s var(--ease); }
.bar i.b2 { background: linear-gradient(90deg, #138b95, var(--plasma)); box-shadow: 0 0 10px rgba(46,242,255,.45); }
.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mk-stats div { background: var(--surface); padding: 7px 9px; min-width: 0; }
.mk-stats dt { font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: .1em; }
.mk-stats dd { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--steel); text-transform: uppercase; letter-spacing: .12em; }
.chart-head .mono { color: var(--bone); letter-spacing: 0; font-size: var(--text-sm); }
.chart-wrap { position: relative; height: 104px; border-radius: 8px; overflow: hidden; }
.chart-wrap canvas { width: 100%; height: 100%; display: block; }
.co-box { transition: border-color .25s, box-shadow .25s; }
.co-box.arming { border-color: rgba(200,255,46,.55); box-shadow: 0 0 0 1px rgba(200,255,46,.2), 0 0 30px rgba(200,255,46,.12); }
.co-title { font-size: 11px; color: var(--steel-2); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--void); border: 1px solid var(--line); border-radius: 10px; }
.seg-b { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); padding: 7px 0; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--steel-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.seg-b:hover:not(:disabled) { color: var(--bone); background: var(--surface-2); }
.seg-b.on { color: var(--acid); background: rgba(200,255,46,.1); border-color: rgba(200,255,46,.55); }
.seg-b:disabled { opacity: .35; cursor: not-allowed; }
.co-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-sum div, .kpis div { display: flex; flex-direction: column; gap: 2px; }
.co-sum .lbl, .kpis .lbl { font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: .1em; }
.co-sum .mono { font-size: var(--text-base); font-weight: 700; }
.co-sum div:first-child .mono { color: var(--acid); }
.co-sum div:last-child { text-align: right; }
.co-main { width: 100%; padding: 13px; font-size: var(--text-base); color: var(--void); border: none; background: var(--holo); background-size: 200% 100%; }
@media all { .co-main:not(:disabled):not(.confirm) { animation: shimmer 3s linear infinite; } .co-main.confirm, .co-inline.confirm { animation: armed 1.1s ease-in-out infinite; } }
@keyframes shimmer { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes armed { 50% { box-shadow: 0 0 0 4px rgba(200,255,46,.25), 0 0 28px rgba(200,255,46,.45); } }
.co-main:hover:not(:disabled) { box-shadow: 0 0 30px rgba(46,242,255,.45); }
.co-main.confirm, .co-inline.confirm { background: var(--acid); color: var(--void); }
.co-main:disabled { background: var(--surface-2); color: var(--steel); opacity: 1; }
.co-head { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.co-cancel { padding: 2px 10px; min-height: 0; font-size: var(--text-xs); border-radius: 999px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 4px 0; text-align: center; }
.kpis div { align-items: center; }
.kpis .mono { font-size: var(--text-sm); font-weight: 600; }
.kpis .up { color: var(--acid); } .kpis .dn { color: var(--signal); }

.foot { border-top: 1px solid var(--line); padding: 20px clamp(16px, 3vw, 32px); display: flex; gap: 16px; align-items: center; justify-content: space-between; color: var(--steel); font-size: var(--text-xs); }
.foot p { max-width: 90ch; }
.foot strong { color: var(--steel-2); }

.burst { position: fixed; pointer-events: none; z-index: 20; width: 8px; height: 8px; border-radius: 2px; }

.status .sub { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--steel-2); font-weight: 400; margin-top: 4px; }
.rules { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.rules-h { font-size: var(--text-xs); color: var(--steel); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.rules ul { list-style: none; display: grid; gap: 4px; font-size: var(--text-xs); }
.rules li { display: flex; justify-content: space-between; gap: 8px; color: var(--steel-2); }
.rules li .mono { color: var(--bone); }
.keys { margin-top: 10px; line-height: 2; }
kbd { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--bone); background: var(--surface-2); }

.co-inline { display: none; color: var(--void); border: none; background: var(--holo); }
#rideControls { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; position: relative; z-index: 3; }
#rideControls ~ .hand-zone { margin-bottom: auto; }
#rideControls .ride { justify-content: center; flex-wrap: nowrap; background: none; border: none; padding: 0; gap: 10px; text-align: left; }
#rideControls .ride-text { line-height: 1.25; }
.ride-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; max-width: 560px; margin: 0 auto; }
.ride-btns .btn { min-height: 52px; padding: 0 10px; min-width: 0; font-size: var(--text-base); white-space: nowrap; border-radius: 12px; }
#rideControls .co-inline { display: inline-flex; }
.ride-go { position: relative; overflow: hidden; color: #fff; border: 1px solid rgba(46,242,255,.6); background: linear-gradient(110deg, #8C6BFF 0%, #FF3BD4 45%, #2EF2FF 100%); background-size: 220% 100%; box-shadow: 0 0 24px rgba(140,107,255,.45), inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ride-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); }
.ride-go:hover { box-shadow: 0 0 36px rgba(255,59,212,.55), 0 0 18px rgba(46,242,255,.5); transform: translateY(-1px); }
.ride-go svg { flex-shrink: 0; }
@media all {
  .ride-go { animation: rideflow 4s linear infinite; }
  .ride-go::after { animation: sheen 2.6s ease-in-out infinite; }
}
@keyframes rideflow { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes sheen { 0%, 40% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
.deal-origin { position: absolute; left: 50%; top: 80%; width: 1px; height: 1px; }
.dealer-meta { flex-wrap: wrap; }
.dm-ctrl { display: flex; gap: 6px; align-items: center; width: 100%; }
.dm-ctrl .select { flex: 1; }
.dm-ctrl .btn { white-space: nowrap; }
.dm-ctrl .btn.sm { padding: 6px 10px; }
.card.flying { z-index: 30; }
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .table-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .dealer-panel { grid-column: 1 / -1; flex-direction: row; align-items: center; order: 3; }
      .dealer-meta { flex-direction: column; align-items: flex-start; }
  .dm-ctrl { width: auto; }
  .speech { flex: 1; }
  .rules { display: none; }
  .speech::before { top: 50%; left: -6px; transform: translateY(-50%) rotate(-45deg); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .dealer-grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .games { grid-template-columns: 1fr; }
  .table-layout { grid-template-columns: 1fr; }
  .market { order: 2; }
  .co-inline { display: inline-flex; }
  .ride { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 560px) {
  .ride-btns .btn { font-size: var(--text-sm); }
  .topbar { gap: 10px; flex-wrap: wrap; }
  .nav { order: 3; width: 100%; }
  .freeplay { display: none; }
  .dealer-panel { flex-wrap: wrap; }
    .speech { flex-basis: 100%; }
  .speech::before { top: -6px; left: 30px; transform: rotate(45deg); }
  .card { width: 64px; height: 90px; margin-left: -26px; }
  .cards { min-height: 92px; padding-left: 26px; }
  .stage { height: 220px; margin-bottom: -70px; }
  .card .cc { font-size: 30px; } .card .cr, .card .cb { font-size: 16px; }
  .card .cr small, .card .cb small { font-size: 13px; }
  
  .felt::before { display: none; }
  .foot { flex-direction: column; align-items: flex-start; }


}

/* Keep the dealer alive even when no clip is playing */
@media all {
  .stage.still > img#dealerImg { animation: breathe 5.5s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes breathe { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) translateY(-2px) scale(1.012); } }

.wager { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(110deg, rgba(200,255,46,.06), rgba(46,242,255,.05), rgba(140,107,255,.08)); }
.wager .lbl { font-size: 11px; color: var(--steel-2); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.wager-v { font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; letter-spacing: -.01em; background: linear-gradient(110deg, #C8FF2E 0%, #2EF2FF 50%, #8C6BFF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(46,242,255,.25)); }
@media all { .wager-v { animation: shimmer 4s linear infinite; } }

.wager { align-items: center; }
.wager-l { display: flex; flex-direction: column; gap: 3px; }
.wager-sub { font-size: 11px; color: var(--acid); }

/* Split hands */
#playerCards.split { display: flex; justify-content: center; gap: clamp(16px, 4vw, 48px); padding-left: 0; min-height: 0; }
.phand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px 6px; border-radius: 14px; border: 1px solid transparent; transition: border-color .25s, box-shadow .25s, opacity .25s; }
.phand .cards { padding-left: 32px; }
.phand.active { border-color: rgba(200,255,46,.6); box-shadow: 0 0 0 1px rgba(200,255,46,.2), 0 0 28px rgba(200,255,46,.18); background: rgba(200,255,46,.04); }
.phand.bust, .phand.lost { opacity: .55; }
.phand.won { border-color: rgba(46,242,255,.5); box-shadow: 0 0 24px rgba(46,242,255,.2); }
.phand .hand-label > span:first-child { color: var(--acid); }
#playerCards.split + .hand-label { display: none; }
.split-btn { border-color: rgba(140,107,255,.6); color: #cfc2ff; }
.split-btn:hover:not(:disabled) { background: rgba(140,107,255,.15); }

/* Casino chips */
.chips { gap: 14px; }
.chip { --c: #F4F6F1; --ink: #050506; --edge: #050506; position: relative; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink);
  background:
    radial-gradient(circle at 50% 50%, var(--c) 0 52%, transparent 53%),
    radial-gradient(circle at 50% 50%, var(--edge) 0 58%, transparent 59%),
    repeating-conic-gradient(var(--c) 0 22.5deg, var(--edge) 22.5deg 45deg);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), inset 0 -3px 0 rgba(0,0,0,.25);
  transition: transform .18s var(--ease), box-shadow .2s, filter .2s; }
.chip::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); pointer-events: none; }
.chip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 70% at 30% 15%, rgba(255,255,255,.55), transparent 45%); pointer-events: none; }
.chip:hover:not(:disabled) { transform: translateY(-4px) rotate(-8deg); box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 20px rgba(0,0,0,.6), 0 0 28px color-mix(in srgb, var(--c) 60%, transparent), inset 0 -3px 0 rgba(0,0,0,.25); }
.chip:active:not(:disabled) { transform: translateY(0) scale(.94); }
.chip:disabled { opacity: .28; cursor: not-allowed; filter: saturate(.4); }
.c10 { --c: #F4F6F1; --ink: #0b0c0f; --edge: #2a2d34; }
.c25 { --c: #2EF2FF; --ink: #04262b; --edge: #0b3f47; }
.c100 { --c: #C8FF2E; --ink: #1d2a00; --edge: #33480a; }
.c500 { --c: #FFA3EC; --ink: #050506; --edge: #8C6BFF; }
.c1000 { --c: #FFD23F; --ink: #2a1d00; --edge: #8a5a00; }
.c10000 { --c: #FF7A3D; --ink: #2a0d00; --edge: #7a1f00; font-size: 14px; }
.c100000 { --c: #FF2E88; --ink: #fff; --edge: #5a0630; font-size: 12px; letter-spacing: -.03em; }
.c100000::before { border-color: rgba(255,255,255,.45); }
.chip.pop { animation: chippop .35s var(--ease); }
@keyframes chippop { 40% { transform: translateY(-8px) scale(1.08) rotate(-12deg); } }

/* Bet display */
.bet-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.bet-amt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; min-width: 150px; padding: 8px 18px 9px; border-radius: 14px;
  background: linear-gradient(#0b0c10, #0b0c10) padding-box, linear-gradient(110deg, #C8FF2E, #2EF2FF, #8C6BFF, #FF3BD4) border-box; border: 1.5px solid transparent;
  box-shadow: 0 0 22px rgba(46,242,255,.22), 0 0 40px rgba(140,107,255,.15); }
.bet-amt .lbl { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--steel-2); margin-bottom: 4px; }
.bet-amt .mono { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em;
  background: linear-gradient(110deg, #C8FF2E 0%, #2EF2FF 40%, #8C6BFF 75%, #FF3BD4 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(46,242,255,.35)); }
@media all { .bet-amt .mono { animation: shimmer 4s linear infinite; } }
.bet-amt.bump { animation: betbump .4s var(--ease); }
@keyframes betbump { 40% { transform: scale(1.07); box-shadow: 0 0 34px rgba(200,255,46,.45), 0 0 60px rgba(46,242,255,.3); } }
@media (max-width: 560px) {
  .chip { width: 46px; height: 46px; font-size: 13px; flex: 0 1 46px; min-width: 0; height: auto; aspect-ratio: 1; }
  .chips { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  .topbar .balance .num[data-len="m"] { font-size: 16px !important; }
  .topbar .balance .num[data-len="l"] { font-size: 13px !important; }
  .chip::before { inset: 7px; }
  .c10000 { font-size: 12px; } .c100000 { font-size: 10.5px; }
  .chips { gap: 6px; }
  .bet-amt { min-width: 120px; padding: 7px 14px; }
  .bet-amt .mono { font-size: 22px; }
}

/* WICK coin: replaces the W$ prefix on every amount */
.coin { position: relative; display: inline-block; width: .82em; height: .82em; margin-right: .16em; vertical-align: -.06em; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, #0b0c10 0 46%, transparent 47%), conic-gradient(from 210deg, #C8FF2E, #2EF2FF, #8C6BFF, #FF3BD4, #C8FF2E);
  box-shadow: 0 0 .35em rgba(46,242,255,.45), inset 0 0 0 .04em rgba(255,255,255,.35); -webkit-text-fill-color: initial; }
.coin::before { content: ""; position: absolute; left: 50%; top: 16%; bottom: 16%; width: 6%; min-width: 1px; transform: translateX(-50%); background: #C8FF2E; border-radius: 1px; }
.coin::after { content: ""; position: absolute; left: 50%; top: 30%; bottom: 30%; width: 18%; min-width: 2px; transform: translateX(-50%); background: #C8FF2E; border-radius: 1px; box-shadow: 0 0 .2em #C8FF2E; }
.amt { display: inline-block; white-space: nowrap; }
.wager-v, .wager-sub { white-space: nowrap; }
.wager-v .coin { width: .7em; height: .7em; }
.wager-l { flex: 1; min-width: 0; }
.wager-sub { white-space: normal; line-height: 1.35; }
.wager-v { flex-shrink: 0; }
.stage > img.anim { opacity: 0; transition: opacity .3s ease; z-index: 1; }
.stage > img.anim.on { opacity: 1; }
.stage > img.a-deal { z-index: 2; } .stage > img.a-win, .stage > img.a-lose { z-index: 3; }

/* Balance card (left panel) */
.bank { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(200,255,46,.12), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(140,107,255,.16), transparent 55%), #0b0c10 padding-box,
    linear-gradient(130deg, #C8FF2E, #2EF2FF 45%, #8C6BFF 75%, #FF3BD4) border-box;
  border: 1.5px solid transparent; box-shadow: 0 0 28px rgba(46,242,255,.14); }
.bank-top { display: flex; justify-content: space-between; align-items: center; }
.bank-lbl { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone); }
.bank-tag { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acid); border: 1px solid rgba(200,255,46,.4); border-radius: 999px; padding: 2px 8px; }
.bank-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(110deg, #C8FF2E 0%, #2EF2FF 45%, #8C6BFF 80%, #FF3BD4 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(46,242,255,.3)); }
.bank-num .coin { width: .72em; height: .72em; }
.bank-num[data-len="m"] { font-size: clamp(20px, 1.7vw, 26px); }
.bank-num[data-len="l"] { font-size: clamp(16px, 1.3vw, 20px); }
@media all { .bank-num { animation: shimmer 5s linear infinite; } }
.bank-num.bump { animation: bankbump .6s var(--ease); }
@keyframes bankbump { 40% { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(200,255,46,.6)); } }
.bank-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.bank-bar i { display: block; height: 100%; width: 50%; border-radius: inherit; background: linear-gradient(90deg, #8C6BFF, #2EF2FF, #C8FF2E); box-shadow: 0 0 10px rgba(46,242,255,.6); transition: width .6s var(--ease); }
.bank.up { box-shadow: 0 0 34px rgba(200,255,46,.22); }
.bank.dn { box-shadow: 0 0 30px rgba(255,59,212,.18); }
.bank .kpis { padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.07); }
.kpis .mono { white-space: nowrap; }
.chart-wrap { height: 128px; }

/* Topbar balance only when the left panel isn't beside the table */
/* the balance is always in the top bar, on every game */
.topbar .balance { display: flex !important; }
@media all {
  .topbar .balance .num { font-family: var(--font-display); font-weight: 700; font-size: 20px; background: linear-gradient(110deg, #C8FF2E, #2EF2FF 50%, #8C6BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .topbar .balance .lbl { color: var(--bone); letter-spacing: .2em; }
}

.dm-ctrl .select { width: 100%; }
.bank .kpis .lbl { font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
.bank .kpis { gap: 4px; }

/* Widescreen stage: blurred ambient copy of the live clip fills the sides */
.stage > img.amb { left: 0; top: -12%; width: 100%; height: 124%; aspect-ratio: auto; transform: none; object-fit: cover; z-index: 0;
  filter: blur(26px) saturate(1.35) brightness(.55); -webkit-mask-image: none; mask-image: none; opacity: .95; pointer-events: none; }
.stage > img:not(.amb), .stage .mood { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%); height: 100%; aspect-ratio: 9 / 10; }
.stage::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(5,5,6,.85) 100%), radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(5,5,6,.6) 100%); }
.stage > img#dealerImg { z-index: 1; }
.stage > img:not(.amb), .stage .mood { object-position: 50% 18%; }
.stage > img:not(.amb), .stage .mood { aspect-ratio: 1 / 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 14%, #000 34%, #000 66%, rgba(0,0,0,.5) 86%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 14%, #000 34%, #000 66%, rgba(0,0,0,.5) 86%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%); }
.stage > img.amb { filter: blur(22px) saturate(1.4) brightness(.72); }

/* Widescreen dealer footage: full-bleed 16:9 clips, no side fill needed */
.stage.wide > img:not(.amb), .stage.wide .mood { left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.stage.wide > img.amb { display: none; }
.stage > img.anim, .stage .mood { transition: opacity .45s ease; }
.stage.wide.still > img#dealerImg { animation: none; }
.stage.wide { height: clamp(210px, 36vh, 340px); margin-bottom: -118px; }
.stage.wide > img:not(.amb), .stage.wide .mood { object-position: 50% 40%; }
@media (max-width: 760px) { .stage.wide { height: auto; aspect-ratio: 16 / 10; margin-bottom: -70px; } }

/* Video dealer layers: hard swaps only (clips share the same frame at every cut) */
.stage video.dv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; object-fit: cover; object-position: 50% 40%;
  opacity: 0; transition: none; z-index: 1; pointer-events: none; background: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.stage video.dv.on { opacity: 1; z-index: 2; }
.stage.mooded video.dv { opacity: 0; }
.stage > img.anim, .stage > img.anim.on { transition: none; }

/* Ride / cash-out decision: clean, flat, no glow */
#rideControls { gap: 10px; }
#rideControls .ride { gap: 8px; }
#rideControls .ride-dot { width: 6px; height: 6px; box-shadow: none; animation: none; background: var(--plasma); }
#rideControls .ride-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8A8F98); }
#rideControls .ride-text .dim.small { display: none; }
.ride-btns { gap: 8px; max-width: 480px; }
.ride-btns .btn { min-height: 48px; border-radius: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; transform: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ride-go { color: var(--bone); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); box-shadow: none; text-shadow: none; animation: none !important; background-size: auto; }
.ride-go::after { display: none; }
.ride-go:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); box-shadow: none; transform: none; }
.ride-go:active { background: rgba(255,255,255,.12); }
.ride-go svg { color: var(--acid); width: 16px; height: 16px; }
#rideControls .co-inline { color: #0A0B0D; background: var(--acid); border: 1px solid var(--acid); box-shadow: none; animation: none; }
#rideControls .co-inline:hover { background: #D6FF5C; border-color: #D6FF5C; }
#rideControls .co-inline .amt, #rideControls .co-inline .mono { font-family: var(--font-mono); font-weight: 600; }
#rideControls .co-inline.confirm { background: var(--bone); border-color: var(--bone); color: #0A0B0D; animation: none; }
.ride-btns .btn:focus { outline: none; box-shadow: none; }
.ride-btns .btn:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; box-shadow: none; }
.ride-btns .btn:focus-visible { outline: none; } .ride-go:focus-visible { border-color: rgba(255,255,255,.32); }

/* ---------------- Baccarat ---------------- */
body.game-bac .rules-bj, body:not(.game-bac) .rules-bac { display: none; }
.bac-felt::before { content: none; display: none; }
.bac-felt:has(#bRide:not([hidden]))::before { opacity: 0; }
.bac-hands { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bac-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8px 12px; border-radius: 14px; border: 1px solid transparent; transition: border-color .25s ease, background-color .25s ease; }
.bac-side .cards { padding-left: 32px; min-height: 110px; }
.bac-side .hand-label > span:first-child { color: var(--acid); }
.bac-side.bank-side .hand-label > span:first-child { color: var(--plasma); }
.bac-side.bank-side .total { color: #fff; background: linear-gradient(110deg, #2EF2FF, #8C6BFF); box-shadow: 0 0 18px rgba(46,242,255,.45), inset 0 1px 0 rgba(255,255,255,.45); }
.bac-side.won { border-color: rgba(200,255,46,.45); background: rgba(200,255,46,.05); }
.bac-side.bank-side.won { border-color: rgba(46,242,255,.45); background: rgba(46,242,255,.05); }
#bMsg { position: relative; z-index: 3; text-align: center; }

/* Bet spots */
.bac-spots { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 8px; width: 100%; max-width: 480px; margin: 0 auto; }
.spot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--bone); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.spot:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.spot-n { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.spot-p { font-size: 11px; color: var(--muted, #8A8F98); }
.spot[aria-checked="true"] { border-color: var(--acid); background: rgba(200,255,46,.1); }
.spot[aria-checked="true"] .spot-n { color: var(--acid); }
.spot.bk[aria-checked="true"] { border-color: var(--plasma); background: rgba(46,242,255,.1); }
.spot.bk[aria-checked="true"] .spot-n { color: var(--plasma); }
.spot.tie[aria-checked="true"] { border-color: #FF8AE6; background: rgba(255,138,230,.1); }
.spot.tie[aria-checked="true"] .spot-n { color: #FF8AE6; }
.spot:disabled { opacity: .5; cursor: default; }

/* Decision controls: same clean style as blackjack */
.bac-ride { flex-direction: column; align-items: stretch; gap: 10px; margin: 0; position: relative; z-index: 3; }
.bac-ride .ride { justify-content: center; flex-wrap: nowrap; background: none; border: none; padding: 0; gap: 8px; }
.bac-ride .ride-dot { width: 6px; height: 6px; box-shadow: none; animation: none; background: var(--plasma); }
.bac-ride .ride-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8A8F98); }
.bac-ride .b-co { display: inline-flex; color: #0A0B0D; background: var(--acid); border: 1px solid var(--acid); box-shadow: none; }
.bac-ride .b-co:hover { background: #D6FF5C; border-color: #D6FF5C; }
.bac-ride .b-co.confirm { background: var(--bone); border-color: var(--bone); }

/* ---------------- Phone polish ---------------- */
@media (max-width: 560px) {
  .dealer-panel .bank { width: 100%; max-width: none; box-sizing: border-box; }
  .dm-ctrl, .dm-ctrl .select { width: 100%; }
  .status { font-size: 17px; line-height: 1.35; padding: 0 6px; }
  #bMsg { margin-top: 4px; }
  .bac-hands { gap: 6px; }
  .bac-side { padding: 6px 4px 10px; }
  .bac-side .cards { min-height: 96px; padding-left: 26px; }
  .bac-spots { gap: 6px; }
  .spot { padding: 10px 4px; }
  .spot-n { font-size: 13px; letter-spacing: .08em; }
  .bac-ride .ride-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bac-ride .ride-btns .btn { width: 100%; justify-content: center; }
  .chips { gap: 6px; }
  .topbar .balance .num { font-size: 18px; }
}
@media (max-width: 380px) { .bac-side .cards .card { margin-left: -40px; } }

/* ---------------- You Win overlay ---------------- */
.win-fx { position: absolute; inset: 0; z-index: 6; overflow: hidden; border-radius: inherit; display: grid; place-items: start center; cursor: pointer; }
.wf-scrim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 70% at 50% 32%, rgba(10,11,13,.35), rgba(10,11,13,.82)); }
.wf-rays { position: absolute; left: 50%; top: 32%; width: 160%; aspect-ratio: 1; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(200,255,46,.22) 0deg 6deg, transparent 6deg 18deg, rgba(46,242,255,.18) 18deg 24deg, transparent 24deg 36deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, rgba(0,0,0,.6) 34%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, rgba(0,0,0,.6) 34%, transparent 62%); }
.wf-ring { position: absolute; left: 50%; top: 32%; width: 46%; aspect-ratio: 1; border-radius: 50%; opacity: 0; border: 3px solid var(--acid); box-shadow: 0 0 40px rgba(200,255,46,.6), inset 0 0 40px rgba(46,242,255,.4); }
.wf-box { position: relative; filter: drop-shadow(0 0 22px rgba(200,255,46,.35)) drop-shadow(0 4px 0 rgba(0,0,0,.45)); display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: clamp(12px, 5%, 30px); text-align: center; }
.wf-kicker { opacity: 0; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--plasma); text-shadow: 0 0 12px rgba(46,242,255,.7); }
.wf-title { opacity: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 6.6vw, 88px); line-height: .95; letter-spacing: -.01em; white-space: nowrap;
  background: linear-gradient(100deg, #C8FF2E 10%, #7CFFB0 40%, #2EF2FF 70%, #8C6BFF 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wf-amt { opacity: 0; margin-top: 6px; padding: 6px 16px; border-radius: 999px; font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: #0A0B0D; background: var(--acid); box-shadow: 0 0 24px rgba(200,255,46,.55); }
.wf-amt .coin { filter: none; }
.wf-bit { position: absolute; left: 50%; top: 32%; width: 9px; height: 14px; border-radius: 2px; opacity: 0; }
.wf-bit.r { width: 9px; height: 9px; border-radius: 50%; }
@media (max-width: 560px) { .wf-kicker { font-size: 10px; } .wf-amt { padding: 4px 12px; margin-top: 2px; } .wf-box { margin-top: 10px; } }

/* ---------- Accounts ---------- */
.acct-btn { display: inline-flex; align-items: center; gap: 8px; position: relative; font: 600 var(--text-sm)/1 var(--font-body); color: var(--bone); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: pointer; transition: border-color .2s, background .2s; }
.acct-btn:not(:has(.acct-av)) { padding: 9px 16px; }
.acct-btn:hover { border-color: var(--acid); }
.acct-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--holo); color: var(--void); font: 700 13px/1 var(--font-display); }
.acct-nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); flex-shrink: 0; }
.acct-dot[data-state="synced"] { background: var(--acid); box-shadow: 0 0 8px rgba(200,255,46,.7); }
.acct-dot[data-state="offline"] { background: #FFB020; }
.acct-dot[data-state="loading"] { background: var(--plasma); animation: acctPulse 1s infinite alternate; }
@keyframes acctPulse { to { opacity: .3; } }
.acct-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; width: min(420px, calc(100vw - 32px)); padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: radial-gradient(120% 60% at 100% 0%, rgba(140,107,255,.16), transparent 60%), radial-gradient(80% 50% at 0% 100%, rgba(46,242,255,.08), transparent 60%), var(--surface); color: var(--bone); box-shadow: 0 30px 80px rgba(0,0,0,.6); font-family: var(--font-body); }
.acct-dlg::backdrop { background: rgba(5,5,6,.72); backdrop-filter: blur(6px); }
.acct-dlg[open] { animation: acctIn .35s var(--ease); }
@keyframes acctIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.acct-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--steel-2); font-size: 20px; line-height: 1; cursor: pointer; }
.acct-x:hover { color: var(--bone); border-color: var(--steel); }
.acct-brand { display: inline-flex; align-items: center; font: 700 22px/1 var(--font-display); letter-spacing: .02em; margin-bottom: 16px; }
.acct-dlg h2 { font: 600 var(--text-lg)/1.15 var(--font-display); margin: 0 0 6px; }
.acct-sub { color: var(--steel-2); font-size: var(--text-sm); margin: 0 0 18px; overflow-wrap: anywhere; }
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--void); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
.acct-tabs button { font: 600 var(--text-sm)/1 var(--font-body); padding: 10px; border-radius: 9px; border: 0; background: transparent; color: var(--steel-2); cursor: pointer; }
.acct-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--bone); box-shadow: inset 0 -2px 0 var(--acid); }
.acct-form { display: grid; gap: 12px; }
.acct-form label { display: grid; gap: 6px; font-size: var(--text-xs); color: var(--steel-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.acct-form input { font: 500 var(--text-base)/1.2 var(--font-body); color: var(--bone); background: var(--void); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; text-transform: none; letter-spacing: 0; }
.acct-form input:focus { outline: none; border-color: var(--plasma); box-shadow: 0 0 0 3px rgba(46,242,255,.18); }
.acct-msg { min-height: 1.2em; margin: 0; font-size: var(--text-sm); color: var(--signal); }
.acct-msg.ok { color: var(--acid); }
.acct-msg:empty { min-height: 0; }
.acct-go { width: 100%; padding: 14px; }
.acct-go.loading { opacity: .6; pointer-events: none; }
.acct-link { justify-self: center; background: none; border: 0; color: var(--plasma); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; padding: 4px; }
.acct-link:hover { text-decoration: underline; }
.acct-fine { margin: 16px 0 0; font-size: var(--text-xs); color: var(--steel); text-align: center; }
.acct-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.acct-stats div { background: var(--void); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 4px; }
.acct-stats span { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--steel); text-transform: uppercase; letter-spacing: .08em; }
.acct-stats b { font-size: var(--text-base); color: var(--bone); font-weight: 600; }
.acct-stats b.up { color: var(--acid); } .acct-stats b.dn { color: var(--signal); }
.acct-sync { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--steel-2); margin: 0 0 16px; }
.acct-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); flex-shrink: 0; }
.acct-sync[data-state="offline"] i { background: #FFB020; }
@media (max-width: 560px) {
  .acct-nm { max-width: 72px; }
  .acct-btn:not(:has(.acct-av)) { padding: 7px 12px; font-size: var(--text-xs); }
  .acct-dlg { padding: 22px 18px; }
}

/* ---------------- Ultimate Texas Hold'em ---------------- */
body.game-uth .rules-bj, body:not(.game-uth) .rules-uth { display: none; }
body.game-lir .rules-bj, body:not(.game-lir) .rules-lir, body.game-tcp .rules-bj, body:not(.game-tcp) .rules-tcp { display: none; }
.rules-uth .uth-pt { margin-top: 14px; }
.uth-felt::before { content: none; display: none; }
.uth-felt .hand-zone, .uth-board, .uth-spots, #hMsg, .uth-dec { position: relative; z-index: 3; }
.uth-cards { padding-left: 32px; min-height: 110px; justify-content: center; }
.uth-hand { font-size: 12px; color: var(--muted, #8A8F98); letter-spacing: .04em; }
.uth-board { display: grid; grid-template-columns: repeat(5, 70px); gap: 10px; justify-content: center; padding: 10px 0; }
.uth-board .slot { width: 70px; height: 98px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.02); display: grid; place-items: center; }
.uth-board .slot.filled { border-color: transparent; background: none; }
.uth-board .slot .card { width: 70px; height: 98px; margin-left: 0; }
.uth-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.uspot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); transition: border-color .2s ease, background-color .2s ease; }
.uspot .us-n { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8A8F98); }
.uspot .us-v { font-size: 14px; color: var(--bone); }
.uspot.on { border-color: rgba(46,242,255,.4); background: rgba(46,242,255,.06); }
.uspot.on .us-n { color: var(--plasma); }
.uspot.won { border-color: rgba(200,255,46,.55); background: rgba(200,255,46,.1); }
.uspot.won .us-n { color: var(--acid); }
.uspot.lost { border-color: rgba(255,77,109,.45); background: rgba(255,77,109,.07); opacity: .8; }
.uspot.lost .us-n { color: #FF4D6D; }
.uspot.push { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }
.uth-dec { flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.uth-dec-l { text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8A8F98); }
.uth-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.uth-act { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.uth-act small { font-size: 11px; opacity: .7; }
.uth-act.primary-act { border-color: rgba(200,255,46,.5); }
.uth-act.suggest { border-color: var(--plasma); box-shadow: 0 0 0 1px var(--plasma) inset; }
.uth-dec .h-co { align-self: center; color: #0A0B0D; background: var(--acid); border: 1px solid var(--acid); box-shadow: none; min-width: 220px; justify-content: center; }
.uth-dec .h-co:hover:not(:disabled) { background: #D6FF5C; border-color: #D6FF5C; }
.uth-dec .h-co.confirm { background: var(--bone); border-color: var(--bone); }
.uth-dec .h-co:disabled, .bac-ride .b-co:disabled { opacity: .55; }
.pricing { font-size: .55em; color: var(--muted, #8A8F98); letter-spacing: .06em; }
.co-note { margin: 8px 0 0; }
#hMsg .dim { color: var(--muted, #8A8F98); }
@media (max-width: 560px) {
  .uth-board { grid-template-columns: repeat(5, 56px); gap: 6px; padding: 6px 0; }
  .uth-board .slot, .uth-board .slot .card { width: 56px; height: 80px; }
  .uth-board .slot .card .cc { font-size: 22px; }
  .uth-cards { min-height: 92px; padding-left: 26px; }
  .uth-act { flex: 1 1 0; min-width: 0; }
  .uth-dec .h-co { width: 100%; min-width: 0; }
  .uspot { padding: 6px 4px; }
}

/* ---------------- Let It Ride ---------------- */
.lir-felt::before { content: none; display: none; }
.lir-felt .hand-zone, .lir-comm-wrap, .lir-felt .uth-spots, #lMsg, #lDecide, #tpMsg, #tpDecide { position: relative; z-index: 3; }
.lir-comm-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; }
.lir-cl > span:first-child { color: var(--plasma); }
.lir-comm { grid-template-columns: repeat(2, 78px); gap: 14px; }
.lir-comm .slot, .lir-comm .slot .card { width: 78px; height: 108px; }
.lir-comm .slot { border: none; background: none; }
.lir-pay { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8A8F98); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); }
.lir-pay.hit { color: #0A0B0D; background: var(--acid); border-color: var(--acid); }
.lir-pay.miss { color: #FF4D6D; border-color: rgba(255,77,109,.4); }
.uspot.pulled { border-style: dashed; border-color: rgba(255,255,255,.18); background: none; }
.uspot.pulled .us-v { font-size: 11px; color: var(--muted, #8A8F98); font-family: var(--font-mono); letter-spacing: .06em; }
@media (max-width: 560px) {
  .lir-comm { grid-template-columns: repeat(2, 64px); gap: 10px; }
  .lir-comm .slot, .lir-comm .slot .card { width: 64px; height: 90px; }
}
.nav a { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 560px) {
  .nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 10px; }
}

/* ---------------- Kit tables: craps, sic bo, plinko, keno ---------------- */
body.game-craps .rules-bj, body:not(.game-craps) .rules-craps,
body.game-sicbo .rules-bj, body:not(.game-sicbo) .rules-sicbo,
body.game-plinko .rules-bj, body:not(.game-plinko) .rules-plinko,
body.game-keno .rules-bj, body:not(.game-keno) .rules-keno,
body.game-vault .rules-bj, body:not(.game-vault) .rules-vault,
body.game-roulette .rules-bj, body:not(.game-roulette) .rules-roulette,
body.game-mines .rules-bj, body:not(.game-mines) .rules-mines,
body.game-dice .rules-bj, body:not(.game-dice) .rules-dice,
body.game-limbo .rules-bj, body:not(.game-limbo) .rules-limbo,
body.game-crash .rules-bj, body:not(.game-crash) .rules-crash,

body.game-slots .rules-bj, body:not(.game-slots) .rules-slots { display: none; }
.kit-felt::before { content: none; display: none; }
.kit-felt > *:not(.stage) { position: relative; z-index: 3; }
.kit-ride { flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.kit-ride .kit-extra { margin-bottom: 2px; }
.kit-ride .b-co:disabled { opacity: .55; }
.chip.sel { outline: 2px solid var(--acid); outline-offset: 3px; }

/* Dice */
.dice-row { display: flex; justify-content: center; gap: 16px; min-height: 64px; padding: 6px 0; }
.die { width: 58px; height: 58px; border-radius: 13px; background: linear-gradient(145deg, #fff, #E4E0D6); box-shadow: 0 10px 22px -8px rgba(0,0,0,.7), inset 0 -3px 0 rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.2); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 9px; box-sizing: border-box; }
.die i { display: block; width: 10px; height: 10px; margin: auto; border-radius: 50%; }
.die i.on { background: #0b0c0f; box-shadow: inset 0 2px 2px rgba(255,255,255,.15); }
.die[data-v="1"] i.on, .die[data-v="5"] i.on:nth-child(5) { background: #FF2E88; }
@media all {
  .dice-row.rolling .die { animation: tumble .14s linear infinite; }
  .dice-row.rolled .die { animation: land .4s var(--ease) both; }
  .dice-row.rolled .die:nth-child(2) { animation-delay: .06s; }
}
@keyframes tumble { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-8px); } 100% { transform: rotate(360deg) translateY(0); } }
@keyframes land { 0% { transform: translateY(-20px) rotate(-25deg) scale(1.1); } 60% { transform: translateY(3px) rotate(4deg); } 100% { transform: none; } }

/* Craps */
.cr-points { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 480px; width: 100%; margin: 6px auto 0; padding-top: 4px; }
.cr-points .pt { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; padding: 12px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--bone); transition: all .25s ease; }
.cr-points .pt.on { border-color: var(--acid); background: rgba(200,255,46,.12); color: var(--acid); box-shadow: 0 0 22px rgba(200,255,46,.25); }
.cr-puck { position: absolute; top: -10px; right: -6px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 5px 8px; border-radius: 999px; background: #1a1c21; color: var(--muted, #8A8F98); border: 1px solid rgba(255,255,255,.2); }
.cr-puck.on { background: var(--bone); color: #0A0B0D; border-color: var(--bone); }
.cr-hist, .sb-hist { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; min-height: 22px; font-size: 11px; }
.cr-hist span, .sb-hist span { min-width: 22px; padding: 3px 5px; text-align: center; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--muted, #8A8F98); }
.cr-hist .w { background: rgba(200,255,46,.16); color: var(--acid); }
.cr-hist .l { background: rgba(255,77,109,.16); color: #FF4D6D; }
.cr-hist .pt { background: rgba(46,242,255,.16); color: var(--plasma); }
.cr-sides { grid-template-columns: 1fr 1fr; max-width: 480px; }
.cr-bets { max-width: 320px; grid-template-columns: 1fr 1fr; }

/* Sic Bo */
.sb-top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sb-dice { gap: 14px; }
.sb-slot { width: 58px; height: 58px; display: grid; place-items: center; }
.sb-cover { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b4bff, #1d1640 70%); box-shadow: 0 0 0 2px rgba(140,107,255,.5), 0 0 24px rgba(140,107,255,.35); }
@media all {
  .sb-slot.shaking .sb-cover { animation: shake .12s linear infinite; }
  .sb-slot.pop .die { animation: land .4s var(--ease) both; }
}
@keyframes shake { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-3px,1px) rotate(-6deg); } 75% { transform: translate(3px,-1px) rotate(6deg); } }
.sb-hist .sm { color: var(--plasma); } .sb-hist .bg { color: var(--acid); } .sb-hist .tr { color: #FF2E88; }
.sb-board { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sb-row { display: grid; gap: 6px; }
.sb-r1 { grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.4fr; }
.sb-r2 { grid-template-columns: repeat(12, 1fr); }
.sb-r3 { grid-template-columns: repeat(14, 1fr); }
.sb-r4 { grid-template-columns: repeat(6, 1fr); }
.sb-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 2px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--bone); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.sb-cell:hover:not(:disabled) { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.26); }
.sb-cell:disabled { cursor: default; }
.sb-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.sb-r3 .sb-name { font-size: 15px; letter-spacing: 0; }
.sb-sub { font-size: 10px; color: var(--muted, #8A8F98); }
.sb-pay { font-size: 9.5px; color: var(--muted, #8A8F98); white-space: nowrap; }
.sb-r3 .sb-pay { font-size: 9px; }
.sb-faces { display: flex; gap: 2px; }
.sb-pip .die { width: 18px; height: 18px; border-radius: 4px; padding: 2px; box-shadow: none; }
.sb-pip .die i { width: 3.4px; height: 3.4px; }
.sb-r4 .sb-pip .die { width: 26px; height: 26px; padding: 3px; border-radius: 6px; }
.sb-r4 .sb-pip .die i { width: 5px; height: 5px; }
.sb-stack { position: absolute; top: -7px; right: -5px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--acid); color: #0A0B0D; box-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 2; }
.sb-cell.has { border-color: rgba(200,255,46,.45); background: rgba(200,255,46,.07); }
.sb-cell.hit { border-color: var(--acid); background: rgba(200,255,46,.18); box-shadow: 0 0 18px rgba(200,255,46,.3); }
.sb-cell.miss { opacity: .45; }
@media all { .sb-cell.bump { animation: bump .25s var(--ease); } }
@keyframes bump { 50% { transform: scale(1.06); } }

/* Plinko */
.pl-wrap { width: 100%; }
.pl-canvas { display: block; width: 100%; height: clamp(300px, 46vw, 470px); }
.pl-opts { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.seg button { border: 0; background: none; color: var(--muted, #8A8F98); font: 600 13px var(--font-display, inherit); letter-spacing: .04em; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--bone); color: #0A0B0D; }
.seg button:disabled { opacity: .5; cursor: default; }
.tog { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bone); cursor: pointer; user-select: none; }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tog-ui { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; transition: background-color .2s; }
.tog-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); transition: transform .2s var(--ease); }
.tog input:checked + .tog-ui { background: var(--acid); }
.tog input:checked + .tog-ui::after { transform: translateX(14px); background: #0A0B0D; }
.tog input:focus-visible + .tog-ui { outline: 2px solid var(--plasma); outline-offset: 2px; }

/* Keno */
.kn-balls { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.kb { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: radial-gradient(circle at 35% 30%, #fff, #cfcbc1); color: #0A0B0D; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.kb.hit { background: radial-gradient(circle at 35% 30%, #f4ffd0, var(--acid)); box-shadow: 0 0 14px rgba(200,255,46,.6); }
.kb.empty { background: none; border: 1px dashed rgba(255,255,255,.16); box-shadow: none; }
.kn-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: 100%; max-width: 560px; margin: 0 auto; }
.kn { aspect-ratio: 1.35; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: var(--bone); font-family: var(--font-display); font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.kn:hover:not(:disabled) { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.kn:disabled { cursor: default; }
.kn.pick { border-color: var(--plasma); background: rgba(46,242,255,.14); color: var(--plasma); }
.kn.drawn { background: rgba(255,46,136,.12); border-color: rgba(255,46,136,.4); color: #FF7AB8; }
.kn.hit { background: var(--acid); border-color: var(--acid); color: #0A0B0D; box-shadow: 0 0 18px rgba(200,255,46,.45); }
@media all { .kn.pop { animation: bump .3s var(--ease); } }
.kn-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 560px; margin: 0 auto; gap: 8px; }
.kn-tools { display: flex; gap: 6px; }
.kn-pay { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 560px; margin: 0 auto; }
.kp { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 10px; color: var(--muted, #8A8F98); }
.kp b { font-size: 12px; color: var(--bone); }
.kp.now { border-color: var(--acid); background: rgba(200,255,46,.12); }
.kp.now b { color: var(--acid); }
.kp-empty { font-size: 12px; color: var(--muted, #8A8F98); }

@media (max-width: 760px) {
  .sb-r2 { grid-template-columns: repeat(6, 1fr); }
  .sb-r3 { grid-template-columns: repeat(7, 1fr); }
}
@media (max-width: 560px) {
  .die, .sb-slot, .sb-cover { width: 48px; height: 48px; }
  .die { padding: 7px; border-radius: 11px; } .die i { width: 8px; height: 8px; }
  .sb-pip .die { width: 16px; height: 16px; padding: 2px; } .sb-pip .die i { width: 3px; height: 3px; }
  .sb-r4 .sb-pip .die { width: 22px; height: 22px; } .sb-r4 .sb-pip .die i { width: 4px; height: 4px; }
  .sb-r1 { grid-template-columns: 1fr 1fr 1fr; } .sb-r1 .sb-wide { grid-column: span 1; }
  .sb-r1 .sb-cell[data-b="small"] { order: 1; } .sb-r1 .sb-cell[data-b="any"] { order: 2; } .sb-r1 .sb-cell[data-b="big"] { order: 3; }
  .sb-r1 .sb-cell[data-b="odd"] { order: 4; } .sb-r1 .sb-cell[data-b="even"] { order: 5; grid-column: span 2; }
  .sb-cell { min-height: 48px; }
  .sb-name { font-size: 13px; }
  .cr-points .pt { font-size: 14px; padding: 10px 0; }
  .kn { font-size: 14px; aspect-ratio: 1.1; }
  .kn-grid { gap: 5px; }
  .kb { width: 28px; height: 28px; font-size: 11px; }
  .seg button { padding: 7px 11px; }
}
/* fixes */
.pl-felt .stage, .kn-felt .stage, .sb-felt .stage, .cr-felt .stage { margin-bottom: -30px; }
@media (max-width: 560px) { .pl-felt .stage, .kn-felt .stage, .sb-felt .stage, .cr-felt .stage { margin-bottom: -24px; } }
.cr-puck { display: none; }
.cr-points .pt { position: relative; }
.cr-points .pt.on::after { content: "ON"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 3px 7px; border-radius: 999px; background: var(--bone); color: #0A0B0D; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sb-r1 { grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.4fr; }
.sb-row > .sb-cell { min-width: 0; }
.sb-r2 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sb-r3 { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.sb-r4 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 760px) { .sb-r2 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sb-r3 { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sb-r1 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-r2 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 560px) {
  .sb-trip .sb-pip .die { width: 12px; height: 12px; padding: 1px; border-radius: 3px; }
  .sb-trip .sb-pip .die i { width: 2.4px; height: 2.4px; }
  .sb-faces { gap: 1px; }
  .kn-balls { gap: 4px; }
  .kb { width: 27px; height: 27px; font-size: 10.5px; }
  .pl-canvas { height: 330px; }
}

/* ================= Sportsbook ================= */
.nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--acid); color: var(--void); font: 700 11px/1 var(--font-mono); vertical-align: 1px; }
.nav-badge[hidden] { display: none; }
.sp-card { background-image: radial-gradient(120% 100% at 100% 0%, rgba(46,242,255,.14), transparent 60%); }
.sp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(160px, 34%); gap: 24px; align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); border: 1px solid transparent; background-image: linear-gradient(140deg, #0c1016, #0a0b0e 60%), var(--holo); background-origin: border-box; background-clip: padding-box, border-box; margin-bottom: 20px; }
.sp-hero h1 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; margin-bottom: 10px; }
.sp-hero .eyebrow { margin-bottom: 10px; }
.sp-hero p.dim { max-width: 56ch; font-size: var(--text-sm); }
.sp-holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-hero-fx { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.sp-hero-fx i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, rgba(46,242,255,.08), rgba(46,242,255,.65)); animation: spBar 2.6s var(--ease) infinite alternate; }
.sp-hero-fx i:nth-child(odd) { background: linear-gradient(to top, rgba(200,255,46,.08), rgba(200,255,46,.7)); }
.sp-hero-fx i:nth-child(1) { animation-delay: -.2s } .sp-hero-fx i:nth-child(2) { animation-delay: -1.1s } .sp-hero-fx i:nth-child(3) { animation-delay: -.6s } .sp-hero-fx i:nth-child(4) { animation-delay: -1.8s }
.sp-hero-fx i:nth-child(5) { animation-delay: -.9s } .sp-hero-fx i:nth-child(6) { animation-delay: -2.2s } .sp-hero-fx i:nth-child(7) { animation-delay: -.4s } .sp-hero-fx i:nth-child(8) { animation-delay: -1.5s }
@keyframes spBar { from { height: 18%; } to { height: 100%; } }

.sp-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sp-leagues { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; }
.sp-lg { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--steel-2); font: 500 var(--text-sm) var(--font-body); cursor: pointer; text-align: left; transition: background .2s, color .2s, border-color .2s; }
.sp-lg:hover { background: var(--surface); color: var(--bone); }
.sp-lg.on { background: var(--surface-2); color: var(--bone); border-color: var(--line-2); box-shadow: inset 3px 0 0 var(--acid); }
.sp-lg.empty { opacity: .45; }
.sp-lg-n { flex: 1; white-space: nowrap; }
.sp-lg-c { font-size: 11px; color: var(--steel); }
.sp-lg-live { font-size: 10px; color: var(--signal); border: 1px solid rgba(255,59,92,.45); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }

.sp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-head h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-right: auto; }
.sp-upd { width: 100%; text-align: right; margin-top: -8px; }
.sp-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--void); border: 1px solid var(--line); border-radius: 10px; }
.sp-seg button { font: 700 var(--text-xs) var(--font-mono); padding: 6px 12px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--steel-2); cursor: pointer; }
.sp-seg button:hover:not(:disabled) { color: var(--bone); }
.sp-seg button[aria-checked="true"] { color: var(--acid); background: rgba(200,255,46,.1); border-color: rgba(200,255,46,.5); }
.sp-seg button:disabled { opacity: .35; cursor: not-allowed; }

.sp-games { display: grid; gap: 10px; }
.sp-game { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px 14px; transition: border-color .25s; }
.sp-game:hover { border-color: var(--line-2); }
.sp-game.is-live { border-color: rgba(255,59,92,.35); background-image: radial-gradient(80% 120% at 0% 0%, rgba(255,59,92,.07), transparent 60%); }
.sp-meta { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 92px); gap: 8px; align-items: center; margin-bottom: 6px; }
.sp-when { font-size: var(--text-xs); color: var(--steel-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-game.is-live .sp-when { color: var(--signal); font-weight: 700; }
.sp-cols { display: contents; }
.sp-cols span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--steel); text-align: center; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 92px); gap: 8px; align-items: center; margin-top: 6px; }
.sp-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-team img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.sp-ph { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--steel-2); font: 700 10px var(--font-mono); }
.sp-nm { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-short { display: none; }
.sp-rec { font-size: 11px; color: var(--steel); white-space: nowrap; }
.sp-sc { margin-left: auto; font-size: var(--text-base); font-weight: 700; color: var(--bone); padding-right: 4px; }
.sp-odd { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--ease), box-shadow .2s; }
.sp-odd:hover { border-color: var(--plasma); }
.sp-odd:active { transform: scale(.96); }
.sp-odd .sp-ln { font-size: 12px; color: var(--steel-2); }
.sp-odd .sp-pr { font-size: var(--text-sm); font-weight: 700; color: var(--plasma); }
.sp-odd.sel { background: var(--acid); border-color: var(--acid); box-shadow: 0 0 22px rgba(200,255,46,.35); }
.sp-odd.sel .sp-ln, .sp-odd.sel .sp-pr { color: var(--void); }
.sp-odd.lock { cursor: default; color: var(--steel); background: transparent; border-style: dashed; border-color: var(--line); font-size: var(--text-sm); }
.sp-draw .sp-ph { font-size: 14px; }
.sp-wp { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 12px; font-size: 11px; color: var(--steel-2); }
.sp-wpbar { height: 6px; border-radius: 99px; background: rgba(200,255,46,.6); overflow: hidden; }
.sp-wpbar i { display: block; height: 100%; background: var(--plasma); transition: width .6s var(--ease); }
.sp-note { margin-top: 10px; }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); display: inline-block; flex-shrink: 0; animation: spPulse 1.4s infinite; }
@keyframes spPulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,92,.7); } 70% { box-shadow: 0 0 0 7px rgba(255,59,92,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); } }
.sp-empty { padding: 36px 20px; text-align: center; color: var(--steel-2); border: 1px dashed var(--line-2); border-radius: var(--r-lg); display: grid; gap: 12px; justify-items: center; }
.sp-game.sk { display: grid; gap: 10px; }
.sk-l { height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), #1d2027, var(--surface-2)); background-size: 200% 100%; animation: spSk 1.2s infinite linear; }
.sk-l.short { width: 50%; }
@keyframes spSk { to { background-position: -200% 0; } }

.sp-side { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; max-height: calc(100dvh - 104px); overflow-y: auto; }
.sp-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.sp-tabs button[data-tab] { flex: 1; padding: 9px 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--steel-2); font: 700 var(--text-sm) var(--font-body); cursor: pointer; }
.sp-tabs button[data-tab].on { background: var(--surface-2); color: var(--bone); border-color: var(--line-2); }
.sp-tabs b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: var(--line-2); color: var(--bone); font: 700 11px var(--font-mono); }
.sp-tabs .on b { background: var(--acid); color: var(--void); }
.sp-close { display: none; }
.sp-pane { display: grid; gap: 10px; }
.sp-pane[hidden] { display: none; }
.sp-empty-slip { text-align: center; padding: 28px 12px; color: var(--steel-2); display: grid; gap: 6px; justify-items: center; }
.sp-es-ic { width: 54px; height: 54px; border-radius: 14px; border: 1px dashed var(--line-2); background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(46,242,255,.12) 10px 12px); margin-bottom: 6px; }
.sp-mode, .sp-mytabs { width: 100%; }
.sp-pane .sp-seg { display: flex; } .sp-pane .sp-seg button { flex: 1; }
.sp-picks { list-style: none; display: grid; gap: 8px; }
.sp-pick { position: relative; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 36px 10px 12px; }
.sp-pick.changed { border-color: rgba(255,200,46,.7); }
.sp-pick.locked { opacity: .55; }
.sp-pk-main { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: var(--text-sm); }
.sp-pk-p { color: var(--plasma); }
.sp-pk-sub { margin-top: 2px; }
.sp-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--steel); font-size: 18px; cursor: pointer; }
.sp-x:hover { color: var(--bone); background: var(--line); }
.sp-parlay { display: flex; justify-content: space-between; font-size: var(--text-sm); padding: 0 2px; }
.sp-parlay b { color: var(--plasma); }
.sp-stake { display: grid; gap: 6px; }
.sp-in { display: flex; align-items: center; gap: 6px; background: var(--void); border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; }
.sp-in:focus-within { border-color: var(--plasma); }
.sp-in input { flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; color: var(--bone); font: 700 var(--text-base) var(--font-mono); outline: none; }
.sp-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sp-quick .btn { padding: 7px 0; }
.sp-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--void); border: 1px solid var(--line); }
.sp-sum > div { display: grid; gap: 2px; }
.sp-win { color: var(--acid); font-weight: 700; }
.sp-place { width: 100%; padding: 14px; font-size: var(--text-base); }
.sp-clear { justify-self: center; }

.sp-bet { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.sp-bet header { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: var(--text-sm); }
.sp-bo { color: var(--plasma); }
.sp-bet.won { border-color: rgba(200,255,46,.45); } .sp-bet.lost { opacity: .7; } .sp-bet.cashed { border-color: rgba(46,242,255,.35); }
.sp-legs { list-style: none; display: grid; gap: 8px; }
.sp-leg { border-left: 2px solid var(--line-2); padding-left: 10px; }
.sp-leg-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); font-weight: 600; }
.sp-leg-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sp-res { font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 99px; align-self: center; white-space: nowrap; }
.sp-res.won { background: rgba(200,255,46,.15); color: var(--acid); } .sp-res.lost { background: rgba(255,59,92,.15); color: var(--signal); } .sp-res.push { background: var(--line); color: var(--steel-2); }
.sp-bet-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-bet-f > div { display: grid; gap: 2px; }
.sp-lost { color: var(--signal); } .sp-push { color: var(--steel-2); }
.sp-co { width: 100%; background: transparent; border-color: var(--plasma); color: var(--plasma); position: relative; }
.sp-co:hover:not(:disabled) { background: rgba(46,242,255,.1); box-shadow: 0 0 22px rgba(46,242,255,.25); }
.sp-co.confirm { background: var(--plasma); color: var(--void); }
.sp-co.up { animation: spUp .9s; } .sp-co.down { animation: spDown .9s; }
.sp-co:disabled { border-color: var(--line-2); color: var(--steel); }
.sp-arrow { font-style: normal; font-size: 10px; }
.sp-co.up .sp-arrow { color: var(--acid); } .sp-co.down .sp-arrow { color: var(--signal); }
.sp-co.confirm .sp-arrow { color: var(--void); }
@keyframes spUp { 0% { box-shadow: 0 0 0 0 rgba(200,255,46,.8); } 100% { box-shadow: 0 0 0 10px rgba(200,255,46,0); } }
@keyframes spDown { 0% { box-shadow: 0 0 0 0 rgba(255,59,92,.8); } 100% { box-shadow: 0 0 0 10px rgba(255,59,92,0); } }

.sp-fab { display: none; }
.sp-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; padding: 12px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--bone); font-size: var(--text-sm); font-weight: 600; box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); transition: opacity .25s, transform .25s var(--ease); max-width: calc(100vw - 32px); }
.sp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sp-toast.won { border-color: var(--acid); color: var(--acid); } .sp-toast.lost { border-color: rgba(255,59,92,.6); }

@media (max-width: 1180px) { .sp-layout { grid-template-columns: 170px minmax(0, 1fr) 300px; gap: 14px; } .sp-meta, .sp-row { grid-template-columns: minmax(0, 1fr) repeat(3, 76px); gap: 6px; } }
@media (max-width: 900px) {
  .sp-hero { grid-template-columns: 1fr; } .sp-hero-fx { display: none; }
  .sp-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-leagues { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; margin: 0 -4px; }
  .sp-leagues::-webkit-scrollbar { display: none; }
  .sp-lg { width: auto; flex-shrink: 0; border-color: var(--line); border-radius: 999px; padding: 8px 14px; }
  .sp-lg.on { box-shadow: none; border-color: var(--acid); }
  .sp-lg-c { display: none; }
  .sp-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; max-height: 82dvh; border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .3s var(--ease); padding-bottom: max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .sp-side.open { transform: none; }
  .sp-close { display: block; width: 40px; border-radius: 9px; border: 1px solid var(--line-2); background: transparent; color: var(--bone); font-size: 20px; cursor: pointer; }
  body.sp-sheet { overflow: hidden; }
  .sp-fab { display: flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--acid); background: rgba(10,11,14,.94); backdrop-filter: blur(10px); color: var(--bone); font: 700 var(--text-sm) var(--font-body); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 24px rgba(200,255,46,.2); cursor: pointer; white-space: nowrap; }
  .sp-fab b { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--acid); color: var(--void); font: 700 12px var(--font-mono); padding: 0 6px; }
  .sp-fab-sep { width: 1px; height: 18px; background: var(--line-2); }
  .sp-fab.bump { animation: spBump .45s var(--ease); }
  #view-sports { padding-bottom: 96px; }
  .sp-toast { bottom: 84px; }
}
@keyframes spBump { 40% { transform: translateX(-50%) scale(1.08); } }
@media (max-width: 560px) {
  .sp-game { padding: 10px; }
  .sp-meta, .sp-row { grid-template-columns: minmax(0, 1fr) repeat(3, 62px); gap: 5px; }
  .sp-rec { display: none; }
  .sp-full { display: none; } .sp-short { display: inline; }
  .sp-odd { height: 44px; } .sp-odd .sp-ln { font-size: 11px; } .sp-odd .sp-pr { font-size: 13px; }
  .sp-team { gap: 7px; } .sp-team img, .sp-ph { width: 22px; height: 22px; }
  .sp-cols span { font-size: 9px; letter-spacing: .04em; }
  .sp-head h2 { width: 100%; }
}
html.rm .sp-hero-fx i, html.rm .sp-dot, html.rm .sk-l { animation: none; }
/* Sportsbook: fights */
.sp-game.fight .sp-meta, .sp-game.fight .sp-row { grid-template-columns: minmax(0, 1fr) repeat(2, 92px); }
.sp-game.fight.box .sp-meta, .sp-game.fight.box .sp-row { grid-template-columns: minmax(0, 1fr) 110px; }
.sp-flag { border-radius: 50%; object-fit: cover !important; }
.sp-team .sp-res { margin-left: 4px; }
.sp-cardh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 4px 2px; font-family: var(--font-display); }
.sp-cardh b { font-weight: 600; font-size: var(--text-base); }
.sp-cardh span { font-size: var(--text-xs); white-space: nowrap; }
.sp-src { padding: 6px 4px; }
@media (max-width: 1180px) { .sp-game.fight .sp-meta, .sp-game.fight .sp-row { grid-template-columns: minmax(0, 1fr) repeat(2, 76px); } }
@media (max-width: 560px) { .sp-game.fight .sp-meta, .sp-game.fight .sp-row { grid-template-columns: minmax(0, 1fr) repeat(2, 66px); } .sp-game.fight.box .sp-meta, .sp-game.fight.box .sp-row { grid-template-columns: minmax(0, 1fr) 80px; } .sp-cardh { flex-direction: column; gap: 2px; } }
/* Sportsbook: prop menus */
.sp-more { margin-top: 12px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 1px dashed var(--line-2); background: transparent; color: var(--steel-2); font: 600 var(--text-xs) var(--font-body); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.sp-more:hover { color: var(--bone); border-color: var(--plasma); }
.sp-more[aria-expanded="true"] { border-style: solid; color: var(--plasma); border-color: rgba(46,242,255,.45); }
.sp-more i { font-style: normal; font: 700 16px/1 var(--font-mono); }
.sp-props { display: grid; gap: 14px; margin-top: 12px; animation: spIn .25s var(--ease); }
@keyframes spIn { from { opacity: 0; transform: translateY(-4px); } }
.sp-pg h4 { margin-bottom: 6px; font-weight: 600; }
.sp-pgrid { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-pgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-pgrid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-pgrid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-pb { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: 500 var(--text-xs) var(--font-body); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--ease); }
.sp-pb span { min-width: 0; overflow-wrap: anywhere; }
.sp-pb b { color: var(--plasma); font-size: var(--text-xs); white-space: nowrap; }
.sp-pb:hover { border-color: var(--plasma); }
.sp-pb:active { transform: scale(.97); }
.sp-pb.sel { background: var(--acid); border-color: var(--acid); color: var(--void); box-shadow: 0 0 18px rgba(200,255,46,.3); }
.sp-pb.sel b { color: var(--void); }
@media (max-width: 560px) { .sp-pgrid.c3, .sp-pgrid.c4, .sp-pgrid.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-pb { padding: 7px 8px; } }

/* ---------------- Slots: Neon Vault ---------------- */
.sl-card { background-image: radial-gradient(120% 100% at 100% 0%, rgba(255,210,63,.16), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(255,46,136,.12), transparent 60%); }
.sl-felt { gap: 12px; }
.sl-felt .stage { margin-bottom: -30px; }
.sl-cab { width: 100%; max-width: 640px; margin: 0 auto; padding: 14px; border-radius: 22px; position: relative;
  background: linear-gradient(#08090c, #08090c) padding-box, linear-gradient(130deg, #C8FF2E, #2EF2FF 35%, #8C6BFF 65%, #FF2E88) border-box; border: 2px solid transparent;
  box-shadow: 0 0 40px rgba(46,242,255,.18), 0 0 80px rgba(140,107,255,.14), inset 0 0 40px rgba(140,107,255,.08); }
.sl-felt.free .sl-cab { background: linear-gradient(#0c0905, #0c0905) padding-box, linear-gradient(130deg, #FFD23F, #FF7A3D 40%, #FF2E88 75%, #FFD23F) border-box; box-shadow: 0 0 50px rgba(255,210,63,.3), 0 0 90px rgba(255,46,136,.2); }
.sl-marquee { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 4px 10px; }
.sl-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .18em; color: var(--bone); text-shadow: 0 0 14px rgba(46,242,255,.5); }
.sl-title b { background: linear-gradient(110deg, #FFD23F, #FF7A3D 40%, #FF2E88 80%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,210,63,.45)); }
.sl-sub { font-size: 11px; letter-spacing: .08em; color: var(--steel-2); text-transform: uppercase; }
.sl-fs { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-size: 13px;
  background: linear-gradient(90deg, rgba(255,210,63,.18), rgba(255,46,136,.18)); border: 1px solid rgba(255,210,63,.5); color: #FFF4C2; }
.sl-fs b { font-family: var(--font-display); letter-spacing: .2em; color: #FFD23F; }
.sl-window { position: relative; padding: 8px; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, rgba(46,242,255,.08), transparent 60%), #040507; border: 1px solid rgba(255,255,255,.08); }
.sl-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 6px; }
.sl-reel { position: relative; overflow: hidden; aspect-ratio: 1 / var(--rows, 3); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.07) 50%, rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.07); }
.sl-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,5,7,.75), transparent 18%, transparent 82%, rgba(4,5,7,.75)); }
.sl-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.sl-reel.spinning .sl-strip { filter: blur(1.6px) brightness(1.1); }
.sl-reel.tease { border-color: rgba(255,210,63,.8); box-shadow: 0 0 18px rgba(255,210,63,.55), inset 0 0 22px rgba(255,210,63,.25); animation: sltease .5s ease-in-out infinite alternate; }
@keyframes sltease { to { box-shadow: 0 0 30px rgba(255,210,63,.85), inset 0 0 30px rgba(255,210,63,.4); } }
.sl-reel.landed { animation: slland .28s ease-out; }
@keyframes slland { 0% { box-shadow: inset 0 0 0 rgba(46,242,255,0); } 40% { box-shadow: inset 0 0 24px rgba(46,242,255,.35); } 100% { box-shadow: inset 0 0 0 rgba(46,242,255,0); } }
.sl-lines { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; overflow: visible; }
.sl-lines polyline { filter: drop-shadow(0 0 6px currentColor); stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: sldraw .5s ease-out forwards; opacity: .9; }
@keyframes sldraw { to { stroke-dashoffset: 0; } }
.sl-readout { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 4px 0; }
.sl-win { display: flex; align-items: baseline; gap: 10px; }
.sl-win .lbl { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--steel-2); }
.sl-win .mono { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--acid); text-shadow: 0 0 14px rgba(200,255,46,.45); }
.sl-win .mono.dim { color: var(--steel-2); text-shadow: none; }
.sl-win.pop .mono { animation: betbump .45s var(--ease); display: inline-block; }
.sl-win.big .mono { color: #FFD23F; text-shadow: 0 0 18px rgba(255,210,63,.7), 0 0 36px rgba(255,46,136,.4); }
.sl-pay { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.sl-pt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.sl-pt-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.sl-pt-row .sl-cell { width: 38px; flex: none; }
.sl-pt-row .mono i { font-style: normal; color: var(--steel-2); margin: 0 3px 0 8px; }
.sl-pt-row .mono i:first-child { margin-left: 0; }
.sl-pt-row.wide { grid-column: 1 / -1; flex-wrap: wrap; }
.sl-pay p { margin: 10px 0 0; }
.sl-auto { align-items: center; }
.sl-auto .seg-l { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-2); padding: 0 8px 0 6px; }
.sl-spin { min-width: 128px; }
.sl-spin.auto-on { background: #FF2E88; color: #fff; box-shadow: 0 0 22px rgba(255,46,136,.5); }
.sl-linebet { text-align: center; margin-top: 2px; }
#slBetControls.busy .chips, #slBetControls.busy .pl-opts { opacity: .55; }
@media (max-width: 560px) {
  .sl-felt .stage { margin-bottom: -24px; }
  .sl-cab { padding: 8px; border-radius: 16px; }
  .sl-title { font-size: 17px; }
  .sl-sub { font-size: 9.5px; }
  .sl-window { padding: 5px; }
  .sl-grid { gap: 4px; }
  .sl-lines { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .sl-pt-grid { grid-template-columns: 1fr; }
  .sl-win .mono { font-size: 20px; }
}

/* ---------------- Slot kit: shared look for every slot ---------------- */
.slot-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
@media (max-width: 900px) { .slot-layout { grid-template-columns: 1fr; } }
.slot-felt { background: #050507 var(--bg) center / cover no-repeat; position: relative; overflow: hidden; }
.slot-felt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(5,5,8,.35), rgba(5,5,8,.82) 100%); }
.slot-felt > * { position: relative; z-index: 2; }
.slot-felt .sk-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,210,63,.8), transparent), radial-gradient(2px 2px at 40% 80%, rgba(46,242,255,.7), transparent), radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,46,136,.8), transparent), radial-gradient(1.5px 1.5px at 10% 70%, rgba(200,255,46,.7), transparent);
  background-size: 300px 300px; animation: skmotes 18s linear infinite; opacity: .7; }
@keyframes skmotes { to { background-position: 0 -300px, 0 -300px, 0 -300px, 0 -300px, 0 -300px; } }
.sl-cab { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; transform-style: preserve-3d; isolation: isolate; }
.sl-cab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; background: radial-gradient(40% 35% at var(--mx, 30%) var(--my, 10%), rgba(255,255,255,.09), transparent 70%); }
.sl-cab.shake { animation: skshake .35s ease-in-out; }
.sl-cab.shake2 { animation: skshake2 .6s ease-in-out; }
@keyframes skshake { 25% { translate: -4px 1px; } 50% { translate: 4px -1px; } 75% { translate: -2px 0; } }
@keyframes skshake2 { 10% { translate: -7px 2px; } 25% { translate: 7px -3px; } 40% { translate: -6px 2px; } 55% { translate: 5px -1px; } 70% { translate: -3px 1px; } 85% { translate: 2px 0; } }
.sk-lights { position: absolute; left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; z-index: 4; overflow: visible; }
.sk-lights rect { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 11; animation: sklights 1.6s linear infinite; }
.sk-lights .a { stroke: #FFD23F; filter: drop-shadow(0 0 4px #FFD23F); }
.sk-lights .b { stroke: #FF2E88; stroke-dashoffset: 5.5; filter: drop-shadow(0 0 4px #FF2E88); opacity: .9; animation-name: sklights2; }
@keyframes sklights { to { stroke-dashoffset: -22; } }
@keyframes sklights2 { from { stroke-dashoffset: 5.5; } to { stroke-dashoffset: -16.5; } }
.sl-cab[data-mode="spin"] .sk-lights rect { animation-duration: .35s; }
.sl-cab[data-mode="win"] .sk-lights .a { stroke: #C8FF2E; filter: drop-shadow(0 0 6px #C8FF2E); }
.sl-cab[data-mode="win"] .sk-lights .b { stroke: #2EF2FF; filter: drop-shadow(0 0 6px #2EF2FF); }
.sl-cab[data-mode="win"] .sk-lights rect { animation-duration: .5s; }
.sl-cab[data-mode="free"] .sk-lights .b { stroke: #FFD23F; }
.sk-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.sk-big { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; border-radius: inherit; background: radial-gradient(60% 60% at 50% 50%, rgba(5,5,8,.55), rgba(5,5,8,.85)); cursor: pointer; opacity: 0; transition: opacity .2s; }
.sk-big.on { opacity: 1; }
.sk-big-in { text-align: center; transform: scale(.6); transition: transform .45s cubic-bezier(.2,1.6,.4,1); }
.sk-big.on .sk-big-in { transform: scale(1); }
.sk-big-t { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 7vw, 64px); letter-spacing: .06em; line-height: 1; background: linear-gradient(100deg, #FFD23F, #FF7A3D 40%, #FF2E88 70%, #FFD23F); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,210,63,.7)); animation: skbigt 1.2s linear infinite, skbigp .6s ease-in-out infinite alternate; }
.sk-big[data-tier="2"] .sk-big-t { background-image: linear-gradient(100deg, #2EF2FF, #8C6BFF 40%, #FF3BD4 70%, #2EF2FF); filter: drop-shadow(0 0 22px rgba(140,107,255,.8)); }
.sk-big[data-tier="3"] .sk-big-t { background-image: linear-gradient(100deg, #C8FF2E, #2EF2FF 25%, #8C6BFF 50%, #FF2E88 75%, #FFD23F); filter: drop-shadow(0 0 26px rgba(255,46,136,.85)); }
@keyframes skbigt { to { background-position: 200% 0; } }
@keyframes skbigp { to { transform: scale(1.06); } }
.sk-big-v { margin-top: 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4.5vw, 40px); color: #fff; text-shadow: 0 0 16px rgba(255,255,255,.5); }
.sk-big-x { margin-top: 4px; font-size: 13px; color: var(--steel-2); letter-spacing: .1em; text-transform: uppercase; }
.sk-tip { position: absolute; z-index: 8; min-width: 150px; max-width: 240px; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45; background: rgba(10,11,14,.96); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.6); pointer-events: none; }
.sk-tip b { display: block; font-family: var(--font-display); font-size: 14px; margin-bottom: 4px; }
.sk-tip .mono i { font-style: normal; color: var(--steel-2); margin: 0 3px 0 8px; } .sk-tip .mono i:first-child { margin-left: 0; }
/* symbols */
.sl-cell { position: relative; aspect-ratio: 1; transition: opacity .25s, filter .25s; cursor: pointer; }
.sl-art { position: absolute; inset: 6%; animation: skbob 3.4s ease-in-out infinite; animation-delay: calc(var(--d) * -1); will-change: transform; }
.sl-art img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 5px 8px rgba(0,0,0,.65)); user-select: none; -webkit-user-drag: none; }
.sl-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%); background-size: 300% 100%; background-position: 150% 0; mix-blend-mode: screen; animation: skshine 4.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes skbob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3%) scale(1.03); } }
@keyframes skshine { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -150% 0; } }
.sym-BO .sl-art { animation: skbob 3.4s ease-in-out infinite, skflick 2.3s steps(1) infinite; animation-delay: calc(var(--d) * -1); }
@keyframes skflick { 0%, 70%, 76%, 100% { opacity: 1; } 72% { opacity: .55; } 74% { opacity: .85; } }
.sym-ST .sl-art, .sym-S .sl-art, .sym-LK .sl-art { animation: skwob 2.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes skwob { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.07); } }
.sym-W .sl-art { animation: skpulse 1.8s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes skpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sym-OR .sl-art { animation: skorb 5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes skorb { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(0, -4%) rotate(4deg); } }
.sym-S::before, .sym-ST::before, .sym-LK::before, .sym-W::before, .sym-DI::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, rgba(255,210,63,.45)), transparent); animation: skhalo 2.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.sym-LK, .sym-W, .sym-DI { --glow: rgba(46,242,255,.4); }
@keyframes skhalo { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.15); } }
.sl-reel.spinning .sl-art, .sl-reel.spinning .sl-shine { animation: none; }
.sl-reel.spinning .sl-strip { filter: blur(2px) brightness(1.15) saturate(1.2); }
.sl-reel.landed .sl-art { animation: skland .38s cubic-bezier(.2,1.6,.4,1); }
@keyframes skland { 0% { transform: translateY(-8%) scale(.92); } 100% { transform: none; } }
.sl-cell.dimmed { opacity: .32; filter: saturate(.5); }
.sl-cell.win { z-index: 2; }
.sl-cell.win .sl-art { animation: skwin .55s ease-in-out infinite alternate; }
.sl-cell.win::after { content: ""; position: absolute; inset: 4%; border-radius: 14px; border: 2px solid rgba(255,255,255,.75); box-shadow: 0 0 16px var(--wc, #C8FF2E), inset 0 0 16px var(--wc, #C8FF2E); animation: skframe .55s ease-in-out infinite alternate; }
@keyframes skwin { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes skframe { from { opacity: .55; } to { opacity: 1; } }
.sl-cell.poke .sl-art { animation: skpoke .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes skpoke { 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(.95) rotate(4deg); } }
.sl-window { overflow: hidden; }
.sl-window::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 48%, transparent 56%); background-size: 250% 100%; animation: skglass 7s ease-in-out infinite; }
@keyframes skglass { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.sl-grid.slam { cursor: pointer; }
/* round spin button */
.sk-spin { position: relative; width: 92px; height: 92px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #0A0B0D;
  background: radial-gradient(circle at 35% 30%, #F6FFD6, #C8FF2E 45%, #6f9400); box-shadow: 0 0 0 4px #0b0c10, 0 0 26px rgba(200,255,46,.55), inset 0 -6px 0 rgba(0,0,0,.25); transition: transform .12s, filter .2s; }
.sk-spin::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(#C8FF2E, #2EF2FF, #8C6BFF, #FF2E88, #FFD23F, #C8FF2E); z-index: -1; animation: skring 3s linear infinite; -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); }
.sk-spin span { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: .12em; }
.sk-spin:hover:not(:disabled) { transform: scale(1.05); }
.sk-spin:active:not(:disabled) { transform: scale(.93); }
.sk-spin.going::before { animation-duration: .5s; }
.sk-spin.going { filter: brightness(.85); }
.sk-spin:disabled { filter: grayscale(.6) brightness(.6); cursor: not-allowed; }
.sk-spin.auto-on { background: radial-gradient(circle at 35% 30%, #FFD0E6, #FF2E88 50%, #7a0d4a); color: #fff; box-shadow: 0 0 0 4px #0b0c10, 0 0 26px rgba(255,46,136,.6); }
.sk-spin.auto-on span { font-size: 13px; }
@keyframes skring { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .sk-spin { width: 78px; height: 78px; } .sk-spin span { font-size: 16px; } }
html.rm .sl-art, html.rm .sl-shine, html.rm .sk-lights rect, html.rm .slot-felt .sk-motes, html.rm .sl-window::before { animation: none !important; }
/* Lockdown: locked wild overlay */
.ld-locks { position: absolute; inset: 8px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 6px; pointer-events: none; z-index: 2; }
.ld-lock { position: relative; }
.ld-lock.on { border-radius: 14px; background: radial-gradient(closest-side, rgba(46,242,255,.28), rgba(4,5,7,.92) 90%); box-shadow: inset 0 0 0 2px rgba(46,242,255,.85), 0 0 18px rgba(46,242,255,.55); animation: ldglow 1.3s ease-in-out infinite alternate; }
.ld-lock .sl-cell { position: absolute; inset: 0; aspect-ratio: auto; }
.ld-lock.on::before { content: ""; position: absolute; inset: -2px; border-radius: 15px; pointer-events: none; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, #2EF2FF 80%, #C8FF2E 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; animation: ldspin 1.6s linear infinite; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ldspin { to { --a: 360deg; } }
@keyframes ldglow { from { box-shadow: inset 0 0 0 2px rgba(46,242,255,.7), 0 0 12px rgba(46,242,255,.4); } to { box-shadow: inset 0 0 0 2px rgba(200,255,46,.95), 0 0 26px rgba(46,242,255,.8); } }
.ld-lock.slam { animation: ldslam .5s cubic-bezier(.2,1.6,.4,1), ldglow 1.3s ease-in-out .5s infinite alternate; }
@keyframes ldslam { 0% { transform: scale(1.6); opacity: 0; filter: brightness(3); } 60% { opacity: 1; } 100% { transform: scale(1); filter: none; } }
.ld-lock.win .sl-art { animation: skwin .55s ease-in-out infinite alternate; }
.ld-tag { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; font-size: 9px; letter-spacing: .14em; padding: 2px 6px; border-radius: 6px; background: rgba(46,242,255,.18); color: #BFFBFF; border: 1px solid rgba(46,242,255,.5); white-space: nowrap; }
@media (max-width: 560px) { .ld-tag { font-size: 7px; padding: 1px 4px; } }
.sl-felt.resp .sl-cab { box-shadow: 0 0 50px rgba(46,242,255,.35), 0 0 90px rgba(140,107,255,.2); }
.ld-b { color: #2EF2FF !important; }
.ld-card { background-image: linear-gradient(rgba(10,11,14,.55), rgba(10,11,14,.85)), url(assets/slots/bg-lock.webp); background-size: cover; background-position: center; }
.nd-card { background-image: linear-gradient(rgba(10,11,14,.5), rgba(10,11,14,.85)), url(assets/slots/bg-drop.webp); background-size: cover; background-position: center; }
.sl-card:not(.ld-card):not(.nd-card) { background-image: linear-gradient(rgba(10,11,14,.5), rgba(10,11,14,.85)), url(assets/slots/bg-vault.webp); background-size: cover; background-position: center; }
/* Neon Drop: falling grid */
.nd-grid { gap: 4px; }
.nd-col { position: relative; aspect-ratio: 1 / 5; }
.nd-cell { position: absolute; left: 0; width: 100%; height: 20%; aspect-ratio: auto; will-change: transform; }
.nd-cell.landed .sl-art { animation: skland .34s cubic-bezier(.2,1.6,.4,1); }
.nd-cell.nd-pop .sl-art { animation: ndpop .36s ease-in forwards !important; }
@keyframes ndpop { 0% { transform: scale(1.15); filter: brightness(1.4); } 60% { transform: scale(1.4); opacity: 1; filter: brightness(3); } 100% { transform: scale(.2); opacity: 0; } }
.nd-cell.win::after { border-radius: 12px; }
.nd-cell.nd-star::before { --glow: rgba(255,210,63,.6); }
.nd-meter { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 10px; min-height: 34px; flex-wrap: wrap; }
.nd-step { font-family: var(--font-mono); font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: var(--steel-2); background: rgba(10,11,14,.6); transition: all .25s; }
.nd-step.past { color: #8C6BFF; border-color: rgba(140,107,255,.4); }
.nd-step.on { color: #0A0B0D; background: linear-gradient(120deg, #C8FF2E, #2EF2FF); border-color: transparent; box-shadow: 0 0 16px rgba(200,255,46,.6); transform: scale(1.12); }
.nd-meter.bump { animation: ndbump .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes ndbump { 40% { transform: scale(1.08); } }
.nd-ml { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.nd-mx { font-family: var(--font-display); font-size: 28px; line-height: 1; padding: 2px 14px; border-radius: 12px; color: #FFD23F; background: rgba(255,210,63,.1); border: 1px solid rgba(255,210,63,.45); text-shadow: 0 0 14px rgba(255,210,63,.8); }
.nd-mx[data-big="1"] { color: #FF2E88; border-color: rgba(255,46,136,.6); text-shadow: 0 0 18px rgba(255,46,136,.9); }
.nd-float { position: absolute; left: 50%; top: 42%; z-index: 4; translate: -50% -50%; text-align: center; pointer-events: none; font-size: 15px; color: #fff; padding: 8px 14px; border-radius: 12px; background: rgba(5,5,8,.78); border: 1px solid var(--fc); box-shadow: 0 0 22px var(--fc); animation: ndfloat 1.5s ease-out forwards; white-space: nowrap; }
.nd-float b { color: var(--fc); }
.nd-float span { font-family: var(--font-display); font-size: 22px; color: var(--fc); }
@keyframes ndfloat { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 25% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@media (max-width: 560px) { .nd-step { font-size: 11px; padding: 4px 7px; } .nd-float { font-size: 12px; } .nd-float span { font-size: 17px; } }
.sk-betrow { align-items: center; }
.game-drop .sl-cab, #ndCab { max-width: 560px; }

/* ---------------- JACKPOT (LOSO x GOOD GANG) ---------------- */
.jp-felt { padding: 0; background: none; border: 0; box-shadow: none; gap: 10px; }
.jp-felt::before, .jp-felt::after { display: none; }
.jp-stage { --gold: #F5C542; --gold2: #B8862B; --red: #E0161E; position: relative; overflow: hidden; border-radius: 20px; padding: 12px 14px 0; isolation: isolate;
  background: #0a0304 url(assets/jackpot/bg.webp) center / cover no-repeat; border: 1px solid rgba(245,197,66,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.6), inset 0 0 120px rgba(0,0,0,.7);
  display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 600px) minmax(96px, 1fr); grid-template-areas: "logo logo logo" "buy cab now" "bar bar bar"; align-items: center; column-gap: 12px; }
.jp-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 52%, rgba(10,3,4,.15), rgba(10,3,4,.7)); pointer-events: none; }
.jp-stage.bonus-gg::before { background: radial-gradient(60% 55% at 50% 52%, rgba(120,0,6,.25), rgba(40,0,2,.85)); }
.jp-stage.bonus-jp::before { background: radial-gradient(60% 55% at 50% 52%, rgba(160,110,10,.25), rgba(30,16,0,.85)); }
.jp-logo { grid-area: logo; justify-self: center; height: clamp(64px, 9vw, 112px); width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(245,197,66,.25)); animation: jplogo 4s ease-in-out infinite; margin-bottom: 4px; }
@keyframes jplogo { 50% { transform: scale(1.03); filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(245,197,66,.5)); } }
.jp-rain { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.jp-rain i { position: absolute; top: -40px; width: 26px; height: 13px; border-radius: 2px; background: linear-gradient(135deg, #d9e8c9, #93b07d 60%, #6f8e5d); box-shadow: 0 0 0 1px rgba(40,60,30,.4) inset; opacity: .55; animation: jprain 9s linear infinite; }
.jp-rain i:nth-child(even) { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #F5C542 45%, #8a5e12); opacity: .7; animation-duration: 7s; }
.jp-rain i:nth-child(1) { left: 4%; animation-delay: -1s; } .jp-rain i:nth-child(2) { left: 14%; animation-delay: -4s; } .jp-rain i:nth-child(3) { left: 24%; animation-delay: -6s; } .jp-rain i:nth-child(4) { left: 78%; animation-delay: -2s; }
.jp-rain i:nth-child(5) { left: 86%; animation-delay: -5s; } .jp-rain i:nth-child(6) { left: 94%; animation-delay: -3s; } .jp-rain i:nth-child(7) { left: 9%; animation-delay: -7.5s; } .jp-rain i:nth-child(8) { left: 90%; animation-delay: -8s; }
@keyframes jprain { 0% { transform: translateY(0) rotate(0deg) rotateY(0deg); } 100% { transform: translateY(1100px) rotate(320deg) rotateY(720deg); } }
/* cabinet */
.jp-cab { grid-area: cab; max-width: 600px; padding: 10px; border: 0; background: linear-gradient(#120506, #070203) padding-box, linear-gradient(150deg, #FFE59A, var(--gold) 25%, var(--gold2) 50%, #FFE59A 75%, var(--gold2)) border-box; border: 3px solid transparent; border-radius: 22px; box-shadow: 0 0 40px rgba(224,22,30,.35), 0 18px 40px rgba(0,0,0,.7); }
.jp-cab .sk-lights .a { stroke: #FFD86B; filter: drop-shadow(0 0 4px #FFD86B); }
.jp-cab .sk-lights .b { stroke: #FF2A2A; filter: drop-shadow(0 0 4px #FF2A2A); }
.jp-window { padding: 6px; background: radial-gradient(120% 80% at 50% 0%, rgba(224,22,30,.18), transparent 60%), #0b0304; border-color: rgba(245,197,66,.25); }
.jp-grid { gap: 4px; }
.jp-grid .sl-reel { border-radius: 10px; background: linear-gradient(180deg, rgba(224,22,30,.06), rgba(0,0,0,.25) 50%, rgba(224,22,30,.06)); border-color: rgba(245,197,66,.12); }
.jp-grid .sl-reel.tease { border-color: rgba(245,197,66,.95); box-shadow: 0 0 22px rgba(245,197,66,.7), inset 0 0 26px rgba(224,22,30,.45); }
.jp-sym .sl-art { inset: 3%; }
.jp-sym .sl-art img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.jp-sym.sym-GG::before, .jp-sym.sym-W::before, .jp-sym.sym-DR::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,197,66,.55), transparent); animation: skhalo 2.2s ease-in-out infinite; }
.jp-sym.sym-DR::before { background: radial-gradient(closest-side, rgba(255,42,42,.6), transparent); }
.jp-sym.sym-GG .sl-art { animation: skwob 2.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.jp-sym.sym-DR .sl-art, .jp-sym.sym-LS .sl-art { animation: skpulse 1.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.jp-sym.win::after { border-radius: 12px; }
.jp-wild { position: absolute; inset: 6px; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 4px; pointer-events: none; z-index: 2; }
.jp-wr { grid-row: 1; position: relative; border-radius: 12px; overflow: hidden; opacity: 0; visibility: hidden; }
.jp-wr.on { opacity: 1; visibility: visible; box-shadow: inset 0 0 0 3px var(--gold), 0 0 26px rgba(245,197,66,.6); }
.jp-wr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; transform: scale(1.04); }
.jp-wr.on img { animation: jpwr 6s ease-in-out infinite alternate; }
@keyframes jpwr { to { transform: scale(1.12) translateY(-2%); } }
.jp-wr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 62%, rgba(10,0,0,.9)); }
.jp-wr-tag { position: absolute; z-index: 2; top: 6px; left: 50%; translate: -50% 0; font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(10px, 1.4vw, 15px); letter-spacing: .12em; color: #fff3c4; background: linear-gradient(#E0161E, #7a0408); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--gold); text-shadow: 0 1px 0 #000; }
.jp-mx { position: absolute; z-index: 2; left: 50%; bottom: 6%; translate: -50% 0; font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(18px, 3vw, 34px); line-height: 1; color: transparent; background: linear-gradient(180deg, #FFF6CF, #F5C542 45%, #A4701B); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #3a0a00) drop-shadow(0 0 12px rgba(245,197,66,.8)); white-space: nowrap; }
.jp-mx.pop { animation: jpmx .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes jpmx { 0% { transform: scale(2.2); } 100% { transform: scale(1); } }
.jp-wr.win { animation: jpwrwin .55s ease-in-out infinite alternate; }
@keyframes jpwrwin { to { box-shadow: inset 0 0 0 3px #FFF1B8, 0 0 40px rgba(255,214,90,.95); } }
.jp-wr.locked { box-shadow: inset 0 0 0 3px #FF2A2A, 0 0 26px rgba(255,42,42,.7); }
.jp-wr.locked .jp-wr-tag::after { content: " · LOCKED"; }
.jp-cw { position: absolute; left: 50%; top: 50%; z-index: 4; translate: -50% -50%; pointer-events: none; text-align: center; opacity: 0; }
.jp-cw.on { animation: jpcw 2.2s ease-out forwards; }
.jp-cw-v { display: block; font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(30px, 6vw, 62px); line-height: 1; color: transparent; background: linear-gradient(180deg, #FFF6CF, #F5C542 40%, #C0851E 70%, #FFE59A); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #5a0a05) drop-shadow(0 0 3px #000) drop-shadow(0 0 22px rgba(224,22,30,.7)); }
.jp-cw-l { font-family: 'Cinzel', serif; font-weight: 700; color: #fff; letter-spacing: .2em; }
@keyframes jpcw { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.1); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }
.jp-fsb { background: linear-gradient(90deg, rgba(224,22,30,.25), rgba(245,197,66,.2), rgba(224,22,30,.25)); border: 1px solid rgba(245,197,66,.5); }
.jp-fsb b { font-family: 'Cinzel', serif; color: var(--gold); letter-spacing: .14em; }
/* side pieces */
.jp-buybtn { grid-area: buy; justify-self: center; width: 104px; height: 104px; border-radius: 50%; cursor: pointer; display: grid; place-content: center; gap: 0; font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 16px; line-height: 1.05; color: #3a1500;
  border: 3px solid #FFE59A; background: radial-gradient(circle at 35% 30%, #FFF4C2, #F5C542 45%, #9C6A14); box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 26px rgba(245,197,66,.6), inset 0 -6px 0 rgba(0,0,0,.2); animation: jpbuy 2.4s ease-in-out infinite; transition: transform .15s; }
.jp-buybtn:hover:not(:disabled) { transform: scale(1.06) rotate(-4deg); }
.jp-buybtn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; animation: none; }
@keyframes jpbuy { 50% { box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 40px rgba(245,197,66,.95), inset 0 -6px 0 rgba(0,0,0,.2); } }
.jp-now { grid-area: now; justify-self: center; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; width: 100%; max-width: 160px; padding: 10px; border-radius: 16px; background: rgba(8,2,3,.72); border: 1px solid rgba(245,197,66,.35); backdrop-filter: blur(6px); }
.jp-now > img { width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 10px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.jp-now.playing > img { animation: jpbeat .476s ease-in-out infinite; }
@keyframes jpbeat { 50% { transform: scale(1.04); } }
.jp-now b { display: block; font-family: 'Cinzel', serif; font-size: 16px; color: var(--gold); letter-spacing: .06em; }
.jp-now span { display: block; font-size: 11px; }
.jp-now-l { color: #FF6B6B; text-transform: uppercase; letter-spacing: .14em; font-size: 9px !important; }
.jp-eq { display: flex !important; gap: 3px; align-items: flex-end; height: 18px; }
.jp-eq i { width: 4px; height: 4px; background: var(--gold); border-radius: 2px; }
.jp-now.playing .jp-eq i { animation: jpeq .5s ease-in-out infinite alternate; }
.jp-now.playing .jp-eq i:nth-child(2) { animation-delay: -.2s; } .jp-now.playing .jp-eq i:nth-child(3) { animation-delay: -.35s; } .jp-now.playing .jp-eq i:nth-child(4) { animation-delay: -.1s; }
@keyframes jpeq { from { height: 4px; } to { height: 18px; } }
.jp-listen { font-size: 11px; color: #fff3c4; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(245,197,66,.5); }
.jp-listen:hover { background: rgba(245,197,66,.15); }
.jp-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #FFE59A; background: rgba(0,0,0,.55); border: 1px solid rgba(245,197,66,.35); transition: background .2s, transform .1s; flex: none; }
.jp-ico:hover { background: rgba(245,197,66,.18); } .jp-ico:active { transform: scale(.92); }
.jp-ico svg .x { display: none; }
.jp-ico.off { color: rgba(255,229,154,.45); } .jp-ico.off svg .x { display: inline; stroke: #FF4D4D; }
/* bottom bar */
.jp-bar { grid-area: bar; margin: 12px -14px 0; padding: 12px 16px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.82) 30%); }
.jp-bar .lbl { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-2); }
.jp-bal { min-width: 120px; } .jp-bal .mono { font-size: 15px; color: #fff; }
.jp-tog { margin-left: auto; font-size: 12px; }
.jp-bet { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; background: rgba(0,0,0,.55); border: 1px solid rgba(245,197,66,.3); }
.jp-bet-r { display: flex; align-items: center; gap: 6px; } .jp-bet-r .mono { min-width: 84px; text-align: center; font-size: 15px; color: #fff; }
.jp-step { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(245,197,66,.5); background: rgba(245,197,66,.1); color: #FFE59A; font-size: 18px; line-height: 1; cursor: pointer; }
.jp-step:disabled, .jp-max:disabled { opacity: .35; cursor: not-allowed; }
.jp-max { font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(245,197,66,.4); background: none; color: #FFE59A; cursor: pointer; }
.jp-spin { width: 82px; height: 82px; background: radial-gradient(circle at 35% 30%, #FFF4C2, #F5C542 45%, #8a5e12); box-shadow: 0 0 0 4px #0b0304, 0 0 26px rgba(245,197,66,.6), inset 0 -6px 0 rgba(0,0,0,.25); color: #2a0e00; }
.jp-spin::before { background: conic-gradient(#F5C542, #E0161E, #FFE59A, #E0161E, #F5C542); }
.jp-spin span { font-family: 'Cinzel', Georgia, serif; }
.jp-auto { position: relative; }
.jp-auto-pop { position: absolute; bottom: 50px; right: 0; z-index: 9; display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #120506; border: 1px solid rgba(245,197,66,.5); box-shadow: 0 10px 30px rgba(0,0,0,.6); white-space: nowrap; }
.jp-auto-pop button { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(245,197,66,.4); background: rgba(245,197,66,.1); color: #FFE59A; cursor: pointer; font-family: var(--font-mono); }
/* splashes + modals */
.jp-splash { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: radial-gradient(70% 70% at 50% 45%, rgba(40,3,5,.88), rgba(4,1,1,.97)); cursor: pointer; animation: jpin .35s ease-out; }
.jp-splash.out { animation: jpout .32s ease-in forwards; }
@keyframes jpin { from { opacity: 0; } } @keyframes jpout { to { opacity: 0; } }
.jp-splash.intro { cursor: default; background: linear-gradient(rgba(6,1,2,.82), rgba(6,1,2,.94)), url(assets/jackpot/bg.webp) center / cover; }
.jp-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: center; max-width: 900px; width: 100%; }
.jp-intro-art { width: 100%; border-radius: 16px; box-shadow: 0 0 0 2px rgba(245,197,66,.6), 0 20px 50px rgba(0,0,0,.7), 0 0 60px rgba(224,22,30,.35); animation: jpart 6s ease-in-out infinite alternate; }
@keyframes jpart { to { transform: scale(1.02) rotate(-.6deg); } }
.jp-intro-r { display: grid; gap: 12px; justify-items: center; text-align: center; }
.jp-intro-logo { width: min(100%, 380px); filter: drop-shadow(0 0 20px rgba(245,197,66,.4)); }
.jp-intro-tag { color: #FF6B6B; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.jp-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.jp-feats div { display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,197,66,.25); font-size: 11px; line-height: 1.35; }
.jp-feats img { width: 54px; height: 54px; }
.jp-feats b { font-family: 'Cinzel', serif; color: var(--gold); font-size: 12px; }
.jp-feats span { color: var(--steel-2); }
.jp-load { width: min(100%, 300px); height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.jp-load i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #E0161E, #F5C542); transform-origin: left; animation: jpload 1.4s ease-out forwards; }
@keyframes jpload { from { transform: scaleX(0); } }
.jp-start { opacity: 0; animation: jpin .4s ease-out 1.4s forwards; font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .1em; min-width: 200px; background: linear-gradient(#FFE59A, #F5C542 50%, #B8862B); color: #2a0e00; border: 0; }
.jp-fs { text-align: center; display: grid; justify-items: center; gap: 8px; max-width: 560px; }
.jp-fs-k { font-family: 'Cinzel', serif; font-weight: 700; color: #fff; letter-spacing: .3em; text-transform: uppercase; font-size: clamp(14px, 2vw, 20px); }
.jp-fs-n { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(30px, 6vw, 60px); line-height: 1; color: transparent; background: linear-gradient(180deg, #FFF6CF, #F5C542 40%, #B8862B 70%, #FFE59A); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #5a0a05) drop-shadow(0 0 26px rgba(224,22,30,.6)); animation: jpfsn .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes jpfsn { from { transform: scale(.4); opacity: 0; } }
.jp-fs img { width: clamp(110px, 18vw, 170px); animation: skwob 2.6s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(245,197,66,.6)); }
.jp-fs-d { color: #f1e6d0; font-size: 14px; line-height: 1.5; }
.jp-fs-v { font-size: clamp(30px, 5vw, 50px); color: #fff; text-shadow: 0 0 20px rgba(245,197,66,.6); }
.jp-modal { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px; background: rgba(4,1,1,.78); backdrop-filter: blur(4px); overflow: auto; }
.jp-buy-in, .jp-pay-in { position: relative; width: min(100%, 640px); max-height: 100%; overflow: auto; padding: 18px; border-radius: 18px; background: linear-gradient(#170607, #0b0304); border: 1px solid rgba(245,197,66,.5); box-shadow: 0 20px 60px rgba(0,0,0,.7); display: grid; gap: 12px; justify-items: center; text-align: center; }
.jp-pay-in { text-align: left; justify-items: stretch; width: min(100%, 720px); }
.jp-buy-t { font-family: 'Cinzel', serif; font-weight: 900; font-size: 22px; letter-spacing: .16em; color: var(--gold); text-align: center; }
.jp-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(245,197,66,.4); background: rgba(0,0,0,.5); color: #FFE59A; font-size: 20px; line-height: 1; cursor: pointer; }
.jp-buy-bet { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,.5); }
.jp-buy-bet .mono { min-width: 90px; font-size: 16px; }
.jp-buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.jp-buy-c { display: grid; justify-items: center; gap: 6px; padding: 14px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(245,197,66,.3); }
.jp-buy-c.jp { border-color: rgba(255,42,42,.5); background: rgba(224,22,30,.08); }
.jp-buy-c img { width: 92px; height: 92px; }
.jp-buy-n { font-family: 'Cinzel', serif; font-weight: 900; color: #fff3c4; letter-spacing: .06em; }
.jp-buy-p { font-size: 22px; color: #fff; }
.jp-buy-c .btn { width: 100%; }
.jp-pay-in .sl-pt-row .sl-cell { width: 44px; }
.jp-card { background-image: linear-gradient(rgba(10,3,4,.35), rgba(10,3,4,.88)), url(assets/jackpot/album.webp) !important; background-size: cover !important; background-position: center 30% !important; }
/* responsive */
@media (max-width: 1180px) {
  .jp-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "logo logo" "cab cab" "buy now" "bar bar"; row-gap: 10px; }
  .jp-now { grid-template-columns: auto 1fr auto auto; max-width: none; text-align: left; justify-items: start; align-items: center; padding: 8px 10px; }
  .jp-now > img { width: 46px; } .jp-listen { display: none; }
  .jp-buybtn { width: 72px; height: 72px; font-size: 12px; justify-self: start; }
}
@media (max-width: 640px) {
  .jp-stage { padding: 10px 8px 0; border-radius: 14px; }
  .jp-cab { padding: 6px; border-width: 2px; }
  .jp-bar { margin: 8px -8px 0; padding: 10px 10px 12px; gap: 8px; justify-content: space-between; }
  .jp-bal { min-width: 0; flex: 1; order: 1; } .jp-tog { order: 2; margin-left: 0; font-size: 11px; }
  .jp-bar > .jp-ico { order: 0; width: 36px; height: 36px; }
  .jp-bet { order: 3; } .jp-spin { order: 4; width: 70px; height: 70px; } .jp-auto { order: 5; }
  .jp-bet-r .mono { min-width: 64px; font-size: 13px; }
  .jp-intro { grid-template-columns: 1fr; gap: 12px; } .jp-intro-art { max-width: 220px; justify-self: center; }
  .jp-feats { grid-template-columns: 1fr; } .jp-feats div { grid-template-columns: 40px 1fr; justify-items: start; text-align: left; column-gap: 10px; } .jp-feats img { width: 40px; height: 40px; grid-row: span 2; }
  .jp-buy-row { grid-template-columns: 1fr; }
  .jp-splash { align-items: start; overflow: auto; }
}

/* header slots dropdown */
.nav-dd { position: relative; flex-shrink: 0; }
.nav-dd-b { display: inline-flex; align-items: center; gap: 6px; color: var(--steel-2); background: none; border: 0; font: 500 var(--text-sm) var(--font-body, inherit); padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; }
.nav-dd-b:hover { color: var(--bone); background: var(--surface); }
.nav-dd-b.active { color: var(--bone); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--acid); }
.nav-dd-m { position: fixed; z-index: 100; min-width: 240px; padding: 6px; border-radius: 14px; background: #0d0e12; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.6); display: grid; gap: 2px; }
.nav-dd-m a { display: flex !important; align-items: center; gap: 10px; padding: 8px 10px !important; }
.nav-dd-m img { width: 30px; height: 30px; object-fit: contain; }
.nav-dd-m .pill { margin-left: auto; font-size: 10px; }
.nav .nav-m { display: none; }

/* JACKPOT fixes */
.jp-start { animation: jpshow .4s ease-out 1.4s forwards; }
@keyframes jpshow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.jp-modal { place-items: start center; }
.jp-buy-in, .jp-pay-in { max-height: none; margin: auto 0; }
.jp-wr img { object-position: 24% 0%; }
.jp-wr-tag { top: auto; bottom: calc(6% + clamp(22px, 3.4vw, 38px)); }
@media (max-width: 640px) {
  .jp-bar { display: grid; grid-template-columns: auto auto auto 1fr auto; grid-template-areas: "i m s bal auto" "bet bet bet bet spin" "tog tog tog tog tog"; gap: 8px 8px; align-items: center; }
  .jp-bar > #jpInfoBtn { grid-area: i; } .jp-bar > [data-jp-music] { grid-area: m; } .jp-bar > [data-jp-sfx] { grid-area: s; }
  .jp-bal { grid-area: bal; text-align: right; } .jp-auto { grid-area: auto; } .jp-auto .jp-ico { width: 36px; height: 36px; }
  .jp-bet { grid-area: bet; justify-content: space-between; } .jp-spin { grid-area: spin; }
  .jp-tog { grid-area: tog; justify-self: center; }
  .jp-wr-tag { font-size: 8px; padding: 1px 4px; letter-spacing: .06em; }
}

/* ---------------- JACKPOT win celebrations (NICE / SUPER / JACKPOT) ---------------- */
.jp-cele { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; overflow: hidden; cursor: pointer; container-type: inline-size; border-radius: inherit; animation: jcIn .25s ease-out; }
.jp-cele[hidden] { display: none; }
.jp-cele.out { opacity: 0; transition: opacity .35s ease; }
.jp-stage > .jc-fx { z-index: 41; }
.jc-dim { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 44%, rgba(60,8,4,.35), rgba(0,0,0,.72)); transition: background .4s; }
.jp-cele[data-tier=super] .jc-dim { background: radial-gradient(60% 55% at 50% 44%, rgba(120,10,10,.42), rgba(10,0,0,.8)); }
.jp-cele[data-tier=jackpot] .jc-dim { background: radial-gradient(60% 55% at 50% 44%, rgba(120,60,0,.45), rgba(0,0,0,.9)); }
.jc-rays { position: absolute; left: 50%; top: 44%; width: 240%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.34) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 48%); mask: radial-gradient(circle, #000 0 10%, transparent 48%);
  transition: opacity .4s; animation: jcSpin 16s linear infinite; }
.jp-cele[data-tier=nice] .jc-rays:not(.b) { opacity: .45; }
.jp-cele[data-tier=super] .jc-rays:not(.b) { opacity: .9; animation-duration: 10s; background: repeating-conic-gradient(from 0deg, rgba(255,59,59,.42) 0deg 7deg, transparent 7deg 15deg, rgba(255,210,63,.42) 15deg 22deg, transparent 22deg 30deg); }
.jp-cele[data-tier=jackpot] .jc-rays { opacity: 1; animation-duration: 5s; }
.jp-cele[data-tier=jackpot] .jc-rays.b { animation-direction: reverse; animation-duration: 8s; background: repeating-conic-gradient(from 4deg, rgba(255,241,184,.28) 0deg 3deg, transparent 3deg 12deg); }
.jc-glow { position: absolute; left: 50%; top: 44%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,90,.55), rgba(255,150,30,.18) 40%, transparent 70%); opacity: .6; animation: jcPulse 1.1s ease-in-out infinite; pointer-events: none; }
.jp-cele[data-tier=super] .jc-glow { background: radial-gradient(circle, rgba(255,90,60,.6), rgba(255,180,40,.2) 40%, transparent 70%); animation-duration: .7s; }
.jp-cele[data-tier=jackpot] .jc-glow { width: 95%; opacity: .9; animation-duration: .45s; }
.jc-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.jp-cele.hit[data-tier=nice] .jc-flash { animation: jcF1 .6s ease-out; }
.jp-cele.hit[data-tier=super] .jc-flash { animation: jcF3 1s linear; }
.jp-cele.hit[data-tier=jackpot] .jc-flash { animation: jcF6 1.6s linear; }
.jc-ring { position: absolute; left: 50%; top: 44%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 4px solid #FFD23F; opacity: 0; pointer-events: none; box-shadow: 0 0 30px #FFD23F, inset 0 0 30px #FFD23F; }
.jp-cele.hit .jc-ring { animation: jcRing .9s ease-out; }
.jp-cele.hit .jc-ring.r2 { animation-delay: .18s; border-color: #FF3B3B; box-shadow: 0 0 30px #FF3B3B, inset 0 0 30px #FF3B3B; }
.jp-cele.hit[data-tier=nice] .jc-ring.r2 { display: none; }
.jc-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 0 12px; margin-top: -4%; }
.jc-l { font: 700 clamp(11px, 2.2cqw, 16px)/1 var(--font-mono, monospace); letter-spacing: .24em; text-transform: uppercase; color: #FFE7A0; margin: 0; }
.jc-l:empty { display: none; }
.jc-logo { display: none; width: min(56cqw, 380px); filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(255,190,40,.55)); }
.jp-cele[data-tier=jackpot] .jc-logo { display: block; }
.jp-cele.hit[data-tier=jackpot] .jc-logo { animation: jcLogo .8s cubic-bezier(.2,1.5,.35,1) both; }
.jc-t { font: 900 clamp(28px, 8.6cqw, 96px)/1 'Cinzel', serif; letter-spacing: .02em; white-space: nowrap; }
.jc-t span { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #FFF8D6 0%, #FFD23F 42%, #B9770E 58%, #FFE58A 100%);
  -webkit-text-stroke: 1px rgba(90,40,0,.55);
  filter: drop-shadow(0 3px 0 #5a2a00) drop-shadow(0 0 16px rgba(255,190,40,.6)); }
.jp-cele.hit[data-tier=nice] .jc-t span { animation: jcPop .6s cubic-bezier(.2,1.7,.4,1) calc(var(--n) * 45ms) both; }
.jp-cele[data-tier=super] .jc-t span { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFD23F 34%, #FF3B3B 62%, #7A0000 100%); filter: drop-shadow(0 3px 0 #3a0000) drop-shadow(0 0 20px rgba(255,60,40,.75)); }
.jp-cele.hit[data-tier=super] .jc-t span { animation: jcFly .65s cubic-bezier(.2,1.3,.4,1) calc(var(--n) * 40ms) both; }
.jp-cele.hit[data-tier=super] .jc-t { animation: jcShake .45s ease-in-out .7s 2; }
.jp-cele[data-tier=jackpot] .jc-t { font-size: clamp(28px, 8.2cqw, 92px); }
.jp-cele[data-tier=jackpot] .jc-t span { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFE58A 20%, #FFB300 45%, #FFF3C4 55%, #C77700 75%, #FFE58A 100%); background-size: 100% 220%; filter: drop-shadow(0 4px 0 #4a2200) drop-shadow(0 0 26px rgba(255,200,40,.9)); }
.jp-cele.hit[data-tier=jackpot] .jc-t span { animation: jcSlam .55s cubic-bezier(.2,1.25,.4,1) calc(.35s + var(--n) * 65ms) both, jcShimmer 1.2s linear calc(1.2s + var(--n) * 40ms) infinite; }
.jp-cele.hit[data-tier=jackpot] .jc-t { animation: jcThrob .9s ease-in-out 1.4s infinite; }
.jc-v { font-weight: 800; font-size: clamp(24px, 6cqw, 62px); line-height: 1.05; color: #FFF1B8; text-shadow: 0 0 18px rgba(255,200,60,.8), 0 3px 0 #4a2200; display: inline-flex; align-items: center; gap: .25em; }
.jc-v .coin { width: .8em; height: .8em; }
.jc-x { font-size: clamp(11px, 2cqw, 15px); letter-spacing: .14em; text-transform: uppercase; color: #FFD9A0; opacity: .9; }
.jp-cele.done .jc-v { animation: jcBump .5s cubic-bezier(.2,1.6,.4,1); }
.jc-skip { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; margin: 0; font-size: 12px; color: rgba(255,240,200,.6); animation: jcIn .4s ease 1s both; z-index: 2; }
.jp-cele.done .jc-skip { opacity: 0; }
/* stage frame reacts too */
.jp-stage.cele-super { animation: jcFrameS .5s ease-in-out infinite alternate; }
.jp-stage.cele-jackpot { animation: jcFrameJ .32s steps(2) infinite; }
/* regular wins: gold sweep over the reels */
.jp-window { position: relative; }
.jp-window::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,236,170,.55) 48%, rgba(255,255,255,.75) 50%, rgba(255,236,170,.55) 52%, transparent 70%); background-size: 260% 100%; }
.jp-window.wflash::after { animation: jcSweep .8s ease-out; }
.jp-window.wflash-big::after { animation: jcSweep .7s ease-out 2; }
.jp-ll { position: absolute; z-index: 6; translate: -50% 0; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: #1b0d00; background: var(--lc, #FFD23F); box-shadow: 0 0 14px var(--lc, #FFD23F); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; }
.jp-ll .coin { width: 12px; height: 12px; }
.jp-ll.on { animation: jcLbl 1.1s ease-out both; }

@keyframes jcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes jcSpin { to { rotate: 360deg; } }
@keyframes jcPulse { 50% { scale: 1.12; opacity: 1; } }
@keyframes jcF1 { 0% { opacity: .9; background: radial-gradient(circle at 50% 44%, #fff, #FFD23F 40%, transparent 80%); } 100% { opacity: 0; background: radial-gradient(circle at 50% 44%, #fff, #FFD23F 40%, transparent 80%); } }
@keyframes jcF3 { 0%, 30%, 60% { opacity: .95; } 12%, 42%, 72%, 100% { opacity: 0; } 0% { background: #fff; } 30% { background: #FF3B3B; } 60% { background: #FFD23F; } }
@keyframes jcF6 { 0% { opacity: 1; background: #fff; } 8% { opacity: 0; } 16% { opacity: .9; background: #FFD23F; } 24% { opacity: 0; } 32% { opacity: .9; background: #FF3B3B; } 40% { opacity: 0; } 48% { opacity: .85; background: #fff; } 56% { opacity: 0; } 64% { opacity: .8; background: #FFB300; } 72% { opacity: 0; } 80% { opacity: .7; background: #fff; } 100% { opacity: 0; background: #fff; } }
@keyframes jcRing { 0% { opacity: .95; scale: .3; } 100% { opacity: 0; scale: 3.4; } }
@keyframes jcPop { 0% { opacity: 0; transform: translateY(40px) scale(0); } 100% { opacity: 1; transform: none; } }
@keyframes jcFly { 0% { opacity: 0; transform: translateY(-140%) rotate(-30deg) scale(2.6); } 100% { opacity: 1; transform: none; } }
@keyframes jcSlam { 0% { opacity: 0; transform: scale(5); filter: blur(10px); } 70% { opacity: 1; transform: scale(.88); } 100% { opacity: 1; transform: none; } }
@keyframes jcShimmer { 0% { background-position: 0 0%; } 100% { background-position: 0 220%; } }
@keyframes jcThrob { 50% { transform: scale(1.06); } }
@keyframes jcShake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px) rotate(-1.5deg); } 40% { transform: translate(6px, -2px) rotate(1.5deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(4px, -1px); } }
@keyframes jcLogo { 0% { opacity: 0; transform: scale(3) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
@keyframes jcBump { 50% { transform: scale(1.18); } }
@keyframes jcFrameS { from { box-shadow: inset 0 0 0 3px rgba(255,59,59,.5), 0 0 30px rgba(255,59,59,.35); } to { box-shadow: inset 0 0 0 3px rgba(255,210,63,.8), 0 0 50px rgba(255,210,63,.45); } }
@keyframes jcFrameJ { 0% { box-shadow: inset 0 0 0 4px #FFD23F, 0 0 60px rgba(255,210,63,.7); } 100% { box-shadow: inset 0 0 0 4px #FF3B3B, 0 0 60px rgba(255,59,59,.7); } }
@keyframes jcSweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }
@keyframes jcLbl { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 18% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
html.rm .jc-rays, html.rm .jc-glow, html.rm .jp-stage.cele-super, html.rm .jp-stage.cele-jackpot { animation: none !important; }
html.rm .jp-cele .jc-flash { animation: none !important; }
html.rm .jp-cele .jc-t, html.rm .jp-cele .jc-t span, html.rm .jc-logo { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
/* celebration tuning */
.jp-stage.cele-nice .jp-cw, .jp-stage.cele-super .jp-cw, .jp-stage.cele-jackpot .jp-cw { visibility: hidden; }
@keyframes jcPulse { 50% { scale: 1.1; } }
.jc-glow { opacity: .5; }
.jp-cele[data-tier=super] .jc-glow { opacity: .55; }
.jp-cele[data-tier=jackpot] .jc-glow { width: 80%; opacity: .55; background: radial-gradient(circle, rgba(255,200,60,.45), rgba(255,140,20,.14) 42%, transparent 70%); }
.jp-cele[data-tier=jackpot] .jc-dim { background: radial-gradient(60% 55% at 50% 44%, rgba(70,28,0,.55), rgba(0,0,0,.92)); }
.jp-cele[data-tier=jackpot] .jc-rays:not(.b) { opacity: .7; }
.jp-cele[data-tier=jackpot] .jc-rays.b { opacity: .8; }
.jc-in::before { content: ''; position: absolute; inset: -18% -14%; z-index: -1; background: radial-gradient(closest-side, rgba(10,3,0,.72), rgba(10,3,0,.4) 60%, transparent); pointer-events: none; }
.jp-cele.hit[data-tier=super] .jc-flash { animation: jcF3 .75s linear; }
@keyframes jcF3 { 0% { opacity: .7; background: #fff; } 10% { opacity: 0; background: #fff; } 33% { opacity: .6; background: #FF3B3B; } 43% { opacity: 0; background: #FF3B3B; } 66% { opacity: .6; background: #FFD23F; } 76%, 100% { opacity: 0; background: #FFD23F; } }
@keyframes jcF6 { 0% { opacity: .85; background: #fff; } 7% { opacity: 0; } 17% { opacity: .65; background: #FFD23F; } 24% { opacity: 0; } 34% { opacity: .65; background: #FF3B3B; } 41% { opacity: 0; } 51% { opacity: .6; background: #fff; } 58% { opacity: 0; } 68% { opacity: .55; background: #FFB300; } 75% { opacity: 0; } 85% { opacity: .45; background: #fff; } 92%, 100% { opacity: 0; background: #fff; } }
.jp-cele[data-tier=jackpot] .jc-in { gap: 10px; }
.jp-cele[data-tier=jackpot] .jc-logo { width: min(44cqw, 300px); margin-bottom: 4px; }
.jp-cele[data-tier=nice] .jc-t, .jp-cele[data-tier=super] .jc-t { font-size: clamp(30px, 10cqw, 96px); }

/* background money rain: extra pieces added by script on large screens */
.jp-rain i.x { left: var(--l); animation-delay: var(--dl); animation-duration: var(--du); scale: var(--sc, 1); }
/* effects setting in footer */
#fxToggle[aria-pressed="true"] { color: var(--acid, #C8FF2E); }

/* ---------------- Desktop table layout: every table fits one screen ---------------- */
@media (min-width: 1025px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) {
    --avail: calc(100dvh - 72px - 30px);
    --cw: clamp(54px, calc(var(--avail) * .085), 78px);
    max-width: 1480px; padding: 14px clamp(14px, 1.8vw, 26px) 16px;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .table-layout, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .table-layout {
    height: max(600px, var(--avail)); grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(260px, 310px); gap: 14px;
  }
  /* side panels scroll inside themselves instead of stretching the page */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) :is(.dealer-panel, .market), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) :is(.dealer-panel, .market) {
    min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; overscroll-behavior: contain;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt {
    min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 12px 18px 14px; gap: 8px;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt::-webkit-scrollbar, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt::-webkit-scrollbar { display: none; }
  /* dealer banner sized to the screen */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage,
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide {
    --sh: clamp(130px, calc(var(--avail) * .27 - 24px), 300px); height: var(--sh); margin: -4px -6px calc(var(--sh) * -.34);
  }
  :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage, :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide {
    --sh: clamp(110px, calc(var(--avail) * .22 - 24px), 240px); margin-bottom: -18px;
  }
  /* cards and board size to the screen */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .cards, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .cards { min-height: calc(var(--cw) * 1.4); padding-left: calc(var(--cw) * .41); }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .card, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .card { width: var(--cw); height: calc(var(--cw) * 1.385); margin-left: calc(var(--cw) * -.41); }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .hand-zone, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .hand-zone { gap: 6px; }
  #view-holdem .uth-board { grid-template-columns: repeat(5, calc(var(--cw) * .92)); gap: 8px; padding: 2px 0; }
  #view-holdem .uth-board .slot, #view-holdem .uth-board .slot .card { width: calc(var(--cw) * .92); height: calc(var(--cw) * 1.27); margin-left: 0; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .status, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .status { min-height: 0; padding-block: 2px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .uspot, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .uspot { padding-block: 6px; }
  /* chips and bet row */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .controls, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .controls { gap: 8px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .chips, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .chips { gap: 8px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .chip, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .chip { width: clamp(42px, calc(var(--avail) * .062), 58px); height: clamp(42px, calc(var(--avail) * .062), 58px); }
  /* game boards */
  #view-plinko .pl-canvas { height: clamp(250px, calc(var(--avail) - var(--sh, 160px) - 290px), 470px); }
  #view-sicbo .sb-cell { min-height: clamp(40px, calc(var(--avail) * .06), 54px); padding: 3px 2px; }
  #view-sicbo .sb-board, #view-sicbo .sb-row { gap: 5px; }
}
/* header: keep the nav on one line on laptop widths */
.freeplay { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 561px) and (max-width: 1360px) { .nav a, .nav-dd-b { padding-inline: 9px; } }
@media (min-width: 561px) and (max-width: 1180px) { .freeplay { display: none; } }
@media (min-width: 1025px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage > img:not(.amb),
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage .mood, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage > img:not(.amb), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage .mood { object-position: 50% 14%; }
  :is(#view-table, #view-baccarat) .stage, :is(#view-table, #view-baccarat) .stage.wide { --sh: clamp(140px, calc(var(--avail) * .33 - 24px), 320px); }
}
/* short laptop screens: trim the banner and boards a little more */
@media (min-width: 1025px) and (max-height: 780px) {
  :is(#view-holdem, #view-lir) .stage, :is(#view-holdem, #view-lir) .stage.wide, :is(#view-holdem, #view-tcp) .stage, :is(#view-holdem, #view-tcp) .stage.wide { --sh: 120px; }
  :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage, :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide { --sh: 96px; }
  #view-keno .kn-grid { max-width: 470px; gap: 5px; }
  #view-sicbo .sb-cell { min-height: 38px; }
}
@media (min-width: 1025px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) :is(.felt, .dealer-panel, .market) > *, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) :is(.felt, .dealer-panel, .market) > * { flex-shrink: 0; }
  #view-lir .lir-comm, #view-tcp .lir-comm { grid-template-columns: repeat(2, var(--cw)); gap: 12px; }
  #view-lir .lir-comm .slot, #view-lir .lir-comm .slot .card, #view-tcp .lir-comm .slot, #view-tcp .lir-comm .slot .card { width: var(--cw); height: calc(var(--cw) * 1.385); }
  #view-lir .lir-comm-wrap, #view-tcp .lir-comm-wrap { margin-top: 0; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt { gap: 5px; padding-top: 8px; padding-bottom: 10px; scrollbar-width: thin; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt::-webkit-scrollbar, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt::-webkit-scrollbar { display: block; width: 6px; }
  :is(#view-lir) .stage, #view-lir .stage.wide, :is(#view-tcp) .stage, #view-tcp .stage.wide { --sh: 104px; }
  #view-sicbo .stage, #view-sicbo .stage.wide, #view-keno .stage, #view-keno .stage.wide { --sh: 78px; }
  #view-sicbo .sb-cell { min-height: 34px; padding: 2px; }
  #view-keno .kn-grid { max-width: 430px; }
}
@media (min-width: 1025px) {
  :is(#view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage > img:not(.amb),
  :is(#view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage .mood, :is(#view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage > img:not(.amb), :is(#view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage .mood { object-position: 50% 7%; }
  :is(#view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage video.dv, :is(#view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage video.dv { object-position: 50% 22%; }
}

/* ---- Desktop v2: readable cards, dealer banner takes every spare pixel, top cards sit over its bottom edge ---- */
@media (min-width: 1025px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) {
    --cw: clamp(64px, calc(var(--avail) * .09), 84px);
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage,
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide {
    --sh: 170px; --ov: 78px;
    height: auto; flex: 1 1 var(--sh); min-height: 150px; max-height: clamp(260px, calc(var(--avail) * .56), 470px);
    margin: -4px -6px calc(var(--ov) * -1);
  }
  :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage, :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide {
    --sh: 140px; --ov: 26px; min-height: 130px; max-height: clamp(220px, calc(var(--avail) * .42), 380px);
  }
  /* the controls no longer push down with an auto margin; the banner absorbs the spare space */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .controls, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .controls { margin-top: 4px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > :not(.stage), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > :not(.stage) { z-index: 3; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .card .cc, #view-holdem .uth-board .slot .card .cc, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .card .cc { font-size: calc(var(--cw) * .47); }
  #view-plinko .pl-canvas { height: clamp(250px, calc(var(--avail) - 470px), 470px); }
}
@media (min-width: 1025px) and (max-height: 780px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .stage, :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .stage.wide, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .stage, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .stage.wide { --sh: 150px; --ov: 84px; min-height: 140px; }
  :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage, :is(#view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .stage.wide { --sh: 110px; --ov: 22px; min-height: 100px; }
}

/* ---------------- Plinko: big board on an animated neon backdrop ---------------- */
.pl-wrap { position: relative; isolation: isolate; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #121522 0%, #07080c 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -40px 80px -40px rgba(255,46,136,.25); }
.pl-wrap > .pl-canvas { position: relative; z-index: 2; }
.pl-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pl-bg i { position: absolute; display: block; }
.pl-aur { inset: -45%; background:
  radial-gradient(closest-side at 30% 35%, rgba(255,46,136,.42), transparent 70%),
  radial-gradient(closest-side at 72% 40%, rgba(46,242,255,.36), transparent 70%),
  radial-gradient(closest-side at 50% 78%, rgba(200,255,46,.24), transparent 70%),
  radial-gradient(closest-side at 62% 18%, rgba(155,92,255,.34), transparent 70%);
  filter: blur(34px); opacity: .75; animation: plAur 18s linear infinite; }
.pl-grid { left: -25%; right: -25%; bottom: -8%; height: 46%; transform-origin: 50% 100%; transform: perspective(380px) rotateX(62deg);
  background-image: linear-gradient(rgba(46,242,255,.32) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(46,242,255,.32) 1.5px, transparent 1.5px);
  background-size: 46px 46px; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%); mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
  animation: plGrid 2.6s linear infinite; }
.pl-bg::before { content: ""; position: absolute; inset: -100% 0 0; background-image:
  radial-gradient(1.6px 1.6px at 12% 20%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1.4px 1.4px at 34% 64%, rgba(46,242,255,.9), transparent 60%),
  radial-gradient(1.8px 1.8px at 58% 38%, rgba(255,46,136,.9), transparent 60%), radial-gradient(1.4px 1.4px at 81% 72%, rgba(200,255,46,.9), transparent 60%),
  radial-gradient(1.2px 1.2px at 92% 14%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.6px 1.6px at 22% 86%, rgba(155,92,255,.9), transparent 60%);
  background-size: 240px 240px; animation: plRise 9s linear infinite; opacity: .8; }
.pl-beam { top: -30%; bottom: -30%; width: 22%; left: 10%; background: linear-gradient(90deg, transparent, rgba(46,242,255,.13), transparent); transform: rotate(14deg); filter: blur(6px); animation: plBeam 7s ease-in-out infinite; }
.pl-beam.b2 { left: 64%; background: linear-gradient(90deg, transparent, rgba(255,46,136,.13), transparent); transform: rotate(-14deg); animation-duration: 9s; animation-delay: -3s; }
.pl-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(70% 55% at 50% 100%, rgba(200,255,46,.35), transparent 70%); }
.pl-wrap.pl-pop::after { animation: plPop .8s ease-out; }
.pl-wrap.pl-pop-big::after { background: radial-gradient(80% 70% at 50% 100%, rgba(255,46,136,.55), transparent 70%); animation: plPop .9s ease-out; }
.pl-wrap.pl-pop-big .pl-aur { animation-duration: 3s; opacity: 1; }
@keyframes plAur { to { transform: rotate(360deg); } }
@keyframes plGrid { to { background-position: 0 46px, 0 0; } }
@keyframes plRise { to { transform: translateY(50%); } }
@keyframes plBeam { 0%, 100% { translate: -40% 0; opacity: .4; } 50% { translate: 60% 0; opacity: 1; } }
@keyframes plPop { 0% { opacity: 1; } 100% { opacity: 0; } }
html.rm .pl-bg *, html.rm .pl-bg::before, html.rm .pl-wrap::after { animation: none !important; }

@media (min-width: 1025px) {
  /* the board takes all the spare height; the dealer banner stays compact on Plinko */
  #view-plinko .stage, #view-plinko .stage.wide { flex: 0 0 auto; height: clamp(110px, calc(var(--avail) * .17), 170px); min-height: 0; max-height: none; --ov: 0px; margin-bottom: 0; }
  #view-plinko .pl-wrap { flex: 1 1 auto; min-height: 300px; }
  #view-plinko .pl-wrap > .pl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
  #view-plinko .felt > .status { min-height: 0; }
  #view-plinko #pBetControls { gap: 6px; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  #view-plinko .stage, #view-plinko .stage.wide { height: 96px; }
  #view-plinko .pl-wrap { min-height: 250px; }
}
.pl-grid { opacity: .9; }
@media (min-width: 1025px) and (max-height: 780px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .status, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .status { font-size: 17px; line-height: 1.3; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir) .hand-zone, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp) .hand-zone { gap: 2px; }
  :is(#view-holdem, #view-lir) .stage, :is(#view-holdem, #view-lir) .stage.wide, :is(#view-holdem, #view-tcp) .stage, :is(#view-holdem, #view-tcp) .stage.wide { --ov: 96px; min-height: 150px; }
  :is(#view-holdem, #view-lir, #view-craps) .uspot, :is(#view-holdem, #view-tcp, #view-craps) .uspot { padding-block: 3px; }
  #view-sicbo .sb-top { gap: 2px; }
  #view-sicbo .sb-dice { transform: scale(.82); margin-block: -6px; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  #view-holdem .uth-board { padding: 0; grid-template-columns: repeat(5, calc(var(--cw) * .86)); }
  #view-holdem .uth-board .slot, #view-holdem .uth-board .slot .card { width: calc(var(--cw) * .86); height: calc(var(--cw) * 1.19); }
}
@media (min-width: 1025px) and (max-height: 860px) { #view-keno .kn-grid { max-width: 500px; } }
@media (min-width: 1025px) and (max-height: 780px) { #view-keno .kn-grid { max-width: 430px; } }

/* ---------------- Steady tables: one reserved dock for every set of controls ---------------- */
@media (min-width: 1025px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > :is(.controls, [data-kit-ride]), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > :is(.controls, [data-kit-ride]) { order: 10; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .controls:not([hidden]),
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > [data-kit-ride] > .controls:not([hidden]), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .controls:not([hidden]), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > [data-kit-ride] > .controls:not([hidden]) {
    min-height: var(--dockH, 0px); justify-content: flex-end; margin-top: 0;
  }
  /* status keeps room for two lines so a longer message never pushes the table around */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .status, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .status {
    min-height: 2.6em; display: block; align-content: center; text-align: center; text-wrap: balance;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt .controls:not([hidden]) > *, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt .controls:not([hidden]) > * { animation: dockIn .22s ease both; }
}
@keyframes dockIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.rm .felt .controls > * { animation: none !important; }

/* ---------------- No dealer on Plinko and Keno ---------------- */
body.no-dealer .dealer-panel .dealer-meta, body.no-dealer .dealer-panel #speech { display: none; }
#dealerPark { display: none; }

/* ---------------- Win message over the whole table ---------------- */
.felt > .win-fx { z-index: 40; place-items: center; }
.felt > .win-fx .wf-box { margin-top: 0; }
#winLayer { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
#winLayer > .win-fx { pointer-events: auto; place-items: center; border-radius: 0; }

/* ---------------- Keno: big board on an animated backdrop ---------------- */
.kn-wrap { position: relative; isolation: isolate; border-radius: 16px; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(120% 100% at 50% 0%, #15102a 0%, #08070f 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -50px 90px -50px rgba(140,107,255,.35); }
.kn-wrap > :not(.kn-bg) { position: relative; z-index: 2; }
.kn-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kn-bg i { position: absolute; display: block; }
.kn-rays { left: 50%; top: 50%; width: 180%; aspect-ratio: 1; translate: -50% -50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(140,107,255,.18) 0deg 6deg, transparent 6deg 18deg, rgba(46,242,255,.12) 18deg 22deg, transparent 22deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 75%); mask-image: radial-gradient(closest-side, #000 15%, transparent 75%);
  animation: knSpin 40s linear infinite; }
.kn-orb { width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(40px); opacity: .55; }
.kn-orb.o1 { left: -10%; top: -15%; background: #8C6BFF; animation: knOrb 13s ease-in-out infinite; }
.kn-orb.o2 { right: -12%; top: 20%; background: #2EF2FF; opacity: .35; animation: knOrb 17s ease-in-out infinite reverse; }
.kn-orb.o3 { left: 25%; bottom: -30%; background: #FF2E88; opacity: .35; animation: knOrb 15s ease-in-out infinite; animation-delay: -6s; }
.kn-scan { inset: 0; background: linear-gradient(180deg, transparent 0, rgba(200,255,46,.10) 48%, rgba(200,255,46,.22) 50%, rgba(200,255,46,.10) 52%, transparent 100%);
  background-size: 100% 260%; animation: knScan 5.5s linear infinite; mix-blend-mode: screen; }
.kn-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.2px 1.2px at 70% 60%, rgba(46,242,255,.8), transparent 60%), radial-gradient(1.6px 1.6px at 45% 85%, rgba(255,46,136,.8), transparent 60%), radial-gradient(1.2px 1.2px at 88% 18%, rgba(200,255,46,.8), transparent 60%);
  background-size: 200px 200px; animation: knTwinkle 4s ease-in-out infinite alternate; }
.kn-wrap .kn { background: rgba(10,10,20,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-color: rgba(255,255,255,.14); }
.kn-wrap .kn:hover:not(:disabled) { background: rgba(140,107,255,.18); border-color: rgba(140,107,255,.5); }
.kn-wrap .kn.pick { background: rgba(46,242,255,.2); border-color: var(--plasma); box-shadow: 0 0 14px rgba(46,242,255,.35); }
.kn-wrap .kn.drawn { background: rgba(255,46,136,.2); }
.kn-wrap .kn.hit { background: var(--acid); }
@keyframes knSpin { to { rotate: 360deg; } }
@keyframes knOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18%, 12%) scale(1.15); } }
@keyframes knScan { from { background-position: 0 100%; } to { background-position: 0 -160%; } }
@keyframes knTwinkle { from { opacity: .35; } to { opacity: .9; } }
html.rm .kn-bg *, html.rm .kn-bg::after { animation: none !important; }

@media (min-width: 1025px) {
  /* no dealer banner on Plinko and Keno: the boards get the room */
  #view-plinko .pl-wrap { min-height: 320px; }
  #view-keno .kn-wrap { flex: 1 1 auto; min-height: 300px; }
  #view-keno .kn-grid { flex: 1 1 auto; max-width: none; width: 100%; grid-template-rows: repeat(5, 1fr); gap: clamp(5px, .6vw, 9px); }
  #view-keno .kn-grid .kn { aspect-ratio: auto; height: 100%; font-size: clamp(16px, calc(var(--avail) * .03), 28px); border-radius: 12px; }
  #view-keno :is(.kn-bar, .kn-pay) { max-width: none; }
  #view-keno .kb { width: clamp(30px, calc(var(--avail) * .045), 40px); height: clamp(30px, calc(var(--avail) * .045), 40px); font-size: 13px; }
}
.felt > .win-fx, .kit-felt > .win-fx { position: absolute; inset: 0; z-index: 40; }
.felt > .dock-spacer { order: 10; flex: 0 0 auto; height: var(--dockH, 0px); pointer-events: none; }
.felt > .dock-spacer[hidden] { display: none; }
@media (max-width: 1024px) { .felt > .dock-spacer { display: none; } }
@media (min-width: 1025px) {
  /* reserve the tallest panel each table can show (decisions on Hold'em / Let It Ride, point bets on Craps) */
  #view-craps .felt { --dockMin: 137px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .controls:not([hidden]),
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > [data-kit-ride] > .controls:not([hidden]),
  .felt > .dock-spacer, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .controls:not([hidden]), :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > [data-kit-ride] > .controls:not([hidden]) { min-height: max(var(--dockH, 0px), var(--dockMin, 0px)); }
  .felt > .dock-spacer { height: max(var(--dockH, 0px), var(--dockMin, 0px)); }
  #view-table .hand-zone { min-height: calc(var(--cw) * 1.4 + 43px); }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .status, :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo, #view-plinko, #view-keno, #view-vault) .felt > .status { font-size: clamp(16px, 1.3vw, 20px); }
}
@media (min-width: 1025px) and (max-height: 780px) {
  :is(#view-holdem, #view-lir) .stage, :is(#view-holdem, #view-lir) .stage.wide, :is(#view-holdem, #view-tcp) .stage, :is(#view-holdem, #view-tcp) .stage.wide { min-height: 96px; --ov: 70px; }
  #view-sicbo .stage, #view-sicbo .stage.wide { min-height: 76px; }
  #view-keno .kn-wrap, #view-vault .vt-wrap { min-height: 240px; }
  :is(#view-holdem, #view-lir) .uth-spots .uspot, :is(#view-holdem, #view-tcp) .uth-spots .uspot { padding-block: 2px; }
}

@media (min-width: 1025px) {
  /* decisions on one row: choices and Cash out side by side */
  :is(#view-holdem, #view-lir) .uth-dec:not([hidden]), :is(#view-holdem, #view-tcp) .uth-dec:not([hidden]) { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
  :is(#view-holdem, #view-lir) .uth-dec .uth-dec-l, :is(#view-holdem, #view-tcp) .uth-dec .uth-dec-l { flex-basis: 100%; }
  :is(#view-holdem, #view-lir) .uth-dec .uth-acts, :is(#view-holdem, #view-tcp) .uth-dec .uth-acts { flex: 0 1 auto; }
  :is(#view-holdem, #view-lir) .uth-dec .h-co, :is(#view-holdem, #view-tcp) .uth-dec .h-co { min-width: 0; align-self: stretch; padding-inline: 22px; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  :is(#view-holdem, #view-lir) .stage, :is(#view-holdem, #view-lir) .stage.wide, :is(#view-holdem, #view-tcp) .stage, :is(#view-holdem, #view-tcp) .stage.wide { min-height: 118px; --ov: 80px; }
}

/* ---------- Hold or Sell ---------- */
.vt-wrap { position: relative; border-radius: 18px; overflow: hidden; padding: 12px 14px 14px; border: 1px solid rgba(255,255,255,.08); background: #05060c; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.vt-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.vt-bg i { position: absolute; display: block; }
.vt-aur { inset: -30%; background: radial-gradient(40% 35% at 25% 30%, rgba(255,43,214,.20), transparent 70%), radial-gradient(40% 40% at 78% 70%, rgba(40,230,255,.18), transparent 70%), radial-gradient(30% 30% at 55% 15%, rgba(200,255,40,.12), transparent 70%); animation: vtAur 18s ease-in-out infinite alternate; }
.vt-grid-bg { inset: 0; background-image: linear-gradient(rgba(40,230,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(40,230,255,.07) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%); animation: vtGrid 14s linear infinite; }
.vt-beam { top: -20%; bottom: -20%; width: 22%; left: -30%; background: linear-gradient(90deg, transparent, rgba(255,43,214,.10), transparent); transform: skewX(-18deg); animation: vtBeam 9s ease-in-out infinite; }
.vt-beam.b2 { background: linear-gradient(90deg, transparent, rgba(40,230,255,.10), transparent); animation-delay: -4.5s; }
@keyframes vtAur { to { transform: translate(6%, -4%) rotate(8deg) scale(1.08); } }
@keyframes vtGrid { to { background-position: 34px 34px, 34px 34px; } }
@keyframes vtBeam { 0% { left: -30%; } 60%, 100% { left: 120%; } }
html.rm .vt-bg i { animation: none; }
.vt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.vt-top > span { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.vt-board { display: grid; grid-template-columns: minmax(64px, 92px) 1fr minmax(64px, 92px); gap: 12px; align-items: stretch; flex: 1; min-height: 0; }
.vt-lad { display: grid; grid-template-rows: repeat(8, 1fr); gap: 5px; }
.vl { display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: clamp(12px, 1vw, 15px); border: 1px solid; transition: opacity .35s, filter .35s, transform .35s; position: relative; min-height: 24px; }
.vl.lo { color: #7fefff; border-color: rgba(40,230,255,.45); background: rgba(40,230,255,.08); }
.vl.mid { color: #e4ff6a; border-color: rgba(200,255,40,.5); background: rgba(200,255,40,.09); }
.vl.hi { color: #ff7de6; border-color: rgba(255,43,214,.6); background: rgba(255,43,214,.12); box-shadow: 0 0 14px rgba(255,43,214,.25); }
.vl.out { opacity: .22; filter: grayscale(.8); transform: scale(.94); box-shadow: none; }
.vl.out::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: currentColor; transform: rotate(-8deg); }
.vt-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: clamp(6px, .8vw, 10px); max-width: 560px; width: 100%; margin-inline: auto; }
.vt { position: relative; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; perspective: 600px; aspect-ratio: 1.25; min-height: 0; border-radius: 12px; font: inherit; }
.vt:disabled { cursor: default; }
.vt-door { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(145deg, #1a1d2b, #0b0c14 60%, #151827); border: 1px solid rgba(40,230,255,.35); box-shadow: inset 0 0 0 3px rgba(255,255,255,.03), inset 0 -8px 18px rgba(0,0,0,.5), 0 0 12px rgba(40,230,255,.12); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.3,.8,.3,1), opacity .55s, box-shadow .2s, border-color .2s; z-index: 2; }
.vt-door b { font-size: clamp(15px, 1.4vw, 22px); color: #d8f6ff; letter-spacing: .06em; }
.vt-dial { width: clamp(14px, 1.3vw, 20px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(40,230,255,.6); position: relative; }
.vt-dial::after { content: ''; position: absolute; left: 50%; top: 8%; width: 2px; height: 42%; background: rgba(40,230,255,.8); transform: translateX(-50%); }
.vt.pickable:hover .vt-door, .vt.pickable:focus-visible .vt-door { border-color: #c8ff28; box-shadow: inset 0 0 0 3px rgba(200,255,40,.08), 0 0 18px rgba(200,255,40,.35); }
.vt.pickable:hover .vt-dial { animation: vtSpin 1s linear infinite; }
@keyframes vtSpin { to { transform: rotate(360deg); } }
.vt-val { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 1.7vw, 26px); font-weight: 700; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(0,0,0,.5)); border: 1px solid rgba(255,255,255,.08); z-index: 1; }
.vt.lo .vt-val { color: #7fefff; text-shadow: 0 0 10px rgba(40,230,255,.6); }
.vt.mid .vt-val { color: #e4ff6a; text-shadow: 0 0 10px rgba(200,255,40,.6); }
.vt.hi .vt-val { color: #ff7de6; text-shadow: 0 0 14px rgba(255,43,214,.8); border-color: rgba(255,43,214,.5); }
.vt.open .vt-door { transform: rotateY(-100deg); opacity: 0; pointer-events: none; }
.vt.open:not(.mine) { opacity: .62; }
.vt.pop .vt-val { animation: vtPop .6s ease-out; }
@keyframes vtPop { 0% { transform: scale(.6); filter: brightness(2); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.vt-tag { position: absolute; z-index: 3; left: 50%; bottom: -7px; transform: translateX(-50%); font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #c8ff28; color: #0a0b10; font-weight: 700; display: none; }
.vt.mine .vt-tag { display: block; }
.vt.mine .vt-door { border-color: #c8ff28; box-shadow: 0 0 0 2px rgba(200,255,40,.5), 0 0 26px rgba(200,255,40,.45); animation: vtMine 1.8s ease-in-out infinite; }
@keyframes vtMine { 50% { box-shadow: 0 0 0 2px rgba(200,255,40,.8), 0 0 36px rgba(200,255,40,.6); } }
html.rm .vt.mine .vt-door, html.rm .vt.pickable:hover .vt-dial { animation: none; }
.vt.swap .vt-door { border-color: rgba(255,43,214,.6); }
@media (min-width: 1025px) {
  #view-vault .vt-wrap { flex: 1 1 auto; min-height: 300px; }
  #view-vault .vt-grid { height: 100%; aspect-ratio: auto; }
  #view-vault .vt { aspect-ratio: auto; }
}
@media (max-width: 1024px) {
  .vt-board { grid-template-columns: 1fr; }
  .vt-lad { grid-template-rows: none; grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .vt-lad .vl { font-size: 11px; min-height: 26px; }
  #vLadL { order: 0; } .vt-grid { order: 1; } #vLadR { order: 2; }
  .vt-wrap { padding: 10px; }
}
/* ---------- Keno readability: quiet backdrop, solid high-contrast tiles ---------- */
.kn-bg .kn-rays, .kn-bg .kn-scan { display: none; }
.kn-bg::after { opacity: .25; animation: none; }
.kn-orb { filter: blur(70px); opacity: .18 !important; }
.kn-orb.o1 { left: -25%; top: -30%; }
.kn-orb.o2 { right: -28%; top: auto; bottom: -30%; background: #8C6BFF; }
.kn-orb.o3 { display: none; }
.kn-wrap { background: radial-gradient(120% 100% at 50% 0%, #120f22 0%, #07070c 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.kn-wrap .kn { background: #141622; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,.16); color: #F2F3F7; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); }
.kn-wrap .kn:hover:not(:disabled) { background: #1d2032; border-color: rgba(255,255,255,.4); }
.kn-wrap .kn.pick { background: #0b2e35; border: 2px solid var(--plasma); color: #fff; box-shadow: none; }
.kn-wrap .kn.drawn { background: #1a1016; border-color: rgba(255,46,136,.55); color: #ff8fc2; }
.kn-wrap .kn.hit { background: var(--acid); border: 2px solid var(--acid); color: #0A0B0D; box-shadow: 0 0 14px rgba(200,255,46,.35); }
.kn-wrap .kn:disabled:not(.pick):not(.drawn):not(.hit) { color: #c9ccd6; }
/* ---------- Keno: lofi cyber city ---------- */
.kn-wrap { background: #0a0918; }
.kn-city { inset: -4%; background: url("assets/keno/lofi-city.jpg") center 40% / cover no-repeat; filter: saturate(1.05) brightness(.9); animation: knDrift 60s ease-in-out infinite alternate; }
@media (max-width: 700px) { .kn-city { background-image: url("assets/keno/lofi-city-sm.jpg"); } }
.kn-haze { inset: 0; background: radial-gradient(60% 50% at 50% 55%, rgba(8,7,20,.55), transparent 80%), linear-gradient(180deg, rgba(10,8,24,.35), rgba(10,8,24,.1) 40%, rgba(6,5,14,.6)); }
.kn-rain { inset: -50% 0 0 0; opacity: .32;
  background-image: repeating-linear-gradient(100deg, transparent 0 22px, rgba(170,190,255,.22) 22px 23px, transparent 23px 47px), repeating-linear-gradient(100deg, transparent 0 61px, rgba(200,170,255,.16) 61px 62px, transparent 62px 97px);
  background-size: 100% 140px, 100% 230px; animation: knRain 1.1s linear infinite; mix-blend-mode: screen; }
.kn-rain.r2 { opacity: .18; background-size: 100% 90px, 100% 170px; animation-duration: .75s; filter: blur(.6px); }
.kn-sign { right: 6%; top: 18%; width: 3px; height: 22%; border-radius: 2px; background: #ff4fd8; box-shadow: 0 0 12px 3px rgba(255,79,216,.55), 0 0 40px 8px rgba(255,79,216,.25); opacity: .5; animation: knFlick 7s steps(1) infinite; }
.kn-shade { inset: 0; box-shadow: inset 0 0 80px 20px rgba(4,3,10,.75); }
@keyframes knDrift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.08) translate(-2%, -1%); } }
@keyframes knRain { from { background-position: 0 0, 0 0; } to { background-position: -24px 140px, -40px 230px; } }
@keyframes knFlick { 0%, 100% { opacity: .5; } 41% { opacity: .15; } 42% { opacity: .55; } 44% { opacity: .1; } 45% { opacity: .5; } 78% { opacity: .35; } 79% { opacity: .55; } }
html.rm .kn-city, html.rm .kn-rain, html.rm .kn-sign { animation: none !important; }
/* tiles: dark smoked glass, still high contrast */
.kn-wrap .kn { background: rgba(14,14,28,.84); backdrop-filter: blur(3px) saturate(.8); -webkit-backdrop-filter: blur(3px) saturate(.8); border-color: rgba(190,200,255,.18); }
.kn-wrap .kn:hover:not(:disabled) { background: rgba(28,30,52,.9); }
.kn-wrap .kn.pick { background: rgba(8,44,52,.92); }
.kn-wrap .kn.drawn { background: rgba(30,12,26,.9); }
.kn-wrap .kn-bar, .kn-wrap .kn-balls { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.kn-city { filter: saturate(1.15) brightness(1.15); }
.kn-haze { background: radial-gradient(55% 45% at 50% 55%, rgba(8,7,20,.35), transparent 80%), linear-gradient(180deg, rgba(10,8,24,.15), transparent 40%, rgba(6,5,14,.45)); }
.kn-wrap .kn { background: rgba(12,12,26,.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-color: rgba(190,200,255,.22); text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.kn-wrap .kn.pick { background: rgba(6,40,48,.8); }
.kn-wrap .kn.drawn { background: rgba(34,10,28,.78); }
.kn-wrap .kn.hit { text-shadow: none; }
@media (min-width: 1025px) { #view-keno .kn-grid { gap: clamp(7px, .8vw, 12px); } }
.kn-wrap .kn.pick.hit, .kn-wrap .kn.hit { background: var(--acid); border-color: var(--acid); color: #0A0B0D; box-shadow: 0 0 16px rgba(200,255,46,.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Keno ambience: hover cars and a distant traffic lane */
.kn-bg .kn-car { position: absolute; left: 0; height: auto; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.kn-car.rtl .kc-body { transform: scaleX(-1); }
.kn-car .kc-body { display: block; }
.kn-car .kc-body svg { display: block; width: 100%; height: auto; }
.kn-car .kc-trail { position: absolute; top: 62%; right: 92%; width: 260%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--tail)); opacity: .45; filter: blur(1.5px); }
.kn-car.rtl .kc-trail { right: auto; left: 92%; background: linear-gradient(270deg, transparent, var(--tail)); }
.kn-car.near .kc-trail { height: 3px; opacity: .55; filter: blur(2px); }
.kn-car:not(.near) { filter: blur(.5px) brightness(.8); }
.kn-bg .kn-lane { left: 0; right: 0; top: 58%; height: 14px; opacity: .55; }
.kn-lane b { position: absolute; left: -2%; width: 3px; height: 2px; border-radius: 2px; background: #ffd9a0; box-shadow: 0 0 6px 1px rgba(255,200,130,.7); animation: knLane 30s linear infinite; }
.kn-lane b.back { background: #ff6f8f; box-shadow: 0 0 6px 1px rgba(255,90,130,.7); animation-direction: reverse; }
@keyframes knLane { from { left: -2%; } to { left: 102%; } }
.kn-lane { overflow: hidden; }
html.rm .kn-lane b { animation: none; opacity: 0; }
.kn-wrap > .kn-fly { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.kn-fly .kn-car { position: absolute; left: 0; pointer-events: none; will-change: transform, opacity; mix-blend-mode: screen; }
.kn-car:not(.near) { filter: blur(.3px); }
.kn-fly .kn-car { mix-blend-mode: normal; filter: drop-shadow(0 0 6px var(--head)) drop-shadow(0 0 2px rgba(255,255,255,.4)); }
.kn-car .kc-trail { opacity: .6; }
.kn-car.near .kc-trail { width: 200%; height: 3px; filter: blur(2.5px); }
/* ---------- Hold or Sell v2: lofi vault hall, labeled values, step guide ---------- */
.vt-wrap { background: #08071a; padding: 10px 12px 14px; gap: 8px; }
.vt-bg .vt-aur, .vt-bg .vt-grid-bg, .vt-bg .vt-beam { display: none; }
.vt-hall { inset: -4%; background: url("assets/vault/lofi-vault.jpg") center 45% / cover no-repeat; filter: brightness(1.05) saturate(1.05); animation: vtDrift 70s ease-in-out infinite alternate; }
@media (max-width: 700px) { .vt-hall { background-image: url("assets/vault/lofi-vault-sm.jpg"); } }
.vt-shaft { top: -10%; left: 40%; width: 20%; height: 90%; background: linear-gradient(180deg, rgba(150,170,255,.16), transparent 80%); filter: blur(14px); transform: skewX(-6deg); animation: vtShaft 12s ease-in-out infinite alternate; }
.vt-shaft.s2 { left: 52%; width: 12%; transform: skewX(8deg); animation-duration: 16s; animation-delay: -5s; }
.vt-dust { inset: 0; opacity: .5; background-image: radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,230,190,.85), transparent 60%), radial-gradient(1.2px 1.2px at 64% 38%, rgba(190,210,255,.8), transparent 60%), radial-gradient(1.6px 1.6px at 38% 72%, rgba(255,220,170,.7), transparent 60%), radial-gradient(1.1px 1.1px at 86% 58%, rgba(200,190,255,.8), transparent 60%);
  background-size: 260px 260px; animation: vtDust 40s linear infinite; }
.vt-dust.d2 { opacity: .35; background-size: 170px 170px; animation-duration: 28s; animation-direction: reverse; filter: blur(.6px); }
.vt-glow { left: 44%; top: 34%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,110,.35), transparent 70%); filter: blur(10px); animation: vtGlow 6s ease-in-out infinite alternate; }
.vt-shade { inset: 0; background: radial-gradient(60% 55% at 50% 55%, rgba(6,5,18,.45), transparent 85%), linear-gradient(180deg, rgba(8,7,22,.35), transparent 30%, rgba(5,4,14,.55)); box-shadow: inset 0 0 80px 20px rgba(4,3,12,.7); }
@keyframes vtDrift { from { transform: scale(1.02); } to { transform: scale(1.08) translate(1%, -1%); } }
@keyframes vtShaft { from { opacity: .45; } to { opacity: 1; } }
@keyframes vtDust { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 60px -260px, -40px -260px, 30px -260px, -60px -260px; } }
@keyframes vtGlow { from { opacity: .5; } to { opacity: 1; } }
html.rm .vt-hall, html.rm .vt-shaft, html.rm .vt-dust, html.rm .vt-glow { animation: none !important; }

/* step guide */
.vt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: relative; z-index: 2; }
.vt-steps li { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border-radius: 999px; font-size: clamp(11px, .85vw, 13px); color: #a9adc4; background: rgba(10,10,26,.66); border: 1px solid rgba(190,200,255,.14); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.vt-steps li i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.08); color: #d6d9ea; }
.vt-steps li.now { color: #0a0b10; background: #c8ff28; border-color: #c8ff28; font-weight: 700; box-shadow: 0 0 16px rgba(200,255,40,.35); }
.vt-steps li.now i { background: rgba(0,0,0,.18); color: #0a0b10; }
.vt-steps li.past { color: #e7e9f3; border-color: rgba(200,255,40,.35); }
.vt-steps li.past i { background: rgba(200,255,40,.25); color: #e4ff6a; }

/* board: values | vaults | values, clearly separated */
.vt-board { grid-template-columns: minmax(96px, 128px) 1fr minmax(96px, 128px); gap: 12px; position: relative; z-index: 2; }
.vt-side { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(8,8,22,.72); border: 1px solid rgba(190,200,255,.16); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); min-height: 0; }
.vt-side.lo { border-color: rgba(40,230,255,.3); }
.vt-side.hi { border-color: rgba(255,43,214,.4); }
.vt-side header { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.vt-side header b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.vt-side.lo header b { color: #7fefff; } .vt-side.hi header b { color: #ff7de6; }
.vt-side header span { font-size: 10px; color: #8e92aa; letter-spacing: .06em; }
.vt-side .vt-lad { flex: 1; display: grid; grid-auto-rows: 1fr; grid-template-rows: none; gap: 4px; min-height: 0; }
.vl { justify-content: space-between; padding: 0 8px; gap: 6px; min-height: 22px; background: rgba(0,0,0,.25) !important; }
.vl b { font-size: clamp(12px, .95vw, 15px); }
.vl small { font-size: 10px; color: #a6abc2; display: inline-flex; align-items: center; gap: 2px; }
.vl small .coin { width: 9px; height: 9px; }
.vt-side.hi .vl b { font-size: clamp(14px, 1.15vw, 18px); }
.vl.out { opacity: .28; }
.vt-mid { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.vt-mid-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 2px; }
.vt-mid-h > span { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: #d6d9ea; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.vt-mid .vt-grid { flex: 1; min-height: 0; }

/* vault doors */
.vt-door { flex-direction: column; gap: 2px; background: linear-gradient(145deg, rgba(34,36,58,.92), rgba(12,12,24,.92) 60%, rgba(26,28,46,.92)); border-color: rgba(190,200,255,.3); }
.vt-door small { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8e92aa; }
.vt-door b { font-size: clamp(16px, 1.5vw, 24px); }
.vt-door .vt-dial { position: absolute; right: 8px; top: 8px; width: 12px; }
.vt-val { flex-direction: column; gap: 2px; background: rgba(6,6,16,.82); }
.vt-val small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7d8199; text-shadow: none; }
.vt-val b { font-size: clamp(16px, 1.6vw, 26px); }
.vt.open:not(.mine) { opacity: .78; }
.vt-tag { font-size: 9px; letter-spacing: .1em; white-space: nowrap; }

/* rules: numbered how-to */
.vt-how { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.35; color: #c7cadb; }
.vt-how b { color: #f2f3f7; font-weight: 600; }
.vt-how li::marker { color: #c8ff28; font-weight: 700; }

@media (max-width: 1024px) {
  .vt-steps { grid-template-columns: repeat(5, auto); overflow-x: auto; justify-content: start; scrollbar-width: none; }
  .vt-steps li { padding: 5px 9px; font-size: 11px; }
  .vt-board { grid-template-columns: 1fr; gap: 8px; }
  .vt-side { padding: 6px; }
  .vt-side header { flex-direction: row; justify-content: center; gap: 8px; padding-bottom: 4px; }
  .vt-side .vt-lad { grid-auto-rows: auto; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .vt-side.lo { order: 0; } .vt-mid { order: 1; } .vt-side.hi { order: 2; }
  .vl { flex-direction: column; justify-content: center; gap: 0; padding: 3px 2px; min-height: 34px; }
  .vl small { font-size: 9px; }
}
.rules .vt-how li { display: list-item; }
.vt-door .vt-dial { top: auto; bottom: 7px; right: 7px; width: 10px; opacity: .6; }
.vt-door { background: linear-gradient(145deg, rgba(34,36,58,.74), rgba(12,12,24,.74) 60%, rgba(26,28,46,.74)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.vt-door b { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.vt-val { background: rgba(6,6,16,.7); }
.vt-side { background: rgba(8,8,22,.58); }
.vl { background: rgba(0,0,0,.32) !important; }
.vt-shade { background: radial-gradient(60% 55% at 50% 55%, rgba(6,5,18,.25), transparent 85%), linear-gradient(180deg, rgba(8,7,22,.2), transparent 30%, rgba(5,4,14,.45)); }
.vt-hall { filter: brightness(1.25) saturate(1.1); }
/* bottom options: always one centered group */
@media (min-width: 1025px) {
  :is(#view-holdem, #view-lir) .uth-dec .h-co, :is(#view-holdem, #view-tcp) .uth-dec .h-co { flex: 0 0 auto; width: auto; max-width: none; margin: 0; padding-inline: 24px; }
  :is(#view-holdem, #view-lir) .uth-dec:not([hidden]), :is(#view-holdem, #view-tcp) .uth-dec:not([hidden]) { justify-content: center; }
}
.felt .controls .uth-acts, .felt .controls .bet-row, .felt .controls .chips, .felt .ride-row { justify-content: center; }
@media (min-width: 1025px) { :is(#view-holdem, #view-lir) .felt .controls.uth-dec:not([hidden]), :is(#view-holdem, #view-tcp) .felt .controls.uth-dec:not([hidden]) { justify-content: center !important; } }
@media (min-width: 1025px) { :is(#view-holdem, #view-lir) .felt .controls.uth-dec:not([hidden]), :is(#view-holdem, #view-tcp) .felt .controls.uth-dec:not([hidden]) { align-content: flex-end; } }
.felt .controls > .pl-opts { justify-content: center; }
.vt-help { display: none; position: relative; z-index: 2; border-radius: 12px; background: rgba(8,8,22,.78); border: 1px solid rgba(190,200,255,.16); padding: 8px 12px; }
.vt-help summary { cursor: pointer; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #e4ff6a; }
.vt-help .vt-how { margin: 8px 0 2px; }
@media (max-width: 1024px) { .vt-help { display: block; } }
/* ---------- Hold or Sell v3: power cores, reactor room, new type ---------- */
#view-vault { --vt-d: 'Orbitron', var(--font-display); --vt-b: 'Chakra Petch', var(--font-body); }
#view-vault .felt, #view-vault .market, #view-vault .rules-vault { font-family: var(--vt-b); }
#view-vault .vt-how { font-family: var(--vt-b); font-size: 13.5px; }
.rules-vault .rules-h, .vt-help summary { font-family: var(--vt-d); letter-spacing: .14em; }
#view-vault .status { font-family: var(--vt-b); font-weight: 600; letter-spacing: .01em; }
#view-vault .mono, #view-vault .market .mono { font-family: var(--vt-b); font-variant-numeric: tabular-nums; }
#view-vault :is(.co-offer, [id$="Offer"], .market .big) { font-family: var(--vt-d); }
#view-vault .btn { font-family: var(--vt-b); font-weight: 700; letter-spacing: .02em; }

/* background: reactor room */
.vt-hall { background-image: url("assets/vault/lofi-reactor.jpg"); background-position: center 40%; filter: brightness(1.1) saturate(1.1); }
@media (max-width: 700px) { .vt-hall { background-image: url("assets/vault/lofi-reactor-sm.jpg"); } }
.vt-glow { left: 35%; top: 8%; width: 30%; aspect-ratio: 3; background: radial-gradient(closest-side, rgba(60,230,255,.28), transparent 70%); }
.vt-ring { left: 50%; top: 14%; width: 34%; aspect-ratio: 3.4; translate: -50% 0; border-radius: 50%; border: 2px solid rgba(70,240,255,.35); box-shadow: 0 0 22px rgba(70,240,255,.25), inset 0 0 22px rgba(70,240,255,.2); animation: vtRing 5s ease-in-out infinite; }
@keyframes vtRing { 50% { opacity: .45; } }
html.rm .vt-ring { animation: none; }

/* contained, opaque panels so the image never bleeds into the numbers */
.vt-side, .vt-steps li, .vt-help { background: rgba(7,8,20,.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
.vt-side { overflow: hidden; min-width: 0; }
.vt-side header b { font-family: var(--vt-d); font-size: 12px; letter-spacing: .2em; }
.vt-side header span { font-family: var(--vt-b); font-size: 11px; }
.vt-side .vt-lad { min-width: 0; }
.vl { min-width: 0; overflow: hidden; background: #0c0d1c !important; padding: 0 8px; }
.vl b { font-family: var(--vt-d); font-weight: 700; font-size: clamp(11px, .9vw, 14px); letter-spacing: .02em; white-space: nowrap; }
.vt-side.hi .vl b { font-size: clamp(13px, 1.05vw, 17px); }
.vl small { font-family: var(--vt-b); font-weight: 600; font-size: 11px; white-space: nowrap; color: #b5b9cf; }
.vl.out { opacity: .3; }
.vl.out b, .vl.out small { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.vl.out::after { display: none; }
.vt-steps li { font-family: var(--vt-b); font-weight: 600; font-size: clamp(11px, .85vw, 13px); }
.vt-steps li i { font-family: var(--vt-d); }
.vt-mid-h > span { font-family: var(--vt-d); font-size: 11px; letter-spacing: .18em; }

/* the cores */
.vt { aspect-ratio: auto; }
.vt-door { background: linear-gradient(160deg, #161830, #0a0b17 70%); border: 1px solid rgba(110,200,255,.28); flex-direction: column; justify-content: center; gap: 3px; transform-origin: 50% 50%; backdrop-filter: none; -webkit-backdrop-filter: none; }
.vt-door::before { content: ''; width: clamp(18px, 2.4vw, 34px); aspect-ratio: 1; border-radius: 50%; margin-bottom: 2px;
  background: radial-gradient(circle at 50% 45%, #e9feff 0 12%, #46f0ff 26%, rgba(70,120,255,.55) 52%, transparent 72%);
  box-shadow: 0 0 14px rgba(70,240,255,.55), 0 0 0 2px rgba(70,240,255,.35), 0 0 0 5px rgba(70,240,255,.08); animation: vtCore 3.2s ease-in-out infinite; }
.vt:nth-child(3n) .vt-door::before { animation-delay: -1.1s; } .vt:nth-child(4n+1) .vt-door::before { animation-delay: -2.2s; }
@keyframes vtCore { 50% { box-shadow: 0 0 22px rgba(70,240,255,.8), 0 0 0 2px rgba(70,240,255,.55), 0 0 0 7px rgba(70,240,255,.1); filter: brightness(1.15); } }
.vt-door b { font-family: var(--vt-d); font-weight: 800; font-size: clamp(13px, 1.25vw, 20px); letter-spacing: .08em; color: #e6f6ff; text-shadow: none; }
.vt-door small { font-family: var(--vt-b); font-weight: 600; font-size: 9px; letter-spacing: .28em; color: #7f8bb0; order: 2; }
.vt-door .vt-dial { display: none; }
.vt.pickable:hover .vt-door, .vt.pickable:focus-visible .vt-door { border-color: #46f0ff; box-shadow: 0 0 18px rgba(70,240,255,.35); }
.vt.mine .vt-door { border-color: #c8ff28; }
.vt.mine .vt-door::before { background: radial-gradient(circle at 50% 45%, #fbffe6 0 12%, #c8ff28 28%, rgba(120,200,20,.5) 54%, transparent 72%); box-shadow: 0 0 18px rgba(200,255,40,.7), 0 0 0 2px rgba(200,255,40,.5); }
.vt.open .vt-door { transform: scale(1.12); opacity: 0; filter: blur(6px) brightness(1.8); transition: transform .5s ease-out, opacity .5s ease-out, filter .5s; }
.vt-val { background: #090a16; border: 1px solid rgba(255,255,255,.1); }
.vt-val b { font-family: var(--vt-d); font-weight: 800; font-size: clamp(15px, 1.5vw, 24px); }
.vt-val small { font-family: var(--vt-b); font-weight: 600; font-size: 9px; letter-spacing: .2em; }
.vt.open:not(.mine) { opacity: .85; }
.vt-tag { font-family: var(--vt-d); font-size: 8.5px; letter-spacing: .14em; }
html.rm .vt-door::before { animation: none; }
@media (max-width: 1024px) {
  .vl { padding: 3px 2px; }
  .vl b { font-size: 12px; } .vt-side.hi .vl b { font-size: 13px; }
  .vl small { font-size: 9.5px; }
  .vt-door::before { width: 20px; }
}
@media (max-width: 1024px) { .vt { aspect-ratio: 1.05; } .vt-mid .vt-grid { flex: none; } }
/* ---------- One dealer format for every dealer table (Baccarat style) ---------- */
@media (min-width: 1025px) {
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo) .felt, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo) .felt { --dealH: clamp(170px, calc(var(--avail) * .31), 360px); }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo) .felt > .stage,
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo) .felt > .stage.wide, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo) .felt > .stage, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo) .felt > .stage.wide {
    flex: 0 0 auto; height: var(--dealH); min-height: var(--dealH); max-height: var(--dealH); --ov: 0px; --sh: var(--dealH);
    margin: -4px -6px 4px;
  }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo) .felt > .stage :is(img:not(.amb), .mood, video.dv), html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo) .felt > .stage :is(img:not(.amb), .mood, video.dv) { object-fit: cover; object-position: 50% 18%; }
}
/* paired rows: side by side on desktop, untouched on phones */
.pair-row { display: contents; }
@media (min-width: 1025px) {
  html body .felt > .pair-row { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: clamp(18px, 3vw, 48px); flex-shrink: 0; }
  html body .felt > .pair-row > * { margin: 0; flex: 0 1 auto; min-width: 0; }
  html body #view-holdem .pair-row .uth-board { align-self: flex-start; padding-bottom: 0; }
  html body .felt > .pair-row.cr-pair { align-items: center; }
  /* short screens: slightly smaller video and cards so every table still fits */
}
@media (min-width: 1025px) and (max-height: 780px) {
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps, #view-sicbo) .felt, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps, #view-sicbo) .felt { --dealH: clamp(150px, calc(var(--avail) * .27), 360px); }
}
@media (min-width: 1025px) {
  html body #view-sicbo .felt > .sb-top { flex-direction: row; justify-content: center; align-items: center; gap: 22px; }
  html body #view-sicbo .sb-dice { transform: scale(.82); margin: -6px -10px; }
  html body #view-sicbo .sb-cell { min-height: clamp(32px, calc(var(--avail) * .05), 48px); padding: 2px; }
  html body #view-holdem .felt { row-gap: 6px; }
  html body #view-holdem .uspot { padding-block: 3px; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  html body :is(#view-table, #view-holdem) .felt { --cw: clamp(54px, calc(var(--avail) * .09), 64px); }
  html body #view-table .hand-zone { min-height: calc(var(--cw) * 1.4 + 34px); }
}
@media (min-width: 1025px) {
  /* Sic Bo has no dealer: give the layout the room */
  html body #view-sicbo .sb-cell { min-height: clamp(40px, calc(var(--avail) * .075), 64px); padding: 4px 2px; }
  html body #view-sicbo .sb-dice { transform: none; margin: 0; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  html body #view-holdem .felt { --cw: clamp(50px, calc(var(--avail) * .085), 60px); }
  html body :is(#view-holdem, #view-craps) .felt > .status { min-height: 2.2em; }
}
@media (min-width: 1025px) and (max-height: 780px) { html body #view-holdem .felt { row-gap: 3px; } }
/* balance card: everything stays inside the box */
.bank { min-width: 0; }
.bank-num { display: block; max-width: 100%; overflow: hidden; }
.bank .kpis { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; }
.bank .kpis > div { min-width: 0; display: flex; flex-direction: column; }
.bank .kpis > div:last-child { align-items: flex-end; text-align: right; }
.bank .kpis #kNet { display: block; max-width: 100%; overflow: hidden; }
.bank .kpis { grid-template-columns: 1fr 1fr; row-gap: 6px; }
.bank .kpis > div:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
.bank .kpis > div:last-child .lbl { flex: none; }
.bank .kpis #kNet { font-size: 15px; min-width: 0; }
/* ---------- Dealer format v2: taller video, first row of cards rests on the table edge ---------- */
@media (min-width: 1025px) {
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps) .felt, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps) .felt {
    --dealOv: calc(var(--cw) * .72);
    --dealH: calc(clamp(170px, calc(var(--avail) * .31), 360px) + var(--dealOv));
  }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps) .felt > .stage,
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps) .felt > .stage.wide, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps) .felt > .stage, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps) .felt > .stage.wide {
    margin-bottom: calc(var(--dealOv) * -1); z-index: 0;
  }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps) .felt > .stage + *, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps) .felt > .stage + * { position: relative; z-index: 2; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-craps) .felt, html body :is(#view-table, #view-baccarat, #view-holdem, #view-tcp, #view-craps) .felt { --dealH: calc(clamp(150px, calc(var(--avail) * .27), 360px) + var(--dealOv)); }
}
/* Hold'em: community cards on the table edge, Dealer and You side by side below */
@media (min-width: 1025px) {
  html body #view-holdem .felt > .uth-board { align-self: center; margin-inline: auto; padding-bottom: 0; }
  html body #view-holdem .felt > .pair-row.uth-hands { gap: clamp(40px, 7vw, 110px); align-items: flex-start; }
  html body #view-holdem .pair-row.uth-hands > .hand-zone { min-width: calc(var(--cw) * 2.4); }
}
/* ---------- Auto bet + Turbo (Plinko, Keno, LOSO) ---------- */
.auto-opts { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.auto-opts .auto-lbl { font: 600 11px var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8A8F98); }
.auto-opts .seg button { padding: 6px 11px; font-size: 12px; }
.auto-run { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 14px; margin-inline: auto; border-radius: 14px;
  background: rgba(10,11,13,.72); border: 1px solid rgba(200,255,46,.35); box-shadow: 0 0 24px rgba(200,255,46,.12); }
.auto-run[hidden] { display: none !important; }
.auto-run .auto-info { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.auto-run .auto-count { font-size: 13px; color: var(--bone, #F4F1EA); letter-spacing: .04em; }
.auto-run .auto-net { font-size: 12px; } .auto-run .auto-net.win { color: var(--acid, #C8FF2E); } .auto-run .auto-net.lose { color: #FF5C7A; } .auto-run .auto-net.push { color: var(--muted, #8A8F98); }
.auto-run .auto-stop { min-width: 110px; }
.jp-auto { display: flex; gap: 6px; align-items: center; }
.jp-turbo.on { color: #0A0B0D; background: #FFD23F; border-color: #FFD23F; box-shadow: 0 0 16px rgba(255,210,63,.55); }
.jp-auto { display: block; }
@media (max-width: 640px) {
  .jp-bar { grid-template-columns: auto auto auto auto 1fr auto; grid-template-areas: "i m s t bal auto" "bet bet bet bet bet spin" "tog tog tog tog tog tog"; }
  .jp-bar > #jpTurbo { grid-area: t; width: 36px; height: 36px; }
}
@media (min-width: 641px) and (max-width: 1180px) { .jp-bar > #jpTurbo { order: 0; width: 36px; height: 36px; } }
@media (min-width: 1181px) { #jpBetControls.jp-bar { gap: 8px; } }
body.auto-running :is(#pFelt, #kFelt) > .dock-spacer { display: none !important; }
@media (min-width: 1025px) and (max-height: 780px) {
  .auto-opts .seg { padding: 2px; } .auto-opts .seg button { padding: 4px 10px; } .auto-opts .btn.sm { padding-block: 5px; }
}
.auto-opts.inline { display: inline-flex; flex-wrap: nowrap; gap: 8px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.1); }
@media (max-width: 640px) { .auto-opts.inline { flex-wrap: wrap; padding-left: 0; border-left: 0; } }
/* ---------- How to play (left panel) ---------- */
.rules { margin-top: 14px; }
.rules .howto { list-style: none; counter-reset: hw; display: grid; gap: 7px; margin: 4px 0 4px; padding: 0; font-size: 12.5px; line-height: 1.38; color: var(--steel-2, #b7bcc6); }
.rules .howto li { counter-increment: hw; display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-items: start; justify-content: initial; }
.rules .howto li::before { content: counter(hw); grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-mono, monospace); color: #0A0B0D; background: var(--acid, #C8FF2E); margin-top: 1px; }
.rules .howto b { color: var(--bone, #F4F1EA); font-weight: 600; }
.rules .rules-sub { margin-top: 14px; }
.howto-m { display: none; border-radius: 12px; background: rgba(10,11,13,.85); border: 1px solid rgba(255,255,255,.1); padding: 10px 14px; margin-top: 12px; }
.howto-m summary { cursor: pointer; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--acid, #C8FF2E); }
.howto-m .howto { list-style: none; counter-reset: hw; display: grid; gap: 8px; margin: 10px 0 2px; padding: 0; font-size: 13.5px; line-height: 1.4; color: #c7cadb; }
.howto-m .howto li { counter-increment: hw; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }
.howto-m .howto li::before { content: counter(hw); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-mono, monospace); color: #0A0B0D; background: var(--acid, #C8FF2E); }
.howto-m .howto b { color: #f2f3f7; }
@media (max-width: 1180px) { .howto-m { display: block; } }
@media (min-width: 1181px) {
  .dealer-panel { min-height: 0; overflow: hidden; }
  .dealer-panel > *:not(.rules) { flex-shrink: 0; }
  .dealer-panel > .rules { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: 2px; }
  .rules .rtabs { display: flex; gap: 4px; padding: 3px; margin: 2px 0 8px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
  .rules .rtabs button { flex: 1; border: 0; background: none; color: var(--steel, #8A8F98); font: 600 11.5px var(--font-display, inherit); letter-spacing: .04em; padding: 6px 4px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
  .rules .rtabs button[aria-selected="true"] { background: var(--bone, #F4F1EA); color: #0A0B0D; }
  .rules .rpane { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); padding-bottom: 14px; }
  .rules .rpane[hidden] { display: none; }
  .rules .rpane .rules-h.uth-pt { margin-top: 12px; }
  .rules .rpane .keys { margin-top: 10px; }
}
@media (min-width: 1181px) {
  /* the dealer menu already shows the name, so drop the duplicate title to make room for the rules */
  .dealer-panel .dealer-meta > div:first-child { display: none; }
  .dealer-panel .dealer-meta { gap: 0; }
}
@media (min-width: 1181px) and (max-height: 900px) { .dealer-panel > .speech { display: none; } }
@media (min-width: 1181px) and (max-height: 780px) {
  .dealer-panel { gap: 8px; padding: 12px; }
  .dealer-panel .bank { padding-block: 10px; }
  .dealer-panel .bank .bank-bar { margin-block: 6px; }
}
.howto-m { grid-column: 1 / -1; order: 1; }
.howto-m .howto li, .rules .howto li { display: block; position: relative; padding-left: 30px; }
.howto-m .howto li::before, .rules .howto li::before { position: absolute; left: 0; top: 0; }
.rules .howto li::before { grid-row: auto; }
.howto-m .howto b, .rules .howto b { display: block; margin-bottom: 1px; }

/* ---------- WICK Street (drag racing) ---------- */
#view-race { padding: clamp(12px, 2vw, 24px) clamp(12px, 3vw, 32px) 40px; }
.rc-wrap { position: relative; max-width: 1440px; margin: 0 auto; }
.rc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rc-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rc-title h2 { font-family: Orbitron, var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); letter-spacing: .08em; font-style: italic; background: linear-gradient(100deg, #fff 0%, var(--plasma) 45%, var(--ultra) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(46,242,255,.25); }
.rc-eyebrow { font-family: Orbitron, sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .3em; color: var(--acid); }
.rc-sub { font-family: 'Chakra Petch', sans-serif; color: var(--steel); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.rc-head-r { display: flex; gap: 8px; }
.rc-ico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); font: 600 .85rem 'Chakra Petch', sans-serif; letter-spacing: .04em; cursor: pointer; }
.rc-ico:hover { border-color: var(--plasma); }
.rc-ico.off { color: var(--steel); } .rc-ico.off .rc-wave { display: none; }
.rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.rc-stage { position: relative; height: clamp(320px, 56vh, 560px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(46,242,255,.25); box-shadow: 0 0 0 1px rgba(140,107,255,.12), 0 20px 60px -20px rgba(46,242,255,.25); background: #05040b; }
.rc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-hud { position: absolute; inset: 0; pointer-events: none; font-family: 'Chakra Petch', sans-serif; }
.rc-hud button { pointer-events: auto; }
.rc-vs { position: absolute; left: 14px; top: 12px; display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(5,5,6,.6); border: 1px solid var(--line-2); font-size: .82rem; backdrop-filter: blur(6px); max-width: calc(100% - 200px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-vs b { font-family: Orbitron, sans-serif; color: var(--signal); letter-spacing: .06em; } .rc-vs span:last-child { color: var(--steel-2); }
.rc-prog { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 4px; border-radius: 4px; background: rgba(244,246,241,.12); }
.rc-prog i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); }
.rc-prog-p { background: var(--acid); box-shadow: 0 0 10px var(--acid); z-index: 1; } .rc-prog-r { background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.rc-flag { position: absolute; right: -2px; top: -5px; width: 8px; height: 14px; background: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 4px 4px; }
.rc-tree { position: absolute; top: 12px; right: 14px; display: flex; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(5,5,6,.7); border: 1px solid var(--line-2); }
.rc-tree i { width: 18px; height: 18px; border-radius: 50%; background: #2a1d08; border: 1px solid #3a2a10; transition: background .08s, box-shadow .08s; }
.rc-tree i.g { background: #0b2a10; border-color: #12401a; }
.rc-tree i.on { background: #FFB020; box-shadow: 0 0 16px #FFB020, 0 0 4px #fff inset; }
.rc-tree i.go { background: #3BFF6A; box-shadow: 0 0 22px #3BFF6A, 0 0 4px #fff inset; }
.rc-pop { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); width: 80%; text-align: center; }
.rc-pop-i { position: absolute; left: 0; right: 0; font-family: Orbitron, sans-serif; font-weight: 800; font-style: italic; font-size: clamp(1.1rem, .8rem + 1.6vw, 2rem); letter-spacing: .08em; color: var(--bone); text-shadow: 0 0 18px rgba(255,255,255,.4); animation: rcPop 1.1s var(--ease) forwards; }
.rc-pop-i.good { color: var(--acid); text-shadow: 0 0 20px rgba(200,255,46,.7); }
.rc-pop-i.bad { color: var(--signal); text-shadow: 0 0 20px rgba(255,59,92,.6); }
.rc-pop-i.nos { color: var(--plasma); text-shadow: 0 0 24px rgba(46,242,255,.9); }
@keyframes rcPop { 0% { opacity: 0; transform: scale(.6) translateY(10px); } 18% { opacity: 1; transform: scale(1.08); } 70% { opacity: 1; transform: scale(1) translateY(-6px); } 100% { opacity: 0; transform: translateY(-24px); } }
.rc-tach { position: absolute; left: 14px; bottom: 22px; width: clamp(92px, 11vw, 128px); aspect-ratio: 1; }
.rc-tach svg { width: 100%; height: 100%; transform: rotate(135deg); }
.rc-tach circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.rc-tach-bg { stroke: rgba(244,246,241,.12); stroke-dasharray: 212 283; }
.rc-tach-arc { stroke: var(--plasma); stroke-dasharray: 283; stroke-dashoffset: 283; filter: drop-shadow(0 0 6px rgba(46,242,255,.7)); transition: stroke .1s; }
.rc-tach-arc.hot { stroke: var(--signal); filter: drop-shadow(0 0 8px rgba(255,59,92,.9)); }
.rc-tach-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(5,5,6,.85) 55%, transparent 56%); }
.rc-tach-c b { font-family: Orbitron, sans-serif; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1; color: var(--bone); }
.rc-tach-c span { font-size: .7rem; color: var(--steel-2); letter-spacing: .08em; } .rc-tach-c em { font-style: normal; font-family: var(--font-mono); color: var(--acid); font-size: .85rem; }
.rc-ctl { position: absolute; right: 14px; bottom: 22px; display: flex; gap: 10px; align-items: flex-end; }
.rc-act, .rc-nos { border: 0; cursor: pointer; font-family: Orbitron, sans-serif; font-weight: 800; letter-spacing: .08em; font-style: italic; }
.rc-act { height: clamp(60px, 8vw, 78px); min-width: clamp(110px, 13vw, 150px); padding: 0 18px; border-radius: 14px; background: linear-gradient(180deg, #d9ff5c, var(--acid)); color: #0a0d02; font-size: clamp(.95rem, .8rem + .5vw, 1.2rem); box-shadow: 0 8px 24px -6px rgba(200,255,46,.6); transition: transform .08s; }
.rc-act:active { transform: scale(.96); }
.rc-act.glow { animation: rcGlow .35s ease-in-out infinite alternate; }
@keyframes rcGlow { to { box-shadow: 0 0 0 4px rgba(200,255,46,.4), 0 0 36px rgba(200,255,46,.9); } }
.rc-nos { width: clamp(60px, 7vw, 74px); height: clamp(60px, 7vw, 74px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9ff9ff, var(--plasma) 45%, #0b6b8a); color: #02161c; font-size: .72rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 22px rgba(46,242,255,.6); }
.rc-nos small { font-size: .6rem; opacity: .7; font-style: normal; }
.rc-nos:disabled { filter: grayscale(.85) brightness(.55); box-shadow: none; cursor: default; }
.rc-splash { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); min-width: min(340px, 86%); padding: 18px 24px; border-radius: 16px; text-align: center; background: rgba(5,5,6,.82); backdrop-filter: blur(10px); border: 1px solid var(--line-2); animation: rcIn .5s var(--ease); }
.rc-splash.win { border-color: rgba(200,255,46,.7); box-shadow: 0 0 60px -10px rgba(200,255,46,.6); }
.rc-splash.lose { border-color: rgba(255,59,92,.5); }
.rc-splash p { margin: 0; }
.rc-sp-k { font-family: Orbitron, sans-serif; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(1rem, .8rem + 1vw, 1.5rem); }
.rc-splash.win .rc-sp-k { color: var(--acid); } .rc-splash.lose .rc-sp-k { color: var(--signal); }
.rc-sp-v { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); font-weight: 700; margin: 4px 0 !important; }
.rc-sp-x { color: var(--steel-2); font-size: .9rem; } .rc-sp-et { color: var(--steel); font-size: .78rem; margin-top: 6px !important; }
@keyframes rcIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.9); } }
.rc-panel { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 12px; font-family: 'Chakra Petch', var(--font-body); }
.rc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: var(--void); margin-bottom: 12px; }
.rc-tab { height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--steel-2); font: 700 .82rem Orbitron, sans-serif; letter-spacing: .06em; cursor: pointer; }
.rc-tab.on { background: var(--surface-2); color: var(--bone); box-shadow: inset 0 -2px 0 var(--plasma); }
.rc-lbl { margin: 12px 0 6px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.rc-car { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.rc-car > div:first-child { display: flex; flex-direction: column; } .rc-car b { font-family: Orbitron, sans-serif; letter-spacing: .05em; }
.rc-rate { text-align: right; display: flex; flex-direction: column; } .rc-rate b { color: var(--acid); font-size: 1.2rem; }
.rc-bar { grid-column: 1; height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; } .rc-bar i { display: block; height: 100%; background: var(--holo); transition: width .4s var(--ease); }
.rc-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rc-tier { --t: var(--acid); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); cursor: pointer; font-family: inherit; }
.rc-tier.medium { --t: var(--plasma); } .rc-tier.hard { --t: var(--ultra); } .rc-tier.extreme { --t: var(--signal); }
.rc-tier b { font-size: .78rem; color: var(--t); letter-spacing: .04em; } .rc-tier span { font-size: .92rem; font-weight: 700; } .rc-tier small { font-size: .68rem; color: var(--steel); }
.rc-tier.on { border-color: var(--t); background: color-mix(in srgb, var(--t) 12%, var(--surface-2)); box-shadow: 0 0 16px -4px var(--t); }
.rc-tier:disabled { opacity: .55; cursor: default; }
.rc-rival { margin-top: 8px; font-size: .85rem; } .rc-rival b { font-family: Orbitron, sans-serif; color: var(--signal); letter-spacing: .06em; }
.rc-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.rc-odds div { padding: 8px; border-radius: 10px; background: var(--void); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.rc-odds span { font-size: .68rem; color: var(--steel); text-transform: uppercase; letter-spacing: .1em; } .rc-odds b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-bet { display: grid; grid-template-columns: 44px 1fr 44px auto; gap: 6px; align-items: center; }
.rc-bet button, .rc-chips button { height: 40px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: 700 1rem 'Chakra Petch', sans-serif; cursor: pointer; }
.rc-bet b { text-align: center; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 4px; height: 40px; border-radius: 9px; background: var(--void); border: 1px solid var(--line); }
.rc-max { padding: 0 12px; font-size: .8rem !important; }
.rc-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; } .rc-chips button { height: 34px; font-size: .82rem; }
.rc-bet button:disabled, .rc-chips button:disabled { opacity: .45; cursor: default; }
.rc-go { width: 100%; height: 56px; margin-top: 12px; border: 0; border-radius: 12px; background: linear-gradient(100deg, var(--acid), #9cff2e 40%, var(--plasma)); color: #050506; font: 800 1.2rem Orbitron, sans-serif; font-style: italic; letter-spacing: .12em; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(200,255,46,.6); }
.rc-go:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rc-turbo { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--steel-2); cursor: pointer; }
.rc-turbo input { accent-color: var(--acid); }
.rc-msg { margin: 10px 0 0; color: var(--steel-2); min-height: 2.6em; }
.rc-stats { display: flex; gap: 14px; margin-top: 8px; color: var(--steel); } .rc-stats b { color: var(--bone); }
.rc-owned { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rc-own { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); cursor: pointer; font-family: inherit; }
.rc-own canvas { width: 100%; max-width: 120px; height: auto; } .rc-own b { font-family: Orbitron, sans-serif; font-size: .72rem; letter-spacing: .04em; } .rc-own span { font-size: .75rem; color: var(--acid); }
.rc-own.on { border-color: var(--acid); box-shadow: 0 0 14px -4px var(--acid); }
.rc-parts { display: flex; flex-direction: column; gap: 6px; }
.rc-part { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.rc-part-h { display: flex; flex-direction: column; gap: 4px; } .rc-part-h b { font-size: .88rem; }
.rc-pips { display: flex; gap: 3px; } .rc-pips i { width: 16px; height: 5px; border-radius: 2px; background: var(--line-2); } .rc-pips i.on { background: var(--acid); box-shadow: 0 0 6px rgba(200,255,46,.6); }
.rc-up { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(200,255,46,.5); background: rgba(200,255,46,.08); color: var(--bone); font: 600 .78rem 'Chakra Petch', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rc-up:disabled { opacity: .45; border-color: var(--line-2); background: transparent; cursor: default; }
.rc-paints { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-paint { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--c); cursor: pointer; }
.rc-paint.on { border-color: var(--bone); box-shadow: 0 0 0 2px var(--void), 0 0 12px var(--c); }
.rc-note { margin: 12px 0 0; }
.rc-shop { display: flex; flex-direction: column; gap: 8px; }
.rc-deal { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.rc-deal canvas { width: 96px; height: auto; } .rc-deal-t { display: flex; flex-direction: column; min-width: 0; } .rc-deal-t b { font-family: Orbitron, sans-serif; font-size: .82rem; letter-spacing: .04em; }
.rc-deal.has { border-color: rgba(200,255,46,.35); }
.rc-buy { height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--acid); color: #050506; font: 700 .8rem 'Chakra Petch', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rc-buy:disabled { background: var(--line-2); color: var(--steel-2); cursor: default; }
.rc-rules { position: absolute; top: 56px; right: 0; z-index: 4; width: min(420px, 100%); padding: 18px 20px; border-radius: 14px; background: rgba(14,15,18,.97); border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.rc-rules h3 { font-family: Orbitron, sans-serif; font-size: 1rem; letter-spacing: .06em; margin: 0 0 10px; }
.rc-rules ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; color: var(--steel-2); }
.rc-rules-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: var(--bone); font-size: 1.4rem; cursor: pointer; }
.game.live.rc-card { background-image: radial-gradient(120% 100% at 100% 0%, rgba(255,59,92,.16), transparent 60%), linear-gradient(var(--surface), var(--surface)), var(--holo); background-clip: padding-box, padding-box, border-box; background-origin: border-box; }
@media (max-width: 1100px) { .rc-grid { grid-template-columns: 1fr; } .rc-stage { height: clamp(260px, 52vw, 480px); } }
@media (max-width: 560px) {
  .rc-stage { height: clamp(240px, 64vw, 340px); }
  .rc-vs { max-width: calc(100% - 140px); font-size: .72rem; } .rc-vs span:last-child { display: none; }
  .rc-tree { gap: 5px; padding: 6px 8px; } .rc-tree i { width: 13px; height: 13px; }
  .rc-tach { width: 84px; bottom: 18px; left: 10px; } .rc-ctl { right: 10px; bottom: 18px; gap: 8px; }
  .rc-act { height: 56px; min-width: 100px; } .rc-nos { width: 54px; height: 54px; }
  .rc-head .rc-sub { display: none; }
}
/* keep the full nav on one row on laptops */
@media (min-width: 561px) and (max-width: 1520px) { .nav { gap: 0; } .nav a, .nav-dd-b { padding-left: 8px !important; padding-right: 8px !important; } }
@media (min-width: 561px) and (max-width: 1400px) { .topbar .freeplay { display: none; } .topbar { gap: 14px; } }
@media (min-width: 561px) and (max-width: 1300px) { .nav a, .nav-dd-b { font-size: .84rem !important; padding-left: 6px !important; padding-right: 6px !important; } }
@media (min-width: 561px) and (max-width: 1440px) {
  .nav { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  .rc-title { flex-wrap: nowrap; } .rc-how { white-space: nowrap; padding: 0 10px; font-size: .78rem; }
  .rc-stage { height: calc(clamp(220px, 60vw, 320px) + 84px); }
  .rc-stage canvas { height: calc(100% - 84px); }
  .rc-hud::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: linear-gradient(180deg, #0b0a10, #050506); border-top: 1px solid rgba(46,242,255,.2); z-index: -1; }
  .rc-tach { width: 70px; bottom: 7px; left: 10px; } .rc-tach-c b { font-size: 1.25rem; }
  .rc-ctl { bottom: 12px; } .rc-act { height: 56px; min-width: 120px; } .rc-nos { width: 56px; height: 56px; }
  .rc-prog { left: 92px; right: 200px; bottom: 40px; }
  .rc-pop { top: 26%; }
  .rc-splash { top: 38%; padding: 12px 16px; }
}
/* ---------- WICK Street v2: cinematic chase cam ---------- */
.rc-stage { background: #05070b; border-color: rgba(120,170,200,.18); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset; }
.rc-vs, .rc-tree { background: rgba(6,10,16,.55); border-color: rgba(255,255,255,.08); backdrop-filter: blur(10px) saturate(1.2); }
.rc-vs b { color: #ff4a5a; }
.rc-tree { left: 50%; right: auto; transform: translateX(-50%); gap: 10px; padding: 9px 14px; border-radius: 30px; }
.rc-tree i { width: 16px; height: 16px; background: radial-gradient(circle at 35% 30%, #4a3a1c, #1c1408); border-color: rgba(0,0,0,.6); box-shadow: inset 0 1px 2px rgba(255,255,255,.08); }
.rc-tree i.g { background: radial-gradient(circle at 35% 30%, #1d3a22, #08140b); }
.rc-tree i.on { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffb21e 45%, #b56a00); box-shadow: 0 0 18px 2px rgba(255,170,30,.85); }
.rc-tree i.go { background: radial-gradient(circle at 35% 30%, #eaffea, #3bff6a 45%, #0d9a33); box-shadow: 0 0 24px 4px rgba(59,255,106,.8); }
.rc-prog { left: 50%; right: auto; width: min(46%, 420px); transform: translateX(-50%); bottom: 14px; height: 3px; background: rgba(255,255,255,.14); }
.rc-gap { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: .8rem; letter-spacing: .06em; color: var(--steel-2); text-shadow: 0 1px 6px #000; }
.rc-gap.up { color: #8dff6a; } .rc-gap.dn { color: #ff6b78; }
/* gauge */
.rc-tach { left: 18px; bottom: 18px; width: clamp(118px, 13vw, 158px); }
.rc-tach svg { transform: none; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(8,12,18,.92) 0 58%, rgba(8,12,18,.78) 60% 100%); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset; backdrop-filter: blur(6px); }
.rc-g-ring { fill: none; stroke: rgba(120,200,255,.25); stroke-width: 1; }
.rc-tach line { stroke: rgba(210,230,255,.55); stroke-width: .7; } .rc-tach line.big { stroke: #e9f3ff; stroke-width: 1.4; } .rc-tach line.red { stroke: #ff3b4c; }
.rc-tach text { fill: #cfe3ff; font: 600 7px Orbitron, sans-serif; text-anchor: middle; } .rc-tach text.red { fill: #ff4b5a; }
.rc-needle { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 42%; border-radius: 2px; background: linear-gradient(#ff6a2a, #ff2a3d); transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(-135deg); box-shadow: 0 0 8px rgba(255,60,60,.8); transition: transform .06s linear; }
.rc-hub { position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #5b6470, #12161c); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.rc-tach-c { background: none; inset: auto 0 12% 0; height: auto; justify-content: flex-end; gap: 0; pointer-events: none; }
.rc-tach-c b { font-size: clamp(1.2rem, .9rem + 1vw, 1.7rem); color: #fff; text-shadow: 0 0 10px rgba(120,200,255,.6); }
.rc-spd { font: 600 .55rem Orbitron, sans-serif !important; color: #8fb4d8 !important; letter-spacing: .12em; display: flex; align-items: baseline; gap: 3px; }
.rc-spd em { font: 700 1.05rem var(--font-mono); color: #fff; letter-spacing: 0; }
.rc-shift { position: absolute; top: -48%; left: 50%; transform: translateX(-50%); font: 800 .55rem Orbitron, sans-serif !important; letter-spacing: .14em; color: rgba(255,255,255,.2) !important; padding: 2px 6px; border-radius: 4px; }
.rc-shift.on { color: #fff !important; background: #ff2a3d; box-shadow: 0 0 14px #ff2a3d; animation: rcBlink .12s steps(2) infinite; }
@keyframes rcBlink { 50% { opacity: .35; } }
/* controls */
.rc-ctl { right: 18px; bottom: 18px; gap: 12px; }
.rc-act { background: linear-gradient(180deg, rgba(20,28,38,.9), rgba(8,12,18,.92)); color: #fff; border: 1px solid rgba(200,255,46,.55); border-radius: 12px; font-style: normal; letter-spacing: .16em; box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.rc-act.glow { animation: none; border-color: #C8FF2E; color: #0a0d02; background: linear-gradient(180deg, #e2ff7a, #b8f21e); box-shadow: 0 0 0 3px rgba(200,255,46,.25), 0 0 34px rgba(200,255,46,.7); }
.rc-nos { background: radial-gradient(circle at 50% 40%, rgba(40,130,255,.35), rgba(8,14,26,.92) 70%); color: #bfe4ff; border: 1px solid rgba(80,170,255,.6); font-style: normal; box-shadow: 0 0 24px rgba(40,130,255,.45), inset 0 0 18px rgba(40,130,255,.3); }
.rc-nos:disabled { filter: saturate(.2) brightness(.6); }
/* splash */
.rc-splash { background: linear-gradient(180deg, rgba(8,12,18,.86), rgba(4,6,10,.92)); border-color: rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.rc-splash.win { border-color: rgba(200,255,46,.55); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px -20px rgba(200,255,46,.7); }
.rc-sp-k { font-style: normal; letter-spacing: .22em; font-size: clamp(.9rem, .75rem + .6vw, 1.15rem); }
/* panel hero */
.rc-car { grid-template-columns: 1fr auto; background: radial-gradient(120% 90% at 50% 0%, rgba(120,170,220,.16), transparent 60%), linear-gradient(180deg, #11151c, #0b0d12); }
.rc-hero { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 640 / 300; filter: drop-shadow(0 14px 14px rgba(0,0,0,.6)); }
.rc-own canvas { width: 100%; max-width: none; aspect-ratio: 240 / 130; height: auto; }
.rc-deal { grid-template-columns: 120px 1fr auto; } .rc-deal canvas { width: 120px; aspect-ratio: 240 / 130; height: auto; }
.rc-paint.fac { position: relative; } .rc-paint.fac::after { content: "F"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 .7rem Orbitron, sans-serif; color: rgba(0,0,0,.6); }
.game.live.rc-card { background-image: linear-gradient(90deg, rgba(14,15,18,.96) 30%, rgba(14,15,18,.35) 75%), url(assets/race/street.webp), linear-gradient(var(--surface), var(--surface)), var(--holo); background-size: auto, cover, auto, auto; background-position: 0 0, center 60%, 0 0, 0 0; background-clip: padding-box, padding-box, padding-box, border-box; }
@media (max-width: 560px) {
  .rc-tach { width: 78px; left: 8px; bottom: 3px; } .rc-tach text { font-size: 8px; } .rc-shift { top: -30%; }
  .rc-spd em { font-size: .8rem; } .rc-tach-c { bottom: 8%; }
  .rc-prog { bottom: 62px; width: 40%; } .rc-gap { bottom: 46px; font-size: .7rem; }
  .rc-tree { left: auto; right: 10px; transform: none; padding: 6px 10px; gap: 6px; }
}
/* dashboard bar under the scene */
.rc-stage { --dash: 76px; height: calc(clamp(300px, 52vh, 520px) + var(--dash)); }
.rc-stage canvas { height: calc(100% - var(--dash)); }
.rc-dash { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dash); display: flex; align-items: center; gap: 16px; padding: 0 14px; background: linear-gradient(180deg, #0c1016, #06080c); border-top: 1px solid rgba(255,255,255,.07); pointer-events: auto; }
.rc-dl { font: 600 .58rem Orbitron, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6f8296; }
.rc-gearbox { display: flex; flex-direction: column; align-items: center; min-width: 46px; }
.rc-gearbox b { font: 800 1.9rem/1 Orbitron, sans-serif; color: #fff; text-shadow: 0 0 12px rgba(120,200,255,.55); }
.rc-spdbox { display: flex; flex-direction: column; align-items: flex-start; min-width: 62px; }
.rc-spdbox b { font-size: 1.6rem; line-height: 1; color: #fff; }
.rc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.rc-leds { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.rc-leds i { height: 9px; border-radius: 2px; background: #161b22; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.rc-leds i.on.g { background: #3bff6a; box-shadow: 0 0 8px rgba(59,255,106,.7); }
.rc-leds i.on.a { background: #ffb21e; box-shadow: 0 0 8px rgba(255,178,30,.7); }
.rc-leds i.on.r { background: #ff2a3d; box-shadow: 0 0 10px rgba(255,42,61,.9); }
.rc-track { display: flex; align-items: center; gap: 10px; }
.rc-track .rc-prog { position: relative; left: auto; right: auto; bottom: auto; transform: none; width: auto; flex: 1; }
.rc-track .rc-gap { position: static; transform: none; min-width: 64px; text-align: right; font-size: .78rem; }
.rc-shift { position: static; transform: none; font: 800 .6rem Orbitron, sans-serif; letter-spacing: .14em; padding: 5px 8px; border-radius: 5px; color: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.08); }
.rc-shift.on { color: #fff; background: #ff2a3d; border-color: #ff2a3d; box-shadow: 0 0 16px #ff2a3d; animation: rcBlink .12s steps(2) infinite; }
.rc-dash .rc-ctl { position: static; display: flex; gap: 10px; align-items: center; }
.rc-dash .rc-act { height: 52px; min-width: 128px; font-size: 1rem; }
.rc-dash .rc-nos { width: 52px; height: 52px; font-size: .62rem; }
.rc-car > div:nth-of-type(1) { display: flex; flex-direction: column; }
@media (max-width: 1100px) { .rc-stage { height: calc(clamp(240px, 50vw, 460px) + var(--dash)); } }
@media (max-width: 560px) {
  .rc-stage { --dash: 118px; height: calc(clamp(210px, 62vw, 300px) + var(--dash)); }
  .rc-stage canvas { height: calc(100% - var(--dash)); }
  .rc-hud::after { display: none; }
  .rc-dash { flex-wrap: wrap; align-content: center; gap: 8px 10px; padding: 8px 10px; }
  .rc-mid { order: 5; flex: 1 0 100%; gap: 6px; }
  .rc-gearbox b { font-size: 1.5rem; } .rc-spdbox b { font-size: 1.25rem; }
  .rc-shift { margin-left: auto; }
  .rc-dash .rc-act { height: 44px; min-width: 96px; font-size: .85rem; } .rc-dash .rc-nos { width: 44px; height: 44px; font-size: .52rem; }
  .rc-leds i { height: 7px; }
}
@media (max-width: 560px) {
  .rc-gearbox { min-width: 30px; } .rc-spdbox { min-width: 40px; }
  .rc-dash .rc-ctl { flex-shrink: 0; gap: 8px; }
  .rc-dash { gap: 8px; }
}
@media (max-width: 560px) { .rc-stage { height: calc(clamp(240px, 74vw, 330px) + var(--dash)); } }
/* Street v3: nitro-only control, distance countdown, header balance */
body:has(#view-race:not([hidden])) .topbar .balance { display: flex; }
body:has(#view-race:not([hidden])) .topbar .freeplay { display: none; }
.rc-distbox { display: flex; flex-direction: column; align-items: flex-end; min-width: 78px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.07); transition: background .2s, border-color .2s; }
.rc-distbox b { font-size: 1.45rem; line-height: 1; color: #fff; }
.rc-distbox.warm { border-color: rgba(255,178,30,.6); } .rc-distbox.warm b { color: #ffc34d; }
.rc-distbox.hot { border-color: #ff3b4c; background: rgba(255,59,76,.12); animation: rcBlink .5s steps(2) infinite; } .rc-distbox.hot b { color: #ff6b78; }
.rc-prog s { position: absolute; top: -3px; width: 1px; height: 9px; background: rgba(255,255,255,.3); }
.rc-dash .rc-act { min-width: 150px; }
.rc-act.nos { border-color: rgba(80,170,255,.7); color: #cfe9ff; background: radial-gradient(120% 140% at 50% 0%, rgba(40,130,255,.35), rgba(8,14,26,.94) 70%); box-shadow: 0 0 22px rgba(40,130,255,.35), inset 0 0 14px rgba(40,130,255,.25); }
.rc-act.nos.glow { color: #021220; background: linear-gradient(180deg, #9fe3ff, #2e8bff); border-color: #9fe3ff; box-shadow: 0 0 0 3px rgba(46,139,255,.3), 0 0 34px rgba(46,139,255,.8); animation: rcPulse 1s ease-in-out infinite; }
.rc-act:disabled { cursor: default; opacity: .55; }
@keyframes rcPulse { 50% { box-shadow: 0 0 0 5px rgba(46,139,255,.18), 0 0 44px rgba(46,139,255,.95); } }
@media (max-width: 560px) { .rc-distbox { min-width: 60px; padding: 3px 7px; } .rc-distbox b { font-size: 1.1rem; } .rc-dash .rc-act { min-width: 112px; } .rc-distbox { margin-left: auto; } }
.rc-time { position: absolute; top: 12px; right: 14px; padding: 6px 10px; border-radius: 8px; background: rgba(6,10,16,.55); border: 1px solid rgba(255,255,255,.08); font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: .04em; backdrop-filter: blur(8px); }
@media (max-width: 560px) { .rc-time { top: auto; bottom: calc(var(--dash) + 8px); right: 8px; font-size: .78rem; padding: 4px 7px; } }
/* WICK Street tune packs */
.rc-tune { margin: 10px 0 4px; }
.rc-tune-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rc-tune-b { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(46,242,255,.07), rgba(255,255,255,.02)); color: var(--bone); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; min-width: 0; }
.rc-tune-b:hover:not(:disabled) { border-color: rgba(46,242,255,.6); transform: translateY(-1px); }
.rc-tune-b:disabled { opacity: .45; cursor: not-allowed; }
.rc-tune-b b { font-family: Orbitron, sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.rc-tune-b.sport b { color: #ffb02e; } .rc-tune-b.race b { color: var(--signal, #ff3b5c); } .rc-tune-b.street b { color: var(--plasma, #2ef2ff); }
.rc-tune-b span { font-size: .72rem; color: rgba(255,255,255,.7); white-space: nowrap; }
.rc-tune-b em { font-style: normal; color: var(--acid, #c8ff2e); font-weight: 700; }
.rc-tune-b .rc-tune-c { font-size: .86rem; color: #fff; font-weight: 700; }
.rc-tune-b small { font-size: .66rem; color: rgba(255,255,255,.5); }
.rc-tune-n { margin: 6px 0 0; line-height: 1.4; }
.rc-tune-on { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(200,255,46,.4); background: linear-gradient(160deg, rgba(200,255,46,.1), rgba(255,255,255,.02)); }
.rc-tune-on p { margin: 6px 0 0; }
.rc-tune-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rc-tune-h b { font-family: Orbitron, sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acid, #c8ff2e); }
.rc-tune-h span { font-size: .74rem; color: rgba(255,255,255,.75); }
.rc-tune-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 7px; }
.rc-tune-pips i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); }
.rc-tune-pips i.on { background: var(--acid, #c8ff2e); box-shadow: 0 0 6px rgba(200,255,46,.6); }

/* ===== WICK Run ===== */
#view-run { padding: clamp(12px, 2vw, 24px) clamp(12px, 3vw, 32px) 40px; }
body:has(#view-run:not([hidden])) .topbar .balance { display: flex; }
body:has(#view-run:not([hidden])) .topbar .freeplay { display: none; }
.wr-h2 { background: linear-gradient(100deg, #fff 0%, #ff3fb4 45%, #2ef2ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.wr-stage { position: relative; height: clamp(340px, 62vh, 600px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,63,180,.28); box-shadow: 0 0 0 1px rgba(46,242,255,.1), 0 24px 70px -24px rgba(255,63,180,.35); background: #07051a; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.wr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wr-hud { position: absolute; inset: 0; pointer-events: none; font-family: 'Chakra Petch', sans-serif; }
.wr-hud button { pointer-events: auto; }
.wr-top { position: absolute; top: 14px; left: 0; right: 0; text-align: center; }
.wr-mult { font-family: Orbitron, sans-serif; font-weight: 900; font-style: italic; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: 0 0 18px currentColor, 0 0 42px rgba(255,255,255,.18), 0 3px 0 rgba(0,0,0,.6); transition: color .2s; }
.wr-mult.crash { color: #ff3b5c !important; animation: wrShake .4s; }
@keyframes wrShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.wr-sub { margin-top: 6px; font-size: .86rem; color: rgba(255,255,255,.78); letter-spacing: .04em; text-shadow: 0 1px 3px #000; display: inline-flex; align-items: center; gap: 4px; }
.wr-pop { position: absolute; left: 0; right: 0; top: 40%; text-align: center; }
.wr-pop-i { position: absolute; left: 0; right: 0; font-family: Orbitron, sans-serif; font-weight: 900; font-style: italic; font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); letter-spacing: .08em; color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.5); animation: rcPop 1s var(--ease) forwards; }
.wr-pop-i.good { color: #2ef2ff; text-shadow: 0 0 26px rgba(46,242,255,.9); }
.wr-pop-i.bad { color: #ff3b5c; text-shadow: 0 0 26px rgba(255,59,92,.9); }
.wr-ctl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 96px 1fr 96px; gap: 10px; align-items: end; }
.wr-pad { height: 64px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,8,24,.55); backdrop-filter: blur(8px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 700 .7rem Orbitron, sans-serif; letter-spacing: .1em; cursor: pointer; touch-action: none; }
.wr-pad:active { background: rgba(46,242,255,.25); border-color: #2ef2ff; }
.wr-cash { justify-self: center; min-width: min(320px, 100%); height: 58px; padding: 0 22px; border: 0; border-radius: 14px; background: linear-gradient(100deg, #c8ff2e, #2ef2ff); color: #050506; font: 900 1.05rem Orbitron, sans-serif; font-style: italic; letter-spacing: .1em; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(46,242,255,.7); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.wr-cash.live { background: linear-gradient(100deg, #ff3fb4, #ffb02e); box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 10px 34px -6px rgba(255,63,180,.85); animation: wrPulse 1s ease-in-out infinite; }
.wr-cash b { font-size: 1.1rem; }
.wr-cash:disabled { filter: grayscale(.7) brightness(.6); cursor: default; animation: none; }
@keyframes wrPulse { 50% { transform: scale(1.03); } }
.wr-keys { position: absolute; right: 14px; top: 14px; color: rgba(255,255,255,.5); letter-spacing: .04em; }
@media (hover: hover) and (pointer: fine) { .wr-pad { opacity: .75; } }
.wr-splash { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); min-width: min(380px, 86%); padding: 18px 24px; border-radius: 16px; text-align: center; background: rgba(8,6,20,.82); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); animation: rcPop .35s var(--ease); pointer-events: none; }
.wr-splash.win { border-color: rgba(46,242,255,.6); box-shadow: 0 0 40px -6px rgba(46,242,255,.6); }
.wr-splash.lose { border-color: rgba(255,59,92,.55); box-shadow: 0 0 40px -6px rgba(255,59,92,.55); }
.wr-splash p { margin: 0; }
.wr-sp-k { font-family: Orbitron, sans-serif; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: rgba(255,255,255,.8); }
.wr-splash.win .wr-sp-k { color: #2ef2ff; } .wr-splash.lose .wr-sp-k { color: #ff3b5c; }
.wr-sp-v { font-size: 2rem; font-weight: 800; margin: 4px 0 !important; color: #fff; }
.wr-sp-x { font-size: .85rem; color: rgba(255,255,255,.7); }
/* panel */
.wr-chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wr-char { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px 7px; border-radius: 12px; border: 1px solid var(--line-2); background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--surface-2); color: var(--bone); cursor: pointer; overflow: hidden; }
.wr-char canvas { width: 100%; height: auto; aspect-ratio: 140 / 170; display: block; }
.wr-char b { font-family: Orbitron, sans-serif; font-size: .74rem; letter-spacing: .08em; color: var(--c); }
.wr-char small { font-size: .6rem; color: var(--steel); white-space: nowrap; }
.wr-char.on { border-color: var(--c); box-shadow: 0 0 18px -4px var(--c), inset 0 0 0 1px var(--c); }
.wr-char:disabled { opacity: .55; cursor: default; }
.wr-charname { margin: 6px 0 0; }
.wr-auto { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--void); font-size: .86rem; color: var(--steel-2); }
.wr-auto.on { border-color: rgba(46,242,255,.5); color: var(--bone); }
.wr-auto span { flex: 1; }
.wr-auto input[type=number] { width: 80px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: 700 .95rem var(--font-mono); text-align: right; padding: 0 8px; }
.wr-auto input[type=checkbox] { width: 18px; height: 18px; accent-color: #2ef2ff; }
.wr-go.live { background: linear-gradient(100deg, #ff3fb4, #ffb02e); }
.wr-hist { display: flex; flex-wrap: wrap; gap: 5px; }
.wr-h { padding: 3px 7px; border-radius: 7px; font: 700 .74rem var(--font-mono); background: var(--void); border: 1px solid var(--line); }
.wr-h.lo { color: #ff6a80; } .wr-h.mid { color: #c8ff2e; } .wr-h.hi { color: #ffb02e; }
.wr-h.w { border-color: rgba(46,242,255,.55); box-shadow: inset 0 -2px 0 rgba(46,242,255,.6); }
.wr-fairbox { margin-top: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--void); padding: 8px 10px; }
.wr-fairbox summary { cursor: pointer; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-2); }
.wr-fair { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wr-fair span { display: block; color: var(--steel); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.wr-fair code { display: block; font-size: .7rem; word-break: break-all; color: var(--bone); }
.wr-ver { display: flex; justify-content: space-between; align-items: center; }
.wr-ver span { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--steel-2); }
.wr-vbtn { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: 700 .78rem 'Chakra Petch', sans-serif; cursor: pointer; }
.game.live.wr-card { background-image: linear-gradient(90deg, rgba(14,15,18,.96) 30%, rgba(14,15,18,.3) 75%), url(assets/run/tile.webp), linear-gradient(var(--surface), var(--surface)), var(--holo); background-size: auto, cover, auto, auto; background-position: 0 0, right center, 0 0, 0 0; background-clip: padding-box, padding-box, padding-box, border-box; }
@media (max-width: 1100px) { .wr-stage { height: clamp(300px, 60vw, 520px); } }
@media (max-width: 560px) {
  .wr-stage { height: min(78vw, 400px); border-radius: 14px; }
  .wr-ctl { left: 8px; right: 8px; bottom: 8px; grid-template-columns: 70px 1fr 70px; gap: 6px; }
  .wr-pad { height: 54px; border-radius: 12px; }
  .wr-cash { min-width: 0; width: 100%; height: 52px; font-size: .86rem; padding: 0 10px; }
  .wr-keys { display: none; }
  .wr-top { top: 8px; }
  .wr-sub { font-size: .74rem; }
  .wr-splash { top: 46%; padding: 12px 14px; }
  .wr-sp-v { font-size: 1.5rem; }
}
.wr-mult { display: inline-flex; align-items: center; gap: .18em; }
.wr-mult .coin { width: .62em; height: .62em; }
.wr-sub b { color: #fff; } .wr-sub b.pos { color: #c8ff2e; }
.wr-tnote { margin: 6px 0 0; }
.wr-sub b.neg { color: #ff9aa8; } .wr-sub b.red { color: #ffb02e; letter-spacing: .06em; } .wr-sub b.jam { color: #2ef2ff; letter-spacing: .06em; }
.wr-bbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wr-bb { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 12px; border: 1px solid rgba(255,215,106,.28); background: linear-gradient(180deg, rgba(255,176,46,.12), rgba(255,176,46,.02)), var(--surface-2); color: var(--bone); cursor: pointer; }
.wr-bb b { font-family: Orbitron, sans-serif; font-size: 1rem; color: #ffd76a; }
.wr-bb small { font-size: .6rem; color: var(--steel); letter-spacing: .06em; text-transform: uppercase; }
.wr-bb span { font-size: .74rem; }
.wr-bb.on { border-color: #ffd76a; box-shadow: 0 0 18px -4px #ffb02e, inset 0 0 0 1px #ffd76a; background: linear-gradient(180deg, rgba(255,176,46,.3), rgba(255,176,46,.06)), var(--surface-2); }
.wr-bb:disabled { opacity: .5; cursor: default; }
.wr-cash.bonus, .wr-go.bonus { background: linear-gradient(100deg, #ffd76a, #ff8a1a) !important; color: #1a0e00; box-shadow: 0 10px 30px -8px rgba(255,176,46,.8); }
.wr-h.b { background: linear-gradient(180deg, rgba(255,176,46,.22), transparent), var(--void); border-color: rgba(255,215,106,.55); }
.wr-top { display: flex; flex-direction: column; align-items: center; }
.wr-cash { white-space: nowrap; }
@media (max-width: 560px) { .wr-cash { letter-spacing: .03em; gap: 6px; font-size: .8rem; } .wr-cash b { font-size: .9rem; } }
.wr-sub b.boost { color: #ffd76a; }
/* Street: tune pack results */
.rc-pack-run { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--steel-2); }
.rc-pack-run .neg, .rc-pack-sum.down .rc-pack-net { color: #ff6a80; }
.rc-pack-sum { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--void); text-align: left; }
.rc-pack-sum.up { border-color: rgba(200,255,46,.45); box-shadow: 0 0 22px -8px rgba(200,255,46,.5); }
.rc-pack-sum.down { border-color: rgba(255,106,128,.4); }
.rc-pack-sum.sp { margin: 12px 0 0; background: rgba(0,0,0,.35); }
.rc-pack-h { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-2); }
.rc-pack-x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); cursor: pointer; font-size: 1rem; line-height: 1; }
.rc-pack-net { font-size: 1.7rem; font-weight: 800; margin: 4px 0 6px; color: #c8ff2e; }
.rc-pack-g { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; color: var(--steel-2); }
.rc-pack-g b { color: var(--bone); }
@media (max-width: 560px) { .rc-pack-sum.sp { padding: 8px 10px; margin-top: 8px; } .rc-pack-sum.sp .rc-pack-g { display: none; } .rc-pack-sum.sp .rc-pack-net { font-size: 1.3rem; margin: 2px 0 0; } }

/* Header categories */
.nav-dd-m a { flex-wrap: wrap; column-gap: 10px; row-gap: 0; min-width: 220px; }
.nav-dd-m a b { font-weight: 600; color: var(--bone); }
.nav-dd-m a small { flex-basis: 100%; order: 3; font-size: .74rem; color: var(--steel); }
.nav-dd-m a.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--acid); }
.nav-dd-m a:hover { background: var(--surface); }
.nav-dd-m a .pill { order: 2; }
.nav-dd-m a .pill { position: static !important; margin-left: auto; align-self: center; transform: none; }

/* ================= LOBBY ================= */
#view-lobby { --lb-gap: clamp(36px, 5vw, 64px); }
.gold-text { background: linear-gradient(180deg, #fff1b8, #ffc83d 45%, #c9861a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.red-text { background: linear-gradient(100deg, #ff6a3d, #ff2d55); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* hero carousel */
.lh { position: relative; height: clamp(420px, 58vh, 560px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: #07060f; isolation: isolate; margin-top: 4px; }
.lh-track { position: absolute; inset: 0; }
.lh-s { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.lh-s.on { opacity: 1; visibility: visible; transition: opacity .7s var(--ease); z-index: 1; }
.lh-bg { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; transform: scale(1.06); transition: transform 8s linear; }
.lh-s.on .lh-bg { transform: scale(1); }
.lh-s::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,8,.94) 0%, rgba(5,5,8,.78) 32%, rgba(5,5,8,.15) 62%, rgba(5,5,8,0) 100%), linear-gradient(0deg, rgba(5,5,8,.85), transparent 38%); pointer-events: none; }
.lh-s.run .lh-bg { background-position: right center; }
.lh-s.jp .lh-bg { filter: saturate(1.1) brightness(.8); }
.lh-art { position: absolute; z-index: 1; pointer-events: none; }
.lh-album { right: clamp(24px, 7vw, 110px); top: 50%; width: clamp(200px, 26vw, 360px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; transform: translateY(-54%) rotate(4deg); box-shadow: 0 30px 80px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,200,80,.35), 0 0 60px -10px rgba(255,180,40,.45); }
.lh-car { right: clamp(-20px, 2vw, 60px); bottom: 10%; width: clamp(320px, 46vw, 700px); filter: drop-shadow(0 30px 30px rgba(0,0,0,.7)); }
.lh-s.on .lh-car { animation: lhCar 1.1s var(--ease) both; }
@keyframes lhCar { from { transform: translateX(14%); opacity: 0; } }
.lh-copy { position: absolute; z-index: 2; left: clamp(22px, 5vw, 64px); bottom: clamp(70px, 10vh, 96px); max-width: min(560px, 62%); }
.lh-s.on .lh-copy > * { animation: lhUp .7s var(--ease) both; }
.lh-s.on .lh-copy > :nth-child(2) { animation-delay: .06s; } .lh-s.on .lh-copy > :nth-child(3) { animation-delay: .12s; } .lh-s.on .lh-copy > :nth-child(4) { animation-delay: .18s; }
@keyframes lhUp { from { transform: translateY(14px); opacity: 0; } }
.lh-eye { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); margin: 0 0 10px; }
.lh-t { font-family: var(--font-display, inherit); font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.6rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 14px; }
.lh-d { color: rgba(255,255,255,.82); font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); line-height: 1.5; margin: 0 0 22px; max-width: 46ch; }
.lh-cta .btn { padding: 14px 26px; font-size: 1rem; }
.lh-ui { position: absolute; z-index: 3; left: clamp(22px, 5vw, 64px); right: clamp(14px, 3vw, 28px); bottom: 18px; display: flex; align-items: center; gap: 10px; }
.lh-dots { display: flex; gap: 6px; flex: 1; max-width: 560px; }
.lh-dots button { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 0 0; background: none; border: 0; color: rgba(255,255,255,.55); cursor: pointer; text-align: left; font: 600 .74rem var(--font-body); letter-spacing: .04em; }
.lh-dots button b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-dots button i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; position: relative; }
.lh-dots button i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--acid); }
.lh-dots button.on { color: #fff; } .lh-dots button.on i::after { transform: scaleX(var(--p, 0)); }
.lh-arw { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(10,10,16,.55); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lh-arw:hover { border-color: var(--acid); color: var(--acid); }
.lh-ui .lh-arw:first-child { order: 2; margin-left: auto; } .lh-ui .lh-arw:last-child { order: 3; }
/* strip */
.lb-strip { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lb-strip li { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.lb-strip b { font-size: 1.15rem; color: var(--bone); display: inline-flex; align-items: center; gap: 4px; }
.lb-strip span { font-size: .84rem; color: var(--steel-2); }
.lb-cats { display: flex; gap: 8px; margin: 22px 0 0; overflow-x: auto; scrollbar-width: none; }
.lb-cats::-webkit-scrollbar { display: none; }
.lb-cats a { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--steel-2); text-decoration: none; font-weight: 600; font-size: .88rem; transition: color .2s, border-color .2s, background .2s; }
.lb-cats a:hover { color: var(--bone); border-color: var(--acid); }
/* sections */
.lb-sec { margin-top: var(--lb-gap); }
.lb-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 18px; flex-wrap: wrap; }
.lb-sec-h h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -.01em; margin: 0; }
.lb-sec-h > p { margin: 0; max-width: 44ch; font-size: .95rem; }
.lb-eye { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); margin: 0 0 6px; }
.lt-grid { display: grid; gap: 16px; }
.lt-grid.g1 { grid-template-columns: 1fr; } .lt-grid.g2 { grid-template-columns: repeat(2, 1fr); } .lt-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.lt-grid.slots { grid-template-columns: 2fr 1fr; }
/* tile */
.lt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 22px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: inherit; text-decoration: none; border: 1px solid var(--line-2); background: var(--surface); transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.lt.wide { min-height: 300px; }
.lt-grid.g1 .lt { min-height: 320px; }
.lt-art { position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover no-repeat; transition: transform .7s var(--ease); }
.lt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,6,10,.96) 8%, rgba(6,6,10,.6) 45%, rgba(6,6,10,.08) 80%); }
.lt.wide::before, .lt-grid.g1 .lt::before { background: linear-gradient(90deg, rgba(6,6,10,.95) 0%, rgba(6,6,10,.7) 38%, rgba(6,6,10,.05) 72%), linear-gradient(0deg, rgba(6,6,10,.6), transparent 50%); }
.lt.wide .lt-body, .lt-grid.g1 .lt-body { max-width: 50%; }
.lt.run .lt-art, .lt[href="#run"] .lt-art { background-position: right center; }
.lt.car .lt-art { background-image: url(assets/race/kaze-hero.webp), var(--img); background-size: 58% auto, cover; background-position: 108% 85%, center; }
.lt.jp .lt-art { background-image: url(assets/jackpot/album.webp), url(assets/jackpot/bg.webp); background-size: auto 86%, cover; background-position: 92% 50%, center; }
.lt:hover { transform: translateY(-4px); border-color: rgba(200,255,46,.5); box-shadow: 0 24px 50px -24px rgba(200,255,46,.35); }
.lt:hover .lt-art { transform: scale(1.05); }
.lt:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.lt-body { display: flex; flex-direction: column; gap: 6px; max-width: 46ch; }
.lt-meta { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acid); }
.lt h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); margin: 0; letter-spacing: -.01em; }
.lt p { margin: 0; color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.45; }
.lt-tag { position: absolute; top: 16px; left: 16px; padding: 5px 10px; border-radius: 999px; font: 700 .68rem var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; background: var(--acid); color: var(--void); }
.lt-play { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(10,10,16,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); font-weight: 700; font-size: .82rem; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s, background .25s, color .25s; }
.lt:hover .lt-play, .lt:focus-visible .lt-play { opacity: 1; transform: none; background: var(--acid); color: var(--void); border-color: var(--acid); }
@media (hover: none) { .lt-play { opacity: 1; transform: none; } }
.lt.soon { border-style: dashed; background: repeating-linear-gradient(135deg, var(--surface) 0 14px, rgba(255,255,255,.02) 14px 28px); cursor: default; }
.lt.soon::before { display: none; } .lt.soon .lt-meta { color: var(--steel); } .lt.soon p { color: var(--steel-2); }
.lt.soon:hover { transform: none; border-color: var(--line-2); box-shadow: none; }
/* why */
.lw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lw { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), transparent); }
.lw-n { color: var(--acid); font-size: .8rem; letter-spacing: .14em; }
.lw h3 { margin: 10px 0 6px; font-size: 1.15rem; }
.lw p { margin: 0; color: var(--steel-2); font-size: .92rem; line-height: 1.5; }
#view-lobby > .block { margin-top: var(--lb-gap); }
@media (max-width: 1000px) {
  .lt-grid.g3 { grid-template-columns: repeat(2, 1fr); }
  .lb-strip { grid-template-columns: repeat(2, 1fr); }
  .lh-copy { max-width: 72%; }
}
@media (max-width: 700px) {
  .lt-grid.g2, .lt-grid.slots, .lw-grid { grid-template-columns: 1fr; }
  .lt.wide .lt-body, .lt-grid.g1 .lt-body { max-width: 100%; }
  .lt.wide::before, .lt-grid.g1 .lt::before { background: linear-gradient(0deg, rgba(6,6,10,.96) 10%, rgba(6,6,10,.55) 50%, rgba(6,6,10,.05) 85%); }
}
@media (max-width: 560px) {
  .lh { height: 560px; border-radius: 16px; }
  .lh-s::after { background: linear-gradient(0deg, rgba(5,5,8,.97) 30%, rgba(5,5,8,.6) 58%, rgba(5,5,8,.05) 85%); }
  .lh-copy { left: 18px; right: 18px; max-width: none; bottom: 78px; }
  .lh-t { font-size: 2.3rem; } .lh-d { font-size: .92rem; margin-bottom: 16px; }
  .lh-album { width: 170px; top: 22px; right: 50%; transform: translateX(50%) rotate(4deg); }
  .lh-car { width: 108%; right: -14%; bottom: auto; top: 18px; }
  .lh-ui { left: 18px; right: 18px; bottom: 14px; }
  .lh-arw { display: none; }
  .lb-strip li { padding: 12px 14px; } .lb-strip b { font-size: 1rem; } .lb-strip span { font-size: .76rem; }
  .lt-grid.g3 { grid-template-columns: 1fr; }
  .lt { min-height: 220px; padding: 18px; } .lt.wide { min-height: 260px; }
  .lt.car .lt-art { background-size: 90% auto, cover; background-position: 50% 20%, center; }
  .lt.jp .lt-art { background-size: auto 60%, cover; background-position: 50% 14%, center; }
}
/* table game label, top-left of the dealer screen */
.stage-game { position: absolute; z-index: 6; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 9px 12px; border-radius: 10px; background: rgba(6,7,10,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-left: 3px solid var(--acid); pointer-events: none; max-width: calc(100% - 28px); }
.stage-game .sg-k { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); line-height: 1.2; }
.stage-game .sg-n { font-family: var(--font-display, inherit); font-weight: 700; font-size: clamp(1rem, .85rem + .5vw, 1.3rem); color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .stage-game { top: 10px; left: 10px; padding: 6px 10px 7px 9px; } .stage-game .sg-n { font-size: .95rem; } }
@media (max-width: 560px) { .lh-s.run .lh-bg { background-position: 72% 0; background-size: auto 66%; background-color: #0b0820; background-repeat: no-repeat; } }

/* ================= Plinko + Keno: neon render look ================= */

.kn-city { background-image: url("assets/lobby/keno-bg.webp") !important; background-position: center 55%; filter: saturate(1.1) brightness(1); }
.kn-haze { background: radial-gradient(52% 46% at 50% 52%, rgba(6,5,16,.55), transparent 85%), linear-gradient(180deg, rgba(10,8,24,.1), transparent 40%, rgba(6,5,14,.4)) !important; }
/* Keno, lofi: soft blurred city, small frosted balls, muted colours */
.kn-city { filter: blur(2px) saturate(.85) brightness(.72) !important; inset: -6% !important; animation-duration: 120s !important; }
.kn-haze { background: radial-gradient(70% 60% at 50% 50%, rgba(10,8,26,.55), rgba(10,8,26,.25) 80%), linear-gradient(180deg, rgba(40,20,80,.25), rgba(8,6,18,.2) 45%, rgba(6,5,14,.55)) !important; }
.kn-rain, .kn-rain.r2, .kn-sign { display: none !important; }
.kn-wrap .kn, .kn-wrap .kn:hover:not(:disabled), .kn-wrap .kn.pick, .kn-wrap .kn.drawn, .kn-wrap .kn.hit, .kn-wrap .kn.pick.hit {
  background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kn-wrap .kn { position: relative; isolation: isolate; container-type: size; font-family: var(--font-body); font-weight: 600; color: rgba(232,234,255,.86); text-shadow: none; transition: color .35s ease; }
#view-keno .kn-grid .kn { font-family: var(--font-body); font-weight: 600; font-size: clamp(14px, calc(var(--avail, 800px) * .024), 22px); }
.kn-wrap .kn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; width: 74%; aspect-ratio: 1; max-height: 86%;
  width: min(80cqw, 84cqh); height: min(80cqw, 84cqh); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03) 45%, rgba(255,255,255,.015) 70%), rgba(18,16,40,.55);
  border: 1px solid rgba(190,195,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .45s ease, border-color .45s ease, box-shadow .6s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.kn-wrap .kn:hover:not(:disabled)::before { border-color: rgba(190,195,255,.4); transform: scale(1.04); }
.kn-wrap .kn.pick { color: #fff; }
.kn-wrap .kn.pick::before { border: 1.5px solid rgba(46,242,255,.75); background: radial-gradient(circle at 35% 30%, rgba(160,250,255,.22), rgba(46,242,255,.08) 60%), rgba(10,30,44,.6); box-shadow: 0 0 14px rgba(46,242,255,.18); }
.kn-wrap .kn.drawn { color: rgba(255,190,220,.75); }
.kn-wrap .kn.drawn::before { border-color: rgba(255,120,180,.32); background: radial-gradient(circle at 35% 30%, rgba(255,160,200,.1), rgba(255,46,136,.05) 60%), rgba(30,12,30,.55); }
.kn-wrap .kn.hit, .kn-wrap .kn.pick.hit { color: #10140a; }
.kn-wrap .kn.hit::before, .kn-wrap .kn.pick.hit::before { border: 1.5px solid rgba(225,255,150,.9); background: radial-gradient(circle at 35% 30%, #f1ffc4, #c8ff2e 55%, #9bd01a); box-shadow: 0 0 18px rgba(200,255,46,.35); transform: scale(1.04); }
@media all { .kn-wrap .kn.pop { animation: knPop .6s cubic-bezier(.2,.8,.2,1); } }
@keyframes knPop { 0% { transform: scale(.92); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.kn-wrap .kn:focus-visible { outline: none; } .kn-wrap .kn:focus-visible::before { outline: 2px solid var(--acid); outline-offset: 2px; }
/* drawn-ball rail */
.kn-wrap .kb { font-family: var(--font-body); font-weight: 600; background: rgba(30,14,32,.6); border: 1px solid rgba(255,120,180,.35); color: rgba(255,210,230,.9); box-shadow: none; }
.kn-wrap .kb.hit { background: radial-gradient(circle at 35% 30%, #f1ffc4, #c8ff2e 60%); border-color: rgba(225,255,150,.9); color: #10140a; box-shadow: 0 0 12px rgba(200,255,46,.3); }
.kn-wrap .kb.empty { background: none; border: 1px dashed rgba(190,195,255,.18); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .kn-wrap .kb:not(.empty) { animation: knIn .5s cubic-bezier(.2,.8,.2,1) both; } }
@keyframes knIn { from { opacity: 0; transform: translateY(-6px) scale(.9); } }
html.rm .kn-wrap .kb, html.rm .kn-wrap .kn.pop { animation: none !important; }

/* ================= Category pages ================= */
.cat-view { padding-bottom: 40px; }
.cv-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-2); min-height: clamp(220px, 30vh, 300px); display: flex; align-items: flex-end; margin: 4px 0 22px; background: #07060f; }
.cv-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--bg) center / cover no-repeat; }
.cv-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,5,8,.95) 0%, rgba(5,5,8,.75) 40%, rgba(5,5,8,.1) 80%), linear-gradient(0deg, rgba(5,5,8,.8), transparent 55%); }
#view-arcade .cv-hero::before { background-position: right center; }
.cv-copy { padding: clamp(22px, 4vw, 44px); max-width: 640px; }
.cv-copy h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.8rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; }
.cv-copy p:not(.lb-eye) { margin: 0 0 14px; color: rgba(255,255,255,.82); font-size: clamp(.95rem, .9rem + .25vw, 1.08rem); line-height: 1.5; max-width: 48ch; }
.cv-count { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(200,255,46,.45); color: var(--acid); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.cv-grid .lt { min-height: 280px; }
.cv-grid.g2 .lt { min-height: 340px; }
.cv-more { margin-top: 36px; display: flex; flex-direction: column; gap: 4px; }
.cv-more .lb-cats { margin-top: 6px; }
@media (max-width: 560px) { .cv-hero { min-height: 240px; } .cv-hero::after { background: linear-gradient(0deg, rgba(5,5,8,.95) 25%, rgba(5,5,8,.4) 75%); } .cv-grid .lt, .cv-grid.g2 .lt { min-height: 240px; } }
.cv-art { position: absolute; right: clamp(20px, 6vw, 90px); top: 50%; width: clamp(150px, 20vw, 250px); aspect-ratio: 1; object-fit: cover; border-radius: 16px; transform: translateY(-50%) rotate(4deg); box-shadow: 0 24px 60px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,200,80,.35), 0 0 50px -10px rgba(255,180,40,.45); z-index: 0; }
@media (max-width: 560px) { .cv-art { width: 120px; top: 18px; right: 16px; transform: rotate(4deg); } }
@media (hover: none) { .lt-play { background: var(--acid); color: var(--void); border-color: var(--acid); backdrop-filter: none; } }
.kn-fly { opacity: .45; filter: blur(.4px); }
@media (max-width: 700px) { .kn-wrap .kn::before { border-color: rgba(190,195,255,.26); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.04) 50%), rgba(18,16,40,.6); } }

/* ================= On-screen bet pod (Street + Run) ================= */
.hb { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,10,16,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-body); pointer-events: auto; transition: opacity .25s, transform .25s; }
.hb-l { font: 700 .58rem var(--font-mono, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--acid); line-height: 1; }
.hb-row { display: flex; align-items: center; gap: 6px; }
.hb-b { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: 700 1.05rem/1 var(--font-body); cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.hb-b:hover:not(:disabled) { border-color: var(--acid); background: rgba(200,255,46,.12); }
.hb-amt { min-width: 74px; text-align: center; font-size: 1.05rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.hb-q { display: flex; gap: 4px; }
.hb-q button { flex: 1; min-width: 0; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: none; color: rgba(255,255,255,.75); font: 600 .7rem var(--font-body); cursor: pointer; }
.hb-q button:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,.35); }
.hb button:disabled { opacity: .4; cursor: default; }
/* Street: lives in the dashboard next to RACE */
.rc-dash .hb { flex: none; margin-left: auto; }
.rc-dash .hb + .rc-ctl { margin-left: 0; }
.rc-dash .hb.lock { opacity: .7; }
/* Run: floats above the RUN button, only between runs */
.wr-hud .hb { position: absolute; left: 50%; bottom: 84px; translate: -50% 0; flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; }
.wr-hud .hb .hb-q button { width: 42px; height: 30px; flex: none; font-size: .78rem; }
.wr-hud .hb.lock { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (max-width: 760px) {
  .rc-dash .hb { order: 5; margin-left: 0; flex-direction: row; align-items: center; gap: 8px; padding: 4px 6px; }
  .rc-dash .hb .hb-l { display: none; }
  .rc-dash .hb .hb-b { width: 28px; height: 28px; }
  .rc-dash .hb .hb-q button { height: 28px; padding: 0 7px; }
}
@media (max-width: 560px) {
  .wr-hud .hb { bottom: 74px; gap: 6px; padding: 5px 7px; } .wr-hud .hb .hb-l { display: none; }
  .wr-hud .hb .hb-q button { width: 34px; height: 28px; } .wr-hud .hb .hb-b { width: 28px; height: 28px; } .hb-amt { min-width: 62px; font-size: .95rem; }
}
.rc-dash .hb { flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; }
.rc-dash .hb .hb-q button { width: 38px; height: 30px; flex: none; }
@media (max-width: 1240px) { .rc-dash .hb .hb-l { display: none; } .rc-dash .hb .hb-q button[data-hbq="0.5"] { display: none; } }
.rc-dash .hb.racing { display: none; }
/* Street: "To win" is the hero of the bet panel */
.rc-odds .rc-win { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px 14px;
  background: linear-gradient(100deg, rgba(200,255,46,.16), rgba(46,242,255,.08) 70%, rgba(200,255,46,.04)); border: 1px solid rgba(200,255,46,.6); box-shadow: 0 0 0 1px rgba(200,255,46,.12), 0 10px 30px -12px rgba(200,255,46,.55); }
.rc-odds .rc-win span { grid-row: 1 / 3; color: var(--acid); font-weight: 700; font-size: .72rem; letter-spacing: .16em; }
.rc-odds .rc-win b { justify-self: end; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.95rem); line-height: 1.05; color: #f4ffd6; text-shadow: 0 0 18px rgba(200,255,46,.55); display: inline-flex; align-items: center; gap: 6px; }
.rc-win-sub { justify-self: end; font-style: normal; font-size: .72rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.rc-odds .rc-win::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); animation: rcShine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes rcShine { 0%, 60% { left: -50%; } 100% { left: 120%; } }
.rc-odds .rc-win.bump b { animation: rcWinBump .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rcWinBump { 0% { transform: scale(.9); opacity: .6; } 60% { transform: scale(1.06); } 100% { transform: none; } }
html.rm .rc-odds .rc-win::after, html.rm .rc-odds .rc-win.bump b { animation: none; }
/* To win v2: display font, bigger, gradient numerals, rotating neon border, breathing glow */
.rc-odds .rc-win { border: 0; padding: 14px 16px; isolation: isolate; border-radius: 14px;
  background: linear-gradient(120deg, rgba(14,20,10,.96), rgba(8,14,20,.96)); animation: rcWinBreathe 3.2s ease-in-out infinite; }
.rc-odds .rc-win::before { content: ''; position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, #c8ff2e, #2ef2ff, #9b5cff, #ff2e88, #ffd23f, #c8ff2e); animation: rcWinSpin 6s linear infinite; }
.rc-odds .rc-win > * { position: relative; z-index: 1; }
.rc-odds .rc-win { --cut: 1.5px; }
.rc-odds .rc-win span::before { content: ''; }
.rc-odds .rc-win { box-shadow: 0 10px 34px -10px rgba(200,255,46,.55), 0 0 0 1px rgba(255,255,255,.06); }
/* inner panel sits above the spinning conic, leaving a thin glowing rim */
.rc-odds .rc-win > .rc-win-bg { display: none; }
.rc-odds .rc-win { background-clip: padding-box; }
.rc-odds .rc-win::after { z-index: 0; }
.rc-odds .rc-win { position: relative; }
.rc-odds .rc-win span { font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em; color: #e9ffb0; }
.rc-odds .rc-win b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem); letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(100deg, #f4ffd0 0%, #c8ff2e 45%, #2ef2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(200,255,46,.45)); }
.rc-odds .rc-win b .coin, .rc-odds .rc-win b i { width: .8em; height: .8em; }
.rc-win-sub { font-size: .76rem; color: rgba(235,255,210,.72); margin-top: 4px; }
@keyframes rcWinSpin { to { transform: rotate(360deg); } }
@keyframes rcWinBreathe { 0%, 100% { box-shadow: 0 10px 30px -12px rgba(200,255,46,.45), 0 0 0 1px rgba(255,255,255,.05); } 50% { box-shadow: 0 12px 44px -8px rgba(200,255,46,.8), 0 0 22px -4px rgba(46,242,255,.45); } }
html.rm .rc-odds .rc-win, html.rm .rc-odds .rc-win::before { animation: none; }
@property --rcw { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.rc-odds .rc-win::before { display: none; }
.rc-odds .rc-win { border: 1.5px solid transparent;
  background: linear-gradient(120deg, #0d1409, #081018) padding-box, conic-gradient(from var(--rcw), #c8ff2e, #2ef2ff, #9b5cff, #ff2e88, #ffd23f, #c8ff2e) border-box;
  animation: rcWinBreathe 3.2s ease-in-out infinite, rcWinRim 6s linear infinite; }
@keyframes rcWinRim { to { --rcw: 360deg; } }
html.rm .rc-odds .rc-win { animation: none; }
.rc-odds .rc-win span.amt { grid-row: auto; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.rc-odds .rc-win .rc-win-l { grid-row: 1 / 3; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: #e9ffb0; }
.rc-odds .rc-win b .amt { background: linear-gradient(100deg, #f4ffd0 0%, #c8ff2e 45%, #2ef2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-win-sub .amt { color: #e9ffb0; font-weight: 600; }
.rc-odds .rc-win b { filter: none; }
.rc-odds .rc-win b .amt { filter: drop-shadow(0 0 12px rgba(200,255,46,.35)); }
.rc-odds .rc-win b .coin { box-shadow: none; }
/* Header: give the categories room to breathe */
@media (min-width: 561px) {
  .nav { gap: clamp(2px, calc((100vw - 1000px) * .05), 26px) !important; margin-left: clamp(8px, 2vw, 32px); }
  .nav a, .nav-dd-b { padding-left: 12px !important; padding-right: 12px !important; font-size: var(--text-sm) !important; }
}
@media (min-width: 561px) and (max-width: 1180px) { .nav a, .nav-dd-b { padding-left: 8px !important; padding-right: 8px !important; } }
@media (min-width: 561px) and (max-width: 1020px) { .nav a, .nav-dd-b { padding-left: 6px !important; padding-right: 6px !important; font-size: .84rem !important; } }
.rc-odds .rc-win b .amt { filter: none !important; }

/* Keno: drawn numbers you didn't pick are clearly marked */
.kn-wrap .kn.drawn { color: #fff; }
.kn-wrap .kn.drawn::before { border: 1.5px solid #ff8cc0; background: radial-gradient(circle at 35% 30%, #ff9cc8, #ff3d8f 55%, #c41862); box-shadow: 0 0 14px rgba(255,61,143,.4); }
.kn-wrap .kb { background: radial-gradient(circle at 35% 30%, #ff9cc8, #ff3d8f 55%, #c41862); border-color: #ff8cc0; color: #fff; }
.kn-wrap .kn.pick::before { border: 2px solid #2ef2ff; background: radial-gradient(circle at 35% 30%, rgba(160,250,255,.35), rgba(46,242,255,.22) 55%, rgba(8,60,80,.85)); box-shadow: 0 0 14px rgba(46,242,255,.35); }
/* Keno drawn: middle ground, soft rose glass with a clear ring */
.kn-wrap .kn.drawn { color: #ffe6f1; }
.kn-wrap .kn.drawn::before { border: 1.5px solid rgba(255,150,195,.8); background: radial-gradient(circle at 35% 30%, rgba(255,190,220,.32), rgba(255,95,160,.24) 55%, rgba(90,24,60,.7)); box-shadow: 0 0 10px rgba(255,95,160,.18); }
.kn-wrap .kb { background: radial-gradient(circle at 35% 30%, rgba(255,190,220,.4), rgba(255,95,160,.3) 55%, rgba(90,24,60,.8)); border-color: rgba(255,150,195,.8); color: #fff; }
/* Keno drawn: just a red ring on the normal ball */
.kn-wrap .kn.drawn { color: #fff; }
.kn-wrap .kn.drawn::before { border: 2px solid #ff4d6d; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03) 45%, rgba(255,255,255,.015) 70%), rgba(18,16,40,.55); box-shadow: 0 0 8px rgba(255,77,109,.3); }
.kn-wrap .kb { background: rgba(18,16,40,.7); border: 2px solid #ff4d6d; color: #fff; box-shadow: none; }

/* ---------- WICK Arcade: Penalty Shootout, Neon Fishing, Stack Tower ---------- */
.ax-h2 { letter-spacing: .02em; }
.ax-shoot .ax-h2 { background: linear-gradient(100deg, #fff 0%, #c8ff2e 45%, #2ef2ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-fish .ax-h2 { background: linear-gradient(100deg, #fff 0%, #9fdcff 45%, #ff8fd0 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-stack .ax-h2 { background: linear-gradient(100deg, #fff 0%, #9a5cff 45%, #2ef2ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-shoot .wr-stage { border-color: rgba(46,242,255,.3); box-shadow: 0 0 0 1px rgba(200,255,46,.1), 0 24px 70px -24px rgba(46,242,255,.35); }
.ax-fish .wr-stage { border-color: rgba(140,170,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 70px -28px rgba(120,90,255,.35); }
.ax-stack .wr-stage { border-color: rgba(154,92,255,.32); box-shadow: 0 0 0 1px rgba(46,242,255,.08), 0 24px 70px -24px rgba(154,92,255,.4); }
.ax-ctl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: center; gap: 10px; align-items: end; }
.ax-ctl .wr-cash { min-width: min(320px, 100%); }
.st-ctl { display: grid; grid-template-columns: 96px minmax(0, 320px) 96px; justify-content: center; }
.st-ctl::after { content: ''; }
.st-drop:disabled { opacity: .35; cursor: default; }
.st-drop.on { border-color: rgba(154,92,255,.6); box-shadow: 0 0 22px -6px rgba(154,92,255,.8); }
.ax-ladder { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0 10px; }
.ax-step { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: 4px 8px 5px; border-radius: 10px; background: rgba(8,6,24,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .25s, background .25s, transform .25s; }
.ax-step small { font: 600 .58rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ax-step b { font-family: Satoshi, 'Chakra Petch', sans-serif; font-weight: 800; font-size: .86rem; color: rgba(255,255,255,.85); }
.ax-step.got { border-color: rgba(200,255,46,.55); background: rgba(200,255,46,.12); }
.ax-step.got b { color: #c8ff2e; }
.ax-step.next { border-color: rgba(255,255,255,.55); transform: translateY(-1px); box-shadow: 0 0 18px -6px rgba(255,255,255,.6); animation: axNext 1.6s ease-in-out infinite; }
@keyframes axNext { 50% { box-shadow: 0 0 22px -4px rgba(46,242,255,.7); border-color: rgba(46,242,255,.8); } }
#nfLadder .ax-step.next { border-color: var(--fc); box-shadow: 0 0 20px -6px var(--fc); animation: none; }
#nfLadder .ax-step.next b, #nfLadder .ax-step.got b { color: var(--fc); }
#nfLadder .ax-step.got { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }
.ax-fish .wr-mult { font-style: normal; }
.ax-fish .wr-cash.live { background: linear-gradient(100deg, #7ad8ff, #c8ff2e); color: #06121a; }
.ax-stack .wr-cash.live, .ax-stack .wr-go.live { background: linear-gradient(100deg, #9a5cff, #2ef2ff); color: #fff; }
.ax-shoot .wr-cash.live, .ax-shoot .wr-go.live { background: linear-gradient(100deg, #c8ff2e, #2ef2ff); color: #061016; }
@media (prefers-reduced-motion: reduce) { .ax-step.next { animation: none; } }
@media (max-width: 760px) {
  .ax-shoot .wr-stage { height: clamp(420px, 112vw, 520px); }
  .ax-stack .wr-stage { height: clamp(420px, 118vw, 560px); }
  .ax-ctl { left: 8px; right: 8px; bottom: 8px; }
  .st-ctl { grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 6px; }
  .ax-step { min-width: 0; padding: 3px 6px 4px; }
  .ax-step small { font-size: .52rem; }
  .ax-step b { font-size: .74rem; }
  .ax-ladder { gap: 4px; margin-top: 6px; }
}
.lt-grid.arc5 { grid-template-columns: repeat(6, 1fr); }
.lt-grid.arc5 .lt.wide { grid-column: span 3; }
.lt-grid.arc5 .lt:not(.wide) { grid-column: span 2; min-height: 250px; }
@media (max-width: 1000px) { .lt-grid.arc5 { grid-template-columns: repeat(2, 1fr); } .lt-grid.arc5 .lt.wide, .lt-grid.arc5 .lt:not(.wide) { grid-column: span 1; } .lt-grid.arc5 .lt:last-child { grid-column: span 2; } }
@media (max-width: 640px) { .lt-grid.arc5 { grid-template-columns: 1fr; } .lt-grid.arc5 .lt:last-child { grid-column: span 1; } }
.ax-wrap .wr-keys { top: auto; bottom: 26px; right: 16px; }
@media (max-width: 1100px) { .ax-wrap .wr-keys { display: none; } }
.ax-wrap .wr-keys { top: 14px; bottom: auto; left: 16px; right: auto; }
.ax-wrap .rc-title { min-width: 0; }
@media (max-width: 560px) { .ax-wrap .rc-title h2 { font-size: clamp(1.15rem, 0.6rem + 3.6vw, 1.6rem); letter-spacing: .04em; } .ax-wrap .rc-head { align-items: flex-start; } .ax-wrap .rc-head-r { flex: none; } }
@media (max-width: 360px) { .ax-wrap .rc-tier span { font-size: .72rem; letter-spacing: 0; } .ax-wrap .rc-tier { padding-left: 2px; padding-right: 2px; min-width: 0; } .ax-wrap .rc-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Stack Tower on-screen buttons: DROP is the big action, CASH OUT sits beside it */
.st-ctl, .st-ctl.two { display: flex; grid-template-columns: none; justify-content: center; gap: 10px; }
.st-ctl::after { content: none; }
.st-ctl .wr-cash { min-width: 0; flex: 0 1 320px; }
.st-ctl.two .wr-cash { flex: 0 1 260px; }
.st-ctl .wr-cash[hidden] { display: none; }
.st-dropb { background: linear-gradient(100deg, #9a5cff, #2ef2ff) !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 10px 34px -8px rgba(154,92,255,.85) !important; }
.st-dropb:active { transform: translateY(1px) scale(.99); }
.ax-stack .wr-cash.live { background: linear-gradient(100deg, #c8ff2e, #2ef2ff); color: #061016; }
/* DROP is the main button; CASH OUT is the smaller secondary button beside it */
.st-ctl.two { align-items: center; }
.st-ctl.two .st-dropb { order: 1; flex: 0 1 300px; height: 62px; font-size: 1.05rem; }
.st-ctl.two .st-cashb { order: 2; flex: 0 1 190px; height: 50px; font-size: .78rem; letter-spacing: .04em; animation: none; background: rgba(8,6,24,.72) !important; color: #c8ff2e !important; border: 1.5px solid rgba(200,255,46,.7); box-shadow: 0 0 18px -6px rgba(200,255,46,.7) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-direction: column; gap: 0; line-height: 1.15; }
.st-ctl.two .st-cashb b { font-size: .92rem; color: #fff; }
.st-ctl.two .st-cashb:hover { background: rgba(200,255,46,.14) !important; }
@media (max-width: 560px) { .st-ctl.two .st-dropb { flex: 1 1 58%; } .st-ctl.two .st-cashb { flex: 1 1 42%; font-size: .66rem; } .st-ctl.two .st-cashb b { font-size: .8rem; } }
/* Neon Fishing tension gauge */
.nf-ten { position: absolute; left: 16px; top: 50%; transform: translateY(-40%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 14px; background: rgba(8,6,24,.5); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; pointer-events: none; }
.nf-ten.on { opacity: 1; }
.nf-ten-l { font: 600 .56rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.nf-ten-bar { position: relative; width: 12px; height: 150px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.nf-ten-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 8px; background: linear-gradient(0deg, #2ef2ff 0%, #c8ff2e 45%, #ffb02e 72%, #ff4d6d 100%); background-size: 100% 150px; background-position: bottom; transition: height .12s linear; box-shadow: 0 0 14px rgba(200,255,46,.5); }
.nf-ten.warm .nf-ten-bar i { box-shadow: 0 0 16px rgba(255,176,46,.6); }
.nf-ten.hot .nf-ten-bar { animation: nfHot .5s ease-in-out infinite; }
.nf-ten.hot .nf-ten-bar i { box-shadow: 0 0 18px rgba(255,77,109,.8); }
@keyframes nfHot { 50% { transform: translateX(1.5px); } }
.nf-ten b { font-size: .8rem; color: #fff; }
@media (max-width: 760px) { .nf-ten { left: 8px; padding: 8px 6px; } .nf-ten-bar { height: 96px; width: 10px; } .nf-ten-l { font-size: .5rem; } .nf-ten b { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .nf-ten.hot .nf-ten-bar { animation: none; } }
/* arcade "To win" box: same look as Street */
.rc-odds.ax-odds { grid-template-columns: 1fr; margin-top: 10px; }
.ax-odds .rc-win-sub { white-space: normal; text-align: right; }
.ax-odds .rc-win .rc-win-l { max-width: 3.4em; line-height: 1.25; white-space: normal; }
.ax-odds .rc-win b { min-width: 0; font-size: clamp(1.55rem, 1.05rem + 1.1vw, 2.4rem); }
.ax-step.red { border-color: rgba(255,154,168,.45); color: #ff9aa8; }
.ax-step.red.got { background: rgba(255,154,168,.14); border-color: #ff9aa8; color: #ffd0d6; }
/* Stack: once a tower is going, DROP sits in a fixed centre slot and never moves; CASH OUT appears in the slot to its right */
.st-ctl.play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 12px; justify-content: stretch; }
.st-ctl.play .st-dropb { grid-column: 2; grid-row: 1; order: 0; width: 100%; height: 62px; font-size: 1.05rem; flex: none; }
.st-ctl.play .st-cashb { grid-column: 3; grid-row: 1; order: 0; justify-self: start; width: 100%; max-width: 200px; flex: none; }
@media (max-width: 560px) {
  .st-ctl.play { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 8px; }
  .st-ctl.play .st-dropb { grid-column: 1; }
  .st-ctl.play .st-cashb { grid-column: 2; max-width: none; }
}
.st-ctl.play { grid-template-rows: 62px; }
.st-ctl.play .st-cashb { white-space: nowrap; overflow: hidden; }
@media (max-width: 380px) { .st-ctl.play .st-cashb { font-size: .58rem; letter-spacing: .02em; padding: 0 6px; } .st-ctl.play .st-cashb b { font-size: .72rem; } }
/* Sportsbook header dropdown: grouped by sport, two columns */
.nav-sp-m { grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 4px 8px; padding: 10px; max-height: min(78vh, 620px); overflow-y: auto; }
.nav-sp-m .nav-sp-all { grid-column: 1 / -1; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.nav-sp-g { display: grid; gap: 2px; align-content: start; }
.nav-sp-h { margin: 6px 10px 2px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); opacity: .85; }
.nav-sp-live { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255,59,92,.16); color: #ff8fa3; border: 1px solid rgba(255,59,92,.4); }
.nav-sp-live[hidden] { display: none; }
@media (max-width: 560px) { .nav-sp-m { grid-template-columns: 1fr; min-width: 0; width: calc(100vw - 16px); } }
/* phone sport picker on the board */
.sp-sportpick { display: none; }
@media (max-width: 900px) {
  .sp-sportpick { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); margin-bottom: 8px; }
  .sp-sportpick span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); }
  .sp-sportpick select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23c8ff2e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center / 12px; border: 0; color: var(--bone); font: 600 15px var(--font-body); padding: 6px 22px 6px 0; }
  .sp-sportpick select option { background: #0d0e12; color: #fff; }
}
@media (max-width: 900px) { .sp-leagues { display: none; } }
.nav-sp-m .nav-sp-g:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.nav-sp-m .nav-sp-g:last-child .nav-sp-h { grid-column: 1 / -1; }
@media (max-width: 560px) { .nav-sp-m .nav-sp-g:last-child { grid-template-columns: 1fr; } }
/* arcade bonuses */
.wr-sub b.gold { color: #ffd76a; letter-spacing: .06em; text-shadow: 0 0 10px rgba(255,200,80,.6); }
.ax-step.gold { border-color: rgba(255,215,106,.55); color: #ffd76a; }
.ax-step.gold.got { background: rgba(255,215,106,.16); border-color: #ffd76a; color: #fff3c4; }
.ax-step.safe { border-color: rgba(120,220,255,.55); }
.ax-step.safe small { color: #9fe8ff; letter-spacing: .08em; }
.wr-bb small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* top menu: whatever you're pointing at lights up acid green, so it's clear what you're about to pick */
.nav a, .nav-dd-b, .nav-dd-m a, .nav-dd-m a b, .nav-dd-m a small { transition: color .15s, background .15s, box-shadow .15s; }
.nav > a:hover, .nav > a:focus-visible, .nav-dd-b:hover, .nav-dd-b:focus-visible, .nav-dd-b[aria-expanded="true"] { color: var(--acid) !important; background: rgba(200,255,46,.08) !important; text-shadow: 0 0 12px rgba(200,255,46,.35); }
.nav-dd-b:hover svg, .nav-dd-b[aria-expanded="true"] svg { color: var(--acid); }
.nav-dd-m a:hover, .nav-dd-m a:focus-visible { background: rgba(200,255,46,.09) !important; box-shadow: inset 2px 0 0 var(--acid); }
.nav-dd-m a:hover b, .nav-dd-m a:focus-visible b, .nav-dd-m a:hover > span:not(.pill):not(.nav-sp-live) { color: var(--acid) !important; }
.nav-dd-m a:hover small, .nav-dd-m a:focus-visible small { color: var(--bone); }

/* ================= WICK social: header, rewards, store, tournaments, plaza, studio ================= */
.hx-rew { position: relative; width: 40px; height: 40px; flex: 0 0 40px; border: 0; padding: 0; background: none; cursor: pointer; color: var(--bone); border-radius: 50%; }
.hx-rew:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.hx-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring circle { fill: none; stroke-width: 3; }
.hx-ring .t { stroke: var(--line-2); }
.hx-ring .p { stroke: var(--acid); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .6s var(--ease); filter: drop-shadow(0 0 4px rgba(200,255,46,.6)); }
.hx-lv { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.hx-dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px var(--void), 0 0 10px var(--signal); animation: hxPulse 1.8s ease-in-out infinite; }
.hx-dot[hidden] { display: none; }
@keyframes hxPulse { 50% { transform: scale(1.25); } }
.hx-coins { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: var(--acid); color: var(--void); font-weight: 700; font-size: var(--text-xs); text-decoration: none; white-space: nowrap; transition: box-shadow .2s; }
.hx-coins:hover { box-shadow: 0 0 20px rgba(200,255,46,.5); }
.nav-on { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: .62rem; background: rgba(46,242,255,.14); color: var(--plasma); }
.nav-on[hidden] { display: none; }
@media (max-width: 560px) { .hx-coins span { display: none; } .hx-coins { padding: 8px; } .hx-rew { width: 34px; height: 34px; flex-basis: 34px; } }

/* dialogs */
.sx-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, #12131a, #0a0b10); color: var(--bone); box-shadow: 0 40px 120px -30px rgba(140,107,255,.45), 0 0 0 1px rgba(46,242,255,.06); }
.sx-dlg::backdrop { background: rgba(3,3,6,.72); backdrop-filter: blur(6px); }
.sx-dlg[open] { animation: sxIn .28s var(--ease); }
@keyframes sxIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.sx-x { position: absolute; top: 12px; right: 12px; z-index: 6; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font-size: 1.3rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.sx-x::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.sx-x > * { pointer-events: none; }
.sx-x:hover { border-color: var(--acid); }
.sx-eye { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--plasma); margin: 0 0 6px; }
.sx-h { font-size: 1.05rem; margin: 22px 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sx-lvhead { display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.sx-lvnum { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.sx-lvnum span { font-size: .65rem; color: var(--steel); text-transform: uppercase; letter-spacing: .14em; }
.sx-lvnum b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--acid); text-shadow: 0 0 18px rgba(200,255,46,.45); }
.sx-lvbar { flex: 1; min-width: 0; }
.sx-lvtxt { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; margin-bottom: 8px; flex-wrap: wrap; }
.sx-unl { margin: 8px 0 0; color: var(--steel-2); } .sx-unl b { color: var(--plasma); }
.sx-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sx-bar.sm { height: 6px; margin-top: 6px; }
.sx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--plasma), var(--acid)); box-shadow: 0 0 12px rgba(200,255,46,.5); transition: width .5s var(--ease); }
.sx-streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sx-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.sx-day span { font-size: .6rem; color: var(--steel); }
.sx-day b { font-family: var(--font-mono); font-size: .82rem; }
.sx-day.got { border-color: rgba(200,255,46,.35); background: rgba(200,255,46,.06); }
.sx-day.got b { color: var(--acid); }
.sx-day i { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: .65rem; color: var(--acid); }
.sx-day.next { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid), 0 0 22px -4px rgba(200,255,46,.6); animation: sxGlow 2s ease-in-out infinite; }
.sx-day.big { background: linear-gradient(160deg, rgba(255,201,74,.16), rgba(140,107,255,.12)); border-color: rgba(255,201,74,.45); }
.sx-day.big b { color: #FFC94A; }
@keyframes sxGlow { 50% { box-shadow: 0 0 0 1px var(--acid), 0 0 30px -2px rgba(200,255,46,.8); } }
.sx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sx-row2 .btn { width: 100%; white-space: nowrap; min-width: 0; }
.sx-row2 .btn:disabled { opacity: .55; cursor: default; }
.sx-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-quests li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.sx-quests li b { font-size: .9rem; font-weight: 600; }
.sx-quests li small { display: block; font-size: .72rem; }
.sx-quests li.ok { border-color: rgba(200,255,46,.35); }
.sx-quests li.ok b { color: var(--steel-2); text-decoration: line-through; text-decoration-color: rgba(200,255,46,.6); }
.sx-qr { font-size: .75rem; color: var(--steel-2); }
.sx-qc { font-family: var(--font-mono); font-size: .8rem; color: var(--acid); white-space: nowrap; }
.sx-chest { background: linear-gradient(120deg, rgba(140,107,255,.14), rgba(46,242,255,.06)) !important; border-color: rgba(140,107,255,.4) !important; }
.sx-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.sx-dl { margin: 14px 0; display: grid; gap: 8px; }
.sx-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); }
.sx-dl dt { color: var(--steel); font-size: .85rem; } .sx-dl dd { margin: 0; font-size: .85rem; text-align: right; }
.sx-buy h2 { font-family: var(--font-mono); font-size: 2rem; color: var(--acid); margin: 0; }

/* toasts and level up */
.sx-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.sx-toast { display: grid; gap: 2px; min-width: 220px; max-width: min(340px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; background: rgba(14,15,20,.94); border: 1px solid var(--line-2); border-left: 3px solid var(--plasma); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s var(--ease); font-size: .85rem; }
.sx-toast.on { opacity: 1; transform: none; }
.sx-toast b { font-weight: 700; } .sx-toast span { color: var(--steel-2); } .sx-toast em { font-style: normal; font-family: var(--font-mono); color: var(--acid); }
.sx-toast.good { border-left-color: var(--acid); } .sx-toast.gold { border-left-color: #FFC94A; } .sx-toast.gold em { color: #FFC94A; } .sx-toast.warn { border-left-color: var(--signal); } .sx-toast.feed { border-left-color: var(--ultra); }
.sx-lvl { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: radial-gradient(circle, rgba(200,255,46,.12), rgba(3,3,6,.6) 60%); animation: sxFade .3s ease; cursor: pointer; }
.sx-lvl.out { opacity: 0; transition: opacity .5s; }
.sx-lvl-ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 2px solid var(--acid); box-shadow: 0 0 60px rgba(200,255,46,.5), inset 0 0 40px rgba(46,242,255,.3); animation: sxRing 1.4s var(--ease) both; }
.sx-lvl-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sx-lvl-box p { margin: 0; letter-spacing: .3em; text-transform: uppercase; color: var(--plasma); font-size: .8rem; }
.sx-lvl-box b { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--acid); text-shadow: 0 0 40px rgba(200,255,46,.7); }
.sx-lvl-box span { font-family: var(--font-mono); font-size: 1.2rem; }
.sx-lvl-box small { color: var(--steel-2); max-width: 30ch; }
@keyframes sxRing { from { transform: scale(.3); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1.1); } }
@keyframes sxFade { from { opacity: 0; } }

/* social views */
.sx-view { padding-bottom: 40px; }
.sx-hero { min-height: clamp(220px, 28vh, 280px); }
.sx-lgrid .lt { min-height: 260px; }

/* store */
.st2 { display: grid; gap: 30px; }
.st2 h2 { font-size: 1.4rem; margin: 0; }
.st2-free { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(140deg, rgba(200,255,46,.06), rgba(46,242,255,.03) 50%, transparent), var(--surface); }
.st2-free-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.st2-free-h p { margin: 0; font-size: .9rem; }
.st2-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.st2-first { padding: 5px 11px; border-radius: 999px; background: rgba(255,201,74,.12); border: 1px solid rgba(255,201,74,.45); color: #FFC94A; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.st2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st2-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: radial-gradient(120% 80% at 50% 0%, rgba(140,107,255,.14), transparent 60%), var(--surface); text-align: center; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.st2-b:hover { transform: translateY(-3px); border-color: rgba(200,255,46,.5); box-shadow: 0 20px 50px -24px rgba(200,255,46,.4); }
.st2-b.tagged { border-color: rgba(200,255,46,.55); }
.st2-b.t6 { background: radial-gradient(120% 80% at 50% 0%, rgba(255,201,74,.18), transparent 60%), var(--surface); border-color: rgba(255,201,74,.4); }
.st2-tag { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px; background: var(--acid); color: var(--void); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.st2-art { position: relative; height: 64px; width: 90px; margin-bottom: 6px; }
.st2-art i { position: absolute; left: 50%; bottom: 0; width: 46px; height: 12px; margin-left: -23px; border-radius: 50%; background: linear-gradient(180deg, #E8FF8A, var(--acid) 50%, #7FA312); box-shadow: 0 2px 0 #556E0A, 0 0 14px rgba(200,255,46,.35); }
.st2-art i:nth-child(2) { bottom: 9px; margin-left: -18px; } .st2-art i:nth-child(3) { bottom: 18px; margin-left: -26px; } .st2-art i:nth-child(4) { bottom: 27px; margin-left: -21px; } .st2-art i:nth-child(5) { bottom: 36px; margin-left: -24px; } .st2-art i:nth-child(6) { bottom: 45px; margin-left: -20px; }
.st2-b.t6 .st2-art i { background: linear-gradient(180deg, #FFF0B8, #FFC94A 50%, #A87A10); box-shadow: 0 2px 0 #7A570A, 0 0 16px rgba(255,201,74,.45); }
.st2-c { margin: 0; font-size: 1.35rem; font-weight: 700; }
.st2-sub { margin: 0 0 10px; }
.st2-buy { width: 100%; margin-top: auto; font-family: var(--font-mono); font-size: 1rem; }
.st2-test { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px dashed rgba(46,242,255,.4); color: var(--steel-2); }
.st2-test b { color: var(--plasma); }
.st2-lim { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.st2-lim h2 { font-size: 1.1rem; } .st2-lim p { margin: 4px 0 0; }
.st2-sel select { appearance: none; padding: 10px 36px 10px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23C8FF2E' stroke-width='1.8'/%3E%3C/svg%3E") right 12px center no-repeat; color: var(--bone); font: 600 .9rem var(--font-body); cursor: pointer; }
.st2-fine { margin: 0; text-align: center; }
@media (max-width: 760px) { .st2-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .st2-b { padding: 18px 10px 12px; } .st2-c { font-size: 1.1rem; } }

/* tournaments */
.tb-per { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.tb-pt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s, background .2s; }
.tb-pt b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.tb-pt small { font-size: .7rem; color: var(--steel); }
.tb-pt:hover { border-color: rgba(140,107,255,.6); }
.tb-pt.on { border-color: var(--ultra); background: linear-gradient(140deg, rgba(140,107,255,.2), rgba(46,242,255,.05)); box-shadow: 0 0 30px -10px rgba(140,107,255,.7); }
.tb-pt.on small { color: var(--plasma); }
.tb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px; }
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--steel-2); font: 600 .85rem var(--font-body); cursor: pointer; white-space: nowrap; }
.tb-tab:hover { color: var(--bone); border-color: var(--steel); }
.tb-tab.on { background: var(--acid); border-color: var(--acid); color: var(--void); }
.tb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.tb-board { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.tb-board header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tb-board h2 { font-size: 1.3rem; margin: 0; }
.tb-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.tb-list li { display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.tb-list li:nth-child(even) { background: rgba(255,255,255,.02); }
.tb-list li.me { background: rgba(46,242,255,.08); box-shadow: inset 0 0 0 1px rgba(46,242,255,.35); }
.tb-list img, .tb-av { width: 34px; height: 34px; border-radius: 50%; display: block; background: var(--surface-2); }
.tb-rk { text-align: center; font-weight: 700; color: var(--steel-2); }
.tb-list li.t1 .tb-rk { color: #FFC94A; text-shadow: 0 0 12px rgba(255,201,74,.6); } .tb-list li.t2 .tb-rk { color: #D9DDE3; } .tb-list li.t3 .tb-rk { color: #E19A5B; }
.tb-list li.t1 img { box-shadow: 0 0 0 2px #FFC94A; } .tb-list li.t2 img { box-shadow: 0 0 0 2px #D9DDE3; } .tb-list li.t3 img { box-shadow: 0 0 0 2px #E19A5B; }
.tb-nm { min-width: 0; display: flex; flex-direction: column; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-nm small { font-size: .66rem; color: var(--steel); font-weight: 500; }
.tb-sc { font-weight: 700; }
.tb-pz { min-width: 72px; text-align: right; font-family: var(--font-mono); font-size: .8rem; color: var(--acid); }
.tb-list li.tb-off, .tb-list li.tb-load { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; }
.tb-off span { color: var(--steel-2); font-size: .88rem; }
.tb-load .sk { display: block; width: 100%; height: 40px; border-radius: 10px; background: linear-gradient(90deg, var(--surface-2), #1c1f27, var(--surface-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.tb-side { display: grid; gap: 14px; }
.tb-mine, .tb-card { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.tb-mine { border-color: rgba(46,242,255,.35); background: linear-gradient(160deg, rgba(46,242,255,.08), transparent 60%), var(--surface); }
.tb-mine > p:first-child { margin: 0 0 10px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.tb-mine-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tb-mine-n div { display: flex; flex-direction: column; }
.tb-mine-n b { font-family: var(--font-mono); font-size: 1.3rem; color: var(--plasma); }
.tb-mine-n span { font-size: .7rem; color: var(--steel); }
.tb-mine [data-my="note"] { margin: 10px 0 0; }
.tb-card h3 { font-size: 1rem; margin: 0 0 10px; }
.tb-card p { margin: 10px 0 0; color: var(--steel-2); }
.tb-prizes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tb-prizes li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.025); font-size: .85rem; }
.tb-prizes li:first-child { background: rgba(255,201,74,.1); } .tb-prizes li:first-child b { color: #FFC94A; }
.tb-prizes b { font-family: var(--font-mono); }
@media (max-width: 900px) { .tb-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tb-list li { grid-template-columns: 26px 30px minmax(0, 1fr) auto; gap: 8px; } .tb-pz { display: none; } .tb-list img, .tb-av { width: 30px; height: 30px; } .tb-pt { padding: 10px 12px; } .tb-pt small { font-size: .62rem; } }

/* plaza */
.pz { padding-bottom: 30px; }
.pz-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin: 6px 0 14px; }
.pz-top h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); margin: 0; }
.pz-stat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pz-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(200,255,46,.35); font-size: .82rem; }
.pz-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); animation: hxPulse 1.6s ease-in-out infinite; }
.pz-live[data-state="local"] i, .pz-live[data-state="off"] i { background: var(--steel); box-shadow: none; animation: none; }
.pz-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.pz-stage { position: relative; height: clamp(420px, 68vh, 760px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: #05050a; box-shadow: 0 30px 80px -40px rgba(46,242,255,.35); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pz-stage canvas#pzCv { display: block; width: 100%; height: 100%; }
.pz-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(6,7,12,.8); border: 1px solid var(--line-2); font-size: .82rem; white-space: nowrap; pointer-events: none; transition: opacity .5s; }
.pz-hint.gone { opacity: 0; }
.pz-prompt { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(6,7,12,.88); border: 1px solid rgba(200,255,46,.55); box-shadow: 0 0 30px -6px rgba(200,255,46,.5); font-weight: 700; white-space: nowrap; animation: sxIn .25s var(--ease); }
.pz-prompt[hidden] { display: none; }
.pz-emotes { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(6,7,12,.8); border: 1px solid var(--line-2); backdrop-filter: blur(8px); }
.pz-emotes button { padding: 7px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--bone); font: 600 .8rem var(--font-body); cursor: pointer; }
.pz-emotes button:hover { background: var(--surface-2); color: var(--acid); }
.pz-mini { position: absolute; top: 12px; right: 12px; width: 140px; height: 87px; border-radius: 10px; border: 1px solid var(--line-2); opacity: .9; pointer-events: none; }
.pz-card { position: absolute; z-index: 3; width: 220px; padding: 12px; border-radius: 14px; background: rgba(12,13,18,.96); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -16px rgba(0,0,0,.8); display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.pz-card[hidden] { display: none; }
.pz-card img { border-radius: 50%; }
.pz-card b { display: block; } .pz-card small { color: var(--steel); }
.pz-card-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pz-card-b .btn { flex: 1 1 auto; padding: 7px 10px; }
.pz-side { display: flex; flex-direction: column; min-height: 0; height: clamp(420px, 68vh, 760px); border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.pz-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.pz-tabs button { padding: 12px 6px; border: 0; background: transparent; color: var(--steel-2); font: 600 .85rem var(--font-body); cursor: pointer; border-bottom: 2px solid transparent; }
.pz-tabs button.on { color: var(--bone); border-bottom-color: var(--acid); }
.pz-tabs button span { color: var(--plasma); font-size: .72rem; }
.pz-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pz-pane[hidden] { display: none; }
.pz-log { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; line-height: 1.4; }
.pz-log li { overflow-wrap: anywhere; }
.pz-log b { color: var(--plasma); font-weight: 700; margin-right: 4px; }
.pz-log li.me b { color: var(--acid); }
.pz-log li.sys { color: var(--steel); font-size: .78rem; }
.pz-log li.win { color: #FFC94A; font-size: .8rem; padding: 5px 9px; border-radius: 8px; background: rgba(255,201,74,.08); }
.pz-say, .pz-add { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.pz-add { border-top: 0; border-bottom: 1px solid var(--line); }
.pz-say input, .pz-add input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: 500 .88rem var(--font-body); }
.pz-say input:focus, .pz-add input:focus { outline: none; border-color: var(--plasma); }
.pz-say input:disabled { opacity: .6; }
.pz-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px; display: grid; align-content: start; gap: 4px; }
.pz-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.pz-list li:hover { background: rgba(255,255,255,.03); }
.pz-list li.me { background: rgba(46,242,255,.06); }
.pz-list img { border-radius: 50%; }
.pz-list span { min-width: 0; display: flex; flex-direction: column; }
.pz-list b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-list b i { font-style: normal; font-size: .64rem; color: var(--steel); margin-left: 4px; }
.pz-list small { font-size: .72rem; color: var(--steel); } .pz-list small.on { color: var(--acid); }
.pz-list li.empty { display: block; color: var(--steel); font-size: .85rem; padding: 14px; }
.pz-rm { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--steel); cursor: pointer; }
.pz-rm:hover { color: var(--signal); border-color: var(--signal); }
.pz-foot { margin: 10px 2px 0; }
@media (max-width: 980px) { .pz-wrap { grid-template-columns: 1fr; } .pz-side { height: 380px; } }
@media (max-width: 560px) { .pz-stage { height: 64vh; min-height: 400px; } .pz-mini { width: 104px; height: 65px; } .pz-emotes button { padding: 7px 9px; font-size: .74rem; } .pz-hint { font-size: .74rem; white-space: normal; width: max-content; max-width: calc(100% - 140px); left: 12px; transform: none; } .pz-prompt { bottom: 62px; } }

/* avatar studio */
.sx-studio { width: min(980px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.sd-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); max-height: calc(100dvh - 32px); }
.sd-prev { padding: 26px; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(90% 60% at 50% 70%, rgba(46,242,255,.1), transparent 70%), #08090e; border-right: 1px solid var(--line); }
.sd-prev h2 { margin: 0; font-size: 1.6rem; }
.sd-prev canvas { width: 260px; height: 300px; max-width: 100%; align-self: center; }
.sd-act { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.sd-prev p.small { margin: 0; }
.sd-opts { overflow-y: auto; padding: 22px 26px 26px; display: grid; gap: 18px; align-content: start; }
.sd-row h3 { font-size: .78rem; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-2); margin: 0 0 8px; font-weight: 600; }
.sd-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-t { position: relative; border: 1px solid var(--line-2); background: var(--surface); border-radius: 12px; cursor: pointer; padding: 0; color: var(--bone); transition: border-color .2s, box-shadow .2s, transform .15s; }
.sd-t:hover { border-color: var(--steel); transform: translateY(-1px); }
.sd-t.on { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid), 0 0 18px -4px rgba(200,255,46,.6); }
.sd-tiles.sw .sd-t { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.sd-tiles.sw .sd-t i { width: 28px; height: 28px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.sd-tiles.av .sd-t { width: 76px; display: flex; flex-direction: column; align-items: center; padding: 4px 4px 6px; }
.sd-tiles.av .sd-t img { width: 56px; height: 56px; display: block; }
.sd-n { font-size: .66rem; color: var(--steel-2); line-height: 1.2; text-align: center; }
.sd-t.lk img, .sd-t.lk i { opacity: .4; filter: grayscale(.6); }
.sd-lock { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; background: #1b1d26; border: 1px solid var(--line-2); font-size: .58rem; white-space: nowrap; color: var(--plasma); }
.sd-tiles.av .sd-lock { top: 4px; bottom: auto; }
.sd-lock .coin { width: 9px; height: 9px; }
.sd-tiles.sw { row-gap: 14px; }
@media (max-width: 760px) { .sd-grid { grid-template-columns: 1fr; overflow-y: auto; } .sd-prev { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 18px; } .sd-prev canvas { width: 180px; height: 208px; } .sd-opts { overflow: visible; padding: 18px; } .sd-tiles.av .sd-t { width: 68px; } }
.hx-tr { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ultra); background: var(--surface); transition: border-color .2s, box-shadow .2s, color .2s; }
.hx-tr:hover, .hx-tr.active { color: var(--bone); border-color: var(--ultra); box-shadow: 0 0 18px -4px rgba(140,107,255,.8); }
.nav a.nav-tr { display: none; }
@media (max-width: 560px) { .nav a.nav-tr { display: inline-flex; } .hx-tr { display: none; } }
@media (min-width: 561px) and (max-width: 1300px) { .topbar { gap: 14px; } .wallet { gap: 8px; } }
.hx-coins, .hx-rew, .hx-tr { flex-shrink: 0; } .hx-coins svg { flex-shrink: 0; width: 14px; height: 14px; }
.sx-dlg { margin: auto; inset: 0; position: fixed; }
@media (hover: none) { .pz-foot { display: none; } }
.tb-list { grid-template-columns: minmax(0, 1fr); } .tb-list > li { width: 100%; box-sizing: border-box; }
.tb-list > li, .pz-list > li, .pz-log > li, .sx-quests > li, .tb-prizes > li, .st2 p, .sx-dlg p { max-width: none; }

/* ================= VIP ================= */
.lt-grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .lt-grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lt-grid.g4 { grid-template-columns: 1fr; } }
.vp-lt .lt-tag { background: #FFC94A; color: var(--void); }
.vp-lt:hover { border-color: rgba(255,201,74,.55); }
.hx-rew[data-vp="1"]::after, .hx-rew[data-vp="2"]::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #FFC94A; box-shadow: 0 0 10px rgba(255,201,74,.45); pointer-events: none; }
.hx-rew[data-vp="2"]::after { border-color: var(--acid); box-shadow: 0 0 10px rgba(200,255,46,.45); }

.vp-badge { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-family: var(--font-mono); font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; border: 1px solid currentColor; background: rgba(255,255,255,.04); }
.vp-badge.t1 { color: #D3DAE3; } .vp-badge.t2 { color: #FFC94A; } .vp-badge.t3 { color: #9FF4FF; } .vp-badge.t4 { color: var(--acid); background: rgba(200,255,46,.08); }
.vp-badge.p1 { color: #FFC94A; } .vp-badge.p2 { color: var(--acid); }
.st2-vipb { color: #FFC94A; font-weight: 700; }

/* store strip */
.vp-strip { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid rgba(255,201,74,.35); background: linear-gradient(110deg, rgba(255,201,74,.10), rgba(140,107,255,.06) 55%, transparent), var(--surface); color: var(--bone); text-decoration: none; transition: border-color .2s, transform .2s; }
.vp-strip:hover { border-color: rgba(255,201,74,.7); transform: translateY(-2px); }
.vp-strip-ic { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #FFC94A; background: rgba(255,201,74,.1); border: 1px solid rgba(255,201,74,.35); }
.vp-strip-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-strip-t b { font-size: 1rem; } .vp-strip-t small { color: var(--steel-2); font-size: .82rem; }
.vp-strip .sx-bar { max-width: 280px; }
.vp-strip .sx-bar i, .vp-status .sx-bar i { background: linear-gradient(90deg, #FFC94A, var(--acid)); }
@media (max-width: 560px) { .vp-strip { flex-wrap: wrap; } .vp-strip > .btn { width: 100%; } }

.vp-cool { margin: 0; color: #FFC94A; }
.vp-big { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,201,74,.45); background: rgba(255,201,74,.06); font-size: .85rem; color: var(--bone); cursor: pointer; }
.vp-big input { margin-top: 3px; accent-color: #FFC94A; width: 16px; height: 16px; flex: 0 0 16px; }

/* members board lock */
.vp-lock { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid rgba(255,201,74,.4); background: linear-gradient(110deg, rgba(255,201,74,.09), transparent 70%), var(--surface); }
.vp-lock b { display: block; color: #FFC94A; font-family: var(--font-display); }
.vp-lock span { display: block; color: var(--steel-2); font-size: .85rem; max-width: 60ch; }
.vp-lock.on { display: block; border-color: rgba(200,255,46,.35); background: linear-gradient(110deg, rgba(200,255,46,.06), transparent 70%), var(--surface); }
.vp-lock.on b { color: var(--acid); }

/* tier-up */
.vp-up { background: radial-gradient(circle, rgba(255,201,74,.14), rgba(3,3,6,.65) 60%); }
.vp-up .sx-lvl-box b { font-size: clamp(3rem, 12vw, 5rem); text-shadow: 0 0 40px currentColor; }

/* subscribe dialog */
.vp-dlg-h { margin: 2px 0 0; font-size: 1.6rem; }
.vp-mini { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .85rem; color: var(--steel-2); }
.vp-mini li { max-width: none; padding-left: 18px; position: relative; } .vp-mini li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: #FFC94A; rotate: 45deg; }
.vp-mini b { color: var(--bone); }

/* page */
.vp { display: grid; gap: 30px; }
.vp h2 { font-size: 1.4rem; margin: 0; }
.vp-hero .lb-eye { color: #FFC94A; }
.vp-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.vp-status, .vp-daily, .vp-card, .vp-host, .vp-manage { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); }
.vp-status { display: flex; gap: 18px; align-items: flex-start; background: linear-gradient(140deg, rgba(255,201,74,.07), transparent 60%), var(--surface); }
.vp-status img { border-radius: 50%; flex: 0 0 72px; border: 2px solid var(--line-2); }
.vp-status.t1 img { border-color: #D3DAE3; } .vp-status.t2 img { border-color: #FFC94A; box-shadow: 0 0 18px rgba(255,201,74,.35); } .vp-status.t3 img { border-color: #9FF4FF; box-shadow: 0 0 18px rgba(159,244,255,.35); } .vp-status.t4 img { border-color: var(--acid); box-shadow: 0 0 18px rgba(200,255,46,.4); }
.vp-status.t2 { border-color: rgba(255,201,74,.35); } .vp-status.t3 { border-color: rgba(159,244,255,.35); } .vp-status.t4 { border-color: rgba(200,255,46,.4); }
.vp-st-b { flex: 1; min-width: 0; display: grid; gap: 6px; } .vp-st-b p { margin: 0; }
.vp-st-p { color: var(--steel-2); }
.vp-daily { display: grid; gap: 10px; align-content: start; border-color: rgba(255,201,74,.35); background: radial-gradient(120% 90% at 100% 0%, rgba(255,201,74,.12), transparent 60%), var(--surface); }
.vp-daily h2 { font-family: var(--font-mono); font-size: 1.7rem; color: #FFC94A; } .vp-daily p { margin: 0; }
.vp-daily.off { border-color: var(--line-2); } .vp-daily.off h2 { color: var(--steel-2); }
.vp-bank { display: flex; gap: 6px; } .vp-bank i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); } .vp-bank i.on { background: linear-gradient(90deg, #FFC94A, #FFE38A); box-shadow: 0 0 10px rgba(255,201,74,.5); }
.vp-manage { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; font-size: .92rem; }
.vp-cyc { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); }
.vp-cyc button { border: 0; padding: 8px 16px; border-radius: 999px; background: none; color: var(--steel-2); font: inherit; font-size: .85rem; cursor: pointer; }
.vp-cyc button.on { background: var(--bone); color: var(--void); font-weight: 600; }
.vp-cyc button small { margin-left: 4px; color: #B8860B; font-size: .72rem; } .vp-cyc button:not(.on) small { color: #FFC94A; }
.vp-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vp-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 44px 24px 22px; border-radius: var(--r-lg); border: 1px solid rgba(255,201,74,.4); background: radial-gradient(120% 70% at 50% 0%, rgba(255,201,74,.14), transparent 60%), var(--surface); }
.vp-plan.p2 { border-color: rgba(200,255,46,.4); background: radial-gradient(120% 70% at 50% 0%, rgba(200,255,46,.10), rgba(140,107,255,.06) 50%, transparent 75%), #0B0B10; }
.vp-plan.mine { box-shadow: 0 0 0 2px rgba(255,201,74,.5); } .vp-plan.p2.mine { box-shadow: 0 0 0 2px rgba(200,255,46,.5); }
.vp-plan h3 { margin: 0; font-size: 1.5rem; }
.vp-plan .st2-tag { background: #FFC94A; } .vp-tag-b { background: var(--acid) !important; }
.vp-price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; } .vp-price b { font-size: 2.2rem; } .vp-price span { color: var(--steel); }
.vp-eq { margin: 0; } .vp-worth { margin: 0; color: #FFC94A; } .vp-plan.p2 .vp-worth { color: var(--acid); }
.vp-perks { margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 9px; flex: 1; }
.vp-perks li { max-width: none; position: relative; padding-left: 22px; font-size: .9rem; color: var(--steel-2); }
.vp-perks li::before { content: ''; position: absolute; left: 0; top: .35em; width: 12px; height: 7px; border-left: 2px solid #FFC94A; border-bottom: 2px solid #FFC94A; rotate: -45deg; }
.vp-plan.p2 .vp-perks li::before { border-color: var(--acid); }
.vp-perks b { color: var(--bone); }
.vp-plan .btn { width: 100%; }
.vp-gold { background: var(--acid); color: var(--void); border-color: var(--acid); }
.vp-gold:hover { box-shadow: 0 0 24px rgba(200,255,46,.45); }
.vp-own { opacity: .75; cursor: default; pointer-events: none; }
.vp-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vp-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vp-card > div { flex: 1; min-width: 180px; } .vp-card h3 { margin: 2px 0 4px; font-size: 1.15rem; } .vp-card p { margin: 0; }
.vp-card img { border-radius: 14px; background: var(--surface-2); flex: 0 0 64px; }
.vp-card.off, .vp-host.off { opacity: .72; }
.vp-drop { border-color: rgba(255,201,74,.3); }
.vp-bdf { display: flex; gap: 8px; } .vp-bdf input { padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: inherit; color-scheme: dark; }
.vp-tiers { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vp-tiers > li { max-width: none; position: relative; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); display: grid; gap: 4px; align-content: start; }
.vp-tiers > li > b { font-family: var(--font-display); font-size: 1.2rem; } .vp-tiers > li > span { color: var(--steel); font-size: .85rem; }
.vp-tiers ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.vp-tiers ul li { max-width: none; font-size: .82rem; color: var(--steel-2); padding-left: 12px; position: relative; } .vp-tiers ul li::before { content: ''; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.vp-tiers > li.cur { border-color: rgba(255,201,74,.6); box-shadow: 0 0 0 1px rgba(255,201,74,.3), 0 18px 40px -24px rgba(255,201,74,.5); }
.vp-tiers > li.cur::after { content: 'YOU'; position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; background: #FFC94A; color: var(--void); font-weight: 700; }
.vp-tiers > li.done { opacity: .7; }
.vp-tiers > li.t4 { background: linear-gradient(160deg, rgba(200,255,46,.07), transparent 60%), #0B0B10; }
.vp-host { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.vp-host p { margin: 6px 0 0; }
.vp-hf { display: grid; gap: 10px; }
.vp-hf textarea, .vp-hf input { width: 100%; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); font: inherit; resize: vertical; }
.vp-hf .btn { justify-self: start; }
@media (max-width: 900px) { .vp-top, .vp-row, .vp-host { grid-template-columns: 1fr; } .vp-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vp-plans { grid-template-columns: 1fr; } .vp-status { flex-direction: column; } .vp-plan { padding: 42px 18px 18px; } }
@media (max-width: 420px) { .vp-tiers { grid-template-columns: 1fr; } }
.vp .st2-test, .vp .st2-fine { max-width: none; }

/* avatar studio: rendered characters */
.sd-tiles.ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.sd-tiles.ch .sd-t { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border-radius: 14px; }
.sd-tiles.ch .sd-t img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sd-tiles.ch .sd-n { padding: 6px 4px 7px; font-size: .72rem; color: var(--bone); background: rgba(6,7,12,.6); }
.sd-tiles.ch .sd-lock { top: 6px; bottom: auto; }
.sd-tiles.ch .sd-t.on { box-shadow: 0 0 0 2px var(--acid), 0 0 22px -4px rgba(200,255,46,.6); }
.sd-tiles.fx { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.sd-tiles.fx .sd-t { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px; text-align: left; }
.sd-tiles.fx .sd-t i { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: block; box-shadow: 0 0 12px var(--c, transparent), inset 0 0 0 1px rgba(255,255,255,.2); }
.sd-tiles.fx .sd-t i.none { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.18) 3px 4px); }
.sd-tiles.fx .sd-n { font-size: .74rem; color: var(--bone); text-align: left; }
.sd-tiles.fx .sd-lock { left: auto; right: 6px; top: -8px; bottom: auto; transform: none; }
.sd-cn { margin: -4px 0 0; text-align: center; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--acid); }

/* coin packs: rendered cyberpunk art, tilt + glare */
.st2-grid { perspective: 1200px; }
.st2-b { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; --pk: 200,255,46; padding: 0; gap: 0; align-items: stretch; overflow: hidden; background: linear-gradient(180deg, #0d0e1a, #08090f); border: 1px solid rgba(255,255,255,.08); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; will-change: transform; }
.st2-b.t2, .st2-b.t3 { --pk: 46,242,255; } .st2-b.t4, .st2-b.t5 { --pk: 140,107,255; } .st2-b.t6 { --pk: 255,201,74; background: linear-gradient(180deg, #14110a, #09080a); }
.st2-b:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); border-color: rgba(var(--pk), .55); box-shadow: 0 26px 60px -28px rgba(var(--pk), .55), 0 0 0 1px rgba(var(--pk), .18) inset; }
.st2-b.tagged { border-color: rgba(var(--pk), .45); }
.st2-art { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 11; margin: 0; overflow: hidden; }
.st2-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.92) brightness(.92); animation: st2drift 9s ease-in-out infinite alternate; }
.st2-b:hover .st2-art img { transform: scale(1.11) translate(calc((var(--gx) - 50%) * -0.04), calc((var(--gy) - 50%) * -0.04)); filter: saturate(1.05) brightness(1.02); }
.st2-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,9,15,.55) 78%, #08090f); pointer-events: none; }
.st2-b.t6 .st2-art::after { background: linear-gradient(180deg, transparent 45%, rgba(9,8,10,.55) 78%, #09080a); }
.st2-glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(255,255,255,.16), transparent 60%); mix-blend-mode: screen; }
.st2-b:hover .st2-glare { opacity: 1; }
.st2-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(var(--pk), .16) 48%, rgba(255,255,255,.10) 50%, transparent 62%); transform: translateX(-120%); }
.st2-b:hover .st2-art::before { animation: st2sweep 1.4s ease-out; }
.st2-mote { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--pk), .9); box-shadow: 0 0 10px rgba(var(--pk), .9); opacity: 0; pointer-events: none; animation: st2mote 6s ease-in-out infinite; }
.st2-mote.m1 { left: 18%; bottom: 22%; } .st2-mote.m2 { left: 72%; bottom: 30%; animation-delay: 2s; width: 4px; height: 4px; } .st2-mote.m3 { left: 46%; bottom: 16%; animation-delay: 4s; }
.st2-tag { z-index: 2; top: 12px; left: 12px; background: rgb(var(--pk)); color: var(--void); box-shadow: 0 0 18px -2px rgba(var(--pk), .7); }
.st2-bon { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: rgb(var(--pk)); background: rgba(8,9,15,.72); border: 1px solid rgba(var(--pk), .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.st2-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 16px 16px; margin-top: -30px; }
.st2-pn { margin: 0; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--pk)); opacity: .9; }
.st2-c { margin: 2px 0 0; font-size: 1.4rem; text-shadow: 0 0 22px rgba(var(--pk), .35); }
.st2-sub { margin: 0 0 12px; text-align: center; }
.st2-buy { width: 100%; position: relative; overflow: hidden; }
.st2-b:not(.t1) .st2-buy { background: rgb(var(--pk)); border-color: rgb(var(--pk)); color: var(--void); }
.st2-buy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); }
.st2-b:hover .st2-buy::after { animation: st2sweep 1.1s .15s ease-out; }
.st2-fly { position: fixed; left: 0; top: 0; z-index: 9999; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #FFF6C8, #FFC94A 45%, #9A6C08); box-shadow: 0 0 12px rgba(255,201,74,.85); }
@keyframes st2sweep { to { transform: translateX(120%); } }
@keyframes st2drift { from { object-position: 50% 56%; } to { object-position: 50% 62%; } }
@keyframes st2mote { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 0; transform: translateY(-46px); } }
@media (max-width: 760px) { .st2-b { padding: 0; } .st2-body { padding: 0 10px 12px; margin-top: -22px; } .st2-c { font-size: 1.08rem; } .st2-bon, .st2-tag { top: 8px; font-size: .56rem; padding: 2px 7px; } .st2-bon { right: 8px; } .st2-tag { left: 8px; } }
@media (prefers-reduced-motion: reduce) { .st2-b, .st2-b:hover { transform: none; } .st2-art img { animation: none; } .st2-mote { display: none; } .st2-b:hover .st2-art::before, .st2-b:hover .st2-buy::after { animation: none; } }

/* portraits are square: round them wherever an avatar image sits */
.pz-list img, .tb-list img, .pz-card img, .vp-status img, .vp-drop img, .sx-lb img, .lb-row img { border-radius: 50%; object-fit: cover; }

/* proximity prompt: choose to enter */
.pz-prompt { --c: #C8FF2E; gap: 10px; padding: 8px 8px 8px 18px; border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 34px -8px var(--c), 0 10px 30px -12px rgba(0,0,0,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pz-pt { display: flex; flex-direction: column; line-height: 1.15; padding-right: 4px; }
.pz-pt small { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.pz-pt b { font-size: .98rem; color: var(--bone); }
.pz-prompt #pzEnter { background: var(--c); border-color: var(--c); color: var(--void); min-width: 84px; }
.pz-px { appearance: none; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.7); font-family: inherit; font-size: .78rem; font-weight: 600; line-height: 1; padding: 9px 12px; border-radius: 999px; cursor: pointer; }
.pz-px:hover { color: #fff; border-color: rgba(255,255,255,.35); }
@media (max-width: 560px) { .pz-prompt { bottom: 64px; padding: 6px 6px 6px 14px; gap: 8px; } .pz-pt b { font-size: .86rem; } .pz-px { padding: 8px 10px; } }

/* plaza camera controls */
.pz-zoom { position: absolute; z-index: 2; right: 12px; top: 112px; display: flex; flex-direction: column; gap: 6px; }
.pz-zoom button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6,7,12,.78); color: var(--bone); font: 700 1.1rem/1 var(--font-mono, monospace); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s, color .2s, box-shadow .2s; }
.pz-zoom button:hover { border-color: rgba(46,242,255,.6); color: #2EF2FF; }
.pz-zoom #pzSnd .snd-x { display: none; }
.pz-zoom #pzSnd.off { color: rgba(244,246,241,.5); }
.pz-zoom #pzSnd.off .snd-x { display: inline; }
.pz-zoom #pzSnd.off .snd-w { display: none; }
.pz-credit { font-size: 11px; opacity: .7; margin-top: 4px; overflow-wrap: anywhere; }
.pz-zoom { --vh: 38px; }
.pz-vol { position: absolute; right: calc(100% + 10px); transform: translateY(-50%); display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 6px; border-radius: 14px; border: 1px solid rgba(46,242,255,.45); background: rgba(6,7,12,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8), 0 0 18px -6px rgba(46,242,255,.55); white-space: nowrap; }
.pz-vol[hidden] { display: none; }
.pz-vol::after { content: ''; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: rgba(6,7,12,.95); border-right: 1px solid rgba(46,242,255,.45); border-top: 1px solid rgba(46,242,255,.45); transform: rotate(45deg); }
.pz-zoom .pz-vol .pz-vol-m { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.pz-vol .pz-vol-m .snd-x { display: none; }
.pz-vol .pz-vol-m.off { color: rgba(244,246,241,.5); }
.pz-vol .pz-vol-m.off .snd-x { display: inline; }
.pz-vol .pz-vol-m.off .snd-w { display: none; }
.pz-vol input[type=range] { -webkit-appearance: none; appearance: none; width: 150px; height: 6px; margin: 0; border-radius: 999px; background: linear-gradient(90deg, #2EF2FF 0 var(--p, 100%), rgba(244,246,241,.16) var(--p, 100%) 100%); outline: none; cursor: pointer; touch-action: none; }
.pz-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #0b0d14; border: 2px solid #2EF2FF; box-shadow: 0 0 10px rgba(46,242,255,.7); }
.pz-vol input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #0b0d14; border: 2px solid #2EF2FF; box-shadow: 0 0 10px rgba(46,242,255,.7); }
.pz-vol input[type=range]:focus-visible { box-shadow: 0 0 0 3px rgba(46,242,255,.35); }
.pz-vol-n { min-width: 4ch; text-align: right; font: 600 .8rem/1 var(--font-mono, monospace); color: var(--bone); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pz-vol { height: 42px; gap: 8px; padding-right: 10px; } .pz-vol input[type=range] { width: min(120px, 34vw); } .pz-zoom .pz-vol .pz-vol-m { width: 30px; height: 30px; } }
.pz-zoom button.on { border-color: #2EF2FF; color: #2EF2FF; box-shadow: 0 0 18px -4px rgba(46,242,255,.7); }
@media (max-width: 560px) { .pz-zoom { top: 86px; right: 10px; } .pz-zoom button { width: 34px; height: 34px; } }

/* face-to-face talk */
.pz-talk { --c: #2EF2FF; position: absolute; z-index: 4; left: 50%; bottom: 66px; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(14,15,26,.94), rgba(7,8,14,.96)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 40px -14px var(--c), 0 24px 60px -24px rgba(0,0,0,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: sxIn .3s var(--ease); }
.pz-talk[hidden], .pz-toss[hidden] { display: none; }
.pz-tk-face { position: relative; align-self: start; border-radius: 16px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 30px -8px var(--c); }
.pz-tk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-tk-face.holo img { opacity: .6; filter: saturate(.6) hue-rotate(-10deg); }
.pz-tk-face.holo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(46,242,255,.10) 0 1px, transparent 1px 3px); }
.pz-tk-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pz-tk-who { margin: 0; display: flex; flex-direction: column; line-height: 1.2; padding-right: 26px; }
.pz-tk-who b { font-size: 1.05rem; color: var(--bone); }
.pz-tk-who small { font-size: .66rem; letter-spacing: .06em; color: rgba(244,246,241,.6); }
.pz-tk-who .on { color: #C8FF2E; } .pz-tk-who .ig, .pz-st.ig { color: #FFC94A; }
.pz-st { display: block; font-size: .7rem; color: #C8FF2E; }
.pz-tk-line { margin: 0; min-height: 3.1em; font-size: .95rem; line-height: 1.5; color: var(--bone); }
.pz-tk-opts, .pz-tk-q, .pz-tk-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-tk-th { list-style: none; margin: 0; padding: 0; max-height: 116px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; }
.pz-tk-th li { align-self: flex-start; max-width: 86%; padding: 6px 11px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.07); font-size: .86rem; line-height: 1.35; color: var(--bone); overflow-wrap: anywhere; }
.pz-tk-th li.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.pz-tk-th li.sys { max-width: none; background: none; padding: 0; color: rgba(244,246,241,.6); font-size: .82rem; }
.pz-tk-q button, .pz-tk-acts button { appearance: none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--bone); font-family: inherit; font-size: .76rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: border-color .2s, color .2s; }
.pz-tk-q button:hover, .pz-tk-acts button:hover { border-color: var(--c); color: var(--c); }
.pz-tk-f { display: flex; gap: 6px; }
.pz-tk-f input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--bone); font: inherit; font-size: .88rem; }
.pz-tk-f input:focus { outline: none; border-color: var(--c); }
.pz-tk-g { margin: 0; color: rgba(244,246,241,.65); }
.pz-tx { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--bone); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.pz-tx:hover { background: rgba(255,255,255,.14); }
.pz-log li.dm { color: #FFC94A; }
@media (max-width: 560px) { .pz-talk { grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 10px 12px; bottom: 60px; } .pz-tk-line { font-size: .86rem; min-height: 4.4em; } .pz-tk-th { max-height: 84px; } }

/* wishing fountain: first-person scene */
.pz-toss { position: absolute; inset: 0; z-index: 6; overflow: hidden; background: #05080c; animation: ftIn .45s var(--ease); }
.pz-toss[hidden] { display: none; }
.pz-toss canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: grab; }
.pz-toss canvas:active { cursor: grabbing; }
.pz-stage.ft-on .pz-emotes, .pz-stage.ft-on .pz-zoom, .pz-stage.ft-on .pz-mini, .pz-stage.ft-on .pz-hint, .pz-stage.ft-on .pz-prompt { display: none; }
.ft-top { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }
.ft-top > * { pointer-events: auto; }
.ft-t { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: rgba(5,8,14,.62); border: 1px solid rgba(159,247,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ft-t small { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #9FF7FF; }
.ft-pips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ft-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ft-pips i.on { background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC94A 55%, #9A6C08); box-shadow: 0 0 8px rgba(255,201,74,.6); }
.ft-pips b { margin-left: 6px; font-size: .74rem; color: var(--bone); } .ft-pips em { margin-left: 6px; font-style: normal; font-size: .7rem; color: #FFE9A8; }
.ft-wind { align-self: center; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(5,8,14,.55); border: 1px solid rgba(255,255,255,.12); font-size: .7rem; color: rgba(244,246,241,.75); }
.ft-wind span { letter-spacing: .12em; text-transform: uppercase; font-size: .6rem; }
.ft-wind b { display: flex; align-items: center; gap: 3px; color: #9FF7FF; font-size: .9rem; }
.ft-wind b i { width: 5px; height: 10px; border-radius: 2px; background: #9FF7FF; box-shadow: 0 0 6px #9FF7FF; }
.ft-x { white-space: nowrap; appearance: none; border: 1px solid rgba(255,255,255,.18); background: rgba(5,8,14,.62); color: var(--bone); font-family: inherit; font-weight: 600; font-size: .8rem; padding: 10px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ft-x:hover { border-color: #9FF7FF; color: #9FF7FF; }
.ft-key { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 12px; background: rgba(5,8,14,.5); border: 1px solid rgba(255,255,255,.08); font-size: .7rem; color: rgba(244,246,241,.7); pointer-events: none; }
.ft-key span { display: flex; align-items: center; gap: 7px; } .ft-key b { color: var(--bone); font-family: var(--font-mono, monospace); font-weight: 600; margin-left: auto; padding-left: 10px; }
.ft-key i { width: 9px; height: 9px; border-radius: 50%; } .ft-key .k1 { border: 2px solid #FFD678; } .ft-key .k2 { background: #FF9EDB; box-shadow: 0 0 6px #FF9EDB; } .ft-key .k3 { background: #FF8A4C; } .ft-key .k4 { background: #FFD76A; box-shadow: 0 0 8px #FFC94A; }
.ft-hint { position: absolute; left: 50%; bottom: clamp(140px, 24%, 190px); transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(5,8,14,.62); border: 1px solid rgba(255,233,168,.35); color: #FFE9A8; font-size: .82rem; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .5s; animation: ftPulse 2.4s ease-in-out infinite; }
.ft-hint.gone { opacity: 0; } .ft-hint.rest { opacity: 1; animation: none; color: var(--bone); border-color: rgba(255,255,255,.2); }
.ft-res { position: absolute; right: 14px; bottom: 14px; margin: 0; max-width: 46%; padding: 9px 14px; border-radius: 12px; background: rgba(5,8,14,.55); border: 1px solid rgba(255,255,255,.08); font-size: .84rem; color: var(--bone); text-align: right; pointer-events: none; }
.ft-res:empty { display: none; }
@keyframes ftIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ftPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,233,168,0); } 50% { box-shadow: 0 0 22px -4px rgba(255,233,168,.55); } }
@media (max-width: 560px) { .ft-wind { position: absolute; top: 50px; right: 0; padding: 6px 10px; } .ft-pips i { width: 7px; height: 7px; } .ft-t { padding: 8px 10px; } .ft-key { display: none; } .ft-res { left: 50%; right: auto; transform: translateX(-50%); max-width: 90%; white-space: nowrap; text-align: center; top: 96px; bottom: auto; } .ft-hint { white-space: normal; text-align: center; width: max-content; max-width: 88%; } .ft-x { padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .pz-toss { animation: none; } .ft-hint { animation: none; } }

/* ================= home ================= */
.hm { padding-bottom: 40px; }
.hm-hero { position: relative; min-height: clamp(520px, 74vh, 720px); margin-top: 4px; border-radius: var(--r-lg); border: 1px solid var(--line-2); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hm-bg { position: absolute; inset: 0; z-index: -2; background: url(assets/social/plaza-city.webp?v=7) center 38% / cover no-repeat; transform: scale(1.06); animation: hmDrift 30s ease-in-out infinite alternate; }
.hm-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,10,.94) 0%, rgba(5,5,10,.78) 38%, rgba(5,5,10,.25) 70%, rgba(5,5,10,.5) 100%), linear-gradient(180deg, rgba(5,5,10,.2) 0%, transparent 40%, #05050a 100%); }
.hm-chars { position: absolute; z-index: -1; right: 4%; bottom: 0; height: 86%; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.hm-chars img { height: 100%; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); animation: hmBob 6s ease-in-out infinite; }
.hm-chars .c1 { height: 86%; margin-right: -4%; animation-delay: -2s; } .hm-chars .c3 { height: 90%; margin-left: -4%; animation-delay: -4s; }
.hm-copy { position: relative; max-width: 620px; padding: 48px clamp(20px, 5vw, 64px); }
.hm-eye { margin: 0 0 10px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acid); }
.hm-copy h1 { margin: 0; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1; }
.hm-lead { margin: 18px 0 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(244,246,241,.82); max-width: 54ch; }
.hm-lead b { color: var(--bone); white-space: nowrap; }
.hm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hm-cta .btn { min-width: 170px; }
.hm-fine { margin: 14px 0 0; color: rgba(244,246,241,.5); }
.hm-sec { margin-top: clamp(56px, 8vw, 96px); }
.hm-h { margin-bottom: 22px; } .hm-h h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); } .hm-h p.dim { margin: 8px 0 0; }
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-steps li { position: relative; padding: 22px 20px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border: 1px solid var(--line-2); overflow: hidden; }
.hm-steps li::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--acid), #2EF2FF, #8C6BFF); opacity: .7; }
.hm-steps span { font-size: .78rem; color: var(--acid); letter-spacing: .1em; }
.hm-steps h3 { margin: 10px 0 8px; font-size: 1.15rem; } .hm-steps p { margin: 0; color: rgba(244,246,241,.7); line-height: 1.55; font-size: .92rem; }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.hm-c { position: relative; display: flex; align-items: flex-end; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--bone); border: 1px solid var(--line-2); isolation: isolate; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.hm-c.big { grid-column: span 2; grid-row: span 2; }
.hm-ci { position: absolute; inset: 0; z-index: -1; background: var(--img) center / cover no-repeat; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hm-ci::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,10,.05) 20%, rgba(5,5,10,.82) 72%, rgba(5,5,10,.96)); }
.hm-c:hover { transform: translateY(-3px); border-color: rgba(46,242,255,.45); box-shadow: 0 24px 50px -28px rgba(46,242,255,.55); } .hm-c:hover .hm-ci { transform: scale(1.06); }
.hm-cb { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.hm-cb small { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #2EF2FF; }
.hm-cb b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .hm-c.big .hm-cb b { font-size: 1.7rem; }
.hm-cb span { font-size: .86rem; line-height: 1.45; color: rgba(244,246,241,.75); }
.hm-plaza { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hm-pz-art { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -40px rgba(46,242,255,.45); }
.hm-pz-art img { display: block; width: 100%; height: auto; }
.hm-pin { position: absolute; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; font: 700 .66rem/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--void); background: var(--acid); box-shadow: 0 0 0 4px rgba(200,255,46,.18), 0 0 20px rgba(200,255,46,.5); white-space: nowrap; }
.hm-pin.p1 { left: 50%; top: 22%; } .hm-pin.p2 { left: 8%; top: 52%; background: #2EF2FF; box-shadow: 0 0 0 4px rgba(46,242,255,.18), 0 0 20px rgba(46,242,255,.5); } .hm-pin.p3 { left: 50%; top: 66%; background: #9FF7FF; } .hm-pin.p4 { left: 91%; top: 48%; background: #8C6BFF; color: #fff; } .hm-pin.p5 { left: 81%; top: 87%; background: #FFC94A; }
.hm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hm-list li { position: relative; padding-left: 22px; line-height: 1.55; color: rgba(244,246,241,.78); font-size: .95rem; }
.hm-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.hm-list b { color: var(--bone); }
.hm-acc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.hm-acc details { border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); transition: border-color .25s, background .25s; }
.hm-acc details[open] { border-color: rgba(200,255,46,.4); background: rgba(200,255,46,.03); }
.hm-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.hm-acc summary::-webkit-details-marker { display: none; }
.hm-acc summary::after { content: "+"; font: 600 1.1rem/1 var(--font-mono, monospace); color: var(--acid); margin-left: 8px; }
.hm-acc details[open] summary::after { content: "\2212"; }
.hm-acc summary b { font-size: 1rem; } .hm-acc summary small { margin-left: auto; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,246,241,.5); font-family: var(--font-mono, monospace); }
.hm-acc details p { margin: 0; padding: 0 16px; line-height: 1.6; color: rgba(244,246,241,.78); font-size: .92rem; }
.hm-acc details a { display: inline-block; margin: 10px 16px 16px; color: var(--acid); font-weight: 600; font-size: .88rem; text-decoration: none; } .hm-acc details a:hover { text-decoration: underline; }
.hm-faq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-faq > div { padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(255,255,255,.02); }
.hm-faq h3 { margin: 0 0 8px; font-size: 1.02rem; } .hm-faq p { margin: 0; color: rgba(244,246,241,.72); line-height: 1.55; font-size: .9rem; }
.hm-end { margin-top: clamp(56px, 8vw, 96px); padding: clamp(36px, 6vw, 64px) 24px; text-align: center; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: radial-gradient(80% 120% at 50% 0%, rgba(140,107,255,.22), transparent 60%), radial-gradient(60% 100% at 50% 100%, rgba(46,242,255,.14), transparent 70%), #07070d; }
.hm-end h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); } .hm-end .hm-cta { justify-content: center; }
@keyframes hmDrift { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@keyframes hmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 1100px) { .hm-steps, .hm-faq { grid-template-columns: repeat(2, 1fr); } .hm-grid { grid-template-columns: repeat(2, 1fr); } .hm-plaza { grid-template-columns: 1fr; } .hm-chars { opacity: .55; right: -6%; } }
@media (max-width: 640px) { .hm-hero { min-height: 640px; align-items: flex-end; } .hm-copy { padding: 28px 20px 36px; } .hm-chars { height: 58%; top: 70px; bottom: auto; right: -12%; opacity: .5; } .hm-bg::after { background: linear-gradient(180deg, rgba(5,5,10,.35) 0%, rgba(5,5,10,.7) 45%, #05050a 92%); }
  .hm-steps, .hm-faq, .hm-acc { grid-template-columns: 1fr; } .hm-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; } .hm-c.big { grid-column: auto; grid-row: span 1; } .hm-c.big .hm-cb b { font-size: 1.3rem; } .hm-cta .btn { flex: 1; min-width: 0; } .hm-pin { font-size: .56rem; padding: 3px 7px; } }
@media (prefers-reduced-motion: reduce) { .hm-bg, .hm-chars img { animation: none; } }

/* ================= NEW SLOTS: OVERCLOCK, CHROME WAYS, DRAGON'S HOARD, SWEET SURGE ================= */
/* shared layout on top of the LOSO standard (jp-*) */
.xs-stage { --font-x: 'Orbitron', sans-serif; --ink: #fff; --glow: rgba(46,242,255,.45); --edge: rgba(46,242,255,.35); --panel: rgba(4,6,14,.72); }
.xs-stage .jp-logo { height: clamp(58px, 8vw, 104px); max-width: 92%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 24px var(--glow)); }
.xs-stage .jp-cab { background: linear-gradient(#070a14, #03040a) padding-box, linear-gradient(150deg, var(--gold), var(--red) 35%, var(--gold2) 65%, var(--gold)) border-box; box-shadow: 0 0 40px var(--glow), 0 20px 50px rgba(0,0,0,.6); }
.xs-stage .jp-cab .sk-lights .a { stroke: var(--gold); filter: drop-shadow(0 0 4px var(--gold)); }
.xs-stage .jp-cab .sk-lights .b { stroke: var(--red); filter: drop-shadow(0 0 4px var(--red)); }
.xs-stage .jp-window { overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--glow), transparent 55%), rgba(3,4,10,.92); border-color: var(--edge); }
.xs-stage .jp-fsb { background: linear-gradient(90deg, rgba(0,0,0,.4), var(--glow), rgba(0,0,0,.4)); border-color: var(--edge); }
.xs-stage .jp-fsb b, .xs-stage .jp-now b, .xs-stage .jp-buy-t, .xs-stage .jp-feats b { font-family: var(--font-x); color: var(--gold); }
.xs-stage .jp-now, .xs-stage .jp-bet, .xs-stage .jp-ico, .xs-stage .jp-step, .xs-stage .jp-max, .xs-stage .jp-buy-c, .xs-stage .jp-feats div, .xs-stage .jp-buy-in, .xs-stage .jp-pay-in, .xs-stage .jp-x, .xs-stage .jp-auto-pop { border-color: var(--edge); }
.xs-stage .jp-ico, .xs-stage .jp-step, .xs-stage .jp-max, .xs-stage .jp-x, .xs-stage .jp-auto-pop button { color: var(--ink2, #E6FBFF); }
.xs-stage .jp-now-l, .xs-stage .jp-intro-tag { color: var(--red); }
.xs-stage .jp-eq i { background: var(--gold); }
.xs-stage .jp-buybtn { font-family: var(--font-x); color: #06070c; border-color: #fff; background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 45%, var(--gold2)); box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 26px var(--glow), inset 0 -6px 0 rgba(0,0,0,.2); animation: xsbuy 2.4s ease-in-out infinite; }
@keyframes xsbuy { 50% { box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 44px var(--gold), inset 0 -6px 0 rgba(0,0,0,.2); } }
.xs-stage .jp-spin { background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 45%, var(--gold2)); color: #06070c; box-shadow: 0 0 0 4px #05060b, 0 0 26px var(--glow), inset 0 -6px 0 rgba(0,0,0,.25); }
.xs-stage .jp-spin::before { background: conic-gradient(var(--gold), var(--red), #fff, var(--red), var(--gold)); }
.xs-stage .jp-spin span { font-family: var(--font-x); }
.xs-stage .jp-cw-v { font-family: var(--font-x); background: linear-gradient(180deg, #fff, var(--gold) 45%, var(--gold2) 75%, #fff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 22px var(--glow)); }
.xs-stage .jp-cw-l { font-family: var(--font-x); font-size: clamp(11px, 1.5vw, 15px); }
.xs-stage .jp-splash { background: radial-gradient(70% 70% at 50% 45%, rgba(6,8,22,.9), rgba(2,2,6,.97)); }
.xs-stage .jp-splash.intro { background: linear-gradient(rgba(3,4,12,.8), rgba(3,4,12,.94)), var(--bgimg) center / cover; }
.xs-stage .jp-intro-art { box-shadow: 0 0 0 2px var(--gold), 0 20px 50px rgba(0,0,0,.7), 0 0 60px var(--glow); max-height: 64vh; object-fit: cover; }
.xs-stage .jp-fs-k, .xs-stage .jp-fs-n, .xs-stage .jp-buy-n { font-family: var(--font-x); }
.xs-stage .jp-fs-n { background: linear-gradient(180deg, #fff, var(--gold) 45%, var(--gold2) 75%, #fff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 26px var(--glow)); }
.xs-stage .jp-fs img { filter: drop-shadow(0 0 30px var(--glow)); }
.xs-stage .jp-fs-v { text-shadow: 0 0 20px var(--glow); }
.xs-stage .jp-load i { background: linear-gradient(90deg, var(--red), var(--gold)); }
.xs-stage .jp-start { font-family: var(--font-x); background: linear-gradient(#fff, var(--gold) 50%, var(--gold2)); color: #06070c; }
.xs-stage .jp-buy-in, .xs-stage .jp-pay-in { background: linear-gradient(#0b0e1c, #05060c); }
.xs-stage .jp-turbo.on { background: var(--gold); border-color: var(--gold); color: #06070c; box-shadow: 0 0 16px var(--glow); }
.xs-stage .jc-t, .xs-stage .jc-l { font-family: var(--font-x); }
.xs-stage .jp-rain i { opacity: .35; }
.xs-side { grid-area: now; display: grid; justify-items: center; gap: 10px; align-self: center; }
.xs-side .jp-now { grid-area: auto; }
/* HUD chips above the window */
.xs-hud { display: flex; justify-content: center; align-items: stretch; gap: 8px; margin: 0 0 8px; min-height: 40px; flex-wrap: wrap; }
.xs-chip { display: grid; justify-items: center; align-content: center; padding: 4px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); min-width: 110px; transition: opacity .25s, transform .25s, box-shadow .25s; }
.xs-chip[hidden] { display: none; }
.xs-chip .lbl { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-2, #9aa3b2); }
.xs-chip b { font-family: var(--font-x); font-size: clamp(14px, 1.8vw, 19px); color: var(--ink2, #fff); line-height: 1.15; min-height: 1.15em; }
.xs-chip.tum, .xs-chip.orbs { opacity: .45; } .xs-chip.tum.on, .xs-chip.orbs.on { opacity: 1; box-shadow: 0 0 18px var(--glow); }
.xs-chip.gm { border-color: var(--gold); box-shadow: 0 0 22px var(--glow), inset 0 0 14px var(--glow); }
.xs-chip.gm b { color: var(--gold); font-size: clamp(18px, 2.4vw, 26px); }
.xs-chip.pop { animation: xspop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes xspop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* tumble grid */
.xs-grid { position: relative; display: flex; gap: 4px; aspect-ratio: var(--cols) / var(--rows); width: 100%; }
.tg-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.06) 50%, rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.06); transition: box-shadow .3s, border-color .3s; }
.tg-col.tease { border-color: var(--gold); box-shadow: 0 0 22px var(--glow), inset 0 0 26px var(--glow); animation: sltease .5s ease-in-out infinite alternate; }
.tg-cell { position: absolute; left: 0; right: 0; aspect-ratio: auto; }
.tg-cell .sl-art { inset: 5%; }
.tg-cell.out { pointer-events: none; }
.tg-cell.pop .sl-art { animation: xsburst .38s ease-in forwards !important; }
@keyframes xsburst { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.25); filter: brightness(2.2); } 100% { transform: scale(.1); opacity: 0; filter: brightness(3); } }
.tg-cell.pop::after { display: none; }
.tg-cell.land .sl-art { animation: skland .45s cubic-bezier(.2,1.6,.4,1); }
html.rm .tg-col.tease, html.rm .tg-cell.pop .sl-art { animation: none !important; }
html.rm .tg-cell.pop { opacity: .2; }
/* paytable */
.xs-pt { display: grid; gap: 6px; }
.xs-pt-r { display: grid; grid-template-columns: 44px minmax(90px, 1fr) repeat(4, minmax(0, auto)); align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.xs-pt-r img { width: 44px; height: 44px; object-fit: contain; }
.xs-pt-r b { font-size: 13px; }
.xs-pt-r span { display: grid; text-align: right; font-size: 13px; } .xs-pt-r small { font-size: 9px; color: var(--steel-2, #9aa3b2); letter-spacing: .06em; }
.xs-pt-n { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--edge); font-size: 13px; line-height: 1.5; }
.xs-pt-n img { width: 52px; height: 52px; object-fit: contain; }
.xs-stage .sk-tip span { display: block; }
/* lobby cards: portrait key art */
.xs-lt .lt-art { background-position: center 22% !important; }

/* ---------- OVERCLOCK (cyberpunk sky citadel) ---------- */
.th-oc { --gold: #2EF2FF; --gold2: #6B3BFF; --red: #FF3BD4; --glow: rgba(46,242,255,.42); --edge: rgba(46,242,255,.32); --bgimg: url(assets/overclock/bg.webp); --font-x: 'Orbitron', sans-serif; background-image: url(assets/overclock/bg.webp); border-color: rgba(46,242,255,.35); }
.th-oc::before { background: radial-gradient(60% 55% at 50% 52%, rgba(4,6,20,.1), rgba(4,4,16,.72)); }
.th-oc.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(120,20,200,.25), rgba(8,0,24,.85)); }
.oc-char { width: 100%; max-width: 230px; height: auto; max-height: 52vh; object-fit: contain; filter: drop-shadow(0 0 22px rgba(46,242,255,.45)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); animation: occhar 5s ease-in-out infinite; transform-origin: 50% 90%; pointer-events: none; }
@keyframes occhar { 50% { transform: translateY(-6px) scale(1.01); filter: drop-shadow(0 0 32px rgba(255,59,212,.5)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); } }
.oc-char.zap { animation: oczap .32s ease-out; }
@keyframes oczap { 0% { filter: brightness(2.4) drop-shadow(0 0 40px #2EF2FF); transform: scale(1.04); } 100% { filter: drop-shadow(0 0 22px rgba(46,242,255,.45)); } }
.th-oc .tg-col { background: linear-gradient(180deg, rgba(46,242,255,.04), rgba(107,59,255,.08) 50%, rgba(255,59,212,.04)); border-color: rgba(46,242,255,.1); }
.xs-cell.sym-OB .sl-art { animation: skorb 4s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.xs-orb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(11px, 1.9vw, 22px); color: #fff; text-shadow: 0 0 6px #000, 0 0 12px #000, 0 2px 0 #000; pointer-events: none; letter-spacing: -.02em; }
.xs-cell.t-O4 .xs-orb { color: #FFF1B8; } .xs-cell.t-O3 .xs-orb { color: #F3D8FF; }
.xs-cell.fire { z-index: 3; } .xs-cell.fire .sl-art { animation: ocfire .5s ease-in-out infinite alternate; }
@keyframes ocfire { to { transform: scale(1.18); filter: brightness(1.7) drop-shadow(0 0 14px #C8FF2E); } }
.th-oc .sym-SC .sl-art { animation: skpulse 1.6s ease-in-out infinite; }
@media (max-width: 1180px) {
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side { display: contents; }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now { grid-area: now; }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .oc-char { position: absolute; top: 4px; right: 4px; width: auto; height: clamp(90px, 15vw, 150px); max-width: none; z-index: 1; opacity: .95; }
}
@media (max-width: 640px) { :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .oc-char { height: 78px; top: 2px; right: 0; } :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-logo { max-width: 70%; justify-self: start; margin-left: 6px; } }

/* ---------- CHROME WAYS (neon Tokyo alley) ---------- */
.th-cw { --gold: #FF2E88; --gold2: #7A1BFF; --red: #2EF2FF; --glow: rgba(255,46,136,.4); --edge: rgba(255,46,136,.32); --bgimg: url(assets/chromeways/bg.webp); --font-x: 'Chakra Petch', sans-serif; background-image: url(assets/chromeways/bg.webp); border-color: rgba(255,46,136,.35); }
.th-cw::before { background: radial-gradient(60% 55% at 50% 52%, rgba(10,0,20,.1), rgba(6,0,14,.72)); }
.th-cw.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(255,46,136,.18), rgba(10,0,20,.86)); }
.th-cw .xs-grid { aspect-ratio: 6 / 5.4; }
.th-cw .tg-col { background: linear-gradient(180deg, rgba(255,46,136,.05), rgba(46,242,255,.06) 50%, rgba(255,46,136,.05)); border-color: rgba(255,46,136,.12); }
.th-cw .xs-chip.ways b { color: #2EF2FF; text-shadow: 0 0 12px rgba(46,242,255,.6); }
.th-cw .xs-chip.ways.max { border-color: #2EF2FF; box-shadow: 0 0 22px rgba(46,242,255,.5); }
.th-cw .jp-logo { height: clamp(66px, 9vw, 118px); }
.th-cw .tg-cell .sl-art { inset: 4% 10%; }

/* ---------- DRAGON'S HOARD (imperial gold) ---------- */
.th-dh { --gold: #FFD23F; --gold2: #A4701B; --red: #E0161E; --glow: rgba(255,170,40,.32); --edge: rgba(255,210,63,.35); --panel: rgba(18,4,2,.78); --bgimg: url(assets/dragon/bg.webp); --font-x: 'Cinzel', Georgia, serif; background-image: url(assets/dragon/bg.webp); border-color: rgba(255,210,63,.4); }
.th-dh::before { background: radial-gradient(60% 55% at 50% 52%, rgba(10,3,2,.15), rgba(10,3,2,.7)); }
.th-dh .jp-cab { background: linear-gradient(#170604, #080202) padding-box, linear-gradient(150deg, #FFE59A, #FFD23F 25%, #A4701B 50%, #FFE59A 75%, #3BEA7A) border-box; }
.th-dh .jp-window { background: radial-gradient(120% 80% at 50% 0%, rgba(224,22,30,.2), transparent 60%), #0b0302; }
.th-dh .dh-grid { position: relative; gap: 4px; }
.th-dh .dh-grid .sl-reel { border-radius: 10px; background: linear-gradient(180deg, rgba(224,22,30,.08), rgba(0,0,0,.25) 50%, rgba(224,22,30,.08)); border-color: rgba(255,210,63,.14); }
.th-dh .dh-grid .sl-reel.tease { border-color: #FFD23F; box-shadow: 0 0 22px rgba(255,210,63,.7), inset 0 0 26px rgba(224,22,30,.45); }
.dh-lines { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.dh-lines polyline { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; color: var(--c); vector-effect: non-scaling-stroke; }
.dh-sym.sym-PR .sl-art { animation: skorb 4.5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.dh-pv { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; z-index: 2; font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(10px, 1.6vw, 17px); color: #3a1500; background: linear-gradient(#FFF4C2, #F5C542); padding: 0 6px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; }
.dh-pv.jp { background: linear-gradient(#B8FFD0, #2FBF6A); color: #032b12; }
.dh-jps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.dh-jp { display: grid; justify-items: center; padding: 4px 6px; border-radius: 10px; background: linear-gradient(#2a0805, #120302); border: 1px solid rgba(255,210,63,.4); }
.dh-jp b { font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(10px, 1.3vw, 13px); letter-spacing: .12em; }
.dh-jp span { font-size: clamp(11px, 1.4vw, 15px); color: #fff; }
.dh-jp.j-grand { border-color: #3BEA7A; box-shadow: 0 0 16px rgba(59,234,122,.35); } .dh-jp.j-grand b { color: #7CFFAA; }
.dh-jp.j-major b { color: #FF5C4D; } .dh-jp.j-minor b { color: #FFB02E; } .dh-jp.j-mini b { color: #FFE59A; }
.dh-left, .dh-tot { display: none; }
.xs-cab.holding .dh-left, .xs-cab.holding .dh-tot { display: grid; }
.dh-left { grid-auto-flow: column; gap: 6px; align-items: center; justify-content: center; grid-template-rows: auto auto; }
.dh-left .lbl { grid-column: 1 / -1; }
.dh-left i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,210,63,.6); background: rgba(0,0,0,.4); }
.dh-left i.on { background: radial-gradient(circle at 35% 30%, #FFF4C2, #FFD23F 50%, #A4701B); box-shadow: 0 0 10px rgba(255,210,63,.8); }
.dh-tot b { color: #FFD23F; }
.dh-hold { position: absolute; inset: 6px; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; background: radial-gradient(80% 80% at 50% 50%, rgba(40,6,2,.94), rgba(8,1,0,.98)); border-radius: 12px; }
.dh-hold[hidden] { display: none; }
.dh-t { position: relative; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, rgba(255,210,63,.05), rgba(0,0,0,.35)); border: 1px solid rgba(255,210,63,.14); overflow: hidden; }
.dh-t-e { width: 34%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255,210,63,.22); }
.dh-t.spin .dh-t-e { animation: dhspin .5s linear infinite; border-style: solid; border-color: rgba(255,210,63,.5) transparent; }
@keyframes dhspin { to { transform: rotate(360deg); } }
.dh-t.on { border-color: rgba(255,210,63,.65); box-shadow: inset 0 0 18px rgba(255,170,40,.35); }
.dh-t.on img { width: 78%; height: 78%; object-fit: contain; animation: skorb 4.5s ease-in-out infinite; }
.dh-t.jp { border-color: #3BEA7A; box-shadow: inset 0 0 18px rgba(59,234,122,.4); }
.dh-t.k-CL { border-color: #FFD23F; box-shadow: inset 0 0 22px rgba(255,210,63,.6), 0 0 16px rgba(255,210,63,.5); }
.dh-t.k-MX { border-color: #FF3B2E; box-shadow: inset 0 0 22px rgba(255,59,46,.6); }
.dh-tv { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; display: grid; justify-items: center; font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(11px, 1.9vw, 20px); line-height: 1.05; color: #fff; text-shadow: 0 2px 0 #3a0a00, 0 0 10px rgba(0,0,0,.9); white-space: nowrap; }
.dh-tv small { font-size: .62em; letter-spacing: .1em; color: #7CFFAA; }
.dh-tk { position: absolute; top: 5%; left: 50%; translate: -50% 0; font-size: clamp(7px, 1vw, 10px); font-weight: 700; letter-spacing: .12em; color: #FFE59A; white-space: nowrap; }
.dh-t.drop { animation: dhdrop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes dhdrop { 0% { transform: scale(1.5); filter: brightness(2); } 100% { transform: scale(1); } }
.dh-t.hit { animation: dhhit .5s ease-out; }
@keyframes dhhit { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.dh-t.give { box-shadow: inset 0 0 0 2px #FFD23F, 0 0 18px rgba(255,210,63,.8); }
.dh-t.took { opacity: .55; transition: opacity .3s; }
.dh-hold.fire { animation: dhfire .7s ease-out; }
@keyframes dhfire { 0% { box-shadow: inset 0 0 0 4px #FF3B2E, inset 0 0 120px rgba(255,59,46,.8); } 100% { box-shadow: none; } }
.dh-hold.grand { box-shadow: inset 0 0 0 3px #3BEA7A, 0 0 40px rgba(59,234,122,.7); }
html.rm .dh-t.spin .dh-t-e, html.rm .dh-t.on img, html.rm .dh-t.drop, html.rm .dh-hold.fire { animation: none !important; }
@media (max-width: 640px) { .dh-jps { gap: 4px; } .dh-jp { padding: 3px 2px; } .dh-jp b { letter-spacing: .04em; } }

/* ---------- SWEET SURGE (pastel candy city) ---------- */
.th-ss { --gold: #FF5CA8; --gold2: #B14BFF; --red: #3BD6FF; --glow: rgba(255,92,168,.36); --edge: rgba(255,160,210,.45); --panel: rgba(40,10,40,.62); --ink2: #fff; --bgimg: url(assets/sweet/bg.webp); --font-x: 'Fredoka', 'Chakra Petch', sans-serif; background-image: url(assets/sweet/bg.webp); border-color: rgba(255,160,210,.5); }
.th-ss::before { background: radial-gradient(60% 55% at 50% 52%, rgba(40,10,40,.05), rgba(30,6,34,.55)); }
.th-ss.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(255,92,168,.12), rgba(40,6,40,.7)); }
.th-ss .jp-cab { background: linear-gradient(#2a0d2e, #160519) padding-box, linear-gradient(150deg, #FFD6F5, #FF5CA8 30%, #B14BFF 60%, #3BD6FF) border-box; }
.th-ss .jp-window { background: radial-gradient(120% 80% at 50% 0%, rgba(255,160,210,.25), transparent 60%), rgba(30,8,34,.9); }
.th-ss .xs-grid { gap: 3px; }
.th-ss .tg-col { background: rgba(255,255,255,.03); border-color: rgba(255,200,230,.08); }
.th-ss .tg-cell .sl-art { inset: 7%; }
.ss-spots { position: absolute; inset: 8px; z-index: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); column-gap: 3px; pointer-events: none; }
.ss-spots i { grid-column: calc(var(--c) + 1); grid-row: calc(var(--r) + 1); margin: 2px; border-radius: 10px; display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-style: normal; font-size: clamp(10px, 1.6vw, 17px); color: #fff; transition: background .3s, box-shadow .3s; }
.ss-spots i.mk { background: rgba(255,214,245,.12); box-shadow: inset 0 0 0 1px rgba(255,214,245,.35); }
.ss-spots i.m { background: radial-gradient(circle, rgba(255,92,168,.55), rgba(177,75,255,.35)); box-shadow: inset 0 0 0 2px rgba(255,214,245,.8), 0 0 12px rgba(255,92,168,.55); text-shadow: 0 1px 0 #6a0d4a, 0 0 8px rgba(0,0,0,.6); align-items: start; padding-top: 2%; }
.ss-spots i.m8, .ss-spots i.m16 { background: radial-gradient(circle, rgba(255,201,74,.6), rgba(255,92,168,.4)); }
.ss-spots i.m32, .ss-spots i.m64, .ss-spots i.m128 { background: radial-gradient(circle, rgba(59,214,255,.7), rgba(177,75,255,.5)); box-shadow: inset 0 0 0 2px #fff, 0 0 18px rgba(59,214,255,.8); }
.ss-spots i.up { animation: ssup .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes ssup { 0% { transform: scale(1.5); filter: brightness(2); } 100% { transform: scale(1); } }
.th-ss .xs-grid { z-index: 1; }
.th-ss .xs-grid .tg-col { background: transparent; }
.ss-pills { position: absolute; inset: 8px; z-index: 4; pointer-events: none; }
.ss-pill { position: absolute; translate: -50% -50%; display: grid; justify-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(40,6,40,.88); border: 2px solid var(--c); box-shadow: 0 0 16px var(--c); white-space: nowrap; animation: sspill 1.5s ease-out forwards; }
.ss-pill b { font-family: 'Fredoka', sans-serif; font-size: clamp(12px, 1.8vw, 18px); color: #fff; line-height: 1.1; }
.ss-pill small { font-size: 10px; color: #FFD6F5; }
.ss-pill.hot { background: linear-gradient(135deg, rgba(255,92,168,.95), rgba(177,75,255,.95)); }
@keyframes sspill { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.12); } 25% { transform: scale(1); } 80% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-26px); } }
html.rm .ss-pill { animation: none; } html.rm .ss-spots i.up { animation: none; }

/* mobile bar grid areas for every new slot */
@media (max-width: 640px) {
  .xs-stage .jp-bar > [id$="InfoBtn"] { grid-area: i; } .xs-stage .jp-bar > [data-music] { grid-area: m; } .xs-stage .jp-bar > [data-sfx] { grid-area: s; }
  .xs-stage .jp-bar > [id$="Turbo"] { grid-area: t; width: 36px; height: 36px; }
  .xs-hud { gap: 6px; margin-bottom: 6px; min-height: 0; } .xs-chip { min-width: 0; flex: 1; padding: 3px 8px; }
  .xs-pt-r { grid-template-columns: 34px 1fr repeat(4, auto); gap: 6px; padding: 5px 6px; } .xs-pt-r img { width: 34px; height: 34px; } .xs-pt-r b { font-size: 11px; } .xs-pt-r span { font-size: 11px; }
  .xs-grid { gap: 2px; } .tg-col { border-radius: 6px; }
}
@media (min-width: 641px) and (max-width: 1180px) { .xs-stage .jp-bar > [id$="Turbo"] { order: 0; width: 36px; height: 36px; } }
@media (min-width: 1181px) { .xs-stage .jp-bar { gap: 8px; } }
/* OVERCLOCK: SYNTH stands behind the right edge of the cabinet on wide screens */
@media (min-width: 1181px) {
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) { grid-template-columns: minmax(96px, .8fr) minmax(0, 580px) minmax(150px, 1.2fr); }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-cab { position: relative; z-index: 2; }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side { position: relative; z-index: 1; align-self: stretch; align-content: end; padding-bottom: 6px; }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .oc-char { width: 175%; max-width: none; max-height: none; margin-left: -75%; margin-bottom: -40px; }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now { position: absolute; left: 0; right: 0; bottom: 6px; margin: auto; max-width: 150px; z-index: 2; grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; align-items: center; padding: 6px 8px; }
  :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now > img, :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now .jp-eq { display: none; }
}
.dh-hold { background: radial-gradient(80% 80% at 50% 50%, #2a0604, #0a0100); }
.dh-left { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 6px; }
.xs-cab:not(.holding) .dh-left { display: none !important; }
.dh-left .lbl { flex-basis: 100%; text-align: center; }
@media (max-width: 1180px) {
  .xs-stage { grid-template-columns: auto minmax(0, 1fr); }
  .xs-stage .jp-now { min-width: 0; }
  .xs-stage .jp-now b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 640px) {
  .xs-stage .jp-now { padding: 6px 8px; gap: 2px 8px; }
  .xs-stage .jp-now .jp-now-l, .xs-stage .jp-now .dim { display: none !important; }
  .xs-stage .jp-now b { font-size: 13px; }
  .xs-stage .jp-now > img { width: 40px; }
  .xs-stage .xs-side { min-width: 0; width: 100%; }
}

/* ================= WICK RIPS ================= */
.rp-wrap { --rpb: #0a0d1c; }
.rp-grid { align-items: start; }
.rp-stage { position: relative; min-height: 680px; border-radius: 18px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.08);
  background: #070914 url(assets/rips/bg.webp) center 35% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 30px 60px -30px rgba(0,0,0,.8); }
.rp-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 45% at 50% 40%, rgba(10,12,30,.15), rgba(5,6,16,.55) 70%), linear-gradient(180deg, rgba(5,6,16,.1), rgba(5,6,16,.0) 50%, rgba(5,6,16,.55)); }
.rp-sample-tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72);
  background: rgba(6,8,20,.6); border: 1px solid rgba(255,255,255,.12); padding: 5px 12px; border-radius: 99px; backdrop-filter: blur(6px); white-space: nowrap; }
.rp-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }

/* shelf */
.rp-shelf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 10px; padding: 16px 14px 14px;
  background: linear-gradient(180deg, rgba(5,6,16,0), rgba(5,6,16,.78) 45%); transition: opacity .3s, transform .3s; }
.rp-shelf.dim { opacity: 0; transform: translateY(20px); pointer-events: none; }
.rp-shp { --c: #fff; position: relative; display: grid; justify-items: center; gap: 2px; width: 92px; padding: 8px 6px 7px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,12,28,.55); backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.rp-shp img { height: 76px; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: transform .25s; }
.rp-shp b { font: 700 11px/1.1 Orbitron, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.rp-shp span { font-size: 11px; color: rgba(255,255,255,.75); }
.rp-shp:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.rp-shp:hover img { transform: translateY(-3px) rotate(-2deg); }
.rp-shp.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, rgba(10,12,28,.7)); box-shadow: 0 0 0 1px var(--c), 0 0 24px -6px var(--c); }

/* hero pack */
.rp-hero { --c: #fff; position: absolute; inset: 44px 0 150px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 34px; cursor: pointer; outline: none; }
.rp-hero[hidden] { display: none; }
.rp-hpk { position: relative; height: min(420px, 92%); aspect-ratio: .6; display: grid; place-items: center; }
.rp-hpk::before { content: ''; position: absolute; inset: 8% -18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); filter: blur(18px); opacity: .75; animation: rpPulse 3.2s ease-in-out infinite; }
.rp-hpk::after { content: ''; position: absolute; bottom: -4%; left: 12%; right: 12%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); }
.rp-hpk img { position: relative; height: 100%; width: auto; filter: drop-shadow(0 18px 26px rgba(0,0,0,.65)); animation: rpFloat 4.6s ease-in-out infinite; }
.rp-hero:hover .rp-hpk img, .rp-hero:focus-visible .rp-hpk img { animation-duration: 1.4s; }
.rp-hinfo { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: rgba(6,8,20,.62); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); min-width: 210px; }
.rp-eb { font: 700 12px Orbitron, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.rp-hinfo b { font: 800 30px/1 'Clash Display', Orbitron, sans-serif; color: #fff; }
.rp-hinfo small { color: rgba(255,255,255,.7); font-size: 12.5px; }
@keyframes rpFloat { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
@keyframes rpPulse { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }

/* rip scene */
.rp-rip { --c: #fff; --rc: #fff; --tear: 0; position: absolute; inset: 40px 0 0; z-index: 5; display: grid; place-items: center; }
.rp-rip[hidden] { display: none; }
.rp-pack { position: relative; height: min(470px, 70%); aspect-ratio: .6; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; margin-top: -40px; }
.rp-pb img, .rp-pt img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.rp-pb, .rp-pt { position: absolute; inset: 0; filter: drop-shadow(0 18px 26px rgba(0,0,0,.6)); }
.rp-pb { z-index: 3; clip-path: inset(15.5% 0 0 0); transition: transform .6s cubic-bezier(.5,0,.6,1), opacity .6s; animation: rpShake .5s ease-in-out infinite alternate; animation-play-state: paused; }
.rp-pt { z-index: 4; clip-path: inset(0 0 84.5% 0); transform-origin: 96% 16%; transform: rotate(calc(var(--tear) * -7deg)) translate(calc(var(--tear) * 4px), calc(var(--tear) * -6px)); transition: transform .08s; }
.rp-tl { position: absolute; z-index: 5; left: 3%; right: 3%; top: 15.5%; height: 2px; pointer-events: none; }
.rp-tl::before { content: ''; position: absolute; inset: 0; border-top: 2px dashed rgba(255,255,255,.45); }
.rp-tl i { position: absolute; left: 0; top: -2px; height: 6px; width: calc(var(--tear) * 100%); border-radius: 3px; background: #fff; box-shadow: 0 0 12px 3px var(--c), 0 0 30px 6px var(--c); }
.rp-hint { position: absolute; z-index: 6; top: 4%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 12px Orbitron, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  padding: 7px 14px; border-radius: 99px; background: rgba(6,8,20,.75); border: 1px solid var(--c); box-shadow: 0 0 18px -4px var(--c); animation: rpHint 1.6s ease-in-out infinite; pointer-events: none; }
.rp-hint span { display: inline-block; animation: rpArrow 1.1s ease-in-out infinite; }
@keyframes rpHint { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes rpArrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.rp-skip { position: absolute; z-index: 6; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 10px 22px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); background: rgba(6,8,20,.7); color: #fff; font: 600 13px Satoshi, sans-serif; cursor: pointer; backdrop-filter: blur(6px); }
.rp-skip:hover { border-color: #fff; }
.rp-light { position: absolute; z-index: 2; left: -30%; right: -30%; top: -40%; height: 90%; pointer-events: none; opacity: 0; transition: opacity .35s, background .25s;
  background: radial-gradient(40% 50% at 50% 60%, color-mix(in srgb, var(--rc) 90%, #fff), color-mix(in srgb, var(--rc) 40%, transparent) 45%, transparent 70%); mix-blend-mode: screen; }
.rp-rip.torn .rp-pt { transition: transform .75s cubic-bezier(.2,.7,.3,1), opacity .75s; transform: translate(140px, -240px) rotate(-42deg); opacity: 0; }
.rp-rip.torn .rp-tl, .rp-rip.torn .rp-hint { opacity: 0; transition: opacity .2s; }
.rp-rip.glow .rp-light { opacity: 1; }
.rp-rip.glow .rp-pb { animation-play-state: running; }
.rp-rip.pulse .rp-light { animation: rpBloom .42s ease-out; }
@keyframes rpBloom { 0% { transform: scale(.9); filter: brightness(1); } 40% { transform: scale(1.12); filter: brightness(1.6); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes rpShake { 0% { transform: translate(0,0) rotate(0); } 100% { transform: translate(1.5px,-1px) rotate(.6deg); } }

/* card rising out of the pack */
.rp-card3d { position: absolute; z-index: 1; left: 12%; width: 76%; top: 15%; aspect-ratio: .6; perspective: 1400px; transition: transform .8s cubic-bezier(.2,.8,.25,1); transform: translateY(0); cursor: pointer; }
.rp-rip.rise .rp-card3d { transform: translateY(-62%); }
.rp-rip.out .rp-pb { animation: none; transform: translateY(70%) rotate(3deg); opacity: 0; }
.rp-rip.out .rp-card3d { z-index: 6; transition: transform .7s cubic-bezier(.2,.8,.25,1); transform: translateY(-16%) scale(1.14); }
.rp-rip.out .rp-light { opacity: .55; top: -10%; height: 120%; }
.rp-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.4,.4,1); transform: rotateY(180deg); }
.rp-rip.flip .rp-flip, .rp-vw-c.flip .rp-flip { transform: rotateY(0); }
.rp-vw-c .rp-flip { transform: rotateY(0); }
.rp-vw-c.flip .rp-flip { transform: rotateY(180deg); }
.rp-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rp-face.rp-b { transform: rotateY(180deg); }
.rp-rip.out .rp-face.rp-f, .rp-rip.out .rp-face.rp-b { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.rp-rip.grail .rp-card3d { animation: rpGrail 1.6s ease-in-out .9s infinite alternate; }
@keyframes rpGrail { from { filter: drop-shadow(0 0 10px #FFD76A); } to { filter: drop-shadow(0 0 36px #FF3B5C); } }

/* graded slab (sample) */
.rp-slab { --pc: #2EF2FF; --pc2: #0b1230; position: relative; width: 100%; aspect-ratio: .6; container-type: inline-size; border-radius: 4.5cqw; padding: 4cqw 4.5cqw 5cqw; display: flex; flex-direction: column; gap: 3cqw;
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(200,215,255,.14) 40%, rgba(255,255,255,.26) 75%, rgba(255,255,255,.12)); border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1.2cqw rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(0,0,0,.4); backdrop-filter: blur(2px); overflow: hidden; }
.rp-slab::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 55%); background-size: 260% 100%; animation: rpSheen 4.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes rpSheen { 0% { background-position: 130% 0; } 60%,100% { background-position: -130% 0; } }
.rp-slab.p-holo { --pc: #9FF7FF; } .rp-slab.p-gold { --pc: #FFC94A; --pc2: #2a1a02; } .rp-slab.p-black { --pc: #C8FF2E; --pc2: #050505; } .rp-slab.p-one { --pc: #FF6BD5; --pc2: #1d0626; }
.rp-lab { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 2.4cqw 3cqw; border-radius: 2cqw; background: linear-gradient(180deg, #f4f6fb, #dfe3ee); color: #111; border: .8cqw solid var(--pc); box-shadow: 0 0 3cqw -1cqw var(--pc); }
.rp-lab-l { display: grid; gap: .4cqw; min-width: 0; }
.rp-lab-l b { font: 800 4.2cqw/1.05 var(--font-mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-lab-l span { font: 600 3.6cqw/1.1 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.rp-lab-r { display: grid; justify-items: end; line-height: 1; }
.rp-lab-r em { font: 700 3.3cqw var(--font-mono); font-style: normal; color: #333; white-space: nowrap; }
.rp-lab-r strong { font: 800 10cqw/1 Orbitron, sans-serif; color: #111; }
.rp-bars { width: 26cqw; height: 7cqw; background: repeating-linear-gradient(90deg, #111 0 .7cqw, transparent .7cqw 1.3cqw, #111 1.3cqw 1.7cqw, transparent 1.7cqw 2.6cqw); }
.rp-card { position: relative; flex: 1 1 auto; border-radius: 3cqw; overflow: hidden; border: 2.2cqw solid var(--pc); background: var(--pc2);
  box-shadow: inset 0 0 0 .6cqw rgba(0,0,0,.5), 0 0 5cqw -2cqw var(--pc); }
.rp-cbg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.1) brightness(.7); }
.rp-card.k-av .rp-cbg { filter: blur(1.5px) brightness(.55) saturate(1.2); }
.rp-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--pc) 30%, transparent), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75)); }
.rp-art { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); pointer-events: none; }
.rp-card.k-av .rp-art { bottom: 0; height: 96%; width: auto; filter: drop-shadow(0 0 3cqw color-mix(in srgb, var(--pc) 60%, transparent)); }
.rp-card.k-sym .rp-art { top: 12%; width: 78%; height: auto; filter: drop-shadow(0 0 5cqw color-mix(in srgb, var(--pc) 70%, transparent)); }
.rp-card.k-key .rp-art { inset: 0; left: 0; transform: none; width: 100%; height: 100%; object-fit: cover; }
.rp-card.k-key::before { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.8)); }
.rp-cname { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 3cqw 4cqw 3.4cqw; display: flex; justify-content: space-between; align-items: end; gap: 2cqw; }
.rp-cname b { font: 800 7cqw/1 Orbitron, sans-serif; color: #fff; text-shadow: 0 0 3cqw var(--pc), 0 1px 0 #000; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cname span { font: 700 3.6cqw var(--font-mono); color: var(--pc); text-transform: uppercase; white-space: nowrap; }
.rp-cnum { position: absolute; z-index: 3; top: 3cqw; left: 3.5cqw; font: 700 3.8cqw var(--font-mono); color: rgba(255,255,255,.85); background: rgba(0,0,0,.45); padding: .6cqw 1.6cqw; border-radius: 1cqw; }
.rp-sn { position: absolute; z-index: 3; top: 3cqw; right: 3.5cqw; font: 800 4cqw var(--font-mono); color: #000; background: var(--pc); padding: .6cqw 1.8cqw; border-radius: 1cqw; box-shadow: 0 0 3cqw var(--pc); }
.rp-foil { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; }
.p-holo .rp-foil, .p-one .rp-foil { opacity: .55; background: conic-gradient(from 0deg at 30% 40%, #ff4fd8, #4ff3ff, #b8ff4f, #ffd84f, #ff4fd8); background-size: 200% 200%; animation: rpHolo 6s linear infinite; }
.p-one .rp-foil { opacity: .75; }
.p-gold .rp-foil { opacity: .45; background: linear-gradient(120deg, transparent 20%, #ffd76a 40%, transparent 55%, #fff1b8 70%, transparent 85%); background-size: 250% 100%; animation: rpHolo 5s linear infinite; }
.p-black .rp-card { border-color: #0a0a0a; box-shadow: inset 0 0 0 .8cqw var(--pc), 0 0 6cqw -1cqw var(--pc); }
@keyframes rpHolo { from { background-position: 0% 0%; } to { background-position: 200% 200%; } }
.rp-sample { position: absolute; z-index: 6; bottom: 1.2cqw; left: 50%; transform: translateX(-50%); font: 800 2.8cqw var(--font-mono); font-style: normal; letter-spacing: .25em; color: rgba(255,255,255,.75); }
.rp-back .rp-lab { background: linear-gradient(180deg, #e9ecf4, #d4d9e6); }
.rp-cback { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--pc) 35%, #0b0f24), #050714), repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2cqw, transparent 2cqw 4cqw); }
.rp-cback span { position: relative; z-index: 2; font: 900 16cqw Orbitron, sans-serif; letter-spacing: .06em; color: transparent; -webkit-text-stroke: .5cqw var(--pc); text-shadow: 0 0 6cqw var(--pc); }
.rp-photo { width: 100%; aspect-ratio: .6; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.4); }
.rp-photo img { width: 100%; height: 100%; object-fit: contain; }

/* result */
.rp-res { --rc: #fff; position: absolute; z-index: 7; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(640px, calc(100% - 28px)); display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 16px;
  background: rgba(6,8,20,.82); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 0 40px -12px var(--rc); backdrop-filter: blur(10px); animation: rpUp .45s cubic-bezier(.2,.8,.3,1); }
.rp-res[hidden] { display: none; }
@keyframes rpUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rp-rr { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.rp-rr > b { font: 800 19px/1.1 'Clash Display', Orbitron, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rr > span:not(.rp-rar) { font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rr small { font-size: 12px; color: rgba(255,255,255,.65); }
.rp-val { font: 800 24px/1.1 var(--font-mono); color: var(--rc); text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 50%, transparent); }
.rp-rar { --rc: #fff; justify-self: start; display: inline-block; font: 800 10.5px Orbitron, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #05060f; background: var(--rc); padding: 4px 9px; border-radius: 99px; box-shadow: 0 0 16px -2px var(--rc); }
.rp-ra { flex: 0 0 auto; display: grid; gap: 7px; width: 188px; }
.rp-sellb { min-height: 50px; }
.rp-keep, .rp-again { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #fff; font: 600 13px Satoshi, sans-serif; cursor: pointer; }
.rp-keep:hover, .rp-again:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); }

/* panel */
.rp-pkrow { display: flex; justify-content: space-between; align-items: center; }
.rp-pkn { display: flex; gap: 10px; align-items: baseline; }
.rp-pkn b { font: 800 16px Orbitron, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.rp-thrill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.rp-thrill .rc-tier { min-height: 0; padding: 8px 6px; }
.rp-thrill .rc-tier span { font-size: 10.5px; line-height: 1.25; color: rgba(255,255,255,.62); }
.rp-oddsh { display: flex; justify-content: space-between; align-items: center; }
.rp-link { background: none; border: 0; padding: 0; color: #2EF2FF; font: 600 12.5px Satoshi, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rp-odds { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 4px; }
.rp-odds li { --c: #fff; display: grid; grid-template-columns: 10px 1fr auto 70px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: 12.5px; }
.rp-odds li i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.rp-odds li b { color: var(--c); font-weight: 700; }
.rp-odds li span { color: rgba(255,255,255,.62); font-size: 11.5px; }
.rp-odds li em { font-style: normal; text-align: right; color: #fff; }
.rp-ev { margin: 2px 0 12px; }
.rp-go { width: 100%; }
.rp-balrow { display: flex; justify-content: space-between; margin: 10px 0 2px; font-size: 13px; color: rgba(255,255,255,.7); }
.rp-balrow b { color: #fff; }
.rp-vjump { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; font: 600 13px Satoshi, sans-serif; cursor: pointer; }
.rp-vjump b { font: 600 12px var(--font-mono); color: rgba(255,255,255,.75); }

/* vault + sets */
.rp-vsec { margin-top: 22px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
.rp-vh { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-vh h3 { margin: 0 0 2px; font: 800 20px 'Clash Display', Orbitron, sans-serif; }
.rp-vtools { display: flex; gap: 14px; align-items: center; }
.rp-vtools select { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 6px 8px; font: 500 13px Satoshi, sans-serif; }
.rp-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.rp-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.rp-set > div { display: grid; gap: 4px; flex: 1; min-width: 0; }
.rp-set b { font-size: 14px; } .rp-set span { font-size: 12px; color: rgba(255,255,255,.62); }
.rp-set.done { border-color: rgba(255,201,74,.6); box-shadow: 0 0 22px -10px #FFC94A; }
.rp-set em { font-style: normal; font-size: 12px; color: #FFC94A; }
.rp-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2EF2FF, #C8FF2E); border-radius: 3px; }
.rp-claim { flex: 0 0 auto; padding: 8px 10px; border-radius: 9px; border: 0; background: #FFC94A; color: #120b00; font: 700 12.5px Satoshi, sans-serif; cursor: pointer; }
.rp-claim:disabled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); cursor: not-allowed; }
.rp-vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rp-vc { --c: #fff; display: grid; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.rp-vc-c { padding: 0; border: 0; background: none; cursor: pointer; display: block; transition: transform .2s; }
.rp-vc-c:hover { transform: translateY(-3px) rotate(-1deg); }
.rp-vc-i { display: grid; gap: 3px; }
.rp-vc-i b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-vc-i span { font-size: 11.5px; }
.rp-sell { margin-top: 4px; padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(200,255,46,.4); background: rgba(200,255,46,.08); color: #E8FFB0; font: 600 12px Satoshi, sans-serif; cursor: pointer; }
.rp-sell:hover { background: rgba(200,255,46,.16); }
.rp-empty { grid-column: 1 / -1; padding: 18px 0; text-align: center; }

/* viewer + peek */
.rp-view { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(3,4,10,.78); backdrop-filter: blur(8px); }
.rp-view[hidden] { display: none; }
.rp-vw { position: relative; display: flex; gap: 26px; align-items: center; padding: 26px; border-radius: 20px; background: #0b0e1f; border: 1px solid rgba(255,255,255,.12); max-width: 760px; width: 100%; max-height: calc(100vh - 40px); overflow: auto; }
.rp-vw-c { width: min(300px, 45vw); flex: 0 0 auto; perspective: 1400px; cursor: pointer; aspect-ratio: .6; }
.rp-vw-i { display: grid; gap: 6px; min-width: 0; }
.rp-vw-i b { font: 800 22px 'Clash Display', Orbitron, sans-serif; }
.rp-vw-i > span:not(.rp-rar) { font-size: 13px; color: rgba(255,255,255,.7); }
.rp-vw-i strong { font: 800 26px var(--font-mono); color: #C8FF2E; }
.rp-peek { display: block; max-width: 980px; }
.rp-peek h3 { margin: 0 0 4px; font: 800 22px 'Clash Display', Orbitron, sans-serif; }
.rp-pk-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rp-pg { --c: #fff; display: grid; gap: 4px; }
.rp-pg > b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.rp-pg > span, .rp-pg > em { font-size: 11.5px; font-style: normal; }
.lt-grid.g4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1180px) {
  .rp-pk-grid { grid-template-columns: repeat(3, 1fr); }
  .lt-grid.g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rp-stage { min-height: 600px; border-radius: 14px; }
  .rp-hero { inset: 40px 0 128px; flex-direction: column; gap: 12px; }
  .rp-hpk { height: min(300px, 62%); }
  .rp-hinfo { min-width: 0; padding: 10px 16px; text-align: center; justify-items: center; }
  .rp-hinfo b { font-size: 22px; }
  .rp-shelf { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 12px 10px 10px; }
  .rp-shelf::-webkit-scrollbar { display: none; }
  .rp-shp { flex: 0 0 74px; width: 74px; padding: 6px 4px; }
  .rp-shp img { height: 58px; }
  .rp-pack { height: min(380px, 62%); margin-top: -90px; }
  .rp-res { flex-direction: column; align-items: stretch; gap: 10px; bottom: 10px; padding: 12px; }
  .rp-ra { width: auto; grid-template-columns: 1fr 1fr; }
  .rp-ra .rp-sellb { grid-column: 1 / -1; min-height: 46px; }
  .rp-sets { grid-template-columns: 1fr; }
  .rp-vault { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .rp-vw { flex-direction: column; padding: 20px 16px; gap: 14px; }
  .rp-vw-c { width: min(240px, 64vw); }
  .rp-pk-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-grid.g4 { grid-template-columns: 1fr; }
  .rp-sample-tag { font-size: 9.5px; top: 8px; }
}
html.rm .rp-hpk img, html.rm .rp-hpk::before, html.rm .rp-slab::after, html.rm .rp-foil, html.rm .rp-hint, html.rm .rp-hint span { animation: none !important; }
.rp-cq { width: 100%; container-type: inline-size; }
.rp-slab { container-type: normal; border-radius: 4.5cqw; }
.rp-rip.torn .rp-hint, .rp-rip.torn .rp-tl { display: none; }
@media (max-width: 760px) {
  .rp-rip.out .rp-card3d { transform: translateY(-30%) scale(.94); }
  .rp-res { gap: 8px; padding: 10px 12px; }
  .rp-rr { gap: 1px; }
  .rp-rr > b { font-size: 16px; }
  .rp-rr small { display: none; }
  .rp-val { font-size: 20px; }
  .rp-ra { gap: 6px; }
  .rp-ra .rp-sellb { min-height: 42px; }
  .rp-keep, .rp-again { padding: 8px 8px; font-size: 12.5px; }
}
.rp-ship { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.18); background: transparent; color: rgba(255,255,255,.45); font: 600 12.5px/1.2 Satoshi, sans-serif; cursor: not-allowed; }
.rp-ship i { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.rp-vw-i .rp-ship { width: 100%; margin-top: 4px; }
.rp-shipn { font-size: 11.5px; line-height: 1.4; }
.rp-ship { white-space: nowrap; padding: 6px 8px; gap: 6px; font-size: 12px; }
.rp-ship i { font-size: 9.5px; padding: 2px 5px; }
@media (max-width: 760px) {
  .rp-view { overflow-y: auto; place-items: start center; padding: 76px 12px 20px; }
  .rp-vw { max-height: none; overflow: visible; }
  .rp-vw-c { width: min(200px, 56vw); }
}

/* ================= WICK members-only games (Crown Safes, Velvet Hi-Lo, Black Wheel) ================= */
.vg-view { position: relative; }
.vg { position: relative; --c: #FFC94A; padding: 18px clamp(14px, 3vw, 34px) 30px; min-height: calc(100vh - 140px); isolation: isolate; }
.vg::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg) center / cover no-repeat; opacity: .55; }
.vg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, rgba(5,6,10,.25), rgba(5,6,10,.9) 70%), linear-gradient(180deg, rgba(5,6,10,.4), #05060A 96%); }
.vg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin: 0 auto; }
.vg-back { color: rgba(255,255,255,.7); font-size: 13px; text-decoration: none; }
.vg-back:hover { color: #fff; }
.vg-tag { font-size: 10.5px; letter-spacing: .18em; color: var(--c); padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 999px; background: rgba(0,0,0,.35); }
.vg-hero { max-width: 1240px; margin: 18px auto 16px; }
.vg-eye { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c); margin: 0 0 6px; }
.vg-hero h1 { font: 800 clamp(30px, 4.4vw, 52px)/1 Orbitron, Chakra Petch, sans-serif; letter-spacing: .02em; margin: 0; color: #fff; text-shadow: 0 0 28px color-mix(in srgb, var(--c) 45%, transparent); }
.vg-hero p:last-child { color: rgba(255,255,255,.72); max-width: 640px; margin: 10px 0 0; font-size: 15px; }
.vg-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.vg-stage { position: relative; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 28%, rgba(255,255,255,.08)); background: rgba(6,7,12,.55); backdrop-filter: blur(6px); padding: clamp(14px, 2.4vw, 28px); min-height: 460px; box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--c) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.05); }
.vg-panel { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(8,9,14,.82); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.vg-card { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px; }
.vg-lbl { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.vg-bet { display: grid; gap: 8px; }
.vg-betrow { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; }
.vg-betrow b { text-align: center; font-size: 18px; padding: 9px 6px; border-radius: 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08); }
.vg-bb { height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font-size: 20px; cursor: pointer; }
.vg-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.vg-chips button { padding: 7px 0; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); font: 700 11.5px Satoshi, sans-serif; cursor: pointer; }
.vg-chips button:hover:not(:disabled), .vg-bb:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.vg-chips button:disabled, .vg-bb:disabled { opacity: .4; cursor: default; }
.vg-go { width: 100%; min-height: 58px; display: grid; place-items: center; gap: 0; background: linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); color: #07080B; }
.vg-go small { font-size: 12px; opacity: .8; }
.vg-go.cash { background: linear-gradient(100deg, #C8FF2E, #2EF2FF); }
.vh-info > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.vh-info b { color: #fff; }
.vg-fair summary { cursor: pointer; font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.55); padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.vg-fair > div { padding: 10px 4px 0; display: grid; gap: 8px; font-size: 12px; }
.vg-fair code { word-break: break-all; font-size: 11px; color: rgba(255,255,255,.7); }
.vg-foot { max-width: 1240px; margin: 16px auto 0; }
.vg-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); pointer-events: none; z-index: 5; }
.vg-lock { min-height: 70vh; display: grid; place-items: center; padding: 30px 16px; background: radial-gradient(80% 60% at 50% 20%, rgba(255,201,74,.08), transparent), #05060A; }
.vg-lock-in { max-width: 460px; text-align: center; display: grid; gap: 12px; justify-items: center; padding: 30px 26px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,11,16,.9); }
.vg-lock-in h2 { font: 800 30px Orbitron, sans-serif; margin: 0; }
.vg-lock-in p { color: rgba(255,255,255,.72); margin: 0; }
.vg-join { min-width: 200px; text-decoration: none; }
.vg-bwheel .vg-lock { background: radial-gradient(80% 60% at 50% 20%, rgba(200,255,46,.08), transparent), #030304; }

/* Crown Safes */
.vs-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 18px); max-width: 620px; margin: 0 auto; perspective: 1200px; }
.vs-safe { position: relative; aspect-ratio: 1 / 1.05; border: 0; padding: 0; border-radius: 16px; background: linear-gradient(160deg, #1a1408, #0b0904); box-shadow: inset 0 0 0 1px rgba(255,201,74,.25), 0 16px 30px -18px #000; cursor: pointer; transform-style: preserve-3d; }
.vs-safe:disabled { cursor: default; }
.vs-in { position: absolute; inset: 8%; border-radius: 10px; display: grid; place-content: center; justify-items: center; gap: 2px; background: radial-gradient(circle at 50% 40%, rgba(255,201,74,.28), rgba(0,0,0,.6) 70%); color: #FFE7A3; }
.vs-in b { font: 800 clamp(16px, 2.3vw, 26px) Orbitron, sans-serif; text-shadow: 0 0 14px rgba(255,201,74,.7); }
.vs-in small { font-size: 11px; color: rgba(255,231,163,.65); letter-spacing: .08em; text-transform: uppercase; }
.vs-crown { width: 38px; height: 26px; background: linear-gradient(180deg, #FFF1B8, #FFC94A); clip-path: polygon(0 100%, 0 25%, 22% 60%, 50% 0, 78% 60%, 100% 25%, 100% 100%); filter: drop-shadow(0 0 8px #FFC94A); }
.vs-door { position: absolute; inset: 0; border-radius: 16px; transform-origin: 6% 50%; transition: transform .7s cubic-bezier(.3,.7,.2,1), opacity .7s; background: linear-gradient(145deg, #3a2c10 0%, #b98a2c 18%, #f3d58a 32%, #9a7020 52%, #5a3f12 74%, #c79b3a 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 7px rgba(255,230,160,.25), inset 0 0 26px rgba(0,0,0,.45); backface-visibility: hidden; }
.vs-dial { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(from 0deg, #2b2008 0 4deg, #6b5017 4deg 10deg), radial-gradient(circle, #f6dc93, #7a5a18); background-blend-mode: multiply; box-shadow: 0 0 0 4px rgba(40,28,8,.6), 0 0 0 7px rgba(255,226,150,.35), inset 0 0 12px rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.vs-dial i { position: absolute; left: 50%; top: 8%; width: 3px; height: 40%; margin-left: -1.5px; border-radius: 2px; background: #FFF1B8; box-shadow: 0 0 6px #FFC94A; }
.vs-bolt { position: absolute; right: 9%; width: 9%; height: 7%; border-radius: 3px; background: linear-gradient(90deg, #6b5017, #f6dc93); box-shadow: 0 2px 4px rgba(0,0,0,.5); transition: transform .35s; }
.vs-bolt.b1 { top: 22%; } .vs-bolt.b2 { bottom: 22%; }
.vs-num { position: absolute; left: 10%; top: 8%; font-size: 11px; color: rgba(40,28,8,.85); font-weight: 800; }
.vs-safe:not(:disabled):hover .vs-door { transform: rotateY(-8deg); }
.vs-safe.crack .vs-dial { transform: translate(-50%, -50%) rotate(540deg); }
.vs-safe.crack .vs-bolt { transform: translateX(60%); }
.vs-safe.open .vs-door { transform: rotateY(-104deg); }
.vs-safe.open { box-shadow: inset 0 0 0 1px rgba(255,201,74,.6), 0 0 40px -6px rgba(255,201,74,.55); }
.vs-safe.open.is-crown { box-shadow: inset 0 0 0 2px #FFF1B8, 0 0 60px -4px rgba(255,220,120,.85); }
.vs-safe.peek .vs-door { transform: rotateY(-104deg); opacity: 0; }
.vs-safe.peek .vs-in { opacity: .45; filter: grayscale(.4); }
.vs-total { text-align: center; margin-top: 18px; min-height: 52px; display: grid; justify-items: center; }
.vs-total span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vs-total b { font: 800 30px Orbitron, sans-serif; color: #FFE7A3; text-shadow: 0 0 20px rgba(255,201,74,.6); }
.vs-picks { display: flex; align-items: center; gap: 8px; }
.vs-picks i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,201,74,.35); }
.vs-picks i.on { background: linear-gradient(145deg, #f3d58a, #9a7020); box-shadow: 0 0 10px rgba(255,201,74,.5); }
.vs-picks b { margin-left: auto; font-size: 20px; color: #FFE7A3; }
.vs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-list span { font: 600 12px var(--font-mono); padding: 4px 8px; border-radius: 8px; background: rgba(255,201,74,.08); color: #FFE7A3; }
.vs-list span.cr { background: rgba(255,241,184,.18); color: #FFF1B8; }
.vs-next b { font-size: 20px; color: #FFE7A3; }

/* Velvet Hi-Lo */
.vg-vhilo .vg-stage { background: radial-gradient(90% 80% at 50% 40%, rgba(20,60,44,.55), rgba(6,10,9,.75) 70%); }
.vh-felt { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 330px; padding: 10px; }
.vh-deck { position: relative; justify-self: end; margin: 0; width: 110px; height: 154px; transform: rotate(-6deg); opacity: .85; }
.vh-cur { perspective: 900px; }
.vh-c { margin: 0 !important; }
.vh-cur .vh-c { width: 170px; height: 238px; border-radius: 14px; box-shadow: 0 26px 50px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.4), 0 0 50px -12px rgba(255,111,174,.6); }
.vh-cur .vh-c .cr, .vh-cur .vh-c .cb { font-size: 30px; } .vh-cur .vh-c .cr small, .vh-cur .vh-c .cb small { font-size: 22px; }
.vh-cur .vh-c .cc { font-size: 72px; }
.vh-cur .vh-c.flip { animation: vhFlip .42s cubic-bezier(.3,.7,.2,1); }
@keyframes vhFlip { from { transform: rotateY(90deg) translateY(-10px); } to { transform: none; } }
.vh-mult { justify-self: start; display: grid; gap: 2px; }
.vh-mult span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vh-mult b { font: 800 clamp(26px, 3.4vw, 44px) Orbitron, sans-serif; color: #FFD3E6; text-shadow: 0 0 22px rgba(255,111,174,.7); }
.vh-hist { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 64px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.vh-hist .vh-c.sm { width: 40px; height: 56px; border-radius: 6px; }
.vh-hist .vh-c.sm .cr { font-size: 13px; top: 4px; left: 5px; } .vh-hist .vh-c.sm .cr small { font-size: 10px; }
.vh-hist .vh-c.sm .cc, .vh-hist .vh-c.sm .cb { display: none; }
.vh-arw { font-style: normal; color: #C8FF2E; font-weight: 800; }
.vh-arw.bad { color: #FF3B5C; }
.vh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vh-acts:empty { display: none; }
.vh-btn { display: grid; gap: 3px; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(255,111,174,.4); background: rgba(255,111,174,.1); color: #fff; cursor: pointer; font: 700 14px Satoshi, sans-serif; }
.vh-btn span { font-size: 11.5px; color: #FFD3E6; font-weight: 600; }
.vh-btn:hover:not(:disabled) { background: rgba(255,111,174,.2); border-color: #FF6FAE; }
.vh-btn:disabled, .vh-skip:disabled { opacity: .45; cursor: default; }
.vh-skip { grid-column: 1 / -1; padding: 8px; border-radius: 11px; border: 1px dashed rgba(255,255,255,.18); background: transparent; color: rgba(255,255,255,.75); font: 600 12.5px Satoshi, sans-serif; cursor: pointer; }
.vh-skip small { color: rgba(255,255,255,.45); margin-left: 6px; }
.vg-stage.lose { animation: vgShake .5s; }
@keyframes vgShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Black Wheel */
.vg-bwheel .vg-stage { background: rgba(3,3,5,.7); display: grid; justify-items: center; gap: 14px; }
.bw-wrap { position: relative; width: min(100%, 640px); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.bw-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; filter: drop-shadow(0 0 46px rgba(200,255,46,.14)) drop-shadow(0 24px 40px rgba(0,0,0,.6)); transition: filter .5s, transform .9s cubic-bezier(.2,.8,.2,1); }
.bw-wrap.grab canvas { cursor: grabbing; }
.bw-wrap.black canvas { filter: drop-shadow(0 0 70px rgba(200,255,46,.5)) drop-shadow(0 0 30px rgba(255,63,180,.35)); transform: scale(1.04); }
.bw-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 29%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; pointer-events: none; background: radial-gradient(circle at 38% 30%, #23262E, #07080B 62%); box-shadow: inset 0 0 0 2px rgba(200,255,46,.55), inset 0 0 22px rgba(200,255,46,.18), 0 0 0 5px #0A0B0F, 0 0 0 7px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.6); }
.bw-hub span { font-size: clamp(8px, 1.4cqw, 11px); letter-spacing: .2em; color: rgba(200,255,46,.8); }
.bw-hub b { font: 800 clamp(16px, 2.9vw, 34px) Orbitron, sans-serif; color: #F4F6F1; text-shadow: 0 0 18px rgba(200,255,46,.6); line-height: 1.05; }
.bw-hub em { font-style: normal; font-size: clamp(8px, 1.2vw, 11px); color: rgba(255,255,255,.55); letter-spacing: .08em; min-height: 1em; }
.bw-banner { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%) scale(.6); opacity: 0; display: grid; justify-items: center; gap: 4px; padding: 16px 26px; border-radius: 18px; background: rgba(4,5,8,.86); border: 1px solid rgba(200,255,46,.6); box-shadow: 0 0 60px rgba(200,255,46,.35); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.2,1.4,.3,1); text-align: center; }
.bw-banner.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bw-banner span { font-size: 11px; letter-spacing: .3em; color: #C8FF2E; }
.bw-banner b { font: 800 clamp(16px, 3vw, 28px) Orbitron, sans-serif; color: #fff; text-shadow: 0 0 20px #C8FF2E; }
.bw-banner em { font-style: normal; font-size: 12px; color: #FF7AD9; }
.bw-tip { position: absolute; z-index: 5; transform: translate(14px, 14px); padding: 7px 10px; border-radius: 10px; background: rgba(5,6,10,.92); border: 1px solid rgba(255,255,255,.14); font-size: 11.5px; color: rgba(255,255,255,.75); white-space: nowrap; pointer-events: none; }
.bw-tip b { color: #fff; margin-right: 6px; }
.bw-hint { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(200,255,46,.65); pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.bw-hint.off { opacity: 0; } .bw-hint.warn { opacity: 1; color: #FF7A8F; }
.bw-stats { display: flex; gap: 18px; justify-content: center; font-size: 11.5px; color: rgba(255,255,255,.5); letter-spacing: .06em; }
.bw-stats b { color: #F4F6F1; margin-left: 4px; }
.bw-last { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 28px; }
.bw-last span { font: 700 11.5px var(--font-mono); padding: 4px 8px; border-radius: 8px; color: #05060A; background: var(--c); animation: bwIn .4s cubic-bezier(.2,1.4,.3,1); }
.bw-last span.z { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
@keyframes bwIn { from { transform: scale(.4); opacity: 0; } }
html.rm .bw-last span { animation: none; } html.rm .bw-wrap canvas, html.rm .bw-banner { transition: none; }
.bw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bw-tog { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(255,255,255,.75); font: 700 12px Satoshi, sans-serif; cursor: pointer; }
.bw-tog.on { border-color: #C8FF2E; color: #0A0B10; background: #C8FF2E; }
.bw-free { display: grid; gap: 2px; padding: 10px; border-radius: 14px; border: 1px solid rgba(200,255,46,.45); background: rgba(200,255,46,.08); color: #fff; cursor: pointer; font: 700 14px Satoshi, sans-serif; }
.bw-free span { font-size: 11.5px; color: rgba(200,255,46,.85); font-weight: 600; }
.bw-free:disabled { opacity: .5; cursor: default; border-style: dashed; }
.bw-odds { display: grid; gap: 4px; }
.bw-odds div { display: grid; grid-template-columns: 12px 1fr auto 46px; gap: 8px; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.8); padding: 4px 6px; border-radius: 8px; cursor: default; transition: background .2s; }
.bw-odds div:hover, .bw-odds div.on { background: rgba(255,255,255,.06); }
.bw-odds em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.5); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bw-odds em img, .bw-odds em svg, .bw-odds em i { width: 11px; height: 11px; box-shadow: none; }
.bw-odds b { text-align: right; }
.bw-odds i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.bw-inn { display: flex; flex-wrap: wrap; gap: 5px; }
.bw-inn span { display: grid; justify-items: center; min-width: 46px; padding: 5px 6px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.bw-inn b { font: 800 12px Orbitron, sans-serif; color: var(--c); } .bw-inn i { font: 600 10px var(--font-mono); font-style: normal; color: rgba(255,255,255,.5); }
.bw-cele .jc-t { font-size: clamp(26px, 8cqw, 72px); }

@media (max-width: 900px) {
  .vg-grid { grid-template-columns: 1fr; }
  .vg-stage { min-height: 0; }
  .vh-felt { grid-template-columns: 1fr; justify-items: center; min-height: 0; gap: 12px; }
  .vh-deck { display: none; }
  .vh-mult { justify-self: center; text-align: center; justify-items: center; }
  .vh-cur .vh-c { width: 140px; height: 196px; }
}
.ss-spots.ss-pt-ico { position: relative; inset: auto; width: 52px; height: 52px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ss-spots.ss-pt-ico i { margin: 0; font-size: 18px; color: #fff; }
@media (max-width: 700px) {
  .vg { padding-top: 12px; }
  .vg-hero { margin: 10px auto 10px; }
  .vg-hero h1 { font-size: 28px; }
  .vg-hero p:last-child { font-size: 13px; margin-top: 6px; }
  .vg-tag { font-size: 9px; letter-spacing: .12em; }
  .vg-stage { padding: 12px; border-radius: 18px; }
  .vh-cur .vh-c { width: 120px; height: 168px; }
  .vh-cur .vh-c .cc { font-size: 52px; }
  .vs-in small { font-size: 9px; }
}

/* ---------- STAKES: tap-to-type bet ---------- */
.stk-ed { cursor: text; position: relative; border-radius: 8px; outline: none; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.stk-ed::after { content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 6px; vertical-align: 0; opacity: .45; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zm13.7-15.3 1.6 1.6a1 1 0 0 1 0 1.4L18 9l-3-3 1.3-1.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zm13.7-15.3 1.6 1.6a1 1 0 0 1 0 1.4L18 9l-3-3 1.3-1.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.stk-ed:hover, .stk-ed:focus-visible { background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(46,242,255,.35); }
.stk-ed:hover::after, .stk-ed:focus-visible::after { opacity: .9; }
.stk-pop { position: fixed; z-index: 9000; width: 280px; padding: 14px; border-radius: 16px; background: rgba(14,15,18,.97); border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(46,242,255,.12), 0 0 30px rgba(46,242,255,.08); backdrop-filter: blur(10px); animation: stkin .18s var(--ease); }
.stk-pop[hidden] { display: none; }
@keyframes stkin { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.stk-l { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-2); margin-bottom: 8px; }
.stk-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; border-radius: 12px; background: var(--void); border: 1px solid var(--line-2); }
.stk-row:focus-within { border-color: var(--plasma); box-shadow: 0 0 0 3px rgba(46,242,255,.15); }
.stk-in { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--bone); font-size: 20px; font-weight: 700; }
.stk-in::placeholder { color: #4b5059; }
.stk-q { display: flex; gap: 6px; margin-top: 10px; }
.stk-q button { flex: 1; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--steel-2); font: 600 12px var(--font-body); cursor: pointer; }
.stk-q button:hover { color: var(--bone); border-color: var(--plasma); }
.stk-h { min-height: 18px; margin: 9px 2px 0; font-size: 12px; color: var(--steel); line-height: 1.4; }
.stk-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.stk-act .btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- GOLD RUSH ---------- */
.lt-grid.arc5 .lt.wide:last-child { grid-column: span 6; min-height: 300px; }
@media (max-width: 1000px) { .lt-grid.arc5 .lt.wide:last-child { grid-column: span 2; } }
@media (max-width: 640px) { .lt-grid.arc5 .lt.wide:last-child { grid-column: span 1; } }
.ax-gold .ax-h2 { background: linear-gradient(100deg, #fff 0%, #ffd76a 45%, #2ef2ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-gold .wr-stage { height: clamp(420px, 76vh, 780px); }
@media (max-width: 1100px) { .ax-gold .wr-stage { height: clamp(380px, 66vw, 640px); } }
.ax-gold .wr-stage { border-color: rgba(255,215,106,.3); box-shadow: 0 0 0 1px rgba(46,242,255,.08), 0 24px 70px -24px rgba(255,176,46,.35); }
.ax-gold .wr-cash, .ax-gold .wr-go { background: linear-gradient(100deg, #ffd76a, #ffb02e); color: #1a1003; }
.ax-gold .wr-cash.live, .ax-gold .wr-go.live { background: linear-gradient(100deg, #c8ff2e, #2ef2ff); color: #061016; }
.gr-ctl { display: flex; justify-content: center; }
.gr-ctl .wr-cash { flex: 0 1 320px; min-width: 0; }
.ax-gold .wr-stage.gr-stage, .gr-stage canvas { touch-action: pan-y; }
.ax-gold .wr-stage.gr-stage:has(canvas.gr-live), .gr-stage canvas.gr-live { touch-action: none; }
.wr-sub .gr-b { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .72em; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.gr-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 4px 0 12px; color: var(--steel-2); }
.gr-key span { display: flex; align-items: center; gap: 7px; line-height: 1.3; }
.gr-key span:last-child { grid-column: 1 / -1; }
.gk { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.gk.coin-k { background: #ffd76a; box-shadow: 0 0 8px #ffb02e; width: 9px; height: 9px; }
.gk.stack-k { background: linear-gradient(#ffd76a, #c9952b); border-radius: 3px; }
.gk.orb-k { background: radial-gradient(circle at 35% 35%, #fff, #ff3fb4 55%); box-shadow: 0 0 8px #ff3fb4; }
.gk.vault-k { background: #3a2a08; border: 1.5px solid #ffd76a; border-radius: 3px; }
.gk.exit-k { border: 1.5px solid #2ef2ff; box-shadow: 0 0 6px #2ef2ff; }
.gk.boost-k { border: 1.5px solid #b18cff; border-radius: 3px; transform: rotate(45deg); width: 10px; height: 10px; }
@media (max-width: 760px) { .ax-gold .wr-stage { height: clamp(520px, 150vw, 680px); } .ax-gold .wr-keys { display: none; } }
.pz-live[data-state="local"] { border-color: rgba(255,92,120,.5); color: #ffb3c0; }
.pz-live[data-state="local"] i { background: #ff5c78; }
.pz-live[data-state="connecting"] { border-color: rgba(255,215,106,.45); }
.pz-live[data-state="connecting"] i { background: #ffd76a; box-shadow: 0 0 8px #ffd76a; }
.pz-off:empty { display: none; }
.pz-room { margin-left: 2px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(46,242,255,.4); background: rgba(46,242,255,.08); color: #9ff7ff; font: 600 .8rem/1 inherit; cursor: pointer; }
.pz-room:hover { background: rgba(46,242,255,.16); }
.ax-gold .wr-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 6px; max-width: 94%; margin: 0 auto; }
.ax-gold .wr-sub .gr-b { margin-left: 0; white-space: nowrap; }
@media (max-width: 760px) { .ax-gold .wr-sub { font-size: .72rem; } }

/* ================= New originals + Roulette (calm lofi glass) ================= */
.og-felt { overflow: hidden; isolation: isolate; background: #07070f; }
.og-felt > .og-bg { position: absolute !important; inset: -30px; z-index: 0 !important; background: var(--bg) center / cover no-repeat; filter: blur(18px) brightness(.32) saturate(.85); transform: scale(1.06); pointer-events: none; }
.og-felt::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(120,90,255,.08), transparent 60%), linear-gradient(180deg, rgba(5,5,12,.15), rgba(5,5,12,.55)); }
.og-felt > *:not(.og-bg) { position: relative; z-index: 3; }
.og-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.og-eye { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); opacity: .85; }
.og-title h2 { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .02em; color: #f3f4fa; }
.og-hist { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.og-hist span { padding: 3px 8px; border-radius: 999px; font-size: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(12,12,26,.55); color: #c9cde0; }
.og-hist span.hi { color: #d9ff80; border-color: rgba(200,255,46,.35); }
.og-hist span.lo { color: #ff9aae; border-color: rgba(255,59,92,.3); }
.og-hist span.ro-r { background: rgba(196,20,46,.5); color: #fff; border-color: rgba(255,90,110,.4); }
.og-hist span.ro-b { background: rgba(20,22,30,.85); color: #fff; }
.og-hist span.ro-g { background: rgba(13,156,87,.55); color: #fff; border-color: rgba(60,220,140,.45); }
.og-felt .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,205,230,.6); }
.og-felt.shake { animation: ogShake .42s ease; }
@keyframes ogShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.og-felt .seg button[aria-pressed="true"] { background: var(--bone); color: #0A0B0D; }

/* ---------- Mines ---------- */
.mn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 1vw, 10px); max-width: 470px; width: 100%; margin: 0 auto; padding: 12px; border-radius: 18px; background: rgba(10,10,22,.5); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 40px rgba(0,0,0,.4); }
.mn-t { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.mn-f { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; backface-visibility: hidden; transition: transform .32s cubic-bezier(.3,.7,.3,1); }
.mn-back { background: linear-gradient(160deg, #262a3a, #151824 60%, #10121b); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.4), 0 6px 14px -8px rgba(0,0,0,.8); }
.mn-front { transform: rotateY(180deg); background: radial-gradient(circle at 50% 40%, rgba(60,255,160,.16), rgba(10,14,22,.95) 70%); border: 1px solid rgba(60,255,160,.4); }
.mn-front svg { width: 62%; height: 62%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.mn-grid.mn-live .mn-t:not(.open):hover .mn-back { background: linear-gradient(160deg, #303650, #1b1f30 60%, #141725); border-color: rgba(46,242,255,.45); transform: translateY(-2px); }
.mn-grid:not(.mn-live) .mn-t:not(.open) { cursor: default; }
.mn-t.flip .mn-back, .mn-t.open .mn-back { transform: rotateY(180deg); }
.mn-t.open .mn-front { transform: rotateY(0); }
.mn-t.mine .mn-front { background: radial-gradient(circle at 50% 45%, rgba(255,59,92,.3), rgba(16,8,12,.96) 70%); border-color: rgba(255,59,92,.5); }
.mn-t.boom .mn-front { box-shadow: 0 0 0 2px #ff3b5c, 0 0 28px rgba(255,59,92,.6); }
.mn-t.dim .mn-front { opacity: .38; filter: saturate(.6); }
.mn-t.gem:not(.dim) .mn-front { box-shadow: 0 0 18px rgba(60,255,160,.25); }
.mn-side { display: flex; flex-direction: column; gap: 12px; }
.mn-now { font-size: 30px; font-weight: 700; color: #eaffc0; text-shadow: 0 0 18px rgba(200,255,46,.25); display: flex; flex-direction: column; line-height: 1.1; }
.mn-now small { font-size: 12px; font-weight: 500; color: rgba(210,215,235,.7); letter-spacing: .04em; }
.mn-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mn-s { padding: 6px 4px; border-radius: 9px; text-align: center; background: rgba(12,12,26,.6); border: 1px solid rgba(255,255,255,.08); }
.mn-s small { display: block; font-size: 10px; color: rgba(200,205,230,.55); }
.mn-s b { font-size: 13px; color: #e8eaf6; }
.mn-s.done { opacity: .45; } .mn-s.now { border-color: rgba(200,255,46,.6); background: rgba(200,255,46,.1); } .mn-s.now b { color: #d9ff80; }
.mn-pick { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(12,12,26,.55); border: 1px solid rgba(255,255,255,.08); }
.mn-stepper { display: flex; align-items: center; gap: 10px; }
.mn-stepper button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font-size: 18px; cursor: pointer; }
.mn-stepper b { font-size: 24px; min-width: 34px; text-align: center; color: #fff; }
.mn-count { display: flex; } .mn-count button { flex: 1; padding: 6px 0; }
@media (max-width: 760px) { .mn-wrap { display: contents; } .mn-grid { order: 0; padding: 8px; } .mn-side { order: 3; } .mn-now { font-size: 24px; flex-direction: row; align-items: baseline; gap: 10px; } .mn-ladder { grid-template-columns: repeat(6, 1fr); } .mn-s b { font-size: 11px; } }

/* ---------- Dice + Limbo shared stat cards ---------- */
.dc-stage, .lb-stage { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 18px; background: rgba(10,10,22,.5); border: 1px solid rgba(255,255,255,.08); }
.dc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.lb-stats { grid-template-columns: minmax(200px, 1.4fr) 1fr 1fr; }
.dc-s { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(12,12,26,.6); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.dc-s b { font-size: 18px; color: #f3f4fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-line { display: flex; gap: 6px; align-items: center; }
.dc-line input { width: 100%; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; font-size: 16px; padding: 6px 8px; }
.dc-mode { align-self: center; }
@media (max-width: 760px) { .dc-stats, .lb-stats { grid-template-columns: 1fr 1fr; } .lb-stats .dc-s:first-child { grid-column: 1 / -1; } }

/* ---------- Dice ---------- */
.dc-res { align-self: center; display: flex; flex-direction: column; align-items: center; }
.dc-res span { font-size: clamp(44px, 7vw, 72px); font-weight: 700; color: #f3f4fa; letter-spacing: .02em; line-height: 1; text-shadow: 0 0 24px rgba(160,170,255,.2); }
.dc-res .q { opacity: .35; }
.dc-res small { margin-top: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,205,230,.6); }
.dc-res.win span { color: #d9ff80; text-shadow: 0 0 26px rgba(200,255,46,.35); }
.dc-res.lose span { color: #ff8da1; text-shadow: 0 0 22px rgba(255,59,92,.25); }
.dc-res.spin span { opacity: .75; }
.dc-track { position: relative; padding: 26px 6px 22px; --p: 50.5%; --r: 0%; --b0: 0%; }
.dc-rail { position: relative; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.dc-rail i { position: absolute; top: 0; bottom: 0; }
.dc-lose { left: 0; width: var(--p); background: linear-gradient(90deg, rgba(255,59,92,.55), rgba(255,59,92,.8)); }
.dc-win { left: var(--p); right: 0; background: linear-gradient(90deg, rgba(200,255,46,.85), rgba(160,230,40,.6)); }
.dc-track.under .dc-lose { left: var(--p); right: 0; width: auto; background: linear-gradient(90deg, rgba(255,59,92,.8), rgba(255,59,92,.55)); }
.dc-track.under .dc-win { left: 0; right: auto; width: var(--p); }
.dc-band { left: var(--b0); width: 10%; background: rgba(255,255,255,.4); opacity: 0; transition: opacity .2s; }
.dc-track.band .dc-band { opacity: 1; animation: dcBand .9s ease-in-out infinite alternate; }
@keyframes dcBand { from { opacity: .25; } to { opacity: .6; } }
.dc-track input[type=range] { position: absolute; left: 6px; right: 6px; top: 22px; width: calc(100% - 12px); height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dc-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(160deg, #f5f7ff, #b9bfd4); border: 2px solid #0b0c12; box-shadow: 0 4px 14px rgba(0,0,0,.6); }
.dc-track input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(160deg, #f5f7ff, #b9bfd4); border: 2px solid #0b0c12; }
.dc-track input[type=range]::-webkit-slider-runnable-track { background: none; }
.dc-pin { position: absolute; top: 0; left: calc(6px + (100% - 12px) * var(--r) / 100%); translate: -50% 0; opacity: 0; padding: 3px 8px; border-radius: 8px; font: 700 12px var(--font-mono, monospace); background: #fff; color: #0a0b0d; transition: left .45s cubic-bezier(.3,.8,.3,1); pointer-events: none; }
.dc-track.hasr .dc-pin { opacity: 1; }
.dc-pin.win { background: #c8ff2e; } .dc-pin.lose { background: #ff6680; color: #fff; }
.dc-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: rgba(200,205,230,.45); }

/* ---------- Limbo ---------- */
.lb-dial { --v: 0; --tg: .3; position: relative; width: min(100%, 420px); aspect-ratio: 2 / 1.12; margin: 0 auto; }
.lb-arc { position: absolute; inset: 0 0 auto; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 270deg, rgba(200,255,46,.85) calc(var(--v) * 180deg), rgba(255,255,255,.07) 0 180deg, transparent 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 81% 97%, transparent 98%); mask: radial-gradient(circle closest-side, transparent 80%, #000 81% 97%, transparent 98%); }
.lb-felt.lost .lb-arc { background: conic-gradient(from 270deg, rgba(255,59,92,.8) calc(var(--v) * 180deg), rgba(255,255,255,.07) 0 180deg, transparent 0); }
.lb-dial { container-type: inline-size; }
.lb-tg { position: absolute; left: 50%; top: 50cqw; width: 0; height: 0; transform: rotate(calc(-90deg + var(--tg) * 180deg)); }
.lb-tg::before { content: ""; position: absolute; left: -1.5px; top: -50cqw; width: 3px; height: 11cqw; background: #ffd76a; box-shadow: 0 0 10px #ffd76a; border-radius: 2px; }
.lb-tg span { position: absolute; left: 0; top: calc(-50cqw - 20px); translate: -50% 0; font-size: 11px; color: #ffd76a; white-space: nowrap; transform: rotate(calc(90deg - var(--tg) * 180deg)); }
.lb-num { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: clamp(40px, 7vw, 66px); font-weight: 700; color: #f3f4fa; }
.lb-num.fly { color: #eef2ff; } .lb-num.win { color: #d9ff80; text-shadow: 0 0 26px rgba(200,255,46,.35); } .lb-num.lose { color: #ff8da1; }
.lb-cap { position: absolute; left: 0; right: 0; top: 64%; text-align: center; }
.lb-quick { display: flex; gap: 6px; } .lb-quick button { flex: 1; padding: 5px 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #dfe2f0; font: 600 12px var(--font-display); cursor: pointer; }
.lb-quick button:disabled, .dc-line button:disabled { opacity: .5; }

/* ---------- Crash ---------- */
.cr-stage { position: relative; height: clamp(260px, 42vh, 400px); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(10,10,24,.55), rgba(6,6,14,.75)); border: 1px solid rgba(255,255,255,.08); }
.cr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cr-hud { position: absolute; left: 0; right: 0; top: 16%; text-align: center; pointer-events: none; }
.cr-num { font-size: clamp(44px, 8vw, 78px); font-weight: 700; color: #f3f4fa; text-shadow: 0 0 30px rgba(46,242,255,.25); line-height: 1; }
.cr-num.cashed { color: #d9ff80; } .cr-num.crash { color: #ff5c78; text-shadow: 0 0 30px rgba(255,59,92,.4); }
.cr-sub { margin-top: 8px; color: rgba(210,215,235,.75); }
.cr-set { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cr-set input[type=number] { width: 110px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; font-size: 16px; padding: 6px 8px; }
#crGo { display: none; }

#roChips .chip[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 3px; transform: translateY(-3px); }

.cr-sub { font-size: 14px; }
.cr-set { padding: 10px 14px; border-radius: 14px; background: rgba(10,12,24,.6); border: 1px solid rgba(255,255,255,.08); align-self: center; }

/* ---------- Roulette v2 ---------- */
.dc-stats.lb-stats { grid-template-columns: minmax(230px, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
@media (max-width: 760px) { .dc-stats.lb-stats { grid-template-columns: 1fr 1fr !important; } }
.lb-stats .dc-line input { text-align: center; font-size: 18px; }
.lb-quick button:hover:not(:disabled) { border-color: rgba(var(--acc), .6); color: #fff; }
.dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: minmax(0, 1fr) minmax(160px, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
@media (max-width: 760px) { .dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: 1fr 1fr !important; } }
.dc-line input { font-size: 17px !important; }
.dc-s b { font-size: clamp(14px, 1.25vw, 18px) !important; text-overflow: clip !important; }
.dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: minmax(0, 1fr) minmax(150px, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) !important; }
.dc-line { display: flex; gap: 6px; align-items: center; min-width: 0; }
.dc-line input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 6px 6px !important; font-size: 16px !important; text-align: center; -moz-appearance: textfield; }
.dc-line input::-webkit-outer-spin-button, .dc-line input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-line .btn { flex: 0 0 34px; width: 34px; padding: 0 !important; }
.dc-stage .dc-s .lbl { white-space: nowrap; letter-spacing: .06em; font-size: 10px; }
@media (max-width: 760px) { .dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: 1fr 1fr !important; } }

/* ================= WICK Originals v2: high-quality screens ================= */
.mn-felt { --acc: 92,255,176; } .dc-felt { --acc: 46,242,255; } .lb-felt { --acc: 140,107,255; } .cr-felt { --acc: 46,242,255; } .ro-felt { --acc: 255,59,92; }
.og-felt { gap: 16px; }
.og-felt::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 45% at 50% 0%, rgba(var(--acc), .10), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(140,107,255,.08), transparent 70%); }
.og-eye { color: rgb(var(--acc)); }
.og-title h2 { font-size: clamp(26px, 2.8vw, 34px); text-shadow: 0 0 24px rgba(var(--acc), .25); }
/* the screen frame shared by every board */
.mn-board, .dc-stage, .lb-stage, .cr-stage, .ro-stagebox { position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(90% 60% at 50% 0%, rgba(var(--acc), .07), transparent 70%), linear-gradient(180deg, rgba(14,13,30,.82), rgba(7,7,15,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(var(--acc), .05), 0 30px 60px -34px rgba(0,0,0,.9); }
.mn-board::after, .dc-stage::after, .lb-stage::after, .cr-stage::after, .ro-stagebox::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border-radius: 14px; z-index: 0;
  background: linear-gradient(rgb(var(--acc)) 0 0) left top / 16px 1.5px, linear-gradient(rgb(var(--acc)) 0 0) left top / 1.5px 16px, linear-gradient(rgb(var(--acc)) 0 0) right top / 16px 1.5px, linear-gradient(rgb(var(--acc)) 0 0) right top / 1.5px 16px,
    linear-gradient(rgb(var(--acc)) 0 0) left bottom / 16px 1.5px, linear-gradient(rgb(var(--acc)) 0 0) left bottom / 1.5px 16px, linear-gradient(rgb(var(--acc)) 0 0) right bottom / 16px 1.5px, linear-gradient(rgb(var(--acc)) 0 0) right bottom / 1.5px 16px;
  background-repeat: no-repeat; opacity: .45; }
.og-felt .status { font-size: clamp(16px, 1.6vw, 20px); }
.og-back { display: inline-flex; align-items: center; margin-left: 8px; padding: 5px 12px; border-radius: 999px; background: #05070b; border: 1px solid rgba(var(--ng, 61,255,154), .75); box-shadow: 0 0 12px rgba(var(--ng, 61,255,154), .35); color: #EAFFF2 !important; font: 700 13px var(--font-body); text-decoration: none; vertical-align: middle; }
.og-nudge { animation: ogNudge .5s ease; } @keyframes ogNudge { 30% { transform: translateY(-3px); } 60% { transform: translateY(2px); } }

/* ---------- Mines v2: big board, side info underneath ---------- */
.mn-wrap { display: flex !important; flex-direction: column; gap: 14px; align-items: stretch; }
.mn-board { padding: clamp(10px, 1.6vw, 18px); width: 100%; max-width: 640px; margin: 0 auto; }
.mn-grid { position: relative; z-index: 1; max-width: none !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; gap: clamp(7px, 1.2vw, 12px) !important; }
.mn-f { border-radius: clamp(10px, 1.2vw, 14px); }
.mn-back { background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.08), transparent 55%), linear-gradient(170deg, #22263a, #141726 60%, #0f111c) !important; border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.45), 0 5px 0 -1px #07080e, 0 10px 18px -10px rgba(0,0,0,.9) !important; }
.mn-back::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgba(var(--acc), .14); box-shadow: 0 0 12px rgba(var(--acc), .08); }
.mn-grid.mn-live .mn-t:not(.open):hover .mn-back { background: radial-gradient(120% 90% at 30% 0%, rgba(var(--acc), .16), transparent 60%), linear-gradient(170deg, #283048, #171b2c 60%, #11131f) !important; border-color: rgba(var(--acc), .55) !important; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 0 -1px #07080e, 0 0 22px rgba(var(--acc), .22) !important; }
.mn-grid.mn-live .mn-t:not(.open):hover .mn-back::after { border-color: rgba(var(--acc), .5); }
.mn-front { background: radial-gradient(circle at 50% 42%, rgba(92,255,176,.28), rgba(8,18,16,.96) 68%) !important; border: 1px solid rgba(92,255,176,.5) !important; }
.mn-front svg { width: 66% !important; height: 66% !important; filter: drop-shadow(0 0 14px rgba(92,255,176,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.6)) !important; }
.mn-t.gem.open:not(.dim) .mn-front svg { animation: mnPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes mnPop { from { transform: scale(.4) rotate(-12deg); } to { transform: none; } }
.mn-t.gem:not(.dim) .mn-front { box-shadow: 0 0 26px rgba(92,255,176,.35), inset 0 0 18px rgba(92,255,176,.18) !important; }
.mn-t.mine .mn-front { background: radial-gradient(circle at 50% 45%, rgba(255,59,92,.4), rgba(20,6,10,.97) 70%) !important; border-color: rgba(255,59,92,.6) !important; }
.mn-t.mine .mn-front svg { filter: drop-shadow(0 0 12px rgba(255,59,92,.6)) !important; }
.mn-t.boom .mn-front { animation: mnBoom .6s ease-out; box-shadow: 0 0 0 2px #ff3b5c, 0 0 40px rgba(255,59,92,.8) !important; }
@keyframes mnBoom { 0% { transform: scale(1.18); filter: brightness(2); } 100% { transform: none; filter: none; } }
.mn-t.dim .mn-front { opacity: .32 !important; }
.mn-side { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; }
.mn-now { grid-column: 1; flex-direction: row !important; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(10,12,24,.7); border: 1px solid rgba(var(--acc), .22); font-size: 30px !important; color: #e8fff2 !important; text-shadow: 0 0 20px rgba(var(--acc), .35) !important; }
.mn-ladder { grid-column: 1; }
.mn-pick { grid-column: 2; grid-row: 1 / span 2; }
.mn-s.now { border-color: rgba(var(--acc), .7) !important; background: rgba(var(--acc), .12) !important; } .mn-s.now b { color: #b9ffd9 !important; }
@media (max-width: 760px) { .mn-side { grid-template-columns: 1fr; } .mn-pick { grid-column: 1; grid-row: auto; } .mn-now { font-size: 24px !important; } }

/* ---------- Dice v2 ---------- */
.dc-stage { padding: clamp(16px, 2vw, 24px) !important; gap: 18px !important; }
.dc-stage > * { position: relative; z-index: 1; }
.dc-res { position: relative; padding: 8px 40px 4px; }
.dc-res::before { content: ""; position: absolute; inset: -6px 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--acc), .14), transparent); }
.dc-res span { font-size: clamp(56px, 8vw, 92px) !important; text-shadow: 0 0 30px rgba(var(--acc), .28) !important; }
.dc-res.spin span { filter: blur(.6px); }
.dc-track { padding: 34px 8px 24px !important; }
.dc-rail { height: 18px !important; background: rgba(0,0,0,.5) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 3px 6px rgba(0,0,0,.6) !important; }
.dc-lose { background: linear-gradient(90deg, rgba(255,59,92,.45), rgba(255,59,92,.85)) !important; box-shadow: 0 0 16px rgba(255,59,92,.35); }
.dc-win { background: linear-gradient(90deg, #c8ff2e, rgba(160,240,60,.7)) !important; box-shadow: 0 0 18px rgba(200,255,46,.45); }
.dc-track.under .dc-lose { background: linear-gradient(90deg, rgba(255,59,92,.85), rgba(255,59,92,.45)) !important; }
.dc-rail::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.35) calc(10% - 1px) 10%); pointer-events: none; }
.dc-track input[type=range] { top: 28px !important; height: 30px !important; }
.dc-track input[type=range]::-webkit-slider-thumb { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: linear-gradient(160deg, #ffffff, #c9cfe2) !important; box-shadow: 0 0 0 4px rgba(var(--acc), .18), 0 6px 16px rgba(0,0,0,.7) !important; }
.dc-pin { top: -2px !important; padding: 5px 10px !important; border-radius: 10px !important; font-size: 13px !important; box-shadow: 0 6px 18px rgba(0,0,0,.6); transition: left .6s cubic-bezier(.2,.9,.25,1.15) !important; }
.dc-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; border: 5px solid transparent; border-bottom: 0; border-top-color: inherit; border-top-color: currentColor; opacity: 0; }
.dc-pin.win { background: #c8ff2e !important; box-shadow: 0 0 22px rgba(200,255,46,.55), 0 6px 18px rgba(0,0,0,.6); } .dc-pin.lose { background: #ff4d6d !important; box-shadow: 0 0 22px rgba(255,59,92,.5), 0 6px 18px rgba(0,0,0,.6); }
.dc-ticks { font-size: 12px !important; color: rgba(200,205,230,.55) !important; }
.dc-s { background: rgba(10,12,24,.72) !important; border-color: rgba(255,255,255,.08) !important; }
.dc-s b { font-size: 20px !important; }
.dc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .dc-stats { grid-template-columns: 1fr 1fr !important; } }

/* ---------- Limbo v2: canvas gauge ---------- */
.lb-stage { padding: clamp(14px, 2vw, 22px) !important; }
.lb-stage > * { position: relative; z-index: 1; }
.lb-dial { width: min(100%, 460px) !important; aspect-ratio: 1 / .86 !important; }
.lb-dial canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.lb-num { top: 42% !important; translate: 0 -50%; font-size: clamp(48px, 7.5vw, 80px) !important; text-shadow: 0 0 30px rgba(var(--acc), .3); pointer-events: none; }
.lb-num.win { color: #d9ff80 !important; text-shadow: 0 0 34px rgba(200,255,46,.45) !important; } .lb-num.lose { color: #ff8da1 !important; text-shadow: 0 0 30px rgba(255,59,92,.35); }
.lb-cap { top: auto !important; bottom: 14% !important; color: rgba(210,215,235,.7); pointer-events: none; }
.lb-cap b { color: #FFD76A; }
.lb-felt.won .lb-stage { box-shadow: inset 0 0 0 1px rgba(200,255,46,.25), 0 0 40px -10px rgba(200,255,46,.35), 0 30px 60px -34px rgba(0,0,0,.9); }
.lb-felt.lost .lb-stage { box-shadow: inset 0 0 0 1px rgba(255,59,92,.2), 0 30px 60px -34px rgba(0,0,0,.9); }

/* ---------- Crash v2 ---------- */
.cr-stage { height: clamp(320px, 50vh, 480px) !important; background: #08070f !important; }
.cr-stage::after { z-index: 2; }
.cr-hud { top: 12% !important; z-index: 3; }
.cr-num { font-size: clamp(54px, 8.5vw, 96px) !important; text-shadow: 0 0 36px rgba(46,242,255,.35) !important; }
.cr-num.fly { color: #f2feff; }
.cr-num.cashed { color: #d9ff80 !important; text-shadow: 0 0 36px rgba(200,255,46,.45) !important; }
.cr-num.crash { color: #ff5c78 !important; animation: crShake .5s ease; }
@keyframes crShake { 20% { transform: translateX(-6px) scale(1.04); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
.cr-sub { font-size: 14px; }
.cr-set { padding: 10px 14px; border-radius: 14px; background: rgba(10,12,24,.6); border: 1px solid rgba(255,255,255,.08); align-self: center; }

.dc-stats.lb-stats { grid-template-columns: minmax(230px, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
@media (max-width: 760px) { .dc-stats.lb-stats { grid-template-columns: 1fr 1fr !important; } }
.lb-stats .dc-line input { text-align: center; font-size: 18px; }
.lb-quick button:hover:not(:disabled) { border-color: rgba(var(--acc), .6); color: #fff; }
.dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: minmax(0, 1fr) minmax(160px, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
@media (max-width: 760px) { .dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: 1fr 1fr !important; } }
.dc-line input { font-size: 17px !important; }
.dc-s b { font-size: clamp(14px, 1.25vw, 18px) !important; text-overflow: clip !important; }
.dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: minmax(0, 1fr) minmax(150px, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) !important; }
.dc-line { display: flex; gap: 6px; align-items: center; min-width: 0; }
.dc-line input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 6px 6px !important; font-size: 16px !important; text-align: center; -moz-appearance: textfield; }
.dc-line input::-webkit-outer-spin-button, .dc-line input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-line .btn { flex: 0 0 34px; width: 34px; padding: 0 !important; }
.dc-stage .dc-s .lbl { white-space: nowrap; letter-spacing: .06em; font-size: 10px; }
@media (max-width: 760px) { .dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: 1fr 1fr !important; } }
/* ---------- Roulette v3: WICK high-roller table ---------- */
.ro-felt { position: relative; }
.ro-felt > .ro-fxc { z-index: 60; }
.ro-stage { position: relative; isolation: isolate; aspect-ratio: 16 / 10; min-height: 300px; max-height: 560px; border-radius: 22px; overflow: hidden; background: #04050a;
  border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 60px -30px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,46,136,.08), 0 0 0 1px rgba(0,0,0,.5); }
.ro-stage::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,46,136,.0), rgba(255,46,136,.55) 30%, rgba(46,242,255,.55) 70%, rgba(46,242,255,0)) top / 100% 1px no-repeat,
    radial-gradient(120% 80% at 50% 120%, transparent 55%, rgba(0,0,0,.55)); }
.ro-sbg { position: absolute; inset: -4%; z-index: 0; background: url(assets/roulette-stage.webp) center 62% / cover no-repeat; filter: brightness(.62) saturate(.92) blur(.5px); animation: roDrift 38s ease-in-out infinite alternate; }
.ro-sbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,10,.35) 0%, rgba(4,5,10,0) 30%, rgba(4,5,10,.15) 62%, rgba(4,5,10,.7) 100%); }
@keyframes roDrift { from { transform: scale(1.02) translate3d(-1%, 0, 0); } to { transform: scale(1.06) translate3d(1%, -1%, 0); } }
html.rm .ro-sbg { animation: none; }
.ro-wheel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.ro-hud { position: absolute; top: 14px; z-index: 4; display: flex; gap: 6px; }
.ro-hud.l { left: 14px; flex-direction: column; align-items: flex-start; }
.ro-hud.r { right: 14px; }
.ro-tag { padding: 5px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f1f2f8; background: rgba(8,9,16,.55); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ro-tag.dim { color: rgba(220,224,240,.62); }
.ro-stats { flex-direction: column; gap: 6px; width: 150px; padding: 10px 12px; border-radius: 14px; background: rgba(8,9,16,.58); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ro-st-k { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(220,224,240,.6); }
.ro-st-e { font-size: 12px; color: rgba(235,238,250,.85); }
.ro-rb { display: flex; height: 6px; border-radius: 99px; overflow: hidden; gap: 2px; }
.ro-rb i { display: block; min-width: 2px; } .ro-rb .r { background: linear-gradient(90deg, #a10f2e, #ff3b5c); } .ro-rb .g { background: #17d27a; } .ro-rb .b { background: linear-gradient(90deg, #2a2f40, #59607a); }
.ro-rbl { display: flex; justify-content: space-between; font-size: 10.5px; } .ro-rbl .r { color: #ff6b84; } .ro-rbl .g { color: #4cf0a0; } .ro-rbl .b { color: #b9c0d8; }
.ro-hot { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ro-np { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.14); }
.ro-np.r { background: linear-gradient(180deg, #e2234a, #8e0b25); } .ro-np.b { background: linear-gradient(180deg, #2a2f40, #0d0f16); } .ro-np.g { background: linear-gradient(180deg, #17d27a, #07733f); }
.ro-res { position: absolute; z-index: 4; top: 14px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(8,9,16,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(0,0,0,.9); transition: background .3s, border-color .3s; }
.ro-res small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(230,233,245,.78); }
.ro-res b { font: 700 20px/1 var(--font-display); color: #fff; }
.ro-res.live { border-color: rgba(255,210,63,.45); box-shadow: 0 0 22px -6px rgba(255,210,63,.55); }
.ro-res.live small { color: #FFE7A0; }
.ro-res.r { background: linear-gradient(180deg, rgba(226,35,74,.75), rgba(110,8,30,.8)); border-color: rgba(255,120,140,.55); }
.ro-res.b { background: linear-gradient(180deg, rgba(42,47,64,.85), rgba(10,11,18,.9)); border-color: rgba(190,200,230,.3); }
.ro-res.g { background: linear-gradient(180deg, rgba(23,210,122,.75), rgba(5,90,48,.85)); border-color: rgba(120,255,190,.55); }
.ro-call { position: absolute; z-index: 5; left: 50%; top: 24%; translate: -50% -50%; pointer-events: none; opacity: 0; white-space: nowrap;
  font: 700 clamp(18px, 3.4vw, 30px)/1 'Cinzel', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; color: transparent;
  background: linear-gradient(180deg, #fff 0%, #FFE7A0 45%, #C99A2E 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,190,60,.45)); }
.ro-call.on { animation: roCall 1.9s ease forwards; }
.ro-call.hold.on { animation: roCallHold .6s ease forwards; }
@keyframes roCall { 0% { opacity: 0; letter-spacing: .6em; } 18% { opacity: 1; letter-spacing: .22em; } 70% { opacity: 1; } 100% { opacity: 0; letter-spacing: .3em; } }
@keyframes roCallHold { from { opacity: 0; } to { opacity: 1; } }
.ro-med { position: absolute; z-index: 6; left: var(--hub-x, 50%); top: var(--hub-y, 50%); translate: -50% -50%; display: grid; justify-items: center; align-content: center; gap: 2px;
  width: clamp(84px, calc(var(--wr, 200px) * .52), 128px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; text-align: center;
  background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.28), transparent 46%), var(--mc, linear-gradient(180deg, #2a2f40, #07080d));
  border: 3px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 3px #d7b45a, 0 0 0 5px rgba(0,0,0,.6), 0 0 0 6px rgba(255,231,160,.5), 0 18px 40px -10px rgba(0,0,0,.9), 0 0 50px var(--mg, rgba(150,170,255,.4)); }
.ro-med.r { --mc: linear-gradient(180deg, #ff3b5c, #a10f2e 60%, #5a061a); --mg: rgba(255,50,90,.6); }
.ro-med.b { --mc: linear-gradient(180deg, #3a4058, #12151f 60%, #05060a); --mg: rgba(150,170,255,.45); }
.ro-med.g { --mc: linear-gradient(180deg, #2df59a, #0a8f4f 60%, #03361e); --mg: rgba(40,255,150,.6); }
.ro-med b { font: 700 clamp(32px, calc(var(--wr, 200px) * .22), 54px)/1 var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 18px rgba(255,255,255,.35); }
.ro-med small { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.ro-med em { position: absolute; top: 100%; margin-top: 12px; left: 50%; translate: -50% 0; white-space: nowrap; font-style: normal; font-weight: 800; font-size: 18px; color: #FFE7A0; text-shadow: 0 0 14px rgba(255,200,60,.8), 0 2px 0 #3a2400; padding: 3px 12px; border-radius: 999px; background: rgba(10,8,2,.6); border: 1px solid rgba(255,210,63,.5); animation: roEm .6s cubic-bezier(.2,1.5,.4,1) both; }
.ro-med.in { animation: roMed .7s cubic-bezier(.2,1.45,.35,1) both; }
.ro-med.in::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,231,160,.9); animation: roMedRing 1s ease-out .1s both; }
.ro-med.out { animation: roMedOut .4s ease forwards; }
@keyframes roMed { 0% { opacity: 0; transform: translateY(30px) scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes roMedRing { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes roMedOut { to { opacity: 0; transform: translateY(-12px) scale(.85); } }
@keyframes roEm { 0% { opacity: 0; transform: translateY(-8px) scale(.6); } 100% { opacity: 1; transform: none; } }
.ro-snd { position: absolute; z-index: 5; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #e9ebf5; background: rgba(8,9,16,.6); border: 1px solid rgba(255,255,255,.14); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ro-snd:hover { border-color: rgba(255,210,63,.6); color: #fff; }
.ro-snd .x { display: none; } .ro-snd.off .w { display: none; } .ro-snd.off .x { display: inline; } .ro-snd.off { color: rgba(220,224,240,.55); }
.ro-stage.shake1 { animation: roShake .4s ease-in-out; } .ro-stage.shake2 { animation: roShake .35s ease-in-out 2; }
@keyframes roShake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 1px); } }
.ro-cele .jc-t { font-size: clamp(26px, 8cqw, 80px); }
.ro-cele .jc-dim { background: radial-gradient(60% 55% at 50% 44%, rgba(40,6,24,.4), rgba(0,0,0,.74)); }

/* control bar under the stage */
.ro-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 2px -2px; }
.ro-hover { color: rgba(214,218,236,.72); min-height: 1.4em; }
.ro-hover b { color: #fff; font-weight: 600; } .ro-hover span { color: rgba(214,218,236,.35); margin: 0 2px; }
.ro-bar .pl-opts { margin: 0; justify-content: flex-end; }

/* layout: obsidian glass with neon trim */
.ro-board-w { position: relative; overflow-x: auto; padding: 2px; }
.ro-board { position: relative; display: grid; gap: 4px; padding: 12px; border-radius: 18px;
  background: radial-gradient(70% 90% at 15% 0%, rgba(255,46,136,.10), transparent 60%), radial-gradient(70% 90% at 90% 100%, rgba(46,242,255,.08), transparent 60%), linear-gradient(180deg, #0e1019, #06070c);
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,46,136,.12), 0 24px 50px -28px rgba(0,0,0,.95), 0 0 40px -22px rgba(255,46,136,.6); }
.ro-board::before { content: ""; position: absolute; inset: 5px; border-radius: 14px; pointer-events: none; border: 1px solid rgba(215,180,90,.22); }
.ro-board.h { grid-template-columns: 44px repeat(12, minmax(0, 1fr)) 46px; grid-template-rows: repeat(3, 48px) 40px 40px; }
.ro-board.v { min-width: 0; grid-template-columns: 34px 34px repeat(3, 1fr); grid-template-rows: 40px repeat(12, 34px) 36px; gap: 3px; padding: 10px; }
.ro-c { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #fff; font: 600 16px/1 var(--font-display); letter-spacing: .01em; cursor: pointer; padding: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.55); transition: transform .14s, filter .14s, box-shadow .18s, border-color .18s; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 8px rgba(0,0,0,.35); }
.ro-c > span { position: relative; z-index: 1; pointer-events: none; }
.ro-c.r { background: linear-gradient(180deg, #ee2f55 0%, #b3112f 52%, #6e0920 100%); border-color: rgba(255,130,150,.28); }
.ro-c.b { background: linear-gradient(180deg, #313750 0%, #151824 55%, #07080d 100%); }
.ro-c.g { background: linear-gradient(180deg, #2fe597 0%, #0c9a55 55%, #04452a 100%); border-color: rgba(120,255,190,.35); font-size: 20px; }
.ro-c.out { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); font: 600 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: rgba(238,240,250,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ro-c.out.col { color: #FFE7A0; letter-spacing: .04em; }
.ro-c.out.rr { background: linear-gradient(180deg, rgba(238,47,85,.85), rgba(110,9,32,.9)); border-color: rgba(255,130,150,.35); }
.ro-c.out.bb { background: linear-gradient(180deg, rgba(49,55,80,.95), rgba(7,8,13,.95)); }
.ro-c.vtxt span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; }
.ro-c:hover:not(:disabled), .ro-c:focus-visible, .ro-c.cover { filter: brightness(1.18); border-color: rgba(255,210,63,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,210,63,.5), 0 0 16px -2px rgba(255,210,63,.45); z-index: 2; }
.ro-c:active:not(:disabled) { transform: scale(.97); }
.ro-board.lock .ro-c { cursor: default; }
.ro-board.lock .ro-c:hover { filter: none; }
.ro-c.hit { z-index: 3; border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(255,255,255,.55), inset 0 0 18px rgba(255,255,255,.25); animation: roHit 1s ease-in-out infinite; }
.ro-c.out.hit { box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.3); }
.ro-c.won { z-index: 4; border-color: #FFD23F; box-shadow: 0 0 0 2px #FFD23F, 0 0 26px rgba(255,210,63,.75), inset 0 0 18px rgba(255,210,63,.3); }
@keyframes roHit { 50% { filter: brightness(1.35); } }
html.rm .ro-c.hit { animation: none; }
/* placed chips: mini 3D chips that stack by value */
.ro-chip { --c: #F4F6F1; --ink: #0b0c0f; --edge: #2a2d34; position: absolute; z-index: 3; left: 50%; top: 50%; width: 28px; height: 28px; translate: -50% -58%; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; font: 800 9.5px/1 var(--font-display); letter-spacing: -.02em; font-style: normal; color: var(--ink); text-shadow: none;
  background: radial-gradient(circle, var(--c) 0 50%, transparent 51%), radial-gradient(circle, var(--edge) 0 58%, transparent 59%), repeating-conic-gradient(var(--c) 0 30deg, var(--edge) 30deg 60deg);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 3px 6px rgba(0,0,0,.6), 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.ro-chip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(110% 70% at 30% 15%, rgba(255,255,255,.55), transparent 45%); }
.ro-chip[data-stack="1"] { box-shadow: 0 2px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 4px 0 var(--c), 0 6px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 7px 8px rgba(0,0,0,.6); }
.ro-chip[data-stack="2"], .ro-chip[data-stack="3"] { box-shadow: 0 2px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 4px 0 var(--c), 0 6px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 8px 0 var(--c), 0 10px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 11px 10px rgba(0,0,0,.6); translate: -50% -70%; }
.ro-chip.pop { animation: roChipIn .32s cubic-bezier(.2,1.4,.4,1); }
@keyframes roChipIn { 0% { transform: translateY(-18px) scale(1.25); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ro-c.lost .ro-chip { animation: roChipOut .7s ease-in .5s forwards; }
@keyframes roChipOut { to { transform: translateY(14px) scale(.6); opacity: 0; } }
.ro-c.won .ro-chip { animation: roChipWon .8s ease-in-out infinite; }
@keyframes roChipWon { 50% { filter: brightness(1.3) drop-shadow(0 0 8px #FFD23F); } }
.ro-board.v .ro-chip { width: 22px; height: 22px; font-size: 8px; }
.ro-board.v .ro-c { font-size: 14px; }
/* win marker */
.ro-dolly { position: absolute; z-index: 6; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, #e6ebff 35%, #9aa6d6 70%, #5b648c); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px rgba(255,46,136,.7), 0 0 22px rgba(255,46,136,.8), 0 0 40px rgba(46,242,255,.5); }
.ro-dolly::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); animation: roDollyRing 1.4s ease-out infinite; }
.ro-dolly.drop { animation: roDolly .55s cubic-bezier(.3,1.6,.45,1) both; }
@keyframes roDolly { 0% { opacity: 0; transform: translateY(-46px) scale(1.6); } 100% { opacity: 1; transform: none; } }
@keyframes roDollyRing { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
html.rm .ro-dolly::after { animation: none; opacity: 0; }
.ro-float { position: absolute; z-index: 7; translate: -50% -100%; pointer-events: none; font-style: normal; font-weight: 800; font-size: 14px; color: #FFE7A0; text-shadow: 0 0 10px rgba(255,200,60,.9), 0 2px 0 #3a2400; animation: roFloat 1.8s ease-out forwards; white-space: nowrap; }
@keyframes roFloat { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 15% { opacity: 1; transform: translateY(-4px) scale(1.1); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
.ro-felt.spinning .ro-board { filter: saturate(.85) brightness(.92); transition: filter .4s; }
@media (max-width: 640px) {
  .ro-stage { aspect-ratio: 4 / 3.9; min-height: 0; border-radius: 18px; }
  .ro-hud.l { display: none; }
  .ro-stats { width: 118px; padding: 8px 9px; } .ro-st-e { font-size: 11px; }
  .ro-res { left: 12px; translate: 0 0; padding: 6px 12px; } .ro-res b { font-size: 17px; } .ro-res small { font-size: 10px; letter-spacing: .12em; }
  .ro-hover { display: none; }
  .ro-bar { justify-content: center; }
  .ro-bar .pl-opts { flex-direction: row; justify-content: center; gap: 16px; }
}
.ro-bar { flex-wrap: nowrap; }
.ro-hover { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-bar .pl-opts { flex: 0 0 auto; flex-wrap: nowrap; }
.ro-felt > canvas.ro-fxc { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 60; pointer-events: none; }

/* ---------- Mines fit: board and controls side by side, whole game in one screen ---------- */
@media (min-width: 1181px) {
  #view-mines .table-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  #view-mines .dealer-panel { display: none; }
  #view-mines .howto-m { display: block; grid-column: 1; order: 1; margin-top: 0; }
  #mnFelt { --mnb: min(560px, max(380px, calc(100vh - 250px))); display: grid !important; grid-template-columns: var(--mnb) minmax(290px, 380px); grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 20px; row-gap: 12px; justify-content: center; align-content: start; padding: 18px 22px 22px; }
  #mnFelt > .og-top { grid-column: 1 / -1; }
  #mnFelt .mn-wrap { display: contents !important; }
  #mnFelt .mn-board, #mnFelt .mn-side { position: relative; z-index: 3; }
  #mnFelt .mn-board { grid-column: 1; grid-row: 2 / span 4; max-width: none; width: var(--mnb); align-self: start; }
  #mnFelt .mn-side { grid-column: 2; grid-row: 2; display: flex !important; flex-direction: column; gap: 10px; max-width: none; margin: 0; }
  #mnFelt > #mnMsg { grid-column: 2; grid-row: 3; margin: 0; text-align: left; font-size: 14px; line-height: 1.4; min-height: 2.8em; }
  #mnFelt > #mnRide { grid-column: 2; grid-row: 4; }
  #mnFelt > #mnControls { grid-column: 2; grid-row: 5; align-self: start; display: flex; flex-direction: column; gap: 12px; margin: 0; }
  #mnFelt .mn-now { font-size: 26px !important; padding: 10px 14px; }
  #mnFelt .mn-ladder { gap: 6px; }
  #mnFelt .mn-s { padding: 5px 4px; }
  #mnFelt .mn-pick { grid-row: auto; padding: 10px 12px; gap: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  #mnFelt .mn-pick > .lbl, #mnFelt .mn-pick > .dim { grid-column: 1 / -1; }
  #mnFelt .mn-pick > .dim { font-size: 12px; }
  #mnFelt .mn-stepper { gap: 6px; } #mnFelt .mn-stepper button { width: 30px; height: 30px; } #mnFelt .mn-stepper b { font-size: 20px; min-width: 28px; }
  #mnFelt .mn-count button { padding: 5px 0; font-size: 12px; }
  #mnControls .chips { gap: 6px; flex-wrap: nowrap; justify-content: space-between; }
  #mnControls .chip { width: 38px; height: 38px; font-size: 10px; flex: 0 0 38px; }
  #mnControls .bet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px; }
  #mnControls .bet-amt { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px 10px 7px; }
  #mnControls .bet-row .btn.sm { padding: 8px 10px; }
  #mnControls #mnPlay { grid-column: 1 / -1; width: 100%; min-height: 50px; font-size: 17px; }
}
@media (min-width: 1181px) and (max-height: 700px) { #mnFelt .mn-pick > .dim { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) {
  #mnFelt .mn-board { max-width: min(560px, max(360px, calc(100vh - 220px))); }
}

/* ---------------- Originals win screens (Mines, Dice, Limbo, Crash) ---------------- */
.og-felt > .win-fx { position: absolute !important; inset: 0; z-index: 50; grid-column: 1 / -1; grid-row: 1 / -1; }
.og-felt > .og-win { position: absolute !important; z-index: 55 !important; display: grid; place-items: center; overflow: hidden; border-radius: 16px; pointer-events: none; container-type: inline-size; margin: 0 !important; }
.og-felt > .og-win[hidden] { display: none; }
.og-felt > .og-win.tier { pointer-events: auto; }
.og-felt > .og-win.out { opacity: 0; transition: opacity .32s ease; }
.og-felt > canvas.og-fxc { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 60 !important; pointer-events: none; }
.og-cele .jc-t { font-size: clamp(26px, 9.5cqw, 76px); }
.ow-scrim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(6,8,18,.72), rgba(6,8,18,.48) 60%, rgba(6,8,18,.2)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: owFade .25s ease-out both; }
.ow-rays { position: absolute; left: 50%; top: 45%; width: 200%; aspect-ratio: 1; translate: -50% -50%; opacity: .32; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(200,255,46,.32) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 40%); mask: radial-gradient(circle, #000 0 8%, transparent 40%);
  animation: jcSpin 18s linear infinite, owFade .4s ease-out both; }
.ow-ring { position: absolute; left: 50%; top: 45%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(200,255,46,.8); box-shadow: 0 0 24px rgba(200,255,46,.5), inset 0 0 24px rgba(200,255,46,.35); opacity: 0; animation: owRing .9s ease-out .05s; }
.ow-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 26px 16px; margin-top: -3%;
  border-radius: 18px; background: linear-gradient(180deg, rgba(20,26,44,.78), rgba(10,12,24,.86)); border: 1px solid rgba(200,255,46,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 40px rgba(200,255,46,.16);
  animation: owPop .5s cubic-bezier(.2,1.5,.4,1) both; }
.ow-k { font-size: clamp(10px, 2.3cqw, 13px); letter-spacing: .22em; text-transform: uppercase; color: rgba(220,240,255,.72); }
.ow-t { font: 900 clamp(30px, 10cqw, 64px)/1 'Cinzel', serif; letter-spacing: .04em; white-space: nowrap; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #E9FFB0 40%, #C8FF2E 62%, #7FB800 100%); filter: drop-shadow(0 2px 0 rgba(30,50,0,.8)) drop-shadow(0 0 18px rgba(200,255,46,.45)); }
.ow-v { font-size: clamp(22px, 6.4cqw, 38px); font-weight: 800; color: #FFE7A0; text-shadow: 0 0 16px rgba(255,200,60,.35); font-variant-numeric: tabular-nums; }
.ow-x { font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 4px 12px; border-radius: 999px; color: #0b0f06; background: linear-gradient(180deg, #E9FFB0, #C8FF2E); box-shadow: 0 0 14px rgba(200,255,46,.45); }
@keyframes owFade { from { opacity: 0; } }
@keyframes owPop { from { opacity: 0; transform: scale(.6) translateY(10px); } }
@keyframes owRing { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 2.6; } }
html.rm .og-win *, html.rm .og-win { animation: none !important; transition: none !important; }
.og-cele .jc-dim { background: radial-gradient(65% 60% at 50% 44%, rgba(40,10,4,.78), rgba(0,0,0,.9)) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.og-cele[data-tier=super] .jc-dim { background: radial-gradient(65% 60% at 50% 44%, rgba(90,8,8,.78), rgba(8,0,0,.92)) !important; }
.og-cele[data-tier=jackpot] .jc-dim { background: radial-gradient(65% 60% at 50% 44%, rgba(90,50,0,.78), rgba(0,0,0,.94)) !important; }

/* ---------- Roulette v5: live dealer, real wood-and-brass wheel, printed felt ---------- */
#roStage { aspect-ratio: 16 / 11.6; max-height: 720px; background: #050607; border-color: rgba(214,180,110,.22);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.95), inset 0 0 0 1px rgba(214,180,110,.06), 0 0 0 1px rgba(0,0,0,.5); }
#roStage::before { z-index: 3; background: linear-gradient(90deg, rgba(214,180,110,0), rgba(214,180,110,.45) 30%, rgba(214,180,110,.45) 70%, rgba(214,180,110,0)) top / 100% 1px no-repeat,
  radial-gradient(130% 90% at 50% 110%, transparent 60%, rgba(0,0,0,.5)); }
#roStage > .ro-sbg, #roStage > .ro-hud.l { display: none !important; }
#roStage > .stage { position: absolute !important; inset: 0; width: auto !important; aspect-ratio: auto !important; height: 100% !important; margin: 0 !important; border-radius: 0; z-index: 0 !important; background: #050607; }
#roStage > .stage::after { background: linear-gradient(180deg, rgba(5,6,7,.15) 0%, transparent 25%, transparent 45%, rgba(5,6,7,.55) 70%, rgba(5,6,7,.9) 100%), radial-gradient(120% 100% at 50% 30%, transparent 55%, rgba(5,6,7,.55) 100%); }
#roStage > .stage > img:not(.amb), #roStage > .stage .mood, #roStage > .stage video.dv { left: 0; top: 0; width: 100%; height: 80%; aspect-ratio: auto; transform: none; object-fit: cover; object-position: 50% 6%;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
#roStage > .stage > img.amb { display: none; }
#roStage > .ro-wheel { z-index: 1; }
#roStage .stage-game, #roStage > .stage .stage-tag { z-index: 6; }
@media (max-width: 640px) {
  #roStage { aspect-ratio: 4 / 4.4; }
  #roStage > .stage > img:not(.amb), #roStage > .stage .mood, #roStage > .stage video.dv { height: 66%; object-position: 50% 4%; }
}
/* printed felt layout */
#roFelt .ro-board { background: radial-gradient(90% 120% at 50% 0%, rgba(30,70,58,.35), transparent 70%), linear-gradient(180deg, #0c1b17, #07110e);
  border: 1px solid rgba(214,180,110,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 50px -28px rgba(0,0,0,.95); }
#roFelt .ro-board::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
#roFelt .ro-board::before { border-color: rgba(232,205,140,.3); }
#roFelt .ro-c { border: 1px solid rgba(232,205,140,.55); border-radius: 4px; font: 700 16px/1 'Cinzel', Georgia, serif; color: #f1e8d0; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 6px rgba(0,0,0,.3); }
#roFelt .ro-c.r { background: linear-gradient(180deg, #8f1420, #6d0c15); border-color: rgba(232,205,140,.55); }
#roFelt .ro-c.b { background: linear-gradient(180deg, #17181a, #0a0a0b); }
#roFelt .ro-c.g { background: linear-gradient(180deg, #11804a, #0d6b3a); border-color: rgba(232,205,140,.55); font-size: 19px; }
#roFelt .ro-c.out { background: rgba(255,255,255,.015); font: 700 11.5px/1 'Cinzel', Georgia, serif; letter-spacing: .12em; color: #eadfc3; }
#roFelt .ro-c.out.col { color: #e8cd8c; }
#roFelt .ro-c.out.rr { background: linear-gradient(180deg, #8f1420, #6d0c15); }
#roFelt .ro-c.out.bb { background: linear-gradient(180deg, #17181a, #0a0a0b); }
#roFelt .ro-c:hover:not(:disabled), #roFelt .ro-c:focus-visible, #roFelt .ro-c.cover { filter: brightness(1.15); border-color: rgba(255,226,150,.95); box-shadow: inset 0 0 0 1px rgba(255,226,150,.5), 0 0 12px -2px rgba(255,210,120,.4); }
#roFelt .ro-c.hit { border-color: #fff3d0; box-shadow: 0 0 0 2px #fff3d0, 0 0 16px rgba(255,240,200,.45); }
#roFelt .ro-dolly { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px rgba(214,180,110,.8), 0 6px 14px rgba(0,0,0,.6); }
#roFelt .ro-med { box-shadow: 0 0 0 3px #d7b45a, 0 0 0 5px rgba(0,0,0,.6), 0 0 0 6px rgba(255,231,160,.4), 0 18px 40px -10px rgba(0,0,0,.9); }
#roFelt .ro-med.r { --mc: linear-gradient(180deg, #b3182a, #7a0b14 60%, #3d050b); }
#roFelt .ro-med.b { --mc: linear-gradient(180deg, #2a2a2c, #0d0d0e 60%, #050505); }
#roFelt .ro-med.g { --mc: linear-gradient(180deg, #17a058, #0f7a3c 60%, #06321a); }
#roFelt .ro-med b { font-family: 'Cinzel', Georgia, serif; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
#roStage > .ro-res { top: 86px; left: 14px; translate: 0 0; }
@media (max-width: 640px) { #roStage > .ro-res { top: auto; bottom: 10px; left: 10px; } }
#roStage > .stage > img:not(.amb), #roStage > .stage .mood, #roStage > .stage video.dv { left: 0 !important; right: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; transform: none !important; translate: none !important; }

/* ---------- Crash cash-out bar, skip-to-result, green profit ---------- */
:root { --profit: #2EE87A; }
#crRide { align-items: center; width: 100%; }
#crRide .ride { justify-content: center; }
#crRide .ride-btns { display: flex; justify-content: center; width: 100%; }
#crRide .ride-go { display: none; }
#crCoRide { min-width: min(320px, 100%); min-height: 52px; font-size: 1.05rem; justify-content: center; }
#crFelt > .cr-skip { position: relative; z-index: 3; align-self: center; margin: 4px auto 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: min(320px, 100%); min-height: 52px; border-radius: 12px;
  font-weight: 700; color: #eaf0ff; background: rgba(20,24,40,.85); border: 1px solid rgba(46,242,255,.45); box-shadow: 0 0 18px -6px rgba(46,242,255,.6); cursor: pointer; }
#crFelt > .cr-skip:hover { border-color: rgba(46,242,255,.9); color: #fff; }
#crFelt > .cr-skip[hidden] { display: none; }
.cr-prof { color: var(--profit); font-weight: 700; }
.og-felt .status .win { color: var(--profit); }
.ow-v { color: var(--profit) !important; text-shadow: 0 0 16px rgba(46,232,122,.35) !important; }
.ow-p { font-size: clamp(13px, 3cqw, 18px); font-weight: 800; color: var(--profit); text-shadow: 0 0 12px rgba(46,232,122,.4); }
@media (min-width: 1181px) { .cr-stage { height: clamp(260px, calc(100vh - 500px), 480px) !important; } }

/* Limbo dial v2: launch button inside the dial, draggable gold target knob */
.lb-dial { outline: none; border-radius: 24px; -webkit-user-select: none; user-select: none; }
.lb-dial:focus-visible { box-shadow: 0 0 0 2px rgba(255,215,106,.55); }
.lb-dial.hot, .lb-dial.hot canvas { cursor: grab; } .lb-dial.dragging, .lb-dial.dragging canvas { cursor: grabbing; }
.lb-num { top: 39% !important; }
.lb-go { position: absolute; left: 50%; top: 61%; translate: -50% -50%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; border-radius: 999px; border: 1px solid rgba(200,255,46,.9);
  background: linear-gradient(180deg, #D9FF5C, #B5EC1F); color: #0B0B14; font: 800 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(200,255,46,.08), 0 10px 30px -10px rgba(200,255,46,.55), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .15s, box-shadow .2s, opacity .2s; white-space: nowrap; }
.lb-go small { font-size: 12px; font-weight: 700; letter-spacing: 0; opacity: .7; text-transform: none; padding-left: 10px; border-left: 1px solid rgba(11,11,20,.25); }
.lb-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(200,255,46,.12), 0 14px 34px -10px rgba(200,255,46,.7), inset 0 1px 0 rgba(255,255,255,.5); }
.lb-go:active:not(:disabled) { transform: translateY(1px); }
.lb-go:disabled { opacity: .45; cursor: default; filter: saturate(.6); }
.lb-felt.flying .lb-go:disabled { opacity: .3; }
.lb-cap { bottom: 5% !important; font-size: .95rem; color: rgba(215,218,238,.72); }
.lb-cap b { font-size: 1.12rem; color: #FFD76A; text-shadow: 0 0 14px rgba(255,215,106,.45); padding: 2px 9px; border-radius: 8px; background: rgba(255,215,106,.08); border: 1px solid rgba(255,215,106,.28); }
@media (max-width: 760px) { .lb-go { padding: 11px 22px; font-size: 13px; } .lb-go small { font-size: 11px; } .lb-cap { font-size: .82rem; } .lb-cap b { font-size: 1rem; } }
html.rm .lb-go { transition: none; }
.lb-dial .lb-num { font-size: min(80px, 15cqw) !important; }
.lb-go { font-size: min(15px, 3.6cqw); padding: min(13px, 3cqw) min(30px, 6.5cqw); }
@container (max-width: 400px) { .lb-go small { display: none; } .lb-go { letter-spacing: .1em; } .lb-cap { font-size: .8rem; } }
@media (max-width: 760px) { .lb-go { padding: min(11px, 2.8cqw) min(22px, 6cqw); font-size: min(13px, 3.8cqw); } }

/* ================= Battle Arena ================= */
.ar-view { --ar-me: #7FE7D9; --ar-op: #FF7AD9; }
.ar-hero { align-items: flex-end; }
.ar-hero .cv-copy { max-width: 560px; }
.ar-rank { position: absolute; right: clamp(16px, 3vw, 32px); top: clamp(16px, 3vw, 28px); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 340px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(8,9,16,.66); border: 1px solid var(--line-2); backdrop-filter: blur(10px); }
.ar-emb { width: 52px; height: 58px; flex: none; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--c), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.ar-emb span { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: #0A0B10; }
.ar-rk { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ar-rk b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; }
.ar-rk .small { color: var(--steel-2); }
.ar-claim { width: 100%; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.ar-h { font-size: 1.05rem; margin: 6px 0 12px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ar-h .small b { color: var(--acid); }
.ar-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.ar-g { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 14px; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, #0E1020, #090A12); color: var(--bone); text-align: left; cursor: pointer; text-decoration: none; font: inherit; transition: border-color .2s, transform .2s var(--ease), box-shadow .25s; }
.ar-g-pic { position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; overflow: hidden; background: #05060C; border-bottom: 1px solid var(--line-2); }
.ar-g-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; filter: saturate(1.05); }
.ar-g-pic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(9,10,18,.55), transparent 38%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.ar-g > b, .ar-g > span:not(.ar-g-pic), .ar-g > em { padding: 0 14px; }
.ar-g:hover { border-color: rgba(127,231,217,.55); transform: translateY(-3px); box-shadow: 0 14px 40px -18px rgba(127,231,217,.45); }
.ar-g:hover .ar-g-pic img { transform: scale(1.05); }
.ar-g.on { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid), 0 14px 44px -16px rgba(200,255,46,.5); }
.ar-g.on .ar-g-pic::before { content: 'Selected'; position: absolute; z-index: 1; top: 10px; right: 10px; padding: 4px 9px; border-radius: 999px; background: var(--acid); color: #0A0B10; font: 700 .62rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ar-g b { font-family: var(--font-display); font-size: 1.1rem; }
.ar-g > span:not(.ar-g-pic) { font-size: .8rem; color: var(--steel-2); line-height: 1.35; }
.ar-g em { font-style: normal; font-size: .7rem; color: var(--plasma); margin-top: auto; padding-top: 6px !important; }
.ar-g-tag { position: absolute; z-index: 1; top: 10px; left: 10px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(5,6,10,.72); border: 1px solid var(--line-2); color: var(--bone); backdrop-filter: blur(6px); }
html.rm .ar-g, html.rm .ar-g-pic img { transition: none; } html.rm .ar-g:hover, html.rm .ar-g:hover .ar-g-pic img { transform: none; }
.ar-stakes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ar-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); cursor: pointer; font: inherit; transition: border-color .2s, background .2s; }
.ar-chip b { font-size: 1.05rem; }
.ar-chip span { font-size: .66rem; color: var(--steel); }
.ar-chip.on { border-color: var(--acid); background: rgba(200,255,46,.08); }
.ar-chip.on b { color: var(--acid); }
.ar-chip:disabled { opacity: .45; cursor: not-allowed; }
.ar-go { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin: 18px 0 10px; }
.ar-go .btn { padding: 16px 18px; font-size: 1rem; }
.ar-go .btn:disabled { opacity: .5; cursor: not-allowed; }
.ar-fine { margin: 8px 0 0; max-width: 640px; }
.ar-side { display: flex; flex-direction: column; gap: 14px; }
.ar-card { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.ar-card h3 { font-size: .95rem; margin: 0 0 10px; }
.ar-card p { margin: 8px 0 0; }
.ar-giftb { width: 100%; }
.ar-giftb:disabled { opacity: .55; }
.ar-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ar-li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid var(--line); min-width: 0; }
.ar-li b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ar-li > :last-child { margin-left: auto; }
.ar-li .up { color: var(--acid); }
.ar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.ar-dot.on { background: #3CFF8F; box-shadow: 0 0 8px #3CFF8F; }
.ar-tag { font-size: .62rem; padding: 2px 7px; border-radius: 999px; background: rgba(255,122,217,.14); color: var(--ar-op); }
.ar-res { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; background: var(--line); }
.ar-res.w { background: rgba(200,255,46,.16); color: var(--acid); }
.ar-res.l { background: rgba(255,59,92,.14); color: #FF7A8F; }
@media (max-width: 1100px) { .ar-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-stakes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ar-grid { grid-template-columns: 1fr; } .ar-rank { position: static; max-width: none; margin: 0 16px 16px; } .ar-hero { flex-direction: column; align-items: stretch; } }
@media (max-width: 560px) { .ar-go { grid-template-columns: 1fr; } .ar-g-tag { font-size: .55rem; padding: 3px 6px; top: 7px; left: 7px; } .ar-g.on .ar-g-pic::before { top: 7px; right: 7px; font-size: .55rem; padding: 3px 6px; } .ar-g b { font-size: 1rem; } }

/* search overlay */
.ar-srch { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4,4,8,.72); backdrop-filter: blur(8px); padding: 20px; }
.ar-srch[hidden] { display: none; }
.ar-srch-box { width: min(420px, 100%); text-align: center; padding: 28px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); }
.ar-srch-box h2 { margin: 4px 0 6px; font-size: 1.3rem; }
.ar-srch-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ar-nob { margin: 0; color: var(--steel-2); font-size: .9rem; }
.ar-radar { position: relative; width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid rgba(127,231,217,.3); background: radial-gradient(circle, rgba(127,231,217,.12), transparent 70%); }
.ar-radar i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(127,231,217,.45); animation: arPing 2.4s ease-out infinite; }
.ar-radar i:nth-child(2) { animation-delay: .8s; } .ar-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes arPing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
html.rm .ar-radar i { animation: none; opacity: .4; }

/* match screen */
.ar-match { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ar-match[hidden] { display: none; }
.ar-top { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 10px 14px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.ar-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ar-pl.op { justify-content: flex-end; text-align: right; }
.ar-pl > div { display: flex; flex-direction: column; min-width: 0; }
.ar-pl b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-pl span { font-size: 1.05rem; }
.ar-pl.me span { color: var(--ar-me); } .ar-pl.op span { color: var(--ar-op); }
.ar-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #1A1B26; border: 2px solid var(--line-2); flex: none; }
.ar-pl.me .ar-av { border-color: var(--ar-me); } .ar-pl.op .ar-av { border-color: var(--ar-op); }
.ar-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ar-pot { font-size: .95rem; color: #FFC94A; font-weight: 700; }
.ar-gname { font-size: .72rem; color: var(--steel); text-transform: uppercase; letter-spacing: .1em; text-align: center; }
.ar-prog { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ar-prog i { position: absolute; top: 0; bottom: 0; transition: width .3s; }
.ar-prog i:first-child { right: 50%; background: var(--ar-me); transform-origin: right; direction: rtl; }
.ar-prog i:last-child { left: 50%; background: var(--ar-op); }
.ar-stage { position: relative; height: min(68vh, 620px); min-height: 360px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: #07080F; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ar-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-act { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); min-width: 200px; padding: 16px 30px; border-radius: 999px; border: 1px solid var(--acid); background: rgba(200,255,46,.92); color: #07080B; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; cursor: pointer; box-shadow: 0 10px 40px -10px rgba(200,255,46,.6); touch-action: manipulation; }
.ar-act:active { transform: translateX(-50%) scale(.97); }
.ar-act:disabled { background: rgba(14,15,22,.85); color: var(--bone); border-color: var(--line-2); box-shadow: none; }
.ar-keys { text-align: center; margin: 0; }
.ar-timer { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 1.6rem; font-weight: 700; padding: 4px 16px; border-radius: 999px; background: rgba(5,6,10,.6); color: var(--bone); }
.ar-timer.low { color: #FF7A8F; }
.ar-sl-info { position: absolute; top: 14px; left: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.ar-sl-info span { padding: 5px 12px; border-radius: 999px; background: rgba(5,6,10,.6); font-size: .78rem; color: var(--bone); }
.ar-sl-info .dim { color: var(--steel); }
/* drag tach */
.ar-dg-hud { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; pointer-events: none; }
.ar-dg-tach { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 16px; background: rgba(5,6,10,.62); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.ar-dg-leds { display: flex; gap: 4px; padding: 4px; border-radius: 8px; transition: box-shadow .1s; }
.ar-dg-leds i { width: 14px; height: 22px; border-radius: 3px; background: rgba(255,255,255,.07); }
.ar-dg-leds i.g { background: #3CFF8F; } .ar-dg-leds i.y { background: #E6F53A; } .ar-dg-leds i.p { background: #C8FF2E; box-shadow: 0 0 10px #C8FF2E; } .ar-dg-leds i.r { background: #FF3B5C; }
.ar-dg-leds.zone { box-shadow: 0 0 0 2px #C8FF2E, 0 0 22px rgba(200,255,46,.6); }
.ar-dg-leds.lim i.r { animation: arBlink .12s steps(2) infinite; }
@keyframes arBlink { 50% { opacity: .2; } }
html.rm .ar-dg-leds.lim i.r { animation: none; }
.ar-dg-gear { font-size: 2rem; font-weight: 800; color: var(--acid); min-width: 28px; text-align: center; }
.ar-dg-spd { font-size: 1.2rem; color: var(--bone); min-width: 86px; }
.ar-dg-spd small { font-size: .62rem; color: var(--steel); }
/* overlays inside the match */
.ar-ov { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(4,4,8,.7); backdrop-filter: blur(6px); border-radius: var(--r-lg); padding: 16px; }
.ar-ov[hidden] { display: none; }
.ar-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 4vw, 48px); align-items: center; width: min(760px, 100%); }
.ar-vs-p { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: arIn .5s var(--ease) both; }
.ar-vs-p.op { animation-name: arInR; }
.ar-vs-p img { width: clamp(80px, 16vw, 140px); height: clamp(80px, 16vw, 140px); border-radius: 50%; object-fit: cover; background: #1A1B26; border: 3px solid var(--ar-me); box-shadow: 0 0 40px -6px var(--ar-me); }
.ar-vs-p.op img { border-color: var(--ar-op); box-shadow: 0 0 40px -6px var(--ar-op); }
.ar-vs-p b { font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.4rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-vs-p span { font-size: .75rem; color: var(--steel-2); }
.ar-vs-x { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ar-vs-x span { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 6vw, 3.6rem); background: linear-gradient(90deg, var(--ar-me), var(--ar-op)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-vs-x b { font-size: 1.6rem; color: var(--bone); }
@keyframes arIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes arInR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
html.rm .ar-vs-p { animation: none; }
.ar-res-box { width: min(440px, 100%); text-align: center; padding: 26px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); }
.ar-res-box.w { border-color: rgba(200,255,46,.5); box-shadow: 0 0 60px -20px rgba(200,255,46,.5); }
.ar-res-t { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); margin: 2px 0 14px; letter-spacing: .04em; }
.ar-res-box.w .ar-res-t { color: var(--acid); text-shadow: 0 0 24px rgba(200,255,46,.5); }
.ar-res-box.l .ar-res-t { color: #FF7A8F; }
.ar-res-sc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ar-res-sc div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-res-sc span { font-size: .72rem; color: var(--steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-res-sc div:first-child b { color: var(--ar-me); } .ar-res-sc div:last-child b { color: var(--ar-op); }
.ar-res-pay { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.ar-res-box.w .ar-res-pay { color: var(--acid); }
.ar-res-box .up { color: var(--acid); } .ar-res-box .dn { color: #FF7A8F; }
.ar-res-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 560px) { .ar-stage { height: calc(100dvh - 250px); min-height: 380px; } .ar-act { min-width: 170px; padding: 14px 24px; } .ar-dg-leds i { width: 10px; height: 18px; } .ar-dg-tach { gap: 8px; padding: 8px 10px; } .ar-av { width: 34px; height: 34px; } .ar-pl b { display: none; } .ar-pl span { white-space: nowrap; font-size: .95rem; } .ar-top { gap: 6px; padding: 8px 10px 12px; } .ar-gname { font-size: .58rem; } }

/* ================= Poker Room ================= */
.pk-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.pk-t { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(20,80,74,.35), rgba(14,15,18,.9)); color: var(--bone); cursor: pointer; text-align: left; font: inherit; transition: border-color .2s, transform .2s var(--ease); }
.pk-t:hover:not(:disabled) { border-color: #FFC94A; transform: translateY(-2px); }
.pk-t:disabled { opacity: .5; cursor: not-allowed; }
.pk-t b { font-family: var(--font-display); font-size: 1.1rem; }
.pk-t-b { color: #FFC94A; font-size: .9rem; }
.pk-t em { font-style: normal; color: var(--plasma); margin-top: 6px; }
.pk-friend { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); margin-bottom: 12px; }
.pk-friend p { margin: 4px 0 0; }
.pk-frow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pk-bots { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--steel-2); }
.pk-code { width: 120px; padding: 11px 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--void); color: var(--bone); font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; }
.pk-how { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--steel-2); }
.pk-room[hidden] { display: none; }
.pk-room { display: flex; flex-direction: column; gap: 10px; }
.pk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pk-tname { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pk-bar-r { display: flex; gap: 10px; align-items: center; color: var(--steel-2); }
.pk-felt { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 1.75; }
.pk-felt::before { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); background: url(assets/arena/poker-felt.webp) center / 100% 100% no-repeat; pointer-events: none; }
.pk-center { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 60%; }
.pk-felt .card { width: clamp(38px, 5.6vw, 64px); height: clamp(54px, 7.8vw, 90px); margin: 0; border-radius: 7px; }
.pk-felt .card .cr, .pk-felt .card .cb { font-size: clamp(12px, 1.5vw, 18px); top: 4px; left: 5px; }
.pk-felt .card .cb { top: auto; left: auto; bottom: 4px; right: 5px; }
.pk-felt .card .cr small, .pk-felt .card .cb small { font-size: .78em; }
.pk-felt .card .cc { font-size: clamp(20px, 2.8vw, 32px); }
.pk-board { display: flex; gap: clamp(4px, .6vw, 8px); }
.pk-board .card.slot { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14); box-shadow: none; }
.pk-pot { font-size: clamp(.8rem, 1.4vw, 1rem); color: var(--steel-2); padding: 4px 14px; border-radius: 999px; background: rgba(5,6,10,.5); min-height: 1.6em; }
.pk-pot:empty { visibility: hidden; }
.pk-pot b { color: #FFC94A; }
.pk-res { font-size: clamp(.78rem, 1.3vw, .95rem); text-align: center; color: var(--bone); min-height: 1.3em; text-shadow: 0 2px 8px #000; }
.pk-res.me { color: var(--acid); font-weight: 700; }
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: clamp(100px, 15vw, 150px); }
.pk-seat.empty { padding: 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.18); background: rgba(5,6,10,.35); width: auto; }
.pk-cards { display: flex; gap: 3px; min-height: clamp(54px, 7.8vw, 90px); align-items: flex-end; }
.pk-seat:not(.me) .pk-cards .card { width: clamp(28px, 3.8vw, 44px); height: clamp(40px, 5.4vw, 62px); }
.pk-seat:not(.me) .pk-cards .card .cc { font-size: clamp(14px, 1.9vw, 22px); }
.pk-seat:not(.me) .pk-cards .card .cb { display: none; }
.pk-seat:not(.me) .pk-cards { min-height: clamp(40px, 5.4vw, 62px); }
.pk-seat.me .pk-cards .card { transform: translateY(-2px); }
.pk-seat.me .pk-cards .card:nth-child(1) { transform: rotate(-5deg); } .pk-seat.me .pk-cards .card:nth-child(2) { transform: rotate(5deg); }
.pk-plate { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(6,7,12,.86); border: 1px solid var(--line-2); width: 100%; min-width: 0; }
.pk-plate img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #1A1B26; flex: none; }
.pk-plate div { display: flex; flex-direction: column; min-width: 0; }
.pk-plate b { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-plate span { font-size: .78rem; color: #FFC94A; }
.pk-seat.me .pk-plate { border-color: var(--plasma); }
.pk-seat.acting .pk-plate { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid), 0 0 22px -4px rgba(200,255,46,.6); background: linear-gradient(90deg, rgba(200,255,46,.18) calc(var(--p) * 100%), rgba(6,7,12,.86) 0); }
.pk-seat.folded { opacity: .45; }
.pk-seat.win .pk-plate { border-color: #FFC94A; box-shadow: 0 0 26px -4px rgba(255,201,74,.8); }
.pk-btn { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--bone); color: #0A0B10; font-style: normal; font-weight: 800; font-size: .66rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.pk-last { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: rgba(46,242,255,.14); color: var(--plasma); }
.pk-last.f { background: rgba(255,255,255,.06); color: var(--steel); } .pk-last.ai { background: rgba(255,59,92,.18); color: #FF7A8F; }
.pk-hn { font-size: .68rem; color: #FFC94A; }
.pk-bet { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-size: .74rem; padding: 3px 9px 3px 22px; border-radius: 999px; background: rgba(5,6,10,.78); color: var(--bone); white-space: nowrap; z-index: 2; }
.pk-bet::before { content: ''; position: absolute; left: 5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle, #FFC94A 35%, #B8862A 36% 60%, #FFC94A 61%); }
.pk-act { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 62px; padding: 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pk-act .btn { padding: 14px 22px; }
.pk-fold { border-color: rgba(255,59,92,.4); }
.pk-raise { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pk-pre { display: flex; gap: 6px; }
.pk-raise input[type=range] { width: 160px; accent-color: var(--acid); }
.pk-log { text-align: center; min-height: 1.2em; }
.pk-buy { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.pk-buy b { font-size: 1.8rem; color: #FFC94A; text-align: center; }
.pk-buy input { width: 100%; accent-color: var(--acid); }
.pk-buy-l { display: flex; justify-content: space-between; }
.pk-bigcode { font-size: 2.4rem; letter-spacing: .25em; color: var(--acid); margin: 4px 0; }
@media (max-width: 900px) { .pk-tables { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pk-felt { aspect-ratio: .78; }
  .pk-felt::before { width: 128.2%; height: 78%; transform: translate(-50%, -50%) rotate(90deg); }
  .pk-seat { width: 92px; }
  .pk-plate { padding: 4px 8px 4px 4px; gap: 5px; } .pk-plate img { width: 22px; height: 22px; } .pk-plate b { font-size: .64rem; } .pk-plate span { font-size: .68rem; }
  .pk-center { width: 86%; top: 48%; }
  .pk-pre .btn { padding: 7px 9px; }
  .pk-raise input[type=range] { width: 100%; }
  .pk-act .btn { padding: 12px 16px; }
}

#pkTInfo .nw { white-space: nowrap; } #pkTInfo .sep { font-style: normal; }
@media (max-width: 640px) { #pkTInfo .nw { display: block; } #pkTInfo .sep { display: none; } }

/* ---------- Economy 2.2: piggy badge, season track, starter stack, Pass lobby card ---------- */
.hx-pig { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 34px; padding: 0 9px 0 6px; border-radius: 999px; border: 1px solid rgba(158,244,255,.28); background: rgba(158,244,255,.06); color: #9FF4FF; cursor: pointer; font-size: 11px; transition: box-shadow .25s, border-color .25s; }
.hx-pig:hover { border-color: rgba(158,244,255,.6); }
.hx-pig.full { border-color: rgba(255,201,74,.7); color: #FFC94A; box-shadow: 0 0 16px rgba(255,201,74,.35); }
html:not(.rm) .hx-pig.full { animation: e2Glow 2.6s ease-in-out infinite; }
@keyframes e2Glow { 50% { box-shadow: 0 0 26px rgba(255,201,74,.55); } }
@media (max-width: 560px) { .hx-pig #pigPct { display: none; } .hx-pig { padding: 0 6px; } }
.e2-pigbar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 4px 0 14px; }
.e2-pigbar i { display: block; height: 100%; background: linear-gradient(90deg, #9FF4FF, #FFC94A); box-shadow: 0 0 12px rgba(255,201,74,.45); }
.e2-se { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg, 16px); border: 1px solid rgba(46,242,255,.22); background: linear-gradient(130deg, rgba(46,242,255,.07), rgba(140,107,255,.05) 60%, transparent), var(--surface); }
.e2-se-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.e2-se-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.e2-se-tracks > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); }
.e2-se-tracks > div.on { border-color: rgba(255,201,74,.45); background: rgba(255,201,74,.06); }
.e2-se-tracks > div.off { opacity: .8; }
.e2-se-tracks b { font-family: var(--font-mono, monospace); font-size: 15px; }
.sx-qnote { margin: 8px 2px 0; }
.st2-bnote { margin: -4px 0 12px; }
.st2-starter { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 18px; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r-lg, 16px); border: 1px solid rgba(200,255,46,.35); background: linear-gradient(110deg, rgba(200,255,46,.08), rgba(46,242,255,.04) 60%, transparent), var(--surface); }
.st2-starter .st2-art { width: 120px; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; }
.st2-starter .st2-art img { width: 100%; height: 100%; object-fit: cover; }
.st2-starter h3 { margin: 2px 0; font-size: 22px; }
@media (max-width: 640px) { .st2-starter { grid-template-columns: 84px 1fr; } .st2-starter .st2-art { width: 84px; } .st2-starter .st2-buy { grid-column: 1 / -1; } }
.e2-pass { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r-lg, 16px); border: 1px solid rgba(255,201,74,.30); background: linear-gradient(110deg, rgba(255,201,74,.08), rgba(140,107,255,.05) 55%, transparent), var(--surface); }
.e2-pass > div:first-child { display: grid; gap: 3px; }
.e2-pass-a { display: flex; gap: 8px; flex-wrap: wrap; }
.e2-dlg h2 { font-family: var(--font-mono, monospace); }
/* poker: hand callout, CPU skill badge, back link */
.pk-mine { margin-top: 6px; padding: 5px 12px; border-radius: 999px; font-size: clamp(.72rem, 1.2vw, .86rem); color: rgba(255,255,255,.8); background: rgba(6,10,18,.72); border: 1px solid rgba(46,242,255,.28); box-shadow: 0 0 14px rgba(46,242,255,.12); white-space: nowrap; }
.pk-mine b { color: #9FF4FF; font-weight: 700; }
.pk-sk { font-style: normal; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 6px; margin-left: 4px; vertical-align: 1px; border: 1px solid currentColor; opacity: .85; }
.pk-sk.rookie { color: #9FF4FF; } .pk-sk.pro { color: #C8FF2E; } .pk-sk.shark { color: #FF6B9A; }
.pk-backl { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: rgba(255,255,255,.78); font-size: 13px; text-decoration: none; }
.pk-backl:hover { color: #fff; border-color: rgba(46,242,255,.45); }
.pk-plate .pk-sk { position: absolute; left: 12px; bottom: -8px; margin: 0; background: rgba(6,7,12,.95); line-height: 1.3; }
.pk-mine2 { display: none; }
@media (max-width: 700px) {
  .pk-mine { display: none !important; }
  .pk-mine2 { display: block; flex-basis: 100%; text-align: center; font-size: .8rem; color: rgba(255,255,255,.78); }
  .pk-mine2 b { color: #9FF4FF; }
  .pk-plate .pk-sk { font-size: .5rem; left: 8px; bottom: -7px; padding: 0 4px; }
}

/* ---------- Offer pop-ups (coin sale ads): hero art, count-up amount, value chips ---------- */
.e2-ad { width: min(460px, calc(100vw - 24px)); padding: 0; overflow: hidden; border: 1px solid rgba(46,242,255,.28); background: #0B0D14; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px rgba(46,242,255,.10); }
.e2-ad-piggy, .e2-ad-season { border-color: rgba(255,201,74,.32); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,201,74,.10); }
.e2-ad-hero { position: relative; aspect-ratio: 16 / 9; background: var(--img) center / cover no-repeat, #0B0D14; }
.e2-ad-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,20,0) 45%, rgba(11,13,20,.75) 80%, #0B0D14 100%); pointer-events: none; }
.e2-ad-hero .sx-x { z-index: 3; background: rgba(6,8,14,.6); backdrop-filter: blur(6px); }
.e2-ad-chip { position: absolute; left: 16px; top: 14px; z-index: 3; padding: 5px 10px; border-radius: 999px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #C8FF2E; background: rgba(6,8,14,.62); border: 1px solid rgba(200,255,46,.35); backdrop-filter: blur(6px); }
.e2-ad-piggy .e2-ad-chip, .e2-ad-season .e2-ad-chip { color: #FFC94A; border-color: rgba(255,201,74,.4); }
.e2-ad-sparks { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.e2-ad-sparks i { position: absolute; left: var(--x); bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 8px #FFC94A; opacity: 0; transform: scale(var(--s)); animation: e2Spark 3.2s var(--d) ease-out infinite; }
@keyframes e2Spark { 0% { opacity: 0; transform: translateY(0) scale(var(--s)); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-150px) scale(calc(var(--s) * .4)); } }
html.rm .e2-ad-sparks { display: none; }
.e2-ad-body { position: relative; z-index: 2; margin-top: -34px; padding: 0 24px 20px; text-align: center; }
.e2-ad-title { margin: 0; font-size: clamp(1.45rem, 4.6vw, 1.8rem); line-height: 1.1; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.e2-ad-sub { margin: 8px auto 0; max-width: 34ch; font-size: .9rem; line-height: 1.45; color: rgba(255,255,255,.72); }
.e2-ad-amt { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 2px; }
.e2-ad-amt .coin { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(200,255,46,.45)); }
.e2-ad-amt b { font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1; font-weight: 700; color: #C8FF2E; text-shadow: 0 0 24px rgba(200,255,46,.35); font-variant-numeric: tabular-nums; }
.e2-ad-piggy .e2-ad-amt b, .e2-ad-season .e2-ad-amt b { color: #FFC94A; text-shadow: 0 0 24px rgba(255,201,74,.35); }
.e2-ad-amt.txt b { font-family: var(--font-display, inherit); font-size: 1.6rem; }
.e2-ad-real { margin: 4px 0 0; font-size: .72rem; color: rgba(255,255,255,.5); }
.e2-ad-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 14px 0 0; }
.e2-ad-perks li { padding: 5px 10px; border-radius: 999px; font-size: .74rem; color: rgba(255,255,255,.82); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.e2-ad-perks li.hot { color: #C8FF2E; border-color: rgba(200,255,46,.4); background: rgba(200,255,46,.07); }
.e2-ad-perks li.gold { color: #FFC94A; border-color: rgba(255,201,74,.4); background: rgba(255,201,74,.07); }
.e2-ad-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 18px; min-height: 56px; padding: 0 8px 0 22px; font-size: 1.02rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(200,255,46,.22); }
.e2-ad-go b { padding: 9px 14px; border-radius: 10px; background: rgba(0,0,0,.82); color: #C8FF2E; font-size: .95rem; }
html:not(.rm) .e2-ad-go { position: relative; overflow: hidden; }
html:not(.rm) .e2-ad-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: e2Sheen 3.8s 1.2s ease-in-out infinite; }
@keyframes e2Sheen { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.e2-ad-no { display: block; margin: 10px auto 0; padding: 6px 12px; background: none; border: 0; color: rgba(255,255,255,.55); font: inherit; font-size: .86rem; cursor: pointer; }
.e2-ad-no:hover { color: #fff; }
.e2-ad-fine { margin: 6px 0 0; font-size: .7rem; }
@media (max-width: 420px) { .e2-ad-body { padding: 0 16px 16px; } .e2-ad-go { padding-left: 16px; font-size: .95rem; } }
.e2-ad-title { font-family: var(--font-display); font-weight: 600; }
.e2-ad-sure { margin: 10px 0 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #FFC94A; }
.e2-ad-amt.sm { margin-top: 12px; gap: 8px; }
.e2-ad-amt.sm .coin { width: 24px; height: 24px; }
.e2-ad-amt.sm b { font-size: 1.5rem; }
.e2-ad-amt.sm span { font-size: .8rem; color: rgba(255,255,255,.55); }
.e2-dlg.e2-ad h2.e2-ad-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Piggy bank art: coins rise inside the glass as it fills ---------- */
.e2-pigart { position: relative; display: inline-block; flex-shrink: 0; aspect-ratio: 480 / 384; }
.e2-pigart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.e2-pigart .e { filter: grayscale(1) brightness(.42) contrast(1.15); opacity: .7; }
.e2-pigart .f { clip-path: inset(calc((1 - var(--p)) * 92% + 4%) 0 0 0); filter: drop-shadow(0 0 6px rgba(200,255,46,.35)); transition: clip-path .6s var(--ease, ease); }
.e2-pigart .ln { position: absolute; left: 16%; right: 12%; top: calc((1 - var(--p)) * 92% + 4%); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,224,138,.9), transparent); box-shadow: 0 0 8px rgba(255,201,74,.8); opacity: calc(var(--p) * 4 - 0.05); transition: top .6s var(--ease, ease); }
.hx-pig { position: relative; gap: 5px; }
.e2-pigart.hud { width: 30px; }
.e2-pigart.hud .ln { display: none; }
.hx-pig.full .e2-pigart .f { filter: drop-shadow(0 0 7px rgba(255,201,74,.8)); }
.e2-pigdrop { position: absolute; left: 13px; top: -6px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3B8, #FFC94A 60%, #B8860B); box-shadow: 0 0 6px #FFC94A; opacity: 0; pointer-events: none; }
html:not(.rm) .hx-pig.drop .e2-pigdrop { animation: e2Drop .8s ease-in; }
html:not(.rm) .hx-pig.drop .e2-pigart { animation: e2Bump .8s ease-out; }
@keyframes e2Drop { 0% { opacity: 0; transform: translateY(-10px); } 25% { opacity: 1; } 70% { opacity: 1; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(13px) scale(.5); } }
@keyframes e2Bump { 0%, 60% { transform: none; } 75% { transform: scale(1.12, .92); } 100% { transform: none; } }
.e2-pighero { position: relative; display: grid; place-items: center; margin: -6px 0 8px; padding: 14px 0 4px; border-radius: 16px; background: radial-gradient(ellipse at 50% 60%, rgba(46,242,255,.10), transparent 65%); }
.e2-pighero.full { background: radial-gradient(ellipse at 50% 60%, rgba(255,201,74,.16), transparent 65%); }
.e2-pigart.big { width: min(220px, 56vw); }
html:not(.rm) .e2-pighero.full .e2-pigart.big { animation: e2Float 3.4s ease-in-out infinite; }
@keyframes e2Float { 50% { transform: translateY(-5px); } }
.e2-pigpct { margin-top: 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #FFC94A; }
html:not(.rm) .e2-pighero.crack .e2-pigart.big { animation: e2Crack .9s ease-in forwards; }
@keyframes e2Crack { 0% { transform: none; } 15% { transform: rotate(-5deg); } 30% { transform: rotate(5deg); } 45% { transform: rotate(-4deg) scale(1.04); } 60% { transform: rotate(3deg) scale(1.08); filter: brightness(1.4); } 100% { transform: scale(1.35); opacity: 0; filter: brightness(2.2); } }
.e2-pigtoast { display: flex; align-items: center; gap: 10px; }
.e2-pigtoast > span { display: grid; gap: 2px; }
.e2-pigart.toast { width: 46px; }
@media (max-width: 560px) { .e2-pigart.hud { width: 26px; } }
.e2-pighero.full .e2-pigart .ln { display: none; }

/* ---------- header fit: steps applied by navfit.js only when the menu would run under the wallet ---------- */
@media (min-width: 561px) {
  .topbar.nf1 { gap: 14px; }
  .topbar.nf1 .nav { gap: 2px !important; }
  .topbar.nf1 .nav a, .topbar.nf1 .nav-dd-b { padding-left: 9px !important; padding-right: 9px !important; }
  .topbar.nf2 .wallet { gap: 8px; }
  .topbar.nf2 .acct-nm, .topbar.nf2 #pigPct, .topbar.nf2 .hx-coins span { display: none; }
  .topbar.nf2 .acct-btn { padding: 4px 10px 4px 4px; gap: 6px; }
  .topbar.nf2 .hx-pig { padding: 0 6px; }
  .topbar.nf2 .hx-coins { padding: 9px; }
  .topbar.nf3 .nav > a[data-nav="home"], .topbar.nf3 .balance .lbl { display: none; }
  .topbar.nf3 .balance .num { font-size: 17px !important; }
  .topbar.nf3 .nav a, .topbar.nf3 .nav-dd-b { font-size: .84rem !important; padding-left: 7px !important; padding-right: 7px !important; }
  /* last step: the menu gets its own row under the logo and wallet, so nothing ever overlaps */
  .topbar.nf4 { flex-wrap: wrap; row-gap: 4px; padding-bottom: 8px; }
  .topbar.nf4 .wallet { margin-left: auto; }
  .topbar.nf4 .nav { order: 3; flex: 1 0 100%; justify-content: center; gap: 2px !important; overflow-x: auto; scrollbar-width: none; }
  .topbar.nf4 .nav::-webkit-scrollbar { display: none; }
  .topbar.nf4 .nav > a[data-nav="home"] { display: inline-block; }
  .topbar.nf4 .acct-nm, .topbar.nf4 #pigPct, .topbar.nf4 .hx-coins span { display: inline; }
  .topbar.nf4 .acct-btn { padding: 6px 14px 6px 6px; gap: 8px; }
  .topbar.nf4 .hx-coins { padding: 7px 12px; }
  .topbar.nf4 .balance .lbl { display: block; }
  .topbar.nf4 .balance .num { font-size: 18px !important; }
  .topbar.nf4 .nav a, .topbar.nf4 .nav-dd-b { font-size: var(--text-sm) !important; padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---------- Neon Street Duel ---------- */
.ar-stage.rc-on { height: min(72vh, 660px); touch-action: pan-y; }
.ar-stage.rc-on .ar-cv { touch-action: pan-y; } /* tap a side to steer, swipe up or down to keep scrolling the page */
.ar-stage.rc-on .rc-hud { position: absolute; inset: 14px 16px auto 16px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.ar-stage.rc-on .rc-spd { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 14px; background: rgba(5,6,10,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.ar-stage.rc-on .rc-spd b { font-size: 2rem; font-weight: 800; color: var(--bone); min-width: 3ch; text-align: right; line-height: 1; }
.ar-stage.rc-on .rc-spd small { font-size: .62rem; letter-spacing: .14em; color: var(--steel); }
.ar-stage.rc-on .rc-pos { display: grid; justify-items: end; gap: 2px; padding: 8px 14px; border-radius: 14px; background: rgba(5,6,10,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.ar-stage.rc-on .rc-pos b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: .04em; }
.ar-stage.rc-on .rc-pos b.up { color: var(--acid); text-shadow: 0 0 14px rgba(200,255,46,.5); } .ar-stage.rc-on .rc-pos b.dn { color: #FF7AD9; }
.ar-stage.rc-on .rc-pos span { font-size: .75rem; color: var(--steel-2); }
.ar-stage.rc-on .rc-ctl { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px; pointer-events: none; }
.ar-stage.rc-on .rc-btn, .ar-stage.rc-on .rc-nos { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.ar-stage.rc-on .rc-btn { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--bone); background: rgba(5,6,10,.5); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.ar-stage.rc-on .rc-btn.on { border-color: var(--acid); color: var(--acid); background: rgba(200,255,46,.12); }
.ar-stage.rc-on .rc-nos { position: relative; min-width: 170px; padding: 12px 22px 10px; border-radius: 999px; border: 1px solid rgba(90,170,255,.6); background: rgba(10,20,46,.7); color: #CFE4FF; font-family: var(--font-display); letter-spacing: .14em; display: grid; gap: 6px; justify-items: center; box-shadow: 0 0 24px -6px rgba(90,170,255,.6); }
.ar-stage.rc-on .rc-nos b { font-size: .95rem; }
.ar-stage.rc-on .rc-nbar { width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ar-stage.rc-on .rc-nbar i { display: block; height: 100%; width: 60%; background: linear-gradient(90deg, #2EF2FF, #5AAAFF, #8C6BFF); box-shadow: 0 0 10px #5AAAFF; transition: width .12s linear; }
.ar-stage.rc-on .rc-nos.on { border-color: #9FD0FF; background: rgba(40,90,200,.55); box-shadow: 0 0 34px rgba(90,170,255,.8); }
html:not(.rm) .ar-stage.rc-on .rc-nos.on b { animation: rcNos .18s steps(2) infinite; }
@keyframes rcNos { 50% { color: #fff; text-shadow: 0 0 10px #9FD0FF; } }
.ar-stage.rc-on .rc-nos.empty { opacity: .55; }
@media (min-width: 900px) and (hover: hover) { .ar-stage.rc-on .rc-btn { opacity: .55; } }
@media (max-width: 560px) { .ar-stage.rc-on { height: calc(100dvh - 230px); min-height: 420px; } .ar-stage.rc-on .rc-btn { width: 58px; height: 58px; } .ar-stage.rc-on .rc-nos { min-width: 130px; padding: 10px 14px 8px; } .ar-stage.rc-on .rc-spd b { font-size: 1.5rem; } .ar-stage.rc-on .rc-pos b { font-size: 1.2rem; } }
.ar-stage.rc-on .rc-hud { inset: 14px 16px auto 16px; font-family: inherit; }
.ar-stage.rc-on .rc-spd { font: inherit !important; color: inherit !important; }
.ar-stage.rc-on .rc-nos { position: absolute; right: 14px; bottom: 92px; width: auto; height: auto; min-width: 132px; font-style: normal; font-size: inherit; }
.ar-stage.rc-on .rc-ctl { padding: 0 14px; }
@media (max-width: 560px) { .ar-stage.rc-on .rc-nos { right: auto; left: 50%; transform: translateX(-50%); bottom: 4px; min-width: 128px; } }

/* ---------- Slot Race (two machines) ---------- */
.ar-stage.sr-on { height: min(74vh, 700px); }
.ar-stage.sr-on .sr-chips { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: nowrap; pointer-events: none; white-space: nowrap; }
.ar-stage.sr-on .sr-chips span { padding: 5px 12px; border-radius: 999px; background: rgba(5,6,10,.7); border: 1px solid rgba(255,255,255,.08); font-size: .78rem; color: var(--bone); }
.ar-stage.sr-on .sr-chips .dim { color: var(--steel); border: 0; padding: 0; background: none; }
.ar-stage.sr-on .sr-mult { font-family: var(--font-display); font-weight: 700; color: var(--steel-2) !important; }
.ar-stage.sr-on .sr-mult.hot { color: #FFC94A !important; border-color: rgba(255,201,74,.5) !important; box-shadow: 0 0 14px -4px rgba(255,201,74,.7); }
.ar-stage.sr-on .sr-final { display: none; font-family: var(--font-display); font-weight: 700; color: #FF7AD9 !important; border-color: rgba(255,122,217,.5) !important; }
.ar-stage.sr-on .sr-final.on { display: inline-block; }
.ar-stage.sr-on .ar-act.sr-hot { box-shadow: 0 0 0 3px rgba(200,255,46,.18), 0 10px 40px -10px rgba(200,255,46,.6); }
@media (max-width: 560px) { .ar-stage.sr-on { height: calc(100dvh - 230px); min-height: 560px; } .ar-stage.sr-on .sr-chips { bottom: 74px; gap: 5px; } .ar-stage.sr-on .sr-chips span { padding: 4px 8px; font-size: .68rem; } }

/* ---------- Arena result window (animated) ---------- */
.ar-ov.result { padding: 12px; overflow: hidden; }
.ar-rx { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.ar-rx-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.ar-rx-rays { position: absolute; left: 50%; top: 42%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(200,255,46,.16) 0 6deg, transparent 6deg 18deg, rgba(46,242,255,.12) 18deg 24deg, transparent 24deg 36deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 58%); mask: radial-gradient(circle, #000 0 18%, transparent 58%); animation: rxSpin 22s linear infinite, rxFade .8s ease-out both; }
.ar-rx-card { --c1: #C8FF2E; --c2: #2EF2FF; --c3: #FF4FD8; position: relative; z-index: 2; width: min(500px, 100%); max-height: 100%; padding: 2px; border-radius: 22px; isolation: isolate; overflow: hidden;
  background: linear-gradient(var(--surface), var(--surface)); box-shadow: 0 30px 90px rgba(0,0,0,.65); animation: rxPop .6s cubic-bezier(.2,1.4,.4,1) both; }
.ar-rx-card::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c1)); animation: rxSpin 4s linear infinite; }
.ar-rx.l .ar-rx-card::before { background: conic-gradient(from 0deg, #3a1520, #FF4F7B 25%, #3a1520 50%, #FF4F7B 75%, #3a1520); animation-duration: 9s; opacity: .7; }
.ar-rx.t .ar-rx-card::before { background: conic-gradient(from 0deg, #2a3040, #9AA6BC, #2a3040, #9AA6BC, #2a3040); }
.ar-rx.w .ar-rx-card { box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 80px -10px rgba(200,255,46,.45); }
.ar-rx-in { position: relative; border-radius: 20px; padding: 22px 22px 20px; text-align: center; overflow: auto; max-height: calc(100vh - 160px);
  background: radial-gradient(120% 70% at 50% 0%, rgba(200,255,46,.12), transparent 60%), linear-gradient(180deg, #11131c, #08090f 70%); }
.ar-rx.l .ar-rx-in { background: radial-gradient(120% 70% at 50% 0%, rgba(255,79,123,.12), transparent 60%), linear-gradient(180deg, #13111a, #08080e 70%); }
.ar-rx-eye { margin: 0; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--plasma, #2EF2FF); }
.ar-rx-t { margin: 4px 0 2px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; letter-spacing: .03em; display: flex; justify-content: center; }
.ar-rx-t i { font-style: normal; display: inline-block; animation: rxDrop .55s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.12s + var(--i) * .055s); }
.ar-rx.w .ar-rx-t i { background: linear-gradient(180deg, #F6FFD9 0%, #C8FF2E 45%, #6FE04A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(200,255,46,.55)); }
.ar-rx.w .ar-rx-t { position: relative; }
.ar-rx.w .ar-rx-t::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); -webkit-mask: linear-gradient(#000, #000); mix-blend-mode: overlay; transform: translateX(-120%); animation: rxShine 2.8s 1s ease-in-out infinite; pointer-events: none; }
.ar-rx.l .ar-rx-t i { color: #FF6A88; text-shadow: 0 0 18px rgba(255,79,123,.4); }
.ar-rx.t .ar-rx-t i { color: #D7DEEA; }
.ar-rx-by { margin: 6px 0 0; font-size: .86rem; color: var(--steel-2); animation: rxUp .5s .55s both; }
.ar-rx.w .ar-rx-by { color: #E9FFB0; }
.ar-rx-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 16px 0 12px; }
.ar-rx-p { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); min-width: 0; animation: rxSlideL .5s .45s both; }
.ar-rx-p.op { animation-name: rxSlideR; }
.ar-rx-p span { font-size: .74rem; color: var(--steel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-rx-p b { font-size: 1.15rem; color: var(--bone); }
.ar-rx-p.me b { color: var(--ar-me, #2EF2FF); } .ar-rx-p.op b { color: var(--ar-op, #FF7AD9); }
.ar-rx-p.win { border-color: rgba(255,201,74,.55); background: radial-gradient(100% 80% at 50% 0%, rgba(255,201,74,.14), rgba(255,255,255,.02)); box-shadow: 0 0 26px -8px rgba(255,201,74,.6); }
.ar-rx-p.lose { opacity: .62; filter: saturate(.6); }
.ar-rx-av { position: relative; width: 58px; height: 58px; }
.ar-rx-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #0b0d14; border: 2px solid rgba(255,255,255,.14); }
.ar-rx-p.win .ar-rx-av img { border-color: #FFC94A; box-shadow: 0 0 0 3px rgba(255,201,74,.18), 0 0 20px rgba(255,201,74,.55); }
.ar-rx-crown { position: absolute; left: 50%; top: -15px; width: 30px; height: 20px; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 0 6px rgba(255,201,74,.8)); animation: rxCrown .6s .9s cubic-bezier(.2,1.6,.4,1) both; }
.ar-rx-x { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--steel); letter-spacing: .1em; }
.ar-rx-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; animation: rxUp .5s .7s both; }
.ar-rx-stats div { display: flex; flex-direction: column; gap: 1px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); min-width: 84px; }
.ar-rx-stats span { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.ar-rx-stats b { font-size: .95rem; color: var(--bone); }
.ar-rx-pay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--line); animation: rxUp .5s .6s both; overflow: hidden; }
.ar-rx-pay small { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.ar-rx-pay b { font-size: clamp(1.5rem, 4.6vw, 2.2rem); line-height: 1.1; color: var(--steel-2); }
.ar-rx-pay.on { border-color: rgba(200,255,46,.45); background: radial-gradient(120% 120% at 50% 0%, rgba(200,255,46,.14), rgba(0,0,0,.35)); }
.ar-rx-pay.on b { color: #F1FFC9; text-shadow: 0 0 20px rgba(200,255,46,.5); }
.ar-rx-pay em { font-style: normal; font-size: .72rem; color: var(--steel-2); }
.ar-rx.paid .ar-rx-pay.on b { animation: rxBump .45s cubic-bezier(.2,1.6,.4,1); }
.ar-rx.w.paid .ar-rx-pay.on::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); animation: rxSweep 1.1s ease-out forwards; }
.ar-rx-rp { margin-top: 12px; animation: rxUp .5s .75s both; }
.ar-rx-rph { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--steel-2); margin-bottom: 6px; }
.ar-rx-rph .up { color: var(--acid); font-weight: 700; } .ar-rx-rph .dn { color: #FF7A8F; font-weight: 700; }
.ar-rx-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ar-rx-bar i { display: block; height: 100%; border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px currentColor; }
.ar-rx .ar-res-acts { margin-top: 16px; animation: rxUp .5s .85s both; }
.ar-rx.w .ar-rx-go { animation: rxPulse 1.6s 1.8s ease-in-out infinite; }
@keyframes rxSpin { to { transform: rotate(360deg); } }
@keyframes rxFade { from { opacity: 0; } }
@keyframes rxPop { from { opacity: 0; transform: scale(.7) translateY(30px); } }
@keyframes rxDrop { from { opacity: 0; transform: translateY(-46px) scale(1.4); } }
@keyframes rxUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes rxSlideL { from { opacity: 0; transform: translateX(-40px); } }
@keyframes rxSlideR { from { opacity: 0; transform: translateX(40px); } }
@keyframes rxCrown { from { opacity: 0; transform: translate(-50%, -24px) rotate(-30deg) scale(.4); } }
@keyframes rxShine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
@keyframes rxBump { 50% { transform: scale(1.12); } }
@keyframes rxSweep { to { left: 110%; } }
@keyframes rxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,255,46,.5); } 50% { box-shadow: 0 0 0 8px rgba(200,255,46,0); } }
html.rm .ar-rx *, html.rm .ar-rx-card, html.rm .ar-rx-card::before, html.rm .ar-rx-rays, html.rm .ar-rx-t::after { animation: none !important; }
@media (max-width: 560px) {
  .ar-rx-in { padding: 18px 14px 16px; } .ar-rx-av { width: 46px; height: 46px; } .ar-rx-p b { font-size: 1rem; }
  .ar-rx-stats div { min-width: 0; padding: 5px 9px; } .ar-rx-vs { gap: 6px; margin: 12px 0 10px; }
}
.ar-stage.rc-on .rc-map { position: absolute; top: 82px; right: 16px; width: 150px; height: 118px; border-radius: 14px; background: rgba(5,6,10,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); pointer-events: none; }
@media (max-width: 560px) { .ar-stage.rc-on .rc-map { top: 66px; right: 10px; width: 104px; height: 84px; border-radius: 12px; } }

/* ---------- Roulette: neon glass layout ---------- */
#roFelt .ro-board { background: linear-gradient(180deg, rgba(4,6,14,.55), rgba(4,6,14,.78)), url("assets/roulette/board-glass.webp") center / cover no-repeat, #05070e;
  border: 1px solid rgba(46,242,255,.22); border-radius: 20px; gap: 5px; padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 40px rgba(46,242,255,.05), 0 0 0 1px rgba(255,79,216,.08), 0 26px 60px -30px rgba(0,0,0,.95), 0 0 50px -24px rgba(46,242,255,.35); }
#roFelt .ro-board::before { inset: 0; border-radius: inherit; border: 0; background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 64%, rgba(255,255,255,.05) 70%, rgba(255,255,255,0) 78%); }
#roFelt .ro-board::after { display: none; }
#roFelt .ro-c { --nc: 150,170,255; border-radius: 10px; border: 1px solid rgba(var(--nc), .42); color: #EEF2FF; font: 700 17px/1 var(--font-display); letter-spacing: .01em; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--nc), .16), rgba(var(--nc), .04) 55%, rgba(0,0,0,.25)), rgba(8,10,20,.42);
  -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 18px -12px rgba(var(--nc), .45), 0 0 12px -6px rgba(var(--nc), .7);
  text-shadow: 0 0 10px rgba(var(--nc), .55); transition: box-shadow .2s, border-color .2s, filter .2s, transform .15s; }
#roFelt .ro-c::before { content: ""; position: absolute; left: -30%; top: 0; width: 60%; height: 100%; pointer-events: none; transform: skewX(-24deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0)); }
#roFelt .ro-c.r { --nc: 255,46,99; color: #FFE6EE; }
#roFelt .ro-c.b { --nc: 46,242,255; color: #E6FCFF; }
#roFelt .ro-c.g { --nc: 200,255,46; color: #F4FFD6; font-size: 22px; }
#roFelt .ro-c.out { --nc: 190,160,255; font: 700 11.5px/1 var(--font-display); letter-spacing: .14em; color: #E4E0FF; }
#roFelt .ro-c.out.col { --nc: 255,79,216; color: #FFD9F6; letter-spacing: .06em; }
#roFelt .ro-c.out.rr { --nc: 255,46,99; background: linear-gradient(180deg, rgba(255,46,99,.32), rgba(255,46,99,.08) 60%, rgba(0,0,0,.25)), rgba(8,10,20,.42); }
#roFelt .ro-c.out.bb { --nc: 46,242,255; background: linear-gradient(180deg, rgba(10,14,28,.9), rgba(4,6,12,.9)); }
#roFelt .ro-c:hover:not(:disabled), #roFelt .ro-c:focus-visible, #roFelt .ro-c.cover { filter: brightness(1.2); border-color: rgba(var(--nc), .95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 16px rgba(var(--nc), .35), 0 0 18px -4px rgba(var(--nc), .9); }
/* winning number: the only result marker */
#roFelt .ro-c.hit { z-index: 5; border-color: #fff; color: #fff; filter: none;
  background: linear-gradient(180deg, rgba(var(--nc), .85), rgba(var(--nc), .45)), rgba(8,10,20,.4);
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(var(--nc), .55), 0 0 34px 4px rgba(var(--nc), .85), inset 0 0 20px rgba(255,255,255,.45);
  text-shadow: 0 0 12px #fff; animation: roHitN 1.3s ease-in-out infinite; }
#roFelt .ro-c.hit::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; border: 2px solid rgba(255,255,255,.9); animation: roHitRing 1.3s ease-out infinite; }
@keyframes roHitN { 0%, 100% { transform: scale(1.06); } 50% { transform: scale(1.12); } }
@keyframes roHitRing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
html.rm #roFelt .ro-c.hit, html.rm #roFelt .ro-c.hit::after { animation: none; }
#roFelt .ro-c.won { border-color: #FFD23F; box-shadow: 0 0 0 2px #FFD23F, 0 0 24px rgba(255,210,63,.7); }
#roFelt .ro-c.hit.won { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #FFD23F, 0 0 34px 4px rgba(255,210,63,.85), inset 0 0 20px rgba(255,255,255,.45); }
#roDolly { display: none !important; }
.ro-felt.spinning .ro-board { filter: saturate(.9) brightness(.88); }
@media (max-width: 640px) { #roFelt .ro-c { font-size: 14px; border-radius: 8px; } #roFelt .ro-board { padding: 10px; gap: 3px; } }
#roFelt .ro-c.r { background: linear-gradient(180deg, rgba(255,46,99,.5), rgba(255,46,99,.2) 55%, rgba(60,0,20,.45)), rgba(8,10,20,.4); border-color: rgba(255,90,130,.6); }
#roFelt .ro-c.b { background: linear-gradient(180deg, rgba(46,242,255,.1), rgba(46,242,255,.02) 55%, rgba(0,0,0,.35)), rgba(6,8,16,.62); }
#roFelt .ro-c.g { background: linear-gradient(180deg, rgba(200,255,46,.32), rgba(46,232,122,.14) 60%, rgba(0,30,10,.45)), rgba(8,10,20,.4); border-color: rgba(200,255,46,.6); }
#roFelt .ro-c.hit { background: linear-gradient(180deg, rgba(var(--nc), .9), rgba(var(--nc), .5)), rgba(8,10,20,.4); }

/* Roulette: neon winning-number badge over the wheel */
#roFelt .ro-med { width: clamp(96px, calc(var(--wr, 200px) * .6), 156px); z-index: 7; overflow: visible; border: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.22), transparent 50%), var(--mc);
  box-shadow: 0 0 0 2px var(--mn), 0 0 0 5px rgba(5,6,12,.75), 0 0 0 6px color-mix(in srgb, var(--mn) 55%, transparent), 0 0 34px var(--mg), 0 0 80px color-mix(in srgb, var(--mg) 60%, transparent), 0 20px 44px -12px rgba(0,0,0,.95); }
#roFelt .ro-med.r { --mc: linear-gradient(180deg, #ff2d55, #9c0c26 62%, #4a0412); --mn: #ff5a7a; --mg: rgba(255,45,85,.7); }
#roFelt .ro-med.b { --mc: linear-gradient(180deg, #2a2f44, #0c0e16 62%, #040509); --mn: #2EF2FF; --mg: rgba(46,242,255,.55); }
#roFelt .ro-med.g { --mc: linear-gradient(180deg, #2df59a, #0a8f4f 62%, #03361e); --mn: #C8FF2E; --mg: rgba(60,255,150,.7); }
#roFelt .ro-med b { position: relative; font: 800 clamp(40px, calc(var(--wr, 200px) * .3), 76px)/1 'Clash Display', Satoshi, sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 10px var(--mn), 0 0 26px var(--mg), 0 3px 0 rgba(0,0,0,.5); }
#roFelt .ro-med small { position: relative; font-weight: 700; color: #fff; opacity: .9; }
.ro-med-rays { position: absolute; inset: -38%; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--mn) 55%, transparent) 0 5deg, transparent 5deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 44%, transparent 70%); mask: radial-gradient(circle, transparent 36%, #000 44%, transparent 70%); }
#roFelt .ro-med.in { animation: roMedNeon .85s cubic-bezier(.18,1.5,.36,1) both; }
#roFelt .ro-med.in b { animation: roMedNum .9s cubic-bezier(.2,1.6,.4,1) .12s both, roMedPulse 1.6s ease-in-out 1s infinite; }
#roFelt .ro-med.in .ro-med-rays { animation: roRays 1.1s ease-out .1s both, roRaySpin 9s linear 1.1s infinite; }
#roFelt .ro-med.in::after { inset: -4px; border: 3px solid var(--mn); box-shadow: 0 0 18px var(--mg); animation: roMedRing 1.1s ease-out .15s both; }
#roFelt .ro-med.in::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--mn); opacity: 0; animation: roMedRing 1.3s ease-out .45s both; }
@keyframes roMedNeon { 0% { opacity: 0; transform: translateY(-40px) scale(.2) rotate(-25deg); filter: brightness(2.4); } 60% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes roMedNum { 0% { opacity: 0; transform: scale(2.4); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes roMedPulse { 0%, 100% { text-shadow: 0 0 10px var(--mn), 0 0 26px var(--mg), 0 3px 0 rgba(0,0,0,.5); } 50% { text-shadow: 0 0 16px var(--mn), 0 0 44px var(--mg), 0 3px 0 rgba(0,0,0,.5); } }
@keyframes roRays { 0% { opacity: 0; transform: scale(.5) rotate(-40deg); } 40% { opacity: 1; } 100% { opacity: .55; transform: none; } }
@keyframes roRaySpin { to { rotate: 360deg; } }
html.rm #roFelt .ro-med.in, html.rm #roFelt .ro-med.in b, html.rm #roFelt .ro-med.in .ro-med-rays, html.rm #roFelt .ro-med.in::after, html.rm #roFelt .ro-med.in::before { animation: none; }
html.rm #roFelt .ro-med.in .ro-med-rays { opacity: .4; }

/* Street Duel: your ride + WICK Motors (dealership, garage, paint shop) */
.ar-ride { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; margin: 14px 0 6px; padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(200,255,46,.07), rgba(46,242,255,.05) 50%, rgba(255,79,216,.06)), rgba(10,11,18,.7); border: 1px solid rgba(255,255,255,.08); }
.ar-ride canvas { width: 100%; height: auto; aspect-ratio: 32/17; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.ar-ride-t { display: grid; gap: 2px; min-width: 0; } .ar-ride-t b { font: 700 1.25rem/1.1 'Clash Display', Satoshi, sans-serif; letter-spacing: .02em; }
.ar-ride-b { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .ar-ride { grid-template-columns: 120px 1fr; } .ar-ride-b { grid-column: 1 / -1; justify-content: stretch; } .ar-ride-b .btn { flex: 1; } }
.ar-gar { position: fixed; inset: 0; margin: auto; height: max-content; width: min(940px, 94vw); max-height: 90vh; padding: 0; border: 1px solid rgba(200,255,46,.22); border-radius: 22px; color: var(--bone, #EDEFF7); overflow: auto;
  background: radial-gradient(120% 70% at 10% 0%, rgba(200,255,46,.08), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(255,79,216,.08), transparent 60%), #0A0B12; box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 50px rgba(200,255,46,.08); }
.ar-gar::backdrop { background: rgba(3,4,8,.72); backdrop-filter: blur(6px); }
.ar-gar-in { padding: 20px 22px 22px; display: grid; gap: 14px; }
.ar-gar header { display: flex; align-items: center; gap: 14px; } .ar-gar header > div { flex: 1; } .ar-gar h2 { margin: 2px 0 0; font: 700 1.6rem/1 'Clash Display', Satoshi, sans-serif; }
.ar-gar-bal { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ar-gar-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; font-size: 1.3rem; cursor: pointer; }
.ar-gar-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); width: max-content; max-width: 100%; }
.ar-gar-tabs button { padding: 8px 16px; border-radius: 10px; border: 0; background: none; color: rgba(237,239,247,.7); font-weight: 700; cursor: pointer; }
.ar-gar-tabs button.on { background: #C8FF2E; color: #0A0B10; box-shadow: 0 0 18px rgba(200,255,46,.35); }
.ar-gar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ar-car { display: grid; gap: 8px; padding: 12px; border-radius: 16px; text-align: left; color: inherit; font: inherit; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); position: relative; }
.ar-car canvas { width: 100%; height: auto; aspect-ratio: 32/17; background: radial-gradient(60% 50% at 50% 70%, rgba(46,242,255,.12), transparent 70%); border-radius: 10px; }
.ar-car-t { display: grid; gap: 2px; } .ar-car-t b { font: 700 1.05rem 'Clash Display', Satoshi, sans-serif; letter-spacing: .03em; }
.ar-car .btn { width: 100%; justify-content: center; } .ar-car .btn.arm { background: #FF4FD8; border-color: #FF4FD8; color: #0A0B10; }
.ar-car.has { border-color: rgba(200,255,46,.25); }
.ar-car.pickable { cursor: pointer; } .ar-car.pickable:hover { border-color: rgba(46,242,255,.4); }
.ar-car.on { border-color: #C8FF2E; box-shadow: 0 0 0 1px #C8FF2E inset, 0 0 24px rgba(200,255,46,.18); }
.ar-car-tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,239,247,.6); } .ar-car.on .ar-car-tag { color: #C8FF2E; }
.ar-paint { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: center; }
.ar-paint-pv { width: 100%; height: auto; aspect-ratio: 64/34; border-radius: 16px; background: radial-gradient(60% 45% at 50% 75%, rgba(200,255,46,.14), transparent 70%), linear-gradient(180deg, #11131d, #07080d); border: 1px solid rgba(255,255,255,.06); }
.ar-paint-c { display: grid; gap: 10px; align-content: start; } .ar-paint-c > b { font: 700 1.3rem 'Clash Display', Satoshi, sans-serif; }
.ar-sws { display: flex; flex-wrap: wrap; gap: 10px; }
.ar-sw { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--c); cursor: pointer; padding: 0; }
.ar-sw.on { border-color: #fff; box-shadow: 0 0 0 2px #0A0B12, 0 0 16px var(--c); }
.ar-sw.fac::after { content: "F"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 .75rem Orbitron, sans-serif; color: rgba(0,0,0,.6); }
.ar-sw.cus { background: conic-gradient(#ff3b3b, #ffd23f, #9BE22E, #2EF2FF, #2E8BFF, #7A3CFF, #FF4FD8, #ff3b3b); overflow: hidden; }
.ar-sw.cus.on { background: var(--c); }
.ar-sw.cus input, .rc-paint.cus input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.rc-paint.cus { position: relative; overflow: hidden; background: conic-gradient(#ff3b3b, #ffd23f, #9BE22E, #2EF2FF, #2E8BFF, #7A3CFF, #FF4FD8, #ff3b3b); } .rc-paint.cus.on { background: var(--c); }
@media (max-width: 700px) { .ar-paint { grid-template-columns: 1fr; } .ar-gar-in { padding: 16px; } .ar-gar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ar-car .btn { white-space: normal; padding-left: 6px; padding-right: 6px; font-size: .85rem; } .ar-car { padding: 8px; } .ar-car-t b { font-size: .92rem; } .ar-gar-tabs button { padding: 8px 10px; } }

.ar-gar-grid > *, .ar-paint > *, .ar-gar header > div { min-width: 0; } .ar-gar { overflow-x: hidden; box-sizing: border-box; }
.bw-hub em { display: inline-flex; align-items: center; gap: 3px; }
.bw-hub em img, .bw-hub em svg, .bw-hub em i { width: 1em; height: 1em; }

/* WICK Market: value chips, sparklines, movers, value chart */
.rp-chg { font-style: normal; font: 700 11px var(--font-mono); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.rp-chg.up { color: #5BE584; background: rgba(91,229,132,.1); }
.rp-chg.dn { color: #FF6B7D; background: rgba(255,107,125,.1); }
.rp-spark { display: block; flex: 0 0 auto; overflow: visible; }
.rp-spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rp-spark.up polyline { stroke: #5BE584; } .rp-spark.dn polyline { stroke: #FF6B7D; }
.rp-vc-m { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rp-res-mk { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.6); }
.rp-msec { margin-top: 28px; }
.rp-mk-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.rp-mk-tabs button { padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: rgba(255,255,255,.62); font: 600 12px Satoshi, sans-serif; cursor: pointer; }
.rp-mk-tabs button.on { background: rgba(46,242,255,.14); color: #DFFCFF; box-shadow: inset 0 0 0 1px rgba(46,242,255,.35); }
.rp-mkt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rp-mr { --c: #fff; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); color: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.rp-mr:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: rgba(255,255,255,.05); }
.rp-mr-d { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.rp-mr-n { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.rp-mr-n b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-mr-n small { font-size: 11.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-mr-n em { font-style: normal; color: var(--c); }
.rp-mr-v { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; font-size: 13px; }
.rp-vw.rp-vw-mk { max-width: 900px; align-items: flex-start; }
.rp-vw-mk .rp-vw-i { flex: 1 1 auto; }
.rp-vw-val { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
.rp-vw-val .rc-lbl { display: block; margin: 0 0 2px; }
.rp-vw-val em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.5); padding-bottom: 6px; }
.rp-vw-val .rp-chg { margin-bottom: 6px; }
.rp-vw-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: rgba(255,255,255,.6); }
.rp-vw-sub i { font-style: normal; color: rgba(255,255,255,.45); }
.rp-mk { margin: 8px 0 4px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); position: relative; }
.rp-mk-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rp-mk-h .rc-lbl { margin: 0; }
.rp-mk-h .rp-mk-tabs button { padding: 4px 8px; font-size: 11.5px; }
.rp-mk-cv { position: relative; margin-top: 8px; touch-action: pan-y; }
.rp-mk-cv svg { display: block; overflow: visible; cursor: crosshair; }
.rp-mk-cv text { font: 500 10px var(--font-mono); fill: rgba(255,255,255,.42); }
.rp-mk-base { stroke: rgba(255,255,255,.22); stroke-dasharray: 3 4; }
.rp-mk-cv .rp-mk-bl { fill: rgba(255,255,255,.4); }
.rp-mk-sale { fill: #FFC94A; stroke: #0b0e1f; stroke-width: 1.5; }
.rp-mk-now { filter: drop-shadow(0 0 6px currentColor); }
#rpMkHl { stroke: rgba(255,255,255,.35); stroke-width: 1; }
#rpMkHc { stroke: #0b0e1f; stroke-width: 2; }
.rp-mk-tip { position: absolute; top: -4px; z-index: 2; display: grid; gap: 1px; padding: 6px 9px; border-radius: 9px; background: rgba(8,10,24,.94); border: 1px solid rgba(255,255,255,.14); pointer-events: none; font-size: 12px; white-space: nowrap; }
.rp-mk-tip span { font-size: 10.5px; color: rgba(255,255,255,.55); }
.rp-mk-tip em { font-style: normal; font-size: 11px; color: #FFC94A; }
.rp-mk-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rp-mk-st div { display: grid; gap: 2px; min-width: 0; }
.rp-mk-st span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.rp-mk-st b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-mk-st b.up { color: #5BE584; } .rp-mk-st b.dn { color: #FF6B7D; }
.rp-mk-st em { display: block; font-style: normal; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.5); }
.rp-mk-note { display: block; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.42); }
@media (max-width: 760px) {
  .rp-mkt { grid-template-columns: 1fr; }
  .rp-mr .rp-spark { display: none; }
  .rp-msec .rp-vh { flex-wrap: wrap; gap: 10px; }
  .rp-vw.rp-vw-mk { align-items: stretch; }
  .rp-vw-mk .rp-vw-c { width: min(220px, 60vw); margin: 0 auto; }
  .rp-mk-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rp-vc-m small, .rp-mr-v small { margin-left: 4px; font-size: 10px; color: rgba(255,255,255,.45); }

/* Limbo launch button: bet amount as a solid chip in the display font */
.lb-go small.lb-amt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; margin-left: 2px; border: 0; border-radius: 999px; background: rgba(11,11,20,.88); color: #E9FF9E; opacity: 1;
  font: 700 15px/1 var(--font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums lining-nums; box-shadow: inset 0 0 0 1px rgba(200,255,46,.35); }
.lb-go small.lb-amt .amt { font: inherit; color: inherit; }
.lb-go small.lb-amt img, .lb-go small.lb-amt svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .lb-go small.lb-amt { font-size: 13px; padding: 5px 10px 5px 6px; } }
@container (max-width: 400px) { .lb-go small.lb-amt { display: inline-flex; font-size: 12px; } }
.lb-go small.lb-amt .coin { margin-right: 5px; flex: 0 0 auto; }

/* To win box v3: label sits above the amount so big payouts never collide with it; amount shrinks to fit */
.rc-odds .rc-win { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; row-gap: 4px; justify-items: start; }
.rc-odds .rc-win .rc-win-l, .ax-odds .rc-win .rc-win-l { grid-row: 1 !important; grid-column: 1; max-width: none !important; white-space: nowrap !important; line-height: 1.2; font-size: .72rem; }
.rc-odds .rc-win b, .ax-odds .rc-win b { grid-row: 2; grid-column: 1; justify-self: stretch !important; width: 100%; min-width: 0; display: flex !important; align-items: center; white-space: nowrap; overflow: hidden; }
.rc-odds .rc-win b .amt { white-space: nowrap; }
.rc-odds .rc-win .rc-win-sub, .ax-odds .rc-win-sub { grid-row: 3; grid-column: 1; justify-self: start !important; text-align: left !important; white-space: normal; margin-top: 0; }
/* Pays stats on Dice and Limbo: never wrap, fit handles big numbers */
.dc-s b { white-space: nowrap !important; overflow: hidden; text-overflow: clip !important; min-width: 0; }
.dc-s b .amt { white-space: nowrap; }
/* Cash out buttons with an amount: word on top, amount below, both always fully visible */
.ride-btns .btn.co-amt, .btn.co-main.co-amt { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.05; padding: 4px 10px; overflow: hidden; }
.btn.co-amt .co-w { font-size: .68em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.btn.co-amt .co-v { display: block; max-width: 100%; font-size: 1.04em; font-weight: 700; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.btn.co-amt .co-v .amt { white-space: nowrap; }

/* Keno pay strip: fixed height so picking a number never resizes the board; payouts in the display font */
#view-keno .kn-pay { min-height: 54px; height: 54px; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: safe center; }
#view-keno .kn-pay::-webkit-scrollbar { display: none; }
#view-keno .kp { flex: none; padding: 5px 10px 6px; gap: 2px; border-radius: 10px; background: linear-gradient(180deg, rgba(46,242,255,.07), rgba(155,92,255,.05)); border-color: rgba(46,242,255,.16); }
#view-keno .kp span { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
#view-keno .kp b { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: -.01em;
  background: linear-gradient(100deg, #eafcff 0%, #7ff6ff 45%, #c9a8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(46,242,255,.28)); }
#view-keno .kp.now { border-color: rgba(200,255,46,.75); background: linear-gradient(180deg, rgba(200,255,46,.16), rgba(46,242,255,.06)); }
#view-keno .kp.now b { background: linear-gradient(100deg, #f4ffd0, #c8ff2e 60%, #7ff6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(200,255,46,.45)); }
#view-keno .kp-empty { line-height: 54px; }

/* Slot shells: the bet bar and SPIN always sit above the character art and Now playing card */
.jp-stage .jp-bar { position: relative; z-index: 6; }
.jp-stage .jp-bar .jp-spin { position: relative; z-index: 7; }
@media (min-width: 761px) { .dc-stage > .dc-stats:not(.lb-stats) { grid-template-columns: minmax(0, .85fr) minmax(150px, 1.1fr) minmax(0, .9fr) minmax(0, 1.45fr) !important; } }

/* Rips: free packs won on the Black Wheel */
.rp-shp { position: relative; }
.rp-shp .rp-free { position: absolute; top: 6px; right: 6px; font-style: normal; font-family: var(--font-display); font-size: 9.5px; letter-spacing: .08em; padding: 3px 6px; border-radius: 999px; color: #0a0b0d; background: linear-gradient(100deg, #c8ff2e, #2ef2ff); box-shadow: 0 0 12px rgba(200,255,46,.45); }
#rpGo.rp-gift small { font-size: 11px; letter-spacing: .02em; }

/* Slots: free spins won on the Black Wheel */
.ss-gift { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; align-items: baseline; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: rgba(6,8,12,.86); border: 1px solid rgba(200,255,46,.55); box-shadow: 0 0 18px -4px rgba(200,255,46,.5); font-size: 11px; color: rgba(235,255,210,.8); pointer-events: none; align-items: center; }
.ss-gift .coin { width: 11px; height: 11px; }
.ss-gift b { font-family: var(--font-display); color: #c8ff2e; letter-spacing: .08em; font-size: 12px; }
.jp-spin.gift { box-shadow: 0 0 0 3px rgba(200,255,46,.55), 0 0 28px rgba(200,255,46,.55) !important; }
.jp-spin.gift span { font-size: .78em; }
@media (max-width: 560px) { .ss-gift span { display: none; } }

/* ===== Black Room v3: premium penthouse over the neon city ===== */
@media (max-width: 760px) { .vg-bwheel .vg { --bg: url(assets/vipg/bwheel-bg-m.webp) !important; } }
.vg-bwheel .vg::before { left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; top: -70px !important; opacity: 1 !important; background-position: center 30% !important; filter: saturate(.95) brightness(.95); }
.vg-bwheel .vg::after { left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; top: -70px !important; }
.vg-bwheel .vg::after { background:
  radial-gradient(60% 46% at 50% 58%, rgba(200,255,46,.06), transparent 70%),
  linear-gradient(90deg, rgba(4,4,7,.55), rgba(4,4,7,0) 22%, rgba(4,4,7,0) 78%, rgba(4,4,7,.55)),
  linear-gradient(180deg, rgba(4,4,7,.45) 0%, rgba(4,4,7,.12) 24%, rgba(4,4,7,.2) 55%, rgba(4,4,7,.8) 85%, #040407 100%) !important; }
.vg-bwheel .vg-stage { background: linear-gradient(180deg, rgba(6,6,10,.12), rgba(4,4,7,.42)) !important; border-color: rgba(243,215,138,.22) !important; box-shadow: inset 0 1px 0 rgba(243,215,138,.14), 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4) !important; backdrop-filter: blur(3px) saturate(1.05); overflow: hidden; }
.vg-bwheel .vg-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,215,138,.65), rgba(200,255,46,.5), rgba(243,215,138,.65), transparent); }
.vg-bwheel .vg-panel { background: linear-gradient(180deg, rgba(10,10,14,.84), rgba(6,6,9,.9)) !important; border-color: rgba(243,215,138,.2) !important; box-shadow: inset 0 1px 0 rgba(243,215,138,.12), 0 24px 60px -30px rgba(0,0,0,.9); }
.vg-bwheel .vg-card { background: rgba(255,255,255,.025); border-color: rgba(243,215,138,.12); }
.vg-bwheel .vg-lbl { color: #E9C977; letter-spacing: .16em; }
.vg-bwheel .vg-hero h1 { background: linear-gradient(100deg, #FFFFFF 0%, #F3E7C4 40%, #E9C977 60%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(243,215,138,.18)); }
/* wheel on a lit dais */
.bw-floor { position: absolute; left: 50%; bottom: 7%; width: min(92%, 760px); height: 120px; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200,255,46,.16), rgba(46,242,255,.06) 45%, transparent 72%); filter: blur(10px); }
.bw-wrap { z-index: 1; }
.bw-halo { position: absolute; inset: -4%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: conic-gradient(from 0deg, rgba(255,63,180,.0), rgba(255,63,180,.28), rgba(46,242,255,.0) 30%, rgba(46,242,255,.26) 50%, rgba(200,255,46,.0) 70%, rgba(200,255,46,.28) 85%, rgba(255,63,180,.0));
  filter: blur(26px); opacity: .55; animation: bwHalo 18s linear infinite; }
.bw-wrap.spinning .bw-halo { opacity: .95; animation-duration: 3.2s; }
.bw-wrap.black .bw-halo { opacity: 1; animation-duration: 1.6s; }
@keyframes bwHalo { to { transform: rotate(360deg); } }
html.rm .bw-halo { animation: none; }
.bw-hub { background: radial-gradient(circle at 50% 30%, #17181D, #050507 70%) !important; box-shadow: inset 0 0 0 2px rgba(243,215,138,.55), inset 0 0 0 7px rgba(5,5,7,.9), inset 0 0 0 8px rgba(200,255,46,.35), 0 0 40px -6px rgba(200,255,46,.35), 0 10px 30px rgba(0,0,0,.6) !important; }
.bw-hub span, .bw-hub em { color: #E9C977 !important; }
/* prize list in the panel */
.bw-prz { display: grid; gap: 6px; margin-top: 8px; }
.bw-prz > div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255,255,255,.015)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.bw-prz canvas { width: 34px; height: 34px; }
.bw-prz span { display: grid; min-width: 0; }
.bw-prz b { font-family: var(--font-display); font-size: 13px; color: #F4F2EA; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-prz em { font-style: normal; font-size: 10.5px; color: rgba(230,232,240,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-last .pz { box-shadow: 0 0 0 1px var(--c), 0 0 14px -4px var(--c); }
/* prize reveal card */
.bw-prize { position: absolute; left: 50%; top: 50%; z-index: 30; width: min(92%, 520px); transform: translate(-50%, -46%) scale(.94); opacity: 0; transition: opacity .3s ease, transform .4s cubic-bezier(.2,1.4,.4,1); }
.bw-prize.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bw-pz-in { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(16,16,22,.96), rgba(5,5,8,.97)); border: 1px solid color-mix(in srgb, var(--c) 55%, rgba(243,215,138,.3));
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 60px -10px color-mix(in srgb, var(--c) 60%, transparent), 0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.bw-pz-art { position: relative; display: grid; place-items: center; height: 170px; }
.bw-pz-art img { position: relative; z-index: 1; max-width: 100%; max-height: 170px; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px color-mix(in srgb, var(--c) 45%, transparent)); animation: bwPzFloat 3.4s ease-in-out infinite; }
.bw-pz-art img.av { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); }
.bw-pz-art img.lg { max-height: 110px; }
.bw-pz-rays { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--c) 35%, transparent) 10%, transparent 12% 20%, color-mix(in srgb, var(--c) 30%, transparent) 22%, transparent 24% 36%, color-mix(in srgb, var(--c) 35%, transparent) 38%, transparent 40% 52%, color-mix(in srgb, var(--c) 30%, transparent) 54%, transparent 56% 70%, color-mix(in srgb, var(--c) 35%, transparent) 72%, transparent 74% 86%, color-mix(in srgb, var(--c) 30%, transparent) 88%, transparent 90%);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: bwHalo 9s linear infinite; opacity: .8; }
html.rm .bw-pz-rays, html.rm .bw-pz-art img { animation: none; }
@keyframes bwPzFloat { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.bw-sw { position: relative; z-index: 1; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 30%, color-mix(in srgb, var(--c) 30%, #000) 75%); box-shadow: 0 0 40px var(--c), 0 0 90px -10px var(--c); }
.bw-sw.coin { --c: #FFD166; }
.bw-pz-tx { display: grid; gap: 6px; min-width: 0; }
.bw-pz-tx > span { font-size: 10.5px; letter-spacing: .18em; color: #E9C977; text-transform: uppercase; }
.bw-pz-tx b { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; color: var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); overflow-wrap: anywhere; }
.bw-pz-tx p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(236,238,244,.8); }
.bw-pz-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bw-pz-go, .bw-pz-x { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer; }
.bw-pz-go { color: #0A0B0D; background: linear-gradient(100deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); box-shadow: 0 0 22px -6px var(--c); }
.bw-pz-x { color: #ECEEF4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
@media (max-width: 560px) { .bw-pz-in { grid-template-columns: 1fr; text-align: center; padding: 16px; gap: 10px; } .bw-pz-art { height: 130px; } .bw-pz-art img { max-height: 130px; } .bw-pz-btns { justify-content: center; } .bw-sw { width: 84px; height: 84px; } }
.ar-nob-w { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line-2); }
/* arena rematch request */
.ar-rm { margin: 14px auto 0; max-width: 440px; padding: 12px 14px; border-radius: 14px; background: rgba(10,12,18,.88); border: 1px solid var(--line-2); text-align: left; animation: rxUp .35s both; }
.ar-rm[hidden] { display: none; }
.ar-rm p { margin: 0; display: grid; gap: 2px; font-size: .9rem; }
.ar-rm p span { color: var(--steel-2); font-size: .8rem; }
.ar-rm em { font-style: normal; color: var(--acid); }
.ar-rm-row { display: flex; align-items: center; gap: 12px; }
.ar-rm-row p { flex: 1; min-width: 0; }
.ar-rm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 0 0 rgba(46,242,255,.6); animation: rmPing 1.4s ease-out infinite; }
.ar-rm.in { border-color: rgba(200,255,46,.6); box-shadow: 0 0 0 1px rgba(200,255,46,.2), 0 0 30px -8px rgba(200,255,46,.55); }
.ar-rm.in .ar-rm-dot { background: var(--acid); }
.ar-rm.out { border-color: rgba(46,242,255,.45); }
.ar-rm.warn { border-color: var(--line-2); text-align: center; }
.ar-rm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ar-rx-go.wait { opacity: .7; animation: none !important; }
@keyframes rmPing { 70% { box-shadow: 0 0 0 10px rgba(46,242,255,0); } 100% { box-shadow: 0 0 0 0 rgba(46,242,255,0); } }
html.rm .ar-rm-dot { animation: none; }
.ar-rx .ar-res-acts [hidden] { display: none; }
.ar-rx-in:has(.ar-rm.in) .ar-rx-stats { display: none; }
/* level up v2: solid card that reads clearly over any game */
.sx-lvl { z-index: 90; background: rgba(3,4,8,.8); backdrop-filter: blur(10px) saturate(.7); -webkit-backdrop-filter: blur(10px) saturate(.7); }
.sx-lvl-ring { width: 420px; height: 420px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,46,.22), rgba(46,242,255,.08) 45%, transparent 70%); box-shadow: none; animation: sxRing 1s var(--ease) both; }
.sx-lvl-box { width: min(340px, calc(100vw - 40px)); gap: 10px; padding: 22px 22px 18px; border-radius: 22px; background: linear-gradient(180deg, #14161f, #0a0b11 75%); border: 1px solid rgba(200,255,46,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.75), 0 0 60px -12px rgba(200,255,46,.55); animation: lvPop .55s cubic-bezier(.2,1.4,.4,1) both; }
.sx-lvl-box::after { content: 'Tap to continue'; margin-top: 4px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-2); opacity: .7; }
.sx-lvl-box > p { padding: 5px 12px; border-radius: 999px; background: rgba(46,242,255,.1); border: 1px solid rgba(46,242,255,.4); color: var(--plasma); font-size: .72rem; letter-spacing: .26em; }
.sx-lvl-badge { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 50% 35%, #1f2a10, #0b0d08 70%); isolation: isolate; }
.sx-lvl-badge i { position: absolute; inset: -4px; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, #C8FF2E, #2EF2FF, #FF4FD8, #C8FF2E); animation: rxSpin 3s linear infinite; -webkit-mask: radial-gradient(circle, transparent 62px, #000 63px); mask: radial-gradient(circle, transparent 62px, #000 63px); }
.sx-lvl-badge small { font-size: .62rem; letter-spacing: .3em; color: var(--steel-2); margin-bottom: -4px; }
.sx-lvl-box .sx-lvl-badge b { font-size: 4rem; color: var(--acid); text-shadow: 0 0 24px rgba(200,255,46,.6); }
.sx-lvl-box > span { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 12px; background: rgba(255,201,74,.08); border: 1px solid rgba(255,201,74,.4); color: #FFE08A; font-size: 1.15rem; }
.sx-lvl-box > span small { font-family: var(--font-body, inherit); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-2); }
.sx-lvl-box > small { color: #d9dde8; font-size: .85rem; }
.vp-up .sx-lvl-box { border-color: rgba(255,201,74,.6); box-shadow: 0 30px 80px rgba(0,0,0,.75), 0 0 60px -12px rgba(255,201,74,.55); }
.vp-up .sx-lvl-box > b { font-family: var(--font-display); line-height: 1; }
@keyframes lvPop { from { transform: scale(.7) translateY(14px); opacity: 0; } }
html.rm .sx-lvl-badge i, html.rm .sx-lvl-box, html.rm .sx-lvl-ring { animation: none; }
/* Neon Street Duel wordmark */
.nsd-mark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-family: Orbitron, var(--font-display); font-style: italic; font-weight: 800; transform: skewX(-6deg); user-select: none; }
.nsd-top { font-size: .62rem; letter-spacing: .34em; padding-left: .34em; color: #9ff8ff; text-shadow: 0 0 6px rgba(46,242,255,.9), 0 0 16px rgba(46,242,255,.5); }
.nsd-duel { margin-top: 2px; font-size: 1.55rem; letter-spacing: .16em; padding-left: .16em; background: linear-gradient(180deg, #ffffff 0%, #ffd2f5 35%, #FF4FD8 70%, #b02bd9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(255,79,216,.85)) drop-shadow(0 0 16px rgba(255,79,216,.45)); }
.nsd-mark::after { content: ''; width: 108%; height: 2px; margin-top: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, #2EF2FF 20%, #C8FF2E 50%, #FF4FD8 80%, transparent); box-shadow: 0 0 8px rgba(200,255,46,.6); }
.nsd-mark.lg .nsd-top { font-size: clamp(.8rem, 1.6vw, 1.05rem); }
.nsd-mark.lg .nsd-duel { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.rc-brand { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 7px 14px 6px; border-radius: 12px; background: rgba(5,5,10,.42); border: 1px solid rgba(255,79,216,.28); backdrop-filter: blur(4px); pointer-events: none; opacity: .92; animation: nsdFlick 6s steps(1) infinite; }
.ar-vs-brand { position: absolute; top: clamp(18px, 7vh, 60px); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; animation: arIn .5s var(--ease) both; }
@keyframes nsdFlick { 0%, 100% { opacity: .92; } 47% { opacity: .92; } 48% { opacity: .55; } 49% { opacity: .92; } 51% { opacity: .7; } 52% { opacity: .92; } }
@media (max-width: 600px) { .rc-brand { top: 10px; padding: 5px 9px 4px; } .rc-brand .nsd-top { font-size: .48rem; letter-spacing: .26em; } .rc-brand .nsd-duel { font-size: 1.05rem; } }
html.rm .rc-brand { animation: none; }

/* ---------- Rips v2: packs per rip, bulk rip, review, vault tools, capacity, Card Index ---------- */
.rp-qty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
.rp-qty button { display: grid; gap: 1px; padding: 8px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; font: inherit; }
.rp-qty button b { font: 800 16px 'Clash Display', Orbitron, sans-serif; line-height: 1.1; }
.rp-qty button span { font-size: 10.5px; color: rgba(255,255,255,.6); }
.rp-qty button.on { border-color: rgba(46,242,255,.6); background: rgba(46,242,255,.12); box-shadow: 0 0 0 1px rgba(46,242,255,.25) inset; }
.rp-bmode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.rp-bmode[hidden] { display: none; }
.rp-bmode .rc-tier { min-height: 0; padding: 8px 8px; }
.rp-bmode .rc-tier span { font-size: 10.5px; line-height: 1.25; color: rgba(255,255,255,.62); }
.rp-ixjump { display: block; margin: 8px 0 4px; font-size: 12.5px; }
.rp-free.rp-out { background: rgba(255,90,78,.18); color: #FFB3AC; border-color: rgba(255,90,78,.45); }

/* bulk montage */
.rp-rip.rp-bulk { inset: 36px 0 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 18px 16px; place-items: initial; }
.rp-bk-h { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(6,8,20,.72); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.rp-bk-h img { width: 40px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.rp-bk-h > div { display: grid; gap: 2px; }
.rp-bk-h b { font: 800 20px 'Clash Display', Orbitron, sans-serif; }
.rp-bk-t { margin-left: auto; text-align: right; }
.rp-bk-t span { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
.rp-bk-g { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); align-content: center; gap: 6px; }
.rp-mini { --rc: #fff; position: relative; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
.rp-mini.on { border-color: var(--rc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent) inset, 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); animation: rpMiniIn .32s cubic-bezier(.2,.9,.3,1.2) both; }
.rp-mini.r4.on, .rp-mini.r5.on { box-shadow: 0 0 0 2px var(--rc) inset, 0 0 22px var(--rc); }
@keyframes rpMiniIn { from { transform: scale(.6) rotateY(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
html.rm .rp-mini.on { animation: none; }
.rp-mini-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.rp-mini img { position: absolute; inset: 8% 6% 18%; width: 88%; height: 74%; object-fit: contain; }
.rp-mini-p { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 3px; font: 700 8px/1.2 Satoshi, sans-serif; font-style: normal; text-align: center; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: rgba(4,6,14,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-mini-p.p-holo { color: #BFF6FF; } .rp-mini-p.p-gold { color: #FFD76A; } .rp-mini-p.p-black { color: #C8FF2E; } .rp-mini-p.p-one { color: #FF9FD4; }
.rp-bulk .rp-skip { position: static; align-self: center; }

/* review + summary dialog */
.rp-vw.rp-rv { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 1080px; padding: 22px 22px 0; }
.rp-rv-h h3 { margin: 2px 0 4px; font: 800 22px 'Clash Display', Orbitron, sans-serif; }
.rp-rv-h p { margin: 0; max-width: 720px; }
.rp-rv-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rp-rv-q { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-rv-q button, .rp-vchips button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; font: 600 12.5px Satoshi, sans-serif; cursor: pointer; }
.rp-rv-q button:hover, .rp-vchips button:hover { border-color: rgba(46,242,255,.45); }
.rp-rv-bar select, .rp-vbar select, .rp-vbar input { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; padding: 8px 10px; font: 500 13px Satoshi, sans-serif; }
.rp-rv-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.rp-rv-c { --rc: #fff; position: relative; display: grid; gap: 3px; padding: 6px 6px 8px; border-radius: 12px; text-align: left; color: #fff; font: inherit; cursor: pointer; background: rgba(255,255,255,.035); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); transition: opacity .15s, transform .15s, border-color .15s; }
div.rp-rv-c { cursor: default; }
.rp-rv-c.s { opacity: .55; border-color: rgba(255,90,78,.5); }
.rp-rv-c.s .rp-rv-art { filter: grayscale(.7); }
.rp-rv-c:hover { transform: translateY(-2px); }
.rp-rv-art { position: relative; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); }
.rp-rv-art .rp-mini-p { font-size: 9px; }
.rp-rv-c b { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rv-c span { font-size: 10.5px; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rv-c em { font-style: normal; font-size: 12px; font-weight: 700; }
.rp-rv-tag { position: absolute; top: 10px; right: 10px; padding: 3px 7px; border-radius: 999px; font: 800 10px Satoshi, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: rgba(46,242,255,.9); color: #041016; }
.rp-rv-c.s .rp-rv-tag { background: #FF5A4E; color: #fff; }
.rp-rv-f { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px -22px 0; padding: 14px 22px; background: linear-gradient(180deg, rgba(11,14,31,.85), #0b0e1f 40%); border-top: 1px solid rgba(255,255,255,.1); }
.rp-rv-f > div:first-child { display: grid; gap: 3px; font-size: 14px; }
.rp-rv-f small { font-size: 12px; color: rgba(255,255,255,.6); }
.rp-rv-f small.rp-warn { color: #FFB3AC; }
.rp-rv-fb { display: flex; gap: 10px; align-items: center; }
.rp-rv-go { min-width: 200px; }

/* vault tools + capacity */
.rp-vcap { display: grid; gap: 5px; min-width: 240px; flex: 0 1 320px; }
.rp-vcap-t { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.7); }
.rp-vcap-t b { color: #fff; font-size: 13px; }
.rp-vcap-b { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.rp-vcap-b i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2EF2FF, #C8FF2E); transition: width .4s; }
.rp-vcap-b.near i { background: linear-gradient(90deg, #FFC94A, #FF9F2E); }
.rp-vcap-b.full i { background: #FF5A4E; }
.rp-vcap small { font-size: 11.5px; color: rgba(255,255,255,.55); }
.rp-vbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; }
.rp-vbar input { flex: 1 1 220px; min-width: 0; }
.rp-vbar .rp-link { margin-left: auto; }
.rp-vchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-vchips button i { margin-left: 6px; font-style: normal; font-size: 11px; color: rgba(255,255,255,.55); }
.rp-vchips button.on { border-color: rgba(46,242,255,.6); background: rgba(46,242,255,.13); }
.rp-vchips button.on i { color: #DFFCFF; }
.rp-vc-c { position: relative; }
.rp-vc-x { position: absolute; top: 6px; left: 6px; z-index: 3; padding: 2px 7px; border-radius: 999px; background: rgba(4,6,14,.85); border: 1px solid rgba(255,255,255,.25); font-size: 11px; font-style: normal; font-weight: 700; color: #fff; }
.rp-vmore { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 16px; }

/* Card Index */
.rp-isec { margin-top: 34px; }
.rp-ixpar button small { margin-left: 5px; font-size: 10.5px; opacity: .7; }
.rp-idx { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rp-ix { display: grid; gap: 4px; padding: 7px 7px 9px; border-radius: 12px; text-align: left; color: #fff; font: inherit; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: transform .15s, border-color .15s; }
.rp-ix:hover { transform: translateY(-2px); border-color: rgba(46,242,255,.4); }
.rp-ix-a { position: relative; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; }
.rp-ix:not(.own) .rp-ix-a { filter: grayscale(.85) brightness(.55); }
.rp-ix.own { border-color: rgba(200,255,46,.35); }
.rp-ix-own, .rp-ix-out { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; font: 800 10px Satoshi, sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.rp-ix-own { background: #C8FF2E; color: #0b1300; }
.rp-ix-out { left: auto; right: 6px; background: rgba(255,90,78,.92); color: #fff; }
.rp-ix b { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ix b .mono { color: rgba(255,255,255,.55); font-weight: 600; }
.rp-ix-v { font-size: 11px; color: rgba(255,255,255,.65); }
.rp-ix-b { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.rp-ix-b i { display: block; height: 100%; background: linear-gradient(90deg, #2EF2FF, #D77BFF); }
.rp-ix small { font-size: 10.5px; color: rgba(255,255,255,.55); line-height: 1.3; }
.rp-idx-note { margin-top: 12px; }
@media (max-width: 700px) {
  .rp-vcap { flex-basis: 100%; }
  .rp-rv-g { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .rp-idx { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .rp-vw.rp-rv { padding: 16px 14px 0; }
  .rp-rv-f { margin: 4px -14px 0; padding: 12px 14px; }
  .rp-rv-go { min-width: 0; flex: 1; }
}
/* funds prompt */
.wk-funds p b.mono { color: #C8FF2E; }
[data-need]:disabled { pointer-events: none; }
.rp-go, .rp-rv-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: auto; min-height: 56px; padding: 8px 12px; line-height: 1.1; }
.rp-go small, .rp-rv-go small { font: 700 11.5px var(--font-mono), monospace; font-style: normal; letter-spacing: .02em; opacity: .78; }
.rp-go small .coin, .rp-rv-go small .coin { width: 11px; height: 11px; }
.rp-rv-f .rp-rv-sum { display: block; margin: 0; font-size: 14px; line-height: 1.4; }
.rp-rv-f > div:first-child { flex: 1 1 320px; }
.rp-rv-go { flex: 0 0 auto; min-width: 220px; width: auto; margin-top: 0; }
/* cash-out card: big numbers always fit, wager box stacks label over amount */
.mk-offer { white-space: nowrap; overflow: hidden; }
.wager { flex-direction: column; align-items: stretch; gap: 6px; }
.wager-l { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.wager-l .lbl { white-space: nowrap; }
.wager-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wager-v { display: block; overflow: hidden; text-align: left; }
.co-sum .mono { white-space: nowrap; overflow: hidden; display: block; }
/* slots: Last win readout */
.jp-last .mono { color: #C8FF2E; }
.jp-last .mono.flash { animation: jpLastF 1.2s ease-out; }
@keyframes jpLastF { 0% { text-shadow: 0 0 18px rgba(200,255,46,.9); transform: scale(1.12); } 100% { text-shadow: none; transform: none; } }
html.rm .jp-last .mono.flash { animation: none; }
.jp-last { min-width: 104px; }
@media (max-width: 640px) {
  .jp-bar { grid-template-areas: "i m s bal auto" "bet bet bet bet spin" "last last tog tog tog"; }
  .jp-bal.jp-last { grid-area: last; text-align: left; }
  .jp-tog { justify-self: end; }
}

/* ===== Rips premium ladder: each parallel is a clear step up in finish and detail ===== */
@property --rpa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rpSpin { to { --rpa: 360deg; } }
@keyframes rpTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes rpDrift { from { background-position: 0 0, 0 0; } to { background-position: 28cqw 40cqw, -20cqw 30cqw; } }
@keyframes rpIri { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.rp-slab { --mx: 50%; --my: 38%; }
.rp-tex, .rp-edge { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.rp-tex { z-index: 4; opacity: 0; }
.rp-edge { z-index: 5; }
.rp-crest { position: absolute; z-index: 6; top: 3cqw; left: 50%; transform: translateX(-50%); padding: .7cqw 2.4cqw; border-radius: 99px; font: 800 3.2cqw/1 var(--font-mono); font-style: normal; letter-spacing: .14em; white-space: nowrap; pointer-events: none; }
/* foil follows the pointer on every premium tier */
.rp-slab.lit .rp-foil { animation: none; background-position: var(--mx) var(--my); }

/* BASE: clean matte, thin frame, no foil */
.rp-slab.p-base .rp-card { border-width: 1.5cqw; box-shadow: inset 0 0 0 .5cqw rgba(0,0,0,.5); }
.rp-slab.p-base .rp-cbg { filter: saturate(.9) brightness(.62); }

/* HOLO: prism border, rainbow foil that moves with the light, fine holo lines and sparkle */
.rp-slab.p-holo { box-shadow: inset 0 0 0 1.2cqw rgba(255,255,255,.1), 0 0 7cqw -3cqw #7ff3ff; }
.rp-slab.p-holo .rp-card { border: 2.4cqw solid transparent; background: linear-gradient(#0b1230, #0b1230) padding-box, conic-gradient(from var(--rpa), #ff4fd8, #4ff3ff, #b8ff4f, #ffd84f, #ff4fd8) border-box; animation: rpSpin 7s linear infinite; box-shadow: 0 0 6cqw -2cqw #8af6ff; }
.rp-slab.p-holo .rp-foil { opacity: .5; background: linear-gradient(115deg, transparent 18%, rgba(255,79,216,.7) 32%, rgba(79,243,255,.7) 42%, rgba(184,255,79,.65) 52%, rgba(255,216,79,.65) 60%, transparent 76%); background-size: 260% 260%; animation: rpHolo 6s linear infinite; }
.rp-slab.p-holo .rp-tex { opacity: .55; mix-blend-mode: screen; background: repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 .35cqw, transparent .35cqw 1.5cqw), radial-gradient(circle, rgba(255,255,255,.9) 0 .3cqw, transparent .5cqw) 0 0 / 11cqw 13cqw; animation: rpTwinkle 3.2s ease-in-out infinite; }
.rp-slab.p-holo .rp-lab { border-color: transparent; background: linear-gradient(180deg, #f6fbff, #e2ecf7) padding-box, linear-gradient(90deg, #ff4fd8, #4ff3ff, #b8ff4f, #ffd84f) border-box; }
.rp-slab.p-holo .rp-cname b { background: linear-gradient(90deg, #ffffff, #bff8ff 40%, #ffd1f4 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 1.5cqw rgba(127,243,255,.8)); }

/* GOLD: polished metal frame, corner filigree, gold label, warm glitter */
.rp-slab.p-gold { background: linear-gradient(160deg, rgba(255,236,170,.36), rgba(255,200,90,.12) 40%, rgba(255,240,200,.3) 75%, rgba(255,200,90,.12)); border-color: rgba(255,220,140,.75); box-shadow: inset 0 0 0 1.2cqw rgba(255,210,120,.12), 0 0 9cqw -3cqw rgba(255,190,60,.75); }
.rp-slab.p-gold .rp-card { border: 2.8cqw solid transparent; background: linear-gradient(#1c1203, #1c1203) padding-box, linear-gradient(135deg, #6b4a0e, #ffe9a3 16%, #c8902a 30%, #fff6d2 46%, #a8741c 60%, #ffd76a 76%, #6b4a0e) border-box; box-shadow: inset 0 0 0 .6cqw rgba(0,0,0,.55), 0 0 7cqw -2cqw rgba(255,200,80,.8); }
.rp-slab.p-gold .rp-edge { inset: 1.4cqw; border-radius: 2cqw; --g: linear-gradient(135deg, #fff4c8, #d9a43b); background:
  linear-gradient(#ffe39a, #ffe39a) 0 0 / 9cqw .6cqw no-repeat, linear-gradient(#ffe39a, #ffe39a) 0 0 / .6cqw 9cqw no-repeat,
  linear-gradient(#ffe39a, #ffe39a) 100% 0 / 9cqw .6cqw no-repeat, linear-gradient(#ffe39a, #ffe39a) 100% 0 / .6cqw 9cqw no-repeat,
  linear-gradient(#ffe39a, #ffe39a) 0 100% / 9cqw .6cqw no-repeat, linear-gradient(#ffe39a, #ffe39a) 0 100% / .6cqw 9cqw no-repeat,
  linear-gradient(#ffe39a, #ffe39a) 100% 100% / 9cqw .6cqw no-repeat, linear-gradient(#ffe39a, #ffe39a) 100% 100% / .6cqw 9cqw no-repeat;
  filter: drop-shadow(0 0 1cqw rgba(255,210,110,.9)); }
.rp-slab.p-gold .rp-foil { opacity: .5; background: linear-gradient(120deg, transparent 18%, #ffd76a 36%, transparent 50%, #fff1b8 64%, transparent 82%); background-size: 260% 260%; }
.rp-slab.p-gold .rp-tex { opacity: .6; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,230,150,.95) 0 .25cqw, transparent .45cqw) 0 0 / 7cqw 9cqw, radial-gradient(circle, rgba(255,255,255,.8) 0 .2cqw, transparent .4cqw) 3cqw 4cqw / 13cqw 11cqw; animation: rpTwinkle 2.6s ease-in-out infinite; }
.rp-slab.p-gold .rp-lab { background: linear-gradient(180deg, #fff8e2, #f0dca4); border-color: #d4a23a; box-shadow: 0 0 3cqw -1cqw #ffc94a, inset 0 1px 0 #fff; }
.rp-slab.p-gold .rp-lab-r strong { background: linear-gradient(180deg, #8a5f12, #3a2604); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-slab.p-gold .rp-cname b { background: linear-gradient(180deg, #fff6d2, #ffd76a 45%, #c8902a 60%, #ffe9a3); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 .3cqw 0 #3a2604) drop-shadow(0 0 1.6cqw rgba(255,200,80,.7)); }
.rp-slab.p-gold .rp-crest { background: linear-gradient(135deg, #ffe9a3, #c8902a 50%, #fff2c0); color: #2a1a02; box-shadow: 0 0 2.5cqw rgba(255,200,80,.8); }
.rp-slab.p-gold .rp-sn { background: linear-gradient(135deg, #fff2c0, #d9a43b); }

/* BLACK: carbon fiber frame, smoked case, a neon light that runs around the border, black label */
.rp-slab.p-black { background: linear-gradient(160deg, rgba(40,46,40,.6), rgba(10,12,10,.55) 45%, rgba(50,60,40,.45) 80%, rgba(10,12,10,.6)); border-color: rgba(200,255,46,.45); box-shadow: inset 0 0 0 1.2cqw rgba(200,255,46,.06), 0 0 10cqw -3cqw rgba(200,255,46,.6); }
.rp-slab.p-black .rp-card { border: 2.8cqw solid transparent; background: linear-gradient(#050505, #050505) padding-box, repeating-linear-gradient(45deg, #0c0c0c 0 .55cqw, #1f1f1f .55cqw 1.1cqw), #111 border-box; box-shadow: inset 0 0 0 .7cqw #C8FF2E, inset 0 0 5cqw rgba(200,255,46,.25), 0 0 7cqw -1cqw rgba(200,255,46,.6); }
.rp-slab.p-black .rp-edge { inset: -2.8cqw; padding: 1cqw; border-radius: 3cqw; background: conic-gradient(from var(--rpa), transparent 0 62%, rgba(200,255,46,.2) 72%, #eaffb0 86%, #C8FF2E 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rpSpin 3.6s linear infinite; filter: drop-shadow(0 0 1.4cqw #C8FF2E); }
.rp-slab.p-black .rp-cbg { filter: saturate(1.25) brightness(.5) contrast(1.15); }
.rp-slab.p-black .rp-foil { opacity: .4; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 22%, rgba(200,255,46,.6) 38%, rgba(46,242,255,.5) 48%, rgba(215,123,255,.5) 58%, transparent 74%); background-size: 260% 260%; animation: rpHolo 7s linear infinite; }
.rp-slab.p-black .rp-tex { opacity: .5; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(200,255,46,.06) 0 .3cqw, transparent .3cqw 2.2cqw), radial-gradient(circle, rgba(220,255,140,.9) 0 .22cqw, transparent .45cqw) 0 0 / 9cqw 12cqw; animation: rpTwinkle 2.2s ease-in-out infinite; }
.rp-slab.p-black .rp-lab { background: linear-gradient(180deg, #171a14, #050505); border-color: #C8FF2E; box-shadow: 0 0 3.5cqw -1cqw #C8FF2E; }
.rp-slab.p-black .rp-lab-l b, .rp-slab.p-black .rp-lab-r strong { color: #C8FF2E; text-shadow: 0 0 2cqw rgba(200,255,46,.6); }
.rp-slab.p-black .rp-lab-l span, .rp-slab.p-black .rp-lab-r em { color: #d7e6c0; }
.rp-slab.p-black .rp-cname b { color: #f4ffe0; text-shadow: 0 0 2.4cqw #C8FF2E, 0 0 6cqw rgba(200,255,46,.6), 0 1px 0 #000; }
.rp-slab.p-black .rp-crest { background: #050505; color: #C8FF2E; border: .5cqw solid #C8FF2E; box-shadow: 0 0 3cqw rgba(200,255,46,.7); }
.rp-slab.p-black .rp-sn { background: #C8FF2E; color: #050505; }

/* ONE OF ONE: iridescent case, rotating rainbow frame with a white flare, cosmic sparkle field, holo label */
.rp-slab.p-one { background: linear-gradient(120deg, rgba(255,120,220,.32), rgba(120,240,255,.26), rgba(200,255,120,.24), rgba(255,220,120,.28), rgba(255,120,220,.32)); background-size: 300% 100%; animation: rpIri 9s linear infinite; border-color: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.2cqw rgba(255,255,255,.14), 0 0 12cqw -3cqw rgba(255,107,213,.85), 0 0 22cqw -8cqw rgba(79,243,255,.7); }
.rp-slab.p-one .rp-card { border: 3cqw solid transparent; background: linear-gradient(#14041d, #14041d) padding-box, conic-gradient(from var(--rpa), #ff4fd8, #ffd84f, #b8ff4f, #4ff3ff, #9b6bff, #ff4fd8) border-box; animation: rpSpin 5s linear infinite; box-shadow: inset 0 0 0 .6cqw rgba(255,255,255,.75), 0 0 9cqw -1cqw rgba(255,107,213,.9); }
.rp-slab.p-one .rp-edge { inset: -3cqw; padding: 1.1cqw; border-radius: 3cqw; background: conic-gradient(from calc(var(--rpa) * -1), transparent 0 70%, rgba(255,255,255,.95) 84%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rpSpin 2.8s linear infinite; filter: drop-shadow(0 0 1.6cqw #fff); }
.rp-slab.p-one .rp-foil { opacity: .7; background: conic-gradient(from 0deg at var(--mx) var(--my), #ff4fd8, #4ff3ff, #b8ff4f, #ffd84f, #ff4fd8); background-size: 200% 200%; }
.rp-slab.p-one .rp-tex { opacity: .85; mix-blend-mode: screen; background: radial-gradient(circle, #fff 0 .28cqw, transparent .5cqw) 0 0 / 9cqw 11cqw, radial-gradient(circle, rgba(255,200,250,.9) 0 .2cqw, transparent .4cqw) 4cqw 5cqw / 14cqw 12cqw, repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 .35cqw, transparent .35cqw 1.4cqw); animation: rpDrift 14s linear infinite, rpTwinkle 2s ease-in-out infinite; }
.rp-slab.p-one .rp-lab { border-color: transparent; background: linear-gradient(120deg, #ffe3f6, #dff9ff, #f4ffd9, #fff2d4, #ffe3f6) padding-box, conic-gradient(from var(--rpa), #ff4fd8, #4ff3ff, #b8ff4f, #ffd84f, #ff4fd8) border-box; background-size: 300% 100%, auto; animation: rpIri 7s linear infinite; }
.rp-slab.p-one .rp-cname b { background: linear-gradient(90deg, #fff, #ffc6f0, #c6fbff, #f2ffc6, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: rpIri 4s linear infinite; filter: drop-shadow(0 0 2cqw rgba(255,107,213,.9)); }
.rp-slab.p-one .rp-crest { background: linear-gradient(90deg, #ff4fd8, #ffd84f, #4ff3ff, #ff4fd8); background-size: 200% 100%; animation: rpIri 3s linear infinite; color: #14041d; box-shadow: 0 0 4cqw rgba(255,107,213,.9); }
.rp-slab.p-one .rp-sn { background: #fff; color: #14041d; box-shadow: 0 0 3cqw #fff; }
html.rm .rp-slab, html.rm .rp-slab *, html.rm .rp-tier { animation: none !important; }

/* small tiles (bulk rip, review, Card Index) carry the same ladder */
.rp-tier.p-holo { box-shadow: 0 0 0 1.5px transparent; background-image: conic-gradient(from var(--rpa), #ff4fd8, #4ff3ff, #b8ff4f, #ffd84f, #ff4fd8); padding: 2px; animation: rpSpin 7s linear infinite; }
.rp-tier.p-gold { padding: 2px; background-image: linear-gradient(135deg, #6b4a0e, #ffe9a3 20%, #c8902a 40%, #fff6d2 55%, #a8741c 75%, #ffd76a); }
.rp-tier.p-black { padding: 2px; background-image: repeating-linear-gradient(45deg, #0c0c0c 0 3px, #222 3px 6px); box-shadow: inset 0 0 0 1px #C8FF2E, 0 0 12px rgba(200,255,46,.45); }
.rp-tier.p-one { padding: 2px; background-image: conic-gradient(from var(--rpa), #ff4fd8, #ffd84f, #b8ff4f, #4ff3ff, #9b6bff, #ff4fd8); animation: rpSpin 4s linear infinite; box-shadow: 0 0 16px rgba(255,107,213,.6); }
.rp-tier.p-holo > .rp-mini-bg, .rp-tier.p-gold > .rp-mini-bg, .rp-tier.p-black > .rp-mini-bg, .rp-tier.p-one > .rp-mini-bg { inset: 2px; border-radius: inherit; }
.rp-tier.p-holo::after, .rp-tier.p-one::after { content: ''; position: absolute; inset: 2px; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35; background: linear-gradient(115deg, transparent 20%, rgba(255,79,216,.8) 38%, rgba(79,243,255,.8) 50%, rgba(255,216,79,.7) 62%, transparent 80%); background-size: 260% 260%; animation: rpHolo 6s linear infinite; }
.rp-tier.p-gold::after { content: ''; position: absolute; inset: 2px; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .3; background: linear-gradient(120deg, transparent 25%, #ffd76a 45%, transparent 60%); background-size: 260% 260%; animation: rpHolo 5s linear infinite; }
/* foil + texture sit behind the subject (like a refractor) so the art stays clean */
.rp-slab .rp-card .rp-foil, .rp-slab .rp-card .rp-tex { z-index: 1; }
.rp-slab.p-holo .rp-foil { opacity: .55; }
.rp-slab.p-one .rp-foil { opacity: .5; }
.rp-slab.p-one .rp-tex { opacity: .7; }
/* full-bleed key art: keep a light foil on top */
.rp-slab .rp-card.k-key .rp-foil { z-index: 4; opacity: .22; }
.rp-slab .rp-card.k-key .rp-tex { z-index: 4; opacity: .3; }
/* a soft prism glint over the subject on premium tiers, follows the pointer */
.rp-slab:is(.p-holo, .p-gold, .p-black, .p-one) .rp-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: .55; background: radial-gradient(40% 30% at var(--mx) var(--my), rgba(255,255,255,.75), transparent 70%); }
.rp-slab.p-holo { --pc: #9FF7FF; }
.rp-slab.p-holo .rp-card { border-width: 2cqw; animation-duration: 10s; }
.rp-cname b { font-size: 6.2cqw; }
.rp-slab .rp-crest { top: 3.2cqw; }
/* table history */
.th { display: grid; gap: 10px; }
.th-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: rgba(255,255,255,.7); padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.th-sum b { color: #fff; } .th-sum .up { color: #C8FF2E; } .th-sum .dn { color: #FF8A80; }
.th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.th-list li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.03); border-left: 3px solid rgba(255,255,255,.2); font-size: 12.5px; }
.th-list li.w { border-left-color: #C8FF2E; } .th-list li.l { border-left-color: #FF5A4E; }
.th-t { font-size: 11px; color: rgba(255,255,255,.5); }
.th-r { min-width: 0; color: rgba(255,255,255,.85); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.th-n { display: grid; justify-items: end; line-height: 1.2; }
.th-n small { font-size: 10.5px; color: rgba(255,255,255,.5); }
.th-list li.w .th-n b { color: #C8FF2E; } .th-list li.l .th-n b { color: #FF8A80; }
.th-tag { font: 800 10.5px var(--font-mono); font-style: normal; min-width: 26px; text-align: center; padding: 3px 5px; border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; }
.th-tag.ro-red { background: #C8102E; } .th-tag.ro-black { background: #15151c; border: 1px solid rgba(255,255,255,.25); } .th-tag.ro-green { background: #0F8A4B; }
.th-tag.w { background: rgba(200,255,46,.2); color: #DFFF8A; } .th-tag.l { background: rgba(255,90,78,.18); color: #FFB3AC; } .th-tag.p { background: rgba(255,255,255,.1); }
.th-empty { margin: 4px 0; }
.th-clear { justify-self: start; font-size: 12px; }
/* blackjack: many split hands */
#playerCards.split.many { flex-wrap: wrap; gap: 10px 14px; }
#playerCards.split.many .card { --cw: 58px; width: 58px; height: 82px; }
#playerCards.split.many .phand { padding: 6px 6px 4px; }
#playerCards.split.lots .card { width: 46px; height: 66px; }
#playerCards.split.many .card .cc { font-size: 22px; }
#playerCards.split.lots .card .cc { font-size: 17px; }
/* blackjack side bets */
.bj-sides { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; margin: 10px 0 2px; }
.bj-side { display: grid; gap: 2px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.035); color: #fff; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.bj-side:hover:not(:disabled) { border-color: rgba(46,242,255,.55); }
.bj-side-n { font: 800 12.5px Satoshi, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.bj-side-p { font-size: 11px; color: rgba(255,255,255,.58); line-height: 1.25; }
.bj-side b { font-size: 13px; color: rgba(255,255,255,.55); }
.bj-side.on { border-style: solid; border-color: rgba(200,255,46,.6); background: rgba(200,255,46,.08); }
.bj-side.on b { color: #C8FF2E; }
.bj-side.won { border-color: #C8FF2E; box-shadow: 0 0 0 1px #C8FF2E inset, 0 0 22px rgba(200,255,46,.4); }
.bj-side:disabled { cursor: default; opacity: .85; }
.bj-sclear { align-self: center; }
@media (max-width: 640px) { .bj-sides { grid-template-columns: 1fr 1fr; } .bj-sclear { grid-column: 1 / -1; justify-self: end; } }
.wk-sides .bj-side.lost { opacity: .6; }
.wk-sides .bj-side.lost b { color: rgba(255,255,255,.5); }
@media (max-width: 640px) { .wk-sides { grid-template-columns: 1fr 1fr !important; } }
/* roulette inside bets on the lines: splits, corners, streets, six lines */
.ro-c.ro-z { position: absolute; z-index: 5; background: transparent; border: 0; border-radius: 6px; box-shadow: none; padding: 0; min-width: 0; }
.ro-c.ro-z.z-cn, .ro-c.ro-z.z-sl { z-index: 6; border-radius: 50%; }
.ro-c.ro-z::before { content: ""; position: absolute; inset: 30%; border-radius: inherit; background: rgba(255,210,63,0); transition: background .15s; }
.ro-c.ro-z:hover:not(:disabled)::before, .ro-c.ro-z:focus-visible::before { background: rgba(255,210,63,.85); inset: 25%; }
.ro-c.ro-z:hover:not(:disabled), .ro-c.ro-z:focus-visible, .ro-c.ro-z.cover { filter: none; box-shadow: none; background: rgba(255,210,63,.12); }
.ro-c.ro-z .ro-chip { width: 22px; height: 22px; font-size: 8px; z-index: 7; }
.ro-board.v .ro-c.ro-z .ro-chip { width: 18px; height: 18px; font-size: 7px; }
.ro-c.ro-z.has { z-index: 8; }
.ro-c.ro-z.won, .ro-c.ro-z.hit { box-shadow: none; animation: none; background: transparent; }
#roFelt .ro-c.ro-z, #roFelt .ro-c.ro-z:hover:not(:disabled), #roFelt .ro-c.ro-z:focus-visible, #roFelt .ro-c.ro-z.won, #roFelt .ro-c.ro-z.hit { overflow: visible; border: 0; background: transparent; box-shadow: none; filter: none; animation: none; }
#roFelt .ro-c.ro-z::before { left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,0); transition: background .15s, width .15s, height .15s; }
#roFelt .ro-c.ro-z::after { display: none; }
#roFelt .ro-c.ro-z:hover:not(:disabled)::before, #roFelt .ro-c.ro-z:focus-visible::before { width: 9px; height: 9px; background: #FFD23F; box-shadow: 0 0 10px #FFD23F; }
#roFelt .ro-c.ro-z.has::before { display: none; }
#roFelt .ro-board.lock .ro-c.ro-z:not(.has) { pointer-events: none; }
/* chip labels: shrink by length so 4 to 5 characters stay inside the inner disc */
.ro-chip[data-len="4"] { font-size: 8px; letter-spacing: -.04em; }
.ro-chip[data-len="5"] { font-size: 7px; letter-spacing: -.05em; }
.ro-board.v .ro-chip[data-len="4"], .ro-c.ro-z .ro-chip[data-len="4"] { font-size: 6.5px; }
.ro-board.v .ro-chip[data-len="5"], .ro-c.ro-z .ro-chip[data-len="5"] { font-size: 6px; }
/* Originals: compact chrome on short desktop windows so chips and the bet button stay on screen */
@media (min-width: 1025px) and (max-height: 1000px) {
  .og-felt { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .og-title h2 { font-size: 26px; margin: 0; }
  .og-title .eyebrow, .og-title small { font-size: 9.5px; }
  .og-felt .pl-opts { gap: 6px 14px; }
  .og-felt .pl-opts .auto-opts.inline { margin: 0; }
  .og-felt .controls { gap: 8px; }
  .og-felt .status { min-height: 0; margin: 0; }
}
@media (min-width: 1025px) {
  .table-layout:has(> .og-felt) > aside { max-height: calc(100vh - 136px); overflow-y: auto; scrollbar-width: thin; }
  .table-layout:has(> .og-felt) > aside > * { flex-shrink: 0; }
}
/* chip labels sized by length so every value sits cleanly inside the inner disc */
.chip { font-weight: 800; line-height: 1; }
.chip[data-len="1"], .chip[data-len="2"] { font-size: 16px; }
.chip[data-len="3"] { font-size: 14px; letter-spacing: -.02em; }
.chip[data-len="4"] { font-size: 12px; letter-spacing: -.045em; }
.chip[data-len="5"] { font-size: 10.5px; letter-spacing: -.05em; }
@media (max-width: 560px) {
  .chip[data-len="1"], .chip[data-len="2"] { font-size: 13px; }
  .chip[data-len="3"] { font-size: 11px; }
  .chip[data-len="4"] { font-size: 9.5px; }
  .chip[data-len="5"] { font-size: 8.5px; }
}
/* poker: small seat cards. Corner index on the top left, one clean suit pip bottom right, so nothing overlaps when cards are shown */
.pk-seat:not(.me) .pk-cards .card .cr { top: 3px; left: 4px; font-size: clamp(11px, 1.35vw, 16px); }
.pk-seat:not(.me) .pk-cards .card .cr small { font-size: .72em; margin-top: 1px; }
.pk-seat:not(.me) .pk-cards .card .cc { inset: auto 3px 2px auto; display: block; font-size: clamp(14px, 1.7vw, 20px); line-height: 1; }
.pk-felt .card .cc { line-height: 1; }
.pk-felt .card { overflow: hidden; }

/* ===== SUPER WIN v2: lofi neon aurora (soft beams, skyline glow, bokeh) ===== */
.jp-cele[data-tier=super] .jc-dim, .og-cele[data-tier=super] .jc-dim {
  background:
    radial-gradient(48% 40% at 50% 44%, rgba(255,72,160,.30), transparent 70%),
    radial-gradient(70% 55% at 22% 18%, rgba(120,70,255,.34), transparent 70%),
    radial-gradient(70% 55% at 80% 24%, rgba(0,210,255,.26), transparent 72%),
    linear-gradient(180deg, rgba(8,4,26,.86), rgba(14,4,30,.78) 55%, rgba(4,2,14,.94)) !important;
  overflow: hidden;
}
.jp-cele[data-tier=super] .jc-dim::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -6%; height: 46%;
  background: repeating-linear-gradient(90deg, rgba(120,200,255,.16) 0 1px, transparent 1px 7.5%), repeating-linear-gradient(0deg, rgba(255,90,200,.16) 0 1px, transparent 1px 16%);
  transform: perspective(380px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 92%); mask: linear-gradient(0deg, #000 10%, transparent 92%);
  animation: scGrid 3.2s linear infinite; }
.jp-cele[data-tier=super] .jc-dim::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.85), transparent), radial-gradient(3px 3px at 84% 22%, rgba(140,230,255,.8), transparent),
    radial-gradient(2px 2px at 70% 64%, rgba(255,170,230,.8), transparent), radial-gradient(4px 4px at 28% 72%, rgba(180,150,255,.55), transparent),
    radial-gradient(2px 2px at 46% 16%, rgba(255,255,255,.7), transparent), radial-gradient(3px 3px at 92% 58%, rgba(255,210,120,.6), transparent),
    radial-gradient(10px 10px at 18% 52%, rgba(255,90,200,.22), transparent), radial-gradient(14px 14px at 78% 40%, rgba(0,220,255,.2), transparent),
    radial-gradient(120% 90% at 50% 46%, transparent 55%, rgba(0,0,0,.55));
  animation: scBokeh 6s ease-in-out infinite alternate; }
.jp-cele[data-tier=super] .jc-rays:not(.b) { opacity: .55 !important; animation-duration: 26s !important; filter: blur(14px);
  background: conic-gradient(from 0deg, transparent 0 14deg, rgba(255,90,200,.34) 22deg, transparent 32deg 74deg, rgba(0,210,255,.30) 84deg, transparent 96deg 150deg, rgba(150,110,255,.32) 160deg, transparent 172deg 222deg, rgba(255,90,200,.30) 232deg, transparent 244deg 300deg, rgba(0,210,255,.28) 310deg, transparent 322deg) !important; }
.jp-cele[data-tier=super] .jc-rays.b { opacity: 0 !important; }
.jp-cele[data-tier=super] .jc-glow { opacity: .6 !important; background: radial-gradient(circle, rgba(255,120,210,.42), rgba(120,90,255,.18) 42%, transparent 70%) !important; }
.jp-cele.hit[data-tier=super] .jc-ring { border-color: #7CE8FF; border-width: 2px; box-shadow: 0 0 26px #39D5FF, inset 0 0 22px #39D5FF; }
.jp-cele.hit[data-tier=super] .jc-ring.r2 { border-color: #FF6BD0; box-shadow: 0 0 26px #FF4FC3, inset 0 0 22px #FF4FC3; }
.jp-cele[data-tier=super] .jc-flash { background: radial-gradient(60% 50% at 50% 44%, rgba(255,140,230,.55), transparent 70%); }
.jp-cele[data-tier=super] .jc-in::before { background: radial-gradient(closest-side, rgba(12,4,30,.66), rgba(12,4,30,.32) 62%, transparent) !important; }
.jp-cele[data-tier=super] .jc-t span { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFE3F6 26%, #FF7AD6 55%, #A95BFF 80%, #5A2DD8 100%) !important;
  filter: drop-shadow(0 2px 0 #24083f) drop-shadow(0 0 16px rgba(255,90,210,.7)) drop-shadow(0 0 34px rgba(110,90,255,.45)) !important; }
.jp-cele[data-tier=super] .jc-v { color: #F4FBFF; text-shadow: 0 0 16px rgba(80,210,255,.75), 0 0 34px rgba(255,90,210,.35), 0 3px 0 #1a0b3a; }
.jp-cele[data-tier=super] .jc-v { padding: .12em .6em; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(160,220,255,.28); box-shadow: inset 0 0 18px rgba(120,200,255,.12), 0 0 24px rgba(255,90,210,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jp-cele[data-tier=super] .jc-x { color: #BFE9FF; }
@keyframes scGrid { to { background-position: 0 0, 0 -16%; } }
@keyframes scBokeh { from { transform: translateY(0); opacity: .75; } to { transform: translateY(-2.5%); opacity: 1; } }
html.rm .jp-cele[data-tier=super] .jc-dim::before, html.rm .jp-cele[data-tier=super] .jc-dim::after { animation: none !important; }

/* ===== Rips economy v3: numbered hits, daily limit, collector score ===== */
.rp-odds li.rp-hit { background: linear-gradient(90deg, rgba(255,216,107,.12), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,216,107,.22); }
.rp-day { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.62); }
.rp-day b { color: #fff; font-weight: 700; }
.rp-day-b { display: block; height: 4px; margin-top: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.rp-day-b i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2EF2FF, #8C6BFF); }
.rp-ix-b { position: relative; }
.rp-ix-b s { position: absolute; top: 0; bottom: 0; background: rgba(46,242,255,.35); text-decoration: none; }
.rp-ix-b.open i { background: linear-gradient(90deg, rgba(46,242,255,.35), rgba(200,255,46,.35)); }
.rp-cs { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(140,107,255,.12), rgba(46,242,255,.06)); border: 1px solid rgba(160,140,255,.22); }
.rp-cs-t { display: flex; align-items: baseline; gap: 8px; }
.rp-cs-t span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.rp-cs-t b { font-size: 18px; color: #fff; }
.rp-cs-t em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #D7C8FF; padding: 2px 8px; border-radius: 999px; background: rgba(140,107,255,.2); }
.rp-cs small { display: block; margin-top: 4px; color: rgba(255,255,255,.6); font-size: 11.5px; }
.rp-cs-p { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rp-cs-p span { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); white-space: nowrap; }
.rp-cs-p span.p-holo { color: #BFE9FF; } .rp-cs-p span.p-gold { color: #FFD86B; } .rp-cs-p span.p-black { color: #C8FF2E; } .rp-cs-p span.p-one { color: #FF9AD5; }
.rp-cs-p span.done { box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Side bets v2: printed felt betting spots (Blackjack, Baccarat, Hold'em, Let It Ride) ---------- */
.wk-sides.bj-sides { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin: 6px auto 10px; padding: 18px 16px 12px; position: relative; max-width: 560px;
  border-radius: 22px; border: 1px solid rgba(232,196,110,.16);
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(26,92,78,.28), rgba(8,26,24,.18) 60%, transparent 100%); }
.wk-sides.empty { display: none; }
.wk-sides-h { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 10px; border-radius: 999px; background: #0b1416; border: 1px solid rgba(232,196,110,.28);
  font: 800 9.5px/1.5 Satoshi, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #E8C46E; white-space: nowrap; }
.wk-sides .bj-side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 184px; min-height: 128px; padding: 12px 16px 12px; text-align: center;
  border-radius: 84px / 64px; border: 1.5px solid rgba(232,196,110,.6); color: #fff; font: inherit; cursor: pointer;
  background: radial-gradient(ellipse at 50% 38%, #123a31 0%, #0c251f 58%, #08171a 100%);
  box-shadow: inset 0 0 0 4px rgba(6,18,17,.92), inset 0 0 0 5px rgba(232,196,110,.3), inset 0 12px 28px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  transition: border-color .18s, box-shadow .18s, transform .18s, opacity .18s; }
.wk-sides .bj-side:hover:not(:disabled) { border-color: rgba(246,216,140,.95); transform: translateY(-1px); }
.wk-sides .bj-side:focus-visible { outline: 2px solid #2EF2FF; outline-offset: 3px; }
.wk-sides .bj-side-n { font: 800 11px/1.2 Satoshi, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #E8C46E; }
.wk-sides .bj-side-spot { position: relative; width: 40px; height: 40px; margin: 8px 0 6px; border-radius: 50%; border: 1.5px dashed rgba(232,196,110,.38); flex: none; transition: transform .2s; }
.wk-sides .bj-side.on .bj-side-spot { border: 0; background: repeating-conic-gradient(#C8FF2E 0 18deg, #f4ffd6 18deg 24deg, #C8FF2E 24deg 42deg, #12160a 42deg 60deg);
  box-shadow: 0 3px 0 #5e7a12, 0 6px 0 #C8FF2E, 0 9px 0 #4a6110, 0 12px 14px rgba(0,0,0,.55); transform: translateY(-6px); }
.wk-sides .bj-side.on .bj-side-spot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e6ff8a, #a9d81c 70%); box-shadow: inset 0 0 0 1.5px rgba(18,22,10,.55); }
.wk-sides .bj-side.drop .bj-side-spot { animation: wkChipDrop .34s cubic-bezier(.2,1.4,.4,1); }
@keyframes wkChipDrop { from { transform: translateY(-22px) scale(1.08); } to { transform: translateY(-6px); } }
html.rm .wk-sides .bj-side.drop .bj-side-spot { animation: none; }
.wk-sides .bj-side b { font-size: 11.5px; font-weight: 700; color: rgba(232,196,110,.75); padding: 2px 9px; border-radius: 999px; line-height: 1.5; }
.wk-sides .bj-side b i { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-left: 3px; }
.wk-sides .bj-side.on b { color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(200,255,46,.4); }
.wk-sides .bj-side-p { margin-top: 5px; font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.55); max-width: 156px; }
.wk-sides .bj-side-r { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.wk-sides .bj-side.won { border-color: #C8FF2E; box-shadow: inset 0 0 0 4px rgba(6,18,17,.92), inset 0 0 0 5px rgba(200,255,46,.45), 0 0 26px rgba(200,255,46,.32); }
.wk-sides .bj-side.won .bj-side-r { background: #C8FF2E; color: #0a0c06; }
.wk-sides .bj-side.lost { opacity: 1; }
.wk-sides .bj-side.lost .bj-side-spot, .wk-sides .bj-side.lost b { opacity: .45; }
.wk-sides .bj-side.lost .bj-side-r { background: #1a1d22; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.16); }
.wk-sides .bj-side:disabled { cursor: default; opacity: 1; }
.wk-sides .bj-side.idle { display: none; }
.wk-sides.locked .bj-side { min-height: 112px; }
.wk-sides.locked .bj-side-p { display: none; }
.wk-sides .bj-sclear { align-self: center; }
@media (max-width: 640px) {
  .wk-sides.bj-sides { gap: 14px 10px; padding: 16px 10px 10px; }
  .wk-sides .bj-side { width: calc(50% - 6px); max-width: 168px; min-height: 118px; padding: 10px 8px; border-radius: 70px / 56px; }
  .wk-sides .bj-side-n { font-size: 10px; letter-spacing: .12em; }
  .wk-sides .bj-side-p { font-size: 10px; max-width: 120px; }
  .wk-sides .bj-sclear { flex-basis: 100%; max-width: 160px; }
}
/* line-bet zones stay invisible: no inherited glass blur between numbers */
#roFelt .ro-c.ro-z, .ro-c.ro-z { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* roulette: win amount beside the winning number */
.ro-res .ro-res-w { font-style: normal; font-weight: 800; font-size: 14px; color: #0a0c06; background: #C8FF2E; padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 14px rgba(200,255,46,.45); }
#roFelt .ro-med em { z-index: 8; }
@media (max-width: 700px) { #roFelt .ro-med em { display: none; } }
/* ---------- Piggy bank break: full-screen celebration ---------- */
.pb-ov { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden; opacity: 0; transition: opacity .3s ease; cursor: pointer; }
.pb-ov.in { opacity: 1; } .pb-ov.out { opacity: 0; transition: opacity .4s ease; }
.pb-ov .sk-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.pb-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(40,26,4,.82), rgba(4,5,9,.94) 70%); backdrop-filter: blur(6px); }
.pb-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; translate: -50% -50%; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.13) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 60%); mask: radial-gradient(circle, #000 0 18%, transparent 60%); transition: opacity .6s; }
.pb-ov.burst .pb-rays { opacity: 1; animation: pbSpin 24s linear infinite; }
.pb-glow { position: absolute; left: 50%; top: 40%; width: 520px; height: 520px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,201,74,.45), rgba(255,201,74,0) 65%); opacity: .5; transition: opacity .4s, transform .6s; }
.pb-ov.shake .pb-glow { opacity: .8; animation: pbPulse .5s ease-in-out infinite; }
.pb-ov.burst .pb-glow { opacity: 1; transform: scale(1.5); }
.pb-flash { position: absolute; inset: 0; background: #fff8e0; opacity: 0; pointer-events: none; z-index: 5; }
.pb-ov.burst .pb-flash { animation: pbFlash .55s ease-out; }
.pb-stage { position: absolute; left: 50%; top: 40%; translate: -50% -50%; z-index: 3; }
.pb-pig { position: relative; width: min(300px, 64vw); aspect-ratio: 1; }
.pb-pig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 26px rgba(255,201,74,.55)); }
.pb-pig .pb-l, .pb-pig .pb-r { opacity: 0; }
.pb-pig .pb-l { clip-path: polygon(0 0, 50% 0, 46% 30%, 54% 38%, 47% 50%, 55% 60%, 49% 72%, 53% 100%, 0 100%); }
.pb-pig .pb-r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 53% 100%, 49% 72%, 55% 60%, 47% 50%, 54% 38%, 46% 30%); }
.pb-cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-cracks path { fill: none; stroke: #FFF6D0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #FFD23F); stroke-dasharray: 120; stroke-dashoffset: 120; }
.pb-ov.shake .pb-pig { animation: pbShake .5s ease-in-out infinite; }
.pb-ov.shake .pb-pig { animation-name: pbShake; }
.pb-ov.crack .pb-pig { animation: pbShake2 .14s linear infinite; }
.pb-ov.crack .pb-cracks path { transition: stroke-dashoffset .45s ease-out; stroke-dashoffset: 0; }
.pb-ov.burst .pb-pig { animation: none; }
.pb-ov.burst .pb-w, .pb-ov.burst .pb-cracks { opacity: 0; transition: opacity .05s; }
.pb-ov.burst .pb-l { opacity: 1; animation: pbL 1s cubic-bezier(.2,.7,.3,1) forwards; }
.pb-ov.burst .pb-r { opacity: 1; animation: pbR 1s cubic-bezier(.2,.7,.3,1) forwards; }
.pb-in { position: relative; z-index: 6; display: grid; justify-items: center; gap: 8px; margin-top: min(36vh, 300px); text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s cubic-bezier(.2,1.3,.4,1); }
.pb-ov.reveal .pb-in { opacity: 1; transform: none; }
.pb-k { margin: 0; font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: #FFD23F; }
.pb-t { display: flex; gap: .04em; font: 800 clamp(44px, 9vw, 96px)/1 'Clash Display', Satoshi, sans-serif; letter-spacing: .02em;
  filter: drop-shadow(0 0 18px rgba(255,201,74,.55)); }
.pb-t span { display: inline-block; background: linear-gradient(180deg, #FFF6D0, #FFD23F 55%, #C88A0E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pb-ov.reveal .pb-t span { animation: pbLetter .6s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--n) * 60ms); }
.pb-v { font-size: clamp(30px, 6vw, 56px); font-weight: 800; color: #fff; text-shadow: 0 0 22px rgba(255,210,63,.6); }
.pb-s { margin: 0; color: rgba(255,255,255,.75); font-size: 15px; }
.pb-go { margin-top: 10px; min-width: 180px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.pb-ov.done .pb-go { opacity: 1; pointer-events: auto; }
.pb-skip { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; z-index: 6; margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.pb-ov.done .pb-skip { opacity: 0; }
.pb-ov.rm .pb-pig img.pb-w { opacity: .9; }
@keyframes pbShake { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-6deg) translateX(-4px) } 40% { transform: rotate(5deg) translateX(4px) } 60% { transform: rotate(-4deg) } 80% { transform: rotate(4deg) scale(1.03) } }
@keyframes pbShake2 { 0% { transform: translate(-3px, 1px) rotate(-2deg) scale(1.06) } 50% { transform: translate(3px, -1px) rotate(2deg) scale(1.08) } 100% { transform: translate(-3px, 1px) rotate(-2deg) scale(1.06) } }
@keyframes pbL { to { transform: translate(-48%, 26%) rotate(-38deg); opacity: 0; } }
@keyframes pbR { to { transform: translate(48%, 26%) rotate(38deg); opacity: 0; } }
@keyframes pbFlash { 0% { opacity: .9 } 100% { opacity: 0 } }
@keyframes pbPulse { 50% { transform: scale(1.12) } }
@keyframes pbSpin { to { rotate: 360deg } }
@keyframes pbLetter { 0% { transform: translateY(40px) scale(.4); opacity: 0 } 100% { transform: none; opacity: 1 } }
@media (max-width: 560px) { .pb-stage { top: 34% } .pb-in { margin-top: 30vh } }
dialog.pb-ov { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
dialog.pb-ov:not([open]) { display: none; }
dialog.pb-ov::backdrop { background: transparent; }

/* WICK Run key legend */
.wr-col { min-width: 0; }
.wr-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.wr-legend li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.72); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.wr-legend kbd { min-width: 38px; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font: 600 13px/1 var(--font-mono); color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,63,180,.35); border-bottom-width: 3px; box-shadow: 0 0 14px -6px rgba(255,63,180,.6); }
.wr-legend kbd.wk-space { min-width: 110px; }
.wr-legend kbd.wk-ent { border-color: rgba(200,255,46,.45); box-shadow: 0 0 14px -6px rgba(200,255,46,.6); }
@media (hover: none) and (pointer: coarse) { .wr-legend { display: none; } }

/* bonus buy amounts never overflow */
.wr-bb { min-width: 0; overflow: hidden; }
.wr-bb span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* Plaza: full-width world, chat overlays the right side (wide screens) */
.pz-chatbtn, .pz-hide { display: none; }
@media (min-width: 981px) {
  .pz-wrap.pz-ov { display: block; position: relative; }
  .pz-ov .pz-stage { height: clamp(480px, calc(100dvh - 250px), 880px); }
  .pz-ov .pz-side { position: absolute; z-index: 5; top: 12px; right: 12px; bottom: 12px; width: 312px; height: auto; background: rgba(9,10,16,.74); border-color: rgba(255,255,255,.08); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .pz-ov.chat-off .pz-side { opacity: 0; transform: translateX(16px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .pz-ov .pz-tabs { grid-template-columns: repeat(3, 1fr) 40px; }
  .pz-ov .pz-tabs .pz-hide { display: grid; place-items: center; order: 9; border: 0; background: transparent; color: var(--steel-2); font-size: 1.3rem; cursor: pointer; border-bottom: 2px solid transparent; }
  .pz-ov .pz-tabs .pz-hide:hover { color: var(--bone); }
  .pz-ov .pz-log, .pz-ov .pz-list { scrollbar-width: thin; }
  .pz-ov .pz-say input, .pz-ov .pz-add input { background: rgba(255,255,255,.05); }
  .pz-ov .pz-stage .pz-hint, .pz-ov .pz-stage .pz-prompt, .pz-ov .pz-stage .pz-emotes, .pz-ov .pz-stage .pz-talk { left: calc((100% - var(--cw, 0px)) / 2); transition: left .25s var(--ease); }
  .pz-ov .pz-stage .pz-talk { width: min(620px, calc(100% - 24px - var(--cw, 0px))); }
  .pz-ov .pz-stage .pz-mini { right: calc(12px + var(--cw, 0px)); transition: right .25s var(--ease); }
  .pz-ov .pz-stage .pz-zoom { right: calc(12px + var(--cw, 0px)); transition: right .25s var(--ease); }
  .pz-ov.chat-off .pz-chatbtn { display: inline-flex; }
  .pz-chatbtn { position: absolute; z-index: 3; right: 12px; bottom: 14px; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(46,242,255,.4); background: rgba(6,7,12,.82); color: var(--bone); font: 600 .85rem var(--font-body); cursor: pointer; backdrop-filter: blur(8px); }
  .pz-chatbtn:hover { border-color: #2EF2FF; color: #2EF2FF; }
  .pz-chatbtn i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acid); color: #0a0a0a; font: 700 .68rem/18px var(--font-mono, monospace); text-align: center; }
  .pz-chatbtn i[hidden] { display: none; }
  .pz-wrap:has(.pz-stage.ft-on) .pz-side { display: none; }
}

/* ===== NICE + JACKPOT v2: same lofi neon aurora as SUPER, own palettes ===== */
.jp-cele[data-tier=nice] {
  --a1: 46,242,255; --a2: 200,255,46; --a3: 60,200,170; --gl: 120,255,210; --tg: linear-gradient(180deg, #FFFFFF 0%, #F2FFD0 26%, #C8FF2E 55%, #2EE6C0 80%, #0E8F7E 100%);
  --ts: #06261f; --r1: #8CF6FF; --r1g: #2EF2FF; --r2: #D6FF5C; --r2g: #B8F52E; --vx: #D9FFF4; --bg1: 6,18,22; --bg2: 4,14,18;
}
.jp-cele[data-tier=jackpot] {
  --a1: 255,200,70; --a2: 255,90,190; --a3: 160,110,255; --gl: 255,200,90; --tg: linear-gradient(180deg, #FFFFFF 0%, #FFF4C8 24%, #FFD23F 52%, #FF9A3C 76%, #B4520A 100%);
  --ts: #3a1600; --r1: #FFE08A; --r1g: #FFC94A; --r2: #FF7AD6; --r2g: #FF4FC3; --vx: #FFF1C9; --bg1: 22,10,6; --bg2: 16,6,10;
}
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-dim {
  background:
    radial-gradient(48% 40% at 50% 44%, rgba(var(--a1),.28), transparent 70%),
    radial-gradient(70% 55% at 22% 18%, rgba(var(--a3),.30), transparent 70%),
    radial-gradient(70% 55% at 80% 24%, rgba(var(--a2),.24), transparent 72%),
    linear-gradient(180deg, rgba(var(--bg1),.86), rgba(var(--bg2),.78) 55%, rgba(2,4,10,.94)) !important;
  overflow: hidden;
}
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-dim::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -6%; height: 46%;
  background: repeating-linear-gradient(90deg, rgba(var(--a1),.16) 0 1px, transparent 1px 7.5%), repeating-linear-gradient(0deg, rgba(var(--a2),.16) 0 1px, transparent 1px 16%);
  transform: perspective(380px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 92%); mask: linear-gradient(0deg, #000 10%, transparent 92%);
  animation: scGrid 3.2s linear infinite; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-dim::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.85), transparent), radial-gradient(3px 3px at 84% 22%, rgba(var(--a1),.8), transparent),
    radial-gradient(2px 2px at 70% 64%, rgba(var(--a2),.8), transparent), radial-gradient(4px 4px at 28% 72%, rgba(var(--a3),.55), transparent),
    radial-gradient(2px 2px at 46% 16%, rgba(255,255,255,.7), transparent), radial-gradient(3px 3px at 92% 58%, rgba(var(--a1),.6), transparent),
    radial-gradient(10px 10px at 18% 52%, rgba(var(--a2),.22), transparent), radial-gradient(14px 14px at 78% 40%, rgba(var(--a1),.2), transparent),
    radial-gradient(120% 90% at 50% 46%, transparent 55%, rgba(0,0,0,.55));
  animation: scBokeh 6s ease-in-out infinite alternate; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-rays:not(.b) { opacity: .55 !important; animation-duration: 26s !important; filter: blur(14px);
  background: conic-gradient(from 0deg, transparent 0 14deg, rgba(var(--a2),.32) 22deg, transparent 32deg 74deg, rgba(var(--a1),.30) 84deg, transparent 96deg 150deg, rgba(var(--a3),.30) 160deg, transparent 172deg 222deg, rgba(var(--a2),.28) 232deg, transparent 244deg 300deg, rgba(var(--a1),.28) 310deg, transparent 322deg) !important; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-rays.b { opacity: 0 !important; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-glow { opacity: .6 !important; background: radial-gradient(circle, rgba(var(--gl),.40), rgba(var(--a3),.16) 42%, transparent 70%) !important; }
.jp-cele.hit:is([data-tier=nice], [data-tier=jackpot]) .jc-ring { border-color: var(--r1); border-width: 2px; box-shadow: 0 0 26px var(--r1g), inset 0 0 22px var(--r1g); }
.jp-cele.hit:is([data-tier=nice], [data-tier=jackpot]) .jc-ring.r2 { border-color: var(--r2); box-shadow: 0 0 26px var(--r2g), inset 0 0 22px var(--r2g); }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-flash { background: radial-gradient(60% 50% at 50% 44%, rgba(var(--gl),.5), transparent 70%); }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-in::before { background: radial-gradient(closest-side, rgba(4,8,14,.66), rgba(4,8,14,.32) 62%, transparent) !important; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-t span { background-image: var(--tg) !important;
  filter: drop-shadow(0 2px 0 var(--ts)) drop-shadow(0 0 16px rgba(var(--a1),.7)) drop-shadow(0 0 34px rgba(var(--a2),.4)) !important; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-v { color: #F4FBFF; text-shadow: 0 0 16px rgba(var(--a1),.75), 0 0 34px rgba(var(--a2),.35), 0 3px 0 rgba(0,0,0,.6);
  padding: .12em .6em; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(var(--a1),.3); box-shadow: inset 0 0 18px rgba(var(--a1),.12), 0 0 24px rgba(var(--a2),.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-x { color: var(--vx); }
/* jackpot keeps its extra weight with a gold crown halo, but no harsh strobing */
.jp-cele.hit[data-tier=jackpot] .jc-in::after { content: ''; position: absolute; left: 50%; top: 50%; width: min(78cqw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
  background: conic-gradient(from 0deg, rgba(255,210,63,0), rgba(255,210,63,.22), rgba(255,90,190,0) 30%, rgba(255,210,63,.18) 55%, rgba(160,110,255,0) 80%, rgba(255,210,63,.22));
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%, #000 70%, transparent 74%); mask: radial-gradient(closest-side, transparent 62%, #000 64%, #000 70%, transparent 74%);
  animation: jcHalo 14s linear infinite; }
@keyframes jcHalo { to { transform: translate(-50%, -50%) rotate(360deg); } }
html.rm .jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-dim::before, html.rm .jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-dim::after, html.rm .jp-cele[data-tier=jackpot] .jc-in::after { animation: none !important; }

/* celebration frames: one slow, smooth glow in each tier's palette (no flicker) */
.jp-stage.cele-nice, .jp-stage.cele-super, .jp-stage.cele-jackpot { animation: jcFrameG 2.6s ease-in-out infinite alternate !important; }
.jp-stage.cele-nice { --f1: 46,242,255; --f2: 200,255,46; }
.jp-stage.cele-super { --f1: 0,210,255; --f2: 255,90,200; }
.jp-stage.cele-jackpot { --f1: 255,201,74; --f2: 255,90,190; }
@keyframes jcFrameG { from { box-shadow: inset 0 0 0 2px rgba(var(--f1),.45), 0 0 34px rgba(var(--f1),.25); } to { box-shadow: inset 0 0 0 2px rgba(var(--f2),.55), 0 0 46px rgba(var(--f2),.3); } }
.jp-cele:is([data-tier=nice], [data-tier=super], [data-tier=jackpot]) .jc-glow { animation-duration: 2.8s !important; }
/* horizon grid scrolls by exactly one row per loop, so it never jumps */
.jp-cele:is([data-tier=nice], [data-tier=super], [data-tier=jackpot]) .jc-dim::before { background-size: 100% 100%, 100% 36px !important; animation: scGrid2 2.4s linear infinite !important; }
.jp-cele[data-tier=super] .jc-dim::before { background-image: repeating-linear-gradient(90deg, rgba(120,200,255,.16) 0 1px, transparent 1px 7.5%), repeating-linear-gradient(0deg, rgba(255,90,200,.16) 0 1px, transparent 1px 36px) !important; }
.jp-cele:is([data-tier=nice], [data-tier=jackpot]) .jc-dim::before { background-image: repeating-linear-gradient(90deg, rgba(var(--a1),.16) 0 1px, transparent 1px 7.5%), repeating-linear-gradient(0deg, rgba(var(--a2),.16) 0 1px, transparent 1px 36px) !important; }
@keyframes scGrid2 { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 36px; } }
html.rm .jp-stage.cele-nice, html.rm .jp-stage.cele-super, html.rm .jp-stage.cele-jackpot { animation: none !important; }

/* ===== Home v2: featured slider + feature sections ===== */
.hm-sl { position: relative; margin-top: 4px; height: clamp(560px, 78vh, 780px); border-radius: var(--r-lg); border: 1px solid var(--line-2); overflow: hidden; isolation: isolate; background: #05050a; touch-action: pan-y; }
.hm-sl-track { position: absolute; inset: 0; }
.hm-s { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.hm-s.on { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.hm-s-bg { position: absolute; inset: 0; z-index: -2; background: var(--bg) center 40% / cover no-repeat; transform: scale(1.03); }
.hm-s.on .hm-s-bg { animation: hmKen 18s ease-out forwards; }
.hm-sl.paused .hm-s.on .hm-s-bg { animation-play-state: paused; }
.hm-s-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,10,.94) 0%, rgba(5,5,10,.8) 36%, rgba(5,5,10,.2) 68%, rgba(5,5,10,.45) 100%), linear-gradient(180deg, rgba(5,5,10,.25) 0%, transparent 35%, rgba(5,5,10,.92) 100%); }
@keyframes hmKen { from { transform: scale(1.03); } to { transform: scale(1.1); } }
.hm-s .hm-copy { z-index: 2; padding: 48px clamp(20px, 5vw, 64px) 96px; max-width: 660px; }
.hm-s.on .hm-copy > * { animation: hmUp .8s cubic-bezier(.2,.7,.2,1) both; }
.hm-s.on .hm-copy > :nth-child(2) { animation-delay: .08s; } .hm-s.on .hm-copy > :nth-child(3) { animation-delay: .16s; } .hm-s.on .hm-copy > :nth-child(4) { animation-delay: .24s; } .hm-s.on .hm-copy > :nth-child(n+5) { animation-delay: .32s; }
@keyframes hmUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hm-st { margin: 0; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1; }
.hm-s .hm-copy h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); }
.hm-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chips li { padding: 6px 12px; border-radius: 999px; font: 600 .74rem/1.2 var(--font-mono, monospace); letter-spacing: .04em; color: rgba(244,246,241,.9); background: rgba(10,12,22,.55); border: 1px solid rgba(46,242,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.s-duel .hm-chips li { border-color: rgba(255,90,200,.32); } .s-rips .hm-chips li { border-color: rgba(255,201,74,.32); } .s-run .hm-chips li { border-color: rgba(157,255,46,.32); }
.hm-keys { margin: 14px 0 0; color: rgba(244,246,241,.7); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hm-keys kbd { font: 700 .7rem/1 var(--font-mono, monospace); padding: 5px 8px; border-radius: 6px; color: var(--bone); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px; }
.hm-keys kbd:not(:first-child) { margin-left: 8px; }
.hm-sl-fine { position: absolute; z-index: 3; top: 14px; right: 18px; margin: 0; font-size: .7rem; color: rgba(244,246,241,.5); }
/* nav */
.hm-sl-nav { position: absolute; z-index: 4; left: clamp(20px, 5vw, 64px); right: 140px; bottom: 22px; display: flex; gap: 8px; }
.hm-sl-nav button { flex: 1 1 0; max-width: 150px; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 6px 0; background: none; border: 0; color: rgba(244,246,241,.55); cursor: pointer; text-align: left; font: 600 .7rem/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; }
.hm-sl-nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sl-nav button i { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.hm-sl-nav button i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--acid), #2EF2FF); }
.hm-sl-nav button[aria-selected="true"] { color: var(--bone); }
.hm-sl-nav button[aria-selected="true"] i::after { transform: scaleX(var(--p, 0)); }
html.rm .hm-sl-nav button[aria-selected="true"] i::after { transform: scaleX(1); }
.hm-sl-nav button:hover { color: var(--bone); }
.hm-sl-nav button:focus-visible, .hm-sl-arr:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 6px; }
.hm-sl-arr { position: absolute; z-index: 4; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--bone); background: rgba(10,12,22,.6); border: 1px solid var(--line-2); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .25s, background .25s; }
.hm-sl-arr:hover { border-color: rgba(46,242,255,.5); background: rgba(46,242,255,.1); }
.hm-sl-arr.prev { right: 74px; } .hm-sl-arr.next { right: 20px; }
/* slide visuals */
.hm-s .hm-chars { z-index: -1; }
.hm-packs { position: absolute; z-index: -1; right: 5%; top: 50%; height: 70%; width: 46%; transform: translateY(-50%); pointer-events: none; }
.hm-packs img { position: absolute; bottom: 4%; height: 82%; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.hm-packs .k1 { left: 4%; transform: rotate(-11deg); } .hm-packs .k2 { left: 50%; margin-left: -24%; height: 92%; z-index: 1; } .hm-packs .k3 { right: 4%; transform: rotate(11deg); }
.hm-s.on .hm-packs img { animation: hmPk 7s ease-in-out infinite alternate; } .hm-s.on .hm-packs .k2 { animation-delay: -2.3s; } .hm-s.on .hm-packs .k3 { animation-delay: -4.6s; }
@keyframes hmPk { from { translate: 0 0; } to { translate: 0 -12px; } }
.hm-album { position: absolute; z-index: -1; right: 8%; top: 50%; height: 64%; aspect-ratio: 1; transform: translateY(-50%) rotate(4deg); pointer-events: none; }
.hm-album img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,201,74,.3), 0 0 60px -10px rgba(255,201,74,.35); }
/* run scene (used in the slide and the band) */
.hm-run { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hm-run-mid { position: absolute; left: 0; right: 0; bottom: 16%; height: 52%; background: url(assets/run/mid.webp) 0 100% / auto 100% repeat-x; opacity: .85; }
.hm-run-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 16.5%; background: repeating-linear-gradient(90deg, rgba(46,242,255,.16) 0 2px, transparent 2px 120px), linear-gradient(180deg, #0b0d1c, #05050a); border-top: 2px solid rgba(46,242,255,.65); box-shadow: 0 -8px 30px -8px rgba(46,242,255,.5); }
.hm-run-guy { position: absolute; left: 70%; bottom: 15.5%; height: 40%; aspect-ratio: 360 / 340; background: url(assets/run/kaito.webp) 0 0 / 1000% 100% no-repeat; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.hm-run-hunter { position: absolute; left: 50%; bottom: 44%; height: 26%; aspect-ratio: 720 / 485; background: url(assets/run/hunter.webp) center / contain no-repeat; filter: drop-shadow(0 0 18px rgba(255,74,106,.35)); }
.hm-s.on .hm-run-mid, .hm-runband .hm-run-mid { animation: hmRunBg 38s linear infinite; }
.hm-s.on .hm-run-floor, .hm-runband .hm-run-floor { animation: hmRunFl 1.4s linear infinite; }
.hm-s.on .hm-run-guy, .hm-runband .hm-run-guy { animation: hmRunCyc .66s steps(6) infinite; }
.hm-s.on .hm-run-hunter, .hm-runband .hm-run-hunter { animation: hmHunt 5s ease-in-out infinite alternate; }
@keyframes hmRunBg { to { background-position: -1600px 100%; } }
@keyframes hmRunFl { from { background-position: 0 0, 0 0; } to { background-position: -120px 0, 0 0; } }
@keyframes hmRunCyc { from { background-position: 0 0; } to { background-position: 66.6667% 0; } }
@keyframes hmHunt { from { transform: translate(0, 0); } to { transform: translate(5%, -10%); } }
/* stats */
.hm-stats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-stats li { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); display: flex; align-items: center; gap: 14px; }
.hm-stats b { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; background: linear-gradient(90deg, var(--acid), #2EF2FF); -webkit-background-clip: text; background-clip: text; color: transparent; flex: none; }
.hm-stats span { font-size: .86rem; line-height: 1.4; color: rgba(244,246,241,.7); }
/* arena feature */
#hmArena, #hmRips { scroll-margin-top: 90px; }
.hm-feat { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hm-feat-art { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -40px rgba(255,63,180,.5); }
.hm-feat-art img { display: block; width: 100%; height: auto; }
.hm-feat-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,5,10,.75)); }
.hm-tag { position: absolute; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .1em; color: #05050a; }
.hm-tag.t1 { left: 4%; top: 6%; background: var(--acid); } .hm-tag.t2 { left: 44%; top: 70%; background: #2EF2FF; } .hm-tag.t3 { left: 76%; top: 64%; background: #FF5AC8; color: #fff; }
.hm-vs { position: absolute; z-index: 1; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 14px; font-family: var(--font-display); }
.hm-vs b { font-size: .9rem; letter-spacing: .14em; padding: 6px 14px; border-radius: 8px; background: rgba(10,12,22,.7); border: 1px solid rgba(46,242,255,.5); }
.hm-vs b:last-child { border-color: rgba(255,90,200,.55); } .hm-vs i { font-style: normal; font-weight: 700; color: var(--acid); }
.hm-flow { list-style: none; margin: 0; padding: 0; counter-reset: hf; display: flex; flex-direction: column; gap: 14px; }
.hm-flow li { counter-increment: hf; position: relative; padding-left: 44px; line-height: 1.55; color: rgba(244,246,241,.78); font-size: .95rem; }
.hm-flow li::before { content: counter(hf, decimal-leading-zero); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font: 700 .72rem/1 var(--font-mono, monospace); color: var(--acid); border: 1px solid rgba(200,255,46,.35); background: rgba(200,255,46,.06); }
.hm-flow b { color: var(--bone); }
.hm-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.hm-mini > div, .hm-box { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.025); display: flex; flex-direction: column; gap: 4px; }
.hm-mini small { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: #2EF2FF; } .hm-mini b { font-family: var(--font-display); font-size: 1.05rem; } .hm-mini span { font-size: .86rem; line-height: 1.5; color: rgba(244,246,241,.72); }
/* rips economy */
.hm-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.hm-pipe li { position: relative; padding: 20px 18px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,201,74,.05), rgba(255,255,255,.01)); }
.hm-pipe li:not(:last-child)::after { content: ""; position: absolute; top: 30px; right: -12px; width: 12px; height: 2px; background: linear-gradient(90deg, rgba(255,201,74,.6), rgba(46,242,255,.6)); }
.hm-pipe span { font-size: .74rem; color: #FFC94A; letter-spacing: .1em; } .hm-pipe b { display: block; margin: 8px 0 6px; font-family: var(--font-display); font-size: 1.08rem; } .hm-pipe p { margin: 0; font-size: .88rem; line-height: 1.55; color: rgba(244,246,241,.72); }
.hm-rips-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
.hm-box { padding: 20px 22px; gap: 12px; } .hm-box h3 { margin: 0; font-size: 1.1rem; } .hm-box .hm-cta { margin-top: 4px; } .hm-box p { margin: 0; }
.hm-pars { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-pars span { padding: 8px 12px; border-radius: 10px; font: 700 .74rem/1 var(--font-mono, monospace); letter-spacing: .04em; border: 1px solid; }
.hm-pars .p-base { color: #cfd6e6; border-color: rgba(207,214,230,.35); background: rgba(207,214,230,.06); }
.hm-pars .p-holo { color: #9FF7FF; border-color: rgba(46,242,255,.45); background: linear-gradient(120deg, rgba(46,242,255,.12), rgba(140,107,255,.12), rgba(255,90,200,.12)); }
.hm-pars .p-gold { color: #FFC94A; border-color: rgba(255,201,74,.5); background: rgba(255,201,74,.08); }
.hm-pars .p-black { color: #f4f6f1; border-color: rgba(200,255,46,.45); background: #0b0b10; }
.hm-pars .p-one { color: #FF8AD8; border-color: rgba(255,90,200,.55); background: rgba(255,90,200,.1); }
/* run band */
.hm-runband { position: relative; height: clamp(320px, 34vw, 400px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); isolation: isolate; background: url(assets/run/sky.webp) center 30% / cover no-repeat; display: flex; align-items: center; }
.hm-runband::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(5,5,10,.92) 0%, rgba(5,5,10,.7) 38%, transparent 64%); pointer-events: none; }
.hm-runband .hm-run { z-index: 0; }
.hm-runband-c { position: relative; z-index: 1; max-width: 560px; padding: 28px clamp(20px, 4vw, 48px); }
.hm-runband-c h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); } .hm-runband-c > p:not(.hm-eye):not(.hm-keys) { margin: 12px 0 0; color: rgba(244,246,241,.8); line-height: 1.6; }
/* rewards */
.hm-rew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hm-rew > div { position: relative; padding: 18px 18px 18px 20px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.025); overflow: hidden; }
.hm-rew > div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--acid), #2EF2FF); opacity: .7; }
.hm-rew b { font-family: var(--font-display); font-size: 1rem; } .hm-rew p { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: rgba(244,246,241,.7); }
/* grid additions */
.hm-grid { grid-auto-flow: dense; }
.hm-c.wide { grid-column: span 2; }
@media (max-width: 1100px) {
  .hm-stats, .hm-rew { grid-template-columns: repeat(2, 1fr); } .hm-feat { grid-template-columns: 1fr; } .hm-pipe { grid-template-columns: repeat(2, 1fr); } .hm-pipe li::after { display: none; } .hm-rips-2 { grid-template-columns: 1fr; }
  .hm-packs { opacity: .55; right: -4%; width: 56%; } .hm-album { opacity: .5; right: -6%; } .hm-run-hunter { left: 56%; } .hm-run-guy { left: 74%; }
}
@media (max-width: 640px) {
  .hm-sl { height: 760px; }
  .hm-s { align-items: flex-end; }
  .hm-s .hm-copy { padding: 24px 20px 92px; }
  .hm-s-bg { background-position: 62% 30%; }
  .hm-s-bg::after { background: linear-gradient(180deg, rgba(5,5,10,.2) 0%, rgba(5,5,10,.55) 36%, rgba(5,5,10,.94) 62%, #05050a 100%); }
  .hm-st, .hm-s .hm-copy h1 { font-size: 2.3rem; }
  .hm-lead { font-size: .95rem; }
  .hm-chips li { font-size: .68rem; padding: 5px 10px; }
  .hm-s .hm-keys { display: none; }
  .hm-packs { top: 30px; transform: none; height: 36%; width: 86%; right: 7%; opacity: .9; }
  .hm-album { top: 40px; transform: rotate(4deg); height: 30%; right: 50%; margin-right: -15%; opacity: .9; }
  .hm-s .hm-run { bottom: auto; height: 46%; }
  .hm-run-guy { left: 54%; height: 44%; } .hm-run-hunter { left: 10%; bottom: 46%; height: 26%; }
  .hm-sl-nav { left: 20px; right: 20px; bottom: 20px; gap: 6px; }
  .hm-sl-nav button { font-size: 0; gap: 0; padding: 10px 0; }
  .hm-sl-nav button span { display: none; }
  .hm-sl-arr { display: none; }
  .hm-sl-fine { top: auto; bottom: 52px; left: 20px; right: 20px; font-size: .64rem; }
  .hm-stats, .hm-rew, .hm-pipe, .hm-mini { grid-template-columns: 1fr; }
  .hm-c.wide { grid-column: auto; }
  .hm-runband { height: 460px; align-items: flex-end; } .hm-runband::before { background: linear-gradient(180deg, transparent 20%, rgba(5,5,10,.9) 58%); } .hm-runband .hm-run { height: 55%; } .hm-runband-c { padding: 20px; } .hm-runband .hm-keys { display: none; }
}
html.rm .hm-s, html.rm .hm-s.on { transition: none; }
html.rm .hm-s-bg, html.rm .hm-s.on .hm-s-bg, html.rm .hm-s.on .hm-copy > *, html.rm .hm-packs img, html.rm .hm-run i, html.rm .hm-chars img { animation: none !important; }
/* home v2 tuning */
.hm-s .hm-run, .hm-runband .hm-run { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, #000 62%); }
.hm-run-mid { height: 44%; opacity: .7; }
.hm-keys { color: rgba(244,246,241,.82); }
.hm-packs { right: 3%; width: 43%; }
.hm-sl-fine { padding: 4px 10px; border-radius: 999px; background: rgba(5,5,10,.55); }
@media (max-width: 640px) {
  .hm-s .hm-run, .hm-runband .hm-run { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .s-duel .hm-s-bg { background-size: auto 44%; background-position: 58% 0; }
  .hm-packs { top: 22px; height: 30%; width: 80%; right: 10%; }
  .hm-album { height: 28%; }
  .hm-sl-fine { background: none; padding: 0; }
}
.hm-c.wide[href="#arena"] .hm-ci { background-position: center 72%; }
/* bet box: big amounts shrink to fit instead of spilling out (fit.js) */
.bet-amt { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.bet-amt > .mono { max-width: 100%; white-space: nowrap; overflow: hidden; display: block; text-align: center; }
/* rewards: claim buttons stack label over amount so nothing spills */
.sx-row2 .btn, .sx-claim { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; white-space: normal; line-height: 1.15; padding-top: 9px; padding-bottom: 9px; min-height: 56px; text-align: center; overflow: hidden; }
.sx-cl-t { font-size: .9rem; font-weight: 700; }
.sx-cl-t em { font-style: normal; font-size: .7rem; font-weight: 700; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(5,5,10,.18); vertical-align: 1px; white-space: nowrap; display: inline-block; }
.sx-cl-v { font-family: var(--font-mono, monospace); font-size: .82rem; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Plaza chat button: red unread badge */
@media (min-width: 981px) {
  .pz-chatbtn { overflow: visible; }
  .pz-chatbtn::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .pz-chatbtn i { position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #FF3B5C; color: #fff; font: 700 .68rem/20px var(--font-mono, monospace); box-shadow: 0 0 0 2px #06070c, 0 0 14px rgba(255,59,92,.7); animation: pzPing 2.4s ease-in-out infinite; }
  .pz-chatbtn:has(i:not([hidden])) { border-color: rgba(255,59,92,.6); }
}
@keyframes pzPing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
html.rm .pz-chatbtn i { animation: none; }

/* Side bets v3: neon ring spots (BJ, Baccarat, UTH, LIR) */
.wk-sides.bj-sides { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 2px auto 4px; padding: 12px 14px 8px; max-width: 640px; width: 100%;
  border-radius: 18px; border: 1px solid rgba(46,242,255,.12); background: linear-gradient(180deg, rgba(10,16,30,.55), rgba(10,16,30,.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.wk-sides .wk-sides-h { top: -8px; background: #0a0f1c; border-color: rgba(46,242,255,.28); color: #9fe9f0; letter-spacing: .24em; }
.wk-sides.bj-sides .bj-side { --c: #2EF2FF; --c2: rgba(46,242,255,.35); flex: 1 1 0; min-width: 0; max-width: 270px; width: auto; min-height: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 4px 10px 4px 4px; text-align: left;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none; transition: background .2s; }
.wk-sides.bj-sides .bj-side.sd-c1 { --c: #FF4FD8; --c2: rgba(255,79,216,.35); }
.wk-sides.bj-sides .bj-side.sd-c2 { --c: #FFC94D; --c2: rgba(255,201,77,.35); }
.wk-sides.bj-sides .bj-side.sd-c3 { --c: #C8FF2E; --c2: rgba(200,255,46,.35); }
.wk-sides.bj-sides .bj-side:hover:not(:disabled) { transform: none; background: rgba(255,255,255,.035); }
.wk-sides.bj-sides .bj-side-spot { position: relative; flex: none; width: 58px; height: 58px; margin: 0; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--c); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(6,10,20,.92) 70%);
  box-shadow: 0 0 10px var(--c2), inset 0 0 12px var(--c2); transition: box-shadow .25s, transform .2s; }
.wk-sides.bj-sides .bj-side-spot::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--c2); }
.wk-sides.bj-sides .bj-side:hover:not(:disabled) .bj-side-spot { box-shadow: 0 0 18px var(--c2), inset 0 0 16px var(--c2); transform: scale(1.04); }
.wk-sides.bj-sides .bj-side-spot b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--c); line-height: 1.1; text-shadow: 0 0 8px var(--c2); }
.wk-sides.bj-sides .bj-side-spot b i { margin: 1px 0 0; font-size: 8px; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.wk-sides.bj-sides .bj-side.on .bj-side-spot { border: 0; background: repeating-conic-gradient(var(--c) 0 22deg, rgba(255,255,255,.9) 22deg 30deg, var(--c) 30deg 52deg, #0a0f1c 52deg 60deg);
  box-shadow: 0 0 18px var(--c2), 0 3px 0 rgba(0,0,0,.45), 0 6px 0 -1px var(--c2); }
.wk-sides.bj-sides .bj-side.on .bj-side-spot::before { inset: 8px; border: 0; background: radial-gradient(circle at 45% 35%, #1a2236, #070b16 75%); box-shadow: inset 0 0 0 1.5px var(--c); }
.wk-sides.bj-sides .bj-side.on .bj-side-spot::after { display: none; }
.wk-sides.bj-sides .bj-side.on .bj-side-spot b { color: #fff; letter-spacing: 0; font-size: 12px; }
.wk-sides.bj-sides .bj-side-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-sides.bj-sides .bj-side-n { font: 800 11.5px/1.2 Satoshi, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.wk-sides.bj-sides .bj-side-p { margin: 0; max-width: none; font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.55); }
.wk-sides.bj-sides .bj-side-p em { display: block; font-style: normal; font-weight: 700; color: var(--c); opacity: .9; }
.wk-sides.bj-sides .bj-side-r { top: -12px; left: 29px; transform: translateX(-50%); font-size: 10px; padding: 1px 8px; z-index: 2; }
.wk-sides.bj-sides .bj-side.won { border: 0; box-shadow: none; background: rgba(200,255,46,.06); }
.wk-sides.bj-sides .bj-side.won .bj-side-spot { animation: sdWinGlow 1.4s ease-in-out 3; box-shadow: 0 0 22px rgba(200,255,46,.6); }
@keyframes sdWinGlow { 50% { box-shadow: 0 0 34px rgba(200,255,46,.85), 0 0 0 4px rgba(200,255,46,.25); } }
html.rm .wk-sides.bj-sides .bj-side.won .bj-side-spot { animation: none; }
.wk-sides.bj-sides .bj-side.lost .bj-side-spot { opacity: .4; filter: saturate(.4); }
.wk-sides.bj-sides .bj-side.lost .bj-side-tx { opacity: .55; }
.wk-sides.locked .bj-side { min-height: 0; }
.wk-sides.locked .bj-side-p { display: block; }
.wk-sides.bj-sides .bj-sclear { flex: none; align-self: center; }
@media (max-width: 640px) {
  .wk-sides.bj-sides { flex-wrap: wrap; gap: 10px 8px; padding: 12px 8px 8px; }
  .wk-sides.bj-sides .bj-side { flex: 1 1 calc(50% - 8px); width: auto; max-width: none; min-height: 0; padding: 2px; gap: 8px; border-radius: 999px; }
  .wk-sides.bj-sides .bj-side-spot { width: 50px; height: 50px; }
  .wk-sides.bj-sides .bj-side-n { font-size: 10px; letter-spacing: .1em; }
  .wk-sides.bj-sides .bj-side-p { font-size: 9.5px; max-width: none; }
  .wk-sides.bj-sides .bj-sclear { flex-basis: auto; max-width: none; margin: 0 auto; }
  .wk-sides.bj-sides .bj-side-r { left: 25px; }
}

/* Chip hover: zoom so the value is easy to read */
.chips .chip, .chip { transform-origin: 50% 60%; }
.chip:hover:not(:disabled), .chip:focus-visible { transform: translateY(-3px) scale(1.3); z-index: 3; }
.chips { overflow: visible; }
html.rm .chip:hover:not(:disabled) { transform: scale(1.3); transition: none; }

.felt.tfit::before { display: none; }

/* Roulette: bet dock in the right column (desktop) */
@media (min-width: 1025px) {
  #view-roulette aside.market.ro-dock > .mk-card { display: none !important; }
  #view-roulette aside.market.ro-dock { display: flex; flex-direction: column; align-self: start; position: sticky; top: 76px; }
  #roStage { max-height: max(250px, calc(100dvh - 470px)); aspect-ratio: auto; height: min(calc(100dvh - 470px), 546px * 11.6 / 16); min-height: 250px; }
}
.ro-dock-in { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 16px; border-radius: 18px; border: 1px solid rgba(255,59,92,.2);
  background: linear-gradient(180deg, rgba(20,10,18,.75), rgba(8,8,14,.85)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.35); }
.ro-dock-h { display: flex; flex-direction: column; gap: 2px; }
.ro-dock-h span { font: 800 12px/1.2 Satoshi, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ff8aa0; }
.ro-dock-h small { font-size: 10.5px; color: rgba(255,255,255,.5); }
.ro-dock-in .status { margin: 0; min-height: 0; font-size: 13px; text-align: left; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); }
.ro-dock-in .controls { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.ro-dock-in .chips { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 10px 6px; margin: 0; }
.ro-dock-in .chips .chip { width: 56px; height: 56px; flex: none; }
.ro-dock-in .bet-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0; }
.ro-dock-in .bet-row .bet-amt { grid-column: 1 / -1; min-width: 0; text-align: center; }
.ro-dock-in .bet-row .btn.sm { width: 100%; padding-left: 4px; padding-right: 4px; }
.ro-dock-in .bet-row #roRebet:not([hidden]) { grid-column: span 1; }
.ro-dock-in .bet-row #roSpin { grid-column: 1 / -1; width: 100%; min-height: 50px; font-size: 16px; }
.ro-dock-in .kit-ride { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
.ro-dock-in .kit-ride .ride-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Roulette: win count-up plate */
.ro-med em.ro-wc { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 12px; font-size: 20px; color: #FFF1B8; border: 1px solid rgba(255,210,63,.65);
  background: linear-gradient(180deg, rgba(40,26,4,.85), rgba(10,8,2,.85)); box-shadow: 0 0 22px rgba(255,200,60,.45), inset 0 1px 0 rgba(255,255,255,.15); overflow: hidden;
  animation: roEm .6s cubic-bezier(.2,1.5,.4,1) both; }
.ro-med em.ro-wc small { font: 800 10px/1 Satoshi, sans-serif; letter-spacing: .24em; color: #0a0700; background: #FFD23F; padding: 4px 7px; border-radius: 999px; text-shadow: none; }
.ro-med em.ro-wc .ro-wc-x { font-style: normal; font-size: 12px; color: rgba(255,241,184,.7); text-shadow: none; }
.ro-med em.ro-wc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); }
.ro-med em.ro-wc.done { animation: roWcPop .45s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 0 32px rgba(255,200,60,.7), inset 0 1px 0 rgba(255,255,255,.2); }
.ro-med em.ro-wc.done::after { animation: roWcShine 1.1s ease .1s 2; }
@keyframes roWcPop { 50% { transform: scale(1.12); } }
@keyframes roWcShine { to { transform: translateX(120%); } }
html.rm .ro-med em.ro-wc, html.rm .ro-med em.ro-wc.done, html.rm .ro-med em.ro-wc.done::after { animation: none; }
.ro-dock-in .controls, .ro-dock-in .bet-row { width: 100%; max-width: none; align-items: stretch; justify-content: stretch; }
.ro-dock-in .bet-row > * { margin: 0 !important; }
.ro-dock-in .bet-row .bet-amt { width: 100%; max-width: none; }

/* Limbo: bigger dial, tighter chrome so it fills the play area */
.lb-dial { width: min(100%, 600px) !important; }
@media (min-width: 1025px) {
  #view-limbo .lb-felt { gap: 8px; }
  #view-limbo .lb-felt > .og-top { position: absolute; z-index: 3; left: calc(clamp(16px, 2.5vw, 28px) + 16px); right: calc(clamp(16px, 2.5vw, 28px) + 16px); top: calc(clamp(16px, 2.5vw, 28px) + 12px); pointer-events: none; margin: 0; }
  #view-limbo .lb-felt > .og-top .og-hist { pointer-events: auto; }
  #view-limbo .lb-felt > .og-top h2 { font-size: 22px; }
  #view-limbo .lb-stage { gap: 10px; }
  #view-limbo .lb-stage .lb-stats .dc-s { padding-top: 6px; padding-bottom: 6px; }
  #view-limbo #lbOpts { flex-wrap: nowrap; justify-content: center; gap: 14px; }
  #view-limbo #lbOpts .auto-opts { margin: 0; }
  #view-limbo .lb-felt > .status { margin: 0; min-height: 0; }
}
@media (min-width: 1025px) {
  #view-limbo .lb-felt > .og-top { z-index: 10; }
  #view-limbo #lbOpts .tog span, #view-limbo #lbOpts .btn { white-space: nowrap; }
}
@media (min-width: 1025px) {
  #view-limbo #lbOpts { gap: 8px; font-size: 12.5px; max-width: 100%; }
  #view-limbo #lbOpts .auto-opts { gap: 6px; padding-left: 8px; }
  #view-limbo #lbOpts .auto-opts .btn { padding: 0 10px; font-size: 12.5px; min-height: 36px; }
  #view-limbo #lbOpts .auto-opts button:not(.btn) { padding: 4px 8px; }
}

/* Sic Bo: calm neon rooftop city backdrop */
#sFelt { position: relative; overflow: hidden; isolation: isolate; }
#sFelt > .sb-city { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
#sFelt > .sb-city .sb-city-img { position: absolute; inset: -3%; background: url("assets/sicbo/city.webp") center 40% / cover no-repeat; filter: saturate(.95) brightness(.62); animation: sbDrift 90s ease-in-out infinite alternate; }
#sFelt > .sb-city .sb-city-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,16,.25) 0%, rgba(6,6,16,.55) 45%, rgba(6,6,16,.82) 100%), radial-gradient(90% 70% at 50% 55%, rgba(6,6,16,.35), transparent 75%); }
@keyframes sbDrift { from { transform: scale(1.02) translateX(-1%); } to { transform: scale(1.06) translateX(1%); } }
html.rm #sFelt > .sb-city .sb-city-img { animation: none; }
@media (max-width: 700px) { #sFelt > .sb-city .sb-city-img { background-image: url("assets/sicbo/city-sm.webp"); } }
#sFelt > *:not(.sb-city) { position: relative; z-index: 1; }
#sFelt .sb-cell { backdrop-filter: blur(3px); }
#sFelt > .sb-city .sb-city-img { filter: saturate(1.05) brightness(.9); background-position: center 30%; }
#sFelt > .sb-city .sb-city-shade { background: linear-gradient(180deg, rgba(6,6,16,.05) 0%, rgba(6,6,16,.3) 40%, rgba(6,6,16,.72) 100%), radial-gradient(80% 60% at 50% 50%, rgba(6,6,16,.28), transparent 80%); }
#sFelt .sb-cell { background-color: rgba(10,10,24,.55); }
.ro-med em.ro-wc { font-size: 24px; padding: 7px 18px 7px 12px; }

/* Look store (avatar studio) */
.sd-store { margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(200,255,46,.22); background: linear-gradient(135deg, rgba(200,255,46,.07), rgba(140,107,255,.06)); display: grid; gap: 3px; }
.sd-store b { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #C8FF2E; }
.sd-store span { font-size: .78rem; color: var(--steel-2); line-height: 1.4; }
.sd-tiles.fx .sd-t i.pr { background: conic-gradient(#FF3FB4, #FFC94A, #C8FF2E, #2EF2FF, #8C6BFF, #FF3FB4); box-shadow: 0 0 10px rgba(140,107,255,.5), inset 0 0 0 1px rgba(255,255,255,.2); }
.sd-tiles.ch.look .sd-t img { object-position: center top; }

/* Let It Ride: community cards sit above the player's hand */
@media (min-width: 1025px) {
html body #view-lir .felt > .pair-row, html body #view-tcp .felt > .pair-row { flex-direction: column; align-items: center; gap: 10px; }
html body #view-lir .felt > .pair-row > .lir-comm-wrap, html body #view-tcp .felt > .pair-row > .lir-comm-wrap { margin: -112px 0 0; }
html body #view-lir .felt > .pair-row > .lir-comm-wrap .lir-cl, html body #view-tcp .felt > .pair-row > .lir-comm-wrap .lir-cl { text-shadow: 0 2px 10px rgba(0,0,0,.85); }
html body #view-lir .lir-comm .slot, html body #view-tcp .lir-comm .slot { filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
}
@media (min-width: 1025px) {
  html body #view-lir .felt > .pair-row, html body #view-tcp .felt > .pair-row { gap: 6px; }
  html body #view-lir .pair-row .hand-zone, html body #view-tcp .pair-row .hand-zone { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 12px; row-gap: 4px; }
  html body #view-lir .pair-row .hand-zone > #lCards, html body #view-tcp .pair-row .hand-zone > #tpCards { grid-column: 1 / -1; justify-self: center; }
  html body #view-lir .pair-row .hand-zone > .hand-label, html body #view-lir .pair-row .hand-zone > .lir-pay, html body #view-tcp .pair-row .hand-zone > .hand-label, html body #view-tcp .pair-row .hand-zone > .lir-pay { margin: 0; }
}

/* Arcade: full-width play screen like Neon Street Duel, controls below */
@media (min-width: 1101px) {
  :is(#view-run, #view-shoot, #view-fish, #view-stack, #view-gold, #view-heist, #view-golf, #view-bowl, #view-race) .rc-grid { grid-template-columns: minmax(0, 1fr); }
  :is(#view-run, #view-shoot, #view-fish, #view-stack, #view-gold, #view-heist, #view-golf, #view-bowl) .wr-stage { height: min(72vh, 660px); min-height: 420px; }
  #view-race .rc-stage { height: min(72vh, 660px); min-height: 420px; }
  :is(#view-run, #view-shoot, #view-fish, #view-stack, #view-gold, #view-heist, #view-golf, #view-bowl) .rc-panel, #view-race .rc-pane { column-count: 3; column-gap: 22px; column-rule: 1px solid rgba(255,255,255,.05); }
  :is(#view-run, #view-shoot, #view-fish, #view-stack, #view-gold, #view-heist, #view-golf, #view-bowl) .rc-panel > *, #view-race .rc-pane > * { break-inside: avoid; }
  :is(#view-run, #view-shoot, #view-fish, #view-stack, #view-gold, #view-heist, #view-golf, #view-bowl) .rc-panel > .rc-lbl, #view-race .rc-pane > .rc-lbl { break-after: avoid; }
  #view-race .rc-tabs { max-width: 420px; }
  #view-race .rc-pane[hidden] { display: none; }
}

/* Roulette wide: full-width wheel stage above the rail, layout and bets */
@media (min-width: 1101px) {
  #view-roulette.ro-wide .table-layout { grid-template-rows: auto auto; align-items: start; }
  #view-roulette.ro-wide .table-layout > #roStage { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: auto; height: clamp(330px, calc(100dvh - 470px), 600px); max-height: none; min-height: 330px; margin: 0; }
  #view-roulette.ro-wide #roFelt > .og-top .og-title { display: none; }
  #view-roulette.ro-wide #roFelt > .og-top { min-height: 0; margin-bottom: 4px; }
  #view-roulette.ro-wide .ro-dock-in .chips { grid-template-columns: repeat(6, 1fr); gap: 6px 4px; }
  #view-roulette.ro-wide .ro-dock-in .chips .chip { width: 42px; height: 42px; }
  #view-roulette.ro-wide .ro-dock-in { gap: 10px; padding: 12px; }
  #view-roulette.ro-wide .table-layout > :not(#roStage) { grid-row: 2; }
  #view-roulette.ro-wide #roStage > .stage > img:not(.amb), #view-roulette.ro-wide #roStage > .stage .mood, #view-roulette.ro-wide #roStage > .stage video.dv { height: 100% !important; width: 150% !important; left: -46% !important; object-position: 50% 4%; }
}
/* Wheel cam: flat top-down view of the wheel */
.ro-cam { position: absolute; z-index: 5; right: 10px; bottom: 54px; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; background: rgba(6,7,12,.66); border: 1px solid rgba(214,180,110,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.ro-cam canvas { width: 100%; aspect-ratio: 1; display: block; }
.ro-cam-h { display: none; }
.ro-cam-n { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 10px; color: rgba(255,255,255,.62); letter-spacing: .04em; text-align: center; }
.ro-cam-n b { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: 13px; font-weight: 800; color: #fff; background: #15161c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.ro-cam-n b:empty { display: none; }
.ro-cam-n.c-r b { background: linear-gradient(180deg, #c3142a, #7a0b14); }
.ro-cam-n.c-g b { background: linear-gradient(180deg, #17a454, #0b5a2c); }
.ro-cam-n.c-b b { background: linear-gradient(180deg, #2a2b33, #0b0b0e); }
.ro-cam-n span { display: none; }
@media (max-width: 1100px) { .ro-cam-n { font-size: 0; } }
@media (min-width: 1101px) {
  #view-roulette.ro-wide #roStage > .stage { right: 34% !important; width: auto !important; }
  #view-roulette.ro-wide #roStage > .ro-wheel { width: 66%; right: auto; }
  #view-roulette.ro-wide #roStage > .ro-hud.r { right: calc(34% + 14px); }
  #view-roulette.ro-wide #roStage > .ro-snd { right: calc(34% + 12px); }
  #view-roulette.ro-wide .ro-cam { top: 0; right: 0; bottom: 0; width: 34%; padding: 16px 18px 14px; gap: 10px; border-radius: 0; border: 0; border-left: 1px solid rgba(214,180,110,.2); background: radial-gradient(90% 70% at 50% 45%, rgba(214,180,110,.07), transparent 70%), linear-gradient(180deg, #07080c, #050607); backdrop-filter: none; justify-content: center; }
  #view-roulette.ro-wide .ro-cam-h { display: block; align-self: stretch; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(214,180,110,.85); text-align: center; }
  #view-roulette.ro-wide .ro-cam canvas { width: auto; height: auto; flex: 1 1 auto; min-height: 0; max-width: 100%; aspect-ratio: 1; }
  #view-roulette.ro-wide .ro-cam-n { font-size: 12px; min-height: 34px; }
  #view-roulette.ro-wide .ro-cam-n span { display: inline; }
  #view-roulette.ro-wide .ro-cam-n b { min-width: 40px; height: 34px; font-size: 19px; border-radius: 9px; }
}
@media (max-width: 640px) { .ro-cam { width: 100px; padding: 4px; right: 8px; bottom: 52px; border-radius: 12px; } .ro-cam canvas { height: auto; } }

/* Roulette wide v2: wheel + layout share the left column, chips upper right, rules/history lower right (no wheel cam) */
@media (min-width: 1101px) {
  #view-roulette.ro-wide .table-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 360px); grid-template-rows: auto auto; gap: 14px; align-items: start; }
  #view-roulette.ro-wide .table-layout > #roStage { grid-column: 1; grid-row: 1; height: clamp(300px, calc(100dvh - 520px), 470px); min-height: 300px; border-radius: 18px; overflow: hidden; }
  #view-roulette.ro-wide .table-layout > #roFelt { grid-column: 1; grid-row: 2; }
  #view-roulette.ro-wide .table-layout > aside.market:not(#roStage) { grid-column: 2; grid-row: 1; align-self: stretch; }
  #view-roulette.ro-wide .table-layout > aside.dealer-panel:not(#roStage) { grid-column: 2; grid-row: 2; position: static; max-height: none; }
  #view-roulette.ro-wide #roStage > .stage { right: auto !important; width: 46% !important; left: 0 !important; }
  #view-roulette.ro-wide #roStage > .stage > img:not(.amb), #view-roulette.ro-wide #roStage > .stage .mood, #view-roulette.ro-wide #roStage > .stage video.dv { width: 100% !important; left: 0 !important; }
  #view-roulette.ro-wide #roStage > .ro-wheel { width: 100%; right: 0; }
  #view-roulette.ro-wide #roStage > .ro-hud.r { right: 14px; }
  #view-roulette.ro-wide #roStage > .ro-snd { right: 12px; }
  #view-roulette.ro-wide .ro-board-w { max-width: none; }
}
.ro-cam { display: none !important; }
@media (min-width: 1101px) {
  /* roulette side panel: the whole panel scrolls, so every tab's content is reachable */
  #view-roulette.ro-wide .table-layout > aside.dealer-panel:not(#roStage) { align-self: stretch; contain: size; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
  #view-roulette.ro-wide aside.dealer-panel > .rules { flex: 0 0 auto; }
  #view-roulette.ro-wide aside.dealer-panel .rules .rpane { flex: 0 0 auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
/* live hand: the locked side-bet strip shrinks so the ride / cash-out buttons stay on screen */
@media (min-width: 1025px) {
  .wk-sides.bj-sides.locked { padding: 12px 14px 6px; margin: 2px auto 6px; gap: 6px 14px; }
  .wk-sides.bj-sides.locked .bj-side-spot { width: 28px; height: 28px; margin: 2px 0; }
  .wk-sides.bj-sides.locked .bj-side-p { display: none; }
  .wk-sides.bj-sides.locked .bj-side-spot b { font-size: 9px; }
}
.ro-stage > .win-fx { z-index: 30; place-items: center; } .ro-stage > .win-fx .wf-box { margin-top: 0; }
.ro-stage:has(> .win-fx) .ro-med { opacity: 0; transition: opacity .2s; }
/* Gold Rush: taller play screen so the maze fills more of the screen */
@media (min-width: 1101px) {
  #view-gold .wr-stage { height: clamp(460px, calc(100dvh - 196px), 820px); }
}
.sx-lvl-box small.sx-lvl-bb { color: #C8FF2E; letter-spacing: .04em; }
/* end-of-hand summary (Hold'em, Let It Ride) */
#hMsg:has(> .res), #lMsg:has(> .res), #tpMsg:has(> .res) { display: block; }
.res { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.res-h { font: 700 clamp(16px, 1.5vw, 20px)/1.25 Satoshi, sans-serif; color: var(--bone, #F2EFE6); letter-spacing: -.005em; }
.res-h::first-letter { text-transform: uppercase; }
.res-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
.res-net { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 15px; font-weight: 700; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.res-net.win { color: #C8FF2E; border-color: rgba(200,255,46,.4); background: rgba(200,255,46,.08); }
.res-net.lose { color: #FF5A6E; border-color: rgba(255,90,110,.35); background: rgba(255,90,110,.07); }
.res-net.push { color: #B8C0CC; }
.res-note { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font: 500 12.5px/1.2 Satoshi, sans-serif; color: #B8C0CC; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.res-note .coin, .res-net .coin { width: 14px; height: 14px; }
/* avatar studio: the options column always scrolls inside the dialog */
@media (min-width: 761px) {
  .sx-studio { max-height: calc(100dvh - 24px); }
  .sd-grid { max-height: calc(100dvh - 24px); grid-template-rows: minmax(0, 1fr); }
  .sd-opts { max-height: calc(100dvh - 24px); min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
}

/* Roulette: neon city rooftop, no dealer, centered neon wheel */
#roStage > .ro-sbg { display: block !important; inset: 0; background: url(assets/roulette/city.webp) center 58% / cover no-repeat; filter: brightness(.78) saturate(.95); animation: none; }
#roStage > .stage { display: none !important; }
#view-roulette .dealer-panel .dealer-meta, #view-roulette .dealer-panel .dealer-pick { display: none; }
/* bet readout under the chips */
.bet-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.bet-line span { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.bet-line em { font-style: normal; color: var(--muted, #9aa3b5); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.bet-line b { font-family: var(--font-mono); font-weight: 600; color: #e9ecf5; }
.bet-line .tot { margin-left: auto; }
.bet-line .tot b { color: #2ef2ff; }
.bet-line .coin { width: 12px; height: 12px; }

/* Baccarat: chips sit on the betting spots; any mix of Player, Banker and Tie */
#view-baccarat .bac-spots { max-width: 560px; }
#view-baccarat .spot { position: relative; min-height: 112px; justify-content: flex-start; gap: 4px; padding: 12px 8px 10px; }
#view-baccarat .spot-stk { pointer-events: none; width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important; font-size: 11px !important; margin: 4px 0 0; cursor: default; }
#view-baccarat .spot-stk[hidden] { display: none; }
#view-baccarat .spot-a { font-size: 12px; color: var(--muted, #8A8F98); margin-top: auto; }
#view-baccarat .spot:not(.has) .spot-a { opacity: .7; font-size: 11px; }
#view-baccarat .spot.has { border-color: var(--acid); background: rgba(200,255,46,.08); }
#view-baccarat .spot.has .spot-n, #view-baccarat .spot.has .spot-a { color: var(--acid); }
#view-baccarat .spot.bk.has { border-color: var(--plasma); background: rgba(46,242,255,.08); }
#view-baccarat .spot.bk.has .spot-n, #view-baccarat .spot.bk.has .spot-a { color: var(--plasma); }
#view-baccarat .spot.tie.has { border-color: #FF8AE6; background: rgba(255,138,230,.08); }
#view-baccarat .spot.tie.has .spot-n, #view-baccarat .spot.tie.has .spot-a { color: #FF8AE6; }
#view-baccarat .spot.drop .spot-stk { animation: bacDrop .28s cubic-bezier(.2,.9,.3,1.3); }
@keyframes bacDrop { from { transform: translateY(-14px) scale(1.15); opacity: .4; } to { transform: none; opacity: 1; } }
html.rm #view-baccarat .spot.drop .spot-stk { animation: none; }
#view-baccarat [data-bchip][aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }
@media (max-width: 560px) { #view-baccarat .spot { min-height: 100px; } #view-baccarat .spot-stk { width: 34px !important; height: 34px !important; } }
#view-baccarat .spot-stk { display: grid; place-items: center; line-height: 1; font-weight: 800; color: var(--ink) !important; }

/* Avatar studio: big turntable preview that fills the left panel */
.sd-grid { grid-template-columns: clamp(340px, 34vw, 460px) minmax(0, 1fr); }
.sx-studio .sd-prev { min-height: 0; }
.sd-stage { position: relative; flex: 1 1 auto; min-height: 340px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 72%, rgba(46,242,255,.12), transparent 70%), radial-gradient(60% 40% at 50% 20%, rgba(140,107,255,.10), transparent 70%), #07080d; border: 1px solid var(--line); }
.sd-prev .sd-stage canvas, .sd-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; cursor: grab; touch-action: pan-y; }
.sd-stage canvas:active { cursor: grabbing; }
.sd-rot { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: rgba(10,12,20,.72); border: 1px solid rgba(46,242,255,.35); color: #dffcff; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.sd-rot:hover { background: rgba(46,242,255,.16); border-color: rgba(46,242,255,.7); }
.sd-rot:active { transform: translateY(-50%) scale(.94); }
.sd-rot.l { left: 10px; } .sd-rot.r { right: 10px; }
.sd-ang { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(223,252,255,.7); background: rgba(10,12,20,.6); border: 1px solid rgba(255,255,255,.08); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 760px) { .sd-grid { grid-template-columns: 1fr; } .sd-stage { flex: none; height: min(62vh, 480px); min-height: 0; } }

/* ---------- Messages, friend requests and Plaza profiles ---------- */
.hx-mb { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--plasma); background: var(--surface); cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s; }
.hx-mb:hover, .hx-mb:focus-visible { color: var(--bone); border-color: var(--plasma); box-shadow: 0 0 18px -4px rgba(46,242,255,.7); }
.hx-mb-n { position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--signal); color: #fff; font-size: .66rem; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--void); }
.hx-mb-n[hidden] { display: none; }
@media (max-width: 560px) { .hx-mb { width: 34px; height: 34px; flex-basis: 34px; } }

.sx-mb { width: min(900px, calc(100vw - 24px)); padding: 24px; }
.sx-mb h2 { margin: 2px 0 12px; }
.mb-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.mb-tabs button { padding: 9px 14px; border: 0; background: none; color: var(--steel); font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mb-tabs button.on { color: var(--bone); border-bottom-color: var(--plasma); }
.mb-tabs em, .mb-f em { font-style: normal; display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--signal); color: #fff; font-size: .68rem; line-height: 18px; text-align: center; }
.mb-g2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; height: min(560px, calc(100dvh - 210px)); min-height: 360px; }
.mb-l { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.mb-f { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mb-f button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--steel); font: inherit; font-size: .82rem; cursor: pointer; }
.mb-f button.on { color: var(--void); background: var(--plasma); border-color: var(--plasma); font-weight: 700; }
.mb-f .mb-all { margin-left: auto; border: 0; background: none; color: var(--plasma); padding: 6px 2px; }
.mb-to, .mb-add, .mb-say { display: flex; gap: 6px; }
.mb-to input, .mb-add input, .mb-say input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); font: inherit; }
.mb-to input:focus, .mb-add input:focus, .mb-say input:focus { outline: none; border-color: var(--plasma); }
.mb-cl { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; display: grid; align-content: start; gap: 4px; }
.mb-c { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--bone); font: inherit; text-align: left; cursor: pointer; }
.mb-c:hover { background: rgba(255,255,255,.04); }
.mb-c.sel { background: rgba(46,242,255,.08); border-color: rgba(46,242,255,.35); }
.mb-ca { position: relative; width: 40px; height: 40px; }
.mb-ca img, .mb-rh img, .mb-rl img { border-radius: 50%; object-fit: cover; object-position: top; background: var(--surface-2); }
.mb-ca i.on { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 2px #0d0e13; }
.mb-cm { min-width: 0; display: grid; }
.mb-cm b { font-weight: 600; font-size: .92rem; }
.mb-cm small { color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.mb-c.un .mb-cm b { font-weight: 800; }
.mb-c.un .mb-cm small { color: var(--bone); }
.mb-cr { display: grid; justify-items: end; gap: 3px; }
.mb-cr small { color: var(--steel); font-size: .7rem; }
.mb-cr em { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--plasma); color: var(--void); font-weight: 800; font-size: .7rem; line-height: 20px; text-align: center; }
.mb-cr .mb-rd { color: #6f7480; }
.mb-r { display: flex; flex-direction: column; min-height: 0; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(46,242,255,.035), rgba(140,107,255,.03)); padding: 12px; }
.mb-r0 { align-items: center; justify-content: center; color: var(--steel); }
.mb-rh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mb-rh > span { flex: 1; min-width: 0; display: grid; }
.mb-rh small { color: var(--steel); font-size: .78rem; } .mb-rh small.on { color: var(--acid); }
.mb-rel { font-size: .78rem; color: var(--steel); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.mb-rel.on { color: var(--acid); border-color: rgba(200,255,46,.4); }
.mb-back { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mb-th { list-style: none; margin: 0; padding: 12px 2px; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.mb-th li { max-width: 78%; align-self: flex-start; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); border: 1px solid var(--line); font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }
.mb-th li.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(46,242,255,.14); border-color: rgba(46,242,255,.35); }
.mb-th li.mb-ts { align-self: center; background: none; border: 0; padding: 4px; color: #6f7480; font-size: .7rem; }
.mb-th li.mb-sys { align-self: center; background: none; border: 0; color: var(--steel); }
.mb-empty { color: var(--steel); padding: 14px 4px; list-style: none; font-size: .88rem; }
.mb-g { color: var(--steel); margin: 0; }
.mb-req h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin: 6px 0 8px; font-weight: 600; }
.mb-rl { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.mb-rl li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mb-rl li > span { flex: 1; min-width: 0; display: grid; } .mb-rl small { color: var(--steel); font-size: .78rem; }
@media (max-width: 760px) {
  .sx-mb { padding: 18px 14px; }
  .mb-g2 { grid-template-columns: 1fr; height: calc(100dvh - 190px); }
  .mb-g2 .mb-r { display: none; }
  .mb-g2.th .mb-l { display: none; }
  .mb-g2.th .mb-r { display: flex; }
}

/* Plaza profile card */
.pz-card.pf { --c: #2EF2FF; width: 340px; display: block; padding: 14px; border-color: color-mix(in srgb, var(--c) 40%, var(--line-2)); box-shadow: 0 24px 60px -18px rgba(0,0,0,.85), 0 0 30px -14px var(--c); max-height: calc(100% - 20px); overflow: auto; z-index: 6; }
.pf-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--bone); cursor: pointer; line-height: 1; }
.pf-h { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding-right: 26px; }
.pf-av { width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 35%, transparent), #0b0c12 70%); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.pf-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0 !important; }
.pf-av.holo img { opacity: .55; filter: saturate(.6); }
.pf-id { display: grid; gap: 2px; min-width: 0; }
.pf-id b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rl { font-size: .74rem; } .pf-rl.friend { color: var(--acid) !important; } .pf-rl.in { color: #FFC94A !important; } .pf-rl.out { color: var(--plasma) !important; }
.pf-b { margin: 12px 0 2px; }
.pf-b .btn { flex: 1 1 calc(50% - 6px); }
.pf-b .btn[disabled] { opacity: .6; cursor: default; }
.pf-fr { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.pf-fr span { color: var(--acid); } .pf-fr small { color: var(--steel); font-size: .72rem; }
.pf-fr:hover small { color: var(--signal); }
.pf-cards { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pf-ct { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pf-ct span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); font-weight: 700; }
.pf-ct small { color: var(--steel); font-size: .7rem; }
.pf-cg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-cd { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; transition: transform .2s; }
.pf-cd:hover, .pf-cd:focus-visible { transform: translateY(-3px); }
html.rm .pf-cd, html.rm .pf-cd:hover { transition: none; transform: none; }
.pf-cd .rp-slab, .pf-zc .rp-slab { container-type: inline-size; }
.pf-none { color: var(--steel); font-size: .84rem; margin: 4px 0; }
.pf-hint { display: block; color: #6f7480; font-size: .72rem; margin-top: 8px; }
.pz-card.pf.sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 78%; }
.pf-zoom { width: min(360px, calc(100vw - 24px)); padding: 22px; text-align: center; }
.pf-zc { width: min(280px, 100%); margin: 6px auto 12px; }
.pf-zn { display: grid; gap: 4px; margin: 0; } .pf-zn span { color: var(--steel); font-size: .8rem; }

/* hover tag */
.pz-hov { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(10,11,16,.92); border: 1px solid rgba(46,242,255,.35); box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); white-space: nowrap; }
.pz-hov[hidden] { display: none; }
.pz-hov b { font-size: .9rem; } .pz-hov span { color: var(--steel); font-size: .72rem; } .pz-hov small { color: var(--plasma); font-size: .7rem; }

/* Plaza lists */
.pz-prof { cursor: pointer; } .pz-prof:hover b { color: var(--plasma); }
.pz-msg { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--plasma); cursor: pointer; }
.pz-msg:hover { border-color: var(--plasma); }
.pz-list li.rq { background: rgba(255,201,74,.06); border-radius: 10px; }
.pz-list .rq-t { color: #FFC94A !important; }
.sx-toast a, .sx-toast button { pointer-events: auto; }
.sx-toast .sx-lnk { color: var(--plasma); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mb-rh > .mb-rel { flex: 0 0 auto; }
.pf-cg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.pz-card.pf.sheet .pf-cg { grid-auto-columns: 84px; }
.pf-id small { font-size: .76rem; }

/* ride row held in place between steps (Mines): stays put, just dims while a tile opens */
.kit-hold { opacity: .72; transition: opacity .15s; }
/* Originals bet row: room for Clear without pushing the play button to a second line */
@media (min-width: 900px) { .og-felt .controls .bet-row { gap: 8px; flex-wrap: nowrap; } .og-felt .controls .bet-row .bet-amt { min-width: 132px; padding-left: 14px; padding-right: 14px; } .og-felt .controls .bet-row .btn.sm { padding-left: 11px; padding-right: 11px; } }

/* Blackjack ride/cash-out: sit in the middle of the reserved dock, not on the felt's bottom edge */
@media (min-width: 1025px) {
  #view-table .felt > #rideControls:not([hidden]) { justify-content: center; padding-bottom: 14px; box-sizing: border-box; }
}

/* Baccarat bet spots: three matched felt boxes, each in its own color, none lit until you bet */
#view-baccarat .bac-spots { gap: 10px; }
#view-baccarat .spot { --sc: 200,255,46; overflow: hidden; isolation: isolate; border-radius: 16px; padding: 14px 8px 12px; gap: 6px;
  border: 1px solid rgba(var(--sc), .22);
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--sc), .10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), #0c0d12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.35);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease; }
#view-baccarat .spot.tie { --sc: 255,138,230; }
@media (min-width: 561px) { #view-baccarat .spot { min-height: 150px; } }
@media (max-width: 560px) { #view-baccarat .spot { min-height: 138px; } #view-baccarat .spot::after { width: 38px; height: 38px; --ringY: 82px; } }
#view-baccarat .spot.bk { --sc: 46,242,255; }
#view-baccarat .spot::before { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: rgb(var(--sc)); opacity: .55; z-index: -1; }
#view-baccarat .spot::after { content: ""; position: absolute; left: 50%; top: var(--ringY, 88px); width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(var(--sc), .28); z-index: -1; transition: border-color .2s ease, opacity .2s ease; }
#view-baccarat .spot .spot-n { color: rgb(var(--sc)); font-size: 15px; letter-spacing: .16em; }
#view-baccarat .spot .spot-p { font-size: 11px; color: var(--bone); background: rgba(var(--sc), .10); border: 1px solid rgba(var(--sc), .22); border-radius: 999px; padding: 1px 9px; }
#view-baccarat .spot:hover:not(:disabled) { border-color: rgba(var(--sc), .5); background-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(var(--sc), .12), 0 10px 26px rgba(0,0,0,.4); }
#view-baccarat .spot:hover:not(:disabled)::after { border-color: rgba(var(--sc), .55); }
#view-baccarat .spot:focus-visible { outline: 2px solid rgba(var(--sc), .7); outline-offset: 2px; }
#view-baccarat .spot.has, #view-baccarat .spot.tie.has, #view-baccarat .spot.bk.has { border-color: rgba(var(--sc), .7);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--sc), .18), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), #0c0d12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(var(--sc), .18); }
#view-baccarat .spot.has::before { opacity: 1; }
#view-baccarat .spot.has::after { opacity: 0; }
#view-baccarat .spot.has .spot-n, #view-baccarat .spot.has .spot-a, #view-baccarat .spot.tie.has .spot-n, #view-baccarat .spot.tie.has .spot-a, #view-baccarat .spot.bk.has .spot-n, #view-baccarat .spot.bk.has .spot-a { color: rgb(var(--sc)); }
#view-baccarat .spot:not(.has) .spot-a { color: var(--muted, #8A8F98); }
#view-baccarat .spot:disabled { opacity: .55; }
html.rm #view-baccarat .spot { transition: none; }
@media (min-width: 1025px) and (max-height: 860px) {
  #view-baccarat .spot { min-height: 112px; padding: 8px 8px 7px; gap: 3px; --ringY: 64px; }
  #view-baccarat .spot::after { width: 38px; height: 38px; }
  #view-baccarat .spot-stk { width: 34px !important; height: 34px !important; margin-top: 2px; }
  #view-baccarat .spot .spot-n { font-size: 14px; }
}

/* Poker: seated painted avatars, sit out, and the clean numeric type used on the cash-out buttons */
.pk-top { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; position: relative; }
.pk-av { flex: none; width: clamp(54px, 5.6vw, 80px); height: clamp(66px, 7vw, 98px); overflow: hidden; position: relative; margin: 0 -4px -10px 0; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); pointer-events: none; }
.pk-av img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pk-top .pk-cards { position: relative; z-index: 1; }
.pk-seat .pk-plate { z-index: 2; padding-left: 12px; }
.pk-seat.folded { opacity: 1; }
.pk-seat.folded .pk-av, .pk-seat.away .pk-av { opacity: .6; filter: grayscale(.5) brightness(.85); }
.pk-seat.folded .pk-plate, .pk-seat.away .pk-plate { opacity: .55; }
.pk-seat.acting .pk-av img { filter: drop-shadow(0 0 10px rgba(200,255,46,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pk-seat.win .pk-av img { filter: drop-shadow(0 0 12px rgba(255,201,74,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pk-seat.away .pk-stk { color: var(--steel-2, #9aa0ab); font-size: .7rem; letter-spacing: .04em; }
/* numbers: Satoshi bold with tabular figures, no monospace */
.pk-plate .pk-stk, .pk-bet, .pk-pot, .pk-pot b, .pk-mine, .pk-mine2, .pk-res { font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pk-plate .pk-stk { font-weight: 700; font-size: .84rem; color: #FFD36B; }
.pk-bet { font-weight: 700; font-size: .82rem; padding: 4px 11px 4px 24px; color: #F4F6FA; background: rgba(5,6,10,.82); border: 1px solid rgba(255,255,255,.08); }
.pk-pot { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; background: rgba(5,6,10,.62); border: 1px solid rgba(255,201,74,.18); }
.pk-pot > span { font-family: var(--font-display); font-size: .66em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.pk-pot b { font-weight: 700; font-size: 1.22em; color: #FFD36B; }
.pk-pot b .coin { width: .82em; height: .82em; }
.pk-mine { font-weight: 500; letter-spacing: .01em; }
.pk-mine b, .pk-mine2 b { font-weight: 700; }
/* sit out controls in the table bar */
.pk-so { display: inline-flex; align-items: center; gap: 10px; margin-right: 12px; }
.pk-so[hidden] { display: none; }
.pk-son { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: rgba(255,255,255,.78); cursor: pointer; user-select: none; white-space: nowrap; }
.pk-son input { width: 16px; height: 16px; accent-color: var(--acid, #C8FF2E); margin: 0; cursor: pointer; }
@media (max-width: 700px) {
  .pk-av { width: 36px; height: 44px; margin: 0 -3px -7px 0; }
  .pk-plate .pk-stk { font-size: .7rem; } .pk-bet { font-size: .7rem; padding: 3px 8px 3px 20px; }
  .pk-so { margin-right: 0; gap: 8px; } .pk-son span { font-size: .72rem; }
  .pk-bar { flex-wrap: wrap; }
}

/* tabular figures everywhere so counters and amounts never jitter; table codes keep a code font */
body { font-variant-numeric: tabular-nums; }
.pk-code, input.mono[maxlength="6"] { font-family: var(--font-code); }
/* roulette custom chip: dashed ring, reads "Type" until a custom value is set */
#roChips .ro-cust { background: rgba(255,255,255,.04); border: 1.5px dashed rgba(233,236,245,.38); color: #E9ECF5; font: 700 11px/1 var(--font-body); letter-spacing: .02em; box-shadow: none; }
#roChips .ro-cust[aria-pressed="true"] { border-style: solid; border-color: #2EF2FF; color: #fff; background: radial-gradient(circle at 50% 35%, rgba(46,242,255,.28), rgba(46,242,255,.06)); box-shadow: 0 0 0 2px rgba(46,242,255,.25), 0 0 16px rgba(46,242,255,.35); }
#roChips .ro-cust span { font-size: 10px; opacity: .85; }
#roChips .ro-cust.stk-ed { border-radius: 50%; cursor: pointer; }
#roChips .ro-cust.stk-ed::after { display: none; }
#roChips .ro-cust.stk-ed:hover { box-shadow: 0 0 0 2px rgba(46,242,255,.3); }
#roChips { flex-wrap: nowrap; }
@media (max-width: 600px) { #roChips { gap: 5px; justify-content: center; } }
@media (max-width: 600px) { #roChips .chip { width: 42px; height: 42px; min-width: 0; flex: 0 0 auto; } }

/* ===== slot bottom bar: one clean row with Spin at the right (desktop / tablet) ===== */
@media (min-width: 641px) {
  .jp-stage { container: jpst / inline-size; }
  .jp-stage .jp-logo { height: clamp(52px, 10svh, 104px); }
  .jp-stage .jp-bar.jp-bar { display: grid; grid-template-columns: repeat(4, 38px) auto auto minmax(0, 1fr) auto auto auto; grid-template-rows: auto; align-items: center; column-gap: 10px; row-gap: 8px; padding: 10px 14px 12px; flex-wrap: nowrap; }
  .jp-stage .jp-bar > * { grid-row: 1; margin: 0; }
  .jp-stage .jp-bar > .jp-ico { width: 38px; height: 38px; }
  .jp-stage .jp-bar .jp-bal { min-width: 0; white-space: nowrap; }
  .jp-stage .jp-bar .jp-tog { justify-self: end; white-space: nowrap; margin-left: 0; }
  .jp-stage .jp-bar .jp-bet { grid-column: 8; justify-self: end; white-space: nowrap; }
  .jp-stage .jp-bar .jp-spin { grid-column: 9; grid-row: 1; width: 72px; height: 72px; margin: -6px 0; position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; justify-self: center; }
  .jp-stage .jp-bar .jp-auto { grid-column: 10; position: relative; }
  .jp-stage .jp-bar .jp-auto-pop { left: auto; right: 0; bottom: calc(100% + 10px); top: auto; transform: none; white-space: nowrap; flex-wrap: nowrap; max-width: none; }
  .jp-stage .jp-bar .jp-auto-pop button { white-space: nowrap; min-width: 0; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
}
/* narrower stage: two tidy rows (tools + stops, then balance, last win and bet) with Spin and auto on the right */
@container jpst (max-width: 940px) {
  .jp-bar.jp-bar { grid-template-columns: repeat(4, 38px) minmax(0, 1fr) auto auto; grid-template-rows: auto auto; }
  .jp-bar.jp-bar > .jp-ico { grid-row: 1; }
  .jp-bar.jp-bar .jp-tog { grid-column: 5; grid-row: 1; justify-self: end; }
  .jp-bar.jp-bar .jp-bal { grid-column: 1 / 3; grid-row: 2; min-width: 86px; }
  .jp-bar.jp-bar .jp-bal.jp-last { grid-column: 3 / 5; grid-row: 2; padding-left: 8px; }
  .jp-bar.jp-bar .jp-bet { grid-column: 5; grid-row: 2; justify-self: end; }
  .jp-bar.jp-bar .jp-spin { grid-column: 6; grid-row: 1 / 3; }
  .jp-bar.jp-bar .jp-auto { grid-column: 7; grid-row: 1 / 3; }
}
.jp-stage .jp-bar .jp-bal { min-width: 86px; }

/* ===== SUPER WIN v3: same smooth entrance as NICE / JACKPOT (no strobe, spin-in or shake) ===== */
.jp-cele.hit[data-tier=super] .jc-flash, .og-cele.hit[data-tier=super] .jc-flash { animation: jcSoftF .9s ease-out both !important; }
.jp-cele.hit[data-tier=super] .jc-t span, .og-cele.hit[data-tier=super] .jc-t span { animation: jcRise .7s cubic-bezier(.2,1.25,.4,1) calc(var(--n) * 38ms) both !important; }
.jp-cele.hit[data-tier=super] .jc-t, .og-cele.hit[data-tier=super] .jc-t { animation: jcBreath 2.4s ease-in-out .9s infinite !important; }
@keyframes jcSoftF { 0% { opacity: .7; } 100% { opacity: 0; } }
@keyframes jcRise { 0% { opacity: 0; transform: translateY(36px) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes jcBreath { 50% { transform: scale(1.035); } }
html.rm .jp-cele[data-tier=super] .jc-t, html.rm .jp-cele[data-tier=super] .jc-t span, html.rm .jp-cele[data-tier=super] .jc-flash { animation: none !important; opacity: 1; }
html.rm .jp-cele[data-tier=super] .jc-flash { opacity: 0; }
.sx-studio .sd-note { margin: -2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--text-dim, #9aa3b8); overflow-wrap: anywhere; }
.ar-rx-go .ar-kbd { margin-left: 8px; padding: 2px 6px; border-radius: 5px; font: 600 10px/1.3 var(--font-mono); letter-spacing: .04em; background: rgba(0,0,0,.16); border: 1px solid rgba(0,0,0,.22); vertical-align: 2px; white-space: nowrap; }
@media (hover: none) { .ar-rx-go .ar-kbd { display: none; } }

/* ===================== BUBBLE CRAPS ===================== */
html body #view-craps .felt.bc-felt { position: relative; display: flex; flex-direction: column; gap: 10px; height: auto; min-height: 0; max-height: none; overflow: visible; padding: 14px 16px 16px; border-radius: 22px; background: #070816; isolation: isolate; --dockMin: 0px; }
html body #view-craps .bc-city { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: #070816 url(assets/craps-city.webp) 50% 30% / cover no-repeat; }
html body #view-craps .bc-city i { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 30%, rgba(7,8,22,.15), rgba(7,8,22,.75) 70%), linear-gradient(180deg, rgba(7,8,22,.25), rgba(7,8,22,.55) 34%, rgba(7,8,22,.92) 56%, #070816 75%); }
html body #view-craps .bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bc-eye { margin: 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #8ff7ff; text-shadow: 0 0 12px rgba(46,242,255,.5); }
.bc-sub { margin: 0; font-size: 13px; color: rgba(220,226,255,.62); }
html body #view-craps .bc-machine { position: relative; height: clamp(240px, 38vh, 360px); margin: -4px auto 0; width: 100%; max-width: 760px; }
html body #view-craps .bc-machine canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html body #view-craps .felt > .status { position: relative; z-index: 2; text-align: center; min-height: 1.5em; font-size: 14px; color: #e6e9ff; overflow-wrap: anywhere; }
html body #view-craps .felt > .status b { color: #c8ff2e; }

/* layout */
.bc-board { display: grid; grid-template-columns: 1fr 1.25fr 1.1fr; gap: 10px; position: relative; z-index: 2; }
.bc-sec { min-width: 0; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(20,22,52,.72), rgba(10,11,30,.82)); border: 1px solid rgba(140,160,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.bc-sec h4 { margin: 2px 2px 7px; font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(200,210,255,.7); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.bc-sec h4 small { font: 500 11px/1.25 var(--font-body, inherit); letter-spacing: 0; text-transform: none; color: rgba(200,210,255,.45); }
.bc-sec h4:not(:first-child) { margin-top: 10px; }
.bc-g { display: grid; gap: 6px; margin-bottom: 6px; }
.bc-g.g2 { grid-template-columns: 1.35fr 1fr; } .bc-g.g3 { grid-template-columns: repeat(3, 1fr); } .bc-g.g4 { grid-template-columns: repeat(4, 1fr); } .bc-g.g6 { grid-template-columns: repeat(6, 1fr); }
.bc-place .bc-g.g6:last-of-type { grid-template-columns: repeat(4, 1fr) 1fr 1fr; }
.bc-t { position: relative; min-width: 0; min-height: 52px; padding: 7px 6px 6px; border-radius: 12px; border: 1px solid rgba(140,160,255,.22); background: linear-gradient(180deg, rgba(36,40,92,.6), rgba(16,18,46,.75)); color: #eef0ff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; text-align: center; transition: border-color .2s, box-shadow .25s, transform .12s, background .25s; overflow: visible; }
.bc-t:hover { border-color: rgba(46,242,255,.6); box-shadow: 0 0 0 1px rgba(46,242,255,.25), 0 0 18px rgba(46,242,255,.18); }
.bc-t:active { transform: scale(.97); }
.bc-tn { font-weight: 700; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.bc-tp { font: 600 10.5px/1.15 var(--font-mono); color: rgba(200,255,46,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bc-t.hero { background: linear-gradient(180deg, rgba(200,255,46,.16), rgba(16,18,46,.8)); border-color: rgba(200,255,46,.35); }
.bc-t.hero .bc-tn { font-size: 15px; letter-spacing: .02em; }
.bc-t.num .bc-tn { font-size: 22px; font-weight: 800; line-height: 1; }
.bc-t.red { border-color: rgba(255,79,109,.35); background: linear-gradient(180deg, rgba(255,79,109,.14), rgba(16,18,46,.8)); }
.bc-t.ats { border-color: rgba(255,79,216,.3); }
.bc-t.off { opacity: .42; cursor: help; }
.bc-t.off:hover { box-shadow: none; border-color: rgba(140,160,255,.22); }
.bc-t.has { border-color: rgba(46,242,255,.7); box-shadow: 0 0 0 1px rgba(46,242,255,.3), 0 0 22px rgba(46,242,255,.16); }
.bc-t.pt { border-color: rgba(200,255,46,.85); box-shadow: 0 0 0 1px rgba(200,255,46,.4), 0 0 22px rgba(200,255,46,.25); }
.bc-t.won { animation: bcWon 2.2s ease-out; }
.bc-t.lost { animation: bcLost 1.4s ease-out; }
@keyframes bcWon { 0% { box-shadow: 0 0 0 2px #c8ff2e, 0 0 36px rgba(200,255,46,.7); background: linear-gradient(180deg, rgba(200,255,46,.35), rgba(16,18,46,.8)); } 100% { } }
@keyframes bcLost { 0% { box-shadow: 0 0 0 1px rgba(255,79,109,.8); filter: saturate(.6); } 100% { } }
.bc-t.bump { animation: bcBump .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes bcBump { 50% { transform: scale(1.05); } }
.bc-stk { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.bc-stk:empty { display: none; }
.bc-stk b { font-size: 10.5px; color: #fff; background: rgba(5,6,18,.85); padding: 1px 5px; border-radius: 6px; border: 1px solid rgba(46,242,255,.45); white-space: nowrap; }
.bc-chip { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #2ef2ff 20% 55%, #0a6f7a 57%); box-shadow: 0 0 6px rgba(46,242,255,.7); }
.bc-badge { position: absolute; left: 4px; top: 4px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; pointer-events: none; }
.bc-badge em { font: 700 9.5px/1.2 var(--font-mono); font-style: normal; padding: 1px 4px; border-radius: 5px; white-space: nowrap; }
.bc-on { background: #c8ff2e; color: #0b0d1c; box-shadow: 0 0 10px rgba(200,255,46,.7); }
.bc-cp { background: rgba(46,242,255,.18); color: #8ff7ff; border: 1px solid rgba(46,242,255,.5); }
.bc-dcp { background: rgba(255,79,216,.16); color: #ffb3ef; border: 1px solid rgba(255,79,216,.45); }
.bc-pair { display: inline-flex; gap: 3px; }
.bc-die { width: 18px; height: 18px; }
.bc-die rect { fill: #f2f3ff; } .bc-die circle { fill: #141522; }
.bc-t.field { min-height: 60px; background: linear-gradient(180deg, rgba(140,107,255,.2), rgba(16,18,46,.8)); border-color: rgba(140,107,255,.4); }
.bc-fn { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bc-fn b { font-size: 16px; font-weight: 800; position: relative; }
.bc-fn i { font: 700 9px/1 var(--font-mono); font-style: normal; color: #c8ff2e; margin-left: 2px; vertical-align: super; }
.bc-atsrow { display: flex; gap: 4px; justify-content: space-between; margin-top: 2px; }
.bc-atsrow i { flex: 1; font: 700 11px/22px var(--font-mono); font-style: normal; text-align: center; border-radius: 6px; background: rgba(255,255,255,.04); color: rgba(220,226,255,.45); border: 1px solid rgba(255,255,255,.06); }
.bc-atsrow i.hit { background: rgba(255,79,216,.22); color: #fff; border-color: rgba(255,79,216,.6); box-shadow: 0 0 10px rgba(255,79,216,.35); }
.bc-atsrow i.sep { background: none; border-color: transparent; color: rgba(255,79,109,.7); }
.bc-float { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-weight: 800; font-size: 14px; color: #c8ff2e; text-shadow: 0 0 10px rgba(200,255,46,.8); pointer-events: none; white-space: nowrap; animation: bcFloat 1.5s ease-out forwards; z-index: 3; }
@keyframes bcFloat { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -28px); } }
html body #view-craps .felt > .controls { position: relative; z-index: 2; margin-top: 2px; }
html body #view-craps .bet-row { flex-wrap: wrap; gap: 8px; }
html body #view-craps #cRoll { min-width: 170px; white-space: nowrap; }
html body #view-craps #cChips { flex-wrap: nowrap; }

/* side panel */
.bc-side { display: flex; flex-direction: column; gap: 10px; }
.bc-card { padding: 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(20,22,52,.8), rgba(10,11,30,.9)); border: 1px solid rgba(140,160,255,.16); }
.bc-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bc-ch b { font-size: 13px; letter-spacing: .04em; }
.bc-ch span { font-size: 11.5px; color: rgba(220,226,255,.6); }
.bc-ch em { font-style: normal; font-weight: 700; } .bc-ch em.up { color: #c8ff2e; } .bc-ch em.dn { color: #ff6f8a; }
.bc-bars { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; align-items: end; height: 118px; }
.bc-bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bc-bar i { width: 100%; height: max(3px, calc(var(--h) * .62)); border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,.08); transition: height .35s cubic-bezier(.2,.8,.2,1); }
.bc-bar.up i { background: linear-gradient(180deg, #c8ff2e, rgba(200,255,46,.35)); box-shadow: 0 0 10px rgba(200,255,46,.3); }
.bc-bar.dn i { background: linear-gradient(180deg, #ff6f8a, rgba(255,79,109,.3)); }
.bc-bar b { font-size: 12px; margin-top: 3px; } .bc-bar small { font-size: 8.5px; color: rgba(220,226,255,.4); white-space: nowrap; }
.bc-bv { font-size: 8.5px; color: rgba(220,226,255,.7); white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: clip; margin-bottom: 2px; }
.bc-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: rgba(220,226,255,.5); }
.bc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 180px; overflow: auto; }
.bc-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.03); }
.bc-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-hist { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-hist i { font: 700 12px/26px var(--font-mono); font-style: normal; width: 28px; text-align: center; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.bc-hist i.s7 { color: #ff6f8a; border-color: rgba(255,79,109,.45); }
.bc-hist i.dbl { color: #8ff7ff; border-color: rgba(46,242,255,.4); }

@media (max-width: 1180px) { .bc-board { grid-template-columns: 1fr 1fr; } .bc-field { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  html body #view-craps .felt.bc-felt { padding: 10px 8px 12px; border-radius: 16px; }
  .bc-board { grid-template-columns: 1fr; } .bc-field { grid-column: auto; }
  html body #view-craps .bc-machine { height: 230px; }
  .bc-g.g4 { grid-template-columns: repeat(2, 1fr); }
  .bc-place .bc-g.g6:last-of-type { grid-template-columns: repeat(3, 1fr); }
  .bc-g.g6 { grid-template-columns: repeat(3, 1fr); }
  .bc-sub { display: none; }
  html body #view-craps #cRoll { min-width: 0; flex: 1 1 100%; }
  html body #view-craps #cChips { gap: 5px; } html body #view-craps #cChips .chip { width: 42px; height: 42px; }
}
html.rm .bc-t.won, html.rm .bc-t.lost, html.rm .bc-t.bump { animation: none; }
/* bubble craps: lay out by the felt's own width */
html body #view-craps .felt.bc-felt { container: bcf / inline-size; }
@container bcf (max-width: 980px) { .bc-board { grid-template-columns: 1fr 1fr; } .bc-field { grid-column: 1 / -1; } .bc-field .bc-g.g4 { grid-template-columns: repeat(7, 1fr); } }
@container bcf (max-width: 560px) { .bc-board { grid-template-columns: 1fr; } .bc-field .bc-g.g4 { grid-template-columns: repeat(4, 1fr); } }
.bc-t .bc-tn { hyphens: none; word-break: normal; overflow-wrap: normal; }
.bc-field .bc-t .bc-tn, .bc-place .bc-t.big .bc-tn { font-size: 12px; }
/* chips and Roll stay in reach while the layout scrolls */
html body #view-craps .felt > .controls { position: sticky; bottom: 0; padding: 10px 6px 6px; margin: 0 -6px; border-radius: 16px; background: linear-gradient(180deg, rgba(7,8,22,0), rgba(7,8,22,.92) 22%); backdrop-filter: blur(6px); z-index: 5; }
/* mines: bet amount gets its own row so the number stays readable */
@media (min-width: 1181px) {
  html body #mnControls .bet-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #mnControls .bet-row .bet-amt { grid-column: 1 / -1; min-width: 0; padding: 8px 12px 9px; }
  html body #mnControls .bet-row .btn.sm { width: 100%; padding: 8px 4px; }
}
html body #mnControls .bet-row .bet-amt { min-width: 120px; flex: 0 0 auto; }
html body #mnControls .bet-row .bet-amt .mono { font-size: clamp(20px, 2vw, 26px); font-variant-numeric: tabular-nums; }
@media (min-width: 1181px) { html body #mnControls .bet-row .bet-amt { min-width: 0; } }
/* ===== arcade result cards: centred with `translate` so the pop animation can't knock them off-centre ===== */
html body .wr-splash, html body .rc-splash { transform: none; translate: -50% -50%; animation: fxCardIn .5s cubic-bezier(.2,.9,.3,1.25) both; will-change: transform, opacity; isolation: isolate; }
@keyframes fxCardIn { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
html body .wr-splash.fx-win, html body .rc-splash.fx-win { animation: fxCardWin .7s cubic-bezier(.2,.9,.3,1.3) both, fxBreath 3.2s ease-in-out .8s infinite; }
@keyframes fxCardWin { 0% { opacity: 0; transform: scale(.6); filter: brightness(2); } 55% { opacity: 1; transform: scale(1.07); filter: brightness(1.25); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes fxBreath { 0%, 100% { box-shadow: 0 0 40px -8px var(--fxc, rgba(46,242,255,.6)); } 50% { box-shadow: 0 0 70px -4px var(--fxc, rgba(46,242,255,.75)); } }
.fx-win { --fxc: rgba(46,242,255,.6); }
.fx-win[data-fx-tier=nice] { --fxc: rgba(200,255,46,.6); }
.fx-win[data-fx-tier=super] { --fxc: rgba(255,46,166,.6); }
.fx-win[data-fx-tier=jackpot], .fx-win.fx-perfect { --fxc: rgba(255,210,63,.65); }
/* slow rotating neon rim */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fx-win::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--fxa), transparent 0 18%, #2ef2ff 28%, #c8ff2e 36%, transparent 46% 68%, #ff2ea6 78%, #8b5cff 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fxSpin 3.6s linear infinite; }
.fx-win.fx-perfect::before, .fx-win[data-fx-tier=jackpot]::before { background: conic-gradient(from var(--fxa), #ffd23f, #c8ff2e, #2ef2ff, #ff2ea6, #8b5cff, #ffd23f); }
@keyframes fxSpin { to { --fxa: 360deg; } }
/* one shine sweep across the card */
.fx-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; animation: fxShine 1.3s ease-out .35s 1 both; }
@keyframes fxShine { to { background-position: -130% 0; } }
/* tier ribbon */
.fx-tier { display: inline-flex; justify-content: center; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; margin: 0 auto 6px !important; padding: 3px 12px; border-radius: 999px; font-family: Orbitron, sans-serif; font-weight: 900; font-size: clamp(.62rem, .5rem + .5vw, .82rem); letter-spacing: .16em; color: #08060f;
  background: linear-gradient(90deg, #2ef2ff, #c8ff2e); box-shadow: 0 0 22px -4px var(--fxc); }
.fx-win[data-fx-tier=super] .fx-tier { background: linear-gradient(90deg, #ff2ea6, #8b5cff); color: #fff; }
.fx-win.fx-perfect .fx-tier, .fx-win[data-fx-tier=jackpot] .fx-tier { background: linear-gradient(90deg, #ffd23f, #c8ff2e, #2ef2ff); color: #08060f; }
.fx-tier span { display: inline-block; animation: fxLetter .5s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(.25s + var(--i) * 28ms); }
@keyframes fxLetter { from { opacity: 0; transform: translateY(8px) scale(.6); } to { opacity: 1; transform: none; } }
.fx-win [class$="-sp-v"] { animation: fxVal 1.1s ease-out .2s both; text-shadow: 0 0 24px var(--fxc); white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes fxVal { 0% { transform: scale(.8); opacity: .3; } 45% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
/* real profit floating up from the card */
.fx-float { position: absolute; z-index: 6; translate: -50% 0; pointer-events: none; font-weight: 800; font-size: clamp(1rem, .8rem + 1vw, 1.5rem); color: #c8ff2e; text-shadow: 0 0 18px rgba(200,255,46,.8); white-space: nowrap; animation: fxFloat 2s ease-out both; }
@keyframes fxFloat { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 15% { opacity: 1; transform: translateY(-8px) scale(1.05); } 100% { opacity: 0; transform: translateY(-80px) scale(1); } }
/* soft stage glow pulse (no strobe) */
.fx-glow::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit; background: radial-gradient(60% 55% at 50% 50%, var(--fxg, rgba(46,242,255,.22)), transparent 70%); animation: fxGlow 1.8s ease-out both; }
.fx-glow[data-fx-tier=nice] { --fxg: rgba(200,255,46,.2); } .fx-glow[data-fx-tier=super] { --fxg: rgba(255,46,166,.22); } .fx-glow[data-fx-tier=jackpot] { --fxg: rgba(255,210,63,.26); }
@keyframes fxGlow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
html.rm .wr-splash, html.rm .rc-splash, html.rm .fx-win, html.rm .fx-win::before, html.rm .fx-shine, html.rm .fx-tier span, html.rm .fx-win [class$="-sp-v"] { animation: none !important; }
html.rm .fx-shine { display: none; }
@media (prefers-reduced-motion: reduce) { .wr-splash, .rc-splash, .fx-win, .fx-win::before, .fx-tier span, .fx-win [class$="-sp-v"] { animation: none !important; } .fx-shine { display: none; } }
/* bubble craps: the view grows with the layout instead of being pinned to the viewport */
html body #view-craps.view, html body #view-craps .table-layout, html body #view-craps .felt.bc-felt { height: auto !important; max-height: none !important; min-height: 0; }
html body #view-craps .table-layout { grid-template-rows: auto !important; }
html body #view-craps .felt.bc-felt > * { flex-shrink: 0; }
/* ===== poker: act-in-advance toggles ===== */
.pk-preact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.pk-pre-l { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.pk-preb { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text, #fff); font: 600 13px/1 var(--font-body, inherit); white-space: nowrap; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.pk-preb i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.4); flex: 0 0 auto; transition: background .2s, border-color .2s; }
.pk-preb:hover { border-color: rgba(46,242,255,.5); }
.pk-preb.on { border-color: rgba(200,255,46,.75); background: rgba(200,255,46,.1); box-shadow: 0 0 18px -6px rgba(200,255,46,.7); }
.pk-preb.on i { background: #c8ff2e; border-color: #c8ff2e; box-shadow: inset 0 0 0 2px #0b0d16; }
.pk-preb:focus-visible { outline: 2px solid #2ef2ff; outline-offset: 2px; }
/* ===== poker: table chat with hand history ===== */
.pk-chat { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-lg, 16px); background: var(--surface, rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.pk-ch-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pk-ch-h b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.pk-ch-list { flex: 1 1 auto; min-height: 120px; max-height: 220px; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.pk-ch-r { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; color: rgba(255,255,255,.86); }
.pk-ch-r b { color: #2ef2ff; font-weight: 700; margin-right: 4px; }
.pk-ch-r.me > b { color: #c8ff2e; }
.pk-ch-r.sys { padding: 6px 10px; border-radius: 10px; background: rgba(139,92,255,.08); border: 1px solid rgba(139,92,255,.18); color: rgba(255,255,255,.8); }
.pk-ch-r.sys.me { background: rgba(200,255,46,.07); border-color: rgba(200,255,46,.25); }
.pk-ch-r.sys b { color: #fff; margin: 0; }
.pk-ch-r.sys em { font-style: normal; color: rgba(255,255,255,.4); margin-right: 4px; font-size: 11px; }
.pk-ch-cards { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: 1px; }
.pk-cc { display: inline-block; padding: 1px 5px; border-radius: 5px; background: #f4f4f8; color: #111; font: 700 11px/1.35 var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
.pk-cc.red { color: #d0142c; }
.pk-ch-f { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.06); }
.pk-ch-f input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: inherit; font: inherit; font-size: 14px; }
.pk-ch-f input:focus { outline: none; border-color: rgba(46,242,255,.6); }
@media (min-width: 1180px) {
  .pk-room:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 320px); column-gap: 14px; row-gap: 10px; align-items: start; }
  .pk-room > * { grid-column: 1; }
  .pk-room > .pk-bar { grid-column: 1 / -1; }
  .pk-room > .pk-chat { grid-column: 2; grid-row: 2 / span 3; align-self: stretch; }
  .pk-room > .pk-chat .pk-ch-list { max-height: none; }
}
.pk-ch-h b { white-space: nowrap; } .pk-ch-h span { text-align: right; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1180px) {
  .pk-room:not([hidden]) { grid-template-columns: minmax(0, 1fr) clamp(260px, 20vw, 300px); row-gap: 8px; }
  .pk-room > .pk-felt { max-width: min(1500px, calc((100vh - 222px) * 1.75)); margin-top: 22px; }
  .pk-room > .pk-log { display: none; }
  .pk-room > .pk-chat { grid-row: 2 / span 2; }
  .pk-bar { min-height: 44px; }
}
.pk-bet .coin { display: none; }
.pk-bet.me { z-index: 3; }
/* placed chips match the rack chip colour */
.bc-chip[class*=" c"] { background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--c) 20% 55%, var(--edge) 57%); box-shadow: 0 0 6px var(--c); }
.wk-sides .bj-side.on .bj-side-spot[class*=" c"] { --c2: color-mix(in srgb, var(--c) 55%, transparent); }
.wk-sides .bj-side.on .bj-side-spot[class*=" c"] b { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* ===== poker room desktop: full-width room, table on the left, chat + actions stacked on the right ===== */
@media (min-width: 1180px) {
  html body #view-poker .pk-room:not([hidden]) {
    --pkw: min(calc(100vw - 56px), 1760px);
    width: var(--pkw); margin-left: calc((100% - var(--pkw)) / 2); margin-top: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 360px); grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 18px; row-gap: 10px; align-items: stretch;
    height: calc(100vh - 150px); min-height: 600px;
  }
  html body #view-poker .pk-room > .pk-bar { grid-column: 1 / -1; grid-row: 1; min-height: 44px; }
  html body #view-poker .pk-room > .pk-felt { grid-column: 1; grid-row: 2 / span 2; align-self: center; justify-self: center; width: 100%;
    max-width: min(100%, calc((100vh - 200px) * 1.75)); margin: 12px auto 0; }
  html body #view-poker .pk-room > .pk-chat { grid-column: 2; grid-row: 2; min-height: 0; }
  html body #view-poker .pk-room > .pk-chat .pk-ch-list { max-height: none; min-height: 0; }
  html body #view-poker .pk-room > .pk-log { display: none; }
  html body #view-poker .pk-room > .pk-act { grid-column: 2; grid-row: 3; min-height: 0; padding: 12px; gap: 8px; justify-content: stretch; align-content: start; }
  /* actions laid out for a 300-360px column */
  html body #view-poker .pk-act > .dim, html body #view-poker .pk-act > .pk-mine2 { flex-basis: 100%; text-align: center; }
  html body #view-poker .pk-act .pk-mine2 { display: block; font-size: .8rem; color: rgba(255,255,255,.78); }
  html body #view-poker .pk-act .pk-mine2 b { color: #9FF4FF; }
  html body #view-poker .pk-act > .btn.pk-fold, html body #view-poker .pk-act > .btn.pk-call { flex: 1 1 calc(50% - 4px); padding: 13px 10px; white-space: nowrap; }
  html body #view-poker .pk-act .pk-raise { flex: 1 1 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  html body #view-poker .pk-act .pk-pre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  html body #view-poker .pk-act .pk-pre .btn { padding: 8px 4px; white-space: nowrap; }
  html body #view-poker .pk-act .pk-raise input[type=range] { width: 100%; }
  html body #view-poker .pk-act .pk-rb { width: 100%; padding: 13px 10px; white-space: nowrap; }
  html body #view-poker .pk-act .pk-preact { justify-content: stretch; }
  html body #view-poker .pk-act .pk-pre-l { flex-basis: 100%; text-align: center; }
  html body #view-poker .pk-act .pk-preb { flex: 1 1 calc(50% - 4px); justify-content: center; }
  html body #view-poker .pk-act > .btn.sm { flex: 1 1 100%; }
  html body #view-poker .pk-felt .pk-mine { display: none !important; }
}

/* ===== slots v4: no cash-out panel or stops, full-width window like the arcade games, three-zone bar ===== */
body.slot-view .slot-layout { grid-template-columns: minmax(0, 1fr); }
body.slot-view .slot-layout > aside.market, .jp-tog { display: none !important; }
.jp-bar .jp-bl, .jp-bar .jp-br { display: contents; }
@media (min-width: 641px) {
  .jp-stage .jp-bar.jp-bar { grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-rows: auto; column-gap: 14px; row-gap: 10px; padding: 12px 18px; }
  .jp-stage .jp-bar .jp-bl, .jp-stage .jp-bar .jp-br { display: flex; align-items: center; min-width: 0; grid-row: 1; }
  .jp-stage .jp-bar .jp-bl { grid-column: 1; justify-self: start; gap: 8px; }
  .jp-stage .jp-bar .jp-br { grid-column: 5; justify-self: end; gap: 0; }
  .jp-stage .jp-bar .jp-br .jp-bal { min-width: 0; text-align: right; padding: 0 0 0 16px; white-space: nowrap; }
  .jp-stage .jp-bar .jp-br .jp-bal + .jp-bal { margin-left: 16px; border-left: 1px solid rgba(233,236,245,.14); }
  .jp-stage .jp-bar .jp-br .jp-bal b, .jp-stage .jp-bar .jp-br .jp-bal strong { display: block; white-space: nowrap; font-size: clamp(.82rem, 1.3cqi, 1rem); }
  .jp-stage .jp-bar .jp-bet { grid-column: 2; grid-row: 1; justify-self: center; }
  .jp-stage .jp-bar .jp-spin { grid-column: 3; grid-row: 1; margin: -4px 0; }
  .jp-stage .jp-bar .jp-auto { grid-column: 4; grid-row: 1; }
}
/* narrower stage: tools left and balances right on top, then bet / spin / auto centred */
@container jpst (max-width: 860px) {
  .jp-bar.jp-bar { grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-rows: auto auto; }
  .jp-bar.jp-bar .jp-bl { grid-column: 1 / 3; grid-row: 1; }
  .jp-bar.jp-bar .jp-br { grid-column: 3 / 6; grid-row: 1; }
  .jp-bar.jp-bar .jp-bet { grid-column: 2; grid-row: 2; }
  .jp-bar.jp-bar .jp-spin { grid-column: 3; grid-row: 2; }
  .jp-bar.jp-bar .jp-auto { grid-column: 4; grid-row: 2; }
}
/* full-width slot window: keep the three-column cabinet down to 901px */
@media (min-width: 901px) and (max-width: 1180px) {
  body.slot-view .jp-stage { grid-template-columns: minmax(96px, 1fr) minmax(0, 560px) minmax(110px, 1fr); grid-template-areas: "logo logo logo" "buy cab now" "bar bar bar"; row-gap: 0; }
  body.slot-view .jp-stage:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) { grid-template-columns: minmax(96px, .8fr) minmax(0, 500px) minmax(150px, 1.2fr); }
  body.slot-view .jp-now { grid-template-columns: 1fr; max-width: 150px; text-align: center; justify-items: center; align-items: start; padding: 10px; }
  body.slot-view .jp-now > img { width: 100%; }
  body.slot-view .jp-buybtn { width: 88px; height: 88px; font-size: 13px; justify-self: center; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side { display: grid; position: relative; z-index: 1; align-self: stretch; align-content: end; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now { grid-area: auto; position: absolute; left: 0; right: 0; bottom: 6px; margin: auto; z-index: 2; grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; align-items: center; padding: 6px 8px; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now > img, body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now .jp-eq { display: none; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-cab { position: relative; z-index: 2; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now { left: auto; right: 4px; max-width: calc(100% - 8px); min-width: 0; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now b { font-size: clamp(12px, 1.5vw, 16px); }
}
@media (min-width: 901px) {
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side { min-height: 0; }
  body.slot-view :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .oc-char { position: absolute; right: 0; bottom: -46px; top: auto; height: calc(100% + 150px); width: auto; max-width: 260%; margin: 0; opacity: 1; z-index: 0; object-fit: contain; object-position: right bottom; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(0deg, transparent, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(0deg, transparent, #000 16%); mask-composite: intersect; }
}
/* phone slot bar: tools + auto on top, bet beside Spin, then balance and last win */
@media (max-width: 640px) {
  .jp-stage .jp-bar.jp-bar { display: grid; grid-template-columns: repeat(4, 40px) minmax(0, 1fr) 84px; grid-template-areas: none; grid-template-rows: auto auto auto; gap: 10px 8px; align-items: center; }
  .jp-stage .jp-bar.jp-bar > .jp-ico { grid-area: auto !important; grid-row: 1 !important; width: 40px !important; height: 40px !important; position: static; order: 0 !important; margin: 0; }
  .jp-stage .jp-bar.jp-bar > .jp-ico:nth-child(1) { grid-column: 1 !important; }
  .jp-stage .jp-bar.jp-bar > .jp-ico:nth-child(2) { grid-column: 2 !important; }
  .jp-stage .jp-bar.jp-bar > .jp-ico:nth-child(3) { grid-column: 3 !important; }
  .jp-stage .jp-bar.jp-bar > .jp-ico:nth-child(4) { grid-column: 4 !important; }
  .jp-stage .jp-bar.jp-bar > .jp-auto { grid-area: auto !important; grid-row: 1 !important; grid-column: 6 !important; justify-self: center; position: relative; margin: 0; }
  .jp-stage .jp-bar.jp-bar > .jp-bet { grid-area: auto !important; grid-row: 2 !important; grid-column: 1 / 6 !important; min-width: 0; align-self: center; justify-self: stretch; gap: 6px; padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; }
  .jp-stage .jp-bar.jp-bar > .jp-bet > .lbl { display: none; }
  .jp-stage .jp-bar.jp-bar > .jp-bet .jp-bet-r { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; justify-content: space-between; gap: 4px; }
  .jp-stage .jp-bar.jp-bar > .jp-bet .jp-step { width: 28px; height: 28px; flex: 0 0 28px; }
  .jp-stage .jp-bar.jp-bar > .jp-bet .mono { white-space: nowrap; min-width: 0; overflow: visible; font-size: clamp(12px, 3.5vw, 14px); text-align: center; flex: 1 1 auto; }
  .jp-stage .jp-bar.jp-bar > .jp-bet .mono.stk-ed::after { margin-left: 3px; }
  .jp-stage .jp-bar.jp-bar > .jp-bet .jp-max { flex: 0 0 auto; padding: 0 8px; height: 30px; }
  .jp-stage .jp-bar.jp-bar > .jp-spin { grid-area: auto !important; grid-row: 2 / 4 !important; grid-column: 6 !important; width: 80px !important; height: 80px !important; margin: 0 !important; justify-self: center; position: relative; inset: auto; transform: none; }
  .jp-stage .jp-bar.jp-bar > .jp-bal { grid-area: auto !important; grid-row: 3 !important; grid-column: 1 / 3 !important; min-width: 0 !important; text-align: left; white-space: nowrap; padding: 0; }
  .jp-stage .jp-bar.jp-bar > .jp-bal.jp-last { grid-column: 3 / 6 !important; text-align: right; justify-self: end; }
}
/* breathing room around Spin: bet box, Spin and auto no longer touch */
@media (min-width: 641px) {
  .jp-stage .jp-bar.jp-bar { column-gap: 14px; }
  .jp-stage .jp-bar.jp-bar > .jp-spin { margin-inline: clamp(12px, 1.6vw, 22px) !important; }
  .jp-stage .jp-bar.jp-bar > .jp-auto { margin-left: 4px; }
  .jp-stage .jp-bar.jp-bar > .jp-bet { margin-right: 4px; }
}
@media (max-width: 640px) {
  .jp-stage .jp-bar.jp-bar { column-gap: 12px; }
}
/* SWEET SURGE + CHROME WAYS: logo moves to the left column so the reels use the full height */
@media (min-width: 901px) {
  body.slot-view .jp-stage:is(.th-ss, .th-cw) { grid-template-columns: minmax(150px, 1fr) minmax(0, 700px) minmax(150px, 1fr); grid-template-areas: "logo cab now" "buy cab now" "bar bar bar"; grid-template-rows: auto 1fr auto; row-gap: 0; padding-top: 14px; }
  body.slot-view .jp-stage:is(.th-ss, .th-cw) > .jp-logo { grid-area: logo; align-self: start; justify-self: center; height: clamp(84px, 15svh, 140px); max-width: 92%; margin: 6px 0 0; }
  body.slot-view .jp-stage:is(.th-ss, .th-cw) > .jp-buybtn { grid-area: buy; align-self: center; }
  body.slot-view .jp-stage:is(.th-ss, .th-cw) > .jp-cab { grid-area: cab; align-self: start; }
  body.slot-view .jp-stage:is(.th-ss, .th-cw) > .xs-side, body.slot-view .jp-stage:is(.th-ss, .th-cw) > .jp-now { grid-area: now; align-self: center; }
}
/* roulette: the hover/payout line keeps one fixed height so the board never shifts when bets are placed */
.ro-bar { min-height: 30px; align-items: center; }
.ro-hover { height: 1.6em; line-height: 1.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-hover :is(img, svg, .coin, i) { height: 1em !important; width: auto; max-height: 1em; vertical-align: -0.12em; margin: 0 2px 0 0; }
/* Bubble Craps: last roll + running total, a compact strip under the bet line */
#view-craps .bc-res { margin-top: 6px; justify-content: center; gap: 6px 22px; }
#view-craps .bc-res b { white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-craps .bc-res b.up { color: #C8FF2E; }
#view-craps .bc-res b.dn { color: #FF6B8A; }
#view-craps .bc-res .bc-tw { border-radius: 8px; padding: 2px 8px; margin: -2px -8px; }
#view-craps .bc-res .bc-tw.pop { animation: bcTwPop .9s ease-out; }
@keyframes bcTwPop { 0% { box-shadow: 0 0 0 0 rgba(200,255,46,0); } 25% { box-shadow: 0 0 0 1px rgba(200,255,46,.5), 0 0 18px rgba(200,255,46,.35); } 100% { box-shadow: 0 0 0 0 rgba(200,255,46,0); } }
html.rm #view-craps .bc-res .bc-tw.pop { animation: none; }
/* ===== Bubble Craps win card: fixed to the visible screen, scales to fit ===== */
.bw-fx { position: fixed; left: var(--bw-l, 0); width: var(--bw-w, 100vw); top: var(--bw-t, 0); bottom: 0; z-index: 60; display: grid; place-items: center; padding: 16px; cursor: pointer; animation: bwIn .32s ease-out both; }
.bw-fx.out { animation: bwOut .3s ease-in both; }
@keyframes bwIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bwOut { to { opacity: 0; } }
.bw-scrim { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, rgba(10,8,30,.72), rgba(4,4,12,.86)); backdrop-filter: blur(3px); }
.bw-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.bw-coin { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #C8FF2E 45%, #6fa400); box-shadow: 0 0 10px rgba(200,255,46,.45); }
.bw-coin.g { background: radial-gradient(circle at 35% 30%, #fff, #2EF2FF 45%, #0f7f99); box-shadow: 0 0 10px rgba(46,242,255,.45); }
.bw-card { --acc: #C8FF2E; --acc2: #2EF2FF; position: relative; width: min(520px, 100%); max-height: 100%; overflow: hidden; display: grid; justify-items: center; gap: clamp(6px, 1.4svh, 12px); padding: clamp(16px, 3svh, 28px) clamp(16px, 3vw, 30px); border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(22,18,52,.94), rgba(8,8,22,.96)) padding-box, linear-gradient(140deg, var(--acc), var(--acc2) 50%, #8C6BFF) border-box; border: 1.5px solid transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(46,242,255,.18); animation: bwCard .55s cubic-bezier(.2,.9,.25,1.15) both; }
.t-super .bw-card { --acc: #FFA3EC; --acc2: #8C6BFF; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 70px rgba(255,163,236,.25); }
.t-jackpot .bw-card { --acc: #FFD23F; --acc2: #FF8A3D; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,210,63,.3); }
@keyframes bwCard { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.bw-top { display: flex; align-items: center; gap: 12px; }
.bw-dice { display: inline-flex; gap: 6px; }
.bw-die { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: clamp(28px, 4.4svh, 38px); aspect-ratio: 1; padding: 4px; border-radius: 8px; background: linear-gradient(#fff, #e6e9f2); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bw-die b { border-radius: 50%; }
.bw-die b.on { background: #E6185A; }
.bw-roll { display: grid; text-align: left; line-height: 1.15; }
.bw-roll em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233,236,245,.6); }
.bw-roll b { font: 700 clamp(16px, 2.6svh, 22px)/1.1 var(--font-display, inherit); color: #fff; }
.bw-title { font: 800 clamp(26px, 6svh, 46px)/1 var(--font-display, inherit); letter-spacing: .04em; background: linear-gradient(180deg, #fff 10%, var(--acc) 60%, var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(46,242,255,.25)); white-space: nowrap; max-width: 100%; }
.bw-amt { font-size: clamp(26px, 6.4svh, 50px); font-weight: 700; color: #fff; white-space: nowrap; max-width: 100%; text-shadow: 0 0 22px rgba(200,255,46,.35); }
.bw-amt.land { animation: bwLand .5s ease-out; }
@keyframes bwLand { 40% { transform: scale(1.06); } }
.bw-amt .coin { width: .8em; height: .8em; }
.bw-x { font-size: 12px; color: rgba(233,236,245,.7); }
.bw-list { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.bw-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(5px, 1svh, 8px) 12px; border-radius: 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); font-size: clamp(12px, 1.8svh, 14px); min-width: 0; }
.bw-list li span { color: #E9ECF5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bw-list li b { color: var(--acc); white-space: nowrap; font-weight: 600; }
.bw-list li.bw-more span { color: rgba(233,236,245,.6); }
.bw-list .coin, .bw-foot .coin { width: 12px; height: 12px; }
.bw-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; width: 100%; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.bw-foot span { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.bw-foot em { font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(233,236,245,.55); }
.bw-foot b.up { color: #C8FF2E; } .bw-foot b.dn { color: #FF6B8A; }
.bw-tap { font-size: 11px; color: rgba(233,236,245,.45); }
@media (max-height: 560px) { .bw-list li:nth-child(n+4):not(.bw-more) { display: none; } .bw-tap, .bw-x { display: none; } }
html.rm .bw-fx, html.rm .bw-card, html.rm .bw-amt.land { animation: none !important; }

/* ===== New WICK slots: BOUNTY RUSH, MECHA MELTDOWN, NEON PHARAOH, PRISM HEIST ===== */
.th-br { --gold: #FFB02E; --gold2: #2EF2FF; --red: #FF7A1A; --glow: rgba(46,242,255,.32); --edge: rgba(255,176,46,.34); --bgimg: url(assets/bounty/bg.webp); --font-x: 'Chakra Petch', sans-serif; background-image: url(assets/bounty/bg.webp); border-color: rgba(255,176,46,.35); }
.th-mm { --gold: #FF7A1A; --gold2: #FF3B3B; --red: #3BB8FF; --glow: rgba(255,90,30,.36); --edge: rgba(255,122,26,.36); --bgimg: url(assets/mecha/bg.webp); --font-x: 'Orbitron', sans-serif; background-image: url(assets/mecha/bg.webp); border-color: rgba(255,122,26,.38); }
.th-np { --gold: #FFD23F; --gold2: #3B5BFF; --red: #FF3BD4; --glow: rgba(255,210,63,.3); --edge: rgba(255,210,63,.36); --bgimg: url(assets/pharaoh/bg.webp); --font-x: 'Cinzel', serif; background-image: url(assets/pharaoh/bg.webp); border-color: rgba(255,210,63,.38); }
.th-px { --gold: #2EE89A; --gold2: #FFD23F; --red: #B28CFF; --glow: rgba(46,232,154,.3); --edge: rgba(46,232,154,.34); --bgimg: url(assets/prism/bg.webp); --font-x: 'Chakra Petch', sans-serif; background-image: url(assets/prism/bg.webp); border-color: rgba(46,232,154,.36); }
:is(.th-br, .th-mm, .th-np, .th-px, .th-ls)::before { background: radial-gradient(60% 55% at 50% 52%, rgba(4,6,14,.08), rgba(4,4,12,.7)); }
.th-br.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(255,150,30,.16), rgba(10,6,2,.82)); }
.th-mm.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(255,60,20,.2), rgba(14,2,0,.84)); }
.th-np.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(80,60,255,.2), rgba(4,2,20,.84)); }
.th-px.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(46,232,154,.16), rgba(0,12,8,.84)); }
.th-br .oc-char { filter: drop-shadow(0 0 20px rgba(46,242,255,.32)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); }
.th-mm .oc-char { filter: drop-shadow(0 0 20px rgba(255,100,30,.38)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); }
.th-np .oc-char { filter: drop-shadow(0 0 20px rgba(255,210,63,.32)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); }
.th-px .oc-char { filter: drop-shadow(0 0 20px rgba(46,232,154,.32)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); }
.th-br .tg-col, .th-br .sl-reel { background: linear-gradient(180deg, rgba(46,242,255,.04), rgba(255,176,46,.06) 50%, rgba(46,242,255,.03)); border-color: rgba(46,242,255,.1); }
.th-mm .tg-col { background: linear-gradient(180deg, rgba(255,122,26,.04), rgba(255,59,59,.07) 50%, rgba(255,122,26,.03)); border-color: rgba(255,122,26,.1); }
.th-np .sl-reel { background: linear-gradient(180deg, rgba(59,91,255,.06), rgba(255,210,63,.05) 50%, rgba(255,59,212,.04)); border-color: rgba(255,210,63,.1); }
.th-px .tg-col { background: linear-gradient(180deg, rgba(46,232,154,.03), rgba(255,210,63,.04) 50%, rgba(46,232,154,.03)); border-color: rgba(46,232,154,.08); }
:is(.th-br, .th-mm, .th-np, .th-px, .th-ls) :is(.sym-SC, .sym-CX, .sym-PR) .sl-art { animation: skpulse 1.6s ease-in-out infinite; }
.oc-char.stomp { animation: mmstomp .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes mmstomp { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.04); } 60% { transform: translateY(6px) scale(.98); } 100% { transform: none; } }
/* line slots: win lines over the reels */
.xs-lines { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); z-index: 3; }
.xs-lines polyline { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; color: var(--c); vector-effect: non-scaling-stroke; }
:is(.br-grid, .np-grid) .sl-cell.win .sl-art { animation: skpulse .8s ease-in-out infinite; }
/* chip values: real coin amounts at the current bet */
.xs-cv { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; max-width: 92%; overflow: hidden; text-overflow: clip; white-space: nowrap; font-family: 'Chakra Petch', sans-serif; font-weight: 800; font-size: clamp(9px, 1.45vw, 16px); line-height: 1.15; color: #2a1600; background: linear-gradient(#FFF1C2, #FFB02E); padding: 1px 6px; border-radius: 6px; box-shadow: 0 0 10px rgba(255,176,46,.55), 0 2px 0 rgba(0,0,0,.35); letter-spacing: .01em; }
.br-sym.hi .xs-cv { color: #fff; background: linear-gradient(#D9C2FF, #7A3BFF); box-shadow: 0 0 12px rgba(160,100,255,.7), 0 2px 0 rgba(0,0,0,.35); }
.br-sym.got .sl-art { animation: brgot .5s ease-out; filter: brightness(1.4); }
@keyframes brgot { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.br-sym.fire .sl-art { filter: drop-shadow(0 0 12px #2EF2FF) brightness(1.2); }
.br-meter { gap: 6px; }
.br-pips { display: inline-flex; gap: 4px; }
.br-pips i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(46,242,255,.6); background: rgba(46,242,255,.08); }
.br-pips i.on { background: #2EF2FF; box-shadow: 0 0 8px #2EF2FF; }
.xs-chip.pop { animation: xspop .5s ease-out; }
@keyframes xspop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* MECHA: tumble multiplier ladder */
.mm-lad { gap: 4px; padding: 3px 5px; }
.mm-lad i { font-style: normal; font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 12px; padding: 2px 7px; border-radius: 6px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); border: 1px solid rgba(255,122,26,.2); white-space: nowrap; }
.mm-lad i.past { color: rgba(255,200,150,.8); }
.mm-lad i.on { color: #1a0600; background: linear-gradient(#FFD3A0, #FF7A1A); box-shadow: 0 0 12px rgba(255,122,26,.7); border-color: transparent; }
.mm-lad.pop { animation: xspop .45s ease-out; }
.mm-x { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 800; color: #FF7A1A; }
.mm-sym.slam .sl-art { animation: mmslam .45s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 0 14px #FFB02E); }
@keyframes mmslam { 0% { transform: translateY(-40%) scale(1.5); opacity: 0; } 60% { transform: translateY(4%) scale(.95); opacity: 1; } 100% { transform: none; } }
/* PHARAOH: expanding symbol */
.np-exp { gap: 6px; }
.np-ex-i { display: inline-flex; gap: 4px; }
.np-ex-i img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,210,63,.7)); }
.np-grid .sl-reel { position: relative; }
.np-grid .sl-reel.exp { box-shadow: inset 0 0 0 2px rgba(255,210,63,.85), 0 0 22px rgba(255,210,63,.45); }
.np-grow { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 50%, rgba(255,210,63,.28), rgba(10,6,30,.92)); border-radius: inherit; animation: npgrow .45s cubic-bezier(.2,1.3,.4,1); }
.np-grow img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(255,210,63,.75)); }
@keyframes npgrow { from { transform: scaleY(.33); opacity: .2; } to { transform: none; opacity: 1; } }
.np-reveal { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; text-align: center; background: radial-gradient(70% 70% at 50% 50%, rgba(30,20,90,.9), rgba(4,2,16,.95)); border-radius: inherit; }
.np-reveal.on { animation: npin .5s ease-out; }
.np-rv-cx { width: clamp(60px, 14vw, 120px); height: auto; filter: drop-shadow(0 0 18px rgba(255,210,63,.8)); }
.np-reveal .lbl { font-family: 'Cinzel', serif; font-size: clamp(14px, 2vw, 20px); color: #FFD23F; letter-spacing: .08em; }
.np-rv-e { display: flex; gap: clamp(10px, 3vw, 28px); justify-content: center; flex-wrap: wrap; }
.np-rv-e span { display: grid; justify-items: center; gap: 4px; }
.np-rv-e img { width: clamp(60px, 12vw, 110px); height: auto; filter: drop-shadow(0 0 14px rgba(255,59,212,.6)); animation: npglow 1.4s ease-in-out infinite alternate; }
.np-rv-e b { font-family: 'Cinzel', serif; font-size: clamp(12px, 1.6vw, 16px); color: #fff; }
@keyframes npin { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes npglow { to { filter: drop-shadow(0 0 22px rgba(255,210,63,.85)); } }
/* PRISM: Gold Squares under the symbols */
.px-grid { position: relative; }
.px-grid > .tg-col { position: relative; z-index: 1; background: transparent; }
.px-gold { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-rows: repeat(5, 1fr); grid-template-columns: repeat(6, 1fr); grid-auto-flow: column; column-gap: inherit; row-gap: 0; pointer-events: none; }
.px-gold i { position: relative; margin: 2px; border-radius: 8px; }
.px-gold i.g { background: radial-gradient(80% 80% at 50% 40%, rgba(255,226,120,.42), rgba(200,140,20,.2)); box-shadow: inset 0 0 0 2px rgba(255,210,63,.7), 0 0 10px rgba(255,210,63,.3); }
.px-gold i.new { animation: pxnew .6s ease-out; }
@keyframes pxnew { 0% { box-shadow: inset 0 0 0 2px #fff, 0 0 26px rgba(255,210,63,.9); } 100% { } }
.px-gold i b { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; font-family: 'Chakra Petch', sans-serif; font-weight: 800; font-size: clamp(9px, 1.35vw, 15px); line-height: 1; white-space: nowrap; overflow: hidden; color: transparent; }
.px-gold i.coin, .px-gold i.clov { z-index: 2; }
.px-gold i.coin b { color: #2a1600; background: center / 82% no-repeat url(assets/prism/CN.webp); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.px-gold i.clov b { color: #fff; background: center / 82% no-repeat url(assets/prism/CV.webp); text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.px-gold i.hot { box-shadow: inset 0 0 0 2px #5CFF6A, 0 0 16px rgba(92,255,106,.6); }
.px-grid.reveal > .tg-col { opacity: .25; }
.th-px .px-sym.fire .sl-art { filter: drop-shadow(0 0 16px #fff) brightness(1.3); }
.px-grid.reveal > .px-gold { z-index: 2; }
.xs-chip:is(.mm-lad, .br-meter, .np-exp):not([hidden]) { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap; }

/* Baccarat: four side bets wrap two per row; ride bar sits clear of the felt edge */
/* Baccarat side bets: four compact bets in one row (spot on top, name and payout under it) so the chips and Deal stay on screen.
   During the hand only the bets you placed show, smaller still. */
#bSides.wk-sides.bj-sides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; align-items: start; gap: 8px 10px; max-width: 660px; padding: 14px 12px 8px; margin: 2px auto 6px; }
#bSides.wk-sides.bj-sides .bj-side { width: 100%; max-width: none; flex: none; flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px; padding: 2px; text-align: center; border-radius: 14px; }
#bSides.wk-sides.bj-sides .bj-side-spot { width: 46px; height: 46px; }
#bSides.wk-sides.bj-sides .bj-side-tx { align-items: center; gap: 1px; }
#bSides.wk-sides.bj-sides .bj-side-n { font-size: 10.5px; letter-spacing: .1em; line-height: 1.2; }
#bSides.wk-sides.bj-sides .bj-side-p { font-size: 10px; line-height: 1.25; }
#bSides.wk-sides.bj-sides .bj-side-r { left: 50%; top: -10px; }
#bSides.wk-sides.bj-sides .bj-sclear { grid-column: 1 / -1; justify-self: center; min-height: 0; padding: 4px 14px; font-size: 12px; }
#bSides.wk-sides.bj-sides.locked { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 26px; padding: 12px 14px 6px; }
#bSides.wk-sides.bj-sides.locked .bj-side { width: auto; flex: 0 1 auto; flex-direction: row; gap: 8px; text-align: left; }
#bSides.wk-sides.bj-sides.locked .bj-side-tx { align-items: flex-start; }
#bSides.wk-sides.bj-sides.locked .bj-side-spot { width: 34px; height: 34px; }
#bSides.wk-sides.bj-sides.locked .bj-side-spot b { font-size: 9px; }
#bSides.wk-sides.bj-sides.locked .bj-side-p { display: none; }
#bSides.wk-sides.bj-sides.locked .bj-side-r { left: 17px; }
@media (max-width: 640px) {
  #bSides.wk-sides.bj-sides:not(.locked) { grid-template-columns: 1fr 1fr !important; gap: 18px 6px; padding: 18px 6px 8px; }
  #bSides.wk-sides.bj-sides .bj-side-spot { width: 40px; height: 40px; }
  #bSides.wk-sides.bj-sides .bj-side-n { font-size: 9px; letter-spacing: .06em; }
  #bSides.wk-sides.bj-sides .bj-side-p { font-size: 0; }
  #bSides.wk-sides.bj-sides .bj-side-p em { display: block; font-size: 9.5px; }
}
/* bets you didn't place stay hidden during a hand on every table */
.wk-sides.bj-sides.locked .bj-side.idle { display: none; }
/* table decision bars (Let it ride / Cash out / Bet 4x...) sit clear of the bottom edge of the felt */
:is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .controls.mid:not([hidden]) { box-sizing: border-box; padding-bottom: clamp(18px, 3.2vh, 30px); }
/* status lines with coin amounts keep their word spaces */
/* Now playing box on the character slots: keep it one compact row like Overclock, never tall and narrow */
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now { max-width: min(200px, calc(100% - 8px)) !important; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now > div { min-width: 0; overflow: hidden; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now b,
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now b { font-size: clamp(11px, 1.15vw, 14px) !important; letter-spacing: .03em; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now .jp-eq { display: none !important; }
/* Three Card Poker: dealer row has three cards, two bet spots */
.lir-comm.tcp-dealer { grid-template-columns: repeat(3, 78px); }
@media (max-width: 760px) { .lir-comm.tcp-dealer { grid-template-columns: repeat(3, 64px); } }
#view-tcp .lir-comm.tcp-dealer { grid-template-columns: repeat(3, var(--cw, 78px)) !important; }
#view-tcp .tcp-spots { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
#view-tcp .uspot.push { opacity: .85; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now { min-width: 0; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now > div { flex: 1 1 auto; min-width: 0; overflow: hidden; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now > div > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now > .jp-ico, :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now > img { flex: 0 0 auto; }
@media (max-width: 760px) { :is(.th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now > div > b { font-size: clamp(11px, 3.4vw, 14px) !important; } }
:is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now > div { justify-self: stretch; width: auto; }
@media (max-width: 760px) { :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .jp-now { grid-template-columns: auto minmax(0, 1fr) auto !important; } }
@media (max-width: 760px) { :is(.th-oc, .th-br, .th-mm, .th-np, .th-px, .th-ls) .xs-side .jp-now { max-width: min(236px, calc(100% - 8px)) !important; } }

/* Limbo: recent results sit in their own card on the side panel (desktop) so they never cover the dial (newest first) */
.lb-recent { display: none; }
@media (min-width: 1025px) {
  #view-limbo #lbHist { display: none; }
  #view-limbo .dealer-panel .lb-recent { display: grid; gap: 10px; margin: 14px 0 4px; padding: 14px 16px; border-radius: 16px; background: rgba(12,12,26,.55); border: 1px solid rgba(255,255,255,.08); }
  #view-limbo .dealer-panel .lb-recent.empty { display: none; }
  .lb-recent-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .lb-recent-h span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(200,208,245,.7); }
  .lb-recent-h small { font-size: 10px; color: rgba(200,208,245,.4); }
  .lb-recent-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .lb-recent-g span { min-width: 0; padding: 4px 0; border-radius: 999px; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(255,255,255,.12); background: rgba(12,12,26,.55); color: #c9cde0; }
  .lb-recent-g span.hi { color: #d9ff80; border-color: rgba(200,255,46,.35); }
  .lb-recent-g span.lo { color: #ff9aae; border-color: rgba(255,59,92,.3); }
  .lb-recent-g span:nth-child(n+13) { display: none; }
}

/* ---------- Neon Block Blast + Neon Mini Golf ---------- */
@media (max-width: 1000px) { .lt-grid.arc5 .lt:last-child { grid-column: span 1; } }
@media (max-width: 640px) { .lt-grid.arc5 .lt:last-child { grid-column: span 1; } }
.ax-blast .ax-h2 { background: linear-gradient(100deg, #fff 0%, #ff3fb4 40%, #2ef2ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-golf .ax-h2 { background: linear-gradient(100deg, #fff 0%, #c8ff2e 42%, #2ef2ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-blast .wr-stage { border-color: rgba(255,63,180,.3); box-shadow: 0 0 0 1px rgba(46,242,255,.08), 0 24px 70px -24px rgba(255,63,180,.38); height: clamp(460px, 68vh, 640px); }
.ax-golf .wr-stage { border-color: rgba(200,255,46,.28); box-shadow: 0 0 0 1px rgba(46,242,255,.08), 0 24px 70px -24px rgba(46,242,255,.36); height: clamp(440px, 66vh, 620px); }
.ax-blast .wr-stage, .ax-golf .wr-stage { cursor: default; }
.ax-golf .wr-stage canvas { cursor: crosshair; }
.ax-golf .wr-stage canvas.gf-gl { pointer-events: none; cursor: default; }
.ax-golf .wr-stage.g3 #gfCanvas { cursor: grab; }
.ax-golf .wr-stage.g3 #gfCanvas:active { cursor: grabbing; }
.ax-blast .wr-cash.live, .ax-blast .wr-go.live { background: linear-gradient(100deg, #ff3fb4, #2ef2ff); color: #fff; }
.ax-golf .wr-cash.live, .ax-golf .wr-go.live { background: linear-gradient(100deg, #c8ff2e, #2ef2ff); color: #061016; }
.ax-golf .st-dropb { background: linear-gradient(100deg, #c8ff2e, #2ef2ff) !important; color: #061016 !important; box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 10px 34px -8px rgba(46,242,255,.8) !important; }
.ax-blast .wr-cash.wait:disabled, .ax-golf .wr-cash.wait:disabled { filter: none; background: rgba(8,6,24,.7); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.18); box-shadow: none; font-size: .86rem; letter-spacing: .12em; }
.ax-blast .wr-pop, .ax-golf .wr-pop { top: 44%; }
.ax-blast .wr-sub, .ax-golf .wr-sub { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); line-height: 1.35; }
/* wide stage: the multiplier, bet and buttons live in a left column so the grid or course gets the full height */
.ax-blast .wr-stage.wide .wr-top, .ax-golf .wr-stage.wide .wr-top { left: 0; right: auto; width: var(--lw); top: 26px; padding: 0 22px; align-items: flex-start; text-align: left; box-sizing: border-box; }
.ax-blast .wr-stage.wide .wr-mult, .ax-golf .wr-stage.wide .wr-mult { font-size: clamp(1.9rem, 1rem + 2.2vw, 3.1rem); max-width: 100%; }
.ax-blast .wr-stage.wide .wr-sub, .ax-golf .wr-stage.wide .wr-sub { justify-content: flex-start; max-width: 100%; font-size: .82rem; }
.ax-blast .wr-stage.wide .ax-ctl, .ax-golf .wr-stage.wide .ax-ctl { left: 18px; right: auto; width: calc(var(--lw) - 36px); bottom: 20px; flex-direction: column; align-items: stretch; }
.ax-blast .wr-stage.wide .ax-ctl .wr-cash, .ax-golf .wr-stage.wide .ax-ctl .wr-cash { flex: none; width: 100%; min-width: 0; }
.ax-golf .wr-stage.wide .st-ctl.two .st-dropb { order: 1; height: 58px; }
.ax-golf .wr-stage.wide .st-ctl.two .st-cashb { order: 2; height: 46px; }
.ax-blast .wr-stage.wide .hb, .ax-golf .wr-stage.wide .hb { left: calc(var(--lw) / 2); bottom: 92px; max-width: calc(var(--lw) - 24px); }
.ax-blast .wr-stage.wide .wr-pop, .ax-golf .wr-stage.wide .wr-pop { left: var(--lw); }
.ax-blast .wr-stage.wide .wr-splash, .ax-golf .wr-stage.wide .wr-splash { left: calc(50% + var(--lw) / 2); max-width: calc(100% - var(--lw) - 40px); }
@media (max-width: 760px) {
  .ax-blast .wr-stage { height: clamp(560px, 168vw, 720px); }
  .ax-golf .wr-stage { height: clamp(560px, 165vw, 700px); }
  .ax-blast .wr-mult, .ax-golf .wr-mult { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .ax-blast .wr-sub, .ax-golf .wr-sub { font-size: .74rem; margin-top: 4px; }
  .ax-blast .wr-top, .ax-golf .wr-top { top: 10px; }
}
@media (max-width: 420px) { .sx-cl-t em { margin-left: 0; margin-top: 3px; } .sx-cl-t { display: flex; flex-direction: column; align-items: center; } }
/* Neon Golf Duel */
.ar-stage.gd-on { height: min(72vh, 660px); touch-action: pan-y; background: #05030f; }
.ar-stage.gd-on .gd-gl { pointer-events: none; }
.ar-stage.gd-on .gd-ui { cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ar-stage.gd-on .gd-ui:active { cursor: grabbing; }
@media (max-width: 560px) { .ar-stage.gd-on { height: calc(100dvh - 240px); min-height: 420px; } }

/* ---------- Neon Most Wanted ---------- */
.ar-stage .mw-hud { position: absolute; top: 78px; left: 16px; width: 210px; display: grid; gap: 7px; padding: 10px 12px; border-radius: 14px; background: rgba(5,6,10,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); pointer-events: none; z-index: 3; }
.mw-hud .mw-role { justify-self: start; font: 700 .7rem/1 var(--font-display, 'Clash Display'), Satoshi, sans-serif; letter-spacing: .14em; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.mw-hud .mw-role.run { color: #2EF2FF; background: rgba(46,242,255,.1); border: 1px solid rgba(46,242,255,.4); }
.mw-hud .mw-role.hunt { color: #C8FF2E; background: rgba(200,255,46,.1); border: 1px solid rgba(200,255,46,.4); }
.mw-hud .mw-rd { font-size: .66rem; letter-spacing: .14em; color: var(--steel-2, #9aa3b8); }
.mw-hud small { display: block; font-size: .58rem; letter-spacing: .14em; color: var(--steel, #7f88a0); margin-bottom: 3px; }
.mw-hud .mw-arm, .mw-hud .mw-dist { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.mw-hud .mw-arm small, .mw-hud .mw-dist small { grid-column: 1 / -1; }
.mw-hud .mw-arm span, .mw-hud .mw-dist span { grid-column: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.mw-hud .mw-dist span { grid-column: 1 / -1; height: 5px; }
.mw-hud .mw-arm i, .mw-hud .mw-dist i { display: block; height: 100%; width: 100%; border-radius: inherit; transition: width .15s linear; }
.mw-hud .mw-arm i { background: linear-gradient(90deg, #2EF2FF, #8C6BFF); }
.mw-hud .mw-arm.low i { background: linear-gradient(90deg, #FF4F7B, #FF8A5B); }
.mw-hud .mw-arm b { font-size: .85rem; color: var(--bone, #F2F4FA); min-width: 3ch; text-align: right; }
.mw-hud .mw-dist i { width: 0; background: rgba(232,240,255,.55); }
.ar-stage .mw-ban { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px 20px; border-radius: 18px; background: rgba(6,8,16,.78); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); pointer-events: none; z-index: 4; overflow-wrap: anywhere; }
.mw-ban small { font-size: .66rem; letter-spacing: .16em; color: var(--steel-2, #9aa3b8); }
.mw-ban b { font: 700 clamp(1.25rem, 5vw, 1.9rem)/1.05 var(--font-display, 'Clash Display'), Satoshi, sans-serif; letter-spacing: .04em; color: var(--bone, #F2F4FA); }
.mw-ban span { font-size: .85rem; line-height: 1.35; color: var(--steel-2, #b4bccd); }
.mw-ban.good { border-color: rgba(200,255,46,.45); } .mw-ban.good b { color: #C8FF2E; text-shadow: 0 0 16px rgba(200,255,46,.35); }
.mw-ban.bad { border-color: rgba(255,79,123,.45); } .mw-ban.bad b { color: #FF7A9A; }
html:not(.rm) .mw-ban.in { animation: mwIn .45s ease-out both; }
@keyframes mwIn { from { opacity: 0; transform: translate(-50%, -42%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 560px) {
  .ar-stage .mw-hud { top: 64px; left: 10px; right: auto; width: min(230px, calc(100% - 128px)); padding: 6px 8px; gap: 4px 8px; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .mw-hud .mw-role { font-size: .56rem; padding: 4px 7px; letter-spacing: .08em; }
  .mw-hud .mw-rd, .mw-hud small { display: none; }
  .mw-hud .mw-arm { grid-template-columns: minmax(0, 1fr) auto; }
  .mw-hud .mw-arm b { font-size: .72rem; }
  .mw-hud .mw-dist { grid-column: 1 / -1; }
  .mw-hud .mw-dist span { height: 3px; }
  .mw-ban span { font-size: .78rem; }
}
/* lobby: wanted level and the board */
.ar-ride:has(.mw-card) { display: block; }
.mw-card { display: grid; gap: 10px; }
.mw-card-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; }
.mw-card-h > div { display: grid; gap: 4px; }
.mw-stars { display: inline-flex; gap: 3px; }
.mw-stars i { width: 13px; height: 13px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: rgba(255,255,255,.14); }
.mw-card-h .mw-stars i { width: 20px; height: 20px; }
.mw-stars i.on { background: #FFC94A; filter: drop-shadow(0 0 4px rgba(255,201,74,.5)); }
.mw-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mw-board li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 52px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); }
.mw-board li b { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-board li em { font-style: normal; text-align: right; color: var(--steel-2, #9aa3b8); }
.mw-board li.me { background: rgba(200,255,46,.08); border: 1px solid rgba(200,255,46,.3); }
@media (max-width: 420px) { .mw-board li { grid-template-columns: 18px minmax(0, 1fr) auto; } .mw-board li em { display: none; } .mw-board .mw-stars i { width: 11px; height: 11px; } }
.mw-hud .mw-rd { display: none; }

/* ---- Poker: high-class action bubble, sit-out panel beside your seat, buy back in ---- */
#view-poker .pk-act .btn.pk-fold, #view-poker .pk-act .btn.pk-call, #view-poker .pk-act .btn.pk-rb, #view-poker .pk-act .pk-pre .btn, .pk-lux {
  background: linear-gradient(180deg, #23262d 0%, #121418 100%); color: #f2f5f7; border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 16px -10px rgba(0,0,0,.9); font-weight: 600; letter-spacing: .01em; transition: border-color .2s, box-shadow .2s, transform .12s; }
#view-poker .pk-act .btn.pk-fold { border-color: rgba(255,90,110,.32); }
#view-poker .pk-act .btn.pk-call { border-color: rgba(120,255,170,.32); }
#view-poker .pk-act .btn.pk-rb, .pk-lux { border-color: rgba(84,255,150,.7); color: #eafff1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(84,255,150,.18), 0 0 22px -4px rgba(56,255,140,.55); }
#view-poker .pk-act .btn.pk-rb b, #view-poker .pk-act .btn.pk-rb span { color: inherit; }
#view-poker .pk-act .btn:hover { border-color: rgba(84,255,150,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px -4px rgba(56,255,140,.6); }
#view-poker .pk-act .btn.pk-fold:hover { border-color: rgba(255,90,110,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px -6px rgba(255,90,110,.5); }
#view-poker .pk-act .btn:active, .pk-lux:active { transform: translateY(1px); }
.pk-lux:hover { border-color: rgba(84,255,150,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px -4px rgba(56,255,140,.7); color: #fff; }
#view-poker .pk-act input[type=range], .pk-buy input[type=range] { accent-color: #3dff8f; }
#view-poker .pk-act.turn { background: linear-gradient(180deg, rgba(22,25,30,.97), rgba(10,11,14,.97)); border-color: rgba(84,255,150,.45);
  box-shadow: 0 0 0 1px rgba(84,255,150,.12), 0 0 40px -12px rgba(56,255,140,.55), 0 18px 40px -20px rgba(0,0,0,.9); }
#view-poker .pk-act.pop { animation: pkPop .32s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pkPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
html.rm #view-poker .pk-act.pop { animation: none; }
.pk-bub-h { order: -2; flex: 1 1 100%; display: flex; align-items: center; gap: 12px; min-width: 0; }
#view-poker .pk-act .pk-mine2 { order: -1; }
.pk-bub-c { display: flex; gap: 5px; flex: 0 0 auto; }
.pk-bub-c .card.mini { width: 40px; height: 56px; margin: 0; border-radius: 6px; position: relative; overflow: hidden; }
.pk-bub-c .card.mini .cr { font-size: 13px; top: 3px; left: 4px; } .pk-bub-c .card.mini .cb { display: none; } .pk-bub-c .card.mini .cc { font-size: 22px; line-height: 1; }
.pk-bub-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-bub-t span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5dff9c; }
.pk-bub-t b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sit-out panel sits beside your own seat on desktop */
#pkFelt > .pk-so { position: absolute; left: calc(50% + clamp(70px, 9.5vw, 110px)); top: 86%; transform: translateY(-50%); z-index: 4; margin: 0;
  flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 11px; border-radius: 14px; background: rgba(10,12,16,.88); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.9); backdrop-filter: blur(6px); max-width: 190px; }
#pkFelt > .pk-so[hidden] { display: none; }
#pkFelt > .pk-so .pk-son { font-size: .76rem; white-space: nowrap; }
#pkFelt > .pk-so .pk-son input { accent-color: #3dff8f; }
#pkFelt > .pk-so .btn { padding: 6px 10px; font-size: .76rem; white-space: nowrap; }
/* buy back in window */
.pk-buy b { color: #eafff1; text-shadow: 0 0 18px rgba(56,255,140,.45); }
.pk-buy-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.pk-buy-q .btn { background: #15171b; border-color: rgba(255,255,255,.12); }
.pk-buy-n { text-align: center; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.pk-rb-row { display: flex; flex-wrap: wrap; gap: 8px; } .pk-rb-row > * { flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center; justify-content: center; }
/* mobile: the action bubble stays on screen while it is your turn, with your cards inside it */
@media (max-width: 760px) {
  #view-poker .pk-act.turn { position: sticky; bottom: 8px; z-index: 30; }
  .pk-bub-c .card.mini { width: 36px; height: 50px; }
}
@media (max-width: 760px) {
  #view-poker .pk-act.turn { padding: 10px; gap: 7px; }
  #view-poker .pk-act.turn > .btn.pk-fold, #view-poker .pk-act.turn > .btn.pk-call { flex: 1 1 calc(50% - 4px); padding: 11px 8px; white-space: nowrap; }
  #view-poker .pk-act.turn .pk-raise { flex: 1 1 100%; display: grid; grid-template-columns: 1fr; gap: 7px; }
  #view-poker .pk-act.turn .pk-pre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  #view-poker .pk-act.turn .pk-pre .btn { padding: 7px 2px; white-space: nowrap; font-size: .8rem; }
  #view-poker .pk-act.turn .pk-rb { width: 100%; padding: 11px 8px; white-space: nowrap; }
  #view-poker .pk-act.turn .pk-mine2 { font-size: .76rem; margin: -2px 0; }
  .pk-bar-r .pk-so .btn, .pk-bar-r .pk-son span { white-space: nowrap; }
}
@media (max-width: 520px) { .pk-rb-row > * { white-space: nowrap !important; } .pk-rb-row > .pk-lux { flex: 1 1 100%; order: -1; } }
/* roulette dock: Undo / Clear / Repeat on one row, Half and Double on the next */
.ro-dock-in .bet-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ro-dock-in .bet-row .btn.sm { grid-column: span 2; white-space: nowrap; }
.ro-dock-in .bet-row:has(#roRebet[hidden]) #roUndo, .ro-dock-in .bet-row:has(#roRebet[hidden]) #roClear { grid-column: span 3; }
.ro-dock-in .bet-row .btn.sm.ro-x2 { grid-column: span 3; }
.ro-dock-in .bet-row #roRebet:not([hidden]) { grid-column: span 2; }
.ro-x2 { font-variant-numeric: tabular-nums; }

/* ---------- Neon Heist ---------- */
.ax-heist .ax-h2 { background: linear-gradient(100deg, #fff 0%, #ffd76a 38%, #ff3fb4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-heist .wr-stage { height: clamp(460px, 70vh, 680px); border-color: rgba(255,215,106,.26); box-shadow: 0 0 0 1px rgba(46,242,255,.08), 0 24px 70px -24px rgba(255,63,180,.38); background: #05030f; cursor: default; }
.hz-host { position: absolute; inset: 0; pointer-events: none; }
.hz-host canvas.hz-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hz-fall { position: absolute; inset: 0; background: #05030f url(assets/heist/key.webp) center / cover no-repeat; opacity: 0; transition: opacity .4s; pointer-events: none; }
.hz-stage.nogl .hz-fall { opacity: .85; }
.hz-stage #hzCanvas { pointer-events: none; }
.ax-heist .wr-top { left: 18px; right: auto; top: 16px; align-items: flex-start; text-align: left; max-width: calc(100% - 210px); }
.ax-heist .wr-mult { font-size: clamp(1.8rem, 1rem + 2vw, 2.9rem); max-width: 100%; }
.ax-heist .wr-sub { justify-content: flex-start; flex-wrap: wrap; max-width: 100%; line-height: 1.35; font-size: .8rem; overflow-wrap: anywhere; }
.ax-heist .wr-pop { top: 40%; }
.hz-stage.driving .hb { display: none; }
.hz-ctl { display: flex; justify-content: center; }
.hz-ctl .wr-cash { flex: 0 1 320px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-heist .wr-cash.live, .ax-heist .wr-go.live { background: linear-gradient(100deg, #ffd76a, #ff3fb4); color: #12040e; }
.ax-heist .wr-cash.wait:disabled, .ax-heist .wr-go.wait:disabled { filter: none; background: rgba(8,6,24,.72); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.18); box-shadow: none; font-size: .86rem; letter-spacing: .12em; }
.hz-skip { position: absolute; right: 16px; bottom: calc(10% + 14px); z-index: 4; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(6,6,18,.6); color: #fff; font: 700 .78rem/1 var(--font-body, Satoshi, sans-serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.hz-skip[hidden] { display: none; }
.hz-skip .hz-kbd { margin-left: 8px; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.3); font-size: .64rem; letter-spacing: .06em; opacity: .85; }
@media (hover: none) and (pointer: coarse) { .hz-skip .hz-kbd { display: none; } }
.hz-keys { display: none; }
.hz-stage.driving .hz-keys { display: block; }
.hz-pad { position: absolute; left: 12px; right: 12px; bottom: 84px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.hz-pad[hidden] { display: none; }
.hz-pad > div { display: flex; gap: 10px; pointer-events: none; }
.hz-pad button { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; width: 68px; height: 68px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.26); background: rgba(8,8,22,.5); color: #fff; font: 800 1.35rem/1 var(--font-body, Satoshi, sans-serif); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hz-pad .hz-pr button { font-size: .66rem; letter-spacing: .1em; }
.hz-pad .bk { border-color: rgba(255,63,110,.5); }
.hz-pad .dr { border-color: rgba(46,242,255,.5); }
.hz-pad button.on { background: rgba(200,255,46,.22); border-color: #c8ff2e; }
@media (hover: hover) and (pointer: fine) { .hz-pad { display: none !important; } }
@media (hover: none), (pointer: coarse) { .hz-stage.driving .hz-keys { display: none; } }
@media (max-width: 760px) {
  .ax-heist .wr-stage { height: clamp(540px, 150vw, 700px); }
  .ax-heist .wr-top { left: 12px; top: 10px; max-width: calc(100% - 24px); }
  .ax-heist .wr-mult { font-size: clamp(1.7rem, 1.1rem + 4vw, 2.4rem); }
  .ax-heist .wr-sub { font-size: .72rem; margin-top: 3px; }
  .hz-pad button { width: 62px; height: 62px; }
}
.ax-heist .hz-keys { top: auto; left: 0; right: 0; bottom: 7px; text-align: center; font-size: .68rem; pointer-events: none; }
.ax-heist .hz-ctl { bottom: 30px; }
.ax-heist .wr-hud .hb { bottom: 104px; } /* breathing room above Rob the Bank */
@media (max-width: 760px) { .ax-heist .wr-hud .hb { bottom: 96px; } }
.hz-stage.intro .wr-top, .hz-stage.intro .hz-keys { opacity: 0; }
.hz-stage.intro .hz-ctl { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .hz-skip { bottom: auto; top: 12px; right: 12px; } }
/* Neon Heist arena duel */
.ar-stage.hd-on { position: relative; height: min(72vh, 660px); touch-action: pan-y; background: #05030f; overflow: hidden; }
.ar-stage.hd-on .ar-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-stage.hd-on .hd-gl, .ar-stage.hd-on .hd-ui { pointer-events: none; }
.ar-stage.hd-on .hd-pad { bottom: 14px; }
.ar-stage.hd-on .hd-fail { position: absolute; left: 0; right: 0; top: 40%; text-align: center; padding: 0 24px; }
@media (max-width: 560px) { .ar-stage.hd-on { height: calc(100dvh - 240px); min-height: 480px; } }
/* Neon Heist camera zoom: buttons + meter (desktop), pinch on phones */
.hz-zoom { position: absolute; right: 14px; bottom: 120px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 14px; background: rgba(6,4,18,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.hz-zoom[hidden] { display: none; }
.hz-zoom button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font: 800 1.05rem/1 var(--font-mono, monospace); cursor: pointer; }
.hz-zoom button:hover { border-color: #2ef2ff; color: #2ef2ff; }
.hz-zt { position: relative; width: 8px; height: 86px; border-radius: 6px; background: rgba(255,255,255,.12); cursor: pointer; overflow: hidden; }
.hz-zt::before { content: ''; position: absolute; inset: -6px -10px; }
.hz-zt i { position: absolute; left: 0; right: 0; bottom: 0; height: 76%; border-radius: 6px; background: linear-gradient(0deg, #2ef2ff, #c8ff2e); }
.hz-zoom em { font: 700 .55rem/1 var(--font-mono, monospace); letter-spacing: .14em; color: rgba(255,255,255,.55); font-style: normal; }
@media (hover: none), (pointer: coarse) { .hz-zoom { bottom: auto; top: 46%; right: 8px; transform: translateY(-50%) scale(.9); } }
.wr-hud .hz-zoom, .wr-hud .hz-zt { pointer-events: auto; }
/* steer left on the left edge, steer right on the right edge; drift and brake sit just above them */
.hz-pad { left: 6px; right: 6px; }
.hz-pad > div { flex-direction: column; align-items: center; gap: 10px; }
.hz-pad .dr, .hz-pad .bk { width: 58px; height: 44px; border-radius: 14px; }
.hz-zoom { bottom: 64px; }
.hz-zt { height: 58px; }
.ar-stage.hd-on .hd-zoom { bottom: 70px; }
@media (hover: hover) and (pointer: fine) { .ar-stage.hd-on .hd-zoom { bottom: 14px; } }
/* phones pinch to zoom; the meter is for mouse users */
@media (hover: none), (pointer: coarse) { .hz-zoom, .ar-stage.hd-on .hd-zoom { display: none !important; } }
/* desktop key hints */
.kb-hint { position: fixed; left: 14px; bottom: 12px; z-index: 40; pointer-events: none; padding: 6px 11px; border-radius: 10px; background: rgba(8,10,20,.78); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.62); letter-spacing: .03em; backdrop-filter: blur(6px); max-width: calc(100vw - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-hint kbd { font: 600 11px/1 var(--mono, ui-monospace, monospace); padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; margin-right: 2px; }
.kb-hint[hidden] { display: none; }
@media (pointer: coarse), (max-width: 760px) { .kb-hint { display: none; } }

/* Neon Street Duel, arcade one-player mode */
.ar-solo .ar-games, .ar-solo .ar-find, .ar-solo .ar-side .ar-card:not(:last-child) { display: none; }
.ar-solo .ar-main > .ar-h:first-child { display: none; }
.ar-solo .ar-cpu { flex: 1 1 auto; }
.ar-solo-link { text-decoration: none; }
@media (min-width: 1001px) { .lt-grid.arc5 .lt:not(.wide):nth-last-child(-n+2) { grid-column: span 3; } }

.ar-cust { margin: 10px 0 4px; display: grid; gap: 6px; }
.ar-cust-l { font-size: .78rem; color: var(--steel); }
.ar-cust-r { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); max-width: 460px; }
.ar-cust-r:focus-within { border-color: var(--acid); }
.ar-cust-r input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--bone); font-size: 1rem; padding: 6px 0; }
.ar-cust-r .btn { flex: 0 0 auto; }
.ar-cust-h { margin: 0; overflow-wrap: anywhere; }

/* ---------- Daily Drop pop-up ---------- */
.dd-dlg { padding: 0; border: 0; background: transparent; color: var(--bone, #F2F4FA); max-width: min(440px, calc(100vw - 24px)); width: 100%; max-height: calc(100dvh - 24px); overflow: visible; }
.dd-dlg::backdrop { background: rgba(5, 6, 12, .78); backdrop-filter: blur(6px); }
.dd-box { position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 26px 22px 20px; border-radius: 22px; border: 1px solid rgba(200, 255, 46, .28); background: radial-gradient(120% 70% at 50% 0%, rgba(46, 242, 255, .12), transparent 60%), radial-gradient(90% 60% at 50% 100%, rgba(255, 63, 180, .1), transparent 60%), #0B0D17; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset; text-align: center; display: grid; gap: 10px; justify-items: center; }
.dd-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2, rgba(255,255,255,.14)); background: rgba(255, 255, 255, .04); color: inherit; display: grid; place-items: center; cursor: pointer; }
.dd-eye { margin: 0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid, #C8FF2E); }
.dd-h, .dd-t { margin: 0; font-family: 'Clash Display', Satoshi, sans-serif; font-weight: 700; font-size: clamp(1.45rem, 6vw, 1.9rem); line-height: 1.08; overflow-wrap: anywhere; }
.dd-t { font-size: clamp(1.35rem, 6.4vw, 2rem); letter-spacing: .01em; }
.dd-sub { margin: 0; color: var(--steel, #A7ADC2); font-size: .92rem; line-height: 1.45; max-width: 34ch; overflow-wrap: anywhere; }
.dd-stage { position: relative; width: min(220px, 56vw); aspect-ratio: 600 / 995; margin: 6px 0 4px; }
.dd-glow { position: absolute; inset: -18% -30%; background: radial-gradient(closest-side, rgba(200, 255, 46, .32), rgba(46, 242, 255, .16) 55%, transparent 75%); filter: blur(8px); animation: ddPulse 2.6s ease-in-out infinite; pointer-events: none; }
.dd-pack { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: grab; touch-action: pan-y; animation: ddFloat 3.2s ease-in-out infinite; }
.dd-pack:focus-visible { outline: 2px solid var(--acid, #C8FF2E); outline-offset: 6px; border-radius: 12px; }
.dd-pk { position: absolute; inset: 0; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease; }
.dd-pk img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.dd-pk-top { clip-path: inset(0 0 87% 0); }
.dd-pk-bot { clip-path: inset(13% 0 0 0); }
.dd-tear { position: absolute; left: 6%; right: 6%; top: 12.6%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); opacity: .55; animation: ddTear 1.8s ease-in-out infinite; }
.dd-ripping .dd-pack { animation: none; }
.dd-ripping .dd-pk-top { transform: translate(18%, -60%) rotate(14deg); opacity: 0; }
.dd-ripping .dd-pk-bot { transform: translateY(24%) scale(.92); opacity: 0; transition-delay: .18s; }
.dd-ripping .dd-glow { animation: none; transform: scale(1.35); background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(200, 255, 46, .3) 45%, transparent 75%); transition: transform .6s ease; }
.dd-ripping .dd-tear { display: none; }
.dd-sp { position: absolute; left: 50%; top: 20%; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: ddSpark 1.1s ease-out forwards; pointer-events: none; }
.dd-go { width: 100%; max-width: 320px; justify-content: center; text-decoration: none; }
.dd-later { width: 100%; max-width: 320px; justify-content: center; }
.dd-odds { width: 100%; text-align: left; font-size: .82rem; color: var(--steel, #A7ADC2); border-top: 1px solid var(--line, rgba(255,255,255,.08)); padding-top: 10px; margin-top: 2px; }
.dd-odds summary { cursor: pointer; text-align: center; color: var(--bone, #F2F4FA); }
.dd-odds ul { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 6px; }
.dd-odds li { display: flex; justify-content: space-between; gap: 12px; }
.dd-odds li span { min-width: 0; overflow-wrap: anywhere; }
.dd-odds p { margin: 6px 0 0; font-size: .76rem; }
.dd-prize { display: grid; justify-items: center; gap: 8px; margin: 4px 0 6px; animation: ddIn .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.dd-art { width: 100%; display: grid; place-items: center; min-height: 150px; position: relative; }
.dd-art::before { content: ''; position: absolute; width: 220px; height: 220px; max-width: 70vw; max-height: 70vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 255, 46, .28), transparent 72%); }
.dd-rare .dd-art::before { background: radial-gradient(closest-side, rgba(255, 201, 74, .4), transparent 72%); }
.dd-rare { border-color: rgba(255, 201, 74, .5); }
.dd-rare .dd-eye { color: #FFC94A; }
.dd-art-pk { position: relative; height: 170px; width: auto; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55)); }
.dd-art-sl { position: relative; max-width: min(260px, 70vw); max-height: 140px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.dd-coin { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .25), transparent 55%), linear-gradient(140deg, #FFE08A, #FFC94A 45%, #B8862A); box-shadow: 0 0 40px rgba(255, 201, 74, .45); }
.dd-coin .coin { transform: scale(3.2); }
.dd-sw { position: relative; width: 116px; height: 116px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 44px color-mix(in srgb, var(--sw, #C8FF2E) 60%, transparent), inset 0 0 0 6px rgba(255, 255, 255, .18); }
.dd-lab { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel, #A7ADC2); }
.dd-fine { margin: 2px 0 0; font-size: .76rem; color: var(--steel, #A7ADC2); }
.dd-bar { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 1200px; margin: 14px auto 0; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(200, 255, 46, .35); background: linear-gradient(90deg, rgba(200, 255, 46, .1), rgba(46, 242, 255, .06)); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dd-bar img { width: 34px; height: auto; flex: 0 0 auto; }
.dd-bar span { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dd-bar small { color: var(--steel, #A7ADC2); overflow-wrap: anywhere; }
.dd-bar em { font-style: normal; font-weight: 700; color: #07080F; background: var(--acid, #C8FF2E); padding: 7px 14px; border-radius: 999px; flex: 0 0 auto; }
@keyframes ddFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes ddPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes ddTear { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes ddSpark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }
@keyframes ddIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
html.rm .dd-pack, html.rm .dd-glow, html.rm .dd-tear, html.rm .dd-prize { animation: none; }
@media (max-height: 640px) { .dd-stage { width: min(150px, 40vw); } .dd-art { min-height: 110px; } .dd-art-pk { height: 120px; } }
/* Daily Drop main button: black box with a green neon glow (no acid fill) */
.dd-dlg .btn.dd-go { background: #05070b; color: #EafFF2; border: 1px solid rgba(61, 255, 154, .85); box-shadow: 0 0 0 1px rgba(61, 255, 154, .25) inset, 0 0 14px rgba(61, 255, 154, .55), 0 0 34px rgba(61, 255, 154, .22); text-shadow: 0 0 8px rgba(61, 255, 154, .55); transition: box-shadow .2s, transform .15s, border-color .2s; }
.dd-dlg .btn.dd-go:hover, .dd-dlg .btn.dd-go:focus-visible { background: #070a0e; color: #fff; border-color: #3DFF9A; box-shadow: 0 0 0 1px rgba(61, 255, 154, .4) inset, 0 0 18px rgba(61, 255, 154, .75), 0 0 46px rgba(61, 255, 154, .32); transform: translateY(-1px); }
.dd-dlg .btn.dd-go:focus-visible { outline: 2px solid #3DFF9A; outline-offset: 3px; }
.dd-dlg .btn.dd-go:disabled { opacity: .55; transform: none; box-shadow: 0 0 10px rgba(61, 255, 154, .3); }
/* shared key legend (WICK Run style) on every game */
.wk-legend { margin: 14px 0 2px; gap: 12px 26px; }
.wk-legend li { white-space: nowrap; }
.wk-legend kbd { flex: none; }
.wk-felt.wr-legend { margin: 16px auto 4px; padding: 12px 10px 2px; border-top: 1px solid rgba(255,255,255,.07); max-width: 100%; }
.ar-keys.wr-legend { margin: 12px 0 0; }
.ar-keys.wr-legend li span { white-space: normal; }
@media (max-width: 1100px) { .wk-legend { gap: 10px 18px; } .wk-legend li { font-size: 12px; } .wk-legend kbd { height: 30px; min-width: 34px; padding: 0 10px; font-size: 12px; } .wk-legend kbd.wk-space { min-width: 84px; } }
@media (hover: none) and (pointer: coarse) { .wk-legend, .ar-keys.wr-legend { display: none; } }
/* solo Street Duel: the stake you set shows big */
.ar-cust-now { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; max-width: 420px; padding: 10px 14px; border-radius: var(--r, 14px); border: 1px solid var(--line-2, rgba(255,255,255,.14)); background: linear-gradient(135deg, rgba(200,255,46,.06), rgba(46,242,255,.04)), var(--surface, #0d0f18); margin-bottom: 6px; }
.ar-cust-now.on { border-color: rgba(200,255,46,.75); box-shadow: 0 0 0 1px rgba(200,255,46,.25) inset, 0 0 22px -6px rgba(200,255,46,.55); }
.ar-cust-k { grid-column: 1 / -1; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid, #C8FF2E); }
.ar-cust-amt { font-size: clamp(1.15rem, 4.2vw, 1.45rem); line-height: 1.1; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ar-cust-amt .coin { transform: scale(1.1); margin-right: 5px; }
.ar-cust-w { font-size: .86rem; color: var(--steel, #A7ADC2); min-width: 0; overflow-wrap: anywhere; }
.ar-cust-w b { color: var(--acid, #C8FF2E); font-weight: 700; }
.ar-cust-now.pop { animation: arCustPop .6s cubic-bezier(.2,1.3,.4,1); }
@keyframes arCustPop { 0% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(200,255,46,.7); } 60% { transform: scale(1.02); box-shadow: 0 0 34px 2px rgba(200,255,46,.45); } 100% { transform: none; } }
html.rm .ar-cust-now.pop { animation: none; }
#arCustGo.ok { border-color: rgba(61,255,154,.8); color: #3DFF9A; }
.ar-cpu-s { margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(200,255,46,.12); border: 1px solid rgba(200,255,46,.35); color: var(--acid, #C8FF2E); font-size: .85em; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 520px) { .ar-cust-now { grid-template-columns: 1fr; } }
/* solo Street Duel: the start button glows green so it reads as the next step */
#arCpu.ar-cpu-go { background: #05070b; color: #EAFFF2; border: 1px solid rgba(61,255,154,.85); box-shadow: 0 0 0 1px rgba(61,255,154,.25) inset, 0 0 18px rgba(61,255,154,.45); animation: arCpuGlow 2.4s ease-in-out infinite; }
#arCpu.ar-cpu-go:hover, #arCpu.ar-cpu-go:focus-visible { border-color: #3DFF9A; box-shadow: 0 0 0 1px rgba(61,255,154,.35) inset, 0 0 28px rgba(61,255,154,.7); }
#arCpu.ar-cpu-go .ar-cpu-s { background: rgba(61,255,154,.12); border-color: rgba(61,255,154,.45); color: #3DFF9A; }
@keyframes arCpuGlow { 50% { box-shadow: 0 0 0 1px rgba(61,255,154,.35) inset, 0 0 30px rgba(61,255,154,.65); } }
html.rm #arCpu.ar-cpu-go { animation: none; }

/* Side bets v4: small neon circles beside the main bet spots (all side-bet tables) */
.wk-sides-dots { display: none !important; }
.sd-dot { --c: #2EF2FF; --c2: rgba(46,242,255,.35); position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; padding: 2px 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; flex: none; }
.sd-dot.sd-c1 { --c: #FF4FD8; --c2: rgba(255,79,216,.35); }
.sd-dot.sd-c2 { --c: #FFC94D; --c2: rgba(255,201,77,.35); }
.sd-dot.sd-c3 { --c: #C8FF2E; --c2: rgba(200,255,46,.35); }
.sd-dot .sd-ring { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 2px solid var(--c); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(6,10,20,.92) 70%);
  box-shadow: 0 0 8px var(--c2), inset 0 0 10px var(--c2); transition: box-shadow .25s, transform .2s; }
.sd-dot .sd-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed var(--c2); }
.sd-dot:hover:not(:disabled) .sd-ring { box-shadow: 0 0 16px var(--c2), inset 0 0 14px var(--c2); transform: scale(1.05); }
.sd-dot:focus-visible { outline: none; }
.sd-dot:focus-visible .sd-ring { outline: 2px solid #fff; outline-offset: 3px; }
.sd-dot .sd-ring b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--c); line-height: 1.05; text-shadow: 0 0 8px var(--c2); white-space: nowrap; }
.sd-dot .sd-ring b i { font-style: normal; font-size: 7px; letter-spacing: .12em; color: rgba(255,255,255,.65); text-transform: uppercase; }
.sd-dot.on .sd-ring { border: 0; background: repeating-conic-gradient(var(--c) 0 22deg, rgba(255,255,255,.9) 22deg 30deg, var(--c) 30deg 52deg, #0a0f1c 52deg 60deg);
  box-shadow: 0 0 16px var(--c2), 0 3px 0 rgba(0,0,0,.45); }
.sd-dot.on .sd-ring::before { inset: 6px; border: 0; background: radial-gradient(circle at 45% 35%, #1a2236, #070b16 75%); box-shadow: inset 0 0 0 1.5px var(--c); }
.sd-dot.on .sd-ring b { color: #fff; letter-spacing: 0; font-size: 10.5px; }
.sd-dot.drop .sd-ring { animation: sdDotDrop .32s cubic-bezier(.2,1.4,.4,1); }
@keyframes sdDotDrop { from { transform: translateY(-14px) scale(1.12); } to { transform: none; } }
html.rm .sd-dot.drop .sd-ring { animation: none; }
.sd-dot .sd-n { font: 800 8.5px/1.15 Satoshi, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-align: center; max-width: 74px; overflow-wrap: anywhere; min-height: 2.3em; display: flex; align-items: flex-start; justify-content: center; }
.sd-dot .sd-q { font-size: 9px; line-height: 1; color: var(--c); opacity: .9; white-space: nowrap; }
.sd-dot .sd-r { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 800; white-space: nowrap; z-index: 2; }
.sd-dot.won .sd-r { background: #C8FF2E; color: #0a0c06; }
.sd-dot.won .sd-ring { box-shadow: 0 0 22px rgba(200,255,46,.6); }
.sd-dot.lost .sd-r { background: #1a1d22; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.16); }
.sd-dot.lost .sd-ring { opacity: .5; }
.sd-dot:disabled { cursor: default; }
.sd-dot.idle .sd-ring { opacity: .38; box-shadow: none; }
.sd-dot.idle .sd-n, .sd-dot.idle .sd-q { opacity: .45; }
.ring-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: none; }

/* Blackjack: your-hand bet circle with the side circles beside it */
.bet-ring { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 4px auto 8px; min-height: 120px; position: relative; z-index: 3; }
.ring-main { --c: #C8FF2E; --c2: rgba(200,255,46,.35); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; width: 132px; }
.ring-main .rm-n { font: 800 10px/1 Satoshi, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.ring-main .rm-spot { position: relative; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c);
  background: radial-gradient(circle at 50% 40%, rgba(200,255,46,.08), rgba(6,10,20,.92) 70%); box-shadow: 0 0 14px var(--c2), inset 0 0 16px var(--c2); transition: box-shadow .25s, transform .2s; }
.ring-main .rm-spot::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--c2); }
.ring-main:hover:not(:disabled) .rm-spot { box-shadow: 0 0 24px var(--c2), inset 0 0 20px var(--c2); transform: scale(1.04); }
.ring-main:focus-visible { outline: none; }
.ring-main:focus-visible .rm-spot { outline: 2px solid #fff; outline-offset: 3px; }
.ring-main .rm-stk.chip { width: 54px; height: 54px; font-size: 12px; pointer-events: none; }
.ring-main .rm-stk.chip:hover { transform: none; }
.ring-main.drop .rm-stk { animation: sdDotDrop .32s cubic-bezier(.2,1.4,.4,1); }
html.rm .ring-main.drop .rm-stk { animation: none; }
.ring-main .rm-a { font-size: 12px; color: rgba(255,255,255,.6); white-space: nowrap; min-height: 1.2em; }
.ring-main.has .rm-a { color: #fff; font-weight: 700; }
.ring-main:disabled { cursor: default; }
@media (max-width: 480px) {
  .bet-ring { gap: 10px; }
  .ring-main { width: 104px; }
  .ring-main .rm-spot { width: 70px; height: 70px; }
  .ring-main .rm-stk.chip { width: 48px; height: 48px; }
}

/* pick-a-chip racks: the selected chip lifts with a white ring */
:is(#view-table, #view-holdem, #view-lir, #view-tcp) .chip[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 3px; transform: translateY(-3px); }
/* tappable main spots on the poker tables */
.uspot.tap { cursor: pointer; }
.uspot.tap:hover { border-color: rgba(200,255,46,.5); background: rgba(200,255,46,.05); }
.uspot.tap .us-n::after { content: ' · tap'; color: rgba(255,255,255,.4); letter-spacing: .1em; font-size: 9px; }
.uspot.pend { border-color: rgba(200,255,46,.4); background: rgba(200,255,46,.06); }
.uspot.pend .us-n { color: var(--acid, #C8FF2E); }
.uspot.drop { animation: usDrop .3s ease; }
@keyframes usDrop { 50% { transform: scale(1.05); } }
html.rm .uspot.drop { animation: none; }
/* bet readout keeps one fixed height so the board never jumps */
.bet-line { min-height: 32px; flex-wrap: nowrap; overflow: hidden; }
@media (max-width: 520px) { .bet-line { gap: 4px 8px; font-size: 11px; } .bet-line em { font-size: 9.5px; } }
.sd-dot.nudge .sd-ring { animation: sdNudge .4s ease; }
@keyframes sdNudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
html.rm .sd-dot.nudge .sd-ring { animation: none; }
/* baccarat: pair and natural circles sit beside Player and Banker */
#view-baccarat .bac-spots { grid-template-columns: auto 1fr .8fr 1fr auto; max-width: 640px; align-items: center; }
#view-baccarat .bac-sd { gap: 4px; }
#view-baccarat .bac-sd .sd-dot { width: 64px; }
#view-baccarat .bac-sd .sd-n { min-height: 0; }
@media (max-width: 560px) {
  #view-baccarat .bac-spots { grid-template-columns: 1fr .8fr 1fr; grid-template-areas: "ps . bs" "p t b"; row-gap: 8px; }
  #view-baccarat #bAtP { grid-area: ps; flex-direction: row; }
  #view-baccarat #bAtB { grid-area: bs; flex-direction: row; }
  #view-baccarat .spot[data-side="P"] { grid-area: p; }
  #view-baccarat .spot.tie { grid-area: t; }
  #view-baccarat .spot.bk { grid-area: b; }
  #view-baccarat .bac-sd .sd-dot { width: 54px; }
}
.uth-spots.has-sd { display: flex; align-items: center; gap: 8px; max-width: 520px; }
.uth-spots.has-sd .uspot { flex: 1 1 0; min-width: 0; }
.uth-spots.has-sd .ring-side .sd-dot { width: 70px; }
@media (max-width: 480px) { .uth-spots.has-sd { gap: 5px; } .uth-spots.has-sd .ring-side .sd-dot { width: 58px; } .uth-spots.has-sd .sd-ring { width: 40px; height: 40px; } .uspot.tap .us-n::after { content: none; } }
.ring-main .rm-stk.chip, #view-baccarat .spot-stk.chip { display: grid; place-items: center; line-height: 1; padding: 0; }
#view-baccarat .bac-spots { margin-bottom: 10px; position: relative; z-index: 3; }
#view-baccarat .spot.has:disabled { opacity: 1; }
#view-baccarat .spot:disabled:not(.has) { opacity: .4; }
/* the placed chip sits on the dashed ring instead of pushing the spot taller */
#view-baccarat .spot { position: relative; }
#view-baccarat .spot-stk.chip { position: absolute; left: 50%; top: var(--ringY, 88px); translate: -50% -50%; margin: 0 !important; }
@media (max-width: 560px) { #view-baccarat .spot-stk.chip { top: var(--ringY, 82px); } }
@media (max-width: 640px) {
  .bet-line { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; min-height: 46px; overflow: visible; }
  .bet-line span { justify-content: space-between; min-width: 0; }
  .bet-line .tot { margin-left: 0; }
}
/* sportsbook: picked prices are black with a neon green glow (no bright fill) */
.sp-odd.sel, .sp-pb.sel { background: #050607; border-color: #3DFF9A; color: #fff; box-shadow: 0 0 0 1px #3DFF9A, 0 0 18px rgba(61,255,154,.45), inset 0 0 14px rgba(61,255,154,.12); }
.sp-odd.sel .sp-ln { color: rgba(255,255,255,.75); }
.sp-odd.sel .sp-pr, .sp-pb.sel b { color: #3DFF9A; text-shadow: 0 0 8px rgba(61,255,154,.45); }
.sp-pb.sel span { color: #fff; }
/* poker: Sit down is black with a neon green glow */
.btn.pk-neon { background: #05070b; color: #EAFFF2; border: 1px solid rgba(61,255,154,.85); box-shadow: 0 0 0 1px rgba(61,255,154,.25) inset, 0 0 14px rgba(61,255,154,.55), 0 0 34px rgba(61,255,154,.22); text-shadow: 0 0 8px rgba(61,255,154,.55); font-weight: 700; }
.btn.pk-neon:hover, .btn.pk-neon:focus-visible { background: #070a0e; color: #fff; border-color: #3DFF9A; box-shadow: 0 0 0 1px rgba(61,255,154,.4) inset, 0 0 18px rgba(61,255,154,.75), 0 0 46px rgba(61,255,154,.32); }
/* poker: your-turn action bubbles that pop up over your own cards */
.pk-bubs { position: absolute; top: 34%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 6px; pointer-events: none; animation: pkBubIn .28s cubic-bezier(.2,.9,.3,1.3) both; }
.pk-bubs.l { right: calc(100% + clamp(18px, 2.2vw, 30px)); align-items: flex-end; }
.pk-bubs.r { left: calc(100% + clamp(18px, 2.2vw, 30px)); align-items: flex-start; }
.pk-bubs.l .pk-bubs-h { position: absolute; bottom: calc(100% + 4px); right: 0; }
#pkFelt:has(.pk-bubs) > .pk-so { visibility: hidden; }
.pk-myh { font-style: normal; font-size: .66rem; font-weight: 700; color: #3DFF9A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; text-shadow: 0 0 8px rgba(61,255,154,.35); }
.pk-bubs-h { margin: 0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #3DFF9A; padding: 3px 12px; border-radius: 999px; background: rgba(5,7,11,.88); border: 1px solid rgba(61,255,154,.6); box-shadow: 0 0 14px rgba(61,255,154,.35); white-space: nowrap; }
.pk-bubs-r { display: flex; gap: 8px; align-items: flex-end; pointer-events: auto; }
.pk-bub { --c: 61,255,154; width: 74px; height: 74px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 4px; background: radial-gradient(circle at 50% 35%, #10151b, #05070b 70%); color: #fff; border: 2px solid rgba(var(--c), .9); box-shadow: 0 0 0 3px rgba(var(--c), .12), 0 0 18px rgba(var(--c), .5), 0 8px 18px rgba(0,0,0,.55); cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s; }
.pk-bub span { font-size: .8rem; font-weight: 800; letter-spacing: .02em; line-height: 1.05; white-space: nowrap; }
.pk-bub b { font-size: .68rem; color: rgb(var(--c)); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; }
.pk-bub b .coin { width: .8em; height: .8em; }
.pk-bub { transform: translateY(var(--y, 0)); }
.pk-bub:active { transform: translateY(var(--y, 0)) scale(.94); }
.pk-bub:hover, .pk-bub:focus-visible { box-shadow: 0 0 0 3px rgba(var(--c), .25), 0 0 26px rgba(var(--c), .75), 0 8px 18px rgba(0,0,0,.55); outline: none; }
.pk-bub.fold { --c: 255,79,110; }
.pk-bub.call { --c: 61,255,154; }
.pk-bub.raise { --c: 46,242,255; }
.pk-bub.ai { --c: 255,201,74; }
@keyframes pkBubIn { from { opacity: 0; transform: translateY(-50%) scale(.8); } to { opacity: 1; transform: translateY(-50%); } }
html.rm .pk-bubs { animation: none; }
@media (max-width: 640px) {
  .pk-bubs { bottom: calc(100% + 2px); gap: 4px; }
  .pk-bubs-h { font-size: .6rem; padding: 2px 10px; }
  .pk-bubs-r { gap: 5px; }
  .pk-bub { width: 50px; height: 50px; border-width: 2px; padding: 0 2px; }
  .pk-bub span { font-size: .62rem; } .pk-bub b { font-size: .52rem; }
  .pk-bubs-r { gap: 4px; }
}
/* mobile: the turn bubbles over your cards carry the actions, so the panel no longer sits on top of them */
@media (max-width: 760px) { #view-poker .pk-act.turn { position: static; } }
/* phones: the table-name badge is a small corner tag so it never covers the dealer's face */
@media (max-width: 640px) {
  .stage-game { top: 8px; left: 8px; max-width: calc(50% - 44px); padding: 4px 8px 5px; border-radius: 8px; gap: 0; }
  .stage-game .sg-k { display: none; }
  .stage-game .sg-n { font-size: .72rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; }
}
@media (max-width: 640px) {
  .pk-bubs.l, .pk-bubs.r { top: auto; bottom: calc(100% + 4px); transform: none; animation-name: pkBubInM; }
  .pk-bubs.l { right: 50%; margin-right: 2px; }
  .pk-bubs.r { left: 50%; margin-left: 2px; }
  .pk-bubs.l .pk-bubs-h { right: auto; left: 100%; transform: translateX(-50%); margin-left: 2px; bottom: calc(100% + 2px); }
}
@media (max-width: 640px) { .pk-bub { --y: 0px !important; width: 46px; height: 46px; } .pk-bubs-r { gap: 3px; } }
@keyframes pkBubInM { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
/* desktop fit: when the board is taller than the screen, tighten it so everything shows without scrolling */
@media (min-width: 1025px) {
  .felt.tight { row-gap: 4px; }
  .felt.tight .wk-felt.wr-legend { margin: 4px auto 0; padding: 6px 6px 0; gap: 6px 14px; flex-wrap: nowrap; }
  .felt.tight .wk-felt.wr-legend li { font-size: 10.5px; gap: 6px; letter-spacing: .04em; }
  .felt.tight .wk-felt.wr-legend kbd { height: 24px; min-width: 28px; padding: 0 8px; font-size: 11px; border-radius: 7px; }
  .felt.tight .wk-felt.wr-legend kbd.wk-space { min-width: 64px; }
  .felt.tight .bet-ring { min-height: 0; margin: 0 auto 2px; gap: 18px; }
  .felt.tight .ring-main .rm-spot { width: 66px; height: 66px; }
  .felt.tight .ring-main .rm-stk.chip { width: 46px; height: 46px; font-size: 11px; }
  .felt.tight .status { min-height: 0; margin: 0; }
}
/* ---------- Dealer format v3 (desktop): the dealer fills the top of the table and the game sits over the lower half of the picture ---------- */
@media (min-width: 1025px) {
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt {
    --faceH: clamp(150px, calc(var(--avail, 720px) * .27), 300px);
    padding-top: var(--faceH); isolation: isolate;
  }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .stage,
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .stage.wide {
    position: absolute !important; left: 0; right: 0; top: 0; width: auto; margin: 0 !important; border-radius: inherit;
    height: calc(var(--faceH) + 46%) !important; min-height: 0 !important; max-height: none !important; z-index: 0 !important;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .stage :is(img:not(.amb), .mood, video, video.dv) { object-fit: cover; object-position: 50% 6%; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .stage::after {
    background: linear-gradient(180deg, rgba(6,7,9,.05) 0%, transparent 18%, rgba(8,9,11,.2) 34%, rgba(8,9,11,.62) 52%, rgba(9,10,12,.9) 72%, #090a0c 100%), radial-gradient(130% 100% at 50% 22%, transparent 55%, rgba(5,5,6,.55) 100%);
  }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > :not(.stage):not(.win-fx) { position: relative; z-index: 2; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .win-fx { position: absolute; inset: 0; z-index: 40; place-items: start center; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .win-fx .wf-box { margin-top: calc(var(--faceH, 240px) * .6); transform: translateY(-50%); }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .win-fx :is(.wf-rays, .wf-ring, .wf-bit) { top: calc(var(--faceH, 240px) * .6); }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .win-fx .wf-scrim { background: radial-gradient(ellipse 60% 55% at 50% calc(var(--faceH, 240px) * .6), rgba(10,11,13,.3), rgba(10,11,13,.8)); }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .stage + * { margin-top: 0; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt::before { z-index: 1; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt .status { text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt .hand-label { text-shadow: 0 2px 8px rgba(0,0,0,.9); }
}
/* table games: Deal, Deal again and Cash out are black with the neon green glow */
html body :is(#dealBtn, #bDeal, #hDeal, #lDeal, #tpDeal, #coMain, #bCoMain, #hCoMain, #lCoMain, #tpCoMain).btn,
html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .btn:is(.co-inline, .b-co, .h-co) {
  background: #05070b; color: #EAFFF2; border: 1px solid rgba(61,255,154,.85);
  box-shadow: 0 0 0 1px rgba(61,255,154,.25) inset, 0 0 14px rgba(61,255,154,.55), 0 0 34px rgba(61,255,154,.22);
  text-shadow: 0 0 8px rgba(61,255,154,.55); transition: box-shadow .2s, transform .15s, border-color .2s;
}
html body :is(#dealBtn, #bDeal, #hDeal, #lDeal, #tpDeal, #coMain, #bCoMain, #hCoMain, #lCoMain, #tpCoMain).btn:hover:not(:disabled),
html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .btn:is(.co-inline, .b-co, .h-co):hover:not(:disabled) {
  background: #070a0e; color: #fff; border-color: #3DFF9A; box-shadow: 0 0 0 1px rgba(61,255,154,.4) inset, 0 0 18px rgba(61,255,154,.75), 0 0 46px rgba(61,255,154,.32);
}
html body :is(#dealBtn, #bDeal, #hDeal, #lDeal, #tpDeal, #coMain, #bCoMain, #hCoMain, #lCoMain, #tpCoMain).btn:disabled {
  background: #0b0d10; color: rgba(255,255,255,.4); border-color: rgba(61,255,154,.18); box-shadow: none; text-shadow: none;
}
html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .btn:is(.co-inline, .b-co, .h-co, .co-main) :is(b, span, .mono) { color: inherit; }
/* dealer picture fades softly into the table */
@media (min-width: 1025px) {
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt > .stage { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
  html body #view-table .felt.tight .hand-zone { min-height: calc(var(--cw, 64px) * 1.4 + 18px); }
  html body #view-table .felt.tight .bet-ring { margin-bottom: 0; }
}
@media (min-width: 1025px) {
  html body #view-table #felt.tight #bjRing { min-height: 0; margin: 0 auto; gap: 18px; }
  html body #view-table #felt.tight .hand-zone { min-height: calc(var(--cw, 64px) * 1.4 + 20px); }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt.tight { row-gap: 4px; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt.tight > .status { min-height: 0; }
}
/* ---------- No highlighter-yellow buttons: every primary action is black with the neon green glow ---------- */
:root { --ng: 61,255,154; }
:is(.btn.btn-primary, .hx-coins, .rc-go, .wr-cash, .wr-go, .lb-go, .tb-tab.on, .sp-seg [aria-checked=true]):not(.vp-gold):not(.ax-gold *) {
  background: #05070b !important; background-image: none !important; color: #EAFFF2 !important;
  border: 1px solid rgba(var(--ng), .85) !important;
  box-shadow: 0 0 0 1px rgba(var(--ng), .22) inset, 0 0 14px rgba(var(--ng), .5), 0 0 32px rgba(var(--ng), .2) !important;
  text-shadow: 0 0 8px rgba(var(--ng), .5);
}
:is(.btn.btn-primary, .hx-coins, .rc-go, .wr-cash, .wr-go, .lb-go):not(.vp-gold):not(.ax-gold *):hover:not(:disabled) {
  background: #070a0e !important; color: #fff !important; border-color: #3DFF9A !important;
  box-shadow: 0 0 0 1px rgba(var(--ng), .4) inset, 0 0 18px rgba(var(--ng), .75), 0 0 44px rgba(var(--ng), .3) !important;
}
:is(.btn.btn-primary, .rc-go, .wr-cash, .wr-go):not(.vp-gold):not(.ax-gold *):is(:disabled, [aria-disabled=true]) {
  background: #0b0d10 !important; color: rgba(255,255,255,.42) !important; border-color: rgba(var(--ng), .2) !important; box-shadow: none !important; text-shadow: none; filter: none;
}
:is(.btn.btn-primary, .hx-coins, .rc-go, .wr-cash, .wr-go, .lb-go, .tb-tab.on, .sp-seg [aria-checked=true]):not(.vp-gold):not(.ax-gold *) :is(span, b, strong, small, em, svg) { color: inherit !important; }
.hx-coins svg, .hx-coins i { color: #3DFF9A !important; }

/* Plaza rooms: back button, room name and club music chip (top left of the stage) */
.pz-rhud { --c: #2EF2FF; position: absolute; z-index: 3; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 140px); }
.pz-rhud[hidden] { display: none; }
.pz-back, .pz-mus { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: rgba(6,7,12,.84); color: var(--bone); font: 600 .82rem/1 var(--font-body); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.pz-back:hover, .pz-mus:hover { border-color: var(--c); color: var(--c); }
.pz-mus { padding: 8px 14px; color: #FF9BEA; border-color: rgba(255,79,216,.5); }
.pz-rn { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 14px; border-radius: 14px; background: rgba(6,7,12,.7); border: 1px solid var(--line-2); }
.pz-rn b { font: 700 .78rem/1.1 Orbitron, var(--font-body); letter-spacing: .06em; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-rn small { font-size: .68rem; color: rgba(244,246,241,.6); white-space: nowrap; }
.pz-rn small:empty { display: none; }
.pz-prompt img { width: 44px; height: 44px; flex: none; margin-left: -8px; border-radius: 12px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.pz-prompt img[hidden] { display: none; }
@media (max-width: 560px) { .pz-rhud { left: 10px; top: 10px; gap: 6px; max-width: calc(100% - 128px); flex-wrap: wrap; } .pz-rn { display: none; } .pz-back, .pz-mus { padding: 7px 12px 7px 9px; font-size: .76rem; } .pz-prompt img { width: 36px; height: 36px; border-radius: 10px; } }

/* ---------- Mystic auras (Studio + profile) ---------- */
.my-sw { display: block; width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 10px -2px var(--c); }
.my-sw.t2 { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 2px rgba(63,169,255,.55), 0 0 14px -2px var(--c); }
.my-sw.t3 { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 2px rgba(163,107,255,.7), 0 0 18px -1px var(--c); }
.my-sw.t4 { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 2px rgba(255,79,216,.8), 0 0 22px 0 var(--c); }
.my-sw.t5 { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 2px rgba(255,176,46,.9), 0 0 26px 2px var(--c); }
.my-sw.t6 { box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #FFF3C4, 0 0 30px 4px var(--c); }
.my-sw.best { background: conic-gradient(from 0deg, #2EF2FF, #9D6BFF, #FF4FD8, #FFC94A, #2EF2FF); --c: #9D6BFF; }
.my-sw.best::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #0c0e15; }
.my-head { border-color: rgba(157,107,255,.35); background: linear-gradient(135deg, rgba(157,107,255,.1), rgba(46,242,255,.06)); }
.my-head b { color: #C9B4FF; }
.my-row h3 { margin-top: 14px; }
.my-row h3:first-of-type { margin-top: 4px; }
.my-wear { margin: 0 0 6px; font-size: .8rem; color: var(--steel-2); line-height: 1.4; overflow-wrap: anywhere; }
.my-wear b { color: var(--bone); }
.my-tiles { row-gap: 14px; }
.my-tiles .sd-t.my-t { width: 104px; min-height: 112px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 12px; }
.my-tiles .sd-t.my-t > i.none { width: 34px; height: 34px; border-radius: 50%; display: block; border: 1px dashed var(--line-2); }
.my-t .sd-n { color: var(--bone); font-size: .7rem; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.my-src { font-size: .6rem; color: var(--steel-2); line-height: 1.2; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.my-tier { font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; }
.my-tier.t1 { color: #9AA3B8; } .my-tier.t2 { color: #3FA9FF; } .my-tier.t3 { color: #A36BFF; } .my-tier.t4 { color: #FF4FD8; } .my-tier.t5 { color: #FFB02E; } .my-tier.t6 { color: #FFF3C4; text-shadow: 0 0 8px rgba(255,243,196,.7); }
.my-t.own { border-color: rgba(46,242,255,.35); }
.my-t.lk .my-sw { opacity: .55; filter: saturate(.7); }
.my-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.my-how li { display: flex; gap: 12px; align-items: flex-start; font-size: .78rem; color: var(--steel-2); line-height: 1.45; }
.my-how li .my-sw { width: 26px; height: 26px; margin-top: 2px; }
.my-how li span { min-width: 0; overflow-wrap: anywhere; }
.my-how b { color: var(--bone); margin-right: 4px; }
.my-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; background: #0b0d14; }
.my-seg button { border: 0; background: transparent; color: var(--steel-2); font: inherit; font-size: .76rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.my-seg button.on { background: #0b0d14; color: #C8FF2E; box-shadow: inset 0 0 0 1px rgba(200,255,46,.6), 0 0 14px -4px rgba(200,255,46,.7); }
.pf-my { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(6,7,12,.4)); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.pf-my > div { min-width: 0; display: grid; gap: 1px; }
.pf-my small { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.pf-my b { font-size: .86rem; color: var(--bone); }
.pf-my span { font-size: .7rem; color: var(--steel-2); overflow-wrap: anywhere; }
.pf-myc { grid-column: 1 / -1; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-myc .my-sw { width: 18px; height: 18px; }
@media (max-width: 420px) { .my-tiles .sd-t.my-t { width: calc(50% - 4px); } }
.my-head { scroll-margin-top: 56px; }

/* ---------- WICK Mall shops ---------- */
.ml-dlg { --mc: #F2C879; margin: auto; inset: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--mc) 30%, var(--line-2)); border-radius: 18px; background: #07080c; color: var(--bone); width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(880px, calc(100dvh - 32px)); max-height: none; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset; }
.ml-dlg::backdrop { background: rgba(3,4,8,.78); backdrop-filter: blur(6px); }
.ml-shell { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; background: radial-gradient(1200px 420px at 50% -120px, color-mix(in srgb, var(--mc) 12%, transparent), transparent 70%); }
.ml-dlg.det .ml-shell { overflow: hidden; }
.ml-top { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 16px 20px 14px; background: rgba(7,8,12,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ml-id { min-width: 0; }
.ml-id small { display: block; font-size: .62rem; letter-spacing: .2em; color: var(--mc); }
.ml-id h2 { margin: 2px 0 2px; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-id p { margin: 0; font-size: .8rem; color: var(--steel-2, #9aa0ab); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-bal { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.ml-bal small { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel, #7d838f); }
.ml-bal b { font-size: .95rem; }
.ml-x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: #0d0f14; color: var(--bone); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ml-x:hover { border-color: color-mix(in srgb, var(--mc) 60%, transparent); }
.ml-x:focus-visible, .ml-tabs button:focus-visible, .ml-tile:focus-visible, .ml-back:focus-visible, .ml-seg button:focus-visible { outline: 2px solid var(--mc); outline-offset: 2px; }

.ml-hero { margin: 16px 20px 0; display: grid; gap: 14px; align-items: stretch; }
.ml-hero.rep { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "img say" "img stand"; }
.ml-rep { grid-area: img; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); display: block; background: #0b0c11; }
.ml-say { grid-area: say; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); align-self: start; }
.ml-say small { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mc); }
.ml-say p { margin: 4px 0 0; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; min-height: 2.9em; }
.ml-stand { grid-area: stand; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--mc) 30%, var(--line)); background: rgba(10,11,16,.8); align-self: end; display: grid; gap: 8px; }
.ml-stand-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.ml-stand-h small { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel, #7d838f); }
.ml-stand-h b { font-size: 1rem; color: var(--mc); white-space: nowrap; }
.ml-bar { display: block; height: 6px; border-radius: 6px; background: #1a1c23; overflow: hidden; }
.ml-bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 60%, #000), var(--mc)); }
.ml-stand-n { font-size: .72rem; color: var(--steel-2, #9aa0ab); overflow-wrap: anywhere; }
.ml-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ml-chips span { min-width: 0; padding: 6px 8px; border-radius: 10px; background: #101219; border: 1px solid var(--line); display: grid; }
.ml-chips small { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel, #7d838f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-chips b { font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-hero.ban { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "feat say" "feat stand"; }
.ml-feat { grid-area: feat; display: grid; align-content: center; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--mc) 22%, transparent), transparent 70%), #0a0b10; min-height: 0; }
.ml-feat:empty { display: none; }
.ml-feat img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.ml-hero.ban .ml-note { grid-area: say; grid-row: 1 / span 2; }
.ml-dlg[data-shop="clothes"] .ml-hero.ban, .ml-dlg[data-shop="cards"] .ml-hero.ban { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "fit say"; }
.ml-dlg[data-shop="cards"] .ml-hero.ban { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say"; }
.ml-dlg[data-shop="shoes"] .ml-hero.ban, .ml-dlg[data-shop="golf"] .ml-hero.ban { grid-template-columns: minmax(0, 1fr); grid-template-areas: "feat"; }
.ml-dlg[data-shop="shoes"] .ml-feat, .ml-dlg[data-shop="golf"] .ml-feat { max-width: 620px; width: 100%; justify-self: center; }
.ml-fit { grid-area: fit; width: 120px; aspect-ratio: 3 / 4; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--mc) 25%, transparent), transparent 70%), #0a0b10; display: grid; place-items: end center; overflow: hidden; }
.ml-fit img { height: 94%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.ml-note { min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10,11,16,.8); align-self: center; }
.ml-note b { font-size: .95rem; }
.ml-note p { margin: 4px 0 6px; font-size: .84rem; color: var(--steel-2, #9aa0ab); overflow-wrap: anywhere; }
.ml-note small { font-size: .7rem; color: var(--mc); }

.ml-tabs { position: sticky; top: var(--ml-top, 86px); z-index: 2; margin: 16px 0 0; padding: 10px 20px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; background: rgba(7,8,12,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.ml-tabs::-webkit-scrollbar { display: none; }
.ml-tabs button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #0d0f14; color: var(--steel-2, #b3b8c2); font: 700 .8rem/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s, box-shadow .2s; }
.ml-tabs button:hover { color: var(--bone); }
.ml-tabs button.on { color: var(--bone); border-color: color-mix(in srgb, var(--mc) 70%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--mc) 30%, transparent); background: #0b0c10; }

.ml-body { padding: 14px 20px 28px; }
.ml-hint { margin: 0 0 12px; font-size: .82rem; color: var(--steel-2, #9aa0ab); overflow-wrap: anywhere; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(176px, calc(50% - 6px)), 1fr)); gap: 12px; }
.ml-tile { position: relative; min-width: 0; display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; border-radius: 14px; border: 1px solid var(--line); background: #0c0d12; color: var(--bone); cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ml-tile:hover { border-color: color-mix(in srgb, var(--mc) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--mc) 18%, transparent); }
.ml-img { position: relative; display: block; aspect-ratio: 4 / 5; background: radial-gradient(circle at 50% 42%, #1b1d26, #08090d 72%); overflow: hidden; }
.ml-img > img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; display: block; }
.ml-img.av > img { inset: 4% 10% 0; width: 80%; height: 96%; object-position: center bottom; }
.ml-img.cd { aspect-ratio: 5 / 7; background: #08090d; padding: 10px; }
.ml-img.cd .rp-mini { position: absolute; inset: 10px; aspect-ratio: auto; }
.ml-tile.is-lock .ml-img > img { filter: saturate(.6) brightness(.62); }
.ml-sw { position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.ml-sw.pr { background: conic-gradient(#ff4fd8, #4ff3ff, #b8ff4f, #ffd84f, #ff4fd8); }
.ml-tt { min-width: 0; display: grid; grid-template-rows: auto auto auto auto; align-content: start; gap: 3px; padding: 10px 12px 12px; }
.ml-brand { display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.ml-tt b { font-size: .88rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; overflow-wrap: anywhere; }
.ml-pr { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; font-size: .78rem; }
.ml-pr > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-badge { flex: 0 0 auto; font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--steel-2, #b3b8c2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ml-badge.open { color: #9ff7c8; border-color: rgba(92,255,176,.35); }
.ml-badge.wait { color: #9ff4ff; border-color: rgba(46,242,255,.35); }
.ml-badge.alloc { color: #ffd98a; border-color: rgba(242,200,121,.45); }
.ml-badge.invite { color: #ffc4e0; border-color: rgba(255,158,196,.5); }
.ml-badge.own { color: var(--bone); border-color: var(--line-2); }
.ml-badge.wear { color: #C8FF2E; border-color: rgba(200,255,46,.5); box-shadow: 0 0 10px rgba(200,255,46,.2); }
.ml-badge.lock { color: var(--steel, #7d838f); }
.ml-need { font-size: .7rem; color: var(--steel, #7d838f); min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-need.hot { color: #ffd98a; }
.ml-cardbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ml-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: #0d0f14; }
.ml-seg button { padding: 7px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--steel-2, #b3b8c2); font: 700 .74rem/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.ml-seg button.on { background: #050506; color: var(--bone); box-shadow: 0 0 0 1px rgba(200,255,46,.55) inset, 0 0 12px rgba(200,255,46,.25); }

/* detail panel: covers the shop, scrolls on its own */
.ml-det { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; background: #07080c; padding: 18px 22px 28px; }
.ml-back { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #0d0f14; color: var(--bone); font: 700 .8rem/1 var(--font-body); cursor: pointer; }
.ml-back::before { content: "\2190  "; }
.ml-det-in { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; align-items: start; }
.ml-det-img { position: relative; aspect-ratio: 1; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, #1d1f29, #07080b 72%); overflow: hidden; }
.ml-det-img > img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }
.ml-det-img.cd { aspect-ratio: auto; padding: 18px; display: grid; place-items: center; }
.ml-det-img.cd .rp-cq { width: min(320px, 100%); }
.ml-det-tx { min-width: 0; display: grid; gap: 10px; }
.ml-det-tx h3 { margin: 0; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); overflow-wrap: anywhere; }
.ml-d { margin: 0; color: var(--steel-2, #b3b8c2); font-size: .92rem; overflow-wrap: anywhere; }
.ml-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ml-facts div { min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0c0d12; }
.ml-facts dt { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel, #7d838f); }
.ml-facts dd { margin: 2px 0 0; font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-req { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ml-req li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0c0d12; }
.ml-req li i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-style: normal; font-size: .75rem; color: #C8FF2E; }
.ml-req li.ok { border-color: rgba(200,255,46,.28); }
.ml-req li.ok i { border-color: rgba(200,255,46,.6); box-shadow: 0 0 8px rgba(200,255,46,.25); }
.ml-req span { min-width: 0; display: grid; }
.ml-req b { font-size: .84rem; overflow-wrap: anywhere; }
.ml-req small { font-size: .72rem; color: var(--steel, #7d838f); overflow-wrap: anywhere; }
.ml-said { margin: 0; padding: 10px 12px; border-left: 2px solid var(--mc); background: rgba(255,255,255,.03); border-radius: 0 10px 10px 0; font-size: .9rem; overflow-wrap: anywhere; }
.ml-warn { margin: 0; font-size: .8rem; color: #ffb4a8; overflow-wrap: anywhere; }
.ml-act { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-act .btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; }

/* profile card: mall gear */
.pf-ml { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(242,200,121,.3); background: linear-gradient(135deg, rgba(242,200,121,.08), rgba(6,7,12,.4)); display: grid; gap: 6px; }
.pf-ml small { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #F2C879; }
.pf-ml p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-ml p span { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.pf-ml p span img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; background: #0b0c11; }
.pf-ml p span b { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ml em { font-size: .74rem; color: var(--steel, #7d838f); }
.pf-mlc img { width: 34px; height: 42px; object-fit: contain; border-radius: 8px; background: #0b0c11; border: 1px solid var(--line); }

@media (max-width: 760px) {
  .ml-dlg { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .ml-top { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; gap: 10px; }
  .ml-bal { display: none; }
  .ml-hero { margin: 12px 14px 0; }
  .ml-hero.rep, .ml-hero.ban { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "img" "say" "stand" !important; }
  .ml-hero.ban { grid-template-areas: "feat" "say" "stand" !important; }
  .ml-dlg[data-shop="clothes"] .ml-hero.ban { grid-template-columns: 96px minmax(0, 1fr) !important; grid-template-areas: "fit say" !important; }
  .ml-fit { width: 96px; }
  .ml-hero.ban .ml-note { grid-row: auto; }
  .ml-tabs { padding: 10px 14px; margin-top: 12px; }
  .ml-body { padding: 12px 14px 24px; }
  .ml-grid { gap: 10px; }
  .ml-det { padding: 12px 14px 24px; }
  .ml-det-in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ml-det-img { max-width: 360px; width: 100%; justify-self: center; }
  .ml-act .btn { flex: 1 1 100%; }
}
html.rm .ml-tile, html.rm .ml-tabs button { transition: none; }

.ml-pr .coin { margin-right: 3px; vertical-align: -2px; }
.ml-det[hidden] { display: none; }
.ml-dlg[data-shop="clothes"] .ml-hero.ban .ml-note, .ml-dlg[data-shop="cards"] .ml-hero.ban .ml-note { grid-row: auto; }

/* ---------- player collection (profile → View full collection) ---------- */
.pf-all { width: 100%; margin-top: 10px; justify-content: center; }
.cx-dlg { width: min(880px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 32px)); padding: 0; display: none; overflow: hidden; }
.cx-dlg[open] { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
.cx-dlg .sx-x { z-index: 3; }
.cx-h { padding: 22px 24px 4px; display: grid; gap: 2px; min-width: 0; }
.cx-h small { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #F2C879; }
.cx-h b { font-family: var(--font-display); font-size: clamp(1.2rem, 3.4vw, 1.6rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 44px; }
.cx-st { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px 24px 4px; }
.cx-st div { min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0c0d12; display: grid; gap: 3px; }
.cx-st small { font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-st b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tabs { display: flex; gap: 8px; padding: 12px 24px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: #0d0f14; color: var(--steel-2, #b3b8c2); font: 700 .8rem/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.cx-tabs button span { font-size: .68rem; color: var(--steel); }
.cx-tabs button.on { color: var(--bone); border-color: rgba(242,200,121,.7); box-shadow: 0 0 14px rgba(242,200,121,.25); }
.cx-b { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 24px 24px; min-height: 0; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .72rem; color: var(--steel-2, #b3b8c2); }
.cx-chip b { color: var(--bone); }
.cx-chip.p-one { border-color: rgba(255,92,168,.6); } .cx-chip.p-black { border-color: rgba(244,246,241,.5); } .cx-chip.p-gold { border-color: rgba(242,200,121,.7); } .cx-chip.p-holo { border-color: rgba(46,242,255,.55); }
.cx-cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, calc(33.3% - 6px)), 1fr)); gap: 10px; }
.cx-cg .pf-cd { width: 100%; }
.cx-mg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - 5px)), 1fr)); gap: 10px; }
.cx-it { min-width: 0; border-radius: 12px; border: 1px solid var(--line); background: #0c0d12; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.cx-it.inv { border-color: rgba(242,200,121,.55); box-shadow: 0 0 16px rgba(242,200,121,.12); }
.cx-img { position: relative; display: block; aspect-ratio: 4 / 5; background: radial-gradient(circle at 50% 42%, #1b1d26, #08090d 72%); overflow: hidden; }
.cx-img > img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.cx-on, .cx-rare { position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 999px; font: 700 .58rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; font-style: normal; background: rgba(6,7,12,.82); border: 1px solid rgba(46,242,255,.5); color: #bff8ff; }
.cx-rare { left: auto; right: 8px; top: auto; bottom: 8px; border-color: rgba(242,200,121,.6); color: #F2C879; }
.cx-tx { min-width: 0; padding: 9px 10px 11px; display: grid; gap: 2px; }
.cx-tx small { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tx b { font-size: .84rem; line-height: 1.25; overflow-wrap: anywhere; }
.cx-tx em { font-style: normal; font-size: .76rem; color: #F2C879; }
.cx-note, .cx-none { margin: 14px 0 0; font-size: .78rem; color: var(--steel); }
@media (max-width: 640px) {
  .cx-dlg { width: 100vw; height: 100dvh; max-height: 100dvh; max-width: 100vw; border-radius: 0; }
  .cx-h { padding: 18px 16px 2px; } .cx-st { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 16px 2px; }
  .cx-tabs { padding: 10px 16px; } .cx-b { padding: 14px 16px 22px; }
}

/* ---------- Avatar Studio: collapsible categories ---------- */
.sd-opts { gap: 10px; }
.sd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-tools .mono { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-2); margin-right: auto; }
.sd-tools button { border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); border-radius: 999px; padding: 6px 12px; font: 600 .74rem var(--font-body, inherit); cursor: pointer; min-height: 32px; }
.sd-tools button:hover { border-color: rgba(46,242,255,.6); box-shadow: 0 0 12px rgba(46,242,255,.18); }
.sd-row { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); padding: 0 12px 12px; }
.sd-row.shut { padding-bottom: 0; }
.sd-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; cursor: pointer; padding: 6px 0; }
.sd-h:focus-visible { outline: 2px solid #2EF2FF; outline-offset: 2px; border-radius: 8px; }
.sd-hn { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); font-weight: 600; white-space: nowrap; }
.sd-hp { font-style: normal; font-size: .78rem; color: var(--steel-2); min-width: 0; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-chev { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .22s var(--ease, ease), border-color .2s; }
.sd-chev::before { content: ''; width: 7px; height: 7px; border-right: 2px solid #2EF2FF; border-bottom: 2px solid #2EF2FF; transform: translateY(-2px) rotate(45deg); }
.sd-row.shut .sd-chev { transform: rotate(-90deg); }
.sd-h:hover .sd-chev { border-color: rgba(46,242,255,.6); }
.sd-row:not(.shut) > .sd-h .sd-hp { color: #2EF2FF; }
.sd-row.shut > .sd-body { display: none; }
.sd-body { padding-top: 4px; }
.sd-sec .sd-body > .sd-store:first-child { margin-top: 0; }
.sd-sec .sd-row { border: 0; background: none; padding: 0; }
.ml-tiles .ml-t { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; text-align: center; }
.ml-tiles .ml-t img { width: 60px; height: 60px; object-fit: contain; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(242,200,121,.16), transparent 70%); }
.ml-tiles .ml-t .none { width: 60px; height: 60px; display: grid; place-items: center; }
.ml-tiles .ml-t .sd-n { font-size: .7rem; line-height: 1.2; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ml-tiles .ml-t .ml-br { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: #F2C879; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-sec h3 { margin-top: 10px; }

/* ---------- gifts, drops and drinks ---------- */
.gf-dlg { width: min(640px, calc(100vw - 24px)); }
.gf-dlg h2 { margin: 0 40px 4px 0; overflow-wrap: anywhere; }
.gf-lim { margin: 0 0 14px; }
.gf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.gf-tabs button { border: 1px solid var(--line-2); background: var(--surface); color: var(--steel-2); border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; min-height: 38px; }
.gf-tabs button.on { color: var(--bone); border-color: rgba(46,242,255,.7); box-shadow: 0 0 14px rgba(46,242,255,.2) inset; }
.gf-list { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.gf-empty { color: var(--steel-2); padding: 18px 4px; }
.gf-chips, .gf-piles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gf-chips button, .gf-piles button { border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); border-radius: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 42px; }
.gf-chips button.on, .gf-piles button.on, .gf-it.on { border-color: #2EF2FF; box-shadow: 0 0 0 1px #2EF2FF inset, 0 0 18px rgba(46,242,255,.25); }
.gf-piles { margin-top: 12px; } .gf-piles > span { color: var(--steel-2); font-size: .82rem; margin-right: 4px; }
.gf-amt, .gf-note { display: grid; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--steel-2); }
.gf-amt input, .gf-note input { background: #07080d; border: 1px solid var(--line-2); border-radius: 10px; color: var(--bone); padding: 10px 12px; font: 600 1rem var(--font-mono, monospace); min-width: 0; width: 100%; box-sizing: border-box; }
.gf-amt input:focus, .gf-note input:focus { outline: none; border-color: #2EF2FF; }
.gf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.gf-it { position: relative; border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); border-radius: 14px; padding: 8px 8px 10px; cursor: pointer; display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.gf-it img { width: 72px; height: 72px; object-fit: contain; }
.gf-it b { font-size: .78rem; line-height: 1.2; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.gf-it small { font-size: .66rem; color: var(--steel-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-it .mono { font-size: .72rem; color: #FFC94A; }
.gf-it em { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(6,7,12,.85); border: 1px solid rgba(242,200,121,.5); color: #F2C879; padding: 2px 6px; border-radius: 999px; }
.gf-cf { position: relative; width: 62px; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; display: block; background: #0B0D14; }
.gf-cf .rp-mini-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.gf-cf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gf-cf .rp-mini-p { position: absolute; left: 3px; bottom: 3px; font-size: .5rem; font-style: normal; background: rgba(0,0,0,.7); padding: 1px 4px; border-radius: 4px; }
.gf-it.drink { color: var(--c); } .gf-it.drink b { color: var(--bone); }
.gf-gl { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); filter: drop-shadow(0 0 6px var(--c)); }
.gf-gl svg { width: 34px; height: 34px; }
.gf-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.gf-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font-size: .86rem; color: var(--steel-2); margin: 0; }
.gf-sum b { color: var(--bone); text-align: right; } .gf-sum .gf-tot { color: #FFC94A; } .gf-sum small { color: var(--steel-2); font-weight: 500; }
.gf-warn { margin: 0; font-size: .8rem; color: #FFB86B; border: 1px solid rgba(255,184,107,.35); background: rgba(255,184,107,.06); border-radius: 10px; padding: 8px 10px; }
.gf-rules { margin: 12px 0 0; line-height: 1.45; }
.gf-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.gf-ico img { width: 22px; height: 22px; object-fit: contain; }
.gf-ico.gcd { position: relative; width: 16px; height: 22px; overflow: hidden; border-radius: 3px; }
.gf-ico.gcd > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.gf-ico.gcd .rp-mini-p { display: none; }
.gf-ico.drink { color: var(--c); } .gf-ico.drink svg { width: 20px; height: 20px; }
.pf-rl.you { color: #2EF2FF; }
.pf-dk { color: var(--dc); font-size: .72rem; }
.pz-card.pf .pf-b .pf-gift { border-color: rgba(242,200,121,.45); }
@media (max-width: 560px) {
  .gf-dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 18px 16px; }
  .gf-list { max-height: none; }
  .gf-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .sd-row { padding: 0 10px 10px; }
  .ml-tiles .ml-t { width: 84px; }
}
.sd-opts { grid-template-columns: minmax(0, 1fr); }
.sd-row, .sd-tools { min-width: 0; }
.sd-tools { padding-right: 46px; }
.sd-body > .sd-note:last-child { margin-top: 10px; }
.ml-tiles .ml-t .none { width: 34px; height: 34px; margin: 13px; border-radius: 50%; border: 1.5px dashed var(--line-2); }
@media (max-width: 760px) { .sd-tools { padding-right: 0; } }

/* ---------- mall seasons ---------- */
.ml-ssn { margin: 12px 20px 0; }
.ml-ssn-in { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sc, #A06BFF) 40%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--sc, #A06BFF) 14%, #0a0b10), #0a0b10 70%); color: var(--bone); font: 500 .8rem/1.3 var(--font-body); text-align: left; cursor: pointer; min-width: 0; }
.ml-ssn-in:hover { border-color: color-mix(in srgb, var(--sc, #A06BFF) 70%, transparent); }
.ml-ssn-in:focus-visible { outline: 2px solid var(--sc, #A06BFF); outline-offset: 2px; }
.ml-ssn-in > span { min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.ml-ssn-in i { font-style: normal; font-size: .72rem; color: var(--steel-2, #9aa0ab); white-space: nowrap; }
.ml-ssn-s small { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel, #7d838f); }
.ml-ssn-s b { color: var(--sc, #A06BFF); letter-spacing: .04em; text-transform: uppercase; font-size: .84rem; }
.ml-ssn-d b, .ml-ssn-v b { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2, #b3b8c2); }
.ml-ssn-v.on b { color: #9ff7c8; }
.ml-ssn-go { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc, #A06BFF); white-space: nowrap; }
.ml-ssn-go:empty { display: none; }
.ml-hero.ban.ssn { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "feat say"; }
.ml-hero.ban.ssn .ml-note { grid-row: auto; }
.ml-sfeat { grid-area: feat; display: grid; place-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--sc) 26%, transparent), transparent 70%), #07080c; min-height: 180px; }
.ml-sfeat img { width: 100%; max-height: 240px; object-fit: contain; display: block; }
.ml-note p + p { margin-top: 0; }
.ml-drop { display: grid; grid-template-columns: minmax(96px, 160px) minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 12px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--mc) 40%, var(--line)); background: #0a0b10; }
.ml-drop img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.ml-drop > div { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.ml-drop small { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mc); overflow-wrap: anywhere; }
.ml-drop b { font-size: 1.05rem; overflow-wrap: anywhere; }
.ml-drop p { margin: 0; font-size: .82rem; color: var(--steel-2, #9aa0ab); overflow-wrap: anywhere; }
.ml-drop span { font-size: .78rem; color: var(--bone); }
.ml-drop .btn { margin-top: 4px; }
.ml-badge.ss-season { color: #d2b8ff; border-color: rgba(160,107,255,.5); }
.ml-badge.ss-drop { color: #ffd0a8; border-color: rgba(255,138,61,.55); box-shadow: 0 0 10px rgba(255,138,61,.18); }
.ml-badge.ss-vault { color: #9ff7c8; border-color: rgba(92,255,176,.4); }
.ml-badge.ss-off, .ml-badge.ss-past, .ml-badge.ss-soon { color: var(--steel-2, #9aa0ab); }
.ml-tile.is-drop { border-color: rgba(255,138,61,.45); }
.ml-ssl { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0d0f14; font-size: .8rem; color: var(--steel-2, #b3b8c2); overflow-wrap: anywhere; }
.ml-ssl.ss-drop { border-color: rgba(255,138,61,.4); }
.ml-ssl.ss-season { border-color: rgba(160,107,255,.4); }
.ml-lnk { background: none; border: 0; padding: 0; color: var(--mc); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .ml-ssn { margin: 10px 12px 0; }
  .ml-ssn-in { gap: 6px 12px; padding: 9px 12px; }
  .ml-ssn-go { margin-left: 0; }
  .ml-hero.ban.ssn { grid-template-columns: 92px minmax(0, 1fr) !important; grid-template-areas: "feat say" !important; gap: 10px; margin: 10px 12px 0; }
  .ml-sfeat { min-height: 0; padding: 6px; align-self: stretch; } .ml-sfeat img { max-height: 150px; }
  .ml-hero.ban.ssn .ml-note { padding: 12px; } .ml-hero.ban.ssn .ml-note p { font-size: .78rem; }
  .ml-drop { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- gift received card ---------- */
.gf-got { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 74px); z-index: 70; width: min(440px, calc(100vw - 24px)); transform: translate(-50%, -14px); opacity: 0; transition: transform .28s ease, opacity .28s ease; pointer-events: none; }
.gf-got.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.gf-got[hidden] { display: none; }
.gf-got-in { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 16px 14px 14px; border-radius: 16px; border: 1px solid rgba(242,200,121,.45); background: linear-gradient(140deg, rgba(242,200,121,.1), rgba(10,11,16,.97) 55%), #0a0b10; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 22px rgba(242,200,121,.12); color: var(--bone); }
.gf-got-av { width: 64px; height: 84px; object-fit: contain; object-position: center bottom; border-radius: 12px; background: radial-gradient(circle at 50% 85%, rgba(242,200,121,.22), transparent 70%), #0d0f14; border: 1px solid var(--line); display: block; }
.gf-got-av.ph { display: grid; place-items: center; font: 700 1.6rem/1 var(--font-display, inherit); color: #F2C879; }
.gf-got-tx { min-width: 0; display: grid; gap: 6px; padding-right: 22px; }
.gf-got-tx small { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: #F2C879; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-got-tx > b { font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.gf-got-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: #0d0f14; border: 1px solid var(--line); }
.gf-got-row strong { display: block; font-size: .88rem; overflow-wrap: anywhere; }
.gf-got-row em { display: block; font-style: normal; font-size: .74rem; color: var(--steel-2, #9aa0ab); overflow-wrap: anywhere; }
.gf-got-it { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: #07080c; overflow: hidden; position: relative; }
.gf-got-it img { width: 44px; height: 44px; object-fit: contain; }
.gf-got-it.dk { color: var(--c); }
.gf-got-it.co .coin { transform: scale(1.8); }
.gf-got-it.cd > * { position: absolute; inset: 2px 9px; width: auto; height: auto; border-radius: 4px; overflow: hidden; }
.gf-got-it.cd .rp-mini-p { display: none; }
.gf-got-tx q { font-size: .84rem; color: var(--bone); font-style: normal; overflow-wrap: anywhere; }
.gf-got-tx q::before { content: '\201C'; } .gf-got-tx q::after { content: '\201D'; }
.gf-got-tx p { margin: 0; font-size: .74rem; color: var(--steel-2, #9aa0ab); overflow-wrap: anywhere; }
.gf-got-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gf-got-act .btn { min-width: 0; }
.gf-got-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: #0d0f14; color: var(--bone); font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.gf-got-x:focus-visible, .gf-got-act .btn:focus-visible { outline: 2px solid #F2C879; outline-offset: 2px; }
@media (max-width: 640px) {
  .gf-got { top: calc(env(safe-area-inset-top, 0px) + 62px); }
  .gf-got-in { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .gf-got-av { width: 52px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) { .gf-got { transition: opacity .2s; transform: translate(-50%, 0); } }

/* ---- mall piece close-up (tap any watch, bag, shoe or golf piece) ---- */
.mz-dlg { width: min(460px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); margin: max(10px, calc((100dvh - 800px) / 2)) auto auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid color-mix(in srgb, var(--mz, #9FE8FF) 40%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--mz, #9FE8FF) 18%, transparent), 0 30px 80px rgba(0,0,0,.6); }
.mz-dlg .sx-x { z-index: 5; }
.mz-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; perspective: 900px; touch-action: pan-y; background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--mz, #9FE8FF) 16%, #161822), #07080c 70%); }
.mz-glow { position: absolute; inset: 14% 14% 22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mz, #9FE8FF) 34%, transparent), transparent 66%); filter: blur(18px); animation: mzBreath 4.5s ease-in-out infinite; }
.mz-floor { position: absolute; left: 18%; right: 18%; bottom: 9%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); }
.mz-stage.inv .mz-glow { background: radial-gradient(circle, rgba(242,200,121,.42), transparent 66%); }
.mz-tilt { position: absolute; inset: 8% 12% 17%; display: grid; place-items: center; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); cursor: zoom-in; animation: mzFloat 5s ease-in-out infinite; }
.mz-tilt.live { transition: transform .08s linear; animation: none; }
.mz-tilt.zoom { transform: scale(2.1); cursor: zoom-out; animation: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mz-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px color-mix(in srgb, var(--mz, #9FE8FF) 22%, transparent)); opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); user-select: none; -webkit-user-drag: none; }
.mz-img.in { opacity: 1; transform: none; }
.mz-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 25%), rgba(255,255,255,.22), transparent 42%); opacity: .0; transition: opacity .3s; }
.mz-tilt.live .mz-sheen { opacity: 1; }
.mz-nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(6,7,12,.7); color: #F4F6F1; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; cursor: pointer; z-index: 3; }
.mz-nav.prev { left: 10px; } .mz-nav.next { right: 10px; }
.mz-nav:hover, .mz-nav:focus-visible { border-color: var(--mz, #9FE8FF); box-shadow: 0 0 14px color-mix(in srgb, var(--mz, #9FE8FF) 40%, transparent); outline: none; }
.mz-n { position: absolute; left: 14px; top: 14px; font-size: .66rem; letter-spacing: .12em; color: rgba(244,246,241,.6); }
.mz-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,246,241,.42); pointer-events: none; }
.mz-tx { padding: 16px 20px 20px; display: grid; gap: 8px; min-width: 0; }
.mz-br { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mz, #9FE8FF); overflow-wrap: anywhere; }
.mz-tx h3 { margin: 0; font-size: clamp(1.1rem, 4.4vw, 1.4rem); line-height: 1.2; overflow-wrap: anywhere; }
.mz-ch { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mz-ch span { font-size: .68rem; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mz, #9FE8FF) 45%, transparent); color: #F4F6F1; background: color-mix(in srgb, var(--mz, #9FE8FF) 10%, transparent); white-space: nowrap; }
.mz-d { margin: 0; color: var(--steel, #9aa0ab); font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.mz-f { margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mz-f div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--line, rgba(255,255,255,.08)); }
.mz-f div.w { grid-column: 1 / -1; }
.mz-f dt { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel, #7d838f); }
.mz-f dd { margin: 2px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
@keyframes mzFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes mzBreath { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mz-tilt, .mz-glow { animation: none; } .mz-tilt { transition: none; } }
[data-mlz] { cursor: zoom-in; }
button.cx-it { font: inherit; color: inherit; text-align: left; padding: 0; cursor: zoom-in; width: 100%; transition: border-color .2s, box-shadow .2s, transform .2s; }
button.cx-it:hover, button.cx-it:focus-visible { border-color: rgba(159,232,255,.5); box-shadow: 0 0 18px rgba(159,232,255,.14); outline: none; }
.pf-ml p span[data-mlz]:hover, .pf-ml p span[data-mlz]:focus-visible { border-color: rgba(242,200,121,.6); outline: none; }
.pf-mlc img[data-mlz]:focus-visible { outline: 2px solid #F2C879; outline-offset: 1px; }

@media (hover: none) { .mz-hint { font-size: 0; } .mz-hint::after { content: "Tap to zoom"; font-size: .6rem; } }

/* plaza name-plate badge: zoom bubble on hover (tap on phones) */
.ml-hb { position: fixed; z-index: 90; width: 196px; padding: 10px 12px 12px; border-radius: 16px; pointer-events: none; text-align: center; background: linear-gradient(180deg, rgba(20,22,32,.96), rgba(8,9,14,.97)); border: 1px solid rgba(244,246,241,.16); box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(46,242,255,.08), 0 0 26px rgba(46,242,255,.12); transform: translate(-50%, -100%) scale(.6); transform-origin: calc(50% + var(--ax, 0px)) 100%; opacity: 0; transition: opacity .16s ease, transform .2s cubic-bezier(.2,.9,.3,1.2); }
.ml-hb.below { transform: translate(-50%, 0) scale(.6); transform-origin: calc(50% + var(--ax, 0px)) 0; }
.ml-hb.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.ml-hb.below.on { transform: translate(-50%, 0) scale(1); }
.ml-hb::after { content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); bottom: -6px; width: 11px; height: 11px; margin-left: -6px; background: rgba(8,9,14,.97); border-right: 1px solid rgba(244,246,241,.16); border-bottom: 1px solid rgba(244,246,241,.16); transform: rotate(45deg); }
.ml-hb.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.ml-hb-st { height: 132px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 8px; background: radial-gradient(60% 60% at 50% 45%, rgba(140,107,255,.22), transparent 70%), rgba(255,255,255,.03); overflow: hidden; }
.ml-hb-st img { max-width: 86%; max-height: 118px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.ml-hb small { display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,246,241,.55); overflow-wrap: anywhere; }
.ml-hb b { display: block; margin: 2px 0 3px; font-family: Satoshi, system-ui, sans-serif; font-size: .92rem; line-height: 1.2; color: #F4F6F1; overflow-wrap: anywhere; }
.ml-hb span { display: block; font-size: .7rem; color: #C8FF2E; }
@media (prefers-reduced-motion: reduce) { .ml-hb, .ml-hb.below { transition: opacity .12s; } }

.rp-qty button:disabled { opacity: .38; cursor: not-allowed; }
.rp-qty button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Originals share the Mines layout (desktop): no rules rail, board left, play column right, cash-out panel, How to play folded below ---------- */
.og-felt, .pl-felt, .kn-felt, .vt-felt { box-shadow: 0 0 0 1px rgba(var(--acc, 200,255,46), .26), 0 0 46px -16px rgba(var(--acc, 200,255,46), .34); transition: box-shadow .35s ease; }
.pl-felt { --acc: 255,46,136; } .kn-felt { --acc: 46,242,255; } .vt-felt { --acc: 140,107,255; }
.og-felt.rising, .pl-felt.rising, .kn-felt.rising, .vt-felt.rising { box-shadow: 0 0 0 1px rgba(200,255,46,.5), 0 0 60px -10px rgba(200,255,46,.45); }
.og-felt.falling, .pl-felt.falling, .kn-felt.falling, .vt-felt.falling { box-shadow: 0 0 0 1px rgba(140,107,255,.55), 0 0 60px -10px rgba(140,107,255,.5); }
.og-felt.danger, .pl-felt.danger, .kn-felt.danger, .vt-felt.danger { box-shadow: 0 0 0 2px rgba(255,59,92,.7), 0 0 70px -10px rgba(255,59,92,.55); }
@media (min-width: 1181px) {
  :is(#view-crash, #view-dice, #view-limbo, #view-plinko, #view-keno, #view-vault) .table-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  :is(#view-crash, #view-dice, #view-limbo, #view-plinko, #view-keno, #view-vault) .dealer-panel { display: none; }
  :is(#view-crash, #view-dice, #view-limbo, #view-plinko, #view-keno, #view-vault) .howto-m { display: block; grid-column: 1; order: 1; margin-top: 0; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) { --ogb: max(380px, min(560px, calc(100vh - 250px), calc(100vw - 790px))); display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); grid-template-rows: auto repeat(8, min-content) minmax(0, 1fr); column-gap: 20px; row-gap: 12px; justify-content: center; align-content: start; padding: 18px 22px 22px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) > * { grid-column: 2; margin-left: 0 !important; margin-right: 0 !important; min-width: 0; }
  :is(#crFelt, #dcFelt, #lbFelt) > .og-top { grid-column: 1 / -1; grid-row: 1; }
  #crFelt > .cr-stage, #dcFelt > .dc-stage, #lbFelt > .lb-stage { grid-column: 1; grid-row: 2 / -1; width: 100%; max-width: none; align-self: start; margin: 0 !important; }
  #crFelt > .cr-stage { height: clamp(400px, calc(100vh - 290px), 760px) !important; }
  #dcFelt > .dc-stage, #lbFelt > .lb-stage { min-height: clamp(400px, calc(100vh - 290px), 760px); justify-content: center; }
  #pFelt > .pl-wrap, #kFelt > .kn-wrap, #vFelt > .vt-wrap { grid-column: 1; grid-row: 1 / -1; width: 100%; max-width: none; align-self: start; margin: 0 !important; }
  #kFelt > .kn-pay { min-height: 0 !important; }
  :is(#pFelt, #kFelt, #vFelt) { height: auto !important; max-height: none !important; overflow: hidden; }
  #view-plinko #pFelt .pl-wrap { min-height: 0; flex: none; }
  #view-vault #vFelt .vt-wrap { height: clamp(440px, calc(100vh - 220px), 800px); min-height: 0; flex: none; }
  #view-keno #kFelt .kn-wrap { height: clamp(380px, calc(100vh - 290px), 760px); min-height: 0; flex: none; }
  #view-plinko #pFelt .pl-wrap > .pl-canvas { position: relative; inset: auto; height: clamp(420px, calc(100vh - 250px), 820px) !important; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) > .status { margin: 0; text-align: left; font-size: 14px !important; line-height: 1.4; min-height: 2.8em; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) > .controls:not(.kit-ride) { align-self: start; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .pl-opts { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 14px; margin: 0; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline .seg { flex: 1 1 auto; min-width: 0; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline .seg { display: flex; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline .seg button { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline .auto-go { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .controls .chips { gap: 6px; flex-wrap: nowrap; justify-content: space-between; margin: 0; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .controls .chip { width: 38px; height: 38px; font-size: 10px; flex: 0 0 38px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .controls .bet-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: stretch; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .controls .bet-amt { flex: 1 1 96px; min-width: 0; box-sizing: border-box; padding: 6px 10px 7px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .controls .bet-row .btn.sm { flex: 0 0 auto; padding: 8px 9px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .controls .bet-row .btn-primary { flex: 1 1 100%; width: 100%; min-height: 50px; font-size: 17px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) > .wr-legend { justify-content: center; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) > .dock-spacer { display: none !important; }
  #view-limbo #lbFelt > .og-top { position: relative; left: auto; right: auto; top: auto; pointer-events: auto; }
  #view-limbo #lbFelt > .og-top h2 { font-size: clamp(22px, 2vw, 34px); }
  #view-limbo #lbFelt #lbOpts { flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; font-size: inherit; }
  #view-limbo #lbFelt #lbOpts .auto-opts { padding-left: 0; }
  #view-limbo #lbFelt > .status { min-height: 2.8em; }
}
@media (min-width: 1181px) and (max-width: 1399px) {
  #vFelt { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 14px; padding: 14px 14px 18px; }
  #vFelt .controls .chip { width: 32px; height: 32px; flex-basis: 32px; font-size: 9px; }
  #vFelt .controls .chips { gap: 3px; }
}
@media (max-width: 1180px) { #view-vault .howto-m { display: none; } }

/* Plaza staff: dealers and mall associates you can talk to */
.pz-tb { appearance: none; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, rgba(0,0,0,.4)); color: var(--c); font-family: inherit; font-size: .78rem; font-weight: 700; line-height: 1; padding: 9px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
.pz-tb:hover { background: color-mix(in srgb, var(--c) 20%, rgba(0,0,0,.4)); }
.pz-tb[hidden] { display: none; }
.pz-st-th { max-height: 170px; min-height: 64px; }
.pz-tk-th li.typing { display: inline-flex; gap: 4px; padding: 9px 12px; }
.pz-tk-th li.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: .35; animation: pzDot 1.1s infinite; }
.pz-tk-th li.typing i:nth-child(2) { animation-delay: .15s; } .pz-tk-th li.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pzDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pz-tk-th li.typing i { animation: none; opacity: .7; } }
@media (max-width: 560px) { .pz-st-th { max-height: 120px; min-height: 48px; } .pz-tb { padding: 8px 10px; max-width: 30vw; } .pz-prompt img { display: none; } }
@media (max-width: 430px) { .pz-prompt:has(#pzTalkB:not([hidden])) .pz-px { display: none; } .pz-prompt:has(#pzTalkB:not([hidden])) { padding-left: 12px; } .pz-st-th + .pz-tk-f + .pz-tk-acts button { padding: 5px 9px; font-size: .72rem; } }

/* ---------- Originals v2 (desktop): board fills the whole section width, controls deck underneath ----------
   Deck: left = status / game options, right = chips, bet and the play button. Page scrolls if needed. */
@media (min-width: 1181px) {
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) { --ogd: minmax(0, 1fr); display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-auto-rows: min-content; column-gap: 22px; row-gap: 12px; align-content: start; justify-content: stretch; padding: 18px 22px 22px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) > * { grid-column: 1; grid-row: auto; }
  :is(#crFelt, #dcFelt, #lbFelt, #mnFelt) > .og-top { grid-column: 1 / -1; grid-row: 1; }
  /* the board */
  #crFelt > .cr-stage, #dcFelt > .dc-stage, #lbFelt > .lb-stage, #pFelt > .pl-wrap, #kFelt > .kn-wrap, #mnFelt .mn-board { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; max-width: none !important; margin: 0 !important; align-self: stretch; }
  #crFelt > .cr-stage { height: clamp(380px, calc(100vh - 330px), 620px) !important; }
  #dcFelt > .dc-stage, #lbFelt > .lb-stage { min-height: clamp(360px, calc(100vh - 330px), 580px) !important; }
  #view-plinko #pFelt .pl-wrap { height: auto !important; min-height: 0 !important; }
  #view-plinko #pFelt .pl-wrap > .pl-canvas { height: clamp(360px, calc(100vh - 440px), 600px) !important; }
  #view-keno #kFelt .kn-wrap { height: auto !important; min-height: 0; padding-bottom: 14px; }
  #view-keno #kFelt .kn-grid { max-width: none !important; width: 100%; gap: 10px 12px !important; padding: 0 clamp(10px, 2vw, 28px); box-sizing: border-box; }
  #view-keno #kFelt .kn-grid > * { width: 100% !important; height: auto !important; aspect-ratio: 1.7 / 1; border-radius: 16px !important; font-size: clamp(16px, 1.5vw, 22px) !important; }
  #mnFelt .mn-board { grid-row: 2 / span 1 !important; }
  #mnFelt .mn-grid { width: 100% !important; }
  #mnFelt .mn-t { aspect-ratio: 1.8 / 1 !important; }
  /* deck, left column */
  #view-plinko #pFelt, #view-keno #kFelt, #view-mines #mnFelt, #view-dice #dcFelt, #view-limbo #lbFelt, #view-crash #crFelt { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt) > .status, #mnFelt > #mnMsg { grid-row: 3 !important; }
  #kFelt > .kn-bar, #crFelt > .cr-set, #mnFelt .mn-side { grid-row: 4 !important; }
  #kFelt > .kn-pay { grid-row: 5 !important; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) > .wr-legend { grid-row: 7 !important; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash) .table-layout { height: auto !important; grid-template-rows: auto auto !important; align-items: start; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash) .table-layout > .market { position: sticky; top: 84px; max-height: calc(100vh - 100px); }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt) > .controls:not(.kit-ride), #mnFelt > #mnControls { width: 100% !important; max-width: none !important; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt) > .status, #mnFelt > #mnMsg { grid-column: 1; text-align: left; margin: 0; }
  #kFelt > .kn-bar, #kFelt > .kn-pay, #crFelt > .cr-set, #mnFelt .mn-side { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; max-width: none; }
  #mnFelt > #mnRide, :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt) > [data-kit-ride], :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) > .kit-ride { grid-column: 1 !important; grid-row: auto !important; }
  /* deck, right column: chips, bet, play */
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt) > .controls:not(.kit-ride), #mnFelt > #mnControls { grid-column: 2 !important; grid-row: 3 / span 3 !important; align-self: start; margin: 0 !important; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) > .wr-legend { grid-column: 1 / -1 !important; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) .controls .chips { justify-content: flex-start; gap: 10px; }
  :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #mnFelt) .controls .chip { width: 44px; height: 44px; flex: 0 0 44px; font-size: 11px; }
}
@media (min-width: 1181px) {
  #mnFelt > #mnControls { align-items: stretch !important; gap: 12px; }
  #mnFelt > #mnControls > .chips { justify-content: flex-start; width: 100%; }
  #mnFelt > #mnControls > .bet-row { display: grid !important; width: 100% !important; max-width: none !important; grid-template-columns: minmax(0, 1fr) repeat(4, auto) !important; grid-template-areas: none !important; gap: 8px; align-items: stretch; }
  #mnFelt > #mnControls > .bet-row > * { grid-area: auto !important; grid-row: 1 !important; }
  #mnFelt > #mnControls > .bet-row > .bet-amt { grid-column: 1 !important; width: 100% !important; min-width: 0; }
  #mnFelt > #mnControls > .bet-row > .btn-primary { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; min-height: 50px; font-size: 17px; }
}

/* Friends tab: invite all / invite selected, to your suite or to a battle */
.pz-inv { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.pz-inv[hidden] { display: none; }
.pz-inv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.pz-inv-seg button { min-width: 0; padding: 7px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--steel); font: 600 .8rem/1.1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-inv-seg button.on { background: #0B0D12; color: #C8FF2E; box-shadow: 0 0 0 1px rgba(200,255,46,.55), 0 0 14px -2px rgba(200,255,46,.45); }
.pz-inv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pz-inv-acts .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.pz-inv-n { color: var(--steel); font-size: .74rem; line-height: 1.35; overflow-wrap: anywhere; }
#pzFriends li:not(.rq):not(.empty) { grid-template-columns: 20px 32px minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: 8px; }
.pz-ck { display: grid; place-items: center; width: 20px; height: 32px; cursor: pointer; }
.pz-ck input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1.5px solid var(--line-2); background: #0B0D12; display: grid; place-items: center; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pz-ck input::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #C8FF2E; border-bottom: 2px solid #C8FF2E; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s; }
.pz-ck input:checked { border-color: #C8FF2E; box-shadow: 0 0 10px -1px rgba(200,255,46,.55); }
.pz-ck input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.pz-ck input:disabled { opacity: .3; cursor: not-allowed; }
.pz-ck input:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }
@media (max-width: 420px) { .pz-inv-acts { grid-template-columns: 1fr; } }
#pzFriends [data-walk] { padding: 6px 9px; font-size: .74rem; min-height: 0; }

/* Rips: over-the-daily-limit notice under the rip button */
.rp-lim { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,90,78,.45); background: rgba(255,90,78,.08); color: #FFD9D5; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.rp-lim[hidden] { display: none; }
.rp-lim b { color: #fff; }
.rp-lim-pk { display: inline-flex; align-items: center; min-height: 32px; margin: 4px 4px 0 0; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(46,242,255,.5); background: #050607; color: #DFFBFF; font: 700 12px/1 var(--font-body, Satoshi, system-ui, sans-serif); cursor: pointer; box-shadow: 0 0 12px rgba(46,242,255,.18); white-space: nowrap; }
.rp-lim-pk:hover { border-color: #2EF2FF; box-shadow: 0 0 18px rgba(46,242,255,.34); }
.rp-lim.rp-lim-hit { animation: rpLimHit .5s ease; }
@keyframes rpLimHit { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .rp-lim.rp-lim-hit { animation: none; } }
.rp-go.rp-over { opacity: .78; }
.rp-shp .rp-ovl { font-size: 8.5px; }

/* ---------- Live tables (shared blackjack, baccarat, roulette) ---------- */
.lv-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lv-gc { display: flex; flex-direction: column; border-radius: var(--r-lg, 16px); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.lv-gc-art { height: 150px; display: grid; place-items: end center; background: radial-gradient(ellipse at 50% 90%, rgba(46,242,255,.16), transparent 70%), #07080d; overflow: hidden; }
.lv-gc-art img { height: 140px; width: auto; }
.lv-gc-wheel { width: 110px; height: 110px; margin-bottom: 20px; border-radius: 50%; background: repeating-conic-gradient(#c8243c 0 9.73deg, #14161d 9.73deg 19.46deg); border: 3px solid #E9C46A; box-shadow: 0 0 30px rgba(46,242,255,.25); }
.lv-gc-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lv-gc-b h3 { margin: 0; } .lv-gc-b p { margin: 0; } .lv-gc-b .btn { margin-top: auto; }
.lv-gc-l { color: #FFC94A; }
.lv-sel { padding: 11px 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--void); color: var(--bone); }
.lv-room .pk-felt::before { filter: var(--lvf, none); }
.lv-bj { --lvf: none; }
.lv-bac { --lvf: hue-rotate(180deg) saturate(1.15); }
.lv-ro { --lvf: hue-rotate(-38deg); }
.lv-room .pk-seat.empty span { white-space: nowrap; }
.lv-room .pk-center { top: 44%; gap: 6px; }
.lv-dseat { width: auto; }
.lv-dseat .pk-plate { width: auto; padding-right: 14px; }
.lv-dav { width: clamp(50px, 5vw, 70px); height: clamp(60px, 6.2vw, 86px); margin: 0; }
.lv-room #lvDealer .pk-seat { z-index: 1; }
.lv-dh { display: flex; gap: clamp(3px, .5vw, 6px); min-height: clamp(54px, 7.8vw, 90px); justify-content: center; }
.lv-dh .card.slot { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14); box-shadow: none; }
.lv-cards { flex-direction: column; align-items: center; gap: 4px; min-height: clamp(40px, 5.4vw, 62px); }
.lv-hand { position: relative; display: flex; gap: 2px; padding: 2px; border-radius: 8px; }
.lv-hand.on { box-shadow: 0 0 0 1px var(--acid), 0 0 14px -2px rgba(200,255,46,.6); }
.lv-hand.bust { opacity: .55; }
.lv-tot { position: absolute; right: -10px; top: -10px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: rgba(6,7,12,.92); border: 1px solid var(--line-2); color: var(--bone); font-style: normal; font-size: .7rem; }
.pk-seat .lv-cards .card { width: clamp(26px, 3.4vw, 40px); height: clamp(37px, 4.8vw, 56px); }
.pk-seat .lv-cards .card .cc { font-size: clamp(13px, 1.7vw, 20px); }
.pk-seat .lv-cards .card .cb { display: none; }
.pk-seat.me .lv-cards .card { transform: none !important; }
.lv-pos { color: var(--acid) !important; }
.lv-timer { font-size: .78rem; color: var(--steel-2); min-height: 1.3em; }
.lv-timer b { color: var(--plasma); }
.lv-hist { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 100%; min-height: 22px; }
.lv-hist i { font-style: normal; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; background: rgba(255,255,255,.08); color: var(--bone); }
.lv-hist .ro-r { background: #b3112f; } .lv-hist .ro-b { background: #14161d; border: 1px solid rgba(255,255,255,.14); } .lv-hist .ro-g { background: #0f8a55; }
.lv-hist .bac-p { background: rgba(46,242,255,.25); } .lv-hist .bac-b { background: rgba(255,59,92,.3); } .lv-hist .bac-t { background: rgba(200,255,46,.25); }
.lv-bac { display: flex; gap: clamp(10px, 3vw, 40px); justify-content: center; }
.lv-bh { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; border: 1px solid transparent; }
.lv-bh > span { font-size: .72rem; letter-spacing: .12em; color: var(--steel-2); }
.lv-bh.won { border-color: #FFC94A; box-shadow: 0 0 22px -6px rgba(255,201,74,.8); }
.lv-wheelw { position: relative; width: clamp(150px, 19vw, 236px); aspect-ratio: 1; --br: calc(clamp(150px, 19vw, 236px) * -.43); }
.lv-wheel { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 40px rgba(46,242,255,.22), 0 10px 30px rgba(0,0,0,.6); }
.lv-wheel svg { width: 100%; height: 100%; display: block; }
.lv-ball { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9ccd6); box-shadow: 0 0 6px rgba(255,255,255,.7); transform: translateY(var(--br)); }
.lv-ptr { position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-top: 11px solid #E9C46A; }
.lv-ron { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; margin-right: 6px; }
.lv-ron.ro-r { background: #b3112f; } .lv-ron.ro-b { background: #14161d; border: 1px solid rgba(255,255,255,.2); } .lv-ron.ro-g { background: #0f8a55; }
.lv-act { flex-direction: column; gap: 10px; min-height: 120px; }
.lv-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.lv-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lv-chip { width: 50px; height: 50px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); background: radial-gradient(circle, #1a1d28 55%, #0b0c12 56%); color: var(--bone); font: 700 .74rem/1 var(--font-mono, monospace); cursor: pointer; flex: none; }
.lv-chip.on { border-color: var(--acid); border-style: solid; box-shadow: 0 0 14px -2px rgba(200,255,46,.7); color: var(--acid); }
.lv-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lv-room .lv-act .btn.lv-spot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; padding: 10px 16px; }
.lv-spot span { font-size: .8rem; } .lv-spot b { font-size: .95rem; color: #FFC94A; }
.lv-bspots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lv-spot.bac-p { border-color: rgba(46,242,255,.5); } .lv-spot.bac-b { border-color: rgba(255,59,92,.5); } .lv-spot.bac-t { border-color: rgba(200,255,46,.45); }
.lv-turn .btn { min-width: 84px; }
.lv-ytot b { color: var(--plasma); font-size: 1.1rem; }
.lv-room .ro-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.lv-room .ro-grid { display: grid; grid-template-columns: 44px repeat(12, minmax(34px, 1fr)) 44px; grid-template-rows: repeat(5, 40px); gap: 3px; min-width: 560px; max-width: 900px; margin: 0 auto; }
.lv-room .ro-c { font-size: 13px; border-radius: 6px; background: #14161d; min-width: 0; }
.lv-room .ro-c.ro-r { background: linear-gradient(180deg, #ee2f55, #8e0d27); }
.lv-room .ro-c.ro-b { background: linear-gradient(180deg, #2a2d38, #0c0d12); }
.lv-room .ro-c.ro-g { background: linear-gradient(180deg, #19c47c, #0a6a41); }
.lv-room .ro-c.ro-cl, .lv-room .ro-c.ro-out { background: rgba(255,255,255,.05); font-size: 11px; }
.lv-room .ro-c:disabled { cursor: default; opacity: .85; }
.lv-room .ro-c.hit { box-shadow: 0 0 0 2px #FFC94A, 0 0 16px rgba(255,201,74,.7); z-index: 1; }
.lv-room .ro-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #FFC94A 40%, #B8862A 42%); color: #0A0B10; font-size: 9px; }
.lv-room .ro-o { position: absolute; right: 2px; top: 2px; z-index: 2; min-width: 14px; height: 14px; border-radius: 999px; background: var(--plasma); color: #0A0B10; font: 700 9px/14px var(--font-mono, monospace); font-style: normal; }
.lv-room .ro-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .lv-room .ro-dot.red { background: #ee2f55; } .lv-room .ro-dot.black { background: #0c0d12; border: 1px solid #555; }
@media (max-width: 640px) {
  .lv-room .pk-center { top: 46%; }
  .lv-chip { width: 44px; height: 44px; }
  .lv-room .lv-act .btn.lv-spot { min-width: 96px; padding: 8px 10px; }
  .lv-bac { gap: 8px; } .lv-bh { padding: 4px; }
  .lv-room .ro-grid { grid-template-rows: repeat(5, 36px); }
  .lv-room .pk-bar { gap: 8px; }
  .lv-room .pk-tname { order: 3; flex: 1 1 100%; }
  .lv-room .pk-bar-r { margin-left: auto; }
}
/* Back to Plaza: on every game screen */
.pz-backbar { display: flex; align-items: center; margin: 0 0 12px; min-width: 0; }
.pz-back { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 8px 16px 8px 12px; border-radius: 999px; background: #05070b; border: 1px solid rgba(var(--ng, 61,255,154), .75); color: #EAFFF2; font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .18) inset, 0 0 14px rgba(var(--ng, 61,255,154), .35); white-space: nowrap; overflow: hidden; }
.pz-back:hover, .pz-back:focus-visible { border-color: rgb(var(--ng, 61,255,154)); box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .25) inset, 0 0 22px rgba(var(--ng, 61,255,154), .5); }
.pz-back svg { flex: none; color: rgb(var(--ng, 61,255,154)); }
.pz-back small { font-weight: 500; font-size: .78rem; color: #b4b9c3; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pz-back small::before { content: '\00b7'; margin-right: 8px; color: #6b7280; }
.pz-backbar { gap: 10px; flex-wrap: wrap; }
.pz-ret { padding: 8px 16px 8px 14px; }
.pz-ret span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pz-ret-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ng, 61,255,154)); box-shadow: 0 0 8px rgb(var(--ng, 61,255,154)); animation: pzRet 1.6s ease-in-out infinite; }
@keyframes pzRet { 50% { opacity: .35; } }
.pz-ret.nudge { animation: pzRetN .5s ease 2; }
@keyframes pzRetN { 50% { box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .35) inset, 0 0 28px rgba(var(--ng, 61,255,154), .75); } }
html.rm .pz-ret-dot, html.rm .pz-ret.nudge { animation: none; }
@media (max-width: 560px) { .pz-ret small { display: none; } .pz-backbar { gap: 8px; } }
@media (max-width: 560px) { .pz-backbar { margin-bottom: 8px; } .pz-back { min-height: 38px; font-size: .85rem; } }
.dd-bar em { color: #EAFFF2; background: #05070b; border: 1px solid rgba(var(--ng, 61,255,154), .85); box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .2) inset, 0 0 14px rgba(var(--ng, 61,255,154), .45); text-shadow: 0 0 8px rgba(var(--ng, 61,255,154), .5); }

/* Sportsbook pick leaderboard */
.sp-lb { margin: 22px 0 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(var(--ng),.05), transparent 60%), var(--surface); min-width: 0; }
.sp-lb-hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; margin-bottom: 14px; }
.sp-lb-hd h2 { margin: 2px 0 0; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.1; }
.sp-lb-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: #05070b; width: min(100%, 460px); }
.sp-lb-seg button { min-width: 0; padding: 9px 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--steel-2); font: 700 13px var(--font-body); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lb-seg button.on { background: #05070b; color: rgb(var(--ng)); border-color: rgba(var(--ng),.55); box-shadow: 0 0 14px rgba(var(--ng),.28), inset 0 0 10px rgba(var(--ng),.12); }
.sp-lb-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-lb-board, .sp-lb-side { min-width: 0; }
.sp-lb-mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.sp-lb-mine > div { min-width: 0; padding: 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #05070b; text-align: center; }
.sp-lb-mine b { display: block; font-size: 20px; color: rgb(var(--ng)); text-shadow: 0 0 12px rgba(var(--ng),.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lb-mine span { display: block; font-size: 12px; color: var(--steel-2); }
.sp-lb-list, .sp-lb-par { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-lb-list li, .sp-lb-par li { max-width: none; }
.sp-lbr { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 50px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.sp-lbr img, .sp-lb-av { width: 32px; height: 32px; border-radius: 50%; background: #0b0e14; border: 1px solid var(--line-2); display: block; object-fit: cover; }
.sp-lb-rk { text-align: center; font-weight: 700; color: var(--steel-2); }
.sp-lb-nm { min-width: 0; display: grid; }
.sp-lb-nm b, .sp-lb-nm small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lb-nm small { color: var(--steel-2); font-size: 12px; }
.sp-lb-pc { font-weight: 700; font-size: 17px; color: var(--bone); }
.sp-lbr.t1 { border-color: rgba(var(--ng),.6); box-shadow: 0 0 16px rgba(var(--ng),.18); }
.sp-lbr.t1 .sp-lb-rk, .sp-lbr.t1 .sp-lb-pc { color: rgb(var(--ng)); }
.sp-lbr.t2, .sp-lbr.t3 { border-color: rgba(var(--ng),.3); }
.sp-lbr.me { background: rgba(var(--ng),.08); border-color: rgba(var(--ng),.45); }
.sp-lb-off { display: grid; gap: 4px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--steel-2); font-size: 13px; }
.sp-lb-off b { color: var(--bone); }
.sp-lb-fine { margin: 8px 0 0; }
.sp-lb-side { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #05070b; }
.sp-lb-side h3 { margin: 0 0 10px; font-size: 16px; }
.sp-lb-par li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.sp-lb-par li.me { border-color: rgba(var(--ng),.45); }
.sp-lb-par li b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lb-par li span { grid-column: 1; min-width: 0; font-size: 12px; color: var(--steel-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lb-par li em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-weight: 700; color: rgb(var(--ng)); white-space: nowrap; }
.sp-lb-par li.sp-lb-off { display: grid; grid-template-columns: 1fr; }
.sp-lb-side > p { margin: 12px 0 0; }
@media (max-width: 860px) { .sp-lb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .sp-lb { padding: 14px 12px; margin-top: 16px; } .sp-lb-seg { width: 100%; } .sp-lb-seg button { font-size: 12px; padding: 9px 2px; } .sp-lbr { grid-template-columns: 24px 28px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; } .sp-lbr img, .sp-lb-av { width: 28px; height: 28px; } .sp-lb-mine b { font-size: 17px; } }
/* ---------- Neon Elf Lanes ---------- */
.ax-bowl .ax-h2 { background: linear-gradient(100deg, #fff 0%, #9fe8ff 38%, #ff3f6c 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ax-bowl .wr-stage { height: clamp(440px, 66vh, 620px); border-color: rgba(159,232,255,.3); box-shadow: 0 0 0 1px rgba(255,63,108,.1), 0 24px 70px -24px rgba(46,242,255,.36); background: #050814 url(assets/bowl/bg.webp) center / cover no-repeat; cursor: default; }
.bw-host { position: absolute; inset: 0; }
.bw-host .bw-gl, .bw-host .bw-ui { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bw-host .bw-gl { pointer-events: none; }
.bw-host .bw-ui { touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.bw-host .bw-ui:active { cursor: grabbing; }
.bw-nogl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90%, 420px); text-align: center; margin: 0; }
.bw-spin { position: absolute; left: 14px; bottom: 96px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; background: rgba(5,7,11,.72); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.wr-stage.bw-live .bw-spin { opacity: 1; pointer-events: auto; }
.bw-spin-l { font: 800 .62rem 'Chakra Petch', sans-serif; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.bw-spin button { width: 32px; height: 32px; padding: 0; border-radius: 9px; background: #05070b; color: #EAFFF2; border: 1px solid rgba(var(--ng, 61,255,154), .35); font-size: .8rem; line-height: 1; cursor: pointer; }
.bw-spin button.on { border-color: rgba(var(--ng, 61,255,154), .9); box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .25) inset, 0 0 12px rgba(var(--ng, 61,255,154), .5); }
.bw-frost { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(ellipse at 50% 40%, rgba(230,245,255,.38), rgba(170,210,255,.5) 60%, rgba(120,170,230,.55)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.bw-frost.on { opacity: .9; }
.ax-bowl .wr-hud { z-index: 2; }
.ax-bowl .wr-hud .wr-top, .ax-bowl .wr-hud .wr-pop { pointer-events: none; }
.ax-bowl .wr-pop { top: 40%; }
.ax-bowl .wr-sub { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); line-height: 1.35; }
.ax-bowl .wr-mult, .ax-bowl .wr-sub { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ax-bowl .wr-cash.wait:disabled { filter: none; font-size: .86rem; letter-spacing: .12em; }
@media (max-width: 720px) {
  .ax-bowl .wr-stage { height: clamp(560px, 165vw, 700px); }
  .ax-bowl .wr-mult { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .ax-bowl .wr-sub { font-size: .74rem; margin-top: 4px; }
  .ax-bowl .wr-top { top: 10px; }
  .bw-spin { left: 10px; bottom: 84px; }
}
.ar-stage.bw-on { height: min(72vh, 660px); touch-action: pan-y; background: #050814; }
.ax-bowl .wr-stage .st-ctl { transition: opacity .25s; }
.ax-bowl .wr-stage.bw-aim .st-ctl { opacity: 0; pointer-events: none; }
.ax-bowl .wr-stage.bw-aim .bw-spin { bottom: 16px; }
.wr-hud .hb.lock button, .ax-bowl .wr-stage.bw-aim .st-ctl button { pointer-events: none; }
.ar-stage.bw-on { position: relative; overflow: hidden; }
.ar-stage.bw-live .bw-spin { opacity: 1; pointer-events: auto; bottom: 16px; }
/* ---------- suite and live table player cards ---------- */
.pk-seat:not(.empty) .pk-plate { border-radius: 14px; padding: 7px 12px 10px; justify-content: center; text-align: center; background: linear-gradient(180deg, rgba(24,30,48,.95), rgba(7,9,15,.97)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 26px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.pk-seat:not(.empty) .pk-plate > div { align-items: center; width: 100%; }
.pk-seat:not(.empty) .pk-plate b { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #EAF2FF; max-width: 100%; }
.pk-seat:not(.empty) .pk-plate .pk-stk { font-size: .86rem; margin-top: 1px; color: #FFD36B; text-shadow: 0 0 10px rgba(255,201,74,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-seat:not(.empty) .pk-plate::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); pointer-events: none; }
.pk-seat.me .pk-plate { border-color: rgba(46,242,255,.5); }
.pk-seat.me .pk-plate::before { background: linear-gradient(90deg, transparent, #2EF2FF 30%, #FF4F9A 70%, transparent); }
.pk-seat.acting .pk-plate, .pk-seat.me.acting .pk-plate { background: linear-gradient(180deg, rgba(14,34,28,.95), rgba(6,10,10,.97)); border-color: rgba(var(--ng, 61,255,154), .85); box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .22) inset, 0 0 22px -4px rgba(var(--ng, 61,255,154), .55), 0 12px 26px -12px rgba(0,0,0,.85); }
.pk-seat.acting .pk-plate::after { content: ''; position: absolute; left: 12px; bottom: 4px; height: 3px; width: calc((100% - 24px) * var(--p, 0)); border-radius: 3px; background: rgb(var(--ng, 61,255,154)); box-shadow: 0 0 8px rgba(var(--ng, 61,255,154), .8); transition: width .25s linear; pointer-events: none; }
.pk-seat.win .pk-plate { border-color: rgba(255,201,74,.9); box-shadow: 0 0 0 1px rgba(255,201,74,.25) inset, 0 0 26px -4px rgba(255,201,74,.7); }
.pk-seat.acting .pk-av img { filter: drop-shadow(0 0 10px rgba(var(--ng, 61,255,154), .45)) drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pk-seat.me:not(.acting):not(.win) .pk-av img { filter: drop-shadow(0 0 10px rgba(46,242,255,.3)) drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pk-top::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 82%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index: -1; pointer-events: none; }
.lv-hand { padding: 3px; border-radius: 9px; background: rgba(4,6,10,.35); }
.lv-hand.on { box-shadow: 0 0 0 1px rgba(var(--ng, 61,255,154), .85), 0 0 16px -2px rgba(var(--ng, 61,255,154), .55); }
.lv-tot { right: -11px; top: -11px; min-width: 24px; height: 24px; background: linear-gradient(180deg, #161c2c, #05070b); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.pk-seat.me .lv-tot { border-color: rgba(46,242,255,.7); box-shadow: 0 0 10px rgba(46,242,255,.35); }
.lv-hand.on .lv-tot { border-color: rgba(var(--ng, 61,255,154), .9); box-shadow: 0 0 10px rgba(var(--ng, 61,255,154), .5); }
.lv-hand.bust .lv-tot { border-color: rgba(255,79,108,.8); color: #ffb3c0; }
.lv-pos { color: rgb(var(--ng, 61,255,154)) !important; }
.lv-ptr { top: -7px; border-top-color: #2EF2FF; filter: drop-shadow(0 0 4px rgba(46,242,255,.8)); }
.lv-wheel { box-shadow: 0 0 46px rgba(46,242,255,.25), 0 0 80px -20px rgba(255,79,154,.35), 0 14px 34px rgba(0,0,0,.65); }
.lv-ball { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
@media (max-width: 600px) {
  .pk-seat:not(.empty) .pk-plate { padding: 5px 7px 8px; border-radius: 11px; }
  .pk-seat:not(.empty) .pk-plate b { font-size: .58rem; letter-spacing: .03em; }
  .pk-seat:not(.empty) .pk-plate .pk-stk { font-size: .68rem; }
  .pk-seat.acting .pk-plate::after { left: 8px; width: calc((100% - 16px) * var(--p, 0)); bottom: 3px; height: 2px; }
}
@media (min-width: 1180px) {
  html body #view-poker:has(.pk-room:not([hidden])) > .pz-backbar { margin-left: calc((100% - min(calc(100vw - 56px), 1760px)) / 2); }
}

/* ---------- Originals v3 (wide screens): bet panel docked in the right column, board fills the table ----------
   ogdock.js moves status, chips, bet, play, auto, ride and hotkeys into .og-dock-in at the top of the aside. */
@media (min-width: 1181px) {
  .og-dk .table-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important; align-items: start !important; }
  .og-dk .table-layout > aside.market.og-dock { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .og-dk .table-layout > aside.market.og-dock > * { flex-shrink: 0; }
  .og-dock-in { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--ng, 61,255,154), .22); background: linear-gradient(180deg, rgba(14,16,26,.96), rgba(8,9,16,.96)); box-shadow: 0 0 30px -18px rgba(var(--ng, 61,255,154), .5); }
  .og-dock-in .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,205,230,.6); }
  .og-dock-in > .status { margin: 0 !important; min-height: 0 !important; font-size: 13.5px !important; line-height: 1.4; text-align: left !important; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.035); overflow-wrap: anywhere; }
  .og-dock-in > .controls { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; grid-area: auto !important; }
  .og-dock-in > .controls[hidden] { display: none !important; }
  .og-dock-in .pl-opts { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 14px; margin: 0; }
  .og-dock-in .seg { display: flex; flex-wrap: nowrap; }
  .og-dock-in .seg button { flex: 1 1 auto; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  .og-dock-in .auto-opts.inline { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; margin: 0; padding: 0; }
  .og-dock-in .auto-opts.inline .seg { flex: 1 1 auto; min-width: 0; }
  .og-dock-in .auto-opts.inline .auto-go { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
  .og-dock-in .chips { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; gap: 4px !important; margin: 0 !important; flex-wrap: nowrap; }
  .og-dock-in .chips .chip { width: 38px !important; height: 38px !important; flex: none !important; font-size: 10px !important; }
  .og-dock-in .bet-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; max-width: none !important; margin: 0 !important; grid-template-columns: none !important; grid-template-areas: none !important; justify-content: stretch !important; }
  .og-dock-in .bet-row > * { margin: 0 !important; grid-area: auto !important; }
  .og-dock-in .bet-row .bet-amt { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; text-align: center; }
  .og-dock-in .bet-row .btn.sm { flex: 1 1 0 !important; min-width: 0; padding: 8px 6px !important; white-space: nowrap; }
  .og-dock-in .bet-row .btn-primary { flex: 1 1 100% !important; width: 100% !important; min-height: 50px; font-size: 17px; }
  .og-dock-in > .kit-ride { flex-direction: column; align-items: stretch; gap: 8px; }
  .og-dock-in > .kit-ride .ride-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .og-dock-in > .cr-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 !important; max-width: none !important; width: 100%; }
  .og-dock-in > .wr-legend { justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 !important; padding: 8px 0 0 !important; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; transform: none !important; }

  .og-dock-in .pl-opts > .auto-opts { flex: 1 1 100%; padding-left: 0 !important; border-left: 0 !important; }
  #view-limbo .og-dock-in #lbOpts { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px 14px !important; font-size: 13px; }
  #view-limbo .og-dock-in #lbOpts .auto-opts { padding-left: 0 !important; }
  /* the table: just the game, as big as the window allows */
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault) :is(#pFelt, #kFelt, #mnFelt, #dcFelt, #lbFelt, #crFelt, #vFelt).og-docked { --ogH: clamp(540px, calc(100vh - 128px), 1000px); display: flex !important; flex-direction: column !important; gap: 10px !important; height: var(--ogH) !important; min-height: 0 !important; max-height: none !important; padding: 14px 16px !important; overflow: hidden !important; grid-template-columns: none !important; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault) :is(#pFelt, #kFelt, #mnFelt, #dcFelt, #lbFelt, #crFelt, #vFelt).og-docked > * { grid-column: auto !important; grid-row: auto !important; margin: 0 !important; min-height: 0 !important; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault) :is(#pFelt, #kFelt, #mnFelt, #dcFelt, #lbFelt, #crFelt, #vFelt).og-docked > .og-top { flex: none; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault) :is(#pFelt, #kFelt, #mnFelt, #dcFelt, #lbFelt, #crFelt, #vFelt).og-docked > .dock-spacer { display: none !important; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault) :is(#pFelt, #kFelt, #mnFelt, #dcFelt, #lbFelt, #crFelt, #vFelt).og-docked > :is(.kn-wrap, .pl-wrap, .vt-wrap, .mn-wrap, .dc-stage, .lb-stage, .cr-stage) { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; width: 100% !important; max-width: none !important; zoom: 1 !important; }

  /* Keno: tiles fill a 8 x 5 grid that fills the board */
  #view-keno #kFelt.og-docked .kn-wrap { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px !important; }
  #view-keno #kFelt.og-docked .kn-balls { flex: none; }
  #view-keno #kFelt.og-docked .kn-grid { flex: 1 1 auto; min-height: 0; width: 100% !important; max-width: none !important; padding: 0 !important; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px) !important; --avail: 1100px; }
  #view-keno #kFelt.og-docked .kn-grid > * { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 16px !important; font-size: clamp(18px, 2.1vw, 34px) !important; }
  #view-keno #kFelt.og-docked .kn-grid .kn::before { width: auto !important; height: 88% !important; max-height: none !important; aspect-ratio: 1; }
  #view-keno #kFelt.og-docked > .kn-bar { flex: none; display: flex; align-items: center; gap: 12px; max-width: none !important; width: 100%; }
  #view-keno #kFelt.og-docked > .kn-pay { flex: none; max-width: none !important; width: 100%; height: 48px !important; min-height: 48px !important; }

  /* Plinko: the canvas takes all the height */
  #view-plinko #pFelt.og-docked .pl-wrap { display: flex; flex-direction: column; }
  #view-plinko #pFelt.og-docked .pl-wrap > .pl-canvas { position: relative !important; inset: auto !important; flex: 1 1 auto; width: 100% !important; height: 100% !important; min-height: 0 !important; }

  /* Mines: the biggest square grid that fits, with the ladder and mine picker beside it */
  #view-mines #mnFelt.og-docked .mn-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); gap: 16px; align-items: stretch; }
  #view-mines #mnFelt.og-docked .mn-board { grid-column: 1 !important; grid-row: 1 !important; width: auto !important; max-width: 100% !important; height: 100% !important; aspect-ratio: 1; justify-self: center; align-self: center; container-type: size; }
  #view-mines #mnFelt.og-docked .mn-grid { width: 100% !important; height: 100% !important; grid-template-rows: repeat(5, minmax(0, 1fr)); }
  #view-mines #mnFelt.og-docked .mn-t { aspect-ratio: auto !important; width: 100% !important; height: 100% !important; }
  #view-mines #mnFelt.og-docked .mn-side { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column; gap: 10px; max-width: none !important; margin: 0 !important; align-self: center; min-height: 0; overflow-y: auto; scrollbar-width: none; }

  /* Dice, Limbo, Crash: the stage grows into the space */
  #view-dice #dcFelt.og-docked .dc-stage, #view-limbo #lbFelt.og-docked .lb-stage { justify-content: center; }
  #view-crash #crFelt.og-docked .cr-stage { display: block; position: relative; }
  #view-crash #crFelt.og-docked .cr-stage > canvas { width: 100% !important; height: 100% !important; }

  /* Hold or Sell: the cores and both ladders use the full table */
  #view-vault #vFelt.og-docked { grid-template-columns: none !important; }
}
@media (min-width: 1181px) {
  :is(#view-dice, #view-limbo) :is(#dcFelt, #lbFelt).og-docked { height: auto !important; min-height: var(--ogH) !important; overflow: visible !important; }
}
/* phones and tablets: the keno balls fill their cells so the board reads bigger */
@media (max-width: 1180px) {
  #view-keno #kFelt .kn-wrap { padding-left: 8px; padding-right: 8px; }
  #view-keno #kFelt .kn-grid { max-width: none !important; width: 100% !important; gap: 4px !important; }
  #view-keno #kFelt .kn-grid .kn::before { width: 96% !important; max-height: 96% !important; }
  #view-keno #kFelt .kn-grid .kn { font-size: clamp(15px, 4.4vw, 26px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; }
  #view-keno #kFelt .kn-wrap { height: auto !important; min-height: 0 !important; }
  #view-keno #kFelt .kn-grid { grid-template-rows: none !important; flex: none !important; }
}

/* Club VIP: make it rain */
.pz-mus.pz-rain { color: #FFD76A; border-color: rgba(255,201,74,.55); }
.pz-mus.pz-rain:hover { color: #FFE7A0; border-color: #FFC94A; box-shadow: 0 0 14px rgba(255,201,74,.35); }
.pz-rainp { position: absolute; z-index: 4; left: 12px; top: 58px; width: min(320px, calc(100% - 24px)); box-sizing: border-box; padding: 14px; border-radius: 16px; background: rgba(6,7,12,.94); border: 1px solid rgba(255,201,74,.4); box-shadow: 0 12px 34px rgba(0,0,0,.5); color: var(--bone); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; gap: 8px; }
.pz-rainp[hidden] { display: none; }
.pz-rainp > b { font: 700 .95rem/1.1 var(--font-display, Orbitron, sans-serif); color: #FFD76A; letter-spacing: .04em; }
.pz-rainp > span { font: 500 .8rem/1.4 var(--font-body); color: rgba(244,246,241,.78); overflow-wrap: anywhere; }
.pz-rainp > small { font: 600 .72rem/1.2 var(--font-body); color: rgba(255,215,106,.85); }
.pz-rainr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pz-rainr button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 9px 4px; border-radius: 12px; border: 1px solid rgba(var(--ng, 61,255,154), .55); background: #05070b; color: #F4F6F1; font: 700 .8rem/1 var(--font-body); cursor: pointer; box-shadow: 0 0 12px rgba(var(--ng, 61,255,154), .22); white-space: nowrap; }
.pz-rainr button .coin { width: 13px; height: 13px; flex: none; }
.pz-rainr button:hover:not(:disabled) { border-color: rgba(var(--ng, 61,255,154), .95); box-shadow: 0 0 18px rgba(var(--ng, 61,255,154), .45); }
.pz-rainr button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.pz-rainx { justify-self: start; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(244,246,241,.2); background: transparent; color: rgba(244,246,241,.75); font: 600 .74rem/1 var(--font-body); cursor: pointer; }
@media (max-width: 560px) { .pz-rainp { top: 96px; left: 10px; width: calc(100% - 20px); } .pz-rainr button { font-size: .74rem; } }

/* one way back: screens with the Back to Plaza bar drop their own older back links */
.view:has(> .pz-backbar) .pk-backl, .view:has(> .pz-backbar) .vg-top > .vg-back { display: none; }

/* ===== Plaza chat bar: one slim bar along the bottom of the world, emoji picker, floating ticker ===== */
.pz-emotes { display: none; }
.pz-cbar { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(660px, calc(100% - 24px)); box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 18px; background: rgba(6,7,12,.84); border: 1px solid rgba(200,255,46,.42); box-shadow: 0 0 22px -8px rgba(200,255,46,.55), 0 14px 34px -16px rgba(0,0,0,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pz-cbar > button, .pz-cb-say > button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: #05070b; color: var(--bone); cursor: pointer; position: relative; transition: border-color .15s, color .15s, box-shadow .15s; }
.pz-cbar > button:hover, .pz-cb-say > button:hover, .pz-cbar > button.on, .pz-cb-say > button.on { border-color: rgba(200,255,46,.7); color: #C8FF2E; box-shadow: 0 0 14px -4px rgba(200,255,46,.6); }
.pz-cb-say { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.pz-cb-say:focus-within { border-color: rgba(46,242,255,.6); }
.pz-cb-say input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--bone); font: 500 .9rem var(--font-body); padding: 0; }
.pz-cb-say input:focus { outline: none; }
.pz-cb-say input::placeholder { color: rgba(244,246,241,.45); }
.pz-cb-say input:disabled { opacity: .7; }
.pz-cb-say > button { width: 32px; height: 32px; border-radius: 9px; border-color: transparent; background: transparent; }
.pz-cb-say > .pz-cb-send { background: #05070b; border-color: rgba(200,255,46,.45); color: #C8FF2E; }
.pz-cb-say > .pz-cb-send:disabled { opacity: .35; cursor: default; box-shadow: none; }
.pz-cb-log i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #05070b; border: 1px solid #C8FF2E; color: #C8FF2E; font: 700 .64rem/16px var(--font-mono, monospace); text-align: center; font-style: normal; }
.pz-cb-log i[hidden] { display: none; }
.pz-cb-up svg { transition: transform .2s var(--ease); }
.pz-cb-up.on svg { transform: rotate(180deg); }
.pz-epick { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(330px, 100%); box-sizing: border-box; padding: 10px; border-radius: 16px; background: rgba(6,7,12,.94); border: 1px solid rgba(200,255,46,.42); box-shadow: 0 0 24px -10px rgba(200,255,46,.5), 0 16px 40px -16px rgba(0,0,0,.95); }
.pz-epick[hidden] { display: none; }
.pz-epick::after { content: ''; position: absolute; right: 104px; bottom: -7px; width: 12px; height: 12px; background: rgba(6,7,12,.94); border-right: 1px solid rgba(200,255,46,.42); border-bottom: 1px solid rgba(200,255,46,.42); transform: rotate(45deg); }
.pz-eseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 11px; background: #05070b; border: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }
.pz-eseg button { padding: 7px 6px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--steel-2); font: 700 .8rem var(--font-body); cursor: pointer; }
.pz-eseg button.on { color: #C8FF2E; border-color: rgba(200,255,46,.55); box-shadow: 0 0 12px -4px rgba(200,255,46,.55), inset 0 0 8px rgba(200,255,46,.1); }
.pz-egrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.pz-egrid[hidden] { display: none; }
.pz-egrid button { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid transparent; background: transparent; font: 400 1.35rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; cursor: pointer; transition: transform .12s, background .12s; }
.pz-egrid button:hover, .pz-egrid button:focus-visible { background: rgba(255,255,255,.07); border-color: rgba(200,255,46,.35); transform: scale(1.12); outline: none; }
.pz-egrid.pz-moves { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pz-egrid.pz-moves button { aspect-ratio: auto; height: 38px; font: 700 .78rem var(--font-body); color: var(--bone); background: #05070b; border-color: rgba(255,255,255,.1); }
.pz-egrid.pz-moves button:hover { color: #C8FF2E; border-color: rgba(200,255,46,.6); transform: none; }
.pz-enote { margin: 9px 2px 0; color: rgba(244,246,241,.5); font: 500 .7rem/1.35 var(--font-body); max-width: none; }
.pz-tick { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(360px, calc(100% - 20px)); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.pz-tick li { max-width: 100%; box-sizing: border-box; padding: 5px 10px; border-radius: 10px; background: rgba(6,7,12,.72); color: var(--bone); font: 500 .8rem/1.35 var(--font-body); overflow-wrap: anywhere; animation: pzTk .25s var(--ease); transition: opacity .5s, transform .5s; backdrop-filter: blur(6px); }
.pz-tick li b { color: var(--plasma); margin-right: 4px; }
.pz-tick li.me b { color: var(--acid); }
.pz-tick li.out { opacity: 0; transform: translateY(-4px); }
.pz-cbar:has(.pz-epick:not([hidden])) .pz-tick { display: none; }
@keyframes pzTk { from { opacity: 0; transform: translateY(6px); } }
.pz-prompt { bottom: 78px; }
.pz-talk { bottom: 76px; }
.pz-stage.ft-on .pz-cbar { display: none; }
@media (min-width: 981px) {
  .pz-ov .pz-side { top: auto; right: auto; left: 12px; bottom: 76px; width: 340px; height: min(380px, calc(100% - 150px)); border-color: rgba(200,255,46,.28); }
  .pz-ov.chat-off .pz-side { transform: translateY(12px); }
  .pz-ov:not(.chat-off) .pz-tick { display: none; }
  .pz-ov .pz-stage .pz-cbar { left: 50%; }
  .pz-ov .pz-chatbtn, .pz-ov.chat-off .pz-chatbtn { display: none; }
}
@media (max-width: 980px) { .pz-cbar .pz-cb-up, #pzUpBtn { display: none !important; } }
@media (max-width: 560px) {
  .pz-cbar { bottom: 8px; width: calc(100% - 16px); gap: 6px; padding: 5px; border-radius: 15px; }
  .pz-cbar > button { width: 38px; height: 38px; }
  .pz-cb-say { height: 38px; padding-left: 10px; }
  .pz-cb-say input { font-size: 16px; }
  .pz-epick { width: 100%; }
  .pz-epick::after { right: 55px; }
  .pz-egrid button { font-size: 1.25rem; }
  .pz-prompt { bottom: 66px; }
  .pz-talk { bottom: 64px; }
  .pz-tick { width: calc(100% - 10px); }
  .pz-tick li { font-size: .76rem; }
}

/* ===== Plaza chat channels: General, this room, Friends, Private ===== */
.pz-side .pz-tabs.pz-chtabs { display: flex; align-items: center; gap: 5px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.07); overflow-x: auto; scrollbar-width: none; }
.pz-chtabs::-webkit-scrollbar { display: none; }
.pz-chtabs [data-pzc] { flex: none; position: relative; display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.09); background: #05070b; color: var(--steel-2); font: 700 .78rem/1.1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; }
.pz-chtabs [data-pzc] span { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: inherit; font-size: inherit; }
.pz-chtabs [data-pzc]:hover { color: var(--bone); }
.pz-chtabs [data-pzc].on { color: #C8FF2E; border-color: rgba(200,255,46,.6); box-shadow: 0 0 14px -4px rgba(200,255,46,.6), inset 0 0 8px rgba(200,255,46,.08); }
.pz-cu { position: absolute; top: -6px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #05070b; border: 1px solid #C8FF2E; color: #C8FF2E; font: 700 .6rem/14px var(--font-mono, monospace); font-style: normal; text-align: center; }
.pz-cu[hidden] { display: none; }
.pz-chsp { flex: 1; min-width: 2px; }
.pz-side .pz-chtabs .pz-ppl, .pz-side .pz-chtabs .pz-hide { position: static; flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: #05070b; color: var(--bone); cursor: pointer; font-size: 0; transition: color .15s, border-color .15s, box-shadow .15s; }
.pz-side .pz-chtabs .pz-ppl:hover, .pz-side .pz-chtabs .pz-hide:hover, .pz-side .pz-chtabs .pz-ppl.on { color: #C8FF2E; border-color: rgba(200,255,46,.6); box-shadow: 0 0 12px -4px rgba(200,255,46,.6); }
.pz-pseg { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 8px 0; padding: 3px; border-radius: 11px; background: #05070b; border: 1px solid rgba(255,255,255,.08); }
.pz-side[data-tab="friends"] .pz-pseg, .pz-side[data-tab="online"] .pz-pseg, .pz-side[data-tab="recent"] .pz-pseg { display: grid; }
.pz-pseg button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pz-pseg button { padding: 7px 6px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--steel-2); font: 700 .78rem var(--font-body); cursor: pointer; }
.pz-pseg button span { color: var(--plasma); font-size: .7rem; }
.pz-pseg button.on { color: #C8FF2E; border-color: rgba(200,255,46,.55); box-shadow: 0 0 12px -4px rgba(200,255,46,.55); }
.pz-log { padding: 8px 10px 10px; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(200,255,46,.35) transparent; }
.pz-log li.sys { padding: 4px 4px 8px; line-height: 1.4; }
.pz-log li.win { margin: 3px 0; }
.pz-log li.cm { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.pz-log li.cm:last-child { border-bottom: 0; }
.pz-log li.cm img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; background: #11141c; border: 1px solid rgba(255,255,255,.12); }
.pz-log li.cm.me img { border-color: rgba(200,255,46,.55); }
.pz-log li.cm div { min-width: 0; }
.pz-log li.cm p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 1px; max-width: none; }
.pz-log li.cm p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: .82rem; }
.pz-log li.cm time { margin-left: auto; flex: none; color: rgba(244,246,241,.42); font: 500 .68rem var(--font-mono, monospace); }
.pz-log li.cm span { display: block; color: var(--bone); font-size: .86rem; line-height: 1.38; overflow-wrap: anywhere; }
.pz-log.pz-dml { padding-top: 6px; }
.pz-log li.dm-row button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 6px; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); background: transparent; color: var(--bone); text-align: left; cursor: pointer; border-radius: 10px; }
.pz-log li.dm-row button:hover { background: rgba(255,255,255,.04); }
.pz-log li.dm-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid rgba(255,255,255,.12); }
.pz-log li.dm-row span { min-width: 0; }
.pz-log li.dm-row b { display: block; margin: 0; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-log li.dm-row small { display: block; color: var(--steel-2); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-log li.dm-row.un b, .pz-log li.dm-row.un small { color: var(--bone); }
.pz-log li.dm-row time { color: rgba(244,246,241,.42); font: 500 .68rem var(--font-mono, monospace); }
.pz-log li.dm-row i { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; border: 1px solid #C8FF2E; color: #C8FF2E; font: 700 .62rem/16px var(--font-mono, monospace); font-style: normal; text-align: center; }
.pz-dmh { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07); min-width: 0; }
.pz-dmh[hidden] { display: none; }
.pz-dmh button { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: #05070b; color: var(--bone); cursor: pointer; }
.pz-dmh button:hover { color: #C8FF2E; border-color: rgba(200,255,46,.6); }
.pz-dmh img { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; }
.pz-dmh b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); font-size: .88rem; }
.pz-dmh small { margin-left: auto; flex: none; color: var(--steel-2); font-size: .72rem; }
.pz-dmh small.on { color: #C8FF2E; }
.pz-tick li em { font-style: normal; margin-right: 6px; padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(46,242,255,.4); color: var(--plasma); font: 700 .64rem var(--font-body); text-transform: uppercase; letter-spacing: .04em; }
/* bigger emoji picker: groups, moves and quick phrases */
.pz-epick { width: min(400px, 100%); }
.pz-eseg { grid-template-columns: repeat(3, 1fr); }
.pz-ecat { display: flex; gap: 3px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); overflow-x: auto; scrollbar-width: none; }
.pz-ecat::-webkit-scrollbar { display: none; }
.pz-ecat button { flex: 1 0 34px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--steel-2); font: 700 .72rem var(--font-body); cursor: pointer; }
.pz-ecat button:first-child { flex-basis: 40px; }
.pz-ecat button:not(:first-child) { font: 400 1.05rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.pz-ecat button.on { color: #C8FF2E; border-color: rgba(200,255,46,.55); background: #05070b; box-shadow: 0 0 10px -4px rgba(200,255,46,.6); }
#pzEgrid { max-height: 214px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(200,255,46,.35) transparent; padding-right: 2px; }
.pz-egrid button[hidden] { display: none; }
.pz-egrid.pz-moves { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pz-egrid.pz-moves button { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; font: 700 .74rem var(--font-body); }
.pz-egrid.pz-moves button span { font: 400 1.45rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.pz-egrid.pz-moves button:nth-child(4) span { font: 800 1.1rem/1.3 var(--font-display, var(--font-body)); color: #C8FF2E; }
.pz-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-quick[hidden] { display: none; }
.pz-quick button { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: #05070b; color: var(--bone); font: 600 .8rem var(--font-body); cursor: pointer; }
.pz-quick button:hover { color: #C8FF2E; border-color: rgba(200,255,46,.6); box-shadow: 0 0 12px -4px rgba(200,255,46,.6); }
@media (min-width: 981px) {
  .pz-ov .pz-side { width: 420px; height: min(430px, calc(100% - 150px)); }
}
@media (max-width: 980px) {
  .pz-side { height: clamp(400px, 62vh, 620px); }
}
@media (max-width: 560px) {
  .pz-chtabs [data-pzc] { padding: 7px 9px; }
  #pzEgrid { max-height: 152px; }
  .pz-egrid.pz-moves button { height: 58px; }
}
@media (max-width: 980px) { .pz-side .pz-chtabs .pz-hide { display: none; } }
/* chat panel slides right when the avatar walks under it */
@media (min-width: 981px) {
  .pz-ov .pz-side { translate: var(--pzdx, 0px) 0; transition: opacity .25s var(--ease), transform .25s var(--ease), translate .45s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .pz-ov .pz-side { transition: none; } }
/* Mines (docked, desktop): a true square board sized to the space, never stretched tall */
@media (min-width: 1181px) {
  #view-mines #mnFelt.og-docked { height: auto !important; }
  #view-mines #mnFelt.og-docked > .mn-wrap { flex: none !important; container-type: inline-size; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px) !important; align-items: center !important; }
  #view-mines #mnFelt.og-docked .mn-board { --mnS: min(100cqw - 286px, var(--ogH) - 92px); width: var(--mnS) !important; height: var(--mnS) !important; max-width: none !important; aspect-ratio: auto !important; justify-self: center; align-self: center; }
  #view-mines #mnFelt.og-docked .mn-side { align-self: center !important; }
}
/* Plinko: a wide board, a little taller than 16:9 so the pegs have room to fall */
@media (min-width: 1181px) {
  #view-plinko #pFelt.og-docked { height: auto !important; }
  #view-plinko #pFelt.og-docked > .pl-wrap { flex: none !important; aspect-ratio: 3 / 2; height: auto !important; max-height: calc(var(--ogH, 760px) - 34px); }
}
@media (min-width: 700px) and (max-width: 1180px) {
  #view-plinko #pFelt:not(.og-docked) .pl-wrap { min-height: 0 !important; flex: none !important; }
  #view-plinko #pFelt:not(.og-docked) .pl-wrap > .pl-canvas { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; }
}
/* ===== flow pack: tram, tour, moments, big-win banner, back chip ===== */
.pz-tram, .pz-tour { position: absolute; z-index: 6; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(340px, calc(100% - 24px)); padding: 14px; border-radius: 16px; background: rgba(10,12,18,.95); border: 1px solid rgba(46,242,255,.28); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.85), 0 0 24px -10px rgba(46,242,255,.5); display: grid; gap: 8px; box-sizing: border-box; overflow-wrap: anywhere; }
.pz-tram[hidden], .pz-tour[hidden], .pz-back[hidden] { display: none; }
.pz-tram-h, .pz-tour b { font-size: 15px; line-height: 1.25; color: #EEF2FF; }
.pz-tram small, .pz-tour span { font-size: 12.5px; line-height: 1.4; color: var(--steel, #9AA3B8); }
.pz-tram-b { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; background: #0B0D12; color: #EEF2FF; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 14px -6px var(--c); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: left; }
.pz-tram-b em { font-style: normal; font-size: 12px; color: #7CFF6B; white-space: nowrap; }
.pz-tram-b:hover { box-shadow: 0 0 18px -4px var(--c); }
.pz-tram-x { justify-self: center; background: none; border: 0; color: var(--steel, #9AA3B8); font-family: inherit; font-size: 12.5px; padding: 6px 10px; cursor: pointer; }
.pz-tour-k { font: 600 10.5px/1 var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: #7CFF6B; }
.pz-tour-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pz-moment { position: absolute; z-index: 4; right: 12px; top: 58px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 6px 11px; border-radius: 999px; background: rgba(8,10,16,.82); border: 1px solid rgba(255,212,90,.28); font-size: 12px; color: #EEF2FF; pointer-events: none; white-space: nowrap; box-sizing: border-box; }
.pz-moment i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE89A, #FFB800); box-shadow: 0 0 8px #FFB800; flex: none; }
.pz-moment b { font-weight: 600; } .pz-moment span { color: #FFD45A; overflow: hidden; text-overflow: ellipsis; }
.pz-moment[data-on="1"] { border-color: rgba(255,212,90,.7); box-shadow: 0 0 16px -4px rgba(255,184,0,.6); }
.pz-big { position: absolute; z-index: 7; left: 50%; top: 58px; transform: translate(-50%, -140%); opacity: 0; transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .3s; display: grid; justify-items: center; gap: 2px; width: max-content; max-width: calc(100% - 24px); padding: 9px 20px 10px; border-radius: 14px; background: rgba(8,10,16,.94); border: 1px solid rgba(46,242,255,.45); box-shadow: 0 0 26px -8px rgba(46,242,255,.7); pointer-events: none; text-align: center; box-sizing: border-box; }
.pz-big.in { transform: translate(-50%, 0); opacity: 1; }
.pz-big small { font: 700 10.5px/1 var(--mono, monospace); letter-spacing: .16em; color: #2EF2FF; }
.pz-big b { font-size: 16px; color: #fff; overflow-wrap: anywhere; } .pz-big span { font-size: 12px; color: var(--steel, #9AA3B8); }
.pz-big[data-t="jackpot"] { border-color: rgba(255,201,74,.7); box-shadow: 0 0 30px -6px rgba(255,184,0,.75); }
.pz-big[data-t="jackpot"] small { color: #FFC94A; }
div.pz-back { position: absolute; z-index: 6; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(10,12,18,.95); border: 1px solid rgba(124,255,107,.35); box-shadow: 0 0 18px -8px rgba(124,255,107,.6); font-size: 13px; color: #EEF2FF; box-sizing: border-box; white-space: nowrap; }
div.pz-back span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pz-join { border-color: rgba(124,255,107,.5) !important; box-shadow: 0 0 10px -4px rgba(124,255,107,.7); }
@media (max-width: 560px) { .pz-moment { top: auto; bottom: 150px; right: 8px; font-size: 11px; } .pz-tram, .pz-tour, div.pz-back { bottom: 120px; } }
.pz-moment[hidden]{display:none}
/* the Walk in / Talk prompt and the chat ticker share the space above the chat bar: show the prompt alone */
.pz-stage:has(.pz-prompt:not([hidden])) .pz-tick, .pz-stage:has(.pz-talk:not([hidden])) .pz-tick { opacity: 0; visibility: hidden; }
/* Nightclub line chip */
.pz-line { position: absolute; z-index: 5; left: 12px; top: 58px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 6px 6px 12px; border-radius: 14px; background: rgba(8,10,16,.88); border: 1px solid rgba(178,108,255,.45); box-shadow: 0 0 24px -8px rgba(178,108,255,.7); box-sizing: border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pz-line[data-up="1"] { border-color: rgba(124,255,107,.6); box-shadow: 0 0 24px -8px rgba(124,255,107,.7); }
.pz-line-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pz-line-t small { font: 600 9.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #C9A2FF; }
.pz-line[data-up="1"] .pz-line-t small { color: #7CFF6B; }
.pz-line-t b { font-size: 13px; color: #F4F6F1; white-space: nowrap; }
.pz-line-t em { font-style: normal; font-size: 11px; color: rgba(244,246,241,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-line .btn { flex: none; }
@media (max-width: 560px) { .pz-line { top: 88px; left: 8px; max-width: calc(100% - 66px); } .pz-line-t em { font-size: 10.5px; } }

/* ===== Plaza chat: a collapsible card at the lower left of the world, message box inside ===== */
.pz-dock { display: none; }
.pz-wrap.pz-ov .pz-stage { container-type: inline-size; }
.pz-wrap.pz-ov .pz-side { position: absolute; z-index: 6; top: auto; right: auto; left: 12px; bottom: 12px; width: 420px; height: min(440px, calc(100% - 96px)); translate: none; padding-bottom: 66px; box-sizing: border-box; border-radius: 18px; border: 1px solid rgba(46,242,255,.34); background: linear-gradient(180deg, rgba(12,14,24,.86), rgba(6,7,12,.92)); box-shadow: 0 0 30px -12px rgba(46,242,255,.6), 0 24px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .22s var(--ease), visibility 0s; }
.pz-wrap.pz-ov.chat-off .pz-side { transform: translateY(18px) scale(.97); transform-origin: left bottom; opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s var(--ease), opacity .2s var(--ease), visibility 0s .28s; }
.pz-wrap.pz-ov .pz-side .pz-tabs .pz-hide { display: grid !important; }
/* the message box lives inside the bottom of the card */
.pz-wrap.pz-ov .pz-stage .pz-cbar { left: 24px; bottom: 24px; transform: none; width: 396px; z-index: 7; border-color: rgba(46,242,255,.32); box-shadow: none; background: rgba(4,5,9,.72); }
.pz-wrap.pz-ov.chat-off .pz-stage .pz-cbar { display: none; }
.pz-wrap.pz-ov .pz-cbar .pz-cb-log, .pz-wrap.pz-ov .pz-cbar .pz-cb-up, .pz-wrap.pz-ov .pz-cbar .pz-tick { display: none !important; }
/* collapsed: a small Chat pill in the corner with the unread count */
.pz-wrap.pz-ov.chat-off .pz-dock { display: inline-flex; position: absolute; z-index: 7; left: 12px; bottom: 12px; top: auto; transform: none; flex-direction: row; align-items: center; gap: 8px; width: auto; height: 44px; padding: 0 14px 0 12px; border: 1px solid rgba(46,242,255,.45); border-radius: 14px; background: rgba(6,7,12,.9); color: #9FF7FF; cursor: pointer; box-shadow: 0 0 20px -8px rgba(46,242,255,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pz-wrap.pz-ov.chat-off .pz-dock:hover { color: #2EF2FF; border-color: #2EF2FF; }
.pz-wrap.pz-ov.chat-off .pz-dock .dk-ic { display: block; }
.pz-wrap.pz-ov.chat-off .pz-dock .dk-t { display: block; writing-mode: horizontal-tb; transform: none; font: 700 .72rem/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; }
.pz-wrap.pz-ov.chat-off .pz-dock .dk-ch { display: block; transform: rotate(-90deg); }
.pz-dock i { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #FF3B5C; color: #fff; font: 700 .64rem/18px var(--font-mono, monospace); font-style: normal; text-align: center; }
.pz-dock i[hidden] { display: none; }
.pz-stage.ft-on .pz-dock { display: none !important; }
.pz-wrap.pz-ov .pz-chatbtn, .pz-wrap.pz-ov.chat-off .pz-chatbtn { display: none !important; }
@media (min-width: 981px) {
  .pz-wrap.pz-ov .pz-stage .pz-hint, .pz-wrap.pz-ov .pz-stage .pz-prompt, .pz-wrap.pz-ov .pz-stage .pz-talk, .pz-wrap.pz-ov .pz-stage .pz-rps { left: calc(50% + var(--cl, 0px) / 2); transition: left .3s var(--ease); }
  .pz-wrap.pz-ov .pz-stage .pz-talk { width: min(620px, calc(100% - 36px - var(--cl, 0px))); }
  .pz-wrap.pz-ov .pz-stage .pz-mini, .pz-wrap.pz-ov .pz-stage .pz-zoom { right: 12px; }
  .pz-wrap.pz-ov .pz-stage .pz-rainp { left: calc(12px + var(--cl, 0px)); }
  /* the emoji panel opens beside the card, bottoms lined up */
  .pz-wrap.pz-ov .pz-epick { left: calc(100% + 24px); right: auto; bottom: -12px; width: min(660px, calc(100cqw - 470px)); max-height: 440px; overflow-y: auto; scrollbar-width: thin; }
  .pz-wrap.pz-ov .pz-epick::after { display: none; }
}
@media (max-width: 980px) {
  .pz-wrap.pz-ov { display: block; position: relative; }
  .pz-wrap.pz-ov .pz-side { left: 8px; bottom: 8px; width: min(380px, calc(100% - 16px)); height: min(330px, calc(100% - 120px)); padding-bottom: 60px; border-radius: 16px; }
  .pz-wrap.pz-ov .pz-stage .pz-cbar { left: 16px; bottom: 16px; width: calc(min(380px, 100cqw - 16px) - 16px); }
  .pz-wrap.pz-ov.chat-off .pz-dock { left: 8px; bottom: 8px; height: 40px; }
  .pz-wrap.pz-ov .pz-side .pz-chtabs { gap: 4px; padding: 7px; }
  .pz-wrap.pz-ov .pz-side .pz-chtabs [data-pzc] { padding: 7px 8px; }
  .pz-wrap.pz-ov:not(.chat-off) .pz-stage .pz-zoom, .pz-wrap.pz-ov:not(.chat-off) .pz-stage .pz-mini { visibility: hidden; }
  .pz-wrap.pz-ov .pz-epick { left: -8px; right: auto; bottom: calc(100% + 10px); width: calc(100% + 16px); max-height: min(330px, 56vh); overflow-y: auto; }
  .pz-wrap.pz-ov .pz-epick::after { display: none; }
}
@media (min-width: 981px) and (max-width: 1180px) { .pz-wrap.pz-ov .pz-side { width: 380px; } .pz-wrap.pz-ov .pz-stage .pz-cbar { width: 356px; } }
/* emoji panel header: Emojis / Emotes / Rock-Paper-Scissors / Quick, and a close button */
.pz-ehead { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pz-ehead .pz-eseg { flex: 1 1 auto; min-width: 0; display: flex; margin: 0; overflow-x: auto; scrollbar-width: none; }
.pz-ehead .pz-eseg button { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 8px 10px; }
.pz-ehead .et-i { font: 400 .95rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.pz-ehead .et-s { display: none; }
.pz-ehead .et-new { font: 800 .56rem/1 var(--font-mono, monospace); letter-spacing: .08em; font-style: normal; color: #06070c; background: #FF4FD8; padding: 3px 5px; border-radius: 6px; box-shadow: 0 0 10px -2px rgba(255,79,216,.8); }
.pz-ex { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #05070b; color: var(--steel-2); font: 400 1.25rem/1 var(--font-body); cursor: pointer; }
.pz-ex:hover { color: #fff; border-color: rgba(255,255,255,.3); }
@container (max-width: 1180px) { .pz-ehead .et-l { display: none; } .pz-ehead .et-s { display: inline; } }
@media (max-width: 980px) { .pz-ehead .et-l { display: none; } .pz-ehead .et-s { display: inline; } .pz-ehead .et-i { display: none; } .pz-ehead .pz-eseg button { padding: 7px 6px; } }
/* the Rock-Paper-Scissors tab: hero, big hands, nearby players, emotes alongside */
.pz-rpsl:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 14px; }
.pz-rpsl .rps-main { min-width: 0; }
.pz-rpsl .rps-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pz-rpsl .rps-art { flex: none; font: 400 1.6rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; letter-spacing: -2px; filter: drop-shadow(0 0 10px rgba(46,242,255,.45)); }
.pz-rpsl h4 { margin: 0; font: 900 1.12rem/1.1 var(--font-display, Orbitron, sans-serif); letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #2EF2FF, #FF4FD8 55%, #FFC94A); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.pz-rpsl .rps-rec { margin: 3px 0 0; text-align: left; font-size: .72rem; }
.pz-rpsl .rps-sub { margin: 0 0 8px; color: rgba(244,246,241,.8); font: 500 .78rem/1.35 var(--font-body); max-width: none; }
.pz-rpsl .rps-sub b { color: #C8FF2E; text-transform: capitalize; }
.pz-rpsl .rps-hands button { height: 92px; }
.pz-rpsl .rps-hands .rps-rock { border-color: rgba(46,242,255,.55); background: radial-gradient(120% 90% at 50% 100%, rgba(46,242,255,.16), transparent 70%), #05070b; }
.pz-rpsl .rps-hands button span { font-size: 2.3rem; }
.pz-rpsl .rps-hands button b { font: 800 .74rem/1 var(--font-display, Orbitron, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.pz-rpsl .rps-hands button.on { border-color: #C8FF2E; box-shadow: 0 0 20px -4px rgba(200,255,46,.7); }
.pz-rpsl .rps-lbl { margin: 12px 0 6px; color: rgba(244,246,241,.5); font: 700 .64rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; max-width: none; }
.pz-rpsl .rps-side .rps-lbl { margin-top: 0; }
.pz-rpsl .rps-near { max-height: 132px; }
.pz-rpsl .rps-none { text-align: left; }
.pz-rpsl .rps-side { min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.07); }
.pz-rpsl .rps-mv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pz-rpsl .rps-mv button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 7px 2px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: #05070b; color: var(--steel-2); cursor: pointer; }
.pz-rpsl .rps-mv button:hover { border-color: rgba(46,242,255,.5); color: #fff; }
.pz-rpsl .rps-mv span { font: 400 1.25rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.pz-rpsl .rps-mv b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .62rem/1.1 var(--font-body); }
@container (max-width: 1100px) { .pz-rpsl:not([hidden]) { grid-template-columns: minmax(0, 1fr); } .pz-rpsl .rps-side { display: none; } }
@media (max-width: 980px) { .pz-rpsl:not([hidden]) { grid-template-columns: minmax(0, 1fr); } .pz-rpsl .rps-side { display: none; } .pz-rpsl .rps-hands button { height: 76px; } .pz-rpsl .rps-hands button span { font-size: 1.9rem; } }
.pz-epick:has(.pz-rpsl:not([hidden])) .pz-enote { display: none; }

/* ===== Rock Paper Scissors: the match panel and the picker tab ===== */
.pz-eseg { grid-template-columns: repeat(4, 1fr); }
.pz-eseg .rps-tab.on { color: #2EF2FF; border-color: rgba(46,242,255,.6); box-shadow: 0 0 12px -4px rgba(46,242,255,.6), inset 0 0 8px rgba(46,242,255,.1); }
.pz-rpsl[hidden] { display: none; }
.rps-hero { display: flex; justify-content: center; gap: 10px; margin: 2px 0 8px; }
.rps-hero span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #05070b; border: 1px solid rgba(46,242,255,.35); box-shadow: 0 0 16px -6px rgba(46,242,255,.6); font: 400 1.6rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.rps-hero span:nth-child(2) { border-color: rgba(255,79,216,.45); box-shadow: 0 0 16px -6px rgba(255,79,216,.6); }
.rps-hero span:nth-child(3) { border-color: rgba(255,201,74,.45); box-shadow: 0 0 16px -6px rgba(255,201,74,.6); }
.rps-rec { margin: 0 0 8px; color: rgba(244,246,241,.72); font: 500 .76rem/1.4 var(--font-body); text-align: center; max-width: none; }
.rps-rec b { color: #C8FF2E; }
.rps-none { margin: 4px 0 2px; color: rgba(244,246,241,.55); font: 500 .76rem/1.45 var(--font-body); text-align: center; max-width: none; }
.rps-near { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 196px; overflow-y: auto; scrollbar-width: thin; }
.rps-near li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 4px; border-radius: 10px; }
.rps-near li:hover { background: rgba(255,255,255,.04); }
.rps-near img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid rgba(255,255,255,.12); background: #11141c; }
.rps-near span { min-width: 0; }
.rps-near b { display: block; color: var(--bone); font: 700 .82rem/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rps-near small { display: block; color: rgba(244,246,241,.5); font: 500 .7rem/1.3 var(--font-body); }
.rps-near .btn { white-space: nowrap; }
.pz-rps { position: absolute; z-index: 6; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); box-sizing: border-box; padding: 12px 14px 14px; border-radius: 18px; background: rgba(6,7,12,.92); border: 1px solid rgba(46,242,255,.42); box-shadow: 0 0 30px -10px rgba(46,242,255,.6), 0 18px 44px -18px rgba(0,0,0,.95); color: var(--bone); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pz-rps[hidden] { display: none; }
.rps-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rps-h b { font: 800 .82rem/1 var(--font-display, Orbitron, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #9FF7FF; }
.rps-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: #05070b; color: rgba(244,246,241,.75); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.rps-x:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.rps-sc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #05070b; border: 1px solid rgba(255,255,255,.07); }
.rps-sc span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rps-sc span:last-child { justify-content: flex-end; }
.rps-sc b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .8rem/1.2 var(--font-body); }
.rps-sc .me b { color: #C8FF2E; }
.rps-sc i { font: 800 1.15rem/1 var(--font-display, Orbitron, sans-serif); font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.rps-sc small { color: rgba(244,246,241,.45); font: 600 .64rem/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.rps-q { margin: 10px 0 8px; text-align: center; font: 600 .84rem/1.35 var(--font-body); color: rgba(244,246,241,.85); max-width: none; overflow-wrap: anywhere; min-height: 1.35em; }
.rps-q.good, .rps-big.good { color: #C8FF2E; }
.rps-q.bad, .rps-big.bad { color: #FF8FA8; }
.rps-hands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rps-hands button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 84px; padding: 0; border-radius: 14px; border: 1px solid rgba(46,242,255,.45); background: radial-gradient(120% 90% at 50% 100%, rgba(46,242,255,.16), transparent 60%), #05070b; color: var(--bone); font: 700 .78rem/1 var(--font-body); cursor: pointer; box-shadow: 0 0 14px -6px rgba(46,242,255,.6); transition: transform .12s, border-color .15s, box-shadow .15s; }
.rps-hands button:nth-child(2) { border-color: rgba(255,79,216,.5); background: radial-gradient(120% 90% at 50% 100%, rgba(255,79,216,.16), transparent 60%), #05070b; box-shadow: 0 0 14px -6px rgba(255,79,216,.6); }
.rps-hands button:nth-child(3) { border-color: rgba(255,201,74,.5); background: radial-gradient(120% 90% at 50% 100%, rgba(255,201,74,.16), transparent 60%), #05070b; box-shadow: 0 0 14px -6px rgba(255,201,74,.6); }
.rps-hands button span { font: 400 2rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.rps-hands button:hover:not(:disabled) { transform: translateY(-2px); border-color: #fff; }
.rps-hands button:disabled { cursor: default; opacity: .38; }
.rps-hands button.on:disabled { opacity: 1; border-color: #C8FF2E; box-shadow: 0 0 20px -4px rgba(200,255,46,.7); }
.rps-t { height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.rps-t[data-off] { visibility: hidden; }
.rps-t i { display: block; height: 100%; width: calc(var(--t, 1) * 100%); background: linear-gradient(90deg, #2EF2FF, #C8FF2E); border-radius: 2px; }
.rps-rev { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 10px; }
.rps-rev span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: #05070b; border: 1px solid rgba(255,255,255,.08); }
.rps-rev em { font: 400 2rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-style: normal; }
.rps-rev b { font: 700 .74rem/1 var(--font-body); color: rgba(244,246,241,.8); }
.rps-rev small { color: rgba(244,246,241,.45); font: 700 .7rem/1 var(--font-mono, monospace); text-transform: uppercase; }
.rps-big { margin: 12px 0 10px; text-align: center; font: 800 1.1rem/1.25 var(--font-display, Orbitron, sans-serif); max-width: none; overflow-wrap: anywhere; }
.rps-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .pz-rps { bottom: 62px; width: calc(100% - 16px); padding: 10px 12px 12px; }
  .rps-hands button { height: 72px; }
  .rps-hands button span { font-size: 1.7rem; }
  .pz-eseg button { padding: 7px 2px; font-size: .74rem; }
}
.pz-stage.ft-on .pz-rps { display: none; }
.pz-wrap.pz-ov .pz-epick { background: linear-gradient(180deg, rgba(12,14,24,.98), rgba(6,7,12,.99)); border-color: rgba(46,242,255,.34); box-shadow: 0 0 30px -12px rgba(46,242,255,.6), 0 24px 60px -24px rgba(0,0,0,.95); border-radius: 18px; }
.pz-wrap.pz-ov .pz-epick .pz-egrid, .pz-wrap.pz-ov .pz-epick .pz-quick { max-height: none; }

/* ===== LUCKY SEVENS: classic 3-reel, locked Wild multipliers, pull lever ===== */
.th-ls { --gold: #FFD23F; --gold2: #FF3B3B; --red: #FF3B3B; --glow: rgba(255,59,59,.32); --edge: rgba(255,210,63,.4); --bgimg: url(assets/sevens/bg.webp); --font-x: 'Orbitron', sans-serif; background-image: url(assets/sevens/bg.webp); border-color: rgba(255,210,63,.4); }
.th-ls.bonus::before { background: radial-gradient(60% 55% at 50% 52%, rgba(255,40,40,.18), rgba(16,2,4,.84)); }
.th-ls .oc-char { filter: drop-shadow(0 0 20px rgba(255,59,59,.34)) drop-shadow(0 10px 20px rgba(0,0,0,.7)); }
.th-ls .sl-reel { position: relative; background: linear-gradient(180deg, #e9e4da 0%, #fffdf6 18%, #fffdf6 82%, #d9d2c4 100%); border-color: rgba(255,210,63,.55); box-shadow: inset 0 10px 18px rgba(0,0,0,.35), inset 0 -10px 18px rgba(0,0,0,.35); }
.th-ls .sl-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.32), transparent 16%, transparent 84%, rgba(0,0,0,.32)); }
.th-ls .sl-art img { filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.th-ls .xs-window { box-shadow: 0 0 0 3px #C8A040, 0 0 0 6px #5a0a0a, 0 0 0 8px #FFD23F, 0 0 34px rgba(255,59,59,.45); }
.th-ls :is(.sym-ST, .sym-WD) .sl-art { animation: skpulse 1.6s ease-in-out infinite; }
.th-ls .xs-lines polyline { stroke-width: 7; }
.ls-grid { max-width: min(100%, 560px); margin-inline: auto; }
.ls-sym { position: relative; }
.ls-wx { position: absolute; right: 6%; bottom: 6%; z-index: 2; padding: 1px 7px; border-radius: 999px; font-size: clamp(11px, 1.5vw, 16px); font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff5a5a, #b80d0d); border: 1.5px solid #FFD23F; box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(255,59,59,.6); line-height: 1.35; letter-spacing: .02em; }
.ls-lock { position: absolute; left: 0; right: 0; height: calc(100% / 3); z-index: 4; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 50%, rgba(127,232,255,.35), rgba(20,10,40,.92)); box-shadow: inset 0 0 0 2px rgba(127,232,255,.85), inset 0 0 20px rgba(127,232,255,.4); border-radius: 8px; }
.ls-lock img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(127,232,255,.8)); animation: lsglow 1.6s ease-in-out infinite alternate; }
.ls-lock.new { animation: lsdrop .55s cubic-bezier(.2,1.4,.4,1); }
.ls-lock.win { box-shadow: inset 0 0 0 3px #FFD23F, inset 0 0 26px rgba(255,210,63,.6), 0 0 18px rgba(255,210,63,.6); }
@keyframes lsdrop { 0% { transform: translateY(-60%) scale(1.3); opacity: 0; } 70% { transform: translateY(3%) scale(.97); opacity: 1; } 100% { transform: none; } }
@keyframes lsglow { to { filter: drop-shadow(0 0 20px rgba(127,232,255,1)) brightness(1.12); } }
.ls-chip { gap: 6px; }
.ls-mx { display: inline-block; padding: 0 6px; border-radius: 999px; background: #b80d0d; color: #fff; font-weight: 800; font-size: .85em; border: 1px solid #FFD23F; }
/* pull lever on the right of the cabinet */
.ls-lever { position: absolute; z-index: 5; right: -46px; top: 18%; width: 40px; height: 64%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ls-lv-base { position: absolute; left: 4px; right: 4px; bottom: 0; height: 34%; border-radius: 10px; background: linear-gradient(90deg, #6d6d74, #f2f2f6 40%, #8a8a92 70%, #4a4a52); box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.3); }
.ls-lv-arm { position: absolute; left: 50%; bottom: 17%; width: 8px; height: 82%; margin-left: -4px; border-radius: 4px; background: linear-gradient(90deg, #707078, #ffffff 45%, #8a8a92); box-shadow: 0 0 6px rgba(0,0,0,.5); transform-origin: 50% 100%; transition: transform .2s; }
.ls-lv-ball { position: absolute; left: 50%; top: -14px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9b9b, #e01818 45%, #7a0606); box-shadow: 0 0 14px rgba(255,59,59,.7), 0 4px 8px rgba(0,0,0,.6); }
.ls-lever:hover .ls-lv-arm { transform: scaleY(.96); }
.ls-lever:focus-visible { outline: 2px solid #FFD23F; outline-offset: 4px; border-radius: 10px; }
.ls-lever.pull .ls-lv-arm { animation: lspull .6s cubic-bezier(.3,.7,.4,1); }
@keyframes lspull { 0% { transform: none; } 35% { transform: scaleY(-.55); } 60% { transform: scaleY(-.45); } 100% { transform: none; } }
html.rm .ls-lever.pull .ls-lv-arm, html.rm .ls-lock img, html.rm .ls-lock.new { animation: none; }
@media (max-width: 700px) { .ls-lever { right: -30px; width: 28px; } .ls-lv-ball { width: 22px; height: 22px; margin-left: -11px; top: -10px; } .ls-lv-arm { width: 6px; margin-left: -3px; } }
/* LUCKY SEVENS: the bonus banner takes the empty HUD slot, so the board never moves when it appears */
.th-ls .xs-hud { min-height: 40px; margin: 0 0 8px; }
.th-ls .sl-fs { box-sizing: border-box; height: 40px; margin: 0 0 8px; padding: 0 12px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; gap: 12px; }
.th-ls .sl-fs:not([hidden]) + .xs-hud { display: none; }
@media (max-width: 720px) {
  .th-ls .xs-hud { min-height: 34px; margin: 0 0 6px; }
  .th-ls .sl-fs { height: 34px; margin: 0 0 6px; gap: 8px; font-size: 11px; padding: 0 8px; }
  .th-ls .sl-fs b { letter-spacing: .08em; }
}
@media (max-width: 720px) { .th-ls .sl-fs > span:nth-of-type(3) { display: none; } }
@media (max-width: 720px) { .th-ls .ls-lever { display: none; } }

/* ===== Vegas slot tiles: chasing marquee bulbs, colour-cycling neon glow, light sweep and a slow art pulse ===== */
.lt.xs-lt, .lt.jp { --vg1: #FF3FD0; --vg2: #2EF2FF; --vg3: #FFD23F; border: 1px solid rgba(255,210,63,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset, 0 0 18px -4px var(--vg1), 0 0 34px -12px var(--vg2);
  animation: vgGlow 7s ease-in-out infinite; }
.lt-grid .lt.xs-lt:nth-child(3n+1) { --vg1: #2EF2FF; --vg2: #FFD23F; --vg3: #FF3FD0; animation-delay: -2.3s; }
.lt-grid .lt.xs-lt:nth-child(3n+2) { --vg1: #FFD23F; --vg2: #FF3FD0; --vg3: #2EF2FF; animation-delay: -4.6s; }
@keyframes vgGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset, 0 0 18px -4px var(--vg1), 0 0 34px -12px var(--vg1); border-color: color-mix(in srgb, var(--vg1) 65%, transparent); }
  33% { box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset, 0 0 18px -4px var(--vg2), 0 0 34px -12px var(--vg2); border-color: color-mix(in srgb, var(--vg2) 65%, transparent); }
  66% { box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset, 0 0 18px -4px var(--vg3), 0 0 34px -12px var(--vg3); border-color: color-mix(in srgb, var(--vg3) 65%, transparent); }
}
/* bulb ring: two offset rows of dots that swap each step, so the lights chase around the frame */
.lt.xs-lt::after, .lt.jp::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 7px;
  background:
    radial-gradient(circle at center, #FFF8D6 0 1.6px, var(--vg3) 2.4px, transparent 3.6px) 0 0 / 16px 16px,
    radial-gradient(circle at center, rgba(255,255,255,.5) 0 1.2px, color-mix(in srgb, var(--vg1) 70%, transparent) 2px, transparent 3.2px) 8px 8px / 16px 16px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vgChase .9s steps(2) infinite; filter: drop-shadow(0 0 3px var(--vg3)); }
@keyframes vgChase { to { background-position: 16px 0, 24px 8px; } }
/* light sweep across the art every few seconds, and a slow breathing zoom */
.lt.xs-lt .lt-art, .lt.jp .lt-art { animation: vgPulse 9s ease-in-out infinite; }
.lt.xs-lt .lt-art::after, .lt.jp .lt-art::after { content: ''; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 49%, rgba(255,240,200,.32) 50%, rgba(255,255,255,.22) 51%, transparent 58%);
  transform: translateX(-60%); animation: vgShine 5.5s ease-in-out infinite; mix-blend-mode: screen; }
.lt-grid .lt.xs-lt:nth-child(3n+1) .lt-art::after { animation-delay: -1.8s; }
.lt-grid .lt.xs-lt:nth-child(3n+2) .lt-art::after { animation-delay: -3.6s; }
@keyframes vgPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes vgShine { 0%, 62% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.lt.xs-lt:hover .lt-art, .lt.jp:hover .lt-art { animation-play-state: paused; transform: scale(1.07); }
.lt.xs-lt h3, .lt.jp h3 { text-shadow: 0 0 14px color-mix(in srgb, var(--vg1) 70%, transparent), 0 2px 0 rgba(0,0,0,.6); }
.lt.xs-lt .lt-tag, .lt.jp .lt-tag { z-index: 2; background: linear-gradient(180deg, #FFE27A, #F5B321); color: #1A0E00; box-shadow: 0 0 12px rgba(255,210,63,.6); }
.lt.xs-lt .lt-body, .lt.jp .lt-body { position: relative; z-index: 2; }
html.rm .lt.xs-lt, html.rm .lt.jp, html.rm .lt.xs-lt::after, html.rm .lt.jp::after,
html.rm .lt.xs-lt .lt-art, html.rm .lt.jp .lt-art, html.rm .lt.xs-lt .lt-art::after, html.rm .lt.jp .lt-art::after { animation: none; }
html.rm .lt.xs-lt .lt-art::after, html.rm .lt.jp .lt-art::after { display: none; }
/* lobby Play pills: black with a green glow, never the flat highlighter fill */
.lt:hover .lt-play, .lt:focus-visible .lt-play { background: #06090A; color: #C8FF2E; border-color: rgba(200,255,46,.75); box-shadow: 0 0 14px rgba(200,255,46,.45), inset 0 0 8px rgba(200,255,46,.15); }
@media (hover: none) { .lt-play { background: #06090A; color: #C8FF2E; border-color: rgba(200,255,46,.75); box-shadow: 0 0 14px rgba(200,255,46,.45), inset 0 0 8px rgba(200,255,46,.15); } }
.lt.xs-lt .lt-play, .lt.jp .lt-play { z-index: 2; }
/* auto picker (25 / 50 / 100 / Nonstop): the segment never squeezes its labels; Start auto drops to its own row when space runs out */
.auto-opts.inline, :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline, .og-dock-in .auto-opts.inline { flex-wrap: wrap !important; row-gap: 8px; }
.auto-opts .seg, :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline .seg, .og-dock-in .auto-opts.inline .seg { min-width: max-content !important; }
.auto-opts.inline .auto-go { flex: 1 0 auto; }
.auto-opts .seg button, :is(#crFelt, #dcFelt, #lbFelt, #pFelt, #kFelt, #vFelt) .auto-opts.inline .seg button { padding-left: 9px !important; padding-right: 9px !important; }
/* back bar always paints above the blurred game backdrop */
.view > .pz-backbar { position: relative; z-index: 5; }
/* Originals on wide screens: the board and the bet panel end at the bottom of the window, no scrolling to see the game */
@media (min-width: 1181px) {
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault).og-dk :is(#pFelt, #kFelt, #mnFelt, #dcFelt, #lbFelt, #crFelt, #vFelt).og-docked { --ogH: clamp(420px, calc(100vh - var(--ogTop, 136px) - 14px), 1000px); height: var(--ogH) !important; max-height: var(--ogH) !important; }
  :is(#view-plinko, #view-keno, #view-mines, #view-dice, #view-limbo, #view-crash, #view-vault).og-dk .table-layout > aside.market.og-dock { max-height: clamp(420px, calc(100vh - var(--ogTop, 136px) - 14px), 1000px); }
}
/* Crash: cash out right on the chart */
.cr-stage { position: relative; }
.cr-go { top: auto !important; bottom: 12%; translate: -50% 0 !important; z-index: 4 !important; }
.cr-go[hidden] { display: none !important; }
@media (max-width: 760px) { .cr-go { bottom: 9%; } }
/* the side-panel cash-out buttons follow the same black and neon green as every other primary action */
.kit-ride .btn.b-co:not(:disabled), .market .btn.co-main:not(:disabled) {
  background: #05070b !important; background-image: none !important; color: #EAFFF2 !important;
  border: 1px solid rgba(var(--ng), .85) !important;
  box-shadow: 0 0 0 1px rgba(var(--ng), .22) inset, 0 0 14px rgba(var(--ng), .5), 0 0 32px rgba(var(--ng), .2) !important;
  text-shadow: 0 0 8px rgba(var(--ng), .5);
}
.kit-ride .btn.b-co:not(:disabled):hover, .market .btn.co-main:not(:disabled):hover { background: #070a0e !important; color: #fff !important; border-color: #3DFF9A !important; box-shadow: 0 0 0 1px rgba(var(--ng), .4) inset, 0 0 18px rgba(var(--ng), .75), 0 0 44px rgba(var(--ng), .3) !important; }
.kit-ride .btn.b-co :is(span, b, small), .market .btn.co-main :is(span, b, small) { color: inherit !important; }
/* Rips: the Daily Drop reminder sits under Back to Plaza, lined up with the page, with room above and below */
#view-rips > .pz-backbar + .dd-bar { box-sizing: border-box; width: 100%; max-width: none; margin: 12px 0 18px; }
/* Limbo (wide screens): the dial shrinks to the height left over, so the target row is never cut off */
@media (min-width: 1181px) {
  #view-limbo #lbFelt.og-docked > .lb-stage { container-type: size; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; overflow: hidden; }
  #view-limbo #lbFelt.og-docked > .lb-stage > .lb-dial { flex: 0 0 auto; width: min(100%, 600px, calc((100cqh - var(--lbStatsH, 118px) - 22px) / .86)) !important; }
  #view-limbo #lbFelt.og-docked > .lb-stage > .lb-stats { flex: 0 0 auto; width: 100%; }
}
/* Daily Drop pop-up: always centered in the window */
dialog.dd-dlg[open] { position: fixed !important; inset: 0 !important; margin: auto !important; height: fit-content; }
/* Top bar: no game tabs. Games are reached by walking the Plaza; level, trophies, messages, balance, piggy bank and profile stay */
.topbar.no-nav > .nav { display: none !important; }
.topbar.no-nav { justify-content: space-between; }
.topbar.no-nav > .wallet { margin-left: auto; }
@media (max-width: 560px) {
  .topbar.no-nav { flex-wrap: nowrap !important; gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .topbar.no-nav > .logo { flex: 0 0 auto; }
  .topbar.no-nav > .logo img, .topbar.no-nav > .logo svg { max-width: 76px; height: auto; }
  .topbar.no-nav > .wallet { flex: 0 1 auto; min-width: 0; gap: 6px !important; width: auto !important; order: 0 !important; }
}
@media (max-width: 400px) {
  .topbar.no-nav { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .topbar.no-nav > .logo { flex: 0 0 auto !important; }
  .topbar.no-nav > .wallet { gap: 4px !important; }
  .topbar.no-nav > .wallet .balance .lbl { display: none; }
  .topbar.no-nav > .wallet :is(#authBtn, .auth-btn, [data-auth]) { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 380px) { .topbar.no-nav > .logo { font-size: 1.3rem; } .topbar.no-nav > .wallet .balance .num { font-size: .95em; } }

/* ---------- player survey, report player, suspension (feedback.js) ---------- */
dialog.fb-dlg { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid color-mix(in srgb, var(--acid, #C8FF2E) 35%, #1c2027); border-radius: 18px; background: #07080b; color: var(--bone, #EDEBE4); box-shadow: 0 0 0 1px #000, 0 24px 80px rgba(0,0,0,.7), 0 0 40px color-mix(in srgb, var(--acid, #C8FF2E) 14%, transparent); overflow: hidden; overscroll-behavior: contain; }
dialog.fb-dlg::backdrop { background: rgba(3,4,6,.78); backdrop-filter: blur(4px); }
.fb-card { position: relative; display: grid; gap: 14px; padding: 22px 20px 18px; max-height: calc(100dvh - 26px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.fb-card h2 { margin: 0; font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.2; padding-right: 34px; overflow-wrap: anywhere; }
.fb-kick { margin: 0; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acid, #C8FF2E); }
.fb-sub { margin: -6px 0 0; font-size: .86rem; line-height: 1.45; color: #a9adb6; overflow-wrap: anywhere; }
.fb-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #2a2f38; background: #0e1015; color: var(--bone, #EDEBE4); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fb-q { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fb-q legend, .fb-l { padding: 0; margin-bottom: 8px; font-size: .9rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fb-l { margin-bottom: 0; }
.fb-q small { font-weight: 400; color: #8d929c; }
.fb-q textarea, .fb-q input[type=email] { width: 100%; box-sizing: border-box; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #262a33; background: #0d0f14; color: var(--bone, #EDEBE4); font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.fb-q textarea:focus, .fb-q input:focus-visible { outline: none; border-color: var(--acid, #C8FF2E); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acid, #C8FF2E) 18%, transparent); }
.fb-q input[type=radio], .fb-q input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fb-stars { display: flex; gap: 6px; }
.fb-stars label { cursor: pointer; font-size: 2rem; line-height: 1; color: #2b303a; transition: color .12s, text-shadow .12s; }
.fb-stars:has(input:checked) label { color: var(--acid, #C8FF2E); text-shadow: 0 0 12px color-mix(in srgb, var(--acid, #C8FF2E) 50%, transparent); }
.fb-stars label:has(input:checked) ~ label { color: #2b303a; text-shadow: none; }
.fb-stars label:has(input:focus-visible) span { outline: 2px solid var(--acid, #C8FF2E); outline-offset: 2px; border-radius: 4px; }
.fb-chips, .fb-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fb-chips label span, .fb-reasons label span, .fb-nps label span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; box-sizing: border-box; border-radius: 999px; border: 1px solid #262a33; background: #0d0f14; color: #c9ccd3; font-size: .84rem; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .12s, color .12s, box-shadow .12s; overflow-wrap: anywhere; }
.fb-reasons label span { justify-content: flex-start; border-radius: 10px; text-align: left; }
.fb-chips label:has(input:checked) span, .fb-reasons label:has(input:checked) span, .fb-nps label:has(input:checked) span { border-color: var(--acid, #C8FF2E); color: var(--acid, #C8FF2E); background: #000; box-shadow: 0 0 12px color-mix(in srgb, var(--acid, #C8FF2E) 28%, transparent); }
.fb-chips label:has(input:focus-visible) span, .fb-reasons label:has(input:focus-visible) span, .fb-nps label:has(input:focus-visible) span { outline: 2px solid var(--acid, #C8FF2E); outline-offset: 2px; }
.fb-nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.fb-nps label span { min-height: 36px; padding: 0; border-radius: 8px; font-variant-numeric: tabular-nums; }
.fb-nps-k { display: flex; justify-content: space-between; margin-top: -2px; }
.fb-err { margin: 0; color: #ff8a8a; font-size: .85rem; }
.fb-act { display: flex; flex-wrap: wrap; gap: 10px; position: sticky; bottom: -18px; margin: 0 -20px -18px; padding: 12px 20px 16px; background: linear-gradient(transparent, #07080b 30%); }
.fb-act .btn { flex: 1 1 120px; min-height: 44px; padding-inline: 10px; white-space: nowrap; }
.fb-done { display: grid; gap: 12px; padding: 18px 0 4px; text-align: center; justify-items: center; }
.fb-done p { margin: 0; color: #a9adb6; line-height: 1.45; max-width: 40ch; }
.pf-report { display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: none; color: #8d929c; font: inherit; font-size: .76rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-report:hover, .pf-report:focus-visible { color: #ff8a8a; }
.fb-ban { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px; background: rgba(3,4,6,.96); }
.fb-ban-in { width: min(460px, 100%); padding: 28px 22px; border-radius: 18px; border: 1px solid #3a1f24; background: #08090c; text-align: center; color: var(--bone, #EDEBE4); }
.fb-ban-in h2 { margin: 0 0 10px; font-size: 1.3rem; }
.fb-ban-in p { margin: 8px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.fb-mut { color: #8d929c; font-size: .86rem; }
html.fb-banned body { overflow: hidden; }
@media (max-width: 400px) { .fb-card { padding: 18px 14px 14px; } .fb-act { margin: 0 -14px -14px; padding: 12px 14px 14px; bottom: -14px; } .fb-nps { gap: 3px; } .fb-nps label span { font-size: .76rem; min-height: 34px; } .fb-stars label { font-size: 1.75rem; } }
/* Plaza on slower machines: frosted panels over the moving city are re-blurred every frame, so drop to solid glass */
html.pz-lq [class*="pz-"], html.pz-lq [id^="pz"], html.pz-lq .topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.pz-lq #pzSide, html.pz-lq #pzCbar { background-color: rgba(8, 9, 14, .92) !important; }
/* password show / hide eye */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 48px !important; box-sizing: border-box; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8d929c; cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: #C8FF2E; }
.pw-eye:focus-visible { outline: 2px solid #C8FF2E; outline-offset: 1px; }
input[type="password"]::-ms-reveal { display: none; }

/* ---------- welcome gate (gate.js) ---------- */
html.gate-on body { overflow: hidden; }
.gate { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: #040507; transition: opacity .35s ease; }
.gate.out { opacity: 0; pointer-events: none; }
.gate-bg { position: fixed; inset: 0; background: url(assets/social/plaza-wide.webp) center 40% / cover no-repeat; filter: blur(6px) brightness(.38) saturate(1.15); transform: scale(1.06); }
.gate-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(4,5,7,.2), rgba(4,5,7,.85) 80%); }
.gate-card { position: relative; width: min(440px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 32px 24px 24px; box-sizing: border-box; border-radius: 22px; border: 1px solid rgba(200,255,46,.28); background: rgba(6,7,10,.86); box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 50px rgba(200,255,46,.1); }
.gate-logo { display: flex; align-items: center; font: 800 2.4rem/1 var(--font-display, inherit); letter-spacing: .02em; color: #fff; }
.gate-logo .candle { height: 34px; width: 12px; margin: 0 6px; }
.gate-kick { margin: 4px 0 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid, #C8FF2E); }
.gate-card h1 { margin: 0; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.12; overflow-wrap: anywhere; }
.gate-sub { margin: 0; max-width: 36ch; color: #b4b8c0; font-size: .95rem; line-height: 1.5; }
.gate-act { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.gate-b { width: 100%; min-height: 50px; font-size: 1rem; }
.gate-guest { justify-self: center; min-height: 44px; padding: 8px 18px; border: 0; background: none; color: #d6d9df; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.gate-guest:hover, .gate-guest:focus-visible { color: var(--acid, #C8FF2E); }
.gate-fine { margin: 2px 0 0; max-width: 38ch; color: #7f848e; font-size: .8rem; line-height: 1.45; }
@media (max-height: 560px) { .gate { place-items: start center; } .gate-card { padding: 22px 18px 18px; gap: 10px; } .gate-logo { font-size: 1.9rem; } }

/* ---------- phones: table game controls dock to the bottom of the screen ----------
   Chips, Deal / Roll / Spin and every in-hand choice (Hit, Stand, Double, Split, Check, Raise, Fold, Pull back, Cash out)
   stay on screen without scrolling. The dock is kept short so the bet spots and cards stay visible above it. */
@media (max-width: 760px) {
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) :is(.felt, .table-layout, .view-inner) { overflow: clip; overflow-clip-margin: 0; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) :is(.table-layout > *, .felt, .controls, .chips, .bet-row) { min-width: 0; max-width: 100%; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls:not([hidden]) {
    position: sticky; bottom: 0; z-index: 40; gap: 6px !important;
    margin: 0 !important; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(to top, rgba(5,7,11,.98) 0, rgba(5,7,11,.95) 86%, rgba(5,7,11,0) 100%);
    border-radius: 14px 14px 0 0;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .chips {
    flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start; gap: 6px !important; margin: 0 !important; padding: 2px 2px 4px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .chips::-webkit-scrollbar { display: none; }
  html body :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .chip { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; font-size: 11px !important; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-row {
    display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px !important; margin: 0 !important;
  }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-row .btn { min-height: 40px; height: 40px; padding: 0 12px; font-size: 14px; flex: 0 0 auto; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-row .btn-primary { flex: 1 1 96px; max-width: 160px; }
  /* the bet spots on the felt already show each amount, so the dock drops the total box and keeps one row of buttons */
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-row .bet-amt { display: none !important; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-row { flex-wrap: nowrap !important; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-row .btn { padding: 0 10px !important; min-width: 0 !important; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .bet-line { display: none !important; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .actions { gap: 6px !important; margin: 0 !important; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .actions .btn { min-height: 44px; height: 44px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp, #view-craps, #view-sicbo, #view-roulette) .controls .hint { margin: 0; font-size: 11px; }
  :is(#view-table, #view-baccarat, #view-holdem, #view-lir, #view-tcp) .felt .stage.wide { height: 120px !important; min-height: 0 !important; }
}