/* Approved v6 entry treatment. Existing account, server and loading state APIs stay intact. */
#game-root .network-gateway {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 24px 34px;
  overflow: hidden;
  background: #173b43 url('../assets/images/loading/world-v17.webp') center / cover no-repeat;
  color: #f4e9c4;
}

#game-root .network-gateway__panel {
  position: absolute;
  top: calc(50% - 60px);
  left: 34px;
  right: 34px;
  transform: translateY(-50%);
  width: auto;
  max-height: 840px;
  padding: 24px 22px 20px;
  gap: 18px;
  border: 2px solid #c1a266;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(22,71,75,.94), rgba(16,50,59,.97));
  box-shadow: inset 0 0 0 3px #18484b, 0 10px 40px #061c285c;
  color: #f4e9c4;
  overflow-y: auto;
  scrollbar-color: #ae9462 #163f45;
}

#game-root .network-gateway__panel h1,
#game-root .network-gateway__panel h2,
#game-root .network-prologue h1 {
  color: #f0d59d !important;
  font-family: KaiTi, STKaiti, 'Noto Serif SC', SimSun, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 4px;
  text-shadow: 0 1px 2px #122e33;
}

#game-root .network-gateway__eyebrow {
  color: #cbd3be !important;
  font-size: 12px;
  line-height: 1.5;
}

#game-root .network-gateway .network-account-form { gap: 18px; }
#game-root .network-gateway .network-account-form > label {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #f0e6c6;
  font-size: 21px;
}

#game-root .network-gateway .network-account-form input[type='text'],
#game-root .network-gateway .network-account-form input[type='password'] {
  min-width: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  padding: 8px 11px;
  border: 1px solid #c9bf9e;
  border-radius: 6px;
  background: #efe9d4;
  color: #2d4442;
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  font-size: 17px;
  box-shadow: inset 0 1px 3px #4b482312;
  color-scheme: light;
}

#game-root .network-gateway .network-account-form input::placeholder {
  color: #727563;
  opacity: 1;
}
#game-root .network-gateway .network-account-form input:focus {
  outline: 2px solid #e5c582;
  outline-offset: 2px;
}

#game-root .network-gateway .primary-button {
  min-height: 47px;
  padding: 8px 14px;
  border: 1px solid #e5c176 !important;
  border-radius: 6px;
  background: linear-gradient(#efd496, #cea251) !important;
  color: #493721 !important;
  font-family: KaiTi, STKaiti, 'Noto Serif SC', SimSun, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 #ffedb6;
  box-shadow: inset 0 0 0 3px #a87b303b, 0 3px 9px #061c2670;
}
#game-root .network-gateway .primary-button:disabled { opacity: .62; cursor: default; }

/* The action starts at the input edge, as in the approved login preview. */
#game-root [data-network-view='login'] .network-account-form > .primary-button,
#game-root [data-network-view='register'] .network-account-form > .primary-button {
  margin-left: 63px;
  width: calc(100% - 63px);
}
#game-root [data-network-view='login'] .network-account-form > .secondary-button,
#game-root [data-network-view='register'] .network-account-form > .secondary-button {
  justify-self: center;
  padding: 5px 12px;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #e4ce94;
  box-shadow: none;
  font-size: 17px;
}

#game-root .network-session-resume {
  background: rgba(9,38,45,.65);
  border-color: #76978d;
  color: #f4e9c4;
}
#game-root .network-session-resume p,
#game-root .network-session-resume small { color: #c7d5c8; }
#game-root .network-session-resume strong { color: #f0d59d; }

