/* Alert look, shared by the overlay and the settings preview. Streamers can override any of it with custom CSS. */
.fa-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fa-pos { position: absolute; left: 50%; top: 50%; width: max-content; max-width: 86%; transform: translate(-50%, -50%) scale(var(--fa-scale, 1)); transform-origin: 50% 50%; display: flex; justify-content: center; }
.fa-alert { position: relative; display: flex; align-items: center; gap: 22px; max-width: 100%; font-family: var(--fa-font), system-ui, sans-serif;
  font-weight: var(--fa-weight); color: var(--fa-text); text-align: center; }
.fa-layout-stacked { flex-direction: column; gap: 14px; }
.fa-layout-side { flex-direction: row; text-align: left; }
.fa-card { background: var(--fa-card); border-radius: var(--fa-radius); padding: 26px 40px; }
.fa-img { width: var(--fa-img); height: var(--fa-img); object-fit: contain; flex: none; }
.fa-avatar { border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(255,255,255,0)); }
.fa-robux { color: var(--fa-hl); }
.fa-robux svg { width: 100%; height: 100%; display: block; }
.fa-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fa-line { font-size: var(--fa-size); line-height: 1.15; overflow-wrap: anywhere; }
.fa-hl { color: var(--fa-hl); }
.fa-msg { font-size: var(--fa-msg-size); color: var(--fa-msg); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.fa-shadow .fa-line, .fa-shadow .fa-msg { text-shadow: 0 0 1px rgba(0,0,0,.9), 0 1px 1px rgba(0,0,0,.9), 0 2px 3px rgba(0,0,0,.75); }
.fa-shadow .fa-hl { text-shadow: inherit; }
.fa-shadow .fa-img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.fa-outline .fa-line, .fa-outline .fa-msg { -webkit-text-stroke: max(2px, calc(var(--fa-size) * .07)) rgba(0,0,0,.85); paint-order: stroke fill; }

.fa-in-pop { animation: fa-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.fa-in-fade { animation: fa-fade .5s ease both; }
.fa-in-slide-up { animation: fa-up .55s cubic-bezier(.2,.9,.3,1.1) both; }
.fa-in-slide-down { animation: fa-down .55s cubic-bezier(.2,.9,.3,1.1) both; }
.fa-in-slide-left { animation: fa-left .55s cubic-bezier(.2,.9,.3,1.1) both; }
.fa-in-slide-right { animation: fa-right .55s cubic-bezier(.2,.9,.3,1.1) both; }
.fa-in-zoom { animation: fa-zoom .5s ease-out both; }
.fa-in-bounce { animation: fa-bounce .9s both; }
.fa-in-spin { animation: fa-spin .7s cubic-bezier(.2,1.2,.4,1) both; }
.fa-out-pop { animation: fa-pop .5s ease-in reverse both; }
.fa-out-fade { animation: fa-fade .5s ease reverse both; }
.fa-out-slide-up { animation: fa-down .5s ease-in reverse both; }
.fa-out-slide-down { animation: fa-up .5s ease-in reverse both; }
.fa-out-slide-left { animation: fa-right .5s ease-in reverse both; }
.fa-out-slide-right { animation: fa-left .5s ease-in reverse both; }
.fa-out-zoom { animation: fa-zoom .5s ease-in reverse both; }
.fa-out-bounce { animation: fa-pop .5s ease-in reverse both; }
.fa-out-spin { animation: fa-spin .5s ease-in reverse both; }
.fa-out-none { visibility: hidden; }

@keyframes fa-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes fa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fa-up { from { opacity: 0; transform: translateY(160px); } to { opacity: 1; transform: none; } }
@keyframes fa-down { from { opacity: 0; transform: translateY(-160px); } to { opacity: 1; transform: none; } }
@keyframes fa-left { from { opacity: 0; transform: translateX(260px); } to { opacity: 1; transform: none; } }
@keyframes fa-right { from { opacity: 0; transform: translateX(-260px); } to { opacity: 1; transform: none; } }
@keyframes fa-zoom { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fa-bounce { 0% { opacity: 0; transform: translateY(-300px); } 45% { opacity: 1; transform: translateY(0); } 62% { transform: translateY(-50px); }
  78% { transform: translateY(0); } 90% { transform: translateY(-14px); } 100% { transform: none; } }
@keyframes fa-spin { from { opacity: 0; transform: rotate(-200deg) scale(.2); } to { opacity: 1; transform: none; } }