/* Palette and sizes sampled from the reference concept (navy + cyan/teal, mint for live) */
:root {
  --bg: #060a1b; /* page, header, footer */
  --bg-2: #080a27; /* the band under the header */
  --panel: #0a0e21; /* docks: opaque */
  --panel-solid: #0a0e21;
  --panel-2: #10152c; /* housemate cards, rows, inputs */
  --panel-3: #131a35; /* feed cards */
  --line: #232a51; /* panel border */
  --line-2: #222649; /* card + search border */
  --line-hi: #2c4a7c; /* active tab border */
  --text: #e6eaf8;
  --text-hi: #f9fcff;
  --muted: #8b91c0; /* status lines, stat labels */
  --dim: #5f6897; /* times "now / 2m" */
  --name: #8ee6f0; /* housemate names, handles */
  --tab: #4fb3d0; /* inactive tab text */
  --tab-bg: #0c1532;
  --tab-line: #23406a;
  --tab-on-bg: #0b3a64;
  --tab-on-ink: #8eeaf7;
  --live-bg: #065c3e;
  --live-line: #12704f;
  --live-ink: #e5fffe;
  --mint: #4fd1a5; /* "LIVE WORLD" text */
  --live-dot: #19c98a;
  --online: #38efc3;
  --sig: #38a87b;
  --up: #4fd8a6;
  --down: #e2788f;
  --flat: #b9c2dc;
  --ok: #4fd8a6;
  --bad: #e2788f;
  --warn: #f5c84b;
  --gold: #f8d000; /* PAPER */
  --gold-ink: #1a1300;
  --badge: #1fdb8c; /* "HOUSEMATES 22" */
  --lime: #4cce40; /* "NEW COINS 7" */
  --accent: #5fd0ea; /* focus rings, hover outlines */
  --hl: #0b3858; /* feed "marker" behind quoted text */
  --hl-ink: #a9ddf6;
  --bubble: #bfe7fa; /* speech bubbles */
  --bubble-ink: #10233a;
  --crumb: #9aa6dc;
  --logo-bg: #1f1a45;
  --logo: #f5c814;
  --head-h: 60px;
  --foot-h: 52px;
  --gut: 12px;
  --dock-l: 368px;
  --dock-r: 330px;
  --r-panel: 12px;
  --r-card: 7px;
  --r-tab: 6px;
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pixel: "Silkscreen", "IBM Plex Mono", monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 var(--font);
}

a {
  color: #7fc8ec;
}

button {
  font: inherit;
  color: inherit;
}

h2,
h3,
h4 {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 11px;
}

/* ── top bar (60 px): logo, title + tagline, PAPER, stats, the live pill, the breadcrumb ── */
/* When it runs out of room, ui.js (fitRow) adds fit1…fit6 and the rules near the end of this file
   drop the least important pieces first: breadcrumb, "Tokens watched", the pill's long text, … */
.topbar {
  position: relative;
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 34px;
  height: var(--head-h);
  padding: 0 22px;
  background: var(--bg);
  border-bottom: 1px solid #1f2a50;
  box-shadow: 0 8px 18px -12px #1b3a9a55;
  overflow: hidden;
  z-index: 10;
}

.topbar > * {
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.logo {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  image-rendering: pixelated;
}

.brand-text {
  min-width: 0;
  margin-left: 14px;
}

.brand-name {
  font: 700 18px/1 var(--pixel);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-hi);
  white-space: nowrap;
}

.brand-sub {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.2;
  color: #7e86b4;
  white-space: nowrap;
}

#ticker {
  color: #9aa8d6;
  font-weight: 600;
}

.badge {
  flex: none;
  align-self: flex-start;
  margin: 2px 0 0 14px;
  font: 700 11px/1 var(--pixel);
  letter-spacing: 0.1em;
  color: var(--gold-ink);
  background: var(--gold);
  padding: 7px 8px 6px 9px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #ffe34d, 0 2px 0 #9c7f00;
}

.stats {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 0 36px;
  min-width: 0;
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat .k {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat .v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats .stat {
  flex: none;
}

.stats .stat .k {
  font: 500 10px/1.3 var(--font);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.stats .stat .v {
  font: 600 15px/1.35 var(--font);
  color: var(--text-hi);
  margin-top: 2px;
}

.pills {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* the breadcrumb: shrinks first (huge flex-shrink) and hides when it no longer fits whole (fit1) */
.crumbs {
  flex: 0 1000 auto;
  min-width: 0;
  margin-left: 18px;
  overflow: hidden;
  white-space: nowrap;
  font: 400 14px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crumb);
}

.crumbs i {
  font-style: normal;
  margin: 0 12px;
  color: #6f7bb3;
}

.pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--dim);
  vertical-align: 1px;
}

.pill.ok {
  color: var(--text);
}
.pill.ok::before {
  background: var(--ok);
}
.pill.warn::before {
  background: var(--warn);
}
.pill.bad {
  color: var(--bad);
  border-color: rgba(251, 113, 133, 0.5);
}
.pill.bad::before {
  background: var(--bad);
}

/* ── the 3D world fills the rest ─────────────────────────────────── */
.world {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* The stage is the visible city between the two docks: the canvas and the overlay live in it, so the
   renderer only draws what can be seen (world.js sizes itself from this box). Desktop geometry in the
   "GTA skin" block at the end; phones and TV-clean use the whole world. */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-2);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  cursor: grab;
  touch-action: none;
}

#scene:active {
  cursor: grabbing;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.overlay > * {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.tag {
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px 4px;
  border: 1px solid var(--c);
  border-radius: 3px;
  color: var(--c);
  background: #050a1a;
  white-space: nowrap;
  z-index: 2;
}

.tag.selected {
  background: var(--c);
  color: #0b0a16;
}

.bubble {
  max-width: 250px;
  width: max-content;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fbfaff;
  color: #17142b;
  font-size: 11.5px;
  line-height: 1.35;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.bubble.tmpl {
  background: #e7e3f5;
  outline: 1px dashed #8b86a8;
  outline-offset: -3px;
}

.bubble.diary {
  background: #2a1438;
  color: #f5e8ff;
  border: 1px solid #a855f7;
}

.bubble .rec {
  display: inline-block;
  margin-right: 6px;
  padding: 0 4px;
  font-family: var(--pixel);
  font-size: 8px;
  color: #fff;
  background: #dc2626;
  border-radius: 2px;
  vertical-align: 1px;
}

.room-label {
  font-family: var(--pixel);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.floor-badge {
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--pixel);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #2f6d92;
  background: #050a1ab3;
  color: #bfe7fa;
}

.floor-badge.on {
  background: #7fc8ec;
  color: #06122a;
}

.place-hover {
  font-family: var(--pixel);
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
  color: #1a1300;
  background: #fbbf24;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  z-index: 6;
}

.toast {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  max-width: min(640px, calc(100% - 32px));
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  background: #0a0e21e6;
  border: 1px solid var(--line);
  z-index: 7;
}

.place-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.place-head h3 {
  font-size: 15px;
  color: var(--gold);
  margin-top: 2px;
}

.place-type {
  font-family: var(--pixel);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1300;
  background: var(--gold);
  padding: 1px 5px;
  border-radius: 3px;
}

.place-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 10px 0;
  font-size: 12px;
}

.place-stats dt {
  color: var(--dim);
}

.place-stats dd {
  margin: 0;
  text-align: right;
}

.guests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── floating docks ──────────────────────────────────────────────── */
.dock {
  position: absolute;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
  pointer-events: none;
}

.dock > * {
  pointer-events: auto;
}

.dock.left {
  left: 12px;
  width: 316px;
  max-height: calc(100% - 80px);
}

.dock.right {
  right: 12px;
  width: 350px;
  bottom: 64px;
}

/* opaque: no backdrop blur (it re-blurred the canvas behind both docks every frame) */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 12px;
  min-width: 0;
  box-shadow: 0 0 0 1px #05081a, 0 12px 30px -14px #000c, inset 0 1px 0 #ffffff08;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.panel-head h2 {
  font-size: 13px;
}

