:root {
  --bg: #090b0f;
  --panel: #11151b;
  --panel-light: #181d24;
  --text: #f4f5f7;
  --muted: #858b94;
  --accent: #ff3b1f;
  --accent-light: #ff654e;
  --line: rgba(255,255,255,.1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: "Silkscreen", monospace, sans-serif;
  overflow-x: hidden;
  min-width: 280px;
  overscroll-behavior-x: none;
}

body.garage-open, body.track-open { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

.speed-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,.035) 91px 92px);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.dashboard {
  position: relative;
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: auto;
  padding: 0 max(5vw, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(5vw, env(safe-area-inset-left));
}

.topbar {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; color: white; text-decoration: none; font-family: "Silkscreen", monospace; font-size: 29px; font-weight: 800; font-style: italic; letter-spacing: -.04em; }
.brand-mark { padding: 5px 9px 6px 7px; background: var(--accent); transform: skew(-10deg); }
.brand-name { margin-left: 7px; }
.player-status { display: flex; align-items: center; gap: 14px; text-align: right; }
.player-copy { display: grid; gap: 3px; font-size: 12px; }
.status-label { color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.level-badge { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 700 18px "Silkscreen", monospace; clip-path: polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%); }

.hero { min-height: 435px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; position: relative; }
.hero-copy { position: relative; z-index: 2; padding: 45px 0 35px; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font: 700 12px "Silkscreen", monospace; letter-spacing: .24em; }
h1 { margin: 0; font: 800 clamp(64px, 8vw, 116px)/.74 "Silkscreen", monospace; letter-spacing: -.045em; font-style: italic; }
h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.48); }
.subtitle { max-width: 510px; margin: 28px 0; color: #a7abb2; font-size: 14px; line-height: 1.7; }
.quick-stats { display: flex; gap: clamp(20px, 3vw, 42px); margin-inline: auto; }
.quick-stats div { display: grid; gap: 6px; }
.quick-stats div > span { color: #b8c0ca; font-size: 10px; letter-spacing: .1em; }
.quick-stats strong > span { color: #f5f7fa; font: inherit; letter-spacing: 0; }
.quick-stats strong { font: 700 22px "Silkscreen", monospace; }
.quick-stats small { color: var(--accent); font-size: 10px; }

.car-stage { position: absolute; top: 0; right: -5vw; width: 64%; height: 100%; overflow: hidden; }
.sun { position: absolute; width: 330px; height: 330px; right: 14%; top: 30px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 90px rgba(255,59,31,.3); opacity: .9; }
.sun::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 15px, var(--bg) 16px 21px); opacity: .55; }
.dashboard-bike { position: absolute; z-index: 2; right: -2%; bottom: 20px; width: min(100%,700px); aspect-ratio: var(--dashboard-bike-aspect,1.7); opacity: 1; filter: drop-shadow(-15px 20px 20px rgba(0,0,0,.55)); }
.dashboard-bike-part { position: absolute; height: auto; max-width: none; transform-origin: center; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.road-shadow { position: absolute; right: 0; bottom: 50px; width: 620px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.8); filter: blur(12px); }

.menu-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); }
.menu-card { min-height: 180px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px; padding: 22px; color: var(--text); background: rgba(17,21,27,.9); border: 0; border-right: 1px solid var(--line); text-align: left; cursor: pointer; overflow: hidden; transition: background .25s, transform .25s; }
.menu-card:last-child { border-right: 0; }
.menu-card::before { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.menu-card:hover, .menu-card:focus-visible { z-index: 2; outline: none; background: var(--panel-light); transform: translateY(-7px); }
.menu-card:hover::before, .menu-card:focus-visible::before { transform: scaleX(1); }
.card-number { position: absolute; top: 16px; right: 17px; color: #51565e; font: 700 11px "Silkscreen", monospace; }
.icon { position: absolute; left: 21px; top: 25px; color: #d2d4d7; font-size: 27px; }
.card-label { font: 700 25px "Silkscreen", monospace; text-transform: uppercase; letter-spacing: .02em; }
.card-note { color: rgba(255,255,255,.7); font-size: 8px; letter-spacing: .17em; }
.arrow { position: absolute; right: 19px; bottom: 20px; color: #6c7179; font-size: 18px; transition: transform .2s, color .2s; }
.menu-card:hover .arrow { color: var(--accent); transform: translate(3px,-3px); }
.menu-card.featured { background: #1a2027; }
.menu-card.race { background: var(--accent); }
.menu-card.race::before { background: white; }
.menu-card.race .card-number, .menu-card.race .arrow { color: rgba(255,255,255,.6); }
.menu-card.race:hover { background: var(--accent-light); }
.menu-card.race:hover .arrow { color: white; }
.menu-card:active { transform: scale(.97); }

footer { display: flex; justify-content: space-between; padding-top: 20px; color: #5f646c; font-size: 9px; letter-spacing: .13em; }
.system-status { color: #7d8289; }
.system-status i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #38d27a; box-shadow: 0 0 8px #38d27a; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 10; padding: 13px 22px; background: #f3f3f3; color: #111; font: 700 13px "Silkscreen", monospace; transform: translate(-50%, 100px); opacity: 0; transition: .3s ease; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.toast.show { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 980px) {
  .dashboard { padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right)); }
  .hero { grid-template-columns: 1fr; min-height: 460px; }
  .hero-copy { padding-top: 40px; }
  .car-stage { right: 0; width: 85%; pointer-events: none; }
  .car-stage .sun { opacity: .38; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-card { min-height: 168px; border-bottom: 1px solid var(--line); }
  .menu-card:nth-child(3n) { border-right: 0; }
  .menu-card:nth-child(n+4) { border-bottom: 0; }
}

@media (max-width: 600px) {
  html, body { height: 100%; overflow: hidden; }
  .dashboard {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh;
    min-height: 0;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .topbar { height: max(68px, calc(58px + env(safe-area-inset-top))); padding-top: env(safe-area-inset-top); gap: 8px; }
  .brand { flex: 0 0 auto; font-size: 22px; }
  .brand-mark { padding: 4px 7px 5px 5px; }
  .brand-name { margin-left: 5px; }
  .quick-stats { flex: 1 1 auto; justify-content: center; gap: clamp(7px, 2.4vw, 14px); min-width: 0; margin-inline: 0; }
  .quick-stats div { gap: 3px; min-width: 0; }
  .quick-stats div > span { font-size: 8px; letter-spacing: .04em; white-space: nowrap; }
  .quick-stats strong { font-size: 15px; white-space: nowrap; }
  .quick-stats small { font-size: 7px; }
  .level-badge { flex: 0 0 34px; width: 34px; height: 34px; font-size: 16px; }
  .hero { min-height: 0; height: auto; overflow: hidden; }
  .hero-copy { align-self: start; padding: clamp(18px, 3.8vh, 35px) 0 12px; }
  .eyebrow { margin-bottom: 12px; font-size: 10px; }
  h1 { font-size: clamp(48px, 18vw, 72px); line-height: .76; }
  .subtitle { max-width: 92%; margin: clamp(12px, 2.5vh, 22px) 0 0; font-size: 12px; line-height: 1.45; }
  .car-stage { width: 142%; top: 105px; right: -68%; transform: scale(.68); transform-origin: center; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(80px, 14.2dvh, 118px); }
  .menu-card { min-height: 0; height: 100%; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .menu-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .menu-card:nth-child(even) { border-right: 0; }
  .menu-card:nth-child(n+4) { border-bottom: 1px solid var(--line); }
  .menu-card:nth-last-child(-n+2) { border-bottom: 0; }
  .menu-card:hover { transform: none; }
  .menu-card:active { transform: scale(.97); filter: brightness(1.16); }
  .card-label { max-width: calc(100% - 25px); font-size: clamp(18px, 5.2vw, 21px); }
  .card-note { font-size: 7px; }
  .icon { top: 20px; left: 17px; font-size: 24px; }
  .card-number { top: 13px; right: 13px; }
  .arrow { right: 14px; bottom: 16px; }
  .player-copy { display: none; }
  footer { display: none; }
  .toast { bottom: max(20px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); text-align: center; }
}

@media (max-width: 360px) {
  .dashboard { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .hero-copy { padding-top: 20px; }
  h1 { font-size: 50px; }
  .subtitle { margin-top: 12px; font-size: 11px; }
  .menu-card { padding: 12px; }
  .icon { top: 16px; left: 14px; font-size: 21px; }
  .card-label { font-size: 19px; }
  .card-note { letter-spacing: .1em; }
  footer { font-size: 7px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  html, body { height: 100%; overflow: hidden; }
  .dashboard {
    display: grid;
    grid-template-rows: max(54px, calc(48px + env(safe-area-inset-top))) minmax(0, 1fr) 134px;
    height: 100dvh;
    min-height: 0;
    padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .topbar { height: auto; padding-top: env(safe-area-inset-top); gap: 14px; }
  .brand { flex: 0 0 auto; font-size: 22px; }
  .brand-mark { padding: 4px 7px 5px 5px; }
  .quick-stats { flex: 1 1 auto; justify-content: center; gap: clamp(18px, 4vw, 42px); margin-inline: 0; }
  .quick-stats div { gap: 2px; }
  .quick-stats div > span { font-size: 8px; }
  .quick-stats strong { font-size: 15px; }
  .quick-stats small { font-size: 7px; }
  .player-copy { display: grid; }
  .level-badge { width: 34px; height: 34px; font-size: 16px; }
  .hero { min-height: 0; height: auto; overflow: hidden; }
  .hero-copy { padding: 12px 0 8px; }
  .eyebrow { margin-bottom: 6px; font-size: 7px; }
  h1 { font-size: 44px; }
  .subtitle { max-width: 420px; margin: 8px 0 0; font-size: 9px; line-height: 1.3; }
  .car-stage { top: -18%; right: -4%; width: 64%; height: 140%; transform: scale(.62); transform-origin: right center; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 134px; }
  .menu-card { min-height: 0; height: auto; padding: 8px 12px; }
  .menu-card:nth-child(3n) { border-right: 0; }
  .menu-card:nth-child(even):not(:nth-child(3n)) { border-right: 1px solid var(--line); }
  .menu-card:nth-child(n+4) { border-bottom: 0; }
  .icon { top: 7px; left: 12px; font-size: 17px; }
  .card-number { top: 6px; right: 10px; font-size: 8px; }
  .card-label { font-size: 17px; }
  .card-note { display: none; }
  .arrow { right: 10px; bottom: 8px; font-size: 14px; }
  footer { display: none; }
}

@media (max-height: 650px) and (orientation: portrait) {
  .eyebrow { margin-bottom: 7px; }
  .hero-copy { padding-top: 12px; }
  h1 { font-size: clamp(42px, 15vw, 54px); }
  .subtitle { margin-top: 8px; font-size: 10px; line-height: 1.3; }
  .car-stage { opacity: 1; }
  .car-stage .sun { opacity: .22; }
}

@media (hover: none) and (pointer: coarse) {
  .menu-card:hover { background: rgba(17,21,27,.9); transform: none; }
  .menu-card.featured:hover { background: #1a2027; }
  .menu-card.race:hover { background: var(--accent); }
  .menu-card:focus-visible { outline: 2px solid white; outline-offset: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Garage mode selection */
.garage-entry-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  height: 100dvh;
  color: var(--text);
  background: radial-gradient(circle at 72% 42%, rgba(255,59,31,.13), transparent 34%), #080a0d;
  overflow: hidden;
}
.garage-entry-screen[hidden] { display: none; }
.garage-entry-topbar { height: 74px; display: flex; align-items: center; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(12,15,19,.94); }
.garage-entry-topbar > span { margin-left: auto; color: var(--muted); font: 700 8px "Silkscreen", monospace; letter-spacing: .2em; }
.garage-entry-content { min-height: calc(100dvh - 74px); display: grid; place-content: center; gap: clamp(25px, 5vh, 54px); width: min(980px, calc(100% - 40px)); margin: auto; }
.garage-entry-copy { max-width: 650px; }
.garage-entry-copy > span, .garage-entry-card > span { color: var(--accent); font: 700 9px "Silkscreen", monospace; letter-spacing: .2em; }
.garage-entry-copy h2 { margin: 8px 0 10px; font: 800 clamp(40px, 7vw, 76px)/.9 "Silkscreen", monospace; letter-spacing: -.025em; }
.garage-entry-copy p { max-width: 570px; margin: 0; color: #979da6; font-size: clamp(11px, 1.5vw, 14px); line-height: 1.55; }
.garage-entry-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.race-length-options { grid-template-columns: repeat(3, 1fr); }
.garage-entry-card { position: relative; min-height: clamp(170px, 27vh, 250px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); color: white; background: #12161c; text-align: left; cursor: pointer; overflow: hidden; }
.garage-entry-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(.18); transform-origin: left; transition: transform .25s ease; }
.garage-entry-card:hover::before, .garage-entry-card:focus-visible::before { transform: scaleX(1); }
.garage-entry-card:hover, .garage-entry-card:focus-visible { border-color: rgba(255,91,68,.55); outline: none; background: #181d24; }
.garage-entry-card strong { margin: 7px 0; font: 800 clamp(31px, 5vw, 55px)/.9 "Silkscreen", monospace; letter-spacing: .02em; }
.garage-entry-card small { max-width: 320px; color: #969ca5; font-size: 10px; line-height: 1.45; }
.garage-entry-card b { position: absolute; right: clamp(18px, 3vw, 32px); bottom: clamp(18px, 3vw, 30px); color: #c9cdd2; font: 700 8px "Silkscreen", monospace; letter-spacing: .14em; }
.garage-entry-card.customize { background: linear-gradient(135deg, rgba(255,59,31,.16), transparent 55%), #15191f; }
.garage-entry-card.edit > span { color: #8e959f; }

/* Garage sprite assembly editor */
.garage-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  height: 100dvh;
  color: var(--text);
  background: #080a0d;
  overflow: hidden;
}
.garage-screen[hidden] { display: none; }
.garage-screen button, .garage-screen select, .garage-screen input { font: inherit; }
.garage-topbar {
  height: 74px;
  display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: #0c0f13;
}
.garage-back { width: 40px; height: 40px; border: 1px solid var(--line); color: white; background: transparent; cursor: pointer; }
.garage-back:hover { border-color: var(--accent); color: var(--accent); }
.garage-heading { display: grid; min-width: 150px; }
.garage-heading span, .model-picker > span, .panel-title span, .selected-part-card span { color: var(--muted); font-size: 7px; letter-spacing: .18em; }
.garage-heading strong { font: 800 24px "Silkscreen", monospace; letter-spacing: .05em; }
.model-picker { justify-self: center; display: flex; align-items: center; gap: 12px; }
.model-picker select { min-width: 190px; height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 0; color: white; background: #15191f; text-transform: uppercase; font: 700 14px "Silkscreen", monospace; outline: none; }
.model-picker select:focus { border-color: var(--accent); }
.garage-actions { display: flex; gap: 8px; }
.tool-button { min-height: 38px; padding: 0 15px; border: 1px solid var(--line); color: white; background: transparent; font: 700 11px "Silkscreen", monospace !important; letter-spacing: .08em; cursor: pointer; }
.tool-button.primary { border-color: var(--accent); background: var(--accent); }
.tool-button:hover { filter: brightness(1.15); }

#garage-screen.customize-mode .garage-workspace { grid-template-columns: minmax(0,1fr); }
#garage-screen.customize-mode .parts-panel,
#garage-screen.customize-mode .inspector-panel,
#garage-screen.customize-mode .garage-mode-controls,
#garage-screen.customize-mode #reset-layout { display: none; }
#garage-screen.customize-mode .sprite-layer { cursor: default; pointer-events: none; }
#garage-screen.customize-mode .sprite-layer.selected { outline: 0; filter: drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
#garage-screen.customize-mode .stage-status { justify-content: flex-end; }
#garage-screen.customize-mode #selected-status { display: none; }
#garage-screen.customize-mode .assembly-panel { grid-template-rows: 38px minmax(0,1fr); }
#garage-screen.customize-mode .stage-status { display: none; }
#garage-screen.edit-mode .customize-mode-controls { display: none; }

.customize-mode-controls { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.customize-mode-controls button { height: 26px; padding: 0 11px; border: 1px solid var(--line); color: #aeb4bc; background: #10141a; font: 700 8px "Silkscreen", monospace; letter-spacing: .1em; cursor: pointer; }
.customize-mode-controls button.active { border-color: var(--accent); color: white; background: var(--accent); }

.garage-workspace { height: calc(100dvh - 74px); display: grid; grid-template-columns: 210px minmax(0, 1fr) 260px; min-height: 0; }
.parts-panel, .inspector-panel { min-height: 0; background: #0d1014; }
.parts-panel { display: grid; grid-template-rows: auto minmax(0,1fr); border-right: 1px solid var(--line); }
.inspector-panel { border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
.panel-title { min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-title div { display: grid; gap: 4px; }
.panel-title strong { font: 700 19px "Silkscreen", monospace; letter-spacing: .06em; }
.part-count { color: var(--accent) !important; font: 700 12px "Silkscreen", monospace !important; }
.parts-list { padding: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #363c45 transparent; }
.parts-group-title { position: sticky; z-index: 2; top: -1px; margin: 3px 0 6px; padding: 7px 6px 6px; border-bottom: 1px solid #2c333c; color: #8f98a5; background: #0d1014; font: 700 7px "Silkscreen", monospace; letter-spacing: .16em; }
#garage-screen.edit-mode .parts-list { padding: 7px 8px 10px; }
#garage-screen.edit-mode .part-item { min-height: 52px; grid-template-columns: 44px minmax(0,1fr) 12px; gap: 7px; margin-bottom: 5px; padding: 4px; }
#garage-screen.edit-mode .part-thumb { width: 44px; height: 42px; }
.part-item { width: 100%; min-height: 62px; display: grid; grid-template-columns: 54px minmax(0,1fr) 16px; align-items: center; gap: 9px; margin-bottom: 6px; padding: 6px; border: 1px solid transparent; color: white; background: #12161b; text-align: left; cursor: pointer; }
.part-item:hover { border-color: #333a44; }
.part-item.active { border-color: var(--accent); background: #1b1819; }
.part-thumb { width: 54px; height: 48px; display: grid; place-items: center; background: #080a0d; overflow: hidden; }
.part-thumb img { max-width: 92%; max-height: 92%; object-fit: contain; pointer-events: none; }
.part-copy { min-width: 0; display: grid; gap: 3px; }
.part-copy strong { overflow: hidden; font: 700 13px "Silkscreen", monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.part-copy span { color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.part-eye { color: #636a74; font-size: 10px; }

.assembly-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 38px minmax(0,1fr) 30px; background: radial-gradient(circle at 50% 40%,#1a2027 0,#0b0e12 62%); }
.stage-toolbar, .stage-status { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #737983; font-size: 7px; letter-spacing: .14em; }
.stage-toolbar { border-bottom: 1px solid var(--line); }
.stage-toolbar i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.stage-status { border-top: 1px solid var(--line); }
#selected-status, .stage-selected-status { color: #adb1b7; }
#save-status.saved, .stage-save-status.saved { color: #39d37b; }
.bike-stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; user-select: none; }
.stage-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 40px 40px; }
.stage-horizon { position: absolute; left: 5%; right: 5%; top: 73%; height: 1px; background: linear-gradient(90deg,transparent,var(--accent),transparent); opacity: .42; }
#garage-screen .stage-horizon { background: var(--accent); opacity: .82; box-shadow: 0 0 5px rgba(255,59,31,.42); }
#garage-screen.customize-mode .stage-horizon { display: none; }
.bike-canvas { position: absolute; inset: 3%; overflow: hidden; }
#garage-screen .bike-canvas { inset: auto; left: 50%; top: 50%; width: 94%; height: 94%; transform: translate(-50%,-50%); }
.sprite-layer { position: absolute; height: auto; max-width: none; transform-origin: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
.garage-part-fade-ghost { position: absolute; height: auto; max-width: none; transform-origin: center; pointer-events: none; user-select: none; filter: drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
.sprite-layer:active { cursor: grabbing; }
.sprite-layer.transform-locked, .sprite-layer.transform-locked:active { cursor: not-allowed; }
.sprite-layer.selected { outline: 1px dashed rgba(255,91,68,.9); outline-offset: 5px; filter: drop-shadow(0 0 8px rgba(255,59,31,.35)); }
.sprite-layer.selected::after { content: ""; }
.empty-stage { position: absolute; left: 50%; top: 50%; color: #4c525b; font: 700 10px "Silkscreen", monospace; letter-spacing: .2em; transform: translate(-50%,-50%); pointer-events: none; }

.upgrade-sheet { position: absolute; z-index: 40; top: 50%; right: 12px; width: min(360px, calc(100% - 24px)); height: min(460px, 72%); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--accent); color: white; background: rgba(11,14,18,.94); box-shadow: 0 18px 42px rgba(0,0,0,.5); transform: translateY(-50%); touch-action: pan-y; }
.upgrade-sheet[hidden] { display: none; }
.upgrade-sheet[data-category="parts"] { grid-template-rows: auto minmax(0,1fr) auto; }
.upgrade-sheet[data-category="parts"] > p { display: none; }
.upgrade-sheet.minimized { top: auto; right: 12px; bottom: 12px; width: min(310px,calc(100% - 24px)); height: auto; grid-template-rows: auto; transform: none; }
.upgrade-sheet.minimized > p,
.upgrade-sheet.minimized .upgrade-sheet-content,
.upgrade-sheet.minimized .upgrade-store-link { display: none; }
.upgrade-sheet > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.upgrade-sheet > header div { display: grid; gap: 3px; }
.upgrade-sheet > header span { color: var(--accent); font-size: 7px; letter-spacing: .18em; }
.upgrade-sheet > header strong { font: 800 22px "Silkscreen", monospace; letter-spacing: .03em; }
.upgrade-sheet > header .upgrade-sheet-actions { display: flex; grid-auto-flow: column; gap: 5px; }
.upgrade-sheet > header button { width: 28px; height: 28px; border: 1px solid var(--line); color: white; background: #15191f; font-size: 17px; cursor: pointer; }
.upgrade-sheet > p { margin: 6px 0 8px; color: #9da3ac; font-size: 8px; line-height: 1.4; }
.upgrade-sheet-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #444a53 transparent; }
.upgrade-sheet-content.parts-filtered { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 7px; overflow: hidden; }
.upgrade-part-filter { display: flex; gap: 5px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.upgrade-part-filter button { flex: 0 0 auto; min-height: 29px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #323944; color: #aeb5be; background: #10141a; font: 700 7px "Silkscreen", monospace; letter-spacing: .08em; cursor: pointer; }
.upgrade-part-filter button.active { border-color: var(--accent); color: white; background: var(--accent); }
.upgrade-part-filter small { min-width: 17px; padding: 2px 4px; color: inherit; background: rgba(0,0,0,.25); text-align: center; }
.upgrade-part-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #444a53 transparent; }
.owned-upgrade-card { min-height: 57px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; margin-bottom: 5px; padding: 7px 8px; border: 1px solid var(--line); background: #12161c; }
.owned-upgrade-card.equipped { border-color: #39d37b; background: rgba(57,211,123,.06); }
.owned-upgrade-card > span { grid-column: 1; color: var(--accent); font-size: 7px; letter-spacing: .13em; }
.owned-upgrade-card > strong { grid-column: 1; overflow: hidden; font: 700 12px "Silkscreen", monospace; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.owned-upgrade-card > small { grid-column: 1; color: #858c95; font-size: 7px; letter-spacing: .06em; }
.owned-upgrade-card > button { grid-column: 2; grid-row: 1 / 4; align-self: stretch; min-width: 62px; border: 1px solid var(--accent); color: white; background: var(--accent); font: 700 7px "Silkscreen", monospace; cursor: pointer; }
.owned-upgrade-card > button:disabled { border-color: rgba(57,211,123,.45); color: #59e792; background: transparent; }
.cvt-core-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 12px; }
.cvt-core-grid div { padding: 8px; border-left: 2px solid #3d444e; background: #10141a; }
.cvt-core-grid strong, .cvt-core-grid span { display: block; }
.cvt-core-grid strong { color: #e9ebee; font: 700 10px "Silkscreen", monospace; }
.cvt-core-grid span { margin-top: 3px; color: #747b85; font-size: 7px; line-height: 1.35; }
.upgrade-empty { display: grid; gap: 6px; place-content: center; min-height: 150px; padding: 22px; border: 1px dashed #343a43; text-align: center; }
.upgrade-empty strong { font: 700 16px "Silkscreen", monospace; }
.upgrade-empty span { color: #858c95; font-size: 9px; line-height: 1.45; }
.upgrade-store-link { min-height: 34px; margin-top: 7px; border: 0; color: white; background: var(--accent); font: 700 8px "Silkscreen", monospace; letter-spacing: .1em; cursor: pointer; }

/* Player Customize: two-level aftermarket hot bars keep the motorcycle visible. */
.upgrade-sheet[data-category="parts"] { inset: 8px; width: auto; height: auto; padding: 0; border: 0; color: white; background: transparent; box-shadow: none; transform: none; pointer-events: none; }
.upgrade-sheet[data-category="parts"] > header { position: absolute; z-index: 3; top: 0; left: 0; width: 108px; height: 42px; align-items: center; gap: 4px; padding: 5px 6px; border: 1px solid #343a43; border-top: 3px solid var(--accent); background: rgba(10,13,17,.96); box-shadow: 0 7px 18px rgba(0,0,0,.35); pointer-events: auto; }
.upgrade-sheet[data-category="parts"] > header > div:first-child { min-width: 0; }
.upgrade-sheet[data-category="parts"] > header > div:first-child span { display: none; }
.upgrade-sheet[data-category="parts"] > header > div:first-child strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-sheet[data-category="parts"] #upgrade-sheet-minimize { display: none; }
.upgrade-sheet[data-category="parts"] #upgrade-sheet-close { display: none; }
.upgrade-sheet[data-category="parts"] > header button { width: 25px; height: 25px; font-size: 15px; }
.upgrade-sheet[data-category="parts"] .upgrade-sheet-content.parts-filtered { position: absolute; inset: 0; display: block; overflow: visible; pointer-events: none; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter { position: absolute; z-index: 2; top: 47px; bottom: 0; left: 0; width: 108px; display: flex; flex-direction: column; gap: 4px; padding: 5px; border: 1px solid #343a43; background: rgba(10,13,17,.94); box-shadow: 7px 0 20px rgba(0,0,0,.28); overflow-x: hidden; overflow-y: auto; pointer-events: auto; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter button { width: 100%; min-height: 39px; display: grid; grid-template-columns: 17px minmax(0,1fr) 17px; gap: 5px; padding: 4px 5px; text-align: left; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter button b { color: #dce0e5; font: 700 15px/1 "Silkscreen", monospace; text-align: center; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter button span { overflow: hidden; color: inherit; font-size: 6.5px; line-height: 1.2; text-overflow: ellipsis; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter button small { min-width: 16px; padding: 2px; font-size: 6px; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter button.future { opacity: .48; }
.upgrade-sheet[data-category="parts"] .upgrade-part-filter button.future:hover { opacity: .78; }
.upgrade-sheet[data-category="parts"] .upgrade-part-list { position: absolute; z-index: 2; right: 0; bottom: 0; left: 116px; height: 126px; display: flex; align-items: stretch; gap: 6px; padding: 7px; border: 1px solid #343a43; border-top: 3px solid var(--accent); background: rgba(10,13,17,.95); box-shadow: 0 -8px 24px rgba(0,0,0,.35); overflow-x: auto; overflow-y: hidden; pointer-events: auto; }
.upgrade-sheet[data-category="parts"] .upgrade-part-list[hidden] { display: none; }
.upgrade-hotbar-heading { flex: 0 0 100px; display: grid; align-content: center; gap: 4px; padding: 7px; border-right: 1px solid #303640; }
.upgrade-hotbar-heading span { color: var(--accent); font-size: 6px; letter-spacing: .14em; }
.upgrade-hotbar-heading strong { font: 800 18px/1 "Silkscreen", monospace; }
.upgrade-hotbar-heading small { color: #858c95; font-size: 6px; letter-spacing: .1em; }
.cvt-hotbar-heading { flex-basis: 142px; }
.cvt-hotbar-heading > div { display: flex; flex-wrap: wrap; gap: 3px; }
.cvt-hotbar-heading b { padding: 3px 4px; color: white; background: #080b0f; font-size: 5.5px; letter-spacing: .05em; }
.upgrade-sheet[data-category="parts"] .owned-upgrade-card { flex: 0 0 194px; min-height: 0; height: 107px; display: grid; grid-template: 14px minmax(0,1fr) 12px 25px / 67px minmax(0,1fr); gap: 2px 7px; margin: 0; padding: 6px; }
.upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-preview { grid-column: 1; grid-row: 1 / 5; width: 67px; min-width: 0; display: grid; place-items: center; overflow: hidden; background: #090c10; }
.upgrade-sheet[data-category="parts"] .upgrade-part-preview img { grid-area: 1 / 1; max-width: 92%; max-height: 90%; object-fit: contain; }
.upgrade-sheet[data-category="parts"] .upgrade-part-preview.wheel-pair img { max-width: 54%; max-height: 72%; }
.upgrade-sheet[data-category="parts"] .upgrade-part-preview.wheel-pair img:first-child { justify-self: start; }
.upgrade-sheet[data-category="parts"] .upgrade-part-preview.wheel-pair img:last-child { justify-self: end; }
.upgrade-sheet[data-category="parts"] .upgrade-part-preview i { color: #59616b; font: 700 7px "Silkscreen", monospace; }
.upgrade-sheet[data-category="parts"] .upgrade-part-preview.cvt-part-preview i { color: #d9dde2; font: 700 27px/1 "Silkscreen", monospace; }
.upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-brand { grid-column: 2; grid-row: 1; overflow: hidden; color: var(--accent); font-size: 6px; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-sheet[data-category="parts"] .owned-upgrade-card > strong { grid-column: 2; grid-row: 2; align-self: center; overflow: hidden; font-size: 11px; line-height: 1.05; white-space: normal; }
.upgrade-sheet[data-category="parts"] .owned-upgrade-card > small { grid-column: 2; grid-row: 3; font-size: 6px; }
.upgrade-sheet[data-category="parts"] .owned-upgrade-card > button { grid-column: 2; grid-row: 4; min-width: 0; }
.upgrade-hotbar-empty { flex: 1 0 180px; display: grid; align-content: center; gap: 4px; min-width: 180px; padding: 10px; border: 1px dashed #363d46; }
.upgrade-hotbar-empty strong { font: 700 13px "Silkscreen", monospace; }
.upgrade-hotbar-empty span { color: #858c95; font-size: 7px; }
.upgrade-sheet[data-category="parts"] .upgrade-store-link { position: absolute; z-index: 4; top: 0; right: 0; width: 104px; min-height: 32px; margin: 0; padding: 0 8px; white-space: nowrap; pointer-events: auto; }

.paint-picker { display: grid; gap: 14px; padding: 2px; }
.paint-wheel-row { display: flex; align-items: center; gap: 16px; }
.paint-wheel {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, hsl(0,80%,55%), hsl(60,80%,55%), hsl(120,80%,55%), hsl(180,80%,55%), hsl(240,80%,55%), hsl(300,80%,55%), hsl(360,80%,55%));
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
  cursor: pointer;
  touch-action: none;
}
.paint-wheel:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.paint-wheel::after {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: #11151b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.paint-wheel-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  pointer-events: none;
}
.paint-preview { display: grid; gap: 4px; }
.paint-preview-swatch { display: block; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: #2a2e35; transition: background .1s linear; }
.paint-preview strong { font: 800 12px "Silkscreen", monospace; letter-spacing: .04em; }
.paint-preview small { color: #9da3ac; font-size: 7px; letter-spacing: .08em; }
.paint-intensity-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.paint-intensity-row span { color: #9da3ac; font-size: 7px; letter-spacing: .1em; }
.paint-intensity-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.paint-picker-actions { display: flex; gap: 8px; }
.paint-picker-actions button { flex: 1; min-height: 34px; border: 0; font: 700 8px "Silkscreen", monospace; letter-spacing: .1em; cursor: pointer; }
.paint-save-button { color: white; background: var(--accent); }
.paint-save-button:disabled { color: #9aa0a8; background: #23272e; cursor: default; }
.paint-reset-button { border: 1px solid var(--line); color: #d9dde2; background: #15191f; }
.paint-reset-button:hover:not(:disabled) { border-color: var(--accent); color: white; }
.paint-reset-button:disabled { opacity: .45; cursor: default; }
.cvt-tune-summary { margin-bottom: 12px; padding: 12px; border: 1px solid rgba(255,59,31,.45); background: linear-gradient(135deg,rgba(255,59,31,.12),transparent),#10141a; }
.cvt-tune-summary > span, .cvt-tune-summary > strong, .cvt-tune-summary > small { display: block; }
.cvt-tune-summary > span { color: var(--accent); font-size: 7px; letter-spacing: .15em; }
.cvt-tune-summary > strong { margin: 4px 0 7px; font: 800 20px "Silkscreen", monospace; }
.cvt-tune-summary > div { display: flex; flex-wrap: wrap; gap: 5px; }
.cvt-tune-summary b { padding: 5px 7px; color: white; background: #080b0f; font-size: 7px; letter-spacing: .08em; }
.cvt-tune-summary > small { margin-top: 8px; color: #8d949d; font-size: 7px; line-height: 1.4; }
.cvt-slot-section { margin-bottom: 10px; padding: 8px; border: 1px solid var(--line); background: rgba(8,11,15,.72); }
.cvt-slot-section > header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cvt-slot-section > header div { display: grid; gap: 2px; }
.cvt-slot-section > header span { color: #777f88; font-size: 6px; letter-spacing: .14em; }
.cvt-slot-section > header strong { font: 700 13px "Silkscreen", monospace; }
.cvt-slot-section > header button { min-height: 27px; border: 1px solid #3c434d; color: #b0b6bd; background: #15191f; font: 700 6px "Silkscreen", monospace; cursor: pointer; }
.cvt-slot-section > p { margin: 7px 2px; color: #5f6670; font-size: 7px; }

/* Motorcycle Dealership */
.dealership-screen { position: fixed; z-index: 24; inset: 0; height: 100dvh; color: var(--text); background: #080a0d; overflow: hidden; }
.dealership-screen[hidden] { display: none; }
.dealership-screen button { font: inherit; }
.dealership-topbar { grid-template-columns: auto auto 1fr auto; }
.dealership-marque { justify-self: center; display: flex; align-items: center; gap: 13px; color: #8b929b; font: 700 8px "Silkscreen", monospace; letter-spacing: .18em; }
.dealership-marque i { width: 26px; height: 1px; background: var(--accent); transform: skewX(-24deg); }
.dealership-layout { height: calc(100dvh - 74px); display: grid; grid-template-columns: clamp(280px, 25vw, 350px) minmax(0,1fr); min-height: 0; }
.dealership-sidebar { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); border-right: 1px solid var(--line); background: #0d1014; }
.dealership-intro { padding: clamp(25px, 4vh, 44px) clamp(20px, 2.7vw, 38px) 22px; background: radial-gradient(circle at 0 10%,rgba(255,59,31,.16),transparent 53%); }
.dealership-intro > span { color: var(--accent); font: 700 8px "Silkscreen", monospace; letter-spacing: .2em; }
.dealership-intro h2 { margin: 9px 0 13px; font: italic 800 clamp(40px,4.4vw,64px)/.82 "Silkscreen", monospace; letter-spacing: -.035em; }
.dealership-intro p { margin: 0; color: #8f969f; font-size: 10px; line-height: 1.55; }
.dealership-models { min-height: 0; padding: 0 12px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #363c45 transparent; }
.dealership-model-card { width: 100%; min-height: 64px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; margin-top: 7px; padding: 9px 11px; border: 1px solid var(--line); color: white; background: #12161b; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.dealership-model-card:hover, .dealership-model-card:focus-visible { border-color: #4a515b; outline: none; transform: translateX(3px); }
.dealership-model-card.active { border-color: var(--accent); background: linear-gradient(90deg,rgba(255,59,31,.13),transparent 65%),#171b21; }
.dealership-model-number { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #343b44; color: #707781; font: 700 9px "Silkscreen", monospace; }
.dealership-model-card.active .dealership-model-number { border-color: var(--accent); color: var(--accent); }
.dealership-model-copy { min-width: 0; display: grid; gap: 2px; }
.dealership-model-copy span { color: var(--accent); font-size: 6px; letter-spacing: .16em; }
.dealership-model-copy strong { overflow: hidden; font: 700 16px "Silkscreen", monospace; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.dealership-model-status { color: #666e78; font-size: 6px; font-style: normal; letter-spacing: .13em; }
.dealership-model-status.owned { color: #43d782; }
.dealership-showroom { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; background: radial-gradient(ellipse at 52% 35%,#242b33 0,#101419 44%,#080a0d 76%); }
.showroom-grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,black,transparent 76%); }
.showroom-light { position: absolute; z-index: 0; left: 50%; top: -34%; width: min(66vw, 920px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle,rgba(255,255,255,.11),rgba(255,59,31,.04) 42%,transparent 68%); transform: translateX(-50%); }
.dealership-bike-frame { position: absolute; z-index: 3; left: 50%; top: 46%; width: min(76vw, 900px); aspect-ratio: var(--dealership-bike-aspect, 1.7); transform: translate(-50%,-50%); filter: drop-shadow(0 24px 16px rgba(0,0,0,.62)); }
.dealership-bike-part { position: absolute; height: auto; max-width: none; transform-origin: center; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.showroom-platform { position: absolute; z-index: 1; left: 11%; right: 11%; top: 69%; height: 18%; border-top: 2px solid rgba(255,91,68,.62); background: linear-gradient(to bottom,rgba(255,59,31,.08),transparent 72%); clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); perspective: 350px; }
.showroom-platform span { position: absolute; left: 6%; right: 6%; top: -9px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.75); filter: blur(8px); }
.dealership-specs { position: absolute; z-index: 5; top: 24px; right: 24px; display: grid; gap: 7px; width: 130px; }
.dealership-specs div { display: grid; gap: 3px; padding: 9px 10px; border-left: 2px solid #3a414a; background: rgba(7,9,12,.66); }
.dealership-specs span, .dealership-purchase > span { color: #737b85; font-size: 6px; letter-spacing: .16em; }
.dealership-specs strong { font: 700 13px "Silkscreen", monospace; letter-spacing: .05em; }
.dealership-offer { position: relative; z-index: 7; grid-row: 2; min-height: 150px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 20px clamp(24px,4vw,56px); border-top: 1px solid var(--line); background: rgba(10,13,17,.94); backdrop-filter: blur(10px); }
.dealership-name > span { color: var(--accent); font: 700 8px "Silkscreen", monospace; letter-spacing: .2em; }
.dealership-name h2 { margin: 3px 0 5px; font: italic 800 clamp(36px,4.2vw,62px)/.82 "Silkscreen", monospace; letter-spacing: -.025em; }
.dealership-name p { margin: 0; color: #8f969f; font-size: 9px; }
.dealership-purchase { min-width: 210px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 14px; }
.dealership-purchase > span { grid-column: 1 / -1; }
.dealership-purchase > strong { font: 700 24px "Silkscreen", monospace; white-space: nowrap; }
.dealership-purchase button { grid-row: 2; grid-column: 2; min-width: 132px; min-height: 42px; padding: 0 16px; border: 1px solid var(--accent); color: white; background: var(--accent); font: 700 8px "Silkscreen", monospace; letter-spacing: .09em; cursor: pointer; }
.dealership-purchase button:hover { filter: brightness(1.15); }
.dealership-purchase button:disabled { border-color: #3a414a; color: #737a83; background: #171b21; cursor: default; filter: none; }

/* Parts Store */
.parts-store-screen { position: fixed; z-index: 24; inset: 0; height: 100dvh; color: var(--text); background: #080a0d; overflow: hidden; }
.parts-store-screen[hidden] { display: none; }
.parts-store-screen button { font: inherit; }
.store-topbar { grid-template-columns: auto auto 1fr auto; }
.store-tabs { justify-self: center; display: flex; gap: 5px; }
.store-tabs button { min-width: 92px; height: 36px; border: 1px solid var(--line); color: #949ba4; background: #12161c; font: 700 9px "Silkscreen", monospace; letter-spacing: .13em; cursor: pointer; }
.store-tabs button.active { border-color: var(--accent); color: white; background: var(--accent); }
.store-wallet { display: grid; gap: 3px; text-align: right; }
.store-wallet span { color: #858c95; font-size: 7px; letter-spacing: .17em; }
.store-wallet strong { color: white; font: 700 19px "Silkscreen", monospace; }
.store-wallet strong span { color: white; font: inherit; letter-spacing: 0; }
.store-layout { height: calc(100dvh - 74px); display: grid; grid-template-columns: minmax(220px, .32fr) minmax(0,1fr); min-height: 0; }
.store-intro { padding: clamp(22px,4vw,54px); border-right: 1px solid var(--line); background: radial-gradient(circle at 0 15%,rgba(255,59,31,.15),transparent 45%),#0d1014; overflow-y: auto; overscroll-behavior: contain; }
.store-intro > span { color: var(--accent); font: 700 8px "Silkscreen", monospace; letter-spacing: .2em; }
.store-intro h2 { margin: 9px 0 13px; font: 800 clamp(34px,5vw,65px)/.87 "Silkscreen", monospace; letter-spacing: -.02em; }
.store-intro p { color: #989fa8; font-size: 11px; line-height: 1.6; }
.store-filter { display: grid; gap: 6px; margin-top: 18px; }
.store-filter[hidden] { display: none; }
.store-filter span { color: #858c95; font-size: 7px; letter-spacing: .14em; }
.store-filter select { width: 100%; min-height: 38px; padding: 0 30px 0 10px; border: 1px solid #3a414a; border-radius: 0; color: white; background: #15191f; font: 700 10px "Silkscreen", monospace; letter-spacing: .08em; }
.store-part-filter, .store-brand-filter { display: grid; gap: 7px; margin-top: 18px; }
.store-part-filter[hidden], .store-brand-filter[hidden] { display: none; }
.store-part-filter > span, .store-brand-filter > span { color: #858c95; font-size: 7px; letter-spacing: .14em; }
.store-part-buttons, .store-brand-buttons { display: grid; grid-template-columns: minmax(0,1fr); gap: 5px; }
.store-cvt-category-filter .store-part-buttons { grid-template-columns: 1fr; }
.store-cvt-category-filter .store-part-button { min-height: 38px; }
.store-cvt-category-filter .store-part-button span { white-space: normal; text-overflow: clip; line-height: 1.25; }
.store-part-button, .store-brand-button { min-width: 0; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 8px; border: 1px solid #303741; color: #939ba5; background: #12171d; font: 700 7px "Silkscreen", monospace; letter-spacing: .08em; cursor: pointer; }
.store-part-button span, .store-brand-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-part-button small, .store-brand-button small { flex: 0 0 auto; min-width: 18px; padding: 2px 4px; color: #737c87; background: #080b0f; font-size: 6px; text-align: center; }
.store-part-button:hover, .store-brand-button:hover { border-color: #697380; color: white; }
.store-part-button.active, .store-brand-button.active { border-color: var(--accent); color: white; background: var(--accent); }
.store-part-button.active small, .store-brand-button.active small { color: white; background: rgba(0,0,0,.28); }
.store-part-button.future:not(.active) { border-style: dashed; color: #656d77; }
.store-legend { display: grid; gap: 8px; margin-top: 25px; color: #888f98; font-size: 7px; letter-spacing: .12em; }
.store-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.store-legend i.race { background: var(--accent); }
.store-legend i.common { background: #46a4ff; }
.store-products { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); align-content: start; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.store-product-card { min-width: 0; min-height: 196px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-top: 3px solid #4c535d; background: #11151b; box-sizing: border-box; }
.store-product-card.has-visual { min-height: 300px; }
.store-product-card.tier-s { border-top-color: var(--accent); }
.store-product-card.tier-a { border-top-color: #f0b545; }
.store-product-card.tier-b { border-top-color: #46a4ff; }
.store-product-card header, .store-product-card footer { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.store-product-card header span { color: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.store-product-card header em { color: #7f8790; font-size: 7px; font-style: normal; letter-spacing: .12em; }
.store-product-card h3 { flex: 0 0 auto; min-width: 0; margin: 0; font: 800 21px/.95 "Silkscreen", monospace; overflow-wrap: anywhere; }
.store-product-visual { position: relative; flex: 0 0 82px; min-height: 82px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 50% 45%,rgba(255,91,68,.1),transparent 60%),#090c10; }
.store-product-visual img { width: 96%; height: 70px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 7px rgba(0,0,0,.6)); }
.store-product-visual span { position: absolute; right: 5px; bottom: 4px; padding: 3px 5px; color: #9ba2aa; background: rgba(5,7,10,.8); font-size: 5px; letter-spacing: .1em; }
.store-product-visual.wheel-set-visual { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 3px 6px 12px; }
.store-product-visual.wheel-set-visual img { width: 100%; height: 67px; }
.store-product-visual.shock-visual { flex-basis: 116px; min-height: 116px; padding: 4px 8px 16px; }
.store-product-visual.shock-visual img { width: 100%; height: 96px; }
.store-product-visual.shock-visual.product-preview img { transform: scale(1.08); transform-origin: center; }
.store-product-visual.shock-visual span { right: 50%; bottom: 4px; transform: translateX(50%); white-space: nowrap; }
.store-badges { flex: 0 0 auto; min-height: 17px; display: flex; flex-wrap: wrap; gap: 4px; }
.store-badges b { padding: 4px 6px; color: white; font-size: 6px; letter-spacing: .1em; }
.race-badge { background: var(--accent); }
.common-badge { background: #2977b8; }
.store-product-stats { flex: 0 0 auto; display: grid; grid-template-columns: minmax(68px,.32fr) minmax(0,1fr); gap: 6px; width: 100%; margin-top: auto; }
.store-product-stats span { min-width: 0; display: grid; align-content: start; gap: 2px; padding: 6px; color: #777f89; background: #0a0d11; font-size: 6px; letter-spacing: .08em; }
.store-product-stats strong { color: white; font: 700 11px/1.15 "Silkscreen", monospace; }
.store-product-card footer { min-height: 45px; padding-top: 10px; border-top: 1px solid var(--line); }
.store-product-card footer > strong { min-width: 0; color: white; font: 700 16px "Silkscreen", monospace; white-space: nowrap; }
.store-product-card footer button { flex: 0 0 auto; min-width: 82px; max-width: 100%; min-height: 34px; padding-inline: 10px; border: 1px solid var(--accent); color: white; background: var(--accent); font: 700 8px "Silkscreen", monospace; white-space: nowrap; cursor: pointer; }
.store-product-card footer button:disabled { border-color: #343a43; color: #707781; background: #171b21; cursor: not-allowed; }
.store-empty-state { grid-column: 1 / -1; min-height: 250px; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 28px; border: 1px dashed #3b424c; color: #8d959f; background: radial-gradient(circle at 50% 45%,rgba(255,59,31,.08),transparent 48%),#0d1116; text-align: center; }
.store-empty-state span { color: var(--accent); font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.store-empty-state strong { color: white; font: 800 clamp(30px,5vw,54px)/.9 "Silkscreen", monospace; }
.store-empty-state p { max-width: 440px; margin: 0; font-size: 9px; line-height: 1.6; }

.track-screen .garage-workspace { height: 100dvh; }
.track-screen .assembly-panel { grid-template-rows: minmax(0,1fr) 30px; background: radial-gradient(circle at 50% 45%,#16212a 0,#080b0e 68%); }
.track-settings-toggle { position: absolute; z-index: 90; top: 14px; left: 224px; min-width: 92px; height: 40px; border: 1px solid rgba(255,255,255,.25); color: white; background: rgba(10,13,17,.9); box-shadow: 0 8px 22px rgba(0,0,0,.35); font: 700 9px "Silkscreen", monospace !important; letter-spacing: .13em; cursor: pointer; }
.track-settings-toggle:hover, .track-settings-toggle.active { border-color: var(--accent); background: var(--accent); }
.track-settings-menu { position: absolute; z-index: 95; top: 62px; left: 224px; width: min(330px,calc(100% - 238px)); display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-top: 3px solid var(--accent); color: white; background: rgba(9,12,16,.97); box-shadow: 0 18px 42px rgba(0,0,0,.55); }
.track-settings-menu[hidden] { display: none; }
.track-settings-menu > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.track-settings-menu > header strong { font: 800 19px "Silkscreen", monospace; letter-spacing: .06em; }
.track-settings-back { height: 32px; padding: 0 10px; border: 1px solid var(--line); color: #c9ced5; background: #11151a; font: 700 8px "Silkscreen", monospace; letter-spacing: .1em; cursor: pointer; }
.track-settings-back:hover { border-color: var(--accent); color: white; }
.track-settings-primary, .track-settings-editor-tools { display: grid; gap: 9px; }
.track-settings-primary .race-variant-control, .track-settings-editor-tools .model-picker, .track-settings-editor-tools .track-pov-control { min-height: 34px; justify-content: space-between; }
.track-settings-primary .race-variant-control select { min-width: 128px; }
.track-settings-primary .track-mode-controls { display: grid; grid-template-columns: 1fr 1fr; }
.track-settings-primary .track-mode-controls button { width: 100%; height: 36px; }
.track-settings-editor-tools { padding-top: 11px; border-top: 1px solid var(--line); }
.track-settings-editor-tools .model-picker { justify-self: stretch; }
.track-settings-editor-tools .model-picker select { width: 190px; min-width: 0; height: 34px; font-size: 12px; }
.track-settings-editor-tools .track-pov-control input { width: 190px; }
.track-history-controls { display: grid; grid-template-columns: repeat(3,1fr); }
.track-history-controls button { width: 100%; min-width: 0; height: 32px; }
.track-settings-editor-tools .garage-actions { display: grid; grid-template-columns: 1fr 1fr; }
.track-settings-editor-tools .garage-actions button { width: 100%; }
.track-screen .stage-horizon { top: 78%; }
.track-stage { touch-action: pan-x; }
.track-frame { position: absolute; inset: 3%; overflow-x: auto; overflow-y: hidden; background-color: #05070a; outline: 1px solid rgba(255,255,255,.08); scrollbar-width: thin; scrollbar-color: var(--accent) #11161c; overscroll-behavior-x: contain; }
.track-background-canvas { position: sticky; z-index: 0; left: 0; top: 0; width: min(100vw, 100%); height: 100%; overflow: hidden; pointer-events: none; }
.track-background-layer { filter: none; image-rendering: pixelated; pointer-events: auto; }
.track-canvas { z-index: 1; inset: 0 auto auto 0; width: 500%; height: 100%; overflow: hidden; transform-origin: 0 50%; will-change: transform; }
.track-segment-layer { position: absolute; top: 0; height: 100%; overflow: hidden; }
.track-canvas.connected-road-layout { display: grid; grid-template-rows: 100%; }
.track-canvas.connected-road-layout .track-connected-road { position: relative; grid-row: 1; contain: layout paint style; }
.track-layer, .track-screen .part-thumb img, .track-screen .selected-preview img { image-rendering: pixelated; }
.track-layer { filter: none; }
.track-screen.background-selected .track-canvas { pointer-events: none; }
.track-mode-controls { display: flex; align-items: center; gap: 4px; }
.garage-mode-controls { margin-left: auto; }
.track-mode-controls button { min-width: 60px; height: 26px; padding: 0 10px; border: 1px solid var(--line); color: #8f959e; background: #10141a; font: 700 8px "Silkscreen", monospace; letter-spacing: .12em; cursor: pointer; }
.track-mode-controls button.active { border-color: var(--accent); color: white; background: var(--accent); }
.track-mode-controls button:disabled { border-color: var(--line); color: #474d55; background: #0d1014; cursor: not-allowed; }
.track-pov-control { display: flex; align-items: center; gap: 8px; color: #8f959e; font: 700 7px "Silkscreen", monospace; letter-spacing: .12em; }
.track-pov-control input { width: clamp(80px, 14vw, 180px); height: 3px; margin: 0; accent-color: var(--accent); }
.race-variant-control { display: flex; align-items: center; gap: 6px; color: #8f959e; font: 700 7px "Silkscreen", monospace; letter-spacing: .12em; }
.race-variant-control select { height: 26px; min-width: 88px; padding: 0 20px 0 7px; border: 1px solid var(--line); border-radius: 0; color: white; background: #10141a; font: 700 8px "Silkscreen", monospace; letter-spacing: .08em; }
.track-lock-button { width: calc(100% - 32px); min-height: 38px; margin: 12px 16px 0; border: 1px solid var(--line); color: #b8bdc4; background: #14181d; font: 700 8px "Silkscreen", monospace; letter-spacing: .1em; cursor: pointer; }
.track-lock-button span { margin-right: 7px; color: #f2b84b; }
.track-lock-button:hover:not(:disabled) { border-color: #f2b84b; }
.track-lock-button.active { border-color: #f2b84b; color: #f2b84b; background: rgba(242,184,75,.08); }
.track-lock-button:disabled { opacity: .35; cursor: not-allowed; }
.track-layer.locked { cursor: not-allowed; }
.track-layer.locked.selected { outline-color: #f2b84b; filter: drop-shadow(0 0 8px rgba(242,184,75,.28)); }
.part-item.locked .part-eye { color: #f2b84b; }
.track-play-hud { position: absolute; z-index: 30; left: 5%; top: 6%; display: grid; gap: 4px; padding: 8px 11px; border-left: 2px solid var(--accent); background: rgba(5,7,10,.76); pointer-events: none; }
.track-play-hud span { color: #9298a1; font-size: 7px; letter-spacing: .16em; }
.track-play-hud strong { color: white; font: 700 14px "Silkscreen", monospace; letter-spacing: .08em; }
.race-pov-overlay { position: absolute; z-index: 20; inset: 0; overflow: hidden; pointer-events: none; }
.race-pov-overlay.result-open { pointer-events: auto; }
.race-pov-overlay.result-open::before { content: ""; position: absolute; z-index: 34; inset: 0; background: rgba(2,5,8,.58); backdrop-filter: blur(2px); }
.race-position-tracker { --player-progress: 0%; --rival-progress: 0%; position: absolute; z-index: 34; top: 2.5%; left: 50%; width: clamp(180px,27vw,320px); padding: clamp(4px,.55vw,7px) clamp(6px,.75vw,10px); border: 1px solid rgba(255,255,255,.2); border-top: 2px solid #eef3f7; color: white; background: linear-gradient(105deg,rgba(8,13,19,.94),rgba(19,27,37,.88)); box-shadow: 0 6px 18px rgba(0,0,0,.32); transform: translateX(-50%); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.race-position-tracker[hidden] { display: none; }
.race-position-tracker header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.race-position-tracker header span { color: #7e8996; font: 700 clamp(5px,.65vw,8px) "Silkscreen", monospace; letter-spacing: .17em; }
.race-position-tracker header strong { color: #edf2f7; font: 800 clamp(8px,1vw,12px) "Silkscreen", monospace; letter-spacing: .1em; }
.race-position-tracker[data-leader="player"] header strong { color: #62b3ff; }
.race-position-tracker[data-leader="rival"] header strong { color: #ff654d; }
.race-tracker-route { display: grid; grid-template-columns: 13px minmax(0,1fr) 13px; align-items: center; gap: 4px; }
.race-tracker-gate { display: grid; place-items: center; width: 13px; height: 20px; border: 1px solid #39434e; color: #87919d; background: #0a0e13; font: 800 6px "Silkscreen", monospace; }
.race-tracker-gate.finish { border-color: #e8edf2; color: #080b0f; background: repeating-conic-gradient(#e8edf2 0 25%,#39434e 0 50%) 50% / 6px 6px; text-shadow: 0 0 2px white; }
.race-tracker-lanes { min-width: 0; display: grid; gap: 4px; }
.race-tracker-lane { position: relative; height: 6px; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.race-tracker-lane::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--player-progress); background: linear-gradient(90deg,rgba(70,164,255,.22),#52aaff); }
.race-tracker-lane.rival::before { width: var(--rival-progress); background: linear-gradient(90deg,rgba(255,61,32,.25),#ff4a2e); }
.race-tracker-lane b { position: absolute; z-index: 1; left: var(--player-progress); top: 50%; min-width: 23px; padding: 1px 3px; color: white; background: #297fc6; font: 800 clamp(5px,.54vw,6px) "Silkscreen", monospace; line-height: 1; text-align: center; letter-spacing: .05em; transform: translate(-50%,-50%); clip-path: polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%); will-change: left; }
.race-tracker-lane.rival b { left: var(--rival-progress); background: #e63c24; }
.race-position-tracker > small { display: block; margin-top: 3px; color: #909aa6; font: 700 clamp(5px,.58vw,7px) "Silkscreen", monospace; letter-spacing: .1em; text-align: center; }
.race-start-tree { position: absolute; z-index: 22; aspect-ratio: 16 / 9; max-width: none; pointer-events: none; user-select: none; }
.race-start-tree[hidden] { display: none; }
.race-start-tree > img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; }
.race-tree-light { position: absolute; z-index: 2; width: .46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,.9); background: #170f09; box-shadow: inset 0 0 2px rgba(0,0,0,.95); opacity: .96; transform: translate(-50%,-50%); transition: background-color 50ms linear, box-shadow 50ms linear, filter 50ms linear; }
.race-tree-light.player { left: 17.78%; }
.race-tree-light.rival { left: 17.075%; }
.race-tree-light.pre-stage { top: 34.4%; }
.race-tree-light.stage { top: 34.84%; }
.race-tree-light.amber-one { top: 35.56%; }
.race-tree-light.amber-two { top: 36.18%; }
.race-tree-light.amber-three { top: 36.8%; }
.race-tree-light.green { top: 37.42%; }
.race-tree-light.red { top: 38.13%; }
.race-tree-light.is-on { border-color: rgba(255,255,255,.72); opacity: 1; }
.race-tree-light.pre-stage.is-on, .race-tree-light.stage.is-on { background: #fff4bd; box-shadow: 0 0 5px #fff4bd, 0 0 12px rgba(255,238,157,.92); }
.race-tree-light.amber-one.is-on, .race-tree-light.amber-two.is-on, .race-tree-light.amber-three.is-on { background: #ffb000; box-shadow: 0 0 5px #ffc129, 0 0 13px rgba(255,160,0,.95); }
.race-tree-light.green.is-on { background: #20e85a; box-shadow: 0 0 5px #42ff73, 0 0 14px rgba(22,232,83,.98); }
.race-tree-light.red.is-on { background: #ff291c; box-shadow: 0 0 5px #ff493d, 0 0 14px rgba(255,35,24,.98); }
.race-bike { position: absolute; z-index: 23; left: 3.5%; bottom: calc(22% + clamp(6px,1.2vh,12px)); width: clamp(230px, 38vw, 560px); height: 48%; transform-origin: 50% 85%; pointer-events: none; }
.race-bike.race-bike-ai { z-index: 20; bottom: 35%; transform: scale(.78); transform-origin: left bottom; filter: hue-rotate(145deg) saturate(1.3) brightness(.82); opacity: .94; will-change: margin-left; }
.race-bike-ai .race-bike-model { border-color: #58a9ff; }
.race-bike-build { position: absolute; inset: auto 0 0; width: 100%; height: auto; aspect-ratio: var(--garage-build-aspect, 1.7); will-change: transform; }
.race-bike-part { position: absolute; height: auto; max-width: none; transform-origin: center; image-rendering: pixelated; filter: drop-shadow(0 5px 4px rgba(0,0,0,.42)); user-select: none; -webkit-user-drag: none; }
.race-bike-part.race-wheel-part { filter: none; }
.race-bike-part.race-front-assembly-part, .race-bike-part.race-rear-assembly-part, .race-bike-part.race-chassis-part { will-change: transform; }
.race-bike-model { position: absolute; left: 5%; bottom: -4px; padding: 3px 6px; border-left: 2px solid var(--accent); color: white; background: rgba(5,7,10,.72); font: 700 clamp(6px,.8vw,9px) "Silkscreen", monospace; letter-spacing: .12em; text-transform: uppercase; }
.race-result { position: absolute; z-index: 35; top: 50%; left: 50%; width: min(440px, calc(100% - 28px)); padding: clamp(16px, 2.2vw, 26px); border: 1px solid rgba(255,255,255,.22); border-left: 4px solid #39d37b; color: white; background: linear-gradient(145deg,rgba(23,31,41,.98),rgba(7,11,16,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.72); transform: translate(-50%,-50%); pointer-events: auto; animation: race-result-in .25s ease-out; }
.race-result[hidden] { display: none; }
.race-result span, .race-result small { display: block; color: #9ba2ac; font: 700 clamp(6px,.8vw,9px) "Silkscreen", monospace; letter-spacing: .15em; }
.race-result > strong { display: block; margin: 5px 0 7px; color: #59e792; font: 800 clamp(31px,4.5vw,54px)/.9 "Silkscreen", monospace; letter-spacing: .03em; }
.race-result.lose { border-left-color: var(--accent); }
.race-result.lose > strong { color: var(--accent-light); }
.race-result-telemetry { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 14px; }
.race-result-telemetry > div { min-width: 0; padding: 9px 7px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); }
.race-result-telemetry strong { display: block; margin-top: 4px; color: #eaf0f5; font: 800 clamp(14px,2vw,21px) "Silkscreen", monospace; white-space: nowrap; }
.race-result-rewards { display: grid; gap: 10px; margin-top: 16px; }
.race-result-rewards[hidden] { display: none; }
.race-reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.race-reward-grid > div { padding: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); }
.race-reward-grid strong { display: block; margin-top: 4px; color: #fff; font: 800 clamp(18px,2.5vw,27px) "Silkscreen", monospace; }
.race-reward-grid > div:first-child strong { color: #ffd05a; }
.race-level-progress { padding: 10px; border: 1px solid rgba(57,211,123,.25); background: rgba(57,211,123,.06); }
.race-level-progress header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.race-level-progress header span { color: #dfe7ee; }
.race-level-progress header b { color: #59e792; font-size: 13px; }
.race-level-progress header em { color: #59e792; font: 800 9px "Silkscreen", monospace; letter-spacing: .1em; }
.race-level-progress > div { height: 7px; overflow: hidden; background: rgba(255,255,255,.1); }
.race-level-progress > div i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#2bbd68,#72f3a5); transition: width .45s ease-out; }
.race-level-progress > small { margin-top: 6px; text-align: right; }
.race-result-actions { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 7px; margin-top: 18px; }
.race-result-actions button { min-height: 40px; padding: 8px; border: 1px solid rgba(255,255,255,.2); color: #e8edf2; background: #202832; font: 800 clamp(8px,1vw,11px) "Silkscreen", monospace; letter-spacing: .08em; cursor: pointer; }
.race-result-actions button.continue { border-color: #39d37b; color: #071009; background: #39d37b; }
.race-result-actions button.exit { color: #929ca7; background: transparent; }
.race-result-actions button:hover { filter: brightness(1.18); }
.race-result-actions button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
@keyframes race-result-in { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
.race-controls { position: absolute; z-index: 25; left: 1.2%; right: 1.2%; bottom: max(1.2%, env(safe-area-inset-bottom)); height: clamp(68px, 20%, 138px); display: grid; grid-template-columns: 1fr .58fr 1.65fr 1.5fr; gap: clamp(5px, 1vw, 14px); align-items: stretch; pointer-events: none; }
.race-control, .race-gauge { min-width: 0; border: 1px solid rgba(255,255,255,.18); border-radius: clamp(10px, 2vw, 24px); color: white; background: rgba(70,91,121,.92); box-shadow: 0 10px 25px rgba(0,0,0,.32); }
.race-control { pointer-events: auto; touch-action: none; font: 800 clamp(12px, 2.7vw, 31px) "Silkscreen", monospace; letter-spacing: .04em; cursor: pointer; user-select: none; }
.race-control.launch { background: rgba(59,113,169,.94); }
.race-control.throttle { border-color: rgba(255,91,68,.55); background: rgba(181,48,31,.94); }
.race-control.brake { background: rgba(77,84,96,.95); }
.race-control.pressed, .race-control:active { transform: translateY(3px); filter: brightness(1.28); box-shadow: inset 0 0 24px rgba(255,255,255,.14); }
.race-control:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.35); transform: none; }
.race-gauge { display: grid; grid-template: auto 1fr auto auto / 1fr; place-items: center; padding: clamp(5px, 1vw, 13px); background: rgba(18,24,33,.95); }
.race-gauge > span { color: #959ca6; font: 700 clamp(6px, 1vw, 10px) "Silkscreen", monospace; letter-spacing: .17em; }
.race-gauge > strong { font: 800 clamp(25px, 5vw, 62px)/.8 "Silkscreen", monospace; letter-spacing: .03em; }
.race-rpm-meter { width: 88%; display: grid; gap: 2px; margin: 2px 0 3px; }
.race-rpm-meter > span { display: flex; align-items: center; justify-content: space-between; color: #737d89; font: 700 clamp(5px,.72vw,8px) "Silkscreen", monospace; letter-spacing: .12em; }
.race-rpm-meter > span strong { color: #dfe8f1; font: 800 clamp(7px,1vw,11px) "Silkscreen", monospace; letter-spacing: .06em; }
.race-rpm-meter > div { position: relative; width: 100%; height: clamp(2px,.35vw,4px); overflow: hidden; background: rgba(255,255,255,.09); }
.race-rpm-meter > div::after { content: ""; position: absolute; top: 0; right: 8%; bottom: 0; width: 1px; background: #ff3d20; box-shadow: 0 0 5px rgba(255,61,32,.9); }
.race-rpm-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#3e9eff 0%,#57d6c2 62%,#f0b545 82%,#ff3d20 100%); transition: width .08s linear; }
.race-rpm-meter i.redline { filter: brightness(1.25); box-shadow: 0 0 7px rgba(255,61,32,.8); }
.race-gauge small { width: 100%; display: flex; justify-content: space-between; color: #818893; font: 700 clamp(6px, .9vw, 9px) "Silkscreen", monospace; letter-spacing: .1em; }
.race-gauge b { color: var(--accent); }
.race-gauge i { overflow: hidden; max-width: 65%; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.track-screen.play-mode .garage-workspace { height: 100dvh; grid-template: minmax(0,1fr) / minmax(0,1fr); }
.track-screen.play-mode .track-settings-toggle, .track-screen.play-mode .track-settings-menu { left: 14px; }
.track-screen.play-mode .track-settings-menu { width: min(330px,calc(100% - 28px)); }
.track-screen.play-mode .parts-panel, .track-screen.play-mode .inspector-panel { display: none; }
.track-screen.play-mode .assembly-panel { grid-column: 1; grid-row: 1; }
.track-screen.play-mode .track-frame { inset: 0; overflow: hidden; outline: 0; }
.track-screen.play-mode .track-layer { pointer-events: none; }
.track-screen.play-mode .sprite-layer.selected { outline: 0; filter: none; }
.track-screen.play-mode .track-pov-control, .track-screen.play-mode #track-undo, .track-screen.play-mode #track-redo, .track-screen.play-mode #track-multi-select { display: none; }
.track-screen.play-mode .stage-grid, .track-screen.play-mode .stage-horizon { display: none; }
.track-screen.play-mode #save-track-layout, .track-screen.play-mode .model-picker { visibility: hidden; }
.track-screen.play-mode .track-settings-editor-tools { display: none; }
.track-screen.play-mode .assembly-panel { grid-template-rows: minmax(0,1fr); }
.track-screen.play-mode .stage-status { display: none; }

.selected-part-card { min-height: 92px; display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.selected-preview { width: 72px; height: 62px; display: grid; place-items: center; background: #080a0d; overflow: hidden; }
.selected-preview img { max-width: 94%; max-height: 94%; object-fit: contain; }
.selected-part-card > div:last-child { min-width: 0; display: grid; gap: 5px; }
.selected-part-card strong { overflow: hidden; font: 700 15px "Silkscreen", monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.transform-controls { min-width: 0; margin: 0; padding: 14px 16px; border: 0; }
.transform-controls:disabled { opacity: .35; }
.control-row { display: grid; gap: 9px; margin-bottom: 18px; }
.control-row > span { display: flex; justify-content: space-between; color: #737983; font-size: 9px; }
.control-row b { color: #bfc3c9; font-size: 8px; letter-spacing: .13em; }
.control-value-editor { min-width: 57px; height: 25px; display: inline-flex; align-items: center; justify-content: flex-end; border: 1px solid #343a43; color: var(--accent); background: #15191f; }
.control-value-editor:hover { border-color: rgba(255,91,68,.65); }
.control-value-editor:focus-within { border-color: var(--accent); outline: 1px solid rgba(255,59,31,.35); outline-offset: 1px; }
.control-value-editor .editable-output { width: 45px; height: 23px; padding: 0 2px 0 4px; border: 0; outline: 0; appearance: textfield; color: var(--accent); background: transparent; font: 700 12px "Silkscreen", monospace; text-align: right; }
.control-value-editor .editable-output::-webkit-inner-spin-button,
.control-value-editor .editable-output::-webkit-outer-spin-button { margin: 0; appearance: none; }
.control-value-editor i { padding-right: 4px; font: 700 11px "Silkscreen", monospace; font-style: normal; }
.control-row > input[type="range"] { width: 100%; height: 3px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.control-row.locked > input[type="range"] { opacity: .22; cursor: not-allowed; pointer-events: none; }
.control-row.locked .control-value-editor { border-color: transparent; color: #f2b84b; background: transparent; }
.control-row.locked .control-value-editor::after { content: attr(data-locked-label); font: 700 11px "Silkscreen", monospace; white-space: nowrap; }
.control-row.locked .control-value-editor .editable-output,
.control-row.locked .control-value-editor i { display: none; }
.control-row.locked b::after { content: " · LOCKED"; color: #f2b84b; }
.layer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 3px; }
.layer-controls button { min-height: 48px; padding: 5px 3px; border: 1px solid var(--line); color: #c4c7cb; background: #14181d; font: 700 7px "Silkscreen", monospace; cursor: pointer; }
.layer-controls button span { display: block; margin-bottom: 3px; color: var(--accent); font-size: 15px; }
.layer-controls button:hover { border-color: var(--accent); }

@media (max-width: 900px) {
  .garage-topbar { grid-template-columns: auto auto minmax(150px,1fr) auto; gap: 10px; padding-inline: 14px; }
  .garage-heading span { display: none; }
  .garage-heading { min-width: 92px; }
  .model-picker > span, .tool-button.ghost { display: none; }
  .model-picker select { min-width: 150px; }
  .garage-workspace { grid-template-columns: 154px minmax(0,1fr) 218px; }
  .track-settings-toggle, .track-settings-menu { left: 168px; }
  .track-settings-menu { width: min(330px,calc(100% - 182px)); }
  .parts-list { padding: 6px; }
  .part-item { grid-template-columns: 42px minmax(0,1fr); min-height: 54px; }
  .part-thumb { width: 42px; height: 40px; }
  .part-eye { display: none; }
  #garage-screen .stage-help { display: none; }
  .track-screen .stage-toolbar > span:first-child { display: none; }
  .track-mode-controls button { min-width: 48px; padding-inline: 5px; font-size: 7px; }
  .track-pov-control input { width: clamp(65px, 11vw, 100px); }
  .race-variant-control > span { display: none; }
  .dealership-layout { grid-template-columns: 250px minmax(0,1fr); }
  .dealership-intro { padding: 25px 22px 16px; }
  .dealership-intro h2 { font-size: 44px; }
  .dealership-bike-frame { width: min(88vw,760px); }
  .dealership-specs { width: 112px; }
  .dealership-offer { padding-inline: 24px; }
  .dealership-name p { max-width: 320px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  .garage-entry-topbar { height: 60px; padding: env(safe-area-inset-top) 12px 0; }
  .garage-entry-topbar .brand { font-size: 21px; }
  .garage-entry-content { min-height: calc(100dvh - 60px); width: min(100% - 24px, 520px); gap: 18px; }
  .garage-entry-copy h2 { font-size: clamp(36px, 12vw, 52px); }
  .garage-entry-options { grid-template-columns: 1fr; gap: 9px; }
  .garage-entry-card { min-height: clamp(118px, 20dvh, 160px); padding: 16px 18px; }
  .garage-entry-card strong { font-size: 31px; }
  .garage-entry-card small { max-width: calc(100% - 100px); font-size: 8px; }
  .garage-entry-card b { right: 16px; bottom: 16px; }
  .garage-topbar { height: 60px; grid-template-columns: auto 1fr auto; padding: env(safe-area-inset-top) 10px 0; }
  .track-settings-toggle { top: 8px; left: 8px; min-width: 78px; height: 36px; font-size: 7px !important; }
  .track-settings-menu { top: 52px; left: 8px; width: min(310px,calc(100% - 16px)); max-height: calc(100dvh - 60px); overflow-y: auto; }
  .track-screen .garage-workspace { height: 100dvh; }
  .garage-heading { display: none; }
  .model-picker { justify-self: stretch; }
  .model-picker select { width: 100%; min-width: 0; height: 38px; }
  .tool-button.primary { min-height: 38px; padding-inline: 9px; font-size: 8px !important; }
  .garage-actions { display: block; }
  .garage-workspace { height: calc(100dvh - 60px); grid-template: minmax(0,1fr) 118px 175px / 1fr; }
  #garage-screen.customize-mode .garage-workspace { grid-template: minmax(0,1fr) / 1fr; }
  .assembly-panel { grid-row: 1; grid-template-rows: 28px minmax(0,1fr) 22px; }
  .parts-panel { grid-row: 2; display: block; border: 1px solid var(--line); overflow: hidden; }
  .parts-panel .panel-title { display: none; }
  .parts-list { height: 100%; display: flex; gap: 6px; padding: 7px; overflow-x: auto; overflow-y: hidden; }
  .part-item { flex: 0 0 92px; min-height: 0; height: 102px; display: grid; grid-template: 62px 1fr / 1fr; gap: 4px; margin: 0; text-align: center; }
  .part-thumb { width: 100%; height: 62px; }
  .part-copy span { display: none; }
  .part-copy strong { font-size: 10px; }
  .inspector-panel { grid-row: 3; display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--line); border-left: 0; overflow: hidden; }
  .inspector-panel .panel-title { display: none; }
  .selected-part-card { min-height: 0; grid-template: 74px 1fr / 1fr; gap: 5px; padding: 8px; border: 0; border-right: 1px solid var(--line); text-align: center; }
  .selected-preview { width: 100%; height: 74px; }
  .selected-part-card strong { font-size: 11px; }
  .transform-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 12px; }
  .control-row { gap: 4px; margin: 0; }
  .control-row b { font-size: 6px; }
  .layer-controls { grid-column: 1 / -1; padding: 0; }
  .layer-controls button { min-height: 30px; font-size: 6px; }
  .layer-controls button span { display: inline; margin-right: 4px; }
  .stage-help { display: none; }
  .track-screen .stage-toolbar { gap: 7px; padding-inline: 7px; }
  .track-screen .stage-toolbar > span:first-child { display: none; }
  .track-mode-controls button { min-width: 49px; height: 22px; padding-inline: 6px; font-size: 7px; }
  .track-pov-control { flex: 1; gap: 5px; }
  .track-pov-control input { width: 100%; min-width: 54px; }
  .race-variant-control select { min-width: 74px; height: 22px; padding-left: 5px; font-size: 7px; }
  .track-screen .inspector-panel { grid-template: 38px minmax(0,1fr) / 110px 1fr; }
  .track-screen .selected-part-card { grid-column: 1; grid-row: 1 / 3; }
  .track-screen .track-lock-button { grid-column: 2; grid-row: 1; width: calc(100% - 24px); min-height: 28px; margin: 6px 12px 3px; }
  .track-screen .transform-controls { grid-column: 2; grid-row: 2; padding-top: 5px; }
  .race-bike { left: 1.5%; bottom: calc(23% + 6px); width: 48vw; height: 45%; }
  .race-position-tracker { top: 1.5%; width: min(58vw,220px); }
  #garage-screen.customize-mode .stage-toolbar > span:first-child { display: none; }
  .customize-mode-controls { width: 100%; justify-content: center; }
  .customize-mode-controls button { flex: 1; height: 22px; padding-inline: 5px; font-size: 7px; }
  .upgrade-sheet { top: auto; right: 7px; bottom: 7px; width: min(390px,calc(100% - 14px)); height: min(320px,44dvh); padding: 9px; transform: none; }
  .upgrade-sheet[data-category="parts"] { inset: 5px; width: auto; height: auto; padding: 0; }
  .upgrade-sheet[data-category="parts"] > header { width: 86px; height: 38px; }
  .upgrade-sheet[data-category="parts"] > header > div:first-child strong { font-size: 12px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-filter { top: 43px; width: 86px; padding: 4px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-filter button { min-height: 36px; grid-template-columns: 15px minmax(0,1fr) 14px; gap: 3px; padding: 3px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-filter button b { font-size: 13px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-filter button span { font-size: 5.5px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-list { left: 92px; height: 112px; padding: 5px; }
  .upgrade-hotbar-heading { flex-basis: 76px; padding: 5px; }
  .upgrade-hotbar-heading strong { font-size: 15px; }
  .upgrade-sheet[data-category="parts"] .owned-upgrade-card { flex-basis: 174px; height: 96px; grid-template-columns: 58px minmax(0,1fr); padding: 5px; }
  .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-preview { width: 58px; }
  .upgrade-sheet[data-category="parts"] .upgrade-store-link { width: 96px; min-height: 29px; font-size: 6px; }
  .upgrade-sheet > header strong { font-size: 21px; }
  .upgrade-sheet > p { margin-block: 5px 8px; font-size: 7px; }
  .cvt-core-grid { grid-template-columns: 1fr 1fr; }
  .cvt-core-grid span { display: none; }
  .store-topbar { grid-template-columns: auto 1fr auto; }
  .store-topbar .garage-heading { display: grid; }
  .store-topbar .garage-heading span { display: none; }
  .store-topbar .garage-heading strong { font-size: 18px; }
  .store-tabs { position: fixed; z-index: 2; left: 8px; right: 8px; top: calc(64px + env(safe-area-inset-top)); }
  .store-tabs button { flex: 1; min-width: 0; height: 34px; }
  .store-wallet strong { font-size: 15px; }
  .store-layout { height: calc(100dvh - 60px); display: grid; grid-template: 154px minmax(0,1fr) / 1fr; padding-top: 40px; }
  .store-intro { padding: 9px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .store-intro > span, .store-intro p, .store-legend { display: none; }
  .store-intro h2 { margin: 0; font-size: 30px; }
  .store-filter { margin-top: 8px; }
  .store-filter select { min-height: 33px; font-size: 8px; }
  .store-part-filter, .store-brand-filter { gap: 4px; margin-top: 6px; }
  .store-part-filter > span, .store-brand-filter > span { display: none; }
  .store-part-buttons, .store-brand-buttons { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
  .store-part-button, .store-brand-button { flex: 0 0 auto; min-width: 82px; min-height: 30px; }
  .store-cvt-category-filter .store-part-button { min-height: 30px; }
  .store-products { grid-template-columns: 1fr; gap: 7px; padding: 8px; }
  .store-product-card { min-height: 196px; }
  .dealership-topbar { grid-template-columns: auto 1fr auto; }
  .dealership-topbar .garage-heading { display: grid; }
  .dealership-topbar .garage-heading strong { font-size: 18px; }
  .dealership-marque { display: none; }
  .dealership-layout { height: calc(100dvh - 60px); grid-template: 92px minmax(0,1fr) / 1fr; }
  .dealership-sidebar { display: block; border-right: 0; border-bottom: 1px solid var(--line); overflow: hidden; }
  .dealership-intro { display: none; }
  .dealership-models { height: 100%; display: flex; gap: 6px; padding: 8px; overflow-x: auto; overflow-y: hidden; }
  .dealership-model-card { flex: 0 0 142px; min-height: 0; height: 75px; grid-template-columns: 28px minmax(0,1fr); margin: 0; padding: 7px; }
  .dealership-model-number { width: 25px; height: 25px; }
  .dealership-model-status { display: none; }
  .dealership-showroom { grid-row: 2; }
  .dealership-bike-frame { top: 38%; width: 112%; }
  .showroom-platform { left: 2%; right: 2%; top: 57%; }
  .dealership-specs { top: 8px; right: 8px; width: 92px; gap: 4px; }
  .dealership-specs div { padding: 5px 7px; }
  .dealership-specs strong { font-size: 10px; }
  .dealership-offer { min-height: 127px; grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 12px 14px max(12px,env(safe-area-inset-bottom)); }
  .dealership-name h2 { font-size: clamp(29px,9vw,40px); }
  .dealership-name p { display: none; }
  .dealership-purchase { min-width: 122px; grid-template-columns: 1fr; gap: 3px; }
  .dealership-purchase > span { grid-column: 1; }
  .dealership-purchase > strong { font-size: 17px; }
  .dealership-purchase button { grid-row: auto; grid-column: 1; min-width: 122px; min-height: 36px; padding-inline: 8px; font-size: 7px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .garage-entry-topbar { height: 50px; padding: env(safe-area-inset-top) 14px 0; }
  .garage-entry-topbar .brand { font-size: 20px; }
  .garage-entry-content { min-height: calc(100dvh - 50px); width: min(760px, calc(100% - 34px)); grid-template-columns: .72fr 1.28fr; align-items: center; gap: 22px; }
  .garage-entry-copy h2 { font-size: clamp(34px, 6vw, 52px); }
  .garage-entry-copy p { font-size: 9px; }
  .garage-entry-options { gap: 8px; }
  .garage-entry-card { min-height: 190px; padding: 15px; }
  .garage-entry-card strong { font-size: 30px; }
  .garage-entry-card small { font-size: 8px; }
  .garage-entry-card b { right: 14px; bottom: 13px; font-size: 6px; }
  .garage-topbar { height: 50px; grid-template-columns: auto auto minmax(150px,1fr) auto; padding: env(safe-area-inset-top) 12px 0; }
  .garage-heading { min-width: 86px; }
  .garage-heading span { display: none; }
  .garage-heading strong { font-size: 20px; }
  .garage-back { width: 34px; height: 34px; }
  .model-picker > span, .tool-button.ghost { display: none; }
  .model-picker select { height: 34px; }
  .tool-button.primary { min-height: 34px; padding-inline: 10px; font-size: 9px !important; }
  .garage-workspace { height: calc(100dvh - 50px); grid-template-columns: 145px minmax(0,1fr) 205px; }
  .track-settings-toggle, .track-settings-menu { left: 159px; }
  .track-settings-menu { width: min(330px,calc(100% - 173px)); }
  #garage-screen.customize-mode .garage-workspace { grid-template-columns: minmax(0,1fr); }
  .panel-title { min-height: 47px; padding: 7px 10px; }
  .part-item { min-height: 45px; grid-template-columns: 38px minmax(0,1fr); padding: 3px; }
  .part-thumb { width: 38px; height: 36px; }
  .part-copy strong { font-size: 10px; }
  .assembly-panel { grid-template-rows: 27px minmax(0,1fr) 21px; }
  .stage-toolbar, .stage-status { padding-inline: 8px; font-size: 6px; }
  #garage-screen .stage-help { display: none; }
  .selected-part-card { min-height: 60px; grid-template-columns: 48px minmax(0,1fr); padding: 6px 9px; }
  .selected-preview { width: 48px; height: 46px; }
  .transform-controls { padding: 8px 12px; }
  .control-row { gap: 4px; margin-bottom: 8px; }
  .layer-controls button { min-height: 30px; }
  .layer-controls button span { display: inline; margin-right: 3px; font-size: 11px; }
  .track-screen .stage-toolbar { gap: 4px; padding-inline: 4px; }
  .track-screen .stage-toolbar > span:first-child { display: none; }
  .track-mode-controls { gap: 2px; }
  .track-mode-controls button { min-width: 42px; height: 23px; padding-inline: 3px; font-size: 6px; }
  .track-pov-control { gap: 4px; }
  .track-pov-control input { width: clamp(58px, 10vw, 82px); }
  .race-variant-control select { min-width: 74px; height: 23px; padding-left: 5px; font-size: 7px; }
  .customize-mode-controls button { min-width: 82px; height: 23px; padding-inline: 5px; font-size: 6px; }
  .upgrade-sheet { top: 50%; right: 7px; bottom: auto; width: min(340px,calc(100% - 14px)); height: min(300px,76%); padding: 8px; transform: translateY(-50%); }
  .upgrade-sheet[data-category="parts"] { inset: 5px; width: auto; height: auto; padding: 0; transform: none; }
  .upgrade-sheet[data-category="parts"] > header { width: 96px; height: 36px; }
  .upgrade-sheet[data-category="parts"] > header > div:first-child strong { font-size: 12px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-filter { top: 41px; width: 96px; padding: 4px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-filter button { min-height: 34px; grid-template-columns: 15px minmax(0,1fr) 15px; padding: 3px; }
  .upgrade-sheet[data-category="parts"] .upgrade-part-list { left: 102px; height: 108px; padding: 5px; }
  .upgrade-hotbar-heading { flex-basis: 82px; }
  .upgrade-sheet[data-category="parts"] .owned-upgrade-card { flex-basis: 174px; height: 92px; grid-template-columns: 58px minmax(0,1fr); padding: 5px; }
  .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-preview { width: 58px; }
  .upgrade-sheet[data-category="parts"] .upgrade-store-link { width: 102px; min-height: 28px; font-size: 6px; }
  .upgrade-sheet > header strong { font-size: 20px; }
  .upgrade-sheet > p { display: none; }
  .owned-upgrade-card { padding: 7px; }
  .cvt-core-grid { margin-top: 7px; }
  .cvt-core-grid span { display: none; }
  .store-topbar { grid-template-columns: auto auto 1fr auto; }
  .store-tabs button { min-width: 72px; height: 30px; }
  .store-wallet strong { font-size: 15px; }
  .store-layout { height: calc(100dvh - 50px); grid-template-columns: 185px minmax(0,1fr); }
  .store-intro { padding: 18px; }
  .store-intro h2 { font-size: 32px; }
  .store-intro p { font-size: 8px; }
  .store-legend { margin-top: 12px; }
  .store-part-filter, .store-brand-filter { margin-top: 9px; }
  .store-part-buttons, .store-brand-buttons { grid-template-columns: 1fr; }
  .store-part-button, .store-brand-button { min-height: 28px; }
  .store-cvt-category-filter .store-part-button { min-height: 28px; }
  .store-products { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 7px; padding: 8px; }
  .store-product-card { min-height: 176px; gap: 5px; padding: 9px; }
  .store-product-card h3 { font-size: 17px; }
  .dealership-layout { height: calc(100dvh - 50px); grid-template-columns: 220px minmax(0,1fr); }
  .dealership-intro { padding: 13px 15px 8px; }
  .dealership-intro h2 { margin: 5px 0 7px; font-size: 31px; }
  .dealership-intro p { display: none; }
  .dealership-models { padding: 0 7px 7px; }
  .dealership-model-card { min-height: 45px; margin-top: 4px; padding: 5px 7px; }
  .dealership-model-number { width: 25px; height: 25px; }
  .dealership-model-copy strong { font-size: 13px; }
  .dealership-bike-frame { top: 41%; width: min(72vw,640px); }
  .showroom-platform { top: 66%; }
  .dealership-specs { top: 8px; right: 8px; width: 98px; gap: 3px; }
  .dealership-specs div { padding: 5px 7px; }
  .dealership-specs strong { font-size: 10px; }
  .dealership-offer { min-height: 88px; padding: 8px 15px; }
  .dealership-name h2 { font-size: 31px; }
  .dealership-name p { display: none; }
  .dealership-purchase { min-width: 192px; }
  .dealership-purchase > strong { font-size: 18px; }
  .dealership-purchase button { min-height: 34px; }
}

/* Customize navigation belongs to the main header; leave the stage to the bike. */
#garage-screen.customize-mode > .garage-topbar { grid-template-columns: auto auto minmax(120px,1fr) auto auto; gap: 12px; }
#garage-screen.customize-mode .customize-mode-controls { width: auto; margin: 0; }
#garage-screen.customize-mode .customize-mode-controls button { min-height: 36px; }
#garage-screen.customize-mode .stage-toolbar { display: none; }
#garage-screen.customize-mode .assembly-panel { grid-template-rows: minmax(0,1fr); }
@media (max-width: 1100px) {
  #garage-screen.customize-mode > .garage-topbar { grid-template-columns: auto minmax(110px,1fr) auto auto; gap: 8px; padding-inline: 10px; }
  #garage-screen.customize-mode .garage-heading { display: none; }
  #garage-screen.customize-mode .model-picker > span { display: none; }
  #garage-screen.customize-mode .customize-mode-controls button { min-width: 0; padding-inline: 8px; font-size: 7px; }
}
@media (max-width: 700px) {
  #garage-screen.customize-mode > .garage-topbar { height: 102px; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: 46px 44px; gap: 4px 8px; padding: env(safe-area-inset-top) 8px 4px; }
  #garage-screen.customize-mode .garage-actions { grid-column: 3; grid-row: 1; }
  #garage-screen.customize-mode .customize-mode-controls { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  #garage-screen.customize-mode .customize-mode-controls button { flex: 1; height: 40px; font-size: 8px; }
  #garage-screen.customize-mode .garage-workspace { height: calc(100dvh - 102px); }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] { inset: 4px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] > header { display: none; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-filter { top: auto; bottom: 116px; left: 0; right: 0; width: auto; height: 52px; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 5px; padding: 4px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-filter button { flex: 0 0 auto; width: auto; min-width: 82px; min-height: 40px; grid-template-columns: 14px auto 14px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-filter button span { font-size: 7px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-list { left: 0; height: 112px; }
}
@media (min-width: 701px) and (max-height: 500px) {
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-list { height: 82px; padding: 4px; }
  #garage-screen.customize-mode .upgrade-part-preview { height: 30px; }
}
@media (min-width: 701px) and (max-height: 500px) {
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card { height: 70px; padding: 4px; grid-template-rows: 9px minmax(0,1fr) 0 24px; gap: 1px 5px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > small { display: none; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-preview { height: auto; }
}


@font-face {
  font-family: 'Silkscreen';
  src: url('assets/fonts/Silkscreen-Regular.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Crisp arcade controls, including the native form controls. */
body, button, input, select, textarea { font-family: 'Silkscreen', monospace; }
button, select, input[type='button'], input[type='submit'], .menu-button {
  border-radius: 0 !important;
  border: 2px solid #56606a;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.18), inset -2px -2px 0 rgba(0,0,0,.5), 2px 2px 0 #030506;
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  image-rendering: pixelated;
}
button:hover:not(:disabled) { border-color: #eef1f5; }
button:active:not(:disabled) {
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.5), inset -1px -1px 0 rgba(255,255,255,.15);
}
button:focus-visible, select:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; }
button:disabled { box-shadow: inset 1px 1px 0 rgba(255,255,255,.08); }


/* Compact store cards with consistent image and title slots. */
.store-products[data-category] { grid-template-columns: repeat(auto-fill,minmax(min(240px,100%),1fr)); gap: 12px; align-items: start; }
.store-products[data-category] .store-product-card { min-height: 0; height: 240px; padding: 12px; display: grid; grid-template-rows: 24px 48px 84px 38px; gap: 6px; }
.store-products[data-category] .store-product-card > header { grid-row: 1; }
.store-products[data-category] .store-product-card > h3 { grid-row: 2; }
.store-products[data-category] .store-product-card > .store-product-visual { grid-row: 3; }
.store-products[data-category] .store-product-card > footer { grid-row: 4; }
.store-products[data-category] .store-product-card header { min-height: 16px; align-items: start; }
.store-products[data-category] .store-product-card header span { font-size: 8px; line-height: 1.4; }
.store-products[data-category] .store-product-card header em { max-width: 45%; text-align: right; font-size: 6px; line-height: 1.4; }
.store-products[data-category] .store-brand-line { min-width: 0; display: flex; align-items: center; gap: 6px; }
.store-products[data-category] .store-brand-line > span { font-size: 7px; letter-spacing: .04em; white-space: nowrap; }
.store-products[data-category] .store-brand-line .store-badges { flex-wrap: nowrap; white-space: nowrap; }
.store-products[data-category] .store-power { flex: 0 0 auto; display: grid; gap: 2px; justify-items: end; }
.store-products[data-category] .store-power > span { color: #929aa4; font-size: 5px; letter-spacing: .08em; }
.store-products[data-category] .store-power > strong { color: white; font-size: 10px; line-height: 1.1; }
.store-products[data-category] .store-product-card h3 { height: 48px; font-size: 13px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.store-products[data-category] .store-product-visual { flex: 0 0 84px; height: 84px; min-height: 0; padding: 4px 8px; box-sizing: border-box; background: #0b0f14; }
.store-products[data-category] .store-product-visual img { width: 96%; max-width: 260px; height: 72px; object-fit: contain; transform: none; filter: none; }
.store-products[data-category] .store-product-visual.wheel-set-visual img { width: 100%; }
.store-products[data-category] .store-badges { min-height: 14px; }
.store-products[data-category] .store-badges:empty { display: none; }
.store-products[data-category] .store-badges b { padding: 3px 5px; font-size: 5px; }
.store-products[data-category] .store-product-stats { display: block; margin-top: auto; }
.store-products[data-category] .store-product-stats span { display: flex; align-items: center; gap: 8px; padding: 0; background: none; font-size: 6px; }
.store-products[data-category] .store-product-stats strong { font-size: 10px; }
.store-products[data-category] .store-product-card footer { min-height: 34px; padding-top: 7px; }
.store-products[data-category] .store-product-card footer > strong { font-size: 12px; }
.store-products[data-category] .store-product-card footer button { min-width: 76px; min-height: 30px; padding-inline: 7px; font-size: 7px; }

.store-intro h2[data-category="cvt"] { font-size: clamp(18px,2vw,26px); line-height: 1.25; overflow-wrap: anywhere; }
.store-products[data-category="cvt"] .store-product-card { height: 224px; grid-template-rows: 40px 32px 68px 38px; }
.store-products[data-category="cvt"] .store-product-card h3 { height: 32px; -webkit-line-clamp: 2; }
.store-products[data-category="cvt"] .store-brand-line { flex-wrap: wrap; gap: 4px; }
.store-products[data-category="cvt"] .store-power { flex: 0 1 46%; min-width: 0; text-align: right; }
.store-products[data-category="cvt"] .store-power strong { font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.store-cvt-function { grid-row: 3; min-width: 0; display: grid; align-content: center; gap: 7px; padding: 8px; background: #0b0f14; border: 1px solid rgba(255,255,255,.08); }
.store-cvt-function > span { color: #929aa4; font-size: 6px; letter-spacing: .08em; }
.store-cvt-function > strong { color: white; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }

.track-settings-menu .track-settings-back { flex: 0 0 auto; min-width: 96px; width: auto; padding-inline: 10px; white-space: nowrap; font-size: 12px; }
.track-settings-menu > header > strong { font-size: 14px; line-height: 1.5; }

/* Tablet and unfolded-phone layouts use the available height, not a desktop strip. */
@media (min-width: 601px) and (max-width: 1366px) and (min-height: 561px),
       (min-width: 1367px) and (min-height: 561px) and (max-aspect-ratio: 8/5) {
  .dashboard { height: 100dvh; min-height: 0; display: grid; grid-template-rows: 80px minmax(0,1fr) clamp(200px,29dvh,320px) 32px; padding: 0 max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); overflow: hidden; }
  .dashboard .topbar { height: auto; gap: 16px; }
  .dashboard .brand { font-size: 24px; }
  .dashboard .quick-stats { gap: 20px; }
  .dashboard .quick-stats strong { font-size: 18px; white-space: nowrap; }
  .dashboard .quick-stats div > span { font-size: 9px; }
  .dashboard .hero { min-height: 0; grid-template-columns: .95fr 1.05fr; overflow: hidden; }
  .dashboard .hero-copy { padding: 20px 0; }
  .dashboard h1 { font-size: clamp(40px,5.8vw,78px); line-height: .95; }
  .dashboard .eyebrow { font-size: 9px; margin-bottom: 16px; }
  .dashboard .subtitle { margin: 18px 0 0; font-size: 11px; }
  .dashboard .car-stage { position: relative; grid-column: 2; inset: auto; width: 100%; height: 100%; transform: none; container-type: size; }
  .dashboard .dashboard-bike { left: 50%; top: 50%; right: auto; bottom: auto; width: min(112%,calc(94cqh * var(--dashboard-bike-aspect,1.7))); transform: translate(-50%,-50%); }
  .dashboard .sun { width: min(80cqw,80cqh); height: auto; aspect-ratio: 1; top: 50%; left: 50%; right: auto; transform: translate(-50%,-50%); opacity: .8; }
  .dashboard .road-shadow { bottom: 15%; width: 95%; }
  .dashboard .menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
  .dashboard .menu-card { min-width: 0; min-height: 0; height: auto; padding: 18px; }
  .dashboard .card-label { font-size: clamp(16px,2vw,23px); max-width: calc(100% - 20px); overflow-wrap: anywhere; }
  .dashboard .icon { top: 14px; left: 18px; font-size: 22px; }
  .dashboard .card-number { top: 12px; font-size: 9px; }
  .dashboard > footer { display: flex; align-items: center; padding-top: 8px; font-size: 7px; }
}
@media (min-width: 601px) and (max-aspect-ratio: 1/1) and (min-height: 561px) {
  .dashboard { grid-template-rows: 100px minmax(0,1fr) clamp(240px,28dvh,330px) 32px; }
  .dashboard .topbar { flex-wrap: wrap; align-content: center; gap: 10px; }
  .dashboard .quick-stats { order: 3; flex: 1 0 100%; justify-content: space-around; margin: 0; }
  .dashboard .player-copy { display: none; }
  .dashboard .brand { font-size: 21px; }
  .dashboard .level-badge { width: 32px; height: 32px; }
  .dashboard .hero { grid-template: auto minmax(0,1fr) / minmax(0,1fr); }
  .dashboard .hero-copy { padding: 18px 0 4px; text-align: center; }
  .dashboard h1 { font-size: clamp(36px,5.5vw,60px); }
  .dashboard h1 br { display: none; }
  .dashboard h1 span { margin-left: .18em; }
  .dashboard .eyebrow { margin-bottom: 10px; font-size: 8px; }
  .dashboard .subtitle { max-width: 540px; margin: 10px auto 0; font-size: 10px; }
  .dashboard .car-stage { grid-column: 1; grid-row: 2; }
  .dashboard .dashboard-bike { width: min(92%,calc(100cqh * var(--dashboard-bike-aspect,1.7))); }
}
@media (min-width: 701px) and (max-width: 1366px) and (min-height: 561px),
       (min-width: 1367px) and (min-height: 561px) and (max-aspect-ratio: 8/5) {
  #garage-screen.customize-mode > .garage-topbar { height: 80px; grid-template-columns: auto minmax(130px,1fr) auto auto; }
  #garage-screen.customize-mode .garage-heading { display: none; }
  #garage-screen.customize-mode .garage-workspace { height: calc(100dvh - 80px); }
  #garage-screen.customize-mode .customize-mode-controls button { min-height: 44px; font-size: 9px; padding-inline: 10px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] > header { width: 156px; height: 44px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-filter { width: 156px; top: 50px; }
  #garage-screen.customize-mode .upgrade-part-filter button { min-height: 48px; }
  #garage-screen.customize-mode .upgrade-part-filter button span { font-size: 9px; line-height: 1.4; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-list { left: 164px; height: 164px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card { flex-basis: 258px; height: 144px; grid-template: 18px minmax(0,1fr) 14px 36px / 80px minmax(0,1fr); padding: 8px; gap: 4px 8px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-preview { width: 80px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > strong { font-size: 12px; line-height: 1.25; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-brand { font-size: 8px; }
  #garage-screen.customize-mode .owned-upgrade-card > button { font-size: 9px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-store-link { min-height: 44px; font-size: 9px; width: 120px; }
}
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  #garage-screen.customize-mode > .garage-topbar { height: 116px; grid-template: 52px 48px / auto minmax(0,1fr) auto; padding: 4px 12px; gap: 4px 8px; }
  #garage-screen.customize-mode .garage-actions { grid-column: 3; grid-row: 1; }
  #garage-screen.customize-mode .customize-mode-controls { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  #garage-screen.customize-mode .customize-mode-controls button { flex: 1; }
  #garage-screen.customize-mode .garage-workspace { height: calc(100dvh - 116px); }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] > header { display: none; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-filter { top: auto; bottom: 170px; left: 0; right: 0; width: auto; height: 60px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  #garage-screen.customize-mode .upgrade-part-filter button { flex: 0 0 130px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-list { left: 0; }
}

@media (max-width: 600px) and (min-height: 561px) {
  .dashboard { grid-template-rows: 106px minmax(0,1fr) clamp(228px,30dvh,294px); padding-bottom: max(8px,env(safe-area-inset-bottom)); }
  .dashboard .topbar { height: auto; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 46px 52px; gap: 0 8px; }
  .dashboard .brand { font-size: 22px; }
  .dashboard .player-status { grid-column: 2; grid-row: 1; }
  .dashboard .quick-stats { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 8px; }
  .dashboard .hero { grid-template: auto minmax(0,1fr) / minmax(0,1fr); }
  .dashboard .hero-copy { padding: 16px 0 0; text-align: center; }
  .dashboard .eyebrow { font-size: 7px; margin-bottom: 10px; }
  .dashboard h1 { font-size: clamp(30px,8vw,44px); line-height: 1; }
  .dashboard h1 br { display: none; }
  .dashboard h1 span { margin-left: .18em; }
  .dashboard .subtitle { font-size: 9px; margin: 10px auto 0; line-height: 1.5; }
  .dashboard .car-stage { position: relative; grid-column: 1; grid-row: 2; inset: auto; width: 100%; height: 100%; transform: none; container-type: size; }
  .dashboard .dashboard-bike { left: 50%; top: 50%; right: auto; bottom: auto; width: min(110%,calc(100cqh * var(--dashboard-bike-aspect,1.7))); transform: translate(-50%,-50%); }
  .dashboard .sun { width: min(76cqw,85cqh); height: auto; aspect-ratio: 1; left: 50%; top: 50%; right: auto; transform: translate(-50%,-50%); opacity: .7; }
  .dashboard .menu-grid { grid-auto-rows: minmax(0,1fr); }
  .dashboard .menu-card { padding: 12px; gap: 3px; }
  .dashboard .card-label { font-size: 14px; max-width: calc(100% - 12px); overflow-wrap: anywhere; }
  .dashboard .card-note { display: none; }
  .dashboard .icon { top: 9px; left: 12px; font-size: 18px; }
  .dashboard .arrow { right: 8px; bottom: 12px; font-size: 12px; }
}
@media (max-width: 700px) and (min-height: 561px) {
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-filter { bottom: 148px; height: 56px; }
  #garage-screen.customize-mode .upgrade-part-filter button { min-height: 44px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-list { height: 144px; }
  #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card { flex-basis: 224px; height: 128px; grid-template: 14px minmax(0,1fr) 12px 34px / 62px minmax(0,1fr); gap: 3px 6px; }
  #garage-screen.customize-mode .owned-upgrade-card > button { font-size: 9px; }
}
#garage-screen.customize-mode .upgrade-sheet[data-category="paint"] { top: 8px; right: 8px; bottom: 8px; width: min(310px,40%); height: auto; transform: none; }
@media (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  #garage-screen.customize-mode .upgrade-sheet[data-category="paint"] { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(310px,45%); }
}

/* Anchor settings to the upper-right in both play and editor modes. */
.race-world { position: absolute; inset: 0; pointer-events: none; }
.track-screen.play-mode .track-stage { background: #80cafa var(--race-scenery) center top / 100% 300% no-repeat; }
/* The upper layer uses only the generated sky; the full-width panorama is
   anchored to the road below it. Blend within clear sky to avoid a hard seam. */
.race-panorama { display: none; }
.track-screen.play-mode .race-panorama { display: flex; position: absolute; pointer-events: none; left: 0; top: var(--race-panorama-top,0); width: calc(var(--race-panorama-width,120vw) * 3); height: var(--race-panorama-height,67.5vw); mask-image: linear-gradient(to bottom,transparent,#000 25%); will-change: transform; }
.race-panorama img { flex: 0 0 var(--race-panorama-width,120vw); width: var(--race-panorama-width,120vw); height: 100%; max-width: none; image-rendering: pixelated; }
.race-panorama img:nth-child(2) { transform: scaleX(-1); }
.track-screen.play-mode .track-frame { background: transparent; overflow: visible; }
.track-screen.play-mode .track-canvas,
.track-screen.play-mode .track-segment-layer { overflow: visible; }
.track-screen.play-mode .track-connected-road { contain: layout style; }
.track-screen.play-mode .track-background-canvas { visibility: hidden; }
.track-screen.play-mode .race-bike { width: 34.56%; height: 100%; }
.track-screen.play-mode .race-controls { left: max(1.2%,env(safe-area-inset-left)); right: max(1.2%,env(safe-area-inset-right)); bottom: max(8px,env(safe-area-inset-bottom)); }
.track-screen.play-mode .race-pov-overlay::after { content: ""; position: absolute; z-index: 24; top: var(--race-control-surface-top,80%); left: 0; right: 0; bottom: 0; background: #0b1016; pointer-events: none; }
.track-screen.play-mode .race-result { max-height: calc(100% - 24px); overflow-y: auto; }
@media (max-aspect-ratio: 1/1) {
  .track-screen.play-mode .race-controls { height: clamp(90px,16dvh,138px); grid-template-columns: 1fr .75fr 1.4fr 1.3fr; gap: 5px; }
  .track-screen.play-mode .race-position-tracker { top: 62px; width: min(70%,320px); }
  .track-screen.play-mode .track-play-hud { top: 12px; left: 10px; max-width: calc(100% - 120px); }
  .track-screen.play-mode .track-play-hud strong { font-size: 9px; }
}
@media (max-width: 540px) and (max-aspect-ratio: 1/1) {
  .track-screen.play-mode .race-controls { height: clamp(156px,24dvh,210px); grid-template-columns: 1fr 1fr 1.4fr; grid-template-rows: minmax(0,1fr) 58px; }
  .track-screen.play-mode .race-gauge { grid-column: 1 / -1; grid-row: 1; }
  .track-screen.play-mode .race-control { grid-row: 2; font-size: 12px; }
}
.track-screen.play-mode .track-settings-toggle,
.track-screen.play-mode .track-settings-menu,
.track-screen .track-settings-toggle,
.track-screen .track-settings-menu { left: auto; right: 14px; }
.track-screen .track-settings-menu { width: min(330px,calc(100% - 28px)); box-sizing: border-box; }
@media (max-width: 640px) {
  .track-screen .track-settings-toggle,
  .track-screen .track-settings-menu { right: 8px; }
  .track-screen .track-settings-menu { width: min(310px,calc(100% - 16px)); }
}
#orientation-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0b1016;
  color: #fff;
  text-align: center;
  overflow: auto;
}
#orientation-gate[hidden] { display: none; }
.orientation-message { max-width: 560px; }
.orientation-message h2 { font-size: clamp(16px, 3vw, 26px); line-height: 1.5; }
.orientation-message p { font: 14px/1.6 sans-serif; color: #bbc6d0; }
.orientation-phone {
  width: 64px;
  height: 42px;
  margin: 0 auto 16px;
  border: 3px solid #ff4023;
  border-radius: 7px;
  font: 32px/36px sans-serif;
  color: #ff4023;
}

/* Developer editor: per-variant placement for the universal engine supports. */
.support-panel { margin-top: 14px; border: 1px solid #27313f; border-radius: 10px; padding: 12px; background: #0e141c; }
.support-panel .panel-title { margin-bottom: 10px; }
.support-variants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.support-variants button {
  font: inherit; font-size: 11px; color: #cfd8e6; background: #172131; border: 1px solid #2d3a4c;
  border-radius: 5px; padding: 8px 4px; cursor: pointer;
}
.support-variants button[aria-pressed="true"] { border-color: #ff674e; color: #fff; box-shadow: inset 0 0 0 1px #ff674e; }
.support-variants button:focus-visible, .support-saves button:focus-visible { outline: 2px solid #ff674e; outline-offset: 2px; }
.support-hint { margin: 10px 0; font-size: 11px; line-height: 1.5; color: #8d99ab; }
.support-saves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.support-saves button { font-size: 11px; padding: 9px 4px; }
.support-saves button[disabled] { opacity: .45; cursor: not-allowed; }
.support-status { margin: 10px 0 0; min-height: 15px; font-size: 11px; color: #7fd6a2; }
.support-status.warn { color: #f0b64e; }

.track-screen.cruise-mode .race-bike-ai,
.track-screen.cruise-mode .race-start-tree,
.track-screen.cruise-mode .race-position-tracker { display: none !important; }

/* Live CVT build summary occupies the spare right side of the workshop. */
.cvt-build-details { position:absolute;right:12px;top:12px;width:270px;max-width:34%;z-index:45;background:rgba(10,15,20,.96);border:2px solid #414a51;border-top-color:#ff482b;color:#eee; }
.cvt-build-details[hidden] { display:none; }
.cvt-build-details summary { cursor:pointer;list-style:none;padding:14px 10px;font-size:10px;display:flex;justify-content:space-between;align-items:center;gap:8px; }
.cvt-build-details summary::-webkit-details-marker { display:none; }
.cvt-build-details summary:focus-visible { outline:2px solid #ff482b;outline-offset:2px; }
.cvt-build-details[open] .details-arrow { transform:rotate(90deg); }
.details-arrow { color:#ff482b; }
#cvt-build-details-content { max-height:calc(100dvh - 350px);overflow-y:auto;padding:4px 12px 12px;font-family:Arial,sans-serif;font-size:12px; }
#cvt-build-details-content > strong { font-size:14px; }
#cvt-build-details-content > p:first-of-type { color:#99a4ae;font-size:9px; }
#cvt-build-details-content dl { display:grid;grid-template-columns:1fr auto;gap:7px 8px;margin:14px 0; }
#cvt-build-details-content dt { color:#aeb7c0; }
#cvt-build-details-content dd { margin:0;text-align:right;color:#fff;font-variant-numeric:tabular-nums; }
#cvt-build-details-content h4 { border-top:1px solid #39434b;padding-top:12px;color:#ff684f;font-size:10px; }
.cvt-installed-row { display:grid;gap:4px;padding-bottom:8px;border-bottom:1px solid #252d34; }
.cvt-installed-row span { color:#99a4ae;font-size:10px; }
.cvt-installed-row strong { font-size:11px;line-height:1.4;overflow-wrap:anywhere; }
@media(max-width:700px) { .cvt-build-details { right:6px;top:6px;max-width:48%;width:240px; } .cvt-build-details summary {font-size:8px;padding:10px 8px;} #cvt-build-details-content {max-height:calc(100dvh - 410px);min-height:80px;} }

/* Size against the workshop stage so short landscape screens remain usable. */
.cvt-build-details { width:300px;max-height:calc(100% - 180px);overflow:hidden; }
.cvt-build-details[open] { display:flex;flex-direction:column; }
.cvt-build-details[hidden] { display:none; }
.cvt-build-details summary { flex:none; }
#cvt-build-details-content { flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain; }
#cvt-build-details-content h4:first-child { margin-top:2px;padding-top:0;border-top:0; }
#cvt-build-details-content ul { padding-left:16px;line-height:1.5;color:#ffc58e; }
#cvt-build-details-content li + li { margin-top:7px; }
@media(max-height:600px) { .cvt-build-details {top:6px;max-height:calc(100% - 150px);} .cvt-build-details summary {padding:10px;font-size:9px;} }

/* Respect mode visibility even where grid rules set display. */
#race-length-screen [hidden] { display:none !important; }
#race-length-screen .garage-entry-content { display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:calc(100dvh - 90px);padding:24px 0; }
#race-length-screen .garage-entry-copy h2 {font-size:clamp(22px,4vw,42px);}
#race-mode-options,.race-length-options,.tournament-tiers {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
#race-mode-options .garage-entry-card strong {font-size:clamp(15px,2.1vw,28px);overflow-wrap:anywhere;}
#race-mode-options .garage-entry-card {min-height:200px;}
#tournament-panel {padding:16px;border:2px solid #414a51;background:#10161d;}
#tournament-panel p {font:14px/1.6 Arial,sans-serif;color:#b9c4ce;}
#tournament-panel h2,#tournament-panel h3 {font-size:16px;line-height:1.6;}
.tournament-tiers .garage-entry-card {font-size:12px;line-height:1.9;min-height:140px;padding:14px;}
.tournament-tiers button:disabled {opacity:.5;cursor:not-allowed;}
.tournament-bracket {display:flex;gap:18px;overflow-x:auto;margin:20px 0;}
.tournament-bracket section {min-width:170px;display:flex;flex-direction:column;justify-content:space-around;gap:8px;}
.tournament-bracket h4 {font-size:10px;color:#ff563b;}
.bracket-rider {padding:8px;border:1px solid #46515b;font:12px/1.4 Arial,sans-serif;}
.bracket-rider.player {border-color:#ff563b;color:#ffad8e;}
#tournament-panel .tool-button {margin:6px;}
@media(max-width:600px){#race-mode-options,.race-length-options,.tournament-tiers{grid-template-columns:1fr;}#race-mode-options .garage-entry-card{min-height:140px;}}

#race-length-screen {overflow-y:auto;}
.tournament-bracket section {position:relative;padding-top:38px;}
.tournament-bracket h4 {position:absolute;top:0;left:0;margin:8px 0;}
.bracket-rider {position:relative;}
.tournament-bracket section:not(:last-child) .bracket-rider::after {content:"";position:absolute;right:-19px;top:50%;width:18px;border-top:1px solid #64717c;}

#race-length-screen .garage-entry-content {justify-content:flex-start;gap:16px;padding-top:16px;}

/* The animated race tree replaces the editable static decoration in play. */
.track-screen.play-mode .static-start-tree { display:none !important; }

/* Black motorcycle preview in customization. */
#garage-screen.customize-mode #bike-stage { background:#000; }
#garage-screen.customize-mode #bike-stage > .stage-grid,
#garage-screen.customize-mode #bike-stage > .stage-horizon { display:none; }

/* Click tires carry their sidewall in the PNG; no artificial sprite halo. */
#garage-screen.customize-mode img[src*="click-forward-tread-v1.svg"] { filter:none; }

#garage-screen.customize-mode img[src*="assets/model-tires-v1/"] {filter:none;}

/* Drag uses the former Launch position for its Superman hold control. */
.track-screen #rider-superman {display:none;}

/* Short landscape phones: fit the whole sprite canvas inside the hero. */
@media (max-height:560px) and (orientation:landscape) {
  .dashboard .car-stage {top:0;right:0;width:44%;height:100%;transform:none;container-type:size;}
  .dashboard .dashboard-bike {left:50%;top:50%;right:auto;bottom:auto;width:min(100%,calc(90cqh * var(--dashboard-bike-aspect,1.7)));transform:translate(-50%,-50%);}
  .dashboard .car-stage .sun {top:50%;left:50%;right:auto;width:min(85cqw,85cqh);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);}
}
.tournament-actions{display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:12px;background:#0c1015}.tournament-tiers .selected{outline:3px solid #ff3d20;background:#342018}.tournament-matchup{position:sticky;bottom:12px;z-index:5;padding:24px;background:#141c26;border:3px solid #ff3d20;text-align:center;animation:matchup-enter .5s ease-out}.tournament-matchup small,.tournament-matchup strong{display:block;margin:8px}.tournament-matchup strong{font-size:clamp(18px,3vw,32px)}.tournament-bracket.revealing{animation:bracket-reveal .6s ease-out}.tournament-ready{position:absolute;z-index:150;top:30%;left:0;width:100%;padding:18px;text-align:center;box-sizing:border-box;background:#090d13e8;border-block:3px solid #ff3d20;color:white;font-size:clamp(28px,7vw,64px);pointer-events:none;animation:ready-banner 1.8s both}@keyframes matchup-enter{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}@keyframes bracket-reveal{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes ready-banner{0%{opacity:0;transform:scale(.9)}15%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.tournament-matchup,.tournament-bracket.revealing,.tournament-ready{animation:none}}
/* Tournament tree: all four stages fit in the viewport, advancing upward. */
#race-length-screen:has(.tournament-bracket):not(:has(#tournament-panel[hidden])) {overflow:hidden;display:flex;flex-direction:column;}
#race-length-screen:has(.tournament-bracket) .garage-entry-topbar {flex-shrink:0;}
#race-length-screen:has(.tournament-bracket) .garage-entry-content {width:calc(100% - 24px);min-height:0;flex:1;padding:8px 0;box-sizing:border-box;}
#tournament-panel:has(.tournament-bracket) {display:flex;flex-wrap:wrap;align-content:stretch;gap:4px 8px;flex:1;min-height:0;padding:10px;}
#tournament-panel:has(.tournament-bracket) h2 {display:none;}
#tournament-panel:has(.tournament-bracket) p {display:none;}
#tournament-panel:has(.tournament-bracket) h3 {width:100%;margin:0;font-size:clamp(10px,1.5vw,16px);}
.tournament-bracket {position:relative;display:flex;flex-direction:column-reverse;gap:0;overflow:visible;width:100%;flex:1 0 100%;height:calc(100% - 92px);min-height:0;margin:0;}
.tournament-bracket section {position:relative;display:block;min-width:0;min-height:0;flex:1;padding:0;}
.tournament-bracket .bracket-rider {position:absolute;box-sizing:border-box;left:calc((var(--slot) + .5)*100%/var(--count));top:28%;transform:translateX(-50%);width:calc(88%/var(--count));max-width:190px;height:64%;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #638e92;border-radius:10px;background:#34595d;color:#ecffff;text-align:center;font:clamp(8px,1.2vw,15px)/1.15 Arial,sans-serif;}
.bracket-rider small {font-size:clamp(6px,.85vw,11px);}
.bracket-rider strong {font-size:inherit;}
.tournament-bracket .bracket-rider.player {background:#68301c;border:2px solid #ff873e;color:#fff1da;box-shadow:0 0 12px #ff69384d;}
.tournament-bracket .bracket-rider.next-opponent {border:2px solid #e3c377;}
.tournament-bracket section:not(:last-child) .bracket-rider::after {content:'';position:absolute;top:auto;bottom:100%;right:auto;left:50%;width:0;height:calc(56% + 2px);border:0;border-left:2px solid #6f9597;}
.tournament-bracket section:not(:first-child) .bracket-rider::before {content:'';position:absolute;top:100%;left:calc(50% - 100%/1.76);width:calc(100%/ .88);height:12%;border:2px solid #6f9597;border-bottom:0;border-radius:6px 6px 0 0;}
#tournament-panel:has(.tournament-bracket) > .tool-button {margin:0;padding:8px;font-size:clamp(8px,1vw,12px);}
.tournament-matchup {position:fixed;inset:74px 0 0;z-index:30;display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,4vw,60px);border:0;background:radial-gradient(ellipse at center,#253840,#0a1017 75%);}
.tournament-matchup > small {color:#d2a96d;letter-spacing:.2em;}
.tournament-versus {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,3vw,48px);}
.tournament-contender {min-width:0;}
.tournament-bike {position:relative;width:100%;max-height:52dvh;overflow:hidden;}
.tournament-bike img {position:absolute;max-width:none;pointer-events:none;}
.tournament-contender.rival .tournament-bike {transform:scaleX(-1);}
.tournament-matchup .versus-label {font:bold italic clamp(36px,9vw,130px)/1 Arial,sans-serif;color:#ff784b;}
.tournament-contender > strong {font:700 clamp(12px,2.8vw,32px)/1.3 Arial,sans-serif;}
@media(max-height:500px){#race-length-screen:has(.tournament-bracket) .garage-entry-topbar{height:44px;} .tournament-matchup{top:44px;} #tournament-panel:has(.tournament-bracket){padding:4px;} .tournament-bracket{height:calc(100% - 65px);} .tournament-bracket .bracket-rider{gap:1px;border-radius:5px;}}
.tournament-bracket .bracket-rider::before,.tournament-bracket .bracket-rider::after {display:none;}
.bracket-connectors {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.bracket-connectors path {fill:none;stroke:#6f9597;stroke-width:2;vector-effect:non-scaling-stroke;}
.tournament-bracket .bracket-rider small {max-width:100%;overflow-wrap:anywhere;}
@media(max-width:600px){.tournament-bracket .bracket-rider small{font-size:7px;line-height:1.15;} .tournament-bracket .bracket-rider strong{font-size:9px;}}
/* Tournament rounds advance without exit or result actions. */
body.tournament-active #race-length-back,body.tournament-active #track-back,body.tournament-active .race-result-actions,body.tournament-active #race-launch:not([data-superman]) {display:none!important;}
.champion-celebration {position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;overflow:hidden;text-align:center;background:radial-gradient(ellipse,#514018ee,#090e16f5 70%);animation:champion-arrive .6s ease-out;}
#tournament-panel .champion-celebration h2 {display:block;width:auto;margin:0;padding:0 20px;color:#ffdd7b;font-size:clamp(20px,4vw,56px);text-shadow:0 0 30px #efaf4a66;}
#tournament-panel .champion-celebration p {display:block;color:#fff1cf;font-size:clamp(10px,2vw,18px);padding:0 20px;}
.champion-trophy {font-size:clamp(64px,16vh,140px);animation:champion-float 2s ease-in-out infinite;}
.champion-prize {color:#fff;font-size:clamp(32px,7vw,86px);animation:champion-arrive 1s ease-out;}
.champion-confetti {position:absolute;left:var(--x);top:-20px;width:9px;height:16px;background:var(--color);animation:champion-confetti 3s var(--delay) linear infinite;pointer-events:none;}
@keyframes champion-arrive {from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes champion-float {50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes champion-confetti {to{transform:translateY(110dvh) rotate(540deg)}}
@media(prefers-reduced-motion:reduce){.champion-celebration,.champion-trophy,.champion-prize{animation:none;}.champion-confetti{display:none;}}
/* Automatic tournament starts leave three controls, not four grid slots. */
body.tournament-active .track-screen.play-mode .race-controls {
  grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr);
}
@media (max-width:540px) and (max-aspect-ratio:1/1) {
  body.tournament-active .track-screen.play-mode .race-controls {
    grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  }
}

/* Launch becomes the Superman hold control once the automatic race stages. */
body.tournament-active .track-screen.play-mode .race-controls:has(#race-launch[data-superman]) {
  grid-template-columns:minmax(0,1fr) minmax(0,.58fr) minmax(0,1.65fr) minmax(0,1.5fr);
}
@media(max-aspect-ratio:1/1){
  body.tournament-active .track-screen.play-mode .race-controls:has(#race-launch[data-superman]) {grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,1.4fr) minmax(0,1.3fr);}
}
@media(max-width:540px) and (max-aspect-ratio:1/1){
  body.tournament-active .track-screen.play-mode .race-controls:has(#race-launch[data-superman]) {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);}
}
.race-variant-control {display:none!important;}
/* Hidden race setup must never be shown by the bracket flex layout. */
#race-length-screen[hidden] {display:none!important;}
.rider-duck-control {position:absolute;left:0;bottom:calc(100% + 10px);width:clamp(120px,20vw,260px);height:clamp(42px,7vh,65px);border:2px solid #91969f;border-radius:10px;background:#666b76;color:#fff;font:700 clamp(12px,1.6vw,22px) "Silkscreen",monospace;pointer-events:auto;touch-action:manipulation;cursor:pointer;}
.rider-duck-control[aria-pressed="true"] {background:#255e65;border-color:#79e0dc;box-shadow:0 0 12px #79e0dc44;}
.rider-duck-control:disabled {opacity:.45;cursor:not-allowed;}
.race-finish-marker {position:absolute;z-index:2;width:clamp(22px,3vw,46px);transform:translateX(-50%);box-sizing:border-box;border-inline:3px solid #ffe76b;background:conic-gradient(#fff 25%,#141820 0 50%,#fff 0 75%,#141820 0) 0 0/20px 20px;box-shadow:0 0 0 2px #131820,0 0 15px #ffe76b66;pointer-events:none;}
.race-finish-marker[hidden] {display:none!important;}
.race-finish-marker strong {position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);padding:10px 15px;border:3px solid #fff3ae;background:#ffdb45;color:#141820;font:900 clamp(12px,2vw,25px)/1 "Silkscreen",monospace;letter-spacing:.1em;box-shadow:0 4px 0 #171d27;white-space:nowrap;}
.race-finish-marker strong::after {content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:9px solid transparent;border-top-color:#fff3ae;}
/* Raise the finish sign above the riders so bikes cannot obscure the label. */
.race-finish-marker strong {bottom:calc(100% + clamp(80px,18vh,150px));}
.race-finish-marker::before {content:'';position:absolute;left:50%;bottom:100%;width:4px;height:clamp(80px,18vh,150px);transform:translateX(-50%);background:repeating-linear-gradient(0deg,#ffe76b 0 12px,#222936 12px 24px);}
/* Reserve a compact side column for CVT details above the parts hotbar. */
.cvt-build-details {right:8px;top:8px;width:clamp(120px,26%,240px);max-width:34%;box-sizing:border-box;max-height:calc(100% - var(--cvt-bottom-space,180px) - 16px);overflow:hidden;}
.cvt-build-details summary {padding:10px 8px;font-size:9px;}
#cvt-build-details-content {min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 8px 10px;font-size:11px;overflow-wrap:anywhere;scrollbar-width:thin;}
#cvt-build-details-content dl {gap:5px;margin:10px 0;}
#cvt-build-details-content h4 {font-size:9px;padding-top:8px;}
@media(max-width:600px){.cvt-build-details{right:4px;top:6px;width:32%;max-width:32%;}.cvt-build-details summary{font-size:7px;padding:8px 5px;}#cvt-build-details-content{font-size:9px;padding:3px 5px 8px;}#cvt-build-details-content h4{font-size:8px;}#cvt-build-details-content dl{grid-template-columns:minmax(0,1fr) auto;gap:4px;}}
.cvt-build-details[open] {height:min(420px,calc(100% - var(--cvt-bottom-space,180px) - 16px));}
#cvt-build-details-content {max-height:calc(100% - 38px);box-sizing:border-box;}
/* Give the details content its own definite scroll height, independent of
   the browser's internal <details> content wrapper. */
.cvt-build-details[open] {display:block;}
.cvt-build-details summary {box-sizing:border-box;height:38px;}
#cvt-build-details-content {height:calc(100% - 38px);max-height:none;overflow-y:auto;padding-bottom:16px;box-sizing:border-box;}
#cvt-build-details-content {position:absolute;top:38px;bottom:0;left:0;right:0;height:auto;max-height:none;min-height:0;}
/* An open details element must still obey its hidden state outside CVT. */
#cvt-build-details[hidden] {display:none!important;}
/* Extended rear assemblies may extend beyond the saved canvas rectangle.
   The stage and sprite-bounds fitter provide the visible garage boundary. */
#garage-screen.customize-mode .bike-canvas {overflow:visible;}

/* Individual manufacturer identities in the store and owned-parts hotbar. */
.part-brand-logo { display:block; width:96px; max-width:100%; height:24px; object-fit:contain; object-position:left center; }
.store-products[data-category] .store-brand-line { flex-wrap:wrap; row-gap:4px; }
.store-products[data-category] .part-brand-lockup { display:block; max-width:100%; min-width:0; }
.upgrade-part-brand .part-brand-logo { width:76px; height:19px; }
@media (max-width:600px) { .store-products .part-brand-logo { width:84px; height:21px; } }

/* Native 96x24 transparent sprite logos; never smooth their pixel edges. */
.part-brand-logo { image-rendering:pixelated; background:transparent; border:0; box-shadow:none; }

/* Filter rotating raster pixels consistently; the source artwork remains pixel art. */
.race-bike-part.race-wheel-part { image-rendering:auto; transform-origin:50% 50%; filter:none; }

.menu-card.online {background:#1766a8;color:#fff;}
.menu-card.online:hover,.menu-card.online:focus-visible {background:#227ec5;}
.menu-card.online .icon,.menu-card.online .arrow,.menu-card.online .card-number {color:#e4f3ff;}
.menu-card.online:focus-visible {outline:2px solid #bde8ff;outline-offset:-5px;}
/* Compact aftermarket cards: logo, name and action never share vertical space. */
#garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-brand { min-width:0; min-height:0; height:100%; display:flex; align-items:center; line-height:1; }
#garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-brand .part-brand-logo { width:64px; height:100%; max-height:14px; object-fit:contain; object-position:left center; }
#garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > strong { min-width:0; min-height:0; max-height:100%; font-size:10px; line-height:1.2; letter-spacing:.025em; overflow-wrap:anywhere; }
@media (max-width:700px), (max-height:560px), (pointer:coarse) and (max-width:1400px) {
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-list { height:104px; padding:5px; gap:6px; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card { box-sizing:border-box; flex:0 0 190px; height:90px; padding:5px; grid-template:12px minmax(0,1fr) 0 28px / 58px minmax(0,1fr); gap:2px 6px; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-preview { width:58px; height:auto; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > .upgrade-part-brand { font-size:5px; letter-spacing:.08em; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .upgrade-part-brand .part-brand-logo { width:56px; max-height:12px; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > strong { font-size:8px; line-height:11px; letter-spacing:0; align-self:center; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > small { display:none; }
 #garage-screen.customize-mode .upgrade-sheet[data-category="parts"] .owned-upgrade-card > button { height:28px; min-height:28px; padding:2px 4px; font-size:7px; line-height:1; }
}