/*
 * Login screens (USER-REQUESTED 2026-10-11 login redesign): the full-screen backdrop behind the stage
 * (client/ui/login-backdrop.ts), the hidden login-intro art, the 25xx skin's browser-drawn captions
 * (client/ui/login-skin.ts) and the options window (client/ui/options-window.ts). Same family as css/loading-screen.css,
 * whose fog layer the backdrop reuses.
 */

/* ---------------------------------------------------------------------------------------------- backdrop */
.login-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #090807; pointer-events: none; opacity: 0; transition: opacity 700ms ease; }
.login-backdrop.is-shown { opacity: 1; }
.login-backdrop[hidden] { display: none; }
/* the 4:3 stage lets the backdrop through while it is up; the login-intro art (orc painting + overlays) is hidden */
#stage[data-login-backdrop="on"] { background: transparent; }
.ko-login-modern > .n3-backdrop { display: none; }

/* Fallback ONE-FILE SLOT (?loginbg=slot, or when the client paintings below cannot be loaded): img/login-backdrop.svg,
   named only here. */
.login-backdrop-image {
  position: absolute;
  inset: -3%;
  background: #090807 url("/img/login-backdrop.svg") 50% 50% / cover no-repeat;
  opacity: 0;
  transition: opacity 1200ms ease;
  transform-origin: 50% 40%;
  animation: loading-zoom 70s ease-in-out infinite alternate;
}
.login-backdrop-image.is-ready { opacity: 1; }

/* DEFAULT (USER-REQUESTED 2026-10-11, the user chose "b"): the 1534 loading paintings from the asset base / CDN,
   El Morad left / Karus right, darkened. */
.login-backdrop-art {
  position: absolute;
  top: -3%;
  bottom: -3%;
  width: 60%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(.5) saturate(.5) blur(1.5px);
  opacity: 0;
  transition: opacity 1200ms ease;
}
.login-backdrop-art.is-ready { opacity: 1; }
.login-backdrop-art-left { left: -3%; background-position: 70% 25%; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 96%); mask-image: linear-gradient(to right, #000 55%, transparent 96%); }
.login-backdrop-art-right { right: -3%; background-position: 30% 25%; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 96%); mask-image: linear-gradient(to left, #000 55%, transparent 96%); }

.login-backdrop-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 22% 42% at 50% 46%, rgba(6, 6, 5, .5), transparent),
    radial-gradient(ellipse 80% 76% at 50% 46%, transparent 40%, rgba(0, 0, 0, .82)),
    rgba(8, 7, 6, .5);
}
.login-backdrop-client .login-backdrop-shade {
  background:
    radial-gradient(ellipse 20% 40% at 50% 46%, rgba(6, 6, 5, .62), transparent),
    radial-gradient(ellipse 80% 76% at 50% 46%, transparent 40%, rgba(0, 0, 0, .8)),
    rgba(8, 7, 6, .3);
}

@media (prefers-reduced-motion: reduce) {
  .login-backdrop-image { animation: none; }
}

/* ---------------------------------------------------------------------------------------------- 25xx skin captions */
/* Register / "Remember me" on the caption-less red plate, drawn like the captions baked into the OK / Cancel / Homepage /
   Option sprites (sampled from them; USER-REQUESTED 2026-10-11 polish "same yellow, weight, size, letter-spacing and the
   same 1 px dark shadow"): bold 12 px sans, slightly tightened, a yellow gradient #fffc00 -> #ffc400 over the glyphs, a 1 px dark brown
   shadow down-right; hover = flat pale yellow, pressed = the dimmed gradient, disabled = grey, like the sprites' states.
   Vertical place (USER-REQUESTED 2026-10-11 "option ok cancel buton ortasında ama sonraki eklediklerimiz butonun altına
   daha yakın"): the baked captions have their cap tops at slot + 9 and their baseline at slot + 18; the 152x28 plate
   sits at slot + 1 (its face lines at rows 5 and 24, the baked plate's at 6 and 25: the same centre), so the 12 px line
   starts at plate row 7.6: baseline at row 17.8 (Arimo ascent 0.905 em, line height 1; measured against the baked ones). */
