/* C: miniature-city menus. Shallow jade frames, stone paper, brass corners.
   Visual overrides only; dialog content and actions stay with app.js. */
body #modal-backdrop {
  --menu-ink: #173e49;
  --menu-muted: #5c716f;
  --menu-blue: #397e7e;
  --menu-edge: #225d61;
  --menu-line: #a5bab1;
  --menu-paper: #f7f4e8;
  --menu-well: #e7ece1;
  --menu-gold: #f2c952;
  --menu-positive: #26765c;
  --menu-negative: #b54b52;
  padding: 18px;
  background: #173f443d;
  color: var(--menu-ink);
  font-family: var(--v33-display, system-ui, sans-serif);
  font-size: 14px;
}
body #modal-backdrop > .modal.modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 36px);
  padding: 5px;
  border: 2px solid #1d5055;
  border-radius: 2px;
  border-image: none;
  background:
    linear-gradient(135deg, #eed39a 0 7px, #ba9655 7px 9px, transparent 9px) top left / 18px 18px no-repeat,
    linear-gradient(225deg, #eed39a 0 7px, #ba9655 7px 9px, transparent 9px) top right / 18px 18px no-repeat,
    linear-gradient(45deg, #eed39a 0 7px, #ba9655 7px 9px, transparent 9px) bottom left / 18px 18px no-repeat,
    linear-gradient(315deg, #eed39a 0 7px, #ba9655 7px 9px, transparent 9px) bottom right / 18px 18px no-repeat,
    linear-gradient(145deg, #4c8e89, #286b6b 50%, #1c5059);
  box-shadow: inset 0 1px #b8ded0, inset 0 -2px #143f46, 0 3px 0 #153f48, 0 8px 16px #173d4638;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  color: var(--menu-ink);
  scrollbar-color: #72958b #e9eadf;
  font-size: 14px;
}
body #modal-backdrop > .modal.modal::before { display: none; }
body #modal-backdrop > .modal.character-modal { width: min(800px, 100%); }
body #modal-backdrop > .modal.v25-store-modal,
body #modal-backdrop > .modal.v25-overview-modal { width: min(640px, 100%); }
body #modal-backdrop > .modal.v27-decision-modal { width: min(420px, 100%); }
body #modal-backdrop > .modal.modal > #modal-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 43px 11px 15px;
  border: 0;
  border-bottom: 1px solid #173f49;
  background: linear-gradient(120deg, #347b7b, #276b70);
  box-shadow: inset 0 1px #73a79e, inset 0 -2px #194e53;
  color: #fffdf0;
  font-family: var(--v33-display, system-ui, sans-serif);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: left;
  text-shadow: 0 1px #164b51;
}
body #modal-backdrop > .modal.modal > #modal-body {
  padding: 16px;
  border: 1px solid #d8ddc9;
  border-top: 0;
  min-height: 60px;
  background: linear-gradient(130deg, #fbf8ed, #f1eedf);
  box-shadow: inset 0 1px #fffefa;
  color: var(--menu-ink);
}
body #modal-backdrop > .modal.modal .close-btn {
  right: 15px;
  top: 15px;
  width: 28px;
  height: 28px;
  border: 1px solid #bcc5ac;
  border-radius: 2px;
  background: linear-gradient(#fffdf1, #e7e9d9);
  color: #215c62;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #cad2bd, 0 2px #164c51;
  font-size: 24px;
  font-weight: 600;
  line-height: 23px;
}
body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn) {
  min-height: 41px;
  padding: 9px 14px;
  border: 1px solid #718b7e;
  border-radius: 2px;
  color: var(--menu-ink);
  font-family: var(--v33-display, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: none;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
body #modal-backdrop > .modal.modal .gold-btn {
  border-color: #aa8436;
  background: linear-gradient(135deg, #ffe28a, #f2c549 65%, #e7b73e);
  box-shadow: inset 1px 1px #fff2c0, inset -1px -3px #c79831, 0 2px #24565a;
}
body #modal-backdrop > .modal.modal .quiet-btn {
  background: linear-gradient(130deg, #fcfaee, #e5e6d9);
  box-shadow: inset 1px 1px #fff, inset -1px -2px #bcc8bb, 0 2px #36686a;
}
body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn):hover:not(:disabled) {
  filter: brightness(1.035);
  border-color: #386367;
}
body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn):active:not(:disabled) { transform: translateY(1px); }
body #modal-backdrop :is(button, input, select, a, summary):focus-visible { outline-color: #be8e29; }
body #modal-backdrop :is(a, .text-btn) { color: #216d72; }
body #modal-backdrop input::placeholder { color: #72837c; }
body #modal-body :is(input:not([type="range"]), select) {
  min-height: 37px;
  border: 1px solid #9daf9f;
  border-radius: 2px;
  background: #fffdf2;
  color: var(--menu-ink);
  box-shadow: inset 1px 2px #e4e7d8;
  font-size: 14px;
}
body #modal-body input[type="range"] { accent-color: #347d76; }
body #modal-body .setting {
  padding: 10px 12px;
  margin: 9px 0;
  border: 1px solid #b3c1ad;
  border-radius: 2px;
  background: #e8eddf;
  box-shadow: inset 0 1px #fffff5;
}
body #modal-body :is(.setting-head b, .countdown) { color: #216e6b; }
body #modal-body :is(.muted, .rule-row p) { color: var(--menu-muted); }
body #modal-body .rule-row { padding: 11px 8px; border-bottom: 1px solid #ccd3c1; }
body #modal-body .rule-row:nth-child(2n) { background: #eaf0e1; }
body #modal-body .rule-row > b { color: #398274; }

/* Keep the property illustration and price together in a small city placard. */
body #modal-body .v27-purchase-summary {
  grid-template-columns: minmax(124px, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 14px;
  min-height: 150px;
  margin: 0 0 12px;
  padding: 0;
}
body #modal-body .v27-purchase-summary::before {
  min-height: 144px;
  height: 144px;
  width: 100%;
  background: url('../assets/ui-v35/property-hotel.png') center / contain no-repeat;
  image-rendering: auto;
  filter: drop-shadow(1px 3px 1px #55716e26);
}
body #modal-body .v27-purchase-summary > span {
  align-self: end;
  padding: 8px 9px;
  margin-bottom: 7px;
  border: 1px solid #c8cdbb;
  border-radius: 2px;
  background: #e9e9dc;
  box-shadow: inset 1px 1px #fffdf0;
  color: #245861;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  width: 100%;
}
body #modal-body .v27-purchase-summary > strong {
  color: #174b57;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-shadow: none;
}
body #modal-body .v27-purchase-summary > p { color: var(--menu-muted); font-size: 12px; margin-top: 5px; }
body #modal-body:has(.v27-purchase-summary) > .button-row { gap: 12px; margin-top: 0; padding-bottom: 2px; }
body #modal-backdrop > .modal.modal #modal-body:has(.v27-purchase-summary) > .button-row > button { min-height: 43px; padding: 9px; font-size: 18px; }

