/* ══════════════════════════════════════════════════════════
   PORTE DES ÉTOILES — STARGATE COMMAND INTERFACE
   Glassmorphism Refonte v3 (Combat Hub tabs)
   ══════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
#sf_gate {
  --gate-pad-xs: 6px;
  --gate-pad-sm: 10px;
  --gate-pad-md: 14px;
  --gate-pad-lg: 18px;
  --gate-radius-sm: 6px;
  --gate-radius: 10px;
  --gate-radius-lg: 14px;
  --gate-title-size: 12px;
  --gate-title-spacing: 2px;
  --gate-line: 1px solid var(--tint-3);
  --gate-line-strong: 1px solid var(--tint-5);
  --gate-bg-soft: rgba(255,255,255,0.025);
  --gate-bg-mid: rgba(8,12,30,0.50);
  --gate-bg-strong: rgba(4,8,20,0.85);
}

/* ── VFX polish 30/04 : flash + screen-shake au moment du kawoosh ── */
.gate-flash-overlay {
  position:fixed; inset:0; z-index:var(--z-overlay-fullscreen); pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(150,210,255,0.85) 0%, rgba(80,140,220,0.30) 35%, rgba(0,0,0,0) 70%);
  opacity:0; mix-blend-mode:screen;
  animation:gateFlashIn 0.42s ease-out forwards;
}
@keyframes gateFlashIn {
  0%   { opacity:0; }
  18%  { opacity:1; }
  100% { opacity:0; }
}
@keyframes gateShake {
  0%,100% { transform:translate(0,0); }
  10% { transform:translate(-3px,-2px); }
  20% { transform:translate(4px,-1px); }
  30% { transform:translate(-2px,3px); }
  40% { transform:translate(3px,2px); }
  50% { transform:translate(-4px,-1px); }
  60% { transform:translate(2px,3px); }
  70% { transform:translate(-3px,-2px); }
  80% { transform:translate(2px,-3px); }
  90% { transform:translate(-2px,2px); }
}
.gate-wrap.gate-blast { animation:gateShake 0.55s cubic-bezier(.36,.07,.19,.97); }

/* Symbole géant central pendant la dial — chaque chevron locké = un pop théâtral */
.gate-big-sym {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none; z-index:30;
  animation:gateBigSymPop 0.72s cubic-bezier(.34,1.56,.64,1) forwards;
}
.gate-big-sym .gbs-sym {
  font-family:var(--font-display);
  font-size:140px; line-height:1;
  color:#ffd766;
  text-shadow:
    0 0 20px rgba(255,200,80,0.95),
    0 0 50px rgba(255,140,40,0.7),
    0 0 90px rgba(255,100,20,0.45);
  font-weight:700;
}
.gate-big-sym .gbs-num {
  font-family:var(--font-display);
  font-size:13px; letter-spacing:4px;
  color:rgba(255,210,140,0.85);
  margin-top:6px;
  text-shadow:0 0 10px rgba(255,180,80,0.6);
}
@keyframes gateBigSymPop {
  0%   { opacity:0; transform:scale(0.3); }
  18%  { opacity:1; transform:scale(1.1); }
  35%  { transform:scale(1); }
  85%  { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .gate-flash-overlay, .gate-wrap.gate-blast,
  .gate-big-sym { animation:none !important; }
  .gate-big-sym { display:none; }
}

/* ── Overlay victoire : loot en gros + particules cristal ── */
.gate-combat-overlay .gco-loot-row {
  display:flex; justify-content:center; gap:22px;
  margin:14px 0 16px; flex-wrap:wrap;
  position:relative; z-index:2;
}
.gate-combat-overlay .gco-loot {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:22px; font-weight:700;
  color:#5ad88f; letter-spacing:0.5px;
  text-shadow:0 0 14px rgba(90,216,143,0.5);
}
.gate-combat-overlay .gco-loot-ico { font-size:18px; }
.gate-combat-overlay .gco-loot-val { font-variant-numeric:tabular-nums; }
.gate-combat-overlay .gco-particles {
  position:absolute; inset:0; pointer-events:none; overflow:visible;
}
.gco-particle {
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--col, #ffd766);
  box-shadow:0 0 8px var(--col, #ffd766);
  opacity:0;
  animation:gcoParticleBurst 1.1s var(--delay, 0s) cubic-bezier(.18,.7,.31,1) forwards;
}
@keyframes gcoParticleBurst {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  15%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.6); }
}

/* ── Grid layout (Combat Hub v3) ──
   Le centre (porte 3D) est borné pour ne pas dévorer l'espace —
   la sidebar droite (combat hub) est élargie pour accueillir les 3 tabs. */
#sf_gate { display:none; }
#sf_gate.active {
  display:grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: minmax(460px, 580px) minmax(420px, 1fr) minmax(460px, 580px);
  gap:0;
  width:100%;
  min-width:0; overflow:hidden;
}
/* Row assignations explicites : sinon auto-flow place les gpanels en row 2 et écrase le bandeau.
   Desktop / tablette landscape uniquement — en dessous de 1024px on stack verticalement. */
#sf_gate.active > .gate-mode-bar { grid-row:1; grid-column:1 / -1; }
@media (min-width:1024px) {
  #sf_gate.active > .gpanel:not(.gpanel-r) { grid-row:3; }
  #sf_gate.active > .gate-center { grid-row:3; }
  #sf_gate.active > .gpanel.gpanel-r { grid-row:3; }
}
.gate-crusade-banner {
  grid-column:1 / -1; grid-row:2;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:8px 18px;
  background:linear-gradient(90deg, rgba(180,40,20,0.15), rgba(255,140,40,0.20), rgba(180,40,20,0.15));
  border-bottom:1px solid rgba(255,140,40,0.45);
  box-shadow:0 2px 14px rgba(255,140,40,0.18) inset, 0 -1px 0 rgba(255,200,120,0.15) inset;
  font-family:var(--font-display); font-size:13px; letter-spacing:1.5px;
  color:#ffc89b; text-shadow:0 0 10px rgba(255,160,60,0.55);
  animation:gateCrusadePulse 3.2s ease-in-out infinite;
}
.gate-crusade-banner .gcb-ico {
  font-size:22px; line-height:1;
  filter:drop-shadow(0 0 10px rgba(255,180,80,0.85));
  animation:gateCrusadeIcon 2.4s ease-in-out infinite;
}
.gate-crusade-banner .gcb-label { font-weight:700; color:#ffd9a0; letter-spacing:2.5px; }
.gate-crusade-banner .gcb-time {
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.5px;
  padding:2px 9px; border-radius:5px;
  background:rgba(255,140,40,0.18); border:1px solid rgba(255,180,80,0.35);
  color:#ffe0b8;
}
.gate-crusade-banner .gcb-bonus { font-weight:700; color:#ffe0a8; }
@keyframes gateCrusadePulse {
  0%,100% { box-shadow:0 2px 14px rgba(255,140,40,0.18) inset, 0 -1px 0 rgba(255,200,120,0.15) inset; }
  50%     { box-shadow:0 2px 24px rgba(255,160,60,0.32) inset, 0 -1px 0 rgba(255,210,140,0.22) inset; }
}
@keyframes gateCrusadeIcon {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.12); filter:drop-shadow(0 0 16px rgba(255,200,100,1)); }
}
@media (prefers-reduced-motion: reduce) {
  .gate-crusade-banner, .gate-crusade-banner .gcb-ico { animation:none; }
}
/* Desktop étroit : porte centrée, layout 3 colonnes resserré (min ≈1220px).
   Borne montée à 1599px (au lieu de 1280) : les media queries Gate sont
   basées sur le VIEWPORT mais la largeur réelle du conteneur Gate est
   amputée de la sidebar (~260px). Sur un 14" (~1512px viewport → conteneur
   ~1252px), le layout de base (460+420+460=1340px) débordait → panneau
   droit (troupes) coupé (retour survey B10). À ≥1600px le conteneur
   (~1340px) accueille le layout de base. */
@media (max-width:1599px) and (min-width:769px) {
  #sf_gate.active {
    grid-template-columns: minmax(420px, 500px) minmax(380px, 1fr) minmax(420px, 500px);
    max-width:none;
  }
}
@media (max-width:1100px) and (min-width:769px) {
  #sf_gate.active {
    grid-template-columns: minmax(380px, 460px) minmax(320px, 1fr) minmax(380px, 460px);
    max-width:none;
  }
}
/* Mobile / tablet portrait : tout stack verticalement (gauche → centre → droite) */
@media (max-width:1023px) {
  #sf_gate.active {
    display:flex; flex-direction:column;
    overflow-y:auto; overflow-x:hidden;
  }
  #sf_gate.active .gate-mode-bar { border-radius:0; }
  #sf_gate.active .gpanel,
  #sf_gate.active .gate-center,
  #sf_gate.active .gpanel.gpanel-r { width:100%; max-width:100%; flex-shrink:0; }
  #sf_gate.active .gpanel { border-radius:0; border-left:none; border-right:none; }
  #sf_gate.active .gpanel.gpanel-r {
    border-radius:0; border-left:none;
    max-height:none;
    border-top:1px solid var(--tint-4);
  }
  /* Tabs prennent toute la largeur */
  .gprt-bar { padding:var(--gate-pad-md); }
  .gprt-tab { padding:12px 8px; font-size:12px; }
  /* Pane height non-bornée en mobile (le viewport scroll global) */
  .gprt-stack { overflow:visible; padding:0 var(--gate-pad-md) var(--gate-pad-md); }
  .gprt-pane { height:auto; overflow:visible; }
}
/* Tab labels : icônes seules en sidebar étroite */
@media (max-width:1100px) and (min-width:1024px) {
  .gprt-tab > span { display:none; }
  .gprt-tab { padding:11px 4px; font-size:14px; }
}

