/* Highrise — Popsicle (light) + Popsicle Dark theme (§15). All color via tokens. */

:root, :root[data-theme="light"] {
  --bg: #f6f5fa; --surface: #ffffff; --surface2: #efedf8;
  --border: #e2def0; --ink: #241f33; --muted: #6f6885;
  --accent: #e2570e; --accent-ink: #ffffff;
  --teal: #0a9d90; --grape: #6b4de6; --danger: #d64545; --gold: #e0a400;
  --money: #0a9d90; --neg: #d64545;
  --glass: rgba(255,255,255,0.72);
  --shadow: 0 6px 20px rgba(20,27,46,0.10);
  --radius: 15px;
}
:root[data-theme="dark"] {
  --bg: #191625; --surface: #241f33; --surface2: #2e2840;
  --border: #3b3352; --ink: #f2eef9; --muted: #a69dba;
  --accent: #ff8a3d; --accent-ink: #2a1206;
  --teal: #2fd4c4; --grape: #ab8dff; --danger: #ff6b78; --gold: #e0b24d;
  --money: #2fd4c4; --neg: #ff6b78;
  --glass: rgba(36,31,51,0.72);
  --shadow: 0 10px 26px rgba(0,0,0,0.42);
  --radius: 15px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  /* Kill the iOS long-press callout (Copy / Look Up / Search Web) + text selection. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Allow selection/entry only where it's actually needed (form fields). */
input, select, textarea { -webkit-user-select: auto; user-select: auto; }
#game-canvas { -webkit-touch-callout: none; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", "Nunito", system-ui, sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button { font-family: inherit; cursor: pointer; }

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* --- Top bar --- */
/* The HTML `hidden` attribute must always win. Chips toggle visibility with it
   (petition 📜, developer 🏗️, install, offline), but `.chip { display: inline-grid }`
   would otherwise override it and leak them into the dash when none is active. */
[hidden] { display: none !important; }

#topbar {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  padding: 6px 12px; background: var(--glass); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand .logo { font-size: 22px; }
.brand .title { font-weight: 700; font-size: 18px; letter-spacing: .2px; }
.stats { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; line-height: 1.05; }
.stat .label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat .val { font-size: 16px; font-weight: 700; }
.val.money { color: var(--money); }
/* Mood meter — a live happiness bar in the top dash: face + gradient fill + %. */
.mood-row { display: flex; align-items: center; gap: 6px; }
.mood-face { font-size: 15px; line-height: 1; }
.mood-track {
  position: relative; width: 74px; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--border);
}
.mood-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: #7aa53a; border-radius: 5px;
  transition: width .55s ease, background-color .55s ease;
}
.mood-pct { font-size: 13px; min-width: 34px; }
@media (max-width: 480px) { .mood-track { width: 56px; } .mood-pct { font-size: 12px; min-width: 30px; } }
.val.money.neg { color: var(--neg); }
.val.stars { color: var(--gold); letter-spacing: 1px; }
/* Live progress toward the next star rating, under the Rating stat. */
/* Rating value + next-rating progress share ONE line beside the stars, so the
   Rating stat is the same height as every other stat (no taller second row). */
.rating-line { display: flex; align-items: center; gap: 8px; }
.star-next { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); line-height: 1.1; white-space: nowrap; }
.star-next.maxed { color: var(--gold); font-weight: 700; }
.star-next .bar { display: inline-block; height: 4px; width: 48px; border-radius: 999px; background: var(--surface2); overflow: hidden; flex: 0 0 auto; }
.star-next .bar > i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s ease; }

/* Chip toolbar: forced onto its own full-width row below the stats/pills, so the
   dash reads as two tidy lines instead of one tall, half-empty block. */
.controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }
/* Speed + zoom pills ride up on the stats row, pushed to the right so the
   otherwise-empty right half of that row is put to use. */
.pill.speed { margin-left: auto; }
#topbar > .pill { align-self: center; }
#topbar .chip { min-width: 34px; min-height: 34px; font-size: 15px; }
.pill { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.pill button {
  border: 0; background: transparent; color: var(--ink); padding: 5px 9px; font-size: 13px; font-weight: 600;
  min-width: 32px; min-height: 30px;
}
.pill button.active { background: var(--accent); color: var(--accent-ink); }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: 12px; min-width: 38px; min-height: 38px; font-size: 16px; display: inline-grid; place-items: center;
}
.chip:active { transform: translateY(1px); }
.chip:disabled { opacity: .38; cursor: default; }

/* Move/Hand tool chip — lives in the top bar so it's always reachable. */
.chip.hand-chip.active { background: var(--grape); color: var(--accent-ink); border-color: transparent; }

/* Mute-all chip — labeled so it clearly reads as a global sound toggle; turns
   red when everything is muted so the state is unmistakable at a glance. */
