/* COE approved artwork production login.
   Art is a presentation layer. The existing #google and preregistration links
   remain real DOM controls, retaining their existing event listeners.
   Applied only while signed out; authenticated app is untouched. */
.app:not(.logged-in) { width:100%!important; max-width:none!important; background:#07111e!important; box-shadow:none!important; }
.app:not(.logged-in)>header { display:none!important; }
.app:not(.logged-in) #main-content { background:#07111e!important; min-height:0!important; overflow:visible!important; }
.app:not(.logged-in) .landing {
  width:100%!important; max-width:1672px!important;
  margin:0 auto!important; padding:0!important; gap:0!important;
  display:block!important; position:relative!important;
  aspect-ratio:1672/941!important; min-height:0!important;
  background:#0b1728 url('/assets/coe-login-approved-20261109.jpg') center/100% 100% no-repeat!important;
  isolation:isolate!important;
}
.app:not(.logged-in) .coe-login-mark,
.app:not(.logged-in) .coe-hero-values,
.app:not(.logged-in) .coe-game-cast,
.app:not(.logged-in) .features,
.app:not(.logged-in) .landing-footer { display:none!important; }
.app:not(.logged-in) .landing>.hero {
  position:absolute!important; top:0!important; left:0!important;
  width:1px!important; height:1px!important; overflow:hidden!important;
  clip-path:inset(50%)!important; min-height:0!important; padding:0!important;
}
.app:not(.logged-in) #login-card {
  box-sizing:border-box!important; display:block!important; position:absolute!important;
  left:68%!important; top:22.8%!important; width:29.2%!important;
  height:55.3%!important; min-width:0!important; max-width:none!important;
  margin:0!important; padding:0!important; background:transparent!important;
  background-image:none!important; box-shadow:none!important; border:0!important;
  border-radius:0!important; z-index:5!important; overflow:visible!important;
}
.app:not(.logged-in) #login-card>.access-top,
.app:not(.logged-in) #login-card>#access-title,
.app:not(.logged-in) #login-card>.muted,
.app:not(.logged-in) #login-card>.coe-access-eyebrow,
.app:not(.logged-in) #login-card>.access-divider,
.app:not(.logged-in) #login-card>.access-steps,
.app:not(.logged-in) #login-card>.coe-access-perks,
.app:not(.logged-in) #login-card>.coe-security-note { display:none!important; }
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #google {
  box-sizing:border-box!important; position:absolute!important;
  left:8%!important; top:53.8%!important; width:85%!important; height:12.6%!important;
  min-height:0!important; max-width:none!important; padding:0!important;
  margin:0!important; border:0!important; border-radius:12px!important;
  background:transparent!important; background-image:none!important;
  box-shadow:none!important; opacity:0!important; color:transparent!important;
  font-size:0!important; z-index:10!important; cursor:pointer!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #google:focus-visible {
  opacity:1!important; background:#06345f!important; color:#fff!important;
  font-size:clamp(12px,1.5vw,18px)!important;
  outline:3px solid #f8ca65!important; outline-offset:3px!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] .coe-prereg-entry {
  box-sizing:border-box!important; position:absolute!important;
  left:9%!important; top:76.7%!important; width:84%!important; height:17%!important;
  min-height:0!important; max-width:none!important; padding:0!important; margin:0!important;
  border:0!important; box-shadow:none!important; border-radius:10px!important;
  background:transparent!important; opacity:0!important; z-index:11!important;
  cursor:pointer!important; display:block!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] .coe-prereg-entry:focus-visible {
  opacity:1!important; background:#fff!important; outline:3px solid #f8ca65!important;
  outline-offset:2px!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #status {
  position:absolute!important; top:102%!important; left:0!important;
  width:100%!important; margin:0!important; padding:8px 12px!important;
  border:0!important; color:#fff!important; background:#142c49d9!important;
  border-radius:7px!important; font-size:12px!important; text-align:center!important;
}
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #status:empty { display:none!important; }
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #claim,
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #logout,
.app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #player { display:none!important; }
.app:not(.logged-in) .coe-login-language {
  box-sizing:border-box!important; position:absolute!important; z-index:10!important;
  left:auto!important; right:3.45%!important; top:3.1%!important;
  width:10.1%!important; height:5.1%!important; min-height:0!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  border:1px solid #f5f5f5!important; border-radius:14px!important;
  background:#121820ee!important; box-shadow:none!important; padding:0 5px!important;
}
.app:not(.logged-in) .coe-login-language select {
  box-sizing:border-box!important; width:100%!important; height:100%!important;
  background:transparent!important; color:#fff!important; border:0!important;
  font-size:clamp(11px,1vw,16px)!important; font-weight:650!important;
  outline-offset:2px!important; cursor:pointer!important;
}
.app:not(.logged-in) .coe-login-language select option{background:#12223b;color:#fff}
.app:not(.logged-in) .coe-login-language:focus-within{outline:3px solid #f4ba4b;outline-offset:2px}
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]){
  background:#fff!important; border:1px solid #e6c188!important; box-shadow:0 16px 40px #0007!important;
  border-radius:25px!important; padding:clamp(18px,2.7vw,36px)!important;
  min-height:0!important; height:auto!important; color:#15273d!important;
}
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"])>.access-top,
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"])>#access-title,
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"])>.muted { display:block!important; text-align:center!important; }
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"])>.access-top .access-icon{display:none!important}
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) #google {
  position:static!important; width:100%!important; max-width:none!important;
  min-height:48px!important; height:auto!important; margin:14px 0!important;
  background:#083965!important; color:#fff!important; opacity:1!important;
  font-size:16px!important; display:flex!important; align-items:center!important; justify-content:center!important;
}
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) #status,
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) #claim,
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) #logout {
  position:static!important; display:block; width:100%!important; max-width:none!important;
  color:#19334d!important; opacity:1!important; margin:12px auto!important;
}
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) #claim[hidden],
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) #logout[hidden]{display:none!important}
.app:not(.logged-in) #login-card:not([data-coe-auth-state="signed"]) .coe-prereg-entry { display:none!important; }
@media(min-width:1673px){
 .app:not(.logged-in) #main-content{min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important}
}
@media(max-width:850px){
 .app:not(.logged-in)>header{display:flex!important;min-height:68px!important;height:68px!important;background:#081525!important;color:#fff!important}
 .app:not(.logged-in)>header .brand strong{color:#fff!important}
 .app:not(.logged-in)>header .brand small{color:#d5dce7!important}
 .app:not(.logged-in)>header #top-login{display:none!important}
 .app:not(.logged-in) #main-content{min-height:calc(100dvh - 68px)!important}
 .app:not(.logged-in) .landing{
   box-sizing:border-box!important; min-height:calc(100dvh - 68px)!important;
   width:100%!important; max-width:none!important; height:auto!important; aspect-ratio:auto!important;
   padding:48px 18px 35px!important; display:flex!important;
   flex-direction:column!important; align-items:center!important; justify-content:center!important;
   background-image:linear-gradient(180deg,#081323e8 0%,#0b1b31ce 54%,#0c2035d8 100%),url('/assets/coe-login-approved-20261109.jpg')!important;
   background-size:cover,auto 100%!important; background-position:center,31% center!important;
 }
 .app:not(.logged-in) #login-card{
   position:relative!important;top:auto!important;left:auto!important;width:100%!important;
   max-width:460px!important;height:auto!important;min-height:0!important;
   padding:28px 23px!important;background:#fff!important;border:1px solid #e6c188!important;
   border-radius:23px!important;box-shadow:0 18px 48px #0009!important;
   color:#17283e!important;
 }
 .app:not(.logged-in) #login-card>.access-top,
 .app:not(.logged-in) #login-card>#access-title,
 .app:not(.logged-in) #login-card>.muted{display:block!important;text-align:center!important}
 .app:not(.logged-in) #login-card>.access-top .access-icon{display:none!important}
 .app:not(.logged-in) #login-card>.access-top{height:50px!important;margin:0 auto 18px!important}
 .app:not(.logged-in) #login-card>.access-top::before{content:"POLICE  CHIEF";font-size:18px;font-weight:900;letter-spacing:.04em;color:#173350!important;display:inline-flex;align-items:center;justify-content:center}
 .app:not(.logged-in) #login-card #google,
 .app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #google{
   position:static!important;opacity:1!important;background:#07386b!important;
   color:#fff!important;display:flex!important;justify-content:center!important;align-items:center!important;
   width:100%!important;max-width:none!important;height:auto!important;min-height:55px!important;
   padding:12px!important;margin:22px auto 15px!important;font-size:16px!important;
   border-radius:12px!important;
 }
 .app:not(.logged-in) #login-card #google .coe-google-icon{background:#fff!important}
 .app:not(.logged-in) #login-card .access-divider{display:block!important;background:#ddd!important;margin:19px 0!important}
 .app:not(.logged-in) #login-card .coe-prereg-entry,
 .app:not(.logged-in) #login-card[data-coe-auth-state="signed"] .coe-prereg-entry{
   position:static!important;opacity:1!important;display:flex!important;align-items:center!important;justify-content:center!important;
   width:100%!important;max-width:none!important;height:auto!important;min-height:60px!important;
   background:transparent!important;box-shadow:none!important;border:0!important;color:#152e4d!important;
   padding:5px!important;margin:10px auto!important;
 }
 .app:not(.logged-in) #login-card[data-coe-auth-state="signed"] #status{position:static!important;color:#425570!important;background:transparent!important;padding:0!important}
 .app:not(.logged-in) .coe-login-language{top:8px!important;right:12px!important;width:110px!important;height:43px!important}
 .app:not(.logged-in) .landing>.hero{display:none!important}
}
@media(max-width:420px){
 .app:not(.logged-in) .landing{padding:58px 14px 30px!important}
 .app:not(.logged-in) #login-card{padding:25px 17px!important}
 .app:not(.logged-in) #access-title{font-size:27px!important}
}
@media(prefers-reduced-motion:reduce){.app:not(.logged-in) #google{transition:none!important}}