html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #121412;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #5b8d58;
}

#hud {
  position: fixed;
  left: 18px;
  top: 14px;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

#money {
  font-size: 24px;
  font-weight: 900;
}

.wanted-stars {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 7px;
  width: 270px;
  height: 46px;
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.wanted-stars span {
  color: rgba(255, 255, 255, 0.22);
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.9);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.82),
    0 0 12px rgba(0, 0, 0, 0.46);
}

.wanted-stars span.active {
  color: #f7f7f0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.85),
    0 0 10px rgba(255, 255, 255, 0.28),
    2px 0 0 rgba(210, 0, 24, 0.5);
}

#hint {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.vehicle-condition-hud {
  width: 210px;
  margin-top: 11px;
  padding: 9px 11px 10px;
  box-sizing: border-box;
  background: rgba(8, 12, 13, 0.8);
  border-left: 4px solid #39ff72;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  text-shadow: none;
}

.vehicle-condition-title,
.vehicle-condition-hud > div:not(.vehicle-condition-title) {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.vehicle-condition-title {
  margin-bottom: 7px;
}

.vehicle-condition-title span,
.vehicle-condition-title strong,
.vehicle-condition-hud > div > span {
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
}

.vehicle-condition-title strong {
  color: #39ff72;
  text-align: right;
}

.vehicle-condition-hud > div:not(.vehicle-condition-title) {
  margin-top: 5px;
}

.vehicle-condition-hud b {
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  transform: skewX(-15deg);
}

.vehicle-condition-hud b i {
  display: block;
  width: 100%;
  height: 100%;
  background: #39ff72;
  transform-origin: left;
  transition: transform 180ms ease, background 180ms ease;
}

.vehicle-condition-hud.warning {
  border-left-color: #ffcf3f;
}

.vehicle-condition-hud.critical {
  border-left-color: #f02035;
  animation: vehicleConditionWarning 720ms ease-in-out infinite alternate;
}

@media (max-width: 760px) {
  .vehicle-condition-hud {
    width: 176px;
    padding: 8px 9px 9px;
  }

  .vehicle-condition-title,
  .vehicle-condition-hud > div:not(.vehicle-condition-title) {
    grid-template-columns: 47px minmax(0, 1fr);
    gap: 6px;
  }

  .vehicle-condition-title span,
  .vehicle-condition-title strong,
  .vehicle-condition-hud > div > span {
    font-size: 8px;
  }
}

.hidden {
  display: none !important;
}

.game-code {
  position: fixed;
  left: 50%;
  top: 68px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 14px 7px 16px;
  color: white;
  background: rgba(11, 13, 13, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%) skewX(-8deg);
  pointer-events: none;
  text-transform: uppercase;
}

.game-code span,
.game-code strong,
.game-code small {
  display: block;
  transform: skewX(8deg);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
}

.weather-hud {
  position: fixed;
  right: 26px;
  top: 188px;
  z-index: 6;
  display: grid;
  grid-template-columns: 9px auto;
  align-items: center;
  column-gap: 8px;
  min-width: 92px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(9, 12, 13, 0.72);
  border-left: 3px solid #6ed5ff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  text-transform: uppercase;
  transform: skewX(-6deg);
}

.weather-hud i {
  grid-row: 1 / 3;
  width: 8px;
  height: 8px;
  background: #ffe06a;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}

.weather-hud span,
.weather-hud strong {
  display: block;
  letter-spacing: 0;
  transform: skewX(6deg);
}

.weather-hud span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 900;
}

.weather-hud strong {
  font-size: 15px;
  line-height: 1;
}

.weather-hud.rain i { color: #77d8ff; background: #77d8ff; }
.weather-hud.storm i { color: #d6e6ff; background: #d6e6ff; }
.weather-hud.cloudy i { color: #b9c3c8; background: #b9c3c8; }

@media (max-width: 620px) {
  .weather-hud {
    right: 14px;
    top: 166px;
    min-width: 78px;
    padding: 6px 8px;
  }
}

.game-code span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 900;
}

.game-code strong {
  color: #f4f4f4;
  font-size: 24px;
  font-weight: 900;
}

.game-code small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.store-health {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
  padding: 8px 12px;
  color: white;
  background: rgba(8, 10, 10, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%) skewX(-9deg);
  pointer-events: none;
}

.store-health span,
.store-health div {
  transform: skewX(9deg);
}

.store-health span {
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65);
}

.store-health div {
  flex: 1;
  height: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.store-health b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #2dff64, #e9ff52);
  box-shadow: 0 0 14px rgba(45, 255, 100, 0.55);
  transition: width 140ms ease, background 140ms ease;
}

.purchase-prompt {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 12px;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(31, 255, 105, 0.22), rgba(9, 12, 12, 0.88) 34%),
    rgba(9, 12, 12, 0.86);
  border: 1px solid rgba(89, 255, 139, 0.62);
  border-left: 5px solid #39ff72;
  border-radius: 5px;
  box-shadow:
    0 0 24px rgba(57, 255, 114, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%) skewX(-8deg);
  animation: purchasePromptIn 160ms ease-out both, purchasePromptPulse 1.1s ease-in-out infinite;
}

.purchase-prompt.hidden {
  display: none;
}

.purchase-prompt span,
.purchase-prompt strong,
.purchase-prompt small {
  transform: skewX(8deg);
}

.purchase-prompt span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  color: #031208;
  background: #39ff72;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(57, 255, 114, 0.65);
  font-size: 18px;
  font-weight: 1000;
}

.purchase-prompt strong {
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0;
}

.purchase-prompt small {
  color: #aaffc5;
  font-size: 13px;
  font-weight: 1000;
}

.checkout-sequence {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  width: min(420px, calc(100vw - 28px));
  padding: 13px 15px 12px;
  box-sizing: border-box;
  color: #fff;
  background: rgba(8, 13, 14, 0.94);
  border: 1px solid rgba(67, 208, 255, 0.58);
  border-left: 5px solid #1b9ee8;
  border-radius: 5px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.52), 0 0 28px rgba(27, 158, 232, 0.2);
  pointer-events: none;
  transform: translateX(-50%);
  animation: checkoutSequenceIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.checkout-sequence.hidden {
  display: none;
}

.checkout-sequence div {
  min-width: 0;
}

.checkout-sequence small,
.checkout-sequence strong {
  display: block;
  letter-spacing: 0;
  text-transform: uppercase;
}

.checkout-sequence small {
  margin-bottom: 3px;
  color: #6dccff;
  font-size: 10px;
  font-weight: 900;
}

.checkout-sequence strong {
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 1000;
}

.checkout-sequence > span {
  color: #fff06a;
  font-size: 21px;
  font-weight: 1000;
}

.checkout-sequence > i {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  overflow: hidden;
  background: #283236;
}

.checkout-sequence > i > b {
  display: block;
  width: 100%;
  height: 100%;
  background: #1b9ee8;
  box-shadow: 0 0 15px rgba(27, 158, 232, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}

.checkout-sequence[data-stage="approved"] {
  border-color: rgba(57, 255, 114, 0.7);
  border-left-color: #39ff72;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.52), 0 0 32px rgba(57, 255, 114, 0.3);
}

.checkout-sequence[data-stage="approved"] small,
.checkout-sequence[data-stage="approved"] > i > b {
  color: #72ff9b;
  background: #39ff72;
}

@media (max-width: 620px) {
  .checkout-sequence {
    top: 94px;
    bottom: auto;
    width: calc(100vw - 22px);
  }
}

.mission-hud {
  position: fixed;
  left: 18px;
  top: 98px;
  z-index: 8;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 36px));
  padding: 12px 16px 13px;
  color: #fff;
  background: rgba(8, 12, 13, 0.88);
  border-left: 6px solid #ffd83d;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  pointer-events: none;
  transform: skewX(-5deg);
  animation: missionHudIn 300ms cubic-bezier(0.18, 0.9, 0.3, 1.15);
}

.mission-hud > * {
  transform: skewX(5deg);
}

.mission-hud small,
.mission-hud strong,
.mission-hud span {
  display: block;
}

.mission-hud small {
  color: #ffd83d;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-hud > strong {
  margin-top: 2px;
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
}

.mission-hud > span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 800;
}

.mission-progress {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.mission-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffd83d;
  box-shadow: 0 0 15px rgba(255, 216, 61, 0.75);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms ease-out;
}

.mission-hud footer {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 13px;
  text-transform: uppercase;
}

.mission-hud time {
  color: #ffd83d;
  font-size: 17px;
  font-weight: 1000;
}

.mission-prompt {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 255px;
  padding: 10px 16px 10px 11px;
  color: #fff;
  background: rgba(7, 11, 12, 0.9);
  border: 1px solid rgba(255, 216, 61, 0.42);
  border-left: 5px solid #ffd83d;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48), 0 0 25px rgba(255, 216, 61, 0.14);
  transform: translateX(-50%);
  pointer-events: none;
}

.mission-prompt > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #101313;
  background: #ffd83d;
  font-size: 16px;
  font-weight: 1000;
  box-shadow: 0 0 18px rgba(255, 216, 61, 0.36);
}

.mission-prompt small,
.mission-prompt strong {
  display: block;
  text-transform: uppercase;
}

.mission-prompt small {
  color: #ffd83d;
  font-size: 9px;
  font-weight: 1000;
}

.mission-prompt strong {
  margin-top: 2px;
  font-size: 15px;
}

.mission-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
  background: rgba(5, 8, 9, 0.8);
  backdrop-filter: blur(7px) saturate(0.65);
}

.mission-menu-panel {
  width: min(940px, calc(100vw - 48px));
  color: #fff;
  background: #111718;
  border-top: 5px solid #ffd83d;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72);
  animation: missionMenuIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mission-menu-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px 17px;
  background: #090d0e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mission-menu-panel header small {
  color: #ffd83d;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-menu-panel h1 {
  margin: 3px 0 0;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}

#closeMissionMenu {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: #242b2c;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  font-size: 17px;
  font-weight: 1000;
}

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

.mission-grid > button {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 2px 13px;
  min-height: 137px;
  padding: 18px 20px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  background: #151b1c;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: none;
}

.mission-grid > button:last-child {
  grid-column: 1 / -1;
}

.mission-grid > button:hover,
.mission-grid > button:focus-visible {
  z-index: 1;
  background: #202829;
  box-shadow: inset 5px 0 0 #ffd83d, inset 0 0 0 1px rgba(255, 216, 61, 0.42);
  transform: none;
}

.mission-grid i {
  grid-row: 1 / 5;
  color: rgba(255, 216, 61, 0.32);
  font-size: 33px;
  font-style: normal;
  font-weight: 1000;
}

.mission-grid small,
.mission-grid strong,
.mission-grid span,
.mission-grid b {
  grid-column: 2;
}

.mission-grid small {
  color: #ffd83d;
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-grid strong {
  font-size: 21px;
  line-height: 1;
  text-transform: uppercase;
}

.mission-grid span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 700;
}

.mission-grid b {
  margin-top: 7px;
  color: #70ff9b;
  font-size: 11px;
  text-transform: uppercase;
}

.mission-menu-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 24px;
  color: rgba(255, 255, 255, 0.48);
  background: #090d0e;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

#closeMissionMenuMobile {
  display: none;
}

.reward-pop.mission {
  top: 52%;
  color: #70ff9b;
  font-size: 32px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.82), 0 0 24px rgba(57, 255, 114, 0.58);
}

.notification-feed {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
  max-height: 168px;
  pointer-events: none;
}

.smash-combo {
  position: fixed;
  right: 24px;
  top: 43%;
  z-index: 8;
  box-sizing: border-box;
  width: 210px;
  padding: 11px 14px 12px;
  color: #ffffff;
  background: rgba(9, 12, 12, 0.82);
  border-left: 6px solid #ffd83d;
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 216, 61, 0.18);
  pointer-events: none;
  transform: skewX(-7deg);
  transform-origin: right center;
}

.smash-combo small,
.smash-combo strong,
.smash-combo span,
.smash-combo i {
  display: block;
  transform: skewX(7deg);
}

.smash-combo small {
  color: #ffe777;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.smash-combo strong {
  margin-top: -2px;
  font-size: 38px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 216, 61, 0.32);
}

.smash-combo span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.smash-combo i {
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}

.smash-combo i b {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffd83d;
  box-shadow: 0 0 12px rgba(255, 216, 61, 0.8);
  transform-origin: left center;
}

.smash-combo.pop {
  animation: smashComboPop 260ms cubic-bezier(0.18, 0.9, 0.3, 1.35);
}

.reward-layer {
  position: fixed;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}

.reward-pop {
  position: absolute;
  left: 50%;
  top: 62%;
  color: #ffe04d;
  font-size: 25px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.78), 0 0 18px rgba(255, 224, 77, 0.42);
  white-space: nowrap;
  animation: rewardPop 900ms cubic-bezier(0.17, 0.82, 0.25, 1) forwards;
}

.reward-pop.drift {
  color: #65eaff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.78), 0 0 18px rgba(68, 220, 255, 0.48);
}

@media (max-width: 700px) {
  .mission-hud {
    top: 88px;
    left: 10px;
    width: min(290px, calc(100vw - 20px));
    padding: 9px 12px 10px;
  }

  .mission-hud > strong {
    font-size: 18px;
  }

  .mission-prompt {
    bottom: 116px;
    min-width: 220px;
  }

  .mission-menu {
    place-items: start center;
    padding: 8px;
  }

  .mission-menu-panel {
    width: calc(100vw - 16px);
  }

  .mission-menu-panel > header {
    padding: 14px;
  }

  .mission-menu-panel h1 {
    font-size: 25px;
  }

  .mission-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-grid > button,
  .mission-grid > button:last-child {
    grid-column: 1;
    min-height: 112px;
    padding: 13px 14px;
  }

  .mission-grid i {
    font-size: 27px;
  }
}

#money.reward-pulse {
  animation: moneyRewardPulse 280ms ease-out;
}

.notification {
  position: relative;
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 13px 9px 15px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(9, 12, 12, 0.74);
  border-left: 5px solid #d50019;
  border-radius: 4px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.58);
  transform: skewX(-7deg);
  animation: notificationIn 260ms ease-out both;
}

.notification span {
  display: block;
  transform: skewX(7deg);
}

.notification.hot {
  border-left-color: #ffdf54;
}

.notification.fade-out {
  animation: notificationOut 360ms ease-in both;
}

#minimap {
  position: fixed;
  right: 18px;
  top: 18px;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.85);
  background: rgba(20, 27, 22, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}

.spawn-navigator {
  position: fixed;
  right: 18px;
  top: 240px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  min-width: 154px;
  padding: 8px 11px 8px 8px;
  color: #fff;
  background: rgba(8, 13, 12, 0.84);
  border-left: 4px solid #39ff72;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.38), 0 0 20px rgba(57, 255, 114, 0.12);
  pointer-events: none;
  transform: skewX(-5deg);
}

.spawn-navigator > i,
.spawn-navigator > div {
  transform: skewX(5deg);
}

.spawn-navigator > i {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: rgba(57, 255, 114, 0.12);
  border: 1px solid rgba(57, 255, 114, 0.46);
  border-radius: 50%;
}

.spawn-navigator > i > b {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 17px solid #39ff72;
  filter: drop-shadow(0 0 5px rgba(57, 255, 114, 0.7));
  transform-origin: 50% 58%;
  transition: transform 120ms linear;
}

.spawn-navigator small,
.spawn-navigator strong {
  display: block;
  text-transform: uppercase;
}

.spawn-navigator small {
  color: #73ff9d;
  font-size: 9px;
  font-weight: 1000;
}

.spawn-navigator strong {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 620px) {
  .spawn-navigator {
    right: 10px;
    top: 211px;
    min-width: 138px;
    padding: 7px 9px 7px 7px;
  }

  .spawn-navigator > i {
    width: 30px;
    height: 30px;
  }

  .spawn-navigator strong {
    font-size: 14px;
  }
}

#arrestFx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  backdrop-filter: grayscale(1) contrast(1.2) blur(1px);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.82) 62%),
    linear-gradient(90deg, rgba(128, 0, 14, 0.16), transparent 28%, transparent 72%, rgba(128, 0, 14, 0.16));
  transition: opacity 120ms linear;
}

#damageFx {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 38%, rgba(130, 0, 0, 0.34) 70%, rgba(80, 0, 0, 0.62) 100%),
    radial-gradient(circle at 22% 28%, rgba(210, 0, 0, 0.42) 0 3%, transparent 8%),
    radial-gradient(circle at 78% 34%, rgba(180, 0, 0, 0.34) 0 2.5%, transparent 7%),
    radial-gradient(circle at 64% 72%, rgba(230, 0, 0, 0.3) 0 2%, transparent 7%);
  mix-blend-mode: multiply;
  transition: opacity 120ms linear;
}

.transition-fade {
  position: fixed;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(53, 255, 102, 0.12), rgba(0, 0, 0, 0.76) 48%, #050505 100%);
  transition: opacity 380ms ease;
}

.transition-fade.active {
  opacity: 1;
}

.game-intro {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  background: #050607;
  opacity: 1;
}

.game-intro.hidden {
  display: none;
}

.game-intro.reveal {
  animation: introReveal 900ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.intro-letterbox {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(44px, 8vh, 94px);
  background: #050607;
  transform: translateY(0);
}

.intro-letterbox-top { top: 0; }
.intro-letterbox-bottom { bottom: 0; }

.game-intro.finish .intro-letterbox-top {
  animation: introBarTop 700ms cubic-bezier(0.7, 0, 0.25, 1) both;
}

.game-intro.finish .intro-letterbox-bottom {
  animation: introBarBottom 700ms cubic-bezier(0.7, 0, 0.25, 1) both;
}

.intro-location {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(64px, 12vh, 142px);
  padding-left: 14px;
  border-left: 5px solid #ff1f32;
  text-transform: uppercase;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.82);
  animation: introLocationIn 650ms ease-out 650ms both;
}

.intro-location small,
.intro-location strong {
  display: block;
  letter-spacing: 0;
}

.intro-location small {
  color: #ffe052;
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 900;
}

.intro-location strong {
  margin-top: 4px;
  font-size: clamp(22px, 3.2vw, 46px);
  font-style: italic;
  line-height: 0.9;
}

.game-intro.title-hit .intro-location {
  animation: introLocationOut 260ms ease-in both;
}

.intro-title {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  width: min(880px, calc(100vw - 30px));
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-3deg);
  filter: drop-shadow(0 9px 0 rgba(0, 0, 0, 0.76));
}

.game-intro.title-hit .intro-title {
  display: block;
  animation: introTitleHit 680ms cubic-bezier(0.1, 0.9, 0.2, 1) both;
}

.intro-title span,
.intro-title strong {
  display: block;
  letter-spacing: 0;
  line-height: 0.72;
}

.intro-title span {
  font-size: clamp(24px, 4vw, 54px);
  font-style: italic;
  font-weight: 950;
}

.intro-title strong {
  color: #fff;
  font-size: clamp(68px, 14vw, 180px);
  font-style: italic;
  font-weight: 1000;
  text-shadow: 7px 0 0 #d8061d;
}

.intro-title i {
  display: block;
  width: 72%;
  height: 8px;
  margin: 17px auto 0;
  background: #ffe052;
  transform: skewX(-28deg);
}

.intro-start {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  color: #ffe052;
  font-size: clamp(70px, 17vw, 220px);
  font-style: italic;
  font-weight: 1000;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 7px 0 0 #d8061d, 0 12px 0 rgba(0, 0, 0, 0.72);
  transform: translate(-50%, -50%) rotate(-4deg);
}

.game-intro.finish .intro-title { display: none; }

.game-intro.finish .intro-start {
  display: block;
  animation: introStartHit 620ms cubic-bezier(0.08, 0.92, 0.18, 1) both;
}

body.game-intro-active #hud,
body.game-intro-active #minimap,
body.game-intro-active #gameCode,
body.game-intro-active #mobileControls,
body.game-intro-active #notificationFeed {
  opacity: 0;
}

.screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  background: rgba(5, 7, 8, 0.68);
}

.screen.hidden {
  display: none;
}

.device-screen {
  position: fixed;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0.92)),
    linear-gradient(115deg, rgba(140, 0, 20, 0.25), rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.76));
  backdrop-filter: grayscale(0.25) contrast(1.14) blur(1px);
}

.device-card {
  position: relative;
  width: min(820px, calc(100vw - 34px));
  padding-top: 16px;
  text-align: center;
  transform: rotate(-2.5deg);
  animation: menuCardIn 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.device-card h1 {
  width: min-content;
  min-width: min(780px, calc(100vw - 34px));
  margin: 0 auto;
  color: #f6f6f6;
  font-size: clamp(46px, 10vw, 118px);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 5px 0 #101010,
    0 12px 24px rgba(0, 0, 0, 0.7),
    5px 0 0 rgba(207, 0, 22, 0.65);
}

.device-card p {
  max-width: min(620px, calc(100vw - 44px));
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 2.1vw, 21px);
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  animation: arrestDetailIn 900ms ease-out 540ms both;
}

.mobile-controls {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.joystick {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: clamp(158px, 32vw, 208px);
  height: clamp(158px, 32vw, 208px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04) 48%, rgba(0, 0, 0, 0.2) 49%),
    rgba(10, 12, 12, 0.58);
  border: 3px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    inset 0 0 22px rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  touch-action: none;
}

.joystick-stick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(66px, 13vw, 88px);
  height: clamp(66px, 13vw, 88px);
  border-radius: 50%;
  background: #e20718;
  border: 3px solid rgba(255, 255, 255, 0.76);
  box-shadow:
    0 8px 0 #7f000e,
    0 16px 26px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
}

.joystick-direction {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  opacity: 0.58;
  pointer-events: none;
}

.joystick-up {
  left: calc(50% - 8px);
  top: 9px;
  border-bottom-color: white;
}

.joystick-right {
  right: 9px;
  top: calc(50% - 8px);
  border-left-color: white;
}

.joystick-down {
  left: calc(50% - 8px);
  bottom: 9px;
  border-top-color: white;
}

.joystick-left {
  left: 9px;
  top: calc(50% - 8px);
  border-right-color: white;
}

.mobile-actions {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 212px;
  height: 214px;
  pointer-events: none;
}

.mobile-action {
  position: absolute;
  width: 88px;
  height: 88px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  color: #ffffff;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(145deg, #28d766, #11883d);
  box-shadow:
    0 12px 0 #07501f,
    0 22px 32px rgba(0, 0, 0, 0.42),
    inset 0 0 22px rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 1000;
  pointer-events: auto;
  touch-action: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  user-select: none;
  -webkit-user-select: none;
}

.mobile-action:active,
.mobile-action.pressed {
  transform: translateY(6px) scale(0.96);
  box-shadow: 0 4px 0 #07501f, 0 9px 16px rgba(0, 0, 0, 0.34);
}

.mobile-action-main {
  right: 0;
  bottom: 0;
  width: 112px;
  height: 112px;
  background: linear-gradient(145deg, #f32638, #a90819);
  box-shadow: 0 12px 0 #63000b, 0 22px 32px rgba(0, 0, 0, 0.42);
  font-size: 17px;
}

.mobile-jump {
  right: 118px;
  bottom: 4px;
}

.mobile-punch {
  right: 8px;
  bottom: 122px;
  background: linear-gradient(145deg, #ffb526, #c26100);
  box-shadow: 0 10px 0 #713600, 0 18px 26px rgba(0, 0, 0, 0.4);
}

.mobile-use {
  right: 108px;
  bottom: 104px;
  background: linear-gradient(145deg, #258be8, #125096);
  box-shadow: 0 10px 0 #092e58, 0 18px 26px rgba(0, 0, 0, 0.4);
}

@media (max-height: 520px) {
  .joystick {
    width: 150px;
    height: 150px;
  }

  .joystick-stick {
    width: 64px;
    height: 64px;
  }

  .mobile-actions {
    transform: scale(0.82);
    transform-origin: right bottom;
  }
}

.menu-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.62) 46%, rgba(0, 0, 0, 0.9)),
    linear-gradient(115deg, rgba(140, 0, 20, 0.22), rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.68));
  backdrop-filter: grayscale(0.35) contrast(1.16) blur(1px);
}

.menu-screen.hidden {
  display: none;
}

.multiplayer-loading {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: rgba(4, 7, 8, 0.94);
  backdrop-filter: blur(7px) grayscale(0.35);
}

.multiplayer-loading-scan {
  position: absolute;
  inset: -30%;
  opacity: 0.12;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, 0.2) 5px 6px);
  animation: multiplayerScan 7s linear infinite;
}

.multiplayer-loading-card {
  position: relative;
  width: min(580px, calc(100vw - 34px));
  box-sizing: border-box;
  padding: 30px 34px 28px;
  text-align: center;
  background: #101516;
  border-top: 6px solid #ffdf54;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: multiplayerLoadingIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.multiplayer-loading-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #39ff72;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.multiplayer-loading-kicker i {
  width: 8px;
  height: 8px;
  background: #39ff72;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(57, 255, 114, 0.9);
  animation: multiplayerOnlinePulse 900ms ease-in-out infinite;
}

.multiplayer-loading-radar {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 20px auto 17px;
  border: 2px solid rgba(57, 255, 114, 0.42);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(57, 255, 114, 0.08), 0 0 24px rgba(57, 255, 114, 0.08);
}

.multiplayer-loading-radar > i {
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(57, 255, 114, 0.28);
  border-radius: 50%;
}

.multiplayer-loading-radar > i:nth-child(2) {
  inset: 37px;
}

.multiplayer-loading-radar > i:nth-child(3) {
  left: 55px;
  top: 7px;
  right: auto;
  bottom: 7px;
  width: 1px;
  border: 0;
  border-radius: 0;
  background: rgba(57, 255, 114, 0.24);
}

.multiplayer-loading-radar b {
  position: absolute;
  left: 55px;
  top: 55px;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #39ff72, transparent);
  box-shadow: 0 0 9px rgba(57, 255, 114, 0.7);
  transform-origin: left center;
  animation: multiplayerRadar 1.15s linear infinite;
}

.multiplayer-loading-card h1 {
  margin: 0;
  font-size: clamp(39px, 8vw, 68px);
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 5px 0 #070909, 4px 0 0 rgba(213, 0, 25, 0.72);
}

.multiplayer-loading-card p {
  min-height: 20px;
  margin: 13px 0 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.multiplayer-loading-progress {
  height: 6px;
  margin-bottom: 22px;
  overflow: hidden;
  background: #2a3031;
  transform: skewX(-18deg);
}

.multiplayer-loading-progress i {
  display: block;
  width: 42%;
  height: 100%;
  background: #ffdf54;
  box-shadow: 0 0 14px rgba(255, 223, 84, 0.72);
  animation: multiplayerProgress 1.05s ease-in-out infinite;
}

.multiplayer-loading-card button {
  min-width: 170px;
  background: #2a3031 !important;
  box-shadow: 0 5px 0 #0a0d0d;
}

body.multiplayer-joining #menu button,
body.multiplayer-joining #menu input {
  pointer-events: none;
}

.mobile-pause {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  background: rgba(10, 13, 14, 0.74);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55);
}

.mobile-pause i {
  display: block;
  width: 5px;
  height: 17px;
  background: #fff;
}

.mobile-map {
  position: fixed;
  top: 14px;
  right: 70px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  background: rgba(10, 13, 14, 0.74);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55);
}

.mobile-map i {
  width: 8px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  transform: skewY(-18deg);
}

.mobile-map i:nth-child(2) {
  background: rgba(57, 255, 114, 0.35);
  transform: skewY(18deg);
}

.world-map-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  grid-template-rows: 78px minmax(0, 1fr) 52px;
  padding: 12px;
  box-sizing: border-box;
  color: #fff;
  background: rgba(5, 9, 10, 0.96);
  backdrop-filter: blur(8px) saturate(0.65);
}

