/* ===========================================================================
   GIGA THEFT AUTO | game.css | full styling for the game client
   Dark city, money green accents, condensed display type, zero webfonts.
   =========================================================================== */

:root {
  --green: #36ff6e;
  --green_dim: #2bd94a;
  --green_dark: #0f3d1e;
  --red: #ff3b3b;
  --gold: #f2c230;
  --teal: #38d6c4;
  --frost: #a8cfe8;
  --bg: #07110a;
  --panel: rgba(8, 16, 11, 0.92);
  --panel_border: rgba(54, 255, 110, 0.25);
  --text: #e8f5ec;
  --text_dim: #8fae98;
  --font_disp: Impact, "Arial Narrow Bold", "Arial Narrow", "Franklin Gothic Medium", "Arial Black", sans-serif;
  --font_body: "Segoe UI", system-ui, Arial, sans-serif;
  --font_mono: Consolas, "Courier New", monospace;
  --safe_t: env(safe-area-inset-top, 0px);
  --safe_b: env(safe-area-inset-bottom, 0px);
  --safe_l: env(safe-area-inset-left, 0px);
  --safe_r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font_body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------------------
   game canvas
--------------------------------------------------------------------------- */
#game3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  touch-action: none;
  outline: none;
}

/* ---------------------------------------------------------------------------
   layers
--------------------------------------------------------------------------- */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#hud input,
#hud button,
#hud .hud_chat input,
#hud .hud_chat button {
  pointer-events: auto;
}

#mobile {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  touch-action: none;
}

#ui {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

#boot {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------------------
   boot screen
--------------------------------------------------------------------------- */
#boot {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(54, 255, 110, 0.14), transparent 55%),
    radial-gradient(ellipse at 50% -20%, rgba(54, 255, 110, 0.06), transparent 50%),
    linear-gradient(180deg, #050d07 0%, #07110a 55%, #04130a 100%);
}

.boot_inner {
  text-align: center;
  padding: 24px;
  max-width: 560px;
  width: 100%;
}

.boot_logo {
  font-family: var(--font_disp);
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow:
    0 0 24px rgba(54, 255, 110, 0.45),
    0 4px 0 rgba(0, 0, 0, 0.6);
}
.boot_logo .boot_logo_mid {
  color: var(--green);
  text-shadow: 0 0 30px rgba(54, 255, 110, 0.8);
}

.boot_city {
  margin-top: 10px;
  font-family: var(--font_disp);
  font-size: 20px;
  letter-spacing: 10px;
  color: var(--green_dim);
  text-transform: uppercase;
}

.boot_tag {
  margin-top: 8px;
  font-size: 14px;
  font-style: italic;
  color: var(--text_dim);
}

.boot_progress {
  margin: 28px auto 0;
  width: 320px;
  max-width: 84vw;
  height: 12px;
  border: 1px solid var(--panel_border);
  border-radius: 8px;
  background: rgba(10, 26, 15, 0.8);
  overflow: hidden;
}

.boot_bar {
  width: 0%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--green_dark), var(--green_dim) 60%, var(--green));
  box-shadow: 0 0 14px rgba(54, 255, 110, 0.6);
  transition: width 0.2s ease-out;
}

.boot_status {
  margin-top: 12px;
  font-family: var(--font_mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text_dim);
  text-transform: uppercase;
}

.boot_menu {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.boot_foot {
  margin-top: 30px;
  font-size: 12px;
  color: rgba(143, 174, 152, 0.55);
  letter-spacing: 1px;
}

.noscript_msg {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--green);
  font-family: var(--font_disp);
  font-size: 24px;
  text-align: center;
  padding: 20px;
}

