:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #10201b;
  color: #eef8ef;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #10201b;
}

button, select {
  min-height: 44px;
  border: 1px solid #6f8174;
  border-radius: 8px;
  background: #d7f6df;
  color: #10201b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.05);
}

button small {
  display: block;
  margin-top: 2px;
  color: inherit;
  font-weight: 700;
  opacity: 0.78;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(12px, 3vw, 28px);
  background: rgba(16, 32, 27, 0.96);
  border-bottom: 1px solid #31433a;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.brand small, .module-card p, .intro p, .panel p, .review span {
  display: block;
  color: #b9c9bd;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #65d6a6;
  color: #10201b;
  font-weight: 900;
}

.level-pill {
  white-space: nowrap;
  padding: 10px 12px;
  border: 1px solid #496156;
  border-radius: 999px;
  background: #1b2c26;
  color: #d7f6df;
}

.topbar-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.build-id {
  color: #91a79a;
  font-size: 0.72rem;
}

main {
  padding: clamp(14px, 3vw, 28px);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.intro, .panel, .module-card, .result-panel {
  border: 1px solid #3c5147;
  border-radius: 8px;
  background: #172a23;
  padding: clamp(16px, 3vw, 24px);
}

.intro {
  grid-column: span 12;
}

.module-card {
  grid-column: span 4;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.activity {
  grid-column: span 12;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 0.96;
  margin-bottom: 12px;
}

h2 {
  font-size: 1.25rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.stats span {
  padding: 12px;
  border-radius: 8px;
  background: #22362f;
  color: #b9c9bd;
}

.stats b {
  display: block;
  color: #ffffff;
  font-size: 1.35rem;
}

.compact {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
}

.panel-title, .game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.game-layout {
  display: grid;
  gap: 10px;
}

.backing-layout {
  max-width: 1180px;
  margin: 0 auto;
}

.backing-help {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #3c5147;
  border-radius: 8px;
  background: #172a23;
  color: #d9eadc;
}

.backing-help span, .mouse-note {
  color: #b9c9bd;
}

.yard-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid #53675c;
  border-radius: 8px;
  background: #26332d;
  touch-action: none;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 690px);
  object-fit: contain;
}

.warning {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f2c94c;
  color: #10201b;
  font-weight: 900;
}

.impact-note {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ee8f77;
  color: #10201b;
  font-weight: 900;
}

.impact-note.unsafe {
  top: 66px;
  background: #f2c94c;
}

.compact-drive-hud, .choice-row {
  display: grid;
  gap: 10px;
}

.compact-drive-hud {
  grid-template-columns: repeat(6, auto) minmax(140px, 1fr);
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #3c5147;
  border-radius: 8px;
  background: #172a23;
  color: #d9eadc;
  font-weight: 850;
}

.compact-drive-hud span {
  padding-right: 10px;
  border-right: 1px solid #496156;
  white-space: nowrap;
}

.compact-drive-hud b {
  justify-self: end;
  color: #f2c94c;
  white-space: nowrap;
}

.touch-controls, .canvas-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  touch-action: none;
  user-select: none;
}

.canvas-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
}

.canvas-controls .control-cluster {
  pointer-events: auto;
  padding: 6px;
  border: 1px solid rgba(215, 246, 223, 0.22);
  border-radius: 8px;
  background: rgba(16, 32, 27, 0.54);
  backdrop-filter: blur(4px);
}

.control-cluster {
  display: grid;
  grid-template-rows: repeat(3, minmax(62px, 1fr));
  gap: 10px;
}

.touch-controls button {
  min-height: 72px;
  padding: 8px;
  font-size: 1.45rem;
}

.touch-controls button.pressed {
  transform: translateY(1px);
  background: #f2c94c;
  box-shadow: inset 0 0 0 2px #10201b;
}

.steer-control {
  background: #c9f4ff;
}

.pedal-control.reverse {
  background: #d7f6df;
}

.pedal-control.forward {
  background: #cde3ff;
}

.pedal-control.brake {
  background: #ee8f77;
}

.straighten-control {
  background: #f2c94c;
}

.desktop-controls {
  display: none;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #31433a;
  border-radius: 8px;
  background: #10201b;
}

.gear-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
}

.desktop-controls button.active {
  background: #f2c94c;
  box-shadow: inset 0 0 0 2px #10201b;
}

.steering-slider {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #d9eadc;
  font-weight: 800;
}

.steering-slider input {
  width: 100%;
  accent-color: #f2c94c;
}

.mouse-note {
  margin: -2px 0 0;
  font-size: 0.92rem;
}

.result-panel {
  border-color: #65d6a6;
}

.result-panel.safety-failure {
  border-color: #ee8f77;
}

.beat-dot-game {
  display: grid;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
}

.beat-topline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.beat-topline h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
}

.beat-topline strong {
  min-width: 74px;
  padding: 10px 12px;
  border: 1px solid #f2c94c;
  border-radius: 8px;
  background: #22362f;
  color: #f2c94c;
  text-align: center;
  font-size: 1.35rem;
}

.view-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  gap: 8px;
}

.view-tabs button {
  background: #eef8ef;
}

.view-tabs button.active {
  background: #f2c94c;
  box-shadow: inset 0 0 0 2px #10201b;
}

.inspection-stage {
  overflow: auto;
  border: 1px solid #53675c;
  border-radius: 8px;
  background: #21322c;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.truck-art {
  display: block;
  width: 100%;
  min-height: 430px;
  background: #f5f2ec;
  color: #10201b;
}

.truck-art.view-side, .truck-art.view-passenger, .truck-art.view-top, .truck-art.view-under {
  min-height: 360px;
}

.truck-art.view-rear, .truck-art.view-front {
  min-height: 500px;
  max-height: 68vh;
}

