/* Anton is self-hosted (SIL Open Font License 1.1, see fonts/OFL.txt) so the lens never waits on Google Fonts. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-latin.woff2) format('woff2');
}
/* Grand Theft Photo lens styles. Additive display: black adds no light, so the page
   stays black and the HUD has no fills. --u is 1% of the lens's shorter side (set in JS). */
:root {
  --cash: #62e06a;      /* GTA money green */
  --mission: #ffd23f;   /* mission blip yellow */
  --safe: #5ab8ff;      /* safehouse blue */
  --hot: #ff5252;       /* busted / overdue */
  /* Softer versions of the same colours. Change these with the four above when re-theming. */
  --mission-soft: rgba(255, 210, 63, 0.6);
  --mission-faint: rgba(255, 210, 63, 0.55);
  --hot-soft: rgba(255, 82, 82, 0.5);
  --text: #ffffff;
  --dim: #b9c2cc;
  --panel: #1c2128;     /* only on bounded surfaces like focused rows */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html, body { margin: 0; height: 100%; background: #000; color: var(--text); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

.gtp-lens {
  --u: 6px;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
  font-size: max(16px, calc(var(--u) * 3.1));
  line-height: 1.2;
  user-select: none;
}

.screen[hidden], [hidden] { display: none !important; }
.screen { position: absolute; inset: 0; }

/* ---------- Buttons: every control is a button so directional nav reaches it ---------- */
.btn {
  font: inherit;
  color: var(--text);
  background: transparent;
  border: max(2px, calc(var(--u) * 0.35)) solid rgba(255, 255, 255, 0.35);
  border-radius: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2);
  letter-spacing: 0.04em;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
.btn:focus-visible, .btn:focus {
  border-color: var(--text);
  background: var(--panel);
  box-shadow: 0 0 0 max(2px, calc(var(--u) * 0.35)) var(--mission);
}
.btn-go { color: var(--cash); border-color: var(--cash); }
.btn-go:focus { box-shadow: 0 0 0 max(2px, calc(var(--u) * 0.35)) var(--cash); }
.btn-late { color: var(--mission); border-color: var(--mission-soft); }
.btn-soft { color: var(--dim); }
.btn-danger { color: var(--hot); border-color: var(--hot-soft); }

/* ---------- HUD (always-on: no fills) ---------- */
.screen-hud { padding: calc(var(--u) * 7); box-sizing: border-box; }

.hud-cash { position: absolute; top: calc(var(--u) * 7); left: calc(var(--u) * 7); }
.cash-main {
  font-family: var(--font-display);
  color: var(--cash);
  font-size: max(30px, calc(var(--u) * 8));
  line-height: 1;
  letter-spacing: 0.02em;
}
.cash-sub { color: var(--cash); opacity: 0.85; font-weight: 700; margin-top: calc(var(--u) * 0.8); }

.hud-wanted { position: absolute; top: calc(var(--u) * 7); right: calc(var(--u) * 7); text-align: right; }
.stars { display: flex; gap: calc(var(--u) * 0.6); justify-content: flex-end; }
.star { width: max(18px, calc(var(--u) * 5)); height: max(18px, calc(var(--u) * 5)); color: rgba(255, 255, 255, 0.45); }
.star.on { color: var(--text); }
.star svg { width: 100%; height: 100%; display: block; }
.stars.flash .star.on { animation: starflash 0.6s steps(1) infinite; }
@keyframes starflash { 50% { color: var(--hot); } }
.busted {
  font-family: var(--font-display);
  color: var(--hot);
  font-size: max(22px, calc(var(--u) * 5.2));
  margin-top: calc(var(--u) * 1);
  letter-spacing: 0.06em;
}

.hud-radar { position: absolute; left: calc(var(--u) * 7); bottom: calc(var(--u) * 7); width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.radar { position: relative; width: 100%; height: 100%; }
.radar-ring { position: absolute; inset: 0; border: max(2px, calc(var(--u) * 0.45)) solid rgba(255, 255, 255, 0.55); border-radius: 50%; }
.radar-ring.inner { inset: 30%; border-width: 1px; border-color: rgba(255, 255, 255, 0.25); }
.radar-north {
  position: absolute; transform: translate(-50%, -50%);
  font-size: max(16px, calc(var(--u) * 2.8)); font-weight: 800; color: var(--dim);
}
/* Above the radar, clear of the ring, so NO GPS and GPS OFF read at a glance (Prism, rev5 review). */
.radar-tag { position: absolute; left: 0; top: calc(var(--u) * -5.6); white-space: nowrap; font-size: max(18px, calc(var(--u) * 3.3)); color: var(--text); font-weight: 800; letter-spacing: 0.04em; }
.blip { position: absolute; width: calc(var(--u) * 5); height: calc(var(--u) * 5); transform: translate(-50%, -50%); }
.blip svg { width: 100%; height: 100%; display: block; }
.blip.player { left: 50%; top: 50%; color: var(--text); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.blip.safe { color: var(--safe); }
.radar-home { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); white-space: nowrap; color: var(--safe); font-weight: 800; font-size: max(16px, calc(var(--u) * 2.6)); letter-spacing: 0.06em; }
.blip.other { color: var(--mission-faint); width: max(24px, calc(var(--u) * 4)); height: max(24px, calc(var(--u) * 4)); }
.blip.mission { color: var(--mission); width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); }
.blip.mission svg { animation: spin 2.4s linear infinite; }
.blip.mission.edge svg { animation: none; transform: rotate(var(--rot, 0deg)); }
@keyframes spin { to { transform: rotate(360deg); } }

.hud-next {
  position: absolute; right: calc(var(--u) * 7); bottom: calc(var(--u) * 16);
  width: calc(var(--u) * 46); text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 0.8);
}
.next-label { color: var(--mission); font-weight: 800; letter-spacing: 0.08em; font-size: max(16px, calc(var(--u) * 2.7)); }
.next-title { font-family: var(--font-display); font-size: max(22px, calc(var(--u) * 4.8)); line-height: 1.05; overflow-wrap: anywhere; }
.next-meta { color: var(--dim); font-weight: 700; }
.hud-next .btn { margin-top: calc(var(--u) * 0.8); }