/* ---------------------------------------------------------------------------
   buttons and inputs
--------------------------------------------------------------------------- */
.btn {
  font-family: var(--font_disp);
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 38px;
  border-radius: 8px;
  border: 1px solid var(--panel_border);
  background: rgba(12, 24, 16, 0.9);
  color: var(--text);
  cursor: pointer;
  min-width: 240px;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { box-shadow: 0 0 18px rgba(54, 255, 110, 0.35); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn_play {
  background: linear-gradient(180deg, var(--green) 0%, var(--green_dim) 100%);
  color: #04140a;
  border-color: rgba(255, 255, 255, 0.25);
  font-size: 26px;
  box-shadow: 0 0 24px rgba(54, 255, 110, 0.45);
}
.btn_play:hover { box-shadow: 0 0 34px rgba(54, 255, 110, 0.7); }

.btn_wallet {
  border-color: rgba(153, 69, 255, 0.55);
  color: #d7bfff;
}
.btn_wallet:hover { box-shadow: 0 0 18px rgba(153, 69, 255, 0.4); }

.btn_ghost {
  font-size: 14px;
  min-width: 0;
  padding: 8px 20px;
  color: var(--text_dim);
}

.name_input {
  font-family: var(--font_disp);
  font-size: 22px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  width: 280px;
  max-width: 84vw;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--panel_border);
  background: rgba(6, 14, 9, 0.92);
  color: var(--green);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.name_input::placeholder { color: rgba(143, 174, 152, 0.5); }
.name_input:focus { border-color: var(--green_dim); box-shadow: 0 0 14px rgba(54, 255, 110, 0.3); }

/* ---------------------------------------------------------------------------
   HUD: hud.js injects children with these classes
--------------------------------------------------------------------------- */
.hud_minimap {
  position: absolute;
  top: calc(14px + var(--safe_t));
  right: calc(14px + var(--safe_r));
  width: 200px;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--panel_border);
  background: rgba(5, 12, 8, 0.85);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.hud_minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hud_money {
  position: absolute;
  top: calc(224px + var(--safe_t));
  right: calc(14px + var(--safe_r));
  font-family: var(--font_disp);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--green);
  text-align: right;
  text-shadow: 0 0 12px rgba(54, 255, 110, 0.5), 0 2px 0 rgba(0, 0, 0, 0.7);
}
.hud_money .hud_money_delta {
  display: block;
  font-size: 16px;
  color: var(--gold);
}
.hud_money .hud_bank {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #59e0d8;
  text-shadow: 0 0 8px rgba(89, 224, 216, 0.45), 0 1px 3px rgba(0, 0, 0, 0.8);
  margin-top: 2px;
  transition: color 0.25s;
}
.hud_money.bank_up .hud_bank { color: #a9fff6; }

.hud_wanted {
  position: absolute;
  top: calc(280px + var(--safe_t));
  right: calc(14px + var(--safe_r));
  text-align: right;
  font-size: 24px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.hud_wanted .star { color: rgba(255, 255, 255, 0.18); }
.hud_wanted .star.on,
.hud_wanted .on {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(242, 194, 48, 0.8);
}

.hud_health {
  position: absolute;
  left: calc(16px + var(--safe_l));
  bottom: calc(200px + var(--safe_b));
  width: 240px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid var(--panel_border);
  background: rgba(5, 12, 8, 0.8);
  overflow: hidden;
}
.hud_health .hud_health_fill,
.hud_health .fill,
.hud_health > div {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #1f9e44, var(--green));
  transition: width 0.18s ease-out;
}
.hud_health.hud_health_low > div,
.hud_health .fill.low {
  background: linear-gradient(90deg, #8a1f1f, var(--red));
}

.hud_online {
  position: absolute;
  top: calc(14px + var(--safe_t));
  left: calc(16px + var(--safe_l));
  font-family: var(--font_mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text_dim);
  background: var(--panel);
  border: 1px solid var(--panel_border);
  border-radius: 8px;
  padding: 6px 12px;
}
.hud_online .hud_online_count { color: var(--green); font-weight: bold; }
.hud_online .hud_offline { color: var(--red); font-weight: bold; }

.hud_job {
  position: absolute;
  left: calc(16px + var(--safe_l));
  top: 38%;
  transform: translateY(-50%);
  width: 250px;
  background: var(--panel);
  border: 1px solid var(--panel_border);
  border-left: 3px solid var(--green_dim);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.hud_job .hud_job_title {
  font-family: var(--font_disp);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.hud_job .hud_job_stage { color: var(--text); }
.hud_job .hud_job_timer { color: var(--gold); font-family: var(--font_mono); }

.hud_chat {
  position: absolute;
  left: calc(16px + var(--safe_l));
  bottom: calc(16px + var(--safe_b));
  width: 340px;
  max-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 13px;
  line-height: 1.45;
}
.hud_chat .hud_chat_log {
  overflow: hidden;
  word-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.hud_chat .hud_chat_log > div {
  background: rgba(5, 12, 8, 0.55);
  border-radius: 6px;
  padding: 2px 8px;
  margin-top: 2px;
}
.hud_chat .hud_chat_name { color: var(--green); font-weight: bold; }
.hud_chat input {
  margin-top: 6px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel_border);
  background: rgba(5, 12, 8, 0.9);
  color: var(--text);
  font-family: var(--font_body);
  font-size: 13px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.hud_feed {
  position: absolute;
  top: calc(310px + var(--safe_t));
  right: calc(14px + var(--safe_r));
  width: 260px;
  text-align: right;
  font-size: 13px;
  color: var(--text_dim);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.hud_feed > div { margin-top: 3px; }
.hud_feed .feed_money { color: var(--green); }
.hud_feed .feed_bad { color: var(--red); }

.hud_speed {
  position: absolute;
  right: calc(20px + var(--safe_r));
  bottom: calc(24px + var(--safe_b));
  font-family: var(--font_disp);
  font-size: 44px;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(54, 255, 110, 0.4), 0 2px 0 rgba(0, 0, 0, 0.8);
}
.hud_speed .hud_speed_unit {
  font-size: 16px;
  color: var(--text_dim);
  letter-spacing: 2px;
}

.hud_hint {
  position: absolute;
  bottom: calc(10px + var(--safe_b));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font_mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(143, 174, 152, 0.7);
  background: rgba(5, 12, 8, 0.6);
  border-radius: 8px;
  padding: 5px 14px;
  white-space: nowrap;
}

.hud_weapon {
  position: absolute;
  right: calc(20px + var(--safe_r));
  bottom: calc(86px + var(--safe_b));
  font-family: var(--font_disp);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.hud_weapon .hud_ammo { color: var(--gold); font-family: var(--font_mono); }

/* ---------------------------------------------------------------------------
   mobile controls (mobile.js injects into #mobile)
--------------------------------------------------------------------------- */
.mob_stick {
  position: absolute;
  left: calc(26px + var(--safe_l));
  bottom: calc(30px + var(--safe_b));
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 2px solid rgba(54, 255, 110, 0.3);
  background: rgba(8, 18, 12, 0.45);
  pointer-events: auto;
  touch-action: none;
}
.mob_stick .mob_stick_knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(54, 255, 110, 0.35);
  border: 2px solid rgba(54, 255, 110, 0.6);
}

.mob_btn {
  position: absolute;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(54, 255, 110, 0.35);
  background: rgba(8, 18, 12, 0.5);
  color: var(--text);
  font-family: var(--font_disp);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.mob_btn:active,
.mob_btn.mob_btn_down {
  background: rgba(54, 255, 110, 0.35);
  border-color: var(--green);
}

.mob_btn_fire {
  right: calc(24px + var(--safe_r));
  bottom: calc(110px + var(--safe_b));
  width: 80px;
  height: 80px;
  border-color: rgba(255, 59, 59, 0.5);
}
.mob_btn_fire:active { background: rgba(255, 59, 59, 0.35); border-color: var(--red); }
.mob_btn_aim { right: calc(112px + var(--safe_r)); bottom: calc(48px + var(--safe_b)); }
.mob_btn_jump { right: calc(24px + var(--safe_r)); bottom: calc(208px + var(--safe_b)); }
.mob_btn_enter { right: calc(118px + var(--safe_r)); bottom: calc(150px + var(--safe_b)); }
.mob_btn_action { right: calc(200px + var(--safe_r)); bottom: calc(90px + var(--safe_b)); }
.mob_btn_chat { left: calc(16px + var(--safe_l)); top: calc(60px + var(--safe_t)); width: 48px; height: 48px; }

/* ---------------------------------------------------------------------------
   toasts
--------------------------------------------------------------------------- */
.toast_wrap {
  position: absolute;
  top: calc(64px + var(--safe_t));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: 86vw;
}

.toast {
  font-family: var(--font_disp);
  font-size: 17px;
  letter-spacing: 1px;
  padding: 9px 22px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel_border);
  color: var(--text);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  text-align: center;
  max-width: 86vw;
}
.toast_show { opacity: 1; transform: translateY(0); }
.toast_money { color: var(--green); border-color: rgba(54, 255, 110, 0.5); }
.toast_bad { color: var(--red); border-color: rgba(255, 59, 59, 0.5); }

/* ---------------------------------------------------------------------------
   overlays: pause + death
--------------------------------------------------------------------------- */
.ui_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 8, 5, 0.78);
  pointer-events: auto;
}

.ui_panel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 48px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--panel_border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  max-width: 90vw;
}

.ui_title {
  font-family: var(--font_disp);
  font-size: 52px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 24px rgba(54, 255, 110, 0.5);
}
.ui_title_bad {
  color: var(--red);
  text-shadow: 0 0 24px rgba(255, 59, 59, 0.6);
}

.ui_sub {
  font-size: 15px;
  color: var(--text_dim);
  max-width: 380px;
}

.ui_death_row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font_disp);
}
.ui_death_label {
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--text_dim);
}
.ui_death_count {
  font-size: 54px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(242, 194, 48, 0.6);
}

/* ---------------------------------------------------------------------------
   interaction prompt
--------------------------------------------------------------------------- */
.ui_prompt {
  position: absolute;
  bottom: calc(140px + var(--safe_b));
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  font-family: var(--font_disp);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel_border);
  border-radius: 10px;
  padding: 8px 22px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
}
.ui_prompt_show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------------------
   shop modal (shops.js mounts its body through G.ui.modalShell; the shell
   section at the end of this file owns positioning, the head, and the X.
   Only body content rules live here.)
--------------------------------------------------------------------------- */
.shop_modal .shop_grid,
.shop_modal .shop_items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.shop_item {
  background: rgba(10, 22, 14, 0.85);
  border: 1px solid rgba(54, 255, 110, 0.15);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shop_item:hover {
  border-color: rgba(54, 255, 110, 0.5);
  box-shadow: 0 0 14px rgba(54, 255, 110, 0.2);
}

.shop_item .shop_item_name {
  font-family: var(--font_disp);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}

.shop_item .shop_item_price {
  font-family: var(--font_mono);
  font-size: 14px;
  color: var(--green);
}

.shop_item .shop_swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.shop_item button,
.shop_item .shop_buy {
  font-family: var(--font_disp);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 0;
  border-radius: 8px;
  border: 1px solid rgba(54, 255, 110, 0.4);
  background: linear-gradient(180deg, rgba(54, 255, 110, 0.25), rgba(43, 217, 74, 0.15));
  color: var(--green);
  cursor: pointer;
  transition: background 0.12s ease;
}
.shop_item button:hover,
.shop_item .shop_buy:hover {
  background: linear-gradient(180deg, var(--green), var(--green_dim));
  color: #04140a;
}
.shop_item button:disabled {
  opacity: 0.4;
  cursor: default;
}
.shop_item .shop_owned { color: var(--gold); font-size: 13px; }

/* ===========================================================================
   WAVE 2: phone, emote wheel, bank, downed, wasted, jail, fx feedback, crews
   =========================================================================== */

/* ---------------------------------------------------------------------------
   the Burner: phone panel (phone.js builds DOM, toggles .phone_open)
--------------------------------------------------------------------------- */
.phone_panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 320px;
  z-index: 31;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0b1310 0%, #070d0a 60%, #05100a 100%);
  border-left: 1px solid var(--panel_border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.65);
  transform: translateX(105%);
  transition: transform 0.22s ease-out;
  pointer-events: auto;
  overflow-y: auto;
  padding-bottom: calc(16px + var(--safe_b));
}
.phone_panel.phone_open,
.phone_panel.open { transform: translateX(0); }

.phone_header {
  position: relative;
  padding: calc(18px + var(--safe_t)) 18px 14px;
  font-family: var(--font_disp);
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 14px rgba(54, 255, 110, 0.4);
  border-bottom: 1px solid var(--panel_border);
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.09) 42.5%, transparent 43%),
    linear-gradient(160deg, transparent 63%, rgba(255, 255, 255, 0.07) 63.4%, transparent 64%),
    linear-gradient(78deg, transparent 71%, rgba(255, 255, 255, 0.05) 71.3%, transparent 72%),
    linear-gradient(180deg, rgba(54, 255, 110, 0.08), transparent);
}
.phone_header .phone_signal {
  font-family: var(--font_mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text_dim);
  display: block;
  margin-top: 2px;
  text-transform: none;
}
.phone_close {
  position: absolute;
  top: calc(10px + var(--safe_t));
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--panel_border);
  background: rgba(12, 24, 16, 0.9);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone_close:hover { color: var(--red); border-color: rgba(255, 59, 59, 0.5); }

