/* ═══════════════════════════════════════════
   POKIT — jars.css
   Pantry Shelf · Jar Glass · Fill · Bubbles
   The signature Pokit visual
   ═══════════════════════════════════════════ */

/* ── Pantry Shelf Container ── */
.pantry {
  background: linear-gradient(180deg, #2a1f1a 0%, #3d2b1f 100%);
  border-radius: 16px;
  padding: 16px 12px 8px;
  position: relative;
  overflow: hidden;
}
.pantry::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='none'/%3E%3Cpath d='M0 0h40v2H0zM0 20h40v1H0z' fill='%23ffffff08'/%3E%3C/svg%3E");
  opacity: 0.3;
  pointer-events: none;
}
.pantry-shelf {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  position: relative;
  z-index: 1;
}
/* Wooden shelf edge */
.pantry-shelf::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -12px;
  right: -12px;
  height: 10px;
  background: linear-gradient(180deg, #5c3d2e, #8b6b4a 40%, #6b4c35 60%, #4a3326);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 2px 1px rgba(255,255,255,0.1);
  z-index: 2;
}
.pantry-label {
  text-align: center;
  font-size: 11px;
  color: #d4a87480;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ── Individual Jar ── */
.shelf-jar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.2s;
  min-width: 56px;
  max-width: 72px;
}
.shelf-jar:hover { transform: translateY(-3px); }
.shelf-jar:active { transform: scale(0.95); }

/* ── Jar Glass Body ── */
.jar-glass {
  position: relative;
  width: 48px;
  height: 56px;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.08) 100%
  );
  border: 1.5px solid rgba(255,255,255,0.15);
  overflow: hidden;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.05),
    0 2px 8px rgba(0,0,0,0.3);
}
.jar-glass.mini { width: 32px; height: 38px; border-radius: 4px 4px 8px 8px; }

/* Glass shine highlight */
.jar-glass::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 6px; height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  border-radius: 3px;
  z-index: 3;
  pointer-events: none;
}

/* ── Jar Lid ── */
.jar-lid {
  width: 40px;
  height: 8px;
  background: linear-gradient(180deg, #c9a86c, #a8894f);
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}
.jar-lid.mini { width: 26px; height: 5px; border-radius: 3px 3px 1px 1px; }
.jar-lid.pot-lid { background: linear-gradient(180deg, #7fb8a8, #5a9988); }

/* ── Fill Liquid ── */
.jar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 10px 10px;
}
.jar-fill.honey {
  background: linear-gradient(180deg, #f0c040 0%, #d4a020 40%, #c8920a 100%);
}
.jar-fill.water {
  background: linear-gradient(180deg, #6dd5c8 0%, #44b8a8 40%, #2a9d8f 100%);
}
.jar-fill.danger {
  background: linear-gradient(180deg, #ff7b7b 0%, #e05555 40%, #c03030 100%);
}

/* Liquid surface wobble */
.jar-fill::before {
  content: '';
  position: absolute;
  top: -4px; left: -2px; right: -2px;
  height: 8px;
  border-radius: 50%;
  background: inherit;
  filter: brightness(1.2);
  animation: jarWobble 3s ease-in-out infinite;
}

/* ── Bubbles ── */
.jar-bubble {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  animation: jarBubble 2.5s ease-in infinite;
}
.jar-bubble:nth-child(2) { width: 2px; height: 2px; left: 60%; animation-delay: 0.8s; animation-duration: 3s; }
.jar-bubble:nth-child(3) { width: 2.5px; height: 2.5px; left: 30%; animation-delay: 1.6s; animation-duration: 2.8s; }

/* ── Spent Overlay ── */
.jar-spent {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
  transition: height 1s ease;
  pointer-events: none;
}

/* ── Jar Labels ── */
.jar-tag {
  font-size: 9px;
  color: #d4c8b8;
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 1px;
}
.jar-tag.mini { font-size: 7.5px; max-width: 48px; }
.jar-tag-amount { font-size: 8px; color: #a09080; font-weight: 600; }

/* ── Jar Animations ── */
@keyframes jarWobble {
  0%, 100% { transform: translateY(0) scaleX(1); }
  25% { transform: translateY(-1px) scaleX(1.03); }
  75% { transform: translateY(1px) scaleX(0.97); }
}
@keyframes jarBubble {
  0% { bottom: 10%; opacity: 0; transform: translateX(0); }
  20% { opacity: 0.6; }
  100% { bottom: 90%; opacity: 0; transform: translateX(4px); }
}
@keyframes jarFillRise {
  from { height: 0%; }
}