/* ══════════════════════════════════════════════════════════
   PORTE DES ÉTOILES — STARGATE COMMAND INTERFACE
   ══════════════════════════════════════════════════════════ */

/* ── Side panels ── */
.gpanel {
  background:linear-gradient(180deg, rgba(4,8,22,0.99) 0%, rgba(8,16,34,0.97) 100%);
  border-right:2px solid rgba(var(--accent-rgb),0.35);
  padding:14px; display:flex; flex-direction:column; gap:12px;
  overflow-y:auto; position:relative;
  box-shadow:4px 0 30px rgba(0,10,30,0.6), inset -1px 0 0 rgba(var(--accent-rgb),0.12);
}
.gpanel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:100%;
  background:repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(var(--accent-rgb),0.02) 3px, rgba(var(--accent-rgb),0.02) 4px);
  pointer-events:none; z-index:0;
}
.gpanel::after {
  content:''; position:absolute; top:0; left:0; right:0; height:80px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06), transparent);
  pointer-events:none; z-index:0;
}
.gpanel > * { position:relative; z-index:1; }
.gpanel-r {
  border-right:none; border-left:2px solid rgba(var(--accent-rgb),0.35);
  box-shadow:-4px 0 30px rgba(0,10,30,0.6), inset 1px 0 0 rgba(var(--accent-rgb),0.12);
}
.gp-title {
  font-family:'Orbitron',monospace; font-size:13px; font-weight:700;
  color:var(--accent); letter-spacing:3px; text-transform:uppercase;
  padding-bottom:10px; margin-bottom:6px;
  border-bottom:2px solid rgba(var(--accent-rgb),0.25);
  text-shadow:0 0 14px rgba(var(--accent-rgb),0.5), 0 0 30px rgba(var(--accent-rgb),0.2);
  display:flex; align-items:center; gap:8px;
}
.gp-title::before { content:''; width:4px; height:14px; background:var(--accent); border-radius:2px; box-shadow:0 0 12px rgba(var(--accent-rgb),0.6); }

/* ── Planet entries ── */
.planet-row {
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer; transition:all 0.2s;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  position:relative;
}
.planet-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:8px 0 0 8px; background:transparent; transition:all 0.25s;
}
.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 rgba(0,0,0,0.3);
}
.planet-row:hover::before { background:rgba(var(--accent-rgb),0.4); }
.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:'Orbitron',monospace; font-size:12px; font-weight:700; color:var(--textbright); letter-spacing:0.5px; }
.pr-sub { font-size:11px; color:var(--textsoft); margin-top:2px; }
.pr-threat {
  margin-left:auto; font-family:'Orbitron',monospace; font-size:10px;
  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; }
@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} }

/* ── Chevron address card ── */
.chev-card {
  background:linear-gradient(135deg, rgba(8,14,30,0.97), rgba(14,24,50,0.92));
  border:1px solid rgba(var(--accent-rgb),0.30);
  border-radius:10px; padding:16px; position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), inset 0 0 30px rgba(var(--accent-rgb),0.03);
}
.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:'Orbitron',monospace; font-size:10px; color:rgba(var(--accent-rgb),0.8); letter-spacing:3px; 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:'Share Tech Mono',monospace; font-size:15px;
  color:var(--textsoft); transition:all 0.3s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
}
.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 {
  display:flex; flex-direction:column; align-items:center;
  padding:16px 20px; position:relative; overflow-y:auto;
  background:linear-gradient(180deg, rgba(4,8,18,1) 0%, rgba(6,12,28,1) 100%);
}
.gate-center::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../img/porte_bg.png') center 30% / cover no-repeat;
  opacity:0.30; pointer-events:none;
  filter:brightness(0.8) saturate(1.2);
}
.gate-center::after {
  content:''; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(to bottom, transparent 30%, rgba(4,8,18,0.9) 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:380px; aspect-ratio:1/1;
  margin:0 auto; flex-shrink:0;
  filter:drop-shadow(0 8px 40px rgba(15,50,160,0.35)) drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}

/* Permanent ambient haze */
.g-ambient {
  position:absolute; inset:-35px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(25,60,200,0.35) 25%, rgba(15,40,140,0.18) 45%, rgba(8,25,100,0.06) 60%, transparent 72%);
  animation:ambPulse 5s ease-in-out infinite;
}
.g-glow {
  position:absolute; inset:-45px; border-radius:50%; display:none; pointer-events:none;
  background:radial-gradient(circle, rgba(60,150,255,0.65) 14%, rgba(25,90,235,0.38) 40%, rgba(10,30,110,0.10) 68%, transparent 86%);
  animation:gg 2.5s ease-in-out infinite;
}
.g-glow.on { display:block; }