/* clicking the dim strip beside the phone closes it (phone.js mounts this) */
.phone_backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(3, 8, 5, 0.35);
  pointer-events: auto;
}

.phone_apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

.phone_app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(54, 255, 110, 0.15);
  background: rgba(10, 22, 14, 0.85);
  color: var(--text);
  font-family: var(--font_disp);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.phone_app:hover {
  border-color: rgba(54, 255, 110, 0.5);
  box-shadow: 0 0 14px rgba(54, 255, 110, 0.2);
}
.phone_app .phone_app_icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(54, 255, 110, 0.14);
  border: 1px solid rgba(54, 255, 110, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.phone_app.phone_app_soon { opacity: 0.45; cursor: default; }
.phone_app.phone_app_soon:hover { border-color: rgba(54, 255, 110, 0.15); box-shadow: none; }

.phone_body { padding: 14px 16px; font-size: 13px; color: var(--text); }
.phone_body canvas { width: 100%; border-radius: 10px; display: block; }

/* ---------------------------------------------------------------------------
   the actions wheel: radial emote wheel, 9 slots (hud.js builds items in order)
--------------------------------------------------------------------------- */
.wheel_root {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  z-index: 33;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 12, 8, 0.35) 30%, rgba(5, 12, 8, 0.85) 72%, rgba(5, 12, 8, 0.2) 100%);
  border: 1px solid var(--panel_border);
  pointer-events: auto;
}
.wheel_root::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(54, 255, 110, 0.8);
}

