.bottom-nav{position:fixed;inset:auto 0 0;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;padding:0 max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-left));border-top:1px solid #ffffff12;background:radial-gradient(ellipse 92px 34px at 50% 0,#7655ca38,transparent 100%),#0c0a12ed;backdrop-filter:blur(18px)}
.bottom-nav a{display:grid;min-height:44px;justify-items:center;align-content:center;gap:2px;padding:8px 2px;color:#9f98ae;font-size:.62rem;font-weight:750;text-decoration:none}
.bottom-nav a.active{color:#d4baff}
.bottom-nav a i{font-size:.9rem}
.bottom-nav>a:not(.nav-game){align-self:center;transform:translateY(2px)}
.bottom-nav>a:first-child{grid-column:1;grid-row:1}
.bottom-nav>a:last-child{grid-column:3;grid-row:1}
.bottom-nav .nav-game{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 11px);z-index:2;isolation:isolate;display:flex;width:clamp(84px,29vw,108px);height:66px;flex-direction:row;align-items:center;justify-content:center;justify-self:auto;gap:8px;overflow:hidden;padding:0 12px;transform:translateX(-50%);border:3px solid #0c0a12;border-radius:999px;background:linear-gradient(145deg,#aa7cff 0%,#8558ef 48%,#5b38bd 100%);box-shadow:0 0 0 1px #ffffff24,0 8px 24px #865aff66,inset 0 1px #ffffff75;color:#fff}
.bottom-nav .nav-game::before{position:absolute;top:-35%;bottom:-35%;left:-42%;z-index:0;width:30%;transform:translateX(-180%) skewX(-22deg);background:linear-gradient(90deg,transparent,#ffffff15 18%,#ffffffa8 48%,#ffffff20 78%,transparent);filter:blur(1px);content:"";pointer-events:none;animation:beacon-shine 4.8s ease-in-out infinite}
.bottom-nav .nav-game i{position:relative;z-index:1;display:block;width:auto;height:auto;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;font-size:1rem}
.bottom-nav .nav-game span{position:relative;z-index:1;color:#fff;font-size:.58rem;font-weight:850;line-height:1.1}
.bottom-nav .nav-game-sparks{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 11px);z-index:1;width:1px;height:1px;pointer-events:none}
.bottom-nav .nav-game-sparks i{position:absolute;bottom:0;display:block;color:#e9ddff;font-size:6px;font-style:normal;line-height:1;text-shadow:0 0 5px #e9ddff88;opacity:0;animation:nav-star-rise 3.6s ease-out infinite}
.bottom-nav .nav-game-sparks i::before{content:"✦"}
.bottom-nav .nav-game-sparks i:nth-child(1){left:-45px;--spark-rise:-90px;--spark-drift:-6px;animation-delay:0s}
.bottom-nav .nav-game-sparks i:nth-child(2){left:-37px;--spark-rise:-116px;--spark-drift:8px;animation-delay:.3s}
.bottom-nav .nav-game-sparks i:nth-child(3){left:-29px;--spark-rise:-82px;--spark-drift:-7px;animation-delay:.6s}
.bottom-nav .nav-game-sparks i:nth-child(4){left:-21px;--spark-rise:-102px;--spark-drift:10px;animation-delay:.9s}
.bottom-nav .nav-game-sparks i:nth-child(5){left:-13px;--spark-rise:-126px;--spark-drift:-9px;animation-delay:1.2s}
.bottom-nav .nav-game-sparks i:nth-child(6){left:-5px;--spark-rise:-88px;--spark-drift:5px;animation-delay:1.5s}
.bottom-nav .nav-game-sparks i:nth-child(7){left:5px;--spark-rise:-112px;--spark-drift:-9px;animation-delay:1.8s}
.bottom-nav .nav-game-sparks i:nth-child(8){left:13px;--spark-rise:-84px;--spark-drift:7px;animation-delay:2.1s}
.bottom-nav .nav-game-sparks i:nth-child(9){left:21px;--spark-rise:-120px;--spark-drift:-10px;animation-delay:2.4s}
.bottom-nav .nav-game-sparks i:nth-child(10){left:29px;--spark-rise:-94px;--spark-drift:8px;animation-delay:2.7s}
.bottom-nav .nav-game-sparks i:nth-child(11){left:37px;--spark-rise:-108px;--spark-drift:-6px;animation-delay:3s}
.bottom-nav .nav-game-sparks i:nth-child(12){left:45px;--spark-rise:-132px;--spark-drift:9px;animation-delay:3.3s}
@keyframes nav-star-rise{0%{opacity:0;transform:translate(0,0) scale(.55)}18%{opacity:.3}68%{opacity:.3}100%{opacity:0;transform:translate(var(--spark-drift,0px),var(--spark-rise,-78px)) scale(.85)}}
@keyframes beacon-shine{0%,22%{transform:translateX(-180%) skewX(-22deg);opacity:0}32%{opacity:1}58%{transform:translateX(560%) skewX(-22deg);opacity:0}100%{transform:translateX(560%) skewX(-22deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.bottom-nav .nav-game::before,.bottom-nav .nav-game-sparks i{animation:none}}