/* ── Mode bar (row 1, full width) ── */
.gate-mode-bar {
  grid-column: 1 / -1; grid-row: 1;
  display:flex; align-items:center; gap:4px;
  padding:10px 20px; height:56px;
  background:rgba(8,12,30,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--tint-3);
  border-bottom:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:16px 16px 0 0;
}
.gmt {
  flex:0 1 auto; padding:8px 14px;
  font-family:var(--font-display); font-size:11px;
  font-weight:700; letter-spacing:1.5px; border-radius:10px;
  cursor:pointer; transition:all 0.25s;
  border:1px solid transparent; color:var(--textsoft);
  background:transparent; text-align:center;
  position:relative; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.gmt.active {
  border-color:transparent; color:var(--accent);
  background:rgba(var(--accent-rgb),0.08);
}
.gmt.active::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px;
  background:var(--accent); border-radius:2px;
}
.gmt:hover:not(.active) { border-color:rgba(255,255,255,0.18); color:var(--textmid); background:var(--tint-4); }
.gmt.pvp-tab.active {
  border-color:transparent; color:#ff5555;
  background:rgba(255,60,60,0.08);
}
.gmt.pvp-tab.active::after { background:#ff5555; }
/* Legacy class kept for JS compat */
.gate-mode-tabs { display:contents; }

/* Mode bar timer (mission countdown) */
.gmt-timer {
  font-family:var(--font-mono);
  font-size:12px; color:var(--warn);
  margin-left:4px;
}
.gmt-timer:empty { display:none; }

/* SIM button right-aligned */
.gmt.gmt-sim { margin-left:auto; }

/* SOS badge auto-hide if empty */
.gate-badge:empty { display:none; }

/* Mission filter Pégase tab is hidden by default until unlocked */
.gmf.pegasus-tab[style*="display:none"] { display:none !important; }

/* Crusade banner default hidden — JS toggles via .visible class or inline display */
#gateCrusadeBanner:empty { display:none !important; }

/* Compact icon-only gate buttons (skip anim, mute) */
.gbtn.gbtn-icon {
  min-width:36px;
  padding:0 10px;
  font-size:14px;
  opacity:0.75;
}
.gbtn.gbtn-icon:hover { opacity:1; }

/* ── Filtres + tri liste destinations (Sprint 7 T5) ── */
.gate-filters-bar {
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:10px;
}
.gf-chips {
  display:flex; flex-wrap:wrap; gap:6px;
}
.gf-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; min-height:32px;
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase;
  border-radius:7px; cursor:pointer; transition:all 0.18s ease;
  border:1px solid var(--tint-4); color:var(--textsoft);
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  white-space:nowrap;
}
.gf-chip > svg { opacity:0.8; }
.gf-chip:hover:not(.active) {
  color:var(--text);
  border-color:rgba(255,255,255,0.20);
  background:linear-gradient(180deg, var(--tint-4), var(--tint-1));
  transform:translateY(-1px);
}
.gf-chip.active {
  color:var(--accent);
  border-color:rgba(var(--accent-rgb),0.45);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06));
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.18),
             inset 0 1px 0 var(--tint-4);
}
.gf-chip.active > svg { opacity:1; }
.gf-row2 { display:flex; gap:6px; }
.gf-search {
  flex:1; padding:8px 12px;
  font-family:var(--font-mono); font-size:13px;
  background:rgba(4,8,20,0.85);
  border:1px solid var(--tint-4);
  border-radius:7px; color:var(--text); outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.gf-search:focus {
  border-color:rgba(var(--accent-rgb),0.45);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.10);
}
.gf-sort {
  padding:8px 12px;
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:0.8px; text-transform:uppercase;
  background:rgba(4,8,20,0.85);
  border:1px solid var(--tint-4);
  border-radius:7px; color:var(--text); outline:none; cursor:pointer;
  transition:border-color 0.15s;
}
.gf-sort:hover { border-color:rgba(255,255,255,0.18); }
.gf-sort:focus { border-color:rgba(var(--accent-rgb),0.45); }

/* ── Mission filter sub-bar (Voie Lactée / Pégase / Explorer) ──
   A1 (audit Porte 17/06) : passées du contrôle segmenté boxé au style CHIP,
   cohérent avec la barre de filtres `.gf-chip` juste en dessous. */
.gate-mission-filter {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-bottom:8px;
}
.gmf {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; min-height:32px;
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase;
  border-radius:7px; cursor:pointer; transition:all 0.18s ease;
  border:1px solid var(--tint-4); color:var(--textsoft);
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  white-space:nowrap;
}
.gmf:hover:not(.active) {
  color:var(--text); border-color:rgba(255,255,255,0.20);
  background:linear-gradient(180deg, var(--tint-4), var(--tint-1));
  transform:translateY(-1px);
}
.gmf.active {
  color:var(--accent); border-color:rgba(var(--accent-rgb),0.45);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06));
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.18), inset 0 1px 0 var(--tint-4);
}

/* ── SIM/EXPLOITS/JOURNAL/ÉVÉNEMENT (utilitaires) dans la mode bar ── */
/* 24/05 — 4 boutons utilitaires depuis P3/P4 : réduits pour éviter le wrap sur 2 lignes. */
.gmt.gmt-sim {
  opacity:0.75; border:1px solid rgba(var(--accent-rgb),0.25);
  background:rgba(var(--accent-rgb),0.04);
  padding:6px 9px; font-size:10px; letter-spacing:1px; gap:4px;
}
.gmt.gmt-sim:hover { opacity:1; border-color:rgba(var(--accent-rgb),0.5); background:rgba(var(--accent-rgb),0.10); color:var(--accent); }
.gate-center { position:relative; }

/* ══ Sprint 7 — Typo gate agrandie (plus lisible) ══ */
#sf_gate .gp-title { font-size:14px; letter-spacing:1.5px; padding-bottom:10px; white-space:nowrap; }
#sf_gate .pr-name { font-size:14px; font-weight:700; }
#sf_gate .pr-sub { font-size:12px; }
#sf_gate .pr-threat { font-size:11px; font-weight:700; letter-spacing:0.5px; }
#sf_gate .planet-cd-badge { font-size:11px; }
#sf_gate .grw-title { font-size:13px; letter-spacing:2px; }
/* Sprint 7 plan-T8 : highlight vert quand reward intéressante */
.gate-rewards.grw-hot { border:1px solid rgba(76,217,100,0.35); background:rgba(76,217,100,0.04); border-radius:10px; padding:6px 8px; box-shadow:0 0 12px rgba(76,217,100,0.15); }
.gate-rewards.grw-hot .grw-title { color:#4cd964; }
.gate-rewards.grw-hot .grw-title::after { content:' 💎'; }
#sf_gate .grw-lbl { font-size:13px; }
#sf_gate .grw-val { font-size:13px; font-weight:700; }
#sf_gate .grw-row { padding:6px 8px; }
#sf_gate .gts-title { font-size:12px; letter-spacing:2.5px; }
#sf_gate .er-label { font-size:12px; }
#sf_gate .er-val { font-size:14px; font-weight:700; }
#sf_gate .mc-text { font-size:13px; line-height:1.5; }
#sf_gate .mc-lbl { font-size:11px; letter-spacing:2px; }
#sf_gate .dest-name { font-size:22px; letter-spacing:3px; }
#sf_gate .dest-coords { font-size:12px; letter-spacing:1.5px; }
#sf_gate .gmt { font-size:12px; padding:9px 16px; letter-spacing:1.8px; }
#sf_gate .gmf { font-size:13px; padding:9px 8px; letter-spacing:0.4px; }
#sf_gate .gf-chip { font-size:12px; padding:8px 14px; }
#sf_gate .gf-search { font-size:14px; padding:9px 14px; }
#sf_gate .gf-sort { font-size:12px; padding:9px 14px; }
#sf_gate .gbtn { font-size:13px; letter-spacing:1.8px; }
#sf_gate .sq-lbl { font-size:12px; letter-spacing:2px; }
#sf_gate .sq-sym { width:36px; height:36px; font-size:15px; }

/* ── Side panels (glassmorphism) ── */
.gpanel {
  grid-row:2; grid-column:1;
  background:rgba(8,12,30,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--tint-3);
  border-radius:0 0 0 16px;
  padding:14px; display:flex; flex-direction:column; gap:12px;
  overflow:hidden; position:relative;
  min-width:0;
}
.gpanel::before { display:none; }
.gpanel::after { display:none; }

/* Destination lists fill available space */
#planetList,
#pvpPlayerList,
#gateSosPanel,
#pegasusPlanetList,
#explorePlanetList {
  flex:1; overflow-y:auto; min-height:0;
}

.gpanel-r {
  grid-row:2; grid-column:3;
  border-radius:0 0 16px 0;
  border-left:1px solid var(--tint-3);
  overflow:hidden;
  min-width:0;
  display:flex; flex-direction:column;
  padding:0;
}

.gp-title {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  color:var(--textsoft); letter-spacing:3px; text-transform:uppercase;
  padding-bottom:10px; margin-bottom:6px;
  border-bottom:1px solid var(--tint-3);
  display:flex; align-items:center; gap:8px;
}
.gp-title::before { display:none; }

