/* ============================================================
   KreepCore - Pending Actions (Civ-style "needs orders")
   ============================================================
   Surfaces:
     - Topbar lightning button (#kc-pending-topbar-btn)
     - Mobile orb tab in bottom-nav (#nav-pending)
     - Bottom-sheet (#kc-pending-sheet) shared by mobile and
       desktop. No backdrop: opening the sheet auto-navigates
       the main UI to the action's context and the user keeps
       that view interactive behind the sheet.
   ============================================================ */

/* ---------- Orb in bottom-nav (mobile + desktop) ---------- */
#nav-pending { position: relative; }
#nav-pending .kc-pending-orb {
  width: 38px;
  height: 38px;
  background: url('/assets/ui/action-orb-128.webp?v=universe-orb-01') center/contain no-repeat;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: -19px;
  transition: transform 0.18s ease, filter 0.18s ease;
}
#nav-pending.has-pending .kc-pending-orb {
  animation: kc-pending-orb-pulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.55));
}
#nav-pending:hover .kc-pending-orb {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.65));
}
#nav-pending:active .kc-pending-orb { transform: scale(0.94); }
.kc-pending-orb-badge {
  position: absolute;
  /* Follow the orb up so the badge stays at its top-right corner
     when the orb itself is lifted to overlap the bottom-nav edge. */
  top: -21px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #0a0e1c;
}
.kc-pending-orb-badge.hidden { display: none; }
#nav-pending .nav-label-orb {
  /* Inherit font-size, color and hover behaviour from .nav-item so the
     "Acciones" label matches Flotas/Mapa/Comms exactly. The only override
     is the negative margin-top that pulls it up under the lifted orb. */
  margin-top: -10px;
}
.bottom-nav #nav-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
}

/* ---------- Bottom HUD decision orbs (left=domestic, right=expansion) ----------
   Diablo-style health/mana orbs reframed for KreepCore: corner-anchored,
   matched glass-sphere aesthetic, different symbology + hue per orb.
   The central #nav-pending orb is superseded by these two. */
#nav-pending { display: none !important; }

.kc-hud-orb {
  display: none;
  position: fixed;
  bottom: calc(var(--bottom-sai, 0px) + 8px);
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.game-active .kc-hud-orb { display: flex; }
.kc-hud-orb--domestic { left: 8px; }
.kc-hud-orb--expansion { right: 8px; }

/* Holographic orb (P5a): wireframe sphere drawn as inline SVG, flat
   luminance fill, thin rim in the pillar colour, dashed tick ring.
   No glossy raster sphere. Per-orb hue rides --orb-c. */
.kc-hud-orb { --orb-c: 0, 240, 255; }
.kc-hud-orb--expansion { --orb-c: 250, 204, 21; }

.kc-hud-orb-img {
  width: 60px;
  height: 60px;
  transition: transform 0.18s ease, filter 0.2s ease;
  filter: drop-shadow(0 0 8px rgba(var(--orb-c), 0.4));
}
.kc-hud-orb-img svg {
  display: block;
  width: 100%;
  height: 100%;
}
.kc-orb-ticks {
  fill: none;
  stroke: rgba(var(--orb-c), 0.55);
  stroke-width: 2.4;
  stroke-dasharray: 1.6 4.5;
}
.kc-orb-rim {
  fill: none;
  stroke: rgba(var(--orb-c), 0.95);
  stroke-width: 1.4;
}
.kc-orb-wire {
  fill: none;
  stroke: rgba(var(--orb-c), 0.5);
  stroke-width: 0.8;
}
.kc-orb-wire--soft { stroke: rgba(var(--orb-c), 0.26); }

/* ---------- Activity rings (domestic orb) ----------
   Thin circular gauges around the sphere: outer amber tracks the most
   advanced construction on the current planet, inner violet tracks the
   active research. Hidden while nothing is in progress. */
.kc-orb-ring { display: none; }
.kc-orb-ring.is-on { display: block; }
.kc-orb-ring--build { --ring-c: 245, 158, 11; }
.kc-orb-ring--research { --ring-c: 139, 92, 246; }
.kc-orb-ring-track {
  fill: none;
  stroke: rgba(var(--ring-c), 0.18);
  stroke-width: 1.5;
}
.kc-orb-ring-bar {
  fill: none;
  stroke: rgb(var(--ring-c));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s linear;
  filter: drop-shadow(0 0 2.5px rgba(var(--ring-c), 0.9));
  animation: kc-orb-ring-breathe 3.2s ease-in-out infinite;
}
@keyframes kc-orb-ring-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
/* Brief flash when a tracked item completes */
.kc-orb-ring.is-done-pulse {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: kc-orb-ring-done 0.55s ease-out 2;
}
@keyframes kc-orb-ring-done {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.09); opacity: 0.35; }
  100% { transform: scale(1); opacity: 1; }
}

.kc-hud-orb:hover .kc-hud-orb-img {
  transform: scale(1.07) translateY(-1px);
  filter: drop-shadow(0 0 16px rgba(var(--orb-c), 0.8)) brightness(1.1);
}
.kc-hud-orb:active .kc-hud-orb-img { transform: scale(0.95); }
.kc-hud-orb.has-pending .kc-hud-orb-img {
  animation: kc-pending-orb-pulse 1.8s ease-in-out infinite;
}

/* Label sits ABOVE the orb (console spec): centered, never clipped. */
.kc-hud-orb-label {
  order: -1;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  /* The label floats over whatever sits above the console (news ticker
     on mobile): give it its own dark plate so it reads as layered HUD. */
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(4, 8, 18, 0.78);
  border: 1px solid rgba(var(--orb-c), 0.25);
}
.kc-hud-orb:hover .kc-hud-orb-label { color: var(--text-secondary); }

/* Counter integrated on the socket rim (lower edge of the orb), in the
   pillar colour with dark text - not a red sticker on the sphere. */
.kc-hud-orb-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24px;
  height: 19px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(var(--orb-c), 0.95);
  color: #04101c;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(4, 16, 28, 0.85);
}
.kc-hud-orb-badge.hidden { display: none; }

/* Command console (P5a): the bottom nav becomes a unified console strip
   with recessed sockets at both corners that the orbs half-rise from. */
html.game-active .bottom-nav {
  background: linear-gradient(180deg, rgba(10, 18, 34, 0.94), rgba(4, 8, 18, 0.98));
  border-top: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
}
/* Socket drawn by the orb itself (always perfectly centered behind the
   sphere, whatever width the label gives the button). Opaque through
   the middle radii so it notches the console's accent top-line. */
.kc-hud-orb-img { position: relative; }
.kc-hud-orb-img::before {
  content: '';
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(2, 6, 14, 0.96) 56%, rgba(2, 6, 14, 0.7) 66%, transparent 74%);
  border: 1px solid rgba(var(--orb-c), 0.35);
  box-shadow: inset 0 0 12px rgba(var(--orb-c), 0.16);
}

/* La Ruta: backward-chained route section at the top of the Missions/Domestic board.
   Inherits the board's --pending-accent (so it matches the panel it lives in). */
.kc-ruta-section-head { color: rgba(var(--pending-accent-light), 1); }
.kc-ruta-step.is-locked { opacity: 0.5; }
.kc-ruta-step.is-locked .kc-board-thumb { filter: grayscale(0.6); }
.kc-ruta-step.is-doable {
  border-color: rgba(var(--pending-accent), 0.6);
  background: rgba(var(--pending-accent), 0.1);
}
.kc-board-row-sub-inline { margin-left: 6px; opacity: 0.7; font-size: 0.82em; }
.kc-ruta-msg { padding: 26px 16px; text-align: center; color: rgba(203, 213, 225, 0.8); font-size: 0.85rem; }
.kc-ruta-race { margin-top: 8px; opacity: 0.9; }
.kc-ruta-step-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kc-ruta-step-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(var(--pending-accent), 0.35); }
.kc-ruta-step-fill { display: block; height: 100%; min-width: 6px; background: rgba(var(--pending-accent-light), 1); box-shadow: 0 0 6px rgba(var(--pending-accent), 0.7); transition: width 220ms ease; }
.kc-ruta-step-bar.is-paused .kc-ruta-step-fill { background: rgba(148, 163, 184, 0.8); box-shadow: none; }
.kc-ruta-step-pct { flex: none; font-size: 0.72rem; font-weight: 700; color: rgba(var(--pending-accent-light), 1); }

@media (min-width: 1024px) {
  .kc-hud-orb { bottom: calc(var(--bottom-sai, 0px) + 12px); }
  .kc-hud-orb-img { width: 72px; height: 72px; }
  .kc-hud-orb-label { font-size: 10px; }
  .kc-hud-orb-badge {
    min-width: 28px;
    height: 22px;
    font-size: 14px;
    bottom: 3px;
  }
}

/* Mirror the bottom-nav overlay-hide behaviour */
body:has(
  .collection-detail-overlay:not([hidden]),
  .balance-ledger-overlay:not([hidden]),
  .card-zoom-backdrop.visible,
  .confirm-overlay:not([hidden]),
  .fleet-dispatch-overlay,
  .prereq-overlay,
  .battle-report-overlay,
  #player-profile-modal
) .kc-hud-orb { display: none; }

/* ---------- The sheet (shared mobile + desktop) ----------- */
#kc-pending-backdrop {
  /* Kept in DOM for legacy CSS hooks but never visible: opening the
     sheet leaves the main UI interactive behind. */
  display: none !important;
}

/* Kind-driven accent colour. Each kind owns the panel: counter pill,
   hero border, title, CTA glow, and the panel's own top-radial glow
   all read from the same --pending-accent. */
#kc-pending-sheet {
  --pending-accent: 250, 204, 21;        /* amber default (megaproject) */
  --pending-accent-light: 253, 230, 138; /* amber-100 */
}
#kc-pending-sheet[data-kind="colony_idle"] {
  --pending-accent: 56, 189, 248;        /* cyan-400 */
  --pending-accent-light: 186, 230, 253; /* cyan-100 */
}
#kc-pending-sheet[data-kind="fleet_idle"],
#kc-pending-sheet[data-kind="fleet_orphan"] {
  --pending-accent: 168, 85, 247;        /* violet-500 */
  --pending-accent-light: 233, 213, 255; /* violet-100 */
}
#kc-pending-sheet[data-kind="research_idle"] {
  --pending-accent: 16, 185, 129;        /* emerald-500 */
  --pending-accent-light: 167, 243, 208; /* emerald-200 */
}

