/* ============================================================
   WEEP WORLD — in-game skin
   ============================================================
   The landing page is box art: Anton headlines, hot pink and marquee gold on
   near-black. The moment you dropped into the city the game switched to a
   lime-green terminal, so the product looked like two different games. This
   sheet loads last and carries the landing's look into everything after it.

   The split that keeps the pixel identity:
     - box-art type (Anton / Barlow Condensed) for chrome: titles, labels,
       buttons, copy — the things you read.
     - pixel type (Press Start 2P) for game numbers: cash, stars, ammo, the
       clock — the things you glance at.

   Only colour, type and framing live here. Layout rules for the phone HUD
   stay in style.css; where this sheet moves something on a phone it says so. */

:root {
  --ww-pink: #ff2f6a;
  --ww-pink-soft: #ff5c8a;
  --ww-gold: #ffc83c;
  --ww-amber: #ffb454;
  --ww-cream: #efe8da;
  --ww-dim: #9a9384;
  --ww-night: #07060b;
  --ww-glass: rgba(12, 9, 16, 0.74);
  --ww-glass-hi: rgba(22, 16, 26, 0.9);
  --ww-line: rgba(255, 200, 60, 0.2);
  --ww-line-hi: rgba(255, 200, 60, 0.55);
  --ww-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ww-display: 'Anton', 'Barlow Condensed', Impact, sans-serif;
  --ww-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Re-point the old tokens so every rule written against them follows. */
  --neon: var(--ww-gold);
  --accent: var(--ww-pink-soft);
  --warn: var(--ww-amber);
  --danger: #ff4d5e;
  --money: #7dff9a;
  --ink: var(--ww-cream);
  --ink-dim: var(--ww-dim);
  --bg-1: #120e16;
  --bg-2: #1d1722;
}

/* `.hidden` was per-component, so every new component that forgot its own
   rule could never be turned off — and any later `display` rule (the phone
   HUD sets several) silently switched hidden things back on. On a phone that
   put an empty interact prompt, a "— / —" ammo box and SENTENCE/DEPLOYED
   chips on screen for players who were neither in prison nor at war. One
   global rule ends that class of bug. */
.hidden { display: none !important; }

/* ============ Panels & overlays ============ */
.overlay:not(.title-screen) {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 47, 106, 0.08), transparent 60%),
    rgba(5, 4, 9, 0.8);
}

.panel {
  background:
    linear-gradient(180deg, rgba(255, 200, 60, 0.035), transparent 90px),
    linear-gradient(160deg, #17111c 0%, #0d0a11 100%);
  border: 1px solid var(--ww-line);
  border-left: 4px solid var(--ww-pink);
  box-shadow: var(--ww-shadow), 0 24px 70px rgba(0, 0, 0, 0.6);
  animation: ww-panel-in 180ms cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes ww-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.title {
  font-family: var(--ww-display);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ww-gold);
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 200, 60, 0.25);
}
.subtitle {
  font-family: var(--ww-ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.5px;
  color: var(--ww-dim);
}

/* ============ Buttons ============ */
.btn {
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ww-cream);
  border: 1px solid rgba(239, 232, 218, 0.22);
  border-radius: 2px;
  transition: transform 80ms ease, background 80ms, border-color 80ms, box-shadow 80ms, filter 80ms;
}
.btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  border-color: var(--ww-line-hi);
  background: rgba(255, 200, 60, 0.07);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--ww-gold); outline-offset: 2px; }

