/* ==========================================================================
   MyLambo , light, premium, typography-led.
   No filled gray panels: separation comes from whitespace + hairline borders.
   ========================================================================== */

:root {
  --paper:        #f7f7f5;   /* page background */
  --card:         #ffffff;   /* card surface */
  --ink:          #101114;   /* primary text */
  --ink-soft:     #5b5f66;   /* secondary text */
  --ink-faint:    #8d9199;   /* tertiary text */
  --line:         #e4e4df;   /* hairline border */
  --line-strong:  #d2d2cb;
  --live:         #16a34a;   /* auction green */
  --live-soft:    #e8f6ec;
  --focus:        #1a6dff;

  --w-page: 1180px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Navbar , single line at every width. Never wraps.
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 247, 245, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex-wrap: nowrap;          /* hard requirement: no second line */
  white-space: nowrap;
}

.nav__brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  flex: 0 0 auto;
}
.nav__brand span { color: var(--ink-faint); font-weight: 500; }

.nav__links {
  display: flex;
  gap: 26px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.nav__links a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: transform .12s ease, opacity .15s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); opacity: 1; }

.btn--lg { font-size: 15px; padding: 15px 30px; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding: 56px 0 8px; text-align: center; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  white-space: nowrap;
}
.status b { color: var(--ink); font-weight: 600; }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .45);
  animation: pulse 2.2s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.hero h1 {
  margin: 26px auto 0;
  max-width: 15ch;
  font-size: clamp(2.5rem, 7.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 640;
}

.hero__sub {
  margin: 20px auto 0;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
}

/* --------------------------------------------------------------------------
   Funding progress
   -------------------------------------------------------------------------- */

.fund {
  margin: 40px auto 0;
  max-width: 720px;
  text-align: left;
}
.fund__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.fund__raised {
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.fund__raised small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.fund__goal { font-size: 14px; color: var(--ink-soft); text-align: right; }
.fund__goal b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }

.bar {
  margin-top: 14px;
  height: 6px;
  border-radius: var(--r-pill);
  background: #ececeb;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--live);
  transition: width 1s cubic-bezier(.22,1,.36,1);
}

/* --------------------------------------------------------------------------
   Car stage + numbered markers
   -------------------------------------------------------------------------- */

.stage-sec { padding: 44px 0 8px; }

.stage {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  aspect-ratio: 1200 / 350;
}

/* The 3D car needs vertical room to be orbited; the flat vector car does not. */
.stage.is-3d { aspect-ratio: 16 / 9; }

/* Either the owner-supplied photo OR the inline vector fills the stage. */
.stage__art,
.stage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stage__photo { object-fit: contain; }
.stage__photo[hidden] { display: none; }

/* --- 3D viewer ------------------------------------------------------------
   The canvas is a bounded element, never full screen, so the page keeps
   scrolling normally around it.

   Do NOT put touch-action: pan-y on .stage__canvas. OrbitControls sets
   touch-action: none itself, and overriding it breaks one-finger orbit on
   phones. This has bitten this codebase before.
   -------------------------------------------------------------------------- */

.stage__3d {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.stage.is-3d .stage__3d { opacity: 1; }

.stage__canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.stage__load {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(240px, 60%);
  text-align: center;
  transition: opacity .35s ease;
}
.stage__load[hidden] { display: none; }
.stage__load.is-done { opacity: 0; }

.stage__loadLabel {
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}
.stage__loadBar {
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  overflow: hidden;
}
.stage__loadBar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width .25s ease;
}

.stage__hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .5s ease .2s;
}
.stage__hint.is-on { opacity: 1; }
.stage__hint[hidden] { display: none; }

/* Marker layer floats over whichever artwork is showing. */
.markers {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* only the badges themselves are clickable */
}
.marker { pointer-events: auto; }

/* In 3D mode the loop writes --mx / --my every frame. Position rides on the
   `translate` property, which composites outside `transform`, so the hover
   scale below keeps working and keeps its easing. */
