/* Slot-machine sip reveal. Timeline (reveal lead 3.2 s, total 9.2 s), driven by the same --phase-offset clock
   as the existing drink animation so refresh, reconnect and pause resume at the right moment:
   0.9 s close-up in · 0.9-1.2 s roller appears · 1.0-2.9 s reel spins · 2.9 s lock · 5.18 s existing sip starts. */
.sip-slot,.sip-flash{display:none}
/* The roller takes the close-up caption's place; heading and glass bar carry the same numbers. */
.has-sip-roll .drink-closeup-caption,.sip-static .drink-closeup-caption{display:none}
.has-sip-roll .sip-slot,.sip-static .sip-slot{display:grid}
.sip-slot{position:absolute;left:50%;bottom:4%;z-index:24;width:min(62%,380px);transform:translateX(-50%);justify-items:center;gap:5px;pointer-events:none;text-align:center}
.sip-slot-window{display:flex;align-items:baseline;justify-content:center;gap:2px;min-width:3.4ch;padding:2px 18px 4px;border:2px solid #d9a24a;border-radius:14px;color:#ffe9bd;background:linear-gradient(#1a0f08ee,#2b1a0cee);box-shadow:0 8px 26px #000a,inset 0 0 18px #000a,0 0 18px #e8a13a55;font:800 clamp(28px,5.4vw,60px)/1.05 Georgia,serif;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #3a2208,0 0 14px #f0b04a88;overflow:hidden;position:relative}
.sip-heading-extras{display:none}
.sip-slot-window b{font-size:.55em;color:#f0c277}
.sip-slot[data-state=spinning] .sip-slot-value{filter:blur(.8px)}
.sip-slot-window::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#fff5 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.sip-slot-badge{padding:3px 12px;border-radius:999px;color:#2a1403;background:linear-gradient(#ffd77a,#f0a23a);border:1px solid #fff0b8;font:800 clamp(11px,1.9vw,17px)/1.2 sans-serif;letter-spacing:.14em;box-shadow:0 0 18px #ffb43ccc}
.sip-slot-phrase{margin:0;max-width:100%;padding:5px 12px;border-radius:10px;color:#fff1d4;background:#160d09e6;border:1px solid #c99b5966;font:600 clamp(12px,1.9vw,18px)/1.25 sans-serif;text-wrap:balance}
.sip-slot[data-tier=jackpot] .sip-slot-window,.sip-tier-jackpot .sip-slot-window{border-color:#ffd777;box-shadow:0 8px 26px #000a,inset 0 0 18px #000a,0 0 30px #ffb43c}
.sip-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sip-flash{position:absolute;inset:0;z-index:23;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 70%,#ffd36ecc,#ff9a2a55 40%,transparent 70%)}
.has-sip-roll.sip-tier-jackpot .sip-flash{display:block}

/* Existing sip animations keep their 6 s shape, just shifted behind the reveal. */
.has-sip-roll.seated-scene .bar-guest.is-drinker .seated-avatar,
.has-sip-roll .seated-prop.is-drinker > .table-beer,
.has-sip-roll.living-pub .bar-guest.is-drinker .avatar-art,
.has-sip-roll.living-pub .bar-guest.is-drinker > .beer-glass.table-beer{animation-delay:calc(var(--phase-offset,0ms) + 3200ms)}
.has-sip-roll.seated-scene .seated-prop.is-drinker > .table-beer,
.has-sip-roll.seated-scene .seated-prop.is-drinker::before{animation:sip-table-presence 9.2s linear var(--phase-offset,0ms) both}
.has-sip-roll .drink-closeup{animation:sip-focus 9.2s ease-in-out var(--phase-offset,0ms) both}
.has-sip-roll .drink-hold{animation:sip-hold-frame 9.2s linear var(--phase-offset,0ms) both}
.has-sip-roll .drink-sip{animation:sip-sip-frame 9.2s linear var(--phase-offset,0ms) both}
@keyframes sip-focus{0%,5.2%,100%{opacity:0;transform:scale(.94)}9.8%,92.2%{opacity:1;transform:scale(1)}97.4%{opacity:0;transform:scale(.98)}}
@keyframes sip-hold-frame{0%,53.7%,81.7%,100%{opacity:1}56.3%,79.1%{opacity:0}}
@keyframes sip-sip-frame{0%,53.7%,81.7%,100%{opacity:0}56.3%,79.1%{opacity:1}}
@keyframes sip-table-presence{0%,5.2%,96.1%,100%{opacity:1}9.8%,91.5%{opacity:0}}

/* Roller: in, hold, out with the close-up. */
.has-sip-roll .sip-slot{animation:sip-slot-life 9.2s ease-out var(--phase-offset,0ms) both}
@keyframes sip-slot-life{0%,9.8%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.9)}13.6%,91.3%{opacity:1;transform:translateX(-50%)}96.1%,100%{opacity:0;transform:translateX(-50%) translateY(4px)}}

/* Lock-in (2.9 s). Normal sips get a clean pulse, 25% a subtle perfect-hit shimmer, 30%+ the jackpot treatment. */
.has-sip-roll .sip-slot-window{animation:sip-lock .5s ease-out calc(var(--phase-offset,0ms) + 2900ms) both}
.has-sip-roll.sip-perfect .sip-slot-window{animation:sip-lock-perfect .7s ease-out calc(var(--phase-offset,0ms) + 2900ms) both}
.has-sip-roll.sip-perfect .sip-slot-window::after{animation:sip-shimmer .9s ease-out calc(var(--phase-offset,0ms) + 3000ms) both}
.has-sip-roll.sip-tier-jackpot .sip-slot-window{animation:sip-lock-jackpot .9s cubic-bezier(.2,1.4,.4,1) calc(var(--phase-offset,0ms) + 2900ms) both}
.has-sip-roll.sip-tier-jackpot .sip-slot-badge{animation:sip-badge .45s cubic-bezier(.2,1.5,.4,1) calc(var(--phase-offset,0ms) + 3050ms) both}
.has-sip-roll .sip-slot-phrase{animation:sip-phrase .5s ease-out calc(var(--phase-offset,0ms) + 3300ms) both}
.has-sip-roll.sip-tier-jackpot .sip-flash{animation:sip-flash .7s ease-out calc(var(--phase-offset,0ms) + 2900ms) both}
/* Whole-panel shake via the separate `translate` property (the scene itself is laid out with left/top/transform). */
.drink-animation-panel:has(.has-sip-roll.sip-tier-jackpot){animation:sip-shake .42s linear calc(var(--phase-offset,0ms) + 2900ms) both}
@keyframes sip-lock{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes sip-lock-perfect{0%{transform:scale(1)}35%{transform:scale(1.2)}65%{transform:scale(.97)}100%{transform:scale(1.04)}}
@keyframes sip-shimmer{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes sip-lock-jackpot{0%{transform:scale(1)}40%{transform:scale(1.5)}70%{transform:scale(1.2)}100%{transform:scale(1.32)}}
@keyframes sip-badge{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes sip-phrase{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sip-flash{0%{opacity:0}20%{opacity:.7}100%{opacity:0}}
.drink-animation-panel.is-paused{animation-play-state:paused!important}
@keyframes sip-shake{0%,100%{translate:0 0}15%{translate:-5px 2px}30%{translate:4px -3px}45%{translate:-3px -2px}60%{translate:3px 2px}80%{translate:-1px 1px}}

@media(max-width:560px){.sip-slot{width:min(78%,300px);bottom:3%}.sip-slot .sip-slot-badge,.sip-slot .sip-slot-phrase{display:none}.sip-heading-extras{display:grid;gap:5px;justify-items:start;margin-top:6px}.sip-heading-extras .sip-slot-phrase{text-align:left}.sip-slot-window{padding:1px 12px 3px}.sip-slot-phrase{padding:4px 9px}}
/* Reduced motion: no spinning, flash or shake; the final result is simply shown (the reel is skipped in JS too). */
@media(prefers-reduced-motion:reduce){
  .has-sip-roll .sip-slot,.has-sip-roll .sip-slot-window,.has-sip-roll .sip-slot-window::after,.has-sip-roll .sip-slot-badge,.has-sip-roll .sip-slot-phrase,.has-sip-roll .sip-flash,.drink-animation-panel:has(.has-sip-roll.sip-tier-jackpot){animation:none!important}
  .sip-flash{display:none!important}
  .has-sip-roll .sip-slot{opacity:1;transform:translateX(-50%)}
}