:root {
  --ui-scale: 1.5;
  --bg-a: #ffeec6;
  --bg-b: #ffd49c;
  --bg-c: #ff8a5b;
  --card: rgba(255, 250, 236, 0.84);
  --card-strong: #fffaf0;
  --text-main: #2a2320;
  --text-soft: #5c4b3e;
  --accent-red: #c13a2a;
  --accent-yellow: #f5b700;
  --accent-blue: #2f6db2;
  --accent-green: #3d8f3d;
  --shadow: 0 16px 40px rgba(59, 27, 8, 0.16);
  --track-gap: clamp(8px, 1.3vw, 14px);
  --track-lane: clamp(14px, 2.2vw, 24px);
  --track-radius: clamp(16px, 3vw, 30px);
  --lap-duration: 22s;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  zoom: var(--ui-scale);
}

body {
  position: relative;
  overflow-x: hidden;
  font-family: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(1200px 500px at 20% -10%, #fff5da 0%, rgba(255, 245, 218, 0) 62%),
    radial-gradient(700px 300px at 100% 0%, #ffd184 0%, rgba(255, 209, 132, 0) 68%),
    linear-gradient(140deg, var(--bg-a) 0%, var(--bg-b) 45%, var(--bg-c) 100%);
}

@supports not (zoom: 1) {
  body {
    transform: scale(var(--ui-scale));
    transform-origin: top left;
    width: calc(100% / var(--ui-scale));
  }
}

.page {
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 5.5rem 0 2.8rem;
  display: grid;
  gap: 1rem;
}

.hero,
.countdown-card,
.about-card {
  border-radius: 1.2rem;
  background: var(--card);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero {
  padding: 1.3rem 1.2rem 1rem;
  text-align: center;
}

.chip {
  margin: 0 auto 0.5rem;
  width: fit-content;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent-red);
}

h1 {
  margin: 0;
  font-family: "Bungee", "Franklin Gothic Medium", "Trebuchet MS", sans-serif;
  font-size: clamp(1.55rem, 4.8vw, 2.85rem);
  letter-spacing: 0.01em;
  line-height: 1.08;
}

.subtitle,
.next-date {
  margin: 0.65rem auto 0;
  width: min(62ch, 100%);
  color: var(--text-soft);
  font-size: clamp(0.94rem, 2.1vw, 1.05rem);
}

.next-date strong {
  color: var(--accent-red);
}

.interaction-tip {
  margin: 0.6rem 0 0;
  color: #7f3628;
  font-weight: 700;
  font-size: clamp(0.86rem, 2vw, 0.95rem);
}

.countdown-card {
  padding: 1rem;
}

h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
}

.timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}

.unit {
  text-align: center;
  padding: 0.85rem 0.4rem;
  border-radius: 0.95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 247, 228, 0.92) 100%);
  border: 1px solid rgba(253, 214, 148, 0.75);
}

.unit strong {
  display: block;
  line-height: 1;
  font-family: "Archivo Black", "Verdana", sans-serif;
  font-size: clamp(1.45rem, 5.6vw, 2.2rem);
  color: var(--accent-red);
}

.unit span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.status {
  margin: 0.7rem 0 0;
  font-weight: 700;
  color: #7f3628;
}

.about-card {
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.55rem;
  color: #3f342b;
}

.about-card p {
  margin: 0;
  line-height: 1.45;
}

.race-frame {
  --lane-center: calc(var(--track-lane) * 0.78);
  --corner-nudge: clamp(16px, 2.5vw, 28px);
  position: fixed;
  inset: var(--track-gap);
  border-radius: calc(var(--track-radius) + var(--track-lane));
  pointer-events: none;
  z-index: 9;
}

.race-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--track-lane) solid rgba(108, 58, 30, 0.26);
  box-shadow:
    inset 0 0 0 2px rgba(255, 228, 181, 0.36),
    0 10px 24px rgba(85, 33, 14, 0.14);
}

.race-frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--track-lane) * 0.52);
  border-radius: calc(var(--track-radius) + 6px);
  border: 2px dashed rgba(255, 248, 224, 0.78);
  opacity: 0.92;
}

.finish-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: calc(var(--track-lane) + 10px);
  transform: translateX(-50%);
  border-radius: 0 0 3px 3px;
  background:
    repeating-linear-gradient(
      180deg,
      #fdfcf8 0 5px,
      #2f2f2f 5px 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.2) 0 6px,
      rgba(0, 0, 0, 0.12) 6px 12px
    );
  box-shadow: 0 3px 8px rgba(40, 22, 12, 0.32);
  z-index: 3;
}

.runner-group {
  --runner-lane-shift: 0px;
  --runner-duration: var(--lap-duration);
  --runner-size: clamp(24px, 3.1vw, 36px);
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--runner-size) + 18px);
  height: calc(var(--runner-size) + 15px);
  transform: translate(-50%, -50%);
  animation: lap-around var(--runner-duration) linear infinite;
  z-index: 2;
}

body.motion-path-ready .runner-group {
  transform: none;
  offset-distance: 0%;
  offset-rotate: auto;
  offset-anchor: 50% 50%;
  animation-name: follow-path;
}

.runner-group::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: calc(var(--runner-size) * 0.72);
  height: 7px;
  border-radius: 50%;
  background: rgba(62, 30, 18, 0.24);
  filter: blur(1px);
  transform: translateX(-50%);
  animation: runner-shadow 420ms ease-in-out infinite;
}