body #modal-backdrop > .modal.modal .fact,
body #modal-body :is(.wallet-note, .hash, .asset-row, .v24-funding-summary > div, .v24-liquidation-item, .v24-confirm-amount, .v26-investment, .v27-listing) {
  border: 1px solid #b4c1ad;
  border-radius: 2px;
  background: linear-gradient(135deg, #f2f2e6, #e7ebdd);
  box-shadow: inset 0 1px #fffdf2;
  color: var(--menu-ink);
}
body #modal-body .facts { gap: 9px; }
body #modal-backdrop > .modal.modal .fact { padding: 11px; }
body #modal-body .fact strong { color: #276e66; font-size: 20px; font-weight: 750; }
body #modal-body .fact span { color: var(--menu-muted); font-weight: 500; }
body #modal-body :is(.asset-row > b, .ledger-row > b, .order-summary strong, .result-row > b, .result-payout strong, .track-list button > b, .v27-listing > strong, .v27-owner-listing b) { color: #286b65; }
body #modal-body .wallet-total {
  padding: 13px 16px;
  margin: 10px 0 14px;
  border: 1px solid #245d61;
  border-radius: 2px;
  background: linear-gradient(130deg, #37807a, #205f65);
  color: #fff0b7;
  box-shadow: inset 1px 1px #77aaa0, inset -1px -2px #17484c, 0 2px #c3cebc;
  font-size: 32px;
  text-shadow: 0 1px #17434a;
}
body #modal-body .reward-row { padding: 11px 0; border-color: #ccd4c3; }
body #modal-body .reward-row strong { color: #295c61; }
body #modal-body .wallet-warning { background: #f6ebc2; color: #7e622d; border-color: #cbb777; }
body #modal-body .pack { border: 1px solid #98b0a1; background: #ebeedf; box-shadow: inset 1px 1px #fffef4, 0 2px #adbcae; border-radius: 2px; }
body #modal-body .pack strong { color: #286f64; }
body #modal-body .result-payout { background: #e7eddf; }
body #modal-body .v25-overview-player { border: 1px solid #90aaa0; background: #f0f0e3; border-radius: 2px; padding: 13px; box-shadow: inset 0 3px var(--player), inset 1px 1px #fff, 0 2px #6c9289; }
body #modal-body .v25-overview-total > b { color: #2a6f65; font-size: 25px; font-weight: 750; }
body #modal-body :is(.v25-shelf-card, .character-option) { border: 1px solid #96b0a1; border-radius: 2px; background: #e9eee1; box-shadow: inset 1px 1px #fffcf1, inset -1px -2px #cad4bf, 0 2px #628b81; }
body #modal-body :is(.v25-shelf-card, .character-option)[aria-pressed="true"] { border-color: #ad934f; background: #f9e8aa; box-shadow: inset 1px 1px #fff7d1, inset -1px -2px #d4b361, 0 2px #5f7f73; }
body #modal-body .v25-shelf-card > b { color: #2b7165; }
body #modal-body .v25-shelf-card .v26-card-art { box-shadow: 1px 2px 2px #335d524d; }
body #modal-body :is(.v25-shop-checkout, .character-picker-footer) { background: #f6f3e8; border-top: 1px solid #a9bba7; padding-top: 11px; }
body #modal-body .character-stage { border: 1px solid #91ada0; border-radius: 2px; background: #e2e9d9; box-shadow: inset 1px 1px #fffcee, 0 2px #74988a; }
body #modal-body .character-stage-art { background: radial-gradient(ellipse at 50% 70%, #fff8dc, #dce8d9 75%); }
body #modal-body .character-option-art { background: #e8eee0; }
body #modal-body .character-option img { image-rendering: auto; }
body #modal-body .character-colors button { border: 1px solid #66887b; box-shadow: 0 2px #92aa97; border-radius: 2px; }
body #modal-body .character-option-check { border-radius: 2px; background: #f2cd68; }
body #modal-body .avatar.character-avatar { background: #e7ede0; box-shadow: 0 2px #9caf9a; }
body #modal-body :is(.v26-investment, .v24-liquidation-item) { padding: 12px; }
body #modal-body .v26-invest-player progress { height: 9px; border: 1px solid #839f8d; }
body #modal-body .v26-invest-player progress::-webkit-progress-bar { background: #d7e1d0; }
body #modal-body .v24-confirm-amount strong { color: #29775c; font-weight: 750; }
body #modal-body .v24-funding-summary .v24-gap { color: #aa4651; background: #f5dfd5; border-color: #d4a79d; }
body #modal-body .result-row.self { border: 1px solid #c4af69; background: #f9edbd; }
body #modal-backdrop ::-webkit-scrollbar-thumb { background: #86a393; border-radius: 2px; }

