/* ============================================================
   ASTRA GENESIS, 05-SCREENS.CSS
   v0.2.0, styles propres à chaque écran.
   ============================================================ */

/* ================= PLANÈTE ================= */
.planet-wrap{display:grid;grid-template-columns:1fr calc(300px*var(--scale));gap:calc(18px*var(--scale));align-items:start;}
@media(max-width:1000px){.planet-wrap{grid-template-columns:1fr;}}
/* v0.27.0, DA v2 : gauche 68% vue surface / droite 32% cartes empilées,
   demande explicite (PASSE 01 v2). Ratio en fr plutôt qu'en % pour
   composer proprement avec le gap existant. */
.planet-wrap.dv2{grid-template-columns:68fr 32fr;}
@media(max-width:1000px){.planet-wrap.dv2{grid-template-columns:1fr;}}
.holo-stage{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(45,212,191,.07), transparent 60%),
    linear-gradient(180deg, var(--hull-2), var(--hull) 60%, var(--void-2));
  min-height:calc(520px*var(--scale));overflow:hidden;
}
/* v0.11.0 : vue aérienne de colonie (assets/img/vue/overview.jpg) en
   fond, assombrie et semi-transparente dans sa propre couche pour que
   les hexagones et le texte restent lisibles quel que soit le
   contenu de la photo, quelle que soit la densité de l'image.
   v0.12.1 : fond éclairci (moins de voile noir) + halo cyan dédié
   derrière la grille (.stage-glow) pour que les hexagones ressortent
   mieux, demande explicite ("grille lisible"). */
.holo-stage::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,14,24,.4), rgba(6,14,24,.6) 65%, rgba(6,14,24,.82)),
    url('../assets/img/vue/overview.jpg') center 38% / cover no-repeat;
  opacity:.55;pointer-events:none;
}
/* v0.27.0, DA v2 : la surface .dv2-surface porte sa propre couche de fond
   animée (.dv2-surface-bg, css/design-system.css, planet-temperate.webp
   avec repli dégradé), l'ancienne image de survol (assets/img/vue/) ne
   doit pas se superposer par-dessus. */
.holo-stage.dv2-surface::before{display:none;}
.holo-stage.dv2-surface{display:flex;flex-direction:column;}
.holo-stage.dv2-surface .stage-glow,.holo-stage.dv2-surface .ring-fx{z-index:2;}
.holo-stage.dv2-surface .hexboard{z-index:5;}
/* v0.60.1 : la légende des catégories a migré DANS le panneau
   CONSTRUCTIONS du dock (voir AG.dockBlockHTML), l'ancienne règle de
   placement du bloc séparé n'a plus d'objet. */
.holo-stage.dv2-surface .dv2-dock{z-index:5;}
.holo-stage .stage-glow{
  position:absolute;left:50%;top:52%;width:calc(760px*var(--scale));height:calc(540px*var(--scale));
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(45,212,191,.16), transparent 72%);
}
.holo-stage .ring-fx{position:absolute;left:50%;top:44%;width:calc(640px*var(--scale));height:calc(640px*var(--scale));transform:translate(-50%,-50%);border:1px solid rgba(45,212,191,.08);border-radius:50%;}
.holo-stage .ring-fx::before,.holo-stage .ring-fx::after{content:"";position:absolute;inset:calc(60px*var(--scale));border:1px solid rgba(167,139,250,.06);border-radius:50%;}
.holo-stage .ring-fx::after{inset:calc(130px*var(--scale));border-color:rgba(245,158,11,.06);}
/* v0.60.1 : le plateau n'est plus une grille centrée en perspective
   (effet prisme retiré, demande explicite) mais un CALQUE À PLAT posé
   sur tout le render : chaque tuile est positionnée en pourcentage par
   AG.buildHexboard, d'après le plan de pose seedé du terrain
   (js/00n-colony-layout.js). Le conteneur ne met donc plus rien en
   forme, il ne fait que fournir le repère de coordonnées. */
