*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font,system-ui);color:var(--text,#fff);background:radial-gradient(1200px 700px at 15% -10%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 60%),radial-gradient(1000px 700px at 100% 10%,color-mix(in srgb,var(--secondary) 24%,transparent),transparent 60%),var(--bg,#06121a);background-attachment:fixed;min-height:100vh;line-height:1.55}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 28%,transparent),transparent 65%);opacity:0;transition:opacity .4s;will-change:transform}
main,.nav,footer{position:relative;z-index:1}
main{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;margin:.2em 0;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{margin:2em 0 .6em}.meta{opacity:.65;font-size:.9rem}
.nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:14px 22px;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--primary) 25%,transparent);position:sticky;top:0;z-index:5}
.nav nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.nav nav a{color:var(--text);padding:6px 12px;border-radius:99px}.nav nav a:hover,.nav nav a.on{background:color-mix(in srgb,var(--primary) 20%,transparent);text-decoration:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--text)!important}.brand img{height:34px;border-radius:8px}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;color:#041016!important;padding:12px 24px;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 8px 28px -8px var(--primary);transition:transform .15s,box-shadow .2s}
.btn:hover{text-decoration:none;box-shadow:0 12px 34px -6px var(--primary)}.btn.small{padding:7px 16px;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--text)!important;border:1px solid var(--primary);box-shadow:none}.btn.danger{background:#b4233a;color:#fff!important}
.hero{padding:70px 0 40px;text-align:center}.hero p{font-size:1.25rem;max-width:640px;margin:.6em auto 1.4em;opacity:.85}.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.head{padding:30px 0 10px}.head p{max-width:680px;opacity:.85}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{position:relative;border-radius:20px;padding:22px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);backdrop-filter:blur(8px);overflow:hidden;transition:border-color .2s,box-shadow .2s;transform-style:preserve-3d;--mx:50%;--my:50%}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--primary) 20%,transparent),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.card:hover{border-color:color-mix(in srgb,var(--primary) 60%,transparent);box-shadow:0 18px 50px -20px var(--primary);text-decoration:none}.card:hover::before{opacity:1}
.card h3{margin:.2em 0}.product{color:var(--text);display:flex;flex-direction:column;gap:6px}.product img,.noimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:color-mix(in srgb,var(--primary) 10%,transparent);display:grid;place-items:center;font-size:3rem}
.price{font-weight:800;color:var(--primary)}.pin{font-size:.8rem;color:var(--secondary)}
.embed iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;font-weight:800;font-size:.85rem;background:#e11d48;color:#fff!important;margin-left:6px}.badge.tt{background:#111;border:1px solid var(--primary)}
.badge i{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.form{display:flex;flex-direction:column;gap:14px;max-width:620px}.form label,fieldset label{display:flex;flex-direction:column;gap:6px;font-weight:600}
input,textarea,select{font:inherit;color:var(--text);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);border-radius:12px;padding:11px 14px;width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--primary);outline-offset:1px}input[type=checkbox]{width:auto}label.check{flex-direction:row!important;align-items:center;font-weight:500!important}
input[type=color]{padding:2px;height:44px;width:80px}.colorrow{display:flex;align-items:center;gap:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.err{color:#fda4af;font-weight:700}.ok{background:color-mix(in srgb,var(--primary) 25%,transparent);padding:10px 16px;border-radius:12px}
progress{width:100%;height:16px;accent-color:var(--primary)}
.thread{display:flex;flex-direction:column;gap:12px;margin:18px 0;max-width:720px}.msg{padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--surface) 80%,transparent)}.msg.admin{background:color-mix(in srgb,var(--primary) 18%,transparent)}
.status{padding:2px 10px;border-radius:99px;font-size:.8rem;background:color-mix(in srgb,var(--secondary) 35%,transparent)}.status.open{background:#f59e0b55}.status.closed{opacity:.6}
footer{text-align:center;padding:30px 20px;opacity:.85}.socials{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.login{display:grid;place-items:center;min-height:100vh}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.card h2{margin-top:.1em}section.card{margin:18px 0}

/* ===== Esports org layout ===== */
body.es{--r:6px}
body.es .card{border-radius:var(--r)}body.es .btn{border-radius:var(--r);text-transform:uppercase;letter-spacing:.08em;font-weight:900}
body.es .nav{border-radius:0}body.es .nav nav a{text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;font-weight:700;border-radius:var(--r)}
body.es .brand{text-transform:uppercase;letter-spacing:.14em;font-weight:900}
body.es h1,body.es h2{text-transform:uppercase;letter-spacing:-.01em;font-weight:900}
.es-hero{min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:60px 0 30px}
.es-hero h1{font-size:clamp(3rem,13vw,9.5rem);line-height:.88;letter-spacing:-.04em;margin:.1em 0 .15em;word-break:break-word}
.es-hero .kicker{font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;color:var(--primary);margin:0}
.es-hero .sub{font-size:1.2rem;max-width:620px;opacity:.85;margin:0 0 1.6em}.es-hero .cta{justify-content:flex-start}
.es-sec{margin-top:80px}.es-sec>header{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid color-mix(in srgb,var(--primary) 30%,transparent);margin-bottom:22px;padding-bottom:10px}
.es-sec h2{margin:0;font-size:clamp(1.6rem,4vw,2.6rem)}.num{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--primary);font-weight:800;font-size:1rem;letter-spacing:.1em}
.programs{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.program{padding:0;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--text);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.program img,.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}.pimg{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 35%,var(--surface)),color-mix(in srgb,var(--secondary) 45%,var(--bg)))}
.program:hover img,.program:hover .pimg{transform:scale(1.07)}.program::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent),transparent 70%)}
.pbody{position:relative;z-index:2;padding:20px}.pbody h3{margin:.3em 0 0;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.chip{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--primary) 28%,transparent);border:1px solid var(--primary)}
.channels{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.channel{display:flex;justify-content:space-between;align-items:center;color:var(--text);text-transform:uppercase;letter-spacing:.08em;padding:20px}.channel span{color:var(--primary);font-size:1.3rem}
.community{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}.dwidget{width:350px;max-width:100%;height:400px;border:0;border-radius:var(--r)}
@media(max-width:760px){.community{grid-template-columns:1fr}}
.es-cta{margin-top:90px;text-align:center;padding:50px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 22%,var(--surface)),color-mix(in srgb,var(--secondary) 28%,var(--surface)))}
.es-cta h2{font-size:clamp(2rem,6vw,3.6rem);margin:.1em 0}.about-text{max-width:760px;font-size:1.1rem}