.wheel_item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  font-family: var(--font_disp);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 22, 14, 0.92);
  border: 1px solid rgba(54, 255, 110, 0.25);
  cursor: pointer;
  transition: border-color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.wheel_item:hover,
.wheel_item.wheel_sel {
  background: rgba(54, 255, 110, 0.25);
  border-color: var(--green);
  box-shadow: 0 0 16px rgba(54, 255, 110, 0.45);
  color: #ffffff;
}
/* 9 slots, 40 degrees apart, first slot at the top, items stay upright */
.wheel_item:nth-child(1) { transform: rotate(-90deg) translate(134px) rotate(90deg); }
.wheel_item:nth-child(2) { transform: rotate(-50deg) translate(134px) rotate(50deg); }
.wheel_item:nth-child(3) { transform: rotate(-10deg) translate(134px) rotate(10deg); }
.wheel_item:nth-child(4) { transform: rotate(30deg) translate(134px) rotate(-30deg); }
.wheel_item:nth-child(5) { transform: rotate(70deg) translate(134px) rotate(-70deg); }
.wheel_item:nth-child(6) { transform: rotate(110deg) translate(134px) rotate(-110deg); }
.wheel_item:nth-child(7) { transform: rotate(150deg) translate(134px) rotate(-150deg); }
.wheel_item:nth-child(8) { transform: rotate(190deg) translate(134px) rotate(-190deg); }
.wheel_item:nth-child(9) { transform: rotate(230deg) translate(134px) rotate(-230deg); }

/* ---------------------------------------------------------------------------
   the Candela Reserve: bank and ATM modal (same visual family as the shops)
--------------------------------------------------------------------------- */
/* bank body content only: the modal shell owns positioning, head, and X */
.bank_modal .bank_balances {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font_mono);
  font-size: 14px;
}
.bank_modal .bank_cash { color: var(--green); }
.bank_modal .bank_bank { color: var(--teal); }
.bank_modal input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel_border);
  background: rgba(5, 12, 8, 0.9);
  color: var(--text);
  font-family: var(--font_mono);
  font-size: 15px;
  outline: none;
  margin-bottom: 10px;
  -webkit-user-select: text;
  user-select: text;
}
.bank_modal .bank_row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.bank_modal .bank_row button,
.bank_modal .bank_btn {
  flex: 1;
  font-family: var(--font_disp);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid rgba(54, 255, 110, 0.4);
  background: linear-gradient(180deg, rgba(54, 255, 110, 0.25), rgba(43, 217, 74, 0.15));
  color: var(--green);
  cursor: pointer;
}
.bank_modal .bank_row button:hover,
.bank_modal .bank_btn:hover {
  background: linear-gradient(180deg, var(--green), var(--green_dim));
  color: #04140a;
}
.bank_modal .bank_fee {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text_dim);
}

/* ---------------------------------------------------------------------------
   floating pay text (hud spawns, positions, and removes these)
--------------------------------------------------------------------------- */
.float_pay {
  position: fixed;
  z-index: 12;
  font-family: var(--font_disp);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--green);
  text-shadow: 0 0 12px rgba(54, 255, 110, 0.7), 0 2px 0 rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: float_pay_up 1.4s ease-out forwards;
}
.float_pay.float_pay_bad { color: var(--red); text-shadow: 0 0 12px rgba(255, 59, 59, 0.7); }
@keyframes float_pay_up {
  0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  12%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 0; transform: translateY(-48px) scale(1); }
}

