/* =========================================
   GATE 100 CHALLENGE
   Public Landing
   ========================================= */


/* =========================================
   RESET / ROOT
   ========================================= */

:root {
  --bg:
    #f6f8fc;

  --surface:
    rgba(255, 255, 255, 0.88);

  --surface-solid:
    #ffffff;

  --text:
    #101828;

  --text-soft:
    #667085;

  --text-muted:
    #98a2b3;

  --border:
    rgba(16, 24, 40, 0.08);

  --shadow:
    0 20px 60px rgba(16, 24, 40, 0.10);

  --shadow-hover:
    0 28px 80px rgba(16, 24, 40, 0.16);

  --rookie:
    #ff7a00;

  --rookie-light:
    #fff3e8;

  --rookie-soft:
    rgba(255, 122, 0, 0.12);

  --shadowing:
    #5b5cf0;

  --shadowing-light:
    #eeeeff;

  --shadowing-soft:
    rgba(91, 92, 240, 0.12);

  --success:
    #12b76a;

  --danger:
    #f04438;

  --gold:
    #f5b700;

  --radius-xl:
    32px;

  --radius-lg:
    24px;

  --radius-md:
    18px;

  --max-width:
    1180px;
}


* {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


body {
  margin:
    0;

  min-height:
    100vh;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  overflow-x:
    hidden;
}


body.modal-open {
  overflow:
    hidden;
}


button,
a {
  font:
    inherit;
}


button {
  -webkit-tap-highlight-color:
    transparent;
}


a {
  color:
    inherit;

  text-decoration:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================
   BACKGROUND
   ========================================= */

.challenge-background {
  position:
    fixed;

  inset:
    0;

  z-index:
    -1;

  overflow:
    hidden;

  pointer-events:
    none;
}


.challenge-background::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(91, 92, 240, 0.09),
      transparent 38%
    );
}


.bg-orb {
  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(10px);

  opacity:
    0.65;
}


.bg-orb-1 {
  width:
    360px;

  height:
    360px;

  top:
    110px;

  left:
    -180px;

  background:
    rgba(255, 122, 0, 0.10);
}


.bg-orb-2 {
  width:
    420px;

  height:
    420px;

  top:
    300px;

  right:
    -220px;

  background:
    rgba(91, 92, 240, 0.11);
}


.bg-orb-3 {
  width:
    280px;

  height:
    280px;

  top:
    820px;

  left:
    35%;

  background:
    rgba(245, 183, 0, 0.07);
}


/* =========================================
   HEADER
   ========================================= */

.challenge-header {
  width:
    min(
      calc(100% - 48px),
      var(--max-width)
    );

  min-height:
    86px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}


.gate-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  font-size:
    18px;

  font-weight:
    900;

  letter-spacing:
    -0.03em;
}


.gate-logo {
  width:
    38px;

  height:
    38px;

  object-fit:
    contain;
}


.gate-brand-text {
  line-height:
    1;
}


.hall-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    44px;

  padding:
    0 18px;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.78);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  font-size:
    13px;

  font-weight:
    800;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.hall-link:hover {
  transform:
    translateY(-2px);

  background:
    #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 24, 40, 0.08);
}


.hall-icon {
  color:
    var(--gold);

  font-size:
    16px;
}


/* =========================================
   MAIN
   ========================================= */

.challenge-main {
  width:
    min(
      calc(100% - 48px),
      var(--max-width)
    );

  margin:
    0 auto;

  padding-bottom:
    90px;
}


/* =========================================
   HERO
   ========================================= */

.challenge-hero {
  min-height:
    390px;

  padding:
    64px 20px 58px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.season-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  min-height:
    34px;

  padding:
    0 14px;

  margin-bottom:
    25px;

  border:
    1px solid rgba(91, 92, 240, 0.14);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.74);

  box-shadow:
    0 6px 22px rgba(16, 24, 40, 0.05);

  color:
    #475467;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.season-dot {
  width:
    7px;

  height:
    7px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--success);

  box-shadow:
    0 0 0 5px rgba(18, 183, 106, 0.10);
}


.challenge-title {
  margin:
    0;

  color:
    #0c111d;

  font-size:
    clamp(48px, 7vw, 88px);

  line-height:
    0.95;

  font-weight:
    950;

  letter-spacing:
    -0.07em;
}