.hexboard{position:absolute;inset:0;}
/* v0.60.1 : tuile PLATE, posée en % du render par AG.buildHexboard.
   Plus de fond opaque (le terrain doit rester visible dessous) ni de
   clip-path : l'hexagone est dessiné par un SVG de contour, et un slot
   bâti reçoit en plus une tuile d'icône carrée (.hex-tile ci-dessous).
   Trois états visuels demandés : libre (contour teal discret), survolé
   (contour teal vif), sélectionné (contour ambre). */
/* v0.60.3 : la cellule prend la taille de la maille du nid d'abeille,
   calculée par AG.hexGridLayout et posée sur le plateau en --hex-w /
   --hex-h (déjà diminuées de l'inset, d'où l'espace régulier entre
   contours). Le trait, lui, garde son propre réglage : --hex-sw. */
.hex{
  position:absolute;transform:translate(-50%,-50%);
  width:var(--hex-w, 92px);height:var(--hex-h, 106px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, filter .15s ease;
  --hex-stroke:rgba(45,212,191,.45);--hex-fill:transparent;--hex-sw:1.6;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); /* détache le contour du terrain clair */
}
.hex:hover{--hex-stroke:var(--cyan);--hex-fill:rgba(45,212,191,.10);--hex-sw:2;transform:translate(-50%,-50%) scale(1.04);z-index:6;}
.hex.sel{--hex-stroke:var(--amber);--hex-fill:rgba(245,158,11,.10);--hex-sw:2.4;z-index:6;}
.hex:focus-visible{outline:none;--hex-stroke:var(--cyan);--hex-sw:2.4;}
/* emplacement pas encore débloqué : présent, estompé, jamais masqué.
   Voir AG.colonySlotsUnlocked (js/04-screen-planet.js) : aucun ne l'est
   aujourd'hui, l'état est prêt pour le jour où une règle existera. */
.hex.locked{--hex-stroke:rgba(100,125,150,.3);--hex-fill:rgba(10,16,26,.35);cursor:not-allowed;opacity:.55;}
.hex.locked:hover{--hex-stroke:rgba(100,125,150,.5);transform:translate(-50%,-50%);}
.hex-lock{position:relative;z-index:2;font-size:calc(13px*var(--scale));opacity:0;transition:opacity .15s;}
.hex.locked:hover .hex-lock{opacity:.8;}
.hex-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hex-outline polygon{
  fill:var(--hex-fill);stroke:var(--hex-stroke);stroke-width:var(--hex-sw);
  vector-effect:non-scaling-stroke;transition:fill .15s ease, stroke .15s ease;
}
/* Pas d'état "verrouillé" ici : dans ce jeu, les 24 emplacements d'une
   colonie sont tous disponibles dès le départ, ce sont les BÂTIMENTS
   qui se débloquent (palier de la Direction et phase de tutoriel, voir
   AG.buildingUnlockOk). Le cadenas vit donc sur les cartes du catalogue
   (écran Bâtiments), pas sur le plateau : rien à styler tant qu'aucun
   emplacement ne peut réellement être verrouillé. */
/* v0.60.2 : un emplacement bâti est REMPLI, l'image du bâtiment occupe
   tout l'hexagone (découpe hexagonale, même géométrie que le contour).
   Remplace la petite tuile carrée flottante de la v0.60.1, qui laissait
   l'hexagone visuellement vide autour d'une icône minuscule. Sans
   sprite disponible, le dégradé de catégorie + l'initiale remplissent
   l'hexagone de la même façon : jamais de trou. */
.hex-tile{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  /* découpe POINTY-TOP, exactement la même géométrie que le contour SVG
     (v0.60.3) : l'image épouse l'hexagone au pixel près. */
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--dv2-cat, var(--cyan)) 62%, #0B1020),
    color-mix(in srgb, var(--dv2-cat, var(--cyan)) 26%, #0B1020));
  transition:filter .15s ease;
}
.hex:hover .hex-tile{filter:brightness(1.15);}
/* v0.65.1 : vignette par id (.ag-art, css/03-components.css), placeholder
   navy + initiale dessous, image par-dessus (retirée seule en cas de 404). */
