/* ════════════════════════════════════════════════════════════════
   SGC GALAXY FULLVIEW 3D — Wave 4 refonte 28/04
   Vue 3D plein écran navigable du secteur (overlay sur table)
   ════════════════════════════════════════════════════════════════ */

.galaxy-fullview-3d {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  background: radial-gradient(ellipse at 50% 50%, var(--bg) 0%, var(--bg-deep) 80%);
}
.galaxy-fullview-3d.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* When 3D mode active : hide table + lock panel size (no scrollbar toggle) */
.gal-layout.gal-mode-3d .gal-map-panel > .gal-table {
  visibility: hidden;
}
.gal-layout.gal-mode-3d .gal-map-panel {
  overflow: hidden !important; /* prevents scrollbar fluctuation that resizes canvas */
}

/* HUD overlay */
.gfv3d-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}
.gfv3d-hint {
  font-family:var(--font-mono);
  font-size: 13px; color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
}
.gfv3d-legend {
  display: flex; gap: 14px;
  pointer-events: auto;
  background: var(--shade-2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 8px 14px;
  backdrop-filter: blur(6px);
}
.gfv3d-leg-item {
  display: flex; align-items: center; gap: 6px;
  font-family:var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.gfv3d-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

/* Hover label */
.gfv3d-label {
  position: absolute; z-index: 11;
  pointer-events: none;
  font-family:var(--font-display);
  font-size: 12px; color:var(--textbright);
  background: rgba(8, 14, 28, 0.92);
  border: 1px solid rgba(120, 180, 255, 0.40);
  border-radius: 6px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(80, 130, 220, 0.25);
  white-space: nowrap;
  letter-spacing: 0.4px;
}
.gfv3d-label strong {
  color: #ffd860;
  margin-right: 4px;
}

/* Reset camera button — bottom-left to stay clear of sun glare + minimap */
/* !important on position because the global ripple-host class adds position:relative */
.galaxy-fullview-3d .gfv3d-reset,
.gfv3d-reset {
  position: absolute !important; bottom: 18px !important; left: 18px !important; z-index: 12;
  top: auto !important; right: auto !important;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 8px;
  background: rgba(8, 14, 28, 0.92);
  border: 1px solid rgba(255, 216, 96, 0.55);
  color: #ffd860;
  font-family:var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 216, 96, 0.20);
}
.gfv3d-reset::before {
  content: '⟳';
  font-size: 18px; line-height: 1;
  display: inline-block;
  transition: transform 0.3s ease;
}
.gfv3d-reset:hover {
  background: rgba(255, 216, 96, 0.20);
  border-color: rgba(255, 216, 96, 0.85);
  box-shadow: 0 4px 18px rgba(255, 216, 96, 0.45);
}
.gfv3d-reset:hover::before { transform: rotate(180deg); }

/* Mini-map radar (top-right corner) */
.gfv3d-minimap {
  position: absolute; top: 60px; right: 18px; z-index: 10;
  width: 160px; height: 160px;
  border-radius: 8px;
  border: 1px solid rgba(120, 180, 255, 0.40);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(80, 130, 220, 0.2);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gfv3d-minimap:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7), 0 0 22px rgba(120, 180, 255, 0.4);
}

