/* ══ BREADCRUMB BAR — Sprint 15bis T11 ══ */
.breadcrumb-bar {
  display:flex; align-items:center; gap:6px;
  padding:5px 18px; min-height:26px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.5px;
  color:var(--textmid);
  background:linear-gradient(180deg, rgba(4,8,18,0.6), rgba(4,8,18,0.25));
  border-bottom:1px solid rgba(var(--accent-rgb),0.12);
}
.breadcrumb-bar:empty { display:none; }
.breadcrumb-bar .bc-item { opacity:0.8; transition: opacity 120ms, color 120ms, text-shadow 120ms; }
.breadcrumb-bar .bc-root { cursor:pointer; color:var(--accent); font-weight:600; min-width:36px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; }
.breadcrumb-bar .bc-root:hover { opacity:1; text-shadow:0 0 6px rgba(var(--accent-rgb),0.5); }
.breadcrumb-bar .bc-group { opacity:0.65; }
/* Quick-win (a) audit — Tout segment data-clickable a un hover état + cursor pointer */
.breadcrumb-bar .bc-item[data-clickable] { cursor: pointer; }
.breadcrumb-bar .bc-group[data-clickable]:hover {
  opacity: 1;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
.breadcrumb-bar .bc-current { color:var(--textprim); opacity:1; font-weight:500; }
.breadcrumb-bar .bc-sep { opacity:0.35; }
@media (max-width:768px) {
  .breadcrumb-bar { padding:3px 10px; font-size:10px; min-height:22px; }
  .breadcrumb-bar .bc-group { display:none; }
  .breadcrumb-bar .bc-group + .bc-sep { display:none; }
}

/* ══ TOPBAR ══ */
.topbar {
  height: calc(56px + env(safe-area-inset-top, 0px));
  background: rgba(4,8,18,0.88);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 200px, var(--tint-1) 200px, var(--tint-1) 201px);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.45);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  padding-top: env(safe-area-inset-top, 0px);
  position: relative; z-index: 200;
  box-shadow: 0 2px 20px rgba(0,0,0,0.9), inset 0 -1px 0 var(--tint-2);
  backdrop-filter: blur(16px);
  min-width: 0; max-width: 100%;
  gap: 12px;
}
/* T-Reimagined audit (26/05) — Topbar grid auto/1fr/auto sur desktop.
   Le 25/50/25 strict cassait le layout : tb2-left a 6 chips (logo+DESTINEE+
   12/100+Croisade+faction+planet) qui ensemble dépassent 25% de viewport.
   On garde donc auto pour gauche+droite, 1fr center pour les ressources
   garanties centrées + visuellement dominantes. Pattern Stellaris/EVE. */
@media (min-width: 901px) {
  .topbar.tb2 {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
  }
  .topbar.tb2 > .tb2-left      { justify-self: start; }
  .topbar.tb2 > .tb-resources  { justify-self: center; }
  .topbar.tb2 > .res-strip     { justify-self: end; }
}
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--gold) 50%, var(--accent) 70%, transparent 100%);
  opacity: 0.7;
}
/* B1 fix : zone gauche définie, logo rétrécit gracieusement (ellipsis) au lieu
   de déborder sous la barre de ressources (overlap audit topbar mai 2026).
   Priorités flex-shrink :
   - logo collapse en premier (priorité basse)
   - faction badge / planet chip / ori widget : flex-shrink:0 (priorité haute) */
.tb2-left {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden;
}
.logo-wrap {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 auto; min-width: 0;
  cursor: pointer;
  overflow: hidden;
}
.tb2-left .faction-badge,
.tb2-left .tb2-planet-chip,
.tb2-left .ori-crusade-widget { flex-shrink: 0; }
.logo {
  font-family:var(--font-display);
  font-size: 14px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent2), var(--gold2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 8px rgba(var(--accent2-rgb),0.4));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-sub {
  font-family:var(--font-mono);
  font-size: 14px; letter-spacing: 0.5px; color: var(--textsoft);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Resources in topbar
   B1 fix bis (mai 2026) : justify-content:center provoquait un overflow visuel à
   gauche (les pastilles débordaient sur le planet chip / faction badge quand le
   contenu dépassait la largeur de la zone). On passe en flex-start + overflow
   horizontal avec mask fade — comportement uniforme tablet/mobile/desktop. */
.tb-resources {
  display:flex; align-items:center; gap:14px;
  flex:1 1 0%; justify-content:center;
  /* 25/05/2026 — title + search retires de la topbar : on centre les ressources
     et on augmente le gap pour utiliser l'espace degage et eviter les trous. */
  padding:0 16px 0 10px;
  min-width:0;
  /* 22/05/2026 — desktop : pas d'overflow-x:auto sinon le box-shadow flamme
     d'Ori (qui s'étend +32px hors du chip) se fait clipper et la dernière
     pastille énergie « +30k ✨ » paraît coupée. L'overflow-x reste activé
     sur tablette/mobile (≤1024px) via media query plus bas. */
  overflow-x:visible; overflow-y:visible;
  scrollbar-width:none; -ms-overflow-style:none;
}
@media (max-width:1024px) {
  .tb-resources { overflow-x:auto; }
}
.tb-resources::-webkit-scrollbar { display:none; }
.rb-item { display:flex; align-items:center; gap:4px; white-space:nowrap; position:relative; cursor:default; padding:4px 8px; border-radius:8px; background:var(--tint-2); border:1px solid var(--tint-4); transition:all 0.2s; font-size:13px; flex-shrink:0; }
.rb-item:hover { background:var(--tint-4); transform:translateY(-1px); box-shadow:0 2px 12px var(--shade-3); }
#rbItemMetal { background:rgba(91,141,217,0.08); border-color:rgba(91,141,217,0.25); }
#rbItemMetal:hover { background:rgba(91,141,217,0.16); border-color:rgba(91,141,217,0.4); }
#rbItemNaq { background:rgba(212,146,10,0.08); border-color:rgba(212,146,10,0.25); }
#rbItemNaq:hover { background:rgba(212,146,10,0.16); border-color:rgba(212,146,10,0.4); }
#rbItemNaqria { background:rgba(72,202,228,0.08); border-color:rgba(72,202,228,0.25); }
#rbItemNaqria:hover { background:rgba(72,202,228,0.16); border-color:rgba(72,202,228,0.4); }
#rbItemHommes { background:rgba(46,204,136,0.08); border-color:rgba(46,204,136,0.25); }
#rbItemHommes:hover { background:rgba(46,204,136,0.16); border-color:rgba(46,204,136,0.4); }
#rbItemEne { background:rgba(240,192,64,0.08); border-color:rgba(240,192,64,0.25); }
#rbItemEne:hover { background:rgba(240,192,64,0.16); border-color:rgba(240,192,64,0.4); }
/* energie.png remplit ~95% de son canvas (pas de padding transparent comme metal/naq) →
   l'hexagone touche la bordure et paraît coupé, surtout en Ori (bordure blanche 1.5px).
   Scale 0.78 lui donne le même padding visuel que les autres ressources. */
#rbItemEne .rb-lbl img { transform: scale(0.78); transform-origin: center; }
.tb-resources .rb-lbl { font-size:22px; flex-shrink:0; line-height:1; filter:drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
.rb-val {
  font-family:var(--font-mono); font-size:16px; color:var(--gold2);
  min-width:50px; text-align:right; font-weight:700;
  text-shadow: 0 0 8px rgba(240,192,64,0.3);
}
#rbItemMetal .rb-val { color:#7ab3ff; text-shadow:0 0 8px rgba(91,141,217,0.4); }
#rbItemNaq .rb-val { color:#f0c040; text-shadow:0 0 8px rgba(212,146,10,0.4); }
#rbItemNaqria .rb-val { color:#5ee8ff; text-shadow:0 0 8px rgba(72,202,228,0.4); }
#rbItemHommes .rb-val { color:#44dd99; text-shadow:0 0 8px rgba(46,204,136,0.4); }
#rbItemEne .rb-val { text-shadow:0 0 8px rgba(240,192,64,0.4); }
.rb-rate { font-family:var(--font-mono); font-size: 14px; color:var(--success); opacity:0.8; white-space:nowrap; margin-left:3px; }
.rb-sep { width:2px; height:24px; background:linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.4), transparent); box-shadow:0 0 4px rgba(var(--accent-rgb),0.2); flex-shrink:0; }
.rb-tooltip {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:rgba(8,14,28,0.96); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:6px;
  padding:8px 12px; min-width:140px; z-index:300; backdrop-filter:blur(12px);
  box-shadow:0 4px 16px var(--shade-2);
  font-family:var(--font-mono); font-size:14px; color:var(--text); line-height:1.7;
  pointer-events:none; margin-top:4px;
}
.rb-tooltip::before {
  content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:5px solid rgba(var(--accent-rgb),0.3);
}
.rb-item:hover .rb-tooltip { display:block; }

