/* B2 classic pixel: menus use the same paper, blue frame and gold actions as the HUD.
   Keep this after the historical UI styles. Artwork and game state remain untouched. */
body :is(#lobby, #room-panel, #modal-backdrop) {
  --menu-ink: #153568;
  --menu-muted: #526986;
  --menu-blue: #299de5;
  --menu-edge: #205896;
  --menu-line: #89aaca;
  --menu-paper: #fffef5;
  --menu-well: #eaf4fc;
  --menu-gold: #ffda45;
  --menu-positive: #17624e;
  --menu-negative: #ac2944;
  color: var(--menu-ink);
  color-scheme: light;
}

body #lobby,
body #room-panel,
body #modal-backdrop > .modal.modal {
  background: var(--menu-paper);
  color: var(--menu-ink);
  border: 3px solid var(--menu-blue);
  border-radius: 1px;
  box-shadow: 0 0 0 2px var(--menu-ink), 5px 5px 0 2px var(--menu-ink), inset 0 0 0 3px #d8effd;
  backdrop-filter: none;
  scrollbar-color: #719bc4 #e7f1f8;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

body #modal-backdrop {
  background: #17325473;
  backdrop-filter: none;
}

body #modal-backdrop > .modal.modal {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body #modal-backdrop > .modal.modal::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 10px;
  width: 28px;
  height: 3px;
  background: var(--menu-blue);
  box-shadow: 32px 0 var(--menu-gold);
  pointer-events: none;
}

body #modal-backdrop > .modal.modal h2,
body #room-panel h2 {
  color: var(--menu-ink);
  font-weight: 850;
  text-shadow: none;
  overflow-wrap: anywhere;
}

body #modal-backdrop > .modal.modal h2 {
  padding-right: 12px;
  line-height: 1.35;
}

body #modal-backdrop > .modal.modal .close-btn {
  color: var(--menu-ink);
  background: #edf7fe;
  border: 2px solid var(--menu-edge);
  border-radius: 1px;
  box-shadow: 2px 2px 0 var(--menu-ink);
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 25px;
  font-size: 25px;
}

body :is(#lobby, #room-panel, #modal-backdrop) :is(button, input, select, a, summary) {
  -webkit-tap-highlight-color: #ffda454d;
}

body :is(#lobby, #room-panel, #modal-backdrop) :is(button, input, select) {
  font-family: inherit;
}

body :is(#lobby, #room-panel, #modal-backdrop) button {
  overflow-wrap: anywhere;
  transition: background-color 100ms linear, transform 100ms steps(2, end);
}

body #lobby .gold-btn,
body #room-panel .gold-btn,
body #modal-backdrop > .modal.modal .gold-btn {
  background: var(--menu-gold);
  border: 2px solid #806016;
  border-radius: 1px;
  color: var(--menu-ink);
  box-shadow: inset 0 2px 0 #fff5b4, inset 0 -3px 0 #e8ad26, 2px 3px 0 var(--menu-ink);
  font-weight: 800;
  text-shadow: none;
}

body #lobby .quiet-btn,
body #room-panel .quiet-btn,
body #modal-backdrop > .modal.modal .quiet-btn {
  background: var(--menu-well);
  border: 2px solid var(--menu-line);
  border-radius: 1px;
  color: var(--menu-ink);
  box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #c2ddec, 2px 2px 0 #7595b5;
  font-weight: 650;
}

body :is(#lobby, #room-panel, #modal-backdrop) .text-btn {
  color: #205993;
  border-radius: 0;
  background: transparent;
  text-underline-offset: 3px;
}

body :is(#lobby, #room-panel, #modal-backdrop) :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid #0e61ba;
  outline-offset: 3px;
}

body :is(#lobby, #room-panel, #modal-backdrop) button:hover:not(:disabled) {
  filter: none;
  border-color: var(--menu-ink);
}