.markers.is-3d .marker {
  left: 0;
  top: 0;
  translate: var(--mx, -100px) var(--my, -100px);
  z-index: var(--mz, 1);
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease,
              opacity .18s ease;
}
.markers.is-3d .marker:hover,
.markers.is-3d .marker:focus-visible,
.markers.is-3d .marker.is-active { z-index: 9999; }

.markers.is-3d .marker.is-behind {
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s linear, visibility 0s linear .12s;
}

/* SVG spot regions , invisible until hovered/focused, then outlined.
   Sold spots keep a permanent tint so they read as different. */
.region {
  fill: #ffffff;
  fill-opacity: 0;
  stroke: #ffffff;
  stroke-opacity: 0;
  stroke-width: 2.5;
  cursor: pointer;
  pointer-events: all;          /* thin regions stay clickable */
  transition: fill-opacity .16s ease, stroke-opacity .16s ease;
}
.region--ring { fill: none; }

.region.is-taken { fill-opacity: .045; stroke-opacity: 0; }
.region.is-taken.region--ring { stroke-opacity: .12; }

.region:hover,
.region.is-active {
  fill-opacity: .22;
  stroke-opacity: .9;
}
.region--ring:hover,
.region--ring.is-active { stroke-opacity: .55; }

/* Sponsor wordmarks painted onto sold panels. */
.wordmark {
  fill: #ffffff;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.05em;
  fill-opacity: .72;
  pointer-events: none;
  user-select: none;
}

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(16,17,20,.18);
  box-shadow: 0 2px 8px rgba(16,17,20,.22);
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease;
}
.marker:hover,
.marker:focus-visible,
.marker.is-active {
  transform: translate(-50%, -50%) scale(1.22);
  box-shadow: 0 4px 14px rgba(16,17,20,.32);
  z-index: 3;
}
.marker.is-taken {
  background: var(--live);
  border-color: var(--live);
  color: #fff;
}

/* Marker tooltip , desktop affordance only; tap opens the panel directly. */
.marker__tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.marker__tip b { font-weight: 600; }
.marker:hover .marker__tip,
.marker:focus-visible .marker__tip { opacity: 1; }

@media (hover: none) { .marker__tip { display: none; } }

/* --------------------------------------------------------------------------
   Spot grid
   -------------------------------------------------------------------------- */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sec-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: -0.035em;
  font-weight: 620;
}
.sec-head p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.spots-sec { padding: 46px 0 20px; }

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.spot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font: inherit;
  padding: 14px 14px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s cubic-bezier(.22,1,.36,1),
              box-shadow .15s ease;
}
.spot:hover,
.spot:focus-visible,
.spot.is-active {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,17,20,.07);
}