.dock-close {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--muted);
}

.hint {
  color: var(--dim);
  font-size: 11px;
  margin: 8px 2px 0;
}

.mates {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.mate {
  display: grid;
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--panel-2);
  border-left: 3px solid var(--c);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
}

.mate:hover,
.mate:focus-visible,
.mate.selected {
  background: #151b38;
  outline: none;
}

.mate .rank {
  color: var(--dim);
  font-family: var(--pixel);
  font-size: 11px;
}

.portrait {
  image-rendering: pixelated;
  display: block;
}

.mate .portrait {
  width: 24px;
  height: 30px;
}

.who {
  min-width: 0;
}

.mate .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mate .role {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mate .bags {
  font-size: 11px;
  color: var(--gold);
}

.nums {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.nums .equity,
.nums .record {
  color: var(--muted);
  font-size: 11px;
}

.pnl {
  font-weight: 600;
}

.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.flat {
  color: var(--flat);
}

/* ── live feed ───────────────────────────────────────────────────── */
.feed-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.tabs {
  display: flex;
  gap: 4px;
}

.tabs button {
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
}

.tabs button.on {
  color: var(--text);
  background: var(--panel-2);
}

.feed {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  flex: 1;
}

.feed[data-filter="trades"] > li:not([data-kind="trades"]),
.feed[data-filter="talk"] > li:not([data-kind="talk"]),
.feed[data-filter="diary"] > li:not([data-kind="diary"]) {
  display: none;
}

.ev {
  position: relative;
  padding: 7px 42px 7px 9px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid transparent;
}

.ev time {
  position: absolute;
  top: 7px;
  right: 9px;
  color: var(--dim);
  font-size: 10.5px;
}

.ev.closed.win {
  border-color: rgba(52, 211, 153, 0.4);
}
.ev.closed.loss {
  border-color: rgba(251, 113, 133, 0.35);
}
.ev.diary {
  background: rgba(46, 20, 62, 0.9);
  border-color: rgba(168, 85, 247, 0.4);
}
.ev.system {
  background: transparent;
  border: 1px dashed var(--line);
}

.ev-sub,
.ev-topic,
.ev-links {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
}

.ev-thesis {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 4px;
  font-style: italic;
}

.ev-quote {
  margin: 4px 0 0;
  color: var(--hl-ink);
}

.token-name {
  color: var(--text);
}

.lines {
  margin-top: 6px;
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.who-link {
  font-weight: 600;
  color: var(--c);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.who-link:hover {
  text-decoration: underline;
}

.chip {
  font-size: 11px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}

.tmpl {
  margin-left: 6px;
  font-size: 9.5px;
  color: var(--dim);
  border: 1px dashed var(--dim);
  border-radius: 3px;
  padding: 0 3px;
  vertical-align: 1px;
}

/* ── agent panel ─────────────────────────────────────────────────── */
.agent {
  max-height: 58%;
  overflow: auto;
  border-top: 3px solid var(--c, var(--line));
}

.agent-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.agent-head .portrait {
  width: 48px;
  height: 60px;
  background: var(--panel-2);
  border-radius: 6px;
  padding: 3px;
}

.agent-head h3 {
  font-size: 15px;
  color: var(--c);
}

.agent-head .role {
  color: var(--muted);
  font-size: 11.5px;
}

.agent-actions {
  display: flex;
  gap: 6px;
}

.agent-actions button {
  cursor: pointer;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 4px 8px;
}

.agent-actions button.on {
  background: var(--c);
  color: #0b0a16;
  border-color: var(--c);
}

.tagline {
  margin: 2px 0 0;
  font-style: italic;
  font-size: 11.5px;
}

.agent-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.agent-stats .stat {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 4px 6px;
}

.agent section {
  margin-top: 10px;
}

.agent h4 {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.agent p {
  margin: 3px 0;
  font-size: 12px;
}

.agent ul {
  margin: 3px 0;
  padding-left: 16px;
  font-size: 12px;
}

.agent details {
  color: var(--muted);
  font-size: 12px;
}

.bags-list,
.notebook {
  list-style: none;
  padding-left: 0 !important;
}

.trades {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.trades th {
  text-align: left;
  color: var(--dim);
  font-weight: 500;
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
}

.trades td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(42, 38, 72, 0.5);
}

/* ── the floor bar (in the footer, see "GTA skin" below) ──────────── */
.floorbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  margin-top: 4px;
  padding: 0 6px;
  border-radius: 10px;
  background: #070b1a;
  border: 1px solid #242a4f;
}

.floorbar > * {
  flex-shrink: 0;
}

.floorbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  font: 400 11px/1 var(--pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: #97a0c8;
}

.floorbar button:hover {
  color: var(--text-hi);
  background: #11173a;
}

.floorbar button.on {
  background: #1e2550;
  color: #fbffff;
  box-shadow: inset 0 1px 0 #ffffff12;
}

.floorbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.floorbar .sep {
  width: 1px;
  height: 18px;
  background: #1f2346;
  margin: 0 8px;
}

.floorbar .tv-ico {
  display: block;
  flex: none;
}

.note {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: min(420px, calc(50% - 170px));
  font-size: 11px;
  color: var(--muted);
  z-index: 4;
  text-shadow: 0 1px 0 #000;
}

.note .meta {
  display: block;
  color: var(--dim);
  margin-top: 2px;
}

.hints {
  position: absolute;
  right: 14px;
  bottom: 18px;
  max-width: calc(50% - 170px);
  text-align: right;
  font-size: 10.5px;
  color: var(--dim);
  z-index: 4;
  text-shadow: 0 1px 0 #000;
}

.mobile-tabs {
  display: none;
}

/* ── left dock tabs: housemates · new coins · radar ──────────────── */
.mates {
  overflow: hidden;
}

.dock-tabs {
  flex-wrap: wrap;
}

.dock-tabs button {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.unread {
  font-family: var(--font);
  font-size: 9px;
  line-height: 1;
  color: #0b0a16;
  background: #a3e635;
  border-radius: 8px;
  padding: 2px 4px;
}

.pane {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.pane[hidden] {
  display: none;
}

.pane-note {
  color: var(--dim);
  font-size: 11px;
  margin: 0 2px 6px;
}

.coin-img {
  display: block;
  flex: none;
  border-radius: 5px;
  image-rendering: pixelated;
  background: #141a36;
  object-fit: cover;
}

.coins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.coin {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 7px 7px;
  border-radius: 7px;
  background: var(--panel-2);
  cursor: pointer;
  overflow: hidden;
  animation: coin-in 0.5s ease-out;
}

.coin:hover,
.coin:focus-visible,
.radar-row:hover,
.radar-row:focus-visible,
.call:hover {
  outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

@keyframes coin-in {
  from {
    background: rgba(163, 230, 53, 0.28);
    transform: translateY(-4px);
  }
}

.coin-main {
  min-width: 0;
}

.coin-name,
.coin-sub,
.radar-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-name b {
  color: #d9f99d;
}

.coin-full {
  color: var(--muted);
}

.coin-sub {
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.coin-mc {
  color: var(--text);
}

.coin-tags {
  color: #93c5fd;
  margin-left: 4px;
}

.coin-flag {
  color: var(--warn);
  margin-left: 6px;
}

.coin-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
}

.coin-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #a3e635);
  transition: width 0.6s;
}

.coins-more {
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: 6px;
  font-family: var(--pixel);
  font-size: 11px;
  color: #0b0a16;
  background: #a3e635;
  border: 0;
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
}

/* ── radar ───────────────────────────────────────────────────────── */
.radar {
  display: grid;
  gap: 10px;
}

.radar-board h4 {
  font-size: 12px;
}

.radar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 6px;
  margin-bottom: 5px;
  border-left: 3px solid var(--c, var(--line));
}

.radar-who .portrait {
  width: 24px;
  height: 30px;
}

.radar-status {
  color: var(--muted);
  font-size: 11px;
  margin: 2px 2px 6px;
}

.radar-list,
.calls-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.radar-row {
  display: grid;
  grid-template-columns: 12px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--panel-2);
  cursor: pointer;
}

.radar-row .rank {
  color: var(--dim);
  font-size: 11px;
  text-align: right;
}

.radar-row.skip {
  opacity: 0.5;
}

.radar-main {
  min-width: 0;
}

.radar-line b {
  color: #d9f99d;
}

.radar-metric {
  color: var(--muted);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

.radar-reason {
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radar-row .chip {
  color: #04261a;
  background: var(--badge);
}

.radar-row.skip .chip {
  background: var(--dim);
}

.call {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--panel-2);
  font-size: 11px;
  cursor: pointer;
}

.call-thesis {
  color: var(--muted);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── coin panel ──────────────────────────────────────────────────── */
.coin-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}

.coin-head h3 {
  font-size: 15px;
  color: #d9f99d;
  overflow-wrap: anywhere;
}

.coin-head .role {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.coin-desc {
  color: var(--muted);
  font-size: 12px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 7.5em;
  overflow-y: auto;
}

.coin-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ── floating trade text: pops out, rises, fades (MMO damage numbers) ── */
.floater {
  font-family: var(--pixel);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  color: #4ade80;
  --o: #03170b;
  text-shadow: 2px 0 0 var(--o), -2px 0 0 var(--o), 0 2px 0 var(--o), 0 -2px 0 var(--o), 2px 2px 0 var(--o), -2px 2px 0 var(--o), 2px -2px 0 var(--o), -2px -2px 0 var(--o), 0 4px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transform-origin: 50% 100%;
  z-index: 5;
}

.floater .sub {
  display: block;
  margin-top: 3px;
  font-size: 0.62em;
  color: #f8fafc;
}

.floater.buy {
  color: #4ade80;
}

.floater.sell,
.floater.down {
  color: #fb7185;
  --o: #2a0509;
}

.floater.up {
  color: #86efac;
}

.floater.s {
  font-size: 12px;
}

.floater.l {
  font-size: 19px;
}

.floater.xl {
  font-size: 25px;
  color: #fde047;
  --o: #3b2102;
}

.floater.xl.sell {
  color: #f97316;
}

.floater.fee {
  color: #fde047;
  --o: #3b2102;
}

.floater.grad {
  color: #c4b5fd;
  --o: #1e1b4b;
}

.floater.transfer {
  color: #7dd3fc;
  --o: #082f49;
}

.floater.burn {
  color: #fb923c;
  --o: #431407;
}

.floater.emote {
  font-size: 22px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

/* ── KOL Tower: name tags, feed, panel ──────────────────────────── */
.kol-tag {
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px 3px;
  border: 1px solid var(--c);
  border-radius: 3px;
  color: #fef3c7;
  background: #050a1a;
  white-space: nowrap;
  z-index: 2;
}

.feed[hidden] {
  display: none;
}

.ev.kol.win {
  border-color: rgba(34, 197, 94, 0.35);
}

.ev.kol.loss {
  border-color: rgba(244, 63, 94, 0.3);
}

.ev time {
  font-variant-numeric: tabular-nums;
}

.coin-link {
  font: inherit;
  font-weight: 600;
  color: #d9f99d;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.coin-link:hover {
  text-decoration: underline;
}

.kol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
}

.kol-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--panel-2);
  border-left: 3px solid var(--c);
  cursor: pointer;
}

.kol-list li:hover {
  outline: 1px solid rgba(251, 191, 36, 0.5);
}

.kol-list .rank {
  color: var(--dim);
}

.kol-trades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 12px;
}

/* ── house token: status card and the waterfall of on-chain operations ── */
.token-card {
  margin-bottom: 8px;
}

.token-card h4 {
  font-size: 12px;
  margin-bottom: 4px;
}

.token-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.token-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 4px;
}

.ops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}

.op {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--panel-2);
  border-left: 3px solid var(--dim);
  font-size: 11.5px;
  animation: op-in 0.45s ease-out;
}