/* ── Planet entries (Sprint 7 T6 : compact rows ~48px) ── */
.planet-row {
  display:block;
  padding:9px 12px; min-height:42px; border-radius:10px;
  border:1px solid var(--tint-3);
  cursor:pointer; transition:all 0.2s;
  background:linear-gradient(90deg, var(--tint-1), rgba(255,255,255,0.01));
  position:relative;
  margin-bottom:4px;
}
.pr-top {
  display:flex; align-items:center; gap:9px;
}
/* Sprint 7 T6 : détails déplacés vers panneau droit — inline hidden */
.pr-details { display:none; }
.planet-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:10px 0 0 10px; background:transparent; transition:all 0.25s;
}
@media (hover: hover) {
  .planet-row:hover {
    background:linear-gradient(90deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.03));
    border-color:rgba(var(--accent-rgb),0.25);
    transform:translateX(4px);
    box-shadow:0 2px 12px var(--shade-1);
  }
  .planet-row:hover::before { background:rgba(var(--accent-rgb),0.4); }
}
/* Mobile/touch: bypass :hover (it consumes the first tap), use :active for feedback */
.planet-row:active {
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.08));
  transform:translateX(2px);
}
.planet-row.sel {
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05));
  border-color:rgba(var(--accent-rgb),0.50);
  box-shadow:0 0 20px rgba(var(--accent-rgb),0.15), inset 0 0 24px rgba(var(--accent-rgb),0.05);
}
.planet-row.sel::before { background:var(--accent); box-shadow:0 0 14px var(--accent); }
.pr-dot {
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 8px currentColor, 0 0 16px currentColor;
  animation:prDotPulse 3s ease-in-out infinite;
}
@keyframes prDotPulse { 0%,100%{box-shadow:0 0 6px currentColor} 50%{box-shadow:0 0 12px currentColor, 0 0 20px currentColor} }
.pr-name { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--textbright); letter-spacing:0.5px; }
.pr-sub { font-size:12px; color:var(--textsoft); margin-top:2px; }
.pr-threat {
  margin-left:auto; font-family:var(--font-display); font-size:12px;
  padding:4px 10px; border-radius:5px; border:1px solid; font-weight:700;
  letter-spacing:1.5px; text-shadow:0 0 10px currentColor;
  text-transform:uppercase;
}
.tn { color:#44ffaa; border-color:rgba(68,255,170,.40); background:rgba(68,255,170,.10); box-shadow:0 0 10px rgba(68,255,170,0.12); }
.tl { color:#88cc66; border-color:rgba(136,204,102,.35); background:rgba(136,204,102,.08); }
.tm { color:#ffbb44; border-color:rgba(255,187,68,.40); background:rgba(255,187,68,.10); box-shadow:0 0 10px rgba(255,187,68,0.12); }
.th { color:#ff5555; border-color:rgba(255,85,85,.45); background:rgba(255,85,85,.12); box-shadow:0 0 12px rgba(255,60,60,0.15); animation:threatPulse 2s ease-in-out infinite; }
.tx { color:#a855f7; border-color:rgba(168,85,247,.50); background:rgba(168,85,247,.15); box-shadow:0 0 14px rgba(168,85,247,0.20); animation:nightmarePulse 1.5s ease-in-out 1; }
.ta { color:var(--textbright); border-color:rgba(94,255,242,.60); background:linear-gradient(135deg,rgba(94,255,242,.22),rgba(255,255,255,.12)); text-shadow:0 0 6px #5efff2, 0 0 12px rgba(94,255,242,0.6); box-shadow:0 0 16px rgba(94,255,242,0.45), 0 0 6px rgba(255,255,255,0.3) inset; animation:ascendedPulse 1.3s ease-in-out infinite; }
@keyframes threatPulse { 0%,100%{box-shadow:0 0 8px rgba(255,60,60,0.12)} 50%{box-shadow:0 0 20px rgba(255,60,60,0.3), 0 0 4px rgba(255,60,60,0.5) inset} }
@keyframes nightmarePulse { 0%,100%{box-shadow:0 0 8px rgba(168,85,247,0.15)} 50%{box-shadow:0 0 24px rgba(168,85,247,0.4), 0 0 6px rgba(168,85,247,0.6) inset} }
@keyframes ascendedPulse { 0%,100%{box-shadow:0 0 10px rgba(94,255,242,0.30), 0 0 4px var(--tint-10) inset} 50%{box-shadow:0 0 30px rgba(94,255,242,0.75), 0 0 10px rgba(255,255,255,0.55) inset} }

/* ── Chevron address card ── */
.chev-card {
  background:rgba(8,12,30,0.70);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:12px; padding:16px; position:relative; overflow:hidden;
  box-shadow:0 4px 20px var(--shade-1);
}
.chev-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.6), transparent);
}
.chev-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 10%, rgba(var(--accent-rgb),0.15), transparent 90%);
}
.cc-lbl { font-family:var(--font-display); font-size:11px; color:rgba(var(--accent-rgb),0.8); letter-spacing:1.5px; margin-bottom:10px; text-transform:uppercase; text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.chevs { display:flex; gap:7px; }
.chev {
  width:40px; height:40px; border-radius:7px;
  border:1px solid rgba(var(--accent-rgb),0.25); background:rgba(4,8,20,0.85);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:15px;
  color:var(--textsoft); transition:all 0.3s;
  box-shadow:inset 0 1px 3px var(--shade-1);
}
.chev.active {
  border-color:var(--gold); color:var(--gold);
  background:rgba(224,168,48,0.18);
  box-shadow:0 0 18px rgba(224,168,48,0.6), 0 0 40px rgba(224,168,48,0.15), inset 0 0 10px rgba(224,168,48,0.12);
  animation:cl .4s ease;
  text-shadow:0 0 8px rgba(224,168,48,0.5);
}
.chev.locked {
  border-color:var(--accent); color:var(--accent);
  background:rgba(var(--accent2-rgb),0.14);
  box-shadow:0 0 16px rgba(var(--accent-rgb),0.5), inset 0 0 8px rgba(var(--accent-rgb),0.08);
  text-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
}

/* ── Gate center ── */
.gate-center {
  grid-row:2; grid-column:2;
  display:flex; flex-direction:column; align-items:center;
  padding:20px 20px; gap:4px; position:relative; overflow-y:auto; overflow-x:hidden;
  background:rgba(2,4,12,1);
  min-width:0;
}
.gate-center::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../img/porte_bg.png') center 30% / cover no-repeat;
  opacity:0.45; pointer-events:none;
  filter:brightness(1.0) saturate(1.15);
}
.gate-center::after {
  content:''; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(to bottom, transparent 50%, rgba(2,4,12,0.45) 100%),
    radial-gradient(ellipse at center 30%, rgba(var(--accent-rgb),0.04), transparent 60%);
  pointer-events:none;
}
.gate-center > * { position:relative; z-index:1; }

/* Stars BG */
.gate-stars { position:absolute; inset:0; overflow:hidden; pointer-events:none; }

/* ══ GATE VISUAL ══ */
.gate-wrap {
  position:relative; width:100%; max-width:420px; aspect-ratio:1/1;
  margin:0 auto; flex-shrink:0;
  /* Rework 08/05/2026 : 3 drop-shadows bleus calés sur le GIF lumineux remplacés
     par une simple ombre portée acier. La stargate 3D mate métallique ne doit
     pas projeter de halo bleu fantôme. */
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.65));
  /* Bg gif retiré 08/05/2026 — remplacé par canvas Three.js (sgc-gate-3d.js).
     Fallback gif conservé pour prefers-reduced-motion (le module ne mount pas
     dans ce cas et le bg ci-dessous prend le relais). */
  background:url('../img/stargate.gif') center/contain no-repeat;
  mask:radial-gradient(circle, white 62%, rgba(255,255,255,0.6) 66%, transparent 70%);
  -webkit-mask:radial-gradient(circle, white 62%, rgba(255,255,255,0.6) 66%, transparent 70%);
  transition: max-width 0.5s ease;
}
/* Quand le canvas 3D Three.js est monté (classe .g-3d-cvs), on cache le bg gif
   pour éviter les deux superposés et on retire le mask radial-gradient qui
   floutait les bords du modèle 3D. Le canvas particles (.part-cvs) et le
   vortex 2D (.vortex-cvs) ne déclenchent pas cette règle — sinon le fallback
   gif disparaissait alors que la porte 3D n'était pas montée (incident
   prefers-reduced-motion 11/05/2026). */
.gate-wrap:has(canvas.g-3d-cvs) {
  background: none;
  mask: none;
  -webkit-mask: none;
}
/* Sprint 7 T4 expansion désactivée 08/05/2026 : avec la stargate 3D, le saut
   300→380px déclenche un resize du canvas WebGL qui crée un flash/disparition
   visible au démarrage de la composition. La taille fixe 300px évite ça. */
/* .gate-wrap.expanded { max-width:380px; } */
/* body.gate-large-default .gate-wrap { max-width:380px; } */
/* body.gate-large-default .gate-wrap.expanded { max-width:420px; } */
/* Mobile : cap dur à la largeur du viewport pour éviter le débord du
   ring (qui s'étend en absolute au-delà du gate-wrap si trop grand). */
@media (max-width:480px) {
  .gate-wrap, .gate-wrap.expanded,
  body.gate-large-default .gate-wrap,
  body.gate-large-default .gate-wrap.expanded { max-width:min(92vw, 320px); }
  .sq-syms { flex-wrap:wrap; gap:4px; justify-content:center; }
  .sq-sym { width:30px; height:30px; font-size:12px; }
  .part-cvs, #partCvs { max-width:100% !important; width:100% !important; }
}

/* ══ M6 Bonus — gate-wrap respire sur iPhone Pro Max (390-499px) ══
   À 320px on gaspille 60-80px d'espace horizontal. On laisse 380px max. */
@media (min-width: 390px) and (max-width: 499px) {
  .gate-wrap,
  body.gate-large-default .gate-wrap.expanded {
    max-width: min(92vw, 380px) !important;
  }
}

/* ══ M6 P0-12c — Gate mode-bar : masquer label "SIM" <430px ══
   Le bouton "🔬 SIM" contient texte+emoji direct. On utilise font-size:0
   pour masquer le texte et un ::before pour réinjecter juste l'emoji. */
@media (max-width: 430px) {
  .gmt.gmt-sim {
    font-size: 0 !important;
    padding: 6px 10px !important;
  }
  .gmt.gmt-sim::before {
    content: "🔬";
    font-size: 16px;
    line-height: 1;
  }
  /* Compact tous les onglets pour gagner de la place */
  .gate-mode-bar .gmt {
    padding: 6px 8px !important;
  }
}

/* Permanent ambient haze — hidden (GIF replaces) */
.g-ambient { display:none; }
.g-glow { display:none; }
.g-glow.on { display:none; }
.g-reflect { display:none; }
.g-frame { display:none; }
.g-bevel { display:none; }
.g-outer { display:none; }
.g-glyphs { display:none; }
.g-glyph { display:none; }

/* Rotating chevron ring — overlay on GIF
   Retiré 08/05/2026 : la stargate 3D qui tourne pendant la composition (sgc-gate-3d.js
   setState 'composing') remplace cet anneau CSS qui débordait de 35px et faisait doublon. */
.g-ring { display: none !important; }
._dead_g-ring {
  position:absolute; inset:5%; border-radius:50%;
  border:none;
  animation:gr 18s linear infinite;
  z-index:3;
  background:none;
  box-shadow:none;
}
.g-ring.sp   { animation-duration:2.5s; }
.g-ring.fast { animation-duration:0.5s; }

/* Chevron glow spots (fixed, overlay GIF chevrons) */
.g-chevrons {
  position:absolute; inset:0; z-index:4; pointer-events:none;
}
.g-chev {
  position:absolute; width:30px; height:30px;
  margin-left:-15px; margin-top:-15px;
  border-radius:50%;
  background:transparent;
  transition:background 0.3s, box-shadow 0.3s;
}
.g-chev.lit {
  background:radial-gradient(circle, rgba(255,220,60,0.85) 0%, rgba(240,180,30,0.5) 40%, transparent 70%);
  box-shadow:
    0 0 18px rgba(255,200,50,0.9),
    0 0 40px rgba(245,180,40,0.5),
    0 0 60px rgba(255,200,50,0.2);
  animation:chevGlow 0.55s ease-in-out infinite;
}
@keyframes chevGlow {
  0%,100% { box-shadow:0 0 14px rgba(255,200,50,0.7), 0 0 30px rgba(245,180,40,0.35); }
  50% { box-shadow:0 0 22px rgba(255,220,60,1), 0 0 50px rgba(245,180,40,0.6), 0 0 70px rgba(255,200,50,0.25); }
}

.g-inner-edge { display:none; }

/* Chevrons HTML retirés 08/05/2026 : la stargate 3D qui tourne pendant la composition
   suffit comme feedback visuel. Les chevrons HTML par-dessus faisaient doublon visuel.
   On garde le wrapper pour ne pas casser les sélecteurs JS qui font querySelectorAll. */
.g-chevrons { display: none; }

/* Event horizon container — inset 18.5% (recalibré 08/05/2026 après passage du
   wrap de 300px à 420px via panel debug user). Iris = 63% du wrap. */
.g-inner {
  position:absolute; inset:18.5%; border-radius:50%;
  background:radial-gradient(circle, rgb(1,3,14) 0%, rgb(2,6,24) 45%, rgb(6,14,48) 70%, rgb(10,24,68) 100%);
  border:none;
  overflow:hidden;
  /* Box-shadow inset utilise les variables --gate-tint* pour matcher la teinte
     du mode actif (PvE bleu / PvP rouge / SOS orange / Pégase violet / Explore cyan).
     Fallback bleu si aucune teinte définie. */
  box-shadow:
    inset 0 0 80px rgba(0,0,15,1),
    inset 0 0 40px var(--gate-tint, rgba(4,14,60,0.8)),
    inset 0 0 15px var(--shade-5);
  transition:background 0.6s ease, box-shadow 0.6s ease;
  /* Breathing animation retirée 08/05/2026 : avec la stargate 3D mate qui ne
     pulse pas, le scale 1.018x du g-inner faisait sortir l'iris du diamètre
     intérieur du modèle 3D à chaque pulse. Animation gateIdleBreath conservée
     en keyframes pour les variables CSS qui en pickent les couleurs. */
}
/* Playtest 10/06 : sans la Porte 3D (toggle sgc_gate_no_3d, WebGL absent, échec
   de chargement), le disque sombre .g-inner — calibré pour remplir l'anneau du
   modèle 3D — atterrissait en plein sur l'illustration 2D de secours. La classe
   g-3d-ready est posée/retirée par sgc-gate-3d.js au mount/dispose. */
