/* Lot 3: shared navigation and drawer presentation. */

.drawer-backdrop {
  position: fixed;
  z-index: calc(var(--hud-z-panel) - 1);
  inset: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 28%, rgba(6, 20, 46, 0.18) 68%),
    rgba(6, 20, 46, 0.34);
  box-shadow: none;
  backdrop-filter: blur(2px) saturate(0.88);
  animation: drawer-backdrop-enter var(--motion-normal) var(--ease-tactical) both;
}

.drawer-backdrop[hidden] {
  display: none;
}

@keyframes drawer-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drawer-panel {
  --panel-accent: var(--accent-cyan);
  --panel-accent-soft: color-mix(in srgb, var(--panel-accent) 20%, transparent);
  border: 2px solid color-mix(in srgb, var(--panel-accent) 42%, var(--line-default));
  background:
    radial-gradient(circle at 14% 0%, var(--panel-accent-soft), transparent 32%),
    linear-gradient(155deg, rgba(30, 78, 137, 0.98), rgba(12, 38, 78, 0.98) 52%, rgba(8, 27, 60, 0.98));
  box-shadow: var(--shadow-3), var(--inset-metal), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#shipyardPanel { --panel-accent: var(--accent-cyan); }
#governorPanel { --panel-accent: var(--accent-purple); }
#flagshipPanel { --panel-accent: var(--accent-gold); }
#powerPanel { --panel-accent: var(--accent-gold); }
#combatReportPanel { --panel-accent: var(--state-danger); }

.drawer-panel > .panel-header {
  border-bottom: 2px solid color-mix(in srgb, var(--panel-accent) 38%, var(--line-soft));
  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) var(--radius-sm) var(--radius-sm);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel-accent) 24%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(46, 104, 171, 0.98), rgba(24, 65, 124, 0.98));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.17), 0 0.35rem 0.85rem rgba(4, 19, 48, 0.22);
}

.drawer-panel > .panel-header::before {
  width: 0.34rem;
  align-self: stretch;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--panel-accent);
  box-shadow: 0 0 0.8rem var(--panel-accent-soft);
  content: "";
}

.drawer-panel > .panel-header > div {
  flex: 1 1 auto;
}

.panel-header strong,
.resource-inventory-header strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-shadow: 0 0.1rem 0 rgba(7, 24, 57, 0.8);
}

.panel-header p {
  color: var(--text-secondary);
}

.panel-close-button,
.panel-header .panel-close-button,
.resource-inventory-header .panel-close-button {
  display: inline-grid;
  grid-template-columns: 1.7rem auto;
  align-items: center;
  width: auto;
  min-width: 6.35rem;
  min-height: var(--touch-min);
  padding: 0.28rem 0.65rem 0.28rem 0.32rem;
  gap: var(--space-2);
  border: 1px solid rgba(194, 228, 255, 0.45);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(31, 79, 137, 0.96), rgba(12, 40, 82, 0.98));
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  box-shadow: var(--inset-metal), 0 0.3rem 0.7rem rgba(3, 18, 47, 0.2);
}

.panel-close-symbol {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(240, 100, 104, 0.18);
  color: #ffd9d7;
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.panel-close-label {
  white-space: nowrap;
}

.bottom-navigation {
  border: 2px solid rgba(139, 205, 249, 0.34);
  border-bottom-color: rgba(84, 220, 244, 0.42);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(48, 101, 164, 0.84), rgba(20, 56, 111, 0.94) 28%, rgba(9, 30, 69, 0.96)),
    var(--surface-2);
  box-shadow: var(--shadow-2), var(--inset-metal);
}

.hud-action,
.bottom-navigation-item {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition:
    transform var(--motion-fast) var(--ease-tactical),
    border-color var(--motion-fast) var(--ease-tactical),
    background var(--motion-fast) var(--ease-tactical);
}

.bottom-navigation-item::before {
  filter: saturate(1.04) drop-shadow(0 0.25rem 0.4rem rgba(3, 18, 48, 0.46));
}