.challenge-100 {
  display:
    inline-block;

  background:
    linear-gradient(
      120deg,
      var(--rookie),
      #f04438 45%,
      var(--shadowing)
    );

  background-clip:
    text;

  -webkit-background-clip:
    text;

  color:
    transparent;

  -webkit-text-fill-color:
    transparent;
}


.challenge-subtitle {
  max-width:
    570px;

  margin:
    26px auto 0;

  color:
    var(--text-soft);

  font-size:
    18px;

  line-height:
    1.65;

  font-weight:
    500;
}


.hero-rule {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    25px;

  margin-top:
    35px;

  padding:
    14px 24px;

  border:
    1px solid var(--border);

  border-radius:
    20px;

  background:
    rgba(255, 255, 255, 0.68);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.hero-rule-item {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  min-width:
    82px;
}


.hero-rule-item strong {
  font-size:
    21px;

  line-height:
    1;

  font-weight:
    950;
}


.hero-rule-item span {
  margin-top:
    6px;

  color:
    var(--text-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.hero-rule-divider {
  width:
    1px;

  height:
    31px;

  background:
    var(--border);
}


/* =========================================
   SECTION HEADING
   ========================================= */

.selection-heading,
.section-heading {
  margin-bottom:
    28px;

  text-align:
    center;
}


.selection-label {
  display:
    block;

  margin-bottom:
    9px;

  color:
    var(--shadowing);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.selection-heading h2,
.section-heading h2 {
  margin:
    0;

  font-size:
    34px;

  line-height:
    1.1;

  font-weight:
    900;

  letter-spacing:
    -0.04em;
}


/* =========================================
   CHALLENGE SELECTION
   ========================================= */

.challenge-selection {
  padding:
    35px 0 70px;
}


.challenge-card-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    24px;
}


/* =========================================
   CHALLENGE CARD
   ========================================= */

.challenge-card {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-xl);

  background:
    var(--surface-solid);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    opacity 0.28s ease;
}


.challenge-card::before {
  content:
    "";

  position:
    absolute;

  top:
    -100px;

  right:
    -80px;

  width:
    260px;

  height:
    260px;

  border-radius:
    50%;

  pointer-events:
    none;
}


.rookie-card::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 122, 0, 0.18),
      rgba(255, 122, 0, 0)
    );
}


.shadowing-card::before {
  background:
    radial-gradient(
      circle,
      rgba(91, 92, 240, 0.18),
      rgba(91, 92, 240, 0)
    );
}


.challenge-card.is-active:hover {
  transform:
    translateY(-7px);

  box-shadow:
    var(--shadow-hover);
}


.challenge-card.is-loading {
  opacity:
    0.68;

  pointer-events:
    none;
}


.challenge-card.is-disabled {
  opacity:
    0.55;
}


.card-top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    24px 26px 0;
}


.division-tag {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    0 11px;

  border-radius:
    999px;

  color:
    #475467;

  background:
    #f2f4f7;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.challenge-status {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    0 11px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.challenge-status.is-open {
  color:
    #067647;

  background:
    #ecfdf3;
}


.challenge-status.is-open::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  margin-right:
    6px;

  border-radius:
    50%;

  background:
    var(--success);
}


.challenge-status.is-closed {
  color:
    #667085;

  background:
    #f2f4f7;
}


/* =========================================
   CARD VISUAL
   ========================================= */

.card-visual {
  position:
    relative;

  z-index:
    1;

  min-height:
    220px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px 20px 18px;
}


.score-circle {
  width:
    168px;

  height:
    168px;

  border-radius:
    50%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  position:
    relative;

  background:
    #ffffff;

  box-shadow:
    0 22px 50px rgba(16, 24, 40, 0.10);
}


.score-circle::before {
  content:
    "";

  position:
    absolute;

  inset:
    -8px;

  border:
    2px solid transparent;

  border-radius:
    50%;
}


.rookie-card
.score-circle::before {
  border-color:
    rgba(255, 122, 0, 0.20);
}


.shadowing-card
.score-circle::before {
  border-color:
    rgba(91, 92, 240, 0.20);
}


.score-name {
  margin-bottom:
    3px;

  color:
    var(--text-muted);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.14em;
}


.score-circle strong {
  font-size:
    58px;

  line-height:
    0.95;

  font-weight:
    950;

  letter-spacing:
    -0.07em;
}