body :is(#lobby, #room-panel, #modal-backdrop) button:disabled {
  opacity: .62;
  cursor: not-allowed;
  filter: saturate(.55);
}

body :is(#lobby, #room-panel, #modal-backdrop) :is(input:not([type="range"]), select) {
  color: var(--menu-ink);
  background: #f5faff;
  border: 2px solid var(--menu-line);
  border-radius: 1px;
  box-shadow: inset 2px 2px 0 #d6e5f2;
  max-width: 100%;
}

body :is(#lobby, #modal-backdrop) input::placeholder { color: #637a94; opacity: 1; }
body #modal-backdrop input[type="range"] { accent-color: #246caa; background: transparent; }
body :is(#lobby, #room-panel, #modal-backdrop) a { color: #205993; }
body :is(#lobby, #room-panel, #modal-backdrop) :is(.muted, .support-copy, .credits, .economy-note) { color: var(--menu-muted); }
body #lobby #connection-status { color: #9c3d2e; }
body #lobby .profile-row > span { color: #75600e; }

/* Lobby choices retain their sizes and scroll behavior, with a clear selected state. */
body #lobby :is(.tier, .character-choice, .city-picker-head button, .v25-mode-picker button) {
  background: var(--menu-well);
  color: var(--menu-ink);
  border: 2px solid var(--menu-line);
  border-radius: 1px;
  box-shadow: inset 0 2px 0 #fff, 2px 2px 0 #7595b5;
}

body #lobby :is(.tier strong, .character-choice-copy strong, .character-choice > span:last-child) { color: var(--menu-ink); }
body #lobby :is(.tier small, .tier span:last-child, .tier .tier-net, .character-choice-copy small, .v25-mode-picker button small) { color: var(--menu-muted); }
body #lobby .character-choice-copy { min-width: 0; }
body #lobby .character-choice img { background: #f7f6e8; border-radius: 0; image-rendering: pixelated; }
body #lobby .tier { min-width: 0; }
body #lobby .v25-mode-picker button { flex-wrap: wrap; gap: 4px 8px; }
body #lobby .v25-mode-picker button :is(strong, small) { white-space: normal; text-align: left; }
body #lobby :is(.tier, .v25-mode-picker button)[aria-pressed="true"] {
  background: #fff1a5;
  border-color: #a37c23;
  box-shadow: inset 0 2px 0 #fff8d2, inset 0 -2px 0 #e8bf54, 2px 2px 0 var(--menu-ink);
  color: var(--menu-ink);
}
body #lobby .v25-mode-picker button[aria-pressed="true"] small { color: #685822; }

body #lobby .city-slide,
body #modal-body .city-card {
  background: #eaf4fc;
  border: 2px solid var(--menu-line);
  border-radius: 1px;
  box-shadow: 2px 2px 0 #7595b5;
}
body #lobby .city-slide[aria-pressed="true"],
body #modal-body .city-card[aria-pressed="true"] {
  border-color: #e7b12c;
  box-shadow: 0 0 0 1px #86611b, 2px 3px 0 var(--menu-ink);
}
body #lobby .city-slide::after { inset: auto 0 0; height: 39px; background: #fffef5f2; border-top: 2px solid #7da5c9; }
body #lobby .city-slide span { bottom: 8px; font-size: 19px; color: var(--menu-ink); text-shadow: none; }
body #modal-body .city-card > span { color: var(--menu-ink); }
body #lobby .city-slide:disabled { opacity: 1; filter: none; }

