/* ═══════════════════════════════════════════════════════════
   RUST CONVOY — salvage dispatch
   Dark pit + cream trading-card faces + condensed industrial type.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#121416;
  --bar:#22292d;
  --sheet:#1d2426;
  --card-cream:#eae0cd;
  --card-strip:#d8cbb4;
  --card-dark:#0b181d;
  --ink:#1f242d;
  --dim:#7e7359;
  --gold:#c8a35e;
  --accent-from:#ffa900;
  --accent-to:#dd9119;
  --red:#cb3333;
  --green:#6fbd15;
  --blue:#4a9fd8;
  --purple:#9b6fd4;
  --line:#0003;
  --r-lg:12px; --r-md:8px; --r-pill:80px; --r-xl:16px;
  /* Depth. On a dark UI a 1px border alone reads as a wireframe — raised
     surfaces need a lit top edge (light landing on the near face) plus a real
     shadow underneath. Same reason the bars are translucent: content has to
     pass behind them for the screen to have layers. */
  --lit:inset 0 1px 0 #ffffff10;
  --sh-1:0 2px 8px #00000059;
  --sh-2:0 8px 24px #00000059;
  /* The bevel. Every raised control in Road Rise carries a 1px lit top edge
     and a 1px shaded bottom edge — that pair, not a blur, is what makes a flat
     gradient read as a physical object. Lifted verbatim from their bundle. */
  --bevel:inset 0 1px #fff9,inset 0 -1px #0000004d;
  --bevel-soft:inset 0 1px #fff3,inset 0 -1px #0000004d;
  --gold-glow:0 4px 12px #ffa90040;
  /* Their dark surfaces are never flat either — a 135deg wash from warm brown
     to slate is what stops a panel from looking like a grey rectangle. */
  --surf:linear-gradient(135deg,#322c1d 0%,#2a2e34 60%);
  --tabbar:72px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --cond:"Roboto Condensed",sans-serif;
  --mono:"Roboto Mono",monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:#fff;
  font-family:Roboto,system-ui,-apple-system,sans-serif;
  overscroll-behavior:none;user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:700}

.app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  background:
    radial-gradient(120% 60% at 50% 0%,#1b2226 0%,transparent 60%),
    repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 34px),
    var(--bg);
}

/* ── top bar ───────────────────────────────────────────────── */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 10px) 12px 10px;
  background:linear-gradient(#22292de8,#1a2024d6);
  border-bottom:1px solid #ffffff12;
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 1px 0 #ffffff08,0 8px 24px #00000038;
}
.brand{display:flex;align-items:center;gap:7px;margin-right:auto;min-width:0}
.brandLogo{
  width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:block;
  box-shadow:0 2px 10px #000000a6,0 0 0 1px #ffffff14;
}
.brandText{font-family:var(--cond);font-weight:900;font-size:15px;letter-spacing:.06em;line-height:1}
.brandText em{font-style:normal;color:var(--accent-from);margin-left:2px}

