/* ==========================================================================
   DonutFortune v4 shell (2026-10-11)
   Loaded after casino.html's inline styles, games.css and site.css, so it has
   the final say on the shell: colours, type, the menu, the top bar, the lobby,
   game tiles, chat, popups, the settings panel and the boot screen.
   Game stages (games.css, the game blocks in site.css) only pick up the new
   tokens; their layout is untouched.
   ========================================================================== */

/* ---------- tokens ---------- */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --bg: #0b0c10; --bg2: #0f1016; --panel: #14161d; --panel2: #1a1d25; --panel3: #232733;
  --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.13);
  --text: #f3f4f8; --muted: #9a9fb1; --faint: #656b7d;
  --accent: #3f8ef8; --accent2: #6fb0ff; --accent-dk: #163258;
  --lux: #3f8ef8; --lux2: #6fb0ff; --lux-ink: #ffffff; --lux-line: rgba(63,142,248,.5); --lux-soft: rgba(63,142,248,.14);
  --primary: #3f8ef8; --primary2: #6fb0ff; --primary-ink: #ffffff;
  --gold: #ffc940; --gold2: #e0a60e; --win: #3ad67c; --red: #ff5a6e; --cyan: #5ad7e0; --violet: #b18cff; --emerald: #3ad67c;
  --shadow: 0 14px 36px rgba(0,0,0,.45);
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --mono: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* numbers: the body face with tabular figures, not a typewriter font */
  --code: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;             /* commands, seeds, hashes, codes */
  --pixel: 'Silkscreen', 'JetBrains Mono', monospace;
  --railW: 244px; --chatW: 332px; --topH: 64px;
  --r-card: 6px; --r-btn: 5px;
}
html { background: var(--bg); color-scheme: dark; }
body { background: var(--bg) !important; color: var(--text); font-family: var(--font); font-size: 14px; letter-spacing: 0; }
body::before, body::after { display: none !important; content: none !important; }
button, input, select, textarea { font-family: var(--font); }
::selection { background: rgba(63,142,248,.35); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2a2e3b; border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3f50; }
a { color: var(--accent2); }
h1, h2, h3, h4, .m-title, .gv-title, .prof-name, .bl-title { font-family: var(--display); letter-spacing: -.015em; }

/* Tiny labels (NEW / HOT / LV) in the pixel face: the one place the pixel art leaks into the UI. */
.px, .rbadge, .gcard .badge, .sc-new, .scard .sc-real, .scard .sc-demo, .lvchip, .lvl-badge, .btag, .rs-tag, .pill.botpill, .sidefoot > span:first-child, .boot-tip, .set-kicker {
  font-family: var(--pixel) !important; font-weight: 400 !important; font-size: 8px !important; letter-spacing: .4px !important; text-transform: uppercase; line-height: 1 !important;
  -webkit-font-smoothing: none; font-smooth: never;
}

