/* Box Box — "Flutlicht": a night race under floodlights, styled like the
   timing graphics on race TV. Night-blue asphalt with a carbon weave,
   panels with chamfered corners, slanted buttons, condensed italic
   capitals, a speed gradient (red → orange) as the signature, cyan for
   telemetry and gold for the podium. Dark only, on purpose.

   1. Fonts and tokens   4. Components     7. Driver creation
   2. Base               5. Front door     8. Legal and error pages
   3. Header, footer     6. Paddock        9. Media queries */

/* ========== 1. Fonts and tokens ========== */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowcondensed-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowcondensed-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowcondensed-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --font: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --cut: 14px;          /* the chamfer of panels */

  --night: #080b12;
  --night-2: #0d121c;
  --panel: #121926;
  --panel-2: #182132;
  --rule: #253049;
  --rule-2: #33405e;
  --text: #eef2f8;
  --text-soft: #b8c2d4;
  --muted: #7d89a1;
  --hot: #ff3b2f;
  --hot-2: #ff8a1f;
  --speed: linear-gradient(100deg, var(--hot) 0%, var(--hot-2) 100%);
  --cyan: #2fd8ff;
  --gold: #ffc531;
  --green: #2fe28a;
  --purple: #b06bff;
  --danger-soft: #3a1418;
}

/* ========== 2. Base ========== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  /* floodlights from above, then a fine carbon weave on night asphalt */
  background:
    radial-gradient(ellipse 70% 40% at 20% -8%, rgba(120, 160, 255, .13), transparent 70%),
    radial-gradient(ellipse 60% 36% at 85% -10%, rgba(255, 120, 60, .08), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 6px),
    var(--night);
  background-attachment: fixed;
}