/* QW6 — Indicateur de saturation per pastille (sans hover requis) */
.rb-sat {
  position: absolute; left: 4px; right: 4px; bottom: 1px; height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--tint-2));
  opacity: 0; transition: opacity 0.2s, background 0.3s;
  pointer-events: none;
}
.rb-item.res-warn .rb-sat {
  opacity: 1;
  background: linear-gradient(90deg, #ffaa44 0%, #ff7733 100%);
  box-shadow: 0 0 6px rgba(255,170,68,0.6);
  animation: tb2SatPulse 2s ease-in-out infinite;
}
.rb-item.res-full .rb-sat {
  opacity: 1;
  background: linear-gradient(90deg, #ff5555 0%, #ff2233 100%);
  box-shadow: 0 0 8px rgba(255,80,80,0.8);
  animation: tb2SatFull 1.2s ease-in-out infinite;
}
@keyframes tb2SatPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes tb2SatFull  { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0.7; transform: scaleY(1.5); } }

/* ══ TOPBAR — « Console readout » (passe bolder 28/06) ══
   Desktop large uniquement (≥1024px, hors mode compact) : la pastille ressource
   devient une cellule de tableau de bord — icône | valeur + taux / jauge de stockage
   TOUJOURS visible au niveau réel (--rb-fill posé par sgc-resources.js rbUp), teintée
   par ressource, escaladant ambre→rouge à la saturation. Mobile/tablette/compact
   gardent la pastille flex single-row existante (pas de régression sur petit écran). */
@media (min-width:1024px) {
  body:not(.topbar-compact) .tb-resources { gap: 10px; }
  body:not(.topbar-compact) .rb-item {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-rows: auto 3px;
    align-items: center;
    column-gap: 8px; row-gap: 5px;
    padding: 5px 12px 6px;
    min-width: 108px;
    border-radius: 9px;
  }
  body:not(.topbar-compact) .rb-item .rb-lbl { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  body:not(.topbar-compact) .rb-val {
    grid-column: 2; grid-row: 1;
    font-size: 18px; min-width: 0; text-align: left;
    letter-spacing: 0.5px; line-height: 1;
  }
  body:not(.topbar-compact) .rb-rate {
    grid-column: 3; grid-row: 1;
    font-size: 11px; margin-left: 0; align-self: center;
  }
  /* Jauge de stockage : piste (--tint-3) + remplissage ::after au niveau réel */
  body:not(.topbar-compact) .rb-sat {
    grid-column: 2 / 4; grid-row: 2;
    position: static; left: auto; right: auto; bottom: auto;
    height: 3px; width: auto; opacity: 1;
    border-radius: 2px; overflow: hidden;
    background: var(--tint-3); box-shadow: none; animation: none;
  }
  body:not(.topbar-compact) .rb-sat::after {
    content: ''; display: block; height: 100%;
    width: var(--rb-fill, 0%); border-radius: 2px;
    background: linear-gradient(90deg, var(--rb-sat-c1,#888), var(--rb-sat-c2,#aaa));
    transition: width 0.5s var(--ease-out-premium);
  }
  body:not(.topbar-compact) #rbItemMetal  { --rb-sat-c1:#5b8dd9; --rb-sat-c2:#7ab3ff; }
  body:not(.topbar-compact) #rbItemNaq     { --rb-sat-c1:#d4920a; --rb-sat-c2:#f0c040; }
  body:not(.topbar-compact) #rbItemNaqria  { --rb-sat-c1:#2ccae4; --rb-sat-c2:#5ee8ff; }
  body:not(.topbar-compact) #rbItemHommes  { --rb-sat-c1:#2ecc88; --rb-sat-c2:#44dd99; }
  /* Saturation : remplissage ambre puis rouge ; on garde la piste (neutralise le
     fond/anim de la règle mobile res-warn/res-full grâce à la spécificité desktop). */
  body:not(.topbar-compact) .rb-item.res-warn .rb-sat,
  body:not(.topbar-compact) .rb-item.res-full .rb-sat {
    background: var(--tint-3); box-shadow: none; animation: none; opacity: 1;
  }
  body:not(.topbar-compact) .rb-item.res-warn .rb-sat::after { background: linear-gradient(90deg,#ffaa44,#ff7733); }
  body:not(.topbar-compact) .rb-item.res-full .rb-sat::after { background: linear-gradient(90deg,#ff5555,#ff2233); }
  /* Stockage plein : l'income part à la poubelle → taux estompé en rouge (signal). */
  body:not(.topbar-compact) .rb-item.res-full .rb-rate { color: var(--danger); opacity: 0.85; }
  /* Énergie : balance, pas un stock → cellule 1 ligne, pas de jauge. */
  body:not(.topbar-compact) #rbItemEne { grid-template-rows: auto; }
  body:not(.topbar-compact) #rbItemEne .rb-val,
  body:not(.topbar-compact) #rbItemEne .rb-rate { grid-row: 1; }
}

/* Gate screen bg */
.res-strip { display:flex; gap:6px; align-items:center; flex-shrink:0; padding-left:12px; }
.rp-res-ico svg, .rp-cost-ico svg { vertical-align:middle; display:inline-block; }

/* ══ TOPBAR V2 — Planet chip + server clock ══ */
.tb2-planet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.04));
  border: 1px solid rgba(var(--accent-rgb),0.30);
  color: var(--text); cursor: pointer;
  transition: all 0.18s; position: relative; flex-shrink: 0;
  font-family:var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.4px;
  max-width: 240px;
  white-space: nowrap; overflow: hidden;
}
.tb2-planet-chip:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.08));
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.25);
  transform: translateY(-1px);
}
.tb2-pc-ico {
  font-size: 11px; color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),0.6));
  flex-shrink: 0;
}
.tb2-pc-name {
  color: var(--textbright); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.tb2-pc-coords {
  font-family:var(--font-mono); font-size: 11px;
  color: var(--textsoft); flex-shrink: 0;
}
.tb2-pc-caret {
  margin-left: 2px; font-size: 10px; color: var(--textsoft);
  transition: transform 0.18s; flex-shrink: 0;
}
.tb2-planet-chip[aria-expanded="true"] .tb2-pc-caret {
  transform: rotate(180deg); color: var(--accent);
}

.tb2-planet-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 9700;
  min-width: 280px; max-width: 360px; max-height: 70vh; overflow-y: auto;
  background: rgba(8,14,28,0.97); backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 8px;
  box-shadow: 0 8px 32px var(--shade-3), 0 0 16px rgba(var(--accent-rgb),0.15);
  display: none; padding: 6px;
}
.tb2-planet-menu.open { display: block; }
.tb2-pm-header {
  font-family:var(--font-display); font-size: 10px; font-weight: 700;
  color: var(--accent2); letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 10px 8px; border-bottom: 1px solid rgba(var(--accent-rgb),0.18);
  margin-bottom: 4px;
}
.tb2-pm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 6px; cursor: pointer;
  font-family:var(--font-body); font-size: 13px; color: var(--text);
  transition: all 0.12s;
  border: 1px solid transparent;
}
.tb2-pm-item:hover {
  background: rgba(var(--accent-rgb),0.10);
  border-color: rgba(var(--accent-rgb),0.30);
}
.tb2-pm-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.06));
  border-color: rgba(var(--accent-rgb),0.55);
  color: var(--textbright); font-weight: 700;
}
.tb2-pm-ico {
  width: 18px; text-align: center; color: var(--accent);
  font-size: 13px; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),0.5));
}
.tb2-pm-item.active .tb2-pm-ico {
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb),0.8));
}
.tb2-pm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb2-pm-coords {
  font-family:var(--font-mono); font-size: 11px;
  color: var(--textsoft); flex-shrink: 0;
}
.tb2-pm-badge {
  font-size: 12px; color: var(--warn);
  filter: drop-shadow(0 0 4px rgba(240,180,80,0.6));
}
.tb2-pm-cnt {
  font-family:var(--font-display); font-size: 9px; font-weight: 700;
  background: rgba(var(--accent-rgb),0.25); color: var(--accent2);
  padding: 1px 5px; border-radius: 8px; min-width: 16px; text-align: center;
}
.tb2-pm-hint {
  padding: 14px 12px; text-align: center; font-size: 12px;
  color: var(--textsoft); font-family:var(--font-mono);
}

/* ── Search button + mission timer normalized ── */
.tb2-btn {
  padding: 6px 10px; border-radius: 5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; line-height: 1;
  border: 1px solid rgba(var(--accent-rgb),0.35);
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.07);
  transition: all 0.18s;
  flex-shrink: 0;
}
.tb2-btn:hover {
  background: rgba(var(--accent-rgb),0.18);
  border-color: var(--accent);
}
.tb2-btn-kbd {
  font-family:var(--font-display); font-size: 10px;
  opacity: 0.65; letter-spacing: 1px;
}
.tb2-mission-timer {
  padding: 5px 10px; border-radius: 5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family:var(--font-mono); font-size: 12px;
  border: 1px solid rgba(224,168,48,0.45); color: var(--warn);
  background: rgba(224,168,48,0.10);
  white-space: nowrap; flex-shrink: 0;
  animation: tb2MissionPulse 2.4s ease-in-out infinite;
}
.tb2-mission-timer:hover {
  background: rgba(224,168,48,0.22);
  box-shadow: 0 0 10px rgba(224,168,48,0.35);
}
@keyframes tb2MissionPulse { 0%,100% { box-shadow: 0 0 0 rgba(224,168,48,0); } 50% { box-shadow: 0 0 12px rgba(224,168,48,0.45); } }

/* Bouton Boutique de la top-bar (Cristaux / Pass / Race / Commandants) */
.tb2-shop-btn {
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .5px;
  border: 1px solid rgba(120,200,255,0.45); color: #9fe0ff;
  background: rgba(60,150,230,0.12);
  white-space: nowrap; flex-shrink: 0; transition: all .15s;
}
.tb2-shop-btn:hover { background: rgba(70,170,250,0.26); box-shadow: 0 0 10px rgba(120,200,255,0.35); }
/* Mobile (demande Ben-Maris 25/06) : on retire le bouton Boutique de la top-bar pour
   ne garder qu'UN seul élément cristaux = la pastille 💎+solde (qui ouvre la boutique au tap).
   Desktop conserve les deux. */
