/* ============================================================
   WEEP WORLD — modern HUD + menus
   ============================================================
   The world went smooth and lit (modelled city, AI characters, real
   lighting); the chrome around it was still pixel type, hard 5px offset
   shadows and square boxes, so the game looked like a 3D city under a
   1990s overlay. This sheet loads last and re-dresses every HUD element,
   panel and menu in the open-world-game register: dark glass with a soft
   blur, rounded corners, soft shadows, a bold condensed display face for
   titles and a clean sans with tabular numbers for everything you read at
   a glance (cash, clock, ammo).

   Only look and type live here; layout (where the phone HUD puts things)
   stays in style.css / skin.css. Ids and classes are untouched. */

:root {
  /* type: titles stay Anton (box-art), labels Barlow Condensed, and the old
     pixel/terminal faces are replaced by Inter wherever a rule asks for them */
  --pixel-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body-font: 'Barlow Semi Condensed', 'Barlow Condensed', system-ui, sans-serif;
  --ww-ui: 'Barlow Condensed', 'Inter', 'Arial Narrow', sans-serif;
  --ww-display: 'Anton', 'Barlow Condensed', Impact, sans-serif;
  --m-num: 'Inter', system-ui, sans-serif;

  /* surfaces */
  --m-glass: rgba(13, 15, 22, 0.58);
  --m-glass-strong: rgba(15, 17, 25, 0.86);
  --m-edge: rgba(255, 255, 255, 0.09);
  --m-edge-hi: rgba(255, 255, 255, 0.2);
  --m-r: 14px;
  --m-r-sm: 9px;
  --m-blur: blur(16px) saturate(1.35);
  --m-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --m-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --m-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);

  /* the brand colours stay; their hard drop shadow goes */
  --ww-shadow: var(--m-shadow);
  --ww-glass: var(--m-glass);
  --ww-glass-hi: var(--m-glass-strong);
  --ww-line: var(--m-edge);
  --ww-line-hi: rgba(255, 200, 60, 0.45);
}

/* numbers: tabular so a ticking cash total or clock doesn't jitter */
.cash-value, .empire-value, .clock-value, .weather-value, .gps-value, .wage-value,
.ammo-value, .wammo, .shop-price, .mt-payout, .mt-timer, .sentence-value, .study-value,
.wd-count, .hide-count, .wz-ticket b, .pause-stats, .ww-cash-pop {
  font-family: var(--m-num) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

/* ============ Panels, overlays, titles ============ */
.overlay:not(.title-screen) {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 47, 106, 0.07), transparent 60%),
    rgba(6, 7, 12, 0.55);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}
.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 120px),
    var(--m-glass-strong);
  border: 1px solid var(--m-edge);
  border-left: 1px solid var(--m-edge);
  border-radius: 20px;
  box-shadow: var(--m-shadow-lg);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  animation: m-panel-in 220ms cubic-bezier(.2, .9, .25, 1.05);
}
@keyframes m-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); letter-spacing: 1px; }
#pauseMenu .title { text-shadow: 0 4px 24px rgba(255, 47, 106, 0.35); }
.subtitle { font-family: var(--body-font); font-size: 15px; letter-spacing: 0; }

