.gas {
  --boost-fill: 34%;
  background: linear-gradient(
    to bottom,
    #ff5a5f 0 34%,
    var(--lime) 34% 100%
  );
}

.gas::after {
  opacity: 0.9;
}

.brake-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.5px;
  pointer-events: auto;
}

.drift {
  width: clamp(49.5px, 10vw, 72px);
  height: clamp(40.5px, 8vw, 58.5px);
  border-radius: 749.25px;
  background: var(--cyan);
  font-size: max(var(--turn-text-floor, 11px), clamp(0.465rem, 1.6vw, 0.645rem));
}

.drift.is-down {
  background: var(--yellow);
  transform: translate(2.25px, 2.25px) rotate(-3deg);
}

/* The BOOST bar's look, in one place. The race's bar below reads these, and so
   does HOW TO PLAY's picture of it (ui/how-to-play-demos.js), so a change here
   changes both. */
:root {
  --turn-boost-bar-height: 11.25px;
  --turn-boost-bar-outline: 3px;
  --turn-boost-bar-radius: 749.25px;
  --turn-boost-bar-shadow-offset: 2.25px;
  /* The empty bar lets a little of the track through. */
  --turn-boost-bar-track-opacity: 82%;
  /* OVERCHARGE widens the bar at both ends, in purple. */
  --turn-boost-overcharge: linear-gradient(
    90deg,
    var(--turn-control-overcharge-deep) 0%,
    var(--turn-control-overcharge) 4%,
    var(--turn-control-overcharge-light) 9%,
    var(--turn-control-overcharge-light) 91%,
    var(--turn-control-overcharge) 96%,
    var(--turn-control-overcharge-deep) 100%
  );
}

.boost-hud {
  --boost-charge: 100%;
  --boost-overcharge-width: 0%;
  --boost-base-width: 100%;
  --boost-hud-downshift: 15px;
  position: absolute;
  left: 50%;
  bottom: calc(clamp(69px, 20vh, 112.5px) - var(--boost-hud-downshift));
  width: clamp(87px, 18vw, 133.5px);
  transform: translateX(-50%) rotate(-1deg);
  color: var(--turn-text);
  text-align: center;
  transition: transform 120ms ease;
}

/* Controls normally sit above the HUD. Lift the HUD only for the brief SHIFT
   roll so feedback can cross the pre-race action bar without permanently
   changing the game's stacking order. */
.hud.has-shift-feedback {
  z-index: 21;
}

.boost-hud > span {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1.5px 6px 2.25px;
  border: 2px solid var(--turn-outline);
  border-radius: 749.25px;
  background: var(--turn-surface-page);
  box-shadow: 1.5px 1.5px 0 var(--turn-shadow-color);
  font-size: max(var(--turn-text-floor, 11px), clamp(0.36rem, 1.2vw, 0.51rem));
  letter-spacing: 0.08em;
}

.boost-hud > div {
  position: relative;
  left: 50%;
  width: calc(100% + var(--boost-overcharge-width));
  height: var(--turn-boost-bar-height);
  overflow: hidden;
  border: var(--turn-boost-bar-outline) solid var(--turn-outline);
  border-radius: var(--turn-boost-bar-radius);
  background: color-mix(in srgb, var(--turn-surface-page) var(--turn-boost-bar-track-opacity), transparent);
  box-shadow: var(--turn-boost-bar-shadow-offset) var(--turn-boost-bar-shadow-offset) 0 var(--turn-shadow-color);
  transform: translateX(-50%);
  transform-origin: center;
  transition:
    width 80ms linear,
    background 120ms ease,
    box-shadow 120ms ease;
}

