@charset "UTF-8";

:root{
  --navy-950:#040c1a;
  --navy-900:#07152b;
  --navy-800:#0b1f3f;
  --green-700:#0f3a2f;
  --green-600:#145241;
  --gold-500:#d7b35a;
  --gold-400:#f1d08a;
  --silver-400:#c9d1da;
  --bronze-500:#c07b4a;
  --text:#eef3ff;
  --muted:rgba(238,243,255,.72);
  --glass:rgba(7,21,43,.48);
  --stroke:rgba(241,208,138,.18);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
  --banner-space:92px;
  --maxw:430px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(215,179,90,.22), transparent 55%),
    radial-gradient(900px 560px at 110% 10%, rgba(20,82,65,.35), transparent 58%),
    linear-gradient(180deg, rgba(4,12,26,.92), rgba(4,12,26,.82));
  background-attachment: fixed;
  padding-bottom: calc(var(--banner-space) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    url("../../background.jpg") center/cover no-repeat;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-size:auto, 160px 160px;
  background-repeat:no-repeat, repeat;
  background-position:center, center;
  mix-blend-mode: normal;
  pointer-events:none;
}

.wrap{
  width:min(var(--maxw), 100%);
  margin:0 auto;
  padding:16px 16px 22px;
}

.hero{
  margin-top:6px;
  padding:18px 16px 16px;
  border:1px solid rgba(241,208,138,.14);
  border-radius:22px;
  background: linear-gradient(180deg, rgba(7,21,43,.62), rgba(7,21,43,.40));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20px -40px auto -40px;
  height:140px;
  background: radial-gradient(closest-side at 20% 50%, rgba(241,208,138,.22), transparent 68%);
  pointer-events:none;
}

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

.hero--logoOnly{
  margin-top:10px;
  padding:10px 0 0;
  border:0;
  background: transparent;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
}

.hero--logoOnly::before{display:none}

.hero--logoOnly .hero__top{
  justify-content:center;
  gap:0;
}

.hero-logo{
  display:block;
  width:min(220px, 70vw);
  height:auto;
  margin:0 auto;
}

.emblem{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(241,208,138,.22);
  background:
    radial-gradient(circle at 30% 30%, rgba(241,208,138,.22), transparent 50%),
    linear-gradient(135deg, rgba(20,82,65,.55), rgba(7,21,43,.58));
  display:grid;
  place-items:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

.title{
  line-height:1.1;
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}

.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.board{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

.card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: #4f6c4c;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity:0;
  animation: rise .55s ease forwards;
}

main.board > article.card{
  display:grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items:center;
}

.card:nth-child(1){animation-delay: .02s}
.card:nth-child(2){animation-delay: .05s}
.card:nth-child(3){animation-delay: .08s}
.card:nth-child(4){animation-delay: .11s}
.card:nth-child(5){animation-delay: .14s}
.card:nth-child(6){animation-delay: .17s}
.card:nth-child(7){animation-delay: .20s}
.card:nth-child(8){animation-delay: .23s}
.card:nth-child(9){animation-delay: .26s}
.card:nth-child(10){animation-delay:.29s}

@keyframes rise{
  to{transform: translateY(0); opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .card{animation:none; transform:none; opacity:1}
}

.card--premium{
  padding:14px 14px;
  border-color: rgba(241,208,138,.20);
}

.card--rank1{
  background: #3fb332;
  border-color: rgba(20, 67, 25, 0.32);
  box-shadow: 0 14px 36px rgba(0,0,0,.42), 0 0 0 1px rgba(241,208,138,.12) inset;
}

.card--rank1::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:calc(var(--radius) + 2px);
  background: radial-gradient(closest-side at 18% 20%, rgba(241,208,138,.14), transparent 65%);
  pointer-events:none;
}

.card--rank2{
  background: #297e22;
  border-color: rgba(201,209,218,.28);
}

.card--rank3{
  background: #24681e;
  border-color: rgba(192,123,74,.30);
}

.rank{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.2px;
  background: rgba(4, 26, 11, 0.55);
  border:1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}

.card--rank1 .rank{
  background: linear-gradient(135deg, rgba(241,208,138,.28), rgba(8, 26, 4, 0.55));
  border-color: rgba(241,208,138,.28);
}

.card--rank2 .rank{
  background: linear-gradient(135deg, rgba(201,209,218,.24), rgba(8, 26, 4, 0.55));
  border-color: rgba(201,209,218,.26);
}

.card--rank3 .rank{
  background: linear-gradient(135deg, rgba(192,123,74,.24), rgba(8, 26, 4, 0.55));
  border-color: rgba(192,123,74,.26);
}

.avatar{
  width:44px;
  height:44px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(4,12,26,.55);
  flex: 0 0 auto;
  display:grid;
  place-items:center;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar__fallback{
  width:28px;height:28px;opacity:.8;
}

.meta{min-width:0; flex:1 1 auto}
.name{
  margin:0;
  font-size:14px;
  font-weight:750;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hint{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
}

.points{
  justify-self:end;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:120px;
}
.points__stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.points__value{
  font-weight:900;
  font-size:16px;
}
.points__label{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.2px;
  text-transform:uppercase;
}

.premium-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  flex: 0 0 auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.40));
}

.card--rank1 .premium-icon{
  width:40px;
  height:40px;
}

.footer-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(7,21,43,.38);
  color:var(--muted);
  font-size:12px;
}

.banner{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  z-index:50;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, transparent, rgba(4,12,26,.72));
  pointer-events:none;
}

.banner__link{
  display:block;
  pointer-events:auto;
}

.hero a{
  display:inline-block;
  text-decoration:none;
}

.banner__img{
  width:100%;
  height:auto;
  display:block;
  max-height: 130px;
  object-fit: contain;
}

.banner-spacer{
  height: var(--banner-space);
}

.admin-link{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}
.admin-link a{
  color: rgba(241,208,138,.92);
  text-decoration:none;
  font-size:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(241,208,138,.18);
  background: rgba(7,21,43,.35);
  backdrop-filter: blur(10px);
}
.admin-link a:active{transform: translateY(1px)}