/* 3D light reflection rotating on the ring */
.g-reflect {
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 340deg,
    rgba(140,190,255,0.12) 350deg,
    rgba(180,220,255,0.22) 355deg,
    rgba(200,230,255,0.28) 358deg,
    rgba(180,220,255,0.22) 361deg,
    rgba(140,190,255,0.12) 365deg,
    transparent 375deg
  );
  mask:radial-gradient(circle, transparent 70%, black 72%, black 97%, transparent 100%);
  -webkit-mask:radial-gradient(circle, transparent 70%, black 72%, black 97%, transparent 100%);
  animation:gr 12s linear infinite;
  z-index:2;
}

.g-frame {
  position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgb(18,42,115) 0deg,    rgb(70,125,240) 12deg,   rgb(18,42,115) 26deg,
    rgb(18,42,115) 52deg,   rgb(70,125,240) 64deg,   rgb(18,42,115) 78deg,
    rgb(18,42,115) 104deg,  rgb(70,125,240) 116deg,  rgb(18,42,115) 130deg,
    rgb(18,42,115) 156deg,  rgb(70,125,240) 168deg,  rgb(18,42,115) 182deg,
    rgb(18,42,115) 208deg,  rgb(70,125,240) 220deg,  rgb(18,42,115) 234deg,
    rgb(18,42,115) 260deg,  rgb(70,125,240) 272deg,  rgb(18,42,115) 286deg,
    rgb(18,42,115) 312deg,  rgb(70,125,240) 324deg,  rgb(18,42,115) 338deg,
    rgb(18,42,115) 360deg
  );
  mask:radial-gradient(circle, transparent 90.5%, black 91%);
  -webkit-mask:radial-gradient(circle, transparent 90.5%, black 91%);
  animation:gr 80s linear infinite reverse;
  box-shadow:0 0 24px rgba(40,100,230,0.30), 0 0 0 2px rgba(85,140,245,0.35);
}

/* 3D bevel: bright highlight top, dark shadow bottom */
.g-bevel {
  position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  background:linear-gradient(170deg,
    rgba(120,170,255,0.20) 0%,
    rgba(100,150,240,0.10) 20%,
    transparent 45%,
    transparent 55%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0.25) 100%
  );
  mask:radial-gradient(circle, transparent 70%, black 72%, black 98%, transparent 100%);
  -webkit-mask:radial-gradient(circle, transparent 70%, black 72%, black 98%, transparent 100%);
  z-index:2;
}

/* Main gate body ring — solid naquadah metal with ridges */
.g-outer {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at center,
    transparent 0%, transparent 70%,
    rgb(6,12,42)     70.5%,
    rgb(12,28,85)    72%,
    rgb(25,52,135)   73.5%,
    rgb(38,72,170)   75%,
    rgb(18,38,105)   76%,
    rgb(42,78,178)   77.5%,
    rgb(20,40,108)   78.5%,
    rgb(48,85,185)   80%,
    rgb(16,35,98)    81%,
    rgb(38,70,165)   82.5%,
    rgb(20,42,112)   83.5%,
    rgb(45,82,180)   85%,
    rgb(18,36,100)   86%,
    rgb(40,75,172)   87.5%,
    rgb(15,32,92)    88.5%,
    rgb(35,65,155)   90%,
    rgb(18,38,105)   91.5%,
    rgb(42,78,175)   93%,
    rgb(20,40,108)   94%,
    rgb(32,60,148)   95.5%,
    rgb(14,30,85)    97%,
    rgb(8,18,58)     98.5%,
    rgb(4,10,38)     100%
  );
  box-shadow:
    0 0 0 3px rgba(65,120,235,0.75),
    0 0 0 5px rgba(30,65,165,0.5),
    0 0 0 7px rgba(15,40,110,0.3),
    0 0 0 9px rgba(8,20,60,0.15),
    inset 0 0 25px rgba(0,0,0,0.4);
}