/* Keep every live region group and server row; only their visual skin changes. */
#game-root .network-gateway__panel--servers {
  height: auto;
  min-height: 280px;
  max-height: 460px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 24px 20px 20px;
}
#game-root .network-gateway__panel--servers .network-server-title { font-size: 28px; }
#game-root .network-server-list { gap: 12px; scrollbar-color: #ae9462 #163f45; }
#game-root .network-area-group { background: #10333c; border-color: #8d987a; }
#game-root .network-area-header {
  background: #214e53;
  border-color: #8d987a;
  color: #f1dcaa;
  font-size: 17px;
}
#game-root .network-area-header small,
#game-root .network-area-toggle { color: #c8d1bc; }
#game-root .network-area-servers { color: #294544 !important; }
#game-root .network-server-card {
  min-height: 48px;
  border-color: #c6bf9e;
  background: #efe8d1;
  box-shadow: inset 0 1px 0 #fff5dc;
}
#game-root .network-server-card strong { color: #244043 !important; font-size: 17px; }
#game-root .network-server-card span { color: #456d40 !important; font-size: 12px; }
#game-root .network-server-card:hover:not(:disabled),
#game-root .network-server-card:focus-visible {
  background: #fff3cf;
  border-color: #e5c176;
  outline: 2px solid #bda260;
  outline-offset: 1px;
}
#game-root .network-server-card:disabled { background: #c8c9bb; opacity: .85; }
#game-root .network-server-card:disabled strong,
#game-root .network-server-card:disabled span { color: #5a645c !important; }
#game-root .network-gateway .secondary-button {
  background: #21494e;
  border-color: #a78e5c;
  color: #efddb6;
}
#game-root [data-network-view='login'] .network-account-form > .secondary-button,
#game-root [data-network-view='register'] .network-account-form > .secondary-button { background: transparent; }

#game-root .network-prologue__content {
  border: 2px solid #bda260;
  border-radius: 12px;
  background: rgba(15,49,58,.94);
  box-shadow: inset 0 0 0 3px #18484b, 0 10px 40px #061c285c;
}
#game-root .network-prologue__body p { color: #e2e4d0; }
#game-root .network-character-create__portrait {
  background: radial-gradient(ellipse, #417c77, #123e46);
  border-color: #9eb29c;
  color: #d0d8bf;
}
#game-root .network-gender-options legend,
#game-root .network-gender-options label { color: #e4e6cf; }
#game-root .network-gender-options label { background: #143d44; border-color: #819783; }
#game-root .network-gender-options input { accent-color: #e2bc73; }

#game-root .network-gateway__filing {
  bottom: 8px;
  padding: 6px 10px;
  border: 1px solid #7f987a66;
  border-radius: 5px;
  background: #0d2d37db;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}
#game-root .network-gateway__filing a { color: #dee3cf; }
#game-root .network-gateway__status {
  bottom: 72px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #10343ceb;
  color: #e5e6d3;
  font-size: 15px;
  line-height: 1.6;
}
#game-root .network-gateway__status:empty { display: none; }
#game-root .network-gateway__status[data-state='error'] { color: #ffbca5; }
#game-root .network-gateway__status[data-state='success'] { color: #bce4c5; }

/* Loading is outside game-root before boot. Match its exact 480:1024 safe-area canvas. */
.loading-screen {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: #10272b;
}
.loading-screen__scene {
  flex: 0 0 auto;
  width: min(calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .46875));
  height: min(calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * 2.133333333));
  max-width: none;
  font-size: min(calc(100vw * .035416667), calc(100vh * .016601563));
}
.loading-screen__art { object-fit: cover; object-position: center; }
.loading-screen__controls {
  bottom: 20%;
  left: 7%;
  right: 7%;
  padding: 1em .6em;
  background: radial-gradient(ellipse, #0a2935e6, #0a293599 65%, transparent);
}
.loading-screen .loading-screen__progress {
  height: .59em;
  padding: .12em;
  border-color: #d7bd82;
  background: #122f36;
}
.loading-screen .loading-screen__progress span { background: linear-gradient(90deg, #79b9a8, #f0d99a); }
.loading-screen p {
  margin-top: .88em;
  font-size: 1em;
  color: #fff2cf;
  line-height: 1.7;
}
.loading-screen button {
  margin-top: .82em;
  min-height: 2.5em;
  padding: .6em 1.4em;
  background: #1d464b;
  border-color: #c1a266;
  color: #f4e4bc;
  font-size: 1em;
}
@supports (height: 100dvh) {
  .loading-screen__scene {
    width: min(calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .46875));
    height: min(calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * 2.133333333));
    font-size: min(calc(100vw * .035416667), calc(100dvh * .016601563));
  }
}