.rookie-card
.score-circle strong {
  color:
    var(--rookie);
}


.shadowing-card
.score-circle strong {
  color:
    var(--shadowing);
}


/* =========================================
   CARD CONTENT
   ========================================= */

.card-content {
  position:
    relative;

  z-index:
    2;

  padding:
    8px 32px 34px;

  text-align:
    center;
}


.card-content h3 {
  margin:
    0;

  font-size:
    32px;

  line-height:
    1.05;

  font-weight:
    950;

  letter-spacing:
    -0.045em;
}


.card-tagline {
  margin:
    12px 0 0;

  font-size:
    16px;

  font-weight:
    800;
}


.rookie-card
.card-tagline {
  color:
    var(--rookie);
}


.shadowing-card
.card-tagline {
  color:
    var(--shadowing);
}


.card-description {
  max-width:
    390px;

  min-height:
    52px;

  margin:
    13px auto 0;

  color:
    var(--text-soft);

  font-size:
    14px;

  line-height:
    1.65;
}


/* =========================================
   CARD FLOW
   ========================================= */

.card-flow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin:
    24px 0;

  color:
    #475467;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.card-flow > span:not(
  .flow-arrow
) {
  padding:
    7px 10px;

  border-radius:
    9px;

  background:
    #f8fafc;
}


.flow-arrow {
  color:
    #98a2b3;

  font-size:
    14px;
}


/* =========================================
   START BUTTON
   ========================================= */

.challenge-start-button {
  width:
    100%;

  min-height:
    56px;

  border:
    0;

  border-radius:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  cursor:
    pointer;

  box-shadow:
    0 12px 28px rgba(16, 24, 40, 0.12);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}


.rookie-start-button {
  background:
    linear-gradient(
      135deg,
      #ff8a1f,
      #ff6500
    );
}


.shadowing-start-button {
  background:
    linear-gradient(
      135deg,
      #696af5,
      #4f46e5
    );
}


.challenge-start-button:not(
  :disabled
):hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 34px rgba(16, 24, 40, 0.17);
}


.challenge-start-button:not(
  :disabled
):active {
  transform:
    scale(0.985);
}


.challenge-start-button:disabled {
  background:
    #d0d5dd;

  box-shadow:
    none;

  cursor:
    not-allowed;

  opacity:
    0.75;
}


.button-arrow {
  font-size:
    18px;

  line-height:
    1;

  transition:
    transform 0.18s ease;
}


.challenge-start-button:not(
  :disabled
):hover
.button-arrow {
  transform:
    translateX(4px);
}


/* =========================================
   HOW IT WORKS
   ========================================= */

.how-section {
  padding:
    72px 0;
}


.how-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    18px;
}


.how-item {
  min-height:
    180px;

  padding:
    26px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-lg);

  background:
    rgba(255, 255, 255, 0.72);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.how-number {
  margin-bottom:
    25px;

  color:
    var(--shadowing);

  font-size:
    13px;

  font-weight:
    950;

  letter-spacing:
    0.08em;
}


