/* TWISTERS | Standalone StreamWave Community Suite theme | 1.0.0 */
:root{--tw-bg:#09101c;--tw-panel:#131e2d;--tw-border:#68768a;--tw-text:#f5f5fc;--tw-muted:#cad0df;--tw-glow:#c39ff3}
body.swft-twisters{--swft-bg:#09101c;--swft-panel:#131e2d;--swft-hero:#18283c;--swft-border:#728199;--swft-text:#f5f5fc;--swft-muted:#cbd2e1;--swft-link:#e4cfff;--swft-accent:#ad83e9;--swft-field:#0d1828;color-scheme:dark!important;background:#080d18 url('assets/twisters-background.webp') center top/cover fixed no-repeat!important;color:#f5f5fc!important}
body.swft-twisters .swf{--swft-panel:#131e2d;--swft-border:#728199;--swft-accent:#ad83e9;background:transparent!important;color:#f5f5fc!important}
body.swft-twisters .swf .hero{position:relative!important;overflow:hidden!important;min-height:310px!important;background:linear-gradient(90deg,rgba(6,10,20,.88),rgba(8,13,25,.55) 55%,rgba(10,12,20,.27)),url('assets/twisters-hero.webp') center 43%/cover no-repeat!important;border:2px solid #8e82a5!important;border-radius:18px!important;box-shadow:0 0 0 2px #121d32,0 16px 45px #000c!important}
body.swft-twisters .swf .hero:after{content:''!important;position:absolute!important;right:4%!important;top:8%!important;left:auto!important;bottom:auto!important;width:160px!important;height:180px!important;background:url('assets/twister.svg') center/contain no-repeat!important;opacity:.45!important;pointer-events:none!important;animation:tw-hero 8s ease-in-out infinite!important}
body.swft-twisters .swf .hero :is(h1,h2,h3,p,.muted){color:#fff!important;text-shadow:0 3px 8px #03030b,0 0 18px #090b16!important}
body.swft-twisters :is(.swf .panel,.swf .side-panel,.swf .swf-category,.csw-widget){background:linear-gradient(145deg,rgba(17,27,42,.97),rgba(24,27,43,.96))!important;color:#f5f5fc!important;border:1px solid #75809b!important;border-radius:15px!important;box-shadow:0 10px 28px #000a,inset 0 1px #ffffff18!important}
body.swft-twisters .swf .swf-category{overflow:hidden!important;margin-bottom:20px!important}
/* Animated funnel travels across every category header. Text stays above the animation. */
body.swft-twisters .swf .swf-category-head{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:64px!important;padding:18px 24px!important;background:linear-gradient(90deg,#151d2cf5,#353147e8 48%,#161f33f5),url('assets/twisters-hero.webp') center/cover!important;border:0!important;border-bottom:3px solid #b3a0d0!important;color:#fff!important;text-shadow:0 2px 5px #000!important}
body.swft-twisters .swf .swf-category-head:before{content:''!important;position:absolute!important;z-index:-1!important;top:-25px!important;left:-220px!important;width:190px!important;height:125px!important;background:url('assets/twister.svg') center/contain no-repeat!important;opacity:.7!important;animation:tw-cross 14s linear infinite!important;pointer-events:none!important}
body.swft-twisters .swf .swf-category-head:after{content:''!important;position:absolute!important;z-index:-1!important;inset:0!important;background:repeating-linear-gradient(112deg,transparent 0 44px,#d3c4ff0b 46px 48px,transparent 52px 100px)!important;background-size:240px 100%!important;animation:tw-wind 4s linear infinite!important;pointer-events:none!important}
body.swft-twisters .swf .swf-category-head :is(span,small,h2,h3,a){position:relative!important;z-index:2!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 5px #000!important}
/* Panel headings also receive a visible, animated tornado. */
body.swft-twisters .swf :is(.panel>h2,.side-panel>h3,.side-panel>h2,.panel>h3){position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:44px!important;padding:11px 16px!important;margin:-10px -10px 15px!important;border-radius:9px!important;background:linear-gradient(95deg,#202a3c,#38334a,#172338)!important;border-bottom:2px solid #a999c8!important;color:#fff!important;text-shadow:0 2px 5px #000!important}
body.swft-twisters .swf :is(.panel>h2,.side-panel>h3,.side-panel>h2,.panel>h3):after{content:''!important;position:absolute!important;z-index:-1!important;top:-34px!important;left:-180px!important;width:170px!important;height:110px!important;background:url('assets/twister.svg') center/contain no-repeat!important;opacity:.65!important;animation:tw-cross 12s linear infinite!important;pointer-events:none!important}
body.swft-twisters .swf :is(.swf-forum-node,.swf-forum-row,.item,.post,.card,.topic-row,.thread-row){background:linear-gradient(120deg,#182537,#202638)!important;color:#f5f5fc!important;border-color:#48556e!important;box-shadow:none!important}
body.swft-twisters .swf :is(.swf-forum-row,.item,.topic-row):hover{background:#2b3449!important;border-color:#b6a0e2!important}
body.swft-twisters .swf .swf-forum-icon{background:linear-gradient(135deg,#30354b,#654b83)!important;border:1px solid #aa9cc5!important;color:#fff!important}
body.swft-twisters .swf :is(h1,h2,h3,h4,strong,.swf-forum-name){color:#f9f7ff!important;-webkit-text-fill-color:currentColor!important}
body.swft-twisters .swf :is(p,.muted,.postbody,.swf-forum-main p,.item .meta,.swf-member-signature,.swf-forum-count span){color:#d5d9e5!important;opacity:1!important}
body.swft-twisters .swf :is(a,.swf-forum-name){color:#dcc6ff!important;-webkit-text-fill-color:currentColor!important;opacity:1!important}
body.swft-twisters .swf a:hover{color:#fff!important;text-shadow:0 0 8px #b49fe4!important}
body.swft-twisters .swf :is(.swf-subforum-links a,.pager a,.pill){background:#2b3149!important;color:#f2eaff!important;border:1px solid #6f7295!important}
body.swft-twisters .swf :is(input,textarea,select,.swf-editor-preview,.swf-picker,.swatt-list){background:#0b1627!important;color:#fff!important;border:1px solid #8990ab!important}
body.swft-twisters .swf :is(input,textarea)::placeholder{color:#bec4d3!important;opacity:1!important}
body.swft-twisters :is(.swf,.swmag,main,header,nav,aside,.csw-widget) :is(a.btn,a.button,a[role='button'],a[class*='btn-'],a[class*='button-'],button,input[type='submit'],input[type='button'],.btn,.button){background:linear-gradient(115deg,#3a3855,#72568d 52%,#3d4a68)!important;border:1px solid #c7b5e2!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 3px #000!important;font-weight:750!important;box-shadow:0 3px 12px #0006!important}
body.swft-twisters :is(.swf,.swmag,main,header,nav,aside,.csw-widget) :is(a.btn,a.button,a[role='button'],button,input[type='submit'],.btn):hover{background:linear-gradient(115deg,#55496e,#9877ba,#425a79)!important;border-color:#fff!important}
body.swft-twisters .swf :is(.swf-reaction,.swf-editor-tools button){background:#29364c!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
body.swft-twisters .swf .side-panel a{color:#e0d0ff!important}
body.swft-twisters :is(a,button,input,textarea,select):focus-visible{outline:3px solid #d2b2ff!important;outline-offset:2px!important}
@keyframes tw-cross{0%{left:-220px;transform:rotate(-7deg) scale(.86)}48%{transform:rotate(6deg) scale(1.03)}100%{left:calc(100% + 30px);transform:rotate(-5deg) scale(.88)}}
@keyframes tw-wind{from{background-position:0 0}to{background-position:240px 0}}
@keyframes tw-hero{0%,100%{transform:translateX(-8px) rotate(-7deg)}50%{transform:translateX(16px) rotate(7deg)}}
@media(max-width:700px){body.swft-twisters{background-attachment:scroll!important;background-size:auto 100vh!important}body.swft-twisters .swf .hero{min-height:230px!important}body.swft-twisters .swf .swf-category-head{padding:16px!important}}
@media(prefers-reduced-motion:reduce){body.swft-twisters *,body.swft-twisters *:before,body.swft-twisters *:after{animation:none!important;transition:none!important}}

/* v1.1: highly visible cinematic storm artwork in all header bands */
body.swft-twisters .swf .swf-category-head{
 min-height:90px!important;padding:25px 26px!important;
 background:linear-gradient(90deg,rgba(8,13,25,.78) 0%,rgba(13,18,31,.36) 45%,rgba(10,13,27,.62) 100%),url('assets/twisters-hero.webp') center 48%/cover no-repeat!important;
 border-bottom:4px solid #b9a2eb!important;box-shadow:inset 0 0 24px #080e21,0 4px 16px #0009!important;
}
body.swft-twisters .swf .swf-category-head:before{
 z-index:1!important;top:-34px!important;left:-310px!important;width:280px!important;height:155px!important;
 background:url('assets/twister.svg') center/contain no-repeat!important;opacity:1!important;
 filter:drop-shadow(0 0 10px #d2bcff) drop-shadow(0 2px 8px #000)!important;
 animation:tw-bold-cross 12s linear infinite!important;
}
body.swft-twisters .swf .swf-category-head:after{
 z-index:0!important;background:linear-gradient(110deg,transparent 8%,#bba5ed23 45%,transparent 70%)!important;
 animation:tw-lightning 5.5s ease-in-out infinite!important;
}
body.swft-twisters .swf .swf-category-head :is(span,small,h2,h3,a){z-index:3!important;text-shadow:0 2px 6px #000,0 0 13px #050819!important;font-weight:800!important}
body.swft-twisters .swf :is(.panel>h2,.side-panel>h3,.side-panel>h2,.panel>h3){
 min-height:64px!important;padding:18px 19px!important;
 background:linear-gradient(90deg,rgba(9,14,27,.76),rgba(15,17,32,.28),rgba(8,13,28,.64)),url('assets/twisters-hero.webp') center 44%/cover no-repeat!important;
 border-bottom:3px solid #b5a0dd!important;box-shadow:inset 0 0 18px #090b1b!important;
}
body.swft-twisters .swf :is(.panel>h2,.side-panel>h3,.side-panel>h2,.panel>h3):after{
 z-index:1!important;top:-32px!important;left:-260px!important;width:240px!important;height:130px!important;
 opacity:1!important;filter:drop-shadow(0 0 8px #d8c4ff) drop-shadow(0 2px 7px #000)!important;
 animation:tw-bold-cross 11s linear infinite!important;
}
body.swft-twisters .swf :is(.panel>h2,.side-panel>h3,.side-panel>h2,.panel>h3){text-shadow:0 2px 7px #000,0 0 8px #000!important}
@keyframes tw-bold-cross{0%{left:-310px;transform:rotate(-8deg) scale(.95)}50%{transform:rotate(8deg) scale(1.1)}100%{left:calc(100% + 20px);transform:rotate(-5deg) scale(.95)}}
@keyframes tw-lightning{0%,86%,92%,100%{opacity:.18}88%,90%{opacity:.9}}
@media(prefers-reduced-motion:reduce){body.swft-twisters .swf .swf-category-head:before,body.swft-twisters .swf :is(.panel>h2,.side-panel>h3,.side-panel>h2,.panel>h3):after{left:60%!important;animation:none!important}}