/* 🧱 The Buy Wall's window (world/js/buywall-ui.js), as the owner's demo (artifact 313KzvhWXnPWJ7HLgsHyUT, "perfect"): the
   start screen's look (navy glass, thin gold edges, gold capitals), the wall as rows of gold bricks per market cap (yours
   green), the form with the gold filled button. It fits a 1536x782 screen without scrolling. */
.modal:has(.bw) { --tan: #e8c46a; --line: rgba(232, 196, 106, 0.34); --soft: #b9bfdc; --mute: #9ea6cc; padding: 14px; background: linear-gradient(180deg, #10143a, #070a1e); border-color: #c99a22; }
.modal:has(.bw) > .modal-x { z-index: 5; }
.bw { display: grid; gap: 12px; }
.bw-head { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; overflow: hidden; padding: 10px 48px 10px 16px; border: 1px solid var(--line); border-radius: 4px; background: #2a2142 url("/world/assets/start/town-1280.webp") 50% 40% / cover no-repeat; }
.bw-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 28, 0.35), rgba(5, 8, 28, 0.72) 32%, rgba(5, 8, 28, 0.82)); }
.bw-head > * { position: relative; }
.bw-head canvas { width: 64px; height: auto; aspect-ratio: 52 / 100; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.6)); }
.modal .bw-kick { margin: 0; color: var(--tan); font: 400 12px/1.2 var(--display); letter-spacing: 0.32em; text-transform: uppercase; }
.modal .bw-title { margin: 2px 0 6px; font: 400 26px/1.1 var(--display); background: linear-gradient(180deg, #fff6c8, #ffd23f 52%, #dc9a1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(40, 20, 0, 0.9)); }
.bw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; padding: 8px 0 7px; border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 10, 32, 0.74); }
.bw-stats > span { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 0 8px; text-align: center; }
.bw-stats > span + span { border-left: 1px solid var(--line); }
.bw-stats b { color: #fff; font: 400 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.bw-stats small { color: var(--tan); font: 400 10px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.bw-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.bw-left { display: grid; gap: 12px; min-width: 0; }
.bw-panel { min-width: 0; padding-bottom: 12px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 18, 50, 0.92), rgba(7, 10, 30, 0.92)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 240, 200, 0.06); }
.bw-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.bw-ph b { color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.bw-ph span { color: var(--soft); font-size: 16px; }
.bw-panel > :not(.bw-ph) { margin-left: 12px; margin-right: 12px; }
.modal .bw-now { display: flex; align-items: center; gap: 8px; margin-top: 0; margin-bottom: 8px; color: #9ff0b6; font-size: 17px; }
.bw-now::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #5fe86f; animation: bw-ping 1.8s ease-out infinite; }
.bw-now i { flex: 1; height: 0; border-top: 2px dashed rgba(95, 232, 111, 0.55); }
.bw-now b { font: 400 17px var(--display); color: #9ff0b6; }
@keyframes bw-ping { 0% { box-shadow: 0 0 0 0 rgba(95, 232, 111, 0.7); } 70% { box-shadow: 0 0 0 9px rgba(95, 232, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 232, 111, 0); } }
.bw-rows { display: grid; gap: 5px; }
.bw-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 104px; align-items: center; gap: 8px; }
.bw-lvl { display: grid; line-height: 1; }
.bw-lvl b { font: 400 18px var(--display); color: #fff; }
.bw-lvl small { font-size: 15px; color: #ff9b8a; margin-top: 2px; }
.bw-track { position: relative; height: 24px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); overflow: hidden; }
.bw-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; transition: width 0.6s cubic-bezier(0.2, 1.3, 0.4, 1);
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(70, 40, 0, 0.55) 15px 17px), linear-gradient(180deg, #ffe680 0 46%, rgba(110, 70, 0, 0.6) 46% 54%, #e8a512 54% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.bw-fill.bw-mine-fill { background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(20, 60, 20, 0.55) 15px 17px), linear-gradient(180deg, #b7ffc9 0 46%, rgba(10, 70, 30, 0.6) 46% 54%, #3fd06a 54% 100%); }
.bw-sum { display: grid; justify-items: end; line-height: 1.05; }
.bw-sum b { font: 400 17px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.bw-sum small { font-size: 14px; color: var(--soft); }
.bw-row.pulse .bw-track { animation: bw-pulse 0.7s ease-out; }
@keyframes bw-pulse { 30% { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.8); } }
.modal .bw-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; margin-bottom: 0; font-size: 15px; color: var(--soft); }
.bw-legend i { display: inline-block; width: 18px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; background: linear-gradient(180deg, #ffe680, #e8a512); }
.bw-legend i.m { background: linear-gradient(180deg, #b7ffc9, #3fd06a); }
.modal .bw-empty { margin: 0; font-size: 16px; color: var(--mute); }
.bw-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bw-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px; border: 1px solid #34468a; border-radius: 8px; background: #141e52; color: #e7ecff; cursor: pointer; font-size: 17px; }
.bw-seg button img, .bw-seg button svg { flex: none; width: 18px; height: 18px; }
.bw-seg button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, 0.14); color: var(--gold); }
.modal .bw-lab { display: flex; justify-content: space-between; gap: 8px; margin: 10px 12px 4px; font: 400 11px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan); }
.bw-lab span { font: 400 15px var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--soft); }
.bw-amt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.bw-amt input { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #3b4c80; border-radius: 8px; background: #0a102a; font: 400 22px var(--display); color: #fff; }
.bw-amt input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.bw-minis { display: flex; gap: 4px; }
.bw-minis button, .bw-presets button { padding: 0 9px; border: 1px solid #34468a; border-radius: 8px; background: #141e52; color: #e7ecff; cursor: pointer; font-size: 15px; }
.bw-minis button:hover, .bw-presets button:hover, .bw-seg button:hover { border-color: var(--gold); }
.modal .bw-usd { margin-top: 4px; margin-bottom: 0; font-size: 15px; color: var(--soft); }
.bw-lv { display: grid; gap: 6px; }
.bw-lvval { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bw-lvval b { font: 400 26px var(--display); color: #fff; }
.bw-lvval small { font-size: 17px; color: #ff9b8a; }
.bw-lv input[type="range"] { width: 100%; accent-color: #ffd23f; }
.bw-presets { display: flex; gap: 6px; }
.bw-presets button { flex: 1; padding: 5px 4px; }
.modal .bw-result { margin-top: 10px; margin-bottom: 0; padding: 8px 10px; border: 1px solid rgba(232, 196, 106, 0.3); border-radius: 6px; background: rgba(255, 210, 63, 0.07); font-size: 17px; line-height: 1.25; color: #e7ecff; }
.bw-result b { color: var(--gold); font-weight: 400; }
.modal .bw-result.warn { border-color: rgba(255, 120, 100, 0.5); background: rgba(60, 14, 14, 0.5); color: #ffb3b3; }
.bw-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 24px); margin-top: 12px !important; padding: 10px 14px 11px; border: 2px solid #6e4a06; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #ffe680, #ffc928 48%, #e89a0c); color: #1b1440; font: 400 23px/1 var(--display);
  box-shadow: 0 5px 0 #4a3004, 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; }
.bw-go:hover:not(:disabled), .bw-go:focus-visible { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 8px 0 #4a3004, 0 16px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 205, 50, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6); outline: 0; }
.bw-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #4a3004, inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.bw-go:disabled { filter: saturate(0.5) brightness(0.8); cursor: not-allowed; }
.bw-brk { display: inline-grid; grid-template-columns: repeat(2, 9px); gap: 2px; }
.bw-brk i { height: 6px; border-radius: 1px; background: #8a3d12; box-shadow: inset 0 1px 0 #ffb27a; }
.bw-brk i:nth-child(3) { grid-column: span 2; width: 13px; justify-self: center; }
.modal .bw-done { margin-top: 8px !important; margin-bottom: 0; color: #9ff0b6; font-size: 16px; min-height: 20px; }
.modal .bw-done.err { color: #ffb3b3; }
.bw-mine { display: grid; gap: 6px; }
.bw-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(95, 232, 111, 0.35); border-radius: 6px; background: rgba(20, 60, 30, 0.25); }
.bw-order b { font: 400 16px var(--display); color: #fff; }
.bw-order span { display: block; font-size: 15px; color: var(--soft); }
.bw-order em { font-style: normal; color: #9ff0b6; }
.bw-order button { padding: 4px 10px; border: 1px solid #a33; border-radius: 8px; background: rgba(60, 14, 14, 0.5); color: #ffb3b3; cursor: pointer; font-size: 15px; }
.bw-order button:hover { border-color: #ff7a7a; }
/* A stopped or ended buy: its money waits in the vault (amber), Withdraw. */
.bw-order.hold { border-color: rgba(255, 190, 80, 0.5); background: rgba(70, 45, 0, 0.3); }
.bw-order.hold em { color: #ffd27a; }
.bw-order.hold > button { border-color: #c99a22; background: rgba(255, 210, 63, 0.14); color: var(--gold); }
.bw-order.hold > button:hover { border-color: var(--gold); }
/* Moving a buy: its green brick on a track, dragged to another level, then Move (or ↺). */
.bw-move { grid-column: 1 / -1; display: grid; gap: 4px; } /* Move goes under the track: the track never narrows mid-drag */
.bw-order .bw-mvto { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bw-order .bw-mvto[hidden] { display: none; }
.bw-mvto b { font: 400 15px var(--display); color: #9ff0b6; }
.bw-order .bw-mvgo { border: 1px solid #6e4a06; background: linear-gradient(180deg, #ffe680, #ffc928 48%, #e89a0c); color: #1b1440; font: 400 15px var(--display); box-shadow: 0 2px 0 #4a3004; }
.bw-order .bw-mvgo:hover:not(:disabled) { border-color: #6e4a06; filter: brightness(1.08); }
.bw-order .bw-mvgo:disabled { filter: saturate(0.5) brightness(0.8); cursor: progress; }
.bw-order .bw-mvundo { border-color: #34468a; background: #141e52; color: #e7ecff; }
.bw-order .bw-mvundo:hover { border-color: var(--gold); }
.bw-mv { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: grab; }
.bw-mv:active { cursor: grabbing; }
.bw-mv::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }
.bw-mv::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }
.bw-mv::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 20px; margin-top: -6px; border: 1px solid #0d4a22; border-radius: 3px; cursor: grab;
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(20, 60, 20, 0.55) 15px 17px), linear-gradient(180deg, #b7ffc9 0 46%, rgba(10, 70, 30, 0.6) 46% 54%, #3fd06a 54% 100%);
  box-shadow: 0 2px 0 #0d4a22, 0 0 10px rgba(95, 232, 111, 0.45); }
.bw-mv::-moz-range-thumb { width: 36px; height: 20px; border: 1px solid #0d4a22; border-radius: 3px; cursor: grab;
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(20, 60, 20, 0.55) 15px 17px), linear-gradient(180deg, #b7ffc9 0 46%, rgba(10, 70, 30, 0.6) 46% 54%, #3fd06a 54% 100%);
  box-shadow: 0 2px 0 #0d4a22, 0 0 10px rgba(95, 232, 111, 0.45); }
.bw-mv:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.bw-row.target .bw-track { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px #5fe86f, 0 0 14px rgba(95, 232, 111, 0.6); }
.modal .bw-hint { margin: 2px 0 0; font-size: 14px; line-height: 1.25; color: var(--mute); }
/* A buy too big for the pool: what it loses, and the size that loses little. */
.modal .bw-impact { margin-top: 6px; margin-bottom: 0; padding: 5px 9px; border: 1px solid rgba(255, 170, 60, 0.55); border-radius: 6px; background: rgba(70, 40, 0, 0.45); font-size: 14px; line-height: 1.2; color: #ffd9a0; }
.bw-impact b { color: #ffb44a; font-weight: 400; }
/* No line under the button until there's something to say: the window still fits 1536x782 with the warning. */
.modal .bw-done:empty { min-height: 0; margin-top: 0 !important; }
.bw-show { margin-top: 8px; padding: 6px 12px; border: 1px solid var(--gold-2, #e8b52a); border-radius: 8px; background: rgba(255, 210, 63, 0.12); color: var(--gold, #ffd23f); cursor: pointer; font: 400 16px var(--ui-font); }
.bw-show:hover:not(:disabled), .bw-show:focus-visible { background: rgba(255, 210, 63, 0.22); outline: 0; }
.bw-show:disabled { opacity: 0.7; cursor: progress; }
/* 🔒 Your Jupiter vault: what it holds, Copy, Solscan, and how to watch it in a wallet. */
.bw-vault { margin-top: 8px; padding: 7px 10px; border: 1px solid rgba(232, 196, 106, 0.3); border-radius: 6px; background: rgba(255, 210, 63, 0.05); }
.bw-vault[hidden] { display: none; }
.bw-vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bw-vrow > b { color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.bw-vrow code { padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 400 14px ui-monospace, Menlo, Consolas, monospace; }
.bw-vrow button { padding: 2px 9px; border: 1px solid #34468a; border-radius: 8px; background: #141e52; color: #e7ecff; cursor: pointer; font-size: 14px; }
.bw-vrow button:hover { border-color: var(--gold); }
.bw-vrow a { color: var(--gold); font-size: 14px; }
.modal .bw-vault p { margin: 5px 0 0; font-size: 14px; line-height: 1.25; color: var(--soft); }
.bw-vault p b { color: #fff; font-weight: 400; }
.bw-vault.pulse { animation: bw-vpulse 1.2s ease-out 2; }
@keyframes bw-vpulse { 30% { box-shadow: 0 0 0 2px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.7); } }
.modal .bw-fine { margin: 0; font-size: 15px; line-height: 1.3; color: var(--mute); }
.bw-fine b { color: var(--soft); font-weight: 400; }
.bw-fly { position: fixed; z-index: 2147482000; width: 16px; height: 8px; border-radius: 2px; pointer-events: none; background: linear-gradient(180deg, #ffe680 0 50%, #e8a512 50%); box-shadow: 0 0 0 1px #6e4a06; animation: bw-fly 0.75s cubic-bezier(0.3, 0.1, 0.4, 1) both; }
@keyframes bw-fly { 0% { transform: translate(0, 0) scale(1.4) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.7) rotate(var(--r)); opacity: 0.9; } }
.bw-drop { position: fixed; z-index: 2147482000; width: 16px; height: 8px; border-radius: 2px; pointer-events: none; background: linear-gradient(180deg, #b7ffc9 0 50%, #3fd06a 50%); animation: bw-drop 0.8s ease-in both; }
@keyframes bw-drop { 100% { transform: translate(var(--dx), 160px) rotate(var(--r)); opacity: 0; } }
@media (max-width: 760px) {
  .bw-cols { grid-template-columns: 1fr; }
  .bw-head { grid-template-columns: 50px minmax(0, 1fr); padding-right: 40px; }
  .bw-head canvas { width: 50px; }
  .modal .bw-title { font-size: 21px; }
  .bw-stats b { font-size: 16px; }
  .bw-stats > span { padding: 0 4px; }
  .bw-stats small { font-size: 8px; letter-spacing: 0.06em; white-space: normal; line-height: 1.15; } /* "Market cap now" wrapped, not over its neighbour */
  .bw-row { grid-template-columns: 62px minmax(0, 1fr) 92px; }
}
@media (prefers-reduced-motion: reduce) { .bw *, .bw-now::before { animation: none !important; transition: none !important; } }