/* Bank room as an old Miami art-deco bank hall instead of the neon look: dark green marble with veins, a banknote
   engraving (guilloche) behind the title, paper grain on the panels, brass double rules with corner marks, an engraved
   serif title in brass, an exchange board with amber figures, and flat buy (green) / sell (red) colours.
   Loaded after theme-vice.css; the room gets data-room="bank" from app.js. */

.room[data-room="bank"], .bankx {
  --brass: #d6ae5c; --brass-hi: #f3dc9e; --brass-lo: #8a6526;
  --ivory: #efe6d2; --sage: #a3b2a2;
  --green-deep: #0b1813; --green-panel: #10231c;
  /* textures */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- the hall: marble, vignette, engraving behind the title ---------- */
html .room[data-room="bank"] {
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0, 0, 0, .55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .005' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .16 0 0 0 0 .12 0 0 0 -1.4 1.25'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.005 .0125' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .55 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .88 0 0 0 0 .8 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='800' height='800' fill='%230d1d17'/%3E%3Crect width='800' height='800' filter='url(%23c)'/%3E%3Crect width='800' height='800' filter='url(%23v)' opacity='.55'/%3E%3C/svg%3E") 0 0 / 800px 800px,
    #0d1d17;
}
html .room[data-room="bank"] .room-floor { display: none; }
html .room[data-room="bank"] .room-inner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; pointer-events: none; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Cg fill='none' stroke='%23d6ae5c' stroke-width='.6'%3E%3Cpath d='M0 40 Q30 10 60 40 T120 40 T180 40 T240 40'/%3E%3Cpath d='M0 40 Q30 70 60 40 T120 40 T180 40 T240 40'/%3E%3Cpath d='M0 30 Q30 0 60 30 T120 30 T180 30 T240 30'/%3E%3Cpath d='M0 50 Q30 80 60 50 T120 50 T180 50 T240 50'/%3E%3Cpath d='M0 20 Q30 50 60 20 T120 20 T180 20 T240 20'/%3E%3Cpath d='M0 60 Q30 30 60 60 T120 60 T180 60 T240 60'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 80px;
  opacity: .16;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent);
}
html .room[data-room="bank"] .room-inner { isolation: isolate; }
html .room[data-room="bank"] .back-btn { background: rgba(11, 24, 19, .85); border-color: rgba(214, 174, 92, .5); color: var(--ivory); border-radius: 4px; }

/* engraved brass title with an ornament rule, no neon */
html .room[data-room="bank"] .room-title {
  font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 14px; transform: none; text-shadow: none;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 52%, var(--brass-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .65));
}
html .room[data-room="bank"] .room-title::after {
  width: min(320px, 70%); height: 12px; margin-top: 10px; border-radius: 0; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='12'%3E%3Cg stroke='%23d6ae5c' stroke-width='1'%3E%3Cpath d='M0 4h146M0 8h146M174 4h146M174 8h146'/%3E%3C/g%3E%3Cg fill='%23d6ae5c'%3E%3Cpath d='M160 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='150' cy='6' r='1.6'/%3E%3Ccircle cx='170' cy='6' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
}
html .room[data-room="bank"] .room-sub { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 5px; font-size: 13px; color: var(--ivory); opacity: .8; }

/* ---------- panels: paper grain, brass double rule, corner marks ---------- */
html .bankx {
  --buy: #3fbf7f; --sell: #e0565b; --gold: var(--brass);
  --edge2: rgba(214, 174, 92, .3); --line: rgba(214, 174, 92, .35); --muted: var(--sage); --text: var(--ivory);
  color: var(--ivory);
}
html .bankx .bx-panel, html .bankx .bx-market, html .bankx .bx-wallet {
  position: relative; border-radius: 4px; backdrop-filter: none;
  border: 1px solid rgba(214, 174, 92, .6);
  background:
    linear-gradient(var(--brass), var(--brass)) 7px 7px / 14px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 7px 7px / 1px 14px no-repeat,
    linear-gradient(var(--brass), var(--brass)) calc(100% - 7px) 7px / 14px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) calc(100% - 7px) 7px / 1px 14px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 7px calc(100% - 7px) / 14px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 7px calc(100% - 7px) / 1px 14px no-repeat,
    linear-gradient(var(--brass), var(--brass)) calc(100% - 7px) calc(100% - 7px) / 14px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) calc(100% - 7px) calc(100% - 7px) / 1px 14px no-repeat,
    var(--grain),
    linear-gradient(180deg, #13281f, var(--green-deep));
  box-shadow: inset 0 0 0 4px var(--green-deep), inset 0 0 0 5px rgba(214, 174, 92, .22), 0 14px 30px rgba(0, 0, 0, .4);
}
html .bankx .bx-panel h3 { font: 700 13px Cinzel, Georgia, serif; letter-spacing: 3px; color: var(--brass); }
html .bankx .bx-state { border-radius: 4px; border-color: rgba(214, 174, 92, .45); background: rgba(11, 24, 19, .7); color: var(--ivory); }

