
/* =========================================================
   CLASTIE NETWORK V6 PRO — whole-site effects & page system
   ========================================================= */
:root{
 --v6-orange:#ff7a18;--v6-orange-hi:#ffae58;--v6-ink:#06090d;--v6-panel:#0c121a;
 --v6-line:rgba(255,255,255,.085);--v6-text:#f7f9fc;--v6-muted:#8490a2;
 --v6-ease:cubic-bezier(.2,.8,.2,1);
}

/* global polish */
*{scrollbar-width:thin;scrollbar-color:#3a2a1f #090d13}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#090d13}
::-webkit-scrollbar-thumb{background:linear-gradient(#463224,#211a16);border:2px solid #090d13;border-radius:10px}
::selection{background:rgba(255,122,24,.30);color:#fff}
a,button{transition:color .2s var(--v6-ease),background .2s var(--v6-ease),border-color .2s var(--v6-ease),transform .2s var(--v6-ease),box-shadow .2s var(--v6-ease)}
.cl-scroll-progress{position:fixed;left:0;top:0;height:2px;background:linear-gradient(90deg,#ff5f00,#ffb257);z-index:99999;box-shadow:0 0 12px rgba(255,122,24,.7);pointer-events:none}

/* header motion */
.cl-header{position:sticky!important;top:0;transition:transform .34s var(--v6-ease),filter .25s,background .25s}
.cl-header.is-compact .cl-announcement{max-height:0;opacity:0;overflow:hidden;border:0;transition:max-height .25s,opacity .18s}
.cl-header.is-compact .cl-nav-inner{height:64px!important}
.cl-header.is-compact .cl-brand-mark{width:38px;height:38px;font-size:22px}
.cl-header.is-compact .cl-brand-text b{font-size:17px!important}
.cl-header.is-scrolling-down{transform:translateY(-100%)}
.cl-header.is-scrolling-up{transform:translateY(0)}
.cl-announcement{max-height:48px;transition:max-height .25s,opacity .18s}
.cl-mainnav{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cl-nav-link:before{content:"";position:absolute;left:11px;right:11px;top:14px;bottom:14px;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,122,24,.03));opacity:0;transform:scale(.94);transition:.2s var(--v6-ease)}
.cl-nav-link:hover:before,.cl-nav-link.is-active:before{opacity:1;transform:scale(1)}
.cl-nav-link>*{position:relative;z-index:1}

/* hero effects */
.cl-hero{isolation:isolate}
.cl-hero-grid{transition:transform .25s ease-out;will-change:transform}
.cl-emblem{transition:transform .25s ease-out;will-change:transform}
.cl-emblem:before{box-shadow:inset 0 0 36px rgba(255,122,24,.04)}
.cl-emblem-c{animation:clPulseLogo 4.5s ease-in-out infinite}
@keyframes clPulseLogo{0%,100%{filter:drop-shadow(0 0 0 rgba(255,122,24,0))}50%{filter:drop-shadow(0 0 18px rgba(255,122,24,.28))}}
.cl-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.cl-particles i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:#ff9a45;border-radius:2px;opacity:.16;box-shadow:0 0 10px rgba(255,122,24,.55);animation:clFloat var(--dur) ease-in-out var(--delay) infinite}
@keyframes clFloat{0%,100%{transform:translate3d(0,18px,0) rotate(0);opacity:.05}45%{opacity:.28}50%{transform:translate3d(var(--drift),-34px,0) rotate(180deg)}}
.cl-hero-actions>a,.cl-hero-actions>button{position:relative;overflow:hidden}
.cl-hero-actions>a:before,.cl-hero-actions>button:before,.cl-register-btn:before{
 content:"";position:absolute;inset:-100% 50%;width:35%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transition:transform .7s
}
.cl-hero-actions>a:hover:before,.cl-hero-actions>button:hover:before,.cl-register-btn:hover:before{transform:translateX(520%) rotate(25deg)}
.cl-ip-box{transition:.22s var(--v6-ease)}
.cl-ip-box:hover{border-color:rgba(255,122,24,.34);transform:translateY(-2px);box-shadow:0 18px 45px rgba(0,0,0,.24)}
.cl-ip-box.is-copied{border-color:#4ade80!important;box-shadow:0 0 0 3px rgba(74,222,128,.08)!important}

/* reveal */
.cl-reveal{opacity:0;transform:translateY(20px) scale(.988);filter:blur(3px);transition:opacity .55s var(--v6-ease) var(--cl-delay,0ms),transform .55s var(--v6-ease) var(--cl-delay,0ms),filter .55s var(--v6-ease) var(--cl-delay,0ms)}
.cl-reveal.is-visible{opacity:1;transform:none;filter:none}

/* card light-follow */
.card,.cl-mode-card{position:relative;transition:transform .18s ease,box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.card:after,.cl-mode-card:after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,122,24,.085),transparent 45%);
 transition:opacity .2s
}
.card:hover:after,.cl-mode-card:hover:after{opacity:1}
.card:hover{border-color:rgba(255,122,24,.22)!important;box-shadow:0 22px 70px rgba(0,0,0,.34)!important}

/* Ripple */
.cl-ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.42);transform:translate(-50%,-50%) scale(0);animation:clRipple .65s ease-out;pointer-events:none;z-index:99}
@keyframes clRipple{to{transform:translate(-50%,-50%) scale(24);opacity:0}}
.cl-copy-toast{position:fixed;left:50%;bottom:34px;z-index:999999;transform:translate(-50%,20px);opacity:0;display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:7px;background:#0d1516;border:1px solid rgba(74,222,128,.25);color:#b7f7ca;box-shadow:0 18px 55px rgba(0,0,0,.45);font-size:14px;transition:.22s var(--v6-ease)}
.cl-copy-toast.show{opacity:1;transform:translate(-50%,0)}

/* INNER PAGE HERO */
.cl-inner-hero{height:245px;position:relative;overflow:hidden;border-bottom:1px solid var(--v6-line);background:#080c12}
.cl-inner-hero-bg{position:absolute;inset:-35px;background:
 linear-gradient(90deg,rgba(6,9,13,.96) 0%,rgba(6,9,13,.72) 55%,rgba(6,9,13,.40)),
 linear-gradient(0deg,#080c12 0%,transparent 62%),
 url('/assets/clastie/img/header-bg.png') center 32%/cover no-repeat;filter:saturate(.75) contrast(1.05);transform:scale(1.04)}
.cl-inner-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.cl-inner-content{height:100%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.cl-inner-copy{padding-top:5px}
.cl-inner-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--v6-orange-hi);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.cl-inner-kicker:before{content:"";width:25px;height:2px;background:var(--v6-orange)}
.cl-inner-copy h1{margin:8px 0 10px!important;font-size:clamp(34px,4vw,52px)!important;line-height:1!important;text-shadow:0 8px 30px rgba(0,0,0,.45)}
.cl-inner-breadcrumb{display:flex;align-items:center;gap:9px;color:#687587;font-size:13px}
.cl-inner-breadcrumb a{color:#a4aebe}.cl-inner-breadcrumb i{font-size:8px;color:#4e5968}
.cl-inner-cube{width:80px;height:80px;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(34deg);margin-right:70px;animation:clCube 11s linear infinite}
.cl-inner-cube .face{position:absolute;width:80px;height:80px;border:1px solid rgba(255,145,62,.22);background:linear-gradient(135deg,rgba(255,122,24,.17),rgba(255,255,255,.025));box-shadow:inset 0 0 22px rgba(255,122,24,.04)}
.cl-inner-cube .front{transform:translateZ(40px)}.cl-inner-cube .back{transform:rotateY(180deg) translateZ(40px)}.cl-inner-cube .right{transform:rotateY(90deg) translateZ(40px)}.cl-inner-cube .left{transform:rotateY(-90deg) translateZ(40px)}.cl-inner-cube .top{transform:rotateX(90deg) translateZ(40px)}.cl-inner-cube .bottom{transform:rotateX(-90deg) translateZ(40px)}
@keyframes clCube{to{transform:rotateX(342deg) rotateY(394deg)}}

/* Hide duplicate first title/breadcrumb when generated banner exists */
body:not(.cl-path-home) .cl-inner-hero + .relative.z-30 > .container > .breadcrumb:first-child,
body:not(.cl-path-home) .cl-inner-hero + .container > .breadcrumb:first-child{margin-top:0}

/* PAGE-SPECIFIC DESIGN */
/* Store */
body[class*="cl-path-store"] .cl-main .grid{gap:18px!important}
body[class*="cl-path-store"] .card{overflow:hidden}
body[class*="cl-path-store"] .card img{transition:transform .45s var(--v6-ease),filter .35s;filter:saturate(.9) brightness(.92)}
body[class*="cl-path-store"] .card:hover img{transform:scale(1.045);filter:saturate(1.08) brightness(1)}
body[class*="cl-path-store"] .card [class*="line-through"]{color:#596576!important}
body[class*="cl-path-store"] .card [class*="font-bold"]{letter-spacing:.01em}
body[class*="cl-path-store"] table{overflow:hidden;border-radius:9px}

/* VIP comparison tables */
body[class*="cl-path-store"] table th:not(:first-child){text-align:center}
body[class*="cl-path-store"] table td:not(:first-child){text-align:center}
body[class*="cl-path-store"] table thead th{background:linear-gradient(180deg,#101823,#0a1018)!important}
body[class*="cl-path-store"] table tbody tr:nth-child(even){background:rgba(255,255,255,.018)!important}

/* blog/news */
body[class*="cl-path-blog"] .card img{aspect-ratio:16/9;object-fit:cover}
body[class*="cl-path-blog"] article img{border-radius:8px}
body[class*="cl-path-blog"] .prose,body[class*="cl-path-blog"] .ck-content{font-size:17px!important}
body[class*="cl-path-blog"] .prose p,body[class*="cl-path-blog"] .ck-content p{margin-bottom:1.1em}

/* profile */
body[class*="cl-path-members"] .cl-main img{image-rendering:auto}
body[class*="cl-path-members"] .cl-main img[src*="minotar"],body[class*="cl-path-members"] .cl-main img[src*="avatar"]{image-rendering:pixelated}
body[class*="cl-path-members"] .card{background:linear-gradient(145deg,#0f1620,#091019)!important}

/* leaderboards */
body[class*="cl-path-leader"] tbody tr:nth-child(1) td{background:rgba(255,191,41,.055)!important}
body[class*="cl-path-leader"] tbody tr:nth-child(2) td{background:rgba(194,208,220,.035)!important}
body[class*="cl-path-leader"] tbody tr:nth-child(3) td{background:rgba(191,115,48,.04)!important}
body[class*="cl-path-leader"] tbody tr:nth-child(-n+3) td:first-child{color:#ffad50!important;font-weight:700}

/* credits */
body[class*="cl-path-credits"] .card,body[class*="cl-path-payment"] .card{border-top:2px solid rgba(255,122,24,.55)!important}
body[class*="cl-path-credits"] input:focus,body[class*="cl-path-payment"] input:focus{background:#0b1119!important}

/* support/help */
body[class*="cl-path-help"] .card,body[class*="cl-path-tickets"] .card{border-left:2px solid rgba(255,122,24,.28)!important}
body[class*="cl-path-help"] .card:hover,body[class*="cl-path-tickets"] .card:hover{border-left-color:var(--v6-orange)!important}

/* auth */
body[class*="cl-path-auth"] .cl-main,body[class*="cl-path-login"] .cl-main,body[class*="cl-path-register"] .cl-main{min-height:720px}
body[class*="cl-path-auth"] .card,body[class*="cl-path-login"] .card,body[class*="cl-path-register"] .card{box-shadow:0 28px 90px rgba(0,0,0,.4)!important}

/* forum */
body[class*="cl-path-forum"] .card{transition:.2s var(--v6-ease)}
body[class*="cl-path-forum"] .card:hover{transform:translateX(3px)!important}

/* application */
body[class*="cl-path-applications"] .card{border-top:1px solid rgba(255,122,24,.22)!important}

/* footer refinements */
.cl-footer-v5{box-shadow:0 -30px 100px rgba(0,0,0,.22)}
.cl-footer-column>a{position:relative;width:max-content}
.cl-footer-column>a:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--v6-orange);transition:width .2s}
.cl-footer-column>a:hover:after{width:100%}
.cl-socials a:hover{transform:translateY(-3px)}

/* image fade */
.cl-main img{opacity:.94;transition:opacity .25s}
.cl-main img.is-loaded{opacity:1}

/* responsive */
@media(max-width:900px){
 .cl-inner-hero{height:205px}.cl-inner-cube{width:60px;height:60px;margin-right:30px}.cl-inner-cube .face{width:60px;height:60px}
 .cl-inner-cube .front{transform:translateZ(30px)}.cl-inner-cube .back{transform:rotateY(180deg) translateZ(30px)}.cl-inner-cube .right{transform:rotateY(90deg) translateZ(30px)}.cl-inner-cube .left{transform:rotateY(-90deg) translateZ(30px)}.cl-inner-cube .top{transform:rotateX(90deg) translateZ(30px)}.cl-inner-cube .bottom{transform:rotateX(-90deg) translateZ(30px)}
}
@media(max-width:640px){
 .cl-inner-hero{height:175px}.cl-inner-cube{display:none}.cl-inner-copy h1{font-size:34px!important}.cl-inner-kicker{font-size:11px}
 .cl-copy-toast{bottom:20px;font-size:13px}
 .cl-reveal{transform:translateY(12px)}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .cl-reveal{opacity:1!important;transform:none!important;filter:none!important}
}

.cl-home-intro-v6{padding:70px 0 58px;background:linear-gradient(180deg,#090d13,#070a0f);border-bottom:1px solid var(--v6-line);position:relative;overflow:hidden}
.cl-home-intro-v6:before{content:"";position:absolute;width:520px;height:240px;right:-150px;top:-100px;background:rgba(255,122,24,.07);filter:blur(70px);border-radius:50%}
.cl-home-section-head{text-align:center;max-width:730px;margin:0 auto 34px;position:relative}
.cl-home-section-head>span{color:var(--v6-orange-hi);font-size:13px;font-weight:700;letter-spacing:.15em}
.cl-home-section-head h2{font-size:38px!important;margin:8px 0 10px!important}.cl-home-section-head p{color:#7d899a!important;font-size:16px!important}
.cl-feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
.cl-feature-box{min-height:150px;padding:24px 20px;border:1px solid var(--v6-line);background:linear-gradient(145deg,#0d141d,#090e15);border-radius:9px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transition:.24s var(--v6-ease)}
.cl-feature-box:hover{transform:translateY(-5px);border-color:rgba(255,122,24,.25);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.cl-feature-box i{font-size:23px;color:var(--v6-orange);margin-bottom:14px}.cl-feature-box b{font-size:17px;color:#fff}.cl-feature-box small{font-size:13px;color:#748093;margin-top:5px}
@media(max-width:900px){.cl-feature-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.cl-feature-row{grid-template-columns:1fr}.cl-home-intro-v6{padding:48px 0}.cl-home-section-head h2{font-size:30px!important}}
