/* ============================================================
   art.css — CSS-only glyphs, customers, ingredients, meat
   ============================================================ */

/* ------------------------------------------------------------
   HUD glyphs (sit inside white capsules on wall)
   ------------------------------------------------------------ */
.hud-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
}

/* calendar: white paper with brick-red header band + ring notches */
.hud-icon--calendar {
  background: #fff;
  border: 1.5px solid var(--accent-dark);
  border-radius: 3px;
  box-shadow: inset 0 5px 0 var(--accent);
}

.hud-icon--calendar::before,
.hud-icon--calendar::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 2px;
  height: 5px;
  background: var(--text);
  border-radius: 1px;
}

.hud-icon--calendar::before { left: 3px; }
.hud-icon--calendar::after  { right: 3px; }

/* smile: yellow disc with tiny eyes + curve */
.hud-icon--smile {
  background: radial-gradient(circle at 50% 40%, #FFE89A 0%, #F5C44D 90%);
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.hud-icon--smile::before {
  content: "";
  position: absolute;
  top: 5px; left: 4px; right: 4px;
  height: 2px;
  background:
    radial-gradient(circle at 20% 50%, var(--text) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 80% 50%, var(--text) 0 1.5px, transparent 1.8px);
}

.hud-icon--smile::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 4px;
  border: 1.5px solid var(--text);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

/* coin: gold disc with ₩ mark */
.hud-icon--coin {
  background: radial-gradient(circle at 35% 35%, #FFE28A 0%, #E6A93A 70%, #B17F20 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.hud-icon--coin::before {
  content: "₩";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #7c4a0f;
}

/* gem: rotated square with highlight */
.hud-icon--gem {
  width: 14px;
  height: 14px;
  margin: 2px;
  background: linear-gradient(135deg, #7AD1F5 0%, #2F89C4 100%);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.6),
    inset -1px -1px 0 rgba(0, 0, 0, 0.2);
}

.hud-icon--gem::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 4px; height: 4px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1px;
}

/* ------------------------------------------------------------
   Customer — variable hair/skin/shirt, upper body, face details
   Absolutely positioned inside .seat; extends below so the counter
   strip naturally hides the waist.
   ------------------------------------------------------------ */
.customer {
  --hair: #2C1810;
  --skin: #F4C2A1;
  --shirt: #6B8CAE;
  --shirt-shadow: rgba(0, 0, 0, 0.18);

  position: absolute;
  left: 50%;
  bottom: -35px;              /* extends ~35px into counter-strip area (waist down) */
  transform: translateX(-50%);
  width: 68px;
  height: 120px;              /* head 34 + body 86 (bottom hidden by counter) */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.customer--wide {
  width: 76px;
}

.customer--silhouette {
  opacity: 0.2;
  filter: grayscale(1);
}

/* head: skin oval with hair cap above, eyes + mouth via background layers */
.customer__head {
  width: 32px;
  height: 34px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 245, 234, 0.9) 0%, transparent 45%),
    var(--skin);
  border-radius: 50% 50% 48% 48%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
}

/* hair cap */
.customer__head::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -2px;
  right: -2px;
  height: 15px;
  background: var(--hair);
  border-radius: 50% 50% 28% 28% / 70% 70% 25% 25%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

/* eyes (2 black dots, 4px) + mouth (short line) */
.customer__head::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 35% 52%, #000 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 65% 52%, #000 0 1.8px, transparent 2.2px),
    linear-gradient(
      90deg,
      transparent calc(50% - 3px),
      rgba(50, 25, 15, 0.7) calc(50% - 3px) calc(50% + 3px),
      transparent calc(50% + 3px)
    );
  background-size: 100% 100%, 100% 100%, 6px 1.2px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, 50% 72%;
  pointer-events: none;
}

/* body: shirt torso with shoulder caps. Bottom half hides behind counter. */
.customer__body {
  position: relative;
  margin-top: -3px;
  width: 58px;
  height: 90px;
  background:
    linear-gradient(180deg, var(--shirt) 0%, color-mix(in srgb, var(--shirt), #000 18%) 100%);
  border-radius: 22px 22px 4px 4px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 3px 4px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.customer--wide .customer__body {
  width: 68px;
}

/* shoulder caps (arms) */
.customer__body::before,
.customer__body::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 14px;
  height: 26px;
  background: var(--shirt);
  border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

.customer__body::before { left: -9px; }
.customer__body::after  { right: -9px; }

/* ------------------------------------------------------------
   Order UI — speech above head, patience bar directly below speech.
   The order stack sits 8px above the customer head; speech has a
   downward tail, patience follows below with a small gap so the
   tail stays visible.
   ------------------------------------------------------------ */
.order {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;                  /* clears the speech tail cleanly */
}

/* Speech bubble: white rounded, chips in a 2-column grid, downward tail.
   Stage 14R: scaled to ~80% and forced to 2 columns per customer. */
.speech {
  position: relative;
  min-width: 35px;
  min-height: 29px;
  max-width: 138px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-auto-flow: row;
  gap: 5px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  opacity: 0;
  transform: translateY(-2px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 140ms, transform 140ms;
}

.speech--active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* downward tail toward customer head */
.speech::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.10);
}

/* When an .ingredient sits inside .speech, lock a consistent size so
   chip-like layouts (scallion stalk, bulb garlic) align neatly.
   Stage 14R: ~80% scaled to match the smaller bubble. */
.speech .ingredient {
  width: 32px;
  height: 26px;
  flex-shrink: 0;
}

.speech .ingredient--scallion {
  width: 11px;
  height: 26px;
  margin-top: 0;
}

/* Patience bar — horizontal pill directly below speech.
   Hue interpolates 120 (green) → 0 (red) via --patience-hue (0–120). */
.patience {
  position: relative;
  width: 52px;
  height: 5px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.patience::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--patience, 0%);
  background: hsl(var(--patience-hue, 120), 70%, 50%);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: width 300ms ease-out, background 200ms;
}

/* ------------------------------------------------------------
   Ingredients — tray chips + speech chips
   Beef and samgyeop get the P0 marbling/stripe treatment.
   ------------------------------------------------------------ */
.ingredient {
  display: inline-block;
  position: relative;
  width: 52px;
  height: 40px;
  flex-shrink: 0;
}

.ingredient-chip {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
}

/* beef: red oval with 3-layer marbling — gradient band for body fat,
   ::before/::after for bolder streaks, subtle rim sheen for 3D feel. */
.ingredient--beef {
  background:
    linear-gradient(102deg,
      transparent 44%,
      rgba(255, 255, 255, 0.28) 46% 49%,
      transparent 51%),
    radial-gradient(ellipse at 38% 30%, rgba(255, 180, 180, 0.45) 0% 18%, transparent 35%),
    radial-gradient(ellipse at 50% 55%, #C63A3A 0%, #8A1F1F 100%);
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.ingredient--beef::before {
  content: "";
  position: absolute;
  top: 26%;
  left: 14%;
  right: 18%;
  height: 2px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  transform: rotate(-10deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ingredient--beef::after {
  content: "";
  position: absolute;
  bottom: 24%;
  left: 22%;
  right: 14%;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transform: rotate(8deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ingredient-chip--beef {
  background: radial-gradient(ellipse at 50% 50%, #C63A3A 0%, #8A1F1F 100%);
  border-radius: 50% 50% 45% 55%;
}

.ingredient-chip--beef::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 20%;
  right: 25%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
}

/* pork: pale pink slab with 6 fat speckles, central highlight, rim sheen */
.ingredient--pork {
  background:
    radial-gradient(circle at 25% 28%, #fff 0 2.2px, transparent 2.8px),
    radial-gradient(circle at 68% 38%, #fff 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 45% 62%, #fff 0 1.6px, transparent 2.1px),
    radial-gradient(circle at 72% 72%, #fff 0 1.6px, transparent 2.1px),
    radial-gradient(circle at 30% 78%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 55% 22%, rgba(255, 255, 255, 0.65) 0 1.1px, transparent 1.6px),
    radial-gradient(ellipse at 45% 32%, rgba(255, 200, 200, 0.55) 0% 22%, transparent 42%),
    radial-gradient(ellipse at 50% 55%, #F6B0B0 0%, #F4A5A5 45%, #C97272 100%);
  border-radius: 45% 55% 45% 55% / 50% 45% 55% 50%;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.ingredient-chip--pork {
  background:
    radial-gradient(circle at 30% 40%, #fff 0 0.8px, transparent 1px),
    radial-gradient(ellipse at 50% 40%, #F4A5A5, #C97272);
  border-radius: 50%;
}

/* samgyeop: stacked lean/fat/lean/fat/lean bands with subtle side bevel
   (gives a slice-of-belly depth) + skin edge sheen + lateral shading. */
.ingredient--samgyeop {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.12) 0%,
      transparent 8% 92%,
      rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg,
      #D98878 0% 3%,            /* skin edge dark line */
      #E8A598 3% 25%,
      #F7E8DE 25% 38%,          /* fat band 1 (warmer white) */
      #D98878 38% 58%,
      #FFF4EC 58% 68%,          /* fat band 2 */
      #C77060 68% 90%,
      rgba(0, 0, 0, 0.15) 90% 92%,
      #B8655A 92% 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.ingredient-chip--samgyeop {
  background: linear-gradient(
    180deg,
    #E8A598 0 33%,
    #fff 33% 50%,
    #D98878 50% 83%,
    #fff 83% 100%
  );
  border-radius: 2px;
}

/* mushroom: cap with dome highlight + dark cap-rim, gills line, stem gradient */
.ingredient--mushroom {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.38) 0% 20%, transparent 42%),
    linear-gradient(180deg,
      #9A6847 0% 8%,
      #8B5A3C 8% 48%,
      #6E4429 48% 52%,           /* dark cap rim = gill shadow */
      #f5ebdc 52% 58%,
      #F0E0C6 58% 92%,
      #D4BE9A 92% 100%);
  border-radius: 50% 50% 20% 20% / 70% 70% 25% 25%;
  box-shadow:
    inset 0 -2px 2px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

/* cap highlight — soft dome reflection */
.ingredient--mushroom::before {
  content: "";
  position: absolute;
  top: 10%; left: 26%;
  width: 24%; height: 14%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.55), transparent 75%);
  border-radius: 50%;
}

/* gill hint lines — three short vertical ticks under the cap rim */
.ingredient--mushroom::after {
  content: "";
  position: absolute;
  top: 42%; left: 28%; right: 28%; height: 8%;
  background:
    linear-gradient(90deg,
      transparent 0 15%,
      rgba(0, 0, 0, 0.25) 15% 20%,
      transparent 20% 45%,
      rgba(0, 0, 0, 0.25) 45% 50%,
      transparent 50% 75%,
      rgba(0, 0, 0, 0.25) 75% 80%,
      transparent 80% 100%);
  border-radius: 1px;
}

.ingredient-chip--mushroom {
  background: linear-gradient(180deg, #8B5A3C 0 55%, #f5ebdc 55%);
  border-radius: 50% 50% 20% 20%;
}

/* bokchoy: leafy green top + pale stalk base, central vein + 2 side veins */
.ingredient--bokchoy {
  background:
    linear-gradient(180deg,
      rgba(30, 70, 35, 0.35) 0% 60%,
      transparent 60% 100%) 48% 0 / 2px 100% no-repeat,  /* central vein */
    radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.22) 0% 22%, transparent 45%),
    linear-gradient(180deg,
      #5A8A4A 0% 15%,
      #4A7A3C 15% 55%,
      #3A6A2C 55% 60%,       /* dark transition into stalk */
      #E8F0D4 60% 92%,
      #C8D4A8 92% 100%);
  border-radius: 30% 30% 50% 50% / 55% 55% 45% 45%;
  box-shadow:
    inset 0 -1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

/* side veins — thin diagonal lines diverging from the center */
.ingredient--bokchoy::before {
  content: "";
  position: absolute;
  top: 18%; left: 50%;
  width: 32%; height: 2px;
  background: rgba(30, 70, 35, 0.4);
  border-radius: 2px;
  transform: translate(-100%, 0) rotate(20deg);
  transform-origin: right center;
}

.ingredient--bokchoy::after {
  content: "";
  position: absolute;
  top: 32%; left: 50%;
  width: 32%; height: 2px;
  background: rgba(30, 70, 35, 0.4);
  border-radius: 2px;
  transform: rotate(-20deg);
  transform-origin: left center;
}

.ingredient-chip--bokchoy {
  background: linear-gradient(180deg, #4A7A3C 60%, #E8F0D4 60%);
  border-radius: 40% 40% 50% 50%;
}

/* scallion: vertical stalk with segment rings, tip shadow, side highlight */
.ingredient--scallion {
  width: 14px;
  height: 38px;
  margin-top: 2px;
  background:
    linear-gradient(0deg, transparent 19%, rgba(0, 0, 0, 0.18) 19% 21%, transparent 21%),
    linear-gradient(0deg, transparent 38%, rgba(0, 0, 0, 0.15) 38% 40%, transparent 40%),
    linear-gradient(0deg, transparent 57%, rgba(0, 0, 0, 0.18) 57% 59%, transparent 59%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 20% 80%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.3) 38% 42%, transparent 50%),
    linear-gradient(180deg,
      #588B55 0% 8%,
      #6FA26C 8% 50%,
      #7FB179 50% 55%,
      #E8F0D4 55% 92%,
      #C8D4A8 92% 100%);
  border-radius: 40% 40% 50% 50% / 20% 20% 30% 30%;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    inset -1px 0 0 rgba(0, 0, 0, 0.12);
}

.ingredient--scallion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30%;
  background: #3A6A2C;
  border-radius: 50%;
}

.ingredient-chip--scallion {
  width: 4px;
  height: 13px;
  margin: 0 5px;
  background: linear-gradient(180deg, #6FA26C 0% 55%, #E8F0D4 55% 100%);
  border-radius: 50px;
}

/* garlic: two overlapping cloves — warmer gradient, brighter inner highlight,
   a faint stem notch at the top via the parent background gradient. */
.ingredient--garlic {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(120, 95, 45, 0.35) 0% 8%, transparent 18%);
}

.ingredient--garlic::before,
.ingredient--garlic::after {
  content: "";
  position: absolute;
  top: 12%;
  width: 58%;
  height: 78%;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255, 255, 240, 0.85) 0% 25%, transparent 55%),
    linear-gradient(180deg, #fef8e4 0%, #efdfb0 55%, #d6c69a 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow:
    inset -1px -1px 2px rgba(0, 0, 0, 0.18),
    inset 1px 1px 2px rgba(255, 255, 255, 0.7),
    0 1px 1px rgba(0, 0, 0, 0.1);
}

.ingredient--garlic::before { left: 0; }
.ingredient--garlic::after  { right: 0; }

.ingredient-chip--garlic {
  background:
    radial-gradient(circle at 30% 50%, #fef8e4 0 3px, transparent 3.5px),
    radial-gradient(circle at 70% 50%, #fef8e4 0 3px, transparent 3.5px);
}

/* ------------------------------------------------------------
   Meat (piece) — layered so the cook color can update every frame
   without losing the per-ingredient pattern.
     .meat           outer, event target, grill marks ::after, steam ::before
     .meat-cook      cook color (JS sets .style.background each frame)
     .meat-shape     static per-ingredient pattern overlay
   ------------------------------------------------------------ */
.meat {
  display: block;
  width: 40px;
  height: 32px;
  background: transparent;
  border-radius: 50%;              /* default / fallback — per-ingredient rules below override */
  box-shadow:
    inset 0 -3px 4px rgba(0, 0, 0, 0.35),
    inset 0 2px 2px rgba(255, 255, 255, 0.12),
    0 2px 3px rgba(0, 0, 0, 0.45);
  position: relative;
  touch-action: none;              /* Stage 12 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Stage 14R: each cooked piece keeps its tray silhouette. border-radius
   below mirrors each .ingredient--<type> so beef stays a blob, samgyeop
   stays a strip, mushroom keeps its cap shape, etc. Only the cook-color
   layer ticks through raw→burnt underneath the shape overlay. */
.meat[data-ingredient="beef"]     { border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; }
.meat[data-ingredient="pork"]     { border-radius: 45% 55% 45% 55% / 50% 45% 55% 50%; }
.meat[data-ingredient="samgyeop"] { border-radius: 8px; }
.meat[data-ingredient="mushroom"] { border-radius: 50% 50% 20% 20% / 70% 70% 25% 25%; }
.meat[data-ingredient="bokchoy"]  { border-radius: 30% 30% 50% 50% / 55% 55% 45% 45%; }
.meat[data-ingredient="scallion"] { border-radius: 40% 40% 50% 50% / 35% 35% 55% 55%; }
.meat[data-ingredient="garlic"]   { border-radius: 50% 50% 45% 45% / 60% 60% 45% 45%; }

.meat-cook {
  position: absolute;
  inset: 0;
  border-radius: inherit;          /* follows per-ingredient silhouette */
  background: var(--meat-color, rgb(217, 74, 58));
  overflow: hidden;
}

.meat-shape {
  position: absolute;
  inset: 0;
  border-radius: inherit;          /* follows per-ingredient silhouette */
  overflow: hidden;
  pointer-events: none;
  transition: opacity 200ms;
}

.meat--burnt .meat-shape { opacity: 0.3; }

/* --- beef: 3-layer marbling (2 bold streaks via pseudos, 1 faint via bg) --- */
.meat-shape-beef {
  background:
    linear-gradient(96deg,
      transparent 44%,
      rgba(255, 255, 255, 0.32) 46% 48%,
      transparent 50%),
    linear-gradient(82deg,
      transparent 70%,
      rgba(255, 255, 255, 0.22) 72% 74%,
      transparent 76%);
}
.meat-shape-beef::before {
  content: ""; position: absolute;
  top: 28%; left: 8%; right: 10%; height: 2px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  transform: rotate(-8deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.meat-shape-beef::after {
  content: ""; position: absolute;
  top: 60%; left: 14%; right: 18%; height: 2px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  transform: rotate(5deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* --- pork: 6 fat speckles, varied sizes + faint sheen --- */
.meat-shape-pork::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 32%, rgba(255,255,255,0.5)  0 2.6px, transparent 3.1px),
    radial-gradient(circle at 66% 48%, rgba(255,255,255,0.42) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 45% 74%, rgba(255,255,255,0.35) 0 2px,   transparent 2.5px),
    radial-gradient(circle at 74% 30%, rgba(255,255,255,0.3)  0 1.6px, transparent 2.1px),
    radial-gradient(circle at 20% 68%, rgba(255,255,255,0.3)  0 1.5px, transparent 2px),
    radial-gradient(circle at 56% 20%, rgba(255,255,255,0.25) 0 1.2px, transparent 1.7px);
}
.meat-shape-pork::after {
  content: ""; position: absolute;
  top: 12%; left: 18%; width: 40%; height: 20%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.22), transparent 70%);
  border-radius: 50%;
}

/* --- samgyeop: 2 fat bands + subtle lean striations + skin edge line --- */
.meat-shape-samgyeop::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22)   0% 4%,       /* skin edge */
    transparent           4% 22%,
    rgba(255, 240, 230, 0.78) 22% 32%,
    transparent           32% 58%,
    rgba(255, 240, 230, 0.7) 58% 70%,
    transparent           70% 96%,
    rgba(0, 0, 0, 0.18)   96% 100%     /* skin edge (bottom) */
  );
}
.meat-shape-samgyeop::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 3px,
    rgba(0, 0, 0, 0.05) 3px 4px
  );
  opacity: 0.5;
}

/* --- mushroom: cap dome highlight + gill ticks under the rim --- */
.meat-shape-mushroom::before {
  content: ""; position: absolute;
  inset: 12% 20% 56% 20%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.28), transparent 70%);
  border-radius: 50% 50% 40% 40%;
}
.meat-shape-mushroom::after {
  content: ""; position: absolute;
  left: 20%; right: 20%;
  top: 48%; height: 8%;
  background:
    linear-gradient(90deg,
      transparent 0 12%,
      rgba(0,0,0,0.28) 12% 18%,
      transparent 18% 40%,
      rgba(0,0,0,0.28) 40% 46%,
      transparent 46% 66%,
      rgba(0,0,0,0.28) 66% 72%,
      transparent 72% 88%,
      rgba(0,0,0,0.28) 88% 94%,
      transparent 94% 100%);
  border-radius: 1px;
}

/* --- bokchoy: central vein + two side veins + leaf sheen --- */
.meat-shape-bokchoy::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      transparent 47%, rgba(20, 60, 30, 0.5) 48% 52%, transparent 53%),
    radial-gradient(ellipse at 30% 28%, rgba(255,255,255,0.25) 0 3.5px, transparent 4.5px),
    radial-gradient(ellipse at 70% 66%, rgba(255,255,255,0.18) 0 2.5px, transparent 3.5px);
}
.meat-shape-bokchoy::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(62deg,
      transparent 46%, rgba(20, 60, 30, 0.35) 47% 49%, transparent 51%),
    linear-gradient(118deg,
      transparent 48%, rgba(20, 60, 30, 0.3) 49% 51%, transparent 53%);
}

/* --- scallion: segment rings crossing the stalk + central highlight --- */
.meat-shape-scallion::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      transparent 24%,
      rgba(0, 0, 0, 0.28) 25% 27%,
      transparent 28% 48%,
      rgba(0, 0, 0, 0.28) 49% 51%,
      transparent 52% 72%,
      rgba(0, 0, 0, 0.25) 73% 75%,
      transparent 76% 100%);
}
.meat-shape-scallion::after {
  content: ""; position: absolute;
  top: 34%; bottom: 34%; left: 18%; right: 18%;
  background: radial-gradient(ellipse, rgba(230, 240, 210, 0.4), transparent 75%);
  border-radius: 50%;
}

/* --- garlic: two pale cloves with a dividing seam --- */
.meat-shape-garlic::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 48%, rgba(255, 250, 220, 0.72) 0% 26%, transparent 44%),
    radial-gradient(ellipse at 70% 52%, rgba(255, 250, 220, 0.6) 0% 24%, transparent 40%);
}
.meat-shape-garlic::after {
  content: ""; position: absolute;
  top: 18%; bottom: 18%; left: 49%; width: 2%;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 2px;
}

/* steam puff rising (behind meat, translucent blur) */
.meat::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
  filter: blur(3px);
  transform: translateX(-50%);
  animation: steamRise 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* grill marks: 2 thin horizontal lines across the meat */
.meat::after {
  content: "";
  position: absolute;
  inset: 30% 16%;
  background:
    linear-gradient(
      0deg,
      transparent 40%,
      rgba(0, 0, 0, 0.3) 40% 55%,
      transparent 55%
    );
  border-radius: 50%;
  pointer-events: none;
}

@keyframes steamRise {
  0%   { transform: translate(-50%, 0) scale(0.55); opacity: 0; }
  25%  { opacity: 0.65; }
  100% { transform: translate(-50%, -22px) scale(1.3); opacity: 0; }
}

.meat--raw     { --meat-color: var(--meat-raw); }
.meat--searing { --meat-color: var(--meat-searing); }
.meat--perfect { --meat-color: var(--meat-perfect); }
.meat--over    { --meat-color: var(--meat-over); }
.meat--burnt   { --meat-color: var(--meat-burnt); }

/* runtime flags set by render.js */
.meat--perfect-outline {
  box-shadow:
    0 0 0 2px #4caf50,
    inset 0 -3px 4px rgba(0, 0, 0, 0.35),
    inset 0 2px 2px rgba(255, 255, 255, 0.12),
    0 2px 3px rgba(0, 0, 0, 0.45);
}

.meat--dragging {
  opacity: 0.4;                 /* original fades while ghost follows cursor */
}

/* Ghost elements follow the pointer via --x / --y CSS variables written
   by input.js (Stage 12). top/left stay at 0 so the element is already
   anchored to the viewport; translate does the positioning so we never
   extend document scrollable area. */
.meat--ghost {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  width: 42px;
  height: 34px;
  /* no explicit border-radius: the .meat[data-ingredient=<type>] rule
     above applies here too so the ghost keeps the tray silhouette. */
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.15);
  will-change: transform;
  transition: none;
  touch-action: none;
  transform:
    translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%))
    scale(1.15);
}

