:root {
  --red: #0047ab;
  --red-bright: #2f6fff;
  --black: #07090d;
  --black-soft: #11151c;
  --silver: #c6ccd3;
  --silver-bright: #f5f7fa;
  --white: #ffffff;
  --text: #eef2f7;
  --muted: #9fa8b6;
  --line: rgba(255,255,255,.12);
  --panel: rgba(10, 12, 16, 0.84);
  --glow: 0 0 30px rgba(47,111,255,.32);
  --shadow: 0 20px 50px rgba(0,0,0,.35);
  --radius: 22px;
  --max: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(47,111,255,.18), transparent 26%),
    linear-gradient(180deg, #090b0f 0%, #090b0f 35%, #0d1016 100%);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(6,8,12,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 82px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: var(--glow);
}

.brand-copy h1,
.brand-copy p {
  margin: 0;
}

.brand-copy h1 {
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand-copy p {
  color: var(--muted);
  font-size: .82rem;
}

.nav-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  padding: .75rem 1rem;
  border-radius: 999px;
  color: var(--silver-bright);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a.active {
  background: linear-gradient(135deg, rgba(47,111,255,.2), rgba(255,255,255,.1));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--glow);
}

.nav-links a.is-disabled-login,
.nav-links a.is-disabled-login:hover,
.nav-links a.is-disabled-login.active,
.footer-nav a.is-disabled-login,
.footer-nav a.is-disabled-login:hover,
.footer-nav a.is-disabled-login.active {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: default !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--muted) !important;
  filter: grayscale(1);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.hero::before {
  top: -10rem;
  right: -12rem;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(47,111,255,.28), transparent 66%);
}

.hero::after {
  left: -8rem;
  bottom: -9rem;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 72%);
}

.speed-lines {
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 45%, rgba(255,255,255,.25) 46%, transparent 47%) 0 0/320px 120px,
    linear-gradient(118deg, transparent 0 60%, rgba(47,111,255,.85) 61%, transparent 62%) 0 0/400px 150px,
    linear-gradient(118deg, transparent 0 52%, rgba(255,255,255,.18) 53%, transparent 54%) 0 0/260px 100px;
}

.hero-top-banner {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: min(92%, 900px);
  opacity: 0.72;
  pointer-events: none;
  filter: brightness(1.12) contrast(1.05) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
}

.hero-top-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-video-center {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 7rem 0 2.5rem;
}

.hero-feature-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(320px, 520px);
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  margin: 7rem auto 2.5rem;
}

.hero-feature-row .hero-video-center {
  margin: 0;
}

.hero-video-center .hero-card {
  width: min(100%, 520px);
  margin: 0 auto;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.hero-grid > div:first-child {
  max-width: 860px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .75rem;
  font-weight: 800;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.eyebrow::before {
  content: "";
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 16px rgba(47,111,255,.85);
}

.hero h2 {
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: .92;
  margin: 1rem 0 1rem;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.hero h2 span {
  color: var(--silver-bright);
  text-shadow: 0 0 28px rgba(255,255,255,.15), 0 0 50px rgba(47,111,255,.22);
}

.hero p {
  max-width: 48rem;
  color: #d7dde6;
  font-size: 1.12rem;
  line-height: 1.7;
}

.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 54px;
  padding: 0 1.35rem;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--red-bright), var(--red));
  color: white;
  box-shadow: var(--glow);
}

.btn-secondary {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: var(--silver-bright);
}

.hero-card,
.panel,
.event-card,
.info-card,
.contact-card,
.timeline-item {
  background: linear-gradient(180deg, rgba(18,20,28,.92), rgba(9,11,16,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 1.2rem;
}

.reaction-game {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 220px;
  padding: .8rem;
  background: linear-gradient(180deg, rgba(18,20,28,.94), rgba(9,11,16,.94));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: left;
}

.reaction-game h3 {
  margin: 0 0 .3rem;
  text-transform: uppercase;
  font-size: 1rem;
}

.reaction-game p {
  margin: 0;
  color: #d7dde6;
  font-size: .68rem;
  line-height: 1.4;
}

.tree-shell {
  display: flex;
  justify-content: center;
  margin: .8rem 0;
}

.tree-post {
  display: grid;
  gap: .3rem;
  padding: .55rem .7rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
}

.tree-bulb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 8px rgba(0,0,0,.6);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.tree-bulb.is-on {
  transform: scale(1.06);
}

.tree-bulb.pre.is-on,
.tree-bulb.stage.is-on {
  background: #e8eef7;
  box-shadow: 0 0 16px rgba(245,247,250,.55);
}

.tree-bulb.amber.is-on {
  background: #ffb347;
  box-shadow: 0 0 18px rgba(255,179,71,.8);
}

.tree-bulb.green.is-on {
  background: #7fff8e;
  box-shadow: 0 0 18px rgba(127,255,142,.82);
}

.tree-bulb.red.is-on {
  background: #ff6877;
  box-shadow: 0 0 18px rgba(255,104,119,.82);
}

.reaction-readout {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
}

.reaction-stat {
  padding: .45rem .55rem;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.reaction-stat span,
.reaction-stat strong {
  display: block;
}

.reaction-stat span {
  color: var(--muted);
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .18rem;
}

.reaction-stat strong {
  color: var(--silver-bright);
  font-size: .76rem;
}

.reaction-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  margin-top: .7rem;
}

.reaction-actions .btn {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  min-height: 34px;
  padding: 0 .75rem;
  font-size: .6rem;
}

.reaction-game .tag {
  margin-bottom: .45rem;
  font-size: .52rem;
  padding: .25rem .45rem;
}

.logo-showcase {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(180deg, #080b10, #0f131b);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-showcase::before {
  content: none;
}

.logo-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animated-logo {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1774 / 887;
  overflow: hidden;
  border-radius: 18px;
  background: #03060b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 22px 54px rgba(0,0,0,.48),
    0 0 44px rgba(0,98,255,.18);
}

.animated-logo::before,
.animated-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.animated-logo::before {
  background:
    linear-gradient(100deg, transparent 5%, rgba(255,255,255,.08) 18%, transparent 31%) -65% 0 / 46% 100% no-repeat,
    radial-gradient(circle at 50% 48%, rgba(0,136,255,.24), transparent 30%);
  mix-blend-mode: screen;
  animation: logoSweep 5.2s ease-in-out infinite;
}

.animated-logo::after {
  background:
    linear-gradient(180deg, transparent 0 45%, rgba(0,167,255,.08) 49%, transparent 56%),
    radial-gradient(circle at 12% 60%, rgba(0,115,255,.16), transparent 18%),
    radial-gradient(circle at 88% 60%, rgba(0,115,255,.16), transparent 18%);
  opacity: .75;
}

.animated-logo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
  animation: logoBasePulse 4.8s ease-in-out infinite;
}

.animated-logo-large {
  width: min(calc(100vw - 2rem), 1180px);
}

.logo-tracers {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter:
    drop-shadow(0 0 6px rgba(0,119,255,.95))
    drop-shadow(0 0 18px rgba(0,84,255,.62));
  mix-blend-mode: screen;
}

.tracer {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: .86;
  animation: logoTrace 3.3s linear infinite;
}

.tracer-outer,
.tracer-top,
.tracer-bottom {
  stroke: #1f8cff;
  stroke-width: 9;
}

.tracer-k,
.tracer-i,
.tracer-d,
.tracer-word {
  stroke: #f7fbff;
  stroke-width: 5;
  opacity: .55;
  animation-duration: 4.6s;
}

.tracer-i,
.tracer-tree {
  animation-delay: -.8s;
}

.tracer-d {
  animation-delay: -1.6s;
}

.tracer-word {
  stroke: #dbe9ff;
  animation-delay: -2.2s;
}

.tracer-tree {
  stroke: #ffb02d;
  stroke-width: 7;
  opacity: .8;
  animation-duration: 2.2s;
  filter: drop-shadow(0 0 12px rgba(255,154,0,.85));
}

.logo-energy {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 999px;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(1px);
}

.logo-energy-one {
  top: 8%;
  left: -14%;
  width: 22%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #85c8ff 22%, #fff 50%, #0a65ff 78%, transparent);
  box-shadow: 0 0 18px rgba(0,115,255,.95), 0 0 38px rgba(0,115,255,.48);
  animation: logoEnergyTop 3.8s cubic-bezier(.4,0,.2,1) infinite;
}

.logo-energy-two {
  right: -18%;
  bottom: 14%;
  width: 26%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00a3ff 20%, #fff 52%, #0678ff 78%, transparent);
  box-shadow: 0 0 18px rgba(0,115,255,.95), 0 0 38px rgba(0,115,255,.48);
  animation: logoEnergyBottom 4.6s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: -1.1s;
}

.logo-bulbs {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.bulb {
  position: absolute;
  width: 3.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  mix-blend-mode: screen;
  animation: bulbIgnite 3.6s steps(1, end) infinite;
}

.bulb::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  background: currentColor;
  box-shadow: 0 0 12px currentColor, 0 0 28px currentColor, 0 0 48px currentColor;
}

.bulb-white { color: #f7fbff; }
.bulb-amber { color: #ffac18; }
.bulb-green { color: #17ff4f; }
.bulb-red { color: #ff1e1e; }

.bulb-1 { left: 48.2%; top: 16.6%; animation-delay: 0s; }
.bulb-2 { left: 51.2%; top: 16.6%; animation-delay: .12s; }
.bulb-3 { left: 52.9%; top: 16.6%; animation-delay: .24s; }
.bulb-4 { left: 54.7%; top: 16.6%; animation-delay: .36s; }
.bulb-5 { left: 48.5%; top: 29.6%; animation-delay: .65s; }
.bulb-6 { left: 54.3%; top: 29.6%; animation-delay: .78s; }
.bulb-7 { left: 48.5%; top: 38.7%; animation-delay: 1.05s; }
.bulb-8 { left: 54.3%; top: 38.7%; animation-delay: 1.18s; }
.bulb-9 { left: 48.6%; top: 52.5%; animation-delay: 1.55s; }
.bulb-10 { left: 54.3%; top: 52.5%; animation-delay: 1.68s; }
.bulb-11 { left: 48.6%; top: 63.2%; animation-delay: 2.15s; }
.bulb-12 { left: 54.3%; top: 63.2%; animation-delay: 2.28s; }

.logo-preview-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 50% 10%, rgba(0,91,255,.28), transparent 36%),
    linear-gradient(180deg, #020407, #080b10 64%, #020407);
}

.logo-preview-wrap {
  width: 100%;
  display: grid;
  place-items: center;
}

.hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@keyframes logoTrace {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes logoSweep {
  0%, 36% {
    background-position: -65% 0, 0 0;
    opacity: .52;
  }
  64% {
    background-position: 155% 0, 0 0;
    opacity: .95;
  }
  100% {
    background-position: 155% 0, 0 0;
    opacity: .52;
  }
}

@keyframes logoBasePulse {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1.08) contrast(1.04) brightness(1);
  }
  48% {
    transform: scale(1.006);
    filter: saturate(1.2) contrast(1.08) brightness(1.08);
  }
}

@keyframes logoEnergyTop {
  0%, 20% {
    transform: translateX(0) rotate(-4deg);
    opacity: 0;
  }
  36% { opacity: .92; }
  58% {
    transform: translateX(610%) rotate(-4deg);
    opacity: 0;
  }
  100% {
    transform: translateX(610%) rotate(-4deg);
    opacity: 0;
  }
}

@keyframes logoEnergyBottom {
  0%, 22% {
    transform: translateX(0) rotate(-1deg);
    opacity: 0;
  }
  38% { opacity: .86; }
  62% {
    transform: translateX(-520%) rotate(-1deg);
    opacity: 0;
  }
  100% {
    transform: translateX(-520%) rotate(-1deg);
    opacity: 0;
  }
}

@keyframes bulbIgnite {
  0%, 18% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
  }
  19%, 42% {
    opacity: .94;
    transform: translate(-50%, -50%) scale(1.08);
  }
  43%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
  }
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.stat {
  padding: 1.2rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.stat strong {
  display: block;
  font-size: 1.9rem;
  margin-bottom: .35rem;
}

.stat span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .12em;
}

.section {
  padding: 5rem 0;
}

.section-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 2rem;
}

.section-title h3 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  line-height: .95;
}

.section-title p {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.grid-2 > * {
  min-width: 0;
}

.panel,
.info-card,
.contact-card,
.event-card,
.timeline-item {
  padding: 1.4rem;
}

.info-card h4,
.event-card h4,
.contact-card h4,
.panel h4,
.timeline-item h4 {
  margin: 0 0 .8rem;
  text-transform: uppercase;
}

.panel iframe {
  width: 100%;
  max-width: 100%;
}

.info-card p,
.event-card p,
.contact-card p,
.panel p,
.timeline-item p,
.panel li {
  color: #d7dde6;
  line-height: 1.65;
}

.tag {
  display: inline-flex;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(47,111,255,.18);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .8rem;
}

.event-card .date {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--silver-bright);
  margin-bottom: .35rem;
}

.event-card small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.checklist li {
  padding-left: 1.4rem;
  position: relative;
  margin: .6rem 0;
}

.checklist li::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: .55rem;
  background: linear-gradient(135deg, var(--red-bright), var(--silver));
  box-shadow: 0 0 18px rgba(47,111,255,.45);
}