/* ---------------------------------------------------------------------------
   crews: name tags and crew chat
--------------------------------------------------------------------------- */
.crew_tag {
  color: var(--teal);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(56, 214, 196, 0.5);
}
.hud_chat .chat_crew,
.chat_crew {
  color: var(--teal);
  border-left: 2px solid rgba(56, 214, 196, 0.6);
}
.hud_chat .chat_crew .hud_chat_name { color: var(--teal); }
.hud_chat .hud_chat_channel {
  font-family: var(--font_mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text_dim);
  margin-top: 4px;
}
.hud_chat .hud_chat_channel .chan_crew { color: var(--teal); }

/* ---------------------------------------------------------------------------
   hud extras: wrench warning + alpha packet stack
--------------------------------------------------------------------------- */
.hud_wrench {
  position: absolute;
  right: calc(20px + var(--safe_r));
  bottom: calc(78px + var(--safe_b));
  font-size: 20px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(242, 194, 48, 0.7);
  animation: wrench_blink 1s steps(2, start) infinite;
}
@keyframes wrench_blink { 50% { opacity: 0.25; } }

.hud_packets {
  position: absolute;
  left: calc(16px + var(--safe_l));
  bottom: calc(226px + var(--safe_b));
  display: flex;
  gap: 4px;
  align-items: center;
  font-family: var(--font_mono);
  font-size: 12px;
  color: var(--text_dim);
}
.hud_packets .packet {
  width: 16px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(160deg, #d8cdb2 0%, #b8ad92 100%);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------------
   mobile: phone button (mobile.js injects into #mobile)
--------------------------------------------------------------------------- */
.mob_btn_phone {
  left: calc(16px + var(--safe_l));
  top: calc(120px + var(--safe_t));
  width: 48px;
  height: 48px;
}

/* ---------------------------------------------------------------------------
   downed: the LIQUIDATING bar
--------------------------------------------------------------------------- */
.downed_wrap {
  position: absolute;
  left: 50%;
  bottom: calc(120px + var(--safe_b));
  transform: translateX(-50%);
  width: min(380px, 84vw);
  text-align: center;
  pointer-events: none;
}
.downed_title {
  font-family: var(--font_disp);
  font-size: 30px;
  letter-spacing: 6px;
  color: var(--red);
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 59, 59, 0.7), 0 2px 0 rgba(0, 0, 0, 0.8);
  animation: downed_pulse 1.2s ease-in-out infinite;
}
@keyframes downed_pulse { 50% { opacity: 0.55; } }
.downed_bar {
  margin-top: 8px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid rgba(255, 59, 59, 0.5);
  background: rgba(20, 5, 5, 0.85);
  overflow: hidden;
}
.downed_fill {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #7a1414, var(--red));
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.6);
  transition: width 0.12s linear;
}
.downed_hint {
  margin-top: 8px;
  font-family: var(--font_mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(232, 245, 236, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---------------------------------------------------------------------------
   wasted screen: LIQUIDATED (desaturates the world behind it)
--------------------------------------------------------------------------- */
.wasted_screen {
  position: absolute;
  inset: 0;
  z-index: 34;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(60, 0, 0, 0.25), rgba(0, 0, 0, 0.55) 100%);
  -webkit-backdrop-filter: grayscale(0.9) brightness(0.8) contrast(1.05);
  backdrop-filter: grayscale(0.9) brightness(0.8) contrast(1.05);
  pointer-events: auto;
}
.wasted_inner {
  text-align: center;
  transform: scale(0.92);
}
.wasted_screen.wasted_zoom .wasted_inner {
  animation: wasted_zoom_in 4.5s ease-out forwards;
}
@keyframes wasted_zoom_in {
  0%   { transform: scale(0.92); }
  100% { transform: scale(1.14); }
}
.wasted_title {
  font-family: var(--font_disp);
  font-size: 86px;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--red);
  text-shadow:
    0 0 34px rgba(255, 59, 59, 0.7),
    0 6px 0 rgba(0, 0, 0, 0.7);
}
.wasted_sub {
  margin-top: 10px;
  font-size: 15px;
  font-style: italic;
  color: rgba(232, 245, 236, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.wasted_fader {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0;
  transition: opacity 0.9s ease-in;
  pointer-events: none;
}
.wasted_fader.wasted_fade_in { opacity: 1; }

/* ---------------------------------------------------------------------------
   Cold Storage: frost jail overlay
--------------------------------------------------------------------------- */
.frost_overlay {
  position: absolute;
  inset: 0;
  z-index: 33;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 207, 232, 0.16), transparent 60%),
    radial-gradient(ellipse at 10% 100%, rgba(168, 207, 232, 0.14), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(168, 207, 232, 0.14), transparent 50%),
    rgba(10, 22, 34, 0.45);
  -webkit-backdrop-filter: saturate(0.55) brightness(0.85) blur(1.5px);
  backdrop-filter: saturate(0.55) brightness(0.85) blur(1.5px);
  box-shadow: inset 0 0 140px rgba(168, 207, 232, 0.35);
  pointer-events: auto;
}
.jail_panel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 46px;
  border-radius: 14px;
  background: rgba(8, 18, 26, 0.88);
  border: 1px solid rgba(168, 207, 232, 0.35);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(168, 207, 232, 0.08);
  max-width: 90vw;
}
.jail_title {
  font-family: var(--font_disp);
  font-size: 44px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--frost);
  text-shadow: 0 0 24px rgba(168, 207, 232, 0.6);
}
.jail_sub {
  font-size: 14px;
  color: rgba(200, 224, 240, 0.7);
}
.jail_count {
  font-family: var(--font_mono);
  font-size: 58px;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(168, 207, 232, 0.7);
}
.jail_fine {
  font-family: var(--font_disp);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--red);
}
.jail_tip {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: rgba(200, 224, 240, 0.6);
  max-width: 340px;
}