@media (max-width: 720px) { #topbarShopBtn { display: none; } }

/* Solde de Cristaux premium dans la top-bar */
.tb2-crystals {
  padding: 5px 11px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  border: 1px solid rgba(120,200,255,0.4); color: #cfeaff;
  background: rgba(40,120,200,0.12);
  white-space: nowrap; flex-shrink: 0; transition: all .15s;
}
.tb2-crystals:hover { background: rgba(60,150,230,0.24); box-shadow: 0 0 10px rgba(120,200,255,0.3); }
.tb2-cr-gem { font-size: 14px; filter: drop-shadow(0 0 4px rgba(120,210,255,0.7)); }
.tb2-cr-val { color: #7fd4ff; text-shadow: 0 0 8px rgba(120,210,255,0.45); }

/* B3 fix — Notif badge no longer overflows. JS caps content to "99" max,
   CSS adjusted to tightly fit 2-digit numbers. */
.notif-badge {
  min-width: 18px; max-width: 28px; height: 18px;
  padding: 0 4px;
  font-size: 10px; line-height: 1;
}

/* Faction badge — display rules harmonised with new layout */
.faction-badge {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  padding: 4px 9px; border-radius: 14px;
  background: var(--tint-2);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  font-family:var(--font-body); font-weight: 600; font-size: 12px;
  color: var(--text); letter-spacing: 0.3px;
}

/* Bug fix mai 2026 — sur Ori en desktop, on compacte tb2-left pour libérer
   de la place pour les 5 pastilles ressources :
   - sous-titre logo masqué (économie ~280px)
   - planet chip plus court
   - Ori Crusade widget plus tassé */
body[data-faction="ori"] .topbar .logo-sub { display: none; }
body[data-faction="ori"] .topbar .logo { font-size: 13px; letter-spacing: 1.5px; }
@media (min-width:1025px) {
  body[data-faction="ori"] .topbar .tb2-planet-chip { max-width: 180px; padding: 4px 8px; }
  body[data-faction="ori"] .topbar .tb2-pc-name { max-width: 90px; }
  body[data-faction="ori"] .topbar .ori-crusade-widget { gap: 5px; }
  /* Ferveur jauge : doit tenir "100/100" — largeur min 90px (était 70 → tronqué) */
  body[data-faction="ori"] .topbar .ori-ferveur-bar { min-width: 90px !important; }
  body[data-faction="ori"] .topbar .ori-crusade-btn { padding: 3px 8px; font-size: 11px; }
  body[data-faction="ori"] .topbar .faction-badge .fac-png { width: 16px !important; height: 16px !important; }
  body[data-faction="ori"] .topbar .faction-badge { font-size: 11px; padding: 3px 7px; }
}

/* ══ A2 — Variant faction de la bande ::after ══ */
body[data-faction="ori"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, #6df 18%, #fff 35%, #ffd56b 50%, #ff66cc 65%, #6df 82%, transparent 100%);
  background-size: 200% 100%;
  animation: tb2OriShift 6s linear infinite;
  opacity: 0.85;
}
@keyframes tb2OriShift { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
body[data-faction="wraith"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, #44ff88 25%, #aa44dd 55%, #44ff88 75%, transparent 100%);
  opacity: 0.75; filter: blur(0.3px);
}
body[data-faction="goauld"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, #d4920a 30%, #ffd000 50%, #d4920a 70%, transparent 100%);
  opacity: 0.8;
}
body[data-faction="anciens"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, var(--ancient) 30%, #88ddff 50%, var(--ancient) 70%, transparent 100%);
  opacity: 0.8;
}
body[data-faction="tokra"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, #ff4040 30%, #ff8080 50%, #ff4040 70%, transparent 100%);
  opacity: 0.8;
}
body[data-faction="tauri"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, #88ee88 50%, var(--accent) 70%, transparent 100%);
  opacity: 0.8;
}

/* ══ A1 — Compact mode ══ */
body.topbar-compact .topbar { height: calc(40px + env(safe-area-inset-top, 0px)); padding: 0 12px; }
body.topbar-compact .logo { font-size: 12px; letter-spacing: 1px; }
body.topbar-compact .logo-sub { display: none; }
body.topbar-compact .tb-resources { gap: 4px; }
body.topbar-compact .rb-item { padding: 2px 6px; font-size: 11px; }
body.topbar-compact .tb-resources .rb-lbl { font-size: 16px; }
body.topbar-compact .rb-val { font-size: 13px; min-width: 38px; }
body.topbar-compact .rb-rate { font-size: 11px; }
body.topbar-compact .rb-sep { height: 18px; }
body.topbar-compact .tb2-planet-chip { padding: 3px 8px; font-size: 12px; }
body.topbar-compact .notif-bell { width: 28px; height: 28px; font-size: 12px; }
body.topbar-compact .user-chip { padding: 2px 8px; font-size: 12px; }
body.topbar-compact .tb2-btn { padding: 3px 7px; font-size: 12px; }

/* ══ COMMANDER BUFFS — FLOATING PILL (under topbar, never affects layout) ══ */
/* z-index:900 (sous 1000 du dropdown notifs) — la pastille de durée ne doit
   pas passer au-dessus du panneau notifications (et bouton "Tout lu"). */
.cmd-buffs-strip {
  position:fixed;
  top:calc(56px + env(safe-area-inset-top, 0px) + 6px);
  right:10px;
  z-index:900;
  display:inline-flex; align-items:center;
  pointer-events:none;
}
.cmd-buffs-strip .cb-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; font-size:12px; line-height:1; height:28px;
  font-family:var(--font-mono); font-weight:600;
  border:1.5px solid var(--accent);
  background:linear-gradient(135deg, rgba(var(--accent-rgb), 0.35) 0%, rgba(var(--accent-rgb), 0.18) 100%);
  color:var(--text);
  border-radius:16px;
  box-shadow:0 0 0 2px var(--shade-2), 0 0 12px rgba(var(--accent-rgb), 0.45), 0 4px 14px var(--shade-5);
  cursor:pointer; white-space:nowrap;
  pointer-events:auto;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
  animation:cb-pulse 2.5s ease-in-out infinite;
}
.cmd-buffs-strip .cb-item:hover {
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 0 2px var(--shade-2), 0 0 18px rgba(var(--accent-rgb), 0.7), 0 6px 18px var(--shade-3);
}
@keyframes cb-pulse {
  0%, 100% { box-shadow:0 0 0 2px var(--shade-2), 0 0 12px rgba(var(--accent-rgb), 0.45), 0 4px 14px var(--shade-5); }
  50%      { box-shadow:0 0 0 2px var(--shade-2), 0 0 18px rgba(var(--accent-rgb), 0.65), 0 4px 14px var(--shade-5); }
}
.cmd-buffs-strip .cb-icon { font-size:14px; flex-shrink:0; }
.cmd-buffs-strip .cb-name {
  max-width:140px; overflow:hidden; text-overflow:ellipsis; opacity:0.9;
}
.cmd-buffs-strip .cb-time { color:var(--warn); font-weight:bold; min-width:36px; text-align:right; flex-shrink:0; }
.cmd-buffs-strip .cb-extra {
  margin-left:1px; padding:1px 6px; font-size:10px; font-weight:bold;
  color:var(--gold); background:rgba(224,168,48,0.2); border-radius:8px;
  flex-shrink:0;
}
@media (max-width: 720px) {
  .cmd-buffs-strip { right:8px; top:calc(56px + env(safe-area-inset-top, 0px) + 4px); }
  .cmd-buffs-strip .cb-name { display:none; }
}

/* ── Tooltip listing all active buffs with live timers ── */
/* z-index:901 (juste au-dessus de la pastille à 900, mais sous notifs 1000) */
.cb-tip {
  position:fixed; z-index:901;
  min-width:240px; max-width:320px;
  padding:10px 12px;
  background:rgba(8, 12, 24, 0.96);
  backdrop-filter:blur(8px);
  border:1px solid rgba(var(--accent-rgb), 0.45);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(var(--accent-rgb),0.18);
  font-family:var(--font-body);
  pointer-events:none;
}
.cb-tip-title {
  font-family:var(--font-display);
  font-size:10px; font-weight:700; letter-spacing:2px;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:8px; padding-bottom:6px;
  border-bottom:1px solid rgba(var(--accent-rgb), 0.25);
}
.cb-tip-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 0; font-size:13px; line-height:1.2;
}
.cb-tip-row + .cb-tip-row { border-top:1px dashed var(--tint-4); }
.cb-tip-icon { font-size:16px; flex-shrink:0; width:20px; text-align:center; }
.cb-tip-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cb-tip-cmd { font-size:11px; color:var(--textsoft); text-transform:uppercase; letter-spacing:0.5px; }
.cb-tip-ab { font-size:13px; color:var(--text); font-weight:600; }
.cb-tip-time {
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  color:var(--warn); min-width:42px; text-align:right; flex-shrink:0;
}

/* ══ LAYOUT ══ */
.app {
  display:grid; grid-template-rows:calc(56px + env(safe-area-inset-top, 0px)) 1fr;
  height:100vh; height:100dvh;
  overflow:hidden;
  width:100%; max-width:100%;
  border-left:none;
  border-right:none;
  box-shadow:none;
  position:relative; z-index:1;
}
/* ════════════════════════════════════ */
.res-bar-bg { height:5px; background:var(--tint-4); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.res-bar-f { height:100%; border-radius:3px; transition:width 0.8s; }

/* Building detail pane — see OGame section below */
.bdd-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bdd-icon { font-size:26px; }
.bdd-name { font-family:var(--font-display); font-size: 15px; font-weight:700; color:var(--textbright); letter-spacing:1px; }
.bdd-sub { font-size: 14px; margin-top:2px; }
.bdd-stat { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); }
.bdd-stat:last-of-type { border-bottom:none; }
.bdd-sl { font-size: 14px; color:var(--textmid); }
.bdd-sv { font-family:var(--font-mono); font-size: 14px; color:var(--textbright); }
.bdd-btn {
  width:100%; margin-top:10px; padding:10px;
  font-family:var(--font-display); font-size: 14px; font-weight:700; letter-spacing:2px;
  border:1px solid var(--accent); color:var(--accent);
  background:rgba(var(--accent2-rgb),0.08); cursor:pointer; border-radius:6px;
  transition:all 0.2s; box-shadow:var(--inset);
}
.bdd-btn:hover { background:rgba(var(--accent2-rgb),0.16); box-shadow:0 0 14px var(--accentglow); transform:translateY(-1px); }
.sect-label {
  font-family:var(--font-mono); font-size: 14px; color:var(--textsoft);
  letter-spacing:2px; text-transform:uppercase;
  border-bottom:1px solid var(--border); padding-bottom:5px; margin-bottom:8px;
}

/* ════════════════════════════════════ */
.rb-icon { font-size:22px; transition:transform 0.2s; }
.rb:hover .rb-icon,.rb.act .rb-icon { transform:scale(1.15); }
.rb-lbl { font-family:var(--font-display); font-size: 14px; letter-spacing:1px; color:var(--textsoft); text-align:center; text-transform:uppercase; }
.rb-cnt { font-family:var(--font-mono); font-size: 14px; padding:1px 6px; border-radius:10px; border:1px solid var(--border); color:var(--textsoft); }

.tech-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.tech-hdr {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; box-shadow:0 2px 10px rgba(0,10,30,0.3);
}
.th-l { display:flex; align-items:center; gap:14px; }
.th-icon { font-size:32px; }
.th-name { font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:2px; transition:color 0.4s; }
.th-lore { font-size:14px; color:var(--textsoft); max-width:400px; margin-top:2px; line-height:1.4; }
.th-r { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.th-plbl { font-family:var(--font-mono); font-size:14px; color:var(--textmid); }
.th-pbar { width:180px; height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.th-pfill { height:100%; border-radius:3px; transition:width 0.8s, background 0.4s; }

/* Tech cards (OGame-style grid) */
.user-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:20px; padding:4px 12px;
  font-family:var(--font-mono); font-size:14px; color:var(--textmid);
  transition:all 0.2s;
}
.user-chip:hover { background:rgba(212,146,10,0.12); border-color:rgba(212,146,10,0.4); color:var(--gold2); }
/* ── Notification bell ── */
.notif-wrap { position:relative; }
.notif-bell { display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:linear-gradient(180deg,rgba(var(--accent-rgb),0.1),rgba(var(--accent-rgb),0.03)); border:1px solid var(--border); border-radius:50%; cursor:pointer; font-size:14px; transition:all 0.2s; flex-shrink:0; }
.notif-bell:hover { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.25),rgba(var(--accent-rgb),0.1)); border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25); transform:scale(1.05); }
.notif-bell.has-unread { border-color:rgba(255,160,40,0.7); box-shadow:0 0 12px rgba(255,160,40,0.3); animation:bellRing 2s ease-in-out infinite; }
.notif-badge { position:absolute; top:-4px; right:-4px; background:linear-gradient(180deg,#ff5555,var(--danger)); color:var(--textbright); font-family:var(--font-display); font-size: 11px; font-weight:700; border-radius:50%; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 0 8px rgba(255,80,80,0.5); border:1px solid rgba(255,255,255,0.2); }
.notif-dropdown { position:absolute; top:calc(100% + 10px); right:0; width:340px; background:linear-gradient(180deg,rgba(10,18,32,0.98),rgba(6,12,24,0.98)); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:12px; backdrop-filter:blur(14px); z-index:1000; box-shadow:0 8px 36px var(--shade-3), 0 0 20px rgba(var(--accent-rgb),0.12); display:none; flex-direction:column; max-height:420px; overflow:hidden; }
.notif-dropdown.open { display:flex; }
.notif-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--tint-4); background:linear-gradient(180deg,rgba(var(--accent-rgb),0.08),transparent); }
.notif-title { font-family:var(--font-display); font-size: 13px; font-weight:700; color:var(--accent2); letter-spacing:2.5px; text-transform:uppercase; text-shadow:0 0 8px rgba(var(--accent-rgb),0.25); }
.notif-mark-all { font-family:var(--font-body); font-size: 12px; font-weight:600; color:var(--textsoft); cursor:pointer; padding:4px 10px; border-radius:6px; border:1px solid var(--tint-5); letter-spacing:0.5px; text-transform:uppercase; transition:all .18s; }
.notif-mark-all:hover { color:var(--textbright); border-color:rgba(var(--accent-rgb),0.4); background:rgba(var(--accent-rgb),0.06); }
.notif-cat-bar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--tint-3); flex-wrap:wrap; }
.notif-cat { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--textsoft); padding:5px 10px; border-radius:6px; border:1px solid var(--tint-7); cursor:pointer; transition:all .18s; }
.notif-cat:hover { color:var(--textbright); border-color:rgba(var(--accent-rgb),0.3); background:rgba(var(--accent-rgb),0.04); }
.notif-cat.active { color:var(--accent2); border-color:rgba(var(--accent-rgb),0.55); background:linear-gradient(180deg,rgba(var(--accent-rgb),0.18),rgba(var(--accent-rgb),0.06)); box-shadow:0 0 10px rgba(var(--accent-rgb),0.2); }
/* Compteur "Messages" dans l'onglet — synchronisé avec hdrMsgBadge */
.notif-cat-cnt {
  display: none; margin-left: 4px;
  background: var(--danger); color: var(--textbright);
  font-family:var(--font-display); font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  box-shadow: 0 0 6px rgba(255,80,80,0.5);
}
.notif-cat-cnt:not(:empty) { display: inline-block; }
.notif-list { overflow-y:auto; flex:1; }
.notif-item { display:flex; align-items:flex-start; gap:10px; padding:11px 16px; border-bottom:1px solid var(--tint-2); cursor:default; transition:all .18s; border-left:3px solid transparent; }
.notif-item.unread { background:linear-gradient(90deg,rgba(var(--accent-rgb),0.1),rgba(var(--accent-rgb),0.02)); border-left-color:var(--accent); }
.notif-item:hover { background:var(--tint-2); border-left-color:rgba(var(--accent-rgb),0.3); }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:6px; box-shadow:0 0 6px rgba(var(--accent-rgb),0.5); }
.notif-item.read .notif-dot { background:transparent; border:1px solid var(--tint-9); }
.notif-msg { font-family:var(--font-mono); font-size: 14px; color:#a8c0d8; line-height:1.5; flex:1; }
.notif-msg.log-ok  { color:var(--success); }
.notif-msg.log-err { color:var(--danger); }
.notif-time { font-size:var(--fs-xs); color:var(--textsoft); flex-shrink:0; }
.notif-empty { padding:24px; text-align:center; font-family:var(--font-mono); font-size: 14px; color:var(--textsoft); }
.notif-item-body  { display:flex; flex-direction:column; gap:1px; flex:1; }
.notif-item-title { font-family:var(--font-mono); font-size: 14px; font-weight:bold; color:var(--textbright); }
.notif-item-sub   { font-family:var(--font-mono); font-size: 14px; color:var(--textsoft); }
.notif-item[onclick] { cursor:pointer; }
.logout-btn {
  padding:5px 10px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(224,80,80,0.35); color:var(--danger);
  background:rgba(224,80,80,0.07); font-size: 14px; font-family:var(--font-display);
  transition:all 0.2s; letter-spacing:1px;
}
.logout-btn:hover { background:rgba(224,80,80,0.16); }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--tint-1); }
::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; }

/* ══ MAIN LAYOUT — Left nav + right content ══ */
.main-layout { display:flex; overflow:hidden; height:100%; }

/* ══ LEFT NAV — OGame style ══ */
/* Revert 27/05 (user feedback) — Restauration du thème faction sur le nav-rail.
   L'override ambre Atlante stable (commit b572983) rendait le nav 'terne' selon
   l'utilisateur. Retour au --accent dynamique de la faction (violet Wraith /
   orange Ori / etc.) pour identité vibrante. */
