/* ═══════════════════════════════════════════════════════════════════════
   world-cookfire.css — THE COOKFIRE (#3619 slice 3b), what only cooking
   draws on the bench grammar (world-bench.css).

   Wray's MOMENT-A (2026-10-03, the Cookfire Picks): by the meal. The
   Sardine, the Fox Skewer and the Trout Supper turn on a spit (TURN, TURN,
   SERVE); the Gatherer's Pie and the Carp Stew are stirred in a pot (STIR,
   STIR, SERVE). The stage is three pack icons (the campfire, the spit, the
   pot; public/assets/ui/cookfire/, ATTRIBUTION.md) on a dark ground drawn
   here in CSS, in place of the Forge's anvil picture, and the meal rises off
   the fire only after the server answers. The drawing is
   public/js/world-cookfire.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 meal, the meal's own icon ─────────────────────── */
body.hud-v2 .wck .wck-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 .wck .wck-meal.is-locked .wck-cell,
body.hud-v2 .wck .wck-meal.is-locked .wb-row-name { filter: grayscale(.85) brightness(.75); }
body.hud-v2 .wck .wck-meal.is-locked .wb-row-sub { color: var(--hv-foe); }

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

/* ── the fire: a dark ground with the fire's glow on it ────────────────── */
body.hud-v2 .wck .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(255, 140, 40, .34), rgba(0, 0, 0, 0) 70%),
    #0b0f15;
}
body.hud-v2 .wck .wck-fire,
body.hud-v2 .wck .wck-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 .wck .wck-fire {
  bottom: 22%;
  height: 34%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  animation: wck-flicker 1.2s steps(4) infinite;
}
@keyframes wck-flicker { 50% { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 150, 60, .7)); } }
/* the spit, level across the fire; a turn flips it about its own bar. The
   pack's skewer leans the other way from the mock's sketch, so it is turned
   back 45 degrees to lie flat, and the flip is a mirror ACROSS the flat bar
   (scaleY after the rotate, in screen space). Measured on the served page:
   rotate(45deg) stood it upright over the fire. */
body.hud-v2 .wck .wck-spit {
  bottom: 30%;
  height: 40%;
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(-45deg);
  transition: transform .14s steps(3);
}
body.hud-v2 .wck .wck-spit.is-flip { transform: translateX(-50%) scaleY(-1) rotate(-45deg); }
/* the pot, on the fire; a stir rocks it */
body.hud-v2 .wck .wck-pot {
  bottom: 34%;
  height: 40%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  transform-origin: 50% 85%;
}
body.hud-v2 .wck .wck-pot.is-stir { animation: wck-stir .38s steps(4); }
body.hud-v2 .wck .wck-pot.is-stir-big { animation: wck-stir .5s steps(6); }
@keyframes wck-stir {
  25% { transform: translateX(-50%) rotate(-6deg); }
  65% { transform: translateX(-50%) rotate(5deg); }
}
body.hud-v2 .wck .wb-scene.is-hot .wck-tool { filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 138, 42, .8)); }

/* the meal: unseen on the fire until it is served (after the 200) */
body.hud-v2 .wck .wck-dish { bottom: 36%; line-height: 0; opacity: 0; z-index: 2; }
body.hud-v2 .wck .wck-dish.is-served { animation: wck-serve .9s steps(9) forwards; }
body.hud-v2 .wck .wck-dish.is-served-big { animation: wck-serve-big 1.5s steps(15) forwards; }
@keyframes wck-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 wck-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 (TURN, STIR, SERVE), popped over the fire */
body.hud-v2 .wck .wck-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 .wck .wck-word.is-up { animation: wck-word .65s steps(7) forwards; }
@keyframes wck-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 meal, and how many this visit ────────────────── */
body.hud-v2 .wck .wck-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 .wck .wck-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 .wck .wck-tray-cell.is-new { visibility: hidden; }
body.hud-v2 .wck .wck-tray-cell.is-landed { animation: wck-land .3s steps(4); }
@keyframes wck-land { 0% { transform: translateY(-6px) scale(1.12); filter: brightness(1.8); } }
/* the flying meal scales from its top-left corner, under the banner */
body.hud-v2 .wck .wck-fly { transform-origin: 0 0; line-height: 0; }
body.hud-v2 .wck.wb .wck-fly { z-index: 3; }

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

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

}
/* end of @layer corners */