/* ---------------------------------------------------------------------------
   damage vignette (ui.js flashes opacity)
--------------------------------------------------------------------------- */
.dmg_vignette {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(200, 10, 10, 0.55) 100%);
  transition: opacity 0.1s ease-out;
}

/* ---------------------------------------------------------------------------
   settings: volume sliders in the pause panel
--------------------------------------------------------------------------- */
.ui_settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.ui_settings_title {
  font-family: var(--font_disp);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--text_dim);
  text-transform: uppercase;
}
.ui_slider_row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.ui_slider_label {
  font-family: var(--font_mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text_dim);
  width: 58px;
  text-align: left;
}
.ui_slider_val {
  font-family: var(--font_mono);
  font-size: 11px;
  color: var(--green);
  width: 30px;
  text-align: right;
}
.ui_slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(54, 255, 110, 0.18);
  border: 1px solid var(--panel_border);
  outline: none;
  cursor: pointer;
}
.ui_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(54, 255, 110, 0.6);
  cursor: pointer;
}
.ui_slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  box-shadow: 0 0 8px rgba(54, 255, 110, 0.6);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   responsive: HUD scales down on small screens
--------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .boot_logo { font-size: 46px; }
  .boot_city { font-size: 15px; letter-spacing: 6px; }

  .hud_minimap {
    width: 120px;
    height: 120px;
    border-radius: 10px;
  }
  .hud_money { top: calc(142px + var(--safe_t)); font-size: 22px; }
  .hud_wanted { top: calc(170px + var(--safe_t)); font-size: 17px; }
  .hud_feed { top: calc(206px + var(--safe_t)); width: 180px; font-size: 11px; }
  .hud_job {
    width: 180px;
    font-size: 12px;
    padding: 8px 10px;
    top: 30%;
  }
  .hud_job .hud_job_title { font-size: 14px; }
  .hud_health {
    width: 150px;
    height: 10px;
    bottom: calc(176px + var(--safe_b));
  }
  .hud_chat { width: 58vw; max-height: 110px; font-size: 11px; }
  .hud_speed { font-size: 30px; right: calc(110px + var(--safe_r)); bottom: calc(300px + var(--safe_b)); }
  .hud_weapon { font-size: 13px; bottom: calc(286px + var(--safe_b)); }
  .hud_hint { display: none; }
  .hud_online { font-size: 11px; padding: 4px 8px; }

  .ui_title { font-size: 36px; }
  .ui_panel { padding: 24px 26px; }
  .toast { font-size: 14px; padding: 7px 16px; }
  .ui_prompt { font-size: 14px; bottom: calc(240px + var(--safe_b)); }

  .shop_modal .shop_grid,
  .shop_modal .shop_items { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

  .phone_panel { width: min(300px, 88vw); }
  .wheel_root { width: 300px; height: 300px; }
  .wheel_item { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 10px; }
  .wheel_item:nth-child(1) { transform: rotate(-90deg) translate(110px) rotate(90deg); }
  .wheel_item:nth-child(2) { transform: rotate(-50deg) translate(110px) rotate(50deg); }
  .wheel_item:nth-child(3) { transform: rotate(-10deg) translate(110px) rotate(10deg); }
  .wheel_item:nth-child(4) { transform: rotate(30deg) translate(110px) rotate(-30deg); }
  .wheel_item:nth-child(5) { transform: rotate(70deg) translate(110px) rotate(-70deg); }
  .wheel_item:nth-child(6) { transform: rotate(110deg) translate(110px) rotate(-110deg); }
  .wheel_item:nth-child(7) { transform: rotate(150deg) translate(110px) rotate(-150deg); }
  .wheel_item:nth-child(8) { transform: rotate(190deg) translate(110px) rotate(-190deg); }
  .wheel_item:nth-child(9) { transform: rotate(230deg) translate(110px) rotate(-230deg); }
  .wasted_title { font-size: 52px; letter-spacing: 6px; }
  .jail_title { font-size: 30px; }
  .jail_count { font-size: 42px; }
  .jail_panel { padding: 22px 24px; }
  .downed_title { font-size: 22px; letter-spacing: 4px; }
  .downed_wrap { bottom: calc(210px + var(--safe_b)); }
  .hud_packets { bottom: calc(196px + var(--safe_b)); }
  .hud_wrench { bottom: calc(268px + var(--safe_b)); right: calc(110px + var(--safe_r)); }
}

