:root {
      --neon: #00ff41;
      --neon-dim: #00b82e;
      --glow: rgba(0, 255, 65, 0.45);
      --amber: #ffb000;
      --amber-glow: rgba(255, 176, 0, 0.4);
      --bg: #000;
      --panel: #050a05;
      --muted: #7a9a7a;
      --font: "Press Start 2P", "Courier New", monospace;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--neon);
      min-height: 100vh;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: none;
    }
    body::before {
      content: "";
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 2px,
        rgba(0,0,0,.2) 2px,
        rgba(0,0,0,.2) 4px
      );
      opacity: .4;
    }
    body::after {
      content: "";
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 9997;
      background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.8) 100%);
    }
    .wrap { width: min(960px, 94vw); margin: 0 auto; position: relative; z-index: 1; padding: 1rem 0 3rem; }
    a { color: var(--neon); }

    /* marquee */
    .ticker {
      overflow: hidden;
      border-bottom: 2px solid var(--neon);
      background: #001a08;
      white-space: nowrap;
      font-size: clamp(.35rem, 1.4vw, .45rem);
      padding: .55rem 0;
      color: #b8ffc0;
    }
    .ticker span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 28s linear infinite;
    }
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }

    .badge {
      display: inline-block;
      margin: 1.25rem auto .5rem;
      font-size: .42rem;
      border: 2px solid var(--neon);
      padding: .45rem .7rem;
      animation: pulse 1.5s steps(2) infinite;
    }
    @keyframes pulse {
      50% { opacity: .55; box-shadow: none; }
      0%,100% { box-shadow: 0 0 10px var(--glow); }
    }

    .hero { text-align: center; padding: 1.5rem 0 1rem; }
    .hero h1 {
      font-size: clamp(1.15rem, 7vw, 2.6rem);
      letter-spacing: .06em;
      text-shadow: 0 0 6px var(--neon), 0 0 22px var(--glow), 3px 3px 0 #003310;
      margin: .8rem 0 1rem;
    }
    .hero .sub {
      font-size: clamp(.4rem, 1.8vw, .55rem);
      color: #fff;
      text-shadow: 0 0 8px var(--glow);
      margin-bottom: 1.4rem;
    }

    .stage {
      position: relative;
      height: 150px;
      max-width: 380px;
      margin: 0 auto 1.4rem;
      border: 2px solid var(--neon);
      background: linear-gradient(to top, #001a08, #000 60%);
      box-shadow: 0 0 20px var(--glow), inset 0 0 30px rgba(0,255,65,.06);
      overflow: hidden;
    }
    .road {
      position: absolute; left: 0; right: 0; bottom: 14px; height: 2px;
      background: repeating-linear-gradient(90deg, var(--neon) 0 10px, transparent 10px 22px);
      animation: road 0.3s linear infinite;
      opacity: .75;
    }
    @keyframes road { to { background-position: -22px 0; } }
    .bike-wrap {
      position: absolute; bottom: 22px; left: 0;
      animation: ride 2.6s ease-in-out infinite;
    }
    @keyframes ride {
      0%,100% { transform: translateX(6%) translateY(0); }
      50% { transform: translateX(70%) translateY(-3px); }
    }
    .bike { font-size: 2.2rem; transform: scaleX(-1); filter: drop-shadow(0 0 8px var(--glow)); }

    .lead {
      font-size: clamp(.45rem, 1.8vw, .58rem);
      color: #c8ffd0;
      max-width: 36rem;
      margin: 0 auto 1.5rem;
      line-height: 1.95;
    }
    .lead strong { color: var(--neon); text-shadow: 0 0 6px var(--glow); }

    .cta-row {
      display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin: 1.2rem 0 2rem;
    }
    .btn {
      font-family: var(--font);
      font-size: clamp(.42rem, 1.7vw, .52rem);
      padding: .95rem 1rem;
      border: 3px solid var(--neon);
      background: #001a08;
      color: var(--neon);
      cursor: pointer;
      min-width: min(100%, 240px);
      box-shadow: 0 0 12px var(--glow), 4px 4px 0 #003310;
      transition: .08s steps(1);
    }
    .btn:hover, .btn:focus-visible {
      background: var(--neon); color: #000; outline: none;
      box-shadow: 0 0 28px var(--glow);
    }
    .btn-fire { border-color: #fff; }

    section {
      margin: 1.75rem 0;
      padding: 1.35rem 1rem;
      border: 2px solid var(--neon-dim);
      background: var(--panel);
    }
    section h2 {
      font-size: clamp(.5rem, 2vw, .72rem);
      margin-bottom: 1rem;
      line-height: 1.55;
      border-left: 4px solid var(--neon);
      padding-left: .7rem;
      text-shadow: 0 0 8px var(--glow);
    }
    section p, .body {
      font-size: clamp(.4rem, 1.5vw, .5rem);
      color: #b8e6c0;
      line-height: 1.95;
    }

    .divider {
      text-align: center;
      color: var(--neon-dim);
      font-size: .55rem;
      letter-spacing: .15em;
      opacity: .7;
      margin: .5rem 0;
      user-select: none;
    }

    .cards {
      display: grid;
      gap: .9rem;
      margin-top: 1rem;
    }
    @media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
    .card {
      border: 2px solid var(--neon);
      background: #000;
      padding: 1rem .8rem;
      box-shadow: 0 0 12px rgba(0,255,65,.1);
    }
    .card .num { font-size: .65rem; color: #fff; margin-bottom: .55rem; }
    .card h3 { font-size: clamp(.42rem, 1.4vw, .5rem); margin-bottom: .6rem; line-height: 1.5; }
    .card p { font-size: clamp(.36rem, 1.3vw, .44rem); color: var(--muted); }

    .pay-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .65rem;
      margin-top: 1rem;
    }
    @media (min-width: 640px) { .pay-grid { grid-template-columns: repeat(4, 1fr); } }
    .pay {
      border: 2px dashed var(--neon-dim);
      padding: .8rem .4rem;
      text-align: center;
      font-size: clamp(.34rem, 1.2vw, .44rem);
      min-height: 70px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    }
    .pay:hover { border-style: solid; border-color: var(--neon); box-shadow: 0 0 10px var(--glow); }
    .pay .sym { font-size: 1rem; }

    .wallet-box {
      margin-top: 1.2rem;
      border: 2px solid var(--neon);
      padding: 1rem;
      text-align: center;
      background: #001408;
    }
    .wallet-box code {
      display: block;
      font-family: var(--font);
      font-size: clamp(.35rem, 1.4vw, .48rem);
      word-break: break-all;
      margin: .55rem 0 .75rem;
      line-height: 1.7;
    }
    .mini {
      font-family: var(--font);
      font-size: .4rem;
      border: 2px solid var(--neon);
      background: transparent;
      color: var(--neon);
      padding: .5rem .75rem;
      cursor: pointer;
    }
    .mini:hover { background: var(--neon); color: #000; }
    #copy-status { font-size: .38rem; min-height: 1.1em; margin-top: .4rem; color: #fff; }

    .countdown {
      text-align: center;
      margin: 1.5rem 0;
      padding: 1.2rem;
      border: 2px solid var(--neon);
      background: #000;
    }
    .countdown h3 {
      font-size: clamp(.45rem, 1.6vw, .55rem);
      margin-bottom: 1rem;
      color: #fff;
    }
    .cd-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem;
    }
    .cd-cell {
      border: 2px solid var(--neon-dim);
      padding: .7rem .2rem;
      background: #050f05;
    }
    .cd-cell strong {
      display: block;
      font-size: clamp(.7rem, 3vw, 1.1rem);
      color: var(--neon);
      text-shadow: 0 0 8px var(--glow);
    }
    .cd-cell span { font-size: .32rem; color: var(--muted); }

    .waitlist {
      display: grid;
      gap: .7rem;
      margin-top: .9rem;
    }
    .waitlist input {
      font-family: var(--font);
      font-size: .45rem;
      padding: .85rem;
      border: 2px solid var(--neon-dim);
      background: #000;
      color: var(--neon);
    }
    .waitlist input:focus { outline: none; border-color: var(--neon); }
    #wl-status { font-size: .4rem; color: #fff; min-height: 1.2em; }

    footer {
      text-align: center;
      font-size: .38rem;
      color: var(--muted);
      padding: 1.5rem 0 1rem;
      line-height: 1.9;
      border-top: 2px solid #0a2a12;
      margin-top: 1rem;
    }
    footer .dom { color: var(--neon); }

    .modal {
      display: none; position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,.9);
      align-items: center; justify-content: center; padding: 1rem;
    }
    .modal.open { display: flex; }
    .modal-box {
      width: min(420px, 100%);
      border: 3px solid var(--neon);
      background: #000;
      padding: 1.2rem;
      text-align: center;
      box-shadow: 0 0 30px var(--glow);
    }
    .modal-box h3 { font-size: .6rem; margin-bottom: .8rem; line-height: 1.5; }
    .modal-box p { font-size: .42rem; color: #b8e6c0; margin-bottom: 1rem; line-height: 1.8; }
    .toast {
      position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(140%);
      z-index: 10001; background: var(--neon); color: #000;
      font-size: .42rem; padding: .7rem 1rem; border: 2px solid #fff;
      transition: transform .15s steps(3); max-width: 90vw; text-align: center;
    }
    .toast.show { transform: translateX(-50%) translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .ticker span, .bike-wrap, .road, .badge { animation: none !important; }
    }
  
    /* Variant B */
    .pill-row {
      display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
      margin: 0 auto 1.1rem; max-width: 34rem;
    }
    .pill {
      font-size: .34rem; border: 2px solid var(--amber);
      color: var(--amber); padding: .35rem .5rem;
      box-shadow: 0 0 8px var(--amber-glow);
    }
    .proof {
      display: grid; gap: .55rem; margin: 1rem 0 0;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) { .proof { grid-template-columns: repeat(3, 1fr); } }
    .proof div {
      border: 2px solid var(--neon-dim); padding: .7rem .5rem; text-align: center;
      font-size: .36rem; color: #c8ffd0; line-height: 1.6;
    }
    .proof strong { display: block; color: var(--amber); font-size: .48rem; margin-bottom: .35rem; }
    .btn-amber {
      border-color: var(--amber) !important; color: var(--amber) !important;
      box-shadow: 0 0 12px var(--amber-glow), 4px 4px 0 #4a3000 !important;
    }
    .btn-amber:hover, .btn-amber:focus-visible {
      background: var(--amber) !important; color: #000 !important;
    }
    .route-box {
      margin-top: 1rem; border: 2px dashed var(--amber); padding: 1rem;
      background: #0a0800; font-size: clamp(.38rem, 1.4vw, .46rem);
      color: #ffe9b0; line-height: 1.85;
    }
    .route-box h3 { color: var(--amber); font-size: .5rem; margin-bottom: .6rem; }

  
    /* Shared multipage nav */
    .topnav {
      display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
      align-items: center; padding: .85rem 0; border-bottom: 2px solid #0a2a12;
      margin-bottom: .5rem; position: relative; z-index: 2;
    }
    .topnav a {
      font-size: clamp(.32rem, 1.2vw, .4rem);
      color: var(--neon); text-decoration: none;
      border: 1px solid var(--neon-dim); padding: .4rem .55rem;
    }
    .topnav a:hover, .topnav a.active {
      background: var(--neon); color: #000; border-color: var(--neon);
    }
    .topnav a.amber {
      border-color: var(--amber); color: var(--amber);
    }
    .topnav a.amber:hover { background: var(--amber); color: #000; }
    .page-hero { text-align: center; padding: 1.5rem 0 1rem; }
    .page-hero h1 {
      font-size: clamp(.85rem, 4vw, 1.4rem);
      text-shadow: 0 0 8px var(--glow); margin: .8rem 0;
      line-height: 1.45;
    }
    .back { font-size: .38rem; margin-top: 1.2rem; display: inline-block; }
    .list-plain {
      list-style: none; display: grid; gap: .65rem; margin-top: 1rem;
    }
    .list-plain li {
      border-left: 3px solid var(--neon); padding: .7rem .8rem;
      background: #000; font-size: clamp(.38rem, 1.4vw, .46rem);
      color: #c8ffd0; line-height: 1.75;
    }
    .status-chip {
      display: inline-block; font-size: .34rem; border: 2px solid var(--amber);
      color: var(--amber); padding: .3rem .5rem; margin-bottom: .8rem;
    }
    a.btn {
      display: inline-flex; align-items: center; justify-content: center;
      text-decoration: none; text-align: center;
    }
    a.card, a.pay { color: inherit; }
    a.card:hover { box-shadow: 0 0 16px var(--glow); }


/* Trails gallery */
.trail-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .trail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .trail-grid { grid-template-columns: repeat(3, 1fr); }
}
.trail-card {
  border: 2px solid var(--neon-dim);
  background: #000;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.trail-card:hover { border-color: var(--neon); box-shadow: 0 0 14px var(--glow); }
.trail-media {
  display: block;
  background: #001408;
  border-bottom: 2px solid var(--neon-dim);
  min-height: 140px;
  max-height: 180px;
  overflow: hidden;
}
.trail-thumb {
  width: 100%;
  height: 160px;
  object-fit: contain;
  image-rendering: auto;
  background: #000;
}
.trail-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  height: 160px; color: var(--muted); font-size: .5rem;
}
.trail-body { padding: .75rem .7rem 1rem; flex: 1; display: flex; flex-direction: column; }
.trail-body h3 {
  font-size: clamp(.4rem, 1.4vw, .48rem);
  color: var(--neon);
  line-height: 1.45;
  margin-bottom: .45rem;
}
.trail-meta {
  font-size: clamp(.32rem, 1.1vw, .38rem);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: .7rem;
  flex: 1;
}
.trail-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.trail-actions .mini { text-decoration: none; display: inline-block; }
.trail-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 1rem 0; text-align: center;
}
.trail-stats div {
  border: 2px solid var(--neon-dim); padding: .6rem .3rem;
  font-size: .36rem; color: #c8ffd0;
}
.trail-stats strong {
  display: block; color: var(--amber); font-size: .7rem; margin-bottom: .3rem;
}

/* --- Progressão F1 --- */
.ms-hud {
  display: flex;
  justify-content: center;
  margin: .55rem 0 .2rem;
}
.ms-hud-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: clamp(.32rem, 1.2vw, .4rem);
  color: var(--neon);
  border: 2px solid var(--neon-dim);
  background: #001408;
  padding: .45rem .7rem;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 255, 65, .15);
}
.ms-hud-link:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.ms-hud-link span { white-space: nowrap; }

