/* Words Markets: a text-mode map of the market. Everything sits on one character grid:
   1ch wide, var(--lh) tall. app.js measures the grid and lays the cells out in whole characters so the map
   is exactly the viewport: the page never scrolls, a long panel scrolls inside itself. */

@font-face {
  font-family: "Monaspace Neon";
  src: url("/fonts/monaspace-neon-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique 0deg 11deg;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Xenon";
  src: url("/fonts/monaspace-xenon-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique 0deg 11deg;
  font-display: swap;
}

:root {
  --paper: #e6e6e3;
  --paper-hi: #f3f3f0;
  --ink: #0c0c0c;
  --ink-2: #33332f;
  --muted: #5f5f59;
  --tex: #8d8d86;
  --rule: #0c0c0c;
  --blue: #0d18dc;
  --blue-deep: #0a12a8;
  --white: #ffffff;
  --lime: #d4f25a;
  --red: #ff2a12;
  --red-ink: #b81800;
  --grey: #a9a9a2;
  --focus: #d4f25a;
  --fs: 15px;           /* set by app.js from the viewport, whole pixels */
  --lh: 22px;           /* set by app.js, whole pixels */
  --mono: "Monaspace Neon", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --slab: "Monaspace Xenon", "Monaspace Neon", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: var(--lh);
  font-synthesis: none;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 1;
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
img { display: block; }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: 1ch; top: -100px; z-index: 50;
  background: var(--lime); color: var(--ink); padding: 0 1ch; font-weight: 700; text-decoration: none;
}
.skip:focus { top: var(--lh); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cell-search :focus-visible, .btn-ink:focus-visible { outline-color: var(--lime); }

main {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  outline: none;
}

/* ---------------------------------------------------------------- the map */

.map {
  position: relative;
  flex: none;
  width: calc(var(--map-cols, 120) * 1ch + 1ch);
  height: calc(var(--map-rows, 36) * var(--lh) + var(--lh));
  /* the stage's palette: set per district below */
  --z: var(--ink); --z-ink: var(--paper-hi); --z-bg: var(--paper-hi); --z-text: var(--ink); --z-muted: var(--muted);
  --z-row: var(--paper); --z-hover: var(--blue); --z-hover-ink: var(--white); --z-accent: var(--blue); --z-line: #cfcfca;
}
.map-rules {
  position: absolute; inset: 0;
  margin: 0;
  font: inherit; line-height: var(--lh);
  color: var(--rule);
  white-space: pre;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.map-cells { position: absolute; inset: 0; }
.cell {
  position: absolute;
  left: calc(var(--x, 0) * 1ch + 1ch);
  top: calc(var(--y, 0) * var(--lh) + var(--lh));
  width: calc((var(--w, 10) - 1) * 1ch);
  height: calc((var(--h, 4) - 1) * var(--lh));
  overflow: hidden;
  display: block;
}
.map.measuring .cell { height: auto; overflow: visible; }
.map.measuring .cell-stage { height: calc(var(--lh) * 2); overflow: hidden; }

/* panels that scroll inside themselves */
.scroll-y, .cell-stage, [data-mode="phone"] .cell-legend, [data-mode="tablet"] .cell-legend {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--z, var(--ink)) transparent;
  scrollbar-gutter: stable;
}
.cell-stage::-webkit-scrollbar, .cell-legend::-webkit-scrollbar { width: 6px; }
.cell-stage::-webkit-scrollbar-thumb, .cell-legend::-webkit-scrollbar-thumb { background: var(--z, var(--ink)); }
.map.measuring .cell-legend { overflow: visible !important; }

/* texture: real words filling a cell */
.tex {
  position: absolute; inset: 0;
  white-space: pre;
  color: var(--tex);
  pointer-events: none;
  user-select: none;
}
.tex .t-b { background: var(--blue); color: var(--white); }
.tex .t-bi { color: var(--blue); font-weight: 700; font-style: oblique 10deg; }
.tex .t-l { background: var(--lime); color: var(--blue); }
.tex .t-r { background: var(--red); color: var(--ink); }
.tex .t-ri { color: var(--red-ink); font-weight: 700; font-style: oblique 10deg; }
.tex .t-k { color: var(--ink); font-weight: 700; }
.tex .t-f { color: #b3b3ac; }
.cell-texture .tex { pointer-events: auto; }
.cell-texture .tex [data-w] { cursor: pointer; }
.cell-texture .tex [data-w]:hover { background: var(--ink); color: var(--paper); }

/* title cartouche */
.cell-title { background: var(--paper); padding: 0 1ch; }
.title {
  margin: 0;
  font-family: var(--slab);
  font-weight: 800;
  font-size: calc(var(--fs) * 2);
  line-height: calc(var(--lh) * 2);
  letter-spacing: 0;
}
.title a { text-decoration: none; }
.title-ticker { color: var(--blue); font-style: oblique 10deg; }
.premise { margin: 0; max-width: 60ch; color: var(--ink-2); }

/* ---------------------------------------------------------------- districts: five zones, five colours */

.cell-district {
  text-decoration: none;
  --d-bg: var(--paper); --d-ink: var(--ink); --d-sub: var(--ink-2); --d-live: var(--blue);
  --d-label-bg: var(--ink); --d-label-ink: var(--paper);
  --d-tex: var(--tex); --d-tz: var(--ink); --d-tz-bg: transparent; --d-tzb: var(--ink);
  background: var(--d-bg);
  color: var(--d-ink);
}
.cell-district > span:not(.tex) {
  position: relative; z-index: 1;
  display: block;
  width: fit-content; max-width: calc(100% - 1ch);
  margin-left: 1ch;
}
.d-label {
  font-family: var(--slab);
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--d-label-bg);
  color: var(--d-label-ink);
  padding: 0 1ch;
}
.d-text { color: var(--d-sub); }
.d-live { color: var(--d-live); font-weight: 700; }
.d-live:empty { display: none !important; }
.cell-district .tex { top: 0; color: var(--d-tex); }
.cell-district .tex .t-z { background: var(--d-tz-bg); color: var(--d-tz); }
.cell-district .tex .t-zb { color: var(--d-tzb); font-weight: 700; font-style: oblique 10deg; }

.cell-district[data-cell="market"] {
  --d-bg: var(--blue); --d-ink: var(--white); --d-sub: #dfe2ff; --d-live: var(--lime);
  --d-label-bg: var(--white); --d-label-ink: var(--blue);
  --d-tex: #5862ee; --d-tz: var(--blue); --d-tz-bg: var(--lime); --d-tzb: var(--white);
}
.cell-district[data-cell="jokes"] {
  --d-bg: var(--lime); --d-ink: var(--ink); --d-sub: #3b4700; --d-live: var(--ink);
  --d-label-bg: var(--ink); --d-label-ink: var(--lime);
  --d-tex: #8fa82a; --d-tz: var(--lime); --d-tz-bg: var(--ink); --d-tzb: var(--ink);
}
.cell-district[data-cell="hellbox"] {
  --d-bg: var(--red); --d-ink: var(--ink); --d-sub: #3d0900; --d-live: var(--ink);
  --d-label-bg: var(--ink); --d-label-ink: var(--red);
  --d-tex: #c41d07; --d-tz: var(--red); --d-tz-bg: var(--ink); --d-tzb: var(--ink);
}
.cell-district[data-cell="mine"] {
  --d-bg: var(--ink); --d-ink: var(--paper-hi); --d-sub: #b9b9b3; --d-live: var(--lime);
  --d-label-bg: var(--paper-hi); --d-label-ink: var(--ink);
  --d-tex: #45453f; --d-tz: var(--ink); --d-tz-bg: var(--lime); --d-tzb: var(--paper-hi);
}
.cell-district[data-cell="rules"] {
  --d-bg: #cdcdc7; --d-ink: var(--ink); --d-sub: var(--ink-2); --d-live: var(--ink);
  --d-label-bg: var(--paper-hi); --d-label-ink: var(--ink);
  --d-tex: #9a9a93; --d-tz: var(--paper-hi); --d-tz-bg: var(--ink); --d-tzb: var(--ink);
}
.cell-district[data-cell="info"] {
  --d-bg: var(--paper-hi); --d-ink: var(--ink); --d-sub: var(--ink-2); --d-live: var(--blue);
  --d-label-bg: var(--blue); --d-label-ink: var(--white);
}
/* the open district says so: its label flips and it points at the centre */
.cell-district:hover .d-label { background: var(--d-ink); color: var(--d-bg); }
.cell-district[aria-current="page"] .d-label { background: var(--d-ink); color: var(--d-bg); }
.cell-district[aria-current="page"] .d-label::after { content: " < OPEN"; font-weight: 700; letter-spacing: 0.02em; }
.cell-district[aria-current="page"] { box-shadow: inset 0 0 0 4px var(--d-ink); }
.cell-district:focus-visible { outline: 3px solid var(--d-ink); outline-offset: -6px; }
[data-mode="phone"] .cell-district[aria-current="page"] .d-label::after { content: ""; }
[data-mode="phone"] .cell-district > span.d-text, [data-mode="phone"] .cell-district > .tex { display: none !important; }
[data-mode="phone"] .cell-district .d-label { margin-left: 0.5ch; padding: 0 0.5ch; letter-spacing: 0.02em; }
[data-mode="phone"] .cell-district > span:not(.tex) { margin-left: 0.5ch; }
[data-mode="phone"] .cell-district .d-live { font-size: calc(var(--fs) * 0.86); white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: calc(100% - 0.5ch); }
[data-mode="tablet"] .cell-district > span.d-text { display: none !important; }

/* the search block: the big ultramarine object */
.cell-search { background: var(--blue); color: var(--white); }
.search { padding: 0 1ch; height: 100%; display: flex; flex-direction: column; }
.search-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0 2ch; flex-wrap: wrap; }
.search-label { font-family: var(--slab); font-weight: 800; letter-spacing: 0.08em; background: var(--white); color: var(--blue); padding: 0 1ch; }
.search-line { display: flex; align-items: center; margin-top: var(--lh); }
.search-input {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--white);
  caret-color: var(--lime);
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(var(--fs) * var(--search-scale, 3));
  line-height: calc(var(--lh) * var(--search-lines, 3));
  height: calc(var(--lh) * var(--search-lines, 3));
  padding: 0;
  outline: none;
}
.search-input::placeholder { color: #7f88f2; opacity: 1; }
.search-line:focus-within { box-shadow: 0 3px 0 var(--lime); }
.answer { margin-top: var(--lh); min-height: calc(var(--lh) * 3); }
.answer p { margin: 0; }
.answer .a-word {
  font-weight: 800; font-size: calc(var(--fs) * 2); line-height: calc(var(--lh) * 2);
  overflow-wrap: anywhere;
}
.answer .a-state { display: inline-block; padding: 0 1ch; font-weight: 800; letter-spacing: 0.06em; vertical-align: middle; }
.s-free { background: var(--white); color: var(--blue); }
.s-owned { background: var(--lime); color: var(--ink); }
.s-hell { background: var(--red); color: var(--ink); }
.s-clock { background: var(--ink); color: var(--lime); }
.answer .a-line { color: #dfe2ff; }
.answer .a-line b { color: var(--white); }
.answer .a-def { color: var(--white); font-style: oblique 10deg; overflow-wrap: anywhere; }
.answer .a-actions { margin-top: var(--lh); display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 2) 2ch; align-items: center; }
.answer .a-why { color: #c7cbff; }
.answer .a-try { display: flex; flex-wrap: wrap; gap: 0 1ch; }
.answer .a-try button { background: none; border: 0; color: var(--lime); padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dots::after { content: ""; animation: dots 1s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* wallet slot inside the search block */
.wallet-slot { display: flex; gap: 0 1ch; align-items: baseline; flex-wrap: wrap; }
.wallet-slot .w-who { color: var(--white); }
.wallet-slot .w-bal { color: #c7cbff; }

/* buttons: text blocks on the grid, square, no radius */
.btn {
  display: inline-flex; align-items: center; gap: 1ch;
  min-height: calc(var(--lh) * 2);
  padding: 0 2ch;
  border: 0;
  border-radius: 0;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  user-select: none;
}
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(2px); }
.btn img { flex: none; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--ink); color: var(--lime); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--blue); color: var(--white); }
.btn-white { background: var(--white); color: var(--blue); }
.btn-white:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--lime); color: var(--ink); }
.btn-red { background: var(--red); color: var(--ink); }
.btn-red:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--ink); color: var(--red); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--ink); color: var(--lime); }
.btn-ghost { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 0 1ch; font-weight: 700; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 1; cursor: not-allowed; background: #b9b9b3; color: #4a4a45; }
.cell-search .btn[disabled], .cell-search .btn[aria-disabled="true"] { background: #3a43e3; color: #c7cbff; }
.btn-sm { min-height: var(--lh); padding: 0 1ch; font-weight: 700; }
.btn-xs { min-height: var(--lh); padding: 0 1ch; font-weight: 700; font-size: calc(var(--fs) * 0.93); }

/* legend */
.cell-legend { background: var(--paper); padding: 0 1ch; }
.legend-head { margin: 0; font-family: var(--slab); font-weight: 800; font-size: var(--fs); letter-spacing: 0.08em; }
.legend-head::before { content: "+ "; color: var(--muted); }
.legend-keys { list-style: none; margin: 0 0 var(--lh); padding: 0; color: var(--ink-2); }
.key { display: inline-block; width: 4ch; text-align: center; margin-right: 1ch; font-weight: 700; }
.key-blue { background: var(--blue); color: var(--white); }
.key-lime { background: var(--lime); color: var(--blue); }
.key-red { background: var(--red); color: var(--ink); }
.key-free { color: var(--tex); outline: 1px dashed var(--tex); outline-offset: -1px; }
.ca { margin-bottom: var(--lh); }
.ca-label { font-weight: 700; }
.ca-value { overflow-wrap: anywhere; word-break: break-all; background: var(--paper-hi); color: var(--ink); padding: 0 1ch; user-select: all; }
.ca-value.empty { color: var(--muted); background: transparent; padding: 0; font-style: oblique 10deg; user-select: none; }
.ca-copy { margin-top: calc(var(--lh) / 2); }
.ca-msg { margin-left: 1ch; font-weight: 700; }
.ca-msg.ok { color: var(--blue); }
.ca-msg.bad { color: var(--red-ink); }
.links { display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 2) 1ch; }
.links .btn[aria-disabled="true"] img { opacity: 0.45; }
.links-note { margin: calc(var(--lh) / 2) 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- the stage, in the open district's palette */

.map[data-zone="market"] { --z: var(--blue); --z-ink: var(--white); --z-bg: #eef0ff; --z-row: #e1e4ff; --z-hover: var(--blue); --z-hover-ink: var(--white); --z-accent: var(--blue); --z-line: #c3c8ff; }
.map[data-zone="jokes"] { --z: var(--lime); --z-ink: var(--ink); --z-bg: #f8fbea; --z-row: #eef6c8; --z-hover: var(--ink); --z-hover-ink: var(--lime); --z-accent: #3f4d00; --z-line: #d8e79a; }
.map[data-zone="hellbox"] { --z: var(--red); --z-ink: var(--ink); --z-bg: #fff2ef; --z-row: #ffe0d9; --z-hover: var(--red); --z-hover-ink: var(--ink); --z-accent: var(--red-ink); --z-line: #ffc2b7; }
.map[data-zone="mine"] { --z: var(--lime); --z-ink: var(--ink); --z-bg: #121211; --z-text: #ecece7; --z-muted: #a3a39b; --z-row: #1f1f1d; --z-hover: var(--lime); --z-hover-ink: var(--ink); --z-accent: var(--lime); --z-line: #3a3a36; }
.map[data-zone="rules"] { --z: #cdcdc7; --z-ink: var(--ink); --z-bg: var(--paper); --z-row: #dcdcd7; --z-hover: var(--ink); --z-hover-ink: var(--paper-hi); --z-accent: var(--ink); --z-line: #c4c4be; }

.cell-stage { background: var(--z-bg); color: var(--z-text); }
.stage { padding: 0 1ch var(--lh); min-height: 100%; }
.stage h2, .stage h3 { margin: 0; font-size: var(--fs); line-height: var(--lh); }
/* the district band: sticky at the top of the panel, full width, in the district's colour */
.st-top { position: sticky; top: 0; z-index: 3; background: var(--z-bg); margin: 0 -1ch var(--lh); padding: 0 1ch; }
.st-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 2ch;
  background: var(--z); color: var(--z-ink);
  margin: 0 -1ch; padding: 0 1ch;
}
.st-top > .st-head { margin-bottom: 0; }
.stage > .st-head { margin: 0 -1ch var(--lh); position: sticky; top: 0; z-index: 3; }
.st-title { font-family: var(--slab); font-weight: 800; letter-spacing: 0.08em; background: var(--z-ink); color: var(--z); padding: 0 1ch; }
.st-sub { color: inherit; opacity: 0.86; }
.st-sub .chip { opacity: 1; }
.st-p { margin: 0 0 var(--lh); max-width: 72ch; }
.st-note { color: var(--z-muted); margin: 0 0 var(--lh); }
.st-h3 { display: inline-block; font-family: var(--slab); font-weight: 800; letter-spacing: 0.08em; background: var(--z-text); color: var(--z-bg); padding: 0 1ch; margin: var(--lh) 0 calc(var(--lh) / 2); }
.rule-line { color: var(--z-muted); white-space: pre; overflow: hidden; display: block; height: var(--lh); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 1ch; }
.tab { background: none; border: 0; padding: 0 1ch; cursor: pointer; font-weight: 700; color: var(--z-text); text-decoration: none; min-height: var(--lh); }
.tab[aria-pressed="true"], .tab[aria-current="true"], .tab[aria-selected="true"] { background: var(--z-text); color: var(--z-bg); }
.tab:hover { background: var(--z); color: var(--z-ink); }
.st-top .tabs { padding: calc(var(--lh) / 2) 0 0; }
.tabs-main .tab { font-family: var(--slab); font-weight: 800; letter-spacing: 0.06em; }
.tabs-main .tab .n { font-family: var(--mono); font-weight: 400; opacity: 0.8; }

/* filters of the market: a line of segmented controls and small inputs */
.filters { display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 2) 2ch; align-items: center; padding: calc(var(--lh) / 2) 0; border-bottom: 1px dashed var(--z-line); }
.filters .fg { display: inline-flex; align-items: center; gap: 0 1ch; }
.filters .fl { color: var(--z-muted); }
.filters .seg button { min-height: var(--lh); }
.filters .in { min-height: var(--lh); width: 10ch; padding: 0 0.5ch; }
.filters .in.q { width: 16ch; }
.filters select.in { width: auto; }

/* tables in characters */
.rows { margin: 0 0 var(--lh); padding: 0; list-style: none; }
.row {
  display: grid;
  grid-template-columns: var(--cols-tpl, minmax(10ch, 1fr) 14ch 14ch 12ch 10ch);
  gap: 0 2ch;
  align-items: center;
  padding: 0 1ch;
  text-decoration: none;
  color: var(--z-text);
  min-height: calc(var(--lh) * 2);
}
a.row:hover, a.row:focus-visible, .row.link:hover { background: var(--z-hover); color: var(--z-hover-ink); }
a.row:hover .muted, a.row:focus-visible .muted, .row.link:hover .muted { color: inherit; opacity: 0.8; }
.row.head { font-weight: 700; color: var(--z-muted); min-height: var(--lh); position: sticky; top: var(--sticky-top, 0); background: var(--z-bg); z-index: 1; }
.rows > li:nth-child(even) > .row:not(.head), .rows > li.row:nth-child(even):not(.head) { background: var(--z-row); }
.rows > li:nth-child(even) > a.row:hover { background: var(--z-hover); }
.row .w { font-weight: 800; overflow-wrap: anywhere; }
.row .w a { text-decoration: none; }
.row .w a:hover { text-decoration: underline; }
.row .num { text-align: right; font-variant-numeric: tabular-nums; }
.row .act { display: flex; gap: 0 1ch; justify-content: flex-end; flex-wrap: nowrap; }
.row .num { white-space: nowrap; }
.rows.narrow .hide-md { display: none; }
.rows-offers .row > span { white-space: nowrap; overflow: hidden; }
.rows-offers .row > span.w, .rows-offers .row > span.joke-text { white-space: normal; }
.row .muted, .muted { color: var(--z-muted); }
.row.hell .num.now { color: var(--red-ink); font-weight: 800; }
.joke-text { font-weight: 700; overflow-wrap: anywhere; }
.best { color: var(--z-accent); font-weight: 700; }

/* word and joke pages: the order book */
.big-word {
  font-family: var(--mono); font-weight: 800;
  font-size: calc(var(--fs) * 4); line-height: calc(var(--lh) * 4);
  overflow-wrap: anywhere; margin: 0;
}
.big-joke { font-weight: 800; font-size: calc(var(--fs) * 1.6); line-height: calc(var(--lh) * 1.6); margin: 0 0 var(--lh); overflow-wrap: anywhere; max-width: 60ch; }
.facts { display: grid; grid-template-columns: 16ch 1fr; gap: 0 2ch; margin: 0 0 var(--lh); }
.facts dt { color: var(--z-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dd b { font-weight: 800; }
.actions { display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 2) 1ch; margin: 0 0 var(--lh); }
.warn { color: var(--red-ink); font-weight: 800; }
.map[data-zone="mine"] .warn { color: #ff7a66; }
.chip { display: inline-block; padding: 0 1ch; font-weight: 800; letter-spacing: 0.04em; }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2ch; margin: 0 0 var(--lh); }
.book-side { min-width: 0; }
.book-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0 1ch; font-family: var(--slab); font-weight: 800; letter-spacing: 0.06em; padding: 0 1ch; }
.book-h.ask { background: var(--blue); color: var(--white); }
.book-h.bid { background: var(--lime); color: var(--ink); }
.book-h.hell { background: var(--red); color: var(--ink); }
.book-ask { padding: calc(var(--lh) / 2) 1ch; background: var(--z-row); }
.book-ask .p { font-weight: 800; font-size: calc(var(--fs) * 1.6); line-height: calc(var(--lh) * 1.5); }
.book .rows { margin: 0; }
.book .row { min-height: calc(var(--lh) * 2); }
.book-empty { padding: calc(var(--lh) / 2) 1ch; color: var(--z-muted); background: var(--z-row); margin: 0; }

/* forms */
.field { display: grid; gap: 0; margin: 0 0 var(--lh); max-width: 60ch; }
.field label { font-weight: 700; }
.field .hint { color: var(--muted); }
.in {
  width: 100%;
  background: var(--white);
  color: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--ink);
  padding: 0 1ch;
  min-height: calc(var(--lh) * 2);
  border-radius: 0;
}
textarea.in { resize: none; min-height: calc(var(--lh) * 3); padding: calc(var(--lh) / 2) 1ch; line-height: var(--lh); }
.in:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
.inline { display: flex; gap: 1ch; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; flex-wrap: wrap; }
.seg button { border: 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); padding: 0 1ch; min-height: calc(var(--lh) * 2); cursor: pointer; font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); }
.map[data-zone] .stage .seg button[aria-pressed="true"] { background: var(--z-text); color: var(--z-bg); }
.pays { list-style: none; margin: 0 0 var(--lh); padding: 0; }
.pays li { display: grid; grid-template-columns: 16ch 1fr; gap: 0 2ch; }
.pays .st-owned { color: var(--blue); font-weight: 700; }
.pays .st-free { color: var(--muted); }
.pays .st-hell { color: var(--red-ink); font-weight: 700; }
.count { color: var(--z-muted); }
.count.over { color: var(--red-ink); font-weight: 800; }

/* the dark zone (MINE): controls keep their contrast */
.map[data-zone="mine"] .stage .btn-ink { background: var(--paper-hi); color: var(--ink); }
.map[data-zone="mine"] .stage .btn-ink:hover:not([disabled]) { background: var(--lime); color: var(--ink); }
.map[data-zone="mine"] .stage .btn[disabled] { background: #3a3a36; color: #9a9a93; }
.map[data-zone="mine"] .stage a:not(.btn):not(.row):not(.tab) { color: var(--lime); }

/* the risk line, once, at the end of RULES */
.risk { color: var(--z-muted); font-size: calc(var(--fs) * 0.86); margin: calc(var(--lh) * 2) 0 0; max-width: 72ch; }

/* sheet: the confirm-and-sign dialog, never taller than the screen */
.sheet {
  border: 0; padding: 0; margin: auto;
  width: fit-content;
  max-width: calc(100vw - 2ch);
  max-height: calc(100dvh - var(--lh) * 2);
  background: var(--paper-hi); color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(12, 12, 12, 0.55); }
.sheet-in { position: relative; padding: var(--lh) 2ch; width: min(66ch, calc(100vw - 3ch)); }
.sheet-rules { position: absolute; inset: 0; margin: 0; white-space: pre; color: var(--ink); pointer-events: none; font: inherit; line-height: var(--lh); overflow: hidden; }
.sheet-body { position: relative; }
.sheet h2 { margin: 0 0 var(--lh); font-family: var(--slab); font-weight: 800; letter-spacing: 0.06em; font-size: var(--fs); }
.sheet h2 span { background: var(--blue); color: var(--white); padding: 0 1ch; }
.sheet.offer h2 span { background: var(--lime); color: var(--ink); }
.sheet.hell h2 span { background: var(--red); color: var(--ink); }
.sum { list-style: none; padding: 0; margin: 0 0 var(--lh); }
.sum li { display: grid; grid-template-columns: 1fr auto; gap: 0 2ch; }
.sum li.total { font-weight: 800; }
.sheet .status { min-height: var(--lh); margin: 0 0 var(--lh); }
.sheet .status.bad { color: var(--red-ink); font-weight: 700; }
.sheet .status.ok { color: var(--blue); font-weight: 700; }
.sheet .row-btns { display: flex; flex-wrap: wrap; gap: 1ch; position: sticky; bottom: calc(var(--lh) * -1); z-index: 2; background: var(--paper-hi); padding: calc(var(--lh) / 2) 0 var(--lh); margin-bottom: calc(var(--lh) * -1); box-shadow: 0 -1px 0 #cfcfca; }
.sheet .field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2ch; }
.wallet-list { list-style: none; padding: 0; margin: 0 0 var(--lh); display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 2) 1ch; }

/* intro */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro-skip {
  position: absolute; right: 2ch; bottom: calc(var(--lh) * 1.5); z-index: 2;
  background: var(--lime); color: var(--ink); border: 0; font-weight: 800; padding: 0 2ch; min-height: calc(var(--lh) * 2); cursor: pointer;
}

.noscript { padding: 2ch; }

@media (prefers-reduced-motion: reduce) {
  .dots::after { animation: none; content: "..."; }
  .btn:active { transform: none !important; }
}

/* the search is the big object on the map's home, compact inside a district */
.map:not(.is-home) .cell-search { --search-scale: 1.7; --search-lines: 2; }
.map:not(.is-home) .answer { min-height: 0; }
.map:not(.is-home) .search-line { margin-top: calc(var(--lh) / 2); }
.map:not(.is-home) .answer:empty { margin-top: 0; }

/* phone: an app, nothing scrolls but the middle panel */
[data-mode="phone"] .title { font-size: calc(var(--fs) * 1.4); line-height: calc(var(--lh) * 1.5); }
[data-mode="phone"] .cell-title { padding: 0 0.5ch; }
[data-mode="phone"] .map:not(.is-home) .premise { display: none; }
[data-mode="phone"] .premise { font-size: calc(var(--fs) * 0.93); }
[data-mode="phone"] .search { padding: 0 0.5ch; }
[data-mode="phone"] .cell-search { --search-scale: 2; --search-lines: 2; }
[data-mode="phone"] .search-line { margin-top: calc(var(--lh) / 2); }
[data-mode="phone"] .map:not(.is-home) .cell-search { --search-scale: 1.4; --search-lines: 2; }
[data-mode="phone"] .answer { margin-top: calc(var(--lh) / 2); min-height: 0; }
[data-mode="phone"] .answer .a-actions { margin-top: calc(var(--lh) / 2); }
[data-mode="phone"] .answer .btn { min-height: calc(var(--lh) * 1.5); }
[data-mode="phone"] .big-word { font-size: calc(var(--fs) * 3); line-height: calc(var(--lh) * 3); }
[data-mode="phone"] .facts { grid-template-columns: 12ch 1fr; }
[data-mode="phone"] .hide-sm, [data-mode="tablet"] .rows .hide-sm.tab-hide { display: none; }
[data-mode="phone"] .row { gap: 0 1ch; padding: 0 0.5ch; }
[data-mode="phone"] .stage { padding: 0 0.5ch var(--lh); }
[data-mode="phone"] .st-top, [data-mode="phone"] .stage > .st-head { margin-left: -0.5ch; margin-right: -0.5ch; padding-left: 0.5ch; padding-right: 0.5ch; }
[data-mode="phone"] .st-head { margin-left: -0.5ch; margin-right: -0.5ch; }
[data-mode="phone"] .rows-market .row, [data-mode="phone"] .rows-mine .row { --cols-tpl: minmax(5ch, 1fr) 12ch 6ch; }
[data-mode="phone"] .rows-sale .row { --cols-tpl: minmax(5ch, 1fr) 11ch auto; }
[data-mode="phone"] .rows-offers .row { --cols-tpl: minmax(5ch, 1fr) 11ch auto; }
[data-mode="phone"] .rows-sales .row { --cols-tpl: minmax(5ch, 1fr) 11ch 7ch; }
[data-mode="phone"] .rows-feed .row { --cols-tpl: 9ch minmax(4ch, 1fr) 11ch; }
[data-mode="phone"] .rows-hell .row { --cols-tpl: minmax(5ch, 1fr) 12ch 9ch; }
[data-mode="phone"] .rows-joke .row { --cols-tpl: minmax(0, 1fr) 6ch; }
[data-mode="phone"] .rows-hist .row { --cols-tpl: 7ch minmax(0, 1fr) 8ch; }
[data-mode="phone"] .rows-bids .row { --cols-tpl: minmax(0, 1fr) 7ch 10ch; }
[data-mode="phone"] .pays li { grid-template-columns: 12ch 1fr; }
[data-mode="phone"] .answer .a-word { font-size: calc(var(--fs) * 1.6); line-height: calc(var(--lh) * 1.6); }
[data-mode="phone"] .book { grid-template-columns: 1fr; }
[data-mode="phone"] .filters { gap: calc(var(--lh) / 2) 1ch; }
[data-mode="phone"] .filters .fl { display: none; }
[data-mode="phone"] .filters .in.q { width: 12ch; }
[data-mode="phone"] .sheet-in { padding: var(--lh) 1ch; }
[data-mode="phone"] .sheet .field-2 { grid-template-columns: 1fr; }
[data-mode="phone"] .cell-legend { padding: 0 0.5ch; }
.steps li { margin-bottom: calc(var(--lh) / 2); }
.stage a:not(.btn):not(.row):not(.tab) { color: var(--z-accent); text-underline-offset: 3px; }
.stage .rows a.row { text-decoration: none; }
.stage [tabindex="-1"]:focus { outline: none; }

/* the narrowest phones: the bottom bar keeps the district names only, nothing is cut */
@media (max-width: 359px) { [data-mode="phone"] .cell-district .d-live, [data-mode="phone"] .cell-district .d-text { display: none; } }