.btn-primary {
  font-family: var(--ww-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 2px;
  color: #14030a;
  background: linear-gradient(180deg, #ffe14d 0%, #ffb01f 60%, #ff8a1f 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 150, 31, 0.22);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffe14d 0%, #ffb01f 60%, #ff8a1f 100%);
  filter: brightness(1.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 36px rgba(255, 170, 50, 0.4);
}
.btn-small { font-size: 13px; padding: 7px 12px; letter-spacing: 1.2px; }
.btn-primary.btn-small { font-size: 15px; }

/* ============ HUD: the status bar ============ */
/* One glass strip with dividers instead of eight boxed chips. The eye finds
   HP, cash and heat in the same place every time; the rest is quieter. */
.hud-row { padding: 16px 20px; }
.hud-stats {
  gap: 0;
  background: var(--ww-glass);
  border: 1px solid var(--ww-line);
  border-left: 3px solid var(--ww-pink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-wrap: nowrap;
  align-items: stretch;
}
.stat-block {
  background: none;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  padding: 7px 14px 8px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.stat-block:last-child { border-right: none; }
.stat-label {
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ww-dim);
  margin-bottom: 3px;
}
.cash-value {
  font-size: 15px;
  color: var(--money);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 14px rgba(125, 255, 154, 0.25);
  transition: color 200ms;
}
.cash-value.up   { color: #b8ffc6; }
.cash-value.down { color: #ff8a8a; }
.empire-value { font-size: 11px; color: #8fc6ff; }
.clock-value, .weather-value { font-size: 11px; }
.stat-clickable { cursor: pointer; }
.stat-clickable:hover .stat-label { color: var(--ww-gold); }

.hp-bar {
  width: 130px;
  height: 10px;
  background: #1e0a0e;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
  position: relative;
}
/* Quarter ticks so a glance reads "about half" instead of a guess. */
.hp-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 24.5%, rgba(0, 0, 0, 0.55) 24.5% 25%);
  pointer-events: none;
}
.hp-fill {
  background: linear-gradient(180deg, #ff6b7c 0%, #ff2f55 55%, #c8173d 100%);
  box-shadow: 0 0 10px rgba(255, 47, 85, 0.45);
  transition: width 220ms cubic-bezier(.3, .9, .3, 1);
}
.hud.hp-low .hp-fill { animation: ww-hp-pulse 0.8s ease-in-out infinite; }
@keyframes ww-hp-pulse { 50% { filter: brightness(1.6); } }

.wanted-stars {
  font-size: 14px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.18);
  text-shadow: none;
}
.wanted-stars .on {
  color: var(--ww-gold);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 200, 60, 0.6);
}
.wanted-stars.hard { color: rgba(255, 255, 255, 0.18); text-shadow: none; animation: none; }
/* Three stars and up the lit ones go from gold to siren red. */
.wanted-stars.hard .on { color: #ff4d5e; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 47, 85, 0.8); }
.wanted-stars.bump { animation: ww-star-bump 700ms ease-out; }
@keyframes ww-star-bump {
  0% { transform: scale(1); }
  15% { transform: scale(1.35); filter: drop-shadow(0 0 8px #ff2f6a); }
  30% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.wanted-label { font-family: var(--ww-ui); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; margin-top: 2px; }

.hud-buttons { gap: 8px; }
.btn-icon {
  width: 42px; height: 42px;
  background: var(--ww-glass);
  color: var(--ww-gold);
  border: 1px solid var(--ww-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 80ms, transform 80ms;
}
.btn-icon:hover { border-color: var(--ww-line-hi); transform: translate(-1px, -1px); }

/* ============ HUD: weapon + ammo ============ */
.weapon-bar {
  background: var(--ww-glass);
  border: 1px solid var(--ww-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px;
  gap: 5px;
}
.weapon-slot {
  width: auto;
  min-width: 62px;
  padding: 6px 10px 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--ww-dim);
  transition: background 90ms, color 90ms, border-color 90ms;
}
.weapon-slot:hover { color: var(--ww-cream); }
.weapon-slot.active {
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.18), rgba(255, 200, 60, 0.05));
  border-color: var(--ww-line-hi);
  color: var(--ww-gold);
  box-shadow: inset 0 -2px 0 var(--ww-gold);
}
.weapon-slot .wkey { font-family: var(--pixel-font); font-size: 10px; color: var(--ww-pink-soft); }
.wammo { font-family: var(--pixel-font); font-size: 12px; }

/* GTA's corner readout: the gun's name small, the rounds big. */
.ammo-value {
  font-size: 18px;
  color: var(--ww-cream);
  background: var(--ww-glass);
  border: 1px solid var(--ww-line);
  border-right: 3px solid var(--ww-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 9px 14px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  white-space: pre;
}

/* ============ Minimap ============ */
.minimap {
  top: 94px;
  right: 20px;
  border: 1px solid var(--ww-line-hi);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33), 0 0 0 3px rgba(12, 9, 16, 0.6);
}
/* The legend explains colours you learn in a minute. It stays out of the way
   until you look at the map (hover), instead of fencing off a strip of the
   screen forever. */
.minimap-key {
  top: 94px;
  right: 248px;
  font-family: var(--ww-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  background: var(--ww-glass-hi);
  border: 1px solid var(--ww-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 160ms, transform 160ms;
}
.hud.map-peek .minimap-key { opacity: 1; transform: none; }
.mk-title { font-family: var(--ww-ui); font-weight: 700; color: var(--ww-gold); letter-spacing: 2.5px; font-size: 11px; }

/* ============ Prompts, feed, hints ============ */
.interact-prompt {
  bottom: 128px;
  background: var(--ww-glass-hi);
  border: 1px solid var(--ww-line-hi);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36), 0 0 30px rgba(255, 200, 60, 0.12);
  padding: 10px 18px 10px 10px;
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ww-cream);
  animation: ww-prompt-in 160ms ease-out;
}
@keyframes ww-prompt-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.interact-prompt .ik {
  font-family: var(--pixel-font);
  font-size: 14px;
  background: var(--ww-gold);
  color: #14030a;
  padding: 6px 8px;
  margin-right: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  vertical-align: 2px;
}

/* Toasts hang under the minimap, clear of its legend. */
.feed { top: 272px; right: 20px; gap: 6px; }
/* the radio dial (js/radio.js) sits under the minimap; the feed under it */
body.ww-radio-on .feed { top: 318px; }
.minimap.hidden ~ .feed, .hud:not(:has(.minimap:not(.hidden))) .feed { top: 94px; }
.feed-msg {
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  background: var(--ww-glass-hi);
  border-left: 3px solid var(--ww-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.33);
  padding: 6px 12px 6px 10px;
  color: var(--ww-cream);
  max-width: 420px;
  animation: ww-feed-in 260ms cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes ww-feed-in {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.feed-msg.money  { border-left-color: var(--money); color: #c9ffd4; }
.feed-msg.warn   { border-left-color: var(--ww-amber); color: #ffe1b0; }
.feed-msg.danger { border-left-color: var(--danger); color: #ffc2c8; }

.hud-hints {
  bottom: 10px;
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ww-cream);
  opacity: 0.42;
}
.hud-hints kbd, .tour-body kbd {
  font-family: var(--pixel-font);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--ww-line-hi);
  border-bottom-width: 2px;
  color: var(--ww-gold);
  border-radius: 2px;
}

/* ============ Mission tracker ============ */
.mission-tracker {
  top: 94px;
  left: 20px;
  background: var(--ww-glass-hi);
  border: 1px solid var(--ww-line);
  border-left: 3px solid var(--ww-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 11px 14px;
}
.mt-title { font-family: var(--ww-display); font-size: 18px; letter-spacing: 1px; color: var(--ww-gold); }
.mt-objective { font-family: var(--ww-ui); font-weight: 600; font-size: 17px; color: var(--ww-cream); }
.mt-timer { color: var(--ww-amber); }
.mt-abandon { font-family: var(--ww-ui); font-weight: 700; font-size: 11px; letter-spacing: 2px; }
.mt-progress { height: 6px; background: rgba(255, 255, 255, 0.08); border: none; }
.mt-progress-fill { background: linear-gradient(90deg, var(--ww-pink), var(--ww-gold)); }

/* ============ Tour ============ */
.tour-panel { max-width: 460px; }
.tour-body {
  font-family: var(--ww-ui);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.9;
  color: var(--ww-cream);
}
.tour-dot { width: 18px; height: 3px; border-radius: 0; background: rgba(255, 255, 255, 0.15); }
.tour-dot.active { background: var(--ww-gold); box-shadow: 0 0 8px rgba(255, 200, 60, 0.6); }

/* ============ Camera bar (3D) ============ */
.world-camera {
  bottom: max(34px, env(safe-area-inset-bottom));
  gap: 0;
  padding: 3px;
  border: 1px solid var(--ww-line);
  border-radius: 2px;
  background: var(--ww-glass);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  font: 700 13px/1 var(--ww-ui);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ww-dim);
}
.world-camera button {
  border: none;
  border-radius: 0;
  padding: 8px 14px;
  min-height: 32px;
  background: transparent;
}
.world-camera button:hover { background: rgba(255, 255, 255, 0.05); color: var(--ww-cream); }
.world-camera button[aria-pressed=true] {
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.2), rgba(255, 200, 60, 0.06));
  color: var(--ww-gold);
  box-shadow: inset 0 -2px 0 var(--ww-gold);
}
.world-camera :focus-visible { outline: 2px solid var(--ww-gold); }

/* ============ Location card ============ */
/* GTA's arrival card: the name of where you are, big, bottom-right, for a
   couple of seconds after every map change. It is the cheapest way to make
   sixteen maps feel like sixteen places. */
.ww-location {
  position: absolute;
  right: 28px;
  bottom: 96px;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
  z-index: 6;
}
.ww-location.show { opacity: 1; transform: none; }
.ww-location-kicker {
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--ww-amber);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.ww-location-name {
  font-family: var(--ww-display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ww-gold);
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 200, 60, 0.35);
}
.ww-location-name::after {
  content: '';
  display: block;
  height: 3px;
  width: 64px;
  margin: 8px 0 0 auto;
  background: var(--ww-pink);
  box-shadow: 0 0 12px rgba(255, 47, 106, 0.7);
}

/* ============ Screen feedback ============ */
/* Hurt: a red rim that flashes on damage. Heat: a slow red/blue sweep round
   the edges while the police are looking for you. Both sit under the HUD and
   never take a click. */
.ww-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.ww-hurt {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 0, 30, 0.55) 100%);
  transition: opacity 500ms ease-out;
}
.ww-hurt.hit { opacity: 1; transition: none; }
.ww-hurt.low { opacity: 0.55; animation: ww-heartbeat 1.1s ease-in-out infinite; }
@keyframes ww-heartbeat { 0%, 100% { opacity: 0.35; } 15% { opacity: 0.75; } 30% { opacity: 0.4; } 45% { opacity: 0.65; } }
.ww-heat {
  box-shadow: inset 0 0 90px rgba(255, 30, 60, 0.0);
  transition: opacity 600ms;
}
.ww-heat.on { opacity: 1; animation: ww-siren 1.4s linear infinite; }
@keyframes ww-siren {
  0%, 100% { box-shadow: inset 60px 0 90px -40px rgba(255, 30, 60, 0.38), inset -60px 0 90px -40px rgba(40, 90, 255, 0.0); }
  50%      { box-shadow: inset 60px 0 90px -40px rgba(255, 30, 60, 0.0),  inset -60px 0 90px -40px rgba(40, 90, 255, 0.38); }
}

/* Floating cash delta next to the balance: +$1,200 rises, −$300 sinks. */
.ww-cash-pop {
  position: absolute;
  font-family: var(--pixel-font);
  font-size: 16px;
  pointer-events: none;
  z-index: 7;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: ww-pop-up 1.3s ease-out forwards;
  white-space: nowrap;
}
.ww-cash-pop.gain { color: var(--money); }
.ww-cash-pop.loss { color: #ff6b7c; animation-name: ww-pop-down; }
@keyframes ww-pop-up   { 0% { opacity: 0; transform: translateY(-6px) scale(1.2); } 12% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes ww-pop-down { 0% { opacity: 0; transform: translateY(-6px); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* ============ Phone ============ */
.phone-frame {
  background: linear-gradient(160deg, #17111c 0%, #0d0a11 100%);
  border: 1px solid var(--ww-line);
  border-left: 4px solid var(--ww-pink);
  border-radius: 3px;
  box-shadow: var(--ww-shadow), 0 24px 70px rgba(0, 0, 0, 0.6);
  animation: ww-panel-in 180ms cubic-bezier(.2, .9, .3, 1.15);
}
.phone-bar { background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid var(--ww-line); }
.phone-title { font-family: var(--ww-display); font-size: 22px; letter-spacing: 2px; color: var(--ww-pink); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.phone-x { border: 1px solid rgba(239, 232, 218, 0.22); color: var(--ww-cream); background: transparent; }
.phone-x:hover { border-color: var(--ww-gold); color: var(--ww-gold); }
.phone-tab { background: transparent; border: 1px solid transparent; color: var(--ww-dim); }
.phone-tab:hover { color: var(--ww-cream); }
.phone-gps { font-family: var(--ww-ui); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: var(--ww-pink-soft); border-top-color: rgba(255, 255, 255, 0.07); }
.phone-search { font-family: var(--ww-ui); font-weight: 600; font-size: 16px; }
.phone-list-item { font-family: var(--ww-ui); font-weight: 600; font-size: 15px; letter-spacing: 0.5px; }
.phone-legend, .phone-foot { font-family: var(--ww-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.5px; }
.phone-legend-h { font-family: var(--ww-ui); font-weight: 700; letter-spacing: 2.5px; color: var(--ww-amber); }
.phone-foot .ik { background: rgba(0, 0, 0, 0.6); border: 1px solid var(--ww-line-hi); color: var(--ww-gold); }
.ride-header, .career-h { font-family: var(--ww-ui); font-weight: 700; letter-spacing: 2.5px; color: var(--ww-amber); }

/* ============ Shops ============ */
.prop-address {
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--ww-amber);
  margin: 2px 0 16px;
  text-transform: uppercase;
}
.shop-row {
  text-align: left;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, 0.07);
  border-left: 2px solid transparent;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 90ms, background 90ms;
}
.shop-row:hover { border-left-color: var(--ww-gold); background: rgba(255, 200, 60, 0.05); }
.shop-row.owned { border-left-color: var(--money); }
.shop-name { font-family: var(--ww-display); font-size: 19px; letter-spacing: 1px; color: var(--ww-cream); }
.shop-stat { font-family: var(--ww-ui); font-weight: 600; font-size: 14px; letter-spacing: 1px; color: var(--ww-dim); }
.shop-price { font-family: var(--pixel-font); font-size: 14px; color: var(--money); }
.shop-row .btn { font-size: 15px; padding: 6px 14px; }
body.mobile .shop-name { font-size: 16px; }
body.mobile .shop-stat { font-size: 12px; }
body.mobile .prop-address { font-size: 11px; margin: 0 0 8px; }
body.mobile .menu-buttons { background: #0d0a11; }

/* ============ Common panel internals ============ */
.prop-address, .market-sub, .broker-offer-meta {
  font-family: var(--ww-ui);
  font-weight: 600;
  letter-spacing: 1.5px;
}
.broker-tab, .phone-tab, .slot-bet, .ru-choice {
  font-family: var(--ww-ui);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 14px;
}
.broker-tab.active, .phone-tab.active, .slot-bet.active {
  background: var(--ww-gold);
  color: #14030a;
  border-color: var(--ww-gold);
}
.pause-stats .pl, .prop-body .pl { font-family: var(--ww-ui); font-weight: 600; font-size: 17px; letter-spacing: 0.5px; }

/* Pause becomes a proper title card. */
#pauseMenu .panel { max-width: 420px; }
#pauseMenu .title { font-size: 52px; color: var(--ww-pink); text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 47, 106, 0.4); }
#pauseMenu .menu-buttons { flex-direction: column; align-items: stretch; }
.pause-stats { border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 18px; padding-top: 12px; }

/* The fate wheel after going down. */
#deathScreen .title { color: var(--ww-pink); font-size: 44px; }

/* ============ Character select ============ */
.char-section-label { font-family: var(--ww-ui); font-weight: 700; font-size: 14px; letter-spacing: 3px; color: var(--ww-amber); }
.char-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--ww-ui);
}
.char-card:hover { border-color: var(--ww-line-hi); }
.char-card.picked {
  border-color: var(--ww-gold);
  box-shadow: 0 0 0 1px var(--ww-gold), 0 0 24px rgba(255, 200, 60, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.12), rgba(0, 0, 0, 0.3));
}
.char-card .char-name { font-family: var(--ww-display); font-size: 16px; letter-spacing: 1px; }
.char-card .char-tag { font-family: var(--ww-ui); font-weight: 600; font-size: 13px; }

/* The pick screen: grid on the left, the chosen one on a lit stage. */
body.cs-picking .hero-inner { max-width: 1240px; }
#signedInAs { font-family: var(--ww-ui); font-weight: 700; font-size: 14px; letter-spacing: 2.5px; color: var(--ww-dim); text-transform: uppercase; }
.cs-char-head { justify-content: flex-start; gap: 14px; }
.char-pick { display: flex; gap: 40px; align-items: stretch; }
.char-pick .char-section { flex: 1 1 420px; margin-top: 8px; }
.char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.char-card { padding: 14px 8px 12px; gap: 4px; }
.char-card img { width: 96px; height: 96px; }
.char-card .char-name { font-size: 22px; }
.char-card .char-tag { font-size: 11px; letter-spacing: 2px; color: var(--ww-dim); }
.char-card.picked .char-tag { color: var(--ww-amber); }

.char-stage {
  flex: 0 1 380px;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 20px 26px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 200, 60, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(12, 9, 16, 0.3), rgba(12, 9, 16, 0.85));
  border: 1px solid var(--ww-line);
  border-left: 4px solid var(--ww-pink);
  box-shadow: var(--ww-shadow);
  overflow: hidden;
}
/* A spotlight cone from above, and the pool it makes on the floor. */
.char-stage::before {
  content: '';
  position: absolute; top: -40px; left: 50%;
  width: 320px; height: 420px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 220, 140, 0.18), transparent 85%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.stage-floor {
  position: absolute; left: 50%; bottom: 150px;
  width: 220px; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 200, 60, 0.35), transparent 70%);
}
.stage-sprite {
  position: relative;
  width: 224px; height: 224px;
  image-rendering: pixelated;
  margin-bottom: 8px;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.42));
}
.stage-sprite.flip { transform: scaleX(-1); }
.char-stage.empty .stage-sprite { visibility: hidden; }
.char-stage.pop .stage-sprite { animation: ww-stage-pop 360ms cubic-bezier(.2, .9, .3, 1.3); }
@keyframes ww-stage-pop { from { transform: translateY(14px) scale(0.9); opacity: 0.2; } to { transform: none; opacity: 1; } }
.stage-copy { position: relative; text-align: center; }
.stage-role { font-family: var(--ww-ui); font-weight: 700; font-size: 13px; letter-spacing: 4px; color: var(--ww-amber); }
.stage-name {
  font-family: var(--ww-display);
  font-size: 58px; line-height: 1;
  color: var(--ww-gold);
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 200, 60, 0.35);
}
.char-stage.empty .stage-name { font-size: 36px; color: var(--ww-cream); }
.stage-line { font-family: var(--ww-ui); font-weight: 600; font-size: 17px; color: var(--ww-cream); opacity: 0.8; margin-top: 4px; }
#btnStart { font-size: 24px; padding: 16px 38px; }

@media (max-width: 860px) {
  .char-pick { flex-direction: column-reverse; gap: 14px; }
  .char-stage { flex: 0 0 auto; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; }
  .char-stage::before, .stage-floor { display: none; }
  .stage-sprite { width: 104px; height: 104px; margin: 0; }
  .stage-copy { text-align: left; }
  .stage-name { font-size: 40px; }
  .char-stage.empty .stage-name { font-size: 26px; }
  .stage-line { font-size: 15px; }
  .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .char-card { padding: 8px 4px; }
  .char-card img { width: 64px; height: 64px; }
  .char-card .char-name { font-size: 18px; }
  .char-card .char-tag { font-size: 9px; letter-spacing: 1px; }
  body.cs-picking .hero-copy { width: 100%; }
  #btnStart { font-size: 20px; }
}

/* ============ The People's Hall ============ */
/* It had its own civic green and system type. Same building, same city:
   it now speaks the house style, with the civic register kept in the copy. */
#councilPanel {
  color: var(--ww-cream);
  background:
    linear-gradient(180deg, rgba(255, 200, 60, 0.035), transparent 120px),
    linear-gradient(160deg, #17111c 0%, #0d0a11 100%);
  border: 1px solid var(--ww-line);
  border-left: 4px solid var(--ww-pink);
  border-radius: 3px;
  box-shadow: var(--ww-shadow), 0 24px 70px rgba(0, 0, 0, 0.6);
  font: 600 16px/1.5 var(--ww-ui);
  letter-spacing: 0.3px;
}
#councilPanel::backdrop { background: rgba(5, 4, 9, 0.82); backdrop-filter: blur(8px); }
#councilPanel h1 {
  font-family: var(--ww-display); font-weight: 400;
  font-size: clamp(34px, 5vw, 56px); letter-spacing: 1px; line-height: 1;
  color: var(--ww-gold); text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 200, 60, 0.3);
}
#councilPanel h2, #councilPanel h3 { font-family: var(--ww-display); font-weight: 400; letter-spacing: 1px; color: var(--ww-cream); }
#councilPanel h2 { font-size: 22px; }
#councilPanel h3 { font-size: 24px; }
.council-eyebrow { color: var(--ww-amber); letter-spacing: 3px; font-size: 12px; }
.council-rules { border-color: rgba(255, 255, 255, 0.08); color: #cfc7b8; }
.council-rules strong { color: var(--ww-gold); }
#councilWeek { color: var(--ww-amber); font-size: 14px; letter-spacing: 1px; }
#councilMessage { color: var(--ww-gold); }
.council-layout aside { border-left-color: rgba(255, 255, 255, 0.08); }
.council-idea { border-top-color: rgba(255, 255, 255, 0.08); }
.council-idea p { color: #cfc7b8; }
.council-empty { border-color: var(--ww-line); color: var(--ww-dim); }
#councilPanel label { color: var(--ww-dim); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
#councilPanel input, #councilPanel textarea, #councilPanel select {
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(239, 232, 218, 0.18);
  color: var(--ww-cream); border-radius: 2px; font: 600 16px/1.4 var(--ww-ui);
}
#councilPanel input:focus, #councilPanel textarea:focus, #councilPanel select:focus { border-color: var(--ww-gold); outline: none; }
#councilPanel .btn {
  font: 700 14px/1.2 var(--ww-ui); letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04); color: var(--ww-cream);
  border: 1px solid rgba(239, 232, 218, 0.22); border-radius: 2px;
}
#councilPanel .btn-primary, #councilPanel [aria-pressed="true"] {
  font-family: var(--ww-display); font-weight: 400; font-size: 17px; letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe14d 0%, #ffb01f 60%, #ff8a1f 100%);
  color: #14030a; border: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#councilPanel :focus-visible { outline-color: var(--ww-gold); }