#kc-pending-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  /* Radial glow at the top of the panel in the kind colour, layered
     over the navy gradient. Gives the panel atmosphere without art. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
                    rgba(var(--pending-accent), 0.22), transparent 70%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.97));
  /* Sci-fi frame matching the building/ship/research cards (hud-frame
     atlas, 9-slice). Replaces the previous flat 18px rounded top. */
  border-image-source: url('../../assets/ui/hud-frame.webp');
  border-image-slice: 94;
  border-image-width: 7px;
  border-image-repeat: stretch;
  border-style: solid;
  border-width: 7px;
  border-radius: 4px;
  /* Sheet itself has no padding so the hero can bleed to the edges,
     matching the planet-info card. Body content carries its own
     padding below the hero. */
  padding: 0;
  overflow: hidden;
  transform: translateY(110%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55),
              0 0 32px rgba(var(--pending-accent), 0.22);
  pointer-events: auto;
}
/* Kind-coloured tint on the frame, same trick the building card uses. */
#kc-pending-sheet::after {
  content: '';
  position: absolute;
  inset: -7px;
  z-index: 6;
  pointer-events: none;
  border: 7px solid rgba(var(--pending-accent), 1);
  border-radius: 4px;
  opacity: 0.30;
  mix-blend-mode: color;
}
#kc-pending-sheet.is-open { transform: translateY(0); }
#kc-pending-sheet:not(.is-open) { pointer-events: none; }

/* When the sheet is open, extend scroll range via #kc-pending-scroll-spacer
   (injected in kc-pending.js). scroll-padding helps focus-into-view only.
   The solar map uses camera lift instead — never pad/scroll there.
   Corner-docked desktop sheets float over side columns — never pad
   .kc-d3-left/.kc-d3-right or Últimas novedades shrinks (scrollbar + height). */
body.kc-pending-open #kc-d3-center:not(:has(#screen-map.active)),
body.kc-pending-open #game-ui:not(:has(#screen-map.active)) {
  scroll-padding-bottom: var(--kc-pending-sheet-h, 0px);
}
.kc-pending-scroll-spacer {
  width: 100%;
  flex: 0 0 auto;
  flex-shrink: 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* Counter pill and close button live OVER the hero, like the planet
   card. They are direct children of the sheet, absolute-positioned. */
.kc-pending-sheet-counter {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(var(--pending-accent), 0.95);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(var(--pending-accent), 0.45);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}
.kc-pending-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.kc-pending-sheet-close svg {
  width: 14px;
  height: 14px;
}
.kc-pending-sheet-close:hover,
.kc-pending-sheet-close:active { background: rgba(0, 0, 0, 0.6); }

/* Hero banner: full-bleed art, edge to edge across the top of the
   sheet. Sheet's overflow:hidden + border-radius clip the top corners. */
.kc-pending-hero {
  position: relative;
  height: 180px;
  width: 100%;
  background-color: rgba(15, 23, 42, 0.7);
  background-size: cover;
  background-position: center;
  border: none;
  border-bottom: 1px solid rgba(var(--pending-accent), 0.28);
  margin: 0;
}
.kc-pending-hero[data-hero-type="image"]::after {
  /* Soft fade into the panel for visual continuity with the body. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 6, 23, 0.55) 100%);
  pointer-events: none;
}
/* Single-ship sprite hero: the sprites are transparent square assets
   meant for collection cards. Show them contained over a deep-space
   backdrop instead of stretching them edge to edge. The inline
   background-image (the sprite url) wins over CSS; this class only
   adjusts how it's sized and what sits behind. */
.kc-pending-hero--sprite {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #050b16;
}
.kc-pending-hero--sprite::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.kc-pending-hero-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--pending-accent), 0.45), transparent 65%);
  pointer-events: none;
  filter: blur(2px);
}
.kc-pending-hero-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  color: rgb(var(--pending-accent));
  fill: currentColor;
  filter: drop-shadow(0 0 12px rgba(var(--pending-accent), 0.7));
  pointer-events: none;
}

@media (max-width: 600px) {
  .kc-pending-hero { height: 110px; }
  .kc-pending-hero-halo { width: 110px; height: 110px; }
  .kc-pending-hero-svg { width: 44px; height: 44px; }

  /* Photographic hero (colony art): promote to full-modal background. */
  #kc-pending-sheet[data-hero-mode="bg"] .kc-pending-hero[data-hero-type="image"] {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 0;
    border-bottom: none;
  }
  #kc-pending-sheet[data-hero-mode="bg"] .kc-pending-hero[data-hero-type="image"]::after {
    background: linear-gradient(180deg,
      rgba(2, 6, 23, 0.30) 0%,
      rgba(2, 6, 23, 0.55) 22%,
      rgba(2, 6, 23, 0.88) 55%,
      rgba(2, 6, 23, 0.97) 100%);
  }
  #kc-pending-sheet[data-hero-mode="bg"] .kc-pending-sheet-body {
    position: relative;
    z-index: 1;
    padding-top: 50px;
  }

  /* Per-line readable backdrop: each text line gets its own pill, fitted
     to the text width with a tight padding. Lighter opacity than a full
     block panel since the contrast surface is much smaller. */
  .kc-pending-sheet-title,
  .kc-pending-sheet-sub,
  .kc-pending-sheet-hint {
    display: inline-block;
    background: rgba(2, 6, 23, 0.40);
    padding: 2px 10px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
  }
}

