/* SOOPLAY session entry: a single photographic scene and translucent form. */
body.noir-login{background:#101012;isolation:isolate}
body.noir-login::before,body.noir-login::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1}
body.noir-login::before{background:#101012 url('/web/static/assets/noir-login-scene-v373.png') center center/cover no-repeat}
body.noir-login::after{background:linear-gradient(90deg,#09090b40 0%,transparent 42%,#0b0b0e10 60%,#0b0b0e30 100%),linear-gradient(180deg,#0002,transparent 55%,#0004)}
.noir-login .welcome,.noir-login .welcome.is-member{min-height:100svh;max-width:1920px;grid-template-columns:minmax(0,1fr) minmax(400px,500px);gap:7vw;padding:clamp(28px,5vh,64px) 5vw;height:auto;align-items:center}
.noir-login .hero{background:none;min-height:680px;overflow:visible;align-self:stretch}
.noir-login .illustration{display:none}
.noir-login .brand{position:relative;left:auto;top:auto;display:inline-flex;font-size:clamp(40px,3.6vw,58px);line-height:1.2;font-weight:700;letter-spacing:-2px}
.noir-login .brand .soop-brand>span{color:#ef2148}
.noir-login .brand::after{display:none}
.noir-login .hero-copy{padding:26px 0 0;text-shadow:0 2px 24px #0009}
.noir-login .hero h1{font-size:clamp(32px,3vw,48px);line-height:1.35;letter-spacing:-1.8px;margin-bottom:18px}
.noir-login .hero-copy p{font-size:clamp(15px,1.25vw,20px);line-height:1.7;color:#c4c3c7}
.noir-login .entry-card,.noir-login .welcome.is-member .entry-card{padding:32px 34px 26px;border:1px solid #ffffff30;border-radius:16px;background:linear-gradient(125deg,#2020238a,#1111149f);box-shadow:0 16px 55px #0004;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow:visible}
.noir-login .entry-card::before{content:'';display:block;width:48px;height:4px;border-radius:3px;background:#f2224a;margin:0 0 18px}
.noir-login .entry-card h2,.noir-login .welcome.is-member .entry-card h2{font-size:32px;letter-spacing:-1px;line-height:1.25;margin:0 0 24px}
.noir-login .roles,.noir-login .welcome.is-member .roles{margin-bottom:22px;border-radius:9px;background:#ffffff03;border-color:#ffffff30}
.noir-login .roles span,.noir-login .welcome.is-member .roles span{height:48px;font-size:16px;gap:9px;border-radius:8px}
.noir-login .roles svg{width:20px;height:20px}
.noir-login .roles input:checked+span{background:#e9254520;color:#ff5978;border-color:#ee234a}
.noir-login .field,.noir-login .welcome.is-member .field{margin-bottom:22px}
.noir-login .field label,.noir-login .welcome.is-member .field label{font-size:13px;margin-bottom:8px}
.noir-login .input-wrap,.noir-login .welcome.is-member .input-wrap{height:46px;padding:0 13px;gap:10px;background:#ffffff04;border:1px solid #ffffff30;border-radius:9px}
.noir-login .input-wrap input{font-size:14px;background:transparent}
.noir-login .input-wrap svg{width:20px;height:20px;color:#a6a5ac}
.noir-login .member-options,.noir-login .welcome.is-member .member-options{margin:0}
.noir-login .login-profile{gap:14px;margin:0 0 24px}
.noir-login .login-profile legend{font-size:13px;font-weight:400;margin-bottom:14px;padding:0;width:100%;display:flex;align-items:center;gap:12px;color:#d0cfd4}
.noir-login .login-profile legend::after{content:'';height:1px;flex:1;background:#ffffff20}
.noir-login .login-profile label{font-size:12px;gap:7px}
.noir-login .login-profile input,.noir-login .login-profile select{height:44px;font-size:13px;padding:0 11px;background:#ffffff04;border:1px solid #ffffff30;border-radius:8px}
.noir-login input::placeholder{color:#99989f}
.noir-login .device-options{gap:9px}
.noir-login .device-options legend{font-size:13px;line-height:1.6;margin-bottom:10px}
.noir-login .device-note{display:block;font-size:10px;color:#a09fa7!important}
.noir-login .device-options label>span{min-height:78px;padding:10px 4px;gap:6px;border-radius:9px;background:#ffffff03;border-color:#ffffff30}
.noir-login .device-options strong{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px}
.noir-login .device-options svg{width:20px;height:20px}
.noir-login .device-options small{font-size:10px;color:#b8b6bf}
.noir-login .device-options input:checked+span{background:#e9254514;border-color:#f1254b;box-shadow:none}
.noir-login .device-options input:checked+span strong{color:#ff5876}
.noir-login .join-button,.noir-login .welcome.is-member .join-button{margin-top:22px;height:52px;border-radius:9px;font-size:16px;background:#ed1942;box-shadow:0 4px 20px #eb174215}
.noir-login .join-button:hover{background:#ff2b51}
.noir-login .permissions-note,.noir-login .welcome.is-member .permissions-note{font-size:11px;line-height:1.6;margin:16px 0 0;color:#b6b4bd}
.noir-login .member-options details{font-size:12px;margin-top:14px}
.noir-login select option{background:#202024;color:#f4f1ec}
@media(min-width:1600px){.noir-login .welcome,.noir-login .welcome.is-member{padding-right:6vw;grid-template-columns:minmax(0,1fr) 500px}}
@media(max-width:1050px) and (min-width:781px){.noir-login .welcome,.noir-login .welcome.is-member{grid-template-columns:minmax(0,1fr) 390px;gap:4vw;padding:28px 3vw}.noir-login .entry-card,.noir-login .welcome.is-member .entry-card{padding:28px 26px}.noir-login .hero h1{font-size:30px}.noir-login .hero-copy p{font-size:14px}.noir-login .brand{font-size:40px}}
@media(max-width:780px){body.noir-login::before{background-position:38% center}body.noir-login::after{background:linear-gradient(180deg,#09090b45,#09090ba6 30%,#09090bc9)}.noir-login .welcome,.noir-login .welcome.is-member{display:flex;gap:24px;padding:28px 20px 36px;min-height:100svh}.noir-login .hero{min-height:0;width:100%;max-width:500px;align-self:center}.noir-login .brand{font-size:36px}.noir-login .hero-copy{padding:20px 0 0}.noir-login .hero h1{font-size:28px;line-height:1.3;margin-bottom:10px}.noir-login .hero-copy p{font-size:13px}.noir-login .entry-card,.noir-login .welcome.is-member .entry-card{max-width:500px;padding:26px 24px}.noir-login .entry-card h2,.noir-login .welcome.is-member .entry-card h2{font-size:28px}.noir-login .device-options{grid-template-columns:repeat(3,minmax(0,1fr))}.noir-login .device-options label>span{flex-direction:column;justify-content:center;min-height:78px;padding:8px 3px}.noir-login .device-options strong{font-size:12px;gap:4px}.noir-login .device-options svg{width:17px;height:17px}.noir-login .device-options small{font-size:9px}.noir-login .login-profile{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-transparency:reduce){.noir-login .entry-card,.noir-login .welcome.is-member .entry-card{background:#19191bf2;backdrop-filter:none}}

/* Red neon sign: stationary letters with occasional short power interruptions. */
.noir-login .brand .soop-brand>.play-neon{display:inline-block;color:#ffb2c1;-webkit-text-stroke:.45px #ff365b;text-shadow:0 0 2px #fff0f3,0 0 6px #ff365b,0 0 14px #ed1745,0 0 30px #e3174280;animation:play-neon-flicker 18s step-end infinite}
@keyframes play-neon-flicker{
 0%,37.5%,40.5%,84.5%,100%{color:#ffb2c1;-webkit-text-stroke-color:#ff365b;text-shadow:0 0 2px #fff0f3,0 0 6px #ff365b,0 0 14px #ed1745,0 0 30px #e3174280}
 36%,39%,83%{color:#501a27;-webkit-text-stroke-color:#752339;text-shadow:none}
}
@media(prefers-reduced-motion:reduce){.noir-login .brand .soop-brand>.play-neon{animation:none}}