/* SkinHunter style.css - V2026.04.29-sidenav-icons-uniform-white (SideNav SVG icons normalized to match PNG icons brightness) */
/* ═══════════════════════════════════════════════════════
   CSLOW  —  DESIGN SYSTEM v4
   Premium  ·  Dark  ·  Professional
   No emojis in UI chrome  ·  Gold accent  ·  CS2 vibes
═══════════════════════════════════════════════════════ */

/* ── TOKEN LAYER ──────────────────────────────────── */
:root {
  /* surfaces */
  --bg:      #1b1b1b;
  --ink:     #161616;
  --panel:   #212121;
  --card:    #212121;
  --card2:   #242429;
  --lift:    #2a2a30;

  /* borders */
  --b1:  #2a2a30;
  --b2:  #323238;
  --b3:  #3a3a3a;

  /* gold brand */
  --g:     #f0a830;
  --g2:    #f5b548;
  --g3:    rgba(240,168,48,.14);
  --glow:  rgba(240,168,48,.28);

  /* semantic */
  --green:  #3ccf82;
  --red:    #e15b5b;
  --blue:   #f0a830;
  --cyan:   #06b6d4;
  --purple: #a78bfa;
  --orange: #f0a830;

  /* text */
  --hi:   #ffffff;
  --tx:   #b1bad3;
  --mute: #7a8599;
  --dim:  #4a4a4a;

  /* legacy compat — keep old vars pointing here */
  --void:   #1b1b1b;
  --neon:   #3ccf82;
  --neon2:  #16a34a;
  --neon3:  rgba(60,207,130,.1);
  --amber:  #f0a830;
  --ghost:  #7a8599;
  --bright: #ffffff;
  --text:   #b1bad3;
  --line:   #2a2a30;
  --line2:  #323238;
  --panel2: #242429;
  --cyan: #06b6d4;
  --red:  #e15b5b;
  --scanline: transparent;

  /* shape */
  --r:   6px;
  --r2:  10px;
  --r3:  14px;

  /* type */
  --fhe: "Heebo","Inter",sans-serif;
  --fen: "Inter","Heebo",sans-serif;
  --fdi: "Inter","Barlow Condensed",sans-serif;
}

/* ── BASE ─────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;overflow-x:hidden;background:var(--bg)}

/* Hide scrollbars everywhere — scroll still works via wheel/touch/keys */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
::-webkit-scrollbar-track{display:none}
::-webkit-scrollbar-thumb{display:none}

body{
  background:transparent; /* site-bg layer provides the backdrop */
  color:var(--tx);
  font-family:var(--fhe);
  font-size:14px;
  min-height:100vh;
  overflow-x:hidden;
  direction:rtl;
  padding-top:88px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative; /* anchor for .site-bg (absolute, top of page only) */
}

/* ═══════════════════════════════════════════════════
   SITE BACKGROUND  (clash.gg-style: image at top only, fades into bg)
   - Absolute layer at top of the page (~1100px tall, top-anchored)
   - Image fades out via mask-gradient into the site bg color
   - Below the image: pure --bg color (no decoration), as on clash.gg
═══════════════════════════════════════════════════ */
.site-bg{
  position:absolute;
  top:0; left:0; right:0;
  height:1100px;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.site-bg__image{
  position:absolute;
  inset:0;
  background-image:url('/Media/background.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  opacity:0.06;
  /* desaturate so the original colors don't fight the gold theme */
  filter:grayscale(1) brightness(1.1);
  /* fade the image out near the bottom so it dissolves into --bg */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
.site-bg__tint{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 30%, rgba(240,168,48,0.05) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(240,168,48,0.03) 0%, transparent 50%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
/* below the site-bg layer, html paints --bg (already set on line 71) */

/* ── PAYMENT / ALERT BANNER ──────────────────────── */
#paymentBanner{
  display:none;
  background:rgba(240,168,48,.05);
  border-bottom:1px solid rgba(240,168,48,.18);
  padding:8px 24px;
  position:relative;z-index:300;
}

/* ═══════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════ */
header{
  position:fixed;top:0;left:0;right:0;
  z-index:400;
  height:88px;
  background:var(--ink);
  border-bottom:1px solid var(--b1);
  display:flex;align-items:stretch;
  overflow:visible;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* logo */
.logo-zone{
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:0 24px;
  height:100%;width:280px;
  flex-shrink:0;cursor:pointer;
  border-left:1px solid var(--b1);
  transition:background .15s;
  position:relative;
  overflow:hidden;
}
/* Orange glow under the logo — rises from bottom, fades into dark (CSBattle style) */
.logo-zone::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:60%;
  background:radial-gradient(ellipse at 50% 100%, rgba(240,168,48,.38) 0%, rgba(240,168,48,.18) 35%, rgba(240,168,48,0) 75%);
  pointer-events:none;
  z-index:0;
}
.logo-zone > *{position:relative;z-index:1;}
.logo-zone:hover{background:rgba(255,255,255,.02)}

/* CSLOW logo — BUCK head + CSLOW text (CSBattle-style proportions) */
.logo-buck{
  height:68.4px;width:auto;
  flex-shrink:0;
  object-fit:contain;
  display:block;
  margin-inline-end:6px;
}
.logo-txt{
  font-family:'Inter',sans-serif;
  font-weight:900;
  font-size:34.2px;
  letter-spacing:-1.5px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  margin-left:2px;
}
.logo-txt-cs{color:#ffffff;}
.logo-txt-low{
  background:linear-gradient(180deg,#FFE85C 0%,#FBDB2F 50%,#E8B91F 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.logo-mark{
  width:30px;height:30px;flex-shrink:0;
  background:linear-gradient(145deg,var(--g),var(--g2));
  clip-path:polygon(50% 0%,100% 30%,100% 70%,50% 100%,0% 70%,0% 30%);
  box-shadow:0 0 14px var(--glow);
  display:flex;align-items:center;justify-content:center;
}
.logo-mark-inner{
  width:12px;height:12px;
  background:var(--bg);
  clip-path:polygon(50% 0%,100% 30%,100% 70%,50% 100%,0% 70%,0% 30%);
}
.logo-text{font-family:'Barlow Condensed','Inter',var(--fen);font-size:22px;font-weight:700;letter-spacing:3px;color:var(--hi)}
.logo-text-accent{color:var(--g)}
.logo-sub{font-family:var(--fhe);font-size:10px;font-weight:500;color:var(--mute);display:block;margin-top:1px}

/* nav zone */
.nav-zone{display:flex;height:100%;flex:1}

.hdr-leaderboard-btn{
  display:inline-flex;align-items:center;
  background:none;border:none;box-shadow:none;
  padding:0;text-decoration:none;
  flex-shrink:0;margin-right:32px;
  transition:opacity .2s;
  align-self:center;
  overflow:visible;
  position:relative;
  top:10px;
  pointer-events:none;
}
[dir="ltr"] .hdr-leaderboard-btn{margin-right:0;margin-left:16px}
.hdr-leaderboard-btn:hover{opacity:0.8;background:none;border:none;}

.nav-item{
  display:flex;align-items:center;
  padding:0 16px;height:100%;
  font-family:var(--fhe);font-size:15px;font-weight:600;
  color:var(--mute);cursor:pointer;
  background:transparent;border:none;
  transition:all .18s;position:relative;white-space:nowrap;
}
.nav-item:hover{color:var(--tx);background:rgba(255,255,255,.025)}
.nav-item.active{color:var(--hi)}
.nav-item.active::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--g);border-radius:2px 2px 0 0;
}
.nav-dot{display:none}

/* hdr right */
.hdr-right{display:flex;align-items:center;height:100%;margin-right:auto;
  transition:padding-left .25s cubic-bezier(.4,0,.2,1);}
[dir="rtl"] .hdr-right{padding-left:56px}
[dir="ltr"] .hdr-right{margin-right:0;margin-left:auto}
[dir="ltr"] .logo-zone{margin-left:48px;transition:background .15s, margin-left .25s cubic-bezier(.4,0,.2,1);}

[dir="rtl"] body.side-nav-open .hdr-right{padding-left:228px}
[dir="ltr"] body.side-nav-open .logo-zone{margin-left:220px}

.hdr-cell{
  display:flex;align-items:center;height:100%;
  padding:0 14px;gap:8px;
  border-left:1px solid var(--b1);
}
[dir="ltr"] .hdr-cell{border-left:none;border-right:1px solid var(--b1)}

/* coins display */
.hdr-coins-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fen);font-size:15px;font-weight:700;
  color:var(--g2);background:var(--g3);
  border:1px solid rgba(240,168,48,.2);
  border-radius:20px;padding:5px 14px;
  white-space:nowrap;cursor:default;
  transition:border-color .15s;
}
.hdr-coins-chip:hover{border-color:rgba(240,168,48,.4)}
.hdr-coins-icon{
  width:15px;height:15px;
  background:linear-gradient(135deg,var(--g),var(--g2));
  border-radius:50%;flex-shrink:0;
}

.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green);animation:blink 2s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.status-text{font-family:var(--fen);font-size:13px;letter-spacing:2px;color:var(--green);text-transform:uppercase}

.username-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fen);font-size:15px;font-weight:600;
  color:var(--hi);padding:6px 14px;
  border:1px solid var(--b2);background:var(--card);
  border-radius:20px;cursor:pointer;transition:all .15s;
}
.username-chip:hover{border-color:var(--b3);background:var(--lift)}

.hdr-auth-btn{
  font-family:var(--fhe);font-size:14px;font-weight:700;
  padding:7px 22px;border:none;
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:#08090f;
  cursor:pointer;transition:all .18s;
  text-decoration:none;white-space:nowrap;border-radius:8px;
  box-shadow:0 2px 12px rgba(240,168,48,.22);
  letter-spacing:.3px;
}
.hdr-auth-btn:hover{
  background:linear-gradient(135deg,var(--g2),#f5b548);
  transform:translateY(-1px);box-shadow:0 4px 18px var(--glow);
}

.hdr-auth-ghost{
  font-family:var(--fhe);font-size:14px;font-weight:600;
  padding:6px 18px;border:1px solid var(--b3);
  background:rgba(255,255,255,.04);color:var(--tx);
  cursor:pointer;transition:all .18s;
  text-decoration:none;white-space:nowrap;border-radius:8px;
}
.hdr-auth-ghost:hover{
  border-color:rgba(255,255,255,.2);color:var(--hi);
  background:rgba(255,255,255,.07);
}

.cur-toggle{display:flex;gap:3px;background:var(--ink);border:1px solid var(--b2);border-radius:8px;padding:3px}
.cur-btn{
  font-family:var(--fen);font-size:12px;letter-spacing:.8px;font-weight:700;
  padding:4px 12px;border:none;
  background:transparent;color:var(--mute);
  cursor:pointer;transition:all .18s;border-radius:6px;text-transform:uppercase;
}
.cur-btn:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.cur-btn.active{
  color:var(--g);background:linear-gradient(135deg,rgba(240,168,48,.18),rgba(240,168,48,.08));
  box-shadow:0 1px 6px rgba(240,168,48,.15);
}

.logout-btn{
  font-family:var(--fen);font-size:12px;letter-spacing:.8px;font-weight:700;
  padding:6px 14px;border:1px solid rgba(225,91,91,.25);
  background:rgba(225,91,91,.06);color:rgba(225,91,91,.7);
  cursor:pointer;transition:all .18s;border-radius:8px;text-transform:uppercase;
}
.logout-btn:hover{
  border-color:rgba(225,91,91,.55);color:var(--red);
  background:rgba(225,91,91,.12);box-shadow:0 2px 12px rgba(225,91,91,.12);
}

.hdr-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--b2);vertical-align:middle}

/* ═══════════════════════════════════════════════════
   SIDE NAV  (collapsed by default, expands on toggle)
═══════════════════════════════════════════════════ */
.side-nav{
  position:fixed;top:0;bottom:0;left:0;
  width:220px;
  background:var(--ink);
  border-right:1px solid var(--b1);
  z-index:500;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  transition:width .25s cubic-bezier(.4,0,.2,1);
}
.side-nav.side-nav-collapsed{width:62px}
.side-nav::-webkit-scrollbar{width:3px}
.side-nav::-webkit-scrollbar-thumb{background:var(--b1)}

.side-nav-toggle{
  height:44px;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-bottom:1px solid var(--b1);
  color:var(--mute);cursor:pointer;transition:all .15s;flex-shrink:0;
}
.side-nav-toggle:hover{background:rgba(255,255,255,.025);color:var(--tx)}
.side-nav-toggle-icon{font-size:16px}

.side-nav-items{flex:1;padding:4px 0}
.side-nav-group{margin-bottom:4px}

.side-nav-group-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px 4px;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.side-nav:not(.side-nav-collapsed) .side-nav-group-header{opacity:1;pointer-events:auto}
.side-nav-group-title{font-family:var(--fen);font-size:8px;font-weight:800;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.side-nav-group-chevron{font-size:9px;color:var(--dim)}

.side-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:0 14px;height:44px;
  background:transparent;border:none;
  color:var(--mute);font-family:var(--fhe);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .15s;width:100%;
  text-align:right;white-space:nowrap;overflow:hidden;position:relative;
}
.side-nav-item:hover{color:var(--tx);background:rgba(255,255,255,.03)}
.side-nav-item.active{color:var(--g);background:var(--g3)}
.side-nav-item.active::before{
  content:"";position:absolute;top:0;right:0;bottom:0;
  width:2px;background:var(--g);
}
.side-nav-icon{
  font-size:18px;flex-shrink:0;width:22px;
  text-align:center;opacity:.65;transition:opacity .15s;
}
.side-nav-icon svg{width:18px;height:18px;color:#d6dceb}
.side-nav-item:hover .side-nav-icon,
.side-nav-item.active .side-nav-icon{opacity:1}
.side-nav-item.active .side-nav-icon svg{color:var(--g)}
.side-nav-label{flex:1;transition:opacity .2s;white-space:nowrap}
.side-nav.side-nav-collapsed .side-nav-label{opacity:0;pointer-events:none}
.side-nav.side-nav-collapsed .side-nav-group-header{opacity:0}

#sideNavOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:189}


.stat-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.stat-row-label{font-family:var(--fdi);font-size:16px;font-weight:500;color:var(--tx)}
.stat-row-val{font-family:var(--fen);font-size:15px;color:var(--hi);font-weight:600}
.stat-row-val.neon{color:var(--green)}
.stat-row-val.cyan{color:var(--cyan)}
.stat-row-val.red{color:var(--red)}
.stat-row-val.amber{color:var(--g)}

/* ═══════════════════════════════════════════════════
   PANELS
═══════════════════════════════════════════════════ */
.panel{
  background:var(--panel);border:1px solid var(--b1);
  position:relative;margin-bottom:14px;border-radius:var(--r);
}
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--b1);
  background:rgba(0,0,0,.22);
  border-radius:var(--r) var(--r) 0 0;
}
.panel-title{
  font-family:var(--fen);font-size:10px;letter-spacing:3px;
  color:var(--mute);text-transform:uppercase;font-weight:800;
  display:flex;align-items:center;gap:8px;
}
.panel-title::before{content:"";width:5px;height:5px;background:var(--g);border-radius:1px;transform:rotate(45deg)}
.panel-count{font-family:var(--fen);font-size:12px;font-weight:600;color:var(--mute)}
.panel-body{padding:16px}

.error-box{border:1px solid rgba(225,91,91,.3);background:rgba(225,91,91,.05);padding:14px 18px;font-family:var(--fen);font-size:12px;color:var(--red);text-align:center;border-radius:var(--r)}
.empty-state{text-align:center;padding:60px 20px;color:var(--mute);font-family:var(--fen);font-size:15px}
.loading-state{text-align:center;padding:60px 20px}
.spinner{width:22px;height:22px;border:2px solid var(--b2);border-top-color:var(--g);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{font-family:var(--fen);font-size:10px;color:var(--mute);letter-spacing:2.5px;text-transform:uppercase}

/* ═══════════════════════════════════════════════════
   PAGES
═══════════════════════════════════════════════════ */
.page-outer{padding:20px;position:relative;z-index:1;grid-column:1/-1}
.page-titlebar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--b1);
}
.page-title-text{font-family:var(--fen);font-size:10px;letter-spacing:3.5px;color:var(--mute);text-transform:uppercase;font-weight:800}

/* ── BUTTON SYSTEM ────────────────────────────────── */
.act-btn{
  font-family:var(--fen);font-size:11px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:7px 16px;
  border:1px solid rgba(240,168,48,.5);
  background:linear-gradient(135deg,rgba(240,168,48,.55),rgba(240,168,48,.35));
  color:#fff;cursor:pointer;transition:all .18s;border-radius:var(--r);
  box-shadow:0 2px 10px rgba(240,168,48,.18);
}
.act-btn:hover{
  background:linear-gradient(135deg,rgba(240,168,48,.75),rgba(240,168,48,.55));
  border-color:rgba(240,168,48,.8);
  box-shadow:0 3px 16px rgba(240,168,48,.28);
  transform:translateY(-1px);
}
.act-btn.secondary{border-color:var(--b2);background:transparent;color:var(--mute)}
.act-btn.secondary:hover{border-color:var(--b3);color:var(--tx)}
.act-btn.danger{border-color:rgba(225,91,91,.4);background:transparent;color:var(--red)}
.act-btn.danger:hover{background:rgba(225,91,91,.1)}

.btn-primary{
  font-family:var(--fen);font-size:13px;font-weight:700;
  padding:9px 20px;border:none;
  background:var(--g);color:#08090f;
  cursor:pointer;transition:all .18s;border-radius:var(--r);
}
.btn-primary:hover{background:var(--g2);transform:translateY(-1px);box-shadow:0 4px 16px var(--glow)}

/* ── METRICS ──────────────────────────────────────── */
.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--b1);
  margin-bottom:18px;border:1px solid var(--b1);
  border-radius:var(--r2);overflow:hidden;
}
.metric-cell{background:var(--card);padding:16px 18px}
.metric-label{font-family:var(--fen);font-size:9px;font-weight:800;color:var(--mute);margin-bottom:6px;letter-spacing:1.5px;text-transform:uppercase}
.metric-val{font-family:var(--fen);font-size:19px;color:var(--hi);font-weight:700}
.metric-val.g{color:var(--green)}
.metric-val.c{color:var(--cyan)}
.metric-val.r{color:var(--red)}
.metric-val.a{color:var(--g)}
.metric-sub{font-family:var(--fen);font-size:11px;color:var(--mute);margin-top:3px}

/* ── TABLE ────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  background:var(--ink);padding:8px 12px;
  text-align:right;font-family:var(--fen);
  font-size:9px;font-weight:800;color:var(--mute);
  border-bottom:1px solid var(--b1);letter-spacing:1.5px;text-transform:uppercase;
}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--b1);font-size:12px;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(240,168,48,.02)}
.data-table tr.deal-overdue td{background:rgba(225,91,91,.03)}
.td-mono{font-family:var(--fen);font-size:13px;color:var(--tx)}
.td-name{font-family:var(--fdi);font-size:14px;font-weight:600;color:var(--hi);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-profit-pos{font-family:var(--fen);font-size:13px;color:var(--green);font-weight:700}
.deal-profit-neg{font-family:var(--fen);font-size:13px;color:var(--red);font-weight:700}
.deal-delete{background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:11px;padding:3px 6px;transition:color .15s}
.deal-delete:hover{color:var(--red)}
.deals-stats-row{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--b1);border:1px solid var(--b1);
  margin-bottom:14px;border-radius:var(--r2);overflow:hidden;
}
.ds-cell{background:var(--card);padding:12px 14px}
.ds-label{font-family:var(--fen);font-size:9px;font-weight:800;color:var(--mute);margin-bottom:4px;letter-spacing:1.5px;text-transform:uppercase}
.ds-val{font-family:var(--fen);font-size:15px;color:var(--hi);font-weight:600}

/* ── PORTFOLIO ────────────────────────────────────── */
.port-item{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:12px 16px;border:1px solid var(--b1);background:var(--card);
  margin-bottom:3px;transition:all .15s;border-radius:var(--r);
}
.port-item:hover{border-color:var(--b2);background:var(--lift)}
.pi-name{font-family:var(--fdi);font-size:14px;font-weight:600;color:var(--hi);margin-bottom:4px}
.pi-meta{font-family:var(--fen);font-size:11px;color:var(--mute);display:flex;gap:12px}
.pi-pl{font-family:var(--fen);font-size:18px;font-weight:700;text-align:left}
.pi-pl.g{color:var(--green)}
.pi-pl.r{color:var(--red)}
.pi-pct{font-family:var(--fen);font-size:11px;text-align:left}
.pi-pct.g{color:var(--green)}
.pi-pct.r{color:var(--red)}
.pi-actions{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.pi-btn-sell{
  font-family:var(--fen);font-size:11px;font-weight:700;
  padding:4px 12px;border:1px solid rgba(60,207,130,.4);
  background:rgba(60,207,130,.08);color:var(--green);
  cursor:pointer;transition:all .15s;border-radius:4px;
}
.pi-btn-sell:hover{background:rgba(60,207,130,.18)}
.pi-btn-rm{
  font-family:var(--fen);font-size:11px;padding:4px 10px;
  border:1px solid var(--b2);background:transparent;
  color:var(--mute);cursor:pointer;transition:all .15s;border-radius:4px;
}
.pi-btn-rm:hover{border-color:var(--red);color:var(--red)}
.port-sold{
  border:1px solid rgba(60,207,130,.1);background:rgba(60,207,130,.02);
  padding:12px 16px;margin-bottom:3px;display:grid;
  grid-template-columns:1fr auto;gap:16px;align-items:center;
  opacity:.8;border-radius:var(--r);
}

/* ── FORMS ────────────────────────────────────────── */
.form-block{margin-bottom:14px}
.form-label{
  font-family:var(--fen);font-size:9px;font-weight:800;
  letter-spacing:1.5px;color:var(--mute);text-transform:uppercase;
  display:block;margin-bottom:6px;
}
.form-input{
  width:100%;background:var(--ink);border:1px solid var(--b2);
  padding:9px 13px;color:var(--hi);
  font-family:var(--fen);font-size:13px;
  outline:none;transition:border-color .15s;
  box-sizing:border-box;border-radius:var(--r);
}
.form-input:focus{border-color:var(--g)}
.form-input::placeholder{color:var(--dim)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ── PROFILE ──────────────────────────────────────── */
.profile-card{
  background:var(--panel);border:1px solid var(--b1);
  padding:24px;position:relative;overflow:hidden;border-radius:var(--r2);
}
.profile-card::before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:linear-gradient(180deg,var(--g),transparent)}
.profile-avatar{
  width:60px;height:60px;background:var(--card);
  border:2px solid var(--b2);display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;position:relative;cursor:pointer;overflow:hidden;
  transition:all .2s;border-radius:50%;
}
.profile-avatar:hover{border-color:var(--g);box-shadow:0 0 16px var(--glow)}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-avatar-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;border-radius:50%;font-size:14px;
}
.profile-avatar:hover .profile-avatar-overlay{opacity:1}
.hdr-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--b2);vertical-align:middle}
.profile-username{font-family:var(--fen);font-size:16px;color:var(--hi);letter-spacing:1.5px;margin-bottom:4px;font-weight:700}
.profile-sub{font-family:var(--fen);font-size:12px;font-weight:600;color:var(--mute)}
.divider{height:1px;background:var(--b1);margin:18px 0}
.section-sub-title{font-family:var(--fen);font-size:9px;font-weight:800;letter-spacing:2.5px;color:var(--mute);text-transform:uppercase;margin-bottom:12px}

/* ── ADMIN ────────────────────────────────────────── */
.admin-card{
  background:var(--panel);border:1px solid var(--b1);
  padding:22px;position:relative;overflow:hidden;border-radius:var(--r2);
}
.admin-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--g),transparent)}

/* ═══════════════════════════════════════════════════
   MODALS  —  Premium overlay look
═══════════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:1000;align-items:center;justify-content:center;
}
.modal-box{
  background:var(--panel);border:1px solid var(--b2);
  padding:28px;width:min(480px,96vw);
  position:relative;max-height:90vh;overflow-y:auto;
  border-radius:var(--r2);
  box-shadow:0 30px 90px rgba(0,0,0,.65),
             0 0 0 1px rgba(240,168,48,.07);
}
.modal-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--g) 0%,rgba(240,168,48,.3) 60%,transparent 100%);
  border-radius:var(--r2) var(--r2) 0 0;
  z-index:2;
}
.modal-box::after{
  content:"";position:absolute;inset:0;
  background-image:url('/Media/POPUP91.png');
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  opacity:.7;
  border-radius:var(--r2);
  pointer-events:none;
  z-index:0;
}
.modal-box > *{position:relative;z-index:1;}
.modal-title{
  font-family:var(--fen);font-size:11px;letter-spacing:3.5px;
  color:var(--mute);text-transform:uppercase;margin-bottom:10px;font-weight:800;
}
.modal-label{
  font-family:var(--fen);font-size:9px;font-weight:800;
  letter-spacing:1.5px;color:var(--mute);text-transform:uppercase;
  display:block;margin-bottom:6px;
}
.modal-input{
  width:100%;background:var(--ink);border:1px solid var(--b2);
  padding:9px 13px;color:var(--hi);font-family:var(--fen);font-size:13px;
  outline:none;transition:border-color .15s;box-sizing:border-box;border-radius:var(--r);
}
.modal-input:focus{border-color:var(--g)}
.modal-input::placeholder{color:var(--dim)}
.modal-footer{display:flex;gap:10px;margin-top:16px}
.profit-preview{
  border:1px solid rgba(240,168,48,.2);background:rgba(240,168,48,.03);
  padding:12px 16px;margin-bottom:14px;display:none;gap:20px;border-radius:var(--r);
}
.pp-val{font-family:var(--fen);font-size:20px;font-weight:700}
.pp-label{font-family:var(--fen);font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--mute);margin-bottom:3px;text-transform:uppercase}
.pp-pct{font-family:var(--fen);font-size:13px}
.modal-ac{
  position:absolute;top:calc(100% + 2px);left:0;right:0;
  background:var(--card);border:1px solid var(--b2);
  z-index:600;max-height:200px;overflow-y:auto;display:none;border-radius:var(--r);
}

/* ── STATUS BADGES ────────────────────────────────── */
.status-badge{
  display:inline-block;
  font-family:var(--fen);font-size:9px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  padding:2px 8px;border-radius:3px;border:1px solid;
}
.status-badge.pending   {color:var(--g)     ;border-color:rgba(240,168,48,.3)  ;background:rgba(240,168,48,.08)}
.status-badge.active    {color:var(--green)  ;border-color:rgba(60,207,130,.3)   ;background:rgba(60,207,130,.08)}
.status-badge.completed {color:var(--cyan)   ;border-color:rgba(6,182,212,.3)   ;background:rgba(6,182,212,.08)}
.status-badge.cancelled {color:var(--red)    ;border-color:rgba(225,91,91,.3)   ;background:rgba(225,91,91,.08)}
.status-badge.processing{color:var(--purple) ;border-color:rgba(167,139,250,.3) ;background:rgba(167,139,250,.08)}

/* ── DISCORD FLOAT ────────────────────────────────── */
.discord-float{
  position:fixed;bottom:20px;left:20px;z-index:500;
  background:var(--panel);border:1px solid var(--b2);
  padding:14px 18px;max-width:250px;display:none;border-radius:var(--r2);
}
.discord-float::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#f0a830,transparent);border-radius:var(--r2) var(--r2) 0 0}
.discord-btn{display:block;background:#f0a830;border:none;padding:9px 14px;color:#fff;font-size:13px;font-weight:700;font-family:var(--fdi);letter-spacing:1px;text-decoration:none;text-align:center;cursor:pointer;width:100%;margin-top:10px;transition:opacity .15s;border-radius:var(--r)}
.discord-btn:hover{opacity:.88}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page-fade{animation:fadeUp .25s ease forwards}

/* ═══════════════════════════════════════════════════
   PROFILE TABS
═══════════════════════════════════════════════════ */
.profile-tab-btn{
  font-family:var(--fen);font-size:10px;font-weight:800;
  padding:6px 14px;border:1px solid var(--b2);background:transparent;
  color:var(--mute);border-radius:var(--r);cursor:pointer;
  white-space:nowrap;transition:all .15s;letter-spacing:.5px;
  text-transform:uppercase;flex-shrink:0;
}
.profile-tab-btn:hover{border-color:rgba(240,168,48,.4);color:var(--g)}
.profile-tab-btn.active{border-color:var(--g);color:var(--g);background:var(--g3)}
#profileTabBar::-webkit-scrollbar{display:none}
#profileTabBar{-ms-overflow-style:none;scrollbar-width:none}

.pstat-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:var(--r);font-family:var(--fen);font-size:12px}
.pstat-row.win {border-color:rgba(60,207,130,.15);background:rgba(60,207,130,.04)}
.pstat-row.loss{border-color:rgba(225,91,91,.12);background:rgba(225,91,91,.03)}
.pbreak-row{display:flex;align-items:center;gap:8px;font-family:var(--fen);font-size:11px}
.pbreak-label{width:80px;flex-shrink:0;color:var(--mute);text-align:right}
.pbreak-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.pbreak-bar{height:100%;border-radius:3px;transition:width .5s ease;min-width:2px}
.pbreak-count{min-width:38px;flex-shrink:0;color:var(--hi);font-size:11px;text-align:left}

