:root{--bg:#07080c;--panel:#0c0e14;--panel2:#11141c;--text:#f7f8fb;--muted:#8b91a1;--line:rgba(255,255,255,.09);--purple:#8b5cf6;--violet:#b66cff;--cyan:#4de7ff;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}
/* iOS Safari auto-zooms the whole page in when a focused input's font-size is under 16px -
   force every text field to 16px+ on mobile so tapping into any form never resizes the page. */
@media(max-width:700px){input,textarea,select{font-size:16px!important}}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-header{height:78px;position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(var(--max),calc(100% - 48px));z-index:10;display:flex;align-items:center;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:6px;font:800 19px/1 Orbitron;letter-spacing:.5px;white-space:nowrap}.logo-mark{width:34px;height:34px;display:block;object-fit:contain}.accent{color:var(--violet)}.desktop-nav{margin:auto;display:flex;gap:16px;font-size:13px;color:#b0b4c0}.desktop-nav a,.footer a{transition:.2s}.desktop-nav a:hover,.footer a:hover{color:var(--violet)}.header-actions{display:flex;align-items:center;gap:18px;font-size:12px}.discord-link{font-weight:700}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6dff9c;box-shadow:0 0 10px #6dff9c;margin-right:6px}.account-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:white;border-radius:4px;padding:10px 14px;cursor:pointer}.account-btn span{color:#5d6270}.menu-btn,.mobile-nav{display:none}.hero{position:relative;min-height:560px;height:68vh;max-height:660px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 42%,rgba(115,67,205,.18),transparent 35%),linear-gradient(110deg,#07080c 30%,#0a0c13)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,12,.96) 0%,rgba(7,8,12,.4) 60%,rgba(7,8,12,.65)),repeating-linear-gradient(90deg,transparent 0,transparent 99px,rgba(255,255,255,.018) 100px)}.hero-copy{z-index:2;width:min(var(--max),calc(100% - 48px));margin:auto}.hero-copy>*{max-width:720px}.eyebrow,.kicker{font-size:11px;font-weight:800;letter-spacing:2.2px;color:#b6a2ef}.eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:24px}.eyebrow-line{width:34px;height:1px;background:var(--violet)}h1,h2,h3{font-family:Space Grotesk;margin:0}h1{font-size:clamp(63px,7.2vw,108px);line-height:.93;letter-spacing:-4px;max-width:820px!important}h1 span,h2 em{font-style:normal;background:linear-gradient(90deg,#ac76ff,#5be7ff);-webkit-background-clip:text;color:transparent}.hero-copy>p{color:#a2a7b4;font-size:17px;line-height:1.7;margin:28px 0 34px;max-width:610px}.hero-actions{display:flex;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:15px 21px;border:1px solid var(--line);border-radius:3px;text-transform:uppercase;letter-spacing:1.3px;font-size:11px;font-weight:800;transition:.25s}.btn:hover{transform:translateY(-2px);border-color:rgba(182,108,255,.6)}.btn-primary{background:linear-gradient(100deg,#7141ce,#9a59e7);box-shadow:0 12px 40px rgba(139,92,246,.25)}.btn-primary span{font-size:16px}.btn-ghost{background:rgba(255,255,255,.025)}.play{font-size:9px;width:22px;height:22px;border-radius:50%;border:1px solid #777e8c;display:grid;place-items:center}.trust-row{display:flex;gap:28px;margin-top:44px;color:#7f8491;font-size:10px;text-transform:uppercase;letter-spacing:1px}.trust-row span:first-child{color:#a895d9}.hero-visual{position:absolute;right:4%;top:17%;width:46vw;height:66vh;max-width:670px;max-height:670px;z-index:1;display:grid;place-items:center}.core-ring{position:absolute;border-radius:50%;border:1px solid rgba(151,99,255,.22)}.ring-outer{width:96%;height:96%;border-style:dashed;animation:spin 30s linear infinite}.ring-middle{width:74%;height:74%;box-shadow:0 0 80px rgba(139,92,246,.12) inset}.ring-inner{width:49%;height:49%;border-color:rgba(77,231,255,.28);animation:pulse 3s ease-in-out infinite}.core{width:220px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);background:radial-gradient(circle,#342354,#14111d 65%);border:1px solid var(--purple);box-shadow:0 0 80px rgba(139,92,246,.5);font:600 20px Space Grotesk;letter-spacing:6px}.core b{font-size:33px;color:#bc8bff}.core small{font:500 7px Inter;letter-spacing:3px;color:var(--cyan);margin-top:15px}.hud{position:absolute;padding:10px 16px;border-left:2px solid var(--purple);background:rgba(12,14,20,.82);font-size:9px;letter-spacing:1.5px}.hud small{display:block;color:#777f90;margin-bottom:4px}.hud b{color:var(--cyan)}.hud-one{top:18%;right:5%}.hud-two{bottom:15%;left:6%}.orb{position:absolute;border-radius:50%;filter:blur(50px)}.orb-one{right:17%;top:24%;width:300px;height:300px;background:rgba(139,92,246,.12)}.orb-two{right:2%;bottom:4%;width:250px;height:250px;background:rgba(77,231,255,.06)}.grid-floor{position:absolute;right:-10%;bottom:-27%;width:70%;height:65%;transform:perspective(400px) rotateX(60deg);background:linear-gradient(rgba(139,92,246,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.12) 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(black,transparent)}.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;color:#686e7c;font-size:8px;letter-spacing:2px}.scroll-cue i{font-style:normal;font-size:16px}.section{padding:115px max(24px,calc((100% - var(--max))/2))}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px}.section-heading h2,.center-heading h2,.cta h2{font-size:clamp(38px,4.5vw,62px);line-height:1.04;letter-spacing:-2px;margin-top:12px}.section-heading>p{max-width:430px;color:var(--muted);line-height:1.7;font-size:14px}.products{background:linear-gradient(#090b10,#07080c)}.shop-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:20px}.search{height:44px;width:320px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#0d1017;padding:0 14px;color:#707787}.search input{border:0;outline:0;background:none;color:white;width:100%;font-size:12px}.filters{display:flex;gap:7px}.filters button{background:#0d1017;border:1px solid var(--line);color:#777e8c;padding:10px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;cursor:pointer}.filters button.active,.filters button:hover{color:white;border-color:#7850bb;background:rgba(139,92,246,.1)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product-card{position:relative;background:var(--panel);border:1px solid var(--line);transition:.3s;overflow:hidden}.product-card:hover{transform:translateY(-7px);border-color:rgba(139,92,246,.5);box-shadow:0 20px 60px rgba(0,0,0,.35)}.product-card.hidden{display:none}.tag{position:absolute;z-index:2;top:14px;left:14px;padding:7px 9px;background:#8252d3;font-size:8px;letter-spacing:1.2px;font-weight:800}.tag.purple{background:#a55ad8}.tag.cyan{background:#387d91}.product-art{height:255px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at center,rgba(139,92,246,.2),transparent 58%),#090b10}.product-art:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px}.art-card b{position:relative;width:150px;height:105px;border-radius:5px;display:grid;place-items:center;color:#b884ff;font:700 33px Space Grotesk;border:1px solid #7345af;background:linear-gradient(140deg,#22202a,#0c0e12);box-shadow:0 20px 50px #000,0 0 30px rgba(139,92,246,.2);transform:perspective(600px) rotateX(55deg) rotateZ(-30deg)}.art-screen span{z-index:1;padding:42px 29px;border:1px solid #4f386d;background:rgba(14,14,22,.9);color:#bc87ff;font:700 20px Space Grotesk;letter-spacing:4px;box-shadow:0 0 40px rgba(139,92,246,.2)}.art-bundle .bundle-box{z-index:1;width:108px;height:145px;background:linear-gradient(145deg,#312447,#11141b);border:1px solid #7654a2;display:grid;place-items:center;color:#b983ff;font:700 38px Space Grotesk;transform:rotate(-9deg)}.bundle-chip{z-index:2;margin-left:-30px;margin-bottom:-70px;padding:22px 13px;background:#11151b;border:1px solid #437380;color:var(--cyan);font-size:8px}.product-info{padding:25px}.product-info small{color:#71618f;font-size:8px;letter-spacing:1.5px}.product-info h3{font-size:20px;margin-top:7px}.product-info p{font-size:12px;color:var(--muted);line-height:1.65;min-height:40px}.product-info footer{border-top:1px solid var(--line);padding-top:19px;margin-top:20px;display:flex;align-items:center;justify-content:space-between}.product-info strong{font:600 15px Space Grotesk}.product-info button{width:34px;height:34px;color:white;background:#151820;border:1px solid var(--line);cursor:pointer}.view-all{text-align:center;margin-top:38px}.view-all a{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid #764db0;padding-bottom:7px}.view-all span{margin-left:12px;color:var(--violet)}.stats{min-height:170px;border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:0 max(24px,calc((100% - var(--max))/2));background:#090a0e}.stats div{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;align-content:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats b,.stats span{font:700 37px Space Grotesk}.stats span{color:var(--violet)}.stats small{flex-basis:100%;text-align:center;margin-top:8px;color:#686e7c;font-size:8px;letter-spacing:1.8px}.features{background:radial-gradient(circle at 60% 30%,rgba(113,61,190,.08),transparent 38%)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.feature-card{position:relative;min-height:250px;padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.3s}.feature-card:hover{background:rgba(139,92,246,.055)}.feature-card>b{position:absolute;right:25px;top:25px;color:#30343e;font:500 12px Space Grotesk}.icon{display:grid;place-items:center;width:45px;height:45px;border:1px solid #604887;background:rgba(139,92,246,.08);color:#b87cff;margin-bottom:38px}.feature-card h3{font-size:18px}.feature-card p{font-size:12px;color:var(--muted);line-height:1.7;max-width:300px}.steps{background:#090b10}.center-heading{text-align:center}.center-heading p{color:var(--muted);font-size:13px}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px}.step-grid article{text-align:center;position:relative;padding:20px 50px}.step-grid article:not(:last-child):after{content:"";position:absolute;top:72px;right:-16%;width:32%;height:1px;background:linear-gradient(90deg,#7445b7,transparent)}.step-grid article>span{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font:700 80px Space Grotesk;color:rgba(255,255,255,.025)}.step-icon{position:relative;margin:0 auto 25px;width:86px;height:86px;display:grid;place-items:center;border:1px solid #594076;transform:rotate(45deg);color:#bd83ff;font-size:23px;background:#0c0d14;box-shadow:0 0 30px rgba(139,92,246,.08)}.step-icon::first-letter{transform:rotate(-45deg)}.step-grid h3{font-size:19px}.step-grid p{color:var(--muted);font-size:12px;line-height:1.7}.cta{min-height:520px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(rgba(7,8,12,.2),#08090d),radial-gradient(ellipse at center,rgba(102,57,175,.22),transparent 55%)}.cta:before,.cta:after{content:"";position:absolute;width:400px;height:400px;border:1px solid rgba(139,92,246,.12);transform:rotate(45deg)}.cta:before{left:-240px}.cta:after{right:-240px}.cta>div:not(.cta-glow){position:relative;z-index:2}.cta p{color:var(--muted);font-size:13px;max-width:560px;line-height:1.7;margin:22px auto 30px}.cta .hero-actions{justify-content:center}.footer{padding:72px max(24px,calc((100% - var(--max))/2)) 25px;background:#06070a;border-top:1px solid var(--line)}.footer-main{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:60px;padding-bottom:60px}.footer-brand p{color:#6f7583;max-width:350px;font-size:11px;line-height:1.8;margin-top:20px}.footer h4{font:600 11px Space Grotesk;text-transform:uppercase;letter-spacing:1.4px;margin:0 0 20px}.footer-main>div:not(.footer-brand){display:flex;flex-direction:column;gap:13px}.footer-main>div:not(.footer-brand) a{color:#717784;font-size:11px}.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;color:#515662;font-size:9px;text-transform:uppercase;letter-spacing:1px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.05);box-shadow:0 0 50px rgba(77,231,255,.12)}}
@media(max-width:1000px){.desktop-nav,.discord-link{display:none}.header-actions{margin-left:auto}.menu-btn{display:flex;width:40px;height:35px;border:0;background:none;flex-direction:column;justify-content:center;gap:7px}.menu-btn i{height:1px;width:24px;background:white}.mobile-nav{display:none;position:absolute;top:78px;left:0;right:0;padding:20px;background:#0a0c11;border:1px solid var(--line);flex-direction:column;gap:18px}.mobile-nav.open{display:flex}.hero-visual{opacity:.45;right:-16%;width:65vw}.product-grid{grid-template-columns:repeat(2,1fr)}.product-card:last-child{grid-column:span 2}.feature-grid{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:2fr 1fr 1fr}.footer-main>div:last-child{display:none}}
@media(max-width:700px){.account-btn{display:none}.hero{min-height:760px}.hero-copy{width:calc(100% - 32px);padding-top:50px}.hero-visual{width:100vw;height:100vw;right:-42%;top:22%;opacity:.28}h1{font-size:49px;letter-spacing:-2.6px}.hero-copy>p{font-size:14px;max-width:90%}.hero-actions{flex-direction:column;align-items:stretch}.btn{width:100%}.trust-row{gap:12px;flex-wrap:wrap}.scroll-cue{display:none}.section{padding:80px 16px}.section-heading{display:block}.section-heading>p{margin-top:25px}.shop-bar{align-items:stretch;flex-direction:column}.search{width:100%}.filters{overflow-x:auto}.filters button{white-space:nowrap}.product-grid{grid-template-columns:1fr}.product-card:last-child{grid-column:auto}.product-art{height:230px}.stats{grid-template-columns:repeat(2,1fr);padding:0}.stats div{min-height:130px;border-bottom:1px solid var(--line)}.feature-grid{grid-template-columns:1fr}.step-grid{grid-template-columns:1fr;gap:45px}.step-grid article:not(:last-child):after{display:none}.cta{padding:80px 20px}.footer-main{grid-template-columns:1fr 1fr;gap:45px}.footer-brand{grid-column:span 2}.footer-main>div:last-child{display:flex}.footer-bottom{gap:15px;flex-direction:column}.section-heading h2,.center-heading h2,.cta h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.core-ring{animation:none}}
.dma-category-link{display:block;color:inherit;text-decoration:none;height:100%}
.dma-category-link .product-info{display:flex;flex-direction:column;height:100%}
.dma-category-link .btn{align-self:flex-start;margin-top:auto}
.dma-category-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.dma-category-card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.65);box-shadow:0 18px 46px rgba(76,29,149,.24)}

/* DMA lantern catalog */
body.dma-lantern-open,html:has(body.dma-lantern-open){overflow:hidden}
.dma-lantern[hidden]{display:none}
.dma-lantern{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease}
.dma-lantern.open{opacity:1;visibility:visible}
.dma-lantern-backdrop{position:absolute;inset:0;border:0;background:radial-gradient(circle at 50% 15%,rgba(103,49,176,.27),transparent 44%),rgba(3,3,8,.9);backdrop-filter:blur(15px);cursor:default}
.dma-lantern-shell{position:relative;width:min(1140px,94vw);max-height:95vh;overflow:auto;padding:26px 36px 24px;border:1px solid rgba(168,91,255,.62);background:linear-gradient(145deg,rgba(20,11,35,.98),rgba(5,7,14,.99) 44%,rgba(14,7,25,.98));box-shadow:0 0 0 8px rgba(100,44,165,.05),0 0 90px rgba(107,46,180,.36),inset 0 0 80px rgba(107,46,180,.08);transform:translateY(20px) scale(.985);transition:transform .3s ease;scrollbar-width:thin;scrollbar-color:#7742a9 #09070f}
.dma-lantern.open .dma-lantern-shell{transform:none}
.dma-lantern-shell:before,.dma-lantern-shell:after{content:"";position:absolute;pointer-events:none;inset:12px;border:1px solid rgba(104,55,149,.45)}
.dma-lantern-shell:after{inset:25px;background:linear-gradient(90deg,#b670ff 0 42px,transparent 42px calc(100% - 42px),#b670ff calc(100% - 42px)) top/100% 1px no-repeat,linear-gradient(90deg,#b670ff 0 42px,transparent 42px calc(100% - 42px),#b670ff calc(100% - 42px)) bottom/100% 1px no-repeat;opacity:.5;border:0}
.dma-lantern-glow{position:absolute;z-index:0;left:50%;top:130px;width:440px;height:280px;transform:translateX(-50%);border-radius:50%;background:rgba(129,69,213,.24);filter:blur(90px);pointer-events:none}
.dma-lantern-close{position:sticky;z-index:8;top:0;float:right;width:42px;height:42px;margin:-14px -14px 0 0;border:1px solid rgba(183,112,255,.55);background:#100b19;color:#dfc6ff;font-size:24px;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.dma-lantern-close:hover{transform:rotate(90deg)}
.dma-lantern-close:hover{background:#7e43c5;color:white;box-shadow:0 0 25px rgba(170,95,255,.5)}
.dma-lantern-header{position:relative;z-index:1;text-align:center;max-width:640px;margin:0 auto 12px}
.dma-lantern-header h2{font-size:clamp(24px,2.8vw,36px);letter-spacing:-1.5px;margin:8px 0 8px}
.dma-lantern-header h2 em{font-style:normal;background:linear-gradient(90deg,#c088ff,#55ddff);-webkit-background-clip:text;color:transparent}
.dma-lantern-header p{margin:0;color:#9690a4;font-size:12px;line-height:1.5}
.dma-lantern-art{position:relative;z-index:1;width:min(680px,72vw);aspect-ratio:16/9;margin:0 auto 18px;overflow:visible;filter:drop-shadow(0 18px 42px rgba(0,0,0,.55))}
.dma-lantern-art img{display:block;position:relative;z-index:2;width:100%;height:100%;object-fit:cover;border:1px solid color-mix(in srgb,var(--theme-accent) 58%,transparent);background:linear-gradient(145deg,var(--panel2),var(--theme-deep));box-shadow:0 0 42px color-mix(in srgb,var(--theme-accent) 25%,transparent),inset 0 1px rgba(255,255,255,.08)}
.game-hero-title{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding:30px 28px;text-align:right;pointer-events:none;background:linear-gradient(90deg,transparent 34%,color-mix(in srgb,var(--theme-deep) 38%,transparent) 67%,color-mix(in srgb,var(--bg) 78%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--bg) 72%,transparent),transparent 45%);border:1px solid transparent}
.game-hero-title small{color:var(--cyan);font:700 9px/1.2 Inter,sans-serif;letter-spacing:3px;text-shadow:0 0 12px color-mix(in srgb,var(--cyan) 72%,transparent)}
.game-hero-title strong{display:block;max-width:58%;margin-top:7px;color:var(--text);font:700 clamp(20px,2.8vw,36px)/.95 "Space Grotesk",sans-serif;letter-spacing:-1px;text-transform:uppercase;text-shadow:0 2px 8px var(--bg),0 0 22px color-mix(in srgb,var(--theme-accent) 65%,transparent)}
.dma-lantern-orbit{position:absolute;z-index:1;inset:-20px;border:1px solid rgba(151,91,225,.25);transform:rotate(2deg);animation:dma-orbit 7s ease-in-out infinite}
.dma-lantern-orbit.orbit-two{inset:-34px;transform:rotate(-2deg);border-color:rgba(79,210,255,.14);animation-delay:-3.5s}
@keyframes dma-orbit{50%{transform:rotate(-2deg) scale(1.015);opacity:.55}}
.dma-lantern-category-row{position:relative;z-index:3;display:flex;gap:6px;overflow:hidden;padding:8px;border:1px solid rgba(131,70,180,.42);background:rgba(7,6,13,.75)}
.dma-lantern-category-row button{position:relative;isolation:isolate;flex:1 1 0;min-width:0;min-height:44px;border:1px solid rgba(127,72,172,.55);background:linear-gradient(180deg,rgba(37,20,57,.85),rgba(15,13,24,.92));color:#be7dff;padding:8px 5px;text-transform:uppercase;letter-spacing:.5px;font-size:8px;font-weight:800;cursor:pointer;transition:.22s;overflow:hidden;text-overflow:ellipsis}
.dma-lantern-category-row button:has(.dma-category-art){text-align:left;padding-left:38px}
/* Same three-quarter character cutout + shine sweep as the main shop filter bar
   (.filter-game-art in app.css), just scaled down to fit this compact tab strip. */
.dma-category-art{position:absolute;z-index:-1;left:-8px;bottom:-6px;width:56px;height:56px;overflow:hidden;background-image:url('/static/category-art/game-category-cutouts.png');background-repeat:no-repeat;background-size:600% 500%;background-position:var(--art-x) var(--art-y);pointer-events:none;filter:saturate(1.02) contrast(1.05) brightness(.97);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,rgba(0,0,0,.75) 65%,transparent 88%);mask-image:linear-gradient(90deg,#000 0%,#000 45%,rgba(0,0,0,.75) 65%,transparent 88%);transition:filter .25s ease,transform .25s ease}
.dma-category-art::before{content:"";position:absolute;inset:0;background-image:inherit;background-repeat:inherit;background-size:inherit;background-position:inherit;filter:brightness(1.75) saturate(.7);opacity:0;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(105deg,transparent 34%,#000 48%,transparent 62%);-webkit-mask-size:260% 100%;-webkit-mask-position:150% 0;mask-image:linear-gradient(105deg,transparent 34%,#000 48%,transparent 62%);mask-size:260% 100%;mask-position:150% 0;animation:category-character-shine 5.8s ease-in-out infinite}
.dma-category-label{position:relative;z-index:1}
.dma-lantern-category-row button:hover,.dma-lantern-category-row button.active{color:white;border-color:#b06dff;background:linear-gradient(120deg,#48236e,#7f3fc1);box-shadow:0 0 25px rgba(139,69,207,.28)}
.dma-lantern-category-row button:hover .dma-category-art,.dma-lantern-category-row button.active .dma-category-art{filter:saturate(1.18) brightness(1);transform:scale(1.04)}
@media(max-width:620px){.dma-category-art{display:none}.dma-lantern-category-row button:has(.dma-category-art){padding-left:1px;text-align:center}}
.dma-lantern-stage-wrap{position:relative;z-index:2;margin-top:12px;padding:0 50px}
.dma-lantern-stage{display:none;animation:dma-stage-in .28s ease}
.dma-lantern-stage.active{display:block}
@keyframes dma-stage-in{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}
.dma-stage-heading{position:relative;text-align:center;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid rgba(150,80,207,.3)}
.dma-stage-heading span{display:block;color:#78528f;font-size:8px;letter-spacing:2px;margin-bottom:5px}
.dma-stage-heading h3{font-size:25px;color:#f4eaff}
.dma-stage-heading small{position:absolute;right:0;bottom:9px;color:#8e789f;text-transform:uppercase;letter-spacing:1px}
/* Every DMA game tab was a different height (product count varies per game), so the whole
   centered modal jumped up/down when switching tabs. Stack every stage in the same grid cell
   (desktop only — mobile already uses its own fixed-height scrolling layout) so the wrap's
   height is always the tallest stage and the header/tabs never move. */
@media(min-width:621px){
  .all-dma-lantern .dma-lantern-stage-wrap{display:grid}
  .all-dma-lantern .dma-lantern-stage{display:block;grid-area:1/1;visibility:hidden;pointer-events:none}
  .all-dma-lantern .dma-lantern-stage.active{visibility:visible;pointer-events:auto}
}
.dma-product-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.dma-product-grid>.dma-product-slide{flex:0 1 calc(33.333% - 10px);max-width:340px}
/* Game-product lanterns (per-game + browse-all-DMA) go wider than the flat single-list
   lanterns (raffle/reseller/credit) so five same-size cards fit across one row on desktop. */
.game-lantern .dma-lantern-shell,.all-dma-lantern .dma-lantern-shell{width:min(1900px,96vw)}
.game-lantern .dma-product-grid>.dma-product-slide,.all-dma-lantern .dma-product-grid>.dma-product-slide{flex:0 1 calc(20% - 11.2px)}
@media(max-width:1400px){
  .game-lantern .dma-product-grid>.dma-product-slide,.all-dma-lantern .dma-product-grid>.dma-product-slide{flex:0 1 calc(33.333% - 10px)}
}
.raffle-lantern .single-product-grid>.dma-product-slide,.credit-lantern .single-product-grid>.dma-product-slide{flex:0 1 380px}
.dma-product-slide{background:linear-gradient(150deg,#12101a,#080a10);border-color:rgba(130,70,179,.45);animation:dma-card-in .45s ease backwards;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dma-product-slide:hover{transform:translateY(-4px);border-color:rgba(183,112,255,.7);box-shadow:0 12px 26px rgba(107,46,180,.28),0 0 20px rgba(139,69,207,.3)}
.dma-product-grid .dma-product-slide:nth-child(1){animation-delay:.03s}
.dma-product-grid .dma-product-slide:nth-child(2){animation-delay:.09s}
.dma-product-grid .dma-product-slide:nth-child(3){animation-delay:.15s}
.dma-product-grid .dma-product-slide:nth-child(4){animation-delay:.21s}
.dma-product-grid .dma-product-slide:nth-child(5){animation-delay:.27s}
.dma-product-grid .dma-product-slide:nth-child(6){animation-delay:.33s}
@keyframes dma-card-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.dma-lantern-category-row button.active{animation:dma-tab-pulse 3.2s ease-in-out infinite}
@keyframes dma-tab-pulse{0%,100%{box-shadow:0 0 25px rgba(139,69,207,.28)}50%{box-shadow:0 0 34px rgba(183,112,255,.5)}}
.dma-product-slide .product-art{height:190px}
.dma-product-slide .product-info{padding:20px}
.dma-product-slide .product-info h3{font-size:17px}
.dma-product-slide .product-info p{max-height:58px;overflow:auto}
.dma-product-slide .product-info footer{gap:12px}
.dma-lantern-nav{position:absolute;top:55%;z-index:4;width:42px;height:74px;transform:translateY(-50%);border:1px solid rgba(171,97,235,.55);background:rgba(15,9,24,.94);color:#c988ff;font-size:34px;cursor:pointer;transition:.2s}
.dma-lantern-nav:hover{color:white;background:#6d35a6;box-shadow:0 0 30px rgba(153,73,219,.35)}
.dma-lantern-prev{left:0}.dma-lantern-next{right:0}
.dma-lantern-progress{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;color:#8f6fa7;font:700 9px Space Grotesk;letter-spacing:1px;margin-top:24px}
.dma-lantern-progress i{width:80px;height:1px;background:linear-gradient(90deg,#a25ee6,#3e2a53)}
@media(max-width:900px){.dma-lantern-shell{padding:42px 28px 30px}.dma-lantern-close{margin:-24px -10px 0 0}.dma-lantern-stage-wrap{padding:0 48px}}
@media(max-width:620px){
  .dma-lantern{padding:16px!important;place-items:center!important}
  .dma-lantern-backdrop{background:radial-gradient(circle at 50% 15%,rgba(103,49,176,.18),transparent 44%),rgba(3,3,8,.55)!important;backdrop-filter:blur(6px)!important}
  .dma-lantern-shell{display:grid!important;grid-template-rows:auto auto minmax(0,1fr)!important;width:min(94vw,420px)!important;max-width:94vw!important;height:auto!important;max-height:70vh!important;min-height:0!important;margin:0!important;overflow:hidden!important;padding:16px 8px 8px!important;border-inline:1px solid rgba(168,91,255,.5)!important;box-sizing:border-box!important;background:linear-gradient(145deg,rgba(20,11,35,.72),rgba(5,7,14,.78) 44%,rgba(14,7,25,.72))!important;backdrop-filter:blur(10px)!important;border-radius:8px}
  .dma-lantern-shell:before{inset:5px}.dma-lantern-shell:after,.dma-lantern-art{display:none!important}
  .dma-lantern-close{position:absolute!important;right:8px;top:8px;width:32px;height:32px;margin:0!important;font-size:18px}
  .dma-lantern-header{padding:0 34px 4px!important;margin:0 auto 4px!important}
  .dma-lantern-header .kicker{font-size:7px;letter-spacing:1.3px}
  .dma-lantern-header h2{font-size:17px;letter-spacing:-.6px;margin:3px 0}
  .dma-lantern-header p{display:none!important}
  .dma-lantern-category-row{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important;overflow:visible!important;margin:0!important;padding:3px!important}
  .dma-lantern-category-row button{min-height:36px;padding:3px 1px;font-size:5.2px;line-height:1.25;letter-spacing:.1px;word-break:normal;overflow-wrap:normal}
  .dma-lantern-nav,.dma-lantern-progress{display:none!important}
  .dma-lantern-stage-wrap{min-height:0!important;margin-top:6px;padding:0!important}
  .dma-lantern-stages,.dma-lantern-stage.active{height:100%;min-height:0}
  .dma-lantern-stage.active{display:flex!important;flex-direction:column!important}
  .dma-stage-heading{flex:0 0 auto;margin-bottom:5px;padding-bottom:5px}
  .dma-stage-heading h3{font-size:15px}.dma-stage-heading small{font-size:7px}
  .dma-product-grid{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0;gap:6px;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable;padding:1px 2px 7px;scrollbar-width:thin}
  .dma-product-slide{display:grid!important;grid-template-columns:74px minmax(0,1fr)!important;flex:0 0 auto!important;width:100%!important;height:auto!important;max-height:none!important}
  .dma-product-slide .product-art{width:74px;height:100%;min-height:74px;min-width:0;overflow:hidden}
  .dma-product-slide .product-info{min-width:0;padding:8px;display:flex;flex-direction:column}
  .dma-product-slide .product-info small{display:none}
  .dma-product-slide .product-info h3{font-size:11px;margin-top:0}
  .dma-product-slide .product-info p{display:none}
  .dma-product-slide .product-info footer{margin-top:6px;padding-top:0;border-top:0;gap:5px;display:flex;align-items:center;justify-content:space-between}
  .dma-product-slide .product-info strong{font-size:10px}
  .dma-product-slide .card-actions{gap:4px}.dma-product-slide .btn-details,.dma-product-slide .btn-add-cart{min-height:26px;padding:5px 7px;font-size:7px}
  .dma-product-slide .btn-details,.dma-product-slide .btn-add-cart{background:rgba(139,92,246,.28);border-color:rgba(182,108,255,.85);color:#fff;text-shadow:0 0 8px rgba(182,108,255,.6)}
  /* The thumbnail column is only 74px tall (it doesn't stretch to match the taller info
     column), so once the price list is open, everything in .card-actions has plenty of clear
     space below it — bleed the order button + price box the 74px (thumbnail) + 8px (info
     padding) back to the card's true left edge instead of stopping at the info column. */
  /* Excludes raffle/credit cards (.raffle-card-popover) — that popover has its own fixed-width
     quantity-stepper layout already tuned for this breakpoint and shouldn't shift with it. */
  .dma-product-slide .add-cart-wrap.open:not(:has(.raffle-card-popover)){flex-basis:calc(100% + 82px);margin-left:-82px}
  .dma-product-slide .tier-popover{background:#130c1f;border-color:rgba(139,92,246,.45)}
}

/* --- Per-game lanterns: hero photo + optional "1 PC Software / DMA Software" toggle --- */
.game-type-toggle{position:relative;z-index:2;display:flex;gap:8px;margin:0 auto 16px;max-width:420px}
.game-type-toggle-btn{flex:1;min-height:44px;border:1px solid rgba(127,72,172,.55);background:linear-gradient(180deg,rgba(37,20,57,.85),rgba(15,13,24,.92));color:#be7dff;padding:10px;text-transform:uppercase;letter-spacing:.6px;font-size:11px;font-weight:800;cursor:pointer;transition:.22s}
.game-type-toggle-btn.active,.game-type-toggle-btn:hover{color:white;border-color:#b06dff;background:linear-gradient(120deg,#48236e,#7f3fc1);box-shadow:0 0 25px rgba(139,69,207,.28)}
.game-lantern:has(.game-type-toggle) .dma-product-slide[data-game-type="dma"]{display:none!important}
.game-lantern.show-dma .dma-product-slide[data-game-type="dma"]{display:block!important}
.game-lantern.show-dma .dma-product-slide[data-game-type="1pc"]{display:none!important}
/* Text search within a lantern layers on top of the type toggle above — needs matching
   specificity plus later source order to win the display:block/grid tie either state sets. */
.game-lantern .dma-product-slide.hidden{display:none!important}
.game-lantern-search{position:relative;z-index:2;display:flex;align-items:center;gap:10px;height:44px;margin:0 auto 18px;max-width:420px;border:1px solid rgba(183,112,255,.55);background:rgba(15,13,24,.92);padding:0 16px;color:#c088ff;box-shadow:0 0 18px rgba(139,69,207,.25),inset 0 0 14px rgba(139,69,207,.08);transition:border-color .22s ease,box-shadow .22s ease}
.game-lantern-search:hover{border-color:rgba(200,139,255,.75)}
.game-lantern-search:focus-within{border-color:#c98bff;box-shadow:0 0 30px rgba(183,112,255,.5),inset 0 0 16px rgba(139,69,207,.14)}
.game-lantern-search svg{flex-shrink:0;fill:none;stroke:#c98bff;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(183,112,255,.85))}
.game-lantern-search input{border:0;outline:0;background:none;color:#e7d2ff;width:100%;font-size:12px;letter-spacing:.2px;text-shadow:0 0 12px rgba(183,112,255,.35)}
.game-lantern-search input::placeholder{color:#a97fe0}
/* Inactive products are only ever sent to super admins (server-side filtered, see home() in
   app.py) so they can preview/manage them before switching back on — greyed out but still
   fully clickable (Details/Order etc. all keep working), never shown to regular customers. */
.product-inactive-preview{position:relative;opacity:.5;filter:grayscale(.85)}
.product-inactive-preview:hover{opacity:.75}
.inactive-preview-badge{position:absolute;z-index:3;top:8px;right:8px;padding:4px 8px;border:1px solid rgba(255,113,138,.55);background:rgba(20,8,13,.88);color:#ff9db3;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;pointer-events:none}
/* Admin-only drag-to-reorder: a super admin can drag cards into a new order and Save it,
   persisting a custom sort_order instead of the default alphabetical listing. */
.game-lantern-reorder-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 16px;max-width:640px}
.btn-reorder-toggle,.btn-reorder-cancel,.btn-reorder-save{border:1px solid rgba(183,112,255,.55);background:rgba(15,13,24,.92);color:#c98bff;padding:9px 16px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;cursor:pointer;transition:.2s}
.btn-reorder-toggle:hover,.btn-reorder-cancel:hover{color:white;border-color:#b06dff;background:linear-gradient(120deg,#48236e,#7f3fc1)}
.btn-reorder-save{background:linear-gradient(120deg,#48236e,#7f3fc1);color:#fff;border-color:#b06dff}
.btn-reorder-save:hover{box-shadow:0 0 20px rgba(139,69,207,.4)}
.btn-reorder-save:disabled,.btn-reorder-cancel:disabled{opacity:.55;cursor:default}
.reorder-hint{flex-basis:100%;text-align:center;color:#9690a4;font-size:10px}
.reorder-handle{position:absolute;z-index:3;top:8px;left:8px;width:26px;height:26px;display:none;place-items:center;border:1px solid rgba(183,112,255,.55);background:rgba(15,13,24,.88);color:#c98bff;font-size:14px;line-height:1;cursor:grab;user-select:none}
.game-lantern.reorder-mode .reorder-handle{display:grid}
.game-lantern.reorder-mode .dma-product-slide{cursor:grab}
.game-lantern.reorder-mode .dma-product-slide.dragging{opacity:.4;border-color:#b06dff}
@media(max-width:620px){
  .game-type-toggle{max-width:100%;padding:0 34px;gap:6px}
  .game-type-toggle-btn{min-height:36px;font-size:9px;padding:6px}
  .game-lantern-search{max-width:100%;margin:0 34px 14px;height:36px}
  /* The multi-game DMA tab lantern's mobile layout relies on a fixed 3-row grid
     (header/tabs/stage) that per-game lanterns don't have — fall back to a simple
     scrolling shell instead of inheriting that grid. */
  .game-lantern .dma-lantern-shell{display:block!important;height:auto!important;max-height:82vh!important;overflow-y:auto!important}
  .game-lantern .dma-lantern-art{display:block!important;width:min(340px,82vw);margin:4px auto 12px;aspect-ratio:16/9}
  .game-hero-title{padding:14px 13px}.game-hero-title small{font-size:6px;letter-spacing:1.8px}.game-hero-title strong{max-width:62%;margin-top:4px;font-size:clamp(13px,4vw,18px);letter-spacing:-.4px}
  .game-lantern .dma-product-grid{display:flex!important;flex-direction:column!important;overflow:visible!important;padding:1px 2px 7px}
  /* The generic .dma-product-slide{display:grid!important} mobile card layout above needs
     restating at matching specificity here so a shown-via-toggle DMA card gets the same
     compact grid row instead of the desktop "display:block" the base rule sets. */
  .game-lantern.show-dma .dma-product-slide[data-game-type="dma"]{display:grid!important}
}