/* Character portraits and 3D preview are kept; their surrounding controls follow B2. */
body #modal-body :is(.character-intro, .character-drag-hint, .character-stage p) { color: var(--menu-muted); }
body #modal-body .character-stage {
  background: #edf5f5;
  color: var(--menu-ink);
  border: 2px solid var(--menu-line);
  border-radius: 1px;
  box-shadow: inset 0 0 0 3px #fffef5;
}
body #modal-body .character-stage-art { background: #edf5f5; }
body #modal-body .character-stage h3 { color: var(--menu-ink); }
body #modal-body .character-colors button { border: 2px solid #426482; border-radius: 1px; color: #102c54; box-shadow: 2px 2px 0 #7895b0; }
body #modal-body .character-colors button[aria-pressed="true"] { outline-color: var(--menu-ink); }
body #modal-body .character-colors button > span { background: #fffef5e6; padding: 1px 2px; }
body #modal-body .character-option { background: var(--menu-well); border: 2px solid var(--menu-line); border-radius: 1px; box-shadow: 2px 2px 0 #7595b5; }
body #modal-body .character-option-art { background: #f5f5e9; }
body #modal-body .character-option img { image-rendering: pixelated; }
body #modal-body .character-option-name { color: var(--menu-ink); font-weight: 700; }
body #modal-body .character-option[aria-pressed="true"] { background: #fff1a5; border-color: #9b7724; box-shadow: inset 0 -3px 0 #e6b52c, 2px 2px 0 var(--menu-ink); }
body #modal-body .character-option-check { color: var(--menu-ink); background: var(--menu-gold); border: 1px solid #8e6c16; border-radius: 0; }
body #modal-body .character-picker-footer { border-color: var(--menu-line); background: var(--menu-paper); }
body #modal-body .character-picker-footer [role="status"] { color: var(--menu-negative); }
body :is(#room-panel, #modal-body) .avatar.character-avatar { background: #e6f2fb; border-radius: 1px; box-shadow: 2px 2px 0 #7896b3; }
body #room-panel :is(.v25-room-mode, .seat-row span:last-child) { color: var(--menu-muted); }
body #room-panel :is(.room-code, .match-time) { color: #1e62a7; }
body #room-panel .seat-row > strong { min-width: 0; overflow-wrap: anywhere; }
body #room-panel .seat-row > span:last-child { text-align: right; }

/* Every body-level financial/detail surface has a light background and dark text. */
body #modal-backdrop > .modal.modal .fact,
body #modal-body :is(.wallet-note, .hash, .pack, .asset-row, .v24-funding-summary > div, .v24-liquidation-item, .v24-confirm-amount, .v26-investment, .v27-listing) {
  background: var(--menu-well);
  color: var(--menu-ink);
  border: 1px solid var(--menu-line);
  border-radius: 1px;
  box-shadow: inset 0 2px 0 #fff;
}
body #modal-body :is(.fact strong, .asset-row > b, .pack strong, .wallet-total, .ledger-row > b, .order-summary strong, .result-row > b, .result-payout strong, .countdown) { color: #205c98; }
body #modal-body :is(.fact span, .pack span, .reward-row p, .ledger-row small, .ledger-reference, .result-columns, .result-payout, .result-rank) { color: var(--menu-muted); }
body #modal-body .wallet-warning { color: #86511b; background: #fff3d0; border-color: #cb9d49; }
body #modal-body .wallet-total { font-weight: 800; font-variant-numeric: tabular-nums; }
body #modal-body .proof-status { color: #1b614e; background: #e8f5e9; border: 1px solid #74aa89; border-radius: 1px; }
body #modal-body .proof-status.failed { color: #97253b; background: #fff0f1; border-color: #c57c89; }
body #modal-body .hash { line-height: 1.7; }
body #modal-body .result-row.self { background: #fff1b5; border-color: #c6a342; }
body #modal-body .result-payout { padding: 15px 12px; background: #eaf4fc; border: 1px solid var(--menu-line); }
body #modal-body .rule-row { color: var(--menu-ink); }
body #modal-body .track-list button { color: var(--menu-ink); background: var(--menu-well); border-color: var(--menu-line); border-radius: 1px; }
body #modal-body .track-list button[aria-pressed="true"] { background: #fff1a5; border-color: #ab832a; }
body #modal-body .track-list button > b { color: #205c98; }