/* ===== v3: blocks, waves, animation ===== */
html{overflow-x:clip;overscroll-behavior-x:none;max-width:100%}body{overflow-x:clip;max-width:100vw}
/* page-transition wave */
#wave{position:fixed;left:0;top:-18vh;width:100%;height:136vh;z-index:100;display:flex;flex-direction:column;pointer-events:none;transform:translateY(125vh)}
#wave svg{display:block;width:100%;height:18vh;flex:none}#wave .wb{transform:rotate(180deg)}
#wave .wf{flex:1;background:linear-gradient(180deg,var(--primary),var(--secondary));display:grid;place-items:center}
#wave .wf img{width:min(220px,40vw);filter:drop-shadow(0 0 28px rgba(0,0,0,.45));animation:float 2s ease-in-out infinite}
#wave .w1{fill:var(--primary)}#wave .w2{fill:var(--secondary);opacity:.6}#wave .w3{fill:var(--secondary)}
#wave.go{transform:translateY(0);transition:transform .58s cubic-bezier(.65,0,.35,1)}
.wave-cover #wave{transform:translateY(0);transition:none}
.wave-cover #wave.leave{transform:translateY(-140vh);transition:transform .9s cubic-bezier(.65,0,.35,1)}
/* animated wave divider (blocks + footer) */
.wave-div{position:relative;height:90px;overflow:hidden;margin-top:60px;pointer-events:none}
.wave-div svg{position:absolute;left:0;bottom:0;width:200%;height:100%}
.wave-div svg:nth-child(1){animation:wv 16s linear infinite}.wave-div svg:nth-child(2){animation:wv 10s linear infinite reverse}
.wave-div .w2{fill:var(--secondary);opacity:.35}.wave-div .w1{fill:var(--primary);opacity:.32}
@keyframes wv{to{transform:translateX(-50%)}}@keyframes float{50%{translate:0 -14px}}@keyframes gshift{to{background-position:200% center}}@keyframes rise{from{opacity:0;transform:translateY(22px)}}
/* animated heading gradient, floating hero image, staggered cards */
h1{background:linear-gradient(90deg,var(--primary),var(--secondary),var(--primary));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gshift 9s linear infinite}
.nav{animation:rise .7s both}
.blk.in .grid>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.blk.in .grid>:nth-child(2){animation-delay:.08s}.blk.in .grid>:nth-child(3){animation-delay:.16s}.blk.in .grid>:nth-child(4){animation-delay:.24s}.blk.in .grid>:nth-child(n+5){animation-delay:.3s}
html.js .blk{opacity:0;transform:translateY(28px);transition:opacity .75s,transform .75s cubic-bezier(.2,.7,.2,1)}html.js .blk.in{opacity:1;transform:none}
/* block layout */
.blk{position:relative}.w-narrow{max-width:680px;margin-left:auto;margin-right:auto}
.w-wide{width:min(1400px,96vw);margin-left:calc(50% - min(700px,48vw))}.w-full,.t-wave{width:100vw;margin-left:calc(50% - 50vw)}
.a-center{text-align:center}.a-right{text-align:right}.a-center .cta{justify-content:center}.a-right .cta{justify-content:flex-end}
.a-center .es-hero-txt{align-items:center}.a-right .es-hero-txt{align-items:flex-end}
.t-heading,.t-text,.t-image,.t-button,.t-video,.t-spacer{margin-top:28px}.blk-text{max-width:760px;font-size:1.1rem;display:inline-block;text-align:inherit}
.a-center .blk-text,.a-center .blk-img{margin-left:auto;margin-right:auto}.blk-img{margin:0}.blk-img img{max-width:100%;border-radius:var(--r,14px)}.blk-img figcaption{opacity:.7;font-size:.9rem;margin-top:6px}
.video{aspect-ratio:16/9}.video iframe{width:100%;height:100%;border:0;border-radius:var(--r,14px)}
.about{display:flex;gap:24px;align-items:flex-start}.about-img{width:220px;max-width:40%;border-radius:var(--r,14px)}
.ph{padding:28px;text-align:center;border-style:dashed}.hero-img{display:block}
.es-hero{flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
.es-hero-txt{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 55%;min-width:0}
.es-hero h1{font-size:clamp(2.8rem,9vw,7rem)}
.hero-img{flex:0 1 38%;max-width:460px;width:100%;filter:drop-shadow(0 0 44px color-mix(in srgb,var(--primary) 60%,transparent));animation:float 6s ease-in-out infinite}
@media(max-width:820px){.es-hero{flex-direction:column-reverse;align-items:flex-start}.hero-img{max-width:240px}.about{flex-direction:column}}
body:not(.es) .num{display:none}body:not(.es) .es-sec>header{border:0}
.brand img{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--primary) 70%,transparent))}
.edit-pill{position:fixed;right:18px;bottom:18px;z-index:60;background:linear-gradient(90deg,var(--primary),var(--secondary));color:#041016!important;font-weight:800;padding:10px 18px;border-radius:99px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
h1,h2,h3,.brand,.btn{font-family:var(--font-head,var(--font))}
@media (prefers-reduced-motion:reduce){html.js .blk{opacity:1;transform:none}#wave{display:none}.wave-div svg,.hero-img,h1{animation:none!important}}

/* hero: never let the text column collapse, whatever alignment/width the editor sets */
.es-hero{flex-wrap:wrap}.es-hero-txt{flex:1 1 340px}.hero-img{flex:0 1 38%}
.a-center .es-hero,.w-narrow .es-hero{flex-direction:column-reverse;align-items:center;justify-content:center;text-align:center}
.a-center .es-hero-txt,.w-narrow .es-hero-txt{align-items:center;flex:0 0 auto;width:100%}.a-center .es-hero .cta,.w-narrow .es-hero .cta{justify-content:center}
.a-center .hero-img,.w-narrow .hero-img{max-width:300px}
.a-right .es-hero{flex-direction:row-reverse}

/* hero title: one word per line, sized to its column so it never breaks mid-word */
.es-hero-txt{container-type:inline-size}
.es-hero h1{line-height:.92;word-break:normal;overflow-wrap:normal;hyphens:none}
.es-hero h1 .tl{display:block}
.es-hero h1.sz1{font-size:clamp(2.4rem,15.5cqw,6.5rem)}.es-hero h1.sz2{font-size:clamp(2rem,11.5cqw,5.5rem)}.es-hero h1.sz3{font-size:clamp(1.7rem,8.6cqw,4.5rem)}
/* LIVE tab: grey offline, pulsing red when live */
.livetab{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;font-weight:900;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;background:#27313a;color:#8b979f!important;border:1px solid #3b4751;cursor:default;white-space:nowrap}
.livetab i{width:9px;height:9px;border-radius:50%;background:#66727a}.livetab small{font-size:.65rem;letter-spacing:.1em;opacity:.9}
a.livetab{cursor:pointer}a.livetab:hover{text-decoration:none;filter:brightness(1.15)}
.livetab.islive{background:#e11d48;color:#fff!important;border-color:#ff6b88;animation:livepulse 1.4s infinite}
.livetab.islive i{background:#fff;animation:pulse 1.1s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(225,29,72,.75)}70%{box-shadow:0 0 0 14px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}
.es-hero-txt{width:100%}
@media(max-width:820px){.es-hero-txt{flex:0 0 auto}}

/* Fourthwall merch cards */
.fw{gap:8px}.fwimg{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--primary) 8%,transparent)}.fwimg img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:opacity .25s}
.fwnav{position:absolute;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;font-size:1.4rem;line-height:1;background:rgba(5,12,18,.7);color:#fff;opacity:0;transition:opacity .2s}.fwnav.prev{left:8px}.fwnav.next{right:8px}.fw:hover .fwnav,.fwnav:focus-visible{opacity:1}
.swatches{display:flex;gap:8px;flex-wrap:wrap}.sw{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.35);padding:0;cursor:pointer;transition:transform .15s}.sw:hover{transform:scale(1.18)}.sw.on{outline:2px solid var(--primary);outline-offset:2px}
.cname{margin:0;font-weight:700;font-size:.9rem}.soldout{position:absolute;left:8px;top:8px;background:#000b;color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}

/* LIVE! tab sits in the middle of the menu */
.nav nav .livebadges{display:inline-flex;align-items:center;margin:0 10px}
.nav nav a.livetab{padding:6px 14px}
.nav nav a.livetab:hover{background:#27313a}.nav nav a.livetab.islive:hover{background:#e11d48}
/* login pages */
.or{text-align:center;color:var(--muted,#8b979f);margin:6px 0}.discord{display:block;text-align:center;border-color:#5865f2;color:#fff}
.admin .who{display:flex;align-items:center;gap:10px}.tablewrap{overflow-x:auto}.tbl select{min-width:90px}.inline{display:inline-block;margin:2px 4px 2px 0}
.copy{width:100%;font-size:.8rem}
body:not(.admin) .nav{display:grid;grid-template-columns:1fr auto 1fr;justify-items:start}
body:not(.admin) .nav nav{justify-self:center}.hdr-actions{justify-self:end}
@media(max-width:900px){body:not(.admin) .nav{display:flex;justify-content:space-between}.signin span{display:none}}

/* event pictures + lightbox */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:12px 0}.gal{display:block;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#0006}.gal img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.gal:hover img{transform:scale(1.07)}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(2,8,12,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}.lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 80px #000}
.partners{margin-top:40px}

/* sign in + cart */
.hdr-actions{display:flex;align-items:center;gap:8px}
.signin,.cartbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--text);font:700 .82rem var(--font);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;position:relative;text-decoration:none}
.signin:hover,.cartbtn:hover{background:color-mix(in srgb,var(--primary) 24%,transparent);text-decoration:none}
.cartbtn{padding:0 11px}.cartbtn span{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:99px;background:var(--primary);color:#04121a;font-size:.72rem;display:grid;place-items:center;padding:0 5px;letter-spacing:0}
.cart-ov{position:fixed;inset:0;background:rgba(2,8,12,.6);backdrop-filter:blur(3px);z-index:90}
.cart{position:fixed;top:0;right:0;height:100%;width:min(420px,100vw);z-index:100;background:var(--surface);border-left:1px solid color-mix(in srgb,var(--primary) 30%,transparent);transform:translateX(105%);visibility:hidden;box-shadow:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;display:flex;flex-direction:column}
.cart.open{transform:none;visibility:visible;box-shadow:-20px 0 60px #0008;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}body.cart-open{overflow:hidden}
.cart header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid color-mix(in srgb,var(--primary) 20%,transparent)}.cart header h2{margin:0;font-size:1.1rem;display:flex;gap:10px;align-items:center;color:var(--primary)}
.cart-x{width:36px;height:36px;border-radius:10px;border:1px solid #fff2;background:#fff1;color:var(--text);cursor:pointer}
.cart-body{flex:1;overflow:auto;padding:16px 20px}
.cart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;opacity:.9}.cart-empty svg{opacity:.5}.cart-empty h3{margin:8px 0 0}.cart-empty p{margin:0 0 12px;opacity:.7;max-width:260px}
.cart-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #fff1}.cart-row img{width:76px;height:76px;object-fit:cover;border-radius:10px;background:#0006}.cart-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.qty{display:flex;align-items:center;gap:10px;margin-top:4px}.qty button{width:28px;height:28px;border-radius:8px;border:1px solid #fff3;background:#fff1;color:var(--text);cursor:pointer}
.cart-foot{padding:16px 20px;border-top:1px solid color-mix(in srgb,var(--primary) 20%,transparent);display:flex;flex-direction:column;gap:10px}.cart-foot .sub{display:flex;justify-content:space-between;font-size:1.1rem}.cart-foot .btn{text-align:center}.cart-foot .link{align-self:center;background:none;border:0;color:var(--text);opacity:.6;cursor:pointer}
.buyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.szsel{background:var(--bg);color:var(--text);border:1px solid #fff3;border-radius:8px;padding:7px 9px;font:inherit}.viewlink{font-size:.8rem;opacity:.7}

/* holiday effects */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fxbanner{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:12px;padding:7px 40px;text-align:center;font-weight:800;font-size:.88rem;letter-spacing:.04em;color:#04121a;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.fxbanner button{position:absolute;right:12px;top:50%;translate:0 -50%;background:none;border:0;color:inherit;cursor:pointer;opacity:.7;font-size:1rem}
body[data-fx] .es-sec h2,body[data-fx] .head h1{text-shadow:0 0 22px color-mix(in srgb,var(--primary) 55%,transparent)}
.cart .link{background:none;border:0;color:var(--text);opacity:.6;cursor:pointer;padding:0;font-size:.8rem;text-align:left;align-self:flex-start}
.cartbtn span[hidden]{display:none}
.admin .nav{gap:8px 14px}.admin .nav nav{gap:2px}.admin .nav nav a{padding:5px 9px;font-size:.86rem}

/* whole product card opens its page on the Fourthwall store */
.fwcover{position:absolute;inset:0;z-index:1;cursor:pointer}.fwnav{z-index:2}.soldout{z-index:2;pointer-events:none}
.fwname{color:inherit;text-decoration:none}.fwname:hover{text-decoration:underline;color:var(--primary)}
/* never clip text */
h1,h2,h3,h4,p,li,label,.card,.btn,.meta,.price{overflow-wrap:anywhere;min-width:0}
.btn{white-space:normal;text-align:center;line-height:1.25;max-width:100%}
@media(max-width:900px){body:not(.admin) .nav{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:10px 14px}body:not(.admin) .nav .brand{grid-column:1;grid-row:1}body:not(.admin) .nav .hdr-actions{grid-column:2;grid-row:1}body:not(.admin) .nav nav{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:center}}

/* holiday logo looks: recolor + glow your logo to match the theme (works for any logo image) */
body[data-fx] .brand img,body[data-fx] .hero-img,body[data-fx] #wave .wf img{filter:var(--lf,none) drop-shadow(0 0 var(--lb,10px) var(--lg,transparent))}
body[data-fx] .brand img{animation:lgpulse 3.4s ease-in-out infinite}
body[data-fx] .hero-img{animation:float 6s ease-in-out infinite,lgpulse 3.4s ease-in-out infinite}
@keyframes lgpulse{0%,100%{filter:var(--lf,none) drop-shadow(0 0 var(--lb,10px) var(--lg,transparent))}50%{filter:var(--lf,none) drop-shadow(0 0 calc(var(--lb,10px) * 2.4) var(--lg2,var(--lg,transparent)))}}
body[data-fx=halloween]{--lf:saturate(2.8) hue-rotate(213deg) brightness(1.08);--lg:#ff7a18;--lg2:#8b5cf6;--lb:14px}
body[data-fx=thanksgiving]{--lf:saturate(2.8) hue-rotate(223deg) brightness(1.08);--lg:#f59e0b;--lg2:#b45309;--lb:14px}
body[data-fx=christmas]{--lf:saturate(2.8) hue-rotate(185deg) brightness(1.1);--lg:#ef4444;--lg2:#22c55e;--lb:14px}
body[data-fx=newyear]{--lf:saturate(2.8) hue-rotate(233deg) brightness(1.15);--lg:#facc15;--lg2:#38bdf8;--lb:16px}
body[data-fx=valentines]{--lf:saturate(2.8) hue-rotate(160deg) brightness(1.1);--lg:#ff4d8d;--lg2:#a855f7;--lb:14px}
body[data-fx=stpatrick]{--lf:saturate(2.8) hue-rotate(315deg) brightness(1.08);--lg:#22c55e;--lg2:#facc15;--lb:14px}
body[data-fx=spring]{--lf:saturate(2.6) hue-rotate(145deg) brightness(1.12);--lg:#f472b6;--lg2:#34d399;--lb:14px}
body[data-fx=july4]{--lf:saturate(2.8) hue-rotate(40deg) brightness(1.1);--lg:#ef4444;--lg2:#3b82f6;--lb:14px}
body[data-fx=summer]{--lf:saturate(1.7) brightness(1.1);--lg:#f59e0b;--lg2:#06b6d4;--lb:14px}
@media (prefers-reduced-motion:reduce){body[data-fx] .brand img{animation:none}}

/* log in / sign up pages */
.login{padding:20px 16px;box-sizing:border-box}
.authwrap{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:16px}.authwrap .card{width:100%;box-sizing:border-box}
.authbrand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text)!important;text-decoration:none}.authbrand img{height:42px;border-radius:10px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--primary) 60%,transparent))}
.login .card h1{font-size:clamp(1.7rem,7vw,2.2rem);line-height:1.25;padding-bottom:.14em;margin:.1em 0 .2em;overflow:visible;text-transform:none;letter-spacing:-.01em}
.login .card .meta{margin:0 0 .4em}.login .card .btn{width:100%;box-sizing:border-box;text-align:center}

.pgname{width:11rem;max-width:100%}
h1{line-height:1.2;padding-bottom:.12em}

.tfrules{border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);border-radius:12px;padding:.8rem 1rem;margin-bottom:.6rem}.tfrules h3{margin:.1em 0 .3em}.tfmulti{border:0;padding:0;margin:0}.tfmulti legend{padding:0;margin-bottom:.3rem}


/* page-transition wave: freeze the page's own looping animations underneath so the wave stays smooth */
html.wvbusy .deco *,html.wvbusy .oceanfx *,html.wvbusy .fxbanner *{animation-play-state:paused!important}

/* ---- product page ---- */
.pd{width:min(1120px,100%);margin:0 auto}
.crumb{display:flex;gap:10px;align-items:center;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 22px;opacity:.9}.crumb a{color:inherit;opacity:.7}.crumb a:hover{opacity:1;color:var(--primary);text-decoration:none}.crumb span{opacity:.4}.crumb b{font-weight:800}
.pdgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start}
.pdgal{position:sticky;top:90px;min-width:0}
.pdmain{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--surface) 70%,#000);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);display:grid;place-items:center}
.pdmain img{width:100%;height:100%;object-fit:contain;transition:opacity .2s}
.pdmain .fwnav{opacity:.0}.pdmain:hover .fwnav,.pdmain .fwnav:focus-visible{opacity:1}
.pdthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;margin-top:12px}
.pdt{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:color-mix(in srgb,var(--surface) 70%,#000);transition:border-color .15s,transform .15s}.pdt:hover{transform:translateY(-2px)}.pdt.on{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)}
.pdt img{width:100%;height:100%;object-fit:cover;display:block}
.pdinfo{min-width:0}.pdinfo h1{margin:.15em 0 .3em;font-size:clamp(1.8rem,4.2vw,2.8rem);line-height:1.15;padding-bottom:.1em}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#34d399}.stock i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.stock.no{color:#f87171}
.pddesc{opacity:.85;line-height:1.55;margin:0 0 14px}
.pdbuy{padding:22px;margin:14px 0 16px;display:flex;flex-direction:column;gap:18px}.pdbuy:hover{box-shadow:none}
.pdprice{font-size:clamp(1.7rem,3.4vw,2.2rem);font-weight:900}
.pdopt .lbl{margin:0 0 10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}.pdopt .lbl b{margin-left:6px;letter-spacing:0;text-transform:none;font-size:.95rem}
.pdbuy .sw{width:32px;height:32px}
.pdsz{display:flex;flex-wrap:wrap;gap:8px}.pdsb{min-width:46px;padding:10px 14px;border-radius:8px;border:1px solid #fff3;background:#ffffff0d;color:var(--text);font:inherit;font-weight:800;font-size:.82rem;cursor:pointer;transition:background .15s,border-color .15s}.pdsb:hover:not(:disabled){border-color:var(--primary)}.pdsb.on{background:var(--primary);border-color:var(--primary);color:#041016}.pdsb.out{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.pdcta{display:flex;gap:12px;align-items:stretch}.pdadd{flex:1;padding:14px 20px;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase}.pdadd:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.pdqty{display:flex;align-items:center;border:1px solid #fff3;border-radius:10px;background:#ffffff0d}.pdqty button{width:40px;align-self:stretch;border:0;background:none;color:var(--text);font-size:1.2rem;cursor:pointer}.pdqty button:hover{color:var(--primary)}.pdqty span{min-width:30px;text-align:center;font-weight:800}
.pdadded{margin:-6px 0 0;color:#34d399;font-size:.85rem}
.pdtrust{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;font-size:.9rem;opacity:.85}.pdtrust li{display:flex;gap:10px;align-items:center}.pdtrust li::before{content:"✓";color:var(--primary);font-weight:900}
.pdacc{border-top:1px solid #fff2}.pdd{border-bottom:1px solid #fff2}
.pdd summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 4px;font-weight:900;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}.pdd summary::-webkit-details-marker{display:none}
.pdd summary::after{content:"+";color:var(--primary);font-size:1.2rem;font-weight:700}.pdd[open] summary::after{content:"–"}
.pdbody{padding:0 4px 20px;opacity:.82;line-height:1.6;font-size:.92rem}.pdbody ul,.pdbody ol{margin:.3em 0;padding-left:1.2em}.pdbody img{max-width:100%;border-radius:10px}
.pdext{display:inline-block;margin-top:16px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.pdext:hover{opacity:1;color:var(--primary);text-decoration:none}
@media(max-width:820px){.pdgrid{grid-template-columns:1fr}.pdgal{position:static}.pdmain{aspect-ratio:1}.pdmain .fwnav{opacity:1}}

/* event card banner picture (first uploaded picture) */
.ann .annimg{aspect-ratio:16/9;margin:-22px -22px 14px;border-radius:0;max-height:260px;width:calc(100% + 44px)}.ann .annimg img{height:100%}
.donate-main{font-size:1.15rem;padding:15px 34px;margin-top:6px}

/* Live page: Twitch horizontal 16:9, TikTok vertical 9:16, side by side with equal height */
.lvgrid{display:grid;grid-template-columns:256fr 81fr;gap:24px;align-items:start;width:min(1200px,100%);margin:0 auto 48px}
.lvpanel{min-width:0}.lvpanel header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;margin-bottom:10px;min-height:68px;align-content:start}.lvfmt{grid-column:1/-1;justify-self:start}.lvpanel h2{margin:0;font-size:1.3rem}
.lvfmt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);opacity:.9}
.lvstat{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;opacity:.75}.lvstat i{width:9px;height:9px;border-radius:50%;background:#6b7a85}.lvstat.on{opacity:1;color:#ff5a5f}.lvstat.on i{background:#ff2d3a;box-shadow:0 0 10px #ff2d3a;animation:lvp 1.4s infinite}
@keyframes lvp{50%{opacity:.35}}
.lvscreen{position:relative;border-radius:16px;overflow:hidden;background:#04090d;border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.lvscreen.h{aspect-ratio:16/9}.lvscreen.v{aspect-ratio:9/16}.lvscreen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lvempty,.lvphone{display:grid;place-items:center;text-align:center;padding:16px}.lvphone{position:absolute;inset:0;align-content:center;gap:12px;background:linear-gradient(160deg,#0b1a22,#05090d)}.lvphone b{font-size:1.6rem}
.lvpanel p{margin:10px 0 0}
@media(max-width:900px){.lvgrid{grid-template-columns:1fr}.lvtt{width:min(360px,100%);margin:0 auto}}

/* ambient sound button (top bar) */
.sndbtn{display:inline-flex;align-items:center;justify-content:center;position:relative;width:38px;height:38px;padding:0;border-radius:99px;border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--text);cursor:pointer;transition:background .2s}
.sndbtn:hover{background:color-mix(in srgb,var(--primary) 24%,transparent)}
.sndbtn .si-off,.sndbtn.muted .si-on{display:none}.sndbtn.muted .si-off{display:block}.sndbtn.muted{opacity:.7}
.sndbtn.wait::after{content:"";position:absolute;inset:-4px;border-radius:99px;border:2px solid var(--primary);opacity:0;animation:sndping 1.8s ease-out infinite}
@keyframes sndping{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.sndbtn.wait::after{animation:none}}

/* volume: drops down under the speaker icon on hover / focus (press-and-hold on phones) */
.sndwrap{position:relative;display:inline-flex}
.sndpop{position:absolute;top:100%;right:-8px;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:120}
.sndwrap:hover .sndpop,.sndwrap:has(:focus-visible) .sndpop,.sndwrap.open .sndpop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sndbox{width:200px;padding:14px 16px 16px;border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,#000);border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);box-shadow:0 16px 44px -10px rgba(0,0,0,.8);backdrop-filter:blur(10px)}
.sndlbl{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:700 .72rem var(--font);letter-spacing:.14em;text-transform:uppercase}.sndlbl b{color:var(--primary);letter-spacing:0;font-size:.85rem}
.sndwrap .sndvol{-webkit-appearance:none;appearance:none;display:block;width:100%;height:5px!important;padding:0!important;border:0!important;margin:0;min-height:0!important;box-shadow:none!important;border-radius:99px;background:color-mix(in srgb,var(--primary) 30%,transparent);cursor:pointer;accent-color:var(--primary);outline:none}
.sndvol::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);border:2px solid var(--bg);box-shadow:0 0 10px var(--primary)}
.sndvol::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);border:2px solid var(--bg)}
.sndvol:focus-visible{outline:2px solid var(--primary);outline-offset:6px}
@media(max-width:900px){.sndpop{right:-60px}}

/* big headings: room around the letters so tall, swashy or slanted fonts are never cut off
   (the gradient only paints inside the heading's own box). Padding is cancelled by negative margins, so spacing stays the same. */
h1{--hp:.46em;--hs:.3em;padding:var(--hp) var(--hs);margin:calc(.2em - var(--hp)) calc(0px - var(--hs))}
.es-hero h1{margin:calc(.1em - var(--hp)) calc(0px - var(--hs)) calc(.15em - var(--hp))}
.pdinfo h1{padding:var(--hp) var(--hs);margin:calc(.15em - var(--hp)) calc(0px - var(--hs)) calc(.3em - var(--hp))}
.login .card h1{padding:var(--hp) var(--hs);margin:calc(.1em - var(--hp)) calc(0px - var(--hs)) calc(.2em - var(--hp))}

/* creators & friends (public) */
.crgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.crcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.cravatar{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 40%,var(--surface)),color-mix(in srgb,var(--secondary) 45%,var(--bg)));font-size:1.8rem;font-weight:800;border:2px solid color-mix(in srgb,var(--primary) 45%,transparent)}.cravatar img{width:100%;height:100%;object-fit:cover}
.crcard h3{margin:.2em 0 0}.crcard p{margin:0}
.crcard .btn{white-space:nowrap;font-size:.8rem;padding:8px 14px}

/* live badge is a plain indicator (not a link) */
.livetab{cursor:default}
/* Watch page: main stream big, friends below */
.watchmain{width:min(1100px,100%);margin:0 auto 14px}.watchmain.v{width:min(380px,100%)}.watchmain .lvpanel header{min-height:0}
.watchalso{width:min(1100px,100%);margin:0 auto 10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.watchfriends{width:min(1100px,100%);margin:36px auto 48px}.watchfriends h2{margin-bottom:.1em}

/* custom offline screen */
.lvoff{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--primary) 22%,#04090d),#04090d 70%)}
.lvoff img{width:min(34%,220px);max-height:50%;object-fit:contain;filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--primary) 45%,transparent))}
.lvoff b{font-size:clamp(1.2rem,3.4vw,2.2rem);letter-spacing:.14em;text-transform:uppercase}.lvoff span{opacity:.6;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}
.lvscreen.v.lvoff img{width:min(55%,180px)}.lvscreen.v.lvoff b{font-size:1.3rem}
.lvforce{margin-top:10px}.lvforce summary{cursor:pointer;opacity:.6;font-size:.8rem}.lvforce .lvscreen{margin-top:10px}