/* B2 artwork translated into real, accessible menus. Load after v31 styles. */
body #modal-backdrop {
  --menu-ink: #082766;
  --menu-muted: #3c6088;
  --menu-blue: #1499f4;
  --menu-edge: #124b94;
  --menu-line: #77bae8;
  --menu-paper: #fffdf0;
  --menu-well: #d8f1ff;
  --menu-gold: #ffda24;
  background: #17355352;
  padding: 22px;
  backdrop-filter: none;
}

body #modal-backdrop > .modal.modal {
  width: min(620px, 100%);
  max-height: calc(100dvh - 44px);
  padding: 10px;
  border: 4px solid #082967;
  border-radius: 0;
  background: #138ce9;
  color: #082766;
  box-shadow: inset 0 0 0 3px #7bdcff, inset 0 -6px 0 #0053ba, 5px 7px 0 #082967;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, calc(100% - 14px) 7px, calc(100% - 7px) 7px, calc(100% - 7px) 14px, 100% 14px, 100% calc(100% - 14px), calc(100% - 7px) calc(100% - 14px), calc(100% - 7px) calc(100% - 7px), calc(100% - 14px) calc(100% - 7px), calc(100% - 14px) 100%, 14px 100%, 14px calc(100% - 7px), 7px calc(100% - 7px), 7px calc(100% - 14px), 0 calc(100% - 14px), 0 14px, 7px 14px, 7px 7px, 14px 7px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #0969c4 #a6e7ff;
}

body #modal-backdrop > .modal.modal::before { display: none; }
body #modal-backdrop > .modal.character-modal { width: min(940px, 100%); }
body #modal-backdrop > .modal.v25-store-modal { width: min(870px, 100%); }
body #modal-backdrop > .modal.v25-overview-modal { width: min(790px, 100%); }
body #modal-backdrop > .modal.modal > #modal-title {
  margin: 0;
  padding: 13px 52px 16px 18px;
  background: #bdeaff;
  border: 3px solid #effeff;
  border-bottom: 4px solid #2aa6ee;
  color: #072462;
  box-shadow: inset 0 4px #dff7ff;
  font-size: 36px;
  font-weight: 900;
  font-family: var(--v33-display, inherit);
  line-height: 1.2;
  letter-spacing: .035em;
  text-align: center;
  text-shadow: 1px 0 #082766;
  overflow-wrap: anywhere;
}
body #modal-backdrop > .modal.modal > #modal-body {
  padding: 20px;
  border: 3px solid #dcf8ff;
  border-top: 0;
  background: #fffdf0;
  min-height: 70px;
}
body #modal-backdrop > .modal.modal .close-btn {
  z-index: 2;
  right: 23px;
  top: 23px;
  width: 35px;
  height: 35px;
  min-height: 0;
  padding: 0;
  border: 3px solid #0a367d;
  border-radius: 0;
  background: #e7f9ff;
  color: #082766;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #8acdf9, 2px 3px #0054a3;
  font-size: 29px;
  font-weight: 900;
  line-height: 24px;
}

body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn) {
  min-height: 49px;
  padding: 12px 17px;
  border: 3px solid #0a367d;
  border-radius: 0;
  color: #082766;
  font-weight: 850;
  font-family: var(--v33-display, inherit);
  line-height: 1.3;
  text-shadow: none;
  overflow-wrap: anywhere;
}
body #modal-backdrop > .modal.modal .gold-btn {
  background: #ffdc28;
  box-shadow: inset 3px 3px #fff7a9, inset -3px -5px #df9d00, 3px 4px #0a367d;
}
body #modal-backdrop > .modal.modal .quiet-btn {
  background: #ccefff;
  box-shadow: inset 3px 3px #f3ffff, inset -3px -5px #3dacf5, 3px 4px #0a367d;
}
body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn):hover:not(:disabled) {
  filter: brightness(1.04);
  border-color: #061d54;
}
body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn):active:not(:disabled) {
  transform: translate(1px, 2px);
}
body #modal-body :is(input:not([type="range"]), select) {
  min-height: 43px;
  background: #effbff;
  border: 2px solid #327ebc;
  border-radius: 0;
  color: #082766;
  box-shadow: inset 3px 3px #c9e9f9;
}
body #modal-body input[type="range"] { accent-color: #0a7dde; }
body #modal-body :is(.field, .setting-head, .rule-row strong) { font-weight: 750; }
body #modal-body .setting {
  padding: 13px 15px;
  background: #d9f2ff;
  border: 2px solid #91cef1;
  margin: 11px 0;
  box-shadow: inset 3px 3px #f4ffff;
}
body #modal-body :is(.setting-head b, .countdown) { color: #0570bb; }
body #modal-body .text-btn { font-weight: 700; color: #075ca5; }
body #modal-body :is(.muted, .rule-row p) { color: #3b618a; }
body #modal-body .rule-row {
  padding: 14px 11px;
  border-bottom: 2px solid #b2dff5;
}
body #modal-body .rule-row:nth-child(2n) { background: #e6f6ff; }
body #modal-body .rule-row > b { color: #078cdb; font-weight: 900; }