.op.buy {
  border-left-color: #22c55e;
}

.op.sell {
  border-left-color: #f43f5e;
}

.op.payout {
  border-left-color: #facc15;
  background: rgba(250, 204, 21, 0.08);
}

.op.grad {
  border-left-color: #a78bfa;
}

.op.transfer {
  border-left-color: #38bdf8;
}

.op.burn {
  border-left-color: #fb923c;
}

.op.big {
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.35);
}

.op-main {
  min-width: 0;
}

.op-head {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.op.buy .op-head {
  color: #86efac;
}

.op.sell .op-head {
  color: #fda4af;
}

.op.payout .op-head {
  color: #fde047;
}

.op-sub {
  color: var(--dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op time,
.op-tx {
  color: var(--dim);
  font-size: 10px;
}

@keyframes op-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
    background: rgba(163, 230, 53, 0.25);
  }
}

.ev.fee {
  border-color: rgba(250, 204, 21, 0.35);
}

/* ── phones and narrow windows: docks become bottom sheets ───────── */
@media (max-width: 900px) {
  .topbar {
    padding: 6px 12px;
    gap: 6px 14px;
  }
  .stats {
    order: 3;
    flex-basis: 100%;
    gap: 2px 14px;
  }
  .stat .k {
    font-size: 9px;
  }
  .dock {
    display: none;
    left: 8px !important;
    right: 8px !important;
    top: auto;
    bottom: 58px;
    width: auto !important;
    max-height: 62%;
  }
  .dock.open {
    display: flex;
  }
  .dock.right .feed-panel {
    max-height: 100%;
  }
  .dock-close {
    display: block;
  }
  .note,
  .hints {
    display: none;
  }
  .mobile-tabs {
    display: flex;
    gap: 6px;
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 6;
  }
  .mobile-tabs button {
    font-family: var(--pixel);
    font-size: 12px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .agent-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── holder agents ─────────────────────────────────────────────────── */
.cta,
.cta-inline {
  font-family: var(--pixel);
  font-size: 11px;
  color: #1a2e05;
  background: #a3e635;
  border: 0;
  border-radius: 6px;
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.cta:hover,
.cta-inline:hover {
  background: #bef264;
}
.cta:disabled,
.cta-inline:disabled {
  opacity: 0.6;
  cursor: wait;
}
.topbar .cta {
  margin-left: auto;
  margin-right: 10px;
}
.holder-rules p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.holder-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.holder-stats b {
  color: var(--text);
}
.holder-mine {
  margin: 10px 0;
}
.holder-me {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 0;
  border-left: 3px solid var(--c);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.holders {
  list-style: none;
  margin: 0;
  padding: 0;
}
.holders .mate.inactive {
  opacity: 0.55;
}
.holders .empty {
  font-size: 12px;
  padding: 8px 2px;
}
.kol-tag.holder-tag {
  font-size: 9px;
  opacity: 0.9;
}
dialog.join {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
dialog.join::backdrop {
  background: rgba(5, 4, 12, 0.65);
}
dialog.join header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
dialog.join header button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.join-body p {
  font-size: 12px;
  line-height: 1.5;
}
.wallets {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.wallet-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.wallet-btn:hover {
  border-color: var(--accent);
}
.join-form {
  display: grid;
  gap: 8px;
}
.join-form label,
.join-form .label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.join-form input[type="text"],
.join-form input:not([type]) {
  font: inherit;
  color: var(--text);
  background: #0c1128;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
}
.join-form .styles {
  display: grid;
  gap: 6px;
}
.join-form label.style {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  color: var(--text);
  background: var(--panel-2);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
}
.join-form label.style span {
  grid-column: 2;
}
.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  cursor: pointer;
}
.swatch.on {
  border-color: #f8fafc;
}
.join-form .error a {
  color: #bef264;
}
@media (max-width: 900px) {
  .topbar .cta {
    font-size: 10px;
    padding: 6px 8px;
  }
}
.join-form .error,
.join-body .error {
  color: #fb7185;
  font-size: 12px;
  min-height: 1em;
  margin: 4px 0 0;
}

.ev.city .ev-sub {
  color: #fcd34d;
}

.ev.tweet .ev-quote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ev.chat .ev-quote {
  margin: 4px 0 0;
}

/* ── X feed: the running strip under the top bar ─────────────────── */
.xticker {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  padding: 0 0 0 12px;
  background: #050918;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  overflow: hidden;
  z-index: 9;
}
.xticker[hidden] {
  display: none;
}
.xticker-label {
  flex: none;
  font-family: var(--pixel);
  font-size: 10px;
  color: #0b0a18;
  background: #e5e7eb;
  border-radius: 4px;
  padding: 2px 6px;
}
.xticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.xticker-run {
  display: inline-block;
  animation: xticker var(--dur, 90s) linear infinite;
}
.xticker:hover .xticker-run {
  animation-play-state: paused;
}
.xticker-item {
  display: inline-block;
  margin-right: 40px;
  color: var(--text);
  text-decoration: none;
}
.xticker-item b {
  color: #93c5fd;
}
a.xticker-item:hover {
  text-decoration: underline;
}
@keyframes xticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xticker-run {
    animation: none;
  }
  .xticker-track {
    overflow-x: auto;
  }
}

/* ── movable windows (windows.js) ──────────────────────────────────── */
.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}
.float-layer > .panel.floating {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  max-height: none;
  min-width: 240px;
  min-height: 140px;
  resize: both;
  overflow: hidden;
  background: var(--panel-solid, var(--panel));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.float-layer > .panel.floating[hidden] {
  display: none;
}
.panel.floating .panel-head,
.panel.floating .win-tools {
  cursor: move;
  user-select: none;
}
.panel.floating .pane,
.panel.floating .feed,
.panel.floating .panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.panel.floating .kol-feed,
.panel.floating .x-feed {
  flex: 1;
}
.win-btn {
  flex: none;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 5px;
  cursor: pointer;
}
.win-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.win-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 6px;
}
.win-title {
  font-size: 10px;
  color: var(--dim, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.agent > .panel-body {
  min-width: 0;
}
@media (max-width: 900px) {
  .win-btn,
  .win-tools {
    display: none;
  }
}

.xticker.breaking {
  background: #450a0a;
  border-bottom-color: #ef4444;
}
.xticker.breaking .xticker-label {
  background: #ef4444;
  color: #fff;
  animation: blinkLabel 0.8s steps(2) infinite;
}
@keyframes blinkLabel {
  50% {
    opacity: 0.4;
  }
}
.ev.breaking {
  border-left: 3px solid #ef4444;
}

/* ── TV mode, moments, holder play ─────────────────────────────────── */
.tv-caption {
  position: absolute;
  left: 50%;
  top: auto; /* .overlay > * pins top:0; with bottom set too the box would fill the stage height */
  bottom: 70px;
  z-index: 5;
  transform: translateX(-50%);
  max-width: min(640px, 90%);
  padding: 7px 14px;
  font-size: 14px;
  color: #fff;
  background: rgba(8, 6, 20, 0.82);
  border: 1px solid var(--line);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-caption b {
  color: #fca5a5;
  font-family: var(--pixel);
  font-size: 11px;
  margin-right: 6px;
}
#momentsBtn.new {
  color: var(--mint);
  background: #0e2a2c;
}
body.tv-clean .dock,
body.tv-clean .foot,
body.tv-clean .floorbar,
body.tv-clean .note,
body.tv-clean .hints,
body.tv-clean .mobile-tabs,
body.tv-clean .kol-tag,
body.tv-clean .tag {
  display: none !important;
}
dialog.moments {
  width: min(760px, calc(100vw - 32px));
}
.clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.clip {
  margin: 0;
  display: grid;
  gap: 6px;
}
.clip video {
  width: 100%;
  border-radius: 6px;
  background: #000;
  image-rendering: pixelated;
}
.clip figcaption {
  font-size: 12px;
}
.clip-actions {
  display: flex;
  gap: 12px;
  font-size: 12px;
}
.clip-actions a {
  color: #bef264;
}
.holder-play {
  margin: 8px 0;
}
.holder-play:empty {
  display: none;
}
.holder-play h4 {
  font-size: 11px;
  margin: 10px 0 4px;
  color: var(--muted);
}
.play-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.play-row select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: #0c1128;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
}
.play-row button {
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.play-row button:hover {
  border-color: var(--accent);
}
/* Phantom is always offered; when the extension is not in the page it says so */
.wallet-ico {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 13px;
}
.phantom-ico {
  background: #ab9ff2;
}
.wallet-btn.phantom {
  border-color: rgba(171, 159, 242, 0.55);
}
.wallet-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.phantom-help ol {
  margin: 6px 0 6px 18px;
  display: grid;
  gap: 3px;
}

/* Housemates pane: name search and the holder agents under the housemates */
.find-agent {
  width: 100%;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 8px;
}
.find-agent:focus-visible {
  border-color: #2f6d92;
  box-shadow: 0 0 0 3px #5fd0ea22;
  outline: none;
}
.board-head {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 12px 0 6px;
}
.board li[hidden] {
  display: none;
}

/* people in the city: name tags of the nearest ones, and what they shout about our coin */
.citizen-tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--pixel);
  font-size: 8px;
  line-height: 1;
  padding: 1px 3px 2px;
  border-radius: 3px;
  color: #e5e7eb;
  background: #050a1a8c;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
.floater.shout {
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  color: #fef08a;
  --o: #1c1917;
}
body.tv-clean .citizen-tag {
  display: none;
}

/* ── X Base roof: the council (name tags in the city, the Roof tab) ── */
.kol-tag.council-tag {
  font-size: 8px;
  padding: 1px 3px 2px;
  color: #e0f2fe;
  background: rgba(6, 12, 30, 0.8);
  border-color: var(--c, #60a5fa);
  border-bottom-width: 2px;
  opacity: 0.92;
}
.kol-tag.council-tag:hover {
  opacity: 1;
}
/* optional states the world can toggle while a vote runs */
.kol-tag.council-tag.yes {
  box-shadow: 0 0 0 1px #4ade80;
}
.kol-tag.council-tag.no {
  box-shadow: 0 0 0 1px #fb7185;
}
.kol-tag.council-tag.guest {
  border-style: dashed;
}
.feed-panel .tabs {
  flex-wrap: wrap;
}
.roof {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.roof[hidden] {
  display: none;
}
.panel.floating .roof {
  flex: 1;
  min-height: 0;
}
.roof-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.roof-head h4 {
  font-size: 12px;
  color: #93c5fd;
}
.roof-head .coin-link {
  flex: none;
  font-size: 11px;
}
.roof .pane-note {
  margin: 0 2px;
  line-height: 1.45;
}
.roof-guests {
  font-size: 11.5px;
}
.roof-guests[hidden] {
  display: none;
}
.roof-h {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 6px 2px 0;
}
.roof-debate {
  display: grid;
  gap: 6px;
  padding: 8px 9px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid rgba(96, 165, 250, 0.45);
  min-width: 0;
}
.roof-debate.idle {
  border-style: dashed;
  border-color: var(--line);
}
.roof-debate.idle p {
  margin: 0;
}
.roof-vote-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--pixel);
  font-size: 10px;
  color: #93c5fd;
}
.roof-timer {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.roof-post {
  font-size: 12px;
  color: var(--hl-ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roof-post b {
  color: #93c5fd;
}
.roof-idea {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.council-sym {
  color: #d9f99d;
}
.council-who {
  font-weight: 600;
  color: var(--c, #93c5fd);
}
.vote-bars {
  display: grid;
  gap: 4px;
}
.vote-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
  font-family: var(--pixel);
  font-size: 10px;
}
.vote-row b {
  text-align: right;
  font-family: var(--font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.vote-label {
  color: var(--muted);
}
.vote-bar {
  position: relative;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}
.vote-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.vote-row.yes .vote-bar i {
  background: var(--up);
}
.vote-row.no .vote-bar i {
  background: var(--down);
}
.vote-row.yes.reached .vote-bar i {
  background: #a3e635;
  box-shadow: 0 0 8px rgba(163, 230, 53, 0.6);
}
.vote-bar .quorum {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--gold);
}
.roof-need {
  margin-top: -2px;
}
.roof-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.roof-voters:empty {
  display: none;
}
.voter {
  font-size: 10px;
  line-height: 1.3;
  padding: 0 4px;
  border-radius: 3px;
  color: var(--c, var(--text));
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--up);
  white-space: nowrap;
}
.voter.no {
  border-left-color: var(--down);
  opacity: 0.8;
}
.roof-result {
  margin: 0;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid transparent;
  overflow-wrap: anywhere;
}
.roof-result[hidden] {
  display: none;
}
.roof-result.win {
  border-color: rgba(52, 211, 153, 0.4);
}
.roof-result.loss {
  border-color: rgba(251, 113, 133, 0.35);
}
.roof-result.fee {
  border-color: rgba(250, 204, 21, 0.35);
}
.roof-lines,
.roof-launches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.roof-line {
  font-size: 12px;
  line-height: 1.4;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--panel-2);
  overflow-wrap: anywhere;
  animation: coin-in 0.4s ease-out;
}
.roof-line .roof-text {
  color: var(--hl-ink);
}
.roof-line.start,
.roof-line.launch {
  border-left: 3px solid #60a5fa;
}
.roof-line.launch {
  border-left-color: #a3e635;
}
.roof-line .chip {
  font-size: 10px;
}
.roof-empty {
  padding: 4px 2px;
}
.roof-launch {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 7px;
  background: var(--panel-2);
  border-left: 3px solid var(--gold);
}
.roof-launch.live {
  border-left-color: #fb7185;
}
.roof-launch-main {
  min-width: 0;
}
.roof-launch .ev-links {
  margin-top: 0;
}
.chip.paper {
  color: #1a1300;
  background: var(--gold);
}
.chip.live {
  color: #fff;
  background: #e11d48;
}
.ev.council {
  border-left: 3px solid #60a5fa;
}
.ev.council.win {
  border-color: rgba(52, 211, 153, 0.4);
  border-left-color: #a3e635;
}
.ev.council.loss {
  border-color: rgba(251, 113, 133, 0.35);
  border-left-color: #fb7185;
}
.ev.council.fee {
  border-color: rgba(250, 204, 21, 0.35);
  border-left-color: var(--gold);
}
.ev.council .ev-quote {
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .feed-panel .tabs button {
    padding: 4px 7px;
  }
  .vote-bar {
    height: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vote-bar i,
  .roof-line {
    transition: none;
    animation: none;
  }
}

/* ── the city clock in the top bar (feature "Day and night") ───────── */
.stat[hidden] {
  display: none;
}
.city-stat {
  cursor: help;
}
.city-stat .v {
  color: #fde68a;
}

/* ── a housemate's day: 💤 / 🚽 / 🥱 and the bladder meter ─────────── */
.mate .state-ico {
  font-size: 11px;
}
.bladder {
  display: inline-block;
  width: 18px;
  height: 5px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.bladder[hidden] {
  display: none;
}
.bladder i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--up);
  transition: width 0.6s;
}
.bladder.hi i {
  background: var(--gold);
}
.bladder.urgent i {
  background: var(--down);
}
.mate-day {
  margin: 6px 0 0;
  color: var(--muted);
}

/* ── X feed: small post pictures (through /api/ximg) and an honest status ── */
.tweet-thumb {
  display: inline-block;
  margin-top: 6px;
}
.tweet-img {
  display: block;
  width: 112px;
  height: 72px;
  margin-top: 6px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #050918;
}
.tweet-thumb .tweet-img {
  margin-top: 0;
}
.ev.system.x-status .ev-sub {
  color: #fcd34d;
}
.xticker.stale:not(.breaking) .xticker-label {
  background: #4b5563;
  color: #e5e7eb;
}
@media (prefers-reduced-motion: reduce) {
  .bladder i {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ── GTA skin (ref 7.webp) ──
   Header pieces, docks as full-height columns around the stage, chunky tabs and
   the ⋯ menus, housemate and feed cards, feed icons, the footer with the floor
   bar, name tags and bubbles, and the narrow widths. All page UI: 0 draw calls.
   ══════════════════════════════════════════════════════════════════════ */

/* ── header: CTA, the live pill, the X ticker ── */
.topbar .cta {
  margin: 0;
  height: 30px;
  padding: 0 12px;
  font: 400 10.5px/1 var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06210a;
  background: var(--lime);
  border-radius: 6px;
}
.topbar .cta:hover {
  background: #66dc5b;
}
.topbar .cta[hidden] {
  display: none;
}
#pillStream {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 33px;
  padding: 0 16px 0 14px;
  border-radius: 10px;
  border: 1px solid #1a2440;
  background: #070b1c;
  font: 400 10.5px/1 var(--pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
#pillStream::before {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0;
  vertical-align: 0;
  background: radial-gradient(circle, #0a3b2c 0 2px, var(--live-dot) 2.5px);
  box-shadow: 0 0 8px #19c98a99;
  animation: livePulse 2s steps(2) infinite;
}
#pillStream.warn {
  color: var(--warn);
}
#pillStream.warn::before {
  background: radial-gradient(circle, #3b2c06 0 2px, var(--warn) 2.5px);
  box-shadow: 0 0 8px #f5c84b88;
}
#pillStream.bad {
  color: var(--bad);
  border-color: #4a2238;
}
#pillStream.bad::before {
  background: radial-gradient(circle, #3b0a1a 0 2px, var(--bad) 2.5px);
  box-shadow: none;
  animation: none;
}
@keyframes livePulse {
  50% {
    opacity: 0.45;
  }
}
.xticker {
  flex: none;
  background: #050918;
  border-bottom: 1px solid #141d3c;
}
.xticker-label {
  background: #0b2a44;
  color: var(--name);
  border: 1px solid #1d4f74;
}
.xticker-item b {
  color: var(--name);
}
.xticker.stale:not(.breaking) .xticker-label {
  background: #1a2140;
  color: var(--muted);
  border-color: #2a3360;
}

/* fit levels (ui.js fitRow): each one drops or compacts one more piece of a crowded row.
   Top bar: 1 "Tokens watched" · 2 tighter gaps · 3 smaller breadcrumb · 4 no breadcrumb ·
   5 the pill says only LIVE · 6 the CTA says only "get an agent" · 7 no "Agents" ·
   8 the clock without weekday and day · 9 smaller title and gaps */
.topbar.fit1 .stat.opt {
  display: none;
}
.topbar.fit2 {
  gap: 0 26px;
}
.topbar.fit2 .stats {
  gap: 0 24px;
}
.topbar.fit2 .crumbs {
  margin-left: 0;
}
.topbar.fit3 .crumbs {
  font-size: 12px;
  letter-spacing: 0.04em;
}
.topbar.fit3 .crumbs i {
  margin: 0 7px;
}
.topbar.fit4 .crumbs {
  display: none;
}
.topbar.fit5 #pillStream,
.topbar.fit5 #pillStream.warn,
.topbar.fit5 #pillStream.bad {
  height: 28px;
  gap: 7px;
  padding: 0 10px;
  font-size: 0;
}
.topbar.fit5 #pillStream::after {
  content: attr(data-short);
  font-size: 10px;
}
.topbar.fit6 .cta-pre {
  display: none;
}
.topbar.fit7 #agentsStat {
  display: none;
}
.topbar.fit7 .stats {
  gap: 0 18px;
}
.topbar.fit8 .clock-more {
  display: none;
}
.topbar.fit9 {
  gap: 0 16px;
}
.topbar.fit9 .stats {
  gap: 0 14px;
}
.topbar.fit9 .brand-name {
  font-size: 15px;
}
/* still too narrow at the last level: the stats scroll sideways under a fade */
.topbar.fit-over .stats {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.topbar.fit-over .stats::-webkit-scrollbar {
  display: none;
}

/* ── docks: opaque full-height columns, the stage between them (desktop) ── */
@media (min-width: 901px) {
  .dock.left {
    top: 10px;
    bottom: 10px;
    left: var(--gut);
    width: var(--dock-l);
    max-height: none;
  }
  .dock.right {
    top: 10px;
    bottom: 10px;
    right: var(--gut);
    width: var(--dock-r);
  }
  .dock.left > .panel {
    flex: 1;
    min-height: 0;
  }
  .stage {
    left: calc(var(--gut) + var(--dock-l));
    right: calc(var(--gut) + var(--dock-r));
  }
  /* an undocked panel floats over the city (windows.js moves it into .float-layer): the stage takes
     its column back (:has() cannot nest, so this looks at the float layer, not at the empty dock) */
  .world:has(.float-layer > .panel.mates) .stage {
    left: 0;
  }
  .world:has(.float-layer > .feed-panel) .stage {
    right: 0;
  }
  body.tv-clean .stage {
    left: 0;
    right: 0;
  }
  /* the ⧉ of the two tabbed panels lives in their ⋯ menu ("Undock"); a floating panel shows it again */
  .panel-head > .win-btn {
    display: none;
  }
  .panel.floating .panel-head > .win-btn {
    display: inline-block;
  }
  /* a floating window can be made narrow: its tab rows wrap instead of clipping */
  .panel.floating > .panel-head,
  .panel.floating .dock-tabs {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* things that float over the city sit inside the stage */
.note {
  left: 14px;
  bottom: 12px;
  max-width: min(340px, calc(50% - 24px));
  font-size: 10.5px;
  color: #8792be;
}
.hints {
  right: 14px;
  bottom: 12px;
  max-width: min(300px, calc(50% - 24px));
}
.tv-caption {
  bottom: 20px;
  background: #050a1ad9;
}
/* TV mode: the caption takes the bottom of the stage; the note and the camera hints step aside
   (as in TV-clean and on phones), they would sit on or under a long caption */
.stage:has(> .overlay > .tv-caption:not([hidden])) > .note,
.stage:has(> .overlay > .tv-caption:not([hidden])) > .hints {
  display: none;
}

/* ── panel heads and tabs ── */
.panel.mates > .panel-head {
  margin-bottom: 13px;
}
.feed-panel > .panel-head {
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}
.dock-tabs {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.dock-tabs button {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  height: 25px;
  padding: 0 8px;
  gap: 6px;
  font: 400 10px/1 var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tab);
  background: var(--tab-bg);
  border: 1px solid var(--tab-line);
  border-radius: var(--r-tab);
}
.dock-tabs button:hover {
  color: var(--tab-on-ink);
  border-color: var(--line-hi);
}
.dock-tabs button.on,
.tab-more.on > summary {
  color: var(--tab-on-ink);
  background: linear-gradient(#0d4470, var(--tab-on-bg));
  border-color: var(--line-hi);
  box-shadow: inset 0 1px 0 #ffffff14, 0 0 12px -4px #2aa6e0;
}
.feed-panel .tabs {
  gap: 4px;
  flex-wrap: nowrap;
}
.feed-panel .tabs button {
  height: 25px;
  padding: 0 6px;
  font: 600 11px/1 var(--font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tab);
  background: #0b1028;
  border: 1px solid #222743;
  border-radius: var(--r-tab);
}
.feed-panel .tabs button:hover {
  color: #d8f6ff;
}
.feed-panel .tabs button.on {
  color: #d8f6ff;
  background: #0d1d3d;
  border-color: #2f6d92;
}
/* the right panel's title: a green LIVE chip */
.feed-panel .panel-head h2 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 9px 0 7px;
  font: 700 10.5px/1 var(--pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--live-ink);
  background: var(--live-bg);
  border: 1px solid var(--live-line);
  border-radius: 6px;
  box-shadow: 0 0 14px -4px #1fdb8c88;
}
.feed-panel .panel-head h2::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #42de9e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h5v1H0zM0 2h5v1H0zM0 4h3v1H0z'/%3E%3C/svg%3E") center / 8px no-repeat;
  image-rendering: pixelated;
}
/* count badges: HOUSEMATES 22 (green), NEW COINS 7 (lime) */
.unread,
.tab-count {
  flex: none;
  font: 600 10px/1 var(--font);
  letter-spacing: 0;
  padding: 2px 6px;
  border-radius: 8px;
}
.unread {
  color: #0a2a06;
  background: var(--lime);
}
.tab-count {
  color: #04261a;
  background: var(--badge);
}
.unread[hidden],
.tab-count[hidden] {
  display: none;
}

/* the ⋯ menu at the end of a tab row (KOLs / X / Roof, $GTA / Holders, Undock) */
.tab-more {
  position: relative;
  flex: none;
}
/* at the right end of its row, also when the row wraps: the menu opens leftwards from there and stays
   inside the panel (.mates clips; a wrapped ⋯ at the start of a row cut off $GTA / Holders / Undock) */
.dock-tabs .tab-more,
.feed-panel .tab-more {
  margin-left: auto;
}
.tab-more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 25px;
  padding: 0 6px;
  font: 600 13px/1 var(--font);
  color: var(--tab);
  background: var(--tab-bg);
  border: 1px solid var(--tab-line);
  border-radius: var(--r-tab);
  cursor: pointer;
  user-select: none;
}
.tab-more > summary::-webkit-details-marker {
  display: none;
}
.tab-more > summary:hover,
.tab-more[open] > summary {
  color: var(--tab-on-ink);
  border-color: var(--line-hi);
}
.tab-more > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.tab-menu {
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 136px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px #000a;
}
.tab-menu .tabs {
  flex-direction: column;
  gap: 4px;
}
.tab-menu button,
.dock-tabs .tab-menu button {
  flex: none;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.tab-menu .undock-proxy {
  height: 25px;
  margin-top: 2px;
  padding: 0 8px;
  font: 500 11px/1 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--r-tab);
  box-shadow: none;
  cursor: pointer;
}
.tab-menu .undock-proxy:hover {
  color: var(--text-hi);
  border-color: var(--accent);
}
.dock-close {
  color: var(--muted);
  border-color: var(--line);
}

/* ── housemate cards and the search ── */
.find-agent {
  height: 36px;
  margin: 0 0 9px;
  padding: 0 12px;
  font-size: 13px;
  background: #11142c;
  border: 1px solid var(--line-2);
  border-radius: 7px;
}
.find-agent::placeholder {
  color: #7e85b3;
}
.board {
  gap: 8px;
}
.mate {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 13px;
  min-height: 60px;
  padding: 10px 14px 10px 26px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--c);
  border-radius: var(--r-card);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 56px), var(--panel-2);
}
.mate:hover,
.mate:focus-visible,
.mate.selected {
  border-color: #2c3766;
  border-left-color: var(--c);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 56px), #151b38;
}
.mate:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
/* the board order is the rank; W/L is in the agent's panel */
.mate .rank,
.board .mate .record {
  display: none;
}
.mate .name {
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: var(--name);
}
.mate .role {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.nums .pnl {
  font-size: 14px;
  line-height: 19px;
}
.nums .equity {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  color: #8c95c4;
}
/* presence dot on the avatar: up and about, asleep, in the bathroom, tired */
.ava {
  position: relative;
  display: block;
  width: 24px;
}
.ava::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fae2f;
  box-shadow: 0 0 0 2px var(--panel-2);
}
.ava[data-s="sleep"]::after {
  background: #5f6897;
}
.ava[data-s="wc"]::after {
  background: #f5c84b;
}
.ava[data-s="tired"]::after {
  background: #e9a23b;
}

/* other rows reskin through the tokens; only their frame changes */
.coin,
.radar-row,
.call {
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
}
.kol-list li,
.op,
.roof-launch,
.roof-line {
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--r-card);
}
.roof-debate,
.roof-result {
  border-radius: var(--r-card);
}
.coins,
.radar-list,
.calls-list {
  gap: 5px;
}
.agent-stats .stat {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
}
.agent-actions button {
  background: var(--panel-2);
  border-color: var(--line-2);
}
.agent-actions button:hover {
  border-color: var(--accent);
}
.pane,
.feed,
.roof,
.panel-body,
.agent {
  scrollbar-width: thin;
  scrollbar-color: #2a3360 transparent;
}

/* ── feed cards: icon, coloured name, time on the right, quoted text on a marker ── */
.feed {
  gap: 10px;
}
.ev {
  padding: 11px 48px 12px 12px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid #1b2142;
}
.ev-head {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
}
.ev time {
  top: 12px;
  right: 12px;
  font-size: 11.5px;
  color: var(--dim);
}
.ev-quote,
.ev-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 21px;
}
.ev-quote {
  color: var(--hl-ink);
}
.ev.fee {
  border-color: #1d4a44;
  background: #0f1829;
}
.ev.win,
.ev.closed.win {
  border-color: #1d4a44;
}
.ev.loss,
.ev.closed.loss {
  border-color: #4a2238;
}
.ev.diary {
  background: #17123a;
  border-color: #3e2a72;
}
.ev.system {
  background: transparent;
  border: 1px dashed var(--line);
}
.milestone .ev-head b {
  color: var(--up);
}
.tw-author {
  color: var(--text-hi);
}
.hl {
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--hl);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 16-px pixel icons (6×6 art at 2 px a pixel), one data URI each */
.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 3px;
  background: var(--ic, #2a3566) center / 12px no-repeat;
  image-rendering: pixelated;
}
.ico-x {
  --ic: #1d6fa5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0zM5 0h1v1H5zM1 1h1v1H1zM4 1h1v1H4zM2 2h2v2H2zM1 4h1v1H1zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5z'/%3E%3C/svg%3E");
}
.ico-chat {
  --ic: #2b3a6e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 0h4v1H1zM0 1h6v3H0zM1 4h2v1H1zM1 5h1v1H1z'/%3E%3C/svg%3E");
}
.ico-diary {
  --ic: #b13bd0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 1h4v4H0zM5 2h1v3H5zM4 3h1v1H4z'/%3E%3C/svg%3E");
}
.ico-win {
  --ic: #1f9d6b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M2 0h2v1H2zM1 1h4v1H1zM0 2h6v1H0zM2 3h2v3H2z'/%3E%3C/svg%3E");
}
.ico-loss {
  --ic: #c2456a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M2 0h2v3H2zM0 3h6v1H0zM1 4h4v1H1zM2 5h2v1H2z'/%3E%3C/svg%3E");
}
.ico-bag {
  --ic: #a8811f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 0h4v1H1zM1 1h1v1H1zM4 1h1v1H4z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 2h6v4H0zM2 3v2h2V3z'/%3E%3C/svg%3E");
}
.ico-fee {
  --ic: #e8c95a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%233a2a00' d='M1 0h4v1H1zM0 2h6v1H0zM1 4h4v1H1z'/%3E%3C/svg%3E");
}
.ico-rocket {
  --ic: #d9522c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M2 0h2v1H2zM1 1h4v3H1zM0 4h2v2H0zM4 4h2v2H4zM2 4h2v1H2z'/%3E%3C/svg%3E");
}
.ico-city {
  --ic: #d9932a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h2v6H0zM2 1h3v1H2zM3 3h3v3H3z'/%3E%3C/svg%3E");
}
.ico-roof {
  --ic: #2f6fb5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M2 0h2v2H2zM0 2h6v1H0zM0 3h1v2H0zM5 3h1v2H5zM0 5h6v1H0z'/%3E%3C/svg%3E");
}

/* ── footer: brand line · floor bar · quote, brains, signal + ONLINE ── */
.foot {
  flex: none;
  position: relative;
  z-index: 10;
  height: var(--foot-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 0 22px;
  background: var(--bg);
  border-top: 1px solid #1b2342;
}
.foot-brand {
  align-self: center;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8792be;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foot-brand b {
  margin-right: 14px;
  font: 700 11px var(--pixel);
  letter-spacing: 0.14em;
  color: #acc2e3;
}
.foot .floorbar {
  justify-self: center;
}
.foot-status {
  justify-self: end;
  align-self: center;
  display: flex;
  justify-content: flex-end; /* when it overflows, the left end goes first: ONLINE stays */
  align-items: center;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9197c7;
  white-space: nowrap;
}
.foot-status > .pill {
  flex: none;
}
.foot-quote {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foot-ticker {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: #7377a6;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.foot-ticker:hover {
  color: var(--text-hi);
}
/* the feed pill is the signal: four bars and the ONLINE dot (amber, two bars dimmed, while it lags) */
#pillFeed {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #c8f5e8;
}
#pillFeed::before {
  flex: none;
  width: 34px;
  height: 16px;
  margin: 0 8px 0 0;
  border-radius: 0;
  vertical-align: 0;
  background:
    radial-gradient(circle closest-side, var(--online) 80%, transparent 100%) 100% 50% / 7px 7px no-repeat,
    linear-gradient(var(--sig), var(--sig)) 0 100% / 3px 5px no-repeat,
    linear-gradient(var(--sig), var(--sig)) 5px 100% / 3px 8px no-repeat,
    linear-gradient(var(--b3, var(--sig)), var(--b3, var(--sig))) 10px 100% / 3px 11px no-repeat,
    linear-gradient(var(--b4, var(--sig)), var(--b4, var(--sig))) 15px 100% / 3px 15px no-repeat;
}
#pillFeed.warn {
  color: var(--warn);
}
#pillFeed.warn::before {
  --sig: var(--warn);
  --online: var(--warn);
  --b3: #2a3150;
  --b4: #2a3150;
}
#pillBrains {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #9197c7;
  border: 1px solid #1f2850;
  border-radius: 6px;
}
#pillBrains.ok {
  color: #c4cbef;
}
#pillBrains::before {
  vertical-align: 0;
}
/* footer fit levels: 1 the brains pill says only "AI" (its dot and tooltip keep the state) ·
   2 a tighter quote · 3 the quote on two lines · 4 no quote */
