/* CapeDrive Garage — the garage photo fills the window, the HUD keeps the proportions of the
   original game screen on a 1280x720 canvas scaled to fit on top of it. Portrait phones drop the
   canvas and lay the same elements out as a normal column (see the media query at the bottom). */

:root {
  --green: #b9e755;
  --green-hot: #8fd400;
  --green-glow: rgba(150, 220, 60, 0.55);
  --spec: rgba(150, 176, 120, 0.75);
  --glass: rgba(150, 156, 148, 0.42);
  --ink: #e9efe2;
  --font: 'Chakra Petch', 'Saira Condensed', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #05060a;
  overflow: hidden;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

#viewport {
  position: fixed;
  inset: 0;
  background: #05060a;
}

/* ---------- garage scene: always full window ---------- */

.podium { position: fixed; inset: 0; z-index: 0; }

/* only used by the portrait layout, where it reserves the strip for the car */
.stage-gap { display: none; }

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.32s ease;
  will-change: transform;
}

.scene.on { opacity: 1; }

/* images must not swallow the pointer: the native image drag fires pointercancel and kills the swipe */
.scene img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.scene .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

/* cutout car standing on the shared garage plate. The render is studio-lit and drawn nearly frame
   wide with its wheels on the canvas line y=760 (0.84 of the height), so here it is toned down,
   shrunk to the size of a car on the turntable and moved onto the podium surface. */
.scene.cutout .plate {
  filter: brightness(0.94) contrast(1.04) blur(0.6px);
}

/* the transform itself is per car and comes from fit.json via cars.js — see app.js */
.scene.cutout .car-body {
  filter: brightness(0.76) contrast(1.12) saturate(0.86);
}

/* the shadow and the glow belong to the car, so they ride in the same holder */
.car-holder { position: absolute; inset: 0; }

.scene.cutout .contact-shadow,
.scene.cutout .underglow {
  position: absolute;
  left: 51%;
  transform: translateX(-50%);
  pointer-events: none;
}

.scene.cutout .contact-shadow {
  top: 73.3%;
  width: 40%;
  height: 8.4%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0));
  filter: blur(8px);
}