/* Body holds everything below the hero, with its own internal padding
   since the sheet's padding is 0 to allow the hero full-bleed. */
.kc-pending-sheet-body {
  padding: 16px 18px 20px;
}

/* Header block: centred title + secondary lines, mirrors the planet
   card pattern (big title, monospace coords-style sub, italic hint). */
.kc-pending-sheet-head {
  text-align: center;
  margin-bottom: 16px;
}
.kc-pending-sheet-title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgb(var(--pending-accent-light));
  text-shadow: 0 0 12px rgba(var(--pending-accent), 0.35);
  line-height: 1.25;
}
.kc-pending-sheet-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono);
  line-height: 1.4;
  margin-top: 2px;
}
.kc-pending-sheet-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}
/* Bonuses inline, to the right of the planet/star name (saves a row).
   Resource icon + colour spans from the shared bonus renderers. */
.kc-pending-sub-bonus {
  margin-left: 8px;
  white-space: nowrap;
}
.kc-pending-sheet-sub .planet-bonuses {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

/* Foreign colony: owner + relationship chip above the coords line.
   Meaning is carried by the label text + shape glyph; colour only
   reinforces (colourblind-safe). */
.kc-pending-sheet-owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 2px 0 4px;
}
.kc-pending-owner-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.3px;
}
/* Owner name as a clickable link to the player dossier. */
button.kc-pending-owner-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 2px;
}
button.kc-pending-owner-link:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.8); }
.kc-pending-owner-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.kc-pending-owner-info:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.kc-pending-owner-info svg { width: 14px; height: 14px; }
.kc-pending-rel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.kc-pending-rel svg { width: 13px; height: 13px; }
.kc-pending-rel--hostil  { color: rgb(255, 150, 100); }
.kc-pending-rel--neutral { color: rgb(180, 192, 214); }
.kc-pending-rel--amigo   { color: rgb(90, 212, 232); }
.kc-pending-owner-pacts {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* 2x2 primary actions grid (fleet kinds only). Each button is an
   outlined pill in the kind accent, with an SVG icon above the label
   on narrow screens or beside on wider ones. */
.kc-pending-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.kc-pending-actions.is-three-up .kc-pending-action-btn:nth-child(3) {
  grid-column: 1 / -1;
}
.kc-pending-actions .kc-pending-action-btn:only-child {
  grid-column: 1 / -1;
}
.kc-pending-actions .kc-pending-action-btn {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.kc-pending-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  background: linear-gradient(180deg,
              rgba(var(--pending-accent), 0.16),
              rgba(var(--pending-accent), 0.06));
  border: 1px solid rgba(var(--pending-accent), 0.5);
  color: rgb(var(--pending-accent-light));
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.kc-pending-action-btn:hover {
  background: linear-gradient(180deg,
              rgba(var(--pending-accent), 0.26),
              rgba(var(--pending-accent), 0.12));
  border-color: rgba(var(--pending-accent), 0.75);
}
.kc-pending-action-btn:active { transform: translateY(1px); }
.kc-pending-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}
/* 'Blocked' state: the action can't run right now (no leader, no
   target fleet, etc.) but the button stays tappable so a tap can
   surface the reason in a modal. Mobile has no hover, so the tooltip
   alone isn't enough. */
.kc-pending-action-btn--blocked {
  opacity: 0.55;
  background: transparent;
}
.kc-pending-action-btn--blocked:hover {
  background: rgba(var(--pending-accent), 0.08);
  border-color: rgba(var(--pending-accent), 0.55);
}
/* Aggressive actions (spy/attack) on a foreign colony. Meaning is carried
   by the label + war advisor; the warm tint only reinforces (colourblind-safe). */
.kc-pending-action-btn--danger {
  background: linear-gradient(180deg, rgba(248, 90, 70, 0.16), rgba(248, 90, 70, 0.06));
  border-color: rgba(248, 90, 70, 0.55);
  color: rgb(255, 170, 152);
}
.kc-pending-action-btn--danger:hover {
  background: linear-gradient(180deg, rgba(248, 90, 70, 0.26), rgba(248, 90, 70, 0.12));
  border-color: rgba(248, 90, 70, 0.8);
}
.kc-pending-action-btn--danger .kc-pending-action-avatar {
  border-color: rgba(248, 90, 70, 0.6);
  box-shadow: 0 0 10px rgba(248, 90, 70, 0.2);
}
.kc-pending-action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Icons in the existing <symbol> library have no fill attribute and
     fall back to black. Make them silhouette in the accent colour.
     icon-route's paths set fill="none" inline so they keep their
     outline-only look. */
  fill: currentColor;
}
/* Advisor portrait + stacked label (colony_idle). */
.kc-pending-action-btn--advisor {
  justify-content: flex-start;
  min-height: 52px;
  padding: 8px 12px;
  text-transform: none;
  letter-spacing: 0.2px;
}
.kc-pending-action-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(var(--pending-accent), 0.55);
  box-shadow: 0 0 10px rgba(var(--pending-accent), 0.18);
}
.kc-pending-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.kc-pending-action-advisor {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.82;
  line-height: 1.2;
  max-width: 100%;
}
.kc-pending-action-bld {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .kc-pending-sheet-body {
    padding-left: 14px;
    padding-right: 14px;
  }
  .kc-pending-action-btn--advisor {
    align-items: flex-start;
    padding: 8px 10px;
    gap: 6px;
    min-height: 56px;
  }
  .kc-pending-action-avatar {
    width: 32px;
    height: 32px;
    margin-top: 1px;
  }
  .kc-pending-action-advisor {
    font-size: 9px;
    letter-spacing: 0.4px;
    line-height: 1.25;
  }
  .kc-pending-action-bld {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* Stacked secondary rows below the actions grid: snooze (full-width)
   and Anterior / Siguiente split 50/50. */
.kc-pending-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.kc-pending-row--split > * { flex: 1 1 0; }
.kc-pending-cta-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  cursor: pointer;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kc-pending-cta-btn svg {
  width: 14px;
  height: 14px;
}
/* Snooze row main button: outlined in the kind accent (e.g. cyan for
   colony, amber for megaproject), like the primary CTA in planet card. */
.kc-pending-cta-main {
  border-color: rgba(var(--pending-accent), 0.5);
  color: rgb(var(--pending-accent-light));
}
.kc-pending-cta-main:hover,
.kc-pending-cta-main:active {
  background: rgba(var(--pending-accent), 0.1);
  border-color: rgba(var(--pending-accent), 0.7);
}
/* Fortify (fleet only) sits next to Ignorar 1h in a split row. */
.kc-pending-cta-aux {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}
.kc-pending-cta-aux:hover,
.kc-pending-cta-aux:active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
}
/* Anterior / Siguiente — dim secondary outlined, like Renombrar. */
.kc-pending-cta-secondary {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
}
.kc-pending-cta-secondary:hover,
.kc-pending-cta-secondary:active {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
}

/* The bottom-nav stays visible on desktop3 too (just slimmed via
   layout/desktop-grid.css), so the same #nav-pending orb works for
   both viewports — no extra FAB needed. */

/* ---------- Desktop: float the sheet, don't pin to edges --- */
/* ---------- Fleet mode chip in the Flotas card -------------- */
.fleet-tpl-card-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 9px;
  margin-bottom: 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: rgba(226, 232, 240, 0.85);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fleet-tpl-card-mode:hover {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.55);
}
.fleet-tpl-card-mode svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.fleet-tpl-card-mode--hibernated {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.45);
  color: #c7d2fe;
}
.fleet-tpl-card-mode--hibernated:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.65);
}
.fleet-tpl-card-mode--exploring {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
}
.fleet-tpl-card-mode--exploring:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.65);
}

