:root {
  --night: #0d1026;
  --indigo: #141731;
  --dusk: #2a2550;
  --sand: #d9b98a;
  --cream: #fff4e0;
  --heat: #ff7a2f;
  --neon: #ff3d81;
  --gulf: #19c2bd;
  --gold: #ffc857;
  --glass: rgba(13, 16, 38, 0.74);
  --line: rgba(255, 244, 224, 0.16);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --display: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --script: "Mr Dafoe", "Brush Script MT", cursive;
  --ui: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--night);
  color: var(--cream);
  font-family: var(--ui);
  font-weight: 500;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#vig {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 125% 100% at 50% 55%, transparent 55%, rgba(8, 9, 24, 0.34) 86%, rgba(6, 7, 20, 0.6) 100%);
}

/* ---------------- logo lockup */
.logo, .loader-logo {
  position: relative; margin: 0; line-height: 0.82; text-align: left; display: inline-block;
  filter: drop-shadow(0 6px 22px rgba(8, 9, 24, 0.55));
}
.logo .l1, .loader-logo .l1 {
  display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(64px, 17vw, 168px); letter-spacing: 0.01em;
  /* poster ink: one solid fill over two hard offset plates, no gradient */
  color: var(--cream);
  text-shadow: 0.03em 0.03em 0 var(--heat), 0.06em 0.06em 0 #c2371f;
}
.logo .l2, .loader-logo .l2 {
  display: block; font-family: var(--script); font-weight: 400;
  font-size: clamp(54px, 13.5vw, 132px);
  margin: -0.42em 0 0 0.9em; transform: rotate(-7deg); transform-origin: 0 100%;
  color: #ffe9f1;
  text-shadow: 0 0 6px rgba(255, 61, 129, 0.95), 0 0 18px rgba(255, 61, 129, 0.75), 0 0 42px rgba(255, 61, 129, 0.5);
}

/* ---------------- overlays */
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; }
#menu {
  justify-content: space-between; align-items: flex-start;
  padding: calc(var(--sat) + clamp(22px, 6vh, 64px)) calc(var(--sar) + clamp(18px, 5vw, 72px)) calc(var(--sab) + 14px) calc(var(--sal) + clamp(18px, 5vw, 72px));
  background: linear-gradient(180deg, rgba(13, 16, 38, 0.5) 0%, rgba(13, 16, 38, 0) 34%, rgba(13, 16, 38, 0) 52%, rgba(13, 16, 38, 0.82) 100%);
}
.menu-top { max-width: 100%; }
.tag {
  margin: clamp(16px, 3.2vh, 30px) 0 0; max-width: 28ch;
  font-size: clamp(16px, 2.3vw, 22px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25;
  color: var(--cream); text-shadow: 0 2px 10px rgba(8, 9, 24, 0.7);
}
.menu-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.primary {
  min-height: 62px; padding: 12px 28px; border-radius: 14px;
  font-family: var(--display); font-size: 30px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1b0d05;
  background: linear-gradient(180deg, #ffd27a 0%, #ff9a3d 55%, #ff6a2a 100%);
  box-shadow: 0 10px 28px rgba(255, 106, 42, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(120, 40, 0, 0.28);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.primary:active { transform: translateY(2px) scale(0.985); filter: brightness(0.94); }
.primary:disabled { filter: grayscale(0.5) brightness(0.8); }
.menu-best { min-height: 20px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 244, 224, 0.82); }
.menu-hint { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.35; color: rgba(255, 244, 224, 0.74); }
.credit { margin: 10px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: rgba(255, 244, 224, 0.62); }

.sheet-card {
  margin: auto; width: min(420px, calc(100% - 36px)); padding: 22px 22px 20px; border-radius: 20px; text-align: center;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(4, 5, 16, 0.6);
}
.sheet-card h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 0.04em; text-transform: uppercase; }
.sheet-card p { margin: 0; font-size: 17px; color: rgba(255, 244, 224, 0.82); }
#lost { background: rgba(8, 9, 24, 0.82); z-index: 60; }

/* ---------------- loader */
#loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(255, 122, 47, 0.5) 0%, rgba(255, 61, 129, 0.2) 38%, transparent 70%),
    linear-gradient(180deg, #0b0d22 0%, #171a3c 55%, #3a2452 100%);
  transition: opacity 0.6s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
.loader-inner { width: min(420px, calc(100% - 48px)); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.loader-logo .l1 { font-size: clamp(60px, 16vw, 120px); }
.loader-logo .l2 { font-size: clamp(50px, 12.5vw, 96px); }
.loader-bar { width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 244, 224, 0.14); overflow: hidden; }
.loader-fill { width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--heat), var(--neon)); transition: transform 0.35s ease; }
.loader-sub { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 244, 224, 0.72); }

