/* ===== base ===== */
:root{
  --bg1:#061a2b;
  --bg2:#030b14;
  --neon:#57d6ff;
  --gold1:#ffdf7a;
  --gold2:#c78322;
  --silver1:#f2f6ff;
  --silver2:#7a8797;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#eaf2ff;
  background: radial-gradient(1200px 800px at 50% 15%, #12385a 0%, var(--bg1) 35%, var(--bg2) 100%);
  overflow-x:hidden;
}

/* ===== stage ===== */
.stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  position:relative;
  padding:32px 14px;
}

/* grid overlay */
.bg-grid{
  position:absolute;
  inset:0;
  opacity:.35;
  background:
    linear-gradient(rgba(90,180,255,.08) 1px, transparent 1px) 0 0/ 40px 40px,
    linear-gradient(90deg, rgba(90,180,255,.08) 1px, transparent 1px) 0 0/ 40px 40px;
  pointer-events:none;
}

/* simple candles */
.bg-candles{
  position:absolute;
  inset:-80px -40px;
  opacity:.55;
  pointer-events:none;
  filter: blur(.2px);
  background:
    radial-gradient(circle at 15% 25%, rgba(0,255,160,.18), transparent 40%),
    radial-gradient(circle at 75% 20%, rgba(255,80,80,.15), transparent 42%),
    radial-gradient(circle at 60% 70%, rgba(0,190,255,.14), transparent 45%);
}
.bg-candles::before{
  content:"";
  position:absolute; inset:0;
  opacity:.6;
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      rgba(0,255,160,.5) 4% 4.8%,
      transparent 4.8% 9%,
      rgba(255,90,90,.45) 9% 9.7%,
      transparent 9.7% 14%,
      rgba(0,255,160,.5) 14% 14.8%,
      transparent 14.8% 19%,
      rgba(0,190,255,.5) 19% 19.7%,
      transparent 19.7% 100%);
  mask: linear-gradient(#000, transparent 78%);
}

/* ===== board ===== */
.board{
  width:min(760px, 96vw);
  position:relative;
  z-index:2;
}

