/* Bottom bar: a game dock with 3D icons (career-ui.js builds it). Overrides the gem buttons in career.css. */
body.career{--c-nav:88px}
body.career .c-nav{left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:2px;overflow:visible;
  padding:6px max(8px,calc(50% - 330px)) calc(8px + env(safe-area-inset-bottom,0px));border:0;border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,rgba(32,52,112,.97),rgba(12,20,48,.98) 55%,rgba(8,13,32,.99));
  box-shadow:inset 0 1.5px 0 rgba(150,200,255,.35),inset 0 0 0 1px rgba(120,170,255,.12),0 -10px 30px rgba(0,0,0,.45)}
body.career .c-nav::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,217,100,.55),transparent);pointer-events:none}
body.career .c-nav button{position:relative;height:70px;border:0;border-radius:18px;padding:0 2px 4px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
  background:none;box-shadow:none;color:#9FB4E4;text-shadow:none;cursor:pointer;transition:color .2s;-webkit-tap-highlight-color:transparent}
body.career .c-nav button:active{transform:none;box-shadow:none}
body.career .c-nav .nv-ic{position:relative;display:grid;place-items:center;width:44px;height:44px;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
body.career .c-nav .nv-ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5)) saturate(.85) brightness(.92);transition:filter .2s}
body.career .c-nav .nv-ic svg{width:28px;height:28px}
body.career .c-nav button span{font:800 min(12.5px,3.1vw)/1 var(--c-disp);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:color .2s}
/* the open page: lifts, glows gold and gets a little bar */
body.career .c-nav button::before{content:"";position:absolute;left:50%;top:2px;width:62px;height:52px;transform:translateX(-50%) scale(.6);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,217,100,.55),rgba(255,217,100,0));opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
body.career .c-nav button::after{content:"";position:absolute;left:50%;bottom:-3px;width:0;height:4px;border-radius:4px;transform:translateX(-50%);background:linear-gradient(90deg,#FFE066,#F0A000);box-shadow:0 0 10px #FFD964;transition:width .25s}
body.career .c-nav button.on{color:#FFD964;filter:none;transform:none}
body.career .c-nav button.on::before{opacity:1;transform:translateX(-50%) scale(1)}
body.career .c-nav button.on::after{width:22px}
body.career .c-nav button.on .nv-ic{transform:translateY(-5px) scale(1.14)}
body.career .c-nav button.on .nv-ic img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)) saturate(1.1)}
body.career .c-nav button.pop .nv-ic{animation:nvpop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes nvpop{0%{transform:scale(.8)}60%{transform:translateY(-7px) scale(1.2)}100%{transform:translateY(-5px) scale(1.14)}}
/* Home: a big raised round button in the middle */
body.career .c-nav button.mid{overflow:visible}
body.career .c-nav button.mid:not(.on) .nv-ic{box-shadow:0 0 0 3px rgba(255,217,100,.6),0 8px 18px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,255,255,.18)}
body.career .c-nav button.mid .nv-ic{width:72px;height:72px;margin-top:-30px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2D4FA8,#14265A 70%);box-shadow:0 0 0 3.5px #FFD964,0 0 0 6px rgba(240,160,0,.45),0 8px 18px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,255,255,.18)}
body.career .c-nav button.mid .nv-ic img{width:52px;height:52px}
body.career .c-nav button.mid::before{top:-30px;width:96px;height:96px}
body.career .c-nav button.mid::after{display:none}
body.career .c-nav button.mid.on .nv-ic{transform:translateY(-3px) scale(1.06);box-shadow:0 0 0 3.5px #FFE680,0 0 0 7px rgba(240,160,0,.55),0 0 24px rgba(255,217,100,.6),0 8px 18px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,255,255,.18)}
body.career .c-nav button.mid.pop .nv-ic{animation:nvpopm .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes nvpopm{0%{transform:scale(.85)}60%{transform:translateY(-5px) scale(1.12)}100%{transform:translateY(-3px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){body.career .c-nav .nv-ic{transition:none;animation:none!important}}
html.still body.career .c-nav .nv-ic{animation:none!important}