@media (max-width: 520px) {
  #menu { align-items: stretch; }
  .menu-card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .primary, #loader, .loader-fill { transition: none; }
}

/* ---------------- in play: HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; font-family: var(--ui); }
#hud button { pointer-events: auto; }
.hud-map { position: absolute; left: calc(12px + var(--sal)); top: calc(12px + var(--sat)); width: 132px; }
.hud-map canvas { width: 132px; height: 132px; display: block; border-radius: 50%; box-shadow: 0 6px 20px rgba(6, 7, 20, 0.5); }
.hud-street {
  margin-top: 6px; max-width: 190px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.15;
  color: var(--cream); text-shadow: 0 1px 6px rgba(6, 7, 20, 0.9), 0 0 2px rgba(6, 7, 20, 0.9);
}
.hud-top { position: absolute; right: calc(12px + var(--sar)); top: calc(12px + var(--sat)); display: flex; gap: 8px; align-items: center; }
.hud-chip, .hud-tool {
  height: 36px; padding: 0 12px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.hud-chip i { font-style: normal; color: var(--gold); }
.hud-tool { width: 36px; padding: 0; justify-content: center; font-size: 19px; }
.hud-tool.off { color: rgba(255, 244, 224, 0.4); text-decoration: line-through; }
.hud-tool:active { transform: scale(0.94); }
.hud-stars {
  position: absolute; left: 50%; top: calc(14px + var(--sat)); transform: translateX(-50%); display: flex; gap: 4px;
  opacity: 0; transition: opacity 0.3s ease; font-size: 30px; line-height: 1; text-shadow: 0 2px 10px rgba(6, 7, 20, 0.9);
}
.hud-stars.show { opacity: 1; }
.hud-stars i { font-style: normal; color: rgba(255, 244, 224, 0.26); }
.hud-stars i.on { color: var(--gold); }
.hud-stars.hiding i.on { animation: star-blink 0.9s steps(2, start) infinite; }
@keyframes star-blink { to { color: rgba(255, 200, 87, 0.3); } }
.hud-cash { color: #b9f5c0; }
.hud-speed {
  position: absolute; left: 50%; bottom: calc(18px + var(--sab)); transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 6px; text-shadow: 0 2px 10px rgba(6, 7, 20, 0.85);
}
.hud-speed b { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.hud-speed span { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 244, 224, 0.78); }
.hud-toast {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, 8px); opacity: 0; text-align: center; width: min(86%, 560px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hud-toast.on { opacity: 1; transform: translate(-50%, 0); }
.hud-toast b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6.4vw, 52px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.02; text-shadow: 0.04em 0.04em 0 rgba(194, 55, 31, 0.9), 0 4px 18px rgba(6, 7, 20, 0.7); }
.hud-toast span { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; letter-spacing: 0.05em; color: var(--cream); text-shadow: 0 1px 8px rgba(6, 7, 20, 0.95); }
.hud-act {
  position: absolute; left: 50%; bottom: calc(86px + var(--sab)); transform: translateX(-50%);
  height: 46px; padding: 0 22px; border-radius: 12px; background: var(--cream); color: var(--indigo);
  font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(6, 7, 20, 0.45);
}
.hud-act:active { transform: translateX(-50%) scale(0.96); }
.hud-job { position: absolute; left: 50%; top: calc(58px + var(--sat)); transform: translateX(-50%); max-width: min(72vw, 460px); padding: 8px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); text-align: center; }
.hud-job b { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.hud-job span { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.hud-job i { display: block; font-style: normal; font-family: var(--display); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hud-job i:empty { display: none; }
.hud-job i.low { color: #ff5a4d; }
#phone {
  position: fixed; z-index: 14; left: calc(12px + var(--sal)); top: calc(206px + var(--sat)); width: min(250px, 62vw); padding: 10px 12px; border-radius: 14px;
  background: rgba(13, 16, 38, 0.86); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(6, 7, 20, 0.5);
  opacity: 0; transform: translateX(-12px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
#phone.on { opacity: 1; transform: none; }
#phone b { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #35e0d8; margin-bottom: 3px; }
#phone span { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--cream); }
body.shot #phone { display: none; }
#pause, #results { z-index: 40; background: rgba(8, 9, 24, 0.74); overflow: auto; padding: 12px 0; }
.menu-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.secondary { min-height: 46px; padding: 8px 18px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--cream); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.secondary:active { transform: scale(0.97); }
.pause-card { margin: auto; width: min(940px, calc(100% - 28px)); padding: 18px 18px 14px; border-radius: 20px; text-align: center; background: rgba(13, 16, 38, 0.9); border: 1px solid var(--line); }
.pause-card h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 6vw, 44px); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 10px; }
.pause-card canvas { width: 100%; height: auto; max-height: 56vh; object-fit: contain; border-radius: 12px; display: block; background: #1b3a55; }
.pause-card .primary { min-height: 46px; padding: 8px 26px; }
.pause-key { margin: 8px 0 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 244, 224, 0.8); }
.pause-key span { white-space: nowrap; }
.pause-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px 0 12px; vertical-align: baseline; }
.k-crew { background: #5cc8ff; } .k-you { background: #fff4e0; } .k-job { background: #ffc857; } .k-goal { background: #35e0d8; } .k-shop { background: #ff3d81; } .k-gun { background: #a070ff; } .k-token { background: #ffc857; border-radius: 2px !important; transform: rotate(45deg); }
.result-score { font-family: var(--display); font-size: clamp(54px, 14vw, 110px); line-height: 1; color: #b9f5c0; text-shadow: 0.04em 0.04em 0 rgba(6, 7, 20, 0.6); }
.result-sub { margin: 8px 0 4px; font-size: 17px; font-weight: 600; color: var(--cream); }
.hud-health { position: absolute; left: calc(12px + var(--sal)); top: calc(186px + var(--sat)); width: 132px; height: 8px; border-radius: 4px; background: rgba(6, 7, 20, 0.55); overflow: hidden; }
.hud-health i { display: block; width: 100%; height: 100%; background: #6ee08a; transform-origin: left center; transition: transform 0.2s ease; }
.hud-health.low i { background: #ff5a4d; }
.hud-weapon {
  position: absolute; right: calc(12px + var(--sar)); top: calc(58px + var(--sat)); height: 36px; padding: 0 12px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: auto;
}
.hud-weapon span { color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-radio {
  position: absolute; right: calc(12px + var(--sar)); top: calc(58px + var(--sat)); height: 32px; padding: 0 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); pointer-events: auto;
}
.hud-radio i { font-style: normal; color: #35e0d8; }
.hud-lock { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 2px solid #ff5a4d; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 90, 77, 0.7); pointer-events: none; }
.hud-lock i { position: absolute; left: 4px; right: 4px; bottom: -9px; height: 4px; border-radius: 2px; background: #ff5a4d; transform-origin: left center; }
.hud-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(255, 40, 30, 0.75); }
.hud-hurt.on { animation: hurt 0.5s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hud-hurt.on { animation-duration: 0.01s; } }

/* ---------------- in play: touch pad */
#pad { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#pad[data-mode="car"] .for-foot, #pad[data-mode="foot"] .for-car { display: none; }
.pad-steer { position: absolute; left: 0; bottom: 0; width: 50%; height: 46%; pointer-events: auto; touch-action: none; }
.pad-knob {
  position: absolute; width: 132px; height: 62px; margin: -31px 0 0 -66px; border-radius: 31px; pointer-events: none;
  background: rgba(13, 16, 38, 0.34); border: 1px solid var(--line); opacity: 0.55;
  left: calc(92px + var(--sal)); top: calc(100% - 78px - var(--sab));
}
.pad-knob.on { opacity: 0.95; }
.pad-knob i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(255, 244, 224, 0.9); box-shadow: 0 4px 14px rgba(6, 7, 20, 0.5); }
.pad-btn {
  position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%;
  background: rgba(13, 16, 38, 0.5); border: 1px solid var(--line); color: var(--cream);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center;
}
.pad-btn.on { background: rgba(255, 244, 224, 0.92); color: var(--indigo); }
.pad-gas { right: calc(18px + var(--sar)); bottom: calc(26px + var(--sab)); width: 92px; height: 92px; background: rgba(255, 122, 47, 0.62); }
.pad-brake { right: calc(122px + var(--sar)); bottom: calc(18px + var(--sab)); width: 70px; height: 70px; }
.pad-hand { right: calc(28px + var(--sar)); bottom: calc(132px + var(--sab)); width: 54px; height: 54px; font-size: 18px; }
@media (pointer: coarse) {
  .hud-stars { top: calc(148px + var(--sat)); left: auto; right: calc(12px + var(--sar)); transform: none; font-size: 26px; }
  .hud-weapon { top: calc(184px + var(--sat)); }
  .hud-radio { top: calc(184px + var(--sat)); }
  .hud-job { top: calc(226px + var(--sat)); max-width: 92vw; }
  #phone { top: auto; bottom: calc(190px + var(--sab)); left: calc(12px + var(--sal)); width: min(230px, 58vw); }
  .pad-fire { right: calc(118px + var(--sar)); bottom: calc(104px + var(--sab)); width: 64px; height: 64px; font-size: 13px; background: rgba(255, 90, 77, 0.6); }   /* under the chips: the top of a phone is full */
  .hud-speed { bottom: auto; top: calc(14px + var(--sat)); }
  .hud-speed b { font-size: 34px; }
  .hud-top { top: calc(56px + var(--sat)); flex-wrap: wrap; justify-content: flex-end; max-width: 176px; }
  .hud-act { bottom: calc(210px + var(--sab)); }
}
@media (pointer: coarse) and (orientation: landscape) {
  .hud-stars { top: calc(12px + var(--sat)); left: 50%; right: auto; transform: translateX(-50%); }
  .hud-weapon { top: calc(58px + var(--sat)); }
  .hud-top { top: calc(12px + var(--sat)); }
  .hud-speed { left: auto; right: calc(150px + var(--sar)); transform: none; top: calc(10px + var(--sat)); }
  .hud-act { bottom: calc(24px + var(--sab)); }
}
body.shot #hud, body.shot #pad { display: none; }
@media (prefers-reduced-motion: reduce) { .hud-stars.hiding i.on { animation: none; opacity: 0.6; } }

/* online crew */
.menu-live { margin: 8px 0 0; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: #ffd98a; }
.secondary:disabled { opacity: 0.5; }
.secondary.hot { background: var(--cream); color: #0d1026; border-color: var(--cream); }
.lobby-card { width: min(520px, calc(100% - 28px)); }
.lobby-what { margin: 6px auto 12px; max-width: 34em; font-size: 14px; font-weight: 600; line-height: 1.4; color: rgba(255, 244, 224, 0.74); }
#lobbyInvite input { width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(6, 7, 20, 0.6); color: var(--cream); font: inherit; font-size: 14px; }
#pause.solo .crew-only { display: none; }