/* ---------- Mode picker (Flotas badge -> 3 buttons) --------- */
.kc-pending-mode-menu .kc-pending-confirm-body {
  text-align: center;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.8);
}
.kc-pending-mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.kc-pending-mode-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kc-pending-mode-option svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.kc-pending-mode-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}
.kc-pending-mode-option.is-current {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.45);
  color: #bae6fd;
  cursor: default;
  opacity: 0.85;
}

/* ---------- Confirmation modal (Hibernar / Explorar / Agrupar) ----- */
#kc-pending-confirm {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 5, 14, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  /* Kind accent inherited by the card */
  --pending-accent: 250, 204, 21;
  --pending-accent-light: 253, 230, 138;
}
#kc-pending-confirm.is-open {
  opacity: 1;
  pointer-events: auto;
}
#kc-pending-confirm[data-kind="colony_idle"] {
  --pending-accent: 56, 189, 248;
  --pending-accent-light: 186, 230, 253;
}
#kc-pending-confirm[data-kind="fleet_idle"] {
  --pending-accent: 168, 85, 247;
  --pending-accent-light: 233, 213, 255;
}
#kc-pending-confirm[data-kind="research_idle"] {
  --pending-accent: 16, 185, 129;
  --pending-accent-light: 167, 243, 208;
}
.kc-pending-confirm-card {
  width: min(440px, 100%);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(var(--pending-accent), 0.55);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7),
              0 0 28px rgba(var(--pending-accent), 0.2);
}
.kc-pending-confirm-title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgb(var(--pending-accent-light));
  text-shadow: 0 0 12px rgba(var(--pending-accent), 0.35);
}
.kc-pending-confirm-body {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.kc-pending-confirm-row {
  display: flex;
  gap: 10px;
}
.kc-pending-confirm-row > button {
  flex: 1 1 0;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.kc-pending-confirm-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
}
.kc-pending-confirm-cancel:hover { background: rgba(255, 255, 255, 0.06); }
.kc-pending-confirm-go {
  background: linear-gradient(180deg,
              rgba(var(--pending-accent), 0.22),
              rgba(var(--pending-accent), 0.1));
  border: 1px solid rgba(var(--pending-accent), 0.6);
  color: rgb(var(--pending-accent-light));
}
.kc-pending-confirm-go:hover {
  background: linear-gradient(180deg,
              rgba(var(--pending-accent), 0.32),
              rgba(var(--pending-accent), 0.16));
  border-color: rgba(var(--pending-accent), 0.8);
}
.kc-pending-confirm-go svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Leader picker overlay (covert-op operative picker). Near-solid scrim, no blur. */
.kc-embassy-picker {
  position: fixed;
  inset: 0;
  /* Above the mission board sheet (10000) so it can stay open behind. */
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 9, 18, 0.82);
  padding: 18px;
}
.kc-embassy-picker-card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, rgba(16, 24, 40, 0.98), rgba(10, 16, 28, 0.98));
  border: 1px solid rgba(var(--pending-accent), 0.5);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.kc-embassy-picker-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgb(var(--pending-accent-light));
  text-align: center;
}
.kc-embassy-picker-sub {
  margin: -8px 0 12px;
  font-size: 12px;
  color: rgba(214, 226, 247, 0.75);
  text-align: center;
}
.kc-embassy-leader-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.kc-embassy-leader-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.kc-embassy-leader {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(var(--pending-accent), 0.14), rgba(var(--pending-accent), 0.05));
  border: 1px solid rgba(var(--pending-accent), 0.45);
  border-radius: 9px;
  color: rgb(var(--pending-accent-light));
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.kc-embassy-leader:hover {
  background: linear-gradient(180deg, rgba(var(--pending-accent), 0.28), rgba(var(--pending-accent), 0.12));
  border-color: rgba(var(--pending-accent), 0.85);
}
.kc-embassy-leader:active { transform: translateY(1px); }
.kc-embassy-leader:disabled { opacity: 0.5; cursor: default; }
.kc-embassy-leader.is-busy { opacity: 0.55; }
.kc-embassy-leader-thumb {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(var(--pending-accent), 0.5);
  background-color: rgba(var(--pending-accent), 0.12);
}
.kc-embassy-leader-thumb--none {
  background-image: url(assets/advisors/thumb/civil.webp);
  filter: grayscale(0.4) brightness(0.8);
}
.kc-embassy-leader-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.kc-embassy-leader-meta {
  font-size: 12.5px;
  opacity: 0.78;
  letter-spacing: 0.2px;
  font-family: var(--font-mono);
}
/* A-priori infiltration risk: label + width-coded bar, blue->amber ramp.
   Width and text label carry the meaning (colourblind-safe); hue is a cue. */