.timeline {
  display: grid;
  gap: 1rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1rem;
  align-items: start;
}

.timeline-date {
  color: var(--silver-bright);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.contact-wrap {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 1.2rem;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li {
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #d7dde6;
}

.contact-list strong {
  display: block;
  color: var(--silver-bright);
  text-transform: uppercase;
  font-size: .86rem;
  letter-spacing: .08em;
  margin-bottom: .28rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}

.field,
textarea {
  width: 100%;
  padding: 1rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: white;
  outline: none;
}

textarea {
  min-height: 170px;
  resize: vertical;
  grid-column: 1 / -1;
}

.footer {
  padding: 2.2rem 0 3rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mega-banner {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 2rem;
  background: linear-gradient(130deg, rgba(47,111,255,.18), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.1);
}

.mega-banner h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase;
}

.mega-banner p {
  margin: 0;
  max-width: 45rem;
  color: #e2e6ee;
}

.page-hero {
  padding: 4.8rem 0 3rem;
  position: relative;
  overflow: hidden;
}

.page-hero h2 {
  margin: .7rem 0 0;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  text-transform: uppercase;
}

.page-hero p {
  max-width: 48rem;
  color: #d7dde6;
  font-size: 1.05rem;
}

.note {
  display: inline-block;
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: var(--silver-bright);
  border: 1px solid rgba(255,255,255,.08);
}

.login-hero p {
  max-width: 42rem;
}

.login-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 1.2rem;
  align-items: start;
}

.login-panel,
.task-item {
  background: linear-gradient(180deg, rgba(18,20,28,.92), rgba(9,11,16,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.login-panel {
  padding: 1.6rem;
}

.login-panel h4,
.task-item h5 {
  margin: 0 0 .8rem;
  text-transform: uppercase;
}

.login-panel p,
.task-item p,
.task-summary,
.auth-form label span,
.task-form label span {
  color: #d7dde6;
}

.login-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1rem 0 1.2rem;
}

.login-credentials span,
.task-summary span {
  padding: .75rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.auth-form,
.task-form {
  display: grid;
  gap: 1rem;
}

.auth-form label,
.task-form label {
  display: grid;
  gap: .45rem;
}

.form-message {
  min-height: 1.4rem;
  margin: 0;
  color: #ff8c8c;
  font-weight: 700;
}

.form-message.is-success {
  color: #98f5c0;
}

.task-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.task-panel-header p {
  margin: .5rem 0 0;
}

.task-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}

.task-form-actions,
.task-actions,
.task-summary {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}

.task-summary {
  justify-content: space-between;
  margin: 1.4rem 0 1rem;
}

.task-list {
  display: grid;
  gap: 1rem;
}

.task-item {
  padding: 1.2rem;
}

.task-item.is-complete {
  border-color: rgba(152,245,192,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(152,245,192,.12);
}

.task-item-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.task-item h5 {
  font-size: 1.05rem;
}

.task-item p {
  margin: .45rem 0 1rem;
}

.task-meta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.task-meta::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 14px rgba(47,111,255,.7);
}

.task-item.is-complete .task-meta::before {
  background: #98f5c0;
  box-shadow: 0 0 14px rgba(152,245,192,.7);
}

.task-actions {
  margin-top: .8rem;
}

.task-action {
  min-height: 42px;
  padding: 0 .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--silver-bright);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}

.task-action:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--glow);
}

.empty-state {
  padding: 1.4rem;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  color: var(--muted);
  text-align: center;
}

.tree-leaderboard {
  display: grid;
  gap: .55rem;
  margin: 1rem auto 0;
  max-width: 620px;
}

.tree-leaderboard-row,
.tree-leaderboard-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .72rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}

.tree-leaderboard-empty {
  grid-template-columns: 1fr;
  color: var(--muted);
  text-align: center;
}

