#enemy-telegraph {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 13;
  width: min(48%, 260px);
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 2px solid #8d76c5;
  border-radius: 7px;
  color: #f4edff;
  background: rgba(24, 17, 42, .92);
  box-shadow: 0 0 13px rgba(142, 109, 225, .35);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

#enemy-telegraph.hidden { display: none; }
#enemy-telegraph .telegraph-label { color: #c8b7f0; font-size: 9px; }
#enemy-telegraph .telegraph-move { display: block; font-size: 13px; font-weight: bold; }
#enemy-telegraph .telegraph-danger { color: #ffca70; }
#enemy-telegraph.phase-3 { border-color: #ff627d; box-shadow: 0 0 18px rgba(255, 67, 99, .46); }

#boss-phase-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border: 1px solid #bda5ef;
  border-radius: 9px;
  color: #e9dcff;
  font-size: 9px;
}

#btn-battle-history { min-width: 40px; }

#battle-history-panel {
  position: fixed;
  top: max(54px, env(safe-area-inset-top));
  right: 8px;
  z-index: 58;
  width: min(360px, calc(100vw - 16px));
  max-height: min(430px, 70vh);
  overflow: auto;
  padding: 10px;
  border: 3px solid #8d76c5;
  border-radius: 10px;
  background: rgba(18, 14, 29, .97);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}

#battle-history-panel.hidden { display: none; }
.battle-history-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.battle-history-list { display: grid; gap: 5px; }
.battle-history-entry { padding: 6px 8px; border-left: 3px solid #6f5d99; background: rgba(255,255,255,.045); font-size: 12px; }
.battle-history-entry.player { border-color: #55b6ff; }
.battle-history-entry.enemy { border-color: #ff718b; }
.battle-history-entry small { color: var(--ink-dim); }
.battle-history-empty { padding: 14px; color: var(--ink-dim); text-align: center; }

.boss-phase-flash {
  position: absolute;
  inset: 0;
  z-index: 23;
  pointer-events: none;
  background: radial-gradient(circle at 70% 35%, rgba(255,55,91,.45), transparent 42%);
  animation: boss-phase-flash .72s steps(7) forwards;
}
@keyframes boss-phase-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 650px) {
  #enemy-telegraph { top: 3px; width: 46%; padding: 3px 5px; font-size: 9px; }
  #enemy-telegraph .telegraph-move { font-size: 11px; }
  #battle-history-panel { top: 48px; }
}