/* Anything Helps — a committed single-theme world: sodium streetlight on wet asphalt.
   Every color is painted explicitly so the page holds on any host ground. */

:root {
  --asphalt: #141210;
  --asphalt-2: #1d1917;
  --asphalt-3: #272120;
  --asphalt-4: #312927;
  --line: #3a312c;
  --line-soft: #262019;
  --cardboard: #c9995e;
  --cardboard-2: #ab7c45;
  --cardboard-ink: #2c1d0d;
  --sodium: #ffa62b;
  --sodium-glow: rgba(255, 166, 43, 0.16);
  --spray: #86d24a;
  --rust: #e04b31;
  --sky: #8cc7ff;
  --paper: #f3e9da;
  --concrete: #a39888;
  --concrete-dim: #74695f;
  --font-marker: 'Permanent Marker', 'Bradley Hand', cursive;
  --font-ui: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-data: 'Barlow Condensed', 'Arial Narrow', ui-sans-serif, sans-serif;
  --radius: 4px;
  --dock: 118px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: radial-gradient(120% 50% at 50% -10%, var(--sodium-glow), transparent 60%), var(--asphalt);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
svg { display: block; }
[hidden] { display: none !important; }

.shell { max-width: 480px; margin-inline: auto; padding: 0 14px calc(var(--dock) + 24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 20;
  display: grid; gap: 7px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 9px;
  background: linear-gradient(var(--asphalt) 86%, rgba(20, 18, 16, 0));
}
.sign {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 13px 10px;
  color: var(--cardboard-ink);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 7px), linear-gradient(168deg, var(--cardboard), var(--cardboard-2));
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  clip-path: polygon(0 3px, 32% 0, 71% 4px, 100% 1px, 99.4% 100%, 60% 97%, 24% 100%, 0.6% 98%);
}
.sign-left { min-width: 0; }
.sign-title { margin: 0; font-family: var(--font-marker); font-size: clamp(17px, 5.4vw, 22px); line-height: 1; transform: rotate(-1.1deg); white-space: nowrap; }
.sign-sub { display: block; margin-top: 4px; font-family: var(--font-data); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; transform: rotate(-1.1deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sign-cash { flex: none; text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; transform: rotate(0.8deg); }
.sign-cash strong { display: block; font-size: 27px; font-weight: 700; line-height: 0.95; }
.sign-cash span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }

.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.pips { display: flex; gap: 4px; align-items: center; }
.pip { width: 14px; height: 9px; border-radius: 2px; background: var(--asphalt-3); border: 1px solid var(--line); transition: background 200ms; }
.pip.lit { background: var(--sodium); border-color: var(--sodium); box-shadow: 0 0 8px var(--sodium-glow); }
.hud-weather { font-family: var(--font-data); font-size: 13px; font-weight: 600; color: var(--concrete); letter-spacing: 0.04em; }

.meters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mm { display: grid; gap: 3px; min-width: 0; }
.mm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 2px; }
.mm-label { font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--concrete); }
.mm-val { font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--concrete-dim); font-variant-numeric: tabular-nums; }
.mm-track { display: block; height: 6px; background: var(--asphalt-3); border-radius: 99px; overflow: hidden; }
.mm-fill { display: block; height: 100%; border-radius: 99px; background: var(--spray); transition: width 420ms cubic-bezier(0.2, 0.8, 0.3, 1), background-color 300ms; }
.mm.mid .mm-fill { background: var(--sodium); }
.mm.low .mm-fill, .mm.critical .mm-fill { background: var(--rust); }
.mm.critical .mm-label, .mm.critical .mm-val { color: var(--rust); }
.mm.critical .mm-track { animation: critical 1.2s ease-in-out infinite; }
@keyframes critical { 50% { box-shadow: 0 0 0 2px rgba(224, 75, 49, 0.35); } }

.status-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.status-chips:empty { display: none; }
.schip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-data); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 3px; background: var(--asphalt-3); color: var(--concrete); }
.schip svg { width: 13px; height: 13px; }
.schip.gold { color: var(--sodium); background: rgba(255, 166, 43, 0.13); }
.schip.hot { color: var(--rust); background: rgba(224, 75, 49, 0.14); }
.schip.friend { color: var(--sky); background: rgba(140, 199, 255, 0.1); }