/* ===========================================================================
   WAVE 3: fuel gauge, property (safehouses), casino floor, turf
   Class contract for other agents:
   - hud.js (G3) builds: .hud_fuel > .hud_fuel_label + .hud_fuel_bar > .hud_fuel_fill,
     state class .low on .hud_fuel under 15 percent.
   - property.js (P3) builds: .prop_modal (bank modal family) with .prop_title,
     .prop_close, .prop_tier, .prop_row, .prop_stat, .prop_btn (+ .bad),
     .prop_note, .prop_msg (+ .bad), inputs inherit .prop_modal input.
     Door prompts: either G.ui.prompt.show(text, "sale"|"enter") which styles
     .ui_prompt_sale / .ui_prompt_enter, or a standalone .prop_prompt element
     with variant class .sale or .enter.
   - casino.js (F3) builds: .casino_modal with .casino_title, .casino_close,
     .casino_tabs > .casino_tab (+ .on), .casino_table, .casino_chip (+ .sel),
     .casino_reel > .casino_reel_sym (+ .spin on the reel), .casino_card
     (+ .red, .back), .casino_btn (+ .bad), .casino_bet, .casino_balance,
     .casino_msg (+ .win, .lose), .casino_edge.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Gasfee fuel gauge (hud.js puts it inside .hud_speed, shows while driving)
--------------------------------------------------------------------------- */
.hud_fuel {
  margin-top: 6px;
  width: 128px;
  margin-left: auto;
}
.hud_fuel_label {
  font-family: var(--font_mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text_dim);
  text-align: right;
  margin-bottom: 2px;
  text-shadow: 0 1px 2px #000;
}
.hud_fuel_bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(54, 255, 110, 0.25);
  border-radius: 3px;
  overflow: hidden;
}
.hud_fuel_fill {
  height: 100%;
  width: 100%;
  background: var(--green);
  transition: width 0.3s ease;
}
.hud_fuel.low .hud_fuel_fill {
  background: var(--red);
  animation: hud_fuel_flash 0.6s infinite;
}
@keyframes hud_fuel_flash { 50% { opacity: 0.3; } }

/* ---------------------------------------------------------------------------
   safehouse property modal (property.js builds DOM, bank modal family)
--------------------------------------------------------------------------- */
/* property body content only: the modal shell owns positioning, head, and X */
.prop_modal .prop_tier {
  font-family: var(--font_mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.prop_modal .prop_stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: rgba(10, 22, 14, 0.7);
  border: 1px solid rgba(54, 255, 110, 0.14);
  font-family: var(--font_mono);
  font-size: 13px;
}
.prop_modal .prop_stat .cash { color: var(--green); }
.prop_modal .prop_stat .stash { color: var(--gold); }
.prop_modal .prop_stat .bank { color: var(--teal); }
.prop_modal input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel_border);
  background: rgba(5, 12, 8, 0.9);
  color: var(--text);
  font-family: var(--font_mono);
  font-size: 15px;
  outline: none;
  margin-bottom: 10px;
  -webkit-user-select: text;
  user-select: text;
}
.prop_modal .prop_row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.prop_modal .prop_row button,
.prop_btn {
  flex: 1;
  font-family: var(--font_disp);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid rgba(54, 255, 110, 0.4);
  background: linear-gradient(180deg, rgba(54, 255, 110, 0.25), rgba(43, 217, 74, 0.15));
  color: var(--green);
  cursor: pointer;
}
.prop_modal .prop_row button:hover,
.prop_btn:hover {
  background: linear-gradient(180deg, var(--green), var(--green_dim));
  color: #04140a;
}
.prop_btn.bad {
  border-color: rgba(255, 59, 59, 0.45);
  background: rgba(255, 59, 59, 0.14);
  color: #ff8d97;
}
.prop_btn.bad:hover { background: var(--red); color: #16060a; }
.prop_btn:disabled { opacity: 0.4; cursor: default; }
.prop_modal .prop_note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text_dim);
  line-height: 1.45;
}
.prop_modal .prop_msg { margin-top: 8px; font-size: 12px; min-height: 15px; color: #9dffc8; }
.prop_modal .prop_msg.bad { color: #ff8d97; }

/* FOR SALE and ENTER door prompts. Two routes, same look:
   1) G.ui.prompt.show(text, "sale") -> .ui_prompt gains .ui_prompt_sale
   2) a standalone .prop_prompt element with .sale or .enter */
.ui_prompt.ui_prompt_sale {
  color: var(--gold);
  border-color: rgba(242, 194, 48, 0.5);
  text-shadow: 0 0 12px rgba(242, 194, 48, 0.5);
}
.ui_prompt.ui_prompt_enter {
  color: var(--teal);
  border-color: rgba(56, 214, 196, 0.5);
  text-shadow: 0 0 12px rgba(56, 214, 196, 0.5);
}
.prop_prompt {
  position: fixed;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);
  z-index: 25;
  background: var(--panel);
  border: 1px solid var(--panel_border);
  border-radius: 10px;
  padding: 8px 22px;
  font-family: var(--font_disp);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.prop_prompt.sale {
  color: var(--gold);
  border-color: rgba(242, 194, 48, 0.5);
  text-shadow: 0 0 12px rgba(242, 194, 48, 0.5);
}
.prop_prompt.enter {
  color: var(--teal);
  border-color: rgba(56, 214, 196, 0.5);
  text-shadow: 0 0 12px rgba(56, 214, 196, 0.5);
}

/* ---------------------------------------------------------------------------
   Slippage Strip casino floor (casino.js builds DOM). Neon: magenta + teal
   over the dark panel family so the floor reads different from every other
   modal in the city.
--------------------------------------------------------------------------- */
/* casino body content only: casino.js mounts .cas_modal through the modal
   shell; the neon accent lives in the shell section at the end of the file */
.casino_tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.casino_tab {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid rgba(56, 214, 196, 0.3);
  background: rgba(8, 20, 18, 0.7);
  color: var(--teal);
  font-family: var(--font_disp);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.casino_tab.on {
  border-color: #ff3bd4;
  color: #ff3bd4;
  background: rgba(255, 59, 212, 0.12);
  text-shadow: 0 0 10px rgba(255, 59, 212, 0.6);
}
.casino_table {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(56, 214, 196, 0.08), transparent 70%),
    linear-gradient(180deg, #0a1f18, #071510);
  border: 1px solid rgba(56, 214, 196, 0.28);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  min-height: 120px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55);
}
.casino_chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 3px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.55);
  outline: 2px solid rgba(255, 59, 212, 0.45);
  outline-offset: -7px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%), #7d1460;
  color: #fff;
  font-family: var(--font_mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 2px #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.casino_chip:hover { transform: translateY(-2px); }
.casino_chip.sel {
  box-shadow: 0 0 14px rgba(255, 59, 212, 0.8);
  border-color: #fff;
}
.casino_reel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 78px;
  margin: 0 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 59, 212, 0.4);
  background: linear-gradient(180deg, #120710 0%, #1e0c19 50%, #120710 100%);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 59, 212, 0.15);
  overflow: hidden;
}
.casino_reel .casino_reel_sym,
.casino_reel_sym {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 59, 212, 0.5));
}
.casino_reel.spin .casino_reel_sym { animation: casino_reel_spin 0.18s linear infinite; }
@keyframes casino_reel_spin {
  0% { transform: translateY(-60%); opacity: 0.3; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(60%); opacity: 0.3; }
}
.casino_card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 62px;
  margin: 0 3px;
  border-radius: 6px;
  background: #f2ecdc;
  color: #12141a;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  font-family: var(--font_mono);
  font-size: 16px;
  font-weight: 700;
}
.casino_card.red { color: #c22437; }
.casino_card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 59, 212, 0.35) 0 4px, transparent 4px 8px),
    #241028;
  color: transparent;
}
.casino_btn {
  font-family: var(--font_disp);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 59, 212, 0.5);
  background: linear-gradient(180deg, rgba(255, 59, 212, 0.28), rgba(125, 20, 96, 0.2));
  color: #ff8de4;
  cursor: pointer;
}
.casino_btn:hover { background: #ff3bd4; color: #1c0316; }
.casino_btn:disabled { opacity: 0.4; cursor: default; }
.casino_btn.bad {
  border-color: rgba(255, 59, 59, 0.5);
  background: rgba(255, 59, 59, 0.14);
  color: #ff8d97;
}
.casino_bet,
.casino_balance {
  font-family: var(--font_mono);
  font-size: 14px;
  color: var(--teal);
  text-shadow: 0 0 8px rgba(56, 214, 196, 0.4);
}
.casino_msg { margin-top: 10px; font-size: 13px; min-height: 16px; color: var(--text_dim); }
.casino_msg.win { color: var(--green); text-shadow: 0 0 10px rgba(54, 255, 110, 0.5); }
.casino_msg.lose { color: #ff8d97; }
.casino_edge {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text_dim);
  font-family: var(--font_mono);
  line-height: 1.5;
}

/* wave 3 small screens */
@media (max-width: 700px) {
  .hud_fuel { width: 88px; }
  .casino_reel { width: 52px; height: 66px; }
  .casino_card { width: 38px; height: 54px; font-size: 14px; }
  .prop_prompt { bottom: calc(240px + var(--safe_b)); font-size: 14px; }
}

/* ===========================================================================
   QA PASS: the one true modal shell
   ui.js G.ui.modalShell(contentEl, opts) mounts EVERY game modal in here:
   a fixed inset 0 backdrop with flex centering, one panel, one head with the
   title and a 44px X, one scrolling body. Modules style only their body
   content. This section is last in the file on purpose: it wins every
   same specificity tie against older rules and injected fallbacks.
   =========================================================================== */
.modal_shell {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  max-height: none;
  transform: none;
  margin: 0;
  padding: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: rgba(3, 8, 5, 0.66);
  pointer-events: auto;
}

.modal_shell .modal_panel {
  position: relative;
  width: min(92vw, 560px);
  max-width: min(92vw, 560px);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel_border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  color: var(--text);
  pointer-events: auto;
}

.modal_shell .modal_head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 14px;
  background: rgba(40, 160, 80, 0.1);
  border-bottom: 1px solid var(--panel_border);
}

