/* bottle.css — Glasröhren, Flüssigkeit, Guss-Animation und Effekte.
 *
 * Aufbau einer Flasche:
 *   .bottle > .tube > .liquid > .layer*      (Flüssigkeit, column-reverse)
 *                  > .glass-shine  ×2        (Glanzstreifen)
 *           > .tube-rim                      (dicker Glasrand oben)
 *           > .complete-badge                (Häkchen bei fertiger Flasche)
 *
 * Beim Guss wird .bottle selbst transformiert (Drehpunkt = Ausgussecke),
 * die Positionen setzt render.js per Inline-Style.
 *
 * Responsive Form: Die Flasche behält immer das gleiche Seitenverhältnis
 * (Höhe:Breite ≈ 2.5, echte Labor-Flasche). Über `aspect-ratio` wird die
 * Höhe automatisch aus der Breite abgeleitet — so sehen die Flaschen auf
 * kleinen Phones nicht „zusammengedrückt“ und auf Tablets nicht über­
 * dimensioniert aus. CSS-Variable --bottle-w wird pro Breakpoint gesetzt.
 */

.bottle-wrap {
  --bottle-w: clamp(50px, 12.5vw, 74px);
  width: var(--bottle-w);
  display: flex;
  justify-content: center;
  position: relative;
}

/* Schatten auf dem „Boden“ unter jeder Flasche */
.bottle-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 78%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--glass-shadow) 0%, transparent 70%);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.2s ease, width 0.2s ease;
}

/* ---- Röhre ---- */

.bottle {
  position: relative;
  width: 100%;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 0.16s cubic-bezier(.3, 1.4, .5, 1), filter 0.2s ease;
  will-change: transform;
}

.bottle:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 18px;
}

.tube {
  position: relative;
  /* Aspect-Ratio hält die Flasche proportional — verhindert das
     "zusammengedrückt"-Gefühl auf schmalen Phone-Viewports. */
  aspect-ratio: 1 / 2.5;
  /* Fallback-Höhe, falls aspect-ratio nicht greift (alte Browser) */
  height: clamp(140px, 38vw, 216px);
  border-radius: 8px 8px 26px 26px / 8px 8px 30px 30px;
  overflow: hidden;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0.00) 52%,
      rgba(255, 255, 255, 0.08) 78%,
      rgba(255, 255, 255, 0.22) 100%),
    var(--glass);
  box-shadow:
    inset 0 0 0 2px var(--glass-edge),
    inset 0 10px 18px rgba(255, 255, 255, 0.16),
    inset 0 -14px 22px var(--glass-shadow),
    0 6px 14px var(--glass-shadow);
  backdrop-filter: blur(1px);
}

/* Dicker Glasrand oben — gibt der Röhre Gewicht */
.tube-rim {
  position: absolute;
  left: -3px;
  right: -3px;
  top: -4px;
  height: 9px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass-edge));
  opacity: 0.75;
  box-shadow: 0 2px 4px var(--glass-shadow);
  pointer-events: none;
  z-index: 3;
}

/* Glanzstreifen auf dem Glas */
.glass-shine {
  position: absolute;
  left: 11%;
  top: 6px;
  bottom: 16px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--glass-hi), rgba(255, 255, 255, 0));
  opacity: 0.65;
  z-index: 4;
  pointer-events: none;
}

.glass-shine--right {
  left: auto;
  right: 13%;
  width: 3px;
  opacity: 0.3;
  top: 22px;
}

/* ---- Flüssigkeit ---- */

.liquid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column-reverse;
  z-index: 1;
}

.layer {
  flex: 0 0 auto;
  width: 100%;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c) 78%, black) 0%,
      var(--c) 26%,
      color-mix(in srgb, var(--c) 82%, white) 46%,
      var(--c) 70%,
      color-mix(in srgb, var(--c) 84%, black) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.22),
    inset 0 -4px 8px rgba(0, 0, 0, 0.16);
  position: relative;
  will-change: height;
}