.pilot-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin: 1rem 0;
}
@media (min-width: 640px) {
  .pilot-hero-stats { grid-template-columns: repeat(4, 1fr); }
}
.pilot-stat {
  border: 2px solid var(--neon-dim);
  padding: .7rem .4rem;
  text-align: center;
  background: #050f05;
}
.pilot-stat strong {
  display: block;
  font-size: clamp(.55rem, 2.2vw, .8rem);
  color: var(--amber);
  margin-bottom: .35rem;
}
.pilot-stat span {
  font-size: .32rem;
  color: #c8ffd0;
  line-height: 1.5;
}

.xp-bar {
  height: 12px;
  border: 2px solid var(--neon);
  background: #000;
  margin: .8rem 0 1.2rem;
  overflow: hidden;
}
.xp-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--amber));
  width: 0%;
  box-shadow: 0 0 8px var(--glow);
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin-top: .8rem;
}
@media (min-width: 640px) {
  .badge-grid { grid-template-columns: repeat(3, 1fr); }
}
.badge-card {
  border: 2px dashed var(--neon-dim);
  padding: .75rem .5rem;
  text-align: center;
  min-height: 88px;
  opacity: .45;
  background: #050805;
}
.badge-card.owned {
  border-style: solid;
  border-color: var(--neon);
  opacity: 1;
  box-shadow: 0 0 12px rgba(0, 255, 65, .2);
}
.badge-card .ico { font-size: 1.2rem; display: block; margin-bottom: .4rem; }
.badge-card .nm {
  font-size: .34rem;
  color: var(--neon);
  line-height: 1.5;
}
.badge-card .ds {
  font-size: .3rem;
  color: var(--muted);
  margin-top: .35rem;
  line-height: 1.5;
}