body #modal-body :is(.v24-caption, .v24-confirm-copy, .v24-confirm-amount span, .v24-asset-heading span, .v24-funding-summary span, .v26-card-explainer p, .v26-card-confirm > span, .v26-spirit-detail p, .v26-invest-hint, .v26-invest-player span, .v27-purchase-summary > span, .v27-purchase-summary > p, .v27-listing p, .v27-listing span) { color: var(--menu-muted); }
body #modal-body :is(.v24-offer-estate, .v24-kicker, .v27-listing-name) { color: var(--menu-ink); }
body #modal-body :is(.v24-liquidation-button b, .v24-confirm-amount strong, .v26-spirit-detail b) { color: var(--menu-positive); }
body #modal-body :is(.v27-purchase-summary > strong, .v27-listing > strong, .v27-owner-listing b) { color: #205c98; }
body #modal-body .v24-funding-summary .v24-gap { color: var(--menu-negative); background: #fff0f1; border-color: #c88896; }
body #modal-body .v24-funding-summary .v24-covered { color: var(--menu-positive); background: #e8f5e9; border-color: #76aa8a; }
body #modal-body :is(.v24-funding-footer, .v26-card-confirm, .v25-shop-checkout, .v27-owner-listing) { border-color: var(--menu-line); }
body #modal-body .v27-market-entry > span { color: var(--menu-ink); background: #fff5bc; border: 1px solid #d1ac47; border-radius: 0; }
body #modal-body .v24-target-number { color: var(--menu-ink); background: #fffef5; border-color: var(--menu-line); border-radius: 0; }
body #modal-body .v24-target-shield { color: #69468b; }
body #modal-backdrop > .modal.modal .v24-target[aria-pressed="true"],
body #modal-backdrop > .modal.modal .v26-invest-amounts > button[aria-pressed="true"] {
  color: var(--menu-ink);
  background: #fff1a5;
  border-color: #aa8229;
  box-shadow: inset 0 -2px 0 #e8bf54, 2px 2px 0 var(--menu-ink);
}
body #modal-body .v26-invest-player b { color: var(--menu-ink); }
body #modal-body .v26-invest-player progress { background: #caddec; border-radius: 0; height: 8px; }
body #modal-body .v26-invest-player progress::-webkit-progress-bar { background: #caddec; }
body #modal-body .v26-invest-risk { color: #835822; }

/* Overview and card shelves: preserve identity colors and approved sprite art. */
body #modal-body .v25-overview-player { color: var(--menu-ink); background: var(--menu-well); border: 1px solid var(--menu-line); border-radius: 1px; box-shadow: inset 4px 0 var(--player), 2px 3px 0 #7595b5; }
body #modal-body .v25-overview-total { border-color: var(--menu-line); }
body #modal-body :is(.v25-overview-identity > small, .v25-overview-total > span, .v25-overview-details span, .v25-shop-meta, .v25-shop-selection p, .v25-shop-buy-row > span) { color: var(--menu-muted); }
body #modal-body .v25-overview-total > b { color: #205c98; }
body #modal-body .v25-shelf-card { background: var(--menu-well); color: var(--menu-ink); border: 2px solid var(--menu-line); border-radius: 1px; box-shadow: inset 0 2px 0 #fff, 2px 3px 0 #7595b5; }
body #modal-body .v25-shelf-card > b { color: #205c98; }
body #modal-body .v25-shelf-card[aria-pressed="true"] { color: var(--menu-ink); background: #fff1a5; border-color: #a57e26; box-shadow: inset 0 -2px 0 #e5b733, 2px 3px 0 var(--menu-ink); }
body #modal-body .v25-shelf-card .v26-card-art { border-radius: 0; box-shadow: 2px 2px 0 #315c82; }
body #modal-body .v25-stock-state { color: #7f3b20; background: #fff1cf; border-color: #c79648; }
body #modal-body .v25-shop-selection > strong { color: var(--menu-ink); }
body #modal-body .v25-shop-selection > small { color: var(--menu-negative); }

