/* UNITED GAMER 2.1.38 — lower-left navigation with adjustable geometry and safe viewport bounds. */
body.home .hero.ug-hero-carousel .ug-hero-bottom-nav{
 --ug-orange:#ff931d;--ug-amber:#ffb257;
 --ug-nav-slot:clamp(43px,var(--ug-nav-length,43px),86px);
 --ug-nav-control-height:44px;--ug-nav-gap:8px;
 --ug-nav-total:calc(var(--ug-nav-slot) + var(--ug-nav-slot) + var(--ug-nav-slot) + var(--ug-nav-slot) + var(--ug-nav-gap) + var(--ug-nav-gap) + var(--ug-nav-gap) + 8px);
 --ug-orb-size:calc(var(--ug-nav-thickness,5px) + 7px);
 position:absolute;z-index:65;
 left:clamp(12px,calc(max(22px,50vw - 656px) + var(--ug-nav-offset-x,0px)),calc(100% - var(--ug-nav-total) - 96px));
 top:clamp(130px,calc(clamp(430px,100svh - 175px,615px) + var(--ug-nav-offset-y,0px)),min(calc(100svh - 145px),calc(100% - 60px)));
 display:flex;align-items:center;gap:var(--ug-nav-gap);
 height:var(--ug-nav-control-height);padding:0 4px;max-width:calc(100% - 88px);
 border:0;background:transparent;pointer-events:auto;
}
body.home .hero.ug-hero-carousel .ug-bottom-dot{
 box-sizing:border-box!important;position:relative;display:grid!important;place-items:center!important;
 width:var(--ug-nav-slot)!important;min-width:var(--ug-nav-slot)!important;height:42px!important;min-height:42px!important;
 padding:0!important;margin:0!important;background:transparent!important;border:0!important;
 border-radius:12px!important;color:inherit!important;cursor:pointer!important;
 -webkit-appearance:none!important;appearance:none!important;outline-offset:1px;
}
body.home .hero.ug-hero-carousel .ug-bottom-dot:focus-visible{outline:2px solid var(--ug-amber)!important}
body.home .hero.ug-hero-carousel .ug-bottom-track{
 width:calc(var(--ug-nav-slot) - 14px);height:var(--ug-nav-thickness,5px);position:relative;display:block;box-sizing:border-box;border-radius:5px;
 background:rgba(255,133,31,.31);transition:width .3s,background .3s,box-shadow .3s;
}
body.home .hero.ug-hero-carousel .ug-bottom-dot.is-active .ug-bottom-track{width:var(--ug-nav-slot);background:var(--ug-orange);box-shadow:0 0 12px rgba(255,132,18,.34)}
body.home .hero.ug-hero-carousel .ug-bottom-dot:hover .ug-bottom-track{background:#ffae55;box-shadow:0 0 12px #ff862c80}
body.home .hero.ug-hero-carousel .ug-bottom-beam{position:absolute;inset:0;display:block;border-radius:inherit;pointer-events:none;overflow:hidden}
body.home .hero.ug-hero-carousel .ug-bottom-beam::before{content:"";display:block;position:absolute;inset:0;opacity:0}
body.home .hero.ug-hero-carousel .ug-bottom-eq{display:none}
body.home .hero.ug-hero-carousel .ug-bottom-orbit,
body.home .hero.ug-hero-carousel .ug-bottom-guide{display:none}

/* 1. ENERGY: a narrow traveling luminous spark, only on the active track. */
body.home .hero.ug-hero-carousel .ug-bottom--energy .ug-bottom-dot.is-active .ug-bottom-beam::before{
 opacity:1;width:12px;right:auto;background:linear-gradient(90deg,transparent,#fff3ca 66%,#fff 80%,transparent);
 filter:drop-shadow(0 0 4px #ffc071);animation:ugBottomEnergy 2.3s linear infinite;
}
@keyframes ugBottomEnergy{from{transform:translateX(-14px)}to{transform:translateX(calc(var(--ug-nav-slot) + 11px))}}

/* 2. CHARGE: four outlined cells, the active one fills while autoplay counts down. */
body.home .hero.ug-hero-carousel .ug-bottom--charge .ug-bottom-track{
 width:calc(var(--ug-nav-slot) - 9px);height:calc(var(--ug-nav-thickness,5px) + 4px);border:1px solid rgba(255,153,60,.5);border-radius:3px;
 background:rgba(68,36,20,.65);overflow:hidden;box-shadow:none;
}
body.home .hero.ug-hero-carousel .ug-bottom--charge .ug-bottom-dot.is-active .ug-bottom-track{width:var(--ug-nav-slot);border-color:#ffab52;box-shadow:0 0 10px #ff831953}
body.home .hero.ug-hero-carousel .ug-bottom--charge .ug-bottom-beam::before{
 opacity:0;inset:1px auto 1px 1px;width:calc(100% - 2px);border-radius:1px;
 background:linear-gradient(90deg,#ef710d,#ffc064);transform-origin:left;transform:scaleX(1);
}
body.home .hero.ug-hero-carousel .ug-bottom--charge .ug-bottom-dot.is-active .ug-bottom-beam::before{opacity:1}
body.home .hero.ug-hero-carousel.ug-hero-autoplay .ug-bottom--charge .ug-bottom-dot.is-active .ug-bottom-beam::before{animation:ugBottomCharge 7.5s linear both}
@keyframes ugBottomCharge{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 3. SCANNER: fine instrument ticks with a sweeping luminous scanner. */
body.home .hero.ug-hero-carousel .ug-bottom--scan .ug-bottom-track{
 width:calc(var(--ug-nav-slot) - 9px);height:calc(var(--ug-nav-thickness,5px) + 7px);border-radius:0;box-shadow:none;
 background:repeating-linear-gradient(90deg,rgba(255,143,37,.46) 0 2px,transparent 2px 7px);
}
body.home .hero.ug-hero-carousel .ug-bottom--scan .ug-bottom-dot.is-active .ug-bottom-track{width:var(--ug-nav-slot);box-shadow:none;background:repeating-linear-gradient(90deg,#ff9e34 0 2px,transparent 2px 7px)}
body.home .hero.ug-hero-carousel .ug-bottom--scan .ug-bottom-beam{border-radius:0;overflow:visible}
body.home .hero.ug-hero-carousel .ug-bottom--scan .ug-bottom-dot.is-active .ug-bottom-beam::before{
 width:3px;right:auto;opacity:1;inset:-3px auto -3px 0;background:#ffd6a0;box-shadow:0 0 9px 3px rgba(255,143,25,.7);
 animation:ugBottomScan 2.5s ease-in-out infinite alternate;
}
@keyframes ugBottomScan{from{transform:translateX(0)}to{transform:translateX(calc(var(--ug-nav-slot) - 3px))}}

/* 4. TRAIL: one physical orb moves smoothly between the four locations. */
body.home .hero.ug-hero-carousel .ug-bottom--trail{--ug-nav-gap:3px}
body.home .hero.ug-hero-carousel .ug-bottom--trail .ug-bottom-dot{width:var(--ug-nav-slot)!important;min-width:var(--ug-nav-slot)!important}
body.home .hero.ug-hero-carousel .ug-bottom--trail .ug-bottom-track{
 width:calc(var(--ug-nav-slot) - 13px);height:clamp(2px,calc(var(--ug-nav-thickness,5px) * .45),7px);border-radius:3px;background:rgba(236,119,26,.36);box-shadow:none;
}
body.home .hero.ug-hero-carousel .ug-bottom--trail .ug-bottom-dot.is-active .ug-bottom-track{background:rgba(255,161,64,.58);width:calc(var(--ug-nav-slot) - 13px);box-shadow:none}
body.home .hero.ug-hero-carousel .ug-bottom--trail .ug-bottom-orbit{
 display:block;position:absolute;top:calc((var(--ug-nav-control-height) - var(--ug-orb-size)) / 2);left:calc(4px + (var(--ug-nav-slot) - var(--ug-orb-size)) / 2);pointer-events:none;
 height:var(--ug-orb-size);width:var(--ug-orb-size);border-radius:50%;z-index:2;
 background:#ffd29a;box-shadow:0 0 0 3px rgba(255,134,22,.48),0 0 16px 5px rgba(255,131,14,.58);
 transform:translateX(calc(var(--ug-active-index,0) * (var(--ug-nav-slot) + var(--ug-nav-gap))));
 transition:transform .6s cubic-bezier(.16,.8,.19,1.1);
}
body.home .hero.ug-hero-carousel .ug-bottom--trail .ug-bottom-orbit::before{
 content:"";position:absolute;width:22px;height:5px;top:4px;right:7px;
 background:linear-gradient(90deg,transparent,rgba(255,139,29,.68));filter:blur(2px);
}

/* 5. EQUALIZER: five small stems, different phases, active only. */
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-track{
 height:calc(var(--ug-nav-thickness,5px) + 17px);width:calc(var(--ug-nav-slot) - 13px);background:transparent;box-shadow:none;border-radius:0;
}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-dot.is-active .ug-bottom-track{height:calc(var(--ug-nav-thickness,5px) + 17px);width:var(--ug-nav-slot);background:transparent;box-shadow:none}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-eq{
 display:flex;position:absolute;inset:1px 0;align-items:center;justify-content:center;gap:3px;
}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-eq i{
 width:clamp(2px,calc(var(--ug-nav-thickness,5px) * .6),5px);height:calc(var(--ug-nav-thickness,5px) + 1px);border-radius:2px;background:rgba(255,151,52,.5);transition:background .2s;
}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-dot.is-active .ug-bottom-eq i{
 background:var(--ug-orange);box-shadow:0 0 6px #ff8b1f99;
 animation:ugBottomEq .85s ease-in-out infinite alternate;
}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-eq i:nth-child(2){animation-delay:-.5s}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-eq i:nth-child(3){animation-delay:-.3s}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-eq i:nth-child(4){animation-delay:-.72s}
body.home .hero.ug-hero-carousel .ug-bottom--equalizer .ug-bottom-eq i:nth-child(5){animation-delay:-.16s}
@keyframes ugBottomEq{from{height:var(--ug-nav-thickness,5px)}to{height:calc(var(--ug-nav-thickness,5px) + 15px)}}

@media(max-width:760px){
 body.home .hero.ug-hero-carousel .ug-hero-bottom-nav{
  --ug-nav-slot:clamp(39px,calc(var(--ug-nav-length,43px) - 4px),58px);
  --ug-nav-control-height:38px;--ug-nav-gap:2px;
  left:clamp(10px,calc(14px + var(--ug-nav-offset-x,0px)),calc(100% - var(--ug-nav-total) - 76px));
  top:clamp(155px,calc(clamp(360px,100svh - 155px,560px) + var(--ug-nav-offset-y,0px)),min(calc(100svh - 125px),calc(100% - 56px)));
  height:38px;max-width:calc(100% - 77px);
 }
 body.home .hero.ug-hero-carousel .ug-bottom-dot{width:var(--ug-nav-slot)!important;min-width:var(--ug-nav-slot)!important;height:38px!important;min-height:38px!important}
 body.home .hero.ug-hero-carousel .ug-bottom--trail .ug-bottom-dot{width:var(--ug-nav-slot)!important;min-width:var(--ug-nav-slot)!important}
}
@media(max-width:400px){
 body.home .hero.ug-hero-carousel .ug-hero-bottom-nav{
  top:clamp(155px,calc(clamp(365px,100svh - 145px,540px) + var(--ug-nav-offset-y,0px)),min(calc(100svh - 125px),calc(100% - 56px)));
 }
}
@media(prefers-reduced-motion:reduce){
 body.home .hero.ug-hero-carousel .ug-hero-bottom-nav *,
 body.home .hero.ug-hero-carousel .ug-hero-bottom-nav *::before,
 body.home .hero.ug-hero-carousel .ug-hero-bottom-nav *::after{
  animation:none!important;transition:none!important;
 }
}
