*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
:root {
  --purple:  #8B5CF6;
  --purple2: #7C3AED;
  --purple3: #6D28D9;
  --cyan:    #06B6D4;
  --yellow:  #F59E0B;
  --bg:      #0B0F1A;
  --card:    #111827;
  --muted:   #6B7280;
  --border:  rgba(255,255,255,0.07);
  --r-xl:    22px;
  --r-lg:    18px;
  --r-md:    14px;
}
html { background: var(--bg); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #fff;
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}
.page {
  width: 100vw;
  max-width: 100vw;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.scroll-area {
  width: 100%;
  overflow: hidden;
  padding: 2px clamp(10px, 3.8vw, 15px) 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 2;
}

/* STARS */
#stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--d,4s) ease-in-out infinite var(--delay,0s);
}
@keyframes twinkle {
  0%,100% { opacity: var(--lo,.06); transform: scale(1); }
  50%      { opacity: var(--hi,.35); transform: scale(1.3); }
}

/* TOP BAR */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--app-safe-top-effective, 0px)) 15px 10px;
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(to bottom, var(--bg) 65%, transparent 100%);
}
.back-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 22px; font-weight: 300;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s; font-family: inherit;
}
.back-btn:active { background: rgba(255,255,255,0.14); }
.top-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.moon-placeholder {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #e8c87a 0%, #c89040 45%, #8b5c18 80%, #4e3008 100%);
  box-shadow: 0 0 14px rgba(200,145,50,.45), inset 0 1px 2px rgba(255,255,255,.25);
  border: 1.5px solid rgba(200,145,50,.4);
}

/* MARATHON HERO CARD */
.marathon-card {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  height: 536px;
  border: 1px solid rgba(139,92,246,.55);
  box-shadow: 0 12px 42px rgba(109,40,217,.26), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  background: #0e042a;
  cursor: pointer;
  transition: transform .15s;
  color: #fff;
}
.marathon-card:active { transform: scale(.99); }
.m-bg {
  position: absolute;
  inset: 0;
  background-image: url('../../img/space-nebula.webp');
  background-size: cover;
  background-position: center bottom;
  opacity: .92;
}
.m-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 170px at 76% 42%, rgba(139,92,246,.24), transparent 62%),
    linear-gradient(108deg, rgba(8,2,24,.96) 0%, rgba(12,4,36,.82) 39%, rgba(6,2,18,.34) 70%, rgba(2,1,10,.10) 100%);
}
.m-planets {
  position: absolute;
  inset: 0;
  background-image: url('../../img/planets.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: .66;
  z-index: 1;
  mix-blend-mode: screen;
}
.m-rocket {
  position: absolute;
  right: -2px;
  top: -4px;
  width: 174px;
  height: 174px;
  background-image: url('../../img/rocket.webp');
  background-size: 88% 88%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  animation: rocketFloat 3s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 52% 48%, #000 44%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.2) 80%, transparent 92%);
  mask-image: radial-gradient(ellipse 72% 72% at 52% 48%, #000 44%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.2) 80%, transparent 92%);
}
@keyframes rocketFloat {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-9px) rotate(-8deg); }
}
.marathon-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 62px rgba(109,40,217,.18);
  animation: cardPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}
@keyframes cardPulse {
  0%,100% { opacity: .55; }
  50%      { opacity: 1; }
}
.m-body {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 22px 20px;
}
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.48);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 900;
  color: #F59E0B;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.m-title {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: .95;
  color: #fff;
  text-shadow: 0 0 50px rgba(139,92,246,.8), 0 2px 6px rgba(0,0,0,.6);
  margin-bottom: 10px;
}
.m-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.74);
  line-height: 1.5;
  margin-bottom: 15px;
  max-width: 56%;
}
.m-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
.m-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.84);
}
.m-btn {
  position: absolute;
  left: 23px;
  right: 23px;
  bottom: 25px;
  height: 61px;
  padding: 0 20px;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
  border: none;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 22px rgba(109,40,217,.55);
  transition: box-shadow .2s, transform .15s;
  font-family: inherit;
}
.m-btn:active {
  transform: scale(.98);
  box-shadow: 0 2px 10px rgba(109,40,217,.4);
}

