/* ═══════════════════════════════════════════════════════════════════════
   world-bench.css — THE BENCH GRAMMAR (#3030 slice 2, Wray's SMITHY 6A).

   "One bench grammar for the forge, the smithy and the smelter, sawhorse
   and tanning rack: tabs, a list, a stage, costs, three taps, runs and a
   tray." This is that grammar's layout, lifted from the Forge window
   (world-forge.css, #3309) under `wb-*`: the window's regions, the anvil
   stage, the tray, the side column with STRIKE pinned at its foot, the
   inspect holder, and the three shapes (wide, laptop, phone) by the
   window's own width. A bench adds its own file for what only it draws
   (world-smithy.css). The behaviour is public/js/world-bench.js.

   ⛔ The Forge still draws with world-forge.css: moving it onto this file
   is #3345 (world-bench.js says why), with the refine stands' window.

   Kit B throughout, at the chrome pixel --hv-k (world-hud-v2.css): the
   tabs are the shell's `.ws-paneltab`, the slots `.hv-slot`, the bars
   `.hv-bar.hv-xp`; this file adds the gold STRIKE (btngold.png), the slate
   buttons (btn.png), the level shield (shield.png) and the stage.

   Every selector starts at `body.hud-v2`: a bench window opens under the
   HUD pass only.

   ── THE LAYER ────────────────────────────────────────────────────────────
   `corners`, like world-forge.css: window content inside the slate window,
   answering that file and the skin by layer, never by specificity
   (__tests__/worldCssLayers.test.js).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 1. THE BODY: the tabs over a three-part main ─────────────────────── */
body.hud-v2 .wb {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px + 2 * var(--hv-k) * 1px);
  color: var(--hv-ink-slate);
  font: 400 calc(16px + 2 * var(--hv-k) * 1px) / 1.05 var(--hv-f-vt);
  container: wb / inline-size;
}
body.hud-v2 .wb-note {
  margin: auto;
  padding: 24px;
  text-align: center;
  color: var(--hv-dim);
}

/* the tabs, as the shell's own tab row; a shut one is a dim label, never a
   button (a tab that opens nothing is a control that goes nowhere) */
body.hud-v2 .wb .wb-tabs {
  display: flex;
  flex: none;
  gap: calc(2 * var(--hv-k) * 1px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: calc(2 * var(--hv-k) * 1px);
}
body.hud-v2 .wb .wb-tabs::-webkit-scrollbar { display: none; }
body.hud-v2 .wb .wb-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 56px;
  min-height: max(44px, calc(36px + 6 * var(--hv-k) * 1px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.hud-v2 .wb button.wb-tab { cursor: pointer; }
body.hud-v2 .wb .wb-tab.is-shut { opacity: .5; cursor: help; }
/* a shut tab's reason in a word, in the window's readable type at every
   size (it was 4 to 6 px of pixel caps, and gone under 640: the review) */
body.hud-v2 .wb .wb-tab-sub {
  font: 400 max(11px, calc(8px + 2 * var(--hv-k) * 1px)) / 1 var(--hv-f-vt);
  letter-spacing: .02em;
  color: var(--hv-hint);
}
/* the tabs and, floating under them, the line a shut tab's tap fills */
body.hud-v2 .wb .wb-top { position: relative; flex: none; min-width: 0; }
body.hud-v2 .wb .wb-tab-why {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 6;
  padding: 6px 10px;
  background: rgba(8, 10, 14, .94);
  box-shadow: 0 0 0 1px #7e6440;
  color: #fff3d6;
  font-size: .9em;
  line-height: 1.1;
  pointer-events: none;
}
body.hud-v2 .wb .wb-tab-why:empty { display: none; }

body.hud-v2 .wb .wb-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(160px, 26%) minmax(0, 1fr) minmax(170px, 24%);
  gap: calc(4px + 3 * var(--hv-k) * 1px);
}

/* ── 2. THE LIST, down the left ─────────────────────────────────────────── */
body.hud-v2 .wb .wb-list {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hv-k) * 1px);
  padding-right: 2px;
  scrollbar-width: thin;
}
/* ⛔ a row never shrinks to the list's height: a scrolling column of rows
   taller than their min-height shrank them, and each row's contents spilled
   over the next (measured on the served smithy, 2026-09-27) */
body.hud-v2 .wb .wb-list > * { flex-shrink: 0; }
body.hud-v2 .wb .wb-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 6px 4px 4px;
  border: 0;
  background: #1b2330;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 3px #3a4760;
  color: var(--hv-ink-slate);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