.bottom-navigation-item.is-active {
  border-color: rgba(255, 224, 128, 0.56);
  background:
    radial-gradient(circle at 50% 25%, rgba(84, 220, 244, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(64, 137, 209, 0.36), rgba(18, 53, 105, 0.22));
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.bottom-navigation-item.is-active::after {
  width: 1.7rem;
  height: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--accent-gold-bright);
  box-shadow: 0 0 0.55rem rgba(255, 198, 75, 0.56);
  transform: none;
}

.drawer-panel,
.flagship-context-panel,
.secondary-resources-panel,
.admiral-collection-list,
.admiral-detail,
.shipyard-panel .fleet-formation-list,
.shipyard-panel .ship-list {
  scrollbar-color: color-mix(in srgb, var(--panel-accent, var(--accent-cyan)) 72%, white) rgba(8, 29, 63, 0.62);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.drawer-panel::-webkit-scrollbar,
.flagship-context-panel::-webkit-scrollbar,
.secondary-resources-panel::-webkit-scrollbar,
.admiral-collection-list::-webkit-scrollbar,
.admiral-detail::-webkit-scrollbar,
.shipyard-panel .fleet-formation-list::-webkit-scrollbar,
.shipyard-panel .ship-list::-webkit-scrollbar {
  width: 0.48rem;
  height: 0.48rem;
}

.drawer-panel::-webkit-scrollbar-thumb,
.flagship-context-panel::-webkit-scrollbar-thumb,
.secondary-resources-panel::-webkit-scrollbar-thumb,
.admiral-collection-list::-webkit-scrollbar-thumb,
.admiral-detail::-webkit-scrollbar-thumb,
.shipyard-panel .fleet-formation-list::-webkit-scrollbar-thumb,
.shipyard-panel .ship-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--panel-accent, var(--accent-cyan)) 76%, white) padding-box;
}

.power-toast {
  border: 2px solid color-mix(in srgb, var(--state-success) 58%, var(--line-default));
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(36, 91, 137, 0.98), rgba(13, 44, 84, 0.98));
  box-shadow: var(--shadow-2), var(--inset-metal);
}

.power-toast.is-loss {
  border-color: color-mix(in srgb, var(--state-danger) 72%, var(--line-default));
}

@media (hover: hover) and (pointer: fine) {
  .panel-close-button:hover {
    border-color: rgba(255, 217, 215, 0.7);
    background: linear-gradient(180deg, rgba(74, 107, 158, 0.98), rgba(24, 54, 101, 0.98));
  }

  .bottom-navigation-item:hover {
    border-color: rgba(139, 205, 249, 0.34);
    transform: translateY(-0.08rem);
  }
}

@media (max-height: 520px) and (orientation: landscape), (max-width: 520px) {
  .drawer-backdrop {
    backdrop-filter: blur(1px) saturate(0.9);
  }

  .panel-close-button,
  .panel-header .panel-close-button,
  .resource-inventory-header .panel-close-button {
    grid-template-columns: 1fr;
    width: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0.32rem;
  }

  .panel-close-symbol {
    width: 100%;
    height: 100%;
    min-height: 1.7rem;
  }

  .panel-close-label {
    display: none;
  }

  .bottom-navigation {
    padding-inline: var(--space-2);
    border-radius: var(--radius-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop,
  .drawer-panel:not([hidden]) {
    animation: none;
  }
}

/* --- DA "Space Conquete" : navigation basse renforcee --- */

.bottom-navigation-item {
  font-family: var(--font-display);
  font-weight: 800;
}

.bottom-navigation-item.is-active {
  color: var(--accent-gold-bright);
  text-shadow: 0 0 0.6rem rgba(255, 198, 75, 0.4), 0 1px 1px rgba(7, 29, 66, 0.6);
}

.bottom-navigation-item.is-active::before {
  filter: saturate(1.15) brightness(1.08) drop-shadow(0 0 0.6rem rgba(255, 198, 75, 0.5));
  transform: translateY(-0.12rem) scale(1.08);
}

/* ==========================================================================
   Navigation basse — refonte "medaillons"

   Structure : deux boutons ronds detaches encadrent un rail central.

     [recentrer]  ( Flotte · Technologie · Amiraux · Mon Vaisseau · Planetes )  [courrier]

   Les regles ci-dessous sont volontairement exhaustives : la barre etait
   decrite dans quatre feuilles qui se contredisaient (grille a 4 colonnes
   heritee d'une version a 4 onglets, fond pose deux fois). Ce bloc, charge en
   dernier, fait autorite.
   ========================================================================== */

.bottom-navigation {
  display: flex;
  right: auto;
  left: 50%;
  align-items: center;
  justify-content: center;
  width: min(52rem, calc(100vw - 1rem));
  min-height: 4.9rem;
  padding: 0;
  gap: 0.4rem;
  border: 0;
  background: none;
  box-shadow: none;
  /* Le rognage en biseau du HUD couperait les boutons ronds. */
  clip-path: none;
  transform: translateX(-50%);
}

.bottom-navigation-track {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
  min-height: 4.6rem;
  padding: 0.2rem 0.5rem;
  gap: 0.15rem;
  border: 2px solid rgba(255, 200, 96, 0.72);
  border-radius: 2.6rem;
  background:
    linear-gradient(180deg, rgba(22, 62, 128, 0.94), rgba(6, 20, 52, 0.97) 55%, rgba(3, 11, 32, 0.98)),
    var(--surface-2);
  box-shadow:
    0 0 0 1px rgba(64, 160, 255, 0.35),
    0 0 1.6rem rgba(40, 140, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    var(--shadow-2);
}

.bottom-navigation-item {
  display: grid;
  grid-template-rows: 2.9rem auto;
  place-items: center;
  min-width: 0;
  min-height: 4.1rem;
  padding: 0 0.1rem;
  gap: 0.1rem;
  border: 0;
  background: none;
  box-shadow: none;
  color: #dceeff;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  /* Les libelles longs ("Mon Vaisseau") ne doivent ni deborder ni passer a la
     ligne : la barre garde une hauteur fixe. */
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  overflow: hidden;
  max-width: 100%;
}

.bottom-navigation-item::before {
  width: 2.85rem;
  height: 2.85rem;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat;
  filter: drop-shadow(0 0 0.5rem rgba(64, 190, 255, 0.42));
  content: attr(data-icon);
  color: transparent;
}

#techTreeButton::before {
  background-image: url("/assets/hud/nav/optimized/nav_tech_new.png");
}

#planetsButton::before {
  background-image: url("/assets/hud/nav/optimized/nav_planets_new.png");
}

/* Etat actif : soulignement dore, comme avant la refonte. */
.bottom-navigation-item.is-active {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--accent-gold-bright);
}