/* ---------- buttons + fields ---------- */
.btn, .bigbtn, .joinbtn, .chat-send, .minibtn, .depobtn, .profilechip.signin, .dcloginbtn, .rainbtn, .daily-btn, .grow-all, .lvl-pathbtn, .sp-back, .m-close, .iconbtn, .bq, .cx-chip {
  font-family: var(--font); font-weight: 700; letter-spacing: 0; text-transform: none; border-radius: var(--r-btn) !important; box-shadow: none !important;
}
.btn { background: var(--accent) !important; color: #fff !important; border: 0 !important; min-height: 44px; font-size: 13.5px; transition: background .15s, transform .12s; }
.btn:hover { background: var(--accent2) !important; filter: none !important; }
.btn:active { transform: translateY(1px); }
.btn.alt, .joinbtn.ghost, .minibtn { background: var(--panel3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.btn.alt:hover, .joinbtn.ghost:hover, .minibtn:hover { background: #2b3040 !important; border-color: var(--border2) !important; }
.bigbtn, .profilechip.signin { background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.bigbtn:hover, .profilechip.signin:hover { background: var(--accent2) !important; }
.bigbtn.green { background: var(--win) !important; color: #06240f !important; }
.bigbtn.discord, .dcloginbtn:not(.linked) { background: #5865f2 !important; color: #fff !important; }
input:not([type="checkbox"]):not([type="range"]), textarea, select, .search input, .bet-in {
  background: var(--bg2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--r-btn) !important; font-family: var(--font); font-weight: 600;
}
input:not([type="checkbox"]):not([type="range"]):focus, textarea:focus, .search input:focus { outline: 0; border-color: var(--lux-line) !important; box-shadow: 0 0 0 3px var(--lux-soft) !important; }
input::placeholder { color: var(--faint); font-weight: 500; }
.hint, .set-p, .stagenote { color: var(--muted); }
.err:not(:empty) { color: #ff8b9a; font-weight: 600; }

/* ---------- app grid ---------- */
.app { display: grid; grid-template-columns: var(--railW) minmax(0, 1fr) var(--chatW); min-height: 100vh; }
.pagewrap { animation: none !important; }

/* ---------- boot screen ----------
   Pure CSS: visible from the first paint, the bundle adds body.booted when the
   config has loaded (min 1.1 s so the bar finishes), and a timed fallback lifts
   it on its own if the script never arrives. */
.boot { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; background: var(--bg); overflow: hidden; animation: bootOut .6s cubic-bezier(.76,0,.24,1) 9s forwards; }
.boot::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%); }
.boot-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: bootLift .6s cubic-bezier(.76,0,.24,1) 9s forwards; }
.boot-logo { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(63,142,248,.35), 0 0 0 1px rgba(255,255,255,.08); animation: bootDrop .7s cubic-bezier(.2,1.4,.3,1) both; }
.boot-logo img { display: block; width: 100%; height: 100%; }
.boot-word { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--text); animation: bootFade .5s ease .25s both; }
.boot-word b { color: var(--accent2); font-weight: 800; }
.boot-bar { position: relative; width: 196px; height: 10px; margin-top: 10px; background: var(--panel3); outline: 2px solid var(--panel3); outline-offset: 2px; animation: bootFade .4s ease .35s both; }
.boot-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); animation: bootFill 1.05s steps(14, end) .45s forwards; }
.boot-tip { height: 12px; color: var(--muted); animation: bootFade .4s ease .5s both; }
.boot-tip span { display: block; animation: bootTips 2.4s steps(1, end) .5s infinite; }
.boot-tip span:nth-child(2) { animation-delay: 1.3s; opacity: 0; }
.boot-tip span:nth-child(3) { animation-delay: 2.1s; opacity: 0; }
.boot-tip { display: grid; }
.boot-tip span { grid-area: 1 / 1; }
@keyframes bootDrop { 0% { transform: translateY(-34px) scale(.86); opacity: 0; } 60% { transform: translateY(4px) scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bootFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bootFill { to { transform: scaleX(1); } }
@keyframes bootTips { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bootOut { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes bootLift { to { transform: translateY(-60px); opacity: 0; } }
body.booted .boot { animation: bootOut .62s cubic-bezier(.76,0,.24,1) forwards; pointer-events: none; }
body.booted .boot-in { animation: bootLift .62s cubic-bezier(.76,0,.24,1) forwards; }
body:not(.booted) { overflow: hidden; }
body.booted .pagewrap { animation: pageRise .7s cubic-bezier(.2,.8,.2,1) both !important; }
@keyframes pageRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- left menu ---------- */
.rail { position: sticky; top: 0; height: 100vh; display: flex !important; flex-direction: column; background: var(--panel) !important; border-right: 1px solid var(--border) !important; z-index: 65; }
.rail-brand { display: flex !important; align-items: center; gap: 10px; min-height: var(--topH); padding: 0 18px !important; border-bottom: 1px solid var(--border); text-decoration: none; }
.rail-brand::after { display: none !important; }
.rail-brand .brandmark { width: 32px; height: 32px; border-radius: 4px; border: 0 !important; box-shadow: none !important; background: none !important; transform: none !important; }
.rail-brand .brandmark::after { display: none; }
.rail-brand .cube { width: 32px !important; height: 32px !important; border-radius: 4px !important; filter: none !important; }
.rail-brand .name { font-family: var(--display) !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: -.025em !important; color: var(--text) !important; text-shadow: none !important; }
.rail-brand .name b { background: none !important; -webkit-text-fill-color: var(--accent2); color: var(--accent2) !important; font-weight: 800; }
.railfold { top: 20px !important; right: -13px !important; width: 26px !important; height: 26px !important; border-radius: 4px !important; background: var(--panel3) !important; border: 1px solid var(--border2) !important; color: var(--muted) !important; }
.rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 10px !important; gap: 2px !important; scrollbar-width: none; }
.rail-nav::-webkit-scrollbar { display: none; }
.rail-sec { margin: 12px 0 4px !important; padding: 6px 10px !important; border-radius: 4px; background: none !important; border: 0 !important; color: var(--faint) !important; font: 700 10.5px var(--font) !important; letter-spacing: .14em !important; text-transform: uppercase; cursor: pointer; }
.rail-sec .rs-ico { display: none !important; }
.rail-sec .rs-chev { width: 18px !important; height: 18px !important; padding: 2px !important; background: none !important; color: var(--faint) !important; }
.rail-sec:hover { color: var(--muted) !important; }
.rn, .rail .tab { position: relative; min-height: 40px; padding: 8px 12px !important; gap: 12px !important; border-radius: 4px !important; border: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--muted) !important; }
.rn svg, .rail .tab .gi, .rail .tab svg { width: 19px !important; height: 19px !important; filter: grayscale(1) brightness(1.3) !important; opacity: .72 !important; }
.rn:hover, .rail .tab:hover { background: rgba(255,255,255,.045) !important; color: var(--text) !important; }
.rn:hover svg, .rail .tab:hover svg, .rail .tab:hover .gi { opacity: 1 !important; }
.rn.on, .rail .tab.sel, body.in-game .rail .tab.sel { background: var(--lux-soft) !important; color: var(--text) !important; font-weight: 700 !important; }
.rn.on svg, .rail .tab.sel .gi, .rail .tab.sel svg { filter: none !important; opacity: 1 !important; }
.rn.on::before, .rail .tab.sel::before, body.in-game .rail .tab.sel::before { content: '' !important; display: block !important; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rbadge { margin-left: auto; padding: 3px 5px 2px !important; border-radius: 4px !important; background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.rbadge.new { background: var(--win) !important; color: #06240f !important; }
.rail-extras { padding: 10px 12px !important; gap: 4px !important; border-top: 1px solid var(--border) !important; }
.rx-ref, .rx-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px !important; border-radius: 4px !important; background: none !important; border: 0 !important; color: var(--muted); cursor: pointer; text-align: left; }
.rx-ref:hover, .rx-card:hover { background: rgba(255,255,255,.045) !important; color: var(--text); }
.rx-ref svg, .rx-card svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent2); }
.rx-t b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.rx-t small { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }
.rx-go { margin-left: auto; opacity: .5; }
.rx-row { display: flex; gap: 6px; margin-top: 6px; }
.rx-rewards { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: var(--r-btn) !important; background: var(--gold) !important; color: #3a2600 !important; border: 0 !important; font: 700 12.5px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; }
.rx-rewards svg { width: 17px; height: 17px; }
.rx-rewards:hover { filter: brightness(1.06); }
.rx-dc { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-btn) !important; background: #5865f2 !important; color: #fff !important; }
.rx-dc svg { width: 19px; height: 19px; }
.raildc { margin: 8px 12px 0 !important; padding: 8px 10px !important; border-radius: 4px !important; background: var(--panel2) !important; border: 1px solid var(--border) !important; }
.rail-foot { padding: 10px 12px !important; border-top: 1px solid var(--border) !important; background: none !important; }
.pill { font-weight: 600; font-size: 11.5px; color: var(--muted); padding: 6px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border); }
.pill.botpill { padding: 7px 10px 6px; }
.sndbtn { width: 34px; height: 34px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--border); }
.sndpop { background: var(--panel3) !important; border-radius: 5px !important; }
.dot { background: var(--red); box-shadow: none; } .dot.on { background: var(--win); box-shadow: 0 0 0 3px rgba(58,214,124,.18); animation: none; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 60; height: var(--topH); padding: 0 22px !important; gap: 14px !important; display: flex; align-items: center;
  background: var(--panel) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--border) !important; }   /* no blur: a backdrop filter would turn the bar into the containing block for the fixed coin menu */
.top-brand { display: none !important; }
.iconbtn.railtoggle { display: none; }
.search { flex: 0 1 300px; max-width: 300px !important; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-btn); background: var(--bg2); border: 1px solid var(--border); }
.search svg { position: static !important; width: 17px !important; height: 17px !important; color: var(--faint); flex: 0 0 auto; transform: none !important; }
.search input { flex: 1; height: 100%; padding: 0 !important; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; font-size: 13.5px; }
.search:focus-within { border-color: var(--lux-line); box-shadow: 0 0 0 3px var(--lux-soft); }
.top-right { flex: 1 1 auto !important; display: flex !important; align-items: center; justify-content: flex-end; gap: 10px !important; margin-left: 0 !important; }
.top-right > #walletwrap:not([hidden]) { order: 1; margin-left: auto !important; margin-right: auto !important; }
.top-right > #updatebadge { order: 0; }
.top-right > #dcloginbtn { order: 5; } .top-right > #signinchip { order: 6; margin-left: auto; } .top-right > .profilewrap { order: 7; } .top-right > #settingsbtn { order: 8; } .top-right > #chattoggle { order: 9; }
.top-right > #walletwrap:not([hidden]) ~ #signinchip { margin-left: 0; }
.walletgroup { display: flex; align-items: center; height: 42px; padding: 3px; border-radius: 5px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; overflow: visible !important; }
.walletgroup::after { display: none !important; }
.curwrap { position: relative; }
.curbtn { height: 36px; padding: 0 10px; border-radius: 4px; background: none; border: 0; color: var(--text); display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px var(--font); cursor: pointer; }
.curbtn:hover { background: rgba(255,255,255,.05); }
.ccoin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #3a2600; font: 800 11px var(--font); }
.ccoin.sp { background: var(--violet); color: #1f0f45; }
.curmenu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 80; width: 300px; padding: 8px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--border2); box-shadow: var(--shadow); }
.cm-h { padding: 6px 10px 8px; font: 700 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cm-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 5px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.cm-opt:hover { background: rgba(255,255,255,.05); }
.cm-opt.sel { background: var(--lux-soft); }
.cm-t b { display: block; font-size: 13px; } .cm-t small { display: block; font-size: 11px; color: var(--muted); }
.cm-v { margin-left: auto; font: 700 13px var(--font); font-variant-numeric: tabular-nums; color: var(--gold); }
.cm-note { padding: 8px 10px 4px; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
.walletbtn { height: 36px; padding: 0 12px !important; border-radius: 4px !important; background: none !important; border: 0 !important; color: var(--text) !important; display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--font) !important; font-variant-numeric: tabular-nums; cursor: pointer; }
.walletbtn:hover { background: rgba(255,255,255,.05) !important; }
.walletbtn .wcoin { display: inline-grid !important; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold) !important; color: #3a2600 !important; font: 800 11px var(--font); }
.walletbtn .caret { display: none; }
#walletbal { min-width: 0; }
.vaultbtn { height: 36px; padding: 0 10px; border-radius: 4px; background: none; border: 0; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--font); cursor: pointer; }
.vaultbtn svg { width: 15px; height: 15px; } .vaultbtn:hover { color: var(--text); background: rgba(255,255,255,.05); }
.depobtn { height: 36px; padding: 0 16px !important; border-radius: 4px !important; background: var(--accent) !important; color: #fff !important; border: 0 !important; font: 700 13px var(--font) !important; text-transform: none !important; cursor: pointer; }
.depobtn:hover { background: var(--accent2) !important; }
.profilechip.signin { height: 40px; padding: 0 18px !important; font-size: 13px; }
.dcloginbtn { height: 40px; padding: 0 14px !important; border-radius: var(--r-btn) !important; display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px var(--font) !important; text-decoration: none; }
.dcloginbtn svg { width: 17px; height: 17px; }
.profilewrap { position: relative; }
.profilechip:not(.signin) { height: 40px; padding: 3px 10px 3px 3px !important; border-radius: 5px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; display: inline-flex; align-items: center; gap: 9px; font: 700 13px var(--font); cursor: pointer; }
.profilechip:not(.signin):hover { border-color: var(--border2) !important; }
.pfpwrap { width: 32px; height: 32px; border-radius: 4px; overflow: hidden; background: var(--panel3); flex: 0 0 auto; }
.pfp { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.lvchip { padding: 3px 5px 2px !important; border-radius: 4px !important; background: var(--lux-soft) !important; color: var(--accent2) !important; border: 0 !important; }
.pmenu { top: calc(100% + 10px) !important; min-width: 220px !important; padding: 6px !important; border-radius: 6px !important; background: var(--panel2) !important; border: 1px solid var(--border2) !important; box-shadow: var(--shadow) !important; animation: menuPop .16s cubic-bezier(.2,.8,.2,1) !important; }
@keyframes menuPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.pmenu button { padding: 9px 11px !important; border-radius: 4px !important; font: 600 13px var(--font) !important; color: var(--text) !important; gap: 11px !important; }
.pmenu button svg { width: 17px; height: 17px; }
.pmenu button svg * { stroke: var(--muted); } .pmenu button.out svg * { stroke: #ff8b9a; }
.pmenu button:hover { background: rgba(255,255,255,.06) !important; }
.iconbtn { width: 40px; height: 40px; border-radius: var(--r-btn) !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; display: inline-grid; place-items: center; cursor: pointer; }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover { color: var(--text) !important; border-color: var(--border2) !important; }
.iconbtn.on { color: var(--accent2) !important; background: var(--lux-soft) !important; border-color: transparent !important; }
.updatebadge { height: 36px; border-radius: 4px !important; background: var(--gold) !important; color: #3a2600 !important; font: 700 12px var(--font) !important; letter-spacing: 0 !important; }
.themebtn { display: none !important; }

@media (min-width: 1240px) {
  .top:has(#walletwrap:not([hidden])) #pfpname, .top:has(#walletwrap:not([hidden])) .lvchip { display: inline !important; }
  .top:has(#walletwrap:not([hidden])) .dcloginbtn span { display: inline !important; }
  .top:has(#walletwrap:not([hidden])) .dcloginbtn { padding: 0 14px !important; }
}

/* ---------- main column ---------- */
.main { max-width: 1420px !important; padding: 22px 26px 40px !important; }
.home-hero { display: none !important; }

/* hero: headline, then the account card + a wide Discord banner (DonutClash layout) */
.home-hero { display: block !important; margin: 2px 0 16px; }
.home-hero h1 { margin: 0 0 6px; font: 800 28px/1.1 var(--display) !important; letter-spacing: -.02em; text-transform: uppercase; color: var(--text); }
.home-hero h1 em { font-style: normal; color: var(--accent2); }
.home-hero p { margin: 0; max-width: 72ch; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.banners { display: grid !important; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.9fr) !important; grid-template-rows: auto; gap: 12px !important; margin: 0 0 26px !important; }
.banner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 0 !important; padding: 20px 22px !important; border-radius: var(--r-card) !important;
  background: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: none !important; animation: none !important; overflow: hidden; }
.banner::before, .banner::after { display: none !important; }
.banner .btag { position: relative; z-index: 1; display: inline-block; align-self: flex-start; margin: 0 0 10px; padding: 4px 6px 3px; border-radius: 3px; background: rgba(255,255,255,.08); color: var(--accent2) !important; }
.banner h3 { position: relative; z-index: 1; margin: 0 0 8px; font: 800 20px/1.1 var(--display) !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--text) !important; }
.banner h3 .em { font-style: normal; color: var(--accent2) !important; }
.banner p { position: relative; z-index: 1; margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 44ch; }
.banner .bigbtn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; height: 42px; padding: 0 18px; font-size: 13px !important; }
/* account card */
.banner.b2 { grid-column: 1; grid-row: 1; order: 0; display: flex !important; }
.banner.b2:has(#regcard-out:not([hidden])) .acct-level { display: none; }
.acct-level { position: relative; z-index: 1; display: flex; flex-direction: column; }
.lvl-row { display: flex; align-items: center; gap: 12px; padding: 0; }
.lvl-av { width: 44px; height: 44px; border-radius: 4px; image-rendering: pixelated; flex: 0 0 auto; background: var(--panel3); }
.acct-level #lvlav { display: block !important; }
.acct-level #lvlav[hidden] { visibility: hidden; }
.acct-level #lvlname { display: block !important; }
.lvl-hello { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lvl-hello small { font-size: 11.5px; color: var(--muted); }
.lvl-name { font: 700 15px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl-name:empty::before { content: 'Player'; color: var(--faint); }
.lvl-badge { flex: 0 0 auto; padding: 4px 6px 3px !important; border-radius: 3px !important; background: var(--lux-soft) !important; color: var(--accent2) !important; border: 0 !important; }
.lvl-bar { position: relative; height: 10px; margin: 14px 0 8px; border-radius: 3px; background: var(--bg2); border: 1px solid var(--border); overflow: hidden; max-width: none; }
.lvl-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.lvl-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lvl-sub { flex: 1; font-size: 11.5px; color: var(--muted); line-height: 1.45; max-width: none; }
.lvl-pathbtn { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--accent2); font: 600 11.5px var(--font); cursor: pointer; white-space: nowrap; }
.lvl-pathbtn:hover { text-decoration: underline; }
.daily-btn { position: relative; z-index: 1; width: 100% !important; max-width: 100% !important; height: 42px; margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0 !important; border-radius: var(--r-btn) !important; background: var(--gold) !important; color: #3a2600 !important; font: 700 12.5px var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
.daily-btn svg { width: 17px; height: 17px; }
.daily-btn[disabled] { background: var(--panel3) !important; color: var(--muted) !important; cursor: default; }
.daily-btn.ready { animation: dailyPulse 1.6s ease-in-out infinite; }
@keyframes dailyPulse { 50% { box-shadow: 0 0 0 5px rgba(255,201,64,.22) !important; } }
.acct-depo { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.acct-depo[hidden] { display: none !important; }
.acct-depo-l { grid-column: 1; grid-row: 1; font: 700 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.acct-depo-btn { grid-column: 2; grid-row: 1; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-btn); background: var(--win); color: #06240f; font: 700 11.5px var(--font); cursor: pointer; }
.acct-depo-cmd { grid-column: 1 / -1; grid-row: 2; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 11px; border-radius: var(--r-btn); background: var(--bg2); border: 1px dashed var(--border2); font: 600 12.5px var(--mono); color: var(--gold); }
.acct-depo-btn:hover { filter: brightness(1.06); }
/* discord banner: one flat block, like the reference, with the pixel scene at the right */
.banner.b3 { grid-column: 2; grid-row: 1; order: 0; justify-content: center; padding: 26px 40% 26px 28px !important; min-height: 196px !important; background: linear-gradient(110deg, #3b48d6 0%, #4c5ae6 55%, #5865f2 100%) !important; border: 0 !important; }
.banner.b3::after { display: block !important; content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(100deg, transparent 30%, #000 100%); -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%); pointer-events: none; opacity: 1 !important; }
.banner.b3 .btag { background: rgba(255,255,255,.16); color: #fff !important; }
.banner.b3 h3 { font-size: clamp(24px, 2.2vw, 32px) !important; color: #fff !important; }
.banner.b3 h3 .em { color: #ffd24d !important; }
.banner.b3 p { color: rgba(255,255,255,.84) !important; font-size: 13.5px; max-width: 46ch; }
.banner.b3 .bigbtn.discord { background: #fff !important; color: #3b48d6 !important; }
.banner.b3 .bigbtn.discord:hover { background: #eef0ff !important; }
.banner .bart { position: absolute; z-index: 0; pointer-events: none; animation: none !important; filter: none !important; }
.banner.b3 .bart.v2 { right: 22px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); width: 36% !important; max-width: 340px; max-height: 86% !important; object-fit: contain; object-position: right center; }

/* referral strip */
.refstrip { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; padding: 12px 16px !important; border-radius: 5px !important; background: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: none !important; animation: none !important; }
.refstrip .rs-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.rs-tag { flex: 0 0 auto; padding: 4px 6px 3px; border-radius: 4px; background: var(--lux-soft); color: var(--accent2); }
.rs-tag::after { display: none !important; }
.rs-text { font-size: 13px; color: var(--muted); line-height: 1.4; }
.rs-code { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--border); }
.rs-code .rs-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.rs-code b { font: 700 13px var(--mono); color: var(--gold); }
.rs-redeem { display: flex; gap: 6px; } .rs-redeem input { height: 38px; width: 170px; margin: 0; }
.rs-actions .btn, .rs-redeem .btn { min-height: 38px; height: 38px; padding: 0 14px; font-size: 12.5px; }

/* section heads */
.feat-h, .secthead h2, .grow-head h3, .lb-head h2, .about h2, .sp-head h2 { font-family: var(--display) !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: var(--text) !important; }
.feat-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.feat-h::before, .grow-head h3 i { content: ''; display: inline-block; width: 4px !important; height: 18px; border-radius: 2px; background: var(--accent) !important; box-shadow: none !important; }
.grow-head h3 i { height: 18px !important; }
.grow:hover .grow-head h3 i { height: 18px !important; }
.grow-head { margin: 0 0 12px !important; }
.grow-head .grow-n { font-size: 12px; color: var(--faint); font-weight: 600; }
.grow-all { margin-left: 6px; padding: 5px 10px; border-radius: 4px !important; background: var(--panel3) !important; border: 1px solid var(--border) !important; color: var(--text); font: 700 11.5px var(--font); text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.grow-nav { margin-left: auto; display: flex; gap: 6px; }
.grow-nav button { width: 32px; height: 32px; border-radius: 4px !important; background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.grow-nav button:hover { color: var(--text); border-color: var(--border2) !important; }
.grow { margin-bottom: 26px !important; }
.grow.empty { display: none; }

/* featured strip + lobby rows: every original is a 3:4 pixel tile */
.featured { margin: 0 0 26px !important; }
.feat-grid { display: flex !important; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.feat-grid::-webkit-scrollbar { display: none; }
.feat { flex: 0 0 156px; width: 156px; aspect-ratio: 3 / 4 !important; border-radius: 6px !important; background: var(--panel) !important; scroll-snap-align: start; box-shadow: none !important; transition: transform .16s ease, box-shadow .16s ease, outline-color .16s; outline: 2px solid transparent; outline-offset: 0; }
.feat img { border-radius: 6px; object-fit: contain !important; image-rendering: auto; }
.feat:hover, .feat:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.45) !important; outline-color: rgba(255,255,255,.22); }
.feat .feat-name { display: none !important; }
.gscroll { gap: 12px !important; padding: 4px 2px 10px !important; mask-image: none !important; -webkit-mask-image: none !important; }
.gscroll .gcard:not(.scard) { --gh: 208px; margin: 0 !important; padding: 0 !important; align-self: flex-start; flex: 0 0 156px !important; width: 156px !important; height: var(--gh) !important; aspect-ratio: auto !important; border-radius: 6px !important; border: 0 !important; background: var(--panel) !important; overflow: hidden; box-shadow: none !important; outline: 2px solid transparent; transition: transform .16s ease, box-shadow .16s ease, outline-color .16s !important; }
.gscroll .gcard:not(.scard) .art { position: absolute !important; inset: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
.gscroll .gcard:not(.scard) .art img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; }
.gscroll .gcard:not(.scard):hover { transform: translateY(-4px) !important; box-shadow: 0 14px 30px rgba(0,0,0,.45) !important; outline-color: rgba(255,255,255,.22); border-color: transparent !important; }
.gcard .gshadow, .gcard .gplay { display: none !important; }
.gcard .badge { top: 8px !important; left: 8px !important; z-index: 2; padding: 4px 5px 3px !important; border-radius: 4px !important; background: var(--text) !important; color: #111 !important; border: 0 !important; box-shadow: none !important; }
.gcard .badge.new { background: var(--win) !important; color: #06240f !important; }
.gcard .badge.hot { background: var(--gold) !important; color: #3a2600 !important; }
.gcard.unavailable { opacity: .45; filter: grayscale(.6); }
/* slot cards in the lobby row: square cover + name band, same row height */
.gscroll .gcard.scard { flex: 0 0 156px !important; width: 156px !important; height: var(--gh, 208px) !important; aspect-ratio: auto !important; border-radius: 6px !important; overflow: hidden !important; background: var(--panel) !important; border: 1px solid var(--border) !important; display: block !important; box-shadow: none !important; }
.gscroll .gcard.scard .sc-art { position: absolute !important; left: 0; right: 0; top: 0; height: 156px !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; }
.gscroll .gcard.scard .sc-art img { width: 100%; height: 100%; object-fit: cover; }
.gscroll .gcard.scard .sc-band { position: absolute !important; left: 0; right: 0; bottom: 0; height: 52px; padding: 8px 10px !important; background: var(--panel) !important; text-align: left !important; display: flex; flex-direction: column; justify-content: center; }
.gscroll .gcard.scard .sc-band b { font: 700 12.5px var(--font) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; text-shadow: none !important; -webkit-line-clamp: 1 !important; }
.gscroll .gcard.scard .sc-band small { margin-top: 2px !important; font: 500 10.5px var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--faint) !important; }
.gscroll .gcard.scard .sc-play { display: none !important; }
.gscroll .gcard.scard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.45) !important; border-color: var(--border2) !important; }
.scard .sc-real, .scard .sc-demo { top: 8px !important; left: 8px !important; padding: 4px 5px 3px !important; border-radius: 4px !important; border: 0 !important; }
.scard .sc-real { background: var(--win) !important; color: #06240f !important; }
.scard .sc-demo { background: rgba(10,12,18,.85) !important; color: #dfe3ee !important; }
.sc-new, .scard .sc-new { padding: 4px 5px 3px !important; border-radius: 4px !important; background: var(--accent) !important; color: #fff !important; }

/* filter bar */
.secthead { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; flex-wrap: wrap; }
.secthead h2 svg { display: none !important; }
.secthead .cnt { font-size: 12px; color: var(--faint); font-weight: 600; }
.gcats { display: inline-flex; gap: 2px; padding: 3px; border-radius: 5px; background: var(--panel); border: 1px solid var(--border); }
.gcat { padding: 7px 12px !important; border-radius: 4px !important; background: none !important; border: 0 !important; color: var(--muted) !important; font: 600 12.5px var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; transition: background .15s, color .15s; }
.gcat:hover { color: var(--text) !important; }
.gcat.sel { background: var(--panel3) !important; color: var(--text) !important; }
.nores { color: var(--muted); font-size: 13px; padding: 20px 0; }

/* live bets */
.livebets { margin-top: 6px !important; border-radius: 6px !important; background: var(--panel) !important; border: 1px solid var(--border) !important; overflow: hidden; }
.lb-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lb-head h2 { margin: 0 !important; display: flex; align-items: center; gap: 9px; }
.ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 3px rgba(58,214,124,.18); }
.lbtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--border); margin-left: auto; }
.lbtab { padding: 6px 11px !important; border-radius: 4px !important; background: none !important; border: 0 !important; color: var(--muted) !important; font: 600 12px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.lbtab.sel { background: var(--panel3) !important; color: var(--text) !important; }
.lbwrap { overflow-x: auto; }
.lbt { width: 100%; border-collapse: collapse; }
.lbt th { padding: 10px 18px !important; font: 700 10.5px var(--font) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--faint) !important; text-align: left; border-bottom: 1px solid var(--border); background: none !important; }
.lbt td { padding: 11px 18px !important; font-size: 13px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.lbt tr:last-child td { border-bottom: 0; }
.lbt tr:hover td { background: rgba(255,255,255,.025); }
.lbt .lbempty { color: var(--faint); text-align: center; padding: 26px !important; }
.lbt td:last-child, .lbt th:last-child { text-align: right; }

/* about + faq + footer */
.about { margin: 34px 0 0 !important; padding: 26px 28px 14px !important; border-radius: 6px !important; background: var(--panel) !important; border: 1px solid var(--border) !important; }
.about h2 { margin: 0 0 12px !important; }
.about p { color: var(--muted) !important; font-size: 14px !important; line-height: 1.65 !important; max-width: 820px; }
.faq summary { font: 700 14px var(--font) !important; color: var(--text) !important; }
.faq summary::after { color: var(--accent2) !important; }
.foot { margin-top: 36px !important; padding: 26px 0 8px !important; border-top: 1px solid var(--border); }
.foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr !important; gap: 22px; }
.foot .fbrand { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 800 17px var(--display) !important; letter-spacing: -.02em; text-transform: none !important; color: var(--text); }
.foot .fbrand img { width: 26px; height: 26px; border-radius: 4px; }
.foot-about p { color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 36ch; margin: 0; }
.foot h4 { margin: 0 0 10px; font: 700 10.5px var(--font) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--faint) !important; }
.foot a { display: block; margin: 0 0 7px; color: var(--muted); font-size: 13px; text-decoration: none; }
.foot a:hover { color: var(--text); }
.warn { margin-top: 20px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.foot-disclosure { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); line-height: 1.5; }
.foot-disclosure p { margin: 0; max-width: 72ch; }
.fd-badge { flex: 0 0 auto; padding: 4px 6px 3px; border-radius: 4px; border: 1px solid var(--border2); font-family: var(--pixel); font-size: 10px; color: var(--muted); }

/* ---------- slots page ---------- */
#slotspage .sp-bar { margin-bottom: 22px !important; }
#slotspage .sp-tabs { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 5px !important; }
#slotspage .sp-tabs button { color: var(--muted) !important; font: 600 13px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; }
#slotspage .sp-tabs button.sel { background: var(--panel3) !important; color: var(--text) !important; }
#slotspage .sp-prov, #slotspage .sp-search { height: 44px !important; border-radius: var(--r-btn) !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; }
#slotspage .sp-search:focus-within { border-color: var(--lux-line) !important; box-shadow: 0 0 0 3px var(--lux-soft) !important; }
.sp-search input, .sp-search input:focus { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.sp-search svg { position: static !important; color: var(--faint); }
#slotspage .sp-prov select { background-color: transparent !important; border: 0 !important; box-shadow: none !important; font-weight: 600 !important; }
#slotspage .sp-kicker, #slotspage #spkicker, #slotspage .sp-head h2 { font-style: normal !important; }
#slotspage .sp-kicker, #slotspage #spkicker { font: 700 10.5px var(--font) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--faint) !important; }
#slotspage .sp-head h2 { font: 800 22px var(--display) !important; letter-spacing: -.02em !important; }
#slotspage .sp-grid .scard, #slotspage .sp-grid .scard.house { border-radius: 6px !important; background: var(--panel) !important; }
#slotspage .sp-grid .scard .sc-band b { font-family: var(--display) !important; font-weight: 800 !important; }
#slotspage .sp-grid .scard .sc-band small { font-family: var(--font) !important; font-weight: 600 !important; letter-spacing: .04em !important; }

/* ---------- game view frame ---------- */
.gv-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.backbtn { height: 36px; padding: 0 12px; border-radius: var(--r-btn) !important; background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font: 700 12.5px var(--font) !important; cursor: pointer; }
.backbtn:hover { color: var(--text) !important; }
.gv-title { margin: 0; font-size: 24px !important; }
.gv-chip { padding: 5px 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); font: 700 11px var(--font); }
.gv-tools { margin-left: auto; display: flex; gap: 6px; }
.gv-tools .iconbtn { width: 36px; height: 36px; }
#gameview .gv-side, #gameview .gv-stage, #gameview .gv-fairstrip, .panel { border-radius: 6px !important; background: var(--panel) !important; border: 1px solid var(--border) !important; }
#gameview #playbtn { border-radius: var(--r-btn) !important; }
.gv-about { margin-top: 16px; padding: 20px 22px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); }
.gv-about h3 { margin: 0 0 6px; font-size: 16px; } .gv-about p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.tablepill { border-radius: 5px !important; background: var(--panel2) !important; border: 1px solid var(--border2) !important; box-shadow: var(--shadow) !important; }
.tablepill .tp-cta { border-radius: 4px; font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ---------- chat ---------- */
.chat { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--panel) !important; border-left: 1px solid var(--border) !important; }
.chat-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--topH); padding: 0 14px 0 16px; border-bottom: 1px solid var(--border); font: 800 15px var(--display) !important; letter-spacing: -.01em !important; text-transform: none !important; }
.chat-head > span:first-child { text-transform: none; }
.onlinebtn { gap: 7px; padding: 6px 10px; font-size: 12px; }
.onlinebtn .dot { width: 7px; height: 7px; }
.chatclose { display: none; width: 32px; height: 32px; }
.raincard { margin: 12px 12px 0; padding: 12px 14px; border-radius: 5px; background: linear-gradient(135deg, #1b2a4d, #14203c) !important; border: 1px solid rgba(63,142,248,.25) !important; }
.raincard .rt { display: flex; justify-content: space-between; font: 700 10.5px var(--font); letter-spacing: .12em; color: var(--accent2); }
.raincard .rpot { margin: 4px 0 2px; font: 800 24px var(--display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.raincard .rsub { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.rainrow { display: flex; gap: 6px; margin-top: 10px; }
.rainrow input { flex: 1; height: 36px; margin: 0; font-size: 13px; }
.rainbtn { height: 36px; padding: 0 14px; background: var(--accent) !important; color: #fff !important; border: 0 !important; font: 700 12px var(--font) !important; cursor: pointer; }
.rainbtn.claim { width: 100%; margin-top: 10px; background: var(--win) !important; color: #06240f !important; }
.chattabs { display: flex; gap: 0; margin: 10px 12px 0; padding: 0; border-bottom: 1px solid var(--border); background: none !important; border-radius: 0 !important; overflow-x: auto; scrollbar-width: none; }
.chattabs::-webkit-scrollbar { display: none; }
.chattab { flex: 0 0 auto; padding: 9px 11px 10px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--faint) !important; font: 700 11.5px var(--font) !important; letter-spacing: .04em !important; cursor: pointer; margin-bottom: -1px; }
.chattab:hover { color: var(--muted) !important; }
.chattab.sel { color: var(--text) !important; border-bottom-color: var(--accent) !important; }
.chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px !important; display: flex; flex-direction: column; gap: 2px !important; }
.cmsg { padding: 6px 8px; border-radius: 5px; }
.cmsg:hover { background: rgba(255,255,255,.03); }
.cmsg .cav, .cavf .cav { border-radius: 4px; }
.cmsg .cu { font-weight: 700; font-size: 13px; }
.cmsg .ctx { color: #cfd3dd; font-size: 13px; line-height: 1.45; }
.cmsg .ctime { color: var(--faint); }
.cmsg.sys { color: var(--faint); font-size: 12px; }
.chat-input { display: flex !important; align-items: center; gap: 8px !important; padding: 10px 12px !important; border-top: 1px solid var(--border); background: var(--panel); }
.chat-input input { flex: 1; height: 42px; margin: 0; padding: 0 13px !important; font-size: 13.5px; font-weight: 500; }
.chat-input .chat-send { width: 42px !important; height: 42px !important; flex: 0 0 42px; padding: 0 !important; display: grid !important; place-items: center; background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.chat-input .chat-send svg { width: 18px; height: 18px; }
.chat-login { padding: 12px !important; text-align: center; font-size: 12.5px !important; color: var(--muted) !important; border-top: 1px solid var(--border); }
.sidefoot { padding: 8px 12px !important; border-top: 1px solid var(--border); color: var(--faint); font-size: 11px; }
.sidefoot .pill { padding: 5px 9px 4px; font-size: 11px; }

/* ---------- popups ---------- */
.overlay { background: rgba(6,7,11,.72) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
.modal { border-radius: 8px !important; background: var(--panel2) !important; border: 1px solid var(--border2) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; animation: modalIn .22s cubic-bezier(.2,.9,.25,1.15) !important; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.m-title { font-size: 20px !important; font-weight: 800 !important; color: var(--text) !important; letter-spacing: -.02em !important; }
.m-close { top: 16px !important; right: 16px !important; width: 34px !important; height: 34px !important; border-radius: 4px !important; background: var(--panel3) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font: 700 12px var(--font) !important; }
.m-close:hover { color: var(--text) !important; background: #2b3040 !important; }
.guide, .pg, .ps, .pcard, .wm-paybox, .cmdrow .cmd, .prof-grid .pg, .bcost, .togglerow { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 5px !important; }
.cmdrow .cmd { color: var(--gold) !important; font-family: var(--mono) !important; }
.wm-tabs { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 5px !important; }
.wm-tab { border-radius: 4px !important; font: 700 12.5px var(--font) !important; }
.wm-tab.sel { background: var(--panel3) !important; color: var(--text) !important; }
.wm-tab.sel[data-wt="withdraw"] { background: var(--panel3) !important; color: var(--text) !important; }
.wm-bal { font-family: var(--display) !important; font-size: 28px !important; letter-spacing: -.02em !important; }
.toasts { bottom: 18px !important; right: 18px !important; width: 320px !important; gap: 8px !important; }
.toast { border-radius: 5px !important; background: var(--panel2) !important; border: 1px solid var(--border2) !important; box-shadow: var(--shadow) !important; }

/* switches (settings + popups) */
.swrow { padding: 12px 0 !important; gap: 14px !important; border-top: 1px solid var(--border); }
.swrow:first-of-type { border-top: 0; }
.swrow .sw-txt b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.swrow .sw-txt small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.swrow .sw { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 8px; background: var(--panel3); border: 1px solid var(--border2); transition: background .18s, border-color .18s; }
.swrow .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.swrow input:checked + .sw { background: var(--accent); border-color: var(--accent); }
.swrow input:checked + .sw::after { transform: translateX(18px); }
.swrow input:focus-visible + .sw { outline: 2px solid var(--lux-line); outline-offset: 2px; }

/* ---------- settings: a fixed-size panel, the menu never moves ----------
   The box has one size no matter which pane is open; only the pane scrolls.
   Switching panes therefore never recentres the popup or shifts the nav. */
.setmodal { width: min(820px, 94vw) !important; max-width: none !important; height: min(620px, 90vh) !important; padding: 0 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.set-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.set-head .m-title { margin: 0 !important; padding: 0 !important; }
.set-head .m-close { position: static !important; margin-left: auto; }
.set-wrap { display: grid !important; grid-template-columns: 212px minmax(0, 1fr) !important; min-height: 0 !important; gap: 0 !important; }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px !important; border-right: 1px solid var(--border) !important; background: var(--bg2); overflow-y: auto; }
.set-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px !important; border: 0 !important; border-radius: 4px !important; background: none !important; color: var(--muted) !important; font: 600 13.5px var(--font) !important; text-align: left; cursor: pointer; box-shadow: none !important; }
.set-nav button svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }
.set-nav button:hover { background: rgba(255,255,255,.045) !important; color: var(--text) !important; }
.set-nav button.sel { background: var(--lux-soft) !important; color: var(--text) !important; }
.set-nav button.sel svg { opacity: 1; color: var(--accent2); }
.set-nav button[hidden] { display: none !important; }
.set-nav .set-navfoot { margin-top: auto; padding: 10px 12px 4px; font-size: 11px; color: var(--faint); line-height: 1.5; }
.set-panes { min-height: 0; overflow-y: auto; padding: 22px 26px 26px; }
.set-pane[hidden] { display: none !important; }
.set-kicker { display: inline-block; margin-bottom: 8px; color: var(--accent2); }
.set-h { font: 800 18px var(--display) !important; letter-spacing: -.02em; margin: 0 0 4px !important; }
.set-p { margin: 0 0 14px !important; color: var(--muted); font-size: 13px; line-height: 1.5; }
.set-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.set-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.set-vol { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 13px; color: var(--muted); }
.set-vol input { flex: 1; accent-color: var(--accent); } .set-vol b { width: 42px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.set-pane .cmdrow { margin-bottom: 10px; }
.set-pane .pc-lab { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.bp-preview { height: 118px !important; border-radius: 5px !important; border: 1px solid var(--border) !important; }
.bp-grid { gap: 8px !important; }
.bp-opt { border-radius: 5px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; }
.bp-opt.sel { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.set-radio { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.set-radio label { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--border); cursor: pointer; }
.set-radio label b { font-size: 13px; } .set-radio label small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.set-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.set-radio input:checked + b { color: var(--accent2); }
.set-radio label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 720px) {
  .setmodal { width: 100vw !important; height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; border: 0 !important; }
  .set-wrap { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr); }
  .set-nav { flex-direction: row; gap: 4px; padding: 8px 10px !important; border-right: 0 !important; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav button { width: auto; flex: 0 0 auto; padding: 8px 12px !important; white-space: nowrap; }
  .set-nav .set-navfoot { display: none; }
  .set-panes { padding: 18px 16px 24px; }
}

/* ---------- lobby reveal: a quiet stagger after boot ---------- */
.lobby-reveal { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1) !important; }
.lobby-reveal.in { opacity: 1 !important; transform: none !important; }
.gscroll .gcard.lobby-reveal.in:hover, .gcard.lobby-reveal.in:hover { transform: translateY(-4px) !important; }
body.reduce-fx .lobby-reveal, body.reduce-fx .lobby-reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
body.reduce-fx .boot, body.reduce-fx .boot *, body.reduce-fx .pagewrap, body.reduce-fx .modal, body.reduce-fx .pmenu { animation-duration: .01s !important; }
body.reduce-fx .feat:hover, body.reduce-fx .gscroll .gcard:hover, body.reduce-fx .gcard:hover { transform: none !important; }
body.compact-tiles .gscroll .gcard:not(.scard), body.compact-tiles .gscroll .gcard.scard, body.compact-tiles .feat { --gh: 168px; flex-basis: 126px !important; width: 126px !important; }
body.compact-tiles .gscroll .gcard.scard .sc-art { height: 126px !important; }
body.compact-tiles .gscroll .gcard.scard .sc-band { height: 42px; }
@media (prefers-reduced-motion: reduce) {
  .boot, .boot *, .pagewrap { animation-duration: .01s !important; }
  .lobby-reveal, .lobby-reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1500px) { :root, html[data-theme="dark"], html[data-theme="light"] { --chatW: 300px; } }
@media (max-width: 1340px) {
  :root, html[data-theme="dark"], html[data-theme="light"] { --railW: 76px; }
  .rail-brand { justify-content: center; padding: 0 !important; }
  .rail-brand .name, .rail-sec, .rn span, .rail .tab span, .rbadge, .rx-t, .rx-go, .rx-rewards span, .raildc span, .raildc-dot { display: none !important; }
  .rail-nav { padding: 8px !important; }
  .rn, .rail .tab { justify-content: center; padding: 10px 0 !important; }
  .rail-group.closed { display: flex !important; }
  .rail-extras { padding: 8px !important; }
  .rx-ref, .rx-card { justify-content: center; padding: 10px 0 !important; }
  .rx-row { flex-direction: column; }
  .rx-dc { width: 100%; }
  .raildc { margin: 8px !important; padding: 6px !important; justify-content: center; }
  .rail-foot { flex-direction: column; gap: 8px; }
  .rail-foot .pill span:not(.dot) { display: none; }
  .rail-foot .pill { padding: 8px; }
  .app { grid-template-columns: var(--railW) minmax(0, 1fr) var(--chatW); }
  body.rail-collapsed .app { grid-template-columns: var(--railW) minmax(0, 1fr) var(--chatW); }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: var(--railW) minmax(0, 1fr) !important; }
  .chat { position: fixed; right: 0; top: 0; bottom: 0; width: 340px; max-width: 92vw; height: 100vh; transform: translateX(105%); transition: transform .25s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px rgba(0,0,0,.5); display: flex !important; z-index: 95; }
  body.chat-open .chat { transform: none; }
  .chatclose { display: inline-grid; }
  .banners { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr) !important; }
}
@media (max-width: 760px) {
  :root, html[data-theme="dark"], html[data-theme="light"] { --topH: 58px; }
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; height: 100vh; transform: translateX(-105%); transition: transform .25s cubic-bezier(.2,.8,.2,1); box-shadow: 20px 0 50px rgba(0,0,0,.5); z-index: 96; }
  body.rail-open .rail { transform: none; }
  .rail-brand { justify-content: flex-start; padding: 0 18px !important; }
  .rail-brand .name, .rail-sec, .rn span, .rail .tab span, .rbadge, .rx-t, .rx-rewards span, .raildc span { display: inline !important; }
  .rail-sec { display: flex !important; }
  .rx-t { display: block !important; }
  .rail-nav { padding: 10px 12px !important; }
  .rn, .rail .tab { justify-content: flex-start; padding: 8px 12px !important; }
  .rx-ref, .rx-card { justify-content: flex-start; padding: 8px 10px !important; }
  .rx-row { flex-direction: row; } .rx-dc { width: 40px; }
  .rail-foot { flex-direction: row; }
  .rail-foot .pill span:not(.dot) { display: inline; }
  .railfold { display: none; }
  .iconbtn.railtoggle { display: inline-grid; }
  .top { padding: 0 12px !important; gap: 8px !important; }
  .search { flex: 1 1 auto; max-width: none !important; }
  .main { padding: 14px 14px 40px !important; }
  .home-hero h1 { font-size: 22px !important; }
  .banners { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 18px !important; }
  .banner.b2, .banner.b3 { grid-column: 1; grid-row: auto; }
  .banner.b3 { padding: 22px 20px 120px !important; min-height: 0 !important; }
  .banner.b3 .bart.v2 { top: auto !important; bottom: 10px !important; transform: none; width: 46% !important; max-height: 110px !important; right: 14px !important; }
  .refstrip { flex-wrap: wrap; }
  .feat, .gscroll .gcard:not(.scard), .gscroll .gcard.scard { --gh: 176px; flex-basis: 132px !important; width: 132px !important; }
  .gscroll .gcard.scard .sc-art { height: 132px !important; }
  .gscroll .gcard.scard .sc-band { height: 44px; }
  .secthead .gcats { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; }
  .toasts { width: calc(100vw - 24px) !important; right: 12px !important; }
}
@media (max-width: 600px) {
  .search { display: none; }
  #pfpname, .lvchip, .profilechip .caret, .dcloginbtn { display: none; }
  .profilechip:not(.signin) { padding: 3px !important; }
  .depobtn { padding: 0 12px !important; font-size: 12px !important; }
  .walletbtn { padding: 0 8px !important; font-size: 13.5px !important; }
  input, textarea, select { font-size: 16px; }
}

/* ---------- sign in ---------- */
.authmodal { width: min(440px, 94vw); max-width: none !important; padding: 28px 28px 26px !important; }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-logo { display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 6px; box-shadow: 0 10px 26px rgba(63,142,248,.3); }
.auth-head .m-title { margin: 0 0 6px !important; padding: 0 !important; font-size: 24px !important; }
.auth-sub { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.auth-dc { margin: 0 0 6px !important; }
.btn.dcsignin { width: 100%; height: 48px; display: flex !important; gap: 10px; align-items: center; justify-content: center; background: #5865f2 !important; color: #fff !important; font-size: 14px; text-transform: none !important; text-decoration: none; }
.btn.dcsignin:hover { background: #6773f5 !important; }
.btn.dcsignin svg { width: 20px; height: 20px; }
.auth-dc-note { margin: 10px 2px 0; font-size: 12px; color: var(--faint); line-height: 1.5; text-align: center; }
.auth-or { margin: 16px 0 14px !important; font: 600 11px var(--font) !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--faint) !important; }
.authmodal label { display: block; margin: 0 0 8px !important; font: 700 12.5px var(--font) !important; color: var(--text) !important; letter-spacing: 0 !important; text-transform: none !important; }
.auth-ign { position: relative; margin-bottom: 10px; }
.auth-ign input { width: 100%; height: 50px !important; margin: 0; padding: 0 14px 0 56px !important; font: 600 15px var(--font) !important; }
.auth-face { position: absolute; left: 9px; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); border-radius: 4px; image-rendering: pixelated; background: var(--panel3); border: 1px solid var(--border2); object-fit: cover; }
.authmodal #sendcode, .authmodal #confirmloc { width: 100%; height: 48px; font-size: 14px; }
.authmodal .btn.alt { width: 100%; margin-top: 10px; min-height: 44px; font-size: 13px; }
.auth-how, .auth-step { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--border); }
.auth-step { margin: 0 0 12px; }
.auth-how b, .auth-step b { display: block; font-size: 13px; margin-bottom: 2px; color: var(--text); }
.auth-how > div > span, .auth-step > div > span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.auth-stepn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lux-soft); color: var(--accent2); font: 700 12px var(--font); }
.auth-cmd .cmd { font-size: 15px !important; padding: 14px !important; }
.auth-cmd .minibtn { min-width: 76px; }
.auth-wait { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.auth-spin { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border2); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-tip { margin: 14px 0 0; border-radius: 5px; background: var(--bg2); border: 1px solid var(--border); }
.auth-tip summary { padding: 11px 14px; cursor: pointer; font: 600 12.5px var(--font); color: var(--muted); list-style: none; }
.auth-tip summary::-webkit-details-marker { display: none; }
.auth-tip summary::before { content: '+'; display: inline-block; width: 16px; color: var(--accent2); font-weight: 700; }
.auth-tip[open] summary::before { content: '\2212'; }
.auth-tip ol { margin: 0; padding: 0 14px 12px 34px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.auth-tip .cmd { font-family: var(--mono); font-size: 12px; color: var(--gold); background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 4px; }
.auth-code { width: 100%; height: 56px !important; margin: 0 0 10px; text-align: center; font: 700 24px var(--mono) !important; letter-spacing: .35em; }
.authmodal .hint { margin-top: 10px; font-size: 12px; text-align: center; }
.authmodal .err { margin-top: 8px; font-size: 12.5px; }
.authmodal .err:empty { display: none; }

/* ---------- confirm dialog ---------- */
.confirm-modal { width: min(420px, 94vw); max-width: none !important; padding: 26px 26px 22px !important; text-align: left; }
.confirm-modal h3 { margin: 0 0 8px; font-size: 20px; }
.confirm-modal p { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cf-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cf-actions .btn { width: auto; min-height: 42px; padding: 0 16px; font-size: 13px; text-transform: none; }
.cf-actions .btn.danger { background: var(--red) !important; color: #fff !important; }

/* ---------- wallet ---------- */
.walletmodal { display: block !important; width: min(560px, 94vw); max-width: none !important; padding: 0 !important; overflow: hidden; }
.walletmodal > .m-close { position: absolute !important; top: 18px !important; right: 18px !important; z-index: 2; }
.walletmodal > .wm-head { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 24px 62px 20px 26px !important; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #182544 0%, #121826 55%, var(--panel2) 100%); }
.walletmodal .wm-l { font: 700 10.5px var(--font) !important; letter-spacing: .14em !important; color: var(--accent2) !important; text-transform: uppercase; }
.walletmodal .wm-bal { margin-top: 4px; font: 800 36px var(--display) !important; letter-spacing: -.03em !important; color: var(--text) !important; }
.walletmodal .wm-spons { margin-top: 6px; font-size: 12px; color: var(--gold); max-width: 40ch; line-height: 1.45; }
.walletmodal .wm-cur { margin-top: 12px; padding: 3px; border-radius: 4px; background: rgba(0,0,0,.3); border: 1px solid var(--border2); }
.walletmodal .wm-cur button { padding: 6px 10px 6px 6px; border-radius: 4px; font: 600 12px var(--font); color: var(--muted); }
.walletmodal .wm-cur button.sel { background: var(--panel3); color: var(--text); box-shadow: none; }
.walletmodal .wm-who { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1.5; }
.walletmodal .wm-who strong { color: var(--text); }
.walletmodal .wm-who a { color: var(--faint); }
.walletmodal > .wm-dephold { margin: 14px 26px 0 !important; }
.walletmodal > .wm-tabs { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 16px 26px 0 !important; padding: 3px !important; }
.walletmodal > .wm-tabs .wm-tab { padding: 9px 4px !important; font: 600 12.5px var(--font) !important; }
.walletmodal > div[id^="wm-"] { padding: 18px 26px 24px; min-width: 0; }
.walletmodal label { display: block; margin: 0 0 8px !important; font: 700 12.5px var(--font) !important; color: var(--text) !important; letter-spacing: 0 !important; text-transform: none !important; }
.walletmodal input:not([type="checkbox"]):not([type="range"]) { width: 100%; height: 50px !important; margin: 0; padding: 0 14px; font: 600 16px var(--font) !important; border-radius: 5px !important; }
.wm-steph { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wm-steph label { margin: 0 !important; }
.wm-step { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--lux-soft); color: var(--accent2); font: 700 11px var(--font); }
.wm-quick { display: flex !important; gap: 6px; margin: 8px 0 0 !important; }
.wm-quick button { flex: 1; height: 34px; border-radius: 4px !important; border: 1px solid var(--border) !important; background: var(--panel3) !important; color: var(--muted) !important; font: 700 12px var(--font) !important; cursor: pointer; }
.wm-quick button:hover { color: var(--text) !important; border-color: var(--border2) !important; }
.wm-quick button.sel { background: var(--lux-soft) !important; color: var(--accent2) !important; border-color: var(--lux-line) !important; }
.wm-paybox { margin-top: 16px !important; padding: 14px !important; border-radius: 5px !important; }
.wm-paylab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 12.5px var(--font); color: var(--text); }
.walletmodal .cmdrow { margin: 0 !important; }
.walletmodal .cmdrow .cmd { font-size: 15px !important; padding: 13px 14px !important; }
.wm-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.wm-status::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 3px rgba(58,214,124,.18); }
.wm-status.off::before { background: #ffb020; box-shadow: 0 0 0 3px rgba(255,176,32,.15); }
.wm-fine { margin-top: 12px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.wm-fine:empty { display: none; }
.wm-help { margin-top: 14px !important; font-size: 12.5px !important; color: var(--faint) !important; text-align: center; }
.wm-help a { color: var(--accent2) !important; font-weight: 600; text-decoration: none; }
.walletmodal .wdnote { margin: 0 0 12px !important; padding: 10px 12px !important; border-radius: 5px !important; background: rgba(255,201,64,.08) !important; border: 1px solid rgba(255,201,64,.3) !important; color: #ffd27a !important; font-size: 12.5px; line-height: 1.45; }
.walletmodal #wdbotnote { margin-top: 12px !important; }
.walletmodal #withdraw { width: 100%; height: 48px; margin-top: 14px; font-size: 14px; }
.wd-code { margin-top: 14px !important; padding: 14px !important; border-radius: 5px !important; background: var(--bg2) !important; border: 1px solid var(--lux-line) !important; }
.wd-code-t { font-size: 13px; line-height: 1.5; }
.wd-code-row input { height: 48px !important; text-align: center; font: 700 20px var(--mono) !important; letter-spacing: .3em; }
.wd-code-row .btn { min-width: 110px; }
.wd-sec { margin-top: 12px; font-size: 12px; color: var(--faint); text-align: center; }
.walletmodal #wdcooldown { margin-top: 6px; font-size: 12px; color: var(--faint); text-align: center; }
.walletmodal .err { margin-top: 10px; text-align: center; font-size: 12.5px; }
.walletmodal .err:empty { display: none; }
.walletmodal .err.ok { color: var(--win); }
.wdpending .wm-dhead { margin: 18px 0 6px !important; }
.wdrow { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; margin-top: 8px !important; padding: 12px 14px !important; border-radius: 5px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; }
.wdrow.cancelling { background: rgba(255,201,64,.06) !important; border-color: rgba(255,201,64,.3) !important; }
.wdrow .wdr-main { display: contents; }
.wdrow .wdr-main b { grid-column: 1; grid-row: 1; font: 800 15px var(--display) !important; color: var(--text) !important; }
.wdrow .wdr-main span { grid-column: 1 / 3; grid-row: 2; font-size: 12px; color: var(--muted); line-height: 1.45; }
.wdrow .wdr-time { grid-column: 2; grid-row: 1; font-size: 11px; color: var(--faint); }
.wdrow .wdr-pill, .wdrow .minibtn { grid-column: 3; grid-row: 1 / 3; }
.wdrow .wdr-pill { padding: 5px 8px 4px !important; border-radius: 4px !important; font-family: var(--pixel) !important; font-size: 10px !important; letter-spacing: 0 !important; background: var(--panel3) !important; color: var(--muted) !important; }
.wdrow .minibtn.danger { height: 36px; padding: 0 14px !important; background: rgba(255,90,110,.1) !important; border: 1px solid rgba(255,90,110,.35) !important; color: #ff8b9a !important; font: 700 12px var(--font) !important; }
.wdrow .minibtn.danger:hover { background: rgba(255,90,110,.2) !important; }
.wm-dhead { font: 700 10.5px var(--font) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--faint) !important; margin-bottom: 8px !important; }
.txtotals { gap: 8px !important; margin-bottom: 14px !important; }
.txtotals div { padding: 10px 12px !important; border-radius: 5px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; }
.txtotals small { font: 700 10px var(--font) !important; letter-spacing: .12em !important; color: var(--faint) !important; }
.txtotals b { font: 700 14px var(--font) !important; margin-top: 4px !important; color: var(--text) !important; }
.txlist { gap: 4px !important; max-height: 340px !important; }
.tx, .tx.in, .tx.out, .tx.pending, .tx.done { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 5px; background: var(--bg2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.tx-ico { width: 32px !important; height: 32px !important; border-radius: 4px !important; background: var(--panel3) !important; color: var(--muted) !important; font: 700 15px var(--font) !important; }
.tx.in .tx-ico { background: rgba(58,214,124,.12) !important; color: var(--win) !important; }
.tx.out .tx-ico { background: rgba(255,90,110,.1) !important; color: #ff8b9a !important; }
.tx-meta { flex: 1; min-width: 0; }
.tx-title { font: 700 13px var(--font) !important; color: var(--text); }
.tx-sub { font-size: 11.5px !important; color: var(--faint) !important; }
.tx-amt { font: 700 13.5px var(--font) !important; }
.tx.in .tx-amt { color: var(--win) !important; } .tx.out .tx-amt { color: var(--text) !important; }
.tx-st { font-family: var(--pixel) !important; font-size: 10px !important; letter-spacing: 0 !important; padding: 3px 5px 2px !important; border-radius: 4px !important; background: var(--panel3) !important; color: var(--muted) !important; }
.walletmodal .tip-row { display: flex; gap: 8px; }
.walletmodal .tip-row input { flex: 1; }
.walletmodal .tip-row .chat-send { flex: 0 0 auto; min-width: 110px; height: 50px; border-radius: 5px !important; background: var(--accent) !important; color: #fff !important; font: 700 13px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; }
.walletmodal .tip-row .chat-send:hover { background: var(--accent2) !important; }
.walletmodal .tip-note, .walletmodal .promo-note { margin-top: 10px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.walletmodal .promo-note:empty { display: none; }
.walletmodal .wm-lab-sub { font-weight: 500; color: var(--faint); }
.walletmodal > .wm-side { display: flex !important; flex-direction: column; gap: 14px; margin: 0 !important; padding: 16px 26px 20px !important; border-top: 1px solid var(--border); background: var(--bg2); }
.walletmodal .wm-side > .wm-discord, .walletmodal .wm-side > .wm-purchases { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.walletmodal #dc-connected { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.walletmodal #dc-connected .dcav { width: 28px; height: 28px; border-radius: 50%; }
.walletmodal .dcbtn { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; height: 44px; background: #5865f2 !important; color: #fff !important; text-transform: none !important; }
.walletmodal #dc-hint { margin-top: 8px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.walletmodal #dc-hint:empty { display: none; }
.walletmodal #dc-claim { margin-top: 8px !important; }
.walletmodal .purchase-state { font-size: 12.5px; }
@media (max-width: 560px) {
  .walletmodal > .wm-head { flex-direction: column; padding: 20px 56px 16px 18px !important; }
  .walletmodal .wm-who { text-align: left; }
  .walletmodal > .wm-tabs { margin: 14px 18px 0 !important; }
  .walletmodal > .wm-tabs .wm-tab { font-size: 11.5px !important; }
  .walletmodal > div[id^="wm-"] { padding: 16px 18px 20px; }
  .walletmodal > .wm-side { padding: 14px 18px 18px !important; }
}

/* ---------- cases: DonutClash-style reel (open strip, blue marker, no card boxes) ---------- */
.hreels, .hreels.many { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--r-card) !important; padding: 10px !important; box-shadow: none !important; }
.hreels::before, .hreels::after { display: none !important; }
.hreel { border-radius: var(--r-card) !important; background: var(--bg2) !important; border: 1px solid var(--border2) !important; box-shadow: none !important; }
.hreel::before, .hreel::after { width: 160px !important; }
.hreel::before { background: linear-gradient(90deg, var(--bg2) 8%, transparent) !important; }
.hreel::after { background: linear-gradient(270deg, var(--bg2) 8%, transparent) !important; }
.hreel.landed { border-color: var(--border2) !important; box-shadow: none !important; }
.hstrip { top: 0 !important; bottom: 0; align-items: center; gap: 6px !important; }
.hcard { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; gap: 0 !important; justify-content: center; height: 100% !important; }
.hcard .hc-art { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.hcard .hc-art::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 42%, transparent), transparent 70%); filter: blur(7px); }
.hcard .hc-art img.iimg, .hcard .hc-art svg { position: relative; width: 60px !important; height: 60px !important; opacity: .55; filter: none; transition: transform .3s cubic-bezier(.2,.9,.3,1.3), opacity .3s; }
.hcard .hc-n, .hcard .hc-v { opacity: 0; transition: opacity .3s; }
.hcard .hc-bar { display: none !important; }
.hcard.win { animation: none !important; box-shadow: none !important; }
.hcard.win::after { display: none !important; }
.hcard.win .hc-art img.iimg, .hcard.win .hc-art svg { opacity: 1; transform: scale(1.22); filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.hcard.win .hc-n, .hcard.win .hc-v { opacity: 1; }
.hcard .hc-n { font: 700 12.5px var(--font) !important; color: var(--text) !important; margin-top: 4px; }
.hcard .hc-v { font: 700 12px var(--font) !important; color: var(--gold) !important; }
.hreel.landed .hcard:not(.win) { opacity: .35 !important; filter: none !important; }
.hreels.many .hcard .hc-art { transform: scale(var(--hc-s, 1)); margin: 0 !important; }
.hwin { left: 0 !important; right: 0 !important; width: auto !important; margin: 0 !important; top: 0 !important; bottom: auto !important; height: 2px !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent) !important; box-shadow: none !important; }
.hwin::before { content: '' !important; position: absolute; left: 50%; top: 2px; width: 0 !important; height: 0 !important; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--accent); background: none !important; transform: none !important; }
.hwin::after { display: none !important; }
.hreel.landed .hwin { background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent) !important; }
.hreel-idle { min-height: 226px; border-radius: var(--r-card); }
.cd-head { border-radius: var(--r-card) !important; }
.cd-icon { border-radius: var(--r-btn) !important; }
.cd-ctl .qtyrow { border-radius: var(--r-btn) !important; background: var(--bg2) !important; }
.cd-ctl .qtyrow .opt { border-radius: 4px !important; font: 700 13px var(--font) !important; }
.cd-ctl .qtyrow .opt.sel { background: var(--panel3) !important; color: var(--text) !important; box-shadow: none !important; }
.cd-open { border-radius: var(--r-btn) !important; min-width: 220px !important; font: 700 14px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; }
.cd-demo { margin-left: auto; border-radius: var(--r-btn) !important; padding: 12px 16px !important; border: 1px solid var(--border2) !important; background: var(--panel) !important; color: var(--text) !important; font: 700 12.5px var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; }
.cd-demo:hover { border-color: var(--accent) !important; color: var(--accent2) !important; }
.cd-ctl { justify-content: flex-start !important; }
.cd-row, .cd-ricon, .cs-it, .crow, .crow-icon, .cx-pricebar, .cx-select select, .cx-banner, .lastdrops .ld { border-radius: var(--r-btn) !important; }
.cs-it .iv, .cd-rval, .cd-price, .crow-price { font-family: var(--font) !important; }

/* case grid: flat cards, pixel chests, no glow blobs */
.cx-card { border-radius: var(--r-card) !important; padding: 12px !important; background: var(--panel) !important; }
.cx-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.35) !important; }
.cx-art { height: 128px !important; }
.cx-art::before { display: none !important; }
.cx-case { width: 136px !important; bottom: 2px !important; image-rendering: pixelated; }
.cx-item { top: 4px !important; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)) !important; }
.cx-art .cx-item .cicon { width: 54px !important; height: 54px !important; }
.cx-pricebar b { font-family: var(--font) !important; font-size: 14px !important; }
.cx-cardtop .cx-name { font-family: var(--font) !important; font-weight: 700 !important; }

/* ---------- races: coins and numbers on one baseline ---------- */
.cx-coin { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50% !important; box-shadow: none !important; background: var(--gold) !important; color: #3a2600 !important; font: 800 9px/1 var(--font) !important; }
.rp-prize, .rp-vl, .rp-v, .rp-p, .rp-pool b, .rp-you-v, .rc-pz, .rc-pool, .rc-prize b { display: inline-flex !important; align-items: center !important; gap: 6px; font-family: var(--font) !important; font-variant-numeric: tabular-nums; line-height: 1 !important; }
.rp-row > .rp-v, .rp-row > .rp-p { justify-content: flex-end; }
.rp-step { align-items: center !important; border-radius: var(--r-card) var(--r-card) 0 0 !important; }
.rp-prize { font-size: 20px !important; font-weight: 800 !important; }
.rp-pod.p1 .rp-prize { font-size: 26px !important; }
.rp-prize .cx-coin { width: 18px; height: 18px; font-size: 10px !important; }
.rp-pool b { font-size: 26px !important; font-weight: 800 !important; }
.rp-pool .cx-coin { width: 22px; height: 22px; font-size: 11px !important; }
.rp-vl .cx-coin, .rp-v .cx-coin, .rp-p .cx-coin, .rp-you-v .cx-coin { width: 15px; height: 15px; font-size: 8.5px !important; }
.rp-p { font-weight: 800 !important; color: var(--gold); }
.rp-hero, .rp-pool, .rp-clock, .rp-table, .rp-you, .rp-how { border-radius: var(--r-card) !important; }
.rp-av img { border-radius: 6px !important; }
.rp-medal { border-radius: 4px !important; }
.rp-status { border-radius: 3px !important; }
.rc-tabs { border-radius: var(--r-btn) !important; } .rc-tabs button { border-radius: 4px !important; }

/* ---------- resize safety: nothing in the chat column may squash into its neighbour ---------- */
.chat > .chat-head, .chat > .raincard, .chat > .giveline, .chat > .chattabs, .chat > .chat-input, .chat > .chat-login, .chat > .sidefoot { flex: 0 0 auto !important; }
.chat > .chat-msgs { flex: 1 1 0 !important; min-height: 72px !important; }
.chattabs { position: relative; z-index: 1; background: var(--panel) !important; }
@media (max-height: 620px) { .raincard .rsub { display: none; } .raincard { padding: 10px 12px; } .raincard .rpot { font-size: 20px; } }
/* the old sheet collapses the menu at 1420px while the new layout keeps it wide until 1340px: keep labels on in between */
@media (min-width: 1341px) and (max-width: 1420px) {
  .rail-brand .name, .rn span, .rail .tab span, .rbadge, .rail-foot .pill span:not(.dot) { display: inline !important; }
  .rail-sec { display: flex !important; }
  .rail-brand { justify-content: flex-start; padding: 0 18px !important; }
  .rail-nav { padding: 10px 12px 10px !important; }
  .rn, .rail .tab { justify-content: flex-start; padding: 8px 12px !important; }
  .rail-foot { flex-direction: row; }
  .rail-foot .pill { padding: 7px 10px 6px; }
}

/* ---------- wider everywhere ---------- */
.main { max-width: 1720px !important; padding: 20px 24px 40px !important; }
.modal { max-width: 600px !important; }
.daily-modal, .congrats-modal { max-width: 440px !important; }
.confirm-modal { width: min(440px, 94vw); }
.authmodal { width: min(480px, 94vw); }
.setmodal { width: min(920px, 94vw) !important; height: min(640px, 90vh) !important; }
.fair-modal, .vault-modal, .uprof, .modal.prof, .lpmodal, .refmodal, .onlinemodal, .rbmodal { max-width: 760px !important; }
.newsmodal { max-width: 600px !important; }
@media (min-width: 1700px) {
  .feat, .gscroll .gcard:not(.scard), .gscroll .gcard.scard { --gh: 236px; flex-basis: 177px !important; width: 177px !important; }
  .gscroll .gcard.scard .sc-art { height: 177px !important; }
  .banner.b3 { min-height: 220px !important; }
  .home-hero h1 { font-size: 32px !important; }
}

/* ---------- wallet v2: flat, wide, one row per action ---------- */
.walletmodal { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; width: min(780px, 94vw); max-width: none !important; padding: 0 !important; overflow: hidden; }
.walletmodal > .m-close { position: absolute !important; top: 16px !important; right: 16px !important; }
.walletmodal > .wm-tabs { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; display: inline-grid !important; grid-template-columns: repeat(5, auto); gap: 2px; margin: 18px 0 16px 22px !important; padding: 3px !important; }
.walletmodal > .wm-tabs .wm-tab { padding: 8px 14px !important; font: 600 12.5px var(--font) !important; }
.walletmodal > .wm-head { grid-column: 2; grid-row: 1; display: flex !important; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; margin: 0 !important; padding: 16px 60px 12px 16px !important; background: none !important; border: 0 !important; }
.walletmodal > .wm-head > div:first-child { display: flex; flex-direction: column; align-items: flex-end; }
.walletmodal .wm-l { font: 700 10px var(--font) !important; letter-spacing: .14em !important; color: var(--faint) !important; }
.walletmodal .wm-bal { margin: 0; font: 800 24px/1.1 var(--display) !important; letter-spacing: -.02em !important; color: var(--text) !important; }
.walletmodal .wm-spons { display: none !important; }
.walletmodal .wm-cur { margin-top: 6px; padding: 2px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--border); }
.walletmodal .wm-cur button { padding: 4px 8px 4px 4px; border-radius: 3px; font: 600 11px var(--font); }
.walletmodal .wm-cur button .ccoin { width: 14px; height: 14px; font-size: 8px; }
.walletmodal .wm-who { font-size: 11px; color: var(--faint); white-space: nowrap; line-height: 1.4; text-align: right; }
.walletmodal .wm-who br { display: none; }
.walletmodal .wm-who strong { color: var(--muted); font-weight: 600; }
.walletmodal .wm-who a { margin-left: 6px; color: var(--faint); }
.walletmodal > .wm-dephold { grid-column: 1 / -1; grid-row: 2; margin: 0 22px 14px !important; }
.walletmodal > div[id^="wm-"] { grid-column: 1 / -1; grid-row: 3; padding: 22px 22px 24px; border-top: 1px solid var(--border); min-width: 0; }
.walletmodal > .wm-side { grid-column: 1 / -1; grid-row: 4; }
.walletmodal label { margin: 0 0 8px !important; }
.walletmodal .wm-step { display: none !important; }
.walletmodal .wm-steph { margin: 0 !important; }
/* deposit: paused note, amount + chips on one row, the command card, one help line */
#wm-deposit { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 12px; align-items: center; }
#wm-deposit > * { grid-column: 1 / -1; }
#wm-deposit > .wdnote { order: -2; margin: 0 !important; }
#wm-deposit > .wm-steph { order: -1; }
#wm-deposit > #depoamt { grid-column: 1; }
#wm-deposit > .wm-quick[data-for="depoamt"] { grid-column: 2; margin: 0 !important; display: inline-flex !important; }
#wm-deposit > .wm-quick button { flex: 0 0 auto; min-width: 54px; height: 50px; }
#wm-deposit > .wm-paybox { margin: 4px 0 0 !important; padding: 16px !important; background: var(--bg2) !important; }
#wm-deposit .wm-paylab { font: 700 13px var(--font); margin-bottom: 10px; }
#wm-deposit > .wm-fine { margin: 0 !important; font-size: 12px; }
#wm-deposit > .wm-help { margin: 0 !important; text-align: left; }
#wm-deposit > .wm-help:empty, #wm-deposit > .wm-fine:empty { display: none; }
/* withdraw: amount and the button on one row, chips under, pending list below */
#wm-withdraw { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 12px; align-items: center; }
#wm-withdraw > * { grid-column: 1 / -1; }
#wm-withdraw > .wd-req { order: -3; margin: 0 !important; }
#wm-withdraw > .wdnote#wdpaused { order: -2; margin: 0 !important; }
#wm-withdraw > label { order: -1; }
#wm-withdraw > #wdamt { grid-column: 1 / -1; }
#wm-withdraw > #withdraw { grid-column: 1 / -1; margin: 4px 0 0 !important; height: 50px; }
#wm-withdraw > .wm-quick[data-for="wdamt"] { margin: 0 !important; }
#wm-withdraw > .wd-code { margin: 0 !important; }
#wm-withdraw > .wd-sec, #wm-withdraw > #wdcooldown { margin: 0 !important; text-align: left; font-size: 12px; color: var(--faint); }
#wm-withdraw > .wd-sec + #wdcooldown { margin-top: -6px !important; }
#wm-withdraw > #wdcooldown:empty { display: none; }
#wm-withdraw > .err { margin: 0 !important; text-align: left; }
#wm-withdraw > .wdpending:empty { display: none; }
#wm-withdraw > .wdpending .wm-dhead { margin: 6px 0 4px !important; }
#wm-withdraw > .wm-help { margin: 0 !important; text-align: left; }
/* tip, promo, history: the same quiet spacing */
#wm-tip, #wm-promo { display: flex; flex-direction: column; gap: 10px; }
#wm-tip label, #wm-promo label { margin: 4px 0 0 !important; }
.walletmodal .tip-note, .walletmodal .promo-note { margin: 0 !important; }
.walletmodal .tip-row .chat-send { min-width: 120px; }
#wm-history .wm-dhead { display: none; }
#wm-history > .hint { margin: 0 0 10px !important; font-size: 12px; }
.txlist { max-height: 300px !important; }
/* footer: one row for Discord, purchases only when they exist */
.walletmodal > .wm-side { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 14px 22px !important; }
.walletmodal .wm-side > .wm-discord { flex: 1 1 320px; display: flex; align-items: center; gap: 12px; }
.walletmodal .wm-side .wm-dhead { margin: 0 !important; flex: 0 0 auto; }
.walletmodal #dc-connected { flex: 1; }
.walletmodal #dc-connected .minibtn { margin-left: auto; height: 32px; padding: 0 12px !important; }
.walletmodal .dcbtn { width: auto !important; height: 36px !important; padding: 0 16px; flex: 0 0 auto; }
.walletmodal #dc-hint { flex: 1 1 100%; margin: 0 !important; }
.walletmodal #dc-claim { margin: 0 !important; }
.walletmodal .wm-side > .wm-purchases { flex: 1 1 100%; }
@media (max-width: 640px) {
  .walletmodal { grid-template-columns: 1fr; }
  .walletmodal > .wm-tabs { grid-column: 1; grid-row: 2; justify-self: stretch; display: grid !important; grid-template-columns: repeat(5, 1fr); margin: 0 16px 14px !important; }
  .walletmodal > .wm-head { grid-column: 1; grid-row: 1; align-items: flex-start; padding: 16px 56px 10px 16px !important; }
  .walletmodal > .wm-head > div:first-child { align-items: flex-start; }
  .walletmodal .wm-who { text-align: left; }
  .walletmodal > .wm-dephold { grid-row: 3; margin: 0 16px 12px !important; }
  .walletmodal > div[id^="wm-"] { grid-row: 4; padding: 16px 16px 20px; }
  .walletmodal > .wm-side { grid-row: 5; }
  #wm-deposit > #depoamt, #wm-withdraw > #wdamt { grid-column: 1 / -1; }
  #wm-deposit > .wm-quick[data-for="depoamt"] { grid-column: 1 / -1; display: flex !important; }
  #wm-deposit > .wm-quick button { flex: 1; min-width: 0; height: 40px; }
  #wm-withdraw > #withdraw { grid-column: 1 / -1; }
}

#wm-deposit[hidden], #wm-withdraw[hidden], #wm-tip[hidden], #wm-promo[hidden], #wm-history[hidden] { display: none !important; }

/* ---------- the money sign is a coin, not a dollar ---------- */
.cx-coin, .wcoin, .pw-coin, .ccoin:not(.sp) { background: url('/assets/coin.svg?v=donut2') center / contain no-repeat !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; image-rendering: pixelated; }
.walletbtn .wcoin { width: 20px; height: 20px; }
.cx-pricebar .cx-coin { width: 16px; height: 16px; }
.hc-v { display: inline-flex !important; align-items: center; gap: 5px; }
.hc-v .cx-coin { width: 14px; height: 14px; }
.cd-price, .cd-rval, .cxb-v, .cxb-stats b { display: inline-flex !important; align-items: center; gap: 6px; }
.cd-price .wcoin { width: 20px; height: 20px; } .cd-rval .wcoin { width: 14px; height: 14px; }

/* ---------- case reel: no highlight band on the winner ---------- */
.hcard.win, .hreel.landed .hcard.win, .hreels.many .hcard.win { background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; animation: none !important; z-index: 2; }
.hcard.win::before, .hcard.win::after, .hcard.win .hc-art::before { display: none !important; animation: none !important; }
.hcard .hc-art::before { display: block !important; }
.hcard.win .hc-art::before { display: block !important; opacity: .9; }
.hcard.win .hc-art img, .hcard.win .hc-art svg { animation: none !important; }

/* ---------- cases: the grid ---------- */
.cx-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 12px !important; }
.cx-card { position: relative; padding: 14px 12px 12px !important; background: var(--panel) !important; border: 1px solid var(--border) !important; border-top: 2px solid var(--tc) !important; }
.cx-card:hover { transform: translateY(-3px); border-color: var(--border2) !important; border-top-color: var(--tc) !important; }
.cx-cardtop .cx-name { font: 700 13.5px var(--font) !important; }
.cx-art { height: 136px !important; margin: 6px 0 6px !important; }
.cx-case { width: 150px !important; bottom: 0 !important; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.cx-item { top: 2px !important; }
.cx-art .cx-item .cicon { width: 52px !important; height: 52px !important; }
.cx-meta { margin: 0 2px 10px !important; font-size: 11px !important; }
.cx-pricebar { height: 38px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; }
.cx-pricebar b { font: 800 14px var(--font) !important; }
.cx-card:hover .cx-pricebar { background: var(--accent) !important; border-color: var(--accent) !important; }
.cx-offtag { font-family: var(--pixel) !important; font-size: 10px !important; letter-spacing: 0 !important; border-radius: 3px !important; }
.cx-banner { border-radius: var(--r-card) !important; background: linear-gradient(120deg, #182544, var(--panel)) !important; border: 1px solid rgba(63,142,248,.22) !important; }
.cx-tabs { border-radius: var(--r-btn) !important; }
.cx-tab { border-radius: 4px !important; font: 600 13px var(--font) !important; }
.cx-tab.sel { background: var(--panel3) !important; color: var(--text) !important; box-shadow: none !important; }
.cd-head { background: var(--panel) !important; border: 1px solid var(--border) !important; padding: 16px 18px !important; }
.cd-name { font: 800 20px var(--display) !important; letter-spacing: -.02em !important; }
.cd-list .cd-row { background: var(--panel) !important; border-radius: var(--r-btn) !important; }
.cd-rname { font: 700 13.5px var(--font) !important; }

.walletbtn .wcoin, .curbtn .ccoin:not(.sp), .cm-opt .ccoin:not(.sp), .wm-cur .ccoin:not(.sp), .pw-box .pw-coin, .cx-pricebar .cx-coin, .rp-prize .cx-coin, .rp-pool .cx-coin, .rc-pz .cx-coin, .hc-v .cx-coin, .cd-price .wcoin, .cd-rval .wcoin, .cxb-v .wcoin, .cxb-stats .wcoin, .cxb-target .wcoin { background: url('/assets/coin.svg?v=donut2') center / contain no-repeat !important; color: transparent !important; font-size: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; }

/* ---------- notices stay out of the way: top right, under the bar, never on the table pill ---------- */
.toasts { top: calc(var(--topH) + 12px) !important; bottom: auto !important; right: 16px !important; width: 320px !important; z-index: 115 !important; }
@media (max-width: 760px) { .toasts { top: calc(var(--topH) + 8px) !important; right: 10px !important; width: calc(100vw - 20px) !important; } }
.toast { border-radius: var(--r-card) !important; }
.toast .ticon { border-radius: var(--r-btn) !important; }
/* pixel labels sit on whole pixels so they never blur */
.px, .rbadge, .gcard .badge, .sc-new, .scard .sc-real, .scard .sc-demo, .lvchip, .lvl-badge, .btag, .rs-tag, .pill.botpill, .sidefoot > span:first-child, .boot-tip, .set-kicker, .wdrow .wdr-pill, .tx-st, .cx-offtag, .fd-badge { font-size: 8px !important; letter-spacing: .4px !important; padding-top: 4px !important; padding-bottom: 3px !important; transform: none !important; }
.btag, .rs-tag, .set-kicker { padding: 4px 6px 3px !important; }
.lvchip, .lvl-badge { padding: 4px 5px 3px !important; }

@media (min-width: 1101px) { .toasts { right: calc(var(--chatW) + 16px) !important; } body.chat-hidden .toasts, body.theater .toasts { right: 16px !important; } }

/* ---------- coin menu: fixed to the viewport (the script places it under the button in page pixels) ---------- */
.curmenu { position: fixed !important; left: auto; top: auto; z-index: 96 !important; }
/* sponsored wallet: the top-bar coin shows the S coin, not the gold one */
html.cur-sponsored .walletbtn .wcoin { background: var(--violet) !important; color: #1f0f45 !important; font: 800 11px/1 var(--font) !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; }
html.cur-sponsored .walletbtn #walletbal { color: var(--violet); }
.ccoin.sp { background: var(--violet) !important; color: #1f0f45 !important; }
.cm-opt.sel { box-shadow: inset 0 0 0 1px var(--lux-line); }
/* ---------- case reel: the idle strip sits centred, and the landing lands on the line ---------- */
.hreel-still .hstrip { left: 50% !important; transform: translateX(-50%) !important; }
.hreel-still .hcard.idle-mid .hc-art img.iimg, .hreel-still .hcard.idle-mid .hc-art svg { opacity: .85; }

/* ---------- chat: replies, @mentions, GIFs, player numbers ---------- */
#chatmsgs .cmsg:not(.sys) > div { padding-right: 20px; }
#chatmsgs .cmsg.mentioned { background: color-mix(in srgb, var(--gold) 9%, transparent) !important; box-shadow: inset 2px 0 0 var(--gold); }
#chatmsgs .cmsg.hl { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
#chatmsgs .cmsg .crep { display: none; position: absolute; right: 4px; top: 7px; z-index: 2; width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid var(--border); background: var(--panel3); color: var(--muted); place-items: center; cursor: pointer; transition: color .15s, border-color .15s; }
#chatmsgs .cmsg .crep svg { width: 12px; height: 12px; }
#chatmsgs.can-reply .cmsg:not(.sys):hover .crep { display: grid; }
#chatmsgs .cmsg .crep:hover { color: var(--text); border-color: var(--border2); }
#chatmsgs .cmsg.cont .crep { top: 50%; transform: translateY(-50%); }
#chatmsgs.mod-view .cmsg .crep { right: 26px; }
#chatmsgs .creply { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 4px; padding: 3px 8px 3px 7px; border: 0; border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; background: rgba(255,255,255,.04); color: var(--muted); font: 600 11.5px/1.3 var(--font); cursor: pointer; text-align: left; }
#chatmsgs .creply b { color: var(--text); font-weight: 700; white-space: nowrap; }
#chatmsgs .creply span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatmsgs .creply:hover { background: rgba(255,255,255,.08); }
#chatmsgs .cat { color: var(--accent); font-weight: 700; cursor: pointer; border-radius: 3px; padding: 0 3px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
#chatmsgs .cat:hover { text-decoration: underline; }
#chatmsgs .cat.me { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--text); }
#chatmsgs .cno { display: none; flex: 0 0 auto; white-space: nowrap; font: 600 10px/1 var(--mono); color: var(--faint); padding: 3px 4px; border-radius: 3px; background: rgba(255,255,255,.05); }
/* staff: hovering a line swaps the time for the player's number */
#chatmsgs.mod-view .cmsg:hover .cno { display: inline-block; }
#chatmsgs.mod-view .cmsg:hover .chead:has(.cno) .ctime { display: none; }
#chatmsgs .cmsg .ctime { flex: 0 0 auto; white-space: nowrap; }
#chatmsgs .cgifw { display: block; margin-top: 4px; border-radius: 5px; overflow: hidden; background: var(--panel3); border: 1px solid var(--border); max-width: 160px; }
#chatmsgs .cgif { display: block; width: 100%; height: 100%; object-fit: cover; }
.pno { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--panel3); border: 1px solid var(--border); color: var(--muted); font: 700 11px/1 var(--mono); letter-spacing: .02em; }
.pno[hidden] { display: none !important; }
/* composer extras */
.chat > .chat-reply, .chat > .gifpick, .chat > .mentionpop { flex: 0 0 auto !important; }
.chat-reply { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--border); background: var(--panel2); font-size: 12px; color: var(--muted); }
.chat-reply[hidden] { display: none !important; }
.chat-reply svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
.chat-reply .cr-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply b { color: var(--text); }
.chat-reply .cr-x { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid var(--border); background: var(--panel3); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.chat-input .chat-gif { flex: 0 0 auto; height: 42px; padding: 0 10px !important; border-radius: var(--r-btn) !important; border: 1px solid var(--border) !important; background: var(--panel3) !important; color: var(--muted) !important; font: 800 10.5px/1 var(--font) !important; letter-spacing: .06em; cursor: pointer; }
.chat-input .chat-gif[hidden] { display: none !important; }
.chat-input .chat-gif:hover, .chat-input .chat-gif.on { color: var(--text) !important; border-color: var(--border2) !important; }
.gifpick, .mentionpop { position: absolute; left: 8px; right: 8px; bottom: 70px; z-index: 5; background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--r-card); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.gifpick[hidden], .mentionpop[hidden] { display: none !important; }
.gifpick { padding: 8px; }
.gifpick .gp-head { display: flex; gap: 6px; margin-bottom: 8px; }
.gifpick .gp-head input { flex: 1; height: 34px; margin: 0; padding: 0 10px !important; font-size: 13px; }
.gifpick .gp-x { width: 34px; height: 34px; padding: 0; border-radius: 4px; border: 1px solid var(--border); background: var(--panel3); color: var(--muted); font-size: 16px; cursor: pointer; }
.gifpick .gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 236px; overflow-y: auto; }
.gifpick .gp-item { height: 74px; padding: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--panel3); cursor: pointer; }
.gifpick .gp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gifpick .gp-item:hover { border-color: var(--accent); }
.gifpick .gp-item:disabled { opacity: .5; cursor: default; }
.gifpick .gp-note { grid-column: 1 / -1; padding: 18px 6px; text-align: center; color: var(--muted); font-size: 12px; }
.gifpick .gp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 10.5px; color: var(--faint); }
.mentionpop { padding: 4px; }
.mentionpop .mn-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: none; color: var(--text); font: 600 13px var(--font); cursor: pointer; text-align: left; }
.mentionpop .mn-opt .cav { width: 20px; height: 20px; border-radius: 3px; image-rendering: pixelated; }
.mentionpop .mn-opt.sel, .mentionpop .mn-opt:hover { background: var(--panel3); }

/* ---------- staff panel ---------- */
.modal.modpanel { max-width: min(1080px, 96vw) !important; width: 100%; height: min(720px, 92vh); padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
.mp-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.mp-title { display: flex; align-items: center; gap: 10px; font: 800 17px var(--font); letter-spacing: -.01em; color: var(--text); }
.mp-title svg { width: 20px; height: 20px; color: var(--accent); }
.mp-rank { font: 700 8px/1 var(--pixel); letter-spacing: .4px; padding: 4px 6px 3px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.mp-stats { display: flex; gap: 14px; margin-left: auto; font-size: 12px; color: var(--muted); }
.mp-stats b { color: var(--text); font-weight: 800; }
.mp-head .m-close { position: static !important; margin-left: 0; }
.mp-wrap { display: grid; grid-template-columns: 184px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.mp-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--border); background: var(--panel); }
.mp-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-btn); background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; text-align: left; white-space: nowrap; }
.mp-nav button[hidden] { display: none !important; }
.mp-nav button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mp-nav button:hover { background: var(--panel2); color: var(--text); }
.mp-nav button.sel { background: var(--panel3); color: var(--text); }
.mp-navfoot { margin-top: auto; padding: 8px 4px 0; font-size: 11px; line-height: 1.45; color: var(--faint); }
.mp-panes { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.mp-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px; overflow: hidden; }
.mp-pane[hidden] { display: none !important; }
.mp-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.mp-list { display: flex; flex-direction: column; min-height: 0; }
.mp-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--panel3); }
.mp-search svg { width: 15px; height: 15px; color: var(--faint); flex: 0 0 auto; }
.mp-search input { flex: 1; height: 100%; margin: 0; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 13px; }
.mp-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.mp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--r-btn); background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.mp-row:hover { background: var(--panel2); }
.mp-row.sel { background: var(--panel3); border-color: var(--border2); }
.mp-row .cav { width: 30px; height: 30px; border-radius: 4px; image-rendering: pixelated; }
.mp-rn { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mp-rn b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rn small { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.mp-rs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
.mp-st { font: 700 9.5px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; background: var(--panel3); color: var(--muted); }
.mp-st.on { color: #3ddc85; background: rgba(61,220,133,.12); }
.mp-st.warn { color: var(--gold); background: rgba(255,201,64,.12); }
.mp-st.bad { color: var(--red); background: rgba(255,77,94,.12); }
.mp-st.staff { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mp-detail { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); }
.mp-empty { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mp-dhead { display: flex; align-items: center; gap: 12px; }
.mp-dhead .cav { width: 44px; height: 44px; border-radius: 6px; image-rendering: pixelated; }
.mp-did { flex: 1; min-width: 0; }
.mp-dname { display: flex; align-items: center; gap: 8px; font: 800 17px var(--font); letter-spacing: -.01em; color: var(--text); }
.mp-dsub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.mp-dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-dstats > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: var(--r-btn); background: var(--panel3); border: 1px solid var(--border); }
.mp-dstats small { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.mp-dstats b { font-size: 14px; color: var(--text); }
.mp-flag { padding: 8px 11px; border-radius: var(--r-btn); background: var(--panel3); border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.mp-flag.bad { color: var(--red); border-color: rgba(255,77,94,.35); background: rgba(255,77,94,.08); }
.mp-flag.warn { color: var(--gold); border-color: rgba(255,201,64,.35); background: rgba(255,201,64,.08); }
.mp-detail input { height: 38px; margin: 0; }
.mp-actrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mp-actrow .mod-lab { min-width: 80px; font-size: 11.5px; }
.mp-detail .modbtn, .mp-slow .modbtn { height: 32px; min-width: 44px; padding: 0 10px; border-radius: var(--r-btn); font-size: 11.5px; }
.mp-slow .modbtn.sel { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.mp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-h { font: 800 15px var(--font); letter-spacing: -.01em; color: var(--text); }
.mp-h.small { margin: 12px 0 6px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mp-slow { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mp-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); }
.mp-cm { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto 24px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--r-btn); }
.mp-cm:hover { background: var(--panel2); }
.mp-who { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.mp-who .cav { width: 22px; height: 22px; border-radius: 3px; image-rendering: pixelated; flex: 0 0 auto; }
.mp-who b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-who small { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
.mp-ct { font-size: 13px; color: var(--text); word-break: break-word; }
.mp-ct .cgif.small { display: block; max-width: 90px; max-height: 60px; margin-top: 2px; border-radius: 4px; }
.mp-cmeta { font-size: 11px; color: var(--faint); white-space: nowrap; }
.mp-del { width: 24px; height: 24px; padding: 0; border-radius: 4px; border: 0; background: rgba(255,77,94,.12); color: var(--red); font-size: 15px; line-height: 1; cursor: pointer; }
.mp-del:hover { background: rgba(255,77,94,.28); }
.mp-removed { max-height: 150px; overflow-y: auto; }
.modpanel .ml-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.modpanel .ml-bar input, .modpanel .ml-bar select { height: 38px; margin: 0; }
.modpanel .ml-bar input { flex: 1; }
.modpanel .ml-list { flex: 1; min-height: 0; overflow-y: auto; }
.modpanel .usi-tabs { margin-top: 4px; }
@media (max-width: 900px) {
  .mp-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mp-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .mp-nav button { width: auto; }
  .mp-navfoot, .mp-stats, .mp-cmeta { display: none; }
  .mp-split { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 36%) minmax(0, 1fr); }
  .mp-cm { grid-template-columns: 120px minmax(0, 1fr) 24px; }
}
/* the small staff button, bottom right */
.modfab { position: fixed; right: 16px; bottom: 16px; z-index: 89; width: 36px; height: 36px; padding: 0; border-radius: 6px; border: 1px solid var(--border2); background: var(--panel2); color: var(--muted); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: color .15s, border-color .15s, transform .15s; }
.modfab svg { width: 17px; height: 17px; }
.modfab:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.modfab[hidden] { display: none !important; }
@media (min-width: 1101px) { .modfab { right: calc(var(--chatW) + 16px); } body.chat-hidden .modfab, body.theater .modfab { right: 16px; } }
body:has(.tablepill:not([hidden])) .modfab { bottom: 84px; }
@media (max-width: 700px) { .modfab { right: 10px; bottom: 72px; } body:has(.tablepill:not([hidden])) .modfab { bottom: 140px; } }
@media (max-width: 1100px) { body.chat-open .modfab, body.rail-open .modfab { display: none; } }
@media (max-width: 760px) { body.in-slot .modfab { display: none; } }

/* ---------- provider slots: in-page view (rail, top bar and chat stay around the game) ---------- */
#demoslot.slotview[hidden] { display: none !important; }
.slotview .ds-stage { display: flex; justify-content: center; padding: 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel) radial-gradient(ellipse at 50% 0%, rgba(63,142,248,.10), transparent 60%); }
.slotview .ds-frame { position: relative; width: min(100%, calc((100vh - var(--topH, 64px) - 210px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: none !important; min-height: 300px; margin: 0; border-radius: 4px !important; overflow: hidden; background: #000; border: 1px solid var(--border2) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; }
.slotview .ds-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slotview .ds-frame:fullscreen { width: 100%; max-height: none; min-height: 0; border-radius: 0 !important; border: 0 !important; }
.slotview .ds-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--faint); text-align: left; }
.slotview .gv-chip.ds-mode { font-family: var(--pixel); font-size: 8px; letter-spacing: .4px; padding: 5px 7px 4px; text-transform: uppercase; }
.slotview .gv-chip.ds-mode.real { color: var(--gold); border-color: rgba(255,201,64,.4); background: rgba(255,201,64,.08); }
body.in-slot .rail .rn[data-nav="slots"] { color: var(--text); }
body.in-slot .topslots { background: var(--accent); border-color: transparent; color: #fff; }
@media (max-width: 760px) {
  .slotview .gv-head { margin-bottom: 10px; }
  .slotview .ds-stage { padding: 6px; }
  .slotview .ds-frame { width: 100%; aspect-ratio: auto; height: calc(100svh - var(--topH, 56px) - 150px); min-height: 420px; }
  .slotview #dsfull { display: none; }
}

/* ---------- rail fold button sits inside the rail, never over the top bar ---------- */
.railfold { right: 12px !important; top: calc(var(--topH) / 2 - 13px) !important; border-radius: 4px !important; transform: none !important; }
body.rail-collapsed .railfold { transform: scaleX(-1) !important; }
@media (min-width: 981px) { .rail-brand { padding-right: 48px !important; } .rail-brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
body.rail-collapsed .rail-brand { justify-content: flex-start !important; padding: 0 0 0 10px !important; }
body.rail-collapsed .railfold { right: 8px !important; width: 22px !important; height: 22px !important; top: calc(var(--topH) / 2 - 11px) !important; }
@media (max-width: 1340px) and (min-width: 981px) { .rail-brand { justify-content: flex-start !important; padding: 0 0 0 10px !important; } .railfold { right: 8px !important; width: 22px !important; height: 22px !important; top: calc(var(--topH) / 2 - 11px) !important; } }

/* ---------- rewards buttons: blue ---------- */
.rx-rewards { background: var(--accent) !important; color: #fff !important; }
.rx-rewards:hover { background: var(--accent2, var(--accent)) !important; filter: none; }
.daily-btn:not([disabled]) { background: var(--accent) !important; color: #fff !important; }
.daily-btn:not([disabled]):hover { filter: brightness(1.08); }
.daily-btn:not([disabled]) svg rect { fill: #fff; }
.daily-btn.ready { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---------- chat: flat, calm rows ---------- */
.chat-msgs { padding: 8px 10px !important; }
#chatmsgs .cmsg:not(.sys) { grid-template-columns: 30px minmax(0, 1fr) !important; column-gap: 9px; padding: 7px 6px 5px !important; border-radius: 6px; }
#chatmsgs.mod-view .cmsg:not(.sys) { grid-template-columns: 30px minmax(0, 1fr) 20px !important; }
#chatmsgs .cmsg.cont { padding-top: 0 !important; margin-top: -3px !important; }
#chatmsgs .cmsg:hover { background: rgba(255,255,255,.035) !important; }
#chatmsgs .cmsg.mine { background: color-mix(in srgb, var(--accent) 6%, transparent) !important; }
#chatmsgs .cmsg.mine:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
#chatmsgs .cavf { width: 30px !important; height: 30px !important; border-radius: 6px !important; }
#chatmsgs .cav { border-radius: 5px !important; }
#chatmsgs .chead { gap: 5px; margin-bottom: 2px; }
#chatmsgs .cu { font-size: 13px !important; font-weight: 700 !important; }
#chatmsgs .clv { min-width: 18px; height: 16px; padding: 0 4px; border-radius: 4px; font-size: 9.5px !important; box-shadow: none; background: color-mix(in srgb, var(--lc, #b7c0c9) 14%, transparent); }
#chatmsgs .ctime { font-size: 10.5px; font-weight: 500; color: var(--faint); }
#chatmsgs .discord-chat-tag { width: 15px; height: 15px; border-radius: 3px; border: 0; }
#chatmsgs .discord-chat-tag svg { width: 10px; height: 10px; }
#chatmsgs .owner-tag, #chatmsgs .mod-tag, #chatmsgs .admin-tag, #chatmsgs .media-tag { font-size: 7.5px; letter-spacing: .08em; padding: 3px 5px 2px; border-radius: 3px; box-shadow: none !important; background-image: none !important; }
#chatmsgs .owner-tag { background: rgba(255,201,64,.18) !important; color: var(--gold) !important; border-color: rgba(255,201,64,.4) !important; }
#chatmsgs .admin-tag { background: rgba(255,92,114,.16) !important; color: #ff8c9c !important; border-color: rgba(255,92,114,.4) !important; }
#chatmsgs .mod-tag { background: rgba(63,142,248,.16) !important; color: #7fb4ff !important; border-color: rgba(63,142,248,.4) !important; }
#chatmsgs .guild-tag { font-size: 9px; padding: 2px 5px; }
#chatmsgs .ctx { display: block; max-width: none !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
#chatmsgs .cmsg.mine .ctx { background: none !important; }
#chatmsgs .cmsg:hover .ctx { border: 0 !important; }
#chatmsgs .cmsg.sys { padding: 5px 0 !important; }
#chatmsgs .csys { padding: 4px 10px; border: 0; background: rgba(255,255,255,.04); font-size: 11px; font-weight: 500; color: var(--faint); border-radius: 4px; }
#chatmsgs .cmsg.mentioned { box-shadow: inset 2px 0 0 var(--gold); }
#chatmsgs .cdel { background: transparent; color: var(--faint); }
#chatmsgs .cmsg:hover .cdel { color: var(--red); background: rgba(255,77,94,.12); }
#chatmsgs .creply { margin: 2px 0 4px; background: rgba(255,255,255,.04); }
html[data-theme="light"] #chatmsgs .cmsg:hover { background: rgba(15,23,42,.04) !important; }
html[data-theme="light"] #chatmsgs .csys { background: rgba(15,23,42,.05); }

/* ---------- staff panel: overview, reviews, roles and money ---------- */
.mp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 14px; }
.mp-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--border); }
.mp-tile b { font: 800 22px/1 var(--display); letter-spacing: -.02em; color: var(--text); }
.mp-tile span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mp-tile.warn b { color: var(--gold); } .mp-tile.bad b { color: var(--red); }
.mp-split.ov { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.mp-col { display: flex; flex-direction: column; min-height: 0; }
.mp-col .mp-h.small { margin-top: 0; }
.mp-recent { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); padding: 6px 10px; }
.mp-help { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.mp-help p { margin: 0 0 8px; } .mp-help p:last-child { margin: 0; } .mp-help b { color: var(--text); }
.mp-announce { display: flex; gap: 8px; margin-bottom: 10px; }
.mp-announce[hidden] { display: none !important; }
.mp-announce input { flex: 1; height: 36px; margin: 0; }
.mp-money { gap: 6px; }
.mp-money input { width: 120px; height: 32px; margin: 0; padding: 0 10px !important; }
.mp-cur { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden; }
.mp-cur button { height: 30px; padding: 0 10px; border: 0; background: var(--panel3); color: var(--muted); font: 700 11.5px var(--font); cursor: pointer; }
.mp-cur button.sel { background: var(--accent); color: #fff; }
.mp-detail .modbtn.sel { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.mp-purge { margin: 0 0 8px; }
.mp-purge .minibtn.danger { color: var(--red) !important; border-color: rgba(255,77,94,.4) !important; }
.mp-reviews { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mp-rev { padding: 10px 12px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--panel); }
.mp-rev.open { border-color: rgba(255,201,64,.35); }
.mp-revh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-revt { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.mp-revact { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mp-revact input { flex: 1; min-width: 200px; height: 34px; margin: 0; }
.mp-revn { margin-top: 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .mp-split.ov { grid-template-columns: 1fr; grid-template-rows: auto; } .mp-recent { max-height: 220px; } }


/* ---------- wallpaper (Settings > Appearance > Background) ----------
   A fixed layer under the page. The <html> background stays as the base, the body goes
   transparent while a wallpaper is on, and the content paints over it as usual. The same
   gradients double as the thumbnails in the picker (.wallpv). */
.wall { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }
html[data-wall] body { background: transparent !important; }
.wall::after, .wallpv::after { content: ''; position: absolute; inset: 0; opacity: 0; }
html[data-wall="plain"] .wall, .wallpv[data-wall="plain"] { background: var(--bg); }
html[data-wall="midnight"] .wall, .wallpv[data-wall="midnight"] { background: radial-gradient(1200px 520px at 70% -10%, rgba(63,142,248,.22), transparent 60%), radial-gradient(800px 420px at 10% 15%, rgba(177,140,255,.14), transparent 60%), radial-gradient(900px 500px at 85% 85%, rgba(90,215,224,.10), transparent 60%), linear-gradient(180deg, #0e1220 0%, var(--bg) 55%); }
html[data-wall="midnight"] .wall::after { opacity: 1; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 70%); }
html[data-wall="aurora"] .wall, .wallpv[data-wall="aurora"] { background: radial-gradient(1000px 480px at 20% 0%, rgba(63,142,248,.3), transparent 60%), radial-gradient(900px 500px at 80% 10%, rgba(58,214,124,.16), transparent 60%), radial-gradient(1000px 600px at 50% 100%, rgba(177,140,255,.2), transparent 60%), var(--bg); }
html[data-wall="ember"] .wall, .wallpv[data-wall="ember"] { background: radial-gradient(1000px 500px at 80% -10%, rgba(255,201,64,.16), transparent 60%), radial-gradient(900px 520px at 10% 30%, rgba(255,90,110,.14), transparent 60%), linear-gradient(180deg, #14100f, var(--bg) 60%); }
html[data-wall="emerald"] .wall, .wallpv[data-wall="emerald"] { background: radial-gradient(1000px 520px at 75% -10%, rgba(58,214,124,.2), transparent 60%), radial-gradient(900px 520px at 15% 40%, rgba(90,215,224,.12), transparent 60%), linear-gradient(180deg, #0c1512, var(--bg) 60%); }
html[data-wall="stars"] .wall, .wallpv[data-wall="stars"] { background-color: #090b12; background-image: radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.4), transparent), radial-gradient(1.5px 1.5px at 200px 160px, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 300px 40px, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 380px 210px, rgba(255,255,255,.45), transparent), radial-gradient(1.2px 1.2px at 60px 200px, rgba(255,255,255,.4), transparent), radial-gradient(1200px 500px at 50% -20%, rgba(63,142,248,.16), transparent 60%); background-size: 420px 260px, 420px 260px, 420px 260px, 420px 260px, 420px 260px, 420px 260px, 100% 100%; }
.wallgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 6px; }
.wallopt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 5px; border-radius: 6px; border: 1px solid var(--border2); background: var(--panel2); cursor: pointer; color: var(--muted); font: 700 11px var(--font); text-align: left; }
.wallopt:hover { border-color: var(--accent2); color: var(--text); }
.wallopt.sel { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px rgba(63,142,248,.25); }
.wallopt .wallpv { position: relative; display: block; height: 52px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background-size: cover; }
.wallopt span { padding: 0 3px 2px; }

/* slots switched off (tiers.json: demoSlots=false and no slot games) */
html.no-slots [data-nav="slots"], html.no-slots .gcat[data-cat="slots"], html.no-slots .grow[data-cat="slots"], html.no-slots .gcard[data-cat="slots"], html.no-slots #slotspage, html.no-slots .grow-all[data-nav="slots"] { display: none !important; }


/* ---------- clean-up pass (2026-10-17): flatter surfaces, tighter radii, fewer effects ----------
   Modelled on the quieter competitor layouts: tone separates surfaces, not glows; one corner
   radius per element class; hover lifts the tile without a heavy shadow. */
:root, html[data-theme="dark"], html[data-theme="light"] { --r-btn: 4px; }
.gscroll .gcard:not(.scard):hover, .gscroll .gcard.scard:hover, .feat:hover, .feat:focus-visible { box-shadow: 0 8px 18px rgba(0,0,0,.26) !important; }
.gcard .art img { filter: none !important; }
.grow-head h3 { font: 700 20px/1.1 var(--display) !important; letter-spacing: -.01em !important; }
.grow-head .grow-n { font: 600 12px var(--font) !important; color: var(--faint) !important; }
.banner.b3 { background: var(--panel) !important; border: 1px solid var(--border) !important; }
.banner.b3::after { display: block !important; content: '' !important; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; mask-image: none !important; -webkit-mask-image: none !important; background-image: none;
  background: radial-gradient(520px 260px at 92% 0%, rgba(88,101,242,.34), transparent 65%), linear-gradient(90deg, var(--panel) 48%, rgba(20,22,29,.2) 100%); }
.banner.b3 .btag { background: #5865f2 !important; color: #fff !important; }
.banner.b3 h3, .banner.b3 p { color: var(--text) !important; }
.banner.b3 p { color: var(--muted) !important; }
.banner.b3 .bigbtn, .banner.b3 .bigbtn.discord { background: #5865f2 !important; color: #fff !important; }
.banner.b3 .bigbtn:hover, .banner.b3 .bigbtn.discord:hover { background: #6a76f4 !important; }
.banner.b3 .bart { opacity: .95; z-index: 1 !important; }
.cx-tabs { display: flex !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tab { white-space: nowrap !important; flex: 0 0 auto !important; }
@media (max-width: 700px) {
  .modfab { bottom: 12px; right: 12px; width: 32px; height: 32px; opacity: .85; }
  .gv-head { gap: 8px !important; }
  .gv-head .gv-title { font-size: 22px !important; }
}


/* ---------- lobby layout pass (2026-10-17): hero row with promo tiles, dense game grids, darker rail ----------
   The shape of the quieter competitor lobbies: one wide account card plus three promo tiles in a
   row, then every game visible at once in wrapping grids instead of side-scrolling rows. */
:root, html[data-theme="dark"], html[data-theme="light"] { --topH: 72px; --panel: #161a22; --panel2: #1b2029; --panel3: #232936; }
.rail { background: #10131a !important; }
.home-hero { margin: 0 0 14px !important; }
.home-hero h1 { font-size: 22px !important; }
.home-hero p { display: none !important; }
.banners { gap: 10px !important; margin-bottom: 22px !important; }
@media (min-width: 1281px) { .banners { grid-template-columns: minmax(320px, 1.3fr) repeat(3, minmax(0, 1fr)) !important; } .banner.b3 { grid-column: auto !important; grid-row: auto !important; } }
@media (min-width: 981px) and (max-width: 1280px) { .banners { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .banner.b2 { grid-column: 1 / -1 !important; } .banner.b3 { grid-column: auto !important; grid-row: auto !important; } }
@media (max-width: 980px) { .banners { grid-template-columns: 1fr 1fr !important; } .banner.b2 { grid-column: 1 / -1 !important; } .banner.b3 { grid-column: auto !important; grid-row: auto !important; } }
@media (max-width: 520px) { .banners { grid-template-columns: 1fr !important; } }
.banner.b3, .banner.promo { position: relative; min-height: 192px !important; padding: 16px !important; justify-content: flex-end !important; overflow: hidden; background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--text); text-decoration: none !important; cursor: pointer; transition: border-color .15s, transform .15s; }
.banner.b3:hover, .banner.promo:hover { border-color: var(--border2) !important; transform: translateY(-2px); }
.banner.b3 .btag, .banner.promo .btag { position: absolute; top: 12px; left: 12px; margin: 0 !important; z-index: 2; padding: 5px 7px 4px !important; }
.banner.b3 .btag { background: #5865f2 !important; color: #fff !important; }
.banner.b4 .btag { background: var(--accent) !important; color: #fff !important; }
.banner.b5 .btag { background: var(--gold) !important; color: #3a2600 !important; }
.banner.b3 h3, .banner.promo h3 { position: relative; z-index: 2; margin: 0 0 4px !important; max-width: 66% !important; font: 800 italic 24px/1 var(--display) !important; letter-spacing: -.03em !important; text-transform: uppercase; color: #fff !important; }
.banner.b3 h3 .em, .banner.promo h3 .em { font-style: italic; color: var(--accent2) !important; }
.banner.b5 h3 .em { color: var(--gold) !important; }
.banner.b3 p, .banner.promo p { position: relative; z-index: 2; margin: 0 !important; max-width: 64% !important; font: 700 10px/1.35 var(--font) !important; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72) !important; }
.banner.b3 .bigbtn { display: none !important; }
.banner.b3 .bart, .banner.promo .bart { position: absolute !important; right: -4px !important; left: auto !important; top: -8px !important; bottom: auto !important; width: 50% !important; max-width: 150px; max-height: 58%; height: auto !important; object-fit: contain; object-position: right top; filter: none !important; animation: none !important; z-index: 1; opacity: 1 !important; }
.banner.b3 .bart { width: 46% !important; top: 10px !important; right: 10px !important; max-height: 44%; }
@media (max-width: 520px) { .banner.b3, .banner.promo { min-height: 150px !important; } .banner.b3 .bart, .banner.promo .bart { max-width: 120px; } }
.banner.b3::after { background: radial-gradient(260px 200px at 85% 10%, rgba(88,101,242,.4), transparent 70%) !important; }
.banner.promo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block !important; }
.banner.b4::after { background: radial-gradient(260px 200px at 85% 10%, rgba(63,142,248,.38), transparent 70%); }
.banner.b5::after { background: radial-gradient(260px 200px at 85% 10%, rgba(255,201,64,.3), transparent 70%); }
/* game grids: every tile visible, no side-scrolling rows */
.grow .gscroll, .featured .feat-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important; gap: 20px 14px !important; overflow: visible !important; scroll-snap-type: none !important; padding: 2px 0 4px !important; mask-image: none !important; -webkit-mask-image: none !important; }
.grow-nav, .grow-all { display: none !important; }
.gscroll .gcard:not(.scard), .gscroll .gcard.scard, .feat { flex: none !important; width: auto !important; --gh: 172px; }
.gscroll .gcard.scard .sc-art { height: 120px !important; }
.grow { margin-bottom: 22px !important; }
.grow-head h3 i { display: none !important; }
.grow-head h3, .feat-h { font: 700 18px/1.1 var(--display) !important; }
.feat-h::before { display: none !important; }
@media (max-width: 980px) { .grow .gscroll, .featured .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 10px !important; } .gscroll .gcard:not(.scard), .feat { --gh: 150px; } }


/* ---------- animated scene wallpaper ("Night valley"): an SVG with drifting aurora, twinkling stars,
   rising sparks and blocky ridges, shown as a full-bleed image under the page ---------- */
.wall .wallimg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
html[data-wall="valley"] .wall { background: #0b0c10; }
html[data-wall="valley"] .wall .wallimg { display: block; opacity: 1; }
html[data-wall="valley"] .wall::after { opacity: 1; background: linear-gradient(180deg, rgba(11,12,16,0) 0%, rgba(11,12,16,.15) 55%, rgba(11,12,16,.7) 100%); }
.wallpv[data-wall="valley"] { background: url(/assets/wall/valley.svg?v=1) center top / cover #0b0c10; }


/* ---------- DonutFlip-shape pass 2 (2026-10-18): top nav, hero carousel, ticker, promo row,
   uniform blue tiles with live counters, case-card reveal, glints and ambient sprinkles ---------- */
:root, html[data-theme="dark"], html[data-theme="light"] { --brand: #3f8ef8; --brand-light: #6fb0ff; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes glint { 0%, 80%, 100% { left: -100%; } 90% { left: 150%; } }
@keyframes btn-pulse-glint { 0%, 80%, 100% { transform: scale(1); } 85% { transform: scale(1.06); } 90% { transform: scale(1); } }
@keyframes coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes pulse-red { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { opacity: .4; box-shadow: 0 0 12px 2px rgba(239,68,68,.45); } }
@keyframes keno-gem-pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes round-pill-in { 0% { opacity: 0; transform: translateX(42px) scale(.92); } 70% { opacity: 1; transform: translateX(-3px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes sprinkles { from { transform: translateY(0); } to { transform: translateY(520px); } }
/* top bar: nav links, live-chat pill, spinning coin, gold sign-in with a periodic glint */
.topnav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.topnav a { padding: 8px 12px; border-radius: 4px; color: var(--muted); font: 700 13px var(--font); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.topnav a:hover { color: var(--text); background: rgba(255,255,255,.05); text-decoration: none; }
#chattoggle { width: auto !important; padding: 0 10px 0 12px !important; gap: 8px; display: inline-flex; align-items: center; }
#chattoggle .ct-txt { font: 700 12px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
#chattoggle .ct-n { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--mono); color: var(--win); }
#chattoggle .ct-n::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win); }
.walletbtn .wcoin, .curbtn .ccoin { display: inline-grid; place-items: center; animation: coin-spin 2.5s linear infinite; transform-style: preserve-3d; }
.profilechip.signin { position: relative; overflow: hidden; background: var(--gold) !important; color: #3a2600 !important; font-weight: 800 !important; box-shadow: inset 0 0 0 1px rgba(255,201,64,.6) !important; }
.profilechip.signin::after, .bigbtn.gold::after, .daily-btn::after, .btn.gold::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -100%; width: 45%; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: glint 4.5s ease-in-out infinite; pointer-events: none; }
.bigbtn.gold, .btn.gold { position: relative; overflow: hidden; background: var(--gold) !important; color: #3a2600 !important; }
.daily-btn { position: relative; overflow: hidden; }
.btn, .bigbtn, .depobtn { box-shadow: inset 0 0 0 1px rgba(63,142,248,.45) !important; }
.btn.alt, .bigbtn.discord, .bigbtn.gold, .bigbtn.green { box-shadow: none !important; }
.hc-play { animation: btn-pulse-glint 3s ease-in-out infinite; }
/* hero row: account card + carousel */
@media (min-width: 981px) { .banners { grid-template-columns: minmax(320px, 1.1fr) minmax(0, 2.3fr) !important; } }
.hero-car { position: relative; min-height: 212px; overflow: hidden; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); }
.hc-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px 40% 24px 26px; opacity: 0; transform: translateX(14px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.hc-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.hc-slide::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px 220px at 88% 20%, rgba(63,142,248,.3), transparent 70%); }
.hc-slide .btag { position: relative; z-index: 1; align-self: flex-start; }
.hc-slide .btag.gold { background: var(--gold) !important; color: #3a2600 !important; }
.hc-slide h3 { position: relative; z-index: 1; margin: 0 !important; font: 800 clamp(22px, 2.1vw, 30px)/1.05 var(--display) !important; letter-spacing: -.02em !important; color: #fff !important; text-transform: none !important; }
.hc-slide h3 .em { color: var(--accent2) !important; font-style: normal; } .hc-slide h3 .em.gold { color: var(--gold) !important; }
.hc-slide p { position: relative; z-index: 1; margin: 0 !important; color: var(--muted) !important; font-size: 13px !important; max-width: 46ch !important; }
.hc-acts { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hc-acts .bigbtn { height: 36px !important; padding: 0 14px !important; font-size: 12px !important; }
.hc-slide .bart { position: absolute !important; right: 18px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); width: 32% !important; max-width: 220px; max-height: 86% !important; height: auto !important; object-fit: contain; z-index: 1; filter: none !important; animation: none !important; opacity: 1 !important; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--border2); background: rgba(11,12,16,.7); color: var(--text); font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.hc-arrow.prev { left: 10px; } .hc-arrow.next { right: 10px; }
.hero-car:hover .hc-arrow { opacity: 1; }
.hc-dots { position: absolute; left: 26px; bottom: 12px; z-index: 3; display: flex; gap: 6px; }
.hc-dots button { width: 18px; height: 4px; border-radius: 2px; border: 0; background: rgba(255,255,255,.22); cursor: pointer; padding: 0; transition: background .15s, width .15s; }
.hc-dots button.on { background: var(--accent); width: 28px; }
/* ticker */
.ticker { position: relative; overflow: hidden; height: 30px; margin: -12px 0 14px; border-radius: 4px; background: rgba(63,142,248,.14); border: 1px solid rgba(63,142,248,.28); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: inline-flex; align-items: center; height: 30px; white-space: nowrap; animation: marquee 26s linear infinite; }
.ticker-track span { font: 800 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); padding: 0 10px; }
.ticker-track i { color: var(--accent2); font-style: normal; opacity: .7; }
/* promo row */
.promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.promos .banner { grid-column: auto !important; grid-row: auto !important; min-height: 150px !important; font-family: var(--font); text-align: left; }
.promos .banner h3 { font-size: 28px !important; margin-bottom: 2px !important; }
.promos .banner p { max-width: 70% !important; }
.promos .banner .bart { width: 44% !important; max-width: 130px; top: -6px !important; }
/* game tiles: portrait 3:4, 12px corners, one flat blue, scrim, scale hover, live counter underneath */
.grow .gscroll, .featured .feat-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; gap: 34px 14px !important; }
.gscroll .gcard:not(.scard), .feat { height: auto !important; aspect-ratio: 3 / 4 !important; border-radius: 12px !important; overflow: visible !important; border: 0 !important; background: #0f2d5c !important; transition: transform .15s ease !important; }
.gscroll .gcard:not(.scard) .art, .feat img { border-radius: 12px; overflow: hidden; }
.gscroll .gcard:not(.scard) .art img { transition: transform .25s ease; }
.gscroll .gcard:not(.scard) .art::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.28) 100%); pointer-events: none; }
.gscroll .gcard:not(.scard):hover, .feat:hover, .feat:focus-visible { transform: scale(1.03) !important; box-shadow: none !important; outline: 0 !important; }
.gscroll .gcard:not(.scard):hover .art, .feat:hover img { outline: 1.5px solid var(--brand); outline-offset: -1.5px; }
.gscroll .gcard[data-playing]::after, .feat[data-playing]::after { content: attr(data-playing); position: absolute; left: 2px; top: 100%; margin-top: 7px; font: 600 11.5px var(--font); color: var(--muted); white-space: nowrap; padding-left: 12px; }
.gscroll .gcard[data-playing]::before, .feat[data-playing]::before { content: ''; position: absolute; left: 2px; top: 100%; margin-top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--win); box-shadow: 0 0 6px var(--win); }
.gscroll .gcard.lobby-reveal.in:hover { transform: scale(1.03) !important; }
.grow-head h3 { position: relative; padding-bottom: 14px; }
.grow-head h3::after { content: 'DonutFortune Originals'; position: absolute; left: 0; bottom: 0; font: 700 9px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
/* case cards: lighten, no scale, the icon leans out of the box */
.gscroll .gcard[data-cat="cases"]:hover { transform: none !important; filter: brightness(1.12); }
.gscroll .gcard[data-cat="cases"]:hover .art img { transform: scale(1.35) rotate(-10deg); }
/* live feed rows slide in; keno picks pop; errors pulse */
#lbbody tr.new { animation: round-pill-in .45s cubic-bezier(.2,.8,.2,1) both; }
#lbbody tr.new td { animation: inherit; }
.kn.pick { animation: keno-gem-pop .28s cubic-bezier(.2,.8,.2,1); }
.err:not(:empty) { animation: pulse-red 1s ease-in-out 2; }
/* ambient sprinkles drifting down the page background */
.wall::before { content: ''; position: absolute; left: 0; right: 0; top: -520px; bottom: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(ellipse 2px 5px at 12% 18%, rgba(63,142,248,.7) 55%, transparent 60%), radial-gradient(ellipse 2px 5px at 68% 44%, rgba(255,201,64,.6) 55%, transparent 60%), radial-gradient(ellipse 2px 5px at 34% 72%, rgba(90,215,224,.6) 55%, transparent 60%), radial-gradient(ellipse 2px 5px at 86% 86%, rgba(177,140,255,.6) 55%, transparent 60%), radial-gradient(ellipse 2px 5px at 52% 8%, rgba(255,255,255,.35) 55%, transparent 60%);
  background-size: 520px 520px; animation: sprinkles 46s linear infinite; }
body.reduce-fx .wall::before, body.reduce-fx .ticker-track, body.reduce-fx .walletbtn .wcoin, body.reduce-fx .hc-play { animation: none !important; }
.foot .fpf { color: var(--faint); font-size: 12px; margin-top: 8px; }
@media (max-width: 980px) {
  #chattoggle .ct-txt { display: none; }
  .hero-car { min-height: 200px; }
  .hc-slide { padding: 20px 38% 20px 18px; }
  .promos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .promos .banner h3 { font-size: 20px !important; } .promos .banner p { display: none !important; } .promos .banner .bart { width: 52% !important; }
  .grow .gscroll, .featured .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 10px !important; }
}
@media (max-width: 520px) { .promos { grid-template-columns: 1fr 1fr 1fr; } .promos .banner { min-height: 118px !important; padding: 10px !important; } .promos .banner h3 { font-size: 16px !important; } .promos .banner .btag { position: static; margin-bottom: auto !important; } }

/* pass-2 fixes: header room when signed in, phone carousel and promo sizing */
@media (max-width: 1640px) { #chattoggle .ct-txt { display: none; } }
.walletbtn .wcoin, .curbtn .ccoin { animation-duration: 3.2s; }
@media (max-width: 980px) {
  .hero-car { min-height: 240px; }
  .hc-slide { justify-content: flex-start; padding: 16px 36% 16px 16px; gap: 6px; }
  .hc-slide h3 { font-size: 20px !important; }
  .hc-slide p { font-size: 12px !important; }
  .hc-acts { margin-top: 6px; } .hc-acts .bigbtn { height: 32px !important; padding: 0 12px !important; font-size: 11.5px !important; }
  .hc-slide .bart { width: 30% !important; }
  .hc-dots { bottom: 8px; left: 16px; }
}
@media (max-width: 520px) {
  .promos .banner .bart { display: none !important; }
  .promos .banner .btag { font-size: 7px !important; padding: 4px 5px 3px !important; white-space: nowrap; }
  .promos .banner { min-height: 104px !important; justify-content: space-between !important; }
}


/* ---------- the left game rail is gone; Games and Rewards are dropdowns in the top bar ----------
   The rail markup stays in the page (display:none) because the lobby code still reads its nodes. */
.rail, .railfold, .iconbtn.railtoggle { display: none !important; }
.app, body.rail-collapsed .app { grid-template-columns: minmax(0, 1fr) var(--chatW) !important; }
body.chat-hidden .app, body.theater .app { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 1100px) { .app, body.rail-collapsed .app { grid-template-columns: minmax(0, 1fr) !important; } }
.top { gap: 10px !important; }
.top-brand { display: inline-flex !important; order: -1; align-items: center; gap: 9px; margin-right: 4px; color: var(--text); text-decoration: none; font: 800 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.top-brand:hover { text-decoration: none; }
.top-brand img { width: 30px; height: 30px; border-radius: 7px; }
.top-brand b { color: var(--accent2); font-weight: 800; }
.topnav { gap: 6px; margin-left: 0; }
.dd { position: relative; }
.ddbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px 0 10px; border-radius: 4px; border: 0; background: rgba(63,142,248,.13); color: var(--text); font: 700 13px var(--font); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(63,142,248,.45); transition: filter .12s, background .12s; }
.ddbtn svg { width: 17px; height: 17px; color: var(--accent2); }
.ddbtn .caret { font-style: normal; font-size: 11px; color: var(--muted); transition: transform .15s; }
.ddbtn.gold { background: rgba(255,201,64,.13); box-shadow: inset 0 0 0 1px rgba(255,201,64,.45); }
.ddbtn.gold svg { color: var(--gold); }
.ddbtn:hover, .dd.open .ddbtn { filter: brightness(1.18); }
.dd.open .ddbtn .caret { transform: rotate(180deg); }
.ddmenu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 90; display: none; min-width: 260px; padding: 6px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--border2); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.dd.open .ddmenu { display: block; animation: ddIn .14s ease-out; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#ddgamesmenu { width: 540px; max-width: calc(100vw - 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.dd.open #ddgamesmenu { display: grid; }
#ddgamesmenu .dd-lobby { grid-column: 1 / -1; border-bottom: 1px solid var(--border); margin-bottom: 4px; border-radius: 4px 4px 0 0; }
.ddmenu button, .ddmenu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; color: var(--text); font: 700 13px var(--font); text-align: left; cursor: pointer; text-decoration: none; }
.ddmenu button:hover, .ddmenu a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.ddmenu button.sel { background: rgba(63,142,248,.16); color: var(--accent2); }
.ddmenu small { display: block; margin-top: 1px; font: 500 11px var(--font); color: var(--muted); }
.ddmenu .dd-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: var(--panel3); color: var(--accent2); font-size: 14px; flex: 0 0 26px; }
.ddmenu .dd-ico svg { width: 15px; height: 15px; }
.ddmenu .dd-lobby small { margin-left: auto; }
.ddrewards { min-width: 280px; }
.ddrewards button, .ddrewards a { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 1100px) { .search { flex: 0 1 220px; } }
@media (max-width: 760px) {
  .top { gap: 6px !important; }
  .top-brand span { display: none; }
  .ddbtn { height: 34px; padding: 0 9px; font-size: 12px; }
  .ddbtn svg { display: none; }
  .ddmenu { position: fixed; left: 8px; right: 8px; top: calc(var(--topH) + 6px); min-width: 0; width: auto; max-height: 70vh; overflow: auto; }
  #ddgamesmenu { width: auto; }
}

/* the dropdown nav replaces the rail, so it stays at every width; the search box yields first */
.topnav { display: flex !important; }
@media (max-width: 1340px) { .search { display: none !important; } }
@media (min-width: 1341px) { .top .search { display: flex !important; } }
.ddmenu a, .ddmenu button { text-transform: none; }
@media (max-width: 600px) {
  .ddbtn { width: 38px; height: 36px; padding: 0 !important; justify-content: center; }
  .ddbtn svg { display: inline-block; width: 18px; height: 18px; }
  .ddbtn .lbl, .ddbtn .caret { display: none; }
  .curbtn { display: none !important; }
  .topnav { gap: 4px; }
}
@media (max-width: 600px) { .setbtn { display: none !important; } .top-right { gap: 6px !important; } }

/* ---------- full-width header + centred, roomier lobby ----------
   The header is now a direct child of .app and spans both columns; the chat
   starts under it. Everything in the main column is capped and centred. */
.app { grid-template-rows: var(--topH) minmax(0, 1fr) !important; }
.top { grid-column: 1 / -1 !important; grid-row: 1 !important; width: 100%; }
.shell { grid-column: 1; grid-row: 2; min-width: 0; }
.chat { grid-column: 2; grid-row: 2; top: var(--topH) !important; height: calc(100vh - var(--topH)) !important; }
@media (max-width: 1100px) { .chat { top: 0 !important; height: 100vh !important; } }
.main { max-width: 1280px !important; margin: 0 auto !important; width: 100%; padding: 30px 36px 64px !important; }
.home-hero { margin-bottom: 18px !important; }
.banners { gap: 18px !important; margin-bottom: 30px !important; }
.ticker { margin: 0 0 26px !important; }
.promos { gap: 16px !important; margin-bottom: 36px !important; }
.secthead, .featured .secthead { margin-bottom: 16px !important; }
.featured, .grow { margin-bottom: 40px !important; }
.featured .feat-grid, .grow .gscroll { gap: 18px !important; }
@media (min-width: 1281px) { .featured .feat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }
.top { padding: 0 28px !important; gap: 16px !important; }
.top-brand { margin-right: 10px; }
.search { flex: 0 1 240px; }
.top-right { gap: 12px !important; }
@media (max-width: 1500px) { #dclogintxt { display: none; } .dcloginbtn { padding: 0 10px !important; } }

/* carousel controls live bottom-right together, never over the headline */
.hc-arrow { position: static !important; transform: none !important; opacity: 1 !important; width: 26px; height: 26px; font-size: 10px; }
.hc-ctl { position: absolute; right: 16px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.hc-ctl .hc-dots { position: static !important; margin: 0 6px !important; }
.hc-slide { padding-right: 36% !important; }

/* account card: avatar, name and level on one line, XP bar, two reward buttons, a quiet deposit line */
.banner.b2.acct { padding: 20px 22px 18px !important; }
.lvl-row { gap: 12px; }
.lvl-av { width: 46px !important; height: 46px !important; border-radius: 6px !important; }
.lvl-name { font: 800 17px var(--display) !important; letter-spacing: -.01em; }
.lvl-hello small { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lvl-badge { font: 800 11px var(--font) !important; letter-spacing: .06em; padding: 5px 8px 4px !important; border-radius: 4px !important; background: rgba(63,142,248,.16) !important; color: var(--accent2) !important; }
.lvl-bar { height: 8px; margin: 16px 0 8px; border-radius: 4px; border: 0; background: rgba(255,255,255,.07); }
.lvl-fill { border-radius: 4px; }
.lvl-sub { font-size: 12px; }
.acct-level .daily-btn { margin-top: 14px; height: 44px; font: 800 12.5px var(--font) !important; letter-spacing: .04em; text-transform: uppercase; }
.acct-level .daily-btn[disabled] { text-transform: none; letter-spacing: 0; font-weight: 700 !important; }
.rake-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; margin-top: 8px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--border2); background: var(--panel3); color: var(--text); font: 700 12.5px var(--font); cursor: pointer; }
.rake-btn b { font: 800 13px var(--mono); color: var(--gold); }
.rake-btn.ready { border-color: rgba(58,214,124,.5); box-shadow: inset 0 0 0 1px rgba(58,214,124,.2); }
.rake-btn.ready b { color: var(--win); }
.rake-btn:hover { filter: brightness(1.1); }
.acct-depo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); row-gap: 8px; }
.acct-depo-l { font-size: 11px; letter-spacing: .08em; }
.acct-depo-cmd { font: 600 12.5px var(--mono); padding: 9px 11px; background: rgba(255,255,255,.05) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--r-btn); }
.acct-depo-cmd.off { font: 500 12.5px var(--font); color: var(--muted) !important; background: none !important; border: 0 !important; padding: 0; white-space: normal; }
.acct-depo-btn { height: 30px; padding: 0 12px; font-size: 12px; }

/* rakeback under the free daily cases on the Cases page */
.cx-rake { margin-top: 28px; }
.cx-rake .rb-grid { margin-top: 12px; }
.cx-rake .rb-card { border-radius: var(--r-card); }
#topRewards { cursor: pointer; }
/* picture wallpapers (built-in scenes and anything dropped into assets/wall) */
html[data-wall="img"] .wall { background: #0b0c10; }
html[data-wall="img"] .wall .wallimg { display: block; opacity: 1; }
html[data-wall="img"] .wall::after { opacity: 1; background: linear-gradient(180deg, rgba(11,12,16,.08) 0%, rgba(11,12,16,.28) 55%, rgba(11,12,16,.78) 100%); }
.wallpv[data-wall="img"] { background-size: cover; background-position: center top; background-color: #0b0c10; }
.wallgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
.wallopt .wallpv { height: 64px; }
.top-right > #walletwrap:not([hidden]) { margin-left: auto !important; margin-right: 0 !important; }
@media (max-width: 760px) { .hc-ctl .hc-arrow { display: none !important; } .hc-ctl { right: 12px; bottom: 10px; } .hc-slide { padding-bottom: 34px !important; } }


/* ---------- numbers: clean tabular figures everywhere, monospace only for real code ----------
   --mono used to be JetBrains Mono, which made every amount look like a terminal. It is now the
   body face with lining tabular numerals; anything that is genuinely code uses --code. */
body { font-variant-numeric: tabular-nums lining-nums; font-synthesis: none; }
code, kbd, pre, .cmd, .cmdrow .cmd, .acct-depo-cmd:not(.off), .auth-tip .cmd, .guide .cmd, .np-code code, .wd-code-row input, .auth-code, #vmcodein, #loccode, .seed, .hash, .fair-seed, .fair-hash, .fp-seed, .fp-hash, .txid, .mono-code { font-family: var(--code) !important; letter-spacing: 0; }
#walletbal, .walletbtn, .cm-v, .cx-coin + *, .rb-amt, .tile .v, .bal, .amt, .cdr2-amt, .cdr2-paid, .lvl-badge, .tx-amt, .feed td, .wdr-main b { font-variant-numeric: tabular-nums lining-nums; }
.walletbtn { font-weight: 700 !important; letter-spacing: -.01em; }
.rb-amt { font: 700 20px var(--mono) !important; letter-spacing: -.01em; }
.tile .v { letter-spacing: -.02em; }