/* ---------- Mixing Bar ---------- */
.mx { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; --vw: clamp(120px, 24vh, 190px); --vh: clamp(160px, 34vh, 270px); }
.mx-scene { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.mx-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.mx-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; z-index: 15; }
.mx-score { display: flex; align-items: center; gap: 8px; padding: 6px 20px 6px 12px; border-radius: 40px; background: #fff; box-shadow: var(--shadow); font-size: 42px; line-height: 1; color: var(--ink); }
.mx-score .ico { width: 46px; height: 46px; }
.mx-stars.bump { display: inline-block; animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.mx-next { width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p, 0) * 360deg), #eee4f2 0); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.mx-next::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.mx-next img { position: relative; width: 66%; height: 66%; object-fit: cover; border-radius: 50%; filter: grayscale(.7); opacity: .85; }
/* bottles on the shelf */
.mx-bottles { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 8; }
.mx-bottle { position: relative; width: clamp(56px, 8vh, 76px); height: clamp(76px, 11vh, 104px); transition: transform .12s; transform-origin: 50% 90%; }
.mx-cap { position: absolute; left: 34%; top: 0; width: 32%; height: 20%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #7a6a8a, #4a3a5a); }
.mx-body { position: absolute; left: 0; top: 16%; width: 100%; height: 84%; border-radius: 30% 30% 16px 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, #fff) 0 16%, var(--c) 28% 72%, color-mix(in srgb, var(--c) 78%, #000) 90%); border: 4px solid #fff; box-shadow: 0 5px 0 rgba(120, 70, 140, .18); }
.mx-bottle > img { position: absolute; left: 18%; top: 38%; width: 64%; height: 46%; object-fit: contain; background: rgba(255, 255, 255, .9); border-radius: 10px; padding: 3px; pointer-events: none; }
.mx-bottle:active { transform: scale(.92); }
.mx-bottle.mx-tilt { animation: mx-tilt .7s ease-in-out; }
@keyframes mx-tilt { 30%, 60% { transform: rotate(-40deg) translate(-8px, 6px); } }
.mx-locked > img, .mx-locked .mx-body { filter: grayscale(1); opacity: .45; }
.mx-locked::after { content: ""; position: absolute; left: 50%; top: 45%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(../assets/img/ui_lock.png) center / contain no-repeat; }
.mx-price { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 1px 8px 1px 4px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-size: 18px; color: var(--ink); white-space: nowrap; }
.mx-price .ico { width: 22px; height: 22px; }
/* the counter: customer, vessel, actions */
.mx-counter { position: absolute; left: 0; right: 0; bottom: clamp(96px, 16vh, 130px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 0 12px; z-index: 6; }
.mx-customer { position: relative; z-index: 2; justify-self: end; width: clamp(140px, 30vh, 240px); margin-right: clamp(10px, 4vw, 60px); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; }
.mx-customer.mx-arrive { transform: translateX(-60vw); transition: none; }
.mx-customer.mx-leave { transform: translateX(-70vw); opacity: 0; transition: transform 1s ease-in, opacity .9s; }
.mx-customer.mx-happy .mx-cust { animation: mx-bounce .5s ease-in-out infinite alternate; }
.mx-cust { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.mx-order { position: absolute; right: -4%; bottom: 92%; display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 26px 26px 6px 26px; background: #fff; box-shadow: var(--shadow); animation: mx-pop .45s cubic-bezier(.34, 1.56, .64, 1); white-space: nowrap; }
.mx-order img { width: clamp(38px, 6.5vh, 56px); height: clamp(38px, 6.5vh, 56px); object-fit: contain; }
.mx-plus { width: 14px; height: 14px; margin: 0 4px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 4px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 4px 100% no-repeat; opacity: .5; }
@keyframes mx-pop { from { transform: scale(0); } }
@keyframes mx-bounce { from { translate: 0 0; } to { translate: 0 -14px; } }
.mx-vessel-wrap { transition: transform .5s ease-in, opacity .4s; }
.mx-vessel-wrap.mx-served { transform: translateX(-40%) scale(.8); opacity: 0; }
.mx-vessel { position: relative; width: var(--vw); height: var(--vh); }
.mx-glass { position: absolute; inset: 0; border: 6px solid rgba(255, 255, 255, .95); border-top: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .4)); box-shadow: inset 0 0 0 3px rgba(150, 200, 230, .35), 0 10px 0 rgba(120, 70, 140, .14); pointer-events: none; }
.mx-glass::before { content: ""; position: absolute; left: -8px; right: -8px; top: -2px; height: 12px; border-radius: 8px; background: rgba(255, 255, 255, .95); }
.mx[data-vessel="glass"] .mx-glass { border-radius: 10px 10px 28px 28px; }
.mx[data-vessel="mug"] .mx-glass { border-radius: 10px 10px 22px 22px; background: linear-gradient(90deg, #fff, #f3ecf8); border-color: #fff; }
.mx[data-vessel="mug"] .mx-glass::after { content: ""; position: absolute; right: -34%; top: 22%; width: 40%; height: 50%; border: 14px solid #fff; border-left: 0; border-radius: 0 40px 40px 0; box-shadow: 4px 6px 0 rgba(120, 70, 140, .14); }
.mx[data-vessel="mug"] .mx-liquid { opacity: .92; }
.mx[data-vessel="flask"] .mx-glass { border-radius: 8px 8px 50% 50% / 8px 8px 60% 60%; }
.mx[data-vessel="flask"] .mx-vessel { --vw: clamp(150px, 30vh, 230px); }
.mx-liquid { position: absolute; left: 8px; right: 8px; bottom: 8px; top: 8px; display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 6px 6px 22px 22px; transition: transform .3s; }
.mx[data-vessel="flask"] .mx-liquid { border-radius: 6px 6px 50% 50% / 6px 6px 60% 60%; }
.mx-layer { position: relative; height: calc(100% / 6); background: var(--c); transition: background-color .5s; animation: mx-rise .5s cubic-bezier(.34, 1.3, .64, 1); }
.mx-layer::before { content: ""; position: absolute; left: -10%; right: -10%; top: -6px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--c) 80%, #fff); animation: mx-wave 2.4s ease-in-out infinite; }
@keyframes mx-rise { from { height: 0; } }
@keyframes mx-wave { 0%, 100% { transform: translateX(-3%); } 50% { transform: translateX(3%); } }
.mx-liquid.mx-slosh { animation: mx-slosh .7s ease-out; }
@keyframes mx-slosh { 0%, 100% { transform: skewX(0); } 25% { transform: skewX(-4deg); } 75% { transform: skewX(4deg); } }
.mx-liquid.mx-swirl .mx-layer { animation: mx-swirl .5s ease-in-out 3; }
@keyframes mx-swirl { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-12%) skewX(8deg); } 75% { transform: translateX(12%) skewX(-8deg); } }
/* the spoon: hidden until a stir, then it dips in from above, circles round the glass three times and lifts out */
.mx-spoon { position: absolute; left: 0; width: 100%; top: 12%; height: 60%; object-fit: contain; transform: translateY(0) rotate(0deg); opacity: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.mx-spoon.mx-stirring { animation: mx-dip .35s ease-out forwards, mx-stir-round .5s ease-in-out .35s 3, mx-lift .3s ease-in 1.85s forwards; opacity: 1; }
@keyframes mx-dip { from { transform: translateY(-70%) rotate(0deg); opacity: 0; } to { transform: translateY(0) rotate(0deg); opacity: 1; } }
@keyframes mx-stir-round { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(22%, 4%) rotate(-12deg); } 50% { transform: translate(0, 7%) rotate(0deg); } 75% { transform: translate(-22%, 4%) rotate(12deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes mx-lift { to { transform: translateY(-80%) rotate(0deg); opacity: 0; } }
.mx-liquid.mx-gulp .mx-layer { animation: mx-gulp 1s ease-in forwards; }
@keyframes mx-gulp { to { height: 0; } }
.mx-fizz { position: absolute; inset: 0; pointer-events: none; }
.mx-fizz s { position: absolute; bottom: -14px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .6); animation: mx-bubble 2.2s ease-in infinite; }
.mx-fizz s:nth-child(1) { left: 20%; } .mx-fizz s:nth-child(2) { left: 45%; animation-delay: .6s; } .mx-fizz s:nth-child(3) { left: 70%; animation-delay: 1.1s; width: 7px; height: 7px; } .mx-fizz s:nth-child(4) { left: 85%; animation-delay: 1.6s; }
@keyframes mx-bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-260px); opacity: 0; } }
.mx-toppings { position: absolute; inset: 0; pointer-events: none; }
.mx-topping { position: absolute; width: 46%; height: 30%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); animation: mx-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.mx-tp0 { left: 27%; top: -22%; } .mx-tp1 { left: -14%; top: -6%; width: 40%; } .mx-tp2 { right: -14%; top: -6%; width: 40%; } .mx-tp3 { left: 30%; top: 12%; width: 40%; }
.mx-actions { display: flex; flex-direction: column; gap: 10px; justify-self: start; margin-left: clamp(10px, 3vw, 40px); }
.mx-actions .round-btn { width: clamp(60px, 10vh, 84px); height: clamp(60px, 10vh, 84px); }
.mx-actions .round-btn .ico { width: 68%; height: 68%; }
.mx-actions .mx-glow { box-shadow: 0 0 0 6px rgba(255, 224, 102, .8), var(--shadow); animation: pulse-plain 1.1s ease-in-out infinite; }
.mx-stir.mx-spin .ico { animation: mx-spin .7s ease-in-out; }
@keyframes mx-spin { to { transform: rotate(720deg); } }
/* toppings row */
.mx-tops { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; padding: 8px 12px; border-radius: 40px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); z-index: 8; }
.mx-topbtn { position: relative; width: clamp(56px, 9vh, 80px); height: clamp(56px, 9vh, 80px); border-radius: 22px; background: linear-gradient(180deg, #fff, #f6f0ff); border: 4px solid #ece4f6; display: grid; place-items: center; transition: transform .12s; }
.mx-topbtn img { width: 80%; height: 80%; object-fit: contain; pointer-events: none; }
.mx-topbtn:active { transform: scale(.9); }
.mx-drop { position: absolute; z-index: 22; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; animation: mx-drop .55s cubic-bezier(.3, 0, .8, .4) forwards; opacity: 0; }
@keyframes mx-drop { 0% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(-45deg) scale(.7); opacity: 1; } }
.mx-heart { position: absolute; width: 46px; transform: translate(-50%, -50%); animation: mx-heart 1.5s ease-out forwards; }
.mx-heart .ico { width: 100%; }
@keyframes mx-heart { to { transform: translate(-50%, -260%) scale(1.4); opacity: 0; } }
.mx-starfly { position: absolute; width: 44px; transform: translate(-50%, -50%); animation: mx-tostar .85s ease-in forwards; }
.mx-starfly .ico { width: 100%; }
@keyframes mx-tostar { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5); } }
.mx-unlock { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, .22); }
.mx-unlock-card { width: clamp(200px, 44vh, 320px); aspect-ratio: 1; border-radius: 40px; background: #fff; border: 8px solid var(--yellow); box-shadow: var(--shadow); display: grid; place-items: center; animation: mx-card .6s cubic-bezier(.34, 1.56, .64, 1); }
.mx-unlock-card img { width: 80%; height: 80%; object-fit: contain; }
.mx-unlock.mx-unlock-scene .mx-unlock-card { width: min(60vw, 520px); aspect-ratio: 16 / 10; }
.mx-unlock.mx-unlock-scene .mx-unlock-card img { width: 92%; height: 88%; object-fit: cover; border-radius: 22px; }
@keyframes mx-card { from { transform: scale(0) rotate(-12deg); } }
.mx-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(120, 90, 150, .55); animation: fadein .18s ease-out; }
.mx-panel { width: min(92%, 980px); max-height: 86%; overflow-y: auto; border-radius: 30px; background: #fff; box-shadow: var(--shadow); padding: 18px; animation: slidein .22s ease-out; }
.mx-close { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); }
.mx-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mx-scene-card { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 5px solid #ece4f6; background: #f6f0ff; box-shadow: 0 6px 0 rgba(120, 70, 140, .14); }
.mx-scene-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-scene-card.active { border-color: var(--yellow); box-shadow: 0 6px 0 #f4c20d; }
.mx-scene-card.mx-locked img { filter: grayscale(1); opacity: .4; }
.mx-scene-card.mx-locked::after { width: 22%; top: 40%; }
.mx-scene-card .mx-price { bottom: 8px; font-size: 22px; }
@media (orientation: landscape) and (max-height: 700px) {
  .mx { --vw: clamp(110px, 22vh, 150px); --vh: clamp(140px, 30vh, 200px); }
  .mx-bottles { top: 96px; }
  .mx-actions { flex-direction: row; flex-wrap: wrap; width: 180px; }
  .mx-counter { bottom: clamp(84px, 14vh, 110px); }
}
@media (orientation: portrait) {
  .mx-bottles { flex-wrap: wrap; justify-content: center; width: 92%; }
  .mx-counter { grid-template-columns: 1fr auto; bottom: 120px; }
  .mx-actions { grid-column: 1 / -1; flex-direction: row; justify-content: center; margin: 12px 0 0; }
  .mx-customer { width: clamp(120px, 24vh, 200px); margin-right: 10px; }
  .mx-order { right: -10%; }
}