/* ═══════════════════════════════════════════════════════════════════════
   world-alchemy.css — THE ALCHEMY STAND (#3620 slice 4c), what only alchemy
   draws on the bench grammar (world-bench.css). The cookfire's twin
   (world-cookfire.css), its classes `wal-` where the cookfire's are `wck-`.

   The moment is Wray's MOMENT-B (the Alchemy Picks, 2026-10-04): every
   potion is stirred in a cauldron over the fire (STIR, STIR, CORK). The
   stage is pack icons (the cookfire's campfire and a cauldron;
   public/assets/ui/, ATTRIBUTION.md) on a
   dark ground drawn here in CSS, and the potion rises only after the server
   answers. The drawing is public/js/world-alchemy.js; the window's size is
   world-skin.css's per-door ask, the Forge's shape (.43 x .71).

   `corners`, like world-bench.css; every selector starts at body.hud-v2.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── the list: a row per potion, the potion's own icon ─────────────────── */
body.hud-v2 .wal .wal-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(32px + 10 * var(--hv-k) * 1px);
  height: calc(32px + 10 * var(--hv-k) * 1px);
  box-sizing: border-box;
}
body.hud-v2 .wal .wal-potion.is-locked .wal-cell,
body.hud-v2 .wal .wal-potion.is-locked .wb-row-name { filter: grayscale(.85) brightness(.75); }
body.hud-v2 .wal .wal-potion.is-locked .wb-row-sub { color: var(--hv-foe); }

/* ── the stage's head: the potion, what it does, its gate ──────────────── */
body.hud-v2 .wal .wal-head { flex: none; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.hud-v2 .wal .wal-does { font-size: .85em; color: var(--hv-ok); }
body.hud-v2 .wal .wal-does:empty { display: none; }
body.hud-v2 .wal .wal-gate { font-size: .85em; color: var(--hv-foe); }
body.hud-v2 .wal .wal-gate:empty { display: none; }

/* ── the fire: a dark ground with the fire's glow on it ────────────────── */
body.hud-v2 .wal .wb-scene {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 70%, #20160d 70% 72%, #120c07 72% 100%),
    radial-gradient(52% 44% at 50% 68%, rgba(236, 120, 70, .30), rgba(0, 0, 0, 0) 70%),
    #0b0f15;
}
body.hud-v2 .wal .wal-fire,
body.hud-v2 .wal .wal-tool {
  position: absolute;
  left: 50%;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* the campfire, standing on the ground line */
body.hud-v2 .wal .wal-fire {
  bottom: 22%;
  height: 34%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  animation: wal-flicker 1.2s steps(4) infinite;
}
@keyframes wal-flicker { 50% { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 150, 60, .7)); } }
/* the cauldron, on the fire; a stir rocks it */
body.hud-v2 .wal .wal-cauldron {
  bottom: 34%;
  height: 40%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  transform-origin: 50% 85%;
}
body.hud-v2 .wal .wal-cauldron.is-stir { animation: wal-stir .38s steps(4); }
body.hud-v2 .wal .wal-cauldron.is-stir-big { animation: wal-stir .5s steps(6); }
@keyframes wal-stir {
  25% { transform: translateX(-50%) rotate(-6deg); }
  65% { transform: translateX(-50%) rotate(5deg); }
}
body.hud-v2 .wal .wb-scene.is-hot .wal-tool { filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 138, 42, .8)); }

/* the potion: unseen until it is made (after the 200) */
body.hud-v2 .wal .wal-flask { bottom: 36%; line-height: 0; opacity: 0; z-index: 2; }
body.hud-v2 .wal .wal-flask.is-served { animation: wal-serve .9s steps(9) forwards; }
body.hud-v2 .wal .wal-flask.is-served-big { animation: wal-serve-big 1.5s steps(15) forwards; }
@keyframes wal-serve {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6); }
  35% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1.04); }
  100% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
}
@keyframes wal-serve-big {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6); filter: brightness(2.4); }
  30% { opacity: 1; transform: translateX(-50%) translateY(-16px) scale(1.2); filter: brightness(1.5) drop-shadow(0 0 14px #ffd27a); }
  100% { opacity: 1; transform: translateX(-50%) translateY(-16px) scale(1.12); filter: none; }
}

/* the tap's verb (STIR or GRIND, then CORK or PACK), popped over the stage */
body.hud-v2 .wal .wal-word {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  z-index: 3;
  text-align: center;
  font: 400 calc(8px + 4 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: 1px;
  color: #fff3d6;
  text-shadow: 0 2px 0 #5a2c0a, 0 0 8px rgba(234, 160, 74, .9);
  opacity: 0;
  pointer-events: none;
}
body.hud-v2 .wal .wal-word.is-up { animation: wal-word .65s steps(7) forwards; }
@keyframes wal-word {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ── the tray: a stack per potion, and how many this visit ──────────────── */
body.hud-v2 .wal .wal-tray-cell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: max(44px, calc(32px + 10 * var(--hv-k) * 1px));
  height: max(44px, calc(32px + 10 * var(--hv-k) * 1px));
  box-sizing: border-box;
}
body.hud-v2 .wal .wal-tray-n {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font: 400 max(16px, calc(10px + 3 * var(--hv-k) * 1px)) / 1 var(--hv-f-vt);
  color: #fff3d6;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  pointer-events: none;
}
body.hud-v2 .wal .wal-tray-cell.is-new { visibility: hidden; }
body.hud-v2 .wal .wal-tray-cell.is-landed { animation: wal-land .3s steps(4); }
@keyframes wal-land { 0% { transform: translateY(-6px) scale(1.12); filter: brightness(1.8); } }
/* the flying potion scales from its top-left corner, under the banner */
body.hud-v2 .wal .wal-fly { transform-origin: 0 0; line-height: 0; }
body.hud-v2 .wal.wb .wal-fly { z-index: 3; }

@container wb (max-width: 640px) {
  body.hud-v2 .wal .wal-flask .mi { zoom: .75; }
}
@container wb (max-width: 420px) {
  body.hud-v2 .wal .wal-flask .mi { zoom: .7; }
}

@media (prefers-reduced-motion: reduce) {
  body.hud-v2 .wal .wal-fire,
  body.hud-v2 .wal .wal-cauldron.is-stir,
  body.hud-v2 .wal .wal-cauldron.is-stir-big,
  body.hud-v2 .wal .wal-word.is-up,
  body.hud-v2 .wal .wal-tray-cell.is-landed { animation: none; }
  body.hud-v2 .wal .wal-flask.is-served,
  body.hud-v2 .wal .wal-flask.is-served-big { animation: none; opacity: 1; }
}

}
/* end of @layer corners */