/* overlay-render.css - the event overlays' on-stream look (overlay-render.js sets the --eo-* variables). */
.eo-alerts, .eo-goal, .eo-label {
  font-family: var(--eo-font); font-weight: var(--eo-weight); font-size: var(--eo-size); line-height: 1.2; color: var(--eo-text);
}
.eo-hl { color: var(--eo-accent); }
/* text effects */
[data-effect="outline"] .eo-text, [data-effect="outline"] .eo-msg, [data-effect="outline"] .eo-label-box, [data-effect="outline"] .eo-goal-title,
[data-effect="outline"] .eo-bar-text { -webkit-text-stroke: calc(var(--eo-fx-size) * 2) var(--eo-fx); paint-order: stroke fill; }
[data-effect="shadow"] .eo-text, [data-effect="shadow"] .eo-msg, [data-effect="shadow"] .eo-label-box, [data-effect="shadow"] .eo-goal-title,
[data-effect="shadow"] .eo-bar-text { text-shadow: 0 calc(var(--eo-fx-size) * .6) calc(var(--eo-fx-size) * 1.5) var(--eo-fx); }

/* ---- alerts: one at a time, in the middle of the source */
.eo-alerts { position: relative; width: 100%; height: 100%; }
.eo-alert {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--eo-space, 16px);
  width: max-content; max-width: var(--eo-width); box-sizing: border-box; font-size: var(--eo-size);
  padding: var(--eo-pad); border-radius: var(--eo-radius); background: var(--eo-bg); text-align: center;
  opacity: 0;
}
.eo-alerts[data-layout="beside"] .eo-alert { flex-direction: row; text-align: left; }
/* the picture behind the words: both in one cell, the words on top */
.eo-alerts[data-layout="behind"] .eo-alert { display: grid; place-items: center; }
.eo-alerts[data-layout="behind"] .eo-alert > * { grid-area: 1 / 1; }
.eo-alerts[data-layout="behind"] .eo-body { position: relative; z-index: 1; }
/* the picture outside the background: the background goes behind the words only */
.eo-alerts[data-outside="yes"] .eo-alert { background: none; padding: 0; border-radius: 0; }
.eo-alerts[data-outside="yes"] .eo-body { padding: var(--eo-pad); border-radius: var(--eo-radius); background: var(--eo-bg); }
.eo-media { display: block; max-width: var(--eo-img); max-height: var(--eo-img); object-fit: contain; border-radius: calc(var(--eo-radius) * .6); }
/* where a picture would go: a faint shadow (the setup page's preview, while the picture is being set up) */
.eo-spot { flex-shrink: 0; box-sizing: border-box; width: var(--eo-img); height: var(--eo-img); border-radius: calc(var(--eo-radius) * .6);
  background: rgba(140, 150, 160, .18); border: 4px dashed rgba(140, 150, 160, .4); }
.eo-body { min-width: 0; }
.eo-text { overflow-wrap: anywhere; }
.eo-msg { margin-top: .3em; font-size: .55em; font-weight: 600; opacity: .92; overflow-wrap: anywhere; }

