/* ═══════════════════════════════════════════════════════════════════════
   world-trade.css — THE TRADE WINDOW (#3339 slice 3; Wray's TRADE 1A 2B 3A
   4A 5A 6A, 2026-10-04)

   world-trade.js draws three things, each matched here and nowhere else:
     .wtr-prompts / .wtr-prompt   the incoming prompt, a toast at the top,
                                  a second stacked under the first (1A)
     .ww-aside.wtr-aside .wtr     the window beside the bag: side by side
                                  with named lines on a desktop (2B, 800
                                  wide), wells on a phone on its side (5A)
     .wtr-say                     a refused request, under what was pressed
                                  (6A)
   The approved picture is audit/ui-gen/2026-10-04-trade-window/screens/
   trade.js (its CSS is the source of these values), published at
   audit/artifacts/trade-window/.

   ── ONE BLOCK ──────────────────────────────────────────────────────────
   `corners`, and every selector under `body.hud-v2`: the window exists only
   under the HUD pass, and with FEATURE_WORLD_TRADE off nothing here has
   anything to match. The ribbon title and the close are the Bank's own
   (world-bank.css section 0b, which lists `.wtr-aside`).

   ⛔LITERALS, NOT --sk-* (world-bank.css's trap): the aside hangs off
   <body>, where the skin's gold variables resolve to the parchment's tan.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 0. THE PANEL ─────────────────────────────────────────────────────── */