.base-render {
  pointer-events: none;
}

.truck-art .shadow, .truck-art .ground-line {
  fill: rgba(11, 18, 15, 0.36);
}

.top-road, .under-road {
  fill: #2b3933;
  stroke: #41564d;
  stroke-width: 4;
}

.tractor-body, .cab-face, .tractor-top {
  fill: #62c39a;
  stroke: #0b1612;
  stroke-width: 4;
}

.hood, .sleeper, .hood-top, .hood-front, .sleeper-top {
  fill: #4aa982;
  stroke: #0b1612;
  stroke-width: 3;
}

.trailer-side, .trailer-rear, .trailer-top, .rear-door-top {
  fill: #edf3eb;
  stroke: #101612;
  stroke-width: 4;
}

.trailer-lines, .door-seam, .roof-lines, .glass-split, .grille-bars, .lock-bars, .top-shadow-lines, .crossmembers, .driveshaft, .brake-chambers {
  fill: none;
  stroke: #aebbb2;
  stroke-width: 3;
}

.glass-split, .grille-bars {
  stroke: #12333b;
}

.lock-bars, .brake-chambers {
  stroke: #24312c;
  stroke-width: 6;
  stroke-linecap: round;
}

.top-shadow-lines, .crossmembers, .driveshaft {
  stroke: #697a70;
  stroke-width: 4;
  stroke-linecap: round;
}

.windshield-base, .glass-shape {
  fill: #bfe8f2;
  stroke: #12333b;
  stroke-width: 3;
}

.frame-rail, .grille, .bumper, .guard, .under-frame, .coupler-base, .engine-pan, .differential, .fifth-wheel-deck, .lower-rail, .cab-detail {
  fill: #26312d;
  stroke: #0b1612;
  stroke-width: 3;
}

.steps, .tank, .reflective, .tank-defect-base {
  fill: #d6c96f;
  stroke: #4b4729;
  stroke-width: 2;
}

.side-window, .license {
  fill: #dce7df;
  stroke: #23322d;
  stroke-width: 2;
}

.grille-side, .headlamp-side {
  fill: #26312d;
  stroke: #111a16;
  stroke-width: 2;
}

.exhaust {
  fill: none;
  stroke: #2d3632;
  stroke-width: 10;
  stroke-linecap: round;
}

.latch-dot {
  fill: #26312d;
  stroke: #0b1612;
  stroke-width: 2;
}

.marker-lit, .light-on {
  fill: #f8d24f;
  stroke: #fff0a8;
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(248, 210, 79, 0.8));
}

.rearLight .light-on {
  fill: #e53b35;
  stroke: #ffb1a6;
}

.light-out {
  fill: #382f2d;
  stroke: #1b1715;
  stroke-width: 4;
}

.dark-lens {
  fill: #141817;
  stroke: #ef4234;
  stroke-width: 2;
}

.tire-dark, .tire-shape, .under-wheel {
  fill: #101612;
  stroke: #030605;
  stroke-width: 3;
}

.tire-inner {
  fill: #202824;
  stroke: #050807;
  stroke-width: 2;
}

.rim-shape {
  fill: #c5d0c8;
  stroke: #56645c;
  stroke-width: 3;
}

.lug-dot {
  fill: #f4f0df;
  stroke: #5f6b63;
  stroke-width: 1.5;
}

.flat-patch, .sidewall-bulge {
  fill: #101612;
  stroke: #f2c94c;
  stroke-width: 3;
}

.crack, .rim-crack, .missing-x, .danger-gap, .body-damage {
  fill: none;
  stroke: #33201e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.missing-lug {
  fill: #111;
  stroke: #f2c94c;
  stroke-width: 4;
}

.rim-bend, .cords {
  fill: none;
  stroke: #c8a86b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mirror-arm, .hose-normal, .under-axles, .spring {
  fill: none;
  stroke: #111a16;
  stroke-width: 7;
  stroke-linecap: round;
}

.mirror-glass {
  fill: #bfe8f2;
  stroke: #111a16;
  stroke-width: 3;
}

.mudflap-shape, .door-shape, .body-panel {
  fill: #d7ded8;
  stroke: #111a16;
  stroke-width: 3;
}

.door-open {
  fill: #d7ded8;
  stroke: #111a16;
  stroke-width: 4;
}

.landing-leg, .hanging-part, .hose-damaged {
  fill: none;
  stroke: #2f302d;
  stroke-width: 7;
  stroke-linecap: round;
}

.coupling-shape {
  fill: #4f5e56;
  stroke: #111a16;
  stroke-width: 4;
}

.wet-source {
  fill: none;
  stroke: #7a5836;
  stroke-width: 6;
  stroke-linecap: round;
}

.wet-puddle {
  fill: rgba(36, 32, 27, 0.86);
  stroke: #7a5836;
  stroke-width: 3;
}

.drip {
  fill: #7a5836;
  animation: drip-pulse 1.2s ease-in-out infinite;
}

.air-puff {
  fill: none;
  stroke: rgba(218, 246, 255, 0.78);
  stroke-width: 4;
  animation: air-pulse 1.1s ease-in-out infinite;
}

.puff-two, .drip-two {
  animation-delay: 0.45s;
}

.hotspot {
  fill: rgba(255, 255, 255, 0.001);
  stroke: transparent;
  stroke-width: 4;
  cursor: pointer;
  pointer-events: all;
}

.inspectable > :not(.hotspot) {
  pointer-events: none;
}

.inspectable:hover .hotspot, .inspectable:focus .hotspot {
  fill: rgba(242, 201, 76, 0.06);
  stroke: rgba(32, 48, 42, 0.45);
}

.inspectable.selected .hotspot {
  stroke: #f2c94c;
  stroke-dasharray: 8 6;
}