.left-nav {
  width:260px; flex-shrink:0;
  background:
    linear-gradient(180deg,
      rgba(8,12,24,0.55) 0%,
      rgba(12,16,30,0.35) 35%,
      rgba(12,16,30,0.15) 65%,
      rgba(8,12,24,0.10) 90%,
      rgba(8,12,24,0.35) 100%),
    url('../img/nav-bg-atlantis-gate.jpg');
  background-size: 100% 100%, cover;
  background-position: 0 0, calc(100% + 155px) calc(100% + 80px);
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
  filter: saturate(1.10) brightness(0.95);
  border-right:2px solid rgba(var(--accent-rgb),0.45);
  box-shadow:inset -20px 0 40px rgba(var(--accent-rgb),0.04), 4px 0 20px var(--shade-2);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),0.35) transparent;
  backdrop-filter:blur(16px);
}
/* Voile opaque derriere chaque segment pour lisibilite menus par-dessus l'image visible.
   ::before permet de garder les linear-gradients hover/active sur les headers/items qui
   utilisent la propriete `background`. */
.lnav-segment::before {
  content:''; position:absolute; inset:0;
  background:rgba(6,10,20,0.78);
  z-index:-1;
  pointer-events:none;
}
.lnav-segment { background: transparent; }
.lnav-footer { background: rgba(6,10,20,0.85); position:relative; z-index:1; }
.left-nav::-webkit-scrollbar { width:6px; }
.left-nav::-webkit-scrollbar-track { background:transparent; }
.left-nav::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),0.25); border-radius:3px; }
.left-nav::-webkit-scrollbar-thumb:hover { background:rgba(var(--accent-rgb),0.5); }
.lnav-thumb { display:none; }
.lnav-header {
  padding:16px 18px; font-family:var(--font-display); font-size: 15px; font-weight:700;
  color:var(--accent2); background:linear-gradient(180deg, rgba(var(--accent-rgb),0.12) 0%, rgba(var(--accent-rgb),0.04) 100%);
  border-bottom:2px solid rgba(var(--accent-rgb),0.4);
  box-shadow:0 2px 12px rgba(var(--accent-rgb),0.15);
  letter-spacing:2.5px; flex-shrink:0; text-transform:uppercase;
  text-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
}
.lnav-sep {
  font-family:var(--font-display); font-size: 14px; color:rgba(var(--accent-rgb),0.7);
  letter-spacing:2.5px; padding:12px 16px 5px; text-transform:uppercase; flex-shrink:0;
}
/* UX 27/05 — left-nav sections collapsibles (.lnav-segment + .lnav-header)
   Polish v2 : headers compacts, gradient subtle, preview icones quand replié,
   glow accent quand segment ouvert. */
.lnav-segment { display:flex; flex-direction:column; flex-shrink:0; position:relative; }
.lnav-segment .lnav-items { display:flex; flex-direction:column; flex-shrink:0; }
.lnav-header {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 14px 6px; cursor:pointer; user-select:none;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.03), rgba(var(--accent-rgb),0.0));
  border:none; border-left:2px solid transparent;
  color:rgba(var(--accent-rgb),0.7);
  font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  transition:color 0.18s, background 0.18s, border-color 0.18s;
  text-align:left; position:relative;
}
.lnav-header:hover {
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.02));
  color:var(--accent);
  border-left-color:rgba(var(--accent-rgb),0.5);
}
.lnav-header:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.lnav-header-lbl { pointer-events:none; flex-shrink:0; }
.lnav-header-preview {
  display:none; flex:1; gap:3px; pointer-events:none;
  justify-content:flex-end; align-items:center; opacity:0.55;
}
.lnav-header-preview .lnav-prev-ico { display:inline-flex; width:14px; height:14px; }
.lnav-header-preview .lnav-prev-ico svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lnav-segment.lnav-collapsed .lnav-header-preview { display:inline-flex; }
.lnav-header-chevron {
  font-size:11px; opacity:0.55; pointer-events:none; flex-shrink:0; margin-left:6px;
  transition:transform 0.22s ease, opacity 0.18s;
}
.lnav-header:hover .lnav-header-chevron { opacity:0.95; }
.lnav-segment.lnav-collapsed .lnav-header-chevron { transform:rotate(-90deg); }
.lnav-segment.lnav-collapsed .lnav-items { display:none; }
/* Segment ouvert : border-left accent + bg subtle */
.lnav-segment:not(.lnav-collapsed) > .lnav-header {
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.04));
  color:var(--accent2);
  border-left-color:var(--accent);
  box-shadow:inset 0 -1px 0 rgba(var(--accent-rgb),0.18);
}
.lnav-header-badge {
  display:none; font-family:var(--font-mono); font-size:10px; font-weight:700;
  background:var(--danger); color:#0a0a12; padding:1px 7px; border-radius:9px;
  min-width:18px; text-align:center; line-height:1.4; flex-shrink:0;
  box-shadow:0 0 10px rgba(255,80,80,0.55);
  pointer-events:none;
}
.lnav-segment.lnav-collapsed .lnav-header-badge:not(:empty) { display:inline-flex; align-items:center; justify-content:center; }
/* Décor sous-marin Porte + Atlantis : background sur .left-nav (cf. plus haut). L'element
   .lnav-decor sert d'espaceur minimum quand segments sont collapses (laisse voir l'image
   sous les segments) — pas de background propre. */
.lnav-decor {
  flex:0 0 auto; min-height:200px;
  pointer-events:none;
}
@media (max-width:1023px) { .lnav-decor { display:none; min-height:0; } }
/* Footer sticky bas du nav-rail — pousse en bas avec margin-top auto (redondant si decor present, garde no-op) */
.lnav-footer { margin-top:auto; }
.lnav-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 12px 18px; cursor:pointer; flex-shrink:0;
  border-bottom:1px solid rgba(var(--accent-rgb),0.15);
  transition:all 0.2s ease; min-height:50px; position:relative;
}
.lnav-item:hover { background:rgba(var(--accent-rgb),0.12);  padding-left:14px; transform:translateX(2px);  box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.5); }
.lnav-item.active { position:relative; background:linear-gradient(90deg, rgba(var(--accent-rgb),0.32) 0%, rgba(var(--accent-rgb),0.08) 100%);  padding-left:13px; box-shadow:inset 3px 0 0 0 var(--accent), inset 8px 0 24px rgba(var(--accent-rgb),0.28), 0 0 16px rgba(var(--accent-rgb),0.20); }
.lnav-item.active::after { content:''; position:absolute; right:8px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:lnavActiveDot 1.6s ease-in-out infinite; }
@keyframes lnavActiveDot { 0%,100% { opacity:1; transform:translateY(-50%) scale(1); } 50% { opacity:0.55; transform:translateY(-50%) scale(0.7); } }
/* Footer sidebar — liens Discord/Roadmap/CGU/version */
.lnav-footer {
  margin-top:auto;
  padding:14px 12px 16px;
  border-top:1px solid rgba(255, 255, 255, 0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.lnav-foot-link {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  color:var(--textsoft);
  text-decoration:none;
  padding:5px 9px;
  border-radius:5px;
  border:1px solid rgba(var(--accent-rgb), 0.15);
  background:rgba(var(--accent-rgb), 0.04);
  cursor:pointer;
  transition:all 0.15s ease;
}
.lnav-foot-link:hover {
  color:var(--accent);
  border-color:rgba(var(--accent-rgb), 0.45);
  background:rgba(var(--accent-rgb), 0.10);
}
.lnav-foot-version {
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--textsoft);
  opacity:0.5;
  letter-spacing:1px;
}
/* Mobile (≤768px) : footer DC/RM/CGU/v.X masqué — prend trop de place dans
   la bottom nav, accessible depuis la landing page de toute façon. */
@media (max-width: 768px) {
  .lnav-footer { display:none !important; }
}
.lnav-lbl {
  font-family:var(--font-body); font-size:18px; font-weight:600;
  color:var(--text); line-height:1.2; flex:1;
}
.lnav-item:hover .lnav-lbl { color:var(--textbright); }
.lnav-item.active .lnav-lbl { color:var(--textbright); font-weight:700; text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.lnav-ico {
  width:42px; height:42px; border-radius:6px; flex-shrink:0;
  background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.3);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  transition:all 0.2s ease;
}
.lnav-ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lnav-item:hover .lnav-ico { border-color:rgba(var(--accent-rgb),0.5); background:rgba(var(--accent-rgb),0.1); }
.lnav-item.active .lnav-ico { border-color:rgba(var(--accent-rgb),0.7); background:rgba(var(--accent-rgb),0.18); box-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
.lnav-div { height:2px; background:linear-gradient(90deg, transparent 5%, rgba(var(--accent-rgb),0.35) 50%, transparent 95%); margin:3px 0; flex-shrink:0; }

/* ══ CENTER CONTENT ══ */
.center-content {
  flex:1; min-width:0;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, rgba(10,10,16,0.3) 0%, transparent 15%, transparent 85%, rgba(10,10,16,0.3) 100%);
  position:relative;
}
/* ── Star dust particles ── */
@keyframes starDust {
  0%   { background-position:0 0, 50px 100px, 100px 50px; }
  100% { background-position:0 -600px, 50px -500px, 100px -550px; }
}
.center-content::after {
  content:''; position:absolute; top:0; left:10%; right:10%; height:120px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),0.06) 0%, transparent 70%);
}
.planet-frame { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* Section header — slim bar (only Overview/Infra get the Command Center hero card below) */
.sec-hdr {
  position:relative; flex-shrink:0; height:60px; overflow:hidden;
  border-bottom:1px solid rgba(var(--accent-rgb),0.30);
  background:linear-gradient(180deg,rgba(15,20,40,0.92) 0%,rgba(5,8,18,0.96) 100%);
  display:flex; align-items:center;
}
.sec-hdr img { display:none !important; }
.sec-hdr::before, .sec-hdr::after { display:none !important; }
.sec-hdr-overlay { display:none !important; }
.sec-hdr-info { display:none !important; }
.sec-hdr.has-3d ~ * .ov-cmdcenter-planet3d-host { /* placeholder if needed later */ }
/* .sec-hdr-title — définition unique (dead-code cleanup 09/05 : ancien duplicate compact retiré) */
.sec-hdr.no-img { height:60px; }
/* Accent scanline at bottom */
.sec-hdr::after {
  content:''; position:absolute; bottom:0; left:5%; right:5%; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent2) 50%, var(--accent) 80%, transparent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),0.6), 0 0 30px rgba(var(--accent-rgb),0.25); z-index:2;
}
/* Starfield micro-particles behind image */
.sec-hdr::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(1px 1px at 8% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 22% 65%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 58% 78%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 72% 30%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 90% 55%, rgba(var(--accent-rgb),0.4), transparent),
    radial-gradient(1px 1px at 35% 88%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 15% 45%, rgba(var(--accent-rgb),0.35), transparent);
  animation:secHdrStarTwinkle 5s ease-in-out infinite;
}
.sec-hdr img { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; position:relative; z-index:1; }
.sec-hdr.no-img { height:70px; background:linear-gradient(135deg,rgba(20,20,28,0.95) 0%,rgba(32,32,44,0.9) 100%); }
/* Overlay — vignette légère + gradient bas */
.sec-hdr-overlay {
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 65%, rgba(16,16,22,0.35) 85%, rgba(16,16,22,0.75) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, var(--shade-1) 100%);
}
/* Title — Orbitron uppercase tracked, accent gold/white (audit créatif 09/05 unification) */
.sec-hdr-title {
  position:absolute; top:0; left:0; right:0; padding:14px 0 12px; z-index:3;
  font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700;
  color:var(--textbright); text-align:center; letter-spacing:4px; text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,0.9), 0 0 18px rgba(var(--accent-rgb),0.35);
  background:linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, var(--shade-1) 70%, transparent 100%);
}

/* Planet section (scrollable content) */
.planet-section {
  flex:1; overflow-y:auto; position:relative;
  background:rgba(8,12,22,0.80);
  backdrop-filter:blur(8px);
}
.planet-section::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(var(--accent-rgb),0.018) 3px, rgba(var(--accent-rgb),0.018) 4px);
  pointer-events:none; z-index:1;
}
.planet-section::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, var(--shade-1) 100%);
  pointer-events:none; z-index:1;
}