.infil-risk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.infil-risk-label {
  white-space: nowrap;
}
.infil-risk-bar {
  position: relative;
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.infil-risk-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: #38bdf8;
}
.infil-risk-fill--vlow  { background: #38bdf8; }
.infil-risk-fill--low   { background: #67c6e8; }
.infil-risk-fill--mid   { background: #cbd5a0; }
.infil-risk-fill--high  { background: #f0c14b; }
.infil-risk-fill--vhigh { background: #f0a830; }
.kc-embassy-info {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--pending-accent), 0.35);
  border-radius: 9px;
  color: rgb(var(--pending-accent-light));
  cursor: pointer;
}
.kc-embassy-info:hover { border-color: rgba(var(--pending-accent), 0.8); background: rgba(255, 255, 255, 0.08); }
.kc-embassy-info svg { width: 20px; height: 20px; }
.kc-embassy-empty {
  padding: 14px 6px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}
.kc-embassy-cancel {
  margin-top: 12px;
  width: 100%;
  min-height: 42px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Mission replacement countdown (P4b) */
.kc-pending-sheet-renew {
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(var(--pending-accent-light), 0.75);
  text-align: center;
}

/* Desktop: the sheet docks to its orb's corner as a card-width panel
   instead of stretching across the whole viewport (P4b feedback).
   Expansion/Missions orb lives bottom-right (default); the Domestic
   scope mirrors to the left corner. */
@media (min-width: 1024px) {
  #kc-pending-sheet {
    left: auto;
    right: 16px;
    bottom: calc(var(--bottom-sai, 0px) + 104px);
    width: 440px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    /* Floating panel over busy card grids: wrap-around depth shadow +
       crisp dark outline so its bounds read against any background
       (the base rule only throws shadow upward, bottom-sheet style). */
    box-shadow:
      0 0 0 1px rgba(var(--pending-accent), 0.85),
      0 0 0 7px rgba(0, 0, 0, 0.55),
      0 24px 70px rgba(0, 0, 0, 0.95),
      0 0 42px rgba(var(--pending-accent), 0.3);
    /* Closed: clear the anchored bottom offset too, or a short (empty)
       sheet pokes out above the orb - 110% of its own height is not
       enough when it sits 104px up from the viewport edge. */
    transform: translateY(calc(110% + 140px));
    visibility: hidden;
    transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.24s;
  }
  #kc-pending-sheet.is-open {
    visibility: visible;
    transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0s;
  }
  #kc-pending-sheet.is-open {
    transform: translateY(0);
  }
  #kc-pending-sheet.kc-pending-sheet--domestic {
    right: auto;
    left: 16px;
  }
}