.review-found .hotspot {
  fill: rgba(47, 213, 109, 0.14);
  stroke: #2fd56d;
}

.review-missed .hotspot {
  fill: rgba(239, 66, 52, 0.14);
  stroke: #ef4234;
}

.review-false .hotspot {
  fill: rgba(242, 201, 76, 0.14);
  stroke: #f2c94c;
}

.region-label {
  opacity: 0;
  fill: #10201b;
  paint-order: stroke;
  stroke: rgba(245, 242, 236, 0.9);
  stroke-width: 5;
  text-anchor: middle;
  font: 900 15px system-ui;
  letter-spacing: 0;
}

.assist-rookie:hover .region-label, .assist-rookie:focus .region-label,
.assist-driver:hover .region-label, .assist-driver:focus .region-label,
.review-found .region-label, .review-missed .region-label, .review-false .region-label {
  opacity: 1;
}

.assist-inspector:hover .region-label, .assist-inspector:focus .region-label {
  opacity: 0;
}

.flag-tag circle {
  fill: #f2c94c;
  stroke: #10201b;
  stroke-width: 3;
}

.flag-tag text {
  fill: #10201b;
  text-anchor: middle;
  font: 950 15px system-ui;
}

.normal-wear, .normal-road-grime {
  fill: none;
  stroke: rgba(35, 31, 28, 0.22);
  stroke-width: 3;
  stroke-linecap: round;
}

.normal-glare {
  fill: rgba(255, 255, 255, 0.28);
}

.missing-mudflap-mask {
  fill: rgba(245, 242, 236, 0.88);
  stroke: rgba(25, 24, 22, 0.28);
  stroke-width: 2;
}

.mudflap-bracket {
  fill: none;
  stroke: #2d3632;
  stroke-width: 4;
  stroke-linecap: round;
}

.zoom-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #f2c94c;
  border-radius: 8px;
  background: #182820;
  box-shadow: 0 12px 28px rgba(5, 8, 7, 0.36);
}

.zoom-head, .zoom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zoom-head b {
  color: #f2c94c;
  font-size: 1.05rem;
}

.detail-art {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 1px solid #41564d;
  border-radius: 8px;
  background: #33443d;
}

.zoom-panel .hotspot {
  stroke: rgba(215, 246, 223, 0.18);
}

.zoom-part-label {
  fill: #10201b;
  paint-order: stroke;
  stroke: rgba(245, 242, 236, 0.9);
  stroke-width: 4;
  font: 900 13px system-ui;
}

.review-label {
  fill: #fff;
  paint-order: stroke;
  stroke: #10201b;
  stroke-width: 5;
  text-anchor: middle;
  font: 800 18px system-ui;
}

.inspection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.inspection-actions span {
  color: #d9eadc;
  font-weight: 800;
}

.target-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #3c5147;
  border-radius: 8px;
  background: #1f322b;
}

.target-card span, .target-card p {
  margin: 0;
  color: #d9eadc;
  font-weight: 800;
}

.target-card h2 {
  grid-column: 1;
  margin: 0;
  color: #f2c94c;
}

.locate-label.active {
  outline: 3px solid #f2c94c;
  background: #f2c94c;
  color: #10201b;
}

.beat-feedback {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #f2c94c;
  border-radius: 8px;
  background: #243830;
  color: #fff6d8;
  font-weight: 850;
}

.bonus-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #f2c94c;
  border-radius: 8px;
  background: #182820;
}

.bonus-panel button {
  text-align: left;
}

@keyframes air-pulse {
  0% { opacity: 0.15; transform: translateX(0) scale(0.72); }
  50% { opacity: 0.9; }
  100% { opacity: 0.05; transform: translateX(20px) scale(1.2); }
}

@keyframes drip-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(-4px); }
  50% { opacity: 1; transform: translateY(6px); }
}

.review {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #3c5147;
  border-radius: 8px;
  background: #22362f;
}

.review.defect {
  border-color: #f2c94c;
}

.review.false {
  border-color: #ee8f77;
}

.quiz button {
  display: block;
  width: 100%;
  margin: 10px 0;
  text-align: left;
  padding: 12px;
}

.danger {
  background: #ee8f77;
}

.rotate-note {
  display: none;
  margin: 0;
  color: #f2c94c;
}

.debug-overlay {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: 260px;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(16, 32, 27, 0.82);
  color: #d7f6df;
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}

.activity p, .panel > p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #31433a;
}

@media (max-width: 840px) {
  .module-card {
    grid-column: span 12;
  }

  .stats, .compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-drive-hud {
    grid-template-columns: repeat(3, auto) 1fr;
    gap: 5px 8px;
    padding: 6px 8px;
    font-size: 0.82rem;
  }

  .compact-drive-hud span:nth-child(n+4) {
    display: none;
  }

  .compact-drive-hud b {
    justify-self: end;
  }

  .topbar {
    align-items: flex-start;
  }
}

@media (orientation: portrait) and (max-width: 760px) {
  .rotate-note {
    display: block;
    font-size: 0.88rem;
    line-height: 1.05;
  }
}