/* ═══════════════════════════════════════════════════
   CASE CARD  —  premium game card
═══════════════════════════════════════════════════ */
.case-card{
  background:var(--panel);border:1px solid var(--b1);
  border-radius:var(--r3);overflow:hidden;
  transition:all .22s;cursor:pointer;position:relative;
}
.case-card:hover{
  border-color:rgba(240,168,48,.35);
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(0,0,0,.45);
}
.case-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--g),transparent);
  opacity:0;transition:opacity .25s;
}
.case-card:hover::before{opacity:.7}
.case-card-img{text-align:center;padding:18px 14px 10px}
.case-card-img img{
  width:120px;height:90px;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(240,168,48,.15));
  transition:transform .3s;
}
.case-card:hover .case-card-img img{transform:scale(1.08) translateY(-2px)}
.case-card-body{padding:10px 14px 14px}
.case-card-name{font-family:var(--fdi);font-size:14px;font-weight:600;color:var(--hi);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-card-price{font-family:var(--fen);font-size:13px;color:var(--g);font-weight:700;margin-bottom:10px}
.case-card-btn{
  width:100%;padding:8px;border:none;
  background:var(--g);color:#08090f;
  font-family:var(--fen);font-size:11px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:all .18s;border-radius:var(--r);
}
.case-card-btn:hover{background:var(--g2)}
.case-card-btn:disabled{background:var(--b1);color:var(--mute);cursor:not-allowed}

/* case open modal */
#caseOpenModal{align-items:center;justify-content:center;flex-direction:column}
#caseOpenContent{scrollbar-width:thin;scrollbar-color:var(--g) var(--bg)}
#caseOpenContent::-webkit-scrollbar{width:3px}
#caseOpenContent::-webkit-scrollbar-track{background:var(--bg)}
#caseOpenContent::-webkit-scrollbar-thumb{background:var(--g);border-radius:2px}
@media(max-width:768px){.cases-grid{grid-template-columns:1fr !important;gap:10px !important}}
@media(min-width:769px) and (max-width:1024px){.cases-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}}

/* ═══════════════════════════════════════════════════
   BATTLE HUB CARDS
═══════════════════════════════════════════════════ */
.bhub-card{
  display:flex;align-items:center;min-height:70px;
  padding:14px 18px;background:var(--panel);border:1px solid var(--b1);
  margin-bottom:6px;transition:all .18s;gap:16px;border-radius:var(--r);
}
.bhub-card:hover{border-color:var(--b2);background:var(--card)}
.bhub-divider{width:1px;height:40px;background:var(--b1);flex-shrink:0}
.bhub-players{display:flex;gap:6px;align-items:center;flex-shrink:0}
.bhub-cost{min-width:100px}
.bhub-cases{flex:1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 8px}
.bhub-cta{flex-shrink:0}
.bhist-card{
  display:flex;align-items:center;min-height:62px;
  padding:12px 18px;background:var(--panel);border:1px solid var(--b1);
  margin-bottom:6px;transition:all .18s;gap:16px;border-radius:var(--r);opacity:.85;
}
.bhist-card:hover{border-color:var(--b2);opacity:1}
.bhist-divider{width:1px;height:34px;background:var(--b1);flex-shrink:0}
.bhist-players{display:flex;gap:6px;align-items:center;flex-shrink:0}
.bhist-winner{flex-shrink:0}
.bhist-cost{min-width:80px}
.bhist-cases{flex:1;display:flex;gap:5px;flex-wrap:wrap;align-items:center;padding:0 8px}

/* ═══════════════════════════════════════════════════
   ROULETTE  —  bet cards
═══════════════════════════════════════════════════ */
.roulette-bet-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.roulette-bet-card{
  background:var(--panel);border:1px solid var(--b1);
  border-radius:var(--r2);padding:16px;
  transition:all .2s;cursor:pointer;
}
.roulette-bet-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.roulette-bet-label{font-family:var(--fen);font-size:13px;font-weight:700;letter-spacing:1px;text-align:center;margin-bottom:8px;text-transform:uppercase}
.roulette-bet-btn{width:100%;padding:10px;border:none;border-radius:var(--r);font-family:var(--fen);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .18s}

/* ═══════════════════════════════════════════════════
   COINFLIP
═══════════════════════════════════════════════════ */
.cf-listing{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;background:var(--panel);border:1px solid var(--b1);
  border-radius:var(--r);margin-bottom:6px;transition:all .15s;
}
.cf-listing:hover{border-color:var(--b2);background:var(--card)}
.cf-vs-badge{font-family:var(--fdi);font-size:16px;font-weight:700;color:var(--dim);letter-spacing:2px}
.cf-empty{font-size:15px;color:var(--mute);text-align:center;padding:40px 20px;}
.cf-coin{
  width:78px;height:78px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;border:3px solid;transition:all .15s;flex-shrink:0;
}
.cf-coin.heads{background:linear-gradient(135deg,var(--card),var(--lift));border-color:var(--g);color:var(--g)}
.cf-coin.tails{background:linear-gradient(135deg,var(--card),var(--lift));border-color:var(--mute);color:var(--mute)}

/* ═══════════════════════════════════════════════════
   RESULT POPUPS  —  Win / Lose
═══════════════════════════════════════════════════ */
.result-popup-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:1100;display:flex;align-items:center;justify-content:center;
}
.result-popup{
  background:var(--card2);border:1px solid var(--b2);
  border-radius:var(--r3);padding:36px 40px;
  text-align:center;max-width:440px;width:90%;
  position:relative;
  box-shadow:0 36px 100px rgba(0,0,0,.65);
  animation:fadeUp .3s ease;
  overflow:hidden;
}
.result-popup::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:var(--r3) var(--r3) 0 0;
  z-index:2;
}
.result-popup::after{
  content:"";position:absolute;inset:0;
  background-image:url('/Media/POPUP91.png');
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  opacity:.7;
  border-radius:var(--r3);
  pointer-events:none;
  z-index:0;
}
.result-popup > *{position:relative;z-index:1;}
.result-popup.win::before{background:linear-gradient(90deg,transparent,var(--g) 40%,transparent)}
.result-popup.lose::before{background:linear-gradient(90deg,transparent,var(--red) 40%,transparent)}

.result-popup-title{
  font-family:var(--fdi);font-size:30px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;
}
.result-popup.win  .result-popup-title{color:var(--g2)}
.result-popup.lose .result-popup-title{color:var(--mute)}

.result-popup-amount{
  font-family:var(--fen);font-size:40px;font-weight:800;margin-bottom:6px;
}
.result-popup.win .result-popup-amount{color:var(--g)}
.result-popup-sub{font-family:var(--fen);font-size:13px;color:var(--mute);margin-bottom:24px}
.result-popup-actions{display:flex;gap:10px;justify-content:center}
.result-popup-btn{
  padding:9px 22px;font-family:var(--fen);font-size:11px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;border-radius:var(--r);
  cursor:pointer;transition:all .15s;border:1px solid;
}
.result-popup-btn.primary{background:var(--g);color:#08090f;border-color:var(--g)}
.result-popup-btn.primary:hover{background:var(--g2)}
.result-popup-btn.secondary{background:transparent;color:var(--mute);border-color:var(--b2)}
.result-popup-btn.secondary:hover{border-color:var(--b3);color:var(--tx)}

/* ═══════════════════════════════════════════════════
   PROMO SLIDER SECTION
═══════════════════════════════════════════════════ */
.promo-slider-section{
  position:relative;
  padding:28px 28px 20px;
  overflow:hidden;
  background:var(--bg);
}

/* ── Track & Cards layout ── */
.promo-slider-track{
  display:grid;
  grid-template-columns:1.72fr 1fr 1fr;
  gap:14px;
  max-width:1380px;
  margin:0 auto;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}

/* ── Base card ── */
.promo-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--b1);
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.promo-card:hover{
  transform:translateY(-4px) scale(1.008);
  border-color:rgba(240,168,48,.35);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(240,168,48,.08);
}

/* Featured card is taller */
.promo-card--featured{
  min-height:400px;
  justify-content:flex-end;
}

/* ── Background layers ── */
.promo-card__bg-layer{
  position:absolute;inset:0;z-index:0;
}
.promo-card--battles .promo-card__bg-layer{
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(225,91,91,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(240,168,48,.12) 0%, transparent 60%),
    linear-gradient(160deg, #130a0a 0%, #1b1b1b 40%, #1b1b1b 100%);
}
.promo-card--cases .promo-card__bg-layer{
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(6,182,212,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(240,168,48,.12) 0%, transparent 60%),
    linear-gradient(150deg, #161616 0%, #1b1b1b 50%, #1b1b1b 100%);
}
.promo-card--leaderboard .promo-card__bg-layer{
  background:
    radial-gradient(ellipse 80% 60% at 60% 20%, rgba(167,139,250,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(240,168,48,.12) 0%, transparent 60%),
    linear-gradient(155deg, #1b1b1b 0%, #1b1b1b 40%, #1b1b1b 100%);
}

/* ── Noise texture ── */
.promo-card__noise{
  position:absolute;inset:0;z-index:1;opacity:.04;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ── Light beams ── */
.promo-card__beams{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
.promo-beam{
  position:absolute;
  width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.06) 70%, transparent 100%);
  top:0; bottom:0;
  animation:beamMove 6s ease-in-out infinite;
}
.promo-beam--1{ left:25%; animation-delay:0s; }
.promo-beam--2{ left:70%; animation-delay:3s; }
@keyframes beamMove{
  0%,100%{ opacity:.4; transform:scaleX(1); }
  50%{ opacity:.15; transform:scaleX(3); }
}

/* ── Content ── */
.promo-card__content{
  position:relative;z-index:10;
  padding:28px 28px 28px;
  background:linear-gradient(0deg, rgba(27,27,27,.96) 0%, rgba(27,27,27,.7) 60%, transparent 100%);
  display:flex;flex-direction:column;gap:10px;
}
.promo-card--featured .promo-card__content{
  padding:36px 36px 32px;
}

/* ── Eyebrow ── */
.promo-card__eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fen);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
.promo-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;background:var(--mute);
  display:inline-block;
}
.promo-eyebrow-dot--live{
  background:#e15b5b;
  box-shadow:0 0 6px rgba(225,91,91,.8);
  animation:livePulse 1.8s ease-in-out infinite;
}
.promo-eyebrow-dot--rank{
  background:#a78bfa;
  box-shadow:0 0 6px rgba(167,139,250,.8);
}
@keyframes livePulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.6; transform:scale(1.4); }
}