@media (max-width: 600px) {
  body #modal-backdrop { padding: 12px; }
  body #modal-backdrop > .modal.modal { max-height: calc(100dvh - 24px); padding: 5px; border-width: 2px; }
  body #modal-backdrop > .modal.modal > #modal-title { min-height: 45px; padding: 10px 39px 10px 12px; font-size: 20px; }
  body #modal-backdrop > .modal.modal > #modal-body { padding: 13px; }
  body #modal-backdrop > .modal.modal .close-btn { top: 14px; right: 13px; width: 27px; height: 27px; font-size: 23px; line-height: 23px; }
  body #modal-body .v27-purchase-summary { grid-template-columns: minmax(106px, .9fr) minmax(0, 1fr); min-height: 137px; column-gap: 11px; }
  body #modal-body .v27-purchase-summary::before { min-height: 132px; height: 132px; }
  body #modal-body .v27-purchase-summary > span { font-size: 16px; padding: 7px; }
  body #modal-body .v27-purchase-summary > strong { font-size: 28px; }
  body #modal-body:has(.v27-purchase-summary) > .button-row { gap: 10px; }
  body #modal-backdrop > .modal.modal #modal-body:has(.v27-purchase-summary) > .button-row > button { min-height: 42px; font-size: 17px; }
  body #modal-body .v25-overview-total > b { font-size: 23px; }
}
@media (max-width: 360px) {
  body #modal-backdrop { padding: 9px; }
  body #modal-backdrop > .modal.modal { max-height: calc(100dvh - 18px); }
  body #modal-backdrop > .modal.modal > #modal-title { font-size: 18px; }
  body #modal-backdrop > .modal.modal > #modal-body { padding: 11px; }
  body #modal-body .v27-purchase-summary { grid-template-columns: minmax(88px, .85fr) minmax(0, 1fr); column-gap: 9px; min-height: 122px; }
  body #modal-body .v27-purchase-summary::before { min-height: 118px; height: 118px; }
  body #modal-body .v27-purchase-summary > span { font-size: 14px; }
  body #modal-body .v27-purchase-summary > strong { font-size: 25px; }
  body #modal-backdrop > .modal.modal #modal-body:has(.v27-purchase-summary) > .button-row > button { font-size: 16px; }
  body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn) { padding-inline: 9px; }
}
@media (max-height: 500px) and (min-width: 501px) {
  body #modal-backdrop { padding: 9px 16px; }
  body #modal-backdrop > .modal.modal { max-height: calc(100dvh - 18px); }
  body #modal-backdrop > .modal.modal > #modal-title { min-height: 40px; padding-block: 8px; font-size: 19px; }
  body #modal-backdrop > .modal.modal .close-btn { top: 12px; }
  body #modal-backdrop > .modal.modal > #modal-body { padding: 10px 14px; }
  body #modal-body .v27-purchase-summary { grid-template-columns: 120px minmax(0, 1fr); min-height: 104px; margin-bottom: 9px; }
  body #modal-body .v27-purchase-summary::before { min-height: 102px; height: 102px; }
  body #modal-body .v27-purchase-summary > span { font-size: 15px; padding: 5px 8px; margin-bottom: 5px; }
  body #modal-body .v27-purchase-summary > strong { font-size: 27px; }
  body #modal-backdrop > .modal.modal #modal-body:has(.v27-purchase-summary) > .button-row > button { min-height: 39px; font-size: 17px; padding: 7px; }
}