/* Bulletin board view (P4b): grouped list inside the orb sheet */
.kc-board-body {
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Ops colony detail: second page slides in horizontally within the sheet */
.kc-board-page--detail { animation: kc-board-ops-slide-in 0.26s ease; }
@keyframes kc-board-ops-slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
.kc-board-ops-back {
  appearance: none;
  cursor: pointer;
  color: rgba(var(--pending-accent-light), 0.95);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 12px;
  padding: 3px 10px 3px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(var(--pending-accent), 0.1);
  border: 1px solid rgba(var(--pending-accent), 0.3);
  border-radius: 999px;
}
.kc-board-ops-back:hover { background: rgba(var(--pending-accent), 0.18); }
.kc-board-ops-back svg { width: 15px; height: 15px; }

/* Ops detail page: adopt the board's gold/dark palette so the second page
   matches the list page (dossier text + view-cell action buttons). */
#kc-pending-sheet .kc-board-page--detail .dom-explore-target-name {
  color: rgba(var(--pending-accent-light), 0.95);
}
#kc-pending-sheet .kc-board-page--detail .dom-explore-target-stat-label,
#kc-pending-sheet .kc-board-page--detail .dom-planet-intel-row > span:first-child {
  color: rgba(var(--pending-accent-light), 0.6);
}
#kc-pending-sheet .kc-board-page--detail .kc-board-view-cell {
  padding: 10px;
}
#kc-pending-sheet .kc-board-page--detail .kc-board-view-cell .kc-board-thumb {
  width: 48px;
  height: 36px;
  border-radius: 8px;
}
#kc-pending-sheet .kc-board-page--detail .kc-board-view-cell:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Explore / colonize compact detail: map focuses on the target, this panel
   stays docked at the bottom of the sheet (reuses thumb + action-btn styles). */
.kc-board-mission-detail { display: flex; flex-direction: column; gap: 12px; }
.kc-board-mission-head { display: flex; align-items: center; gap: 12px; }
.kc-board-mission-head .kc-board-thumb { flex: 0 0 auto; width: 56px; height: 42px; border-radius: 8px; }
.kc-board-mission-headtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kc-board-mission-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: rgba(var(--pending-accent-light), 0.96);
  line-height: 1.2;
}
.kc-board-mission-meta {
  font-size: 0.78rem;
  color: rgba(var(--pending-accent-light), 0.62);
}
.kc-board-mission-meta .kc-board-loc-planets { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.kc-board-mission-meta .kc-board-planet-icon { width: 13px; height: 13px; opacity: 0.85; }
.kc-board-mission-bonuses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Clickable owner in the ops dossier → opens the empire/NPC dossier. */
.dom-ops-owner {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: rgba(var(--pending-accent-light, 253, 230, 138), 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.dom-ops-owner svg { width: 13px; height: 13px; }
/* Base section heading (used by the tabbed overlay's ops detail). */
.dom-ops-section-title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(150, 175, 225, 0.85);
  margin: 14px 0 8px;
}
.kc-board-title {
  margin: 2px 0 10px;
  text-align: left;
}
.kc-board-count {
  position: absolute;
  top: 14px;
  right: 46px;
  min-width: 22px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  background: rgba(var(--pending-accent), 0.16);
  color: rgb(var(--pending-accent-light));
}
.kc-board-cat {
  margin: 12px 0 6px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--pending-accent-light), 0.7);
}
.kc-board-cat:first-of-type { margin-top: 2px; }
.kc-board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid rgba(var(--pending-accent), 0.22);
  background: rgba(var(--pending-accent), 0.05);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.kc-board-row:hover {
  background: rgba(var(--pending-accent), 0.12);
}
/* Domestic board: VISTAS shortcuts as a compact 2x2 grid */
.kc-board-views-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.kc-board-view-cell {
  width: auto;
  margin-bottom: 0;
  gap: 8px;
  min-width: 0;
}
.kc-board-view-cell .kc-board-thumb {
  width: 34px;
  height: 26px;
}
.kc-board-view-cell .kc-board-row-title {
  font-size: 0.8rem;
}
/* Victory tag chip on sheet cards (which VC the card feeds) */
.kc-pending-vc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(var(--pending-accent), 0.35);
  border-radius: 10px;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--pending-accent-light));
}
.kc-pending-vc-tag svg {
  width: 12px;
  height: 12px;
}

/* Orb gauge level moves smoothly as pending pressure changes */
.kc-orb-fill-level {
  transition: y 0.6s ease, height 0.6s ease;
}