/* Trennlinie zwischen zwei Lagen (nur ein Hauch) */
.layer + .layer { box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.22),
    inset 0 -4px 8px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(0, 0, 0, 0.08); }

/* Oberfläche der obersten Lage: leichte Wölbung + Glanz + Wellen-Shimmer */
.liquid > .layer:last-child::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -3px;
  height: 7px;
  background: color-mix(in srgb, var(--c) 88%, white);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.liquid > .layer:last-child::after {
  content: '';
  position: absolute;
  left: 12%;
  width: 30%;
  top: 3px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  animation: surfaceGlint 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes surfaceGlint {
  0%, 100% { opacity: 0.85; transform: translateX(0); }
  50% { opacity: 0.35; transform: translateX(30%); }
}

/* Bodenrundung der untersten Lage folgt der Röhre */
.liquid > .layer:first-child {
  border-radius: 0 0 24px 24px / 0 0 28px 28px;
}

/* ---- Interaktionszustände ---- */

@media (hover: hover) {
  .bottle:hover { transform: translateY(-6px); }
  .bottle:hover .tube { box-shadow:
      inset 0 0 0 2px var(--glass-edge),
      inset 0 10px 18px rgba(255, 255, 255, 0.2),
      inset 0 -14px 22px var(--glass-shadow),
      0 12px 22px var(--glass-shadow); }
}

.bottle.selected {
  transform: translateY(-22px) scale(1.05);
  filter: drop-shadow(0 12px 18px var(--primary-glow));
  z-index: 5;
  animation: selectedBob 1.6s ease-in-out infinite 0.2s;
}

@keyframes selectedBob {
  0%, 100% { transform: translateY(-22px) scale(1.05); }
  50% { transform: translateY(-27px) scale(1.05); }
}

.bottle.selected .tube-rim {
  opacity: 1;
  box-shadow: 0 0 12px var(--primary-glow);
}

.bottle.receiving { animation: receiveNudge 0.5s ease; }

@keyframes receiveNudge {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* Während des Gusses steuert render.js den Transform per Inline-Style. */
.bottle.pouring {
  animation: none !important;
  filter: drop-shadow(0 18px 24px var(--glass-shadow));
}

.bottle.pouring:hover { transform: none; }

/* ---- Fertige Flasche ---- */

.bottle.complete { cursor: default; }

.bottle.complete .tube {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--gold) 65%, var(--glass-edge)),
    inset 0 10px 18px rgba(255, 255, 255, 0.2),
    inset 0 -14px 22px var(--glass-shadow),
    0 0 16px var(--gold-glow),
    0 6px 14px var(--glass-shadow);
  animation: completeGlow 2.4s ease-in-out infinite;
}

@keyframes completeGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.10); }
}

/* Wandernder Shimmer über der fertigen Flasche */
.bottle.complete .tube::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 40%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: shimmerSweep 2.8s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}

@keyframes shimmerSweep {
  0% { left: -60%; opacity: 0; }
  25% { opacity: 1; }
  60%, 100% { left: 120%; opacity: 0; }
}

.complete-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffd76a, var(--gold));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  z-index: 6;
  pointer-events: none;
  animation: badgePop 0.45s cubic-bezier(.2, 1.6, .4, 1);
}

.complete-badge::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #6b3f00;
}