/* FEATURE HERO */
.feature-card {
  min-height: 154px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: block;
  color: #fff;
  border: 1px solid rgba(245, 158, 11, .88);
  background:
    radial-gradient(circle 160px at 88% 78%, rgba(245, 158, 11, .22), transparent 64%),
    linear-gradient(115deg, #130806 0%, #241000 43%, #3a1900 72%, #0c0502 100%);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .16), 0 14px 42px rgba(0,0,0,.40), 0 0 34px rgba(245, 158, 11, .16);
  transform: translateZ(0);
}
.feature-card:active { transform: scale(.99); }
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 50%, rgba(255, 186, 50, .16), transparent 38%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 58%);
  pointer-events: none;
  z-index: 2;
}
.feature-content {
  position: relative;
  z-index: 4;
  width: 66%;
  min-height: 154px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
}
.feature-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}
.feature-copy {
  min-width: 0;
}
.feature-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
}
.feature-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,.34));
}
.feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f59e0b;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 10px;
}
.feature-kicker span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f59e0b;
  color: #221000;
  display: grid;
  place-items: center;
  font-size: 10px;
  box-shadow: 0 0 12px rgba(245, 158, 11, .5);
}
.feature-title {
  font-size: clamp(24px, 7.1vw, 29px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -.8px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.feature-desc {
  max-width: 230px;
  color: rgba(255,255,255,.72);
  font-size: clamp(14px, 4vw, 16px);
  line-height: 1.38;
  margin-top: 0;
}
.feature-time {
  margin-top: 13px;
  color: #f59e0b;
  font-size: 13px;
  font-weight: 800;
}
.feature-globe {
  position: absolute;
  z-index: 1;
  right: -54px;
  bottom: -72px;
  width: 214px;
  height: 214px;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(1.18) contrast(1.08) drop-shadow(0 0 28px rgba(245, 158, 11, .46));
}

/* SECTION HEADER */
.section-hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 2px 8px;
}
.hdr-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(56,189,248,.72));
  box-shadow: 0 0 9px rgba(56,189,248,.7);
}
.hdr-line.rev { background: linear-gradient(to left, transparent, rgba(56,189,248,.72)); }
.hdr-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .42em;
  color: rgba(226,232,240,.76);
  text-transform: uppercase;
  white-space: nowrap;
}