/* The property is illustrated beside its price, not stranded above empty space. */
body #modal-backdrop > .modal.v27-decision-modal { width: min(570px, 100%); }
body #modal-body .v27-purchase-summary {
  display: grid;
  grid-template-columns: minmax(130px, .95fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 21px;
  align-items: center;
  min-height: 215px;
  padding: 0;
  margin: 0 0 14px;
  text-align: left;
}
body #modal-body .v27-purchase-summary::before {
  content: '';
  display: block;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  aspect-ratio: 1;
  min-height: 190px;
  background: url('../assets/ui-v33/property-hotel.png') center / contain no-repeat;
  image-rendering: pixelated;
}
body #modal-body .v27-purchase-summary > span {
  grid-column: 2;
  align-self: end;
  padding-bottom: 10px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  font-weight: 850;
  color: #082766;
}
body #modal-body .v27-purchase-summary > strong {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin: 0;
  color: #f02d50;
  font-size: 48px;
  font-weight: 900;
  font-family: var(--v33-display, inherit);
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-shadow: 1px 0 #f02d50;
  overflow-wrap: anywhere;
}
body #modal-body .v27-purchase-summary > p {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin: 8px 0 0;
  color: #3c6088;
}
body #modal-body:has(.v27-purchase-summary) > .button-row {
  gap: 17px;
  margin-top: 5px;
  padding-bottom: 5px;
}
body #modal-body:has(.v27-purchase-summary) > .button-row > button {
  font-size: 24px;
  min-height: 61px;
}

/* Blue and gold blocks carry the same visual vocabulary across all menus. */
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: 2px solid #79bceb;
  border-radius: 0;
  background: #dff3ff;
  box-shadow: inset 3px 3px #f4ffff;
  color: #082766;
}
body #modal-body .facts { gap: 11px; }
body #modal-backdrop > .modal.modal .fact { padding: 13px; }
body #modal-body .fact strong { color: #0a61b0; font-size: 23px; font-weight: 900; }
body #modal-body .fact span { color: #395e87; font-weight: 650; }
body #modal-body .wallet-total {
  padding: 16px 20px;
  margin: 12px 0 17px;
  border: 3px solid #0d4c91;
  background: #1387db;
  color: #fff5a8;
  box-shadow: inset 3px 3px #6ed4ff, inset -3px -4px #0056ac, 3px 4px #082766;
  font-size: clamp(31px, 4vw, 45px);
  text-shadow: 2px 2px #064878;
}
body #modal-body .reward-row { padding: 13px 0; border-color: #a1d0ed; }
body #modal-body .reward-row strong { color: #174f86; }
body #modal-body .wallet-warning { background: #fff0aa; color: #865200; border-color: #d9ac30; }
body #modal-body .pack { border: 2px solid #0760b1; background: #cbeeff; box-shadow: inset 2px 2px #fff, 3px 3px #1e5593; }
body #modal-body .pack strong { color: #0b5aa6; }
body #modal-body .v25-overview-player {
  border: 3px solid #27629e;
  background: #dff4ff;
  box-shadow: inset 0 5px var(--player), inset 2px 2px #fff, 3px 4px #0a367d;
}
body #modal-body .v25-overview-total > b { color: #0968af; font-weight: 900; }
body #modal-body :is(.v25-shelf-card, .character-option) {
  border: 3px solid #3371ad;
  background: #cef0ff;
  box-shadow: inset 2px 2px #f5ffff, inset -2px -3px #91cdef, 2px 3px #0b3b7a;
}
body #modal-body :is(.v25-shelf-card, .character-option)[aria-pressed="true"] {
  border-color: #125493;
  background: #ffe472;
  box-shadow: inset 3px 3px #fff6b4, inset -2px -4px #e8ae1b, 3px 4px #0a367d;
}
body #modal-body :is(.v25-shop-checkout, .character-picker-footer) {
  background: #e1f5ff;
  border-top: 3px solid #49adea;
  padding-top: 14px;
}
body #modal-body .character-stage { background: #c4ecff; border: 3px solid #327cc2; box-shadow: inset 3px 3px #e6ffff; }
body #modal-body .character-stage-art { background: #c4ecff; }
body #modal-body .character-option-art { background: #e2f7ff; }
body #modal-body :is(.v26-investment, .v24-liquidation-item) { padding: 15px; }
body #modal-body .v26-invest-player progress { height: 12px; border: 2px solid #5b8cb8; }
body #modal-body .v26-invest-player progress::-webkit-progress-bar { background: #c0ddef; }
body #modal-body .v26-invest-player progress::-webkit-progress-value { background: var(--player); }
body #modal-body .v24-confirm-amount strong { color: #138653; font-weight: 900; }
body #modal-body .v24-funding-summary .v24-gap { color: #d52147; background: #ffe3e0; border-color: #ec8696; }
body #modal-body .result-row.self { border: 2px solid #dab840; background: #fff1a1; padding-inline: 12px; }