a { color: inherit; text-decoration-color: var(--hot-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: #fff; text-decoration-color: var(--cyan); }

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

/* highlighted words carry the speed gradient */
mark {
  background: var(--speed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}

kbd {
  font: 600 .72em/1 var(--font);
  padding: .2em .45em;
  border: 1px solid var(--rule-2);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--text-soft);
  background: var(--night-2);
}

code { font: .88em ui-monospace, Menlo, monospace; background: var(--panel-2); padding: .1em .35em; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ========== 3. Header, footer ========== */

header.site {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px var(--gutter) 14px;
}

.to-hub {
  flex: none;
  font: 600 14px/1 var(--font-cond);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 6px 0;
}
.to-hub:hover { color: var(--text); }

.wordmark { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; }
.wm-tile {
  display: inline-block;
  padding: 4px 16px 3px;
  background: var(--speed);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font: 900 italic 26px/1 var(--font-cond);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  transition: filter .15s;
}
.wordmark:hover .wm-tile { filter: brightness(1.12); }
.wm-radio { width: 24px; height: 24px; fill: var(--cyan); stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; }
.wm-radio path { fill: none; }
.wordmark:hover .wm-radio path { animation: radio 1s ease-in-out infinite; }
.wordmark:hover .wm-radio path + path { animation-delay: .15s; }
@keyframes radio { 50% { opacity: .2; } }

header nav { display: flex; align-items: center; gap: 16px; }

/* driver's money, laurels and track time, as timing graphics */
.timing { display: flex; margin: 0; }
.timing > div {
  padding: 2px 14px;
  border-left: 1px solid var(--rule-2);
  line-height: 1.1;
}
.timing dt { font: 600 11px/1.2 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.timing dd { margin: 0; font: 700 italic 22px/1.05 var(--font-cond); font-variant-numeric: tabular-nums; }
.timing .unit { font-size: .7em; margin: 0 2px; color: var(--text-soft); }
.timing .laurel dd { color: var(--green); }
.timing .track dd { color: var(--cyan); }

header nav a.account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 12em;
  padding: 6px 14px;
  background: var(--panel-2);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font: 700 italic 17px/1 var(--font-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
}
header nav a.account:hover { background: var(--rule-2); }
.account-name { overflow: hidden; text-overflow: ellipsis; }
.account-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

.kbd-help-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--text-soft);
  font: 700 italic 17px/1 var(--font-cond);
  transform: skewX(-12deg);
}
.kbd-help-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* a thin light trail under the header */
.speedline {
  height: 3px;
  margin-bottom: clamp(24px, 4vw, 44px);
  background: linear-gradient(90deg, transparent 0, var(--hot) 18%, var(--hot-2) 50%, var(--cyan) 82%, transparent 100%);
  opacity: .9;
}

footer.site {
  margin-top: auto;
  padding: 56px 16px 28px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
footer.site p { margin: 4px 0; }
footer.site .legal a { color: var(--muted); text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; }
footer.site .legal a:hover { color: var(--text); text-decoration-color: var(--hot-2); }

main.front, main.narrow, main.create-page, main.paddock {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
main.narrow { max-width: 780px; }
main.paddock { max-width: 1360px; }

/* ========== 4. Components ========== */

.headline {
  margin: 8px 0 22px;
  font: 900 italic clamp(40px, 7vw, 80px)/.95 var(--font-cond);
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.lede { max-width: 36em; margin: 0 0 28px; font-size: 19px; color: var(--text-soft); }
.kicker { margin: 0; font: 700 italic 17px/1.2 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--hot-2); }

.label, .section-title, .err-code, .store-where, .kbd-help h3, .tower-head {
  font: 600 13px/1.2 var(--font-cond);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.label { margin: 0 0 12px; color: var(--cyan); }
.section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 64px 0 18px;
  color: var(--text-soft);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }

/* panels: chamfered top-left and bottom-right corners */
.panel, .note, .datum {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel { padding: 16px 20px 18px; }
.note { padding: 4px 22px; box-shadow: inset 3px 0 0 var(--hot-2); }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }

.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }

/* slanted buttons; the focus ring sits inside, the slant would cut it off outside */
.btn {
  --slant: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px 11px;
  border: 0;
  background: var(--panel-2);
  color: var(--text);
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  font: 700 italic 19px/1 var(--font-cond);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter .12s, transform .12s, background-color .12s;
}
.btn:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--rule-2); color: #fff; } }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--speed); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
@media (hover: hover) { .btn.primary:hover:not(:disabled) { background: var(--speed); filter: brightness(1.12); } }
.btn.ghost { background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--cyan); }
@media (hover: hover) { .btn.ghost:hover:not(:disabled) { background: #1d3446; } }
.btn.small { padding: 8px 20px 7px; font-size: 16px; }
.btn kbd { color: inherit; background: transparent; border-color: currentColor; opacity: .7; }

.linklike { background: none; border: 0; padding: 2px 4px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--hot-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.error {
  margin: 0;
  padding: 10px 14px;
  background: var(--danger-soft);
  box-shadow: inset 3px 0 0 var(--hot);
  color: #ffb3ac;
  font-weight: 600;
}

/* --- keyboard help --- */
.kbd-help {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px 26px;
  border: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 3px 0 var(--hot-2), 0 30px 80px rgba(0, 0, 0, .6);
}
.kbd-help::backdrop { background: rgba(5, 7, 12, .7); backdrop-filter: blur(3px); }
.kbd-help h2 { margin: 0 0 6px; font: 900 italic 34px/1 var(--font-cond); text-transform: uppercase; }
.kbd-help h3 { margin: 20px 0 8px; color: var(--cyan); }
.kbd-help form { margin-top: 22px; }
.keys { margin: 0; display: grid; gap: 2px; }
.keys > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; font-size: 16px; }

/* --- flag --- */
.np-flag { display: inline-block; width: 36px; height: 24px; flex: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.np-flag svg { display: block; width: 100%; height: 100%; }

/* ========== 5. Front door ========== */

.hero { position: relative; padding-top: 4px; }

/* five red lights; they come on one by one and go out together – lights out */
.gantry {
  display: inline-flex;
  gap: 10px;
  margin: 0 0 26px;
  padding: 10px 16px;
  background: #05070b;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.gantry .light { width: 26px; height: 26px; border-radius: 50%; background: #2a0d0e; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .5); animation: lights 6s infinite; }
.gantry .light:nth-child(2) { animation-name: lights2; }
.gantry .light:nth-child(3) { animation-name: lights3; }
.gantry .light:nth-child(4) { animation-name: lights4; }
.gantry .light:nth-child(5) { animation-name: lights5; }
@keyframes lights  { 0%, 9% { background: #2a0d0e; } 10%, 69% { background: #ff2a1a; box-shadow: 0 0 18px #ff2a1a; } 70%, 100% { background: #2a0d0e; } }
@keyframes lights2 { 0%, 19% { background: #2a0d0e; } 20%, 69% { background: #ff2a1a; box-shadow: 0 0 18px #ff2a1a; } 70%, 100% { background: #2a0d0e; } }
@keyframes lights3 { 0%, 29% { background: #2a0d0e; } 30%, 69% { background: #ff2a1a; box-shadow: 0 0 18px #ff2a1a; } 70%, 100% { background: #2a0d0e; } }
@keyframes lights4 { 0%, 39% { background: #2a0d0e; } 40%, 69% { background: #ff2a1a; box-shadow: 0 0 18px #ff2a1a; } 70%, 100% { background: #2a0d0e; } }
@keyframes lights5 { 0%, 49% { background: #2a0d0e; } 50%, 69% { background: #ff2a1a; box-shadow: 0 0 18px #ff2a1a; } 70%, 100% { background: #2a0d0e; } }

/* the race weekend as the sectors of a lap: purple, green, yellow, then the flag */
.sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sectors li {
  --c: var(--purple);
  padding: 0 22px 18px 24px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%);
  box-shadow: inset 0 4px 0 var(--c);
}
.sectors .s2 { --c: var(--green); }
.sectors .s3 { --c: var(--gold); }
.sectors .fin { --c: #fff; background: linear-gradient(180deg, #2b1a14, #1d1210); }
.sec-tag { display: inline-block; margin-top: 16px; font: 900 italic 30px/1 var(--font-cond); color: var(--c); }
.sec-tag svg { width: 36px; height: 24px; fill: #fff; vertical-align: -2px; }
.sectors h3 { margin: 6px 0 4px; font: 700 italic 24px/1.05 var(--font-cond); text-transform: uppercase; letter-spacing: .02em; }
.sectors p { margin: 0; font-size: 15px; color: var(--text-soft); }

.features { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.features li { padding-left: 18px; box-shadow: inset 2px 0 0 var(--rule-2); }
.f-num { font: 900 italic 18px/1 var(--font-cond); color: var(--hot-2); }
.features h2 { margin: 4px 0 6px; font: 700 italic 26px/1.05 var(--font-cond); text-transform: uppercase; }
.features p { margin: 0; color: var(--text-soft); font-size: 16px; }

/* ========== 6. Paddock ========== */

main.paddock {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 330px;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

/* the menu as a timing tower */
.areas { background: rgba(5, 7, 11, .7); box-shadow: inset 0 3px 0 var(--hot); padding: 10px 0 8px; }
.tower-head { margin: 0 14px 8px; color: var(--muted); }
.areas ol { list-style: none; margin: 0; padding: 0; }
.area {
  display: grid;
  grid-template-columns: 30px 20px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  text-decoration: none;
  font: 700 italic 19px/1.1 var(--font-cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.area svg { width: 18px; height: 18px; color: var(--muted); }
.pos {
  display: grid;
  place-items: center;
  height: 22px;
  background: var(--panel-2);
  font: 700 italic 14px/1 var(--font-cond);
  color: var(--text-soft);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
a.area:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.area[aria-current="page"] { background: linear-gradient(90deg, rgba(255, 138, 31, .22), transparent); box-shadow: inset 3px 0 0 var(--hot-2); }
.area[aria-current="page"] .pos { background: var(--speed); color: #fff; }
.area[aria-current="page"] svg { color: var(--hot-2); }
.area.soon { color: #4e5870; cursor: default; }
.area.soon svg { color: #3a4359; }
.area.soon .pos { color: #4e5870; background: rgba(255, 255, 255, .03); }

/* the driver card, like a driver intro on TV */
.driver-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 50% 46%, rgba(130, 160, 230, .2), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.dc-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 14px 30px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent);
  box-shadow: inset 0 -1px 0 var(--rule-2);
}
.dc-name { margin: 0; min-width: 0; font: 900 italic clamp(30px, 3.4vw, 44px)/1 var(--font-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.level-badge {
  margin-left: auto;
  padding: 6px 16px 5px;
  background: var(--gold);
  color: #1b1405;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font: 900 italic 18px/1 var(--font-cond);
  text-transform: uppercase;
  white-space: nowrap;
}

.paperdoll {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: center;
  padding: 22px 22px 0;
}
/* the race number, huge and hollow behind the driver */
.ghost-num {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font: 900 italic clamp(180px, 22vw, 300px)/1 var(--font-cond);
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 138, 31, .5);
  pointer-events: none;
  user-select: none;
}
.slots { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.slot {
  aspect-ratio: 1;
  display: grid;
  place-items: end center;
  padding: 6px;
  background: rgba(8, 11, 18, .55);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font: 600 13px/1.1 var(--font-cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.pd-figure { position: relative; z-index: 1; width: 100%; max-width: 340px; margin: 0 auto; }
.pd-figure svg, .cr-figure svg { display: block; width: 100%; height: auto; }
/* the light spot on the floor */
.paperdoll::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 40px;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 255, 255, .12), transparent 70%);
}
.gear-note { margin: 0; padding: 14px 22px 20px; box-shadow: inset 0 1px 0 var(--rule); }

.driver-side { display: flex; flex-direction: column; gap: 12px; }
.xp-bar { position: relative; height: 12px; background: #05070b; box-shadow: inset 0 0 0 1px var(--rule-2); }
.xp-bar span { display: block; height: 100%; width: 0; background: var(--speed); box-shadow: 0 0 12px rgba(255, 110, 40, .6); }
/* the finish line at the end of the bar */
.xp-bar::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 6px 6px;
}
.xp-card p { margin: 8px 0 0; }

.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stats li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 4px; align-items: baseline; }
.st-name { font: 700 italic 19px/1 var(--font-cond); text-transform: uppercase; letter-spacing: .03em; }
.st-val { font: 900 italic 24px/1 var(--font-cond); color: var(--cyan); font-variant-numeric: tabular-nums; }
/* telemetry: a bar of LED segments */
.st-bar {
  grid-column: 1 / -1;
  height: 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 8px, transparent 8px 10px);
}
.st-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 10px);
  filter: drop-shadow(0 0 4px rgba(47, 216, 255, .6));
}
.st-text { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.next-card { box-shadow: inset 3px 0 0 var(--gold); }
.next-card .label { color: var(--gold); }
.next-card p { margin: 0; font-size: 15px; color: var(--text-soft); }

/* ========== 7. Driver creation ========== */

.creator { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.cr-stage {
  position: sticky;
  top: 16px;
  margin: 0;
  padding: 18px 18px 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(130, 160, 230, .22), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.nameplate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -18px;
  padding: 12px 20px 16px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 2px 0 var(--hot-2);
  min-height: 58px;
}
.np-num {
  display: inline-grid;
  place-items: center;
  min-width: 2.2em;
  padding: 3px 8px 2px;
  background: #fff;
  color: #0b0f17;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font: 900 italic 22px/1 var(--font-cond);
}
.np-name { font: 900 italic 26px/1 var(--font-cond); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cr-panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.cr-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: rgba(0, 0, 0, .4); }
.cr-tab {
  padding: 13px 4px 11px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 italic 17px/1 var(--font-cond);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 -2px 0 var(--rule);
}
.cr-tab:hover { color: var(--text); }
.cr-tab[aria-selected="true"] { color: #fff; box-shadow: inset 0 -3px 0 var(--hot-2); background: linear-gradient(0deg, rgba(255, 138, 31, .14), transparent); }
.cr-tab kbd { margin-left: 6px; font-size: 10px; font-style: normal; }

.cr-rows { padding: 6px 20px 12px; display: grid; min-height: 340px; align-content: start; }
.cr-row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.cr-row:last-child { border-bottom: 0; }
.cr-label { font: 700 italic 18px/1.1 var(--font-cond); text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 38px;
  height: 34px;
  flex: none;
  border: 0;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  color: var(--text);
  font: 900 20px/1 var(--font);
  transform: skewX(-12deg);
}
@media (hover: hover) { .stepper button:hover { background: var(--speed); box-shadow: none; } }
.stepper output { min-width: 8em; text-align: center; font: 700 italic 18px/1 var(--font-cond); text-transform: uppercase; color: var(--cyan); }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.swatch[aria-checked="true"] { clip-path: none; outline: 2px solid #fff; outline-offset: 2px; transform: skewX(-12deg); }
.toggle { display: flex; gap: 6px; }
.pill {
  padding: 7px 18px 6px;
  border: 0;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font: 700 italic 16px/1 var(--font-cond);
  text-transform: uppercase;
  color: var(--text-soft);
}
.pill:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.pill[aria-checked="true"] { background: var(--speed); box-shadow: none; color: #fff; }

.cr-field { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.cr-field label { font: 700 italic 18px/1.1 var(--font-cond); text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); }
.cr-field input, .cr-field select {
  max-width: 420px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid var(--rule-2);
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  font: 600 19px var(--font);
}
.cr-field input:focus, .cr-field select:focus { outline: none; border-bottom-color: var(--cyan); background: rgba(47, 216, 255, .06); }
.cr-field input[type="number"] { max-width: 8em; font: 900 italic 24px var(--font-cond); }
.cr-field select option { background: var(--panel); }
.cr-field .hint { margin: 0; font-size: 14px; color: var(--muted); }

.cr-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 14px 20px 20px; background: rgba(0, 0, 0, .3); }
.cr-panel > .error { margin: 0 20px 20px; }

/* ========== 8. Legal and error pages ========== */

.prose h2 { margin: 40px 0 8px; font: 700 italic 26px/1.1 var(--font-cond); text-transform: uppercase; }
.prose p, .prose li { max-width: 42em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose .stand { margin-top: 40px; font-size: 14px; }
.todo { background: var(--danger-soft); color: #ffb3ac; font-weight: 700; padding: 0 .25em; }

.store-group { margin-top: 28px; }
.store-where { display: flex; align-items: center; gap: 10px; color: var(--cyan); margin: 0 0 12px; }
.where-dot { width: 10px; height: 10px; background: var(--cyan); transform: skewX(-12deg); flex: none; }
.datum { padding: 16px 22px 18px; margin-bottom: 10px; }
.datum h4 { margin: 0; font: 700 italic 22px/1.1 var(--font-cond); text-transform: uppercase; }
.datum-what { margin: 4px 0 14px; color: var(--text-soft); font-size: 16px; }
.datum dl { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; margin: 0; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.datum dt { font: 600 12px/1.2 var(--font-cond); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 3px; }
.datum dd { margin: 0; font-size: 15px; line-height: 1.45; }

/* the error page: the red flag is out */
.error-page {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(8px, 4vw, 40px) var(--gutter) 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.flag-board {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 30px 20px;
  background: #05070b;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: inset 0 3px 0 var(--hot);
}
.fb-flag { width: 120px; height: 78px; background: var(--hot); clip-path: polygon(0 0, 100% 8%, 96% 50%, 100% 92%, 0 100%); animation: wave 1.6s ease-in-out infinite alternate; }
@keyframes wave { to { clip-path: polygon(0 4%, 100% 0, 98% 50%, 100% 100%, 0 96%); } }
.fb-code { font: 900 italic 84px/1 var(--font-cond); color: #fff; }
.fb-label { font: 700 italic 18px/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--hot); }
.err-code { margin: 0 0 6px; color: var(--muted); }
.err-text .headline { margin: 0 0 16px; }

/* ========== 9. Media queries ========== */

@media (max-width: 1120px) {
  main.paddock { grid-template-columns: minmax(0, 1fr) 310px; }
  .areas { grid-column: 1 / -1; padding: 0; box-shadow: inset 0 -3px 0 var(--hot); }
  .tower-head { display: none; }
  .areas ol { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .area { grid-template-columns: auto auto auto; border-top: 0; white-space: nowrap; padding: 10px 14px; }
}
@media (max-width: 880px) {
  main.paddock { grid-template-columns: minmax(0, 1fr); }
  .creator { grid-template-columns: minmax(0, 1fr); }
  .cr-stage { position: static; max-width: 420px; width: 100%; margin: 0 auto; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .error-page { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .timing dt { display: none; }
  .timing > div { padding: 0 10px; }
}
@media (max-width: 600px) {
  header.site { flex-wrap: wrap; row-gap: 10px; }
  header nav { width: 100%; justify-content: space-between; }
  .timing dd { font-size: 19px; }
  header nav a.account { max-width: 9em; }
  .kbd-help-btn { display: none; } /* phones rarely have a keyboard */
  .area svg { display: none; }
  .paperdoll { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 8px; padding: 16px 12px 0; }
  .slot { font-size: 10px; padding: 3px; }
  .dc-head { padding: 14px 16px 12px 22px; }
  .cr-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cr-tab kbd { display: none; }
  .cr-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sectors { grid-template-columns: minmax(0, 1fr); }
  .datum dl { grid-template-columns: 1fr; gap: 12px; }
  .gantry .light { width: 20px; height: 20px; }
}
.touch kbd { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gantry .light { animation: none; background: #ff2a1a; }
  .fb-flag, .wordmark:hover .wm-radio path { animation: none; }
  .btn { transition: none; }
}

/* ========== 10. Items, garage, shops (stage R2) ========== */

:root { --r0: #9aa6bd; --r1: #2fe28a; --r2: #3b8cff; --r3: #b06bff; --r4: #ffc531; }
.r0 { --rc: var(--r0); } .r1 { --rc: var(--r1); } .r2 { --rc: var(--r2); } .r3 { --rc: var(--r3); } .r4 { --rc: var(--r4); }

.main-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* an item: its icon on a plate in the colour of its rarity */
.tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 10%;
  border: 0;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%),
    #0b1019;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 -3px 0 var(--rc);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform .1s, filter .1s;
}
.tile svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.tile:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (hover: hover) { .tile:hover { filter: brightness(1.2); } }
.tile.selected { box-shadow: inset 0 0 0 2px #fff, inset 0 -3px 0 var(--rc); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 45%, transparent), transparent 75%), #111a29; }
.r4.tile { animation: legend 3s ease-in-out infinite; }
@keyframes legend { 50% { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 197, 49, .5)); } }
.tile-lvl {
  position: absolute;
  right: 3px;
  top: 3px;
  min-width: 1.6em;
  padding: 1px 4px;
  background: rgba(0, 0, 0, .7);
  font: 700 italic 12px/1.2 var(--font-cond);
  color: var(--text-soft);
}
.tile.too-high .tile-lvl { background: var(--hot); color: #fff; }

/* filled slots hold their tile; empty ones show the kind faintly */
.slot { position: relative; }
.slot .ghost { position: absolute; inset: 14% 14% 26%; width: 72%; height: 60%; opacity: .55; }
.slot.filled { padding: 0; background: none; box-shadow: none; }
.slot.filled .tile { height: 100%; }

/* the bag: 8 across, 4 on narrow screens … */
.bag-wrap .section-title { margin-top: 26px; }
.bag-count { margin-left: 4px; color: var(--cyan); letter-spacing: .06em; }
.bag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.bag li.empty { aspect-ratio: 1; background: rgba(5, 7, 11, .55); box-shadow: inset 0 0 0 1px var(--rule); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.bag li.dim .tile { opacity: .35; }
.bag-wrap > p { margin: 10px 0 0; }

/* the info board */
.board { min-height: 160px; }
.board-empty { margin: 0; color: var(--muted); font-size: 15px; }
.board-head { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding-bottom: 12px; box-shadow: inset 0 -1px 0 var(--rule-2); }
.board-icon { display: grid; place-items: center; width: 64px; height: 64px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), #0b1019; box-shadow: inset 0 -3px 0 var(--rc); }
.board-rarity { display: block; font: 600 12px/1.2 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }
.board-name { display: block; font: 900 italic 24px/1.05 var(--font-cond); text-transform: uppercase; }
.board-lvl { font-size: 14px; color: var(--muted); }
.board-values { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.board-values li { display: grid; grid-template-columns: 1fr auto 4.2em; gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.bv { font: 700 italic 19px/1 var(--font-cond); color: var(--cyan); }
.delta { font: 700 italic 15px/1 var(--font-cond); text-align: right; }
.delta.up { color: var(--green); }
.delta.down { color: var(--hot); }
.delta.same { color: var(--muted); }
.board-cmp { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.board-warn { margin: 8px 0 0; font-size: 14px; color: #ffb3ac; font-weight: 600; }
.board-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.st-val small { font: 700 italic 14px/1 var(--font-cond); color: var(--green); margin-left: 2px; }
.perks { list-style: none; margin: 14px 0 0; padding: 12px 0 0; display: grid; gap: 4px; box-shadow: inset 0 1px 0 var(--rule-2); }
.perks li { display: flex; justify-content: space-between; font-size: 15px; }
.perks strong { font: 700 italic 18px/1 var(--font-cond); color: var(--gold); }

/* garage */
.garage-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(transparent 62%, rgba(255, 255, 255, .03) 62%),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(255, 255, 255, .025) 80px 82px),
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(130, 160, 230, .2), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.weight { margin-left: auto; font: 700 italic 22px/1 var(--font-cond); color: var(--cyan); }
.car-stage { padding: 18px clamp(12px, 4vw, 48px) 0; }
.car-stage svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.part-slots { list-style: none; margin: 0; padding: 14px 20px 22px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }

/* shops */
.shop-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0, 0, 0, .45); }
.shop-tab {
  padding: 14px 20px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font: 900 italic 28px/1 var(--font-cond);
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: inset 0 -2px 0 var(--rule);
}
.shop-tab:hover { color: var(--text); }
.st-kicker { display: block; margin-bottom: 4px; font: 600 12px/1.2 var(--font-cond); letter-spacing: .14em; color: var(--muted); }
.shop-tab[aria-selected="true"] { color: #fff; box-shadow: inset 0 -4px 0 var(--hot-2); background: linear-gradient(0deg, rgba(255, 138, 31, .14), transparent); }
.shop-tab[aria-selected="true"] .st-kicker { color: var(--hot-2); }
.shelf { list-style: none; margin: 0; padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.offer { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px; background: rgba(5, 7, 11, .5); box-shadow: inset 0 0 0 1px var(--rule); }
.offer.selected { box-shadow: inset 0 0 0 2px var(--rc); }
.offer-info { display: grid; gap: 2px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
.o-kind { font: 600 12px/1.2 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--rc); }
.o-name { font: 700 italic 20px/1.05 var(--font-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.o-price { font: 900 italic 20px/1 var(--font-cond); color: var(--gold); }
.offer.too-dear .o-price { color: var(--muted); text-decoration: line-through; }
.offer.sold { display: grid; place-items: center; min-height: 96px; grid-template-columns: 1fr; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .02) 0 8px, transparent 8px 16px); }
.sold-tag { font: 900 italic 22px/1 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: #3d4760; transform: rotate(-6deg); }
.shop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 22px; }
.shop-foot p { margin: 0; }

/* toasts over the page, closable with × or Esc */
#toasts { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: grid; gap: 8px; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; background: var(--panel-2); box-shadow: inset 4px 0 0 var(--cyan), 0 14px 40px rgba(0, 0, 0, .5); font-weight: 600; }
.toast.bad { box-shadow: inset 4px 0 0 var(--hot), 0 14px 40px rgba(0, 0, 0, .5); }
.toast-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 4px; }

@media (max-width: 1120px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .part-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bag { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shelf { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .shop-tab { font-size: 21px; padding: 12px 12px 10px; }
}
@media (prefers-reduced-motion: reduce) { .r4.tile { animation: none; } }
/* a thin light rim, so dark paint stays visible on the dark floor */
.car-stage svg { filter: drop-shadow(0 0 1.5px rgba(200, 215, 255, .5)); }
.board-close { display: none; }
@media (max-width: 880px) {
  .board:not(.open) { display: none; }
  .board.open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    max-height: 62vh;
    overflow-y: auto;
    clip-path: none;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
    background: var(--panel);
    box-shadow: inset 0 3px 0 var(--hot-2), 0 -20px 50px rgba(0, 0, 0, .6);
  }
  .board-close { display: block; position: absolute; right: 10px; top: 6px; border: 0; background: none; color: var(--muted); font-size: 28px; line-height: 1; padding: 4px 8px; }
  .board .label { display: none; }
}

/* ========== 11. Race board, weekend, result (stage R3) ========== */

.race-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.small-head { font-size: clamp(32px, 4.4vw, 52px); margin: 4px 0 0; }
.tracktime { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 14px; min-width: 240px; }
.tt-label { grid-column: 1 / -1; font: 600 12px/1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tt-val { font: 900 italic 34px/1 var(--font-cond); color: var(--cyan); }
.tt-val small { font-size: .5em; margin-left: 3px; color: var(--text-soft); }
.tt-bar { grid-column: 1 / -1; order: 3; height: 6px; background: #05070b; box-shadow: inset 0 0 0 1px var(--rule-2); }
.tt-bar span { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 8px rgba(47, 216, 255, .6); }

.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.race-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: inset 0 3px 0 var(--rule-2);
}
.race-offer.picked { box-shadow: inset 0 3px 0 var(--hot-2), inset 0 0 0 2px var(--hot-2); background: linear-gradient(180deg, #24202a, var(--panel)); }
.race-offer.eifel { box-shadow: inset 0 3px 0 var(--green); background: radial-gradient(ellipse 80% 40% at 50% 0, rgba(47, 226, 138, .14), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.race-offer.eifel.picked { box-shadow: inset 0 3px 0 var(--green), inset 0 0 0 2px var(--green); }
.race-offer.no-time { opacity: .55; }
.ro-main { display: grid; gap: 10px; padding: 18px 18px 14px; border: 0; background: none; text-align: left; width: 100%; }
.ro-main:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.eifel-tag { justify-self: start; padding: 3px 10px 2px; background: var(--green); color: #052014; font: 900 italic 13px/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.ro-head { display: flex; align-items: center; gap: 10px; }
.ro-head .np-flag { width: 27px; height: 18px; }
.ro-name { font: 900 italic 24px/1 var(--font-cond); text-transform: uppercase; }
.strip { display: flex; height: 6px; gap: 2px; }
.strip span { height: 100%; }
.ro-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.ro-row { display: flex; align-items: center; justify-content: space-between; }
.ro-time { font-size: 14px; color: var(--text-soft); }
.ro-time strong { font: 900 italic 30px/1 var(--font-cond); color: var(--text); }
.helmets { display: inline-flex; gap: 3px; }
.helmet { width: 20px; height: 20px; fill: #2a3347; }
.helmet.on { fill: var(--hot-2); }
.ro-rewards { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; box-shadow: inset 0 1px 0 var(--rule); }
.ro-money { font: 900 italic 24px/1 var(--font-cond); color: var(--gold); }
.ro-xp { font: 700 italic 18px/1 var(--font-cond); color: var(--green); }
.ro-reward { display: grid; grid-template-columns: 1fr 56px; align-items: center; gap: 10px; margin: 0 18px 16px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--rule); }
.ro-reward .label { margin: 0; color: var(--gold); }

.booking { display: grid; gap: 14px; box-shadow: inset 0 3px 0 var(--hot-2); }
.booking .label { margin: 0; }
.bk-track { margin: -8px 0 0; font: 900 italic 26px/1 var(--font-cond); text-transform: uppercase; }
.bk-label { display: block; margin-bottom: 6px; font: 700 italic 16px/1 var(--font-cond); text-transform: uppercase; color: var(--text-soft); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.bk-hint.warn { color: #ffb3ac; }
.booking .btn { justify-self: start; }

/* the weekend */
.weekend { background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.wk-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 14px 30px; background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent); box-shadow: inset 0 -1px 0 var(--rule-2); }
.wk-track { margin: 0; font: 900 italic clamp(26px, 3vw, 38px)/1 var(--font-cond); text-transform: uppercase; }
.wk-clock { margin-left: auto; padding: 6px 14px 5px; background: #05070b; font: 900 italic 30px/1 var(--font-cond); color: var(--gold); font-variant-numeric: tabular-nums; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.wk-phases { list-style: none; margin: 0; padding: 18px 22px 6px; display: grid; grid-template-columns: 15fr 35fr 15fr 35fr; gap: 6px; }
.wk-phases li { display: grid; gap: 6px; }
.wk-name { font: 700 italic 15px/1 var(--font-cond); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-phases li.now .wk-name { color: #fff; }
.wk-phases li.done .wk-name { color: var(--text-soft); }
.wk-bar { height: 8px; background: #05070b; box-shadow: inset 0 0 0 1px var(--rule-2); }
.wk-bar span { display: block; height: 100%; width: 0; background: var(--speed); transition: width 1s linear; }
.wk-phases li.done .wk-bar span { background: var(--green); }
.radio { list-style: none; margin: 0; padding: 12px 22px; display: grid; gap: 6px; max-height: 460px; overflow-y: auto; }
.radio li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; align-items: baseline; padding: 8px 12px; background: rgba(5, 7, 11, .45); box-shadow: inset 3px 0 0 var(--rule-2); }
.radio li.new { animation: radio-in .35s ease-out; }
@keyframes radio-in { from { opacity: 0; transform: translateX(-8px); } }
.r-ph { font: 600 11px/1.3 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.r-text { font-size: 16px; }
.radio li.good { box-shadow: inset 3px 0 0 var(--green); }
.radio li.bad { box-shadow: inset 3px 0 0 var(--hot); }
.radio li.fin { box-shadow: inset 3px 0 0 var(--gold); background: rgba(255, 197, 49, .08); }
.radio li.fin .r-text { font: 900 italic 22px/1.1 var(--font-cond); text-transform: uppercase; color: var(--gold); }
.radio li.waiting { grid-template-columns: 1fr; color: var(--muted); }
.wk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 22px 22px; }
.btn.big { padding: 16px 40px 15px; font-size: 24px; }
.confirm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: #ffb3ac; }

/* the result */
.result { margin-top: 26px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.result.fresh { animation: result-in .6s ease-out; }
@keyframes result-in { from { opacity: 0; transform: translateY(12px); } }
.res-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent); }
.res-pos { font: 900 italic 76px/.9 var(--font-cond); color: var(--text-soft); }
.result.p1 .res-pos { color: var(--gold); text-shadow: 0 0 24px rgba(255, 197, 49, .4); }
.result.p2 .res-pos { color: #d7dde8; }
.result.p3 .res-pos { color: #e09a5c; }
.result.podium { box-shadow: inset 0 4px 0 var(--gold); }
.res-what .label { margin: 0 0 4px; }
.res-track { display: block; font: 900 italic 28px/1 var(--font-cond); text-transform: uppercase; }
.res-what .helmets { vertical-align: -4px; }
.res-gain { display: grid; justify-items: end; gap: 6px; }
.res-up { padding: 4px 12px 3px; background: var(--gold); color: #1b1405; font: 900 italic 16px/1 var(--font-cond); text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.res-items { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 4px 24px 16px; }
.res-items .label { margin: 0; color: var(--gold); width: 100%; }
.res-item { display: grid; grid-template-columns: 56px auto; gap: 10px; align-items: center; }
.res-item .o-kind { display: block; color: var(--rc); }

.timing-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.timing-table th { padding: 8px 12px; text-align: left; font: 600 12px/1 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 -1px 0 var(--rule-2); }
.timing-table td { padding: 7px 12px; border-bottom: 1px solid var(--rule); }
.timing-table .num { text-align: right; font: 700 italic 17px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.timing-table .tpos { width: 3em; font: 900 italic 20px/1 var(--font-cond); color: var(--text-soft); }
.timing-table tr:nth-child(-n+3) .tpos { color: var(--gold); }
.timing-table tr.me { background: linear-gradient(90deg, rgba(255, 138, 31, .22), transparent 70%); }
.timing-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--hot-2); }
.timing-table .best.purple { color: var(--purple); }
.drv { display: flex; align-items: center; gap: 10px; }
.drv .np-flag { width: 24px; height: 16px; }
.num-tag { min-width: 2em; padding: 1px 5px; background: #fff; color: #0b0f17; font: 900 italic 13px/1.2 var(--font-cond); text-align: center; }
.drv-name { font: 700 italic 17px/1.1 var(--font-cond); text-transform: uppercase; }
.timing-table tr.me .drv-name { color: #fff; }

@media (max-width: 1120px) { .offers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .wk-phases { grid-template-columns: 1fr 1fr; }
  .radio li { grid-template-columns: 1fr; gap: 2px; }
  .res-head { grid-template-columns: auto 1fr; }
  .res-gain { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .res-pos { font-size: 56px; }
  .timing-table .best { display: none; }
  .timing-table td, .timing-table th { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .radio li.new, .result.fresh { animation: none; } .wk-bar span { transition: none; } }

/* ========== 12. Race animation (stage R4) ========== */

.ro-main { grid-template-columns: minmax(0, 1fr); }
.ro-name { overflow-wrap: anywhere; min-width: 0; }
.ro-geo { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; }
.ro-map { width: 82px; height: 64px; color: var(--text-soft); }
.ro-map svg { width: 100%; height: 100%; }
.ro-geo .ro-facts { flex-direction: column; gap: 2px; }
.res-foot { padding: 12px 24px 20px; }

.replay {
  width: min(1240px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  background: #070a10;
  color: var(--text);
  box-shadow: inset 0 3px 0 var(--hot-2), 0 30px 90px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.replay::backdrop { background: rgba(3, 5, 9, .82); backdrop-filter: blur(3px); }
.rp-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), transparent); }
.rp-title { margin: 0; font: 900 italic 26px/1 var(--font-cond); text-transform: uppercase; }
.rp-live { padding: 3px 10px 2px; background: var(--hot); color: #fff; font: 900 italic 14px/1 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; animation: live 1.2s ease-in-out infinite; }
@keyframes live { 50% { opacity: .5; } }
.rp-lap { margin-left: auto; padding: 5px 12px 4px; background: #05070b; font: 900 italic 20px/1 var(--font-cond); color: var(--gold); text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.rp-x { border: 0; background: none; color: var(--muted); font-size: 30px; line-height: 1; padding: 0 4px; }
.rp-x:hover { color: #fff; }
.rp-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
.rp-tower { list-style: none; margin: 0; padding: 6px 0; background: rgba(0, 0, 0, .55); box-shadow: inset 0 3px 0 var(--hot); max-height: 70vh; overflow-y: auto; }
.rp-tower li { display: grid; grid-template-columns: 24px 4px 1fr auto; gap: 8px; align-items: center; padding: 3px 10px; font: 700 italic 15px/1.25 var(--font-cond); text-transform: uppercase; }
.rp-tower li.me { background: linear-gradient(90deg, rgba(255, 138, 31, .3), transparent); color: #fff; }
.rp-tower li.out { opacity: .4; }
.tw-pos { text-align: right; color: var(--text-soft); }
.tw-bar { height: 14px; }
.tw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-gap { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-stage { position: relative; min-height: 300px; height: min(70vh, 640px); }
.rp-stage canvas { display: block; }
.rp-lights { position: absolute; left: 50%; top: 18px; display: flex; gap: 10px; padding: 10px 16px; background: #05070b; transform: translateX(-50%); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.rp-lights span { width: 28px; height: 28px; border-radius: 50%; background: #2a0d0e; }
.rp-lights span.on { background: #ff2a1a; box-shadow: 0 0 18px #ff2a1a; }
.rp-final { position: absolute; inset: auto 16px 16px auto; min-width: 260px; padding: 14px 18px; background: rgba(5, 7, 11, .92); box-shadow: inset 0 3px 0 var(--gold); animation: result-in .5s ease-out; }
.rf-flag { margin: 0 0 8px; font: 900 italic 26px/1 var(--font-cond); text-transform: uppercase; color: var(--gold); }
.rp-final ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rp-final li { display: grid; grid-template-columns: 22px 24px 1fr; gap: 8px; align-items: center; font: 700 italic 17px/1.2 var(--font-cond); text-transform: uppercase; }
.rp-final li .np-flag { width: 24px; height: 16px; }
.rp-final li.me { color: var(--hot-2); }
.rf-me { margin: 10px 0 0; font: 900 italic 22px/1 var(--font-cond); text-transform: uppercase; }
.rp-ticker { min-height: 76px; padding: 8px 16px; background: rgba(0, 0, 0, .4); }
.rp-ticker p { margin: 2px 0; font-size: 15px; color: var(--muted); }
.rp-ticker p:first-child { color: var(--text); }
.rp-ticker p.mine { color: var(--hot-2); }
.rp-ticker p.purple { color: var(--purple); }
.rp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 14px; }
.rp-speeds { display: flex; gap: 4px; }
.rp-sound { margin-left: auto; border: 0; padding: 6px 12px; background: var(--panel-2); color: var(--muted); font: 700 italic 15px/1 var(--font-cond); text-transform: uppercase; }
.rp-sound[aria-pressed="true"] { color: var(--cyan); }
.rp-sound[aria-pressed="true"]::before { content: "♪ "; }
@media (max-width: 760px) {
  .replay { width: 100%; max-height: 100vh; height: 100vh; }
  .rp-body { grid-template-columns: minmax(0, 1fr); }
  .rp-tower { order: 2; max-height: 22vh; display: grid; grid-template-columns: 1fr 1fr; }
  .rp-stage { height: 46vh; }
  .rp-final { inset: auto 8px 8px 8px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .rp-live { animation: none; } }
.ro-chance { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font: 700 italic 16px/1 var(--font-cond); text-transform: uppercase; }
.rc-bar { height: 6px; background: #05070b; box-shadow: inset 0 0 0 1px var(--rule-2); }
.rc-bar span { display: block; height: 100%; }
.ro-chance.good { color: var(--green); } .ro-chance.good .rc-bar span { background: var(--green); }
.ro-chance.mid { color: var(--gold); } .ro-chance.mid .rc-bar span { background: var(--gold); }
.ro-chance.low { color: var(--hot); } .ro-chance.low .rc-bar span { background: var(--hot); }

/* ========== 13. Championships, dealer, paint (stage R5) ========== */

.ladder { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rung button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 86px;
  padding: 10px 10px 9px;
  border: 0;
  text-align: left;
  background: rgba(5, 7, 11, .6);
  color: #4e5870;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: inset 0 3px 0 #253049;
}
.rung.open button { color: var(--text-soft); background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 3px 0 var(--cyan); }
.rung.champion button { box-shadow: inset 0 3px 0 var(--gold); }
.rung.on button { background: linear-gradient(180deg, #2a2230, var(--panel)); box-shadow: inset 0 3px 0 var(--hot-2), inset 0 0 0 2px var(--hot-2); color: #fff; }
.rg-lvl { font: 600 11px/1.1 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; }
.rg-name { font: 900 italic 16px/1 var(--font-cond); text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.rg-state { font-size: 12px; }
.rung.champion .rg-state { color: var(--gold); }

.series { background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); padding-bottom: 18px; }
.sr-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 22px 14px 30px; background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent); box-shadow: inset 0 -1px 0 var(--rule-2); }
.sr-class { font: 700 italic 18px/1 var(--font-cond); text-transform: uppercase; color: var(--cyan); }
.sr-locked, .sr-champ { margin: 14px 22px 0; padding: 10px 14px; background: rgba(5, 7, 11, .5); box-shadow: inset 3px 0 0 var(--hot); font-size: 15px; }
.sr-champ { box-shadow: inset 3px 0 0 var(--gold); color: var(--gold); font: 900 italic 22px/1.2 var(--font-cond); text-transform: uppercase; }
.rounds { list-style: none; margin: 16px 22px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.round { position: relative; display: grid; gap: 6px; padding: 12px; background: rgba(5, 7, 11, .5); box-shadow: inset 0 3px 0 var(--rule-2); color: var(--muted); }
.round.passed { box-shadow: inset 0 3px 0 var(--green); color: var(--text-soft); }
.round.next { box-shadow: inset 0 3px 0 var(--hot-2), inset 0 0 0 2px var(--hot-2); color: #fff; background: linear-gradient(180deg, #2a2230, rgba(5, 7, 11, .5)); }
.round.licence { box-shadow: inset 0 3px 0 var(--gold); }
.round.licence.next { box-shadow: inset 0 3px 0 var(--gold), inset 0 0 0 2px var(--gold); }
.round.later { opacity: .55; }
.rd-num { font: 900 italic 28px/1 var(--font-cond); }
.round.licence .rd-num { color: var(--gold); }
.rd-map { position: absolute; right: 10px; top: 10px; width: 54px; height: 40px; }
.rd-map svg { width: 100%; height: 100%; }
.rd-track { display: flex; align-items: center; gap: 6px; font: 700 italic 15px/1.1 var(--font-cond); text-transform: uppercase; }
.rd-track .np-flag { width: 21px; height: 14px; }
.rd-best { font: 900 italic 18px/1 var(--font-cond); color: var(--green); min-height: 18px; }

.rival-card { box-shadow: inset 0 3px 0 var(--purple); }
.rival-card .label { color: var(--purple); }
.rv-figure { width: 160px; margin: 0 auto; }
.rv-figure svg { width: 100%; height: auto; display: block; }
.rv-name { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font: 900 italic 22px/1 var(--font-cond); text-transform: uppercase; }
.rv-quote { margin: 0; font-style: italic; color: var(--text-soft); font-size: 15px; }

.wk-champ { display: block; font: 700 italic 14px/1.2 var(--font-cond); letter-spacing: .1em; color: var(--gold); }
.res-champ { padding: 4px 12px 3px; font: 900 italic 16px/1 var(--font-cond); text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.res-champ.ok { background: var(--green); color: #052014; }
.res-champ.no { background: var(--hot); color: #fff; }

.cars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.car-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: rgba(5, 7, 11, .45); }
.car-row.in-use { box-shadow: inset 3px 0 0 var(--hot-2); }
.car-row.locked { opacity: .45; }
.cr-pic svg { width: 84px; height: auto; display: block; }
.cr-info { display: grid; font: 700 italic 16px/1.15 var(--font-cond); text-transform: uppercase; }
.cr-info .small { font: 400 12px/1.2 var(--font); text-transform: none; }
.cr-act .tag { font: 700 italic 13px/1 var(--font-cond); text-transform: uppercase; color: var(--hot-2); }
.paint { margin-top: 6px; }
.paint .cr-row { grid-template-columns: 8em minmax(0, 1fr); }

@media (max-width: 880px) {
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== 14. Training, workshop, sponsors, achievements (stage R6) ========== */

.train-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.train-row { padding: 16px 20px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 3px 0 0 var(--cyan); }
.tr-head { display: flex; align-items: baseline; justify-content: space-between; }
.tr-head .st-name { font-size: 26px; }
.tr-val { font: 900 italic 34px/1 var(--font-cond); color: var(--cyan); }
.tr-val small { font-size: 18px; color: var(--green); margin-left: 4px; }
.tr-text { margin: 4px 0 12px; color: var(--text-soft); font-size: 15px; }
.tr-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.workshop { background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); padding-bottom: 18px; }
.wear-list { list-style: none; margin: 0; padding: 8px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wear-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; background: rgba(5, 7, 11, .45); }
.wr-info { display: grid; gap: 4px; font: 700 italic 16px/1.1 var(--font-cond); text-transform: uppercase; }
.wr-info .small { font: 400 12px/1.2 var(--font); text-transform: none; }
.wr-bar { height: 6px; background: #05070b; box-shadow: inset 0 0 0 1px var(--rule-2); }
.wr-bar span { display: block; height: 100%; background: var(--green); }
.wear-row.mid .wr-bar span { background: var(--gold); }
.wear-row.bad .wr-bar span { background: var(--hot); }
.ws-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 20px 0; }
.ws-foot p { margin: 0; }

.sponsor-card { box-shadow: inset 0 3px 0 var(--gold); }
.sponsor-card .label { color: var(--gold); }
.sp-head { display: flex; align-items: center; gap: 10px; font: 900 italic 20px/1 var(--font-cond); text-transform: uppercase; }
.sp-logo { display: grid; place-items: center; width: 36px; height: 36px; flex: none; font: 900 italic 16px/1 var(--font-cond); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.sp-deal p { margin: 8px 0 4px; }
.sp-offer { display: grid; gap: 4px; width: 100%; margin-top: 8px; padding: 10px; border: 0; text-align: left; background: rgba(5, 7, 11, .45); box-shadow: inset 0 0 0 1px var(--rule-2); }
@media (hover: hover) { .sp-offer:hover { box-shadow: inset 0 0 0 2px var(--gold); } }

.badges-wrap .section-title { margin-top: 30px; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.badge { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; background: rgba(5, 7, 11, .45); color: var(--muted); }
.badge.done { color: var(--text); box-shadow: inset 3px 0 0 var(--gold); }
.bd-icon { font-size: 20px; color: #3a4359; }
.badge.done .bd-icon { color: var(--gold); }
.bd-text { display: grid; }
.bd-text strong { font: 700 italic 16px/1.1 var(--font-cond); text-transform: uppercase; }
.bd-side { font: 700 italic 15px/1 var(--font-cond); }

.tasks { box-shadow: inset 0 3px 0 var(--green); }
.tasks .label { color: var(--green); }
.task-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.task-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 15px; }
.tk-check { display: grid; place-items: center; width: 20px; height: 20px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--green); font-weight: 700; }
.task-list li.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--green); }
.tk-pay { font: 700 italic 15px/1 var(--font-cond); color: var(--gold); }
.res-badge { padding: 3px 10px 2px; background: rgba(255, 197, 49, .15); color: var(--gold); font: 700 italic 15px/1 var(--font-cond); text-transform: uppercase; }

@media (max-width: 880px) { .wear-list, .badges { grid-template-columns: minmax(0, 1fr); } }

/* ========== 15. Duels, mail, ranking (stage R7) ========== */

.nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 5px; background: var(--hot); color: #fff; font: 900 italic 12px/1 var(--font-cond); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.area { position: relative; }
.area .nav-badge { position: absolute; right: 10px; }

.fame-box { display: grid; gap: 4px; min-width: 200px; }
.fame-next { font: 700 italic 15px/1 var(--font-cond); text-transform: uppercase; color: var(--gold); }
.opponents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opponent { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px 16px 6px 6px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.op-figure { width: 74px; height: 74px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(130, 160, 230, .2), transparent 70%); }
.op-figure svg { width: 100%; height: auto; display: block; margin-top: -4px; }
.op-info { display: grid; gap: 4px; min-width: 0; }
.op-name { display: flex; align-items: center; gap: 8px; font: 900 italic 22px/1 var(--font-cond); text-transform: uppercase; }
.op-name .np-flag { width: 24px; height: 16px; }
.op-info .ro-chance { max-width: 280px; }
.duel-result { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding: 18px 22px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); animation: result-in .5s ease-out; }
.duel-result.won { box-shadow: inset 0 4px 0 var(--gold); }
.duel-result.lost { box-shadow: inset 0 4px 0 var(--hot); }
.dr-big { font: 900 italic 48px/1 var(--font-cond); text-transform: uppercase; }
.duel-result.won .dr-big { color: var(--gold); }
.dr-text { font: 700 italic 20px/1 var(--font-cond); text-transform: uppercase; }
.dr-gain { display: grid; gap: 4px; margin-left: auto; font: 900 italic 20px/1 var(--font-cond); }
.up { color: var(--green); } .down { color: var(--hot); }

.mailbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mail { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(5, 7, 11, .5); box-shadow: inset 3px 0 0 var(--rule-2); }
.mail.unread { background: linear-gradient(90deg, rgba(255, 138, 31, .14), rgba(5, 7, 11, .5)); }
.mail.won { box-shadow: inset 3px 0 0 var(--green); }
.mail.lost { box-shadow: inset 3px 0 0 var(--hot); }
.mail.saison { box-shadow: inset 3px 0 0 var(--gold); }
.mail.empty { grid-template-columns: 1fr; color: var(--muted); }
.ml-when { font-size: 13px; color: var(--muted); }
.ml-gain { display: flex; gap: 8px; font: 700 italic 16px/1 var(--font-cond); white-space: nowrap; }
.ml-act { display: flex; gap: 6px; }
.rank-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; background: rgba(0, 0, 0, .4); }

@media (max-width: 760px) {
  .opponent { grid-template-columns: 60px minmax(0, 1fr); }
  .opponent .btn { grid-column: 1 / -1; }
  .mail { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ========== 16. Racing teams (stage R8) ========== */

.crest { display: inline-grid; place-items: center; min-width: 44px; height: 34px; padding: 0 6px; font: 900 italic 15px/1 var(--font-cond); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.crest.big { min-width: 76px; height: 64px; font-size: 24px; }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.tm-info { display: grid; gap: 2px; }
.tm-info strong { font: 900 italic 20px/1 var(--font-cond); text-transform: uppercase; }
.tm-preview { display: flex; align-items: center; gap: 10px; margin: 6px 0; font: 900 italic 20px/1 var(--font-cond); text-transform: uppercase; }
.booking .swatches { margin-bottom: 6px; }
.booking .swatch { width: 24px; height: 22px; }

.team-head { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent), linear-gradient(180deg, var(--panel-2), var(--panel)); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.team-head .kicker { margin-bottom: 2px; }
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.member { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 10px 4px 4px; background: rgba(5, 7, 11, .5); }
.member.me { box-shadow: inset 3px 0 0 var(--hot-2); }
.member .op-figure { width: 60px; height: 60px; }
.member .op-name { font-size: 18px; }
.role-pick { grid-column: 2; margin-top: 2px; padding: 4px 6px; border: 0; border-bottom: 1px solid var(--rule-2); background: rgba(0, 0, 0, .35); color: var(--text-soft); font: 600 13px var(--font); }
.buildings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.building { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.building .btn { grid-column: 1 / -1; justify-self: start; }
.bd-ico { font-size: 26px; }
.bd-info { display: grid; gap: 3px; }
.bd-info strong { font: 900 italic 18px/1 var(--font-cond); text-transform: uppercase; }
.bd-lvl { font: 900 italic 22px/1 var(--font-cond); color: var(--cyan); }
.donate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.donate label { font: 700 italic 16px/1 var(--font-cond); text-transform: uppercase; color: var(--text-soft); }
.donate input { width: 8em; padding: 8px 10px; border: 0; border-bottom: 2px solid var(--rule-2); background: rgba(0, 0, 0, .35); color: var(--text); font: 900 italic 18px var(--font-cond); }
.team-races { box-shadow: inset 0 3px 0 var(--hot-2); }
.tr-next { margin: 0; font-size: 15px; }
.tr-next strong { font: 900 italic 24px/1.3 var(--font-cond); color: var(--gold); }
.tr-row { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; margin-top: 6px; font: 700 italic 16px/1 var(--font-cond); text-transform: uppercase; }
.tr-res { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 10px; background: rgba(5, 7, 11, .45); font-size: 14px; }
.tr-res.won { box-shadow: inset 3px 0 0 var(--green); }
.tr-res.lost { box-shadow: inset 3px 0 0 var(--hot); }
.team-radio { box-shadow: inset 0 3px 0 var(--cyan); }
.tr-form { display: flex; gap: 8px; margin-bottom: 10px; }
.tr-form input { flex: 1; min-width: 0; padding: 8px 10px; border: 0; border-bottom: 2px solid var(--rule-2); background: rgba(0, 0, 0, .35); color: var(--text); font: 400 15px var(--font); }
.tr-form input:focus { outline: none; border-bottom-color: var(--cyan); }
.tr-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.tr-posts li { position: relative; display: grid; gap: 2px; padding: 6px 28px 6px 10px; background: rgba(5, 7, 11, .45); }
.tr-posts li.sys { background: none; color: var(--muted); font-style: italic; }
.tp-meta { font-size: 12px; color: var(--muted); }
.tp-meta strong { color: var(--text-soft); font-style: normal; }
.tp-text { font-size: 15px; overflow-wrap: anywhere; }
.tr-posts .toast-x { position: absolute; right: 4px; top: 4px; font-size: 18px; }
@media (max-width: 880px) { .members, .buildings { grid-template-columns: minmax(0, 1fr); } }

/* ========== 17. Rulebook (stage R9) ========== */

.rules-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rules-tools input { flex: 1; max-width: 520px; padding: 11px 14px; border: 0; border-bottom: 2px solid var(--rule-2); background: rgba(0, 0, 0, .35); color: var(--text); font: 400 17px var(--font); }
.rules-tools input:focus { outline: none; border-bottom-color: var(--cyan); }
.rules-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rules-nav a { padding: 5px 12px 4px; background: var(--panel-2); font: 700 italic 15px/1 var(--font-cond); text-transform: uppercase; text-decoration: none; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.rules-nav a:hover { background: var(--rule-2); }
.rules-sec .section-title { margin-top: 32px; }
.rule { margin-bottom: 10px; padding: 14px 20px 6px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 3px 0 0 var(--cyan); }
.rule h3 { margin: 0 0 6px; font: 900 italic 22px/1.1 var(--font-cond); text-transform: uppercase; }
.rule p, .rule li { color: var(--text-soft); font-size: 16px; max-width: 46em; }
.rule ul { padding-left: 1.2em; }
.rules-page.narrow { max-width: 900px; }

/* the paddock menu on phones: one button, folding out into a grid of all areas */
.areas-toggle { display: none; }
@media (max-width: 600px) {
  .areas { padding: 0; box-shadow: inset 0 -3px 0 var(--hot); }
  .areas-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0;
    background: rgba(5, 7, 11, .7); color: #fff; font: 900 italic 20px/1 var(--font-cond); text-transform: uppercase; text-align: left;
  }
  .at-more { display: inline-flex; align-items: center; gap: 4px; font: 700 italic 14px/1 var(--font-cond); color: var(--hot-2); }
  .at-more::after { content: "▾"; margin-left: 4px; transition: transform .2s; }
  .areas.open .at-more::after { transform: rotate(180deg); }
  .areas ol { display: none; }
  .areas.open ol { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding: 6px 0 10px; }
  .areas.open .area { padding: 10px 12px; }
}
.rp-tower li.pit .tw-gap { color: var(--hot-2); font-weight: 900; }

/* ========== 18. Drag and drop ========== */

.tile { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.drag-ghost { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); opacity: .95; }
.drag-source { opacity: .3; }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.dragging [data-drop]:not(.drop-ok):not(.keeper) { opacity: .45; transition: opacity .15s; }
body.dragging .keeper:not(.drop-ok) .counter { opacity: .45; }
.drop-ok { box-shadow: inset 0 0 0 2px var(--cyan) !important; transition: box-shadow .15s; }
.drop-over { box-shadow: inset 0 0 0 3px var(--green), 0 0 18px rgba(47, 226, 138, .4) !important; }
.bag.drop-ok { outline: 2px dashed var(--cyan); outline-offset: 6px; box-shadow: none !important; }
.bag.drop-over { outline: 3px solid var(--green); outline-offset: 6px; box-shadow: none !important; }

/* ========== 19. The shops as rooms ========== */

.shop-room {
  position: relative;
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: end;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
}
.room-bg { position: absolute; inset: 0; z-index: -1; }
.room-bg svg { width: 100%; height: 100%; display: block; }
.keeper { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 0 12px; transition: box-shadow .15s; }
.keeper-fig { width: min(220px, 100%); margin: 0 auto -6px; }
.keeper-fig svg { width: 100%; height: auto; display: block; }
/* the counter in front of the shopkeeper: the place to drop what you sell */
.counter {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, #4a3221, #2c1d12);
  box-shadow: inset 0 4px 0 #8a6a3b, 0 -2px 12px rgba(0, 0, 0, .4);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.shop-room.teile .counter { background: linear-gradient(180deg, #4b5260, #2a2f38); box-shadow: inset 0 4px 0 #c4ccd8, 0 -2px 12px rgba(0, 0, 0, .4); }
.counter-name { font: 900 italic 22px/1 var(--font-cond); text-transform: uppercase; color: #fff; }
.counter-hint { font-size: 12px; color: rgba(255, 255, 255, .7); }
.keeper.drop-ok .counter { box-shadow: inset 0 4px 0 var(--cyan), 0 0 0 2px var(--cyan); }
.keeper.drop-over .counter { box-shadow: inset 0 4px 0 var(--green), 0 0 0 3px var(--green), 0 0 24px rgba(47, 226, 138, .5); }
.keeper.drop-ok, .keeper.drop-over { box-shadow: none !important; }
.bubble {
  position: absolute;
  left: 46%;
  top: 14px;
  z-index: 2;
  max-width: 230px;
  margin: 0;
  padding: 10px 14px;
  background: #fdfdfb;
  color: #16171b;
  font: 600 15px/1.3 var(--font);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -10px; border: 10px solid transparent; border-top-color: #fdfdfb; border-bottom: 0; }
.bubble:empty { display: none; }
.bubble.pop { animation: pop .25s ease-out; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

/* the offers on shelf boards */
.shop-room .shelf {
  align-self: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 18px;
  padding: 80px 26px 40px 10px;
}
.shop-room .offer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  padding: 0 0 6px;
  background: none;
  box-shadow: none;
}
/* the board it stands on */
.shop-room .offer::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 22px; height: 9px; z-index: -1; background: linear-gradient(180deg, #a07a4c, #5a3e22); box-shadow: 0 6px 10px rgba(0, 0, 0, .5); }
.shop-room.teile .offer::after { background: linear-gradient(180deg, #c4ccd8, #5b6475); }
.shop-room .offer .tile { width: 74px; margin-bottom: 8px; }
.shop-room .offer.selected .tile { box-shadow: inset 0 0 0 2px #fff, inset 0 -3px 0 var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent); }
.price-tag {
  padding: 2px 8px 1px;
  background: #fff3c4;
  color: #16171b;
  font: 900 italic 15px/1.2 var(--font-cond);
  transform: rotate(-3deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.offer.too-dear .price-tag { background: #f0d0cc; color: #8a1a12; text-decoration: line-through; }
.shop-room .offer.sold { min-height: 110px; background: none; }
.shop-room .sold-tag { align-self: center; padding: 4px 10px; background: rgba(0, 0, 0, .55); color: #9aa6bd; font-size: 16px; }

@media (max-width: 760px) {
  .shop-room { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .keeper { flex-direction: row; align-items: flex-end; justify-content: flex-start; padding: 12px 12px 0; }
  .keeper-fig { width: 120px; margin: 0; flex: none; }
  .counter { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; }
  .keeper { min-height: 190px; }
  .bubble { left: 136px; top: 16px; max-width: calc(100% - 150px); font-size: 14px; }
  .shop-room .shelf { padding: 26px 12px 20px; gap: 22px 10px; }
  .shop-room .offer .tile { width: 64px; }
}
/* calm the wall behind the shelves */
.room-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(5, 7, 11, .38) 45%, rgba(5, 7, 11, .38)); }
.room-bg { position: absolute; }