/* DUEL GRID */
.duel-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.d-card {
  grid-column: span 3;
  min-width: 0;
  min-height: 250px;
  border-radius: 22px;
  padding: clamp(18px, 5vw, 24px) clamp(10px, 3.4vw, 14px) 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.d-card:nth-child(n + 3) {
  grid-column: span 2;
  min-height: 228px;
  padding: 16px 12px 14px;
}
.d-card:active { transform: scale(.98); }
.d-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 90px at 78% 82%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 32%);
  pointer-events: none;
}
.d-card::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.28), transparent);
}
.d-sns {
  background:
    radial-gradient(circle 170px at 94% 8%, rgba(14,165,233,.20), transparent 62%),
    linear-gradient(145deg, #03112d 0%, #061a45 46%, #08275d 100%);
  border-color: rgba(59,130,246,.85) !important;
  box-shadow: 0 10px 28px rgba(37,99,235,.18), inset 0 0 0 1px rgba(59,130,246,.18);
}
.d-red {
  background:
    radial-gradient(circle 170px at 82% 84%, rgba(248,113,113,.16), transparent 60%),
    linear-gradient(145deg, #260707 0%, #4a0b0b 50%, #641313 100%);
  border-color: rgba(239,68,68,.82) !important;
  box-shadow: 0 10px 28px rgba(185,28,28,.18), inset 0 0 0 1px rgba(239,68,68,.16);
}
.d-blue {
  background: linear-gradient(145deg, #06102e 0%, #0b1e58 52%, #102d75 100%);
  border-color: rgba(37,99,235,.76) !important;
  box-shadow: 0 8px 22px rgba(37,99,235,.20);
}
.d-purple-a {
  background: linear-gradient(145deg, #14082c 0%, #25104f 52%, #35156d 100%);
  border-color: rgba(168,85,247,.78) !important;
  box-shadow: 0 8px 22px rgba(126,34,206,.20);
}
.d-purple-b {
  background: linear-gradient(145deg, #100720 0%, #1d0c3f 52%, #2b135c 100%);
  border-color: rgba(147,51,234,.72) !important;
  box-shadow: 0 8px 22px rgba(88,28,135,.22);
}
.d-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.d-card:nth-child(n + 3) .d-header {
  gap: 10px;
  margin-bottom: 8px;
}
.d-icon {
  width: 106px;
  height: 106px;
  border-radius: 0;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: visible;
  position: relative;
}
.d-card:nth-child(n + 3) .d-icon {
  width: 96px;
  height: 96px;
  justify-self: start;
}
.d-icon img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 9px 14px rgba(0,0,0,.32));
}
.d-card:nth-child(n + 3) .d-icon img {
  width: 100px;
  height: 100px;
}
.d-sns .d-icon img {
  width: 120px;
  height: 120px;
}
.d-title {
  font-size: clamp(21px, 6.5vw, 27px);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.04;
  text-shadow: 0 2px 9px rgba(0,0,0,.42);
}
.d-card:nth-child(n + 3) .d-title {
  font-size: clamp(18px, 5vw, 20px);
  line-height: 1.05;
  margin-top: 2px;
}
.d-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.d-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(148,163,184,.78);
  font-weight: 800;
}
.d-sns .d-time,
.d-blue .d-time { color: #38bdf8; }
.d-red .d-time { color: #f87171; }
.d-purple-a .d-time,
.d-purple-b .d-time { color: #a78bfa; }
.d-blue,
.d-purple-a,
.d-purple-b {
  min-height: clamp(104px, 29vw, 128px);
  padding: 14px 8px;
  align-items: center;
  justify-content: center;
  grid-column: span 1;
  border-radius: 18px;
}
.d-blue .d-header,
.d-purple-a .d-header,
.d-purple-b .d-header {
  margin: 0;
  justify-items: center;
}
.d-blue .d-icon,
.d-purple-a .d-icon,
.d-purple-b .d-icon {
  width: clamp(72px, 22vw, 92px);
  height: clamp(72px, 22vw, 92px);
  justify-self: center;
}
.d-blue .d-icon img,
.d-purple-a .d-icon img,
.d-purple-b .d-icon img {
  width: clamp(82px, 25vw, 106px);
  height: clamp(82px, 25vw, 106px);
}
.d-blue .d-title,
.d-purple-a .d-title,
.d-purple-b .d-title,
.d-blue .d-footer,
.d-purple-a .d-footer,
.d-purple-b .d-footer {
  display: none;
}
.d-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,.85);
}
.d-card:nth-child(n + 3) .d-arrow {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

/* PREMIUM MODE SELECTOR */
.mode-selector {
  --mode-accent: #f59e0b;
  --mode-accent-2: #fb923c;
  --mode-glow: rgba(245, 158, 11, .46);
  --mode-bg-a: #120704;
  --mode-bg-b: #2a1100;
  --mode-bg-c: #3c1800;
  --mode-text: #fff;
  min-height: 472px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 82%, white 8%);
  background:
    radial-gradient(circle 260px at 82% 42%, color-mix(in srgb, var(--mode-accent) 20%, transparent), transparent 68%),
    linear-gradient(135deg, var(--mode-bg-a) 0%, var(--mode-bg-b) 55%, var(--mode-bg-c) 100%);
  box-shadow: 0 18px 54px rgba(0,0,0,.46), 0 0 32px var(--mode-glow), inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--mode-text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mode-selector::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle 190px at 78% 54%, color-mix(in srgb, var(--mode-accent) 20%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 62%);
  pointer-events: none;
}
.mode-selector::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 118px;
  z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,.12), transparent);
  pointer-events: none;
}
.mode-card-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .62;
  background:
    radial-gradient(circle 230px at 88% 72%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 64%),
    radial-gradient(circle 160px at 10% 20%, rgba(255,255,255,.08), transparent 65%);
}
.mode-card-body {
  position: relative;
  z-index: 6;
  width: 58%;
  min-height: 286px;
  padding: 28px 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mode-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mode-accent);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 17px;
  white-space: nowrap;
}
.mode-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--mode-accent);
  color: #211000;
  box-shadow: 0 0 18px var(--mode-glow);
}
.mode-title {
  font-size: clamp(33px, 9.3vw, 42px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 900;
  margin: 0 0 21px;
  text-shadow: 0 3px 14px rgba(0,0,0,.48);
}
.mode-desc {
  margin: 0;
  max-width: 246px;
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 4.3vw, 19px);
  line-height: 1.4;
}
.mode-meta {
  position: absolute;
  left: 28px;
  bottom: 178px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  color: var(--mode-accent);
  font-size: 16px;
  font-weight: 900;
}
.mode-play {
  width: min(100%, 292px);
  min-height: 58px;
  position: absolute;
  left: 28px;
  bottom: 106px;
  z-index: 9;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--mode-accent), var(--mode-accent-2));
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 14px 38px var(--mode-glow), inset 0 1px 0 rgba(255,255,255,.28);
}
.mode-play span {
  font-size: 34px;
  line-height: 1;
  margin-top: -2px;
}
.mode-big-visual {
  position: absolute;
  z-index: 3;
  right: -58px;
  bottom: 118px;
  width: 272px;
  height: 272px;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  filter: saturate(1.16) contrast(1.08) drop-shadow(0 0 36px var(--mode-glow));
  transition: opacity .18s ease, transform .18s ease;
}
.mode-big-visual[hidden] {
  display: none;
}
.mode-selector.is-plain .mode-big-visual {
  opacity: 0;
  transform: scale(.92);
}
.mode-picker-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  min-height: 105px;
  padding: 15px 36px 19px;
  border-top: 1px solid color-mix(in srgb, var(--mode-accent) 45%, transparent);
  background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,.46));
  display: flex;
  align-items: center;
}
.mode-picker {
  width: 100%;
  display: flex;
  gap: clamp(6px, 2vw, 11px);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding: 2px 0 0;
}
.mode-picker::-webkit-scrollbar { display: none; }
.mode-step {
  position: absolute;
  top: 29px;
  width: 47px;
  height: 47px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 10;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mode-step-prev { left: 7px; }
.mode-step-next { right: 7px; }
.mode-token {
  flex: 0 0 auto;
  scroll-snap-align: center;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px 18px;
  position: relative;
  cursor: pointer;
}
.mode-token::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 1px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.mode-token::before {
  content: "";
  position: absolute;
  left: 43%;
  right: 43%;
  bottom: 3px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  opacity: .8;
  z-index: 2;
}
.mode-token-icon {
  width: clamp(51px, 14vw, 66px);
  height: clamp(51px, 14vw, 66px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: visible; /* circle frames the icon; decorative parts may extend out */
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), transparent 56%),
    rgba(4,8,22,.68);
  border: 1px solid color-mix(in srgb, var(--mode-accent) 66%, rgba(255,255,255,.18));
  box-shadow: 0 8px 22px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mode-token-icon img {
  width: 120%;
  height: 120%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.34));
}
/* Optical centering — nudge each icon by visual mass, not image bounds.
   Decorative parts (crown, pole, magnifier) are allowed to extend past the circle. */