.gate-wrap:not(.g-3d-ready) .g-inner {
  background: transparent;
  box-shadow: none;
}
.g-inner.vortex-visible {
  background:transparent;
  box-shadow:none;
  /* Le breathing s'arrête quand le vortex est ouvert (le shader prend le relais) */
  animation:none;
  /* Étend la zone du vortex au diamètre réel du trou intérieur du modèle 3D
     (validé visuellement 08/05/2026 : iris fermé reste 21.5% inset, mais quand
     l'iris s'ouvre et que le vortex s'allume, on monte à 12% inset = 76% du
     wrap pour combler tout l'espace jusqu'au bord du ring sculpté). */
  inset: 12% !important;
  transition: inset 0.4s ease;
}
/* Le canvas vortex est créé display:none par sgc-gate-vfx.js. Il devient
   visible UNIQUEMENT quand .g-inner reçoit la classe .vortex-visible (= portail
   verrouillé / activateVortex). Sans cette règle, le shader v4 PRO + glints
   ne s'affichent jamais. */
.g-inner.vortex-visible .vortex-cvs {
  display: block !important;
}
@keyframes gateIdleBreath {
  0%, 100% {
    transform:scale(1);
    box-shadow:
      inset 0 0 80px rgba(0,0,15,1),
      inset 0 0 40px var(--gate-tint, rgba(4,14,60,0.8)),
      inset 0 0 15px var(--shade-5);
  }
  50% {
    transform:scale(1.018);
    box-shadow:
      inset 0 0 90px rgba(0,0,18,1),
      inset 0 0 55px var(--gate-tint-bright, rgba(8,28,90,0.95)),
      inset 0 0 22px var(--gate-tint-soft, rgba(20,60,140,0.35));
  }
}

/* Teintes contextuelles : la porte change d'ambiance selon le mode actif.
   Variables var(--gate-tint*) pickées par le @keyframes gateIdleBreath. */
#sf_gate.gate-tint-pve     { --gate-tint:rgba(4,14,60,0.8);    --gate-tint-bright:rgba(8,28,90,0.95);   --gate-tint-soft:rgba(20,60,140,0.35); }
#sf_gate.gate-tint-pvp     { --gate-tint:rgba(60,8,8,0.85);    --gate-tint-bright:rgba(120,20,20,0.95); --gate-tint-soft:rgba(220,60,60,0.30); }
#sf_gate.gate-tint-sos     { --gate-tint:rgba(70,40,5,0.85);   --gate-tint-bright:rgba(160,90,15,0.95); --gate-tint-soft:rgba(255,150,40,0.32); }
#sf_gate.gate-tint-pegasus { --gate-tint:rgba(40,15,70,0.85);  --gate-tint-bright:rgba(95,40,170,0.95); --gate-tint-soft:rgba(180,100,255,0.28); }
#sf_gate.gate-tint-explore { --gate-tint:rgba(8,50,50,0.82);   --gate-tint-bright:rgba(20,110,110,0.92);--gate-tint-soft:rgba(60,200,200,0.30); }
/* Halo subtil derrière le wrapper, teinté selon le mode actif (08/05/2026 :
   étendu à PvE pour donner du volume à la stargate 3D mate sans débordement excessif). */
#sf_gate.gate-tint-pve     .gate-wrap::after,
#sf_gate.gate-tint-pvp     .gate-wrap::after,
#sf_gate.gate-tint-sos     .gate-wrap::after,
#sf_gate.gate-tint-pegasus .gate-wrap::after,
#sf_gate.gate-tint-explore .gate-wrap::after {
  content:''; position:absolute; inset:-30px; border-radius:50%;
  background:radial-gradient(circle, var(--gate-tint-soft, rgba(80,150,220,0.25)) 0%, transparent 65%);
  pointer-events:none; z-index:-1; opacity:0.6;
  transition:background 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .g-inner { animation:none; }
}

/* Kawoosh */
.kawoosh {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(200,245,255,1) 0%, rgba(90,175,255,0.7) 28%, transparent 62%);
  display:none;
}
.kawoosh { animation:kawooshBurst 0.9s cubic-bezier(0.2,0.8,0.4,1) forwards !important; }
.g-inner.portal-open { animation:portalGlow 2s ease-in-out infinite; }
.gate-ripple { position:absolute; top:50%; left:50%; width:70px; height:70px; border-radius:50%; border:2px solid rgba(80,200,255,0.55); animation:gateRipple 1.4s ease-out forwards; pointer-events:none; }

/* ── Destination info ── */
#destName {
  font-family:var(--font-display) !important;
  font-size:22px !important; letter-spacing:3px !important;
  text-shadow:0 2px 4px rgba(0,0,0,0.8) !important;
}
#destCoords {
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:2px; color:var(--textsoft);
  text-transform:uppercase;
}

/* ── Mission card ── */
.mission-card {
  width:100%; margin-top:14px;
  background:rgba(8,12,30,0.70);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--tint-3);
  
  border-radius:12px; padding:16px 18px 18px;
  position:relative;
  /* overflow:visible pour ne pas tronquer la ligne "Composition" sous la barre.
     Le border-radius clippe quand même la bordure visuelle. */
  overflow:visible;
 box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.5); }
.mission-card::before { display:none; }
.mission-card::after { display:none; }
.mc-lbl {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:1.5px; color:var(--textsoft);
  text-transform:uppercase;
  margin-bottom:8px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.mc-lbl-tier {
  font-size:10px; padding:1px 7px; border-radius:4px;
  background:rgba(var(--accent-rgb),0.10); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),0.30); letter-spacing:1px;
}
.mc-lbl-garr {
  font-family:var(--font-mono); font-size:11px;
  color:#5ad88f; letter-spacing:0.5px;
  text-transform:none;
}
.mc-text { font-size:13px; color:var(--textmid); line-height:1.7; letter-spacing:0.3px; }
/* Bloc "Intel" sous le briefing : garnison + composition ennemie + barre */
.mc-intel { margin-top:10px; padding-top:8px; border-top:1px solid var(--tint-3); }
.mc-intel-line { font-size:13px; color:var(--textmid); margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mc-intel-line strong { color:#5ad88f; font-weight:700; }

/* ── Action buttons ── */
.gate-btns { display:flex; gap:12px; width:100%; margin-top:16px; align-items:stretch; }
/* Mobile : la barre de boutons devient fixed en bas pour rester visible
   pendant que l'utilisateur scrolle dans la sélection d'effectifs (page très longue).
   IMPORTANT : .sec-full pose backdrop-filter qui crée un containing block et casse
   position:fixed → on désactive le backdrop sur #sf_gate en mobile (impact visuel mineur,
   gain UX majeur : CTA toujours visible). */
@media (max-width:768px) {
  #sf_gate { backdrop-filter:none !important; }
  .gate-btns {
    position:fixed;
    left:8px; right:8px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index:80;
    margin:0;
    padding:10px 12px;
    background:rgba(8,12,22,0.94);
    backdrop-filter:blur(10px);
    border:1px solid rgba(var(--accent-rgb),0.25);
    border-radius:12px;
    box-shadow:0 -4px 24px rgba(0,0,0,0.55);
  }
  /* Padding-bottom sur le panneau pour ne pas que le contenu soit caché par la barre fixe */
  #sf_gate .gpanel.gpanel-c { padding-bottom:96px; }
}
/* Mobile compact (M7-E) : masquer skip-anim + mute dans la barre sticky
   pour laisser toute la largeur aux CTAs primaires (Dial / Engage / Stop). */
@media (max-width:600px) {
  .gate-btns #btnGateSkipAnim,
  .gate-btns #btnGateMute { display:none !important; }
}
.gbtn {
  flex:1; padding:14px 10px; font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:1.5px; border-radius:12px; cursor:pointer; transition:all 0.25s;
  border:1.5px solid; text-transform:uppercase; position:relative; overflow:hidden;
  min-height:44px;
}
/* Boutons auxiliaires (skip anim, mute) — compactés à droite, ne mangent pas l'espace primary */
#btnGateSkipAnim, #btnGateMute {
  flex:0 0 auto !important;
  min-width:44px !important;
  width:44px;
  padding:0 !important;
  border-color:var(--tint-5) !important;
  background:var(--tint-2);
  color:var(--textmid);
}
#btnGateSkipAnim:hover, #btnGateMute:hover {
  background:var(--tint-4);
  border-color:var(--tint-10) !important;
  color:var(--textbright);
}
.gbtn::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, var(--tint-5), transparent);
  transition:left 0.5s;
}
.gbtn:hover::after { left:100%; }
.gbtn-d {
  border-color:rgba(var(--accent-rgb),0.3); color:var(--accent);
  background:rgba(var(--accent-rgb),0.06);
}
.gbtn-d:hover {
  background:rgba(var(--accent-rgb),0.12);
  transform:translateY(-2px);
}
.gbtn-e {
  border-color:rgba(var(--accent-rgb),0.5); color:white;
  background:linear-gradient(135deg, var(--accent3), var(--accent));
  box-shadow:0 2px 12px rgba(var(--accent-rgb),0.20);
}
.gbtn-e:hover { filter:brightness(1.2); transform:translateY(-2px); }
.gbtn-e:disabled { opacity:0.35; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }
.gbtn-a {
  /* G4 audit Major 27/05 — STOP visuellement secondaire (vs LANCER primary) pour
     reduire le risque mis-click sur mobile. Padding reduit + flex-grow 0. */
  border-color:rgba(224,80,80,0.3); color:var(--danger);
  background:rgba(224,80,80,0.06);
  padding-left:14px; padding-right:14px;
  font-size:12px; letter-spacing:1px;
  flex-grow:0; flex-shrink:0;
}
.gbtn-a:hover { background:rgba(224,80,80,0.14); transform:translateY(-2px); }