.tree-leaderboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red-bright), var(--red));
  color: #fff;
  font-weight: 900;
  box-shadow: var(--glow);
}

.tree-leaderboard-name {
  min-width: 0;
  color: var(--silver-bright);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-leaderboard-score {
  color: var(--silver-bright);
  font-size: 1.08rem;
  font-weight: 900;
}

.is-hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .animated-logo::before,
  .animated-logo img,
  .tracer,
  .logo-energy,
  .bulb {
    animation: none;
  }

  .animated-logo::before,
  .logo-energy,
  .bulb {
    opacity: 0;
  }

  .tracer {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: .28;
  }
}

@media (max-width: 980px) {
  .hero-feature-row,
  .hero-grid,
  .grid-3,
  .grid-2,
  .contact-wrap,
  .login-layout,
  .task-form-grid {
    grid-template-columns: 1fr;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav {
    padding: .9rem 0;
    align-items: start;
    flex-direction: column;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .hero {
    padding-top: 4rem;
  }

  .stat-strip,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    align-items: start;
    flex-direction: column;
  }

  .task-panel-header,
  .task-item-top,
  .task-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .logo-showcase {
    height: 240px;
  }

  .hero-top-banner {
    top: .5rem;
    width: min(94%, 760px);
    opacity: 0.8;
  }

  .hero-video-center {
    margin: 5.5rem 0 2rem;
  }

  .hero-feature-row {
    margin: 5.5rem auto 2rem;
  }

  .reaction-readout {
    grid-template-columns: 1fr;
  }
}

/* Mid America Dragway starter overrides */
:root { --accent-red: #e52335; }
.brand img { width: 110px; height: 62px; object-fit: contain; border-radius: 8px; background: #07090d; }
.brand-copy h1 { letter-spacing: .07em; }
.mad-logo { display: block; width: min(100%, 960px); max-width: 100%; height: auto; object-fit: contain; margin: 0 auto 2.5rem; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-top-banner { display: none; }
.hero { padding-top: 3rem; }
.placeholder { color: var(--muted); line-height: 1.7; }
.empty-slot { min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; border: 1px dashed rgba(255,255,255,.2); border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.02); }
.info-card, .event-card, .panel { padding: 1.5rem; }
.footer-row { flex-wrap: wrap; gap: 1rem; }
.nav-links a:focus-visible, .btn:focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (max-width: 720px) { .brand-copy h1 { font-size: .9rem; } .nav-links { gap: .25rem; } .nav-links a { padding: .6rem .7rem; font-size: .8rem; } }
/* Mid America Dragway light theme */
:root {
  color-scheme: light;
  --black: #f5f7fb;
  --black-soft: #ffffff;
  --silver: #475569;
  --silver-bright: #14243c;
  --text: #14243c;
  --muted: #526176;
  --line: rgba(20,36,60,.15);
  --panel: #ffffff;
  --glow: 0 4px 18px rgba(0,71,171,.12);
  --shadow: 0 12px 35px rgba(20,36,60,.08);
}
body { background: radial-gradient(circle at top, rgba(47,111,255,.07), transparent 32%), #f7f9fc; }
.topbar { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.brand img { border-color: var(--line); box-shadow: none; }
.nav-links a { color: var(--text); }
.nav-links a:hover, .nav-links a.active { background: #e8f0ff; box-shadow: inset 0 0 0 1px #c7d9f6; color: #0047ab; }
.hero::before { background: radial-gradient(circle, rgba(47,111,255,.1), transparent 66%); }
.hero::after { background: radial-gradient(circle, rgba(229,35,53,.05), transparent 72%); }
.speed-lines { opacity: .07; }
.hero h2 span { color: #0047ab; text-shadow: none; }
.hero p, .page-hero p, .info-card p, .event-card p, .contact-card p, .panel p, .timeline-item p, .panel li { color: var(--muted); }
.eyebrow { background: #eaf1fc; border-color: #ccd9ee; color: #0047ab; }
.hero-card, .panel, .event-card, .info-card, .contact-card, .timeline-item { background: #ffffff; border-color: var(--line); }
.btn-primary { background: linear-gradient(135deg, #0758c7, #0047ab); color: #ffffff; }
.btn-secondary { background: #ffffff; border-color: #b9c8dc; color: #0047ab; }
.btn-secondary:hover { background: #edf3ff; }
.tag { background: #e8f0ff; color: #0047ab; }
.empty-slot { background: #f5f7fb; border-color: #aab8cc; color: var(--muted); }
.mad-logo { border-color: #d5deeb; box-shadow: 0 16px 40px rgba(20,36,60,.16); }
.footer { background: #ffffff; border-color: var(--line); color: var(--muted); }
.footer-nav a:hover { color: #0047ab; }
.nav-links a:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid #0047ab; outline-offset: 4px; }
/* Racing tree aligned with the supplied 16:9 artwork. */
.tree-art { position: relative; width: min(100%, 960px); margin: 0 auto; }
.tree-art .mad-logo { width: 100%; margin: 0; border: 0; }
.tree-lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.light-pair circle { fill: url(#bulb-off); stroke: #131820; stroke-width: 4; }
.light-pair.is-on circle { fill: var(--bulb-color); stroke: #fff3bf; filter: drop-shadow(0 0 12px var(--bulb-color)); }
.light-stage { --bulb-color: #ffe289; }
.light-amber { --bulb-color: #ffba16; }
.light-green { --bulb-color: #39ff4b; }
.light-red { --bulb-color: #ff263b; }
.tree-controls { position: relative; max-width: 680px; margin: 1.25rem auto 3rem; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); text-align: center; }
.tree-controls h3 { margin: 0; text-transform: uppercase; font-size: 1.5rem; }
.tree-controls p { margin: .6rem auto 1rem; font-size: .95rem; line-height: 1.5; }
.tree-result { display: grid; gap: .4rem; margin: 1rem 0; }
.tree-result strong { font-size: clamp(2rem, 5vw, 3rem); font-variant-numeric: tabular-nums; color: #0047ab; }
.tree-result.is-foul strong { color: #b51225; }
.tree-buttons { display: flex; justify-content: center; gap: .8rem; }
.tree-buttons .btn { font-family: inherit; font-size: .9rem; cursor: pointer; min-width: 130px; touch-action: manipulation; }
.tree-buttons .btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 480px) { .tree-controls { padding: 1rem; } .tree-buttons .btn { min-width: 0; flex: 1; } }
/* Controls sit on the pavement beneath the logo, inside the artwork. */
.tree-art { margin-bottom: 3rem; }
.tree-controls { position: absolute; z-index: 2; left: 50%; bottom: 2%; transform: translateX(-50%); width: 72%; max-width: 650px; margin: 0; padding: .6rem .9rem; border-radius: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tree-controls h3, .tree-controls > p { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tree-result { margin: 0; text-align: left; gap: .1rem; min-width: 0; }
.tree-result span { font-size: .78rem; }
.tree-result strong { font-size: 1.6rem; line-height: 1.1; }
.tree-buttons { flex-shrink: 0; gap: .5rem; }
.tree-buttons .btn { min-width: 100px; min-height: 44px; padding: 0 .8rem; font-size: .75rem; letter-spacing: .03em; }
.tree-star { fill: #088cff; stroke: #9fe8ff; stroke-width: 3; opacity: 0; pointer-events: none; }
.is-waiting .tree-star { animation: star-ready 1.2s ease-in-out infinite; }
@keyframes star-ready { 0%, 100% { opacity: .05; filter: drop-shadow(0 0 2px #008cff); } 50% { opacity: .95; filter: drop-shadow(0 0 20px #00b7ff); } }
@media (max-width: 600px) {
  .tree-controls { width: 94%; padding: .3rem .45rem; gap: .3rem; border-radius: 9px; bottom: 1%; }
  .tree-result span { font-size: .62rem; line-height: 1.1; }
  .tree-result strong { font-size: 1.15rem; }
  .tree-buttons { gap: .3rem; }
  .tree-buttons .btn { min-width: 0; min-height: 44px; padding: 0 .55rem; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .is-waiting .tree-star { animation: none; opacity: .75; } }
/* Fit the game artwork within the visible screen and show controls on glass. */
.hero { padding-top: .75rem; }
.tree-art {
  width: min(100%, 960px, calc((100svh - var(--game-header-height, 100px) - 28px) * 16 / 9));
  margin: 0 auto 2rem;
}
.tree-controls {
  background: transparent;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  color: #fff;
}
.tree-result span, .tree-result strong {
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
}
.tree-result.is-foul strong { color: #ffabb4; }
.tree-buttons .btn, .tree-buttons .btn-primary, .tree-buttons .btn-secondary {
  background: rgba(5,15,30,.18);
  border: 1px solid rgba(255,255,255,.75);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px #000;
}
.tree-buttons .btn:hover:not(:disabled) { background: rgba(0,71,171,.4); }
.tree-buttons .btn:disabled { opacity: .6; }
@media (max-height: 500px) {
  .tree-controls { width: 96%; bottom: 0; padding: 0 .3rem; }
  .tree-result span { font-size: .6rem; }
  .tree-result strong { font-size: 1rem; }
  .tree-buttons .btn { min-width: 0; min-height: 36px; padding: 0 .5rem; font-size: .65rem; }
}
/* Clearly flash the star itself, including dimming the printed blue light. */
.is-waiting .tree-star {
  opacity: 1;
  animation: star-ready-flash 2s steps(1, end) infinite;
  stroke-width: 6;
}
@keyframes star-ready-flash {
  0%, 100% { fill: #071525; stroke: #123354; filter: none; }
  50% { fill: #32caff; stroke: #dcf8ff; filter: drop-shadow(0 0 20px #009dff) drop-shadow(0 0 8px #38d9ff); }
}
@media (prefers-reduced-motion: reduce) {
  .is-waiting .tree-star { animation: none; fill: #32caff; stroke: #dcf8ff; filter: drop-shadow(0 0 8px #009dff); }
}
/* The requested waiting signal also runs when reduced motion is enabled. */
.tree-art.is-waiting .tree-star {
  animation: star-ready-flash 2s steps(1, end) infinite !important;
  opacity: 1 !important;
}
/* Center the game actions within the artwork. */
.tree-controls { flex-direction: column; justify-content: center; align-items: center; gap: .25rem; }
.tree-result { text-align: center; }
.tree-buttons { justify-content: center; width: 100%; }
.tree-buttons .btn { flex: 0 0 auto; }
@media (max-width: 600px) {
  .tree-controls { gap: .1rem; }
  .tree-result { display: flex; align-items: center; justify-content: center; gap: .4rem; }
  .tree-result span { max-width: 190px; }
}
/* Lower the game status away from the artwork lettering. */
.tree-controls { bottom: .25%; gap: .1rem; padding-top: 0; padding-bottom: 0; }
.tree-result { gap: 0; }
.tree-result strong { font-size: 1.25rem; }
@media (max-width: 600px) { .tree-controls { bottom: 0; } .tree-result strong { font-size: 1.05rem; } }
/* Homepage contains only navigation and the image game. */
body:has([data-tree-game]) .hero { padding-bottom: 0; }
body:has([data-tree-game]) .tree-art { margin-bottom: 0; }
/* Populated information pages */
.panel h3, .info-card h3, .event-card h3 { margin-top: 0; color: var(--text); }
.panel p a, .contact-details a, .source-note a { color: #0047ab; text-decoration: underline; text-underline-offset: 3px; }
.contact-details dt { font-weight: 800; margin-top: 1.2rem; }
.contact-details dd { margin: .4rem 0 1rem; overflow-wrap: anywhere; }
address { font-style: normal; line-height: 1.7; }
.source-note { color: var(--muted); font-size: .85rem; line-height: 1.6; }
/* Compact headers and content spacing across all pages. */
.nav { min-height: 64px; gap: .65rem; }
.brand { gap: .6rem; }
.brand img { width: 84px; height: 47px; }
.brand-copy h1 { font-size: .8rem; letter-spacing: .04em; }
.brand-copy p { font-size: .72rem; }
.nav-links { gap: .35rem; }
.nav-links a { padding: .5rem .65rem; font-size: .78rem; letter-spacing: .025em; }
.page-hero { padding: 1.75rem 0 .75rem; }
.page-hero h2 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; margin: .55rem 0 0; }
.page-hero p { font-size: .95rem; line-height: 1.5; margin: .75rem 0 0; }
.eyebrow { font-size: .65rem; padding: .35rem .65rem; letter-spacing: .09em; }
.section { padding: 1.25rem 0; }
.section-title { margin-bottom: 1rem; gap: 1rem; }
.section-title h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; }
.grid-2, .grid-3 { gap: 1rem; }
.panel, .info-card, .event-card, .contact-card, .timeline-item { padding: 1.1rem; }
.panel h3, .info-card h3, .event-card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.panel p, .info-card p, .event-card p { font-size: .94rem; line-height: 1.5; margin: .65rem 0; }
.cta-row { margin-top: 1rem; gap: .65rem; }
.btn { min-height: 44px; padding: 0 1rem; font-size: .78rem; letter-spacing: .04em; }
.tag { font-size: .68rem; padding: .3rem .55rem; margin-bottom: .6rem; }
.footer { padding: 1.1rem 0; font-size: .85rem; }
.source-note { margin: 0; }
@media (max-width: 720px) {
  .nav { padding: .55rem 0; gap: .45rem; }
  .brand-copy h1 { font-size: .75rem; }
  .nav-links { gap: .15rem; }
  .nav-links a { font-size: .72rem; padding: .4rem .5rem; }
  .page-hero { padding: 1.25rem 0 .5rem; }
  .section { padding: .9rem 0; }
}
.table-wrap { overflow-x: auto; }
.content-table { width: 100%; border-collapse: collapse; font-size: .9rem; text-align: left; }
.content-table caption { text-align: left; padding: .6rem 0; color: var(--muted); }
.content-table th, .content-table td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.content-table th { background: #eaf1fc; color: #14243c; }
.content-table td:first-child { white-space: nowrap; }
.content-details { border-top: 1px solid var(--line); padding-top: .65rem; margin-top: .65rem; }
.content-details summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: #0047ab; }
.info-card a { color: #0047ab; overflow-wrap: anywhere; }
html { scroll-padding-top: 140px; }
/* Official photography and artwork, stored locally. */
figure { margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.photo-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #edf1f7; border-radius: 12px; }
.poster-image, .sponsor-image { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
.sponsor-image { margin-bottom: .8rem; }
figcaption { padding: .45rem 0; font-size: .8rem; color: var(--muted); }
.season-poster { max-width: 800px; margin: .8rem auto 0; }
.sponsor-poster { max-width: 560px; margin: 0 auto; }
.poster-details summary { font-size: 1.1rem; font-weight: 800; cursor: pointer; color: #0047ab; }
@media (max-width: 800px) { .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) { .photo-grid { grid-template-columns: 1fr; } }

/* Centered navigation without a header logo or wordmark. */
.nav { justify-content: center; }
.nav-links { justify-content: center; width: 100%; }
@media (max-width: 720px) {
  .nav { flex-direction: row; align-items: center; justify-content: center; }
  .nav-links { justify-content: center; }
}
/* Wider game artwork and a reserved leaderboard area. */
body:has([data-tree-game]) .hero > .container { width: min(calc(100% - 1.5rem), 1600px); }
.game-home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 1rem; align-items: center; }
.game-home-layout .tree-art { width: 100%; max-width: calc((100svh - var(--game-header-height, 64px) - 28px) * 16 / 9); margin: 0 auto; }
.leaderboard-placeholder { padding: 1.4rem 1rem; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.leaderboard-placeholder h2 { font-size: 1.3rem; margin: .4rem 0 0; color: #0047ab; text-transform: uppercase; }
.leaderboard-placeholder .tag { margin-bottom: .25rem; }
@media (max-width: 1000px) {
  .game-home-layout { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .game-home-layout .tree-art { max-width: calc((100svh - var(--game-header-height, 64px) - 110px) * 16 / 9); }
  .leaderboard-placeholder { padding: .65rem 1rem; display: flex; align-items: center; justify-content: center; gap: .75rem; }
  .leaderboard-placeholder h2 { font-size: 1rem; margin: 0; }
  .leaderboard-placeholder .tag { margin: 0; }
}
/* Transparent leaderboard embedded in the widened artwork. */
body:has([data-tree-game]) .tree-art { width: min(100%, 1500px, calc((100svh - var(--game-header-height, 64px) - 28px) * 16 / 9)); margin: 0 auto; }
.tree-art .leaderboard-placeholder { position: absolute; z-index: 2; top: 10%; right: 3%; width: 23%; padding: .6rem; background: transparent; border: 0; box-shadow: none; display: block; text-align: center; }
.tree-art .leaderboard-placeholder .tag { background: transparent; color: #fff; margin: 0; padding: .2rem; font-size: clamp(.55rem, 1.3vw, .95rem); text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.tree-art .leaderboard-placeholder h2 { color: #fff; font-size: clamp(.7rem, 1.8vw, 1.6rem); margin: .3rem 0 0; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
@media (max-width: 600px) { .tree-art .leaderboard-placeholder { top: 8%; right: 2%; width: 27%; padding: .15rem; } }
/* Solid blue star while a race is running. */
.tree-art:not(.is-waiting) .tree-star {
  animation: none !important;
  opacity: 1 !important;
  fill: #168eff;
  stroke: #b7ecff;
  stroke-width: 6;
  filter: drop-shadow(0 0 12px #009dff);
}
/* Hanging pre-stage and stage bulbs, without circular housings. */
.light-stage .hanging-bulb {
  fill: url(#bulb-off);
  stroke: #77704c;
  stroke-width: 1.5;
}
.light-stage.is-on .hanging-bulb {
  fill: url(#stage-bulb-lit);
  stroke: #fff0a0;
  filter: drop-shadow(0 0 7px #ffe289);
}
/* Lower bulbs lean outward; dark covers hide the printed round bulbs. */
.light-pair.is-on circle.bulb-cover {
  fill: url(#bulb-off);
  stroke: #131820;
  filter: none;
}
.light-pair .angled-bulb {
  fill: url(#bulb-off);
  stroke: #131820;
  stroke-width: 4;
}
.light-pair.is-on .angled-bulb {
  fill: var(--bulb-color);
  stroke: #fff3bf;
  filter: drop-shadow(0 0 12px var(--bulb-color));
}
/* Side-facing bulbs: rounded glass outward, narrow neck toward the post. */
.light-pair .outward-bulb {
  fill: url(#bulb-off);
  stroke: #131820;
  stroke-width: 4;
}
.light-pair.is-on .outward-bulb {
  fill: var(--bulb-color);
  stroke: #fff3bf;
  filter: drop-shadow(0 0 12px var(--bulb-color));
}
/* Round LED lenses with a dark rim and textured illuminated face. */
.light-pair .led-bulb {
  fill: url(#bulb-off);
  stroke: #343941;
  stroke-width: 5;
}
.light-pair.is-on .led-bulb {
  fill: var(--bulb-color);
  stroke: #626872;
  filter: drop-shadow(0 0 10px var(--bulb-color));
}
/* The visible inner rim gives each circular LED an outward-facing perspective. */
.light-pair circle.led-rim,
.light-pair.is-on circle.led-rim {
  fill: #090c10;
  stroke: #343941;
  stroke-width: 5;
  filter: none;
}
/* Reference-style racing tree hardware and LED lenses. */
.reference-tree .reference-lens, .reference-tree .reference-small-lens { fill: url(#bulb-off); stroke: #333b38; stroke-width: 2; }
.reference-tree .light-amber .reference-lens { fill: #231a05; }
.reference-tree .light-green .reference-lens { fill: #05221c; }
.reference-tree .light-red .reference-lens { fill: #29070c; }
.reference-tree .light-pair.is-on .reference-lens,
.reference-tree .light-pair.is-on .reference-small-lens { fill: var(--bulb-color); stroke: #b9c4ab; filter: drop-shadow(0 0 9px var(--bulb-color)); }
.reference-tree .reference-led-grid { pointer-events: none; }

/* Lower and reduce the background artwork independently of the working tree. */
body:has([data-tree-game]) .tree-art {
  aspect-ratio: 16 / 9;
  background: #090c10;
  border-radius: 18px;
  overflow: hidden;
}
.tree-art .mad-logo {
  position: absolute;
  left: 7.5%;
  top: 15%;
  width: 85%;
  height: 85%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Clean artwork no longer needs a black canvas or tree silhouette. */
body:has([data-tree-game]) .tree-art { background: transparent; }

/* Keep the leaderboard inside the reduced background artwork. */
.tree-art .leaderboard-placeholder {
  top: 18%;
  right: 10%;
  width: 23%;
}
@media (max-width: 600px) {
  .tree-art .leaderboard-placeholder {
    top: 18%;
    right: 9%;
    width: 27%;
  }
}
/* Remove the empty strip above the artwork while preserving all game alignment. */
body:has([data-tree-game]) .hero {
  padding-top: 10px;
}
body:has([data-tree-game]) .tree-art {
  aspect-ratio: 320 / 153;
}
.tree-art .mad-logo {
  top: 0;
  height: 100%;
}
.tree-art .tree-lights {
  top: -17.6470588%;
  bottom: auto;
  height: 117.6470588%;
}
.tree-art .leaderboard-placeholder {
  top: 3.5294118%;
}
/* Raised metal information panels flanking the tree. */
.tree-art .race-day-updates,
.tree-art .leaderboard-placeholder {
  position: absolute;
  z-index: 2;
  top: 5%;
  width: 23%;
  min-height: 18%;
  padding: clamp(.5rem, 1.5vw, 1.4rem);
  border: 1px solid #697985;
  border-top-color: #c9d5df;
  border-left-color: #a4b5c3;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(62,76,90,.97), rgba(17,25,34,.97) 44%, rgba(7,12,19,.98));
  box-shadow: inset 0 2px 1px rgba(255,255,255,.28), inset 0 -3px 4px #0009, 0 6px 0 #080e16, 0 7px 0 #485767, 0 14px 20px #0009;
  text-align: center;
  color: #e5edf5;
}
.tree-art .race-day-updates { left: 10%; }
.tree-art .leaderboard-placeholder { right: 10%; }
.tree-art .race-day-updates::before,
.tree-art .leaderboard-placeholder::before {
  content: "";
  display: block;
  height: 3px;
  margin: 0 auto .7rem;
  width: 70%;
  border-radius: 3px;
  background: #36b7ff;
  box-shadow: 0 0 10px #168fff;
}
.tree-art .leaderboard-placeholder::before { background: #ff4c58; box-shadow: 0 0 10px #e92943; }
.tree-art .race-day-updates h2,
.tree-art .leaderboard-placeholder .tag {
  font-size: clamp(.55rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #f5f9ff;
  margin: 0;
  padding: 0;
  background: transparent;
  text-shadow: 0 2px 1px #000;
}
.tree-art .race-day-updates p,
.tree-art .leaderboard-placeholder h2 {
  font-size: clamp(.5rem, 1.05vw, 1rem);
  line-height: 1.45;
  font-weight: 500;
  color: #c2d0df;
  margin: .65rem 0 0;
  text-transform: none;
  text-shadow: 0 1px 2px #000;
}
@media (max-width: 600px) {
  .tree-art .race-day-updates,
  .tree-art .leaderboard-placeholder { width: 25%; padding: .45rem .3rem; border-radius: 6px; }
  .tree-art .race-day-updates { left: 9%; }
  .tree-art .leaderboard-placeholder { right: 9%; }
  .tree-art .race-day-updates::before,
  .tree-art .leaderboard-placeholder::before { margin-bottom: .35rem; height: 2px; }
  .tree-art .race-day-updates p,
  .tree-art .leaderboard-placeholder h2 { margin-top: .35rem; }
}
/* Reserve side columns so expanding panels never cover the central artwork. */
body:has([data-tree-game]) .hero > .container {
  width: min(calc(100% - 24px), 2000px);
}
body:has([data-tree-game]) .tree-art {
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  min-height: 30.375cqw;
  display: grid;
  grid-template-columns: minmax(0, 21fr) minmax(0, 54fr) minmax(0, 21fr);
  column-gap: 2%;
  align-items: start;
  overflow: visible;
}
body:has([data-tree-game]) .hero > .container { container-type: inline-size; }
.tree-art .mad-logo {
  left: 23%;
  top: 0;
  width: 54%;
  height: auto;
}
.tree-art .tree-lights {
  left: 18.235294%;
  right: auto;
  top: -5.360294cqw;
  bottom: auto;
  width: 63.529412%;
  height: 35.735294cqw;
}
.tree-art .race-day-updates,
.tree-art .leaderboard-placeholder {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  min-height: 150px;
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.tree-art .race-day-updates { grid-column: 1; grid-row: 1; }
.tree-art .leaderboard-placeholder { grid-column: 3; grid-row: 1; }
.tree-art .tree-controls {
  left: 50%;
  top: 23.8cqw;
  bottom: auto;
  width: 48%;
}
@media (max-width: 700px) {
  body:has([data-tree-game]) .tree-art {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 12px;
    padding-top: 50cqw;
    min-height: 0;
  }
  .tree-art .mad-logo { left: 7.5%; width: 85%; }
  .tree-art .tree-lights { left: 0; top: -8.4375cqw; width: 100%; height: 56.25cqw; }
  .tree-art .tree-controls { top: 37.5cqw; width: 72%; }
  .tree-art .race-day-updates { grid-column: 1; }
  .tree-art .leaderboard-placeholder { grid-column: 2; }
  .tree-art .race-day-updates,
  .tree-art .leaderboard-placeholder { min-height: 110px; margin: 0 0 14px; padding: .8rem; }
  .tree-art .race-day-updates h2,
  .tree-art .leaderboard-placeholder .tag { font-size: .85rem; }
  .tree-art .race-day-updates p,
  .tree-art .leaderboard-placeholder h2 { font-size: .75rem; }
}
/* Rounded artwork with moving silver accents around the two wordmarks. */
.tree-art .mad-logo {
  border-radius: clamp(14px, 2vw, 28px);
  outline: 1px solid rgba(210,224,238,.75);
  outline-offset: -1px;
  box-shadow: 0 2px 1px rgba(255,255,255,.65), 0 9px 25px rgba(16,28,44,.24);
}
.tree-art .logo-silver-effects {
  position: absolute;
  z-index: 1;
  left: 23%;
  top: 0;
  width: 54%;
  height: 30.375cqw;
  pointer-events: none;
  overflow: visible;
}
.logo-silver-effects .silver-trail {
  fill: none;
  stroke: #eff7ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 3100;
  filter: url(#silver-streak-glow);
  opacity: .9;
  animation: silver-wordmark-run 4s linear infinite;
}
.logo-silver-effects .silver-trail-secondary {
  stroke: #c2d2e2;
  stroke-width: 4;
  stroke-dasharray: 65 2335;
  animation: silver-wordmark-return 3.4s linear infinite;
  animation-delay: -1.7s;
}
@keyframes silver-wordmark-run { to { stroke-dashoffset: -3200; } }
@keyframes silver-wordmark-return { to { stroke-dashoffset: 2400; } }
@media (max-width: 700px) {
  .tree-art .logo-silver-effects { left: 7.5%; width: 85%; height: 47.8125cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-silver-effects .silver-trail { animation: none; opacity: .45; }
}
/* Matching event container beneath the center artwork. */
.next-event-panel {
  position: relative;
  width: 54%;
  margin: 24px auto 20px;
  min-height: 100px;
  padding: clamp(1rem, 2vw, 1.6rem);
  border: 1px solid #697985;
  border-top-color: #c9d5df;
  border-left-color: #a4b5c3;
  border-radius: 10px;
  background: linear-gradient(145deg, #3e4c5a, #111922 44%, #070c13);
  box-shadow: inset 0 2px 1px #ffffff47, inset 0 -3px 4px #0009, 0 6px 0 #080e16, 0 7px 0 #485767, 0 14px 20px #0005;
  text-align: center;
}
.next-event-panel::before {
  content: "";
  display: block;
  width: 55%;
  height: 3px;
  margin: 0 auto .8rem;
  border-radius: 3px;
  background: #dce8f5;
  box-shadow: 0 0 10px #a8c7ee;
}
.next-event-panel h2 {
  margin: 0;
  color: #f5f9ff;
  font-size: clamp(.9rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .05em;
  text-shadow: 0 2px 1px #000;
}
@media (max-width: 700px) {
  .next-event-panel { width: 85%; margin-top: 16px; }
}
/* Lower the game status and buttons below the Dragway lettering. */
.tree-art .tree-controls { top: 26cqw; }
@media (max-width: 700px) {
  .tree-art .tree-controls { top: 41cqw; }
}
/* Responsive homepage: visual layers share one box; content uses normal flow. */
body.home-page .hero { padding: 10px 0 24px; }
body.home-page .hero > .container {
  width: min(calc(100% - 32px), 1800px);
  container-type: normal;
}
.home-page .home-layout {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(0, 3fr) minmax(190px, 1fr);
  grid-template-areas: "updates game leaderboard";
  gap: clamp(16px, 1.5vw, 28px);
  align-items: start;
}
body.home-page .tree-art {
  grid-area: game;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.home-page .game-visual {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1672 / 941;
  border-radius: clamp(14px, 2vw, 28px);
  box-shadow: 0 2px 1px #ffffffa6, 0 9px 25px #101c2c3d;
}
.home-page .game-visual .mad-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: fill;
  border-radius: inherit;
  box-shadow: none;
}
.home-page .game-visual .tree-lights,
.home-page .game-visual .logo-silver-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-page .game-visual .tree-lights { z-index: 2; }
.home-page .game-visual .logo-silver-effects { z-index: 1; }
.home-page .tree-art .tree-controls {
  position: relative;
  inset: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #526578;
  border-radius: 14px;
  background: linear-gradient(145deg, #344555, #101b28 65%);
  box-shadow: inset 0 1px 0 #ffffff3d, 0 5px 12px #101c2c26;
}
.home-page .tree-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.home-page .tree-result span {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.4;
  color: #f1f5fb;
  overflow-wrap: anywhere;
}
.home-page .tree-result strong {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.15;
  color: #9fd4ff;
}
.home-page .tree-result.is-foul strong { color: #ff9b9b; }
.home-page .tree-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.home-page .tree-buttons .btn {
  flex: 1 1 130px;
  width: auto;
  min-width: 0;
  max-width: 240px;
  min-height: 48px;
  padding: 10px 18px;
  font-size: 1rem;
  line-height: 1.3;
  white-space: normal;
  touch-action: manipulation;
}
.home-page .tree-buttons .btn:disabled { opacity: .55; }
.home-page .race-day-updates,
.home-page .leaderboard-placeholder {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  min-height: 160px;
  margin: 0 0 12px;
  padding: clamp(16px, 1.5vw, 26px);
  overflow-wrap: anywhere;
}
.home-page .race-day-updates { grid-area: updates; }
.home-page .leaderboard-placeholder { grid-area: leaderboard; }
.home-page .race-day-updates h2,
.home-page .leaderboard-placeholder .tag {
  font-size: clamp(1rem, 1.45vw, 1.5rem);
  line-height: 1.25;
}
.home-page .race-day-updates p,
.home-page .leaderboard-placeholder h2 { font-size: 1rem; line-height: 1.5; }
.home-page .tree-art .next-event-panel {
  width: 100%;
  min-width: 0;
  min-height: 100px;
  margin: 0 0 12px;
  padding: 20px;
  overflow-wrap: anywhere;
}
.home-page .next-event-panel h2 { font-size: clamp(1rem, 1.4vw, 1.4rem); }
.home-page .nav { min-height: 0; padding: 8px 0; }
.home-page .nav-links { gap: 4px; flex-wrap: wrap; }
.home-page .nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  font-size: .82rem;
  letter-spacing: .025em;
}
@media (max-width: 1100px) {
  .home-page .home-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "game game" "updates leaderboard";
    gap: 20px;
  }
  body.home-page .tree-art { max-width: 1000px; justify-self: center; }
  .home-page .race-day-updates,
  .home-page .leaderboard-placeholder { min-height: 140px; }
}
@media (max-width: 580px) {
  body.home-page .hero > .container { width: calc(100% - 24px); }
  .home-page .home-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "game" "updates" "leaderboard";
    gap: 16px;
  }
  .home-page .tree-art .tree-controls { padding: 14px 12px; }
  .home-page .tree-buttons { gap: 10px; }
  .home-page .tree-buttons .btn { flex-basis: 100px; padding-inline: 10px; }
  .home-page .race-day-updates,
  .home-page .leaderboard-placeholder { min-height: 120px; padding: 18px; }
  .home-page .nav-links a { padding-inline: 9px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .tree-art.is-waiting .tree-star { animation: none !important; fill: #32caff; opacity: 1 !important; }
}

/* Preserve the approved desktop appearance, with independent mobile layout. */
body.home-page .hero > .container { width: min(calc(100% - 24px), 2000px); }
.home-page .home-layout {
  grid-template-columns: minmax(0,21fr) minmax(0,54fr) minmax(0,21fr);
  gap: 2%;
}
.home-page .game-visual { margin-bottom: 40px; }
.home-page .tree-art .tree-controls {
  position: absolute;
  top: 86%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 88%;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 3;
}
.home-page .tree-result { gap: 0; }
.home-page .tree-result span { font-size: 1rem; color: #fff; }
.home-page .tree-result strong { font-size: 1.25rem; color: #fff; }
.home-page .tree-buttons { gap: 12px; }
.home-page .tree-buttons .btn {
  flex: 0 1 150px;
  max-width: 150px;
  min-height: 48px;
  border-radius: 999px;
  color: #fff;
  border: 1px solid #ffffffbf;
  background: #050f1e2e;
  backdrop-filter: blur(3px);
  box-shadow: none;
}
.home-page .race-day-updates,
.home-page .leaderboard-placeholder {
  min-height: 220px;
  margin-top: 12px;
  border: 1px solid #697985;
  border-top-color: #c9d5df;
  border-left-color: #a4b5c3;
  border-radius: 10px;
  background: linear-gradient(145deg, #3e4c5af7, #111922f7 44%, #070c13fa);
  box-shadow: inset 0 2px 1px #ffffff47, inset 0 -3px 4px #0009, 0 6px 0 #080e16, 0 7px 0 #485767, 0 14px 20px #0009;
  text-align: center;
  color: #e5edf5;
}
.home-page .race-day-updates::before,
.home-page .leaderboard-placeholder::before {
  content: "";
  display: block;
  height: 3px;
  margin: 0 auto 16px;
  width: 70%;
  border-radius: 3px;
  background: #36b7ff;
  box-shadow: 0 0 10px #168fff;
}
.home-page .leaderboard-placeholder::before { background: #ff4c58; box-shadow: 0 0 10px #e92943; }
.home-page .race-day-updates h2,
.home-page .leaderboard-placeholder .tag {
  color: #f5f9ff;
  background: transparent;
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 900;
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 2px 1px #000;
}
.home-page .race-day-updates p,
.home-page .leaderboard-placeholder h2 {
  color: #c2d0df;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
  margin: 16px 0 0;
  text-shadow: 0 1px 2px #000;
}
.home-page .nav { min-height: 64px; }
@media (max-width: 1100px) {
  .home-page .home-layout {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
  }
  .home-page .race-day-updates,
  .home-page .leaderboard-placeholder { margin-top: 0; min-height: 160px; }
}
@media (max-width: 700px) {
  .home-page .game-visual { aspect-ratio: auto; margin-bottom: 0; box-shadow: none; }
  .home-page .game-visual .mad-logo { position: relative; inset: auto; height: auto; }
  .home-page .game-visual .tree-lights,
  .home-page .game-visual .logo-silver-effects { height: auto; aspect-ratio: 1672 / 941; }
  .home-page .tree-art .tree-controls {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    gap: 8px;
    border: 1px solid #526578;
    border-radius: 14px;
    background: linear-gradient(145deg, #344555, #101b28 65%);
  }
  .home-page .tree-buttons .btn { flex: 1 1 100px; max-width: 220px; }
}
@media (max-width: 580px) {
  .home-page .home-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .home-page .race-day-updates,
  .home-page .leaderboard-placeholder { min-height: 140px; }
}

/* One press-and-hold release control for mouse, touch, pen and keyboard. */
.home-page .tree-controls .hold-instructions {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.home-page .hold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 56px;
  max-width: 100%;
  padding: 14px 24px;
  border: 1px solid #ffb0ad;
  border-radius: 999px;
  background: linear-gradient(#f44848, #c51e29 60%, #97121d);
  box-shadow: inset 0 2px 1px #ffffff66, 0 5px 0 #650c15, 0 9px 15px #0006;
  color: #fff;
  font: 900 1rem/1.25 Inter, Arial, sans-serif;
  letter-spacing: .05em;
  text-shadow: 0 1px 2px #52040a;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.home-page .hold-button.is-held {
  background: linear-gradient(#a7101d, #d32531);
  box-shadow: inset 0 3px 7px #4e000b99, 0 1px 0 #650c15;
  transform: translateY(4px);
}
.home-page .hold-button:focus-visible { outline: 3px solid #e5f5ff; outline-offset: 5px; }
.home-page .tree-controls .tree-result[hidden] { display: none; }
.home-page .tree-controls .tree-result { margin-top: 10px; }
.home-page .game-visual { margin-bottom: 32px; }
.home-page .game-visual:has(.tree-result:not([hidden])) { margin-bottom: 90px; }
@media (max-width: 700px) {
  .home-page .game-visual,
  .home-page .game-visual:has(.tree-result:not([hidden])) { margin-bottom: 0; }
  .home-page .hold-button { width: min(100%, 280px); }
}

/* Circular launch control and an independent result display inside the image. */
.home-page .tree-controls .hold-button {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  padding: 12px;
  border-radius: 50%;
  font-size: .85rem;
  line-height: 1.3;
  flex: none;
}
.home-page .game-visual .tree-result {
  position: absolute;
  z-index: 4;
  top: 5%;
  left: 4%;
  width: 30%;
  margin: 0;
  padding: 10px;
  border: 1px solid #a8c7e37a;
  border-radius: 10px;
  background: #081422e6;
  box-shadow: inset 0 1px 0 #ffffff26, 0 4px 10px #0005;
  pointer-events: none;
}
.home-page .game-visual .tree-result[hidden] { display: none; }
.home-page .game-visual .tree-result span {
  font-size: clamp(.7rem, 1vw, 1rem);
  color: #edf5ff;
}
.home-page .game-visual .tree-result strong {
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  color: #b7e2ff;
}
.home-page .game-visual .tree-result.is-foul strong { color: #ff9b9b; }
.home-page .game-visual,
.home-page .game-visual:has(.tree-result:not([hidden])) { margin-bottom: 60px; }
@media (max-width: 700px) {
  .home-page .game-visual,
  .home-page .game-visual:has(.tree-result:not([hidden])) { margin-bottom: 0; }
  .home-page .game-visual .tree-result { width: 34%; padding: 7px; }
  .home-page .tree-controls .hold-button { width: 90px; height: 90px; min-width: 90px; min-height: 90px; max-width: 90px; }
}

/* Anchor the circular HOLD button fully inside the artwork. */
.home-page .tree-art .game-visual .tree-controls {
  position: absolute;
  top: auto;
  bottom: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-page .game-visual,
.home-page .game-visual:has(.tree-result:not([hidden])) {
  aspect-ratio: 1672 / 941;
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .home-page .tree-art .game-visual .tree-controls { bottom: 8px; }
  .home-page .tree-controls .hold-button {
    width: clamp(56px, 12vw, 80px);
    height: clamp(56px, 12vw, 80px);
    min-width: 0;
    min-height: 0;
    max-width: 80px;
    padding: 5px;
    font-size: clamp(.6rem, 1.6vw, .8rem);
  }
}
/* Full-year race calendar. */
.schedule-page .schedule-main { width: min(calc(100% - 32px), 1800px); margin: 0 auto; padding: 28px 0 40px; }
.schedule-page .calendar-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.schedule-page .calendar-intro h1 { color: #14263d; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin: 10px 0; }
.schedule-page .calendar-intro p { color: #536579; margin: 0; line-height: 1.5; }
.schedule-page .calendar-today-button { min-height: 46px; padding: 12px 20px; border: 1px solid #8eb0d0; border-radius: 10px; color: #fff; font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.3; background: linear-gradient(#367cc5, #164a88); box-shadow: inset 0 1px #ffffff59, 0 4px 0 #0e325b; cursor: pointer; white-space: nowrap; }
.schedule-page .calendar-today-button:disabled { opacity: .5; cursor: default; }
.schedule-page .calendar-legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: .88rem; color: #31475e; }
.schedule-page .calendar-legend span { display: inline-flex; align-items: center; gap: 8px; }
.schedule-page .calendar-legend i { width: 13px; height: 13px; display: inline-block; border-radius: 4px; }
.schedule-page .legend-event { background: #b8273d; }
.schedule-page .legend-today { background: #246cbb; box-shadow: 0 3px 0 #123c6a; }
.schedule-page .calendar-note { font-size: .9rem; color: #607083; margin: 14px 0 24px; line-height: 1.5; }
.schedule-page .year-calendar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: start; }
.schedule-page .calendar-month { min-width: 0; border: 1px solid #b1becb; border-radius: 14px; padding: 0 12px 14px; background: linear-gradient(145deg, #f9fbfe, #e1e8ef); box-shadow: inset 0 1px #fff, 0 5px 0 #b5c0cd, 0 12px 20px #172b421c; scroll-margin-top: 130px; }
.schedule-page .calendar-month-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; margin: 0 -12px 12px; border-radius: 13px 13px 0 0; border-bottom: 3px solid #267ec9; color: #f7faff; background: linear-gradient(145deg, #3b4b5e, #101d2e); box-shadow: inset 0 1px #ffffff59; }
.schedule-page .calendar-month-header h2 { color: #f7faff; margin: 0; font-size: 1.25rem; letter-spacing: .035em; }
.schedule-page .calendar-month-header span { color: #a4b9ce; font-size: .8rem; font-weight: 700; }
.schedule-page .calendar-weekdays,
.schedule-page .calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.schedule-page .calendar-weekdays { margin-bottom: 9px; text-align: center; font-size: .7rem; font-weight: 800; color: #53667a; }
.schedule-page .calendar-day,
.schedule-page .calendar-empty { min-width: 0; min-height: 62px; }
.schedule-page .calendar-day { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px 4px; border: 1px solid #d2dce6; border-radius: 7px; background: linear-gradient(#fff, #f0f4f8); box-shadow: 0 2px 0 #ccd5df; color: #283b51; }
.schedule-page .calendar-day time { display: block; font-size: .85rem; font-weight: 800; line-height: 1.1; }
.schedule-page .calendar-day.has-events { background: #fff7f8; border-color: #e4b8c0; }
.schedule-page .calendar-event { display: block; width: 100%; min-height: 44px; padding: 5px 3px; border: 0; border-left: 3px solid #e85c6d; border-radius: 4px; color: #fff; background: linear-gradient(135deg, #a42b41, #72172d); font-family: inherit; font-size: .65rem; font-weight: 700; line-height: 1.35; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.schedule-page .calendar-event:hover { background: #a62a41; }
.schedule-page .calendar-day.is-today { z-index: 2; transform: translateY(-4px); border: 2px solid #65b1f8; background: linear-gradient(145deg,#3288d6,#164e8c); color: #fff; box-shadow: inset 0 1px #ffffff70, 0 6px 0 #10375f, 0 10px 16px #1d548b55; }
.schedule-page .today-label { margin-top: auto; font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .025em; }
.schedule-page .calendar-undated { margin-top: 32px; padding: 24px; border: 1px solid #b9c9d9; border-radius: 14px; color: #41566b; background: #ffffffd9; }
.schedule-page .calendar-undated h2 { margin: 12px 0; color: #17344f; font-size: 1.25rem; }
.schedule-page .calendar-undated p { line-height: 1.6; }
.schedule-page .calendar-undated a,
.schedule-page .calendar-sources a { color: #0755a0; text-decoration: underline; text-underline-offset: 3px; }
.schedule-page .calendar-sources { margin-top: 24px; color: #4a5e73; line-height: 1.6; }
.schedule-page .calendar-sources summary { cursor: pointer; font-weight: 700; min-height: 44px; }
.schedule-page .calendar-date-message { color: #52677c; font-size: .9rem; }
.schedule-page .calendar-date-message:empty { display: none; }
.schedule-page .calendar-event-dialog { width: min(calc(100% - 32px), 540px); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; border: 1px solid #829bb4; border-radius: 16px; color: #263f56; background: #f5f9fd; box-shadow: 0 24px 80px #0006; }
.schedule-page .calendar-event-dialog::backdrop { background: #071522b8; backdrop-filter: blur(4px); }
.schedule-page .calendar-event-dialog h2 { color: #112d49; margin: 18px 20px 12px 0; font-size: 1.6rem; }
.schedule-page .calendar-event-dialog p { line-height: 1.6; }
.schedule-page .calendar-event-dialog a { display: inline-block; padding: 12px 0; color: #0755a0; text-decoration: underline; }
.schedule-page .event-dialog-dates { font-weight: 700; }
.schedule-page .calendar-dialog-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 1.7rem; background: #e2eaf3; color: #19344e; cursor: pointer; }
.schedule-page .calendar-event:focus-visible,
.schedule-page .calendar-day:focus-visible,
.schedule-page .calendar-today-button:focus-visible,
.schedule-page .calendar-dialog-close:focus-visible { outline: 3px solid #0074d4; outline-offset: 3px; }
@media (max-width: 1300px) { .schedule-page .year-calendar { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 850px) { .schedule-page .year-calendar { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 480px) {
  .schedule-page .schedule-main { width: calc(100% - 20px); padding-top: 18px; }
  .schedule-page .calendar-intro { align-items: flex-start; flex-direction: column; gap: 16px; }
  .schedule-page .calendar-month { padding: 0 8px 12px; }
  .schedule-page .calendar-month-header { margin-inline: -8px; }
  .schedule-page .calendar-days,
  .schedule-page .calendar-weekdays { gap: 3px; }
  .schedule-page .calendar-day { padding: 5px 2px; }
  .schedule-page .calendar-event { font-size: .6rem; padding: 4px 2px; border-left-width: 2px; }
  .schedule-page .calendar-undated { padding: 18px; }
}

/* Event-day calendar: one selected month, without empty dates. */
.schedule-page .year-calendar { display: block; }
.schedule-page .calendar-month[hidden] { display: none; }
.schedule-page .calendar-month { padding: 0 20px 24px; }
.schedule-page .calendar-month-header { margin-inline: -20px; padding: 20px 24px; }
.schedule-page .calendar-month-header h2 { font-size: clamp(1.5rem,3vw,2rem); }
.schedule-page .calendar-days { grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 18px; }
.schedule-page .calendar-day { min-height: 160px; padding: 16px; gap: 14px; border-radius: 10px; }
.schedule-page .event-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schedule-page .event-day-heading > span { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5c6f83; }
.schedule-page .calendar-day time { font-size: 2.2rem; }
.schedule-page .calendar-event { min-height: 50px; padding: 12px; font-size: 1rem; line-height: 1.45; border-left-width: 4px; border-radius: 7px; }
.schedule-page .calendar-day.is-today .event-day-heading > span { color: #e2f0ff; }
.schedule-page .today-label { font-size: .75rem; }
.schedule-page .calendar-month-empty { grid-column: 1/-1; margin: 0; padding: 32px 12px; text-align: center; color: #52677c; line-height: 1.5; }
.schedule-page .calendar-month-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.schedule-page .calendar-month-label { display: flex; flex-direction: column; gap: 5px; color: #50667c; font-size: .75rem; font-weight: 700; }
.schedule-page .calendar-month-label select { min-height: 46px; max-width: 100%; padding: 10px 14px; border: 1px solid #98acc1; border-radius: 9px; color: #183753; background: #fff; font: inherit; font-size: 1rem; cursor: pointer; }
.schedule-page .calendar-month-controls > button:not(.calendar-today-button) { min-width: 46px; min-height: 46px; border: 1px solid #98acc1; border-radius: 9px; background: #fff; color: #174c7f; font-size: 1.7rem; cursor: pointer; }
.schedule-page .calendar-month-controls button:disabled { opacity: .4; cursor: default; }
@media (max-width: 480px) {
  .schedule-page .calendar-month { padding: 0 12px 16px; }
  .schedule-page .calendar-month-header { margin-inline: -12px; }
  .schedule-page .calendar-month-controls { width: 100%; gap: 8px; }
  .schedule-page .calendar-month-label { flex: 1; min-width: 0; }
  .schedule-page .calendar-month-controls .calendar-today-button { width: 100%; }
}

/* Always pair the selected/current month with the following month. */
.schedule-page .year-calendar {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  align-items: start;
}
.schedule-page .calendar-month[hidden] { display: none; }
@media (max-width: 900px) {
  .schedule-page .year-calendar { grid-template-columns: minmax(0,1fr); }
}

/* Shared navigation: raised metallic menu buttons. */
.topbar .nav-links {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.topbar .nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #687b8f;
  border-top-color: #bccbd9;
  border-left-color: #95a9bc;
  border-radius: 9px;
  background: linear-gradient(160deg, #465a6d 0%, #24374b 44%, #122236 100%);
  color: #f5f9ff;
  box-shadow: inset 0 1px 0 #ffffff47, 0 3px 0 #0a1725, 0 5px 8px #13283b26;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #0008;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.topbar .nav-links a:hover {
  background: linear-gradient(160deg, #5a7590, #304f70 48%, #173650);
  color: #fff;
  border-color: #8db9df;
  box-shadow: inset 0 1px 0 #ffffff66, 0 3px 0 #0a1725, 0 5px 12px #1d80d940;
  transform: translateY(-1px);
}
.topbar .nav-links a.active,
.topbar .nav-links a[aria-current="page"] {
  background: linear-gradient(160deg, #357fc9, #10579c 48%, #07376b);
  color: #fff;
  border-color: #8fc8f7;
  box-shadow: inset 0 1px 0 #ffffff66, inset 0 -3px 0 #56b5ff, 0 3px 0 #082744, 0 5px 12px #1364ad33;
}
.topbar .nav-links a:active { transform: translateY(2px); box-shadow: inset 0 2px 5px #0005; }
.topbar .nav-links a:focus-visible { outline: 3px solid #0874c9; outline-offset: 4px; }
.topbar .nav { padding-top: 10px; padding-bottom: 12px; }
@media (max-width: 600px) {
  .topbar .nav-links { gap: 7px; }
  .topbar .nav-links a { flex: 1 1 82px; min-height: 44px; padding: 10px 9px; font-size: .72rem; }
  .topbar .nav { padding-top: 8px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .nav-links a { transition: none; }
}