@media (max-width: 600px) {
  body #modal-backdrop { padding: 13px; }
  body #modal-backdrop > .modal.modal { max-height: calc(100dvh - 26px); padding: 8px; border-width: 3px; }
  body #modal-backdrop > .modal.modal > #modal-title { padding: 12px 38px 13px 9px; font-size: 24px; }
  body #modal-backdrop > .modal.modal > #modal-body { padding: 14px; }
  body #modal-backdrop > .modal.modal .close-btn { width: 30px; height: 30px; right: 20px; top: 21px; font-size: 25px; line-height: 20px; }
  body #modal-body .v27-purchase-summary { column-gap: 12px; min-height: 177px; grid-template-columns: minmax(105px, .9fr) minmax(0, 1fr); }
  body #modal-body .v27-purchase-summary::before { min-height: 158px; }
  body #modal-body .v27-purchase-summary > span { font-size: 20px; }
  body #modal-body .v27-purchase-summary > strong { font-size: 36px; }
  body #modal-body:has(.v27-purchase-summary) > .button-row { gap: 10px; }
  body #modal-body:has(.v27-purchase-summary) > .button-row > button { font-size: 24px; min-height: 55px; padding: 10px; }
  body #modal-body .v25-overview-player { padding: 14px; }
}
@media (max-width: 360px) {
  body #modal-backdrop { padding: 9px; }
  body #modal-backdrop > .modal.modal { max-height: calc(100dvh - 18px); padding: 7px; }
  body #modal-backdrop > .modal.modal > #modal-title { font-size: 24px; }
  body #modal-backdrop > .modal.modal > #modal-body { padding: 11px; }
  body #modal-body .v27-purchase-summary { column-gap: 8px; grid-template-columns: minmax(90px, .85fr) minmax(0, 1fr); min-height: 153px; }
  body #modal-body .v27-purchase-summary::before { min-height: 138px; }
  body #modal-body .v27-purchase-summary > span { font-size: 18px; }
  body #modal-body .v27-purchase-summary > strong { font-size: 30px; }
  body #modal-backdrop > .modal.modal :is(.gold-btn, .quiet-btn) { padding-inline: 10px; font-size: 14px; }
}
@media (max-height: 500px) and (min-width: 501px) {
  body #modal-backdrop { padding: 10px 17px; }
  body #modal-backdrop > .modal.modal { max-height: calc(100dvh - 20px); }
  body #modal-backdrop > .modal.modal > #modal-title { padding-block: 9px; font-size: 24px; }
  body #modal-backdrop > .modal.modal .close-btn { top: 18px; }
  body #modal-backdrop > .modal.modal > #modal-body { padding: 12px 17px; }
  body #modal-body .v27-purchase-summary { min-height: 115px; grid-template-columns: 130px minmax(0, 1fr); margin-bottom: 7px; }
  body #modal-body .v27-purchase-summary::before { min-height: 110px; height: 110px; }
  body #modal-body .v27-purchase-summary > span { font-size: 20px; padding-bottom: 5px; }
  body #modal-body .v27-purchase-summary > strong { font-size: 36px; }
  body #modal-body:has(.v27-purchase-summary) > .button-row > button { min-height: 45px; font-size: 18px; padding: 8px; }
}