/* ── Sequence bar ── */
.seq-bar {
  width:100%; margin-top:12px;
  background:rgba(8,12,30,0.50);
  border:1px solid var(--tint-3);
  border-radius:12px; padding:12px 18px;
  display:flex; align-items:center; gap:12px;
  position:relative;
}
.seq-bar::before { display:none; }
.sq-lbl { font-family:var(--font-display); font-size:11px; color:rgba(var(--accent-rgb),0.7); letter-spacing:1.5px; white-space:nowrap; text-transform:uppercase; text-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
.sq-syms { display:flex; gap:6px; }
.sq-sym {
  width:34px; height:34px; border-radius:7px;
  border:1px solid var(--tint-4); background:rgba(4,8,20,0.85);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:14px;
  color:var(--textsoft); transition:all 0.3s;
}
/* Chevrons non encore dialed : très discrets pour ne pas attirer l'œil
   tant que la séquence n'est pas lancée. La classe origin (◈) reste visible. */
.sq-sym:not(.dialed):not(.origin) { opacity:0.20; }
.seq-bar:has(.sq-sym.dialed) .sq-sym:not(.dialed):not(.origin) { opacity:0.50; }
.sq-sym.dialed {
  border-color:var(--accent); color:var(--accent);
  background:rgba(var(--accent-rgb),0.14);
}
.sq-sym.origin {
  border-color:var(--gold); color:var(--gold);
  background:rgba(224,168,48,0.14);
}

/* ── Team slots ── */
.team-slot {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:6px;
  border:1px solid var(--border); background:var(--surface2);
  cursor:pointer; transition:border-color 0.15s; box-shadow:var(--inset);
}
.team-slot:hover { border-color:var(--accent); }
.ts-av { width:30px; height:30px; border-radius:5px; background:var(--surface3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ts-name { font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--textbright); letter-spacing:0.5px; }
.ts-role { font-size:12px; color:var(--textsoft); margin-top:2px; }
.ts-ok { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--success); }

/* ══════════════════════════════════════════════════════════
   TROOP SELECTION PANEL (glassmorphism)
   ══════════════════════════════════════════════════════════ */
.gate-troop-sel {
  background:transparent;
  border:none;
  border-radius:0; padding:0; margin-top:0;
  position:relative;
}
.gate-troop-sel::before { display:none; }
.gts-title { display:none; } /* obsolete — title is now the "Forces" tab itself */
.gts-title::before { display:none; }

/* Sticky toolbar (count + MAX ALL) */
.gts-toolbar {
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:6px 4px 8px;
  margin-bottom:6px;
  background:linear-gradient(180deg, rgba(8,12,30,0.95) 80%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:var(--gate-line);
}
.gts-toolbar-count {
  flex:1; min-width:0;
  font-family:var(--font-mono);
  font-size:12px; color:var(--textsoft);
  letter-spacing:0.5px;
}
.gts-toolbar-max {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  font-family:var(--font-display);
  font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  border-radius:var(--gate-radius-sm);
  cursor:pointer; transition:all 0.15s ease;
  border:1px solid rgba(var(--accent-rgb),0.30);
  color:var(--accent);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.04));
  white-space:nowrap;
}
.gts-toolbar-max:hover {
  border-color:rgba(var(--accent-rgb),0.55);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.08));
  box-shadow:0 0 12px rgba(var(--accent-rgb),0.25);
}

/* ══════════════════════════════════════════════════════════
   COMBAT HUB (sidebar droite refondue v3)
   Tabs : Forces / Cible / Cmdrs
   ══════════════════════════════════════════════════════════ */

/* Mission status banner (si mission en cours) */
.gprt-mission-status {
  padding:var(--gate-pad-sm) var(--gate-pad-sm) 0;
}
.gprt-mission-status:empty { display:none; }

/* Tabs bar */
.gprt-bar {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;
  padding:var(--gate-pad-sm) var(--gate-pad-sm) 0;
  margin-bottom:var(--gate-pad-sm);
}
.gprt-tab {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 8px;
  font-family:var(--font-display);
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  border-radius:var(--gate-radius);
  cursor:pointer; transition:all 0.18s ease;
  border:1px solid var(--tint-4);
  color:var(--textsoft);
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  white-space:nowrap; overflow:hidden;
  position:relative;
}
.gprt-tab > span {
  text-overflow:ellipsis; overflow:hidden;
}
.gprt-tab:hover:not(.active) {
  color:var(--text);
  border-color:rgba(255,255,255,0.18);
  background:linear-gradient(180deg, var(--tint-4), var(--tint-1));
}
.gprt-tab.active {
  color:var(--accent);
  border-color:rgba(var(--accent-rgb),0.45);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05));
  box-shadow:0 0 18px rgba(var(--accent-rgb),0.18),
             inset 0 1px 0 var(--tint-4);
}
.gprt-tab.active::after {
  content:''; position:absolute; left:25%; right:25%; bottom:-1px; height:2px;
  background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),0.6);
  border-radius:2px;
}

/* Tab badge (notif count) */
.gprt-tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  border-radius:8px;
  background:var(--accent); color:#001;
  margin-left:4px;
}

/* Panes container */
.gprt-stack {
  flex:1; min-height:0; overflow:hidden;
  position:relative;
  padding:0 var(--gate-pad-sm);
}
.gprt-pane {
  display:none;
  height:100%; overflow-y:auto;
  padding-right:2px;
  animation:gprtFadeIn 0.22s ease;
}
.gprt-pane.active { display:block; }
@keyframes gprtFadeIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
.gprt-section { margin-top:var(--gate-pad-md); }
.gprt-section:first-child { margin-top:0; }

/* Mission card variant when displayed inside the Cible tab */
.mission-card.mission-card--inline {
  width:100%; margin:0 0 var(--gate-pad-md);
  padding:var(--gate-pad-md);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.015));
  border:1px solid rgba(var(--accent-rgb),0.18);
  border-left:1px solid rgba(var(--accent-rgb),0.18);
  border-radius:var(--gate-radius);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  position:relative;
}
.mission-card.mission-card--inline .mc-lbl {
  font-family:var(--font-display);
  font-size:10px; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
  text-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
}
.mission-card.mission-card--inline .mc-text {
  font-family:var(--font-mono);
  font-size:13px; line-height:1.55;
  color:var(--text);
}
.mission-card.mission-card--inline .mc-intel:empty { display:none; }
.mission-card.mission-card--inline .mc-intel {
  margin-top:var(--gate-pad-sm);
  padding-top:var(--gate-pad-sm);
  border-top:var(--gate-line);
}

/* Empty state for tabs */
.gprt-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px 20px;
  font-family:var(--font-mono);
  font-size:13px; color:var(--textsoft);
  min-height:140px;
}
.gprt-empty .gprt-empty-ico {
  font-size:32px; margin-bottom:8px; opacity:0.5;
}
.gprt-empty a {
  color:var(--accent); text-decoration:none; font-weight:600;
  margin-top:8px; cursor:pointer;
}
.gprt-empty a:hover { text-decoration:underline; }

/* Legacy classes kept as no-ops for compat with any external JS */
.gpr-stack { display:contents; }
.gpr-rewards-block,
.gpr-troops-block,
.gpr-cmd-block { display:flex; flex-direction:column; }
.gpr-rewards-block .gp-title,
.gpr-cmd-block .gp-title { margin-bottom:8px; }

/* Récompenses compactes : 1 ligne dense au lieu de 5 rows */
.grw-compact {
  display:flex; flex-wrap:wrap; gap:4px 10px;
  padding:8px 10px;
  background:rgba(var(--accent-rgb),0.04);
  border:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:6px;
  font-family:var(--font-mono); font-size:12px;
  align-items:center;
}
.grw-compact > span { display:inline-flex; align-items:center; gap:4px; }
.grw-c-loot { color:#5ad88f; font-weight:600; }
.grw-c-cd   { color:var(--accent3); }
.grw-c-threat { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:1px; padding:1px 7px; border-radius:4px; background:var(--tint-2); border:1px solid currentColor; }
.grw-details { margin-top:4px; }
.grw-details summary {
  list-style:none; cursor:pointer;
  padding:4px 8px; font-family:var(--font-display); font-size:10px;
  letter-spacing:1px; color:var(--textsoft); text-align:center;
  background:var(--tint-1); border-radius:4px;
  transition:color 0.15s;
}
.grw-details summary::-webkit-details-marker { display:none; }
.grw-details summary:hover { color:var(--accent); }
.grw-details[open] summary { color:var(--accent); margin-bottom:4px; }
.grw-details-body { display:flex; flex-direction:column; gap:3px; }

/* ── Troop compact row list — 1 col mais cards compactes (1 ligne par unité)
   pour gagner -40% de hauteur sans casser la lisibilité du slider+MAX ── */
.gts-grid {
  display:flex; flex-direction:column;
  gap:3px;
  margin-top:6px;
}
/* Les headers de catégorie (Infanterie / Blindé / Aérien / Ops) gardent leur largeur full */
.gts-grid > .gts-cat-header { width:100%; }
.gts-cat-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 4px 8px; margin-top:10px;
  font-family:var(--font-display);
  font-size:11px; font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--c, #888);
  position:relative;
}
.gts-cat-header:first-child { margin-top:2px; }
.gts-cat-header__ico {
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1;
  border-radius:6px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--c, #888) 22%, transparent),
    color-mix(in srgb, var(--c, #888) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--c, #888) 35%, transparent);
  box-shadow:inset 0 1px 0 var(--tint-4),
             0 0 12px color-mix(in srgb, var(--c, #888) 20%, transparent);
  flex-shrink:0;
}
.gts-cat-header__lbl {
  text-shadow:0 0 8px color-mix(in srgb, var(--c, #888) 35%, transparent);
}
.gts-cat-header__line {
  flex:1; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--c, #888) 35%, transparent),
    transparent);
}
.gts-cat-header__count {
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:1px;
  color:var(--textsoft);
  padding:2px 7px; border-radius:3px;
  background:var(--tint-2);
  border:1px solid var(--tint-3);
  flex-shrink:0;
}
.gts-card {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto auto;
  grid-template-rows:auto auto;
  gap:2px 10px; align-items:center;
  padding:8px 12px;
  border-radius:var(--gate-radius);
  border:1px solid transparent;
  border-bottom:1px solid var(--tint-3);
  transition:all 0.15s; position:relative;
  background:transparent;
}
.gts-card:hover { background:rgba(var(--accent-rgb),0.04); border-color:rgba(var(--accent-rgb),0.08); }
.gts-card.has-qty {
  background:rgba(var(--accent-rgb),0.06);
  border-color:rgba(var(--accent-rgb),0.25);
  
 box-shadow:inset 3px 0 0 0 var(--accent); }
.gts-card.empty { display:none; }

/* Layout compact : icone à gauche (couvre les 2 rows), head + qty + MAX en row 1, slider en row 2 */
.gts-card-icon {
  grid-row:1/3; grid-column:1;
  font-size:18px; width:32px; min-width:32px; text-align:center;
  flex-shrink:0; filter:drop-shadow(0 0 3px var(--tint-5));
  overflow:hidden;
}
.gts-card-icon img { display:block; margin:0 auto; width:32px; height:32px; object-fit:cover; border-radius:5px; border:1px solid var(--tint-4); }
.gts-card-head {
  grid-row:1; grid-column:2 / span 3;
  display:flex; align-items:center; gap:6px; min-width:0;
}
.gts-card-name {
  font-family:var(--font-display); font-size:13px; font-weight:700;
  color:var(--textbright); letter-spacing:0.3px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0;
}
.gts-card-badges { display:inline-flex; gap:3px; flex-shrink:0; }
.gts-card-badge-atk {
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:#ff6666; background:rgba(255,80,80,0.10); border:1px solid rgba(255,80,80,0.20);
  border-radius:4px; padding:1px 5px; white-space:nowrap; line-height:1.4;
}
.gts-card-badge-def {
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:#66aaff; background:rgba(var(--accent2-rgb),0.10); border:1px solid rgba(var(--accent2-rgb),0.20);
  border-radius:4px; padding:1px 5px; white-space:nowrap; line-height:1.4;
}

/* Row 2: slider + qty + MAX btn — tient en 1 ligne sans dépasser */
.gts-card-slider-row {
  grid-row:2; grid-column:2 / span 3;
  display:flex; align-items:center; gap:6px;
  margin-top:2px;
  min-width:0;
}
.gts-slider {
  flex:1; height:8px; -webkit-appearance:none; appearance:none;
  background:var(--tint-4); border-radius:4px; outline:none;
  cursor:pointer; min-width:0;
}
.gts-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.6),
             0 0 0 4px rgba(var(--accent-rgb),0.10);
  cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
}
.gts-slider::-webkit-slider-thumb:hover {
  transform:scale(1.18);
  box-shadow:0 0 12px rgba(var(--accent-rgb),0.8),
             0 0 0 6px rgba(var(--accent-rgb),0.15);
}
.gts-slider::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; border:none;
  background:var(--accent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.6);
  cursor:pointer;
}
.gts-slider::-webkit-slider-runnable-track { height:8px; border-radius:4px; }
.gts-slider::-moz-range-track { height:8px; border-radius:4px; background:var(--tint-4); border:none; }
.gts-card-qty {
  font-family:var(--font-mono); font-size:12px; color:var(--textsoft);
  white-space:nowrap; flex-shrink:0;
}
.gts-card-qty strong { color:var(--accent); }
.gts-card-max-btn {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  padding:3px 7px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),0.20); color:var(--accent);
  background:rgba(var(--accent-rgb),0.06); transition:all 0.15s;
  white-space:nowrap; flex-shrink:0; line-height:1.2;
}
.gts-card-max-btn:hover { background:rgba(var(--accent-rgb),0.18); border-color:rgba(var(--accent-rgb),0.4); }
.gts-card-max-btn:disabled { opacity:0.3; cursor:default; }