@keyframes badgePop {
  0% { transform: translateX(-50%) scale(0) rotate(-90deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}

/* Moment des Fertigwerdens: kräftiger Puls */
.bottle.just-completed { animation: completePop 0.75s cubic-bezier(.2, 1.5, .3, 1); }

@keyframes completePop {
  0% { transform: scale(1); }
  22% { transform: scale(1.16) translateY(-8px); }
  45% { transform: scale(0.97) translateY(0); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---- Fehler ---- */

.bottle.shake { animation: shakeX 0.4s cubic-bezier(.36, .07, .19, .97); }

@keyframes shakeX {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-8px) rotate(-3deg); }
  35% { transform: translateX(8px) rotate(3deg); }
  55% { transform: translateX(-5px) rotate(-2deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}

/* ---- Tod: Flaschen kippen um ---- */

#board.dead { animation: boardShock 0.5s ease; }

@keyframes boardShock {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  50% { transform: translateX(9px); }
  80% { transform: translateX(-4px); }
}

.bottle.falling {
  animation: bottleFall 0.9s cubic-bezier(.5, 0, .75, 0) forwards;
  animation-delay: var(--fall-delay, 0ms);
}

@keyframes bottleFall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(60px) rotate(24deg); opacity: 0.25; filter: grayscale(1); }
}

/* ================================================================== *
 * FX-Layer: Strahl, Tropfen, Funken
 * ================================================================== */

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 40;
}

/* Flüssigkeitsstrahl von der Ausgussöffnung ins Ziel */
.stream {
  position: absolute;
  width: 9px;
  margin-left: -4.5px;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c) 85%, white) 0%,
      var(--c) 22%,
      var(--c) 100%);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--c) 60%, transparent),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(0, 0, 0, 0.18);
  transform-origin: 50% 0;
  transform: scaleY(0.1);
  opacity: 0;
  transition: height 140ms linear, transform 90ms ease-out, opacity 90ms ease-out;
  z-index: 45;
}

.stream.on {
  transform: scaleY(1);
  opacity: 1;
  animation: streamWobble 0.32s ease-in-out infinite;
}

.stream::before {
  /* Tropfenkopf am unteren Ende */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 13px;
  height: 11px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--c);
  filter: blur(0.4px);
}

.stream.stream-out {
  animation: none;
  transform: scaleY(0.15);
  opacity: 0;
}

@keyframes streamWobble {
  0%, 100% { margin-left: -4.5px; }
  50% { margin-left: -3.3px; }
}

/* Welle auf der Oberfläche, wenn eine Lage ankommt */
.ripple {
  position: absolute;
  height: 8px;
  margin-left: -50%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  opacity: 0.9;
  animation: rippleOut 0.45s ease-out forwards;
  z-index: 46;
}

@keyframes rippleOut {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Kleine Spritzer */
.droplet {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation: dropletFly 0.5s ease-out forwards;
  z-index: 46;
}

@keyframes dropletFly {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* Funken beim Fertigstellen einer Flasche */
.spark {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  background: linear-gradient(140deg, #fff6c9, var(--gold));
  box-shadow: 0 0 8px var(--gold-glow);
  animation: sparkFly 0.85s cubic-bezier(.15, .8, .3, 1) forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
  z-index: 47;
}

@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(0.4) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(220deg); opacity: 0; }
}

/* Leuchtender Ring */
.complete-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 18px var(--gold-glow), inset 0 0 12px var(--gold-glow);
  animation: ringOut 0.8s cubic-bezier(.2, .8, .3, 1) forwards;
  z-index: 44;
}

@keyframes ringOut {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---- Mobil ---- */

@media (max-width: 480px) {
  /* Kleine Phones: Flaschen werden minimal breiter skaliert und etwas
     gedrungener (1:2.4 statt 1:2.5), damit sie auf 360–412 px nicht
     „schlank/gestreckt“ wirken — echte Laborflaschen haben eher 1:2.4. */
  .bottle-wrap { --bottle-w: clamp(48px, 14vw, 64px); }
  .tube { aspect-ratio: 1 / 2.4; }
}

@media (max-width: 360px) {
  /* Winzige Phones (Galaxy Fold Cover u. ä.): noch gedrungener,
     damit zwei Reihen Platz haben. */
  .bottle-wrap { --bottle-w: clamp(44px, 13vw, 56px); }
  .tube { aspect-ratio: 1 / 2.3; }
}

/* Landscape (kurze Höhe): kleinere Flaschen, damit mehrere Bottles
   in eine Reihe passen und der Header/Ads nicht abgeschnitten werden. */
@media (max-height: 480px) and (orientation: landscape) {
  .bottle-wrap { --bottle-w: clamp(44px, 8vh, 60px); }
  .tube { aspect-ratio: 1 / 2.4; }
}

/* ==================================================================
 * Premium glass pass — mobile-first visual system (v3)
 * ================================================================== */

.bottle-wrap {
  --bottle-w: clamp(54px, 11vw, 72px);
  z-index: 1;
  isolation: isolate;
}

.bottle-wrap::after {
  bottom: -15px;
  width: 92%;
  height: 18px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--glass-shadow) 82%, var(--primary) 18%) 0%,
    transparent 72%);
  filter: blur(2px);
  opacity: 0.78;
}

