@font-face {
  font-family: 'Avengeance Hero Avenger';
  src: url('../fonts/Avengeance_Hero_Avenger.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avengeance Hero Avenger';
  src: url('../fonts/Avengeance_Hero_Avenger_AT.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Avengeance Hero Avenger';
  src: url('../fonts/Avengeance_Hero_Avenger_BD.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avengeance Hero Avenger';
  src: url('../fonts/Avengeance_Hero_Avenger_BI.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Chunko Bold Demo';
  src: url('../fonts/Chunko_Bold.woff2') format('woff2'),
       url('../fonts/Chunko_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-navy: #2B3990;
  --near-black: #101010;
  --deep-navy: #10187C;
  --howto-navy: #0F266F;
  --vuma-yellow: #FFF200;
  --oxblood: #7B1125;
  --cream: #FFFFFA;
  --light-grey: #EDEDED;
  --mid-grey: #BBBBBB;
  --sky-blue: #7DD0FA;
  --white: #FFFFFF;
  --body-dark: #2E2E2D;
}

.sport-page {
  background-color: var(--cream);
  color: var(--body-dark);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.sport-page--dark {
  background-color: var(--deep-navy);
  color: var(--white);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.sport-navbar {
  background: var(--near-black);
  padding: 14px 0;
}

.sport-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sport-badge {
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
}

.sport-badge img {
  height: 48px;
  width: auto;
}

.sport-navbar .nav-link {
  color: var(--white) !important;
  font-family: var(--font-body);
  font-weight: 500;
}

.sport-navbar .nav-link:hover {
  color: var(--sky-blue) !important;
}

.sport-navbar .nav-link.active {
  color: var(--sky-blue) !important;
  font-weight: 700;
}

.sport-navbar .btn-sport-primary {
  background: var(--oxblood);
  color: var(--white);
  font-family: var(--font-btn);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
}

.sport-navbar .btn-sport-primary:hover {
  filter: brightness(1.1);
}

/* Leaderboard Title Styling */
/* ===================== Trivia (play) page ===================== */
.sport-trivia,
.sport-instructions,
.sport-congrats,
.sport-leaderboard {
  background: linear-gradient(180deg, #434f9c 0%, #171b36 100%);
  color: var(--cream);
  isolation: isolate;
}

.st-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.st-coins {
  position: absolute;
  left: -161px;
  top: 322px;
  width: 920px;
  height: 899px;
  background: url('../images/sport/trivia-coins.webp') center / cover no-repeat;
  mix-blend-mode: soft-light;
}

/* Figma: photo flipped horizontally, faded by a linear-gradient alpha mask */
.st-player {
  position: absolute;
  right: -43px;
  top: 339px;
  width: 485px;
  height: 678px;
  overflow: hidden;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
  -webkit-mask: url('../images/sport/trivia-player-mask.svg') 42.975px -17.459px / 419px 663.417px no-repeat;
  mask: url('../images/sport/trivia-player-mask.svg') 42.975px -17.459px / 419px 663.417px no-repeat;
}

.st-player img {
  position: absolute;
  left: -21%;
  top: -11.3%;
  width: 136.8%;
  height: 125.84%;
  max-width: none;
}

.st-main {
  position: relative;
  z-index: 1;
  padding: 73px 20px 60px;
}

.st-topbar {
  position: relative;
  max-width: 1076px;
  height: 45px;
  margin: 0 auto;
}

.st-back {
  position: absolute;
  left: 0;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  text-decoration: none;
}

.st-back:hover { color: var(--cream); }

.st-points {
  position: absolute;
  left: calc(50% - 186px);
  top: 1px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #eeeeee;
  border: 1px solid var(--vuma-yellow);
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}

.st-points-label {
  font-family: 'Chunko Bold Demo', sans-serif;
  font-weight: 700;
  color: var(--oxblood);
}

.st-points-value {
  display: flex;
  align-items: center;
  gap: 1px;
  font-family: 'Poppins', sans-serif;
  color: var(--near-black);
}

.st-points-value img { width: 24px; height: 24px; }

.st-score {
  position: absolute;
  left: calc(50% + 82px);
  top: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  white-space: nowrap;
}

.st-score-label {
  font-family: 'Chunko Bold Demo', sans-serif;
  font-weight: 700;
  color: var(--near-black);
  margin-right: 8px;
}

.st-score-value {
  font-family: 'Poppins', sans-serif;
  color: var(--cream);
}

.st-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: #f6f6f6;
  border: 3px solid var(--vuma-yellow);
  border-radius: 50%;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.st-tracker {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 4px;
  margin: 76px 0 56px;
}

.st-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #eeeeee;
  border: 2px solid #8b4c24;
  border-radius: 50%;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.st-step.is-current { background: var(--vuma-yellow); }
.st-step img { width: 24px; height: 24px; }

.st-quiz {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(795px, 100%);
  margin: 0 auto;
}

.st-bubble {
  position: relative;
  isolation: isolate;
  min-height: 201px;
  padding: 50px 48px 40px;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

/* Bubble SVG includes its drop shadow, so it overhangs the box (Figma insets) */
.st-bubble::before {
  content: '';
  position: absolute;
  inset: -1.68% -3.46% -13.04% -0.32%;
  z-index: -1;
  background: url('../images/sport/question-bubble.svg') 0 0 / 100% 100% no-repeat;
}

.st-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 43px;
}

.st-answer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  background: var(--cream);
  border: 0;
  border-radius: 9px;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.st-answer:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }

.st-answer.selected {
  background: #dce706;
  box-shadow: 0 0 15px rgba(39, 38, 27, 0.6);
  transform: scale(0.98);
}

.st-badge {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.st-badge.a { background: #00ffc3; }
.st-badge.b { background: #2b7890; color: var(--cream); }
.st-badge.c { background: #fdc70c; }
.st-badge.d { background: #00ccff; }

.st-answer-text { padding: 6px 8px; }

.st-navbar, .vuma-nav { padding: 8px 0; }
.st-navbar .container-fluid, .vuma-nav .container-fluid { padding: 0 24px; }
.st-navbar .navbar-brand, .vuma-nav .navbar-brand { margin: 0; padding: 0; }
.st-navbar .sport-badge img, .vuma-nav .sport-badge img { height: 39px; }
.st-navbar .navbar-toggler, .vuma-nav .navbar-toggler { padding: 0; box-shadow: none; }
.st-navbar .navbar-toggler-icon, .vuma-nav .navbar-toggler-icon {
  width: 40px;
  height: 40px;
  background-image: url('../images/sport/menu.svg');
}

@media (max-width: 767.98px) {
  .st-coins {
    left: -122px;
    top: 572px;
    width: 355px;
    height: 347px;
    background-image: url('../images/sport/trivia-coins-mobile.webp');
  }

  .st-player {
    left: calc(25% + 44px);
    right: auto;
    top: 602px;
    width: 253.455px;
    height: 354.556px;
    -webkit-mask-position: 22.467px -9.127px;
    mask-position: 22.467px -9.127px;
    -webkit-mask-size: 219.053px 346.833px;
    mask-size: 219.053px 346.833px;
  }

  .st-main { padding: 36px 24px 60px; }

  .st-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
  }

  .st-back { display: none; }

  .st-points,
  .st-score {
    position: static;
    transform: none;
    font-size: 14px;
  }

  .st-points-value img { width: 16px; height: 16px; }

  .st-score { gap: 12px; }
  .st-score-label { color: #1d1012; margin-right: 5.5px; }

  .st-timer {
    width: 39px;
    height: 39px;
    border-width: 2px;
  }

  .st-tracker {
    gap: 8px;
    margin: 32px 0 48px;
  }

  .st-step {
    width: 25px;
    height: 25px;
    border-width: 1.335px;
    font-size: 14px;
  }

  .st-step img { width: 16px; height: 16px; }

  .st-quiz { gap: 32px; }

  .st-bubble {
    min-height: 98.7px;
    padding: 24.5px 28px 28px;
    font-size: 16px;
  }

  .st-bubble::before {
    inset: -1.47% -3.46% -11.15% -0.34%;
    background-image: url('../images/sport/question-bubble-mobile.svg');
  }

  .st-answers {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .st-answer {
    gap: 4px;
    padding: 6px;
    border-radius: 4px;
    font-size: 16px;
  }

  .st-badge {
    padding: 3.447px 6.893px;
    border-radius: 3.447px;
  }

  .st-answer-text { padding: 2.585px 3.447px; }
}


/* ===================== Instructions page ===================== */
.si-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.si-decor > div {
  position: absolute;
  overflow: hidden;
}

.si-decor img {
  position: absolute;
  max-width: none;
}

.si-rays {
  left: 0;
  top: 56px;
  width: 100%;
  height: 1036px;
  mix-blend-mode: soft-light;
}

.si-rays img {
  left: 0;
  top: -74.1%;
  width: 100%;
  height: 248.21%;
}

.si-rays::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #0d112c 4.792%, rgba(29, 38, 95, 0.6) 44.459%, #0d112c 100.83%);
}

.si-cash {
  left: -201px;
  top: 637px;
  width: 1164px;
  height: 461px;
  mix-blend-mode: overlay;
}

.si-cash img {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.si-player {
  left: calc(50% + 72px);
  top: 375px;
  width: 583px;
  height: 816px;
  mix-blend-mode: soft-light;
}

.si-player img {
  left: -9.94%;
  top: -9.52%;
  width: 124.53%;
  height: 119.49%;
}

.si-main {
  position: relative;
  z-index: 1;
  padding: 48px 20px 80px;
}

.si-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 858px;
  margin: 0 auto;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-align: center;
}

.si-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.si-title {
  margin: 0;
  color: var(--vuma-yellow);
  font-family: 'Chunko Bold Demo', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.si-copy p { margin: 0; }
.si-copy p + p, .si-list + p { margin-top: 24px; }

.si-list {
  margin: 0;
  padding: 0;
  list-style: disc inside;
}

.si-list b { font-style: italic; }

.si-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

.si-inputs {
  display: contents;
}

.si-input {
  padding: 16px 18px;
  background: var(--cream);
  border: 2px solid var(--near-black);
  border-radius: 23px;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  outline: none;
}

.si-input::placeholder { color: rgba(0, 0, 0, 0.4); }
.si-input:focus { border-color: var(--vuma-yellow); }
.si-input-name { width: 344px; }
.si-input-phone { width: 332px; }

.si-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--brand-navy);
  border: 4px solid var(--cream);
  border-radius: 32px;
  color: var(--cream);
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 24px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.si-btn:hover { color: var(--cream); filter: brightness(1.15); }
.si-btn--subscribe { background: var(--oxblood); }
.si-btn-mobile { display: none; }

.si-error { margin: 8px 0 0; color: #ff8a8a; }
.si-status { margin: 8px 0 0; }
.si-reset { color: rgba(255, 250, 250, 0.7); font-size: 14px; }
.si-reset:hover { color: var(--cream); }

.si-slogan {
  width: 940px;
  max-width: 100%;
  margin: 115px auto 0;
  color: var(--cream);
  font-family: 'Avengeance Hero Avenger', sans-serif;
  font-size: 88px;
  line-height: 1.3;
}

@media (min-width: 992px) {
  .vuma-nav { padding: 6px 0; }
  .vuma-nav .container-fluid { padding: 0 64px; }
  .vuma-nav .sport-badge img { height: 57px; }
  .vuma-nav .navbar-nav { gap: 40px; }
  .vuma-nav .nav-link {
    padding: 8px !important;
    font-size: 18px;
    font-weight: 400;
  }
  .vuma-nav .nav-link.active { font-weight: 700; }
  .vuma-nav .btn-sport-primary {
    padding: 12px 32px;
    border-radius: 8px;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 16px;
    font-weight: 400;
  }
}

@media (max-width: 991.98px) {
  .si-form { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
  .si-rays {
    height: 788px;
  }

  .si-rays img {
    left: -24.19%;
    top: -23.27%;
    width: 148.38%;
    height: 131.47%;
  }

  .si-rays::after {
    background: linear-gradient(-89.4deg, #0d112c 30.923%, rgba(29, 38, 95, 0.6) 47.555%, #0d112c 160.58%);
  }

  .si-cash {
    left: -78px;
    top: 676px;
    width: 469px;
    height: 186px;
  }

  .si-player {
    left: calc(25% + 47.5px);
    top: 490px;
    width: 239px;
    height: 335px;
  }

  .si-main { padding: 35px 24px 60px; }

  .si-hero {
    align-items: flex-start;
    font-size: 14px;
    text-align: left;
  }

  .si-intro { gap: 8px; align-items: flex-start; }
  .si-title { font-size: 32px; }

  .si-list {
    padding-left: 21px;
    list-style-position: outside;
  }

  .si-copy p + p, .si-list + p { margin-top: 21px; }

  .si-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: 0;
  }

  .si-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .si-input,
  .si-input-name,
  .si-input-phone {
    width: 100%;
    padding: 12px 18px;
    border-color: #8b4c24;
    font-size: 14px;
  }

  .si-btn {
    padding: 10px 16px;
    border-color: #f6f6f6;
    font-size: 16px;
  }

  .si-btn-desktop { display: none; }
  .si-btn-mobile { display: inline; }

  .si-slogan { display: none; }
}


/* ===================== Home page ===================== */
.sh-display {
  margin: 0;
  color: var(--brand-navy);
  font-family: 'Avengeance Hero Avenger', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

.sh-display-black { color: var(--near-black); }

.sh-desc {
  margin: 0;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
}

.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--oxblood);
  border-radius: 8px;
  color: var(--cream);
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
}

.sh-btn:hover { color: var(--cream); filter: brightness(1.15); }

.sh-btn--pill {
  padding: 10px 16px;
  background: var(--brand-navy);
  border: 4px solid #f6f6f6;
  border-radius: 32px;
}

/* Hero */
.sh-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 727px;
  padding: 32px 24px;
}

.sh-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 521px;
}

.sh-hero-text .sh-display { font-size: 72px; }
.sh-hero-text .sh-desc { max-width: 464px; }

.sh-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-collage {
  position: relative;
  flex-shrink: 0;
  width: 683px;
  height: 663px;
}

.sh-collage > * { position: absolute; }

.sh-accent { left: 179px; top: 35px; width: 282px; height: 494px; }

/* Figma: tennis photo flipped horizontally; both side players fade out via gradient alpha masks */
.sh-tennis {
  left: -4px;
  top: 13px;
  width: 361px;
  height: 517px;
  transform: scaleX(-1);
  -webkit-mask: url('../images/sport/home-tennis-mask.svg') 4px -13px / 346px 543px no-repeat;
  mask: url('../images/sport/home-tennis-mask.svg') 4px -13px / 346px 543px no-repeat;
}

.sh-basketball {
  left: 322px;
  top: 48px;
  width: 361px;
  height: 517px;
  -webkit-mask: url('../images/sport/home-basketball-mask.svg') 17px -26px / 312px 519px no-repeat;
  mask: url('../images/sport/home-basketball-mask.svg') 17px -26px / 312px 519px no-repeat;
}

.sh-tennis img,
.sh-basketball img { width: 100%; height: 100%; }
.sh-tennis img { object-fit: cover; }

.sh-football {
  left: 40px;
  top: 84px;
  width: 455px;
  height: 579px;
  filter: drop-shadow(8px -20px 28px rgba(0, 0, 0, 0.15));
}

/* Ultimate challenge */
.sh-challenge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 85px;
  min-height: 727px;
  padding: 32px 24px;
  background: var(--light-grey);
}

.sh-visual {
  position: relative;
  flex-shrink: 0;
  width: 705px;
  height: 663px;
}

.sh-visual > * { position: absolute; }
.sh-vu { left: 0; top: 0; width: 562.286px; height: 312.468px; }
.sh-ma { left: 0; top: 350.53px; width: 705.268px; height: 312.468px; }

.sh-runner {
  left: 338px;
  top: 21px;
  width: 457px;
  height: 620px;
  object-fit: cover;
  filter: drop-shadow(-24px 24px 44px rgba(0, 0, 0, 0.2));
}

.sh-challenge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 426px;
}

.sh-challenge-text .sh-display { font-size: 64px; }

/* How to win */
.sh-htw {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 754px;
  padding: 32px 24px;
  background: linear-gradient(180deg, var(--brand-navy) 0%, #17257c 100%);
}

.sh-htw-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

.sh-htw .sh-display {
  color: var(--cream);
  font-size: 64px;
  text-align: center;
}

.sh-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Slanted glass card: blurred backdrop clipped to the outline SVG's shape */
.sh-card {
  position: relative;
  isolation: isolate;
  width: 292px;
  height: 148px;
  padding: 18px 34px 0;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.sh-card::before,
.sh-card::after {
  content: '';
  position: absolute;
  z-index: -1;
}

.sh-card::before {
  inset: 0;
  clip-path: polygon(7.3% 0, 100% 0, 92.7% 100%, 0 100%);
  -webkit-backdrop-filter: blur(9.5px);
  backdrop-filter: blur(9.5px);
}

.sh-card::after {
  inset: -1.35% -0.79%;
  background: url('../images/sport/home-card.svg') 0 0 / 100% 100% no-repeat;
}

.sh-card p { margin: 0; width: 224px; }

/* Call to action */
.sh-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 144px 24px 148px;
  text-align: center;
}

.sh-cta .sh-display {
  max-width: 594px;
  font-size: 64px;
}

/* Footer: logo mark + SPORTS badge, composed like the Figma lockup */
.sh-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 513px;
  overflow: hidden;
  background: var(--near-black);
}

.sh-lockup {
  position: relative;
  flex-shrink: 0;
  width: 730.4px;
  height: 274.3px;
}

.sh-lockup > * { position: absolute; }
.sh-lockup-mark { left: 0; top: 0; z-index: 1; width: 365.3px; height: 274.3px; }

.sh-lockup-badge {
  left: 341px;
  top: 163.4px;
  width: 389.4px;
  height: 100.9px;
  background: #4656b9;
  border: 1.5px solid var(--cream);
}

.sh-lockup-word { left: 379.5px; top: 187.5px; width: 312.6px; height: 56.2px; }

@media (min-width: 992px) and (max-width: 1279.98px) {
  .sh-collage, .sh-visual { zoom: 0.72; }
  .sh-challenge { gap: 48px; }
  .sh-hero-text .sh-display { font-size: 60px; }
  .sh-challenge-text .sh-display { font-size: 52px; }
}

@media (max-width: 991.98px) {
  .sh-desc { font-size: 14px; }

  .sh-hero {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 32px;
    min-height: 0;
    padding: 40px 24px 32px;
  }

  .sh-hero-text { gap: 24px; flex-basis: auto; }
  .sh-hero-text .sh-display { font-size: 48px; }
  .sh-hero-text .sh-desc { max-width: none; }
  .sh-collage { zoom: 0.5253; }

  .sh-challenge {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
    min-height: 0;
    padding: 56px 24px;
  }

  .sh-challenge-text { flex-basis: auto; }
  .sh-challenge-text .sh-display { font-size: 48px; }

  .sh-visual {
    width: 342px;
    max-width: 100%;
    height: 352.8px;
    margin: 0 auto;
  }

  .sh-vu { width: 341.905px; height: 190px; }
  .sh-ma { top: 202px; width: 340.401px; height: 150.814px; }

  .sh-runner {
    left: 50%;
    top: 47px;
    width: 220.557px;
    height: 299.268px;
    transform: translateX(-50%);
    filter: drop-shadow(-11.584px 11.584px 21.237px rgba(0, 0, 0, 0.2));
  }

  .sh-htw {
    justify-content: flex-start;
    min-height: 1042px;
    padding: 64px 24px;
  }

  .sh-cards {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .sh-cta {
    gap: 16px;
    padding: 56px 24px;
  }

  .sh-cta .sh-display { font-size: 48px; }

  .sh-footer { min-height: 307px; }
  .sh-lockup { zoom: 0.3542; }
}


/* ===================== Congratulations (score) page ===================== */
/* Reuses .si-decor / .si-rays from the instructions page; rays start at the very top here */
.sc-rays { top: 0; }

.sc-watermark {
  left: -21px;
  top: 430px;
  width: 769px;
  height: 579px;
  object-fit: cover;
  mix-blend-mode: saturation;
  opacity: 0.2;
}

.sc-main {
  position: relative;
  z-index: 1;
  padding: 79px 20px 80px;
}

.sc-back {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1076px;
  margin: 0 auto;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  text-decoration: none;
}

.sc-back:hover { color: var(--cream); }

.sc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: min(672px, 100%);
  margin: 99px auto 0;
  text-align: center;
}

.sc-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sc-title {
  margin: 0;
  color: var(--vuma-yellow);
  font-family: 'Chunko Bold Demo', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  text-shadow: 0 8px 4px rgba(139, 76, 36, 0.4);
}

.sc-subtitle {
  margin: 0;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
}

.sc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}

.sc-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 8px;
  background: var(--cream);
  border-radius: 40px;
}

.sc-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 146px;
  height: 94px;
  padding: 8px 24px;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
}

.sc-stat dt { font-weight: 400; }

.sc-stat dd {
  order: -1;
  margin: 0;
  font-size: 32px;
  font-weight: 600;
}

.sc-stat--correct dd { color: #25d03e; }
.sc-stat--wrong dd { color: #ec1111; }
.sc-stat--points dd { color: var(--brand-navy); }

.sc-reward {
  margin: -32px 0 0;
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.sc-reward--muted { opacity: 0.7; }

.sc-actions {
  display: flex;
  gap: 27px;
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--cream);
  border: 2px solid #d5d4d4;
  border-radius: 32px;
  color: var(--near-black);
  font-family: 'Holtwood One SC', serif;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
}

.sc-btn:hover { color: var(--near-black); filter: brightness(0.95); }

.sc-btn--primary {
  min-width: 206px;
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--cream);
}

.sc-btn--primary:hover { color: var(--cream); filter: brightness(1.15); }

@media (max-width: 767.98px) {
  .sc-rays { top: 56px; }

  .sc-watermark {
    left: calc(50% - 5.5px);
    top: 450px;
    width: 399px;
    height: 301px;
    transform: translateX(-50%);
  }

  .sc-main { padding: 0 19px 60px; }
  .sc-back { display: none; }

  .sc-content {
    gap: 24px;
    width: min(352px, 100%);
    margin-top: 108px;
  }

  .sc-title {
    font-size: 32px;
    text-shadow: 0 4.079px 2.039px rgba(139, 76, 36, 0.4);
  }

  .sc-subtitle { font-size: 16px; }
  .sc-body { gap: 32px; }

  .sc-stats {
    gap: 8px;
    padding: 4px;
    border-radius: 20.394px;
  }

  .sc-stat {
    width: 80px;
    height: 48px;
    padding: 8px 0;
    font-size: 14px;
  }

  .sc-stat dd { font-size: 16px; }
  .sc-reward { margin-top: -16px; font-size: 14px; }
  .sc-actions { gap: 13.766px; }

  .sc-btn {
    padding: 8px 12px;
    border-width: 1.02px;
    border-radius: 16.315px;
    font-size: 14px;
  }

  .sc-btn--primary {
    min-width: 0;
    padding: 8px 24px;
  }
}


/* ===================== Leaderboard page ===================== */
/* Reuses .si-decor / .si-rays / .sc-rays for the rays layer */
.sl-star,
.sl-watermark {
  object-fit: cover;
  opacity: 0.2;
}

.sl-star { mix-blend-mode: luminosity; }
.sl-star--low { left: calc(50% + 138px); top: 535px; width: 474px; height: 474px; }
.sl-star--high { left: calc(50% + 337px); top: 128px; width: 319px; height: 319px; }

.sl-watermark {
  left: -37px;
  top: 423px;
  width: 769px;
  height: 579px;
  mix-blend-mode: saturation;
}

.sl-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 71px 20px 80px;
}

.sl-title {
  margin: 0;
  color: var(--vuma-yellow);
  font-family: 'Chunko Bold Demo', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: normal;
  text-shadow: 0 10px 4px rgba(139, 76, 36, 0.9);
}

.sl-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
  margin: 0;
  padding: 24px;
  background: var(--cream);
  border: 1.5px solid #d5d4d4;
  border-radius: 32px;
  list-style: none;
}

.sl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 484px;
  max-width: 100%;
  padding: 12px 20px;
  border: 0.755px solid #d5d4d4;
  border-radius: 24px;
  color: var(--near-black);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.sl-row--empty { justify-content: center; }

.sl-rank {
  flex-shrink: 0;
  width: 55px;
  font-weight: 600;
  text-align: center;
}

.sl-player {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 1 276px;
  min-width: 0;
}

/* Orange gradient ring (baked into the Figma avatar images) drawn around any avatar */
.sl-avatar {
  flex-shrink: 0;
  width: 34.5px;
  height: 34.5px;
  padding: 2.25px;
  margin: -2.25px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3903f 0%, #e83d39 100%);
  object-fit: cover;
}

.sl-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-points {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 14px;
  white-space: nowrap;
}

.sl-points img { width: 16px; height: 16px; }

@media (max-width: 767.98px) {
  .sl-star--high { display: none; }

  .sl-star--low {
    left: calc(50% - 8px);
    top: 55px;
    width: 214px;
    height: 214px;
  }

  .sl-watermark {
    left: calc(37.5% - 1.75px);
    top: 642px;
    width: 325px;
    height: 245px;
    transform: translateX(-50%);
  }

  .sl-main {
    gap: 16px;
    padding: 123px 20px 60px;
  }

  .sl-title {
    font-size: 42px;
    text-shadow: 0 6.629px 2.652px rgba(139, 76, 36, 0.9);
  }

  .sl-card {
    gap: 12px;
    padding: 16px;
    border-width: 0.994px;
    border-radius: 24px;
  }

  .sl-row {
    width: 305px;
    padding: 7px 4px;
    border-width: 0.5px;
    border-radius: 12px;
    font-size: 14px;
  }

  .sl-rank { width: 36.5px; }
  .sl-player { gap: 12px; flex-basis: 183px; }

  .sl-avatar {
    width: 22.9px;
    height: 22.9px;
    padding: 1.5px;
    margin: -1.5px;
  }

  .sl-points { padding: 0; }
}