/* Inner glyph ring */
.g-glyphs {
  position:absolute; inset:6px; border-radius:50%;
  border:2px solid rgba(55,100,210,0.35);
  animation:gr 45s linear infinite reverse;
  pointer-events:none;
}
.g-glyph {
  position:absolute; font-family:'Share Tech Mono',monospace;
  font-size:12px; color:rgba(100,165,245,0.5);
  top:3px; left:50%; transform-origin:center 178px;
  text-shadow:0 0 10px rgba(60,120,220,0.4);
  letter-spacing:1px; font-weight:700;
}

/* Rotating chevron ring */
.g-ring {
  position:absolute; inset:16px; border-radius:50%;
  border:3px solid rgba(55,90,200,0.8);
  animation:gr 18s linear infinite;
  z-index:3;
  background:radial-gradient(circle,
    transparent 83%,
    rgba(20,45,120,0.4) 85%,
    rgba(28,58,145,0.55) 88%,
    rgba(22,48,130,0.35) 92%,
    rgba(18,40,110,0.2) 100%
  );
  box-shadow:
    0 0 24px rgba(30,65,180,0.22),
    inset 0 0 18px rgba(20,50,140,0.18),
    0 0 0 1px rgba(75,125,225,0.25);
}
.g-ring.sp   { animation-duration:2.5s; }
.g-ring.fast { animation-duration:0.5s; }

/* Chevron notches — bigger, solid, 3D */
.g-notch {
  position:absolute; width:26px; height:36px;
  background:linear-gradient(180deg, rgb(60,100,210) 0%, rgb(35,65,160) 40%, rgb(18,38,105) 100%);
  border:2px solid rgba(75,125,235,0.65);
  clip-path:polygon(12% 0%,88% 0%,100% 100%,0% 100%);
  top:-10px; left:50%; margin-left:-13px;
  transform-origin:center 174px;
  box-shadow:0 -6px 18px rgba(30,75,200,0.45);
  transition:background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.g-notch.lit {
  background:linear-gradient(180deg, rgb(255,230,70) 0%, rgb(240,190,30) 40%, rgb(200,135,10) 100%);
  border-color:rgb(255,225,60);
  box-shadow:
    0 -12px 32px rgba(245,200,50,0.9),
    0 0 20px rgba(255,220,60,0.7),
    0 0 50px rgba(255,200,50,0.25),
    inset 0 -4px 8px rgba(180,120,0,0.3);
  animation:notchFlash 0.55s ease-in-out infinite;
}

/* Inner bright edge ring between body and event horizon */
.g-inner-edge {
  position:absolute; inset:36px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(80,140,240,0.45);
  box-shadow:0 0 12px rgba(60,120,230,0.3), inset 0 0 8px rgba(60,120,230,0.15);
  z-index:4;
}

/* Event horizon container — deep solid core */
.g-inner {
  position:absolute; inset:38px; 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:3px solid rgba(45,80,180,0.75);
  overflow:hidden;
  box-shadow:
    inset 0 0 80px rgba(0,0,15,1),
    inset 0 0 40px rgba(4,14,60,0.8),
    inset 0 0 15px rgba(0,0,0,0.6),
    0 0 30px rgba(10,30,120,0.25);
}

/* 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:'Orbitron',monospace !important;
  font-size:20px !important; letter-spacing:3px !important;
  text-shadow:0 0 20px rgba(var(--accent-rgb),0.6), 0 0 40px rgba(var(--accent-rgb),0.25), 0 2px 4px rgba(0,0,0,0.8) !important;
}
#destCoords {
  font-family:'Share Tech Mono',monospace; font-size:12px;
  letter-spacing:2px; color:var(--textmid);
  text-shadow:0 0 8px rgba(var(--accent-rgb),0.2);
}

/* ── Mission card ── */
.mission-card {
  width:100%; margin-top:14px;
  background:linear-gradient(135deg, rgba(8,14,30,0.97), rgba(14,24,50,0.92));
  border:1px solid rgba(var(--accent-rgb),0.25);
  border-left:4px solid rgba(var(--accent-rgb),0.7);
  border-radius:10px; padding:16px 18px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), inset 0 0 30px rgba(var(--accent-rgb),0.03);
  position:relative; overflow:hidden;
}
.mission-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.6), transparent 50%);
}
.mission-card::after {
  content:''; position:absolute; top:0; left:0; bottom:0; width:4px;
  box-shadow:0 0 20px rgba(var(--accent-rgb),0.4), 0 0 40px rgba(var(--accent-rgb),0.15);
}
.mc-lbl {
  font-family:'Orbitron',monospace; font-size:11px; font-weight:700;
  letter-spacing:3.5px; color:var(--gold);
  text-shadow:0 0 14px rgba(224,168,48,0.5), 0 0 30px rgba(224,168,48,0.2);
  margin-bottom:8px;
}
.mc-text { font-size:14px; color:var(--textmid); line-height:1.7; letter-spacing:0.3px; }