/* ── Icon ── */
.promo-card__icon-wrap{
  display:flex;align-items:center;
}
.promo-card__icon{
  width:32px;height:32px;
  opacity:.9;
}
.promo-card--featured .promo-card__icon{
  width:40px;height:40px;
}
.promo-card--battles .promo-card__icon{ color:#e15b5b; filter:drop-shadow(0 0 8px rgba(225,91,91,.5)); }
.promo-card--cases .promo-card__icon{ color:#06b6d4; filter:drop-shadow(0 0 8px rgba(6,182,212,.5)); }
.promo-card--leaderboard .promo-card__icon{ color:#a78bfa; filter:drop-shadow(0 0 8px rgba(167,139,250,.5)); }

/* ── Title ── */
.promo-card__title{
  font-family:var(--fdi),var(--fhe);
  font-size:28px;font-weight:800;line-height:1.15;
  color:var(--hi);margin:0;letter-spacing:-.01em;
  text-transform:uppercase;
}
.promo-card--featured .promo-card__title{
  font-size:42px;
}
.promo-card__title-accent{
  display:block;
}
.promo-card--battles .promo-card__title-accent{
  background:linear-gradient(135deg,#e15b5b,#f0a830);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.promo-card--cases .promo-card__title-accent{
  background:linear-gradient(135deg,#06b6d4,#f0a830);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.promo-card--leaderboard .promo-card__title-accent{
  background:linear-gradient(135deg,#a78bfa,var(--g));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Description ── */
.promo-card__desc{
  font-family:var(--fen);font-size:13px;line-height:1.6;
  color:var(--mute);margin:0;max-width:340px;
}
.promo-card--featured .promo-card__desc{
  font-size:15px;max-width:440px;
}

/* ── CTA Button ── */
.promo-card__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fen);font-size:13px;font-weight:700;
  padding:9px 20px;border-radius:var(--r);
  border:none;cursor:pointer;
  transition:all .22s ease;
  width:fit-content;
  margin-top:4px;
}
.promo-card__cta svg{ width:16px;height:16px;flex-shrink:0;transition:transform .22s; }
.promo-card__cta:hover svg{ transform:translateX(3px); }

.promo-card--featured .promo-card__cta{
  font-size:14px;padding:11px 26px;
}
.promo-card--battles .promo-card__cta{
  background:linear-gradient(135deg,#e15b5b,#c72b2b);
  color:#fff;
  box-shadow:0 4px 18px rgba(225,91,91,.3);
}
.promo-card--battles .promo-card__cta:hover{
  background:linear-gradient(135deg,#e15b5b,#e15b5b);
  box-shadow:0 6px 28px rgba(225,91,91,.5);
  transform:translateY(-1px);
}
.promo-card--cases .promo-card__cta{
  background:linear-gradient(135deg,#e08b29,#e08b29);
  color:#fff;
  box-shadow:0 4px 18px rgba(6,182,212,.25);
}
.promo-card--cases .promo-card__cta:hover{
  background:linear-gradient(135deg,#06b6d4,#f0a830);
  box-shadow:0 6px 28px rgba(6,182,212,.4);
  transform:translateY(-1px);
}
.promo-card--leaderboard .promo-card__cta{
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  color:#fff;
  box-shadow:0 4px 18px rgba(167,139,250,.25);
}
.promo-card--leaderboard .promo-card__cta:hover{
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  box-shadow:0 6px 28px rgba(167,139,250,.4);
  transform:translateY(-1px);
}

/* ── Decorative elements ── */
.promo-card__deco{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
}

/* Battles: crossed swords */
.promo-deco-sword{
  position:absolute;
  opacity:.08;
  transition:opacity .3s;
}
.promo-card--battles:hover .promo-deco-sword{ opacity:.14; }
.promo-deco-sword--1{
  width:80px;height:110px;
  top:-20px;right:40px;
  color:#e15b5b;
  transform:rotate(-35deg);
  animation:swordFloat1 7s ease-in-out infinite;
}
.promo-deco-sword--2{
  width:60px;height:120px;
  top:10px;right:20px;
  color:#f0a830;
  transform:rotate(25deg);
  animation:swordFloat2 9s ease-in-out infinite;
}
@keyframes swordFloat1{
  0%,100%{ transform:rotate(-35deg) translateY(0); }
  50%{ transform:rotate(-35deg) translateY(-8px); }
}
@keyframes swordFloat2{
  0%,100%{ transform:rotate(25deg) translateY(0); }
  50%{ transform:rotate(25deg) translateY(6px); }
}

/* Cases: glowing orbs */
.promo-deco-orb{
  position:absolute;border-radius:50%;
}
.promo-deco-orb--1{
  width:120px;height:120px;
  top:-30px;right:-20px;
  background:radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
  animation:orbPulse 5s ease-in-out infinite;
}
.promo-deco-orb--2{
  width:70px;height:70px;
  top:30px;right:60px;
  background:radial-gradient(circle, rgba(240,168,48,.25) 0%, transparent 70%);
  animation:orbPulse 7s ease-in-out infinite reverse;
}
@keyframes orbPulse{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.3); opacity:.4; }
}

/* Leaderboard: rings */
.promo-deco-ring{
  position:absolute;border-radius:50%;border-style:solid;
}
.promo-deco-ring--1{
  width:100px;height:100px;
  top:-20px;right:-10px;
  border-width:1.5px;border-color:rgba(167,139,250,.2);
  animation:ringExpand 6s ease-out infinite;
}
.promo-deco-ring--2{
  width:60px;height:60px;
  top:10px;right:20px;
  border-width:1px;border-color:rgba(240,168,48,.25);
  animation:ringExpand 6s ease-out infinite 2s;
}
@keyframes ringExpand{
  0%{ transform:scale(.8);opacity:.6; }
  100%{ transform:scale(1.6);opacity:0; }
}

/* ── Dots ── */
.promo-slider-dots{
  display:none; /* hidden on desktop, shown on mobile */
  justify-content:center;gap:8px;
  margin-top:28px;
}
.promo-dot{
  width:24px;height:4px;border-radius:2px;border:none;
  background:var(--b2);cursor:pointer;padding:0;transition:all .25s;
}
.promo-dot--active{ width:32px;background:var(--g); }

/* ═══ MOBILE/TABLET RESPONSIVENESS ═══ */
@media(max-width:1200px){
  .promo-slider-track{
    grid-template-columns:1.5fr 1fr 1fr;
    gap:12px;
  }
  .promo-card--featured .promo-card__title{ font-size:34px; }
  .promo-card--featured .promo-card__content{ padding:28px 24px 24px; }
}
@media(max-width:860px){
  .promo-slider-section{ padding:20px 16px 14px; }
  .promo-slider-track{
    display:flex;
    gap:12px;
    overflow-x:visible;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
  }
  .promo-card{
    min-width:calc(100vw - 56px);
    min-height:260px;
  }
  .promo-card--featured{ min-height:280px; }
  .promo-card--featured .promo-card__title{ font-size:30px; }
  .promo-slider-dots{ display:flex; margin-top:28px; }
  .promo-card__title{ font-size:24px; }
  .promo-card__desc{ font-size:13px; }
}
@media(max-width:480px){
  .promo-card{ min-height:160px; }
  .promo-card--featured .promo-card__title{ font-size:26px; }
  .promo-card__content{ padding:20px 20px 20px; }
  .promo-card--featured .promo-card__content{ padding:20px; }
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE
═══════════════════════════════════════════════════ */
.hero-section{
  position:relative;padding:80px 40px 60px;overflow:hidden;
  min-height:500px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(27,27,27,.95) 100%);
}
.hero-bg-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(240,168,48,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,168,48,.022) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 100% 70% at center,black 60%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 70% at center,black 60%,transparent 100%);
}

.hero-content{position:relative;z-index:2;max-width:800px;text-align:center}
.hero-badge{
  display:inline-block;
  font-family:var(--fhe);font-size:12px;font-weight:600;
  color:var(--g);background:var(--g3);border:1px solid rgba(240,168,48,.2);
  border-radius:20px;padding:5px 18px;margin-bottom:22px;
}
.hero-title{font-family:var(--fhe);font-size:46px;font-weight:800;line-height:1.2;color:var(--hi);margin-bottom:18px}
.hero-highlight{background:linear-gradient(135deg,var(--g),var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-brand{color:var(--g);-webkit-text-fill-color:var(--g)}
.hero-desc{font-family:var(--fhe);font-size:15px;line-height:1.7;color:var(--mute);max-width:640px;margin:0 auto 30px}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-bottom:32px;flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fhe);font-size:14px;font-weight:700;padding:11px 26px;border-radius:var(--r);cursor:pointer;transition:all .2s;text-decoration:none;border:none}
.hero-btn-primary{background:var(--g);color:#08090f;box-shadow:0 4px 20px var(--glow)}
.hero-btn-primary:hover{background:var(--g2);box-shadow:0 6px 30px rgba(240,168,48,.4);transform:translateY(-1px)}
.hero-btn-secondary{background:transparent;color:var(--tx);border:1px solid var(--b2)}
.hero-btn-secondary:hover{border-color:var(--g);color:var(--g);background:var(--g3)}
.hero-quick-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hero-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--fen);font-size:15px;font-weight:500;color:var(--mute);background:var(--panel);border:1px solid var(--b1);border-radius:var(--r);padding:11px 22px;cursor:pointer;transition:all .2s}
.hero-chip:hover{border-color:var(--g);color:var(--g);background:var(--g3)}
.hero-chip-hot{border-color:rgba(240,168,48,.25);color:var(--g)}
.hero-chip-hot:hover{background:var(--g3)}
.hero-chip-icon{font-size:17px}

/* ═══════════════════════════════════════════════════
   FEATURE TILES
═══════════════════════════════════════════════════ */
.feature-tiles-section{
  padding:0 40px 14px;
  max-width:1200px;
  margin:0 auto;
  background:var(--bg);
}
.feature-tiles-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:10px;
  max-width:1380px;
  margin:0 auto;
}
/* Row 1: 4 wide tiles */
.ftile--market  { grid-column:1; grid-row:1; }
.ftile--database{ grid-column:2; grid-row:1; }
.ftile--deals   { grid-column:3; grid-row:1; }
.ftile--new     { grid-column:4; grid-row:1; }
/* Row 2 */
.ftile--cases    { grid-column:1; grid-row:2; }
.ftile--battles  { grid-column:2; grid-row:2; }
.ftile--portfolio{ grid-column:3; grid-row:2; }
.ftile-mini-group{
  grid-column:4; grid-row:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ── Base tile ── */
.ftile{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--b1);
  background:var(--panel);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  padding:0; text-align:start;
}
.ftile:hover{
  transform:translateY(-3px);
  border-color:rgba(240,168,48,.3);
  box-shadow:0 12px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(240,168,48,.08);
}
.ftile:active{ transform:translateY(-1px); }

/* bg glow */
.ftile__bg{ position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s; }
.ftile:hover .ftile__bg{ opacity:1; }
.ftile__glow{
  position:absolute;width:90px;height:90px;border-radius:50%;
  top:-20px;right:-10px;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
}
.ftile:hover .ftile__glow{ opacity:1; }

/* content */
.ftile__content{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
}
.ftile__content--tall{
  flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:20px;height:100%;gap:5px;
}
.ftile__content--mini{
  flex-direction:column;align-items:center;justify-content:center;
  padding:14px 8px;gap:6px;text-align:center;
}

/* icons */
.ftile__icon{ width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.85; }
.ftile__icon svg{ width:100%;height:100%; }
.ftile__icon--lg{ width:34px;height:34px; }
.ftile__icon--sm{ width:22px;height:22px; }

/* labels */
.ftile__label{
  font-family:var(--fen);font-size:13px;font-weight:700;
  color:var(--tx);transition:color .2s;white-space:nowrap;
}
.ftile:hover .ftile__label{ color:var(--hi); }
.ftile__sublabel{
  font-family:var(--fen);font-size:10px;font-weight:500;
  color:var(--mute);letter-spacing:.04em;text-transform:uppercase;
}
.ftile__arrow{
  font-size:12px;color:var(--dim);
  margin-inline-start:auto;
  transition:color .2s, transform .2s;
}
.ftile:hover .ftile__arrow{ color:var(--g);transform:translateX(-3px); }

/* tall tile deco art */
.ftile__tall-deco{
  position:absolute;top:0;right:0;width:100%;height:100%;
  pointer-events:none;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;
}
.ftile__tall-deco svg{ width:80px;height:80px;flex-shrink:0;margin-right:4px; }

/* tall sizing */
.ftile--tall{ min-height:120px;display:flex;flex-direction:column;justify-content:flex-end; }
.ftile--mini{ min-height:0; }
.ftile--mini .ftile__label{ font-size:11px;white-space:normal;text-align:center;line-height:1.3; }

/* ── per-tile colors ── */
.ftile--market .ftile__bg{ background:radial-gradient(circle at 80% 20%,rgba(240,168,48,.12),transparent 70%); }
.ftile--market .ftile__glow{ background:radial-gradient(circle,rgba(240,168,48,.3),transparent 70%); }
.ftile--market .ftile__icon{ color:var(--g); }

.ftile--database .ftile__bg{ background:radial-gradient(circle at 80% 20%,rgba(6,182,212,.1),transparent 70%); }
.ftile--database .ftile__glow{ background:radial-gradient(circle,rgba(6,182,212,.25),transparent 70%); }
.ftile--database .ftile__icon{ color:#06b6d4; }

.ftile--deals{ border-color:rgba(240,168,48,.25);background:linear-gradient(135deg,rgba(240,168,48,.08),var(--panel)); }
.ftile--deals .ftile__bg{ background:radial-gradient(circle at 80% 20%,rgba(240,168,48,.18),transparent 70%); }
.ftile--deals .ftile__glow{ background:radial-gradient(circle,rgba(240,168,48,.4),transparent 70%); }
.ftile--deals .ftile__icon{ color:var(--g);filter:drop-shadow(0 0 6px rgba(240,168,48,.5)); }
.ftile--deals .ftile__label{ color:var(--g); }

.ftile--new .ftile__bg{ background:radial-gradient(circle at 80% 20%,rgba(60,207,130,.1),transparent 70%); }
.ftile--new .ftile__glow{ background:radial-gradient(circle,rgba(60,207,130,.25),transparent 70%); }
.ftile--new .ftile__icon{ color:#3ccf82; }

.ftile--cases{ background:linear-gradient(160deg,#161616,#1b1b1b);border-color:rgba(6,182,212,.18); }
.ftile--cases .ftile__bg{ background:radial-gradient(ellipse at 80% 30%,rgba(6,182,212,.18),transparent 60%); }
.ftile--cases .ftile__glow{ background:radial-gradient(circle,rgba(6,182,212,.35),transparent 70%); }
.ftile--cases .ftile__icon{ color:#06b6d4;filter:drop-shadow(0 0 8px rgba(6,182,212,.5)); }
.ftile--cases .ftile__tall-deco svg{ color:#06b6d4; }
.ftile--cases .ftile__label{ font-size:15px;color:var(--hi); }
.ftile--cases:hover{ border-color:rgba(6,182,212,.4);box-shadow:0 12px 36px rgba(6,182,212,.15); }

.ftile--battles{ background:linear-gradient(160deg,#130a0a,#1b1b1b);border-color:rgba(225,91,91,.18); }
.ftile--battles .ftile__bg{ background:radial-gradient(ellipse at 80% 30%,rgba(225,91,91,.18),transparent 60%); }
.ftile--battles .ftile__glow{ background:radial-gradient(circle,rgba(225,91,91,.35),transparent 70%); }
.ftile--battles .ftile__icon{ color:#e15b5b;filter:drop-shadow(0 0 8px rgba(225,91,91,.5)); }
.ftile--battles .ftile__tall-deco svg{ color:#e15b5b; }
.ftile--battles .ftile__label{ font-size:15px;color:var(--hi); }
.ftile--battles:hover{ border-color:rgba(225,91,91,.4);box-shadow:0 12px 36px rgba(225,91,91,.15); }

.ftile--portfolio{ background:linear-gradient(160deg,#07100d,#0a1410);border-color:rgba(60,207,130,.15); }
.ftile--portfolio .ftile__bg{ background:radial-gradient(ellipse at 80% 30%,rgba(60,207,130,.15),transparent 60%); }
.ftile--portfolio .ftile__glow{ background:radial-gradient(circle,rgba(60,207,130,.3),transparent 70%); }
.ftile--portfolio .ftile__icon{ color:#3ccf82;filter:drop-shadow(0 0 8px rgba(60,207,130,.5)); }
.ftile--portfolio .ftile__tall-deco svg{ color:#3ccf82; }
.ftile--portfolio .ftile__label{ font-size:15px;color:var(--hi); }
.ftile--portfolio:hover{ border-color:rgba(60,207,130,.35);box-shadow:0 12px 36px rgba(60,207,130,.12); }

.ftile--roulette .ftile__bg{ background:radial-gradient(circle,rgba(167,139,250,.12),transparent 70%); }
.ftile--roulette .ftile__icon{ color:#a78bfa; }

.ftile--coinflip .ftile__bg{ background:radial-gradient(circle,rgba(240,168,48,.12),transparent 70%); }
.ftile--coinflip .ftile__icon{ color:var(--g); }

.ftile--plinko .ftile__bg{ background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%); }
.ftile--plinko .ftile__icon{ color:#06b6d4; }

.ftile--daily{ border-color:rgba(240,168,48,.2);background:linear-gradient(135deg,rgba(240,168,48,.06),var(--panel)); }
.ftile--daily .ftile__bg{ background:radial-gradient(circle,rgba(240,168,48,.15),transparent 70%); }
.ftile--daily .ftile__glow{ background:radial-gradient(circle,rgba(240,168,48,.3),transparent 70%); }
.ftile--daily .ftile__icon{ color:#f0a830;filter:drop-shadow(0 0 5px rgba(240,168,48,.4)); }
.ftile--daily .ftile__label{ color:#f0a830; }

/* ── responsive ── */
@media(max-width:860px){
  .feature-tiles-section{ padding:0 14px 20px; }
  .feature-tiles-grid{ grid-template-columns:1fr 1fr; }
  .ftile--market,.ftile--database,.ftile--deals,.ftile--new{ grid-column:auto;grid-row:auto; }
  .ftile--cases,.ftile--battles{ grid-column:auto;grid-row:auto; }
  .ftile--portfolio{ grid-column:1/3;grid-row:auto; }
  .ftile-mini-group{ grid-column:1/3;grid-row:auto;grid-template-columns:repeat(4,1fr); }
}
@media(max-width:520px){
  .feature-tiles-grid{ gap:8px; }
  .ftile--portfolio{ grid-column:1/3; }
  .ftile-mini-group{ grid-template-columns:1fr 1fr; }
  .ftile--tall{ min-height:90px; }
  .ftile__content--tall{ padding:14px; }
  .ftile__icon--lg{ width:26px;height:26px; }
  .ftile--cases .ftile__label,.ftile--battles .ftile__label,.ftile--portfolio .ftile__label{ font-size:13px; }
  .ftile__sublabel{ display:none; }
}

.home-section{padding:36px 40px;max-width:1300px;margin:0 auto}
.home-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.home-section-title{display:flex;align-items:center;gap:10px;font-family:var(--fhe);font-size:20px;font-weight:700;color:var(--hi)}
.section-icon{font-size:20px}
.section-badge-live{font-family:var(--fen);font-size:9px;font-weight:800;letter-spacing:2px;color:var(--green);background:rgba(60,207,130,.1);border:1px solid rgba(60,207,130,.25);border-radius:3px;padding:2px 8px;animation:blink 2s step-end infinite;text-transform:uppercase}
.home-section-actions{display:flex;gap:8px}
.section-refresh-btn,.section-more-btn{font-family:var(--fen);font-size:10px;font-weight:700;padding:5px 13px;border-radius:var(--r);cursor:pointer;transition:all .15s;border:1px solid var(--b2);background:transparent;color:var(--mute);text-transform:uppercase;letter-spacing:.5px}
.section-refresh-btn:hover,.section-more-btn:hover{border-color:var(--g);color:var(--g)}

.home-items-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.home-item-card{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r2);padding:14px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.home-item-card:hover{border-color:rgba(240,168,48,.3);background:var(--card);box-shadow:0 6px 24px rgba(0,0,0,.3);transform:translateY(-2px)}
.home-item-img{text-align:center;margin-bottom:10px;height:90px;display:flex;align-items:center;justify-content:center}
.home-item-img img{max-height:80px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(240,168,48,.1));transition:transform .3s}
.home-item-card:hover .home-item-img img{transform:scale(1.06)}
.home-item-name{font-family:var(--fen);font-size:12px;font-weight:600;color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.home-item-badges{display:flex;gap:4px;margin-bottom:7px;flex-wrap:wrap}
.home-item-badge{font-family:var(--fen);font-size:9px;padding:1px 6px;border-radius:3px;border:1px solid;font-weight:700}
.home-item-price-row{display:flex;justify-content:space-between;align-items:center}
.home-item-price{font-family:var(--fen);font-size:15px;font-weight:700;color:var(--hi)}
.home-item-discount{font-family:var(--fen);font-size:10px;font-weight:800;color:var(--green);background:rgba(60,207,130,.08);border:1px solid rgba(60,207,130,.2);border-radius:3px;padding:1px 7px}
.home-item-link{display:block;font-family:var(--fen);font-size:11px;color:var(--mute);text-decoration:none;margin-top:7px;transition:color .15s}
.home-item-link:hover{color:var(--g)}

.home-features-section{padding:54px 40px;background:linear-gradient(180deg,transparent,rgba(33,33,33,.6),transparent)}
.home-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1300px;margin:0 auto}
.feature-card{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r3);padding:24px 22px;transition:all .25s;position:relative;overflow:hidden}
.feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--g),transparent);opacity:0;transition:opacity .3s}
.feature-card:hover{border-color:rgba(240,168,48,.2);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.3)}
.feature-card:hover::before{opacity:1}
.feature-icon-wrap{width:44px;height:44px;background:var(--g3);border:1px solid rgba(240,168,48,.15);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feature-icon{font-size:22px}
.feature-title{font-family:var(--fhe);font-size:16px;font-weight:700;color:var(--hi);margin-bottom:7px}
.feature-desc{font-family:var(--fhe);font-size:13px;line-height:1.6;color:var(--mute);margin-bottom:12px}
.feature-tag{display:inline-block;font-family:var(--fen);font-size:9px;font-weight:800;letter-spacing:1px;color:var(--g);background:var(--g3);border:1px solid rgba(240,168,48,.15);border-radius:3px;padding:3px 10px;text-transform:uppercase}

.home-stats-section{padding:48px 40px;border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);background:var(--ink)}
.home-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b1);max-width:1000px;margin:0 auto;border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden}
.home-stat-card{background:var(--panel);padding:28px 20px;text-align:center}
.home-stat-number{font-family:var(--fen);font-size:32px;font-weight:800;color:var(--hi);margin-bottom:5px}
.home-stat-neon{color:var(--green)}
.home-stat-cyan{color:var(--cyan)}
.home-stat-label{font-family:var(--fhe);font-size:13px;color:var(--mute)}

.how-it-works-grid{display:flex;align-items:flex-start;gap:14px;justify-content:center;flex-wrap:wrap}
.how-step{flex:1;min-width:200px;max-width:280px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--r3);padding:22px;text-align:center}
.how-step-num{font-family:var(--fen);font-size:28px;font-weight:800;color:var(--g);opacity:.3;margin-bottom:10px}
.how-step-content h4{font-family:var(--fhe);font-size:15px;font-weight:700;color:var(--hi);margin-bottom:7px}
.how-step-content p{font-family:var(--fhe);font-size:12px;line-height:1.6;color:var(--mute)}
.how-step-arrow{font-size:20px;color:var(--dim);align-self:center;padding-top:20px}

.home-cta-section{padding:70px 40px;text-align:center;background:linear-gradient(180deg,transparent,rgba(240,168,48,.02),transparent)}
.home-cta-content{max-width:600px;margin:0 auto}
.home-cta-title{font-family:var(--fhe);font-size:32px;font-weight:800;color:var(--hi);margin-bottom:10px}
.home-cta-desc{font-family:var(--fhe);font-size:15px;color:var(--mute);margin-bottom:26px;line-height:1.6}
.home-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.home-footer{background:var(--ink);border-top:1px solid var(--b1);padding:44px 40px 22px}
.home-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr 1fr;gap:28px;max-width:1300px;margin:0 auto 28px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-about{font-family:var(--fen);font-size:12px;line-height:1.7;color:var(--mute);margin-bottom:14px}
.footer-heading{font-family:var(--fen);font-size:11px;font-weight:700;color:var(--hi);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.footer-link{display:block;font-family:var(--fen);font-size:12px;color:var(--mute);text-decoration:none;padding:3px 0;cursor:pointer;transition:color .15s}
.footer-link:hover{color:var(--g)}
.footer-18plus{border:1px solid var(--b1);border-radius:8px;padding:11px 13px;background:rgba(255,255,255,.025);margin-bottom:10px}
.footer-18plus-badge{font-family:var(--fen);font-size:15px;font-weight:800;color:var(--amber);display:block;margin-bottom:5px}
.footer-18plus p{font-family:var(--fen);font-size:11px;color:var(--mute);line-height:1.55;margin-bottom:4px}
.footer-18plus p:last-child{margin-bottom:0}
.footer-help-link{color:var(--g);text-decoration:underline}
.footer-help-link:hover{color:var(--g2)}
.footer-ftp{font-family:var(--fen);font-size:11px;color:var(--dim);line-height:1.55}
.footer-ftp-link{color:var(--g);text-decoration:underline}
.footer-ftp-link:hover{color:var(--g2)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid var(--b1);max-width:1300px;margin:0 auto;flex-wrap:wrap;gap:8px}
.footer-bottom span{font-family:var(--fen);font-size:11px;color:var(--dim)}

/* ═══════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════ */
.lb-timer{direction:ltr !important}
.podium-card{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r3);padding:24px 18px;text-align:center;transition:all .2s}
.podium-card.rank-1{border-color:rgba(240,168,48,.45);box-shadow:0 8px 32px rgba(240,168,48,.1)}
.podium-name{font-family:var(--fen);font-size:15px;font-weight:700;color:var(--hi);margin:8px 0 4px}
.podium-wager{font-family:var(--fen);font-size:13px;color:var(--g);font-weight:600}
.podium-prize{font-family:var(--fen);font-size:20px;font-weight:800;color:var(--hi)}
.skeleton{background:linear-gradient(90deg,var(--b1) 25%,var(--b2) 50%,var(--b1) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse-bar{0%,100%{opacity:.2;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}

/* ═══════════════════════════════════════════════════
   MOBILE  —  responsive all breakpoints
═══════════════════════════════════════════════════ */
.mobile-menu-btn{display:none}
.mobile-menu-overlay{display:none}
#mobileCoinsDisplay{display:none}
@media(min-width:769px){#mobileCoinsDisplay{display:none !important}}

@media(max-width:768px){
  body::after{display:none}

  /* hamburger */
  .mobile-menu-btn{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:44px;height:44px;
    background:transparent;border:1px solid var(--b2);
    cursor:pointer;padding:0;margin:0 10px;flex-shrink:0;order:5;border-radius:var(--r);
  }
  .mobile-menu-btn span{display:block;width:18px;height:1.5px;background:var(--tx);transition:all .3s;border-radius:1px}
  .mobile-menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .mobile-menu-btn.open span:nth-child(2){opacity:0}
  .mobile-menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

  .mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:900;display:none;align-items:flex-start;justify-content:flex-end}
  .mobile-menu-overlay.open{display:flex}
  .mobile-menu-drawer{width:280px;max-width:85vw;height:100%;background:var(--panel);border-left:1px solid var(--b1);display:flex;flex-direction:column;animation:slideInD .25s ease;overflow-y:auto}
  @keyframes slideInD{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .mobile-menu-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--b1)}
  .mobile-menu-close{margin-right:auto;background:transparent;border:1px solid var(--b2);color:var(--mute);font-size:14px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;border-radius:var(--r)}
  .mobile-menu-close:hover{border-color:var(--red);color:var(--red)}
  .mobile-menu-nav{display:flex;flex-direction:column;padding:8px 0;flex:1}
  .mobile-menu-item{display:flex;align-items:center;gap:12px;padding:13px 18px;background:transparent;border:none;border-bottom:1px solid var(--b1);color:var(--mute);font-family:var(--fen);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .15s;text-align:right;text-decoration:none}
  .mobile-menu-item:hover{color:var(--tx);background:rgba(255,255,255,.025)}
  .mobile-menu-item.active{color:var(--g);background:var(--g3);border-right:2px solid var(--g)}
  .mobile-menu-icon{font-size:16px;width:22px;text-align:center}
  .mobile-menu-footer{padding:14px 16px;border-top:1px solid var(--b1);margin-top:auto}
  .mobile-menu-auth{margin-bottom:8px}
  .mobile-menu-section-divider{padding:7px 18px 3px;font-family:var(--fen);font-size:9px;letter-spacing:2.5px;color:rgba(255,255,255,.15);text-transform:uppercase;border-top:1px solid var(--b1);margin-top:4px}

  /* header mobile */
  header{flex-wrap:nowrap;height:56px;padding:0;gap:0;overflow:visible !important}
  .logo-zone{padding:0 10px !important;border-left:none !important;flex:1 1 auto !important;flex-shrink:1 !important;min-width:0 !important;width:auto !important;max-width:none !important;gap:7px;order:0}
  .logo-mark{width:22px;height:22px}
  .logo-mark-inner{width:9px;height:9px}
  .logo-text{font-size:13px;letter-spacing:2px;white-space:nowrap}
  .logo-sub{font-size:8px}
  /* CSLOW mobile logo sizes */
  .logo-buck{height:42px !important;}
  .logo-txt{font-size:22px !important;letter-spacing:-1px !important;}
  .hdr-leaderboard-btn{display:none !important}
  .hdr-right,.nav-zone{display:none !important}
  .mobile-menu-btn{display:flex !important;order:10;margin:0 10px 0 0;flex-shrink:0}
  #mobileCoinsDisplay{display:none;order:9;align-items:center;font-family:var(--fen);font-size:12px;font-weight:700;color:var(--g2);background:var(--g3);border:1px solid rgba(240,168,48,.2);border-radius:20px;padding:5px 10px;margin-left:6px;flex-shrink:0;white-space:nowrap}
  .status-text{display:none}

  /* layout */
  .page-outer{grid-column:1;padding:12px}

  .metrics-grid{grid-template-columns:1fr 1fr}
  .metric-cell{padding:12px 10px}
  .metric-label{font-size:9px}
  .metric-val{font-size:16px}
  .deals-stats-row{grid-template-columns:repeat(3,1fr)}
  .ds-cell{padding:9px 8px}
  .ds-label{font-size:8px}
  .ds-val{font-size:13px}
  .data-table{font-size:12px}
  .data-table th{font-size:8px;padding:6px 6px}
  .data-table td{padding:8px 6px;font-size:12px}
  .td-name{font-size:12px;max-width:100px}
  .port-item{grid-template-columns:1fr;gap:8px;padding:12px}
  .pi-name{font-size:13px}
  .pi-meta{flex-wrap:wrap;gap:8px;font-size:11px}
  .pi-pl{font-size:17px;text-align:right}
  .pi-actions{justify-content:flex-start}
  .port-sold{grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .form-input{font-size:14px;padding:10px 12px}
  .profile-card{padding:16px 14px}
  .profile-avatar{width:52px;height:52px}
  .profile-username{font-size:14px}
  #profileMetrics{grid-template-columns:1fr 1fr !important}
  .admin-card{padding:14px 12px}
  .admin-card .metrics-grid{grid-template-columns:1fr 1fr 1fr !important}
  .modal-box{width:96vw;padding:20px 14px;max-height:92vh}
  .modal-title{font-size:11px}
  .modal-input{font-size:14px;padding:10px 12px}
  .modal-footer{flex-direction:column}
  .modal-footer .act-btn{width:100%;text-align:center}
  .profit-preview{flex-direction:column;gap:10px;padding:10px 14px}
  .pp-val{font-size:17px}
  .page-titlebar{flex-direction:column;align-items:flex-start;gap:10px}
  .page-title-text{font-size:10px}
  .discord-float{bottom:12px;left:12px;right:12px;max-width:none;padding:12px 14px}

  /* chat */
  #chatInput{font-size:16px !important}
  #chatPanel,#chatToggleTab{display:none !important;visibility:hidden !important;pointer-events:none !important;transform:translateX(200%) !important}
  #chatPanel.mobile-chat-open{display:flex !important;visibility:visible !important;pointer-events:auto !important;transform:none !important;position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;z-index:600 !important;flex-direction:column !important}

  /* battles */
  #battlesPage{padding-top:70px !important;overflow-x:hidden !important}
  #battlesPage > .page-titlebar{flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding-bottom:14px !important}
  #battlesPage > .page-titlebar > div{flex-wrap:wrap !important;gap:8px !important}
  #battlesPage > .page-titlebar > div > button{width:100% !important;text-align:center !important;box-sizing:border-box !important}
  .bhub-card{flex-wrap:wrap !important;padding:12px !important;gap:8px !important;min-height:auto !important}
  .bhub-divider{display:none !important}
  .bhub-players{order:1;flex-shrink:0 !important}
  .bhub-cost{order:2;margin-right:auto !important;text-align:right !important;min-width:auto !important}
  .bhub-cases{order:3;width:100% !important;flex:unset !important;padding-top:6px;border-top:1px solid var(--b1)}
  .bhub-cta{order:4;width:100% !important}
  .bhub-cta button{width:100% !important;text-align:center !important}
  .bhist-card{flex-wrap:wrap !important;padding:12px !important;gap:8px !important;min-height:auto !important}
  .bhist-divider{display:none !important}
  .bhist-players{order:1}
  .bhist-winner{order:2;margin-right:auto !important}
  .bhist-cost{order:3;min-width:auto !important}
  .bhist-cases{order:4;width:100% !important;flex:unset !important;padding-top:6px;border-top:1px solid var(--b1)}
  #battlesPage [id^="rl"]{height:90px !important;overflow:hidden !important}
  #battlesPage [id="bScores"]{grid-template-columns:repeat(2,1fr) !important}
  #battlesPage [id="bDots"]{flex-wrap:nowrap !important;overflow-x:auto !important;justify-content:flex-start !important;padding-bottom:4px !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #battlesPage [id="bDots"]::-webkit-scrollbar{display:none}
  #battlesPage [id="bHistory"] > div > div{grid-template-columns:repeat(2,1fr) !important}
  #battlesPage > div > div[style*="display:grid"][style*="gap:6px"][style*="margin-bottom:16px"]{grid-template-columns:repeat(2,1fr) !important}
  #battlesPage > div > div > div[style*="display:grid"][style*="gap:5px"]{grid-template-columns:repeat(2,1fr) !important}
  #battlesPage > div > div[style*="justify-content:space-between"][style*="padding:14px"]{flex-wrap:wrap !important;gap:10px !important}
  #battlesPage > div > div[style*="justify-content:space-between"][style*="padding:14px"] > div{flex-wrap:wrap !important;gap:8px !important}
  #battlesPage > div > div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:12px"]{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  #battlesPage > div > div[style*="flex-wrap:wrap"][style*="margin-bottom:14px"]{max-height:120px;overflow-y:auto}
  #battlesPage div[style*="display:flex"][style*="justify-content:space-between"][style*="padding:10px 0"]{flex-wrap:wrap !important;gap:10px !important}
  #battlesPage div[style*="min-height:140px"]{min-height:100px !important}
  #battlesPage div[style*="min-height:110px"]{min-height:80px !important}
  #battlesPage [id^="ac"]{padding:6px !important}
  #bCd #bCdNum{font-size:80px !important}
  #bWin #bWinC{padding:20px 14px !important;width:95% !important;max-width:100% !important}
  #bWin #bWinC > div[style*="font-size:54px"]{font-size:40px !important}
  #bWin #bWinC > div[style*="font-size:40px"]{font-size:28px !important}
  #bWin #bWinC > div[style*="font-size:36px"]{font-size:24px !important}
  #bWin #bWinC > div[style*="display:flex"][style*="justify-content:center"][style*="gap:7px"]{gap:5px !important}
  #bWin #bWinC > div[style*="display:flex"][style*="justify-content:center"][style*="gap:7px"] > div{min-width:65px !important;padding:7px 8px !important}
  #bWin #bWinC > div[style*="display:flex"][style*="gap:10px"][style*="margin-top:22px"]{flex-direction:column !important;gap:8px !important}
  #bWin #bWinC > div[style*="display:flex"][style*="gap:10px"][style*="margin-top:22px"] button{width:100% !important;box-sizing:border-box !important}

  .roulette-bet-cards{grid-template-columns:repeat(2,1fr)}
  .result-popup{padding:24px 20px}
  .result-popup-title{font-size:24px}
  .result-popup-amount{font-size:32px}
  #dailyBonusPage > div:first-child > div:last-child{flex-direction:column;gap:20px}
  .home-deals-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;gap:6px !important}
  #paymentBanner{padding:8px 12px}
  #paymentBanner > div{flex-direction:column;gap:8px}

  /* homepage mobile */
  .hero-section{padding:16px;min-height:auto}
  .hero-actions{gap:8px;margin-bottom:12px}
  .hero-btn{padding:10px 18px;font-size:13px}
  .home-section{padding:18px 14px}
  .home-section-title{font-size:17px}
  .home-features-section{padding:24px 14px}
  .home-features-grid{grid-template-columns:1fr;gap:8px}
  .feature-card{padding:16px 14px}
  .feature-title{font-size:14px}
  .feature-desc{font-size:12px}
  .home-stats-section{padding:24px 14px}
  .home-stats-grid{grid-template-columns:1fr 1fr}
  .home-stat-number{font-size:20px}
  .home-stat-card{padding:16px 10px}
  .how-it-works-grid{flex-direction:column;align-items:center}
  .how-step-arrow{display:none}
  .how-step{max-width:100%;width:100%}
  .home-cta-section{padding:36px 16px}
  .home-cta-title{font-size:20px}
  .home-footer{padding:24px 14px 14px}
  .home-footer-grid{grid-template-columns:1fr 1fr;gap:18px}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-18plus{margin-bottom:8px}
  .home-items-grid{grid-template-columns:1fr 1fr;gap:7px}

  /* battle modes wrap — mobile only */
  #battlesPage div[style*="flex-wrap:wrap"][style*="justify-content:center"] button{min-width:100px !important;flex:1 1 100px !important;}
}

@media(max-width:420px){
  .deals-stats-row{grid-template-columns:1fr 1fr}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .admin-card .metrics-grid{grid-template-columns:1fr !important}
  #profileMetrics{grid-template-columns:1fr !important}
  .ds-val{font-size:12px}
  .metric-val{font-size:14px}
  .page-outer{padding:8px}
  .hdr-cell{padding:0 6px}
  .cur-btn{padding:3px 5px;font-size:10px}
  .username-chip{font-size:11px;padding:3px 8px}
  #battlesPage{padding-top:60px !important}
  #battlesPage [id="bScores"]{grid-template-columns:1fr !important}
  #battlesPage [id="bHistory"] > div > div{grid-template-columns:1fr !important}
  .roulette-bet-cards{grid-template-columns:1fr 1fr}
  .home-stats-grid{grid-template-columns:1fr 1fr}
  .home-footer-grid{grid-template-columns:1fr}
  .home-items-grid{grid-template-columns:1fr 1fr;gap:5px}
}

/* ── Roulette bet panels — mobile responsive ── */
@media(max-width:768px){
  #rlBetPanels{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;}
  /* סדר: T=1 CT=2 / Hunt=3 Bait=4 */
  #rlBetPanels > div:nth-child(1){order:2;} /* CT */
  #rlBetPanels > div:nth-child(2){order:1;} /* T  */
  #rlBetPanels > div:nth-child(3){order:3;} /* Hunt */
  #rlBetPanels > div:nth-child(4){order:4;} /* Bait */
}

/* ═══════════════════════════════════════════════════
   LTR OVERRIDES  (English mode)
═══════════════════════════════════════════════════ */
body.lang-en .hdr-right{flex-direction:row-reverse}
body.lang-en .nav-links{flex-direction:row}
.lb-timer{direction:ltr !important}
body.lang-en .market-side{border-right:none;border-left:1px solid var(--b1)}
body.lang-en .form-label{text-align:left}
body.lang-en .mobile-menu-drawer{direction:ltr}
body.lang-en .side-nav-item{direction:ltr;text-align:left}
body.lang-en .podium-name{direction:ltr}
body.lang-en table{direction:ltr}
body.lang-en th,body.lang-en td{text-align:left}
body.lang-en .hist-right{text-align:right}
body.lang-en .balance-actions{flex-direction:row}
body.lang-en .hdr-right .hdr-cell:has(.cur-toggle){order:-1}
#chatInput{direction:auto !important}
#sh-chat-input{direction:auto !important}
.pay-address-text{direction:ltr !important;text-align:left !important}

/* ═══════════════════════════════════════════════════
   LEGACY  —  keep old variable names working
   (inline styles in JS files use these)
═══════════════════════════════════════════════════ */
/* --neon, --amber, --ghost etc. already aliased in :root */
.bracket::before,.bracket::after{border-color:var(--g)}

/* remove separators next to currency toggle and lang switcher */
.hdr-cell:has(.cur-toggle){border-left:none;border-right:none}
#userAuthArea,#guestAuthArea{border-left:none;border-right:none}


/* ═══════════════════════════════════════════════════
   SH (Slider Hero) v3  —  fully scoped, new classes only
═══════════════════════════════════════════════════ */

/* wrapper */
.sh-root{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:16px 40px 0;
  max-width:1200px;
  margin:0 auto;
  min-height:unset;
  position:relative;
}

/* ── FEATURED (42%) ── */
.sh-featured{
  height:200px;
  min-height:200px;
  flex:unset;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#161616;
  isolation:isolate;
  transition:border-color .5s ease, box-shadow .5s ease;
}
.sh-featured::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.5);
  pointer-events:none;z-index:25;
}

/* bg fills the whole card, JS sets background inline */
.sh-f-bg{
  position:absolute;inset:0;z-index:0;
  transition:background .55s ease, opacity .28s ease;
}

/* beams */
.sh-f-beam{
  position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.07) 40%,transparent 100%);
  animation:shBeam 8s ease-in-out infinite;
}
.sh-f-beam--1{ left:20%; width:1.5px; }
.sh-f-beam--2{ left:65%; width:1px; animation-delay:4s; opacity:.5; }
@keyframes shBeam{
  0%,100%{ opacity:.5; transform:scaleX(1); }
  45%{ opacity:.1; transform:scaleX(5); }
}

/* noise */
.sh-f-noise{
  position:absolute;inset:0;z-index:1;opacity:.055;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* deco art (JS injects SVG here) */
.sh-f-deco{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
}
.sh-f-deco svg{
  animation:shDecoFloat 10s ease-in-out infinite;
  filter:blur(.3px);
}
@keyframes shDecoFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  40%{ transform:translateY(-14px) rotate(2.5deg); }
  70%{ transform:translateY(-5px) rotate(-1deg); }
}

/* content body (JS injects here) */
.sh-f-body{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:10;
  padding:14px 22px 16px;
  background:linear-gradient(0deg,
    rgba(27,27,27,1) 0%,
    rgba(27,27,27,.95) 28%,
    rgba(27,27,27,.65) 60%,
    transparent 100%);
  display:flex;flex-direction:column;gap:6px;
  /* default: visible */
  opacity:1;
  transform:translateY(0);
  transition:opacity .32s ease, transform .32s cubic-bezier(.2,.8,.3,1);
}

/* exit: fade up */
.sh-f--exit .sh-f-body{
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .26s ease, transform .26s ease;
}
/* enter initial state: invisible, shifted down — no transition so it snaps instantly */
.sh-f--enter .sh-f-body{
  opacity:0;
  transform:translateY(18px);
  transition:none;
}
/* anim-in: slide up and fade in */
.sh-f--enter.sh-anim-in .sh-f-body{
  opacity:1;
  transform:translateY(0);
  transition:opacity .44s ease .04s, transform .44s cubic-bezier(.2,.8,.3,1) .04s;
}

/* deco crossfade */
.sh-f--exit .sh-f-deco{ opacity:0; transition:opacity .24s; }
.sh-f--enter .sh-f-deco{ opacity:0; transition:none; }
.sh-f--enter.sh-anim-in .sh-f-deco{ opacity:1; transition:opacity .44s ease .08s; }

/* category */
.sh-cat{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fen);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}
.sh-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:var(--mute);display:inline-block;
}
.sh-dot--live{
  background:#e15b5b;
  box-shadow:0 0 8px rgba(225,91,91,1);
  animation:shLive 1.6s ease-in-out infinite;
}
.sh-dot--cases{ background:#06b6d4; box-shadow:0 0 8px rgba(6,182,212,.9); }
.sh-dot--rank{  background:#a78bfa; box-shadow:0 0 8px rgba(167,139,250,.9); }
@keyframes shLive{
  0%,100%{ transform:scale(1); box-shadow:0 0 8px rgba(225,91,91,1); }
  50%{ transform:scale(1.7); box-shadow:0 0 16px rgba(225,91,91,.5); }
}

/* title */
.sh-title{
  font-family:var(--fdi),var(--fhe);
  font-size:30px;font-weight:900;line-height:1.05;
  color:var(--hi);margin:0;
  letter-spacing:-.03em;text-transform:uppercase;
  display:flex;flex-direction:column;
}
.sh-accent{
  font-style:normal;display:block;
}

/* desc */
.sh-desc{
  font-family:var(--fen);font-size:12px;line-height:1.45;
  color:rgba(122,133,153,.85);max-width:420px;margin:0;display:none;
}

/* CTA */
.sh-cta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fen);font-size:13px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  padding:7px 16px;border-radius:6px;border:none;cursor:pointer;font-size:12px;
  width:fit-content;margin-top:4px;color:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), filter .25s;
}
.sh-cta:hover{ transform:translateY(-2px); filter:brightness(1.15); }
.sh-cta:hover svg{ transform:translateX(4px); }
.sh-cta svg{ transition:transform .25s cubic-bezier(.2,.8,.3,1); }

/* ── SECONDARY STACK (58%) ── */
.sh-stack{
  height:200px;
  min-height:unset;
  flex:unset;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden;
}
/* second card offset removed — equal height */
.sh-sec--offset{
  margin-inline-start:0;
}

/* secondary card */
.sh-sec{
  flex:1;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, opacity .3s ease;
  /* border and bg set via CSS var from JS */
  border:1px solid var(--sec-border, rgba(255,255,255,.08));
}
.sh-sec:hover{ transform:translateY(-5px) scale(1.025); }
.sh-sec:active{ transform:translateY(-2px); }

.sh-sec::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.4);
  pointer-events:none;z-index:15;
}

.sh-sec-bg{
  position:absolute;inset:0;z-index:0;
  background:var(--sec-bg, var(--panel));
  transition:background .4s ease;
}

/* content */
.sh-sec-body{
  position:relative;z-index:10;
  padding:10px 14px 10px;
  background:linear-gradient(0deg, rgba(27,27,27,.97) 0%, rgba(27,27,27,.75) 55%, transparent 100%);
  display:flex;flex-direction:column;gap:6px;
}
.sh-sec-title{
  font-family:var(--fdi),var(--fhe);
  font-size:15px;font-weight:900;line-height:1.1;
  color:var(--hi);margin:0;letter-spacing:-.02em;text-transform:uppercase;
  display:flex;flex-direction:column;
}
.sh-sec-accent{ font-style:normal;display:block; }
.sh-sec-hint{
  font-family:var(--fen);font-size:12px;color:var(--dim);
  letter-spacing:.04em;margin-top:2px;
  transition:color .2s;
}
.sh-sec:hover .sh-sec-hint{ color:var(--g); }

/* ── Dots ── */
.sh-dots{
  position:absolute;
  bottom:20px;
  /* center within the featured card: featured = 65% of root, so center = 32.5% */
  left:32.5%;
  transform:translateX(-50%);
  display:flex;gap:7px;z-index:30;
  pointer-events:auto;
}
.sh-pip{
  width:20px;height:3px;border-radius:2px;border:none;padding:0;
  background:rgba(255,255,255,.16);cursor:pointer;
  transition:width .28s ease, background .28s ease;
}
.sh-pip--active{ width:34px;background:var(--g); }

/* ── RIGHT SLIDER ── */
.sh-rslider{
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:16px;
  background:transparent;
}
.sh-rtrack{
  position:relative;
  width:100%;
  height:100%;
}
.sh-rcard{
  position:absolute;
  top:5%;
  width:62%;
  height:90%;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  isolation:isolate;
  transition:left .5s cubic-bezier(.25,.8,.25,1),
             opacity .5s ease,
             border-color .4s ease;
}
/* prev: נראה ~22% משמאל → left = -(62% - 22%) = -40% */
.sh-rcard--prev{
  left:-40%;
  opacity:.55;
  z-index:1;
}
/* active: מרכזי → left = (100% - 62%) / 2 = 19% */
.sh-rcard--active{
  left:19%;
  opacity:1;
  border-color:rgba(255,255,255,.2);
  z-index:2;
}
/* next: נראה ~22% מימין → left = 100% - 22% = 78% */
.sh-rcard--next{
  left:78%;
  opacity:.55;
  z-index:1;
}
.sh-rcard-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  transition:filter .4s ease;
}
.sh-rcard--active .sh-rcard-bg{ filter:brightness(.65) saturate(1); }
.sh-rcard--prev .sh-rcard-bg,
.sh-rcard--next .sh-rcard-bg{ filter:brightness(.32) saturate(.55); }
.sh-rcard:hover.sh-rcard--active .sh-rcard-bg{ filter:brightness(.78) saturate(1.1); }
.sh-rcard-body{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  padding:14px 16px;
  background:linear-gradient(0deg,rgba(27,27,27,.97) 0%,rgba(27,27,27,.7) 55%,transparent 100%);
}
.sh-rcard-label{
  font-family:var(--fen);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:4px;
}
.sh-rcard-title{
  font-family:var(--fdi),var(--fhe);
  font-size:18px;font-weight:900;line-height:1.1;
  color:#fff;margin:0;letter-spacing:-.02em;text-transform:uppercase;
}
.sh-rcard-hint{
  font-family:var(--fen);font-size:11px;
  color:rgba(255,255,255,.35);margin-top:3px;letter-spacing:.04em;
}
.sh-rcard-icon{
  font-size:22px;margin-bottom:6px;display:block;
}
.sh-rdots{
  position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:20;pointer-events:auto;
}
.sh-rdot{
  width:16px;height:3px;border-radius:2px;border:none;padding:0;
  background:rgba(255,255,255,.2);cursor:pointer;
  transition:width .28s ease,background .28s ease;
}
.sh-rdot--active{ width:28px;background:rgba(255,255,255,.7); }

/* ── Responsive ── */
@media(max-width:960px){
  .sh-root{ grid-template-columns:1fr; padding:10px 20px 8px; gap:10px; }
  .sh-featured{ height:200px; min-height:200px; }
  .sh-stack{ height:120px; flex-direction:column; gap:8px; }
  .sh-sec--offset{ margin-inline-start:0; }
  .sh-f-body{ padding:22px 22px 20px; }
  .sh-title{ font-size:38px; }
  .sh-dots{ left:50%; bottom:14px; transform:translateX(-50%); }
}
@media(max-width:560px){
  .sh-title{ font-size:30px; }
  .sh-desc{ font-size:13px; }
  .sh-f-body{ padding:20px; }
  .sh-featured{ height:170px; min-height:170px; }
  .sh-stack{ height:100px; }
  .sh-sec-title{ font-size:17px; }
}


/* ═══════════════════════════════════════════════════
   LG (Lobby Grid) v3  —  fully scoped
═══════════════════════════════════════════════════ */

.lg-wrap{
  padding:0 40px 36px;
  max-width:1200px;
  margin:0 auto;
  background:var(--bg);
}

/* 12-col, 3-row grid */
.lg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:180px 140px 140px;
  gap:16px;
}

/* placement — 3 equal cols, 3 rows */
.lg-battles{   grid-column:1; grid-row:1; }
.lg-cases{     grid-column:2; grid-row:1; }
.lg-market{    grid-column:3; grid-row:1; }
.lg-portfolio{ grid-column:1; grid-row:2; }
.lg-roulette{  grid-column:2; grid-row:2; }
.lg-coinflip{  grid-column:3; grid-row:2; }
.lg-plinko{    grid-column:1; grid-row:3; }
.lg-daily{     grid-column:2; grid-row:3; }
.lg-profile{   grid-column:3; grid-row:3; }

/* ── base tile ── */
.lg-tile{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--b1);
  background:var(--panel); /* explicit fallback bg so tiles are never transparent */
  cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
  box-shadow:0 4px 20px rgba(0,0,0,.35); /* baseline depth */
  transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.lg-tile:hover{ transform:translateY(-5px) scale(1.016); }
.lg-tile:active{ transform:translateY(-1px) scale(1.005); }
/* inner edge highlight */
.lg-tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.35);
  pointer-events:none;z-index:20;
}