/* Right side controls (qty+max) on row 1 */
.gts-card-right {
  grid-row:1; grid-column:3;
  display:flex; align-items:center; gap:4px;
}

/* Legacy accordion kept for backwards compat (hidden in new layout) */
.gts-accordion { margin-bottom:8px; }
.gts-acc-hdr {
  display:flex; align-items:center; gap:8px; padding:11px 12px;
  cursor:pointer; font-family:var(--font-display); font-size:13px;
  font-weight:900; letter-spacing:2.5px; border-radius:8px;
  user-select:none; transition:all 0.25s;
  background:linear-gradient(90deg, var(--tint-2), var(--tint-1));
  border:1px solid var(--tint-4);
  position:relative;
}
.gts-acc-hdr::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px;
  border-radius:0 2px 2px 0; background:currentColor; opacity:0.25; transition:opacity 0.25s;
}
.gts-acc-hdr:hover { background:linear-gradient(90deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.04)); border-color:rgba(var(--accent-rgb),0.15); }
.gts-acc-hdr:hover::before { opacity:0.5; }
.gts-acc-badge {
  margin-left:auto; font-family:var(--font-display); font-size:12px;
  font-weight:700; color:var(--gold2);
  background:rgba(212,146,10,0.15); border:1px solid rgba(212,146,10,0.30);
  padding:3px 12px; border-radius:10px;
  text-shadow:0 0 10px rgba(212,146,10,0.4);
  box-shadow:0 0 8px rgba(212,146,10,0.1);
}
.gts-badge-empty { color:var(--textsoft) !important; background:var(--tint-2) !important; border-color:var(--tint-4) !important; text-shadow:none !important; }
.gts-acc-chev { font-size:12px; flex-shrink:0; color:var(--textmid); transition:transform 0.2s; }
.gts-acc-body {  margin-left:6px; padding-left:10px; margin-top:4px;  box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.25); }

/* Individual troop rows (legacy) */
.gts-row {
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; margin:2px 0; border-radius:8px;
  border:1px solid var(--tint-2);
  border-bottom:1px solid var(--tint-2);
  transition:all 0.2s; background:rgba(255,255,255,0.01);
}
.gts-row:hover { background:rgba(var(--accent-rgb),0.06); border-color:rgba(var(--accent-rgb),0.12); }
.gts-row:last-child { border-bottom:1px solid var(--tint-2); }
.gts-row-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gts-row-bot { display:flex; align-items:center; padding-left:50px; }
.gts-icon { font-size:24px; width:42px; min-width:42px; text-align:center; flex-shrink:0; filter:drop-shadow(0 0 4px var(--tint-9)); }
.gts-icon img { display:block; margin:0 auto; }
.gts-name { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--textbright); line-height:1.3; letter-spacing:0.5px; }
.gts-badges { display:flex; gap:6px; margin-left:auto; flex-shrink:0; }
.gts-badge-atk {
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:#ff6666; background:rgba(255,80,80,0.12); border:1px solid rgba(255,80,80,0.30);
  border-radius:5px; padding:2px 8px; white-space:nowrap;
  text-shadow:0 0 6px rgba(255,80,80,0.3);
}
.gts-badge-def {
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:#66aaff; background:rgba(var(--accent2-rgb),0.12); border:1px solid rgba(var(--accent2-rgb),0.30);
  border-radius:5px; padding:2px 8px; white-space:nowrap;
  text-shadow:0 0 6px rgba(var(--accent-rgb),0.3);
}
.gts-controls { display:flex; align-items:center; gap:3px; width:100%; flex-wrap:wrap; }
.gts-avail-label { font-family:var(--font-mono); font-size:12px; color:var(--textsoft); }
.gts-input {
  width:36px; padding:4px 2px; border-radius:5px;
  background:rgba(4,8,20,0.8); border:1px solid rgba(var(--accent-rgb),0.20);
  color:var(--textbright); font-family:var(--font-display); font-size:13px;
  font-weight:700; text-align:center; outline:none;
  transition:all 0.2s;
}
.gts-input:focus { border-color:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),0.3); }
.gts-pm {
  width:26px; height:26px; border-radius:5px; flex-shrink:0;
  border:1px solid rgba(var(--accent-rgb),0.20);
  background:rgba(var(--accent-rgb),0.06);
  color:var(--textbright); font-size:15px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; padding:0; line-height:1;
}
.gts-pm:hover:not(:disabled) { border-color:var(--accent); background:rgba(var(--accent-rgb),0.15); box-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
.gts-pm:disabled { opacity:0.25; cursor:default; }
.gts-avail { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold2); text-shadow:0 0 6px rgba(212,146,10,0.3); }
.gts-avail-zero { color:var(--textsoft) !important; text-shadow:none !important; }
.gts-row-empty { opacity:0.45; }
.gts-row-empty .gts-input { background:var(--tint-1); }

/* ── Rewards preview ── */
.gate-rewards {
  background:rgba(8,12,30,0.50);
  border:1px solid var(--tint-3);
  
  border-radius:12px; padding:12px 14px; margin:8px 0 10px;
  position:relative;
 box-shadow:inset 3px 0 0 0 var(--gold); }
.gate-rewards::before { display:none; }
.grw-title {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  color:var(--textsoft); letter-spacing:2px; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
  text-transform:uppercase;
}
.grw-title::before { display:none; }
.grw-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 8px; margin:2px 0; border-radius:5px;
  font-family:var(--font-mono); font-size:12px;
  transition:all 0.2s; border-left:2px solid transparent;
}
.grw-row:hover { background:rgba(212,146,10,0.08); border-left-color:rgba(212,146,10,0.3); }
.grw-lbl { color:var(--textmid); }
.grw-val { color:var(--gold2); font-weight:700; text-shadow:0 0 8px rgba(212,146,10,0.3); }
.grw-sep { margin-top:6px; padding-top:6px; border-top:1px solid var(--tint-4); }

/* Spark & wave effects */
.gate-spark {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:gateSpark 0.75s ease-out forwards;
}
.kawoosh-wave {
  position:absolute; inset:-10px; border-radius:50%;
  border:3px solid rgba(80,200,255,0.8);
  animation:kawooshWave 1.1s ease-out forwards;
  pointer-events:none;
}
.g-ring.portal-active {
  animation:gr 7s linear infinite !important;
  border-color:rgba(var(--accent2-rgb),0.65);
  box-shadow:0 0 30px rgba(var(--accent2-rgb),0.35), 0 0 60px rgba(var(--accent2-rgb),0.12), inset 0 0 18px rgba(var(--accent2-rgb),0.1);
}

/* ══════════════════════════════════════════════════════════
   POWER PANEL (glassmorphism)
   ══════════════════════════════════════════════════════════ */
