@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#08070c;--panel:#111017;--panel2:#17141f;--text:#f6f3fb;--muted:#9b96a8;--line:rgba(255,255,255,.08);--purple:#9d4dff;--purple2:#6f31dd;--pink:#d763ff;--green:#55e39a;--max:1260px}
*{box-sizing:border-box}html{scroll-behavior:smooth}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;opacity:.025;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)'/%3E%3C/svg%3E")}.topbar{height:78px;position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:38px;padding:0 max(24px,calc((100vw - var(--max))/2));background:rgba(8,7,12,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;white-space:nowrap}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,var(--purple),#4d1e9b);box-shadow:0 0 36px rgba(157,77,255,.25);font-weight:900;font-size:20px}.brand-text{font-weight:800;letter-spacing:-.5px}.brand-text b{color:#b873ff}.nav{display:flex;gap:7px;flex:1}.nav a{padding:10px 13px;border-radius:10px;color:#aca6b7;text-decoration:none;font-size:14px;font-weight:600}.nav a:hover,.nav a.active{color:#fff;background:rgba(255,255,255,.055)}.actions{display:flex;align-items:center;gap:9px}.icon-btn,.menu-btn{position:relative;width:42px;height:42px;border:1px solid var(--line);background:#121018;color:#fff;border-radius:12px;cursor:pointer}.cart-count{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;background:var(--purple);font-size:10px;font-weight:800}.steam-btn{border:1px solid var(--line);background:#fff;color:#0d0b11;border-radius:12px;height:42px;padding:0 15px;font-weight:800;cursor:pointer}.menu-btn{display:none;font-size:18px}.hero{min-height:720px;position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;max-width:var(--max);margin:auto;padding:90px 24px 70px}.hero:before{content:"";position:absolute;left:-300px;top:110px;width:580px;height:580px;background:radial-gradient(circle,rgba(114,46,224,.16),transparent 65%);filter:blur(10px)}.hero-content{z-index:2}.eyebrow{color:#b9b2c8;font-size:12px;font-weight:800;letter-spacing:2.2px;display:flex;align-items:center;gap:10px;margin-bottom:18px}.eyebrow span{width:24px;height:2px;background:var(--purple)}h1{font-size:clamp(54px,6.6vw,92px);line-height:.92;letter-spacing:-5px;margin:0 0 25px;font-weight:900}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #bc76ff;text-shadow:0 0 32px rgba(157,77,255,.18)}.hero p{max-width:640px;color:var(--muted);font-size:17px;line-height:1.65}.hero-buttons{display:flex;gap:12px;margin-top:32px}.primary,.secondary{border:0;border-radius:13px;padding:15px 20px;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;box-shadow:0 8px 30px rgba(133,55,240,.22)}.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}.secondary{background:#15121c;color:#fff;border:1px solid var(--line)}.hero-stats{display:flex;gap:38px;margin-top:55px}.hero-stats div{display:flex;flex-direction:column;gap:5px}.hero-stats strong{font-size:23px}.hero-stats span{color:#7f788d;font-size:12px}.hero-art{position:relative;height:560px}.hero-glow{position:absolute;right:60px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(157,77,255,.24),rgba(88,31,154,.08) 42%,transparent 69%);filter:blur(7px)}.helmet{position:absolute;width:340px;height:390px;right:80px;top:65px;border-radius:45% 45% 36% 36%;background:linear-gradient(155deg,#262231 0%,#0b0a0f 52%,#17131d 100%);box-shadow:inset -25px -30px 80px #050407,0 45px 80px rgba(0,0,0,.48);transform:rotate(4deg)}.helmet:before{content:"";position:absolute;inset:40px 48px 110px;border-radius:47% 47% 32% 32%;background:linear-gradient(180deg,#0e0c13,#040305);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 20px 50px rgba(157,77,255,.06)}.visor{position:absolute;z-index:2;top:152px;left:74px;right:74px;height:45px;display:flex;justify-content:center;gap:70px}.visor i{width:37px;height:5px;border-radius:60%;background:#d31835;box-shadow:0 0 9px #ff183d,0 0 24px rgba(255,0,51,.75);transform:rotate(-6deg)}.visor i+ i{transform:rotate(6deg)}.helmet-line{position:absolute;left:48px;right:48px;height:1px;background:rgba(255,255,255,.06)}.l1{bottom:95px}.l2{bottom:72px}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-a{width:140px;height:140px;right:10px;top:38px;background:radial-gradient(circle at 35% 30%,#d97aff,#7229d6 32%,#24102f 67%,transparent 70%);opacity:.65}.orb-b{width:80px;height:80px;right:410px;bottom:70px;background:radial-gradient(circle,#8e42da,transparent 68%);opacity:.4}.meteor{position:absolute;width:6px;height:6px;border-radius:50%;background:#d780ff;box-shadow:-35px 12px 26px 7px rgba(138,61,216,.22)}.m1{right:25px;top:120px}.m2{right:445px;top:185px}.m3{right:22px;bottom:110px}.section{max-width:var(--max);margin:auto;padding:95px 24px}.section.darker{max-width:none;padding-left:max(24px,calc((100vw - var(--max))/2));padding-right:max(24px,calc((100vw - var(--max))/2));background:#0b0910;border-block:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:34px}.section h2{font-size:clamp(34px,4vw,52px);letter-spacing:-2px;margin:0 0 10px}.section-head p{color:var(--muted);max-width:650px;line-height:1.6}.tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.tabs button{border:1px solid var(--line);background:#111017;color:#9690a0;padding:10px 13px;border-radius:10px;font-weight:700;cursor:pointer}.tabs button.active{background:#fff;color:#0c0a0f}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.product{position:relative;background:linear-gradient(180deg,#15121b,#0f0d13);border:1px solid var(--line);border-radius:18px;padding:20px;min-height:326px;overflow:hidden;display:flex;flex-direction:column}.product:after{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-85px;border-radius:50%;background:radial-gradient(circle,rgba(157,77,255,.22),transparent 70%)}.badge{position:absolute;top:16px;right:16px;font-size:10px;font-weight:900;background:rgba(157,77,255,.14);border:1px solid rgba(157,77,255,.28);color:#cb9dff;padding:7px 9px;border-radius:9px}.product-icon{height:126px;display:grid;place-items:center;font-size:66px;filter:drop-shadow(0 14px 23px rgba(132,55,232,.18))}.product small{color:#7e758b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px}.product h3{font-size:22px;margin:7px 0}.product p{color:#8e8799;font-size:13px;line-height:1.5;margin:0}.product-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:auto;padding-top:20px}.price{display:flex;align-items:baseline;gap:8px}.price strong{font-size:23px}.price del{font-size:12px;color:#6d6675}.buy{width:42px;height:42px;border-radius:12px;border:0;background:#fff;color:#0a080d;font-size:20px;font-weight:900;cursor:pointer}.server-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.server{background:#121018;border:1px solid var(--line);border-radius:18px;padding:24px}.server-top{display:flex;justify-content:space-between;gap:20px}.server h3{font-size:21px;margin:0 0 7px}.server-mode{color:#9a8ca8;font-size:12px}.online{display:flex;align-items:center;gap:7px;color:#8ff0bc;font-size:12px;font-weight:700}.online i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.server-progress{height:7px;background:#211d29;border-radius:8px;margin:23px 0 11px;overflow:hidden}.server-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--purple2),var(--purple));border-radius:inherit}.server-meta{display:flex;justify-content:space-between;color:#777080;font-size:11px}.server-actions{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.server-actions code{color:#bdb5c8;font-family:inherit;font-size:12px}.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rules-grid article{background:#111017;border:1px solid var(--line);border-radius:16px;padding:22px}.rules-grid b{color:#7a438f;font-size:11px}.rules-grid h3{font-size:17px;margin:25px 0 9px}.rules-grid p{color:#81798c;font-size:13px;line-height:1.55;margin:0}footer{max-width:var(--max);margin:auto;padding:30px 24px 45px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand div{display:flex;flex-direction:column;gap:5px}.footer-brand small{color:#625c6b;font-size:10px}.footer-links{display:flex;gap:18px}.footer-links a{color:#8e8799;text-decoration:none;font-size:12px}.copyright{grid-column:1/-1;color:#514b58;font-size:10px}.toast{position:fixed;z-index:30;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#fff;color:#09070c;padding:11px 16px;border-radius:11px;font-size:12px;font-weight:800;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.drawer{position:fixed;inset:0;z-index:40;pointer-events:none}.drawer.open{pointer-events:auto}.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:.25s}.drawer.open .drawer-backdrop{opacity:1}.drawer aside{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:#0d0b11;border-left:1px solid var(--line);transform:translateX(100%);transition:.28s;display:flex;flex-direction:column}.drawer.open aside{transform:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:23px;border-bottom:1px solid var(--line)}.drawer-head h3{margin:0}.drawer-head button{background:none;border:0;color:#fff;font-size:28px;cursor:pointer}.cart-items{padding:16px;overflow:auto;flex:1}.cart-empty{color:#746d7c;text-align:center;padding:60px 15px}.cart-item{display:flex;justify-content:space-between;gap:10px;padding:15px;border-bottom:1px solid var(--line)}.cart-item small{color:#756d80}.cart-item button{border:0;background:transparent;color:#8e8396;cursor:pointer}.cart-footer{padding:20px;border-top:1px solid var(--line)}.cart-footer>div{display:flex;justify-content:space-between;margin-bottom:15px}.full{width:100%}.cart-footer small{display:block;text-align:center;color:#655e6d;margin-top:10px}.loading{grid-column:1/-1;color:#797281;padding:40px 0}
@media(max-width:980px){.nav{display:none;position:absolute;left:15px;right:15px;top:70px;background:#111017;border:1px solid var(--line);padding:10px;border-radius:14px;flex-direction:column}.nav.open{display:flex}.menu-btn{display:block}.steam-btn{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}.hero-art{height:430px;margin-top:10px}.helmet{right:50%;transform:translateX(50%) rotate(4deg);top:30px}.product-grid{grid-template-columns:repeat(2,1fr)}.rules-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.topbar{height:66px;padding:0 15px}.brand-text{font-size:14px}.hero{padding:55px 17px 45px}.hero h1{letter-spacing:-3px}.hero p{font-size:14px}.hero-buttons{flex-direction:column;align-items:stretch}.hero-stats{gap:16px;justify-content:space-between}.hero-stats strong{font-size:18px}.hero-stats span{font-size:9px}.hero-art{height:350px}.helmet{width:250px;height:295px}.helmet:before{inset:32px 37px 85px}.visor{top:115px;left:55px;right:55px;gap:48px}.section,.section.darker{padding:70px 17px}.section-head{align-items:flex-start;flex-direction:column}.tabs{justify-content:flex-start}.product-grid,.server-grid,.rules-grid{grid-template-columns:1fr}.product{min-height:300px}.footer-links{display:none}footer{grid-template-columns:1fr}.footer-brand small{max-width:280px}}

/* ===== EXTASY RUST V2 / compact 5-column catalog ===== */
.store-section{max-width:1280px;padding-top:30px}
.store-toolbar{height:72px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-bottom:0;padding:0 14px;background:rgba(15,14,19,.72);border-radius:14px 14px 0 0}
.server-tabs{display:flex;gap:8px}.server-tab{border:1px solid var(--line);background:#151419;color:#a8a4b2;border-radius:8px;padding:11px 15px;font-weight:800}.server-tab.active{background:#343238;color:#fff;border-color:#55515c;box-shadow:inset 0 0 0 1px #27252b}
.catalog-filter{display:flex;align-items:center;gap:8px}.catalog-filter>span{font-weight:900;color:#b8b4c0}
.store-section .tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.store-section .tabs button{padding:9px 12px;border-radius:8px;background:#17161b;border:1px solid var(--line);color:#aaa5b3;font-weight:800}
.store-section .tabs button.active{background:#f3f1f6;color:#121116;border-color:#f3f1f6}
.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line);background:#121116}
.product{position:relative;min-width:0;height:285px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:linear-gradient(145deg,#17161a 0%,#151418 72%);padding:0;overflow:hidden;transition:background .22s ease,box-shadow .22s ease}
.product:hover{transform:none;background:radial-gradient(circle at 52% 42%,rgba(132,62,219,.12),transparent 48%),#18171b;box-shadow:inset 0 0 38px rgba(145,69,240,.06)}
.product-media{height:190px;display:flex;align-items:center;justify-content:center;padding:15px 15px 0;overflow:hidden}
.product-media:after{content:"";position:absolute;width:130px;height:36px;top:155px;left:50%;transform:translateX(-50%);background:rgba(119,54,204,.15);filter:blur(22px);border-radius:50%;pointer-events:none}
.product-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.42));transition:transform .26s cubic-bezier(.2,.8,.2,1),filter .26s ease}
.product:hover .product-media img{transform:translateY(-5px) scale(1.065);filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}
.product-info{position:absolute;left:14px;right:12px;bottom:12px}.product small{display:none}.product h3{font-size:14px;line-height:1.25;margin:0 46px 3px 0;color:#f4f2f6}.product p{display:none}.product-bottom{margin:0;align-items:end}.price{display:flex;align-items:center;gap:7px}.price strong{font-size:14px;color:#f4f2f6}.price del{font-size:12px;color:#77727f}.buy{position:absolute;right:0;bottom:0;width:40px;height:40px;border-radius:7px;background:#242329;border:1px solid #2b2930;color:#fff;font-size:14px;transition:background .2s,transform .2s}.product:hover .buy{background:#7e36dc;transform:translateY(-1px)}
.badge{z-index:3;left:12px;right:auto;top:12px;border-radius:6px;padding:5px 7px;background:#4c2a69;border:1px solid #68408a;color:#dcbcff;font-size:11px}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.store-toolbar{height:auto;min-height:72px;gap:10px;flex-wrap:wrap;padding:12px 14px}}
@media(max-width:620px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product{height:255px}.product-media{height:165px}.product-media:after{top:138px}.store-section{padding-left:12px;padding-right:12px}.store-toolbar{align-items:flex-start}.catalog-filter{width:100%;overflow-x:auto}.store-section .tabs{flex-wrap:nowrap;justify-content:flex-start}}

/* V3 product detail dialogs */
.product{cursor:pointer}.modal-open{overflow:hidden}.product-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:18px}.product-modal.open{display:flex}.product-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}.product-dialog{position:relative;width:min(940px,96vw);max-height:92vh;overflow:auto;background:#1a1a1b;border:1px solid #303034;border-radius:14px;box-shadow:0 30px 90px #000;color:#eee}.product-close{position:absolute;z-index:5;right:15px;top:15px;width:36px;height:36px;border:0;border-radius:10px;background:#2c2c2e;color:#fff;font-size:22px;font-weight:900}.priv-modal{display:grid;grid-template-columns:310px 1fr;min-height:620px;padding:22px 22px 86px;gap:20px}.priv-left h2,.simple-modal h2{display:inline-block;margin:0;background:#2b2b2d;border-radius:9px;padding:8px 12px;font-size:17px}.priv-hero{display:block;width:100%;height:245px;object-fit:contain;margin:8px auto 4px;filter:drop-shadow(0 15px 20px #0008)}.perk-list{display:grid;gap:7px}.perk-list div{display:flex;justify-content:space-between;gap:10px;padding:10px;background:#29292b;border-radius:8px;font-size:12px}.perk-list span{color:#929096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.perk-list b{font-size:12px;white-space:nowrap}.priv-right{padding-top:42px}.priv-right h4,.modal-subhead h4{font-size:12px;color:#aaa7ae;margin:0 0 9px}.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:18px}.mini-item,.resource,.simple-items>div{height:70px;border-radius:8px;background:#29292b;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.mini-item img,.resource img,.simple-items img{width:70%;height:70%;object-fit:contain}.mini-item span{display:none}.empty{background:repeating-linear-gradient(135deg,#222225 0 1px,#2b2b2e 1px 7px)!important}.modal-subhead{display:flex;justify-content:space-between;align-items:center}.modal-subhead span{font-size:11px;color:#858289}.resource-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.resource{height:84px;flex-direction:column}.resource img{height:50px}.resource b{font-size:9px}.resource span{position:absolute;bottom:3px;right:4px;background:#666;border-radius:4px;padding:2px 4px;font-size:9px;font-weight:900}.modal-buybar{position:absolute;bottom:0;left:0;right:0;padding:14px 22px;background:#1a1a1b;border-top:1px solid #28282b;display:flex;justify-content:flex-end;gap:110px}.qty{display:flex;gap:6px;align-items:center}.qty button,.qty strong{height:42px;min-width:42px;border:0;border-radius:9px;background:#272729;color:#eee;display:flex;align-items:center;justify-content:center}.qty strong{padding:0 18px}.modal-buy{min-width:190px;border:0;border-radius:9px;background:#3d5125;color:#b7ec67;font-weight:900;padding:0 20px}.simple-modal{padding:18px 18px 20px;max-width:480px;margin:auto}.simple-image{height:185px;background:#29292b;border-radius:9px;margin:10px 0 18px;display:flex;align-items:center;justify-content:center}.simple-image img{width:80%;height:85%;object-fit:contain}.simple-modal p{color:#aaa7ae;line-height:1.45;font-size:14px}.simple-items{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0}.simple-items>div{height:72px}.simple-items span{position:absolute;right:4px;bottom:3px;background:#666;border-radius:4px;padding:2px 4px;font-size:10px;font-weight:900}.simple-buyrow{display:flex;justify-content:space-between;gap:18px;margin-top:20px}.simple-buyrow .modal-buy{height:42px}
@media(max-width:760px){.priv-modal{grid-template-columns:1fr;padding-bottom:95px}.priv-right{padding-top:0}.priv-hero{height:190px}.mini-grid{grid-template-columns:repeat(5,1fr)}.resource-grid{grid-template-columns:repeat(3,1fr)}.modal-buybar{gap:10px;justify-content:space-between}.product-dialog{max-height:95vh}.simple-items{grid-template-columns:repeat(5,1fr)}}

/* ===== V4 motion polish ===== */
button,a,.server-tab,.product,.mini-item,.resource,.simple-items>div{
  -webkit-tap-highlight-color:transparent
}
button,a{
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s ease,
  border-color .18s ease,color .18s ease,box-shadow .18s ease,opacity .18s ease
}
button:not(:disabled):hover{transform:translateY(-2px)}
button:not(:disabled):active{transform:translateY(0) scale(.96)}
.primary:hover,.modal-buy:hover{box-shadow:0 8px 26px rgba(133,64,222,.24)}
.modal-buy:hover{background:#4d682c;color:#d1ff8a;box-shadow:0 8px 24px rgba(125,171,60,.16)}
.product-close:hover{background:#3b3b3e;transform:rotate(5deg) scale(1.06)}
.qty button:hover{background:#38383c;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.buy:hover{background:#8a3fe9!important;box-shadow:0 7px 18px rgba(126,54,220,.28)}
.server-tab:hover,.store-section .tabs button:hover{border-color:#5c5665;color:#fff}
.secondary:hover{border-color:#625a6b;background:#222027}
.nav a:hover{color:#fff;background:#242229}
.cart-button:hover{border-color:#5b5265;background:#201e24}
.qty strong{overflow:hidden;position:relative}
[data-days],[data-modal-price]{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
[data-days]{min-width:1.2ch;text-align:center}
[data-modal-price]{min-width:2ch}
.roll-box{display:inline-grid;position:relative;line-height:1em;vertical-align:baseline}
.roll-old,.roll-new{grid-area:1/1;display:block;white-space:nowrap}
.roll-up .roll-old{animation:rollOldUp .28s cubic-bezier(.22,.75,.25,1) forwards}
.roll-up .roll-new{animation:rollNewUp .28s cubic-bezier(.22,.75,.25,1) forwards}
.roll-down .roll-old{animation:rollOldDown .28s cubic-bezier(.22,.75,.25,1) forwards}
.roll-down .roll-new{animation:rollNewDown .28s cubic-bezier(.22,.75,.25,1) forwards}
@keyframes rollOldUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-115%);opacity:0}}
@keyframes rollNewUp{from{transform:translateY(115%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes rollOldDown{from{transform:translateY(0);opacity:1}to{transform:translateY(115%);opacity:0}}
@keyframes rollNewDown{from{transform:translateY(-115%);opacity:0}to{transform:translateY(0);opacity:1}}
.product-modal.open .product-dialog{animation:modalEnter .22s cubic-bezier(.2,.8,.2,1)}
@keyframes modalEnter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.mini-item:not(.empty):hover,.resource:hover,.simple-items>div:not(.empty):hover{transform:translateY(-3px);background:#313135;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.mini-item img,.resource img,.simple-items img{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.mini-item:hover img,.resource:hover img,.simple-items>div:hover img{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== V5 cinematic product modal open / close ===== */
.product-modal{
  display:flex;
  visibility:hidden;
  pointer-events:none;
  opacity:0;
  transition:visibility 0s linear .42s,opacity .42s ease;
}
.product-modal.open{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transition-delay:0s;
}
.product-modal-backdrop{
  opacity:0;
  backdrop-filter:blur(0);
  transition:opacity .42s ease,backdrop-filter .42s ease;
}
.product-modal.open.visible .product-modal-backdrop{opacity:1;backdrop-filter:blur(8px)}
.product-dialog{
  opacity:0;
  transform:translateY(34px) scale(.955);
  filter:blur(5px);
  transform-origin:50% 55%;
  transition:
    opacity .38s ease,
    transform .48s cubic-bezier(.16,1,.3,1),
    filter .38s ease;
  will-change:transform,opacity,filter;
}
.product-modal.open.visible .product-dialog{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.product-modal.closing .product-dialog{
  opacity:0;
  transform:translateY(22px) scale(.97);
  filter:blur(3px);
  transition:
    opacity .30s ease,
    transform .38s cubic-bezier(.4,0,.6,1),
    filter .30s ease;
}
.product-modal.closing .product-modal-backdrop{opacity:0;backdrop-filter:blur(0)}
/* Disable old entrance keyframe so close can animate in reverse */
.product-modal.open .product-dialog{animation:none}

/* ===== V6 invisible page scrollbar, scrolling stays enabled ===== */
html{
  overflow-y:scroll;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* legacy Edge/IE */
}
html::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;                  /* Chrome / Edge / Safari */
}
body{
  overflow-x:hidden;
}
/* Modal itself may scroll, but its bar is invisible too */
.product-dialog{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.product-dialog::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* ===== V7 centered grow/shrink product animation ===== */
.product-modal-backdrop{
  background:rgba(0,0,0,.62);
  opacity:0;
  backdrop-filter:blur(0);
  transition:opacity .42s ease,backdrop-filter .42s ease;
}
.product-modal.open.visible .product-modal-backdrop{
  opacity:1;
  backdrop-filter:blur(3px);
}
.product-dialog{
  opacity:0;
  transform:translate3d(0,0,0) scale(.22);
  filter:blur(1px);
  transform-origin:50% 50%;
  border-radius:24px;
  transition:
    opacity .24s ease,
    transform .58s cubic-bezier(.16,1,.3,1),
    filter .32s ease,
    border-radius .52s cubic-bezier(.16,1,.3,1);
}
.product-modal.open.visible .product-dialog{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  border-radius:14px;
}
.product-modal.closing .product-dialog{
  opacity:0;
  transform:translate3d(0,0,0) scale(.22);
  filter:blur(1px);
  border-radius:24px;
  transition:
    opacity .34s ease .12s,
    transform .56s cubic-bezier(.4,0,.2,1),
    filter .34s ease,
    border-radius .48s ease;
}
.product-modal.closing .product-modal-backdrop{
  opacity:0;
  backdrop-filter:blur(0);
  transition:opacity .46s ease,backdrop-filter .46s ease;
}

/* ===== V8 flying logo directly on the website ===== */
.hero-content{overflow:visible}
.logo-flight-stage{position:relative;width:min(720px,60vw);height:330px;margin-left:-22px;display:flex;align-items:center;justify-content:center;overflow:visible}
.flight-logo{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;line-height:.78;white-space:nowrap;opacity:0;will-change:transform,opacity,filter;animation:extasyFly 8.5s cubic-bezier(.2,.75,.2,1) infinite}
.flight-extasy,.flight-rust{font-weight:1000;text-transform:uppercase;font-style:italic;position:relative}
.flight-extasy{font-size:clamp(70px,8.2vw,132px);letter-spacing:-.075em;color:#f4f1f7;text-shadow:4px 3px 0 #6f2fc4,-3px -1px 0 #17131c,0 0 28px rgba(145,61,236,.24);clip-path:polygon(0 8%,7% 2%,16% 8%,27% 0,38% 7%,50% 1%,60% 7%,71% 0,82% 7%,92% 2%,100% 10%,97% 89%,89% 95%,80% 90%,68% 100%,58% 92%,46% 99%,36% 91%,25% 98%,15% 90%,4% 96%)}
.flight-rust{font-size:clamp(42px,5vw,78px);color:#9d43f0;margin-top:20px;letter-spacing:.08em;text-shadow:0 0 20px rgba(157,67,240,.48),2px 2px 0 #f1e8ff}
.flight-logo:before,.flight-logo:after{content:"";position:absolute;z-index:-1;top:45%;height:3px;background:linear-gradient(90deg,transparent,#8b3bdd);opacity:.7}
.flight-logo:before{left:-105px;width:110px;box-shadow:0 -18px 0 rgba(139,59,221,.3),0 18px 0 rgba(139,59,221,.18)}
.flight-logo:after{right:-65px;width:65px;transform:rotate(-7deg)}
.logo-impact{position:absolute;z-index:3;left:50%;top:50%;width:10px;height:10px;pointer-events:none}
.logo-impact i{position:absolute;width:7px;height:7px;border-radius:50%;background:#c25cff;box-shadow:0 0 15px #9c38f1;opacity:0;animation:impactParticle 8.5s ease-out infinite}
.logo-impact i:nth-child(1){--x:-160px;--y:-75px}.logo-impact i:nth-child(2){--x:155px;--y:-60px}.logo-impact i:nth-child(3){--x:-135px;--y:85px}.logo-impact i:nth-child(4){--x:140px;--y:90px}.logo-impact i:nth-child(5){--x:-75px;--y:-125px}.logo-impact i:nth-child(6){--x:80px;--y:125px}.logo-impact i:nth-child(7){--x:-190px;--y:10px}.logo-impact i:nth-child(8){--x:190px;--y:5px}
.impact-ring{position:absolute;z-index:2;left:50%;top:50%;width:18px;height:18px;border:2px solid rgba(173,82,255,.9);border-radius:50%;opacity:0;box-shadow:0 0 32px rgba(154,57,241,.55);animation:impactRing 8.5s ease-out infinite}
.impact-flash{position:absolute;z-index:1;left:50%;top:50%;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,rgba(214,169,255,.85),rgba(146,48,238,.22) 38%,transparent 72%);opacity:0;animation:impactFlash 8.5s ease-out infinite}
.flight-subtitle{margin-top:-24px!important;opacity:.72}
@keyframes extasyFly{
  0%{transform:translateX(110vw) rotate(3deg) scale(.9);opacity:0;filter:blur(7px)}
  6%{opacity:1}
  28%{transform:translateX(0) rotate(0) scale(1);opacity:1;filter:blur(0)}
  31%{transform:translateX(0) scale(1.045);filter:brightness(1.75)}
  35%{transform:translateX(0) scale(1);filter:brightness(1)}
  61%{transform:translateX(0) scale(1);opacity:1}
  67%{transform:translateX(-7vw) rotate(-1deg) scale(.99);opacity:1}
  91%{transform:translateX(-120vw) rotate(-4deg) scale(.9);opacity:.95;filter:blur(3px)}
  100%{transform:translateX(-120vw) rotate(-4deg) scale(.9);opacity:0;filter:blur(5px)}
}
@keyframes impactRing{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.1)}30%{opacity:1}39%{opacity:0;transform:translate(-50%,-50%) scale(18)}100%{opacity:0}}
@keyframes impactFlash{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1}35%{opacity:0;transform:translate(-50%,-50%) scale(5)}100%{opacity:0}}
@keyframes impactParticle{0%,28%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.3)}30%{opacity:1}41%{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}100%{opacity:0}}
@media(max-width:850px){.logo-flight-stage{width:100%;height:250px;margin-left:0}.flight-extasy{font-size:clamp(54px,16vw,95px)}.flight-rust{font-size:clamp(34px,9vw,56px)}}

/* ===== V9 chained / explosive logo — website CSS, one play per page load ===== */
.flight-logo{animation:extasyFlyV9 7.2s cubic-bezier(.2,.75,.2,1) 1 both}
.logo-impact i{animation:impactParticleV9 7.2s ease-out 1 both}
.impact-ring{animation:impactRingV9 7.2s ease-out 1 both}
.impact-flash{animation:impactFlashV9 7.2s ease-out 1 both}
.chain{position:absolute;z-index:-2;top:45%;display:flex;align-items:center;gap:-2px;filter:drop-shadow(0 4px 4px #000)}
.chain-left{right:88%;transform:rotate(8deg)}
.chain-right{left:91%;transform:rotate(-8deg)}
.chain i{display:block;width:34px;height:18px;margin-left:-7px;border:5px solid #77727c;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #242229,0 0 5px #000;transform:rotate(var(--r,20deg))}
.chain i:nth-child(even){--r:-24deg;border-color:#56525a}
.logo-cracks{position:absolute;inset:0;pointer-events:none}
.logo-cracks i{position:absolute;width:3px;height:38px;background:#1b1720;clip-path:polygon(40% 0,100% 0,62% 42%,100% 45%,25% 100%,42% 55%,0 52%);opacity:.8}
.logo-cracks i:nth-child(1){left:19%;top:8%;transform:rotate(23deg)}
.logo-cracks i:nth-child(2){left:43%;top:23%;transform:rotate(-18deg)}
.logo-cracks i:nth-child(3){left:67%;top:4%;transform:rotate(31deg)}
.logo-cracks i:nth-child(4){left:82%;top:35%;transform:rotate(-27deg)}
.impact-debris,.impact-lightning{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none}
.impact-debris i{position:absolute;width:12px;height:8px;background:linear-gradient(135deg,#d9d5dd,#514c57);clip-path:polygon(0 0,100% 18%,74% 100%,16% 78%);opacity:0;--dx:100px;--dy:60px;animation:debrisBurst 7.2s cubic-bezier(.15,.7,.25,1) 1 both}
.impact-debris i:nth-child(1){--dx:-220px;--dy:-90px}.impact-debris i:nth-child(2){--dx:-165px;--dy:120px}.impact-debris i:nth-child(3){--dx:210px;--dy:-105px}.impact-debris i:nth-child(4){--dx:190px;--dy:115px}.impact-debris i:nth-child(5){--dx:-90px;--dy:-155px}.impact-debris i:nth-child(6){--dx:75px;--dy:160px}.impact-debris i:nth-child(7){--dx:-270px;--dy:15px}.impact-debris i:nth-child(8){--dx:280px;--dy:5px}.impact-debris i:nth-child(9){--dx:-130px;--dy:-135px}.impact-debris i:nth-child(10){--dx:145px;--dy:-145px}.impact-debris i:nth-child(11){--dx:-55px;--dy:185px}.impact-debris i:nth-child(12){--dx:55px;--dy:-185px}
.impact-lightning i{position:absolute;width:4px;height:145px;transform-origin:top;background:linear-gradient(#f4e8ff,#a641ff 45%,transparent);filter:drop-shadow(0 0 7px #9f3cff);clip-path:polygon(0 0,100% 0,40% 35%,100% 34%,20% 70%,70% 68%,0 100%);opacity:0;animation:lightningBurst 7.2s ease-out 1 both}
.impact-lightning i:nth-child(1){transform:rotate(48deg)}.impact-lightning i:nth-child(2){transform:rotate(137deg)}.impact-lightning i:nth-child(3){transform:rotate(226deg)}.impact-lightning i:nth-child(4){transform:rotate(315deg)}
@keyframes extasyFlyV9{
  0%{transform:translateX(110vw) rotate(3deg) scale(.9);opacity:0;filter:blur(7px)}
  5%{opacity:1}
  27%{transform:translateX(0) rotate(0) scale(1);opacity:1;filter:blur(0)}
  30%{transform:translateX(0) scale(1.075);filter:brightness(2.15)}
  35%{transform:translateX(0) scale(1);filter:brightness(1)}
  65%{transform:translateX(0) scale(1);opacity:1}
  72%{transform:translateX(-8vw) rotate(-1deg);opacity:1}
  96%{transform:translateX(-120vw) rotate(-4deg) scale(.9);opacity:.95;filter:blur(4px)}
  100%{transform:translateX(-120vw) rotate(-4deg) scale(.9);opacity:0}
}
@keyframes impactRingV9{0%,27%{opacity:0;transform:translate(-50%,-50%) scale(.1)}29%{opacity:1}39%{opacity:0;transform:translate(-50%,-50%) scale(24)}100%{opacity:0}}
@keyframes impactFlashV9{0%,27%{opacity:0;transform:translate(-50%,-50%) scale(.1)}29%{opacity:1}34%{opacity:0;transform:translate(-50%,-50%) scale(8)}100%{opacity:0}}
@keyframes impactParticleV9{0%,27%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.3)}29%{opacity:1}42%{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1.3)}100%{opacity:0}}
@keyframes debrisBurst{0%,27%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}29%{opacity:1}43%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(390deg) scale(1.1)}100%{opacity:0}}
@keyframes lightningBurst{0%,27%{opacity:0}28.5%{opacity:1}30%{opacity:.25}31.5%{opacity:1}35%{opacity:0}100%{opacity:0}}

/* ===== V10 static EXTASY hero ===== */
.logo-flight-stage,.flight-logo,.logo-impact,.impact-ring,.impact-flash,.impact-debris,.impact-lightning{display:none!important;animation:none!important}
.static-logo-hero{
  width:min(820px,66vw);
  height:350px;
  margin-left:-28px;
  position:relative;
  overflow:hidden;
  border-radius:4px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.static-logo-hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(7,6,10,.08),transparent 18%,transparent 78%,rgba(7,6,10,.9));
  pointer-events:none;
}
.static-logo-hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.flight-subtitle{margin-top:-18px!important}
@media(max-width:850px){
 .static-logo-hero{width:100%;height:240px;margin-left:0}
}

/* ===== V11 full-width static hero ===== */
.hero{min-height:auto;padding:0!important;display:block!important}
.hero-content{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;display:block!important}
.hero-copy{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.static-logo-hero{
  width:100vw!important;
  max-width:none!important;
  height:clamp(330px,32vw,560px)!important;
  margin:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.static-logo-hero img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.static-logo-hero:after{
  background:linear-gradient(to bottom,rgba(7,6,10,.03),transparent 72%,rgba(7,6,10,.52))!important;
}
.hero-art{display:none!important}
@media(max-width:850px){
 .static-logo-hero{height:clamp(230px,52vw,360px)!important}
}


/* ===== V14 FULL HERO BACKGROUND ===== */
.hero{
    padding:0!important;
    min-height:auto!important;
}
.hero-content{
    max-width:none!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
}
.hero-copy{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
}
.hero-banner{
    position:relative;
    width:100%;
    height:430px;
    background:url('hero_background.jpg') center center/cover no-repeat;
    overflow:hidden;
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to bottom, rgba(6,6,10,.15), rgba(6,6,10,.05) 45%, rgba(6,6,10,.55)),
        radial-gradient(circle at center, transparent 35%, rgba(6,6,10,.22) 100%);
}
.hero-art{display:none!important;}

@media (max-width:900px){
    .hero-banner{
        height:260px;
        background-position:center;
    }
}


/* ===== V15 modal quantity controls: glow only, no movement ===== */
/* +/- buttons inside the opened product */
.product-modal .qty button,
.product-modal [data-minus],
.product-modal [data-plus]{
    transform:none !important;
    translate:none !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.product-modal .qty button:hover,
.product-modal [data-minus]:hover,
.product-modal [data-plus]:hover{
    transform:none !important;
    translate:none !important;
    background:#37333d !important;
    border-color:rgba(166,82,255,.72) !important;
    color:#fff !important;
    box-shadow:
        0 0 0 1px rgba(156,67,240,.22),
        0 0 16px rgba(156,67,240,.28) !important;
}

.product-modal .qty button:active,
.product-modal [data-minus]:active,
.product-modal [data-plus]:active{
    transform:none !important;
    translate:none !important;
    filter:brightness(1.12);
}

/* Price / buy control: highlight only */
.product-modal .modal-buy,
.product-modal .modal-buy:hover,
.product-modal .modal-buy:active{
    transform:none !important;
    translate:none !important;
}

.product-modal .modal-buy{
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.product-modal .modal-buy:hover{
    box-shadow:
        0 0 0 1px rgba(150,210,73,.18),
        0 0 18px rgba(150,210,73,.22) !important;
    filter:brightness(1.08);
}

/* Quantity/value container itself never shifts */
.product-modal .qty,
.product-modal .qty strong,
.product-modal [data-days],
.product-modal [data-modal-price]{
    transform:none !important;
    translate:none !important;
}


/* ===== V16 modal buttons: same-color highlight + pointer cursor ===== */

/* All clickable controls should clearly show the hand cursor */
button,
a,
[role="button"],
.product,
.product-modal .qty button,
.product-modal [data-minus],
.product-modal [data-plus],
.product-modal .modal-buy,
.product-modal .product-close{
    cursor:pointer !important;
}

/* Disabled buttons should not pretend to be clickable */
button:disabled,
[aria-disabled="true"]{
    cursor:not-allowed !important;
}

/* Gray quantity buttons: no outer glow, only brighter gray fill */
.product-modal .qty button,
.product-modal [data-minus],
.product-modal [data-plus]{
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease !important;
}

.product-modal .qty button:hover,
.product-modal [data-minus]:hover,
.product-modal [data-plus]:hover{
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
    background:#414145 !important;
    border-color:#4b4b50 !important;
    color:#fff !important;
}

.product-modal .qty button:active,
.product-modal [data-minus]:active,
.product-modal [data-plus]:active{
    transform:none !important;
    box-shadow:none !important;
    background:#48484d !important;
}

/* Green buy/price button: no glow around it, just a brighter green button */
.product-modal .modal-buy{
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease !important;
}

.product-modal .modal-buy:hover{
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
    background:#5b7835 !important;
    border-color:#66853d !important;
    color:#ddff9a !important;
}

.product-modal .modal-buy:active{
    transform:none !important;
    box-shadow:none !important;
    background:#64833a !important;
}


/* ===== V17 minimum quantity minus button ===== */
/* At quantity 1 the minus button is visibly inactive. */
.product-modal [data-minus]:disabled,
.product-modal [data-minus].qty-min-disabled{
    background:#29292c !important;
    border-color:#303034 !important;
    color:#77777d !important;
    opacity:.72 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
    cursor:not-allowed !important;
}

/* Do not brighten a disabled minus button on hover. */
.product-modal [data-minus]:disabled:hover,
.product-modal [data-minus].qty-min-disabled:hover{
    background:#29292c !important;
    border-color:#303034 !important;
    color:#77777d !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
    cursor:not-allowed !important;
}

/* Once quantity > 1, it returns to the normal clickable gray state. */
.product-modal [data-minus]:not(:disabled){
    cursor:pointer !important;
}


/* ===== V18 stable rapid quantity/price animation ===== */
/* Fixed geometry prevents animated numbers from resizing their controls. */
.product-modal .qty strong{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:72px;
    height:40px;
    overflow:hidden !important;
    white-space:nowrap;
    contain:layout paint;
}

.product-modal [data-days]{
    display:inline-grid !important;
    place-items:center;
    width:2.5ch;
    min-width:2.5ch !important;
    max-width:2.5ch;
    overflow:hidden !important;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    contain:layout paint;
}

.product-modal [data-modal-price]{
    display:inline-grid !important;
    place-items:center;
    min-width:4.5ch;
    overflow:hidden !important;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    contain:layout paint;
}

/* Both rolling layers occupy the exact same geometry. */
.product-modal .roll-box{
    display:grid !important;
    grid-template-areas:"number";
    align-items:center;
    justify-items:center;
    width:100%;
    height:1em;
    line-height:1em;
    overflow:hidden;
}

.product-modal .roll-old,
.product-modal .roll-new{
    grid-area:number;
    position:relative;
    width:100%;
    text-align:center;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/* Rapid repeated clicks must never stack visual layers. */
.product-modal [data-days] > .roll-box,
.product-modal [data-modal-price] > .roll-box{
    max-width:100%;
}

/* V25 server monitor */
.online.offline{color:#8d8994}
.online.offline i{background:#77727e;box-shadow:none}

/* V28: header without site logo */
.topbar{grid-template-columns:1fr auto}
.topbar .nav{justify-self:start}
.topbar .actions{justify-self:end}
#storeServerTabs .server-tab{pointer-events:auto;position:relative;z-index:3}


/* ===== V29: раскрывающиеся категории магазина ===== */
.catalog-filter.category-dropdown{position:relative;z-index:25;display:block}
.category-trigger{height:42px;min-width:176px;padding:0 13px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.055);color:#f5f3fa;display:flex;align-items:center;gap:10px;font:700 14px/1 inherit;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.category-trigger:hover,.category-dropdown.open .category-trigger{background:rgba(255,255,255,.105);border-color:rgba(255,255,255,.16);color:#fff}
.category-icon{font-size:17px;color:#c9c5d1;font-weight:500}
.category-chevron{margin-left:auto;font-size:7px;color:#aaa5b4;transform:rotate(45deg);transition:transform .24s ease,color .2s ease}
.category-dropdown.open .category-chevron{transform:rotate(225deg);color:#fff}
.category-menu{position:absolute;top:calc(100% + 7px);right:0;width:210px;padding:7px;background:rgba(24,24,27,.98);border:1px solid rgba(255,255,255,.10);border-radius:10px;box-shadow:0 18px 45px rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .2s ease,transform .2s ease,visibility .2s;max-height:420px;overflow:auto}
.category-dropdown.open .category-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.category-option{width:100%;min-height:40px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#aaa6b3;display:flex;align-items:center;gap:11px;text-align:left;font:700 14px/1.2 inherit;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.category-option:hover{background:rgba(255,255,255,.065);color:#f4f2f7}
.category-option.active{background:rgba(255,255,255,.13);color:#fff}
.cat-option-icon{width:20px;flex:0 0 20px;text-align:center;color:#aaa6b3;font-size:16px;transition:color .18s ease}
.category-option:hover .cat-option-icon,.category-option.active .cat-option-icon{color:#f2eff7}
.category-menu::-webkit-scrollbar{width:0;height:0}.category-menu{scrollbar-width:none}
@media(max-width:700px){.category-trigger{min-width:155px}.category-menu{right:0;width:200px}}

/* ===== V30 category dropdown alignment + hover ===== */
.catalog-filter.category-dropdown{width:176px}
.category-trigger{width:100%;min-width:0;transform:none;transform-origin:center;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .18s ease}
.category-trigger:not(:disabled):hover{transform:scale(1.035)}
.category-trigger:not(:disabled):active{transform:scale(.985)}
.category-dropdown.open .category-trigger{transform:none}
.category-menu{left:0;right:auto;width:100%;box-sizing:border-box;transform-origin:top center}
.category-option:hover{transform:none}
@media(max-width:700px){.catalog-filter.category-dropdown{width:155px}.category-trigger{width:100%;min-width:0}.category-menu{left:0;right:auto;width:100%}}

/* ===== V31: restore header logo, remove hero background image ===== */
.topbar{display:flex!important;grid-template-columns:none!important}
.topbar .brand{display:flex!important;flex:0 0 auto}
.topbar .nav{flex:1;justify-self:auto}
.topbar .actions{margin-left:auto;justify-self:auto}
.hero-banner,.hero-overlay{display:none!important;background:none!important;background-image:none!important}
.hero{background:none!important;background-image:none!important}
.hero-content{padding-top:42px!important}
.hero-stats{margin-top:0!important;padding-bottom:42px}
@media(max-width:980px){.topbar{gap:18px}.brand-text{display:inline}.hero-content{padding-top:30px!important}.hero-stats{padding:0 24px 30px}}
@media(max-width:560px){.brand-text{display:none}}


/* ===== V32: compact animated header navigation ===== */
.topbar .nav{
  position:relative;
  flex:0 1 auto;
  display:flex;
  gap:3px;
  padding:4px;
  margin-left:auto;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(18,17,21,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  isolation:isolate;
}
.topbar .nav a{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 14px;
  border-radius:8px;
  background:transparent!important;
  color:#8f8b96;
  font-size:14px;
  font-weight:750;
  white-space:nowrap;
  transition:color .22s ease,transform .18s ease;
}
.topbar .nav a:hover{color:#e8e5ec;transform:scale(1.025)}
.topbar .nav a.active{color:#fff;transform:none}
.topbar .nav .nav-icon{font-size:16px;line-height:1;color:#aaa6b1;transition:color .22s ease,transform .25s ease}
.topbar .nav a:hover .nav-icon{color:#e5e1e9;transform:scale(1.08)}
.topbar .nav a.active .nav-icon{color:#fff}
.topbar .nav-slider{
  position:absolute;
  z-index:1;
  left:4px;
  top:4px;
  height:38px;
  width:0;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;
  pointer-events:none;
  transition:transform .34s cubic-bezier(.22,.8,.22,1),width .34s cubic-bezier(.22,.8,.22,1),opacity .18s ease;
}
@media(max-width:980px){
 .topbar .nav{position:absolute;left:15px;right:15px;top:70px;margin-left:0;padding:8px;display:none;flex-direction:column;gap:4px;background:#111017}
 .topbar .nav.open{display:flex}
 .topbar .nav a{width:100%;height:42px}
 .topbar .nav-slider{display:none}
 .topbar .nav a.active{background:rgba(255,255,255,.10)!important}
}

/* V33 — total live online next to the EXTASY logo */
.header-online{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  margin-left:2px;
  color:#f2f0f5;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.header-online b{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.online-signal{
  position:relative;
  width:10px;
  height:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 10px;
}
.online-signal i{
  position:relative;
  z-index:2;
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#83c83f;
  box-shadow:0 0 7px rgba(131,200,63,.55);
}
.online-signal::before,.online-signal::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border:1px solid rgba(131,200,63,.7);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.75);
  opacity:0;
  animation:extasy-online-wave 2s ease-out infinite;
}
.online-signal::after{animation-delay:1s}
@keyframes extasy-online-wave{
  0%{transform:translate(-50%,-50%) scale(.7);opacity:.75}
  75%,100%{transform:translate(-50%,-50%) scale(2.25);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .online-signal::before,.online-signal::after{animation:none}
}
@media (max-width:820px){
  .header-online{font-size:12px;gap:6px}
}
@media (max-width:620px){
  .header-online span:last-child{font-size:0}
  .header-online span:last-child::before{content:"Онлайн: ";font-size:12px}
  .header-online b{font-size:12px}
}

/* V34 SAFE — online closer to logo; no layout changes elsewhere */
.topbar .brand{margin-right:0!important}
.topbar .header-online{margin-left:-8px!important}

/* V37 — product cards matched to reference */
.product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.product{height:288px;min-height:288px;padding:0;border-radius:0;background:#17171a}
.product-media{position:relative;height:224px;padding:12px 12px 0;align-items:center;justify-content:center}
.product-media:after{top:auto;bottom:7px;width:68%;height:24px}
.product-media img{width:100%;height:100%;object-fit:contain;transform:none}
.product:hover .product-media img{transform:scale(1.035)}
.product-info{left:12px;right:12px;bottom:10px;height:48px;display:flex;flex-direction:column;justify-content:flex-end}
.product h3{margin:0 42px 2px 0;font-size:14px;line-height:16px;font-weight:850;letter-spacing:-.15px;color:#f1eff3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-bottom{min-height:20px;padding:0;align-items:center}
.price{gap:6px;line-height:1}
.price strong{font-size:15px;line-height:18px;font-weight:850;letter-spacing:-.15px}
.price del{font-size:12px;line-height:16px;color:#716d77}
.buy{right:0;bottom:0;width:34px;height:34px;border-radius:4px;font-size:13px;background:#25262a}
.badge{z-index:4;top:12px;right:12px;padding:5px 7px;border-radius:5px;font-size:10px}
@media(max-width:1100px){.product{height:288px;min-height:288px}}
@media(max-width:620px){.product{height:260px;min-height:260px}.product-media{height:198px}}

/* V38 — discount badge + savings tooltip */
.discount-badge{
  position:absolute;
  z-index:8;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:25px;
  padding:0 7px 0 6px;
  border-radius:5px;
  background:rgba(57,74,36,.96);
  color:#a9d66e;
  font-size:13px;
  line-height:25px;
  font-weight:850;
  cursor:help;
  user-select:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.discount-badge:hover,.discount-badge:focus-visible{
  background:rgba(68,88,42,.98);
  color:#b8e47c;
  transform:scale(1.035);
  outline:none;
}
.discount-tag-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;
  height:13px;
  color:#9ccb62;
  font-size:11px;
  transform:rotate(45deg);
}
.discount-tooltip{
  position:absolute;
  left:0;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:190px;
  padding:8px 10px;
  border-radius:6px;
  background:#4b652b;
  color:#bdf27d;
  font-size:13px;
  line-height:17px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px) scale(.97);
  transform-origin:left bottom;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.discount-tooltip:after{
  content:"";
  position:absolute;
  left:15px;
  top:100%;
  border:6px solid transparent;
  border-top-color:#4b652b;
}
.discount-badge:hover .discount-tooltip,
.discount-badge:focus-visible .discount-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* V39 — discount tooltip must float above the entire shop */
.product-grid,
.product{
  overflow:visible !important;
}
.product{
  position:relative;
}
.product:hover,
.product:focus-within{
  z-index:50;
}
.discount-badge{
  z-index:1000 !important;
}
.discount-tooltip{
  z-index:1001 !important;
  overflow:visible;
  pointer-events:none;
}
/* Keep the image itself clipped visually without clipping the tooltip. */
.product-media{
  overflow:hidden;
}

/* V40 — visual overflow must never enlarge the product click target */
.discount-tooltip{pointer-events:none!important}

/* V41 — decorative product glow is visual only, never part of mouse hit-testing */
.product::after{
  pointer-events:none !important;
  user-select:none;
}
.product::before{
  pointer-events:none !important;
}
.product-media::after,
.product-media::before{
  pointer-events:none !important;
}

/* V42 — remove obsolete giant hero decorative pseudo-elements */
.hero::before,
.hero::after{
  content:none !important;
  display:none !important;
  pointer-events:none !important;
}

/* V43 — stronger product prices, discounted price in reference green */
.product .price strong{
  font-size:15px;
  line-height:18px;
  font-weight:900 !important;
  letter-spacing:-.2px;
  color:#f4f2f5;
}
.product .price del{
  font-size:13px;
  line-height:18px;
  font-weight:800;
  color:#77747d;
}
.product:has(.discount-badge) .price strong{
  color:#83b94b !important;
  font-weight:900 !important;
}

/* V44 — discount badge under product title inside product modal */
.modal-discount-badge{
  position:relative;
  z-index:30;
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  height:25px;
  margin:7px 0 10px;
  padding:0 7px 0 6px;
  border-radius:5px;
  background:rgba(57,74,36,.96);
  color:#a9d66e;
  font-size:13px;
  line-height:25px;
  font-weight:850;
  cursor:help;
  user-select:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.modal-discount-badge:hover,.modal-discount-badge:focus-visible{
  background:rgba(68,88,42,.98);
  color:#b8e47c;
  transform:scale(1.035);
  outline:none;
}
.modal-discount-tag{
  display:inline-flex;
  width:13px;
  height:13px;
  align-items:center;
  justify-content:center;
  color:#9ccb62;
  font-size:11px;
  transform:rotate(45deg);
}
.modal-discount-tooltip{
  position:absolute;
  z-index:100;
  left:0;
  bottom:calc(100% + 9px);
  width:max-content;
  padding:8px 10px;
  border-radius:6px;
  background:#4b652b;
  color:#bdf27d;
  font-size:13px;
  line-height:17px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.32);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px) scale(.97);
  transform-origin:left bottom;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.modal-discount-tooltip:after{
  content:"";
  position:absolute;
  left:15px;
  top:100%;
  border:6px solid transparent;
  border-top-color:#4b652b;
}
.modal-discount-badge:hover .modal-discount-tooltip,
.modal-discount-badge:focus-visible .modal-discount-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* V45 — modal discount strictly below product title */
.modal-product-heading{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  width:max-content;
  max-width:100%;
}
.modal-product-heading h2{
  display:block !important;
  width:auto !important;
  margin-bottom:0 !important;
}
.modal-product-heading .modal-discount-badge{
  display:inline-flex !important;
  align-self:flex-start !important;
  margin:8px 0 10px !important;
}

/* V46 — compact server monitoring fixed to the left side */
.server-monitor-left{
  position:fixed;
  z-index:70;
  left:14px;
  top:94px;
  width:292px;
  max-height:calc(100vh - 112px);
  padding:12px;
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(13,12,18,.92);
  box-shadow:0 16px 45px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
  scrollbar-width:none;
}
.server-monitor-left::-webkit-scrollbar{display:none}
.server-monitor-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:2px 3px 11px;
  color:#c7bdde;
  font-size:10px;
  letter-spacing:2px;
}
.server-monitor-line{width:22px;height:2px;background:#9d4dff}
.server-monitor-left .server-grid{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.server-monitor-left .server{
  min-width:0;
  padding:13px;
  border-radius:10px;
  background:rgba(24,23,29,.94);
}
.server-monitor-left .server-top{
  gap:8px;
  align-items:flex-start;
}
.server-monitor-left .server h3{
  margin:0;
  font-size:13px;
  line-height:17px;
  white-space:normal;
}
.server-monitor-left .server-mode{
  display:block;
  margin-top:4px;
  font-size:10px;
}
.server-monitor-left .online{
  flex:0 0 auto;
  font-size:9px;
}
.server-monitor-left .server-progress{margin-top:11px;height:5px}
.server-monitor-left .server-meta{
  margin-top:7px;
  gap:5px;
  flex-direction:column;
  align-items:flex-start;
  font-size:9px;
}
.server-monitor-left .server-actions{
  margin-top:10px;
  padding-top:10px;
  gap:8px;
  align-items:center;
}
.server-monitor-left .server-actions code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;
  white-space:nowrap;
}
.server-monitor-left .server-actions .secondary{
  flex:0 0 auto;
  min-height:30px;
  padding:0 9px;
  font-size:9px;
  border-radius:7px;
}
.server-monitor-left .loading{
  padding:14px 6px;
  font-size:11px;
}
/* Old full-width monitoring section no longer occupies page space. */
section#servers{display:none!important}

@media(max-width:1180px){
  .server-monitor-left{width:250px;left:10px}
}
@media(max-width:900px){
  .server-monitor-left{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    max-height:none;
    margin:14px 16px 24px;
  }
  .server-monitor-left .server-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .server-monitor-left .server-grid{grid-template-columns:1fr}
}

/* V47 — hidden compact server drawer */
.server-monitor-left{
  position:fixed!important;
  z-index:90!important;
  left:0!important;
  top:94px!important;
  width:270px!important;
  max-height:calc(100vh - 112px)!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0 12px 12px 0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  transform:translateX(-100%)!important;
  transition:transform .38s cubic-bezier(.22,.8,.22,1)!important;
}
.server-monitor-left.open{transform:translateX(0)!important}
.server-monitor-panel{
  max-height:calc(100vh - 112px);
  padding:11px;
  overflow-y:auto;
  scrollbar-width:none;
  border:1px solid rgba(255,255,255,.09);
  border-left:0;
  border-radius:0 12px 12px 0;
  background:rgba(13,12,18,.96);
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
}
.server-monitor-panel::-webkit-scrollbar{display:none}
.server-monitor-handle{
  position:absolute;
  left:100%;
  top:18px;
  width:31px;
  height:72px;
  padding:0;
  border:1px solid rgba(157,77,255,.32);
  border-left:0;
  border-radius:0 10px 10px 0;
  background:rgba(22,19,29,.96);
  color:#cbb9e9;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:7px 0 24px rgba(0,0,0,.24);
  transition:background .2s ease,width .2s ease;
}
.server-monitor-handle:hover{width:35px;background:rgba(35,28,46,.98)}
.monitor-pulse{
  position:relative;
  width:7px;height:7px;border-radius:50%;
  background:#9d4dff;
  box-shadow:0 0 9px rgba(157,77,255,.85);
}
.monitor-pulse:before,.monitor-pulse:after{
  content:"";position:absolute;inset:-1px;border:1px solid rgba(157,77,255,.7);
  border-radius:50%;animation:monitor-wave 1.8s ease-out infinite;
}
.monitor-pulse:after{animation-delay:.9s}
@keyframes monitor-wave{
  0%{transform:scale(.7);opacity:.8}
  100%{transform:scale(3);opacity:0}
}
.monitor-handle-icon{
  font-size:21px;line-height:1;font-weight:900;
  transition:transform .38s cubic-bezier(.22,.8,.22,1);
}
.server-monitor-left.open .monitor-handle-icon{transform:rotate(180deg)}

.server-monitor-left .server-monitor-head{padding:2px 2px 9px}
.server-monitor-left .server-grid{display:flex!important;flex-direction:column!important;gap:7px!important}
.server-monitor-left .server{
  min-width:0!important;
  padding:11px!important;
  border-radius:9px!important;
  background:rgba(25,24,30,.96)!important;
}
.server-monitor-left .server-top{display:flex;align-items:flex-start;justify-content:space-between;gap:7px}
.server-monitor-left .server h3{
  margin:0!important;
  max-width:175px;
  font-size:12px!important;
  line-height:15px!important;
  font-weight:900!important;
  color:#f5f3f7!important;
}
.server-monitor-left .online{
  display:flex;align-items:center;gap:4px;
  font-size:8px!important;font-weight:900!important;
}
.server-monitor-left .server-progress{height:4px!important;margin-top:9px!important}
.server-compact-meta{
  display:flex;align-items:baseline;gap:5px;margin-top:7px;
}
.server-compact-meta strong{
  color:#f6f4f8;font-size:15px;line-height:17px;font-weight:900;
}
.server-compact-meta strong small{font-size:10px;font-weight:800;color:#8f8999}
.server-compact-meta>span{font-size:9px;font-weight:800;color:#8f8999}
.server-monitor-left .server-actions{
  display:flex!important;align-items:center!important;gap:7px!important;
  margin-top:8px!important;padding-top:8px!important;
}
.server-monitor-left .server-actions code{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px!important;font-weight:800!important;color:#bbb2ce;
}
.server-monitor-left .server-actions .secondary{
  width:29px!important;height:27px!important;min-height:27px!important;
  padding:0!important;border-radius:6px!important;font-size:12px!important;
}
.server-monitor-left .server-mode,.server-monitor-left .server-meta{display:none!important}

@media(max-width:900px){
 .server-monitor-left{
   position:fixed!important;left:0!important;top:82px!important;width:min(270px,calc(100vw - 42px))!important;
   max-height:calc(100vh - 96px)!important;margin:0!important;
   transform:translateX(-100%)!important;
 }
 .server-monitor-left.open{transform:translateX(0)!important}
 .server-monitor-panel{max-height:calc(100vh - 96px)}
}
@media(prefers-reduced-motion:reduce){
 .server-monitor-left,.monitor-handle-icon{transition:none!important}
 .monitor-pulse:before,.monitor-pulse:after{animation:none!important}
}

/* V48 — longer handle, scale-only hover, connect + clean copy icon */
.server-monitor-handle{
  height:108px!important;
  width:31px!important;
  transform-origin:left center;
  transition:transform .18s ease,background .18s ease!important;
}
.server-monitor-handle:hover{
  width:31px!important;
  transform:scale(1.07);
  background:rgba(35,28,46,.98);
}
.server-monitor-left .server-actions{
  gap:6px!important;
}
.server-copy-btn{
  position:relative;
  flex:0 0 29px!important;
  width:29px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
}
.copy-icon{
  position:absolute;
  left:9px;
  top:8px;
  width:9px;
  height:9px;
  border:1.5px solid #c9c3d1;
  border-radius:2px;
}
.copy-icon:before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  left:-4px;
  top:-4px;
  border:1.5px solid #8f8999;
  border-radius:2px;
  background:#242329;
}
.server-copy-btn:hover .copy-icon{border-color:#fff}
.server-copy-btn:hover .copy-icon:before{border-color:#c9c3d1}
.server-connect-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 9px;
  border:1px solid rgba(157,77,255,.38);
  border-radius:6px;
  background:rgba(157,77,255,.13);
  color:#d8c4f5;
  text-decoration:none;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.45px;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.server-connect-btn:hover{
  transform:scale(1.045);
  background:rgba(157,77,255,.23);
  color:#fff;
}

/* V49 — floating pulse orb + online bar tooltip */
.server-monitor-left{
  /* panel remains fully hidden; the orb floats separately outside it */
}
.server-monitor-handle{
  position:absolute!important;
  left:calc(100% + 18px)!important;
  top:24px!important;
  width:46px!important;
  height:46px!important;
  padding:0!important;
  border:1px solid rgba(157,77,255,.48)!important;
  border-radius:50%!important;
  background:rgba(18,15,25,.96)!important;
  box-shadow:0 0 20px rgba(157,77,255,.22),0 10px 30px rgba(0,0,0,.32)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  transform-origin:center!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.server-monitor-handle:hover{
  width:46px!important;
  transform:scale(1.09)!important;
  background:rgba(29,22,40,.98)!important;
  box-shadow:0 0 27px rgba(157,77,255,.38),0 10px 30px rgba(0,0,0,.34)!important;
}
.server-monitor-left.open .server-monitor-handle{
  left:calc(100% + 12px)!important;
}
.monitor-pulse{
  position:relative!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  background:#9d4dff!important;
  box-shadow:0 0 13px rgba(157,77,255,.95)!important;
}
.monitor-pulse:before,.monitor-pulse:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:18px;height:18px;
  margin:-9px 0 0 -9px;
  border:1px solid rgba(157,77,255,.7);
  border-radius:50%;
  animation:monitor-orb-wave 2s ease-out infinite!important;
}
.monitor-pulse:after{animation-delay:1s!important}
@keyframes monitor-orb-wave{
  0%{transform:scale(.7);opacity:.85}
  100%{transform:scale(2.35);opacity:0}
}
.monitor-handle-icon{display:none!important}

.server-monitor-left .server-progress{
  position:relative;
  cursor:help;
  overflow:visible!important;
}
.server-progress-tooltip{
  position:absolute;
  z-index:300;
  left:50%;
  bottom:calc(100% + 10px);
  min-width:170px;
  padding:8px 12px;
  border:1px solid rgba(157,77,255,.7);
  border-radius:8px;
  background:rgba(18,17,22,.98);
  color:#f5f3f7;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.38);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,5px) scale(.97);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.server-progress-tooltip:after{
  content:"";
  position:absolute;
  left:50%;top:100%;
  margin-left:-6px;
  border:6px solid transparent;
  border-top-color:rgba(157,77,255,.7);
}
.server-progress-tooltip b{
  display:block;
  font-size:11px;
  line-height:16px;
  font-weight:850;
  white-space:nowrap;
}
.server-progress:hover .server-progress-tooltip,
.server-progress:focus .server-progress-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
  outline:none;
}
@media(max-width:900px){
  .server-monitor-handle{left:calc(100% + 14px)!important}
}
@media(prefers-reduced-motion:reduce){
  .monitor-pulse:before,.monitor-pulse:after{animation:none!important}
}

/* V50 — neutral graphite page background */
html,body{
  background:#1b1b1b!important;
}
body::before,body::after{
  background:none!important;
}
main,.hero,.section,.section.darker{
  background-color:transparent!important;
}

/* V51 — unified graphite surfaces
   One calm neutral palette; purple/green remain only as functional accents. */
:root{
  --v51-page:#1b1b1b;
  --v51-surface:#202020;
  --v51-surface-2:#242424;
  --v51-surface-hover:#292929;
  --v51-border:rgba(255,255,255,.075);
  --v51-border-strong:rgba(255,255,255,.11);
}
html,body{background:var(--v51-page)!important}

/* Main neutral surfaces */
header,.header,.site-header,
.product,.product-card,
.category-dropdown,.category-menu,.category-list,
.cart,.cart-panel,.cart-drawer,
.modal-card,.modal-content,.modal-panel,
.server-monitor-panel,
.server-monitor-left .server,
.store-server-tabs,.server-tabs,
.nav-segment,.nav-wrap,
.dropdown-menu{
  background:var(--v51-surface)!important;
  border-color:var(--v51-border)!important;
  box-shadow:none!important;
}

/* Slightly raised/interactive inner elements */
.product-info,.product-footer,
.modal-card input,.modal-card select,.modal-card textarea,
.cart input,.cart select,
.server-monitor-left .server-actions,
.category-menu button,.category-list button,
.store-server-tabs button,.server-tabs button{
  background-color:var(--v51-surface-2)!important;
  border-color:var(--v51-border)!important;
}

/* Hover remains subtle, without changing the visual family */
.product:hover,.product-card:hover,
.category-menu button:hover,.category-list button:hover{
  background-color:var(--v51-surface-hover)!important;
  border-color:var(--v51-border-strong)!important;
}

/* Keep cards readable but remove decorative gradients */
.product,.product-card,.modal-card,.modal-content,.modal-panel,
.server-monitor-panel,.server-monitor-left .server{
  background-image:none!important;
}

/* Floating server orb uses the same graphite shell */
.server-monitor-handle{
  background:var(--v51-surface-2)!important;
  border-color:var(--v51-border-strong)!important;
}
.server-monitor-handle:hover{background:var(--v51-surface-hover)!important}

/* Don't neutralize meaningful status/action colors:
   discount green, online green and purple active accents stay intact. */

/* V52 — product area/card is one continuous graphite surface */
.products,.products-grid,.product-grid,.store-products,.shop-products{
  background:#1b1b1b!important;
  background-image:none!important;
}

/* One card = one color. No separate rectangle behind title/price. */
.product,.product-card{
  background:#202020!important;
  background-image:none!important;
}
.product-media,.product-image,.product-info,.product-footer,
.product .price,.product .product-price{
  background:#202020!important;
  background-color:#202020!important;
  background-image:none!important;
}

/* Prevent older pseudo layers from creating a different colored patch */
.product-info::before,.product-info::after,
.product-footer::before,.product-footer::after{
  background:none!important;
  box-shadow:none!important;
}

/* Keep the cart control visually separate, but not the whole info footer */
.product-info .secondary,
.product-footer .secondary,
.product-info button,
.product-footer button{
  background:#242424!important;
}

/* V53 — product hover is one monolithic surface */
.product,.product-card{
  position:relative;
  overflow:hidden!important;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease!important;
}

/* Every internal visual region inherits the card surface in both states */
.product-media,.product-image,.product-info,.product-footer,
.product .price,.product .product-price{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-color:transparent!important;
}

/* Hover belongs only to the outer card */
.product:hover,.product-card:hover{
  background:#292929!important;
  background-color:#292929!important;
  background-image:none!important;
}
.product:hover .product-media,
.product:hover .product-image,
.product:hover .product-info,
.product:hover .product-footer,
.product:hover .price,
.product:hover .product-price,
.product-card:hover .product-media,
.product-card:hover .product-info,
.product-card:hover .product-footer{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Disable any legacy overlay that could divide the card on hover */
.product:hover::before,.product:hover::after,
.product-card:hover::before,.product-card:hover::after,
.product-media:hover::before,.product-media:hover::after,
.product-info:hover::before,.product-info:hover::after,
.product-footer:hover::before,.product-footer:hover::after{
  background:none!important;
  box-shadow:none!important;
}

/* Cart button stays a control, without tinting its parent block */
.product .secondary,.product button,
.product-card .secondary,.product-card button{
  position:relative;
  z-index:2;
}

/* V57 — ONLY discount hover message above everything */
.discount-badge{
  overflow:visible!important;
}
.discount-badge:hover{
  z-index:2147483646!important;
}
.discount-badge::before,
.discount-badge::after,
.discount-badge .discount-tooltip{
  z-index:2147483647!important;
  pointer-events:none!important;
}

/* Allow only the discount message to escape clipping. No visual changes. */
.product:has(.discount-badge:hover),
.product-media:has(.discount-badge:hover),
.products:has(.discount-badge:hover),
.product-grid:has(.discount-badge:hover),
.products-grid:has(.discount-badge:hover){
  overflow:visible!important;
}
.product:has(.discount-badge:hover){
  z-index:2147483645!important;
}

/* V60 — bottom graphite gradient OVER the product image */
.product-media{
  position:relative!important;
}

/* Gradient sits directly on top of the lower part of the image */
.product-media::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:3!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:76px!important;
  background:linear-gradient(
    to bottom,
    rgba(32,32,32,0) 0%,
    rgba(32,32,32,.10) 18%,
    rgba(32,32,32,.32) 42%,
    rgba(32,32,32,.68) 72%,
    #202020 100%
  )!important;
  box-shadow:none!important;
}

/* On card hover the fade ends in the card's hover graphite */
.product:hover .product-media::after{
  background:linear-gradient(
    to bottom,
    rgba(41,41,41,0) 0%,
    rgba(41,41,41,.10) 18%,
    rgba(41,41,41,.32) 42%,
    rgba(41,41,41,.68) 72%,
    #292929 100%
  )!important;
}

/* V64 CLEAN — только уведомления покупки */
.purchase-notifications{position:fixed;z-index:2147483647;right:18px;top:92px;width:min(356px,calc(100vw - 28px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.purchase-notification{position:relative;display:grid;grid-template-columns:22px 1fr 28px;gap:10px;min-height:76px;padding:13px 11px 12px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:#262626;box-shadow:0 14px 36px rgba(0,0,0,.38);color:#f2f0f4;overflow:hidden;pointer-events:auto;opacity:0;transform:translateX(34px) scale(.98);transition:opacity .22s ease,transform .28s cubic-bezier(.22,.8,.22,1)}
.purchase-notification.visible{opacity:1;transform:translateX(0) scale(1)}.purchase-notification.closing{opacity:0;transform:translateX(28px) scale(.98)}
.purchase-notification-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#ff676d;color:#242424;font-size:14px;font-weight:1000;line-height:1}
.purchase-notification-text strong{display:block;margin-bottom:4px;font-size:14px;line-height:18px;font-weight:900}.purchase-notification-text small{display:block;color:#aaa6ae;font-size:12px;line-height:16px;font-weight:650}
.purchase-notification-close{width:28px;height:28px;padding:0;border:0;border-radius:5px;background:#303030;color:#85818a;font-size:18px;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.purchase-notification-close:hover{background:#383838;color:#ddd9e0;transform:scale(1.05)}
.purchase-notification-progress{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#d95864;transform-origin:left center;animation:purchase-notification-progress 5s linear forwards}
@keyframes purchase-notification-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:620px){.purchase-notifications{right:10px;top:76px;width:calc(100vw - 20px)}}

/* V67 — Steam account UI only. Existing shop/server monitoring styles above are untouched. */
.account-actions{position:relative}.steam-login-green,.wallet-pill{height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:7px;text-decoration:none;font-size:14px;font-weight:800}.steam-login-green{background:#46582a;color:#b9e66d}.steam-login-green:hover{background:#526731}.steam-round{font-size:18px}.wallet-pill{background:#46582a;color:#d7ec9b}.wallet-icon{color:#b9e66d}.account-menu-wrap{position:relative}.account-avatar-btn{height:44px;display:flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;cursor:pointer}.account-avatar-btn img,.account-avatar-fallback{width:42px;height:42px;border-radius:8px;object-fit:cover}.account-avatar-fallback{display:grid;place-items:center;background:#f0f0f2;color:#171719;font-size:24px;font-weight:1000}.account-avatar-btn i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #8d8992;transition:.18s}.account-avatar-btn[aria-expanded="true"] i{transform:rotate(180deg)}.account-dropdown{position:absolute;right:0;top:52px;width:174px;padding:7px;background:#1d1d1f;border:1px solid #343438;border-radius:8px;box-shadow:0 16px 40px #0008;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:.18s;z-index:10000}.account-dropdown.open{opacity:1;visibility:visible;transform:none}.account-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:6px;color:#bcb8c4;text-decoration:none;font-size:13px;font-weight:800}.account-dropdown a:hover{background:#28282b;color:#fff}.account-dropdown .logout-link{color:#ff656d}.account-dropdown span{width:17px;text-align:center}@media(max-width:720px){.wallet-pill{padding:0 10px}.account-dropdown{right:0}}


/* V69 — меню профиля всегда поверх интерфейса */
header,
.header,
.site-header{
  overflow:visible!important;
}
.actions.account-actions,
.account-menu-wrap{
  position:relative;
  overflow:visible!important;
}
.account-menu-wrap{
  z-index:2147483646!important;
}
.account-avatar-btn{
  position:relative;
  z-index:2147483646!important;
}
.account-dropdown{
  z-index:2147483647!important;
}
.account-dropdown.open{
  z-index:2147483647!important;
}


/* V70 — весь header является верхним stacking context.
   Поэтому меню профиля физически выше выпадающего «Все товары». */
header.site-header,
.site-header,
body > header{
  position:relative!important;
  z-index:2147483600!important;
  isolation:isolate;
  overflow:visible!important;
}
main,
.hero,
.store,
#store,
.products,
.product-grid,
.products-grid,
.category-wrap,
.categories,
.category-dropdown,
.category-menu{
  z-index:auto;
}
.account-actions{
  position:relative!important;
  z-index:2147483640!important;
  overflow:visible!important;
}
.account-menu-wrap{
  position:relative!important;
  z-index:2147483641!important;
  overflow:visible!important;
}
.account-dropdown,
.account-dropdown.open{
  position:absolute!important;
  z-index:2147483647!important;
}

/* V76 navigation always starts at page top */
html{scroll-padding-top:0!important}

/* V78 — Steam icon inside green login button */
.steam-login-green{
  gap:8px!important;
}
.steam-logo-icon{
  position:relative!important;
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border:2px solid currentColor!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}
.steam-logo-icon:before{
  content:""!important;
  position:absolute!important;
  width:6px!important;height:6px!important;
  right:-1px!important;top:1px!important;
  border:2px solid currentColor!important;
  border-radius:50%!important;
  background:inherit!important;
  box-sizing:border-box!important;
}
.steam-logo-icon:after{
  content:""!important;
  position:absolute!important;
  width:8px!important;height:2px!important;
  left:5px!important;top:8px!important;
  background:currentColor!important;
  transform:rotate(-30deg)!important;
  transform-origin:left center!important;
  border-radius:2px!important;
}


/* V84 — лёгкое появление страниц без тяжёлых эффектов */
@keyframes extasy-page-soft-enter{
  0%{
    opacity:0;
    transform:translateY(7px);
    filter:blur(1.5px);
  }
  55%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
.page-soft-enter{
  animation:extasy-page-soft-enter .30s cubic-bezier(.22,.75,.22,1) both!important;
  will-change:opacity,transform,filter;
}
@media(prefers-reduced-motion:reduce){
  .page-soft-enter{animation:none!important}
}
\n/* V85 — серверы единым сегментом + плавный серый индикатор */\n#storeServerTabs.server-tabs{\n  position:relative!important;\n  display:flex!important;\n  align-items:stretch!important;\n  gap:0!important;\n  padding:3px!important;\n  background:#202020!important;\n  border:1px solid rgba(255,255,255,.075)!important;\n  border-radius:8px!important;\n  isolation:isolate;\n  overflow:hidden!important;\n}\n#storeServerTabs .server-tab{\n  position:relative!important;\n  z-index:2!important;\n  margin:0!important;\n  border:0!important;\n  border-radius:6px!important;\n  background:transparent!important;\n  box-shadow:none!important;\n  color:#a8a4b2!important;\n  transition:color .2s ease!important;\n}\n#storeServerTabs .server-tab+.server-tab{border-left:0!important}\n#storeServerTabs .server-tab.active{\n  background:transparent!important;\n  color:#fff!important;\n  border:0!important;\n  box-shadow:none!important;\n}\n#storeServerTabs .server-tab-slider{\n  position:absolute!important;\n  z-index:1!important;\n  left:0!important;\n  top:3px!important;\n  height:calc(100% - 6px)!important;\n  width:0;\n  opacity:0;\n  pointer-events:none!important;\n  border-radius:6px!important;\n  background:#454547!important;\n  border:1px solid rgba(255,255,255,.09)!important;\n  box-sizing:border-box!important;\n  transition:transform .28s cubic-bezier(.22,.8,.22,1),width .28s cubic-bezier(.22,.8,.22,1),opacity .15s ease!important;\n}\n@media(prefers-reduced-motion:reduce){#storeServerTabs .server-tab-slider{transition:none!important}}\n

/* V86 — серверы как единая панель без разделителей, активный сегмент ездит как в шапке */
#storeServerTabs.server-tabs{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  padding:3px!important;
  background:#1d1d1f!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:8px!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
#storeServerTabs .server-tab{
  position:relative!important;
  z-index:2!important;
  height:40px!important;
  margin:0!important;
  padding:0 14px!important;
  border:0!important;
  outline:0!important;
  border-radius:6px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:#8f8d96!important;
  font-weight:800!important;
  white-space:nowrap!important;
  transition:color .22s ease!important;
}
#storeServerTabs .server-tab::before,
#storeServerTabs .server-tab::after{content:none!important;display:none!important}
#storeServerTabs .server-tab+.server-tab{border-left:0!important;margin-left:0!important}
#storeServerTabs .server-tab:hover{background:transparent!important;color:#c7c5cc!important;border:0!important}
#storeServerTabs .server-tab.active{background:transparent!important;color:#fff!important;border:0!important;box-shadow:none!important}
#storeServerTabs .server-tab-slider{
  position:absolute!important;
  z-index:1!important;
  top:3px!important;
  left:0!important;
  height:40px!important;
  width:0;
  opacity:0;
  margin:0!important;
  border:0!important;
  border-radius:6px!important;
  background:#4a4a4d!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
  pointer-events:none!important;
  transition:transform .28s cubic-bezier(.22,.8,.22,1),width .28s cubic-bezier(.22,.8,.22,1),opacity .14s ease!important;
}
\n/* V87 — видимый серый sliding indicator серверов */
#storeServerTabs.server-tabs{
  position:relative!important;
  isolation:isolate!important;
  gap:0!important;
  overflow:hidden!important;
}
#storeServerTabs .server-tab-slider{
  display:block!important;
  visibility:visible!important;
  position:absolute!important;
  left:0!important;
  top:3px!important;
  bottom:3px!important;
  height:auto!important;
  z-index:1!important;
  opacity:1;
  background:#505054!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:6px!important;
  box-shadow:none!important;
  pointer-events:none!important;
  will-change:transform,width!important;
  transition:transform .30s cubic-bezier(.22,.8,.22,1),width .30s cubic-bezier(.22,.8,.22,1)!important;
}
#storeServerTabs .server-tab{
  position:relative!important;
  z-index:2!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#storeServerTabs .server-tab.active{
  background:transparent!important;
  color:#fff!important;
}


/* V88 — slider выбора сервера ТОЛЬКО размером активной кнопки */
#storeServerTabs.server-tabs{
  position:relative!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  min-width:0!important;
  height:40px!important;
  padding:3px!important;
  gap:0!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  background:#202020!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:8px!important;
}

#storeServerTabs .server-tab{
  position:relative!important;
  z-index:2!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:34px!important;
  margin:0!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}

#storeServerTabs .server-tab.active{
  background:transparent!important;
  box-shadow:none!important;
}

#storeServerTabs .server-tab-slider{
  position:absolute!important;
  z-index:1!important;
  top:3px!important;
  left:0!important;
  height:34px!important;
  width:0;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:6px!important;
  background:#4b4b4d!important;
  box-shadow:none!important;
  pointer-events:none!important;
  opacity:0;
  transition:
    transform .28s cubic-bezier(.22,.8,.22,1),
    width .28s cubic-bezier(.22,.8,.22,1),
    opacity .12s ease!important;
}

/* Не даём старым V85/V86/V87 псевдо-slider'ам рисовать огромные блоки */
#storeServerTabs::before,
#storeServerTabs::after,
#storeServerTabs .server-tab::before,
#storeServerTabs .server-tab::after{
  content:none!important;
  display:none!important;
}


/* V89 — более компактная шапка: группы ближе друг к другу и к центру */
@media (min-width:1100px){
  .topbar-inner{
    width:calc(100% - 48px)!important;
    max-width:1260px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

.wallet-pill{font:inherit;border:0;cursor:pointer}.topup-modal{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:.22s}.topup-modal.open{opacity:1;visibility:visible;pointer-events:auto}.topup-backdrop{position:absolute;inset:0;background:#080809b8;backdrop-filter:blur(4px)}.topup-dialog{position:relative;width:min(468px,calc(100vw - 28px));padding:24px;box-sizing:border-box;border:1px solid #ffffff12;border-radius:16px;background:#1c1c1d;color:#eee;box-shadow:0 28px 80px #0008;transform:translateY(12px) scale(.97);opacity:0;transition:.28s cubic-bezier(.22,.8,.22,1)}.topup-modal.open .topup-dialog{transform:none;opacity:1}.topup-dialog h2{margin:2px 0 14px}.topup-subtitle{color:#aaa8b0;font-weight:750}.topup-close{position:absolute;right:22px;top:22px;width:36px;height:36px;border:0;border-radius:9px;background:#2b2b2d;color:#eee;font-size:20px;cursor:pointer}.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}.payment-method{height:64px;border:1px solid transparent;border-radius:8px;background:#303033;color:#ddd;display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;text-align:left}.payment-method span{display:flex;flex-direction:column}.payment-method small{color:#8d8b93}.payment-method.active,.bonus-grid button.active{background:#3d4e25;border-color:#607b34;color:#b9e879}.selected-payment{margin-top:10px;padding:12px 14px;border-radius:8px;background:#2d2d2f}.selected-payment small{color:#99979f}.selected-payment div{display:flex;justify-content:space-between;margin-top:5px}.topup-amount-head{display:grid;grid-template-columns:1fr 1fr;margin:14px 0 7px;color:#aaa8b0;font-weight:800}.topup-amount-row{display:grid;grid-template-columns:1fr 22px 1fr;gap:8px;align-items:center}.money-input,.money-output{height:42px;border-radius:8px;background:#2d2d2f;display:flex;align-items:center;padding:0 14px}.money-input input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:16px;font-weight:800}.money-output{justify-content:space-between}.money-output span{color:#e8c45b}.bonus-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}.bonus-grid button{height:64px;border:1px solid transparent;border-radius:8px;background:#2d2d2f;color:#aaa;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}.bonus-grid small{margin-top:4px}.bonus-progress{height:4px;margin:10px 0 18px;background:#29292b;border-radius:5px;overflow:hidden}.bonus-progress i{display:block;height:100%;width:0;background:#718f3d;transition:.25s}.topup-footer{display:grid;grid-template-columns:48px 1fr;gap:8px}.gift-button,.pay-button{height:48px;border:0;border-radius:8px;font-weight:900;cursor:pointer}.gift-button{background:#2d2d2f;color:#aaa}.pay-button{background:#3e5127;color:#b7e875;font-size:16px}.pay-button:disabled{opacity:.5}body.topup-open{overflow:hidden}@media(max-width:560px){.bonus-grid{grid-template-columns:repeat(3,1fr)}}

/* Элементы, геометрия которых не должна масштабироваться */
#storeServerTabs .server-tab:hover,
#storeServerTabs .server-tab:active,
.account-tabs button:hover,
.account-tabs button:active{
  transform:none!important;
}


/* V92 — hover без движения и без увеличения: только немного ярче */
button:not(:disabled),
.button,
.btn,
.wallet-pill,
.steam-login-green{
  transform:none!important;
}
button:not(:disabled):hover,
.button:hover,
.btn:hover,
.wallet-pill:hover,
.steam-login-green:hover{
  transform:none!important;
  filter:brightness(1.10)!important;
}
button:not(:disabled):active,
.button:active,
.btn:active,
.wallet-pill:active,
.steam-login-green:active{
  transform:none!important;
}
/* Слайдеры навигации должны оставаться без filter-анимации самих кнопок */
#storeServerTabs .server-tab:hover,
.account-tabs button:hover,
.nav a:hover{
  filter:none!important;
}

/* V93 — приглушённый зелёный, без стрелок number, zoom-in модалки */
.topup-dialog{
  transform:scale(.78)!important;
  opacity:0!important;
  transition:transform .30s cubic-bezier(.18,.82,.22,1),opacity .22s ease!important;
  transform-origin:center center!important;
}
.topup-modal.open .topup-dialog{
  transform:scale(1)!important;
  opacity:1!important;
}

/* number input: полностью убираем системные стрелки вверх/вниз */
.money-input input[type="number"]{
  appearance:textfield!important;
  -moz-appearance:textfield!important;
}
.money-input input[type="number"]::-webkit-inner-spin-button,
.money-input input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  margin:0!important;
}

/* Более тёмный/приглушённый фирменный зелёный */
.payment-method.active,
.bonus-grid button.active{
  background:#313d24!important;
  border-color:#465632!important;
  color:#9fc66c!important;
}
.payment-method.active small,
.bonus-grid button.active small{color:#7f9660!important}
.pay-button{
  background:#344325!important;
  color:#a9d46f!important;
}

/* Hover: только немного ярче, без движения и увеличения */
.payment-method:hover,
.bonus-grid button:hover,
.pay-button:hover,
.gift-button:hover,
.topup-close:hover{
  transform:none!important;
}
.payment-method.active:hover,
.bonus-grid button.active:hover{
  background:#3b4a2a!important;
  border-color:#566a3b!important;
  color:#b0dc78!important;
}
.pay-button:hover{background:#3e502b!important;color:#b7e77a!important}

/* V94 — лимит 100k + подарочное пополнение */
.gift-panel{max-height:0;opacity:0;overflow:hidden;margin:0;padding:0 0;border-top:0 solid rgba(255,255,255,.07);transform:translateY(-5px);transition:max-height .28s cubic-bezier(.22,.8,.22,1),opacity .18s ease,margin .28s ease,padding .28s ease,transform .28s ease,border-width .28s ease}
.topup-modal.gift-mode .gift-panel{max-height:128px;opacity:1;margin:4px 0 14px;padding:14px 0 0;border-top-width:1px;transform:none}
.gift-panel label{display:block;margin:0 0 7px;color:#aaa8b0;font-size:14px;font-weight:800}.gift-panel input{box-sizing:border-box;width:100%;height:44px;padding:0 13px;border:1px solid transparent;border-radius:8px;outline:0;background:#2d2d2f;color:#eee;font:700 15px/1 Arial,sans-serif;transition:border-color .18s,background .18s}.gift-panel input:focus{background:#313133;border-color:#465632}.gift-panel small{display:block;margin-top:7px;color:#85838b;font-size:11px;line-height:1.35}.gift-button{font-size:18px!important}.gift-button[aria-pressed="true"]{background:#313d24!important;color:#9fc66c!important}.gift-button[aria-pressed="true"]:hover{background:#3b4a2a!important;color:#b0dc78!important}
/* Диалог чуть расширяется только в подарочном режиме */
.topup-dialog{transition:width .28s cubic-bezier(.22,.8,.22,1),transform .30s cubic-bezier(.18,.82,.22,1),opacity .22s ease!important}.topup-modal.gift-mode .topup-dialog{width:min(500px,calc(100vw - 28px))!important}

/* V96 — поле суммы только для цифр; 10 000 ₽ = 100% шкалы */
#topupAmount{
  appearance:textfield!important;
  -webkit-appearance:none!important;
  -moz-appearance:textfield!important;
}
#topupAmount::-webkit-inner-spin-button,
#topupAmount::-webkit-outer-spin-button{
  display:none!important;
  -webkit-appearance:none!important;
  margin:0!important;
}
#bonusProgress{
  max-width:100%!important;
}

/* V98 privilege content from admin */
.mini-item{flex-direction:column;overflow:visible!important}.mini-item span{display:block!important;position:absolute;left:4px;right:4px;bottom:3px;text-align:center;font-size:8px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-item em{position:absolute;top:-20px;right:0;font-style:normal;font-size:9px;color:#858289}.resource img{width:64px!important;height:52px!important;object-fit:contain!important}.resource b{max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#aaa}.resource span{background:#626264!important;color:#fff}.priv-right .resource-grid{grid-template-columns:repeat(5,minmax(0,1fr))}


/* V99 — размер ячеек ресурсов/предметов в окне привилегии по референсу: ~83×83 */
.buy-modal__item{
  box-sizing:border-box!important;
  width:83px!important;
  height:83px!important;
  min-width:83px!important;
  min-height:83px!important;
  max-width:83px!important;
  max-height:83px!important;
  padding:4px 4px 12px!important;
  flex:0 0 83px!important;
  border-radius:7px!important;
}
.buy-modal__item img{
  width:100%!important;
  height:100%!important;
  max-width:75px!important;
  max-height:67px!important;
  object-fit:contain!important;
}
.buy-modal__item .amount,
.buy-modal__item [class*="amount"],
.buy-modal__item [class*="count"]{
  position:absolute!important;
  left:50%!important;
  bottom:4px!important;
  transform:translateX(-50%)!important;
  white-space:nowrap!important;
}


/* V100 — ВАЖНО: реальные ячейки ресурсов на сайте имеют класс .resource,
   а не .buy-modal__item. Поэтому фиксируем именно фактически отображаемые боксы. */
.priv-right .resource-grid{
  display:grid!important;
  grid-template-columns:repeat(5,83px)!important;
  grid-auto-columns:83px!important;
  gap:7px!important;
  justify-content:start!important;
  align-items:start!important;
}

.priv-right .resource-grid .resource{
  box-sizing:border-box!important;
  position:relative!important;
  width:83px!important;
  height:83px!important;
  min-width:83px!important;
  min-height:83px!important;
  max-width:83px!important;
  max-height:83px!important;
  padding:4px 4px 12px!important;
  margin:0!important;
  border-radius:7px!important;
  flex:none!important;
  overflow:hidden!important;
}

.priv-right .resource-grid .resource img{
  display:block!important;
  width:67px!important;
  height:58px!important;
  max-width:67px!important;
  max-height:58px!important;
  margin:0 auto!important;
  object-fit:contain!important;
}

.priv-right .resource-grid .resource b{
  display:none!important;
}

.priv-right .resource-grid .resource span{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:3px!important;
  transform:translateX(-50%)!important;
  max-width:76px!important;
  padding:2px 4px!important;
  margin:0!important;
  white-space:nowrap!important;
  line-height:11px!important;
  font-size:9px!important;
  border-radius:4px!important;
}

@media(max-width:760px){
  .priv-right .resource-grid{
    grid-template-columns:repeat(3,83px)!important;
  }
}

/* V103 — самостоятельные паки привилегии */
.priv-pack-list{display:flex;flex-direction:column;gap:12px}.priv-pack{display:block}.priv-pack+.priv-pack{padding-top:2px}.priv-pack .modal-subhead{margin-top:0!important;margin-bottom:7px!important}.priv-pack .modal-subhead h4{margin:0!important}.priv-pack .resource-grid{margin-bottom:0!important}

/* V105 — компактное модальное окно привилегии: ровно 5 предметов + внутренняя прокрутка */
#productModal .buy-modal,
#productModal .product-modal,
#productModal .modal-card,
.product-modal{
  max-width:800px!important;
}

#productModalBody .priv-modal{
  width:800px!important;
  max-width:calc(100vw - 36px)!important;
  height:min(704px,calc(100vh - 48px))!important;
  max-height:calc(100vh - 48px)!important;
  grid-template-columns:270px 1fr!important;
  overflow:hidden!important;
}

#productModalBody .priv-left{
  min-width:0!important;
  overflow:hidden!important;
}

#productModalBody .priv-right{
  box-sizing:border-box!important;
  min-width:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:8px!important;
  padding-bottom:16px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#454348 transparent!important;
  overscroll-behavior:contain!important;
}

#productModalBody .priv-right::-webkit-scrollbar{
  width:5px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-track{
  background:transparent!important;
}
#productModalBody .priv-right::-webkit-scrollbar-thumb{
  background:#454348!important;
  border-radius:999px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-thumb:hover{
  background:#56535a!important;
}

/* 5 ячеек 83px + 4 промежутка 7px = 443px */
#productModalBody .priv-right .resource-grid{
  display:grid!important;
  grid-template-columns:repeat(5,83px)!important;
  grid-auto-columns:83px!important;
  gap:7px!important;
  width:443px!important;
  max-width:443px!important;
  justify-content:start!important;
  align-items:start!important;
}

#productModalBody .priv-pack-list{
  width:443px!important;
  max-width:443px!important;
}

#productModalBody .priv-pack{
  width:443px!important;
  max-width:443px!important;
}

#productModalBody .priv-pack .modal-subhead{
  width:443px!important;
  max-width:443px!important;
}

/* нижняя панель покупки не прокручивается вместе с паками */
#productModalBody .modal-buybar{
  position:relative!important;
  z-index:8!important;
  flex-shrink:0!important;
}

@media(max-width:850px){
  #productModalBody .priv-modal{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
  }
}


/* V106 — фикс центрирования модального окна после уменьшения ширины V105 */
#productModal{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  box-sizing:border-box!important;
}

#productModal[hidden]{
  display:none!important;
}

#productModalBody{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:none!important;
  width:auto!important;
  max-width:100%!important;
}

#productModalBody .priv-modal{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:0 auto!important;
  transform:none!important;
}


/* V107 — реальный фикс: V105 ошибочно ограничивал ширину самого overlay .product-modal,
   из-за чего flex-центрирование происходило внутри левых 800px экрана. */
#productModal.product-modal{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

#productModal .product-dialog{
  position:relative!important;
  width:800px!important;
  max-width:calc(100vw - 36px)!important;
  margin:0!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
}

/* Ширину задаёт dialog. Внутренний layout больше не раздувает окно до 800px поверх него. */
#productModalBody .priv-modal{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  grid-template-columns:270px minmax(0,1fr)!important;
}

/* Нижняя панель возвращена к штатному положению внутри модалки. */
#productModalBody .modal-buybar{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:8!important;
}

/* Правая колонка по-прежнему ровно под пять ячеек 83px. */
#productModalBody .priv-right{
  width:451px!important;
  max-width:451px!important;
}


/* V108 — scrollbar паков: правее и визуально короче */
#productModalBody .priv-right{
  width:463px!important;
  max-width:463px!important;
  margin-right:-12px!important;
  padding-right:12px!important;
  padding-top:10px!important;
  padding-bottom:42px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#454348 transparent!important;
}

/* Контент остаётся ровно 443px: 5 × 83px + 4 × 7px */
#productModalBody .priv-right > h4,
#productModalBody .priv-right > .mini-grid,
#productModalBody .priv-right > .priv-pack-list{
  width:443px!important;
  max-width:443px!important;
}

#productModalBody .priv-right::-webkit-scrollbar{
  width:4px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-track{
  background:transparent!important;
  margin-top:26px!important;
  margin-bottom:48px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-thumb{
  min-height:42px!important;
  background:#454348!important;
  border-radius:999px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-thumb:hover{
  background:#56535a!important;
}


/* V109 — viewport прокрутки совпадает с видимой длиной scrollbar.
   Предметы исчезают ровно на верхней/нижней границе зоны прокрутки. */
#productModalBody .priv-right{
  box-sizing:border-box!important;
  width:475px!important;
  max-width:475px!important;

  /* сам scrollbar ещё на 12px правее */
  margin-right:-24px!important;
  padding-right:24px!important;

  /* верх/низ области контента совпадают с концами scrollbar */
  margin-top:34px!important;
  margin-bottom:58px!important;
  padding-top:0!important;
  padding-bottom:0!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#454348 transparent!important;
  overscroll-behavior:contain!important;
}

/* Внутреннее содержимое остаётся строго 443px = 5×83 + 4×7 */
#productModalBody .priv-right > h4,
#productModalBody .priv-right > .mini-grid,
#productModalBody .priv-right > .priv-pack-list{
  width:443px!important;
  max-width:443px!important;
}

/* Теперь track не имеет искусственных margin:
   его начало/конец = реальные границы viewport, где скрываются предметы. */
#productModalBody .priv-right::-webkit-scrollbar{
  width:4px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-track{
  background:transparent!important;
  margin:0!important;
}
#productModalBody .priv-right::-webkit-scrollbar-thumb{
  min-height:30px!important;
  background:#454348!important;
  border-radius:999px!important;
}
#productModalBody .priv-right::-webkit-scrollbar-thumb:hover{
  background:#56535a!important;
}


/* V110 — сдвигаем ВСЮ реальную область прокрутки чуть ниже.
   Высота viewport сохраняется: верх +14px, низ -14px. */
#productModalBody .priv-right{
  margin-top:48px!important;
  margin-bottom:44px!important;
}


/* V111 — ещё немного ниже относительно V110: +10px */
#productModalBody .priv-right{
  margin-top:58px!important;
  margin-bottom:34px!important;
}


/* V112 — независимая прокрутка характеристик привилегии слева.
   При большом количестве характеристик они больше не выходят за пределы окна. */
#productModalBody .priv-left{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:12px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#454348 transparent!important;
  overscroll-behavior:contain!important;
}

/* Аккуратный тонкий scrollbar слева, в стиле правой области паков */
#productModalBody .priv-left::-webkit-scrollbar{
  width:4px!important;
}
#productModalBody .priv-left::-webkit-scrollbar-track{
  background:transparent!important;
  margin-top:8px!important;
  margin-bottom:8px!important;
}
#productModalBody .priv-left::-webkit-scrollbar-thumb{
  min-height:30px!important;
  background:#454348!important;
  border-radius:999px!important;
}
#productModalBody .priv-left::-webkit-scrollbar-thumb:hover{
  background:#56535a!important;
}

/* Нижняя панель покупки остаётся поверх обеих прокручиваемых колонок */
#productModalBody .priv-modal{
  min-height:0!important;
}


/* V113 — слева статичны название и картинка.
   Прокручивается ТОЛЬКО список характеристик .perk-list. */
#productModalBody .priv-left{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  padding-right:0!important;
  scrollbar-width:none!important;
}
#productModalBody .priv-left::-webkit-scrollbar{
  display:none!important;
}

#productModalBody .priv-left .modal-product-heading,
#productModalBody .priv-left .priv-hero{
  flex:0 0 auto!important;
}

/* Только эта область имеет собственный scroll viewport */
#productModalBody .priv-left .perk-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:10px!important;
  margin-right:-2px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#454348 transparent!important;
  overscroll-behavior:contain!important;
}

#productModalBody .priv-left .perk-list::-webkit-scrollbar{
  width:4px!important;
}
#productModalBody .priv-left .perk-list::-webkit-scrollbar-track{
  background:transparent!important;
  margin-top:4px!important;
  margin-bottom:4px!important;
}
#productModalBody .priv-left .perk-list::-webkit-scrollbar-thumb{
  min-height:28px!important;
  background:#454348!important;
  border-radius:999px!important;
}
#productModalBody .priv-left .perk-list::-webkit-scrollbar-thumb:hover{
  background:#56535a!important;
}


/* V114 — зелёное описание дополнительной услуги при наведении */
#productModalBody .mini-grid{
  overflow:visible!important;
}

#productModalBody .mini-item.extra-service-item{
  position:relative!important;
  overflow:visible!important;
  z-index:2!important;
}

#productModalBody .mini-item.extra-service-item:hover{
  z-index:80!important;
}

#productModalBody .extra-service-tooltip{
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 10px)!important;
  transform:translate(-50%,6px)!important;
  box-sizing:border-box!important;
  width:max-content!important;
  min-width:150px!important;
  max-width:245px!important;
  padding:8px 10px!important;
  border:1px solid rgba(88,214,141,.38)!important;
  border-radius:7px!important;
  background:rgba(25,91,54,.97)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.34)!important;
  color:#e8fff0!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-align:center!important;
  white-space:normal!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
  z-index:999!important;
}

#productModalBody .extra-service-tooltip::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:100%!important;
  transform:translateX(-50%)!important;
  border:6px solid transparent!important;
  border-top-color:rgba(25,91,54,.97)!important;
}

#productModalBody .mini-item.extra-service-item:hover .extra-service-tooltip{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,0)!important;
}


/* V115 — floating tooltip: тот же зелёный стиль, что у процента скидки */
#productModalBody .extra-service-tooltip{display:none!important;}

.extra-service-floating-tooltip{
  position:fixed!important;
  z-index:2147483647!important;
  box-sizing:border-box!important;
  width:max-content!important;
  max-width:220px!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:6px!important;
  background:#4b652b!important;
  color:#bdf27d!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
  font-size:13px!important;
  line-height:17px!important;
  font-weight:800!important;
  text-align:left!important;
  white-space:normal!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate(-50%,4px) scale(.97)!important;
  transform-origin:center bottom!important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s!important;
}
.extra-service-floating-tooltip.is-visible{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,0) scale(1)!important;
}