body.hud-v2 .wb .wb-row:hover { background: #222c3a; }
body.hud-v2 .wb .wb-row.is-on {
  background: #2b2418;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px var(--hv-gold), 0 0 10px rgba(227, 199, 154, .25);
}
body.hud-v2 .wb .wb-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.hud-v2 .wb .wb-row-name { font-weight: 400; color: var(--hv-gold-hi); overflow-wrap: break-word; }
body.hud-v2 .wb .wb-row-sub { font-size: .8em; line-height: 1; color: var(--hv-mute); }

/* ── 3. THE STAGE: the anvil, what is on it, the tray ───────────────────── */
body.hud-v2 .wb .wb-stage {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hv-k) * 1px + 2px);
}
/* the chosen thing in words, for the shapes whose list has no room for it */
body.hud-v2 .wb .wb-chosen {
  display: none;
  flex: none;
  min-width: 0;
  font-size: .85em;
  color: var(--hv-gold-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.hud-v2 .wb .wb-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* the Forge's anvil (public/assets/ui/forge/README.md): its face sits
     69.7% down, height-fitted and centred */
  background: #0b0f15 url('/assets/ui/forge/anvil.webp?v=2026-09-26a') 50% 70% / cover no-repeat;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #7e6440, inset 0 0 40px rgba(0, 0, 0, .6);
}
body.hud-v2 .wb .wb-scene::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  top: 40%;
  height: 34%;
  background: radial-gradient(closest-side, rgba(255, 140, 40, .35), rgba(255, 90, 20, 0));
  pointer-events: none;
  opacity: .5;
  transition: opacity .25s;
}
body.hud-v2 .wb .wb-scene.is-hot::after { opacity: 1; }
body.hud-v2 .wb .wb-scene.is-cold { filter: grayscale(.8) brightness(.8); transition: filter .2s; }
/* what waits on the anvil: a bench decides its size and its picture */
body.hud-v2 .wb .wb-ghost {
  position: absolute;
  left: 50%;
  bottom: 30.3%;
  transform: translateX(-50%);
  pointer-events: none;
}
body.hud-v2 .wb .wb-scene.is-hit .wb-ghost { animation: wb-hit .16s steps(3); }
body.hud-v2 .wb .wb-scene.is-blow .wb-ghost { animation: wb-blow .2s steps(4); }
body.hud-v2 .wb .wb-scene.is-blow { animation: wb-jolt .18s steps(3); }
body.hud-v2 .wb .wb-scene.is-hit-big { animation: wb-shake .32s steps(6); }
@keyframes wb-hit {
  0% { transform: translateX(-50%) translateY(3px) scale(1.03, .97); }
  60% { transform: translateX(-50%) translateY(-2px); }
}
@keyframes wb-blow {
  0% { transform: translateX(-50%) translateY(6px) scale(1.07, .92); }
  50% { transform: translateX(-50%) translateY(-4px) scale(.98, 1.03); }
}
@keyframes wb-jolt {
  30% { transform: translate(-3px, 2px); }
  60% { transform: translate(3px, -1px); }
}
@keyframes wb-shake {
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}
body.hud-v2 .wb .wb-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* three pips: the taps toward the next craft */
body.hud-v2 .wb .wb-pips {
  position: absolute;
  left: 50%;
  bottom: 8%;
  display: flex;
  gap: calc(4 * var(--hv-k) * 1px);
  transform: translateX(-50%);
  pointer-events: none;
}
body.hud-v2 .wb .wb-pip {
  width: calc(4 * var(--hv-k) * 1px + 6px);
  height: calc(4 * var(--hv-k) * 1px + 6px);
  transform: rotate(45deg);
  background: #2a2016;
  box-shadow: 0 0 0 2px #0b0f15, inset 0 0 0 1px #7e6440;
}
body.hud-v2 .wb .wb-pip.is-lit {
  background: #ffb347;
  box-shadow: 0 0 0 2px #0b0f15, 0 0 10px #ff8a2a;
}
body.hud-v2 .wb .wb-pips.is-waiting .wb-pip.is-lit { animation: wb-wait .5s steps(2) infinite; }
@keyframes wb-wait { 50% { background: #fff3c4; } }
body.hud-v2 .wb .wb-prog {
  position: absolute;
  right: 8px;
  top: 8px;
  font: 400 calc(4px + 3 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #fff3d6;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
/* the full moment's banner: the title ribbon, dropped over the anvil */
body.hud-v2 .wb .wb-banner {
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -20px) scale(.6);
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
body.hud-v2 .wb .wb-banner b {
  display: block;
  padding: calc(3 * var(--hv-k) * 1px) calc(26 * var(--hv-k) * 1px) calc(10 * var(--hv-k) * 1px);
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/title.png?v=2026-09-24a') 2 24 9 24 fill / calc(2 * var(--hv-k) * 1px) calc(24 * var(--hv-k) * 1px) calc(9 * var(--hv-k) * 1px) calc(24 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
  font: 400 calc(8px + 5 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
  white-space: nowrap;
  font-weight: 400;
}
body.hud-v2 .wb .wb-banner span {
  padding: 3px 8px;
  background: rgba(8, 10, 14, .85);
  box-shadow: 0 0 0 1px #7e6440;
  color: var(--hv-gold-hi);
}
body.hud-v2 .wb .wb-banner.is-up { animation: wb-banner 2.6s steps(26) forwards; }
@keyframes wb-banner {
  0% { opacity: 0; transform: translate(-50%, -20px) scale(.6); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  16%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(1); }
}

/* the tray: this visit's makes, each one picked up to look at */
body.hud-v2 .wb .wb-tray {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px 8px;
  background: #121821;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 3px #3a4760;
}
body.hud-v2 .wb .wb-tray-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: var(--hv-gold-hi);
  text-transform: uppercase;
}
body.hud-v2 .wb .wb-tray-head b { font-weight: 400; }
body.hud-v2 .wb .wb-tray-n { color: #fff3d6; }
body.hud-v2 .wb .wb-tray-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: calc(40px + 12 * var(--hv-k) * 1px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
body.hud-v2 .wb .wb-tray-empty { align-self: center; color: var(--hv-hint); font-size: .9em; }
body.hud-v2 .wb .wb-fly {
  position: absolute;
  z-index: 5;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 10px #ffb347);
}

/* ── 4. THE SIDE: the level, the costs, the run ─────────────────────────── */
body.hud-v2 .wb .wb-side {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hv-k) * 1px + 2px);
  font-size: .92em;
}
body.hud-v2 .wb .wb-info {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hv-k) * 1px + 2px);
  scrollbar-width: thin;
}
body.hud-v2 .wb .wb-level { display: flex; align-items: flex-start; gap: 8px; }
body.hud-v2 .wb .wb-shield {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(24 * var(--hv-k) * 1px);
  height: calc(29 * var(--hv-k) * 1px);
  padding-bottom: calc(3 * var(--hv-k) * 1px);
  box-sizing: border-box;
  background: url('/assets/ui/kitb/shield.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font: 400 calc(4px + 3 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #fff3d6;
  text-shadow: 0 2px 0 #3a1406;
}
body.hud-v2 .wb .wb-level-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
body.hud-v2 .wb .wb-level-txt > b { font-weight: 400; color: var(--hv-gold-hi); }
body.hud-v2 .wb .wb-xp-txt,
body.hud-v2 .wb .wb-pool-t { font-size: .85em; color: var(--hv-mute); }
body.hud-v2 .wb .wb-xp > i { transition: width .25s steps(5); }
body.hud-v2 .wb .wb-h {
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.2 var(--hv-f-px);
  color: var(--hv-dim);
  text-transform: uppercase;
}
body.hud-v2 .wb .wb-costs { display: flex; flex-direction: column; gap: 5px; }
body.hud-v2 .wb .wb-cost { display: flex; align-items: center; gap: 8px; }
/* the slot holds a 32 px MatIcons icon inside kit B's 5k rim (the Forge's
   UX review, should-fix 7) */
body.hud-v2 .wb .wb-cost-slot {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(32px + 10 * var(--hv-k) * 1px);
  height: calc(32px + 10 * var(--hv-k) * 1px);
}
body.hud-v2 .wb .wb-mat { display: grid; place-items: center; line-height: 0; }
body.hud-v2 .wb .wb-coin::before {
  content: '';
  width: 32px;
  height: 32px;
  /* the Obol (Wray's pick A, 2026-10-04), at its own 32 art pixels */
  background: url('/assets/ui/kitb/obol.png?v=2026-10-04a') center / contain no-repeat;
  image-rendering: pixelated;
}
body.hud-v2 .wb .wb-cost-txt { display: flex; flex-direction: column; min-width: 0; }
body.hud-v2 .wb .wb-cost-txt b { font-weight: 400; color: #fff3d6; }
body.hud-v2 .wb .wb-cost-txt span { font-size: .85em; color: var(--hv-mute); }
body.hud-v2 .wb .wb-cost.is-short .wb-cost-txt span,
body.hud-v2 .wb .wb-cost.is-short .wb-cost-txt b { color: var(--hv-foe); }
body.hud-v2 .wb .wb-pool { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
body.hud-v2 .wb .wb-sub { font-size: .8em; color: var(--hv-hint); }

body.hud-v2 .wb .wb-act { flex: none; display: flex; flex-direction: column; gap: 6px; }
body.hud-v2 .wb .wb-counts { display: flex; gap: 4px; }
body.hud-v2 .wb .wb-count,
body.hud-v2 .wb .wb-mute {
  flex: 1;
  min-height: 44px;
  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) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) stretch;
  border-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  background: none;
  image-rendering: pixelated;
  color: var(--hv-ink);
  font: 400 calc(4px + 3 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
}
body.hud-v2 .wb .wb-count:hover,
body.hud-v2 .wb .wb-mute:hover { filter: brightness(1.18); }
body.hud-v2 .wb .wb-count[aria-pressed='true'] {
  border-image-source: url('/assets/ui/kitb/tab-on-red.png?v=2026-09-24a');
  border-image-slice: 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px);
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
}
/* the sound switch: the bus's own mute, in the stage's top-left corner */
body.hud-v2 .wb .wb-mute {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  flex: none;
  width: calc(28px + 4 * var(--hv-k) * 1px);
  height: calc(28px + 4 * var(--hv-k) * 1px);
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
body.hud-v2 .wb .wb-mute svg { width: 72%; height: auto; display: block; }
body.hud-v2 .wb .wb-mute .wb-mute-x { display: none; }
body.hud-v2 .wb .wb-mute.is-off .wb-mute-x { display: inline; }
body.hud-v2 .wb .wb-mute.is-off svg rect { opacity: .45; }
body.hud-v2 .wb .wb-strike {
  min-height: calc(40px + 6 * var(--hv-k) * 1px);
  border-style: solid;
  border-image: url('/assets/ui/kitb/btngold.png?v=2026-09-24a') 3 3 5 3 fill / calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) stretch;
  border-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  background: none;
  image-rendering: pixelated;
  color: #2a1c0c;
  font: 400 calc(6px + 5 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: .06em;
  cursor: pointer;
  touch-action: manipulation;
}
body.hud-v2 .wb .wb-strike:hover { filter: brightness(1.1); }
body.hud-v2 .wb .wb-strike:active { transform: translateY(2px); }
body.hud-v2 .wb .wb-strike:disabled {
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  color: var(--hv-dim);
  cursor: default;
  filter: none;
}
body.hud-v2 .wb .wb-hint { font-size: .8em; color: var(--hv-hint); }
body.hud-v2 .wb .wb-act:has(.wb-status:not(:empty)) .wb-hint,
body.hud-v2 .wb .wb-act:has(.wb-need:not(:empty)) .wb-hint { display: none; }
body.hud-v2 .wb .wb-need { font-size: .9em; color: var(--hv-foe); }
body.hud-v2 .wb .wb-need:empty { display: none; }
body.hud-v2 .wb .is-flash { animation: wb-flash .5s steps(4); }
@keyframes wb-flash { 25%, 75% { filter: brightness(1.8); } }
body.hud-v2 .wb .wb-away {
  padding: 8px;
  background: #121821;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 3px #3a4760;
  color: var(--hv-gold-hi);
}
body.hud-v2 .wb .wb-status { min-height: 1.1em; font-size: .9em; color: var(--hv-ok); }
body.hud-v2 .wb .wb-status[data-kind='stop'],
body.hud-v2 .wb .wb-status[data-kind='away'] { color: var(--hv-foe); }
body.hud-v2 .wb .wb-status:empty { display: none; }

/* ── 5. INSPECT: a made thing held up until it is put down ──────────────── */
body.hud-v2 .wb .wb-inspect {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 12, .95);
}
body.hud-v2 .wb .wb-inspect[hidden] { display: none; }
body.hud-v2 .wb .wb-insp-panel {
  display: flex;
  align-items: center;
  gap: calc(8px + 6 * var(--hv-k) * 1px);
  max-width: 100%;
  max-height: 100%;
  padding: 12px;
  box-sizing: border-box;
}

/* ── 6. A SMALLER WINDOW: a laptop's centred window, then a phone ──────────
   By the WINDOW's width (a container query), the Forge's three shapes:
     wide    (over 640)   list | stage | side
     laptop  (420 to 640) the list as a row over the stage, the side beside
     phone   (under 420)  one column that scrolls, STRIKE at the foot */
@container wb (max-width: 640px) {
  body.hud-v2 .wb .wb-main {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 34%);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'list side' 'stage side';
    gap: 6px;
  }
  body.hud-v2 .wb .wb-list { grid-area: list; }
  body.hud-v2 .wb .wb-stage { grid-area: stage; }
  body.hud-v2 .wb .wb-side { grid-area: side; }
  body.hud-v2 .wb .wb-list {
    flex: none;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 0 0 2px;
  }
  body.hud-v2 .wb .wb-row {
    flex: none;
    grid-template-columns: auto;
    justify-items: center;
    align-content: start;
    gap: 3px;
    width: 72px;
    min-height: 60px;
    padding: 4px;
  }
  body.hud-v2 .wb .wb-row-txt { width: 100%; align-items: center; }
  body.hud-v2 .wb .wb-row-sub { display: none; }
  body.hud-v2 .wb .wb-row-name {
    width: 100%;
    font-size: .72em;
    line-height: 1;
    text-align: center;
    overflow-wrap: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.hud-v2 .wb .wb-chosen { display: block; }
  body.hud-v2 .wb .wb-tray-row { min-height: 52px; }
  /* the anvil takes what the stage has left: a fixed 150 px floor ran the
     stage 23 px past its box at 1366 x 768 and cut the tray (the review) */
  body.hud-v2 .wb .wb-scene { min-height: 100px; }
  /* the run's buttons say x1 / x5 / x10 themselves: the heading's line goes
     to the costs, which a laptop's side column clipped (the review) */
  body.hud-v2 .wb .wb-act > .wb-h { display: none; }
  /* the pool's words carry its numbers; the bar under them was the last
     11 px the laptop's side column could not show at rest (measured at
     1366 x 768) */
  body.hud-v2 .wb .wb-poolbar { display: none; }
}
@container wb (max-width: 420px) {
  body.hud-v2 .wb .wb-main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 6px;
  }
  body.hud-v2 .wb .wb-tab { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }
  body.hud-v2 .wb .wb-act > .wb-h { display: block; }
  body.hud-v2 .wb .wb-poolbar { display: block; }
  body.hud-v2 .wb .wb-row { width: 72px; min-height: 64px; }
  /* the run before the tray: the stage's parts join the column, so the
     costs and STRIKE follow the anvil and the tray comes last (measured on a
     390x844 phone, the tray first put STRIKE a screen below the anvil) */
  body.hud-v2 .wb .wb-stage { display: contents; }
  body.hud-v2 .wb .wb-side { order: 1; }
  body.hud-v2 .wb .wb-tray { order: 2; }
  body.hud-v2 .wb .wb-scene { flex: none; height: clamp(140px, 21vh, 240px); }
  body.hud-v2 .wb .wb-tray-row { min-height: 60px; }
  body.hud-v2 .wb .wb-mute { width: 44px; height: 44px; }
  body.hud-v2 .wb .wb-side { flex: none; overflow: visible; }
  body.hud-v2 .wb .wb-info { flex: none; overflow: visible; }
  body.hud-v2 .wb .wb-costs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  body.hud-v2 .wb .wb-costs > .wb-h,
  body.hud-v2 .wb .wb-costs > .wb-pool { grid-column: 1 / -1; }
  body.hud-v2 .wb .wb-act { margin-top: 2px; }
  body.hud-v2 .wb .wb-insp-panel { flex-direction: column; overflow-y: auto; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body.hud-v2 .wb .wb-scene.is-hit .wb-ghost,
  body.hud-v2 .wb .wb-scene.is-blow .wb-ghost,
  body.hud-v2 .wb .wb-scene.is-blow,
  body.hud-v2 .wb .wb-scene.is-hit-big,
  body.hud-v2 .wb .wb-banner.is-up,
  body.hud-v2 .wb .wb-pips.is-waiting .wb-pip.is-lit,
  body.hud-v2 .wb .is-flash { animation: none; }
  body.hud-v2 .wb .wb-banner.is-up { opacity: 1; transform: translate(-50%, 0); }
}

}
/* end of @layer corners */