/* The kitchen. Its layout (the fixed overlay, the two-sided grid, the room layers
   and the creature slot) is shared with the brewing chamber in potions.css; this
   file is only what is the kitchen's own. */

#kitchen { --kitchen-warm: #74476a; }

/* ---------------------------------------------------------------- the room */

.hearth-mouth { fill: #1c0f22; }
.hearth-stone { fill: var(--rock-lit); stroke: var(--rock-far); stroke-width: 3; }
.rug-edge     { fill: none; stroke: #5e2f52; stroke-width: 5; stroke-dasharray: 3 9; stroke-linecap: round; }
.counter-top   { fill: #8f7fae; }
.counter-front { fill: var(--rock-edge); }
.counter-seam  { fill: none; stroke: var(--rock-far); stroke-width: 5; stroke-linecap: round; }
.counter { filter: drop-shadow(0 -4px 18px rgba(255, 170, 90, 0.18)); }

/* -------------------------------------------------------------- the mortar */

/* Anchored by its base on the counter top. The bowl is drawn twice: once behind
   the ingredients and the pestle, and once in front with its rim and everything
   above it cut away, so what is inside looks inside. */
.mortar {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -100%);
  pointer-events: auto; touch-action: none; cursor: grab;
}
.mortar > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mortar-back  { filter: drop-shadow(0 8px 8px rgba(7, 4, 15, 0.5)); }
.mortar-front { clip-path: inset(21% 0 0 0); pointer-events: none; }
.mortar.bump > .mortar-back, .mortar.bump > .mortar-front { animation: bowl-bump 0.35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bowl-bump { 40% { transform: scale(1.06, 0.94); } }
.mortar.over .mortar-back { filter: drop-shadow(0 0 18px rgba(255, 210, 122, 0.9)); }

.mortar-contents { position: absolute; left: 16%; right: 16%; top: -4%; height: 32%; pointer-events: none; }
.in-bowl {
  position: absolute; bottom: 0; width: 38%; height: auto;
  transform: scale(var(--s, 1)); transform-origin: 50% 100%;
  transition: transform 0.25s cubic-bezier(.3, 1.4, .5, 1);
  filter: drop-shadow(0 3px 3px rgba(7, 4, 15, 0.4));
}
.in-bowl.slot-0 { left: 4%;  rotate: -12deg; }
.in-bowl.slot-1 { left: 31%; bottom: 8%; }
.in-bowl.slot-2 { left: 58%; rotate: 12deg; }

/* The pestle is drawn pointing up from its grinding end, which sits at the middle
   of the bowl (50%, 22%). Its box is 22% of the mortar wide and 3.125 times as
   tall, with the grinding end 92% of the way down it. */
.pestle {
  position: absolute; width: 22%; left: 39%; top: -41%;
  transform-origin: 50% 92%;
  transform: rotate(26deg);
  transition: transform 0.3s ease;
  pointer-events: none;
  filter: drop-shadow(0 6px 5px rgba(7, 4, 15, 0.45));
}
.pestle svg { width: 100%; height: auto; display: block; overflow: visible; }
.pestle-body  { fill: #d6c8b4; }
.pestle-head  { fill: #b09c82; }
.pestle-shine { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 6; stroke-linecap: round; }
.mortar.stirring .pestle { transition: transform 0.06s linear; }
/* once something is in the bowl, the pestle wiggles to say it can be moved */
.mortar.ready .pestle svg { animation: pestle-wiggle 1.6s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes pestle-wiggle { 50% { transform: rotate(-9deg) translateY(-3%); } }
.pestle.pound svg { animation: pestle-pound 0.28s ease-out; transform-origin: 50% 92%; }
@keyframes pestle-pound { 40% { transform: translateY(9%) scale(1.03, 0.97); } }

.mortar-fx { position: absolute; inset: 0; pointer-events: none; }

.stir-hint {
  position: absolute; left: -12%; width: 124%; top: -14%; height: auto;
  overflow: visible; pointer-events: none;
  fill: none; stroke: #ffe7b0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 10 12; opacity: 0.9;
  animation: stir-hint 1.2s linear infinite;
}
.stir-hint[hidden] { display: none; }
@keyframes stir-hint { to { stroke-dashoffset: -44; } }

/* --------------------------------------------------------------- the dish */

/* The plate a finished dish pops out onto, up above the mortar. It is there
   before anything is made, so she knows where to look. */
.result-box {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 28px;
  /* solid, so the hearth stones behind do not show through the plate */
  background: radial-gradient(ellipse at 50% 45%, #5b3f6e, #2c1d48 72%);
  box-shadow: inset 0 0 0 3px rgba(255, 196, 107, 0.45), 0 10px 24px rgba(7, 4, 15, 0.45);
}
.result-box::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 12%; height: 12%;
  border-radius: 50%; background: rgba(7, 4, 15, 0.28);
}
.result-reset {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  /* sized to the scene, like the plate beside it, so the two never overlap on a
     smaller screen; 5% of the scene is 52px on an iPad in landscape */
  width: max(36px, 5%); aspect-ratio: 1; border-radius: 26%;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1; padding: 0;
  color: var(--lamp); background: linear-gradient(180deg, #3b2a66, #241847);
  border: 2px solid rgba(255, 196, 107, 0.55);
  pointer-events: auto; animation: dish-pop 0.4s cubic-bezier(.3, 1.6, .5, 1);
}
.result-reset[hidden] { display: none; }
.result-reset:active { transform: translate(-50%, -50%) translateY(-3px); }

.dish-fx {
  position: absolute; width: 30%; height: 40%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.dish {
  position: absolute; width: 12.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: auto; touch-action: none; cursor: grab; z-index: 2;
  filter: drop-shadow(0 10px 10px rgba(7, 4, 15, 0.55)) drop-shadow(0 0 22px rgba(255, 210, 122, 0.45));
  animation: dish-bob 2.6s ease-in-out infinite;
}
.dish[hidden] { display: none; }
.dish img { display: block; pointer-events: none; }
.dish-main  { width: 100%; height: 100%; }
.dish-bits { position: absolute; inset: 0; pointer-events: none; }
/* the star ingredient, a few tiny copies mixed into the dish (dish-art.js) */
.dish-bits img {
  position: absolute; width: 23%; height: 23%;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  filter: drop-shadow(0 1px 1.5px rgba(7, 4, 15, 0.45));
}
.dish.pop { animation: dish-pop 0.55s cubic-bezier(.3, 1.6, .5, 1), dish-bob 2.6s ease-in-out 0.55s infinite; }
@keyframes dish-pop { from { scale: 0.2; opacity: 0; } 60% { scale: 1.15; opacity: 1; } }
@keyframes dish-bob { 50% { translate: 0 -6px; } }
.dish.carried { animation: none; z-index: 20; scale: 1.1; }

.eat-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

#k-creature.chomp { animation: chomp 0.7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes chomp {
  15% { transform: scale(1.12, 0.88); }
  30% { transform: scale(0.95, 1.06); }
  45% { transform: scale(1.1, 0.9); }
  65% { transform: scale(0.97, 1.04) translateY(-10px); }
  100% { transform: none; }
}

/* -------------------------------------------------------------- the pantry */

.drop.drop-food { width: 32px; height: 32px; display: grid; place-items: center; }
.drop-food img { width: 86%; height: 86%; }
.drop-food.filled { background: rgba(255, 255, 255, 0.1); box-shadow: none; }

.pantry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; justify-items: center; }
.pantry-item {
  width: 60px; height: 60px; padding: 0; display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #3b2a66, #241847);
  border: 2px solid rgba(255, 196, 107, 0.35);
  touch-action: none; transition: transform 0.14s ease;
}
.pantry-item img { width: 78%; height: 78%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(7, 4, 15, 0.5)); }
.pantry-item:active { transform: translateY(-4px) scale(1.05); }

.food-ghost {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; height: auto;
  filter: drop-shadow(0 8px 10px rgba(7, 4, 15, 0.6));
}
.food-ghost.flying { transition: transform 0.34s cubic-bezier(.4, 0, .6, 1); }

@media (max-width: 1100px), (max-height: 560px) {
  .pantry-item { width: 54px; height: 54px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 5/6) {
  .pantry { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .pantry-item { width: 44px; height: 44px; border-radius: 12px; }
}
/* Tall and narrow: the pantry is the only bench, so it takes the whole width. */
@media (max-aspect-ratio: 5/6) {
  #kitchen .bench-pantry { grid-column: 1 / -1; margin-right: 10px; }
  .pantry { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mortar.ready .pestle svg, .dish, .stir-hint { animation: none; }
}