/* ============================================================================
   ShinyLuck v2 · matte-black + gold design system (from ShinyLuck.dc.html)
   Shared by the merged ShinyLuck (casino) + ShinyPoker site.
   Loaded by every page INSTEAD of the legacy styles.css.
   ========================================================================== */

:root {
  --bg: #0A0A0B;
  --bg-2: #070708;
  --panel: #0A0A0C;
  --panel-2: #0E0E11;
  --panel-3: #101014;
  --line: #141419;
  --line-2: #17171C;
  --line-3: #1C1C22;
  --bd: #20202A;
  --bd-2: #24242C;
  --bd-3: #2C2C36;
  --gold: #D9B970;
  --gold-hi: #F4DD9E;
  --gold-mid: #E9CC85;
  --gold-dark: #A6822F;
  --ink: #241A05;
  --fg: #F2EEE6;
  --fg-strong: #F6F1E7;
  --fg-dim: #A5A29B;
  --fg-mute: #8f8c85;
  --fg-faint: #6E6C67;
  --fg-ghost: #57554F;
  --green: #6FCF97;
  --red: #E56B6B;
  --sans: 'General Sans', Inter, system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  /* legacy aliases used by carried-over game modules + the owner console */
  --cyan: #D9B970;
  --purple: #C9A961;
  --purple-2: #E9CC85;
  --bg-1: #0A0A0C;
  --amber: #E9CC85;
}

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
::selection { background: rgba(217,185,112,.3); color: #F6F1E7; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
input, button, select, textarea { font: inherit; color: inherit; }
input::placeholder { color: var(--fg-faint); }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: #20202A; border-radius: 10px; border: 2px solid #050506; }
::-webkit-scrollbar-track { background: transparent; }

/* gold range sliders (design spec) */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold) var(--p, 50%), #2C2C38 var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: #2C2C38; }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gold); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 1px solid var(--gold-dark); border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FDF6E3, var(--gold) 70%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FDF6E3, var(--gold) 70%); border: 1px solid var(--gold-dark); box-shadow: 0 0 14px rgba(217,185,112,.5); }

/* body backdrop: sparkle field + soft gold radial (design spec) */
.v2-body {
  min-height: 100vh;
  color: var(--fg);
  background:
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22720%22%20height%3D%22720%22%3E%3Cg%20fill%3D%22%23D9B970%22%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(110%2C140)%22%20fill-opacity%3D%22.07%22%2F%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(430%2C70)%20scale(.55)%22%20fill-opacity%3D%22.055%22%2F%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(600%2C330)%20scale(.8)%22%20fill-opacity%3D%22.06%22%2F%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(230%2C460)%20scale(.6)%22%20fill-opacity%3D%22.05%22%2F%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(520%2C610)%20scale(1.05)%22%20fill-opacity%3D%22.065%22%2F%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(60%2C620)%20scale(.45)%22%20fill-opacity%3D%22.045%22%2F%3E%3Cpath%20d%3D%22M0%20-15C1.1%20-4.5%204.5%20-1.1%2015%200C4.5%201.1%201.1%204.5%200%2015C-1.1%204.5%20-4.5%201.1%20-15%200C-4.5%20-1.1%20-1.1%20-4.5%200%20-15Z%22%20transform%3D%22translate(340%2C260)%20scale(.35)%22%20fill-opacity%3D%22.045%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%22100%22%20r%3D%221.5%22%20fill-opacity%3D%22.06%22%2F%3E%3Ccircle%20cx%3D%22540%22%20cy%3D%22190%22%20r%3D%221.3%22%20fill-opacity%3D%22.05%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22330%22%20r%3D%221.4%22%20fill-opacity%3D%22.05%22%2F%3E%3Ccircle%20cx%3D%22660%22%20cy%3D%22500%22%20r%3D%221.5%22%20fill-opacity%3D%22.06%22%2F%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22560%22%20r%3D%221.3%22%20fill-opacity%3D%22.05%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22430%22%20r%3D%221.2%22%20fill-opacity%3D%22.045%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') repeat,
    radial-gradient(1100px 540px at 70% -10%, rgba(217,185,112,.05), transparent 60%),
    var(--bg);
  background-size: 720px 720px, auto, auto;
}