.mode-token[data-mode="marathon"] .mode-token-icon img { transform: translateY(-5%) scale(1.06); }
.mode-token[data-mode="flags"] .mode-token-icon img { transform: translateX(-4%); }
.mode-token[data-mode="orbital_shape"] .mode-token-icon img { transform: translate(-2%, -3%); }
.mode-token[data-mode="connection_duel"] .mode-token-icon img { transform: translateY(2%); }
.mode-token[data-mode="slovons"] .mode-token-icon img { transform: translateY(-2%); }
.mode-token[data-mode="geo_duel"] .mode-token-icon img { transform: translateY(-2%); }
.mode-token.is-active .mode-token-icon {
  transform: translateY(-4px) scale(1.16);
  border-color: var(--mode-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-accent) 20%, transparent), 0 0 30px var(--mode-glow), inset 0 0 0 1px rgba(255,255,255,.18);
}
.mode-token.is-active::after {
  left: 22%;
  right: 22%;
  background: var(--mode-accent);
  box-shadow: 0 0 18px var(--mode-glow);
}

.mode-theme-marathon {
  --mode-accent: #fbbf24;
  --mode-accent-2: #f59e0b;
  --mode-glow: rgba(251, 191, 36, .5);
  --mode-bg-a: #0a0420;
  --mode-bg-b: #1b0c3c;
  --mode-bg-c: #2a124f;
}
/* Standalone modes share ONE Antropeo orbital-purple identity (artwork stays
   unique per mode). Marathon above is the only gold championship theme. */