.how-content strong {
  display:
    block;

  font-size:
    17px;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.how-content p {
  margin:
    10px 0 0;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.65;
}


/* =========================================
   HALL OF FAME CTA
   ========================================= */

.hall-section {
  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  margin-top:
    20px;

  padding:
    48px 52px;

  border-radius:
    32px;

  background:
    #101828;

  color:
    #ffffff;

  box-shadow:
    0 26px 70px rgba(16, 24, 40, 0.18);
}


.hall-section::before {
  content:
    "";

  position:
    absolute;

  width:
    330px;

  height:
    330px;

  top:
    -180px;

  right:
    70px;

  border-radius:
    50%;

  background:
    rgba(245, 183, 0, 0.15);
}


.hall-section::after {
  content:
    "100";

  position:
    absolute;

  right:
    30px;

  bottom:
    -55px;

  color:
    rgba(255, 255, 255, 0.035);

  font-size:
    190px;

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    -0.08em;

  pointer-events:
    none;
}


.hall-copy {
  position:
    relative;

  z-index:
    2;

  max-width:
    580px;
}


.hall-small-title {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #fdb022;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.16em;
}


.hall-copy h2 {
  margin:
    0;

  font-size:
    clamp(34px, 5vw, 52px);

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    -0.05em;
}


.hall-copy p {
  max-width:
    500px;

  margin:
    16px 0 0;

  color:
    #d0d5dd;

  font-size:
    14px;

  line-height:
    1.7;
}


.hall-button {
  position:
    relative;

  z-index:
    3;

  flex:
    0 0 auto;

  min-height:
    54px;

  padding:
    0 23px;

  border-radius:
    15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  background:
    #ffffff;

  color:
    #101828;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.hall-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.20);
}


/* =========================================
   NOTE
   ========================================= */

.challenge-note {
  margin:
    32px auto 0;

  padding:
    0 20px;

  color:
    var(--text-muted);

  text-align:
    center;

  font-size:
    12px;

  line-height:
    1.7;
}


.challenge-note p {
  margin:
    3px 0;
}


.challenge-note strong {
  color:
    var(--text-soft);
}


/* =========================================
   FOOTER
   ========================================= */

.challenge-footer {
  min-height:
    100px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border-top:
    1px solid var(--border);

  color:
    var(--text-muted);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.03em;
}


.footer-logo {
  width:
    25px;

  height:
    25px;

  object-fit:
    contain;

  opacity:
    0.65;
}


/* =========================================
   LOADER
   ========================================= */

.challenge-loader {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(246, 248, 252, 0.92);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}


.challenge-loader.is-visible {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    all;
}


.loader-inner {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    16px;
}


.loader-ring {
  width:
    42px;

  height:
    42px;

  border:
    4px solid rgba(91, 92, 240, 0.12);

  border-top-color:
    var(--shadowing);

  border-radius:
    50%;

  animation:
    challenge-spin 0.8s linear infinite;
}


.loader-text {
  color:
    #475467;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.15em;
}


@keyframes challenge-spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* =========================================
   MODAL
   ========================================= */

.challenge-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}


.challenge-modal.is-visible {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


.modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(16, 24, 40, 0.56);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


.modal-panel {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      100%,
      420px
    );

  padding:
    36px 30px 30px;

  border-radius:
    26px;

  background:
    #ffffff;

  text-align:
    center;

  box-shadow:
    0 30px 90px rgba(16, 24, 40, 0.25);

  transform:
    translateY(12px)
    scale(0.98);

  transition:
    transform 0.2s ease;
}


.challenge-modal.is-visible
.modal-panel {
  transform:
    translateY(0)
    scale(1);
}


.modal-close {
  position:
    absolute;

  top:
    14px;

  right:
    16px;

  width:
    34px;

  height:
    34px;

  border:
    0;

  border-radius:
    50%;

  background:
    #f2f4f7;

  color:
    #667085;

  font-size:
    22px;

  line-height:
    1;

  cursor:
    pointer;
}


.modal-icon {
  width:
    54px;

  height:
    54px;

  margin:
    0 auto 18px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #fef3f2;

  color:
    var(--danger);

  font-size:
    24px;

  font-weight:
    950;
}


.modal-panel h2 {
  margin:
    0;

  font-size:
    22px;

  font-weight:
    900;

  letter-spacing:
    -0.03em;
}


.modal-panel p {
  margin:
    12px 0 0;

  color:
    var(--text-soft);

  font-size:
    14px;

  line-height:
    1.6;
}


.modal-button {
  width:
    100%;

  min-height:
    48px;

  margin-top:
    24px;

  border:
    0;

  border-radius:
    13px;

  background:
    #101828;

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    900;

  cursor:
    pointer;
}


/* =========================================
   NOSCRIPT
   ========================================= */

.noscript-message {
  position:
    fixed;

  left:
    16px;

  right:
    16px;

  bottom:
    16px;

  z-index:
    99999;

  padding:
    16px;

  border-radius:
    14px;

  background:
    #101828;

  color:
    #ffffff;

  text-align:
    center;

  font-size:
    13px;
}


/* =========================================
   TABLET
   ========================================= */