.shift-change-feedback {
  position: absolute;
  z-index: 3;
  top: calc(100% + 6.75px);
  left: 50%;
  width: max-content;
  min-width: 79.5px;
  padding: 4.5px 6.75px 5.25px;
  border: 0.75px solid rgb(255 248 232 / .2);
  border-radius: 6px;
  visibility: hidden;
  background: rgb(8 9 10 / .7);
  color: var(--paper, #fff8e8);
  box-shadow: 0 2.25px 9px rgb(8 9 10 / .24);
  font-size: max(var(--turn-text-floor, 11px), clamp(0.36rem, 1.05vw, 0.48rem));
  font-weight: 950;
  letter-spacing: .055em;
  line-height: 1.18;
  text-align: left;
  opacity: 0;
  transform: translate(-50%, 3.75px);
  pointer-events: none;
}

.shift-change-feedback strong,
.shift-change-feedback span {
  display: block;
  white-space: nowrap;
}

.shift-change-feedback strong {
  margin-bottom: 2.25px;
  font-size: .92em;
  letter-spacing: .09em;
}

.shift-change-feedback.is-shift-on strong {
  color: #8ce99a;
}

.shift-change-feedback.is-shift-off strong {
  color: #ffd43b;
}

.shift-change-feedback.is-visible {
  visibility: visible;
  animation: turn-shift-feedback 3100ms ease-out both;
}

.shift-change-feedback.is-visible span {
  animation: turn-shift-feedback-line 2240ms ease-out both;
}

.shift-change-feedback.is-visible span:nth-of-type(2) {
  animation-delay: 140ms;
}

.shift-change-feedback.is-visible span:nth-of-type(3) {
  animation-delay: 280ms;
}

.boost-hud i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--boost-charge);
  background: linear-gradient(90deg, #ff922b, #ff5a5f);
  box-shadow: 2.25px 0 0 var(--turn-shadow-color);
  transition: width 70ms linear;
}

.boost-hud.has-overcharge > div {
  background: var(--turn-boost-overcharge);
}

.boost-hud.has-overcharge i {
  left: 50%;
  width: var(--boost-base-width);
  transform: translateX(-50%);
  box-shadow: none;
}

/* ROAD RAGE (#1265): converted fuel is a share of the base fill, not extra capacity.
   It ends where the fill ends, so it burns first, in the same strong purple. */
.boost-hud.has-converted-overcharge > div::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 var(--boost-converted-left, 100%);
  width: var(--boost-converted-width, 0%);
  background: linear-gradient(90deg, var(--turn-control-overcharge-deep), var(--turn-control-overcharge));
  box-shadow: inset 2px 0 0 var(--turn-outline);
  transition:
    left 70ms linear,
    width 70ms linear;
}

.boost-hud.is-boosting {
  transform: translateX(-50%) scale(1.08) rotate(1deg);
}

.boost-hud.is-boosting > div {
  box-shadow:
    var(--turn-boost-bar-shadow-offset) var(--turn-boost-bar-shadow-offset) 0 var(--turn-shadow-color),
    0 0 0 3.75px rgb(255 90 95 / 0.28);
}

.boost-hud.is-drift-charging i {
  background: linear-gradient(90deg, #38d9ff, #8ce99a);
}

.boost-hud.is-drift-locking i {
  background: linear-gradient(90deg, #8b5cf6, #8ce99a);
}

.boost-hud.is-boost-full-flash {
  animation: turn-boost-full-flash 520ms cubic-bezier(.16,.82,.24,1);
}

.boost-hud.is-boost-full-flash > div {
  animation: turn-boost-full-bar-flash 520ms ease-out;
}

.boost-hud.is-boost-empty-flash {
  animation: turn-boost-empty-flash 620ms cubic-bezier(.28,.78,.34,1);
}

.boost-hud.is-boost-empty-flash > div {
  animation: turn-boost-empty-bar-flash 620ms ease-out;
}

.boost-hud.is-overcharge-volatile:not(.is-boost-full-flash):not(.is-boost-empty-flash):not(.is-overcharge-peak) > div {
  animation: turn-overcharge-wiggle 620ms ease-in-out infinite;
}

.boost-hud.is-overcharge-peak {
  animation: turn-boost-empty-flash 420ms cubic-bezier(.28,.78,.34,1);
}

@keyframes turn-boost-full-flash {
  0%, 100% { transform: translateX(-50%) rotate(-1deg) scale(1); }
  24% { transform: translateX(-50%) rotate(2deg) scale(1.2); }
  52% { transform: translateX(-50%) rotate(-2deg) scale(1.08); }
  76% { transform: translateX(-50%) rotate(1deg) scale(1.14); }
}

@keyframes turn-boost-full-bar-flash {
  0%, 100% {
    background: color-mix(in srgb, var(--turn-surface-page) 82%, transparent);
    box-shadow: 2.25px 2.25px 0 var(--turn-shadow-color);
  }
  28%, 72% {
    background: #fff6a8;
    box-shadow:
      2.25px 2.25px 0 var(--turn-shadow-color),
      0 0 0 5.25px rgb(56 217 255 / 0.5),
      0 0 16.5px 7.5px rgb(255 212 59 / 0.58);
  }
  48% {
    background: var(--turn-surface-bright);
  }
}

@keyframes turn-boost-empty-flash {
  0%, 100% { transform: translateX(-50%) rotate(-1deg); }
  14% { transform: translateX(calc(-50% - 5.25px)) rotate(-5deg); }
  28% { transform: translateX(calc(-50% + 5.25px)) rotate(4deg); }
  42% { transform: translateX(calc(-50% - 3.75px)) rotate(-4deg); }
  56% { transform: translateX(calc(-50% + 3px)) rotate(3deg); }
  72% { transform: translateX(calc(-50% - 1.5px)) rotate(-2deg); }
}

@keyframes turn-boost-empty-bar-flash {
  0%, 100% {
    background: color-mix(in srgb, var(--turn-surface-page) 82%, transparent);
    box-shadow: 2.25px 2.25px 0 var(--turn-shadow-color);
  }
  18%, 54% {
    background: #ff5a5f;
    box-shadow:
      2.25px 2.25px 0 var(--turn-shadow-color),
      0 0 0 4.5px rgb(255 90 95 / 0.48);
  }
  36%, 72% {
    background: var(--turn-surface-page);
  }
}

@keyframes turn-overcharge-wiggle {
  0%, 100% { transform: translateX(-50%) rotate(0deg) scaleY(1); }
  26% { transform: translateX(-50%) rotate(-0.45deg) scaleY(1.025); }
  54% { transform: translateX(-50%) rotate(0.55deg) scaleY(0.985); }
  78% { transform: translateX(-50%) rotate(-0.25deg) scaleY(1.018); }
}

@keyframes turn-shift-feedback {
  0% {
    opacity: 0;
    transform: translate(-50%, 5.25px);
  }
  12%, 76% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -9px);
  }
}