body.hud-v2 .ww-aside.wtr-aside .ww-asidebody {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.hud-v2 .wtr {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #efe3c8;
  font-family: var(--hv-f-vt, 'VT323', monospace);
}
body.hud-v2 .wtr-h6 {
  font: 9px var(--hv-f-px, monospace);
  color: #caa982;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* who: their crest, name and house, and IN REACH */
body.hud-v2 .wtr-who { display: flex; align-items: center; gap: 12px; min-height: 48px; flex: 0 0 auto; }
body.hud-v2 .wtr-crest { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
body.hud-v2 .wtr-who .nm { display: grid; gap: 4px; min-width: 0; }
body.hud-v2 .wtr-who .nm b {
  font: 400 26px/1 var(--hv-f-tome, 'New Rocker', serif);
  color: #f7e6c4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.hud-v2 .wtr-who .nm i { font: normal 8px var(--hv-f-px, monospace); letter-spacing: 1px; }
body.hud-v2 .wtr-reach {
  margin-left: auto;
  font: 9px var(--hv-f-px, monospace);
  letter-spacing: 1px;
  color: #8fd89a;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
body.hud-v2 .wtr-reach::before { content: ""; width: 10px; height: 10px; background: currentColor; box-shadow: 0 0 0 2px #07090d; }

/* a column's head: the word, and LOCKED / NOT LOCKED */
body.hud-v2 .wtr-head { display: flex; align-items: center; gap: 8px; min-height: 28px; flex: 0 0 auto; }
body.hud-v2 .wtr-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 8px var(--hv-f-px, monospace);
  letter-spacing: 1px;
  color: #8a98aa;
  padding: 5px 8px 4px;
  background: #0e1319;
  box-shadow: inset 0 0 0 2px #2c3645;
  white-space: nowrap;
}
body.hud-v2 .wtr-chip.on { color: #2a1c0c; background: #e3c79a; box-shadow: inset 0 0 0 2px #a28155, 0 0 10px rgba(243, 217, 160, .45); }

/* ── 1. A CELL: the picture, its count, its tags ──────────────────────── */
body.hud-v2 .wtr-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #121821, #1d2633);
  box-shadow: inset 0 0 0 2px var(--r, #3a4760), inset 0 0 0 4px #07090d;
  overflow: hidden;
}
body.hud-v2 .wtr-cell.is-ench { box-shadow: inset 0 0 0 2px var(--r, #3a4760), inset 0 0 0 4px #07090d, 0 0 10px 1px var(--r, transparent); }
body.hud-v2 .wtr-cell > img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
body.hud-v2 .wtr-cell > .mi { transform: scale(1.4); }
body.hud-v2 .wtr-abbr { font: 10px var(--hv-f-px, monospace); color: #caa982; }
body.hud-v2 .wtr-n {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font: 400 8px var(--hv-f-px, monospace);
  color: #fff;
  text-shadow: 0 2px 0 #000;
}
body.hud-v2 .wtr-tag {
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  font: 6px/1 var(--hv-f-px, monospace);
  padding: 2px 2px 1px;
  background: #0e1319;
  color: #caa982;
  box-shadow: 0 0 0 1px #07090d;
  white-space: nowrap;
}
/* 4A: NEW in gold, GONE in red */
body.hud-v2 .wtr-flag {
  position: absolute;
  z-index: 4;
  font: 7px/1 var(--hv-f-px, monospace);
  letter-spacing: 1px;
  padding: 3px 4px 2px;
  box-shadow: 0 0 0 2px #07090d;
  white-space: nowrap;
}
body.hud-v2 .wtr-flag.new { background: #e3c79a; color: #2a1c0c; }
body.hud-v2 .wtr-flag.gone { background: #c8372d; color: #fff3e8; }

/* ── 2. SIDE BY SIDE, NAMED LINES (2B, the desktop) ───────────────────── */
body.hud-v2 .wtr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; flex: 1 1 auto; min-height: 0; }
body.hud-v2 .wtr-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
body.hud-v2 .wtr-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0e1319;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, inset 0 6px 10px rgba(0, 0, 0, .6);
  padding: 8px;
}
body.hud-v2 .wtr-rows.is-droptarget { box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #e3c79a, 0 0 14px 2px rgba(243, 217, 160, .45); }
body.hud-v2 .wtr-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 4px 4px;
  background: #161d26;
  box-shadow: inset 0 0 0 2px #1f2833;
  flex: 0 0 auto;
}
body.hud-v2 .wtr-row .nm { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
body.hud-v2 .wtr-row .nm b { font: 400 22px/1 var(--hv-f-vt, monospace); color: #efe3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hud-v2 .wtr-row .nm i { font: normal 18px/1 var(--hv-f-vt, monospace); color: #9aa6b6; }
body.hud-v2 .wtr-row .wtr-flag { position: static; flex: 0 0 auto; }
body.hud-v2 .wtr-row.new { box-shadow: inset 0 0 0 2px #f3d9a0, 0 0 12px 2px rgba(243, 217, 160, .45); }
body.hud-v2 .wtr-row.gone { opacity: .75; box-shadow: inset 0 0 0 2px #e0645a; }
body.hud-v2 .wtr-row.gone .nm b { text-decoration: line-through; text-decoration-color: #e0645a; text-decoration-thickness: 2px; color: #9aa6b6; }
body.hud-v2 .wtr-row.gone .wtr-cell > * { opacity: .3; filter: grayscale(.8); }
body.hud-v2 .wtr-read { padding: 0; margin: 0; border: 0; background: none; cursor: pointer; flex: 0 0 auto; }
body.hud-v2 .wtr-read:focus-visible, body.hud-v2 .wtr-wcell:focus-visible { outline: 2px solid #e3c79a; outline-offset: 2px; }
body.hud-v2 .wtr-tools { display: flex; gap: 4px; flex: 0 0 auto; }
body.hud-v2 .wtr-step {
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  background: #0e1319;
  box-shadow: inset 0 0 0 2px #3a4760;
  color: #efe3c8;
  font: 400 20px/1 var(--hv-f-vt, monospace);
  cursor: pointer;
}
body.hud-v2 .wtr-step:disabled { opacity: .45; cursor: default; }
body.hud-v2 .wtr-rowsdrop {
  flex: 1 1 auto;
  min-height: 40px;
  display: grid;
  place-items: center;
  font: 18px var(--hv-f-vt, monospace);
  color: #6c7888;
  box-shadow: inset 0 0 0 2px #1f2833;
  background: repeating-linear-gradient(45deg, #0e1319 0 10px, #111821 10px 20px);
}
body.hud-v2 .wtr-hint { margin: 0; font: 18px/1.05 var(--hv-f-vt, monospace); color: #9aa6b6; flex: 0 0 auto; }

/* ── 3. THE WELLS (5A, and a desktop too narrow for side by side) ─────── */
body.hud-v2 .wtr-phgrid { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.hud-v2 .wtr-phl, body.hud-v2 .wtr-phr { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; }
body.hud-v2 .wtr-well {
  position: relative;
  flex: 0 0 auto;
  background: #0e1319;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, inset 0 6px 10px rgba(0, 0, 0, .6);
  padding: 6px;
}
body.hud-v2 .wtr-well.is-droptarget { box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #e3c79a, 0 0 14px 2px rgba(243, 217, 160, .45); }
body.hud-v2 .wtr-grid { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 4px; align-content: start; }
body.hud-v2 .wtr-wcell {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
body.hud-v2 .wtr-wcell.is-empty { background: linear-gradient(145deg, #0a0e13, #161d26); box-shadow: inset 0 0 0 2px #1f2833, inset 2px 2px 0 2px #070a0e; cursor: default; }
body.hud-v2 .wtr-wcell > .wtr-flag { left: 50%; bottom: -7px; transform: translateX(-50%); }
body.hud-v2 .wtr-wcell.new > .wtr-cell { box-shadow: 0 0 0 3px #f3d9a0, 0 0 14px 4px rgba(243, 217, 160, .6); }
body.hud-v2 .wtr-wcell.gone > .wtr-cell { outline: 3px dashed #e0645a; outline-offset: -5px; }
body.hud-v2 .wtr-wcell.gone > .wtr-cell > * { opacity: .6; filter: grayscale(.5); }
body.hud-v2 .wtr-wcell.gone > .wtr-cell::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 3px;
  background: #e0645a;
  transform: rotate(-35deg);
  box-shadow: 0 0 0 1px #07090d;
}
body.hud-v2 .wtr-wcell.is-intrade > .wtr-cell { opacity: .45; }
body.hud-v2 .wtr-wcell.is-dragging { opacity: .4; }
/* the bag beside: what is in your offer is dimmed (the bank's lifted cell) */
body.hud-v2 .ww-bag1 .wtr-intrade { opacity: .45; filter: grayscale(.4); }

/* ── 4. WEIGHT, STATUS, BUTTONS ───────────────────────────────────────── */
/* the bar, its figure beside it (never over the fill), and the sentence */
body.hud-v2 .wtr-wt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; flex: 0 0 auto; }
body.hud-v2 .wtr-wbar {
  position: relative;
  height: 18px;
  background: #0b0f15;
  box-shadow: inset 0 0 0 2px #2c3645;
}
body.hud-v2 .wtr-wbar > i { position: absolute; left: 4px; top: 4px; bottom: 4px; max-width: calc(100% - 8px); background: linear-gradient(#f3d9a0, #caa982); }
body.hud-v2 .wtr-wnum { font: 400 20px/1 var(--hv-f-vt, monospace); color: #f0ead8; white-space: nowrap; text-shadow: 0 2px 0 #000; }
body.hud-v2 .wtr-wtx { grid-column: 1 / -1; font: 20px/1 var(--hv-f-vt, monospace); color: #d9cdb2; }
body.hud-v2 .wtr-wt.bad .wtr-wtx { color: #ff8a7a; }
body.hud-v2 .wtr-wt.bad .wtr-wbar { box-shadow: inset 0 0 0 2px #ff6a5a; }
body.hud-v2 .wtr-wt.bad .wtr-wbar > i { background: linear-gradient(#ff8a7a, #c8372d); }

body.hud-v2 .wtr-foot { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
body.hud-v2 .wtr-status {
  min-height: 58px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font: 22px/1.05 var(--hv-f-vt, monospace);
  color: #efe3c8;
  background: #0e1319;
  box-shadow: inset 0 0 0 2px #2c3645;
  border-left: 6px solid #4a5568;
}
body.hud-v2 .wtr-status.wait { border-left-color: #caa982; color: #e3d3b0; }
body.hud-v2 .wtr-status.ready { border-left-color: #f3d9a0; color: #fff0cc; }
body.hud-v2 .wtr-status.warn { border-left-color: #e0645a; color: #ffc2b0; background: #1d1012; }
body.hud-v2 .wtr-status.bad { border-left-color: #ff6a5a; color: #ffb09e; background: #1d1012; }
body.hud-v2 .wtr-status.ok { border-left-color: #8fd89a; color: #c8f0cf; }
body.hud-v2 .wtr-btns { display: flex; gap: 8px; }
/* the bench's slate button (btn.png) and its gold one (btngold.png) */
body.hud-v2 .wtr-btn {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 12px;
  border-style: solid;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill / calc(3 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px) calc(5 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px) stretch;
  border-width: calc(3 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px) calc(5 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px);
  background: none;
  image-rendering: pixelated;
  color: #efe3c8;
  font: 400 10px/1 var(--hv-f-px, monospace);
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
  touch-action: manipulation;
}
body.hud-v2 .wtr-btn.is-gold { border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a'); color: #2a1c0c; text-shadow: none; }
body.hud-v2 .wtr-btn:hover:not(:disabled) { filter: brightness(1.12); }
body.hud-v2 .wtr-btn:disabled { color: #8d99aa; cursor: default; filter: none; }
body.hud-v2 .wtr-btn.is-gold:disabled { color: #4a3a20; }
body.hud-v2 .wtr-btn.wtr-cancel { flex: 0 0 auto; }
body.hud-v2 .wtr-btn.wtr-wide { flex: 1 1 100%; }
/* 3A: CONFIRM fills left to right, then turns gold */
body.hud-v2 .wtr-conf .wtr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#f3d9a0, #caa982); opacity: .55; pointer-events: none; }
body.hud-v2 .wtr-conf.is-gold .wtr-fill { opacity: 0; }
body.hud-v2 .wtr-conf .wtr-conflabel { position: relative; z-index: 1; }
body.hud-v2 .wtr-conf.is-filling { color: #b9b0a0; }
/* traded: the lines rest */
body.hud-v2 .wtr.is-done .wtr-row, body.hud-v2 .wtr.is-done .wtr-wcell > .wtr-cell { opacity: .45; }

/* ── 5. THE PHONE ON ITS SIDE (5A): offers left, the bag right ────────── */
/* laid over the bag, the panel needs every row: the window's own ribbon and
   close stay above it, and CANCEL in the foot is the way out, so the panel's
   "Trade" and Back row goes (measured at 844x390: it took 80 of 320 px) */
body.hud-v2 .ww-aside.wtr-aside.is-over-sheet .ww-asidehead { display: none; }
body.hud-v2 .wtr.is-over .wtr-phgrid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; overflow: hidden; }
body.hud-v2 .wtr.is-over .wtr-phl { overflow-y: auto; }
body.hud-v2 .wtr.is-wells .wtr-tag { font-size: 5px; }
body.hud-v2 .wtr.is-over .wtr-well.wtr-bag { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.hud-v2 .wtr.is-wells .wtr-grid { grid-template-columns: repeat(auto-fill, 44px); }
body.hud-v2 .wtr.is-wells .wtr-wcell, body.hud-v2 .wtr.is-wells .wtr-cell { width: 44px; height: 44px; flex-basis: 44px; }
body.hud-v2 .wtr.is-wells .wtr-head { min-height: 18px; }
body.hud-v2 .wtr.is-wells .wtr-h6 { font-size: 7px; }
body.hud-v2 .wtr.is-wells .wtr-chip { font-size: 6px; padding: 3px 5px 2px; }
body.hud-v2 .wtr.is-wells .wtr-flag { font-size: 6px; padding: 2px 3px 1px; }
body.hud-v2 .wtr.is-over { gap: 6px; }
body.hud-v2 .wtr.is-over .wtr-who { min-height: 0; }
body.hud-v2 .wtr.is-over .wtr-crest { width: 22px; height: 22px; }
body.hud-v2 .wtr.is-over .wtr-who .nm { display: flex; align-items: baseline; gap: 8px; }
body.hud-v2 .wtr.is-over .wtr-who .nm b { font-size: 18px; }
body.hud-v2 .wtr.is-over .wtr-who .nm i, body.hud-v2 .wtr.is-over .wtr-reach { font-size: 6px; }
body.hud-v2 .wtr.is-over .wtr-wt { column-gap: 8px; row-gap: 2px; }
body.hud-v2 .wtr.is-over .wtr-wbar { height: 14px; }
body.hud-v2 .wtr.is-over .wtr-wnum { font-size: 18px; }
body.hud-v2 .wtr.is-over .wtr-wtx { font-size: 17px; }
body.hud-v2 .wtr-wt.bad .wtr-wnum { color: #ff8a7a; }
body.hud-v2 .wtr.is-over .wtr-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 10px; align-items: stretch; }
body.hud-v2 .wtr.is-wells .wtr-status { min-height: 44px; font-size: 18px; padding: 4px 10px; border-left-width: 4px; }
body.hud-v2 .wtr.is-wells .wtr-btns { gap: 6px; }
body.hud-v2 .wtr.is-wells .wtr-btn { min-height: 44px; font-size: 8px; padding: 0 8px; }

/* ── 6. THE PROMPT, A TOAST AT THE TOP (1A) ───────────────────────────── */
body.hud-v2 .wtr-prompts {
  position: fixed;
  z-index: 9300;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
body.hud-v2 .wtr-prompts[hidden] { display: none; }
body.hud-v2 .wtr-prompt {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 20px;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/panel.png?v=2026-09-24a') 12 fill / calc(12 * var(--hv-k, 1) * 1px) stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45));
  color: #efe3c8;
}
body.hud-v2 .wtr-prompt.queued { opacity: .94; padding-top: 12px; padding-bottom: 14px; }
body.hud-v2 .wtr-prompt .wtr-crest { width: 48px; height: 48px; }
body.hud-v2 .wtr-ptext { flex: 1 1 auto; display: grid; gap: 6px; min-width: 0; }
body.hud-v2 .wtr-ptext .nm { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
body.hud-v2 .wtr-ptext .nm b { font: 400 26px/1 var(--hv-f-tome, 'New Rocker', serif); color: #f7e6c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body.hud-v2 .wtr-ptext .nm i { font: normal 8px var(--hv-f-px, monospace); letter-spacing: 1px; text-transform: uppercase; }
body.hud-v2 .wtr-ptext .ask { font: 22px/1 var(--hv-f-vt, monospace); color: #d9cdb2; }
body.hud-v2 .wtr-ptext .ask.is-bad { color: #ffb09e; }
body.hud-v2 .wtr-timer { position: relative; display: flex; align-items: center; gap: 10px; height: 14px; }
body.hud-v2 .wtr-timer i { display: block; height: 8px; flex: 0 0 auto; max-width: calc(100% - 52px); background: #caa982; box-shadow: 0 0 0 2px #07090d; }
body.hud-v2 .wtr-timer b { font: 400 9px var(--hv-f-px, monospace); color: #caa982; }
body.hud-v2 .wtr-pbtns { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
body.hud-v2 .wtr-prompt.queued .wtr-pbtns { flex-direction: row; }
body.hud-v2 .wtr-pbtns .wtr-btn { min-height: 44px; min-width: 132px; flex: 0 0 auto; }
body.hud-v2 .wtr-prompt.queued .wtr-pbtns .wtr-btn { min-width: 110px; }

/* ── 7. A REFUSED REQUEST, UNDER WHAT YOU PRESSED (6A) ────────────────── */
body.hud-v2 .wtr-say {
  position: fixed;
  z-index: 9450;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 14px;
  font: 22px/1.05 var(--hv-f-vt, monospace);
  color: #ffd6c8;
  background: #1d1214;
  box-shadow: inset 0 0 0 2px #7a2a1c, 0 0 0 2px #07090d, 0 6px 0 2px rgba(0, 0, 0, .4);
  max-width: min(520px, calc(100vw - 16px));
}
body.hud-v2 .wtr-say.is-pending { color: #efe3c8; background: #121821; box-shadow: inset 0 0 0 2px #4a3b28, 0 0 0 2px #07090d, 0 6px 0 2px rgba(0, 0, 0, .4); }
body.hud-v2 .wtr-say.top { left: 50%; top: 24px; transform: translateX(-50%); white-space: nowrap; }
body.hud-v2 .wtr-nib { position: absolute; left: 30px; top: -12px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 12px solid #7a2a1c; }
body.hud-v2 .wtr-say.is-pending .wtr-nib { border-bottom-color: #4a3b28; }
body.hud-v2 .wtr-link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: 8px var(--hv-f-px, monospace);
  letter-spacing: 1px;
  color: #f3d9a0;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  cursor: pointer;
  min-height: 32px;
}

/* ── 8. SMALL SCREENS: the prompt and the line at a phone's size ──────── */
@media (max-width: 1100px), (max-height: 540px) {
  body.hud-v2 .wtr-prompts { top: 58px; width: min(380px, calc(100vw - 16px)); gap: 6px; }
  body.hud-v2 .wtr-prompt { gap: 10px; padding: 10px 12px 12px; }
  body.hud-v2 .wtr-prompt .wtr-crest { width: 28px; height: 28px; }
  body.hud-v2 .wtr-ptext { gap: 4px; }
  body.hud-v2 .wtr-ptext .nm b { font-size: 18px; }
  body.hud-v2 .wtr-ptext .nm i { font-size: 6px; }
  body.hud-v2 .wtr-ptext .ask { font-size: 18px; }
  body.hud-v2 .wtr-timer b { font-size: 7px; }
  body.hud-v2 .wtr-timer i { height: 6px; }
  body.hud-v2 .wtr-pbtns { flex-direction: row; gap: 6px; }
  body.hud-v2 .wtr-pbtns .wtr-btn, body.hud-v2 .wtr-prompt.queued .wtr-pbtns .wtr-btn { min-width: 76px; min-height: 44px; padding: 0 8px; font-size: 8px; }
  body.hud-v2 .wtr-say { font-size: 18px; padding: 8px 10px 9px; gap: 8px; }
  body.hud-v2 .wtr-link { font-size: 6px; }
}

} /* end of @layer corners */