.bottle {
  transform-origin: 50% 92%;
  transition:
    transform 180ms cubic-bezier(.2, .9, .3, 1.35),
    filter 220ms ease;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.tube {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 2.36;
  border-radius: 11px 11px 31px 31px / 10px 10px 35px 35px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 72%, white 28%);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.11) 10%,
      transparent 27%,
      transparent 68%,
      rgba(255,255,255,.10) 84%,
      rgba(255,255,255,.28) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--glass) 74%, white 26%) 0%,
      var(--glass) 28%,
      color-mix(in srgb, var(--glass) 78%, var(--glass-shadow) 22%) 100%);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,.28),
    inset -2px 0 0 color-mix(in srgb, var(--glass-edge) 52%, transparent),
    inset 0 12px 16px rgba(255,255,255,.10),
    inset 0 -18px 24px var(--glass-shadow),
    0 2px 2px rgba(255,255,255,.18),
    0 12px 24px color-mix(in srgb, var(--glass-shadow) 88%, transparent);
  backdrop-filter: blur(5px) saturate(1.18);
  -webkit-backdrop-filter: blur(5px) saturate(1.18);
}

.tube::before {
  content: '';
  position: absolute;
  inset: 8px 7px 12px;
  z-index: 3;
  border-radius: 5px 5px 24px 24px;
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.34) 0 5%,
      transparent 6% 76%,
      rgba(255,255,255,.13) 77% 83%,
      transparent 84%),
    radial-gradient(80% 32% at 42% 96%, rgba(255,255,255,.18), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.tube-rim {
  left: -5px;
  right: -5px;
  top: -5px;
  height: 12px;
  border-radius: 50% / 42%;
  opacity: 1;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      color-mix(in srgb, var(--glass-edge) 54%, white 46%) 42%,
      color-mix(in srgb, var(--glass-edge) 76%, transparent) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.78),
    inset 0 -2px 3px var(--glass-shadow),
    0 3px 7px color-mix(in srgb, var(--glass-shadow) 74%, transparent);
}

.tube-rim::before {
  content: '';
  position: absolute;
  inset: 3px 5px 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 58%, transparent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.36);
}

.tube-rim::after {
  content: '';
  position: absolute;
  left: 13%;
  right: 46%;
  top: 2px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.9);
  filter: blur(.2px);
}

.glass-shine {
  left: 12%;
  top: 15px;
  bottom: 24px;
  width: 5px;
  opacity: .55;
  background: linear-gradient(180deg,
    rgba(255,255,255,.8),
    rgba(255,255,255,.12) 48%,
    transparent 82%);
  filter: blur(.25px);
}

.glass-shine--right {
  right: 11%;
  top: 24px;
  bottom: 31px;
  width: 2px;
  opacity: .26;
}

.liquid {
  inset: 8px 6px 7px;
  overflow: hidden;
  border-radius: 4px 4px 25px 25px / 4px 4px 29px 29px;
  filter: saturate(1.08) contrast(1.03);
}

.layer {
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.28) 0 1px, transparent 2px),
    linear-gradient(90deg,
      color-mix(in srgb, var(--c) 72%, black) 0%,
      color-mix(in srgb, var(--c) 91%, white) 18%,
      var(--c) 52%,
      color-mix(in srgb, var(--c) 86%, white) 70%,
      color-mix(in srgb, var(--c) 68%, black) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.28),
    inset 0 -4px 8px rgba(0,0,0,.14);
}

