/* The HANS sticker pack (stickers.js, redesigned 17 Oct 2026): one SVG scene per sticker, Unbounded words, blue range.
   Each moves in its own way; in the picker they rest until hovered; reduced motion stills them all. */
@font-face{font-family:'HANS Sticker';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/unbounded-latin.woff2) format('woff2')}
.hans-sticker{position:relative;display:inline-block;width:160px;height:148px;vertical-align:middle;user-select:none;-webkit-user-select:none}
.hans-sticker>svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 18px rgba(2,5,13,.55))}
.hans-sticker text{font-family:'HANS Sticker',Unbounded,system-ui,sans-serif;font-weight:900}
.hans-sticker .st-mark{opacity:.92}
.hans-sticker [class^="st-"],.hans-sticker [class*=" st-"]{transform-box:view-box}
/* GM: the sun rises, its rays sway */
.sticker-gm .st-rays{transform-origin:80px 104px;animation:st-sway 6s ease-in-out infinite}
.sticker-gm .st-sun{transform-origin:80px 104px;animation:st-rise 4s ease-in-out infinite}
/* GN: the moon rocks, stars twinkle, the z's drift */
.sticker-gn .st-moon{transform-origin:66px 66px;animation:st-rock 5s ease-in-out infinite}
.sticker-gn .st-zz{animation:st-drift 3.2s ease-in-out infinite}
/* WELCOME: the neon sign swings on its wire and flickers */
.sticker-welcome .st-sign{transform-origin:80px 12px;animation:st-swing 5s ease-in-out infinite}
.sticker-welcome .st-neon{animation:st-flicker 4.6s linear infinite}
/* THANK YOU: the bubble pops */
.sticker-thanks .st-bubble{transform-origin:80px 60px;animation:st-pop 2.8s var(--hv-spring,cubic-bezier(.34,1.56,.64,1)) infinite}
/* HAHA: the letters bounce one after another, the tears fall */
.sticker-haha .st-laugh{transform-origin:82px 90px;animation:st-giggle 1.8s ease-in-out infinite}
.sticker-haha .st-l1,.sticker-haha .st-l2,.sticker-haha .st-l3,.sticker-haha .st-l4{animation:st-bounce .9s ease-in-out infinite}
.sticker-haha .st-l2{animation-delay:.12s}.sticker-haha .st-l3{animation-delay:.24s}.sticker-haha .st-l4{animation-delay:.36s}
.sticker-haha .st-tears{animation:st-tears 1.8s ease-in infinite}
/* MUCH LOVE: a heartbeat */
.sticker-love .st-heart{transform-origin:80px 76px;animation:st-beat 1.6s ease-in-out infinite}
/* LET'S GO: it dashes forward on its speed lines */
.sticker-lets-go .st-dash{animation:st-dash .9s ease-in-out infinite}
.sticker-lets-go .st-streaks{animation:st-streaks .9s ease-in-out infinite}
/* BUILDING: the last brick drops into place */
.sticker-building .st-drop{animation:st-drop 3s cubic-bezier(.3,0,.3,1) infinite}
/* GG: the trophy lifts */
.sticker-gg .st-trophy{transform-origin:80px 118px;animation:st-lift 3s ease-in-out infinite}
/* WAGMI: the seal's ring turns */
.sticker-wagmi .st-spin{transform-origin:80px 72px;animation:st-spin 22s linear infinite}
/* WE'RE SO BACK: the arrow shoots up */
.sticker-so-back .st-arrow{stroke-dasharray:190;animation:st-shoot 3.2s cubic-bezier(.2,.8,.2,1) infinite}
.sticker-so-back .st-head{transform-origin:138px 22px;animation:st-head 3.2s cubic-bezier(.2,.8,.2,1) infinite}
.sticker-so-back .st-back{transform-origin:80px 80px;animation:st-pop 3.2s var(--hv-spring,cubic-bezier(.34,1.56,.64,1)) infinite}
/* PROUD HANSIAN: the badge swings on its lanyard */
.sticker-hansian .st-badge{transform-origin:80px 0;animation:st-swing 4.2s ease-in-out infinite}
/* sparkles everywhere twinkle, a beat apart */
.hans-sticker .st-spark{transform-box:fill-box;transform-origin:center;animation:st-twinkle 2.4s ease-in-out infinite}
.hans-sticker .st-spark.s2{animation-delay:.8s}.hans-sticker .st-spark.s3{animation-delay:1.6s}
@keyframes st-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes st-rise{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@keyframes st-rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}}
@keyframes st-drift{0%{opacity:0;transform:translate(-4px,6px)}30%,70%{opacity:1}100%{opacity:0;transform:translate(4px,-8px)}}
@keyframes st-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes st-flicker{0%,8%,12%,58%,62%,100%{opacity:1}9%,11%{opacity:.35}60%{opacity:.6}}
@keyframes st-pop{0%,62%,100%{transform:scale(1)}70%{transform:scale(1.07)}80%{transform:scale(.98)}}
@keyframes st-giggle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg)}}
@keyframes st-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@keyframes st-tears{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes st-beat{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.09)}26%{transform:scale(1.04)}}
@keyframes st-dash{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
@keyframes st-streaks{0%,100%{transform:translateX(4px);opacity:.6}50%{transform:translateX(-6px);opacity:1}}
@keyframes st-drop{0%{transform:translateY(-34px);opacity:0}18%{opacity:1}30%{transform:translateY(0)}36%{transform:translateY(-4px)}42%,100%{transform:translateY(0)}}
@keyframes st-lift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes st-spin{to{transform:rotate(360deg)}}
@keyframes st-shoot{0%{stroke-dashoffset:190}45%,100%{stroke-dashoffset:0}}
@keyframes st-head{0%,30%{opacity:0;transform:translate(-14px,14px) scale(.6)}45%,100%{opacity:1;transform:none}}
@keyframes st-twinkle{0%,100%{opacity:.35;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.chat-message .hans-sticker{display:block;margin:6px 0 2px}
/* Brand v2 (15 Oct 2026): the picker around the stickers. */
/* FOUNDER: the ice chip (TEAM is the glass one, chat.css) */
.chat-official.chat-founder{color:#06122E;background:linear-gradient(180deg,#F6FAFF 0%,#CFE3FF 55%,#9CC4FF 100%);box-shadow:inset 0 1px 0 #fff,0 0 12px -2px rgba(98,160,255,.7)}
/* the Stickers toggle: a glass pill that lights up while the picker is open */
#chat-stickers{min-height:36px;padding:0 14px;border-radius:999px;font:600 12.5px/1 var(--hv-body);color:var(--hv-paper);background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2);transition:background-color .2s ease,box-shadow .3s ease,transform .45s var(--hv-spring)}
#chat-stickers:hover{transform:translateY(-1px);background:rgba(98,160,255,.16)}
#chat-stickers[aria-expanded=true]{color:#fff;background:radial-gradient(120% 140% at 50% 0%,rgba(220,236,255,.32),rgba(98,160,255,.16) 55%,rgba(98,160,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(160,200,255,.5),0 6px 20px -8px rgba(98,160,255,.8)}
.chat-sticker-picker{flex-shrink:0;max-height:280px;overflow:auto;padding:12px 16px 14px;border-top:1px solid rgba(160,200,255,.14);background:rgba(6,14,36,.45);scrollbar-width:thin;scrollbar-color:rgba(160,200,255,.28) transparent}
.chat-sticker-picker>header{display:flex;align-items:center;justify-content:space-between;font:600 11px/1 var(--hv-body);letter-spacing:.14em;color:var(--hv-sky)}
.chat-sticker-picker>header button{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;font-size:20px;line-height:1;background:rgba(98,160,255,.1);transition:transform .45s var(--hv-spring)}
.chat-sticker-picker>header button:hover{transform:rotate(90deg)}
/* each sticker sits on a glass tile that lifts and glows */
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:10px}
.sticker-grid button{position:relative;display:grid;place-items:center;min-width:0;height:98px;overflow:hidden;border:0;border-radius:18px;background:var(--hv-glass-hi),rgba(12,26,62,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(160,200,255,.14);transition:transform .45s var(--hv-spring),box-shadow .3s ease}
.sticker-grid button:hover,.sticker-grid button:focus-visible{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(160,200,255,.4),0 0 26px -6px rgba(98,160,255,.6)}
.sticker-grid .hans-sticker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);transform-origin:center center;margin:0}.sticker-grid .hans-sticker *{animation-play-state:paused}.sticker-grid button:hover .hans-sticker *,.sticker-grid button:focus .hans-sticker *{animation-play-state:running}
#chat-sticker-preview{display:flex;align-items:center;gap:12px;flex-shrink:0;margin:4px 12px 0;padding:3px 12px;border-radius:18px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2)}#chat-sticker-preview .hans-sticker{transform:scale(.43);transform-origin:center;margin:-40px -43px}#chat-sticker-preview>span:not(.hans-sticker){font:500 13px/1.3 var(--hv-body);color:var(--hv-ice)}#chat-sticker-preview button{display:grid;place-items:center;width:36px;height:36px;margin-left:auto;padding:0;border-radius:50%;font-size:20px;line-height:1;background:rgba(98,160,255,.12)}
.club-passports #chat-compose footer{flex-wrap:wrap}.club-passports #chat-compose footer span{font-size:11.5px}
@media(max-width:560px){.chat-sticker-picker{max-height:236px;padding:8px 12px 10px}.sticker-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}.sticker-grid button{height:84px;border-radius:16px}.sticker-grid .hans-sticker{transform:translate(-50%,-50%) scale(.52)}.club-passports .chat-message header{flex-wrap:wrap;gap:5px}.club-passports #chat-compose footer span{display:none}}
@media(prefers-reduced-motion:reduce){.hans-sticker *{animation:none!important}}
@media(pointer:coarse){#chat-stickers{min-height:44px}.chat-sticker-picker>header button,#chat-sticker-preview button{width:44px;height:44px}}