.world-map-screen > header,
.world-map-screen > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  background: #0a1011;
  border-left: 5px solid #39ff72;
}

.world-map-screen > header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.world-map-screen > header small {
  color: #60ff91;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.world-map-screen h1 {
  margin: 2px 0 0;
  font-size: 31px;
  line-height: 1;
  text-transform: uppercase;
}

.world-map-tools {
  display: flex;
  gap: 7px;
}

.world-map-tools button {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: #20292a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  box-shadow: none;
  font-size: 22px;
}

.world-map-tools button:hover {
  background: #2d393a;
}

#worldMapClose {
  margin-left: 8px;
  background: #df071b;
}

.world-map-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #05090a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: grab;
  touch-action: none;
}

.world-map-viewport.dragging {
  cursor: grabbing;
}

#worldMapCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.world-map-north {
  position: absolute;
  top: 13px;
  left: 50%;
  color: #fff;
  font-size: 15px;
  font-weight: 1000;
  text-shadow: 0 2px 0 #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.world-map-north::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 3px auto 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #df071b;
}

.world-map-screen > footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  text-transform: uppercase;
}

#worldMapExplored {
  color: rgba(255, 255, 255, 0.65);
}

.world-map-legend {
  display: flex;
  align-items: center;
  gap: 18px;
}

.world-map-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

.world-map-legend i {
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.world-map-legend i.spawn { color: #39ff72; background: #39ff72; }
.world-map-legend i.market { color: #39c5ff; background: #39c5ff; }
.world-map-legend i.garage { color: #ff4b5f; background: #ff4b5f; }
.world-map-legend i.jobs { color: #ffd83d; background: #ffd83d; }

@media (max-width: 700px) {
  .world-map-screen {
    grid-template-rows: 64px minmax(0, 1fr) 44px;
    padding: 6px;
  }

  .world-map-screen > header,
  .world-map-screen > footer {
    padding: 0 10px;
  }

  .world-map-screen h1 {
    font-size: 21px;
  }

  .world-map-screen > header small {
    font-size: 8px;
  }

  .world-map-tools {
    gap: 4px;
  }

  .world-map-tools button {
    width: 35px;
    min-width: 35px;
    height: 35px;
    font-size: 18px;
  }

  #worldMapClose {
    margin-left: 2px;
  }

  .world-map-legend {
    gap: 8px;
  }

  .world-map-legend span {
    font-size: 8px;
  }

  #worldMapExplored {
    display: none;
  }
}

.pause-screen {
  z-index: 24;
  background: rgba(5, 7, 8, 0.78);
  backdrop-filter: grayscale(0.4) blur(5px);
}

.pause-card {
  position: relative;
  width: min(620px, calc(100vw - 34px));
  text-align: center;
  transform: rotate(-1.5deg);
  animation: menuCardIn 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pause-card h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(64px, 12vw, 118px);
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow: 0 6px 0 #101010, 5px 0 0 rgba(213, 0, 25, 0.7);
}

.pause-card p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.pause-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.pause-actions button {
  min-width: 190px;
}

.garage-screen {
  position: fixed;
  inset: 0;
  z-index: 23;
  display: grid;
  place-items: center;
  padding: 18px;
  box-sizing: border-box;
  overflow: auto;
}

.garage-screen.hidden {
  display: none;
}

.garage-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 8, 10, 0.94), rgba(10, 15, 16, 0.72) 52%, rgba(4, 8, 10, 0.94)),
    repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.025) 5px, rgba(255, 255, 255, 0.025) 6px);
  backdrop-filter: blur(5px) saturate(0.55);
}

.garage-panel {
  position: relative;
  width: min(980px, calc(100vw - 36px));
  color: #fff;
  background: rgba(15, 19, 20, 0.96);
  border-top: 5px solid #39ff72;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72);
  animation: menuCardIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.garage-panel header,
.garage-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.garage-panel header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.garage-panel header small,
.garage-upgrade small {
  color: #39ff72;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.garage-panel h1 {
  margin: 2px 0 0;
  font-size: clamp(27px, 5vw, 48px);
  line-height: 0.95;
  text-transform: uppercase;
}

#garageMoney {
  color: #ffdf54;
  font-size: clamp(25px, 4vw, 38px);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
}

.garage-car-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  background: #23292a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.garage-car-stage::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 56px;
  bottom: 17px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 50%;
  filter: blur(8px);
}

.garage-car-stage > span {
  position: absolute;
  right: 20px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.garage-car-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  transform-origin: center;
  transition: filter 220ms ease, transform 220ms ease;
}

#garageVehicleCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.garage-car {
  position: relative;
  width: 300px;
  height: 72px;
  background: #d7192d;
  clip-path: polygon(0 48%, 13% 20%, 66% 10%, 91% 35%, 100% 72%, 94% 89%, 5% 89%);
  filter: drop-shadow(0 0 18px rgba(255, 42, 64, 0.25));
}

.garage-cabin {
  position: absolute;
  left: 91px;
  top: 8px;
  width: 107px;
  height: 29px;
  background: #10191d;
  clip-path: polygon(17% 0, 78% 0, 100% 100%, 0 100%);
}

.garage-wheel {
  position: absolute;
  top: 50px;
  width: 36px;
  height: 36px;
  border: 7px solid #090a0a;
  border-radius: 50%;
  box-sizing: border-box;
  background: #777;
}

.garage-wheel-front { right: 37px; }
.garage-wheel-rear { left: 37px; }

.garage-upgrades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.garage-upgrade {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 14px;
  min-width: 0;
  padding: 19px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.garage-upgrade:last-child {
  border-right: 0;
}

.garage-upgrade h2 {
  margin: 2px 0 6px;
  font-size: 23px;
  text-transform: uppercase;
}

.garage-upgrade p {
  min-height: 35px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.garage-level {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.garage-level i {
  height: 7px;
  background: #343a3b;
  transform: skewX(-18deg);
}

.garage-level i.active {
  background: #39ff72;
  box-shadow: 0 0 10px rgba(57, 255, 114, 0.45);
}

.garage-upgrade button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
  padding: 0 14px;
}

.garage-upgrade button strong {
  color: #ffef8c;
}

.garage-upgrade button:disabled {
  color: rgba(255, 255, 255, 0.48);
  background: #343a3b;
  box-shadow: 0 5px 0 #171a1a;
  cursor: default;
}

.garage-panel footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.garage-panel footer span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .garage-screen { align-items: start; padding: 10px; }
  .garage-panel { width: calc(100vw - 20px); animation: none; transform: none; }
  .garage-panel header { position: relative; display: block; padding: 14px 90px 14px 16px; }
  .garage-panel header > div { min-width: 0; }
  .garage-panel h1 { font-size: 22px; white-space: nowrap; }
  #garageMoney { position: absolute; top: 22px; right: 16px; font-size: 21px; }
  .garage-car-stage { min-height: 112px; }
  .garage-car { transform: scale(0.72); }
  .garage-car-stage > span { display: none; }
  .garage-upgrades { grid-template-columns: minmax(0, 1fr); min-width: 0; width: 100%; }
  .garage-upgrade { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; width: 100%; min-width: 0; padding: 13px 16px; box-sizing: border-box; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .garage-level { width: calc(100vw - 72px); max-width: 100%; }
  .garage-upgrade button { min-width: 0; width: calc(100vw - 72px); max-width: 100%; box-sizing: border-box; }
  .garage-panel footer { align-items: stretch; flex-direction: column; }
  .garage-panel footer button { width: 100%; }
  .pause-actions { flex-direction: column; align-items: center; }
}

.menu-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.54);
  animation: arrestFlash 720ms ease-out both;
}

.menu-card {
  position: relative;
  width: min(820px, calc(100vw - 34px));
  padding-top: 16px;
  text-align: center;
  transform: rotate(-2.5deg);
  animation: menuCardIn 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.menu-kicker {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(13px, 1.7vw, 20px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  animation: arrestDetailIn 820ms ease-out 420ms both;
}

.menu-card h1 {
  width: min-content;
  min-width: min(780px, calc(100vw - 34px));
  margin: 0 auto;
  color: #f6f6f6;
  font-size: clamp(52px, 11vw, 124px);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 5px 0 #101010,
    0 12px 24px rgba(0, 0, 0, 0.7),
    5px 0 0 rgba(207, 0, 22, 0.65);
}

.menu-rule {
  width: min(560px, 82vw);
  height: 9px;
  margin: 22px auto 15px;
  background: #d50019;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55);
  transform: skewX(-22deg);
  animation: arrestRuleIn 520ms ease-out 320ms both;
}

.menu-card p {
  max-width: min(620px, calc(100vw - 44px));
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 2.1vw, 21px);
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  animation: arrestDetailIn 900ms ease-out 540ms both;
}

.menu-card button {
  min-width: 176px;
  height: 54px;
  box-shadow:
    0 7px 0 #7f000e,
    0 18px 28px rgba(0, 0, 0, 0.42);
  transform: translateY(0);
  animation: restartIn 520ms ease-out 780ms both;
}

.menu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  animation: restartIn 520ms ease-out 780ms both;
}

.device-card .secondary-button,
.menu-card .secondary-button {
  background: #252929;
  box-shadow:
    0 7px 0 #101313,
    0 18px 28px rgba(0, 0, 0, 0.42);
}

.device-card .secondary-button:hover,
.menu-card .secondary-button:hover {
  background: #333a3a;
}

