:root {
  --nrmt-ornate-window-gold: url('/assets/branding/shinobi-ornate-ui-v2/window-gold.png?v=1');
  --nrmt-ornate-window-cyan: url('/assets/branding/shinobi-ornate-ui-v2/window-cyan.png?v=1');
  --nrmt-ornate-button-gold: url('/assets/branding/shinobi-ornate-ui-v2/button-gold.png?v=1');
  --nrmt-ornate-button-cyan: url('/assets/branding/shinobi-ornate-ui-v2/button-cyan.png?v=1');
  --nrmt-ornate-portrait-gold: url('/assets/branding/shinobi-ornate-ui-v2/card-portrait-gold.png?v=1');
  --nrmt-ornate-portrait-cyan: url('/assets/branding/shinobi-ornate-ui-v2/card-portrait-cyan.png?v=1');
  --nrmt-ornate-close: url('/assets/branding/shinobi-ornate-ui-v2/close.png?v=1');
  --nrmt-ornate-back: url('/assets/branding/shinobi-ornate-ui-v2/back.png?v=1');
  --nrmt-ornate-gold: #c99638;
  --nrmt-ornate-cyan: #28cbd0;
  --nrmt-ornate-green: #65ca87;
  --nrmt-ornate-red: #d45b59;
}

/* Camada puramente visual: nenhum evento ou HTML funcional e substituido. */
body .nrmt-ui-ornate-window {
  position: relative !important;
  isolation: isolate;
  background-color: #0d0e10 !important;
  border-color: rgba(201, 150, 56, .38) !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 78px rgba(0, 0, 0, .7), inset 0 0 28px rgba(0, 0, 0, .38) !important;
}

body .nrmt-ui-ornate-frame-layer {
  position: absolute;
  inset: 0;
  z-index: 999;
  box-sizing: border-box;
  display: block;
  border: 24px solid transparent;
  border-image-source: var(--nrmt-ornate-window-gold);
  border-image-slice: 135 145 135 145;
  border-image-width: 24px;
  border-image-repeat: stretch;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .85));
}

body .nrmt-ui-ornate-window.is-ornate-cyan {
  border-color: rgba(40, 203, 208, .42) !important;
}

body .nrmt-ui-ornate-window.is-ornate-cyan > .nrmt-ui-ornate-frame-layer {
  border-image-source: var(--nrmt-ornate-window-cyan);
}

body .nrmt-ui-ornate-card {
  position: relative;
  background-color: #0d0e10 !important;
  background-image: var(--nrmt-ornate-window-gold) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border-color: transparent !important;
  border-radius: 3px !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .36) !important;
}

body .nrmt-ui-ornate-card.is-ornate-portrait {
  background-image: var(--nrmt-ornate-portrait-gold) !important;
}

body .nrmt-ui-ornate-card:is(.is-active, .active, .selected, .is-selected, [aria-selected="true"]) {
  background-image: var(--nrmt-ornate-window-cyan) !important;
  box-shadow: 0 0 0 1px rgba(40, 203, 208, .54), 0 7px 18px rgba(0, 0, 0, .42) !important;
}

body .nrmt-ui-ornate-card.is-ornate-portrait:is(.is-active, .active, .selected, .is-selected, [aria-selected="true"]) {
  background-image: var(--nrmt-ornate-portrait-cyan) !important;
}

body .nrmt-ui-ornate-card:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(201, 150, 56, .48), 0 8px 19px rgba(0, 0, 0, .44) !important;
}

body .nrmt-ui-ornate-button {
  --nrmt-ui-action: var(--nrmt-ornate-gold);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  min-height: 32px;
  padding: .48em 1.05em;
  color: #eadbb6 !important;
  font-weight: 800 !important;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 6px color-mix(in srgb, var(--nrmt-ui-action) 35%, transparent) !important;
  background-color: #0d0e10 !important;
  background-image: var(--nrmt-ornate-button-gold) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  border-radius: 3px !important;
  outline: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .42) !important;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

body .nrmt-ui-ornate-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.14) saturate(1.05);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .48), 0 0 9px color-mix(in srgb, var(--nrmt-ui-action) 28%, transparent) !important;
}

body .nrmt-ui-ornate-button:active:not(:disabled) {
  transform: translateY(1px) scale(.994);
  filter: brightness(.94);
}

body .nrmt-ui-ornate-button:focus-visible {
  outline: 1px solid #f0d28d !important;
  outline-offset: 2px !important;
}

body .nrmt-ui-ornate-button:disabled {
  filter: grayscale(.58) brightness(.68);
  cursor: not-allowed;
  opacity: .72;
}

body .nrmt-ui-action-primary { --nrmt-ui-action: var(--nrmt-ornate-gold); }
body .nrmt-ui-action-config,
body .nrmt-ui-action-back { --nrmt-ui-action: var(--nrmt-ornate-cyan); background-image: var(--nrmt-ornate-button-cyan) !important; }
body .nrmt-ui-action-success { --nrmt-ui-action: var(--nrmt-ornate-green); }
body .nrmt-ui-action-danger,
body .nrmt-ui-action-close { --nrmt-ui-action: var(--nrmt-ornate-red); }
body .nrmt-ui-action-neutral { --nrmt-ui-action: #958873; }

body .nrmt-ui-ornate-tab {
  min-height: 29px;
  padding: .39em .92em;
  color: #9dcfd0 !important;
  background-image: var(--nrmt-ornate-button-cyan) !important;
  box-shadow: none !important;
}

body .nrmt-ui-ornate-tab:is(.is-active, .active, [aria-selected="true"]) {
  color: #f3dfae !important;
  background-image: var(--nrmt-ornate-button-gold) !important;
  filter: brightness(1.12);
}

body .nrmt-ui-icon-close,
body .nrmt-ui-icon-back {
  flex: 0 0 34px;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .44) !important;
}

body .nrmt-ui-icon-close { background-image: var(--nrmt-ornate-close) !important; }
body .nrmt-ui-icon-back { background-image: var(--nrmt-ornate-back) !important; }

body .nrmt-ui-icon-close:hover:not(:disabled),
body .nrmt-ui-icon-back:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.15);
}

body .nrmt-ui-action-close:not(.nrmt-ui-icon-close)::before,
body .nrmt-ui-action-back:not(.nrmt-ui-icon-back)::before {
  content: "";
  display: inline-block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body .nrmt-ui-action-close:not(.nrmt-ui-icon-close)::before { background-image: var(--nrmt-ornate-close); }
body .nrmt-ui-action-back:not(.nrmt-ui-icon-back)::before { background-image: var(--nrmt-ornate-back); }

/* Cards clicaveis preservam a moldura de card em vez da placa de botao. */
body .nrmt-ui-ornate-card.nrmt-ui-ornate-button {
  display: flex;
  background-image: var(--nrmt-ornate-window-gold) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .36) !important;
}

body .nrmt-ui-ornate-card.is-ornate-portrait.nrmt-ui-ornate-button {
  background-image: var(--nrmt-ornate-portrait-gold) !important;
}

body .nrmt-ui-ornate-card.nrmt-ui-ornate-button:is(.is-active, .active, .selected, .is-selected, [aria-selected="true"]) {
  background-image: var(--nrmt-ornate-window-cyan) !important;
}

body .nrmt-ui-ornate-card.is-ornate-portrait.nrmt-ui-ornate-button:is(.is-active, .active, .selected, .is-selected, [aria-selected="true"]) {
  background-image: var(--nrmt-ornate-portrait-cyan) !important;
}

body.nrmt-low-fx .nrmt-ui-ornate-button,
body.nrmt-low-fx .nrmt-ui-ornate-card,
body.nrmt-low-fx .nrmt-ui-ornate-frame-layer {
  transition: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  body .nrmt-ui-ornate-frame-layer {
    border-width: 16px;
    border-image-width: 16px;
  }

  body .nrmt-ui-ornate-button {
    min-height: 30px;
    padding: .43em .78em;
  }

  body .nrmt-ui-icon-close,
  body .nrmt-ui-icon-back {
    flex-basis: 31px;
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .nrmt-ui-ornate-button,
  body .nrmt-ui-ornate-card { transition: none !important; }
}