.spot__n {
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.spot__brand {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.spot__brand.is-open { color: var(--ink-faint); font-weight: 500; }
.spot__name { font-size: 11.5px; color: var(--ink-faint); }
.spot__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.spot__price { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.spot__status { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.spot__status.is-winning { color: var(--live); }

/* --------------------------------------------------------------------------
   Detail panel (dialog)
   -------------------------------------------------------------------------- */

.backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16,17,20,.34);
  display: grid; place-items: end center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.backdrop[hidden] { display: none; }
.backdrop.is-open { opacity: 1; }

@media (min-width: 720px) { .backdrop { place-items: center; } }

.panel {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 24px 60px rgba(16,17,20,.18);
  transform: translateY(14px);
  transition: transform .24s cubic-bezier(.22,1,.36,1);
}
.backdrop.is-open .panel { transform: none; }

.panel__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.panel__n {
  font-size: 12px; font-weight: 650; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.panel h3 {
  margin: 6px 0 0;
  font-size: 1.45rem; letter-spacing: -0.035em; font-weight: 640; line-height: 1.15;
}
.panel__close {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 17px; line-height: 1;
}
.panel__close:hover { border-color: var(--ink); color: var(--ink); }

.meta { margin: 20px 0 0; display: grid; gap: 0; }
.meta div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.meta dt { color: var(--ink-soft); margin: 0; }
.meta dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; text-align: right; }
.meta dd.is-winning { color: var(--live); }

.panel .btn { width: 100%; margin-top: 20px; }
.panel__note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Value props + closing CTA + footer
   -------------------------------------------------------------------------- */

.props { padding: 60px 0; }
.props__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.prop svg { display: block; margin-bottom: 14px; color: var(--ink); }
.prop h3 { margin: 0 0 6px; font-size: 15px; font-weight: 620; letter-spacing: -0.02em; }
.prop p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 34ch; }

.close-cta { padding: 20px 0 90px; text-align: center; }
.close-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.04em; font-weight: 640;
}
.close-cta p { margin: 0 0 26px; color: var(--ink-soft); }

.foot {
  border-top: 1px solid var(--line);
  padding: 28px 0 44px;
  font-size: 13px;
  color: var(--ink-faint);
}
.foot__inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* Licence obligation for the 3D model. Quiet, but it has to be here. */
.foot__credit { color: var(--ink-faint); }
.foot__credit a { text-decoration: underline; text-underline-offset: 2px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   How it works , three numbered steps
   -------------------------------------------------------------------------- */

.steps { padding: 58px 0 10px; }
.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.step__n {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.step h3 { margin: 0 0 6px; font-size: 16px; font-weight: 620; letter-spacing: -0.022em; }
.step p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 36ch; }

/* --------------------------------------------------------------------------
   Leaderboard
   -------------------------------------------------------------------------- */

.board-sec { padding: 58px 0 10px; }

.board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 460px;
}
.board caption { text-align: left; color: var(--ink-soft); font-size: 13px; padding-bottom: 12px; }
.board th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.board td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.board tr:last-child td { border-bottom: 0; }
.board tbody tr { transition: background-color .15s ease; }
.board tbody tr:hover { background: rgba(16,17,20,.024); }

.board__rank {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--ink-faint);
  width: 1%;
  white-space: nowrap;
}
.board__rank.is-top { color: var(--live); }
.board__member { font-weight: 550; letter-spacing: -0.015em; }
.board__pts { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.board__spot { color: var(--ink-soft); }

.board__more {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Join panel form bits
   -------------------------------------------------------------------------- */

.field { margin-top: 18px; text-align: left; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }

.copyrow { display: flex; gap: 8px; align-items: stretch; }
.copyrow .input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.copyrow .btn { margin: 0; width: auto; flex: 0 0 auto; padding-inline: 16px; }

.result[hidden] { display: none; }

.panel__hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.panel__hint b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.oops { padding: 100px 0 120px; text-align: center; }
.oops h1 {
  margin: 0 0 12px;
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  letter-spacing: -0.05em; font-weight: 640; line-height: 1;
}
.oops p { margin: 0 auto 30px; max-width: 46ch; color: var(--ink-soft); }
.oops .stage { max-width: 560px; margin-bottom: 34px; opacity: .5; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

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

@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .props__grid { grid-template-columns: 1fr; gap: 28px; }
  .steps__grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 700px) {
  /* Links collapse so brand + CTA always stay on one line. */
  .nav__links { display: none; }
  .hero { padding-top: 36px; }
  .fund__row { align-items: flex-end; }
}

@media (max-width: 760px) {
  /* A phone screen is tall, so give the car more height to be turned in. */
  .stage.is-3d { aspect-ratio: 5 / 4; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 18px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .marker { width: 26px; height: 26px; font-size: 11px; }
  .spot { padding: 12px; }
  .btn { padding: 10px 16px; }
  .nav__inner { gap: 10px; min-height: 58px; }
  .nav__brand { font-size: 16px; }
  .stage-sec { padding-top: 30px; }
}

@media (max-width: 480px) {
  /* Keeps brand + CTA comfortably on one line on a 390px phone. */
  .nav__brand span { display: none; }
}

/* ==========================================================================
   Overflow guards.

   The 3D marker loop writes screen-space offsets every frame. If a marker ever
   lands outside the stage it used to widen the whole document, which gave the
   page a horizontal scrollbar on a phone and made the layout look slanted.
   The loop now clamps its own coordinates; these rules are the backstop.
   ========================================================================== */
/* Superseded by the layout hardening block at the end of this file.
   `overflow-x: clip` on <html> was not enough on its own: it hides the
   scrollbar but the document still lays out at the wider size. */
html, body { max-width: 100%; }

.stage { overflow: hidden; }
.markers { overflow: hidden; }

/* Hover does not exist on touch devices, so the tooltip can only get in the
   way there. Tapping a marker opens the real panel instead. */
@media (hover: none) {
  .marker__tip { display: none !important; }
}

/* ==========================================================================
   Project card inside the slot panel.
   Shown when a slot is taken: who is on that panel and what they have earned.
   ========================================================================== */
.proj {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.proj__logo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.proj__body { flex: 1 1 auto; min-width: 0; }

.proj__name {
  margin: 0;
  font-weight: 640;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.proj__url {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.proj__desc {
  margin: 7px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.proj__pts {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.proj__ptsnum {
  font-size: 22px;
  font-weight: 660;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.proj__ptslab {
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  .proj { flex-wrap: wrap; }
  .proj__pts { width: 100%; text-align: left; align-items: flex-start; margin-top: 4px; }
}

/* ==========================================================================
   The flat vector car is a FALLBACK, never the first thing you see.

   It lives in the HTML so the page still works without WebGL, but showing it
   on load meant every visitor got a flash of the old 2D drawing before the
   real car arrived. Hidden by default; the script reveals it only if 3D fails.
   ========================================================================== */
.stage__art { display: none; }
.stage.is-fallback .stage__art { display: block; }

/* The old 2D number pins must never be visible in 3D mode, not even during the
   download. They used to sit scattered over an empty stage next to "Loading the
   car", because the script only hid them once the model had arrived. The layer
   is switched off the moment 3D mode starts and only comes back if 3D fails. */
.markers.is-3d { display: none; }

/* ==========================================================================
   LAMBORGHINI THEME
   Dark, sharp, gold. Overrides the light theme above.

   The brand language is: near-black space, hard edges (no soft rounding),
   a single gold accent used sparingly, and uppercase labels with wide tracking.
   Separation still comes from hairline rules, never filled grey boxes.
   ========================================================================== */
:root {
  --paper:       #0a0a0b;
  --card:        #101012;
  --ink:         #f6f6f5;
  --ink-soft:    #a4a4a9;
  --ink-faint:   #6e6e75;
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.20);
  --live:        #d8a63a;                /* gold replaces the green */
  --live-soft:   rgba(216,166,58,0.14);
  --focus:       #d8a63a;

  /* Hard edges. A Lamborghini has no rounded corners. */
  --r-sm: 2px;
  --r-md: 3px;
  --r-pill: 2px;
}

body { background: var(--paper); color: var(--ink); }

/* --- Typography: tighter, harder ---------------------------------------- */
h1 {
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-transform: uppercase;
  font-weight: 800;
}
h2 { letter-spacing: -0.02em; text-transform: uppercase; font-weight: 750; }

.hero__sub { color: var(--ink-soft); }

/* Small labels become spec-sheet captions. */
.fund__raised small,
.proj__ptslab,
.spot__n,
.panel__n,
.lb thead th {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  color: var(--ink-faint);
}

/* --- Status pill: a gold hairline, not a grey chip ----------------------- */
.status {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.dot { background: var(--live); }

/* --- Buttons: sharp, gold on black --------------------------------------- */
.btn {
  border-radius: 0;
  background: var(--live);
  color: #0a0a0b;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12.5px;
  border: 1px solid var(--live);
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: transparent; color: var(--live); }

/* --- Cards: black with a hairline, gold edge when claimed ---------------- */
.spot, .proj, .panel {
  background: var(--card);
  border-radius: var(--r-sm);
  border-color: var(--line);
}
.spot { transition: border-color .18s ease, transform .18s ease; }
.spot:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.spot.is-claimed { border-left: 2px solid var(--live); }

.is-winning, .spot__status.is-winning { color: var(--live); }

/* --- Progress bar: a thin gold line -------------------------------------- */
.bar { background: rgba(255,255,255,0.08); border-radius: 0; height: 2px; }
.bar__fill { background: var(--live); border-radius: 0; }

/* --- The car sits in true black so the paint reads --------------------- */
.stage {
  background: #08080a;
  border-color: var(--line);
  border-radius: var(--r-sm);
}

/* --- Leaderboard: spec sheet -------------------------------------------- */
.lb td, .lb th { border-color: var(--line); }
.lb tbody tr:hover { background: rgba(255,255,255,0.03); }

/* --- Nav ----------------------------------------------------------------- */
.nav { background: rgba(10,10,11,0.86); border-bottom: 1px solid var(--line); }
.nav__brand { letter-spacing: 0.02em; text-transform: uppercase; font-weight: 800; }
.nav__links a { color: var(--ink-soft); }
.nav__links a:hover { color: var(--live); }

/* --- Sound toggle, bottom-right of the stage ----------------------------- */
.sfx {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: rgba(10,10,11,0.72);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font: 600 10px/1 var(--font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.sfx:hover { color: var(--live); border-color: var(--live); }
.sfx__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sfx__bars i { width: 2px; background: currentColor; height: 4px; display: block; }
.sfx.is-on .sfx__bars i:nth-child(1) { animation: eq .6s ease-in-out infinite alternate; }
.sfx.is-on .sfx__bars i:nth-child(2) { height: 11px; animation: eq .45s ease-in-out infinite alternate; }
.sfx.is-on .sfx__bars i:nth-child(3) { height: 7px; animation: eq .75s ease-in-out infinite alternate; }
@keyframes eq { from { height: 3px; } to { height: 11px; } }

@media (prefers-reduced-motion: reduce) {
  .sfx.is-on .sfx__bars i { animation: none; }
}

/* ==========================================================================
   LAYOUT HARDENING

   The page was laying out wider than the phone, so every section sat flush to
   the edges with the right-hand column cut off. Two causes: a grid or flex
   child refusing to shrink below its content, and the leaderboard table
   demanding more width than the screen. Both widen the whole document.
   ========================================================================== */

/* A grid/flex item defaults to min-width:auto, so one long unbreakable string
   can force its whole track wider than the viewport. This is the standard cure. */
*, *::before, *::after { min-width: 0; }

html { overflow-x: hidden; }
body  { overflow-x: hidden; width: 100%; max-width: 100vw; }

.wrap {
  padding-inline: clamp(16px, 4.5vw, 24px);
  max-width: min(var(--w-page), 100%);
}

/* Nothing may exceed its container. */
img, svg, canvas, video, table { max-width: 100%; }

/* The table scrolls inside its own box instead of stretching the page. */
.lb { width: 100%; table-layout: fixed; }
.lb th, .lb td { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  /* Panel-held column is the first thing worth dropping on a narrow screen. */
  .lb th:nth-child(4), .lb td:nth-child(4) { display: none; }
}

/* ==========================================================================
   CONTRAST FIX: form controls do not inherit colour.

   The spot cards are <button> elements styled with `font: inherit`. That copies
   the font but NOT the colour, so they fell back to the browser's default
   button text, which is near-black. Under the old light theme that happened to
   look correct. On black it made the claimed cards unreadable: the holder name
   and the points vanished, while the elements that DID set a colour explicitly
   (Unclaimed, Open, panel names) stayed visible. That is why only some of the
   text disappeared.
   ========================================================================== */
button, input, select, textarea { color: inherit; }

.spot,
.spot__brand,
.spot__price { color: var(--ink); }

.spot__brand.is-open { color: var(--ink-soft); }
.spot__n,
.spot__name { color: var(--ink-faint); }

/* A near-black shadow is invisible on a near-black page; lift the border instead. */
.spot:hover,
.spot:focus-visible,
.spot.is-active {
  border-color: var(--live);
  box-shadow: none;
}

/* Same trap anywhere else a control was left to the UA default. */
.marker, .panel__close, .sfx { color: inherit; }

/* Leaderboard identity: project name first, the person who holds it underneath.
   Previously the board listed only handles while the car carried project names,
   so nothing lined up between the two. */
.board__proj { display: block; font-weight: 600; }
.board__by   { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }

.field__opt { color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Live project preview in the submit form.
   Built from the URL alone, so it appears as you type with no network wait.
   -------------------------------------------------------------------------- */
.prev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: -2px 0 16px;
  border: 1px solid var(--line);
  background: var(--card);
}
.prev__icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-content: center;
  background: var(--live);
  color: #0a0a0b;
  font-weight: 700; font-size: 13px;
}
.prev__icon img { position: absolute; inset: 6px; width: 22px; height: 22px; display: none; }
.prev__body { flex: 1 1 auto; min-width: 0; }
.prev__name { display: block; font-weight: 600; font-size: 15px; }
.prev__host { display: block; font-size: 12px; color: var(--ink-faint); }
.prev__edit {
  flex: 0 0 auto;
  background: none; border: 0; padding: 4px 2px;
  color: var(--ink-faint); font: inherit; font-size: 12px;
  text-decoration: underline; cursor: pointer;
}
.prev__edit:hover { color: var(--live); }

/* A real favicon should not sit on a coloured square. The tile exists only to
   give the monogram a background, so it disappears once an icon loads. */
.prev__icon.has-icon { background: rgba(255,255,255,0.06); border: 1px solid var(--line); }
.prev__icon.has-icon b { display: none; }
.prev__icon.has-icon img { display: block; }
.prev__icon img { display: none; }

/* --------------------------------------------------------------------------
   Dialogs must fit the phone. The submit panel was running off the right edge,
   cutting the button and the note in half.
   -------------------------------------------------------------------------- */
.backdrop {
  display: none;
  padding: 16px;
}
.backdrop:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel {
  width: 100%;
  max-width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Project logo, used identically on the cards, the leaderboard and the panel.
   The letters sit underneath; a real favicon covers them once it loads, so a
   missing or slow icon never leaves an empty square.
   -------------------------------------------------------------------------- */
.plogo {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-content: center;
  width: var(--plogo-size, 22px);
  height: var(--plogo-size, 22px);
  background: var(--plogo-bg, var(--live));
  color: #0a0a0b;
  font-size: calc(var(--plogo-size, 22px) * 0.42);
  font-weight: 700;
  line-height: 1;
  border-radius: 3px;
  overflow: hidden;
}
.plogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.plogo.has-icon { background: rgba(255,255,255,0.06); }
.plogo.has-icon img { display: block; }
.plogo.has-icon b { visibility: hidden; }

.spot__head  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.board__cell { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* The panel block is bigger, so let the icon breathe inside it. */
.proj__logo.has-icon { background: rgba(255,255,255,0.06); }
.proj__logo img { display: none; }
.proj__logo.has-icon img { display: block; position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: contain; }
.proj__logo.has-icon b { display: none; }
.proj__logo { position: relative; }

/* The icon must be a real, laid-out element or the browser may never fetch it.
   `display: none` plus lazy loading meant it was never requested at all, so the
   letters stayed until a refresh warmed the cache. Fade it in instead. */
.plogo img {
  display: block !important;
  opacity: 0;
  transition: opacity .18s ease;
}
.plogo.has-icon img { opacity: 1; }
.plogo.has-icon b { visibility: hidden; }

/* --------------------------------------------------------------------------
   Claim band. The single most important call to action on the page, so it gets
   its own full-width strip directly under the car rather than living as a
   button in the corner of the nav.
   -------------------------------------------------------------------------- */
.claimband {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(216,166,58,0.07), rgba(216,166,58,0.02));
  margin-top: 34px;
}
.claimband__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding-block: 52px;
}
.claimband__copy { max-width: 62ch; }
.claimband__eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--live);
}
.claimband h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.claimband__sub {
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.7vw, 17px);
  max-width: 58ch;
}
.claimband__sub b { color: var(--ink); }
.claimband__sub code {
  color: var(--ink);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--line);
  padding: 2px 7px;
  font-size: 13px;
  white-space: nowrap;
}
.claimband__action { text-align: center; }
.claimband__note { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }

@media (max-width: 760px) {
  .claimband__inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .claimband__action { text-align: left; }
  .claimband__action .btn { width: 100%; }
  .claimband__sub code { white-space: normal; }
}

/* The band is the hero action, so give the button real presence and centre it.
   Sitting right-aligned in a row made it read as a footnote. */
.claimband h2 { font-size: clamp(1.7rem, 4.4vw, 3rem); }
.claimband__action .btn {
  font-size: 15px;
  padding: 17px 40px;
  letter-spacing: 0.1em;
}
.claimband__action .btn:hover { transform: translateY(-1px); }
.claimband__note { margin-top: 12px; }
.claimband__note b { color: var(--live); }

@media (max-width: 760px) {
  .claimband__inner { align-items: center; text-align: center; }
  .claimband__action { text-align: center; }
}

/* ==========================================================================
   Spot grid and leaderboard: a pass for hierarchy.

   Both sections worked but read flat. Twenty-five identical hairline boxes at
   a 12px gap gave the eye nothing to land on, and the board listed rank one the
   same weight as rank twenty-four, so the thing the whole competition is about
   was invisible. Nothing decorative added here: it is spacing, weight and one
   accent doing the work.
   ========================================================================== */

/* --- The wall of panels ------------------------------------------------- */

.grid { gap: 14px; }

.spot {
  padding: 16px 16px 17px;
  gap: 7px;
  /* A hair of lift off the page so the cards read as objects, not table cells. */
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
}

/* Claimed panels are held by someone; open ones are an invitation. Make that
   difference visible before anyone reads a word. */
.spot.is-claimed {
  border-left-width: 2px;
  background: linear-gradient(180deg, rgba(216,166,58,.055), rgba(255,255,255,.008));
}
.spot:not(.is-claimed) {
  border-style: dashed;
  background: transparent;
}
.spot:not(.is-claimed):hover { border-style: solid; }

.spot__n {
  font-size: 10.5px;
  letter-spacing: .13em;
  opacity: .75;
}
.spot__brand { font-weight: 600; letter-spacing: -0.01em; }
.spot__name { font-size: 11.5px; letter-spacing: .01em; }
.spot__price { font-variant-numeric: tabular-nums; font-weight: 650; }

/* --- The board ----------------------------------------------------------- */

.board { font-size: 14.5px; }

.board th {
  font-size: 10.5px;
  letter-spacing: .13em;
  padding-bottom: 12px;
}

.board td { padding: 15px 16px 15px 0; }

/* Rank is the point of the table, so give it real presence and reserve the
   accent for the places actually being fought over. */
.board__rank {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  padding-right: 20px;
}
.board__rank.is-top { color: var(--live); }
.board tbody tr:nth-child(-n+3) .board__rank { color: var(--live); }

/* The leader gets a single quiet gold edge. One row, one accent, no medals. */
.board tbody tr:first-child { background: rgba(216,166,58,.045); }
.board tbody tr:first-child .board__proj { font-weight: 700; }
.board tbody tr:first-child td:first-child { box-shadow: inset 2px 0 0 var(--live); }

.board tbody tr:hover { background: rgba(255,255,255,.035); }

.board__pts { font-size: 15px; font-weight: 700; }
.board__spot { font-size: 13px; letter-spacing: .01em; }
.board__proj { letter-spacing: -0.012em; }

@media (max-width: 720px) {
  .grid { gap: 10px; }
  .spot { padding: 13px 13px 14px; }
  .board td { padding: 12px 12px 12px 0; }
}