/* One nonblocking announcement at the viewport center, above the combat scene. */
#appFrame #areaAnnouncement{position:fixed;left:50vw;top:50dvh;gap:.85rem;width:min(80rem,94%);border:0;background:none;pointer-events:none}
#areaAnnouncement #announcementKicker{font-family:var(--font-ui)!important;font-size:clamp(.75rem,1.0417vw,1.25rem);line-height:1.4;letter-spacing:.25em;color:#d8c8a8}
#appFrame #areaAnnouncement strong{font-size:clamp(1.8rem,3.3333vw,4rem);letter-spacing:.045em;word-spacing:.12em;line-height:1.18;font-weight:500}
#appFrame #areaAnnouncement[data-discovery="true"] strong{font-size:clamp(2rem,4.1667vw,5rem)}
#appFrame #areaAnnouncement[data-kind="phase"] strong{font-size:clamp(1.75rem,2.9167vw,3.5rem);letter-spacing:.08em}
#areaAnnouncement #announcementCounter{font-family:var(--font-ui)!important;font-size:clamp(.75rem,1.0417vw,1.25rem);letter-spacing:.18em;color:#cbb999}
#appFrame #areaAnnouncement i{width:min(42rem,75%)}
@media(max-width:760px){#appFrame #areaAnnouncement{gap:.65rem}#appFrame #areaAnnouncement strong{font-size:clamp(1.5rem,6vw,2.5rem);letter-spacing:.04em}#appFrame #areaAnnouncement[data-discovery="true"] strong{font-size:clamp(1.7rem,7vw,3rem)}#appFrame #areaAnnouncement[data-kind="phase"] strong{font-size:clamp(1.5rem,6vw,2.25rem)}}
@media(orientation:landscape) and (max-height:600px){#appFrame #areaAnnouncement{gap:.4rem}#appFrame #areaAnnouncement strong,#appFrame #areaAnnouncement[data-discovery="true"] strong{font-size:clamp(1.5rem,4vw,2.7rem)}}
/* Boss fights: the boss stands at the centre-right and is tall, so the centred announcements (boss intro name and
   region name) move up into the free band between the phase indicator and the top of the tallest boss
   (measured: 92-263 px at 1920x1080, 88-208 px at 1366x768). Still centred horizontally; slightly smaller type. */
@media(min-width:761px) and (min-height:601px){
  #battlefield.boss-fight .boss-intro-banner{justify-content:flex-start;padding-top:clamp(2.6rem,6.5vh,4.4rem)}
  #battlefield.boss-fight .boss-intro-banner strong{font-size:clamp(1.8rem,3.4vw,4rem)}
  #appFrame:has(#battlefield.boss-fight) #areaAnnouncement{top:calc(48px + 12dvh)}
  #appFrame:has(#battlefield.boss-fight) #areaAnnouncement strong,
  #appFrame:has(#battlefield.boss-fight) #areaAnnouncement[data-discovery="true"] strong{font-size:clamp(1.6rem,3vw,3.6rem)}
}