.goal-bar { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius); background: var(--asphalt-2); border: 1px solid var(--line-soft); font-size: 13px; line-height: 1.35; color: var(--paper); }
.goal-bar .goal-ic svg { width: 16px; height: 16px; color: var(--sodium); }
.goal-bar .goal-face { flex: none; }
.goal-bar.coach { border-color: rgba(255, 166, 43, 0.5); background: linear-gradient(90deg, rgba(255, 166, 43, 0.1), var(--asphalt-2) 70%); }
.goal-bar.bad { border-color: rgba(224, 75, 49, 0.6); background: rgba(224, 75, 49, 0.1); }
.goal-bar.bad .goal-ic svg { color: var(--rust); }
.goal-bar.warn { border-color: rgba(255, 166, 43, 0.6); }
.goal-bar.gold { border-color: var(--sodium); color: var(--sodium); }

/* ---------- common ---------- */
.view { padding-top: 6px; animation: view-in 260ms ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 9px; }
.panel-head h2 { margin: 0; font-family: var(--font-data); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--concrete); }
.panel-note { font-size: 12px; color: var(--concrete-dim); text-align: right; }
.note { margin: 10px 0; font-size: 13px; color: var(--concrete); line-height: 1.45; }
.dim { color: var(--concrete-dim); }
.small { font-size: 12px; }
.warn { color: var(--rust); }
.is-up { color: var(--spray); }
.lvl { font-size: 12px; color: var(--sodium); margin-left: 4px; }
.count { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--sodium); }
.tag { display: inline-block; margin-left: 4px; padding: 0 5px; font-family: var(--font-data); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--concrete); border: 1px solid var(--line); border-radius: 2px; vertical-align: 3px; }
.perk { color: var(--sodium); opacity: 0.9; }
.lockline { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--rust); font-family: var(--font-data); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.lockline svg { width: 12px; height: 12px; flex: none; }
.owned-tag { font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spray); white-space: nowrap; }
.owned-tag.gold { color: var(--sodium); }
.link-btn { margin-top: 6px; font-family: var(--font-data); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sodium); }

.btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; font-family: var(--font-data); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--asphalt-3); border: 1px solid var(--line); border-radius: var(--radius); white-space: nowrap; transition: border-color 160ms, background-color 160ms, color 160ms, transform 100ms; }
.btn svg { width: 14px; height: 14px; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:hover:not(:disabled) { border-color: var(--sodium); color: var(--sodium); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.primary { color: var(--cardboard-ink); background: var(--sodium); border-color: var(--sodium); }
.btn.primary:hover:not(:disabled) { color: var(--cardboard-ink); background: #ffb44e; }
.btn.ghost { background: transparent; }
.btn.ok { color: var(--spray); border-color: rgba(134, 210, 74, 0.45); }
.btn.danger:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }

.rows { display: grid; gap: 7px; }
.row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 11px; background: var(--asphalt-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.row-main { min-width: 0; }
.row-name { font-family: var(--font-data); font-size: 15.5px; font-weight: 600; letter-spacing: 0.02em; }
.row-desc { font-size: 12.5px; line-height: 1.38; color: var(--concrete); }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions.wrap { flex-wrap: wrap; justify-content: flex-end; max-width: 220px; }
.row-actions.col { flex-direction: column; align-items: stretch; }
.row.done { border-color: rgba(134, 210, 74, 0.35); }
.row.biz, .row.path { align-items: start; }

.stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; }
.stat { padding: 8px 10px; background: var(--asphalt-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.stat dt { font-family: var(--font-data); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--concrete-dim); }
.stat dd { margin: 1px 0 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 12px 0 4px; padding: 3px; background: var(--asphalt-2); border: 1px solid var(--line-soft); border-radius: 6px; }
.seg-btn { padding: 8px 4px; font-family: var(--font-data); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--concrete-dim); border-radius: 4px; transition: background 160ms, color 160ms; }
.seg-btn[aria-selected='true'] { color: var(--cardboard-ink); background: var(--sodium); }

details.cat { margin-top: 10px; }
details.cat > summary { cursor: pointer; list-style: none; padding: 10px 12px; margin-bottom: 7px; font-family: var(--font-data); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: var(--asphalt-3); border: 1px solid var(--line); border-radius: var(--radius); }
details.cat > summary::-webkit-details-marker { display: none; }
details.cat > summary::after { content: '+'; float: right; color: var(--sodium); }
details.cat[open] > summary::after { content: '\2212'; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 2px; background: var(--asphalt-3); color: var(--concrete); }
.chip.up { color: var(--spray); background: rgba(134, 210, 74, 0.12); }
.chip.down { color: var(--rust); background: rgba(224, 75, 49, 0.12); }
.chip.gold { color: var(--sodium); background: rgba(255, 166, 43, 0.13); }
.chip.friend { color: var(--sky); background: rgba(140, 199, 255, 0.12); }

/* ---------- city ---------- */
.map-wrap { position: relative; margin-top: 4px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); background: #0d0c0b; }
.map-wrap svg { width: 100%; height: auto; }
.map-hint { position: absolute; right: 8px; bottom: 6px; font-family: var(--font-data); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 233, 218, 0.55); pointer-events: none; }
.district-zone { cursor: pointer; }
.district-zone:focus { outline: none; }
.district-head { margin-top: 12px; }
.district-name { margin: 0; font-family: var(--font-marker); font-size: 24px; font-weight: 400; color: var(--sodium); line-height: 1.1; transform: rotate(-0.6deg); }
.district-blurb { margin: 4px 0 0; font-size: 13px; color: var(--concrete); }

.goals-strip { display: grid; gap: 6px; margin-top: 12px; }
.goal-pill { display: grid; gap: 4px; padding: 7px 10px; background: var(--asphalt-2); border: 1px dashed var(--line); border-radius: var(--radius); }
.goal-pill.done { border-style: solid; border-color: rgba(134, 210, 74, 0.45); }
.gp-text { font-size: 13px; color: var(--paper); }
.goal-pill.done .gp-text { color: var(--spray); }
.gp-track { display: block; height: 3px; background: var(--asphalt-3); border-radius: 99px; overflow: hidden; }
.gp-track span { display: block; height: 100%; background: var(--sodium); transition: width 400ms; }
.goal-pill.done .gp-track span { background: var(--spray); }

.feed { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.feed.open { max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; }
.entry { padding: 9px 11px 10px; background: var(--asphalt-2); border-left: 3px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; animation: slide-in 340ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.entry.good { border-left-color: var(--spray); }
.entry.bad { border-left-color: var(--rust); }
.entry.big { border-left-color: var(--sodium); background: linear-gradient(90deg, rgba(255, 166, 43, 0.1), var(--asphalt-2) 62%); }
.entry-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.entry-title { font-family: var(--font-data); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.entry-day { margin-left: auto; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--concrete-dim); }
.entry-text { margin: 0; font-size: 14px; color: #ddd2c2; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.action { position: relative; display: grid; gap: 4px; align-content: start; padding: 11px 11px 12px; text-align: left; background: var(--asphalt-2); border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; transition: transform 110ms, border-color 160ms, background-color 160ms; }
.action::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line); }
.action.g-work::before { background: var(--sky); }
.action.g-business::before { background: var(--sodium); }
.action.g-music::before { background: #c58cff; }
.action.g-street::before { background: var(--cardboard); }
.action.g-learn::before { background: var(--spray); }
.action.g-civic::before { background: var(--concrete); }
.action.g-risk::before { background: var(--rust); }
.action:hover:not(:disabled) { border-color: var(--sodium); background: var(--asphalt-3); }
.action:active:not(:disabled) { transform: scale(0.97); }
.action:disabled { opacity: 0.45; cursor: not-allowed; }
.action-name { font-family: var(--font-data); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; }
.action-blurb { font-size: 12.5px; line-height: 1.35; color: var(--concrete); }
.action-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.action-cost { display: flex; gap: 3px; }
.action-cost i { width: 7px; height: 11px; border-radius: 1px; background: var(--sodium); }
.action-foot em { font-family: var(--font-data); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--concrete-dim); }
.action-lock { font-family: var(--font-data); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rust); }
.locked-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 14px 0 8px; padding: 10px 12px; font-family: var(--font-data); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--concrete); background: transparent; border: 1px dashed var(--line); border-radius: var(--radius); }
.locked-toggle svg { width: 14px; height: 14px; }
.locked-toggle b { margin-left: auto; color: var(--sodium); }

