/* DonutFortune site layout (2026-09-25)
   Loaded after casino.html's inline styles and games.css, so it has the final say.
   Layout follows the common DonutSMP casino format: menu on the left, logo in
   the middle of the top bar, chat on the right, dense game tiles. */

:root, html[data-theme="dark"] {
  --bg: #0f1326; --bg2: #121731; --panel: #161b34; --panel2: #1c2240; --panel3: #242b4d;
  --border: rgba(255,255,255,.06); --border2: rgba(255,255,255,.11);
  --text: #eef1fb; --muted: #9aa3c4; --faint: #6b7396;
  --accent: #4f7cff; --accent2: #3d68ec; --accent-dk: #1c2a5c;
  --lux: #4f7cff; --lux2: #6a90ff; --lux-ink: #fff; --lux-line: rgba(79,124,255,.4); --lux-soft: rgba(79,124,255,.13);
  --primary: #4f7cff; --primary2: #6a90ff; --primary-ink: #fff;
  --gold: #f6b93b; --gold2: #e3a21f; --win: #37d67a; --red: #ff5a6e;
  --font: 'Rubik', system-ui, -apple-system, sans-serif;
  --display: 'Rubik', system-ui, -apple-system, sans-serif;
  --railW: 250px; --chatW: 320px; --topH: 68px;
  --r-card: 10px; --r-btn: 8px;
}
html[data-theme="light"] {
  --bg: #eef1f8; --bg2: #e7ebf5; --panel: #ffffff; --panel2: #f4f6fb; --panel3: #e9edf6;
  --text: #121631; --muted: #56607e; --faint: #7b84a3;
  --border: rgba(18,22,49,.08); --border2: rgba(18,22,49,.15);
}
body { font-family: var(--font); background: var(--bg); letter-spacing: 0; }
button, input, select, textarea { font-family: var(--font); }

