:root{
  --bg:#070707;
  --panel:#0f0f10;
  --panel2:#121214;
  --line:#1f1f23;
  --gold:#d6a82c;
  --text:#ffffff;
  --muted:#b8b8c0;
  --good:#3ddc84;
  --bad:#ff5d5d;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;}
body{background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;border-radius:10px;padding:12px 18px;font-weight:700;background:var(--gold);color:#111;box-shadow:0 10px 25px rgba(214,168,44,.25);transition:.25s}
button:hover{transform:translateY(-1px);filter:brightness(1.03)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Announcement */
.announcement{display:none;background:linear-gradient(90deg, rgba(214,168,44,.95), rgba(214,168,44,.75));color:#111;padding:10px 14px;text-align:center;font-weight:800;letter-spacing:.2px}
.announcement a{color:#111;text-decoration:underline}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;backdrop-filter: blur(8px);background:rgba(7,7,7,.55);border-bottom:1px solid rgba(255,255,255,.06)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}
.brand-badge{width:42px;height:42px;border-radius:12px;background:radial-gradient(circle at 30% 20%, rgba(214,168,44,.9), rgba(214,168,44,.1));box-shadow:0 0 0 1px rgba(214,168,44,.25), 0 12px 35px rgba(214,168,44,.15);display:grid;place-items:center}
.brand-badge span{font-weight:1000;color:#111}
.navlinks{display:flex;align-items:center;gap:18px}
.navlinks a{opacity:.85}
.navlinks a:hover{opacity:1}
.nav-pill{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}

/* Background vignette */
.bg-vignette{
  position:fixed;inset:-20vh -20vw;z-index:-3;
  background:
    radial-gradient(circle at 30% 10%, rgba(214,168,44,.10), transparent 40%),
    radial-gradient(circle at 70% 0%, rgba(80,160,255,.10), transparent 38%),
    radial-gradient(circle at 50% 70%, rgba(214,168,44,.08), transparent 45%);
  filter: blur(0px);
}

/* Animated particles canvas layer */
#fxCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none}

/* HERO (Landing) */
.hero{padding:64px 0 28px;display:grid;place-items:center;text-align:center}
.hero h1{font-size:54px;line-height:1.05;letter-spacing:-.8px}
.hero p{margin-top:12px;color:var(--muted);font-size:16px}
.hero .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-card{
  margin-top:34px;max-width:860px;width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:18px 18px 14px;
  box-shadow:var(--shadow);
  overflow:hidden;position:relative;
}
.hero-card::before{
  content:"";position:absolute;inset:-120px -80px;
  background:radial-gradient(circle at 30% 30%, rgba(214,168,44,.20), transparent 50%);
  transform:rotate(8deg);
}
.hero-card-inner{position:relative;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mini-stat{display:flex;flex-direction:column;gap:2px;min-width:160px}
.mini-stat b{font-size:20px}
.mini-stat span{font-size:12px;color:var(--muted)}

/* Page title */
.page-title{padding:34px 0 10px;text-align:center}
.page-title h2{font-size:44px}
.page-title .sub{color:var(--muted);margin-top:10px}

/* Countdown */
.countdown{display:flex;justify-content:center;gap:14px;margin:22px 0 6px;flex-wrap:wrap}
.time-box{
  width:92px;padding:14px 12px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.time-box .n{font-size:24px;font-weight:900}
.time-box .l{font-size:12px;color:var(--muted);margin-top:4px}

/* PODIUM */
.podium-wrap{display:grid;place-items:center;margin:30px 0 26px}
.podium{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
  width:min(980px, 100%);
  align-items:end;
}
.podium-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px 16px 14px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transform: translateY(0);
  transition:.25s;
}
.podium-card:hover{transform: translateY(-6px)}
.podium-card .rank-medal{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;font-weight:1000;color:#111;
}
.medal-1{background:linear-gradient(135deg,#ffd25a,#b8830b);box-shadow:0 0 0 1px rgba(255,210,90,.35), 0 16px 40px rgba(255,210,90,.18)}
.medal-2{background:linear-gradient(135deg,#e8e8ee,#9fa3ad);box-shadow:0 0 0 1px rgba(232,232,238,.25), 0 16px 40px rgba(232,232,238,.10)}
.medal-3{background:linear-gradient(135deg,#f0a06a,#a85b2a);box-shadow:0 0 0 1px rgba(240,160,106,.25), 0 16px 40px rgba(240,160,106,.10)}

.podium-card.first{padding-top:26px}
.podium-card.second{opacity:.98}
.podium-card.third{opacity:.96}

.podium-card.first::before{
  content:"";position:absolute;inset:-120px -80px;
  background:radial-gradient(circle at 30% 30%, rgba(214,168,44,.25), transparent 55%);
  transform: rotate(12deg);
}
.gold-glow{
  position:absolute;inset:-40px -40px;pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(214,168,44,.23), transparent 55%);
  filter: blur(0px);
  animation: glowPulse 2.8s ease-in-out infinite alternate;
}
@keyframes glowPulse{from{opacity:.55}to{opacity:1}}

.avatar{
  width:72px;height:72px;border-radius:18px;
  overflow:hidden;display:inline-grid;place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 55px rgba(0,0,0,.45);
  transition:.25s;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:.25s}
.podium-card:hover .avatar{transform:translateY(-2px)}
.podium-card:hover .avatar img{transform:scale(1.06)}

.podium-name{margin-top:12px;font-weight:900;font-size:20px}
.podium-metrics{margin-top:10px;display:grid;gap:8px}
.metric{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.metric b{color:#fff}
.prize{margin-top:12px;font-weight:1000;color:var(--gold);font-size:18px}

/* TABLE */
.table{
  margin:18px auto 30px;
  width:min(980px, 100%);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.thead,.trow{
  display:grid;
  grid-template-columns: 90px 1.6fr 1fr 1fr 110px;
  align-items:center;
}
.thead{
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.trow{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  transition:.15s;
}
.trow:hover{background:rgba(255,255,255,.035)}
.rankbox{display:flex;align-items:center;gap:10px;font-weight:900}
.rankdelta{
  font-size:12px;font-weight:1000;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.rankdelta.up{color:var(--good)}
.rankdelta.down{color:var(--bad)}
.rankdelta.same{color:var(--muted)}
.pfp{width:34px;height:34px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.pfp img{width:100%;height:100%;object-fit:cover}
.playercell{display:flex;align-items:center;gap:12px}
.playername{font-weight:900}
.small{color:var(--muted);font-size:12px;margin-top:2px}
.num{font-weight:900}
.muted{color:var(--muted)}

/* Discord */
.discord-wrap{display:flex;justify-content:center;margin:34px 0 70px}
.discord{
  width:min(420px, 92vw);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

/* Footer */
.footer{padding:22px 0 40px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}

/* 404 / maintenance / launching */
.center-page{min-height:80vh;display:grid;place-items:center;text-align:center;padding:30px}
.big{font-size:92px;letter-spacing:-2px}
.pulse{animation:pulse 1.6s ease-in-out infinite alternate}
@keyframes pulse{from{transform:scale(1);opacity:.75}to{transform:scale(1.03);opacity:1}}

/* responsive */
@media (max-width:900px){
  .podium{grid-template-columns:1fr;gap:12px}
  .thead,.trow{grid-template-columns: 80px 1.7fr 1fr 96px}
  .hide-sm{display:none}
}

.token-num{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.token-num img{
  width:16px;
  height:16px;
  object-fit:contain;
  opacity:.95;
  transform:translateY(1px);
}

@media (max-width:900px){
  .token-num img{ width:14px; height:14px; }
}

/* ---------- Home Prize Card (Skinrave style) ---------- */

.home-grid{
  display:grid;
  place-items:center;
  margin-top:26px;
}

.prize-card{
  width:min(520px, 92vw);
  background:rgba(10,10,10,.65);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  padding:26px 22px 20px;
  position:relative;
  overflow:hidden;
}

.prize-card::before{
  content:"";
  position:absolute;
  inset:-140px -120px;
  background:radial-gradient(circle at 35% 20%, rgba(78,210,140,.15), transparent 55%),
             radial-gradient(circle at 60% 35%, rgba(214,168,44,.10), transparent 60%);
  transform:rotate(10deg);
}

.prize-card-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}

.skinrave-logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:1000;
  letter-spacing:.5px;
}

.skinrave-logo .mark{
  width:42px;height:42px;border-radius:14px;
  background:rgba(62,210,135,.08);
  border:1px solid rgba(62,210,135,.20);
  display:grid;place-items:center;
}

.skinrave-logo .word{
  font-size:28px;
  color:#63f0a9;
  text-shadow:0 0 18px rgba(99,240,169,.18);
}

.pool-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:2px;
}

.pool-row .pool-icon{
  width:22px;height:22px;opacity:.9;
}

.pool-row .pool-number{
  font-size:44px;
  font-weight:1000;
  color:#57eaa3;
  text-shadow:0 0 18px rgba(99,240,169,.18);
}

.pool-sub{
  margin-top:-6px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.you-get{
  width:100%;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:14px 14px;
  background:rgba(255,255,255,.03);
}

.you-get .label{
  color:rgba(214,168,44,.95);
  font-weight:900;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.you-get .text{
  margin-top:8px;
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:14px;
}

.card-actions{
  width:100%;
  display:grid;
  gap:12px;
  margin-top:10px;
}

.btn-outline{
  width:100%;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
}

.btn-outline:hover{ background:rgba(255,255,255,.06); }

.btn-gold{
  width:100%;
}

/* ---------- Footer blocks like screenshot ---------- */

.footer-block{
  width:min(1150px, 94vw);
  margin:48px auto 0;
  padding:22px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  text-align:center;
}

.footer-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:1000;
  color:rgba(214,168,44,.95);
  margin-bottom:12px;
}

.footer-title .warn{
  font-size:14px;
  display:inline-grid;
  place-items:center;
  width:18px;height:18px;
}

.footer-text{
  color:rgba(255,255,255,.70);
  line-height:1.6;
  font-size:13px;
}

.footer-text a{
  color:rgba(214,168,44,.95);
  text-decoration:none;
  font-weight:900;
}

.footer-divider{
  height:1px;
  background:rgba(214,168,44,.25);
  margin:16px auto;
  width:min(980px, 90%);
}

.follow-connect{
  width:min(1150px, 94vw);
  margin:30px auto 0;
  padding:24px 18px 34px;
  text-align:center;
}

.follow-connect h3{
  color:rgba(214,168,44,.95);
  font-weight:1000;
  margin-bottom:14px;
}

.discord-circle{
  width:54px;height:54px;
  margin:0 auto 14px;
  border-radius:999px;
  border:1px solid rgba(214,168,44,.22);
  background:rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.discord-circle img{
  width:26px;height:26px;opacity:.95;
}

.copy{
  color:rgba(255,255,255,.55);
  font-size:12px;
}

/* Clean Skinrave prize card */

.prize-card{
  width:min(520px,92vw);
  margin:30px auto;
  padding:28px 24px 24px;

  background:rgba(10,10,10,.65);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;

  box-shadow:
  0 25px 80px rgba(0,0,0,.65),
  inset 0 0 0 1px rgba(255,255,255,.02);

  backdrop-filter:blur(8px);
}

.prize-logo{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}

.prize-logo img{
  width:190px;
  height:auto;
}

.prize-pool{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  font-size:46px;
  font-weight:900;
  color:#57eaa3;

  text-shadow:0 0 16px rgba(87,234,163,.2);
}

.prize-pool img{
  width:22px;
  height:22px;
  opacity:.9;
}

.prize-sub{
  text-align:center;
  margin-top:6px;

  font-size:12px;
  letter-spacing:.6px;
  color:rgba(255,255,255,.65);
}

.you-get{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:14px;
  text-align:center;
}

.you-get-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
  color:#d6a82c;
  margin-bottom:6px;
}

.you-get-text{
  font-weight:700;
  color:rgba(255,255,255,.85);
}

.prize-actions{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.prize-actions button{
  width:100%;
}

.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
}

.btn-outline:hover{
  background:rgba(255,255,255,.06);
}

/* --- Gold shimmer text (applies to the number) --- */
.shimmer{
  position:relative;
  display:inline-block;
  background: linear-gradient(
    90deg,
    #57eaa3 0%,
    #57eaa3 35%,
    #ffd25a 50%,
    #57eaa3 65%,
    #57eaa3 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size: 220% 100%;
  animation: shimmerMove 2.6s linear infinite;
  text-shadow: 0 0 16px rgba(87,234,163,.18);
}

@keyframes shimmerMove{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}

/* --- Sign Up button hover glow --- */
.btn-gold{
  position:relative;
  overflow:hidden;
}

.btn-gold::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 50% 30%, rgba(214,168,44,.55), transparent 60%);
  opacity:0;
  transition:.25s;
  pointer-events:none;
}

.btn-gold:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(214,168,44,.30);
  filter: brightness(1.03);
}

.btn-gold:hover::before{
  opacity:1;
}

/* extra: subtle animated shine sweep on hover */
.btn-gold::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(18deg);
  opacity:0;
  transition:.25s;
  pointer-events:none;
}

.btn-gold:hover::after{
  opacity:1;
  left:120%;
  transition: .65s;
}

/* Token particles canvas inside the prize card (behind content) */
.prize-card{
  position:relative;
  overflow:hidden;
}

.token-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.55;
}

.prize-card > *:not(.token-canvas){
  position:relative;
  z-index:1;
}

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo-img{
width:42px;
height:42px;
border-radius:10px;
object-fit:cover;

background:linear-gradient(135deg,#e6b94a,#a9791a);
padding:3px;

box-shadow:
0 0 12px rgba(230,185,74,.4),
inset 0 0 6px rgba(0,0,0,.6);
}

.logo-title{
font-weight:800;
font-size:16px;
}

.logo-sub{
font-size:12px;
color:rgba(255,255,255,.55);
}

.logo-img:hover{
transform:scale(1.05);
box-shadow:
0 0 18px rgba(230,185,74,.7),
inset 0 0 8px rgba(0,0,0,.7);
transition:.25s;
}

/* --- Brand badge as image (override) --- */
.brand-badge--img{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  overflow:hidden !important;
}

.brand-badge--img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:inherit !important;
  display:block !important;
}

/* Optional: make the badge slightly less "round" if it looks weird */
.brand-badge{
  border-radius:14px; /* was likely 999px */
}

/* =========================
   NAVBAR UPGRADES
   ========================= */

/* Logo glow animation */
.brand-badge--img img{
  filter: drop-shadow(0 0 10px rgba(214,168,44,.35));
  animation: logoGlow 2.8s ease-in-out infinite;
}

@keyframes logoGlow{
  0%,100%{
    filter: drop-shadow(0 0 10px rgba(214,168,44,.30));
    transform: translateZ(0);
  }
  50%{
    filter: drop-shadow(0 0 18px rgba(214,168,44,.55));
  }
}

/* Live pulse dot (next to Connecting / Updated / etc) */
.status-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.status-live::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#2dff86;
  box-shadow: 0 0 10px rgba(45,255,134,.55);
  animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse{
  0%{ transform:scale(1); opacity:.9; }
  50%{ transform:scale(1.6); opacity:.35; }
  100%{ transform:scale(1); opacity:.9; }
}

/* Hover glow on navbar links */
.nav-pill{
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}

.nav-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(214,168,44,.35);
  background: rgba(214,168,44,.08);
  box-shadow: 0 12px 30px rgba(214,168,44,.12);
}

/* optional: subtle underline sweep */
.nav-pill::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(214,168,44,.75), transparent);
  opacity:0;
  transform: translateY(3px);
  transition: .22s ease;
}

.nav-pill:hover::after{
  opacity:.9;
  transform: translateY(0);
}

/* =========================
   CASE POPUP WIDGET
   ========================= */

.case-widget{
  position:fixed;
  right:20px;
  bottom:20px;
  width:290px;
  z-index:120;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(12,12,15,.94), rgba(9,9,11,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 24px 70px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
  transform:translateY(20px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:
    opacity .35s ease,
    transform .35s ease,
    width .28s ease,
    border-radius .28s ease;
}

.case-widget.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.case-widget.collapsed{
  width:200px;
  border-radius:16px;
}

.case-widget::before{
  content:"";
  position:absolute;
  inset:-80px -80px auto auto;
  width:160px;
  height:160px;
  background:radial-gradient(circle, rgba(214,168,44,.12), transparent 68%);
  pointer-events:none;
}

.case-widget-inner{
  position:relative;
  padding:14px 14px 12px;
}

.case-widget-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:34px;
}

.case-widget-body{
  transition:opacity .22s ease, transform .22s ease;
}

.case-widget.fade-out .case-widget-body{
  opacity:0;
  transform:translateY(6px);
}

/* badge */
.case-widget-badge,
.case-widget-mini-badge{
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
  padding:7px 10px;
  border-radius:11px;
  border:1px solid var(--case-badge-border, rgba(62,210,135,.20));
  background:var(--case-badge-bg, rgba(62,210,135,.14));
  color:var(--case-badge-color, #7ef3b8);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  line-height:1;
  white-space:nowrap;
}

.case-widget-mini-badge{
  padding:6px 8px;
  font-size:10px;
  width:max-content;
}

/* arrow toggle */
.case-widget-toggle{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.case-widget-toggle:hover{
  background:rgba(255,255,255,.13);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
  transform:translateY(-1px);
}

.case-widget-toggle-icon{
  width:12px;
  height:12px;
  display:block;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transition:transform .22s ease;
  opacity:.95;
}

.case-widget:not(.collapsed) .case-widget-toggle-icon{
  transform:rotate(45deg) translateY(-1px);
}

.case-widget.collapsed .case-widget-toggle-icon{
  transform:rotate(-45deg);
}

/* body */
.case-widget-media{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:158px;
  margin-top:8px;
}

.case-widget-media img{
  width:158px;
  max-width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
  transition:transform .28s ease, opacity .28s ease;
}

.case-widget:hover .case-widget-media img{
  transform:translateY(-2px) scale(1.015);
}

.case-widget-title{
  margin-top:6px;
  text-align:center;
  font-size:18px;
  font-weight:1000;
  color:#fff;
  letter-spacing:-.2px;
}

.case-widget-price{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff;
  font-weight:1000;
  font-size:20px;
}

.case-widget-price img{
  width:15px;
  height:15px;
  object-fit:contain;
}

.case-widget-actions{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.case-widget-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  border-radius:14px;
  padding:13px 14px;
  font-weight:1000;
  transition:.2s ease;
}

.case-widget-btn.primary{
  background:linear-gradient(180deg, rgba(214,168,44,.98), rgba(190,145,28,.98));
  color:#111;
  box-shadow:0 12px 30px rgba(214,168,44,.18);
}

.case-widget-btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 38px rgba(214,168,44,.26);
}

.case-widget-progress{
  margin-top:12px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.case-widget-progress-bar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg, rgba(255,170,80,.95), rgba(214,168,44,.95), rgba(255,95,95,.95));
  border-radius:999px;
}

/* collapsed layout */
.case-widget-collapsed-label{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  flex:1;
}

.case-widget.collapsed .case-widget-inner{
  padding:12px 14px;
}

.case-widget.collapsed .case-widget-body{
  display:none;
}

.case-widget.collapsed .case-widget-header{
  min-height:auto;
  align-items:center;
  gap:10px;
}

.case-widget.collapsed .case-widget-badge{
  display:none;
}

.case-widget.collapsed .case-widget-collapsed-label{
  display:flex;
}

.case-widget-mini-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.case-widget-mini-title{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.case-widget-mini-title img{
  width:20px;
  height:20px;
  min-width:20px;
  object-fit:contain;
  border-radius:6px;
  margin-top:1px;
}

.case-widget-mini-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.case-widget-mini-text span{
  display:block;
  line-height:1.1;
  word-break:break-word;
  color:#fff;
  font-weight:900;
  font-size:14px;
}

.case-widget.collapsed .case-widget-toggle{
  margin-left:auto;
}

/* mobile */
@media (max-width:700px){
  .case-widget{
    width:248px;
    right:14px;
    bottom:14px;
  }

  .case-widget.collapsed{
    width:185px;
  }

  .case-widget-media{
    min-height:132px;
  }

  .case-widget-media img{
    width:132px;
  }

  .case-widget-title{
    font-size:17px;
  }

  .case-widget-price{
    font-size:18px;
  }
}

/* =========================
   PROFILE PAGE
   ========================= */

.profile-page-wrap{
  padding-top:34px;
  padding-bottom:40px;
}

/* CARD */

.profile-skinrave-card{
  width:100%;
  min-height:210px;
  border-radius:20px;

  background:
    radial-gradient(circle at 10% 0%, rgba(113,172,255,.16), transparent 22%),
    radial-gradient(circle at 72% 10%, rgba(137,79,255,.08), transparent 18%),
    radial-gradient(circle at 86% 30%, rgba(62,210,135,.08), transparent 18%),
    linear-gradient(135deg, rgba(24,30,52,.96), rgba(20,18,34,.96));

  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 70px rgba(0,0,0,.42);

  display:grid;
  grid-template-columns:380px 1fr;

  gap:20px;
  padding:22px;

  overflow:hidden;
  position:relative;
}

/* subtle particle dots */

.profile-skinrave-card::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(circle, rgba(95,165,255,.75) 0 1.6px, transparent 1.7px),
    radial-gradient(circle, rgba(162,107,255,.65) 0 1.4px, transparent 1.5px),
    radial-gradient(circle, rgba(62,210,135,.55) 0 1.4px, transparent 1.5px);

  background-size:190px 120px,240px 140px,280px 160px;
  background-position:20px 10px,60% 18%,78% 34%;

  opacity:.35;
  pointer-events:none;
}

.profile-skinrave-left,
.profile-skinrave-right{
  position:relative;
  z-index:1;
}

/* LEFT SIDE */

.profile-skinrave-left{
  display:flex;
  gap:22px;
  align-items:flex-start;

  padding-right:12px;
  border-right:1px solid rgba(255,255,255,.10);
}

/* AVATAR */

.profile-avatar-shell{
  position:relative;
  width:116px;
  min-width:116px;
  height:128px;

  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:6px;
}

.profile-avatar-main{
  width:104px;
  height:104px;

  object-fit:cover;
  display:block;

  background:#111;

  border:2px solid rgba(84,175,255,.95);

  box-shadow:
    0 0 0 3px rgba(0,0,0,.22),
    0 0 24px rgba(63,145,255,.22);

  clip-path:polygon(
    22% 0,
    78% 0,
    100% 20%,
    100% 80%,
    78% 100%,
    22% 100%,
    0 80%,
    0 20%
  );
}

.profile-level-hex{
  position:absolute;
  left:50%;
  bottom:0;

  transform:translateX(-50%);

  width:58px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  font-weight:1000;

  color:#0e1626;

  background:linear-gradient(180deg,#8ed3ff,#3e82e6);

  clip-path:polygon(50% 100%,0 72%,0 0,100% 0,100% 72%);

  box-shadow:
    0 10px 24px rgba(61,122,225,.32),
    inset 0 1px 0 rgba(255,255,255,.35);

  z-index:2;
}

/* USER INFO */

.profile-main-info{
  flex:1;
  min-width:0;
  padding-top:4px;
}

.profile-name-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.profile-name-row h1{
  margin:0;

  font-size:20px;
  font-weight:1000;

  letter-spacing:-.4px;
  color:#fff;
}

/* ID */

.profile-id-row{
  margin-top:8px;

  display:flex;
  align-items:center;
  gap:8px;

  color:rgba(255,255,255,.78);
  font-size:14px;
}

.profile-id-row b{
  color:#fff;
}

.profile-copy-btn{
  width:22px;
  height:22px;

  border:none;
  background:transparent;

  color:rgba(255,255,255,.65);

  cursor:pointer;
  font-size:15px;
  line-height:1;

  padding:0;
}

.profile-copy-btn:hover{
  color:#fff;
}

/* BALANCE */

.profile-balance-strip{
  margin-top:14px;

  min-height:52px;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:12px;

  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);

  padding:10px 0;
}

.profile-balance-left{
  display:flex;
  align-items:center;
  gap:10px;

  color:#fff;
  font-size:18px;
  font-weight:1000;
}

.profile-balance-left img{
  width:18px;
  height:18px;
}

/* LEVEL TEXT */

.profile-levels-line{
  margin-top:14px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  color:#dff0ff;

  font-size:15px;
  font-weight:1000;
}

/* XP BAR */

.profile-xp-bar{
  margin-top:6px;

  width:100%;
  height:9px;

  border-radius:999px;
  background:rgba(255,255,255,.10);

  overflow:hidden;
}

.profile-xp-bar-fill{
  height:100%;
  width:50%;

  border-radius:999px;

  background:linear-gradient(90deg,#6dbdff,#d3efff);

  box-shadow:0 0 18px rgba(121,197,255,.18);
}

/* XP TEXT */

.profile-xp-note{
  margin-top:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  color:rgba(255,255,255,.78);
  font-size:14px;
}

.profile-xp-pill{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:20px;
  height:20px;

  padding:0 6px;

  border-radius:999px;

  background:rgba(255,255,255,.08);

  color:#d7dbe5;

  font-size:10px;
  font-weight:1000;
}

/* RIGHT SIDE STATS */

.profile-skinrave-right{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}

.profile-stat-block{
  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  padding:10px 20px;
}

.profile-stat-block + .profile-stat-block{
  border-left:1px solid rgba(255,255,255,.10);
}

.profile-stat-block img{
  width:72px;
  height:72px;

  object-fit:contain;

  margin-bottom:10px;

  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

.profile-stat-value{
  font-size:16px;
  font-weight:1000;

  line-height:1.15;
  color:#fff;
}

.profile-stat-label{
  margin-top:6px;

  font-size:14px;
  font-weight:900;
}

/* STAT COLORS */

.profile-stat-block.games .profile-stat-value,
.profile-stat-block.games .profile-stat-label{
  color:#8b74ff;
}

.profile-stat-block.case .profile-stat-value,
.profile-stat-block.case .profile-stat-label{
  color:#8ac2ff;
}

.profile-stat-block.win .profile-stat-value,
.profile-stat-block.win .profile-stat-label{
  color:#7ef3b8;
}

.profile-stat-block.drop .profile-stat-value,
.profile-stat-block.drop .profile-stat-label{
  color:#ff6df7;
}

/* TOKEN VALUE */

.profile-token-value{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.profile-token-value img{
  width:16px;
  height:16px;
}

/* RESPONSIVE */

@media (max-width:1040px){

  .profile-skinrave-card{
    grid-template-columns:1fr;
  }

  .profile-skinrave-left{
    border-right:none;
    padding-right:0;

    border-bottom:1px solid rgba(255,255,255,.10);
    padding-bottom:18px;
  }

  .profile-skinrave-right{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:680px){

  .profile-skinrave-left{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .profile-main-info{
    width:100%;
  }

  .profile-skinrave-right{
    grid-template-columns:1fr;
  }

}

/* =========================
   GIVEAWAY PAGE
   ========================= */

.giveaway-page-wrap{
  padding-top:34px;
  padding-bottom:40px;
}

.giveaway-hero-card,
.giveaway-entries-card{
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(214,168,44,.16), transparent 24%),
    radial-gradient(circle at 78% 14%, rgba(255,210,90,.10), transparent 18%),
    radial-gradient(circle at 82% 36%, rgba(214,168,44,.08), transparent 22%),
    linear-gradient(135deg, rgba(20,18,14,.96), rgba(18,18,22,.96));
  border:1px solid rgba(214,168,44,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
  padding:26px;
  position:relative;
  overflow:hidden;
}

.giveaway-hero-card::before,
.giveaway-entries-card::before{
  content:"";
  position:absolute;
  inset:-120px -100px;
  background:
    radial-gradient(circle at 26% 18%, rgba(214,168,44,.12), transparent 28%),
    radial-gradient(circle at 78% 30%, rgba(255,220,120,.08), transparent 24%);
  pointer-events:none;
}

.giveaway-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(214,168,44,.55) 0 1.4px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.35) 0 1.2px, transparent 1.3px);
  background-size: 220px 150px, 280px 180px;
  background-position: 30px 20px, 70% 26%;
  opacity:.22;
  pointer-events:none;
}

.giveaway-hero-top,
.giveaway-section-head{
  position:relative;
  z-index:1;
}

.giveaway-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
}

.giveaway-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(214,168,44,.14);
  border:1px solid rgba(214,168,44,.22);
  color:#ffd97a;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.7px;
  text-transform:uppercase;
  box-shadow:0 10px 26px rgba(214,168,44,.10);
}

.giveaway-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ffd97a;
  box-shadow:0 0 14px rgba(255,217,122,.55);
  animation: giveawayPulse 1.5s ease-in-out infinite;
}

@keyframes giveawayPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:.45; }
}

.giveaway-hero-top h1{
  margin:14px 0 8px;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-1px;
  color:#fff;
}

.giveaway-hero-top p{
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:16px;
  line-height:1.6;
  max-width:720px;
}

.giveaway-join-btn{
  position:relative;
  border:none;
  border-radius:16px;
  padding:15px 22px;
  background:linear-gradient(180deg, rgba(214,168,44,.98), rgba(190,145,28,.98));
  color:#111;
  font-weight:1000;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(214,168,44,.22);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow:hidden;
}

.giveaway-join-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(214,168,44,.30);
  filter:brightness(1.03);
}

.giveaway-join-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:rotate(16deg);
  opacity:0;
  pointer-events:none;
}

.giveaway-join-btn:hover::after{
  left:120%;
  opacity:1;
  transition:.7s;
}

.giveaway-info-line{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(214,168,44,.12);
  border-radius:16px;
  padding:14px 16px;
  position:relative;
  z-index:1;
}

.giveaway-info-badge{
  width:26px;
  height:26px;
  min-width:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(214,168,44,.14);
  color:#ffd97a;
  font-weight:1000;
  border:1px solid rgba(214,168,44,.18);
}

.giveaway-countdown{
  margin-top:22px;
  justify-content:flex-start;
  position:relative;
  z-index:1;
}

.giveaway-stats-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  position:relative;
  z-index:1;
}

.giveaway-stat-card{
  padding:18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(214,168,44,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.giveaway-stat-card:hover{
  transform:translateY(-2px);
  border-color:rgba(214,168,44,.20);
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}

.giveaway-stat-label{
  font-size:12px;
  color:rgba(255,255,255,.65);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:900;
}

.giveaway-stat-value{
  margin-top:10px;
  font-size:26px;
  line-height:1.15;
  font-weight:1000;
  color:#fff;
}

.giveaway-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.giveaway-section-head h2{
  margin:0;
  font-size:30px;
  letter-spacing:-.6px;
}

.giveaway-section-head p{
  margin:8px 0 0;
  color:rgba(255,255,255,.68);
}

.giveaway-entry-table{
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(214,168,44,.10);
  background:rgba(255,255,255,.02);
  position:relative;
  z-index:1;
}

.giveaway-entry-head,
.giveaway-entry-row{
  display:grid;
  grid-template-columns:80px 1.5fr 1fr 1fr;
  align-items:center;
}

.giveaway-entry-head{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:rgba(255,255,255,.68);
  font-size:12px;
  text-transform:uppercase;
  font-weight:1000;
  letter-spacing:.5px;
  padding:15px 16px;
}

.giveaway-entry-row{
  padding:16px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  transition:background .15s ease;
}

.giveaway-entry-row:hover{
  background:rgba(255,255,255,.025);
}

.giveaway-user-cell{
  word-break:break-word;
}

.giveaway-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:.24s ease;
  z-index:200;
}

.giveaway-modal-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

.giveaway-modal{
  width:min(640px, 96vw);
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(214,168,44,.14), transparent 22%),
    linear-gradient(135deg, rgba(24,20,14,.98), rgba(20,18,28,.98));
  border:1px solid rgba(214,168,44,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  padding:24px;
  position:relative;
}

.giveaway-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

.giveaway-modal-kicker{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(214,168,44,.14);
  border:1px solid rgba(214,168,44,.20);
  color:#ffd97a;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.giveaway-modal h3{
  margin:14px 0 0;
  font-size:30px;
  letter-spacing:-.6px;
}

.giveaway-steps{
  margin-top:18px;
  display:grid;
  gap:14px;
}

.giveaway-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:rgba(255,255,255,.88);
  line-height:1.6;
}

.giveaway-step-num{
  width:28px;
  height:28px;
  min-width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(214,168,44,.16);
  color:#ffd97a;
  font-weight:1000;
  border:1px solid rgba(214,168,44,.18);
}

.giveaway-copy-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.giveaway-copy-row code{
  padding:11px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
}

.giveaway-copy-btn,
.giveaway-modal-link{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-weight:900;
}

.giveaway-modal-actions{
  margin-top:18px;
}

@media (max-width:900px){
  .giveaway-stats-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .giveaway-hero-top{
    flex-direction:column;
  }

  .giveaway-entry-head,
  .giveaway-entry-row{
    grid-template-columns:70px 1.5fr 1fr;
  }

  .giveaway-entry-head .hide-sm,
  .giveaway-entry-row .hide-sm{
    display:none;
  }
}

@media (max-width:640px){
  .giveaway-stats-grid{
    grid-template-columns:1fr;
  }

  .giveaway-hero-top h1{
    font-size:34px;
  }
}