.hud-nav { position: absolute; right: calc(var(--u) * 7); bottom: calc(var(--u) * 7); display: flex; gap: calc(var(--u) * 1.4); }
.hud-nav .btn { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6); font-size: max(16px, calc(var(--u) * 2.7)); }

.hud-feed {
  position: absolute; top: calc(var(--u) * 21); left: calc(var(--u) * 7);
  font-size: max(16px, calc(var(--u) * 2.7)); color: var(--dim); font-weight: 700; letter-spacing: 0.06em;
}

/* ---------- Lists (bounded panels allowed) ---------- */
.screen-list { padding: calc(var(--u) * 7); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.list-head { font-family: var(--font-display); font-size: max(24px, calc(var(--u) * 6)); color: var(--mission); letter-spacing: 0.04em; }
.list-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); scrollbar-width: none; }
.list-body::-webkit-scrollbar { display: none; }
.row { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: calc(var(--u) * 0.4); width: 100%; }
.row-main { font-size: max(18px, calc(var(--u) * 3.4)); }
.row-meta { color: var(--dim); font-weight: 600; font-size: max(16px, calc(var(--u) * 2.8)); }
.row-meta b { color: var(--mission); }
.row-done { opacity: 0.6; }
.row-done .row-meta b { color: var(--cash); }
.row-active .row-meta b, .row-late .row-meta b { color: var(--cash); }
.row-wanted .row-meta { color: var(--text); }
.row-wanted.s4 .row-meta, .row-wanted.s5 .row-meta { color: var(--hot); }
.btn-back { align-self: flex-start; color: var(--dim); }
.empty { color: var(--dim); padding: calc(var(--u) * 2) 0; }
.detail-title { font-family: var(--font-display); font-size: max(26px, calc(var(--u) * 6.5)); line-height: 1.05; overflow-wrap: anywhere; }
.detail-meta { color: var(--dim); font-weight: 700; margin-bottom: calc(var(--u) * 2); }
.set-head { color: var(--mission); font-weight: 800; letter-spacing: 0.08em; margin-top: calc(var(--u) * 1); }
.stepper { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.step-label { flex: 1; }
.step-val { min-width: calc(var(--u) * 12); text-align: center; font-weight: 800; color: var(--cash); }
.btn-step { padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4); }
.set-foot { color: var(--dim); font-size: max(16px, calc(var(--u) * 2.6)); margin-top: calc(var(--u) * 1); }

/* ---------- Banner: MISSION PASSED ---------- */
.banner {
  position: absolute; left: 0; right: 0; top: 36%;
  text-align: center; pointer-events: none;
  opacity: 0; transform: scale(0.92); transition: opacity 0.25s, transform 0.25s;
}
.banner.show { opacity: 1; transform: scale(1); }
.banner-main {
  font-family: var(--font-display);
  font-size: max(36px, calc(var(--u) * 9.5));
  line-height: 1;
  color: var(--mission);
  letter-spacing: 0.03em;
}
.banner-sub { font-family: var(--font-display); font-size: max(26px, calc(var(--u) * 6.5)); margin-top: calc(var(--u) * 1.2); color: var(--cash); }
.banner.cleared .banner-main { color: var(--safe); }
.banner.cleared .banner-sub { color: var(--text); }