/* coins: struck brass, no glow; DACITY keeps the DaCity badge */
html .bankx .bx-coin { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), inset 0 0 0 4px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .5);
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 50%, var(--brass-lo)); color: #3a2608; }
html .bankx .bx-coin.usd { background: radial-gradient(circle at 35% 30%, #bde8cf, #3fbf7f 50%, #1f6e47); color: #062a14; }
html .bankx .bx-coin.d { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 0, 0, .5); }

/* the market bar as an exchange board: amber figures in a recessed black window */
html .bankx .bx-pair b { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 2px; color: var(--ivory); }
html .bankx .bx-stats { padding: 10px 14px; border-radius: 3px; background: #050a08; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(214, 174, 92, .25); }
html .bankx .bx-stat small { color: var(--sage); }
html .bankx .bx-stat b { font: 600 16px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #ffbf47; text-shadow: 0 0 6px rgba(255, 170, 40, .35); }
html .bankx .bx-stat.main b { font: 700 22px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #ffcf6a; text-shadow: 0 0 8px rgba(255, 170, 40, .4); }

/* wallet balances on ledger lines */
html .bankx .bx-bal { border-radius: 3px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 -1px 0 rgba(214, 174, 92, .35); }
html .bankx .bx-bal b { color: var(--ivory); }
html .bankx .bx-bal.usd b { color: var(--buy); }

/* buttons: brass and flat colours instead of glowing gradients */
html .bankx .btn-primary { background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #b48a3c); color: #2a1a04; border: 1px solid #7a5a20; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #5c4316; text-shadow: none; letter-spacing: 1px; }
html .bankx .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
html .bankx .btn-ghost { border-radius: 4px; border-color: rgba(214, 174, 92, .6); color: var(--ivory); background: rgba(0, 0, 0, .2); }
html .bankx .bx-tabs { border-radius: 4px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 174, 92, .25); }
html .bankx .bx-tab { border-radius: 3px; }
html .bankx .bx-tab.buy[aria-selected="true"] { background: var(--buy); color: #04190d; box-shadow: none; }
html .bankx .bx-tab.sell[aria-selected="true"] { background: var(--sell); color: #fff; box-shadow: none; }
html .bankx .bx-trade .bx-go { border-radius: 4px; background: var(--buy); color: #04190d; border: 1px solid #1f6e47; box-shadow: 0 2px 0 #1f6e47; }
html .bankx .bx-trade[data-side="sell"] .bx-go { background: var(--sell); color: #fff; border-color: #8e2d31; box-shadow: 0 2px 0 #8e2d31; }
html .bankx .bx-mtabs button { border-radius: 4px; border-color: rgba(214, 174, 92, .4); }
html .bankx .bx-mtabs button[aria-selected="true"] { background: var(--brass); color: #2a1a04; }
html .bankx .bx-quick button { border-radius: 3px; border-color: rgba(214, 174, 92, .35); }

/* inputs: recessed, brass on focus */
html .bankx .bx-input, html .bankx .bx-wform input { border-radius: 3px; background: rgba(0, 0, 0, .45); border-color: rgba(214, 174, 92, .35); }
html .bankx .bx-input:focus-within, html .bankx .bx-wform input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(214, 174, 92, .18); }
html .bankx .bx-sum, html .bankx .bx-spread { border-radius: 3px; background: rgba(0, 0, 0, .35); }
html .bankx .bx-spread b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #ffcf6a; }
html .bankx .bx-fill i { background: linear-gradient(90deg, rgba(214, 174, 92, .55), rgba(63, 191, 127, .45)); }
html .bankx .bx-orow, html .bankx .bx-trow.mine { border-radius: 3px; }