.hex-tile .ag-art{--art-tint:var(--dv2-cat, var(--cyan));--art-ph-size:calc(20px*var(--scale));}
/* le contour est redessiné au-dessus de l'image pour rester net */
.hex-outline.top{z-index:2;}
/* badge de niveau en coin de l'hexagone (v0.12.1, repositionné v0.60.2) */
.hex .hex-badge{
  position:absolute;z-index:3;top:calc(8px*var(--scale));right:calc(14px*var(--scale));
  font-family:var(--font-mono);font-size:.54rem;font-weight:700;
  color:#03251f;background:var(--cyan);border-radius:6px;padding:1px 5px;line-height:1.35;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.stage-caption{position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.06em;}
.stage-caption b{color:var(--ink-1);}
.side-stack{display:flex;flex-direction:column;gap:calc(14px*var(--scale));}

/* ---------- Conseiller (Lisibilité v1, v0.20.0) ----------
   Écran Planète, panneau "Conseiller" : jusqu'à 3 lignes priorisées
   (critique rose / alerte ambre / opportunité cyan, DA v0.14), voir
   AG.computeAdvisorActions (js/01-engine.js) et AG.renderAdvisor
   (js/04-screen-planet.js). Pastille colorée plutôt qu'un fond plein
   (contrairement au ribbon d'alerte) : plusieurs lignes de niveaux
   différents cohabitent dans le même panneau étroit. */
.advisor-row{display:flex;align-items:center;gap:10px;padding:calc(9px*var(--scale)) 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.advisor-row:last-child{border-bottom:none;}
.advisor-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3);}
.advisor-row.critique .advisor-dot{background:var(--rose);box-shadow:0 0 8px rgba(248,113,113,.6);}
.advisor-row.alerte .advisor-dot{background:var(--amber);box-shadow:0 0 8px rgba(245,158,11,.5);}
.advisor-row.opportunite .advisor-dot{background:var(--cyan);box-shadow:0 0 8px rgba(45,212,191,.5);}
.advisor-msg{flex:1;font-size:.78rem;line-height:1.35;color:var(--ink-2);}
.advisor-empty{color:var(--ink-3);font-size:.82rem;}

/* ================= BÂTIMENTS ================= */
.bcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:calc(14px*var(--scale));display:flex;flex-direction:column;gap:8px;transition:.15s;}
.bcard:hover{border-color:var(--line-strong);transform:translateY(-2px);}
.bcard .row1{display:flex;align-items:center;gap:10px;}
.bcard .ic{width:calc(36px*var(--scale));height:calc(36px*var(--scale));border-radius:8px;background:rgba(45,212,191,.08);display:flex;align-items:center;justify-content:center;flex:none;}
.bcard .ic svg{width:calc(18px*var(--scale));height:calc(18px*var(--scale));color:var(--cyan);}
.bcard h3{margin:0;font-family:var(--font-head);font-size:.96rem;font-weight:600;}
.bcard .desc{font-size:.78rem;color:var(--ink-3);line-height:1.5;flex:1;}
.bcard .foot{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--ink-2);font-family:var(--font-mono);}

/* ---------- surbrillance dorée du tutoriel (v0.14.7) ----------
   "prendre par la main visuellement, comme tout nouveau jeu, un vrai
   tuto avec des flèches, des surbrillances, des flashs", demande
   explicite. Bordure + halo doré pulsant, plus une flèche rebondissante
   au-dessus de l'élément, posés par AG.applyTutorialHighlight
   (js/05-screen-buildings.js) sur la carte ou le bouton concerné. */