.foot.fit1 #pillBrains {
  gap: 0;
  font-size: 0;
}
.foot.fit1 #pillBrains::after {
  content: "AI";
  font-size: 10.5px;
}
.foot.fit2 .foot-status {
  gap: 12px;
}
.foot.fit2 .foot-quote {
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.foot.fit3 .foot-quote {
  max-width: 250px;
  max-height: 28px; /* two lines at most: a third one counts as "does not fit" (ui.js) */
  font-size: 10px;
  line-height: 14px;
  white-space: normal;
  text-align: right;
}
.foot.fit4 .foot-quote {
  display: none;
}

/* ── name tags and speech bubbles over the city ── */
.tag {
  font-size: 11px;
  padding: 4px 8px 5px;
  border-width: 2px;
  border-radius: 6px;
  background: #050a1a;
  box-shadow: 0 0 0 1px #000a, 0 0 12px -3px var(--c);
}
.tag.selected {
  color: #050a1a;
  background: var(--c);
}
.kol-tag {
  border-radius: 5px;
}
.bubble {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bubble);
  color: var(--bubble-ink);
  font: 12px/1.45 var(--font);
  box-shadow: 0 3px 0 #0006, 0 0 0 1px #7fb8d855;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
  border: 7px solid transparent;
  border-top-color: var(--bubble);
  border-bottom: 0;
}
.bubble.tmpl {
  background: #d8e4ef;
}
.bubble.tmpl::after {
  border-top-color: #d8e4ef;
}
.bubble.diary::after {
  border-top-color: #2a1438;
}
/* the speaker's name on its own line when the world sets data-who ("Kai / paper it, don't marry it") */
.bubble[data-who]::before {
  content: attr(data-who);
  display: block;
  font-weight: 600;
}