/* ══ RIGHT PANEL ══ */
.right-panel {
  width:300px; max-width:300px; flex-shrink:0;
  background:linear-gradient(180deg, rgba(8,12,24,0.90) 0%, rgba(12,16,30,0.88) 50%, rgba(8,12,24,0.90) 100%);
  
  box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.4), inset 20px 0 40px rgba(var(--accent-rgb),0.04), -4px 0 20px var(--shade-2);
  display:flex; flex-direction:column; align-items:center;
  padding:18px 14px 12px; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; backdrop-filter:blur(14px);
}
.right-panel > *:not(.rp-hero-banner) { overflow-wrap:break-word; word-break:break-word; max-width:100%; }
.right-panel::-webkit-scrollbar { display:none; }
/* Hero Banner — cinematic planet illustration */
.rp-hero-banner {
  position:relative; width:100%; height:220px; margin-bottom:8px;
  border-radius:8px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%, rgba(15,20,40,0.95) 0%, rgba(5,8,18,1) 100%);
  box-shadow:
    0 0 25px rgba(var(--accent-rgb),0.3),
    0 0 50px rgba(var(--accent-rgb),0.1);
  border:1px solid rgba(var(--accent-rgb),0.3);
  animation:heroBannerFloat 7s ease-in-out infinite, heroGlowPulse 4s ease-in-out infinite;
}
/* Aura glow behind banner */
.rp-hero-aura {
  position:absolute; inset:-10px; z-index:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb),0.12) 0%, transparent 70%);
  animation:auraPulse 4s ease-in-out infinite; pointer-events:none;
}
/* Planet image — Ken Burns slow zoom */
.rp-hero-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  z-index:1; animation:heroKenBurns 20s ease-in-out infinite;
}
.rp-hero-banner:hover .rp-hero-img { animation-play-state:paused; transform:scale(1.08); transition:transform 0.5s ease; }
/* Dark gradient overlay — light vignette only */
.rp-hero-overlay {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(8,12,24,0.5) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.25) 100%);
}
/* Scanline accent at bottom */
.rp-hero-banner::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; z-index:4;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.7), transparent);
  animation:heroScanline 3s linear infinite;
}
.mac-title {
  font-family:var(--font-display); font-size: 15px; font-weight:700;
  color:var(--accent2); letter-spacing:1.5px; margin-bottom:6px;
}
.mac-planet {
  font-family:var(--font-mono); font-size: 15px;
  color:var(--textbright); margin-bottom:8px;
}
.mac-bar-bg { background:rgba(255,255,255,0.07); border-radius:3px; height:5px; overflow:hidden; margin-top:5px; }
.mac-bar-fill { background:linear-gradient(90deg,var(--accent),var(--success)); height:100%; transition:width 1s linear; }
.rp-planet-nav {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:5px;
}
.rp-nav-arrow {
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(var(--accent-rgb),0.5);
  background:rgba(var(--accent-rgb),0.08); color:var(--accent); font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s ease; padding:0; line-height:1;
}
.rp-nav-arrow:hover {
  background:rgba(var(--accent-rgb),0.2); border-color:var(--accent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
}
.rp-planet-name {
  font-family:var(--font-display); font-size: 16px; font-weight:700;
  color:#c8d8f0; text-align:center; letter-spacing:2px; margin-bottom:0;
  cursor:pointer; position:relative; transition:color 0.15s;
}
.rp-planet-name:hover { color:var(--accent); }
.rp-planet-name:hover::after {
  content:' ✎'; font-size:14px; color:var(--accent); opacity:0.8;
}
.rp-planet-name:only-child { margin-bottom:5px; }
.rp-coords {
  font-family:var(--font-mono); font-size:14px;
  color:var(--textmid); text-align:center; margin-bottom:14px;
}
.rp-div { width:100%; height:1px; background:rgba(var(--accent-rgb),0.3); margin:10px 0; }
.rp-sec-lbl {
  display:flex; align-items:center; gap:8px; margin:8px 0 6px;
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:rgba(var(--accent-rgb),0.6); letter-spacing:2px; text-transform:uppercase;
}
/* Batch 6 audit Major 27/05 — wrapper section Production avec spacing entre trackers */
.rp-prod-section {
  display:flex; flex-direction:column; gap:6px; margin-top:6px;
  /* .right-panel a align-items:center → sans align-self:stretch, la section
     prend sa largeur de contenu naturelle (300-400px sur un titre long
     "TECHNOLOGIE DES ANCIENS → Niv.X"), déborde le drawer 280px et le texte
     est clippé par le bord visible. Force la section à occuper la largeur
     intérieure du panneau pour que le text-overflow:ellipsis se déclenche. */
  align-self:stretch; width:100%; max-width:100%; min-width:0;
}
.rp-prod-section .rp-sec-lbl { margin-top:4px; }
.rp-sec-lbl::before, .rp-sec-lbl::after {
  content:''; flex:1; height:1px; background:rgba(var(--accent-rgb),0.2);
}
/* Score badge pill */
.rp-score-badge {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:4px auto 6px; padding:3px 12px; border-radius:12px;
  background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.2);
}
.rp-score-rank {
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:var(--gold); letter-spacing:1px;
}
.rp-score-pts {
  font-family:var(--font-mono); font-size:14px;
  color:var(--textmid);
}
.rp-res-card {
  position:relative; padding:8px 10px 5px; border-radius:8px;
  border:1px solid var(--tint-3); background:var(--tint-1);
  transition:all 0.25s ease; overflow:hidden;
}
.rp-res-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:8px 0 0 8px; background:var(--rc); box-shadow:0 0 8px var(--rc);
}
.rp-res-card:hover {
  background:var(--tint-4); border-color:rgba(var(--rc-rgb),0.3);
  transform:translateX(2px); box-shadow:0 0 12px rgba(var(--rc-rgb),0.12);
}
.rp-res-metal   { --rc:#8ca8cc; --rc-rgb:140,168,204; }
.rp-res-naqria  { --rc:#5ee8ff; --rc-rgb:94,232,255; }
.rp-res-naq     { --rc:#f0c040; --rc-rgb:240,192,64; }
.rp-res-hommes  { --rc:#66dd88; --rc-rgb:102,221,136; }
.rp-res-energie { --rc:#44aaff; --rc-rgb:68,170,255; }
.rp-res-row {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:0;
  font-family:var(--font-mono); font-size:15px;
}
.rp-res-ico {
  width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:rgba(var(--rc-rgb),0.08); box-shadow:0 0 6px rgba(var(--rc-rgb),0.15);
  font-size:17px; transition:box-shadow 0.3s;
}
.rp-res-card:hover .rp-res-ico { box-shadow:0 0 12px rgba(var(--rc-rgb),0.35); }
.rp-res-info { display:flex; flex-direction:column; flex:1; min-width:0; gap:1px; }
.rp-res-lbl { color:var(--textbright); font-size:14px; font-weight:700; letter-spacing:0.5px; }
.rp-rate { font-family:var(--font-mono); font-size:14px; color:var(--success); letter-spacing:0.3px; opacity:0.85; }
.rp-res-right { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.rp-res-val {
  color:var(--gold); font-weight:bold; font-size:17px;
  text-shadow:0 0 8px rgba(255,192,64,0.5);
  font-family:var(--font-display); letter-spacing:0.5px;
}
.rp-res-val.rp-full { color:var(--danger); animation:rpValPulse 1.5s ease-in-out infinite; }
.rp-res-val.rp-full::after { content:' FULL'; font-size:14px; color:var(--danger); opacity:0.85; letter-spacing:1px; }
@keyframes rpValPulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }
.rp-res-max { font-family:var(--font-mono); font-size:14px; color:var(--textsoft); opacity:0.6; }
/* Fix : sur le panneau latéral étroit (~300px), un très gros nombre formaté
   (ex. "1 883 638 382" avec espaces insécables) écrasait .rp-res-info à 0
   → le label "Métal" se cassait verticalement lettre par lettre.
   Label sur une ligne + valeur qui peut passer dessous au lieu d'écraser. */
.rp-res-lbl   { white-space:nowrap; }
.rp-res-row   { flex-wrap:wrap; }
.rp-res-right { min-width:0; max-width:100%; }
.rp-res-val   { overflow-wrap:anywhere; }
.rp-bar-bg {
  height:8px; background:rgba(var(--rc-rgb),0.15); border-radius:4px;
  margin:3px 2px 1px; overflow:hidden;
}
.rp-bar-fill {
  height:100%; border-radius:4px; transition:width 1s linear;
  background:linear-gradient(90deg, rgba(var(--rc-rgb),0.5), rgba(var(--rc-rgb),0.85));
  box-shadow:0 0 6px rgba(var(--rc-rgb),0.4); position:relative;
}
.rp-bar-fill::after {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  animation:shimmerSweep 2s ease-in-out 1; border-radius:4px;
}
.rp-bar-fill.rp-bar-warn {
  box-shadow:0 0 8px rgba(var(--rc-rgb),0.6);
  animation:rpBarGlow 1.5s ease-in-out 1;
}
.rp-bar-fill.rp-bar-full {
  box-shadow:0 0 12px rgba(var(--rc-rgb),0.8);
  animation:rpBarGlow 1s ease-in-out 1;
}
/* Planet selector in right panel */
.rp-planet-item {
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px;
  cursor:pointer; transition:background 0.15s; border:1px solid transparent;
  font-family:var(--font-mono); font-size: 14px; color:var(--textmid);
}
.rp-planet-item:hover { background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.25); }
.rp-planet-active { background:rgba(var(--accent-rgb),0.15); border-color:rgba(var(--accent-rgb),0.4); color:var(--textbright); }
.rp-planet-thumb { width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid rgba(var(--accent-rgb),0.3); }
.rp-planet-thumb svg { width:100%; height:100%; }
.rp-planet-info { flex:1; min-width:0; overflow:hidden; }
.rp-planet-nm { font-size: 14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-planet-co { font-size: 14px; color:var(--textsoft); }
.rp-planet-count { font-family:var(--font-mono); font-size: 14px; color:var(--textsoft); text-align:center; margin-top:5px; }
/* Colony toggle & list */
.rp-colony-toggle {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-mono); font-size:14px; color:var(--textsoft);
  padding:4px 0; margin:2px 0 0; cursor:pointer; user-select:none;
  transition:color 0.2s; letter-spacing:1px;
}
.rp-colony-toggle:hover { color:var(--accent); }
.rp-colony-chevron { font-size:14px; transition:transform 0.3s ease; display:inline-block; }
.rp-colony-chevron.open { transform:rotate(180deg); }
.rp-colony-list {
  max-height:0; overflow:hidden; transition:max-height 0.35s ease;
  display:flex; flex-direction:column; gap:2px; width:100%; padding:0 2px;
}
.rp-colony-list.open { max-height:min(70vh, 640px); overflow-y:auto; }
.rp-colony-list .rp-planet-item { font-size:14px; padding:5px 6px; gap:6px; }
.rp-colony-list .rp-planet-thumb { width:26px; height:26px; }
.rp-colony-list .rp-planet-nm { font-size:14px; }
.rp-colony-list .rp-planet-co { font-size:14px; }
.rp-colony-bld-badge {
  font-family:var(--font-mono); font-size:14px; color:var(--textsoft);
  background:rgba(var(--accent-rgb),0.1); border-radius:3px; padding:1px 5px;
}
.rp-colony-building-ico {
  font-size:14px; animation:loRingSpin 2s linear infinite; opacity:0.7;
}
/* Colony banner in center content */
.rp-colony-banner {
  display:flex; align-items:center; gap:8px; padding:8px 14px; margin-bottom:10px;
  background:rgba(212,146,10,0.08); border:1px solid rgba(212,146,10,0.3); border-radius:8px;
}
.rp-colony-banner-title { font-family:var(--font-display); font-size: 14px; font-weight:700; color:var(--gold2); flex:1; }
.rp-colony-banner-btn { background:none; border:1px solid rgba(var(--accent-rgb),0.4); color:var(--accent); border-radius:5px;
  padding:5px 12px; font-family:var(--font-mono); font-size: 14px; cursor:pointer; }
.rp-colony-banner-btn:hover { background:rgba(var(--accent-rgb),0.1); }
/* Coords wrapper + tooltip */
.rp-coords-wrap { position:relative; display:flex; justify-content:center; }
.rp-coords-tooltip {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:4px; padding:6px 12px; background:rgba(8,14,28,0.95);
  border:1px solid rgba(var(--accent-rgb),0.35); border-radius:8px;
  white-space:nowrap; z-index:20; gap:10px;
  font-family:var(--font-mono);
}
.rp-coords-wrap:hover .rp-coords-tooltip { display:flex; }
.rp-tt-item { display:flex; flex-direction:column; align-items:center; gap:1px; }
.rp-tt-lbl { font-size:14px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; }
.rp-tt-val { font-size:14px; font-weight:bold; }
/* Construction en cours */
.rp-construction {
  margin:6px 8px; padding:8px 10px; border-radius:8px;
  background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.2);
  min-width:0; max-width:100%; overflow:hidden;
}
.rp-constr-header { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.rp-constr-ico { font-size:18px; flex-shrink:0; animation:rpConstrSpin 2s linear infinite; }
@keyframes rpConstrSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.rp-constr-info { display:flex; flex-direction:column; flex:1 1 0; min-width:0; max-width:100%; overflow:hidden; }
.rp-constr-name {
  display:block; width:100%; max-width:100%;
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:var(--textbright); letter-spacing:1px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.rp-constr-eta {
  display:block; max-width:100%;
  font-family:var(--font-mono); font-size:14px; color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rp-constr-bar {
  margin-top:5px; height:4px; border-radius:2px;
  background:var(--tint-4); overflow:hidden;
}
.rp-constr-fill {
  height:100%; border-radius:2px; background:var(--accent);
  transition:width 1s linear; box-shadow:0 0 6px var(--accentglow);
}
/* Shield overlay — banner version */
.rp-hero-shield {
  display:none; position:absolute; inset:0;
  border-radius:10px; pointer-events:none; z-index:10;
  border:3px solid rgba(var(--accent-rgb),0.85);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.02) 100%);
  box-shadow:
    0 0 30px rgba(var(--accent-rgb),0.6),
    0 0 60px rgba(var(--accent-rgb),0.3),
    inset 0 0 30px rgba(var(--accent-rgb),0.15);
  animation:rpShieldPulseBanner 2.5s ease-in-out infinite;
}
.rp-hero-shield.active { display:block; }
.rp-hero-shield::before {
  content:''; position:absolute; inset:6px; border-radius:8px;
  border:1.5px dashed rgba(var(--accent-rgb),0.35);
}
/* Attack warning — banner version */
.rp-hero-attack {
  display:none; position:absolute; inset:0;
  border-radius:10px; pointer-events:none; z-index:9;
  border:2px solid rgba(255,50,50,0.7);
  box-shadow:0 0 20px rgba(255,50,50,0.4), 0 0 40px rgba(255,50,50,0.15);
  animation:rpAttackPulseBanner 1.2s ease-in-out infinite;
}
.rp-hero-attack.active { display:flex; align-items:center; justify-content:center; }
.rp-hero-attack.active::after {
  content:'⚠'; font-size:22px; position:absolute; top:6px; right:8px;
  filter:drop-shadow(0 0 6px rgba(255,50,50,0.8));
}
/* Status badges (shield / attack) */
.rp-status-badge {
  display:flex; align-items:center; gap:6px; justify-content:center;
  margin:2px auto 0; padding:3px 12px; border-radius:20px; width:fit-content;
  font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:2px;
  color:var(--accent); background:rgba(var(--accent-rgb),0.1);
  border:1px solid rgba(var(--accent-rgb),0.4);
}
.rp-status-badge.inactive {
  color:var(--textsoft); background:var(--tint-2);
  border-color:var(--tint-7);
}
.rp-status-badge.inactive .rp-status-dot {
  background:var(--textsoft); box-shadow:none; animation:none;
}
.rp-status-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px var(--accent); animation:rpDotBlink 1.5s ease-in-out infinite;
}
@keyframes rpDotBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.rp-status-danger {
  color:var(--danger); background:rgba(255,50,50,0.1);
  border-color:rgba(255,50,50,0.4);
}
.rp-status-danger .rp-status-dot { background:var(--danger); box-shadow:0 0 6px var(--danger); }
/* Race info popup */
/* ══ RIGHT PANEL — Building detail ══ */
/* Day/night cycle overlay on planet */
.rp-sphere { position:relative; }
.rp-sphere-day::after {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 35% 30%, rgba(255,240,180,0.15) 0%, transparent 50%);
}
.rp-sphere-dusk::after {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,140,40,0.12) 0%, rgba(100,40,120,0.08) 50%, rgba(8,12,30,0.3) 100%);
}
.rp-sphere-night::after {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 70% 30%, transparent 15%, rgba(8,12,30,0.6) 55%, rgba(4,6,18,0.75) 100%);
  box-shadow:inset -10px -6px 24px rgba(60,120,255,0.15);
  animation:nightPulse 6s ease-in-out infinite;
}
@keyframes nightPulse { 0%,100%{opacity:0.85} 50%{opacity:1} }