.tuto-glow{
  position:relative;border-color:var(--amber) !important;
  box-shadow:0 0 0 2px rgba(245,158,11,.5), 0 0 24px rgba(245,158,11,.45);
  animation:tutoPulse 1.6s ease-in-out infinite;
  z-index:2;
}
.tuto-glow::before{
  content:"▼ " attr(data-tuto-label);
  position:absolute;left:50%;top:calc(-1*(28px*var(--scale)));transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;font-weight:700;
  color:#1a1305;background:var(--amber);padding:3px 9px;border-radius:20px;white-space:nowrap;
  animation:tutoBounce 1.2s ease-in-out infinite;box-shadow:0 0 14px rgba(245,158,11,.6);
  pointer-events:none;
}
@keyframes tutoPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(245,158,11,.5), 0 0 24px rgba(245,158,11,.45);}
  50%{box-shadow:0 0 0 3px rgba(245,158,11,.85), 0 0 38px rgba(245,158,11,.75);}
}
@keyframes tutoBounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-5px);}
}

/* ================= DIRECTION DU PROJET + QUÊTES & EXPÉDITIONS =================
   v0.65.0 : tout le style de l'écran Quêtes (frise des paliers, directive,
   journal, préparation, modales) a déménagé dans css/11-quests.css, y
   compris .q-ongoing-ring (réutilisé par la Recherche) et .q-report*. */

/* ================= RECHERCHE =================
   PASSE RECHERCHE (v0.52.0) : refonte complète, gabarit DA v2 "zéro
   contrôle natif". Tout le style de cet écran (panneau gauche sticky,
   sélecteur de branches, arbre vertical, doctrine, arbre technologique
   restylé) vit désormais dans css/design-system.css, section
   "RECHERCHE, PASSE gabarit (v0.52.0)", même convention que Bâtiments/
   Usines/Quêtes (tout le CSS d'une passe DA v2 groupé à un seul
   endroit plutôt qu'éclaté entre ce fichier et design-system.css). */

/* ================= GÈNES (lanceur d'expédition) =================
   Hangar : css/18-hangar.css depuis v0.75.0. */
.genes{display:flex;gap:4px;}
.gene-pip{width:calc(21px*var(--scale));height:calc(21px*var(--scale));border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.57rem;color:var(--ink-2);}
/* v0.14.1 : gène Capteurs mis en avant dans le lanceur d'expédition
   (détermine la qualité du butin, AG.EXPEDITION_CAP_MULT). */
.gene-pip.gene-cap{border-color:var(--cyan);color:var(--cyan);background:rgba(45,212,191,.12);}
/* ================= CARTE =================
   v0.55.0 : l'ancienne carte galaxie (canvas 2D, v0.2.0) et ses styles
   ont été remplacés par l'écran à deux niveaux du chantier "Secteur et
   systèmes". Tout son habillage vit désormais dans css/08-map.css
   (un fichier = un sujet). Rien à garder ici. */

/* ================= MARCHÉ =================
   v0.78.0 : l'écran 12 est refondu dans le cadre .qx-* ; tout son
   habillage (tables, offres bonus, contrats, bourse) vit dans
   css/21-market.css. Reste ici l'icône Scrip inline, partagée par tous
   les écrans (AG.scripIcon, js/01-engine.js). */
.scrip-ic{display:inline-flex;width:14px;height:14px;vertical-align:-2px;}
.scrip-ic svg{width:100%;height:100%;color:var(--amber);}
/* .threat-row retiré en v0.76.0 (écran Menaces intégré au centre de contrôle, css/20-control-center.css) */

@media(max-width:760px){
  .planet-wrap{grid-template-columns:1fr;}
  #sidepanel{width:100%;}
  .hexboard{transform:translate(-50%,-50%) perspective(900px) rotateX(52deg) scale(.72);}
}

/* ---------- v0.68.0 : fond numéroté des écrans sans scène plein cadre ----------
   assets/backgrounds/<n>.webp|jpg|png, n = rang dans la nav
   (js/00y-backgrounds.js). Classe posée seulement si un fichier existe :
   sans fichier, l'écran reste sur le champ d'étoiles du jeu. */
.screen.has-screen-bg{background:var(--screen-bg) center / cover no-repeat;}