/* Game container and the shared San Andreas look. hud.css styles the HUD itself, shell.css the arrival screen. */
.lcg {
  --sa-gold: #e1a744;
  --sa-money: #3c8d34;
  --sa-blue: #7f9fd1;
  --sa-red: #b8312f;
  --sa-ink: #000;
  --sa-font: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  position: relative;
  overflow: hidden;
  background: #1a1410;
}
.lcg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lcg-hud-root { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.sa-text { font-family: var(--sa-font, Impact, sans-serif); letter-spacing: .02em; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 2px 2px 0 #000; }

/* ---------------------------------------------------------------- touch controls (touch.js) */
.lcg-touch {
  position: absolute; inset: 0; display: none; pointer-events: none; z-index: 2;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  color: #fff; font-family: var(--sa-font, Impact, sans-serif);
  /* clear the radar (bottom-left) and zone names (bottom-right) of the HUD */
  --tc-bottom: max(112px, 26vmin);
  --tc-side: max(10px, 2vmin);
}
.lcg-touch.is-on { display: block; }
.lcg-touch-pad, .lcg-touch-actions { position: absolute; pointer-events: auto; touch-action: none; }
.lcg-touch-steer { left: var(--tc-side); bottom: var(--tc-bottom); display: flex; width: min(44vw, 280px); height: 92px; }
.lcg-touch-pedals { right: var(--tc-side); bottom: var(--tc-bottom); display: flex; flex-direction: column; width: 104px; height: 196px; }
.lcg-touch-hand { right: calc(var(--tc-side) + 104px + 14px); bottom: var(--tc-bottom); display: flex; width: 78px; height: 78px; }
.lcg-touch-key {
  flex: 1; display: flex; align-items: center; justify-content: center; margin: 3px; text-align: center;
  background: rgba(0, 0, 0, .42); border: 2px solid rgba(225, 167, 68, .85); border-radius: 12px;
  font-size: 34px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 2px 2px 0 #000;
}
.lcg-touch-hand .lcg-touch-key { border-radius: 50%; font-size: 13px; line-height: 1.1; letter-spacing: .04em; }
.lcg-touch-pedals .lcg-touch-key:last-child { flex: 1.5; }
.lcg-touch-key.is-on { background: rgba(225, 167, 68, .8); color: #000; -webkit-text-stroke: 0; text-shadow: none; }
.lcg-touch-actions { top: var(--tc-side); left: var(--tc-side); display: flex; gap: 6px; }
.lcg-touch-btn {
  min-width: 44px; height: 40px; padding: 0 10px; margin: 0; border: 2px solid rgba(225, 167, 68, .85); border-radius: 8px;
  background: rgba(0, 0, 0, .42); color: #fff; font: 20px/1 var(--sa-font, Impact, sans-serif); letter-spacing: .04em;
  touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lcg-touch-btn:active { background: rgba(225, 167, 68, .8); color: #000; -webkit-text-stroke: 0; text-shadow: none; }
@media (max-height: 420px) {
  .lcg-touch { --tc-bottom: max(96px, 22vmin); }
  .lcg-touch-steer { height: 76px; }
  .lcg-touch-pedals { height: 160px; width: 92px; }
  .lcg-touch-hand { width: 66px; height: 66px; right: calc(var(--tc-side) + 92px + 12px); }
}