.mode-theme-zg,
.mode-theme-slovons,
.mode-theme-geo-duel,
.mode-theme-flags,
.mode-theme-orbital-shape,
.mode-theme-connection-duel {
  --mode-accent: #a855f7;     /* orbital purple */
  --mode-accent-2: #6366f1;   /* subtle blue highlight */
  --mode-glow: rgba(168, 85, 247, .46);
  --mode-bg-a: #0c0620;       /* deep cosmic purple */
  --mode-bg-b: #1d0f3e;
  --mode-bg-c: #2a1556;
}

/* ===== ARTWORK HERO CARD (full-bleed, morphs per mode) ===== */
.mode-card {
  position: relative;
  height: clamp(380px, calc(100dvh - 290px), 560px);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 60%, rgba(255,255,255,.16));
  box-shadow: 0 18px 54px rgba(0,0,0,.5), 0 0 30px var(--mode-glow), inset 0 1px 0 rgba(255,255,255,.08);
  background: linear-gradient(140deg, var(--mode-bg-a) 0%, var(--mode-bg-b) 55%, var(--mode-bg-c) 100%);
}
.mode-art {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mode-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,4,18,.52) 0%, rgba(5,4,18,.04) 30%, rgba(5,4,18,.16) 58%, rgba(5,4,18,.86) 100%),
    linear-gradient(100deg, rgba(5,4,18,.82) 0%, rgba(5,4,18,.32) 46%, transparent 72%);
}
/* Mode badge icon — sits in the card-body flow, directly under the description. */
.mode-card-icon {
  position: relative;
  z-index: 4;
  width: clamp(86px, 26vw, 124px);
  height: auto;
  margin: 16px 0 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
}
.mode-card-icon[hidden] { display: none; }
.mode-card .mode-card-body {
  position: relative; z-index: 4;
  width: auto; min-height: 0; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 22px 24px;
}
.mode-card .mode-kicker { margin-bottom: 14px; }
.mode-kicker-ico {
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--mode-accent); color: #1a0030;
  font-size: 14px; line-height: 1;
  box-shadow: 0 0 16px var(--mode-glow);
}
.mode-card .mode-title {
  font-size: clamp(40px, 12vw, 56px);
  line-height: .96; letter-spacing: -.03em; font-weight: 900;
  margin: 0 0 14px; text-shadow: 0 3px 18px rgba(0,0,0,.6);
}
.mode-card .mode-desc {
  margin: 0; max-width: 64%;
  color: rgba(255,255,255,.88);
  font-size: clamp(14px, 4vw, 17px); line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.mode-card .mode-meta {
  position: static; inset: auto; margin: auto 0 0;
  display: flex; gap: 18px; flex-wrap: wrap;
  color: #fff; font-size: 15px; font-weight: 800;
  text-shadow: 0 1px 8px rgba(0,0,0,.75);
}
.mode-card .mode-play {
  position: relative; inset: auto; width: 100%;
  min-height: 60px; margin-top: 16px;
  border-radius: 30px; overflow: hidden;
  color: #fff; text-decoration: none; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 19px; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mode-accent-2) 82%, #fff 18%) 0%,
    var(--mode-accent) 50%,
    color-mix(in srgb, var(--mode-accent) 78%, #000 22%) 100%);
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--mode-accent) 50%, #000 50%),
    0 16px 26px var(--mode-glow),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(0,0,0,.3);
  transition: transform .12s cubic-bezier(.3,.8,.4,1), box-shadow .12s ease;
}
.mode-card .mode-play::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 40%;
  border-radius: 26px 26px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  pointer-events: none;
}
.mode-card .mode-play::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: ctaShimmer 6.5s ease-in-out infinite;
}
.mode-card .mode-play span { position: relative; font-size: 25px; line-height: 1; }
.mode-card .mode-play:active {
  transform: translateY(4px) scale(.99);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--mode-accent) 50%, #000 50%),
    0 6px 14px var(--mode-glow),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(0,0,0,.3);
}
@keyframes ctaShimmer { 0%, 72% { left: -60%; } 88%, 100% { left: 130%; } }