.purse{display:flex;align-items:center;gap:6px}
.coin{
  display:flex;align-items:center;gap:5px;
  padding:5px 9px 5px 6px;border-radius:var(--r-pill);
  background:#1d2223;border:1px solid #89796359;box-shadow:var(--bevel-soft);
}
.coin:active{transform:translateY(1px)}
.coin b{font-family:var(--mono);font-weight:700;font-size:12px;color:#d8c9b4;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:17px;height:18.5px;flex:0 0 auto;display:block}
.gear{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#ffffff0a}
.gear svg{width:17px;height:17px;fill:#b9ae96}

/* ── views ─────────────────────────────────────────────────── */
.views{flex:1 1 auto;overflow:hidden;position:relative}
.view{
  position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:none;padding-bottom:calc(var(--tabbar) + var(--safe-b) + 18px);
}
.view.on{display:block;animation:viewIn .28s cubic-bezier(.22,.61,.36,1) backwards}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}
.pad{padding:14px 12px 0}

.ttl{font-family:var(--cond);font-weight:900;font-size:26px;margin:2px 0 4px;letter-spacing:.01em}
.sub{margin:0 0 14px;font-size:12.5px;color:#8b8371;font-weight:500;line-height:1.45}

.sectHead{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:25px 2px 10px;
  font-family:var(--cond);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#9a917c;
}
.sectHead em{font-style:normal;font-size:10.5px;letter-spacing:.08em;color:#655e4e}
.sectHead em.live{color:var(--green)}
.sectHead em.live::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin-right:5px;vertical-align:1px;
  animation:blink 1.6s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.stack{display:flex;flex-direction:column;gap:11px}

/* ── identity ──────────────────────────────────────────────── */
.idRow{
  display:flex;align-items:center;gap:11px;padding:12px;
  border-radius:var(--r-lg);background:#1a2024;border:1px solid #ffffff0d;
}
.ava{
  width:42px;height:42px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--cond);font-weight:900;font-size:17px;color:#241a06;
  background:linear-gradient(160deg,#e9c88a,#b8873a);
}
.idText{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.idText b{font-family:var(--cond);font-size:16px;font-weight:700;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idText span{font-size:11px;color:#8b8371}
.lvlChip{
  font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:#d8c9b4;background:#1d2223;border:1px solid #89796359;
  padding:5px 9px;border-radius:var(--r-pill);
}
.lvlChip b{font-family:var(--mono);font-size:12px;color:#ffc86b;margin-left:2px}

/* ── primary call to action ────────────────────────────────── */
/* The hero. It used to be a full-bleed amber slab with hazard stripes, which
   read as a system alert and said nothing about the game. Now it is the same
   cream card the rest of the app uses, with the rig driving out of frame. */
.cta{
  position:relative;margin-top:12px;border-radius:var(--r-xl);overflow:hidden;
  min-height:134px;background:var(--card-cream);box-shadow:var(--sh-2);
}
.cta:active{transform:translateY(1px)}
.ctaIn{
  position:relative;z-index:2;padding:15px 16px 0;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
}
.ctaIn b{font-family:var(--cond);font-weight:900;font-size:20px;letter-spacing:.01em;color:#241a06}
.ctaIn span{font-size:11.5px;color:#6d6046;font-weight:500}
.ctaPill{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  padding:8px 13px 8px 15px;border-radius:9px;color:#241a06;
  background:linear-gradient(#ffaa00 0%,#da8a00 100%);
  box-shadow:var(--bevel),var(--gold-glow);
  font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.09em;
}
.ctaPill svg{width:15px;height:15px;display:block;margin-top:1px}
.ctaTruck{position:absolute;z-index:1;right:-10px;bottom:6px;width:162px;pointer-events:none;
  filter:drop-shadow(0 12px 24px #00000073)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mini{
  text-align:left;padding:13px 12px;border-radius:var(--r-lg);
  background:var(--surf);border:1px solid #ffffff12;
  box-shadow:var(--bevel-soft),var(--sh-1);
  display:flex;flex-direction:column;gap:3px;
}
.mini:active{transform:translateY(1px)}
.mini b{font-family:var(--cond);font-size:14px;font-weight:700}
.miniIc{width:18px;height:18px;display:block;margin-bottom:6px;color:#c8a35e}
.mini span{font-size:10.5px;color:#8b8371;line-height:1.35}

/* ── cards ─────────────────────────────────────────────────── */
.card{border-radius:var(--r-xl);overflow:hidden}
/* dark cards are wells — content sits *in* them, so they take an inner edge
   rather than a drop shadow */
.card.dark{background:var(--surf);border:1px solid #ffffff12;
  box-shadow:var(--bevel-soft)}
.card.cream{background:var(--card-cream);color:var(--ink);box-shadow:var(--sh-1)}

/* ── live feed ─────────────────────────────────────────────── */
.feed{padding:4px 0}
.feedRow{
  display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-bottom:1px solid #ffffff08;font-size:12px;
}
.feedRow:last-child{border-bottom:0}
.feedDot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:#3d4a52}
.feedWho{font-weight:700;color:#e7dfd0;flex:0 0 auto;max-width:96px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.feedWhat{color:#8b8371;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feedAmt{font-family:var(--mono);font-size:11px;color:#ffc86b;font-weight:700;flex:0 0 auto}
.feedRow.fresh{animation:fadeIn .45s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── leaderboard ───────────────────────────────────────────── */
.bRow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #ffffff08}
.bRow:last-child{border-bottom:0}
.bRow.me{background:#ffa9000f}
/* your pinned rank when you're below the visible board */
.bRow.pinned{border-top:1px solid #ffffff1a}
.bRank{
  width:20px;height:20px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:#8b8371;background:#ffffff0a;
}
.bRow:nth-child(1) .bRank{background:linear-gradient(150deg,#ffc86b,#a97b23);color:#241a06}
.bRow:nth-child(2) .bRank{background:#c9c9c9;color:#241a06}
.bRow:nth-child(3) .bRank{background:#b08050;color:#241a06}
.bName{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bVal{font-family:var(--mono);font-size:11.5px;color:#d8c9b4;font-weight:700}

/* ── rig card (the cream trading card) ─────────────────────── */
.rig{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--card-cream);color:var(--ink);
  box-shadow:0 6px 18px #00000059;
}
.rigTop{
  display:flex;gap:11px;padding:12px 12px 10px;
  border-bottom:1px solid #00000014;
}
.rigArt{
  width:76px;height:56px;flex:0 0 auto;border-radius:var(--r-md);
  background:var(--card-strip);display:grid;place-items:center;overflow:hidden;
}
.rigArt svg{width:72px;height:44px}
.rigMeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.rigName{font-family:var(--cond);font-weight:900;font-size:17px;line-height:1;letter-spacing:.01em}
.rigTier{font-family:var(--cond);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rigFoot{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:10.5px;color:#6d6350;
}
.rigFoot b{font-size:12px;color:var(--ink)}
.rigFoot b i{font-style:normal;font-size:9.5px;opacity:.5;letter-spacing:.04em}

/* the signature corner ribbon */
.ribbon{
  position:absolute;top:0;right:0;z-index:3;pointer-events:none;
  border-radius:0 var(--r-md) 0 var(--r-md);
  padding:3px 8px;font-family:var(--cond);font-size:10px;font-weight:700;
  letter-spacing:.2px;line-height:1;color:#fff;white-space:nowrap;
  text-shadow:0 1px 1px #0006;
}
.ribbon.easy{background:linear-gradient(#8fd44a,#42641b)}
.ribbon.medium{background:linear-gradient(#6fb6e8,#065285)}
.ribbon.hard{background:linear-gradient(#b054ff,#7043a0)}
.ribbon.gold{background:linear-gradient(#c8a15e,#7e7159)}

/* mileage bar */
.mile{margin-top:5px;height:6px;border-radius:3px;background:#0000002e;
  box-shadow:inset 0 1px 2px #00000026;overflow:hidden}
.mile i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c8a15e,#8a6d2f)}
.mile.full i{background:linear-gradient(90deg,#8fd44a,#4d7a19)}

/* ── timer pill (cream translucent) ────────────────────────── */
.pill{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:100%;height:30px;padding:0 12px;border-radius:6px;
  background:#faf2e7d9;color:var(--ink);
}
.pill svg{width:15px;height:15px;fill:var(--dim);flex:0 0 auto}
.pillText{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.pillText i{font-style:normal;font-family:var(--cond);font-size:11px;font-weight:500;
  color:var(--dim);line-height:1}
.pillText b{font-family:var(--mono);font-weight:700;font-size:11.5px;line-height:1;
  font-variant-numeric:tabular-nums lining-nums}

/* ── action rows on cards ──────────────────────────────────── */
.acts{display:flex;gap:6px;padding:10px 12px;background:#0000000d}
.btn{
  flex:1 1 auto;padding:9px 10px;border-radius:var(--r-md);
  font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#00000014;color:var(--ink);box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #0000001f;
}
.btn:active{transform:translateY(1px)}
.btn.gold{background:linear-gradient(#ffaa00 0%,#da8a00 100%);color:#241a06;
  box-shadow:var(--bevel)}
.btn.dark{background:#1d2426;color:#e7dfd0;box-shadow:var(--bevel-soft)}
.btn.ghost{background:#0000;border:1px solid #00000026}
/* "you can't press this" should still be readable — fading the whole button
   to 42% turned the gold ones into mud with invisible labels. */
.btn[disabled]{
  pointer-events:none;opacity:1;
  background:none;background-color:#ffffff0e;color:#7d7462;
  box-shadow:inset 0 0 0 1px #ffffff17;
}
/* …but the rig cards are cream, where a white-alpha ghost vanishes. */
.rig .acts .btn[disabled]{
  background-color:#0000000f;color:#6b6250;
  box-shadow:inset 0 0 0 1.5px #00000026;
}
/* owned-state chip — quieter than a dead button, and it never reads as broken.
   Dark ink so it holds up on the cream card face. */
.ownedChip{
  flex:1 1 100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border-radius:var(--r-md);
  background:#1f242d;color:#cfe89a;
  font-family:var(--cond);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
}
.ownedChip i{
  width:13px;height:7px;flex:0 0 auto;margin-top:-3px;
  border:solid currentColor;border-width:0 0 2.2px 2.2px;
  transform:rotate(-45deg);border-radius:1px;
}
.btn.wide{flex:1 1 100%}
.btn em{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.75}

/* ── route card ────────────────────────────────────────────── */
.route{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--card-dark);border:1px solid #ffffff0f;padding:13px 13px 11px}
.routeTop{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px}
.routeName{font-family:var(--cond);font-weight:900;font-size:17px;line-height:1.1}
.routeFlavor{font-size:11px;color:#8b8371;margin-top:2px;line-height:1.35}
.routeStats{display:flex;gap:14px;margin-bottom:11px}
.rs{display:flex;flex-direction:column;gap:2px}
.rs i{font-style:normal;font-family:var(--cond);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#655e4e}
.rs b{font-family:var(--mono);font-size:12.5px;font-weight:700}
.rs b.g{color:#8fd44a}
.rs b.f{color:#a8e07a}

/* ── segments ──────────────────────────────────────────────── */
.segs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.seg{
  flex:0 0 auto;padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.06em;
  background:#1d2223;border:1px solid #89796340;color:#a99e86;
}
.seg.on{background:linear-gradient(150deg,var(--accent-from),var(--accent-to));
  color:#241a06;border-color:#0000}

/* ── shop / garage slot ────────────────────────────────────── */
/* Dashed means "nothing here yet"; solid means "you can press this". Buy slot
   and the empty slots used to share the outlined treatment, so the one thing on
   the screen you could actually tap looked like the two bits of dead air. */
.slotBuy{
  width:100%;margin-top:12px;padding:14px 12px;border-radius:var(--r-lg);
  background:var(--surf);box-shadow:inset 0 0 0 1.5px #ffa90030,var(--bevel-soft);
  display:flex;align-items:center;gap:11px;text-align:left;
}
.slotBuy:active{background:#212831}
.slotIc{width:32px;height:32px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(150deg,#ffc043,#e08c09);color:#3d2803;
  font-size:19px;font-weight:700;line-height:1}
.slotTxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.slotBuy b{font-family:var(--cond);font-size:14px;font-weight:700}
.slotBuy span{font-size:10.5px;color:#8b8371}
.slotBuy em{flex:0 0 auto;font-style:normal;font-family:var(--mono);font-size:12px;
  font-weight:700;color:#ffc86b;text-align:right;
  font-variant-numeric:tabular-nums lining-nums}

/* ── tasks ─────────────────────────────────────────────────── */
.tRow{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid #ffffff08}
.tRow:last-child{border-bottom:0}
.tIc{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:#ffffff0d;color:#c8a35e}
.tIc svg{width:19px;height:19px;display:block}
.tMeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.tMeta b{font-family:var(--cond);font-size:14px;font-weight:700}
.tMeta span{font-size:10.5px;color:#8b8371}
.tGo{padding:8px 12px;border-radius:var(--r-md);background:#ffa9001a;color:var(--accent-from);
  font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px #ffa90033}
.tGo:active{transform:translateY(1px)}
.tGo.done{background:#ffffff0a;color:#655e4e;pointer-events:none}
.tRew{font-family:var(--mono);font-size:11px;color:#ffc86b;font-weight:700}

/* daily contract card */
.contract{display:flex;align-items:center;gap:12px;padding:14px}
.contractL{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.kB{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.contractL b{font-family:var(--cond);font-size:18px;font-weight:900;line-height:1.1}
.cSub{font-size:11px;color:#6d6350;line-height:1.35}
.contract .btn{flex:0 0 auto;padding:10px 16px}

/* ── empty state ───────────────────────────────────────────── */
/* An empty state is a row, not a billboard. A bordered box with two centred lines
   of grey is the shape every scaffolding generator produces. */
.empty{
  display:flex;align-items:center;gap:11px;padding:12px;
  border-radius:var(--r-lg);border:1px solid #ffffff0d;background:#ffffff04;
}
.empty svg{width:20px;height:20px;flex:0 0 auto;color:#6d6754}
.emptyTxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.emptyTxt b{font-family:var(--cond);font-size:13.5px;font-weight:700;color:#9a917c}
.emptyTxt span{font-size:10.5px;color:#655f4f;line-height:1.35}
.empty span{display:block;margin-top:4px;font-size:11px;color:#6d6754;line-height:1.4}

/* Empty garage slots are rows, not billboards — three boxes of dead air made
   the screen look unfinished. */
.slotEmpty{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin-bottom:10px;border-radius:var(--r-lg);
  border:1px solid #ffffff0d;background:#ffffff04;
}
.slotEmpty .slotIc{background:#ffffff0a;color:#6d6754;font-size:17px}
.slotEmpty b{display:block;font-family:var(--cond);font-size:13.5px;font-weight:700;color:#9a917c}
.slotEmpty em{display:block;margin-top:1px;font-style:normal;font-size:10.5px;color:#655f4f}

.foot{margin:26px 4px 10px;font-size:10.5px;line-height:1.6;color:#5c5749;text-align:center}

/* ── tab bar ───────────────────────────────────────────────── */
.tabbar{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--tabbar) + var(--safe-b));padding-bottom:var(--safe-b);
  padding:8px 12px calc(8px + var(--safe-b));
  background:var(--bar);border-top:1px solid #ffffff0f;
  box-shadow:0 -8px 24px #00000059;
}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#7c8690;position:relative;border-radius:var(--r-lg)}
.tab svg{width:20px;height:20px;fill:currentColor}
.tab span{font-family:var(--cond);font-size:11px;font-weight:500;letter-spacing:.02em}
/* Selected is a whole filled pill with the bevel — not a gold icon with a
   hairline above it. This is the tab bar's entire personality in the original. */
.tab.on{
  color:#1f242d;font-weight:600;
  background:linear-gradient(180deg,var(--accent-from) 0%,var(--accent-to) 100%);
  box-shadow:inset 0 1px #fff9,inset 0 -1px #0000004d;
}
.tab.on span{font-weight:700}
.tab.bump svg{animation:bump .4s}
@keyframes bump{0%,100%{transform:none}40%{transform:scale(1.22)}}

/* ── bottom sheet ──────────────────────────────────────────── */
.sheetWrap{position:fixed;inset:0;z-index:1000;pointer-events:none}
.sheetBd{position:absolute;inset:0;background:#0000008c;opacity:0;transition:opacity .2s}
.sheet{
  position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;
  max-height:calc(100dvh - 24px - var(--safe-t));
  display:flex;flex-direction:column;gap:10px;
  padding:12px 16px calc(24px + var(--safe-b));
  background:var(--sheet);border-radius:16px 16px 0 0;
  box-shadow:0 -8px 24px #00000059;
  transform:translateY(100%);opacity:0;
  transition:transform .25s cubic-bezier(.32,.72,0,1),opacity .25s;
}
.sheetWrap.on{pointer-events:auto}
.sheetWrap.on .sheetBd{opacity:1}
.sheetWrap.on .sheet{transform:translateY(0);opacity:1}
.grab{width:36px;height:4px;border-radius:2px;background:#ffffff4d;align-self:center;margin-bottom:2px}
.sheetTtl{margin:0;font-family:var(--cond);font-size:18px;font-weight:600;line-height:1.2}
.sheetBody{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;
  -webkit-overflow-scrolling:touch;touch-action:pan-y}

/* pick rows inside sheets */
.pick{display:flex;align-items:center;gap:11px;padding:11px;border-radius:var(--r-lg);
  background:#ffffff08;border:1px solid #ffffff0d;text-align:left;width:100%;
  box-shadow:var(--bevel-soft)}
.pick:active{transform:translateY(1px)}
.pick.sel{border-color:#ffa90080;background:#ffa90014;box-shadow:inset 0 1px #ffa90026}
.pickMeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pickMeta b{font-family:var(--cond);font-size:15px;font-weight:700}
.pickMeta span{font-size:10.5px;color:#8b8371}
.pickVal{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#ffc86b;text-align:right;
  font-variant-numeric:tabular-nums lining-nums}

/* wallet rows */
.wRow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid #ffffff08}
.wRow:last-child{border-bottom:0}
.wBal{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:700;color:#ffc86b}
.addr{margin-top:8px;padding:10px 12px;border-radius:var(--r-md);background:#00000040;
  border:1px solid #ffffff0d;font-family:var(--mono);font-size:11px;color:#b3aa93;
  word-break:break-all;line-height:1.5}
.warn{margin-top:10px;padding:10px 12px;border-radius:var(--r-md);
  background:#ffa90012;border:1px solid #ffa90033;font-size:10.5px;color:#d8b878;line-height:1.5}

/* ── toast ─────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar) + var(--safe-b) + 16px);
  transform:translate(-50%,20px);z-index:1200;
  padding:10px 16px;border-radius:var(--r-pill);
  background:rgba(29,36,38,.96);border:1px solid #ffffff1a;
  font-size:12.5px;font-weight:500;color:#e7dfd0;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:min(320px,calc(100% - 32px));
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── ad overlay (placeholder for the network creative) ─────── */
.adOverlay{
  position:fixed;inset:0;z-index:1500;display:none;place-items:center;
  background:#000000e6;padding:24px;
}
.adOverlay.on{display:grid}
.adBox{
  width:100%;max-width:320px;padding:22px;border-radius:16px;
  background:linear-gradient(170deg,#232b2f,#151b1e);
  border:1px solid #ffffff14;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.adTag{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  color:#241a06;background:linear-gradient(150deg,var(--accent-from),var(--accent-to));
  padding:2px 7px;border-radius:4px}
.adBox b{font-family:var(--cond);font-size:18px;font-weight:900}
.adBox p{margin:0;font-size:11.5px;color:#8b8371;line-height:1.5}
.adBar{width:100%;height:5px;border-radius:3px;background:#ffffff12;overflow:hidden;margin-top:4px}
.adBar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-from),var(--accent-to));transition:width .1s linear}
#adSkip{margin-top:4px;padding:11px 20px;border-radius:var(--r-md);
  background:#ffffff12;font-family:var(--cond);font-weight:700;font-size:13px;color:#e7dfd0}
#adSkip:not([disabled]){background:linear-gradient(150deg,var(--accent-from),var(--accent-to));color:#241a06}
#adSkip[disabled]{opacity:.55}

/* ── boot splash ───────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:var(--bg);transition:opacity .4s}
.boot.off{opacity:0;pointer-events:none}
.bootIn{display:flex;flex-direction:column;align-items:center;gap:16px;
  font-family:var(--cond);font-weight:900;font-size:15px;letter-spacing:.2em;
  color:#4a4438;animation:pulse 1.5s infinite}
.bootIn img{width:84px;height:84px;display:block;border-radius:19px;
  box-shadow:0 16px 44px #000000b3}
.bootIn b{color:var(--accent-from)}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}


/* 2026 product pass: explicit live operations signal, solid navigation and
   production failure states. Values follow the Road Rise reference palette. */
.opsbar{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;
  margin:0 0 10px;padding:9px 11px;border-radius:10px;background:linear-gradient(135deg,#322c1d 0%,#2a2e34 60%);
  border:1px solid #ffffff12;box-shadow:inset 0 1px #fff3,inset 0 -1px #0000004d}
.opsbar span{font-family:var(--cond);font-size:10px;font-weight:900;letter-spacing:.11em;color:#ffc15a}
.opsbar span i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#79c83e;box-shadow:0 0 0 3px #79c83e20}
.opsbar b{justify-self:end;font-family:var(--mono);font-size:10px;color:#d9d0c0;font-variant-numeric:tabular-nums lining-nums}
.opsbar em{grid-column:1/-1;font-size:10px;color:#8b8371;font-style:normal}
.netStatus{flex:0 0 auto;padding:7px 12px;background:#7f261f;color:#ffe7df;text-align:center;
  font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.03em}
.empty,.slotEmpty{border:1px solid #ffffff0d;background:linear-gradient(135deg,#24231d,#1b2024);box-shadow:inset 0 1px #fff2}
.tabbar{background:#22292d;backdrop-filter:none;-webkit-backdrop-filter:none}
button:active,.gear:active,.slotBuy:active,.seg:active{transform:translateY(1px)}
.adsgramTaskHost{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;background:#000c}
.adsgramTaskCard{width:min(390px,100%);padding:18px;border-radius:16px;background:linear-gradient(135deg,#322c1d,#2a2e34 60%);border:1px solid #ffffff18;box-shadow:0 20px 60px #000b}
.adsgramTaskTitle{margin-bottom:12px;font-family:var(--cond);font-weight:900;letter-spacing:.14em;color:#ffc15a}
.adsgramTaskClose{width:100%;margin-top:12px;padding:11px;border-radius:8px;background:#ffffff10;box-shadow:inset 0 1px #fff3,inset 0 -1px #0000004d;font-family:var(--cond);font-weight:700}

/* 2026-09 premium garage pass — the base screen now leads with a rendered
   product object, route telemetry and tactile material layering. */
body{font-variant-numeric:tabular-nums lining-nums}
.topbar{
  min-height:54px;padding:calc(var(--safe-t) + 9px) 12px 9px;
  background:linear-gradient(180deg,#2a3033 0%,#1a1f22 100%);
  box-shadow:inset 0 1px #fff1,inset 0 -1px #0008,0 10px 26px #0006;
}
.brand{gap:9px}
.brandLogo{
  width:36px;height:36px;border-radius:10px;
  box-shadow:inset 0 1px #fff6,inset 0 -1px #0008,0 5px 13px #0009;
}
.brandText{font-size:16px;letter-spacing:.075em;text-shadow:0 2px 4px #000}
.gear{border:1px solid #ffffff0d;background:linear-gradient(135deg,#32363a,#1c2023);box-shadow:var(--bevel-soft)}
.opsbar{
  position:relative;overflow:hidden;padding:10px 12px;margin-bottom:11px;
  border-color:#8f744f45;background:linear-gradient(135deg,#322c1d 0%,#2a2e34 60%);
}
.opsbar::after{content:"";position:absolute;right:-26px;top:-34px;width:104px;height:104px;border:1px solid #ffa9001a;border-radius:50%;box-shadow:0 0 0 15px #ffa90008,0 0 0 32px #ffa90005}
.idRow{
  position:relative;overflow:hidden;padding:12px 13px;border-color:#ffffff13;
  background:linear-gradient(135deg,#242a2e 0%,#171c1f 72%);
  box-shadow:var(--bevel-soft),0 8px 18px #0004;
}
.idRow::after{content:"";position:absolute;left:66px;right:13px;bottom:0;height:2px;background:linear-gradient(90deg,#ffa900 0 26%,#ffffff10 26%);opacity:.8}
.ava{border:1px solid #ffdb9255;box-shadow:var(--bevel),0 5px 12px #0007;background:linear-gradient(145deg,#ffe0a2,#b77a22)}
.lvlChip{box-shadow:var(--bevel-soft);background:linear-gradient(135deg,#352d20,#202428)}
.cta{
  min-height:202px;border:1px solid #fff8d080;
  background:
    radial-gradient(circle at 88% 4%,#fffdf1 0 8%,transparent 31%),
    linear-gradient(112deg,#f1e7d2 0%,#e8dcc3 56%,#cdbd9e 100%);
  box-shadow:inset 0 1px #fff, inset 0 -1px #7e6d5040,0 14px 32px #0009;
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(135deg,transparent 0 22px,#5d50300a 22px 23px),
    linear-gradient(90deg,transparent 0 51%,#8d7d6026 51% 51.4%,transparent 51.4%);
}
.cta::after{content:"07";position:absolute;right:10px;top:-18px;color:#5d503010;font-family:var(--cond);font-size:104px;font-weight:900;line-height:1}
.ctaIn{z-index:3;width:55%;padding:15px 0 0 16px;gap:2px}
.ctaEyebrow{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-family:var(--cond);font-size:8.5px;font-weight:900;letter-spacing:.14em;color:#7c6c4c}
.ctaEyebrow i{width:6px;height:6px;border-radius:50%;background:#68a72a;box-shadow:0 0 0 3px #68a72a22}
.ctaIn b{font-size:23px;line-height:.98;max-width:150px}
.ctaIn>span{max-width:146px;font-size:11px;line-height:1.35}
.ctaPill{margin-top:9px;padding:8px 12px 8px 14px;border-radius:8px;background:linear-gradient(180deg,#ffa900,#dd9119);box-shadow:var(--bevel),0 6px 14px #a8661947}
.ctaTruck3d{
  position:absolute;z-index:2;right:-54px;bottom:32px;width:min(70%,326px);height:auto;
  pointer-events:none;filter:drop-shadow(0 12px 24px #00000073);
}
.ctaStats{
  position:absolute;z-index:4;left:0;right:0;bottom:0;height:38px;
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  background:linear-gradient(180deg,#302b22,#1d2225);border-top:1px solid #fff5;
  box-shadow:inset 0 1px #fff2;
}
.ctaStats span{display:flex;align-items:baseline;justify-content:center;gap:5px;border-right:1px solid #ffffff12;min-width:0}
.ctaStats span:last-child{border-right:0}
.ctaStats b{font-family:var(--mono);font-size:10.5px;color:#ffc159}
.ctaStats small{font-family:var(--cond);font-size:7px;font-weight:700;letter-spacing:.08em;color:#a99e89;white-space:nowrap}
.grid2{gap:11px;margin-top:11px}
.mini{position:relative;min-height:91px;padding:14px 13px;overflow:hidden;background:linear-gradient(135deg,#322c1d 0%,#2a2e34 60%)}
.mini::after{content:"";position:absolute;right:-24px;bottom:-35px;width:76px;height:76px;border:1px solid #c8a35e1f;border-radius:50%;box-shadow:0 0 0 10px #c8a35e0a}
.miniIc{width:22px;height:22px;margin-bottom:7px;color:#ffc159;filter:drop-shadow(0 3px 5px #0008)}
.mini b{font-size:15px}.mini span{max-width:130px}

@media (max-width:360px){
  .topbar{gap:7px}.brandText{font-size:14px}.coin{padding-right:7px}.coin b{font-size:11px}
  .cta{min-height:194px}.ctaIn{width:58%;padding-left:14px}.ctaIn b{font-size:21px}.ctaIn>span{font-size:10.5px}
  .ctaTruck3d{right:-66px;bottom:34px;width:75%}.ctaStats small{font-size:6.3px}.ctaStats b{font-size:9.5px}
}

/* Command mastheads give every secondary screen a clear product identity and
   live, state-backed summary before the scrollable lists begin. */
.pageMast{
  position:relative;overflow:hidden;margin:0 0 15px;padding:16px 15px 0;
  border:1px solid #ffffff14;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#322c1d 0%,#2a2e34 60%);
  box-shadow:var(--bevel-soft),0 9px 22px #0006;
}
.pageMast::before{content:"";position:absolute;right:-32px;top:-48px;width:154px;height:154px;border:1px solid #ffc1591f;border-radius:50%;box-shadow:0 0 0 18px #ffc1590a,0 0 0 42px #ffc15908}
.pageMast::after{position:absolute;right:13px;top:4px;font-family:var(--cond);font-size:70px;line-height:1;font-weight:900;color:#ffffff08}
.mastGarage::after{content:"03"}.mastRaid::after{content:"09"}.mastShop::after{content:"12"}.mastTasks::after{content:"S7"}
.mastOverline{position:relative;z-index:1;display:flex;align-items:center;gap:7px;margin-bottom:4px;font-family:var(--cond);font-size:9px;font-weight:900;letter-spacing:.15em;color:#ffc159}
.mastOverline i{width:7px;height:7px;border-radius:2px;background:linear-gradient(180deg,#ffa900,#dd9119);box-shadow:var(--bevel)}
.pageMast h1{position:relative;z-index:1;margin:0;font-family:var(--cond);font-size:31px;line-height:34px;font-weight:900;letter-spacing:-.02em}
.pageMast p{position:relative;z-index:1;max-width:74%;min-height:30px;margin:3px 0 13px;font-size:11px;line-height:15px;color:#aaa08b}
.mastRail{position:relative;z-index:1;margin:0 -15px;display:grid;grid-template-columns:repeat(3,1fr);min-height:43px;background:#101416a8;border-top:1px solid #ffffff12}
.mastRail span{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #ffffff0d;min-width:0}
.mastRail span:last-child{border-right:0}
.mastRail b{font-family:var(--mono);font-size:11px;line-height:14px;color:#ffc159;white-space:nowrap}
.mastRail small{font-family:var(--cond);font-size:7px;line-height:10px;font-weight:700;letter-spacing:.1em;color:#817966;white-space:nowrap}
.pageMast + .stack{margin-top:2px}

@media (max-width:360px){
  .pageMast{padding-left:13px;padding-right:13px}.pageMast h1{font-size:28px}.pageMast p{max-width:78%}
  .mastRail{margin-left:-13px;margin-right:-13px}.mastRail small{font-size:6.5px}.mastRail b{font-size:10px}
}

/* Live operations layer. Counts describe the in-game season simulation and
   move slowly with UTC time, so refreshes stay coherent rather than random. */
.opsEvent{
  position:relative;overflow:hidden;margin-top:12px;padding:14px 14px 0;
  border-radius:var(--r-xl);border:1px solid #8e70473d;
  background:
    radial-gradient(circle at 100% 0,#ffa9001f,transparent 42%),
    linear-gradient(135deg,#322c1d 0%,#20262a 66%);
  box-shadow:var(--bevel-soft),0 10px 24px #0006;
}
.opsEvent::after{content:"";position:absolute;right:-19px;top:7px;width:86px;height:86px;border:12px solid #ffa90009;border-radius:50%}
.opsEventHead{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.opsEventHead span{display:flex;align-items:center;gap:6px;font-family:var(--cond);font-size:9px;font-weight:900;letter-spacing:.14em;color:#ffc159}
.opsEventHead span i{width:6px;height:6px;border-radius:50%;background:#79c83e;box-shadow:0 0 0 3px #79c83e1c}
.opsEventHead em{font-family:var(--mono);font-size:9px;font-style:normal;color:#b6aa91}
.opsEventTitle{position:relative;z-index:1;display:block;font-family:var(--cond);font-size:19px;line-height:22px;font-weight:900;letter-spacing:.02em}
.opsEvent>p{position:relative;z-index:1;max-width:82%;margin:3px 0 12px;font-size:10.5px;line-height:15px;color:#9c927e}
.opsEventTrack{position:relative;z-index:1;height:7px;border-radius:4px;background:#07090a99;overflow:hidden;border:1px solid #ffffff0a}
.opsEventTrack i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#dd9119,#ffc159);box-shadow:var(--bevel);transition:width .35s ease}
.opsEventStats{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr 1fr;min-height:48px}
.opsEventStats span{display:flex;flex-direction:column;justify-content:center;min-width:0}
.opsEventStats b{font-family:var(--mono);font-size:11px;line-height:14px;color:#f1e7d5}
.opsEventStats small{font-family:var(--cond);font-size:6.7px;line-height:10px;font-weight:700;letter-spacing:.09em;color:#7f7664;white-space:nowrap}
.opsNotice{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin:0 -14px;padding:9px 14px;background:#121618;border-top:1px solid #ffffff0d}
.opsNotice span{flex:0 0 auto;font-family:var(--cond);font-size:7.5px;font-weight:900;letter-spacing:.09em;color:#ffc159}
.opsNotice b{font-size:9px;line-height:12px;font-weight:500;color:#9f9684}
.bAva{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-family:var(--cond);font-size:11px;font-weight:900;color:#fff;border:1px solid #ffffff16;box-shadow:inset 0 1px #fff3}
.bAva.t0{background:#794b32}.bAva.t1{background:#355b71}.bAva.t2{background:#5f4a76}.bAva.t3{background:#4f682f}.bAva.t4{background:#7a5930}.bAva.t5{background:#354d55}

@media (max-width:360px){
  .opsEvent{padding-left:12px;padding-right:12px}.opsEvent>p{max-width:88%}.opsEventStats small{font-size:6px}.opsNotice{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .bAva{width:24px;height:24px}.bRow{gap:7px}
}