.runner-image {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--runner-size);
  height: var(--runner-size);
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgba(70, 32, 12, 0.35));
  animation: run-bob 420ms ease-in-out infinite;
}

.runner-1 {
  --runner-duration: 30s;
  --runner-lane-shift: 0px;
  animation-delay: 0s;
}

.runner-2 {
  --runner-duration: 39s;
  --runner-lane-shift: 0px;
  animation-delay: 0s;
}

.runner-3 {
  --runner-duration: 27s;
  --runner-lane-shift: 0px;
  animation-delay: 0s;
}

.bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.36;
  filter: blur(1px);
  animation: float 9s ease-in-out infinite;
}

.s1 {
  width: 110px;
  height: 110px;
  left: 6%;
  top: 20%;
  background: #ffd94d;
}

.s2 {
  width: 140px;
  height: 140px;
  right: 7%;
  top: 10%;
  background: #ff9766;
  animation-delay: -1.8s;
}

.s3 {
  width: 90px;
  height: 90px;
  left: 13%;
  bottom: 10%;
  background: #ff4d6d;
  animation-delay: -2.6s;
}

.s4 {
  width: 120px;
  height: 120px;
  right: 12%;
  bottom: 14%;
  background: #5a9df0;
  animation-delay: -4.2s;
}

.flags {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  gap: 0.38rem;
  padding: 0.55rem 0.85rem 0;
}

.flags span {
  height: 28px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  animation: sway 2.2s ease-in-out infinite;
}

.flags span:nth-child(4n + 1) { background: var(--accent-red); }
.flags span:nth-child(4n + 2) { background: var(--accent-yellow); }
.flags span:nth-child(4n + 3) { background: var(--accent-blue); }
.flags span:nth-child(4n + 4) { background: var(--accent-green); }

.flags span:nth-child(odd) {
  animation-delay: -0.6s;
}

@keyframes sway {
  0%, 100% { transform: rotate(1deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(3px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes lap-around {
  0%,
  100% {
    left: 50%;
    top: calc(var(--lane-center) + var(--runner-lane-shift));
    transform: translate(-50%, -50%) rotate(0deg);
  }
  12% {
    left: calc(100% - var(--lane-center) - var(--runner-lane-shift) - var(--corner-nudge));
    top: calc(var(--lane-center) + var(--runner-lane-shift));
    transform: translate(-50%, -50%) rotate(0deg);
  }
  14% {
    left: calc(100% - var(--lane-center) - var(--runner-lane-shift));
    top: calc(var(--lane-center) + var(--runner-lane-shift) + var(--corner-nudge));
    transform: translate(-50%, -50%) rotate(90deg);
  }
  37% {
    left: calc(100% - var(--lane-center) - var(--runner-lane-shift));
    top: calc(100% - var(--lane-center) - var(--runner-lane-shift) - var(--corner-nudge));
    transform: translate(-50%, -50%) rotate(90deg);
  }
  39% {
    left: calc(100% - var(--lane-center) - var(--runner-lane-shift) - var(--corner-nudge));
    top: calc(100% - var(--lane-center) - var(--runner-lane-shift));
    transform: translate(-50%, -50%) rotate(180deg);
  }
  62% {
    left: calc(var(--lane-center) + var(--runner-lane-shift) + var(--corner-nudge));
    top: calc(100% - var(--lane-center) - var(--runner-lane-shift));
    transform: translate(-50%, -50%) rotate(180deg);
  }
  64% {
    left: calc(var(--lane-center) + var(--runner-lane-shift));
    top: calc(100% - var(--lane-center) - var(--runner-lane-shift) - var(--corner-nudge));
    transform: translate(-50%, -50%) rotate(270deg);
  }
  87% {
    left: calc(var(--lane-center) + var(--runner-lane-shift));
    top: calc(var(--lane-center) + var(--runner-lane-shift) + var(--corner-nudge));
    transform: translate(-50%, -50%) rotate(270deg);
  }
  89% {
    left: calc(var(--lane-center) + var(--runner-lane-shift) + var(--corner-nudge));
    top: calc(var(--lane-center) + var(--runner-lane-shift));
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes follow-path {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@keyframes run-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-7deg); }
  50% { transform: translateX(-50%) translateY(-2px) rotate(7deg); }
}

@keyframes runner-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.27; }
  50% { transform: translateX(-50%) scaleX(0.82); opacity: 0.2; }
}

.spark {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--spark-width, 12px);
  height: var(--spark-height, 15px);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--spark-color, #f5b700);
  transform: translate(var(--x), var(--y)) rotate(0deg) scale(var(--spark-scale-from, 0.35));
  pointer-events: none;
  z-index: 15;
  animation: burst var(--spark-duration, 920ms) cubic-bezier(0.16, 0.83, 0.23, 0.99) forwards;
}

@keyframes burst {
  0% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(0deg) scale(var(--spark-scale-from, 0.35));
  }
  14% {
    opacity: var(--spark-opacity, 1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)))
      rotate(var(--rot)) scale(var(--spark-scale-to, 1));
  }
}

@media (max-width: 700px) {
  .page {
    padding-top: 4.8rem;
  }

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

  .race-frame {
    --lane-center: calc(var(--track-lane) * 0.72);
    --corner-nudge: clamp(12px, 4.2vw, 22px);
  }

  .runner-group {
    --runner-size: clamp(19px, 6.4vw, 28px);
  }

  .interaction-tip {
    margin-top: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}