/**
 * BASE ORBITAL 2.5D — BASE ALFA
 * Estilo visual de alta fidelidad basado en estación orbital espacial,
 * fondo cósmico con planetas e islas flotantes, nodos cibernéticos interactivos
 * y efectos de luz pulsante.
 */

/* --- Contenedor principal de la Base Orbital (dentro de screen-host) --- */
.base-orbital-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #020611;
  user-select: none;
  touch-action: none;
  --island-accent:#20d9ff;
}
.base-orbital-view.island-theme-1{--island-accent:#ff9b27}.base-orbital-view.island-theme-2{--island-accent:#ff3b45}.base-orbital-view.island-theme-3{--island-accent:#5ef4ff}.base-orbital-view.island-theme-4{--island-accent:#ffd35a}
.base-orbital-view.island-theme-1 .base-orbital-bg{filter:hue-rotate(52deg) saturate(1.35)}
.base-orbital-view.island-theme-2 .base-orbital-bg{filter:hue-rotate(128deg) saturate(1.55) contrast(1.08)}
.base-orbital-view.island-theme-3 .base-orbital-bg{filter:hue-rotate(218deg) saturate(1.25) brightness(1.08)}
.base-orbital-view.island-theme-4 .base-orbital-bg{filter:hue-rotate(34deg) saturate(.82) brightness(.92)}

/* --- Capa 1: Fondo Cósmico (Planetas, Estrellas, Estaciones lejanas) --- */
.base-orbital-bg {
  position: absolute;
  inset: 0;
  background-image: url('../media/islas/base_alfa_space_bg.webp');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
  animation: orbitalCameraEnter .28s cubic-bezier(.2,.75,.2,1) both, orbitalBackgroundDrift 18s ease-in-out .28s infinite alternate;
}

@keyframes cosmicDrift {
  0% { transform: scale(1.0) translateY(0); }
  100% { transform: scale(1.03) translateY(-6px); }
}

/* Nebulosa ambiental de realce */
.base-orbital-nebula {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0, 160, 255, 0.18) 0%, transparent 60%),
              radial-gradient(circle at 20% 70%, rgba(0, 230, 150, 0.12) 0%, transparent 50%),
              linear-gradient(180deg, rgba(2, 6, 17, 0.2) 0%, rgba(2, 6, 17, 0.05) 40%, rgba(2, 6, 17, 0.75) 90%);
  z-index: 2;
  pointer-events: none;
}

/* --- Cabecera Superior: Título de Base Alfa y Progreso --- */
.base-orbital-header {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 8;
  pointer-events: none;
}

.base-orbital-header .boh-title {
  font-family: var(--font-condensed, 'Arial Black', sans-serif);
  font-size: 19px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.base-orbital-header .boh-sub {
  font-family: var(--font-sans, sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1.5px;
  color: #38bdf8;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.base-orbital-header .boh-progress {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.base-orbital-header .boh-seg {
  width: 14px;
  height: 4px;
  background: rgba(15, 35, 60, 0.8);
  border-radius: 2px;
  border: 1px solid rgba(0, 200, 255, 0.25);
}

.base-orbital-header .boh-seg.active {
  background: #00ff88;
  border-color: #38ffaa;
  box-shadow: 0 0 8px #00ff88;
}

/* --- Botones Flotantes Laterales Izquierdos --- */
.base-orbital-left-actions {
  position: absolute;
  left: 10px;
  top: 54px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  z-index: 12;
}

.bo-side-btn {
  --bo-accent: #43edff;
  --bo-accent-rgb: 67, 237, 255;
  --bo-deep: #06314a;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 120px;
  min-height: 37px;
  padding: 5px 15px 5px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5ffff;
  cursor: pointer;
  position: relative;
  overflow: visible;
  font-family: var(--font-condensed, sans-serif);
  font-size: 11.5px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(var(--bo-accent-rgb), .72);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .72));
  transform: translateZ(0);
  transition: transform .14s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Marco exterior e interior separados para conservar las insignias fuera del
   chaflán. Son gradientes estáticos: no repintan un blur en cada frame. */
.bo-side-btn::before,
.bo-side-btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(9px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 9px 100%, 0 calc(100% - 8px), 0 8px);
}

.bo-side-btn::before {
  z-index: -2;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(255,255,255,.96) 0%,
    var(--bo-accent) 8%,
    rgba(var(--bo-accent-rgb),.42) 54%,
    var(--bo-accent) 88%,
    rgba(255,255,255,.84) 100%);
  box-shadow: 0 0 13px rgba(var(--bo-accent-rgb), .62);
}

.bo-side-btn::after {
  z-index: -1;
  inset: 1.5px;
  background:
    linear-gradient(90deg, rgba(var(--bo-accent-rgb),.13) 1px, transparent 1px) 0 0 / 12px 100%,
    linear-gradient(0deg, rgba(var(--bo-accent-rgb),.09) 1px, transparent 1px) 0 0 / 100% 9px,
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.2), transparent 28%),
    linear-gradient(180deg, rgba(var(--bo-accent-rgb),.24), rgba(2,10,21,.98) 42%, var(--bo-deep));
  box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -5px 10px rgba(0,0,0,.42);
}

