/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: #e6ebf2;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* stage is full-bleed */
}

/* Background canvas */
#px-racer{
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw; height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* Overlay layout */
.poster{
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto; /* brand, panel, footer */
  align-items: start;
  justify-items: center;
  padding: clamp(0.75rem, 3.5vw, 2.5rem);
  gap: clamp(0.10rem, 0.8vh, 0.4rem); /* tighter: banner sits closer to brand */
}

/* Brand */
.brand-top{
  margin: clamp(0.25rem, 1vh, 0.6rem) 0 0;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d60c0c; /* racer red */
  text-shadow: 0 0 24px rgba(214,12,12,0.25);
  font-size: clamp(1.8rem, 7vw, 3.8rem);
}

/* Banner panel */
.panel{
  align-self: start; /* pull toward brand */
  place-self: center;
  width: min(680px, 88vw);
  padding: clamp(0.9rem, 2.2vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255,255,255,0.07), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.4);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  margin-bottom: clamp(0.5rem, 3vh, 5vh); /* small; JS enforces big gaps to track */
}

/* Type */
.headline{
  margin: 0 0 .35rem;
  font-weight: 1000;
  font-size: clamp(2.2rem, 9vw, 4.8rem);
  letter-spacing: .02em;
  line-height: 1.02;
  color: #f4f7ff;
  text-shadow: 0 1px 0 rgba(255,255,255,0.12), 0 8px 30px rgba(0,0,0,0.6);
}
.strap{
  margin: 0;
  color: #c6cfda;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  max-width: 58ch;
}

/* Footer */
.foot{
  align-self: end;
  padding-bottom: clamp(0.4rem, 1.5vh, 1rem);
  opacity: .85;
}

@media (prefers-reduced-motion: reduce){
  /* JS renders a single frame */
}