.council-small, #councilSubmissions, #councilAllowance { color: var(--ww-dim); font-size: 14px; }
.council-release { border-left-color: var(--ww-gold); }

/* ============ Touch tray ============ */
body.mobile #touchControls {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 47, 106, 0.08), transparent 70%),
    linear-gradient(180deg, #120d15 0%, #09070b 100%);
  border-top: 1px solid var(--ww-line);
}
.tc-stick { border-color: rgba(255, 200, 60, 0.18); }
.tc-stick.tc-fire { border-color: rgba(255, 47, 106, 0.45); }
.tc-fire .stick-knob { background: linear-gradient(180deg, #ff5577, #b0183e); }
.tc-btn {
  font-family: var(--ww-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 3px;
  border-color: rgba(255, 200, 60, 0.2);
  background: linear-gradient(180deg, #221a27, #151018);
  color: var(--ww-cream);
}
.tc-btn.held { background: linear-gradient(180deg, #3a2a3e, #211726); border-color: var(--ww-line-hi); color: var(--ww-gold); }
.tc-cap { font-family: var(--ww-ui); font-weight: 700; letter-spacing: 3px; font-size: 10px; }

/* ============ Phone HUD ============ */
/* The strip keeps its layout from style.css; this only restyles it. */
body.mobile .hud-stats { border-left-width: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30); }
body.mobile .stat-block { border-radius: 0; padding: 2px 7px; }
body.mobile .stat-label { font-size: 9px; letter-spacing: 1.5px; opacity: 1; margin-bottom: 1px; }
body.mobile .btn-icon { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30); }
body.mobile .minimap { border-radius: 3px; }
body.mobile .ww-location { right: 12px; bottom: 60px; }
body.mobile .ww-location-name { font-size: 34px; }
body.mobile .ww-location-kicker { font-size: 10px; letter-spacing: 3px; }
body.mobile .interact-prompt { font-size: 14px; bottom: 64px; }
body.mobile .feed-msg { font-size: 12px; letter-spacing: 0.5px; }
body.mobile .world-camera { font-size: 11px; letter-spacing: 1.2px; }
body.mobile .world-camera button { padding: 6px 9px; min-height: 28px; }
body.mobile .title { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .panel, .feed-msg, .interact-prompt, .wanted-stars.bump, .ww-heat.on, .ww-hurt.low, .ww-cash-pop { animation: none !important; }
}
#csStepChar .menu-buttons { justify-content: flex-start; }

/* ============ The Exchange: offer rows ============ */
.broker-offer {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid transparent;
  text-align: left;
}
.broker-offer:hover { border-left-color: var(--ww-gold); background: rgba(255, 200, 60, 0.05); }
.broker-offer-title { font-family: var(--ww-display); font-size: 19px; letter-spacing: 0.5px; line-height: 1.1; color: var(--ww-cream); }
.broker-offer-meta { font-size: 14px; color: var(--ww-dim); }
.broker-offer-pay { font-family: var(--pixel-font); font-size: 16px; color: var(--money); white-space: nowrap; }
.broker-offer-btn {
  font-family: var(--ww-display); font-size: 16px; letter-spacing: 1.5px;
  background: linear-gradient(180deg, #ffe14d 0%, #ffb01f 60%, #ff8a1f 100%);
  color: #14030a; border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
body.mobile .broker-offer-title { font-size: 17px; }
body.mobile .broker-offer-pay { font-size: 10px; }

/* ---- One-click door ------------------------------------------------------ */
.btn-play-now {
  display: block;
  width: 100%;
  font-family: var(--ww-display);
  font-size: 34px;
  letter-spacing: 0.06em;
  padding: 16px 20px;
}
.play-now-sub {
  margin: 10px 0 2px;
  font-family: var(--ww-ui);
  font-size: 14px;
  color: var(--ww-dim);
}
.sign-in-box { margin-top: 12px; }

/* ---- First Night starter card --------------------------------------------- */
.starter-card {
  position: absolute;
  top: 94px;
  left: 20px;
  width: min(340px, 56vw);
  padding: 10px 14px 12px;
  background: var(--ww-glass-hi);
  border: 1px solid var(--ww-line);
  border-left: 3px solid var(--ww-pink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 5;
}
.starter-card.below-tracker { top: 230px; }
.starter-head { display: flex; justify-content: space-between; align-items: baseline; }
.starter-kicker { font-family: var(--ww-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--ww-pink-soft); }
.starter-step { font-family: var(--ww-ui); font-size: 12px; color: var(--ww-dim); }
.starter-title { font-family: var(--ww-display); font-size: 24px; color: var(--ww-gold); line-height: 1.1; margin: 2px 0 4px; }
.starter-hint { font-family: var(--ww-ui); font-size: 16px; color: var(--ww-cream); line-height: 1.3; }
.starter-hint kbd {
  display: inline-block; min-width: 1.4em; padding: 0 5px; margin: 0 1px;
  border: 1px solid var(--ww-line-hi); border-radius: 3px;
  font-family: var(--ww-ui); font-weight: 700; color: var(--ww-gold); text-align: center;
}
.starter-bar { height: 3px; margin-top: 9px; background: rgba(255, 255, 255, 0.08); }
.starter-fill { height: 100%; width: 0; background: var(--ww-gold); transition: width 0.5s ease; }
.starter-card.pop { animation: starter-pop 0.6s ease; }
@keyframes starter-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); border-left-color: var(--ww-gold); }
  100% { transform: scale(1); }
}
body.mobile .starter-card { top: 70px; left: 8px; padding: 6px 9px 8px; }
body.mobile .starter-card.below-tracker { top: 170px; }
body.mobile .starter-title { font-size: 18px; }
body.mobile .starter-hint { font-size: 13px; }

/* ============ Your lot: build a business ============ */
.lot-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 4px 0 2px; text-align: left;
  font-family: var(--ww-display); font-size: 20px; letter-spacing: 1px; color: var(--ww-gold);
}
.lot-head-sub { font-family: var(--ww-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; color: var(--ww-dim); }
.btn-build.lot-card {
  display: grid; gap: 2px; text-align: left; text-transform: none;
  padding: 9px 12px 10px;
  font-family: var(--ww-ui); letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ww-line); border-left: 3px solid var(--ww-pink);
  border-radius: 2px; color: var(--ww-cream);
}
.btn-build.lot-card:hover:not(:disabled) { background: rgba(255, 200, 60, 0.08); border-color: var(--ww-line-hi); color: var(--ww-cream); }
.btn-build.lot-card:disabled { opacity: 0.55; }
.lot-card-name { font-family: var(--ww-display); font-size: 19px; letter-spacing: 1px; color: var(--ww-gold); text-transform: uppercase; }
.lot-card-blurb { font-size: 14px; font-weight: 600; color: var(--ww-dim); }
.lot-card-stats { font-size: 15px; font-weight: 600; }
.lot-card-stats b { color: var(--ww-cream); }
.lot-card-stats em { font-style: normal; color: var(--money); }
.lot-card-short { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ww-pink-soft); }
.lot-more { text-align: left; margin-top: 4px; }
.lot-more > summary {
  cursor: pointer; list-style: none; padding: 7px 2px;
  font-family: var(--ww-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--ww-dim);
}
.lot-more > summary::-webkit-details-marker { display: none; }
.lot-more > summary::before { content: '+ '; color: var(--ww-gold); }
.lot-more[open] > summary::before { content: '– '; }
.lot-more[open] { display: flex; flex-direction: column; gap: 6px; }
.lot-progress, .lot-status {
  text-align: left; padding: 10px 12px;
  background: rgba(255, 200, 60, 0.05); border: 1px solid var(--ww-line); border-left: 3px solid var(--ww-gold);
  font-family: var(--ww-ui); font-weight: 600; color: var(--ww-cream);
}
.lot-status { display: flex; justify-content: space-between; font-size: 17px; letter-spacing: 0.5px; }
.lot-status .money { color: var(--money); }
.lot-progress-label { display: flex; justify-content: space-between; font-size: 15px; letter-spacing: 0.12em; }
.lot-progress-time { font-family: var(--pixel-font, 'Press Start 2P', monospace); font-size: 11px; color: var(--ww-gold); }
.lot-progress-bar { height: 8px; margin: 8px 0 6px; background: rgba(255, 255, 255, 0.08); }
.lot-progress-fill {
  height: 100%; width: 2%; transition: width 0.25s linear;
  background: repeating-linear-gradient(-45deg, var(--ww-gold) 0 8px, var(--ww-amber) 8px 16px);
}
.lot-progress-note { font-size: 14px; color: var(--ww-dim); }
.lot-demolish { font-size: 13px; padding: 7px 12px; letter-spacing: 1.2px; color: var(--ww-dim); }
.lot-demolish.armed { color: var(--danger); border-color: var(--danger); }
body.mobile .lot-card-name { font-size: 16px; }
body.mobile .lot-card-stats { font-size: 13px; }