.quest-list { display: grid; gap: .65rem; margin-top: .8rem; }
.quest-card {
  border: 2px solid var(--neon-dim);
  padding: .85rem .75rem;
  background: #001008;
}
.quest-card.complete { border-color: var(--amber); }
.quest-card.locked { opacity: .5; }
.quest-card h3 {
  font-size: clamp(.4rem, 1.5vw, .48rem);
  color: var(--neon);
  margin-bottom: .45rem;
  line-height: 1.6;
}
.quest-card p {
  font-size: .36rem;
  color: #c8ffd0;
  line-height: 1.7;
  margin-bottom: .5rem;
}
.quest-meta {
  font-size: .32rem;
  color: var(--muted);
  margin-bottom: .55rem;
}
.quest-card .mini { text-decoration: none; display: inline-block; }

.pilot-form {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
  max-width: 420px;
}
.pilot-form input {
  font-family: var(--font);
  font-size: .42rem;
  padding: .7rem;
  border: 2px solid var(--neon-dim);
  background: #000;
  color: var(--neon);
}
.pilot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
}

.sku-row {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .sku-row { grid-template-columns: repeat(3, 1fr); }
}
.sku-card {
  border: 2px solid var(--neon-dim);
  padding: .8rem .55rem;
  text-align: center;
  background: #050f05;
}
.sku-card strong {
  display: block;
  font-size: .42rem;
  color: var(--amber);
  margin-bottom: .4rem;
}
.sku-card p {
  font-size: .34rem;
  color: #c8ffd0;
  margin-bottom: .55rem;
  line-height: 1.6;
}

