/* ============================================================================
   Alchemy Lab 🧪 — styles for game/js/19-alchemy.js (every class prefixed alch-)
   Uses the chalkboard/space design tokens from styles.css (--ink, --chalk,
   --chalk-dim, --yellow, --coral, --sky, --wood). The only new colors are the
   potion greens for the cauldron liquid / "have enough" counts.
   ============================================================================ */

.alch-lab{ padding: 4px 2px; }

/* ---------- Header ---------- */
.alch-header{ position: relative; text-align: center; margin-bottom: 12px; padding-top: 4px; }
.alch-back{ position: absolute; left: 0; top: 0; }
.alch-title{
  font-family: 'Patrick Hand', cursive;
  font-size: clamp(30px, 7vw, 42px);
  margin: 0;
  color: var(--chalk);
  text-shadow: 0 0 14px rgba(143, 227, 154, 0.25);
}
.alch-tagline{ margin: 2px 0 0; font-weight: 600; font-size: 14px; color: var(--chalk-dim); }

/* ---------- Scene: ingredient shelf + bubbling cauldron ---------- */
.alch-scene{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
  background: rgba(244, 241, 232, 0.04);
  border: 1px solid rgba(244, 241, 232, 0.1);
  border-radius: 14px;
  padding: 18px 14px 10px;
}

.alch-shelf-jars{ display: flex; gap: 10px; }
.alch-jar{
  background: rgba(110, 193, 228, 0.1);
  border: 1px solid rgba(244, 241, 232, 0.18);
  border-radius: 10px 10px 12px 12px;
  padding: 8px 10px 6px;
  text-align: center;
  min-width: 62px;
}
.alch-jar-icon{ display: block; font-size: 22px; }
.alch-jar-count{ display: block; font-size: 14px; font-weight: 700; color: var(--chalk); }
.alch-jar-name{
  display: block;
  font-size:13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--chalk-dim);
  font-weight: 700;
}
.alch-shelf-board{
  height: 10px;
  margin-top: 6px;
  border-radius: 4px;
  background: linear-gradient(var(--wood), var(--wood-dark));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

/* The cauldron: dark pot + glowing green liquid + rising bubbles. */
.alch-cauldron-zone{ position: relative; width: 170px; padding-top: 46px; }
.alch-cauldron{ position: relative; width: 150px; height: 96px; margin: 0 auto; }
.alch-pot{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: radial-gradient(circle at 35% 30%, #3a4149, #23272d 70%);
  border-radius: 18px 18px 75px 75px / 16px 16px 85px 85px;
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.3);
}
.alch-liquid{
  position: absolute;
  top: 6px; left: 12px; right: 12px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #a5f3b0, #57c968 65%, #3da052);
  box-shadow: 0 0 16px rgba(120, 230, 140, 0.4);
  animation: alchGlow 2.6s ease-in-out infinite;
  z-index: 1;
}
.alch-bubble{
  position: absolute;
  top: 12px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(170, 240, 180, 0.85);
  box-shadow: 0 0 6px rgba(120, 230, 140, 0.6);
  opacity: 0;
  animation: alchRise 2.4s ease-in infinite;
  z-index: 2;
}
.alch-b1{ left: 24%; animation-delay: 0s; }
.alch-b2{ left: 44%; width: 7px; height: 7px; animation-delay: 0.5s; }
.alch-b3{ left: 62%; animation-delay: 1.1s; }
.alch-b4{ left: 34%; width: 6px; height: 6px; animation-delay: 1.6s; }
.alch-b5{ left: 56%; width: 8px; height: 8px; animation-delay: 2s; }
.alch-fire{
  text-align: center;
  font-size: 20px;
  margin-top: 2px;
  animation: alchFlicker 1.2s ease-in-out infinite;
}

/* Brewing state (added for ~0.9s while mixing): froth harder + brighter. */
.alch-brewing{ animation: alchShake 0.9s ease-in-out; }
.alch-brewing .alch-bubble{ animation-duration: 0.6s; }
.alch-brewing .alch-liquid{ animation-duration: 0.6s; filter: brightness(1.3); }

/* The finished product pops out of the cauldron and bounces. */
.alch-pop{
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, 26px) scale(0.3);
  font-size: 38px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.alch-pop-go{ animation: alchPop 1.3s cubic-bezier(0.2, 0.8, 0.3, 1.15) forwards; }

@keyframes alchRise{
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  25%  { opacity: 0.9; }
  100% { transform: translateY(-42px) scale(1.15); opacity: 0; }
}
@keyframes alchGlow{
  0%, 100% { box-shadow: 0 0 14px rgba(120, 230, 140, 0.35); }
  50%      { box-shadow: 0 0 26px rgba(120, 230, 140, 0.6); }
}
@keyframes alchFlicker{
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes alchShake{
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-2deg); }
  40%      { transform: rotate(2deg); }
  60%      { transform: rotate(-1.5deg); }
  80%      { transform: rotate(1.5deg); }
}
@keyframes alchPop{
  0%   { opacity: 0; transform: translate(-50%, 26px) scale(0.3); }
  35%  { opacity: 1; transform: translate(-50%, -10px) scale(1.25); }
  55%  { transform: translate(-50%, 2px) scale(0.95); }
  75%  { transform: translate(-50%, -5px) scale(1.08); }
  88%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -2px) scale(1); }
}

/* ---------- Recipe cards ---------- */
.alch-recipes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.alch-card{
  background: rgba(244, 241, 232, 0.05);
  border: 1px solid rgba(244, 241, 232, 0.14);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alch-card-head{ display: flex; align-items: center; gap: 12px; }
.alch-card-icon{
  font-size: 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 6px 10px;
  line-height: 1;
}
.alch-card-name{ font-family: 'Patrick Hand', cursive; font-size: 23px; color: var(--yellow); line-height: 1.1; }
.alch-card-desc{ font-size:15px; color: var(--chalk-dim); font-weight: 600; }
.alch-needs{
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alch-need{ display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.alch-need-count{ font-weight: 700; }
.alch-ok .alch-need-count{ color: #8fe39a; }      /* have enough — potion green */
.alch-short .alch-need-count{ color: var(--coral); } /* short — coral red */
.alch-mix-btn{ font-size: 18px; padding: 10px; }
.alch-mix-btn:disabled{ opacity: 0.45; cursor: not-allowed; }
.alch-missing{ font-size:14px; font-weight: 600; color: var(--coral); text-align: center; }

/* ---------- Brewed-product stock ---------- */
.alch-stock{
  background: rgba(244, 241, 232, 0.04);
  border: 1px solid rgba(244, 241, 232, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.alch-sub{ font-family: 'Patrick Hand', cursive; font-size: 21px; margin: 0 0 6px; color: var(--chalk); }
.alch-stock-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed rgba(244, 241, 232, 0.12);
}
.alch-stock-row:first-of-type{ border-top: none; }
.alch-stock-icon{ font-size: 22px; }
.alch-stock-name{ font-weight: 700; }
.alch-stock-count{ margin-left: auto; font-weight: 700; color: var(--sky); }
.alch-use-btn{ font-size: 14px; padding: 6px 14px; }
.alch-use-btn:disabled{ opacity: 0.4; cursor: not-allowed; }

/* ---------- Ingredient hint footer ---------- */
.alch-hint{
  text-align: center;
  font-size:15px;
  font-weight: 600;
  color: var(--chalk-dim);
  background: rgba(110, 193, 228, 0.08);
  border: 1px dashed rgba(110, 193, 228, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 640px){
  .alch-header{ padding-top: 0; }
  .alch-back{ position: static; display: inline-block; margin-bottom: 6px; }
  .alch-scene{ flex-direction: column; align-items: center; gap: 12px; padding: 14px 10px 8px; }
  .alch-cauldron-zone{ padding-top: 42px; }
  .alch-cauldron{ width: 130px; height: 86px; }
  .alch-recipes{ grid-template-columns: 1fr; }
  .alch-jar{ min-width: 56px; padding: 6px 8px 5px; }
}

/* ---------- Reduced motion: no bubbling/shaking, gentle fade for the pop ---------- */
@media (prefers-reduced-motion: reduce){
  .alch-bubble, .alch-liquid, .alch-fire, .alch-brewing{ animation: none; }
  .alch-bubble{ opacity: 0.6; }
  .alch-pop-go{ animation: alchPopFade 1s ease forwards; }
}
@keyframes alchPopFade{
  0%   { opacity: 0; transform: translate(-50%, 0) scale(1); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}