html[data-platform="desktop"] .chat-head{position:relative;isolation:isolate}
html[data-platform="desktop"] .nova-heading-primary.has-header-scene{position:relative;isolation:isolate;overflow:hidden}
.header-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;border-radius:inherit;animation:header-scene-reveal .35s ease-out both}
.header-scene canvas{display:block;width:100%;height:100%}
.header-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0815ed 0%,#100b19b8 28%,#100b1930 57%,#100b190a 78%,#100b1966 100%)}
.header-scene-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:16px;padding:0 205px 0 22px;color:#fff4df;min-width:0;font-family:inherit;line-height:1.15;text-shadow:0 1px 4px #100b19}
.header-scene-emblem{flex:0 0 auto;font-size:30px;font-weight:800;letter-spacing:-1px;color:#ffdf98;line-height:1}
.header-scene-title{font-size:20px;font-weight:600;letter-spacing:.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-scene-person{font-size:16px;font-weight:500;color:#e5def2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-scene-person:empty{display:none}
.header-scene[data-scene="freeze"] .header-scene-emblem{color:#c2eeff}
.header-scene[data-scene="moderator"] .header-scene-emblem{color:#ff957f}
.header-scene[data-scene="multiplier"]::after{background:linear-gradient(0deg,#100c2244,transparent 55%,#100c221a)}
.header-scene[data-scene="multiplier"] .header-scene-copy{justify-content:center;padding:0 190px;animation:header-clash-title .45s cubic-bezier(.2,.8,.25,1) 1.2s both}
.header-scene[data-scene="multiplier"] .header-scene-emblem{font-size:32px;color:#fff;text-shadow:-2px 0 12px #ff4fa7,2px 0 12px #42baff}
.header-scene[data-scene="multiplier"] .header-scene-title{color:#f6edff}
@keyframes header-clash-title{from{opacity:0;transform:scale(.88);filter:blur(3px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
.has-header-scene>div:not(.header-scene):not(.live-controls){visibility:hidden}
.has-header-scene .live-controls{position:relative;z-index:3}
@keyframes header-scene-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.header-scene-copy{padding-left:16px;gap:10px}.header-scene-title{font-size:17px}.header-scene-emblem{font-size:26px}.header-scene-person{font-size:14px}}
@media(prefers-reduced-motion:reduce){.header-scene,.header-scene[data-scene="multiplier"] .header-scene-copy{animation:none}}

.header-scene[data-scene="heli"] canvas{opacity:.5}
.header-scene[data-scene="heli"] .header-scene-title{color:#fff8d0;text-shadow:0 1px 3px #18230c,0 0 15px #ffe67c66;white-space:nowrap}
.header-scene[data-scene="heli"] .header-scene-emblem{font-size:26px}
html[data-platform="desktop"] .nova-heading-primary.has-header-scene>.nova-heading-actions{position:relative;z-index:3;visibility:visible}

html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip{
  --role-color:#ff4f7d;
  --role-entry-inline-padding:16px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  container:role-entry-heading / inline-size;
}
html[data-platform="desktop"] .chat-head.has-role-entry-strip{--role-entry-inline-padding:17px}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry="superfan"]{
  --role-color:#ffcb35;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry="guardian"]{
  --role-color:#35efa0;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry="heli"]{
  --role-color:#ffbd77;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-left:3px solid var(--role-color);
  background:linear-gradient(90deg,color-mix(in srgb,var(--role-color) 25%,#171820),#171820 30%,#171820 100%);
  pointer-events:none;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-36%;
  width:36%;
  z-index:3;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--role-color) 18%,transparent),transparent);
  pointer-events:none;
  animation:role-entry-light-sweep 4.2s ease-out both;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry="superfan"]::after{
  animation-name:role-entry-light-pulse;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry="guardian"]::after{
  animation-name:role-entry-light-return;
}
html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry="heli"]::after{
  animation-name:role-entry-light-pulse;
}
html[data-platform="desktop"] .nova-heading-primary.has-role-entry-strip>.nova-heading-copy,
html[data-platform="desktop"] .chat-head.has-role-entry-strip>:first-child:not(.live-controls){display:none!important}
html[data-platform="desktop"] .nova-heading-primary.has-role-entry-strip>.nova-heading-actions,
html[data-platform="desktop"] .chat-head.has-role-entry-strip>.live-controls{position:relative;z-index:4;visibility:visible}
.header-scene.role-entry-strip{--role-art:url('/alerts/role-entry/moderator.png');position:relative;inset:auto;z-index:3;display:flex;flex:1 1 auto;align-self:stretch;align-items:center;gap:10px;box-sizing:border-box;min-width:0;height:100%;padding:7px 12px;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;color:var(--role-color);animation:role-entry-strip-opacity 4.2s ease-in-out both}
html[data-platform="desktop"] .role-entry-strip[data-scene="superfan"]{--role-art:url('/alerts/role-entry/superfan.png?v=2')}
html[data-platform="desktop"] .role-entry-strip[data-scene="guardian"]{--role-art:url('/alerts/role-entry/guardian.png?v=2')}
html[data-platform="desktop"] .role-entry-strip[data-scene="heli"]{--role-art:url('/alerts/role-entry/heli.png?v=3')}
@container role-entry-heading (max-width:500px){
  html[data-platform="desktop"] .role-entry-strip[data-scene="moderator"]{--role-art:url('/alerts/role-entry/moderator-compact.png')}
  html[data-platform="desktop"] .role-entry-strip[data-scene="superfan"]{--role-art:url('/alerts/role-entry/superfan-compact.png?v=2')}
  html[data-platform="desktop"] .role-entry-strip[data-scene="guardian"]{--role-art:url('/alerts/role-entry/guardian-compact.png?v=2')}
  html[data-platform="desktop"] .role-entry-strip[data-scene="heli"]{--role-art:url('/alerts/role-entry/heli-compact.png?v=3')}
}
@container role-entry-heading (min-width:500.01px) and (max-width:900px){
  html[data-platform="desktop"] .role-entry-strip[data-scene="moderator"]{--role-art:url('/alerts/role-entry/moderator-medium.png')}
  html[data-platform="desktop"] .role-entry-strip[data-scene="superfan"]{--role-art:url('/alerts/role-entry/superfan-medium.png?v=2')}
  html[data-platform="desktop"] .role-entry-strip[data-scene="guardian"]{--role-art:url('/alerts/role-entry/guardian-medium.png?v=2')}
  html[data-platform="desktop"] .role-entry-strip[data-scene="heli"]{--role-art:url('/alerts/role-entry/heli-medium.png?v=3')}
}
.header-scene.role-entry-strip::before{
  content:"";
  position:absolute;
  inset-block:0;
  left:calc(-1 * var(--role-entry-inline-padding));
  width:calc(100cqw + 2 * var(--role-entry-inline-padding));
  z-index:0;
  border-left:3px solid var(--role-color);
  background-image:linear-gradient(90deg,#171820ec 0%,#171820c7 30%,#17182028 62%,#1718209c 100%),var(--role-art),linear-gradient(90deg,color-mix(in srgb,var(--role-color) 28%,#1d2028),#20222a);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
  animation:role-entry-art-wipe 4.2s ease-in-out both;
}
html[data-platform="desktop"] .role-entry-strip[data-scene="superfan"]::before{animation-name:role-entry-art-open}
html[data-platform="desktop"] .role-entry-strip[data-scene="guardian"]::before{animation-name:role-entry-art-scan}
html[data-platform="desktop"] .role-entry-strip[data-scene="heli"]::before{
  background-image:linear-gradient(90deg,#12131fe0 0,#12131f9e 90px,#12131f00 220px,#12131f00 calc(100% - 110px),#12131fc5 100%),var(--role-art),linear-gradient(90deg,#342032,#241c2f);
  background-size:cover;
  background-position:center;
  animation-name:role-entry-art-sunrise;
}
.role-entry-strip::after{display:none}
.role-entry-strip>*{position:relative;z-index:1}
.role-entry-effects{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;animation:role-entry-effects-cycle 4.2s linear both}
.role-entry-particle{position:absolute;top:var(--y);left:var(--x);width:var(--size);height:var(--size);border-radius:50%;background:var(--role-color);box-shadow:0 0 7px 2px color-mix(in srgb,var(--role-color) 70%,transparent);opacity:0;animation:role-entry-particle-rise var(--duration) ease-out var(--delay) infinite}
html[data-platform="desktop"] [data-role-entry="superfan"] .role-entry-particle{box-shadow:0 0 10px 3px color-mix(in srgb,var(--role-color) 75%,transparent)}
html[data-platform="desktop"] [data-role-entry="guardian"] .role-entry-particle{border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
html[data-platform="desktop"] [data-role-entry="heli"] .role-entry-particle{box-shadow:0 0 11px 3px #ffcf8780}
.role-entry-sigil{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1px solid currentColor;border-radius:50%;font-size:13px}
.role-entry-info{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:0;line-height:1.15}
.role-entry-rank{color:var(--role-color);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.role-entry-name{overflow:hidden;color:#fff;font-size:15px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.role-entry-sub{max-width:38%;overflow:hidden;color:#bfc4d2;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
@keyframes role-entry-strip-cycle{0%{opacity:0;clip-path:inset(0 100% 0 0)}18%,58%{opacity:1;clip-path:inset(0)}75%,100%{opacity:0;clip-path:inset(0 100% 0 0)}}
@keyframes role-entry-strip-opacity{0%{opacity:0}18%,58%{opacity:1}75%,100%{opacity:0}}
@keyframes role-entry-art-wipe{0%{opacity:0;clip-path:inset(0 100% 0 0)}17%,73%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 100% 0 0)}}
@keyframes role-entry-art-open{0%{opacity:0;clip-path:inset(0 50% 0 50%)}17%,73%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 50% 0 50%)}}
@keyframes role-entry-art-scan{0%{opacity:0;clip-path:inset(100% 0 0 0)}17%,73%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes role-entry-art-sunrise{0%{opacity:0;clip-path:inset(100% 0 0 0)}18%,73%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes role-entry-light-sweep{0%,8%{opacity:0;transform:translateX(0)}17%{opacity:1}65%{opacity:.7}82%,100%{opacity:0;transform:translateX(380%)}}
@keyframes role-entry-light-pulse{0%,12%,76%,100%{opacity:0;transform:translateX(160%)}32%,58%{opacity:1;transform:translateX(160%)}}
@keyframes role-entry-light-return{0%,8%{opacity:0;transform:translateX(380%)}18%{opacity:1}72%{opacity:.65}100%{opacity:0;transform:translateX(0)}}
@keyframes role-entry-effects-cycle{0%,10%,78%,100%{opacity:0}20%,68%{opacity:1}}
@keyframes role-entry-particle-rise{0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}20%{opacity:.85}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.4)}}
@media(max-width:700px){.role-entry-sub{display:none}}
@media(max-width:500px){.header-scene.role-entry-strip{gap:7px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.header-scene.role-entry-strip,html[data-platform="desktop"] .header-scene.role-entry-strip[data-scene]::before,html[data-platform="desktop"] :is(.nova-heading-primary,.chat-head).has-role-entry-strip[data-role-entry]::after{animation:none}.role-entry-effects{display:none}}
