/* 🧱 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); } }
/* The rows share one grid: the level and the sum take what their text needs (a phone's "$50.0K" ran over the bricks in a
   fixed 62 px, owner 2026-11-09), and every row's bricks still start and end in line. */
.bw-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 5px 8px; }
.bw-row { display: contents; }
.bw-rows > .bw-empty { grid-column: 1 / -1; }
.bw-lvl { display: grid; min-width: 62px; 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; }
/* A level the price sits on: its buys are holding it (buywall.mjs view: held). */
.bw-lvl small { white-space: nowrap; }
.bw-row.held .bw-lvl small { color: #ffd166; }
.bw-row.held .bw-track { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 209, 102, 0.55), 0 0 10px rgba(255, 209, 102, 0.35); }
@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.held em { color: #ffd166; }
.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; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; } /* Move goes under the track: the track never narrows mid-drag */
.bw-move > .bw-mvto { grid-column: 1 / -1; }
/* 📈 A buy's daily climb: the button beside its brick; its steps take the brick's place while you pick. */
.bw-order .bw-climb { padding: 3px 9px; border: 1px solid #34468a; background: #141e52; color: #e7ecff; font-size: 14px; white-space: nowrap; }
.bw-order .bw-climb:hover { border-color: var(--gold); }
.bw-order .bw-climb.on { border-color: #c99a22; background: rgba(255, 210, 63, 0.14); color: var(--gold); }
.bw-order .bw-climb.paused { border-color: #c98a22; background: rgba(70, 45, 0, 0.45); color: #ffd27a; }
.bw-move.choosing .bw-mv { display: none; }
/* 📈 The climb's steps, big, over the whole card while picking (the card keeps its height: the window doesn't scroll). */
.bw-order.choosing > :not(.bw-cpick) { display: none; }
.bw-cpick { grid-column: 1 / -1; display: grid; gap: 6px; }
.bw-cpick[hidden] { display: none; }
.bw-cpick p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.bw-cpick p b { font: 400 14px/1.1 var(--display); color: var(--gold); }
.bw-order .bw-cx { padding: 1px 8px; border: 1px solid #34468a; background: #141e52; color: #e7ecff; font-size: 14px; }
/* Seven in a row while each fits its words (seven equal columns cut "+$100K" in a 443 px card, owner 2026-11-09: "the
   $100 is not fitting"), four a row in a narrower card (a phone, a small window): the card is its container. */
.bw-cpick { container: bw-cpick / inline-size; }
.bw-csteps { display: grid; grid-template-columns: repeat(7, minmax(max-content, 1fr)); gap: 5px; }
.bw-order .bw-csteps button { padding: 7px 4px 6px; border: 1px solid #34468a; border-radius: 8px; background: #141e52; color: #e7ecff; font: 400 15px/1 var(--display); white-space: nowrap; }
.bw-order .bw-csteps button:hover { border-color: var(--gold); color: #fff; }
.bw-order .bw-csteps button[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(180deg, #ffe680, #ffc928 48%, #e89a0c); color: #1b1440; box-shadow: 0 2px 0 #4a3004; }
.bw-cpick small { display: block; font-size: 14px; color: var(--soft); }
@container bw-cpick (max-width: 400px) { .bw-csteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bw-order .bw-csteps button { padding-left: 2px; padding-right: 2px; } }
/* The wall panel's two tabs: the wall by market cap, and who defends it. */
.bw-tabs { justify-content: flex-start; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.bw-tabs button { margin-bottom: -1px; padding: 6px 10px 7px; border: 1px solid transparent; border-radius: 6px 6px 0 0; background: none; color: var(--soft); cursor: pointer; font: 400 12px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.bw-tabs button[aria-selected="true"] { border-color: rgba(232, 196, 106, 0.3); border-bottom-color: #0e1232; background: rgba(14, 18, 50, 0.95); color: var(--tan); }
.bw-tabs button:hover { color: #fff; }
.bw-tabs button i { font-style: normal; color: var(--gold); }
.bw-defstat { cursor: pointer; border-radius: 4px; }
.bw-defstat:hover b, .bw-defstat:focus-visible b { color: var(--gold); }
/* 🛡 Each defender: their place, their hero, their name (tags, power) over their bar, then their dollars. */
.bw-who { grid-template-columns: max-content 36px minmax(0, 1fr) max-content; align-content: start; gap: 6px 8px; max-height: 236px; overflow-y: auto; padding-right: 4px; } /* buywall-ui.js fitWho sets its height on a computer */
.bw-who[hidden] { display: none; }
.bw-def { display: contents; }
.modal .bw-whyp { grid-column: 1 / -1; margin: 0; color: var(--soft); font-size: 15px; line-height: 1.2; }
.bw-dr { width: 16px; color: var(--mute); font-style: normal; font-size: 14px; text-align: right; }
.bw-face { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #34468a; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #2a3a86, #10163e 72%); overflow: hidden; }
.bw-face img { width: 33px; height: 33px; image-rendering: pixelated; } /* a hero's 22 px bust at 1.5x */
.bw-face.coin img { width: 26px; height: 26px; image-rendering: auto; }
.bw-def.mine .bw-face { border-color: rgba(95, 232, 111, 0.6); }
.bw-def.held .bw-face { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.45), 0 0 8px rgba(255, 209, 102, 0.3); }
.bw-dmid { display: grid; gap: 3px; min-width: 0; }
.bw-dmid .bw-track { height: 13px; }
/* The name first: on a narrow screen its tags and power go under it, never over it. */
.bw-dn { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.bw-dn b { overflow: hidden; max-width: 100%; color: #fff; font: 400 15px/1.1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.bw-pow { flex: none; margin-left: auto; padding: 1px 6px; border: 1px solid rgba(255, 209, 102, 0.45); border-radius: 5px; background: rgba(255, 210, 63, 0.1); color: var(--gold); font: 400 12px/1.2 var(--display); font-style: normal; white-space: nowrap; }
.bw-ph .bw-pow { margin: 0 2px 0 0; font-size: 12px; }
@media (max-width: 420px) { .bw-ph .bw-pow { display: none; } } /* a small phone: "Your buys on the wall" needs the room; the Defenders tab has it */
.bw-def.mine .bw-dn b { color: #9ff0b6; }
.bw-tag { flex: none; padding: 1px 5px; border: 1px solid #34468a; border-radius: 5px; color: #8fd0ff; font-size: 12px; }
.bw-tag.you { border-color: rgba(95, 232, 111, 0.5); color: #9ff0b6; }
.bw-def.held .bw-sum small { color: #ffd166; }
.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; }
.bw-check { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--gold-2, #e8b52a); border-radius: 999px; background: rgba(255, 210, 63, 0.12); color: var(--gold, #ffd23f); cursor: pointer; font: 400 14px var(--ui-font); white-space: nowrap; }
.bw-check:hover:not(:disabled), .bw-check:focus-visible { background: rgba(255, 210, 63, 0.22); outline: 0; }
.bw-check: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 17px/1 var(--ui-font); letter-spacing: 0.05em; } /* the page's own letters (a phone's monospace looked off, owner 2026-11-09) */
.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); } }
/* How it works (buywall-ui.js howHTML): three steps as numbered gold bricks, the questions folded shut under them. With buys
   of your own (.known) only the fold stays. */
.modal .bw-steps { display: grid; gap: 7px; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.bw-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 15px; line-height: 1.25; color: var(--soft); }
.bw-steps i { display: grid; place-items: center; height: 22px; border-radius: 3px; font: 400 14px/1 var(--display); font-style: normal; color: #3a2400; background: linear-gradient(180deg, #ffe680, #ffc928 50%, #e8a512); box-shadow: 0 2px 0 #6e4a06, inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.bw-steps b { display: block; margin-bottom: 1px; font: 400 15px/1.15 var(--display); color: #fff; }
.modal .bw-faq { margin-top: 8px; margin-bottom: 0; font-size: 15px; color: var(--soft); }
.bw-faq summary { color: var(--gold); font-weight: 400; }
.bw-faq ul { line-height: 1.3; }
.bw-faq li b { color: #fff; font-weight: 600; }
.bw-faq a { display: inline-block; margin-top: 6px; color: var(--gold); }
.bw-how.known { margin-top: -4px; padding: 0; border: 0; background: none; box-shadow: none; } /* a loose line: the window still fits 1536x782 with a buy and its vault */
.bw-how.known > .bw-ph, .bw-how.known > .bw-steps { display: none; }
.modal .bw-how.known > .bw-faq { margin-top: 0; }
.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-lvl { min-width: 0; }
  .bw-tabs button { padding: 6px 7px 7px; letter-spacing: 0.06em; }
  .bw-lvl b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bw *, .bw-now::before { animation: none !important; transition: none !important; } }