@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/inter-tight.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JB Mono"; src: url(fonts/mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; overflow-x: clip; }
body { font: 400 16px/1.5 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
.gbot { display: block; overflow: visible; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- popper: a bot pops up bottom-left with a line ---------- */
.popper { position: fixed; left: 14px; bottom: 0; z-index: 30; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; transform: translateY(120%); transition: transform .4s cubic-bezier(.5,0,.75,0); }
.popper.show { transform: translateY(0); transition: transform .55s cubic-bezier(.3,1.6,.5,1); }
.popper .gbot { width: 76px; height: 76px; margin-bottom: -14px; animation: popBob .9s ease-in-out infinite; }
@keyframes popBob { 50% { transform: translateY(-4px) rotate(-5deg); } }
.pop-say { margin-bottom: 50px; max-width: min(270px, calc(100vw - 120px)); background: #0A0A0A; color: #fff; border-radius: 18px 18px 18px 6px; padding: 10px 14px; font: 500 14px/1.3 "Inter", sans-serif; box-shadow: 0 12px 30px -12px rgba(0,0,0,.4); }

/* ---------- party: the whole crew rises up ---------- */
.party { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.party-conf { position: absolute; inset: 0; }
.party-conf i { position: absolute; top: -24px; width: 9px; height: 9px; border-radius: 50%; animation: fall var(--d) linear forwards; }
.party-conf i.pill { width: 7px; height: 16px; border-radius: 4px; }
@keyframes fall { to { transform: translate(var(--x), 112vh) rotate(var(--r)); } }
.party-row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; padding: 0 6px; }
.pslot { position: relative; width: clamp(46px, 10vw, 92px); margin: 0 -3px; transform: translateY(160%); transition: transform .75s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--k) * 60ms); }
.party.on .pslot { transform: translateY(16%); }
.pslot .gbot { width: 100%; height: auto; aspect-ratio: 1; animation: pbob .5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * 85ms); }
@keyframes pbob { from { transform: translateY(0) scale(1.05, .95); } to { transform: translateY(-18px) scale(.97, 1.03); } }
.psay { position: absolute; bottom: calc(100% + 6px); left: 50%; white-space: nowrap; background: #fff; color: #0A0A0A; border-radius: 14px; padding: 6px 11px; font: 600 clamp(11px, 2.6vw, 14px) "Inter", sans-serif; box-shadow: 0 6px 20px -8px rgba(0,0,0,.35); transform: translateX(-50%) scale(0); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.pslot:first-child .psay, .pslot:nth-child(2) .psay { left: 0; transform: scale(0); transform-origin: 0 100%; }
.pslot:last-child .psay, .pslot:nth-last-child(2) .psay { left: auto; right: 0; transform: scale(0); transform-origin: 100% 100%; }
.pslot.talk .psay { transform: translateX(-50%) scale(1); }
.pslot.talk:first-child .psay, .pslot.talk:nth-child(2) .psay, .pslot.talk:last-child .psay, .pslot.talk:nth-last-child(2) .psay { transform: scale(1); }
.party.dark .psay { background: #fff; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }