.mel-l, .mel-r { --h: clamp(125px, 22vh, 250px); }
.melWrap { position: fixed; bottom: 0; width: calc(var(--h) * 1.15); height: var(--h); z-index: 950; pointer-events: none; will-change: transform; }
.mel-l .melWrap { left: 0; transform-origin: 0 100%; }
.mel-r .melWrap { right: 0; transform-origin: 100% 100%; }
.melWrap img { position: absolute; bottom: 0; width: auto; max-width: none; opacity: 0; transition: opacity .16s linear; pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-drag: none; }
.mel-l .melWrap img { left: 0; }
.mel-r .melWrap img { right: 0; transform: scaleX(-1); }
.mel-bubble { position: fixed; bottom: calc(var(--h, 200px) * .80); width: min(205px, 56vw); padding: 9px 13px; background: #f2e4c3; color: #3b2a14; border: 2px solid #3b2a14; font-family: 'Pirata One', 'Dilijan Pirate Armenian', 'Noto Serif Armenian', serif; font-size: 1.12rem; line-height: 1.2; letter-spacing: .02em; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); transform: scale(.4); opacity: 0; transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), opacity .2s; pointer-events: none; z-index: 951; }
.mel-l .mel-bubble { left: calc(var(--h, 200px) * .56); border-radius: 16px 16px 16px 4px; transform-origin: 0 100%; }
.mel-r .mel-bubble { right: calc(var(--h, 200px) * .56); border-radius: 16px 16px 4px 16px; transform-origin: 100% 100%; }
.mel-bubble.show { transform: scale(1); opacity: 1; }
.mel-flyball { position: fixed; z-index: 952; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #a98056, #6a4a2a 52%, #3a2412); border: 2px solid #2a1a0e; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .25); pointer-events: none; }
.mel-splat { position: fixed; z-index: 940; pointer-events: none; transform: scale(.25); opacity: 0; transform-origin: center; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.mel-splat.show { transform: scale(1); opacity: 1; transition: transform .22s cubic-bezier(.2, 1.6, .4, 1), opacity .08s; }
.mel-splat.drip { transform: translateY(24vh) scaleY(1.55); transform-origin: top center; opacity: 0; transition: transform 3.4s cubic-bezier(.5, 0, .9, .6), opacity 3.4s ease-in; }
@media (max-width: 700px) { .mel-l, .mel-r { --h: min(20vh, 33vw); } .mel-bubble { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .mel-l, .mel-r, .mel-splat { display: none; } }