/* Ambiance button */
.amb-btn {
  position:fixed; bottom:16px; right:72px; z-index:900;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),0.25);
  background:rgba(6,10,22,0.8); backdrop-filter:blur(4px);
  font-size:14px; cursor:pointer; color:var(--textmid);
  transition:border-color 0.2s;
}
.amb-btn:hover { border-color:rgba(var(--accent-rgb),0.5); }

#rpPlanetView { display:flex; flex-direction:column; align-items:center; width:100%; }
#rpBldDetail  { display:none; flex-direction:column; align-self:stretch; overflow-y:auto; flex:1; }
.rp-back-btn {
  font-family:var(--font-mono); font-size: 14px; letter-spacing:1px;
  padding:10px 14px; background:rgba(var(--accent-rgb),0.12); border:none;
  border-bottom:1px solid rgba(var(--accent-rgb),0.3); color:var(--textmid);
  cursor:pointer; text-align:left; transition:background 0.15s; width:100%;
  position:relative; z-index:2; flex-shrink:0;
}
.rp-back-btn:hover { background:rgba(40,70,130,0.7); color:var(--textbright); }
/* ── Unit detail: poster hero ── */
.rp-bld-det-head { text-align:center; padding:0; }
.rp-bld-det-icon { font-size:72px; margin-bottom:14px; }
.rp-det-poster {
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-bottom:2px solid rgba(var(--accent-rgb),0.4);
}
.rp-det-poster-img {
  width:100%; height:100%; object-fit:cover;
}
.rp-det-poster-grad {
  position:absolute; bottom:0; left:0; right:0; height:45%;
  background:linear-gradient(to top, rgba(4,8,18,0.9) 0%, rgba(4,8,18,0.3) 50%, transparent 100%);
  pointer-events:none;
}
.rp-det-poster-info {
  position:absolute; bottom:10px; left:0; right:0; text-align:center; z-index:2;
}
.rp-det-poster-name {
  font-family:var(--font-display); font-size:16px; font-weight:700;
  color:var(--textbright); letter-spacing:2px; text-shadow:0 2px 8px rgba(0,0,0,0.8);
  margin-bottom:6px;
}
.rp-det-faction-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:10px; font-family:var(--font-mono);
  font-size:14px; letter-spacing:1px; cursor:pointer;
  background:var(--shade-2); border:1px solid rgba(var(--accent-rgb),0.4);
  backdrop-filter:blur(4px); transition:background 0.15s;
}
.rp-det-faction-pill:hover { background:rgba(var(--accent-rgb),0.25); }
/* Fallback when no illustration */
.rp-bld-det-icon.has-illus {
  width:180px; height:180px; margin:14px auto 12px; border-radius:12px;
  border:2px solid rgba(var(--accent-rgb),0.5);
  box-shadow:0 6px 24px var(--shade-5), 0 0 20px rgba(var(--accent-rgb),0.2);
  position:relative;
}
.rp-bld-det-name {
  font-family:var(--font-display); font-size:18px; font-weight:700;
  color:var(--textbright); letter-spacing:2px; margin-bottom:6px;
}
.rp-bld-det-sub { font-family:var(--font-mono); font-size:14px; margin-bottom:4px; }
/* ── Description card (v3.10 redesign : plus grande, plus lisible, plus elegante) ── */
.rp-bld-det-desc {
  position:relative;
  margin:14px 12px 10px;
  padding:16px 18px 16px 26px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:0.15px;
  color:var(--text);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.07) 0%, rgba(var(--accent-rgb),0.02) 60%, rgba(255,255,255,0.015) 100%);
  border-radius:10px;
  border:1px solid rgba(var(--accent-rgb),0.18);
  
  box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.65), inset 0 0 24px rgba(var(--accent-rgb),0.04), 0 1px 3px rgba(0,0,0,0.18);
  text-align:left;
  text-shadow:0 1px 2px var(--shade-3);
}
.rp-bld-det-desc::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.35), transparent);
  pointer-events:none;
}
.rp-bld-det-desc::after {
  content:'❝';
  position:absolute; top:6px; right:10px;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:28px;
  color:rgba(var(--accent-rgb),0.22);
  line-height:1;
  pointer-events:none;
  font-style:normal;
}
/* ── Stat rows with micro-bars ── */
.rp-stat-card {
  margin:0 10px 4px; padding:6px 10px; border-radius:8px;
  background:var(--tint-1); border:1px solid var(--tint-4);
}
.rp-stat-card .rp-cost-row { padding:3px 0; font-size:15px; }
.rp-stat-card .rp-cost-ico { font-size:16px; width:22px; }
.rp-stat-card .rp-cost-val { font-size:15px; }
.rp-stat-row-wrap { padding:4px 0 2px; }
.rp-stat-bar-bg {
  height:4px; border-radius:2px; margin:2px 0 0 22px;
  background:var(--tint-3); overflow:hidden;
}
.rp-stat-bar-fill {
  height:100%; border-radius:2px; transition:width 0.4s ease;
}
.rp-stat-bar-fill.bar-atk { background:linear-gradient(90deg,#ff4444,#ff8866); }
.rp-stat-bar-fill.bar-def { background:linear-gradient(90deg,#44cc66,#66eebb); }
/* ── Bonus badges ── */
.rp-bonus-row {
  display:flex; flex-wrap:wrap; gap:3px; padding:1px 0 3px 22px;
}
.rp-bonus-tag {
  display:inline-block; padding:1px 5px; border-radius:3px; font-size:14px;
  font-family:var(--font-mono); color:var(--textsoft);
  background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.12);
}
/* ── Garrison bar ── */
.rp-garrison-wrap {
  display:flex; align-items:center; gap:8px; padding:4px 0;
}
.rp-garrison-bar-bg {
  flex:1; height:6px; border-radius:3px; background:var(--tint-3); overflow:hidden;
}
.rp-garrison-bar-fill {
  height:100%; border-radius:3px; background:linear-gradient(90deg, rgba(var(--accent-rgb),0.6), rgba(var(--accent-rgb),0.9));
  transition:width 0.3s;
}
/* ── Cost grid ── */
.rp-cost-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  margin:4px 10px 6px; padding:0;
}
.rp-cost-pill {
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:6px;
  background:var(--shade-1); border:1px solid var(--tint-2);
}
.rp-cost-pill-ico { font-size:14px; flex-shrink:0; }
.rp-cost-pill-ico svg { width:14px; height:14px; }
.rp-cost-pill-info { display:flex; flex-direction:column; min-width:0; }
.rp-cost-pill-lbl {
  font-family:var(--font-mono); font-size:14px; letter-spacing:0.5px;
  color:var(--textsoft); text-transform:uppercase; white-space:nowrap;
}
.rp-cost-pill-val {
  font-family:var(--font-display); font-size:14px; font-weight:700;
  color:var(--accent2);
}
.rp-cost-pill-val.cant-afford { color:var(--danger); }
.rp-cost-pill.cost-time {
  grid-column:1/-1; justify-content:center; gap:8px;
  background:rgba(var(--accent-rgb),0.05); border-color:rgba(var(--accent-rgb),0.12);
}
.rp-cost-pill.cost-time .rp-cost-pill-val { font-size:14px; color:var(--accent); }
/* ── Cost section (legacy, for building detail) ── */
.rp-cost-section {
  margin:4px 12px 8px; padding:8px 10px; border-radius:8px;
  background:rgba(0,0,0,0.15); border:1px solid var(--tint-2);
}
.rp-cost-section .rp-cost-row { padding:5px 0; font-size:16px; }
.rp-cost-section .rp-cost-ico { font-size:18px; width:24px; }
.rp-cost-section .rp-cost-val { font-size:16px; }
.bd-lv-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--tint-9);
  background:var(--tint-3);
  transition:all 0.2s;
}
.bd-lv-dot.on { background:var(--accent); border-color:var(--accent); box-shadow:0 0 5px var(--accent); }
.rp-cost-block { padding:0 18px 14px; }
.rp-cost-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; font-family:var(--font-body); font-size:19px; font-weight:500;
}
.rp-cost-ico { font-size:22px; width:28px; }
.rp-cost-lbl { color:var(--textmid); flex:1; margin-left:8px; }
.rp-cost-val { color:var(--accent2); font-weight:700; font-size:20px; }
.rp-cost-val.cant-afford { color:var(--danger); }
.rp-upgrade-btn {
  margin:8px 14px 14px; padding:14px 10px; width:calc(100% - 28px);
  font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:1.5px;
  background:rgba(var(--accent-rgb),0.15); border:1px solid var(--accent);
  color:var(--accent2); cursor:pointer; border-radius:4px;
  transition:all 0.18s; text-transform:uppercase; display:block;
}
.rp-upgrade-btn:hover:not([disabled]) { background:rgba(var(--accent-rgb),0.28); }
.rp-upgrade-btn[disabled] {
  opacity:0.7; cursor:not-allowed;
  border-color:rgba(80,80,100,0.4); color:var(--textsoft); background:transparent;
}
.rp-upgrade-btn.btn-no-prereq {
  border-color:rgba(255,119,119,0.5); color:var(--danger); background:rgba(255,60,60,0.08);
  opacity:0.85;
}
.rp-upgrade-btn.btn-no-res {
  border-color:rgba(255,119,119,0.4); color:var(--danger); background:rgba(255,60,60,0.06);
  opacity:0.85;
}
.rp-bld-constr {
  padding:8px 16px 14px;
  font-family:var(--font-body); font-size:15px; font-weight:500;
}
.rp-constr-bar-bg {
  background:var(--tint-4); border-radius:4px; height:8px;
  overflow:hidden; margin:6px 0 4px;
}
.rp-constr-bar-fill {
  background:linear-gradient(90deg,var(--warn),#f0b030);
  height:100%; transition:width 0.5s ease;
}
.rp-max-badge {
  text-align:center; padding:18px 14px;
  font-family:var(--font-display); font-size:18px; letter-spacing:1.5px; color:var(--gold);
}

/* ══ OGAME BUILDING CARDS ══ */
.nav-alert-badge {
  background:var(--danger); color:#0a0a12; border-radius:50%;
  font-family:var(--font-display); font-size: 14px; font-weight:700;
  padding:1px 4px; min-width:14px; display:none;
  position:absolute; top:4px; right:4px; text-align:center; line-height:14px;
  box-shadow:0 0 6px currentColor;
}
/* Variants — queue in progress (orange) / ready to claim (green) */
.nav-alert-badge.nav-badge-queue { background:var(--warn); color:#0a0a12; }
.nav-alert-badge.nav-badge-ready { background:var(--success); color:#0a0a12; animation:navBadgePulse 2s ease-in-out infinite; }
@keyframes navBadgePulse { 0%,100%{transform:scale(1);box-shadow:0 0 6px currentColor} 50%{transform:scale(1.15);box-shadow:0 0 12px currentColor} }

/* Messages */
.rb-item:first-child .rb-tooltip { left:0; transform:none; }
.rb-item:last-child .rb-tooltip  { left:auto; right:0; transform:none; }

/* ══ SKELETON LOADING ══ */
.skeleton { background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%); background-size:200% 100%; animation:skeletonPulse 1.5s ease-in-out infinite; border-radius:4px; }
@keyframes skeletonPulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══ STACKABLE NOTIFICATIONS ══ */
#notifStack { position:fixed; top:calc(64px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; z-index:var(--z-notif-stack); pointer-events:none; max-width:92vw; }
/* .notif-toast styling fully owned by sgc-effects.css (REDESIGN block).
   Layout-only properties remaining: stack positioning + pointer-events. */
.notif-toast { white-space:normal; max-width:420px; pointer-events:auto; }

/* Large tablet / small desktop: ≤1400px — réduire le panneau droit */
@media (max-width:1400px) {
  .app { max-width:100%; border-left:none; border-right:none; box-shadow:none; }
  .right-panel { width:220px; max-width:220px; padding:14px 10px 10px; }
  .rp-planet-wrap { width:140px; height:140px; }
  .rp-sphere { width:100px; height:100px; }
  .rp-orbit-1 { width:135px; height:135px; margin-top:-67px; margin-left:-67px; }
  .rp-orbit-2 { width:155px; height:155px; margin-top:-77px; margin-left:-77px; }
  .rp-aura { width:125px; height:125px; margin-top:-62px; margin-left:-62px; }
  .left-nav { width:200px; }
  .lnav-lbl { font-size:14px; }
  .lnav-ico { width:32px; height:32px; font-size:16px; }
  .lnav-item { padding:10px 10px 10px 14px; min-height:44px; }
}

/* Tablet & Mobile: ≤1024px — nav horizontale + cacher panneau droit */
/* iPad Pro 12.9 portrait is exactly 1024px — keep it in side-by-side layout.
   Switch to stacked nav only below 1024 (iPad 10.9, mini, smaller tablets). */
@media (max-width:1023px) {
  .right-panel { display:none !important; }
  .main-layout { flex-direction:column; }
  .left-nav {
    flex-direction:row; height:48px; width:100%;
    overflow-x:auto; overflow-y:hidden; border-right:none;
    border-bottom:1px solid rgba(var(--accent-rgb),0.35);
    scrollbar-width:none;
    /* Visual scroll indicator: fade right edge when scrollable content overflows */
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .left-nav::-webkit-scrollbar { display:none; }
  .lnav-lbl { display:none; }
  .lnav-ico { margin:0 auto; width:36px; height:36px; font-size:18px; }
  .lnav-item { justify-content:center; padding:8px 12px; flex-shrink:0; }
  .lnav-header { display:none; }
  .lnav-div { display:none; }
  .lnav-sep { display:none; }
  /* UX 27/05 — mobile : collapse desactive, items toujours visibles
     (le bottom-nav horizontal s'occupe du regroupement via "Plus") */
  .lnav-segment .lnav-items { display:flex !important; flex-direction:row; }
  .lnav-segment.lnav-collapsed .lnav-items { display:flex !important; }
  .sec-hdr { height:140px; }
}

/* Tablet portrait: nav wrapped on 2 rows for full discoverability (no scroll required) */
@media (max-width:1023px) and (orientation:portrait) {
  .left-nav {
    flex-wrap:wrap; height:auto; min-height:48px;
    -webkit-mask-image:none; mask-image:none;
    align-content:flex-start; row-gap:2px;
  }
  .lnav-item { padding:6px 10px; min-height:44px; }
}

/* PvP spy button */
.pvp-spy-btn { background:rgba(46,204,136,0.12); border:1px solid rgba(46,204,136,0.35); color:var(--success); border-radius:4px; padding:2px 8px; font-size:14px; cursor:pointer; transition:all 0.15s; line-height:1; }
.pvp-spy-btn:hover { background:rgba(46,204,136,0.25); border-color:rgba(46,204,136,0.6); transform:scale(1.1); }

/* Cancel button for construction/training/research slots */
.og-cancel-btn {
  font-family:var(--font-mono); font-size:11px; padding:3px 8px;
  border:1px solid rgba(192,57,43,0.5); background:rgba(192,57,43,0.15);
  color:var(--danger); border-radius:5px; cursor:pointer; transition:all 0.15s;
  font-weight:700; letter-spacing:0;
  flex:none; white-space:nowrap; line-height:1.2;
}
.og-cancel-btn:hover { background:rgba(192,57,43,0.35); border-color:rgba(192,57,43,0.8); }

/* Prereq clickable links */
.prereq-link { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; transition:color 0.15s, text-shadow 0.15s; }
.prereq-link:hover { color:var(--accent); text-shadow:0 0 6px rgba(var(--accent-rgb),0.5); }
.prereq-link.prereq-done { color:var(--success); text-shadow:0 0 6px rgba(0,200,100,0.4); }
.prereq-lv { font-family:var(--font-display); font-size:0.9em; font-weight:900; letter-spacing:1px; }

/* ══ MISSION TRACKER ══ */
.mission-tracker { background:rgba(6,14,28,0.9); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.mt-header { display:flex; align-items:center; gap:12px; }
.mt-icon { font-size:32px; animation:sphereFloat 3s ease-in-out infinite; }
.mt-info { flex:1; }
.mt-title { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--accent); letter-spacing:2px; text-transform:uppercase; }
.mt-target { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--textbright); letter-spacing:1px; margin-top:2px; text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.mt-code { font-family:var(--font-mono); font-size:14px; color:var(--textsoft); margin-top:1px; }
.mt-progress { display:flex; align-items:center; gap:8px; }
.mt-bar-bg { flex:1; height:8px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),0.2); }
.mt-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--success)); border-radius:3px; transition:width 1s linear; box-shadow:0 0 6px rgba(46,204,136,0.4); }
.mt-pct { font-family:var(--font-mono); font-size:14px; color:var(--success); font-weight:700; min-width:32px; text-align:right; }
.mt-times { display:flex; flex-direction:column; gap:4px; background:var(--tint-1); border-radius:6px; padding:8px 10px; }
.mt-time-row { display:flex; justify-content:space-between; align-items:center; }
.mt-time-lbl { font-family:var(--font-mono); font-size:14px; color:var(--textsoft); }
.mt-time-val { font-family:var(--font-mono); font-size:14px; color:var(--textmid); font-weight:700; }
.mt-time-accent { color:var(--accent); }
.mt-time-warn { color:var(--warn); font-size:15px; text-shadow:0 0 8px rgba(240,192,64,0.4); }
.mt-countdown { border-top:1px solid rgba(var(--accent-rgb),0.15); padding-top:5px; margin-top:2px; }
.mt-troops-section { border-top:1px solid rgba(var(--accent-rgb),0.2); padding-top:10px; }
.mt-troops-title { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--accent); letter-spacing:1.5px; margin-bottom:6px; }
.mt-troops-list { display:flex; flex-direction:column; gap:3px; }
.mt-troop { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:14px; color:var(--textmid); padding:3px 6px; background:rgba(var(--accent-rgb),0.04); border-radius:4px; }
.mt-troop-cnt { color:var(--accent2); font-weight:700; }
.mt-troop-lost { color:var(--danger); font-size:14px; }
.mt-active { border-color:rgba(46,204,136,0.4); box-shadow:0 0 12px rgba(46,204,136,0.1); }
.mt-idle { border-color:rgba(var(--accent-rgb),0.2); opacity:0.9; }
/* Mission history rows */
.mt-hist-loading { font-family:var(--font-mono); font-size:14px; color:var(--textsoft); text-align:center; padding:8px; }
.mt-hist-list { display:flex; flex-direction:column; gap:4px; }
.mt-hist-row { background:var(--tint-1); border:1px solid rgba(var(--accent-rgb),0.1); border-radius:6px; padding:8px 10px; cursor:pointer; transition:all 0.15s; }
.mt-hist-row:hover { background:rgba(var(--accent-rgb),0.06); border-color:rgba(var(--accent-rgb),0.25); }
.mt-hist-head { display:flex; justify-content:space-between; align-items:center; }
.mt-hist-planet { font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--success); }
.mt-hist-date { font-family:var(--font-mono); font-size:14px; color:var(--textsoft); }
.mt-hist-summary { display:flex; justify-content:space-between; margin-top:3px; font-family:var(--font-mono); font-size:14px; }
.mt-hist-rew { color:var(--gold); }
.mt-hist-loss { color:var(--danger); }
.mt-hist-ok { color:var(--success); font-size:14px; }
.mt-hist-detail { display:none; margin-top:6px; padding-top:6px; border-top:1px solid rgba(var(--accent-rgb),0.15); }
.mt-hist-detail.open { display:block; }
.mt-hist-det-title { font-family:var(--font-mono); font-size:14px; color:var(--textsoft); margin-bottom:4px; }