/* ---------- shared bits ---------- */
.btn, .bigbtn, .profilechip.signin, .depobtn, .dcloginbtn, .grow-all, .topslots {
  font-family: var(--font); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  border-radius: var(--r-btn) !important; box-shadow: none !important;
}
.bigbtn, .profilechip.signin { background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.bigbtn:hover, .profilechip.signin:hover { background: var(--lux2) !important; }
.bigbtn.discord, .dcloginbtn:not(.linked) { background: #5865f2 !important; color: #fff !important; }

/* ---------- top bar ---------- */
.top {
  height: var(--topH); padding: 0 18px; gap: 10px;
  background: var(--panel) !important; border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.topslots {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; cursor: pointer;
  color: #fff; background: var(--panel3); border: 1px solid var(--border2); font-size: 12.5px;
}
.topslots svg { width: 17px; height: 17px; }
.topslots:hover, body.in-slots .topslots { background: var(--accent); border-color: transparent; }
.top .search { max-width: 240px; }
.top .search input { height: 40px; border-radius: var(--r-btn); background: var(--bg2) !important; border: 1px solid var(--border) !important; }
.top-brand {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0;
  text-decoration: none; color: var(--text);
}
.top-brand img { width: 34px; height: 34px; border-radius: 9px; }
.top-brand span { font-family: var(--font); font-weight: 900; font-size: 21px; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.top-brand b { color: var(--accent); font-weight: 900; }
.top-right { margin-left: 0 !important; flex: 0 0 auto; }
.top .walletgroup:not([hidden]) { position: static !important; transform: none !important; margin: 0 !important; }
.walletgroup { border-radius: var(--r-btn) !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; overflow: hidden; height: 40px; }
.walletbtn { color: var(--text) !important; font-weight: 700 !important; font-size: 15px !important; }
.walletbtn .wcoin { background: var(--gold) !important; color: #3a2600 !important; }
.depobtn { background: var(--accent) !important; color: #fff !important; border: 0 !important; font-size: 12px; }
.depobtn:hover { background: var(--lux2) !important; }
.profilechip.signin { height: 40px; padding: 0 22px !important; font-size: 12.5px; }
.dcloginbtn { height: 40px; padding: 0 16px !important; font-size: 12.5px !important; }
.iconbtn { border-radius: var(--r-btn) !important; }

/* ---------- left menu ---------- */
.rail { background: var(--panel) !important; border-right: 1px solid var(--border) !important; }
.rail-brand { display: none !important; }
.railfold { top: 16px !important; }
.rail-nav { padding: 14px 12px 12px !important; }
.rail-sec {
  display: flex !important; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 8px 10px !important;
  font-family: var(--font); font-size: 13px !important; font-weight: 800 !important; letter-spacing: .04em !important;
  color: var(--text) !important; opacity: 1 !important; text-transform: uppercase;
}
.rail-sec::after { content: ''; flex: 1; height: 1px; background: var(--border2); margin-left: 6px; }
.rail-sec:first-of-type { margin-top: 4px; }
.rn, .rail .tab {
  border-radius: var(--r-btn) !important; padding: 9px 10px !important; gap: 12px !important;
  font-size: 14px !important; font-weight: 600 !important; color: var(--muted) !important; border: 0 !important;
}
.rn:hover, .rail .tab:hover { background: rgba(255,255,255,.04) !important; color: var(--text) !important; }
.rn.on, body.in-game .rail .tab.sel { background: var(--lux-soft) !important; color: #fff !important; }
.rn.on::before, body.in-game .rail .tab.sel::before { display: none !important; }
.rn svg, .rail .tab .gi { width: 20px !important; height: 20px !important; padding: 0 !important; background: none !important; filter: none !important; opacity: .95 !important; }
.rbadge { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: #fff; margin-left: auto; }
.rail-foot { border-top: 1px solid var(--border); }

/* ---------- main column ---------- */
.main { max-width: 1400px !important; padding: 26px 24px 30px !important; }
.home-hero { margin: 4px 0 20px; }
.home-hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.1; font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; color: var(--text); }
.home-hero h1 em { font-style: normal; color: var(--accent); }
.home-hero p { margin: 0; max-width: 680px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

.banners { grid-template-columns: 1.15fr 1.5fr 1fr !important; gap: 14px !important; margin-bottom: 30px !important; }
.banner {
  order: 0; border-radius: var(--r-card) !important; min-height: 176px !important; padding: 22px 36% 22px 22px !important;
  background: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: none !important; animation: none !important;
}
.banner::before, .banner::after { display: none !important; }
.banner .bart { animation: none !important; }
.banner.b3 { order: 1; background: linear-gradient(120deg, #3b3fd8 0%, #6a4df0 55%, #9a5cf6 100%) !important; border: 0 !important; }
.banner.b3 .btag, .banner.b3 p { color: rgba(255,255,255,.85) !important; }
.banner.b3 h3, .banner.b3 h3 .em { color: #fff !important; }
.banner.b3 .bigbtn.discord { background: #fff !important; color: #3b3fd8 !important; }
.banner.b2 { order: 2; }
.banner h3 { font-size: 19px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0 !important; }
.banner h3 .em { color: var(--accent) !important; }
.banner .btag { color: var(--gold) !important; font-size: 11px !important; letter-spacing: .08em !important; font-weight: 700 !important; }
.banner .btag::after { display: none !important; }
.refstrip { border-radius: var(--r-card) !important; background: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }

/* featured tiles */
.featured { margin: 0 0 30px; }
.feat-h, .secthead h2, .grow-head h3, .lb-head h2, .about h2, .sp-head h2 {
  font-family: var(--font) !important; font-size: 18px !important; font-weight: 800 !important;
  letter-spacing: 0 !important; color: var(--text) !important; margin: 0 0 14px;
}
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.feat {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r-card);
  background: radial-gradient(120% 90% at 50% 20%, #2b52d6 0%, #16287a 55%, #0e1640 100%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.4); }
.feat-name {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-weight: 900; font-size: 22px;
  text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 #1a2f8f, 0 4px 14px rgba(0,0,0,.6);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* category rows + cards */
.secthead { border-bottom: 0 !important; padding-bottom: 0 !important; }
.secthead h2 svg { display: none !important; }
.gcat, .lbtab {
  font-family: var(--font); font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .03em;
  border-radius: var(--r-btn) !important; background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--muted) !important;
}
.gcat.sel, .lbtab.sel { background: var(--accent) !important; color: #fff !important; border-color: transparent !important; }
.grow-head h3 i { background: var(--accent) !important; box-shadow: none !important; width: 4px !important; }
.grow-nav button { border-radius: var(--r-btn) !important; background: var(--panel) !important; }
.gcard { border-radius: var(--r-card) !important; box-shadow: none !important; }
.gcard .badge { border-radius: 5px !important; font-size: 10px !important; letter-spacing: .05em; }

/* live bets */
.livebets { border-radius: var(--r-card) !important; background: var(--panel) !important; border: 1px solid var(--border) !important; margin-top: 10px; }
.lbt th { font-size: 11px !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--faint) !important; }

/* about + faq */
.about { margin: 36px 0 0; padding: 26px 26px 18px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--border); }
.about p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 12px; max-width: 900px; }
.faq { margin-top: 18px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 14px 2px; font-weight: 700; font-size: 14.5px; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; font-weight: 500; color: var(--faint); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 14px; }
#gameview:not([hidden]) ~ .about, #slotspage:not([hidden]) ~ .about { display: none; }

/* footer */
.foot { margin-top: 30px !important; padding: 28px 4px 10px !important; }
.foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; }
.foot h4 { color: var(--text) !important; font-size: 12px !important; letter-spacing: .08em !important; }
.foot .fbrand { font-family: var(--font) !important; font-weight: 900 !important; text-transform: uppercase; }

/* ---------- slots page ---------- */
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px !important; }
.sp-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-btn); background: var(--panel); border: 1px solid var(--border); }
.sp-tabs button {
  font-family: var(--font); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
  padding: 10px 22px; border-radius: 6px; border: 0; background: none; color: var(--muted); cursor: pointer;
}
.sp-tabs button:hover { color: var(--text); }
.sp-tabs button.sel { background: var(--panel3); color: var(--gold); }
.sp-prov, .sp-search { height: 44px; border-radius: var(--r-btn) !important; background: var(--panel) !important; border: 1px solid var(--border) !important; }
.sp-search { flex: 1 1 260px; }
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 14px !important; }
.sp-kicker { font-size: 12px !important; font-weight: 800 !important; font-style: italic; letter-spacing: .04em !important; color: var(--muted) !important; }
.sp-head h2 { font-size: 24px !important; font-style: italic; margin: 0 !important; }
.sp-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.sp-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
.sp-grid .scard, .gscroll .scard { border-radius: var(--r-card) !important; overflow: hidden; }

.sp-grid .scard .sc-art img { object-fit: cover; width: 100%; height: 100%; }
.sp-foot { color: var(--faint); font-size: 12px; margin-top: 18px; }

/* slot player */
.demoslot .ds-box { border-radius: var(--r-card) !important; background: var(--panel) !important; }
.demoslot .ds-note { color: var(--faint); font-size: 12px; }

/* ---------- chat ---------- */
.chat { background: var(--panel) !important; border-left: 1px solid var(--border) !important; }
.chat-head { font-family: var(--font); font-weight: 800; letter-spacing: .04em; }

/* ---------- responsive ---------- */
@media (max-width: 1500px) { .top .search { display: none; } }
@media (max-width: 1420px) {
  :root, html[data-theme="dark"], html[data-theme="light"] { --railW: 76px; }
  .rail-sec { justify-content: center; padding: 8px 0 !important; }
  .rail-sec { font-size: 0 !important; margin: 8px 0 !important; padding: 0 !important; }
  .rail-sec::after { margin: 0 10px; }
  .rbadge { display: none !important; }
  .banners { grid-template-columns: 1fr 1fr !important; }
  .banner.b2 { display: none; }
}
@media (max-width: 980px) {
  .top-brand span { font-size: 17px; }
  .topslots { padding: 0 12px; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
  :root, html[data-theme="dark"], html[data-theme="light"] { --topH: 60px; }
  .top { padding: 0 12px; }
  .topslots { display: none; }
  .top-brand { justify-content: flex-start; }
  .top-brand span { display: none; }
  .home-hero h1 { font-size: 23px; }
  .banners { grid-template-columns: 1fr !important; }
  .banner.b2 { display: flex; }
  .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .feat-name { font-size: 15px; bottom: 8px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .sp-tabs button { padding: 9px 12px; font-size: 12px; }
  .about { padding: 18px 16px 10px; }
}

/* banner fit */
.banner.b1 { padding-right: 30% !important; }
.banner.b1 .bart { width: 28% !important; }
.banner.b1 h3 { font-size: 17px !important; }
.banner.b2 { padding-right: 22px !important; }
.banner.b2 .bart { width: 34% !important; top: 8px !important; bottom: auto !important; height: 45% !important; opacity: .9; }
.banner.b2 .btag, .banner.b2 .lvl-row { position: relative; z-index: 1; }
.banner.b2 .daily-btn { max-width: 100% !important; width: 100% !important; }

/* lobby rows: DonutClash-size tiles, art only */
.gscroll { gap: 10px !important; }
.gscroll .gcard { flex: 0 0 150px !important; width: 150px !important; aspect-ratio: 3 / 4 !important; border-radius: var(--r-card) !important; border: 0 !important;
  background: radial-gradient(120% 90% at 50% 20%, #2b52d6 0%, #16287a 55%, #0e1640 100%) !important; }
.gscroll .gcard.xwide { flex-basis: 310px !important; width: 310px !important; }
.gscroll .gcard .art { position: absolute !important; inset: 0 !important; height: auto !important; }
.gscroll .gcard .art img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
.gcard .gshadow { display: none !important; }
.gcard[data-game="cases"] .gshadow, .gcard[data-game="blackjack"] .gshadow, .gcard[data-game="limbo"] .gshadow, .gcard[data-game="bjtables"] .gshadow, .gcard[data-game="cfduel"] .gshadow { display: flex !important; background: linear-gradient(180deg, transparent 50%, rgba(8,12,34,.85)) !important; }
.gcard .gplay { display: none !important; }
.gcard .badge { top: 8px !important; left: 8px !important; background: var(--gold) !important; color: #3a2600 !important; border: 0 !important; }
.gcard .badge.new { background: var(--accent) !important; color: #fff !important; }
@media (max-width: 700px) { .gscroll .gcard { flex-basis: 118px !important; width: 118px !important; } .gscroll .gcard.xwide { flex-basis: 240px !important; width: 240px !important; } }
@media (max-width: 760px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } }

/* signed in: the wallet takes the room the wordmark used */
.top-brand { overflow: hidden; min-width: 40px; }
@media (max-width: 1760px) {
  .top:has(#walletwrap:not([hidden])) .top-brand span { display: none; }
  .top:has(#walletwrap:not([hidden])) #pfpname, .top:has(#walletwrap:not([hidden])) .lvchip { display: none; }
  .top:has(#walletwrap:not([hidden])) .dcloginbtn span { display: none; }
  .top:has(#walletwrap:not([hidden])) .dcloginbtn { padding: 0 12px !important; }
}
@media (max-width: 1250px) { .top:has(#walletwrap:not([hidden])) .topslots { display: none; } }
@media (max-width: 1100px) { .top:has(#walletwrap:not([hidden])) .vaultbtn { display: none; } }
@media (max-width: 600px) {
  .top:has(#walletwrap:not([hidden])) .themebtn, .top:has(#walletwrap:not([hidden])) .dcloginbtn { display: none !important; }
  .top-right { gap: 6px !important; }
}
html[data-theme="light"] .topslots { color: var(--text); background: var(--panel2); border-color: var(--border2); }
html[data-theme="light"] .topslots:hover, html[data-theme="light"] body.in-slots .topslots { color: #fff; background: var(--accent); }
html[data-theme="light"] .sp-tabs button.sel { background: var(--panel3); color: #9a6a00; }

.scard.house .sc-real { position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: var(--win); color: #042312; }
.scard .sc-demo { position: absolute; top: 8px; left: 8px; z-index: 3; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; background: rgba(12, 16, 27, .82); color: #e7eafa; border: 1px solid rgba(255, 255, 255, .2); }


/* Slots library: square covers and quiet, readable metadata. */
#slotspage { --slot-accent: #7953f5; padding-top: 30px; }
.sp-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sp-heading h1 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.1; letter-spacing: -.045em; font-weight: 750; margin: 0 0 9px; color: var(--text); }
.sp-heading p { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; }
.sp-back { background: transparent; color: var(--muted); padding: 10px 0 10px 12px; border: 0; font-size: 12px; font-weight: 500; cursor: pointer; }
.sp-back:hover { color: var(--text); }
#slotspage .sp-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(175px, .48fr); gap: 18px; margin-bottom: 24px; }
#slotspage .sp-search { max-width: none; width: auto; height: 48px; border-radius: 10px !important; background: var(--panel) !important; border-color: var(--border2) !important; }
#slotspage .sp-search input { font-size: 14px; font-weight: 400; }
#slotspage .sp-search:focus-within { border-color: var(--slot-accent) !important; box-shadow: 0 0 0 3px #7953f51a; }
#slotspage .sp-prov { width: auto; margin: 0; height: 48px; padding: 0 10px 0 14px; border-radius: 10px !important; border-color: var(--border2) !important; }
#slotspage .sp-prov select { width: 100%; font-size: 13px; font-weight: 500; }
#slotspage .sp-tabs { justify-self: start; padding: 4px; gap: 3px; border-radius: 10px !important; background: var(--panel); border: 1px solid var(--border); }
#slotspage .sp-tabs button { padding: 10px 18px; font-size: 13px; line-height: 20px; font-weight: 500; text-transform: none; letter-spacing: 0; border-radius: 7px; }
#slotspage .sp-tabs button.sel { background: var(--slot-accent); color: #fff; }
#slotspage .sp-count { align-self: center; justify-self: end; color: var(--faint); font-weight: 400; }
#slotspage .sp-head[hidden] { display: none !important; }
.sp-grid { gap: 24px 18px !important; }
.sp-grid .scard, .grow[data-cat="slots"] .scard { aspect-ratio: auto !important; display: flex; flex-direction: column; min-width: 0; overflow: visible; background: transparent !important; border: none; box-shadow: none; border-radius: 0 !important; }
.sp-grid .scard::after, .grow[data-cat="slots"] .scard::after { display: none; }
.sp-grid .scard:hover, .sp-grid .scard:focus-visible, .grow[data-cat="slots"] .scard:hover { transform: translateY(-3px); box-shadow: none; }
.sp-grid .scard:focus-visible .sc-art, .grow[data-cat="slots"] .scard:focus-visible .sc-art { outline: 3px solid #9b80ff; outline-offset: 3px; }
.sp-grid .scard .sc-art, .grow[data-cat="slots"] .scard .sc-art { position: relative; flex: none; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 14px; mask-image: none; -webkit-mask-image: none; background: var(--c, var(--panel)); box-shadow: 0 5px 18px #0002; }
.sp-grid .scard .sc-art img, .grow[data-cat="slots"] .scard .sc-art img { transition: transform .3s ease; }
.sp-grid .scard .sc-band, .grow[data-cat="slots"] .scard .sc-band { position: relative; flex: 1; padding: 11px 1px 0; background: transparent; text-align: left; }
.sp-grid .scard .sc-band b, .grow[data-cat="slots"] .scard .sc-band b { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; text-transform: none; text-shadow: none; color: var(--text); -webkit-line-clamp: 2; }
.sp-grid .scard .sc-band small, .grow[data-cat="slots"] .scard .sc-band small { margin-top: 4px; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--muted); }
.sp-grid .scard .sc-play, .grow[data-cat="slots"] .scard .sc-play { top: 38%; background: #7953f5; color: #fff; }
.sp-grid .scard .sc-new { top: 9px; left: 9px; background: #7953f5; color: #fff; font-size: 9px; border-radius: 5px; }
.grow[data-cat="slots"] .gscroll { gap: 18px !important; mask-image: none; -webkit-mask-image: none; }
.grow[data-cat="slots"] .gscroll .gcard { flex: 0 0 calc((100% - 54px) / 4) !important; width: calc((100% - 54px) / 4) !important; }
#slotspage .sp-foot { margin-top: 32px; font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) {
  #slotspage { padding-top: 22px; }
  .sp-heading { margin-bottom: 22px; gap: 12px; }
  .sp-heading p { font-size: 14px; }
  .sp-back { max-width: 90px; text-align: right; }
  #slotspage .sp-bar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #slotspage .sp-tabs { grid-row: 3; width: 100%; display: flex; }
  #slotspage .sp-tabs button { flex: 1; padding: 9px 12px; }
  #slotspage .sp-count { display: none; }
  .sp-grid { gap: 22px 14px !important; }
  .sp-grid .scard .sc-band b { font-size: 13px; }
  .grow[data-cat="slots"] .gscroll { gap: 14px !important; }
  .grow[data-cat="slots"] .gscroll .gcard { flex-basis: calc((100% - 14px) / 2) !important; width: calc((100% - 14px) / 2) !important; }
}
@media (prefers-reduced-motion: reduce) {
 .sp-grid .scard, .sp-grid .scard .sc-art img { transition: none; }
}

/* ---------- game screen: DonutClash layout ----------
   The game on top, a slim "provably fair" strip, then the controls underneath with
   Play first, the game's own options, then the bet amount and Manual/Auto last. */
#gameview .gv { display: flex !important; flex-direction: column; gap: 12px !important; }
#gameview .gv-stagewrap { order: 0; }
#gameview .gv-fairstrip { order: 1; display: flex; justify-content: flex-end; align-items: center; padding: 10px 16px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--border); }
#gameview .gv-fairstrip button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; color: var(--text); font: 800 11px var(--font); letter-spacing: .05em; text-transform: uppercase; }
#gameview .gv-fairstrip button svg { width: 20px; height: 20px; color: var(--win); }
#gameview .gv-fairstrip button:hover { color: var(--win); }
#gameview .gv-side {
  order: 2; position: static !important; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px 18px !important; border-radius: var(--r-card) !important; box-shadow: none !important;
  background: var(--panel) !important; border: 1px solid var(--border) !important;
}
#gameview .gv-side > #playbtn { order: -2; margin: 0 0 10px !important; }
#gameview .gv-side > #gvactions { order: -1; }
#gameview .gv-side > #gvctl { order: 1; }
#gameview .gv-side > #gvbet { order: 2; display: flex; flex-direction: column; }
#gameview .gv-side > #gvbet .modeswitch { order: 9; margin: 14px 0 0 !important; }
#gameview .gv-side > #gameErr { order: 3; }
#gameview .gv-side > #odds { order: 4; }
#gameview .gv-side label { font: 700 12.5px var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; margin: 12px 0 8px !important; }
#gameview .gv-side label::first-letter { text-transform: uppercase; }
#gameview #playbtn { height: 48px; font: 800 15px var(--font) !important; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-btn) !important; background: var(--accent) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
#gameview #playbtn:hover:not(:disabled) { background: var(--lux2) !important; }
#gameview #playbtn.cash, #gameview #playbtn[class*="cash"] { background: var(--win) !important; color: #052313 !important; }
#gameview .bet-in, #gameview .bq, #gameview input:not([type="range"]):not([type="checkbox"]) { border-radius: var(--r-btn) !important; }
#gameview .bet-in { background: var(--panel3) !important; border-color: transparent !important; }
#gameview .bq { background: var(--accent-dk) !important; color: #c9d6ff !important; border: 0 !important; font-weight: 800 !important; }
#gameview .bq:hover { background: var(--accent) !important; color: #fff !important; }
#gameview .modeswitch { border-radius: var(--r-btn) !important; background: var(--bg2) !important; padding: 4px !important; }
#gameview .modeswitch button { border-radius: 6px !important; font: 800 12.5px var(--font) !important; letter-spacing: .04em; }
#gameview .modeswitch button.sel { background: var(--panel3) !important; color: var(--gold) !important; }
#gameview .gv-stage {
  min-height: 440px !important; border-radius: var(--r-card) !important; box-shadow: none !important;
  background: var(--panel) !important; background-image: none !important; border: 1px solid var(--border) !important;
}
#gameview .gv-stage .stage-title { display: none; }
#gameview .gv-odds { font-size: 11.5px !important; }
/* On a wide screen the options and the bet sit side by side, Play stays full width on top. */
@media (min-width: 1500px) {
  #gameview .gv-side { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  #gameview .gv-side > #playbtn, #gameview .gv-side > #gvactions, #gameview .gv-side > #gameErr, #gameview .gv-side > #odds { grid-column: 1 / -1; }
}

/* Limbo: the number is the whole show, like DonutClash */
#gameview .limborocket { display: none !important; }
#gameview .limbostage { padding: 40px 10px 20px !important; }
#gameview .limbonum { font-family: var(--font) !important; font-weight: 900 !important; font-size: clamp(80px, 14cqw, 170px) !important; letter-spacing: -.02em !important; }
#gameview .limbonum.rolling { animation: none !important; }
#gameview .limbotgt { margin-top: 14px; font-weight: 800; }
#gameview .gv-side label { display: block; text-transform: lowercase !important; }
#gameview .gv-side label::first-letter { text-transform: uppercase !important; }

/* ---------- Dice (DonutClash-style roll) ---------- */
#gameview .gv-stage:has(.dx) { display: flex; align-items: center; justify-content: center; }
.dx { width: 100%; max-width: 760px; margin: 0 auto; padding: 50px 8px 10px; }
.dx-scale { position: relative; height: 22px; margin: 0 24px 10px; font: 700 13px var(--font); color: var(--muted); }
.dx-scale span { position: absolute; transform: translateX(-50%); }
.dx-scale span::after { content: ''; position: absolute; left: 50%; top: 20px; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--panel3); transform: translateX(-50%); }
.dx-scale span:nth-child(1) { left: 0 } .dx-scale span:nth-child(2) { left: 25% } .dx-scale span:nth-child(3) { left: 50% } .dx-scale span:nth-child(4) { left: 75% } .dx-scale span:nth-child(5) { left: 100% }
.dx-rail { padding: 10px 14px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border2); }
.dx-track { position: relative; height: 12px; margin: 0 10px; }
.dx-seg { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left .12s ease, width .12s ease; }
.dx-seg.lose { background: #ef2f4a; }
.dx-seg.win { background: #22d65e; }
.dx-handle { position: absolute; top: 50%; width: 26px; height: 34px; border-radius: 7px; transform: translate(-50%, -50%); background: #d9deef; box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.18); pointer-events: none; z-index: 2; }
.dx-handle::after { content: ''; position: absolute; inset: 9px 9px; background: repeating-linear-gradient(90deg, #9aa3c4 0 2px, transparent 2px 4px); }
.dx-range { position: absolute; left: -12px; right: -12px; top: -14px; width: calc(100% + 24px); height: 40px; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.dx-die { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; transition: left .28s cubic-bezier(.2,.8,.2,1); }
.dx-die b { display: grid; place-items: center; min-width: 68px; height: 56px; padding: 0 8px; border-radius: 12px; background: #eef1fb; color: #3b3f6b; font: 900 17px var(--font); font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 -5px 0 rgba(0,0,0,.12); }
.dx-die::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: #eef1fb; }
.dx-die.w b { background: #22d65e; color: #062914; } .dx-die.w::after { border-top-color: #22d65e; }
.dx-die.l b { background: #ef2f4a; color: #fff; } .dx-die.l::after { border-top-color: #ef2f4a; }
.dx-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; padding: 16px; border-radius: var(--r-card); background: var(--bg2); }
.dx-f { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.dx-f > span { font: 700 12.5px var(--font); color: var(--text); }
.dx-f input { width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-btn); border: 0; background: var(--panel3); color: var(--text); font: 700 15px var(--font); }
.dx-mode input { text-align: center; }
.dx-in { position: relative; }
.dx-in button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 7px; border: 0; background: var(--accent-dk); color: #c9d6ff; cursor: pointer; display: grid; place-items: center; }
.dx-in button:hover { background: var(--accent); color: #fff; }
.dx-in button svg { width: 17px; height: 17px; }
@media (max-width: 600px) { .dx { padding-top: 60px; } .dx-fields { grid-template-columns: 1fr; } .dx-die b { min-width: 58px; height: 46px; font-size: 15px; } }
.wm-spons { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--gold); }

/* ---------- less animation ----------
   Decorative motion off: floating banners, shine sweeps, pulsing badges, fade-ins,
   win/lose pops and the top-bar balance flash. Game mechanics keep their motion
   (reels, cards, tiles, the crash rocket, the dice die). */
.banner, .banner .bart, .banner:hover::after, .secthead h2 svg, .refstrip, .rs-tag::after, .pagewrap,
.sp-grid .scard, .cmsg, .walletbtn.flash-up, .walletbtn.flash-down, .walletgroup::after,
.winpop, .winpop::before, .winpop::after, .winsplash, .winsplash.out, .confetti i, .flashlayer,
.shake, .cicon.item.shake, .cd-icon img.shake, #gameview #playbtn.pulse, #gameview .result.win, #gameview .result.lose,
.bet-row .bet-in input.bump, .lbt tr.new td, .limbonum.rolling, .limbostage.rolling .limborocket,
.ob-stats b.bump, .rpot.bump, .bp-total.bump, .ob-live, .rkcase.ready, .raincard.open, .tablepill,
.dr-clock.hot, .slotmarq.win, .pmenu, .modal, .lobby-reveal, .gcard, .feat, .scard { animation: none !important; }
.winpop, .winsplash, .confetti, .flashlayer { display: none !important; }
.gcard:hover, .feat:hover, .scard:hover, .gscroll .gcard:hover, .banner:hover .bart { transform: none !important; }
.gcard, .feat, .scard { transition: box-shadow .15s ease, filter .15s ease !important; }
.gcard:hover, .feat:hover, .scard:hover { filter: brightness(1.08); }
/* Top bar: the balance keeps a steady width so nothing shifts when it changes. */
#walletbal { display: inline-block; min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.walletbtn, .walletgroup { transition: none !important; transform: none !important; }
/* The result line under a game: plain text, no pill glow or pop. */
#gameview .result { box-shadow: none !important; background: transparent !important; border: 0 !important; font: 700 14px var(--font) !important; letter-spacing: .02em !important; text-shadow: none !important; }
#gameview .result.win { color: var(--win) !important; } #gameview .result.lose { color: var(--muted) !important; }
.lobby-reveal, .lobby-reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
.dx-f, .dx-f > span { text-transform: none !important; letter-spacing: 0 !important; font: 700 12.5px var(--font) !important; color: var(--text) !important; }

/* ---------- v3: dice smoothness, bet panel on the side, steady result line, one brand colour ---------- */
.dx-die { transition: none !important; will-change: left; }
.dx-seg, .dx-handle { transition: none !important; }
.dx-die b { transition: background-color .15s ease, color .15s ease; }
.dx-range { touch-action: none; }

/* The result line always keeps its height, so a win or loss never shifts the page. */
#gameview .result, #gameview .result:empty { display: block !important; height: 26px; min-height: 26px !important; line-height: 26px !important; margin: 10px 0 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#gameview .err:empty { display: block; min-height: 0; }

/* Bet panel on the left of the game again (stacked only on narrow screens). */
#gameview .gv-side > #gvbet { order: 0 !important; }
#gameview .gv-side > #gvbet .modeswitch { order: -1 !important; margin: 0 0 14px !important; }
#gameview .gv-side > #gvctl { order: 1 !important; }
#gameview .gv-side > #playbtn { order: 2 !important; margin: 16px 0 0 !important; }
#gameview .gv-side > #gvactions { order: 3 !important; }
#gameview .gv-side > #gameErr { order: 4 !important; }
#gameview .gv-side > #odds { order: 5 !important; }
@media (min-width: 1000px) {
  #gameview .gv { display: grid !important; grid-template-columns: 330px minmax(0, 1fr); align-items: start; gap: 14px !important; }
  #gameview .gv-side { grid-column: 1; grid-row: 1; position: sticky !important; top: calc(var(--topH) + 14px); display: flex !important; flex-direction: column; }
  #gameview .gv-stagewrap { grid-column: 2; grid-row: 1; }
  #gameview .gv-side > * { grid-column: auto !important; }
}

/* One brand colour: the DonutFortune blue from the logo and the game art. */
.sp-tabs button.sel, #gameview .modeswitch button.sel { background: var(--accent) !important; color: #fff !important; }
html[data-theme="light"] .sp-tabs button.sel { color: #fff !important; }
.banner .btag { color: #8fb0ff !important; }
.banner.b3 { background: linear-gradient(120deg, #1d3a9e 0%, #2f5ce0 55%, #4f7cff 100%) !important; }
.banner.b3 .bigbtn.discord { color: #1d3a9e !important; }
.gcard .badge, .gcard .badge.hot { background: var(--accent) !important; color: #fff !important; }
.sc-new, .scard .sc-new { background: var(--accent) !important; color: #fff !important; }
.faq summary::after { color: var(--accent); }
/* Keep the full DonutFortune wordmark in the top bar when signed in on normal desktop widths. */
@media (min-width: 1380px) {
  .top:has(#walletwrap:not([hidden])) .top-brand span { display: inline !important; font-size: 18px; }
  .top:has(#walletwrap:not([hidden])) .topslots { padding: 0 12px; }
}
#gameview .result, #gameview .result:empty { height: 30px !important; min-height: 30px !important; line-height: 30px !important; font-size: 14px !important; }
.dx-mode input { padding-right: 44px !important; padding-left: 44px !important; }
.dx-mode input { padding-left: 14px !important; padding-right: 46px !important; text-align: left !important; }

/* Profit on win (Limbo, Dice) */
.profitwin { margin-top: 2px; }
.pw-box { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--r-btn); background: rgba(34, 214, 94, .08); border: 1px solid rgba(34, 214, 94, .22); }
.pw-coin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #3a2600; font: 900 11px var(--font); }
.pw-box b { font: 800 15px var(--font); color: #37e07a; font-variant-numeric: tabular-nums; }
.pw-mult { margin-left: auto; font: 700 12px var(--font); color: var(--muted); }
.bh .bhs { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#gameview .stagenote#slotrisknote { display: block !important; max-width: 920px; margin: 12px auto 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }

#slotspage { --slot-accent: #795cf5; padding-top: 18px !important; }
#slotspage .sp-heading { display: none !important; }
#slotspage .sp-bar { display: grid !important; grid-template-columns: max-content max-content minmax(220px, 1fr) !important; align-items: center; gap: 10px !important; margin-bottom: 30px !important; }
#slotspage .sp-tabs { grid-column: 1; grid-row: 1; padding: 4px !important; gap: 4px !important; border-radius: 10px !important; background: #191a32 !important; border: 1px solid rgba(159,149,255,.08) !important; }
#slotspage .sp-tabs button { min-width: 105px; padding: 12px 18px !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .015em !important; color: #777da8 !important; }
#slotspage .sp-tabs button.sel { color: #ffe268 !important; background: #393744 !important; }
#slotspage .sp-prov { grid-column: 2; grid-row: 1; height: 48px !important; border-radius: 11px !important; background: #1b1d37 !important; border-color: rgba(159,149,255,.08) !important; }
#slotspage .sp-search { grid-column: 3; grid-row: 1; max-width: none !important; height: 48px !important; border-radius: 11px !important; background: #1b1d37 !important; border-color: rgba(159,149,255,.08) !important; }
#slotspage .sp-head { display: flex !important; align-items: flex-end; margin: 0 0 18px !important; }
#slotspage .sp-head[hidden] { display: flex !important; }
#slotspage .sp-kicker, #slotspage #spkicker { display: block; margin-bottom: 4px; font-size: 12px !important; font-style: italic; font-weight: 800 !important; letter-spacing: .04em !important; color: #c1c6e2 !important; }
#slotspage .sp-head h2 { color: #fff !important; font-size: 26px !important; font-style: italic; font-weight: 900 !important; letter-spacing: -.035em !important; }
#slotspage .sp-count { color: #c1c6e2 !important; font-size: 12px !important; }
#slotspage .sp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 16px 12px !important; }
#slotspage .sp-grid .scard, #slotspage .sp-grid .scard.house { position: relative; display: block !important; aspect-ratio: 3 / 4 !important; border-radius: 13px !important; overflow: hidden !important; background: var(--c, #242542) !important; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
#slotspage .sp-grid .scard .sc-art { position: absolute !important; inset: 0 0 auto !important; width: 100% !important; aspect-ratio: 1 !important; height: 100% !important; border-radius: 0 !important; background: var(--c, #242542) !important; }
#slotspage .sp-grid .scard .sc-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
#slotspage .sp-grid .scard .sc-band { position: absolute !important; inset: auto 0 0 !important; z-index: 2; min-height: 34%; display: flex; flex-direction: column; justify-content: flex-end; padding: 46px 9px 11px !important; text-align: center !important; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c, #242542) 72%, #111225 28%) 44%, var(--c, #242542) 100%) !important; }
#slotspage .sp-grid .scard .sc-band b { font-size: clamp(13px, 1.05vw, 18px) !important; line-height: 1.02 !important; font-weight: 900 !important; letter-spacing: -.02em !important; text-transform: uppercase !important; text-shadow: 0 2px 10px #0009 !important; -webkit-line-clamp: 3 !important; }
#slotspage .sp-grid .scard .sc-band small { margin-top: 8px !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .1em !important; color: rgba(255,255,255,.82) !important; }
#slotspage .sp-grid .scard .sc-play { top: 42% !important; }
#slotspage .sp-grid .scard .sc-new { top: 8px !important; left: 8px !important; }
#slotspage .sp-grid .scard .sc-real { top: 8px; left: 8px; }
#slotspage .sp-grid .scard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
#slotspage .sp-foot { margin-top: 24px !important; }
@media (max-width: 1050px) {
  #slotspage .sp-bar { grid-template-columns: minmax(0, 1fr) minmax(170px, .6fr) !important; }
  #slotspage .sp-tabs { grid-column: 1 / -1; grid-row: 1; }
  #slotspage .sp-prov { grid-column: 1; grid-row: 2; }
  #slotspage .sp-search { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  #slotspage .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  #slotspage .sp-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  #slotspage .sp-tabs { overflow-x: auto; }
  #slotspage .sp-tabs button { min-width: 0; flex: 1 0 auto; padding: 10px 12px !important; }
  #slotspage .sp-prov, #slotspage .sp-search { min-width: 0; }
}

/* Full-page games (cases, battles, tables, pool, roulette) hide the standard panel;
   the forced display above must not override [hidden]. */
#gameview .gv[hidden] { display: none !important; }

/* ===================================================================
   Humanize pass (2026-09-26)
   - Prices and numbers use a wide grotesque (Archivo, the free cousin of
     the Geogrotesque Wide that DonutClash uses) instead of a code font.
   - Case reel: flat cards, one thin centre line, no glow, no shine sweep.
   - Mines: real TNT and emerald art, flat tiles.
   - Fewer shouty, letter-spaced caps where people read results.
   =================================================================== */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --mono: 'Archivo', 'Rubik', system-ui, sans-serif;
  --code: 'JetBrains Mono', ui-monospace, monospace;
}
/* Archivo is loaded pre-widened (wdth 116) from Google Fonts, so nothing
   else on the page needs a font-stretch setting. */
/* Real code (seeds, hashes, chat commands, key hints) stays monospace. */
.crashfair code, .pool-fair code, .bjt-hseed, .guide .cmd, .cmdrow .cmd, .rs-code b,
.bj-onboard .bjactions .btn kbd, .bjt-act kbd, .mono, code, kbd { font-family: var(--code); }
.cd-price, .cs-total b, .crow-price, .cx-price, .hc-v, .cs-it .iv, .cd-rval, .cm-v, .tx-amt, .ws-amt { letter-spacing: -0.01em; }
.cd-price { font-weight: 800; }
/* Fixed-width digits only where numbers count up or sit in columns. */
.cd-price, .cs-total b, .crow-price, .cx-price, .hc-v, .cs-it .iv, .cd-rval, .cm-v, .tx-amt, .ws-amt,
.stats .st .v, .bet-row .bet-in input, .winpop .wm, .crashmult, .limbonum, .cs-row .b, .cs-row .m { font-variant-numeric: tabular-nums; }

/* ---- Case reel ---- */
.hreels { background: var(--panel); border: 1px solid var(--border); box-shadow: none; }
.hreel-idle { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; color: var(--muted); }
.hreel-idle::before { display: none; }
.hreel-idle img, .hreel-idle .cicon { animation: none; filter: none; }
.cicon.item, .cicon.item[data-tier="3"], .cicon.item[data-tier="4"] { background: none; }
.cicon.item svg, .cicon.item img { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.hreel { background: var(--bg2); border: 1px solid var(--border); box-shadow: none; border-radius: 10px; }
.hreel::before { background: linear-gradient(90deg, var(--bg2), transparent); width: 90px; }
.hreel::after { background: linear-gradient(270deg, var(--bg2), transparent); width: 90px; }
.hreel.landed { border-color: var(--border2); box-shadow: none; }
.hstrip { will-change: transform; filter: none !important; }
.hcard { background: var(--panel2); background-image: none; border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.hcard::before, .hcard::after { display: none; }
.hc-art img.iimg, .hc-art svg { filter: none; }
.hc-n { color: var(--text); font-weight: 600; }
.hc-v { color: var(--muted); font-size: 12px; }
.hc-bar { left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; opacity: 1; }
.hcard.win { animation: none; box-shadow: none; border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, var(--panel2)); }
.hcard.win .hc-v { color: var(--text); }
.hreel.landed .hcard:not(.win) { opacity: .45; filter: none; }
/* One thin marker line with small notches, instead of two glowing gold bars. */
.hwin { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border: 0; box-shadow: none; background: var(--text); opacity: .85; }
.hwin::before, .hwin::after { content: ''; position: absolute; left: 50%; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.hwin::before { top: 0; border-top: 7px solid var(--text); }
.hwin::after { bottom: 0; border-bottom: 7px solid var(--text); }
.hreel.landed .hwin { box-shadow: none; background: var(--text); }
.hreels .rareflash { display: none; }

/* Results */
.cs-it { background: var(--panel2); border: 1px solid var(--border); border-bottom: 3px solid var(--tc); border-radius: 8px; box-shadow: none; }
.cs-it .iv { color: var(--text); }
.cs-it .ir { letter-spacing: .04em; font-weight: 700; font-size: 9.5px; }
.cs-total .l { letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.cs-total .d { font-size: 14px; font-weight: 700; }
.cd-result { font-weight: 600; }

/* ---- Mines: real TNT and emeralds ---- */
.mtile .mt-ico, .trow .tt .mt-ico { display: block; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mtile .mt-ico { width: 58%; height: 58%; }
.trow .tt .mt-ico { width: 28px; height: 28px; }
.mt-ico.emr { image-rendering: pixelated; }
.mt-ico.tnt { width: 66%; height: 66%; }
.trow .tt .mt-ico.tnt { width: 30px; height: 30px; }
.mtile.safe { background: rgba(47, 199, 120, .12); box-shadow: inset 0 0 0 1px rgba(47, 199, 120, .45); }
.mtile.safe .mt-ico { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.mtile.boom { background: rgba(239, 91, 111, .16); box-shadow: inset 0 0 0 1px rgba(239, 91, 111, .6); }
.mtile.mine { opacity: .6; }
.mtile.mine .mt-ico { filter: grayscale(.35); }

/* ===================================================================
   2026-09-27: Mines flip, blackjack in the site theme, smoother dealing
   =================================================================== */

/* ---- Mines: tiles turn over like a card ----
   One clean quarter turn away (showing the closed tile), then a quarter turn
   back face up. No bounce or wobble: the icon fades up as the tile settles and
   a soft ring breathes out once. TNT adds a short shake and a few embers. */
:root { --mt-cover: var(--panel3); }
html[data-theme="light"] { --mt-cover: #ffffff; }
.minegrid { perspective: 700px; }
.mtile.safe { animation: none; }
.mtile.flip, .mtile.boom.flip, .mtile.mine.late {
  animation: mtFlip .42s both; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; z-index: 2; }
.mtile.mine.late { animation-duration: .34s; }
.mtile.boom.flip { animation: mtFlip .42s both, mtBoom .36s ease-out .42s; }
@keyframes mtFlip {
  0%     { transform: rotateY(0deg); animation-timing-function: cubic-bezier(.55,0,.9,.45); }
  50%    { transform: rotateY(90deg); }
  50.01% { transform: rotateY(-90deg); animation-timing-function: cubic-bezier(.1,.55,.45,1); }
  100%   { transform: rotateY(0deg); }
}
@keyframes mtBoom { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.mtile.flip::before, .mtile.mine.late::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: 3; pointer-events: none;
  background: var(--mt-cover); box-shadow: inset 0 0 0 1px var(--border2);
  animation: mtCover .42s linear both; }
.mtile.mine.late::before { animation-duration: .34s; }
@keyframes mtCover { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
.mtile.flip::after { display: none !important; }
.mtile.flip .mt-ico { animation: mtIcon .26s cubic-bezier(.2,.7,.3,1) .21s both; }
@keyframes mtIcon { from { transform: scale(.72); opacity: 0; } to { transform: none; opacity: 1; } }
.mtile.safe.flip { animation: mtFlip .42s both, mtGlow .7s ease-out .3s; }
@keyframes mtGlow { from { box-shadow: inset 0 0 0 1px rgba(47,199,120,.75), 0 0 0 0 rgba(47,199,120,.45); } to { box-shadow: inset 0 0 0 1px rgba(47,199,120,.45), 0 0 0 10px rgba(47,199,120,0); } }
.mspark { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; z-index: 4; pointer-events: none; opacity: 0; border-radius: 1px;
  animation: mtSpark .5s cubic-bezier(.15,.7,.3,1) both; }
.mspark.emr { display: none; }
.mspark.tnt { background: #ffb347; box-shadow: 0 0 6px rgba(255,120,60,.85); }
.mspark:nth-child(odd).tnt { background: #ff6a3c; }
@keyframes mtSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mtile.flip, .mtile.boom.flip, .mtile.mine.late, .mtile.flip .mt-ico, .mspark { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---- Blackjack in the site palette ----
   Navy felt that matches the page panels, blue rails and highlights instead
   of the old gold and wood, site font on the cards, DonutFortune card backs.
   The felt stays dark in light mode so the white cards keep their contrast. */
:root {
  --felt-hi: #25306a; --felt-mid: #19204a; --felt-lo: #11163a;
  --felt-rim: #1c2240; --felt-line: rgba(106,144,255,.26); --felt-line2: rgba(106,144,255,.1);
}
.bjtable, .bjt-table {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(79,124,255,.16), transparent 62%),
    radial-gradient(110% 100% at 50% 42%, var(--felt-hi) 0%, var(--felt-mid) 55%, var(--felt-lo) 100%) !important;
  border: 6px solid var(--felt-rim) !important;
  box-shadow: 0 0 0 1px rgba(79,124,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 70px rgba(4,6,20,.55), 0 24px 60px rgba(0,0,0,.45) !important;
}
.bjtable::before { border: 2px solid var(--felt-line) !important; }
.bjtable::after { border-color: var(--felt-line2) !important; }
.bjt-rail { border-color: var(--felt-line); }
.bjt-rail::after { border-color: var(--felt-line2); }
.bjrules .r1 { color: rgba(150,176,255,.78); background: rgba(8,12,40,.42); }
.bjrules .r2 { color: rgba(200,212,255,.36); background: rgba(8,12,40,.3); }
.bjt-ribbon { color: rgba(150,176,255,.7); background: rgba(8,12,40,.42); }
.bjlab { color: rgba(214,224,255,.6); }
.bjlab b, .bjt-val { background: rgba(8,12,40,.6); border: 1px solid var(--felt-line); color: #fff; }
.bjlab b.bj, .bjt-val.bj { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(246,185,59,.35); }
.bjlab b.tag { color: var(--lux2); border-color: var(--lux-line); }
.bjhand.you.active .bjlab { color: var(--lux2); }
.card .r, .card .r2 { font-family: var(--display); font-weight: 800; }
.cards.glow .card { box-shadow: 0 0 0 2px rgba(55,214,122,.75), 0 0 22px rgba(55,214,122,.4), 0 10px 22px rgba(0,0,0,.5); }
/* card backs, deck and shoe: site blue with the logo */
.card.back, .bjdeck i, .bjt-shoe i {
  background: radial-gradient(circle at 50% 38%, #6a90ff 0%, #4f7cff 42%, #2f4fc8 100%) !important;
  border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 10px 22px rgba(0,0,0,.5) !important; }
.card.back::after { inset: 6px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.45);
  background: url(/assets/donutfortune.png) center / 58% no-repeat, repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 3px, transparent 3px 8px); }
/* betting circle */
.bjspot { border: 2px dashed var(--felt-line); }
.bjspot.live { border-style: solid; border-color: var(--lux); background: radial-gradient(circle at 50% 35%, rgba(79,124,255,.3), rgba(79,124,255,.05) 70%); box-shadow: 0 0 0 7px rgba(79,124,255,.09), 0 10px 26px rgba(0,0,0,.45); }
.bjspot.live .bv { color: #fff; }
.bjt-spot { border-color: var(--felt-line); }
.bjt-spot.live, .bjt-seat.turn .bjt-spot { border-color: var(--lux); background: rgba(79,124,255,.1); }
.bjt-stakelab { color: #fff; }
/* action bar under the felt */
.bj-onboard .bjactions .btn { border-radius: var(--r-btn); box-shadow: none; font-family: var(--font); }
.bj-onboard .bjactions .btn.bj-hit { background: var(--lux); color: #fff; }
.bj-onboard .bjactions .btn.cash { background: #2fbf6f; color: #fff; }
.bj-onboard .bjactions .btn.cash kbd { color: rgba(255,255,255,.8); background: rgba(0,0,0,.2); }
.bj-onboard .bjactions .btn.bj-dbl { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--lux-line); }
.bj-onboard .bjactions .btn.bj-split { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--lux-line); }
.bj-timer { background: rgba(8,12,40,.5); }
/* result banner */
.bj-banner { background: rgba(15,19,38,.92); border: 1px solid var(--lux-line); border-radius: 12px; }
.bj-banner b { font-family: var(--display); }
.bj-banner.win { border-color: rgba(55,214,122,.55); } .bj-banner.win b { color: #fff; text-shadow: none; } .bj-banner.win span { color: var(--win); }
.bj-banner.lose { border-color: var(--border2); } .bj-banner.lose b { color: var(--text); } .bj-banner.lose span { color: var(--muted); }
.bj-handtag.lose { color: var(--muted); border-color: var(--border2); }
/* live tables: turn, phase and seat highlights in blue */
.bjt-phase { color: var(--lux2); background: var(--lux-soft); border-color: var(--lux-line); }
.bjt-phase .bjt-secs { color: var(--lux2); }
.bjt-hand.cur { background: rgba(79,124,255,.1); box-shadow: inset 0 0 0 1px var(--lux-line); }
.bjt-plate { background: rgba(15,19,38,.82); border-color: var(--felt-line); }
.bjt-seat.me .bjt-plate { border-color: var(--lux); background: rgba(79,124,255,.18); }
.bjt-seat.turn .bjt-plate { border-color: var(--lux); animation: bjtTurnBlue 1.4s ease-in-out infinite; }
@keyframes bjtTurnBlue { 0%, 100% { box-shadow: 0 0 0 2px rgba(79,124,255,.3), 0 0 16px rgba(79,124,255,.2); } 50% { box-shadow: 0 0 0 3px rgba(79,124,255,.55), 0 0 28px rgba(79,124,255,.4); } }
.bjt-av svg circle { stroke: var(--lux2); }
.bjt-turnpill { background: rgba(15,19,38,.9); }
.bjt-turnpill.me { border-color: var(--lux); color: #fff; box-shadow: 0 0 0 2px rgba(79,124,255,.25), 0 10px 30px rgba(0,0,0,.4); }
.bjt-actions { background: var(--panel2); border-color: var(--border); }
.bjt-actions.live .bjt-act.hit:not(:disabled) { background: var(--lux); color: #fff; border-color: var(--lux); }
.bjt-actions.live .bjt-act.double:not(:disabled), .bjt-actions.live .bjt-act.split:not(:disabled) { background: var(--lux-soft); border-color: var(--lux-line); }
.bjt-res.lose { color: var(--text); background: var(--panel3); }
.bjt-res.bust { color: var(--text); background: var(--panel3); }
.bjt-amt { background: var(--panel2); } .bjt-amt .cur { color: var(--lux2); }
.bjt-bal { background: var(--panel2); }
.bjt-controls { background: var(--panel); border-color: var(--border); }
/* lobby: table cards on the site panels, tier colour kept as an accent */
.bjt-card { background: linear-gradient(170deg, color-mix(in srgb, var(--tt) 8%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--tt) 28%, var(--border)); border-radius: var(--r-card); }
.bjt-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.bjt-felt-mini { background: radial-gradient(110% 100% at 50% 30%, var(--felt-hi), var(--felt-lo)); border-color: var(--felt-line); }
.bjt-felt-mini::before { border-color: var(--felt-line); }
.bjt-title { font-family: var(--display); letter-spacing: .06em; }

/* ---- Blackjack: smoother motion ---- */
.bjtable .cards, .bjt-cards { perspective: 900px; }
.bjtable .card, .bjt-cards .card { transition: none; will-change: transform; backface-visibility: visible; }
/* dealt from the shoe at the top right: one clean glide, a slight turn, no pop-in */
.bjtable .cards .card.deal, .bjt-cards .card.fresh, .bjtable .cards .card.fresh {
  animation: bjGlide .5s cubic-bezier(.2,.85,.25,1) both !important; }
.bjt-seat .bjt-cards .card.fresh { animation-duration: .46s !important; }
@keyframes bjGlide {
  0%   { transform: translate(300px, -190px) rotate(-18deg) rotateY(28deg) scale(.86); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* hole card turns over in 3D with a small lift */
.card.flipping { transition: transform .2s cubic-bezier(.5,0,.75,.4) !important; transform: rotateY(90deg) scale(1.05) !important; }
.card.flipped { animation: bjUnflip .26s cubic-bezier(.25,.6,.3,1) both !important; }
@keyframes bjUnflip { from { transform: rotateY(-90deg) scale(1.05); } to { transform: none; } }
/* old cards slide off to the discard side before the next deal */
.bjtable .cards .card.gone, .bjt-cards .card.gone { animation: bjGone .36s cubic-bezier(.5,0,.8,.5) forwards !important; pointer-events: none; }
@keyframes bjGone { to { transform: translate(-150px, -110px) rotate(-14deg) scale(.9); opacity: 0; } }
.bjt-cards .card.sideways { transition: transform .3s cubic-bezier(.2,.8,.2,1.1) !important; }
/* the action bar keeps its space for the whole hand */
.bj-onboard { transition: opacity .2s ease; }
.bj-onboard.off { visibility: hidden; opacity: 0; pointer-events: none; }
.bj-onboard.wait { pointer-events: none; }
.bj-onboard.wait .bj-timer i { opacity: .4; }
.bjlab b.pop, .bjt-val.pop { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
  .bjtable .cards .card.deal, .bjt-cards .card.fresh, .card.flipped, .card.gone { animation-duration: .01s !important; }
}
/* the felt is dark in both themes, so text and buttons on it use fixed light colours */
.bjt-table .bjt-pname { color: #eef1fb; }
.bj-onboard .bjactions .btn.bj-dbl, .bj-onboard .bjactions .btn.bj-split { background: rgba(255,255,255,.08); color: #eef1fb; box-shadow: inset 0 0 0 1px rgba(106,144,255,.45); }
.bj-onboard .bjactions .btn.bj-dbl kbd, .bj-onboard .bjactions .btn.bj-split kbd { color: rgba(255,255,255,.7); background: rgba(0,0,0,.25); }
.bjt-actions.live .bjt-act.stand:not(:disabled), .bjt-actions.live .bjt-act.double:not(:disabled), .bjt-actions.live .bjt-act.split:not(:disabled) { color: var(--text); }
.bjt-actions.live .bjt-act.double:not(:disabled) .x2 { color: var(--lux2); }
/* key hints overlap the labels once the bar gets narrow (chat open, small screens) */
.bj-onboard { container-type: inline-size; }
@container (max-width: 520px) { .bj-onboard .bjactions .btn kbd { display: none; } }

/* ---- balance change popups (cases, battles, tips) ---- */
.baldelta { position: fixed; z-index: 1200; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font: 800 13px/1.3 var(--mono); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: balDelta 2.8s cubic-bezier(.2,.8,.25,1) both; }
.baldelta.up { color: #fff; background: #22b866; }
.baldelta.down { color: #fff; background: #e0485c; }
@keyframes balDelta {
  0%   { opacity: 0; transform: translate(-50%, -8px) scale(.85); }
  10%  { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  18%  { transform: translate(-50%, 0) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, 4px); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
@media (prefers-reduced-motion: reduce) { .baldelta { animation-duration: 2.8s; animation-timing-function: steps(1, end); } }

/* ---- Chips: new disc design (games.js chipSvgHtml) and the throw onto the felt ---- */
.chip { filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.chip .chipsvg text { font-family: var(--display); }
.chip-fly { position: fixed; z-index: 999; pointer-events: none; will-change: transform; filter: drop-shadow(0 12px 14px rgba(0,0,0,.45)); }
.chip-fly .chipsvg { display: block; width: 100%; height: 100%; }
/* tray chips: lift on hover, press down on click */
.bjtray.real .tchip, .bjt-tray .chip { transition: transform .16s cubic-bezier(.2,.8,.3,1.3), filter .16s ease; }
.bjtray.real .tchip:hover, .bjt-tray .chip:not(.off):hover { transform: translateY(-5px) scale(1.07); filter: drop-shadow(0 10px 10px rgba(0,0,0,.4)); }
.bjtray.real .tchip:active, .bjt-tray .chip:not(.off):active { transform: translateY(0) scale(.94); transition-duration: .06s; }
/* stacks on the betting circle: a real pile, only the newest chip settles */
.bjspot .bjstack .stk { animation: none !important; }
.bjspot .bjstack .stk .chip.sm { filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.bjspot .bjstack.grew .stk.stk-top { animation: chipSettle .3s cubic-bezier(.2,.9,.3,1.4) both !important; }
.bjspot .bjstack.clearing .stk { animation: chipOff .24s ease-in forwards !important; }
.bjt-stack .chip.fly { animation: chipSettleDrop .38s cubic-bezier(.2,.9,.3,1.3) both !important; }
@keyframes chipSettle { 0% { transform: translateY(-7px) scale(1.08); } 60% { transform: translateY(1px) scale(.98); } 100% { transform: none; } }
@keyframes chipSettleDrop { 0% { transform: translateY(-26px) scale(1.12); opacity: 0; } 35% { opacity: 1; } 75% { transform: translateY(2px) scale(.97); } 100% { transform: none; } }
@keyframes chipOff { to { transform: translate(-60px, 30px) scale(.8); opacity: 0; } }
/* the circle reacts when a chip lands on it */
.bjspot.live { transition: box-shadow .2s ease; }
.bjt-spot.thud, .bjspot.thud { animation: spotThud .35s ease-out; }
@keyframes spotThud { 0% { box-shadow: 0 0 0 0 rgba(79,124,255,.55); } 100% { box-shadow: 0 0 0 12px rgba(79,124,255,0); } }
@media (prefers-reduced-motion: reduce) { .bjspot .bjstack.grew .stk.stk-top, .bjt-stack .chip.fly { animation: none !important; } }

/* ---- Blackjack fits the screen: sizes follow the viewport height ----
   The single table used to be ~710px tall with the chip tray below the fold
   on a laptop. Cards, circle and spacing now scale with 100vh and stop at
   the old sizes on big monitors. */
.bjtable { --cw: clamp(60px, 9.2vh, 90px); min-height: 0 !important; max-width: 700px; gap: clamp(6px, 1.3vh, 16px) !important;
  padding: clamp(12px, 2.2vh, 26px) 22px !important; justify-content: flex-start !important; }
.bjtable .cards { min-height: calc(var(--cw) * 1.42); }
.bjtable .card { width: var(--cw); height: calc(var(--cw) * 1.42); margin-left: calc(var(--cw) * -0.27); border-radius: calc(var(--cw) * 0.12); }
.bjtable .card:first-child { margin-left: 0; }
.bjtable .card .r, .bjtable .card .r2 { font-size: calc(var(--cw) * 0.19); }
.bjtable .card .s { font-size: calc(var(--cw) * 0.155); top: calc(var(--cw) * 0.27); }
.bjtable .card .big { font-size: calc(var(--cw) * 0.48); }
.bjtable .bjlab { margin-bottom: clamp(4px, 0.9vh, 10px); }
.bjtable .bjrules { margin: 0; }
.bjtable .bjspot { width: clamp(56px, 8.4vh, 92px); height: clamp(56px, 8.4vh, 92px); margin-top: 0; }
.bjtable .bj-onboard { margin-top: 2px; gap: 6px; }
.bjtable .bj-onboard .bjactions .btn { padding: clamp(9px, 1.4vh, 14px) 8px; }
.bjspot.live .bv { top: calc(100% + 3px); }
.bjdeck { width: calc(var(--cw, 54px) * 0.6); height: calc(var(--cw, 54px) * 0.85); }
.bjtray.real { margin-top: clamp(6px, 1.2vh, 12px); }
.bjtray.real .tchip, .bjtray.real .tchip .chip { width: clamp(36px, 5.2vh, 46px); height: clamp(36px, 5.2vh, 46px); }
@media (max-height: 820px) { .bjtable .bjrules .r2 { display: none; } }
/* live tables: the felt shrinks with the window, seats and dealer follow */
.bjt-table { height: clamp(400px, calc(100vh - 330px), 520px) !important; }
@media (max-height: 850px) {
  .bjt-dealer { top: 20px; gap: 5px; }
  .bjt-rail { top: 18px; bottom: 80px; }
  .bjt-cards .card { width: 58px; height: 82px; }
  .bjt-seat .bjt-cards .card { width: 48px; height: 68px; margin-left: -18px; }
  .bjt-seat .bjt-cards .card .big { font-size: 22px; }
  .bjt-spot { width: 54px; height: 54px; }
  .bjt-seat.s0, .bjt-seat.s4 { bottom: 104px; } .bjt-seat.s1, .bjt-seat.s3 { bottom: 58px; } .bjt-seat.s2 { bottom: 40px; }
  .bjt-plate { margin-top: 6px; }
  .bjt-controls { padding: 10px 14px; margin-top: 10px; }
  .bjt-bar { margin-bottom: 8px; }
}
.bjtable .bjspot.live { margin-bottom: 14px; }
.bjt-table { height: clamp(360px, calc(100vh - 395px), 520px) !important; }
@media (max-height: 850px) {
  .bjt-dealer { top: 12px; }
  .bjt-rail { bottom: 56px; }
  .bjt-seat.s0, .bjt-seat.s4 { bottom: 78px; } .bjt-seat.s1, .bjt-seat.s3 { bottom: 34px; } .bjt-seat.s2 { bottom: 14px; }
  .bjt-act { padding: 7px 12px; min-width: 76px; gap: 2px; }
  .bjt-act svg { width: 16px; height: 16px; }
  .bjt-controls { padding: 8px 12px; margin-top: 8px; }
}

/* ===================================================================
   Case browser: banner, tabs, filters, risk meter, coin price pills
   =================================================================== */
.cx-top { margin-bottom: 14px; }
.cx-banner { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--lux) 16%, var(--panel)) 0%, var(--panel) 60%); border: 1px solid var(--border); }
.cx-bn-art { width: 64px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; }
.cx-bn-art .cicon { width: 58px; height: 58px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.cx-bn-art .cicon svg, .cx-bn-art .cicon img { width: 100%; height: 100%; }
.cx-bn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-bn-t b { font-size: 16px; font-weight: 800; color: var(--text); }
.cx-bn-t span { font-size: 12.5px; color: var(--muted); }
.cx-bn-go { width: auto !important; padding: 11px 18px !important; white-space: nowrap; }
.cx-tabs { padding: 4px; }
.cx-tab { padding: 9px 18px; font-size: 13px; }
.cx-tab.sel { background: var(--lux-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--lux-line); }
.cx-bar { margin: 0 0 10px; gap: 8px; }
.cx-search { flex: 1 1 240px; }
.cx-select { position: relative; display: inline-flex; align-items: center; }
.cx-select select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 34px 0 14px; border-radius: 10px; border: 1px solid var(--border2);
  background: var(--panel2); color: var(--text); font: 700 12.5px var(--font); cursor: pointer; }
.cx-select select:hover, .cx-select select:focus { border-color: var(--lux-line); outline: none; }
.cx-select svg { position: absolute; right: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cx-count { font-size: 11.5px; font-weight: 700; color: var(--faint); margin: 0 2px 10px; }
.cx-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cx-card { gap: 0; padding: 12px 12px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; outline: none; }
.cx-card::after { display: none; }
.cx-card:hover, .cx-card:focus-visible { transform: translateY(-3px); border-color: var(--border2); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.cx-cardtop { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.cx-cardtop .cx-name { flex: 1; min-width: 0; text-align: center; padding-left: 22px; font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-fav { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--faint); cursor: pointer; transition: color .15s, transform .15s; }
.cx-fav svg { width: 17px; height: 17px; fill: none; }
.cx-fav:hover { color: var(--text); transform: scale(1.1); }
.cx-fav.on { color: var(--gold); } .cx-fav.on svg { fill: currentColor; }
.cx-art { height: 118px; margin: 6px 0 8px; position: relative; }
.cx-art::before { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%); filter: blur(6px); }
.cx-art .cicon { width: 90px; height: 90px; position: relative; }
/* risk meter: three segments, the lit one shows the level, a tick marks where this case sits */
.cx-risk { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; height: 4px; margin: 2px 6px 9px; }
.cx-risk i { border-radius: 2px; background: rgba(255,255,255,.1); }
html[data-theme="light"] .cx-risk i { background: rgba(18,22,49,.1); }
.cx-risk.r-low i:nth-child(1) { background: #2fc774; }
.cx-risk.r-mid i:nth-child(2) { background: #f0a132; }
.cx-risk.r-high i:nth-child(3) { background: #ef4d62; }
.cx-risk b { position: absolute; top: -4px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.cx-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--faint); margin: 0 2px 9px; }
.cx-meta .cx-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-meta .cx-opens { flex: 0 0 auto; }
.cx-pricebar { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); transition: background .15s, border-color .15s; }
.cx-card:hover .cx-pricebar { background: var(--lux); border-color: var(--lux); }
.cx-card:hover .cx-pricebar b { color: #fff; }
.cx-pricebar b { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cx-coin { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; font: 900 10px/1 var(--font); color: #5a3a00;
  background: radial-gradient(circle at 34% 30%, #fff3b8 0 12%, #ffd35a 35%, #e9a515 75%, #b97c07 100%); box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.35); }
@media (max-width: 700px) { .cx-banner { flex-wrap: wrap; } .cx-bn-go { width: 100% !important; } .cx-select { flex: 1 1 45%; } .cx-select select { width: 100%; } }
#refstrip.flash { animation: refFlash 1.2s ease-out; }
@keyframes refFlash { 0% { box-shadow: 0 0 0 0 rgba(79,124,255,.6); } 100% { box-shadow: 0 0 0 16px rgba(79,124,255,0); } }

/* ===================================================================
   Sidebar: monochrome like DonutClash, cleaner. Icons lose their colour,
   the selected item gets one blue marker, sections fold, and the bottom
   holds referrals, race, leaderboard, rewards and Discord.
   =================================================================== */
.rail { display: flex !important; flex-direction: column; background: var(--panel) !important; border-right: 1px solid var(--border) !important; }
.rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 12px 12px 10px !important; gap: 2px !important; }
.rail-nav::-webkit-scrollbar { display: none; }
.rn, .rail .tab { position: relative; min-height: 42px; padding: 9px 12px !important; gap: 12px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--muted) !important; background: transparent !important; transition: background .15s, color .15s; }
.rn svg, .rail .tab .gi, .rail .tab svg { width: 20px !important; height: 20px !important; color: currentColor !important; filter: grayscale(1) brightness(1.55) contrast(.85) !important; opacity: .7 !important; transition: opacity .15s, filter .15s; }
html[data-theme="light"] .rn svg, html[data-theme="light"] .rail .tab .gi, html[data-theme="light"] .rail .tab svg { filter: grayscale(1) brightness(.55) !important; }
.rn:hover, .rail .tab:hover { background: rgba(255,255,255,.045) !important; color: var(--text) !important; }
.rn:hover svg, .rail .tab:hover .gi, .rail .tab:hover svg { opacity: 1 !important; }
.rn.on, .rail .tab.sel, body.in-game .rail .tab.sel { background: rgba(255,255,255,.07) !important; color: var(--text) !important; font-weight: 700 !important; }
html[data-theme="light"] .rn.on, html[data-theme="light"] .rail .tab.sel { background: rgba(18,22,49,.07) !important; }
.rn.on svg, .rail .tab.sel .gi, .rail .tab.sel svg { opacity: 1 !important; filter: grayscale(1) brightness(1.75) contrast(.9) !important; }
.rn.on::before, .rail .tab.sel::before, body.in-game .rail .tab.sel::before { content: '' !important; display: block !important; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lux); }
.rbadge { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--border2) !important; font-size: 9px !important; letter-spacing: .06em; }
/* section headers that fold */
.rail-sec { appearance: none; -webkit-appearance: none; width: 100%; display: flex !important; align-items: center; gap: 10px; margin: 14px 0 4px !important; padding: 8px 10px !important;
  border: 0; background: transparent; cursor: pointer; font: 800 12px var(--font) !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--text) !important; border-radius: 8px; }
.rail-sec::after { display: none !important; }
.rail-sec:hover { background: rgba(255,255,255,.03); }
.rail-sec .rs-ico { width: 18px; height: 18px; color: var(--muted); }
.rail-sec span { flex: 1; text-align: left; }
.rail-sec .rs-chev { width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--muted); transition: transform .2s ease; }
.rail-sec.closed .rs-chev { transform: rotate(180deg); }
.rail-group { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.rail-group.closed { display: none; }
.rail-games { display: flex; flex-direction: column; gap: 2px; }
/* bottom block */
.rail-extras { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.rx-ref, .rx-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border2); background: var(--panel2); color: var(--text); font: inherit; text-align: left; }
.rx-ref { cursor: pointer; transition: border-color .15s, background .15s; }
.rx-ref:hover { border-color: var(--lux-line); background: color-mix(in srgb, var(--lux) 8%, var(--panel2)); }
.rx-ref > svg, .rx-card > svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text); opacity: .85; }
.rx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rx-t b { font-size: 13px; font-weight: 800; }
.rx-t small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-go { width: 16px; height: 16px; color: var(--muted); }
.rx-card.soon { opacity: .6; cursor: default; }
.rx-card.soon small { color: var(--faint); }
.rx-row { display: flex; gap: 8px; }
.rx-rewards { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 0; border-radius: 10px; background: var(--lux); color: #fff; font: 800 12.5px var(--font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.rx-rewards:hover { background: var(--lux2); }
.rx-rewards svg { width: 18px; height: 18px; }
.rx-dc { width: 46px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border2); color: var(--text); transition: border-color .15s, color .15s; }
.rx-dc:hover { border-color: var(--lux-line); color: #fff; }
.rx-dc svg { width: 20px; height: 20px; }
@media (max-height: 900px) { .rx-card.soon { display: none; } }
/* collapsed rail and theatre mode: icons only */
body.rail-collapsed .rail-extras, body.theater .rail-extras { padding: 10px 8px; }
body.rail-collapsed .rx-t, body.rail-collapsed .rx-go, body.rail-collapsed .rx-rewards span, body.rail-collapsed .rx-card.soon,
body.theater .rx-t, body.theater .rx-go, body.theater .rx-rewards span, body.theater .rx-card.soon { display: none; }
body.rail-collapsed .rx-ref, body.theater .rx-ref { justify-content: center; padding: 10px 0; }
body.rail-collapsed .rx-row, body.theater .rx-row { flex-direction: column; }
body.rail-collapsed .rx-dc, body.theater .rx-dc { width: 100%; }
body.rail-collapsed .rail-sec, body.theater .rail-sec { display: none !important; }
body.rail-collapsed .rail-group.closed, body.theater .rail-group.closed { display: flex; }

/* ---- staff: chess fair-play reviews ---- */
#chessmsgs { padding: 8px; }
.cg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 2px 8px; }
.cg-head b { font-size: 13px; }
.cg-eng { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.cg-eng.on { color: #2fc774; background: rgba(47,199,116,.12); } .cg-eng.off { color: #f0a132; background: rgba(240,161,50,.12); }
.cg-manual { display: flex; gap: 6px; margin-bottom: 10px; }
.cg-manual input { flex: 1; min-width: 0; margin: 0; padding: 7px 9px; font-size: 12px; }
.cg-card { padding: 10px; margin-bottom: 8px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid #f0a132; }
.cg-card.strong { border-left-color: #ef4d62; } .cg-card.done { opacity: .65; }
.cg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cg-top b { font-size: 13px; }
.cg-lv { font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; color: #f0a132; background: rgba(240,161,50,.12); }
.cg-lv.strong { color: #ef4d62; background: rgba(239,77,98,.12); }
.cg-when { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.cg-game { padding: 7px 0; border-top: 1px solid var(--border); font-size: 11.5px; }
.cg-gl { color: var(--muted); } .cg-gl b { color: var(--text); }
.cg-res { font-weight: 800; font-size: 10px; } .cg-res.won { color: #2fc774; } .cg-res.lost { color: var(--muted); }
.cg-stats { margin-top: 3px; color: var(--muted); font-size: 11px; } .cg-stats b { color: var(--text); }
.cg-why { margin: 4px 0 0 16px; padding: 0; color: var(--text); font-size: 11px; line-height: 1.45; }
.cg-note { width: 100%; margin: 6px 0; padding: 7px 9px; font-size: 12px; resize: vertical; }
.cg-acts { display: flex; gap: 6px; } .cg-acts .btn { flex: 1; padding: 9px 6px; font-size: 11px; }
.cg-done { margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted); }

/* ---- case opening: up to 15 reels. Cards shrink with the count
   (games.js reelScale) and reels sit in two or three columns. ---- */
.hreels.many { display: grid; gap: 8px; padding: 10px; }
.hreels.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hreels.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hreels.many .hreel { height: calc(226px * var(--hc-s, 1)); }
.hreels.many .hcard { flex-basis: var(--hc-w); width: var(--hc-w); height: calc(206px * var(--hc-s, 1)); padding: 6px 4px; gap: 3px; }
.hreels.many .hcard .hc-art { transform: scale(var(--hc-s, 1)); margin: calc(-18px * (1 - var(--hc-s, 1))) 0; }
.hreels.many .hcard .hc-n { font-size: 10px; } .hreels.many .hcard .hc-v { font-size: 10px; }
.hreels.many .hwin::before, .hreels.many .hwin::after { transform: scale(.7); }
@media (max-width: 700px) { .hreels.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qtyrow .opt.off { opacity: .35; cursor: not-allowed; }

/* ===================================================================
   Chat, newer look (DonutClash-style): avatar + name line with a level
   chip and time, message in a bubble, stacked follow-ups, own messages
   tinted, mentions lit, centred system pills, round send button.
   =================================================================== */
.chat-msgs { padding: 10px 12px !important; gap: 0 !important; }
#chatmsgs .cmsg, #achvmsgs .cmsg { position: relative; display: grid !important; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 8px 4px 2px !important; margin: 0 !important; background: none !important; border: 0 !important; }
#chatmsgs .cmsg.cont { padding-top: 3px !important; }
#chatmsgs .cmsg.cont .cavf { visibility: hidden; height: 0; }
#chatmsgs .cmsg.cont .chead { display: none !important; }
#chatmsgs .cmsg > div, #achvmsgs .cmsg > div { min-width: 0; }
#chatmsgs .cavf, #achvmsgs .cavf { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
#chatmsgs .cav, #achvmsgs .cav { width: 100% !important; height: 100% !important; border-radius: 9px !important; image-rendering: pixelated; }
#chatmsgs .chead, #achvmsgs .chead { display: flex !important; align-items: center; gap: 5px; min-width: 0; margin-bottom: 4px; line-height: 1.2; }
#chatmsgs .cu, #achvmsgs .cu { order: 2; font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatmsgs .clv, #achvmsgs .clv { order: 1; margin: 0 !important; min-width: 22px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 6px; font: 800 10px/1 var(--font) !important;
  color: var(--lc, #b7c0c9) !important; background: color-mix(in srgb, var(--lc, #b7c0c9) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc, #b7c0c9) 40%, transparent); }
#chatmsgs .chead > :not(.cu):not(.clv):not(.ctime), #achvmsgs .chead > :not(.cu):not(.clv):not(.ctime) { order: 3; }
#chatmsgs .ctime, #achvmsgs .ctime { order: 9; margin-left: auto; padding-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
#chatmsgs .ctx, #achvmsgs .ctx { display: inline-block; max-width: 100%; padding: 8px 11px; border-radius: 4px 12px 12px 12px; background: var(--panel2); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
#chatmsgs .cmsg.cont .ctx { border-radius: 12px; }
#chatmsgs .cmsg.mine .ctx { background: color-mix(in srgb, var(--lux) 18%, var(--panel2)); border-color: var(--lux-line); }
#chatmsgs .cment { font-weight: 800; color: #fff; background: color-mix(in srgb, var(--lux) 45%, transparent); padding: 0 3px; border-radius: 4px; }
html[data-theme="light"] #chatmsgs .cment { color: var(--text); }
#chatmsgs .cmsg:hover .ctx { border-color: var(--border2); }
/* system lines: a centred pill */
#chatmsgs .cmsg.sys { display: flex !important; justify-content: center; padding: 8px 0 !important; }
#chatmsgs .csys { display: inline-block; max-width: 92%; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); text-align: center; }
/* staff delete button sits top-right of the row */
/* staff delete button: its own slot at the right of the name row, so it never
   sits on the time; on stacked lines it sits beside the bubble. Fades in on hover. */
#chatmsgs .cdel { position: absolute; right: 2px; top: 8px; z-index: 2; opacity: .35; transition: opacity .15s; }
#chatmsgs .cmsg:hover .cdel { opacity: 1; }
#chatmsgs.mod-view .cmsg:not(.sys) .ctime { margin-right: 24px; }
#chatmsgs .cmsg.cont .cdel { top: 50%; transform: translateY(-50%); }
#chatmsgs .cmsg.sys .cdel { top: 50%; transform: translateY(-50%); }
#chatmsgs.mod-view .cmsg .ctx { max-width: calc(100% - 22px); }
/* tabs */
.chattabs { gap: 2px !important; padding: 3px !important; border-radius: 11px !important; background: var(--panel2) !important; border: 1px solid var(--border) !important; }
.chattab { border-radius: 8px !important; font-size: 11px !important; letter-spacing: .04em !important; }
.chattab.sel { background: var(--panel3) !important; color: var(--text) !important; box-shadow: none !important; }
/* input row */
.chat-input { display: flex !important; align-items: center; gap: 8px !important; padding: 10px 12px !important; border-top: 1px solid var(--border); }
#chatinput { flex: 1; min-width: 0; height: 42px; margin: 0 !important; padding: 0 14px !important; border-radius: 12px !important; background: var(--panel2) !important; border: 1px solid var(--border2) !important; font-size: 13px !important; }
#chatinput:focus { border-color: var(--lux-line) !important; outline: none; box-shadow: 0 0 0 3px var(--lux-soft) !important; }
.chat-input .chat-send { width: 42px !important; height: 42px !important; flex: 0 0 42px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 12px !important; background: var(--lux) !important; color: #fff !important; border: 0 !important; font-size: 0 !important; transition: background .15s, transform .1s; }
.chat-input .chat-send:hover { background: var(--lux2) !important; } .chat-input .chat-send:active { transform: scale(.94); }
.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); }

/* ---- update log ---- */
.newsmodal { max-width: 460px; }
.news-tag { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px; font: 800 10px var(--font); letter-spacing: .08em; color: var(--lux2); background: var(--lux-soft); border: 1px solid var(--lux-line); }
.news-date { margin: -4px 0 14px; font-size: 12px; color: var(--faint); }
.news-body { max-height: min(56vh, 460px); overflow-y: auto; margin-bottom: 16px; padding-right: 4px; }
.news-sec + .news-sec { margin-top: 14px; }
.news-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.news-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.news-sec li { position: relative; padding: 9px 12px 9px 28px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--text); }
.news-sec li::before { content: ''; position: absolute; left: 12px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--lux); }

/* ---- lobby game cards: same height, width follows the art (casino.html fitGameArt) ---- */
.gscroll .gcard:not(.scard) { --gh: 184px; flex: 0 0 calc(var(--gh) * var(--ar, .75)) !important; width: calc(var(--gh) * var(--ar, .75)) !important; height: var(--gh) !important; aspect-ratio: auto !important; }
.gscroll .gcard.xwide:not(.scard):not(.fitted) { --ar: 1.78; }
.gscroll .gcard:not(.scard) .art img { object-fit: cover !important; }
@media (max-width: 700px) { .gscroll .gcard:not(.scard) { --gh: 140px; } }

/* ---- update log icons ---- */
.news-h { display: flex; align-items: center; gap: 7px; }
.news-hi svg { display: block; width: 15px; height: 15px; color: var(--lux2); }
.news-sec li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px !important; }
.news-sec li::before { display: none !important; }
.news-ic { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--lux-soft); color: var(--lux2); }
.news-ic svg { width: 16px; height: 16px; }
.news-sec li span { padding-top: 4px; }
.rail-nav > * { flex-shrink: 0 !important; }   /* sections keep their height; the menu scrolls instead of squashing them */

/* ===================================================================
   Popups: wider and roomier. The wallet (deposit, withdraw, tip, promo
   and redeem codes, history) becomes a two-column panel on desktop:
   the tab you are on at the left, Discord and purchases at the right.
   Every other popup gets a proportionally wider box. Phones keep one
   column with the usual side gutter.
   =================================================================== */
.modal { max-width: 540px; padding: 28px 30px; }
.confirm-modal { max-width: 480px; }
.daily-modal { max-width: 440px; }
.tag-modal { max-width: 540px; }
.congrats-modal { max-width: 460px; }
.fair-modal { max-width: 700px; }
.vault-modal { max-width: 720px; }
.newsmodal { max-width: 560px; }
.onlinemodal { max-width: 560px; }
.modal label { letter-spacing: .06em; }
.modal input:not([type="checkbox"]):not([type="range"]), .modal select { height: 46px; border-radius: 10px; }
.modal .btn { min-height: 46px; border-radius: 10px; }

.walletmodal { max-width: 860px; padding: 28px 30px 30px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 26px; align-items: start; }
.walletmodal > .m-close { grid-column: 1 / -1; }
.walletmodal > .wm-head, .walletmodal > .wm-dephold { grid-column: 1 / -1; }
.walletmodal > .wm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 4px 44px 18px 0; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.walletmodal .wm-bal { font-size: 34px !important; }
.walletmodal > .wm-tabs { grid-column: 1; grid-row: 3; margin-bottom: 16px; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.walletmodal > .wm-tabs .wm-tab { padding: 11px 6px; font-size: 13px; }
.walletmodal > div[id^="wm-"] { grid-column: 1; grid-row: 4; min-width: 0; }
.walletmodal > .wm-discord, .walletmodal > .wm-purchases { grid-column: 2; margin: 0 !important; padding: 16px !important; border-radius: 12px; background: var(--panel); border: 1px solid var(--border) !important; }
.walletmodal > .wm-discord { grid-row: 3; }
.walletmodal > .wm-purchases { grid-row: 4; margin-top: 12px !important; }
.walletmodal .wm-ticket { margin-top: 14px; }
.walletmodal .cmdrow { margin-top: 12px; }
.walletmodal .cmdrow .cmd { font-size: 14px; }
@media (max-width: 820px) {
  .walletmodal { display: block; max-width: 560px; }
  .walletmodal > .wm-head { padding-right: 44px; }
  .walletmodal > .wm-discord, .walletmodal > .wm-purchases { margin-top: 14px !important; }
  .walletmodal > .wm-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .modal { padding: 22px 18px; } .walletmodal > .wm-tabs .wm-tab { font-size: 11.5px; padding: 10px 2px; } }

/* ---- who's online ---- */
.onlinebtn { cursor: pointer; font: inherit; border: 1px solid var(--border2); transition: border-color .15s, background .15s; }
.onlinebtn:hover { border-color: var(--lux-line); background: var(--lux-soft); }
.ol-sub { margin: -6px 0 12px; font-size: 12.5px; color: var(--muted); }
.ol-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; margin-bottom: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border2); }
.ol-search svg { width: 16px; height: 16px; color: var(--faint); flex: 0 0 auto; }
.ol-search input { flex: 1; min-width: 0; height: 40px !important; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.ol-list { max-height: min(56vh, 480px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.ol-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.ol-row[data-ign] { cursor: pointer; } .ol-row[data-ign]:hover { border-color: var(--border2); }
.ol-row.hid { opacity: .6; }
.ol-row .cavf { width: 34px !important; height: 34px !important; border-radius: 9px !important; flex: 0 0 auto; }
.ol-row .cav { width: 100% !important; height: 100% !important; border-radius: 8px !important; }
.ol-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ol-name b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-name .clv { min-width: 22px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 6px; font: 800 10px/1 var(--font); color: var(--lc, #b7c0c9); background: color-mix(in srgb, var(--lc, #b7c0c9) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc, #b7c0c9) 40%, transparent); }
.ol-state { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--faint); padding: 4px 8px; }
.ol-state.ok { color: #2fc774; }
.ol-add { background: var(--lux) !important; color: #fff !important; border-color: var(--lux) !important; }
.walletmodal > .wm-side { grid-column: 2; grid-row: 3 / span 2; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.walletmodal .wm-side > .wm-discord, .walletmodal .wm-side > .wm-purchases { margin: 0 !important; padding: 16px !important; border-radius: 12px; background: var(--panel); border: 1px solid var(--border) !important; }
@media (max-width: 820px) { .walletmodal > .wm-side { margin-top: 14px; } }

/* wallet action buttons next to inputs (REDEEM, CLAIM, SEND) */
.walletmodal .tip-row { display: flex; gap: 8px; align-items: stretch; }
.walletmodal .tip-row input { flex: 1; min-width: 0; }
.walletmodal .tip-row .chat-send { flex: 0 0 auto; min-width: 110px; height: 46px; border-radius: 10px; font: 800 12.5px var(--font); letter-spacing: .06em; background: var(--lux); color: #fff; border: 0; }
.walletmodal .tip-row .chat-send:hover { background: var(--lux2); }

/* ===================================================================
   Case result panel: animated backdrop tinted by the rarest drop,
   staggered item reveal, clean total bar. Reels get a subtle moving
   backdrop too.
   =================================================================== */
.cd-summary.cdr { position: relative; overflow: hidden; width: 100%; max-width: 820px; margin: 14px auto 16px; padding: 18px 20px 16px; gap: 14px; align-items: stretch;
  border-radius: 16px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--bc) 30%, var(--border)); animation: cdrIn .45s cubic-bezier(.2,.8,.25,1) both; }
@keyframes cdrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cdr-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cdr-bg i { position: absolute; width: 60%; height: 160%; top: -30%; border-radius: 50%; filter: blur(40px); opacity: .22; background: radial-gradient(circle, var(--bc), transparent 65%); animation: cdrDrift 9s ease-in-out infinite alternate; }
.cdr-bg i:nth-child(1) { left: -15%; }
.cdr-bg i:nth-child(2) { right: -15%; animation-delay: -4.5s; opacity: .14; background: radial-gradient(circle, var(--lux), transparent 65%); }
.cdr-bg b { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.05) 50%, transparent 65%); background-size: 250% 100%; animation: cdrSweep 5.5s linear infinite; }
.cdr-bg::after { content: ''; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
@keyframes cdrDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 6%) scale(1.15); } }
@keyframes cdrSweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.cd-summary.cdr > :not(.cdr-bg) { position: relative; z-index: 1; }
.cdr-head { display: flex; align-items: center; justify-content: space-between; }
.cdr-label { font-size: 13px; font-weight: 800; color: var(--text); }
.cdr-count { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.cdr .cs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cdr.one .cs-items { grid-template-columns: minmax(0, 220px); justify-content: center; }
.cdr .cs-it { position: relative; width: auto; padding: 14px 10px 12px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--tc) 9%, var(--panel2)) !important;
  border: 1px solid color-mix(in srgb, var(--tc) 35%, var(--border)) !important; border-bottom: 1px solid color-mix(in srgb, var(--tc) 35%, var(--border)) !important; box-shadow: none !important;
  animation: csPop .5s cubic-bezier(.2,.9,.25,1.25) var(--d, 0s) both; }
.cdr .cs-it::before { content: ''; position: absolute; left: 50%; top: 10px; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 45%, transparent), transparent 70%); filter: blur(6px); opacity: .8; }
.cdr .cs-it.t3::after, .cdr .cs-it.t4::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1px var(--tc), 0 0 22px color-mix(in srgb, var(--tc) 45%, transparent); animation: csGlow 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes csPop { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes csGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.cdr .cs-art { position: relative; height: 58px; display: grid; place-items: center; }
.cdr .cs-art img, .cdr .cs-art svg { width: 52px !important; height: 52px !important; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.cdr.one .cs-art { height: 96px; } .cdr.one .cs-art img, .cdr.one .cs-art svg { width: 88px !important; height: 88px !important; }
.cdr .cs-it .in { position: relative; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.cdr .cs-it .ir { position: relative; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--tc); opacity: 1; }
.cdr .cs-it .iv { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.22); font: 800 12px var(--mono); color: var(--text); }
.cdr .cs-it .iv .cx-coin { width: 14px; height: 14px; font-size: 8px; }
.cdr-foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--border); }
.cdr-tl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cdr-tv { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.cdr-tv .cx-coin { width: 20px; height: 20px; font-size: 11px; }
.cdr-tv b { font: 800 22px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cdr-profit { font: 800 11.5px var(--font); color: #2fc774; padding: 4px 10px; border-radius: 999px; background: rgba(47,199,116,.12); border: 1px solid rgba(47,199,116,.35); animation: csPop .4s ease both; }
/* the reel stage gets a slow moving backdrop */
.hreels { position: relative; overflow: hidden; isolation: isolate; }
.hreels::before { content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 30% at 30% 40%, color-mix(in srgb, var(--lux) 22%, transparent), transparent 70%), radial-gradient(35% 30% at 72% 60%, rgba(160,110,255,.16), transparent 70%);
  animation: hrDrift 14s ease-in-out infinite alternate; }
@keyframes hrDrift { from { transform: translate(-4%, -3%) rotate(0deg); } to { transform: translate(4%, 3%) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .cdr-bg i, .cdr-bg b, .hreels::before, .cdr .cs-it::after { animation: none !important; } }

/* ===================================================================
   Towers, cleaner: framed column, floor number + multiplier pill, blue
   active floor, emerald picks, faded rest, payout per floor, tiles flip
   like mines.
   =================================================================== */
.towerwrap { position: relative; width: 100%; max-width: 640px; margin: 16px auto 0; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); overflow: hidden; isolation: isolate; }
.towerwrap::before { content: ''; position: absolute; inset: -30%; z-index: -1; opacity: .35; pointer-events: none;
  background: radial-gradient(40% 25% at 50% 100%, color-mix(in srgb, var(--lux) 30%, transparent), transparent 70%); animation: hrDrift 12s ease-in-out infinite alternate; }
.towerwrap .tower { margin: 0 !important; max-width: none; gap: 6px; }
.trow { gap: 6px !important; padding: 4px 6px; border-radius: 12px; transition: background .2s; }
.trow .tm { flex: 0 0 86px !important; display: flex; align-items: center; gap: 7px; justify-content: flex-start; text-align: left; padding: 0 !important; background: none !important; box-shadow: none !important;
  font: 800 12.5px var(--mono) !important; color: var(--muted) !important; }
.trow .tm i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 6px; font: 800 10px/1 var(--font); font-style: normal; color: var(--faint); background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.trow .tt { height: 48px !important; border-radius: 10px !important; background: var(--panel2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; opacity: .55 !important; transition: transform .12s, border-color .12s, background .12s, opacity .2s; }
.trow .tpay { flex: 0 0 72px; text-align: right; font: 700 11.5px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
/* active floor */
.trow.active { background: var(--lux-soft); box-shadow: inset 3px 0 0 var(--lux); }
.trow.active .tm { color: var(--lux2) !important; } .trow.active .tm i { color: #fff; background: var(--lux); border-color: var(--lux); }
.trow.active .tpay { color: var(--text); }
.trow.active .tt { opacity: 1 !important; cursor: pointer; background: color-mix(in srgb, var(--lux) 10%, var(--panel2)) !important; border-color: var(--lux-line) !important; animation: none !important; }
.trow.active .tt::after { display: none !important; }
.trow.active .tt:hover { transform: translateY(-2px); border-color: var(--lux) !important; background: color-mix(in srgb, var(--lux) 20%, var(--panel2)) !important; }
/* finished floors */
.trow.done .tm { color: #2fc774 !important; } .trow.done .tm i { color: #2fc774; border-color: rgba(47,199,116,.4); background: rgba(47,199,116,.1); }
.trow.done .tt:not(.safe):not(.trap) { opacity: .25 !important; }
.trow .tt.safe { opacity: 1 !important; background: rgba(47,199,116,.14) !important; border-color: rgba(47,199,116,.55) !important; }
.trow .tt.boom { opacity: 1 !important; background: rgba(239,77,98,.18) !important; border-color: rgba(239,77,98,.65) !important; }
.trow .tt.trap { opacity: .75 !important; background: rgba(239,77,98,.08) !important; border-color: rgba(239,77,98,.3) !important; }
.trow .tt .mt-ico { width: 28px; height: 28px; }
/* tiles turn over like mines */
.trow .tt.flip { animation: mtFlip .5s cubic-bezier(.3,.7,.25,1) both !important; }
.trow .tt.boom { animation: mtFlip .45s cubic-bezier(.3,.7,.25,1) both, mtBoom .4s ease-out .45s !important; }
.trow .tt.flip .mt-ico, .trow .tt.boom .mt-ico { animation: mtIcon .45s cubic-bezier(.2,.9,.25,1.35) .22s both; }
@media (max-width: 600px) { .trow .tpay { display: none; } .trow .tm { flex-basis: 70px !important; } }

/* ---- battles: per-seat bot / join buttons ---- */
.bp.empty .bp-empty { display: flex; align-items: center; justify-content: center; }
.bp-seatbtn { padding: 10px 16px; border-radius: 10px; border: 1px dashed var(--lux-line); background: var(--lux-soft); color: var(--lux2); font: 800 12px var(--font); letter-spacing: .04em; cursor: pointer; transition: background .15s, color .15s; }
.bp-seatbtn:hover { background: var(--lux); color: #fff; border-style: solid; }
.bp-seatbtn.join { border-color: rgba(47,199,116,.5); background: rgba(47,199,116,.1); color: #2fc774; }
.bp-seatbtn.join:hover { background: #2fc774; color: #fff; }
.bp-seatbtn:disabled { opacity: .5; cursor: default; }
/* compact case opening: shorter idle stage too */
.hreels { padding: 10px !important; }
.hreel-idle { min-height: 150px; }
.hreel-idle .cicon, .hreel-idle img { width: 76px !important; height: 76px !important; }
.cd-head { padding: 12px 16px !important; }

/* ---- PvP rooms: which coins a room plays with ---- */
.roomcur { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font: 800 10px var(--font); letter-spacing: .04em; white-space: nowrap;
  color: #f2bd3a; background: rgba(242,189,58,.1); border: 1px solid rgba(242,189,58,.35); }
.roomcur.sponsored { color: #b69cff; background: rgba(128,88,224,.12); border-color: rgba(128,88,224,.4); }
.pr-who .roomcur, .dl-row .roomcur { margin-left: 8px; }
.curnote { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--muted); background: rgba(242,189,58,.06); border: 1px solid rgba(242,189,58,.22); }
.curnote.sp { background: rgba(128,88,224,.08); border-color: rgba(128,88,224,.3); }
.curnote b { color: var(--text); }
.joinbtn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- donut roll ---- */
@keyframes donutSpin { 0%, 70% { transform: rotate(0); } 85% { transform: rotate(-8deg) scale(1.06); } 100% { transform: rotate(0); } }
.hreel.donut-hit { box-shadow: 0 0 0 2px var(--lux), 0 0 40px rgba(79,124,255,.55) !important; animation: donutFlash .9s ease-out; }
.hreel.donut-hit .hcard.donut.win { transform: scale(1.06); transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
@keyframes donutFlash { 0% { background: rgba(79,124,255,.35); } 100% { background: var(--bg2); } }
.hreel.donut-roll { box-shadow: 0 0 0 1px var(--lux-line), inset 0 0 40px rgba(79,124,255,.18) !important; }
.donut-tag { position: absolute; left: 10px; top: 8px; z-index: 6; font: 800 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 3px 9px; border-radius: 999px; background: var(--lux); box-shadow: 0 4px 12px rgba(79,124,255,.45); pointer-events: none; animation: csPop .35s ease both; }

/* ---- case inspect popup ---- */
.cx-insp { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--faint); cursor: pointer; transition: color .15s, background .15s; }
.cx-insp:hover { color: var(--text); background: rgba(255,255,255,.06); }
.cx-insp svg { width: 16px; height: 16px; }
.cx-cardtop .cx-name { padding-left: 0 !important; }
.cx-offtag { align-self: center; margin: -4px 0 8px; padding: 2px 8px; border-radius: 999px; font: 800 9.5px var(--font); letter-spacing: .08em; color: var(--lux2); background: var(--lux-soft); border: 1px solid var(--lux-line); }
.cx-card.official { border-color: var(--lux-line); }
.ci-modal { max-width: 620px; }
.ci-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 40px; }
.ci-icon { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.ci-icon .cicon, .ci-icon img, .ci-icon svg { width: 46px !important; height: 46px !important; }
.ci-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.ci-cols { display: grid; grid-template-columns: 1fr 100px 80px; padding: 0 12px 6px 60px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ci-cols span:not(:first-child) { text-align: right; }
.ci-list { max-height: min(52vh, 440px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding-right: 2px; }
.ci-row { display: grid; grid-template-columns: 38px 1fr 100px 80px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--tc); }
.ci-art img, .ci-art svg { width: 34px !important; height: 34px !important; image-rendering: pixelated; }
.ci-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ci-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ci-meta span { font-size: 11px; font-weight: 700; color: var(--tc); }
.ci-val { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; font: 800 13px var(--mono); } .ci-val .cx-coin { width: 15px; height: 15px; font-size: 8px; }
.ci-ch { text-align: right; font: 700 12px var(--mono); color: var(--muted); }
/* builder: official switch */
.cxb-official { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--lux-soft); border: 1px solid var(--lux-line); cursor: pointer; }
.cxb-official input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--lux); }
.cxb-official b { display: block; font-size: 13px; } .cxb-official small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ---- free rank cases ---- */
.cx-rank { margin-top: 22px; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); }
.rankcases { display: flex !important; flex-direction: column; gap: 14px; }
.rk-hero { position: relative; display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(110deg, color-mix(in srgb, var(--rk, var(--lux)) 22%, var(--panel2)), var(--panel2) 65%); border: 1px solid color-mix(in srgb, var(--rk, var(--lux)) 45%, var(--border)); flex-direction: row !important; animation: none !important; }
.rk-hero.empty { cursor: default; background: var(--panel2); border-color: var(--border); }
.rk-hero-art { width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-items: center; }
.rk-hero-art .cicon, .rk-hero-art img, .rk-hero-art svg { width: 78px !important; height: 78px !important; filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.rk-hero.ready .rk-hero-art { animation: rkFloat 2.6s ease-in-out infinite; }
@keyframes rkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.rk-hero-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rk-hero-t small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rk-hero-t b { font-size: 20px; font-weight: 800; color: var(--text); }
.rk-hero-t span { font-size: 12.5px; color: var(--muted); }
.rk-hero-go { width: auto !important; min-width: 160px; padding: 13px 20px !important; }
.rk-hero-go[disabled] { background: var(--panel3) !important; color: var(--muted) !important; }
.rk-prog { display: flex; align-items: center; gap: 14px; }
.rk-prog-l { display: flex; flex-direction: column; min-width: 190px; } .rk-prog-l b { font-size: 13px; } .rk-prog-l span { font-size: 11.5px; color: var(--muted); }
.rk-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--panel3); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lux), var(--lux2)); }
.rk-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.rk-step { position: relative; padding: 10px 8px !important; border-radius: 12px !important; background: var(--panel2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; animation: none !important; }
.rk-step.current { border-color: var(--rk) !important; box-shadow: inset 0 0 0 1px var(--rk) !important; }
.rk-step.passed { opacity: .55; }
.rk-step.locked { opacity: .6; filter: none !important; }
.rk-step.locked .rk-icon { filter: grayscale(1) brightness(.55); }
.rk-step .rk-icon { position: relative; }
.rk-lock { position: absolute; right: -4px; bottom: -2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--panel); border: 1px solid var(--border2); color: var(--muted); filter: none; }
.rk-lock svg { width: 13px; height: 13px; }
.rk-step .rk-name { font-size: 12px !important; color: var(--text) !important; letter-spacing: 0 !important; }
.rk-step .rk-lvl { font-size: 10.5px !important; letter-spacing: 0 !important; font-weight: 600 !important; }
@media (max-width: 640px) { .rk-hero { flex-wrap: wrap; } .rk-hero-go { width: 100% !important; } .rk-prog { flex-direction: column; align-items: stretch; } }

/* ---- update screen: hero + promo ---- */
.newsmodal { max-width: 600px; padding: 0 0 22px !important; overflow: hidden; }
.newsmodal > :not(.news-hero):not(.m-close) { margin-left: 24px; margin-right: 24px; }
.news-hero { position: relative; display: flex; align-items: center; gap: 16px; padding: 26px 24px 22px; margin-bottom: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, color-mix(in srgb, var(--lux) 35%, var(--panel2)), var(--panel2) 70%); border-bottom: 1px solid var(--border); }
.news-hero-bg { position: absolute; inset: 0; z-index: -1; }
.news-hero-bg i { position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(34px); opacity: .5; animation: cdrDrift 8s ease-in-out infinite alternate; }
.news-hero-bg i:nth-child(1) { left: -60px; top: -80px; background: var(--lux); }
.news-hero-bg i:nth-child(2) { right: -40px; top: -40px; background: #8058e0; animation-delay: -3s; opacity: .35; }
.news-hero-bg i:nth-child(3) { right: 30%; bottom: -120px; background: #22b866; animation-delay: -5s; opacity: .2; }
.news-logo { width: 58px; height: 58px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: rkFloat 3s ease-in-out infinite; }
.news-hero .m-title { margin: 4px 0 2px; font-size: 24px; }
.news-hero .news-date { margin: 0; }
.news-promo { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(110deg, rgba(242,189,58,.16), rgba(242,189,58,.04)); border: 1px dashed rgba(242,189,58,.55); }
.news-promo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%); background-size: 250% 100%; animation: cdrSweep 4s linear infinite; }
.np-l { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.np-l small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f2bd3a; }
.np-l b { display: inline-flex; align-items: center; gap: 7px; font-size: 22px; font-weight: 800; }
.np-l b .cx-coin { width: 20px; height: 20px; font-size: 11px; }
.np-l span { font-size: 12.5px; color: var(--muted); } .np-l code { font: 800 13px var(--code); color: var(--text); padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.25); }
.np-r { display: flex; gap: 8px; } .np-r .btn { width: auto !important; padding: 10px 16px !important; min-height: 40px; }
.np-msg { flex-basis: 100%; font-size: 12px; font-weight: 700; } .np-msg.ok { color: #2fc774; } .np-msg.bad { color: var(--red); }

/* ---- races ---- */
.rx-card:not(.soon) { cursor: pointer; transition: border-color .15s, background .15s; }
.rx-card:not(.soon):hover { border-color: var(--lux-line); background: color-mix(in srgb, var(--lux) 8%, var(--panel2)); }
.racemodal { max-width: 900px; }
.rc-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.rc-tabs button { padding: 9px 16px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 800 13px var(--font); cursor: pointer; }
.rc-tabs button.sel { background: var(--lux-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--lux-line); }
.rc-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 26px 20px 20px; margin-bottom: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); }
.rc-hero-bg { position: absolute; inset: 0; z-index: -1; }
.rc-hero-bg i { position: absolute; width: 60%; height: 200%; top: -50%; border-radius: 50%; filter: blur(40px); opacity: .28; background: radial-gradient(circle, #f2bd3a, transparent 65%); animation: cdrDrift 9s ease-in-out infinite alternate; }
.rc-hero-bg i:nth-child(1) { left: -20%; } .rc-hero-bg i:nth-child(2) { right: -20%; background: radial-gradient(circle, var(--lux), transparent 65%); animation-delay: -4s; }
.rc-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 800 10.5px var(--font); letter-spacing: .1em; color: var(--lux2); background: var(--lux-soft); border: 1px solid var(--lux-line); }
.rc-hero.live .rc-status { color: #2fc774; background: rgba(47,199,116,.12); border-color: rgba(47,199,116,.4); }
.rc-name { margin-top: 10px; font-size: 26px; font-weight: 800; }
.rc-pool { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 800 34px var(--mono); color: #f2bd3a; }
.rc-pool .cx-coin { width: 28px; height: 28px; font-size: 14px; } .rc-pool small { font: 700 12px var(--font); color: var(--muted); margin-left: 4px; }
.rc-clock { margin-top: 8px; font-size: 14px; color: var(--muted); } .rc-clock b { font: 800 16px var(--mono); color: var(--text); }
.rc-dates { margin-top: 2px; font-size: 12px; color: var(--faint); }
.rc-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.rc-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rc-prizes { display: flex; flex-direction: column; gap: 5px; }
.rc-prize { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; }
.rc-prize span { color: var(--muted); font-weight: 700; } .rc-prize b { display: inline-flex; align-items: center; gap: 6px; font: 800 13px var(--mono); }
.rc-prize b .cx-coin { width: 15px; height: 15px; font-size: 8px; }
.rc-prize.t1 { border-color: rgba(242,189,58,.6); background: rgba(242,189,58,.08); } .rc-prize.t2 { border-color: rgba(200,210,225,.5); } .rc-prize.t3 { border-color: rgba(205,127,50,.55); }
.rc-how { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rc-you { margin-bottom: 8px; padding: 9px 12px; border-radius: 9px; background: var(--lux-soft); border: 1px solid var(--lux-line); font-size: 12.5px; }
.rc-board { display: flex; flex-direction: column; gap: 5px; }
.rc-row { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr) auto 90px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); }
.rc-row img { width: 28px; height: 28px; border-radius: 7px; image-rendering: pixelated; }
.rc-row b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-rank { font: 800 13px var(--mono); color: var(--muted); text-align: center; }
.rc-row.t1 .rc-rank { color: #f2bd3a; } .rc-row.t2 .rc-rank { color: #cfd6e2; } .rc-row.t3 .rc-rank { color: #cd7f32; }
.rc-row.me { border-color: var(--lux); background: var(--lux-soft); }
.rc-val { font: 700 12.5px var(--mono); color: var(--muted); } .rc-pz { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; font: 800 12.5px var(--mono); color: #f2bd3a; }
.rc-pz .cx-coin { width: 14px; height: 14px; font-size: 8px; }
.rc-empty { padding: 26px 16px; text-align: center; border-radius: 12px; border: 1px dashed var(--border2); color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .rc-grid { grid-template-columns: 1fr; } }

/* ---- referrals dashboard ---- */
.refmodal { max-width: 820px; }
.rf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rf-stats > div { padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.rf-stats small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); } .rf-stats b { display: block; margin-top: 4px; font: 800 22px var(--mono); } .rf-stats b.g { color: #2fc774; }
.rf-stats em { display: block; font-style: normal; font-size: 11px; color: var(--faint); }
.rf-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--lux-soft); border: 1px solid var(--lux-line); }
.rf-code small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; } .rf-code b { font: 800 18px var(--code); letter-spacing: .04em; }
.rf-link { flex: 1; min-width: 240px; display: flex; gap: 8px; } .rf-link input { flex: 1; min-width: 0; margin: 0 !important; } .rf-link .btn { width: auto !important; padding: 0 16px !important; }
.rf-cols, .rf-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px 100px 100px; gap: 10px; align-items: center; }
.rf-cols { padding: 0 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rf-cols span:not(:first-child), .rf-row > span:not(:first-child) { text-align: right; }
.rf-list { display: flex; flex-direction: column; gap: 5px; max-height: min(44vh, 380px); overflow-y: auto; }
.rf-row { padding: 9px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 12.5px; }
.rf-row[data-ign] { cursor: pointer; } .rf-row[data-ign]:hover { border-color: var(--border2); }
.rf-who { display: flex; align-items: center; gap: 9px; min-width: 0; } .rf-who img { width: 28px; height: 28px; border-radius: 7px; image-rendering: pixelated; }
.rf-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rf-on { width: 7px; height: 7px; border-radius: 50%; background: #2fc774; flex: 0 0 auto; }
.rf-earn { font-weight: 800; color: #2fc774; font-family: var(--mono); }
.rf-empty { padding: 26px 16px; text-align: center; border-radius: 12px; border: 1px dashed var(--border2); } .rf-empty b { display: block; margin-bottom: 4px; } .rf-empty span { font-size: 12.5px; color: var(--muted); }
.rf-note { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
@media (max-width: 640px) { .rf-stats { grid-template-columns: 1fr; } .rf-cols { display: none; } .rf-row { grid-template-columns: 1fr auto; } .rf-row > span:nth-child(2), .rf-row > span:nth-child(3) { display: none; } }
.wd-req { margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(242,189,58,.08); border: 1px solid rgba(242,189,58,.35); }
.wd-req b { display: block; font-size: 13.5px; color: #f2bd3a; } .wd-req span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* ---- chat delete (staff): its own column, never on top of anything ---- */
#chatmsgs.mod-view .cmsg:not(.sys) { grid-template-columns: 34px minmax(0, 1fr) 20px !important; }
#chatmsgs .cmsg:not(.sys) > .cavf { grid-column: 1; grid-row: 1; }
#chatmsgs .cmsg:not(.sys) > div { grid-column: 2; grid-row: 1; }
#chatmsgs.mod-view .cmsg .cdel { position: static !important; transform: none !important; grid-column: 3; grid-row: 1; align-self: start; justify-self: end; margin-top: 1px; width: 18px; height: 18px; }
#chatmsgs.mod-view .cmsg.cont .cdel { align-self: center; margin-top: 0; }
#chatmsgs.mod-view .cmsg:not(.sys) .ctime { margin-right: 0 !important; }
#chatmsgs.mod-view .cmsg .ctx { max-width: 100% !important; }
#chatmsgs.mod-view .cmsg.sys { gap: 6px; align-items: center; }
#chatmsgs.mod-view .cmsg.sys .cdel { order: 2; }

/* ---- staff: moderation buttons, owner stats, deduct currency ---- */
.up-modrow { display: block !important; margin-top: 10px; }
.up-modrow > span { display: none !important; }
.mod-seg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.mod-lab { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 12px; font-weight: 800; color: var(--muted); }
.mod-lab svg { width: 16px; height: 16px; }
.modbtn { height: 34px; min-width: 50px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border2); background: var(--panel2); color: var(--text); font: 800 12px var(--font); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.modbtn:hover { border-color: var(--lux-line); background: var(--lux-soft); } .modbtn:active { transform: scale(.96); }
.modbtn.ok { color: #2fc774; border-color: rgba(47,199,116,.4); background: rgba(47,199,116,.08); } .modbtn.ok:hover { background: rgba(47,199,116,.18); }
.modbtn.danger { color: #fff; border-color: #e0485c; background: #e0485c; } .modbtn.danger:hover { background: #ef5b6f; }
.mod-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .mod-big .modbtn { height: 42px; font-size: 12.5px; }
#umodMsg:not(:empty) { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(239,77,98,.08); border: 1px solid rgba(239,77,98,.3); color: var(--text); font-weight: 700; }
#umodreason { margin-bottom: 0 !important; }
.ob-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 4px; }
.ob-more > div { padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--border); min-width: 0; }
.ob-more small { display: block; font-size: 10.5px; color: var(--faint); font-weight: 700; } .ob-more b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-deduct { display: flex; gap: 6px; align-items: center; }
.ob-cur { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); flex: 0 0 auto; }
.ob-cur button { padding: 6px 9px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 800 11px var(--font); cursor: pointer; }
.ob-cur button.sel { background: var(--panel3); color: var(--text); }
.ob-cur button[data-cur="sponsored"].sel { color: #b69cff; }
/* ---- ban screen ---- */
.ban-watch { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: 12.5px; color: var(--muted); text-align: left; }
.ban-watch i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #f2bd3a; box-shadow: 0 0 0 0 rgba(242,189,58,.6); animation: banPulse 1.8s ease-out infinite; }
@keyframes banPulse { 0% { box-shadow: 0 0 0 0 rgba(242,189,58,.55); } 100% { box-shadow: 0 0 0 10px rgba(242,189,58,0); } }
.banscreen.lifted .ban-watch { border-color: rgba(47,199,116,.5); color: #2fc774; } .banscreen.lifted .ban-watch i { background: #2fc774; }
.banscreen .ban-card { max-width: 520px; border-radius: 18px; }
.banscreen .ban-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.banscreen .ban-r { border-radius: 10px; }
.newsmodal .news-body { max-height: min(38vh, 380px); }
.newsmodal #newsok { display: block; width: calc(100% - 48px) !important; }
.newsmodal { max-height: 92vh; overflow-y: auto; }
.rc-prizes .rc-prize { height: auto; }

/* ---- rakeback ---- */
.rbmodal { max-width: 720px; }
.rb-sub { margin: -6px 0 14px; font-size: 12.5px; color: var(--muted); }
.rb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rb-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.rb-card.ready { border-color: rgba(47,199,116,.45); background: linear-gradient(180deg, rgba(47,199,116,.08), var(--panel)); }
.rb-k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rb-amt { display: flex; align-items: center; gap: 6px; font: 800 20px var(--mono); }
.rb-amt .cx-coin { width: 18px; height: 18px; font-size: 10px; }
.rb-card .btn { width: 100% !important; min-height: 40px; padding: 0 8px !important; font-size: 12px !important; }
.rb-card .btn[disabled] { background: var(--panel3) !important; color: var(--muted) !important; font-family: var(--mono) !important; }
.rb-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--faint); }
@media (max-width: 640px) { .rb-grid { grid-template-columns: 1fr 1fr; } }

/* ---- case reel: the winning card, landed calmly ---- */
.hcard { transition: transform .38s cubic-bezier(.2,.9,.3,1.2), opacity .35s ease, border-color .3s ease, background-color .3s ease; }
.hreel.landed .hcard:not(.win) { opacity: .38 !important; }
.hcard.win { transform: translateY(-3px) scale(1.04); border-color: var(--tc) !important; background: color-mix(in srgb, var(--tc) 12%, var(--panel2)) !important; z-index: 2; }
.hcard .hc-art { position: relative; }
.hcard.win .hc-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 110%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 45%, transparent), transparent 68%); animation: winGlow .7s ease-out both; z-index: -1; }
.hcard.win .hc-art img, .hcard.win .hc-art svg { animation: winItem .55s cubic-bezier(.2,.9,.3,1.35) both; }
.hcard.win .hc-bar { opacity: 1 !important; transform-origin: left; animation: winBar .55s cubic-bezier(.2,.8,.2,1) .05s both; }
.hreel.landed .hwin { animation: winLine .5s ease-out; }
@keyframes winGlow { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes winItem { 0% { transform: scale(.9); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes winBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes winLine { 0% { opacity: .3; } 40% { opacity: 1; } 100% { opacity: .85; } }

/* ---- Plinko v2 ---- */
.pk-wrap { position: relative; max-width: 860px; margin: 0 auto; padding: 4px 0 2px; }
.pk-board { width: 100%; display: flex; justify-content: center; }
.pk-board canvas { display: block; }
/* Last drops sit in the empty top-right corner beside the triangle. */
.pk-recent { position: absolute; right: 4px; top: 6px; width: 54px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.pk-r { height: 28px; border-radius: 7px; display: grid; place-items: center; font: 800 11.5px/1 'Archivo', 'Rubik', sans-serif; color: #0b0e1d; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.22); }
.pk-r:nth-child(n+4) { opacity: .5; }
.pk-r.new { animation: pkIn .3s cubic-bezier(.2,.9,.3,1.25); }
@keyframes pkIn { from { transform: translateY(-12px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) { .pk-recent { width: 44px; } .pk-r { height: 24px; font-size: 10.5px; } .pk-r:nth-child(n+5) { display: none; } }

/* ---- donut card: the logo alone, on a moving ring ---- */
.hcard.donut, .bpc.donut { position: relative; display: grid !important; place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 40%, #1d2a66 0%, #111737 58%, #0a0e24 100%) !important;
  border: 1px solid rgba(106,144,255,.45) !important; }
.bpc.donut { padding: 0; }
.donut .dn-ring { position: absolute; inset: -40%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 55%, rgba(106,144,255,.0) 60%, rgba(106,144,255,.9) 75%, #fff 78%, rgba(106,144,255,.9) 81%, transparent 90%); animation: dnSpin 2.6s linear infinite; }
.donut::after { content: ''; display: block !important; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 40%, #1d2a66 0%, #111737 58%, #0a0e24 100%); }
.donut .dn-halo { position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(106,144,255,.55), rgba(79,124,255,.12) 55%, transparent 70%); animation: dnPulse 1.8s ease-in-out infinite; }
.donut .dn-shine { position: absolute; z-index: 2; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%); transform: translateX(-120%); animation: dnShine 3.4s ease-in-out infinite; pointer-events: none; }
.donut .donut-logo { position: relative; z-index: 1; width: 64%; max-height: 72%; height: auto; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(79,124,255,.7)); animation: dnFloat 2.4s ease-in-out infinite; }
.bpc.donut .donut-logo { width: 70%; }
.hreel.donut-hit .donut.win, .bp-reel.donut-hit .donut.target { transform: scale(1.08); transition: transform .3s cubic-bezier(.2,.9,.3,1.4); box-shadow: 0 0 0 2px #fff, 0 0 34px rgba(106,144,255,.9); }
.hreel.donut-hit .donut.win .donut-logo, .bp-reel.donut-hit .donut.target .donut-logo { animation: dnHit .75s cubic-bezier(.2,.9,.3,1.2) both; }
.hreel.donut-hit .donut.win .dn-ring, .bp-reel.donut-hit .donut.target .dn-ring { animation-duration: .5s; }
.bp-reel.donut-hit { box-shadow: 0 0 0 2px var(--lux), 0 0 36px rgba(79,124,255,.5); animation: donutFlash .75s ease-out; }
.bp-reel.donut-roll { box-shadow: 0 0 0 1px var(--lux-line), inset 0 0 40px rgba(79,124,255,.2); }
.donut-tag { display: none !important; }
@keyframes dnSpin { to { transform: rotate(360deg); } }
@keyframes dnPulse { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes dnShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes dnFloat { 0%, 100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes dnHit { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.35) rotate(-14deg); filter: drop-shadow(0 0 22px #fff); } 70% { transform: scale(.95) rotate(8deg); } 100% { transform: scale(1.1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .donut .dn-ring, .donut .dn-halo, .donut .dn-shine, .donut .donut-logo { animation: none !important; } }

/* ---- builder: donut roll ---- */
.cxb-donut { margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); }
.cxb-dn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cxb-dn-head img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(79,124,255,.5)); }
.cxb-dn-head b { display: block; font-size: 13px; } .cxb-dn-head small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.cxb-donut .cxb-comm { margin: 0; }
.cxb-ib.dn img { width: 17px; height: 17px; object-fit: contain; filter: grayscale(1) opacity(.45); transition: filter .15s, transform .15s; }
.cxb-ib.dn.on { background: var(--lux-soft); }
.cxb-ib.dn.on img { filter: none; transform: rotate(-12deg) scale(1.08); }

/* ---- Races: full page ---- */
#racepage { max-width: 1040px; margin: 0 auto; padding: 8px 0 40px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rp-head .rc-tabs { margin: 0; }
.rp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: 16px; background: linear-gradient(135deg, #1a2150, #111633 60%, #0d1128); border: 1px solid var(--border2); }
html[data-theme="light"] .rp-hero { background: linear-gradient(135deg, #243170, #182056); color: #fff; }
.rp-hl h1 { margin: 8px 0 4px; font: 900 34px/1.05 var(--display); letter-spacing: -.01em; color: #fff; }
.rp-dates { color: rgba(255,255,255,.62); font-size: 13px; }
.rp-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 800 11px var(--font); letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.1); color: #fff; }
.rp-status.live { background: rgba(55,214,122,.18); color: #5ff0a0; }
.rp-status.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: rpBlink 1.4s ease-in-out infinite; }
@keyframes rpBlink { 50% { opacity: .25; } }
.rp-hr { display: flex; gap: 12px; }
.rp-pool, .rp-clock { min-width: 150px; padding: 12px 16px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
.rp-pool small, .rp-clock small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.rp-pool b { font: 900 26px/1 var(--mono); color: #ffd35a; }
.rp-clock b { font: 800 20px/1.2 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }

.rp-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 14px; margin: 26px 0 16px; }
.rp-pod { --pc: #b9c3d6; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.rp-pod.p1 { --pc: #ffcf4a; } .rp-pod.p2 { --pc: #cfd7e6; } .rp-pod.p3 { --pc: #e0935a; }
.rp-av { position: relative; width: 74px; height: 74px; margin-bottom: 10px; }
.rp-pod.p1 .rp-av { width: 92px; height: 92px; }
.rp-av img { width: 100%; height: 100%; border-radius: 16px; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--pc), 0 10px 30px color-mix(in srgb, var(--pc) 35%, transparent); background: var(--panel2); }
.rp-pod.open .rp-av img { opacity: .35; filter: grayscale(1); }
.rp-medal { position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 13px var(--mono); color: #1a1405; background: var(--pc); box-shadow: 0 0 0 3px var(--bg); }
.rp-nm { max-width: 100%; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-pod.open .rp-nm { color: var(--faint); font-weight: 600; font-size: 13px; }
.rp-vl { margin: 2px 0 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rp-step { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 14px 14px 8px 8px; padding: 16px 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 22%, var(--panel)), var(--panel) 85%); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); border-bottom: 0; }
.rp-pod.p1 .rp-step { min-height: 128px; } .rp-pod.p2 .rp-step { min-height: 100px; } .rp-pod.p3 .rp-step { min-height: 84px; }
.rp-place { font: 900 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.rp-prize { font: 900 22px/1 var(--mono); color: var(--text); }
.rp-pod.p1 .rp-prize { font-size: 28px; }
.rp-pod.me .rp-step { box-shadow: inset 0 0 0 2px var(--lux); }
.rp-dash { color: var(--faint); }

.rp-you { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: var(--lux-soft); border: 1px solid var(--lux-line); font-size: 13px; }
.rp-you span:first-child { color: var(--muted); font-weight: 600; } .rp-you b { font-weight: 900; } .rp-you-v { margin-left: auto; font-weight: 700; }
.rp-table { border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--border); }
.rp-th, .rp-row { display: grid; grid-template-columns: 70px 1fr 140px 140px; align-items: center; gap: 10px; padding: 0 16px; }
.rp-th { height: 38px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--border); }
.rp-th span:nth-child(n+3), .rp-row > span:nth-child(n+3) { text-align: right; }
.rp-row { height: 50px; border-bottom: 1px solid var(--border); font-size: 14px; }
.rp-row:last-child { border-bottom: 0; }
.rp-row:nth-child(odd) { background: color-mix(in srgb, var(--panel2) 55%, transparent); }
.rp-row.me { background: var(--lux-soft); box-shadow: inset 3px 0 0 var(--lux); }
.rp-rk { color: var(--muted); font-weight: 800; font-family: var(--mono); }
.rp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-who img { width: 26px; height: 26px; border-radius: 6px; image-rendering: pixelated; }
.rp-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-who i { color: var(--faint); font-style: normal; }
.rp-v { color: var(--muted); font-weight: 600; } .rp-p { font-weight: 800; font-family: var(--mono); }
.rp-row.open .rp-p { color: var(--muted); }
.rp-empty { padding: 18px 16px; color: var(--muted); font-size: 13px; }
.rp-how { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.rp-how b { display: block; margin-bottom: 6px; font-size: 14px; } .rp-how p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) {
  .rp-hero { padding: 20px 18px; } .rp-hl h1 { font-size: 26px; }
  .rp-hr { width: 100%; } .rp-pool, .rp-clock { flex: 1; min-width: 0; }
  .rp-podium { gap: 8px; } .rp-av { width: 54px; height: 54px; } .rp-pod.p1 .rp-av { width: 66px; height: 66px; }
  .rp-prize { font-size: 16px; } .rp-pod.p1 .rp-prize { font-size: 19px; }
  .rp-th, .rp-row { grid-template-columns: 44px 1fr 86px 78px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
}

/* ---- Ban screen v2 ---- */
.banscreen { background: #070913 !important; overflow: auto; }
.banscreen .ban-glow { display: none; }
.bn-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bn-bg i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .22; animation: bnDrift 14s ease-in-out infinite alternate; }
.bn-bg i:nth-child(1) { left: -25vmax; top: -30vmax; background: radial-gradient(circle, #ff4d6a, transparent 62%); }
.bn-bg i:nth-child(2) { right: -25vmax; bottom: -35vmax; background: radial-gradient(circle, #4f7cff, transparent 62%); animation-delay: -7s; }
.banscreen.temp .bn-bg i:nth-child(1) { background: radial-gradient(circle, #f2b53a, transparent 62%); }
.bn-bg b { 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: 44px 44px; mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%); }
@keyframes bnDrift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }
.ban-card.bn2 { --bc: #ff5a6e; position: relative; z-index: 1; max-width: 540px; padding: 0 !important; overflow: hidden; border-radius: 20px !important; text-align: left;
  background: linear-gradient(180deg, rgba(22,27,52,.94), rgba(13,16,33,.96)) !important; border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4) !important; backdrop-filter: blur(10px); animation: bnIn .55s cubic-bezier(.2,.8,.2,1) both !important; }
.banscreen.temp .ban-card.bn2 { --bc: #f2b53a; }
.ban-card.bn2::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--bc), transparent); }
@keyframes bnIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.bn-top { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 800; font-size: 14px; color: #fff; }
.bn-logo { width: 26px; height: 26px; object-fit: contain; }
.bn-pill { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent); }
.bn-main { padding: 26px 22px 6px; text-align: center; }
.bn-seal { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center; color: var(--bc); background: color-mix(in srgb, var(--bc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 35%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--bc) 25%, transparent); }
.bn-seal svg { width: 38px; height: 38px; }
.bn-ring { position: relative; width: 124px; height: 124px; margin: 0 auto 14px; }
.bn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bn-ring circle { fill: none; stroke-width: 7; }
.bn-ring .tr { stroke: rgba(255,255,255,.08); }
.bn-ring .fg { stroke: var(--bc); stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray 1s linear; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bc) 60%, transparent)); }
.bn-ring-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.bn-ring-t b { font: 900 19px/1.1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.bn-ring-t small { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ban-card.bn2 h1 { margin: 0 0 8px !important; font: 900 26px/1.15 var(--display) !important; color: #fff; }
.ban-card.bn2 .bn-main p { margin: 0 auto 8px; max-width: 400px; color: rgba(238,241,251,.66); font-size: 14px; line-height: 1.55; }
.bn-reason { margin: 14px 22px 0; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); border-left: 3px solid var(--bc); }
.bn-reason span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bn-reason p { margin: 4px 0 0; color: #fff; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.bn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 12px 22px 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); }
.bn-row { padding: 11px 14px; background: rgba(14,18,37,.96); min-width: 0; }
.bn-row span { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45); margin-bottom: 3px; }
.bn-row b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-ref { font-family: var(--code, ui-monospace, monospace); letter-spacing: .06em; }
.bn-copy { padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.7); font: 700 11px var(--font); cursor: pointer; }
.bn-copy:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.ban-card.bn2 .ban-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 22px 0; }
.ban-card.bn2 .ban-acts .btn { height: 44px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; letter-spacing: 0; text-transform: none; font-size: 14px; }
.ban-card.bn2 .ban-acts .btn:not(.alt) { background: #5865f2; color: #fff; border: 0; }
.ban-card.bn2 .ban-watch { margin: 12px 22px 0; }
.ban-card.bn2 .ban-foot { margin: 0; padding: 14px 22px 18px; text-align: center; font-size: 12px; letter-spacing: 0; color: rgba(255,255,255,.4); }
@media (max-width: 520px) { .bn-grid { grid-template-columns: 1fr; } .ban-card.bn2 .ban-acts { grid-template-columns: 1fr; } .ban-card.bn2 h1 { font-size: 22px !important; } }

/* ---- quiet reconnect bar ---- */
.connbar { position: fixed; left: 50%; top: 12px; z-index: 900; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px;
  background: rgba(16,20,40,.94); border: 1px solid var(--border2); color: var(--text); font: 600 12.5px var(--font); box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: connIn .25s ease; }
.connbar i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--lux); animation: connSpin .8s linear infinite; }
.connbar[hidden] { display: none; }
@keyframes connSpin { to { transform: rotate(360deg); } }
@keyframes connIn { from { opacity: 0; transform: translate(-50%, -6px); } }
.bn-review { margin: 12px 22px 0; }
.bn-review label { display: block; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.bn-review textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); color: #fff; font: 14px/1.45 var(--font); resize: vertical; }
.bn-review textarea:focus { outline: none; border-color: var(--lux); }
.bn-rv-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bn-rv-row .btn { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.bn-rv-err { color: #ff8b9a; font-size: 12.5px; }
.bn-rv { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.bn-rv b { display: block; color: #fff; font-size: 14px; } .bn-rv span { color: rgba(238,241,251,.66); font-size: 13px; }
.bn-rv.wait { border-color: rgba(79,124,255,.45); } .bn-rv.ok { border-color: rgba(55,214,122,.45); } .bn-rv.no { border-color: rgba(255,90,110,.4); }
/* staff: ban reviews */
.br-card { margin: 8px 4px; padding: 10px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); font-size: 12.5px; }
.br-card.done { opacity: .6; }
.br-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .br-top span { margin-left: auto; color: var(--faint); font-size: 11px; }
.br-meta { color: var(--muted); margin-bottom: 6px; } .br-text { color: var(--text); margin-bottom: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.br-card textarea { width: 100%; margin-bottom: 6px; }
.br-acts { display: flex; gap: 6px; } .br-acts .btn { flex: 1; height: 32px; font-size: 12px; }

/* ---- level path ---- */
.lvl-pathbtn { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--lux2); font: 700 12.5px var(--font); cursor: pointer; }
.lvl-pathbtn:hover { text-decoration: underline; }
.lpmodal { max-width: 620px !important; width: 100%; max-height: min(88vh, 860px); display: flex; flex-direction: column; }
#lpbody { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lp-head { padding: 14px 16px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); margin-bottom: 12px; }
.lp-now { display: flex; align-items: center; gap: 12px; }
.lp-lv { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 900 18px var(--mono); color: #0b0e1d; background: var(--lc); box-shadow: 0 6px 18px color-mix(in srgb, var(--lc) 35%, transparent); }
.lp-now small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; } .lp-now b { font-size: 16px; }
.lp-bar { height: 8px; margin: 12px 0 8px; border-radius: 99px; background: var(--panel3); overflow: hidden; }
.lp-bar div { height: 100%; border-radius: inherit; background: var(--lux); }
.lp-sub { font-size: 13px; color: var(--muted); } .lp-sub b { color: var(--text); }
.lp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.lp-facts div { padding: 8px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); }
.lp-facts small { display: block; font-size: 11px; color: var(--faint); } .lp-facts b { font-size: 14px; }
.lp-list { list-style: none; margin: 0; padding: 4px 4px 4px 0; overflow-y: auto; flex: 1; min-height: 0; }
.lp-step { position: relative; display: flex; gap: 14px; padding: 0 0 16px; }
.lp-step::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--border2); }
.lp-step:last-child::before { display: none; }
.lp-step.done::before { background: color-mix(in srgb, var(--lc) 60%, transparent); }
.lp-dot { position: relative; z-index: 1; flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--mono); color: var(--muted); background: var(--panel2); border: 2px solid var(--border2); }
.lp-dot svg { width: 18px; height: 18px; }
.lp-step.done .lp-dot { color: #0b0e1d; background: var(--lc); border-color: var(--lc); }
.lp-step.cur .lp-dot { color: var(--text); border-color: var(--lc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc) 18%, transparent); }
.lp-body { flex: 1; min-width: 0; padding: 7px 12px 10px; border-radius: 10px; }
.lp-step.cur .lp-body { background: var(--panel2); border: 1px solid color-mix(in srgb, var(--lc) 40%, transparent); }
.lp-t { display: flex; align-items: baseline; gap: 10px; } .lp-t b { font-size: 14px; } .lp-t span { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.lp-step.done .lp-t b { color: var(--lc); }
.lp-body ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.lp-body li { padding: 1px 0; } .lp-body li.lp-rb { color: var(--faint); }
.lp-mini { height: 4px; margin-top: 8px; border-radius: 99px; background: var(--panel3); overflow: hidden; } .lp-mini i { display: block; height: 100%; background: var(--lc); }
.lp-note { margin-top: 10px; font-size: 12px; color: var(--faint); }
@media (max-width: 520px) { .lp-facts { grid-template-columns: 1fr 1fr; } }

/* ---- cases: plainer page ---- */
.hreel-still { position: relative; overflow: hidden; }
.hreel-still .hstrip { position: relative; left: 50%; transform: translateX(-50%); width: max-content; display: flex; }
.hreel-still .hcard { opacity: .5; }
.hreel-still .hcard.idle-mid { opacity: .85; }
.cd-name { text-transform: none !important; letter-spacing: 0 !important; }
.cd-quick span:first-child, .cd-demo, .cd-open { text-transform: none !important; letter-spacing: 0 !important; }
.cd-open { font-size: 15px !important; }
.lastdrops { display: none !important; }
.cd-lh { display: flex; justify-content: space-between; margin: 22px 2px 8px; font-size: 12px; font-weight: 700; color: var(--faint); }
.cd-odds { font-family: var(--mono); font-weight: 700; color: var(--muted) !important; }
.cd-rsub { color: var(--text) !important; font-weight: 600; }
.cd-summary.cdr2 { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); box-shadow: none; animation: cdr2In .25s ease-out; }
@keyframes cdr2In { from { opacity: 0; transform: translateY(6px); } }
.cdr2-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.cdr2-head span { color: var(--muted); font-size: 13px; font-weight: 600; }
.cdr2-head b { font: 800 20px var(--mono); }
.cdr2-head em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--faint); }
.cdr2-head em.up { color: var(--win); }
.cdr2-items { display: flex; flex-wrap: wrap; gap: 8px; }
.cdr2-it { width: 112px; padding: 10px 8px 9px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); border-bottom: 2px solid var(--tc); text-align: center; }
.cdr2-art { height: 48px; display: grid; place-items: center; margin-bottom: 6px; }
.cdr2-art img, .cdr2-art .cicon { max-width: 44px; max-height: 44px; }
.cdr2-n { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdr2-v { margin-top: 2px; font: 700 12.5px var(--mono); color: var(--muted); }
.cd-summary.cdr2.one .cdr2-it { width: 140px; }
@media (max-width: 640px) { .cdr2-it { width: calc(33.333% - 6px); } }
.cdr2-art > * { width: 44px !important; height: 44px !important; max-width: 44px; max-height: 44px; }
.cdr2-art img { object-fit: contain; }
.cd-summary.cdr2, .cdr2-head, .cdr2-items { text-align: left; justify-content: flex-start; }

/* ---- update log: plain notes, not a banner ad ---- */
.result.lose { color: var(--muted) !important; }
.newsmodal { max-width: 540px; }
.news-hero { background: none !important; padding: 22px 24px 6px !important; margin-bottom: 8px !important; border: 0 !important; }
.news-hero-bg { display: none; }
.news-logo { width: 40px !important; height: 40px !important; border-radius: 10px !important; animation: none !important; box-shadow: none !important; }
.news-hero .m-title { font-size: 20px !important; margin: 0 !important; }
.news-promo { background: var(--panel2) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 12px 14px !important; }
.news-promo::after, .news-promo::before { display: none !important; }
.news-promo .np-l small { text-transform: none !important; letter-spacing: 0 !important; color: var(--muted) !important; font-weight: 600; }
.news-promo .btn { text-transform: none; letter-spacing: 0; }
.news-sec li { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 6px 0 !important; gap: 10px; }
.news-sec li + li { border-top: 1px solid var(--border) !important; }
.news-ic { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; background: none !important; margin-top: 3px; }
.news-sec li span { padding-top: 0 !important; line-height: 1.5; color: var(--text); }
.news-h { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--text) !important; margin: 4px 0 2px !important; }
.news-hi { display: none; }
#newsok { text-transform: none; letter-spacing: 0; }
.bn-review label { text-transform: none !important; letter-spacing: 0 !important; }
.bn-rv-row .btn { width: auto !important; flex: 0 0 auto; }
.cd-summary.cdr2 { display: block !important; }
.cdr2-head { justify-content: flex-start !important; }

/* ---- chicken road: difficulty buttons ---- */
.ck-diffs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.ck-d { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; text-align: left; }
.ck-d b { font-size: 13px; } .ck-d small { font-size: 11.5px; color: var(--muted); }
.ck-d:hover { border-color: var(--border2); }
.ck-d.sel { border-color: var(--lux); background: var(--lux-soft); }
.ck-diffs.locked .ck-d:not(.sel) { opacity: .45; cursor: not-allowed; }
.roadwrap { width: 100%; } .roadwrap canvas { display: block; border-radius: 12px; }

/* ---- settings ---- */
.setmodal { max-width: 760px !important; width: 100%; }
.set-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 18px; min-height: 380px; }
.set-nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); padding-right: 12px; }
.set-nav button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 13.5px var(--font); cursor: pointer; }
.set-nav button:hover { color: var(--text); background: var(--panel2); }
.set-nav button.sel { color: var(--text); background: var(--panel2); box-shadow: inset 2px 0 0 var(--lux); }
.set-nav button[hidden] { display: none; }
.set-panes { min-width: 0; }
.set-h { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.set-p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.set-pane .swrow { padding: 10px 0; border-bottom: 1px solid var(--border); }
.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(--lux); } .set-vol b { width: 42px; text-align: right; color: var(--text); }
.set-pane .cmdrow { margin-bottom: 10px; }
.set-pane .pc-lab { font-size: 12px; color: var(--muted); margin: 8px 0 4px; text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 640px) { .set-wrap { grid-template-columns: 1fr; } .set-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 8px; } }

/* ---- profile banners (drawn, never uploaded) ---- */
.bnr-night    { --bnr: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%), linear-gradient(160deg, #0b1233, #1b2466 60%, #2c2a6e); }
.bnr-ocean    { --bnr: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%), linear-gradient(160deg, #0b4f7a, #0a7ca3 50%, #13a7b8); }
.bnr-forest   { --bnr: repeating-linear-gradient(100deg, rgba(0,0,0,.08) 0 18px, transparent 18px 40px), linear-gradient(160deg, #173d22, #2c6b36 55%, #4f8f3a); }
.bnr-sunset   { --bnr: linear-gradient(180deg, #2a1b4a 0%, #8a3b6b 45%, #f07b4a 80%, #ffc36b 100%); }
.bnr-cherry   { --bnr: radial-gradient(circle at 20% 40%, rgba(255,255,255,.25) 0 6px, transparent 7px), radial-gradient(circle at 75% 30%, rgba(255,255,255,.2) 0 5px, transparent 6px), linear-gradient(160deg, #e889b4, #f5b6cf 55%, #fde1ea); }
.bnr-redstone { --bnr: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 22px), repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 22px), linear-gradient(160deg, #4a0c0c, #9b1616 60%, #d8321f); }
.bnr-nether   { --bnr: repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 10px, transparent 10px 24px), linear-gradient(160deg, #3a0f12, #6e1b17 50%, #c2461c); }
.bnr-end      { --bnr: radial-gradient(circle at 80% 30%, rgba(210,190,255,.35), transparent 40%), linear-gradient(160deg, #120b22, #2d1b4e 55%, #5b3a8c); }
.bnr-diamond  { --bnr: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 16px), linear-gradient(160deg, #1c8f8f, #3fd0c9 55%, #a8f3ea); }
.bnr-gold     { --bnr: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 16px), linear-gradient(160deg, #8a5a0b, #d19a1c 55%, #ffe28a); }
.bnr-obsidian { --bnr: radial-gradient(circle at 30% 20%, rgba(160,110,255,.25), transparent 35%), linear-gradient(160deg, #07060d, #1a1230 60%, #2b1d4d); }
.has-banner { position: relative; isolation: isolate; }
.has-banner::before { content: '' !important; display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 128px; z-index: -1; background: var(--bnr) !important; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: 1; filter: none; }
.has-banner::after { content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 64px; z-index: -1; background: linear-gradient(transparent, var(--panel)); pointer-events: none; }
.ph.has-banner .ph-bg, .up-hero.has-banner .up-glow { display: none; }
.bp-preview { position: relative; height: 128px; border-radius: 12px; overflow: hidden; background: var(--panel2); display: flex; align-items: flex-end; gap: 12px; padding: 14px; margin-bottom: 12px; }
.bp-preview.has-banner::before { height: 100%; }
.bp-preview.has-banner::after { top: 50%; height: 50%; }
.bp-preview img { width: 52px; height: 52px; border-radius: 12px; image-rendering: pixelated; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.bp-preview b { font-size: 17px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.bp-opt { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; text-align: left; }
.bp-opt i { display: block; height: 42px; border-radius: 6px; background: var(--bnr, var(--panel3)); }
.bp-opt span { font-size: 12px; font-weight: 600; padding: 0 2px 2px; } .bp-opt small { display: block; font-size: 11px; color: var(--faint); font-weight: 500; }
.bp-opt.sel { border-color: var(--lux); box-shadow: 0 0 0 1px var(--lux); }
.bp-opt.locked { opacity: .5; cursor: not-allowed; }
.prof-acts { display: flex; gap: 8px; margin-top: 12px; }
.prof-acts .btn { flex: 1; text-transform: none; letter-spacing: 0; }
.ph-tier { display: none !important; }

/* ---- cleaner top bar ---- */
.vaultbtn[hidden], .pmenu [hidden] { display: none !important; }
.setbtn svg { width: 19px; height: 19px; }
.top-brand { flex: 0 0 auto; white-space: nowrap; }
.top-brand span { overflow: visible !important; }
/* the lobby level card no longer repeats your name */
#lvlname, #lvlav { display: none !important; }
/* lobby: the referral strip lives in the sidebar card; one coin icon next to the balance */
#refstrip { display: none !important; }
.walletbtn .wcoin { display: none !important; }
.bp-preview { border: 1px solid var(--border); background: var(--panel2) !important; }

/* ---- case builder: price-first auto odds ---- */
.cxb-steps { margin: 4px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cxb-auto { display: flex; gap: 8px; align-items: stretch; margin: 8px 0 2px; }
.cxb-target { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--border); }
.cxb-target span:first-child { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cxb-target input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 700 14px var(--font); height: 40px; outline: none; }
.cxb-autobtn { flex: 0 0 auto; padding: 0 18px; text-transform: none; letter-spacing: 0; }
#cxbautoerr { font-size: 12px; margin: 4px 0 0; color: var(--muted); }
.cxb-row { flex-wrap: wrap; row-gap: 8px; }
.cxb-row .cxb-meta { flex: 1 1 0; min-width: 0; }
.cxb-fields { order: 10; flex: 1 1 100%; display: grid; grid-template-columns: 72px 1fr 1fr; gap: 8px; }
.cxb-fields .cxb-f { width: auto !important; min-width: 0; }
.cxb-fields .cxb-f input { width: 100%; }
.cxb-auto .cxb-target { min-width: 0; }
.cxb-target span:first-child { text-transform: none !important; letter-spacing: 0 !important; }
.cxb-auto .btn.cxb-autobtn { width: auto !important; flex: 0 0 auto; }
/* update notes: short and easy to read */
.news-sec li span { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--muted) !important; }
.news-sec li span b { color: var(--text); font-weight: 700; margin-right: 2px; }
.news-sec li { padding: 9px 0 !important; }
.news-h { font-size: 12px !important; color: var(--faint) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-top: 10px !important; }
.news-body { max-height: none !important; overflow: visible !important; }
/* dice: the script moves the die every frame, so no CSS transition on its position */
.dx-die { transition: none !important; will-change: left; }
.dx-die b { transition: background-color .12s ease, color .12s ease; }
.dx-die.quick, .dx-die.quick b { animation: none !important; }
.dx-die.quick b { transition: none !important; }
#gameview.autorun .result { animation: none !important; transition: none !important; }

/* ---- coinflip duel: popup + coin ---- */
.cfpop .modal.cfx { max-width: 560px; width: 100%; padding: 22px 22px 18px; overflow: hidden; }
.cfx-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cfx-head span { font-size: 18px; font-weight: 800; } .cfx-head b { font: 800 14px var(--mono); color: var(--gold); }
.cfx-load { padding: 60px 0; text-align: center; color: var(--muted); }
.cfx-arena { display: grid; grid-template-columns: 1fr 190px 1fr; align-items: center; gap: 10px; padding: 8px 0 4px; }
.cfx-p { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--border); transition: opacity .3s, border-color .3s, box-shadow .3s; }
.cfx-p img, .cfx-p .bjt-hid, .cfx-q { width: 52px; height: 52px; border-radius: 12px; image-rendering: pixelated; }
.cfx-q { display: grid; place-items: center; background: var(--panel3); color: var(--faint); font-weight: 800; font-size: 20px; animation: cfxPulse 1.6s ease-in-out infinite; }
@keyframes cfxPulse { 50% { opacity: .45; } }
.cfx-p b { font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfx-p.me b { color: var(--lux2); }
.cfx-side { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cfx-p.won { border-color: rgba(255,210,77,.7); box-shadow: 0 0 0 1px rgba(255,210,77,.4), 0 0 26px rgba(255,210,77,.18); }
.cfx-p.lost { opacity: .45; }
.cfx-cap { min-height: 22px; margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }
.cfx-cap b { color: var(--text); } .cfx-cap .w { color: var(--win); font-weight: 800; }
.cfx-acts { display: flex; gap: 8px; margin-top: 12px; }
.cfx-acts .btn { flex: 1; text-transform: none; letter-spacing: 0; }
/* the coin */
.cfx-stage { position: relative; height: 210px; display: flex; align-items: flex-end; justify-content: center; perspective: 700px; }
.cfx-shadow { position: absolute; bottom: 14px; left: 50%; width: 110px; height: 16px; margin-left: -55px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); opacity: .55; }
.cfx-toss { position: relative; margin-bottom: 26px; transform-style: preserve-3d; }
.cfx-coin { position: relative; width: 124px; height: 124px; transform-style: preserve-3d; }
.cfx-coin.idle { animation: cfxIdle 3s ease-in-out infinite; }
@keyframes cfxIdle { 0%, 100% { transform: rotateY(-22deg) translateY(0); } 50% { transform: rotateY(22deg) translateY(-6px); } }
.cfx-face { position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; backface-visibility: hidden; }
.cfx-face img { width: 54px; height: 54px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.cfx-face.t img { image-rendering: pixelated; width: 50px; height: 50px; }
.cfx-face small { font: 800 9.5px var(--font); letter-spacing: .18em; opacity: .75; }
.cfx-face.h { background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.18) 53%, transparent 56%), repeating-conic-gradient(from 0deg, rgba(255,255,255,.18) 0 3deg, rgba(0,0,0,.08) 3deg 6deg), radial-gradient(circle at 35% 28%, #fff4c2, #ffd24d 45%, #c98f14 80%, #8a5a07); color: #5a3d00;
  box-shadow: inset 0 0 0 5px #b37a0d, inset 0 0 0 7px #ffe28a, inset 0 3px 8px rgba(255,255,255,.5), inset 0 -4px 10px rgba(0,0,0,.25); transform: translateZ(1px); }
.cfx-face.t { background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.16) 53%, transparent 56%), repeating-conic-gradient(from 0deg, rgba(255,255,255,.2) 0 3deg, rgba(0,0,0,.07) 3deg 6deg), radial-gradient(circle at 35% 28%, #ffffff, #d9e1ee 45%, #9aa7bf 80%, #5c6780); color: #2a3346;
  box-shadow: inset 0 0 0 5px #7d8aa3, inset 0 0 0 7px #eef2f8, inset 0 3px 8px rgba(255,255,255,.6), inset 0 -4px 10px rgba(0,0,0,.25); transform: rotateX(180deg) translateZ(9px); }
.cfx-edge i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #8a5a07, #d9a52a 50%, #8a5a07); }
/* small coin marks */
.cfmini { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.cfmini.heads { background: radial-gradient(circle at 35% 30%, #fff1b0, #ffd24d 55%, #b37a0d); }
.cfmini.tails { background: radial-gradient(circle at 35% 30%, #ffffff, #cfd8e6 55%, #7d8aa3); }
.joinbtn.cfjoin { display: inline-flex; align-items: center; gap: 7px; min-width: 118px; justify-content: center; }
@media (max-width: 560px) { .cfx-arena { grid-template-columns: 1fr 1fr; } .cfx-stage { grid-column: 1 / -1; order: -1; } }
.cfrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); margin-bottom: 8px; }
.cfrow.mine { border-color: var(--lux-line); }
.cfrow > img, .cfrow > .bjt-hid { width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; }
.cfr-main { min-width: 0; } .cfr-main b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfr-main span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cfr-stake { text-align: right; font: 800 15px var(--mono); color: var(--gold); } .cfr-stake small { display: block; font: 600 11px var(--font); color: var(--faint); }
.cfr-btns { display: flex; gap: 6px; }
.cfrow .joinbtn { text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) { .cfrow { grid-template-columns: 36px minmax(0, 1fr) auto; } .cfrow .cfr-stake { display: none; } }
.dl-side { display: inline-flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: .02em !important; font-size: 13px !important; }
.cfr-cur { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cfr-cur.real { color: #8fe6b6; background: rgba(55,214,122,.1); border: 1px solid rgba(55,214,122,.3); }
.cfr-cur.sp { color: #c9b6ff; background: rgba(160,120,255,.12); border: 1px solid rgba(160,120,255,.35); }
.cfrow { grid-template-columns: 40px minmax(0, 1fr) auto auto auto; }
.cfrow.short { opacity: .6; }
.cfx-head .cfr-cur { margin-left: auto; }
@media (max-width: 560px) { .cfrow { grid-template-columns: 36px minmax(0, 1fr) auto; } .cfrow .cfr-stake, .cfrow .cfr-cur { display: none; } }

/* ---- blackjack without the felt table: open, clean layout ---- */
.bjtable { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 4px 12px !important; max-width: 640px !important; }
.bjtable::before, .bjtable::after { display: none !important; }
.bjtable .bjhand { width: 100%; display: flex; flex-direction: column; align-items: center; }
.bjtable .bjlab { font-size: 12px !important; letter-spacing: .06em !important; color: var(--muted) !important; }
.bjtable .bjrules { width: 100%; display: flex; align-items: center; gap: 12px; }
.bjtable .bjrules::before, .bjtable .bjrules::after { content: ''; flex: 1; height: 1px; background: var(--border2); }
.bjtable .bjrules .r1 { background: none !important; clip-path: none !important; padding: 0 !important; font-size: 11px !important; letter-spacing: .08em !important; color: var(--faint) !important; white-space: nowrap; }
.bjtable .bjrules .r2 { display: none !important; }
.bjtable .bjspot { border: 1px solid var(--border2) !important; background: var(--panel2) !important; box-shadow: none !important; border-style: solid !important; }
.bjtable .bjspot.live { border-color: var(--lux-line) !important; background: var(--lux-soft) !important; }
.bjtable .card { box-shadow: 0 8px 20px rgba(0,0,0,.35) !important; }
#gstage .bjdeck { opacity: .7; transform: scale(.85); }
.bjtray { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ---- top bar spread out: logo left, balance in the middle, account on the right ---- */
.top { gap: 20px !important; padding: 0 24px !important; }
.top-brand { flex: 0 0 auto !important; justify-content: flex-start !important; }
.top-right { flex: 1 1 auto !important; display: flex !important; align-items: center; gap: 12px !important; }
.top-right > #updatebadge { order: 0; }
.top-right > #walletwrap:not([hidden]) { order: 1; margin-left: auto !important; margin-right: auto !important; }
.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; }
@media (max-width: 900px) { .top { gap: 10px !important; padding: 0 12px !important; } .top-right { gap: 8px !important; } .top-right > #walletwrap:not([hidden]) { margin-left: 0 !important; margin-right: auto !important; } }
/* bottom-left: Discord account */
.raildc { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left; font-family: var(--font); }
.raildc[hidden] { display: none; }
.raildc:hover { border-color: var(--border2); }
.raildc img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; image-rendering: auto; flex: 0 0 auto; }
.raildc span { flex: 1; min-width: 0; } .raildc b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .raildc small { display: block; font-size: 11px; color: var(--muted); }
.raildc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.raildc.linked .raildc-dot { background: #5865f2; box-shadow: 0 0 0 3px rgba(88,101,242,.25); }
.raildc.linked b { color: #aab4ff; }

/* ---- more profile banners (the higher the level, the more they move) ---- */
.bnr-snow       { --bnr: radial-gradient(2px 2px at 15% 25%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 60%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 80% 35%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 65% 80%, #fff 50%, transparent 51%), linear-gradient(170deg, #9fb8d9, #d9e6f5 60%, #f4f8fd); }
.bnr-prismarine { --bnr: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 14px), linear-gradient(160deg, #1f5d57, #3f9e8c 55%, #7fd1bf); }
.bnr-aurora     { --bnr: linear-gradient(115deg, #06121f 0%, #0d3b3a 25%, #18a77a 40%, #6be3b5 50%, #3a5fd9 62%, #7a3fd1 75%, #06121f 100%); --bnr-size: 300% 100%; --bnr-anim: bnrShift 10s ease-in-out infinite; }
.bnr-amethyst   { --bnr: repeating-conic-gradient(from 30deg at 70% 50%, rgba(255,255,255,.08) 0 10deg, transparent 10deg 30deg), linear-gradient(160deg, #3a1f5c, #7a4fb8 55%, #c9a4f5); }
.bnr-lava       { --bnr: radial-gradient(circle at 20% 70%, #ffd35a 0 8%, transparent 20%), radial-gradient(circle at 70% 30%, #ffb040 0 10%, transparent 24%), radial-gradient(circle at 50% 90%, #ff7a1a 0 12%, transparent 26%), linear-gradient(160deg, #3b0a02, #a52a06 50%, #f06a14); --bnr-size: 160% 160%; --bnr-anim: bnrFlow 7s ease-in-out infinite alternate; }
.bnr-emerald    { --bnr: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 16px), linear-gradient(160deg, #0b5a2e, #1fb45a 55%, #7ff0a8); }
.bnr-galaxy     { --bnr: radial-gradient(1.5px 1.5px at 12% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 64%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 28%, #fff 50%, transparent 51%), radial-gradient(ellipse at 60% 50%, rgba(214,120,255,.45), transparent 55%), radial-gradient(ellipse at 25% 60%, rgba(80,140,255,.4), transparent 55%), linear-gradient(160deg, #05040f, #140b33 60%, #2a0f45); --bnr-anim: bnrTwinkle 4s ease-in-out infinite; }
.bnr-beacon     { --bnr: linear-gradient(90deg, transparent 44%, rgba(160,240,255,.85) 49%, #fff 50%, rgba(160,240,255,.85) 51%, transparent 56%), radial-gradient(ellipse at 50% 100%, rgba(120,230,255,.5), transparent 60%), linear-gradient(180deg, #06121f, #0c2c45 70%, #134a6b); --bnr-anim: bnrPulse 2.8s ease-in-out infinite; }
.bnr-dragon     { --bnr: radial-gradient(ellipse at 75% 40%, rgba(200,90,255,.55), transparent 45%), radial-gradient(circle at 75% 40%, #f0c6ff 0 2%, transparent 3%), repeating-linear-gradient(170deg, rgba(0,0,0,.25) 0 3px, transparent 3px 18px), linear-gradient(160deg, #0a0414, #2a0b3d 60%, #4d1570); --bnr-size: 140% 140%; --bnr-anim: bnrFlow 9s ease-in-out infinite alternate; }
.bnr-deepdark   { --bnr: radial-gradient(circle at 30% 60%, rgba(40,200,220,.4) 0 4%, transparent 14%), radial-gradient(circle at 70% 40%, rgba(40,200,220,.35) 0 3%, transparent 12%), linear-gradient(160deg, #020608, #07181f 60%, #0c2a33); --bnr-anim: bnrPulse 3.6s ease-in-out infinite; }
.bnr-netherite  { --bnr: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 10px), linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 48%, transparent 62%), linear-gradient(160deg, #1b1618, #3a3134 55%, #5e5256); --bnr-size: 100% 100%, 300% 100%, 100% 100%; --bnr-anim: bnrSheen 5s ease-in-out infinite; }
.bnr-celestial  { --bnr: radial-gradient(circle at 80% 30%, #fff6c9 0 5%, rgba(255,230,150,.5) 9%, transparent 22%), radial-gradient(1.5px 1.5px at 20% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 45% 75%, #fff 50%, transparent 51%), linear-gradient(160deg, #0d1a3d, #2b4a9a 55%, #7fb2ff); --bnr-anim: bnrTwinkle 5s ease-in-out infinite; }
.bnr-immortal   { --bnr: linear-gradient(110deg, #ff5a8a, #ffb13d, #fff27a, #5cf0a0, #4fb8ff, #a36bff, #ff5a8a); --bnr-size: 400% 100%; --bnr-anim: bnrShift 6s linear infinite; }
.has-banner::before, .bp-opt i { background-size: var(--bnr-size, auto) !important; animation: var(--bnr-anim, none); }
.bp-opt i { background: var(--bnr, var(--panel3)); }
@keyframes bnrShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes bnrFlow { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes bnrTwinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes bnrPulse { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.3); } }
@keyframes bnrSheen { 0% { background-position: 0 0, 150% 0, 0 0; } 100% { background-position: 0 0, -50% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .has-banner::before, .bp-opt i { animation: none !important; } }

/* ---- staff: profile history, chats, mod log ---- */
.usi { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.usi-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.usi-tabs button { padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; }
.usi-tabs button.sel { background: var(--panel2); color: var(--text); }
.usi-body, .ml-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ml-list { max-height: min(60vh, 560px); }
.usi-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--panel2); font-size: 12.5px; }
.usi-row.chat { grid-template-columns: 1fr auto; }
.usi-row.rem .usi-t { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,90,110,.6); }
.usi-a { font-weight: 800; font-size: 11.5px; white-space: nowrap; color: var(--text); }
.usi-a.a-ban, .usi-a.a-chess_ban, .usi-a.a-remove_money { color: #ff8b9a; } .usi-a.a-timeout, .usi-a.a-mute { color: #f2c35a; } .usi-a.a-unban, .usi-a.a-unmute, .usi-a.a-review_lift, .usi-a.a-chess_unban { color: #6fe3a1; }
.usi-t { min-width: 0; overflow-wrap: anywhere; color: var(--text); } .usi-t b { color: var(--lux2); }
.usi-m { font-size: 11px; color: var(--faint); white-space: nowrap; }
.usi-empty { padding: 12px; color: var(--muted); font-size: 13px; }
.usi-sp { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(160,120,255,.08); border: 1px solid rgba(160,120,255,.3); font-size: 12px; }
.usi-sp > span { color: #c9b6ff; font-weight: 700; margin-right: auto; }
.usi-sp small { display: block; color: var(--faint); font-size: 11px; } .usi-sp b { font: 800 13px var(--mono); } .usi-sp b.w { color: var(--win); } .usi-sp b.l { color: #ff8b9a; }
.mlmodal { max-width: 720px !important; width: 100%; }
.ml-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.ml-bar input { flex: 1; margin: 0; } .ml-bar select { margin: 0; width: 180px; }
.ml-bar select { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 0 10px; height: 44px; font: 600 13px var(--font); }
/* withdrawal: Discord code step */
.wd-code { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--lux-line); }
.wd-code-t { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .wd-code-t b { color: var(--text); }
.wd-code-row { display: flex; gap: 8px; } .wd-code-row input { flex: 1; margin: 0; letter-spacing: .3em; font: 800 16px var(--mono); text-align: center; } .wd-code-row .btn { width: auto; padding: 0 18px; }
.wd-code-x { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--faint); font: 600 12px var(--font); cursor: pointer; }
.wd-sec { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.45; } .wd-sec b { color: var(--text); }
.sc-modal { max-width: 380px !important; } .sc-p { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.sc-in { width: 100%; text-align: center; letter-spacing: .3em; font: 800 18px var(--mono); }
.sc-acts { display: flex; gap: 8px; margin-top: 12px; } .sc-acts .btn { flex: 1; text-transform: none; letter-spacing: 0; }
#setlogoutall { width: auto; padding: 0 18px; text-transform: none; letter-spacing: 0; }

/* ---- coinflip: slower, DonutFlip-style ---- */
.coin { transition: transform 2.5s cubic-bezier(.12,.72,.14,1) !important; }
.coinwrap.flipping { animation-duration: 2.5s !important; }
/* duel coin spins side to side now: tails sits on the back of the Y axis */
.cfx-face.t { transform: rotateX(180deg) translateZ(9px) !important; }
.cfx-toss { will-change: transform; } .cfx-shadow { will-change: transform, opacity; transform-origin: center; }
.cfx-stage { height: 230px; }
.cfx-coin { width: 140px; height: 140px; will-change: transform; }
.cfx-count { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); font: 900 64px/1 var(--display); color: #fff; text-shadow: 0 6px 24px rgba(0,0,0,.6); pointer-events: none; }
.cfx-count.pop { animation: cfxCount .6s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes cfxCount { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
.cfx-stage::after { content: ''; position: absolute; left: 50%; bottom: 60px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; pointer-events: none; opacity: 0; }
.cfx-stage.spinning::before { content: ''; position: absolute; left: 50%; top: 45%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,77,.2), transparent 65%); pointer-events: none; }
.cfx-stage.landed.land-heads::after { animation: cfxBurst .9s ease-out; box-shadow: 0 0 0 0 rgba(255,210,77,.7); }
.cfx-stage.landed.land-tails::after { animation: cfxBurst .9s ease-out; box-shadow: 0 0 0 0 rgba(210,222,240,.7); }
@keyframes cfxBurst { 0% { opacity: 1; box-shadow: 0 0 0 0 currentColor, 0 0 40px 10px rgba(255,255,255,.25); } 100% { opacity: 0; box-shadow: 0 0 0 60px rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); } }
.cfx-stage.landed .cfx-coin { animation: cfxLand .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes cfxLand { 0% { scale: 1.14; } 100% { scale: 1; } }
.cfx-cap #cfxwon { font-style: normal; font-family: var(--mono); }
.cfx-arena { grid-template-columns: 1fr 200px 1fr; }
.cfx-p { transition: opacity .5s, transform .5s, border-color .5s, box-shadow .5s; }
.cfx-p.won { transform: translateY(-4px); }
.cfx-head .cfr-cur { font-size: 11px !important; font-weight: 700 !important; margin-right: 44px; }
.cfx-stage.counting .cfx-coin { opacity: .28; transform: scale(.92); transition: opacity .3s, transform .3s; }

/* ---- blackjack: countdown as a plain number in the top-left corner ---- */
.bjt-table { position: relative; }
.bjt-count { position: absolute; left: 16px; top: 14px; z-index: 6; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center;
  font: 900 20px/1 var(--mono); color: #fff; background: rgba(8,11,26,.7); border: 1px solid var(--border2); font-variant-numeric: tabular-nums; }
.bjt-count.low { color: #ffb4bd; border-color: rgba(255,90,110,.5); }
.bjt-count[hidden] { display: none; }
.bjtable { position: relative; }
.bjtable #bjsecs { position: absolute; left: 10px; top: 6px; margin: 0; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center;
  font: 900 20px/1 var(--mono); color: #fff; background: rgba(8,11,26,.7); border: 1px solid var(--border2); font-variant-numeric: tabular-nums; }
.bjtable #bjsecs:empty { display: none; }
.bjtable #bjsecs.hot { color: #ffb4bd; border-color: rgba(255,90,110,.5); }
.bj-timer { display: none !important; }
.bjt-table .bjt-turnpill { left: 64px !important; }

/* ---- Coinflip (solo): tossed 3D coin ---- */
.cf2 { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.cf2-arena { position: relative; height: 360px; border-radius: 20px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(80% 70% at 50% 38%, #1d2740 0%, #121829 55%, #0c101c 100%); border: 1px solid var(--border); perspective: 1100px; }
.cf2-arena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); pointer-events: none; }
.cf2-glow { position: absolute; left: 50%; top: 58%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,77,.16), transparent 62%); transition: background .35s, transform .35s; }
.cf2-arena.win .cf2-glow { background: radial-gradient(circle, rgba(61,220,133,.3), transparent 62%); transform: scale(1.15); }
.cf2-arena.lose .cf2-glow { background: radial-gradient(circle, rgba(244,88,107,.14), transparent 62%); }
.cf2-shadow { position: absolute; left: 50%; bottom: 40px; width: 150px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); transform: translateX(-50%); opacity: .85; }
.cf2-coinbox { position: relative; z-index: 2; width: 170px; height: 170px; margin-top: 56px; will-change: transform; transform-style: preserve-3d; }
.cf2-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.cf2-edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #7a5210, #c58f22 50%, #7a5210); }
.cf2-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; overflow: hidden; }
.cf2-face.heads { transform: translateZ(5px); background: radial-gradient(circle at 34% 28%, #fff4c2 0%, #ffd24d 38%, #d99a1c 72%, #9a6408 100%); color: #5a3a00; }
.cf2-face.tails { transform: rotateX(180deg) translateZ(5px); background: radial-gradient(circle at 34% 28%, #ffffff 0%, #d6dde8 38%, #9aa6b8 72%, #5d6778 100%); color: #283142; }
.cf2-rim { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(0,0,0,.16) 0 3deg, rgba(255,255,255,.1) 3deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%); mask: radial-gradient(circle, transparent 78%, #000 79%); }
.cf2-inner { position: absolute; inset: 16%; border-radius: 50%; border: 2px solid rgba(0,0,0,.18); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 1px 0 rgba(255,255,255,.3); }
.cf2-face b { position: relative; font: 900 64px/1 Archivo, Rubik, sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.25); }
.cf2-face small { position: absolute; bottom: 24%; font-size: 9px; font-weight: 900; letter-spacing: .26em; opacity: .55; }
/* no filter on the flying coin: a filter flattens its 3D faces */
.cf2-arena.air .cf2-glow { background: radial-gradient(circle, rgba(255,210,77,.26), transparent 62%); }
.cf2-arena.landed .cf2-coinbox { animation: cf2land .42s cubic-bezier(.2,.9,.3,1.5); }
@keyframes cf2land { 0% { transform: translateY(0) scale(1.06, .92); } 45% { transform: translateY(-14px) scale(.98, 1.03); } 100% { transform: none; } }
.cf2-res { position: absolute; left: 50%; top: 18px; z-index: 3; transform: translate(-50%, -10px); opacity: 0; display: flex; align-items: baseline; gap: 10px;
  padding: 8px 16px; border-radius: 12px; background: rgba(10,13,22,.88); border: 1px solid var(--border); transition: opacity .2s, transform .25s; white-space: nowrap; }
.cf2-res.show { opacity: 1; transform: translate(-50%, 0); }
.cf2-res b { font: 900 18px/1 Archivo, Rubik, sans-serif; letter-spacing: .04em; color: var(--text); }
.cf2-res span { font-size: 13px; font-weight: 800; color: var(--faint); }
.cf2-res.win { border-color: rgba(61,220,133,.55); box-shadow: 0 0 24px rgba(61,220,133,.2); }
.cf2-res.win span { color: #3ddc85; }
.cf2-res.lose { border-color: rgba(244,88,107,.35); }
.cf2-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf2-side { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card, #161c2c); border: 1.5px solid var(--border); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .1s; font: inherit; }
.cf2-side:hover { background: rgba(255,255,255,.04); }
.cf2-side:active { transform: scale(.98); }
.cf2-side span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cf2-side b { font-size: 15px; font-weight: 800; }
.cf2-side small { font-size: 11px; color: var(--faint); font-weight: 700; }
.cf2-side small em { font-style: normal; color: var(--text); }
.cf2-side strong { font: 800 13px/1 Archivo, Rubik, sans-serif; color: var(--faint); }
.cf2-side.h.on { border-color: #ffd24d; background: rgba(255,210,77,.08); } .cf2-side.h.on strong { color: #ffd24d; }
.cf2-side.t.on { border-color: #b8c4d6; background: rgba(184,196,214,.08); } .cf2-side.t.on strong { color: #dfe6f0; }
.cf2-mini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 15px/1 Archivo, Rubik, sans-serif; font-style: normal; flex: none; }
.cf2-mini.h { background: radial-gradient(circle at 34% 28%, #fff4c2, #ffd24d 45%, #b27812); color: #5a3a00; }
.cf2-mini.t { background: radial-gradient(circle at 34% 28%, #fff, #c9d2df 45%, #6c778a); color: #283142; }
.cf2-histrow { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.cf2-lab { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); flex: none; }
.cf2-hist { display: flex; gap: 5px; flex: 1; overflow: hidden; }
.cf2-empty { font-size: 12px; color: var(--faint); }
.cf2-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 10px/1 Archivo, Rubik, sans-serif; flex: none; }
.cf2-dot.h { background: radial-gradient(circle at 34% 28%, #fff4c2, #ffd24d 45%, #b27812); color: #5a3a00; }
.cf2-dot.t { background: radial-gradient(circle at 34% 28%, #fff, #c9d2df 45%, #6c778a); color: #283142; }
.cf2-dot.new { animation: cf2dot .35s cubic-bezier(.2,.9,.3,1.5); }
@keyframes cf2dot { from { transform: scale(0); } to { transform: scale(1); } }
.cf2-streak { font-size: 11px; font-weight: 800; color: #ffd24d; flex: none; }
@media (max-width: 700px) { .cf2-arena { height: 300px; } .cf2-coinbox { margin-top: 48px; } .cf2-coinbox { width: 140px; height: 140px; } .cf2-face b { font-size: 52px; } }

/* ---- DonutFortune coin (assets/coin-heads.svg, coin-tails.svg) ---- */
.cfx-face.h, .cfx-face.t { background: none !important; box-shadow: none !important; }
.cfx-face img { width: 100% !important; height: 100% !important; image-rendering: auto !important; filter: none !important; }
.cfx-face.h img, .cfx-face.t img { border-radius: 50%; }
.cfx-edge i { background: linear-gradient(90deg, #6e4604, #c9921e 50%, #6e4604) !important; }
.cf2-face { background: none !important; }
.cf2-face img { width: 100%; height: 100%; display: block; }
.cf2-mini, .cf2-dot, .sidepick .opt .mini.dfc, .cfmini { background: url(/assets/coin-heads.svg) center / cover no-repeat !important; box-shadow: 0 2px 5px rgba(0,0,0,.35) !important; color: transparent !important; }
.cf2-mini.t, .cf2-dot.t, .sidepick .opt .mini.t.dfc, .cfmini.tails { background-image: url(/assets/coin-tails.svg) !important; }
.cfmini { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- autobet speed slider ---- */
.aspd-v { float: right; color: var(--text); font-weight: 800; text-transform: none; letter-spacing: 0; }
.aspd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aspd span { font-size: 11px; font-weight: 700; color: var(--faint); flex: none; }
.aspd input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent, #4f8cff) var(--p, 50%), rgba(255,255,255,.1) var(--p, 50%)); }
.aspd input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent, #4f8cff); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.aspd input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent, #4f8cff); }

/* ---- coinflip duel lobby: cards ---- */
.dl-pots { margin-left: auto; font: 700 11px var(--font); letter-spacing: 0; text-transform: none; color: var(--gold); }
#duelopen.cfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
#duelopen.cfgrid > .cf-rule, #duelopen.cfgrid > :first-child:not(.cfcard) { grid-column: 1 / -1; }
.cfcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--panel2); border: 1px solid var(--border); transition: border-color .15s, transform .15s, box-shadow .15s; }
.cfcard:hover { border-color: rgba(79,140,255,.45); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.cfcard.mine { border-color: rgba(255,210,77,.45); }
.cfcard.big { border-color: rgba(255,210,77,.3); background: radial-gradient(120% 80% at 50% 0%, rgba(255,210,77,.08), transparent 60%), var(--panel2); }
.cfcard.huge { border-color: rgba(255,210,77,.6); background: radial-gradient(120% 80% at 50% 0%, rgba(255,210,77,.16), transparent 65%), var(--panel2); box-shadow: 0 0 22px rgba(255,210,77,.12); }
.cfcard.short { opacity: .6; }
.cfc-top { display: flex; align-items: center; justify-content: space-between; }
.cfc-ago { font-size: 11px; color: var(--faint); font-weight: 600; }
.cfc-vs { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.cfc-p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.cfc-p img, .cfc-p .bjt-hid, .cfc-q { width: 44px; height: 44px; border-radius: 11px; image-rendering: pixelated; }
.cfc-q { display: grid; place-items: center; border: 1.5px dashed rgba(255,255,255,.2); color: var(--faint); font: 800 18px var(--font); }
.cfc-p b { max-width: 100%; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfc-p.open b { color: var(--faint); font-weight: 700; }
.cfc-side { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); }
.cfc-mid { position: relative; display: grid; place-items: center; }
.cfc-coin { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 6px 14px rgba(0,0,0,.45); animation: cfcBob 3s ease-in-out infinite; }
.cfcard:hover .cfc-coin { animation: cfcSpin 1s ease-in-out infinite; }
.cfc-mid em { position: absolute; bottom: -14px; font: 900 9px var(--font); letter-spacing: .2em; color: var(--faint); font-style: normal; }
@keyframes cfcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cfcSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.cfc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cfc-stake { font: 800 17px var(--mono); color: var(--gold); line-height: 1.1; } .cfc-stake small { display: block; font: 600 11px var(--font); color: var(--faint); }
.cfcard .joinbtn { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.cfcard .cfjoin { display: inline-flex; align-items: center; gap: 6px; text-transform: none; }
.cfres { display: grid; grid-template-columns: 26px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); margin-bottom: 6px; }
.cfres-coin { width: 26px; height: 26px; }
.cfres-av, .cfres .bjt-hid { width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; }
.cfres-t { min-width: 0; } .cfres-t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfres-t b .w { color: #3ddc85; }
.cfres-t span { font-size: 11px; color: var(--faint); }
.cfres-v { font: 800 13px var(--mono); color: #3ddc85; }

/* ---- coinflip duel lobby: compact rows (replace the big cards) ---- */
.cfln { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; margin-bottom: 6px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 60%), var(--panel2); border: 1px solid var(--border); overflow: hidden; transition: border-color .15s, background .15s, transform .12s; }
.cfln::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #ffd24d; }
.cfln.tails::before { background: #b8c4d6; }
.cfln:hover { border-color: rgba(79,140,255,.4); background: linear-gradient(90deg, rgba(79,140,255,.08), transparent 60%), var(--panel2); }
.cfln.mine { border-color: rgba(255,210,77,.4); }
.cfln.big .cfln-stake { text-shadow: 0 0 14px rgba(255,210,77,.45); }
.cfln.huge { border-color: rgba(255,210,77,.55); background: linear-gradient(90deg, rgba(255,210,77,.12), transparent 70%), var(--panel2); }
.cfln.short { opacity: .55; }
.cfln-av { position: relative; width: 38px; height: 38px; }
.cfln-av > img:first-child, .cfln-av .bjt-hid { width: 38px; height: 38px; border-radius: 10px; image-rendering: pixelated; display: block; }
.cfln-coin { position: absolute; right: -6px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cfln-main { min-width: 0; } .cfln-main b { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfln-main span { font-size: 11.5px; color: var(--faint); white-space: nowrap; } .cfln-main em.sp { font-style: normal; color: #c9b6ff; }
.cfln-stake { font: 800 15px var(--mono); color: var(--gold); text-align: right; }
.cfln-btns { display: flex; gap: 5px; }
.cfln .joinbtn { height: 32px; padding: 0 12px; text-transform: none; letter-spacing: 0; font-size: 12.5px; white-space: nowrap; }
.cfln .cfjoin { display: inline-flex; align-items: center; gap: 6px; } .cfln .cfjoin img { width: 16px; height: 16px; border-radius: 50%; }
.cfln .cfbot { background: rgba(79,140,255,.16); border: 1px solid rgba(79,140,255,.45); color: #cfe0ff; }
.cfln .cfx-x { width: 32px; padding: 0; font-size: 16px; }
@media (max-width: 560px) { .cfln { grid-template-columns: 38px minmax(0, 1fr) auto; } .cfln-stake { display: none; } }
.cfres { padding: 6px 10px; grid-template-columns: 22px 28px minmax(0, 1fr) auto; gap: 9px; margin-bottom: 5px; }
.cfres-coin { width: 22px; height: 22px; } .cfres-av, .cfres .bjt-hid { width: 28px; height: 28px; border-radius: 7px; }
.cfres-av.bot, .cfx-bot { image-rendering: auto !important; border-radius: 10px; }
.cfres-t b { font-size: 12.5px; }
.cfx-botnote { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }

/* ---- sign in with Discord (sign-in popup) ---- */
.auth-dc { margin-bottom: 14px; }
.btn.dcsignin { display: flex; align-items: center; justify-content: center; gap: 10px; background: #5865f2; color: #fff; text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn.dcsignin:hover { background: #4752c4; }
.btn.dcsignin svg { width: 22px; height: 22px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px; color: var(--faint); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---- Baccarat (shared table) ---- */
.bcpage { display: flex; flex-direction: column; gap: 14px; }
.bc-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.bc-title { font: 800 22px var(--display, var(--font)); color: var(--text); } .bc-title span { display: block; font: 600 12px var(--font); color: var(--faint); margin-top: 2px; }
.bc-phase { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); }
.bc-phase .bcsub { font: 900 12px var(--font); letter-spacing: .14em; color: var(--text); }
.bc-phase.betting .bcsub { color: #3ddc85; } .bc-phase.dealing .bcsub { color: #ffd24d; }
.bc-phase.result.player .bcsub { color: #6ea8ff; } .bc-phase.result.banker .bcsub { color: #ff6b7d; } .bc-phase.result.tie .bcsub { color: #3ddc85; }
.bcclock { font: 800 13px var(--mono); color: var(--muted); min-width: 44px; }
.bcbarwrap { flex: 1; max-width: 220px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .bcbarwrap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ddc85, #ffd24d); }
.bc-roadwrap { display: flex; align-items: center; gap: 8px; } .bc-roadwrap > span { font: 800 10px var(--font); letter-spacing: .14em; color: var(--faint); }
.bc-road { display: grid; grid-template-rows: repeat(3, 20px); grid-auto-flow: column; grid-auto-columns: 20px; gap: 3px; }
.bead { position: relative; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 900 10px var(--font); color: #fff; }
.bead.p { background: #2f6bff; } .bead.b { background: #e5484d; } .bead.t { background: #1faa63; }
.bead .pp, .bead .bp { position: absolute; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #0b0f19; }
.bead .pp { left: -1px; bottom: -1px; background: #6ea8ff; } .bead .bp { right: -1px; top: -1px; background: #ff8a98; }
.bc-felt { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch; gap: 10px; min-height: 250px; padding: 22px; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #1b5a45 0%, #0f3a2d 55%, #0a271f 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 6px rgba(0,0,0,.18), inset 0 20px 60px rgba(255,255,255,.04); overflow: hidden; }
.bc-felt::before { content: 'BACCARAT'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 900 11px var(--font); letter-spacing: .5em; color: rgba(255,255,255,.12); }
.bc-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: 2px dashed rgba(255,255,255,.12); transition: border-color .3s, background .3s, opacity .3s; }
.bc-side.p { border-color: rgba(110,168,255,.35); } .bc-side.b { border-color: rgba(255,107,125,.35); }
.bc-side.won.p { border-style: solid; border-color: #6ea8ff; background: rgba(47,107,255,.12); box-shadow: 0 0 30px rgba(47,107,255,.25); }
.bc-side.won.b { border-style: solid; border-color: #ff6b7d; background: rgba(229,72,77,.12); box-shadow: 0 0 30px rgba(229,72,77,.25); }
.bc-side.lost { opacity: .55; }
.bc-lab { display: flex; align-items: center; gap: 10px; font: 900 13px var(--font); letter-spacing: .16em; color: rgba(255,255,255,.85); }
.bc-side.p .bc-lab span { color: #9cc4ff; } .bc-side.b .bc-lab span { color: #ffadb7; }
.bc-lab b { min-width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 900 18px var(--mono); color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); }
.bc-cards { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 124px; }
.bc-card { width: 78px; height: 110px; perspective: 700px; flex: none; animation: bcIn .35s cubic-bezier(.2,.9,.3,1.1) both; }
.bc-card.third { margin-left: 10px; transform: rotate(90deg); }
@keyframes bcIn { from { opacity: 0; translate: 0 -40px; scale: .8; } to { opacity: 1; translate: 0 0; scale: 1; } }
.bc-card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.bc-card.up .in { transform: rotateY(180deg); }
.bc-card .f { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.bc-card .back { background: repeating-linear-gradient(45deg, #2458d6 0 6px, #1b47b3 6px 12px); border: 3px solid #f4f6fa; }
.bc-card .front { transform: rotateY(180deg); background: linear-gradient(180deg, #fff, #eef2f8); color: #1d222e; border: 1px solid #d6dce6; }
.bc-card .front.red { color: #d9304a; }
.bc-card .front .r { position: absolute; left: 7px; top: 5px; font: 900 18px var(--font); }
.bc-card .front .s { position: absolute; left: 8px; top: 25px; font-size: 14px; }
.bc-card .front .big { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; padding-top: 10px; }
.bc-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.bc-shoe { position: relative; width: 70px; height: 50px; }
.bc-shoe i { position: absolute; width: 46px; height: 64px; border-radius: 6px; background: repeating-linear-gradient(45deg, #2458d6 0 5px, #1b47b3 5px 10px); border: 2px solid #f4f6fa; top: -8px; left: 12px; transform: rotate(-8deg); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.bc-shoe i:nth-child(2) { transform: rotate(-2deg) translate(4px, 2px); } .bc-shoe i:nth-child(3) { transform: rotate(5deg) translate(8px, 4px); }
.bc-verdict { opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.4); text-align: center; }
.bc-verdict.on { opacity: 1; transform: none; }
.bc-verdict b { display: block; padding: 8px 12px; border-radius: 10px; font: 900 13px var(--font); letter-spacing: .08em; color: #fff; white-space: nowrap; }
.bc-verdict.p b { background: #2f6bff; } .bc-verdict.b b { background: #e5484d; } .bc-verdict.t b { background: #1faa63; }
.bc-verdict span { display: block; margin-top: 6px; font: 800 12px var(--mono); color: rgba(255,255,255,.85); }
.bc-spots { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1.6fr 1fr; gap: 10px; }
.bc-spot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 10px 8px 12px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--panel2); border: 2px solid var(--border); transition: transform .1s, border-color .15s, background .15s, box-shadow .2s; }
.bc-spot:hover { transform: translateY(-2px); }
.bc-spot .nm { font: 900 14px var(--font); letter-spacing: .12em; } .bc-spot .mx { font: 800 12px var(--mono); color: var(--muted); }
.bc-spot.s-player { background: linear-gradient(180deg, rgba(47,107,255,.22), rgba(47,107,255,.06)); border-color: rgba(110,168,255,.45); } .bc-spot.s-player .nm { color: #9cc4ff; }
.bc-spot.s-banker { background: linear-gradient(180deg, rgba(229,72,77,.22), rgba(229,72,77,.06)); border-color: rgba(255,107,125,.45); } .bc-spot.s-banker .nm { color: #ffadb7; }
.bc-spot.s-tie { background: linear-gradient(180deg, rgba(31,170,99,.2), rgba(31,170,99,.05)); border-color: rgba(61,220,133,.4); } .bc-spot.s-tie .nm { color: #8ff0bb; }
.bc-spot.s-ppair .nm { color: #9cc4ff; font-size: 12px; } .bc-spot.s-bpair .nm { color: #ffadb7; font-size: 12px; }
.bc-spot.hit { animation: bcHit .25s ease-out; } @keyframes bcHit { 50% { transform: scale(.96); } }
.bc-spot.winner { border-color: #ffd24d; box-shadow: 0 0 0 2px rgba(255,210,77,.35), 0 0 26px rgba(255,210,77,.3); }
.bc-spot.push { border-style: dashed; }
.bc-spot .mine { position: absolute; top: -10px; right: -8px; } .bc-spot .mine .chip { transform: scale(.9); }
.bc-spot .others { position: absolute; left: 8px; bottom: 6px; font: 700 10.5px var(--font); color: var(--faint); } .bc-spot .others b { color: var(--text); margin-right: 4px; }
.rp.bcp-player, .rp.bcp-ppair { background: rgba(47,107,255,.2); color: #9cc4ff; } .rp.bcp-banker, .rp.bcp-bpair { background: rgba(229,72,77,.2); color: #ffadb7; } .rp.bcp-tie { background: rgba(31,170,99,.2); color: #8ff0bb; }
@media (max-width: 760px) {
  .bc-head { grid-template-columns: 1fr; } .bc-felt { grid-template-columns: 1fr 1fr; padding: 14px; } .bc-mid { grid-column: 1 / -1; grid-row: 2; flex-direction: row; }
  .bc-card { width: 56px; height: 80px; } .bc-card .front .big { font-size: 28px; } .bc-cards { min-height: 90px; }
  .bc-spots { grid-template-columns: 1fr 1fr 1fr; } .bc-spot.s-player, .bc-spot.s-banker { grid-row: 1; } .bc-spot.s-player { grid-column: 1 / span 1; }
}
.bcpage { max-width: 860px; margin: 0 auto; }
.bc-head { padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }

/* ---- lobby: new game art (names are drawn into the art) + more breathing room ---- */
.gcard.artv2 .gshadow { display: none !important; }
.gscroll { gap: 16px !important; }
.grow { margin-bottom: 30px; }
.feat img[src*="/art/"] { border-radius: 14px; }
.feat:has(img[src*="/art/"]) .feat-name { display: none !important; }

/* ---- baccarat history panel ---- */
.bc-hist { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); }
.bch-head { display: flex; align-items: center; gap: 12px; } .bch-head h4 { margin: 0; font: 900 12px var(--font); letter-spacing: .16em; color: var(--text); }
.bch-head > span { font-size: 12px; color: var(--faint); font-weight: 600; }
.bch-streak { margin-left: auto; padding: 4px 10px; border-radius: 999px; font: 900 10.5px var(--font) !important; letter-spacing: .1em; }
.bch-streak.p { background: rgba(47,107,255,.18); color: #9cc4ff !important; } .bch-streak.b { background: rgba(229,72,77,.18); color: #ffadb7 !important; }
.bch-stats { display: flex; flex-direction: column; gap: 8px; }
.bch-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.bch-bar i { display: block; flex: 0 0 0; flex-grow: 1; transition: flex-grow .5s; } .bch-bar .p { background: #2f6bff; } .bch-bar .t { background: #1faa63; } .bch-bar .b { background: #e5484d; }
.bch-nums { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 800 11px var(--font); letter-spacing: .08em; color: var(--faint); }
.bch-nums b { color: var(--text); margin: 0 4px; font-family: var(--mono); } .bch-nums em { font-style: normal; font-family: var(--mono); }
.bch-nums .p em { color: #9cc4ff; } .bch-nums .t em { color: #8ff0bb; } .bch-nums .b em { color: #ffadb7; } .bch-nums .pr { margin-left: auto; }
.bch-roads { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.bch-road label { display: block; margin-bottom: 6px; font: 800 10px var(--font); letter-spacing: .14em; color: var(--faint); }
.bch-bead { display: grid; grid-template-rows: repeat(6, 22px); grid-auto-flow: column; grid-auto-columns: 22px; gap: 3px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border); min-height: 155px; min-width: 150px; }
.bb { position: relative; display: grid; place-items: center; border-radius: 50%; font: 900 10.5px var(--mono); color: #fff; }
.bb.p { background: #2f6bff; } .bb.b { background: #e5484d; } .bb.t { background: #1faa63; }
.bb.new { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.4); }
.bb .pp, .bb .bp { position: absolute; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #0b0f19; } .bb .pp { left: -1px; bottom: -1px; background: #9cc4ff; } .bb .bp { right: -1px; top: -1px; background: #ffadb7; }
.bch-big { display: flex; gap: 3px; padding: 6px; border-radius: 10px; min-height: 155px; overflow: hidden; justify-content: flex-end;
  background: rgba(0,0,0,.25) repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,.04) 21px 22px); border: 1px solid var(--border); }
.bgc { display: flex; flex-direction: column; gap: 3px; flex: none; }
.bg { position: relative; width: 19px; height: 19px; border-radius: 50%; border: 3px solid; box-sizing: border-box; }
.bg.p { border-color: #4d86ff; } .bg.b { border-color: #ef5b6f; } .bg.t { border-color: #1faa63; }
.bg .tie { position: absolute; left: 50%; top: 50%; width: 22px; height: 3px; margin: -1.5px 0 0 -11px; background: #3ddc85; transform: rotate(-45deg); border-radius: 2px; font-style: normal; font: 900 8px var(--mono); color: #3ddc85; text-indent: 24px; line-height: 3px; }
.bch-last { display: flex; flex-wrap: wrap; gap: 6px; }
.bl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font: 800 12px var(--mono); color: var(--text); }
.bl b { font: 900 10.5px var(--font); letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; color: #fff; } .bl.p b { background: #2f6bff; } .bl.b b { background: #e5484d; } .bl.t b { background: #1faa63; }
.bl em { font: 700 10.5px var(--font); font-style: normal; color: var(--faint); }
@media (max-width: 760px) { .bch-roads { grid-template-columns: 1fr; } .bch-nums .pr { margin-left: 0; } }

/* ---- top banners: new art ---- */
.banner .bart.v2 { position: absolute !important; right: 6px !important; left: auto !important; top: auto !important; bottom: 6px !important; width: 40% !important; height: auto !important; max-height: 82% !important; object-fit: contain !important; opacity: 1 !important; pointer-events: none; }
.banner.b2 .bart.v2 { width: 36% !important; bottom: auto !important; top: 4px !important; max-height: 58% !important; }
.banner.b3 .bart.v2 { width: 42% !important; }

/* ---- wallet: one clean column ---- */
.walletmodal { display: block !important; max-width: 540px !important; padding: 26px 28px 24px !important; }
.walletmodal > .wm-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 44px 18px 0 !important; margin-bottom: 18px !important; }
.walletmodal .wm-l { font: 800 11px var(--font); letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
.walletmodal .wm-bal { font-size: 36px !important; line-height: 1.1; margin: 4px 0 12px; }
.walletmodal .wm-who { font-size: 12px; color: var(--faint); text-align: right; line-height: 1.6; } .walletmodal .wm-who strong { color: var(--text); }
.walletmodal .wm-who a { color: var(--faint); text-decoration: none; font-weight: 700; } .walletmodal .wm-who a:hover { color: var(--text); }
.walletmodal > .wm-tabs { display: flex !important; gap: 4px; padding: 4px; margin-bottom: 20px !important; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--border); }
.walletmodal > .wm-tabs .wm-tab { flex: 1; padding: 10px 4px !important; font-size: 13px !important; border-radius: 9px; }
.walletmodal label { display: block; font: 700 13px var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; margin: 0 0 8px !important; }
.walletmodal .wm-lab-sub { font-weight: 500; color: var(--faint); margin-left: 6px; font-size: 12px; }
.walletmodal input { height: 48px; font-size: 16px; }
.wm-quick { display: flex; gap: 6px; margin: 8px 0 18px; }
.wm-quick button { flex: 1; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--muted); font: 800 12.5px var(--font); cursor: pointer; transition: all .15s; }
.wm-quick button:hover { color: var(--text); border-color: rgba(255,255,255,.2); } .wm-quick button.sel { background: rgba(79,140,255,.16); border-color: rgba(79,140,255,.6); color: #cfe0ff; }
.wm-paybox { padding: 14px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--border); }
.wm-paylab { display: flex; align-items: center; gap: 8px; font: 700 13px var(--font); color: var(--text); margin-bottom: 10px; }
.wm-step { display: none; }
.walletmodal .wm-paybox .cmdrow { margin: 0 !important; }
.walletmodal .wm-paybox .cmd { font-size: 15px !important; }
.wm-status { margin-top: 10px; font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.wm-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc85; box-shadow: 0 0 0 3px rgba(61,220,133,.15); flex: none; }
.wm-fine { margin-top: 10px; font-size: 12px; color: var(--faint); line-height: 1.5; } .wm-fine:empty { display: none; }
.wm-help { margin-top: 16px; font-size: 12.5px; color: var(--faint); text-align: center; } .wm-help a { color: #9cc4ff; font-weight: 700; text-decoration: none; } .wm-help a:hover { text-decoration: underline; }
.walletmodal .wm-ticket { display: none; }
.walletmodal #withdraw { width: 100%; height: 48px; margin-top: 4px; }
.walletmodal .wd-sec { margin-top: 12px; font-size: 12.5px; color: var(--faint); text-align: center; }
.walletmodal > .wm-side { display: flex !important; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.walletmodal .wm-side > .wm-discord, .walletmodal .wm-side > .wm-purchases { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0; }
.walletmodal .wm-side .wm-dhead { font: 800 10.5px var(--font); letter-spacing: .14em; color: var(--faint); margin-bottom: 6px; }
.walletmodal .wm-side #dc-hint { font-size: 12px; margin: 0; }
.walletmodal .wm-side .wm-purchases[hidden] { display: none !important; }


/* ---- case cards: the rarity case with its top item floating out of it ---- */
.cx-card { background: radial-gradient(120% 70% at 50% 28%, color-mix(in srgb, var(--tc) 16%, transparent), transparent 72%), var(--panel) !important; }
.cx-card:hover { border-color: color-mix(in srgb, var(--tc) 55%, transparent) !important; }
.cx-art { height: 136px !important; display: block !important; margin: 4px 0 6px !important; }
.cx-art::before { left: 50%; top: 18px; transform: translateX(-50%); width: 130px !important; height: 130px !important; }
.cx-case { position: absolute; left: 50%; bottom: 0; width: 150px; transform: translateX(-50%); pointer-events: none; }
.cx-item { position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)) drop-shadow(0 0 12px color-mix(in srgb, var(--tc) 70%, transparent)); animation: cxBob 3.2s ease-in-out infinite; }
.cx-art .cx-item .cicon { width: 64px !important; height: 64px !important; }
.cx-card:hover .cx-item { animation-duration: 1.3s; }
@keyframes cxBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
@media (prefers-reduced-motion: reduce) { .cx-item { animation: none; } }

/* ---- what's new: cleaner card, gift-ticket promo ---- */
.newsmodal { max-width: 520px !important; border-radius: 22px !important; }
.news-hero { padding: 30px 26px 24px !important; margin-bottom: 18px !important; background: linear-gradient(135deg, #2847b8 0%, #1b2a6b 55%, var(--panel) 100%) !important; border-bottom: 0 !important; }
.news-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.news-hero .m-title { font-size: 28px !important; letter-spacing: -.01em; color: #fff; }
.news-hero .news-date { color: rgba(255,255,255,.72) !important; font-weight: 600; font-size: 12.5px; }
.news-logo { width: 62px !important; height: 62px !important; border-radius: 16px !important; box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.14) !important; }
.news-promo { display: grid !important; grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: 0 !important; padding: 0 !important; margin-bottom: 18px !important; border-radius: 16px !important; overflow: visible !important;
  background: linear-gradient(110deg, rgba(255,201,61,.2), rgba(255,201,61,.06)) !important; border: 1px solid rgba(255,201,61,.45) !important; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.news-promo::after { border-radius: 16px; }
.news-promo .np-l { padding: 14px 16px; min-width: 0 !important; }
.news-promo .np-l small { color: #ffd24d; letter-spacing: .12em; }
.news-promo .np-l b { font-size: 28px !important; color: #fff; }
.news-promo .np-l span { font-size: 12px; }
.np-cut { align-self: stretch; width: 0; margin: 10px 0; border-left: 2px dashed rgba(255,201,61,.45); position: relative; }
.np-cut::before, .np-cut::after { content: ''; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); }
.np-cut::before { top: -19px; } .np-cut::after { bottom: -19px; }
.news-promo .np-r { flex-direction: column; gap: 8px; padding: 12px 16px; }
.np-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; cursor: pointer; font: inherit;
  background: rgba(0,0,0,.3); border: 1px dashed rgba(255,255,255,.28); color: var(--text); transition: border-color .15s, background .15s; }
.np-code:hover { border-color: #ffd24d; } .np-code code { font: 900 15px var(--mono); letter-spacing: .08em; color: #ffe28a; }
.np-code i { font-style: normal; font: 800 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .np-code.done i { color: #3ddc85; }
.news-promo .np-r .btn { width: 100% !important; min-height: 40px; background: #ffc93d !important; color: #3a2800 !important; font-weight: 900; }
.news-promo .np-msg { grid-column: 1 / -1; padding: 0 16px 12px; }
.news-promo .np-msg:empty { display: none; }
.news-h { font-size: 11.5px !important; letter-spacing: .12em !important; color: var(--text) !important; margin-bottom: 8px !important; }
.news-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font: 800 10.5px var(--mono); background: var(--lux-soft); color: var(--lux2); }
.news-sec li { background: rgba(255,255,255,.025) !important; border: 1px solid transparent !important; border-radius: 12px !important; transition: background .15s, border-color .15s; }
.news-sec li:hover { background: rgba(255,255,255,.05) !important; border-color: var(--border) !important; }
.news-sec li b { color: #fff; }
.news-body { max-height: min(46vh, 400px) !important; }
#newsok { width: calc(100% - 48px); height: 50px; font-size: 15px; letter-spacing: .06em; }
@media (max-width: 520px) { .news-promo { grid-template-columns: 1fr; } .np-cut { display: none; } .news-promo .np-r { padding-top: 0; } }
/* what's new: the list scrolls, the button stays under it */
.newsmodal { display: flex !important; flex-direction: column; max-height: min(88vh, 760px) !important; overflow: hidden !important; }
.newsmodal > .news-hero, .newsmodal > .news-promo, .newsmodal > #newsok { flex: none; }
.newsmodal > .news-body { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto !important; margin-bottom: 0 !important; padding-bottom: 6px; }
#newsok { position: static !important; margin: 14px 24px 0 !important; width: auto !important; }
.news-sec ul { gap: 4px !important; }
.news-sec li { padding: 8px 10px !important; font-size: 12.8px; line-height: 1.45; }
.news-sec li span { padding-top: 3px; }
.news-ic { flex-basis: 26px !important; width: 26px !important; height: 26px !important; }

/* ---- blackjack: make the hand you are playing obvious after a split ---- */
.bjhand.you.split { padding: 12px 14px 10px; border-radius: 16px; border: 2px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); transition: border-color .25s, background .25s, box-shadow .25s, opacity .25s, transform .25s; }
.bjhand.you.split.active { border-color: #ffd24d; background: rgba(255,210,77,.08); box-shadow: 0 0 0 4px rgba(255,210,77,.12), 0 0 30px rgba(255,210,77,.22); transform: translateY(-3px); }
.bjhand.you.split.active::before { content: 'YOUR TURN'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #ffd24d; color: #2a1c00; font: 900 10px var(--font); letter-spacing: .12em; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.35); z-index: 3; }
.bjhand.you.split.active .bjlab .bjhl { color: #ffd24d; }
.bjhand.you.split.waiting { opacity: .55; }
.bjhand.you.split.done:not(.active) .bjlab .bjhl::after { content: ' · DONE'; color: var(--faint); }
.bjt-hand { border-radius: 12px; transition: box-shadow .25s, background .25s, opacity .25s; }
.bjt-hands:has(.bjt-hand.cur) .bjt-hand:not(.cur) { opacity: .6; }
.bjt-hand.cur { background: rgba(255,210,77,.1) !important; box-shadow: inset 0 0 0 2px #ffd24d, 0 0 22px rgba(255,210,77,.25) !important; }

/* ---- blackjack: dealt by a person, not a machine ---- */
.bjtable .cards .card, .bjt-cards .card { transform: translateY(var(--ry, 0px)) rotate(var(--rr, 0deg)); }
@keyframes bjGlide {
  0%   { transform: translate(var(--sx, 300px), -190px) rotate(var(--sr, -18deg)) rotateY(24deg) scale(.86); opacity: 0; }
  16%  { opacity: 1; }
  78%  { transform: translate(-4px, 1px) rotate(calc(var(--rr, 0deg) * 1.8)) scale(1.01); }
  100% { transform: translateY(var(--ry, 0px)) rotate(var(--rr, 0deg)); opacity: 1; }
}
@keyframes bjUnflip { from { transform: translateY(calc(var(--ry, 0px) - 6px)) rotateY(-90deg) scale(1.05); } to { transform: translateY(var(--ry, 0px)) rotate(var(--rr, 0deg)); } }
.card.flipping { transform: translateY(calc(var(--ry, 0px) - 6px)) rotate(var(--rr, 0deg)) rotateY(90deg) scale(1.05) !important; }
.bjtable .cards .card.deal, .bjt-cards .card.fresh, .bjtable .cards .card.fresh { animation-duration: .56s !important; }

/* ---- clean-up pass ---- */
/* blackjack: cards land square with one clean glide */
.bjtable .cards .card, .bjt-cards .card { transform: none; }
@keyframes bjGlide { 0% { transform: translate(300px, -190px) rotate(-18deg) rotateY(24deg) scale(.86); opacity: 0; } 18% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bjUnflip { from { transform: translateY(-6px) rotateY(-90deg) scale(1.05); } to { transform: none; } }
.card.flipping { transform: translateY(-6px) rotateY(90deg) scale(1.05) !important; }
.bjtable .cards .card.deal, .bjt-cards .card.fresh, .bjtable .cards .card.fresh { animation-duration: .5s !important; }
/* mines: the mine-count slider gets a real track */
.minepick .range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; border: 0; padding: 0; background: linear-gradient(90deg, var(--red) var(--p, 9%), rgba(255,255,255,.1) var(--p, 9%)); }
.minepick .range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff !important; border: 3px solid var(--red); box-shadow: 0 2px 6px rgba(0,0,0,.4) !important; }
.minepick .range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--red); }
.mtile .mt-ico.gem, .mtile .mt-ico.bomb { width: 74%; height: 74%; object-fit: contain; image-rendering: auto !important; }
/* hi-lo: waiting card */
.hl-idle { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--faint); font-size: 13px; font-weight: 600; }
.hl-idle .card { width: 96px; height: 136px; transform: rotate(-4deg); box-shadow: 0 14px 30px rgba(0,0,0,.45); }