/* Janela de Configurações no kit do arquivo shinobi.
 *
 * A versão anterior era anterior ao kit ornamentado e brigava com ele: um
 * `background` sólido com !important no botão de fechar apagava o selo PNG
 * (sobrava um quadrado marrom vazio), e a moldura da janela era substituída
 * por uma borda lisa. Aqui o kit volta a valer e o que sobra são os encaixes.
 *
 * A janela já recebe window-frame e área segura do shinobi-ornate-ui
 * (nrmt-ui-ornate-window · nrmt-ui-frame-safe) — não moldurar de novo.
 */

.xp-config-window {
  width: min(980px, calc(100vw - 32px)) !important;
  max-height: min(680px, calc(100vh - 32px)) !important;
}

/* ------------------------------------------------------------------ header */
.xp-config-window > header {
  height: 68px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #6b5326 !important;
  background: linear-gradient(#2b3134, #1a1f22) !important;
}

/* Selo 忍 emoldurado como retrato, igual aos NPCs e à Forja. */
.xp-config-window > header::before {
  content: "忍";
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 42px;
  height: 48px;
  margin-right: 4px;
  border: 1px solid transparent;
  border-image-source: var(--nrmt-archive-portrait-frame);
  border-image-slice: 112 106;
  border-image-width: 11px;
  border-image-repeat: stretch;
  border-radius: 2px;
  background: radial-gradient(circle at 50% 45%, rgba(199, 149, 69, .2), transparent 62%), #0b0f11;
  color: #ffd166;
  font: 16px Georgia, serif;
}

.xp-config-window > header small { color: #8e9896 !important; font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: .2em !important; }
.xp-config-window > header h2 { margin-top: 3px !important; color: #e7b63e !important; font: 21px NinjaTitle, Georgia, serif !important; letter-spacing: .05em !important; }

/* O fechar volta a ser o selo do kit: o override sólido de antes zerava o PNG. */
.xp-config-window > header > [data-xp-close] {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent no-repeat center / contain !important;
  background-image: var(--nrmt-archive-close) !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
}
.xp-config-window > header > [data-xp-close]:hover { filter: brightness(1.15); }

/* -------------------------------------------------------------------- corpo */
.xp-config-window > main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important;
  align-items: start !important;
  gap: 13px !important;
  padding: 15px !important;
  overflow: auto !important;
  background: radial-gradient(circle at 15% 0, rgba(38, 48, 45, .33), transparent 42%) !important;
}

.xp-config-window > main > section,
.xp-config-window .nrmt-display-settings {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid transparent !important;
  border-image-source: var(--nrmt-archive-panel-frame) !important;
  border-image-slice: 104 122 !important;
  border-image-width: 13px !important;
  border-image-repeat: stretch !important;
  border-radius: 2px !important;
  background:
    radial-gradient(circle at 14% 30%, rgba(121, 191, 216, .07), transparent 38%),
    linear-gradient(145deg, #11181b, #090d0f 72%) !important;
  box-shadow: 0 6px 17px rgba(0, 0, 0, .42) !important;
}

.xp-config-window > main > section[data-nrmt-legacy-zoom] { display: none !important; }

.xp-config-window > main > section > h3,
.xp-config-window .nrmt-display-settings__title b {
  color: #e7b63e !important;
  font: 13px NinjaTitle, Georgia, serif !important;
  letter-spacing: .06em !important;
}
.xp-config-window > main > section > h3 {
  margin: 0 0 11px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid #333d3f;
}

/* --------------------------------------------------------------- controles */
.xp-config-window .xp-setting,
.xp-config-window .xp-toggle { min-height: 62px; padding: 8px 2px; }
.xp-config-window .xp-setting span b,
.xp-config-window .xp-toggle span b { color: #e4ecdf; font-size: 11px; }
.xp-config-window .xp-setting span small,
.xp-config-window .xp-toggle span small { color: #8e9c96; font-size: 9.5px; line-height: 1.45; }

.xp-config-window .xp-stepper { border-color: #3a4446 !important; border-radius: 2px !important; background: #0b1012 !important; }
.xp-config-window .xp-stepper button { height: 34px; color: #e0ae43; cursor: pointer; }
.xp-config-window .xp-stepper strong { border-color: #364043; color: #e6e9e7; font-size: 11px; }
.xp-config-window .xp-range { height: 4px; margin: 13px 0 6px; background: #30393b; }
.xp-config-window .xp-toggle > i { border: 1px solid #3d4648; background: #252d30; }
.xp-config-window .xp-toggle input:checked + i { border-color: #93661f; background: #61481b; }

/* ------------------------------------------- tela e responsividade (painel) */
.xp-config-window .nrmt-display-settings { min-width: 0; }
.xp-config-window .nrmt-display-settings__title { padding-bottom: 10px; border-bottom: 1px solid #333d3f; }

.xp-config-window .nrmt-display-settings__title > span {
  box-sizing: border-box;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-image-source: var(--nrmt-archive-button-frame);
  border-image-slice: 56 188;
  border-image-width: 8px 16px;
  border-image-repeat: stretch;
  border-radius: 2px;
  background: linear-gradient(180deg, #2a2110, #14100a);
  color: #ffca51;
}
.xp-config-window .nrmt-display-settings__title small { color: #8b9593; font-size: 9.5px; }

.xp-config-window .nrmt-display-settings__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

/* Modos e botões do rodapé com a moldura de botão do kit. */
.xp-config-window .nrmt-display-settings__modes button,
.xp-config-window .nrmt-display-settings__footer button {
  border: 1px solid transparent !important;
  border-image-source: var(--nrmt-archive-button-frame) !important;
  border-image-slice: 56 188 !important;
  border-image-width: 8px 16px !important;
  border-image-repeat: stretch !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #11181b, #080c0e) !important;
  color: #a7b1af !important;
  text-shadow: 0 1px 1px #000;
}

.xp-config-window .nrmt-display-settings__modes button { min-height: 50px; padding: 8px 9px; text-align: left; }
.xp-config-window .nrmt-display-settings__modes b { font-size: 10px; letter-spacing: .05em; }
.xp-config-window .nrmt-display-settings__modes small { margin-top: 3px; font-size: 9px; color: #808a89; }
.xp-config-window .nrmt-display-settings__modes button.is-active {
  background: linear-gradient(180deg, #4a3410, #241905) !important;
  color: #ffd98a !important;
  box-shadow: 0 0 9px rgba(199, 149, 69, .3);
}
.xp-config-window .nrmt-display-settings__modes button.is-active small { color: #c3a36d; }

.xp-config-window .nrmt-display-settings__range { margin-top: 12px; padding: 0 2px; }
.xp-config-window .nrmt-display-settings__range b { color: #b9bdbb; font-size: 9.5px; letter-spacing: .06em; }
.xp-config-window .nrmt-display-settings__range output { min-width: 44px; color: #efba43; font-size: 11px; text-align: right; }
.xp-config-window .nrmt-display-settings__range input { height: 4px; margin: 5px 0; accent-color: #d88c27; }

.xp-config-window .nrmt-display-settings__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #293234;
}
.xp-config-window .nrmt-display-settings__footer small { margin-right: auto; color: #78817f; font-size: 9.5px; }
/* 7px e 5px de padding deixavam "VER TUTORIAL" e "RESTAURAR" espremidos. */
.xp-config-window .nrmt-display-settings__footer button { min-height: 36px; padding: 0 12px; font: 900 9.5px NinjaUI, Arial, sans-serif; letter-spacing: .07em; }
.xp-config-window .nrmt-display-settings__footer button:hover { filter: brightness(1.18); }

/* --------------------------------------------------------------- responsivo */
@media (max-width: 800px) {
  .xp-config-window { width: min(620px, calc(100vw - 14px)) !important; max-height: calc(100vh - 14px) !important; }
  .xp-config-window > main { grid-template-columns: 1fr !important; padding: 11px !important; }
  .xp-config-window > header { height: 60px !important; }
  .xp-config-window > header::before { width: 36px; height: 42px; }
}

@media (max-width: 620px) {
  .xp-config-window { width: 100vw !important; max-height: 100dvh !important; }
  .xp-config-window .nrmt-display-settings__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-config-window .nrmt-display-settings__footer button { flex: 1; }
}