/* ── Action buttons ── */
.gate-btns { display:flex; gap:12px; width:100%; margin-top:16px; }
.gbtn {
  flex:1; padding:16px 10px; font-family:'Orbitron',monospace; font-size:14px; font-weight:700;
  letter-spacing:2.5px; border-radius:8px; cursor:pointer; transition:all 0.25s;
  border:2px solid; text-transform:uppercase; position:relative; overflow:hidden;
}
.gbtn::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition:left 0.5s;
}
.gbtn:hover::after { left:100%; }
.gbtn-d {
  border-color:rgba(var(--accent-rgb),0.5); color:var(--accent);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.05));
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.12);
  text-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
}
.gbtn-d:hover {
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.10));
  box-shadow:0 0 24px rgba(var(--accent-rgb),0.3); transform:translateY(-3px);
}
.gbtn-e {
  border-color:rgba(var(--accent-rgb),0.7); color:white;
  background:linear-gradient(135deg, var(--accent3), var(--accent));
  box-shadow:0 0 24px rgba(var(--accent-rgb),0.35), 0 4px 20px rgba(0,0,0,0.3);
  animation:engagePulse 2.5s ease-in-out infinite;
  text-shadow:0 1px 3px rgba(0,0,0,0.4), 0 0 12px rgba(var(--accent-rgb),0.3);
}
@keyframes engagePulse {
  0%,100% { box-shadow:0 0 20px rgba(var(--accent-rgb),0.30), 0 4px 16px rgba(0,0,0,0.3); }
  50%     { box-shadow:0 0 36px rgba(var(--accent-rgb),0.55), 0 4px 24px rgba(0,0,0,0.3), 0 0 60px rgba(var(--accent-rgb),0.12); }
}
.gbtn-e:hover { filter:brightness(1.25); transform:translateY(-3px); }
.gbtn-e:disabled { opacity:0.35; cursor:not-allowed; transform:none; filter:none; box-shadow:none; animation:none; }
.gbtn-a {
  border-color:rgba(224,80,80,0.5); color:var(--danger);
  background:linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05));
  text-shadow:0 0 8px rgba(224,80,80,0.3);
}
.gbtn-a:hover { background:rgba(224,80,80,0.22); box-shadow:0 0 20px rgba(224,80,80,0.2); transform:translateY(-2px); }

