/* Generated image controls, with touch settings shared by preview and race. */
.mobile-icon {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../assets/ui/mobile-controls.webp");
  background-size: 300% 300%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.mobile-icon-left {
  background-position: 0 0;
}
.mobile-icon-right {
  background-position: 50% 0;
}
.mobile-icon-accelerate {
  background-position: 100% 0;
}
.mobile-icon-brake {
  background-position: 0 50%;
}
.mobile-icon-drift {
  background-position: 50% 50%;
}
.mobile-icon-boost {
  background-position: 100% 50%;
}
.mobile-icon-camera {
  background-position: 0 100%;
}
.mobile-icon-recover {
  background-position: 50% 100%;
}
.mobile-icon-pause {
  background-position: 100% 100%;
}
.mobile-preview {
  padding: 14px;
  margin: 0 0 10px;
  border: 1px solid #86644050;
  border-radius: 12px;
  background: linear-gradient(140deg, #35261f, #5c3b24);
  color: #fff1d3;
}
.mobile-preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font:
    700 12px "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
}
.mobile-preview-heading span {
  color: #e7be83;
  font-size: 10px;
}
.mobile-preview-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 12px 0;
}
.mobile-preview-steering {
  display: flex;
  gap: 5px;
}
.mobile-preview-pedals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
.mobile-preview-layout .mobile-icon {
  width: clamp(42px, calc(56px * var(--touch-scale, 1)), 66px);
  height: clamp(42px, calc(56px * var(--touch-scale, 1)), 66px);
  opacity: var(--touch-opacity, 0.85);
}
.mobile-preview[data-layout="left"] .mobile-preview-layout {
  flex-direction: row-reverse;
}
.mobile-preview-tools {
  display: flex;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid #eec79535;
  padding-top: 8px;
}
.mobile-preview-tools > span {
  display: flex;
  align-items: center;
  gap: 3px;
  font:
    700 10px "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.5px;
}
.mobile-preview-tools .mobile-icon {
  width: 32px;
  height: 32px;
}
.mobile-race-tools {
  display: none;
}
body[data-mobile-controls="off"] .touch-driving {
  display: none !important;
}
body[data-page="race"][data-mobile-controls="on"] {
  --touch-button-size: min(
    calc(68px * var(--touch-scale, 1)),
    calc((100vw - 56px) / 4)
  );
  --hud-edge: 16px;
  --touch-bottom: max(12px, env(safe-area-inset-bottom));
  --touch-row-gap: 4px;
  --mobile-hud-bottom: calc(
    var(--touch-bottom) + var(--touch-button-size) * 2 + var(--touch-row-gap) +
      18px
  );
}
body[data-page="race"][data-mobile-controls="on"] .touch-driving {
  position: absolute;
  z-index: 35;
  display: flex;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: var(--touch-bottom);
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
body[data-mobile-controls="on"][data-mobile-layout="left"] .touch-driving {
  flex-direction: row-reverse;
}
body[data-mobile-controls="on"] .touch-steering {
  display: flex;
  gap: 5px;
}
body[data-mobile-controls="on"] .touch-pedals {
  display: grid;
  grid-template-columns: repeat(2, var(--touch-button-size));
  gap: var(--touch-row-gap);
}
body[data-mobile-controls="on"] .touch-control {
  display: block;
  width: var(--touch-button-size);
  height: var(--touch-button-size);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  color: inherit;
  box-shadow: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
  opacity: var(--touch-opacity, 0.85);
  transition:
    filter 0.08s,
    transform 0.08s;
}
body[data-mobile-controls="on"] .touch-control.held {
  opacity: 1;
  filter: brightness(1.4) drop-shadow(0 0 6px #ffc84e);
  transform: scale(0.94);
}
body[data-mobile-controls="on"] .touch-control:focus-visible,
.mobile-race-tools button:focus-visible {
  outline: 2px solid #ffde8a;
  outline-offset: 2px;
}
body[data-page="race"][data-mobile-controls="on"] .mobile-race-tools {
  position: absolute;
  display: flex;
  gap: 3px;
  z-index: 40;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
}
.mobile-race-tools button {
  display: block;
  width: 48px;
  height: 48px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  touch-action: manipulation;
}
.mobile-race-tools button:active {
  filter: brightness(1.35);
  transform: scale(0.95);
}
body[data-page="race"][data-mobile-controls="on"] .horizon-pause,
body[data-page="race"][data-mobile-controls="on"] .driving-keys,
body[data-page="race"][data-mobile-controls="on"] .map-links {
  display: none;
}
body[data-page="race"][data-mobile-controls="on"] .race-topbar {
  top: 70px !important;
}
body[data-page="race"][data-mobile-controls="on"] .horizon-race-info {
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: min(
    320px,
    calc(
      100vw - max(12px, env(safe-area-inset-left)) -
        max(12px, env(safe-area-inset-right)) - 162px
    )
  );
}
body[data-page="race"][data-mobile-controls="on"] .horizon-navigation {
  width: 190px;
  bottom: var(--mobile-hud-bottom);
  top: auto;
}
body[data-page="race"][data-mobile-controls="on"] .speed-hud {
  width: 190px;
  bottom: var(--mobile-hud-bottom);
  top: auto;
}
@media (max-width: 550px) {
  .mobile-preview {
    padding: 10px;
  }
  .mobile-preview-heading {
    font-size: 10px;
  }
  .mobile-preview-heading span {
    font-size: 9px;
  }
  .mobile-preview-tools {
    gap: 9px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info {
    padding: 7px;
    grid-template-columns: 0.65fr 0.85fr 1.4fr;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info strong {
    font-size: 17px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info small {
    font-size: 12px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info > div {
    padding-right: 4px;
  }
  body[data-page="race"][data-mobile-controls="on"]
    .horizon-race-info
    > div
    + div {
    padding-left: 4px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-navigation,
  body[data-page="race"][data-mobile-controls="on"] .speed-hud {
    width: calc(50vw - 22px);
  }
  body[data-page="race"][data-mobile-controls="on"] .race-card-title {
    font-size: 13px;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  body[data-page="race"][data-mobile-controls="on"] {
    --touch-button-size: min(
      clamp(44px, calc(54px * var(--touch-scale, 1)), 64px),
      max(44px, calc((100dvh - 212px) / 2))
    );
    --mobile-hud-size: clamp(
      72px,
      calc(100dvh - var(--mobile-hud-bottom) - 88px),
      135px
    );
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-navigation {
    width: var(--mobile-hud-size);
    padding: 5px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-mission > strong {
    display: block;
    font-size: 11px;
    line-height: 1.1;
    padding: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-mission .ui-svg {
    display: none;
  }
  body[data-page="race"][data-mobile-controls="on"] .speed-hud {
    width: var(--mobile-hud-size);
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-speed {
    font-size: clamp(26px, calc(var(--mobile-hud-size) * 0.36), 48px);
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: min(
      320px,
      calc(
        100vw - max(12px, env(safe-area-inset-left)) -
          max(12px, env(safe-area-inset-right)) - 268px
      )
    );
    padding: 7px 9px;
  }
  body[data-page="race"][data-mobile-controls="on"] .race-card-title {
    font-size: 13px;
    padding-bottom: 4px;
    margin-bottom: 5px;
    gap: 6px;
  }
  body[data-page="race"][data-mobile-controls="on"] .race-card-title .ui-svg {
    width: 17px;
    height: 17px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info > div {
    padding-right: 4px;
  }
  body[data-page="race"][data-mobile-controls="on"]
    .horizon-race-info
    > div
    + div {
    padding-left: 8px;
  }
  body[data-page="race"][data-mobile-controls="on"]
    .horizon-race-info
    > div
    > span {
    font-size: 8px;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info strong {
    font-size: 18px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-race-info small {
    font-size: 13px;
  }
  body[data-page="race"][data-mobile-controls="on"] #cod-lobby .race-topbar {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: calc(max(12px, env(safe-area-inset-right)) + 156px) !important;
  }
  body[data-page="race"][data-mobile-controls="on"]
    #cod-lobby
    .race-topbar
    .topbar-coins {
    min-height: 36px;
    padding: 0 7px;
    gap: 5px;
  }
  body[data-page="race"][data-mobile-controls="on"] .topbar-coins b {
    font-size: 15px;
  }
  body[data-page="race"][data-mobile-controls="on"] .topbar-coins small {
    font-size: 7px;
  }
  body[data-page="race"][data-mobile-controls="on"] .race-objectives,
  body[data-page="race"][data-mobile-controls="on"] .drive-assists {
    display: none;
  }
  body[data-page="race"][data-mobile-controls="on"] .minimap {
    height: calc(var(--mobile-hud-size) * 0.7);
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  body[data-page="race"][data-mobile-controls="on"] .minimap canvas {
    flex: 1;
    min-height: 0;
    height: 0;
  }
  body[data-page="race"][data-mobile-controls="on"] .checkpoint-distance {
    position: static;
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 2px 3px;
    background: #302014a0;
    font-family: "Barlow Condensed", sans-serif;
  }
  body[data-page="race"][data-mobile-controls="on"]
    .checkpoint-distance
    strong {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body[data-page="race"][data-mobile-controls="on"] .checkpoint-distance small {
    font-size: 7px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-gear {
    padding: 2px 4px;
    min-width: 25px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-gear strong {
    font-size: 18px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-gear small {
    font-size: 7px;
  }
  body[data-page="race"][data-mobile-controls="on"] .horizon-boost {
    font-size: 9px;
    padding: 4px;
  }
  body[data-page="race"][data-mobile-controls="on"] .speed-readout > span {
    font-size: 9px;
  }
}

@media (max-height: 300px) and (orientation: landscape) {
  body[data-page="race"][data-mobile-controls="on"] .race-card-title {
    display: none;
  }
}

body[data-mobile-controls="on"] .pause-top kbd {
  display: none;
}

/* Warmup canvases and swatches use external styles only. */
.engine-warmup {
  position: fixed;
  left: -1000px;
  width: 320px;
  height: 175px;
  pointer-events: none;
}
.engine-warmup.engine-warmup-garage {
  width: 900px;
  height: 600px;
}
#race-canvas[hidden] {
  display: none !important;
}
#scene {
  background-image: url("../assets/scenery/cartoon-sky.webp");
}
body[data-page="garage"] #scene,
body[data-page="shop"] #scene,
body[data-page="settings"] #scene {
  background-image: url("../assets/lobby/approved-workshop.webp");
}
body[data-page="world"] #scene,
body[data-page="progress"] #scene,
body[data-page="results"] #scene {
  background-image: url("../assets/lobby/approved-background.webp");
}
[data-swatch="#ff8c19"] {
  background-color: #ff8c19;
}
[data-swatch="#e53b34"] {
  background-color: #e53b34;
}
[data-swatch="#16d2e5"] {
  background-color: #16d2e5;
}
[data-swatch="#a0df36"] {
  background-color: #a0df36;
}
[data-swatch="#e9443b"] {
  background-color: #e9443b;
}
[data-swatch="#18bcd6"] {
  background-color: #18bcd6;
}
[data-swatch="#87c839"] {
  background-color: #87c839;
}
[data-swatch="#ff871c"] {
  background-color: #ff871c;
}
[data-swatch="#2089ef"] {
  background-color: #2089ef;
}
[data-swatch="#e33d37"] {
  background-color: #e33d37;
}
[data-swatch="#8ddd25"] {
  background-color: #8ddd25;
}
[data-swatch="#ffc329"] {
  background-color: #ffc329;
}
[data-swatch="#b74cfa"] {
  background-color: #b74cfa;
}
[data-swatch="#e43235"] {
  background-color: #e43235;
}
[data-swatch="#13c9d5"] {
  background-color: #13c9d5;
}
[data-swatch="#eb3c36"] {
  background-color: #eb3c36;
}
[data-swatch="#14d4e5"] {
  background-color: #14d4e5;
}
[data-swatch="#9be33b"] {
  background-color: #9be33b;
}

.mobile-preview-heading,
.mobile-preview-heading span,
.mobile-preview-tools > span {
  font-size: 11px;
  line-height: 1.4;
}
.mobile-preview-heading,
.mobile-preview-tools {
  flex-wrap: wrap;
}