.bo-side-scan {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: polygon(9px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 9px 100%, 0 calc(100% - 8px), 0 8px);
}

.bo-side-scan::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 24%;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translate3d(0,0,0) skewX(-18deg);
  animation: boSideSweep 5.2s ease-in-out infinite;
  will-change: transform, opacity;
}

.bo-side-btn:nth-child(2) .bo-side-scan::before { animation-delay: .7s; }
.bo-side-btn:nth-child(3) .bo-side-scan::before { animation-delay: 1.4s; }

@keyframes boSideSweep {
  0%, 68% { opacity: 0; transform: translate3d(0,0,0) skewX(-18deg); }
  73% { opacity: .62; }
  88% { opacity: .12; }
  92%, 100% { opacity: 0; transform: translate3d(316.667%,0,0) skewX(-18deg); }
}

.bo-side-btn:active {
  transform: translateZ(0) scale(0.96);
}

.bo-side-btn .bo-side-ico {
  position: relative;
  z-index: 2;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #061321;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 5%, transparent 7%),
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.72), var(--bo-accent) 38%, var(--bo-deep) 78%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 0 9px rgba(var(--bo-accent-rgb),.9), inset 0 -3px 5px rgba(0,0,0,.35);
}

.bo-side-btn .bo-side-ico svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.25));
}