.bottom-navigation-item.is-active::after {
  position: absolute;
  bottom: 0.1rem;
  width: 1.5rem;
  height: 0.18rem;
  border-radius: var(--radius-pill);
  background: var(--accent-gold-bright);
  box-shadow: 0 0 0.5rem rgba(255, 198, 75, 0.7);
  content: "";
  transform: none;
}

/* "Mes Planetes" est presente mais pas encore jouable : elle reste lisible et
   cliquable (elle explique qu'elle arrive), sans se faire passer pour active. */
.bottom-navigation-item.is-standby {
  opacity: 0.62;
}

.bottom-navigation-item.is-standby::before {
  filter: grayscale(0.35) drop-shadow(0 0 0.4rem rgba(64, 190, 255, 0.24));
}

/* --- Boutons ronds detaches --- */

.bottom-navigation-aside {
  position: relative;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 2px solid rgba(255, 200, 96, 0.72);
  border-radius: 50%;
  background: center / 92% no-repeat;
  box-shadow:
    0 0 0 1px rgba(64, 160, 255, 0.35),
    0 0 1.4rem rgba(40, 140, 255, 0.4),
    var(--shadow-2);
  color: transparent;
  font-size: 0;
}

.bottom-navigation-aside--mail {
  background-image: url("/assets/hud/nav/optimized/nav_mail_new.png");
}

.bottom-navigation-aside--map {
  background-image: url("/assets/hud/nav/optimized/nav_map_new.png");
}

.bottom-navigation-aside.is-active {
  border-color: var(--accent-gold-bright);
  box-shadow:
    0 0 0 1px rgba(255, 214, 128, 0.6),
    0 0 1.6rem rgba(255, 198, 75, 0.5),
    var(--shadow-2);
}

.bottom-navigation-aside .notification-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  font-size: 0.62rem;
}

/* Le resume "Commandement" flotte au-dessus du rail central uniquement. */
.bottom-navigation .fleet-summary {
  right: 5.2rem;
  left: 5.2rem;
  width: auto;
}

@media (max-width: 30rem) {
  .bottom-navigation {
    width: calc(100vw - 0.5rem);
    gap: 0.25rem;
  }

  .bottom-navigation-aside {
    width: 3.6rem;
    height: 3.6rem;
  }

  .bottom-navigation-track {
    min-height: 4rem;
    padding-inline: 0.3rem;
    border-radius: 2.1rem;
  }

  .bottom-navigation-item {
    grid-template-rows: 2.4rem auto;
    min-height: 3.6rem;
    font-size: 0.5rem;
  }

  .bottom-navigation-item::before {
    width: 2.35rem;
    height: 2.35rem;
  }

  .bottom-navigation .fleet-summary {
    right: 4rem;
    left: 4rem;
  }
}