/* ============ Buttons ============ */
.btn {
  border-radius: 12px;
  border: 1px solid var(--m-edge-hi);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 120ms ease, background 120ms, border-color 120ms, box-shadow 160ms, filter 120ms;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 22px rgba(0, 0, 0, 0.3);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.btn:focus-visible { outline: 2px solid var(--ww-gold); outline-offset: 3px; }
.btn-primary {
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe066 0%, #ffbe2e 55%, #ff9a26 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -2px 0 rgba(0, 0, 0, 0.12) inset, 0 10px 28px rgba(255, 150, 31, 0.32);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffe680 0%, #ffc640 55%, #ffa233 100%);
  filter: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 0 rgba(0, 0, 0, 0.12) inset, 0 14px 34px rgba(255, 160, 40, 0.45);
}
.btn-link { font-family: var(--body-font); letter-spacing: 0; }

/* ============ HUD: the status bar ============ */
.hud-stats {
  border: 1px solid var(--m-edge);
  border-left: 1px solid var(--m-edge);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
  background: var(--m-glass);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  overflow: hidden;
}
.stat-block { border-right: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 15px 9px; }
.stat-label { font-size: 11px; letter-spacing: 2px; color: rgba(239, 232, 218, 0.55); margin-bottom: 4px; }
.cash-value { font-size: 19px; font-weight: 800; text-shadow: 0 0 18px rgba(125, 255, 154, 0.22), var(--m-text-shadow); }
.empire-value { font-size: 14px; font-weight: 700; }
.clock-value, .weather-value, .gps-value { font-size: 14px; font-weight: 700; text-shadow: var(--m-text-shadow); }
.gps-value { color: var(--ww-gold); }
.weather-value { font-family: var(--ww-ui) !important; font-size: 16px; letter-spacing: 1px !important; }
.hp-bar {
  height: 9px;
  border-radius: 99px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.hp-bar::after { background: repeating-linear-gradient(90deg, transparent 0 24.6%, rgba(0, 0, 0, 0.35) 24.6% 25%); }
.hp-fill { border-radius: 99px; background: linear-gradient(90deg, #ff3b5c, #ff6b7c); box-shadow: 0 0 12px rgba(255, 59, 92, 0.5); }
.wanted-stars { font-size: 16px; letter-spacing: 2px; font-family: system-ui, sans-serif; }
.wanted-stars .on { text-shadow: 0 0 10px rgba(255, 200, 60, 0.65), var(--m-text-shadow); }
.wanted-stars.hard .on { text-shadow: 0 0 12px rgba(255, 47, 85, 0.85), var(--m-text-shadow); }

.btn-icon {
  border-radius: 12px;
  border: 1px solid var(--m-edge);
  background: var(--m-glass);
  box-shadow: var(--m-shadow);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  color: var(--ww-cream);
  font-size: 0;            /* the emoji / ≡ glyphs give way to drawn icons */
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.btn-icon:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.1); border-color: var(--m-edge-hi); }
#btnPhone::before, #btnPause::before {
  content: '';
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--m-icon) center / contain no-repeat;
  mask: var(--m-icon) center / contain no-repeat;
}
#btnPhone { --m-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }
#btnPause { --m-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.btn-online { font-size: 14px; font-family: var(--m-num); font-weight: 700; width: auto; padding: 0 12px; gap: 7px; color: var(--ww-cream); }

/* ============ HUD: weapon + ammo ============ */
.weapon-bar {
  border: 1px solid var(--m-edge);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
  background: var(--m-glass);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  padding: 6px;
  gap: 6px;
}
.weapon-slot {
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  letter-spacing: 1px;
}
.weapon-slot.active {
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.22), rgba(255, 200, 60, 0.07));
  border-color: rgba(255, 200, 60, 0.4);
  box-shadow: 0 0 18px rgba(255, 200, 60, 0.15);
}
.weapon-slot .wkey { font-family: var(--m-num); font-size: 10px; font-weight: 700; }
.wammo { font-size: 11px; font-weight: 700; }
.ammo-value {
  font-size: 22px;
  font-weight: 800;
  border: 1px solid var(--m-edge);
  border-right: 1px solid var(--m-edge);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
  background: var(--m-glass);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  text-shadow: var(--m-text-shadow);
  padding: 10px 18px;
}

/* ============ Minimap ============ */
.minimap {
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4);
  image-rendering: auto;
}
.minimap-key {
  border-radius: var(--m-r-sm);
  border: 1px solid var(--m-edge);
  background: var(--m-glass-strong);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  box-shadow: var(--m-shadow);
  font-family: var(--body-font);
  font-size: 12px;
}
.mk-sw { border-radius: 3px; }

