#asoc-beer-layer { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; padding: 16px; pointer-events: none; box-sizing: border-box; font-family: var(--font-machine, monospace); color: #ffe8b4; }
.asoc-beer-panel { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; pointer-events: auto; box-sizing: border-box; padding: 26px 26px 24px; text-align: center; border: 1px solid #c4954f; border-radius: 14px; background: radial-gradient(ellipse at 50% 42%, #6a3c1def, #171013f5 65%); box-shadow: 0 25px 70px #000a, inset 0 0 0 5px #130d10, inset 0 0 0 6px #8a643144; animation: beer-arrive .6s cubic-bezier(.16, 1, .3, 1) both; }
.asoc-beer-close { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 1px solid #aa824c; border-radius: 50%; background: #1b1016; color: #ffe2aa; font: 22px/1 monospace; cursor: pointer; pointer-events: auto; z-index: 3; }
.asoc-beer-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.asoc-beer-kicker { color: #c69e64; font-size: 9px; letter-spacing: .24em; padding: 0 25px; }
.asoc-beer-offerer { margin: 9px 15px 0; color: #fff2d5; font-size: clamp(18px, 4vw, 26px); overflow-wrap: anywhere; line-height: 1.2; }
.asoc-beer-stage { position: relative; width: min(320px, 100%); aspect-ratio: 320 / 280; margin: 3px auto; }
.asoc-beer-ring { position: absolute; inset: 12%; border: 2px solid #ffd58b; border-radius: 50%; box-shadow: 0 0 20px #d9873966, inset 0 0 20px #d9873933; animation: beer-ring 1.2s .15s ease-out both; }
.asoc-beer-rays { position: absolute; inset: -10%; border-radius: 50%; background: repeating-conic-gradient(from 15deg, #ffc36322 0 8deg, transparent 8deg 30deg); mask-image: radial-gradient(circle, #000, transparent 65%); animation: beer-rays 4s ease-out both; }
.asoc-beer-vessel { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 6px 5px #0008); animation: beer-vessel .95s cubic-bezier(.16, 1, .3, 1) both; }
[data-variant="barrel"] .asoc-beer-vessel { animation-name: beer-barrel; }
.asoc-beer-particles { position: absolute; inset: 0; }
.asoc-beer-particles i { position: absolute; left: 50%; top: 58%; width: 5px; height: 13px; border-radius: 3px; background: #ffd076; animation: beer-spray 1.5s calc(.4s + var(--delay)) ease-out both; }
.asoc-beer-particles .is-foam { width: 10px; height: 10px; border-radius: 50%; background: #fff4cf; }
.asoc-beer-foam { position: absolute; left: 26%; right: 26%; top: 7%; height: 35px; animation: beer-foam 1.8s .6s ease-out both; }
.asoc-beer-foam i { position: absolute; width: 35%; height: 100%; background: radial-gradient(ellipse at 40% 30%, #fffbea, #d5bb87); border-radius: 50%; }
.asoc-beer-foam i:nth-child(2) { left: 20%; top: -8px; }.asoc-beer-foam i:nth-child(3) { left: 40%; }.asoc-beer-foam i:nth-child(4) { left: 60%; top: -4px; }.asoc-beer-foam i:nth-child(5) { left: 75%; width: 22%; }
.asoc-beer-title { color: #f8d18a; font: 800 clamp(19px, 4.8vw, 30px)/1.2 Georgia, serif; letter-spacing: .06em; }
.asoc-beer-cheers { color: #d6be9a; font-size: 12px; line-height: 1.6; margin: 10px 0; overflow-wrap: anywhere; }
.asoc-beer-panel > small { color: #e7b663; font-size: 10px; letter-spacing: .17em; }
.asoc-beer-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.asoc-beer-choices button { min-height: 44px; padding: 11px 18px; border: 1px solid #ab834c; border-radius: 5px; background: #21151a; color: #e8d2ab; font: 800 11px monospace; letter-spacing: .1em; cursor: pointer; }
.asoc-beer-choices [data-beer-accept] { color: #21120b; background: linear-gradient(#f8d28a, #bc843d); border-color: #ffe0a4; }
.asoc-beer-choices button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.is-awaiting-choice .asoc-beer-stage { display: none; }
.is-awaiting-choice .asoc-beer-title { margin-top: 18px; }
#asoc-beer-drunk { position: fixed; inset: 0; z-index: 2147483099; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: radial-gradient(ellipse, #d6a44c08, #321b3540); }
@keyframes beer-arrive { from { opacity: 0; transform: translateY(35px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes beer-depart { to { opacity: 0; transform: translateY(-15px) scale(.98); } }
@keyframes beer-vessel { from { opacity: 0; transform: translateY(100px) rotate(-25deg) scale(.4); } 65% { opacity: 1; transform: translateY(-10px) rotate(7deg) scale(1.06); } to { transform: none; } }
@keyframes beer-barrel { from { opacity: 0; transform: translateY(-95px) rotate(25deg) scale(1.2); } 60% { opacity: 1; transform: translateY(8px) rotate(-4deg) scale(.98); } to { transform: none; } }
@keyframes beer-ring { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.5); } }
@keyframes beer-rays { from { opacity: 0; transform: rotate(-20deg) scale(.6); } 25% { opacity: 1; } to { opacity: .3; transform: rotate(20deg) scale(1.1); } }
@keyframes beer-spray { from { opacity: 0; transform: translate(0, 0) scale(.3); } 12% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(120deg) scale(.5); } }
@keyframes beer-foam { from { opacity: 0; transform: scale(.2); } 25% { opacity: 1; transform: scale(1.15); } to { opacity: 0; transform: translateY(-40px) scale(1.3); } }
@media (max-height: 650px) { .asoc-beer-panel { padding: 18px; }.asoc-beer-stage { width: min(230px, 48vh); } }
@media (prefers-reduced-motion: reduce) { #asoc-beer-layer * { animation: none !important; }.asoc-beer-particles, .asoc-beer-ring, .asoc-beer-rays, .asoc-beer-foam { display: none; } }
img.asoc-beer-vessel { object-fit: contain; }