.lot-a11y-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.lot-side {
  --lot-viewbox-min-height: clamp(150px, 28vh, 230px);
  --lot-side-gap: 10px;
}

.lot-viewbox-with-paint {
  --lot-paint-rail-height: 54px;
  flex: 1 1 auto;
  min-height: clamp(150px, 28vh, 230px);
  overflow: hidden;
}

.lot-viewbox-with-paint .lot-viewbox-head {
  justify-content: flex-start;
}

.lot-viewbox-with-paint .lot-view-host {
  inset: 0 0 var(--lot-paint-rail-height);
  height: auto;
}

.lot-viewbox-with-paint .lot-view-host canvas {
  inset: 0;
  width: 100%;
  height: 100%;
}

.lot-viewbox-with-paint > small {
  bottom: calc(var(--lot-paint-rail-height) + 7px);
}

.lot-viewbox-with-paint .lot-colors {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: var(--lot-paint-rail-height);
  margin: 0;
  padding: 7px 8px;
  grid-template-columns: 1fr;
  border-top: 3px solid var(--ink);
  background: rgb(255 248 232 / 0.98);
}

.lot-viewbox-with-paint .lot-colors:has(.lot-color-control:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lot-viewbox-with-paint .lot-color-control {
  min-width: 0;
  min-height: 37px;
  box-shadow: none;
}

.lot-car-title > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lot-stats-help {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: lowercase;
}

.lot-secret-notice {
  margin: 8px 0 0;
  padding: 7px 8px 8px;
  background: #d9f5c2;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
}

.lot-secret-notice[hidden] {
  display: none;
}

.lot-secret-notice-chip {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.lot-secret-notice p {
  margin: 0;
  font-size: 0.5rem;
  line-height: 1.24;
}

.lot-screen.is-super-sedan-unlocked .lot-card {
  display: flex;
  flex-direction: column;
}

.lot-screen.is-super-sedan-unlocked .lot-side {
  --lot-viewbox-min-height: clamp(132px, 22vh, 176px);
}

.lot-screen.is-super-sedan-unlocked .lot-viewbox-with-paint {
  min-height: clamp(132px, 22vh, 176px);
}

/*
  The side rail is viewport-bounded. Copy can grow as cars gain perks, secrets,
  translated labels or larger text, so the information card must yield before
  it can push the primary action below the screen. The 3D panel keeps its
  protected minimum; overflow stays inside the card as a last-resort fallback.
*/
.lot-card {
  min-height: 0;
  max-height: calc(100% - var(--lot-viewbox-min-height) - var(--lot-side-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/*
  Keep the sticky action footprint close to the button itself. The negative
  edge margins reclaim most of the card padding while the transparent shell
  avoids masking stats as they pass behind the sticky action during scrolling.
*/
.lot-card-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  grid-template-columns: 1fr;
  margin: 1px -6px -3px;
  padding: 0 6px 3px;
  background: transparent;
}

.lot-race {
  background: var(--pink);
}

@media (max-height: 520px) {
  .lot-side {
    --lot-viewbox-min-height: 140px;
    --lot-side-gap: 7px;
    top: max(62px, calc(env(safe-area-inset-top) + 54px));
    gap: 7px;
  }

  .lot-viewbox {
    border-width: 3px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .lot-viewbox-with-paint {
    --lot-paint-rail-height: 50px;
    min-height: 140px;
  }

  .lot-screen.is-super-sedan-unlocked .lot-side {
    --lot-viewbox-min-height: 112px;
  }

  .lot-screen.is-super-sedan-unlocked .lot-viewbox-with-paint {
    min-height: 112px;
  }

  .lot-viewbox-with-paint .lot-colors {
    gap: 5px;
    padding: 5px 6px;
  }

  .lot-viewbox-with-paint .lot-color-control {
    min-height: 35px;
    padding: 3px 6px;
  }

  .lot-viewbox-with-paint > small {
    bottom: calc(var(--lot-paint-rail-height) + 5px);
  }

  .lot-card {
    padding: 9px;
    border-width: 3px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .lot-car-title {
    padding-bottom: 5px;
  }

  .lot-car-description {
    margin-top: 5px;
    line-height: 1.25;
  }

  .lot-stats {
    gap: 2px;
    margin: 6px 0;
  }

  .lot-stat {
    grid-template-columns: 68px 1fr;
    gap: 6px;
  }

  .lot-stat > span {
    font-size: 0.43rem;
  }

  .lot-stat i {
    height: 6px;
  }

  .lot-secret-notice {
    margin-top: 6px;
    padding: 6px 7px 7px;
    border-width: 2px;
  }

  .lot-secret-notice-chip {
    margin-bottom: 3px;
    padding: 2px 6px;
    border-width: 1.5px;
    font-size: 0.36rem;
  }

  .lot-secret-notice p {
    font-size: 0.43rem;
    line-height: 1.18;
  }

  .lot-card-actions {
    margin: 1px -5px -3px;
    padding: 0 5px 3px;
  }
}

@media (max-height: 430px) {
  .lot-side {
    --lot-viewbox-min-height: 120px;
    --lot-side-gap: 7px;
  }

  .lot-viewbox-with-paint {
    --lot-paint-rail-height: 47px;
    min-height: 120px;
    flex-basis: auto;
  }

  .lot-screen.is-super-sedan-unlocked .lot-side {
    --lot-viewbox-min-height: 96px;
  }

  .lot-screen.is-super-sedan-unlocked .lot-viewbox-with-paint {
    min-height: 96px;
  }

  .lot-viewbox-with-paint .lot-colors {
    gap: 5px;
    padding: 5px 6px;
  }

  .lot-viewbox-with-paint .lot-color-control {
    min-height: 33px;
    padding: 3px 6px;
  }

  .lot-viewbox-with-paint > small {
    bottom: calc(var(--lot-paint-rail-height) + 5px);
  }

  .lot-secret-notice {
    margin-top: 4px;
    padding: 5px 6px;
  }

  .lot-secret-notice-chip {
    display: none;
  }

  .lot-secret-notice p {
    font-size: 0.4rem;
    line-height: 1.13;
  }

  .lot-card-actions {
    margin: 1px -5px -2px;
    padding: 0 5px 2px;
  }
}