/* ===== DETACHED ROULETTE — infinite coverflow, center-locked ===== */
.mode-roulette { position: relative; height: 88px; }
.mode-rail { position: relative; width: 100%; height: 100%; overflow: hidden; }
.mode-rail .mode-token {
  position: absolute; left: 50%; top: 50%;
  padding: 0;
  transform: translate(-50%, -50%);
  transition: transform .46s cubic-bezier(.2,.7,.25,1), opacity .4s ease;
  will-change: transform, opacity;
}
.mode-rail .mode-token::before,
.mode-rail .mode-token::after { display: none; }
.mode-rail .mode-token.is-active .mode-token-icon {
  transform: none;
  animation: tokFloat 3.4s ease-in-out infinite;
  border-color: var(--mode-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--mode-accent) 24%, transparent),
    0 12px 26px var(--mode-glow),
    inset 0 0 0 1px rgba(255,255,255,.22);
}
@keyframes tokFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mode-pedestal {
  position: absolute; left: 50%; top: 50%;
  width: 104px; height: 104px; border-radius: 50%;
  transform: translate(-50%, -46%);
  z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--mode-glow) 95%, transparent), transparent 66%);
}
.mode-pedestal::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 78px; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 72%);
}
.mode-roulette .mode-step {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; font-size: 26px; z-index: 12;
}
.mode-roulette .mode-step-prev { left: 0; }
.mode-roulette .mode-step-next { right: 0; }
.section-hdr-selector {
  padding-top: 17px;
}