.modal_shell .modal_title {
  font-family: var(--font_disp);
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 14px rgba(54, 255, 110, 0.35);
  flex: 1;
  min-width: 0;
}

.modal_shell .modal_head .shop_cash,
.modal_shell .modal_head .cas_chips {
  font-family: var(--font_mono);
  font-weight: 700;
  white-space: nowrap;
  color: #7dff9e;
}
.modal_shell .modal_head .cas_chips { color: #ffd24a; }

.modal_x {
  position: static;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--panel_border);
  background: rgba(12, 24, 16, 0.9);
  color: var(--text);
  font-family: var(--font_disp);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.modal_x:hover { color: var(--red); border-color: rgba(255, 59, 59, 0.5); }

.modal_shell .modal_body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* the pause panel X sits in the top right corner of the panel */
.ui_panel { position: relative; }
.ui_pause_x {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* flavor accents so the families still read apart */
.modal_shell.cas_modal .modal_panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 59, 212, 0.1), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(56, 214, 196, 0.08), transparent 55%),
    var(--panel);
  border-color: rgba(255, 95, 162, 0.45);
}
.modal_shell.cas_modal .modal_title {
  color: #ff9ec6;
  text-shadow: 0 0 16px rgba(255, 59, 212, 0.55);
}
.modal_shell.cas_modal .modal_x:hover { color: #ff3bd4; border-color: rgba(255, 59, 212, 0.7); }
.modal_shell.race_modal .modal_panel { border-color: rgba(255, 90, 60, 0.45); }
.modal_shell.race_modal .modal_title {
  color: #ff6a4a;
  text-shadow: 0 0 14px rgba(255, 90, 60, 0.4);
}

@media (max-width: 700px) {
  .modal_shell { padding: 8px; }
  .modal_shell .modal_panel { max-height: 88vh; }
  .modal_shell .modal_title { font-size: 17px; letter-spacing: 1px; }
}