/* SafeSwap Halloween kit v2 — every class starts with .ssh- ; delete this file on 1 Nov */
:root{--ssh-ink:#0c0b10;--ssh-panel:#16141d;--ssh-panel2:#1d1726;--ssh-line:#2e2740;--ssh-violet:#8b6cf0;--ssh-violet2:#a88bff;--ssh-pumpkin:#ff8a1f;--ssh-pumpkin2:#ffb347;--ssh-flame:#ffd36b;--ssh-slime:#9bff5a;--ssh-bone:#f1ecfa;--ssh-dim:#a79fbd;--ssh-font:"Bricolage Grotesque",system-ui,sans-serif;--ssh-spooky:"Creepster","Bricolage Grotesque",system-ui,sans-serif}

/* motion */
@keyframes ssh-flapL{0%,100%{transform:rotate(0)}50%{transform:rotate(28deg) scaleY(.7)}}
@keyframes ssh-flapR{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg) scaleY(.7)}}
@keyframes ssh-fly{0%{transform:translate(-12vw,0) rotate(-4deg)}25%{transform:translate(25vw,-10px) rotate(3deg)}50%{transform:translate(55vw,8px) rotate(-3deg)}75%{transform:translate(82vw,-6px) rotate(4deg)}100%{transform:translate(112vw,4px) rotate(-2deg)}}
@keyframes ssh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes ssh-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes ssh-float{0%,100%{transform:translate(0,0) rotate(-5deg)}33%{transform:translate(14px,-18px) rotate(3deg)}66%{transform:translate(-8px,-8px) rotate(6deg)}}
@keyframes ssh-drift{from{transform:translateX(-33%)}to{transform:translateX(0)}}
@keyframes ssh-spin{to{transform:rotate(360deg)}}
@keyframes ssh-glow{0%,100%{box-shadow:0 0 0 1px rgba(255,138,31,.45),0 10px 30px rgba(0,0,0,.45),0 0 26px rgba(255,138,31,.14)}50%{box-shadow:0 0 0 1px rgba(255,138,31,.85),0 10px 30px rgba(0,0,0,.45),0 0 40px rgba(255,138,31,.32)}}
@keyframes ssh-flicker{0%,100%{opacity:1;filter:brightness(1)}8%{opacity:.82}10%{opacity:1}42%{opacity:.9;filter:brightness(1.15)}44%{opacity:.7}46%{opacity:1}71%{opacity:.88}}
@keyframes ssh-flame{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.08) skewX(-4deg)}60%{transform:scale(1.05,.95) skewX(3deg)}}
@keyframes ssh-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes ssh-in{from{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes ssh-shine{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes ssh-ember{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate(var(--x,20px),-180px) scale(.3);opacity:0}}
@keyframes ssh-drip{0%,70%,100%{transform:scaleY(1)}85%{transform:scaleY(1.6)}}
@keyframes ssh-dropfall{0%,60%{transform:translateY(0);opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes ssh-rise{0%,100%{transform:translateY(8px)}50%{transform:translateY(-6px)}}
@keyframes ssh-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes ssh-tick{0%{transform:translateY(-35%);opacity:0}100%{transform:none;opacity:1}}
@keyframes ssh-twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ssh-sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* shared svg behaviour */
.ssh-wing{transform-box:fill-box}.ssh-wing--l{transform-origin:100% 60%;animation:ssh-flapL .32s ease-in-out infinite}.ssh-wing--r{transform-origin:0% 60%;animation:ssh-flapR .32s ease-in-out infinite}
.ssh-face{animation:ssh-flicker 2.6s infinite;filter:drop-shadow(0 0 4px #ffb347)}
.ssh-eyes{transform-box:fill-box;transform-origin:center;animation:ssh-blink 4.5s infinite}
.ssh-flame{transform-box:fill-box;transform-origin:50% 100%;animation:ssh-flame .9s ease-in-out infinite}
.ssh-candleglow{animation:ssh-flicker 1.8s infinite}
.ssh-twinkle{transform-box:fill-box;transform-origin:center;animation:ssh-twinkle 2.4s ease-in-out infinite}
.ssh-window{animation:ssh-flicker 3.4s infinite}
.ssh-drops ellipse{transform-box:fill-box;animation:ssh-dropfall 3s ease-in infinite}.ssh-drops ellipse:nth-child(2){animation-delay:-1.1s}.ssh-drops ellipse:nth-child(3){animation-delay:-2s}
.ssh-svg svg,.ssh-svg{display:block;width:100%;height:auto}

/* 1 announcement bar */
.ssh-bar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;padding:10px 16px;background:linear-gradient(90deg,#1a0f24,#341738,#24122e,#341738,#1a0f24);background-size:200% 100%;animation:ssh-sheen 12s linear infinite;border-bottom:1px solid rgba(255,138,31,.28);color:var(--ssh-bone);font:600 14px/1.3 var(--ssh-font);text-align:center}
.ssh-bar__txt b{color:var(--ssh-pumpkin2)}
.ssh-bar__icon{width:24px;flex:none;filter:drop-shadow(0 0 8px rgba(255,179,71,.6))}
.ssh-bar .ssh-bat{position:absolute;top:4px;left:0;width:40px;animation:ssh-fly 15s linear infinite;pointer-events:none;opacity:.9}
.ssh-bar .ssh-bat:nth-of-type(2){animation-duration:21s;animation-delay:-9s;top:14px;width:26px;opacity:.6}

/* 2 countdown */
.ssh-count{display:inline-flex;align-items:center;gap:12px;padding:8px 12px 8px 10px;border-radius:14px;background:linear-gradient(180deg,#22182c,#17121f);border:1px solid rgba(255,138,31,.35);box-shadow:0 0 24px rgba(255,138,31,.12);color:var(--ssh-bone);font:600 12px/1 var(--ssh-font)}
.ssh-count__candle{width:16px}
.ssh-count__label{color:var(--ssh-dim);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.ssh-count__units{display:flex;gap:6px}
.ssh-count__u{display:grid;justify-items:center;gap:3px;min-width:34px;padding:5px 4px 4px;border-radius:8px;background:#0e0b13;border:1px solid #2e2740}
.ssh-count__u b{font:800 17px/1 ui-monospace,Menlo,monospace;color:var(--ssh-pumpkin2);font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,138,31,.55)}
.ssh-count__u b.ssh-tick{animation:ssh-tick .25s ease-out}
.ssh-count__u small{font-size:9px;letter-spacing:.08em;color:var(--ssh-dim);text-transform:uppercase}

/* 3 logo hat */
.ssh-hatwrap{position:relative;display:inline-block;margin-top:34px}
.ssh-hat{position:absolute;width:90%;left:28%;top:-60%;transform:rotate(14deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));transition:transform .3s}
.ssh-hatwrap:hover .ssh-hat{transform:rotate(4deg) translateY(-6px)}

/* 4 cobwebs */
.ssh-web{position:absolute;width:150px;pointer-events:none;opacity:.5;z-index:1}
.ssh-web--tl{top:0;left:0}.ssh-web--tr{top:0;right:0;transform:scaleX(-1)}

/* 5 hanging spider */
.ssh-spider{position:absolute;top:0;width:34px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:ssh-sway 4s ease-in-out infinite;pointer-events:none;z-index:2}
.ssh-spider i{width:1px;height:var(--ssh-thread,80px);background:linear-gradient(rgba(217,209,236,0),rgba(217,209,236,.8))}
.ssh-spider .ssh-svg{animation:ssh-bob 2.8s ease-in-out infinite}
.ssh-spidereye{animation:ssh-flicker 2s infinite}

/* 6 slime edge */
.ssh-slime{display:block;width:100%;height:40px;margin-top:-1px;filter:drop-shadow(0 4px 8px rgba(155,255,90,.25));pointer-events:none}
.ssh-slime svg{width:100%;height:100%;display:block;transform-origin:top;animation:ssh-drip 5s ease-in-out infinite}

/* 7 haunted hero */
.ssh-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:clamp(40px,7vw,76px) clamp(20px,5vw,48px) clamp(150px,22vw,220px);background:radial-gradient(1px 1px at 12% 22%,#fff 50%,#0000),radial-gradient(1px 1px at 28% 12%,#fff 50%,#0000),radial-gradient(1.5px 1.5px at 44% 30%,#fff 50%,#0000),radial-gradient(1px 1px at 58% 8%,#fff 50%,#0000),radial-gradient(1px 1px at 70% 26%,#fff 50%,#0000),radial-gradient(1.2px 1.2px at 6% 44%,#fff 50%,#0000),radial-gradient(1px 1px at 36% 48%,#fff 50%,#0000),linear-gradient(180deg,#1c0f2e 0%,#2a1538 55%,#3a1a2c 100%);color:var(--ssh-bone);font-family:var(--ssh-font)}
.ssh-hero__scene{position:absolute;left:0;right:0;bottom:0;height:72%;z-index:-1;pointer-events:none}
.ssh-hero__scene svg{width:100%;height:100%}
.ssh-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(255,138,31,.12);border:1px solid rgba(255,138,31,.4);color:var(--ssh-pumpkin2);font:700 12px/1 var(--ssh-font);letter-spacing:.06em;text-transform:uppercase}
.ssh-hero h2{margin:0 0 12px;font-size:clamp(34px,6.4vw,64px);line-height:.98;letter-spacing:-.01em;max-width:13ch;text-wrap:balance}
.ssh-hero h2 em{font-family:var(--ssh-spooky);font-style:normal;font-weight:400;color:var(--ssh-pumpkin2);text-shadow:0 0 18px rgba(255,138,31,.65),0 0 2px #ff8a1f;animation:ssh-flicker 5s infinite;letter-spacing:.02em}
.ssh-hero p{margin:0 0 24px;color:#d5cce6;max-width:38ch;font-size:clamp(15px,2vw,18px);line-height:1.45}
.ssh-hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.ssh-hero .ssh-bat{position:absolute;width:56px;top:16%;left:0;animation:ssh-fly 18s linear infinite;pointer-events:none;z-index:-1}
.ssh-hero .ssh-bat:nth-of-type(2){width:34px;top:30%;animation-duration:24s;animation-delay:-11s}

/* 8 floating ghosts layer */
.ssh-ghosts{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.ssh-ghosts span{position:absolute;width:52px;opacity:.22;filter:blur(.3px);animation:ssh-float 8s ease-in-out infinite}
.ssh-ghosts span:nth-child(1){left:6%;top:56%}.ssh-ghosts span:nth-child(2){left:62%;top:14%;animation-delay:-2.5s;width:36px;opacity:.16}.ssh-ghosts span:nth-child(3){left:48%;top:62%;animation-delay:-5s;width:44px}.ssh-ghosts span:nth-child(4){left:86%;top:48%;animation-delay:-6s;width:30px;opacity:.14}

/* 9 fog + embers */
.ssh-fog{position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;overflow:hidden;z-index:0}
.ssh-fog::before,.ssh-fog::after{content:"";position:absolute;inset:0 -50% 0 0;background:radial-gradient(ellipse 28% 60% at 18% 100%,rgba(241,236,250,.2),#0000 70%),radial-gradient(ellipse 24% 50% at 50% 100%,rgba(168,139,255,.18),#0000 70%),radial-gradient(ellipse 30% 58% at 82% 100%,rgba(241,236,250,.16),#0000 70%);animation:ssh-drift 24s linear infinite alternate}
.ssh-fog::after{animation-duration:33s;animation-direction:alternate-reverse;opacity:.75}
.ssh-embers{position:absolute;inset:auto 0 0 0;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.ssh-embers i{position:absolute;bottom:-6px;width:4px;height:4px;border-radius:50%;background:#ffcf6b;box-shadow:0 0 8px 2px rgba(255,138,31,.7);animation:ssh-ember 6s ease-out infinite}

/* 10 listing card */
.ssh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.ssh-card{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,#1f1829,#15121c);color:var(--ssh-bone);font-family:var(--ssh-font);animation:ssh-glow 3.2s ease-in-out infinite;transition:transform .25s ease}
.ssh-card:hover{transform:translateY(-6px) rotate(-.6deg)}
.ssh-card::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,#0000,rgba(255,255,255,.08),#0000);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.ssh-card:hover::after{animation:ssh-shine 1.1s ease}

/* 11 chips */
.ssh-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 8px;border-radius:999px;font:700 12px/1 var(--ssh-font);letter-spacing:.02em;backdrop-filter:blur(6px)}
.ssh-chip__i{width:16px;flex:none}
.ssh-chip--pumpkin{background:linear-gradient(180deg,rgba(255,179,71,.2),rgba(255,138,31,.12));color:var(--ssh-pumpkin2);border:1px solid rgba(255,138,31,.5);box-shadow:0 0 14px rgba(255,138,31,.18)}
.ssh-chip--slime{background:rgba(155,255,90,.12);color:var(--ssh-slime);border:1px solid rgba(155,255,90,.45);box-shadow:0 0 14px rgba(155,255,90,.15)}
.ssh-chip--ghost{background:rgba(241,236,250,.08);color:var(--ssh-bone);border:1px solid rgba(241,236,250,.3)}
.ssh-chip--blood{background:rgba(255,77,94,.12);color:#ff8b98;border:1px solid rgba(255,77,94,.45)}

/* 12 buttons */
.ssh-btn{position:relative;display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:14px 24px 14px 18px;border-radius:16px;background:radial-gradient(120% 140% at 30% 0%,#ffd08a 0%,var(--ssh-pumpkin2) 35%,var(--ssh-pumpkin) 70%,#d8650a 100%);color:#2b1200;font:800 15px/1 var(--ssh-font);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(150,60,0,.45),0 8px 24px rgba(255,138,31,.35);transition:transform .15s,box-shadow .2s;text-decoration:none}
.ssh-btn__i{width:22px;flex:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.ssh-btn:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(150,60,0,.45),0 12px 34px rgba(255,138,31,.55)}
.ssh-btn:active{transform:translateY(1px)}
.ssh-btn:focus-visible{outline:3px solid var(--ssh-violet2);outline-offset:3px}
.ssh-btn::after{content:"";position:absolute;left:14px;right:14px;bottom:-10px;height:14px;transform-origin:top;animation:ssh-drip 3.6s ease-in-out infinite;background:radial-gradient(circle at 10% 0,#e8730f 6px,#0000 7px),radial-gradient(circle at 34% 0,#e8730f 4px,#0000 5px),radial-gradient(circle at 66% 0,#e8730f 8px,#0000 9px),radial-gradient(circle at 90% 0,#e8730f 3.5px,#0000 4.5px);pointer-events:none}
.ssh-btn--ghost{background:rgba(241,236,250,.04);color:var(--ssh-bone)!important;box-shadow:inset 0 0 0 1.5px rgba(241,236,250,.35);overflow:visible}
.ssh-btn--ghost::after{content:none}
.ssh-btn--ghost .ssh-btn__peek{position:absolute;width:30px;right:10px;top:4px;opacity:0;transform:translateY(6px);transition:all .25s;pointer-events:none}
.ssh-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ssh-violet2),0 0 22px rgba(168,139,255,.3)}
.ssh-btn--ghost:hover .ssh-btn__peek{opacity:1;transform:translateY(-30px) rotate(8deg)}

/* 13 dividers */
.ssh-divider--bats{display:flex;align-items:center;gap:14px}
.ssh-divider--bats::before,.ssh-divider--bats::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#0000,rgba(255,138,31,.5),#0000)}
.ssh-divider--bats .ssh-svg{width:46px}

/* 14 loader */
.ssh-loader{position:relative;width:84px;height:84px;display:grid;place-items:center}
.ssh-loader__ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,138,31,.15);border-top-color:var(--ssh-pumpkin);border-right-color:var(--ssh-pumpkin2);animation:ssh-spin .9s linear infinite;box-shadow:0 0 22px rgba(255,138,31,.25)}
.ssh-loader__pk{width:48px;animation:ssh-bob 1.4s ease-in-out infinite}
.ssh-loader__orbit{position:absolute;inset:-8px;animation:ssh-spin 2.4s linear infinite reverse}
.ssh-loader__orbit .ssh-svg{width:18px;position:absolute;top:0;left:50%;margin-left:-9px}
.ssh-loader__label{margin-top:10px;font:600 13px var(--ssh-font);color:var(--ssh-dim)}

/* 15 empty state */
.ssh-empty{display:grid;justify-items:center;gap:10px;padding:36px 16px;text-align:center;color:var(--ssh-bone);font-family:var(--ssh-font)}
.ssh-empty__art{position:relative;width:170px}
.ssh-empty__ghost{position:absolute;width:56px;left:58%;top:-30px;animation:ssh-rise 3s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(241,236,250,.35))}
.ssh-empty strong{font-family:var(--ssh-spooky);font-weight:400;font-size:28px;letter-spacing:.03em;color:var(--ssh-bone)}
.ssh-empty span{color:var(--ssh-dim);font-size:14px;max-width:32ch}

/* ---- placed on safeswap.gg (still ssh- only) ---------------------------- */
/* bar: the countdown only from 600px; tighter on a phone */
.ssh-bar .ssh-count{display:none}
@media (min-width:600px){.ssh-bar .ssh-count{display:inline-flex}}
@media (max-width:599px){.ssh-bar{padding:8px 12px;font-size:13px;gap:8px}.ssh-bar__icon{width:20px}}
/* the hat sits on the logo without moving the header */
.ssh-logo{position:relative;display:inline-flex}
.ssh-logo .ssh-hat{width:30px;left:-13px;top:-15px;transform:rotate(-20deg);pointer-events:none}
.ssh-logo:hover .ssh-hat{transform:rotate(-10deg) translateY(-3px)}
/* slime and the spider hang off the header's bottom edge, over nothing clickable */
.ssh-hd-slime{position:absolute;left:0;right:0;top:100%;height:14px;margin:0;z-index:1}
.ssh-hd-spider{top:100%;right:18%;width:22px}
@media (max-width:899px){.ssh-hd-spider{display:none}}
/* the home hero, shorter than the kit's on a phone */
.ssh-hero--home{padding:30px 20px 120px}
.ssh-hero--home h2{font-size:clamp(30px,6vw,56px)}
@media (min-width:768px){.ssh-hero--home{padding:48px 44px 160px}}
@media (max-width:599px){.ssh-hero--home{padding:24px 18px 96px}.ssh-hero--home .ssh-hero__scene{height:46%}.ssh-hero--home .ssh-web{width:80px}.ssh-hero--home p{margin-bottom:16px;font-size:14.5px}.ssh-hero--home .ssh-btn{padding:12px 18px 12px 14px;font-size:14px}}
.ssh-hero--home h2,.ssh-hero--home p{text-shadow:0 1px 10px rgba(28,15,46,.9)}
/* a Featured listing glows, with a pumpkin chip */
.ssh-feat{animation:ssh-glow 3.2s ease-in-out infinite;border-radius:16px}
.ssh-card-chip{padding:4px 9px 4px 6px;font-size:11px}
.ssh-card-chip .ssh-chip__i{width:14px}
/* the header avatar gets a pumpkin ring; toasts go dark and orange */
.ssh-on .b2-av{box-shadow:0 0 0 2px #ff8a1f,0 0 12px rgba(255,138,31,.45)}
.ssh-on .pf-toast{background:linear-gradient(180deg,#24182e,#1a1222)!important;color:var(--ssh-bone)!important;border:1px solid rgba(255,138,31,.45)!important;box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 24px rgba(255,138,31,.15)!important;animation:ssh-in .4s cubic-bezier(.2,.9,.3,1.2)}

@media (prefers-reduced-motion:reduce){.ssh-bar,.ssh-bar *,.ssh-hero *,.ssh-card,.ssh-card *,.ssh-feat,.ssh-btn,.ssh-btn::after,.ssh-loader *,.ssh-empty *,.ssh-spider,.ssh-spider *,.ssh-slime svg,.ssh-ghosts span,.ssh-fog::before,.ssh-fog::after,.ssh-embers i,.ssh-wing,.ssh-face,.ssh-eyes,.ssh-flame,.ssh-candleglow,.ssh-twinkle,.ssh-window,.ssh-drops ellipse,.ssh-count *,.ssh-on .pf-toast{animation:none!important;transition:none!important}}
.ssh-hero--home .ssh-btn--ghost{background:rgba(28,15,46,.72)}