.layer + .layer {
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.28),
    inset 0 -4px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(10,20,45,.14);
}

.layer:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 18%;
  top: 26%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  box-shadow: 7px 9px 0 -1px rgba(255,255,255,.22);
}

.liquid > .layer:last-child::before {
  left: -3px;
  right: -3px;
  top: -4px;
  height: 9px;
  border-radius: 50% / 90%;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c) 70%, white) 0%,
      color-mix(in srgb, var(--c) 92%, white) 45%,
      var(--c) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.62),
    0 2px 3px rgba(0,0,0,.1);
}

.liquid > .layer:last-child::after {
  left: 15%;
  width: 35%;
  top: 1px;
  height: 2px;
  opacity: .75;
}

.liquid > .layer:first-child {
  border-radius: 0 0 23px 23px / 0 0 27px 27px;
}

.bottle[data-colors=''] .tube {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.25), transparent 25% 72%, rgba(255,255,255,.16)),
    color-mix(in srgb, var(--glass) 82%, transparent);
}

.bottle.selected {
  transform: translateY(-18px) scale(1.045);
  filter:
    drop-shadow(0 0 9px color-mix(in srgb, var(--primary) 72%, transparent))
    drop-shadow(0 18px 18px var(--glass-shadow));
  animation: selectedBob 1.75s ease-in-out infinite 180ms;
}

.bottle.selected .tube {
  border-color: color-mix(in srgb, var(--primary-2) 72%, white);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,.3),
    inset -2px 0 0 color-mix(in srgb, var(--glass-edge) 52%, transparent),
    inset 0 -18px 24px var(--glass-shadow),
    0 0 0 2px color-mix(in srgb, var(--primary) 34%, transparent),
    0 0 22px color-mix(in srgb, var(--primary) 42%, transparent),
    0 16px 26px var(--glass-shadow);
}

@keyframes selectedBob {
  0%, 100% { transform: translateY(-18px) scale(1.045); }
  50% { transform: translateY(-23px) scale(1.055); }
}

.bottle.receiving .tube {
  animation: receivingGlow 560ms cubic-bezier(.2,.85,.25,1);
}

.bottle.receiving .liquid {
  animation: liquidImpact 430ms ease-out;
}

.layer.incoming {
  animation: incomingGlow 420ms ease-out;
}

@keyframes receivingGlow {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(1.18); box-shadow: 0 0 24px var(--primary-glow); }
}

@keyframes liquidImpact {
  0%, 100% { transform: scaleX(1); }
  42% { transform: scaleX(1.035); }
  68% { transform: scaleX(.992); }
}

@keyframes incomingGlow {
  0% { filter: brightness(1.38); }
  100% { filter: brightness(1); }
}

.bottle.pouring {
  filter:
    drop-shadow(0 20px 26px rgba(0,0,0,.42))
    drop-shadow(0 0 8px rgba(255,255,255,.16));
}

.stream {
  width: 7px;
  margin-left: -3.5px;
  border-radius: 4px 4px 7px 7px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--c) 72%, black) 0%,
      var(--c) 25%,
      color-mix(in srgb, var(--c) 64%, white) 48%,
      var(--c) 72%,
      color-mix(in srgb, var(--c) 76%, black) 100%);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--c) 55%, transparent),
    inset 1px 0 0 rgba(255,255,255,.58);
  transition: height 150ms cubic-bezier(.3,.7,.35,1), transform 100ms ease-out, opacity 100ms ease-out;
}

.stream.on {
  animation: streamWobble 260ms ease-in-out infinite;
}

.stream::before {
  width: 10px;
  height: 9px;
  margin-left: -5px;
  bottom: -4px;
  background: color-mix(in srgb, var(--c) 88%, white);
  filter: blur(.2px);
}

@keyframes streamWobble {
  0%, 100% { margin-left: -3.5px; transform: scaleY(1) rotate(.4deg); }
  50% { margin-left: -2.7px; transform: scaleY(1) rotate(-.45deg); }
}

