/* Boss telegraphs, Mythic moments (R65). Drawn by js/ui/bossFx.js inside the portrait frame
   (.monster-avatar, which has overflow hidden and pointer-events none: only the weak point opts in).
   Colour is never the only signal: every type has an icon, a word and a hint. */
.tele-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; z-index: 3; pointer-events: none; background: color-mix(in srgb, var(--bg-1) 55%, transparent); text-align: center; padding: var(--sp-2); }
.tele-layer[hidden], .weak-point[hidden], .tele-counter-wrap[hidden], .tele-exposed[hidden] { display: none; }
.tele-layer[data-type="smash"] { --tele: var(--danger); }
.tele-layer[data-type="feast"] { --tele: var(--life); }
.tele-layer[data-type="ward"] { --tele: var(--aether); }
.tele-icon { font-size: 3rem; line-height: 1; filter: drop-shadow(0 2px 6px var(--shade)); animation: teleShake 0.3s linear infinite; }
.tele-label { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 800; color: var(--tele); text-shadow: 0 2px 8px var(--shade); letter-spacing: 0.04em; }
.tele-hint { font-size: var(--fs-12); font-weight: 700; color: var(--text-1); text-shadow: 0 1px 4px var(--shade); max-width: 90%; }
.tele-bar { position: absolute; inset-inline: 10%; bottom: 8px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--shade) 70%, transparent); overflow: hidden; }
.tele-bar-fill { height: 100%; width: 100%; background: var(--tele); transform-origin: left center; animation: teleFill linear forwards; }
:root[dir="rtl"] .tele-bar-fill { transform-origin: right center; }
.tele-layer.is-practice .tele-label::after { content: ' ○'; font-size: var(--fs-14); }
@keyframes teleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes teleShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* Coloured pulse around the portrait while a wind-up runs */
.tele-edge { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; }
.tele-edge[data-type="smash"] { --tele: var(--danger); }
.tele-edge[data-type="feast"] { --tele: var(--life); }
.tele-edge[data-type="ward"] { --tele: var(--aether); }
.tele-edge.is-on { animation: teleEdge 1.5s ease-out; }
@keyframes teleEdge { 0% { box-shadow: inset 0 0 0 4px var(--tele), inset 0 0 28px var(--tele); opacity: 1; } 100% { box-shadow: inset 0 0 0 2px var(--tele), inset 0 0 12px var(--tele); opacity: 0.35; } }

/* WARD: the glowing weak point (52px touch target) */
.weak-point { position: absolute; z-index: 4; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; pointer-events: auto; cursor: pointer;
  border: 2px solid var(--aether); background: radial-gradient(circle, color-mix(in srgb, var(--aether) 75%, var(--tint)) 0%, color-mix(in srgb, var(--aether) 40%, transparent) 70%);
  color: var(--text-on-accent); font-weight: 800; font-size: var(--fs-12); display: flex; align-items: center; justify-content: center; animation: weakPulse 0.6s ease-in-out infinite alternate; }
:root[dir="rtl"] .weak-point { margin: -26px -26px 0 0; }
.weak-count { font-variant-numeric: tabular-nums; }
@keyframes weakPulse { from { box-shadow: 0 0 6px var(--aether); } to { box-shadow: 0 0 22px var(--aether); } }

/* One-tap counter under the portrait: reachable with a thumb on a phone */
.tele-counter-wrap { width: 100%; max-width: 320px; margin-bottom: var(--sp-2); }
.tele-counter { width: 100%; min-height: 44px; font-weight: 800; }

.tele-exposed { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 3; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-11); font-weight: 800;
  letter-spacing: 0.06em; color: var(--text-on-accent); background: var(--gold); pointer-events: none; }

.tele-callout { position: absolute; inset-inline: 0; top: 38%; z-index: 5; text-align: center; font-family: var(--font-display); font-size: var(--fs-24); font-weight: 800;
  pointer-events: none; text-shadow: 0 2px 8px var(--shade); animation: teleCallout 1.1s ease-out forwards; }
.tele-callout.tone-gold { color: var(--gold); }
.tele-callout.tone-danger { color: var(--danger); }
.tele-callout.tone-dim { color: var(--text-2); font-size: var(--fs-16); }
@keyframes teleCallout { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Phase 2+: red glow and tint on the portrait (colour only, so it also reads under reduced motion) */
.monster-avatar.is-enraged { box-shadow: 0 0 34px color-mix(in srgb, var(--danger) 80%, transparent), inset 0 0 26px color-mix(in srgb, var(--danger) 40%, transparent); }
.monster-avatar.is-enraged .monster-avatar-img, .monster-avatar.is-enraged .monster-avatar-fallback { filter: saturate(1.3) hue-rotate(-12deg); }

/* WASTA STRIKE (Mythic Scepter): gold stamp over the portrait, gold edge flash on the card */
.wasta-stamp { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-family: var(--font-display); font-size: 2rem; font-weight: 900; letter-spacing: 0.08em; color: var(--gold); text-shadow: 0 0 12px var(--shade), 0 2px 0 var(--shade);
  transform: rotate(-8deg); animation: wastaStamp 0.9s ease-out forwards; }
@keyframes wastaStamp { 0% { opacity: 0; transform: rotate(-8deg) scale(2.2); } 15% { opacity: 1; transform: rotate(-8deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.monster-arena-box.wasta-flash { animation: wastaFlash 0.6s ease-out; }
@keyframes wastaFlash { 0% { box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 36px var(--gold); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root[data-motion="reduced"] .tele-icon, :root[data-motion="reduced"] .weak-point, :root[data-motion="reduced"] .wasta-stamp,
:root[data-motion="reduced"] .tele-callout, :root[data-motion="reduced"] .tele-edge.is-on { animation: none; }
:root[data-motion="reduced"] .tele-callout { opacity: 1; }
:root[data-motion="reduced"] .wasta-stamp { opacity: 1; transform: rotate(-8deg); }