/* NG motion contract. Original CSS/SVG; geometry, routing and focus stay local. */
:root {
  --ng-motion-fast:120ms;--ng-motion-control:180ms;--ng-motion-panel:200ms;
  --ng-motion-ease:cubic-bezier(.2,.8,.2,1);--ng-motion-play-state:running;
  --arcade-fast:var(--ng-motion-fast);--arcade-normal:var(--ng-motion-control);--arcade-ease:var(--ng-motion-ease);
  --ng-motion-primary:var(--ng-accent,var(--admin-accent,var(--blue,#397df4)));
  --ng-motion-secondary:var(--ng-accent-2,var(--cyan,#20b9d4));
  --ng-motion-line:var(--ng-line,var(--admin-border,var(--line,#dce3ef)));
  --ng-motion-surface:var(--ng-panel-solid,var(--admin-surface,var(--surface-solid,#fff)));
  --ng-motion-ink:var(--ng-ink,var(--admin-text,var(--ink,#172438)));
}
html.ng-motion-ready body{isolation:isolate}
html.ng-motion-ready body:not(.ng-fullscreen-experience){background-image:none!important}
/* Replacement contract: once the shared motion runtime owns the atmosphere,
   legacy static page gradients, watermark grids and particle placeholders must
   leave the render tree instead of remaining underneath the dynamic layer. */
html.ng-motion-ready body:not(.ng-fullscreen-experience)::before,html.ng-motion-ready body:not(.ng-fullscreen-experience)::after{content:none!important;display:none!important;animation:none!important;filter:none!important}
html.ng-motion-ready :is(.wm,canvas#bg-particles,.ng-mobile-theme-atmosphere,.ng-theme-scene,.ng-theme-hero-art){display:none!important;animation:none!important}
/* A deliberately visible CSS/SVG atmosphere. It stays behind the application,
   but unlike the retired 12%/36s wash it can be perceived within a few seconds. */
.ng-motion-ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict;pointer-events:none;opacity:1;background:radial-gradient(ellipse at 8% 4%,color-mix(in srgb,var(--ng-motion-primary) 30%,transparent),transparent 46%),radial-gradient(ellipse at 94% 18%,color-mix(in srgb,var(--ng-motion-secondary) 28%,transparent),transparent 44%)}
.ng-motion-ambient::before,.ng-motion-ambient::after{content:"";position:absolute;pointer-events:none}
.ng-motion-ambient::before{inset:-22% -18%;opacity:.94;background:radial-gradient(circle at 18% 26%,color-mix(in srgb,var(--ng-motion-primary) 42%,transparent),transparent 31%),radial-gradient(circle at 82% 22%,color-mix(in srgb,var(--ng-motion-secondary) 38%,transparent),transparent 30%),radial-gradient(circle at 48% 78%,color-mix(in srgb,var(--ng-motion-primary) 28%,transparent),transparent 35%);transform:translate3d(-8%,-4%,0) scale(1.04);transform-origin:50% 44%}
.ng-motion-ambient::after{inset:-48px;opacity:.44;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%236f7fa4' stroke-opacity='.36' stroke-width='.8'/%3E%3C/svg%3E");transform:translate3d(0,0,0)}
.ng-motion-orb{position:absolute;display:block;width:62vmax;height:62vmax;border-radius:50%;opacity:.72;pointer-events:none;transform:translate3d(0,0,0);background:radial-gradient(circle at 42% 42%,color-mix(in srgb,var(--ng-motion-primary) 46%,transparent) 0,color-mix(in srgb,var(--ng-motion-secondary) 22%,transparent) 31%,transparent 68%)}
.ng-motion-orb--one{top:-31vmax;left:-24vmax;animation:ng-orb-one 9s cubic-bezier(.42,0,.28,1) infinite alternate}
.ng-motion-orb--two{top:8%;right:-30vmax;width:68vmax;height:68vmax;opacity:.64;background:radial-gradient(circle at 48% 45%,color-mix(in srgb,var(--ng-motion-secondary) 48%,transparent) 0,color-mix(in srgb,var(--ng-motion-primary) 20%,transparent) 34%,transparent 70%);animation:ng-orb-two 11s cubic-bezier(.42,0,.25,1) infinite alternate}
.ng-motion-orb--three{bottom:-38vmax;left:12%;width:72vmax;height:72vmax;opacity:.56;animation:ng-orb-three 13s cubic-bezier(.4,0,.2,1) infinite alternate}
html[data-theme="dark"] .ng-motion-ambient{opacity:1}
html[data-theme="dark"] .ng-motion-ambient::after{opacity:.5}
html:not([data-motion="off"]):not(.ng-motion-reduced) .ng-motion-ambient::before{animation:ng-aurora-flow 10s cubic-bezier(.45,.05,.25,1) infinite alternate}
html:not([data-motion="off"]):not(.ng-motion-reduced) .ng-motion-ambient::after{animation:ng-grid-drift 14s linear infinite alternate}
@keyframes ng-aurora-flow{0%{transform:translate3d(-8%,-4%,0) scale(1.04);opacity:.76}48%{transform:translate3d(3%,5%,0) scale(1.14);opacity:1}100%{transform:translate3d(10%,-2%,0) scale(1.07);opacity:.86}}
@keyframes ng-grid-drift{from{transform:translate3d(0,0,0);opacity:.3}to{transform:translate3d(-72px,-48px,0);opacity:.58}}
@keyframes ng-orb-one{from{transform:translate3d(-5vw,-4vh,0) scale(.92)}to{transform:translate3d(34vw,26vh,0) scale(1.14)}}
@keyframes ng-orb-two{from{transform:translate3d(8vw,-8vh,0) scale(1.08)}to{transform:translate3d(-38vw,28vh,0) scale(.9)}}
@keyframes ng-orb-three{from{transform:translate3d(-12vw,10vh,0) scale(.94)}to{transform:translate3d(28vw,-34vh,0) scale(1.12)}}
/* The masthead uses native moving colour, with no bitmap artwork or white fade. */
.ng-motion-header{position:absolute;inset:0 0 0 auto;z-index:0;width:56%;overflow:hidden;pointer-events:none;contain:strict}
.ng-motion-header::before,.ng-motion-preview::before{content:"";position:absolute;inset:-65% -30%;pointer-events:none;background:radial-gradient(ellipse at 35% 48%,color-mix(in srgb,var(--ng-motion-primary) 38%,transparent),transparent 48%),radial-gradient(ellipse at 75% 35%,color-mix(in srgb,var(--ng-motion-secondary) 34%,transparent),transparent 52%);animation:ng-header-flow 8s ease-in-out infinite alternate}
@keyframes ng-header-flow{from{transform:translate3d(-12%,-6%,0) rotate(-8deg) scale(1);opacity:.72}to{transform:translate3d(16%,9%,0) rotate(12deg) scale(1.12);opacity:1}}
.theme-live-preview.ng-motion-preview{background:#11213a}
.ng-motion-preview[data-preview-theme="cosmic"]{--ng-motion-primary:#6550ce;--ng-motion-secondary:#337fab}
.ng-motion-preview[data-preview-theme="aurora"]{--ng-motion-primary:#147c73;--ng-motion-secondary:#7664ba}
.ng-motion-preview[data-preview-theme="particles"]{--ng-motion-primary:#226bd3;--ng-motion-secondary:#16828a}
.ng-motion-preview[data-preview-theme="esports"]{--ng-motion-primary:#6555cf;--ng-motion-secondary:#cb3b70}
.ng-motion-preview[data-preview-theme="arcade"]{--ng-motion-primary:#764aaa;--ng-motion-secondary:#c1772c}
.ng-motion-preview[data-preview-theme="gold"]{--ng-motion-primary:#997124;--ng-motion-secondary:#a56032}
@media(max-width:768px){.ng-motion-ambient{opacity:1}.ng-motion-ambient::before{inset:-20% -42%}.ng-motion-ambient::after{opacity:.5}.ng-motion-orb{width:88vmax;height:88vmax}.ng-motion-orb--two{width:92vmax;height:92vmax}.ng-motion-orb--three{width:96vmax;height:96vmax}.ng-motion-header{width:58%}}
/* Retire expensive card decoration, never business media/game canvases. */
html.ng-motion-ready :is(.card,.game-card,.collector-card,.gh-platform-card,.ng-hub-card,.ng-discover-card){animation:none!important;opacity:1;transform:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform var(--ng-motion-control) var(--ng-motion-ease),border-color var(--ng-motion-control) ease,box-shadow var(--ng-motion-control) ease}
html.ng-motion-ready .card::before,html.ng-motion-ready .card::after{animation:none!important}
html.ng-motion-ready .card-grid>.card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--ng-motion-secondary) 9%,transparent) 50%,transparent 65%);opacity:0;transform:translateX(-100%);transition:transform 420ms var(--ng-motion-ease),opacity var(--ng-motion-control) ease}
@media(hover:hover) and (pointer:fine){html.ng-motion-ready .card-grid>.card:hover::after{opacity:1;transform:translateX(100%)}}
@media(hover:hover) and (pointer:fine){html.ng-motion-ready :is(.card,.game-card,.collector-card,.gh-platform-card,.ng-hub-card,.ng-discover-card):hover{transform:translateY(-2px)!important;border-color:color-mix(in srgb,var(--ng-motion-primary) 36%,var(--ng-motion-line))!important;box-shadow:0 7px 20px color-mix(in srgb,var(--ng-motion-primary) 10%,transparent),inset 0 1px color-mix(in srgb,var(--ng-motion-secondary) 15%,transparent)!important}}
@media(hover:none),(pointer:coarse){html.ng-motion-ready :is(.card,.game-card,.collector-card,.gh-platform-card,.ng-hub-card,.ng-discover-card):hover{transform:none!important}}
html.ng-motion-ready :is(.card,.game-card,.collector-card,.gh-platform-card,.ng-hub-card,.ng-discover-card).ng-motion-card-active{transform:translateY(-2px)!important;border-color:color-mix(in srgb,var(--ng-motion-primary) 36%,var(--ng-motion-line))!important;box-shadow:0 7px 20px color-mix(in srgb,var(--ng-motion-primary) 10%,transparent),inset 0 1px color-mix(in srgb,var(--ng-motion-secondary) 15%,transparent)!important}
html.ng-motion-ready .card-grid>.card.ng-motion-card-active::after{animation:ng-card-sheen 420ms var(--ng-motion-ease)!important}
@keyframes ng-card-sheen{0%{transform:translateX(-100%);opacity:0}15%,85%{opacity:1}100%{transform:translateX(100%);opacity:0}}
html.ng-motion-ready :is(button,.go,.el-button,[role="button"]):active{scale:.98}
html.ng-motion-ready .ng-interaction-pressed{filter:none!important;scale:.98!important}
.ng-motion-nav:not(.ng-bottom-nav){position:relative}
.ng-motion-indicator{position:absolute;left:0;bottom:1px;height:2px;border-radius:2px;z-index:2;background:linear-gradient(90deg,var(--ng-motion-primary),var(--ng-motion-secondary));pointer-events:none;transform-origin:left center}
.ng-motion-indicator[hidden]{display:none}
.ng-bottom-nav>.ng-motion-indicator{display:none!important}
html.ng-motion-ready :is(.ng-segmented-item,.ng-community-nav a,.ng-rank-tab,.nav-item){transition:color var(--ng-motion-control) ease,background-color var(--ng-motion-control) ease}
html.ng-motion-ready :is(.ng-ai-icon,.ng-symbol-icon,.ng-community-icon,.nav-icon){transform-origin:50% 65%}
/* Preserve local solid/glossy artwork; standardize only small SVG controls. */
html.ng-motion-ready :is(.ng-shell-svg,.ng-community-icon>svg,.ng-segmented-icon>svg){stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Discrete transitions preserve native dialog/hidden/focus semantics. */
html.ng-motion-ready :is(dialog,.ng-auth-overlay,.modal-backdrop,.ng-support-panel,.activity-application-backdrop,.activity-hall-backdrop,.stage-submission-overlay,.ng-member-reward-overlay){opacity:1;transition:opacity var(--ng-motion-panel) ease,display var(--ng-motion-panel) allow-discrete,overlay var(--ng-motion-panel) allow-discrete}
html.ng-motion-ready :is(dialog:not([open]),.ng-auth-overlay.hidden,.modal-backdrop[hidden],.ng-support-panel[hidden],.activity-application-backdrop[hidden],.activity-hall-backdrop[hidden],.stage-submission-overlay[hidden],.ng-member-reward-overlay[hidden]){opacity:0;pointer-events:none}
html.ng-motion-ready :is(dialog[open],[role="dialog"]:not(dialog),.ng-auth-card,.activity-application-panel,.ng-member-reward-card,.ng-admin-dialog){animation:ng-panel-enter var(--ng-motion-panel) var(--ng-motion-ease)}
@starting-style{html.ng-motion-ready :is(dialog[open],.ng-auth-overlay:not(.hidden),.activity-application-backdrop:not([hidden]),.activity-hall-backdrop:not([hidden])){opacity:0}}
@keyframes ng-panel-enter{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
html.ng-motion-ready dialog::backdrop{background:color-mix(in srgb,var(--ng-motion-ink) 38%,transparent);backdrop-filter:none}
/* Single spinner and compositor-only skeleton; state copy stays visible. */
.ng-motion-loader{display:inline-block;flex:0 0 auto;width:20px;height:20px;box-sizing:border-box;border:2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color:currentColor;border-radius:50%;animation:ng-loader-turn .9s linear infinite;vertical-align:middle}
button[aria-busy="true"]{cursor:wait}
html.ng-motion-ready button[aria-busy="true"]::after{content:"";display:inline-block;width:14px;height:14px;margin-inline-start:8px;box-sizing:border-box;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:currentColor;border-radius:50%;animation:ng-loader-turn .9s linear infinite;vertical-align:middle;pointer-events:none}
html.ng-motion-ready .ng-community-state--loading::before,html.ng-motion-ready .ng-rank-prize-state[role="status"]::before{content:"";display:block;width:22px;height:22px;margin:0 auto 12px;border:2px solid var(--ng-motion-line);border-top-color:var(--ng-motion-primary);border-radius:50%;animation:ng-loader-turn .9s linear infinite}
@keyframes ng-loader-turn{to{transform:rotate(1turn)}}
html.ng-motion-ready :is(.skeleton,.loading-placeholder,.collector-skeleton-card .collector-cover){position:relative;overflow:hidden;background:color-mix(in srgb,var(--ng-motion-primary) 8%,var(--ng-motion-surface))!important;animation:none!important}
html.ng-motion-ready :is(.skeleton,.loading-placeholder,.collector-skeleton-card .collector-cover)::after{content:"";display:block!important;position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ng-motion-surface) 80%,transparent) 50%,transparent 80%);transform:translateX(-100%);animation:ng-skeleton-flow 1.6s ease-in-out infinite;pointer-events:none}
@keyframes ng-skeleton-flow{to{transform:translateX(100%)}}
.ng-rank-change{display:inline-block;min-width:12px;margin-inline-start:3px;color:var(--ng-motion-primary);font-size:11px;line-height:1}
.ng-rank-change[data-direction="down"]{color:var(--ng-danger,#b32943)}
.ng-rank-podium-card .ng-rank-podium-plaque{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--rank-accent) 9%,transparent),transparent 72%)}
html.ng-interaction-paused{--ng-motion-play-state:paused}
html[data-motion="off"],html.ng-motion-reduced{--ng-motion-play-state:paused;--ng-motion-panel:0ms}
html.ng-interaction-paused *,html.ng-interaction-paused *::before,html.ng-interaction-paused *::after{animation-play-state:paused!important}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after,html.ng-motion-reduced *,html.ng-motion-reduced *::before,html.ng-motion-reduced *::after{animation:none!important;transition-duration:.01ms!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html.ng-motion-ready .card-grid>.card.ng-motion-card-active::after{animation:none!important}html.ng-motion-ready :is(.card,.game-card,.collector-card,.gh-platform-card,.ng-hub-card,.ng-discover-card):hover{transform:none!important}}
@media(forced-colors:active){.ng-motion-ambient{display:none}.ng-motion-indicator{background:Highlight}.ng-motion-loader{border-color:CanvasText;border-top-color:Highlight}}