/* 하단 메뉴 "함선 콘솔 스위치" (B안).
   기존 여러 파일(lobby-tactics.css, fleet-ui-refresh.css)에 쌓인 하단 메뉴 규칙을 이 파일이 덮어씁니다.
   - 메뉴 바: 게임 화면 가로폭에 꽉 맞춤(양옆 틈 없음)
   - 버튼: 금속 콘솔 키, 위쪽 LED 표시등(선택 시 점등), 원형 계기판 배지(선택 시 눈금 링 회전) */
#app div.fixed-nav{
  --nav-panel:#0b1524; --nav-key-top:#1c2b41; --nav-key-mid:#0a1220; --nav-key-bottom:#111b2c;
  --nav-edge:#2b4466; --nav-text:#9fb4c8;
  left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;
  padding:6px 5px calc(6px + env(safe-area-inset-bottom,0px))!important;
  border:0!important;border-top:1px solid var(--nav-edge)!important;border-radius:0!important;
  background:linear-gradient(180deg,#132036 0%,var(--nav-panel) 38%,#050a13 100%)!important;
  box-shadow:inset 0 1px #ffffff14,0 -6px 18px #000a!important;backdrop-filter:none!important;overflow:visible!important;
}
#app div.fixed-nav::before{left:0!important;right:0!important;top:-1px!important;height:1px!important;background:linear-gradient(90deg,transparent,#70dfff99,#d8f7ffcc,#70dfff99,transparent)!important;box-shadow:0 0 8px #54d7ff55!important}

/* 메뉴별 색: 우주지도 청록 / 지구연합 파랑 / 함교 금 / 함대관리 민트 / 연구실 보라 */
#app div.fixed-nav button[data-screen="map"]{--c:#55e0ff}
#app div.fixed-nav button[data-screen="earth-union"]{--c:#7aa2ff}
#app div.fixed-nav button[data-screen="home"]{--c:#ffd76a}
#app div.fixed-nav button[data-screen="collection"]{--c:#5fe8b8}
#app div.fixed-nav button[data-screen="summon"]{--c:#c58bff}

/* 콘솔 키 */
#app div.fixed-nav button[data-screen]{
  position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  height:auto!important;min-height:74px;width:100%!important;padding:12px 0 7px!important;
  border:1px solid #1e3049!important;border-radius:10px!important;
  background:linear-gradient(180deg,var(--nav-key-top),var(--nav-key-mid) 55%,var(--nav-key-bottom))!important;
  box-shadow:inset 0 1px #ffffff24,inset 0 -2px #000a,0 2px 0 #000c!important;
  color:var(--nav-text)!important;text-shadow:none!important;filter:none!important;overflow:visible!important;
  transition:background .2s,transform .08s,box-shadow .08s!important;cursor:pointer;
}
#app div.fixed-nav button[data-screen]:active{transform:translateY(1px)!important;box-shadow:inset 0 1px #ffffff14,inset 0 -1px #000a,inset 0 2px 6px #000c!important}
#app div.fixed-nav button[data-screen]:focus-visible{outline:2px solid var(--c)!important;outline-offset:2px!important}

/* LED 표시등: 평소엔 꺼진 색, 선택하면 깜빡이며 켜진 뒤 은은하게 숨쉬듯 빛남 */
#app div.fixed-nav button[data-screen]::after{
  content:""!important;position:absolute!important;left:50%!important;right:auto!important;top:4px!important;bottom:auto!important;
  width:24px!important;height:3px!important;margin-left:-12px;border-radius:2px;
  background:color-mix(in srgb,var(--c) 20%,#18212f)!important;box-shadow:inset 0 1px #0008!important;transition:background .2s;
}
#app div.fixed-nav button[data-screen]:hover::after{background:color-mix(in srgb,var(--c) 45%,#18212f)!important}
#app div.fixed-nav button[data-screen].active::after{
  background:var(--c)!important;box-shadow:0 0 8px var(--c),0 0 2px #fff!important;
  animation:nav-led-on .42s steps(1,end) both,nav-led-breathe 2.6s ease-in-out .42s infinite;
}

/* 원형 계기판 배지 */
#app div.fixed-nav button[data-screen] .menu-badge{
  position:relative!important;display:grid!important;place-items:center!important;flex:none!important;
  width:38px!important;height:38px!important;padding:0!important;border-radius:50%!important;clip-path:none!important;
  border:1px solid color-mix(in srgb,var(--c) 55%,#2a3a52)!important;
  background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--c) 26%,#132238),#060d18 72%)!important;background-image:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--c) 26%,#132238),#060d18 72%)!important;
  box-shadow:inset 0 0 8px #000c,inset 0 1px #ffffff22,0 0 0 2px #0a1220,0 0 0 3px #3d4d66!important;
  color:var(--c)!important;transform:none!important;transition:filter .2s,box-shadow .2s!important;
}
#app div.fixed-nav button[data-screen] .menu-badge::before{
  content:""!important;display:block!important;position:absolute!important;inset:-7px!important;border:0!important;clip-path:none!important;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 85%,#fff) 0deg 3deg,transparent 3deg 22.5deg)!important;
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 62%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 61%,#000 62%,#000 70%,transparent 71%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
#app div.fixed-nav button[data-screen] .menu-badge::after{display:none!important}
#app div.fixed-nav button[data-screen] .menu-badge svg{
  display:block!important;position:relative;z-index:1;width:26px!important;height:26px!important;stroke-width:2.2;
  opacity:.72;filter:none!important;transition:opacity .2s,filter .2s;
}
#app div.fixed-nav button[data-screen]:hover .menu-badge svg{opacity:.95}

/* 선택된 메뉴 */
#app div.fixed-nav button[data-screen].active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,#24364f),#0d1727 60%,#16233a)!important;
  border-color:color-mix(in srgb,var(--c) 40%,#1e3049)!important;
}
#app div.fixed-nav button[data-screen].active .menu-badge{
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px #ffffff33,0 0 0 2px #0a1220,0 0 0 3px color-mix(in srgb,var(--c) 55%,#3d4d66),0 0 14px color-mix(in srgb,var(--c) 55%,transparent)!important;
}
#app div.fixed-nav button[data-screen].active .menu-badge::before{opacity:.75;animation:nav-ring-spin 9s linear infinite}
#app div.fixed-nav button[data-screen].active .menu-badge svg{opacity:1;filter:drop-shadow(0 0 4px var(--c))!important}

/* 이름표 */
#app div.fixed-nav .menu-label{font-family:var(--font-body)!important;font-size:11px!important;font-weight:700!important;line-height:1!important;letter-spacing:0!important;color:var(--nav-text)!important;text-shadow:0 1px 2px #000!important;transform:none!important}
#app div.fixed-nav button[data-screen].active .menu-label{color:#fff!important;text-shadow:0 0 8px color-mix(in srgb,var(--c) 70%,transparent),0 1px 2px #000!important}

@keyframes nav-led-on{0%{opacity:.2}20%{opacity:1}35%{opacity:.35}55%{opacity:1}70%{opacity:.6}100%{opacity:1}}
@keyframes nav-led-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}}
@keyframes nav-ring-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #app div.fixed-nav button[data-screen].active::after,#app div.fixed-nav button[data-screen].active .menu-badge::before{animation:none!important}
}
@media (max-width:360px){#app div.fixed-nav .menu-label{font-size:10px!important}#app div.fixed-nav button[data-screen] .menu-badge{width:34px!important;height:34px!important}}