/* =====================================================================
   DelPerroSands kit B — the one stylesheet for game screens and website.
   Version 1.1 · 4 Oct 2026 · Source of truth: DelPerroSands Design System page.
   v1.1 (design-team review): renamed from dps-kit.css, .dps -> .city; action and
   picked labels 19px bold for contrast; grounds and hero moved to a WEBSITE-ONLY
   layer (bottom of file) so game screens never paint full screen; icons one colour.
   GAME SCREENS: load everything above "WEBSITE-ONLY LAYER". WEBSITE: load all.
   Rule of thumb: calm dark boxes with a thin white edge; orange + white outline
   ONLY for the one action and for whatever is picked. Labels in narrow capitals.
   No blur (game browser paints it black), no glow, no heavy shadows.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@600;700&family=Roboto+Mono:wght@400;600&display=swap");

:root {
  /* ---- Navy ladder (grounds and surfaces) ---- */
  --navy-950: #0a111f;  --navy-900: #0f1a2e;  --navy-800: #141a28;  --navy-700: #1b2335;
  --navy-600: #26304a;  --navy-500: #36425f;  --navy-400: #56627f;  --navy-300: #8590ab;
  --navy-200: #b9c1d3;  --navy-100: #e3e7ef;

  /* ---- Orange ladder (brand) ---- */
  --orange-900: #5c2410; --orange-800: #8a3518; --orange-700: #b8532a; --orange-600: #e2622f;
  --orange-500: #ff7a45; /* BRAND */
  --orange-400: #ff9466; --orange-300: #ffab85; --orange-200: #ffc9a8; --orange-100: #ffe6d8;

  /* ---- Neutrals ---- */
  --white: #ffffff; --cream: #f4f1ea;
  --white-7: rgba(255,255,255,.07);  --white-12: rgba(255,255,255,.12); --white-20: rgba(255,255,255,.20);
  --white-35: rgba(255,255,255,.35); --white-65: rgba(255,255,255,.65); --white-85: rgba(255,255,255,.85);
  --white-90: rgba(255,255,255,.90);

  /* ---- Status (status only, never decoration) ---- */
  --ok: #4ec98a; --warn: #ffb347; --danger: #ff6b6b; --info: #5bc8e8;


  /* ---- Semantic tokens (use these in components) ---- */
  --ground: var(--navy-900);
  --panel: rgba(20,26,40,.82);           /* calm panel over photo or ground */
  --panel-solid: var(--navy-800);        /* when there is nothing behind */
  --row: var(--white-7);
  --fill: rgba(255,122,69,.80);          /* action + picked */
  --fill-hover: rgba(255,140,95,.90);
  --text: var(--white); --text-quiet: var(--white-85); --text-faint: var(--white-65);
  --accent: var(--orange-500);

  /* ---- Edges ---- */
  --edge-panel: 2px solid var(--white-90);
  --edge-row: 1.5px solid var(--white-12);
  --edge-tab: 1.5px solid var(--white-35);
  --edge-picked: 2px solid var(--white);
  --edge-action: 3px solid var(--white);

  /* ---- Radius ---- */
  --r-row: 9px; --r-btn: 12px; --r-panel: 14px; --r-pill: 999px;

  /* ---- Spacing (4-point) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ---- Type ---- */
  --font-label: "Roboto Condensed", Roboto, Arial, sans-serif;
  --font-body: Roboto, Arial, sans-serif;
  --font-data: "Roboto Mono", ui-monospace, Consolas, monospace;
  --t-display: 700 clamp(40px, 6vw, 72px)/1.0 var(--font-label);
  --t-h1: 700 40px/1.05 var(--font-label);
  --t-h2: 700 28px/1.1 var(--font-label);
  --t-h3: 700 20px/1.2 var(--font-label);
  --t-label: 700 13px/1.2 var(--font-label);
  --t-body: 400 18px/1.6 var(--font-body);
  --t-small: 400 15px/1.5 var(--font-body);
  --t-data: 400 14px/1.4 var(--font-data);
  --track-caps: .06em;

  /* ---- Motion ---- */
  --ease: 150ms ease-out;
}