.scene.cutout .underglow {
  top: 75.1%;
  width: 30%;
  height: 4.8%;
  background: radial-gradient(closest-side, rgba(150, 225, 60, 0.6), rgba(150, 225, 60, 0));
  filter: blur(9px);
  animation: glowPulse 3.8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* the car flies across the podium when you flip to the next one */
.scene.enter-left .car-holder { animation: carInLeft 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.scene.enter-right .car-holder { animation: carInRight 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.scene.leave-left .car-holder { animation: carOutLeft 0.42s cubic-bezier(0.45, 0.05, 0.75, 0.35) both; }
.scene.leave-right .car-holder { animation: carOutRight 0.42s cubic-bezier(0.45, 0.05, 0.75, 0.35) both; }

@keyframes carInLeft {
  from { transform: translateX(-46%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes carInRight {
  from { transform: translateX(46%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes carOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-46%); opacity: 0; }
}

@keyframes carOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(46%); opacity: 0; }
}

/* cars that come as a whole render slide as one frame — the extra scale keeps the edges covered */
.scene.photo.enter-left .car-holder { animation: photoInLeft 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.scene.photo.enter-right .car-holder { animation: photoInRight 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.scene.photo.leave-left .car-holder,
.scene.photo.leave-right .car-holder { animation: none; }

@keyframes photoInLeft {
  from { transform: translateX(-7%) scale(1.16); opacity: 0.35; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes photoInRight {
  from { transform: translateX(7%) scale(1.16); opacity: 0.35; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* car still on gameplay footage: crisp podium strip, blurred copy fills the rest */
.scene .blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.42) blur(7px) saturate(0.85);
  transform: scale(1.08);
}

.scene .band {
  position: absolute;
  left: 0;
  top: 27%;
  width: 100%;
  height: 56%;
  object-fit: cover;
}

/* keeps the HUD readable over any photo, on any screen shape */
.scrim {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.scrim-top {
  top: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(3, 5, 2, 0.82), rgba(3, 5, 2, 0.35) 55%, rgba(3, 5, 2, 0));
}

.scrim-bottom {
  bottom: 0;
  height: 34%;
  background:
    radial-gradient(120% 130% at 50% 120%, rgba(214, 138, 32, 0.2), rgba(214, 138, 32, 0) 60%),
    linear-gradient(to top, rgba(4, 4, 3, 0.92), rgba(4, 4, 3, 0.45) 45%, rgba(4, 4, 3, 0));
}

/* ---------- HUD canvas ---------- */

#screen {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grab;
}

#screen.dragging { cursor: grabbing; }

/* ---------- title and top track ---------- */

.title {
  position: absolute;
  left: 207px;
  top: 33px;
  font-size: 30px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.4px;
  color: var(--green);
  text-shadow: 0 0 14px var(--green-glow), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* class switcher — the game flips car categories in exactly this spot */
.category {
  position: absolute;
  right: 207px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-name {
  min-width: 132px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: #f2f7e9;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.cat-arrow {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(232, 238, 226, 0.6);
  border-radius: 50%;
  background: rgba(30, 34, 28, 0.35);
  color: #eff4e7;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cat-arrow:hover,
.cat-arrow:focus-visible {
  outline: none;
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px var(--green-glow);
}

.track {
  position: absolute;
  left: 207px;
  top: 76px;
  width: 866px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(to bottom, rgba(120, 126, 118, 0.55), rgba(70, 76, 68, 0.5));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.track-knob {
  position: absolute;
  top: -2px;
  left: 0;
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: #f2f6ec;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  transition: left 0.3s ease;
}

/* ---------- brand panel ---------- */

.panel {
  position: absolute;
  left: 200px;
  top: 88px;
  width: 880px;
  height: 113px;
  border-radius: 9px;
  background:
    linear-gradient(to bottom, rgba(196, 201, 193, 0.5) 0%, rgba(150, 156, 148, 0.44) 55%, rgba(120, 126, 118, 0.42) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* manufacturer tile — the game shows a logo here, brands without a mark get their name typed in */
.brand-tile {
  position: absolute;
  left: 101px;
  top: 4px;
  width: 202px;
  height: 94px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 7px;
  background: linear-gradient(to bottom, rgba(38, 42, 36, 0.72), rgba(18, 20, 16, 0.8));
  color: #eef3e6;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.brand-tile.long { font-size: 17px; letter-spacing: 1px; }

.brand-tile img {
  max-width: 130px;
  max-height: 62px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

/* model wordmark — big ghost lettering pressed into the glass, like the game panel */
.model {
  position: absolute;
  left: 330px;
  right: 90px;
  top: 12px;
  text-align: right;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.model.out-left { opacity: 0; transform: translateX(-34px); }
.model.out-right { opacity: 0; transform: translateX(34px); }

.model-sub {
  font-size: 21px;
  font-weight: 600;
  color: rgba(58, 63, 55, 0.72);
  letter-spacing: 0.6px;
}

.model-name {
  margin-top: -4px;
  font-size: 48px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  color: rgba(44, 49, 42, 0.82);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

/* pulsing selection frame around the manufacturer tile */
.logo-frame {
  position: absolute;
  left: 101px;
  top: 4px;
  width: 202px;
  height: 94px;
  border: 2px solid var(--green);
  border-radius: 7px;
  box-shadow: 0 0 10px var(--green-glow), inset 0 0 10px rgba(150, 220, 60, 0.18);
  animation: framePulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes framePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.arrow {
  position: absolute;
  top: 33px;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(232, 238, 226, 0.65);
  border-radius: 50%;
  background: rgba(30, 34, 28, 0.25);
  color: #eff4e7;
  font-family: var(--font);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.arrow-prev { left: 15px; }
.arrow-next { right: 15px; }

.arrow:hover,
.arrow:focus-visible {
  outline: none;
  color: var(--green);
  border-color: var(--green);
  background: rgba(150, 220, 60, 0.16);
  box-shadow: 0 0 14px var(--green-glow);
}

.arrow:active { background: rgba(150, 220, 60, 0.3); }

/* ---------- status and price ---------- */

.slot {
  position: absolute;
  left: 300px;
  top: 206px;
  font-size: 24px;
  font-weight: 600;
  font-style: italic;
  color: var(--green);
  text-shadow: 0 0 10px var(--green-glow), 0 2px 4px rgba(0, 0, 0, 0.85);
}

.rating {
  position: absolute;
  right: 215px;
  top: 203px;
  text-align: right;
  padding: 4px 10px 6px;
  background: radial-gradient(70% 90% at 60% 50%, rgba(4, 6, 3, 0.72), rgba(4, 6, 3, 0) 72%);
}

.rating-label {
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  color: var(--green);
  text-shadow: 0 0 10px var(--green-glow), 0 2px 4px rgba(0, 0, 0, 0.85);
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.rating-value {
  font-size: 34px;
  font-weight: 700;
  font-style: italic;
  color: #fdfff6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.rating-star {
  font-size: 30px;
  color: var(--green-hot);
  text-shadow: 0 0 12px var(--green-glow);
}

.rating-note {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: rgba(233, 239, 226, 0.72);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* ---------- hire length: the one control that moves the money ---------- */

.hire {
  position: absolute;
  right: 128px;
  top: 300px;
  width: 132px;
  text-align: center;
}

.hire-title {
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #f4f8ec;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.hire-hint {
  margin-left: 4px;
  padding: 1px 5px;
  border: 1px solid rgba(150, 220, 60, 0.55);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--green);
  text-transform: uppercase;
}

.hire-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.hire-step {
  width: 30px;
  height: 24px;
  border: 1px solid rgba(228, 234, 220, 0.45);
  border-radius: 3px;
  background: rgba(12, 14, 10, 0.55);
  color: #eff4e7;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hire-step:hover,
.hire-step:focus-visible {
  outline: none;
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 10px var(--green-glow);
}

.vslider {
  position: relative;
  width: 10px;
  height: 196px;
  border-radius: 5px;
  background: linear-gradient(to right, rgba(60, 66, 58, 0.85), rgba(120, 126, 118, 0.6));
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(150, 220, 60, 0.28);
  cursor: ns-resize;
}

/* wider invisible grab area — the visible track is thin */
.vslider::before {
  content: '';
  position: absolute;
  left: -18px;
  right: -18px;
  top: -8px;
  bottom: -8px;
}

.vslider-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  border-radius: 5px;
  background: linear-gradient(to top, #4d8a00, var(--green-hot));
  box-shadow: 0 0 12px var(--green-glow);
}

.vslider-knob {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #cfd8c4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.75), 0 2px 5px rgba(0, 0, 0, 0.7);
}

.days-label {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: var(--green);
  text-shadow: 0 0 10px var(--green-glow), 0 2px 4px rgba(0, 0, 0, 0.85);
}

/* ---------- car specs: read-only, deliberately flatter than the hire slider ---------- */

/* kept clear of the hire slider on the right */
.stats {
  position: absolute;
  left: 213px;
  top: 592px;
  width: 770px;
  display: flex;
  gap: 40px;
}

.stat { width: 230px; }

.stat-label {
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(226, 233, 214, 0.8);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.stat-value {
  margin-left: 6px;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(226, 233, 214, 0.62);
}

.bar {
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: 7px;
  border-radius: 3px;
  background: rgba(60, 66, 58, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--spec);
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- total and buttons ---------- */

.cash {
  position: absolute;
  left: 213px;
  top: 660px;
}

.cash-total {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: #f7f3e2;
  text-shadow: 0 0 10px rgba(240, 168, 60, 0.45), 0 2px 5px rgba(0, 0, 0, 0.9);
}

.cash-note {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: rgba(233, 228, 208, 0.72);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.buttons { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; }

.btn {
  position: absolute;
  width: 213px;
  height: 25px;
  border: 1px solid rgba(228, 234, 220, 0.5);
  border-radius: 3px;
  background: linear-gradient(to bottom, rgba(40, 44, 38, 0.55), rgba(16, 18, 14, 0.65));
  color: #f3f7ea;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-back { left: 647px; top: 652px; }
.btn-continue { left: 867px; top: 652px; }
.btn-quit { left: 867px; top: 686px; }

.btn:hover,
.btn:focus-visible {
  outline: none;
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px var(--green-glow), inset 0 0 10px rgba(150, 220, 60, 0.12);
}

.btn:active { background: rgba(150, 220, 60, 0.2); }

/* ---------- music + interface sound ---------- */

.audio {
  position: fixed;
  right: 14px;
  top: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-btn {
  padding: 3px 9px;
  border: 1px solid rgba(228, 234, 220, 0.35);
  border-radius: 3px;
  background: rgba(10, 12, 8, 0.5);
  color: rgba(233, 239, 226, 0.7);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
}

.audio-btn:hover { color: var(--green); border-color: var(--green); }
.audio-btn.on { color: var(--green); border-color: rgba(150, 220, 60, 0.7); }

.vol {
  position: relative;
  width: 84px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(to bottom, rgba(120, 126, 118, 0.55), rgba(70, 76, 68, 0.5));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.vol::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: -9px;
  bottom: -9px;
}

.vol-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to bottom, #a4e000, #5f9c00);
}

.vol-knob {
  position: absolute;
  top: -2px;
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: #f2f6ec;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* a phone held sideways has no free corner: the class switcher owns the top right, the total and
   the buttons own the bottom — so the sound controls stack on the left edge */
@media (orientation: landscape) and (max-height: 520px) {
  .audio {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 10px;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .vol { width: 64px; }
}

/* text copy of the fleet: read by crawlers and screen readers, never seen on screen */
.fleet-index {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- capture look ---------- */

.crt {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(120% 120% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.62) 100%);
  mix-blend-mode: multiply;
}

/* white flash fired when the car changes */
#screen::after {
  content: '';
  position: absolute;
  inset: -50vmax;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  pointer-events: none;
}

#screen.flash::after { animation: flash 0.25s ease-out; }

@keyframes flash {
  from { opacity: 0.22; }
  to { opacity: 0; }
}

/* ---------- portrait phone: same elements, ordinary column layout ---------- */

@media (orientation: portrait) and (max-width: 860px) {
  /* The canvas is dropped and the same elements become a plain column. Everything is sized so a
     700px-tall phone fits without scrolling; shorter screens simply scroll. */
  #viewport { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  #screen {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 44px 14px calc(14px + env(safe-area-inset-bottom));
  }

  /* flex-shrink is off everywhere: the panel holds its children absolutely, so a shrinking column
     would squash it to zero height and drop the logo tile onto the blocks below.
     #screen > * beats a bare class selector, so the overrides here stay id-qualified. */
  #screen > * { position: static; flex-shrink: 0; }
  #screen > .panel { position: relative; left: auto; top: auto; }
  /* the headline wrapper hides its children from the rule above, so they are reset explicitly */
  #screen .headline > * { position: static; }

  /* the garage gets its own strip: .stage-gap reserves it in the column and fit() in app.js parks
     the podium exactly on that rectangle, so the car is never covered by a card */
  .stage-gap { display: block; flex: 1 1 auto; min-height: 150px; }
  .podium { bottom: auto; }
  .scene .plate { filter: brightness(0.9) contrast(1.04) blur(0.6px); }

  /* controls sit on their own dark slab — text never has to fight the photo */
  #screen::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    z-index: -1;
    background: linear-gradient(to top, rgba(5, 7, 4, 0.96) 60%, rgba(5, 7, 4, 0.88) 82%, rgba(5, 7, 4, 0));
  }

  .scrim-bottom { display: none; }

  .title { font-size: 21px; padding-left: 2px; }
  .track { display: none; }

  /* class switcher sits under the title as a full-width row */
  .category {
    width: 100%;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(12, 16, 10, 0.6);
  }

  .cat-name { font-size: 16px; }
  .cat-arrow { width: 32px; height: 32px; font-size: 15px; }

  .panel { width: 100%; height: 70px; }

  .brand-tile, .logo-frame { left: 7px; top: 6px; width: 108px; height: 58px; }
  .brand-tile { font-size: 17px; }
  .brand-tile img { max-width: 74px; max-height: 38px; }
  .arrow { top: 17px; width: 36px; height: 36px; font-size: 18px; }
  .arrow-prev { left: 122px; }
  .arrow-next { right: 9px; }
  .model { left: 166px; right: 54px; top: 9px; }
  .model-sub { font-size: 13px; }
  .model-name { font-size: 28px; margin-top: -2px; }

  /* status and price share one row */
  .headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(12, 16, 10, 0.6);
  }

  .slot { font-size: 14px; }

  .rating {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    background: none;
    text-align: right;
  }

  .rating-row { margin: 0; gap: 5px; }
  .rating-value { font-size: 24px; }
  .rating-star { font-size: 18px; }
  .rating-label { display: none; }
  .rating-note { margin: 0; font-size: 12px; }

  /* the slider turns horizontal and the steppers flank it */
  .hire {
    width: 100%;
    margin-top: auto;
    text-align: left;
    padding: 10px 12px 12px;
    border: 1px solid rgba(150, 220, 60, 0.35);
    border-radius: 8px;
    background: rgba(12, 16, 10, 0.62);
  }

  .hire-title { font-size: 15px; }
  .hire-body { flex-direction: row; align-items: center; gap: 10px; margin-top: 8px; }
  .hire-step { width: 44px; height: 34px; font-size: 20px; }
  #days-minus { order: 1; }
  #days-plus { order: 3; }

  .vslider { order: 2; flex: 1; width: auto; height: 12px; cursor: ew-resize; }
  .vslider::before { left: -8px; right: -8px; top: -14px; bottom: -14px; }
  .vslider-fill { top: 0; bottom: auto; height: 100%; width: 40%; }
  .vslider-knob { top: 50%; width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; }
  .days-label { margin-top: 5px; font-size: 17px; }

  .stats {
    width: 100%;
    flex-direction: column;
    gap: 7px;
    padding: 9px 12px 11px;
    border: 1px solid rgba(150, 220, 60, 0.16);
    border-radius: 8px;
    background: rgba(12, 16, 10, 0.55);
  }

  /* name on the left, value on the right, bar underneath */
  .stat { width: 100%; }
  .stat-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
  .stat-value { margin: 0; font-size: 13px; }
  .bar { margin-top: 4px; height: 5px; }

  .cash { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
  .cash-total { font-size: 24px; }
  .cash-note { font-size: 12px; }

  /* the booking button is the primary action, the other two share a row under it */
  .buttons {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: auto;
  }

  .btn { position: static; height: 40px; font-size: 15px; }
  .btn-continue { order: 1; width: 100%; }
  .btn-back { order: 2; flex: 1; }
  .btn-quit { order: 3; flex: 1; }

  .audio { top: 9px; left: 14px; right: 14px; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .logo-frame { animation: none; }
}