/*
    __     ___     ___ _____ _____
    \ \   / / |   |_ _|_   _| ____|
     \ \ / /| |    | |  | | |  _|
      \ V / | |___ | |  | | | |___
       \_/  |_____|___| |_| |_____|

    vLiteRP  ·  vliterp.fr
*/
:root{
  --hw-night:#0a0612; --hw-night2:#140a1f; --hw-pumpkin:#ff7a00; --hw-orange:#ffa63d; --hw-ember:#ff4d00; --hw-violet:#8a3cff;
  --hw-ghost:#f6efff; --hw-candle:#ffd27a; --hw-cream:#ffe6c7; --hw-ink:#1a0b00; --hw-muted:#b7a6cf;
  --bg:#0a0612; --bg2:#140a1f; --bg3:#1f0f33;
  --panel:rgba(16,8,26,.985); --panel2:rgba(24,11,40,.98); --panel3:rgba(34,15,56,.975);
  --neon:#ff7a00; --neon2:#ff4d00; --neonSoft:#ffb347; --glow:rgba(255,122,0,.55); --glowSoft:rgba(255,122,0,.22);
  --blue:#8a3cff; --blueSoft:#c9a6ff; --blueLine:rgba(138,60,255,.32);
  --line:rgba(255,122,0,.18); --line2:rgba(255,122,0,.40); --lineW:rgba(255,230,199,.09);
  --text:#f6efff; --muted:#b7a6cf; --muted2:#7d6a9a;
  --ok:#ff7a00; --acc:#ffa63d; --mut:#b7a6cf;
}
::-webkit-scrollbar-thumb{background:rgba(255,122,0,.28)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,122,0,.48)}
.orb.o1{background:radial-gradient(circle,rgba(255,122,0,.34),transparent 65%)}
.orb.o2{background:radial-gradient(circle,rgba(138,60,255,.40),transparent 65%)}
.orb.o3{background:radial-gradient(circle,rgba(255,77,0,.20),transparent 65%)}
.shop{border-color:rgba(255,122,0,.42);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,166,61,.08) inset,0 0 90px rgba(255,122,0,.12),0 0 140px rgba(138,60,255,.16)}
.shop::before{background:radial-gradient(900px 400px at 85% -10%,rgba(138,60,255,.20),transparent 60%),radial-gradient(700px 320px at -5% 110%,rgba(255,122,0,.12),transparent 60%),radial-gradient(520px 260px at 50% 108%,rgba(255,77,0,.10),transparent 60%)}
.side{background:linear-gradient(180deg,rgba(255,122,0,.08),rgba(10,6,18,.35) 40%,rgba(138,60,255,.07))}
.logoWrap .logoFallback{color:#1a0b00}
.homeBtn.active{background:linear-gradient(135deg,rgba(255,122,0,.26),rgba(255,122,0,.05))}
.cat:hover{background:rgba(255,122,0,.09)}
.cat.active{background:linear-gradient(90deg,rgba(255,122,0,.24),transparent)}
.cat.active .cCount{background:rgba(255,122,0,.20)}
.linkBtn.coins .ic{background:rgba(255,122,0,.15)}
.linkBtn:hover{background:rgba(255,122,0,.07)}
.head{background:linear-gradient(135deg,rgba(255,122,0,.20),rgba(138,60,255,.20));box-shadow:0 0 16px rgba(255,122,0,.20)}
.vipTag.platinium{background:linear-gradient(135deg,#e6fff5,#00ff9d);box-shadow:0 0 14px rgba(0,255,157,.55)}
.search input{background:rgba(10,6,18,.80)}
.search input:focus{background:rgba(10,6,18,.80)}
.balance{background:linear-gradient(135deg,rgba(255,122,0,.16),rgba(255,122,0,.03))}
.iconBtn:hover{background:rgba(255,122,0,.11)}
.hero{background:linear-gradient(135deg,rgba(255,122,0,.16),rgba(138,60,255,.18) 60%,rgba(10,6,18,.6));box-shadow:0 0 50px rgba(255,122,0,.12) inset}
.heroFade{background:linear-gradient(90deg,rgba(10,6,18,.92) 20%,rgba(10,6,18,.55) 60%,rgba(10,6,18,.25))}
.hStat{background:rgba(10,6,18,.80)}
.facet.on{color:#1a0b00}
.facet.on small{background:rgba(26,11,0,.22);color:#1a0b00}
.gridHead small{background:rgba(255,122,0,.14)}
.badge{background:rgba(10,6,18,.92)}
.badge.catTag,.badge.stock{background:rgba(40,14,80,.94);border-color:#b48cff;color:#eadcff}
.badge.new,.cNew{background:rgba(72,20,0,.95);border-color:#ff4d00;color:#ffd9c7;box-shadow:0 0 9px rgba(255,77,0,.55);text-shadow:0 0 6px rgba(255,77,0,.85)}
.cNew{box-shadow:0 0 7px rgba(255,77,0,.45)}
.badge.lvl{background:rgba(70,28,0,.94);border-color:#ff7a00;color:#ffd9b8}
.badge.own{background:linear-gradient(135deg,#ff4d00,#ff7a00);color:#1a0b00}
.badge.extras{border-color:rgba(255,122,0,.55)}
.homeBtn{background:linear-gradient(135deg,rgba(138,60,255,.20),rgba(138,60,255,.05))}
.homeBtn:hover{box-shadow:0 8px 20px rgba(138,60,255,.24)}
.top{background:linear-gradient(180deg,rgba(138,60,255,.09),transparent)}
.cat .cCount,.catCard .cN,.facet small,.pill{background:rgba(138,60,255,.18)}
.btn.previewBtn{background:linear-gradient(135deg,rgba(138,60,255,.26),rgba(138,60,255,.07))}
.btn.previewBtn:hover{box-shadow:0 10px 26px rgba(138,60,255,.32)}
.rotBox.next{background:linear-gradient(135deg,rgba(138,60,255,.16),rgba(138,60,255,.03))}
.dTier .tDots i.cur{box-shadow:0 0 10px rgba(138,60,255,.6)}
.kgBase{background:rgba(201,166,255,.5)}
.catCard .cIc{background:linear-gradient(135deg,rgba(255,122,0,.20),rgba(138,60,255,.18))}
.card .img{background:radial-gradient(circle at 50% 60%,rgba(255,122,0,.16),rgba(10,6,18,.4) 70%)}
.card .img::after{background:linear-gradient(180deg,transparent,rgba(16,8,26,.85))}
.btn.primary{color:#1a0b00;box-shadow:0 8px 22px rgba(255,122,0,.32)}
.btn.primary:hover:not(:disabled){box-shadow:0 12px 30px rgba(255,122,0,.48)}
.btn.ghost:hover:not(:disabled){background:rgba(255,122,0,.09)}
.backBtn:hover{background:rgba(255,122,0,.11)}
.ladder{background:linear-gradient(135deg,rgba(255,122,0,.07),rgba(138,60,255,.07))}
.step{background:rgba(10,6,18,.80)}
.step:hover{box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 22px rgba(255,122,0,.35)}
.step .stepIc{background:radial-gradient(circle,rgba(255,230,199,.12),rgba(10,6,18,.6) 70%)}
.step.own .stepSt{background:rgba(255,122,0,.20)}
.step.next .stepSt{color:#1a0b00}
.step.lock .stepIc::after{background:rgba(10,6,18,.80)}
.dImgBox{background:radial-gradient(circle at 50% 55%,rgba(255,122,0,.18),rgba(10,6,18,.55) 65%),linear-gradient(180deg,rgba(138,60,255,.12),transparent)}
.dImgBox::after{background:rgba(255,122,0,.38)}
.dArrow,.dViewTag{background:rgba(16,8,26,.78)}
.dArrow:hover{background:rgba(255,122,0,.22);border-color:rgba(255,122,0,.6)}
.dDot.on{background:#ff7a00;box-shadow:0 0 8px rgba(255,122,0,.7)}
.dFacts li{background:rgba(10,6,18,.45)}
.dBuy{background:linear-gradient(135deg,rgba(255,122,0,.16),rgba(138,60,255,.10))}
.dTier{background:rgba(10,6,18,.5)}
.dLock.ok{background:linear-gradient(135deg,rgba(255,122,0,.16),rgba(255,122,0,.03))}
.pvTop,.pvBar,.pvLoad,.pvList,.pvInfo{background:rgba(16,8,26,.94)}
.pvItem:hover{background:rgba(255,122,0,.09)}
.pvItem.on{background:linear-gradient(90deg,rgba(255,122,0,.22),transparent)}
.pvItem .pvThumb{background:radial-gradient(circle,rgba(255,122,0,.16),rgba(10,6,18,.5) 70%)}
.pvStatFill{background:linear-gradient(90deg,#ff4d00,#ffa63d)}
.sheetBack,.modal{background:rgba(6,3,10,.86)}
.kevCard,.kgCard,.potionCard,.potionImg{background:rgba(10,6,18,.5)}
.kevPrev,.kgPrev{background:radial-gradient(circle,rgba(255,122,0,.14),rgba(10,6,18,.5) 70%)}
.kevTag,.kgTag{background:rgba(255,122,0,.09)}
.kgLevel,.potionSide{background:rgba(10,6,18,.8)}
.potionCard.side-legal{border-color:rgba(91,232,154,.38)}
.potionCard.side-legal .potionSide{color:#5be89a;border-color:rgba(91,232,154,.5)}
.mImg{background:radial-gradient(circle,rgba(255,122,0,.16),rgba(10,6,18,.5) 70%)}
.toast{background:rgba(16,8,26,.93)}
.fWrap{background:rgba(6,3,10,.90)}
.fCard{--fc:#ff7a00!important;border-color:rgba(255,122,0,.42);box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 60px rgba(255,122,0,.22)}
.fItem{border-color:rgba(255,122,0,.45);background:rgba(255,122,0,.13)}
.fQ input,.fQ textarea,.fQ select,.fZone{background:rgba(10,6,18,.6)}
.fQ input:focus,.fQ textarea:focus,.fQ select:focus{box-shadow:0 0 0 3px rgba(255,122,0,.22)}
.fYes button.on{background:rgba(255,122,0,.18)}
.fQ.picked .fZone{background:rgba(255,122,0,.09)}
.fZoneBtn{background:rgba(255,122,0,.15)}
.fZoneBtn:hover{background:rgba(255,122,0,.27)}
.fCheck{color:#1a0b00}
.xTile,.howX{background:rgba(10,6,18,.6)}
.howSteps li{background:rgba(10,6,18,.55)}
.xTile:hover{border-color:rgba(255,122,0,.45)}
.xTile.on{background:rgba(255,122,0,.11);box-shadow:0 0 0 1px rgba(255,122,0,.25),0 10px 24px rgba(0,0,0,.35)}
.xIc{background:rgba(255,122,0,.11)}
.xTile.on .xIc{background:rgba(255,122,0,.24)}
.xTile.on .xCheck,.howNum{color:#1a0b00}

.vl-hw-pill{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-top:5px;padding:2px 9px;border-radius:999px;
  border:1px solid rgba(255,122,0,.38);background:rgba(255,122,0,.10);color:#ffa63d;font:700 10px var(--font);letter-spacing:.06em;line-height:1.5;white-space:nowrap}

#app > .vl-hw-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none!important;user-select:none;contain:strict;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,6,18,0) 40%,rgba(10,6,18,.46) 100%)}
#app.previewing > .vl-hw-layer{display:none}
.vl-hw-layer *{pointer-events:none!important}
.vl-hw-layer svg{display:block;overflow:visible;stroke:none;fill:none;stroke-width:1}

.vl-hw-moon-wrap{position:absolute;top:3%;right:2.6%;width:96px;height:96px}
.vl-hw-moon-halo{position:absolute;inset:-62px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,122,.32) 0%,rgba(255,166,61,.14) 40%,rgba(255,122,0,0) 70%);animation:hwsBreath 6.5s ease-in-out infinite}
.vl-hw-moon{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fff7e6 0%,#ffe9bd 48%,#efcc8a 100%);
  box-shadow:0 0 36px rgba(255,210,122,.45),0 0 90px rgba(255,166,61,.22)}
.vl-hw-moon::before,.vl-hw-moon::after{content:"";position:absolute;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(214,178,122,.55),rgba(214,178,122,.15) 70%,rgba(214,178,122,0) 100%)}
.vl-hw-moon::before{width:20px;height:20px;left:54px;top:28px}
.vl-hw-moon::after{width:13px;height:13px;left:31px;top:57px;box-shadow:28px 8px 0 -3px rgba(214,178,122,.35)}

.vl-hw-mist{position:absolute;left:-10%;bottom:-70px;width:72%;height:240px;border-radius:50%;opacity:.26;
  background:radial-gradient(ellipse at center,rgba(246,239,255,.7) 0%,rgba(246,239,255,.32) 40%,rgba(246,239,255,0) 70%);animation:hwsMist 26s ease-in-out infinite alternate}
.vl-hw-mist.m2{left:auto;right:-14%;bottom:-100px;width:64%;height:220px;opacity:.22;animation-duration:31s;animation-direction:alternate-reverse}

.vl-hw-bat{position:absolute;top:var(--hw-y,20%);left:0;width:var(--hw-w,54px);height:calc(var(--hw-w,54px) * 0.6);opacity:var(--hw-o,.92);
  animation:hwsFly var(--hw-dur,16s) linear infinite;animation-delay:var(--hw-delay,0s)}
.vl-hw-bat.rev{animation-name:hwsFlyRev}
.vl-hw-bat svg{width:100%;height:100%}
.vl-hw-bat path{fill:#120a1c;stroke:rgba(255,166,61,.7);stroke-width:1.3;stroke-linejoin:round}
.vl-hw-bat .e{fill:#ffa63d;stroke:none}
.vl-hw-bat .w{transform-box:view-box;transform-origin:50px 32px;animation:hwsFlapL var(--hw-flap,.46s) ease-in-out infinite}
.vl-hw-bat .wr{animation-name:hwsFlapR}

.vl-hw-pumpkin{position:absolute;bottom:1.2%;width:160px;height:143px}
.vl-hw-pumpkin.p1{left:1.6%}
.vl-hw-pumpkin.p2{right:1.6%}
.vl-hw-pumpkin .glow{position:absolute;inset:-40% -30%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 58%,rgba(255,122,0,.55) 0%,rgba(255,122,0,.22) 35%,rgba(255,122,0,0) 68%);animation:hwsFlicker var(--hw-dur,3.4s) linear infinite}
.vl-hw-pumpkin svg{position:relative;width:100%;height:100%}
.vl-hw-pumpkin .face{fill:#ffd27a;animation:hwsFaceFlicker var(--hw-dur,3.4s) linear infinite}

.vl-hw-ghost{position:absolute;left:2.4%;top:38%;width:78px;height:98px;animation:hwsFloat 9s ease-in-out infinite}
.vl-hw-ghost::before{content:"";position:absolute;inset:-30% -40%;border-radius:50%;background:radial-gradient(circle,rgba(246,239,255,.28),rgba(246,239,255,0) 65%)}
.vl-hw-ghost svg{position:relative;width:100%;height:100%}

.vl-hw-web{position:absolute;left:0;top:0;width:220px;height:220px;opacity:.8}
.vl-hw-web path{fill:none;stroke:rgba(246,239,255,.34);stroke-width:1.1}
.vl-hw-spider{position:absolute;left:108px;top:-300px;width:34px;height:340px;animation:hwsSpider 11s ease-in-out infinite}
.vl-hw-spider::before{content:"";position:absolute;left:50%;top:0;bottom:28px;width:1px;
  background:linear-gradient(180deg,rgba(246,239,255,0),rgba(246,239,255,.45) 40%,rgba(246,239,255,.55))}
.vl-hw-spider svg{position:absolute;left:0;bottom:0;width:34px;height:34px}
.vl-hw-spider path{fill:none;stroke:#2a1a3a;stroke-width:2;stroke-linecap:round}
.vl-hw-spider .body{fill:#2a1a3a;stroke:rgba(255,166,61,.7);stroke-width:1}
.vl-hw-spider .e{fill:#ffa63d;stroke:none}

.vl-hw-leaf{position:absolute;top:-40px;left:var(--hw-x,20%);width:22px;height:22px;animation:hwsLeaf var(--hw-dur,14s) linear infinite;animation-delay:var(--hw-delay,0s)}
.vl-hw-leaf svg{width:100%;height:100%}
.vl-hw-leaf .vein{fill:none;stroke:rgba(60,20,0,.45);stroke-width:1}

@keyframes hwsBreath{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.14);opacity:1}}
@keyframes hwsMist{0%{transform:translateX(-6%) scaleX(1)}100%{transform:translateX(10%) scaleX(1.08)}}
@keyframes hwsFly{0%{transform:translate3d(-12vw,0,0)}20%{transform:translate3d(12vw,-34px,0)}45%{transform:translate3d(42vw,18px,0)}70%{transform:translate3d(72vw,-40px,0)}100%{transform:translate3d(112vw,6px,0)}}
@keyframes hwsFlyRev{0%{transform:translate3d(112vw,0,0)}25%{transform:translate3d(80vw,-28px,0)}50%{transform:translate3d(50vw,24px,0)}75%{transform:translate3d(22vw,-36px,0)}100%{transform:translate3d(-12vw,0,0)}}
@keyframes hwsFlapL{0%,100%{transform:rotate(26deg) scaleY(.92)}50%{transform:rotate(-20deg) scaleY(1.05)}}
@keyframes hwsFlapR{0%,100%{transform:rotate(-26deg) scaleY(.92)}50%{transform:rotate(20deg) scaleY(1.05)}}
@keyframes hwsFlicker{0%,100%{opacity:.85;transform:scale(1)}7%{opacity:1;transform:scale(1.04)}13%{opacity:.7;transform:scale(1)}21%{opacity:.95;transform:scale(1.02)}29%{opacity:.8;transform:scale(1)}
  41%{opacity:1;transform:scale(1.05)}47%{opacity:.72;transform:scale(.99)}58%{opacity:.92;transform:scale(1.02)}66%{opacity:.78;transform:scale(.98)}73%{opacity:1;transform:scale(1.03)}86%{opacity:.84;transform:scale(1)}}
@keyframes hwsFaceFlicker{0%,100%{opacity:.9}7%{opacity:1}13%{opacity:.72}21%{opacity:.98}29%{opacity:.82}41%{opacity:1}47%{opacity:.7}58%{opacity:.95}66%{opacity:.8}73%{opacity:1}86%{opacity:.86}}
@keyframes hwsFloat{0%{transform:translate3d(0,0,0) rotate(-3deg);opacity:.55}30%{transform:translate3d(26px,-26px,0) rotate(3deg);opacity:.85}60%{transform:translate3d(-14px,-44px,0) rotate(-2deg);opacity:.7}100%{transform:translate3d(0,0,0) rotate(-3deg);opacity:.55}}
@keyframes hwsSpider{0%{transform:translateY(0)}38%{transform:translateY(190px)}50%{transform:translateY(176px)}62%{transform:translateY(190px)}100%{transform:translateY(0)}}
@keyframes hwsLeaf{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}6%{opacity:.85}25%{transform:translate3d(40px,25vh,0) rotate(120deg)}50%{transform:translate3d(-30px,50vh,0) rotate(260deg)}
  75%{transform:translate3d(36px,75vh,0) rotate(380deg)}96%{opacity:.8}100%{transform:translate3d(0,104vh,0) rotate(520deg);opacity:0}}

/*
    © 2026-2027 vLiteRP · Tous droits réservés.
    Ce fichier est la propriété de vLiteRP (vliterp.fr). Toute copie, modification,
    revente ou diffusion, même partielle, sans accord écrit est interdite.
*/