@keyframes turn-shift-feedback-line {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  18%, 76% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-5.25px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boost-hud.is-boost-full-flash,
  .boost-hud.is-boost-empty-flash,
  .boost-hud.is-overcharge-volatile > div,
  .boost-hud.is-overcharge-peak {
    animation: none;
  }

  .shift-change-feedback.is-visible,
  .shift-change-feedback.is-visible span {
    animation: none;
  }

  .shift-change-feedback.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.race-position-hud {
  position: absolute;
  left: 38%;
  bottom: clamp(84px, 25vh, 142.5px);
  min-width: 61.5px;
  padding: 4.5px 7.5px 6px;
  border: 3px solid var(--turn-outline);
  border-radius: 11.25px;
  background: color-mix(in srgb, var(--turn-surface-page) 94%, transparent);
  color: var(--turn-text);
  box-shadow: 3px 3px 0 var(--turn-shadow-color);
  text-align: center;
  transform: rotate(-3deg);
  transform-origin: center;
}

.race-position-hud span {
  display: block;
  font-size: max(var(--turn-text-floor, 11px), 0.375rem);
  letter-spacing: 0.08em;
}

.race-position-hud strong {
  display: block;
  margin-top: 0.75px;
  font-size: max(var(--turn-text-floor, 11px), clamp(0.8625rem, 3vw, 1.3125rem));
  line-height: 1;
}

.race-position-hud.position-pop {
  animation: turn-position-pop 420ms cubic-bezier(.15,.85,.2,1);
}

@keyframes turn-position-pop {
  0% { transform: rotate(-3deg) scale(1); }
  35% { transform: rotate(4deg) scale(1.42); background: var(--yellow); color: var(--turn-ink); }
  65% { transform: rotate(-5deg) scale(1.18); }
  100% { transform: rotate(-3deg) scale(1); }
}

@media (max-height: 322.5px) {
  .brake-stack {
    gap: 4.5px;
  }

  .drift {
    width: 48px;
    height: 36px;
  }

  .boost-hud {
    bottom: calc(55.5px - var(--boost-hud-downshift));
    width: 84px;
  }

  .shift-change-feedback {
    top: calc(100% + 3.75px);
    min-width: 72px;
    font-size: max(var(--turn-text-floor, 11px), 0.345rem);
  }

  .race-position-hud {
    left: 40%;
    bottom: 69px;
    min-width: 54px;
    padding: 3.75px 6px 4.5px;
  }
}