.gts-power {
  background:rgba(8,12,30,0.50);
  border:1px solid var(--tint-3);
  border-radius:12px; padding:14px 16px; margin-bottom:10px;
  transition:opacity 0.2s; position:relative; overflow:hidden;
  container-type:inline-size;
}
.gts-power::before { display:none; }
.gts-power-row {
  display:flex; align-items:center; gap:16px; justify-content:center;
}
.gts-power-cell { text-align:center; flex:1 1 0; min-width:0; }
.gts-power-lbl {
  font-family:var(--font-display); font-size:13px; color:var(--textsoft);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:4px;
}
.gts-power-val {
  font-family:var(--font-display); font-size:24px; font-weight:900;
  letter-spacing:1.5px;
  white-space:nowrap;
}
.gts-power-val.atk { color:#ff5555; text-shadow:0 0 12px rgba(255,80,80,0.3); }
.gts-power-val.def { color:#55aaff; text-shadow:0 0 12px rgba(80,170,255,0.3); }
/* Panneau étroit (sidebar ATK/DEF mission iPad Pro & co) : évite que les
   nombres à 5+ chiffres se chevauchent. */
@container (max-width: 320px) {
  .gts-power-val { font-size:18px; letter-spacing:0.5px; }
  .gts-power-row { gap:8px; }
}
@container (max-width: 240px) {
  .gts-power-val { font-size:16px; letter-spacing:0; }
}
.gts-power-bonus {
  display:inline-block; font-family:var(--font-mono); font-size:12px;
  font-weight:700; padding:3px 10px; border-radius:6px; margin-top:6px;
  letter-spacing:0.5px;
}
.gts-power-bonus.pos { color:#44ffaa; background:rgba(68,255,170,0.1); border:1px solid rgba(68,255,170,0.25); }
.gts-power-bonus.neg { color:#ff5555; background:rgba(255,80,80,0.1); border:1px solid rgba(255,80,80,0.25); }
.gts-power-bar-wrap {
  margin-top:10px; padding-top:10px; border-top:1px solid var(--tint-3);
}
.gts-power-bar-label {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:14px; color:var(--textsoft);
  margin-bottom:5px;
}
.gts-power-bar {
  width:100%; height:6px; border-radius:3px;
  background:var(--tint-3); overflow:hidden;
  box-shadow:inset 0 1px 2px var(--shade-1);
}
.gts-power-fill {
  height:100%; border-radius:5px; transition:width 0.3s, background 0.3s;
  position:relative;
}
.gts-power-fill::after { display:none; }
.gts-power-fill.ok { background:linear-gradient(90deg, #22cc66, #44ffaa); box-shadow:0 0 14px rgba(68,255,170,0.5), 0 0 30px rgba(68,255,170,0.15); }
.gts-power-fill.ko { background:linear-gradient(90deg, #cc3030, #ff5555); box-shadow:0 0 14px rgba(255,80,80,0.5), 0 0 30px rgba(255,80,80,0.15); }
.gts-power-status {
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
}
.gts-power-status.ok { color:#44ffaa; text-shadow:0 0 8px rgba(68,255,170,0.3); }
.gts-power-status.ko { color:#ff5555; text-shadow:0 0 8px rgba(255,80,80,0.3); }

/* ══════════════════════════════════════════════════════════
   COMPOSITION TACTIQUE (type breakdown card)
   ══════════════════════════════════════════════════════════ */
.gts-comp {
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--tint-3);
  container-type:inline-size;
}
.gts-comp-row { margin-bottom:10px; }
.gts-comp-row:last-of-type { margin-bottom:6px; }
.gts-comp-head {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:5px;
  color:var(--textsoft);
}
.gts-comp-head .ic { opacity:0.7; }
.gts-comp-title { flex:1; min-width:0; }
.gts-comp-tag {
  font-family:var(--font-display);
  font-size:10px; font-weight:800;
  letter-spacing:1.5px;
  padding:2px 7px; border-radius:3px;
  flex-shrink:0;
}
.gts-comp-tag--def {
  color:#ff8080; background:rgba(255,80,80,0.1);
  border:1px solid rgba(255,80,80,0.3);
}
.gts-comp-tag--atk {
  color:#66ffbb; background:rgba(68,255,170,0.1);
  border:1px solid rgba(68,255,170,0.3);
}
.gts-comp-bar {
  display:flex; height:10px;
  border-radius:5px; overflow:hidden;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--tint-3);
  box-shadow:inset 0 1px 2px var(--shade-2);
}
.gts-comp-seg {
  flex:var(--w, 1); min-width:3px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--c, #888) 85%, transparent),
    color-mix(in srgb, var(--c, #888) 55%, transparent));
  box-shadow:inset 0 0 8px color-mix(in srgb, var(--c, #888) 50%, transparent);
  border-right:1px solid var(--shade-2);
  position:relative;
}
.gts-comp-seg:last-child { border-right:0; }
.gts-comp-chips {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:5px 14px;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:13px;
}
.gts-comp-chip {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--c, #888);
}
.gts-comp-chip-dot {
  width:9px; height:9px; border-radius:2px;
  background:var(--c, #888);
  box-shadow:0 0 6px var(--c, #888);
  flex-shrink:0;
}
.gts-comp-chip-pct {
  color:var(--text);
  font-weight:700;
  margin-left:auto;
  font-family:var(--font-display);
  font-size:12px;
}
.gts-comp-status {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-mono);
  font-size:12px;
  padding:6px 10px; border-radius:6px;
  margin:8px 0 4px;
}
.gts-comp-status--warn {
  color:#ffaa55; background:rgba(255,170,85,0.08);
  border:1px solid rgba(255,170,85,0.25);
}
.gts-comp-status--ok {
  color:#66dd88; background:rgba(102,221,136,0.08);
  border:1px solid rgba(102,221,136,0.25);
}
.gts-comp-status--neutral {
  color:var(--textsoft); background:rgba(255,255,255,0.025);
  border:1px solid var(--tint-3);
}
.gts-comp-cycle {
  margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--tint-4);
}
.gts-comp-cycle-head {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:10px; letter-spacing:2px;
  text-transform:uppercase;
  color:var(--textsoft);
  margin-bottom:6px;
}
.gts-comp-cycle-head::before,
.gts-comp-cycle-head::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--tint-7), transparent);
}
.gts-comp-cycle-pairs {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 14px;
  font-family:var(--font-mono);
  font-size:12px;
  margin-bottom:8px;
}
.gts-comp-cycle-pair {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; white-space:nowrap;
  padding:3px 6px; border-radius:4px;
  background:var(--tint-1);
  border:1px solid var(--tint-2);
}
.gts-comp-arrow {
  color:var(--accent3);
  font-size:11px;
  font-weight:700;
}
.gts-comp-cycle-mult {
  display:flex; justify-content:center; gap:18px;
  font-family:var(--font-display);
  font-size:11px; font-weight:700;
  letter-spacing:0.5px;
}
.gts-comp-mult-up { color:#44ffaa; }
.gts-comp-mult-dn { color:#ff7777; }
@container (max-width: 320px) {
  .gts-comp-cycle-pairs { grid-template-columns:1fr; gap:4px; font-size:11px; }
  .gts-comp-cycle-mult { gap:10px; font-size:10px; }
  .gts-comp-chips { grid-template-columns:1fr; gap:4px; }
}

.mission-active-card {
  background:rgba(8,12,30,0.70);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--accent);
  border-radius:12px; padding:14px 16px; margin-bottom:10px;
  box-shadow:0 4px 20px var(--shade-1), 0 0 30px rgba(var(--accent-rgb),0.08);
  position:relative;
}
.mission-active-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.3), transparent);
}

/* ── Commander indicator ── */
.gcmd-summary {
  margin-bottom:var(--gate-pad-md);
  padding:var(--gate-pad-md);
  border-radius:var(--gate-radius);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.02));
  border:1px solid rgba(var(--accent-rgb),0.18);
}
.gcmd-summary-head {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display);
  font-size:10px; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.gcmd-summary-chips {
  display:flex; flex-wrap:wrap; gap:5px 6px;
}
.gcmd-sum-chip {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:5px;
  font-family:var(--font-mono);
  font-size:12px; font-weight:700;
  white-space:nowrap;
}
.gcmd-sum-chip.pos {
  color:#44ffaa;
  background:rgba(68,255,170,0.10);
  border:1px solid rgba(68,255,170,0.25);
}
.gcmd-sum-chip.neg {
  color:#ff7777;
  background:rgba(255,80,80,0.10);
  border:1px solid rgba(255,80,80,0.25);
}
.gcmd-sum-empty { color:var(--textsoft); font-style:italic; font-size:12px; }

.gcmd-list { display:flex; flex-direction:column; gap:6px; }
.gcmd-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:rgba(var(--accent-rgb),0.04);
  border:1px solid var(--tint-3);
  transition:all 0.2s;
}
.gcmd-item:hover { background:rgba(var(--accent-rgb),0.08); border-color:rgba(var(--accent-rgb),0.15); }
.gcmd-item.villain { border-color:rgba(255,60,60,0.2); background:rgba(255,60,60,0.06); }
.gcmd-item.villain:hover { border-color:rgba(255,60,60,0.35); box-shadow:0 2px 12px rgba(255,60,60,0.15); }
.gcmd-av { font-size:28px; filter:drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
.gcmd-nm { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--textbright); letter-spacing:0.8px; text-shadow:0 1px 4px var(--shade-2); }
.gcmd-bns { font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-top:2px; letter-spacing:0.5px; }
.gcmd-lv {
  margin-left:auto; font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--gold); text-shadow:0 0 10px rgba(224,168,48,0.4);
  background:rgba(224,168,48,0.08); padding:3px 8px; border-radius:4px;
  border:1px solid rgba(224,168,48,0.2);
}
.gcmd-tokens {
  font-family:var(--font-mono); font-size:12px; color:var(--gold2);
  padding:8px 10px; text-align:center; margin-top:6px;
  background:rgba(212,146,10,0.06); border:1px solid rgba(212,146,10,0.15);
  border-radius:6px; letter-spacing:0.5px;
}
.gcmd-empty { font-size:12px; color:var(--textsoft); text-align:center; padding:14px 10px; line-height:1.6; }

/* Commandant principal — mis en valeur, plus gros */
.gcmd-item.gcmd-primary {
  padding:14px 14px;
  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);
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.10);
}
.gcmd-av-big { font-size:36px; }
.gcmd-bns-big { font-size:14px; font-weight:700; }
.gcmd-pri-tag {
  display:inline-block; margin-left:6px; padding:1px 6px;
  font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:1px;
  color:var(--accent); background:rgba(var(--accent-rgb),0.12);
  border:1px solid rgba(var(--accent-rgb),0.35); border-radius:3px;
  vertical-align:1px;
}
/* Bloc accordéon "+N autres" */
.gcmd-others { margin-top:0; }
.gcmd-others summary {
  list-style:none; cursor:pointer;
  padding:8px 12px; border-radius:8px;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:1px; color:var(--textsoft);
  background:var(--tint-2); border:1px solid var(--tint-3);
  text-align:center; transition:all 0.18s;
}
.gcmd-others summary:hover { color:var(--textbright); background:rgba(var(--accent-rgb),0.06); border-color:rgba(var(--accent-rgb),0.15); }
.gcmd-others summary::-webkit-details-marker { display:none; }
.gcmd-others[open] summary { color:var(--accent); margin-bottom:6px; }
.gcmd-others-list { display:flex; flex-direction:column; gap:6px; padding-top:2px; }

/* ── Energy bar (gate center + combat hub) ── */
.energy-row {
  padding:var(--gate-pad-sm) var(--gate-pad-md);
  border-top:var(--gate-line);
  flex-shrink:0;
}
.energy-row .er-top {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px;
}
.energy-row .er-label {
  font-family:var(--font-display); font-size:11px;
  letter-spacing:2px; color:var(--textmid);
  text-shadow:0 0 6px rgba(var(--accent-rgb),0.2);
}
.energy-row .er-val {
  font-family:var(--font-display); font-size:13px; font-weight:700;
  color:var(--accent); letter-spacing:1.5px;
  text-shadow:0 0 12px rgba(var(--accent-rgb),0.5);
}
.energy-row .res-bar-bg {
  height:6px; border-radius:3px;
  background:var(--tint-3);
  box-shadow:inset 0 1px 2px var(--shade-1);
  overflow:hidden;
}
.energy-row .res-bar-f {
  height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--accent3), var(--accent));
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.3);
  transition:width 0.6s ease;
}

/* ── Cooldown badge ── */
.planet-cd-badge {
  font-family:var(--font-mono); font-size:12px;
  color:var(--danger); background:rgba(255,60,60,0.12);
  border:1px solid rgba(255,60,60,0.25); border-radius:4px;
  padding:2px 6px; margin-left:auto;
  animation:cdBlink 2s ease-in-out infinite;
}
@keyframes cdBlink { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── VFX: Starfield canvas ── */
.gate-stars canvas { position:absolute; inset:0; width:100%; height:100%; }

/* ── VFX: Screen shake ── */
@keyframes gateShake {
  0%,100% { transform:translate(0,0); }
  10% { transform:translate(-4px,2px); }
  20% { transform:translate(3px,-3px); }
  30% { transform:translate(-3px,4px); }
  40% { transform:translate(4px,-2px); }
  50% { transform:translate(-2px,3px); }
  60% { transform:translate(3px,-1px); }
  70% { transform:translate(-1px,2px); }
  80% { transform:translate(2px,-2px); }
  90% { transform:translate(-2px,1px); }
}
.gate-shake { animation:gateShake 0.5s ease-out; }

/* ── VFX: Cyan flash overlay ── */
#gateFlash {
  position:absolute; inset:0; z-index:10;
  background:radial-gradient(circle at center, rgba(100,220,255,0.5), rgba(40,120,255,0.2) 60%, transparent 80%);
  opacity:0; transition:opacity 0.12s ease-out;
  pointer-events:none; border-radius:0;
}

/* ── VFX: Kawoosh 3D cone ── */
.g-inner { perspective:600px; }
.kawoosh-3d {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(220,250,255,0.95) 0%, rgba(100,200,255,0.6) 30%, rgba(40,120,255,0.2) 60%, transparent 80%);
  filter:blur(4px);
  animation:kawoosh3D 0.9s ease-out forwards;
  pointer-events:none; z-index:8;
}
@keyframes kawoosh3D {
  0%   { transform:scale(0.3) rotateX(-10deg); opacity:0; }
  25%  { transform:scale(1.4) rotateX(-20deg); opacity:1; filter:blur(2px) brightness(1.5); }
  45%  { transform:scale(1.2) rotateX(-12deg); opacity:0.8; filter:blur(3px) brightness(1.2); }
  100% { transform:scale(1) rotateX(0deg); opacity:0; filter:blur(6px) brightness(0.8); }
}