/* Audio mute button (legacy — kept for layout) */
.gfv3d-mute {
  position: absolute; bottom: 18px; right: 72px; z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(8, 14, 28, 0.85);
  border: 1px solid rgba(120, 180, 255, 0.45);
  color: var(--rarity-rare);
  font-family:var(--font-display);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.gfv3d-mute:hover { background: rgba(120, 180, 255, 0.20); }
.gfv3d-mute.muted { color: #888; border-color: rgba(140, 140, 140, 0.45); }

/* Enriched hover tooltip */
.gfv3d-tooltip {
  position: absolute; z-index: 11;
  pointer-events: none;
  font-family:var(--font-display);
  font-size: 11px; color: #cfe0ff;
  background: rgba(8, 14, 28, 0.94);
  border: 1px solid rgba(120, 180, 255, 0.40);
  border-radius: 8px;
  padding: 10px 13px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(80, 130, 220, 0.3);
  min-width: 200px;
  letter-spacing: 0.4px;
}
.gfv3d-tt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(120, 180, 255, 0.18);
}
.gfv3d-tt-head strong { color:var(--textbright); font-size: 13px; letter-spacing: 0.5px; }
.gfv3d-tt-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: var(--tint-4); text-transform: uppercase;
  letter-spacing: 1px;
}
.gfv3d-tt-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 2px 0; font-size: 10px;
}
.gfv3d-tt-row span { color: rgba(207, 224, 255, 0.55); text-transform: uppercase; letter-spacing: 1px; }
.gfv3d-tt-row strong { color: #ffd860; }

/* Cls color tints for tags */
/* Tier color codes aligned with in-game scheme : T1=green, T2=orange, T3=red, T4=purple */
.gfv3d-tt-tag.gfv3d-cls-mine        { background: rgba(255,216,96,0.22);  color: #ffd860; }
.gfv3d-tt-tag.gfv3d-cls-ally        { background: rgba(96,255,144,0.22);  color: #60ff90; }
.gfv3d-tt-tag.gfv3d-cls-enemy       { background: rgba(255,96,96,0.22);   color: var(--replic); }
.gfv3d-tt-tag.gfv3d-cls-npc_t1      { background: rgba(46,204,136,0.22);  color: #2ecc88; }
.gfv3d-tt-tag.gfv3d-cls-npc_t2      { background: rgba(255,178,102,0.22); color: #ffb266; }
.gfv3d-tt-tag.gfv3d-cls-npc_t3      { background: rgba(255,102,102,0.22); color: #ff6666; }
.gfv3d-tt-tag.gfv3d-cls-npc_t4      { background: rgba(168,85,247,0.28);  color: #c47cff; }
.gfv3d-tt-tag.gfv3d-cls-uninhabited { background: rgba(80,90,110,0.30);   color: var(--textsoft); }

/* CSS2D in-scene planet labels */
.gfv3d-planet-label {
  font-family:var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px var(--shade-3);
  text-align: center;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  transition: opacity 0.25s ease;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(2, 6, 14, 0.7);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  /* Sprint G4 : contrast garanti */
  text-shadow: 0 0 6px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.gfv3d-planet-label.gfv3d-dimmed { opacity: 0.18; }
/* Sprint G4 — lisibilité + fix concat name/owner via séparateur explicite */
.gfv3d-pl-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.3px;
}
.gfv3d-pl-sep {
  display: block;
  height: 1px;
  margin: 3px -5px 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.35;
}
.gfv3d-pl-owner {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.82;
  line-height: 1.15;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.gfv3d-planet-label.gfv3d-cls-mine   { border-color: rgba(255,216,96,0.55);  color: #ffe890; }
.gfv3d-planet-label.gfv3d-cls-ally   { border-color: rgba(96,255,144,0.45);  color: #90ffb0; }
.gfv3d-planet-label.gfv3d-cls-enemy  { border-color: rgba(255,96,96,0.45);   color: #ff9090; }
.gfv3d-planet-label.gfv3d-cls-npc_t1 { border-color: rgba(46,204,136,0.45);  color: #6fe0a8; }
.gfv3d-planet-label.gfv3d-cls-npc_t2 { border-color: rgba(255,178,102,0.45); color: #ffce99; }
.gfv3d-planet-label.gfv3d-cls-npc_t3 { border-color: rgba(255,102,102,0.55); color: #ff9090; }
.gfv3d-planet-label.gfv3d-cls-npc_t4 { border-color: rgba(168,85,247,0.55);  color: #c47cff; }

/* ═══════════ Sprint G7 (13/05/2026) — HUD 3D responsive ═══════════ */
@media (max-width: 1024px) {
  .gfv3d-hud { padding: 8px 12px; }
  .gfv3d-minimap { width: 130px; height: 130px; top: 56px; right: 12px; }
  .gfv3d-legend { padding: 6px 10px; gap: 10px; }
  .gfv3d-leg-item { font-size: 9px; letter-spacing: 0.8px; }
}
@media (max-width: 768px) {
  /* Hint texte caché — mobile sait déjà comment swipe */
  .gfv3d-hint { display: none; }
  /* Légende collapsible : transformée en bouton compact en bas-gauche */
  .gfv3d-legend {
    position: absolute; bottom: 70px; left: 14px;
    z-index: 12;
    pointer-events: auto;
    flex-direction: row; flex-wrap: wrap;
    max-width: calc(50vw - 24px);
    padding: 6px 8px; gap: 6px;
    background: rgba(8, 14, 28, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  }
  .gfv3d-leg-item { font-size: 8px; letter-spacing: 0.4px; }
  .gfv3d-dot { width: 8px; height: 8px; }
  /* Minimap réduite + repositionnée pour ne pas chevaucher le sheet */
  .gfv3d-minimap { width: 100px; height: 100px; top: 58px; right: 10px; border-radius: 50%; }
  /* HUD bar compact : 3 icônes rondes 44×44 glass à droite (toggle 2D, reset, mute) */
  .gfv3d-hud { padding: 6px 10px; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); }
  .galaxy-fullview-3d .gfv3d-reset,
  .gfv3d-reset {
    bottom: auto !important; left: auto !important;
    top: 10px !important; right: calc(110px + 12px) !important;
    width: 44px; height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
    z-index: 14;
  }
  .gfv3d-reset::before { font-size: 22px; margin: 0; }
  .gfv3d-mute {
    bottom: auto; right: calc(110px + 12px + 56px);
    top: 10px;
    width: 44px; height: 44px;
  }
  /* Tooltip caché sur touch — le doigt cache l'écran (radial menu prend le relais) */
  .gfv3d-tooltip { display: none !important; }
}
@media (max-width: 480px) {
  .gfv3d-minimap { width: 80px; height: 80px; top: 54px; right: 8px; }
  .galaxy-fullview-3d .gfv3d-reset,
  .gfv3d-reset { right: calc(88px + 8px) !important; top: 8px !important; }
  .gfv3d-mute { right: calc(88px + 8px + 52px); top: 8px; width: 44px; height: 44px; }
  .gfv3d-legend { bottom: 64px; left: 8px; max-width: calc(60vw - 16px); }
  .gfv3d-leg-item { font-size: 8px; }
  /* Labels plus compacts sur petit écran (LOD JS limite aussi le nombre) */
  .gfv3d-planet-label { padding: 3px 6px; }
  .gfv3d-pl-name { font-size: 11px; }
  .gfv3d-pl-owner { font-size: 9px; }
}
/* Touch device — désactive hover effects (pas d'inversion gris pour tap) */
@media (hover: none) {
  .gfv3d-reset:hover { background: rgba(8, 14, 28, 0.92); border-color: rgba(255, 216, 96, 0.55); }
  .gfv3d-reset:hover::before { transform: none; }
  .gfv3d-minimap:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — LA CARTE PREND L'ÉCRAN.  06/09/2026
   ──────────────────────────────────────────────────────────────────────────
   La carte était interdite au téléphone jusqu'à aujourd'hui. Rendue, elle
   s'affichait à sa place dans le flux : un rectangle de 374×422 tout en bas
   de la page, sous la bannière d'invasion, la barre de coordonnées et sept
   filtres — à moitié mangé par la barre du bas, et invisible sans faire
   défiler. Une carte qu'on doit chercher n'est pas une carte.

   Elle passe donc en plein écran entre les deux barres, et la rangée
   LISTE / 3D / GALAXIE monte avec elle : c'est par là qu'on ressort, et
   c'est le seul chemin de retour au doigt.

   Le renderer suit tout seul : un ResizeObserver écoute l'hôte.
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (max-width: 767px) {
  /* 🔑 C'est le PANNEAU qu'on sort du flux, pas la carte. `.gal-map-panel`
     porte `contain: layout style` : un descendant en `position: fixed` s'y
     ancre au lieu de s'ancrer à l'écran (le confinement crée un bloc
     conteneur). Premier essai mesuré : canvas 374×228 au lieu du plein
     écran, sans un mot d'erreur. La carte, elle, garde son `inset: 0`. */
  body.dev-phone .gal-layout.gal-mode-3d .gal-map-panel {
    position: fixed;
    left: 0;
    right: 0;
    /* 🔑 126 PX ETAIT LA HAUTEUR DE L'ANCIENNE COQUILLE.
       Ce chiffre datait de la barre du haut a 109 px plus la rangee de planete
       a 51. La coquille de l'application publie sa vraie hauteur dans
       `--topbar-h` (app-chrome.css la remesure a chaque changement de taille),
       et la barre d'onglets la sienne dans `--app-tabbar-h`. On les lit au
       lieu de recopier une mesure qui vieillit : un nombre en dur ici faisait
       demarrer la carte trop haut et elle recouvrait le bandeau d'invasion. */
    /* `--sgc-raid-bas` est l'ECART qu'il manque pour passer sous le bandeau de
       raid, publie par le module 3D. Sans bandeau la variable n'existe pas et
       la ligne vaut exactement ce qu'elle valait avant. */
    top: calc(var(--topbar-h, 126px) + env(safe-area-inset-top, 0px) + var(--sgc-raid-bas, 0px));
    bottom: calc(var(--app-tabbar-h, 56px) + 12px + env(safe-area-inset-bottom, 0px));
    max-height: none;
    min-height: 0;
    margin: 0;
    contain: none;
    z-index: 900;
    border-radius: 0;
  }

  /* La sortie de la carte est le bouton ✕ du HUD (gfv3dQuit) : la rangée
     LISTE / 3D / GALAXIE vit dans `.gal-cmdbar`, un contexte d'empilement que
     la carte recouvre — la faire flotter par-dessus demandait de remonter
     toute la barre de commande, coordonnées comprises, au-dessus de la carte. */

  /* 🔑 Le z-index du panneau (900) ne sert à RIEN tant que son parent
     `.gal-layout` porte `z-index: 1` : le panneau est enfermé dans ce
     contexte d'empilement, et c'est le 1 du parent qu'on compare au 2 de la
     barre de raccourcis sticky. Mesuré : `#galQuickNav` (z=2) peignait ses
     trois boutons EN PLEIN MILIEU de la carte, alors que le hit-test, lui,
     tombait bien sur la carte — la barre était devant à l'œil et derrière au
     doigt. On remonte le parent, et on retire la barre pendant la carte :
     par-dessus une carte plein écran, elle n'a rien à dire. */
  body.dev-phone .gal-layout.gal-mode-3d { z-index: 40; }
  body.dev-phone .gal-layout.gal-mode-3d ~ #galQuickNav,
  body.dev-phone #sf_galaxy:has(.gal-mode-3d) #galQuickNav { display: none; }

  /* La légende et la minimap se replient vers le haut : en bas, elles
     tombaient derrière la rangée de vues. */
  body.dev-phone .gal-layout.gal-mode-3d .gfv3d-legend {
    bottom: auto;
    top: 56px;
    left: 8px;
    max-width: calc(100vw - 130px);
  }
}

/* ── La sortie de la carte ────────────────────────────────────────────────
   Une croix, 44 px, en haut à droite, sous l'encoche. Présente sur tous les
   écrans : au doigt il n'y a pas d'Échap, et à la souris une croix ne coûte
   rien. Elle ramène à la liste, elle ne masque pas la carte — masquer aurait
   laissé le jeu en mode « carte » sans carte. */
.gfv3d-quit {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  background: rgba(8, 16, 32, 0.82);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.gfv3d-quit:active { filter: brightness(1.3); transform: scale(0.94); }

/* Sur téléphone la minimap occupait ce coin : elle glisse sous la croix. */
@media (pointer: coarse) and (max-width: 767px) {
  body.dev-phone .gfv3d-minimap { top: 62px; right: 8px; }
  body.dev-phone .galaxy-fullview-3d .gfv3d-reset,
  body.dev-phone .gfv3d-reset { top: 14px !important; right: calc(64px + 8px) !important; }
  body.dev-phone .gfv3d-mute { top: 14px; right: calc(64px + 8px + 52px); }
}