/* =============================================================================
   contiguity.css — the CONTIGUITY BONUS hero pill in My Galaxy.

   Sits inside .gx-legend directly under the ◈ Systems / MANAGE pill, as a
   full-basis flex item so it always lands on its own row immediately beneath it.

   The ladder is drawn as rungs rather than prose because the player's question
   is "which one am I on and what is next" — a reached rung lights in its tier's
   own colour, the live one is ringed, and the rest stay legible instead of being
   greyed into mush (a locked rung is still information: it is the target).

   No fixed heights anywhere — the lead line wraps to two or three lines on a
   narrow phone and the card grows, per the fit contract.
   ============================================================================= */

.gx-legend .ctg{
  flex:1 1 100%; min-width:0; margin:2px 0 4px;
  display:flex; flex-direction:column; gap:7px;
  padding:11px 12px; border-radius:13px;
  border:1px solid #2b3a52; border-left:3px solid var(--ctg-c,#5fd1ff);
  background:linear-gradient(180deg,rgba(23,32,48,.96),rgba(14,20,32,.96));
  box-shadow:0 6px 20px -12px rgba(0,0,0,.9);
}
.ctg-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ctg-ic{font-size:13px; line-height:1; color:#7fb1ff}
.ctg-t{font:800 9.5px/1 'Orbitron',sans-serif; letter-spacing:.15em; color:#9fc4f0}
.ctg-badge{
  margin-left:auto; flex:0 0 auto;
  font:800 9.5px/1 'Orbitron',sans-serif; letter-spacing:.1em;
  padding:5px 8px; border-radius:7px; color:var(--c,#5fd1ff);
  border:1px solid color-mix(in srgb,var(--c,#5fd1ff) 55%,transparent);
  background:color-mix(in srgb,var(--c,#5fd1ff) 12%,transparent);
}
.ctg-badge.off{color:#8b95a6; border-color:#2b3a52; background:rgba(255,255,255,.03)}
.ctg-lead{font:600 12px/1.5 'Rajdhani',sans-serif; color:#c3d2e4; text-wrap:pretty}
.ctg-lead b{font-weight:800; color:#fff}

/* the ladder */
.ctg-rungs{display:flex; gap:6px; flex-wrap:wrap}
.ctg-r{
  flex:1 1 62px; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px; border-radius:9px;
  border:1px solid #26334a; background:rgba(255,255,255,.02);
}
.ctg-r b{font:800 12px/1 'Orbitron',sans-serif; color:#8fa1b8; font-variant-numeric:tabular-nums}
.ctg-r i{font:700 9.5px/1 'Rajdhani',sans-serif; font-style:normal; letter-spacing:.06em; color:#6d7f96}
.ctg-r.on{
  border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 11%,transparent);
}
.ctg-r.on b{color:#fff}
.ctg-r.on i{color:var(--c)}
/* THE RUNG YOU ARE ACTUALLY ON. A ring, not just a brighter fill: the reached
   rungs below it are lit too, so fill alone cannot say which one is paying. */
.ctg-r.live{box-shadow:0 0 0 1px var(--c), 0 4px 16px -8px var(--c)}

.ctg-next{
  font:700 10.5px/1.4 'Rajdhani',sans-serif; letter-spacing:.03em; color:#9fb0c4;
  padding-top:1px;
}
.ctg-next b{color:#fff; font-weight:800}
.ctg-foot{font:600 10.5px/1.45 'Rajdhani',sans-serif; color:#7d8ba0; text-wrap:pretty}
.ctg-foot b{color:#9fb0c4; font-weight:800}

/* =============================================================================
   SIEGE SHIELD — "no exposed border, no siege"

   The same shape that pays the contiguity bonus also defends itself, so the two
   live in one stylesheet. Four cards, one per situation the tile sheet can be
   in, on the existing .gx-shield chassis (style-v2.css) so a shield banner looks
   the same wherever it appears:
     .core       your sealed system — cyan, the game's shield colour
     .core.foe   an enemy's sealed system — the wall you cannot cross yet
     (base)      FRONT LINE — amber, because it is a warning about your own space
     .way        THE WAY IN — blue, because it is a target

   The doors are BUTTONS, not prose: naming the system to break is only half an
   instruction if the player then has to go and find it on a 1,900-tile map.
   ============================================================================= */
.gx-shield.core{border-color:rgba(215,238,255,.45); background:rgba(215,238,255,.07); color:#e2eff8}
.gx-shield.core b{color:#d7eeff}
.gx-shield.core.foe{border-color:rgba(255,122,92,.55); background:rgba(255,122,92,.1); color:#ffd8cd}
.gx-shield.core.foe b{color:#ff9d84}
.gx-shield.way{border-color:rgba(95,168,255,.5); background:rgba(45,120,235,.14); color:#d6e6fb}
.gx-shield.way b{color:#9fccff}
.gxs-doors{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.gxs-door{
  flex:0 1 auto; min-width:0; min-height:44px; padding:0 13px;
  border-radius:9px; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#ffe4da;
  font:800 11.5px/1 'Rajdhani',sans-serif; letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.gxs-door:active{transform:translateY(1px)}
/* the list row's state pill for a system nothing can reach yet */
.gxr-s.seal{color:#d7eeff; background:rgba(215,238,255,.14)}
/* MY SYSTEMS — which holds are safe and which are the wall. Ice, not cyan:
   .ms-tag.deep is already cyan and .ms-tag.home already green. */
.ms-tag.seal{color:#d7eeff; border-color:rgba(215,238,255,.5)}
.ms-tag.front{color:#ffcf4d; border-color:rgba(255,207,77,.5)}
/* the rule, stated once on the screen that teaches the shape */
.ctg-foot.seal{color:#9fc4d8}
.ctg-foot.seal b{color:#d7eeff}

@media (max-width:420px){
  .gx-legend .ctg{padding:10px 11px}
  .ctg-r{flex:1 1 46px; padding:5px 3px}
  .ctg-r b{font-size:11px}
  .ctg-r i{font-size:9px}
}