/* Margin Call: the trading floor's colours (same family as the crash game), one dark look on purpose. */
:root {
  --bg: #0a1c26; --panel: #10293a; --panel-2: #153447; --line: #22495c; --deep: #071219;
  --fg: #e9f4f1; --soft: #bfd8d5; --muted: #8eb0b4;
  --accent: #ffb547; --accent-ink: #2a1700; --up: #52d38f; --down: #ff5d52; --even: #7cc4ff; --sl: #ff8f6b;
  --f-display: "Rubik Mono One", "Rubik", system-ui, sans-serif;
  --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--fg); margin: 0; }
body { font: 15px/1.45 var(--f-body); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--even); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }

.app {
  max-width: 1640px; margin: 0 auto; padding: 12px 16px 32px; display: grid; gap: 14px; align-items: start;
  grid-template-columns: 384px minmax(0, 1fr) 340px;
  grid-template-areas: "top top top" "bank market side" "bank lower side";
  grid-template-rows: auto auto 1fr; /* the tall side columns stretch the last row, never the chart's */
}
.top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.market { grid-area: market; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lower { grid-area: lower; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bank { grid-area: bank; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* header */
h1 { font: 400 clamp(20px, 2.6vw, 23px)/1 var(--f-display); letter-spacing: .02em; }
h1 span { color: var(--accent); }
.where { color: var(--muted); font-size: 13px; }
.where b { color: var(--fg); font-weight: 600; }
.money { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.money > div { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; display: flex; gap: 8px; align-items: baseline; }
.lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.money b { font: 600 16px var(--f-mono); font-variant-numeric: tabular-nums; }
.pill { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--soft); font-size: 13px; }
.pill:hover { border-color: var(--muted); color: var(--fg); }
.pill.icon { padding: 6px 10px; display: inline-flex; align-items: center; }
.pill.save { border-color: var(--accent); color: var(--fg); }
.pill.mood { text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
.pill.mood b { font: 700 12px var(--f-mono); color: var(--fg); background: var(--panel-2); border-radius: 999px; padding: 1px 7px; }
.pill.mood.fear b { color: var(--down); } .pill.mood.greed b { color: var(--up); }
.pill.mood .fg-words { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .pill.mood .fg-words { display: none; } }
.pill.icon svg { width: 16px; height: 16px; shape-rendering: crispEdges; }
#soundBtn[aria-pressed="true"] .off, #soundBtn[aria-pressed="false"] .on { display: none; }
#soundBtn[aria-pressed="false"] { color: var(--muted); }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }

/* markets and chart */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.tabs button { flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; display: grid; gap: 1px; text-align: left; min-width: 104px; }
.tabs button[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tabs b { font: 600 13px var(--f-mono); }
.tabs .px { font: 12px var(--f-mono); color: var(--soft); font-variant-numeric: tabular-nums; }
.tabs small { font-size: 11px; color: var(--muted); }
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: flex; gap: 4px; }
.seg button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font: 12px var(--f-mono); color: var(--muted); }
.seg button[aria-checked="true"] { color: var(--fg); border-color: var(--accent); }
.src { margin-left: auto; font-size: 12px; color: var(--muted); }
.chart { position: relative; width: 100%; height: 460px; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); overflow: hidden; }
.chart.drawing { cursor: crosshair; }
.chart .legend { position: absolute; left: 10px; top: 8px; z-index: 3; font: 11px var(--f-mono); color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.chart .legend b { color: var(--fg); font-weight: 600; margin-right: 6px; }
.chart .hint { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 3; font-size: 12px; color: var(--accent); background: rgba(7,18,25,.85); border-radius: 8px; padding: 2px 8px; pointer-events: none; }
.chart .hint:empty { display: none; }
.seg button[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); }

/* ticket */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sides button { background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-weight: 600; display: grid; gap: 1px; color: var(--soft); }
.sides small { font-weight: 400; font-size: 11px; color: var(--muted); }
#long[aria-checked="true"] { border-color: var(--up); color: var(--up); box-shadow: inset 0 0 0 1px var(--up); }
#short[aria-checked="true"] { border-color: var(--down); color: var(--down); box-shadow: inset 0 0 0 1px var(--down); }
.field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.field b { color: var(--fg); font: 600 12px var(--f-mono); }
.field input[type="number"], .field .in, #charName { background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 14px var(--f-mono); width: 100%; box-sizing: border-box; min-width: 0; }
.field .in { display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.field .in i { font-style: normal; color: var(--muted); }
.field .in input { border: 0; background: none; padding: 8px 0; outline: none; width: 100%; font: 14px var(--f-mono); }
.field input[type="range"] { width: 100%; accent-color: var(--accent); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair > div { display: grid; gap: 4px; min-width: 0; }
.quick { display: flex; gap: 4px; }
.quick button { flex: 1; background: var(--deep); border: 1px solid var(--line); border-radius: 6px; padding: 4px 0; font: 12px var(--f-mono); color: var(--soft); }
.quick.small button { font-size: 11px; padding: 3px 0; }
.quick button:hover { border-color: var(--muted); }
.preview { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.preview dt { color: var(--muted); }
.preview dd { margin: 0; text-align: right; font: 13px var(--f-mono); font-variant-numeric: tabular-nums; }
.go { font: 400 14px var(--f-display); letter-spacing: .02em; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 12px; box-shadow: 0 3px 0 #0b0b0b; }
.go:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0b0b; }
.go.short { background: var(--down); color: #2a0806; }
.go.long { background: var(--up); color: #06210f; }
.go:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.ghost { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--soft); }
.msg { min-height: 18px; font-size: 13px; color: var(--soft); }
.msg.bad { color: var(--down); }

/* review */
.score h2, .lower h2, .desk h2 { font: 400 13px var(--f-display); letter-spacing: .06em; color: var(--accent); }
.desk h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 4px; }
.grades { display: flex; gap: 18px; align-items: flex-end; }
.grade { display: grid; gap: 2px; }
.grade b { font: 400 46px/1 var(--f-display); }
.grade small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gA, .gB { color: var(--up); } .gC { color: var(--accent); } .gD, .gF { color: var(--down); } .gN { color: var(--muted); }
.prelim { font-size: 12px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 13px; margin: 0; }
.metrics dt { color: var(--muted); }
.metrics dd { margin: 0; font: 13px var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.voices { display: grid; gap: 8px; }
.voices p { font-size: 13px; color: var(--soft); border-left: 3px solid var(--line); padding-left: 10px; }
.voices b { color: var(--accent); font: 600 11px var(--f-mono); letter-spacing: .06em; display: block; }

/* tables */
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl th { font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tbl td.txt { font-family: var(--f-body); }
.tbl .empty { color: var(--muted); font-family: var(--f-body); text-align: left; padding: 12px; }
.tbl input { width: 92px; background: var(--deep); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: 12px var(--f-mono); }
.tbl button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 12px; color: var(--soft); }
.tbl button.close { border-color: var(--accent); color: var(--accent); }
.tag { font: 600 10px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 6px; }

/* open positions: one card each */
.positions { display: grid; gap: 8px; }
.pos { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.pos-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pos-head b { font: 600 15px var(--f-mono); }
.pos-head .sz { color: var(--muted); font: 13px var(--f-mono); }
.pos-head .pl { margin-left: auto; font: 600 15px var(--f-mono); font-variant-numeric: tabular-nums; }
.tag.long { color: var(--up); border-color: var(--up); }
.tag.short { color: var(--down); border-color: var(--down); }
.pos-nums { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 2px 8px; margin: 0; font-size: 13px; }
.pos-nums dt { color: var(--muted); }
.pos-nums dd { margin: 0; font: 13px var(--f-mono); font-variant-numeric: tabular-nums; }
.pos-orders { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--muted); }
.pos-orders label { display: flex; align-items: center; gap: 6px; }
.pos-orders input { width: 100px; background: var(--deep); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: 12px var(--f-mono); }
.pos-orders button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--soft); }
.pos-orders button.close { border-color: var(--accent); color: var(--accent); margin-left: auto; }
p.empty.card { color: var(--muted); font-size: 14px; }
@media (max-width: 520px) { .pos-nums { grid-template-columns: auto 1fr; } }

/* the bank */
#building { width: 384px; max-width: 100%; aspect-ratio: 128 / 244; display: block; image-rendering: pixelated; border-radius: 14px; border: 1px solid var(--line); }
.board-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 24px 24px; gap: 6px; align-items: center; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.board-row:last-child { border-bottom: 0; }
.out { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; }
.out a { color: var(--accent); }
.out .link { font-size: 13px; color: var(--muted); }
.syn { display: flex; flex-direction: column; gap: 8px; }
.syn-lead { color: var(--soft); font-size: 13px; }
.syn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.syn-head b { font-size: 15px; }
.syn-head.big b { font-size: 18px; }
.syn-tag { font: 700 11px var(--f-mono); letter-spacing: .08em; color: #0a1c26; background: var(--c); border-radius: 6px; padding: 2px 6px; }
.syn-members { display: flex; flex-direction: column; }
.syn-m { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px 22px auto; gap: 6px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.syn-m:last-child { border-bottom: 0; }
.syn-m.me .nm { color: var(--accent); }
.syn-m .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-m .r { font: 12px var(--f-mono); text-align: right; }
.syn-m .g { font: 700 12px var(--f-mono); text-align: center; }
.syn-invite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pill-btn { align-self: flex-start; background: var(--accent); color: var(--accent-ink, #2a1700); border: 0; border-radius: 10px; padding: 8px 14px; font: 600 13px var(--f-body); cursor: pointer; }
input.upper { text-transform: uppercase; }
.syn-dlg .field input { background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: 15px var(--f-body); width: 100%; box-sizing: border-box; }
.syn-dlg form { display: grid; gap: 12px; }
.board-row.me { color: var(--accent); }
.board-row .n { color: var(--muted); font: 12px var(--f-mono); }
.board-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .r { font: 12px var(--f-mono); text-align: right; }
.board-row .g { font: 400 12px var(--f-display); text-align: center; }
.bot { display: grid; gap: 2px; font-size: 13px; }
.bot b { color: var(--fg); }
.bot p { color: var(--muted); font-size: 12px; }

/* dialogs and toasts */
dialog { overflow: visible; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(520px, calc(100vw - 32px)); box-sizing: border-box; }
dialog::backdrop { background: rgba(3, 8, 12, .72); }
.eyebrow { font: 400 11px var(--f-display); letter-spacing: .12em; color: var(--accent); margin-bottom: 12px; }
dialog.intro { width: fit-content; max-width: calc(100vw - 24px); padding: 14px 16px; }
dialog.intro .eyebrow { margin-bottom: 8px; }
#introCanvas { display: block; height: min(58vh, 600px); aspect-ratio: 128 / 244; max-width: 100%; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); image-rendering: pixelated; }
#intro .caption { width: calc(min(58vh, 600px) * 128 / 244); max-width: 100%; min-height: 86px; display: grid; align-content: start; gap: 4px; margin: 10px auto 0; }
#intro .who { font: 600 12px var(--f-mono); letter-spacing: .08em; color: var(--accent); min-height: 15px; }
#intro .who.you { color: var(--even); }
#intro .say { font-size: 15px; line-height: 1.45; }
#intro .actions { margin-top: 8px; }
/* week one: the tasks, the house rules in the ticket, the talk with Lea */
.house { display: flex; flex-wrap: wrap; gap: 5px; }
.house .rule { font: 600 11px var(--f-mono); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; color: var(--muted); }
.house .rule.ok { color: var(--up); border-color: #2f6b4a; }
.house .rule.no { color: var(--down); border-color: #6b2f2f; }
.cost-hint { flex-basis: 100%; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.story h2 small { font: 500 12px var(--f-mono); color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.story-lead { color: var(--soft); font-size: 13px; }
.tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tasks li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tasks .tick { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); display: grid; place-items: center; font: 700 12px var(--f-mono); color: var(--up); }
.tasks li.done .txt { color: var(--muted); text-decoration: line-through; }
.tasks li.done .tick { border-color: #2f6b4a; background: #12301f; }
.tasks .txt { flex: 1; }
.tasks .txt small { color: var(--accent); font: 12px var(--f-mono); margin-left: 4px; }
.tasks li.due .tick { color: var(--accent); border-color: var(--accent); }
.bar { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 4px; font-size: 14px; }
.bar li.ok { color: var(--up); }
.bar li.no { color: var(--down); }
.tasks .pill { flex: none; padding: 4px 10px; font-size: 12px; border-color: var(--accent); color: var(--fg); }
.link { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; text-decoration: underline; text-align: left; justify-self: start; }
dialog.talk { width: min(580px, calc(100vw - 24px)); }
dialog.acct { width: min(440px, calc(100vw - 24px)); }
.acct form { display: grid; gap: 12px; }
.acct .eyebrow { margin-bottom: 0; }
.acct-tabs button[aria-selected="true"] { color: var(--fg); border-color: var(--accent); background: var(--panel-2); }
.acct .field input { background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: 15px var(--f-body); width: 100%; box-sizing: border-box; }
.acct-line { font-size: 13px; color: var(--soft); margin-top: 12px; }
.acct-line .link { font-size: 13px; }
.talk-top { display: flex; gap: 14px; align-items: flex-start; }
#talkFace { flex: none; width: 120px; aspect-ratio: 24 / 22; image-rendering: pixelated; border-radius: 10px; border: 1px solid var(--line); }
.talk-text { min-height: 110px; }
.talk .who { font: 600 12px var(--f-mono); letter-spacing: .08em; color: var(--accent); margin-bottom: 6px; }
.talk .say { font-size: 15px; line-height: 1.5; }
.talk-choices { display: grid; gap: 6px; margin-top: 14px; }
.talk-choices button { text-align: left; background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--fg); font-size: 14px; }
.talk-choices button:hover { border-color: var(--accent); }
.talk-choices button.asked { color: var(--muted); }
.talk-choices button.go { text-align: center; }
@media (max-width: 560px) { #talkFace { width: 84px; } .talk-text { min-height: 0; } }
/* the personnel file: the look before the hiring scene */
dialog.char { width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.char-lead { color: var(--soft); font-size: 14px; margin: -4px 0 14px; }
.char-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
#charCanvas { width: 264px; aspect-ratio: 44 / 30; display: block; image-rendering: pixelated; border-radius: 12px; border: 1px solid var(--line); position: sticky; top: 0; }
.char-fields { display: grid; gap: 10px; }
.opt { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt legend { font-size: 12px; color: var(--muted); letter-spacing: .04em; padding: 0; margin-bottom: 5px; }
.pick, .swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.pick button { background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--soft); }
.pick button[aria-checked="true"] { color: var(--fg); border-color: var(--accent); background: var(--panel-2); }
.swatches button { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--line); }
.swatches button[aria-checked="true"] { border-color: var(--fg); box-shadow: 0 0 0 2px var(--accent); }
.actions .dice { margin-right: auto; }
#building, #heroBuilding { touch-action: manipulation; }
@media (max-width: 560px) {
  .char-body { grid-template-columns: 1fr; }
  #charCanvas { width: min(264px, 100%); margin: 0 auto; }
}
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 50; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.toast.win { border-color: var(--up); }
.toast.loss { border-color: var(--down); }
.toast.lea { border-color: #5bd16b; }

@media (max-width: 1280px) {
  .app { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "top top" "market side" "lower side" "bank bank"; grid-template-rows: auto auto 1fr auto; }
  .bank { flex-direction: row; align-items: flex-start; }
  .bank .desk { flex: 1; }
}
/* phones: a switch shows either the chart or Hyper Bank on top (only one of them fits), the ticket and the book below */
.viewsw { display: none; grid-area: switch; }
.viewsw button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px; font-size: 14px; color: var(--muted); }
.viewsw button:first-child { border-radius: 10px 0 0 10px; }
.viewsw button:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.viewsw button[aria-checked="true"] { color: var(--fg); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.viewsw svg { width: 14px; height: 14px; shape-rendering: crispEdges; }
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "switch" "market" "side" "lower" "bank"; grid-template-rows: none; padding: 8px 10px 24px; gap: 10px; }
  .viewsw { display: flex; }
  .app[data-view="chart"] .bank { display: none; }
  .app[data-view="bank"] .market { display: none; }
  .app[data-view="bank"] { grid-template-areas: "top" "switch" "bank" "side" "lower"; }
  /* phones: the title and the name on top, the rank, the money, then the Journal, save and sound in one row */
  .top { display: flex; flex-wrap: wrap; gap: 6px 8px; }
  .top h1 { flex: 1 1 auto; }
  #nameBtn { order: 1; }
  .where { order: 2; flex-basis: 100%; }
  .money { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: nowrap; gap: 6px; }
  #moodChip { order: 4; } #saveBtn { order: 5; } #soundBtn { order: 6; }
  .money > div { flex: 1; display: grid; gap: 0; padding: 4px 10px; border-radius: 10px; min-width: 0; }
  .money .lbl { font-size: 9px; }
  .money b { font-size: 13px; }
  .chart { height: 340px; }
  .bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; } /* one row of buttons, scrolled sideways */
  .bar .seg { flex: 0 0 auto; }
  .bar .seg button { white-space: nowrap; }
  .bar .src { flex: 0 0 auto; margin-left: 4px; white-space: nowrap; }
  .bank { flex-direction: column; }
  #building { width: auto; height: min(calc((100vw - 20px) * 244 / 128), 72vh); max-width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .go { transition: none; } }