.menu-card .public-button {
  min-width: 224px;
  color: #11110b;
  background: #ffdf54;
  box-shadow:
    0 7px 0 #9d6c00,
    0 18px 30px rgba(0, 0, 0, 0.46),
    0 0 24px rgba(255, 223, 84, 0.28);
}

.menu-card .public-button:hover {
  background: #fff06d;
}

.menu-card .customize-button {
  min-width: 268px;
  color: #06100b;
  background: #39ff72;
  box-shadow:
    0 7px 0 #0a7c33,
    0 18px 30px rgba(0, 0, 0, 0.46),
    0 0 24px rgba(57, 255, 114, 0.24);
}

.menu-card .customize-button:hover {
  background: #65ff91;
}

.menu-card button:active {
  transform: translateY(5px);
  box-shadow:
    0 2px 0 #7f000e,
    0 10px 18px rgba(0, 0, 0, 0.38);
}

.join-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: min(520px, calc(100vw - 42px));
  margin: 18px auto 0;
  animation: arrestDetailIn 260ms ease-out both;
}

.join-form input {
  width: 188px;
  height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: white;
  background: rgba(6, 8, 8, 0.78);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  outline: none;
}

.join-form input:focus {
  border-color: #ffdf54;
}

.name-form-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(580px, calc(100vw - 42px));
  margin: 18px auto 0;
  animation: arrestDetailIn 520ms ease-out 720ms both;
}

.name-form-row input {
  width: min(260px, calc(100vw - 64px));
  height: 54px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: white;
  background: rgba(6, 8, 8, 0.78);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  outline: none;
}

.name-form-row input:focus {
  border-color: #ffdf54;
}

.name-form-row button {
  min-width: 148px;
  height: 54px;
}

.join-form button {
  min-width: 104px;
}

.customize-screen {
  z-index: 11;
}