.meat--ghost::before, .meat--ghost::after { display: none; }

/* Customer drop target highlight while serving */
.customer--drop-target {
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(76, 175, 80, 0.7));
  transition: filter 80ms;
}

/* Mood feedback on customer leave — face icon + payment text, rises
   and fades. Stage 13 issue 4 made it bigger/longer and anchored to
   the seat so it survives the customer's own fade-out. */
.mood-feedback {
  position: absolute;
  top: 24px;              /* seat-relative; sits above the customer's head */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 500;
  animation: moodFloat 2400ms ease-out forwards;
  will-change: transform, opacity;
}

@keyframes moodFloat {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px)  scale(0.7); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1.1); }
  20%  {             transform: translateX(-50%) translateY(-10px) scale(1.0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(-70px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-85px) scale(0.95); }
}

.mood-face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  position: relative;
}

.mood-face-happy   { background: #4CAF50; }
.mood-face-neutral { background: #FFC107; }
.mood-face-angry   { background: #E53935; }

/* Eyes */
.mood-face-happy::before,
.mood-face-neutral::before {
  content: "";
  position: absolute;
  top: 13px; left: 9px; right: 9px;
  height: 6px;
  background:
    radial-gradient(circle at 25% 50%, #fff 0 3px, transparent 3.4px),
    radial-gradient(circle at 75% 50%, #fff 0 3px, transparent 3.4px);
}

.mood-face-angry::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 9px; right: 9px;
  height: 8px;
  background:
    linear-gradient(45deg, transparent 40%, #fff 40% 60%, transparent 60%) 0 0 / 9px 8px no-repeat,
    linear-gradient(-45deg, transparent 40%, #fff 40% 60%, transparent 60%) right 0 / 9px 8px no-repeat;
}

/* Mouths */
.mood-face-happy::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 9px;
  border: 3px solid #fff;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.mood-face-neutral::after {
  content: "";
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.mood-face-angry::after {
  content: "";
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 9px;
  border: 3px solid #fff;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.mood-payment {
  font-weight: 800;
  font-size: 22px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.mood-payment--positive {
  color: #2E7D32;
  animation: paymentPulse 0.6s ease-out;
}

.mood-payment--zero {
  color: #C62828;
}

@keyframes paymentPulse {
  0%   { transform: scale(0.6); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1.0); }
}

/* Disable scroll while actively serving */
body.is-serving {
  touch-action: none;
}

/* Tray-drag ghost (Stage 10) — shares the positioning strategy
   of .meat--ghost; composed on top of .ingredient.ingredient--<type>. */
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: none;
  touch-action: none;
  transform:
    translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%))
    scale(1.1);
}

/* Debug: 1x/5x speed toggle. Positioned just below the left HUD capsule.
   Hidden entirely when DEBUG.ENABLED === false (the button isn't mounted). */
.debug-speed {
  position: absolute;
  top: 48px;
  left: 14px;
  width: 64px;
  height: 28px;
  padding: 0;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  z-index: 50;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 100ms, background 100ms;
}

.debug-speed:hover {
  background: rgba(0, 0, 0, 0.72);
}

.debug-speed--active {
  border-color: #e74c3c;
  background: rgba(58, 18, 18, 0.72);
}

/* Burned: override regular steam with slower, gray smoke */
.meat--burnt::before {
  background: radial-gradient(circle, rgba(120, 120, 120, 0.6) 0%, transparent 70%);
  animation: smokeRise 3s ease-in-out infinite;
  top: -14px;
  width: 22px;
  height: 22px;
  filter: blur(3.5px);
}

@keyframes smokeRise {
  0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  30%  { opacity: 0.55; }
  100% { transform: translate(-50%, -30px) scale(1.7); opacity: 0; }
}

/* Flip animation — applied briefly by input.js after flip() */
.meat--flipping {
  animation: flipPulse 220ms ease-in-out;
}

@keyframes flipPulse {
  0%   { transform: rotateX(0);   }
  50%  { transform: rotateX(180deg) scale(0.9); }
  100% { transform: rotateX(360deg); }
}

/* Stage 13 issue 5: perfect-entry flash. Render toggles .meat--flash
   for 200ms; box-shadow + filter briefly highlight the piece. */
.meat--flash {
  animation: meatFlash 0.2s ease-out;
}

@keyframes meatFlash {
  0% {
    box-shadow:
      inset 0 -3px 4px rgba(0, 0, 0, 0.35),
      0 2px 3px rgba(0, 0, 0, 0.45);
    filter: brightness(1);
  }
  40% {
    box-shadow:
      0 0 16px 6px rgba(255, 230, 130, 0.9),
      inset 0 0 8px 2px rgba(255, 255, 255, 0.6);
    filter: brightness(1.4);
  }
  100% {
    box-shadow:
      inset 0 -3px 4px rgba(0, 0, 0, 0.35),
      0 2px 3px rgba(0, 0, 0, 0.45);
    filter: brightness(1);
  }
}

/* ------------------------------------------------------------
   Toolbar icons
   ------------------------------------------------------------ */
.tool-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
}

.tool-icon--flame {
  background: linear-gradient(180deg, #FFD34E 0%, #F08029 55%, #C44820 100%);
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  transform: skew(-3deg, -2deg);
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
}

.tool-icon--flame::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 45%;
  background: linear-gradient(180deg, #FFF0A0 0%, #FFB347 100%);
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
}

.tool-icon--tongs {
  width: 22px;
  height: 22px;
}

.tool-icon--tongs::before,
.tool-icon--tongs::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, #9E9E9E 0%, #555 100%);
  border-radius: 2px;
  top: 1px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
}

.tool-icon--tongs::before {
  left: 7px;
  transform: rotate(-12deg);
  transform-origin: top center;
}

.tool-icon--tongs::after {
  right: 7px;
  transform: rotate(12deg);
  transform-origin: top center;
}