/* bg layer */
.lg-bg{
  position:absolute;inset:0;z-index:0;
  transition:opacity .35s;
}

/* noise on hero tiles */
.lg-noise{
  position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* light beam on battles */
.lg-beam{
  position:absolute;left:25%;top:0;bottom:0;width:1.5px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 50%,transparent 100%);
  animation:lgBeam 8s ease-in-out infinite;
}
@keyframes lgBeam{
  0%,100%{ opacity:.4; transform:scaleX(1); }
  50%{ opacity:.1; transform:scaleX(4); }
}

/* SVG art */
.lg-art{
  position:absolute;z-index:3;pointer-events:none;
  right:-20px;top:-20px;
  width:260px;height:220px;
  transition:opacity .35s, transform .4s;
}
.lg-art--cases{
  right:-10px;top:-10px;
  width:180px;height:200px;
}

/* Battles art */
.lg-battles .lg-art{
  color:#e15b5b;opacity:.10;
  animation:lgArtFloat 10s ease-in-out infinite;
}
.lg-battles:hover .lg-art{ opacity:.20; }

/* Cases art */
.lg-cases .lg-art{
  color:#06b6d4;opacity:.11;
  animation:lgArtFloat 13s ease-in-out infinite reverse;
}
.lg-cases:hover .lg-art{ opacity:.21; }

@keyframes lgArtFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  40%{ transform:translateY(-10px) rotate(2deg); }
  70%{ transform:translateY(-4px) rotate(-1deg); }
}

/* orbs on cases */
.lg-orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:2;
}
.lg-orb--1{
  width:140px;height:140px;top:-40px;right:-30px;
  background:radial-gradient(circle,rgba(6,182,212,.20) 0%,transparent 70%);
  animation:lgOrbPulse 6s ease-in-out infinite;
}
.lg-orb--2{
  width:65px;height:65px;top:35px;right:65px;
  background:radial-gradient(circle,rgba(240,168,48,.22) 0%,transparent 70%);
  animation:lgOrbPulse 8s ease-in-out infinite reverse;
}
@keyframes lgOrbPulse{
  0%,100%{ transform:scale(1); opacity:.6; }
  50%{ transform:scale(1.35); opacity:.3; }
}

/* live pulse on battles */
.lg-pulse{
  position:absolute;top:14px;left:14px;z-index:6;
  width:8px;height:8px;border-radius:50%;
  background:#e15b5b;
  box-shadow:0 0 10px rgba(225,91,91,1);
  animation:lgPulse 1.8s ease-in-out infinite;
}
@keyframes lgPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 10px rgba(225,91,91,1); }
  50%{ transform:scale(1.7); box-shadow:0 0 20px rgba(225,91,91,.5),0 0 34px rgba(225,91,91,.2); }
}

/* hover overlay */
.lg-hover{
  position:absolute;inset:0;z-index:4;
  background:rgba(255,255,255,0);
  transition:background .25s;pointer-events:none;
}
.lg-tile:hover .lg-hover{ background:rgba(255,255,255,.022); }

/* body */
.lg-body{
  position:relative;z-index:10;
  padding:14px 16px 13px;
  background:linear-gradient(0deg,rgba(27,27,27,.97) 0%,rgba(27,27,27,.72) 48%,transparent 100%);
  display:flex;flex-direction:column;gap:4px;
}
.lg-body--mid{
  padding:12px 16px 12px;
}
.lg-body--sm{
  padding:10px 14px 10px;
  background:linear-gradient(0deg,rgba(27,27,27,.94) 0%,rgba(27,27,27,.55) 70%,transparent 100%);
}

/* tag */
.lg-tag{
  display:inline-flex;
  font-family:var(--fen);font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  padding:2px 8px;border-radius:4px;width:fit-content;margin-bottom:3px;
}
.lg-tag--battles{
  color:#e15b5b;background:rgba(225,91,91,.12);border:1px solid rgba(225,91,91,.22);
}
.lg-tag--cases{
  color:#06b6d4;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);
}

/* icon */
.lg-icon{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;opacity:.85;
}
.lg-icon svg{ width:100%;height:100%; }
.lg-icon--lg{ width:38px;height:38px; }
.lg-icon--sm{ width:30px;height:30px; }