.customize-card {
  position: relative;
  width: min(960px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
  box-sizing: border-box;
  padding: 20px;
  overflow: auto;
  color: white;
  background:
    linear-gradient(145deg, rgba(10, 12, 12, 0.94), rgba(22, 26, 24, 0.88)),
    rgba(10, 12, 12, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  text-align: center;
  transform: rotate(-1.2deg);
  animation: menuCardIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.customize-card h1 {
  margin: 0;
  font-size: clamp(44px, 8vw, 88px);
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow:
    0 5px 0 #101010,
    0 12px 24px rgba(0, 0, 0, 0.7),
    5px 0 0 rgba(207, 0, 22, 0.65);
}

.customize-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 18px;
}

.character-preview {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: inset 0 -80px 120px rgba(0, 0, 0, 0.22);
}

.preview-head,
.preview-torso,
.preview-arms,
.preview-legs {
  position: absolute;
}

.preview-head {
  top: 62px;
  width: 82px;
  height: 90px;
  border-radius: 42% 42% 46% 46%;
  background: var(--skin, #f1c08a);
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.14), 0 10px 0 rgba(0, 0, 0, 0.28);
}

.preview-head span {
  position: absolute;
  left: 6px;
  top: -5px;
  width: 70px;
  height: 31px;
  border-radius: 40px 40px 10px 10px;
  background: var(--hair, #171411);
}

.preview-head i {
  position: absolute;
  left: 21px;
  top: 45px;
  width: 40px;
  height: 10px;
  border-radius: 2px;
  background: #0b1011;
}

.preview-torso {
  top: 162px;
  width: 104px;
  height: 108px;
  border-radius: 10px 10px 4px 4px;
  background: var(--shirt, #2f6fd0);
  box-shadow: inset 0 14px 0 var(--shirtLight, #4b8dff), 0 10px 0 rgba(0, 0, 0, 0.24);
}

.preview-arms {
  top: 172px;
  width: 170px;
  height: 116px;
}

.preview-arms span {
  position: absolute;
  top: 0;
  width: 28px;
  height: 116px;
  border-radius: 16px;
  background: var(--skin, #f1c08a);
  box-shadow: inset 0 -18px 0 rgba(0, 0, 0, 0.16);
}

.preview-arms span:first-child {
  left: 0;
  transform: rotate(4deg);
}

.preview-arms span:last-child {
  right: 0;
  transform: rotate(-4deg);
}

.preview-legs {
  top: 270px;
  width: 86px;
  height: 96px;
}

.preview-legs span {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 96px;
  border-radius: 0 0 8px 8px;
  background: var(--pants, #123d87);
  box-shadow: inset 0 -14px 0 #111315;
}

.preview-legs span:first-child {
  left: 0;
}

.preview-legs span:last-child {
  right: 0;
}

.customize-options {
  display: grid;
  gap: 12px;
}

.customize-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  text-align: left;
}

.customize-row strong {
  font-size: 14px;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 9px;
}

.swatch-button {
  min-width: 0;
  width: 100%;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: var(--swatch, #ffffff);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.24),
    0 7px 0 rgba(0, 0, 0, 0.25);
}

.swatch-button.active {
  border-color: #ffdf54;
  box-shadow:
    0 0 0 3px rgba(255, 223, 84, 0.24),
    0 7px 0 rgba(0, 0, 0, 0.25);
}

.customize-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.customize-actions button {
  min-width: 190px;
}

.menu-status {
  min-height: 18px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

.panel {
  width: min(420px, calc(100vw - 34px));
  padding: 26px;
  background: rgba(18, 21, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.panel h1 {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.panel p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

button:not(.mobile-action):not(.swatch-button):not(.mobile-pause):not(.mobile-map):not(.icon-button):not(.garage-repair-button) {
  min-width: 160px;
  height: 46px;
  border: 0;
  border-radius: 6px;
  background: #e20718;
  color: white;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

button:not(.mobile-action):not(.swatch-button):not(.mobile-pause):not(.mobile-map):not(.icon-button):not(.garage-repair-button):hover {
  background: #ff1d2d;
}

@media (max-width: 760px) {
  .wanted-stars {
    top: 9px;
    gap: 5px;
    width: 210px;
    height: 38px;
    font-size: 32px;
  }

  .game-code {
    top: 54px;
  }

  .smash-combo {
    right: 10px;
    top: 38%;
    width: 164px;
    padding: 8px 10px 9px;
  }

  .smash-combo strong {
    font-size: 30px;
  }

  .reward-pop {
    top: 55%;
    font-size: 21px;
  }

  .customize-layout {
    grid-template-columns: 1fr;
  }

  .character-preview {
    min-height: 300px;
  }

  .preview-head {
    top: 38px;
  }

  .preview-torso {
    top: 132px;
  }

  .preview-arms {
    top: 142px;
  }

  .preview-legs {
    top: 240px;
  }
}

.store-death-screen {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background: rgba(5, 6, 6, 0.76);
  animation: storeDeathBackdrop 900ms ease-out both;
}

.store-death-screen.hidden {
  display: none;
}

.store-death-flash {
  position: absolute;
  inset: 0;
  background: #b70016;
  mix-blend-mode: screen;
  animation: storeDeathFlash 850ms ease-out both;
}

.store-death-vignette {
  position: absolute;
  inset: 0;
  border: min(10vw, 120px) solid rgba(70, 0, 8, 0.48);
  box-sizing: border-box;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.94);
  animation: storeDeathVignette 1400ms ease-out both;
}

.store-death-card {
  position: relative;
  width: min(820px, calc(100vw - 34px));
  text-align: center;
  transform: rotate(-2deg);
  animation: storeDeathCardIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}

.store-death-kicker {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.72);
}

.store-death-card h1 {
  margin: 4px 0 0;
  color: #f2f2f0;
  font-size: clamp(64px, 14vw, 156px);
  line-height: 0.84;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 6px 0 #100104,
    0 14px 28px rgba(0, 0, 0, 0.8),
    7px 0 0 rgba(199, 0, 23, 0.78);
}

.store-death-rule {
  width: min(560px, 82vw);
  height: 9px;
  margin: 24px auto 14px;
  background: #d20720;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.68);
  transform: skewX(-22deg);
  animation: storeDeathRuleIn 480ms ease-out 960ms both;
}

.store-death-card p {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 2.2vw, 23px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.62);
}

.store-death-card button {
  min-width: 210px !important;
  opacity: 0;
  animation: storeDeathButtonIn 460ms ease-out 1250ms both;
}

@keyframes storeDeathBackdrop {
  0%, 32% { background: rgba(5, 6, 6, 0); }
  100% { background: rgba(5, 6, 6, 0.76); }
}

@keyframes storeDeathFlash {
  0% { opacity: 0; }
  12% { opacity: 0.82; }
  100% { opacity: 0; }
}

@keyframes storeDeathVignette {
  0% { opacity: 0; transform: scale(1.24); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes storeDeathCardIn {
  0% { opacity: 0; transform: translateY(54px) rotate(-7deg) scale(1.2); filter: blur(5px); }
  68% { opacity: 1; transform: translateY(-4px) rotate(-1deg) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); filter: blur(0); }
}

@keyframes storeDeathRuleIn {
  0% { opacity: 0; transform: scaleX(0) skewX(-22deg); }
  100% { opacity: 1; transform: scaleX(1) skewX(-22deg); }
}

@keyframes storeDeathButtonIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}


.arrest-cinematic {
  position: fixed;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
}

.arrest-cinematic.hidden {
  display: none;
}

.arrest-cinema-wash,
.arrest-cinema-vignette,
.arrest-cinema-grain,
.arrest-cinema-final-flash {
  position: absolute;
  inset: 0;
}

.arrest-cinema-wash {
  mix-blend-mode: screen;
  opacity: 0;
}

.arrest-cinema-red {
  background: linear-gradient(90deg, rgba(255, 18, 38, 0.48), transparent 56%);
  animation: arrestCinemaRed 760ms steps(2, end) infinite;
}

.arrest-cinema-blue {
  background: linear-gradient(270deg, rgba(16, 104, 255, 0.5), transparent 58%);
  animation: arrestCinemaBlue 760ms steps(2, end) 380ms infinite;
}

.arrest-cinema-vignette {
  background: radial-gradient(circle at 50% 48%, transparent 30%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.78) 100%);
  animation: arrestCinemaVignette 1400ms ease-out both;
}

.arrest-cinema-grain {
  inset: -45%;
  opacity: 0.11;
  background: repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 5px);
  animation: arrestCinemaGrain 170ms steps(2, end) infinite;
}

.arrest-cinema-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(54px, 10vh, 108px);
  background: #050607;
  box-shadow: 0 0 38px rgba(0, 0, 0, 0.62);
  animation: arrestCinemaBars 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.arrest-cinema-bar-top { top: 0; transform-origin: top; }
.arrest-cinema-bar-bottom { bottom: 0; transform-origin: bottom; }

.arrest-cinema-frame {
  position: absolute;
  inset: clamp(72px, 12vh, 126px) clamp(18px, 3vw, 52px);
  opacity: 0.55;
}

.arrest-cinema-frame i {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgba(255, 255, 255, 0.72);
  border-style: solid;
}

.arrest-cinema-frame i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.arrest-cinema-frame i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.arrest-cinema-frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.arrest-cinema-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }

.arrest-cinema-copy {
  position: absolute;
  left: clamp(24px, 6vw, 92px);
  bottom: clamp(76px, 13vh, 138px);
  width: min(620px, calc(100vw - 48px));
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85);
  animation: arrestCinemaCopy 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.arrest-cinema-copy small {
  display: block;
  margin-bottom: 7px;
  color: #ff4054;
  font-size: clamp(10px, 1.25vw, 14px);
  font-weight: 1000;
}

.arrest-cinema-copy strong {
  display: block;
  max-width: 100%;
  font-size: clamp(30px, 5.5vw, 72px);
  line-height: 0.92;
  font-weight: 1000;
}

.arrest-cinema-copy span {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(11px, 1.4vw, 17px);
  font-weight: 850;
}

.arrest-cinema-copy > b {
  display: block;
  width: min(430px, 72vw);
  height: 4px;
  margin-top: 17px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}

.arrest-cinema-copy > b > i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #e9152b, #fff 50%, #2879ff);
  transform: scaleX(0);
  transform-origin: left;
}

.arrest-cinema-stamp {
  position: absolute;
  top: clamp(77px, 13vh, 140px);
  right: clamp(25px, 6vw, 92px);
  padding: 8px 15px 7px;
  border: 4px solid rgba(255, 255, 255, 0.82);
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 2.3vw, 29px);
  font-weight: 1000;
  text-transform: uppercase;
  transform: rotate(6deg) scale(0);
  opacity: 0;
}

.arrest-cinematic.phase-3 .arrest-cinema-stamp {
  animation: arrestCinemaStamp 460ms cubic-bezier(0.18, 1.7, 0.3, 1) both;
}

.arrest-cinema-final-flash {
  z-index: 3;
  background: #fff;
  opacity: 0;
}

.arrest-cinematic.final-hit .arrest-cinema-final-flash {
  animation: arrestCinemaFinal 780ms ease-out both;
}

body.arrest-cutscene-active #hud,
body.arrest-cutscene-active #minimap,
body.arrest-cutscene-active #notificationFeed,
body.arrest-cutscene-active #smashCombo,
body.arrest-cutscene-active #rewardLayer {
  animation: hudDropOut 360ms ease-in both;
}

body.arrest-cutscene-active #game {
  animation: arrestCinemaImage 2100ms ease-out both;
}

@keyframes arrestCinemaRed {
  0%, 42% { opacity: 0.05; }
  43%, 100% { opacity: 0.52; }
}

@keyframes arrestCinemaBlue {
  0%, 42% { opacity: 0.05; }
  43%, 100% { opacity: 0.5; }
}

@keyframes arrestCinemaVignette {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes arrestCinemaGrain {
  0% { transform: translate3d(-2%, -1%, 0) rotate(0.5deg); }
  100% { transform: translate3d(2%, 1%, 0) rotate(-0.5deg); }
}

@keyframes arrestCinemaBars {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes arrestCinemaCopy {
  from { opacity: 0; transform: translateX(-55px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes arrestCinemaStamp {
  0% { opacity: 0; transform: rotate(13deg) scale(1.8); }
  70% { opacity: 1; transform: rotate(4deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(6deg) scale(1); }
}

@keyframes arrestCinemaFinal {
  0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes arrestCinemaImage {
  from { filter: saturate(1) contrast(1); }
  to { filter: saturate(0.7) contrast(1.16); }
}

.arrest-screen {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0.96)),
    linear-gradient(105deg, rgba(120, 0, 20, 0.32), rgba(10, 10, 10, 0.52) 45%, rgba(0, 0, 0, 0.88));
  backdrop-filter: grayscale(1) contrast(1.35) blur(2px);
  animation: arrestBackdrop 1800ms ease-out both;
}

.arrest-screen.hidden {
  display: none;
}

.arrest-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  animation: arrestFlash 820ms ease-out both;
}

.arrest-scanlines {
  position: absolute;
  inset: -20%;
  opacity: 0.24;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.1) 0,
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px,
    transparent 7px
  );
  transform: rotate(-7deg);
  animation: scanDrift 2400ms linear infinite;
}

.arrest-card {
  position: relative;
  width: min(760px, calc(100vw - 34px));
  text-align: center;
  transform: rotate(-3deg);
  animation: arrestCardIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.arrest-kicker {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  animation: arrestDetailIn 900ms ease-out 650ms both;
}

.arrest-card h1 {
  margin: 0;
  color: #f2f2f2;
  font-size: clamp(58px, 13vw, 148px);
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 5px 0 #111,
    0 12px 22px rgba(0, 0, 0, 0.68),
    5px 0 0 rgba(196, 0, 22, 0.62);
}

.arrest-rule {
  width: min(520px, 80vw);
  height: 9px;
  margin: 22px auto 13px;
  background: #c70017;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55);
  transform: skewX(-22deg);
  animation: arrestRuleIn 520ms ease-out 420ms both;
}

.arrest-card p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 2.2vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  animation: arrestDetailIn 900ms ease-out 760ms both;
}

.arrest-card button {
  opacity: 0;
  transform: translateY(12px);
  animation: restartIn 520ms ease-out 1250ms both;
}

body.arrested #game {
  animation: arrestedGameFreeze 1400ms ease-out both;
}

body.arrested #hud,
body.arrested #minimap,
body.arrested #notificationFeed {
  animation: hudDropOut 420ms ease-in both;
}

@keyframes arrestFlash {
  0% { opacity: 0; }
  16% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes arrestBackdrop {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes arrestCardIn {
  0% {
    opacity: 0;
    transform: translateX(-120vw) rotate(-10deg) scale(1.25);
    filter: blur(4px);
  }
  58% {
    opacity: 1;
    transform: translateX(3vw) rotate(-3deg) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(-3deg) scale(1);
    filter: blur(0);
  }
}

@keyframes menuCardIn {
  0% {
    opacity: 0;
    transform: translateX(-80vw) rotate(-8deg) scale(1.12);
    filter: blur(3px);
  }
  64% {
    opacity: 1;
    transform: translateX(2vw) rotate(-2.5deg) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(-2.5deg) scale(1);
    filter: blur(0);
  }
}

@keyframes arrestRuleIn {
  0% { opacity: 0; transform: scaleX(0) skewX(-22deg); }
  100% { opacity: 1; transform: scaleX(1) skewX(-22deg); }
}

@keyframes arrestDetailIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes restartIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scanDrift {
  0% { transform: translateY(-18px) rotate(-7deg); }
  100% { transform: translateY(18px) rotate(-7deg); }
}

@keyframes arrestedGameFreeze {
  0% { filter: grayscale(0) contrast(1) saturate(1); transform: scale(1); }
  100% { filter: grayscale(1) contrast(1.22) saturate(0.15); transform: scale(1.025); }
}

@keyframes hudDropOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

@keyframes notificationIn {
  0% { opacity: 0; transform: translateX(-24px) skewX(-7deg); }
  100% { opacity: 1; transform: translateX(0) skewX(-7deg); }
}

@keyframes notificationOut {
  100% { opacity: 0; transform: translateX(-18px) skewX(-7deg); }
}

@keyframes purchasePromptIn {
  0% { opacity: 0; transform: translate(-50%, 10px) skewX(-8deg) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0) skewX(-8deg) scale(1); }
}

@keyframes purchasePromptPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

@keyframes checkoutSequenceIn {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes smashComboPop {
  0% { transform: skewX(-7deg) scale(0.86); filter: brightness(1.8); }
  58% { transform: skewX(-7deg) scale(1.08); }
  100% { transform: skewX(-7deg) scale(1); filter: brightness(1); }
}

@keyframes rewardPop {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.72) rotate(-3deg); }
  22% { opacity: 1; transform: translate(-50%, -4px) scale(1.1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -72px) scale(1) rotate(-3deg); }
}

@keyframes moneyRewardPulse {
  0% { transform: scale(1); color: #ffffff; }
  45% { transform: scale(1.22); color: #ffe04d; }
  100% { transform: scale(1); color: #ffffff; }
}

@keyframes introReveal {
  0% { background: #050607; }
  100% { background: transparent; }
}

@keyframes introLocationIn {
  0% { opacity: 0; transform: translateX(-46px) skewX(-8deg); }
  100% { opacity: 1; transform: translateX(0) skewX(-8deg); }
}

@keyframes introLocationOut {
  100% { opacity: 0; transform: translateX(-26px) skewX(-8deg); }
}

@keyframes introTitleHit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.1); filter: blur(6px); }
  48% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(0.96); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); filter: blur(0); }
}

@keyframes introStartHit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(2.6); filter: blur(7px); }
  42% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(0.9); filter: blur(0); }
  72% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1.15); }
}

