/* V31 · B2 classic pixel. Shared surfaces stay opaque so every label survives the map. */
:root {
  color-scheme: light;
  --v31-ink: #12336b;
  --v31-muted: #4d6681;
  --v31-border: #184c89;
  --v31-deep: #102f61;
  --v31-sky: #63baf2;
  --v31-paper: #fffef6;
  --v31-soft: #eaf6ff;
  --v31-gold: #ffdc52;
  --v31-gold-dark: #b77b21;
  --v31-negative: #c62c4e;
  --v31-positive: #167050;
  --v31-frame: 0 0 0 2px #63baf2, 0 0 0 4px #184c89, 4px 6px 0 2px #102f61;
  --v31-small-frame: 0 2px 0 #63baf2, 2px 4px 0 #102f61;
  --ink: var(--v31-ink);
  --muted: var(--v31-muted);
  --gold: #855615;
  --mint: var(--v31-positive);
  --line: #9dbbd3;
  --panel: var(--v31-paper);
}
body {
  color: var(--v31-ink);
  font-family: Tahoma, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
}
body button, body input, body select { border-radius: 2px; }
body button { touch-action: manipulation; transition: background .12s, transform .08s; }
body button:hover:not(:disabled) { filter: none; }
body button:disabled { opacity: .55; cursor: default; }
body button:active:not(:disabled) { transform: translate(1px, 2px); }
body button:focus-visible, body a:focus-visible, body input:focus-visible, body select:focus-visible {
  outline: 3px solid #de8a16;
  outline-offset: 4px;
}
body input, body select {
  color: var(--v31-ink);
  background: #fffef9;
  border: 2px solid #719abf;
  box-shadow: inset 2px 2px #d8e9f4;
  padding: 11px 12px;
  min-height: 44px;
}
body input[type=range] { min-height: 24px; accent-color: #2378b8; box-shadow: none; }
body input::placeholder { color: #6a8094; opacity: 1; }
body a { color: #16609d; }
body .gold-btn,
body #turn-actions .gold-btn,
body #modal-backdrop > .modal:not(.character-modal) .gold-btn {
  color: var(--v31-ink);
  background: var(--v31-gold);
  border: 2px solid var(--v31-border);
  border-radius: 2px;
  box-shadow: inset 2px 2px #fff3a4, inset -2px -3px #d99d24, 2px 3px var(--v31-deep);
  font-weight: 850;
  line-height: 1.35;
  min-height: 46px;
  padding: 11px 16px;
  overflow-wrap: anywhere;
}
body .gold-btn:hover:not(:disabled), body #turn-actions .gold-btn:hover:not(:disabled),
body #modal-backdrop > .modal:not(.character-modal) .gold-btn:hover:not(:disabled) { background: #ffe777; }
body .quiet-btn,
body #turn-actions .quiet-btn,
body #modal-backdrop > .modal:not(.character-modal) .quiet-btn {
  color: var(--v31-ink);
  background: var(--v31-soft);
  border: 2px solid #4277a7;
  border-radius: 2px;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #bfdcef, 1px 2px #244e7d;
  font-weight: 700;
  min-height: 44px;
  line-height: 1.35;
  padding: 10px 13px;
  overflow-wrap: anywhere;
}
body .quiet-btn:hover:not(:disabled), body #turn-actions .quiet-btn:hover:not(:disabled),
body #modal-backdrop > .modal:not(.character-modal) .quiet-btn:hover:not(:disabled) { background: #d2edff; }
body .text-btn { color: #315d83; background: none; border-radius: 0; font-weight: 650; }
body .text-btn:hover:not(:disabled) { color: #0e4384; background: #dfeefa; }
body header {
  padding: 16px 22px;
  gap: 16px;
  background: none;
  align-items: flex-start;
  z-index: 6;
}
body header .brand {
  gap: 10px;
  padding: 7px 12px 8px 9px;
  background: var(--v31-paper);
  border: 2px solid var(--v31-border);
  box-shadow: var(--v31-small-frame);
  min-height: 44px;
  max-width: calc(100vw - 350px);
}
body header .brand-mark { display: inline-block; flex: none; width: 23px; height: 27px; font-size: 0; position: relative; }
body header .brand-mark:not(:has(.v31-pixel-icon))::before {
  content: ""; position: absolute; left: 1px; bottom: 0; width: 7px; height: 17px;
  background: #4295cd; border-top: 3px solid var(--v31-deep);
  box-shadow: 8px -8px #226caa, 16px -2px #63baf2, 0 3px var(--v31-deep), 8px 3px var(--v31-deep), 16px 3px var(--v31-deep);
}
body header .brand-mark:has(.v31-pixel-icon) { width: 28px; height: 28px; }
body header .brand-mark .v31-pixel-icon { width: 28px; height: 28px; }
body header .brand h1 {
  color: var(--v31-ink); font-size: 21px; font-weight: 900; letter-spacing: .02em;
  line-height: 1.2; text-shadow: 1px 1px #ffde64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body header .brand > span:last-child {
  color: #345f88; font-size: 12px; border-left: 2px solid #a5c8e1; padding-left: 10px; white-space: nowrap;
}
body header nav { align-items: flex-start; gap: 8px; flex: none; }
body .icon-btn, body .balance-pill, body .compact-view-toggle {
  color: var(--v31-ink); background: var(--v31-paper);
  border: 2px solid var(--v31-border); border-radius: 2px;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #b7d8ef, var(--v31-small-frame);
  min-height: 44px; font-weight: 800;
}
body .icon-btn { width: 44px; height: 44px; font-size: 24px; padding: 0; line-height: 1; }
body .balance-pill { padding: 9px 12px; min-width: 110px; font-size: 14px; color: #f8fcff; background: #245f9e; box-shadow: inset 2px 2px #67b6e4, inset -2px -2px #174579, var(--v31-small-frame); }
body #balance { font-family: Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700; font-variant-numeric: tabular-nums; }
body #balance-label { color: #ddf0ff; font-size: 11px; margin-right: 4px; }
body .icon-btn:hover:not(:disabled), body .compact-view-toggle:hover:not(:disabled) { background: #dcefff; }
body .balance-pill:hover:not(:disabled) { background: #2e72b7; }
body #loading { color: var(--v31-ink); background: #eaf5f9; letter-spacing: .16em; font-weight: 900; }
body #loading > span { font-size: clamp(18px, 3vw, 29px); text-shadow: 2px 2px #fff, 3px 3px #92c5e7; }
body .loading-line { width: 170px; height: 12px; border: 2px solid var(--v31-border); background: repeating-linear-gradient(90deg,#59b2e7 0 14px,#d7ebf7 14px 18px); box-shadow: 3px 3px var(--v31-deep); animation: pulse 1s steps(3, end) alternate infinite; }
body .connection-banner { color: var(--v31-ink); background: #fff8d9; border: 2px solid #b98e35; border-radius: 2px; box-shadow: 3px 4px #4d5e79; backdrop-filter: none; }
body .connection-dot { background: #d6971d; border-radius: 0; box-shadow: 2px 2px #986711; }
body ::-webkit-scrollbar { width: 7px; height: 7px; }
body ::-webkit-scrollbar-thumb { background: #709ab9; border-radius: 0; }
body ::-webkit-scrollbar-track { background: #dfedf6; }
@media(max-width: 1100px) {
  body header { padding: 13px 16px; gap: 12px; }
  body header .brand { max-width: calc(100vw - 340px); }
  body header .brand > span:last-child { display: none; }
  body header .brand h1 { font-size: 19px; }
}
@media(max-width: 700px) {
  body header { padding: 9px 10px; gap: 7px; align-items: center; }
  body header .brand { flex: 1; min-width: 0; max-width: none; min-height: 38px; padding: 7px; gap: 5px; }
  body header .brand h1 { max-width: none; font-size: 15px; letter-spacing: 0; }
  body header .brand-mark { display: none; }
  body header nav { gap: 5px; }
  body header .icon-btn { width: 35px; height: 38px; min-height: 38px; font-size: 20px; }
  body header .balance-pill { min-width: 69px; min-height: 38px; padding: 7px 6px; font-size: 12px; }
  body #balance-label { display: none; }
}
@media(max-width: 420px) {
  body header { padding: 8px; gap: 5px; }
  body header .brand { padding: 7px 5px; }
  body header .brand h1 { font-size: 12px; }
  body header nav { gap: 4px; }
  body header .icon-btn { width: 32px; font-size: 19px; }
  body header .balance-pill { min-width: 55px; font-size: 11px; padding: 7px 4px; }
}
@media(prefers-reduced-motion: reduce) {
  body button { transition: none; }
  body .loading-line { animation: none; }
}

/* Readable accounting figures rather than rounded display numerals. */
body .wallet-total, body .price-line, body .fact strong,
body .v27-purchase-summary > strong, body .v27-listing > strong,
body .v24-confirm-amount strong, body .v24-funding-summary b,
body .v24-debt-heading strong, body .v24-liquidation-button b,
body .v25-shop-total strong, body .result-row > b, body .result-payout > strong,
body .ledger-row > b, body .pack strong, body .tier strong {
  font-family: Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Compact phone landscape still reserves a full row for the game board. */
@media(max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  body header { padding: 7px 10px; align-items: center; }
  body header .brand { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
  body header .brand h1 { font-size: 14px; }
  body header .icon-btn, body header .balance-pill { min-height: 38px; height: 38px; }
}