@import url('./artwork.css');
.alert-plane{position:absolute;width:1920px;height:1080px;left:50%;top:50%;transform-origin:center;pointer-events:none;overflow:hidden;font-family:Inter,system-ui,sans-serif;contain:layout style}
.alert-position{position:absolute;width:820px;left:550px;top:70px}
.alert-position-center{top:50%;transform:translateY(-50%)}.alert-position-bottom{top:auto;bottom:70px}.alert-position-top-left{left:70px}.alert-position-top-right{left:auto;right:70px}.alert-position-bottom-left{top:auto;bottom:70px;left:70px}.alert-position-bottom-right{top:auto;bottom:70px;left:auto;right:70px}
.alert-size{transform-origin:top center}.alert-position-bottom .alert-size,.alert-position-bottom-left .alert-size,.alert-position-bottom-right .alert-size{transform-origin:bottom center}
.alert-position-center .alert-size{transform-origin:center}.alert-position-top-left .alert-size{transform-origin:left top}.alert-position-bottom-left .alert-size{transform-origin:left bottom}.alert-position-top-right .alert-size{transform-origin:right top}.alert-position-bottom-right .alert-size{transform-origin:right bottom}
.alert-position-custom{right:auto;bottom:auto;transform:translate(-50%,-50%)}.alert-position-custom .alert-size{transform-origin:center}
/* Only the dashboard enables this persistent, silent arrangement mode. */
.alert-layout-editing *,.alert-layout-editing *:before,.alert-layout-editing *:after{animation:none!important;transition:none!important}
.alert-layout-editing .alert-artwork,.alert-layout-editing .stream-alert{animation:none!important;opacity:1!important;transform:none!important}
.alert-canvas-frame{position:absolute;box-sizing:border-box;z-index:90;border:1px dashed #e8b98f;pointer-events:none}
.alert-canvas-frame[hidden]{display:none!important}
.alert-canvas-frame button{position:absolute;box-sizing:border-box;margin:0;padding:0;min-width:0;min-height:0;border-radius:2px;pointer-events:auto;touch-action:none}
.alert-canvas-frame .alert-canvas-move{inset:0;width:100%;height:100%;background:transparent;border:0;cursor:move;box-shadow:none}
.alert-canvas-badge{position:absolute;left:0;top:0;padding:3px 7px;background:#e8b98f;color:#171a20;font:600 11px/1.3 system-ui,sans-serif;white-space:nowrap}
.alert-canvas-frame .alert-canvas-resize{right:-9px;bottom:-9px;width:24px;height:24px;background:#e8b98f;color:#171a20;border:1px solid #171a20;cursor:nwse-resize;font:700 18px/1 system-ui,sans-serif}
.alert-canvas-frame button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.stream-alert{position:relative;display:flex;align-items:center;gap:34px;box-sizing:border-box;min-height:196px;padding:34px 40px;color:var(--alert-ink);background:var(--alert-bg);border:2px solid var(--alert-accent);border-radius:28px;box-shadow:0 22px 70px #0009,0 0 42px color-mix(in srgb,var(--alert-accent) 28%,transparent);animation:alert-rise var(--alert-duration) linear both;isolation:isolate}
.stream-alert[data-media-pos="right"]{flex-direction:row-reverse}.stream-alert[data-media-pos="top"]{flex-direction:column;text-align:center;gap:20px}
.alert-motion-slide{animation-name:alert-slide}.alert-motion-pop{animation-name:alert-pop}.alert-motion-portal{animation-name:alert-portal}.alert-motion-glitch{animation-name:alert-glitch}.alert-motion-impact{animation-name:alert-impact}
.alert-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:0}
.alert-sheen:before{content:"";position:absolute;top:-40%;bottom:-40%;left:-35%;width:34%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--alert-accent) 22%,rgba(255,255,255,.16)),transparent);transform:skewX(-24deg);animation:alert-sheen-sweep 4.2s cubic-bezier(.22,1,.36,1) infinite}
.alert-copy{flex:1;min-width:0;z-index:2}.alert-label{font-size:21px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--alert-accent);margin-bottom:8px;line-height:1.3;overflow-wrap:anywhere;text-shadow:0 0 18px color-mix(in srgb,var(--alert-accent) 38%,transparent)}
.alert-message{font-size:38px;line-height:1.18;font-weight:800;overflow-wrap:anywhere;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.alert-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.alert-extra-lines{display:flex;flex-direction:column;gap:6px;margin-top:8px}.alert-extra-line{font-size:18px;font-weight:650;color:color-mix(in srgb,var(--alert-ink) 86%,var(--alert-accent));line-height:1.35;overflow-wrap:anywhere}
.alert-extra-line-detail{padding:8px 14px;border-left:3.5px solid var(--alert-accent);background:color-mix(in srgb,var(--alert-accent) 10%,transparent);border-radius:0 8px 8px 0;font-size:16px}
.alert-extra-line-badge{align-self:flex-start;padding:3px 11px;border-radius:999px;background:var(--alert-accent);color:var(--alert-bg);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.alert-extra-line-title{font-size:24px;font-weight:800;color:var(--alert-ink)}
.alert-emblem{position:relative;flex:0 0 112px;width:112px;height:112px;display:grid;place-items:center;color:var(--alert-accent);border-radius:30px;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--alert-accent) 26%,transparent),color-mix(in srgb,var(--alert-accent) 8%,transparent));box-shadow:inset 0 0 18px color-mix(in srgb,var(--alert-accent) 24%,transparent),0 10px 28px #0006;animation:alert-float 2.6s ease-in-out infinite;z-index:2}
.alert-emblem-ring{position:absolute;inset:-6px;border-radius:34px;border:1.5px dashed color-mix(in srgb,var(--alert-accent) 55%,transparent);animation:alert-ring-spin 14s linear infinite;pointer-events:none}
.alert-emblem>svg,.alert-emblem .alert-custom-image{width:74px;height:74px;object-fit:contain;fill:color-mix(in srgb,var(--alert-accent) 22%,transparent);stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--alert-accent) 52%,transparent))}
.alert-legacy-art{width:100px;height:100px;display:block}.alert-legacy-art>svg{width:100%;height:100%;display:block}
.alert-design-glow{background:radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--alert-accent) 28%,transparent),transparent 58%),radial-gradient(circle at 88% 85%,color-mix(in srgb,var(--alert-accent) 18%,transparent),transparent 62%),var(--alert-bg);box-shadow:0 24px 75px #000b,0 0 48px color-mix(in srgb,var(--alert-accent) 34%,transparent),inset 0 0 28px color-mix(in srgb,var(--alert-accent) 16%,transparent)}
.alert-design-glow:before{content:"";position:absolute;inset:-12px;border-radius:38px;border:1.5px solid color-mix(in srgb,var(--alert-accent) 42%,transparent);box-shadow:0 0 32px color-mix(in srgb,var(--alert-accent) 26%,transparent);animation:alert-aura-breathe 2.8s ease-in-out infinite;z-index:-1;pointer-events:none}
.alert-design-glow:after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;background:radial-gradient(ellipse at 18% 0%,color-mix(in srgb,var(--alert-accent) 34%,transparent),transparent 68%)}
.alert-sparks{position:absolute;inset:-34px;pointer-events:none;overflow:visible;z-index:3}.alert-sparks[hidden]{display:none!important}.alert-sparks i{position:absolute;left:var(--x);top:74%;width:8px;height:8px;background:var(--alert-accent);border-radius:50%;animation:alert-spark 2.8s cubic-bezier(.16,1,.3,1) infinite;animation-delay:var(--delay);box-shadow:0 0 12px var(--alert-accent),0 0 22px var(--alert-accent)}
.alert-sparks i:nth-child(3n){background:color-mix(in srgb,var(--alert-accent) 55%,#ffffff);box-shadow:0 0 14px #ffffff}
.alert-sparks i:nth-child(4n){width:11px;height:11px;border-radius:2px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.alert-design-paper{border-radius:12px;background:linear-gradient(155deg,color-mix(in srgb,var(--alert-bg) 92%,#ffffff) 0%,var(--alert-bg) 100%);box-shadow:10px 10px 0 color-mix(in srgb,var(--alert-accent) 68%,transparent),18px 18px 0 rgba(0,0,0,.28),0 24px 55px #0007;border-width:3px;transform:rotate(-1deg)}
.alert-design-paper:before{content:"";position:absolute;top:-13px;left:50%;width:118px;height:24px;transform:translateX(-50%) rotate(-2deg);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--alert-accent) 76%,transparent),color-mix(in srgb,var(--alert-accent) 76%,transparent) 8px,color-mix(in srgb,var(--alert-ink) 22%,transparent) 8px,color-mix(in srgb,var(--alert-ink) 22%,transparent) 16px);border-left:2px dotted rgba(255,255,255,.65);border-right:2px dotted rgba(255,255,255,.65);box-shadow:0 3px 8px rgba(0,0,0,.22);pointer-events:none;z-index:4}
.alert-design-paper:after{content:"";position:absolute;inset:9px;border:1.5px dashed color-mix(in srgb,var(--alert-accent) 45%,transparent);border-radius:6px;pointer-events:none}
.alert-design-paper .alert-sparks i{width:10px;height:20px;box-shadow:0 3px 6px rgba(0,0,0,.22);border-radius:2px;clip-path:none;animation-name:alert-confetti;background:var(--alert-accent)}
.alert-design-paper .alert-sparks i:nth-child(3n){background:var(--alert-ink)}.alert-design-paper .alert-sparks i:nth-child(4n){background:color-mix(in srgb,var(--alert-accent) 55%,#ffd166);width:12px;height:12px;border-radius:50%}
.alert-design-paper .alert-emblem{background:color-mix(in srgb,var(--alert-accent) 14%,transparent);border:2px solid var(--alert-accent);border-radius:18px;box-shadow:5px 5px 0 color-mix(in srgb,var(--alert-accent) 45%,transparent);transform:rotate(-5deg)}
.alert-design-paper .alert-emblem-ring{inset:5px;border-radius:12px;animation:none}
.alert-design-minimal{border:1px solid color-mix(in srgb,var(--alert-accent) 28%,rgba(255,255,255,.1));border-left:8px solid var(--alert-accent);border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--alert-accent) 18%,var(--alert-bg)) 0%,var(--alert-bg) 42%);box-shadow:0 16px 42px #0007,-6px 0 24px color-mix(in srgb,var(--alert-accent) 32%,transparent)}
.alert-design-minimal .alert-sparks{display:none}.alert-design-minimal .alert-emblem{background:color-mix(in srgb,var(--alert-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--alert-accent) 32%,transparent);border-radius:14px;box-shadow:none;animation:none}
.alert-design-minimal .alert-emblem-ring{display:none}
.alert-progress{height:10px;margin-top:18px;background:#ffffff24;border-radius:999px;overflow:hidden;border:1px solid color-mix(in srgb,var(--alert-accent) 35%,transparent)}.alert-progress>div{height:100%;background:linear-gradient(90deg,var(--alert-accent),color-mix(in srgb,var(--alert-accent) 65%,#ffffff));transition:width .45s ease;box-shadow:0 0 14px var(--alert-accent)}
.alert-lifetime{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:0 0 26px 26px;z-index:4}
.alert-lifetime>div{width:100%;height:100%;background:linear-gradient(90deg,var(--alert-accent),color-mix(in srgb,var(--alert-accent) 60%,#ffffff));transform-origin:left center;animation:art-lifetimeCountdown var(--alert-duration) linear forwards}
.alert-kind-raid .alert-emblem{animation:alert-launch 2s ease-in-out infinite}.alert-kind-hypetrain .alert-emblem{animation:alert-train 1s ease-in-out infinite}.alert-kind-gift .alert-emblem{animation:alert-gift 2.6s ease-in-out infinite}
@keyframes alert-rise{0%{opacity:0;transform:translateY(48px) scale(.94)}7%,91%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.97)}}
@keyframes alert-slide{0%{opacity:0;transform:translateX(-110px)}7%,91%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(90px)}}
@keyframes alert-pop{0%{opacity:0;transform:scale(.72)}6%{opacity:1;transform:scale(1.03)}10%,91%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes alert-portal{0%{opacity:0;transform:scaleX(.12) scaleY(.04) rotate(-6deg);filter:brightness(2.4) blur(8px)}5%{opacity:1;transform:scaleX(1.05) scaleY(.95) rotate(.5deg);filter:brightness(1.35) blur(0)}9%,91%{opacity:1;transform:scale(1) rotate(0);filter:brightness(1)}100%{opacity:0;transform:scaleX(1.18) scaleY(.04);filter:brightness(2) blur(6px)}}
@keyframes alert-glitch{0%{opacity:0;transform:translate(-34px,10px) skewX(22deg)}2%{opacity:.9;transform:translate(22px,-8px) skewX(-16deg)}4%{opacity:.75;transform:translate(-10px,4px) skewX(8deg)}6%,91%{opacity:1;transform:translate(0,0) skewX(0)}95%{opacity:.8;transform:translate(16px,-4px) skewX(-12deg)}100%{opacity:0;transform:translate(-28px,6px) skewX(18deg)}}
@keyframes alert-impact{0%{opacity:0;transform:translateY(-140px) scaleX(.82) scaleY(1.22)}5%{opacity:1;transform:translateY(8px) scaleX(1.06) scaleY(.92)}8%{transform:translateY(-4px) scaleX(.98) scaleY(1.02)}11%,91%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(42px) scale(.92)}}
@keyframes alert-float{50%{transform:translateY(-6px)}}@keyframes alert-launch{50%{transform:translateY(-10px) rotate(5deg)}}@keyframes alert-train{25%{transform:rotate(-3deg) translateY(-2px)}75%{transform:rotate(3deg) translateY(-2px)}}@keyframes alert-gift{15%,35%{transform:rotate(-8deg)}25%,45%{transform:rotate(8deg)}55%{transform:rotate(0)}}
@keyframes alert-ring-spin{to{transform:rotate(360deg)}}
@keyframes alert-aura-breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}
@keyframes alert-sheen-sweep{0%{left:-45%;opacity:0}14%{opacity:1}38%,100%{left:135%;opacity:0}}
@keyframes alert-spark{0%{opacity:0;transform:translate(0,10px) scale(.4)}22%{opacity:.95;transform:translate(calc(var(--drift,0px) * .35),-38px) scale(var(--scale,1))}100%{opacity:0;transform:translate(var(--drift,0px),-175px) rotate(var(--spin,90deg)) scale(.1)}}
@keyframes alert-confetti{0%{opacity:0;transform:translate(0,-125px) rotate(0) scale(var(--scale,1))}15%{opacity:1}100%{opacity:0;transform:translate(var(--drift,0px),75px) rotate(calc(280deg + var(--spin,60deg))) scale(.65)}}
@media(prefers-reduced-motion:reduce){.stream-alert{animation-name:alert-fade}.alert-emblem,.alert-emblem-ring,.alert-sparks i,.alert-sheen:before,.alert-design-glow:before,.alert-lifetime>div{animation:none}.alert-sparks,.alert-sheen{display:none}.alert-progress>div{transition:none}}
@keyframes alert-fade{0%,100%{opacity:0}7%,91%{opacity:1}}

/* Optional Hype Train border renderer; other alert designs stay unchanged. */
.hype-rail-root{position:absolute;inset:0;overflow:hidden;pointer-events:none;font-family:Inter,"Segoe UI",sans-serif;color:#f4f0fc}
.hype-rail-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hype-rail-status,.hype-rail-people{position:absolute;transform:translate(-50%,-50%);border:1px solid;border-radius:4px;padding:10px 14px;box-sizing:border-box;max-width:90%;text-align:center;overflow:hidden}
.hype-rail-label{font-size:.65em;letter-spacing:.13em;text-transform:uppercase;color:var(--hype-accent);margin-bottom:5px;overflow-wrap:anywhere}
.hype-rail-detail{font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.hype-rail-meter{height:3px;background:#ffffff1c;margin-top:8px;overflow:hidden}.hype-rail-fill{background:var(--hype-accent);height:100%}
.hype-rail-caption{font-size:.65em;letter-spacing:.08em;margin-bottom:7px;overflow-wrap:anywhere}.hype-rail-names{display:flex;gap:8px 16px;justify-content:center;flex-wrap:wrap;line-height:1.3}
.hype-rail-names span{overflow-wrap:anywhere;max-width:100%}.hype-rail-editable{pointer-events:auto;cursor:move;touch-action:none}.hype-rail-editable:hover{outline:1px dashed #e8b98f;outline-offset:3px}
.alerts-train-settings{margin-bottom:18px}.alerts-train-settings>p{line-height:1.6}
@keyframes hype-rail-exit{from{opacity:1}to{opacity:0}}