/* icon colors */
.lg-battles  .lg-icon{ color:#e15b5b; filter:drop-shadow(0 0 10px rgba(225,91,91,.6)); }
.lg-cases    .lg-icon{ color:#06b6d4; filter:drop-shadow(0 0 10px rgba(6,182,212,.6)); }
.lg-market   .lg-icon{ color:var(--g); }
.lg-portfolio .lg-icon{ color:#3ccf82; }
.lg-deals    .lg-icon{ color:var(--g); filter:drop-shadow(0 0 6px rgba(240,168,48,.55)); }
.lg-roulette .lg-icon{ color:#a78bfa; }
.lg-coinflip .lg-icon{ color:var(--g); }
.lg-plinko   .lg-icon{ color:#06b6d4; }
.lg-daily    .lg-icon{ color:#f0a830; filter:drop-shadow(0 0 5px rgba(240,168,48,.4)); }

/* name */
.lg-name{
  font-family:var(--fen);font-size:16px;font-weight:800;
  color:var(--hi);margin:0;letter-spacing:.01em;
  transition:color .2s;
}
.lg-battles .lg-name,
.lg-cases .lg-name{ font-size:17px; }
.lg-tile:hover .lg-name{ color:#fff; }

/* sub */
.lg-sub{
  font-family:var(--fen);font-size:12px;font-weight:500;
  color:var(--mute);letter-spacing:.04em;text-transform:uppercase;
}

/* arrow */
.lg-arrow{
  font-size:13px;color:var(--dim);margin-top:5px;display:block;
  transition:color .2s, transform .2s;
}
.lg-tile:hover .lg-arrow{ color:var(--g); transform:translateX(-2px); }

/* ── per-tile backgrounds ── */
.lg-battles .lg-bg{
  background:
    radial-gradient(ellipse 110% 60% at 72% 8%,rgba(225,91,91,.30) 0%,transparent 50%),
    radial-gradient(ellipse 70% 70% at 10% 92%,rgba(240,168,48,.16) 0%,transparent 55%),
    linear-gradient(160deg,#1c0808,#1b1b1b,#1b1b1b);
}
.lg-battles:hover .lg-bg{
  background:
    radial-gradient(ellipse 110% 60% at 72% 8%,rgba(225,91,91,.44) 0%,transparent 50%),
    radial-gradient(ellipse 70% 70% at 10% 92%,rgba(240,168,48,.24) 0%,transparent 55%),
    linear-gradient(160deg,#220909,#1b1b1b,#1b1b1b);
}

.lg-cases .lg-bg{
  background:
    radial-gradient(ellipse 95% 60% at 22% 10%,rgba(6,182,212,.26) 0%,transparent 52%),
    radial-gradient(ellipse 70% 70% at 90% 88%,rgba(240,168,48,.18) 0%,transparent 55%),
    linear-gradient(150deg,#161616,#1b1b1b,#1b1b1b);
}
.lg-cases:hover .lg-bg{
  background:
    radial-gradient(ellipse 95% 60% at 22% 10%,rgba(6,182,212,.38) 0%,transparent 52%),
    radial-gradient(ellipse 70% 70% at 90% 88%,rgba(240,168,48,.26) 0%,transparent 55%),
    linear-gradient(150deg,#161616,#1b1b1b,#1b1b1b);
}

.lg-market    .lg-bg{ background:radial-gradient(circle at 80% 20%,rgba(240,168,48,.16) 0%,transparent 60%), var(--panel); }
.lg-market:hover .lg-bg{ background:radial-gradient(circle at 80% 20%,rgba(240,168,48,.28) 0%,transparent 60%), var(--panel); }

.lg-portfolio .lg-bg{ background:radial-gradient(circle at 20% 80%,rgba(60,207,130,.13) 0%,transparent 60%), var(--panel); }
.lg-portfolio:hover .lg-bg{ background:radial-gradient(circle at 20% 80%,rgba(60,207,130,.24) 0%,transparent 60%), var(--panel); }

.lg-deals     .lg-bg{ background:radial-gradient(circle at 70% 30%,rgba(240,168,48,.18) 0%,transparent 60%), linear-gradient(135deg,rgba(240,168,48,.07),var(--panel)); }
.lg-deals:hover .lg-bg{ background:radial-gradient(circle at 70% 30%,rgba(240,168,48,.30) 0%,transparent 60%), linear-gradient(135deg,rgba(240,168,48,.12),var(--panel)); }

.lg-roulette  .lg-bg{ background:radial-gradient(circle at 55% 40%,rgba(167,139,250,.12) 0%,transparent 65%), var(--panel); }
.lg-roulette:hover .lg-bg{ background:radial-gradient(circle at 55% 40%,rgba(167,139,250,.22) 0%,transparent 65%), var(--panel); }

.lg-coinflip  .lg-bg{ background:radial-gradient(circle at 55% 40%,rgba(240,168,48,.12) 0%,transparent 65%), var(--panel); }
.lg-coinflip:hover .lg-bg{ background:radial-gradient(circle at 55% 40%,rgba(240,168,48,.22) 0%,transparent 65%), var(--panel); }

.lg-plinko    .lg-bg{ background:radial-gradient(circle at 50% 40%,rgba(6,182,212,.10) 0%,transparent 65%), var(--panel); }
.lg-plinko:hover .lg-bg{ background:radial-gradient(circle at 50% 40%,rgba(6,182,212,.20) 0%,transparent 65%), var(--panel); }

.lg-daily     .lg-bg{ background:radial-gradient(circle at 60% 35%,rgba(240,168,48,.14) 0%,transparent 65%), linear-gradient(135deg,rgba(240,168,48,.05),var(--panel)); }
.lg-daily:hover .lg-bg{ background:radial-gradient(circle at 60% 35%,rgba(240,168,48,.26) 0%,transparent 65%), linear-gradient(135deg,rgba(240,168,48,.09),var(--panel)); }

/* ── border accents ── */
.lg-battles{ border-color:rgba(225,91,91,.22); box-shadow:0 6px 28px rgba(0,0,0,.5), 0 0 40px rgba(225,91,91,.08); }
.lg-battles:hover{ border-color:rgba(225,91,91,.52); box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 70px rgba(225,91,91,.18); }
.lg-cases{   border-color:rgba(6,182,212,.18); box-shadow:0 4px 22px rgba(0,0,0,.4); }
.lg-cases:hover{ border-color:rgba(6,182,212,.46); box-shadow:0 18px 52px rgba(0,0,0,.55),0 0 55px rgba(6,182,212,.12); }
.lg-market:hover{    border-color:rgba(240,168,48,.32); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.lg-portfolio:hover{ border-color:rgba(60,207,130,.30);  box-shadow:0 10px 30px rgba(0,0,0,.4); }
.lg-deals{   border-color:rgba(240,168,48,.18); }
.lg-deals:hover{ border-color:rgba(240,168,48,.42); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.lg-daily{   border-color:rgba(240,168,48,.16); }
.lg-daily:hover{ border-color:rgba(240,168,48,.40); }

/* ── responsive ── */
@media(max-width:1200px){
  .lg-grid{ grid-template-rows:160px 120px 120px; }
}
@media(max-width:860px){
  .lg-wrap{ padding:0 20px 20px; }
  .lg-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    gap:8px;
  }
  .lg-battles{   grid-column:1/3; grid-row:1; min-height:150px; }
  .lg-cases{     grid-column:1/2; grid-row:2; min-height:120px; }
  .lg-market{    grid-column:2/3; grid-row:2; min-height:120px; }
  .lg-portfolio{ grid-column:1/2; grid-row:3; min-height:100px; }
  .lg-roulette{  grid-column:2/3; grid-row:3; min-height:100px; }
  .lg-coinflip{  grid-column:1/2; grid-row:4; min-height:100px; }
  .lg-plinko{    grid-column:2/3; grid-row:4; min-height:100px; }
  .lg-daily{     grid-column:1/2; grid-row:5; min-height:100px; }
  .lg-profile{   grid-column:2/3; grid-row:5; min-height:100px; }
}
@media(max-width:480px){
  .lg-battles .lg-name, .lg-cases .lg-name{ font-size:14px; }
  .lg-name{ font-size:13px; }
  .lg-sub{ font-size:10px; }
  .lg-tag{ font-size:8px; }
  .lg-icon--sm{ width:24px; height:24px; }
  .lg-body--sm{ padding:8px 10px 8px; }
  .lg-cases .lg-body--mid, .lg-portfolio .lg-body--mid,
  .lg-cases .lg-body, .lg-portfolio .lg-body{ font-size:11px; }
  .lg-cases .lg-name, .lg-portfolio .lg-name{ font-size:12px; }
  .lg-cases .lg-sub, .lg-portfolio .lg-sub{ font-size:9px; }
  .lg-cases .lg-icon, .lg-portfolio .lg-icon{ width:22px; height:22px; }
}


/* ═══════════════════════════════════════════════════
   CLASH.GG VISUAL PARITY — density & proportion patch
   Append-only override block. No logic touched.
═══════════════════════════════════════════════════ */

/* ── 1. HERO SLIDER — taller, denser, image backgrounds ── */
.sh-root {
  min-height: unset;
  padding: 16px 40px 0;
  gap: 16px;
}
.sh-featured {
  min-height: unset;
  border-radius: 16px;
}
.sh-sec {
  border-radius: 14px;
  min-height: 120px;
}

/* Use brand assets as subtle image overlays on each slide */
.sh-sec--battles .sh-sec-bg {
  background-image: url('/Media/Site-Brand/B-1.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(0.8);
}
.sh-sec--cases .sh-sec-bg {
  background-image: url('/Media/Site-Brand/C-1.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.28) saturate(0.7);
}
.sh-sec--leaderboard .sh-sec-bg {
  background-image: url('/Media/Site-Brand/TC-1.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.25) saturate(0.6);
}

/* Featured card: battles hero uses B-1.jpg */
.sh-featured {
  background-image: url('/Media/Site-Brand/B-1.jpg');
  background-size: cover;
  background-position: center top;
}
/* The JS-injected gradient overlay (sh-f-bg) already darkens it enough */

/* ── 2. LOBBY GRID — Clash.gg proportions ── */
.lg-wrap {
  padding: 14px 40px 28px;
}
.lg-grid {
  grid-template-rows: 180px 140px 140px;
  gap: 16px;
}
/* Hero tile backgrounds — brand images */
.lg-battles .lg-bg {
  background-image: url('/Media/Site-Brand/B-1.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  /* dark tinted overlay via pseudo — handled by existing gradient layers */
}
/* Override bg to blend image with existing gradient */
.lg-battles {
  background-image:
    radial-gradient(ellipse 110% 60% at 72% 8%, rgba(225,91,91,.52) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 10% 92%, rgba(240,168,48,.28) 0%, transparent 55%),
    linear-gradient(160deg, rgba(28,8,8,.73), rgba(16,10,28,.67), rgba(27,27,27,.75)),
    url('/Media/Site-Brand/B-1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-cases {
  background-image:
    radial-gradient(ellipse 95% 60% at 22% 10%, rgba(6,182,212,.38) 0%, transparent 52%),
    radial-gradient(ellipse 70% 70% at 90% 88%, rgba(240,168,48,.22) 0%, transparent 55%),
    linear-gradient(150deg, rgba(5,14,24,.75), rgba(8,15,30,.70), rgba(27,27,27,.77)),
    url('/Media/Site-Brand/CASE-1.jpg');
  background-size: cover;
  background-position: center;
}

/* When lg-bg is present, override with the combined layered approach */
.lg-battles .lg-bg,
.lg-battles:hover .lg-bg {
  background: none !important;
}
.lg-cases .lg-bg,
.lg-cases:hover .lg-bg {
  background: none !important;
}

/* Tier 2 tiles: market, portfolio, deals — card images */
.lg-market {
  background-image:
    radial-gradient(circle at 80% 20%, rgba(240,168,48,.22) 0%, transparent 60%),
    linear-gradient(160deg, rgba(20,16,8,.77), rgba(22,22,22,.73)),
    url('/Media/Site-Brand/W1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-market .lg-bg { background: none !important; }

.lg-portfolio {
  background-image:
    radial-gradient(circle at 20% 80%, rgba(60,207,130,.18) 0%, transparent 60%),
    linear-gradient(155deg, rgba(7,16,13,.78), rgba(10,20,16,.73)),
    url('/Media/Site-Brand/C-1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-portfolio .lg-bg { background: none !important; }

.lg-deals {
  background-image:
    radial-gradient(circle at 70% 30%, rgba(240,168,48,.26) 0%, transparent 60%),
    linear-gradient(135deg, rgba(240,168,48,.14), rgba(27,27,27,.92)),
    url('/Media/Site-Brand/TC-1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-deals .lg-bg { background: none !important; }

/* Tier 3: small game tiles */
.lg-roulette {
  background-image:
    radial-gradient(circle at 55% 40%, rgba(167,139,250,.18) 0%, transparent 65%),
    linear-gradient(145deg, rgba(13,10,20,.80), rgba(27,27,27,.77)),
    url('/Media/Site-Brand/R-1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-roulette .lg-bg { background: none !important; }

.lg-coinflip {
  background-image:
    radial-gradient(circle at 55% 40%, rgba(240,168,48,.16) 0%, transparent 65%),
    linear-gradient(145deg, rgba(16,14,8,.80), rgba(27,27,27,.77)),
    url('/Media/Site-Brand/S-1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-coinflip .lg-bg { background: none !important; }

.lg-plinko {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(6,182,212,.15) 0%, transparent 65%),
    linear-gradient(145deg, rgba(5,12,18,.80), rgba(27,27,27,.77)),
    url('/Media/Site-Brand/P-1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-plinko .lg-bg { background: none !important; }

.lg-daily {
  background-image:
    radial-gradient(circle at 60% 35%, rgba(240,168,48,.20) 0%, transparent 65%),
    linear-gradient(145deg, rgba(16,10,5,.95), rgba(27,27,27,.92)),
    url('/Media/Site-Brand/G1.jpg');
  background-size: cover;
  background-position: center;
}
.lg-daily .lg-bg { background: none !important; }

/* Tile body gradient — stronger bottom fade so text is always readable */
.lg-body {
  padding: 16px 18px 15px;
  background: linear-gradient(0deg, rgba(6,8,14,.99) 0%, rgba(6,8,14,.88) 40%, rgba(6,8,14,.35) 75%, transparent 100%);
}
.lg-body--mid {
  padding: 14px 18px 14px;
  background: linear-gradient(0deg, rgba(6,8,14,.98) 0%, rgba(6,8,14,.75) 55%, transparent 100%);
}
.lg-body--sm {
  padding: 11px 16px 11px;
  background: linear-gradient(0deg, rgba(6,8,14,.97) 0%, rgba(6,8,14,.65) 65%, transparent 100%);
}

/* Tile border — slightly more visible */
.lg-tile {
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
}
/* hover scale toned down to Clash-like 1.02 */
.lg-tile:hover {
  transform: translateY(-4px) scale(1.012);
}

/* ── 3. HOME DEALS SECTION — denser grid ── */
.home-items-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.home-item-card {
  padding: 12px;
  border-radius: 10px;
  background: var(--card);
  border-color: rgba(255,255,255,.07);
}
.home-item-card:hover {
  transform: translateY(-3px) scale(1.018);
  border-color: rgba(240,168,48,.35);
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 20px rgba(240,168,48,.06);
}
.home-item-img {
  height: 80px;
  margin-bottom: 8px;
}
.home-item-img img {
  max-height: 72px;
}
.home-item-name {
  font-size: 11px;
}
.home-item-price {
  font-size: 14px;
}

/* Section headers — tighter */
.home-section {
  padding: 28px 40px;
  max-width: 1300px;
}
.home-section-header {
  margin-bottom: 16px;
}
.home-section-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── 4. FEATURE CARDS — premium gradient + image feel ── */
.home-features-section {
  padding: 36px 40px;
  background: linear-gradient(180deg, transparent, rgba(22,22,22,.7), transparent);
}
.home-features-grid {
  gap: 12px;
}
.feature-card {
  padding: 22px 20px;
  background: var(--card);
  border-color: rgba(255,255,255,.08);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
/* subtle image texture on feature cards */
.feature-card:nth-child(1) { background-image: linear-gradient(135deg, rgba(6,182,212,.06), transparent 60%), var(--card-bg, var(--card)); }
.feature-card:nth-child(2) { background-image: linear-gradient(135deg, rgba(60,207,130,.06), transparent 60%), var(--card-bg, var(--card)); }
.feature-card:nth-child(3) { background-image: linear-gradient(135deg, rgba(240,168,48,.07), transparent 60%), var(--card-bg, var(--card)); }
.feature-card:nth-child(4) { background-image: linear-gradient(135deg, rgba(240,168,48,.06), transparent 60%), var(--card-bg, var(--card)); }
.feature-card:nth-child(5) { background-image: linear-gradient(135deg, rgba(167,139,250,.06), transparent 60%), var(--card-bg, var(--card)); }
.feature-card:nth-child(6) { background-image: linear-gradient(135deg, rgba(225,91,91,.06), transparent 60%), var(--card-bg, var(--card)); }

.feature-card:hover {
  transform: translateY(-4px) scale(1.014);
  border-color: rgba(240,168,48,.25);
  box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(240,168,48,.06);
}
.feature-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hi);
  margin-bottom: 6px;
}
.feature-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
}
.feature-icon-wrap {
  margin-bottom: 14px;
}
.feature-icon {
  font-size: 22px;
  line-height: 1;
}
.feature-tag {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--fen);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g);
  background: rgba(240,168,48,.08);
  border: 1px solid rgba(240,168,48,.2);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ── 5. STATS SECTION — bolder numbers ── */
.home-stats-section {
  padding: 28px 40px;
  background: linear-gradient(90deg, transparent, rgba(240,168,48,.03), transparent);
}
.home-stats-grid {
  gap: 12px;
  background: var(--b1);
  padding: 20px 24px;
  border-radius: 16px;
}
.home-stat-card {
  padding: 20px 16px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease;
}
.home-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(240,168,48,.2);
}
.home-stat-number {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.home-stat-label {
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--mute);
  text-transform: uppercase;
  font-weight: 600;
}

/* ── 6. HOW IT WORKS — tighter ── */
.how-it-works-grid {
  gap: 0;
}
.how-step {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 20px 22px;
  transition: border-color .2s, transform .2s;
}
.how-step:hover {
  border-color: rgba(240,168,48,.22);
  transform: translateY(-2px);
}
.how-step-num {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: rgba(240,168,48,.25);
  line-height: 1;
  margin-bottom: 10px;
}
.how-step-content h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--hi);
  margin-bottom: 6px;
}
.how-step-content p {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.55;
}

/* ── 7. CTA SECTION — more premium ── */
.home-cta-section {
  padding: 64px 40px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(240,168,48,.06) 0%, transparent 60%),
    linear-gradient(180deg, transparent, rgba(22,22,22,.5), transparent);
  position: relative;
  overflow: hidden;
}
.home-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(240,168,48,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,168,48,.018) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 70% at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 40%, transparent 100%);
  pointer-events: none;
}
.home-cta-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.home-cta-desc {
  font-size: 15px;
  color: var(--mute);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 28px;
}

/* ── 8. PROMO SLIDER — taller, image-backed ── */
.sh-root {
  min-height: unset;
}
.sh-featured {
  min-height: unset;
}
.sh-stack .sh-sec {
  min-height: 120px;
}

/* ── 9. HEADER — more Clash.gg: tighter, bolder ── */
.logo-text {
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
}

/* ── 10. RESPONSIVE — keep all existing breakpoints, only spacing ── */
@media (max-width: 1200px) {
  .lg-grid { grid-template-rows: 160px 120px 120px; }
  .home-items-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .sh-root { padding: 12px 20px 0; }
  .lg-wrap { padding: 0 16px 20px; }
  .home-section { padding: 20px 16px; }
  .home-features-section { padding: 24px 16px; }
  .home-stats-section { padding: 20px 16px; }
  .home-cta-section { padding: 44px 16px; }
  .home-items-grid { grid-template-columns: repeat(3, 1fr); }
  .home-cta-title { font-size: 26px; }
}
@media (max-width: 560px) {
  .home-items-grid { grid-template-columns: repeat(2, 1fr); }
  .home-stat-number { font-size: 24px; }
}

/* ── Section Divider ── */
.sh-section-divider {
  margin: 20px 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(240,168,48,0.15) 15%,
    rgba(240,168,48,0.5) 40%,
    rgba(240,168,48,0.6) 50%,
    rgba(240,168,48,0.5) 60%,
    rgba(240,168,48,0.15) 85%,
    transparent 100%
  );
  position: relative;
}
.sh-section-divider::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(240,168,48,0.25),
    transparent
  );
  filter: blur(3px);
}

/* ── HEADER COINS + DEPOSIT OVERRIDE (inline style override) ── */
#navCoins{
  font-family:'Inter',monospace!important;
  font-size:15px!important;color:var(--g2)!important;
  padding:5px 13px!important;
  border:1px solid rgba(240,168,48,.25)!important;
  background:linear-gradient(135deg,rgba(240,168,48,.10),rgba(240,168,48,.05))!important;
  border-radius:8px!important;
  box-shadow:0 1px 8px rgba(240,168,48,.1)!important;
}

/* Deposit link — inline style override */
a[href="/coins-deposit"],a[href="/wallet#deposit"]{
  font-family:'Inter',monospace!important;
  font-size:13px!important;font-weight:700!important;
  letter-spacing:.6px!important;
  color:#fff!important;
  padding:6px 14px!important;
  border:1px solid rgba(240,168,48,.5)!important;
  background:linear-gradient(135deg,rgba(240,168,48,.55),rgba(240,168,48,.35))!important;
  border-radius:8px!important;
  text-decoration:none!important;
  transition:all .18s!important;
  box-shadow:0 2px 10px rgba(240,168,48,.18)!important;
}
a[href="/coins-deposit"]:hover,a[href="/wallet#deposit"]:hover{
  background:linear-gradient(135deg,rgba(240,168,48,.75),rgba(240,168,48,.55))!important;
  border-color:rgba(240,168,48,.8)!important;
  box-shadow:0 3px 16px rgba(240,168,48,.28)!important;
  transform:translateY(-1px)!important;
}
a.nav-withdraw-btn{
  font-family:'Inter',monospace!important;
  font-size:13px!important;font-weight:700!important;
  letter-spacing:.6px!important;
  color:#fff!important;
  padding:6px 14px!important;
  border:1px solid rgba(60,207,130,.5)!important;
  background:linear-gradient(135deg,rgba(60,207,130,.45),rgba(60,207,130,.25))!important;
  border-radius:8px!important;
  text-decoration:none!important;
  transition:all .18s!important;
  box-shadow:0 2px 10px rgba(60,207,130,.15)!important;
}
a.nav-withdraw-btn:hover{
  background:linear-gradient(135deg,rgba(60,207,130,.65),rgba(60,207,130,.45))!important;
  border-color:rgba(60,207,130,.8)!important;
  box-shadow:0 3px 16px rgba(60,207,130,.25)!important;
  transform:translateY(-1px)!important;
}

/* ── Battles empty-state icon (SWORDS.png) ─────────────────────────── */
.battles-empty-icon-wrap{
  position:relative;
  width:160px;height:160px;
  display:flex;align-items:center;justify-content:center;
}
.battles-empty-icon-wrap::before{
  content:'';
  position:absolute;
  inset:-36px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,136,0.18) 0%,rgba(0,255,136,0.04) 60%,transparent 80%);
  filter:blur(8px);
  pointer-events:none;
}
.battles-empty-icon{
  width:144px;height:144px;
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 0 8px rgba(0,255,136,0.55))
    drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  transition:transform .22s ease, filter .22s ease;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
.battles-empty-icon-wrap:hover .battles-empty-icon{
  transform:scale(1.07);
  filter:
    drop-shadow(0 0 14px rgba(0,255,136,0.85))
    drop-shadow(0 0 28px rgba(0,255,136,0.35))
    drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}

/* ══════════════════════════════════════════════════════════════════
   NEW HOMEPAGE SECTIONS — nh-* namespace
   Premium dark CS2 gambling site style
══════════════════════════════════════════════════════════════════ */

/* ── Container wrapper for all new sections ── */
.nh-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  margin-top: 28px;
}

/* ── Section label (shared across all sections) ── */
.nh-slabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.nh-slabel-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nh-slabel-txt {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nh-slabel-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  color: #e15b5b;
  background: rgba(225,91,91,.14);
  border: 1px solid rgba(225,91,91,.26);
}
.nh-slabel-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.04);
}
.nh-slabel-act {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(240,168,48,.55);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s;
  padding: 0;
}
.nh-slabel-act:hover { color: #f0a830; }

/* ── Top Deals grid (reuses homeDealsGrid ID) ── */
.nh-deals-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media(max-width:1100px){ .nh-deals-grid { grid-template-columns: repeat(5,1fr); } }
@media(max-width:860px){  .nh-deals-grid { grid-template-columns: repeat(3,1fr); gap:8px; } }
@media(max-width:480px){  .nh-deals-grid { grid-template-columns: repeat(2,1fr); gap:6px; } }

/* ── Highlight cards ── */
.nh-hl-card {
  background: linear-gradient(135deg, #212121, #242429);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 210px 1fr 190px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.38);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s;
}
.nh-hl-card:last-child { margin-bottom: 0; }
.nh-hl-card:hover {
  border-color: rgba(240,168,48,.20);
  box-shadow: 0 8px 28px rgba(0,0,0,.52);
}
.nh-hl-l {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-right: 1px solid rgba(255,255,255,.04);
}
.nh-hl-type {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,168,48,.65);
}
.nh-hl-avs { display: flex; align-items: center; }
.nh-hl-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  margin-left: -5px;
  flex-shrink: 0;
  font-family: var(--font-en, Inter, sans-serif);
}
.nh-hl-av:first-child { margin-left: 0; }
.nh-hl-meta {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  color: rgba(154,163,181,.4);
  font-weight: 500;
}
.nh-hl-c {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nh-hl-item {
  width: 46px;
  height: 34px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nh-hl-more {
  font-size: 11px;
  color: rgba(154,163,181,.28);
  padding-left: 4px;
  font-weight: 600;
  font-family: var(--font-en, Inter, sans-serif);
}
.nh-hl-r {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  border-left: 1px solid rgba(255,255,255,.04);
}
.nh-hl-rounds {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  color: rgba(154,163,181,.4);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}
.nh-hl-cost {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.nh-hl-winner {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
}
.nh-hl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(240,168,48,.24);
  color: rgba(240,168,48,.7);
  background: rgba(240,168,48,.06);
  cursor: pointer;
  margin-top: 2px;
  transition: all .14s;
  font-family: var(--font-en, Inter, sans-serif);
}
.nh-hl-btn:hover {
  border-color: rgba(240,168,48,.46);
  background: rgba(240,168,48,.11);
  color: #f0a830;
}
@media(max-width:860px){
  .nh-hl-card { grid-template-columns: 1fr 1fr; }
  .nh-hl-c { display: none; }
}
@media(max-width:540px){
  .nh-hl-card { grid-template-columns: 1fr; }
  .nh-hl-r { align-items: flex-start; border-left: none; border-top: 1px solid rgba(255,255,255,.04); }
}

/* ── Payment Methods ── */
.nh-pay-title {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
  margin-bottom: 14px;
  text-align: center;
}
.nh-pay-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nh-pay-box {
  width: 70px;
  height: 44px;
  border-radius: 8px;
  background: #212121;
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
  flex-shrink: 0;
}
.nh-pay-box:hover {
  border-color: rgba(240,168,48,.26);
  box-shadow: 0 0 14px rgba(240,168,48,.06);
}
.nh-pay-lbl {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── Live Bets table ── */
.nh-bets-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 14px;
}
.nh-btab {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  color: rgba(154,163,181,.5);
  background: transparent;
  transition: all .14s;
}
.nh-btab:hover { color: rgba(255,255,255,.65); }
.nh-btab-a {
  color: #ffffff;
  background: #242429;
  border-color: rgba(255,255,255,.08);
}
.nh-bets-wrap {
  background: #212121;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.48);
}
.nh-bets-head {
  display: grid;
  grid-template-columns: 150px 1fr 110px 90px 120px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.018);
}
.nh-bh {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(154,163,181,.38);
}
.nh-brow {
  display: grid;
  grid-template-columns: 150px 1fr 110px 90px 120px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  align-items: center;
  cursor: pointer;
  transition: background .11s;
}
.nh-brow:last-child { border-bottom: none; }
.nh-brow:hover { background: rgba(255,255,255,.022); }
.nh-br-game { display: flex; align-items: center; gap: 8px; }
.nh-br-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nh-br-gtxt {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #b1bad3;
}
.nh-br-user { display: flex; align-items: center; gap: 7px; }
.nh-br-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: var(--font-en, Inter, sans-serif);
}
.nh-br-un {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: rgba(200,208,224,.65);
}
.nh-br-amt {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}
.nh-br-type {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
}
.nh-br-pay {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 700;
}
.nh-empty {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 13px;
  color: rgba(154,163,181,.4);
  text-align: center;
  padding: 28px;
}
@media(max-width:860px){
  .nh-bets-head { grid-template-columns: 120px 1fr 90px; }
  .nh-brow { grid-template-columns: 120px 1fr 90px; }
  .nh-bh:nth-child(4), .nh-bh:nth-child(5) { display: none; }
  .nh-br-type, .nh-br-pay { display: none; }
}
@media(max-width:480px){
  .nh-bets-head { grid-template-columns: 1fr 80px; }
  .nh-brow { grid-template-columns: 1fr 80px; }
  .nh-bh:nth-child(2), .nh-bh:nth-child(3) { display: none; }
  .nh-br-user, .nh-br-amt { display: none; }
}

/* ── Footer ── */
.nh-footer {
  background: #161616;
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: 32px;
}
.nh-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px 22px;
}
.nh-fg {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 26px;
}
.nh-fg-brand-col {}
.nh-fg-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}
.nh-fg-name {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
}
.nh-fg-desc {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 400;
  color: rgba(154,163,181,.38);
  line-height: 1.72;
  max-width: 220px;
  margin-bottom: 12px;
}
.nh-fg-18 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.nh-fg-18badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 3px 6px;
  border-radius: 4px;
  color: rgba(154,163,181,.5);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  margin-top: 1px;
}
.nh-fg-18 p {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 11px;
  color: rgba(154,163,181,.28);
  line-height: 1.6;
}
.nh-fg-legal {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  font-weight: 400;
  color: rgba(154,163,181,.22);
  line-height: 1.7;
}
.nh-fg-col-t {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin-bottom: 12px;
}
.nh-fg-link {
  display: block;
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: rgba(154,163,181,.42);
  margin-bottom: 7px;
  cursor: pointer;
  transition: color .13s;
  text-decoration: none;
}
.nh-fg-link:hover { color: rgba(240,168,48,.75); }
.nh-footer-bot {
  border-top: 1px solid rgba(255,255,255,.04);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nh-footer-bot span {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 11px;
  font-weight: 400;
  color: rgba(154,163,181,.22);
}
.nh-fb-badges { display: flex; gap: 8px; }
.nh-fb-badge {
  font-family: var(--font-en, Inter, sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  color: rgba(154,163,181,.32);
  border: 1px solid rgba(255,255,255,.06);
}
@media(max-width:860px){
  .nh-fg { grid-template-columns: 1fr 1fr; gap: 20px; }
  .nh-footer-bot { flex-direction: column; gap: 12px; text-align: center; }
}
@media(max-width:480px){
  .nh-fg { grid-template-columns: 1fr; gap: 16px; }
  .nh-section { padding: 0 16px; }
  .nh-footer-inner { padding: 24px 16px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   HP — NEW HOMEPAGE (hp-* namespace)
   Clean rebuild, no conflicts with old classes
══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.hp-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  max-width:1240px;
  margin:0 auto;
  padding:40px 40px 0;
}
.hp-card{
  height:207px;
  border-radius:14px;
  border:none;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s;
}
.hp-card:hover{ transform:translateY(-3px); }
.hp-card-left{
  background:linear-gradient(135deg,#212121,#242429);
  overflow:visible;
  border-radius:14px;
  background-clip:padding-box;
}
.hp-card-left:hover{
  border-color:rgba(240,168,48,.36);
  box-shadow:0 16px 44px rgba(0,0,0,.65),0 0 36px rgba(240,168,48,.08);
}
.hp-card-right{
  background:linear-gradient(135deg,#1b1b1b,#212121);
}
.hp-card-right:hover{
  border-color:rgba(99,130,255,.30);
  box-shadow:0 16px 44px rgba(0,0,0,.65),0 0 32px rgba(99,130,255,.07);
}
.hp-card-glow-l{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(270deg,rgba(255,170,50,.95) 0%,rgba(255,160,40,.65) 18%,rgba(255,150,35,.30) 38%,rgba(255,150,35,.08) 52%,transparent 65%);
  pointer-events:none;
  mix-blend-mode:screen;
  border-radius:14px;
}
.hp-card-glow-r{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 68% 72% at 24% 50%,rgba(99,130,255,.11) 0%,transparent 60%);
}
/* C4 bomb — sits inside the card, between the user info and the character */
.hp-c4-bomb{
  position:absolute;
  left:30%;
  top:-14px;
  width:175px;
  height:175px;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  z-index:3;
}
@media (max-width:720px){
  .hp-c4-bomb{ width:128px; height:128px; left:42%; top:-8px; }
}
.hp-card-fig-l{
  position:absolute;right:-8px;top:0;bottom:0;width:185px;
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none;
}
.hp-card-fig-l{
  position:absolute;right:-8px;top:0;bottom:0;width:185px;
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none;
  overflow:hidden;
}
.hp-card-fig-l::before{
  content:'';position:absolute;right:28px;top:50%;transform:translateY(-50%);
  width:148px;height:148px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,168,48,.22) 0%,rgba(240,168,48,.06) 42%,transparent 70%);
  filter:blur(13px);z-index:1;
}
.hp-card-fig-r{
  position:absolute;right:-8px;top:0;bottom:0;width:185px;
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none;
  overflow:hidden;
}
.hp-card-fig-r::before{
  content:'';position:absolute;right:28px;top:50%;transform:translateY(-50%);
  width:144px;height:144px;border-radius:50%;
  background:radial-gradient(circle,rgba(80,120,255,.18) 0%,rgba(80,120,255,.05) 42%,transparent 70%);
  filter:blur(13px);z-index:1;
}
.hp-card-body{
  position:absolute;top:50%;left:0;right:45%;
  transform:translateY(-50%);
  padding:14px 22px;
  z-index:20;
}
.hp-card-body-r{ z-index:5; }
.hp-stack-inner{
  position:absolute;inset:0;z-index:3;overflow:hidden;
}
.hp-card-name{
  font-family:Inter,sans-serif;
  font-size:20px;font-weight:800;color:#fff;
  letter-spacing:-.02em;line-height:1.1;margin-bottom:2px;
}
.hp-card-sub{
  font-family:Inter,sans-serif;
  font-size:11px;color:rgba(154,163,181,.5);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px;
}
.hp-xpbar{
  width:100%;
  background:rgba(255,255,255,.07);
  padding:3px;
  border-radius:8px;
  margin-bottom:10px;
  position:relative;
}
.hp-xpfill{
  height:8px;border-radius:6px;
  background:linear-gradient(90deg,rgb(153,97,40) 0%,rgb(255,161,66) 92.25%,rgb(255,180,104) 96.47%,rgb(255,199,142) 100%);
  box-shadow:0 0 7px rgba(240,168,48,.45);
  transition:width .6s ease;
}
.hp-eyebrow{
  display:inline-flex;align-items:center;gap:5px;
  font-family:Inter,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;margin-bottom:7px;
}
.hp-ey-gold{ color:#f0a830;background:rgba(240,168,48,.12);border:1px solid rgba(240,168,48,.22); }
.hp-ey-blue{ color:#f5b548;background:rgba(124,159,255,.10);border:1px solid rgba(124,159,255,.20); }
.hp-live-dot{
  width:5px;height:5px;border-radius:50%;
  background:#e15b5b;box-shadow:0 0 6px #e15b5b;flex-shrink:0;
  animation:hp-lp 1.7s ease-in-out infinite;
}
@keyframes hp-lp{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.6);box-shadow:0 0 10px rgba(225,91,91,.5)}
}
.hp-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:Inter,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 16px;border-radius:7px;border:none;cursor:pointer;
}
.hp-btn-gold{
  color:#1b1b1b;
  background:linear-gradient(135deg,#f0a830,#f5b548,#f0a830);
  box-shadow:0 3px 14px rgba(240,168,48,.38),0 1px 0 rgba(255,255,255,.14) inset;
  transition:transform .14s,box-shadow .14s;
}
.hp-btn-gold:hover{ transform:translateY(-1px);box-shadow:0 5px 20px rgba(240,168,48,.52); }
.hp-btn-blue{
  background:linear-gradient(135deg,#e08b29,#f0a830,#e08b29);
  box-shadow:0 3px 14px rgba(59,91,219,.42),0 1px 0 rgba(255,255,255,.10) inset;
  color:#fff;
}
.hp-slider-dots{
  position:absolute;bottom:14px;right:16px;
  display:flex;gap:5px;z-index:25;
}
.hp-sdot{ width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.16); }
.hp-sdot-a{ width:24px;background:rgba(240,168,48,.75); }
.hp-card-edge{
  position:absolute;inset:0;border-radius:14px;
  box-shadow:none;
  pointer-events:none;z-index:30;
}

/* ── DIVIDER ── */
.hp-divider{
  height:1px;
  max-width:1180px;margin:6px auto 0;
  background:transparent;
}

/* ── SECTION LABEL ── */
.hp-section-label{
  display:flex;align-items:center;gap:10px;
  max-width:1240px;margin:32px auto 16px;padding:0 24px;
  font-family:Inter,sans-serif;font-size:17px;font-weight:700;
  color:rgba(255,255,255,.88);letter-spacing:-.01em;
}
.hp-section-label svg{ flex-shrink:0; }
.hp-label-line{ flex:1;height:1px;background:rgba(255,255,255,.05); }
.hp-slabel{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:Inter,sans-serif;font-size:17px;font-weight:700;
  color:rgba(255,255,255,.88);letter-spacing:-.01em;
}
.hp-slabel svg{ flex-shrink:0; }
.hp-slabel-line{ flex:1;height:1px;background:rgba(255,255,255,.05); }
.hp-slabel-act{
  font-family:Inter,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  color:rgba(240,168,48,.55);background:transparent;border:none;
  cursor:pointer;white-space:nowrap;transition:color .14s;padding:0;
}
.hp-slabel-act:hover{ color:#f0a830; }

/* ── SECTION WRAPPER ── */
.hp-section{
  max-width:1240px;margin:36px auto 0;padding:0 40px;
}

/* ── GAMES ── */
.hp-games-wrap{
  max-width:1240px;margin:0 auto;padding:0 40px 0;
}
.hp-games-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:246px 202px;
  gap:16px;
}
.hp-gc{
  border-radius:12px;
  border:none;
  position:relative;overflow:hidden;cursor:pointer;
  isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 16px rgba(0,0,0,.45);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;
}
.hp-gc-lg{ /* row 1 — height set by grid */ }
.hp-gc-sm{ /* row 2-3 — height set by grid */ }

/* backgrounds — lighter warm tone matching the visible site backdrop */
.hp-gc-battles,
.hp-gc-cases,
.hp-gc-market,
.hp-gc-portfolio,
.hp-gc-roulette,
.hp-gc-coinflip,
.hp-gc-plinko,
.hp-gc-daily,
.hp-gc-profile{
  background:#2a2724;
}
/* bg image — uniform fade so corners don't look black */
.hp-gc::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0.22;border-radius:12px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, black 50%, rgba(0,0,0,0.85) 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, black 50%, rgba(0,0,0,0.85) 100%);
  transition:opacity .4s ease,transform .4s ease;
}
.hp-gc:hover::before{ opacity:0.42;transform:scale(1.10); }

/* Small tabs — same uniform fade */
.hp-gc-sm::before{
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, black 50%, rgba(0,0,0,0.85) 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, black 50%, rgba(0,0,0,0.85) 100%);
}

/* per-tab images — all desaturated to grayscale, brightness tuned individually
   so every tab lands in the same visual range (target: medium-dark uniform gray) */
.hp-gc-battles::before  { background-image:url('/Media/BATTLES1.jpg');         filter:grayscale(1) brightness(1.00) contrast(0.95); }
.hp-gc-cases::before    { background-image:url('/Media/CASEOPEN1.jpg');        filter:grayscale(1) brightness(1.35) contrast(0.95); }
.hp-gc-market::before   { background-image:url('/Media/MARKET1.jpg');          filter:grayscale(1) brightness(0.85) contrast(0.95); }
.hp-gc-portfolio::before{ background-image:url('/Media/PROTFO1.png');          filter:grayscale(1) brightness(1.00) contrast(0.95); }
.hp-gc-roulette::before { background-image:url('/Media/ROUL1.jpg');            filter:grayscale(1) brightness(1.05) contrast(0.95); }
.hp-gc-coinflip::before { background-image:url('/Media/COINFLIP1.jpg');        filter:grayscale(1) brightness(1.00) contrast(0.95); }
.hp-gc-plinko::before   { background-image:url('/Media/Site-Brand/P-1.jpg');   filter:grayscale(1) brightness(1.00) contrast(0.95); }
.hp-gc-daily::before    { background-image:url('/Media/DAILY1.png');           filter:grayscale(1) brightness(0.95) contrast(0.95); }
.hp-gc-profile::before  { background-image:url('/Media/PROFILE1.jpg');         filter:grayscale(1) brightness(1.00) contrast(0.95); }

/* ambient glow per card */
.hp-gc-amb{ position:absolute;inset:0;z-index:0; }
.hp-gc-battles .hp-gc-amb,
.hp-gc-cases .hp-gc-amb,
.hp-gc-market .hp-gc-amb,
.hp-gc-portfolio .hp-gc-amb,
.hp-gc-roulette .hp-gc-amb,
.hp-gc-coinflip .hp-gc-amb,
.hp-gc-plinko .hp-gc-amb,
.hp-gc-daily .hp-gc-amb,
.hp-gc-profile .hp-gc-amb{ background:none; }

/* unified vignette overlay — gentle, only the very corners get a hint of shadow */
.hp-gc-vig{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.10) 100%),
    linear-gradient(180deg, transparent 0%, transparent 80%, rgba(0,0,0,0.12) 100%);
  pointer-events:none;
}
.hp-gc-edge{ display:none; }

/* icon zone — perfectly centered */
.hp-gc-iz{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:38px;
}
.hp-gc-iz-sm{ padding-bottom:32px; }
.hp-ico{ display:flex;align-items:center;justify-content:center; }
.hp-ico-lg svg{ width:44px;height:44px; }
.hp-ico-sm svg{ width:36px;height:36px; }

/* icon colors */
.hp-gc-battles .hp-ico{ color:#e15b5b;filter:drop-shadow(0 0 13px rgba(225,91,91,.72)); }
.hp-gc-cases .hp-ico{   color:#06b6d4;filter:drop-shadow(0 0 13px rgba(6,182,212,.72)); }
.hp-gc-market .hp-ico{  color:#f0a830;filter:drop-shadow(0 0 11px rgba(240,168,48,.65)); }
.hp-gc-portfolio .hp-ico{ color:#3ccf82;filter:drop-shadow(0 0 10px rgba(60,207,130,.58)); }
.hp-gc-roulette .hp-ico{ color:#a78bfa;filter:drop-shadow(0 0 10px rgba(167,139,250,.58)); }
.hp-gc-coinflip .hp-ico{ color:#f0a830;filter:drop-shadow(0 0 10px rgba(240,168,48,.58)); }
.hp-gc-plinko .hp-ico{  color:#06b6d4;filter:drop-shadow(0 0 10px rgba(6,182,212,.52)); }
.hp-gc-daily .hp-ico{   color:#f0a830;filter:drop-shadow(0 0 10px rgba(240,168,48,.62)); }
.hp-gc-profile .hp-ico{ color:#f5b548;filter:drop-shadow(0 0 10px rgba(56,189,248,.52)); }

/* card footer */
.hp-gc-foot{
  position:absolute;bottom:0;left:0;right:0;z-index:8;
  padding:8px 14px 13px;
  background:linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.78) 50%,transparent 100%);
  text-align:center;
}
.hp-gc-title{
  font-family:Inter,sans-serif;font-size:15px;font-weight:700;
  color:#ffffff;letter-spacing:-.01em;line-height:1.2;
  text-align:center;
}
.hp-gbadge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:Inter,sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:2px 7px;border-radius:3px;line-height:1.4;
  position:absolute;top:10px;right:10px;z-index:9;margin-bottom:0;
}
.hp-b-live{ color:#e15b5b;background:rgba(225,91,91,.14);border:1px solid rgba(225,91,91,.26); }
.hp-b-hot{  color:#f0a830;background:rgba(240,168,48,.14);border:1px solid rgba(240,168,48,.26); }
.hp-b-cases{ color:#06b6d4;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.22); }
.hp-b-free{ color:#a78bfa;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.22); }
.hp-bdot{ width:5px;height:5px;border-radius:50%;background:#e15b5b;box-shadow:0 0 5px #e15b5b; }

/* clash.gg style label — top-left corner */
.hp-gc-clash-label{
  position:absolute;top:0;left:0;z-index:9;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(14,20,28,0.78);
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-bottom-right-radius:8px;
  padding:9px 15px;
  font-family:Inter,sans-serif;font-size:15px;font-weight:500;
  color:#9aa3b5;letter-spacing:.01em;line-height:1;
}
.hp-gc-clash-label svg{ color:#5d6577;flex-shrink:0;width:16px;height:16px; }
.hp-gc-sm .hp-gc-clash-label{ font-size:13px;padding:7px 12px;gap:6px; }
.hp-gc-sm .hp-gc-clash-label svg{ width:14px;height:14px; }

/* hover per card — uniform CSBattle style */
.hp-gc:hover{
  box-shadow:inset 0 0 45px 14px rgba(27,27,27,0.45),0 0 20px rgba(240,168,48,.18),0 8px 28px rgba(0,0,0,.5);
  transform:translateY(-3px);
}

/* ── HIGHLIGHTS (CSBATTLE-style) ─────────────────────────────────── */
.hp-hl-card{
  display:grid;
  grid-template-columns:290px 1fr 128px 160px;
  align-items:center;
  gap:0;
  padding:12px;
  margin-bottom:12px;
  background:linear-gradient(to bottom, rgba(42,42,48,.32), rgba(33,33,33,.55));
  border:1px solid rgba(74,74,74,.28);
  border-radius:12px;
  cursor:pointer;
  filter:brightness(.92);
  transition:filter .16s, border-color .16s;
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
}
.hp-hl-card:last-child{ margin-bottom:0; }
.hp-hl-card:hover{
  filter:brightness(1.1);
  border-color:rgba(122,133,153,.4);
}

/* LEFT ─ title + avatars */
.hp-hl-l{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  padding:0 12px;
}
.hp-hl-title{
  display:flex; align-items:center; gap:6px;
  font-family:Inter,sans-serif;
  font-size:12px; font-weight:500;
  color:rgba(255,255,255,.92);
  text-transform:capitalize;
  white-space:nowrap;
}
.hp-hl-mode{ color:rgba(255,255,255,.92); }
.hp-hl-sep{
  color:rgba(122,133,153,.55);
  font-size:18px; line-height:0;
  margin:0 2px;
}
.hp-hl-mod{
  color:#e15b5b;
  font-weight:500;
}
.hp-hl-mod-normal{
  color:rgba(154,163,181,.55);
}
.hp-hl-avs{
  display:flex; align-items:center; gap:6px;
}
.hp-hl-team{
  display:flex; align-items:center; gap:6px;
}
.hp-hl-av{
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(74,74,74,.42);
  overflow:hidden;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .16s;
  margin:0;
  border:none;
}
.hp-hl-av img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.hp-hl-av-empty{ background:rgba(74,74,74,.42); }
.hp-hl-av-empty::before{
  content:'👤';
  font-size:14px;
  filter:grayscale(1);
  opacity:.55;
}
.hp-hl-av-dim{ opacity:.3; }
.hp-hl-x{
  color:rgba(122,133,153,.55);
  flex-shrink:0;
}

/* CENTER ─ cases carousel */
.hp-hl-c{
  position:relative;
  align-self:stretch;
  padding:8px;
  background:rgba(22,22,22,.55);
  border-radius:10px;
  overflow:hidden;
  display:flex; align-items:center;
  margin:0 12px;
}
.hp-hl-carousel{
  display:flex; align-items:center;
  gap:16px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 4px;
  width:100%;
}
.hp-hl-carousel::-webkit-scrollbar{ display:none; }
.hp-hl-case{
  width:64px; height:64px;
  flex-shrink:0;
  opacity:.22;
  transition:opacity .16s;
  border-radius:4px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hp-hl-case:hover{ opacity:.9; }
.hp-hl-case img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.hp-hl-fade{
  position:absolute;
  right:8px; top:8px;
  width:80px; height:calc(100% - 16px);
  background:linear-gradient(to left, rgba(22,22,22,.95), transparent);
  pointer-events:none;
  border-radius:0 10px 10px 0;
  z-index:2;
}
.hp-hl-rbadge{
  position:absolute;
  top:10px; right:10px;
  background:rgba(74,74,74,.55);
  color:rgba(200,210,225,.85);
  font-family:Inter,sans-serif;
  font-size:11px; font-weight:500;
  padding:2px 8px;
  border-radius:6px;
  pointer-events:none;
  z-index:3;
}

/* COST column */
.hp-hl-cost{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  padding:0 8px;
  border:none;
}
.hp-hl-costpill{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px;
  background:rgba(22,22,22,.62);
  border-radius:8px;
  font-family:Inter,sans-serif;
  font-size:14px; font-weight:700;
  color:#fff;
  white-space:nowrap;
}
.hp-hl-costpill img{
  width:18px; height:18px;
  object-fit:contain;
  flex-shrink:0;
}
.hp-hl-costlbl{
  font-family:Inter,sans-serif;
  font-size:12px; font-weight:500;
  color:rgba(154,163,181,.55);
}

/* RIGHT ─ replay + unboxed */
.hp-hl-r{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  padding:0 8px 0 0;
  border:none;
}
.hp-hl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  width:100%;
  padding:7px 12px;
  background:rgba(85,95,115,.42);
  border:none;
  border-radius:8px;
  font-family:Inter,sans-serif;
  font-size:13px; font-weight:700;
  color:rgba(154,163,181,.75);
  cursor:pointer;
  margin:0;
  letter-spacing:normal;
  text-transform:none;
  transition:color .14s, background .14s;
}
.hp-hl-btn:hover{
  color:#fff;
  background:rgba(95,105,125,.55);
}
.hp-hl-btn svg{ flex-shrink:0; }
.hp-hl-unboxed{
  display:inline-flex; align-items:center; gap:4px;
  font-family:Inter,sans-serif;
  font-size:12px; font-weight:500;
  color:rgba(154,163,181,.65);
  white-space:nowrap;
}
.hp-hl-unboxed img{
  width:14px; height:14px;
  object-fit:contain;
  flex-shrink:0;
}
.hp-hl-unboxed-n{
  color:#fff;
  font-weight:700;
  font-size:13px;
}

/* Responsive */
@media(max-width:980px){
  .hp-hl-card{ grid-template-columns:1fr 1fr; gap:10px; }
  .hp-hl-c{ grid-column:1/-1; order:3; min-height:88px; margin:0; }
  .hp-hl-l{ order:1; align-items:flex-start; padding:0; }
  .hp-hl-cost{ order:2; align-items:flex-end; padding:0; }
  .hp-hl-r{ order:4; grid-column:1/-1; flex-direction:row; justify-content:space-between; padding:0; }
}
@media(max-width:540px){
  .hp-hl-card{ grid-template-columns:1fr; }
  .hp-hl-cost{ align-items:flex-start; }
}

/* ── PAYMENT ── */
@keyframes hp-pay-scroll{
  0%  { transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-16.6667%,0,0); }
}
.hp-pay-title{ font-family:Inter,sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.02em;margin-bottom:18px;text-align:center; }
.hp-pay-marquee{
  position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.hp-pay-track{
  display:flex;align-items:center;gap:14px;width:max-content;
  animation:hp-pay-scroll 28s linear infinite;
  will-change:transform;
}
.hp-pay-marquee:hover .hp-pay-track{ animation-play-state:paused; }
.hp-pay-box{
  position:relative;flex-shrink:0;
  width:96px;height:68px;border-radius:12px;
  background:linear-gradient(180deg,rgba(28,32,42,.95) 0%,rgba(16,18,24,.95) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
  opacity:1;transition:transform .18s ease,box-shadow .18s ease;
}
.hp-pay-box:hover{ transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08); }
.hp-pay-box .hp-pay-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:110px;height:110px;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:blur(28px) saturate(1.4);opacity:.85;z-index:1;
}
.hp-pay-box img{
  position:relative;z-index:2;
  width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* ── LIVE BETS (CSBattle-style, borderless) ── */
.hp-bets-tabs{
  position:relative;
  display:flex;align-self:center;
  margin:0 auto 18px;
  padding:4px;gap:0;
  background:#242429;
  border:1px solid rgba(255,255,255,.04);
  border-radius:10px;
  justify-content:center;
  width:fit-content;
}
.hp-btab{
  position:relative;z-index:2;
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;
  padding:8px 18px;min-width:86px;border-radius:7px;cursor:pointer;
  border:0;color:rgba(154,163,181,.55);background:transparent;
  transition:color .18s ease;
  white-space:nowrap;
}
.hp-btab:hover{ color:rgba(255,255,255,.78); }
.hp-btab-a{ color:#ffffff; }
.hp-btab-indicator{
  position:absolute;top:4px;bottom:4px;left:0;
  width:0;
  background:#3a3a3a;
  border-radius:7px;
  transition:transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1);
  z-index:1;pointer-events:none;
}

.hp-bets-head{
  display:grid;grid-template-columns:1.2fr 1.6fr 1fr .9fr 1fr;
  padding:0 20px 10px;
  column-gap:8px;
  background:transparent;border:0;
}
.hp-bh{ font-family:Inter,sans-serif;font-size:12px;font-weight:400;color:rgba(154,163,181,.55); }

.hp-bets-list{
  display:flex;flex-direction:column;
  position:relative;
  overflow:hidden;
}

.hp-brow{
  display:grid;grid-template-columns:1.2fr 1.6fr 1fr .9fr 1fr;
  padding:0 20px;height:48px;
  border-top:1px solid rgba(255,255,255,.04);
  background:transparent;
  align-items:center;cursor:pointer;
  transition:background .14s ease, opacity .25s ease;
  column-gap:8px;
  text-decoration:none;
  will-change:opacity;
}
.hp-brow:hover{ background:rgba(255,255,255,.02); }

/* Progressive opacity fade for bottom rows (mimics CSBattle) */
.hp-brow:nth-child(5){ opacity:.9; }
.hp-brow:nth-child(6){ opacity:.75; }
.hp-brow:nth-child(7){ opacity:.55; }
.hp-brow:nth-child(8){ opacity:.3; }
.hp-brow:nth-child(n+9){ opacity:.15; }

/* New-bet slide+fade-in animation */
@keyframes hpBetSlideIn{
  0%   { opacity:0; transform:translateY(-32px); max-height:0; }
  40%  { max-height:48px; }
  100% { opacity:1; transform:translateY(0); max-height:48px; }
}
.hp-brow.hp-brow-new{
  animation:hpBetSlideIn .42s cubic-bezier(.22,.61,.36,1) both;
}

.hp-br-game{ display:flex;align-items:center;gap:10px; }
.hp-br-gicon{ width:18px;height:18px;color:rgba(154,163,181,.55);flex-shrink:0; }
.hp-br-gicon svg{ width:100%;height:100%;display:block; }
.hp-br-gtxt{ font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:#ffffff; }

.hp-br-user{ display:flex;align-items:center;gap:8px;min-width:0; }
.hp-br-av{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:10px;font-weight:700;
  flex-shrink:0;overflow:hidden;
  background:#242429;color:#9aa3b5;
}
.hp-br-av img{ width:100%;height:100%;object-fit:cover;display:block; }
.hp-br-lvl{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 7px;border-radius:5px;
  font-family:Inter,sans-serif;font-size:11px;font-weight:600;line-height:1;
  flex-shrink:0;
}
.hp-br-un{
  font-family:Inter,sans-serif;font-size:13px;font-weight:500;
  color:#ffffff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

.hp-br-amt{ display:flex;align-items:center;gap:6px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:#ffffff; }
.hp-br-amt img{ width:16px;height:16px;flex-shrink:0; }

.hp-br-mult{ font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:rgba(154,163,181,.55); }
.hp-br-mult.hp-win{ color:#3ccf82; }

.hp-br-pay{ display:flex;align-items:center;gap:6px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:rgba(154,163,181,.55); }
.hp-br-pay img{ width:16px;height:16px;flex-shrink:0; }
.hp-br-pay.hp-win{ color:#ffffff; }

.hp-loading{ display:flex;justify-content:center;padding:24px; }
.hp-empty{ font-family:Inter,sans-serif;font-size:13px;color:rgba(154,163,181,.4);text-align:center;padding:24px; }

/* ── FOOTER ── */
.hp-footer{ background:#161616;border-top:1px solid rgba(255,255,255,.05);margin-top:32px; }
.hp-footer-inner{ max-width:1180px;margin:0 auto;padding:36px 24px 22px; }
.hp-fg{ display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:32px;margin-bottom:26px; }
.hp-fg-brand{ display:flex;align-items:center;gap:9px;margin-bottom:11px; }
.hp-fg-name{ font-family:Inter,sans-serif;font-size:12px;font-weight:800;color:#ffffff;letter-spacing:2px; }
.hp-fg-desc{ font-family:Inter,sans-serif;font-size:12px;color:rgba(154,163,181,.38);line-height:1.72;max-width:220px;margin-bottom:12px; }
.hp-fg-18{ display:flex;align-items:flex-start;gap:8px;margin-bottom:10px; }
.hp-fg-18badge{ font-family:Inter,sans-serif;font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 6px;border-radius:4px;color:rgba(154,163,181,.5);border:1px solid rgba(255,255,255,.08);flex-shrink:0;margin-top:1px; }
.hp-fg-18 p{ font-family:Inter,sans-serif;font-size:11px;color:rgba(154,163,181,.28);line-height:1.6; }
.hp-fg-legal{ font-family:Inter,sans-serif;font-size:10px;color:rgba(154,163,181,.22);line-height:1.7; }
.hp-fg-col-t{ font-family:Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:12px; }
.hp-fg-link{ display:block;font-family:Inter,sans-serif;font-size:12px;font-weight:500;color:rgba(154,163,181,.42);margin-bottom:7px;cursor:pointer;transition:color .13s;text-decoration:none; }
.hp-fg-link:hover{ color:rgba(240,168,48,.75); }
.hp-footer-bot{ border-top:1px solid rgba(255,255,255,.04);padding-top:18px;display:flex;align-items:center;justify-content:space-between; }
.hp-footer-bot span{ font-family:Inter,sans-serif;font-size:11px;color:rgba(154,163,181,.22); }
.hp-fb-badges{ display:flex;gap:8px; }
.hp-fb-badge{ font-family:Inter,sans-serif;font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:rgba(154,163,181,.32);border:1px solid rgba(255,255,255,.06); }

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .hp-hero{ grid-template-columns:1fr;gap:10px;padding:12px 16px 0; }
  .hp-card{ height:200px; }
  .hp-card-right{ height:120px; }
  .hp-games-grid{ grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:8px; }
  .hp-gc-battles,.hp-gc-cases,.hp-gc-market{ grid-column:span 1;min-height:130px; }
  .hp-gc-portfolio,.hp-gc-roulette,.hp-gc-coinflip,.hp-gc-plinko,.hp-gc-daily,.hp-gc-profile{ grid-column:span 1;min-height:90px; }
  .hp-fg{ grid-template-columns:1fr 1fr;gap:20px; }
  .hp-footer-bot{ flex-direction:column;gap:12px;text-align:center; }
  .hp-bets-head,.hp-brow{ grid-template-columns:1fr 1.2fr .9fr; }
  .hp-bh:nth-child(3),.hp-bh:nth-child(4){ display:none; }
  .hp-br-amt,.hp-br-mult{ display:none; }
  .hp-section,.hp-games-wrap,.hp-section-label,.hp-divider{ padding-left:16px;padding-right:16px; }
}
@media(max-width:480px){
  .hp-games-grid{ grid-template-columns:1fr 1fr; }
  .hp-fg{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════
   PROFILE PAGE — CSGOBIG 1:1 redesign
═══════════════════════════════════════════════════ */
.csb-pf-outer{
  max-width:1200px;margin:0 auto;padding:16px 18px 48px;
  font-family:'Inter','Segoe UI',sans-serif;
}

/* ── Hero card ── */
.csb-pf-hero{
  background:#242429;border:1px solid #2a2a30;border-radius:10px;
  padding:22px 26px;margin-bottom:22px;
}
.csb-pf-hero-top{display:flex;align-items:center;gap:20px;}
.csb-pf-avatar{
  position:relative;width:76px;height:76px;border-radius:50%;
  background:#212121;overflow:hidden;flex-shrink:0;cursor:pointer;
  border:2px solid #323238;
}
.csb-pf-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.csb-pf-avatar-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.5);
  opacity:0;transition:opacity .18s;border-radius:50%;
}
.csb-pf-avatar:hover .csb-pf-avatar-overlay{opacity:1;}
.csb-pf-hero-info{flex:1;min-width:0;}
.csb-pf-username{
  font-size:26px;font-weight:800;color:#fff;
  line-height:1.15;margin-bottom:6px;letter-spacing:-.01em;
}
.csb-pf-code{
  font-size:12px;font-weight:700;color:#9aa3b5;letter-spacing:.02em;
  text-transform:uppercase;
}
.csb-pf-code span{color:#f0a830;}
.csb-pf-hero-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;
}
.csb-pf-joined{
  font-size:12px;font-weight:600;color:#9aa3b5;
}

/* XP bar */
.csb-pf-xp-wrap{margin-top:20px;}
.csb-pf-xp-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
}
.csb-pf-xp-level{
  font-size:13px;font-weight:700;color:#e2e8f0;letter-spacing:.01em;
}
.csb-pf-xp-pct{
  font-size:13px;font-weight:700;color:#9aa3b5;
}
.csb-pf-xp-track{
  height:9px;background:#161616;border-radius:20px;overflow:hidden;
  border:1px solid #2a2a30;
}
.csb-pf-xp-fill{
  height:100%;background:linear-gradient(90deg,#f0a830,#f5b548);
  border-radius:20px;transition:width .8s ease;
}

/* ── Tabs ── */
.csb-pf-tabs{
  display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;
}
.csb-pf-tab{
  display:inline-flex;align-items:center;gap:8px;
  background:#242429;border:1px solid #2a2a30;border-radius:8px;
  padding:10px 18px;
  font-family:inherit;font-size:13px;font-weight:700;color:#9aa3b5;
  cursor:pointer;transition:color .15s,background .15s,border-color .15s;
  letter-spacing:.01em;
}
.csb-pf-tab:hover:not(.active){color:#e2e8f0;border-color:#323238;}
.csb-pf-tab.active{
  background:#2a2a30;color:#fff;border-color:#323238;
}
.csb-pf-tab-dot{
  width:14px;height:14px;border-radius:50%;background:#3a3a3a;
  display:inline-block;flex-shrink:0;
}
.csb-pf-tab.active .csb-pf-tab-dot{background:#f0a830;}

/* ── Card grid ── */
.csb-pf-grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;
}
.csb-pf-card{
  background:#242429;border:1px solid #2a2a30;border-radius:10px;
  padding:20px 22px;
}
.csb-pf-card-wide{max-width:720px;}
.csb-pf-card-title{
  font-size:13px;font-weight:700;color:#e2e8f0;
  margin-bottom:16px;letter-spacing:.01em;
  display:flex;align-items:center;gap:8px;
}
.csb-pf-card-icon{
  color:#9aa3b5;font-size:14px;font-weight:400;
}

/* Stat rows in period cards (won, played, cases) */
.csb-pf-stat{
  display:flex;flex-direction:column;gap:2px;margin-bottom:14px;
}
.csb-pf-stat:last-child{margin-bottom:0;}
.csb-pf-stat-val{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:700;color:#fff;line-height:1;
}
.csb-pf-stat-val::before{
  content:'';width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#f0a830,#f5b548);flex-shrink:0;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,0.25);
}
.csb-pf-stat-lbl{
  font-size:12px;font-weight:600;color:#9aa3b5;
}

/* Per-game cards: 2-column stat layout (Total won / Total play) */
.csb-pf-games-grid .csb-pf-card{padding:18px 20px;}
.csb-pf-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.csb-pf-pair-stat{
  display:flex;flex-direction:column;gap:4px;
}
.csb-pf-pair-val{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:#fff;line-height:1;
}
.csb-pf-pair-val::before{
  content:'';width:13px;height:13px;border-radius:50%;
  background:linear-gradient(135deg,#f0a830,#f5b548);flex-shrink:0;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,0.25);
}

/* ── Mobile ── */
@media(max-width:900px){
  .csb-pf-grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .csb-pf-outer{padding:12px 12px 32px;}
  .csb-pf-grid-3{grid-template-columns:1fr;}
  .csb-pf-hero{padding:16px 16px;}
  .csb-pf-hero-top{gap:14px;}
  .csb-pf-avatar{width:60px;height:60px;}
  .csb-pf-username{font-size:20px;}
  .csb-pf-hero-right{display:none;}
  .csb-pf-tab{padding:8px 12px;font-size:12px;}
}

/* ═══════════════════════════════════════════════════════════════
   CSGOBIG-STYLE BATTLES PAGE (visual only, scoped to #battlesPage)
   ═══════════════════════════════════════════════════════════════ */

/* Nunito font for battles page only */
#battlesPage,
#battlesPage *{
  font-family:'Nunito',sans-serif;
}

/* ── Page header (title + create button) ───────────────────── */
#battlesPage .bnew-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0 18px;
}
#battlesPage .bnew-title{
  font-size:32px;font-weight:700;color:#fff;
  line-height:1;letter-spacing:0;
  display:flex;align-items:center;gap:10px;
  font-family:'Chakra Petch','Inter',sans-serif;
}
#battlesPage .bnew-title svg{flex-shrink:0}
/* Create Battle button — CSGOBIG style: amber/gold flat color */
#battlesPage .bnew-btn-create{
  position:relative;
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:15px;font-weight:700;
  letter-spacing:0.3px;
  padding:12px 26px;
  border:none;border-radius:10px;
  background:#f0a830;
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(215,169,92,0.25);
  transition:transform .12s ease,box-shadow .15s ease,filter .15s ease,background .15s ease;
  text-transform:none;
  overflow:hidden;
}
#battlesPage .bnew-btn-create:hover{
  background:#f0a830;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(215,169,92,0.4);
}
#battlesPage .bnew-btn-create:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(215,169,92,0.3);
}
#battlesPage .bnew-btn-create-txt{position:relative;z-index:1;}

/* ── Filter row (tabs left, sort right) ───────────────────── */
#battlesPage .bnew-filter{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:24px;
}
#battlesPage .bnew-tabs{display:flex;align-items:center;gap:6px}
/* CSGOBIG-style tabs — amber active state */
#battlesPage .bnew-tab{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:15px;font-weight:600;
  color:#868c94;
  cursor:pointer;
  padding:9px 18px;
  border-radius:8px;
  background:transparent;
  border:none;
  transition:color .15s ease,background .15s ease;
  letter-spacing:0.3px;
  white-space:nowrap;
}
#battlesPage .bnew-tab.is-active{
  color:#f0a830;
  background:rgba(215,169,92,0.12);
  box-shadow:inset 0 0 0 1px rgba(215,169,92,0.18);
}
#battlesPage .bnew-tab:hover:not(.is-active){
  color:#b1bad3;
  background:rgba(255,255,255,0.03);
}
#battlesPage .bnew-sort{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'Chakra Petch','Inter',sans-serif;
}
#battlesPage .bnew-sort-lbl{font-size:14px;font-weight:500;color:#868c94}
#battlesPage .bnew-sort-val{font-size:14px;font-weight:700;color:#fff;margin-left:2px}

/* ─── Battle card (listing row) - CSGOBIG exact ─── */
#battlesPage .bnew-card{
  display:grid;
  grid-template-columns:240px 1fr 150px 140px;
  align-items:center;
  gap:18px;
  background:#212121;
  border-radius:10px;
  padding:20px 24px;
  margin-bottom:12px;
  min-height:120px;
  cursor:pointer;
  transition:background .15s;
  border:none;
}
#battlesPage .bnew-card:hover{background:#242429}
#battlesPage .bnew-card.is-running{background:#212121}
#battlesPage .bnew-card.is-running:hover{background:#17241f}

/* LEFT: mode + players */
#battlesPage .bnew-left{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center}
#battlesPage .bnew-mode{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:700;line-height:1;
}
#battlesPage .bnew-mode svg{flex-shrink:0}
#battlesPage .bnew-mode.is-normal .bnew-mode-txt{color:#9aa3b5}
#battlesPage .bnew-mode.is-crazy .bnew-mode-txt{color:var(--neon)}
#battlesPage .bnew-mode.is-alliance .bnew-mode-txt{color:#f0a830}
#battlesPage .bnew-mode.is-jackpot .bnew-mode-txt{color:#f0a830}
#battlesPage .bnew-mode.is-shared .bnew-mode-txt{color:#f5b548}
#battlesPage .bnew-mode.is-jp .bnew-mode-txt{color:#ec4899}
#battlesPage .bnew-mode.is-jp-crazy .bnew-mode-txt{color:#ec4899}

#battlesPage .bnew-players{display:flex;align-items:center;justify-content:center;gap:4px}
#battlesPage .bnew-avatar{
  width:32px;height:32px;border-radius:50%;
  background-size:cover;background-position:center;
  background-color:#1b1b1b;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.08);
}
#battlesPage .bnew-avatar.is-empty{
  background:transparent;border:1px dashed rgba(255,255,255,0.12);
}
#battlesPage .bnew-avatar--fallback{
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  background:#2a2a30;
}
#battlesPage .bnew-vs{
  font-size:11px;font-weight:700;
  color:rgba(255,255,255,0.25);margin:0 3px;
}

/* CENTER: cases strip with INNER DARK BACKGROUND (the "tab in tab" look) */
#battlesPage .bnew-cases{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:16px 20px;
  overflow:hidden;min-width:0;
  background:rgba(0,0,0,0.25);
  border-radius:8px;
  min-height:88px;
}
#battlesPage .bnew-counter{
  position:absolute;top:8px;right:12px;
  font-size:13px;font-weight:700;color:#868c94;
  letter-spacing:0.3px;
  z-index:2;
}
#battlesPage .bnew-counter b{color:var(--bright);font-weight:700}
#battlesPage .bnew-case-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  isolation:isolate;
}
/* AURA glow מאחורי כל קייס - נוצר משכפול התמונה עם blur וסטורציה */
#battlesPage .bnew-case-wrap::before{
  content:"";
  position:absolute;
  inset:-10px;
  background-image:var(--bcimg);
  background-size:75% 75%;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(16px) saturate(1.7);
  opacity:0.6;
  z-index:0;
  pointer-events:none;
}
#battlesPage .bnew-case-wrap.is-active::after{
  content:"";position:absolute;inset:-4px;
  background:rgba(0,255,136,0.06);border-radius:8px;z-index:0;
  pointer-events:none;
}
#battlesPage .bnew-case-wrap.is-active::before{
  opacity:0.85;
  filter:blur(18px) saturate(1.9);
}
#battlesPage .bnew-case-img{
  width:56px;height:56px;object-fit:contain;
  position:relative;z-index:1;opacity:1;
  transition:transform .2s,opacity .2s;
}
#battlesPage .bnew-case-wrap.is-active .bnew-case-img{
  transform:scale(1.1);opacity:1;
  filter:drop-shadow(0 0 6px rgba(0,255,136,0.4));
}
#battlesPage .bnew-case-more{
  font-size:12px;font-weight:600;color:#868c94;
  flex-shrink:0;margin-left:4px;
}