/* ── Sequence bar ── */
.seq-bar {
  width:100%; margin-top:12px;
  background:linear-gradient(135deg, rgba(8,14,30,0.97), rgba(14,24,50,0.92));
  border:1px solid rgba(var(--accent-rgb),0.25);
  border-radius:10px; padding:12px 18px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.35), inset 0 0 20px rgba(var(--accent-rgb),0.02);
  position:relative;
}
.seq-bar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.3), transparent);
}
.sq-lbl { font-family:'Orbitron',monospace; font-size:10px; color:rgba(var(--accent-rgb),0.7); letter-spacing:2.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 rgba(var(--accent-rgb),0.18); background:rgba(4,8,20,0.85);
  display:flex; align-items:center; justify-content:center;
  font-family:'Share Tech Mono',monospace; font-size:14px;
  color:var(--textsoft); transition:all 0.3s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
}
.sq-sym.dialed {
  border-color:var(--accent); color:var(--accent);
  background:rgba(var(--accent-rgb),0.14);
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.5), inset 0 0 8px rgba(var(--accent-rgb),0.12);
  text-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
}
.sq-sym.origin {
  border-color:var(--gold); color:var(--gold);
  background:rgba(224,168,48,0.14);
  box-shadow:0 0 14px rgba(224,168,48,0.5), inset 0 0 6px rgba(224,168,48,0.08);
  text-shadow:0 0 8px rgba(224,168,48,0.4);
}

/* ── 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:'Orbitron',monospace; font-size:14px; font-weight:600; color:var(--textbright); letter-spacing:0.5px; }
.ts-role { font-size:14px; color:var(--textsoft); margin-top:2px; }
.ts-ok { margin-left:auto; font-family:'Share Tech Mono',monospace; font-size:14px; color:var(--success); }

/* ══════════════════════════════════════════════════════════
   TROOP SELECTION PANEL
   ══════════════════════════════════════════════════════════ */
.gate-troop-sel {
  background:linear-gradient(135deg, rgba(8,14,30,0.97), rgba(14,24,50,0.92));
  border:1px solid rgba(var(--accent-rgb),0.25);
  border-radius:10px; padding:14px 14px; margin-top:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), inset 0 0 30px rgba(var(--accent-rgb),0.02);
  position:relative;
}
.gate-troop-sel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, rgba(var(--gold-rgb,212,146,10),0.6), rgba(var(--accent-rgb),0.2), transparent 60%);
}
.gts-title {
  font-family:'Orbitron',monospace; font-size:13px; font-weight:900;
  color:var(--gold); letter-spacing:3.5px; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
  text-shadow:0 0 14px rgba(224,168,48,0.6), 0 0 30px rgba(224,168,48,0.2);
  padding-bottom:12px; border-bottom:2px solid rgba(224,168,48,0.18);
}
.gts-title::before {
  content:''; width:4px; height:18px; background:linear-gradient(180deg, var(--gold), rgba(224,168,48,0.5));
  border-radius:2px; box-shadow:0 0 14px rgba(224,168,48,0.7);
}

/* Troop accordion */
.gts-accordion { margin-bottom:8px; }
.gts-acc-hdr {
  display:flex; align-items:center; gap:8px; padding:11px 12px;
  cursor:pointer; font-family:'Orbitron',monospace; font-size:12px;
  font-weight:900; letter-spacing:2.5px; border-radius:8px;
  user-select:none; transition:all 0.25s;
  background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.05);
  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:'Orbitron',monospace; 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:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.08) !important; text-shadow:none !important; }
.gts-acc-chev { font-size:13px; flex-shrink:0; color:var(--textmid); transition:transform 0.2s; }
.gts-acc-body { border-left:3px solid rgba(var(--accent-rgb),0.25); margin-left:6px; padding-left:10px; margin-top:4px; }

/* Individual troop rows */
.gts-row {
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; margin:2px 0; border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.04);
  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 rgba(255,255,255,0.03); }
.gts-row-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gts-row-bot { display:flex; align-items:center; padding-left:36px; }
.gts-icon { font-size:24px; width:32px; text-align:center; flex-shrink:0; filter:drop-shadow(0 0 4px rgba(255,255,255,0.15)); }
.gts-name { font-family:'Orbitron',monospace; 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:'Share Tech Mono',monospace; 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:'Share Tech Mono',monospace; 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:'Share Tech Mono',monospace; font-size:11px; 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:'Orbitron',monospace; font-size:12px;
  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:'Orbitron',monospace; font-size:13px; 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:rgba(255,255,255,0.02); }

