#bossHud[hidden], #bossClear[hidden] { display: none !important; }

#bossHud {
  position: fixed;
  z-index: 28;
  top: max(76px, calc(env(safe-area-inset-top) + 68px));
  left: 50%;
  width: min(88vw, 410px);
  transform: translateX(-50%);
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.boss-hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  color: #f7fbff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255,255,255,.22);
}
#bossName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bossEnergyText { color: #ffe66d; }
.boss-meter {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(3,7,18,.88);
  box-shadow: 0 0 16px rgba(255,78,100,.12), inset 0 0 8px rgba(0,0,0,.55);
}
.boss-meter::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,.25) 14px 16px);
  pointer-events: none;
}
#bossEnergy {
  position: absolute;
  inset: 1px;
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff3d5f, #ff7658 55%, #ffe66d);
  box-shadow: 0 0 14px rgba(255,73,95,.45);
  transition: transform .12s linear, filter .18s ease;
}
#bossHud.is-danger #bossEnergy { animation: bossEnergyDanger .48s steps(2,end) infinite; }
#bossHud.is-shielded .boss-meter { border-color: rgba(101,231,255,.7); box-shadow: 0 0 18px rgba(101,231,255,.35); }
#bossHud.is-shielded #bossEnergy { filter: saturate(.55) brightness(.9); }

#bossClear {
  position: fixed;
  inset: 0;
  z-index: 2147481800;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  color: #f7fbff;
  text-align: center;
  background: #01030b;
  opacity: 0;
  touch-action: manipulation;
}
#bossClear.is-visible { animation: bossClearIn .45s ease both; }
#bossClear::before, #bossClear::after {
  content: "";
  position: absolute;
  inset: -45%;
  pointer-events: none;
  background-repeat: repeat;
  animation: bossStarScroll 2.2s linear infinite;
}
#bossClear::before {
  opacity: .8;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(101,231,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,94,207,.65) 0 1px, transparent 1.3px);
  background-size: 67px 67px, 101px 101px, 139px 139px;
  background-position: 0 0, 31px 22px, 12px 70px;
}
#bossClear::after {
  opacity: .34;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 2.5px);
  background-size: 181px 181px;
  animation-duration: 1.2s;
}
.boss-clear-panel {
  position: relative;
  z-index: 2;
  width: min(92vw, 430px);
  padding: 18px 14px 16px;
  border: 1px solid rgba(101,231,255,.25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18,31,65,.94), rgba(6,10,28,.94));
  box-shadow: 0 0 0 2px rgba(255,94,207,.04), 0 20px 70px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08);
  transform: scale(.86);
  opacity: 0;
}
#bossClear.is-visible .boss-clear-panel { animation: bossPanelPop .58s cubic-bezier(.15,1.2,.28,1) .1s both; }
.boss-clear-label {
  margin: 0 0 8px;
  color: #65e7ff;
  font: 950 8px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .2em;
}
#bossClearTitle {
  margin: 0;
  color: #ffe66d;
  font: 1000 clamp(24px, 8vw, 38px)/.95 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: -.055em;
  text-shadow: 3px 3px 0 rgba(255,94,207,.42), -2px -2px 0 rgba(101,231,255,.23), 0 0 22px rgba(255,230,109,.3);
}
#bossClearName {
  margin: 10px 0 12px;
  color: #cceeff;
  font: 850 8px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}
#bossClearStats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#bossClearStats span {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #8fa8be;
  background: rgba(255,255,255,.035);
  font: 800 6.5px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}
#bossClearStats span:last-child:nth-child(odd) { grid-column: 1 / -1; }
#bossClearStats b { display: block; margin-top: 3px; overflow: hidden; color: #fff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#bossClearPhrase {
  margin: 12px 0 9px;
  color: #7cffb2;
  font: 950 9px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 12px rgba(124,255,178,.25);
}
.boss-clear-tap {
  display: inline-block;
  padding: 7px 10px;
  color: rgba(255,255,255,.78);
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .16em;
  animation: bossTapBlink .78s steps(2,end) infinite;
}

@media (max-height: 650px) {
  #bossHud { top: max(62px, calc(env(safe-area-inset-top) + 55px)); }
  .boss-clear-panel { padding: 12px 11px; }
  #bossClearName { margin: 7px 0 8px; }
  #bossClearStats span { padding: 5px 4px; }
  #bossClearPhrase { margin: 8px 0 6px; }
}

@keyframes bossEnergyDanger { 0%,48% { filter: brightness(1); } 49%,100% { filter: brightness(1.6); } }
@keyframes bossClearIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bossPanelPop {
  0% { opacity: 0; transform: scale(.7) rotate(-3deg); filter: blur(4px); }
  65% { opacity: 1; transform: scale(1.025) rotate(.5deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes bossStarScroll { from { transform: translate3d(0,-18%,0) scale(1.04); } to { transform: translate3d(0,18%,0) scale(1.04); } }
@keyframes bossTapBlink { 0%,48% { opacity: .92; } 49%,100% { opacity: .35; } }