/* Initial Unity: Sorcery. Loud and flat: the game's tilted replay panels, slapped across shouted
   headlines. Three flat colours: true black, the logo's purple, pale lilac. Square corners. */
:root {
  --ground: #000000;
  --surface: #0d0918;      /* one tone step for panels on black */
  --accent: #a480ff;       /* the logo's purple: panels and the action */
  --accent-hi: #bba0ff;
  --pale: #e6dbff;         /* the third flat colour */
  --ink: #f4f0ff;
  --muted: #bdb3d8;
  --on-light: #07040f;     /* ink on purple and lilac */
  --rose: #ff5c8a;         /* errors only */

  --display: "Big Shoulders", "Arial Narrow", system-ui, sans-serif;
  --text: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(3rem, 1.4rem + 6vw, 6.5rem);
  --step-poster: clamp(5rem, 1rem + 13vw, 13rem);

  --m: clamp(20px, 2vw, 32px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; scrollbar-color: #2a1d4a var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--step-body)/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--accent); color: var(--on-light); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--pale); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: .88; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-light); padding: 10px 16px; }
.skip:focus { left: 16px; }
.pad { padding-inline: var(--m); }

/* game shots carry letterbox bars and slanted panel edges: crop them inside every frame */
.shot { overflow: hidden; background: var(--surface); }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
/* where supported, crop the bars from the source so the image keeps its real box */
@supports (object-view-box: inset(0)) {
  .shot img, .hero-shot img { transform: none; object-view-box: inset(13% 6%); }
}

/* ---------- icons: one sprite (assets/icons.svg), square ends, sized to the text they sit with ---------- */
.i { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; }
.btn .i { width: 1.25em; height: 1.25em; }
.hero .fact { display: inline-flex; align-items: center; gap: 8px; }
.poster-list .detail { display: inline-flex; align-items: center; gap: 8px; }
.poster-list .detail .i { color: var(--accent); }
.h-i { width: .62em; height: .62em; margin-right: .14em; vertical-align: .02em; color: var(--accent-hi); }
/* brand marks are masks, so the slips stay type, not icon cards */
.slip-i { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.m-youtube { --mark: url(../assets/brand/youtube.svg); }
.m-tiktok { --mark: url(../assets/brand/tiktok.svg); }
.m-x { --mark: url(../assets/brand/x.svg); }
.m-discord { --mark: url(../assets/brand/discord.svg); }
.trailer .h-i { color: var(--on-light); }
.foot-i { width: .6em; height: .6em; margin-left: .15em; vertical-align: .02em; transition: translate .2s var(--ease); }
.foot-line:hover .foot-i { translate: 8px 0; }
.pick legend { display: flex; align-items: center; gap: 8px; }
.toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.more[aria-expanded="true"] .i { rotate: 180deg; }
.record span { display: inline-flex; align-items: center; gap: 6px; }
.record span .i { color: var(--accent-hi); }
.ghost-wall figcaption .i { align-self: center; width: .8em; height: .8em; color: var(--accent-hi); }

/* ---------- accent words: the impact word and our name switch to a purple serif italic ---------- */
.x { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; color: var(--accent-hi); }
/* in poster headlines the italic runs larger, so its lowercase stands as tall as the capitals around it */
h1 .x, h2 .x { font-size: 1.22em; line-height: .8; padding-right: .06em; }
p .x, span .x { font-size: 1.18em; line-height: 1; }
/* on lilac panels the purple deepens to keep its contrast */
.bleed .bar .x, .site-foot .x { color: #5a2ed1; }
.coupon .x { color: var(--on-light); }

/* ---------- button: flat, square, one colour ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px; border: 0; cursor: pointer; text-decoration: none; background: var(--accent); color: var(--on-light); font: 800 var(--step-body)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; transition: background-color .2s, transform .2s var(--ease); }
.btn:hover { background: var(--pale); transform: translateY(-3px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.dark { background: var(--on-light); color: var(--ink); }
.btn.dark:hover { background: #1c1430; }
.btn[aria-disabled="true"] { background: var(--surface); color: var(--muted); cursor: default; transform: none; }

/* ---------- header: one compact line ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--ground); transition: translate .35s var(--ease); }
.site-head.away { translate: 0 -100%; }
.site-head .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 64px; padding-inline: var(--m); }
.brand img { height: 38px; width: auto; }
.nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; font: 800 var(--step-body)/1 var(--display); text-transform: uppercase; color: var(--muted); transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.site-head .btn { justify-self: end; min-height: 44px; padding: 0 18px; }
.menu-btn { display: none; justify-self: end; width: 44px; height: 44px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .site-head .bar { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; }
  .site-head .btn { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; padding: 8px var(--m) 24px; background: var(--ground); }
  .nav.open { display: flex; }
  .nav a { display: block; padding: 14px 0; font-size: var(--step-lead); }
}

/* ---------- hero: the FD3S replay fills the screen, the headline shouted on the empty road beside it ---------- */
.hero { position: relative; min-height: calc(100svh - 64px); overflow: hidden; display: flex; align-items: flex-end; }
.hero-shot { position: absolute; inset: 0; margin: 0; }
.hero-shot img { object-position: 80% 50%; }
@supports (object-view-box: inset(0)) { .hero-shot img { object-view-box: inset(1% 9.6% 1% 9.6%); } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0.79) 10%, rgb(0 0 0 / 0.63) 20%, rgb(0 0 0 / 0.44) 28%, rgb(0 0 0 / 0.26) 35%, rgb(0 0 0 / 0.12) 42%, rgb(0 0 0 / 0.04) 50%, rgb(0 0 0 / 0.00) 58%), linear-gradient(to top, rgb(0 0 0 / 0.60) 0%, rgb(0 0 0 / 0.54) 7%, rgb(0 0 0 / 0.43) 14%, rgb(0 0 0 / 0.30) 19%, rgb(0 0 0 / 0.18) 24%, rgb(0 0 0 / 0.08) 29%, rgb(0 0 0 / 0.02) 34%, rgb(0 0 0 / 0.00) 40%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
.hero-copy { position: relative; z-index: 1; width: min(52%, 900px); padding: 0 var(--m) clamp(28px, 4vw, 64px); }
.hero h1 { font-size: clamp(5rem, 1rem + 12vw, 14.5rem); line-height: .86; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .line > span { display: block; }
.hero .say { color: var(--ink); max-width: 34ch; margin-top: 24px; font-size: var(--step-lead); line-height: 1.35; font-weight: 600; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.hero .fact { font: 800 1.25rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .line > span { transform: translateY(105%); animation: lift .9s var(--ease) forwards; }
  .js .hero h1 .line:nth-child(2) > span { animation-delay: .11s; }
  .js .hero .say, .js .hero .cta { opacity: 0; animation: fade .6s ease .55s forwards; }
  .hero-shot img { animation: drift 16s ease-in-out infinite alternate; transform-origin: 70% 60%; }
}
@keyframes lift { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes drift { from { scale: 1; } to { scale: 1.025; } }
@media (max-width: 900px) {
  .hero { min-height: auto; flex-direction: column; align-items: stretch; background: var(--ground); }
  .hero-shot { position: relative; aspect-ratio: 16 / 10; }
  .hero-shot img { object-position: 72% 50%; }
  .hero::after { inset: 0 0 auto 0; aspect-ratio: 16 / 10; background: linear-gradient(to top, rgb(0 0 0 / 1.00) 0%, rgb(0 0 0 / 0.90) 8%, rgb(0 0 0 / 0.72) 15%, rgb(0 0 0 / 0.50) 22%, rgb(0 0 0 / 0.30) 27%, rgb(0 0 0 / 0.14) 32%, rgb(0 0 0 / 0.04) 39%, rgb(0 0 0 / 0.00) 45%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
  .hero-copy { width: auto; padding: 8px var(--m) 104px; }
  .hero h1 { font-size: 24vw; }
  .hero .say { margin-top: 16px; font-size: 1.125rem; }
}

/* ---------- intro: statement tiles ---------- */
/* the FC3S fills the big tile */
.tile-a { grid-column: 1 / 8; grid-row: 1; padding: clamp(20px, 2.4vw, 36px); align-items: flex-start; justify-content: flex-start; }
/* the FC3S sits bottom left, so the heading takes the sky on a scrim from the top */
.tile-a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(0 0 0 / 0.80) 0%, rgb(0 0 0 / 0.72) 11%, rgb(0 0 0 / 0.58) 20%, rgb(0 0 0 / 0.40) 29%, rgb(0 0 0 / 0.24) 36%, rgb(0 0 0 / 0.11) 43%, rgb(0 0 0 / 0.03) 52%, rgb(0 0 0 / 0.00) 60%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
.tile-a img { position: absolute; inset: 0; }
.tile-a h2 { position: relative; z-index: 1; font-size: clamp(4rem, 1rem + 9vw, 9.5rem); line-height: .98; }
.tile-a h2 span { color: var(--ink); }
@media (max-width: 760px) {
  .tile-a { grid-column: auto; min-height: 60svh; }
  .tile-a h2 { font-size: 17vw; }
}

/* ---------- cars: prints dropped on the headline ---------- */
.prints { position: relative; min-height: 0; display: block; overflow: hidden; padding-top: clamp(48px, 6vw, 88px); margin-top: clamp(56px, 6vw, 96px); background: var(--accent); color: var(--on-light); }
.prints h2 { font-size: clamp(5rem, 1rem + 11vw, 11rem); line-height: .85; text-align: center; position: relative; z-index: 1; }
.print { position: relative; padding: 10px; background: var(--pale); transition: transform .25s var(--ease); z-index: 2; transform: var(--tilt); }
.print .shot { aspect-ratio: 4 / 3; }
.print-row { display: flex; justify-content: center; align-items: flex-start; margin-top: 48px; padding-bottom: 72px; }
.print figcaption { padding: 8px 2px 0; color: var(--on-light); font-weight: 600; }
.print:hover { transform: rotate(0) scale(1.03); z-index: 4; }
.p1 { --tilt: rotate(-6deg); width: 44vw; }
.p2 { --tilt: rotate(5deg); width: 44vw; z-index: 3; }
.p3 { --tilt: rotate(-2deg) translateY(18%); width: 28vw; margin-inline: -7vw; z-index: 4; }
.prints .note { position: relative; z-index: 1; max-width: 46ch; margin: 24px auto 0; text-align: center; font-weight: 600; font-size: var(--step-lead); line-height: 1.35; padding-inline: var(--m); }
@media (max-width: 900px) {
  .prints { min-height: 0; padding-bottom: 0; }
  .prints h2 { font-size: clamp(3.5rem, 15vw, 8rem); }
  .print-row { flex-direction: column; align-items: center; gap: 20px; margin-top: 24px; padding-bottom: 0; }
  .print { width: 86vw; margin: 0; }
  .p1 { --tilt: rotate(-4deg); } .p2 { --tilt: rotate(3deg); }
  .p3 { display: none; }
  .prints .note { position: static; margin: 20px var(--m) 0; font-size: 1rem; }
}

/* the whole garage, side by side like the car select screen */
.lineup { list-style: none; margin: 0; padding: 72px var(--m) clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 28px 16px; position: relative; z-index: 1; }
.lineup li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lineup img { width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: contain; object-position: left bottom; margin-bottom: 8px; transition: translate .25s var(--ease); }
.lineup li:hover img { translate: 6px 0; }
.lineup b { font: 800 clamp(1.25rem, .9rem + .8vw, 1.75rem)/1 var(--display); text-transform: uppercase; }
.lineup span { font-weight: 600; font-size: .9375rem; }
@media (max-width: 900px) { .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 40px; } }

/* ---------- passes: one item per poster line ---------- */
.poster-list { padding: clamp(56px, 6vw, 96px) var(--m) 0; }
@media (min-width: 1101px) { .poster-list { padding-right: calc(var(--m) + 36px); } } /* clear the side dots */
.poster-list h2 { font-size: var(--step-head); margin-bottom: 32px; color: var(--accent); }
.poster-list ul { list-style: none; margin: 0; padding: 0; }
.poster-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.poster-list .item { font: 800 var(--step-poster)/1.02 var(--display); text-transform: uppercase; letter-spacing: -0.005em; transition: color .2s; }
.poster-list li:hover .item { color: var(--accent); }
.poster-list .detail { font: 600 var(--step-lead)/1.2 var(--text); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.poster-list .after { margin-top: 32px; max-width: 52ch; font-size: var(--step-lead); line-height: 1.35; }
@media (max-width: 760px) {
  .poster-list li { flex-direction: column; gap: 6px; margin-bottom: 22px; }
  .poster-list .item { font-size: 21vw; }
  .poster-list .detail { text-align: left; font-size: .9375rem; }
}

/* ---------- battle: full-width replays, the words on a purple-black scrim beside the car ---------- */
.stack-head { padding: clamp(56px, 6vw, 96px) var(--m) 28px; }
.stack-head h2 { font-size: var(--step-head); }
.sheet { position: relative; overflow: hidden; --scrim: 0 0 0; }
.sheet + .sheet { margin-top: 8px; }
.sheet .shot { width: 100%; height: min(86svh, 54vw); }
/* each crop keeps its car in view; the words go on the empty side of the frame */
.sheet:nth-of-type(1) .shot img { object-position: 0% 50%; }
.sheet:nth-of-type(2) .shot img { object-position: 25% 50%; }
.sheet:nth-of-type(3) .shot img { object-position: 75% 50%; }
.sheet:nth-of-type(4) .shot img { object-position: 0% 50%; }
.sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgb(0 0 0 / 0.90) 0%, rgb(0 0 0 / 0.81) 12%, rgb(0 0 0 / 0.65) 22%, rgb(0 0 0 / 0.45) 31%, rgb(0 0 0 / 0.27) 38%, rgb(0 0 0 / 0.13) 46%, rgb(0 0 0 / 0.04) 55%, rgb(0 0 0 / 0.00) 64%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
.sheet.left::after { background: linear-gradient(to right, rgb(0 0 0 / 0.90) 0%, rgb(0 0 0 / 0.81) 12%, rgb(0 0 0 / 0.65) 22%, rgb(0 0 0 / 0.45) 31%, rgb(0 0 0 / 0.27) 38%, rgb(0 0 0 / 0.13) 46%, rgb(0 0 0 / 0.04) 55%, rgb(0 0 0 / 0.00) 64%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
.sheet .copy { position: absolute; z-index: 1; right: var(--m); bottom: clamp(24px, 3.4vw, 56px); width: min(40%, 640px); display: flex; flex-direction: column; gap: 18px; }
.sheet.left .copy { right: auto; left: var(--m); }
.sheet h3 { font-size: clamp(3.5rem, 1rem + 6vw, 7.5rem); line-height: .9; color: var(--ink); }
.sheet h3 span { color: inherit; }
.sheet p { max-width: 36ch; padding-left: 18px; border-left: 6px solid var(--accent); color: var(--ink); font-size: var(--step-lead); line-height: 1.35; font-weight: 600; }
@media (max-width: 760px) {
  .sheet .shot { height: auto; aspect-ratio: 4 / 3; }
  .sheet::after, .sheet.left::after { inset: 0 0 auto 0; aspect-ratio: 4 / 3; background: linear-gradient(to top, rgb(0 0 0 / 1.00) 0%, rgb(0 0 0 / 0.90) 8%, rgb(0 0 0 / 0.72) 15%, rgb(0 0 0 / 0.50) 22%, rgb(0 0 0 / 0.30) 27%, rgb(0 0 0 / 0.14) 32%, rgb(0 0 0 / 0.04) 39%, rgb(0 0 0 / 0.00) 45%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
  .sheet { display: flex; flex-direction: column; background: rgb(var(--scrim)); }
  .sheet .shot { order: -1; }
  .sheet .copy, .sheet.left .copy { position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 4px var(--m) 28px; gap: 12px; }
  .sheet h3 { font-size: 14vw; }
  .sheet p { font-size: 1.0625rem; padding-left: 14px; border-left-width: 5px; }
}

/* ---------- ready to race: one word is the button ---------- */
.word-band { display: block; position: relative; min-height: 86svh; margin-top: clamp(56px, 6vw, 96px); background: var(--accent); color: var(--on-light); text-decoration: none; overflow: hidden; transition: background-color .15s, color .15s; }
.word-band:hover, .word-band:focus-visible { background: var(--on-light); color: var(--accent); outline-offset: -6px; }
.word-band .top { display: flex; justify-content: space-between; gap: 24px; padding: 20px var(--m); position: relative; z-index: 2; }
.word-band h2 { font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); line-height: 1; }
.word-band .top p { max-width: 40ch; font-weight: 600; margin-top: 12px; }
.word-band svg { width: 48px; height: 48px; flex: none; }
.word-band .word { position: absolute; left: var(--m); right: var(--m); bottom: 24px; font: 800 clamp(8rem, 1rem + 36vw, 36rem)/.76 var(--display); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 760px) { .word-band { min-height: 52svh; } .word-band .word { font-size: 52vw; } .word-band svg { width: 32px; height: 32px; } }

/* ---------- follow: full-bleed replay with slips along the bottom ---------- */
.follow { position: relative; min-height: 96svh; margin-top: clamp(56px, 6vw, 96px); overflow: hidden; }
.follow > .shot { position: absolute; inset: 0; }
.follow .lede { position: relative; z-index: 2; margin-left: 18%; margin-top: 10svh; max-width: 560px; background: var(--ground); padding: 28px 32px; }
.follow .lede h2 { font-size: var(--step-head); margin-bottom: 16px; }
.follow .lede p { font-size: var(--step-lead); line-height: 1.35; }
.slips { position: absolute; left: var(--m); right: var(--m); bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.slip { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 56px 22px 20px; background: var(--pale); color: var(--on-light); text-decoration: none; transition: transform .25s var(--ease); }
.slip:hover { transform: translateY(-10px) rotate(0); }
.slip .name { font: 800 clamp(2rem, 1rem + 2.6vw, 3.25rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.slip .state { font-weight: 600; }
.slip:nth-child(1) { height: 30svh; transform: rotate(-1.5deg); }
.slip:nth-child(2) { height: 40svh; }
.slip:nth-child(3) { height: 26svh; transform: rotate(1.5deg); }
.slip:nth-child(4) { height: 36svh; background: var(--accent); }
@media (max-width: 900px) {
  .follow { min-height: 100svh; }
  .follow .lede { margin: 6svh var(--m) 0; padding: 20px; }
  .slips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .slip:nth-child(n) { height: auto; min-height: 120px; transform: none; }
  .slip .name { font-size: 1.75rem; }
}

/* ---------- community: one replay bleeding off two edges, caption on a colour bar ---------- */
.bleed { position: relative; margin-top: clamp(56px, 6vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.bleed > .shot { grid-column: 1 / 11; grid-row: 1; aspect-ratio: 16 / 9; }
.bleed .bar { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 2; background: var(--pale); color: var(--on-light); padding: clamp(24px, 3vw, 44px); margin-bottom: -48px; display: flex; flex-direction: column; gap: 20px; }
.bleed h2 { font-size: var(--step-head); }
.bleed p { font-size: var(--step-lead); line-height: 1.35; font-weight: 600; }
.bleed ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bleed li { display: flex; align-items: baseline; gap: 10px; }
.bleed li .i { align-self: center; color: var(--accent); }
.invite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.invite code { font: 600 var(--step-body)/1 var(--text); padding: 20px; background: var(--on-light); color: var(--ink); user-select: all; }
.copy-note { min-height: 1.4em; }
@media (max-width: 900px) {
  .bleed { display: block; }
  .bleed .bar { margin: -32px var(--m) 0; }
}

/* ---------- trailer: the biggest picture on the page ---------- */
.trailer { margin-top: clamp(56px, 6vw, 96px); position: relative; }
.trailer > .shot { aspect-ratio: 21 / 9; }
.trailer .bar { position: absolute; left: var(--m); bottom: var(--m); z-index: 2; background: var(--accent); color: var(--on-light); padding: 24px 28px; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.trailer h2 { font-size: var(--step-head); }
.trailer p { font-weight: 600; }
@media (max-width: 760px) { .trailer > .shot { aspect-ratio: 4 / 3; } .trailer .bar { position: relative; left: 0; bottom: 0; max-width: none; margin: -24px var(--m) 0; } }

/* ---------- contact: the clip-out coupon ---------- */
.coupon-wrap { padding: clamp(56px, 6vw, 96px) var(--m); }
.coupon { display: grid; grid-template-columns: 46fr 54fr; background: var(--accent); color: var(--on-light); max-width: 1240px; margin-inline: auto;
  -webkit-mask: radial-gradient(circle 14px at 46% 0, transparent 13.5px, #000 14px) top / 100% 51% no-repeat, radial-gradient(circle 14px at 46% 100%, transparent 13.5px, #000 14px) bottom / 100% 51% no-repeat; /* taste-skill-ignore: coupon notch geometry */
          mask: radial-gradient(circle 14px at 46% 0, transparent 13.5px, #000 14px) top / 100% 51% no-repeat, radial-gradient(circle 14px at 46% 100%, transparent 13.5px, #000 14px) bottom / 100% 51% no-repeat; /* taste-skill-ignore: coupon notch geometry */ }
.coupon .left { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; border-right: 5px dotted var(--ground); }
.coupon h2 { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); }
.coupon .left p { font-weight: 600; }
.coupon form { padding: 48px; display: grid; gap: 10px; }
.coupon input, .coupon textarea, .coupon select { width: 100%; min-height: 54px; border: 0; background: #c6adff; color: var(--on-light); font: 600 var(--step-body)/1.3 var(--text); padding: 14px 16px; }
.coupon textarea { min-height: 128px; resize: vertical; }
.coupon ::placeholder { color: #3a2a63; }
.coupon input:focus, .coupon textarea:focus, .coupon select:focus { outline: 3px solid var(--on-light); outline-offset: 0; }
.coupon [aria-invalid="true"] { outline: 3px solid var(--rose); }
.coupon button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border: 0; background: var(--on-light); color: var(--ink); font: 800 var(--step-body)/1 var(--display); text-transform: uppercase; cursor: pointer; transition: background-color .2s; }
.coupon button[type="submit"]:hover { background: #1f1538; }
.form-msg { min-height: 1.4em; font-weight: 600; }
@media (max-width: 760px) {
  .coupon { grid-template-columns: 1fr;
    -webkit-mask: radial-gradient(circle 14px at 0 40%, transparent 13.5px, #000 14px) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 40%, transparent 13.5px, #000 14px) right / 51% 100% no-repeat; /* taste-skill-ignore: coupon notch geometry */
            mask: radial-gradient(circle 14px at 0 40%, transparent 13.5px, #000 14px) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 40%, transparent 13.5px, #000 14px) right / 51% 100% no-repeat; /* taste-skill-ignore: coupon notch geometry */ }
  .coupon .left { border-right: 0; border-bottom: 5px dotted var(--ground); padding: 28px 24px; }
  .coupon form { padding: 28px 24px; }
}

/* ---------- footer: the way in is the headline ---------- */
.site-foot { min-height: 0; margin-top: clamp(56px, 6vw, 96px); background: var(--pale); color: var(--on-light); display: flex; flex-direction: column; justify-content: space-between; padding: 40px var(--m) 28px; }
.foot-top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.foot-top .notes { display: grid; gap: 6px; max-width: 46ch; font-weight: 600; }
.foot-top img { height: 44px; width: auto; filter: brightness(0); margin-bottom: 8px; }
.foot-top a { font-weight: 600; }
.foot-line { display: block; font: 800 clamp(4rem, 1rem + 11vw, 13rem)/.86 var(--display); text-transform: uppercase; letter-spacing: -0.01em; text-decoration: none; margin-block: 56px 32px; transition: color .2s; }
.foot-line:hover { color: #5b3bb0; }
.foot-meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; font-weight: 600; }
.foot-meta nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-meta a { text-decoration: none; }
.foot-meta a:hover { text-decoration: underline; }
.foot-meta .right { text-align: right; }
@media (max-width: 760px) {
  .foot-top { flex-direction: column; }
  .foot-line { font-size: 12vw; }
  .foot-meta { grid-template-columns: 1fr; }
  .foot-meta .right { text-align: left; }
}

/* ---------- side dots and back to top, as on IUR ---------- */
.dots { position: fixed; right: max(8px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; mix-blend-mode: difference; }
.dots a { display: grid; place-items: center; width: 24px; height: 22px; }
.dots a span { width: 10px; height: 10px; background: #6d6380; transition: background-color .3s, transform .3s var(--ease); }
.dots a:hover span { background: #fff; }
.dots a[aria-current="true"] span { background: #fff; transform: scale(1.3); }
@media (max-width: 1100px) { .dots { display: none; } }
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: 52px; height: 52px; display: grid; place-items: center; background: var(--accent); color: var(--on-light); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s, transform .2s var(--ease); }
.to-top svg { width: 22px; height: 22px; }
.to-top.show { opacity: 1; visibility: visible; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* ---------- entrances: each section's parts rise in turn, once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; translate: 0 28px; transition: opacity .5s var(--ease), translate .5s var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
  .js .rise:not(.in) { pointer-events: none; }
  .js .rise.in { opacity: 1; translate: 0 0; }
}

/* ---------- leaderboard page ---------- */
/* hero: the Roadster fills the screen on the right, the headline on an eased black fade at left */
.lb-hero { position: relative; min-height: min(58svh, 540px); overflow: hidden; display: flex; align-items: flex-end; }
.lb-hero > .shot { position: absolute; inset: 0 0 0 30%; overflow: hidden; }
.lb-hero > .shot img { object-position: 90% 50%; }
.lb-hero > .shot { background: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .35) 12%, rgb(0 0 0 / .75) 24%, #000 38%), linear-gradient(to top, transparent 0%, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .35) 12%, rgb(0 0 0 / .75) 24%, #000 38%), linear-gradient(to top, transparent 0%, #000 22%); mask-composite: intersect; } /* taste-skill-ignore: user asked for the picture to fade into the page behind the words */
.lb-copy { position: relative; z-index: 1; width: min(46%, 820px); padding: 0 var(--m) clamp(28px, 4vw, 56px); }
.lb-hero h1 { font-size: clamp(4rem, 1rem + 8vw, 10rem); line-height: .86; }
.lb-hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.lb-hero h1 .line > span { display: block; }
.lb-hero .say { max-width: 36ch; margin-top: 24px; font-size: var(--step-lead); line-height: 1.35; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js .lb-hero h1 .line > span { transform: translateY(105%); animation: lift .9s var(--ease) forwards; }
  .js .lb-hero h1 .line:nth-child(2) > span { animation-delay: .11s; }
  .js .lb-hero .say { opacity: 0; animation: fade .6s ease .55s forwards; }
  .lb-hero > .shot img { animation: drift 16s ease-in-out infinite alternate; transform-origin: 70% 60%; }
}
@media (max-width: 900px) {
  .lb-hero { min-height: auto; flex-direction: column; align-items: stretch; }
  .lb-hero > .shot { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .lb-hero > .shot img { object-position: 75% 50%; }
  .lb-hero > .shot { -webkit-mask-image: none; mask-image: none; }
  .lb-hero > .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 1.00) 0%, rgb(0 0 0 / 0.90) 8%, rgb(0 0 0 / 0.72) 15%, rgb(0 0 0 / 0.50) 22%, rgb(0 0 0 / 0.30) 27%, rgb(0 0 0 / 0.14) 32%, rgb(0 0 0 / 0.04) 39%, rgb(0 0 0 / 0.00) 45%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
  .lb-copy { width: auto; padding: 8px var(--m) 8px; }
  .lb-hero h1 { font-size: 24vw; }
  .lb-hero .say { margin-top: 16px; font-size: 1.125rem; }
}
/* ---------- board: one panel is the page's star; quiet options sit in a sticky column at its left ---------- */
.board { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding: clamp(40px, 5vw, 72px) var(--m) 0; }
.pickers { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 26px; }
.pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font: 800 1.125rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); }
.pick legend ~ * { clear: both; }
.track-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.track-list button { position: relative; min-height: 30px; padding: 0 0 0 12px; border: 0; background: none; color: var(--muted); text-align: left; font: 800 1.0625rem/1 var(--display); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .15s, padding-left .2s var(--ease); }
.track-list button::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: transparent; }
.track-list button:hover { color: var(--ink); }
.track-list button[aria-pressed="true"] { color: var(--ink); padding-left: 16px; }
.track-list button[aria-pressed="true"]::before { background: var(--accent); width: 6px; }
.toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--surface); }
.toggle button { min-height: 36px; border: 0; background: none; color: var(--muted); font: 800 1rem/1 var(--display); text-transform: uppercase; cursor: pointer; transition: background-color .15s, color .15s; }
.toggle button:hover { color: var(--ink); }
.toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-light); }
/* car chips: short codes, three to a row, the choice lit purple */
.car-toggle { display: none; }
.car-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.car-grid button { min-height: 30px; padding: 0 2px; white-space: nowrap; border: 0; background: var(--surface); color: var(--muted); font: 800 .9375rem/1 var(--display); text-transform: uppercase; cursor: pointer; transition: background-color .15s, color .15s; }
.car-grid button.all { grid-column: 1 / -1; }
.car-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 46px; padding: 5px 2px 4px; }
.car-grid button.all { min-height: 32px; }
.chip-car { width: 40px; height: 14px; object-fit: contain; }
.car-grid button:not([aria-pressed="true"]) .chip-car { opacity: .8; }
.car-none { color: var(--muted); }
.car-grid button:hover { color: var(--ink); background: #1c1430; }
.car-grid button[aria-pressed="true"] { background: var(--accent); color: var(--on-light); }

.board-main { min-width: 0; background: var(--surface); }
.board-head { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; min-height: clamp(220px, 22vw, 320px); padding: clamp(20px, 2.4vw, 36px); background: var(--ground); }
/* the pass's replay sits on the right and melts into black behind the name */
.bh-art { position: absolute; inset: 0 0 0 30%; z-index: -2; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .4) 18%, #000 50%); mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .4) 18%, #000 50%); } /* taste-skill-ignore: user asked for the picture to fade into the page behind the words */
.bh-art img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
@supports (object-view-box: inset(0)) { .bh-art img { object-view-box: inset(13% 6%); } }
/* 最速, "fastest", stamped huge behind the board's name */
.bh-mark { position: absolute; z-index: -1; right: -.04em; bottom: -.2em; font: 900 clamp(8rem, 4rem + 12vw, 17rem)/1 "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif; color: var(--accent); opacity: .22; pointer-events: none; user-select: none; }
.bh-copy, .record { position: relative; }
.board-head h2 .bh-line { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.board-head h2 .bh-line > span { display: inline-block; }
.board-head h2 { font-size: clamp(3rem, 1rem + 5vw, 7rem); line-height: .9; }
.board-head h2 #bt-layout { color: var(--accent-hi); }
.board-sub { margin-top: 10px; font-weight: 600; color: var(--muted); }
.record { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.record span { font: 800 1rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.record b { font: 800 clamp(2.5rem, 1rem + 3vw, 4.75rem)/1 var(--display); font-variant-numeric: tabular-nums; }

.board-table { overflow-x: auto; }
.board-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.board-table th, .board-table td { text-align: left; padding: 0 clamp(12px, 1.6vw, 24px); height: 54px; }
.board-table th { height: 40px; font: 800 .9375rem/1 var(--display); text-transform: uppercase; color: var(--muted); background: var(--ground); }
.board-table th:last-child, .board-table td.time { text-align: right; }
.board-table tbody tr { background: var(--surface); }
.board-table tbody td { background: inherit; } /* cells carry the row colour so no seams show between them */
.board-table tbody tr:nth-child(even) { background: #120d20; }
.board-table tbody tr:hover { background: #1c1430; }
.board-table td { font-size: 1.0625rem; }
.board-table td.n { width: 64px; font: 800 1.375rem/1 var(--display); color: var(--muted); }
.board-table td.who { font-weight: 600; }
.board-table .car-m { display: none; }
.board-table td.car { white-space: nowrap; }
.row-car { display: inline-block; width: 58px; height: 22px; margin-right: 10px; object-fit: contain; vertical-align: middle; }
.board-table tr.top .row-car { width: 84px; height: 30px; }
.board-table .tag { display: inline-block; vertical-align: middle; padding: 5px 8px; background: var(--ground); font: 800 .9375rem/1 var(--display); text-transform: uppercase; }
.board-table td.gap { width: 18%; color: var(--muted); }
.board-table td.gap .bar { display: inline-block; vertical-align: middle; width: calc(var(--w) * .6); height: 6px; margin-right: 10px; background: var(--accent); opacity: .55; }
.board-table td.time { font: 800 1.5rem/1 var(--display); }
/* the top three are rows like the rest, only louder */
.board-table tr.top td { height: 68px; }
.board-table tr.top td.n { font-size: 2.25rem; color: var(--accent-hi); }
.board-table tr.top td.who { font: 800 1.375rem/1 var(--display); text-transform: uppercase; }
.board-table tr.top td.time { font-size: 2rem; }
.board-table tr.rank1, .board-table tr.rank1:hover { background: var(--accent); color: var(--on-light); }
.board-table tr.rank1 td { height: 80px; }
.board-table tr.rank1 td.n, .board-table tr.rank1 td.gap { color: var(--on-light); }
.board-table tr.rank1 td.gap .gv { font: 800 1rem/1 var(--display); text-transform: uppercase; }
.board-table tr.rank1 .tag { background: var(--on-light); color: var(--accent-hi); }
.board-table tr.rank1 td.time { font-size: 2.5rem; }
.board-table tr.rank2, .board-table tr.rank3 { background: #1a1230; }
/* ranks: the podium keeps a coloured edge down its left side */
.board-table tbody tr.row td:first-child { border-left: 5px solid transparent; transition: border-color .2s; }
.board-table tbody tr.row:hover td:first-child { border-left-color: var(--accent); }
.board-table tbody tr.rank1 td:first-child { border-left-color: var(--pale); }
.board-table tbody tr.rank2 td:first-child { border-left-color: var(--accent-hi); }
.board-table tbody tr.rank3 td:first-child { border-left-color: var(--accent); }
.board-table tbody tr.row { transition: background-color .2s; }
.board-table tr.row:hover td.time { color: var(--accent-hi); }
.board-table tr.rank1:hover td.time { color: var(--on-light); }
.row-open > .i:first-child { rotate: none; }

/* a row opens to its four sector splits */
.board-table tr.row { cursor: pointer; }
.row-open { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.row-open .i { width: .8em; height: .8em; color: var(--accent-hi); transition: rotate .2s var(--ease); }
.board-table tr.rank1 .row-open .i { color: var(--on-light); }
.row-open[aria-expanded="true"] .i { rotate: 180deg; }
.board-table tr.row:hover .row-open span { text-decoration: underline; text-underline-offset: 4px; }
.board-table tr.open:not(.rank1) { background: #1c1430; }
.board-table tr.detail, .board-table tr.detail:hover { background: var(--ground); }
.board-table tr.detail td { height: auto; padding: 18px clamp(12px, 1.6vw, 24px) 22px; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.sec-title { display: inline-flex; align-items: center; gap: 8px; font: 800 1.125rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); }
.sec-date { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.sec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sec { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); }
.sec-n { font: 800 .9375rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.sec-t { font: 800 clamp(1.75rem, 1rem + 1.4vw, 2.5rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.sec-d { font-size: .875rem; color: var(--muted); }
.sec.best { background: var(--accent); color: var(--on-light); }
.sec.best .sec-n, .sec.best .sec-d { color: var(--on-light); }
@media (max-width: 640px) { .sec-grid { grid-template-columns: 1fr 1fr; } .board-table tr.detail td { padding: 14px 10px 16px; } .sec { padding: 12px; } }
.more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 0; background: var(--ground); color: var(--accent-hi); font: 800 1.0625rem/1 var(--display); text-transform: uppercase; cursor: pointer; transition: color .15s, background-color .15s; }
.more:hover { background: #1c1430; color: var(--ink); }
.sample-note { padding: 14px clamp(12px, 1.6vw, 24px); background: var(--ground); color: var(--muted); font-size: .9375rem; }

@media (max-width: 900px) {
  /* phones and tablets: options fold into one compact bar above the board */
  .board { grid-template-columns: 1fr; gap: 24px; }
  .pickers { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 8px; }
  .pickers .pick:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .pickers .pick-car { grid-column: 2; grid-row: 1; }
  .track-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .track-list button { flex: none; min-height: 36px; padding: 0 10px; background: var(--surface); font-size: 1rem; }
  .track-list button::before { display: none; }
  .track-list button[aria-pressed="true"] { padding-left: 10px; background: var(--accent); color: var(--on-light); }
  .car-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; padding: 0 12px; border: 0; background: var(--surface); color: var(--ink); font: 800 1rem/1 var(--display); text-transform: uppercase; cursor: pointer; }
  .car-toggle svg { width: 16px; height: 16px; color: var(--accent-hi); transition: rotate .2s; }
  .car-toggle[aria-expanded="true"] svg { rotate: 180deg; }
  .pick-car { position: relative; }
  .car-grid { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; }
  .car-grid.open { display: grid; position: absolute; right: 0; z-index: 5; width: min(340px, calc(100vw - 2 * var(--m))); padding: 8px; background: var(--ground); }
  .board-head { flex-direction: column; align-items: flex-start; }
  .record { align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  .board-head h2 { font-size: 13vw; }
  .board-table th, .board-table td { padding: 0 10px; height: 54px; }
  .board-table .c-tier, .board-table th:nth-child(5), .board-table td.car, .board-table th:nth-child(6), .board-table td.gap { display: none; }
  .board-table td.n { width: 40px; }
  .board-table .car-m { display: block; margin-top: 3px; font: 400 .8125rem/1 var(--text); color: var(--muted); text-transform: none; }
  .board-table tr.rank1 .car-m { color: var(--on-light); }
  .board-table td.time { font-size: 1.25rem; }
  .board-table tr.top td.who { font-size: 1.125rem; }
  .board-table tr.top td.time { font-size: 1.5rem; }
  .board-table tr.rank1 td.time { font-size: 1.75rem; }
  .board-table tr.top td.n { font-size: 1.75rem; }
}
.ghost-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 120px 8px 0; }
.ghost-wall h2 { grid-column: 1 / -1; font-size: var(--step-head); padding: 0 calc(var(--m) - 8px) 24px; }
/* three steps, each a replay with its words on an eased fade along the bottom, under the car */
.ghost-wall .shot { position: relative; margin: 0; aspect-ratio: 16 / 10; }
.ghost-wall .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.77) 9%, rgb(0 0 0 / 0.61) 16%, rgb(0 0 0 / 0.42) 23%, rgb(0 0 0 / 0.26) 29%, rgb(0 0 0 / 0.12) 35%, rgb(0 0 0 / 0.03) 41%, rgb(0 0 0 / 0.00) 48%); /* taste-skill-ignore: user asked for gradient scrims behind the words */ }
.ghost-wall figcaption { position: absolute; z-index: 1; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); display: flex; align-items: baseline; gap: .35em; right: 16px; font: 800 clamp(1.5rem, .6rem + 1.8vw, 3.25rem)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.ghost-wall figcaption b { color: var(--accent-hi); font-size: 1.4em; font-weight: 900; }
.ghost-wall .g1 { grid-column: 1 / 8; grid-row: 2 / 4; aspect-ratio: auto; }
.ghost-wall .g1 figcaption { font-size: clamp(2.25rem, 1rem + 3.4vw, 5rem); }
.ghost-wall .g1 img { object-position: 70% 50%; }
.ghost-wall .g2 { grid-column: 8 / 13; grid-row: 2; }
.ghost-wall .g2 img { object-position: 70% 40%; }
.ghost-wall .g3 { grid-column: 8 / 13; grid-row: 3; }
.ghost-wall .g3 img { object-position: 15% 50%; }
@media (max-width: 900px) { .ghost-wall { grid-template-columns: 1fr; } .ghost-wall .g1, .ghost-wall .g2, .ghost-wall .g3 { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; } .ghost-wall .g1 figcaption { font-size: 2rem; } }

/* ---------- leaderboard motion: a new board deals in, the record time rolls up ---------- */
@media (prefers-reduced-motion: no-preference) {
  .board-head.deal .bh-line > span { animation: lb-lift .7s var(--ease) both; }
  .board-head.deal .bh-line:nth-child(2) > span { animation-delay: .08s; }
  .board-head.deal .bh-art img { animation: lb-art 1.2s var(--ease) both; }
  .board-head.deal .bh-mark { animation: lb-stamp .6s var(--ease) .25s both; }
  .board-head.deal .board-sub { animation: lb-fade .5s ease .3s both; }
  #rows.deal tr.row { animation: lb-row .55s var(--ease) var(--d) both; }
  #rows.deal td.gap .bar { transform-origin: left; animation: lb-bar .8s var(--ease) calc(var(--d) + .2s) both; }
  #rows.deal tr.rank1 { animation: lb-row .55s var(--ease) var(--d) both, lb-flash 1s ease .45s both; }
  .board-table tr.rank1 td.n { animation: lb-pulse 2.4s ease-in-out 1.2s infinite; }
  tr.detail .sec-head { animation: lb-fade .3s ease both; }
  tr.detail .sec { animation: lb-drop .45s var(--ease) both; }
  tr.detail .sec:nth-child(2) { animation-delay: .05s; }
  tr.detail .sec:nth-child(3) { animation-delay: .1s; }
  tr.detail .sec:nth-child(4) { animation-delay: .15s; }
  tr.detail .sec.best { animation: lb-drop .45s var(--ease) both, lb-best 1.2s ease .4s both; }
}
@keyframes lb-lift { from { transform: translateY(105%); } to { transform: none; } }
@keyframes lb-art { from { opacity: 0; scale: 1.12; translate: 4% 0; } to { opacity: .6; scale: 1; translate: 0 0; } }
@keyframes lb-stamp { from { opacity: 0; scale: 1.6; } to { opacity: .22; scale: 1; } }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-row { from { opacity: 0; translate: -32px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes lb-bar { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes lb-flash { 0% { background-color: var(--pale); } 100% { background-color: var(--accent); } }
@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes lb-drop { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes lb-best { 0%, 40% { background-color: var(--pale); } 100% { background-color: var(--accent); } }
@media (max-width: 640px) { .bh-art { inset: 0; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 70%); mask-image: linear-gradient(to top, transparent 0%, #000 70%); } .bh-mark { font-size: 9rem; } } /* taste-skill-ignore: user asked for the picture to fade into the page behind the words */

/* ---------- leaderboard, wild: a manga panel with cut corners, speed lines, screen tone, racing italics ---------- */
.board-main { clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); }
/* speed lines burst from behind the record, screen-tone dots fade in from the right */
.board-head::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg at 72% 58%, rgb(244 240 255 / .07) 0deg 1.2deg, transparent 1.2deg 7deg); -webkit-mask-image: radial-gradient(circle at 72% 58%, transparent 8%, #000 30%); mask-image: radial-gradient(circle at 72% 58%, transparent 8%, #000 30%); } /* taste-skill-ignore: user asked for a wild, dramatic board: speed lines, screen tone and racing stripes */
.board-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgb(164 128 255 / .55) 1.3px, transparent 1.8px) 0 0 / 9px 9px; -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 55%); mask-image: linear-gradient(to left, #000 0%, transparent 55%); } /* taste-skill-ignore: user asked for a wild, dramatic board: speed lines, screen tone and racing stripes */
.board-head h2, .record b { transform: skewX(-8deg); transform-origin: left bottom; }
.board-head h2 #bt-layout { color: var(--accent); }

/* the ticker: the board's headline facts on a loop, like a timing screen's crawl */
.ticker { overflow: hidden; background: var(--accent); color: var(--on-light); border-block: 3px solid var(--on-light); }
.tk-track { display: flex; width: max-content; }
.tk-track span { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; font: 800 1.125rem/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.tk-track span::after { content: ""; width: 10px; height: 10px; margin-left: 44px; background: var(--on-light); transform: skewX(-20deg); }
.tk-track .tk-mark { font-family: "Noto Sans JP", "Yu Gothic", sans-serif; font-weight: 900; }

/* column heads on black, lit purple */
.board-table th { color: var(--accent-hi); letter-spacing: .02em; }

/* rank badges: slanted slabs, the podium filled */
.board-table td.n { width: 76px; }
.board-table .rank { display: inline-grid; place-items: center; min-width: 44px; height: 38px; padding: 0 8px; transform: skewX(-12deg); font: 800 1.375rem/1 var(--display); color: var(--muted); }
.board-table tr.top .rank { min-width: 54px; height: 50px; font-size: 2.25rem; color: var(--on-light); }
.board-table tr.rank1 .rank { background: var(--on-light); color: var(--pale); font-size: 2.75rem; height: 60px; min-width: 60px; }
.board-table tr.rank2 .rank { background: var(--accent-hi); }
.board-table tr.rank3 .rank { background: var(--accent); }
.board-table tr.top td.n { font-size: inherit; }

/* times lean forward like a timing screen */
.board-table .tt { display: inline-block; transform: skewX(-8deg); }
.board-table .tag { transform: skewX(-12deg); }
.board-table td.gap .bar { height: 8px; transform: skewX(-24deg); opacity: .8; }

/* first place: racing stripes run under its time */
.board-table tr.rank1 td.time { background-image: repeating-linear-gradient(-60deg, rgb(7 4 15 / .14) 0 12px, transparent 12px 26px); background-size: 60px 104px; } /* taste-skill-ignore: user asked for a wild, dramatic board: speed lines, screen tone and racing stripes */

/* hover kicks the row forward */
.board-table tbody tr.row { transition: background-color .2s, translate .25s var(--ease); }
.board-table tbody tr.row:hover { translate: 8px 0; }
.board-table tbody tr.row:hover .rank { color: var(--ink); }
.board-table tbody tr.top:hover .rank { color: var(--on-light); }
.board-table tbody tr.rank1:hover .rank { color: var(--pale); }

/* sector boxes: slanted right edges, like replay panels */
.sec { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 26px; }
.sec-t { transform: skewX(-8deg); transform-origin: left bottom; }

@media (prefers-reduced-motion: no-preference) {
  .tk-track { animation: lb-tick 40s linear infinite; }
  .board-head.deal::before { animation: lb-burst 1.1s var(--ease) both; }
  .board-table tr.rank1 td.time { animation: lb-stripes 1.2s linear infinite; }
}
@keyframes lb-tick { to { transform: translateX(-50%); } }
@keyframes lb-burst { from { opacity: 0; scale: 1.35; rotate: -6deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes lb-stripes { to { background-position: 60px 0; } }
@media (max-width: 640px) {
  .board-main { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
  .board-table td.n { width: 52px; }
  .board-table .rank { min-width: 34px; height: 32px; font-size: 1.125rem; }
  .board-table tr.top .rank { min-width: 40px; height: 40px; font-size: 1.625rem; }
  .board-table tr.rank1 .rank { min-width: 44px; height: 46px; font-size: 2rem; }
  .board-table tbody tr.row:hover { translate: none; }
}
@media (min-width: 641px) { .board-table th:last-child, .board-table td.time { padding-right: 64px; } } /* clear the back-to-top button */

/* ---------- suite features: tiers, filters, stats, VS, telemetry, profiles, forecast ---------- */
/* tiers: slanted slabs, a colour each so the ladder reads at a glance */
.tier { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 28px; padding: 0 10px; transform: skewX(-12deg); font: 800 .9375rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.tier > span { transform: skewX(12deg); }
.t-master { background: var(--pale); color: var(--on-light); }
.t-specialist { background: var(--accent); color: var(--on-light); }
.t-platinum { background: #9fe3f5; color: #04212a; }
.t-gold { background: #ffcd4d; color: #2a1d00; }
.t-silver { background: #c8c6d6; color: #16141f; }
.t-bronze { background: #d98a5b; color: #2a1206; }
.t-rookie { background: var(--surface); color: var(--muted); }
.tier-lg { min-width: 150px; height: 44px; font-size: 1.375rem; }
.tier-sm { min-width: 0; height: 22px; font-size: .8125rem; padding: 0 8px; }
.board-table td.c-tier { width: 120px; }
.board-table td.c-vs, .board-table th.c-vs { width: 44px; padding-right: 0; }
.board-table th.c-vs abbr { text-decoration: none; }
.c-vs input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.c-vs input:disabled { opacity: .3; cursor: not-allowed; }
.board-table .wr { display: inline-block; margin-right: 10px; padding: 3px 6px; background: var(--on-light); color: var(--pale); font: 800 .8125rem/1 var(--display); vertical-align: middle; transform: skewX(-12deg); }
.rival-star { margin-left: 8px; padding: 2px 6px; background: #ffcd4d; color: #2a1d00; font: 800 .75rem/1 var(--display); text-transform: uppercase; }
.board-table tr.empty td { height: 120px; text-align: center; color: var(--muted); font-size: 1.0625rem; }

/* find: search and rivals */
.pick-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 800 1.125rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); }
.search input { width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); font: 600 1rem/1 var(--text); }
.search input::placeholder { color: var(--muted); }
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.rivals-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; margin-top: 6px; padding: 0 12px; border: 0; background: var(--surface); color: var(--muted); font: 800 1rem/1 var(--display); text-transform: uppercase; cursor: pointer; }
.rivals-btn b { margin-left: auto; padding: 2px 6px; background: var(--ground); color: var(--ink); font-size: .875rem; }
.rivals-btn:hover { color: var(--ink); }
.rivals-btn[aria-pressed="true"] { background: #ffcd4d; color: #2a1d00; }

/* stats strip */
.stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2px; background: var(--ground); }
.stat { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin: 0; padding: 14px clamp(12px, 1.6vw, 20px); background: var(--surface); min-width: 0; }
.stat > .i { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--accent-hi); }
.st-l { font: 800 .875rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.stat b { font: 800 1.125rem/1.2 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-targets { padding: 0; display: block; }
.targets-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 64px; padding: 0 clamp(12px, 1.6vw, 20px); border: 0; background: var(--surface); color: var(--ink); font: 800 1.125rem/1 var(--display); text-transform: uppercase; cursor: pointer; text-align: left; }
.targets-btn > .i:first-child { width: 26px; height: 26px; color: var(--accent-hi); }
.targets-btn > .i:last-child { margin-left: auto; color: var(--accent-hi); transition: rotate .2s; }
.targets-btn[aria-expanded="true"] { background: var(--accent); color: var(--on-light); }
.targets-btn[aria-expanded="true"] .i { color: var(--on-light); }
.targets-btn[aria-expanded="true"] > .i:last-child { rotate: 180deg; }
.targets { position: absolute; z-index: 6; left: 0; top: 100%; width: min(520px, 86vw); padding: 16px; background: var(--ground); border: 3px solid var(--accent); }
.tg-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font: 800 1.125rem/1 var(--display); text-transform: uppercase; }
.tg-head span { font: 600 .875rem/1 var(--text); text-transform: none; color: var(--muted); }
.tg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tg-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--surface); }
.tg-list b { font: 800 1.125rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* telemetry */
.sec-head { flex-wrap: wrap; }
.sec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; background: var(--surface); color: var(--ink); font: 600 .875rem/1 var(--text); border: 0; }
.chip b { font: 800 .875rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
button.chip { cursor: pointer; font: 800 .9375rem/1 var(--display); text-transform: uppercase; }
.chip-act { background: var(--accent); color: var(--on-light); }
.chip-act:hover { background: var(--pale); }
.chip-dl { color: var(--muted); }
.chip-dl[aria-disabled="true"] { cursor: not-allowed; }
.sec { position: relative; gap: 4px; }
.sec-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sec-p { font: 800 .9375rem/1 var(--display); color: var(--accent-hi); }
.sec.best .sec-p { color: var(--on-light); }
.sec-m { display: block; height: 6px; margin-top: 8px; background: var(--ground); }
.sec-m::before { content: ""; display: block; width: var(--p); height: 100%; background: var(--accent); }
.sec.best .sec-m { background: var(--on-light); }
.sec.best .sec-m::before { width: 100%; background: var(--pale); }

/* VS: a timing bar pinned to the bottom of the screen */
.vs-bar { position: fixed; z-index: 45; left: 50%; bottom: 16px; translate: -50% 0; width: min(980px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr auto 1fr auto; grid-template-rows: auto auto; gap: 10px 16px; align-items: center; padding: 16px 20px; background: var(--ground); border: 3px solid var(--accent); }
.vs-bar[hidden] { display: none; }
.vs-wait { grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; margin: 0; font: 800 1.25rem/1.2 var(--display); text-transform: uppercase; }
.vs-wait .i { color: var(--accent-hi); }
.vs-side { display: grid; gap: 2px; }
.vs-side.vb { text-align: right; }
.vs-pos { font: 800 1rem/1 var(--display); color: var(--accent-hi); }
.vs-name { font: 800 1.5rem/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-time { font: 800 1.125rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.vs-mid { display: grid; justify-items: center; gap: 4px; padding: 6px 16px; background: var(--accent); color: var(--on-light); transform: skewX(-10deg); }
.vs-mid > * { transform: skewX(10deg); }
.vs-big { font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.vs-sub { font: 600 .8125rem/1 var(--text); }
.vs-close { grid-column: 4; grid-row: 1; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.vs-close .i { width: 18px; height: 18px; }
.vs-secs { grid-column: 1 / 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.vs-sec { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; background: var(--surface); font-size: .9375rem; min-width: 0; }
.vs-sec b { font: 800 1rem/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-sn { font: 800 1rem/1 var(--display); color: var(--accent-hi); }
.vs-sec.a-wins { border-left: 4px solid var(--accent); }
.vs-sec.b-wins { border-left: 4px solid var(--pale); }

/* driver profile */
.profile { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 3px solid var(--accent); background: var(--ground); color: var(--ink); overflow: auto; }
.profile::backdrop { background: rgb(0 0 0 / .78); }
.pf-inner { padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 22px; }
.pf-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.pf-who { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
.pf-who .tier { grid-row: 1 / 4; }
.pf-kicker { margin: 0; font: 800 .875rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); }
.pf-name { margin: 4px 0; font-size: clamp(2.5rem, 1rem + 3vw, 4rem); line-height: .9; transform: skewX(-8deg); transform-origin: left bottom; }
.pf-sub { margin: 0; color: var(--muted); font-weight: 600; }
.pf-acts { display: flex; gap: 8px; }
.pf-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; background: var(--surface); color: var(--ink); font: 800 1.0625rem/1 var(--display); text-transform: uppercase; cursor: pointer; }
.pf-btn .i { color: #ffcd4d; }
.pf-btn.on { background: #ffcd4d; color: #2a1d00; }
.pf-btn.on .i { color: #2a1d00; }
.pf-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.pf-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pf-tile { display: grid; align-content: start; gap: 6px; padding: 16px; background: var(--surface); min-width: 0; }
.pf-hot { background: var(--accent); color: var(--on-light); }
.pf-hot .pf-l, .pf-hot .pf-n { color: var(--on-light); }
.pf-l { font: 800 .875rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.pf-v { font: 800 clamp(2rem, 1rem + 1.6vw, 2.75rem)/1 var(--display); transform: skewX(-8deg); transform-origin: left bottom; }
.pf-n { font-size: .875rem; color: var(--muted); }
.pf-car { width: 100%; height: 34px; object-fit: contain; object-position: left; }
.pf-h3 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1; }
.pf-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pf-tiers li { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; background: var(--surface); }
.pf-tiers li b { font: 800 1.75rem/1 var(--display); }
.pf-tiers li.none { opacity: .35; }
.pf-pbhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-pbhead .pf-h3 { margin: 0; }
.pf-seg { width: auto; }
.pf-seg button { padding: 0 14px; }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pb { display: grid; gap: 8px; padding: 14px 16px; background: var(--surface); border-left: 5px solid transparent; }
.pb.wr { border-left-color: #ffcd4d; }
.pb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pb-t { margin: 0; font-size: 1.5rem; line-height: 1; }
.pb-rank { font: 800 1.25rem/1 var(--display); color: var(--accent-hi); }
.pb-rank.pod { padding: 3px 8px; background: var(--accent); color: var(--on-light); transform: skewX(-12deg); }
.pb-meta { display: flex; gap: 6px; align-items: center; }
.pb-dir { padding: 3px 8px; font: 800 .8125rem/1 var(--display); text-transform: uppercase; }
.pb-dir.d0 { background: #1d2a4a; color: #9fc4ff; }
.pb-dir.d1 { background: #3a1c2a; color: #ff9fc0; }
.pb-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pb-mid > div:first-child { display: grid; gap: 4px; }
.pb-time { font: 800 1.75rem/1 var(--display); transform: skewX(-8deg); transform-origin: left bottom; font-variant-numeric: tabular-nums; }
.pb-gap { font-size: .875rem; color: var(--muted); }
.pb-car { display: grid; justify-items: end; gap: 2px; font: 800 .875rem/1 var(--display); }
.pb-img { width: 72px; height: 24px; object-fit: contain; }
.pb-secs { margin: 0; padding: 8px 10px; background: var(--ground); font: 600 .875rem/1.3 var(--text); font-variant-numeric: tabular-nums; color: var(--muted); }
.pb-foot { margin: 0; font-size: .8125rem; color: var(--muted); }

/* forecast: a week of conditions on every pass */
.forecast { padding: clamp(72px, 8vw, 120px) var(--m) 0; }
.fc-head { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: end; margin-bottom: 24px; }
.fc-head h2 { font-size: var(--step-head); grid-row: 1 / 3; }
.fc-sub { margin: 0; max-width: 60ch; font-size: var(--step-lead); line-height: 1.35; font-weight: 600; }
.fc-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 800 1rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.fc-key li { display: inline-flex; align-items: center; gap: 8px; }
.fc-key .i { color: var(--accent-hi); }
.fc-note { margin-top: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .vs-bar:not([hidden]) { animation: lb-vs .35s var(--ease) both; }
  .profile[open] { animation: lb-pf .35s var(--ease) both; }
  .targets:not([hidden]) { animation: lb-drop .25s var(--ease) both; }
}
@keyframes lb-vs { from { opacity: 0; translate: -50% 40px; } to { opacity: 1; translate: -50% 0; } }
@keyframes lb-pf { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

@media (max-width: 1100px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .pf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pickers .pick-find { grid-column: 1 / -1; }
  .fc-head { grid-template-columns: 1fr; }
  .fc-head h2 { grid-row: auto; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .vs-bar { grid-template-columns: 1fr auto; padding: 12px; bottom: 8px; }
  .vs-mid { grid-column: 1 / -1; grid-row: 2; }
  .vs-side.vb { text-align: left; }
  .vs-secs { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .vs-close { grid-column: 2; }
  .pf-head { flex-direction: column; }
  .pf-who { grid-template-columns: 1fr; }
  .pf-who .tier { grid-row: auto; justify-self: start; margin-bottom: 10px; }
  .pf-tiles, .pf-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-grid { grid-template-columns: 1fr; }
  .board-table td.c-vs, .board-table th.c-vs { width: 30px; padding: 0 0 0 8px; }
}
/* room for seven columns beside the options column */
.board-table td.time { white-space: nowrap; }
.stat b { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
@media (max-width: 1360px) {
  .board-table .row-car { display: none; }
  .board-table td.gap .bar { display: none; }
  .board-table td.c-tier { width: 96px; }
  .board-table .c-tier .tier { min-width: 0; padding: 0 8px; font-size: .8125rem; height: 24px; }
  .board-table th, .board-table td { padding-inline: 10px; }
}
.pf-seg { grid-template-columns: repeat(3, auto); }
@media (max-width: 640px) {
  /* phones: compare and the WR tag step aside so the time always fits */
  .board-table .c-vs, .board-table .wr { display: none; }
  .vs-bar { display: none; }
}

/* forecast cards: the pass as it will look, a week of conditions under it */
.fc-key .k-true .i { color: var(--accent); }
.fc-key li .i[href] { color: inherit; }
.fc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fc-card { background: var(--surface); min-width: 0; }
.fc-shot { position: relative; margin: 0; aspect-ratio: 16 / 8; overflow: hidden; background: var(--ground); }
.fc-shot img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.fc-card.stand-in.tod1 .fc-shot img { filter: brightness(.55) saturate(.8); }
.fc-card.stand-in.tod2 .fc-shot img { filter: brightness(.32) saturate(.7); }
.fc-card.tod2:not(.stand-in) .fc-shot img { filter: brightness(.6); }
.fc-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .4) 22%, rgb(0 0 0 / 0) 50%); } /* taste-skill-ignore: user asked for gradient scrims behind the words */
.fc-cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.fc-name { margin: 0; font-size: clamp(2rem, 1rem + 2vw, 3rem); line-height: .9; transform: skewX(-8deg); transform-origin: left bottom; }
.fc-now { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; background: var(--accent); color: var(--on-light); font: 800 .9375rem/1 var(--display); text-transform: uppercase; white-space: nowrap; transform: skewX(-10deg); }
.fc-card.tod0 .fc-now { background: var(--pale); }
.fc-card.tod2 .fc-now { background: var(--on-light); color: var(--accent-hi); }
.fc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 6px; }
.fc-day { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border: 0; background: var(--ground); color: var(--ink); cursor: pointer; transition: background-color .15s; }
.fc-day:hover { background: #1c1430; }
.fc-wd { font: 800 1rem/1 var(--display); text-transform: uppercase; }
.fc-dt { font-size: .75rem; color: var(--muted); }
.fc-ic { display: flex; gap: 3px; color: var(--accent-hi); }
.fc-ic .i { width: 16px; height: 16px; }
.fc-day.tod0 .fc-ic .i:first-child { color: #ffcd4d; }
.fc-day.tod2 .fc-ic .i:first-child { color: var(--accent); }
.fc-day[aria-pressed="true"] { background: var(--accent); color: var(--on-light); }
.fc-day[aria-pressed="true"] .fc-dt, .fc-day[aria-pressed="true"] .fc-ic, .fc-day[aria-pressed="true"] .fc-ic .i { color: var(--on-light); }
@media (max-width: 900px) { .fc-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .fc-cap { flex-direction: column; align-items: flex-start; } .fc-wd { font-size: .875rem; } .fc-dt { display: none; } }
@media (max-width: 640px) { .fc-ic { flex-wrap: wrap; justify-content: center; gap: 2px; } .fc-ic .i { width: 13px; height: 13px; } .fc-days { gap: 2px; padding: 4px; } }

/* ---------- more motion: scroll-linked moments, a progress bar, a home ticker, hover sweeps ---------- */
/* slide-ins and the tilted ticker reach past the edges; clip them without breaking the sticky header */
html, body { overflow-x: clip; }

/* home ticker: the passes on a loop, tilted across the page between hero and intro */
.home-ticker { position: relative; z-index: 6; margin: 0 -2vw 14px; rotate: -1.4deg; }
.home-ticker .tk-track span { height: 56px; font-size: 1.5rem; }
@media (max-width: 640px) { .home-ticker { margin-bottom: 14px; } .home-ticker .tk-track span { height: 44px; font-size: 1.125rem; } }
.blink { display: inline-block; }

/* buttons: a lilac panel sweeps in from the left on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pale); transform: translateX(-101%) skewX(-12deg); transform-origin: left; transition: transform .35s var(--ease); }
.btn:hover { background: var(--accent); }
.btn:hover::before { transform: translateX(0) skewX(0); }
.btn .i { transition: transform .3s var(--ease); }
.btn:hover .i { transform: rotate(-12deg) scale(1.15); }

/* nav links: an underline slides out under the hovered link */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* reading progress, a thin purple bar across the very top */
.progress { position: fixed; z-index: 60; left: 0; top: 0; width: 100%; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .blink { animation: blink 1s steps(1) infinite; }
  .fc-shot.swap img { animation: fc-swap .5s var(--ease) both; }
  .lineup li:hover img { animation: rev .5s ease-in-out; }
  .pb, .pf-tile { transition: translate .2s var(--ease); }
  .pb:hover, .pf-tile:hover { translate: 0 -4px; }
  .fc-card { transition: translate .25s var(--ease); }
  .fc-card:hover { translate: 0 -4px; }
  .slip { transition: transform .25s var(--ease), rotate .25s var(--ease); }
  .slip:hover { rotate: -2deg; }
}
@keyframes blink { 50% { opacity: .15; } }
@keyframes fc-swap { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes rev { 0%, 100% { translate: 6px 0; } 30% { translate: 2px -2px; } 60% { translate: 10px 0; } }

/* scroll-linked motion where the browser supports it; elsewhere everything simply sits still */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }

    /* hero: the replay sinks slower than the page, the words lift away faster */
    @media (min-width: 901px) {
      .hero-shot { animation: par-down linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .hero-copy { animation: par-up linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .lb-hero > .shot { animation: par-down linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    }

    /* intro tile: the FC3S pushes in as it arrives */
    .tile-a img { animation: zoom-in linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }

    /* cars: the prints swing in from steeper angles */
    .print-row .print { animation: swing linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .print-row .p2 { animation-name: swing-r; }

    /* the line-up drives in from the left, one car after another */
    .lineup li { animation: drive linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .lineup li:nth-child(7n + 2) { animation-range: entry 5% entry 100%; }
    .lineup li:nth-child(7n + 3) { animation-range: entry 10% entry 100%; }
    .lineup li:nth-child(7n + 4) { animation-range: entry 15% entry 100%; }
    .lineup li:nth-child(7n + 5) { animation-range: entry 20% entry 100%; }
    .lineup li:nth-child(7n + 6) { animation-range: entry 25% entry 100%; }
    .lineup li:nth-child(7n) { animation-range: entry 30% entry 100%; }

    /* passes: each name slides in from alternate sides */
    .poster-list li .item { animation: slide-l linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .poster-list li:nth-child(even) .item { animation-name: slide-r; }

    /* battle: each replay zooms out to full frame as it crosses the screen, the words drift up */
    /* (a wipe, not a zoom, so the picture keeps its real box) */
    .sheet .shot img { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .sheet.left .shot img { animation-name: wipe-r; }
    .sheet .copy { animation: lift-in linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }

    /* the JOIN word slides across its band as you pass */
    .word-band .word { animation: slide-across linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    /* follow and community replays drift inside their frames */
    .follow > .shot img, .bleed .shot img, .trailer > .shot img { animation: pan linear both; animation-timeline: view(); }

    /* leaderboard: forecast cards and ghost steps rise, their photos push in */
    .fc-card { animation: lift-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .ghost-wall .shot img { animation: zoom-in linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }

    /* footer: the way in swings up into place */
    .foot-line { animation: lift-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes grow { to { transform: scaleX(1); } }
@keyframes par-down { to { translate: 0 18vh; } }
@keyframes par-up { to { translate: 0 -12vh; opacity: .2; } }
@keyframes zoom-in { from { scale: 1.22; } to { scale: 1; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes swing { from { rotate: -10deg; translate: -12vw 10vh; opacity: 0; } to { rotate: 0deg; translate: 0 0; opacity: 1; } }
@keyframes swing-r { from { rotate: 10deg; translate: 12vw 10vh; opacity: 0; } to { rotate: 0deg; translate: 0 0; opacity: 1; } }
@keyframes drive { from { translate: -80px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes slide-l { from { translate: -14vw 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes slide-r { from { translate: 14vw 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes lift-in { from { translate: 0 60px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes slide-across { from { translate: 18% 0; } to { translate: -12% 0; } }
@keyframes pan { from { scale: 1.12; translate: -3% 0; } to { scale: 1.12; translate: 3% 0; } }

/* ---------- interactive motion: every control answers a hover, a press and a focus ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* press: anything you can click gives a little as you press it */
  :where(button, .btn, .slip, .chip, .fc-day, .rivals-btn, .targets-btn, .more, .to-top, .foot-line, .word-band) { transition-property: background-color, color, transform, translate, scale, rotate, padding-left; transition-duration: .2s; transition-timing-function: var(--ease); }
  :where(button, .btn, .chip, .fc-day, .rivals-btn, .targets-btn, .more, .to-top):active { scale: .95; }

  /* keyboard focus pops in instead of just appearing */
  :focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 3px; animation: focus-pop .3s var(--ease); }

  /* a choice that becomes selected pops once */
  .toggle button[aria-pressed="true"], .car-grid button[aria-pressed="true"], .fc-day[aria-pressed="true"], .track-list button[aria-pressed="true"]::before, .rivals-btn[aria-pressed="true"] { animation: pop .35s var(--ease); }
  .track-list button[aria-pressed="true"]::before { transform-origin: center; animation-name: bar-in; }

  /* pass list: a name leans forward under the pointer */
  .track-list button:hover { padding-left: 18px; }
  .track-list button[aria-pressed="true"]:hover { padding-left: 20px; }

  /* car chips lift, and the little car drives forward */
  .car-grid button:hover { translate: 0 -2px; }
  .car-grid button .chip-car { transition: translate .3s var(--ease); }
  .car-grid button:hover .chip-car { translate: 4px 0; }

  /* layout, time and rivals icons react */
  .toggle button .i { transition: transform .3s var(--ease); }
  .toggle button:hover .i { transform: translate(2px, 2px); }
  .toggle button:hover .i[href*="uphill"] { transform: translate(2px, -2px); }
  .rivals-btn .i { transition: rotate .4s var(--ease), scale .3s var(--ease); }
  .rivals-btn:hover .i { rotate: 72deg; }
  .rivals-btn[aria-pressed="true"] .i { rotate: 144deg; scale: 1.2; }
  .search input { transition: background-color .2s, box-shadow .25s var(--ease); }
  .search input:focus { background: #1c1430; box-shadow: inset 4px 0 0 var(--accent); } /* taste-skill-ignore: inset bar marks the focused field */

  /* stats: icons wake up on hover */
  .stat > .i, .targets-btn > .i:first-child { transition: rotate .4s var(--ease), scale .3s var(--ease); }
  .stat:hover > .i, .targets-btn:hover > .i:first-child { rotate: -12deg; scale: 1.15; }

  /* VS ticks pop */
  .c-vs input { transition: scale .2s var(--ease); }
  .c-vs input:hover:not(:disabled) { scale: 1.15; }
  .c-vs input:checked { animation: pop .3s var(--ease); }

  /* telemetry: chips and sector boxes lift */
  .chip { transition: translate .2s var(--ease), background-color .2s; }
  button.chip:hover { translate: 0 -2px; }
  .chip-act .i { transition: scale .3s var(--ease); }
  .chip-act:hover .i { scale: 1.2; }
  .sec { transition: translate .2s var(--ease); }
  .sec:hover { translate: 0 -3px; }

  /* close buttons spin a quarter turn */
  .vs-close .i, .pf-x .i { transition: rotate .3s var(--ease); }
  .vs-close:hover .i, .pf-x:hover .i { rotate: 90deg; }
  .pf-btn .i { transition: rotate .4s var(--ease); }
  .pf-btn:hover .i { rotate: 72deg; }
  .pf-btn.on .i { animation: spin-in .5s var(--ease); }

  /* show-all: the chevron nudges down */
  .more .i { transition: translate .25s var(--ease), rotate .25s var(--ease); }
  .more:hover .i { translate: 0 3px; }

  /* forecast days lift */
  .fc-day:hover { translate: 0 -3px; }
  .fc-card:hover { scale: 1.01; }

  /* tickers stop when you point at them */
  .ticker:hover .tk-track { animation-play-state: paused; }

  /* line-up: the hovered car rises and its code lights */
  .lineup li { transition: color .2s; }
  .lineup li:hover b { text-decoration: underline 3px; text-underline-offset: .18em; }

  /* JOIN band: the arrow darts off and back */
  .word-band svg { transition: translate .3s var(--ease); }
  .word-band:hover svg { translate: 8px -8px; }
  .word-band:hover .word { color: var(--pale); }
  .word-band .word { transition: color .3s; }

  /* contact form */
  .coupon input, .coupon select, .coupon textarea { transition: background-color .2s, box-shadow .25s var(--ease); }
  .coupon input:focus, .coupon select:focus, .coupon textarea:focus { box-shadow: inset 4px 0 0 var(--on-light); } /* taste-skill-ignore: inset bar marks the focused field */
  .coupon button[type="submit"] .i { transition: translate .3s var(--ease); }
  .coupon button[type="submit"]:hover .i { translate: 4px -4px; }
  .coupon button[type="submit"]:hover { translate: 0 -2px; }

  /* side dots and back to top */
  .dots a { transition: scale .2s var(--ease); }
  .dots a:hover { scale: 1.6; }
  .to-top:hover svg { animation: hop .5s var(--ease); }

  /* phone menu: the button turns, the menu drops and its links follow in turn */
  .menu-btn svg { transition: rotate .3s var(--ease); }
  .menu-btn[aria-expanded="true"] svg { rotate: 90deg; }
  .nav.open { animation: menu-drop .3s var(--ease); }
  .nav.open li { animation: lb-row .35s var(--ease) both; }
  .nav.open li:nth-child(2) { animation-delay: .04s; }
  .nav.open li:nth-child(3) { animation-delay: .08s; }
  .nav.open li:nth-child(4) { animation-delay: .12s; }

  /* copy invite and footer link */
  .foot-line:hover { translate: 6px 0; }
}
@keyframes pop { 0% { scale: .9; } 60% { scale: 1.06; } 100% { scale: 1; } }
@keyframes bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes focus-pop { from { outline-offset: 9px; outline-color: transparent; } to { outline-offset: 3px; } }
@keyframes spin-in { from { rotate: -180deg; scale: .4; } to { rotate: 0deg; scale: 1; } }
@keyframes hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -6px; } }
@keyframes menu-drop { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }

/* ---------- driver profile, wild: a manga splash page for one driver ---------- */
.profile { border: 0; background: transparent; overflow: visible; max-height: none; }
.pf-inner { max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--ground); clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 56px 100%, 0 calc(100% - 56px)); border-top: 6px solid var(--accent); scrollbar-color: var(--accent) var(--ground); }

/* header: the driver's best pass behind them, speed lines bursting from the name, their car charging in */
.pf-head { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: end; min-height: 260px; margin: calc(clamp(18px, 2.4vw, 32px) * -1) calc(clamp(18px, 2.4vw, 32px) * -1) 0; padding: clamp(18px, 2.4vw, 32px); }
.pf-art { position: absolute; inset: 0; z-index: -3; }
.pf-art img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
@supports (object-view-box: inset(0)) { .pf-art img { object-view-box: inset(13% 6%); } }
.pf-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(0 0 0 / .95) 0%, rgb(0 0 0 / .7) 40%, rgb(0 0 0 / .2) 75%), linear-gradient(to top, var(--ground) 0%, rgb(0 0 0 / 0) 45%); } /* taste-skill-ignore: user asked for a wild profile: speed lines, screen tone, racing stripes */
.pf-head::before { content: ""; position: absolute; inset: -60%; z-index: -2; pointer-events: none; background: repeating-conic-gradient(from 0deg at 30% 62%, rgb(244 240 255 / .07) 0deg 1.1deg, transparent 1.1deg 6deg); -webkit-mask-image: radial-gradient(circle at 30% 62%, transparent 6%, #000 26%); mask-image: radial-gradient(circle at 30% 62%, transparent 6%, #000 26%); } /* taste-skill-ignore: user asked for a wild profile: speed lines, screen tone, racing stripes */
.pf-head::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle, rgb(164 128 255 / .5) 1.3px, transparent 1.8px) 0 0 / 9px 9px; -webkit-mask-image: linear-gradient(to left, #000, transparent 50%); mask-image: linear-gradient(to left, #000, transparent 50%); } /* taste-skill-ignore: user asked for a wild profile: speed lines, screen tone, racing stripes */
.pf-stamp { position: absolute; z-index: -1; right: 2%; top: 64px; font: 900 clamp(4.5rem, 2rem + 5vw, 7.5rem)/1 "Noto Sans JP", "Yu Gothic", sans-serif; color: var(--accent); opacity: .26; writing-mode: vertical-rl; pointer-events: none; user-select: none; }
.pf-hero-car { position: absolute; z-index: -1; right: 18%; bottom: 18px; width: min(360px, 38%); height: auto; object-fit: contain; }
svg.pf-hero-car { width: 120px; height: 120px; color: var(--accent); opacity: .5; }
.pf-who { position: relative; grid-template-columns: 1fr; row-gap: 6px; }
.pf-who .tier { grid-row: auto; justify-self: start; margin-bottom: 8px; }
.pf-kicker { letter-spacing: .02em; }
.pf-name { font-size: clamp(3.5rem, 1rem + 6vw, 7.5rem); line-height: .86; color: var(--ink); }
.pf-sub { font-size: var(--step-lead); color: var(--pale); }
.pf-acts { align-self: start; position: relative; }
.pf-best { grid-column: 1 / -1; justify-self: start; margin-top: 14px; padding: 6px 12px; background: var(--accent); color: var(--on-light); font: 800 1rem/1 var(--display); text-transform: uppercase; transform: skewX(-12deg); }

/* stat panels: slanted slabs with poster numbers */
.pf-tiles { gap: 8px; margin-top: 8px; }
.pf-tile { position: relative; overflow: hidden; padding: 18px 18px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); border-top: 4px solid var(--accent); }
.pf-tile::after { content: ""; position: absolute; right: -10px; top: 0; bottom: 0; width: 40%; background: repeating-linear-gradient(-60deg, rgb(164 128 255 / .09) 0 6px, transparent 6px 14px); pointer-events: none; } /* taste-skill-ignore: user asked for a wild profile: speed lines, screen tone, racing stripes */
.pf-v { font-size: clamp(2.5rem, 1rem + 2.4vw, 3.75rem); }
.pf-hot { border-top-color: var(--pale); }
.pf-fav { border-top-color: #ffcd4d; }
.pf-car { height: 40px; }

/* tiers: a bar chart of slanted columns */
.pf-h3 { font-size: clamp(1.75rem, 1rem + 1.4vw, 2.5rem); }
.pf-h3n { font: 600 1rem/1 var(--text); color: var(--muted); text-transform: none; }
.pf-tiers { align-items: end; gap: 10px; }
.pf-tiers li { display: grid; grid-template-rows: auto 120px auto; justify-items: center; align-items: end; gap: 8px; padding: 14px 8px 12px; }
.pf-tiers li b { font-size: 2.25rem; }
.pf-bar { width: 56%; height: var(--h); align-self: end; transform: skewX(-12deg); }
.t-col.col-master .pf-bar { background: var(--pale); }
.t-col.col-specialist .pf-bar { background: var(--accent); }
.t-col.col-platinum .pf-bar { background: #9fe3f5; }
.t-col.col-gold .pf-bar { background: #ffcd4d; }
.t-col.col-silver .pf-bar { background: #c8c6d6; }
.t-col.col-bronze .pf-bar { background: #d98a5b; }

/* personal bests: manga panels with a giant rank behind, a tier stripe down the side */
.pf-grid { gap: 8px; }
.pb { position: relative; overflow: hidden; isolation: isolate; border-left: 0; padding-left: 22px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.pb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--muted); }
.pb.pt-master::before { background: var(--pale); }
.pb.pt-specialist::before { background: var(--accent); }
.pb.pt-platinum::before { background: #9fe3f5; }
.pb.pt-gold::before { background: #ffcd4d; }
.pb.pt-silver::before { background: #c8c6d6; }
.pb.pt-bronze::before { background: #d98a5b; }
.pb-big { position: absolute; z-index: -1; right: -6px; top: -24px; font: 900 9rem/1 var(--display); color: rgb(164 128 255 / .09); transform: skewX(-10deg); pointer-events: none; }
.pb.podium .pb-big { color: rgb(164 128 255 / .2); }
.pb.wr { background: linear-gradient(135deg, #2b1d55 0%, var(--surface) 60%); } /* taste-skill-ignore: user asked for a wild profile: speed lines, screen tone, racing stripes */
.pb.wr::after { content: "WR"; position: absolute; left: 22px; bottom: 0; padding: 4px 8px; background: #ffcd4d; color: #2a1d00; font: 800 .875rem/1 var(--display); transform: skewX(-12deg); }
.pb.wr .pb-foot { padding-left: 44px; }
.pb-t { font-size: 1.75rem; transform: skewX(-8deg); transform-origin: left bottom; }
.pb-img { width: 96px; height: 32px; }

@media (prefers-reduced-motion: no-preference) {
  .profile[open] .pf-art img { animation: lb-art 1.1s var(--ease) both; }
  .profile[open] .pf-head::before { animation: lb-burst 1s var(--ease) both; }
  .profile[open] .pf-stamp { animation: pf-stamp .7s var(--ease) .2s both; }
  .profile[open] .pf-hero-car { animation: pf-charge .8s var(--ease) .15s both; }
  .profile[open] .pf-name { animation: pf-slam .5s var(--ease) .1s both; }
  .profile[open] .pf-best { animation: lb-row .5s var(--ease) .35s both; }
  .profile[open] .pf-tile { animation: lift-in .5s var(--ease) calc(.25s + var(--d)) both; }
  .profile[open] .pf-bar { transform-origin: bottom; animation: pf-grow .7s var(--ease) calc(.4s + var(--d)) both; }
  .profile[open] .pb { animation: lift-in .45s var(--ease) calc(.3s + var(--d)) both; }
  .pf-tile, .pb { transition: translate .2s var(--ease); }
  .pf-tile:hover, .pb:hover { translate: 0 -4px; }
  .pb:hover .pb-big { color: rgb(164 128 255 / .3); }
  .pb .pb-img { transition: translate .3s var(--ease); }
  .pb:hover .pb-img { translate: 6px 0; }
}
@keyframes pf-stamp { from { opacity: 0; scale: 1.8; rotate: 8deg; } to { opacity: .26; scale: 1; rotate: 0deg; } }
@keyframes pf-charge { from { opacity: 0; translate: 60vw 0; } 70% { opacity: 1; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes pf-slam { from { opacity: 0; scale: 1.4; } to { opacity: 1; scale: 1; } }
@keyframes pf-grow { from { scale: 1 0; } to { scale: 1 1; } }

@media (max-width: 900px) {
  .pf-hero-car { right: 4%; width: 46%; opacity: .55; }
  .pf-stamp { font-size: 6rem; }
}
@media (max-width: 640px) {
  .pf-inner { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
  .pf-head { grid-template-columns: 1fr; min-height: 0; padding-top: 72px; }
  .pf-acts { position: absolute; top: 16px; right: 16px; }
  .pf-hero-car { top: 14px; left: 16px; right: auto; bottom: auto; width: 40%; opacity: .7; }
  .pf-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-tiers li { grid-template-rows: auto 70px auto; }
}

/* ---------- hero: the game's logo is the headline ---------- */
.hero-logo { margin: 0; line-height: 0; }
.hero-logo img { display: block; width: min(100%, 720px); height: auto; }
.tagline { display: inline-flex; align-items: baseline; gap: .25em; margin: 18px 0 0; padding: 4px 18px 8px; background: var(--ground); font: 800 clamp(2.5rem, 1rem + 3.4vw, 4.5rem)/1 var(--display); text-transform: uppercase; transform: skewX(-10deg); }
.tagline > * { transform: skewX(10deg); }
.tagline .x { font-size: 1.25em; line-height: .8; }
.hero .say { margin-top: 20px; }
@media (max-width: 900px) { .hero-logo img { width: min(100%, 520px); } .tagline { font-size: 2.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-logo img { animation: logo-in .9s var(--ease) both; }
  .js .tagline { animation: lb-row .6s var(--ease) .35s both; }
}
@keyframes logo-in { from { opacity: 0; scale: 1.25; translate: -40px 0; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* ---------- depth: hard offset shadows, pointer tilt, hero layers, grain ---------- */
/* film grain over everything, so the blacks have tooth instead of reading as flat screen */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .03; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* hard offset shadows: flat blocks set behind panels, like a manga panel's drop */
.print { box-shadow: 14px 14px 0 var(--on-light); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.fc-card { box-shadow: 10px 10px 0 #1a1230; } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.slip { box-shadow: 8px 8px 0 var(--on-light); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.tile-b { box-shadow: inset 0 -6px 0 rgb(0 0 0 / .12); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.coupon { filter: drop-shadow(14px 14px 0 #1a1230); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.board-main, .pf-inner { filter: drop-shadow(0 30px 60px rgb(0 0 0 / .6)); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.pod, .stat { box-shadow: 6px 6px 0 var(--ground); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.pb, .pf-tile, .sec { filter: drop-shadow(8px 8px 0 rgb(0 0 0 / .55)); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */

/* the logo floats off the replay on a purple glow */
.hero-logo img { filter: drop-shadow(0 0 40px rgb(164 128 255 / .45)) drop-shadow(10px 12px 0 rgb(0 0 0 / .55)); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */
.tagline { box-shadow: 8px 8px 0 var(--accent); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */

/* cars in the line-up sit on the ground, not float on it */
.lineup li { position: relative; }
.lineup img { filter: drop-shadow(0 10px 6px rgb(7 4 15 / .45)); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, glow and grain */

/* pointer tilt: panels lean toward the cursor in 3D */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .print, .fc-card, .slip, .tile-b, .pb, .pf-tile, .sec, .stat, .lineup li, .pod, .coupon { transform-style: preserve-3d; }
  .tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) var(--tilt, ) !important; transition: transform .12s linear !important; z-index: 5; }
  .print.tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03) !important; }

  /* hero layers: the replay, the logo and the words sit at different depths */
  .hero-shot img { translate: calc(var(--mx, 0) * -24px) calc(var(--my, 0) * -14px); transition: translate .4s var(--ease); }
  .hero-logo { translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 16px); transition: translate .4s var(--ease); }
  .tagline { translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 8px); }
  .lb-hero > .shot img { translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -12px); transition: translate .4s var(--ease); }
  .lb-copy { translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 10px); transition: translate .4s var(--ease); }
}

/* ---------- passes: each row links to its board, shows today's conditions, and floats a photo on hover ---------- */
.poster-list li.pass-row { display: block; position: relative; }
.pass-link { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; color: inherit; text-decoration: none; }
.pass-row .detail { display: grid; justify-items: end; gap: 6px; }
.pass-row .detail > .i { display: none; }
.pass-now { font: 600 .9375rem/1.2 var(--text); color: var(--muted); }
.pass-go { display: inline-flex; align-items: center; gap: 6px; font: 800 1rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); opacity: 0; translate: -8px 0; transition: opacity .2s, translate .25s var(--ease); }
.pass-row:hover .pass-go, .pass-link:focus-visible .pass-go { opacity: 1; translate: 0 0; }
.pass-row:hover .item { color: var(--accent); }
.pass-thumb { position: absolute; z-index: 8; left: var(--tx, 50%); top: var(--ty, 50%); width: min(340px, 30vw); height: auto; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; opacity: 0; transform: translate(-50%, -115%) rotate(-5deg) scale(.85); transition: opacity .2s, transform .3s var(--ease); box-shadow: 12px 12px 0 var(--accent); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, streaks and blur */
.pass-thumb.dark { filter: brightness(.7); }
.pass-row:hover .pass-thumb { opacity: 1; transform: translate(-50%, -115%) rotate(-3deg) scale(1); }
@media (hover: none), (max-width: 760px) { .pass-thumb { display: none; } .pass-go { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) { .pass-link { flex-direction: column; gap: 6px; } .pass-row .detail { justify-items: start; } }

/* battle: two facts under each mode */
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facts li { padding: 6px 10px; background: rgb(164 128 255 / .22); color: var(--ink); font: 800 .9375rem/1 var(--display); text-transform: uppercase; transform: skewX(-10deg); }
.sheet:not(.left) .facts { justify-content: flex-start; }


/* ---------- FAQ: an accordion of slabs ---------- */
.faq { padding: clamp(72px, 8vw, 120px) var(--m) 0; }
.faq h2 { font-size: var(--step-poster); line-height: .86; margin-bottom: 28px; }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.qa { background: var(--surface); box-shadow: 8px 8px 0 #1a1230; } /* taste-skill-ignore: user asked for more depth: hard offset shadows, streaks and blur */
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 800 clamp(1.375rem, 1rem + .8vw, 1.875rem)/1.05 var(--display); text-transform: uppercase; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { flex: none; width: 22px; height: 22px; color: var(--accent-hi); transition: rotate .25s var(--ease); }
.qa[open] { background: var(--accent); color: var(--on-light); box-shadow: 8px 8px 0 var(--pale); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, streaks and blur */
.qa[open] summary .i { rotate: 180deg; color: var(--on-light); }
.qa p { margin: 0; padding: 0 20px 20px; font-size: var(--step-lead); line-height: 1.4; font-weight: 600; }
@media (max-width: 760px) { .faq-list { grid-template-columns: 1fr; } }

/* ---------- more 3D ---------- */
/* foreground speed streaks across the hero, nearer than the logo, so they drift the most */
.hero::before { content: ""; position: absolute; inset: -10% -10%; z-index: 2; pointer-events: none; background: repeating-linear-gradient(176deg, transparent 0 46px, rgb(244 240 255 / .06) 46px 48px, transparent 48px 120px); -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 70%); mask-image: linear-gradient(to left, #000 0%, transparent 70%); } /* taste-skill-ignore: user asked for more depth: hard offset shadows, streaks and blur */
/* the driver profile blurs the board behind it */
.profile::backdrop { backdrop-filter: blur(6px) saturate(.7); }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: streak 1.6s linear infinite; }
  .qa[open] p { animation: lb-drop .3s var(--ease) both; }
  @media (hover: hover) and (pointer: fine) {
    .hero::before { translate: calc(var(--mx, 0) * -60px) calc(var(--my, 0) * -30px); }
  }
}
@keyframes streak { to { background-position: -120px 8px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* battle panels tip up out of the page as they arrive */
    @media (min-width: 901px) {
      #battle { perspective: 1400px; }
      .sheet { transform-origin: center bottom; animation: tip-up linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    }
    /* update features swing in on their hinges */
  }
}
@keyframes tip-up { from { transform: rotateX(18deg) translateY(40px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes hinge { from { transform: perspective(1200px) rotateY(24deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hinge-r { from { transform: perspective(1200px) rotateY(-24deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- what's new: the update you can see, then the update you can read ---------- */
.news { padding: clamp(72px, 8vw, 120px) var(--m) 0; }
.news h2 { font-size: var(--step-poster); line-height: .86; margin-bottom: 28px; }

/* one big picture of Akina; the strip under it switches the conditions the update brings */
.cmp { position: relative; margin: 0; background: var(--ground); }
.cmp-img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.cmp-cap { position: absolute; left: 16px; top: 16px; padding: 6px 10px; background: var(--ground); font: 800 1rem/1 var(--display); text-transform: uppercase; }
.cmp-conds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.cmp-conds button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 10px; border: 0; background: var(--surface); color: var(--muted); font: 800 1rem/1.05 var(--display); text-transform: uppercase; text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.cmp-conds button .i { flex: none; color: var(--accent-hi); }
.cmp-conds button:hover { color: var(--ink); }
.cmp-conds button[aria-pressed="true"] { background: var(--accent); color: var(--on-light); }
.cmp-conds button[aria-pressed="true"] .i { color: var(--on-light); }
@media (prefers-reduced-motion: no-preference) { .cmp-img.swap { animation: fc-swap .5s var(--ease) both; } }

/* the issue: a big date and four parts on the left, the chosen part's changes on the right */
.issue { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.issue-side { position: sticky; top: 24px; }
.issue-date { margin: 0; font: 800 clamp(3.5rem, 1rem + 5vw, 7rem)/.86 var(--display); text-transform: uppercase; color: var(--accent); }
.issue-name { margin: 14px 0 0; max-width: 32ch; font-size: var(--step-lead); line-height: 1.35; font-weight: 600; }
.ch-tabs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.ch-tab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; transition: color .2s, padding-left .25s var(--ease); }
.ch-name { font: 800 clamp(1.75rem, 1rem + 1.4vw, 2.5rem)/1 var(--display); text-transform: uppercase; }
.ch-n { font: 800 clamp(1.75rem, 1rem + 1.4vw, 2.5rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.ch-tab:hover { color: var(--ink); padding-left: 10px; }
.ch-tab[aria-pressed="true"] { color: var(--ink); padding-left: 18px; box-shadow: inset 6px 0 0 var(--accent); } /* taste-skill-ignore: the bar marks the chosen part */
.ch-tab[aria-pressed="true"] .ch-n { color: var(--accent); }
.ch-h { margin: 0 0 14px; font-size: var(--step-head); line-height: .9; }
.ch-list { list-style: none; margin: 0; padding: 0; }
.chg { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 20px; row-gap: 6px; padding: 18px 0; }
.chg + .chg { border-top: 2px solid var(--surface); }
.chg-kind { grid-row: 1 / 3; padding-top: 4px; font: 800 1rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.chg.is-new .chg-kind { color: var(--accent); }
.chg h4 { margin: 0; font: 800 clamp(1.5rem, 1rem + .8vw, 2rem)/1 var(--display); text-transform: uppercase; }
.chg p { margin: 0; max-width: 56ch; font-size: 1.0625rem; line-height: 1.5; }
.js .ch[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ch.show .chg { animation: lb-row .45s var(--ease) both; }
  .ch.show .chg:nth-child(2) { animation-delay: .05s; }
  .ch.show .chg:nth-child(3) { animation-delay: .1s; }
  .ch.show .chg:nth-child(4) { animation-delay: .15s; }
  .ch.show .chg:nth-child(5) { animation-delay: .2s; }
  .ch.show .chg:nth-child(6) { animation-delay: .25s; }
}
@media (max-width: 900px) {
  .issue { grid-template-columns: 1fr; }
  .issue-side { position: static; }
  .ch-tabs { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .cmp-img { aspect-ratio: 4 / 3; }
  .cmp-conds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .chg { grid-template-columns: 1fr; }
  .chg-kind { grid-row: auto; padding-top: 0; }
  .ch-tabs { grid-template-columns: 1fr; }
  .cmp-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-cap { font-size: .875rem; }
}

/* ---------- intro: the FC3S on the left; clock, counts and the story stacked tight on the right ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.tile { position: relative; overflow: hidden; padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; justify-content: flex-end; }
.tile.tile-a { min-height: 640px; justify-content: flex-start; }
.tile-col { grid-column: 8 / 13; display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.tile-b { background: var(--pale); color: var(--on-light); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: center; }
/* the three counts stack beside the clock, each on a purple slab */
.counts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.counts li { display: grid; grid-template-columns: 28px auto 1fr; align-items: baseline; gap: 10px; padding: 8px 12px; background: var(--accent); transform: skewX(-8deg); }
.counts li > * { transform: skewX(8deg); }
.counts .i { width: 22px; height: 22px; align-self: center; }
.counts b { font: 900 clamp(2rem, 1rem + 1.4vw, 2.75rem)/.9 var(--display); }
.counts span { font: 800 clamp(1rem, .8rem + .4vw, 1.25rem)/1 var(--display); text-transform: uppercase; }
.clock-row { display: flex; align-items: center; gap: 16px; margin: 0; }
.clock-row .i { width: 36px; height: 36px; flex: none; }
.tile-b .figure { font: 800 clamp(3.5rem, 1rem + 4.4vw, 6.25rem)/.86 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-b p#clock-note { margin: 10px 0 0; font-weight: 600; }
.tile-e { background: var(--surface); justify-content: center; gap: 14px; }
.tile-e p { margin: 0; font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); line-height: 1.5; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
  .tile.tile-a { min-height: 60svh; }
  .tile-a h2 { font-size: 17vw; }
  .tile-col { grid-column: auto; }
  .tile-b .figure { font-size: 15vw; }
}
@media (max-width: 560px) { .tile-b { grid-template-columns: 1fr; } }

/* ---------- usability pass ---------- */
/* controls take the page's fonts instead of the browser's (no stray Arial) */
button, input, select, textarea { font-family: inherit; }

/* search: clear button and match count */
.search { position: relative; }
.search input { padding-right: 40px; }
.search input::-webkit-search-cancel-button { display: none; }
.search-x { position: absolute; right: 4px; top: 50%; width: 32px; height: 32px; translate: 0 -50%; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.search-x:hover { color: var(--ink); }
.search-x .i { width: 16px; height: 16px; }
.find-note { margin: 6px 0 0; min-height: 1.2em; font-size: .875rem; color: var(--muted); }
.find-note:empty { min-height: 0; margin: 0; }

/* share the board */
.share { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border: 0; background: rgb(164 128 255 / .18); color: var(--ink); font: 800 .9375rem/1 var(--display); text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.share:hover { background: var(--accent); color: var(--on-light); }
.share.done { background: var(--pale); color: var(--on-light); }
.share .i { width: 16px; height: 16px; }

/* phones: the options fold behind one bar that names the board */
.pick-toggle { display: none; }
@media (max-width: 900px) {
  .pick-toggle { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; width: 100%; min-height: 52px; padding: 0 14px; border: 0; background: var(--surface); color: var(--ink); font: 800 1.0625rem/1.1 var(--display); text-transform: uppercase; text-align: left; cursor: pointer; }
  .pick-toggle .i { flex: none; color: var(--accent-hi); }
  .pick-toggle span { flex: 1; min-width: 0; }
  .pick-toggle b { flex: none; padding: 6px 10px; background: var(--accent); color: var(--on-light); }
  .pick-toggle[aria-expanded="true"] b { background: var(--pale); }
  .pickers.closed > :not(.pick-toggle) { display: none; }
}

/* passes: all sixteen in two columns */
.pass-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.pass-grid .pass-row { padding: 10px 0; }
.pass-grid .pass-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--surface); }
.pass-grid .item { font-size: clamp(2.5rem, 1rem + 3.6vw, 5.25rem); line-height: 1; }
.pass-grid .pass-link { align-items: center; }
@media (max-width: 760px) { .pass-grid { grid-template-columns: 1fr; } .pass-grid .item { font-size: 13vw; } }
.lineup-none { width: 100%; height: auto; aspect-ratio: 16 / 5; margin-bottom: 8px; color: var(--on-light); opacity: .55; }
.pass-grid .pass-now, .pass-grid .pass-go { font-size: 1.1875rem; }
@media (max-width: 760px) {
  .pass-grid .pass-link { align-items: flex-start; gap: 4px; }
  .pass-grid .item { font-size: 11vw; }
  .pass-grid .pass-row { padding: 8px 0; }
  .pass-grid .pass-now, .pass-grid .pass-go { font-size: 1rem; }
}

/* ---------- team battles ---------- */
.tt-elite { background: var(--accent); color: var(--on-light); }
.tt-div1 { background: var(--pale); color: var(--on-light); }
.tt-div2 { background: #9fe3f5; color: #04212a; }
.tt-div3 { background: #c8c6d6; color: #16141f; }
.tt-unranked { background: var(--surface); color: var(--muted); }
.tb-board, .tb-recent, .tb-rules { padding: clamp(56px, 6vw, 96px) var(--m) 0; }
.tb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.tb-head h2, .tb-recent h2, .tb-rules h2 { font-size: var(--step-head); line-height: .9; }
.tb-sort { width: auto; min-width: 280px; }
.tb-tiers { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-weight: 600; }
.tb-tiers li { display: inline-flex; align-items: center; gap: 10px; }
.tb-table { background: var(--surface); }
.tb-table td.c-tier { width: 150px; }
.tb-team .row-open { gap: 10px; }
.tb-tag { display: inline-block; padding: 4px 7px; background: var(--accent); color: var(--on-light); font: 800 .875rem/1 var(--display); text-transform: uppercase; transform: skewX(-12deg); }
.tb-name { font: 800 1.375rem/1 var(--display); text-transform: uppercase; }
.tb-drivers { display: block; margin-top: 6px; font-size: .9375rem; font-weight: 400; color: var(--muted); }
.board-table tr.rank1 .tb-tag { background: var(--on-light); color: var(--pale); }
.board-table tr.rank1 .tb-drivers { color: var(--on-light); }
.tb-wlt { font: 800 1.25rem/1 var(--display); white-space: nowrap; }
.tb-wlt .w { color: var(--accent-hi); }
.tb-wlt .l { color: var(--rose); }
.tb-wlt .t { color: var(--muted); }
.board-table tr.rank1 .tb-wlt b { color: var(--on-light); }
.tb-streak { font: 800 1.25rem/1 var(--display); white-space: nowrap; }
.tb-streak .i { width: 18px; height: 18px; margin-right: 4px; vertical-align: -2px; color: #ffcd4d; }
.board-table tr.rank1 .tb-streak .i { color: var(--on-light); }
.tb-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.tb-roster, .tb-hist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.tb-roster li { display: grid; grid-template-columns: 92px 1fr 70px 56px; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); }
.tb-role { justify-self: start; padding: 3px 7px; font: 800 .8125rem/1 var(--display); text-transform: uppercase; background: var(--ground); color: var(--muted); transform: skewX(-10deg); }
.tb-role.role-leader { background: var(--accent); color: var(--on-light); }
.tb-role.role-coleader { background: var(--pale); color: var(--on-light); }
.tb-roster b { font-weight: 600; }
.tb-car { width: 64px; height: 22px; object-fit: contain; }
svg.tb-car { width: 22px; color: var(--muted); }
.tb-carname { font: 800 .875rem/1 var(--display); color: var(--muted); }
.tb-hist li { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: 12px; padding: 8px 10px; background: var(--surface); }
.tb-res { justify-self: start; padding: 3px 7px; font: 800 .8125rem/1 var(--display); text-transform: uppercase; transform: skewX(-10deg); }
.res-win { background: var(--accent); color: var(--on-light); }
.res-loss { background: var(--rose); color: #2a0612; }
.res-tie { background: var(--muted); color: var(--on-light); }
.tb-score { font: 800 1.125rem/1 var(--display); }
.tb-crpgain { font: 800 .9375rem/1 var(--display); color: var(--accent-hi); }
.tb-date { font-size: .875rem; color: var(--muted); }
.tb-none { padding: 10px; color: var(--muted); }
.tb-matches { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-m { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 16px; padding: 18px 20px; background: var(--surface); }
.tb-m-side { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.tb-m-side.side-b { justify-items: end; text-align: right; }
.tb-m-name { font: 800 clamp(1.25rem, 1rem + .6vw, 1.625rem)/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.tb-m-crp { font: 800 .9375rem/1 var(--display); color: var(--accent-hi); }
.tb-m-score { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; background: var(--ground); font: 800 2.25rem/1 var(--display); transform: skewX(-10deg); }
.tb-m-score span { font-size: 1rem; color: var(--muted); text-transform: uppercase; }
.win-a .side-a .tb-m-name, .win-b .side-b .tb-m-name { color: var(--accent-hi); }
.tb-m-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: .9375rem; color: var(--muted); }
.tb-m-passes { font: 800 .9375rem/1.3 var(--display); text-transform: uppercase; color: var(--ink); }
.tb-rules-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); margin-top: 24px; align-items: start; }
.tb-rules-copy p { margin: 0 0 14px; max-width: 46ch; font-size: var(--step-lead); line-height: 1.45; }
.tb-crp td { height: 44px; }
@media (max-width: 900px) { .tb-detail, .tb-matches, .tb-rules-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tb-table th:nth-child(4), .tb-table td.tb-wlt, .tb-table th:nth-child(5), .tb-table td.tb-streak { display: none; }
  .tb-table th:nth-child(6) { display: table-cell; }
  .tb-name { font-size: 1.125rem; }
  .tb-roster li { grid-template-columns: 80px 1fr 48px; }
  .tb-roster .tb-carname { display: none; }
  .tb-hist li { grid-template-columns: 50px 1fr auto; }
  .tb-hist .tb-crpgain, .tb-hist .tb-date { display: none; }
  .tb-m { padding: 14px; }
  .tb-sort { min-width: 0; width: 100%; }
}

/* ---------- league admin ---------- */
.adm { padding: clamp(28px, 4vw, 56px) var(--m) 0; min-height: 70svh; }
.adm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.adm-top h1 { font-size: var(--step-head); line-height: .9; }
.adm-who { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.adm-role { padding: 4px 8px; background: var(--accent); color: var(--on-light); font: 800 .875rem/1 var(--display); text-transform: uppercase; transform: skewX(-10deg); }
.adm-demo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; padding: 12px 16px; background: #2a2210; color: #ffe1a0; font-weight: 600; }
.adm-demo .i { color: #ffcd4d; }
.adm-signin, .adm-denied { max-width: 520px; padding: 24px; background: var(--surface); }
.adm-signin h2, .adm-denied h2 { font-size: 2rem; margin-bottom: 14px; }
.adm-form { display: grid; gap: 14px; }
.adm-form label { display: grid; gap: 6px; font: 800 1rem/1 var(--display); text-transform: uppercase; color: var(--accent-hi); }
.adm-form input:not([type=checkbox]), .adm-form select, .roster-row input, .roster-row select { min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: var(--ground); color: var(--ink); font: 600 1rem/1 var(--text); text-transform: none; }
.adm-form input:focus-visible, .adm-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.adm-form input[readonly] { color: var(--muted); }
.adm-form label.check { display: flex; align-items: center; gap: 10px; font: 600 1rem/1.3 var(--text); text-transform: none; color: var(--ink); }
.adm-form input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.adm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-msg { margin: 0; min-height: 1.3em; font-weight: 600; color: var(--accent-hi); }
.adm-msg.err { color: var(--rose); }
.adm-msg:empty { min-height: 0; }
.chip.danger { background: #3a1220; color: #ff9fbd; }
.chip.danger:hover { background: var(--rose); color: #2a0612; }
.adm-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.adm-tabs [role=tab] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; background: none; color: var(--muted); font: 800 1.0625rem/1 var(--display); text-transform: uppercase; cursor: pointer; }
.adm-tabs [role=tab][aria-selected=true] { background: var(--accent); color: var(--on-light); }
.adm-tabs [hidden] { display: none; }
.adm-pane { padding: clamp(16px, 2vw, 28px); background: var(--surface); }
.rec-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.rec-side { display: grid; gap: 10px; margin: 0; padding: 16px; border: 0; background: var(--ground); }
.rec-side legend, .rec-passes legend, .rec-crp legend, .roster legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font: 800 1.25rem/1 var(--display); text-transform: uppercase; }
.rec-side legend ~ *, .rec-passes legend ~ *, .rec-crp legend ~ *, .roster legend ~ * { clear: both; }
.rec-vs { font: 900 2.5rem/1 var(--display); color: var(--accent); transform: skewX(-10deg); }
.rec-result { margin: 0; font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; color: var(--pale); }
.rec-passes, .rec-crp, .roster { margin: 0; padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { position: relative; cursor: pointer; }
.pchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pchip span { display: inline-block; padding: 8px 12px; background: var(--ground); color: var(--muted); font: 800 1rem/1 var(--display); text-transform: uppercase; }
.pchip input:checked + span { background: var(--accent); color: var(--on-light); }
.pchip input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.rec-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.rec-crp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rec-crp legend { grid-column: 1 / -1; }
.rec-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .9375rem; }
.adm-teams td { height: 58px; }
.adm-act { display: flex; gap: 6px; justify-content: flex-end; }
.adm-hint { margin: 0 0 12px; color: var(--muted); }
.adm-matches, .adm-staff { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-matches li, .adm-staff li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; background: var(--ground); }
.adm-matches .tb-drivers { margin-top: 4px; }
.adm-staff li { justify-content: flex-start; }
.adm-staff li .chip { margin-left: auto; }
.staff { grid-template-columns: 2fr 2fr auto; align-items: end; margin-bottom: 16px; }
.staff .adm-msg { grid-column: 1 / -1; }
.adm-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: clamp(18px, 2.4vw, 28px); border: 3px solid var(--accent); background: var(--ground); color: var(--ink); overflow: auto; }
.adm-dialog::backdrop { background: rgb(0 0 0 / .78); }
.adm-dialog h2 { font-size: 2.25rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.team-grid .wide { grid-column: span 3; }
.roster-row { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 760px) {
  .rec-sides { grid-template-columns: 1fr; }
  .rec-vs { justify-self: center; }
  .adm-tabs { grid-template-columns: 1fr 1fr; }
  .staff, .rec-crp { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid .wide { grid-column: 1 / -1; }
  .roster-row { grid-template-columns: 1fr 1fr; }
}
.tb-drivers { text-transform: none; font-family: var(--text); }
.tb-m-img { grid-column: 1 / -1; width: calc(100% + 40px); margin: -18px -20px 6px; aspect-ratio: 21 / 8; object-fit: cover; opacity: .85; }
.tb-rules { padding-top: clamp(120px, 10vw, 168px); }
.tb-table td.time, .tb-table th:last-child { padding-right: clamp(12px, 1.6vw, 24px); }
@media (max-width: 640px) { .tb-m-img { width: calc(100% + 28px); margin: -14px -14px 6px; } }
.adm-top h1 { font-size: clamp(2.5rem, 1rem + 3vw, 4rem); }
.adm-teams td:nth-child(3), .adm-teams td:nth-child(4), .adm-teams th:nth-child(3), .adm-teams th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }

/* live leaderboard states */
.board-table tr.empty .retry { margin-left: .5em; padding: .35em .9em; border: 2px solid var(--accent, #a480ff); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.board-table tr.empty .retry:hover { background: var(--accent, #a480ff); color: #000; }
.sec-none { grid-column: 1 / -1; margin: 0; color: var(--muted); }

/* ---------- telemetry poster (a row's sector panel) ---------- */
.board-table tr.detail td { padding: 0; }
.tl { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; padding: 20px clamp(14px, 2vw, 28px) 24px; background: var(--surface); }
/* the pass's replay fills the right of the panel and fades into the panel on the left */
.tl-art { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 70%; height: 100%; object-fit: cover; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); } /* taste-skill-ignore: scrim so the text sits on the photo */
.tl::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, var(--surface) 8%, transparent 70%); } /* taste-skill-ignore: scrim under the strip */
.tl-ghost { position: absolute; z-index: -1; right: -.04em; top: -.18em; font: 900 clamp(6rem, 3rem + 9vw, 12rem)/1 var(--display); color: transparent;
  -webkit-text-stroke: 2px rgb(230 219 255 / .22); transform: skewX(-10deg); pointer-events: none; white-space: nowrap; }
.tl .sec-head { margin: 0; }
.tl-hero { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.tl-car { flex: 0 1 380px; min-width: 200px; }
.tl-carimg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: contain; filter: drop-shadow(10px 10px 0 rgb(0 0 0 / .6)); }
svg.tl-carimg { width: 120px; height: 40px; color: var(--pale); }
.tl-sum { display: grid; gap: 6px; padding-bottom: 6px; }
.tl-l { font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-hi); }
.tl-time { font: 900 clamp(2.75rem, 1.5rem + 3.5vw, 4.75rem)/.9 var(--display); font-variant-numeric: tabular-nums; transform: skewX(-8deg); transform-origin: left bottom; }
.tl-lost { font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-none { margin: 0; color: var(--muted); }

/* the lap as one strip: each sector as wide as it is long */
.tl-strip { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tl-seg { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 22px 12px 10px; }
.tl-bar { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: #2a2340; transform: skewX(-24deg); transform-origin: left; }
.tl-seg.close .tl-bar { background: var(--pale); }
.tl-seg.best .tl-bar { background: var(--accent); box-shadow: 0 0 18px rgb(164 128 255 / .7); } /* taste-skill-ignore: purple sector glow, user asked for depth */
.tl-seg.slow .tl-bar { background: #3b3156; }
/* where each sector ends: a tall timing line with the running time under it */
.tl-seg + .tl-seg::before { content: ""; position: absolute; left: -4px; top: -6px; bottom: 0; width: 2px; background: rgb(230 219 255 / .35); }
.tl-n { font: 800 .9375rem/1 var(--display); text-transform: uppercase; color: var(--muted); }
.tl-t { font: 900 clamp(1.5rem, 1rem + 1.4vw, 2.25rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.tl-seg.best .tl-t, .tl-seg.best .tl-n { color: var(--accent-hi); }
.tl-d { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-seg.best .tl-d { color: var(--accent-hi); font-weight: 700; }
.tl-at { margin-top: 4px; font: 700 .8125rem/1 var(--text); font-variant-numeric: tabular-nums; color: rgb(230 219 255 / .6); }

@media (prefers-reduced-motion: no-preference) {
  tr.detail .tl-art { animation: lb-art .8s var(--ease) both; }
  tr.detail .tl-carimg { animation: drive .7s var(--ease) .1s both; }
  tr.detail .tl-time { animation: lb-burst .5s var(--ease) .2s both; }
  tr.detail .tl-bar { scale: 0 1; animation: lb-bar .55s var(--ease) calc(.25s + var(--d)) forwards; }
  tr.detail .tl-seg > :not(.tl-bar) { animation: lb-drop .45s var(--ease) calc(.3s + var(--d)) both; }
}

@media (max-width: 720px) {
  .tl-art { width: 100%; opacity: .35; }
  .tl-car { flex-basis: 100%; max-width: 300px; }
  .tl-strip { flex-wrap: wrap; }
  .tl-seg { flex: 1 1 40% !important; }
  .tl-seg:nth-child(3)::before { display: none; }
}

/* ---------- profile course cards ---------- */
.pbc { position: relative; display: grid; grid-template-rows: auto auto 1fr; background: var(--surface); filter: drop-shadow(8px 8px 0 rgb(0 0 0 / .55)); } /* taste-skill-ignore: hard offset shadow, user asked for depth */
.pbc::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 6px; background: var(--muted); }
.pbc.pt-master::before { background: var(--pale); }
.pbc.pt-specialist::before { background: var(--accent); }
.pbc.pt-platinum::before { background: #9fe3f5; }
.pbc.pt-gold::before { background: #ffcd4d; }
.pbc.pt-silver::before { background: #c8c6d6; }
.pbc.pt-bronze::before { background: #d98a5b; }
.pbc-shot { position: relative; aspect-ratio: 16 / 7; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.pbc-shot img { width: 100%; height: 100%; object-fit: cover; }
.pbc-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .75), transparent 70%); } /* taste-skill-ignore: scrim so the pass name reads on the photo */
.pbc-pass { position: absolute; z-index: 1; left: 18px; top: 12px; margin: 0; font: 900 clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem)/.9 var(--display); text-transform: uppercase; transform: skewX(-8deg); text-shadow: 3px 3px 0 #000; }
.pbc-dir { position: absolute; z-index: 1; left: 18px; top: calc(12px + 2.4rem); padding: 3px 8px; font: 800 .8125rem/1 var(--display); text-transform: uppercase; transform: skewX(-12deg); }
.pbc-dir.d0 { background: #1d2a4a; color: #9fc4ff; }
.pbc-dir.d1 { background: #3a1c2a; color: #ff9fc0; }
.pbc-rank { position: absolute; z-index: 1; right: 10px; top: 4px; font: 900 clamp(2.75rem, 2rem + 2vw, 3.75rem)/1 var(--display); color: var(--ink); transform: skewX(-10deg); text-shadow: 4px 4px 0 #000; }
.pbc.podium .pbc-rank { color: var(--accent-hi); }
.pbc.wr .pbc-rank { color: #ffcd4d; }
/* the car sits across the photo's slanted bottom edge */
.pbc-car { position: relative; z-index: 3; justify-self: end; width: 62%; height: auto; aspect-ratio: 3 / 1; object-fit: contain; margin: -18% 10px -6px 0; filter: drop-shadow(8px 6px 0 rgb(0 0 0 / .7)); }
svg.pbc-car { width: 72px; height: 28px; margin: -24px 14px 0 0; color: var(--pale); }
.pbc-body { display: grid; align-content: start; gap: 8px; padding: 4px 16px 14px 20px; }
.pbc-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbc-time { font: 900 clamp(2rem, 1.5rem + 1.2vw, 2.625rem)/1 var(--display); font-variant-numeric: tabular-nums; transform: skewX(-8deg); transform-origin: left bottom; }
.pbc.wr .pbc-time { color: #ffcd4d; }
.pbc-gap { font-size: .875rem; color: var(--muted); }
.pbc-strip { display: flex; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
.pbc-strip li { display: grid; gap: 2px; min-width: 0; padding: 7px 6px 0; border-top: 6px solid #3b3156; font-variant-numeric: tabular-nums; }
.pbc-strip li.own { border-top-color: var(--accent); }
.pbc-strip span { font: 800 .75rem/1 var(--display); color: var(--muted); }
.pbc-strip b { font: 800 1rem/1 var(--display); }
.pbc-strip li.own b, .pbc-strip li.own span { color: var(--accent-hi); }
.pbc-none, .pbc-foot { margin: 0; font-size: .8125rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .profile[open] .pbc { animation: lift-in .45s var(--ease) calc(.3s + var(--d)) both; }
  .pbc { transition: translate .2s var(--ease); }
  .pbc:hover { translate: 0 -4px; }
  .pbc-shot img { transition: scale .5s var(--ease); }
  .pbc:hover .pbc-shot img { scale: 1.06; }
  .pbc-car { transition: translate .35s var(--ease); }
  .pbc:hover .pbc-car { translate: 10px 0; }
}

/* a profile redrawn by a live update keeps still */
#pf-inner.quiet, #pf-inner.quiet * { animation: none !important; }

/* ======================================================================
   v16: the page stops repeating itself. Battle is a manga page, the passes
   get a photo stage, the download band is the finale, pending channels shrink.
   ====================================================================== */
.sfx, .touge { font-family: "Noto Sans JP", var(--display); font-weight: 900; }

/* ---------- battle: one manga page on lilac paper ---------- */
/* each panel is a slanted replay frame; its words sit under it on the paper, never on the picture */
.manga { margin-top: clamp(56px, 6vw, 96px); padding: clamp(32px, 4vw, 64px) var(--m) clamp(48px, 5vw, 80px); background: var(--pale); color: var(--on-light); overflow: hidden; }
.manga-title { font-size: var(--step-poster); line-height: .84; max-width: 9ch; margin-bottom: clamp(24px, 3vw, 40px); }
.page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(24px, 2.4vw, 40px); align-items: start; }
.panel { position: relative; min-width: 0; display: grid; gap: 16px; align-content: start; }
.panel > .shot { position: relative; aspect-ratio: 16 / 10; filter: drop-shadow(8px 8px 0 var(--on-light)); background: none; } /* taste-skill-ignore: hard offset shadow, the manga panel drop agreed in DESIGN.md */
.panel > .shot img { clip-path: var(--cut); }
/* a zig-zag of panels: big, small, then small, big */
.pn1 { grid-column: 1 / 8; --cut: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); }
.pn2 { grid-column: 8 / 13; margin-top: clamp(40px, 8vw, 120px); --cut: polygon(0 24px, 100% 0, 100% 100%, 0 100%); }
.pn3 { grid-column: 1 / 6; --cut: polygon(0 0, 100% 24px, 100% 100%, 0 calc(100% - 24px)); }
.pn4 { grid-column: 6 / 13; margin-top: clamp(-120px, -6vw, -40px); --cut: polygon(0 32px, 100% 0, 100% 100%, 0 100%); }
.pn1 > .shot, .pn2 > .shot, .pn3 > .shot, .pn4 > .shot { --cut: inherit; }
.pn1 .shot img { object-position: 60% 50%; }
.pn2 .shot img { object-position: 30% 50%; }
.pn3 .shot img { object-position: 20% 50%; }
/* the words: an ink rule, the heading, one line, the facts */
.cap { display: grid; gap: 10px; padding-top: 12px; border-top: 5px solid var(--on-light); }
.cap h3 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); line-height: .92; }
.cap .h-i { color: var(--accent); }
.cap p { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; max-width: 46ch; }
.pn1 .cap h3 { font-size: clamp(2.5rem, 1rem + 3.4vw, 4.75rem); }
.cap .facts li { background: var(--on-light); color: var(--pale); }
/* the screenshots carry the game's own sound effects, so ours goes on the paper beside the heading */
.manga-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.manga-head .manga-title { margin: 0; }
.sfx { line-height: 1; font-size: clamp(3rem, 1rem + 7vw, 10rem); color: var(--pale); -webkit-text-stroke: 5px var(--on-light); paint-order: stroke fill; letter-spacing: -0.06em; white-space: nowrap; rotate: -8deg; translate: 0 -.3em; pointer-events: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sfx { animation: sfx-in linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
  }
}
@keyframes sfx-in { from { opacity: 0; scale: 1.5; } to { opacity: 1; scale: 1; } }
@media (min-width: 1101px) { .manga { padding-right: calc(var(--m) + 36px); } } /* clear the side dots */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; gap: 44px; }
  .pn1, .pn2, .pn3, .pn4 { grid-column: auto; margin-top: 0; }
  .panel > .shot { aspect-ratio: 4 / 3; }
  .pn1 .cap h3 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .manga-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sfx { font-size: 18vw; -webkit-text-stroke-width: 3px; translate: 0; }
}

/* ---------- passes: a photo stage beside the names ---------- */
.pass-head { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); margin-bottom: 32px; }
.passes .pass-head h2 { margin: 0; }
.touge { font-size: clamp(5.5rem, 2rem + 8vw, 12rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--accent); }
@media (min-width: 901px) {
  .passes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .passes .pass-head, .passes .after { grid-column: 1 / -1; }
  .pass-stage { position: sticky; top: 88px; margin: 0; }
  .ps-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .ps-img.dark { filter: brightness(.75); }
  .pass-stage figcaption { display: grid; gap: 4px; margin-top: -28px; position: relative; padding-left: 4px; }
  .ps-name { font: 800 clamp(3rem, 1.4rem + 4vw, 6rem)/.86 var(--display); text-transform: uppercase; }
  .ps-now { font-weight: 600; color: var(--muted); }
  .passes .pass-grid .item { font-size: clamp(1.75rem, .9rem + 1.8vw, 3rem); }
  .passes .pass-grid .pass-now { display: none; }
  .passes .pass-row.on .item { color: var(--accent); }
  .passes .pass-row.on::before { background: var(--accent); }
  .passes .pass-thumb { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .ps-img.swap { animation: fc-swap .45s var(--ease) both; } }
/* phones: the passes become a strip of postcards you swipe through */
@media (max-width: 900px) {
  .pass-stage { display: none; }
  .passes .pass-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 340px); grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--m) * -1); padding: 4px var(--m) 20px; scroll-padding-inline: var(--m); scrollbar-width: none; }
  .passes .pass-grid::-webkit-scrollbar { display: none; }
  .passes li.pass-row { display: flex; flex-direction: column; padding: 0; scroll-snap-align: start; background: var(--surface); }
  .passes .pass-row::before { display: none; }
  .passes .pass-row .item { animation: none; font-size: 2.25rem; }
  .passes .pass-thumb { display: block; position: static; order: -1; width: 100%; aspect-ratio: 16 / 10; opacity: 1; transform: none; box-shadow: none; }
  .passes .pass-link { padding: 12px 14px 16px; }
  .passes .after { margin-top: 12px; }
}

/* ---------- ready to race: the finale ---------- */
.finale { position: relative; margin-top: clamp(56px, 6vw, 96px); padding: clamp(40px, 5vw, 80px) var(--m) 0; background: var(--accent); color: var(--on-light); overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 64px); }
.fin-copy { display: grid; align-content: start; gap: clamp(20px, 2.4vw, 32px); }
.finale h2 { font-size: var(--step-poster); line-height: .82; }
.fin-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.fin-facts li { display: grid; gap: 4px; padding-top: 12px; border-top: 6px solid var(--on-light); }
.fin-facts b { font: 800 clamp(1.5rem, 1rem + 1.2vw, 2.25rem)/1 var(--display); text-transform: uppercase; }
.fin-facts span { font-weight: 600; }
.fin-note { font-weight: 600; font-size: var(--step-lead); line-height: 1.35; max-width: 36ch; }
.fin-shot { align-self: start; margin-top: clamp(8px, 3vw, 48px); aspect-ratio: 4 / 3; padding: 10px; background: var(--pale); rotate: 3deg; box-shadow: 14px 14px 0 var(--on-light); } /* taste-skill-ignore: hard offset shadow, the print drop agreed in DESIGN.md */
.fin-shot img { object-position: 40% 50%; }
.fin-join { grid-column: 1 / -1; position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: clamp(32px, 4vw, 56px) calc(var(--m) * -1) 0; padding: 0 var(--m) 18px; background: var(--on-light); color: var(--accent); text-decoration: none; overflow: hidden; }
.fin-join .word { font: 800 clamp(7rem, 1rem + 26vw, 26rem)/.78 var(--display); text-transform: uppercase; letter-spacing: -0.01em; padding-top: .08em; transition: color .25s; }
.fin-go { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 1.2em; font: 800 clamp(1.25rem, 1rem + 1vw, 2rem)/1 var(--display); text-transform: uppercase; color: var(--pale); white-space: nowrap; }
.fin-go .i { width: 1.1em; height: 1.1em; transition: translate .25s var(--ease); }
.fin-join:hover .word, .fin-join:focus-visible .word { color: var(--pale); }
.fin-join:hover .fin-go .i { translate: 8px 0; }
.fin-join:focus-visible { outline: 3px solid var(--pale); outline-offset: -8px; }
@media (max-width: 900px) {
  .finale { grid-template-columns: 1fr; }
  .finale h2 { font-size: 19vw; }
  .fin-shot { order: -1; margin: 0 4px 28px; rotate: -2deg; }
  .fin-facts { gap: 16px; }
  .fin-join { flex-direction: column; align-items: flex-start; gap: 0; }
  .fin-join .word { font-size: 40vw; }
  .fin-go { padding: 0 0 6px; }
}

/* ---------- follow: one strip while the channels are pending ---------- */
.follow-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 72px); padding: 24px var(--m); background: var(--surface); }
.follow-strip h2 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.follow-strip p { flex: 1 1 28ch; max-width: 44ch; color: var(--muted); font-weight: 600; }
.strip-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sl { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; background: var(--ground); color: var(--ink); font: 800 1.25rem/1 var(--display); text-transform: uppercase; text-decoration: none; }
.sl .slip-i { position: static; width: 22px; height: 22px; }
.sl-state { padding: 4px 8px; background: var(--surface); color: var(--muted); font: 600 .8125rem/1 var(--text); text-transform: none; }
.sl.is-pending { cursor: default; color: var(--muted); }
a.sl[href]:hover { background: var(--accent); color: var(--on-light); }

/* ---------- trailer: a slim letterbox until it exists ---------- */
.trailer > .shot { aspect-ratio: auto; height: clamp(220px, 26vw, 380px); }
.trailer h2 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
@media (max-width: 760px) { .trailer > .shot { height: 200px; aspect-ratio: auto; } }

/* ---------- contact: until the form is wired, the coupon points at the Discord ---------- */
.coupon-wait { padding: 48px; display: grid; align-content: center; justify-items: start; gap: 24px; }
.coupon-wait p { font-weight: 600; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
@media (max-width: 760px) { .coupon-wait { padding: 28px 24px 32px; } }

/* ---------- what's new: four conditions ---------- */
.cmp-conds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .cmp-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- teams: on phones the tier column goes, header and cells together, so CRP lines up ---------- */
@media (max-width: 640px) { .tb-table th:nth-child(3) { display: none; } }

/* ---------- header on phones: the hidden nav takes no grid cell, so the menu button stays in the bar ---------- */
@media (max-width: 900px) { .site-head nav { display: contents; } }

/* ---------- picture sharpness ---------- */
/* the condition photos are 800px wide: never show one wider than it really is */
.cmp { max-width: 800px; }
.news .cmp-conds { max-width: 800px; }
@media (min-width: 1101px) {
  .news { display: grid; grid-template-columns: minmax(0, 800px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
  .news > h2 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: clamp(5rem, 1rem + 7vw, 10rem); line-height: .84; }
  .news > .cmp { grid-column: 1; grid-row: 1; }
  .news > .issue { grid-column: 1 / -1; }
}

/* ---------- driver names in the game formatting ---------- */
/* names keep the case the driver typed, as in game, and stay on one line */
.dn { text-transform: none; white-space: nowrap; }