/* Phase 7 — wave pacing and boss presentation */
.boss-hud {
  position: relative;
  gap: 8px;
  padding: 10px 12px 11px;
  border-color: rgba(255, 99, 128, 0.42);
  background:
    linear-gradient(180deg, rgba(78, 10, 30, 0.7), rgba(38, 7, 20, 0.76)),
    rgba(12, 18, 25, 0.84);
  box-shadow: inset 0 0 28px rgba(255, 61, 104, 0.08), 0 0 22px rgba(255, 54, 95, 0.05);
  overflow: hidden;
}

.boss-hud::before {
  content: "FINAL THREAT";
  position: absolute;
  right: 10px;
  top: 6px;
  color: rgba(255, 190, 204, 0.34);
  font-size: 0.47rem;
  font-weight: 1000;
  letter-spacing: 0.16em;
  pointer-events: none;
}

.boss-hud__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.boss-hud__identity {
  min-width: 0;
}

.boss-hud__identity > span {
  display: block;
  color: #fff0f4;
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.boss-hud__state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.boss-hud__badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 155, 175, 0.24);
  border-radius: 999px;
  background: rgba(23, 6, 14, 0.72);
  color: #ffb5c5;
  font-size: 0.49rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.boss-hud__badge--lane {
  border-color: rgba(255, 209, 102, 0.26);
  color: #ffe0a0;
}

#bossHpValue {
  min-width: 74px;
  color: #fff7f9;
  font-size: 0.62rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.boss-hud__track {
  position: relative;
  height: 10px;
  overflow: visible;
  border: 1px solid rgba(255, 180, 196, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.42);
}

#bossHpFill {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff365f, #ff775f 55%, #ffd166);
  box-shadow: 0 0 12px rgba(255, 66, 100, 0.28);
  transition: width 90ms linear;
}

.boss-hud[data-phase="2"] #bossHpFill {
  background: linear-gradient(90deg, #ff264f, #ff4d72 54%, #ffb05f);
  box-shadow: 0 0 15px rgba(255, 47, 87, 0.42);
}

.boss-hud__marker {
  --marker-left: 50%;
  position: absolute;
  left: var(--marker-left);
  top: 50%;
  width: 2px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 236, 208, 0.65);
  box-shadow: 0 0 6px rgba(255, 209, 102, 0.32);
  pointer-events: none;
}

.boss-hud__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(255, 226, 164, 0.82);
  background: #4c1b21;
}

.boss-hud__marker--70 { --marker-left: 70%; }
.boss-hud__marker--50 { --marker-left: 50%; }
.boss-hud__marker--35 { --marker-left: 35%; }

.boss-hud__marker.is-crossed {
  background: rgba(121, 245, 211, 0.82);
  box-shadow: 0 0 8px rgba(121, 245, 211, 0.46);
}

.boss-hud__marker.is-crossed::after {
  border-color: rgba(152, 255, 225, 0.9);
  background: #18443a;
}

.boss-hud__signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  color: #b98995;
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: uppercase;
}

.boss-hud__signals span:nth-child(2) {
  color: #e6a0b1;
}

.boss-warning {
  top: 42%;
  width: min(90%, 340px);
  padding: 14px 17px 13px;
  border-color: rgba(102, 231, 255, 0.52);
  background: linear-gradient(180deg, rgba(9, 30, 40, 0.96), rgba(3, 15, 22, 0.97));
  box-shadow: 0 0 34px rgba(102, 231, 255, 0.13), inset 0 0 24px rgba(102, 231, 255, 0.05);
  color: #effcff;
  font-size: clamp(0.8rem, 3.3vw, 1rem);
  letter-spacing: 0.12em;
  text-shadow: 0 0 14px rgba(102, 231, 255, 0.18);
}

.boss-warning--active {
  animation: wave-warning-in 260ms cubic-bezier(.2,.82,.2,1);
}

.boss-warning::before {
  content: "TACTICAL UPDATE";
  display: block;
  margin-bottom: 5px;
  color: #74dff4;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
}