/* Long localized labels and unusually large money/seed values stay inside the frame. */
body #modal-body { min-width: 0; overflow-wrap: anywhere; }
body #modal-body :is(.fact, .reward-row > div, .v24-asset-heading > strong, .v27-listing > div, .v25-shop-buy-row > span) { min-width: 0; }
body #modal-body :is(.fact strong, .wallet-total, .v24-funding-summary b, .v24-confirm-amount strong, .v27-purchase-summary > strong, .v27-listing > strong, .v25-overview-total > b, .result-payout strong) { overflow-wrap: anywhere; }
body #modal-body .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body #modal-body :is(.button-row, .reward-row, .order-summary, .proof-context, .settings-footer, .v24-confirm-amount, .v25-shop-meta, .v25-shop-buy-row, .v26-card-confirm, .v27-owner-listing > div) { flex-wrap: wrap; }
body #modal-body .button-row > * { min-width: 0; }
body #modal-body .v25-shop-meta > span:last-child { white-space: normal; }
body #modal-body .v25-shelf-card > strong { line-height: 1.35; }
body #modal-body .v26-invest-amounts { flex-wrap: wrap; }
body #modal-body .v26-invest-amounts > button { flex-basis: 64px; }
body #modal-body .asset-row strong { min-width: 0; }
body #modal-body .ledger-row > b { white-space: normal; overflow-wrap: anywhere; }
body :is(#lobby, #room-panel, #modal-backdrop) ::-webkit-scrollbar-thumb { background: #719bc4; border-radius: 0; }

@media (max-width: 550px) {
  body #modal-body .character-picker-footer { background: var(--menu-paper); }
  body #modal-body .character-stage { grid-template-columns: 40% minmax(0, 1fr); }
  body #modal-body .character-colors { flex-wrap: wrap; }
  body #modal-body .v25-overview { grid-template-columns: 1fr; }
  body #modal-body .v25-overview-details { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  body #modal-body .v25-overview-total > b { font-size: 26px; }
  body #modal-body .v25-shop-buy-row > button { flex: 1; min-width: 0; }
  body #modal-body .v26-spirit-detail > .v26-spirit-art { width: 80px; height: 90px; }
}

@media (max-width: 380px) {
  body #lobby { padding: 13px; }
  body #lobby .tier { font-size: 12px; padding-inline: 3px; }
  body #lobby .tier strong { font-size: 15px; }
  body #lobby .lobby-row { gap: 7px; }
  body #modal-backdrop { padding: 10px; }
  body #modal-backdrop > .modal.modal { padding: 24px 13px 18px; max-height: calc(100dvh - 24px); }
  body #modal-backdrop > .modal.modal h2 { font-size: 21px; }
  body #modal-body .character-grid { gap: 5px; }
  body #modal-body .character-option-name { font-size: 10px; padding-inline: 1px; }
  body #modal-body .character-colors { gap: 6px; }
  body #modal-body .character-colors button { width: 25px; }
  body #modal-body .v24-funding-summary { grid-template-columns: 1fr; }
  body #modal-body .v24-funding-summary > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  body #modal-body .v24-funding-summary b { font-size: 18px; }
  body #modal-body .v26-invest-progress { grid-template-columns: 1fr; }
  body #modal-body .v26-card-explainer { gap: 12px; }
  body #modal-body .v26-card-explainer > .v26-card-art { width: 70px; }
  body #modal-body .v26-spirit-detail { gap: 12px; }
  body #modal-body .v27-listing { grid-template-columns: minmax(0, 1fr); }
  body #modal-body .v27-listing > strong { font-size: 22px; }
  body #modal-body .result-row { gap: 7px; font-size: 12px; }
  body #modal-body .result-row > b { font-size: 13px; }
  body #modal-body .result-payout { gap: 7px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  body :is(#lobby, #room-panel, #modal-backdrop) button { transition: none; }
}