/* ── VFX: Room dynamic lighting ── */
#gateLightOverlay {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at center 40%, rgba(30,100,220,0.25), rgba(15,60,160,0.10) 50%, transparent 75%);
  opacity:0; transition:opacity 0.8s ease;
  pointer-events:none;
}
#gateLightOverlay.room-lit {
  opacity:1;
  animation:roomPulse 3s ease-in-out infinite;
}
@keyframes roomPulse {
  0%,100% { opacity:0.7; }
  50%     { opacity:1; }
}
#gateLightOverlay.room-chev-flash {
  background:radial-gradient(ellipse at center 40%, rgba(255,180,50,0.35), rgba(220,140,30,0.15) 50%, transparent 75%) !important;
  opacity:1 !important;
  transition:none !important;
  animation:none !important;
}

/* ══ IRIS — Diaphragme métallique modernisé 08/05/2026 ══
   Refonte : conic-gradient avec stops plus contrastés (highlights métalliques
   marqués) + radial-gradient overlay pour effet 3D bombé + subtle pulse rotation
   en idle (presque invisible mais "vivant"). */
.g-iris {
  position:absolute; inset:0; border-radius:50%;
  z-index:7; display:none; pointer-events:none;
  background:
    /* Highlight central (effet métal poli au centre) */
    radial-gradient(circle at 35% 35%,
      rgba(255,255,255,0.18) 0%,
      var(--tint-3) 25%,
      transparent 55%),
    /* Pales métalliques 8 stops contrastés */
    conic-gradient(from 0deg,
      #5a6070 0deg,   #9aa0ac 18deg,  #3a4050 22.5deg,
      #5a6570 27deg,  #9aa0ac 40.5deg, #3a4050 45deg,
      #5a6070 49.5deg,#9aa0ac 63deg,   #3a4050 67.5deg,
      #5a6570 72deg,  #9aa0ac 85.5deg, #3a4050 90deg,
      #5a6070 94.5deg,#9aa0ac 108deg,  #3a4050 112.5deg,
      #5a6570 117deg, #9aa0ac 130.5deg,#3a4050 135deg,
      #5a6070 139.5deg,#9aa0ac 153deg, #3a4050 157.5deg,
      #5a6570 162deg, #9aa0ac 175.5deg,#3a4050 180deg,
      #5a6070 184.5deg,#9aa0ac 198deg, #3a4050 202.5deg,
      #5a6570 207deg, #9aa0ac 220.5deg,#3a4050 225deg,
      #5a6070 229.5deg,#9aa0ac 243deg, #3a4050 247.5deg,
      #5a6570 252deg, #9aa0ac 265.5deg,#3a4050 270deg,
      #5a6070 274.5deg,#9aa0ac 288deg, #3a4050 292.5deg,
      #5a6570 297deg, #9aa0ac 310.5deg,#3a4050 315deg,
      #5a6070 319.5deg,#9aa0ac 333deg, #3a4050 337.5deg,
      #5a6570 342deg, #9aa0ac 355.5deg,#5a6070 360deg
    );
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.75),    /* ombre interne profonde */
    inset 0 0 12px rgba(120,140,170,0.4),/* anneau lumineux interne */
    inset 0 4px 20px var(--tint-4), /* highlight haut (3D bombé) */
    0 0 20px var(--shade-2),            /* shadow externe doux */
    0 0 6px rgba(60,80,120,0.3);         /* glow cyan subtle */
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s ease;
  /* Subtle pulse rotation idle : 0.5deg amplitude, 8s cycle (presque invisible) */
  animation: irisIdlePulse 8s ease-in-out infinite;
}
@keyframes irisIdlePulse {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(0.6deg) scale(1.003); }
}
.g-iris::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,
    var(--tint-4) 0%,
    var(--tint-2) 30%,
    transparent 60%
  );
  pointer-events:none;
}
.g-iris::after {
  content:''; position:absolute;
  top:50%; left:50%;
  width:12%; height:12%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, #1a1e2a 0%, #0a0e18 100%);
  border:2px solid rgba(80,90,110,0.6);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.8), 0 0 6px var(--shade-1);
}
.g-iris.active { display:block; }
.g-iris.open {
  transform:scale(0);
  opacity:0;
}

/* ── Iris badge sous la porte ── */
.iris-badge {
  display:none;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:2px; color:#44ffaa;
  background:rgba(68,255,170,0.08);
  border:1px solid rgba(68,255,170,0.30);
  border-radius:6px; padding:5px 16px;
  margin-top:8px; text-align:center;
  text-shadow:0 0 10px rgba(68,255,170,0.4);
  box-shadow:0 0 12px rgba(68,255,170,0.08);
  animation:irisPulse 3s ease-in-out infinite;
}
.iris-badge.active { display:inline-block; }
@keyframes irisPulse {
  0%,100% { box-shadow:0 0 8px rgba(68,255,170,0.08); }
  50%     { box-shadow:0 0 20px rgba(68,255,170,0.20); text-shadow:0 0 16px rgba(68,255,170,0.6); }
}

/* ── Mobile/Tablet portrait : sticky CTA + ATK/DEF + remove inner scrolls ── */
@media (max-width:1023px) {
  /* Bouton LANCER MISSION sticky en bas — au-dessus de la bottom-nav mobile (60px) */
  #sf_gate.active .gate-btns {
    position:fixed; left:0; right:0; bottom:60px;
    z-index:850;
    display:flex; gap:6px; flex-wrap:nowrap;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, rgba(8,12,22,0.85), rgba(4,8,16,0.97));
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(var(--accent-rgb), 0.35);
    box-shadow:0 -8px 24px rgba(0,0,0,0.55);
  }
  #sf_gate.active .gate-btns #btnDial,
  #sf_gate.active .gate-btns #btnEngage,
  #sf_gate.active .gate-btns #btnAbort {
    flex:1 1 auto; min-width:0;
    padding:12px 14px; font-size:13px; letter-spacing:1.5px;
  }
  #sf_gate.active .gate-btns #btnGateSkipAnim,
  #sf_gate.active .gate-btns #btnGateMute {
    flex:0 0 auto;
  }
  /* Padding bottom pour ne pas masquer le contenu sous le sticky CTA + bottom-nav (60+66) */
  #sf_gate.active { padding-bottom:140px; }

  /* ATK/DEF totaux sticky en haut du panneau effectifs */
  #sf_gate.active .gts-power-row,
  #sf_gate.active .gts-power-cell-wrap,
  #sf_gate.active .gate-troop-sel > .gts-power-cell {
    position:sticky; top:0; z-index:5;
    background:linear-gradient(180deg, rgba(8,12,22,0.95), rgba(8,12,22,0.85));
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    padding:8px 6px; margin:0 -6px 8px;
    border-bottom:1px solid rgba(var(--accent-rgb), 0.2);
  }

  /* Suppression des scroll internes : laisse le scroll global de la page */
  #sf_gate.active #planetList,
  #sf_gate.active .gpanel,
  #sf_gate.active .gpanel.gpanel-r,
  #sf_gate.active .gpr-stack,
  #sf_gate.active .gate-troop-sel {
    max-height:none !important;
    overflow:visible !important;
  }
}

/* ── Bannière pédagogique Gate (T1-T3 only) ── */
.gate-tier-hint {
  /* A2 (audit Porte 17/06) : compactée pour remonter la liste de cibles */
  display:flex; align-items:center; gap:8px;
  margin:2px 4px 8px 4px;
  padding:6px 10px;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(94,255,242,0.10), rgba(168,85,247,0.06));
  border:1px solid rgba(94,255,242,0.28);
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--textsoft);
  line-height:1.35;
}
.gate-tier-hint .gth-ico { font-size:14px; flex-shrink:0; }
.gate-tier-hint .gth-text { flex:1; }
.gate-tier-hint b { color:var(--text); font-weight:700; }
.gate-tier-hint a { color:#5efff2; text-decoration:none; border-bottom:1px dashed rgba(94,255,242,0.5); transition:all .15s; }
.gate-tier-hint a:hover { color:var(--textbright); border-bottom-color:#5efff2; }
@media (max-width:600px) {
  .gate-tier-hint { font-size:10.5px; padding:6px 8px; }
}

/* ── F3 Atlantis Campaign banner ── */
.atlantis-banner {
  background:linear-gradient(135deg, rgba(143,92,255,0.14), rgba(94,255,242,0.08));
  border:1px solid rgba(143,92,255,0.45);
  border-radius:8px;
  padding:10px 12px;
  margin:6px 6px 10px 6px;
  box-shadow:0 0 18px rgba(143,92,255,0.15) inset;
}
.atlantis-banner.done {
  background:linear-gradient(135deg, rgba(94,255,242,0.18), rgba(255,215,90,0.10));
  border-color:rgba(94,255,242,0.55);
}
.atlantis-banner .atl-head {
  font-size:13px; font-weight:700; color:#d8c4ff; letter-spacing:0.5px;
  display:flex; justify-content:space-between; align-items:center;
}
.atlantis-banner .atl-prog { font-size:11px; color:#5efff2; font-weight:600; }
.atlantis-banner .atl-pips {
  margin:6px 0 4px; font-size:14px; letter-spacing:3px; color:#6a4fa8;
}
.atlantis-banner .atl-pip.ok   { color:#5efff2; text-shadow:0 0 6px rgba(94,255,242,0.7); }
.atlantis-banner .atl-pip.next { color:#f4d03f; text-shadow:0 0 8px rgba(244,208,63,0.9); animation:atlNextPulse 1.6s ease-in-out infinite; }
.atlantis-banner .atl-sub { font-size:11.5px; color:var(--textsoft); }
@keyframes atlNextPulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.55; }
}
.pegasus-row.atl-next { box-shadow:0 0 0 1px rgba(244,208,63,0.55) inset, 0 0 14px rgba(244,208,63,0.18); }
.atl-next-mark { color:#f4d03f; margin-right:4px; text-shadow:0 0 6px rgba(244,208,63,0.8); }
.atl-next-link { color:#f4d03f; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.atl-next-link:hover { color:var(--textbright); text-shadow:0 0 8px rgba(244,208,63,0.9); }

/* ══════════════════════════════════════════════════════════════════
   Sprint M7-A — Gate split-pane iPad portrait 768-1199
   Override du stack vertical (@media max-width:1023px) pour mieux
   utiliser l'espace tablette : gauche + centre côte-à-côte, sidebar
   droite en bottom full-width. .gate-center est utilisé (pas .gpanel-c).
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  #sf_gate.active {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto 1fr;
    grid-template-areas:
      "topbar topbar"
      "banner banner"
      "left center"
      "right right";
    gap:0;
    overflow-y:auto;
  }
  #sf_gate.active > .gate-mode-bar { grid-area:topbar; grid-column:1 / -1; }
  #sf_gate.active > .gate-crusade-banner { grid-area:banner; grid-column:1 / -1; }
  #sf_gate.active > .gpanel.gpanel-l { grid-area:left; width:100%; max-width:100%; }
  #sf_gate.active > .gate-center     { grid-area:center; width:100%; max-width:100%; }
  #sf_gate.active > .gpanel.gpanel-r { grid-area:right; width:100%; max-width:100%; border-top:1px solid var(--tint-4); }
}