/* ============ Prompts, goal card, feed, chat, hints ============ */
.interact-prompt {
  border-radius: 999px;
  border: 1px solid var(--m-edge-hi);
  background: var(--m-glass-strong);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  box-shadow: var(--m-shadow-lg);
  text-shadow: none;
  letter-spacing: 1px;
}
.interact-prompt .ik, .hud-hints kbd, .tour-body kbd, .phone-foot .ik, .starter-hint kbd, kbd {
  border-radius: 6px;
  font-family: var(--m-num);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.starter-card {
  border: 1px solid var(--m-edge);
  border-left: 1px solid var(--m-edge);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 47, 106, 0.16), transparent 55%),
    var(--m-glass-strong);
  box-shadow: var(--m-shadow-lg);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
}
.starter-hint { font-family: var(--body-font); font-weight: 500; letter-spacing: 0; }
.starter-step { font-family: var(--m-num); font-variant-numeric: tabular-nums; }
.starter-bar { border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.starter-fill { border-radius: 99px; }
.mission-tracker {
  border: 1px solid var(--m-edge);
  border-left: 1px solid var(--m-edge);
  border-radius: 16px;
  background: var(--m-glass-strong);
  box-shadow: var(--m-shadow-lg);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
}
.mt-progress, .mt-progress-fill, .prog-bar, .prog-fill, .hide-bar, .hide-fill { border-radius: 99px; }
.mt-abandon { border-radius: 8px; }
.feed-msg {
  border-radius: 10px;
  border: 1px solid var(--m-edge);
  border-left: 3px solid var(--ww-gold);
  background: var(--m-glass-strong);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  box-shadow: var(--m-shadow);
  font-family: var(--ww-ui);
  text-shadow: none;
}
.hud-hints {
  font-family: var(--ww-ui);
  letter-spacing: 1.5px;
  border-radius: 999px;
  background: rgba(10, 11, 16, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 14px;
}
.chat-log, .chat-line, .chat-msg { font-family: var(--body-font); letter-spacing: 0; }
.chat-line, .chat-msg {
  border-radius: 10px;
  background: rgba(12, 13, 19, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: none;
}
.chat-form input, .gate-input, .phone-search, input[type=text], input[type=email], input[type=password] {
  border-radius: 10px;
  font-family: var(--body-font);
  letter-spacing: 0;
}

/* ============ Camera bar ============ */
.world-camera {
  border-radius: 999px;
  border: 1px solid var(--m-edge);
  background: var(--m-glass);
  box-shadow: var(--m-shadow);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  padding: 4px;
  overflow: hidden;
}
.world-camera button { border-radius: 999px; transition: background 140ms, color 140ms; }
.world-camera button[aria-pressed=true] {
  background: linear-gradient(180deg, #ffe066, #ffb52e);
  color: #1a0d05;
  box-shadow: 0 4px 14px rgba(255, 170, 40, 0.35);
}

/* ============ Location card ============ */
.ww-location-name { text-shadow: 0 4px 28px rgba(0, 0, 0, 0.6); }

/* ============ Phone ============ */
.phone-frame {
  border-radius: 26px;
  border: 1px solid var(--m-edge-hi);
  background: linear-gradient(180deg, rgba(24, 26, 36, 0.92), rgba(12, 13, 19, 0.94));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  overflow: hidden;
}
.phone-bar { background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.phone-title { text-shadow: none; }
.phone-x { border-radius: 999px; }
.phone-tab, .broker-tab, .slot-bet, .ru-choice { border-radius: 999px; }
.phone-tab.active, .broker-tab.active, .slot-bet.active { box-shadow: 0 4px 14px rgba(255, 170, 40, 0.28); }
#phoneMap, .phone-map { border-radius: 14px; image-rendering: auto; }
.phone-list-item { border-radius: 10px; }

/* ============ Shop / property / dialogs ============ */
.shop-row { border-radius: 12px; border-left-width: 3px; }
.shop-price { font-size: 15px; font-weight: 800; }
.prop-address, .market-sub, .broker-offer-meta, .tour-body, .pause-stats, .menu-copy, .gate-copy, .email-nudge-copy {
  font-family: var(--body-font);
  letter-spacing: 0;
}
.email-nudge {
  border-radius: 16px;
  border: 1px solid var(--m-edge);
  background: var(--m-glass-strong);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  box-shadow: var(--m-shadow-lg);
}

/* ============ Character select ============ */
.char-card {
  border-radius: 16px;
  border: 1px solid var(--m-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  transition: transform 140ms ease, border-color 140ms, box-shadow 160ms, background 140ms;
}
.char-card:hover { transform: translateY(-2px); border-color: var(--m-edge-hi); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.char-card.picked {
  border-color: rgba(255, 200, 60, 0.7);
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.16), rgba(255, 47, 106, 0.06));
  box-shadow: 0 0 0 1px rgba(255, 200, 60, 0.4), 0 14px 36px rgba(255, 150, 40, 0.18);
}

/* ============ No more pixel rendering ============ */
/* style.css set image-rendering: pixelated on <body> (and on the maps,
   portraits and slot reels), so every scaled image and canvas stair-stepped.
   The art is smooth now; let the browser filter it. */
body, .minimap, .phone-map, #phoneMap, .char-card img, .slot-reel-img, .flight-plane,
.stage-sprite, .hero-shots-row img, .pitch-row img { image-rendering: auto; }
.stage-sprite { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); }
body { font-size: 17px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* landing: the HUD-preview numbers and the ballot counters were pixel type */
.ww-hud-cell b, .ww-num, .ww-ballot em {
  font-family: var(--m-num) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.ww-hud-cell b { font-size: 15px; }
.ww-num { font-size: 15px; }
.ww-ballot em { font-size: 12px; font-weight: 700; }
.mp-server-input, .mp-debug { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.lk-swatch, .mk-sw { border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.lk-swatch.lk-dot, .mk-sw.mk-dot { border-radius: 50%; }

/* ============ Landing + character select ============ */
/* glass cards with rounded corners; the hard pink left rule goes */
.ww-hud, .ww-card, .gate-card, body.cs-picking #csStepChar, .char-stage, .ww .char-stage {
  border-radius: 20px;
  border: 1px solid var(--m-edge);
  border-left: 1px solid var(--m-edge);
  box-shadow: var(--m-shadow-lg);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
}
.ww-hud { border-radius: var(--m-r); }
.gate-card, .ww-hero .gate-card-hero, .ww-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 140px), rgba(10, 11, 17, 0.62); }
body.cs-picking #csStepChar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 160px), rgba(10, 11, 17, 0.62); padding: 22px 24px 24px; }
.ww .char-stage { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), var(--m-shadow-lg); overflow: hidden; }
.ww .char-card { border-radius: 16px; }
.ww .char-card.picked { box-shadow: 0 0 0 2px var(--c), 0 0 30px color-mix(in srgb, var(--c) 35%, transparent), 0 10px 26px rgba(0, 0, 0, 0.35); }
.ww-hero .hero-kicker { border-left: 0; padding-left: 0; letter-spacing: 3px; }
.gate-card-label, .gate-copy, .hero-reassure { letter-spacing: 0.3px; }
.hero-reassure, .gate-card .btn-link { font-family: var(--body-font); }

/* ============ Phone layout pieces ============ */
/* the drawn icons replace the glyphs at every size (a phone rule set a
   font size back on them, so both showed) */
#btnPhone, #btnPause, body.mobile #btnPhone, body.mobile #btnPause { font-size: 0 !important; color: var(--ww-cream); }
body.mobile #btnPhone::before, body.mobile #btnPause::before { width: 17px; height: 17px; }
body.mobile .btn-icon { border-radius: 11px; }
body.mobile .hud-stats { border-left-width: 1px; border-radius: 12px; }
body.mobile .stat-block { padding: 3px 8px; }

/* touch controls: rounded keys with a soft gradient, a pressed glow */
.tc-btn {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(48, 50, 64, 0.92), rgba(24, 25, 34, 0.92));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
  letter-spacing: 1.5px;
  transition: transform 90ms, background 90ms, box-shadow 120ms;
}
.tc-btn.held {
  transform: scale(0.96);
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.32), rgba(255, 150, 40, 0.18));
  border-color: rgba(255, 200, 60, 0.55);
  box-shadow: 0 0 18px rgba(255, 190, 50, 0.35);
}
.tc-stick { border-radius: 50%; border-width: 1px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.25)); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45); }
.stick-knob { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.25) inset; }
.chat-open-btn {
  border-radius: 999px;
  border: 1px solid var(--m-edge-hi);
  background: var(--m-glass-strong);
  backdrop-filter: var(--m-blur);
  -webkit-backdrop-filter: var(--m-blur);
  box-shadow: var(--m-shadow);
  padding-left: 14px; padding-right: 14px;
}