@keyframes introBarTop {
  100% { transform: translateY(-105%); }
}

@keyframes introBarBottom {
  100% { transform: translateY(105%); }
}

/* Main menu */
#menu {
  z-index: 20;
  place-items: center;
  padding: 28px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(5, 7, 8, 0.72);
  backdrop-filter: grayscale(0.5) contrast(1.18) blur(4px);
}

#menu::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background: repeating-linear-gradient(112deg, transparent 0, transparent 70px, rgba(255, 255, 255, 0.04) 72px, transparent 74px);
  animation: menuRoadRush 8s linear infinite;
}

#menu .menu-flash {
  background: #e3061b;
  mix-blend-mode: screen;
  animation-duration: 520ms;
}

#menu .menu-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  column-gap: 54px;
  width: min(1120px, calc(100vw - 56px));
  padding: 38px 0 0;
  text-align: left;
  transform: none;
  animation: commandMenuIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#menu .menu-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 172px;
  height: 8px;
  background: #e3061b;
  box-shadow: 184px 0 0 #ffdf54, 238px 0 0 rgba(255, 255, 255, 0.25);
  transform: skewX(-25deg);
}

.menu-brand {
  align-self: center;
  min-width: 0;
}

#menu .menu-kicker {
  margin: 0 0 9px;
  color: #ffdf54;
  font-size: 15px;
  text-align: left;
  animation: menuDetailSlide 520ms ease-out 180ms both;
}

#menu .menu-card h1 {
  position: relative;
  width: auto;
  min-width: 0;
  max-width: 660px;
  margin: 0;
  color: #f5f7f6;
  font-size: 94px;
  line-height: 0.78;
  text-align: left;
  text-shadow: 0 7px 0 #090b0b, 7px 0 0 rgba(213, 0, 25, 0.72);
  animation: menuTitleHit 700ms cubic-bezier(0.16, 1, 0.3, 1) 70ms both;
}

#menu .menu-card h1 span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 49px;
  line-height: 0.8;
}

#menu .menu-card h1::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  color: #23d7ff;
  opacity: 0;
  clip-path: inset(44% 0 38% 0);
  animation: menuTitleGlitch 4.6s steps(1) infinite 1.4s;
}

#menu .menu-rule {
  width: min(490px, 92%);
  height: 7px;
  margin: 27px 0 15px;
  background: #e3061b;
}

#menu .menu-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 18px;
  text-align: left;
}

.menu-command {
  position: relative;
  padding: 18px;
  background: rgba(12, 16, 17, 0.92);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.5);
}

.menu-featured {
  display: grid;
  gap: 11px;
}

#menu .mode-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 32px;
  grid-template-rows: auto auto;
  align-content: center;
  width: 100%;
  height: 82px;
  min-width: 0;
  padding: 0 20px;
  overflow: hidden;
  text-align: left;
  border-left: 5px solid rgba(255, 255, 255, 0.78);
  border-radius: 2px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.55);
  animation: menuOptionIn 430ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#menu .mode-button::before,
#menu .menu-actions button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(-112%) skewX(-20deg);
  transition: transform 260ms ease;
}

#menu .mode-button:hover::before,
#menu .menu-actions button:hover::before {
  transform: translateX(112%) skewX(-20deg);
}

#menu .mode-button small,
#menu .mode-button strong {
  position: relative;
  z-index: 1;
  display: block;
}

#menu .mode-button small {
  align-self: end;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  text-transform: uppercase;
}

#menu .mode-button strong {
  align-self: start;
  font-size: 22px;
  text-transform: uppercase;
}

#menu .mode-button i {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 19px;
  height: 19px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

#menu .mode-button:hover i {
  transform: translateX(5px) rotate(45deg);
}

#menu .solo-button {
  background: #d8071d;
}

#menu .public-button {
  color: #10130f;
  background: #ffdf54;
  border-left-color: #39ff72;
  box-shadow: 0 7px 0 #8c6500, 0 0 26px rgba(255, 223, 84, 0.2);
}

#menu .public-button small {
  color: rgba(16, 19, 15, 0.62);
}

#menu .menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 13px;
  animation: none;
}

#menu .menu-actions button {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  overflow: hidden;
  color: #fff;
  background: #262d2e;
  border-radius: 2px;
  box-shadow: 0 5px 0 #0c0f0f;
  animation: menuOptionIn 430ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

#menu .menu-actions button span {
  position: relative;
  z-index: 1;
}

#menu .menu-actions .customize-button {
  grid-column: 1 / 3;
  min-width: 0;
  color: #07140c;
  background: #39ff72;
  box-shadow: 0 5px 0 #0b7a33;
}

#menu .join-form {
  width: 100%;
  margin-top: 13px;
}

#menu .menu-status {
  min-height: 16px;
  margin-top: 11px;
  text-align: left;
}

.menu-ticker {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.menu-ticker i {
  width: 8px;
  height: 8px;
  background: #39ff72;
  border-radius: 50%;
  box-shadow: 0 0 12px #39ff72;
  animation: menuOnlinePulse 1.4s ease-in-out infinite;
}

.menu-ticker b {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

/* Garage workshop */
.garage-panel {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border-top-color: #39ff72;
  background: #101415;
}

.garage-panel header {
  padding: 15px 20px;
  background: #0b0e0f;
}

.garage-panel h1 {
  font-size: 37px;
}

.garage-workshop {
  display: grid;
  grid-template-columns: minmax(390px, 0.86fr) minmax(520px, 1.14fr);
  height: min(650px, calc(100vh - 176px));
  min-height: 0;
  max-height: calc(100vh - 176px);
}

.garage-showroom {
  position: relative;
  display: grid;
  grid-template-rows: minmax(235px, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #252c2d;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.garage-showroom::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 54px, rgba(255, 255, 255, 0.08) 55px, transparent 56px);
  transform: perspective(380px) rotateX(58deg) translateY(38%);
  transform-origin: bottom;
}

.garage-car-stage {
  min-height: 280px;
  background: transparent;
  border: 0;
}

.garage-car-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 190px;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(-50%) skewX(-12deg);
  filter: blur(18px);
}

.garage-car-stage > span {
  right: auto;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  color: #39ff72;
  font-size: 12px;
}

.garage-car-preview.tier-2 { filter: drop-shadow(0 0 18px rgba(57, 255, 114, 0.22)); }
.garage-car-preview.tier-3 { filter: drop-shadow(0 0 25px rgba(57, 255, 114, 0.34)); }
.garage-car-preview.tier-4 { filter: drop-shadow(0 0 30px rgba(255, 223, 84, 0.4)); }
.garage-car-preview.tier-5 { filter: drop-shadow(0 0 34px rgba(57, 255, 114, 0.5)); }

.garage-spoiler {
  position: absolute;
  right: 11px;
  top: 20px;
  display: none;
  width: 45px;
  height: 6px;
  background: #111;
  box-shadow: 8px 8px 0 -1px #111;
}

.garage-car.tier-3 .garage-spoiler,
.garage-car.tier-4 .garage-spoiler,
.garage-car.tier-5 .garage-spoiler {
  display: block;
}

.garage-stats {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 17px 20px 20px;
  background: rgba(8, 11, 12, 0.82);
}

.garage-diagnostics {
  position: relative;
  z-index: 3;
  padding: 13px 16px 14px;
  background: #111718;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.garage-diagnostics > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
  background: transparent;
  border: 0;
}

.garage-diagnostics header small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 8px;
  font-weight: 1000;
  text-transform: uppercase;
}

.garage-diagnostics h2 {
  margin: 1px 0 0;
  color: #39ff72;
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
}

#garageConditionScore {
  color: #ffdf54;
  font-size: 23px;
}

.garage-repair-list {
  display: grid;
  gap: 6px;
}

.garage-repair-list > div {
  display: grid;
  grid-template-columns: 105px minmax(55px, 1fr) 37px 84px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.garage-repair-list > div > span {
  position: relative;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
}

.garage-repair-list > div > span > i {
  grid-row: 1 / 3;
  width: 7px;
  height: 7px;
  background: #39ff72;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.garage-repair-list b,
.garage-repair-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-repair-list b {
  font-size: 10px;
  text-transform: uppercase;
}

.garage-repair-list small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 8px;
}

.garage-repair-list em {
  height: 6px;
  overflow: hidden;
  background: #343b3c;
  transform: skewX(-16deg);
}

.garage-repair-list em i {
  display: block;
  width: 100%;
  height: 100%;
  background: #39ff72;
  transform-origin: left;
  transition: transform 260ms ease, background 180ms ease;
}

.garage-repair-list > div > strong {
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
  text-align: right;
}

.garage-repair-button {
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  color: #fff;
  background: #df071b;
  border: 0;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
}

.garage-repair-button:hover:not(:disabled) {
  background: #ff1d2d;
}

.garage-repair-button:disabled {
  color: rgba(255, 255, 255, 0.42);
  background: #343b3c;
  cursor: default;
}

.garage-repair-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 34px;
  margin-top: 10px;
  padding: 0 12px;
}

