/* Account entry only. Normal document flow keeps fields reachable on short
   screens and when a mobile keyboard reduces the available height. */
#authScreen.nnAuthScreen {
  position: fixed !important; inset: 0 !important; z-index: 100000 !important;
  display: block !important; width: 100% !important; height: 100% !important;
  min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain;
  box-sizing: border-box; background: #040d17 !important; color: #edf8ff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#authScreen.nnAuthScreen.hidden { display: none !important; }
.nnAuthBackdrop { position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,rgba(3,13,23,.38),rgba(3,13,23,.94) 78%),
    linear-gradient(0deg,#040d17,transparent 80%),
    url('/assets/backgrounds/planet1-dust-v6131.png') center/cover;
  opacity: .9;
}
.nnAuthLayout { position: relative; box-sizing: border-box; min-height: 100%;
  width: min(1112px,100%); margin: 0 auto; padding: 48px 36px;
  display: grid; grid-template-columns: minmax(0,1fr) 424px; gap: 80px; align-items: center;
}
.nnAuthIdentity { min-width: 0; text-align: center; }
.nnAuthWordmark { color:#e2f4ff; font-size: clamp(38px,5vw,64px); font-weight:900;
  line-height:1; letter-spacing:.12em; padding-left:.12em; }
.nnAuthBrand p { margin:14px 0 0; color:#a5cbdc; font-size:10px; font-weight:650;
  letter-spacing:.24em; line-height:1.5; }
.nnAuthShip { position:relative; margin:34px auto 0; width:min(100%,350px); aspect-ratio:1/1.18;
  display:grid; place-items:center; isolation:isolate; }
.nnAuthShip img { display:block; width:auto; max-width:100%; height:100%; max-height:410px;
  object-fit:contain; mask:url('/assets/carriers-v6300/fighter-neutral-mask.svg') center/contain no-repeat;
  -webkit-mask:url('/assets/carriers-v6300/fighter-neutral-mask.svg') center/contain no-repeat; }
.nnAuthOrbit { position:absolute; z-index:-1; width:105%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(128,215,247,.12); background:radial-gradient(ellipse,rgba(35,116,153,.15),transparent 67%); }
.nnAuthOrbit::before { content:''; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(128,215,247,.07); }
.nnAuthPanel { min-width:0; box-sizing:border-box; padding:28px; border:1px solid #294756;
  border-radius:16px; background:linear-gradient(150deg,rgba(13,34,47,.97),rgba(5,18,29,.99));
  box-shadow:0 24px 70px rgba(0,0,0,.3); }
.nnAuthTabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  border-radius:9px; background:#06141f; }
.nnAuthTabs button { min-height:42px; border:1px solid transparent; border-radius:6px;
  background:transparent; color:#91b2c3; font:750 11px/1.3 system-ui,sans-serif; letter-spacing:.09em; }
.nnAuthTabs button.active { background:#183f51; border-color:#3d6c7d; color:#e7f8ff; }
.nnAuthHeadingRow { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:23px 0 21px; }
.nnAuthHeadingRow h1 { margin:0; color:#f2faff; font-size:27px; font-weight:750; line-height:1.2; letter-spacing:-.025em; }
.nnAuthHeadingRow #nnAuthHelp { display:flex; }
.nnAuthForm { display:grid; gap:17px; margin:0; }
.nnAuthForm.hidden { display:none !important; }
.nnAuthField { display:grid; gap:8px; min-width:0; }
.nnAuthField > label { color:#b4cbd8; font-size:10px; font-weight:750; letter-spacing:.085em; }
.nnAuthForm input { box-sizing:border-box; display:block; width:100%; height:48px; min-width:0;
  padding:0 13px; border:1px solid #2e4b5b; border-radius:7px; background:#071923;
  color:#eef9ff; font:400 16px/1.4 system-ui,sans-serif; }
.nnAuthForm input::placeholder { color:#819ba9; opacity:1; }
.nnAuthForm input:focus { border-color:#83d4ee; outline:2px solid rgba(131,212,238,.22); outline-offset:1px; }
.nnAuthPassword { position:relative; }
.nnAuthPassword input { padding-right:71px; }
.nnAuthPassword button { position:absolute; right:3px; top:3px; width:62px; height:42px;
  border:0; border-radius:5px; background:transparent; color:#a8cede;
  font:700 10px/1 system-ui,sans-serif; letter-spacing:.03em; }
.nnAuthSubmit { margin-top:6px; min-height:49px; display:flex; align-items:center; justify-content:center; gap:16px;
  border:1px solid #8cd5ee; border-radius:7px; background:#99ddf2; color:#072232;
  font:850 12px/1.3 system-ui,sans-serif; letter-spacing:.06em; }
.nnAuthSubmit span { font-size:20px; line-height:1; }
.nnAuthSubmit:hover { background:#b7edfc; }
.nnAuthSwitch { display:block; width:100%; min-height:44px; padding:12px 0 0; margin-top:9px;
  border:0; border-top:1px solid #203a49; background:transparent; color:#a1bcca;
  font:400 11px/1.5 system-ui,sans-serif; }
.nnAuthSwitch b { margin-left:4px; color:#b1e4f5; font-weight:750; }
.nnAuthMessage { color:#ffe2b1; font-size:12px; line-height:1.5; margin:12px 0 3px; overflow-wrap:anywhere; }
.nnAuthMessage:empty { display:none; }
#authScreen.nnAuthScreen button { cursor:pointer; touch-action:manipulation; }
#authScreen.nnAuthScreen button:disabled { cursor:wait; opacity:.55; }
#authScreen.nnAuthScreen button:focus-visible { outline:2px solid #b4efff; outline-offset:3px; }
@media(max-width:850px) {
  .nnAuthLayout { width:min(500px,100%); padding:32px 20px; grid-template-columns:minmax(0,1fr); gap:27px; align-content:center; }
  .nnAuthWordmark { font-size:37px; }
  .nnAuthBrand p { font-size:9px; margin-top:9px; letter-spacing:.2em; }
  .nnAuthShip { display:none; }
  .nnAuthPanel { padding:24px; }
  .nnAuthBackdrop { background:linear-gradient(0deg,rgba(3,13,23,.94),rgba(3,13,23,.6)),url('/assets/backgrounds/planet1-dust-v6131.png') center/cover; }
}
@media(max-width:420px) {
  .nnAuthLayout { padding:24px 16px max(24px,env(safe-area-inset-bottom)); gap:23px; }
  .nnAuthPanel { padding:22px 19px; border-radius:13px; }
  .nnAuthHeadingRow { margin:19px 0; }
  .nnAuthHeadingRow h1 { font-size:25px; }
  .nnAuthForm { gap:15px; }
}
@media(max-height:650px) and (max-width:850px) {
  .nnAuthLayout { padding-top:18px; padding-bottom:24px; align-content:start; gap:18px; }
  .nnAuthWordmark { font-size:29px; }
}
/* Signup Hero choice: native radios, fitted portrait cards, no origin badge
   until the player's starting planet has been chosen. */
.nnSignupHeroChoice { margin:0 0 2px; padding:0; border:0; min-width:0; }
.nnSignupHeroChoice legend { padding:0; margin:0 0 11px; color:#c7dee8;
  font-size:10px; font-weight:800; letter-spacing:.1em; }
.nnSignupHeroOptions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.nnSignupHeroOption { position:relative; display:block; min-width:0; cursor:pointer; }
.nnAuthForm .nnSignupHeroOption input { position:absolute; width:1px; height:1px;
  margin:0; padding:0; overflow:hidden; opacity:0; top:50%; left:50%; }
.nnSignupHeroCard { display:block; overflow:hidden; position:relative;
  border:1px solid #486577; border-radius:10px 3px 10px 3px;
  background:linear-gradient(130deg,#334a5b,#101f2d 35%,#06111c 70%,#283d4f);
  box-shadow:inset 1px 1px #d9f3ff36,inset -1px -1px #020710,0 4px 0 #03080d,0 7px 12px #0006;
  transition:border-color .18s,box-shadow .18s; }
.nnSignupHeroPortrait { position:relative; display:block; height:182px; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at 50% 35%,#5ebd7945,transparent 62%),
    repeating-linear-gradient(0deg,transparent 0 34px,#d9f5ff05 35px 36px),#07131e; }
.nnSignupHeroPortrait:before { content:''; position:absolute; inset:16% 8% 6%; border:1px solid #9ccca32c;
  border-radius:50%; box-shadow:inset 0 0 24px #51cf6810; }
.nnSignupHeroPortrait:after { content:''; position:absolute; inset:auto 0 0; height:28%;
  background:linear-gradient(transparent,#091824); pointer-events:none; }
.nnSignupHeroPortrait img { position:absolute; width:112%; height:auto; left:50%; top:-6%;
  max-width:none; transform:translateX(-50%); filter:drop-shadow(0 4px 8px #0009); }
.nnSignupHeroOption:has([value="female"]) .nnSignupHeroPortrait img { width:117%; top:-12%; }
.nnSignupHeroName { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 12px; min-height:42px; border-top:1px solid #b1dce62e;
  background:linear-gradient(#294151,#10202e); color:#d1e5ed;
  font-size:10px; font-weight:850; letter-spacing:.09em; text-shadow:0 1px #000; }
.nnSignupHeroCheck { display:grid; place-items:center; width:18px; height:18px; border:1px solid #718f9d;
  border-radius:50%; color:transparent; background:#07111c; font-size:11px; letter-spacing:0; text-shadow:none; }
.nnSignupHeroOption input:checked + .nnSignupHeroCard { border-color:#98ecd0;
  box-shadow:inset 1px 1px #d9fff16b,inset -1px -1px #020710,0 4px 0 #03080d,0 0 17px #63e4b120; }
.nnSignupHeroOption input:checked + .nnSignupHeroCard .nnSignupHeroName { color:#effff8; background:linear-gradient(#285448,#102b29); }
.nnSignupHeroOption input:checked + .nnSignupHeroCard .nnSignupHeroCheck { color:#09201e; background:#9aecc8; border-color:#d1ffee; }
.nnSignupHeroOption input:focus-visible + .nnSignupHeroCard { outline:2px solid #b4efff; outline-offset:3px; }
.nnSignupHeroOption:hover .nnSignupHeroCard { border-color:#96c4d6; }
.nnSignupHeroError { color:#ffdab2; font-size:12px; line-height:1.45; margin:11px 0 0; }
.nnSignupHeroError:empty { display:none; }
@media(max-width:420px) {
  .nnSignupHeroOptions { gap:10px; }
  .nnSignupHeroPortrait { height:164px; }
  .nnSignupHeroName { padding:10px; min-height:43px; }
}
@media(prefers-reduced-motion:reduce) { .nnSignupHeroCard { transition:none; } }