/* --- Play layer F2 --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.ms-streak { color: var(--amber); }
.ms-season {
  border: 2px solid var(--neon-dim);
  background: #001008;
  padding: .55rem .7rem;
  margin: .45rem 0 .8rem;
}
.ms-season-top {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: clamp(.3rem, 1.1vw, .38rem);
  color: var(--amber);
  margin-bottom: .4rem;
}
.ms-season-bar {
  height: 8px; border: 1px solid var(--neon); background: #000; overflow: hidden;
}
.ms-season-bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #8b4513, var(--amber), var(--neon));
  box-shadow: 0 0 8px var(--amber-glow);
}
.ms-season-bar.mini { margin-top: .7rem; }
.ms-season-tip {
  font-size: .3rem; color: var(--muted); margin-top: .4rem; line-height: 1.6;
}

.ms-fab {
  position: fixed; right: 12px; bottom: 14px; z-index: 40;
  max-width: min(220px, 70vw);
  border: 2px solid var(--amber);
  background: #120c00;
  color: var(--amber);
  text-decoration: none;
  padding: .55rem .65rem;
  font-family: var(--font);
  font-size: .3rem;
  line-height: 1.5;
  box-shadow: 0 0 16px var(--amber-glow);
}
.ms-fab strong { display: block; color: var(--neon); margin-bottom: .25rem; font-size: .28rem; }
.ms-fab span { display: block; color: #ffe6a0; margin-bottom: .2rem; }
.ms-fab em { color: var(--muted); font-style: normal; }
.ms-fab:hover { background: #1a1200; border-color: var(--neon); }
@media (max-width: 420px) {
  .ms-fab { right: 8px; bottom: 8px; font-size: .28rem; }
}

.ms-modal {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ms-modal-out { opacity: 0; transition: opacity .18s; }
.ms-modal-card {
  width: min(420px, 94vw);
  border: 3px solid var(--neon);
  background: #030a03;
  padding: 1.1rem .9rem 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 30px var(--glow);
}
.ms-modal-kicker {
  font-size: .32rem; color: var(--amber); margin-bottom: .55rem; letter-spacing: .04em;
}
.ms-modal-card h2 {
  font-size: clamp(.48rem, 2.2vw, .62rem);
  color: var(--neon); line-height: 1.5; margin-bottom: .7rem;
}
.ms-modal-body {
  font-size: .36rem; color: #c8ffd0; line-height: 1.75; margin-bottom: 1rem;
}
.ms-modal-actions {
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.ms-modal-actions .mini { text-decoration: none; }
.ms-pixels { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.ms-pixels i {
  position: absolute; top: -8px; width: 6px; height: 6px;
  animation: ms-fall 1.1s linear forwards;
  opacity: .9;
}
@keyframes ms-fall {
  to { transform: translateY(120px) rotate(40deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-pixels i { animation: none; display: none; }
  .ms-modal-out { transition: none; }
}

.ms-rotas-tools { margin: .8rem 0 1rem; }
.ms-search-wrap input {
  width: 100%;
  font-family: var(--font);
  font-size: .4rem;
  padding: .7rem;
  border: 2px solid var(--neon-dim);
  background: #000;
  color: var(--neon);
  margin-bottom: .55rem;
}
.ms-search-wrap input:focus { outline: none; border-color: var(--neon); }
.ms-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.ms-filters .filt.active {
  background: var(--neon); color: #000;
}
.ms-filter-count {
  font-size: .3rem; color: var(--muted); margin-top: .55rem; line-height: 1.6;
}

.trail-play-meta {
  display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .5rem;
}
.trail-play-meta span {
  font-size: .28rem;
  border: 1px solid var(--neon-dim);
  padding: .25rem .35rem;
  color: #c8ffd0;
}
.diff-1 { border-color: #2a6 !important; color: #8f8 !important; }
.diff-2 { border-color: var(--amber) !important; color: var(--amber) !important; }
.diff-3 { border-color: #f44 !important; color: #f88 !important; }
.xp-pill { color: var(--neon) !important; }
.owned-pill { border-color: var(--amber) !important; color: var(--amber) !important; }
.trail-blurb {
  font-size: .3rem; color: var(--muted); line-height: 1.55; margin: .25rem 0 .35rem;
}
.trail-card.trail-owned {
  border-color: var(--amber);
  box-shadow: 0 0 10px rgba(255,176,0,.18);
}
.trail-card.trail-focus {
  outline: 2px solid var(--neon);
  box-shadow: 0 0 18px var(--glow);
}
.trail-card[data-legendary="1"] {
  border-style: double;
  border-width: 3px;
}

.ms-home-coach {
  margin-top: 1.2rem;
  border: 2px solid var(--amber);
  background: #100c00;
  padding: 1rem .85rem;
  text-align: left;
}
.ms-home-coach-kicker {
  font-size: .3rem; color: var(--amber); margin-bottom: .45rem;
}
.ms-home-coach h3 {
  font-size: clamp(.42rem, 1.8vw, .55rem);
  color: var(--neon); line-height: 1.55; margin-bottom: .5rem;
}
.ms-home-coach p {
  font-size: .34rem; color: #c8ffd0; line-height: 1.7; margin-bottom: .7rem;
}
.ms-home-coach-actions {
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.ms-home-coach-actions .btn {
  text-decoration: none; display: inline-block; min-width: auto;
  font-size: .36rem; padding: .7rem .8rem;
}

.next-quest-banner {
  border: 2px solid var(--neon);
  background: #001408;
  padding: .85rem .75rem;
  margin: .8rem 0 1rem;
}
.next-quest-banner h3 {
  font-size: .42rem; color: var(--amber); margin-bottom: .4rem; line-height: 1.5;
}
.next-quest-banner p { font-size: .34rem; color: #c8ffd0; line-height: 1.65; }
.import-box {
  margin-top: .7rem;
}
.import-box textarea {
  width: 100%;
  min-height: 90px;
  font-family: var(--font);
  font-size: .3rem;
  padding: .55rem;
  border: 2px solid var(--neon-dim);
  background: #000;
  color: var(--neon);
  resize: vertical;
}

/* ========== Design merge: UD preview (hero-v2 + sections) ========== */
.hero-v2 {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.2rem 0.5rem 2rem;
  border-bottom: 2px solid var(--neon-dim);
  overflow: hidden;
}
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 176, 0, 0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0, 255, 65, 0.05) 40px);
  pointer-events: none;
}
.hero-v2::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 176, 0, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-v2 .badge,
.hero-v2 h1,
.hero-v2 .sub,
.hero-v2 .domain-tag,
.hero-v2 .cta-row,
.hero-v2 .pill-row,
.hero-v2 .stage,
.hero-v2 .hero-counter {
  position: relative;
  z-index: 1;
}
.hero-v2 h1 {
  font-size: clamp(1.6rem, 9vw, 3.4rem);
  letter-spacing: 0.08em;
  line-height: 1.05;
  margin: 0.6rem 0 0.8rem;
  text-shadow:
    0 0 8px var(--glow),
    4px 4px 0 var(--amber),
    8px 8px 0 rgba(255, 176, 0, 0.25);
}
.domain-tag {
  display: inline-block;
  font-size: clamp(0.38rem, 1.6vw, 0.55rem);
  color: var(--amber);
  border: 2px solid var(--amber);
  padding: 0.4rem 0.85rem;
  margin-bottom: 0.85rem;
  letter-spacing: 0.12em;
  box-shadow: 0 0 12px var(--amber-glow);
}
.hero-v2 .sub {
  font-size: clamp(0.36rem, 1.5vw, 0.48rem);
  color: #b8ffc0;
  margin-bottom: 1.2rem;
  letter-spacing: 0.06em;
  line-height: 2;
}
.hero-stage {
  margin: 1.2rem auto 0.4rem;
}
.hero-cta {
  display: inline-block;
  background: var(--amber);
  color: #000 !important;
  font-family: var(--font);
  font-size: clamp(0.34rem, 1.3vw, 0.42rem);
  padding: 0.75rem 1rem;
  text-decoration: none;
  border: 2px solid var(--amber);
  box-shadow: 0 0 12px var(--amber-glow), 3px 3px 0 #4a3000;
  margin: 0.2rem;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  background: #000;
  color: var(--amber) !important;
}
.hero-cta.outline {
  background: transparent;
  color: var(--neon) !important;
  border-color: var(--neon);
  box-shadow: 0 0 10px var(--glow), 3px 3px 0 #003310;
}
.hero-cta.outline:hover {
  background: var(--neon);
  color: #000 !important;
}
.hero-counter {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.6rem;
}
.hero-counter .hc { text-align: center; min-width: 4.5rem; }
.hero-counter .hc-num {
  font-size: clamp(0.7rem, 3.2vw, 1.1rem);
  color: var(--amber);
  display: block;
  text-shadow: 0 0 10px var(--amber-glow);
}
.hero-counter .hc-lbl {
  font-size: clamp(0.28rem, 1vw, 0.34rem);
  color: var(--muted);
  margin-top: 0.25rem;
  display: block;
}
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.section-label {
  font-size: clamp(0.3rem, 1.1vw, 0.38rem);
  color: var(--amber);
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}
.section-title {
  font-size: clamp(0.65rem, 2.8vw, 1.05rem);
  margin-bottom: 1rem;
  line-height: 1.45;
  color: var(--neon);
  text-shadow: 0 0 8px var(--glow);
}
.section-note {
  margin-top: 1rem;
  font-size: clamp(0.34rem, 1.2vw, 0.4rem);
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}
.section-note strong { color: var(--amber); }
.center-cta {
  margin-top: 1rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.center-cta .btn {
  text-decoration: none;
  min-width: auto;
  display: inline-block;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.stat-box {
  border: 2px solid var(--amber);
  padding: 1rem 0.6rem;
  text-align: center;
  background: #0a0800;
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.12);
}
.stat-box .num {
  font-size: clamp(0.85rem, 3.5vw, 1.25rem);
  color: var(--amber);
  display: block;
  margin-bottom: 0.45rem;
}
.stat-box .lbl {
  font-size: clamp(0.28rem, 1vw, 0.34rem);
  color: var(--muted);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
a.feature-card {
  border: 2px solid var(--neon-dim);
  padding: 1rem 0.85rem;
  text-decoration: none;
  color: inherit;
  background: #000;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}
a.feature-card:hover {
  border-color: var(--amber);
  box-shadow: 0 0 14px var(--amber-glow);
}
.feature-card .icon { font-size: 1.4rem; margin-bottom: 0.55rem; }
.feature-card h3 {
  font-size: clamp(0.38rem, 1.3vw, 0.46rem);
  color: var(--amber);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}
.feature-card p {
  font-size: clamp(0.32rem, 1.15vw, 0.38rem);
  color: #c8ffd0;
  line-height: 1.75;
}

.timeline { margin-top: 1rem; }
.tl-item {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  align-items: flex-start;
}
.tl-dot {
  width: 12px;
  height: 12px;
  background: var(--amber);
  flex-shrink: 0;
  margin-top: 0.2rem;
  box-shadow: 0 0 8px var(--amber-glow);
}
.tl-dot.done { background: var(--neon); box-shadow: 0 0 8px var(--glow); }
.tl-dot.soon { background: #ff4422; }
.tl-content h4 {
  font-size: clamp(0.38rem, 1.3vw, 0.46rem);
  margin-bottom: 0.35rem;
  color: #fff;
  line-height: 1.45;
}
.tl-content p {
  font-size: clamp(0.32rem, 1.15vw, 0.38rem);
  color: var(--muted);
  line-height: 1.75;
}
.tl-tag {
  display: inline-block;
  font-size: 0.3rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--amber);
  color: var(--amber);
  margin-top: 0.35rem;
}
.tl-tag.green { border-color: var(--neon); color: var(--neon); }
.tl-tag.red { border-color: #ff4422; color: #ff8866; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.team-card {
  border: 2px solid var(--neon-dim);
  padding: 1rem 0.75rem;
  text-align: center;
  background: #000;
}
.team-card:hover { border-color: var(--amber); }
.team-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--amber);
  margin: 0 auto 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 0 12px var(--amber-glow);
}
.team-card h3 {
  font-size: 0.38rem;
  color: var(--amber);
  margin-bottom: 0.4rem;
}
.team-card p {
  font-size: 0.32rem;
  color: var(--muted);
  line-height: 1.7;
}

.cta-section {
  text-align: center;
  padding: 1.5rem 0 2rem;
}
.cta-section p {
  font-size: clamp(0.34rem, 1.2vw, 0.42rem);
  color: var(--muted);
  margin-bottom: 1.2rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}
.wallet-label {
  font-size: 0.36rem;
  color: #fff;
  margin-bottom: 0.4rem;
}
footer .footer-logo {
  font-size: 0.7rem;
  color: var(--amber);
  margin-bottom: 0.6rem;
  text-shadow: 0 0 10px var(--amber-glow);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.7rem 0 0.9rem;
}
.footer-links a {
  font-size: 0.34rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid #1a3a22;
  padding-bottom: 0.15rem;
}
.footer-links a:hover { color: var(--amber); border-color: var(--amber); }

@media (max-width: 600px) {
  .hero-v2 { min-height: auto; padding: 1.4rem 0 1.5rem; }
  .hero-v2 h1 { font-size: 1.7rem; }
}