@media (max-width: 560px) {
  body[data-screen="backing"] .topbar {
    display: none;
  }

  main {
    padding: 10px;
  }

  .brand small {
    display: none;
  }

  .level-pill {
    font-size: 0.85rem;
  }

  .topbar {
    padding: 8px 10px;
  }

  .build-id {
    font-size: 0.66rem;
  }

  .touch-controls button {
    min-height: 50px;
    font-size: 1.1rem;
  }

  .backing-help {
    font-size: 0.86rem;
    padding: 6px 8px;
  }

  .control-cluster {
    grid-template-rows: repeat(3, minmax(50px, 1fr));
    gap: 6px;
  }

  canvas {
    aspect-ratio: 4 / 3;
    max-height: 43vh;
    min-height: 260px;
  }

  .canvas-controls {
    position: static;
    padding: 8px;
    gap: 8px;
  }

  .mouse-note {
    display: none;
  }

  .beat-topline {
    grid-template-columns: auto 1fr auto;
  }

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

  .view-tabs button {
    min-width: 0;
    padding: 6px 3px;
    font-size: 0.78rem;
  }

  .truck-art {
    min-height: 350px;
  }

  .truck-art.view-side, .truck-art.view-passenger, .truck-art.view-top, .truck-art.view-under {
    min-height: 300px;
    width: 900px;
    max-width: none;
  }

  .truck-art.view-rear, .truck-art.view-front {
    min-height: 430px;
  }

  .detail-art {
    min-height: 220px;
  }

  .zoom-panel {
    padding: 8px;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .mobile-controls {
    display: none;
  }

  .desktop-controls {
    display: grid;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* The games need the full height; home, progress and account keep the bar (it holds Account). */
  body:is([data-screen="backing"], [data-screen="beat-dot"], [data-screen="cdl"], [data-screen="shifting"]) .topbar {
    display: none;
  }

  main {
    padding: 6px 8px;
  }

  .game-layout {
    gap: 5px;
  }

  .game-head {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
  }

  .game-head button, .game-head select {
    min-height: 34px;
    padding: 4px 8px;
    font-size: 0.82rem;
  }

  .backing-help, .mouse-note, .rotate-note {
    display: none;
  }

  .compact-drive-hud {
    grid-template-columns: repeat(6, auto) minmax(120px, 1fr);
    font-size: 0.82rem;
  }

  canvas {
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 84px);
    min-height: 250px;
  }

  .canvas-controls {
    position: absolute;
    grid-template-columns: minmax(220px, 0.42fr) minmax(220px, 0.42fr);
    justify-content: space-between;
  }

  .control-cluster {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    grid-template-rows: none;
  }

  .touch-controls button {
    min-height: 50px;
    font-size: 1rem;
  }

  .desktop-controls {
    grid-template-columns: 1fr;
  }

  .gear-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Shared Trucking Caddy cockpit: controls remain below the maneuvering area. */
:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color-scheme: dark; }
body { background: #0b1521; line-height: 1.5; }
button, select, input { font: inherit; }
button, select { min-height: 44px; border-radius: 12px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #72d9ff; outline-offset: 3px; }
.game-layout { max-width: 1400px; margin: auto; gap: 14px; }
.backing-help { padding: 12px 16px; border: 1px solid #32465c; border-radius: 12px; background: #152537; }
.backing-help summary { font-weight: 700; cursor: pointer; }
.backing-help span { display: block; margin-top: 8px; }
.compact-drive-hud { padding: 12px; background: #152537; border-radius: 12px; gap: 12px; }
.compact-drive-hud span { font-variant-numeric: tabular-nums; }
.yard-wrap .canvas-controls { position: static; padding: 12px; background: #152537; }
canvas { min-height: 0; width: 100%; max-height: none; aspect-ratio: 1040 / 760; }
.truck-art.view-front { min-height: 0; aspect-ratio: 730 / 500; }
@media (max-width: 600px) {
  .game-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; }
  .game-head select { width: 100%; font-size: .85rem; }
  .compact-drive-hud { display: flex; flex-wrap: wrap; font-size: .85rem; }
  .canvas-controls { gap: 8px; }
  .control-cluster { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .control-cluster button { min-width: 0; min-height: 56px; }
}

.topbar { background: rgba(11,21,33,.97); border-color: #32465c; }
.panel, .module-card, .hero { background: #152537; border-color: #32465c; }
.yard-wrap .control-cluster { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto; }
.yard-wrap .canvas-controls { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .yard-wrap .canvas-controls { grid-template-columns: 1fr; } }
.yard-wrap canvas { height: min(60vh, 760px); object-fit: contain; background: #26352e; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .yard-wrap .mobile-controls { display: none; } }
@media (max-width: 600px) { .yard-wrap canvas { height: min(48vh, 440px); } }

@media (max-width: 600px) { .yard-wrap canvas { height: auto; max-height: none; } }
.beat-dot-game, .beat-dot-game > *, .target-card > * { min-width: 0; }
.target-card { background: #152537; border-color: #32465c; grid-template-columns: minmax(0,1fr) auto auto; }
@media (max-width: 900px) {
  .target-card { grid-template-columns: 1fr 1fr; }
  .target-card span, .target-card h2, .target-card p { grid-column: 1 / -1; }
  .view-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* Label placement board */
.placement-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.placement-heading h2 { flex: 1 1 480px; margin: 0; font-size: 1.25rem; }
.placement-feedback { min-height: 3em; margin: 0; padding: 12px 16px; background: #152537; border-radius: 12px; }
.placement-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 18px; align-items: start; }
.label-tray { position: sticky; top: 110px; padding: 12px; border: 1px solid #32465c; border-radius: 12px; background: #152537; max-height: 70vh; overflow: auto; }
.label-tray h2 { font-size: 1rem; margin: 0 0 10px; }
.drag-label { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 12px; touch-action: none; user-select: none; cursor: grab; }
.drag-label small { font-weight: 400; font-size: .8rem; }
.label-selected { outline: 3px solid #f2c94c; }
.label-dragging { overscroll-behavior: none; user-select: none; }
.drag-label-ghost { position: fixed; z-index: 10000; max-width: 200px; transform: translate(-50%,-100%); padding: 12px 18px; border-radius: 12px; background: #ffe173; color: #10201b; box-shadow: 0 8px 24px #0008; pointer-events: none; font-weight: 800; }
.drag-label-ghost::after { content: ''; position: absolute; left: calc(50% + var(--tip-x,0px)); top: calc(100% + 60px); width: 12px; height: 12px; border: 3px solid #f2c94c; border-radius: 50%; transform: translate(-50%,-50%); }
.placement-workspace { min-width: 0; display: grid; gap: 12px; }
.label-board { position: relative; min-width: 0; background: #f5f2ec; border-radius: 12px; overflow: hidden; }
.attached-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px; min-height: 40px; position: relative; z-index: 2; }
.attached-label { font-size: 12px; font-weight: 800; padding: 5px 8px; color: #10201b; background: #d7f6df; border: 1px solid #588b68; border-radius: 8px; pointer-events: none; }
.placement-image { display: block; width: min(100%, calc(min(55vh, 520px) * var(--image-ratio))); height: auto; margin: 0 auto; background: #f5f2ec; touch-action: manipulation; }
.placement-image:focus-visible { outline: 3px solid #f2c94c; outline-offset: -3px; }
.placement-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.placement-connectors path { stroke: #16764d; stroke-width: 1.5; fill: none; opacity: .75; }
.placement-connectors circle { stroke: white; stroke-width: 2; fill: #16764d; }
.placement-reticle { fill: none; stroke: #0075be; stroke-width: 2; pointer-events: none; }
.placement-guidance { padding: 16px; border: 1px solid #44856a; background: #152537; border-radius: 12px; }
.placement-guidance h2 { font-size: 1.1rem; }
.placement-guidance button { margin: 4px; }
.placed-progress h2 { font-size: 1rem; }
.placed-progress button { font-size: .85rem; margin: 4px; padding: 8px; }
.placement-accessibility { font-size: .9rem; }
@media (max-width: 900px) {
  .placement-layout { grid-template-columns: minmax(130px,.3fr) minmax(0,1fr); gap: 10px; }
  .label-tray { padding: 8px; max-height: 55vh; }
  .drag-label { padding: 10px; font-size: .85rem; }
}
@media (max-width: 600px) {
  .placement-layout { grid-template-columns: minmax(105px,.36fr) minmax(0,1fr); }
  .label-tray { top: 100px; max-height: 55vh; }
  .label-tray h2 { grid-column: 1 / -1; }
  .drag-label { margin-bottom: 8px; overflow-wrap: anywhere; }
  .placement-feedback { font-size: .9rem; }
}

.label-tray input { width: 100%; min-width: 0; padding: 10px; margin-bottom: 10px; border-radius: 8px; border: 1px solid #6f8174; background: #0b1521; color: #eef8ef; grid-column: 1 / -1; }
.drag-label[hidden] { display: none !important; }

.yard-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .9rem; }
.yard-view-controls button { padding: 8px 12px; }

/* Shifting Excellence */
.shift-setup { max-width: 1180px; margin: auto; }
.shift-setup h2 { margin-top: 18px; }
.shift-cards, .shift-scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.shift-card, .shift-scenario { text-align: left; padding: 12px; display: grid; gap: 4px; background: #183229; color: #eef8ef; }
.shift-card span, .shift-scenario span { font-weight: 600; opacity: 0.9; }
.shift-card small, .shift-scenario small { font-weight: 600; opacity: 0.75; }
.shift-card.active, .shift-scenario.active, .choice-row button.active { outline: 3px solid #f2c94c; background: #24493b; color: #fff; }
.shift-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; }
.shift-row label { display: grid; gap: 4px; font-weight: 700; }
.shift-row label.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.shift-row select { min-width: 220px; max-width: 100%; padding: 0 8px; }
.shift-spec { margin-top: 14px; background: #142a22; border-radius: 10px; padding: 10px 14px; }
.shift-spec summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.shift-spec dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.shift-spec dt { font-weight: 800; }
.shift-spec dd { margin: 0; }
.shift-spec .sources { font-size: 0.85rem; }
.shift-spec a { color: #9fe0c0; }
.shift-start { margin-top: 14px; width: 100%; font-size: 1.1rem; background: #f2c94c; }
.shift-start:disabled { opacity: 0.5; cursor: not-allowed; }
.shift-board ol { padding-left: 20px; }
.muted { opacity: 0.75; }
.shift-categories { display: grid; gap: 8px; margin: 12px 0; }
.shift-category { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 40px; align-items: center; gap: 10px; }
.shift-category meter { width: 100%; height: 14px; }

body[data-driving="true"] .topbar { display: none; }
body[data-driving="true"] { overflow: hidden; overscroll-behavior: none; }
.shift-drive { position: fixed; inset: 0; background: #0b0f10; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.shift-drive canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shift-hud { position: absolute; inset: 0; pointer-events: none; }
.shift-hud button { pointer-events: auto; min-height: 40px; padding: 0 12px; background: rgba(16, 32, 27, 0.82); color: #eef8ef; border-color: #4c6157; }
.shift-hud-left, .shift-hud-right { position: absolute; top: max(8px, env(safe-area-inset-top)); display: flex; gap: 8px; align-items: center; }
.shift-hud-left { left: max(10px, env(safe-area-inset-left)); }
.shift-hud-right { right: max(10px, env(safe-area-inset-right)); }
.shift-title { font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; }
.shift-key { background: #b3261e !important; }
.shift-key[hidden] { display: none; }
.shift-hint, .shift-toast { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; font-weight: 800; text-shadow: 0 1px 3px #000; max-width: 60vw; }
.shift-hint { top: 62px; color: #ffe9a3; font-size: 0.95rem; }
.shift-toast { top: 22%; color: #fff; font-size: 1.35rem; }
.shift-paused { position: absolute; inset: 15% 20%; background: rgba(10, 20, 17, 0.94); border-radius: 14px; padding: 16px 20px; pointer-events: auto; overflow: auto; color: #eef8ef; }

/* Standard layout: range/splitter preselect sits right above the clutch so the left thumb can
   preselect while the right thumb holds the accelerator (Eaton: preselect, then release and shift). */
.shift-cluster { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-end; }
.shift-cluster.left { left: max(10px, env(safe-area-inset-left)); }
.shift-cluster.right { right: max(10px, env(safe-area-inset-right)); }
.cluster-stack { display: grid; gap: 14px; justify-items: stretch; }
.shift-pedals { display: flex; gap: 10px; align-items: flex-end; }
.shift-pedal { position: relative; width: 86px; height: min(48vh, 270px); border-radius: 16px 16px 12px 12px; background: linear-gradient(#2a3230, #1a201e); border: 2px solid #5d6b64; box-shadow: inset 0 2px 0 #3b4743, 0 4px 10px #0008; overflow: hidden; touch-action: none; cursor: ns-resize; }
.shift-pedal.clutch { width: 100px; }
.shift-pedal.throttle { width: 88px; }
.shift-pedal .pedal-tread { position: absolute; inset: 10px 12px 30px; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, 0.07) 9px 12px); border-radius: 8px; pointer-events: none; }
.shift-pedal b { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 0.78rem; letter-spacing: 0.06em; color: #eef8ef; pointer-events: none; }
.shift-pedal .pedal-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: linear-gradient(rgba(95, 208, 160, 0.15), rgba(43, 138, 100, 0.85)); border-bottom: 3px solid #7ff0bf; pointer-events: none; }
.shift-pedal.brake .pedal-fill { background: linear-gradient(rgba(255, 138, 122, 0.15), rgba(179, 38, 30, 0.85)); border-bottom-color: #ff9d90; }
.shift-pedal.throttle .pedal-fill { background: linear-gradient(rgba(255, 225, 115, 0.15), rgba(211, 156, 18, 0.85)); border-bottom-color: #ffe173; }
.shift-pedal .pedal-zone { position: absolute; right: 0; width: 7px; pointer-events: none; }
.shift-pedal .pedal-zone.engage { background: rgba(127, 240, 191, 0.55); }
.shift-pedal .pedal-zone.brake-zone { bottom: 0; background: #ffb340; }
.shift-pedal .zone-label { position: absolute; right: 10px; transform: translateY(-50%); font: 800 0.6rem system-ui, sans-serif; font-style: normal; letter-spacing: 0.04em; color: rgba(238, 248, 239, 0.6); pointer-events: none; }
.shift-pedal .brake-label { bottom: 2px; top: auto; transform: none; color: #ffcf8a; right: 10px; bottom: 28px; }

/* Android treats an upward drag that starts within ~8 mm of the bottom edge as a system
   edge swipe (measured on the C5Pro), so the shifter boot is kept clear of that band. */
.shift-cluster .shifter-pad { margin-bottom: 40px; }
.shift-cluster .cluster-stack .shifter-pad { margin-bottom: 30px; }
.shift-selectors { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.selector { display: grid; justify-items: center; gap: 2px; width: auto; min-height: 76px; padding: 8px 4px; border-radius: 14px; background: rgba(28, 38, 35, 0.92); color: #eef8ef; border: 2px solid #5d6b64; touch-action: manipulation; }
.selector small { font-size: 0.62rem; letter-spacing: 0.06em; opacity: 0.85; }
.selector b { font-size: 1.15rem; color: #f2c94c; line-height: 1; }
.selector-track { position: relative; display: block; background: #0d1412; border-radius: 10px; border: 1px solid #44524c; }
.range-selector .selector-track { width: 22px; height: 34px; }
.split-selector .selector-track { width: 40px; height: 20px; }
.selector-thumb { position: absolute; width: 16px; height: 14px; border-radius: 4px; background: #f2c94c; transition: transform 90ms ease-out; }
.range-selector .selector-thumb { left: 2px; top: 2px; transform: translateY(16px); }
.range-selector[data-state="high"] .selector-thumb { transform: translateY(0); background: #7ff0bf; }
.split-selector .selector-thumb { top: 2px; left: 2px; height: 14px; }
.split-selector[data-state="high"] .selector-thumb { transform: translateX(20px); background: #7ff0bf; }

.shifter-pad { width: min(32vw, 300px); aspect-ratio: 300 / 320; touch-action: none; cursor: grab; }
.shifter-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.shifter-svg .boot { fill: rgba(18, 18, 18, 0.88); stroke: #4d4d4d; stroke-width: 2; }
.shifter-svg .gates line { stroke: #7d868d; stroke-width: 13; stroke-linecap: round; }
.shifter-svg .neutral-glow { stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.shifter-svg.in-neutral .neutral-glow { stroke: rgba(127, 240, 191, 0.28); }
.shifter-svg .plate text { fill: #f1efe6; font: 800 16px system-ui, sans-serif; text-anchor: middle; }
.shifter-svg .plate text.long { font-size: 13px; }
.shifter-svg .knob-hit { fill: transparent; }
.shifter-svg .knob-ball { fill: #202024; }
.shifter-svg .knob-ring { fill: none; stroke: #c9ccd0; stroke-width: 4; }
.shifter-svg .knob.held .knob-ring { stroke: #ffffff; stroke-width: 5; }
.shifter-svg .knob.grinding .knob-ring { stroke: #ff4d4d; stroke-width: 6; }
.shifter-svg .knob.grinding .knob-body { animation: knob-shake 70ms linear infinite; }
.shifter-svg .knob-label { fill: #fff; font: 800 15px system-ui, sans-serif; text-anchor: middle; }
.shifter-svg .switch-housing { fill: #0c0c0e; stroke: #9aa0a6; stroke-width: 1.5; }
.shifter-svg .switch-button { fill: #f2c94c; stroke: #111; stroke-width: 1.5; transition: y 80ms ease-out; }
.shifter-svg .knob-switch.high .switch-button { fill: #7ff0bf; }
.shifter-svg .switch-text { fill: #f1efe6; font: 800 10px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.shifter-svg .range-text { fill: #111; font-size: 13px; }
@keyframes knob-shake { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(-2px, 1px); } }

@media (orientation: portrait) {
  .shift-drive::after { content: "Rotate your phone to landscape to drive."; position: absolute; top: 46%; left: 10%; right: 10%; text-align: center; padding: 14px; border-radius: 12px; background: rgba(10, 20, 17, 0.92); color: #fff; font-weight: 800; pointer-events: none; }
}
@media (max-height: 430px) {
  .shift-pedal { height: 50vh; width: 66px; }
  .shift-pedal.clutch { width: 76px; }
  .shift-pedal.throttle { width: 66px; }
  .shifter-pad { width: min(28vw, 240px); }
  .selector { min-height: 60px; padding: 4px; }
  .shift-selectors { gap: 8px; }
  .cluster-stack { gap: 8px; }
  .shift-hint { top: 50px; font-size: 0.85rem; }
}

/* Live scoreboard (top right) */
.shift-scoreboard { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: grid; grid-template-columns: auto auto; gap: 6px 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: rgba(10, 18, 15, 0.78); border: 1px solid #3c4b44; color: #eef8ef; pointer-events: none; max-width: 46vw; }
.shift-scoreboard.hot { border-color: #f2c94c; box-shadow: 0 0 14px rgba(242, 201, 76, 0.45); }
.score-limit { display: grid; justify-items: center; padding: 2px 6px; border: 2px solid #111; border-radius: 5px; background: #f7f7f2; color: #111; line-height: 1; }
.score-limit small { font: 800 0.48rem system-ui, sans-serif; text-align: center; }
.score-limit b { font-size: 1.15rem; }
.score-main { display: flex; gap: 12px; }
.score-main span { display: grid; justify-items: end; line-height: 1.05; }
.score-main b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.score-main small { font-size: 0.6rem; letter-spacing: 0.06em; opacity: 0.8; }
.shift-scoreboard.hot [data-multiplier] { color: #f2c94c; }
.score-flash { grid-column: 1 / -1; margin: 0; min-height: 1.1em; font-weight: 800; font-size: 0.82rem; text-align: right; }
.score-flash[data-kind="perfect"] { color: #7ff0bf; }
.score-flash[data-kind="milestone"] { color: #f2c94c; }
.score-flash[data-kind="penalty"] { color: #ff8a7a; }
.score-flash[data-kind="good"], .score-flash[data-kind="bonus"] { color: #d7f6df; }
.score-flash[data-kind="rough"] { color: #ffcf8a; }

/* Lesson coach card and control highlight */
.shift-coach { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); width: min(460px, 44vw); padding: 8px 12px; border-radius: 12px; background: rgba(10, 18, 15, 0.9); border: 1px solid #7ff0bf; color: #eef8ef; pointer-events: auto; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
/* The text scrolls when space is short (phones); the buttons never scroll out of reach. */
.coach-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.shift-coach .coach-actions { flex: 0 0 auto; padding-top: 4px; }
.shift-coach small { opacity: 0.75; font-size: 0.68rem; letter-spacing: 0.04em; }
.shift-coach h3 { margin: 2px 0; font-size: 1rem; color: #7ff0bf; }
.shift-coach p { margin: 0 0 6px; font-size: 0.82rem; line-height: 1.3; }
.coach-head { display: flex; justify-content: space-between; gap: 8px; }
.shift-coach .coach-done { color: #7ff0bf; opacity: 1; font-weight: 800; text-align: right; }
.shift-coach .coach-text { font-size: 0.86rem; font-weight: 700; }
.shift-coach .coach-why { color: #c9dccf; font-size: 0.76rem; border-left: 3px solid #4c8a6c; padding-left: 7px; }
.shift-coach .coach-live { color: #ffe9a3; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.coach-why[hidden], .coach-live[hidden], .sync-meter[hidden], .coach-mistake[hidden] { display: none; }
.sync-meter { position: relative; height: 18px; margin: 0 0 6px; border-radius: 9px; background: linear-gradient(90deg, #6b3a2f, #3a3f3a 40%, #3a3f3a 60%, #6b3a2f); }
.sync-window { position: absolute; top: 2px; bottom: 2px; left: 50%; transform: translateX(-50%); border-radius: 7px; background: rgba(127, 240, 191, 0.35); border: 1px solid #7ff0bf; }
.sync-meter.in-sync .sync-window { background: rgba(127, 240, 191, 0.85); }
.sync-needle { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 4px #000; transition: left 60ms linear; }
.sync-meter small { position: absolute; top: 2px; font-size: 0.56rem !important; opacity: 0.8; }
.sync-slow { left: 8px; }
.sync-fast { right: 8px; }
.coach-mistake { margin: 0 0 6px; padding: 5px 8px; border-radius: 8px; background: rgba(120, 44, 28, 0.92); border: 1px solid #ff9a7a; font-size: 0.76rem; line-height: 1.3; }
.coach-mistake b { color: #ffd2c2; }
.shift-coach.has-mistake { border-color: #ff9a7a; }
.shift-coach.watching { border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242, 201, 76, 0.35); }
.shift-coach.watching [data-coach-step] { color: #f2c94c; opacity: 1; font-weight: 800; }
.coach-actions #coach-skip { border-color: #f2c94c; }
.coach-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.coach-actions button { min-height: 36px; padding: 0 9px; font-size: 0.8rem; }
.coach-actions button[hidden] { display: none; }
.coach-actions button[disabled] { opacity: 0.45; }
.coach-actions #coach-why[aria-pressed="true"] { border-color: #7ff0bf; }
@keyframes coach-replay { 0% { box-shadow: 0 0 0 0 rgba(127, 240, 191, 0.9); } 100% { box-shadow: 0 0 0 14px rgba(127, 240, 191, 0); } }
.shift-coach.replay { animation: coach-replay 0.7s ease-out 2; }
/* Shift plate guide: dashed path from the lever to the gear (or neutral) the step asks for. */
.coach-guide { display: none; pointer-events: none; }
.coach-guide.active { display: inline; }
@keyframes coach-dash { to { stroke-dashoffset: -36; } }
.coach-path { fill: none; stroke: #7ff0bf; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 6; opacity: 0.9; animation: coach-dash 0.8s linear infinite; }
.coach-goal circle { fill: rgba(127, 240, 191, 0.18); stroke: #7ff0bf; stroke-width: 3; }
.coach-goal text { fill: #eafff4; font: 800 15px system-ui, sans-serif; text-anchor: middle; }
@keyframes coach-goal-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.coach-goal { animation: coach-goal-pulse 1s ease-in-out infinite; }
.coach-guide.replay .coach-path { animation: coach-dash 0.4s linear infinite; }
.lesson-row { align-items: end; }
.shift-resume { min-height: 44px; font-weight: 800; border-color: #7ff0bf; }
.lesson-sections { columns: 2; padding-left: 1.2em; }
.lesson-sections li.done { color: #2f8a5c; font-weight: 700; }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 240, 191, 0.0); } 50% { box-shadow: 0 0 0 5px rgba(127, 240, 191, 0.75); } }
[data-coach-highlight="clutch"] [data-pedal="clutch"], [data-coach-highlight="fuel"] [data-pedal="throttle"], [data-coach-highlight="brake"] [data-pedal="brake"], [data-coach-highlight="knob"] .shifter-pad { animation: coach-pulse 1.2s ease-in-out infinite; border-radius: 16px; }
@keyframes coach-stroke { 0%, 100% { stroke: #9aa0a6; stroke-width: 1.5; } 50% { stroke: #7ff0bf; stroke-width: 5; } }
.shifter-svg.coach-split .knob-switch.split .switch-housing, .shifter-svg.coach-range .knob-switch.range .switch-housing { animation: coach-stroke 1.2s ease-in-out infinite; }
.shift-hint { top: 64px; }
[data-shift-drive]:has(.shift-coach) .shift-hint { top: auto; bottom: 48%; }
[data-coach-highlight="tach"] #cab-canvas { outline: none; }
@media (max-height: 430px) {
  .shift-coach { padding: 6px 10px; }
  .shift-coach p { font-size: 0.72rem; margin-bottom: 4px; }
  .shift-coach .coach-text { font-size: 0.76rem; }
  .shift-coach .coach-why, .shift-coach .coach-live, .coach-mistake { font-size: 0.68rem; }
  .coach-actions button { min-height: 32px; padding: 0 7px; font-size: 0.72rem; }
  .shift-scoreboard { padding: 4px 8px; }
  .score-main b { font-size: 1rem; }
}

.shift-pedal .pedal-lock { position: absolute; left: 4px; right: 4px; top: 8px; display: none; text-align: center; font: 800 0.56rem system-ui, sans-serif; font-style: normal; letter-spacing: 0.03em; color: #10201b; background: #ffe173; border-radius: 6px; padding: 2px 0; pointer-events: none; }
.shift-pedal.throttle.latched .pedal-lock { display: block; }
.shift-pedal.throttle.latched { border-color: #ffe173; }

/* Accounts: create account, sign in, password reset, account page */
.auth-wrap { display: flex; justify-content: center; padding: 24px 16px 48px; }
.auth-card { width: min(440px, 100%); padding: 22px 20px; border: 1px solid #32465c; border-radius: 14px; }
.auth-card h1 { margin: 6px 0 12px; font-size: 1.45rem; }
.auth-brand { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; }
.auth-brand small { opacity: 0.7; font-weight: 600; }
.auth-card form { display: grid; gap: 14px; margin: 14px 0 6px; }
.auth-card label { display: grid; gap: 6px; font-weight: 700; }
.auth-card label small { font-weight: 500; opacity: 0.75; }
.auth-card input { min-height: 46px; padding: 0 12px; border: 1px solid #6f8174; border-radius: 10px; background: #0d1a16; color: #eef8ef; font-size: 1rem; }
.auth-card input:focus-visible { outline: 3px solid #72d9ff; outline-offset: 2px; }
.auth-primary { background: #7ff0bf; border-color: #7ff0bf; color: #10201b; }
.auth-primary[disabled], .auth-card button[disabled] { opacity: 0.55; cursor: progress; }
.auth-card .link { min-height: 36px; padding: 0 2px; border: none; background: none; color: #9fe8ff; text-decoration: underline; font-weight: 700; }
.auth-switch { margin: 10px 0 0; }
.auth-notice { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(127, 240, 191, 0.14); border: 1px solid #4c8a6c; }
.auth-error { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 138, 122, 0.14); border: 1px solid #ff9a7a; }
.auth-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.auth-choices button { padding: 0 16px; }
.account-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0; }
.account-facts dt { opacity: 0.75; }
.account-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.account-button { min-height: 36px; padding: 0 12px; }
.sync-pill { color: #ffd88a; font-size: 0.78rem; }
.auth-primary.auth-danger { background: #b3402f; color: #fff; }
.sync-pill[hidden] { display: none; }
@media (max-width: 420px) { .account-facts { grid-template-columns: 1fr; } .account-facts dd { margin-bottom: 6px; } }