/* PlayKit fx + shared end screen (pour, stack, rush, catch). 2026-09-24 */
.pk-meter{position:absolute;left:0;right:0;top:0;height:5px;background:rgba(0,0,0,.07);z-index:7;pointer-events:none}
.pk-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:0 4px 4px 0;transition:width .35s cubic-bezier(.3,1.3,.5,1)}
.pk-meter b{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.95)}
.hud .pk-has-goal{position:relative}
.pk-goal{position:absolute;left:0;top:100%;margin-top:1px;font:700 10.5px "DM Sans",sans-serif;letter-spacing:.02em;color:var(--accent);white-space:nowrap;transform-origin:0 50%}
.pk-goal:empty{display:none}
.pk-goal.hit{animation:pk-bump .5s ease}
@keyframes pk-bump{40%{transform:scale(1.2)}}
.pk-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:7;pointer-events:none;animation:pk-flash .38s ease-out}
@keyframes pk-flash{0%{opacity:.5}100%{opacity:0}}
.pk-squash{animation:pk-squash .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes pk-squash{0%{scale:1.14 .8}100%{scale:1 1}}
.pk-shake{animation:pk-shake .35s ease}
@keyframes pk-shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.pop.combo{font-family:"Fraunces",serif;font-size:19px;color:var(--ink)}
.g-mute{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.g-mute svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* end screen: the reward is always visible, locked or unlocked */
.pk-end{gap:10px;overflow-y:auto;justify-content:safe center}
.pk-score{display:flex;align-items:baseline;gap:8px;line-height:1}
.pk-score .big{font-family:"Fraunces",serif;font-size:clamp(44px,9vw,66px);line-height:1;color:var(--accent)}
.pk-score span{font-family:"Fraunces",serif;font-size:20px;color:var(--mid)}
.pk-end h1{font-size:clamp(24px,4.6vw,36px)}
.pk-coupon{position:relative;display:grid;gap:2px;justify-items:center;width:min(320px,86%);padding:14px 22px 12px;background:#fff;border:2px dashed var(--accent);border-radius:14px;box-shadow:0 14px 28px -18px rgba(0,0,0,.55)}
.pk-coupon::before,.pk-coupon::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--card)}
.pk-coupon::before{left:-11px}.pk-coupon::after{right:-11px}
.pk-c-brand{font:700 10.5px "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.pk-c-off{font-family:"Fraunces",serif;font-size:32px;line-height:1.05;color:var(--accent);overflow-wrap:anywhere}
.pk-c-code{display:flex;align-items:center;gap:8px;margin-top:3px;font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--ink)}
.pk-c-copy{font:700 11px "DM Sans",sans-serif;letter-spacing:.04em;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:5px 12px;min-height:30px;cursor:pointer}
.pk-c-lock{display:flex;align-items:center;gap:5px;font:700 11.5px "DM Sans",sans-serif;color:var(--mid);margin-top:3px}
.pk-c-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pk-coupon.locked{border-color:color-mix(in srgb,var(--mid) 45%,transparent);box-shadow:none;background:rgba(255,255,255,.7)}
.pk-coupon.locked .pk-c-off{color:var(--mid);opacity:.6}
.pk-coupon.locked .pk-c-code{color:var(--mid);opacity:.6}
.pk-coupon.locked .pk-c-copy{display:none}
.pk-coupon.won{animation:pk-pop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes pk-pop{0%{transform:scale(.7) rotate(-4deg);opacity:0}}
.pk-tiers{position:relative;width:min(300px,78%);padding-bottom:18px}
.pk-tiers .bar{position:relative;height:8px;border-radius:8px;background:rgba(0,0,0,.08)}
.pk-tiers .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--accent)}
.pk-tiers .tk{position:absolute;top:13px;transform:translateX(-50%);font:700 10.5px "DM Sans",sans-serif;color:var(--mid);white-space:nowrap}
.pk-tiers .tk.last{transform:translateX(-100%)}
.pk-tiers .tk.on{color:var(--accent)}
.pk-end .row .btn{min-height:46px}
@media (max-width:420px),(max-height:560px){.pk-end{gap:7px;padding:14px}.pk-score .big{font-size:44px}.pk-c-off{font-size:25px}.pk-end h1{font-size:23px}.pk-end .demo{font-size:11.5px}}
/* inside a small preview frame: drop the fine print so the buttons fit */
html.embed .pk-end{gap:6px;padding:12px}
html.embed .pk-end .demo{display:none}