:root {
  --asphalt: #08090D;
  --barrier: #F5F0E6;
  --magenta: #FF2E88;
  --lime: #C6FF00;
  --cyan: #00D8FF;
  --orange: #FF6A00;
  --violet: #6B3CFF;
  --lap-shift: 0px;
}

/* Font compliance note: Space Grotesk** Grotesk* for short narrative copy. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--asphalt); color: var(--barrier); }

body { font-family: "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

button { font: inherit; color: inherit; }

.asphalt-grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .62; background: radial-gradient(circle at 15% 20%, rgba(245,240,230,.08) 0 1px, transparent 1px 7px), radial-gradient(circle at 78% 58%, rgba(0,216,255,.08) 0 1px, transparent 1px 9px), linear-gradient(115deg, rgba(107,60,255,.12), transparent 32%, rgba(255,46,136,.08) 58%, transparent 72%); mix-blend-mode: screen; }

.speed-frame { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.speed-frame span { position: absolute; height: 2px; width: 34vw; background: linear-gradient(90deg, transparent, var(--barrier), transparent); opacity: .22; transform: skewX(-28deg); animation: slash 1.8s linear infinite; }
.speed-frame span:nth-child(1) { top: 8%; left: -40vw; animation-delay: .1s; }
.speed-frame span:nth-child(2) { top: 25%; left: -30vw; animation-delay: .6s; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.speed-frame span:nth-child(3) { top: 45%; left: -48vw; animation-delay: 1.1s; }
.speed-frame span:nth-child(4) { top: 63%; left: -36vw; animation-delay: .3s; background: linear-gradient(90deg, transparent, var(--magenta), transparent); }
.speed-frame span:nth-child(5) { top: 78%; left: -55vw; animation-delay: .9s; }
.speed-frame span:nth-child(6) { top: 91%; left: -25vw; animation-delay: 1.35s; background: linear-gradient(90deg, transparent, var(--lime), transparent); }

@keyframes slash { to { transform: translateX(150vw) skewX(-28deg); } }

.start-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(107,60,255,.25), transparent 36%), var(--asphalt); transition: transform .8s cubic-bezier(.8,-.02,.2,1), opacity .55s ease; }
.start-gate.launched { transform: translateX(-112vw) rotate(-4deg); opacity: 0; pointer-events: none; }
.gate-smoke { position: absolute; inset: -15%; background: radial-gradient(circle at 22% 54%, rgba(245,240,230,.18), transparent 10%), radial-gradient(circle at 52% 46%, rgba(107,60,255,.28), transparent 16%), radial-gradient(circle at 81% 57%, rgba(0,216,255,.16), transparent 13%); filter: blur(14px); animation: smokeDrift 5s ease-in-out infinite alternate; }
@keyframes smokeDrift { to { transform: translate3d(4vw,-3vh,0) scale(1.08); } }
.tape { position: absolute; left: -12vw; right: -12vw; padding: 14px 0; text-align: center; white-space: nowrap; color: var(--asphalt); background: repeating-linear-gradient(115deg, var(--lime) 0 28px, var(--orange) 28px 56px); font-family: "Bungee", Impact, fantasy; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 0 28px rgba(198,255,0,.35); animation: tremble .12s steps(2,end) infinite; }
.tape-a { top: 39%; transform: rotate(-7deg); }
.tape-b { top: 54%; transform: rotate(5deg); animation-delay: .05s; }
@keyframes tremble { 50% { translate: 2px -1px; } }
.starter { position: relative; border: 2px solid var(--barrier); border-radius: 999px; background: rgba(8,9,13,.75); padding: 18px 28px; font-family: "Bungee", Impact, fantasy; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 0 0 6px rgba(255,46,136,.22), 0 0 38px rgba(0,216,255,.35); cursor: pointer; transform: rotate(-3deg); }
.starter-kana { display: block; color: var(--cyan); font-size: .78rem; font-family: "Noto Sans JP", sans-serif; }

.circuit { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
.track-svg { position: absolute; inset: -4vh -4vw; width: 108vw; height: 108vh; z-index: 4; pointer-events: none; filter: drop-shadow(0 0 22px rgba(0,216,255,.25)); }
.track-shadow, .track-line, .track-dash { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.track-shadow { stroke: rgba(245,240,230,.12); stroke-width: 70; }
.track-line { stroke: rgba(245,240,230,.88); stroke-width: 16; filter: url(#glow); }
.track-dash { stroke: var(--magenta); stroke-width: 7; stroke-dasharray: 18 32; animation: dashRace 1.1s linear infinite; filter: url(#glow); }
@keyframes dashRace { to { stroke-dashoffset: -100; } }
.spark { position: fixed; z-index: 9; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--barrier) 0 20%, var(--lime) 25% 48%, transparent 55%); box-shadow: 0 0 22px var(--lime), 0 0 44px var(--cyan); transform: translate(-50%, -50%); }

.lap { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translate3d(calc(45vw + var(--lap-shift)),0,0) rotate(4deg) scale(.98); transition: transform .85s cubic-bezier(.18,.9,.2,1.12), opacity .55s ease, visibility .55s; overflow: hidden; }
.lap.active { opacity: 1; visibility: visible; transform: translate3d(0,0,0) rotate(0deg) scale(1); z-index: 3; }
.lap.exit-left { transform: translate3d(calc(-48vw + var(--lap-shift)),0,0) rotate(-5deg) scale(.98); opacity: 0; }

.lap-nav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%) skewY(-10deg); z-index: 20; display: grid; gap: 10px; }
.lap-nav button { width: 48px; height: 34px; border: 2px solid var(--barrier); background: rgba(8,9,13,.75); font-family: "Bungee", Impact, fantasy; cursor: pointer; box-shadow: 5px 5px 0 rgba(255,46,136,.45); transition: transform .25s ease, background .25s ease, color .25s ease; }
.lap-nav button.active { background: var(--lime); color: var(--asphalt); transform: translateX(-14px) rotate(-5deg); }

.garage-pillars { position: absolute; inset: 0; display: flex; justify-content: space-around; opacity: .45; z-index: 0; }
.garage-pillars i { width: 10vw; height: 120vh; background: linear-gradient(90deg, transparent, rgba(245,240,230,.12), transparent), repeating-linear-gradient(0deg, rgba(255,106,0,.5) 0 16px, rgba(8,9,13,.2) 16px 30px); transform: skewX(-12deg); }
.wordmark-wrap { position: absolute; top: 13vh; left: 7vw; z-index: 5; transform: rotate(-7deg); }
.pit-tag, .lap-badge { font-family: "Noto Sans JP", "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.wordmark { margin: 0; font-family: "Racing Sans One", Impact, "Arial Black", sans-serif; font-size: clamp(4rem, 13vw, 12rem); line-height: .75; letter-spacing: -.06em; color: var(--barrier); text-shadow: 8px 8px 0 var(--magenta), 13px 13px 0 var(--violet), 0 0 30px rgba(245,240,230,.2); animation: wordLaunch .9s cubic-bezier(.16,.9,.18,1.2) both; }
body:not(.started) .wordmark { animation-play-state: paused; }
@keyframes wordLaunch { from { transform: translateX(-42vw) skewX(-20deg); filter: blur(8px); } to { transform: translateX(0) skewX(0); filter: blur(0); } }

.placard, .flyer { position: absolute; z-index: 6; max-width: 470px; padding: 28px; color: var(--barrier); background: linear-gradient(135deg, rgba(8,9,13,.88), rgba(8,9,13,.7)); border: 2px solid var(--barrier); box-shadow: 12px 12px 0 rgba(0,216,255,.28), -8px -8px 0 rgba(255,46,136,.22); clip-path: polygon(0 5%, 92% 0, 100% 92%, 8% 100%); }
.placard h2, .flyer h2 { margin: 12px 0; font-family: "Racing Sans One", Impact, "Arial Black", sans-serif; font-size: clamp(2rem, 4vw, 4rem); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.placard p, .flyer p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.lap-badge { display: inline-block; padding: 7px 10px; color: var(--asphalt); background: var(--orange); font-family: "Bungee", Impact, fantasy; letter-spacing: .04em; transform: rotate(-2deg); }
.placard-start { right: 8vw; bottom: 12vh; transform: rotate(4deg); }
.placard-hairpin { left: 8vw; top: 10vh; transform: rotate(-4deg); transform-origin: 10% 90%; }
.placard-finish { left: 9vw; bottom: 12vh; transform: rotate(3deg); }
.flyer-slalom { left: 8vw; top: 16vh; transform: rotate(-5deg); }
.flyer-tunnel { right: 8vw; top: 12vh; transform: rotate(5deg); }

.sound { position: absolute; z-index: 7; margin: 0; font-family: "Bungee", Impact, fantasy; color: var(--lime); text-shadow: 5px 5px 0 var(--magenta); animation: soundSquash 1.6s ease-in-out infinite; }
.skrr { right: 19vw; top: 12vh; font-size: clamp(3rem, 8vw, 8rem); transform: rotate(12deg); }
.shift { left: 45vw; bottom: 11vh; font-size: clamp(3rem, 9vw, 9rem); transform: rotate(-9deg); }
.chika-burst { right: 7vw; bottom: 16vh; font-size: clamp(3rem, 8vw, 8rem); color: var(--orange); }
@keyframes soundSquash { 0%,100% { scale: 1 1; } 45% { scale: 1.18 .82; } 55% { scale: .9 1.12; } }

.charm { position: absolute; z-index: 8; width: 74px; height: 120px; transform-origin: 50% 0; animation: charmSwing 2.3s ease-in-out infinite; }
.charm::before { content: ""; position: absolute; top: 0; left: 34px; width: 4px; height: 48px; background: var(--barrier); }
.charm span { position: absolute; left: 12px; bottom: 0; width: 52px; height: 52px; border: 4px solid var(--barrier); background: var(--magenta); box-shadow: 0 0 22px currentColor; }
.keychain { left: 52vw; top: 8vh; color: var(--magenta); }
.keychain span { border-radius: 50% 50% 45% 45%; }
.cone-charm { right: 20vw; top: 6vh; color: var(--lime); }
.cone-charm span { background: conic-gradient(from 180deg, var(--lime), var(--orange), var(--lime)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.flame-charm { left: 55vw; top: 18vh; color: var(--orange); }
.flame-charm span { background: var(--orange); clip-path: polygon(50% 0, 65% 28%, 92% 45%, 70% 100%, 28% 100%, 10% 45%, 36% 28%); }
.sticker-charm { left: 14vw; bottom: 12vh; color: var(--cyan); }
.sticker-charm span { background: var(--cyan); transform: rotate(10deg); }
.ribbon-charm { right: 18vw; top: 8vh; color: var(--barrier); }
.ribbon-charm span { background: var(--barrier); clip-path: polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
@keyframes charmSwing { 0%,100% { rotate: -8deg; } 50% { rotate: 9deg; } }

.tire-calligraphy { position: absolute; z-index: 2; width: 52vw; height: 20vh; border-radius: 50%; border-top: 26px solid rgba(245,240,230,.16); border-left: 15px solid rgba(245,240,230,.08); filter: blur(.4px); }
.mark-one { left: -4vw; bottom: 9vh; transform: rotate(-12deg); }
.mark-two { right: 0; bottom: 2vh; transform: rotate(10deg); }

.checker-ramp { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0 30%, rgba(0,216,255,.16) 30% 42%, transparent 42%), repeating-conic-gradient(from 45deg at 70% 45%, rgba(245,240,230,.12) 0 25%, transparent 0 50%) 0 0/72px 72px; clip-path: polygon(42% 0, 100% 0, 79% 100%, 20% 100%); }
.cone-field { position: absolute; inset: 19vh 8vw 12vh auto; width: 46vw; z-index: 7; }
.cone { position: absolute; width: 78px; height: 112px; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 0 18px rgba(198,255,0,.4)); transition: transform .26s cubic-bezier(.2,1.7,.4,1); }
.cone span { display: block; width: 100%; height: 100%; background: linear-gradient(var(--lime) 0 18%, var(--orange) 18% 29%, var(--lime) 29% 55%, var(--barrier) 55% 65%, var(--orange) 65%); clip-path: polygon(50% 0, 100% 86%, 88% 100%, 12% 100%, 0 86%); }
.cone::before, .cone::after { content: ""; position: absolute; top: 55%; width: 7px; height: 7px; z-index: 2; border-radius: 50%; background: var(--asphalt); }
.cone::before { left: 32%; } .cone::after { right: 32%; }
.cone:hover { transform: translateY(-18px) rotate(10deg) scale(1.08); }
.cone:nth-child(1) { left: 4%; top: 3%; rotate: -9deg; }
.cone:nth-child(2) { left: 44%; top: 18%; rotate: 8deg; }
.cone:nth-child(3) { left: 12%; top: 48%; rotate: 12deg; }
.cone:nth-child(4) { left: 62%; top: 63%; rotate: -12deg; }

.hairpin-ring { position: absolute; right: 4vw; top: 12vh; width: min(62vw, 720px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 20deg, var(--magenta), var(--cyan), var(--violet), var(--orange), var(--magenta)); clip-path: polygon(50% 0, 100% 0, 100% 70%, 56% 70%, 56% 37%, 35% 37%, 35% 62%, 72% 62%, 72% 100%, 0 100%, 0 0); opacity: .7; animation: wheelHalo 5s linear infinite; }
.hairpin-ring span { position: absolute; inset: 12%; border: 3px dashed rgba(245,240,230,.55); border-radius: 50%; }
.hairpin-ring span:nth-child(2) { inset: 27%; border-color: rgba(198,255,0,.55); animation: wheelHalo 3s linear infinite reverse; }
.hairpin-ring span:nth-child(3) { inset: 42%; border-color: rgba(8,9,13,.8); background: var(--asphalt); }
@keyframes wheelHalo { to { rotate: 360deg; } }
.puddle { position: absolute; left: 26vw; bottom: 9vh; width: 42vw; height: 18vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, rgba(245,240,230,.55), transparent 13%), linear-gradient(90deg, var(--cyan), var(--magenta), var(--violet)); opacity: .72; filter: blur(3px); transform: skewX(-22deg); animation: puddlePulse 2s ease-in-out infinite alternate; }
@keyframes puddlePulse { to { opacity: .95; scale: 1.06 .88; } }

.sticker-wall { position: absolute; left: 5vw; top: 18vh; width: 56vw; height: 64vh; transform: skewY(-7deg); z-index: 7; border-left: 18px solid rgba(245,240,230,.14); background: repeating-linear-gradient(90deg, rgba(245,240,230,.08) 0 5px, transparent 5px 34px); }
.sticker { position: absolute; border: 3px solid var(--asphalt); padding: 12px 18px; font-family: "Bungee", Impact, fantasy; text-transform: uppercase; color: var(--asphalt); box-shadow: 8px 8px 0 rgba(8,9,13,.5); cursor: pointer; transition: transform .28s cubic-bezier(.2,1.8,.35,1), filter .28s ease; }
.sticker:hover, .sticker.peeled { transform: translateY(-16px) rotate(var(--peel, -8deg)) skewX(-8deg); filter: drop-shadow(0 0 18px currentColor); }
.sticker.magenta { --peel: -11deg; left: 8%; top: 5%; background: var(--magenta); }
.sticker.lime { --peel: 8deg; left: 44%; top: 13%; background: var(--lime); }
.sticker.cyan { --peel: -6deg; left: 18%; top: 38%; background: var(--cyan); }
.sticker.orange { --peel: 11deg; left: 58%; top: 46%; background: var(--orange); }
.sticker.violet { --peel: -14deg; left: 5%; top: 70%; background: var(--violet); color: var(--barrier); }
.sticker.white { --peel: 7deg; left: 52%; top: 75%; background: var(--barrier); }

.finish-ribbon { position: absolute; left: -10vw; right: -10vw; top: 22vh; z-index: 8; padding: 18px 0; text-align: center; white-space: nowrap; font-family: "Bungee", Impact, fantasy; letter-spacing: .18em; color: var(--asphalt); background: repeating-linear-gradient(90deg, var(--barrier) 0 32px, var(--asphalt) 32px 64px); transform: rotate(-6deg); box-shadow: 0 0 32px rgba(245,240,230,.38); transition: clip-path .7s cubic-bezier(.2,1,.3,1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.finish-ribbon.cut { clip-path: polygon(0 0, 49% 0, 42% 100%, 0 100%, 0 0, 58% 0, 100% 0, 100% 100%, 52% 100%); }
.shrine { position: absolute; right: 12vw; bottom: 15vh; z-index: 7; width: 270px; height: 300px; }
.torii { position: absolute; inset: 20px 25px auto; height: 125px; border-top: 26px solid var(--orange); border-left: 26px solid var(--orange); border-right: 26px solid var(--orange); filter: drop-shadow(0 0 18px rgba(255,106,0,.7)); }
.torii::before { content: ""; position: absolute; left: -46px; right: -46px; top: -52px; height: 28px; background: var(--magenta); }
.trophy { position: absolute; left: 86px; bottom: 46px; width: 96px; height: 86px; background: linear-gradient(135deg, var(--lime), var(--barrier)); clip-path: polygon(18% 0, 82% 0, 72% 56%, 58% 56%, 58% 76%, 78% 76%, 78% 100%, 22% 100%, 22% 76%, 42% 76%, 42% 56%, 28% 56%); }
.lap-lights { position: absolute; left: 34px; right: 34px; bottom: 0; display: flex; justify-content: space-between; }
.lap-lights i { width: 26px; height: 26px; border-radius: 6px; background: var(--magenta); box-shadow: 0 0 16px var(--magenta); animation: lightPop 1.2s steps(2,end) infinite; }
.lap-lights i:nth-child(2) { background: var(--orange); animation-delay: .15s; box-shadow: 0 0 16px var(--orange); }
.lap-lights i:nth-child(3) { background: var(--lime); animation-delay: .3s; box-shadow: 0 0 16px var(--lime); }
.lap-lights i:nth-child(4) { background: var(--cyan); animation-delay: .45s; box-shadow: 0 0 16px var(--cyan); }
.lap-lights i:nth-child(5) { background: var(--barrier); animation-delay: .6s; box-shadow: 0 0 16px var(--barrier); }
@keyframes lightPop { 50% { transform: translateY(-6px); } }
.restart { position: absolute; right: 10vw; top: 63vh; z-index: 9; border: 2px solid var(--lime); background: var(--asphalt); color: var(--lime); padding: 14px 18px; font-family: "Bungee", Impact, fantasy; text-transform: uppercase; box-shadow: 8px 8px 0 rgba(198,255,0,.22); cursor: pointer; transform: rotate(-4deg); }

@media (max-width: 760px) {
  .placard, .flyer { left: 6vw; right: 6vw; top: auto; bottom: 10vh; max-width: none; padding: 20px; transform: rotate(-2deg); }
  .wordmark-wrap { top: 10vh; left: 5vw; }
  .lap-nav { right: 10px; }
  .cone-field, .sticker-wall { width: 80vw; left: 10vw; }
  .hairpin-ring { width: 92vw; right: -25vw; }
  .shrine { right: 4vw; scale: .78; }
}