/* ---------- Base (no background: safe for game screens) ---------- */
.city { color: var(--text); font: var(--t-body); }
.city * { box-sizing: border-box; }
.caps { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.display { font: var(--t-display); text-transform: uppercase; letter-spacing: .01em; }
.display .hl, .h1 .hl { color: var(--accent); }
.h1 { font: var(--t-h1); text-transform: uppercase; letter-spacing: .02em; }
.h2 { font: var(--t-h2); text-transform: uppercase; letter-spacing: .04em; }
.h3 { font: var(--t-h3); text-transform: uppercase; letter-spacing: var(--track-caps); }
.label { font: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.quiet { color: var(--text-quiet); } .faint { color: var(--text-faint); }
.data { font: var(--t-data); font-variant-numeric: tabular-nums; }

/* ---------- Wordmark (never uppercase) ---------- */
.wordmark { font: 700 28px/1 var(--font-body); letter-spacing: -.01em; text-transform: none; paint-order: stroke fill; white-space: nowrap; }
.wordmark .a { color: var(--orange-500); -webkit-text-stroke: 1.5px var(--white); }
.wordmark .b { color: var(--cream); -webkit-text-stroke: 1.5px var(--orange-500); }

/* ---------- Panel / row ---------- */
.panel { background: var(--panel); border: var(--edge-panel); border-radius: var(--r-panel); padding: var(--s4); }
.panel.solid { background: var(--panel-solid); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--row); border: var(--edge-row); border-radius: var(--r-row); padding: 10px 12px; transition: background var(--ease); }
.row:hover { border-color: var(--white-35); }
.row.picked, .row[aria-current="true"] { background: var(--fill); border: var(--edge-picked); }
/* text on orange: 19px bold so white on 80% orange passes contrast (large text) */
.row.picked .caps, .row[aria-current="true"] .caps { font-size: 19px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 700 15px/1 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--text);
  padding: 12px 22px; border-radius: var(--r-btn); cursor: pointer; transition: background var(--ease), border-color var(--ease); }
.btn-action { background: var(--fill); border: var(--edge-action); font-size: 19px; }
.btn-action:hover { background: var(--fill-hover); }
.btn-secondary { background: var(--panel); border: var(--edge-panel); }
.btn-secondary:hover { background: var(--fill); border-color: var(--white); font-size: 19px; }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tab { font: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text);
  padding: 8px 14px; border-radius: var(--r-pill); background: var(--panel); border: var(--edge-tab); }
.tab.picked, .tab[aria-selected="true"] { background: var(--fill); border: var(--edge-picked); font-size: 19px; padding: 6px 16px; }

/* ---------- Pills ---------- */
.key { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
  background: var(--panel); border: 1.5px solid var(--white-65); font: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-caps); }
.key b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--white); color: var(--navy-800); font: 700 12px var(--font-body); }
.live { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--panel); border: var(--edge-tab); font: var(--t-label); letter-spacing: var(--track-caps); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.live .data { font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--white-12); border: var(--edge-row); font: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-caps); }

/* ---------- Icon circle (department / job) ----------
   Icons are ONE colour line icons: orange at rest, white when picked. */
.icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--white-12); border: 1.5px solid var(--white-35); color: var(--accent); }
.picked .icon, .icon.on { background: var(--white-20); border-color: var(--white); color: var(--white); }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.input { font: var(--t-small); color: var(--text); background: var(--row); border: var(--edge-tab); border-radius: var(--r-row); padding: 10px 12px; }
.input:focus { outline: none; border: var(--edge-picked); }

/* ---------- Plate (licence plate style for IDs) ---------- */
.plate { display: inline-block; font: 600 14px/1 var(--font-data); letter-spacing: .12em; color: var(--navy-800);
  background: var(--cream); border: 2px solid var(--white); border-radius: 6px; padding: 5px 8px; }

/* ---------- Focus (keyboard) ---------- */
.city :focus-visible { outline: 3px solid var(--orange-300); outline-offset: 2px; }

/* =====================================================================
   WEBSITE-ONLY LAYER — never load below this line in a game screen.
   Game screens sit over the live game; these rules paint full areas.
   ===================================================================== */
.city-site { background: var(--ground); }

/* ---------- Photo hero ---------- */
.hero { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,17,31,.55), rgba(10,17,31,.80) 70%, var(--navy-900)),
              linear-gradient(90deg, rgba(255,122,69,.18), transparent 60%); }