:root{
--noir-bg:#0a0a0a;
--noir-panel:#121212;
--noir-border:#1f1f1f;
--noir-text:#f3f3f3;
--noir-mute:#b5b5b5;
--noir-red:#e50914;
--forest-green: #228B22;
}
html,body{height:100%;}
body{background:var(--noir-bg); color:var(--noir-text);}

.noir-scope > *:not(.noir-exempt){
  filter: grayscale(100%) contrast(115%);
}

.noir-leaderboard {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.38)), var(--noir-panel);
  border: 2px solid var(--noir-red);
  border-radius: 1rem;
  box-shadow: 0 0 28px rgba(229,9,20,0.22), inset 0 0 10px rgba(255,255,255,0.05);
}

.noir-leaderboard #countdown > div{
  background: #0a0a0a;
  border: 1px solid var(--noir-red);
  color: var(--noir-text);
  box-shadow: inset 0 0 10px rgba(229,9,20,0.25);
}

.noir-leaderboard:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(circle at center, transparent 70%, rgba(0,0,0,.7) 100%);
  mix-blend-mode:multiply;
}

.noir-exempt{
  filter: none !important;
  color: unset;
}

.sin-accent{ color: var(--noir-red); text-shadow: 0 0 6px rgba(229,9,20,.6), 0 0 18px rgba(229,9,20,.35); }

.noir-exempt #leaderboard-body img{ filter: none !important; }

.grain:before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:10;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGUlEQVQYV2NkgIL/zwAEYBxVgGE0GJrGQAwA0A0v5G+g1WQAAAAASUVORK5CYII=');
opacity:.06; mix-blend-mode:overlay; image-rendering: pixelated;
animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-10px,6px)}50%{transform:translate(6px,-8px)}75%{transform:translate(-4px,10px)}100%{transform:translate(0,0)}}


#rainCanvas{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }


.noir{ filter: grayscale(100%) contrast(115%); }
.noir-soft{ filter: grayscale(80%) contrast(110%); }
.red-glow{ text-shadow: 0 0 6px rgba(229,9,20,.6), 0 0 18px rgba(229,9,20,.35); }
.panel{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.35)), var(--noir-panel); border:1px solid var(--noir-border); }
.divider{ background:linear-gradient(90deg, transparent, var(--noir-red), transparent); height:2px; }


.tb th{ background:#0f0f0f; }
.tb tr{ transition: background-color .2s ease; }
.tb tbody tr:hover{ background:rgba(229,9,20,0.06); }


.group:hover .group-hover\:block{ display:block; }


.skyscraper-edge{ position:relative; }
.skyscraper-edge:after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:70px; z-index:1;
background:linear-gradient(to top, var(--noir-bg) 0%, rgba(10,10,10,0.6) 40%, transparent 100%),
url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; /* city silhouette */
filter:grayscale(100%) contrast(130%) brightness(60%);
mask-image:linear-gradient(to top, black, transparent);
}


.btn-primary {
  display:inline-block; padding:.6rem 1rem; border:1px solid var(--noir-red);
  border-radius:.6rem; text-transform:uppercase; letter-spacing:.12em;
  background: radial-gradient(120% 120% at 50% 0%, rgba(229,9,20,.22), rgba(0,0,0,0) 60%);
  color:var(--noir-text);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 0 10px rgba(229,9,20,.25) inset, 0 0 16px rgba(229,9,20,.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(229,9,20,.35) inset, 0 0 22px rgba(229,9,20,.22); }

.btn-ghost {
  display:inline-block; padding:.6rem 1rem; border:1px solid var(--noir-border);
  border-radius:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--noir-mute);
  background: rgba(255,255,255,0.02);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-ghost:hover { color:var(--noir-text); border-color:var(--noir-red); transform: translateY(-1px); }

.count-square{
  border:1px solid var(--noir-red);
  background:rgba(255,255,255,0.02);
  box-shadow: inset 0 0 20px rgba(229,9,20,0.08);
}

.tb th { background:#0b0b0b; }
.tb tbody tr { transition: background-color .18s ease, transform .18s ease; }
.tb tbody tr:hover { background:rgba(229,9,20,0.06); }
.tb td, .tb th { border-bottom: 1px solid rgba(255,255,255,0.04); }
.tb tbody tr:last-child td { border-bottom: none; }

.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .5rem; border-radius:.5rem; font-size:.75rem; font-weight:700; letter-spacing:.06em; }
.badge.gold   { color:#111; background:linear-gradient(#ffd700, #d8b800); }
.badge.silver { color:#111; background:linear-gradient(#c0c0c0, #a8a8a8); }
.badge.bronze { color:#111; background:linear-gradient(#cd7f32, #b56e2c); }

.noir-leaderboard:before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: radial-gradient(120% 140% at 50% -20%, transparent 40%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}

.noir-scope > *:not(.noir-exempt) {
  filter: grayscale(100%) contrast(115%);
}

#leaderboard-section {
  background: #132234;
  border: 2px solid #01101E;
  border-radius: 1rem;
  padding: 2rem;
  color: #F0F2F5;
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
}

#leaderboard-section thead {
  background: #01101E;
  color: #F0F2F5;
}

#leaderboard-section tbody td {
  color: #F0F2F5;
  border-bottom: 1px solid rgba(240,242,245,0.1);
}

#leaderboard-section tbody tr:hover {
  background: rgba(240,242,245,0.05);
}

#leaderboard-section .count-square {
  background: #132234;
  border: 1px solid #01101E;
  color: #F0F2F5;
  box-shadow: inset 0 0 8px rgba(240,242,245,0.1);
}

@media (max-width: 767.98px) {
  .col-avatar {
    display: none;
  }
}

#leaderboard-body td {
  color: #f5f5f5;
}
#leaderboard-body td strong,
#leaderboard-body td.font-bold {
  color: #ffffff;
}
#leaderboard-section thead th {
  color: #ddd;
}

.offer-card {
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

.offer-card--rain {
  background: #132234;
  border-color: #01101E;
  color: #F0F2F5;
}

.offer-card--clash {
  background: #1a1a1a;
  border-color: #d6a940;
  color: #f3f3f3;
}

.offer-card--packdraw {
  background: #545454;
  border-color: #e5e7eb;
  color: #1f2937;
}

.btn-packdraw {
  padding: .75rem 1.25rem;
  border: 1px solid #d1d5db;
  border-radius: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-packdraw:hover {
  transform: translateY(-2px);
  border-color: #9ca3af;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.coin { filter: none !important; box-shadow: none !important; }


#leaderboard-section.theme-clash {
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
  color: #f3f3f3;
}
#leaderboard-section.theme-clash thead {
  background: #121212;
  color: #eaeaea;
}
#leaderboard-section.theme-clash tbody td {
  color: #f3f3f3;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#leaderboard-section.theme-clash tbody tr:hover {
  background: rgba(255,255,255,0.04);
}
#leaderboard-section.theme-clash .count-square {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #f3f3f3;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.08);
}

#leaderboard-section.theme-rain { background: #132234; border: 2px solid #01101E; color: #F0F2F5; }
#leaderboard-section.theme-rain thead { background: #01101E; color: #F0F2F5; }
#leaderboard-section.theme-rain .count-square { background: #132234; border: 1px solid #01101E; color: #F0F2F5; box-shadow: inset 0 0 8px rgba(240,242,245,0.1); }