/* ============ Pause menu ============ */
#pauseMenu .panel { border-radius: 24px; padding-left: 28px; padding-right: 28px; }
#pauseMenu .menu-buttons .btn { font-size: 16px; padding: 13px 20px; }
#pauseMenu .menu-buttons .btn-primary { font-size: 22px; }
.pause-stats .pl { font-family: var(--body-font) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; }

/* ============ Phone tab contents ============ */
.career-box, .mkt-row, .ride-row, .bag-row, .ride-section, .shop-row, .broker-offer, .fish-log .fl-fish {
  border-radius: 12px;
}
.career-box { border: 1px solid var(--m-edge); background: rgba(255, 255, 255, 0.035); }
.career-job-list { border-radius: 12px; overflow: hidden; border: 1px solid var(--m-edge); }
.career-job-item { border-bottom-color: rgba(255, 255, 255, 0.05); }
.career-job-item.active { background: rgba(125, 255, 154, 0.08); }
.career-job-btn, .ride-row .btn, .mkt-row .btn { border-radius: 9px; }
.career-bar, .career-bar-fill { border-radius: 99px; }
.mkt-row, .ride-row, .bag-row { border: 1px solid var(--m-edge); background: rgba(255, 255, 255, 0.035); transition: background 120ms, border-color 120ms; }
.mkt-row:hover, .ride-row:hover { border-color: var(--m-edge-hi); background: rgba(255, 255, 255, 0.06); }
.mkt-row.sel { border-color: rgba(92, 242, 196, 0.6); background: rgba(92, 242, 196, 0.08); }
/* a phone is one column: stack education/job above the job list so the
   rows have room for their pay and button */
body.mobile .career-wrap { flex-direction: column; overflow-y: auto; }
body.mobile .career-job-item { flex-wrap: wrap; }
body.mobile .career-job-info { flex: 1 1 100%; }