.battle-viewport > .aot-epoch-break-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  background: transparent;
}

.battle-viewport > .aot-epoch-title {
  position: absolute;
  top: 15px;
  right: 16px;
  z-index: 9;
  display: grid;
  gap: 4px;
  justify-items: end;
  opacity: 0;
  color: #fff0bd;
  text-shadow: 0 2px 8px #001a13, 0 0 16px #b1a75377;
  pointer-events: none;
}

.aot-epoch-title strong { font-size: clamp(0.9rem, 2vw, 1.6rem); letter-spacing: 0.19em; }
.aot-epoch-title span { color: #b9f7df; font-size: clamp(0.43rem, 0.82vw, 0.62rem); letter-spacing: 0.11em; }

.battle-viewport > .aot-epoch-art-notice {
  position: absolute;
  top: 58px;
  left: 14px;
  z-index: 10;
  max-width: calc(100% - 28px);
  padding: 5px 8px;
  border: 1px solid #e0c67a55;
  border-radius: 3px;
  background: #17211ee8;
  color: #eee2bc;
  font-size: 0.65rem;
  line-height: 1.4;
  pointer-events: none;
}

@media (max-width: 600px) {
  .battle-viewport > .aot-epoch-title { top: 45px; right: 12px; gap: 2px; }
  .aot-epoch-title strong { font-size: 0.85rem; }
  .aot-epoch-title span { font-size: 0.42rem; }
  .battle-viewport > .aot-epoch-art-notice { top: 78px; font-size: 0.57rem; }
}