/* in / out (the --a transform is kept with the centering) */
.eo-alert.in { opacity: 1; transition: opacity .4s ease, transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.eo-alert.out { opacity: 0; transition: opacity .45s ease, transform .45s ease-in; }
.eo-alert[data-anim="none"] { transition: none !important; }
.eo-alert[data-anim="pop"] { transform: translate(-50%, -50%) scale(.6); }
.eo-alert[data-anim="pop"].in { transform: translate(-50%, -50%) scale(1); }
.eo-alert[data-anim="pop"].out { transform: translate(-50%, -50%) scale(.85); }
.eo-alert[data-anim="slide-up"] { transform: translate(-50%, 30%); }
.eo-alert[data-anim="slide-up"].in { transform: translate(-50%, -50%); }
.eo-alert[data-anim="slide-up"].out { transform: translate(-50%, -130%); }
.eo-alert[data-anim="slide-down"] { transform: translate(-50%, -130%); }
.eo-alert[data-anim="slide-down"].in { transform: translate(-50%, -50%); }
.eo-alert[data-anim="slide-down"].out { transform: translate(-50%, 30%); }
.eo-alert[data-anim="bounce"].in { animation: eo-bounce .9s ease both; transition: opacity .2s; }
@keyframes eo-bounce {
  0% { transform: translate(-50%, -50%) scale(.3); } 45% { transform: translate(-50%, -50%) scale(1.12); }
  65% { transform: translate(-50%, -50%) scale(.94); } 82% { transform: translate(-50%, -50%) scale(1.04); } 100% { transform: translate(-50%, -50%) scale(1); }
}
.eo-alert[data-anim="bounce"].out { transform: translate(-50%, -50%) scale(.7); }

/* ---- goal: a bar across the source, its title above or inside */
.eo-goal { box-sizing: border-box; width: 100%; padding: var(--eo-pad); border-radius: var(--eo-radius); background: var(--eo-bg); }
.eo-goal-title { margin-bottom: .3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-goal[data-title="inside"] .eo-goal-title, .eo-goal[data-title="none"] .eo-goal-title { display: none; }
.eo-bar { position: relative; height: var(--eo-bar-h); border-radius: var(--eo-radius); background: var(--eo-track); overflow: hidden; }
.eo-bar i { position: absolute; inset: 0 auto 0 0; background: var(--eo-fill); border-radius: inherit; transition: width .8s cubic-bezier(.3, .9, .3, 1); }
.eo-bar-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: .6em;
  padding: 0 .6em; font-size: min(.8em, calc(var(--eo-bar-h) * .62)); white-space: nowrap;
}
.eo-goal:not([data-title="inside"]) .eo-bar-text { justify-content: center; }
.eo-bar-name { overflow: hidden; text-overflow: ellipsis; }
.eo-bar-nums { color: var(--eo-text); }
.eo-goal.done .eo-bar i { box-shadow: 0 0 calc(var(--eo-bar-h) * .5) var(--eo-fill); animation: eo-glow 1.6s ease-in-out infinite alternate; }
@keyframes eo-glow { to { filter: brightness(1.25); } }
.eo-goal.bump .eo-bar { animation: eo-bump .5s ease; }
@keyframes eo-bump { 40% { transform: scale(1.025); } }

/* ---- label: its title, then its value (beside, or above it) */
.eo-label { display: flex; }
.eo-label[data-align="center"] { justify-content: center; }
.eo-label[data-align="right"] { justify-content: flex-end; }
.eo-label-box { padding: var(--eo-pad); border-radius: var(--eo-radius); background: var(--eo-bg); white-space: nowrap; }
.eo-label-sep { white-space: pre; }
.eo-label[data-labelpos="above"] .eo-label-box { display: flex; flex-direction: column; align-items: flex-start; }
.eo-label[data-labelpos="above"][data-align="center"] .eo-label-box { align-items: center; }
.eo-label[data-labelpos="above"][data-align="right"] .eo-label-box { align-items: flex-end; }
/* ---- all the labels: stacked or side by side, on one line (made smaller to fit, never wrapped: overlay-render.js) */
.eo-labels-fit { display: flex; justify-content: flex-start; }
.eo-labels-fit[data-align="center"] { justify-content: center; }
.eo-labels-fit[data-align="right"] { justify-content: flex-end; }
.eo-labels { display: flex; flex-direction: column; align-items: flex-start; gap: var(--eo-lgap, 12px); width: max-content; }
.eo-labels-fit[data-align="center"] .eo-labels { align-items: center; }
.eo-labels-fit[data-align="right"] .eo-labels { align-items: flex-end; }
.eo-labels-fit[data-direction="row"] .eo-labels { flex-direction: row; align-items: flex-start; }
.eo-label-box.new { animation: eo-new .6s ease; }
@keyframes eo-new { 0% { opacity: 0; transform: translateY(.4em); } 100% { opacity: 1; transform: none; } }