/* ── Rewards preview ── */
.gate-rewards {
  background:linear-gradient(135deg, rgba(212,146,10,0.10), rgba(212,146,10,0.03));
  border:1px solid rgba(212,146,10,0.28);
  border-left:4px solid rgba(212,146,10,0.7);
  border-radius:8px; padding:12px 14px; margin:8px 0 10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.3), inset 0 0 30px rgba(212,146,10,0.02);
  position:relative;
}
.gate-rewards::before {
  content:''; position:absolute; top:0; left:4px; right:0; height:2px;
  background:linear-gradient(90deg, rgba(212,146,10,0.4), transparent 60%);
}
.grw-title {
  font-family:'Orbitron',monospace; font-size:11px; font-weight:700;
  color:var(--gold); letter-spacing:3px; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
  text-shadow:0 0 14px rgba(224,168,48,0.5), 0 0 30px rgba(224,168,48,0.15);
}
.grw-title::before {
  content:''; width:4px; height:12px; background:linear-gradient(180deg, var(--gold), rgba(224,168,48,0.5));
  border-radius:2px; box-shadow:0 0 10px rgba(224,168,48,0.6);
}
.grw-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 8px; margin:2px 0; border-radius:5px;
  font-family:'Share Tech Mono',monospace; font-size:13px;
  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 rgba(255,255,255,0.08); }

/* ── Gate mode tabs ── */
.gate-mode-tabs { display:flex; gap:8px; margin-bottom:12px; }
.gmt {
  flex:1; padding:12px 8px; font-family:'Orbitron',monospace; font-size:11px;
  font-weight:700; letter-spacing:2px; border-radius:8px;
  cursor:pointer; transition:all 0.25s;
  border:1px solid rgba(255,255,255,0.08); color:var(--textsoft);
  background:rgba(255,255,255,0.02); text-align:center;
  position:relative;
}
.gmt.active {
  border-color:rgba(var(--accent-rgb),0.55); color:var(--accent);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.07));
  box-shadow:0 0 18px rgba(var(--accent-rgb),0.25), inset 0 0 20px rgba(var(--accent-rgb),0.05);
  text-shadow:0 0 12px rgba(var(--accent-rgb),0.5);
}
.gmt.active::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px;
  background:rgba(var(--accent-rgb),0.5); border-radius:2px;
  box-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
}
.gmt:hover:not(.active) { border-color:rgba(255,255,255,0.18); color:var(--textmid); background:rgba(255,255,255,0.05); }
.gmt.pvp-tab.active {
  border-color:rgba(255,60,60,0.55); color:#ff5555;
  background:linear-gradient(135deg, rgba(255,60,60,0.18), rgba(255,60,60,0.06));
  box-shadow:0 0 18px rgba(255,60,60,0.25), inset 0 0 20px rgba(255,60,60,0.05);
  text-shadow:0 0 12px rgba(255,60,60,0.5);
}
.gmt.pvp-tab.active::after { background:rgba(255,60,60,0.5); box-shadow:0 0 10px rgba(255,60,60,0.3); }

/* 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
   ══════════════════════════════════════════════════════════ */
