/* Stall panels + Simple mode. Every class is bz- prefixed so nothing collides with the scene HUD. */

.bz-panel,
.bz-simple {
  --bz-ink: var(--ink, #2a1b12);
  --bz-paper: var(--parchment, #f2e3c2);
  --bz-paper-2: var(--parch-2, #e6d0a6);
  --bz-wood: var(--wood, #7a4a2a);
  --bz-dark: var(--wood-dark, #3b2416);
  --bz-red: var(--awning, #c8363a);
  --bz-gold: var(--gold, #f2b63d);
  --bz-leaf: var(--leaf, #5e9b3e);
  --bz-gem: var(--gem, #7b4bb5);
  --bz-ui: var(--font-ui, "Pixelify Sans"), system-ui, sans-serif;
  --bz-num: var(--font-num, "VT323"), ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--bz-ink);
  font-family: var(--bz-ui);
}

.bz-panel {
  container: bzpanel / inline-size;
  display: grid;
  gap: 12px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
}
.bz-panel *,
.bz-simple * { box-sizing: border-box; }
.bz-panel em { font-style: normal; opacity: 0.7; font-size: 0.8em; }
.bz-panel a { color: var(--bz-red); }
.bz-muted { opacity: 0.7; margin: 0; }
.bz-fine { margin: 0; font-size: 13px; opacity: 0.78; }
.bz-hint { margin: -4px 0 0; font-size: 13px; }
.bz-warn { color: #9a5a00; margin: 0; }
.bz-bad { color: var(--bz-red); }
.bz-sub { margin: 6px 0 -2px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bz-wood); }

/* ---------- buttons */
.bz-btn {
  font: inherit;
  font-size: 15px;
  min-height: 40px;
  padding: 6px 14px;
  color: var(--bz-ink);
  background: var(--bz-paper-2);
  border: 2px solid var(--bz-dark);
  border-radius: 0;
  box-shadow: inset -3px -3px 0 rgba(59, 36, 22, 0.25), inset 3px 3px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  touch-action: manipulation;
}
.bz-btn:hover:not(:disabled) { filter: brightness(1.05); }
.bz-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 3px 3px 0 rgba(59, 36, 22, 0.25); }
.bz-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bz-btn:focus-visible, .bz-panel button:focus-visible, .bz-panel select:focus-visible, .bz-panel input:focus-visible { outline: 3px solid var(--bz-gem); outline-offset: 2px; }
.bz-primary { background: var(--bz-gold); }
.bz-block { width: 100%; }
.bz-small { min-height: 32px; padding: 2px 10px; font-size: 13px; }
.bz-link { font: inherit; font-size: 13px; min-height: 32px; background: none; border: 0; padding: 4px 0; color: var(--bz-wood); cursor: pointer; text-decoration: underline dotted; }
.bz-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- stats */
/* Columns follow the width the panel actually gets (460px side panel, full-width sheet, Simple card), not the viewport. */
.bz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bz-stats:has(> div:nth-child(3):last-child) > div:last-child { grid-column: 1 / -1; }
@container bzpanel (min-width: 430px) {
  .bz-stats:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bz-stats:has(> div:nth-child(3):last-child) > div:last-child { grid-column: auto; }
}
@container bzpanel (min-width: 640px) {
  .bz-stats:not(.bz-two):has(> div:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bz-stats > div { background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(59, 36, 22, 0.35); padding: 6px 10px; min-width: 0; }
.bz-stats small { display: block; font-size: 12px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Figures never break mid-number: values are compact, and anything longer is clipped, not wrapped. */
.bz-stats b { display: block; font-family: var(--bz-num); font-weight: 400; font-size: 24px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-stats b em { font-size: 0.7em; }
.bz-stats.bz-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- swap */
.bz-swap { gap: 8px; }
.bz-box { background: rgba(255, 255, 255, 0.45); border: 2px solid var(--bz-dark); padding: 8px 10px 10px; display: grid; gap: 6px; }
.bz-box-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.bz-box-top > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-box-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bz-amt { font-family: var(--bz-num); font-size: 34px; line-height: 1; width: 100%; min-width: 0; background: transparent; border: 0; color: var(--bz-ink); padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-amt:focus { outline: none; }
.bz-amt::placeholder { color: rgba(42, 27, 18, 0.35); }
.bz-token { font: inherit; font-size: 16px; min-height: 40px; padding: 4px 28px 4px 10px; background: var(--bz-gold); color: var(--bz-ink); border: 2px solid var(--bz-dark); border-radius: 0; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bz-ink) 50%), linear-gradient(135deg, var(--bz-ink) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.bz-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.bz-quick button, .bz-slip button { font: inherit; font-size: 13px; min-height: 30px; padding: 2px 10px; background: transparent; border: 2px solid rgba(59, 36, 22, 0.45); color: var(--bz-ink); cursor: pointer; }
.bz-slip button.on { background: var(--bz-dark); color: var(--bz-paper); border-color: var(--bz-dark); }
.bz-flip-row { display: flex; justify-content: center; margin: -14px 0; position: relative; z-index: 1; }
.bz-flip { font-size: 20px; width: 40px; height: 40px; background: var(--bz-paper); border: 2px solid var(--bz-dark); color: var(--bz-ink); cursor: pointer; }
.bz-slip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.bz-slip > span { margin-right: auto; }

.bz-route { display: grid; gap: 8px; background: rgba(59, 36, 22, 0.06); border: 2px dashed rgba(59, 36, 22, 0.35); padding: 8px 10px; font-size: 14px; }
.bz-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.bz-chip { background: var(--bz-dark); color: var(--bz-paper); padding: 1px 8px; font-size: 13px; }
.bz-arrow { font-style: normal; opacity: 0.6; }
.bz-hop { display: grid; gap: 3px; }
.bz-hop-head { font-size: 12px; opacity: 0.75; }
.bz-leg { position: relative; min-height: 24px; border: 2px solid rgba(59, 36, 22, 0.3); overflow: hidden; }
.bz-leg-bar { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, rgba(200, 54, 58, 0.35) 0 8px, rgba(242, 227, 194, 0.35) 8px 16px); }
.bz-leg-txt { position: relative; display: block; padding: 2px 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-terms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.bz-terms dt { opacity: 0.75; }
.bz-terms dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.bz-terms dd em { display: block; }

/* ---------- field (stake) */
.bz-field { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.45); border: 2px solid var(--bz-dark); padding: 4px 6px 4px 10px; }
.bz-field input { font-family: var(--bz-num); font-size: 28px; width: 100%; min-width: 0; border: 0; background: transparent; color: var(--bz-ink); }
.bz-field input:focus { outline: none; }
.bz-field > span { font-size: 13px; }
.bz-max { font: inherit; font-size: 13px; min-height: 32px; padding: 2px 8px; background: var(--bz-paper-2); border: 2px solid var(--bz-dark); cursor: pointer; }
.bz-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 2px solid var(--bz-dark); }
.bz-seg button { font: inherit; min-height: 38px; background: transparent; border: 0; color: var(--bz-ink); cursor: pointer; }
.bz-seg button.on { background: var(--bz-dark); color: var(--bz-paper); }
.bz-drip { display: grid; gap: 4px; }
.bz-meter { height: 12px; border: 2px solid var(--bz-dark); background: rgba(255, 255, 255, 0.4); }
.bz-meter span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--bz-leaf) 0 6px, #7fbf55 6px 12px); transition: width 0.6s linear; }

/* ---------- tx + notes */
.bz-tx { border: 2px solid var(--bz-dark); background: var(--bz-paper); padding: 8px 10px; display: grid; gap: 4px; font-size: 14px; }
.bz-tx ol { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.bz-tx li { opacity: 0.45; }
.bz-tx li::before { content: "▢ "; }
.bz-tx li.now { opacity: 1; }
.bz-tx li.now::before { content: "▶ "; }
.bz-tx li.done { opacity: 1; color: #3d6d24; }
.bz-tx li.done::before { content: "▣ "; }
.bz-tx small { font-size: 11px; opacity: 0.6; }
.bz-tx-failed { border-color: var(--bz-red); }
.bz-tx-failed span { color: var(--bz-red); }
.bz-tx-confirmed { border-color: var(--bz-leaf); }
.bz-note { margin: 0; font-size: 12px; background: rgba(123, 75, 181, 0.1); border-left: 4px solid var(--bz-gem); padding: 6px 8px; }
.bz-note b { color: var(--bz-gem); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- lists: pools, balances, trades */
.bz-pools, .bz-list, .bz-feed { display: grid; gap: 6px; min-width: 0; }
.bz-pool, .bz-bal { display: grid; align-items: center; gap: 4px 10px; background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(59, 36, 22, 0.3); padding: 6px 8px; min-width: 0; }
/* Two lines by default (pair + Trade, then TVL · 24h vol · price); one line only when the panel is wide. */
.bz-pool {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "pair pair btn" "tvl vol px";
}
.bz-pool .bz-pair { grid-area: pair; }
.bz-pool .bz-tvl { grid-area: tvl; }
.bz-pool .bz-vol { grid-area: vol; }
.bz-pool .bz-px { grid-area: px; }
.bz-pool .bz-btn { grid-area: btn; justify-self: end; }
@container bzpanel (min-width: 640px) {
  .bz-pool { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.8fr)) auto; grid-template-areas: "pair tvl vol px btn"; }
}
.bz-pool.bz-launch { border-color: var(--bz-red); }
.bz-bal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.bz-pair, .bz-num { display: grid; min-width: 0; }
.bz-pair b { font-size: 15px; font-weight: 600; }
.bz-pair small, .bz-num small { font-size: 12px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-num b { font-family: var(--bz-num); font-weight: 400; font-size: 20px; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-bal .bz-num { text-align: right; }
.bz-trade { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 8px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed rgba(59, 36, 22, 0.3); }
.bz-trade i { font-style: normal; opacity: 0.6; }
.bz-ago { opacity: 0.6; grid-row: span 2; }
.bz-what { grid-column: 2 / 4; overflow-wrap: anywhere; }
.bz-via { grid-column: 2; opacity: 0.65; font-size: 12px; }
.bz-fee { grid-column: 3; opacity: 0.75; font-size: 12px; }
.bz-coming { display: grid; gap: 6px; }
.bz-coming > div { display: grid; gap: 2px; border: 2px dashed rgba(59, 36, 22, 0.35); padding: 6px 8px; font-size: 13px; }
.bz-coming b { font-size: 15px; }
.bz-who { margin: 0; font-size: 13px; }
.bz-coming > div.bz-live { border-style: solid; border-color: var(--bz-leaf); background: rgba(94, 155, 62, 0.12); }
.bz-coming b em { margin-left: 4px; font-size: 12px; }
.bz-addr { font-family: var(--bz-num); font-size: 16px; overflow-wrap: anywhere; opacity: 0.85; }

/* ---------- token + how */
.bz-flow { display: grid; gap: 6px; }
.bz-flow-src, .bz-flow-split > div { display: grid; gap: 2px; padding: 6px 10px; border: 2px solid var(--bz-dark); font-size: 13px; }
.bz-flow-src { background: var(--bz-gold); }
.bz-flow-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bz-flow-split > div:first-child { background: var(--bz-paper-2); }
.bz-flow-split > div:last-child { background: rgba(94, 155, 62, 0.25); }
.bz-flow b { font-family: var(--bz-num); font-weight: 400; font-size: 26px; line-height: 1; }
.bz-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.bz-checks li { position: relative; padding-left: 22px; }
.bz-checks li::before { content: "◆"; position: absolute; left: 2px; color: var(--bz-leaf); }
.bz-checks li.bz-pending::before { content: "◇"; color: var(--bz-red); }
.bz-steps { margin: 0; padding: 0; list-style: none; counter-reset: bz; display: grid; gap: 8px; }
.bz-steps li { counter-increment: bz; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; font-size: 14px; }
.bz-steps li::before { content: counter(bz); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; background: var(--bz-red); color: var(--bz-paper); font-family: var(--bz-num); font-size: 22px; border: 2px solid var(--bz-dark); }
.bz-steps b { font-weight: 600; }

/* ---------- Simple mode shell */
.bz-simple { display: grid; justify-items: center; gap: 12px; width: 100%; padding: 0 16px 40px; }
.bz-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 720px; }
.bz-tabs button { font: inherit; font-size: 15px; min-height: 40px; padding: 4px 6px; background: var(--bz-paper-2); color: var(--bz-ink); border: 2px solid var(--bz-dark); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-tabs button.on { background: var(--bz-red); color: var(--bz-paper); }
.bz-card { width: 100%; max-width: 480px; background: var(--bz-paper); border: 3px solid var(--bz-dark); box-shadow: 6px 6px 0 rgba(42, 27, 18, 0.35), inset 0 0 0 3px var(--bz-paper-2); padding: 14px; }
.bz-card.bz-wide { max-width: 720px; }
.bz-card-head { margin-bottom: 10px; border-bottom: 2px dashed rgba(59, 36, 22, 0.35); padding-bottom: 8px; }
.bz-card-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.bz-card-head p { margin: 2px 0 0; font-size: 14px; opacity: 0.78; }

@media (max-width: 560px) {
  .bz-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bz-simple { padding: 0 12px 32px; }
  .bz-card { padding: 12px; box-shadow: 4px 4px 0 rgba(42, 27, 18, 0.35), inset 0 0 0 3px var(--bz-paper-2); }
  .bz-amt { font-size: 30px; }
}
@media (max-width: 380px) {
  .bz-terms { grid-template-columns: minmax(0, 1fr); }
  .bz-terms dd { text-align: left; margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bz-meter span { transition: none; }
}