.bo-side-label {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.bo-side-btn.btn-roulette {
  --bo-accent: #ffd12f;
  --bo-accent-rgb: 255, 193, 35;
  --bo-deep: #3a2002;
  color: #fff3a5;
}

.bo-side-btn.btn-dna {
  --bo-accent: #21eaff;
  --bo-accent-rgb: 33, 234, 255;
  --bo-deep: #02354b;
  color: #d7fbff;
}

.bo-side-btn.btn-beasts {
  --bo-accent: #e463ff;
  --bo-accent-rgb: 228, 99, 255;
  --bo-deep: #3a0751;
  color: #f9dcff;
}

.bo-side-btn.is-feature-locked::after {
  background:
    linear-gradient(90deg, rgba(var(--bo-accent-rgb),.08) 1px, transparent 1px) 0 0 / 12px 100%,
    linear-gradient(0deg, rgba(var(--bo-accent-rgb),.07) 1px, transparent 1px) 0 0 / 100% 9px,
    linear-gradient(180deg, rgba(var(--bo-accent-rgb),.14), rgba(2,10,21,.98) 42%, #180721);
}

.bo-side-btn.is-feature-locked .bo-side-label { opacity: .78; }
.bo-side-btn.is-feature-locked .bo-side-ico { filter: saturate(.55); }

.bo-side-lock {
  position: absolute;
  z-index: 5;
  top: -4px;
  right: -4px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07121d;
  background: linear-gradient(180deg,#fff2a8,#e0a31e);
  border: 1px solid #fff7ca;
  box-shadow: 0 0 8px rgba(255,194,47,.75);
}
.bo-side-lock svg { width: 10px; height: 10px; fill: currentColor; }

.bo-badge-free {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ff1744 0%, #ff5252 100%);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 900;
  font-style: italic;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid #ff8a80;
  box-shadow: 0 0 10px rgba(255,23,68,.9), inset 0 1px rgba(255,255,255,.45);
  white-space: nowrap;
  z-index: 5;
  animation: pulseBadge 1.8s ease-in-out infinite alternate;
}

@keyframes pulseBadge {
  0% { transform: translateX(-50%) scale(.96); opacity: .82; }
  100% { transform: translateX(-50%) scale(1.04); opacity: 1; }
}

.bo-badge-notify {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff1744;
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 0 8px #ff1744;
  z-index: 5;
}

/* --- Capa 2: La Estación Orbital Flotante (Base Alfa) --- */
.base-orbital-station-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 48px;
  bottom: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  pointer-events: auto;
  transform:translate3d(var(--drag-x,0),0,0);
  transition:transform .26s cubic-bezier(.2,.75,.2,1),opacity .26s ease;
  cursor:grab;
}
.base-orbital-view.is-dragging .base-orbital-station-box{transition:none;cursor:grabbing}
.base-orbital-view.leaving-left .base-orbital-station-box{transform:translate3d(-115%,0,0) scale(.82);opacity:.2}
.base-orbital-view.leaving-right .base-orbital-station-box{transform:translate3d(115%,0,0) scale(.82);opacity:.2}
.base-orbital-view.leaving-left .base-orbital-station-inner,.base-orbital-view.leaving-right .base-orbital-station-inner{filter:blur(3px);will-change:filter}
.base-orbital-view.is-locked .base-orbital-station-box{transform:translate3d(var(--drag-x,0),0,0) scale(.92)}
/* El blur del bloqueo se rasteriza con la ilustración estática. No envolver
   los motores animados en un filtro de toda la isla en el WebView. */
.base-orbital-view.is-locked .station-art-image{filter:blur(5px) brightness(.48)}
.base-orbital-view.is-locked .orbital-building{opacity:.35}
.base-orbital-view.is-locked .orbital-building{display:none}
.base-orbital-view.is-locked .base-orbital-header{display:none}

.base-orbital-station-inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  pointer-events: auto;
  animation: orbitalStationBob 6.5s ease-in-out infinite alternate;
  rotate:var(--drag-rot,0deg);
}

.orbital-island-nav{position:absolute;left:3px;right:3px;top:48%;z-index:15;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.orbital-island-nav button{pointer-events:auto;width:20px;height:32px;padding:0;border:1px solid color-mix(in srgb,var(--island-accent) 32%,transparent);border-radius:9px;background:#020b193d;color:#d8f7ffb5;font-size:22px;font-weight:300;line-height:1;opacity:.62;box-shadow:0 0 8px color-mix(in srgb,var(--island-accent) 12%,transparent);backdrop-filter:blur(2px)}
.orbital-island-nav button:active{opacity:1;background:#06182d80;transform:scale(.9)}
.oin-edge-spacer{width:20px;height:1px}
.oin-dots{position:absolute;left:50%;top:-42vh;transform:translateX(-50%);display:flex;gap:6px}.oin-dots i{width:7px;height:7px;border-radius:50%;background:#526077}.oin-dots i.active{width:19px;border-radius:6px;background:var(--island-accent);box-shadow:0 0 9px var(--island-accent)}
.orbital-lock-cover{position:absolute;inset:80px 0 116px;z-index:13;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:white;text-align:center;text-shadow:0 2px 8px #000;overflow:visible}
.orbital-lock-chains{position:absolute;left:50%;top:50%;z-index:1;width:min(148vw,760px);max-width:none;height:auto;transform:translate(-50%,-50%);display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;animation:orbitalLockReflection 6.8s ease-in-out infinite}
.orbital-lock-sheen{position:absolute;left:50%;top:50%;z-index:2;width:min(148vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.7;background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.72) 49%,rgba(164,232,255,.2) 53%,transparent 64%);background-size:300% 100%;-webkit-mask:url('../media/islas/orbital-lock-chains-v2.png?v=2') center/100% 100% no-repeat;mask:url('../media/islas/orbital-lock-chains-v2.png?v=2') center/100% 100% no-repeat;animation:orbitalLockSheen 5.6s ease-in-out infinite}
.orbital-lock-cover b,.orbital-lock-cover > span:not(.orbital-lock-sheen){position:relative;z-index:3}
.orbital-lock-cover b{font-size:19px;letter-spacing:1.5px;text-transform:uppercase;margin-top:176px}.orbital-lock-cover > span:not(.orbital-lock-sheen){font-size:10px;color:#c9d2e5;margin-top:3px}
.base-orbital-view.is-locked .orbital-lock-chains,.base-orbital-view.is-locked .orbital-lock-sheen{width:min(148vw,760px)}
@media (max-width:380px){.orbital-lock-chains,.orbital-lock-sheen{width:148vw}.orbital-lock-cover b{font-size:16px;margin-top:140px}}
@keyframes orbitalLockReflection{0%,100%{opacity:.9}48%{opacity:1}62%{opacity:.94}}
@keyframes orbitalLockSheen{0%{background-position:130% 0}100%{background-position:-130% 0}}
.orbital-page-hidden .orbital-lock-chains,.orbital-page-hidden .orbital-lock-sheen{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.orbital-lock-chains{animation:none;opacity:.96}.orbital-lock-sheen{animation:none;opacity:.35}}

@media (prefers-reduced-motion:reduce){.base-orbital-bg,.base-orbital-nebula,.base-orbital-station-inner,.btn-asalto-massive::before,.app.orbital-shell .topbar::after{animation:none!important}}
@media (prefers-reduced-motion:reduce){.bo-side-scan::before,.bo-daily-reward-strip::after{animation:none!important;opacity:0!important}}

@keyframes orbitalStationBob {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
  100% { transform: translateY(0px); }
}

.station-art-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  filter: drop-shadow(0 0 25px rgba(0, 160, 255, 0.35));
}

/* Los edificios viven en el estado de la partida, no en station-art-image. */
.orbital-building {
  position:absolute; width:19%; height:19%; padding:0; z-index:9;
  /* El punto de apoyo del SVG está en y=46 dentro de su viewBox 64x64
     (71.875%). El wrapper se coloca sobre el centro del pad y se compensa
     con ese anclaje para que la base del edificio no quede flotando. */
  transform:translate(-50%,-71.875%); overflow:visible; background:none; border:0;
  color:#dffaff; pointer-events:auto;
}
@keyframes orbitalCameraEnter{from{transform:translateX(3%) scale(1.012);opacity:.7}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes orbitalBackgroundDrift{from{background-position:center top}to{background-position:center -7px}}
@keyframes orbitalCameraExitLeft{to{transform:translateX(-3%) scale(1.008);opacity:.7}}
@keyframes orbitalCameraExitRight{to{transform:translateX(3%) scale(1.008);opacity:.7}}
.base-orbital-view.leaving-left .base-orbital-bg{animation:orbitalCameraExitLeft .26s cubic-bezier(.2,.75,.2,1) .02s both}
.base-orbital-view.leaving-right .base-orbital-bg{animation:orbitalCameraExitRight .26s cubic-bezier(.2,.75,.2,1) .02s both}
.base-orbital-view.island-entering .base-orbital-nebula{animation:orbitalNebulaEnter .28s ease-out .02s both}
@keyframes orbitalNebulaEnter{from{opacity:.65;transform:scale(1.012)}to{opacity:1;transform:scale(1)}}
.island-theme-1 .base-orbital-nebula{background:radial-gradient(circle at 18% 22%,rgba(255,150,32,.22),transparent 42%),radial-gradient(circle at 82% 72%,rgba(158,52,255,.18),transparent 48%),linear-gradient(180deg,rgba(12,4,26,.18),rgba(8,2,20,.78))}
.island-theme-2 .base-orbital-nebula{background:radial-gradient(circle at 76% 18%,rgba(255,55,42,.24),transparent 44%),radial-gradient(circle at 18% 66%,rgba(255,125,32,.16),transparent 46%),linear-gradient(180deg,rgba(25,3,8,.18),rgba(14,2,4,.8))}
.island-theme-3 .base-orbital-nebula{background:radial-gradient(circle at 22% 20%,rgba(76,218,255,.24),transparent 44%),radial-gradient(circle at 84% 72%,rgba(131,75,255,.2),transparent 48%),linear-gradient(180deg,rgba(1,15,26,.14),rgba(1,8,16,.78))}
.island-theme-4 .base-orbital-nebula{background:radial-gradient(circle at 78% 22%,rgba(255,194,59,.22),transparent 44%),radial-gradient(circle at 18% 68%,rgba(24,148,255,.16),transparent 46%),linear-gradient(180deg,rgba(17,14,3,.18),rgba(8,7,2,.8))}
.orbital-building:active{transform:translate(-50%,-71.875%) scale(.94)}
.orbital-building.is-built{transform:translate(-50%,-71.875%)}
.orbital-building.is-built:active{transform:translate(-50%,-71.875%) scale(.94)}
/* Centros medidos sobre las cinco plataformas rasterizadas: dos pads
   superiores, uno central y dos inferiores. Todas las islas comparten esta
   retícula, aunque cambien sus texturas y colores. */
.orbital-command{left:50%;top:39%;width:23%;height:23%;z-index:12}
.orbital-generator{left:29.5%;top:30.5%;z-index:10}
.orbital-factory{left:70.5%;top:30.5%;z-index:10}
.orbital-lab{left:29.5%;top:57%;z-index:13}
.orbital-hangar{left:70.5%;top:57%;z-index:13}
/* Cada ilustración tiene una perspectiva ligeramente distinta. Estas
   coordenadas se midieron sobre los centros luminosos de sus cinco pads. */
.island-theme-0 .orbital-command{left:51.2%;top:39.9%}
.island-theme-0 .orbital-generator{left:29.8%;top:30.7%}
.island-theme-0 .orbital-factory{left:72.6%;top:30.6%}
.island-theme-0 .orbital-lab{left:26.8%;top:56.4%}
.island-theme-0 .orbital-hangar{left:74.8%;top:56.5%}
.island-theme-1 .orbital-command{left:50%;top:40%}
.island-theme-1 .orbital-generator{left:29%;top:31.7%}
.island-theme-1 .orbital-factory{left:72.4%;top:31.7%}
.island-theme-1 .orbital-lab{left:27%;top:55.9%}
.island-theme-1 .orbital-hangar{left:73.5%;top:55.9%}
.island-theme-2 .orbital-command{left:50.3%;top:38.9%}
.island-theme-2 .orbital-generator{left:27.7%;top:28.1%}
.island-theme-2 .orbital-factory{left:72.2%;top:28.1%}
.island-theme-2 .orbital-lab{left:24.4%;top:54.9%}
.island-theme-2 .orbital-hangar{left:75.9%;top:55%}
.island-theme-3 .orbital-command{left:49.9%;top:40.3%}
.island-theme-3 .orbital-generator{left:27.9%;top:30.7%}
.island-theme-3 .orbital-factory{left:71.1%;top:30.7%}
.island-theme-3 .orbital-lab{left:25.9%;top:55%}
.island-theme-3 .orbital-hangar{left:74.2%;top:55%}
.island-theme-4 .orbital-command{left:50.6%;top:38.8%}
.island-theme-4 .orbital-generator{left:29.6%;top:28.5%}
.island-theme-4 .orbital-factory{left:71.1%;top:29.3%}
.island-theme-4 .orbital-lab{left:27.4%;top:52.6%}
.island-theme-4 .orbital-hangar{left:73.2%;top:53.4%}
.orbital-building-art,.orbital-empty-pad{position:absolute;inset:0;display:block}
.orbital-building.is-built::before{content:'';position:absolute;left:12%;right:12%;bottom:8%;height:25%;border-radius:50%;background:radial-gradient(ellipse,#000c 0,rgba(0,0,0,.45) 42%,transparent 74%);filter:blur(3px);transform:translateZ(0);pointer-events:none}
.orbital-building-art{filter:drop-shadow(0 9px 4px #000c) drop-shadow(-2px -2px 1px rgba(220,248,255,.24)) drop-shadow(0 0 6px color-mix(in srgb,var(--island-accent) 46%,transparent));transform:translateZ(0) scale(1.13);transform-origin:50% 78%;will-change:transform;animation:orbitalBuildingAlive 5.8s ease-in-out infinite alternate}
.orbital-building:nth-of-type(even) .orbital-building-art{animation-delay:-2.9s}
@keyframes orbitalBuildingAlive{from{transform:translateZ(0) scale(1.12) translateY(0)}to{transform:translateZ(0) scale(1.15) translateY(-1.5px)}}
.orbital-building-art .v-edificio,.orbital-empty-pad .v-edificio{width:100%;height:100%;overflow:visible}
.orbital-building-art .v-sombra{fill:rgba(0,0,0,.68);filter:blur(2.8px)}
.orbital-building-art .v-ventana:not(.off){filter:drop-shadow(0 0 1.4px var(--island-accent))}
.orbital-empty-pad{opacity:.26;transform:scale(.72)}
.orbital-building-label{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);white-space:nowrap;
  padding:2px 7px;border:1px solid #3de8ff88;border-radius:4px;
  background:#03101dda;color:#e9fcff;font-size:8px;font-weight:900;letter-spacing:.4px;
  text-transform:uppercase;text-shadow:0 1px 3px #000;
}
.orbital-building-level{
  position:absolute;right:7%;top:4%;min-width:15px;height:15px;display:grid;place-items:center;
  border-radius:50%;background:#071324;border:1px solid #3dffb8;color:#72ffd0;font-size:8px;font-weight:900;
}
.orbital-build-marker{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);padding:3px 7px;
  border:1px solid #28ffae;border-radius:9px;background:#03251ed9;color:#81ffd2;
  box-shadow:0 0 10px #00ff8855;font-size:7.5px;font-weight:900;letter-spacing:.5px;
}
.orbital-building.is-empty .orbital-build-marker{animation:orbitalBuildReady 1.8s ease-in-out infinite}
.orbital-building.is-building .orbital-build-marker{animation:orbitalBuildReady .9s ease-in-out infinite}
.orbital-building.is-building .orbital-build-marker{border-color:#ffd75c;color:#ffeab0;background:#291b05dd}
@keyframes orbitalBuildReady{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.orbital-building-updated{animation:orbitalBuildingUpgrade .72s cubic-bezier(.2,.8,.2,1) both}
@keyframes orbitalBuildingUpgrade{0%{opacity:.2;transform:translate(-50%,-71.875%) scale(.72)}55%{opacity:1;transform:translate(-50%,-71.875%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-71.875%) scale(1)}}

/* --- Efectos Vivos Superpuestos (Micro-animaciones) --- */
/* Rayo central de la aguja de mando */
.station-fx-beam {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 10px;
  height: 110px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(0, 230, 255, 0.75) 40%, transparent 100%);
  filter: blur(2px);
  opacity: 0.85;
  pointer-events: none;
  animation: beamPulse 2.4s ease-in-out infinite alternate;
}

@keyframes beamPulse {
  0% { opacity: 0.6; transform: translateX(-50%) scaleX(0.85); filter: blur(2px); }
  100% { opacity: 1.0; transform: translateX(-50%) scaleX(1.35); filter: blur(1.5px) drop-shadow(0 0 12px #00f0ff); }
}

/* Anillo de energía en la punta de la torre */
.station-fx-ring {
  position: absolute;
  left: 50%;
  top: 13%;
  width: 54px;
  height: 22px;
  transform: translateX(-50%);
  border: 1.5px solid rgba(0, 240, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 14px #00f0ff, inset 0 0 10px #00f0ff;
  pointer-events: none;
  animation: ringPulse 3s ease-in-out infinite alternate;
}

@keyframes ringPulse {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
  100% { transform: translateX(-50%) scale(1.15); opacity: 0.95; }
}

/* Resplandor holográfico en el Mercado Galáctico (Arriba Derecha) */
.station-fx-holo {
  position: absolute;
  left: 73%;
  top: 24.5%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, transparent 70%);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
  pointer-events: none;
  animation: holoRotate 8s linear infinite;
}

@keyframes holoRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.96); }
}

/* Bioluminiscencia en Laboratorio (Abajo Izquierda) */
.station-fx-dna {
  position: absolute;
  left: 25.5%;
  top: 52%;
  width: 48px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 255, 136, 0.4) 0%, transparent 70%);
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.7);
  pointer-events: none;
  animation: dnaGlow 2.5s ease-in-out infinite alternate;
}

@keyframes dnaGlow {
  0% { opacity: 0.5; filter: blur(2px); }
  100% { opacity: 0.95; filter: blur(0px); }
}

/* Coordenadas por imagen en orbital-thrusters.js. No recortar esta capa:
   los motores de abajo deben poder expulsar plasma fuera del lienzo de arte. */
.station-fx-thrusters {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  overflow:visible;
}
.orbital-exhaust {
  position:absolute; display:block; pointer-events:none;
  transform:translateX(-50%) rotate(var(--jet-angle));
  transform-origin:50% 0;
}
.orbital-exhaust-flame {
  display:block; width:100%; height:100%; object-fit:fill;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
  transform-origin:50% 0;
  animation:orbitalExhaustFlow var(--jet-period) ease-in-out var(--jet-delay) infinite;
}
.orbital-exhaust-spark {
  position:absolute; left:47%; top:18%; width:8%; height:6%;
  border-radius:50%; background:var(--exhaust-core); opacity:0;
  animation:orbitalExhaustSpark 1.7s linear var(--jet-delay) infinite;
}
/* Se anima dentro del anclaje fijo: escalar la llama nunca mueve su boca. */
@keyframes orbitalExhaustFlow {
  0%,100%{transform:scale(.96,1);opacity:.86}
  24%{transform:scale(1.05,1.12);opacity:.98}
  53%{transform:scale(.93,1.03);opacity:.83}
  78%{transform:scale(1.02,1.18);opacity:.94}
}
@keyframes orbitalExhaustSpark {
  0%,8%{transform:translateY(0) scale(.6);opacity:0}
  20%{opacity:.8}
  100%{transform:translateY(1500%) scale(.3);opacity:0}
}
.is-locked .orbital-exhaust-spark{display:none}
.is-locked .station-fx-thrusters{opacity:.55}
.orbital-page-hidden .orbital-exhaust-flame,
.orbital-page-hidden .orbital-exhaust-spark,
.screen.off .orbital-exhaust-flame,
.screen.off .orbital-exhaust-spark{animation-play-state:paused}
@media (max-width:380px){.orbital-exhaust-spark{display:none}}
@media (prefers-reduced-motion:reduce){
  .orbital-exhaust-flame{animation:none}
  .orbital-exhaust-spark{display:none}
}

/* --- Capa 3: Nodos de Edificios Interactivos (Hotspots) --- */
.station-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  background: linear-gradient(135deg, rgba(4, 18, 38, 0.92) 0%, rgba(2, 9, 20, 0.96) 100%);
  border: 1.5px solid #00f0ff;
  border-radius: 18px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45), inset 0 0 8px rgba(0, 240, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.station-hotspot:active {
  transform: translate(-50%, -50%) scale(0.94);
  box-shadow: 0 0 20px #00f0ff;
}

/* Icono circular del nodo */
.station-hotspot .hotspot-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.station-hotspot .hotspot-ico svg {
  width: 11px;
  height: 11px;
}

/* Texto del nodo */
.station-hotspot .hotspot-label {
  font-family: var(--font-condensed, 'Arial Black', sans-serif);
  font-size: 10.5px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Badge accesorio en el nodo */
.station-hotspot .hotspot-badge {
  font-size: 9.5px;
  font-weight: 900;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.hotspot-badge.badge-plus {
  background: #00ff88;
  color: #021a10;
  box-shadow: 0 0 6px #00ff88;
}

.hotspot-badge.badge-alert {
  background: #ffd600;
  color: #211900;
  box-shadow: 0 0 6px #ffd600;
}

.hotspot-badge.badge-up {
  background: #00e676;
  color: #00220e;
  box-shadow: 0 0 6px #00e676;
}

/* Colores específicos de cada nodo según la captura */
/* 1. Centro de Mando (Centro) */
.hotspot-command {
  left: 50%;
  top: 48%;
  border-color: #00f0ff;
}

.hotspot-command .hotspot-badge {
  border-radius: 3px;
}

/* 2. Comercio (Arriba Izquierda) */
.hotspot-commerce {
  left: 29%;
  top: 36.5%;
}

.hotspot-commerce .hotspot-ico {
  background: radial-gradient(circle, #00ff88 0%, #00b359 100%);
  box-shadow: 0 0 8px #00ff88;
}

.hotspot-commerce .hotspot-ico svg {
  fill: #021a10;
}

/* 3. Mercado Galáctico (Arriba Derecha) */
.hotspot-market {
  left: 74%;
  top: 38%;
}

.hotspot-market .hotspot-ico {
  background: radial-gradient(circle, #00e5ff 0%, #0088cc 100%);
  box-shadow: 0 0 8px #00e5ff;
}

.hotspot-market .hotspot-ico svg {
  fill: #021a24;
}

/* 4. Laboratorio (Abajo Izquierda) */
.hotspot-lab {
  left: 25.5%;
  top: 61.5%;
}

.hotspot-lab .hotspot-ico {
  background: radial-gradient(circle, #00ff88 0%, #00b359 100%);
  box-shadow: 0 0 8px #00ff88;
}

.hotspot-lab .hotspot-ico svg {
  fill: #021a10;
}

/* 5. Construir (Abajo Derecha) */
.hotspot-build {
  left: 74.5%;
  top: 61.5%;
}

.hotspot-build .hotspot-ico {
  background: radial-gradient(circle, #00ff88 0%, #00b359 100%);
  box-shadow: 0 0 8px #00ff88;
}

.hotspot-build .hotspot-ico svg {
  fill: #021a10;
}

/* --- Capa 4: Barra Inferior y Botón Asalto Gigante --- */
.base-orbital-bottom-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 14;
}

/* Franja de Recompensas Diarias */
.bo-daily-reward-strip {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 6px 13px;
  background:
    linear-gradient(90deg, rgba(37,255,173,.08) 1px, transparent 1px) 0 0 / 16px 100%,
    linear-gradient(0deg, rgba(70,210,255,.06) 1px, transparent 1px) 0 0 / 100% 9px,
    linear-gradient(180deg, rgba(8,47,69,.98), rgba(2,17,34,.98));
  border: 1px solid rgba(57,255,182,.76);
  border-radius: 0;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(21,231,174,.35), inset 0 1px rgba(210,255,244,.38), inset 0 -3px rgba(0,0,0,.42);
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(49,223,255,.45);
  transform: translateZ(0);
  transition: transform .14s ease;
}

.bo-daily-reward-strip::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  border: 1px solid rgba(174,255,230,.28);
  clip-path: inherit;
  pointer-events: none;
}

.bo-daily-reward-strip::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 18%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(220,255,247,.48), transparent);
  transform: translate3d(-140%,0,0) skewX(-18deg);
  animation: boRewardSweep 6s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes boRewardSweep {
  0%, 72% { opacity: 0; transform: translate3d(-140%,0,0) skewX(-18deg); }
  77% { opacity: .55; }
  92% { opacity: .08; }
  96%, 100% { opacity: 0; transform: translate3d(670%,0,0) skewX(-18deg); }
}

.bo-daily-reward-strip:active {
  transform: translateZ(0) scale(0.985);
}

.bo-dr-left {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bo-dr-gift-ico {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bo-dr-gift-ico svg {
  width: 18px;
  height: 18px;
}

.bo-dr-text {
  display: flex;
  flex-direction: column;
}

.bo-dr-text b {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.bo-dr-text span {
  font-size: 9px;
  color: #94a3b8;
}

.bo-dr-badge {
  position: relative;
  z-index: 2;
  background: #00ff88;
  color: #021a10;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2.5px 9px;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* Botón Masivo INICIAR ASALTO */
.btn-asalto-massive {
  position: relative;
  width: 100%;
  min-height:68px;padding: 9px 14px;
  background:linear-gradient(180deg,rgba(5,91,60,.86),rgba(0,38,29,.94) 52%,rgba(2,105,67,.84));
  border:1px solid #45ffc1;border-radius:0;
  clip-path:polygon(4% 0,96% 0,100% 24%,100% 76%,96% 100%,4% 100%,0 76%,0 24%);
  box-shadow:0 0 11px #00ff9dcc,0 0 28px #00ff8070,inset 0 0 18px #00ff884d,inset 0 1px #c9ffe8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-asalto-massive:active {
  transform: scale(0.97);
  box-shadow: 0 0 28px rgba(0, 255, 157, 0.8), inset 0 0 20px rgba(0, 255, 157, 0.6);
}

/* Resplandor lateral animado del botón */
.btn-asalto-massive::before {
  content: '';
  position: absolute;
  inset:4px;border:1px solid #7dffd0aa;border-radius:0;clip-path:inherit;
  background:repeating-linear-gradient(90deg,#5dffcd15 0 1px,transparent 1px 12px),linear-gradient(90deg,#00ffa52e,transparent 20%,transparent 80%,#00ffa52e);
  animation:assaultShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes assaultShine {
  0%,100% { opacity:.35; }
  50% { opacity:.82; }
}

.bam-content-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bam-wings-ico {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bam-wings-ico svg {
  width: 17px;
  height: 17px;
  fill: #00ff9d;
  filter: drop-shadow(0 0 6px #00ff9d);
}

.bam-title {
  font-family: var(--font-condensed, 'Arial Black', sans-serif);
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.8px;
  background:linear-gradient(180deg,#effff8,#9bffd0 34%,#36ff9a 72%,#c4ffe5);
  background: #00ff88;
  color: #021a10;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2.5px 9px;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* Botón Masivo INICIAR ASALTO */
.btn-asalto-massive {
  position: relative;
  width: 100%;
  min-height:68px;padding: 9px 14px;
  background:linear-gradient(180deg,rgba(5,91,60,.86),rgba(0,38,29,.94) 52%,rgba(2,105,67,.84));
  border:1px solid #45ffc1;border-radius:0;
  clip-path:polygon(4% 0,96% 0,100% 24%,100% 76%,96% 100%,4% 100%,0 76%,0 24%);
  box-shadow:0 0 11px #00ff9dcc,0 0 28px #00ff8070,inset 0 0 18px #00ff884d,inset 0 1px #c9ffe8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-asalto-massive:active {
  transform: scale(0.97);
  box-shadow: 0 0 28px rgba(0, 255, 157, 0.8), inset 0 0 20px rgba(0, 255, 157, 0.6);
}

/* Resplandor lateral animado del botón */
.btn-asalto-massive::before {
  content: '';
  position: absolute;
  inset:4px;border:1px solid #7dffd0aa;border-radius:0;clip-path:inherit;
  background:repeating-linear-gradient(90deg,#5dffcd15 0 1px,transparent 1px 12px),linear-gradient(90deg,#00ffa52e,transparent 20%,transparent 80%,#00ffa52e);
  animation:assaultShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes assaultShine {
  0%,100% { opacity:.35; }
  50% { opacity:.82; }
}

.bam-content-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bam-wings-ico {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bam-wings-ico svg {
  width: 17px;
  height: 17px;
  fill: #00ff9d;
  filter: drop-shadow(0 0 6px #00ff9d);
}

.bam-title {
  font-family: var(--font-condensed, 'Arial Black', sans-serif);
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.8px;
  background:linear-gradient(180deg,#effff8,#9bffd0 34%,#36ff9a 72%,#c4ffe5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 255, 157, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.bam-subtitle {
  font-family: var(--font-sans, sans-serif);
  font-size: 8px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
  color:#83ffc4;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(110, 231, 183, 0.6);
}

/* =========================================================================
   ESPIONAJE / ASALTO A BASES RIVALES (PVP RAID) EN BASE ORBITAL
   ========================================================================= */
.pvp-isla-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.base-orbital-view.pvp-raid-orbital {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.base-orbital-view.pvp-raid-orbital .base-orbital-header {
  top: 14px;
}
.base-orbital-view.pvp-raid-orbital .base-orbital-station-box {
  top: 12px;
  bottom: 24px;
}
.base-orbital-view.pvp-raid-orbital .orbital-island-nav {
  top: 48%;
}
.base-orbital-view.pvp-raid-orbital .orbital-lock-cover {
  top: 20px;
}

/* Capa de Escaneo Táctico de Satélite Espía */
.pvp-scan-tactical-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.pvp-tactical-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 59, 92, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 59, 92, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.8;
}
.pvp-tactical-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(255, 59, 92, 0.12), transparent);
  animation: pvpTacticalSweep 4.5s linear infinite;
}
@keyframes pvpTacticalSweep {
  0% { transform: translateY(-120px); }
  100% { transform: translateY(700px); }
}
.pvp-tactical-hud-tl {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 8.5px;
  font-weight: 800;
  color: rgba(255, 120, 140, 0.75);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 0 6px rgba(255, 59, 92, 0.5);
}
.pvp-tactical-hud-tr {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 120, 140, 0.6);
  letter-spacing: 0.8px;
  text-shadow: 0 0 6px rgba(255, 59, 92, 0.5);
}

/* Navegación Táctica con Puntos y Flechas Flotantes */
.pvp-isla-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  top: auto;
  pointer-events: none;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pvp-isla-nav .isla-dots {
  display: flex;
  gap: 7px;
  background: rgba(10, 14, 28, 0.75);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 59, 92, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 59, 92, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.pvp-isla-nav .isla-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pvp-isla-nav .isla-dot.on {
  width: 22px;
  border-radius: 10px;
  background: #ff3b5c;
  box-shadow: 0 0 10px #ff3b5c;
}
.pvp-isla-nav .isla-dot.lock {
  background: rgba(255, 255, 255, 0.1);
}
.pvp-isla-nav .isla-flecha {
  position: absolute;
  top: -240px;
  width: 36px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 59, 92, 0.35);
  background: rgba(15, 20, 35, 0.88);
  color: #ff5577;
  font-size: 26px;
  font-weight: 300;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 59, 92, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 120;
}
.pvp-isla-nav .isla-flecha:active {
  background: rgba(255, 59, 92, 0.45);
  transform: scale(0.92);
}
.pvp-isla-nav .isla-flecha.der {
  right: 8px;
  border-radius: 12px;
}
.pvp-isla-nav .isla-flecha.izq {
  left: 8px;
  border-radius: 12px;
}

/* Edificios Tácticos en Asalto */
.orbital-building.is-targetable {
  cursor: pointer;
}
.orbital-building.is-targetable:not(.is-damaged):hover .orbital-building-art,
.orbital-building.is-targetable:not(.is-damaged):active .orbital-building-art {
  filter: drop-shadow(0 0 16px rgba(255, 59, 92, 0.95)) drop-shadow(0 0 6px #fff) !important;
  transform: translateZ(0) scale(1.18);
}
.orbital-building.is-damaged .orbital-building-art {
  filter: grayscale(0.65) brightness(0.65) sepia(0.8) hue-rotate(-50deg) drop-shadow(0 0 12px rgba(255, 59, 92, 0.8)) !important;
}
.orbital-building.is-damaged .orbital-building-level {
  background: #ff3b5c !important;
  color: #fff !important;
  box-shadow: 0 0 8px #ff3b5c !important;
}
.orbital-damaged-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff1744, #b71c1c);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.9);
  pointer-events: none;
  z-index: 25;
}
.orbital-target-crosshair {
  pointer-events: none;
  z-index: 22;
  letter-spacing: 0.5px;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.4);
}