/* NOWGAME shared profile cosmetics. Loaded after every route stylesheet. */
.ng-cosmetic-name{
  display:inline-block;
  max-width:100%;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-decoration:none;
  vertical-align:baseline
}
.ng-nick-default{color:inherit}
.ng-nick-lunar{color:#dcecff!important}
.ng-nick-blue{color:#56a9ff!important}
.ng-nick-cobalt{color:#7194ff!important}
.ng-nick-cyan{color:#54e7ff!important}
.ng-nick-violet{color:#bd86ff!important}
.ng-nick-mint{color:#62f2c5!important}
.ng-nick-rose{color:#ff7fc8!important}
.ng-nick-mars{color:#ff826c!important}
.ng-nick-gold{color:#ffd36c!important}
.ng-nick-nebula,.ng-nick-aurora{
  color:transparent!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent
}
.ng-nick-nebula{background-image:linear-gradient(90deg,#9d7cff,#ff72c7,#5ee7ff)}
.ng-nick-aurora{
  background-image:linear-gradient(90deg,#53d8ff 0%,#7f9cff 28%,#c98cff 55%,#5fffd1 78%,#53d8ff 100%);
  background-size:220% 100%;
  animation:ngNickAurora 5s linear infinite
}
.ng-nickfx-shadow{text-shadow:2px 2px 0 #163c72,0 0 10px #438dff}
.ng-nickfx-glow{text-shadow:0 0 9px currentColor,0 0 20px color-mix(in srgb,currentColor 38%,transparent)}
.ng-nickfx-pulse{animation:ngNickPulse 2.3s ease-in-out infinite}
.ng-nickfx-shine{animation:ngNickShine 3.2s ease-in-out infinite}
.ng-nickfx-comet{text-shadow:-8px 0 12px currentColor,0 0 6px currentColor}
.ng-nickfx-glitch{animation:ngNickGlitch 2.8s steps(1) infinite}
.ng-nickfx-eclipse{text-shadow:0 0 2px #fff,0 0 10px currentColor,0 0 24px #7c5cff}
@keyframes ngNickAurora{to{background-position:-220% 0}}
@keyframes ngNickPulse{0%,100%{filter:brightness(1);text-shadow:0 0 5px currentColor}50%{filter:brightness(1.28);text-shadow:0 0 12px currentColor,0 0 24px currentColor}}
@keyframes ngNickShine{0%,72%,100%{filter:brightness(1);text-shadow:0 0 0 transparent}82%{filter:brightness(1.55);text-shadow:0 0 10px currentColor}90%{filter:brightness(1.08);text-shadow:0 0 3px currentColor}}
@keyframes ngNickGlitch{0%,92%,100%{transform:none;text-shadow:none}94%{transform:translateX(1px);text-shadow:-2px 0 #40dfff,2px 0 #ff4fa3}96%{transform:translateX(-1px)}}
.ng-nick-aurora.ng-nickfx-pulse{animation:ngNickAurora 5s linear infinite,ngNickPulse 2.3s ease-in-out infinite}
.ng-nick-aurora.ng-nickfx-shine{animation:ngNickAurora 5s linear infinite,ngNickShine 3.2s ease-in-out infinite}
.ng-nick-aurora.ng-nickfx-glitch{animation:ngNickAurora 5s linear infinite,ngNickGlitch 2.8s steps(1) infinite}

@property --ng-nick-scan-y{syntax:"<percentage>";inherits:false;initial-value:-12%}
.ng-nickfx-scan{
  --ng-nick-scan-y:-12%;
  background-image:none;
  background-size:auto;
  background-position:initial;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  -webkit-mask-image:linear-gradient(180deg,#000 0 calc(var(--ng-nick-scan-y) - 5%),rgba(0,0,0,.72) calc(var(--ng-nick-scan-y) - 3%),transparent calc(var(--ng-nick-scan-y) - .7%) calc(var(--ng-nick-scan-y) + .7%),rgba(0,0,0,.72) calc(var(--ng-nick-scan-y) + 3%),#000 calc(var(--ng-nick-scan-y) + 5%) 100%);
  mask-image:linear-gradient(180deg,#000 0 calc(var(--ng-nick-scan-y) - 5%),rgba(0,0,0,.72) calc(var(--ng-nick-scan-y) - 3%),transparent calc(var(--ng-nick-scan-y) - .7%) calc(var(--ng-nick-scan-y) + .7%),rgba(0,0,0,.72) calc(var(--ng-nick-scan-y) + 3%),#000 calc(var(--ng-nick-scan-y) + 5%) 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:ngNickScanCutout 3.2s linear infinite
}
.ng-nick-nebula.ng-nickfx-scan,.ng-nick-aurora.ng-nickfx-scan{
  color:transparent!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent
}
.ng-nick-nebula.ng-nickfx-scan{background-image:linear-gradient(90deg,#9d7cff,#ff72c7,#5ee7ff)}
.ng-nick-aurora.ng-nickfx-scan{
  background-image:linear-gradient(90deg,#53d8ff 0%,#7f9cff 28%,#c98cff 55%,#5fffd1 78%,#53d8ff 100%);
  background-size:220% 100%;
  animation:ngNickScanCutout 3.2s linear infinite,ngNickAurora 5s linear infinite
}
@keyframes ngNickScanCutout{0%,8%{--ng-nick-scan-y:-12%}92%,100%{--ng-nick-scan-y:112%}}

/* Page components use stronger text colors; keep the selected nickname color above them. */
.ng-article-hero__author .ng-cosmetic-name.ng-nick-lunar,.ng-message-chat__user .ng-cosmetic-name.ng-nick-lunar,.ng-message-thread .ng-cosmetic-name.ng-nick-lunar,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-lunar{color:#dcecff!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-blue,.ng-message-chat__user .ng-cosmetic-name.ng-nick-blue,.ng-message-thread .ng-cosmetic-name.ng-nick-blue,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-blue{color:#56a9ff!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-cobalt,.ng-message-chat__user .ng-cosmetic-name.ng-nick-cobalt,.ng-message-thread .ng-cosmetic-name.ng-nick-cobalt,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-cobalt{color:#7194ff!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-cyan,.ng-message-chat__user .ng-cosmetic-name.ng-nick-cyan,.ng-message-thread .ng-cosmetic-name.ng-nick-cyan,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-cyan{color:#54e7ff!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-violet,.ng-message-chat__user .ng-cosmetic-name.ng-nick-violet,.ng-message-thread .ng-cosmetic-name.ng-nick-violet,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-violet{color:#bd86ff!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-mint,.ng-message-chat__user .ng-cosmetic-name.ng-nick-mint,.ng-message-thread .ng-cosmetic-name.ng-nick-mint,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-mint{color:#62f2c5!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-rose,.ng-message-chat__user .ng-cosmetic-name.ng-nick-rose,.ng-message-thread .ng-cosmetic-name.ng-nick-rose,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-rose{color:#ff7fc8!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-mars,.ng-message-chat__user .ng-cosmetic-name.ng-nick-mars,.ng-message-thread .ng-cosmetic-name.ng-nick-mars,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-mars{color:#ff826c!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-gold,.ng-message-chat__user .ng-cosmetic-name.ng-nick-gold,.ng-message-thread .ng-cosmetic-name.ng-nick-gold,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-gold{color:#ffd36c!important}
.ng-article-hero__author .ng-cosmetic-name.ng-nick-nebula,.ng-article-hero__author .ng-cosmetic-name.ng-nick-aurora,.ng-message-chat__user .ng-cosmetic-name.ng-nick-nebula,.ng-message-chat__user .ng-cosmetic-name.ng-nick-aurora,.ng-message-thread .ng-cosmetic-name.ng-nick-nebula,.ng-message-thread .ng-cosmetic-name.ng-nick-aurora,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-nebula,.ng-account-menu__identity .ng-cosmetic-name.ng-nick-aurora{color:transparent!important}

.ng-cosmetic-avatar{position:relative;isolation:isolate;box-sizing:border-box}
.ng-cosmetic-avatar>img{position:relative;z-index:1;border-radius:inherit;object-fit:cover}
.ng-frame-steel{border-color:#9aafc4!important;box-shadow:0 0 0 2px #31455a!important}
.ng-frame-signal{border-color:#55d8ff!important;box-shadow:0 0 0 2px #12375a,0 0 11px #3fcfff!important}
.ng-frame-blue{border-color:#3f9dff!important;box-shadow:0 0 0 2px rgba(37,99,255,.22),0 0 14px rgba(55,148,255,.42)!important}
.ng-frame-telemetry{border-color:#53efff!important;box-shadow:0 0 0 2px #071829,0 0 0 4px #2b6f8d,0 0 16px #36dcff!important}
.ng-frame-energy{border-color:#55e3ff!important;box-shadow:0 0 0 2px rgba(75,221,255,.26),0 0 8px rgba(75,221,255,.75),0 0 22px rgba(37,99,255,.5)!important}
.ng-frame-mars{border-color:#ff775f!important;box-shadow:0 0 0 2px #5d211c,0 0 16px #ff513e!important}
.ng-frame-nebula{border-color:#d674ff!important;box-shadow:0 0 0 2px #391c66,0 0 18px #9d58ff!important}
.ng-frame-solar{border-color:#ffd561!important;box-shadow:0 0 0 2px #6b4c0e,0 0 20px #ffb928!important}
.ng-frame-explorer{border-color:#5ef2bd!important;box-shadow:0 0 0 2px #103e39,0 0 0 4px #3ca88a,0 0 16px #4bf2c1!important}
.ng-frame-ancient{border-color:#86b7ff!important;box-shadow:0 0 0 2px #1c3562,0 0 0 4px #6947a5,0 0 22px #6e6cff!important}
.ng-frame-prestige{border-color:#d8efff!important;box-shadow:0 0 0 2px rgba(37,99,255,.55),0 0 0 4px rgba(102,226,255,.2),0 0 18px rgba(65,178,255,.82),0 0 34px rgba(102,102,255,.38)!important}
.ng-avfx-halo{filter:drop-shadow(0 0 8px rgba(112,216,255,.78))}
.ng-avfx-glow{animation:ngAvatarGlow 2.6s ease-in-out infinite}
.ng-avfx-scan{animation:ngAvatarScan 3s ease-in-out infinite}
.ng-avfx-plasma{animation:ngAvatarPlasma 2.5s ease-in-out infinite}
.ng-avfx-orbit{overflow:visible!important}
.ng-avfx-orbit::after{content:"";position:absolute;z-index:3;pointer-events:none;inset:-6px;border:1px solid rgba(85,226,255,.78);border-right-color:rgba(122,112,255,.2);border-bottom-color:rgba(122,112,255,.42);border-radius:inherit;box-shadow:0 0 8px rgba(70,206,255,.42);animation:ngAvatarOrbit 3.4s linear infinite}
.ng-avfx-stardust{animation:ngAvatarStardust 3.8s ease-in-out infinite}
@keyframes ngAvatarGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(73,184,255,.28))}50%{filter:drop-shadow(0 0 8px rgba(73,214,255,.8))}}
@keyframes ngAvatarScan{50%{filter:brightness(1.22) saturate(1.35)}}
@keyframes ngAvatarPlasma{50%{filter:drop-shadow(0 0 12px #975cff) drop-shadow(0 0 5px #47eaff)}}
@keyframes ngAvatarOrbit{to{transform:rotate(360deg)}}
@keyframes ngAvatarStardust{50%{filter:drop-shadow(5px -5px 4px #fff) drop-shadow(-5px 4px 6px #65dfff)}}

/* Compact avatar contexts must stay circular even with animated frames. */
.ng-article-hero__author-avatar-wrap.ng-cosmetic-avatar,.ng-message-thread__avatar.ng-cosmetic-avatar,.ng-message-chat__avatar.ng-cosmetic-avatar,.ng-account-menu__avatar.ng-cosmetic-avatar,.b-user__toggle.ng-cosmetic-avatar,.ng-comment-avatar-wrap.ng-cosmetic-avatar,.ng-section-comment__avatar-wrap.ng-cosmetic-avatar{border-radius:50%!important;background-clip:padding-box}
.ng-article-hero__author-avatar-wrap.ng-cosmetic-avatar>img,.ng-message-thread__avatar.ng-cosmetic-avatar>img,.ng-message-chat__avatar.ng-cosmetic-avatar>img,.ng-account-menu__avatar.ng-cosmetic-avatar>img,.ng-comment-avatar-wrap.ng-cosmetic-avatar>img,.ng-section-comment__avatar-wrap.ng-cosmetic-avatar>img{border-radius:50%!important}
.ng-message-thread__avatar.ng-cosmetic-avatar,.ng-message-chat__avatar.ng-cosmetic-avatar{overflow:hidden!important;flex-shrink:0;box-shadow:none!important;filter:none!important;animation:none!important}
.ng-message-thread__avatar.ng-cosmetic-avatar:has(>img),.ng-message-chat__avatar.ng-cosmetic-avatar:has(>img){background:transparent!important;background-image:none!important}
.ng-message-thread__avatar.ng-cosmetic-avatar::before,.ng-message-thread__avatar.ng-cosmetic-avatar::after,.ng-message-chat__avatar.ng-cosmetic-avatar::before,.ng-message-chat__avatar.ng-cosmetic-avatar::after{display:none!important;content:none!important}

.ng-profile-name-badge:not([class*="ng-badge-"]){display:none!important}
.ng-profile-name-badge[class*="ng-badge-"]{display:inline-block;position:relative;width:18px;height:18px;flex:0 0 18px;margin-left:6px;vertical-align:-4px;overflow:visible}
.ng-profile-name-badge[class*="ng-badge-"]::before{content:"";position:absolute;inset:0;width:100%;height:100%;border:0!important;border-radius:0!important;background-color:transparent!important;background-image:var(--ng-badge-icon)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;box-shadow:none!important;clip-path:none!important;filter:drop-shadow(0 0 2px rgba(94,210,255,.5))!important;transform:none!important}
.ng-profile-name-badge[class*="ng-badge-"]::after{display:none!important}
.ng-badge-star{--ng-badge-icon:url('/img/profile-badges/star.svg?v=1')}
.ng-badge-satellite{--ng-badge-icon:url('/img/profile-badges/satellite.svg?v=1')}
.ng-badge-comet{--ng-badge-icon:url('/img/profile-badges/comet.svg?v=1')}
.ng-badge-beacon{--ng-badge-icon:url('/img/profile-badges/beacon.svg?v=1')}
.ng-badge-critic{--ng-badge-icon:url('/img/profile-badges/critic.svg?v=1')}
.ng-badge-compass{--ng-badge-icon:url('/img/profile-badges/compass.svg?v=1')}
.ng-badge-moon{--ng-badge-icon:url('/img/profile-badges/moon.svg?v=1')}
.ng-badge-veteran{--ng-badge-icon:url('/img/profile-badges/veteran-logo.webp?v=1')}
.ng-badge-crystal{--ng-badge-icon:url('/img/profile-badges/crystal.svg?v=1')}
.ng-badge-crown{--ng-badge-icon:url('/img/profile-badges/crown.svg?v=1')}
.ng-badge-horizon{--ng-badge-icon:url('/img/profile-badges/horizon.svg?v=1')}

/* Account menu identity: badge sits beside the nickname, subtitle stays below. */
.ng-account-menu__name-row{display:flex;align-items:center;min-width:0;gap:6px}
.ng-account-menu__name-row strong{min-width:0;max-width:190px}
.ng-account-menu__name-row .ng-profile-name-badge{margin:0;vertical-align:middle}

/* Profile identity groups: keep the name/badge and actions predictable at every width. */
.ng-profile-name-line{display:flex;align-items:center;min-width:0;margin-right:auto;gap:8px}
.ng-profile-name-line h1{min-width:0;margin:0!important;overflow-wrap:anywhere}
.ng-profile-name-line .ng-profile-name-badge{margin-left:0!important}
.ng-profile-title-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.ng-profile-title-actions .ng-profile-edit-button,.ng-profile-title-actions .ng-profile-message-button,.ng-profile-title-actions .ng-profile-moderation-button{margin:0}

/* Phone profile layout: a calm vertical identity card instead of crowded inline controls. */
@media(max-width:575px){
  .ng-profile-page .s-content{padding-top:10px;padding-bottom:36px}
  .ng-profile-page .cn-container{width:100%;max-width:100%;box-sizing:border-box;padding-left:12px;padding-right:12px}
  .ng-profile-hero{min-height:0;padding:22px 16px 18px!important;gap:22px!important;border-radius:20px!important;background-position:center!important}
  .ng-profile-identity{width:100%;flex-direction:column;align-items:center!important;gap:15px!important;text-align:center}
  .ng-profile-avatar{width:94px!important;height:94px!important;flex:0 0 94px!important}
  .ng-profile-identity__body{width:100%;min-width:0}
  .ng-profile-kicker{margin-bottom:9px;line-height:1.25}
  .ng-profile-title-row{display:grid!important;width:100%;gap:13px}
  .ng-profile-name-line{width:100%;margin:0;justify-content:center;gap:7px}
  .ng-profile-identity h1{max-width:calc(100% - 29px);font-size:clamp(27px,9vw,36px)!important;line-height:1.05;text-align:center}
  .ng-profile-title-row .ng-profile-name-badge[class*="ng-badge-"]{width:21px;height:21px;flex-basis:21px;margin:0!important}
  .ng-profile-title-actions{width:100%;justify-content:center;gap:9px}
  .ng-profile-title-actions .ng-profile-edit-button,.ng-profile-title-actions .ng-profile-message-button,.ng-profile-title-actions .ng-profile-moderation-button{display:inline-flex;align-items:center;justify-content:center;min-height:39px;margin:0!important;padding:0 13px;line-height:1.2;white-space:nowrap}
  .ng-profile-rank-row{justify-content:center;gap:8px;margin-top:15px}
  .ng-profile-level-badge{min-height:28px;padding:0 10px}
  .ng-profile-rank{padding-inline:2px}
  .ng-profile-callsign{max-width:100%;white-space:normal;text-align:center}
  .ng-profile-bio{max-width:31em;margin:15px auto 0!important;font-size:13px!important;line-height:1.55;text-align:center}
  .ng-profile-progress-card{width:100%;max-width:none!important;padding:17px 16px!important;border-radius:17px}
  .ng-profile-progress-card__head{align-items:flex-end!important;gap:12px;margin-bottom:14px}
  .ng-profile-progress-card__head strong{font-size:24px!important}
  .ng-profile-progress-card__head>span{max-width:132px;font-size:10px;line-height:1.35}
  .ng-profile-panel{padding:17px 15px!important;border-radius:18px!important}
  .ng-profile-panel__head{margin-bottom:16px}
  .ng-profile-panel__head h2{font-size:23px;line-height:1.15}
  .ng-profile-showcase{gap:10px}
  .ng-profile-showcase-item{min-height:112px;padding:12px;gap:12px}
  .ng-profile-showcase-item img{width:76px;height:84px;flex:0 0 76px}
  .ng-profile-showcase-item strong{font-size:14px}
}

@media(max-width:380px){
  .ng-profile-title-actions{display:grid;grid-template-columns:1fr;width:100%}
  .ng-profile-title-actions .ng-profile-edit-button,.ng-profile-title-actions .ng-profile-message-button,.ng-profile-title-actions .ng-profile-moderation-button{width:100%}
  .ng-profile-progress-card__head{align-items:flex-start!important;flex-direction:column;gap:7px}
  .ng-profile-progress-card__head>span{max-width:none;text-align:left}
}

@media(prefers-reduced-motion:reduce){.ng-nick-aurora,.ng-nickfx-pulse,.ng-nickfx-shine,.ng-nickfx-scan,.ng-nickfx-glitch,.ng-avfx-glow,.ng-avfx-scan,.ng-avfx-plasma,.ng-avfx-orbit::after,.ng-avfx-stardust{animation:none!important}}
