:root{color-scheme:dark;--bg:#050505;--surface:#090909;--text:#f4f3f2;--muted:#99969e;--line:#232323;--soft:#141414;--accent:#e32d35;--accent-soft:#39191d;--shadow:0 20px 70px #0002}
:root[data-theme=dark]{color-scheme:dark;--bg:#050505;--surface:#090909;--text:#f4f3f2;--muted:#99969e;--line:#232323;--soft:#141414;--accent:#e32d35;--accent-soft:#39191d;--shadow:0 20px 70px #0002}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.55}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}input:focus-visible{outline:2px solid var(--accent)}[hidden]{display:none!important}.wrap{width:min(1320px,calc(100% - 80px));margin:auto}.support-strip{background:var(--soft);text-align:center;padding:9px 20px;color:var(--muted);font-size:13px}.support-strip a{color:var(--text);font-weight:800;margin-left:6px}.header{display:flex;align-items:center;gap:25px;min-height:115px}.brand{font-family:Nunito,Manrope,sans-serif;display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;letter-spacing:-1px;line-height:1.15}.brand span span,.brand>span:not(.brand-mark),.brand>span:last-child>span{color:var(--accent)}.brand>span:last-child{color:var(--text)}.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:6px}.brand-mark{width:43px;height:47px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:white!important;transform:skewY(-8deg);font-size:23px;border-radius:10px}.brand-mark span{color:#471d29!important}.header nav{display:flex;gap:30px;margin:auto;font-size:15px;font-weight:700}.header nav a:hover{color:var(--accent)}.theme-button{height:43px;width:43px;background:var(--surface);border:1px solid var(--line);border-radius:50%;font-size:23px}.button{display:inline-flex;justify-content:center;align-items:center;gap:35px;background:var(--accent);color:white;padding:16px 25px;border-radius:12px;border:0;font-weight:800;font-size:15px;transition:background-color .22s ease,box-shadow .22s ease,filter .22s ease}.button:not(:disabled):hover{filter:brightness(1.06);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 7px 24px color-mix(in srgb,var(--accent) 18%,transparent)}.button:disabled{opacity:.6;cursor:wait}.header-shop{font-size:14px;padding:14px 21px}.hero{position:relative;isolation:isolate;overflow:hidden;min-height:490px;border-radius:26px;background:#050505;color:white}.hero-image{position:absolute;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:50% 46%}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#18100eeb 0%,#26120ba8 30%,#26120b00 65%)}.hero-copy{padding:64px 66px;max-width:670px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2.7px;color:#ffd2d9}.hero h1{font-family:Nunito,Manrope,sans-serif;font-weight:800;font-size:clamp(40px,4.6vw,65px);line-height:1.08;letter-spacing:-3px;margin:22px 0}.hero h1 em{color:#ffb2bd;font-style:normal}.hero p{color:#f0d9ca;font-size:17px;line-height:1.8;margin:22px 0 28px}.hero-caption{position:absolute;right:26px;bottom:23px;font-size:11px;letter-spacing:1.5px;color:#fffbd9;display:flex;gap:7px;align-items:center}.hero-caption i{width:6px;height:6px;background:#ffb2bd;border-radius:50%}.join-bar{padding:30px 10px;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line)}.mini-label{font-size:11px;letter-spacing:1.7px;color:var(--muted);font-weight:800}.join-bar h2{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.6px;margin:7px 0}.join-bar>div{margin-right:auto}.join-bar>a{font-size:14px;color:var(--muted)}.ip-button{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 18px;display:flex;align-items:center;gap:35px;text-align:left;font-weight:800}.ip-button small{display:block;font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:3px}.ip-button>span:last-child{font-size:25px;color:var(--accent)}#copy-status{font-size:13px;color:var(--accent)}#copy-status:empty{display:none}.shop-section{padding-top:60px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}.section-heading h2{font-family:Nunito,Manrope,sans-serif;font-weight:800;font-size:35px;letter-spacing:-1.5px;margin:6px 0 0}.accent{color:var(--accent)}.shop-caption{color:var(--muted);font-size:13px;padding-bottom:8px}.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:35px}.mode{background:var(--surface);border:1px solid var(--line);border-radius:15px;display:flex;align-items:center;text-align:left;gap:15px;padding:19px 22px}.mode.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}.mode-symbol{width:45px;height:45px;border-radius:12px;background:#39191d;color:#d62530;font-size:25px;display:grid;place-items:center}.mode-symbol.violet{background:#2a2138;color:#9359cb}.mode strong{font-size:18px;display:block}.mode small{display:block;font-size:13px;color:var(--muted);margin-top:3px}.mode-check{margin-left:auto;width:22px;height:22px;background:var(--accent);color:white;border-radius:50%;text-align:center;opacity:0}.mode.active .mode-check{opacity:1}.catalog-layout{display:grid;grid-template-columns:185px 1fr;gap:35px}.categories{display:flex;flex-direction:column;gap:9px}.categories>button{background:none;border:0;padding:16px 14px;text-align:left;border-radius:12px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:13px}.categories>button span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--soft);color:var(--accent);font-size:22px}.categories>button.active{background:var(--accent-soft);color:var(--accent)}.promo-aside{border:1px dashed var(--line);padding:20px 15px;margin-top:20px;border-radius:13px}.promo-aside small{display:block;color:var(--muted);font-size:10px;letter-spacing:2px}.promo-aside strong{display:block;font-size:27px;color:var(--accent);letter-spacing:2px;margin:4px 0}.promo-aside>span{font-size:12px;color:var(--muted)}.catalog-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}.catalog-heading h3{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:20px;margin:0}.catalog-heading>span{font-size:12px;color:var(--muted)}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px 19px}.product-card{min-width:0}.product-art{aspect-ratio:1;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--rank) 20%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:19px;position:relative;display:grid;place-items:center;overflow:hidden;width:100%;padding:0;transition:border-color .22s ease,box-shadow .22s ease}.product-art:hover{border-color:color-mix(in srgb,var(--rank) 65%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--rank) 10%,transparent)}.product-art img{width:77%;height:77%;object-fit:contain;filter:drop-shadow(0 12px 12px #0002);image-rendering:auto}.product-art .atlas{width:100%;height:100%;background-image:url('/assets/ranks102.webp');background-size:300% 300%}.product-art .gem{font-size:66px;color:var(--rank);text-shadow:0 9px 30px color-mix(in srgb,var(--rank) 30%,transparent)}.art-label{position:absolute;top:12px;left:12px;background:var(--surface);border-radius:7px;font-size:10px;letter-spacing:1px;padding:5px 8px;color:var(--muted)}.product-card h4{font-size:18px;line-height:1.4;margin:15px 0 5px;font-weight:800}.product-sub{font-size:13px;min-height:16px;color:var(--muted);margin:0}.product-price{font-size:24px;font-weight:800;margin:10px 0}.product-price small{font-size:14px;color:var(--muted);font-weight:600}.card-actions{display:flex;gap:7px}.card-actions .button{width:100%;font-size:14px;padding:11px 9px;border-radius:9px}.info-button{border:1px solid var(--line);border-radius:9px;background:var(--surface);width:37px;flex-shrink:0;font-size:16px}.mode-notice{font-size:12px;color:var(--muted);padding:20px 0}.help-card{background:var(--surface);border:1px solid var(--line);padding:32px 38px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;margin:48px 0 70px;gap:20px}.help-card h2{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:26px;letter-spacing:-.7px;margin:5px 0}.help-card p{font-size:14px;color:var(--muted);margin:6px 0}.secondary{background:var(--soft);color:var(--text)}footer{padding-top:10px;overflow:hidden}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px}.footer-top>div{display:flex;gap:25px;font-size:14px}.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding:22px 0;color:var(--muted);font-size:15px;line-height:1.75;flex-wrap:wrap}.footer-bottom>div{display:flex;gap:25px}.footer-word{font-size:clamp(50px,14.1vw,188px);font-weight:800;letter-spacing:-10px;line-height:1.1;color:var(--soft);text-align:center;white-space:nowrap}.route.panel,.rules-list{background:var(--surface);padding:35px;border-radius:20px;margin-bottom:45px}.rules-list details{padding:18px;border-bottom:1px solid var(--line)}.rules-list summary{font-weight:800;cursor:pointer}.rules-list p,.info-panel p,.info-panel li{color:var(--muted);font-size:15px}.info-panel a{color:var(--accent)}.contact-row{padding:20px 0}.solid-button,.outline-button{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--accent);color:white!important}.legal-links{display:flex;gap:15px}dialog{border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--text);padding:35px;width:min(580px,calc(100% - 30px));max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#12101899;backdrop-filter:blur(7px)}body:has(dialog[open]){overflow:hidden}.close{position:absolute;top:14px;right:16px;font-size:28px;border:0;background:none;color:var(--muted);width:36px;height:36px}.modal-product{display:flex;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:5px 20px 25px 0;margin-bottom:24px}.modal-icon{width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--soft);flex-shrink:0;display:grid;place-items:center}.modal-icon img{width:85%;height:85%;object-fit:contain}.modal-icon .atlas{width:100%;height:100%;background-image:url('/assets/ranks102.webp');background-size:300% 300%}.modal-icon .gem{font-size:42px;color:var(--accent)}.modal-product small,.muted{color:var(--muted);font-size:13px}.modal-product h2{font-family:Nunito,Manrope,sans-serif;font-weight:600;margin:4px 0 0;font-size:26px}dialog h2{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:28px;letter-spacing:-.8px}.feature-list{list-style:none;padding:0;margin:24px 0}.feature-list li{border-bottom:1px solid var(--line);padding:12px 0;font-size:15px;color:var(--muted);display:flex;gap:10px}.feature-list li:before{content:'•';color:var(--accent)}.wide{width:100%}label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}input:not([type=checkbox]){background:var(--soft);color:var(--text);border:1px solid transparent;border-radius:12px;padding:17px 18px;width:100%}input::placeholder{color:var(--muted)}.input-note,.secure-note{font-size:12px;color:var(--muted)}.promo-input{margin:25px 0}.promo-input summary{cursor:pointer;color:var(--muted);font-size:15px}.promo-input input{margin-top:15px}.consent{display:flex;align-items:flex-start;gap:10px;margin:25px 0}.consent input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}.consent label{color:var(--muted);font-size:12px;font-weight:500}.consent a{color:var(--accent)}#promo-status,#checkout-error{font-size:14px;color:var(--accent)}.secure-note{text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1600px){.hero{min-height:520px}}
@media(max-width:1100px){.wrap{width:calc(100% - 45px)}.header nav{gap:16px}.header{gap:15px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout{grid-template-columns:160px 1fr;gap:22px}.hero-copy{padding:58px 45px}.join-bar{gap:15px}.shop-caption{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 30px)}.header{min-height:87px;gap:12px;flex-wrap:wrap;padding:18px 0}.brand{font-size:20px}.brand-mark{width:35px;height:38px;font-size:20px}.header nav{order:4;width:100%;justify-content:space-between;gap:8px;padding-top:10px;font-size:13px}.theme-button{margin-left:auto;width:37px;height:37px}.header-shop{display:none}.hero{min-height:450px;border-radius:19px}.hero-image{object-position:60% 50%}.hero-shade{background:linear-gradient(90deg,#18100ee0,#26120b40)}.hero-copy{padding:40px 26px}.hero h1{font-family:Nunito,Manrope,sans-serif;font-weight:800;font-size:46px;letter-spacing:-2px}.hero p{font-size:14px}.hero-caption{font-size:9px;right:15px;bottom:14px}.eyebrow{font-size:10px}.join-bar{flex-wrap:wrap;padding:25px 0}.join-bar>div{width:100%}.join-bar h2{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:21px}.ip-button{gap:25px;font-size:15px}.join-bar>a{font-size:12px}.section-heading h2{font-family:Nunito,Manrope,sans-serif;font-weight:800;font-size:30px}.shop-section{padding-top:35px}.mode-selector{gap:10px;margin-bottom:23px}.mode{padding:14px 12px;gap:9px}.mode-symbol{width:30px;height:34px;font-size:21px;flex-shrink:0}.mode strong{font-size:14px}.mode small{font-size:10px}.mode-check{display:none}.catalog-layout{display:block}.categories{flex-direction:row;flex-wrap:wrap;gap:5px;margin-bottom:24px}.categories>button{padding:9px;font-size:13px;gap:6px}.categories>button span{width:26px;height:26px;font-size:18px}.promo-aside{display:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.product-card h4{font-size:16px}.product-price{font-size:22px}.product-sub{font-size:12px}.art-label{font-size:9px;top:9px;left:9px}.catalog-heading>span{font-size:11px}.help-card{display:block;padding:25px;margin:25px 0 45px}.help-card h2{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:25px}.help-card .button{margin-top:15px;font-size:14px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.footer-top>div{flex-wrap:wrap;gap:15px;font-size:13px}.footer-bottom{margin-top:20px}.footer-bottom>div{gap:15px;flex-wrap:wrap}.footer-word{letter-spacing:-3px;font-size:14vw}dialog{padding:25px 21px}.modal-product{padding-right:25px}.modal-product h2{font-size:24px}.route.panel,.rules-list{padding:20px}.mini-label{font-size:10px}}
/* Slightly inset atlas tiles so neighboring artwork cannot bleed into cards. */
.product-art .atlas,.modal-icon .atlas{background-size:330% 330%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Interface icons: Lucide, locally hosted; donation artwork is unchanged. */
.ui-icon{display:inline-block;flex-shrink:0;width:18px;height:18px;vertical-align:-.18em;pointer-events:none}
a>.ui-icon{margin-left:3px;width:15px;height:15px}
.button{gap:12px}.button .ui-icon{width:18px;height:18px}
.card-actions .button{gap:8px}.card-actions .button .ui-icon{width:15px;height:15px}
.theme-button,.info-button{display:inline-grid;place-items:center}
.theme-button .ui-icon{width:20px;height:20px}
.mode-symbol .ui-icon{width:25px;height:25px}
.categories>button span .ui-icon{width:21px;height:21px}
.mode-check{display:grid;place-items:center}.mode-check .ui-icon{width:14px;height:14px}
.ip-button .ui-icon{width:22px;height:22px}
.close{display:grid;place-items:center}.close .ui-icon{width:22px;height:22px}
.product-art .gem .ui-icon{width:66px;height:66px}
.modal-icon .gem .ui-icon{width:42px;height:42px}
.brand-logo{width:46px;height:46px;display:block;object-fit:cover;border-radius:11px;flex-shrink:0}
@media(max-width:760px){.brand-logo{width:38px;height:38px;border-radius:9px}.mode-symbol .ui-icon{width:21px;height:21px}.categories>button span .ui-icon{width:18px;height:18px}}

/* Manrope + Nunito typography (SILE style)'s family and weight hierarchy. */
body{font-weight:400}
.header nav{font-size:14px;font-weight:500;letter-spacing:0}
h1,h2,h3,h4,.hero h1,.section-heading h2,.product-card h4{font-weight:700}
.hero h1{letter-spacing:-1.8px;margin-top:0}
.section-heading h2{letter-spacing:-.8px}
.button,.categories>button,.mode strong,.brand,.ip-button,.product-price{font-weight:700}
.brand{letter-spacing:-.6px}
.hero-copy{padding-top:68px}
@media(max-width:760px){.header nav{font-size:12px}.hero-copy{padding-top:44px}.hero h1{letter-spacing:-1.2px}}

/* Soft red interface; colorful donation illustrations remain unchanged. */
:root{--accent:#e32d35;--accent-soft:#39191d}
:root[data-theme=dark]{--accent:#e32d35;--accent-soft:#39191d}
.button,.solid-button,.outline-button{color:#ffffff!important}
.brand-mark{background:#e32d35}.mode-symbol{background:#39191d;color:#d62530}
.hero-carousel{height:470px;min-height:470px;background:#050505;isolation:isolate;position:relative;overflow:hidden}
.hero-slide{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:linear-gradient(115deg,#e4343a,#cb2029);color:white}
.hero-slide--shop{background:linear-gradient(115deg,#aa8fe3,#8264d1)}
.hero-slide--community{background:linear-gradient(115deg,#7ca9e5,#577fca)}
.hero-pixels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-pixels span{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:#ffffff0d}
.hero-slide .hero-copy{position:relative;z-index:2;max-width:62%;padding:66px 0 60px 60px}
.hero-slide h1{font-size:clamp(34px,3.5vw,49px);font-weight:700;letter-spacing:-1.3px;line-height:1.15;margin:0 0 26px}
.hero-slide p{font-size:16px;line-height:1.65;margin:0 0 30px;color:white}
.slide-character{position:absolute;z-index:1;right:-8px;bottom:-70px;height:112%;width:47%;object-fit:cover;object-position:center 10%;pointer-events:none}
.hero-slide--community .slide-character{width:51%;right:-15px}
.hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:40px;background:#302b36;color:white;padding:18px 27px;font-size:16px;font-weight:600;cursor:pointer;min-height:62px;transition:background .2s}
.hero-cta:hover{background:#211d27}.hero-cta .ui-icon{width:21px;height:21px}
.hero-play{text-align:left;padding:14px 25px 14px 17px;gap:17px}
.hero-play>.ui-icon{box-sizing:content-box;padding:14px;width:24px;height:24px;color:#302b36;background:white;border-radius:50%}
.hero-play small{display:block;color:#c9c3d0;font-size:12px;font-weight:500}
.hero-play strong{display:block;font-size:19px;line-height:1.4;font-weight:700}
.hero-controls{position:absolute;right:24px;bottom:22px;z-index:4;display:flex;align-items:center;gap:17px}
.hero-pause{border:1px solid #ffffff5c;color:white;background:#00000015;border-radius:15px;font-size:10px;padding:6px 10px;min-height:30px}
.hero-dots{display:flex;gap:8px}.hero-dot{border:0;background:#ffffff5c;border-radius:9px;width:29px;height:6px;padding:0;position:relative}
.hero-dot:before{content:'';position:absolute;inset:-12px -2px}
.hero-dot[aria-pressed=true]{background:white;width:38px}
.hero-slide:not([hidden]){animation:slide-appear .35s ease}
@keyframes slide-appear{from{opacity:.5}to{opacity:1}}
@media(max-width:1100px){.hero-slide .hero-copy{padding-left:42px;max-width:65%}.hero-slide p{font-size:14px}.slide-character{right:-40px;width:50%}}
@media(max-width:760px){.hero-carousel{height:575px;min-height:575px}.hero-slide .hero-copy{padding:34px 25px 0;max-width:100%}.hero-slide h1{font-size:35px;letter-spacing:-.8px;margin-bottom:18px;max-width:100%}.hero-slide p{font-size:13px;margin-bottom:22px;max-width:100%}.hero-slide p br{display:none}.hero-cta{font-size:13px;padding:15px 22px;min-height:52px}.hero-play{padding:10px 20px 10px 12px;gap:12px}.hero-play>.ui-icon{padding:10px;width:20px;height:20px}.hero-play strong{font-size:15px}.hero-play small{font-size:10px}.slide-character,.hero-slide--community .slide-character{height:65%;width:90%;right:-20px;bottom:-55px}.hero-slide--community .slide-character{height:62%;right:-10px;width:96%}.hero-controls{right:20px;bottom:17px;left:20px;justify-content:space-between}.hero-pixels span{transform:scale(.75);transform-origin:top left}}
@media(prefers-reduced-motion:reduce){.hero-slide:not([hidden]){animation:none}}

/* User-supplied Anarchy102 artwork, full original square composition. */
.product-art img.product-image-102,.modal-icon img.product-image-102{width:100%;height:100%;object-fit:cover;filter:none}
.hero-controls{gap:0}

/* Stationary hover feedback: color and soft outlines, no lift/zoom. */
.mode,.categories>button,.info-button,.theme-button,.close,.ip-button,.hero-cta,.solid-button,.outline-button{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease}
.mode:not(:disabled):hover,.info-button:not(:disabled):hover,.theme-button:not(:disabled):hover,.ip-button:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.categories>button:not(:disabled):hover,.close:not(:disabled):hover{background:var(--accent-soft);color:var(--accent)}
.hero-cta:not(:disabled):hover{box-shadow:0 0 0 1px #ffffff24,0 7px 24px #00000024}
.footer-bottom>div{flex-wrap:wrap;row-gap:8px}
.footer-bottom a{transition:color .2s ease;text-underline-offset:4px;text-decoration-color:transparent}
.footer-bottom a:hover{color:var(--accent);text-decoration:underline}

.button.secondary{color:var(--text)!important}

/* Generated inventory-style icons, scoped to mode and category controls. */
.mode-symbol .pixel-ui,.categories>button span .pixel-ui{display:block;width:94%;height:94%;object-fit:contain;pointer-events:none}.categories>button[data-category="rank"] span{background:#2a2138}.categories>button[data-category="currency"] span{background:#2b2410}.categories>button[data-category="service"] span{background:#39191d}

/* Smooth entry for the product details and purchase dialogs only. */
@keyframes bv-modal-enter{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes bv-modal-backdrop{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  #details[open],#checkout[open]{animation:bv-modal-enter 240ms cubic-bezier(.22,1,.36,1) both;transform-origin:center}
  #details[open]::backdrop,#checkout[open]::backdrop{animation:bv-modal-backdrop 240ms ease-out both}
}

/* Third mode: OneBlock, same selector style. */
.mode-selector{grid-template-columns:repeat(3,minmax(0,1fr))}.mode{min-width:0}.oneblock-symbol{background:#2a2138}.oneblock-symbol img{object-fit:contain;border-radius:10px;image-rendering:pixelated}
@media(max-width:760px){.mode-selector{grid-template-columns:1fr}.mode{padding:14px}.mode strong{font-size:15px}.mode small{font-size:11px}.mode-symbol{width:42px;height:42px}.mode-check{display:flex;margin-left:auto}}

/* HOVER-RED 20261103: hover/active = solid red block, no outline/glow */
.mode:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.mode.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.mode:hover strong,.mode.active strong{color:#fff}
.mode:hover small,.mode.active small{color:rgba(255,255,255,.85)}
.mode:hover .mode-symbol,.mode.active .mode-symbol{color:#fff}
.mode.active .mode-check{background:#fff;color:var(--accent)}
.categories>button:hover{background:var(--accent);color:#fff}
.categories>button.active{background:var(--accent);color:#fff}
.categories>button:hover span,.categories>button.active span{color:#fff}
.button:not(:disabled):hover{background:var(--accent);color:#fff;box-shadow:none;filter:none}
.theme-button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.info-button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.ip-button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ip-button:hover small{color:rgba(255,255,255,.85)}
.ip-button:hover>span:last-child{color:#fff}

/* SELECTION-RED 20261103: selected text = main accent red */
::selection{background-color:var(--accent);color:#fff}
::-moz-selection{background-color:var(--accent);color:#fff}

/* HERO-DOTS-PROGRESS 20261103: longer lines + smooth autoplay progress */
.hero-dot{width:56px;overflow:hidden;transition:width .4s ease}
.hero-dot[aria-pressed=true]{background:#ffffff5c;width:72px}
.hero-dot::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:9px}
.hero-dot[aria-pressed=true]::after{animation:hero-dot-progress 7s linear forwards}
@keyframes hero-dot-progress{from{width:0}to{width:100%}}

/* HERO-SMOOTH 20261103: crossfade slides + GPU progress fill */
.hero-slide{transition:opacity .8s ease,visibility 0s}
.hero-slide[hidden]{display:block!important;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.hero-dot::after{width:100%;transform:scaleX(0);transform-origin:left}
@keyframes hero-dot-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* HERO-FADE12 20261103: longer, softer transparency fade */
.hero-slide{transition:opacity 1.2s ease,visibility 0s}
.hero-slide[hidden]{transition:opacity 1.2s ease,visibility 0s linear 1.2s}

/* HERO-XFADE2 20261103: class-driven crossfade (no hidden toggling) */
.hero-carousel .hero-slide{display:block!important;animation:none;opacity:0;visibility:hidden;pointer-events:none;z-index:1}
.hero-carousel.is-ready .hero-slide{transition:opacity .9s ease,visibility 0s linear .9s}
.hero-carousel .hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.hero-carousel.is-ready .hero-slide.is-active{transition:opacity .9s ease,visibility 0s}
.hero-carousel .hero-slide .hero-copy{opacity:0;transform:translateY(16px)}
.hero-carousel .hero-slide .slide-character{opacity:0;transform:translateX(28px) scale(1.03)}
.hero-carousel.is-ready .hero-slide .hero-copy,.hero-carousel.is-ready .hero-slide .slide-character{transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.hero-carousel .hero-slide.is-active .hero-copy,.hero-carousel .hero-slide.is-active .slide-character{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hero-carousel.is-ready .hero-slide,.hero-carousel.is-ready .hero-slide .hero-copy,.hero-carousel.is-ready .hero-slide .slide-character{transition:none}}

/* HERO-XFADE3 20261103: GPU compositing; reduced-motion keeps a short fade instead of none */
.hero-carousel .hero-slide{will-change:opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){
.hero-carousel.is-ready .hero-slide{transition:opacity .45s ease,visibility 0s linear .45s}
.hero-carousel.is-ready .hero-slide.is-active{transition:opacity .45s ease,visibility 0s}
.hero-carousel .hero-slide .hero-copy,.hero-carousel .hero-slide .slide-character{transform:none}
.hero-carousel.is-ready .hero-slide .hero-copy,.hero-carousel.is-ready .hero-slide .slide-character{transition:opacity .45s ease}
}

/* HERO-XFADE4 20261103: WAAPI-driven fade states */
#hero-carousel .hero-slide{display:block!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:1;animation:none!important;transition:none!important}
#hero-carousel .hero-slide.is-active{opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:2}
#hero-carousel .hero-slide.is-leaving{opacity:0!important;visibility:visible!important;z-index:3}
#hero-carousel .hero-slide .hero-copy,#hero-carousel .hero-slide .slide-character{will-change:opacity,transform}

/* HOVER15 20261103: smooth 0.15s hover transitions everywhere */
a,button,summary,input,select,textarea,label,[role="button"],.product-card,.mode-symbol,.categories>button>span,.footer-top a,.footer-bottom a{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease,filter .15s ease,outline-color .15s ease,text-decoration-color .15s ease,fill .15s ease,stroke .15s ease!important}
@media(prefers-reduced-motion:reduce){a,button,summary,input,select,textarea,label,[role="button"]{transition-duration:.15s!important}}

/* FONTREF 20261103: Nunito display font, reference-like sizes */
.hero-slide h1{font-size:clamp(38px,4vw,54px);letter-spacing:-.5px;font-weight:800}
.hero h1{letter-spacing:-1px}
.header nav{font-size:16px}
.section-heading h2{font-size:34px}
.brand{font-family:Nunito,Manrope,sans-serif}

/* HEADER-ONLINE 20261103: live players left of the shop button */
.header-online{display:flex;flex-direction:column;gap:6px;min-width:172px;margin-left:4px}
.header-online-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;line-height:1.1}
.header-online small{font-size:12.5px;color:var(--muted);font-weight:600}
.header-online strong{font-family:Nunito,Manrope,sans-serif;font-size:16px;font-weight:800;color:var(--text);white-space:nowrap}
.online-bar{display:block;height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.online-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ff8a3d,var(--accent));transition:width .8s ease}
@media(max-width:1100px){.header-online{display:none}}

/* STICKY-HEADER 20261103: floating blurred bar on scroll */
.header{position:sticky;top:12px;z-index:200;border:1px solid transparent;transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease,min-height .25s ease,padding .25s ease,border-radius .25s ease}
.header.is-stuck{min-height:76px;padding-left:18px;padding-right:18px;border-radius:20px;border-color:var(--line);background:color-mix(in srgb,var(--bg) 75%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 16px 40px rgba(0,0,0,.20)}
html{scroll-padding-top:110px}
@media(max-width:760px){.header{top:8px}.header.is-stuck{min-height:0;border-radius:16px;padding-left:12px;padding-right:12px}}

/* ONLINE-SOLID 20261103: solid red online bar, no gradient */
.online-bar i{background:var(--accent)}

/* CTA-RED 20261103: hero CTA buttons on shop/community slides = brand red */
.hero-slide--shop .hero-cta,.hero-slide--community .hero-cta{background:var(--accent)}
.hero-slide--shop .hero-cta:hover,.hero-slide--community .hero-cta:hover{background:#c4242e}

/* CTA-RED2 20261103: all hero CTA buttons in current site style (brand red) */
.hero-cta{background:var(--accent)}
.hero-cta:hover{background:#c4242e}

/* CTA-TONE 20261103: hero buttons match their slide background (deeper tone) */
.hero-slide--welcome .hero-cta{background:#b3202a}
.hero-slide--shop .hero-cta{background:#7558c4}
.hero-slide--community .hero-cta{background:#4e74bd}
.hero-slide .hero-cta:hover{filter:brightness(1.12)}

/* CTA-BLACK 20261103: hero buttons black #050505 */
.hero-slide .hero-cta{background:#050505}
.hero-slide .hero-cta:hover{background:#171717;filter:none}

/* MODAL-FIX 20261103: no page jerk on open (stable scrollbar gutter), pure black blurred backdrop */
html{scrollbar-gutter:stable}
dialog::backdrop{background:rgba(0,0,0,.62)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}


/* CLOSE-ROUND 20261103: round close button in dialogs */
.close{border-radius:50%;display:grid;place-items:center}
.close:hover{background:var(--accent);color:#fff}

/* CHECKBOX-CUSTOM 20261103: bigger consent text, custom checkbox */
.consent{align-items:flex-start;gap:12px}
.consent label{font-size:15px;line-height:1.5;font-weight:500}
.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:2px;border-radius:7px;border:1.5px solid var(--line);background:var(--soft);cursor:pointer;position:relative;flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}
.consent input[type=checkbox]:hover{border-color:var(--accent)}
.consent input[type=checkbox]:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--accent)}
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* CLOSE-SQUARE 20261103: close button = rounded square */
.close{border-radius:11px}

/* MODAL-OPEN 20261103: smooth dialog opening for everyone (not gated by reduced-motion) */
@keyframes bv-modal-enter2{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bv-backdrop2{from{opacity:0}to{opacity:1}}
#details[open],#checkout[open]{animation:bv-modal-enter2 320ms cubic-bezier(.22,1,.36,1) both}
#details[open]::backdrop,#checkout[open]::backdrop{animation:bv-backdrop2 320ms ease-out both}

/* PROMO-SMOOTH 20261103: promo details expand smoothly, animated chevron */
.promo-input summary{list-style:none}
.promo-input summary::-webkit-details-marker{display:none}
.promo-input summary::before{content:'';display:inline-block;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-right:10px;vertical-align:2px;transition:transform .3s ease}
.promo-input[open] summary::before{transform:rotate(45deg);vertical-align:0}
.promo-input .promo-body{overflow:hidden}

/* MODAL-CLOSE 20261103: smooth dialog closing */
@keyframes bv-modal-leave{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes bv-backdrop-leave{from{opacity:1}to{opacity:0}}
#details.is-closing,#checkout.is-closing{animation:bv-modal-leave 240ms ease-in both}
#details.is-closing::backdrop,#checkout.is-closing::backdrop{animation:bv-backdrop-leave 240ms ease-in both}

/* RULES-SMOOTH 20261103: bordered rule cards, smooth expand, animated chevron */
.rules-list details{border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:12px;background:var(--soft)}
.rules-list .rule-content{overflow:hidden}
.rules-list summary{list-style:none}
.rules-list summary::-webkit-details-marker{display:none}
.rules-list summary::before{content:'';display:inline-block;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-right:12px;vertical-align:2px;transition:transform .3s ease}
.rules-list details[open] summary::before{transform:rotate(45deg);vertical-align:0}

/* RULES-FIX 20261103: rule rows back to plain; border #232323 on the #090909 block itself */
.rules-list details{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:18px;margin-bottom:0;background:transparent}
.route.rules-list{border:1px solid #232323}

/* FOOTER-SCENE 20261103: giant visible BLOCKVANE + floating characters + red glow */
.footer-scene{position:relative;height:clamp(250px,29vw,390px);overflow:hidden;margin-top:6px}
.footer-scene .footer-word{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font-family:Nunito,Manrope,sans-serif;font-weight:900;font-size:clamp(72px,15.2vw,225px);letter-spacing:-.01em;line-height:.95;color:color-mix(in srgb,var(--text) 12%,transparent);white-space:nowrap;z-index:0;margin:0}
.footer-glow{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:min(620px,92%);height:280px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 27%,transparent),transparent 72%);z-index:0;pointer-events:none}
.footer-char{position:absolute;left:50%;bottom:0;height:94%;width:auto;z-index:1;transform:translateX(-50%);filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));animation:bv-footer-float 5.5s ease-in-out infinite}
@keyframes bv-footer-float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@media(max-width:760px){.footer-scene{height:225px}.footer-char{height:90%}}

/* FOOTER-SCENE2 20261103: tighter composition - one char, bigger word, grounded */
.footer-scene{height:clamp(235px,23vw,320px);margin-top:0}
.footer-scene .footer-word{bottom:0;font-size:clamp(84px,16vw,238px);color:color-mix(in srgb,var(--text) 15%,transparent)}
.footer-glow{bottom:8%;height:320px;width:min(520px,80%);background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent 72%)}
.footer-floor{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:230px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(7px);z-index:0}
.footer-char{height:96%;filter:none;animation:bv-footer-float2 6s ease-in-out infinite}
@keyframes bv-footer-float2{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@media(max-width:760px){.footer-scene{height:215px}.footer-floor{width:160px}}

/* FOOTER-SCENE3 20261103: gradient barely-visible word, character just stands, no animation */
.footer-scene{height:clamp(240px,24vw,330px)}
.footer-scene .footer-word{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 23%,transparent) 0%,color-mix(in srgb,var(--text) 10%,transparent) 55%,color-mix(in srgb,var(--text) 3%,transparent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-glow{display:none}
.footer-floor{display:none}
.footer-char{animation:none;height:97%}

/* FOOTER-SCENE4 20261103: SVG wordmark like reference, adapted for black background */
.footer-word-svg{position:absolute;left:0;bottom:3%;width:100%;height:auto;display:block;z-index:0}

/* FOOTER-SCENE5 20261103: reference-style character render, smaller word */
.footer-scene{height:clamp(235px,22vw,305px)}
.footer-word-svg{width:min(1020px,94%);left:50%;transform:translateX(-50%);bottom:1%}
.footer-char{height:108%;bottom:-3%}
@media(max-width:760px){.footer-scene{height:225px}}

/* FOOTER-SCENE6 20261103: wordmark a bit higher */
.footer-word-svg{bottom:9%}

/* FOOTER-SCENE7 20261103: wordmark a bit higher still */
.footer-word-svg{bottom:14%}

/* HEADER-FIX 20261103: blur fades with the morph, no ghosting while scrolling home */
.header{transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease,min-height .25s ease,padding .25s ease,border-radius .25s ease,backdrop-filter .25s ease,-webkit-backdrop-filter .25s ease}

/* HEADER-FIX2 20261103: one geometry in both states, paint-only transitions, no backdrop blur - nothing jitters, ghosts or vanishes */
.header{border-radius:20px;min-height:76px;padding-left:18px;padding-right:18px;transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
.header.is-stuck{border-color:var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 16px 40px rgba(0,0,0,.20)}
@media(max-width:760px){.header{min-height:0;border-radius:16px;padding-left:12px;padding-right:12px}}

/* HEADER-FIX3 20261103: blur restored, roomier 92px height in BOTH states (geometry still frozen) */
.header{min-height:92px}
.header.is-stuck{background:color-mix(in srgb,var(--bg) 75%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
@media(max-width:760px){.header{min-height:0}}

/* CONTACTS-STYLE 20261103: border #232323 on the block; buttons #232323, red on hover */
#contacts{border:1px solid #232323}
#contacts .solid-button,#contacts .outline-button{background:#232323;border-color:#232323;color:#fff}
#contacts .solid-button:hover,#contacts .outline-button:hover{background:var(--accent);border-color:var(--accent)}

/* FOOTER-TOP-HOVER 20261103: footer-top links turn accent red on hover like the rest */
.footer-top a:hover{color:var(--accent)}

/* MODE-ICON-FIX 20261103: mode icons fill the rounded tile, corners clipped */
.mode-symbol{overflow:hidden}
.mode-symbol .pixel-ui{width:100%;height:100%;object-fit:cover}

/* PROMO-CLIP-FIX 20261103: no clipping of the promo input border at rest */
.promo-body{overflow:visible}
#promo{box-sizing:border-box;max-width:100%}

/* CATEGORY-COLORS 20261103: pastel icon tiles + tinted active rows, per category */
.categories>button[data-category="rank"] span{background:#CDBFF5}
.categories>button[data-category="currency"] span{background:#F6D9C0}
.categories>button[data-category="service"] span{background:#F9DE8A}
.categories>button[data-category="rank"]:hover,.categories>button[data-category="rank"].active{background:color-mix(in srgb,#A78BFA 18%,transparent);color:var(--text)}
.categories>button[data-category="currency"]:hover,.categories>button[data-category="currency"].active{background:color-mix(in srgb,#E8A87C 18%,transparent);color:var(--text)}
.categories>button[data-category="service"]:hover,.categories>button[data-category="service"].active{background:color-mix(in srgb,#EBCB6B 18%,transparent);color:var(--text)}

/* CATEGORY-COLORS2 20261103: icons inset inside the tile + thin outline per category */
.categories>button span .pixel-ui{width:76%;height:76%;object-fit:contain}
.categories>button[data-category="rank"] span{border:1px solid #A78BFA}
.categories>button[data-category="currency"] span{border:1px solid #D89B6A}
.categories>button[data-category="service"] span{border:1px solid #D9A92F}

/* CATEGORY-COLORS3 20261103: outline on the row blocks themselves + lighter (30%) tint */
.categories>button[data-category="rank"]{border:1px solid color-mix(in srgb,#A78BFA 42%,transparent)}
.categories>button[data-category="currency"]{border:1px solid color-mix(in srgb,#E8A87C 42%,transparent)}
.categories>button[data-category="service"]{border:1px solid color-mix(in srgb,#EBCB6B 42%,transparent)}
.categories>button[data-category="rank"]:hover,.categories>button[data-category="rank"].active{background:color-mix(in srgb,#A78BFA 30%,transparent)}
.categories>button[data-category="currency"]:hover,.categories>button[data-category="currency"].active{background:color-mix(in srgb,#E8A87C 30%,transparent)}
.categories>button[data-category="service"]:hover,.categories>button[data-category="service"].active{background:color-mix(in srgb,#EBCB6B 30%,transparent)}

/* CATEGORY-COLORS4 20261103: outline only together with the block (hover/active), transparent placeholder otherwise */
.categories>button[data-category="rank"],.categories>button[data-category="currency"],.categories>button[data-category="service"]{border:1px solid transparent}
.categories>button[data-category="rank"]:hover,.categories>button[data-category="rank"].active{border-color:color-mix(in srgb,#A78BFA 42%,transparent)}
.categories>button[data-category="currency"]:hover,.categories>button[data-category="currency"].active{border-color:color-mix(in srgb,#E8A87C 42%,transparent)}
.categories>button[data-category="service"]:hover,.categories>button[data-category="service"].active{border-color:color-mix(in srgb,#EBCB6B 42%,transparent)}

/* VERSION-BADGES 20261103: Java (red) + Bedrock chips right of the server IP */
.version-badge{display:inline-flex;align-items:center;padding:9px 14px;border-radius:10px;font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap}
.version-badge.java{background:var(--accent);color:#fff}
.version-badge.bedrock{background:#232323;color:#fff;border:1px solid #3a3a3a}
@media(max-width:760px){.version-badge{font-size:12.5px;padding:8px 11px}}

/* JOIN-BAR-SIZES 20261103: IP button and version badges share one height; copy icon in a filled tile like the reference */
.ip-button{height:56px;padding:0 8px 0 18px;gap:18px}
.ip-button>span:last-child{background:var(--accent-soft);width:40px;height:40px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.ip-button:hover>span:last-child{background:rgba(255,255,255,.18)}
.version-badge{height:56px;padding:0 16px}
@media(max-width:760px){.ip-button{height:48px}.ip-button>span:last-child{width:34px;height:34px}.version-badge{height:48px}}

/* JOIN-BAR-SIZES2 20261103: smaller blocks, tighter spacing */
.join-bar{gap:12px}
.ip-button{height:46px;padding:0 6px 0 14px;gap:12px;font-size:15px}
.ip-button>span:last-child{width:32px;height:32px;border-radius:8px}
.version-badge{height:46px;padding:0 12px;font-size:13px;gap:7px}
@media(max-width:760px){.ip-button{height:42px}.version-badge{height:42px}.ip-button>span:last-child{width:30px;height:30px}}

/* JOIN-BAR-SIZES3 20261103: smaller copy icon + tile */
.ip-button>span:last-child{width:26px;height:26px;border-radius:7px}
.ip-button .ui-icon{width:15px;height:15px}

/* TOAST-STYLE 20261103: frosted mini notification at the bottom */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);z-index:400;background:color-mix(in srgb,#161616 68%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);border-radius:12px;padding:11px 18px;font-size:14px;font-weight:600;color:var(--text);opacity:0;pointer-events:none;white-space:nowrap;box-shadow:0 14px 40px rgba(0,0,0,.35)}
@media(max-width:760px){.toast{bottom:18px;font-size:13px;max-width:calc(100vw - 32px);white-space:normal;text-align:center}}

/* TOAST-ICON 20261103: success check on the left of the toast */
.toast{display:flex;align-items:center;gap:9px}
.toast-check{flex-shrink:0;color:#35d07f}

/* TOAST-DIALOG 20261103: toast lives in the top layer so modals never cover it */
.toast{margin:0}

/* TOAST-POPOVER 20261103: neutralize UA popover inset so the toast hugs the bottom */
.toast{top:auto;right:auto;width:max-content;height:auto}

/* PROMO-CLIP-FIX2 20261103: visible overflow wins the cascade at rest; the inline promo script still sets overflow:hidden inline during the expand animation */
.promo-input .promo-body{overflow:visible}

/* LINK-HOVER 20261103: underline fades in on hover for links inside dialogs (consent etc.) */
.consent a,.dialog a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.consent a:hover,.dialog a:hover{text-decoration-color:currentColor}

/* HOWTO-BTN 20261103: "Как начать играть" button left of the IP button, same 46px row geometry */
.howto-button{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:15px;font-weight:700;white-space:nowrap}
.howto-button:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:760px){.howto-button{height:42px;padding:0 14px;font-size:14px}}

/* HOWTO-BTN2 20261103: ghost variant — no background, no border, gamepad icon */
.howto-button{background:transparent;border-color:transparent;gap:8px;padding:0 10px}
.howto-button:hover{border-color:transparent;color:var(--accent)}

/* HOWTO-PAGE 20261103: 3-step adventure page (reference layout, dark theme) */
.howto-route{padding:14px 0 34px}
.howto-head h1{font-family:Nunito,sans-serif;text-transform:uppercase;font-size:clamp(29px,4vw,45px);line-height:1.12;margin:0 0 12px}
.howto-head p{color:var(--muted);font-size:17px;margin:0 0 32px}
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.howto-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 26px 0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.howto-step{align-self:flex-start;background:var(--accent);color:#fff;font-size:13px;font-weight:800;padding:6px 12px;border-radius:8px;margin-bottom:16px}
.howto-card h2{font-size:23px;margin:0 0 10px}
.howto-card p{color:var(--muted);font-size:15.5px;line-height:1.55;margin:0}
.howto-accent{color:var(--accent);font-weight:700}
.howto-img{margin-top:auto;padding-top:24px;width:94%;align-self:center;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.howto-card--char{padding-bottom:22px}
.howto-char{position:absolute;right:-6px;bottom:64px;height:238px;z-index:0;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
.howto-card--char .howto-step,.howto-card--char h2,.howto-card--char p{position:relative;z-index:1}
.howto-ip{position:relative;z-index:2;margin-top:158px;display:flex;align-items:center;gap:12px;background:#000;border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 9px;cursor:pointer;color:var(--text);text-align:left;align-self:flex-start;max-width:100%}
.howto-ip:hover{border-color:var(--accent)}
.howto-ip-icon{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.howto-ip-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.howto-ip-text small{color:var(--muted);font-size:12px;font-weight:600}
.howto-ip-text strong{font-size:16px;white-space:nowrap}
.howto-ver{position:relative;z-index:1;margin-top:12px!important;font-size:13px!important}
@media(max-width:1000px){.howto-grid{grid-template-columns:1fr}.howto-card{max-width:560px}.howto-char{height:210px;bottom:70px}.howto-img{width:min(94%,380px)}}

/* HOWTO-CHAR2 20261103: new square character (reference pose, BV hero) sizing */
.howto-char{height:252px;right:-12px;bottom:60px}
@media(max-width:1000px){.howto-char{height:208px;bottom:66px}}

/* HOWTO-CARD3-FIX 20261103: character anchored to the card bottom, frosted #090909 IP pill, pill hugs the bottom */
.howto-char{bottom:0;height:272px;right:-12px}
.howto-card--char{min-height:472px}
.howto-ip{margin-top:auto;background:color-mix(in srgb,#090909 76%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.35);backdrop-filter:blur(12px) saturate(1.35)}
@media(max-width:1000px){.howto-char{height:218px;bottom:0}.howto-card--char{min-height:440px}}

/* LENIS-CSS 20261103: official lenis stylesheet */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* SCROLLBAR-STYLE 20261103: slim custom scrollbar, dark thumb, red on hover, no arrow buttons */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#070707}
::-webkit-scrollbar-thumb{background:#2a2a2e;border:2px solid #070707;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-thumb:active{background:#b01e24}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-corner{background:#070707}
html{scrollbar-width:thin;scrollbar-color:#2a2a2e #070707}
dialog::-webkit-scrollbar{width:8px}

/* CONTACTS-COMPACT 20261103: tighten the support block spacing */
#contacts{padding:28px 32px}
#contacts h1{margin:0 0 4px}
#contacts .contact-row{padding:12px 0 2px}
#contacts .contact-row p{margin:0 0 12px}
#contacts .contact-row:last-child{padding-bottom:0}