.person { grid-template-columns: auto 1fr auto; }
.person-face svg, .card-face svg { border-radius: 50%; }
.rel { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.rel-track { position: relative; flex: 1; height: 5px; background: var(--asphalt-3); border-radius: 99px; max-width: 160px; }
.rel-fill { position: absolute; inset: 0 auto 0 0; background: var(--sky); border-radius: 99px; transition: width 400ms; }
.rel-fill.neg { background: var(--rust); }
.rel-mark { position: absolute; top: -3px; width: 2px; height: 11px; background: var(--sodium); border-radius: 1px; }
.rel-num { font-family: var(--font-data); font-size: 12px; font-weight: 600; color: var(--concrete); min-width: 22px; }

/* ---------- home ---------- */
.scene-wrap { margin-top: 4px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.scene-wrap svg { width: 100%; height: auto; }
.home-card { margin-top: -18px; position: relative; padding: 12px 13px; background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 8px; margin-inline: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.home-name { font-family: var(--font-marker); font-size: 21px; color: var(--sodium); line-height: 1.1; }
.home-where { margin-top: 3px; font-size: 13px; color: var(--concrete); }
.home-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-family: var(--font-data); font-size: 13px; font-weight: 600; color: var(--paper); }
.home-stats span { display: inline-flex; align-items: center; gap: 4px; }
.home-stats svg { width: 14px; height: 14px; color: var(--sodium); }

/* ---------- empire ---------- */
.worth-card { display: grid; gap: 1px; margin-top: 4px; padding: 14px 14px 12px; border-radius: 8px; background: linear-gradient(150deg, #2a2017, var(--asphalt-2) 70%); border: 1px solid var(--line); }
.worth-label { font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--concrete); }
.worth-num { font-family: var(--font-data); font-size: 34px; font-weight: 700; color: var(--sodium); font-variant-numeric: tabular-nums; line-height: 1.05; }
.worth-sub { font-size: 12.5px; color: var(--concrete); }
.checks { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.checks li { font-size: 12.5px; color: var(--concrete-dim); padding-left: 16px; position: relative; }
.checks li::before { content: '\25CB'; position: absolute; left: 0; }
.checks li.ok { color: var(--spray); }
.checks li.ok::before { content: '\25CF'; }
.checks li.info { color: var(--concrete); }
.checks li.info::before { content: '\2192'; }

/* ---------- you ---------- */
.origin-note { margin: 6px 0 4px; padding: 10px 12px; font-size: 14px; font-style: italic; color: var(--concrete); border-left: 2px solid var(--cardboard-2); background: var(--asphalt-2); }
.skills { display: grid; gap: 9px; }
.skill { display: grid; grid-template-columns: 62px 1fr 22px; align-items: center; gap: 9px; }
.skill-name { font-family: var(--font-data); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--concrete); }
.skill-track { display: block; height: 5px; background: var(--asphalt-3); border-radius: 99px; overflow: hidden; }
.skill-fill { display: block; height: 100%; background: var(--cardboard); border-radius: 99px; transition: width 400ms; }
.skill-level { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; text-align: right; color: var(--sodium); }
.skill-perk { margin: -4px 0 2px 71px; font-size: 12px; color: var(--sodium); opacity: 0.85; }
.perk-pick { margin: 12px 0; padding: 11px; border: 1px solid var(--sodium); border-radius: var(--radius); background: rgba(255, 166, 43, 0.06); }
.perk-opts { display: grid; gap: 7px; margin-top: 8px; }
.choice-btn { display: grid; gap: 2px; text-align: left; padding: 9px 11px; background: var(--asphalt-3); border: 1px solid var(--line); border-radius: var(--radius); }
.choice-btn:hover { border-color: var(--sodium); }
.choice-btn b { font-family: var(--font-data); font-size: 15px; color: var(--paper); }
.choice-btn span { font-size: 12.5px; color: var(--concrete); }
.ach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ach { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; padding: 8px 9px; background: var(--asphalt-2); border: 1px solid var(--line-soft); border-radius: var(--radius); opacity: 0.5; }
.ach.got { opacity: 1; border-color: rgba(255, 166, 43, 0.4); }
.ach-ic { grid-row: span 2; color: var(--concrete-dim); }
.ach.got .ach-ic { color: var(--sodium); }
.ach-ic svg { width: 16px; height: 16px; }
.ach b { font-family: var(--font-data); font-size: 13.5px; line-height: 1.2; }
.ach span:last-child { font-size: 11.5px; color: var(--concrete); line-height: 1.3; }
.junk-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.junk { padding: 3px 7px; font-family: var(--font-data); font-size: 12px; font-weight: 600; color: var(--concrete-dim); border: 1px dashed var(--line); border-radius: 3px; }
.junk.got { color: var(--cardboard); border-style: solid; border-color: var(--cardboard-2); }

/* ---------- dock ---------- */
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; padding: 10px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(20, 18, 16, 0), var(--asphalt) 30%); }
.dock > * { max-width: 452px; margin-inline: auto; }
.sleep-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; font-family: var(--font-data); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 8px; transition: border-color 160ms, color 160ms, transform 100ms; }
.sleep-btn svg { width: 16px; height: 16px; }
.sleep-btn:active { transform: scale(0.98); }
.sleep-btn:hover { border-color: var(--sodium); color: var(--sodium); }
.sleep-btn.urgent { color: var(--cardboard-ink); background: var(--sodium); border-color: var(--sodium); animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 92%, 100% { transform: none; } 96% { transform: translateY(-2px); } }
.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 7px; }
.tab { display: grid; justify-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 6px; color: var(--concrete-dim); transition: color 160ms, background 160ms; }
.tab-ic svg { width: 20px; height: 20px; }
.tab-lb { font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tab[aria-selected='true'] { color: var(--sodium); background: var(--asphalt-2); }

/* ---------- modal card ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px 16px; background: rgba(10, 9, 8, 0.84); overflow-y: auto; animation: fade-in 220ms ease; }
.card { width: 100%; max-width: 420px; padding: 20px 18px 18px; color: var(--cardboard-ink); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 7px), linear-gradient(168deg, var(--cardboard), var(--cardboard-2)); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); clip-path: polygon(0 4px, 30% 0, 68% 5px, 100% 1px, 99.3% 99%, 62% 100%, 26% 96%, 0.7% 100%); animation: rise 300ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.card h2 { margin: 0 0 8px; font-family: var(--font-marker); font-size: clamp(22px, 7vw, 28px); line-height: 1.1; transform: rotate(-0.8deg); }
.card p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #3d2a15; }
.card .kicker { margin: 0 0 4px; font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6b4a22; }
.card-face { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-data); font-weight: 700; font-size: 15px; }
.card-face svg { box-shadow: 0 0 0 3px rgba(44, 29, 13, 0.25); }
.choices { display: grid; gap: 7px; }
.choice { padding: 11px 13px; text-align: left; font-family: var(--font-data); font-size: 15.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--cardboard-ink); background: rgba(255, 246, 232, 0.55); border: 1px solid rgba(44, 29, 13, 0.3); border-radius: var(--radius); transition: background-color 150ms, transform 100ms; }
.choice:hover:not(:disabled) { background: rgba(255, 250, 240, 0.92); }
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice:disabled { opacity: 0.4; cursor: not-allowed; }
.choice.ghost { background: transparent; }
.epitaph { font-family: var(--font-marker); font-size: 17px !important; line-height: 1.35 !important; transform: rotate(-0.5deg); }
.epi-line { font-size: 14px !important; font-style: italic; margin-bottom: 8px !important; }
.ending-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 6px 0 14px; }
.ending-stat { padding: 7px 9px; background: rgba(44, 29, 13, 0.1); border-radius: 2px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.ending-stat b { display: block; font-size: 17px; }
.ending-stat span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.66; }
.unlock { font-size: 14px !important; padding: 8px 10px; background: rgba(44, 29, 13, 0.1); border-radius: 2px; }
.toggles { display: grid; gap: 6px; margin-bottom: 12px; }
.toggle { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 1px 10px; text-align: left; padding: 9px 11px; color: var(--cardboard-ink); background: rgba(255, 246, 232, 0.4); border: 1px solid rgba(44, 29, 13, 0.3); border-radius: var(--radius); }
.toggle b { font-family: var(--font-data); font-size: 15px; }
.toggle span { grid-column: 1; font-size: 12.5px; color: #4a3520; }
.toggle i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-family: var(--font-data); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; opacity: 0.55; }
.toggle.on { background: rgba(255, 250, 240, 0.92); border-color: var(--cardboard-ink); }
.toggle.on i { opacity: 1; color: #2d6a10; }
.toggle.chal.on i { color: #a8321c; }
.locked-list { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; color: #4a3520; }

/* ---------- bottom sheet ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 9, 8, 0.6); animation: fade-in 200ms ease; }
.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 61; max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.sheet.up { transform: none; }
.sheet-body { max-width: 480px; margin-inline: auto; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--asphalt-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6); }
.sheet-grip { width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 99px; background: var(--line); }
.sheet h2 { margin: 0 0 4px; font-family: var(--font-marker); font-size: 24px; font-weight: 400; color: var(--sodium); }
.sheet .kicker { font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--concrete); }
.sheet .choice { color: var(--paper); background: var(--asphalt-3); border-color: var(--line); }
.sheet .choice:hover:not(:disabled) { background: var(--asphalt-4); border-color: var(--sodium); }
.sheet .choice.primary { color: var(--cardboard-ink); background: var(--sodium); border-color: var(--sodium); }
.sheet .choice.ghost { background: transparent; }
.sheet .choice b { display: block; }
.sheet .choice span { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 12.5px; color: var(--concrete); }
.sheet .choice.mgr.on { border-color: var(--spray); }
.sheet-faces { display: flex; gap: 6px; margin: 6px 0 12px; }
.mini-face svg { border-radius: 50%; }
.opt-label { margin: 12px 0 6px; font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--concrete); }
.opts { display: grid; gap: 6px; }
.opts.row3 { grid-template-columns: repeat(3, 1fr); }
.opts.row2 { grid-template-columns: repeat(2, 1fr); }
.opt { display: grid; gap: 1px; padding: 8px 10px; text-align: left; background: var(--asphalt-3); border: 1px solid var(--line); border-radius: var(--radius); }
.opt b { font-family: var(--font-data); font-size: 14.5px; }
.opt span { font-size: 11.5px; color: var(--concrete); }
.opt.on { border-color: var(--sodium); background: rgba(255, 166, 43, 0.1); }
.opt:disabled { opacity: 0.35; }
.odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 4px; }
.odds div { padding: 8px; background: var(--asphalt); border-radius: var(--radius); }
.odds span { display: block; font-family: var(--font-data); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--concrete-dim); }
.odds b { font-family: var(--font-data); font-size: 17px; }
.vance-meter { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-data); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--concrete); }
.vm-track { flex: 1; height: 6px; background: var(--asphalt-3); border-radius: 99px; overflow: hidden; }
.vm-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--rust)); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 90; display: flex; align-items: center; gap: 10px; width: min(420px, calc(100% - 28px)); padding: 10px 13px; transform: translateX(-50%); background: var(--asphalt-3); border: 1px solid var(--sodium); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); animation: toast-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1); transition: opacity 400ms, transform 400ms; }
.toast.out { opacity: 0; transform: translate(-50%, -12px); }
.toast-ic { font-size: 22px; color: var(--sodium); }
.toast b { display: block; font-family: var(--font-data); font-size: 15px; color: var(--sodium); }
.toast span { font-size: 12.5px; color: var(--concrete); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }

@keyframes rise { from { opacity: 0; transform: translateY(14px) rotate(-0.4deg); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 380px) {
  .row { grid-template-columns: 1fr; }
  .person { grid-template-columns: auto 1fr; }
  .person .row-actions { grid-column: 1 / -1; flex-direction: row; }
  .row-actions, .row-actions.wrap { justify-content: flex-start; max-width: none; flex-wrap: wrap; }
  .meters { gap: 4px; }
}

/* Wide rows: content on top, buttons underneath. */
.row.path, .row.biz { grid-template-columns: 1fr; }
.row.path .row-actions, .row.biz .row-actions { justify-content: flex-start; max-width: none; flex-wrap: wrap; }