@media (max-width: 390px) {
  .scroll-area {
    padding-inline: 10px;
  }
  .duel-grid {
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .d-card,
  .d-red {
    grid-column: span 3;
  }
  .d-blue,
  .d-purple-a,
  .d-purple-b {
    grid-column: span 2;
  }
  .feature-card { min-height: 148px; }
  .marathon-card { min-height: 206px; }
  .m-title { font-size: 42px; }
  .m-desc { max-width: 58%; }
  .m-rocket { width: 160px; height: 160px; }
  .feature-content { width: 68%; padding: 16px 14px 14px; }
  .feature-head {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 11px;
  }
  .feature-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
  }
  .feature-icon img { width: 72px; height: 72px; }
  .feature-kicker {
    font-size: 8px;
    gap: 5px;
    margin-bottom: 8px;
  }
  .feature-kicker span {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
  .feature-title { font-size: 23px; }
  .feature-desc { font-size: 14px; max-width: 210px; }
  .feature-time { margin-top: 10px; }
  .feature-globe {
    width: 198px;
    height: 198px;
    right: -70px;
    bottom: -76px;
  }
  .d-card,
  .d-card:nth-child(n + 3) {
    min-height: 228px;
  }
  .d-icon,
  .d-card:nth-child(n + 3) .d-icon {
    width: 96px;
    height: 96px;
    justify-self: start;
  }
  .d-icon img,
  .d-card:nth-child(n + 3) .d-icon img { width: 100px; height: 100px; }
  .d-sns .d-icon img { width: 116px; height: 116px; }
  .d-title { font-size: clamp(20px, 6.2vw, 24px); }
  .d-card:nth-child(n + 3) .d-title { font-size: clamp(17px, 5.4vw, 21px); }
  .mode-selector {
    min-height: 452px;
    border-radius: 22px;
  }
  .mode-card-body {
    width: 68%;
    min-height: 278px;
    padding: 24px 18px 14px;
  }
  .mode-kicker {
    font-size: 10px;
    gap: 7px;
    margin-bottom: 17px;
  }
  .mode-kicker span {
    width: 22px;
    height: 22px;
  }
  .mode-title {
    font-size: clamp(30px, 8.6vw, 35px);
    margin-bottom: 18px;
  }
  .mode-desc {
    max-width: 224px;
    font-size: 15px;
  }
  .mode-meta {
    left: 18px;
    bottom: 158px;
    gap: 11px;
    font-size: 13px;
  }
  .mode-play {
    min-height: 52px;
    width: min(100%, 236px);
    left: 18px;
    bottom: 100px;
    font-size: 19px;
    border-radius: 15px;
  }
  .mode-big-visual {
    width: 240px;
    height: 240px;
    right: -84px;
    bottom: 108px;
  }
  .mode-picker-shell {
    min-height: 92px;
    padding: 14px 31px 16px;
  }
  .mode-step {
    width: 39px;
    height: 39px;
    top: 28px;
    font-size: 28px;
  }
  .mode-step-prev { left: 5px; }
  .mode-step-next { right: 5px; }
  .mode-token {
    padding-bottom: 15px;
  }
  .mode-token-icon {
    width: clamp(43px, 13vw, 52px);
    height: clamp(43px, 13vw, 52px);
  }
}

@media (max-width: 430px) {
  .d-blue,
  .d-purple-a,
  .d-purple-b {
    min-height: clamp(150px, 46vw, 184px);
    padding: 18px 12px 14px;
    align-items: center;
    justify-content: center;
  }
  .d-blue .d-header,
  .d-purple-a .d-header,
  .d-purple-b .d-header {
    margin: 0;
    justify-items: center;
  }
  .d-blue .d-icon,
  .d-purple-a .d-icon,
  .d-purple-b .d-icon {
    width: clamp(104px, 30vw, 124px);
    height: clamp(104px, 30vw, 124px);
    justify-self: center;
  }
  .d-blue .d-icon img,
  .d-purple-a .d-icon img,
  .d-purple-b .d-icon img {
    width: clamp(108px, 32vw, 132px);
    height: clamp(108px, 32vw, 132px);
  }
  .d-blue .d-title,
  .d-purple-a .d-title,
  .d-purple-b .d-title,
  .d-blue .d-footer,
  .d-purple-a .d-footer,
  .d-purple-b .d-footer {
    display: none;
  }
}

@media (min-width: 760px) {
  .page {
    width: 100%;
    max-width: 780px;
  }
  .scroll-area {
    padding: 20px 28px 104px;
    gap: 22px;
  }
  .marathon-card {
    min-height: 338px;
    border-radius: 26px;
  }
  .marathon-card::after { border-radius: 26px; }
  .m-body { padding: 34px 28px 26px; }
  .m-badge {
    font-size: 14px;
    padding: 8px 16px;
    margin-bottom: 18px;
  }
  .m-title {
    font-size: 70px;
    margin-bottom: 16px;
  }
  .m-desc {
    font-size: 20px;
    max-width: 50%;
    margin-bottom: 22px;
  }
  .m-pill {
    font-size: 15px;
    padding: 8px 16px;
  }
  .m-btn {
    max-width: 330px;
    font-size: 16px;
    padding: 16px 22px;
  }
  .m-rocket {
    width: 286px;
    height: 286px;
    right: 18px;
    top: 20px;
  }
  .feature-card {
    min-height: 284px;
    border-radius: 26px;
  }
  .mode-selector {
    min-height: 520px;
    border-radius: 26px;
  }
  .mode-card-body {
    width: 48%;
    min-height: 334px;
    padding: 38px 34px 24px;
  }
  .mode-kicker {
    font-size: 15px;
    margin-bottom: 26px;
  }
  .mode-kicker span {
    width: 30px;
    height: 30px;
  }
  .mode-title {
    font-size: 48px;
    margin-bottom: 30px;
  }
  .mode-desc {
    max-width: 350px;
    font-size: 21px;
  }
  .mode-meta {
    font-size: 18px;
    left: 34px;
    bottom: 178px;
  }
  .mode-play {
    width: 320px;
    min-height: 66px;
    left: 34px;
    bottom: 111px;
    border-radius: 20px;
  }
  .mode-big-visual {
    width: 358px;
    height: 358px;
    right: -18px;
    bottom: 94px;
  }
  .mode-picker-shell {
    min-height: 110px;
    padding: 17px 56px 20px;
  }
  .mode-step {
    top: 30px;
  }
  .mode-step-prev { left: 10px; }
  .mode-step-next { right: 10px; }
  .mode-token-icon {
    width: 74px;
    height: 74px;
  }
  .feature-content {
    min-height: 284px;
    width: 52%;
    padding: 28px 28px 24px;
  }
  .feature-head {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 24px;
  }
  .feature-icon {
    width: 128px;
    height: 128px;
    border-radius: 24px;
  }
  .feature-icon img {
    width: 138px;
    height: 138px;
  }
  .feature-kicker {
    font-size: 14px;
    margin-bottom: 14px;
  }
  .feature-kicker span {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .feature-title {
    font-size: 34px;
  }
  .feature-desc {
    font-size: 20px;
    max-width: 365px;
  }
  .feature-time {
    font-size: 18px;
    margin-top: 18px;
  }
  .feature-globe {
    width: 340px;
    height: 340px;
    right: -12px;
    bottom: -76px;
  }
  .section-hdr {
    padding: 10px 10px 2px;
    gap: 28px;
  }
  .hdr-label {
    font-size: 22px;
    letter-spacing: .38em;
  }
  .duel-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
  }
  .d-card {
    grid-column: span 3;
    min-height: 338px;
    padding: 28px 28px 22px;
  }
  .d-card:nth-child(n + 3) {
    grid-column: span 2;
    min-height: 276px;
    padding: 20px 22px 18px;
  }
  .d-blue,
  .d-purple-a,
  .d-purple-b {
    align-items: stretch;
    justify-content: flex-start;
  }
  .d-blue .d-header,
  .d-purple-a .d-header,
  .d-purple-b .d-header {
    margin-bottom: 8px;
    justify-items: start;
  }
  .d-blue .d-title,
  .d-purple-a .d-title,
  .d-purple-b .d-title {
    display: block;
  }
  .d-blue .d-footer,
  .d-purple-a .d-footer,
  .d-purple-b .d-footer {
    display: flex;
  }
  .d-card-large .d-header,
  .d-red .d-header { gap: 16px; }
  .d-icon {
    width: 136px;
    height: 136px;
    border-radius: 0;
  }
  .d-icon img {
    width: 128px;
    height: 128px;
  }
  .d-sns .d-icon img {
    width: 150px;
    height: 150px;
  }
  .d-card:nth-child(n + 3) .d-icon {
    width: 128px;
    height: 110px;
  }
  .d-card:nth-child(n + 3) .d-icon img {
    width: 122px;
    height: 122px;
  }
  .d-title { font-size: 30px; }
  .d-card:nth-child(n + 3) .d-title { font-size: 24px; }
  .d-time { font-size: 16px; }
}

/* BOTTOM NAV */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 100vw;
  background: rgba(7,10,20,.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 10px 4px 24px; z-index: 200;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none;
  color: var(--muted); font-family: inherit;
  font-size: 10px; font-weight: 500;
  cursor: pointer; padding: 0 6px; min-width: 48px;
  transition: color .15s; text-decoration: none;
}
.nav-btn .nav-ico {
  width: 22px; height: 22px; display: block; margin-bottom: 1px;
}
.nav-btn .nav-ico img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity:.78; transition: opacity .15s;
}
.nav-btn.active { color: var(--purple); }
.nav-btn.active .nav-ico img {
  opacity: 1;
  filter:drop-shadow(0 0 8px rgba(255,190,45,.52));
}
.nav-btn .nav-ico { font-size: 20px; line-height: 1; display: block; }
.nav-center { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -24px; }
.nav-disc {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 60%, #a78bfa 100%);
  box-shadow: 0 4px 26px rgba(109,40,217,.7), 0 0 0 3px var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 27px;
}
.nav-center-lbl { font-size: 10px; font-weight: 700; color: var(--purple); }