/* header text like the image */
.title{
  text-align:center;
  margin-bottom:14px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.title-row{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.title-gold{
  font-weight:900;
  letter-spacing:.06em;
  font-size: clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #fff2b5 0%, #ffd56a 25%, #ffb02a 55%, #b56a12 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(255,190,60,.25);
}
.title-silver{
  font-weight:900;
  letter-spacing:.06em;
  font-size: clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #ffffff 0%, #e7eefc 22%, #9aa7b9 60%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.subtitle{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.subtitle-text{
  padding:10px 22px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffe6a8;
  background: linear-gradient(180deg, rgba(30,15,0,.9), rgba(15,8,0,.65));
  border: 1px solid rgba(255,200,90,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.subtitle-cap{
  height:2px;
  width:90px;
  background: linear-gradient(90deg, transparent, rgba(255,190,60,.9), transparent);
  filter: drop-shadow(0 0 10px rgba(255,190,60,.35));
}

/* ===== neon frame ===== */
.frame{
  position:relative;
  border-radius:22px;
  padding:18px;
  background: linear-gradient(180deg, rgba(10,22,36,.72), rgba(5,10,18,.78));
  box-shadow: var(--shadow);
  border: 1px solid rgba(120,200,255,.18);
}
.frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background:
    linear-gradient(90deg, rgba(87,214,255,.85), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(87,214,255,.85));
  opacity:.55;
  filter: blur(6px);
  z-index:-1;
}
.frame::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:18px;
  border: 2px solid rgba(87,214,255,.22);
  box-shadow: inset 0 0 22px rgba(87,214,255,.12);
  pointer-events:none;
}

/* ===== rows ===== */
.rows{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.row{
  display:grid;
  grid-template-columns: 86px 58px 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.row::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 85% 35%, rgba(255,255,255,.12), transparent 55%);
  pointer-events:none;
}

.name{
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight:900;
  letter-spacing:.02em;
}
.handle{
  font-size: clamp(14px, 2vw, 18px);
  font-weight:700;
  opacity:.9;
  white-space:nowrap;
}

/* rank badge */
.rank{
  width:66px;
  height:46px;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:26px;
  border-radius:12px;
  position:relative;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
.rank::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22);
  pointer-events:none;
}

/* emblem icons */
.emblem{
  width:44px;
  height:44px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  box-shadow: inset 0 0 20px rgba(0,0,0,.35);
}
.emblem::before{
  font-size:22px;
  content:"";
}

/* row themes (matching the image colors) */
.row-1{
  background: linear-gradient(90deg, rgba(255,178,55,.28), rgba(60,30,0,.35));
  border-color: rgba(255,190,90,.28);
}
.row-2{
  background: linear-gradient(90deg, rgba(190,200,220,.18), rgba(12,18,28,.4));
  border-color: rgba(190,200,220,.22);
}
.row-3{
  background: linear-gradient(90deg, rgba(255,165,60,.18), rgba(35,18,0,.35));
  border-color: rgba(255,165,60,.22);
}
.row-4{
  background: linear-gradient(90deg, rgba(0,255,140,.14), rgba(10,22,14,.42));
  border-color: rgba(0,255,140,.22);
}
.row-5{
  background: linear-gradient(90deg, rgba(255,70,70,.16), rgba(35,10,10,.42));
  border-color: rgba(255,70,70,.22);
}

/* rank colors */
.rank-1{ background: linear-gradient(180deg, #ffe7a0, #ffb52f, #b26b12); color:#2a1400; }
.rank-2{ background: linear-gradient(180deg, #f4f7ff, #c8d2df, #6a7685); color:#08121d; }
.rank-3{ background: linear-gradient(180deg, #ffd59b, #ffa92d, #9b4f05); color:#271200; }
.rank-4{ background: linear-gradient(180deg, #a1ffd3, #2fe58b, #08703e); color:#02150b; }
.rank-5{ background: linear-gradient(180deg, #ffb0b0, #ff4d4d, #7a1010); color:#190202; }

/* emblem glyphs */
.crown::before{ content:"👑"; }
.star::before{ content:"⭐"; }
.wolf::before{ content:"🐺"; }
.chart::before{ content:"📈"; }
.target::before{ content:"🎯"; }

/* footer note */
.note{
  text-align:center;
  margin-top:12px;
  opacity:.85;
  font-weight:650;
}

/* ===== decorations ===== */
.decor{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.95;
}
.bull{
  width:min(130px, 22vw);
  left: max(10px, 4vw);
  top: 24px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.phone{
  width:min(220px, 40vw);
  right: max(-10px, 2vw);
  bottom: 10px;
  transform: rotate(10deg);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55));
}

/* coins made with CSS if you don’t use images */
.coins{
  width:180px;
  height:140px;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.45));
}
.coins-top{
  right: max(12px, 2vw);
  top: 54px;
}
.coins-bottom{
  left: max(10px, 2vw);
  bottom: 40px;
}
.coins::before,
.coins::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), transparent 35%),
    radial-gradient(circle at 60% 65%, rgba(0,0,0,.25), transparent 45%),
    linear-gradient(180deg, #fff2b5, #ffbf3d 40%, #b46a12 100%);
  border-radius: 24px;
  clip-path: polygon(0 25%, 20% 10%, 55% 10%, 75% 25%, 75% 75%, 55% 90%, 20% 90%, 0 75%);
  opacity:.95;
}
.coins::after{
  transform: translate(28px, 18px);
  opacity:.8;
  filter: blur(.2px);
}

/* responsive */
@media (max-width:560px){
  .row{
    grid-template-columns: 70px 46px 1fr;
    grid-template-rows: auto auto;
  }
  .handle{
    grid-column: 3 / 4;
    grid-row: 2;
    opacity:.85;
  }
}