/* ---------- Domestic board: Cola (live work) rows ---------- */
.kc-board-queue-row { user-select: none; }
.kc-board-queue-bar {
  height: 4px;
  margin-top: 5px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.kc-board-queue-bar .kc-board-queue-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.9s linear;
}
.kc-board-queue-time {
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
  font-size: 0.7rem;
  color: rgba(var(--pending-accent-light), 0.85);
}
.kc-board-queue-time--queued {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Rows with action buttons wrap them onto their own full-width line so
   the building name and the deficit list keep the whole text column. */
.kc-board-queue-row {
  flex-wrap: wrap;
  row-gap: 4px;
}
/* Match task-card-icon: thumbnail spans the full row height (incl. deficit line). */
.kc-board-queue-row > .kc-board-thumb {
  align-self: stretch;
  width: 52px;
  height: auto;
  min-height: 32px;
  margin: -8px 10px -8px -8px;
  border-radius: 9px 0 0 9px;
}
.kc-board-queue-actions {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.kc-board-queue-actions .btn-cancel-card { padding: 4px 10px; }
.kc-board-queue-speed {
  padding: 4px 8px;
  font-size: 0.62rem;
  white-space: nowrap;
}
.kc-board-queue-speed:empty { display: none; }
.kc-board-speed-cr { color: var(--credits-color, #fbbf24); }
.kc-board-queue-deficit {
  font-size: 0.66rem;
  line-height: 1.3;
}
.kc-board-queue-deficit:empty { display: none; }
.kc-board-queue-deficit .queue-missing-label { color: var(--text-dim); }
.kc-board-queue-colony {
  background: rgba(var(--pending-accent), 0.07);
}
.kc-board-queue-colony.is-expanded .kc-board-row-title {
  color: rgb(var(--pending-accent-light));
}
.kc-board-queue-empty {
  padding: 6px 8px 10px;
  font-size: 0.74rem;
  color: var(--text-dim);
}

.kc-board-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 32px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
}
.kc-board-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--pending-accent), 0.12);
}
.kc-board-thumb--icon svg {
  width: 18px;
  height: 18px;
  color: rgb(var(--pending-accent-light));
}
/* Embedded covert agent card (Infiltrar -> agent on-site) */
.dom-ops-agent {
  align-items: center;
  background: rgba(var(--pending-accent), 0.08);
}
.dom-ops-agent-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(var(--pending-accent-light), 0.5);
}
.dom-ops-agent .dom-ops-withdraw {
  flex-shrink: 0;
  margin-left: auto;
}
.kc-board-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kc-board-row-title {
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-board-colony-link {
  cursor: pointer;
}
.kc-board-queue-colony .kc-board-row-title.kc-board-colony-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kc-board-row-pct {
  font-weight: 500;
  color: rgba(125, 211, 252, 0.9);
}
.kc-board-row-sub {
  font-size: 0.74rem;
  color: rgba(194, 246, 255, 0.65);
  white-space: normal;
  line-height: 1.3;
}
.kc-board-row-dist {
  font-family: var(--font-mono, monospace);
  color: rgba(125, 211, 252, 0.82);
}
.dom-ops-act:disabled,
.dom-ops-diplo:disabled { opacity: 0.4; cursor: default; }
/* Explore rows: star thumbnail, locator stats (distance + planet count)
   beside the coords on the title line, and star bonuses on the sub-line. */
.kc-board-thumb--star {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08), rgba(2, 6, 14, 0.7));
}
.kc-board-thumb-star-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 210, 140, 0.35));
}
.kc-board-thumb-star-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.kc-board-row-title--explore {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.kc-board-row-title--explore .kc-board-row-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.kc-board-loc-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 500;
  font-size: 0.72rem;
}
.kc-board-loc-dist { color: rgba(125, 211, 252, 0.85); }
.kc-board-loc-planets {
  color: rgba(167, 243, 208, 0.88);
  white-space: nowrap;
}
.kc-board-planet-icon {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vertical-align: -1px;
  margin-right: 2px;
}
.kc-board-row-sub--explore {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.5;
  margin-top: 2px;
}
.kc-board-row-sub--explore .bonus-icon {
  vertical-align: -2px;
}
.kc-board-queue-colony-tag {
  font-size: 0.7rem;
  color: rgba(125, 211, 252, 0.78);
  letter-spacing: 0.02em;
}
.kc-board-renew {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: rgba(var(--pending-accent-light), 0.8);
}
.kc-board-row-chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: rgba(var(--pending-accent-light), 0.6);
}
.kc-board-dom-renew {
  margin: 2px 0 8px;
  font-size: 0.72rem;
  color: rgba(var(--pending-accent-light), 0.85);
}
.kc-board-dom-renew--waiting { color: rgba(var(--pending-accent-light), 0.65); }
.kc-board-encurso {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  background: rgba(var(--pending-accent), 0.22);
  color: rgba(var(--pending-accent-light), 0.95);
}
.kc-board-row--empty { opacity: 0.6; cursor: pointer; }

/* Back-to-board chip on the detail card */
.kc-pending-board-back {
  position: absolute;
  top: 10px;
  left: 64px;  /* clear the 1/13 counter pill at top-left */
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(var(--pending-accent), 0.4);
  background: rgba(2, 6, 23, 0.72);
  color: rgb(var(--pending-accent-light));
  font-size: 0.72rem;
  cursor: pointer;
}
.kc-pending-board-back svg {
  width: 14px;
  height: 14px;
}

/* Mobile console: compact icon-over-label items (the dock rarely holds
   more than 4 entries thanks to progressive disclosure), with side
   padding so no item hides under the orb sockets. The news ticker runs
   edge to edge (its gradient ends fade the text before it slides under
   the orbs). */
@media (max-width: 600px) {
  html.game-active .bottom-nav {
    padding-left: calc(env(safe-area-inset-left, 0px) + 64px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 64px);
    gap: 0;
  }
  html.game-active .bottom-nav .nav-item span {
    font-size: 0.56rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  html.game-active .bottom-nav .nav-item .nav-badge {
    font-size: 10px;
    line-height: 1.4;
  }
  html.game-active .bottom-nav .nav-item {
    padding: 2px 6px;
    min-height: 40px;
  }
  html.game-active .bottom-nav .nav-item .icon {
    width: 24px;
    height: 24px;
  }
}