/* High-converting Brawl Stars reward-board redesign */
:root {
  --arena-ink: #070812;
  --arena-panel: #101522;
  --arena-panel-2: #182131;
  --arena-gold: #ffd200;
  --arena-cyan: #00d9ff;
  --arena-red: #ff3d5d;
  --arena-green: #23e6a8;
  --arena-violet: #7c5cff;
  --arena-text: #f9fbff;
  --arena-soft: #aeb8c9;
}

body {
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 217, 255, .16), transparent 32rem),
    radial-gradient(circle at 86% 8%, rgba(255, 61, 93, .18), transparent 30rem),
    linear-gradient(180deg, #070812 0%, #101522 48%, #070812 100%);
  color: var(--arena-text);
}

.site-header {
  background: rgba(7, 8, 18, .88);
  border-bottom: 1px solid rgba(255, 210, 0, .38);
  backdrop-filter: blur(14px);
}

.logo {
  font-size: 22px;
}

.hero {
  min-height: min(660px, 84vh);
  display: grid;
  align-items: end;
  text-align: left;
  padding: 120px 20px 42px;
  background:
    linear-gradient(90deg, rgba(7, 8, 18, .94) 0%, rgba(7, 8, 18, .72) 46%, rgba(7, 8, 18, .22) 100%),
    url("../images/og-image.webp") center right / cover no-repeat;
  border-bottom: 1px solid rgba(0, 217, 255, .18);
}

.hero::before {
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 8, 18, .92) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 68px);
}

.hero-content {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.hero-badge {
  background: rgba(35, 230, 168, .12);
  border-color: rgba(35, 230, 168, .75);
  color: var(--arena-green);
  box-shadow: 0 0 28px rgba(35, 230, 168, .12);
}

.hero-title {
  max-width: 700px;
  font-size: clamp(42px, 9vw, 104px);
  line-height: .88;
  color: var(--arena-text);
  text-shadow:
    0 6px 0 rgba(0, 0, 0, .42),
    0 0 40px rgba(255, 210, 0, .16);
  margin-bottom: 18px;
}

.hero-title::first-line {
  color: var(--arena-gold);
}

.hero-subtitle {
  margin: 0 0 26px;
  max-width: 610px;
  color: #d6ddeb;
  font-size: clamp(16px, 2vw, 19px);
}

.hero-stats {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(16, 21, 34, .8);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  backdrop-filter: blur(16px);
}

.stat-num {
  color: var(--arena-gold);
}

.filter-section {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: rgba(7, 8, 18, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
}

.filter-bar {
  justify-content: center;
}

.filter-btn {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: #dbe4f4;
}

.filter-btn:hover {
  border-color: var(--arena-gold);
  color: var(--arena-gold);
}

.filter-btn.active {
  color: #070812;
  background: linear-gradient(135deg, var(--arena-gold), #ff9f1c);
  border-color: transparent;
}

.main-content {
  padding-top: 42px;
}

.section-header {
  align-items: end;
}

.section-title {
  border: 0;
  padding: 0;
  color: var(--arena-text);
  font-size: clamp(28px, 4vw, 46px);
}

.section-updated {
  color: var(--arena-soft);
}

.qr-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

.qr-card {
  min-height: 250px;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    var(--arena-panel);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}

.qr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 210, 0, .18), transparent 38%, rgba(0, 217, 255, .15));
  opacity: 0;
  transition: opacity .2s ease;
}

.qr-card:hover::before {
  opacity: 1;
}

.qr-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 210, 0, .74);
}

.qr-card-img-wrap {
  width: 104px;
  height: 104px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 5px rgba(7, 8, 18, .08);
}

.qr-card-img-wrap img,
.qr-card-placeholder {
  width: 104px;
  height: 104px;
}

.qr-card-name {
  font-size: 15px;
  color: var(--arena-text);
}

.qr-card-reward {
  font-size: 12px;
  color: var(--arena-soft);
}

.type-tag {
  border-radius: 999px;
  padding: 5px 10px;
}

.coming-soon-banner,
.howto-strip {
  background:
    linear-gradient(135deg, rgba(255, 210, 0, .08), rgba(0, 217, 255, .08)),
    var(--arena-panel);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
}

.howto-title,
.csb-content h3 {
  color: var(--arena-gold);
}

.site-footer {
  background: #070812;
}

@media (max-width: 760px) {
  .hero {
    min-height: 620px;
    padding-top: 92px;
    background:
      linear-gradient(180deg, rgba(7, 8, 18, .58) 0%, rgba(7, 8, 18, .96) 62%),
      url("../images/og-image.webp") center top / cover no-repeat;
  }

  .hero-stats {
    width: 100%;
    justify-content: space-around;
  }

  .stat {
    padding: 0 8px;
  }

  .filter-section {
    position: static;
  }

  .qr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-card {
    min-height: 230px;
  }
}