/* PRICE column */
#battlesPage .bnew-price{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
#battlesPage .bnew-price-row{display:flex;align-items:center;gap:6px}
#battlesPage .bnew-price-coin{width:18px;height:18px;flex-shrink:0}
#battlesPage .bnew-price-val{
  font-size:16px;font-weight:700;color:var(--bright);line-height:1;
}
#battlesPage .bnew-price-lbl{
  font-size:12px;font-weight:500;color:#868c94;margin-top:1px;
}

/* BUTTON column */
#battlesPage .bnew-btn-wrap{display:flex;justify-content:flex-end;align-items:center}
#battlesPage .bnew-btn{
  font-size:14px;font-weight:700;padding:10px 20px;
  border:none;border-radius:8px;cursor:pointer;
  transition:filter .15s;min-width:120px;
  font-family:'Nunito',sans-serif;letter-spacing:0.2px;
}
#battlesPage .bnew-btn:hover{filter:brightness(1.1)}
#battlesPage .bnew-btn:disabled{cursor:not-allowed;opacity:0.5}
#battlesPage .bnew-btn:disabled:hover{filter:none}
#battlesPage .bnew-btn.is-join{background:var(--neon);color:#000}
#battlesPage .bnew-btn.is-watch{background:#2a2a30;color:var(--bright)}
#battlesPage .bnew-btn.is-watch-alliance{background:#242429;color:#f5b548}
#battlesPage .bnew-btn.is-waiting{background:#242429;color:#f0a830}
#battlesPage .bnew-btn.is-replay{background:#2a2a30;color:#868c94}

/* ── Mobile ───────────────────────────────────────────────── */
@media(max-width:900px){
  #battlesPage .bnew-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
  }
  #battlesPage .bnew-cases{padding:4px 0}
  #battlesPage .bnew-counter{right:0}
  #battlesPage .bnew-btn-wrap{justify-content:stretch}
  #battlesPage .bnew-btn{width:100%}
  #battlesPage .bnew-title{font-size:22px}
  #battlesPage .bnew-tabs{gap:10px}
  #battlesPage .bnew-tab{font-size:14px;padding:5px 10px}
}

/* ── CSBattle-style game card overlays (added on top of existing hp-gc) ── */
.csb-card{ overflow:hidden; }
.csb-stack{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;pointer-events:none;
}
.csb-icon{
  display:block;object-fit:contain;
  opacity:.7;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             opacity .3s cubic-bezier(.2,.8,.3,1),
             filter .3s cubic-bezier(.2,.8,.3,1);
}
.csb-icon-lg{ width:72px;height:72px; }
.csb-icon-sm{ width:64px;height:64px; }
.csb-label{
  font-family:Inter,sans-serif;font-weight:800;
  color:#ffffff;opacity:.7;
  text-transform:uppercase;letter-spacing:.06em;
  text-shadow:0 2px 4px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             opacity .3s cubic-bezier(.2,.8,.3,1);
  white-space:nowrap;
}
.csb-label-lg{ font-size:24px; }
.csb-label-sm{ font-size:16px; }

/* hover: brighten to full white + subtle lift (default fallback) */
.csb-card:hover .csb-icon{
  opacity:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) brightness(1.15);
}
.csb-card:hover .csb-label{
  opacity:1;
  transform:translateY(-6px);
}

/* ═══════════════════════════════════════════════════════════════════
   GAME CARD ICON HOVER ANIMATIONS — unique per tab (V2025.04.26)
   Each animation runs only while hovering. transform-origin:center
   keeps icons anchored. will-change for smooth GPU rendering.
═══════════════════════════════════════════════════════════════════ */
.csb-icon{
  transform-origin:center center;
  will-change:transform,filter,opacity;
}

/* ── BATTLES — clash/wobble (swords colliding) ── */
@keyframes csb-anim-battles{
  0%   { transform:translateY(-6px) scale(1.06) rotate(0deg); }
  20%  { transform:translateY(-8px) scale(1.10) rotate(-9deg); }
  40%  { transform:translateY(-7px) scale(1.08) rotate(8deg); }
  60%  { transform:translateY(-8px) scale(1.10) rotate(-6deg); }
  80%  { transform:translateY(-7px) scale(1.08) rotate(4deg); }
  100% { transform:translateY(-6px) scale(1.06) rotate(0deg); }
}
.hp-gc-battles:hover .csb-icon{
  animation:csb-anim-battles .9s cubic-bezier(.36,.07,.19,.97) infinite;
}

/* ── CASES — pop out (item bursting from case) ── */
@keyframes csb-anim-cases{
  0%   { transform:translateY(-6px) scale(1.06); }
  40%  { transform:translateY(-18px) scale(1.18); }
  70%  { transform:translateY(-4px) scale(1.04); }
  100% { transform:translateY(-6px) scale(1.06); }
}
.hp-gc-cases:hover .csb-icon{
  animation:csb-anim-cases 1.1s cubic-bezier(.34,1.56,.64,1) infinite;
}

/* ── MARKET — card shuffle/fan (cards spreading) ── */
@keyframes csb-anim-market{
  0%   { transform:translateY(-6px) scale(1.06) rotate(0deg); }
  25%  { transform:translateY(-9px) scale(1.09) rotate(-7deg); }
  50%  { transform:translateY(-7px) scale(1.07) rotate(0deg); }
  75%  { transform:translateY(-9px) scale(1.09) rotate(7deg); }
  100% { transform:translateY(-6px) scale(1.06) rotate(0deg); }
}
.hp-gc-market:hover .csb-icon{
  animation:csb-anim-market 1.4s ease-in-out infinite;
}