.garage-repair-all strong {
  color: #ffef8c;
}

.garage-diagnostics.repairing {
  animation: garageDiagnosticsRepair 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.garage-repair-list > div.warning > span > i,
.garage-repair-list > div.warning em i {
  color: #ffcf3f;
  background: #ffcf3f;
}

.garage-repair-list > div.critical > span > i,
.garage-repair-list > div.critical em i {
  color: #f02035;
  background: #f02035;
}

.garage-stats > div {
  display: grid;
  grid-template-columns: 94px 1fr 34px;
  align-items: center;
  gap: 9px;
}

.garage-stats span,
.garage-stats strong {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.garage-stats strong {
  color: #ffdf54;
  text-align: right;
}

.garage-stats b {
  height: 7px;
  overflow: hidden;
  background: #363d3e;
  transform: skewX(-17deg);
}

.garage-stats b i {
  display: block;
  width: 100%;
  height: 100%;
  background: #39ff72;
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.garage-upgrades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 1px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.1);
}

.garage-upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 9px;
  min-width: 0;
  padding: 13px 15px 15px;
  box-sizing: border-box;
  background: #151a1b;
  border: 0;
  transition: background 160ms ease;
}

.garage-upgrade[data-upgrade="weight"] {
  grid-column: 1 / 3;
}

.garage-upgrade:hover {
  background: #1d2425;
}

.garage-upgrade.installing {
  animation: garagePartInstall 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.garage-upgrade.maxed h2,
.garage-upgrade.maxed small {
  color: #ffdf54;
}

.garage-upgrade h2 {
  margin: 1px 0 3px;
  font-size: 18px;
}

.garage-upgrade p {
  min-height: 0;
  font-size: 11px;
}

.garage-level {
  grid-template-columns: repeat(5, 1fr);
}

.garage-upgrade button {
  height: 42px;
  border-radius: 2px;
  box-shadow: 0 5px 0 #75000c;
}

.garage-upgrade button:not(:disabled):hover {
  background: #ff1d2d;
}

.garage-car-preview.install-pulse {
  animation: garageCarInstall 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.garage-panel footer {
  min-height: 58px;
  padding: 9px 20px;
  box-sizing: border-box;
  background: #0b0e0f;
}

@media (max-width: 860px) {
  #menu {
    place-items: start center;
    padding: 18px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #menu .menu-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    width: min(560px, calc(100vw - 36px));
    padding-top: 24px;
  }

  #menu .menu-card h1 {
    font-size: 64px;
    line-height: 0.8;
  }

  #menu .menu-card h1 span {
    font-size: 33px;
  }

  #menu .menu-rule {
    margin-top: 18px;
  }

  .menu-ticker {
    grid-column: 1;
    margin-top: 0;
  }

  .garage-screen {
    align-items: start;
    padding: 8px;
  }

  .garage-panel {
    width: calc(100vw - 16px);
    max-height: none;
    overflow: visible;
    animation: none;
    transform: none;
  }

  .garage-panel header {
    position: relative;
    display: block;
    padding: 12px 88px 12px 14px;
  }

  .garage-panel h1 {
    font-size: 20px;
    white-space: nowrap;
  }

  #garageMoney {
    position: absolute;
    top: 18px;
    right: 14px;
    font-size: 20px;
  }

  .garage-workshop {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .garage-showroom {
    grid-template-rows: 150px auto auto;
    border-right: 0;
  }

  .garage-car-stage {
    min-height: 150px;
  }

  .garage-stats {
    gap: 7px;
    padding: 11px 14px 17px;
  }

  .garage-diagnostics {
    padding: 12px 14px 13px;
  }

  .garage-repair-list > div {
    grid-template-columns: 90px minmax(50px, 1fr) 34px 76px;
    gap: 6px;
  }

  .garage-stats > div {
    grid-template-columns: 80px 1fr 30px;
  }

  .garage-upgrades {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .garage-upgrade {
    width: 100%;
    padding: 12px 14px 14px;
  }

  .garage-upgrade[data-upgrade="weight"] {
    grid-column: 1;
  }

  .garage-upgrade button,
  .garage-level {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .garage-panel footer {
    align-items: stretch;
    flex-direction: column;
  }

  .garage-panel footer button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  #menu .menu-card h1 {
    font-size: 52px;
  }

  #menu .menu-featured {
    gap: 8px;
  }

  #menu .mode-button {
    height: 70px;
  }

  #menu .mode-button strong {
    font-size: 18px;
  }

  #menu .menu-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #menu .menu-actions .customize-button {
    grid-column: 1;
  }
}

@keyframes commandMenuIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.97); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes menuTitleHit {
  0% { opacity: 0; transform: translateX(-70px) skewX(-8deg); filter: blur(5px); }
  62% { opacity: 1; transform: translateX(7px) skewX(-2deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes menuDetailSlide {
  0% { opacity: 0; transform: translateX(-28px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes menuOptionIn {
  0% { opacity: 0; transform: translateX(38px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes menuTitleGlitch {
  0%, 91%, 100% { opacity: 0; transform: translate(0, 0); }
  92% { opacity: 0.65; transform: translate(7px, -2px); }
  94% { opacity: 0.4; transform: translate(-5px, 2px); }
  96% { opacity: 0; transform: translate(0, 0); }
}

@keyframes menuRoadRush {
  0% { transform: translateX(-90px); }
  100% { transform: translateX(90px); }
}

@keyframes menuOnlinePulse {
  0%, 100% { opacity: 0.55; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes multiplayerLoadingIn {
  0% { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes multiplayerRadar {
  to { transform: rotate(360deg); }
}

@keyframes multiplayerProgress {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(280%); }
}

@keyframes multiplayerOnlinePulse {
  0%, 100% { opacity: 0.45; transform: scale(0.76); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes multiplayerScan {
  to { transform: translateY(48px); }
}

@keyframes garagePartInstall {
  0% { background: #39ff72; filter: brightness(1.8); }
  35% { background: #253f31; }
  100% { background: #151a1b; filter: brightness(1); }
}

@keyframes garageCarInstall {
  0% { transform: scale(0.92); filter: brightness(2.2) drop-shadow(0 0 42px rgba(57, 255, 114, 0.9)); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes garageDiagnosticsRepair {
  0% { background: #f4f7ef; filter: brightness(1.7); }
  22% { background: #1e5935; }
  100% { background: #111718; filter: brightness(1); }
}

@keyframes vehicleConditionWarning {
  from { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32); }
  to { box-shadow: 0 8px 24px rgba(240, 32, 53, 0.34); }
}

#missionMenu #closeMissionMenu {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  background: #242b2c;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

#missionMenu #closeMissionMenu:hover {
  background: #343d3e;
}

#missionMenu .mission-grid > button {
  width: 100%;
  min-width: 0;
  height: auto;
  background: #151b1c;
  border-radius: 0;
  box-shadow: none;
  white-space: normal;
}

#missionMenu .mission-grid > button:nth-child(5) {
  background: #1c1819;
  box-shadow: inset 5px 0 0 #e20718;
}

#missionMenu .mission-grid > button:hover,
#missionMenu .mission-grid > button:focus-visible {
  background: #202829;
  box-shadow: inset 5px 0 0 #ffd83d, inset 0 0 0 1px rgba(255, 216, 61, 0.42);
}

#missionMenu .mission-grid span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  #missionMenu .mission-menu-panel {
    position: relative;
    min-width: 0;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    overflow: hidden;
  }

  #missionMenu .mission-menu-panel > header {
    position: relative;
    display: block;
    padding-right: 66px;
  }

  #missionMenu #closeMissionMenu {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 4;
    display: grid !important;
    place-items: center;
    visibility: visible;
    opacity: 1;
    color: #fff;
    background: #e20718;
  }

  #missionMenu .mission-grid > button {
    grid-template-columns: 48px minmax(0, calc(100vw - 112px));
    overflow: hidden;
  }

  #missionMenu .mission-grid span {
    display: block;
    width: calc(100vw - 112px);
    max-width: 260px;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  #missionMenu .mission-menu-panel > footer {
    justify-content: flex-end;
    padding: 10px 12px 10px 24px;
  }

  #missionMenu .mission-menu-panel > footer > span {
    display: none;
  }

  #missionMenu #closeMissionMenuMobile {
    display: block;
    position: fixed;
    left: 16px;
    right: auto;
    bottom: 16px;
    z-index: 60;
    width: 88px;
    min-width: 88px;
    height: 42px;
    padding: 0;
    color: #fff;
    background: #e20718;
    border-radius: 2px;
    font-size: 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.52);
  }
}

@keyframes missionHudIn {
  0% { opacity: 0; transform: translateX(-32px) skewX(-5deg); }
  100% { opacity: 1; transform: translateX(0) skewX(-5deg); }
}

@keyframes missionMenuIn {
  0% { opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}