/* Local-only presentation marker for the real story-triggered battle overlay. */
#battleView.combat-lab-popup .battle-shell::before {
  content: attr(data-local-preview);
  position: absolute;
  z-index: 14;
  top: 0;
  left: 50%;
  padding: 6px 16px;
  border-radius: 0 0 10px 10px;
  background: #18352d;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  transform: translateX(-50%);
}

#battleView.combat-lab-popup .battle-shell {
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 9%, rgba(111,145,91,.11) 0 90px, transparent 91px),
    radial-gradient(circle at 4% 55%, rgba(217,168,78,.09) 0 120px, transparent 121px),
    var(--paper);
  box-shadow: 0 30px 90px rgba(14,35,28,.34);
}

#battleView.combat-lab-popup .battle-stage {
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 94%, #dce8cf 0 32%, transparent 33%),
    radial-gradient(circle at 88% 16%, rgba(217,168,78,.2) 0 42px, transparent 43px),
    linear-gradient(#eef3e8 0 62%, #b6c99f 63%);
}

#battleView.combat-lab-popup .battle-command {
  border: 1px solid var(--line);
  background: #f7f5ec;
  box-shadow: inset 4px 0 var(--gold);
}

#battleView.combat-lab-popup .battle-fighter {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,253,247,.94);
  box-shadow: 0 10px 28px rgba(35,65,51,.1);
}

#battleView.combat-lab-popup .enemy-fighter {
  background: linear-gradient(145deg, rgba(255,253,247,.96), rgba(241,235,224,.96));
}

#battleView.combat-lab-popup .battle-versus,
#battleView.combat-lab-popup .battle-clock {
  background: var(--ink);
  box-shadow: 0 5px 15px rgba(24,53,45,.18);
}

#battleView.combat-lab-popup .battle-move {
  border-color: var(--line);
  border-radius: 9px;
  background: var(--paper);
}

#battleView.combat-lab-popup .battle-move:hover,
#battleView.combat-lab-popup .battle-move:focus-visible {
  border-color: var(--green);
  background: var(--sage);
  box-shadow: 0 8px 20px rgba(35,65,51,.12);
}

#battleView.combat-lab-popup .power-move { border-top-color: #b8644f; }
#battleView.combat-lab-popup .insight-move { border-top-color: #6c67a2; }
#battleView.combat-lab-popup .focus-move { border-top-color: #4b94d1; }

#battleView.combat-lab-popup .battle-shell > h1 {
  color: var(--ink);
  letter-spacing: -.035em;
}

#battleView.combat-lab-popup .battle-topline .eyebrow,
#battleView.combat-lab-popup .battle-command > div:first-child > span {
  color: var(--green);
}

@media (max-width: 720px) {
  #battleView.combat-lab-popup .battle-stage { padding: 7px; }
  #battleView.combat-lab-popup .battle-shell::before { font-size: 8px; }
}

.local-battle-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 20px 0 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--paper), var(--sage));
  box-shadow: 0 12px 30px rgba(35,65,51,.08);
}

.local-battle-trigger span,
.local-battle-trigger b,
.local-battle-trigger small { display: block; }
.local-battle-trigger span { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.local-battle-trigger b { margin: 5px 0; font: 700 19px Fraunces; }
.local-battle-trigger small { color: var(--muted); }
.local-battle-trigger .primary { flex: 0 0 auto; }

@media (max-width: 620px) {
  .local-battle-trigger { align-items: stretch; flex-direction: column; }
}