/* Bank room: the exchange of DACITY for dollars (exchange/exchange.js). A trading desk in the city's neon look:
   market bar, wallet, trade panel, order book with depth, last trades, and the player's own activity in tabs. */

.bankx {
  width: min(1180px, 100%); margin: 14px 0 110px; text-align: left; /* room below for the dock */
  --buy: #4fdc8a; --sell: #ff5c8a; --gold: #ffd23f;
  --card: linear-gradient(180deg, rgba(30, 12, 52, .92), rgba(16, 8, 32, .92)); --edge2: rgba(255, 120, 200, .22);
}
.bankx .buy { color: var(--buy); } .bankx .sell { color: var(--sell); }
.bx-panel, .bx-market, .bx-wallet { border: 1px solid var(--edge2); border-radius: 18px; background: var(--card); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.bx-state { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); }
/* How to get DUSD in three steps (exchange.js), in the Bank's state row while nothing else is said there. */
.bx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.bx-steps[hidden] { display: none; }
.bx-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(28, 10, 46, .85); border: 1px solid var(--line); }
.bx-steps li > b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: #1c0a2e;
  background: linear-gradient(180deg, #fff3b0, var(--gold, #ffd23f)); font: 800 14px Inter, sans-serif; }
.bx-steps li div { font-size: 13px; color: var(--muted); min-width: 0; }
.bx-steps li strong { display: block; color: var(--text); font-size: 14px; }
@media (max-width: 900px) { .bx-steps { grid-template-columns: 1fr; } }
.bx-panel .empty-line { color: var(--muted); font-size: 13px; padding: 14px 4px; text-align: center; }

/* Coins */
.bx-coin { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 20px var(--head, Oswald), sans-serif; color: #2a1400;
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 45%, #c88400); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 16px rgba(255, 210, 63, .45); }
.bx-coin.usd { color: #062a14; background: radial-gradient(circle at 35% 30%, #c9ffe0, var(--buy) 45%, #1d8f52); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 16px rgba(79, 220, 138, .4); }
/* DACITY: the DaCity logo itself - the rounded badge in the sunset gradient with the white slanted D. */
.bx-coin.d { border-radius: 26%; color: #fff; font-style: italic; font-size: 24px;
  background: linear-gradient(150deg, #ffc27a, #ff6ab0 45%, #ff3ea5 62%, #9b3cff);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 0 14px rgba(255, 62, 165, .55);
  text-shadow: 2px 2px 0 rgba(120, 30, 110, .7); }

/* Market bar */
.bx-market { display: grid; grid-template-columns: auto 1fr minmax(140px, 220px); align-items: center; gap: 18px; padding: 14px 18px; margin-bottom: 12px; }
.bx-pair { display: flex; align-items: center; gap: 10px; }
.bx-pair b { display: block; font: 700 18px var(--head, Oswald), sans-serif; letter-spacing: 1px; color: #fff; }
.bx-pair b i { font-style: normal; color: var(--muted); }
.bx-pair small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.bx-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bx-stat { display: flex; flex-direction: column; gap: 1px; min-width: 70px; }
.bx-stat small { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.bx-stat b { font: 700 15px Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.bx-stat.main b { font: 700 22px var(--head, Oswald), sans-serif; color: #fff; text-shadow: 0 0 12px rgba(255, 62, 165, .45); }
.bx-stat em { font-style: normal; font-size: 12px; font-weight: 800; }
.bx-spark { width: 100%; height: 48px; }
.bx-spark .up { stroke: var(--buy); fill: var(--buy); } .bx-spark .down { stroke: var(--sell); fill: var(--sell); }
.bx-spark polyline { fill: none; }

/* Wallet */
.bx-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.bx-bal { display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 6px 14px 6px 6px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.bx-bal small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.bx-bal b { display: block; font: 700 22px/1.15 var(--head, Oswald), sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.bx-bal.usd b { color: var(--buy); }
.bx-bal span:not(.bx-coin) { display: block; color: var(--muted); font-size: 11.5px; }
.bx-cash { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* Layout */
.bx-grid { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(0, .85fr); gap: 12px; align-items: start; }
.bx-panel { padding: 14px; }
.bx-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bx-panel h3 { font: 600 14px var(--head, Oswald), sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #ff9ad5; }
.bx-panel header span { color: var(--muted); font-size: 11px; }

/* Trade panel */
.bx-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; margin-bottom: 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.bx-tab { height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font: 800 14px Inter, sans-serif; cursor: pointer; }
.bx-tab.buy[aria-selected="true"] { background: var(--buy); color: #062a14; box-shadow: 0 0 14px rgba(79, 220, 138, .45); }
.bx-tab.sell[aria-selected="true"] { background: var(--sell); color: #2a0614; box-shadow: 0 0 14px rgba(255, 92, 138, .45); }
#bxForm { display: flex; flex-direction: column; gap: 10px; }
#bxForm label, .bx-wform label { display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.bx-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 3, 20, .6); transition: border-color .15s, box-shadow .15s; }
.bx-input i { padding: 0 2px 0 12px; color: var(--muted); font-style: normal; font-weight: 700; }
.bx-input em { padding: 0 12px; color: var(--muted); font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.bx-input input, .bx-wform input {
  flex: 1; min-width: 0; height: 42px; padding: 0 4px; border: 0; background: transparent; color: #fff;
  font: 700 16px Inter, sans-serif; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
.bx-wform input { border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 3, 20, .6); padding: 0 12px; }
.bx-input:focus-within, .bx-wform input:focus { outline: none; border-color: var(--accent, #ff3ea5); box-shadow: 0 0 0 3px rgba(255, 62, 165, .18); }
.bx-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.bx-quick button { height: 28px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text); font: 700 12px Inter, sans-serif; cursor: pointer; }
.bx-quick button:hover { border-color: var(--edge, #ff78c8); color: #fff; }
.bx-sum { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); }
.bx-sum div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.bx-sum span { color: var(--muted); }
.bx-sum b { color: #fff; font-variant-numeric: tabular-nums; }
.bx-trade[data-side="buy"] .bx-sum div:last-child b { color: var(--buy); }
.bx-trade[data-side="sell"] .bx-sum div:last-child b { color: var(--buy); }
.bx-est, .bx-msg { color: var(--muted); font-size: 12px; margin: 0; line-height: 1.4; }
.bx-est.bad, .bx-msg.bad { color: #ff8aa8; }
.bx-trade .bx-go { height: 46px; border-radius: 14px; background: var(--buy); color: #062a14; font-size: 15px; box-shadow: 0 0 18px rgba(79, 220, 138, .35); }
.bx-trade[data-side="sell"] .bx-go { background: var(--sell); color: #2a0614; box-shadow: 0 0 18px rgba(255, 92, 138, .35); }

/* Order book and trades */
.bx-cols, .bx-row, .bx-trow:not(.mine) { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 8px; align-items: center; }
.bx-cols { padding: 0 8px 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-align: right; border-bottom: 1px solid var(--edge2); margin-bottom: 4px; }
.bx-cols span:first-child { text-align: left; }
.bx-cols.four, .bx-last .bx-trow { grid-template-columns: 1fr .8fr 1fr .8fr; }
.bx-side { display: flex; flex-direction: column; gap: 1px; }
.bx-row, .bx-trow {
  position: relative; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text);
  font: 500 13px Inter, sans-serif; text-align: right; font-variant-numeric: tabular-nums; isolation: isolate;
}
.bx-row { cursor: pointer; }
.bx-row::before { content: ''; position: absolute; inset: 1px 0 1px auto; width: var(--d, 0%); border-radius: 6px; z-index: -1; opacity: .16; }
.asks .bx-row::before { background: var(--sell); } .bids .bx-row::before { background: var(--buy); }
.bx-row b, .bx-trow b { text-align: left; font-weight: 800; }
.bx-row:hover { background: rgba(255, 255, 255, .06); }
.asks .bx-row b { color: var(--sell); } .bids .bx-row b { color: var(--buy); }
.bx-spread { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.bx-spread b { font: 700 20px var(--head, Oswald), sans-serif; color: #fff; }
.bx-spread span { color: var(--muted); font-size: 11.5px; }
.bx-trow b { color: #fff; } .bx-trow.buy b { color: var(--buy); } .bx-trow.sell b { color: var(--sell); }
.bx-trow time { color: var(--muted); font-size: 11.5px; }

/* Your activity */
.bx-mine { margin-top: 12px; }
.bx-mtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--edge2); }
.bx-mtabs button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 800 12.5px Inter, sans-serif; cursor: pointer; }
.bx-mtabs button[aria-selected="true"] { background: var(--sunset-btn, linear-gradient(90deg, #ff8a3d, #ff3ea5 55%, #9b4dff)); border-color: transparent; color: #fff; }
.bx-mtabs small { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 11px; }
.bx-mtabs small:empty { display: none; }
#bxOrders, #bxMyTrades { display: flex; flex-direction: column; gap: 4px; }
#bxOrders[hidden], #bxMyTrades[hidden] { display: none; }
.bx-orow, .bx-trow.mine { display: grid; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); font: 500 13px Inter, sans-serif; text-align: left; }
.bx-orow { grid-template-columns: 56px 110px 1fr auto; }
.bx-trow.mine { grid-template-columns: 70px 1.3fr .8fr .9fr .9fr; }
.bx-trow.mine span, .bx-trow.mine b { text-align: right; }
.bx-trow em, .bx-orow em { font-style: normal; font-weight: 800; }
.bx-trow.buy em, .bx-orow.buy em { color: var(--buy); } .bx-trow.sell em, .bx-orow.sell em { color: var(--sell); }
.bx-orow b { color: #fff; font-variant-numeric: tabular-nums; }
.bx-fill { position: relative; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bx-fill i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(255, 62, 165, .5), rgba(155, 77, 255, .5)); }
.bx-fill small { position: relative; display: block; text-align: center; line-height: 22px; font-size: 11.5px; font-weight: 700; color: #fff; }
.bx-st { color: var(--muted); font-style: normal; font-size: 12px; font-weight: 700; }
.bx-orow .btn-ghost { height: 30px; padding: 0 14px; }

/* Add / withdraw dollars */
.bx-modal { width: min(520px, calc(100vw - 32px)); }
.bx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bx-modal h3 { margin: 16px 0 6px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
.bx-addr { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; }
.bx-addr code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 3, 20, .6); font-size: 13px; color: #fff; }
.bx-wform { display: flex; flex-direction: column; gap: 10px; }
.bx-hist { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; }
.bx-hist li { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: 12.5px; }
.bx-hist em { font-style: normal; color: var(--muted); }
.bx-hist time { color: var(--muted); font-size: 11px; }

@media (max-width: 1040px) {
  .bx-grid { grid-template-columns: minmax(260px, 320px) 1fr; }
  .bx-trade { grid-row: span 2; }
  .bx-market { grid-template-columns: auto 1fr; }
  .bx-spark { grid-column: 1 / -1; height: 40px; }
}
@media (max-width: 680px) {
  /* a phone: the balances and Buy/Sell right under the pair, the order book and the stats after them (design review, 5 Nov 2026) */
  .bankx { display: flex; flex-direction: column; gap: 10px; }
  .bankx > * { margin: 0; }
  .bankx .bx-grid { display: contents; }
  .bankx .bx-mkts { order: -5; } .bankx .bx-wallet { order: -4; } .bankx .bx-trade { order: -3; } .bankx .bx-steps { order: -2; }
  .bx-grid { grid-template-columns: 1fr; }
  .bx-trade { grid-row: auto; }
  .bx-market { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
  .bx-stats { gap: 6px 16px; }
  .bx-stat { min-width: 0; }
  .bx-wallet { padding: 10px; }
  .bx-bal { flex: 1 1 100%; min-width: 0; }
  .bx-cash { margin-left: 0; width: 100%; }
  .bx-cash > * { flex: 1; }
  .bx-orow { grid-template-columns: 46px 1fr auto; }
  .bx-orow .bx-fill { grid-column: 1 / -1; grid-row: 2; }
  .bx-trow.mine { grid-template-columns: 60px 1fr .8fr; }
  .bx-trow.mine b, .bx-trow.mine time { display: none; }
}

/* ---------- Vault look ----------
   The Bank as the city's vault: dark brushed steel panels in a brass frame with rivets, the market bar as a lit
   quote board, the trade panel as a teller terminal with real keys, gold for DACITY and money green for dollars. */
.bankx {
  --brass: linear-gradient(135deg, #fff1b8, #e0a83a 22%, #8a5a12 48%, #f2c45a 70%, #7a4c0c);
  --steel: linear-gradient(180deg, #1c1630 0%, #120d22 55%, #0c0918 100%);
  --brush: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
  --money: #3ee08a; --gold-txt: #ffd56b;
  --rivet: radial-gradient(circle at 35% 35%, #fff4c9, #c99327 45%, #5a3a08 75%);
  position: relative; isolation: isolate;
}
/* The room's title in struck gold. */
.room-inner:has(> .bankx:not([hidden])) .room-title {
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #fffbe6 10%, #ffd36b 45%, #c8841a 70%, #ffe7a3); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #6b4208) drop-shadow(0 0 18px rgba(255, 196, 80, .45));
}
/* A faint vault door behind the room. */
.bankx::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 120px; width: 760px; height: 760px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 213, 107, .05) 0 6deg, transparent 6deg 30deg),
    radial-gradient(circle, rgba(255, 213, 107, .06) 0 6%, transparent 6.5% 34%, rgba(255, 213, 107, .12) 34.4% 35.4%, transparent 35.8% 47%, rgba(255, 213, 107, .1) 47.4% 49%, transparent 49.4%);
  mask: radial-gradient(circle, #000 55%, transparent 72%);
}

/* Panels: steel inside a thin brass frame, a rivet in each top corner. */
.bankx .bx-panel, .bankx .bx-market, .bankx .bx-wallet {
  position: relative; border: 1.5px solid transparent;
  background: var(--brush) padding-box, var(--steel) padding-box, var(--brass) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 170, .12), inset 0 0 40px rgba(0, 0, 0, .35);
}
.bankx .bx-panel::after, .bankx .bx-market::after, .bankx .bx-wallet::after {
  content: ''; position: absolute; inset: 7px 7px auto; height: 7px; pointer-events: none;
  background: var(--rivet) left / 7px 7px no-repeat, var(--rivet) right / 7px 7px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.bankx .bx-panel h3 {
  color: transparent; background: linear-gradient(180deg, #fff3c4, #f1b84a 60%, #b27a1c); -webkit-background-clip: text; background-clip: text;
  letter-spacing: 2.4px; text-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 196, 80, .35));
}

/* Market bar: a lit quote board. */
.bankx .bx-market { padding: 16px 20px; background: var(--brush) padding-box, linear-gradient(180deg, #0f0c1d, #07060f) padding-box, var(--brass) border-box; }
.bankx .bx-stat small { color: #b9a37a; }
.bankx .bx-stat b { font-family: var(--head, Oswald), sans-serif; font-size: 18px; letter-spacing: .5px; color: #ffe8a8; text-shadow: 0 0 10px rgba(255, 200, 80, .35); }
.bankx .bx-stat b.buy { color: var(--money); text-shadow: 0 0 10px rgba(62, 224, 138, .45); }
.bankx .bx-stat b.sell { color: var(--sell); text-shadow: 0 0 10px rgba(255, 92, 138, .45); }
.bankx .bx-stat.main b { font-size: 28px; color: #fff6d6; text-shadow: 0 0 16px rgba(255, 200, 80, .55); }
.bankx .bx-stats { padding: 8px 14px; border-radius: 10px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 213, 107, .12), inset 0 0 18px rgba(0, 0, 0, .6); }
.bankx .bx-pair b { color: transparent; background: linear-gradient(180deg, #fff, #ffe39a); -webkit-background-clip: text; background-clip: text; font-size: 20px; }
.bankx .bx-pair small { color: #b9a37a; letter-spacing: 1px; text-transform: uppercase; }

/* Coins: struck metal with a milled rim. */
.bankx .bx-coin { width: 46px; height: 46px; }
.bankx .bx-coin.usd {
  font-size: 22px; color: #04361b;
  background: repeating-conic-gradient(rgba(0, 0, 0, .16) 0 4deg, transparent 4deg 8deg), radial-gradient(circle at 35% 30%, #dcffe9, #3ee08a 46%, #12773f 78%);
  box-shadow: 0 0 0 3px #0d4a29, 0 0 0 4.5px rgba(200, 255, 220, .5), 0 0 20px rgba(62, 224, 138, .5);
}
.bankx .bx-coin.d { box-shadow: 0 0 0 3px #4b1240, 0 0 0 4.5px rgba(255, 220, 240, .5), 0 0 20px rgba(255, 62, 165, .55); }

/* Wallet: safe deposit boxes. */
.bankx .bx-bal {
  min-width: 230px; padding: 10px 18px 10px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .25)), #0b0817;
  box-shadow: inset 0 0 0 1px rgba(255, 213, 107, .18), inset 0 -3px 0 rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .35);
}
.bankx .bx-bal b { font-size: 26px; color: #fff3cf; text-shadow: 0 0 12px rgba(255, 200, 80, .35); }
.bankx .bx-bal.usd b { color: var(--money); text-shadow: 0 0 12px rgba(62, 224, 138, .45); }
.bankx .bx-bal small { color: #b9a37a; }

/* Buttons with a body you press down: Add dollars in gold, the trade button in money green or sell red. */
.bankx .bx-cash .btn-primary, .bankx .bx-trade .bx-go {
  position: relative; border: 0; transition: transform .08s, box-shadow .08s, filter .15s;
}
.bankx .bx-cash .btn-primary {
  color: #3a2200; background: linear-gradient(180deg, #ffe69a, #f4b73d 55%, #d18a14);
  box-shadow: 0 4px 0 #7a4c0c, 0 8px 18px rgba(244, 183, 61, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.bankx .bx-cash .btn-ghost { border-color: rgba(255, 213, 107, .45); color: #ffe39a; box-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.bankx .bx-trade .bx-go {
  height: 54px; border-radius: 14px; font-size: 17px; letter-spacing: 2px; color: #03301a;
  background: linear-gradient(180deg, #8dffbf, #3ee08a 50%, #1fae62);
  box-shadow: 0 5px 0 #0e6a39, 0 10px 24px rgba(62, 224, 138, .4), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.bankx .bx-trade[data-side="sell"] .bx-go { color: #3a0618; background: linear-gradient(180deg, #ffa3bd, #ff5c8a 50%, #d92f62); box-shadow: 0 5px 0 #8a1739, 0 10px 24px rgba(255, 92, 138, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
.bankx .bx-cash .btn-primary:hover, .bankx .bx-trade .bx-go:hover { filter: brightness(1.08); }
.bankx .bx-cash .btn-primary:active, .bankx .bx-trade .bx-go:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* Trade panel: a teller terminal. Fields are lit screens, quick amounts are keys. */
.bankx .bx-tabs { background: #07050e; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 213, 107, .15); }
.bankx .bx-tab { font-family: var(--head, Oswald), sans-serif; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; }
.bankx .bx-tab.buy[aria-selected="true"] { background: linear-gradient(180deg, #8dffbf, #3ee08a 55%, #1fae62); box-shadow: 0 3px 0 #0e6a39, 0 0 16px rgba(62, 224, 138, .45); }
.bankx .bx-tab.sell[aria-selected="true"] { background: linear-gradient(180deg, #ffa3bd, #ff5c8a 55%, #d92f62); box-shadow: 0 3px 0 #8a1739, 0 0 16px rgba(255, 92, 138, .45); }
.bankx .bx-input {
  border: 1px solid rgba(62, 224, 138, .25); border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgba(62, 224, 138, .04) 0 1px, transparent 1px 3px), #040a08;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
}
.bankx .bx-input input { color: #b6ffd6; font-family: var(--head, Oswald), sans-serif; font-size: 19px; letter-spacing: 1px; text-shadow: 0 0 8px rgba(62, 224, 138, .55); }
.bankx .bx-input input::placeholder { color: rgba(182, 255, 214, .3); text-shadow: none; }
.bankx .bx-input i, .bankx .bx-input em { color: rgba(182, 255, 214, .6); }
.bankx .bx-input:focus-within { border-color: var(--money); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8), 0 0 0 3px rgba(62, 224, 138, .18); }
.bankx .bx-quick button {
  height: 34px; border: 0; border-radius: 8px; color: #fff3cf; font: 700 13px var(--head, Oswald), sans-serif; letter-spacing: .5px;
  background: linear-gradient(180deg, #2c2442, #1a1430); box-shadow: 0 3px 0 #07050e, inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 213, 107, .14);
  transition: transform .06s, box-shadow .06s;
}
.bankx .bx-quick button:hover { color: #ffe39a; box-shadow: 0 3px 0 #07050e, inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 213, 107, .5); }
.bankx .bx-quick button:active { transform: translateY(3px); box-shadow: 0 0 0 #07050e, inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 213, 107, .5); }
.bankx .bx-sum { background: #07050e; box-shadow: inset 0 0 0 1px rgba(255, 213, 107, .12); }
.bankx .bx-sum b { font-family: var(--head, Oswald), sans-serif; font-size: 15px; letter-spacing: .5px; color: #ffe8a8; }

/* Order book and trades: a board of lit figures. */
.bankx .bx-cols { color: #b9a37a; border-bottom-color: rgba(255, 213, 107, .2); }
.bankx .bx-row, .bankx .bx-trow { font-family: var(--head, Oswald), sans-serif; font-size: 14px; letter-spacing: .4px; }
.bankx .asks .bx-row b { text-shadow: 0 0 8px rgba(255, 92, 138, .5); }
.bankx .bids .bx-row b { color: var(--money); text-shadow: 0 0 8px rgba(62, 224, 138, .5); }
.bankx .bx-row::before { opacity: .22; }
.bankx .bx-spread {
  margin: 8px 0; border-radius: 10px; background: var(--brass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 #5a3a08, 0 6px 14px rgba(0, 0, 0, .4);
}
.bankx .bx-spread b, .bankx .bx-spread span { color: #2a1800; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); font-weight: 800; }
.bankx .bx-panel .empty-line { border: 1px dashed rgba(255, 213, 107, .2); border-radius: 10px; color: #a8957a; }
.bankx .bx-mtabs { border-bottom-color: rgba(255, 213, 107, .2); }
.bankx .bx-mtabs button[aria-selected="true"] { background: linear-gradient(180deg, #ffe69a, #f4b73d 55%, #d18a14); color: #3a2200; box-shadow: 0 3px 0 #7a4c0c; }
.bankx .bx-orow, .bankx .bx-trow.mine { background: #0b0817; box-shadow: inset 0 0 0 1px rgba(255, 213, 107, .1); }
.bankx .bx-fill i { background: linear-gradient(90deg, #d18a14, #ffe69a); }
.bankx .bx-fill small { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: reduce) { .bankx .bx-go, .bankx .bx-quick button, .bankx .bx-cash .btn-primary { transition: none; } }

/* ---------- Vault room ----------
   The whole room is the inside of the vault: dark marble with fine gold veins, the round vault door with its bolts and
   wheel behind the desk, a warm light from the floor. Panels carry a banknote rosette pattern in the steel. */
#room:has(.bankx:not([hidden])) {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .6)),
    radial-gradient(60% 40% at 50% 104%, rgba(255, 190, 80, .22), transparent 70%),
    radial-gradient(90% 60% at 50% -10%, rgba(62, 224, 138, .10), transparent 65%),
    linear-gradient(180deg, rgba(5, 4, 10, .25), rgba(5, 4, 10, .7)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1100' viewBox='0 0 1600 1100' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .004' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .15  0 0 0 -1.8 1.25'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .006' numOctaves='6' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .8  0 0 0 0 .42  1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .85 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3C/filter%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .012' numOctaves='5' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 .9  0 0 0 0 .85  0 0 0 0 1  0 1 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1600' height='1100' fill='%2306050c'/%3E%3Crect width='1600' height='1100' filter='url(%23b)'/%3E%3Crect width='1600' height='1100' filter='url(%23w)' opacity='.18'/%3E%3Crect width='1600' height='1100' filter='url(%23v)' opacity='.55'/%3E%3C/svg%3E") center top / cover no-repeat,
    #0b0a14;
}
.bankx::before {
  top: 40px; width: 980px; height: 980px; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffd56b' stroke-width='3'%3E%3Ccircle cx='300' cy='300' r='292' stroke-width='6'/%3E%3Ccircle cx='300' cy='300' r='280'/%3E%3Ccircle cx='300' cy='300' r='244' stroke-width='5'/%3E%3Ccircle cx='300' cy='300' r='190'/%3E%3Cline x1='482.0' y1='300.0' x2='462.0' y2='300.0'/%3E%3Cline x1='481.0' y1='319.0' x2='471.1' y2='318.0'/%3E%3Cline x1='478.0' y1='337.8' x2='468.2' y2='335.8'/%3E%3Cline x1='473.1' y1='356.2' x2='463.6' y2='353.2'/%3E%3Cline x1='466.3' y1='374.0' x2='457.1' y2='370.0'/%3E%3Cline x1='457.6' y1='391.0' x2='440.3' y2='381.0'/%3E%3Cline x1='447.2' y1='407.0' x2='439.2' y2='401.1'/%3E%3Cline x1='435.3' y1='421.8' x2='427.8' y2='415.1'/%3E%3Cline x1='421.8' y1='435.3' x2='415.1' y2='427.8'/%3E%3Cline x1='407.0' y1='447.2' x2='401.1' y2='439.2'/%3E%3Cline x1='391.0' y1='457.6' x2='381.0' y2='440.3'/%3E%3Cline x1='374.0' y1='466.3' x2='370.0' y2='457.1'/%3E%3Cline x1='356.2' y1='473.1' x2='353.2' y2='463.6'/%3E%3Cline x1='337.8' y1='478.0' x2='335.8' y2='468.2'/%3E%3Cline x1='319.0' y1='481.0' x2='318.0' y2='471.1'/%3E%3Cline x1='300.0' y1='482.0' x2='300.0' y2='462.0'/%3E%3Cline x1='281.0' y1='481.0' x2='282.0' y2='471.1'/%3E%3Cline x1='262.2' y1='478.0' x2='264.2' y2='468.2'/%3E%3Cline x1='243.8' y1='473.1' x2='246.8' y2='463.6'/%3E%3Cline x1='226.0' y1='466.3' x2='230.0' y2='457.1'/%3E%3Cline x1='209.0' y1='457.6' x2='219.0' y2='440.3'/%3E%3Cline x1='193.0' y1='447.2' x2='198.9' y2='439.2'/%3E%3Cline x1='178.2' y1='435.3' x2='184.9' y2='427.8'/%3E%3Cline x1='164.7' y1='421.8' x2='172.2' y2='415.1'/%3E%3Cline x1='152.8' y1='407.0' x2='160.8' y2='401.1'/%3E%3Cline x1='142.4' y1='391.0' x2='159.7' y2='381.0'/%3E%3Cline x1='133.7' y1='374.0' x2='142.9' y2='370.0'/%3E%3Cline x1='126.9' y1='356.2' x2='136.4' y2='353.2'/%3E%3Cline x1='122.0' y1='337.8' x2='131.8' y2='335.8'/%3E%3Cline x1='119.0' y1='319.0' x2='128.9' y2='318.0'/%3E%3Cline x1='118.0' y1='300.0' x2='138.0' y2='300.0'/%3E%3Cline x1='119.0' y1='281.0' x2='128.9' y2='282.0'/%3E%3Cline x1='122.0' y1='262.2' x2='131.8' y2='264.2'/%3E%3Cline x1='126.9' y1='243.8' x2='136.4' y2='246.8'/%3E%3Cline x1='133.7' y1='226.0' x2='142.9' y2='230.0'/%3E%3Cline x1='142.4' y1='209.0' x2='159.7' y2='219.0'/%3E%3Cline x1='152.8' y1='193.0' x2='160.8' y2='198.9'/%3E%3Cline x1='164.7' y1='178.2' x2='172.2' y2='184.9'/%3E%3Cline x1='178.2' y1='164.7' x2='184.9' y2='172.2'/%3E%3Cline x1='193.0' y1='152.8' x2='198.9' y2='160.8'/%3E%3Cline x1='209.0' y1='142.4' x2='219.0' y2='159.7'/%3E%3Cline x1='226.0' y1='133.7' x2='230.0' y2='142.9'/%3E%3Cline x1='243.8' y1='126.9' x2='246.8' y2='136.4'/%3E%3Cline x1='262.2' y1='122.0' x2='264.2' y2='131.8'/%3E%3Cline x1='281.0' y1='119.0' x2='282.0' y2='128.9'/%3E%3Cline x1='300.0' y1='118.0' x2='300.0' y2='138.0'/%3E%3Cline x1='319.0' y1='119.0' x2='318.0' y2='128.9'/%3E%3Cline x1='337.8' y1='122.0' x2='335.8' y2='131.8'/%3E%3Cline x1='356.2' y1='126.9' x2='353.2' y2='136.4'/%3E%3Cline x1='374.0' y1='133.7' x2='370.0' y2='142.9'/%3E%3Cline x1='391.0' y1='142.4' x2='381.0' y2='159.7'/%3E%3Cline x1='407.0' y1='152.8' x2='401.1' y2='160.8'/%3E%3Cline x1='421.8' y1='164.7' x2='415.1' y2='172.2'/%3E%3Cline x1='435.3' y1='178.2' x2='427.8' y2='184.9'/%3E%3Cline x1='447.2' y1='193.0' x2='439.2' y2='198.9'/%3E%3Cline x1='457.6' y1='209.0' x2='440.3' y2='219.0'/%3E%3Cline x1='466.3' y1='226.0' x2='457.1' y2='230.0'/%3E%3Cline x1='473.1' y1='243.8' x2='463.6' y2='246.8'/%3E%3Cline x1='478.0' y1='262.2' x2='468.2' y2='264.2'/%3E%3Cline x1='481.0' y1='281.0' x2='471.1' y2='282.0'/%3E%3Ccircle cx='300' cy='300' r='150' stroke-width='4'/%3E%3Cg stroke-width='14' stroke-linecap='round'%3E%3Cline x1='300' y1='300' x2='420.0' y2='300.0'/%3E%3Cline x1='300' y1='300' x2='360.0' y2='403.9'/%3E%3Cline x1='300' y1='300' x2='240.0' y2='403.9'/%3E%3Cline x1='300' y1='300' x2='180.0' y2='300.0'/%3E%3Cline x1='300' y1='300' x2='240.0' y2='196.1'/%3E%3Cline x1='300' y1='300' x2='360.0' y2='196.1'/%3E%3C/g%3E%3Ccircle cx='300' cy='300' r='44' stroke-width='8'/%3E%3Ccircle cx='300' cy='300' r='18' fill='%23ffd56b'/%3E%3Crect x='-30' y='200' width='46' height='60' rx='8' stroke-width='5'/%3E%3Crect x='-30' y='340' width='46' height='60' rx='8' stroke-width='5'/%3E%3C/g%3E%3Cg fill='%23ffd56b'%3E%3Ccircle cx='562.0' cy='300.0' r='9'/%3E%3Ccircle cx='553.1' cy='367.8' r='9'/%3E%3Ccircle cx='526.9' cy='431.0' r='9'/%3E%3Ccircle cx='485.3' cy='485.3' r='9'/%3E%3Ccircle cx='431.0' cy='526.9' r='9'/%3E%3Ccircle cx='367.8' cy='553.1' r='9'/%3E%3Ccircle cx='300.0' cy='562.0' r='9'/%3E%3Ccircle cx='232.2' cy='553.1' r='9'/%3E%3Ccircle cx='169.0' cy='526.9' r='9'/%3E%3Ccircle cx='114.7' cy='485.3' r='9'/%3E%3Ccircle cx='73.1' cy='431.0' r='9'/%3E%3Ccircle cx='46.9' cy='367.8' r='9'/%3E%3Ccircle cx='38.0' cy='300.0' r='9'/%3E%3Ccircle cx='46.9' cy='232.2' r='9'/%3E%3Ccircle cx='73.1' cy='169.0' r='9'/%3E%3Ccircle cx='114.7' cy='114.7' r='9'/%3E%3Ccircle cx='169.0' cy='73.1' r='9'/%3E%3Ccircle cx='232.2' cy='46.9' r='9'/%3E%3Ccircle cx='300.0' cy='38.0' r='9'/%3E%3Ccircle cx='367.8' cy='46.9' r='9'/%3E%3Ccircle cx='431.0' cy='73.1' r='9'/%3E%3Ccircle cx='485.3' cy='114.7' r='9'/%3E%3Ccircle cx='526.9' cy='169.0' r='9'/%3E%3Ccircle cx='553.1' cy='232.2' r='9'/%3E%3Ccircle cx='428.0' cy='300.0' r='12'/%3E%3Ccircle cx='364.0' cy='410.9' r='12'/%3E%3Ccircle cx='236.0' cy='410.9' r='12'/%3E%3Ccircle cx='172.0' cy='300.0' r='12'/%3E%3Ccircle cx='236.0' cy='189.1' r='12'/%3E%3Ccircle cx='364.0' cy='189.1' r='12'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: radial-gradient(circle, #000 60%, transparent 75%);
  filter: drop-shadow(0 0 12px rgba(255, 196, 80, .6));
}
.bankx { --guil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffd56b' stroke-width='.6' opacity='.22'%3E%3Ccircle cx='86.0' cy='60.0' r='30'/%3E%3Ccircle cx='85.1' cy='66.7' r='30'/%3E%3Ccircle cx='82.5' cy='73.0' r='30'/%3E%3Ccircle cx='78.4' cy='78.4' r='30'/%3E%3Ccircle cx='73.0' cy='82.5' r='30'/%3E%3Ccircle cx='66.7' cy='85.1' r='30'/%3E%3Ccircle cx='60.0' cy='86.0' r='30'/%3E%3Ccircle cx='53.3' cy='85.1' r='30'/%3E%3Ccircle cx='47.0' cy='82.5' r='30'/%3E%3Ccircle cx='41.6' cy='78.4' r='30'/%3E%3Ccircle cx='37.5' cy='73.0' r='30'/%3E%3Ccircle cx='34.9' cy='66.7' r='30'/%3E%3Ccircle cx='34.0' cy='60.0' r='30'/%3E%3Ccircle cx='34.9' cy='53.3' r='30'/%3E%3Ccircle cx='37.5' cy='47.0' r='30'/%3E%3Ccircle cx='41.6' cy='41.6' r='30'/%3E%3Ccircle cx='47.0' cy='37.5' r='30'/%3E%3Ccircle cx='53.3' cy='34.9' r='30'/%3E%3Ccircle cx='60.0' cy='34.0' r='30'/%3E%3Ccircle cx='66.7' cy='34.9' r='30'/%3E%3Ccircle cx='73.0' cy='37.5' r='30'/%3E%3Ccircle cx='78.4' cy='41.6' r='30'/%3E%3Ccircle cx='82.5' cy='47.0' r='30'/%3E%3Ccircle cx='85.1' cy='53.3' r='30'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 150px 150px; }
.bankx .bx-panel, .bankx .bx-wallet {
  background: linear-gradient(180deg, rgba(28, 22, 48, .55), rgba(10, 8, 20, .75)) padding-box, var(--guil) padding-box, var(--steel) padding-box, var(--brass) border-box;
  background-blend-mode: normal, soft-light, normal, normal;
}
.bankx .bx-market {
  background: linear-gradient(180deg, rgba(15, 12, 29, .6), rgba(7, 6, 15, .8)) padding-box, var(--guil) padding-box, linear-gradient(180deg, #0f0c1d, #07060f) padding-box, var(--brass) border-box;
}
.bankx .bx-input input:focus, .bankx .bx-input input:focus-visible { outline: none; }

/* ---------- One screen on a computer ----------
   On a desktop window the whole Bank fits the screen without scrolling the page: a smaller title, the quote board and
   the wallet side by side, then the trade terminal, the order book and the trades filling the rest down to the dock.
   Long lists scroll inside their own panel. Phones and narrow windows keep the page that scrolls. */
@media (min-width: 1041px) and (min-height: 560px) {
  .room-inner:has(> .bankx:not([hidden])) { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 10px; padding-bottom: 96px; }
  .room-inner:has(> .bankx:not([hidden])) .room-title { font-size: clamp(34px, 5.4vh, 64px); line-height: 1; margin: 0; }
  .room-inner:has(> .bankx:not([hidden])) .room-sub { margin: 4px 0 0; }
  .bankx {
    flex: 1 1 auto; min-height: 0; margin: 10px 0 0;
    display: grid; gap: 10px;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(0, .9fr);
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, .8fr);
    grid-template-areas: "market market wallet" "state state state" "trade book last" "trade book mine";
  }
  .bankx > .bx-grid { display: contents; }
  /* The faint vault door stays inside the Bank, so the room does not scroll into empty space below. */
  .bankx::before { top: 50%; translate: -50% -50%; width: auto; height: min(760px, 100%); aspect-ratio: 1; }
  .bankx > .bx-market { grid-area: market; margin: 0; padding: 10px 16px; }
  .bankx > .bx-wallet { grid-area: wallet; margin: 0; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bankx > .bx-state, .bankx > .bx-steps { grid-area: state; margin: 0; }
  .bankx .bx-trade { grid-area: trade; }
  .bankx .bx-book { grid-area: book; }
  .bankx .bx-last { grid-area: last; }
  .bankx > .bx-mine { grid-area: mine; margin: 0; }
  .bankx .bx-panel { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 213, 107, .35) transparent; }
  .bankx .bx-trade { display: flex; flex-direction: column; }
  .bankx #bxForm { flex: 1; }
  .bankx .bx-trade .bx-go { margin-top: auto; }
  .bankx .bx-bal { min-width: 0; padding: 6px 10px 6px 6px; gap: 8px; }
  .bankx .bx-bal .bx-coin { width: 34px; height: 34px; font-size: 17px; }
  .bankx .bx-bal b { font-size: 20px; }
  .bankx .bx-cash { grid-column: 1 / -1; margin: 0; }
  .bankx .bx-cash > * { flex: 1; height: 34px; }
  .bankx .bx-spark { height: 40px; }
  .bankx .bx-mtabs { position: sticky; top: -14px; z-index: 1; margin: -14px -14px 8px; padding: 10px 14px; background: #0d0a19; }
}
/* Low screens (laptops): everything a little tighter. */
@media (min-width: 1041px) and (min-height: 560px) and (max-height: 900px) {
  .room-inner:has(> .bankx:not([hidden])) .room-sub { font-size: 11px; }
  .bankx .bx-panel { padding: 10px 12px; }
  .bankx .bx-market { gap: 12px; }
  .bankx .bx-stat.main b { font-size: 22px; }
  .bankx .bx-stat b { font-size: 15px; }
  .bankx .bx-pair .bx-coin { width: 36px; height: 36px; }
  .bankx .bx-tabs { margin-bottom: 8px; }
  .bankx .bx-tab { height: 32px; }
  .bankx #bxForm { gap: 7px; }
  .bankx .bx-input input { height: 34px; font-size: 16px; }
  .bankx .bx-quick button { height: 28px; }
  .bankx .bx-sum { padding: 6px 10px; }
  .bankx .bx-est { font-size: 11px; }
  .bankx .bx-trade .bx-go { height: 44px; font-size: 15px; }
  .bankx .bx-row, .bankx .bx-trow { padding: 3px 8px; font-size: 13px; }
  .bankx .bx-spread { margin: 5px 0; padding: 5px; }
  .bankx .bx-spread b { font-size: 16px; }
  .bankx .bx-mtabs { top: -10px; margin: -10px -12px 6px; padding: 8px 12px; }
  .bankx .bx-mtabs button { padding: 5px 12px; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  #room:has(.bankx:not([hidden])) { overflow: hidden; }
  .bankx > .bx-market { grid-template-columns: auto minmax(0, 1fr) minmax(90px, 170px); }
  .bankx .bx-stats { flex-wrap: nowrap; gap: 4px 16px; padding: 6px 12px; }
  .bankx .bx-stat { min-width: 0; }
}
@media (min-width: 1041px) and (min-height: 560px) and (max-height: 820px) {
  .room-inner:has(> .bankx:not([hidden])) .room-title { font-size: 34px; }
  .room-inner:has(> .bankx:not([hidden])) .room-sub { display: none; }
  .bankx { margin-top: 6px; gap: 8px; }
  .bankx > .bx-market { padding: 8px 14px; }
  .bankx .bx-stat.main b { font-size: 19px; }
  .bankx .bx-stat b { font-size: 14px; }
  .bankx .bx-stat em { font-size: 11px; }
  .bankx .bx-pair b { font-size: 17px; }
  .bankx .bx-tab { height: 30px; }
  #bxForm label { gap: 3px; }
  .bankx .bx-input input { height: 30px; font-size: 15px; }
  .bankx .bx-quick button { height: 26px; }
  .bankx .bx-sum { gap: 2px; padding: 5px 10px; }
  .bankx .bx-sum div { font-size: 12px; }
  .bankx .bx-est { font-size: 10.5px; line-height: 1.3; }
  .bankx .bx-trade .bx-go { height: 40px; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx .bx-stat small { white-space: nowrap; }
  .bankx .bx-stat b { white-space: nowrap; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx > .bx-market { grid-template-columns: auto minmax(0, 1fr) minmax(60px, 120px); gap: 10px; }
  .bankx .bx-stats { gap: 4px 12px; padding: 6px 10px; }
  .bankx .bx-pair small { display: none; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx > .bx-wallet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; }
  .bankx .bx-cash { grid-column: auto; flex-direction: column; justify-content: center; gap: 6px; }
  .bankx .bx-cash > * { flex: 0 0 auto; height: 28px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
  .bankx .bx-bal span:not(.bx-coin) { display: none; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx .bx-stat { flex: none; }
  .bankx .bx-stats { overflow: hidden; }
  .bankx .bx-stat.main b { font-size: 22px; }
  .bankx .bx-stat b { font-size: 15px; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx > .bx-market .bx-stats { gap: 4px 11px; padding: 6px 10px; }
}
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx > .bx-market { grid-template-columns: auto minmax(0, 1fr) minmax(40px, 90px); }
}

/* DUSD (the game currency) and the two markets it trades on: DACITY / DUSD and USDC / DUSD. */
.bx-mkts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bx-mkts button { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--edge2); background: var(--card);
  color: #fff; font: 700 15px var(--head, Oswald), sans-serif; letter-spacing: 1px; cursor: pointer; }
.bx-mkts button i { font-style: normal; color: var(--muted); }
.bx-mkts button .bx-coin { width: 28px; height: 28px; font-size: 15px; }
.bx-mkts button[aria-selected="true"] { border-color: var(--gold, #ffd23f); box-shadow: 0 0 14px rgba(255, 210, 63, .35); }
.bx-coin.dusd { color: #1c0a2e; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffd23f 50%, #b88a00); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 16px rgba(255, 210, 63, .4); }
/* One screen (above): the market switch sits on the left of the quote board in place of the pair's name (the chosen
   market shows which pair it is), so it takes no row of its own. */
@media (min-width: 1041px) and (min-height: 560px) {
  .bankx > .bx-mkts { grid-area: market; z-index: 1; align-self: center; justify-self: start; flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0 0 0 12px; }
  .bankx > .bx-mkts button { padding: 3px 12px 3px 4px; font-size: 14px; }
  .bankx > .bx-market { grid-template-columns: minmax(0, 1fr) minmax(40px, 120px); padding-left: 186px; }
  .bankx > .bx-market .bx-pair { display: none; }
  /* The wallet holds three balances now (DUSD, DACITY, dollars): two by two with the cash buttons, so the top row
     stays low and the trade terminal keeps its button on screen. */
  .bankx > .bx-wallet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; gap: 6px 8px; }
  .bankx .bx-wallet .bx-bal { padding: 4px 8px 4px 4px; }
  .bankx .bx-wallet .bx-bal .bx-coin { width: 30px; height: 30px; font-size: 15px; }
  .bankx .bx-wallet .bx-bal b { font-size: 18px; }
  .bankx .bx-wallet .bx-bal small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bankx .bx-wallet .bx-cash { flex-direction: row; align-items: center; }
  .bankx .bx-wallet .bx-cash > * { flex: 1 1 0; padding: 0 8px; }
  .bankx #bxForm { gap: 6px; }
}