.boss-warning small {
  margin-top: 5px;
  color: #a9d9e3;
  font-size: 0.56rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.boss-warning[data-tone="clear"] {
  border-color: rgba(121, 245, 211, 0.56);
  background: linear-gradient(180deg, rgba(8, 48, 43, 0.96), rgba(3, 24, 25, 0.97));
  box-shadow: 0 0 34px rgba(121, 245, 211, 0.13), inset 0 0 24px rgba(121, 245, 211, 0.05);
  color: #eefff9;
}
.boss-warning[data-tone="clear"]::before { content: "SECTOR SECURED"; color: #82f2d4; }
.boss-warning[data-tone="clear"] small { color: #a9ddd0; }

.boss-warning[data-tone="elite"] {
  border-color: rgba(194, 122, 255, 0.62);
  background: linear-gradient(180deg, rgba(45, 13, 68, 0.97), rgba(20, 7, 35, 0.97));
  box-shadow: 0 0 38px rgba(186, 102, 255, 0.2), inset 0 0 26px rgba(186, 102, 255, 0.07);
  color: #f6eaff;
}
.boss-warning[data-tone="elite"]::before { content: "HIGH THREAT"; color: #d7a3ff; }
.boss-warning[data-tone="elite"] small { color: #d7b5ef; }

.boss-warning[data-tone="boss"],
.boss-warning[data-tone="phase"],
.boss-warning[data-tone="reinforce"] {
  border-color: rgba(255, 91, 126, 0.7);
  background: linear-gradient(180deg, rgba(65, 5, 22, 0.97), rgba(29, 3, 13, 0.98));
  box-shadow: 0 0 42px rgba(255, 48, 91, 0.24), inset 0 0 28px rgba(255, 65, 99, 0.08);
  color: #fff3f6;
}
.boss-warning[data-tone="boss"]::before { content: "FINAL THREAT"; color: #ff96ac; }
.boss-warning[data-tone="phase"]::before { content: "BOSS PHASE SHIFT"; color: #ffb0bf; }
.boss-warning[data-tone="reinforce"]::before { content: "THRESHOLD BREACH"; color: #ffd18c; }
.boss-warning[data-tone="boss"] small,
.boss-warning[data-tone="phase"] small,
.boss-warning[data-tone="reinforce"] small { color: #ffb8c6; }

.combat-stage--wave-start {
  animation: wave-stage-start 520ms ease-out;
}

.combat-stage--wave-clear {
  animation: wave-stage-clear 620ms ease-out;
}

.combat-stage--boss-arrival {
  animation: boss-stage-arrival 1.05s cubic-bezier(.18,.78,.2,1);
}

.combat-stage--boss-defeated {
  animation: boss-stage-defeated 1.15s ease-out;
}

.combat-stage--boss-shift .combat-stage__grid span {
  transition: background 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.combat-stage--boss-shift[data-boss-lane="0"] .combat-stage__grid span:nth-child(1),
.combat-stage--boss-shift[data-boss-lane="1"] .combat-stage__grid span:nth-child(2),
.combat-stage--boss-shift[data-boss-lane="2"] .combat-stage__grid span:nth-child(3) {
  border-color: rgba(255, 91, 126, 0.62);
  background: linear-gradient(180deg, rgba(255, 66, 101, 0.18), rgba(255, 66, 101, 0.035));
  box-shadow: inset 0 0 34px rgba(255, 66, 101, 0.12);
  animation: boss-lane-lock 680ms ease-out;
}

.combat-stage--reinforcements .combat-stage__grid span {
  animation: boss-reinforcement-lanes 760ms ease-out;
}

@keyframes wave-warning-in {
  0% { opacity: 0; transform: translate(-50%, -43%) scale(.93); filter: brightness(1.35); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
}

@keyframes wave-stage-start {
  0% { box-shadow: inset 0 0 0 rgba(102,231,255,0); }
  36% { box-shadow: inset 0 0 48px rgba(102,231,255,.18), 0 0 18px rgba(102,231,255,.07); }
  100% { box-shadow: inset 0 0 0 rgba(102,231,255,0); }
}

@keyframes wave-stage-clear {
  0% { box-shadow: inset 0 0 0 rgba(121,245,211,0); }
  40% { box-shadow: inset 0 0 54px rgba(121,245,211,.19), 0 0 22px rgba(121,245,211,.08); }
  100% { box-shadow: inset 0 0 0 rgba(121,245,211,0); }
}

@keyframes boss-stage-arrival {
  0% { filter: brightness(1); box-shadow: inset 0 0 0 rgba(255,48,91,0); }
  30% { filter: brightness(.78) saturate(1.2); box-shadow: inset 0 0 62px rgba(255,48,91,.24); }
  55% { filter: brightness(1.2) saturate(1.35); box-shadow: inset 0 0 88px rgba(255,48,91,.19), 0 0 28px rgba(255,48,91,.12); }
  100% { filter: none; box-shadow: inset 0 0 0 rgba(255,48,91,0); }
}

@keyframes boss-stage-defeated {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.5) saturate(.75); box-shadow: inset 0 0 70px rgba(121,245,211,.22); }
  100% { filter: none; box-shadow: inset 0 0 0 rgba(121,245,211,0); }
}

@keyframes boss-lane-lock {
  0% { opacity: .36; }
  30% { opacity: 1; }
  100% { opacity: .5; }
}

@keyframes boss-reinforcement-lanes {
  0%, 100% { background-color: transparent; }
  34% { background-color: rgba(255, 209, 102, 0.13); }
}

@media (max-width: 720px) {
  .boss-hud { padding: 8px 9px 9px; gap: 6px; }
  .boss-hud::before { display: none; }
  .boss-hud__meta { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  .boss-hud__identity > span { font-size: .58rem; }
  .boss-hud__state { gap: 3px; }
  .boss-hud__badge { min-height: 18px; padding: 2px 5px; font-size: .42rem; }
  #bossHpValue { min-width: 62px; font-size: .52rem; }
  .boss-hud__signals { font-size: .39rem; gap: 2px; }
  .boss-warning { top: 38%; padding: 12px 13px 11px; }
}

@media (max-width: 380px) {
  .boss-hud__signals span { font-size: 0; }
  .boss-hud__signals span::after { font-size: .39rem; }
  .boss-hud__signals span:nth-child(1)::after { content: "70%"; }
  .boss-hud__signals span:nth-child(2)::after { content: "50%"; }
  .boss-hud__signals span:nth-child(3)::after { content: "35%"; }
}

@media (prefers-reduced-motion: reduce) {
  .boss-warning--active,
  .combat-stage--wave-start,
  .combat-stage--wave-clear,
  .combat-stage--boss-arrival,
  .combat-stage--boss-defeated,
  .combat-stage--boss-shift[data-boss-lane] .combat-stage__grid span,
  .combat-stage--reinforcements .combat-stage__grid span {
    animation: none !important;
  }
}