/* keyframes (design spec) */
@keyframes sl-draw { to { stroke-dashoffset: 0; } }
@keyframes sl-breathe { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes sl-sheen { 0% { transform: translateX(-170%) skewX(-18deg); } 55%, 100% { transform: translateX(300%) skewX(-18deg); } }
@keyframes sl-twinkle { 0%, 100% { opacity: 0; transform: scale(.35); } 50% { opacity: .85; transform: scale(1); } }
@keyframes sl-drift { 0% { transform: translate3d(0,14px,0); } 100% { transform: translate3d(0,-46px,0); } }
@keyframes sl-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sl-bar { from { width: 0; } to { width: 100%; } }
@keyframes sl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes sl-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes sl-spinslow { to { transform: rotate(360deg); } }
@keyframes sl-floaty { 0%, 100% { transform: translateY(0) rotate(26deg); } 50% { transform: translateY(-14px) rotate(26deg); } }
@keyframes sl-hover2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* hover-run sheen bars (mockup used a never-defined "sl-nosheen" name so the
   bar only animates via play-state; we alias it to the real sheen keyframes) */
@keyframes sl-nosheen { 0% { transform: translateX(-170%) skewX(-18deg); } 55%, 100% { transform: translateX(300%) skewX(-18deg); } }
[data-shine] [data-shine-bar] { animation-play-state: paused; }
[data-shine]:hover [data-shine-bar] { animation-play-state: running; }

[data-rail]::-webkit-scrollbar { display: none; }

main { overflow-x: clip; }

/* responsive helpers (attribute-driven, straight from the mockup) */
@media (max-width: 1180px) {
  [data-r-hide-t] { display: none !important; }
  [data-r-grid-t2] { grid-template-columns: 1fr 1fr !important; }
  [data-r-hero-h1] { font-size: 44px !important; }
  [data-r-medal] { width: 236px !important; height: 236px !important; }
  [data-r-crash-mult] { font-size: 56px !important; }
}
@media (max-width: 1080px) {
  [data-r-hide-t2] { display: none !important; }
}
@media (max-width: 860px) {
  [data-r-hero] { height: 400px !important; }
  [data-r-hide-m] { display: none !important; }
  [data-r-show-m] { display: flex !important; }
  [data-r-grid-m1] { grid-template-columns: 1fr !important; }
  [data-r-col-m] { flex-direction: column !important; }
  [data-r-pad-m] { padding: 24px 16px !important; }
  [data-r-padb-m] { padding-bottom: 110px !important; }
  [data-r-fs-m] { font-size: 34px !important; }
  [data-r-full-m] { width: 100% !important; min-width: 0 !important; }
  [data-r-wrap-m] { flex-wrap: wrap !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   Shared hover utilities (style-hover payloads from the mockup)
   ------------------------------------------------------------------------- */
.hv-goldline { transition: border-color .2s, color .2s, background .2s; }
.hv-goldline:hover { border-color: rgba(217,185,112,.45) !important; color: var(--gold-hi) !important; }
.hv-bright { transition: filter .2s; }
.hv-bright:hover { filter: brightness(1.08); }
.hv-lift { transition: transform .22s ease, filter .3s ease; }
.hv-lift:hover { transform: translateY(-5px); filter: drop-shadow(0 14px 20px rgba(0,0,0,.4)); }
.hv-cardline { transition: border-color .25s; }
.hv-cardline:hover { border-color: rgba(217,185,112,.5) !important; }
.hv-text { transition: color .18s; }
.hv-text:hover { color: var(--gold-hi) !important; }
.hv-ghost { transition: all .2s; }
.hv-ghost:hover { background: rgba(217,185,112,.08); border-color: rgba(217,185,112,.6) !important; color: var(--gold-hi); }

/* ---------------------------------------------------------------------------
   Buttons / inputs / chips
   ------------------------------------------------------------------------- */
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 10px; cursor: pointer; font: 600 13px var(--sans); transition: filter .2s, transform .15s; white-space: nowrap; }
.btn2-gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.btn2-gold:hover { filter: brightness(1.07); }
.btn2-gold:active { transform: scale(.985); }
.btn2-gold:disabled { filter: grayscale(.55) brightness(.8); cursor: default; }
.btn2-line { background: none; border: 1px solid var(--bd-3); color: #EDEAE0; }
.btn2-line:hover { background: rgba(217,185,112,.08); border-color: rgba(217,185,112,.6); }
.btn2-danger { background: none; border: 1px solid rgba(229,107,107,.3); color: var(--red); }
.btn2-danger:hover { background: rgba(229,107,107,.08); border-color: rgba(229,107,107,.55); }

.in2 { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bd-2); background: var(--panel-3); color: var(--fg); font: 500 12px var(--mono); transition: border-color .2s, box-shadow .2s; }
.in2:focus { border-color: rgba(217,185,112,.55); box-shadow: 0 0 0 3px rgba(217,185,112,.08); }
.in2-big { height: 46px; padding: 0 52px 0 14px; font: 600 15px var(--mono); }

.k-label { font: 600 9px var(--mono); letter-spacing: .2em; color: var(--fg-ghost); text-transform: uppercase; }
.k-eyebrow { font: 600 9px var(--mono); letter-spacing: .22em; color: var(--gold); text-transform: uppercase; }

.card2 { border: 1px solid var(--line-2); background: var(--panel); border-radius: 16px; }
.panel2 { border: 1px solid var(--line-3); background: var(--panel-2); border-radius: 16px; }

.live-dot { width: 5px; height: 5px; border-radius: 10px; background: var(--gold); box-shadow: 0 0 8px rgba(217,185,112,.9); animation: sl-pulse 2.2s ease-in-out infinite; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 8.5px var(--mono); letter-spacing: .2em; color: var(--gold); }

/* game tag palette · classes injected by livedata.js / leaderboard.js rows */
.game-tag { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 10px; font: 600 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid; }
.game-tag.g-0 { color: #B8804C; border-color: #B8804C3D; background: #B8804C10; }  /* dice */
.game-tag.g-1 { color: #D9B970; border-color: #D9B9703D; background: #D9B97010; }  /* crash */
.game-tag.g-2 { color: #C9A961; border-color: #C9A9613D; background: #C9A96110; }  /* slots */
.game-tag.g-3 { color: #E8E2D6; border-color: #E8E2D63D; background: #E8E2D610; }  /* mines */
.game-tag.g-4 { color: #F4DD9E; border-color: #F4DD9E3D; background: #F4DD9E10; }  /* plinko */
.game-tag.g-5 { color: #C97E5A; border-color: #C97E5A3D; background: #C97E5A10; }  /* roulette */
.game-tag.g-6 { color: #C8C6BE; border-color: #C8C6BE3D; background: #C8C6BE10; }  /* cluster */

/* live-bets feed table (livedata.js renders into #feed-body) */
.feed2 { overflow-x: auto !important; }
.feed2 table { width: 100%; border-collapse: collapse; }
@media (max-width: 860px) {
  .feed2 th, .feed2 td { padding: 10px 10px; font-size: 10.5px; white-space: nowrap; }
}
.feed2 th { text-align: left; font: 600 8.5px var(--mono); letter-spacing: .22em; color: var(--fg-ghost); padding: 13px 20px; border-bottom: 1px solid var(--line); }
.feed2 td { font: 500 11.5px var(--mono); color: var(--fg-dim); padding: 11px 20px; border-bottom: 1px solid #0F0F13; }
.feed2 td a { color: inherit; }
.feed2 tr:last-child td { border-bottom: none; }
.feed2 .feed-dim { color: var(--fg-mute); }
.feed2 .pnl { font-weight: 600; font-size: 12px; }
.feed2 .pnl-win { color: var(--green); }
.feed2 .pnl-loss { color: var(--red); }
.feed2 .dim { color: var(--fg-ghost); }
.feed2 .feed-empty td { color: var(--fg-ghost); font-size: 10.5px; height: 38px; }
@keyframes sl-feed-slide-in2 { 0% { transform: translateY(-12px); opacity: 0; background: rgba(217,185,112,.10); } 60% { background: rgba(217,185,112,.10); } 100% { transform: translateY(0); opacity: 1; background: transparent; } }
.feed2 .sl-feed-new td { animation: sl-feed-slide-in2 .55s cubic-bezier(.22,.61,.36,1); }

/* recent multipliers strip (livedata.js: [data-sl-recent-mults] children) */
.recent-mults { display: flex; gap: 8px; flex-wrap: wrap; }
.recent-mults .m { font: 500 10.5px var(--mono); color: var(--fg-faint); border: 1px solid var(--bd); border-radius: 10px; padding: 4px 8px; }
.recent-mults .m.win { color: var(--green); }
.recent-mults .m.bust { color: var(--red); }

/* ---------------------------------------------------------------------------
   Shell: topbar
   ------------------------------------------------------------------------- */
.nav2 { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 20px; background: rgba(5,5,6,.8); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); border-bottom: 1px solid var(--line-2); }
.nav2-logo { display: flex; align-items: center; gap: 10px; border: none; background: none; cursor: pointer; padding: 4px 2px; color: inherit; }
.nav2-logo .img { position: relative; flex: none; width: 34px; height: 34px; border-radius: 999px; overflow: hidden; }
.nav2-logo .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.nav2-logo .name { font: 600 19px var(--sans); letter-spacing: .01em; color: var(--fg-strong); }
.nav2-connect { height: 38px; padding: 0 17px; border-radius: 10px; background: var(--gold); color: var(--ink); font: 600 13px var(--sans); flex: none; }
.nav2-avatar { flex: none; width: 37px; height: 37px; border-radius: 999px; overflow: hidden; border: 1px solid #2A2A32; background: var(--panel-2); padding: 0; cursor: pointer; transition: border-color .2s; display: none; }
.nav2-avatar:hover { border-color: rgba(217,185,112,.6); }
.nav2-avatar .av { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.nav2-avatar.on { display: block; }
.badge-net { font: 600 8px var(--mono); letter-spacing: .18em; color: var(--fg-faint); border: 1px solid var(--bd); border-radius: 10px; padding: 3px 7px; }
@media (max-width: 480px) {
  .nav2 { padding: 0 12px; gap: 10px; }
  .nav2-logo .name { display: none; }
  .nav2-connect { padding: 0 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Shell: sidebar
   ------------------------------------------------------------------------- */
/* Sidebar: rows keep a CONSTANT 42px height in both states · expanding only
   widens the rail and fades the labels in, nothing jumps vertically. */
.side2 { position: sticky; top: 64px; z-index: 5; height: calc(100vh - 64px); flex: none; width: 88px; display: flex; flex-direction: column; padding: 12px 12px 16px; border-right: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; overflow-x: hidden; transition: width .28s cubic-bezier(.4,0,.2,1); }
.side2:hover { width: 238px; }
.side2 .it { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; width: 100%; height: 42px; padding: 0 11px; margin: 2px 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--fg-dim); cursor: pointer; text-align: left; transition: background .18s, border-color .18s, color .18s; white-space: nowrap; text-decoration: none; overflow: hidden; }
.side2:hover .it { justify-content: flex-start; gap: 12px; }
.side2 .it:hover { background: #0E0E12; color: var(--fg); }
.side2 .it.active { border-color: var(--bd); background: #0E0E12; color: var(--fg); box-shadow: inset 2px 0 0 var(--gold); }
.side2 .it .ic { flex: none; width: 20px; height: 20px; color: var(--fg-faint); transition: color .18s; }
.side2 .it.active .ic { color: var(--gold); }
.side2 .it .lb { display: none; font: 500 13.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side2:hover .it .lb { display: block; }
.side2 .it .bdg { display: none; }
.side2:hover .it .bdg { display: flex; align-items: center; min-width: 0; flex: none; margin-left: auto; }
.side2 .it .bdg span { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--fg-faint); border: 1px solid var(--bd); border-radius: 10px; padding: 2.5px 7px; }
.side2-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 2px 2px; border-top: 1px solid #101014; margin-top: 6px; }
.side2:hover .side2-foot { flex-direction: row; }
.side2-foot .fbtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bd); background: var(--panel); color: var(--fg-mute); cursor: pointer; transition: all .2s; text-decoration: none; }
.side2-foot .fbtn:hover { color: var(--gold); border-color: rgba(217,185,112,.4); }

/* ---------------------------------------------------------------------------
   Shell: footer
   ------------------------------------------------------------------------- */
.foot2 { margin-top: 72px; border-top: 1px solid var(--line); background: var(--bg-2); padding: 46px 36px 26px; }
.foot2-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 34px; max-width: 1320px; margin: 0 auto; }
.foot2 .logo-img { position: relative; flex: none; width: 104px; height: 104px; border-radius: 999px; overflow: hidden; display: block; }
.foot2 .logo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.foot2 .stats { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 18px; }
.foot2 .stats span { font: 500 10.5px var(--mono); color: var(--fg-ghost); }
.foot2 .stats b { font-weight: 500; color: var(--fg-dim); }
.foot2 h4 { margin: 0 0 15px; font: 700 13px var(--sans); color: var(--fg-strong); }
.foot2 .col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot2 .col a, .foot2 .col button { border: none; background: none; padding: 0; cursor: pointer; font: 500 12.5px var(--sans); color: var(--fg-mute); transition: color .18s; text-decoration: none; text-align: left; }
.foot2 .col a:hover, .foot2 .col button:hover { color: var(--gold-hi); }
.foot2-bottom { max-width: 1320px; margin: 34px auto 0; padding-top: 17px; border-top: 1px solid #101014; text-align: center; }
.foot2-bottom span { font: 400 11.5px var(--sans); color: var(--fg-ghost); }
@media (max-width: 860px) { .foot2-grid { grid-template-columns: 1fr; } .foot2 { padding: 24px 16px; } }

/* ---------------------------------------------------------------------------
   Shell: mobile bottom bar
   ------------------------------------------------------------------------- */
.mob2 { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: 66px; background: rgba(7,7,8,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--line-2); align-items: stretch; justify-content: space-around; padding: 0 6px env(safe-area-inset-bottom); }
@media (max-width: 860px) { .mob2 { display: flex; } }
.mob2 a, .mob2 button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; border: none; background: none; color: var(--fg-faint); cursor: pointer; transition: color .18s; text-decoration: none; }
.mob2 .active { color: var(--gold); }
.mob2 span { font: 500 9.5px var(--sans); letter-spacing: .02em; }

/* ---------------------------------------------------------------------------
   Shell: profile drawer
   ------------------------------------------------------------------------- */
.pdrawer-mask { position: fixed; inset: 0; z-index: 92; display: none; justify-content: flex-end; }
.pdrawer-mask.on { display: flex; }
.pdrawer-veil { position: absolute; inset: 0; background: rgba(5,5,6,.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.pdrawer { position: relative; width: 378px; max-width: 94vw; height: 100%; background: #0B0B0E; border-left: 1px solid var(--line-3); padding: 20px 22px 26px; overflow-y: auto; display: flex; flex-direction: column; animation: sl-pop .3s cubic-bezier(.22,.61,.2,1) both; }
.pdrawer .x { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--bd); background: none; color: var(--fg-dim); cursor: pointer; font: 500 15px var(--sans); transition: all .2s; }
.pdrawer .x:hover { border-color: rgba(217,185,112,.4); color: var(--gold-hi); }
.pdrawer .avatar-big { position: relative; width: 96px; height: 96px; border-radius: 999px; overflow: hidden; background: var(--panel-3); box-shadow: 0 0 0 1px var(--bd-2), 0 0 0 5px rgba(217,185,112,.1); }
.pdrawer .avatar-big .av { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pdrawer .box { margin-top: 10px; border: 1px solid var(--line-3); background: var(--panel-2); border-radius: 14px; padding: 16px; }
.pdrawer .box:first-of-type { margin-top: 20px; }
.pdrawer .bal { margin-top: 7px; font: 600 24px var(--mono); letter-spacing: -.02em; color: var(--fg-strong); }
.pdrawer .bal .u { font: 500 11px var(--mono); color: var(--fg-faint); }
.pdrawer .bal.gold { color: var(--gold-mid); }
.pdrawer .addr-row { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 12px; border-radius: 10px; border: 1px solid var(--bd-2); background: var(--panel-3); }
.pdrawer .addr-row .a { flex: 1; min-width: 0; font: 500 12px var(--mono); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdrawer .mini { flex: none; height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--bd-3); background: none; color: var(--fg-dim); font: 600 10px var(--sans); cursor: pointer; transition: all .2s; }
.pdrawer .mini:hover { border-color: rgba(217,185,112,.5); color: var(--gold-hi); }
.pdrawer .nick-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--bd); border-radius: 8px; font: 500 11px var(--mono); color: var(--fg-dim); }
.pdrawer .nick-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.pdrawer .note { margin: 11px 0 0; font: 400 10.5px/1.5 var(--sans); color: var(--fg-ghost); }
.pdrawer .msg { margin: 8px 0 0; font: 500 11px var(--sans); min-height: 14px; }
.pdrawer .msg.ok { color: var(--green); }
.pdrawer .msg.err { color: var(--red); }

/* ---------------------------------------------------------------------------
   Shell: settings modal
   ------------------------------------------------------------------------- */
.smodal-mask { position: fixed; inset: 0; z-index: 93; display: none; align-items: center; justify-content: center; padding: 20px; }
.smodal-mask.on { display: flex; }
.smodal-veil { position: absolute; inset: 0; background: rgba(5,5,6,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.smodal { position: relative; width: 540px; max-width: 100%; background: #0B0B0E; border: 1px solid var(--line-3); border-radius: 18px; padding: 24px; animation: sl-pop .3s cubic-bezier(.22,.61,.2,1) both; }

/* ---------------------------------------------------------------------------
   Shell: loader + page transition veil
   ------------------------------------------------------------------------- */
.loader2 { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; background: radial-gradient(720px 500px at 50% 42%, #0B0A08, #050506 72%); opacity: 1; transition: opacity .7s ease; }
.loader2.done { opacity: 0; pointer-events: none; }
.loader2 .spark { position: relative; width: 126px; height: 126px; border-radius: 999px; overflow: hidden; }
.loader2 .spark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0; transform: scale(1.16); transition: opacity 1.1s ease, transform 1.5s cubic-bezier(.22,.61,.2,1); }
.loader2.lit .spark img { opacity: 1; transform: scale(1); }
.loader2 .track { width: 232px; height: 1px; background: var(--line-2); position: relative; }
.loader2 .fill { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--gold-dark), var(--gold-hi)); box-shadow: 0 0 14px rgba(217,185,112,.6); transition: width .25s ease; }
.loader2 .status { font: 500 11px var(--sans); letter-spacing: .24em; color: var(--fg-faint); text-transform: uppercase; }
.veil2 { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .24s ease; background: radial-gradient(900px 620px at 50% 42%, rgba(28,22,10,.94), rgba(5,5,6,.98)); }
.veil2.on { opacity: 1; }

/* dust particles layer */
.dust2 { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dust2 i { position: absolute; display: block; width: 3px; height: 3px; border-radius: 999px; background: radial-gradient(circle, #F6F1E7, rgba(217,185,112,.9) 45%, transparent 75%); filter: drop-shadow(0 0 6px rgba(217,185,112,.8)); opacity: 0; }

/* connect modal (wallet.js injects its own base styles; re-theme to gold) */
.sl-conn-mask { font-family: var(--mono) !important; }
.sl-conn-mask .sl-conn-box { background: #0B0B0E !important; border: 1px solid var(--line-3) !important; border-radius: 18px !important; }
.sl-conn-mask .sl-conn-btn { border: 1px solid var(--bd-3) !important; border-radius: 10px !important; }
.sl-conn-mask .sl-conn-btn:hover { border-color: rgba(217,185,112,.55) !important; color: var(--gold-hi) !important; }
.sl-conn-mask .sl-conn-btn.primary { background: var(--gold) !important; color: var(--ink) !important; border: none !important; }
.sl-conn-mask .sl-conn-btn.primary:hover { filter: brightness(1.07); color: var(--ink) !important; }
.sl-conn-mask .sl-conn-close { border: 1px solid var(--bd) !important; border-radius: 8px !important; }

/* toasts/dialogs from lib/ui.js · retheme */
.sl-toast { background: #0B0B0E !important; border: 1px solid var(--line-3) !important; border-radius: 12px !important; color: var(--fg) !important; font-family: var(--sans) !important; }
.sl-modal-mask .sl-conn-box, .sl-modal { border-radius: 16px !important; }

/* generic page section header (eyebrow + h1) */
.page-head h1 { margin: 12px 0 0; font: 600 42px var(--sans); color: var(--fg-strong); }
.page-head .sub { margin: 14px 0 0; font: 400 15.5px/1.75 var(--sans); color: var(--fg-dim); max-width: 640px; }
.spark-eyebrow { display: flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------------------------
   Game pages (shared frame for all 7 games)
   ------------------------------------------------------------------------- */
.gp-wrap { max-width: 1400px; margin: 0 auto; padding: 22px 36px 0; }
.gp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; animation: sl-up .5s both; }
.gp-head h1 { margin: 0; font: 600 30px var(--sans); color: var(--fg-strong); }
.gp-head .back { border: none; background: none; padding: 6px 2px; cursor: pointer; font: 600 14px var(--sans); color: var(--fg-mute); transition: color .2s; text-decoration: none; }
.gp-head .back:hover { color: var(--gold-hi); }
.gp-head .vsep { width: 1px; height: 16px; background: var(--bd); }
.gp-grid { display: grid; grid-template-columns: 1fr 348px; gap: 16px; align-items: start; animation: sl-up .55s .06s both; }
@media (max-width: 980px) { .gp-grid { grid-template-columns: 1fr; } }
.gp-stage { position: relative; border: 1px solid var(--line-2); background: var(--panel); border-radius: 16px; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; }
.gp-stage-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px 0; }
.gp-stage-foot { display: flex; align-items: center; gap: 14px; padding: 14px 22px 18px; border-top: 1px solid var(--line); margin-top: auto; }
.gp-stage-foot > span:first-child { font: 600 8.5px var(--mono); letter-spacing: .2em; color: var(--fg-ghost); flex: none; }
.gp-panel { border: 1px solid var(--line-3); background: var(--panel-2); border-radius: 16px; padding: 18px; position: sticky; top: 84px; }
.gp-statstrip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin-top: 26px; animation: sl-up .6s .1s both; }
.gp-statstrip > div { padding: 16px 26px 18px; border-right: 1px solid var(--line); }
.gp-statstrip > div:first-child { padding-left: 0; }
.gp-statstrip > div:last-child { border-right: none; }
.gp-statstrip .l { font: 600 9px var(--mono); letter-spacing: .24em; color: var(--fg-faint); margin-bottom: 8px; }
.gp-statstrip .v { font: 600 20px var(--mono); color: var(--fg-strong); }
.gp-statstrip .v.gold { color: var(--gold); }
.gp-statstrip .v .u { font: 400 11px var(--mono); color: var(--fg-ghost); }
@media (max-width: 1180px) { .gp-statstrip { grid-template-columns: 1fr 1fr; } .gp-statstrip > div { padding: 16px 20px 18px; } }

/* status pill (engine hook: [data-sl-stage-pill] with .dot inside) */
.live-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 9.5px var(--mono); letter-spacing: .18em; color: var(--fg-dim); border: 1px solid var(--bd); border-radius: 10px; padding: 6px 11px; }
.live-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-faint); }
.live-pill.ready .dot { background: var(--gold); box-shadow: 0 0 8px rgba(217,185,112,.8); }
.live-pill.live { color: var(--gold); border-color: rgba(217,185,112,.4); }
.live-pill.live .dot { background: var(--gold); box-shadow: 0 0 8px rgba(217,185,112,.9); animation: sl-pulse 1.4s ease-in-out infinite; }
.live-pill.won { color: var(--green); border-color: rgba(111,207,151,.4); }
.live-pill.won .dot { background: var(--green); box-shadow: 0 0 8px rgba(111,207,151,.8); }
.live-pill.lost { color: var(--red); border-color: rgba(229,107,107,.4); }
.live-pill.lost .dot { background: var(--red); box-shadow: 0 0 8px rgba(229,107,107,.8); }

/* stake stepper · mirrors the slots' "− value +" control so every game on the
   floor changes a bet the same way */
.stepper2 { display: flex; align-items: center; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; background: var(--panel-3); }
.stepper2 button { width: 44px; height: 46px; background: transparent; color: var(--gold); border: 0; font: 400 20px var(--mono); cursor: pointer; transition: background .15s; }
.stepper2 button:hover { background: rgba(217,185,112,.1); }
.stepper2 button:active { background: rgba(217,185,112,.18); }
.stepper2 .val { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; }
.stepper2 .val input { width: 100%; min-width: 0; border: 0; background: none; text-align: center; font: 600 15px var(--mono); color: var(--fg-strong); padding: 0; }
.stepper2 .val input:focus { outline: none; }
.stepper2 .val .u { flex: none; font: 500 10px var(--mono); color: var(--fg-ghost); }

/* bet panel bits */
.preset { height: 30px; border-radius: 10px; border: 1px solid var(--bd); background: none; color: var(--fg-dim); font: 600 10px var(--mono); cursor: pointer; transition: all .18s; }
.preset:hover { border-color: rgba(217,185,112,.4); color: var(--gold-hi); }
.preset.active { border-color: rgba(217,185,112,.55); color: var(--gold); background: rgba(217,185,112,.07); }
.btn-bet { position: relative; overflow: hidden; width: 100%; height: 52px; margin-top: 16px; border: none; border-radius: 12px; background: var(--gold); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: transform .15s, filter .2s; }
.btn-bet:hover { filter: brightness(1.07); }
.btn-bet:active { transform: scale(.985); }
.btn-bet:disabled { filter: grayscale(.5) brightness(.85); cursor: default; }
[data-sl-result-banner] { display: none; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 4px; background: rgba(217,185,112,.05); font: 500 12px var(--mono); letter-spacing: .04em; }

/* fair mini-panel on game pages */
.fair-box { margin-top: 16px; border: 1px solid var(--line-3); background: var(--panel-2); border-radius: 16px; padding: 18px; }
.fair-box h3 { margin: 0 0 12px; font: 600 15px var(--sans); color: var(--fg-strong); }
.fair-box .fl { font: 600 8.5px var(--mono); letter-spacing: .2em; color: var(--fg-ghost); text-transform: uppercase; margin-bottom: 6px; }
.fair-box .fv { font: 400 11px var(--mono); color: var(--fg-dim); word-break: break-all; margin-bottom: 14px; }

/* big dice number stage (engine hook: [data-sl-dice-big] > .dice-num) */
.dice-big { text-align: center; }
.dice-big .dice-num { font: 600 84px/1 var(--sans); color: var(--fg-strong); }

/* ---- mines stage (engine: [data-sl-cell] tiles get .safe/.bomb/.revealed) */
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mines-big { width: 460px; max-width: 92%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: 0 auto; }
.mines-big .tile { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--bd); background: var(--panel-3); cursor: pointer; transition: all .18s; font-size: 18px; color: var(--gold-hi); display: flex; align-items: center; justify-content: center; }
.mines-big .tile:hover { border-color: rgba(217,185,112,.4); transform: scale(1.04); }
.mines-big .tile.safe { border-color: rgba(217,185,112,.45) !important; color: var(--gold-hi); }
.mines-big .tile.bomb { border-color: rgba(229,107,107,.55) !important; }
.mines-big .tile.revealed { animation: pop .4s ease; }

/* ---- plinko stage (engine injects svg into [data-sl-plinko-stage]) */
.plinko-big { width: min(560px, 95%); height: 380px; margin: 0 auto; }
.plinko-big svg { width: 100%; height: 100%; }
.plinko-big .peg { fill: rgba(217,185,112,.5); }
.plinko-big .ball { fill: #F6F1E7; filter: drop-shadow(0 0 7px rgba(246,241,231,.9)); }
.plinko-big .ball.alt { fill: var(--gold-hi); filter: drop-shadow(0 0 7px rgba(244,221,158,.9)); }
.plinko-big .bucket-rect { fill: var(--bg-2); stroke: var(--line); }
.plinko-big .bucket-rect.high { stroke: rgba(217,185,112,.6); }
.plinko-big .bucket-rect.midhigh { stroke: rgba(233,204,133,.5); }
.plinko-big text.bucket { font-family: var(--mono); font-size: 11px; fill: var(--fg-dim); }
.plinko-big text.bucket.high { fill: var(--gold-hi); }
.plinko-big text.bucket.midhigh { fill: var(--gold-mid); }

/* ---- crash stage (engine drives svg paths + [data-sl-crash-mult]) */
.crash-stage { width: 100%; height: 420px; position: relative; background: radial-gradient(circle at 30% 70%, rgba(217,185,112,.06), transparent 60%); }
.crash-stage svg { width: 100%; height: 100%; }
.crash-mult-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: 500 clamp(80px, 12vw, 150px)/1 var(--sans); letter-spacing: -4px; pointer-events: none; }
.crash-mult-large.purple { color: var(--gold-mid); }
.crash-mult-large.cyan { color: var(--gold); }
.crash-mult-large.red { color: var(--red); }
.crash-status { position: absolute; top: 16px; left: 16px; font: 600 9.5px var(--mono); letter-spacing: .2em; color: var(--gold); display: flex; align-items: center; gap: 7px; z-index: 2; }
.crash-status .dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; animation: blink 1s infinite; }
@keyframes draw-line { 0% { stroke-dashoffset: 600; opacity: .2; } 20% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fill-area { 0%, 30% { opacity: 0; } 100% { opacity: .25; } }

table.t2 { width: 100%; border-collapse: collapse; }
table.t2 th { text-align: left; font: 600 8.5px var(--mono); letter-spacing: .22em; color: var(--fg-ghost); padding: 14px 20px; border-bottom: 1px solid var(--line); }
table.t2 td { padding: 12px 20px; border-bottom: 1px solid #0F0F13; font: 500 12px var(--mono); color: var(--fg-dim); }
table.t2 tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------------
   Leaderboard rows (lib/leaderboard.js renders .lb-row into [data-sl-lb-table])
   ------------------------------------------------------------------------- */
.lb-row { display: grid; grid-template-columns: 64px 1.6fr 1.1fr 1fr 1fr 64px; gap: 10px; align-items: center; padding: 12px 20px; border-bottom: 1px solid #0F0F13; font: 500 12px var(--mono); color: var(--fg-dim); }
.lb-row:last-child { border-bottom: none; }
.lb-row.head { font: 600 8.5px var(--mono); letter-spacing: .22em; color: var(--fg-ghost); border-bottom: 1px solid var(--line); padding: 14px 20px; }
.lb-row .rk { color: var(--fg-faint); }
.lb-row .rk.cyan { color: var(--gold); }
.lb-row .green { color: var(--green); }
.lb-row .red { color: var(--red); }
.lb-row .tbl-dim { color: var(--fg-mute); }
.lb-row.you { background: rgba(217,185,112,.05); }
@media (max-width: 860px) { .lb-row { grid-template-columns: 44px 1.4fr 1fr 64px; } .lb-row .fv, .lb-row .wg { display: none; } }
.sl-pager { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--fg-ghost); }
.sl-pager button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--bd); background: none; color: var(--fg-dim); cursor: pointer; transition: all .2s; }
.sl-pager button:hover { border-color: rgba(217,185,112,.4); color: var(--gold-hi); }
.sl-pager button:disabled { opacity: .35; cursor: default; }
#lb-seg button.on { background: var(--gold) !important; color: var(--ink) !important; border-color: transparent !important; }
#lb-seg button:not(.on) { background: transparent !important; color: var(--fg-dim) !important; }

/* ---------------------------------------------------------------------------
   Biggest-wins tabs + pagination (lobby)
   ------------------------------------------------------------------------- */
.bw-tab { height: 36px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--bd); background: transparent; color: var(--fg-dim); font: 600 11.5px var(--sans); cursor: pointer; transition: all .2s; }
.bw-tab:hover { border-color: rgba(217,185,112,.4); color: var(--gold-hi); }
.bw-tab.on { background: #17171C; color: var(--fg); border-color: rgba(217,185,112,.3); }
.bw-pgbtn { height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--bd); background: none; color: var(--fg-dim); font: 600 11px var(--sans); cursor: pointer; transition: all .2s; }
.bw-pgbtn:hover:not(:disabled) { border-color: rgba(217,185,112,.4); color: var(--gold-hi); }
.bw-pgbtn:disabled { opacity: .35; cursor: default; }