.ripple {
  height: 7px;
  border-color: color-mix(in srgb, var(--c, white) 48%, white);
  border-width: 1.5px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c, white) 55%, transparent));
}

.droplet {
  width: 4px;
  height: 6px;
  border-radius: 55% 55% 65% 65%;
  background: color-mix(in srgb, var(--c, white) 76%, white);
  box-shadow: 0 0 4px color-mix(in srgb, var(--c, white) 50%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .bottle:hover:not(.pouring):not(.locked) {
    transform: translateY(-7px) scale(1.015);
  }
}

@media (max-width: 480px) {
  .bottle-wrap { --bottle-w: clamp(51px, 14.1vw, 61px); }
  .tube { aspect-ratio: 1 / 2.34; }
}

@media (max-width: 360px) {
  .bottle-wrap { --bottle-w: clamp(46px, 13.6vw, 53px); }
  .tube { aspect-ratio: 1 / 2.28; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .bottle-wrap { --bottle-w: clamp(48px, 13vh, 58px); }
  .tube { aspect-ratio: 1 / 2.25; }
}

/* ==================================================================
 * Responsive input queue + bottle-local pour FX (v4)
 * ================================================================== */

.bottle.input-press:not(.pouring) {
  transform: translateY(-5px) scale(.965);
  transition-duration: 55ms;
  filter: brightness(1.08) drop-shadow(0 8px 12px var(--glass-shadow));
}

.bottle-wrap.queued-input::before {
  content: attr(data-queued-count);
  position: absolute;
  top: -14px;
  right: -9px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--primary-2) 72%, white);
  border-radius: 50%;
  background: linear-gradient(150deg, var(--primary-2), var(--primary));
  color: var(--primary-contrast);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
    0 5px 12px color-mix(in srgb, var(--primary) 45%, transparent);
  pointer-events: none;
  animation: queuedInputPulse 720ms ease-in-out infinite alternate;
}

.bottle-wrap.queued-input .tube-rim {
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.78),
    inset 0 -2px 3px var(--glass-shadow),
    0 0 12px color-mix(in srgb, var(--primary) 55%, transparent);
}

@keyframes queuedInputPulse {
  from { transform: scale(.9); filter: brightness(.96); }
  to { transform: scale(1.06); filter: brightness(1.14); }
}

.liquid-fx {
  position: absolute;
  inset: 8px 6px 7px;
  z-index: 3;
  overflow: hidden;
  border-radius: 4px 4px 25px 25px / 4px 4px 29px 29px;
  pointer-events: none;
}

.stream {
  margin-left: -3.5px;
  transform-origin: 50% 0;
  transform: rotate(var(--stream-angle, 0deg)) scaleY(.08);
  transition:
    height var(--stream-step-ms, 100ms) cubic-bezier(.3,.7,.35,1),
    transform 70ms ease-out,
    opacity 65ms ease-out;
}

.stream.on {
  transform: rotate(var(--stream-angle, 0deg)) scaleY(1);
  animation: streamPulse 190ms ease-in-out infinite alternate;
}

.stream.stream-out {
  animation: none;
  transform: rotate(var(--stream-angle, 0deg)) scaleY(.12);
  opacity: 0;
}

@keyframes streamPulse {
  from { filter: brightness(.96) saturate(1.02); }
  to { filter: brightness(1.16) saturate(1.14); }
}

.liquid-fx .ripple {
  margin: 0;
  height: 6px;
  transform: translate(-50%, -50%) scale(.25);
  transform-origin: center;
  animation: bottleRippleOut 360ms ease-out forwards;
}

@keyframes bottleRippleOut {
  0% { transform: translate(-50%, -50%) scale(.25); opacity: .95; }
  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
}

.liquid-fx .droplet {
  margin: -2px 0 0 -2px;
  animation: bottleDropletFly 390ms ease-out forwards;
}

@keyframes bottleDropletFly {
  0% { transform: translate(0, 0) scale(1); opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
}