.ko-login-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 7.6px;
  height: 12px;
  text-align: center;
  font: 700 12px/12px var(--ko-font-sans);
  letter-spacing: -0.2px;
  color: #ffd400;
  background-image: linear-gradient(#fffc00 15%, #ffc400 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 1px 0 #351306);
  white-space: nowrap;
  pointer-events: none;
}
[data-state="2"] > .ko-login-caption { background-image: linear-gradient(#f9ff48, #f9ff48); }
[data-state="1"] > .ko-login-caption { background-image: linear-gradient(#a39a00 15%, #a37d00 85%); }
[data-state="3"] > .ko-login-caption { background-image: linear-gradient(#868686 15%, #535353 85%); }

/* ---------------------------------------------------------------------------------------------- options window */
.ko-options-layer { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, .35); }
.ko-options-layer[hidden] { display: none; }
.ko-options {
  position: relative;
  box-sizing: border-box;
  width: 336px;
  padding: 0 16px 14px;
  color: #fef5d1;
  font: 13px/1.35 var(--ko-font-sans);
  background: linear-gradient(#17140f, #0b0a08);
  border: 1px solid #6f6f6f;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #3f3a2c, 0 6px 24px rgba(0, 0, 0, .7);
}
.ko-options-title {
  margin: 0 -16px 10px;
  padding: 7px 34px 6px 16px;
  font: 700 14px/1.2 var(--ko-font-sans);
  color: #e9cf8a;
  letter-spacing: .06em;
  background: linear-gradient(#2c271c, #16130d);
  border-bottom: 1px solid #4d4532;
}
.ko-options-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  font: 700 13px/18px var(--ko-font-sans);
  color: #d9c79a;
  background: #120f0a;
  border: 1px solid #6f6f6f;
  cursor: pointer;
}
.ko-options-close:hover { color: #fff3c4; border-color: #a99a6e; }
.ko-options-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; min-height: 28px; }
.ko-options-row > span:first-child { color: #d8c9a2; }
.ko-options-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ko-options input[type="range"] { flex: 1; min-width: 0; accent-color: #b8975c; cursor: pointer; }
.ko-options input[type="checkbox"] { margin: 0; accent-color: #b8975c; cursor: pointer; }
.ko-options select,
.ko-options-action {
  font: 13px/1.2 var(--ko-font-sans);
  color: #e9cf8a;
  background: #15130e;
  border: 1px solid #5a4a2a;
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
}
.ko-options-value { min-width: 3.2em; text-align: right; color: #d9b76a; font-variant-numeric: tabular-nums; }
.ko-options-note { min-height: 16px; margin: 6px 0 2px; font-size: 11px; color: #c9b98f; }
.ko-options-footer { display: flex; justify-content: center; margin-top: 8px; }
/* OK: the login panel's own button art (options-window.ts setButtonArt): the 1534 plate (ui_login_02_1, rows normal /
   down / hover scaled to 160x37) or the 25xx OK sprites (caption in the art). */
.ko-options-ok {
  --ok-size: 231.4px 231px;
  --ok-pos-normal: -9px -4.5px;
  --ok-pos-hover: -9px -80.3px;
  --ok-pos-pressed: -9px -42.4px;
  width: var(--ok-w, 160px);
  height: var(--ok-h, 37px);
  padding: 0;
  border: 0;
  font: 700 15px/1 var(--ko-font-sans);
  color: #0e0e0a;
  text-shadow: 0 0 1px rgba(255, 255, 255, .9);
  background: #5a5a58 var(--ok-img-normal, none) var(--ok-pos-normal) / var(--ok-size) no-repeat;
  cursor: pointer;
}
.ko-options-ok:hover { background-image: var(--ok-img-hover, none); background-position: var(--ok-pos-hover); color: #fff; text-shadow: 0 0 3px rgba(255, 214, 128, .85); }
.ko-options-ok:active { background-image: var(--ok-img-pressed, none); background-position: var(--ok-pos-pressed); color: #fff; }
.ko-options-ok[data-art="sprites"] { background-color: transparent; }
.ko-options-ok-text[hidden] { display: none; }

/* ---------------------------------------------------------------------------------------------- notice window */
/* USER-REQUESTED 2026-10-11: the post-login notice as the renewal window (client/ui/notice-window.ts; re_login_intro
   Group_Notice_3 art through the asset base). Strings as in that UIF: "Notice" pink 11 pt, titles gold 10 pt, bodies
   cream 10 pt (CDFont pixel size MulDiv(points, 96, 72): 15 / 13 px). */
.ko-notice { position: absolute; z-index: 20; user-select: none; -webkit-user-select: none; }
.ko-notice[hidden] { display: none; }
.ko-notice-part,
.ko-notice-title,
.ko-notice-name,
.ko-notice-body,
.ko-notice-scrollbar,
.ko-notice-rail,
.ko-notice-thumb,
.ko-notice-sprite-button { position: absolute; box-sizing: border-box; }
.ko-notice-part { pointer-events: none; }
.ko-notice-title { display: grid; place-items: center; font: 700 15px/1 var(--ko-font-sans); color: #fc96af; text-shadow: 0 1px 0 #1d0a0e; white-space: nowrap; }
.ko-notice-name {
  display: block;
  padding: 0 4px;
  text-align: center;
  font: 700 13px/18px var(--ko-font-sans);
  color: #f1b423;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ko-notice-body { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ko-notice-body::-webkit-scrollbar { display: none; }
.ko-notice-text {
  font: 400 13px/16px var(--ko-font-sans);
  color: #f1eab4;
  text-shadow: 0 1px 0 #000;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ko-notice-scrollbar[hidden] { display: none; }
.ko-notice-thumb { cursor: grab; }
.ko-notice-sprite-button { padding: 0; border: 0; background-color: transparent; cursor: pointer; }
.ko-notice-sprite-button:hover:not(:disabled) { background-image: var(--ko-notice-hover); }
.ko-notice-sprite-button:active:not(:disabled) { background-image: var(--ko-notice-pressed); }
.ko-notice-sprite-button:disabled { background-image: var(--ko-notice-disabled); cursor: default; }
/* The 1534 notice groups (no renewal art): 60-char titles end in an ellipsis, 560-char bodies scroll (wheel, thin bar). */
.screen-login [data-id^="text_notice_name_0"] { display: block !important; text-overflow: ellipsis; }
.screen-login [data-id^="text_notice_0"] { overflow-y: auto !important; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8a6a2c transparent; }
.ko-notice-sprite-button:focus-visible { outline: 1px solid #f1b423; outline-offset: 1px; }