/* Recruitment qty/btn */
.ut-qty-btn { width:36px; height:36px; border:1px solid var(--border2); background:var(--surface2); color:var(--accent); font-size:20px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ut-qty-btn:disabled { opacity:0.55; cursor:not-allowed; }
.ut-rec-btn-main { flex:1; height:44px; border:1px solid var(--accent); background:rgba(var(--accent-rgb),0.15); color:var(--accent); font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:1.5px; border-radius:6px; cursor:pointer; }
.ut-rec-btn-main:hover:not(:disabled) { background:rgba(var(--accent-rgb),0.3); }
.ut-rec-btn-main:disabled { opacity:0.55; cursor:not-allowed; }

/* Small mobile: ≤480px */
@media (max-width:480px) {
  .topbar .logo-wrap { display:none; }
  .topbar .tb2-left { gap:5px; max-width:none; flex:0 0 auto; }
  .topbar .tb2-planet-chip { max-width:120px; padding:4px 7px; font-size:11px; }
  .topbar .tb2-pc-coords { display:none; }
  .topbar .tb2-pc-name { max-width:70px; }
  /* Faction badge mobile = icône PNG seule, texte caché (gain de place) */
  .topbar .faction-badge {
    padding:0; min-width:32px; min-height:32px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0; /* masque le texte enfant qui n'a pas de wrapper */
    background:var(--tint-2);
    border:1px solid rgba(var(--accent-rgb),0.30);
  }
  .topbar .faction-badge img { width:18px !important; height:18px !important; }
  /* Ori Crusade widget mobile compact — barre seule, label bouton caché */
  .topbar .ori-crusade-widget { gap:4px; padding:2px 6px; max-width:130px; }
  .topbar .ori-crusade-btn { padding:3px 6px; font-size:10px; }
  .topbar .ori-crusade-btn #oriCrusadeBtnLabel { display:none; }
  .topbar .ori-crusade-btn::after { content:'⚔'; font-size:13px; }
  .topbar .ori-ferveur-bar { width:60px !important; max-width:60px !important; }
  .tb-resources .rb-sep { display:none; }
  .tb-resources {
    gap:4px; padding:0 4px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; flex:1 1 0;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 22px),transparent 100%);
  }
  .tb-resources::-webkit-scrollbar { display:none; }
  /* QW7 — show compact rate inline instead of hiding entirely */
  .rb-rate { display:inline; font-size:9px; opacity:0.7; margin-left:2px; }
  .rb-item { padding:3px 6px; font-size:12px; gap:3px; }
  .rb-val { font-size:14px; min-width:auto; }
  .tb-resources .rb-lbl { font-size:18px; }
  .sec-hdr { height:80px; }
  /* Mes vaisseaux pills — augmenter contraste sur mobile */
  .fms-pill { font-size:13px; padding:5px 9px; }
  .fms-pill b { color:var(--textbright); font-weight:800; }
}

