:root {
  --dirt-road-red: #522825;
  --burnout-black: #2e2e2e;
  --warm-cream: #e9d5bb;
  --tanned-leather: #9c7e5a;
  --dirty-gray: #8d8981;
  --page-bg: var(--warm-cream);
  --page-text: var(--burnout-black);
  --muted-text: var(--dirt-road-red);
  --toggle-icon: var(--burnout-black);
}

:root[data-theme="dark"] {
  --page-bg: var(--burnout-black);
  --page-text: var(--warm-cream);
  --muted-text: var(--tanned-leather);
  --toggle-icon: var(--warm-cream);
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--page-text);
  background: var(--page-bg);
  font-family: Georgia, "Times New Roman", serif;
  transition: background-color 240ms ease, color 240ms ease;
}

.intro-badge {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: var(--page-bg);
  animation: badge-intro 4600ms ease-in-out both;
}

.intro-badge-mark {
  display: block;
  width: clamp(220px, 42vw, 420px);
  aspect-ratio: 1;
  background: var(--page-text);
  mask: url("../Logos/badge.svg") center / contain no-repeat;
  -webkit-mask: url("../Logos/badge.svg") center / contain no-repeat;
  animation: badge-mark-intro 4600ms ease-in-out both;
}

body:not(.intro-active) .intro-badge {
  display: none;
}

.intro-active .theme-toggle,
.intro-active .splash,
.intro-active .established {
  opacity: 0;
  pointer-events: none;
}

.theme-toggle {
  position: fixed;
  top: clamp(16px, 4vw, 30px);
  right: clamp(16px, 4vw, 30px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--toggle-icon);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.theme-toggle:hover {
  color: var(--toggle-icon);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--dirt-road-red);
  outline-offset: 4px;
}

.theme-icon {
  width: 26px;
  height: 26px;
  stroke: currentColor;
}

.splash {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  padding: 96px 24px 76px;
  place-items: center;
  text-align: center;
}

.brand {
  position: relative;
  z-index: 1;
  width: min(760px, 86vw);
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

body:not(.intro-active) .logo {
  animation: fade-in-up 900ms ease-out 80ms both;
}

.logo-dark {
  display: none;
}

:root[data-theme="dark"] .logo-light {
  display: none;
}

:root[data-theme="dark"] .logo-dark {
  display: block;
}

.odometer-start {
  margin: clamp(28px, 5vw, 44px) 0 0;
  padding: 12px 16px;
  color: var(--warm-cream);
  background: var(--dirt-road-red);
  border: 1px solid rgba(82, 40, 37, 0.8);
  border-radius: 2px;
  cursor: pointer;
  font: 700 clamp(0.78rem, 2.4vw, 0.95rem)/1.15 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.odometer-start:hover {
  background: var(--burnout-black);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .odometer-start {
  color: var(--burnout-black);
  background: var(--warm-cream);
  border-color: rgba(233, 213, 187, 0.84);
}

:root[data-theme="dark"] .odometer-start:hover {
  background: var(--tanned-leather);
}

.odometer-start:focus-visible {
  outline: 2px solid var(--tanned-leather);
  outline-offset: 4px;
}

body:not(.intro-active) .odometer-start {
  animation: fade-in-up 900ms ease-out 360ms both;
}

.odometer-start[hidden] {
  display: none;
}

.odometer-game {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(340px, 100%);
  margin: clamp(28px, 5vw, 40px) auto 0;
  color: var(--page-text);
  font-family: Arial, sans-serif;
}

body:not(.intro-active) .odometer-game {
  animation: fade-in-up 720ms ease-out both;
}

.odometer-game[hidden] {
  display: none;
}

.odometer-title,
.odometer-result {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.odometer-readout {
  position: relative;
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 190px;
  padding: 10px 12px 9px;
  color: var(--warm-cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20% 80%, rgba(0, 0, 0, 0.3)),
    var(--burnout-black);
  border: 2px solid rgba(82, 40, 37, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(233, 213, 187, 0.16),
    inset 0 7px 18px rgba(0, 0, 0, 0.46),
    0 2px 0 rgba(82, 40, 37, 0.24);
  overflow: hidden;
}

:root[data-theme="dark"] .odometer-readout {
  color: var(--warm-cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20% 80%, rgba(0, 0, 0, 0.34)),
    #1f1f1f;
  border-color: rgba(156, 126, 90, 0.8);
}

.odometer-value {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 100%;
}

.odometer-digit {
  position: relative;
  display: grid;
  min-width: 28px;
  height: 38px;
  place-items: center;
  color: var(--warm-cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 45%, rgba(0, 0, 0, 0.38) 46% 54%, transparent 55% 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18% 82%, rgba(0, 0, 0, 0.36)),
    #252525;
  border: 1px solid rgba(233, 213, 187, 0.18);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.12),
    inset 0 -2px 5px rgba(0, 0, 0, 0.48);
  font: 700 1.55rem/1 Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
}

.odometer-sr-value {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.odometer-unit {
  color: var(--tanned-leather);
  font: 700 0.56rem/1 Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.odometer-button {
  min-width: 116px;
  padding: 9px 14px;
  color: var(--warm-cream);
  background: var(--dirt-road-red);
  border: 1px solid rgba(82, 40, 37, 0.8);
  border-radius: 2px;
  cursor: pointer;
  font: 700 0.76rem/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.odometer-button:hover {
  background: var(--burnout-black);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .odometer-button {
  color: var(--burnout-black);
  background: var(--warm-cream);
  border-color: rgba(233, 213, 187, 0.84);
}

:root[data-theme="dark"] .odometer-button:hover {
  background: var(--tanned-leather);
}

.odometer-button:focus-visible {
  outline: 2px solid var(--tanned-leather);
  outline-offset: 4px;
}

.odometer-hit .odometer-readout {
  box-shadow:
    inset 0 0 0 2px rgba(233, 213, 187, 0.12),
    0 0 18px rgba(156, 126, 90, 0.36);
}

.established {
  position: fixed;
  bottom: clamp(18px, 4vw, 32px);
  left: 50%;
  z-index: 1;
  margin: 0;
  color: var(--muted-text);
  font: 700 0.82rem/1 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

body:not(.intro-active) .established {
  animation: established-intro 900ms ease-out 760ms both;
}

@media (max-width: 540px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
  }

  .splash {
    padding-inline: 20px;
  }

  .odometer-start {
    letter-spacing: 0.16em;
  }

  .odometer-title,
  .odometer-result {
    letter-spacing: 0.1em;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes established-intro {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes badge-intro {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes badge-mark-intro {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  18% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  46% {
    opacity: 1;
    transform: translateY(-7px) scale(1.005);
  }

  78% {
    opacity: 1;
    transform: translateY(3px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-badge {
    display: none;
  }

  body:not(.intro-active) .logo,
  body:not(.intro-active) .odometer-start,
  body:not(.intro-active) .odometer-game,
  body:not(.intro-active) .established {
    animation: none;
  }
}