/* Some assembly required: the garage, the wiring bench and the dashboard.
   Loaded after new-experiences.css, so it wins where the two disagree. */

/* ---- challenge banner ------------------------------------------- */
.challenge {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--paper);
  padding: 14px 18px; margin-bottom: 18px;
}
.challenge p { font-size: 14px; font-weight: 700; }
.challenge button { white-space: nowrap; }

/* The bench is taller than the stage, so the car follows you down it. */
.main-grid { align-items: start; background: var(--ground); }
.controls { background: var(--paper); }
#car-scene { height: min(66vh, 540px); position: sticky; top: 0; }

/* ---- the three sections ----------------------------------------- */
.car-parts { display: grid; gap: 11px; }
.car-parts .part-row { display: block; margin: 0; }
.car-parts .part-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 800; margin-bottom: 6px; width: auto;
}
.part-head span { font: 10px ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #56635d; }
.part-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.part-choices button { padding: 9px 4px; font-size: 10px; min-height: 44px; }
.part-choices button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.car-parts .part-trait { font-size: 12px; font-weight: 500; color: #56635d; margin: 5px 0 0; width: auto; }

/* ---- tabs ------------------------------------------------------ */
.tabs { display: flex; gap: 4px; margin: 18px 0 14px; border-bottom: 2px solid var(--ink); }
.tabs button {
  flex: 1; border: 2px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
  margin-bottom: -2px; min-height: 42px; font-size: 12px; background: transparent;
}
.tabs button[aria-selected="true"] { background: var(--paper); border-color: var(--ink); border-bottom: 2px solid var(--paper); }
.tab-badge { font: 10px ui-monospace, monospace; margin-left: 4px; color: #56635d; }
.tab-badge[data-hot="yes"] { background: #ff7269; color: #fff; border-radius: 99px; padding: 2px 7px; }
.tab-panel { min-height: 220px; }
button.photo { width: 100%; margin-top: 2px; }
.spec {
  margin-top: 16px; padding: 9px 12px; border-radius: 7px; background: #142120; color: #fffdf5;
  font: 11px/1.5 ui-monospace, monospace; letter-spacing: .02em;
}

/* ---- paint shop ------------------------------------------------- */
.paint-shop { display: grid; gap: 13px; }
.look-row .part-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.look-row .part-trait { font-size: 12px; color: #56635d; margin: 5px 0 0; }
.look-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; }
.look-choices button { padding: 8px 4px; font-size: 10px; min-height: 40px; }
.look-choices button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%;
  background: var(--swatch); border: 2px solid #14212040;
  box-shadow: inset -4px -6px 10px #0000002e, inset 3px 4px 8px #ffffff55;
}
.swatch:hover:not(:disabled) { background: var(--swatch); transform: scale(1.08); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.swatch-factory { background: conic-gradient(#50c8b4 0 33%, #d4c8ff 0 66%, #ff8c3c 0); }
.swatch-factory:hover:not(:disabled) { background: conic-gradient(#50c8b4 0 33%, #d4c8ff 0 66%, #ff8c3c 0); }
.swatch-none { background: repeating-linear-gradient(45deg, #fff 0 5px, #e6e1d3 5px 10px); }
.swatch-none:hover:not(:disabled) { background: repeating-linear-gradient(45deg, #fff 0 5px, #e6e1d3 5px 10px); }

/* ---- handovers and cables --------------------------------------- */
.wiring { display: grid; gap: 6px; margin-top: 9px; }
.wire-row {
  border: 1px solid #14212033; border-left: 5px solid var(--cable);
  border-radius: 7px; padding: 6px 10px 8px; background: #fffdf5;
}
.wiring button.wire-toggle {
  flex: none; width: 100%; text-align: left; border: 0; padding: 4px 0;
  min-height: 34px; font-size: 12px; background: transparent;
}
.wiring button.wire-toggle[aria-pressed="true"] { background: transparent; color: var(--ink); }
.wiring button.wire-toggle:disabled { opacity: .55; }
.wire-line { display: block; font-size: 11px; color: #56635d; }
.wire-row:has(.wire-toggle[aria-pressed="true"]) { background: #eef7f2; border-color: #1421204d; }

.cable-choice { display: grid; gap: 8px; margin: 10px 0 4px; }
.cable-card {
  display: block; text-align: left; background: #fffdf5;
  border: 2px solid var(--ink); border-left: 8px solid var(--cable);
  border-radius: 8px; padding: 12px 14px; min-height: 58px;
}
.cable-card b { display: block; font-size: 14px; }
.cable-card span { display: block; font-size: 12px; font-weight: 400; color: #46534e; margin-top: 3px; }
.cable-card:hover:not(:disabled) { background: #f4efe0; }

button.reset { margin-top: 14px; font-size: 11px; min-height: 40px; opacity: .8; }

/* ---- the heads-up display -------------------------------------- */
.race-hud {
  position: absolute; inset: 12px 12px 10px; display: flex; flex-direction: column;
  justify-content: space-between; pointer-events: none; gap: 8px;
}
/* new-experiences.css paints every span in .race-hud as a pill. Only two of
   them want that now, so start from nothing. */
.race-hud span { background: none; border-radius: 0; padding: 0; }
.hud-top { display: flex; justify-content: space-between; gap: 10px; }
.race-hud .hud-pill {
  background: #fffdf5ee; border: 1px solid #14212055; border-radius: 99px;
  padding: 7px 14px; font: 800 14px ui-monospace, monospace; letter-spacing: -.02em;
}
/* Just under the pills, so it never lands on top of the car. */
.hud-flash {
  position: absolute; left: 50%; top: 52px; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 99px; white-space: nowrap;
  padding: 7px 16px; font-size: 12px; font-weight: 700; opacity: 0;
  transition: opacity .18s ease;
}
.hud-flash[data-on="yes"] { opacity: 1; }
.race-hud .hud-combo { transition: background .2s ease, color .2s ease; }
.race-hud .hud-combo[data-on="yes"] { background: #4fe3ff; color: var(--ink); border-color: var(--ink); }
.countdown {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font: 800 92px/1 Jakarta, system-ui, sans-serif; letter-spacing: -.05em; color: #fffdf5;
  text-shadow: 0 4px 0 var(--ink), 0 0 30px #0008;
}
.countdown[data-go="yes"] { color: #64edac; }
.race-hud .speedo {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 6px;
  background: #101a19e6; color: #fffdf5; border-radius: 10px; padding: 8px 14px;
}
.speedo b { font: 800 30px/1 ui-monospace, monospace; letter-spacing: -.04em; min-width: 3ch; text-align: right; }
.race-hud .speedo span { font: 10px ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #fffdf58c; }

/* The dashboard is its own row under the windscreen. It never covers the car. */
.dash {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  background: #101a19; color: #fffdf5; padding: 11px 18px;
  border-top: 2px solid var(--ink);
}
.dash-title { font: 10px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #fffdf58c; }
.dash-msg { font: 800 15px ui-monospace, monospace; letter-spacing: -.01em; text-align: center; color: #fffdf5; }
.dash-next {
  font: 700 11px ui-monospace, monospace; letter-spacing: .03em; text-transform: uppercase;
  color: #fffdf58c; white-space: nowrap;
}
.dash-age {
  font: 10px ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 99px; padding: 4px 10px; background: #ffd25029; color: #ffd250; white-space: nowrap;
}
.dash[data-live="yes"] { box-shadow: inset 0 3px 0 #64edac; }
.dash[data-live="yes"] .dash-age { background: #64edac2e; color: #64edac; }
.dash[data-live="yes"] .dash-msg { color: #c6ffe4; }

/* ---- drive controls -------------------------------------------- */
.drive-controls { display: flex; gap: 8px; align-items: stretch; flex: 0 1 440px; }
.driving .drive-controls { flex: 1; }
.drive-controls button { font-size: 20px; min-width: 62px; min-height: 48px; }
.drive-controls #pause-drive { font-size: 16px; }
.drive-controls .brake {
  flex: 1.6; min-width: 120px; background: #ff7269; border-color: var(--ink);
  font: 800 14px Jakarta, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.drive-controls .brake:hover:not(:disabled) { background: #ff5f55; }

/* ---- the studio shot ------------------------------------------- */
.showroom { padding: 44px 0 8px; }
.showroom-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.showroom-head h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.showroom-head .share-actions { margin-top: 0; }
.showroom-head .share-actions button { white-space: nowrap; }
.poster {
  margin: 0; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink); background: #0b0f16; aspect-ratio: 16 / 10;
}
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.result-extra { font-weight: 700; }

/* ---- results --------------------------------------------------- */
.run-table { width: 100%; border-collapse: collapse; margin: 18px 0 4px; font-size: 13px; }
.run-table th {
  text-align: left; font: 10px ui-monospace, monospace; letter-spacing: .07em;
  text-transform: uppercase; padding: 6px 8px 6px 0; border-bottom: 2px solid var(--ink);
}
.run-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid #14212026; }
.run-table tr:last-child td { font-weight: 800; }
#result-detail p { margin-bottom: 10px; }
/* The dark offer box sits at the top of its column, whatever the table does. */
.result .offer { align-self: start; }

/* ---- driving layout -------------------------------------------- */
.driving .challenge, .driving .point, .driving #drag-note, .driving .showroom { display: none; }
.driving #car-scene { height: min(62vh, 560px); }

@media (max-width: 1000px) {
  .driving #car-scene { height: min(58vh, 480px); }
}

@media (max-width: 720px) {
  /* Get the first thing to do above the fold: shorter headline, shorter stage,
     and the drive button at the top of the bench. */
  .head { padding: 18px 0 15px; }
  h1 { font-size: 36px; }
  .head > p { font-size: 12px; margin-top: 12px; }
  .controls { display: flex; flex-direction: column; padding: 18px; }
  .controls .actions { order: -3; margin-top: 0; }
  .controls #status { order: -2; }
  .controls #drive-note { order: -1; }
  #car-scene { height: 240px; position: relative; }
  .part-choices button { font-size: 9px; padding: 8px 2px; }
  .challenge { display: block; }
  .challenge button { margin-top: 10px; width: 100%; }

  /* While driving, the stage takes the screen: header, dashboard row and the
     thumb bar are the only things that get to keep their height. */
  /* Budget: header and title bar above, dashboard row and thumb bar below. */
  .driving #car-scene { height: calc(100vh - 300px); height: calc(100dvh - 300px); min-height: 230px; }
  body.driving { padding-bottom: 100px; }
  .driving #drive-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--paper); border-top: 2px solid var(--ink);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .driving #drive-bar > p { display: none; }
  .driving .drive-controls button { min-height: 58px; font-size: 22px; }
  .driving .drive-controls .brake { min-height: 58px; font-size: 15px; }
  .driving .drive-controls #pause-drive { min-width: 52px; font-size: 11px; }
  .race-hud { inset: 10px; }
  .countdown { font-size: 64px; }
  .speedo b { font-size: 22px; }
  .race-hud .speedo { padding: 6px 10px; }
  .tabs button { font-size: 11px; padding: 8px 4px; }
  .showroom { padding-top: 30px; }
  .race-hud .hud-pill { font-size: 12px; padding: 6px 11px; }
  .hud-flash { font-size: 11px; padding: 6px 12px; top: 46px; }
  .dash { grid-template-columns: auto 1fr; gap: 3px 10px; padding: 8px 13px; }
  .dash-title { grid-row: 1; }
  .dash-msg { grid-row: 1; text-align: left; font-size: 13px; }
  .dash-next { grid-column: 2; font-size: 10px; }
  .dash-age { grid-column: 2; justify-self: start; font-size: 9px; padding: 3px 8px; }
  .run-table { font-size: 11px; }
  .run-table th { font-size: 8px; }
  .run-table td { padding: 6px 5px 6px 0; }
}

/* ---- the engineer's visit --------------------------------------- */
.scene-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.scene-flash.go { animation: scene-flash .75s ease-out; }
@keyframes scene-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.engineer-stamp {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 99px; padding: 9px 22px 9px 10px;
  box-shadow: 4px 4px 0 #6241ce; white-space: nowrap;
  animation: stamp-in .5s cubic-bezier(.2, 1.4, .4, 1);
}
.engineer-stamp img { width: 40px; height: 40px; border-radius: 50%; background: #0b1110; padding: 3px; }
.engineer-stamp span { font: 10px/1.25 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #fffc; }
.engineer-stamp b { display: block; font: 800 18px/1.15 Jakarta, system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; color: #fff; }
@keyframes stamp-in { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

.engineer-call {
  display: block; width: 100%; text-align: left; margin: 0 0 10px;
  background: #6241ce; color: #fff; border: 2px solid var(--ink); border-radius: 10px;
  padding: 14px 16px; min-height: 64px; box-shadow: 4px 4px 0 var(--ink);
}
.engineer-call:hover:not(:disabled) { background: #4c30aa; }
.engineer-call b { display: block; font-size: 15px; }
.engineer-call span { display: block; font-size: 12px; font-weight: 500; color: #ffffffd0; margin-top: 3px; }

/* ---- touch: no text selection, callouts or scrolling mid-drive ---- */
.scene, .drive-controls { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.drive-controls button { touch-action: none; }
.driving .scene canvas { touch-action: none; }
.driving { overscroll-behavior: none; }

@media (max-width: 720px) {
  .engineer-stamp { top: auto; bottom: 14px; padding: 7px 16px 7px 8px; }
  .engineer-stamp img { width: 32px; height: 32px; }
  .engineer-stamp b { font-size: 15px; }
}

/* Phones on their side: the road gets the screen, the chrome gets out of the way. */
@media (max-height: 500px) and (orientation: landscape) {
  .driving .top, .driving .head, .driving .surface-title { display: none; }
  .driving #car-scene { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 180px; position: relative; }
  .driving .dash { padding: 6px 14px; }
  body.driving { padding-bottom: 76px; }
  .driving #drive-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--paper); border-top: 2px solid var(--ink);
    padding: 6px calc(12px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  }
  .driving #drive-bar > p { display: none; }
  .driving .drive-controls button { min-height: 52px; }
}

/* ---- gates and first-run help ------------------------------------ */
.race-hud .count-tip {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  width: min(90%, 420px); text-align: center; background: #101a19e6; color: #fffdf5;
  border-radius: 12px; padding: 10px 14px; font: 500 13px/1.4 Jakarta, system-ui, sans-serif;
}
.gate-warn {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  white-space: nowrap; border-radius: 99px; padding: 9px 18px; font: 800 14px Jakarta, system-ui, sans-serif;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.gate-warn[data-state="2"] { background: #ff5252; color: #fff; animation: warn-pulse .5s ease-in-out infinite alternate; }
.gate-warn[data-state="1"] { background: #64edac; color: var(--ink); }
@keyframes warn-pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.07); } }
.drive-controls .brake[data-urge="yes"] { animation: brake-urge .45s ease-in-out infinite alternate; background: #ff4f45; }
@keyframes brake-urge { from { box-shadow: 0 0 0 0 #ff525299; } to { box-shadow: 0 0 0 8px #ff525200; } }

/* Phones: big thumb targets for steering, pause shrinks out of the way. */
@media (max-width: 720px) {
  .driving .drive-controls button#steer-left, .driving .drive-controls button#steer-right { flex: 1.15; min-width: 0; font-size: 28px; }
  .driving .drive-controls .brake { flex: 1.35; min-width: 0; }
  .driving .drive-controls #pause-drive { flex: .6; min-width: 0; padding: 6px 2px; font-size: 18px; }
  .gate-warn { bottom: 56px; font-size: 12px; padding: 7px 13px; }
  .race-hud .count-tip { top: 50px; font-size: 12px; padding: 8px 12px; }
}

/* ---- test tracks ------------------------------------------------- */
.track-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.track-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 11px;
  border: 2px solid #14212033; border-radius: 9px; background: #fffdf5; min-height: 108px;
  border-top: 6px solid var(--scene, #5d8c3c);
}
.track-card[data-scene="meadow"] { --scene: #5d8c3c; }
.track-card[data-scene="city"] { --scene: #77b9ed; }
.track-card[data-scene="desert"] { --scene: #d8a45a; }
.track-card[data-scene="snow"] { --scene: #a9c6e4; }
.track-card[aria-checked="true"] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); background: #fff; }
.track-card b { font-size: 13px; line-height: 1.2; }
.track-card span { font-size: 11px; font-weight: 500; color: #46534e; line-height: 1.35; }
.track-card small { margin-top: auto; font: 10px ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #56635d; }
.track-card small[data-medal="1"] { color: #a0622d; }
.track-card small[data-medal="2"] { color: #6b7780; }
.track-card small[data-medal="3"] { color: #b88a00; font-weight: 700; }
.result-medal { font-weight: 800; }
.result-medal[data-medal="3"] { color: #8a6500; }
.plate-label { display: block; margin-top: 14px; }
.car-plate { font: 800 16px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; max-width: 200px; background: #f7d117; }
@media (max-width: 720px) {
  .track-card { min-height: 0; padding: 9px; }
  .track-card span { display: none; }
  .track-card[aria-checked="true"] span { display: block; }
}

/* ---- "fitted" note when you pick a part -------------------------- */
.stage-note.fitted { background: var(--ink); color: #fff; border-color: var(--ink); animation: note-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes note-pop { from { transform: translateY(8px) scale(.96); opacity: .3; } to { transform: none; opacity: 1; } }
.drive-controls .quit { font-size: 12px; background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 720px) { .driving .drive-controls .quit { flex: .8; min-width: 0; padding: 6px 4px; } }