/* ── PORTFOLIO — gentle pulse (breathing house) ── */
@keyframes csb-anim-portfolio{
  0%   { transform:translateY(-6px) scale(1.06); }
  50%  { transform:translateY(-9px) scale(1.14); }
  100% { transform:translateY(-6px) scale(1.06); }
}
.hp-gc-portfolio:hover .csb-icon{
  animation:csb-anim-portfolio 1.2s ease-in-out infinite;
}

/* ── ROULETTE — full spin ── */
@keyframes csb-anim-roulette{
  0%   { transform:translateY(-6px) scale(1.06) rotate(0deg); }
  100% { transform:translateY(-6px) scale(1.06) rotate(360deg); }
}
.hp-gc-roulette:hover .csb-icon{
  animation:csb-anim-roulette 1.6s linear infinite;
}

/* ── COINFLIP — 3D flip on Y axis (true coin flip) ── */
@keyframes csb-anim-coinflip{
  0%   { transform:translateY(-6px) scale(1.06) rotateY(0deg); }
  100% { transform:translateY(-6px) scale(1.06) rotateY(360deg); }
}
.hp-gc-coinflip:hover .csb-icon{
  animation:csb-anim-coinflip 1.4s cubic-bezier(.4,0,.6,1) infinite;
}

/* ── PLINKO — bouncing ball drop ── */
@keyframes csb-anim-plinko{
  0%   { transform:translateY(-6px) scale(1.06); }
  20%  { transform:translateY(-14px) scale(1.10); }
  40%  { transform:translateY(2px) scale(1.04,.96); }
  60%  { transform:translateY(-10px) scale(1.08); }
  80%  { transform:translateY(0px) scale(1.05,.98); }
  100% { transform:translateY(-6px) scale(1.06); }
}
.hp-gc-plinko:hover .csb-icon{
  animation:csb-anim-plinko 1.1s cubic-bezier(.45,.05,.55,.95) infinite;
}

/* ── DAILY BONUS — gift wobble + pulse ── */
@keyframes csb-anim-daily{
  0%   { transform:translateY(-6px) scale(1.06) rotate(0deg); }
  15%  { transform:translateY(-8px) scale(1.10) rotate(-8deg); }
  30%  { transform:translateY(-9px) scale(1.12) rotate(8deg); }
  45%  { transform:translateY(-8px) scale(1.10) rotate(-6deg); }
  60%  { transform:translateY(-7px) scale(1.08) rotate(4deg); }
  100% { transform:translateY(-6px) scale(1.06) rotate(0deg); }
}
.hp-gc-daily:hover .csb-icon{
  animation:csb-anim-daily 1.3s ease-in-out infinite;
}

/* ── PROFILE — confident lift + slight scale (no rotation) ── */
@keyframes csb-anim-profile{
  0%   { transform:translateY(-6px) scale(1.06); }
  50%  { transform:translateY(-11px) scale(1.12); }
  100% { transform:translateY(-6px) scale(1.06); }
}
.hp-gc-profile:hover .csb-icon{
  animation:csb-anim-profile 1.4s ease-in-out infinite;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hp-gc-battles:hover .csb-icon,
  .hp-gc-cases:hover .csb-icon,
  .hp-gc-market:hover .csb-icon,
  .hp-gc-portfolio:hover .csb-icon,
  .hp-gc-roulette:hover .csb-icon,
  .hp-gc-coinflip:hover .csb-icon,
  .hp-gc-plinko:hover .csb-icon,
  .hp-gc-daily:hover .csb-icon,
  .hp-gc-profile:hover .csb-icon{
    animation:none;
    transform:translateY(-6px) scale(1.06);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER REDESIGN — Balance pill + Wallet btn + Profile dropdown
═══════════════════════════════════════════════════════════════════ */

/* Push logo further from the right edge (RTL) */
[dir="rtl"] .logo-zone{padding-right:48px;padding-left:48px;}
[dir="ltr"] .logo-zone{padding-left:48px;padding-right:48px;}

/* ── Balance pill (QRBET-style) ─────────────────────────────────── */
.hdr-balance-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#1b1b1b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:7px 12px;
  cursor:pointer;
  transition:all .15s ease;
  user-select:none;
}
.hdr-balance-pill:hover{
  border-color:rgba(240,168,48,.35);
  background:#212121;
}
.hdr-balance-pill > .hdr-balance-coin,
img.hdr-balance-coin{
  width:18px !important;height:18px !important;
  flex-shrink:0;display:block;
  max-width:18px !important;max-height:18px !important;
  object-fit:contain;
}
.hdr-balance-amt{
  font-family:'Inter',monospace;
  font-size:14px;font-weight:700;
  color:#f5b548;letter-spacing:.3px;
  white-space:nowrap;
}
.hdr-balance-chev{
  color:rgba(154,163,181,.7);
  flex-shrink:0;
  margin-right:2px;
  transition:transform .2s ease;
}
.hdr-balance-pill.open .hdr-balance-chev{
  transform:rotate(180deg);
}

/* ── Balance dropdown (coins / gems) ────────────────────────────── */
.hdr-balance-wrap{
  position:relative;
  display:inline-flex;align-items:center;
}
.hdr-balance-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:auto;
  min-width:170px;
  background:#1b1b1b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  padding:4px;
  z-index:9998;
  display:none;
}
[dir="rtl"] .hdr-balance-dropdown{left:auto;right:0;}
.hdr-balance-dropdown.open{display:block;}
.hdr-bd-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:7px;
  cursor:default;
  user-select:none;
  transition:background .12s ease;
}
.hdr-bd-item.active{
  background:rgba(255,255,255,.05);
}
.hdr-bd-item:hover{
  background:rgba(255,255,255,.04);
}
.hdr-bd-icon{
  width:18px !important;height:18px !important;
  max-width:18px !important;max-height:18px !important;
  flex-shrink:0;display:block;object-fit:contain;
}
.hdr-bd-amt{
  font-family:'Inter',monospace;
  font-size:13px;font-weight:700;
  color:#e2e8f0;letter-spacing:.3px;
  white-space:nowrap;
}
.hdr-bd-item.active .hdr-bd-amt{
  color:#f5b548;
}

/* ── Wallet button (orange) ─────────────────────────────────────── */
.hdr-wallet-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',monospace;
  font-size:13px;font-weight:700;
  letter-spacing:.6px;
  color:#1b1b1b;
  padding:8px 18px;
  border:none;border-radius:10px;
  background:linear-gradient(135deg,#f0a830,#e08b29);
  text-decoration:none;
  cursor:pointer;
  transition:all .15s ease;
  box-shadow:0 2px 10px rgba(240,168,48,.25);
  white-space:nowrap;
}
.hdr-wallet-btn:hover{
  background:linear-gradient(135deg,#f5b548,#f0a830);
  box-shadow:0 3px 14px rgba(240,168,48,.4);
  transform:translateY(-1px);
}

/* ── Vertical divider ──────────────────────────────────────────── */
.hdr-divider{
  width:1px;height:24px;
  background:rgba(255,255,255,.08);
  margin:0 4px;
  flex-shrink:0;
}

/* ── Profile button (avatar + name + chevron) ──────────────────── */
.hdr-profile-wrap{
  position:relative;
  display:inline-flex;align-items:center;
}
.hdr-profile-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  padding:5px 10px 5px 6px;
  cursor:pointer;
  transition:all .15s ease;
  font-family:inherit;
  max-width:200px;
}
.hdr-profile-btn:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
}
.hdr-profile-btn.open{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}
.hdr-profile-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#1f1f24,#2a2a30);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#9aa3b5;
  flex-shrink:0;overflow:hidden;
}
.hdr-profile-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hdr-profile-name{
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;
  color:#ffffff;
  letter-spacing:.2px;
  max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hdr-profile-chev{
  color:rgba(154,163,181,.7);
  flex-shrink:0;
  transition:transform .2s ease;
}
.hdr-profile-btn.open .hdr-profile-chev{
  transform:rotate(180deg);
}

/* ── Dropdown panel ─────────────────────────────────────────────── */
.hdr-profile-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  width:248px;
  background:#1b1b1b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  padding:0;
  z-index:9999;
  display:none;
  overflow:hidden;
}
/* Anchor under the profile button: start aligned to the button's end edge */
[dir="rtl"] .hdr-profile-dropdown{left:auto;right:0;}
[dir="ltr"] .hdr-profile-dropdown{left:auto;right:0;}
.hdr-profile-dropdown.open{display:block;}

/* Header section of dropdown */
.hdr-pd-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.hdr-pd-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#1f1f24,#2a2a30);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#9aa3b5;
  flex-shrink:0;overflow:hidden;
}
.hdr-pd-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hdr-pd-name{
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;
  color:#ffffff;
  letter-spacing:.2px;
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* XP bar inside dropdown */
.hdr-pd-xp{
  height:4px;
  background:rgba(255,255,255,.05);
  margin:0 16px 8px;
  border-radius:2px;overflow:hidden;
}
.hdr-pd-xp-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#f0a830,#f5b548);
  border-radius:2px;
  transition:width .5s ease;
}

/* Menu items list */
.hdr-pd-items{
  display:flex;flex-direction:column;
  padding:6px 8px;
}
.hdr-profile-dropdown a.hdr-pd-item,
.hdr-profile-dropdown .hdr-pd-item{
  display:flex !important;align-items:center;gap:12px;
  padding:9px 10px;
  border-radius:8px;
  color:#b1bad3 !important;
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:500;
  text-decoration:none !important;
  cursor:pointer;
  transition:all .12s ease;
  background:transparent;border:none;
  text-align:right;
  width:100%;
  letter-spacing:.2px;
}
[dir="ltr"] .hdr-profile-dropdown .hdr-pd-item{text-align:left;}
.hdr-profile-dropdown a.hdr-pd-item:hover,
.hdr-profile-dropdown .hdr-pd-item:hover{
  background:rgba(240,168,48,.1) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.hdr-profile-dropdown .hdr-pd-item:hover .hdr-pd-icon{
  color:#f0a830;
}
.hdr-profile-dropdown .hdr-pd-item.disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}
.hdr-pd-icon{
  color:#9aa3b5;
  flex-shrink:0;
  transition:color .12s ease;
}

/* Footer with logout */
.hdr-pd-footer{
  border-top:1px solid rgba(255,255,255,.05);
  padding:6px 8px;
}
.hdr-pd-logout{
  display:flex;align-items:center;gap:12px;
  padding:9px 10px;
  border-radius:8px;
  color:#e15b5b;
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;
  background:transparent;border:none;
  cursor:pointer;
  transition:all .12s ease;
  width:100%;
  text-align:right;
  letter-spacing:.2px;
}
[dir="ltr"] .hdr-pd-logout{text-align:left;}
.hdr-pd-logout:hover{
  background:rgba(225,91,91,.1);
  color:#e15b5b;
}
.hdr-pd-logout::before{
  content:"";
  display:inline-block;
  width:18px;height:18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
  background-repeat:no-repeat;background-position:center;
  flex-shrink:0;
}

/* Mobile: hide new desktop header elements (mobile uses its own menu) */
@media (max-width:880px){
  .hdr-balance-pill,
  .hdr-wallet-btn,
  .hdr-divider,
  .hdr-profile-wrap{display:none !important;}
}

/* ───────────────────────────────────────────────────────────
   NEW HEADER: Unified single container with 2 rows beside the logo
   Matches CSBattle architecture — logo spans both rows at 88px tall
   Top row:  ~34px  — quick links (Affiliates/Fairness/Profile/Settings)
   Main row: ~54px  — Games / Rewards / Leaderboard + user area
   ─────────────────────────────────────────────────────────── */

/* Logo spans the full header height (88px). Override the earlier logo-zone height rules */
header > .logo-zone{
  height:100%;
  align-items:center;
}

/* Body that holds the two rows, takes the rest of the width */
.hdr-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  height:100%;
}

/* Top row (quick links + reserved right slot) — darker than main row */
.hdr-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:34px;
  padding:0 16px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.04);
  flex-shrink:0;
}
.hdr-row-top-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.hdr-row-top-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.hdr-tb-link{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--mute);
  text-decoration:none;
  letter-spacing:.2px;
  transition:color .15s ease;
  cursor:pointer;
  white-space:nowrap;
}
.hdr-tb-link:hover{color:#fff;text-decoration:none;}

/* Volume control in top-right */
.hdr-volume-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:24px;
}
.hdr-volume-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  padding:0;
  background:transparent;border:none;cursor:pointer;
  color:var(--mute);
  transition:color .15s ease;
}
.hdr-volume-icon-btn:hover{color:#fff;}
.hdr-volume-slider{
  -webkit-appearance:none;appearance:none;
  width:90px;height:4px;
  background:rgba(255,255,255,.12);
  border-radius:4px;
  outline:none;cursor:pointer;
  padding:0;margin:0;
}
.hdr-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;
  background:var(--orange,#f0a830);
  border:2px solid var(--orange,#f0a830);
  box-shadow:0 0 0 2px rgba(240,168,48,.25);
  cursor:pointer;
}
.hdr-volume-slider::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:var(--orange,#f0a830);
  border:2px solid var(--orange,#f0a830);
  box-shadow:0 0 0 2px rgba(240,168,48,.25);
  cursor:pointer;
}
.hdr-volume-slider::-moz-range-track{
  background:rgba(255,255,255,.12);
  height:4px;border-radius:4px;
}

/* Borrow slider — used in battle Create panel + Join popup. Track is rendered
   as a separate element behind the input so the gold "fill" can show progress
   on the picked side. The native track here stays transparent. */
.bw-slider{
  -webkit-appearance:none;appearance:none;
  background:transparent;
  outline:none;cursor:pointer;
  padding:0;margin:0;
}
.bw-slider::-webkit-slider-runnable-track{
  background:transparent;height:28px;border:none;
}
.bw-slider::-moz-range-track{
  background:transparent;height:28px;border:none;
}
.bw-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  border:3px solid var(--orange,#f0a830);
  box-shadow:0 0 0 2px rgba(240,168,48,.25);
  cursor:pointer;
  margin-top:0;
}
.bw-slider::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  border:3px solid var(--orange,#f0a830);
  box-shadow:0 0 0 2px rgba(240,168,48,.25);
  cursor:pointer;
}
.bw-slider:focus{outline:none;}
.bw-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(240,168,48,.35);}
.bw-slider:focus::-moz-range-thumb{box-shadow:0 0 0 3px rgba(240,168,48,.35);}

/* Small vertical divider in top-right */
.hdr-tb-divider{
  width:1px;height:14px;
  background:rgba(255,255,255,.1);
  margin:0 2px;
}

/* Social icons in top-right */
.hdr-tb-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  color:var(--mute);
  text-decoration:none;
  transition:color .15s ease;
}
.hdr-tb-social:hover{color:#fff;text-decoration:none;}

/* Main row (Games/Rewards/Leaderboard + user actions) */
.hdr-row-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1;
  min-height:0;
  padding:0 8px 0 8px;
}

/* Nav zone inside main row */
.hdr-row-main .nav-zone{
  display:flex;
  align-items:center;
  height:100%;
  gap:2px;
  padding-inline-start:4px;
  flex:0 0 auto;
}

/* Main nav wrap (Games dropdown anchor) */
.hdr-mainnav-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* Main nav button — CSBattle: px-3 py-2.5 rounded-lg gap-2 text-sm font-bold */
.hdr-mainnav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  margin:0 2px;
  border-radius:8px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--mute);
  background:transparent;
  border:none;
  cursor:pointer;
  text-decoration:none;
  letter-spacing:.2px;
  transition:background .15s ease,color .15s ease;
  white-space:nowrap;
  line-height:1;
}
.hdr-mainnav-btn:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  text-decoration:none;
}
.hdr-mainnav-btn.open{
  color:#fff;
  background:rgba(255,255,255,.06);
}

/* Iconify icon sizes — matches Tailwind size-5 / size-4 */
/* Icon sizes — apply to both legacy .iconify spans and modern iconify-icon element */
.iconify.hdr-mn-icon-20, iconify-icon.hdr-mn-icon-20{width:20px;height:20px;display:inline-block;flex-shrink:0;font-size:20px;}
.iconify.hdr-mn-icon-16, iconify-icon.hdr-mn-icon-16{width:16px;height:16px;display:inline-block;flex-shrink:0;font-size:16px;}
.hdr-mn-label{display:inline-block;}
.hdr-mn-chev{
  transition:transform .18s ease;
  opacity:.9;
}
.hdr-mainnav-btn.open .hdr-mn-chev{transform:rotate(180deg);}

/* Games dropdown — appears below the Games button */
.hdr-games-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  min-width:200px;
  background:#242429;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  padding:6px;
  z-index:500;
}
[dir="rtl"] .hdr-games-dropdown{right:4px;left:auto;}
[dir="ltr"] .hdr-games-dropdown{left:4px;right:auto;}
.hdr-games-dropdown.open{display:block;}
.hdr-gd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:7px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--mute);
  text-decoration:none;
  letter-spacing:.2px;
  transition:background .12s ease,color .12s ease;
}
.hdr-gd-item:hover{background:rgba(240,168,48,.1);color:#fff;text-decoration:none;}
.hdr-gd-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;
  color:var(--mute);
  flex-shrink:0;
  transition:color .12s ease;
}
.hdr-gd-item:hover .hdr-gd-icon{color:var(--orange,#f0a830);}
.hdr-gd-label{display:inline-block;}

/* Make the right-side user area sit properly in the main row (not full 88px) */
.hdr-row-main .hdr-right{
  height:auto;
  align-self:center;
}
.hdr-row-main .hdr-cell{
  height:auto;
  border:none;
  padding:0 6px;
}

/* Mobile: collapse header back to single-row (71px), hide nav and top row only */
@media (max-width:880px){
  body{padding-top:71px;}
  header{height:71px;align-items:center;}
  .hdr-body{
    flex-direction:row;
    align-items:center;
    flex:1;
    height:100%;
  }
  .hdr-row-top{display:none !important;}
  .hdr-row-main{
    flex:1;
    justify-content:flex-end;
    padding:0;
    height:100%;
  }
  .nav-zone{display:none !important;}
  .hdr-row-main .hdr-right{
    height:100%;
    align-self:auto;
    display:flex;
    align-items:center;
  }
}

/* ══ EMBEDDED SPA PAGES (rakeback / leaderboard / market / wallet) ══════════
   These pages render inside an iframe. The iframe fills the available viewport
   below the header. The chat panel and sidebar still render on top via the
   normal page shell. */
.embed-page {
  /* Match the width of other SPA pages (page-outer) so sidebar/chat layout
     stays identical. No internal padding — the inner page supplies its own.
     width:auto (not 100%) so the margin-left/margin-right set on .page-outer
     by the main layout (48px / 360px, toggled by body.side-nav-open and
     body.chat-hidden) actually shrinks the iframe width — otherwise the
     iframe renders full viewport width and the chat panel covers its right
     side. */
  width: auto;
  padding: 0;
}
.embed-iframe {
  display: block;
  width: 100%;
  /* Subtract the site header height (~64px on desktop, ~52px on mobile).
     Using min-height so very long embedded pages can scroll inside the iframe. */
  height: calc(100vh - 64px);
  min-height: calc(100vh - 64px);
  border: 0;
  background: transparent;
  color-scheme: dark;
}
@media (max-width: 768px) {
  .embed-iframe {
    height: calc(100vh - 52px);
    min-height: calc(100vh - 52px);
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE OPTIMIZATION LAYER — v1
   Prevents horizontal scroll + fits all UI inside viewport.
   Only applies on mobile (≤768px). Desktop untouched.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  body { -webkit-text-size-adjust: 100%; }
  * { max-width: 100%; }
  img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto;
  }
  table { max-width: 100% !important; display: block; overflow-x: auto; }
  pre, code { white-space: pre-wrap !important; word-break: break-word; }

  /* Page shell */
  .page-outer, .page-inner, main, .main-content, .content-wrap,
  .site-main, .container, .wrapper {
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Horizontal scroll strips (live bets, deals, carousels) — keep scroll but contain */
  .live-bets, .live-bets-wrap, .live-bets-track,
  .payment-marquee, .payment-marquee-track,
  .nh-deals-grid, .promo-slider-track,
  .history-strip, .rlg-history, .battle-lobby-scroll,
  .lb-scroll, .scroll-x, .hscroll {
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals / popups — fit viewport */
  .modal, .modal-content, .popup, .popup-content,
  [class*="modal"], [class*="popup"] {
    max-width: 96vw !important;
    box-sizing: border-box;
  }

  /* Forms — prevent wide inputs */
  input, select, textarea, button {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Grids — collapse to single column when too tight */
  .cb-game-grid, .games-grid, .home-games-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Nav / sidebar safety */
  .side-nav, #sideNav, .sidebar {
    max-width: 86vw !important;
  }

  /* Chat panel — hide by default on mobile so it doesn't force overflow */
  .chat-panel, #chatPanel {
    max-width: 92vw !important;
  }

  /* Hero sections */
  .hero, .home-hero, .hero-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Cases/items grids */
  .cases-grid, .case-grid, .items-grid, .case-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Tables inside cards */
  .card, .panel, .box {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Buttons row wrap */
  .btn-row, .buttons-row, .actions-row {
    flex-wrap: wrap !important;
  }

  /* Embedded iframe pages */
  .embed-page { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .embed-iframe { width: 100vw !important; max-width: 100vw !important; }

  /* Roulette widget safety */
  #roulettePage, .rlg-wrap, .rlg-root {
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  .rlg-reel, .rlg-strip {
    max-width: 100vw !important;
  }

  /* Plinko canvas */
  canvas { max-width: 100vw !important; height: auto !important; }

  /* Market cards */
  .mk-card, .market-card, .item-card {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Wallet layout */
  .wallet-cols, .wallet-grid, .coin-pkg-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Leaderboard tables */
  .lb-table, .leaderboard-table {
    font-size: 12px !important;
  }
  .lb-table td, .lb-table th { padding: 6px 4px !important; }

  /* Affiliate / rakeback stats */
  .stats-grid, .aff-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Battle lobby / slots */
  .battle-slots, .cb-slots {
    flex-wrap: wrap !important;
    justify-content: center;
  }

  /* Footer */
  footer, .site-footer, .lp-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Header */
  .site-header, header, .hdr {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Any fixed-width utility */
  [style*="width:100vw"], [style*="width: 100vw"] {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .cb-game-grid, .games-grid, .home-games-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .cases-grid, .case-grid, .items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .stats-grid, .aff-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  body { font-size: 14px; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 16px !important; }
}
/* ════ END MOBILE OPTIMIZATION LAYER v1 ════ */

/* ════════════════════════════════════════════════════════════════════
 * RAIN SYSTEM — v1 (spec v1.3 §7)
 * Additive only. Does not override any existing selector.
 * Hex colors only (no named colors) — colorblind preferences.
 *
 * Palette:
 *   gold primary    #f0a830
 *   gold hover      #f5b548
 *   green joined    #3ccf82
 *   red alert       #e15b5b
 *   neutral mid     #7a8599
 *   dim disabled    #4a4a4a
 *   panel bg        #212121
 *   panel bg deep   #1a1a1a
 *   border          #2a2a30
 *   border soft     #323238
 *   text hi         #ffffff
 *   text muted      #9aa3b5
 * ════════════════════════════════════════════════════════════════════ */

/* ── Rain bar container (first child of #chatPanel) ───────────────── */
.rain-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 14px;
  height: 64px;
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  border-bottom: 1px solid #2a2a30;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.rain-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f0a830, transparent);
  opacity: 0.4;
  pointer-events: none;
}

.rain-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}
.rain-bar-middle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.rain-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Icon + pool ──────────────────────────────────────────────────── */
.rain-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #f0a830;
  flex-shrink: 0;
}

.rain-pool-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rain-pool-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #7a8599;
  text-transform: uppercase;
  line-height: 1;
}
.rain-pool-amount {
  font-size: 14px;
  font-weight: 800;
  color: #f0a830;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.rain-pool-flash {
  animation: rainPoolFlash 0.8s ease-out;
}
@keyframes rainPoolFlash {
  0%   { color: #f0a830; text-shadow: none; transform: scale(1); }
  30%  { color: #f5b548; text-shadow: 0 0 10px rgba(245, 181, 72, 0.8); transform: scale(1.08); }
  100% { color: #f0a830; text-shadow: none; transform: scale(1); }
}

/* ── Timer ────────────────────────────────────────────────────────── */
.rain-timer-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  flex-shrink: 0;
}
.rain-timer-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #7a8599;
  text-transform: uppercase;
  line-height: 1;
}
.rain-timer {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', monospace;
}
.rain-timer.rain-timer-stopped {
  color: #e15b5b;
  letter-spacing: 1.5px;
}

/* ── Avatars ──────────────────────────────────────────────────────── */
.rain-avatars {
  display: flex;
  align-items: center;
  gap: -4px;
  flex-wrap: nowrap;
  min-width: 0;
}
.rain-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a2a30;
  border: 1.5px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: -6px;
  transition: transform 0.15s;
}
.rain-avatar:first-child { margin-left: 0; }
.rain-avatar:hover { transform: translateY(-2px); z-index: 2; }
.rain-avatar-more {
  background: #323238;
  color: #f0a830;
  font-size: 9px;
  letter-spacing: 0;
}
.rain-pulse {
  animation: rainAvatarPulse 0.6s ease-out;
}
@keyframes rainAvatarPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.rain-btn {
  background: #f0a830;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #161616;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  min-width: 60px;
}
.rain-btn:hover:not(:disabled) {
  background: #f5b548;
  transform: translateY(-1px);
}
.rain-btn:active:not(:disabled) {
  transform: translateY(0);
}
.rain-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.rain-btn-joined {
  background: #3ccf82;
  color: #ffffff;
  cursor: default;
}
.rain-btn-joined:hover:not(:disabled) {
  background: #3ccf82;
  transform: none;
}
.rain-btn-disabled {
  background: #2a2a30;
  color: #7a8599;
  cursor: not-allowed;
}
.rain-btn-disabled:hover:not(:disabled) {
  background: #2a2a30;
  transform: none;
}

.rain-btn-ghost {
  background: transparent;
  border: 1px solid #323238;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #9aa3b5;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.rain-btn-ghost:hover {
  border-color: #f0a830;
  color: #f0a830;
}

/* ── Payout celebration animation on the bar ──────────────────────── */
.rain-payout-anim {
  animation: rainPayoutPulse 3s ease-out;
}
@keyframes rainPayoutPulse {
  0%   { background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%); }
  15%  { background: linear-gradient(180deg, rgba(240,168,48,0.25) 0%, rgba(240,168,48,0.1) 100%); }
  50%  { background: linear-gradient(180deg, rgba(240,168,48,0.15) 0%, rgba(240,168,48,0.05) 100%); }
  100% { background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%); }
}

/* ══════════════════════════════════════════════════════════════════
 * MODALS
 * ══════════════════════════════════════════════════════════════════ */
.rain-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: rainModalBackdropIn 0.2s ease-out;
}
@keyframes rainModalBackdropIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.rain-modal {
  background: #212121;
  border: 1px solid #2a2a30;
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  font-family: 'Inter', sans-serif;
  animation: rainModalIn 0.25s ease-out;
}
@keyframes rainModalIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.rain-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2a30;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}
.rain-modal-close {
  background: transparent;
  border: none;
  color: #7a8599;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.rain-modal-close:hover {
  color: #e15b5b;
  background: #2a2a30;
}

.rain-modal-body {
  padding: 18px;
  font-size: 13px;
  color: #9aa3b5;
  line-height: 1.6;
}

.rain-modal-loading {
  text-align: center;
  color: #7a8599;
  padding: 24px 0;
  font-size: 13px;
}

.rain-modal-subtle {
  font-size: 12px;
  color: #7a8599;
  margin-bottom: 12px;
}
.rain-modal-subtle span {
  color: #f0a830;
  font-weight: 700;
}

.rain-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #7a8599;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rain-modal-input {
  width: 100%;
  background: #161616;
  border: 1px solid #323238;
  border-radius: 6px;
  padding: 10px 12px;
  color: #ffffff;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.rain-modal-input:focus {
  border-color: #f0a830;
}

.rain-modal-notice {
  background: rgba(240, 168, 48, 0.06);
  border-left: 3px solid #f0a830;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 12px;
  color: #9aa3b5;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
}
.rain-modal-notice strong {
  color: #ffffff;
  font-weight: 700;
}

.rain-modal-error {
  background: rgba(225, 91, 91, 0.08);
  border: 1px solid rgba(225, 91, 91, 0.3);
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 12px;
  color: #e15b5b;
  border-radius: 6px;
  line-height: 1.5;
}

.rain-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid #2a2a30;
}
.rain-modal-footer:empty {
  display: none;
}

.rain-modal-btn {
  background: #f0a830;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #161616;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Inter', sans-serif;
}
.rain-modal-btn:hover:not(:disabled) {
  background: #f5b548;
}
.rain-modal-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.rain-modal-btn-wide {
  width: 100%;
  padding: 12px 18px;
  margin-top: 8px;
}