.chip.mute-chip { min-width: 0; padding: 0 12px; gap: 5px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip.mute-chip.muted-chip { background: var(--danger); color: #fff; border-color: transparent; }

/* Install prompt chip (auto width for its label) + offline badge. */
.chip.install-chip { min-width: 0; padding: 0 12px; gap: 5px; font-size: 13px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.offline-chip { display: inline-grid; place-items: center; min-height: 38px; padding: 0 11px;
  border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border)); }
.offline-chip[hidden], .install-chip[hidden] { display: none; }

/* Update-ready snackbar — soft bar, bottom-center, non-blocking. */
.updatebar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 130%); z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--ink);
  opacity: 0; pointer-events: none; transition: transform .28s ease, opacity .28s ease;
  max-width: min(92vw, 460px);
}
.updatebar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.updatebar-msg { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Stats dashboard charts. */
.chart { width: 100%; height: 150px; display: block; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 2px 2px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }

/* Goals list. */
.goal { display: flex; gap: 10px; align-items: flex-start; padding: 10px; margin-bottom: 8px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; }
.goal.done { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); }
.goal.expired { opacity: 0.55; }
.goal .g-icon { font-size: 20px; line-height: 1.1; width: 24px; text-align: center; flex: none; }
.goal .g-main { flex: 1; min-width: 0; }
.goal .g-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.goal .g-reward { font-size: 11px; font-weight: 700; color: var(--teal); }
.goal .g-check { color: var(--teal); font-weight: 800; }
.goal .g-miss { font-size: 11px; font-weight: 700; color: var(--muted); }
.goal .g-desc { font-size: 12px; color: var(--muted); margin: 2px 0 6px; line-height: 1.3; }
.goal .g-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.goal .g-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.goal.done .g-bar > i { background: var(--teal); }
.goal .g-val { font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* --- Stage --- */
#stage { display: grid; grid-template-columns: minmax(140px, 168px) 1fr; min-height: 0; }
#toolbar {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Pinned header (★ filter + Floor) — sticks to the top of the scrolling
   toolbar so both stay reachable no matter how far the list is scrolled. */
.toolbar-pinned {
  position: sticky; top: -10px; z-index: 3;
  margin: -10px -10px 8px; padding: 10px 10px 8px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.star-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.star-filter button {
  flex: 1; min-width: 30px; border: 1px solid var(--border); background: var(--surface2);
  color: var(--ink); border-radius: 8px; padding: 5px 4px; font-size: 11px; font-weight: 700;
}
.star-filter button.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
/* Category filter: compact icon buttons on their own line under the ★ row. */
.cat-filter { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.cat-filter button {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; font-size: 14px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface2); border-radius: 8px; cursor: pointer;
}
.cat-filter button.active { background: var(--accent); border-color: transparent; box-shadow: var(--shadow); }
.tool.pinned-floor { border-color: var(--accent); }
.filtered-hidden { display: none !important; }
.tool {
  position: relative;   /* anchor for the 🕳️ underground badge */
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--ink);
}
/* "i" info badge — opens the full unit card on demand (top-right corner). */
.tool { padding-right: 24px; }
.tool .tool-info {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font: italic 700 11px/1 Georgia, 'Times New Roman', serif;
  border-radius: 50%; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
}
.tool .tool-info:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tool.active .tool-info { background: color-mix(in srgb, #000 14%, var(--accent)); color: var(--accent-ink); border-color: transparent; }

/* Underground-ideal units: an earthy corner badge so they're easy to scan for. */
.tool.underground { padding-right: 42px; }
.tool.underground .tool-ug { right: 24px; }
.tool .tool-ug {
  position: absolute; top: 5px; right: 5px;
  font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 6px;
  background: color-mix(in srgb, #7a5a2e 32%, var(--surface));
  border: 1px solid color-mix(in srgb, #7a5a2e 45%, var(--border));
}
.tool.active .tool-ug { background: color-mix(in srgb, #000 18%, var(--accent)); border-color: transparent; }

/* Full-width (36) units — the size most standard floor runs are cut to. They get
   a bright left edge plus a highlighted ↔ size pill, so the items that fill a
   whole run are scannable at a glance across every ★ tier. Deliberately NOT a
   star glyph (★ already means the star rating here), and deliberately inline in
   the meta row rather than a third corner badge, which overlapped the 🕳️ / "i"
   chips and long unit names. */
.tool.fullwidth { box-shadow: inset 3px 0 0 #2f8fc4; }
.tool.fullwidth .tool-dim {
  font-weight: 800; opacity: 1;
  color: color-mix(in srgb, #2f8fc4 76%, var(--ink));
  background: color-mix(in srgb, #2f8fc4 22%, var(--surface));
  border: 1px solid color-mix(in srgb, #2f8fc4 46%, var(--border));
  border-radius: 6px; padding: 1px 5px;
}
.tool.fullwidth.active { box-shadow: var(--shadow), inset 3px 0 0 color-mix(in srgb, #000 30%, var(--accent)); }
.tool.fullwidth.active .tool-dim {
  color: var(--accent-ink); opacity: .95;
  background: color-mix(in srgb, #000 18%, var(--accent)); border-color: transparent;
}
.tool .tool-name { font-weight: 700; font-size: 13px; }
.tool .tool-meta { display: flex; align-items: baseline; gap: 6px; }
.tool .tool-sub { font-size: 11px; color: var(--muted); }
.tool .tool-dim { font-size: 10px; color: var(--muted); opacity: .7; }
.tool .tool-hint { font-size: 10.5px; font-weight: 600; color: var(--accent); }
.tool.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: var(--shadow); }
.tool.active .tool-sub { color: var(--accent-ink); opacity: .85; }
.tool.active .tool-dim { color: var(--accent-ink); opacity: .7; }
.tool.active .tool-hint { color: var(--accent-ink); opacity: .85; }
.tool.demolish.active { background: var(--danger); }
.tool.locked { opacity: .5; }
.tool.locked .tool-sub { color: var(--gold); }
/* Units wider than the phone's tower aren't dimmed, they're removed from the
   palette entirely — see hud._applyFilters(), which reuses .filtered-hidden. */

/* Star-tier divider — marks where the toolbar's ★ groups change. */
.tool-divider {
  margin: 6px 2px 0; padding-top: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--gold); border-top: 1px solid var(--border);
}
.tool-divider:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* Category groups within each star tier — an outlined box + a small heading so
   the placeable items read as clear, scannable clusters (Build & Transit first,
   then Offices, Food, …). A coloured left edge distinguishes each group. */
.tool-group {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px;
  padding: 8px; margin: 2px 2px 4px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.tool-group-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding-left: 2px;
}
.tool-group.group-infra         { border-left-color: #3f8fcf; }
.tool-group.group-office        { border-left-color: #4a86d0; }
.tool-group.group-food          { border-left-color: #e0854a; }
.tool-group.group-retail        { border-left-color: #d99a3c; }
.tool-group.group-entertainment { border-left-color: #9a5ac0; }
.tool-group.group-residential   { border-left-color: #2fa98f; }
.tool-group.group-hotel         { border-left-color: #a07fc7; }
.tool-group.group-service       { border-left-color: #6aa0a0; }
.tool-group.group-special       { border-left-color: #c9a24a; }
.tool-group.group-other         { border-left-color: var(--border); }

/* Category colour-coding in the toolbar — a left stripe + faint tint so you can
   spot floor / lobbies / transport / parking at a glance. :not(.active) lets the
   selected-state styling still win. */
.tool.cat-floor:not(.active)   { box-shadow: inset 4px 0 0 #8a8f98; background: color-mix(in srgb, #8a8f98 13%, var(--surface2)); }
.tool.cat-lobby:not(.active)   { box-shadow: inset 4px 0 0 #e0a92e; background: color-mix(in srgb, #e0a92e 14%, var(--surface2)); }
.tool.cat-transit:not(.active) { box-shadow: inset 4px 0 0 #3f8fcf; background: color-mix(in srgb, #3f8fcf 13%, var(--surface2)); }
.tool.cat-parking:not(.active) { box-shadow: inset 4px 0 0 #8a6fc8; background: color-mix(in srgb, #8a6fc8 13%, var(--surface2)); }

#canvas-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

#hint {
  position: absolute; left: 50%; bottom: calc(58px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--danger); color: #fff; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; pointer-events: none;
  box-shadow: var(--shadow);
}
#hint.show { opacity: .95; }

/* Drag: Build/Move toggle (shown for Floor & Demolish) */
.dragmode {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; z-index: 9;
  background: var(--glass); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px 5px 12px; box-shadow: var(--shadow);
}
.dragmode.show { display: inline-flex; }
.dragmode > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.dragmode button {
  border: 0; background: transparent; color: var(--ink); font-weight: 700; font-size: 13px;
  padding: 7px 12px; border-radius: 999px; min-height: 34px;
}
.dragmode button.active { background: var(--accent); color: var(--accent-ink); }

/* Unit action popover (Move / Delete) */
/* Unit info card — pops up when a build tool is selected, explaining what it does. */
.unitinfo {
  position: absolute; right: calc(8px + env(safe-area-inset-right)); top: 8px;
  display: none; z-index: 11; width: min(420px, calc(100% - 16px));
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  padding: 9px 12px 10px; color: var(--ink);
}
.unitinfo.show { display: block; }
.unitinfo .ui-x {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; line-height: 1;
  border: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; border-radius: 8px;
}
.unitinfo .ui-x:active { background: var(--surface2); }
.unitinfo .ui-head { font-size: 15px; font-weight: 800; padding-right: 22px; display: flex; align-items: center; gap: 7px; }
.unitinfo .ui-lock { font-size: 11px; font-weight: 700; color: var(--gold); }
.unitinfo .ui-role { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.unitinfo .ui-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 6px; }
.unitinfo .ui-chips span {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--ink); white-space: nowrap;
}
.unitinfo .ui-desc { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.unitinfo .ui-analysis {
  margin-top: 8px; padding: 8px 9px; font-size: 11.5px; line-height: 1.4; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 9px;
}
.unitinfo .ui-analysis .muted { color: var(--muted); }

.unitmenu {
  position: absolute; display: none; z-index: 12; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
}
.unitmenu.show { display: block; }
.unitmenu { min-width: 210px; max-width: min(268px, calc(100vw - 20px)); }
/* Never taller than the play area — scroll the detail so the action buttons are
   always reachable (a tall menu used to push Move/Delete off-screen on iPhone). */
.unitmenu { max-height: calc(100% - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Pin Move / Delete (and Unify) to the bottom so they're always visible + tappable
   even when the stats + tenants list makes the menu scroll. */
.unitmenu .um-unify, .unitmenu .um-actions {
  position: sticky; bottom: 0; z-index: 1; background: var(--surface);
}
.unitmenu .um-actions { padding-top: 8px; margin-top: 2px; box-shadow: 0 -10px 10px -8px var(--surface); }
.um-title { font-size: 13px; font-weight: 800; color: var(--ink); padding: 2px 4px 4px; }
.um-stats { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 8px; }
.um-sat { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.um-sat span { white-space: nowrap; }
.um-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.um-bar > i { display: block; height: 100%; border-radius: 999px; }
.um-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.3; }
.um-row > span { color: var(--muted); flex: none; }
.um-row > b { font-weight: 600; text-align: right; }
.um-note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.um-actions { display: flex; gap: 6px; }
.um-actions .mini { flex: 1; padding: 9px 8px; font-size: 13px; }
/* "Unify into one grand lobby" — a gold-tinted full-width action. */
.um-unify {
  display: block; width: 100%; margin: 6px 0 2px; padding: 9px 8px; font-size: 13px; font-weight: 700;
  color: #241f33; border-color: transparent;
  background: linear-gradient(180deg, #f2d777, #e6c65a);
}

/* Rent dial (unit menu) — set what this unit charges. */
.um-rent { padding: 6px 4px 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.um-dial { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.um-dial .mini { min-width: 30px; padding: 4px 8px; font-size: 15px; font-weight: 700; }
.um-dialbar { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.um-dialbar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .15s; }

/* Tenant chips (unit menu) — tap one to name that sim. */
.um-sims { padding: 6px 4px 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.um-sim {
  display: block; width: 100%; text-align: left; margin-top: 4px; padding: 5px 8px;
  font-size: 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--ink);
}
.um-sim.named { border-color: #3a7bd5; color: #3a7bd5; font-weight: 700; }
.um-rename { display: flex; gap: 6px; margin-top: 4px; }
.um-rename input {
  flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--surface); color: var(--ink);
}

/* People panel: named tenants + complaint letters. */
.person {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface2);
}
.person.followed { border-color: #e8332a; }
.person-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.person-main b { font-size: 13px; }
.person-acts { display: flex; gap: 4px; flex: none; }
.letter {
  padding: 8px 10px; margin-bottom: 6px; border-radius: 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--gold); background: var(--surface2);
}
.letter-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.letter-body { font-size: 12.5px; line-height: 1.45; margin-top: 3px; font-style: italic; color: var(--ink); }
.panel-body > details { margin-bottom: 10px; }
.panel-body > details > summary {
  cursor: pointer; font-size: 14px; font-weight: 700; padding: 6px 0; list-style-position: inside;
}
/* Weekend marker on the clock — the tower runs on a different rhythm. */
.stat .val.weekend { color: var(--accent); }

/* Delete mode — a clearly-dangerous red chip while active. */
.chip#btn-delete.active { background: var(--danger); color: #fff; border-color: transparent; }

/* Resident petition — chip gently nudges for attention while one is pending. */
.chip.petition-chip.nudge { animation: petition-nudge 1.8s ease-in-out infinite; }
@keyframes petition-nudge {
  0%, 100% { transform: none; box-shadow: none; }
  50% { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}

/* Petition card — a little scroll of parchment near the top of the tower. */
.petitioncard {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 6px; z-index: 16;
  width: min(400px, calc(100vw - 20px));
  padding: 14px 16px 13px; border-radius: 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}
.petitioncard.show { display: flex; }
.petition-x {
  position: absolute; right: 8px; top: 8px; border: none; background: transparent;
  color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer;
}
.petition-head { font-size: 15px; font-weight: 800; padding-right: 18px; }
.petition-body { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 2px 0; }
.petition-swap {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px; margin: 2px 0; border-radius: 10px; background: var(--surface2);
}
.pet-from { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.pet-arrow { color: var(--accent); font-weight: 800; }
.pet-to { color: var(--accent); font-weight: 800; font-size: 14px; }
.petition-sign { font-size: 11.5px; color: var(--muted); }
.petition-actions { display: flex; gap: 8px; margin-top: 4px; }
.petition-actions .btn { flex: 1; padding: 9px; font-size: 13px; }
.petition-note { font-size: 11.5px; color: var(--gold, #c78a1a); }
@media (max-width: 480px) {
  .petitioncard { left: 6px; right: 6px; width: auto; transform: none; }
}

/* Developer proposal — a named firm pitches an upgrade near the top of the tower. */
.chip.developer-chip.nudge { animation: petition-nudge 1.8s ease-in-out infinite; }
.devcard {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 8px; z-index: 16;
  width: min(430px, calc(100vw - 20px));
  padding: 14px 16px 13px; border-radius: 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}
.devcard.show { display: flex; }
/* Crisis-card choice buttons (reuses .devcard shell). */
.crisis-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.crisis-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; width: 100%; }
.crisis-choice .cc-label { font-weight: 700; font-size: 14px; }
.crisis-choice .cc-note { font-size: 11px; font-weight: 500; opacity: .78; }
.dev-x {
  position: absolute; right: 8px; top: 8px; border: none; background: transparent;
  color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer;
}
.dev-head { display: flex; align-items: center; gap: 11px; padding-right: 18px; }
.dev-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; }
.dev-logo svg { display: block; }
.dev-firm { font-size: 15px; font-weight: 800; line-height: 1.15; }
.dev-tag { font-size: 11.5px; color: var(--muted); font-style: italic; }
.dev-body { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0; }
.dev-swap {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  padding: 8px; border-radius: 10px; background: var(--surface2);
}
.dev-from { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.dev-plus { color: var(--muted); font-weight: 700; }
.dev-arrow { color: var(--accent); font-weight: 800; }
.dev-to { color: var(--accent); font-weight: 800; font-size: 14px; }
.dev-benefits { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-benefit {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
}
.dev-benefit.on { background: color-mix(in srgb, #0a9d90 16%, transparent); color: var(--ink); border-color: color-mix(in srgb, #0a9d90 45%, transparent); font-weight: 700; }
.dev-benefit.off { color: var(--muted); opacity: 0.7; }
.dev-cost { font-size: 12.5px; color: var(--ink); }
.dev-cost b { color: var(--accent); }
.dev-cost .dev-firm-covers { color: var(--muted); }
.dev-actions { display: flex; gap: 8px; margin-top: 2px; }
.dev-actions .btn { flex: 1; padding: 9px; font-size: 13px; }
.dev-note { font-size: 11.5px; color: var(--gold, #c78a1a); }
@media (max-width: 480px) {
  .devcard { left: 6px; right: 6px; width: auto; transform: none; }
}

/* Confetti burst — a celebratory shower over the tower. */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 21; display: none; }
.confetti.show { display: block; }
.confetti-piece {
  position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: .96;
  animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(118vh) rotate(var(--spin, 360deg)); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { animation-duration: .01s !important; opacity: 0 !important; }
  .chip.petition-chip.nudge { animation: none; }
}

/* Measuring tape readout — sits top-right over the tower while 📏 is active. */
.chip#btn-measure.active { background: var(--gold, #ffce54); color: #241f33; border-color: transparent; }
.measure {
  position: absolute; right: calc(10px + env(safe-area-inset-right)); top: 10px;
  display: none; flex-direction: column; gap: 3px; z-index: 12;
  max-width: min(320px, calc(100vw - 20px));
  padding: 9px 12px; border-radius: 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-left: 3px solid #ffce54;
  box-shadow: var(--shadow);
}
.measure.show { display: flex; }
.measure b { font-size: 14px; }
.measure .fits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.measure .fit {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--ink);
}
.measure .fit i { font-style: normal; color: var(--muted); font-weight: 700; }
.measure .fit.locked { opacity: .55; }
@media (max-width: 480px) {
  .measure { left: auto; right: 6px; max-width: min(300px, calc(100vw - 12px)); padding: 8px 10px; }
  .measure b { font-size: 13px; }
}

/* Spot advisor — "what should go here?" card stack. */
.chip#btn-spot.active { background: #6f9bff; color: #0d1020; border-color: transparent; }
.spot {
  position: absolute; right: 10px; top: 10px;
  display: none; flex-direction: column; gap: 6px; z-index: 13;
  width: min(330px, calc(100vw - 20px));
  max-height: min(70%, 520px); overflow-y: auto;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-left: 3px solid #6f9bff;
  box-shadow: var(--shadow);
}
.spot.show { display: flex; }
.spot-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spot-head b { font-size: 14px; }
.spot-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer;
}
.picks { display: flex; flex-direction: column; gap: 8px; }
.pick {
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface2);
}
.pick.best { border-color: #6f9bff; }
.pick-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pick-top b { font-size: 13px; }
.pick-why { display: flex; flex-direction: column; gap: 3px; margin: 5px 0 4px; }
.pick-why span { font-size: 12px; line-height: 1.45; color: var(--ink); }
.pick-impact { font-size: 12px; font-weight: 600; color: var(--teal, #0a9d90); margin-bottom: 6px; }
.pick-build { width: 100%; padding: 7px; font-size: 12.5px; }
@media (max-width: 480px) {
  .spot { left: 6px; right: 6px; width: auto; top: 6px; max-height: 62%; }
}

#toast {
  position: absolute; left: 50%; top: 14px; transform: translate(-50%, -8px);
  background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
  box-shadow: var(--shadow);
}
#toast.show { opacity: .96; transform: translate(-50%, 0); }

.banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
  display: none; flex-direction: column; gap: 10px; align-items: center; text-align: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow); z-index: 15;
  max-width: min(420px, 86vw);
}
.banner.show { display: flex; }
.banner b { font-size: 22px; }
.banner.bad b { color: var(--danger); }
.banner span { color: var(--muted); font-size: 14px; }
.banner.advice { align-items: flex-start; text-align: left; max-width: min(480px, 90vw); }
.banner.advice b { font-size: 18px; }
.banner.advice span { color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.banner-actions { display: flex; gap: 10px; margin-top: 4px; }
.mini.primary-mini { background: var(--accent); color: var(--accent-ink); border-color: transparent; padding: 7px 14px; }

/* Starter hint (auto-shows until a lobby + income unit exist) */
.starter {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  display: none; width: min(430px, calc(100% - 24px));
  background: var(--glass); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 16px 12px; z-index: 8; font-size: 13px; line-height: 1.45; color: var(--ink);
  pointer-events: none;   /* never block placing units underneath */
}
.starter.show { display: block; }
.starter-x { pointer-events: auto; }
.starter > b:first-of-type { display: block; font-size: 15px; margin-bottom: 8px; }
.starter ol { margin: 0; padding-left: 20px; }
.starter li { margin: 3px 0; }
.starter > span { display: block; color: var(--muted); margin-top: 8px; }
.starter-x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px; }

/* Economy panel key/value + ledger */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px dashed var(--border); }
.kv span { color: var(--muted); }
.kv b.neg, .led-row .neg { color: var(--neg); }
.kv b.pos, .led-row .pos { color: var(--money); }
.ledger { margin-top: 4px; }
.led-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }

/* --- Panels (drawers) --- */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
body:has(.panel.open) .backdrop { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .22s ease; z-index: 25;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.panel.open { transform: translateX(0); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.panel-head h2 { margin: 0; font-size: 18px; }
.panel-body { padding: 16px; overflow-y: auto; }
.panel-body h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.panel-body h3:first-child { margin-top: 0; }

/* --- Tower-health dashboard ------------------------------------------------ */
.health-chip { position: relative; overflow: visible; }
.health-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}
.health-chip.all-clear { box-shadow: inset 0 0 0 1.5px var(--teal); }
.health-trends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.health-metric {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.health-metric .m-top { display: flex; align-items: baseline; justify-content: space-between; }
.health-metric .m-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.health-metric .m-val { font-size: 20px; font-weight: 800; }
.health-metric .m-val .m-unit { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.health-metric .m-delta { font-size: 12px; font-weight: 700; }
.m-delta.up { color: var(--teal); }
.m-delta.down { color: var(--danger); }
.m-delta.flat { color: var(--muted); }
.health-track { height: 7px; border-radius: 5px; background: var(--border); overflow: hidden; }
.health-track > span { display: block; height: 100%; border-radius: 5px; transition: width .3s ease; }
.health-alert {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 14px;
  padding: 11px 13px; margin-bottom: 8px; cursor: pointer; transition: transform .08s, background .15s, box-shadow .15s;
}
.health-alert:hover { background: var(--surface); }
.health-alert:active { transform: scale(.98); }
.health-alert .a-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.health-alert .a-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.health-alert .a-sub { font-size: 11px; font-weight: 500; color: var(--muted); }
.health-alert .a-count {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: var(--danger); color: #fff;
}
.health-alert.warn .a-count { background: var(--gold); color: #3a2a00; }
.health-alert.ok { cursor: default; border-style: dashed; }
.health-alert.ok:hover { background: var(--surface2); }
.health-alert.ok .a-count { background: var(--teal); color: #05312d; }
.health-alert.ok .a-ico { filter: grayscale(.2); opacity: .85; }
.health-note { font-size: 12px; color: var(--muted); margin: 2px 0 14px; }
.health-deepclean { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.health-deepclean .btn { width: 100%; }
.health-deepclean .health-note { margin-bottom: 4px; }

/* --- Diagnostic heatmap legend -------------------------------------------- */
#overlay-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 8; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
#overlay-legend .ovl-title { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
#overlay-legend .ovl-bar { width: 150px; height: 8px; border-radius: 5px; }
#overlay-legend .ovl-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 3px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.field select, .field input {
  font-family: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--ink);
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.check input { width: 18px; height: 18px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--border); background: var(--surface2); color: var(--ink);
  border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px;
}
.btn.file { display: inline-grid; place-items: center; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Affordable-later: an action you can tap to hear WHY it's not ready yet (it
   toasts the shortfall) rather than a dead, silently-disabled button. */
.btn.want-funds { opacity: .6; filter: grayscale(.35); }

/* Onboarding overlay */
.onboard { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
.onboard.show { display: flex; }
.onboard-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); width: min(460px, 94vw); padding: 22px 22px 16px; }
.onboard-card h2 { margin: 0 0 10px; font-size: 20px; }
.onboard-card p { margin: 0; color: var(--ink); line-height: 1.5; font-size: 15px; }
.onboard-card p b { color: var(--accent); }
.onboard-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.onboard-dots { display: flex; gap: 6px; }
.onboard-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.onboard-dots .dot.on { background: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.chip.active-chip { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

.shaft-row { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--surface2); }
.shaft-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.shaft-ctl { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.shaft-ctl label { min-width: 62px; font-weight: 600; color: var(--muted); }
.shaft-ctl select { font-family: inherit; font-size: 13px; padding: 5px 8px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper .val { min-width: 18px; text-align: center; font-weight: 700; }
.shaft-note { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--muted); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border-radius: 9px; padding: 8px 10px; }

.save-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.save-actions { display: flex; gap: 6px; }

/* Cloud save code section (top of the 💾 save panel). */
.cloud-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 14px; background: var(--surface2); }
.cloud-box.on { border-color: color-mix(in srgb, var(--teal) 55%, var(--border)); background: color-mix(in srgb, var(--teal) 8%, var(--surface2)); }
.cloud-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.cloud-sub { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cloud-code { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cloud-code b { font-family: ui-monospace, Menlo, monospace; font-size: 20px; letter-spacing: 2px; color: var(--teal); }
.cloud-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cloud-connect { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cloud-in { font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; padding: 6px 8px; width: 120px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.mini { border: 1px solid var(--border); background: var(--surface2); color: var(--ink); border-radius: 9px; padding: 6px 9px; font-size: 12px; font-weight: 600; }
.mini.danger { color: var(--danger); }
.mini:disabled { opacity: .4; cursor: default; }

/* --- Responsive: iPad / iPhone ------------------------------------------ */
/* Tablet portrait & below: drop the brand title, put stats on their own row. */
@media (max-width: 1100px) {
  .brand .title { display: none; }
  #topbar { gap: 6px 8px; padding: 6px 10px; }
  /* Below this width brand+stats+both pills stop fitting cleanly on one line
     (a pill would wrap off on its own). Flatten the stat + chip containers so
     everything flows as one dense, gap-filling stream — stats, then pills, then
     chips — instead of leaving half-empty rows or a stranded pill. */
  .stats, .controls { display: contents; }
  .pill.speed { margin-left: 0; }
}
@media (max-width: 900px) {
  #stage { grid-template-columns: 128px 1fr; }
  .tool { padding: 8px 9px; }
}
/* Phones: shrink the header hard so the canvas keeps the real estate.
   Hide the brand + the zoom pill (pinch-zoom works) + the dev-only debug chip. */
@media (max-width: 480px) {
  #topbar { padding: 6px 8px; gap: 6px 8px; }
  .brand { display: none; }
  #stage { grid-template-columns: 98px 1fr; }
  /* Flatten the stats + chip containers into one dense flex stream (stats, then
     speed pill, then chips) so nothing gets its own half-empty full-width row. */
  .stats, .controls { display: contents; }
  .stat .label { font-size: 9px; }
  .stat .val { font-size: 13px; }
  #topbar .chip, .chip { min-width: 33px; min-height: 33px; font-size: 15px; border-radius: 10px; }
  .pill button { min-width: 27px; min-height: 31px; padding: 5px 6px; font-size: 12px; }
  .pill.zoom, #btn-debug { display: none; }
  .pill.speed { margin-left: 0; }
  .tool { padding: 7px 8px; }
  .tool .tool-name { font-size: 12px; }
  .tool .tool-sub { font-size: 10px; }
  .tool .tool-dim { font-size: 9px; }
  .tool .tool-hint { font-size: 9.5px; }
}
/* ========================================================================== */
/* iPhone PORTRAIT — a native-app shell: status strip / tower / tab bar.       */
/*                                                                            */
/* Everything below is scoped to BOTH the media query and the .phone-portrait */
/* body class that phone.js adds, so the moved controls (✋ 🗑 speed pill, the  */
/* whole #toolbar) can never pick up phone styling while they're sitting in    */
/* their desktop homes mid-rotation.                                          */
/*                                                                            */
/* The whole screen is a fixed 3-row grid — nothing scrolls but the tower      */
/* (vertically, which is the game) and the inside of a sheet.                  */
/* ========================================================================== */
.sheet { display: none; }
.sheet-backdrop { display: none; }

@media (max-width: 540px) and (orientation: portrait) {
  body.phone-portrait #app { grid-template-rows: auto 1fr auto; }

  /* --- Status strip: one line, never wraps, never scrolls --- */
  body.phone-portrait #topbar {
    flex-wrap: nowrap; gap: 0 7px; padding: 3px 9px; min-height: 0;
  }
  body.phone-portrait .brand { display: none; }
  body.phone-portrait .stats {
    display: flex; flex-direction: row; align-items: center;
    flex: 1 1 auto; min-width: 0; gap: 0 8px; overflow: hidden;
  }
  body.phone-portrait .stat { flex-direction: row; align-items: baseline; flex: 0 0 auto; }
  body.phone-portrait .stat .label { display: none; }
  body.phone-portrait .stat .val { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
  /* Icons replace the dropped labels — no markup change, so hud.update() is
     free to keep rewriting just the numbers. */
  body.phone-portrait #funds::before { content: '💰'; margin-right: 2px; font-weight: 400; }
  body.phone-portrait #population::before { content: '👥'; margin-right: 2px; font-weight: 400; }
  body.phone-portrait .val.stars { font-size: 11px; letter-spacing: 0; }
  body.phone-portrait #clock { font-size: 11.5px; color: var(--muted); }
  /* Mood keeps the face + %, drops the bar; the ★ progress bar goes entirely. */
  body.phone-portrait .mood-track, body.phone-portrait .star-next { display: none; }
  body.phone-portrait .mood-pct { font-size: 12px; min-width: 0; }
  body.phone-portrait .mood-face { font-size: 13px; }
  body.phone-portrait .mood-row { gap: 2px; }

  /* Alert chips + undo + health stay up top (they're hidden until they matter);
     everything else has moved to the tab bar or the More sheet. */
  body.phone-portrait .controls {
    display: flex; flex: 0 0 auto; flex-basis: auto; gap: 4px; margin-left: auto;
  }
  body.phone-portrait #topbar .chip, body.phone-portrait .controls .chip {
    min-width: 29px; min-height: 29px; font-size: 14px; border-radius: 9px;
  }
  body.phone-portrait .offline-chip {
    min-height: 29px; padding: 0 6px; font-size: 0; /* icon only — the label costs width */
  }
  body.phone-portrait .offline-chip::before { content: '⚡'; font-size: 13px; }
  body.phone-portrait .pill.zoom, body.phone-portrait #btn-debug { display: none; }

  /* --- Stage: the toolbar column is gone; the tower gets the whole width --- */
  body.phone-portrait #stage { grid-template-columns: 1fr; }

  /* --- Bottom tab bar --- */
  body.phone-portrait .phonebar {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 5px 9px calc(5px + env(safe-area-inset-bottom));
    background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  body.phone-portrait .pb-slot { display: flex; align-items: center; gap: 6px; }
  /* One tab look for the two new buttons AND the two real chips moved in here. */
  body.phone-portrait .pb,
  body.phone-portrait #pb-tools .chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-width: 58px; min-height: 46px; padding: 4px 2px;
    font-size: 19px; line-height: 1;
    border: 1px solid var(--border); border-radius: 13px;
    background: var(--surface); color: var(--ink);
  }
  body.phone-portrait .pb::after,
  body.phone-portrait #pb-tools .chip::after {
    font-size: 9.5px; font-weight: 700; letter-spacing: .01em; opacity: .85;
  }
  body.phone-portrait #pb-build::after { content: 'Build'; }
  body.phone-portrait #pb-more::after { content: 'More'; }
  body.phone-portrait #btn-hand::after { content: 'Move'; }
  body.phone-portrait #btn-delete::after { content: 'Delete'; }
  body.phone-portrait #pb-build.active,
  body.phone-portrait #pb-more.active {
    background: var(--accent); color: var(--accent-ink); border-color: transparent;
  }
  body.phone-portrait .pb:active, body.phone-portrait #pb-tools .chip:active { transform: translateY(1px); }
  /* Speed pill rides in the bar between Delete and More. */
  body.phone-portrait #pb-speed .pill.speed { margin: 0; }
  body.phone-portrait #pb-speed .pill button { min-width: 25px; min-height: 40px; padding: 4px; font-size: 11.5px; }

  /* --- Bottom sheets (build palette + the rest of the panels) --- */
  body.phone-portrait .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; flex-direction: column;
    max-height: 74dvh;
    background: var(--surface); border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.28);
    transform: translateY(101%); transition: transform .24s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.phone-portrait .sheet.open { transform: translateY(0); }
  body.phone-portrait .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 29;
    background: rgba(0,0,0,.38); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.phone-portrait .sheet-backdrop.show { opacity: 1; pointer-events: auto; }
  .sheet-head {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 8px; border-bottom: 1px solid var(--border);
  }
  .sheet-head h2 { margin: 0; font-size: 16px; }
  .sheet-grip {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--border);
  }
  .sheet-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }

  /* The real #toolbar, moved in: fills the sheet and scrolls inside it. Cards go
     two-up, since the sheet is four times wider than the old sidebar column. */
  body.phone-portrait #build-sheet-body #toolbar {
    flex: 1 1 auto; width: 100%; border-right: 0; padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body.phone-portrait #toolbar .tool-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  body.phone-portrait #toolbar .tool-group-label { grid-column: 1 / -1; }
  body.phone-portrait #toolbar .toolbar-pinned { top: -8px; margin: -8px -10px 8px; }
  body.phone-portrait #toolbar .tool.pinned-floor { align-self: start; }
  body.phone-portrait #toolbar .tool { padding: 8px 9px; padding-right: 24px; }
  body.phone-portrait .cat-filter button { width: 30px; height: 30px; font-size: 15px; }
  body.phone-portrait .star-filter button { padding: 6px 4px; font-size: 12px; }

  /* More sheet: the long tail of panels as a labeled grid, not a chip soup. */
  .more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; padding: 12px 8px; overflow-y: auto; }
  .more-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  body.phone-portrait .more-cell .chip { min-width: 44px; min-height: 44px; font-size: 20px; border-radius: 13px; }
  body.phone-portrait .more-cell .chip.mute-chip { font-size: 11px; padding: 0 8px; min-width: 60px; }
  .more-lbl { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.15; }

  /* On-canvas cards: keep them clear of the tab bar and inside the safe area.
     The tab bar takes the bottom strip, so the two floating widgets that live
     down there get stacked deliberately — the Drag toggle on the floor, the
     ghost's "why not" pill above it, and the pill lifted over the toggle's
     blurred glass, which otherwise clipped it (its backdrop-filter makes a
     stacking context that painted over an unlayered sibling). */
  body.phone-portrait .starter { max-height: 62%; overflow-y: auto; }
  body.phone-portrait .dragmode { bottom: 8px; }
  body.phone-portrait #hint { bottom: 60px; z-index: 12; }
}

/* Short screens (landscape phones): compact vertically — drop stat labels. */
@media (max-height: 460px) {
  #topbar { padding: 5px 10px; gap: 6px; }
  .stat .label { display: none; }
  .stat .val { font-size: 13px; }
  .pill.zoom, #btn-debug { display: none; }
}