/* Odoublet Cruise HUD: our San Andreas-style homage. Every size derives from --u, 1% of the game's
   shorter side (container units, so it also fits the half-screen split view; vmin where unsupported). */
.lcg-hud {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  container-type: size;
  --u: clamp(3.4px, 1vmin, 14.4px);
  --m: calc(var(--u) * 2.6);
  --radar: clamp(84px, calc(var(--u) * 16.5), 240px);
  --lcg-pale: #d3e0f2;
  --lcg-zone: #bdd1f1;
  --lcg-veh: #a2c77c;
  --lcg-grey: #9a9a9a;
  --lcg-name-font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --lcg-sub-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-family: var(--sa-font, Impact, sans-serif);
  color: #fff;
  line-height: 1;
}
@supports (width: 1cqmin) {
  .lcg-hud { --u: clamp(3.4px, 1cqmin, 14.4px); }
}
.lcg-hud .sa-text {
  -webkit-text-stroke: .15em #000;
  paint-order: stroke fill;
  text-shadow: .045em .055em 0 #000;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------- top right: icon, clock, money, stats */
.lcg-tr {
  position: absolute;
  top: var(--m);
  right: var(--m);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * .6);
}
.lcg-tr-top { display: flex; align-items: center; gap: calc(var(--u) * 1.1); }
.lcg-weapon { width: max(26px, calc(var(--u) * 8.4)); height: max(26px, calc(var(--u) * 8.4)); }
.lcg-weapon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lcg-weapon path { fill: #dcdcd6; stroke: #000; stroke-width: 3.4px; paint-order: stroke; stroke-linejoin: round; }
.lcg-tr-stack { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .35); }
.lcg-hud .lcg-clock { font-size: max(15px, calc(var(--u) * 4.4)); color: #ededed; }
.lcg-hud .lcg-money { font-size: max(16px, calc(var(--u) * 4.9)); color: var(--sa-money, #3c8d34); }
.lcg-hud .lcg-stat {
  display: none;
  justify-content: space-between;
  min-width: 8.6em;
  font-size: max(12px, calc(var(--u) * 3.2));
  color: var(--lcg-pale);
  font-variant-numeric: tabular-nums;
}
.lcg-hud .lcg-stat.is-on { display: flex; }
.lcg-stat-l { margin-right: .7em; }
.lcg-timer { margin-top: calc(var(--u) * .9); }

/* ---------------------------------------------------------------- radio station, top centre */
.lcg-station {
  position: absolute;
  top: var(--m);
  left: 22%;
  right: 22%;
  text-align: center;
  opacity: 0;
  transition: opacity .6s ease-in;
}
.lcg-station.is-on { opacity: 1; transition: opacity .12s ease-out; }
.lcg-hud .lcg-station-name {
  font-family: var(--lcg-name-font);
  font-weight: 700;
  font-size: max(15px, calc(var(--u) * 4.6));
  color: var(--sa-gold, #e1a744);
  transition: color .2s;
}
.lcg-station.is-tuning .lcg-station-name, .lcg-station.is-off .lcg-station-name { color: var(--lcg-grey); }
.lcg-hud .lcg-station-title {
  margin-top: .3em;
  font-family: var(--lcg-sub-font);
  font-weight: 700;
  font-size: max(10px, calc(var(--u) * 2.3));
  color: #e8e8e8;
  letter-spacing: .03em;
}

/* ---------------------------------------------------------------- radar and speed, bottom left */
.lcg-radar-box {
  position: absolute;
  left: var(--m);
  bottom: var(--m);
  width: var(--radar);
  height: var(--radar);
  border-radius: 50%;
}
.lcg-radar { display: block; width: 100%; height: 100%; opacity: .96; }
.lcg-hud .lcg-speed {
  position: absolute;
  left: calc(var(--m) + var(--radar) + var(--u) * 1.3);
  bottom: calc(var(--m) + var(--u) * .3);
  font-size: max(13px, calc(var(--u) * 3.3));
  color: #f2f2f2;
  opacity: .8;
  white-space: nowrap;
}
.lcg-speed-u { margin-left: .22em; font-size: .56em; color: var(--lcg-pale); letter-spacing: .05em; }

/* ---------------------------------------------------------------- vehicle and zone names, bottom right */
.lcg-names {
  position: absolute;
  right: var(--m);
  bottom: var(--m);
  max-width: 46%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * .5);
  text-align: right;
}
.lcg-hud .lcg-vehicle, .lcg-hud .lcg-zone {
  font-family: var(--lcg-name-font);
  font-weight: 700;
  line-height: 1.05;
  opacity: 0;
  transition: opacity .8s ease-in;
}
.lcg-hud .lcg-vehicle { font-size: max(16px, calc(var(--u) * 5)); color: var(--lcg-veh); }
.lcg-hud .lcg-zone { font-size: max(20px, calc(var(--u) * 6.6)); color: var(--lcg-zone); }
.lcg-hud .lcg-vehicle.is-on, .lcg-hud .lcg-zone.is-on { opacity: 1; transition: opacity .2s ease-out; }

/* ---------------------------------------------------------------- objective subtitle, bottom centre */
.lcg-objective {
  position: absolute;
  left: 50%;
  bottom: calc(var(--m) + var(--u) * 8.5);
  transform: translateX(-50%);
  width: max-content;
  max-width: 56%;
  text-align: center;
  font: 700 max(12px, calc(var(--u) * 2.9))/1.28 var(--lcg-sub-font);
  color: #fff;
  -webkit-text-stroke: .17em #000;
  paint-order: stroke fill;
  text-shadow: .05em .06em 0 #000;
  opacity: 0;
  transition: opacity .35s;
}
.lcg-objective.is-on { opacity: 1; transition-duration: .15s; }

/* ---------------------------------------------------------------- big centred messages */
.lcg-bigs { position: absolute; inset: 0; }
.lcg-big { position: absolute; left: 4%; right: 4%; text-align: center; animation: lcg-in .28s ease-out both; }
.lcg-big.is-out { animation: lcg-out .42s ease-in both; }
.lcg-hud .lcg-big-sub {
  margin-top: .35em;
  font-size: max(14px, calc(var(--u) * 3.9));
  color: #fff;
  line-height: 1.18;
  white-space: pre-line;
}
.lcg-big--passed, .lcg-big--failed { top: 29%; }
.lcg-hud .lcg-big--passed .lcg-big-main, .lcg-hud .lcg-big--failed .lcg-big-main {
  font-size: max(28px, calc(var(--u) * 8.6));
  color: var(--sa-gold, #e1a744);
  letter-spacing: .03em;
}
.lcg-hud .lcg-big--failed .lcg-big-main { color: var(--sa-red, #b8312f); }
.lcg-big--count { top: 31%; animation: none; }
.lcg-hud .lcg-big--count .lcg-big-main {
  font-size: max(64px, calc(var(--u) * 19));
  color: var(--sa-gold, #e1a744);
  -webkit-text-stroke-width: .11em;
  animation: lcg-pop .5s cubic-bezier(.2, 1.5, .45, 1) both;
}
.lcg-hud .lcg-big--count.is-go .lcg-big-main { color: #79c84f; }
.lcg-big--bonus { top: 19%; }
.lcg-hud .lcg-big--bonus .lcg-big-main { font-size: max(16px, calc(var(--u) * 4.4)); color: var(--sa-blue, #7f9fd1); }
.lcg-hud .lcg-big--bonus .lcg-big-sub { font-size: max(11px, calc(var(--u) * 2.5)); color: #f0f0f0; }
.lcg-big--title { top: 58%; }
.lcg-hud .lcg-big--title .lcg-big-main {
  font-family: var(--lcg-name-font);
  font-weight: 700;
  font-size: max(26px, calc(var(--u) * 7.6));
  color: var(--sa-gold, #e1a744);
}
@keyframes lcg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcg-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lcg-pop {
  0% { opacity: 0; transform: scale(2.3); }
  30% { opacity: 1; }
  60% { transform: scale(.93); }
  80% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------------- menu (the only interactive part) */
.lcg-menu {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .3), rgba(0, 0, 0, .78));
}
.lcg-menu.is-open { display: flex; animation: lcg-in .18s ease-out both; }
.lcg-menu-panel {
  box-sizing: border-box;
  width: clamp(250px, calc(var(--u) * 64), 780px);
  max-width: 92%;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.6) calc(var(--u) * 2);
  background: linear-gradient(180deg, rgba(10, 12, 18, .86), rgba(4, 5, 8, .9));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px #000, 0 1.5em 4em rgba(0, 0, 0, .65);
}
.lcg-hud .lcg-menu-title {
  flex: none;
  margin-bottom: calc(var(--u) * 1.8);
  font-size: max(24px, calc(var(--u) * 7.2));
  color: var(--sa-gold, #e1a744);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lcg-menu-list {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.lcg-menu-list::-webkit-scrollbar { display: none; }
.lcg-hud .lcg-menu-item {
  position: relative;
  padding: .14em .5em .1em .6em;
  font-size: max(15px, calc(var(--u) * 4));
  line-height: 1.12;
  color: var(--sa-blue, #7f9fd1);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-text-stroke-width: .13em;
}
.lcg-hud .lcg-menu-item.is-sel {
  color: #fff;
  background: linear-gradient(90deg, rgba(225, 167, 68, .3), rgba(225, 167, 68, .08) 55%, rgba(225, 167, 68, 0));
}
.lcg-menu-item.is-sel::before {
  content: '';
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: .16em;
  background: var(--sa-gold, #e1a744);
  box-shadow: 0 0 0 1px #000;
}
.lcg-menu-desc {
  flex: none;
  min-height: 2.6em;
  margin-top: calc(var(--u) * 1.6);
  padding-top: calc(var(--u) * 1.2);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font: 700 max(11px, calc(var(--u) * 2.4))/1.3 var(--lcg-sub-font);
  color: #dadada;
  text-shadow: .06em .07em 0 #000;
}
.lcg-menu-hint {
  flex: none;
  margin-top: calc(var(--u) * 1);
  font: 700 max(9px, calc(var(--u) * 1.7))/1 var(--lcg-sub-font);
  color: rgba(255, 255, 255, .45);
  letter-spacing: .1em;
  text-transform: uppercase;
}