.gts-power {
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.03));
  border:1px solid rgba(var(--accent-rgb),0.30);
  border-radius:10px; padding:14px 16px; margin-bottom:10px;
  transition:opacity 0.2s; position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.35), inset 0 0 40px rgba(var(--accent-rgb),0.03);
}
.gts-power::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, rgba(255,80,80,0.6), rgba(var(--accent-rgb),0.6));
}
.gts-power-row {
  display:flex; align-items:center; gap:16px; justify-content:center;
}
.gts-power-cell { text-align:center; flex:1; }
.gts-power-lbl {
  font-family:'Orbitron',monospace; font-size:10px; color:var(--textsoft);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:4px;
}
.gts-power-val {
  font-family:'Orbitron',monospace; font-size:24px; font-weight:900;
  letter-spacing:1.5px;
}
.gts-power-val.atk { color:#ff5555; text-shadow:0 0 18px rgba(255,80,80,0.5), 0 0 40px rgba(255,80,80,0.15); }
.gts-power-val.def { color:#55aaff; text-shadow:0 0 18px rgba(80,170,255,0.5), 0 0 40px rgba(80,170,255,0.15); }
.gts-power-bonus {
  display:inline-block; font-family:'Share Tech Mono',monospace; font-size:11px;
  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 rgba(255,255,255,0.06);
}
.gts-power-bar-label {
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--textsoft);
  margin-bottom:5px;
}
.gts-power-bar {
  width:100%; height:10px; border-radius:5px;
  background:rgba(255,255,255,0.06); overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.4);
}
.gts-power-fill {
  height:100%; border-radius:5px; transition:width 0.3s, background 0.3s;
  position:relative;
}
.gts-power-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  background-size:200% 100%;
  animation:powerBarShimmer 3s linear infinite;
}
@keyframes powerBarShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.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:'Orbitron',monospace; font-size:11px; 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); }

.mission-active-card {
  background:linear-gradient(135deg, rgba(10,30,60,0.97), rgba(14,24,50,0.92));
  border:1px solid var(--accent);
  border-radius:8px; padding:14px 16px; margin-bottom:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), 0 0 30px rgba(var(--accent-rgb),0.08), inset 0 0 30px rgba(var(--accent-rgb),0.03);
  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-list { display:flex; flex-direction:column; gap:6px; }
.gcmd-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.06), transparent);
  border:1px solid rgba(var(--accent-rgb),0.12);
  transition:all 0.2s;
}
.gcmd-item:hover { background:linear-gradient(90deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.03)); border-color:rgba(var(--accent-rgb),0.25); }
.gcmd-item.villain { border-color:rgba(255,60,60,0.15); background:linear-gradient(90deg, rgba(255,60,60,0.06), transparent); }
.gcmd-item.villain:hover { border-color:rgba(255,60,60,0.25); }
.gcmd-av { font-size:22px; filter:drop-shadow(0 0 4px rgba(255,255,255,0.15)); }
.gcmd-nm { font-family:'Orbitron',monospace; font-size:12px; font-weight:700; color:var(--textbright); letter-spacing:0.5px; }
.gcmd-bns { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--accent); margin-top:1px; }
.gcmd-lv { margin-left:auto; font-family:'Orbitron',monospace; font-size:11px; font-weight:700; color:var(--gold); text-shadow:0 0 8px rgba(224,168,48,0.3); }
.gcmd-tokens { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textmid); padding:6px 8px; text-align:center; border-top:1px solid rgba(255,255,255,0.06); margin-top:4px; }
.gcmd-empty { font-size:13px; color:var(--textsoft); text-align:center; padding:12px 8px; line-height:1.6; }

/* ── Energy bar (gate center) ── */
.gate-center .er-top { margin-bottom:6px; }
.gate-center .er-label { font-family:'Orbitron',monospace; font-size:11px; letter-spacing:2px; color:var(--textmid); text-shadow:0 0 6px rgba(var(--accent-rgb),0.2); }
.gate-center .er-val { font-family:'Orbitron',monospace; font-size:14px; font-weight:700; color:var(--accent); letter-spacing:2px; text-shadow:0 0 12px rgba(var(--accent-rgb),0.5); }
.gate-center .res-bar-bg { height:8px; border-radius:4px; background:rgba(255,255,255,0.06); box-shadow:inset 0 1px 3px rgba(0,0,0,0.4); }
.gate-center .res-bar-f { box-shadow:0 0 12px rgba(var(--accent-rgb),0.5), 0 0 30px rgba(var(--accent-rgb),0.15); }

/* ── Cooldown badge ── */
.planet-cd-badge {
  font-family:'Share Tech Mono',monospace; font-size:10px;
  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;
}

#sf_gate { display:none; }
#sf_gate.active { display:grid; grid-template-columns:300px minmax(420px, 1fr) 300px; }