@media (
  max-width: 900px
) {

  .challenge-card-grid {
    gap:
      18px;
  }


  .card-content {
    padding-left:
      24px;

    padding-right:
      24px;
  }


  .how-grid {
    gap:
      14px;
  }


  .hall-section {
    padding:
      42px 38px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (
  max-width: 720px
) {

  .challenge-header {
    width:
      calc(100% - 32px);

    min-height:
      72px;
  }


  .gate-logo {
    width:
      32px;

    height:
      32px;
  }


  .gate-brand-text {
    font-size:
      16px;
  }


  .hall-link {
    min-height:
      39px;

    padding:
      0 13px;

    font-size:
      11px;
  }


  .challenge-main {
    width:
      calc(100% - 28px);

    padding-bottom:
      60px;
  }


  /* HERO */

  .challenge-hero {
    min-height:
      auto;

    padding:
      62px 8px 55px;
  }


  .season-badge {
    margin-bottom:
      20px;

    font-size:
      9px;
  }


  .challenge-title {
    font-size:
      clamp(48px, 16vw, 70px);

    line-height:
      0.96;
  }


  .challenge-100 {
    display:
      block;

    margin-top:
      5px;
  }


  .challenge-subtitle {
    max-width:
      340px;

    margin-top:
      22px;

    font-size:
      15px;

    line-height:
      1.6;
  }


  .hero-rule {
    gap:
      18px;

    margin-top:
      28px;

    padding:
      13px 19px;
  }


  .hero-rule-item {
    min-width:
      70px;
  }


  /* SELECTION */

  .challenge-selection {
    padding:
      20px 0 55px;
  }


  .selection-heading,
  .section-heading {
    margin-bottom:
      22px;
  }


  .selection-heading h2,
  .section-heading h2 {
    font-size:
      29px;
  }


  .challenge-card-grid {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .challenge-card {
    border-radius:
      26px;
  }


  .challenge-card.is-active:hover {
    transform:
      none;
  }


  .card-top {
    padding:
      20px 20px 0;
  }


  .card-visual {
    min-height:
      190px;

    padding:
      27px 20px 14px;
  }


  .score-circle {
    width:
      148px;

    height:
      148px;
  }


  .score-circle strong {
    font-size:
      51px;
  }


  .card-content {
    padding:
      5px 22px 25px;
  }


  .card-content h3 {
    font-size:
      29px;
  }


  .card-tagline {
    font-size:
      15px;
  }


  .card-description {
    min-height:
      0;

    font-size:
      13px;
  }


  .card-flow {
    margin:
      20px 0;
  }


  .challenge-start-button {
    min-height:
      54px;
  }


  /* HOW */

  .how-section {
    padding:
      55px 0;
  }


  .how-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .how-item {
    min-height:
      0;

    display:
      flex;

    gap:
      18px;

    padding:
      21px;
  }


  .how-number {
    flex:
      0 0 auto;

    margin:
      2px 0 0;
  }


  .how-content p {
    margin-top:
      7px;
  }


  /* HALL */

  .hall-section {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      28px;

    padding:
      36px 28px;

    border-radius:
      26px;
  }


  .hall-section::after {
    right:
      -8px;

    bottom:
      -30px;

    font-size:
      140px;
  }


  .hall-copy h2 {
    font-size:
      38px;
  }


  .hall-button {
    width:
      100%;

    min-height:
      52px;
  }


  .challenge-note {
    margin-top:
      26px;

    padding:
      0 10px;
  }


  .challenge-footer {
    min-height:
      84px;
  }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (
  max-width: 390px
) {

  .challenge-header {
    width:
      calc(100% - 24px);
  }


  .gate-brand {
    gap:
      7px;
  }


  .hall-link {
    padding:
      0 11px;
  }


  .hall-icon {
    display:
      none;
  }


  .challenge-main {
    width:
      calc(100% - 22px);
  }


  .challenge-hero {
    padding-top:
      48px;
  }


  .challenge-title {
    font-size:
      48px;
  }


  .hero-rule {
    width:
      100%;

    max-width:
      260px;
  }


  .hero-rule-item {
    flex:
      1;
  }


  .card-content {
    padding-left:
      18px;

    padding-right:
      18px;
  }


  .card-flow {
    gap:
      5px;
  }


  .card-flow >
  span:not(
    .flow-arrow
  ) {
    padding:
      6px 8px;

    font-size:
      9px;
  }


  .hall-section {
    padding:
      32px 22px;
  }

}


/* =========================================
   ACCESSIBILITY
   ========================================= */

.challenge-start-button:focus-visible,
.hall-link:focus-visible,
.hall-button:focus-visible,
.modal-button:focus-visible,
.modal-close:focus-visible {
  outline:
    3px solid rgba(91, 92, 240, 0.28);

  outline-offset:
    3px;
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}