/* ── narrower desktops: thinner docks, smaller tabs ── */
@media (max-width: 1279px) {
  .hints {
    display: none;
  }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  :root {
    --dock-l: 340px;
    --dock-r: 310px;
  }
  .dock-tabs button {
    padding: 0 7px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .feed-panel .tabs button {
    padding: 0 5px;
    font-size: 10px;
  }
  .feed-panel .panel-head h2 {
    font-size: 9.5px;
  }
}
@media (min-width: 901px) and (max-width: 1199px) {
  :root {
    --dock-l: 300px;
    --dock-r: 290px;
  }
  .dock-tabs,
  .feed-panel > .panel-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .dock-tabs button {
    padding: 0 6px;
    font-size: 9px;
    letter-spacing: 0.03em;
  }
  .feed-panel .tabs button {
    padding: 0 5px;
    font-size: 10px;
  }
  .floorbar button {
    padding: 0 8px;
  }
  .floorbar .sep {
    margin: 0 5px;
  }
}

/* ── phones and narrow windows (the docks are bottom sheets, see above) ── */
@media (max-width: 900px) {
  /* header: brand + live pill, then the CTA, then the stats scrolling sideways */
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px 6px;
    overflow: visible;
  }
  .pills {
    order: 1;
  }
  .topbar .cta {
    order: 2;
    height: 26px;
    padding: 0 9px;
    font-size: 9.5px;
  }
  .cta-pre,
  .crumbs,
  .stat.opt,
  #agentsStat {
    display: none;
  }
  .stats {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 0 18px;
    padding-right: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .stats::-webkit-scrollbar {
    display: none;
  }
  .stats .stat .k {
    font-size: 9px;
  }
  .stats .stat .v {
    font-size: 13px;
  }
  #pillStream,
  #pillStream.warn,
  #pillStream.bad {
    height: 26px;
    gap: 6px;
    padding: 0 9px;
    font-size: 0;
  }
  #pillStream::after {
    content: attr(data-short);
    font-size: 9.5px;
  }
  /* footer: only the floor bar, scrolling sideways when it does not fit */
  .foot {
    height: 44px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 8px;
  }
  .foot-brand,
  .foot-status {
    display: none;
  }
  .floorbar {
    max-width: 100%;
    height: 36px;
    margin: 4px auto 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .floorbar::-webkit-scrollbar {
    display: none;
  }
  .floorbar button {
    height: 26px;
    padding: 0 8px;
    font-size: 10px;
  }
  .floorbar .sep {
    margin: 0 4px;
  }
  .dock > .panel {
    border-radius: 12px;
  }
  .dock-tabs,
  .feed-panel > .panel-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .mate {
    min-height: 52px;
    padding: 8px 12px 8px 18px;
  }
  .undock-proxy {
    display: none;
  }
  /* the sheet tabs: centred when they fit, scrolling sideways when they do not (no button cut off) */
  .mobile-tabs {
    left: 8px;
    right: 8px;
    transform: none;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-tabs::-webkit-scrollbar {
    display: none;
  }
  .mobile-tabs button {
    flex: none;
    padding: 9px 10px;
    font: 400 11px/1 var(--pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tab);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .mobile-tabs button:first-child {
    margin-left: auto;
  }
  .mobile-tabs button:last-child {
    margin-right: auto;
  }
  /* TV mode: the caption sits above the sheet tabs (TV-clean hides them) */
  .tv-caption {
    bottom: 54px;
  }
  body.tv-clean .tv-caption {
    bottom: 20px;
  }
}
@media (max-width: 700px) {
  .logo {
    width: 28px;
    height: 28px;
  }
  .brand-text {
    margin-left: 10px;
  }
  /* small enough that the brand and the LIVE pill share the first row on a 390-px phone */
  .brand-name {
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .brand-sub {
    margin-top: 4px;
    font-size: 10.5px;
  }
  .badge {
    margin: 0 0 0 8px;
    padding: 4px 5px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
  .mobile-tabs {
    gap: 4px;
  }
  .mobile-tabs button {
    padding: 8px 6px;
    font-size: 9px;
    letter-spacing: 0.02em;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pillStream::before {
    animation: none;
  }
}