/* Tiny mobile: ≤375px (iPhone SE) */
@media (max-width:375px) {
  .rb-item { padding:2px 5px; font-size:11px; }
  .rb-val { font-size:13px; }
  .tb-resources .rb-lbl { font-size:16px; }
  /* Hide rate text below 375px to keep pills readable */
  .rb-rate { display:none; }
  .topbar .tb2-planet-chip { max-width:100px; }
  .topbar .tb2-pc-name { max-width:50px; }
  .ori-crusade-widget { max-width:140px; }
  .ori-ferveur-bar { width:64px !important; max-width:64px !important; }
}

/* Tablet portrait (481-1024px) : topbar resources + Ori widget compactés
   pour libérer assez de place dans la barre */
@media (min-width:481px) and (max-width:1024px) {
  .topbar { padding: 0 10px; }
  .topbar .logo-wrap { display:none; }
  .topbar .tb2-left { max-width: 320px; gap: 6px; }
  .topbar .tb2-pc-name { max-width:100px; }
  .topbar .tb2-pc-coords { font-size:10px; }
  .topbar .faction-badge { font-size:11px; padding:3px 7px; }
  .topbar .faction-badge img { width:16px !important; height:16px !important; }
  .tb-resources {
    gap:6px; padding:0 6px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    flex:1 1 0; min-width:0;
    /* Indique visuellement le scroll dispo (fade right) */
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 18px),transparent 100%);
  }
  .tb-resources::-webkit-scrollbar { display:none; }
  .tb-resources .rb-sep { display:none; }
  /* QW7 — show compact rate on tablet (was hidden before) */
  .rb-rate { display:inline; font-size:10px; opacity:0.75; margin-left:3px; }
  .rb-item { padding:3px 7px; font-size:12px; }
  .rb-val { font-size:14px; min-width:auto; }
  .tb-resources .rb-lbl { font-size:18px; }
  /* Réduit la barre droite pour libérer l'espace des ressources */
  #topbarSearchBtn .tb2-btn-kbd { display:none; }
  .ori-crusade-widget { max-width:170px; padding:3px 8px 3px 6px; }
  .ori-ferveur-bar { width:80px !important; max-width:80px !important; }
  .ori-crusade-btn { padding:4px 8px; font-size:11px; }
  .user-chip .user-name, .user-chip span:not(.user-icon) { display:none; }
  .user-chip { padding:0 6px; gap:0; }
  .faction-badge { font-size:11px; padding:3px 7px; }
}

/* ═══════════════════════════════════════════════════════════
   PASS COMMANDANT — Marketing nav item (haut de la sidebar)
   ═══════════════════════════════════════════════════════════ */
#lnav_pass {
  position:relative;
  margin:6px 8px 10px;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(224,168,48,0.18) 0%, rgba(126,59,199,0.14) 100%);
  border:1px solid rgba(255,213,107,0.55);
  box-shadow:0 0 0 0 rgba(255,213,107,0.6), inset 0 0 14px rgba(255,213,107,0.08);
  overflow:hidden;
  animation:passPulse 2.6s ease-in-out infinite;
}
#lnav_pass::before {
  content:'';
  position:absolute; top:0; left:-60%;
  width:55%; height:100%;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform:skewX(-20deg);
  animation:passShine 3.8s ease-in-out 1;
  pointer-events:none;
}
#lnav_pass::after {
  content:'NEW';
  position:absolute; top:3px; right:3px;
  font-family:var(--font-display); font-size:8px; font-weight:900;
  letter-spacing:0.6px;
  padding:2px 5px; border-radius:4px;
  background:linear-gradient(135deg, #ff7722, #e0a830);
  color:#0a0f1c;
  box-shadow:0 1px 4px rgba(255,119,34,0.5);
}
#lnav_pass .lnav-lbl {
  font-weight:700 !important;
  text-shadow:0 0 8px rgba(255,213,107,0.5);
}
#lnav_pass .lnav-ico svg {
  filter:drop-shadow(0 0 6px rgba(255,213,107,0.7));
  animation:passStarSpin 6s linear infinite;
}
#lnav_pass:hover {
  transform:translateY(-1px);
  border-color:#ffd56b;
  box-shadow:0 4px 14px rgba(255,213,107,0.35), inset 0 0 18px rgba(255,213,107,0.14);
}
/* Quand le pass est actif, on retire "NEW" et on montre juste le badge doré discret */
.pass-active #lnav_pass::after { content:'✓'; background:linear-gradient(135deg, #4ade80, #22c55e); color:#0a0f1c; }

@keyframes passPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,213,107,0.55), inset 0 0 14px rgba(255,213,107,0.08); }
  50%      { box-shadow:0 0 16px 3px rgba(255,213,107,0.25), inset 0 0 18px rgba(255,213,107,0.14); }
}
@keyframes passShine {
  0%   { left:-60%; }
  60%  { left:120%; }
  100% { left:120%; }
}
@keyframes passStarSpin {
  0%   { transform:rotate(0deg) scale(1); }
  50%  { transform:rotate(180deg) scale(1.12); }
  100% { transform:rotate(360deg) scale(1); }
}

/* ══ SPRINT 15 — Layout global quick wins ══ */
/* T7 Réduire animations — applique si body.no-anim (toggle Settings) */
body.no-anim *,
body.no-anim *::before,
body.no-anim *::after {
  transition-duration:0.01ms !important;
  animation-duration:0.01ms !important;
  animation-iteration-count:1 !important;
}
body.no-anim .stars-layer,
body.no-anim .lp-halo,
body.no-anim .lp-ring-outer,
body.no-anim .lp-ring-inner { animation:none !important; }

/* T4 User chip dropdown menu */
.user-chip { position:relative; }
.uchip-menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:var(--z-overlay-shop);
  min-width:220px; background:rgba(8,14,28,0.96); backdrop-filter:blur(14px);
  border:1px solid rgba(var(--accent-rgb),0.4); border-radius:8px;
  box-shadow:0 8px 32px var(--shade-5), 0 0 16px rgba(var(--accent-rgb),0.15);
  overflow:hidden; display:none; animation:uchipIn 0.18s ease;
}
.uchip-menu.open { display:block; }
@keyframes uchipIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.uchip-head {
  padding:12px 14px; border-bottom:1px solid rgba(var(--accent-rgb),0.25);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.04));
  display:flex; align-items:center; gap:10px;
}
.uchip-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.3), rgba(var(--accent-rgb),0.08));
  border:1.5px solid rgba(var(--accent-rgb),0.6);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--accent); font-family:var(--font-display);
  box-shadow:inset 0 0 8px rgba(var(--accent-rgb),0.2);
}
.uchip-info { flex:1; min-width:0; }
.uchip-name { font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--textbright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uchip-meta { font-family:var(--font-mono); font-size:11px; color:var(--textsoft); margin-top:2px; }
.uchip-rank { color:var(--gold); font-weight:700; }
.uchip-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer; font-family:var(--font-body); font-size:14px;
  color:var(--text); transition:all 0.15s;
  border-top:1px solid rgba(var(--accent-rgb),0.08);
}
.uchip-item:first-of-type { border-top:none; }
.uchip-item:hover { background:rgba(var(--accent-rgb),0.14); color:var(--textbright); padding-left:18px; }
.uchip-item.danger:hover { background:rgba(255,80,80,0.14); color:#ff9090; }
.uchip-ico { width:18px; font-size:14px; text-align:center; flex-shrink:0; }
.uchip-right { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--textsoft); }

/* T8 Mobile tap targets ≥ 44×44 (WCAG AA — feedback_mobile_tablet_check.md) */
@media (max-width:768px) {
  .res-strip button,
  .res-strip .notif-bell,
  .res-strip .logout-btn,
  .res-strip #langToggleBtn,
  .res-strip #topbarSearchBtn,
  .res-strip .tb2-btn,
  .res-strip .user-chip,
  .topbar .tb2-planet-chip { min-height:44px; min-width:44px; padding:8px 10px !important; }
  .uchip-menu { min-width:220px; right:4px; }
  .tb2-planet-menu { min-width:240px; right:auto; }
  .tb2-pm-item { min-height:44px; }
}

/* ── Sprint 5.5 : sur la page Overview, masquer les blocs du right panel qui dupliquent
   ce qui est déjà rendu au centre (Files Actives) et dans la topbar (ressources). ── */
body[data-section="overview"] #rpPlanetView #rpConstruction,
body[data-section="overview"] #rpPlanetView #rpResearch,
body[data-section="overview"] #rpPlanetView #rpTraining,
body[data-section="overview"] #rpPlanetView .rp-sec-lbl,
body[data-section="overview"] #rpPlanetView .rp-res-cards {
  display: none !important;
}
/* Overview cache aussi le wrapper details (sinon le triangle reste visible) */
body[data-section="overview"] #rpPlanetView .rp-collap {
  display: none !important;
}

/* Audit UI/UX #3 medium (e) — Cité densité accordion : Ressources collapsible */
.rp-collap { margin: 0; padding: 0; }
.rp-collap > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 4px;
  user-select: none;
  transition: color 120ms;
}
.rp-collap > summary::-webkit-details-marker { display: none; }
.rp-collap > summary::after {
  content: '▾';
  font-size: 10px;
  color: var(--textsoft);
  transition: transform 180ms ease;
  margin-left: 8px;
}
.rp-collap:not([open]) > summary::after {
  transform: rotate(-90deg);
}
.rp-collap > summary:hover { color: var(--accent); }
.rp-collap[open] > summary { color: var(--text); }