.rain-modal-btn-ghost {
  background: transparent;
  border: 1px solid #323238;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #9aa3b5;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.rain-modal-btn-ghost:hover {
  border-color: #7a8599;
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════
 * WIN MODAL
 * ══════════════════════════════════════════════════════════════════ */
.rain-modal-win {
  text-align: center;
  padding: 24px 20px;
  background: linear-gradient(180deg, #212121 0%, #1a1a1a 100%);
  border: 1px solid rgba(240, 168, 48, 0.4);
}
.rain-win-title {
  font-size: 16px;
  font-weight: 800;
  color: #f0a830;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.rain-win-amount {
  font-size: 40px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin: 8px 0;
  text-shadow: 0 0 20px rgba(240, 168, 48, 0.4);
  font-variant-numeric: tabular-nums;
}
.rain-win-sub {
  font-size: 12px;
  color: #7a8599;
  margin-bottom: 14px;
}
.rain-win-wager {
  font-size: 12px;
  color: #9aa3b5;
  background: rgba(240, 168, 48, 0.08);
  border-left: 3px solid #f0a830;
  padding: 8px 12px;
  margin: 0 0 14px;
  border-radius: 0 6px 6px 0;
  text-align: left;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
 * TOAST (bottom center, auto-dismiss)
 * ══════════════════════════════════════════════════════════════════ */
.rain-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #212121;
  border: 1px solid #2a2a30;
  border-left: 3px solid #f0a830;
  padding: 10px 16px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  z-index: 100000;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  text-align: center;
}
.rain-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
 * MOBILE RESPONSIVE
 * ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .rain-bar {
    height: 56px;
    padding: 8px 8px 12px;
    gap: 6px;
  }
  .rain-icon {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }
  .rain-pool-label,
  .rain-timer-label {
    font-size: 8px;
  }
  .rain-pool-amount {
    font-size: 13px;
  }
  .rain-timer {
    font-size: 12px;
  }
  .rain-avatars {
    display: none; /* hide avatars on mobile to save space */
  }
  .rain-btn {
    padding: 6px 10px;
    font-size: 11px;
    min-width: 50px;
  }
  .rain-btn-ghost {
    padding: 6px 8px;
    font-size: 10px;
  }
  .rain-modal {
    max-width: 100%;
    max-height: 95vh;
  }
  .rain-modal-header {
    padding: 12px 14px;
    font-size: 13px;
  }
  .rain-modal-body {
    padding: 14px;
    font-size: 12px;
  }
  .rain-modal-footer {
    padding: 12px 14px;
  }
  .rain-win-amount {
    font-size: 32px;
  }
  .rain-toast {
    bottom: 16px;
    font-size: 12px;
    padding: 9px 14px;
  }
}

@media (max-width: 400px) {
  .rain-bar-middle {
    gap: 6px;
  }
  .rain-bar-right {
    gap: 4px;
  }
}
/* ════════════════════════════════════════════════════════════════════
 * END RAIN SYSTEM CSS
 * ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   PROFILE — HISTORY + TRANSACTIONS TABS (CSBattle-style)
═══════════════════════════════════════════════════ */
.pfh-card{
  background:#242429;border:1px solid #2a2a30;border-radius:12px;
  padding:22px 24px 20px;
}
.pfh-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.pfh-head-title{
  font-size:20px;font-weight:800;color:#ffffff;
  letter-spacing:-.01em;
}
.pfh-sort{
  display:inline-flex;align-items:center;gap:6px;
  background:#1b1b1e;border:1px solid #2a2a30;border-radius:8px;
  padding:8px 14px;font-size:12px;font-weight:600;
}
.pfh-sort-lbl{color:#9aa3b5;}
.pfh-sort-val{color:#ffffff;}

/* Sub-tabs (All / Deposits / Withdrawals) */
.pfh-subtabs{
  display:inline-flex;align-items:center;gap:6px;
  background:#1b1b1e;border:1px solid #2a2a30;border-radius:10px;
  padding:4px;margin-bottom:14px;
}
.pfh-subtab{
  font-family:inherit;background:transparent;border:0;
  color:#9aa3b5;font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:9px 22px;border-radius:7px;cursor:pointer;
  transition:color .15s,background .15s;
}
.pfh-subtab:hover{color:#e2e8f0;}
.pfh-subtab-a{background:#2a2a30;color:#ffffff;}

/* Table */
.pfh-table{
  background:transparent;border-radius:10px;overflow:hidden;
}
.pfh-row{
  display:grid;align-items:center;
  grid-template-columns: 1.4fr 1.2fr 1.2fr 1.2fr 100px;
  gap:12px;padding:16px 18px;
  border-bottom:1px solid #2a2a30;
  transition:background .12s;
}
.pfh-table-tx .pfh-row{
  grid-template-columns: 1.3fr 1.1fr 1fr 1fr 1.1fr 36px;
}
.pfh-data-row{background:#1b1b1e;}
.pfh-data-row:nth-child(even){background:#1f1f23;}
.pfh-tx-row:hover{background:#25252a;}
.pfh-head-row{
  background:transparent;padding:10px 18px 12px;
  border-bottom:1px solid #2a2a30;
  font-size:11px;font-weight:700;color:#7a8599;
  text-transform:uppercase;letter-spacing:.08em;
}
.pfh-col{min-width:0;}

/* Type cell: icon + name */
.pfh-col-type{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:#ffffff;
}
.pfh-gicon{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:#9aa3b5;flex-shrink:0;
}
.pfh-gicon svg{width:20px;height:20px;}
.pfh-gname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Amount / Payout cells */
.pfh-col-amt, .pfh-col-pay{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:#ffffff;
}
.pfh-coin{width:16px;height:16px;flex-shrink:0;}
.pfh-pay-win{color:#41c278;}
.pfh-pay-loss{color:#e15b5b;}

/* Action cell chips */
.pfh-col-action{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:#ffffff;
}
.pfh-act-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:700;color:#ffffff;
}
.pfh-act-txt{color:#e2e8f0;font-weight:600;}
.pfh-act-na{color:#7a8599;font-weight:600;}
.pfh-crypto-ic{width:16px;height:16px;flex-shrink:0;}

/* Status cell */
.pfh-col-status{font-size:13px;font-weight:700;}
.pfh-col-status span{display:inline-flex;align-items:center;gap:6px;}
.pfh-st-ok{color:#41c278;}
.pfh-st-pending{color:#f0a830;}
.pfh-st-rejected{color:#e15b5b;}

/* Date cell */
.pfh-col-date{
  font-size:13px;font-weight:600;color:#9aa3b5;white-space:nowrap;
}

/* Caret */
.pfh-col-caret{display:flex;align-items:center;justify-content:flex-end;color:#7a8599;}
.pfh-caret{display:inline-flex;transition:transform .2s;}
.pfh-caret-up{transform:rotate(180deg);}

/* Expanded row (crypto details) */
.pfh-expand-row{
  display:grid;grid-template-columns: repeat(4, 1fr);
  gap:18px;padding:18px 22px;
  background:#161619;border-bottom:1px solid #2a2a30;
}
.pfh-exp-cell{min-width:0;}
.pfh-exp-lbl{
  font-size:11px;font-weight:700;color:#7a8599;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.pfh-exp-val{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:#ffffff;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.pfh-exp-net{color:#ffffff;}
.pfh-txlink{
  display:inline-flex;align-items:center;gap:6px;
  color:#f0a830;font-weight:700;cursor:pointer;
}
.pfh-txlink:hover{color:#f5b548;}

/* Watch column — opens battle view or case result modal */
.pfh-col-watch{
  display:flex;align-items:center;justify-content:flex-end;
}
.pfh-watch-btn{
  font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#2a2a30;border:1px solid #3a3a42;
  color:#e2e8f0;font-size:12px;font-weight:700;
  padding:7px 12px;border-radius:6px;cursor:pointer;
  letter-spacing:.04em;text-transform:uppercase;
  transition:background .12s,border-color .12s,color .12s;
}
.pfh-watch-btn:hover{
  background:#f0a830;border-color:#f0a830;color:#0d0d0d;
}
.pfh-watch-btn svg{width:13px;height:13px;flex-shrink:0;}
.pfh-watch-btn--na{
  opacity:.35;cursor:not-allowed;
}
.pfh-watch-btn--na:hover{
  background:#2a2a30;border-color:#3a3a42;color:#e2e8f0;
}

/* Case result modal (Watch on case row) */
.pfh-cw-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.82);
  backdrop-filter:blur(4px);z-index:2200;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.pfh-cw-modal{
  background:#1b1b1e;border:1px solid #2a2a30;border-radius:14px;
  max-width:420px;width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,0.8);
  overflow:hidden;
  animation:pfhCwIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes pfhCwIn{
  from{opacity:0;transform:translateY(8px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.pfh-cw-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid #2a2a30;
}
.pfh-cw-title{
  font-size:13px;font-weight:800;color:#9aa3b5;
  letter-spacing:.08em;text-transform:uppercase;
}
.pfh-cw-x{
  background:transparent;border:0;color:#7a8599;
  width:28px;height:28px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.pfh-cw-x:hover{background:#2a2a30;color:#ffffff;}
.pfh-cw-x svg{width:16px;height:16px;}
.pfh-cw-body{padding:22px;}
.pfh-cw-case{
  font-size:12px;font-weight:700;color:#7a8599;
  letter-spacing:.04em;text-transform:uppercase;
  text-align:center;margin-bottom:14px;
}
.pfh-cw-skin-card{
  position:relative;
  background:#161619;border:1px solid #2a2a30;border-radius:10px;
  padding:22px 18px 18px;text-align:center;
  margin-bottom:16px;
  overflow:hidden;
}
.pfh-cw-skin-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--cw-rarity, #6e7681);
}
.pfh-cw-skin-card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, var(--cw-rarity, #6e7681) 0%, transparent 60%);
  opacity:.12;pointer-events:none;
}
.pfh-cw-rarity-tag{
  display:inline-block;
  font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 10px;border-radius:4px;
  background:var(--cw-rarity, #6e7681);color:#0d0d0d;
  margin-bottom:10px;
  position:relative;z-index:1;
}
.pfh-cw-skin-name{
  font-size:16px;font-weight:800;color:#ffffff;
  word-break:break-word;
  position:relative;z-index:1;
}
.pfh-cw-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.pfh-cw-stat{
  background:#161619;border:1px solid #2a2a30;border-radius:8px;
  padding:12px 14px;
}
.pfh-cw-stat-lbl{
  font-size:10px;font-weight:700;color:#7a8599;
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:5px;
}
.pfh-cw-stat-val{
  display:flex;align-items:center;gap:6px;
  font-size:15px;font-weight:800;color:#ffffff;
}
.pfh-cw-stat-val img{width:14px;height:14px;flex-shrink:0;}
.pfh-cw-stat-val--win{color:#41c278;}
.pfh-cw-stat-val--loss{color:#e15b5b;}


.pfh-pager{
  display:flex;align-items:center;justify-content:center;
  gap:4px;margin-top:18px;flex-wrap:wrap;
}
.pfh-pg-btn, .pfh-pg-num{
  font-family:inherit;background:transparent;border:0;
  color:#9aa3b5;font-size:13px;font-weight:700;
  width:34px;height:34px;border-radius:7px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.pfh-pg-btn:hover, .pfh-pg-num:hover{color:#ffffff;background:#2a2a30;}
.pfh-pg-a{background:#2a2a30;color:#ffffff;}
.pfh-pg-dis{opacity:.35;cursor:not-allowed;}
.pfh-pg-dis:hover{background:transparent;color:#9aa3b5;}

/* Empty state */
.pfh-empty{
  padding:38px 16px;text-align:center;
  font-size:13px;font-weight:600;color:#7a8599;
}

/* Mobile responsive */
@media(max-width:900px){
  .pfh-expand-row{grid-template-columns: repeat(2, 1fr);}
}
@media(max-width:720px){
  .pfh-card{padding:16px 14px 14px;}
  .pfh-head-title{font-size:17px;}
  .pfh-row{padding:12px 12px;gap:10px;font-size:12px;grid-template-columns: 1.4fr 1.1fr 1.1fr 1.1fr 80px;}
  .pfh-col-type{font-size:13px;gap:8px;}
  .pfh-col-amt, .pfh-col-pay{font-size:13px;}
  .pfh-col-date{font-size:11px;}
  .pfh-col-status{font-size:11px;}
  .pfh-head-row{font-size:10px;padding:8px 12px 10px;}
  .pfh-watch-btn{padding:6px 10px;font-size:11px;}
  /* Hide action column on small screens */
  .pfh-table-tx .pfh-row{grid-template-columns: 1.2fr 1fr 0.9fr 1.1fr 28px;}
  .pfh-col-action{display:none;}
  .pfh-expand-row{padding:14px 14px;gap:12px;}
  .pfh-exp-val{font-size:12px;}
}
@media(max-width:480px){
  .pfh-row{grid-template-columns: 1.3fr 1fr 1fr 70px;gap:8px;}
  .pfh-col-date{display:none;}
  .pfh-table-tx .pfh-row{grid-template-columns: 1.2fr 1fr 1fr 24px;}
  .pfh-col-status{display:none;}
  .pfh-subtab{padding:7px 14px;font-size:12px;}
  .pfh-watch-btn{padding:5px 8px;font-size:10px;}
  .pfh-watch-btn svg{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   ROLL (Roll Under) — V2 (matches Clash/CSGOBIG layout 1:1)
   Isolated module — all classes prefixed `rl2-` to avoid colliding
   with the existing Roulette module classes (`rl-`).
═══════════════════════════════════════════════════════════════════ */
#rollPage {
  padding: 24px 24px 48px;
  min-height: 600px;
  background: var(--bg);
  direction: ltr;          /* Force LTR layout so the page matches the Clash/CSGOBIG screenshots
                              even when the site is displayed in Hebrew (RTL). */
  text-align: left;
}
#rollPage * { direction: ltr; }

.rl2-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Top: 2-column shell (bet panel | roll panel) ─────────────────── */
.rl2-top {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  background: var(--ink);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  padding: 18px;
  align-items: stretch;
}

/* ── Bet panel (left) ─────────────────────────────────────────────── */
.rl2-bet {
  background: var(--card);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rl2-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--ink);
  padding: 4px;
  border-radius: var(--r);
  border: 1px solid var(--b1);
}
.rl2-tab {
  background: transparent;
  border: none;
  color: var(--mute);
  font-family: var(--fen);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rl2-tab:hover { color: var(--tx); }
.rl2-tab-active {
  background: var(--card2);
  color: var(--hi);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

.rl2-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rl2-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rl2-lbl {
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mute);
  text-transform: none;
}

.rl2-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  height: 38px;
  transition: border-color .15s;
}
.rl2-input-wrap:focus-within { border-color: var(--g); }

.rl2-coin-inside {
  display: inline-flex;
  align-items: center;
  padding-left: 10px;
  flex-shrink: 0;
}

.rl2-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--hi);
  font-family: var(--fen);
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
  height: 100%;
  width: 100%;
  -moz-appearance: textfield;
}
.rl2-input::-webkit-outer-spin-button,
.rl2-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rl2-input-coin { padding-left: 8px; }
.rl2-input-readonly { color: var(--hi); cursor: default; }

.rl2-input-btns {
  display: flex;
  gap: 4px;
  padding-right: 4px;
  flex-shrink: 0;
}
.rl2-mini {
  background: var(--card2);
  border: 1px solid var(--b2);
  color: var(--tx);
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.rl2-mini:hover {
  background: var(--lift);
  color: var(--hi);
  border-color: var(--b3);
}

.rl2-inf-btn {
  margin-right: 8px;
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color .15s;
}
.rl2-inf-btn:hover { color: var(--hi); }

/* Two-column row inside auto body */
.rl2-row2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* On Win / On Loss — segmented + percent */
.rl2-mode-row {
  display: grid;
  grid-template-columns: 1fr 75px;
  gap: 6px;
  align-items: center;
}
.rl2-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 3px;
  gap: 3px;
  height: 38px;
}
.rl2-seg {
  background: transparent;
  border: none;
  color: var(--mute);
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.rl2-seg:hover { color: var(--tx); }
.rl2-seg-active {
  background: var(--card2);
  color: var(--hi);
}
.rl2-pct-input {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  height: 38px;
  display: flex;
  align-items: center;
  transition: border-color .15s, opacity .15s;
}
.rl2-pct-input:focus-within { border-color: var(--g); }
.rl2-pct-input.rl2-pct-disabled {
  opacity: .55;
  pointer-events: none;
}
.rl2-pct-num {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--hi);
  font-family: var(--fen);
  font-size: 13px;
  font-weight: 700;
  padding: 0 24px 0 10px;
  height: 100%;
  width: 100%;
  -moz-appearance: textfield;
}
.rl2-pct-num::-webkit-outer-spin-button,
.rl2-pct-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rl2-pct-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mute);
  font-family: var(--fen);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

/* Play / Start Autoplay button */
.rl2-play-btn {
  margin-top: 4px;
  background: linear-gradient(180deg, var(--g) 0%, var(--g2) 100%);
  border: none;
  color: #1b1b1b;
  font-family: var(--fen);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 12px 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: filter .15s, transform .05s;
  box-shadow: 0 2px 12px rgba(240,168,48,.18);
}
.rl2-play-btn:hover  { filter: brightness(1.08); }
.rl2-play-btn:active { transform: translateY(1px); }
.rl2-play-btn.rl2-busy { opacity: .55; cursor: progress; }
.rl2-play-btn.rl2-stop {
  background: linear-gradient(180deg, var(--red) 0%, #c84444 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(225,91,91,.25);
}

/* Remaining Bets row (always visible in Auto) */
.rl2-remaining-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fen);
  font-size: 12px;
  padding: 4px 2px 0;
}
.rl2-remaining-k { color: var(--mute); }
.rl2-remaining-v { color: var(--hi); font-weight: 700; }
.rl2-auto-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fen);
  font-size: 12px;
  padding: 0 2px;
}
.rl2-auto-status .rl2-remaining-v.rl2-pos { color: var(--green); }
.rl2-auto-status .rl2-remaining-v.rl2-neg { color: var(--red); }

/* ── Roll panel (right) ─────────────────────────────────────────── */
.rl2-roll {
  position: relative;
  background: var(--card);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 18px 20px 18px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

/* Top-right small green chip showing latest result number */
.rl2-resultChip {
  position: absolute;
  top: 14px;
  right: 18px;
  background: rgba(60,207,130,.14);
  border: 1px solid rgba(60,207,130,.30);
  color: var(--green);
  font-family: var(--fen);
  font-size: 13px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: var(--r);
  letter-spacing: .02em;
  z-index: 2;
  transition: background .2s, border-color .2s, color .2s;
}
.rl2-resultChip.rl2-chip-loss {
  background: rgba(225,91,91,.10);
  border-color: rgba(225,91,91,.30);
  color: var(--red);
}
@keyframes rl2Pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.rl2-pulse { animation: rl2Pulse .35s ease-out; }

/* Stage = vertically-centered slider area */
.rl2-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.rl2-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  padding: 18px 0 28px;
}
.rl2-slider-track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid var(--b1);
  overflow: hidden;
}
.rl2-slider-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--green);
  background: linear-gradient(180deg, #4dde94 0%, var(--green) 100%);
  width: 0%;
  border-radius: 999px 0 0 999px;
  transition: width .15s ease-out;
}
.rl2-slider-loss {
  position: absolute;
  top: 0; bottom: 0;
  left: 100%;
  width: 0%;
  background: var(--red);
  background: linear-gradient(180deg, #f06b6b 0%, var(--red) 100%);
  border-radius: 0 999px 999px 0;
  transition: left .15s ease-out, width .15s ease-out;
}
.rl2-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 26px;
  margin-left: -7px;
  margin-top: -13px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.5);
  transition: left .15s ease-out;
  pointer-events: none;
  z-index: 3;
}
/* Result marker — animated arrow that travels along the bar and stops at the
   server-rolled position. Includes a value label above the arrow.
   The marker lives OUTSIDE the track (track has overflow:hidden which would
   clip the label). It's positioned absolutely inside .rl2-slider-wrap and
   aligned vertically so the arrow tip sits just above the track.
   Animation: long ease-out so the user visually follows the trajectory.   */
.rl2-slider-marker {
  position: absolute;
  /* The wrap has padding-top: 18px, the track is 16px tall.
     We want the arrow tip to sit just above the track top edge (y = 18 in wrap coords).
     Marker total height ≈ 34px (label ≈ 25 + gap 1 + arrow 8). Place its bottom at y = 16. */
  top: -16px;
  left: 0%;
  width: 0;
  height: 34px;
  margin-left: 0;
  pointer-events: none;
  z-index: 5;
  /* Animation timing: matches roll.js ROLL_ANIM_MS (1100ms) */
  transition: left 1.1s cubic-bezier(.22,1,.36,1);
  will-change: left;
}
.rl2-slider-marker.rl2-marker-instant {
  /* When we reset the marker to 0 before each new roll — no animation */
  transition: none !important;
}
.rl2-marker-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card2);
  border: 1px solid var(--b2);
  color: var(--hi);
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.rl2-marker-arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left:  6px solid transparent;
  border-right: 6px solid transparent;
  border-top:   8px solid var(--hi);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.rl2-marker-win  .rl2-marker-label { border-color: rgba(60,207,130,.45); color: var(--green); }
.rl2-marker-win  .rl2-marker-arrow { border-top-color: var(--green); }
.rl2-marker-loss .rl2-marker-label { border-color: rgba(225,91,91,.45);  color: var(--red); }
.rl2-marker-loss .rl2-marker-arrow { border-top-color: var(--red); }

.rl2-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 1px;
  color: var(--mute);
  font-family: var(--fen);
  font-size: 12px;
  font-weight: 600;
}
.rl2-range {
  position: absolute;
  inset: 13px 0 auto 0;
  width: 100%;
  height: 28px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}
.rl2-range:focus { outline: none; }
.rl2-range::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.rl2-range::-moz-range-track              { background: transparent; height: 28px; }
.rl2-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 28px;
  background: transparent;
  cursor: grab;
}
.rl2-range::-moz-range-thumb {
  width: 22px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: grab;
}
.rl2-range:active::-webkit-slider-thumb { cursor: grabbing; }
.rl2-range:active::-moz-range-thumb     { cursor: grabbing; }

/* Bottom card with 3 derived inputs (Multiplier / Win Chance / Roll under) */
.rl2-derivedCard {
  margin-top: auto;
  background: var(--card2);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rl2-derived-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl2-derived-lbl {
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: .02em;
}
.rl2-derived-wrap {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  height: 38px;
  transition: border-color .15s;
}
.rl2-derived-wrap:focus-within { border-color: var(--g); }
.rl2-derived-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--hi);
  font-family: var(--fen);
  font-size: 14px;
  font-weight: 700;
  padding: 0 12px;
  height: 100%;
  width: 100%;
  -moz-appearance: textfield;
}
.rl2-derived-input::-webkit-outer-spin-button,
.rl2-derived-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rl2-derived-x,
.rl2-derived-rotate {
  background: transparent;
  border: none;
  color: var(--mute);
  cursor: pointer;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: color .15s;
}
.rl2-derived-x:hover,
.rl2-derived-rotate:hover { color: var(--hi); }
.rl2-derived-pct {
  padding-right: 12px;
  color: var(--mute);
  font-family: var(--fen);
  font-size: 12px;
  font-weight: 700;
}

/* ── Bottom strip (recent rolls + foot) ───────────────────────────── */
.rl2-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  padding: 10px 14px;
  min-height: 48px;
}
.rl2-recent {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  align-items: center;
  min-height: 32px;
}
.rl2-recent::-webkit-scrollbar { height: 4px; }
.rl2-recent::-webkit-scrollbar-thumb { background: var(--b3); border-radius: 2px; }
.rl2-recent-empty {
  color: var(--mute);
  font-family: var(--fen);
  font-size: 12px;
  padding: 0 4px;
}
.rl2-recent-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--b2);
  background: var(--card);
  color: var(--tx);
  white-space: nowrap;
}
.rl2-recent-win {
  border-color: rgba(60,207,130,.35);
  background: rgba(60,207,130,.10);
  color: var(--green);
}
.rl2-recent-loss {
  border-color: rgba(225,91,91,.30);
  background: rgba(225,91,91,.06);
  color: var(--red);
}

.rl2-foot {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.rl2-foot-btn {
  background: var(--card2);
  border: 1px solid var(--b2);
  color: var(--tx);
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.rl2-foot-btn:hover {
  background: var(--lift);
  color: var(--hi);
  border-color: var(--b3);
}

/* History panel */
.rl2-hist {
  border: 1px solid var(--b1);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
}
.rl2-hist-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  background: var(--ink);
  padding: 9px 14px;
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mute);
  text-transform: uppercase;
  border-bottom: 1px solid var(--b1);
}
.rl2-hist-body { max-height: 320px; overflow-y: auto; }
.rl2-hist-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding: 9px 14px;
  font-family: var(--fen);
  font-size: 12px;
  color: var(--tx);
  border-bottom: 1px solid var(--b1);
  transition: background .12s;
}
.rl2-hist-row:last-child { border-bottom: none; }
.rl2-hist-row:hover { background: var(--card2); }
.rl2-hist-win  { color: var(--green); }
.rl2-hist-loss { color: var(--red); }
.rl2-hist-loading {
  padding: 18px;
  text-align: center;
  color: var(--mute);
  font-family: var(--fen);
  font-size: 12px;
}

/* Fairness panel */
.rl2-fair {
  border: 1px solid var(--b1);
  border-radius: var(--r);
  background: var(--card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl2-fair-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fen);
  font-size: 12px;
}
.rl2-fair-k { color: var(--mute); }
.rl2-fair-v {
  color: var(--hi);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  word-break: break-all;
  max-width: 65%;
  text-align: right;
}
.rl2-fair-note {
  font-family: var(--fen);
  font-size: 11px;
  color: var(--mute);
  border-top: 1px dashed var(--b1);
  padding-top: 6px;
  margin-top: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .rl2-top { grid-template-columns: 290px 1fr; gap: 14px; padding: 14px; }
  .rl2-roll { padding: 16px; min-height: 480px; }
}
@media (max-width: 920px) {
  #rollPage { padding: 14px 12px 36px; }
  .rl2-top {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
  .rl2-bet  { order: 2; }
  .rl2-roll { order: 1; min-height: 380px; padding: 14px; }
  .rl2-stage { padding: 0 8px; }
  .rl2-resultChip { top: 10px; right: 10px; }
  .rl2-derivedCard { padding: 12px; gap: 10px; }
  .rl2-derived-input { font-size: 13px; }
}
@media (max-width: 560px) {
  .rl2-derivedCard { grid-template-columns: 1fr; }
  .rl2-row2col     { grid-template-columns: 1fr; }
  .rl2-mode-row    { grid-template-columns: 1fr 70px; }
  .rl2-bottom      { flex-direction: column; align-items: stretch; }
  .rl2-foot        { justify-content: center; }
  .rl2-hist-head, .rl2-hist-row { grid-template-columns: .9fr .9fr .9fr 1.1fr .8fr; padding: 8px 10px; font-size: 11px; }
  .rl2-fair-v { max-width: 60%; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ROLL — Live Bets feed additions (V5)
   The feed table itself reuses the global .hp-bets-* classes so it
   visually matches the homepage Live Bets. Below are only the small
   additions/overrides specific to the Roll page.
═══════════════════════════════════════════════════════════════════ */

/* Section spacing inside the rollPage (the homepage uses .hp-section
   inside its own layout; on the Roll page we don't want the homepage
   section padding/margins, only the children behave as expected.) */
/* Wrapper around the feed section so we can absolute-position the
   Provably Fair button at the top-right OUTSIDE/above the feed box */
#rollPage .rl2-feed-wrap {
  position: relative;
  margin-top: 18px;
}
.rl2-fair-btn-tr {
  position: absolute;
  top: -34px;
  right: 4px;
  margin: 0;
  z-index: 2;
}

#rollPage .rl2-feed-section.hp-section {
  /* Reset the homepage .hp-section sizing so the feed spans the full
     width of the Roll layout. */
  max-width: none;
  margin: 0;
  padding: 14px 4px 4px;
  background: var(--card);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
}
#rollPage .hp-bets-tabs {
  position: relative;
  padding: 0 14px;
  margin-bottom: 8px;
}
#rollPage .hp-bets-head {
  padding: 0 20px 8px;
}
#rollPage .hp-bets-list {
  border-top: 1px solid rgba(255,255,255,.04);
}
/* The homepage uses <a class="hp-brow"> — on the Roll page we render <div>.
   Make sure default link colors are stripped if a div inherits anything. */
#rollPage .hp-brow {
  text-decoration: none;
  color: inherit;
  cursor: default;
}

/* Provably Fair button anchored to the right of the tabs row */
.rl2-fair-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border: 1px solid var(--b2);
  color: var(--tx);
  font-family: var(--fen);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.rl2-fair-btn:hover {
  background: var(--lift);
  color: var(--hi);
  border-color: var(--b3);
}
.rl2-fair-btn svg { flex-shrink: 0; }

/* Mobile tweaks */
@media (max-width: 720px) {
  #rollPage .hp-bets-head,
  #rollPage .hp-brow {
    grid-template-columns: 1fr 1.4fr 1fr .8fr 1fr;
    padding: 0 10px;
  }
  #rollPage .hp-br-game .hp-br-gtxt { display: none; } /* icon-only on mobile */
  .rl2-fair-btn { padding: 6px 8px; font-size: 10px; }
  .rl2-fair-btn span { display: none; }
}