/* Lobby: login screen, "Saved accounts", character selection and creation.
 *
 * Positions and sizes are NOT in this file: native-layout.js resolves every
 * native window (agent R's NWindow.dll decode) and saved-panel.js carries the
 * DLL panel's geometry and colours with their citations. What is here:
 *
 *  - plumbing (stacking, text boxes, flex centring of captions);
 *  - PROVISIONAL looks used only while a texture is not staged or where the
 *    native drawing is not decoded, all under .lobby-provisional / .no-art:
 *      frames #080808 / #505050 and edit fields #393839 / #191919 — measured
 *      in the C6 capture (referencia-cliente-c6/login), not decoded;
 *      the no-art button stand-in #B59E63 frame / #10193A face (capture);
 *      the combo list, the dialog frame, the busy note — authored;
 *      fallback typefaces when the client's bitmap font is not staged;
 *      black behind the screens (the original shows its 3D lobby scene).
 */

#lobby {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #000;
  user-select: none; -webkit-user-select: none;
  font: 11px Tahoma, Verdana, sans-serif; color: #dcdcdc;
}
/* While the lobby is up, the world's own layers stay out of sight (and the
   world skips its frames, main.js). */
body.lobby-active > :not(#lobby):not(script):not(.lobby-stage-canvas):not(.loading-state):not(#view) { visibility: hidden !important; }
/* the world's canvas stays hidden in the lobby unless the stage draws on it */
body.lobby-active:not(.lobby-stage-on-view) > #view { visibility: hidden !important; }

/* Lobby 3D stage (js/lobby/stage.js): its own canvas before the world exists,
   the world's #view after a Restart (one WebGL context at a time). The black
   page background stays until the stage has drawn. */
.lobby-stage-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.lobby-stage-live #lobby { background: transparent; }
.lobby-pawn-labels { position: absolute; inset: 0; pointer-events: none; }
.lobby-pawn-label { position: absolute; transform: translate(-50%, -100%); display: flex;
  flex-direction: column; align-items: center; pointer-events: none; }
.lobby-pawn-label canvas { display: block; }

.lobby-screen { position: absolute; inset: 0; }
.lobby-backdrop { position: absolute; inset: 0; }
.lobby-text-fallback { font: 11px Tahoma, Verdana, sans-serif; white-space: nowrap; line-height: 13px; }
.lobby-label { position: absolute; display: flex; align-items: flex-start; white-space: nowrap; pointer-events: none; }
.lobby-label canvas { display: block; }
.lobby-panel { position: absolute; overflow: hidden; }
.lobby-panel.no-art, .login-corner.no-art {
  box-sizing: border-box; border: 1px solid #080808; box-shadow: inset 0 0 0 1px #505050;
  background: rgba(0, 0, 0, .55);
}
.login-logo { position: absolute; pointer-events: none; overflow: hidden; }

/* ---- buttons (widgets.js) ----------------------------------------------- */
.lobby-btn {
  position: absolute; display: block; padding: 0; margin: 0; border: 0;
  background: transparent; cursor: pointer; outline: none; overflow: hidden;
}
.lobby-btn-art { position: absolute; inset: 0; pointer-events: none; }
.lobby-btn-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.lobby-btn-label canvas { display: block; }
.lobby-btn.disabled { cursor: default; }
.lobby-btn:focus-visible .lobby-btn-art { outline: 1px dotted rgba(230, 220, 190, .6); outline-offset: -2px; }
.lobby-btn.lobby-provisional .lobby-btn-art {
  box-sizing: border-box; background: #10193a; border: 1px solid #b59e63;
}
.lobby-btn.lobby-provisional.pressed .lobby-btn-art { background: #1a2550; }
.lobby-btn.lobby-provisional.disabled .lobby-btn-label { opacity: .6; }
.lobby-arrow .lobby-btn-label { font: 9px monospace; color: #dcdcdc; }

/* ---- edit boxes (NCEditBox) --------------------------------------------- */
.lobby-edit { position: absolute; box-sizing: border-box; overflow: hidden; }
.lobby-edit-frame { position: absolute; pointer-events: none; }
.lobby-edit.lobby-provisional { border: 1px solid #393839; background: #191919; }
.lobby-edit.lobby-provisional:focus-within { background: #1f1f1f; }
.lobby-edit-input {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  margin: 0; border: 0; outline: none; background: transparent;
  padding: 1px 1px 0 1px;               /* text at (2,2) of the box, border included */
  font: 11px Tahoma, Verdana, sans-serif;
}
.lobby-edit-input.mask-overlay { color: transparent !important; }
.lobby-edit-input:disabled { opacity: .6; }
.lobby-edit-mask { position: absolute; left: 2px; top: 2px; pointer-events: none; }
.lobby-edit-mask canvas { display: block; }
.lobby-edit-caret { position: absolute; pointer-events: none; }
.lobby-edit-caret canvas { display: block; }

/* ---- selectors (NCSelectCtrl) ------------------------------------------- */
.lobby-selector { position: absolute; }
.lobby-selector-box { position: absolute; }
.lobby-selector-box.no-art { box-sizing: border-box; border: 1px solid #393839; background: #101010; }
/* a disabled selector looks the same (no decoded disabled drawing) */
.lobby-selector-text { display: flex; align-items: flex-start; white-space: nowrap; overflow: hidden; pointer-events: none; }

/* ---- message bar (NCMessageWnd) ----------------------------------------- */
/* the darker band is visible in every C6 capture (about 65 % brightness over
   the scene); its texture, if any, is not decoded — PROVISIONAL */
.lobby-message-bar {
  position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.lobby-message-bar.no-art { background: rgba(0, 0, 0, .35); }
.lobby-message-bar.wide .lobby-message-text { position: absolute; display: block; }
.lobby-message-text { display: flex; }

/* ---- Saved accounts (DLL geometry; colours from saved-panel.js) --------- */
/* ProggyClean.ttf (MIT, Tristan Grimmer) extracted from the Dear ImGui copy in
   the DLL source by extract_proggyclean.py: ImGui's default font, 13 px at the
   panel's window font scale 0.90 (DX9Hook.cpp:700, OverlayLayout.cpp:1013). */
@font-face {
  font-family: 'ProggyClean';
  src: url('fonts/ProggyClean.ttf') format('truetype');
  font-display: block;
}
.saved-panel {
  position: absolute; box-sizing: border-box;
  font: 11.7px 'ProggyClean', monospace; line-height: 1;
  -webkit-font-smoothing: none; font-smooth: never;
}
.saved-title { white-space: nowrap; margin-left: -1px; margin-top: -1px; }
.saved-site {
  position: absolute; right: 9px; top: 9px; display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.saved-seal { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.saved-seal svg { display: block; }
.saved-table { box-sizing: border-box; margin-left: -1px; margin-top: -1px; overflow: hidden; }
.saved-row { position: absolute; left: 0; right: 0; box-sizing: border-box; display: flex; }
.saved-row.has-account { cursor: pointer; }
.saved-row.has-account:not(.selected):hover { background: var(--hover) !important; }
.saved-row.drop-target { outline: 1px solid var(--hover); outline-offset: -1px; }
.saved-num {
  box-sizing: border-box; flex: none; height: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.saved-spinner { position: absolute; left: 5px; top: 0; width: 20px; height: 20px; }
.saved-name {
  flex: 1; padding-left: 5px; display: flex; align-items: center; white-space: nowrap; overflow: hidden;
}
.saved-check { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.saved-check-box {
  width: 11.7px; height: 11.7px; border-radius: 2px; display: inline-block; flex: none;
}
.saved-check-box svg { display: none; width: 100%; height: 100%; }
.saved-check-box.on svg { display: block; }
.saved-panel .lobby-btn-label { font-family: Tahoma, Verdana, sans-serif; }

/* ---- dialog (lobby Yes/No), PROVISIONAL frame --------------------------- */
/* The cover only makes the question modal; the captures show no dimming. */
.lobby-dialog-cover { position: fixed; inset: 0; z-index: 100000; visibility: visible !important; }
.lobby-dialog { position: absolute; box-sizing: border-box; overflow: hidden; }
.lobby-dialog.no-art {
  border: 1px solid #080808; box-shadow: inset 0 0 0 1px #505050; background: rgba(12, 12, 14, .94);
}
.lobby-dialog-icon { position: absolute; }
.lobby-dialog-icon.no-art { box-sizing: border-box; border: 1px solid #b59e63; }
.lobby-dialog-text { position: absolute; }
.lobby-dialog-text.lobby-text-fallback { white-space: normal; line-height: 13px; }

.lobby-busy {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);
  padding: 6px 14px; border: 1px solid #505050; background: rgba(0, 0, 0, .7); color: #dcdcdc;
}

/* ---- selection ----------------------------------------------------------- */
.select-stage, .create-stage { position: absolute; inset: 0 0 52px 0; pointer-events: none; }
.select-combo { position: absolute; box-sizing: border-box; cursor: pointer; }
.select-combo.lobby-provisional { border: 1px solid #393839; background: rgba(16, 16, 16, .95); }
.select-combo.lobby-provisional::after {         /* drop-down button, provisional */
  content: ''; position: absolute; right: 1px; top: 1px; width: 13px; height: 13px; box-sizing: border-box;
  border: 1px solid #b59e63; background: #10193a;
}
.select-combo-list {
  position: absolute; z-index: 2; box-sizing: border-box;
  border: 1px solid #393839; background: rgba(12, 12, 14, .96);
}
.select-combo-row { padding: 2px 3px; cursor: pointer; display: flex; }
.select-combo-row.selected, .select-combo-row:hover { background: rgba(176, 155, 121, .25); }
.select-bar { position: absolute; }
.select-bar.lobby-provisional.bar-hp { background: #b23a3a; }
.select-bar.lobby-provisional.bar-mp { background: #3a5fb2; }
.select-bar.lobby-provisional.bar-exp { background: #b2a23a; }
.select-centre { justify-content: center; }
.select-right { justify-content: flex-end; }
.lobby-select .lobby-panel { overflow: visible; }

/* ---- creation ------------------------------------------------------------ */
/* 19 px line pitch: measured in referencia-cliente-c6/criacao (provisional) */
.create-description { position: absolute; display: block; white-space: normal; overflow: hidden; }
.create-description > div { height: 19px !important; }
.create-description.lobby-text-fallback { white-space: normal; line-height: 19px; }
.create-description canvas { display: block; }
.create-view.lobby-provisional .lobby-btn-art { background: rgba(16, 25, 58, .6); }

/* NCServerSelectWnd (js/lobby/server-select.js). Window art, list rect,
   captions and buttons are sourced; the list control's own drawing is not
   decoded, so the header cells and the selection bar are provisional
   stand-ins coloured from the C6 capture login-webtest-selecao-servidor.png. */
.server-list { position: absolute; }
.server-head-cell { position: absolute; box-sizing: border-box;
  border-top: 1px solid #9c9684; border-left: 1px solid #bdae84;
  border-right: 1px solid #735929; border-bottom: 1px solid #94865a;
  background: linear-gradient(#443d42, #212c42); }
.server-head-cell .server-head-text { left: 0; right: 0; top: 4px; justify-content: center; }
.server-rows { position: absolute; inset: 0; }
.server-row { position: absolute; cursor: default; }
.server-row.selected { background: rgb(51, 81, 120); }

/* NCEulaWnd text area (js/lobby/agreement.js): scroll bar and font not
   decoded, plain scrollable text (provisional). */
.agreement-text { position: absolute; overflow: auto; white-space: pre-wrap; color: #dcdcdc;
  font: 11px Tahoma, Verdana, sans-serif; line-height: 13px; }

/* LoadingState (js/lobby/loading-screen.js): above the lobby and the world. */
.loading-state { position: fixed; inset: 0; z-index: 200000; background: #000; visibility: visible !important; }
.loading-back { position: absolute; inset: 0; }
.loading-tips { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; }
.loading-tips .lobby-label { position: absolute; top: 50%; }