/* JLJAM NextGen 7.17.0 | scoped additive visual system.
   Inspiration: React Bits, Aceternity, Cult UI, shadcn/ui, Motion,
   Watermelon, Embla, dnd-kit. No unbundled vendor packages required. */
:root {--ng-violet:#a97aff;--ng-pink:#ef92e4;--ng-blue:#7faeff;--ng-line:rgba(210,190,255,.20);--ng-glass:rgba(24,17,48,.72);--ng-focus:#e9bcff}
#app:not(.hidden),body:has(>main>.hero){color-scheme:dark}
/* Consistent high-end glass vocabulary */
body #app .topbar {background:linear-gradient(120deg,rgba(16,11,35,.94),rgba(26,17,53,.90))!important;backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid var(--ng-line)!important;box-shadow:0 10px 38px rgba(5,3,19,.3)}
body #app :is(.jljam-easy,.ej-roster,.ej-primary-grid,.ej-quick-grid){min-width:0}
body #app :is(.ej-person,.ej-step,.ej-artist,.ej-tile,.ej-toolbelt,.ej-portrait-showcase .ej-person){border-color:var(--ng-line);box-shadow:inset 0 1px rgba(255,255,255,.13),0 13px 38px rgba(3,2,15,.25);transition:box-shadow .24s ease,border-color .24s ease,transform .24s ease,filter .24s ease}
body #app :is(.ej-person,.ej-step,.ej-artist,.ej-tile):is(:hover,:focus-visible){border-color:rgba(225,169,255,.69)!important;box-shadow:inset 0 1px rgba(255,255,255,.2),0 16px 46px rgba(102,45,201,.25),0 0 0 1px rgba(183,133,255,.16)}
body #app .ej-portrait-showcase .ej-person{isolation:isolate;transform:translateZ(0)}
body #app .ej-portrait-showcase .ej-person::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(132deg,rgba(255,255,255,.13),transparent 32%,transparent 70%,rgba(199,129,255,.1));opacity:.65;transition:opacity .25s}
body #app .ej-portrait-showcase .ej-person:hover::after{opacity:1}
body #app .ej-portrait-showcase .ej-person img{transition:transform .42s cubic-bezier(.2,.8,.25,1),filter .4s}
@media(hover:hover) and (pointer:fine){body #app .ej-portrait-showcase .ej-person:hover img{transform:scale(1.045)}}
body #app :is(button,a,input,select,textarea,[role="button"]):focus-visible,body >main :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--ng-focus)!important;outline-offset:3px!important}
body #app :is(button,[role="button"]){-webkit-tap-highlight-color:transparent}
/* Tactile, never hover-only. */
body #app button:active,body >main button:active{filter:brightness(1.12)}
body #app .mobile-dock{backdrop-filter:blur(24px) saturate(145%);box-shadow:0 12px 50px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.13)!important}
/* Touch friendly horizontally-scrollable collections. Existing click handlers remain owned by JLJAM. */
body #app :is(.ej-roster-strip,.ej-tags){overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
body #app .ej-roster-strip{scroll-padding-inline:16px}
/* Scoped ambient glow follows pointer where fine input exists. It is deliberately non-blocking. */
@media(hover:hover) and (pointer:fine){
 body.ng-motion #app .ej-portrait-showcase .ej-person{--ng-x:50%;--ng-y:30%}
 body.ng-motion #app .ej-portrait-showcase .ej-person::before{content:'';pointer-events:none;position:absolute;inset:0;z-index:2;background:radial-gradient(260px circle at var(--ng-x) var(--ng-y),rgba(234,176,255,.18),transparent 65%);opacity:0;transition:opacity .25s}
 body.ng-motion #app .ej-portrait-showcase .ej-person:hover::before{opacity:1}
}
/* Artist portal inherits same tokens, with existing v7.16.4 art and functionality. */
body:has(>main>.hero) >main .hero{box-shadow:0 22px 75px #0009,0 0 36px rgba(171,91,255,.13)!important}
body:has(>main>.hero) :is(.card,.move,.metric,.start-card){transition:border-color .2s,box-shadow .2s,transform .2s}
body:has(>main>.hero) :is(.card,.move,.metric,.start-card):focus-within{border-color:var(--ng-violet)!important;box-shadow:0 0 0 2px rgba(192,131,255,.25)}
/* Operator preferences; default follows device reduced-motion setting. */
body.ng-calm #app *,body.ng-calm >main *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){body:not(.ng-force-motion) #app *,body:not(.ng-force-motion)>main *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Never let interactions disappear beneath a dock or notch. */
@media(max-width:760px){
 body #app .shell{padding-bottom:max(112px,calc(98px + env(safe-area-inset-bottom,0px)))!important}
 body #app .mobile-dock button{min-height:50px;touch-action:manipulation}
 body #app .ej-portrait-showcase .ej-person{min-width:0}
}
/* Preference control injected into existing manager menu. */
#ngPreference{width:100%;display:flex!important;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:50px;padding:12px 15px;color:#f6edff;background:rgba(149,92,238,.13);border:1px solid rgba(192,151,255,.32);border-radius:13px;font:650 14px/1.35 system-ui}
#ngPreference small{font-size:12px;color:#dac9ec}
#ngPreference:focus-visible{outline:3px solid #ebc3ff;outline-offset:2px}
