/* Shared decorative frames. Filters apply to the artwork, never the content. */
:root [data-frame] {
  --ui-frame-source: url("/static/frame_1.png");
  --ui-frame-slice: 36;
  --ui-frame-width: 18px;
  --ui-frame-padding: 24px;
  --ui-frame-filter: sepia(1) saturate(1.4) hue-rotate(165deg) brightness(.85);
  position: relative;
  isolation: isolate;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: var(--ui-frame-padding);
}

:root [data-frame="2"] {
  --ui-frame-source: url("/static/frame_2.png");
  --ui-frame-slice: 176 176 88 176;
  --ui-frame-width: 66px 66px 33px 66px;
  --ui-frame-padding: 36px 28px;
}

:root [data-frame="4"] {
  --ui-frame-source: url("/static/frame_4.png");
  --ui-frame-slice: 284 284 88 284;
  --ui-frame-width: 100px 100px 31px 100px;
  --ui-frame-padding: 40px 36px;
}

:root [data-frame="5"] {
  --ui-frame-source: url("/static/frame_5.png");
  --ui-frame-slice: 100 296 76 296;
  --ui-frame-width: 25px 74px 19px 74px;
  --ui-frame-padding: 32px 22px;
}

:root [data-frame]:not([data-frame-layer="element"])::before,
:root [data-frame] > .ui-frame-art {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  transform: none;
  z-index: -1;
  pointer-events: none;
  background: none;
  border: 0 solid transparent;
  border-image: var(--ui-frame-source) var(--ui-frame-slice) / var(--ui-frame-width) / 0 stretch;
  filter: var(--ui-frame-filter);
}

:root [data-frame] > .ui-frame-art { z-index: 2; }

:root [data-frame-tone="vytra"],
:root .altar-team-might--vytra[data-frame] {
  --ui-frame-filter: sepia(1) saturate(2.4) hue-rotate(-10deg) brightness(.9);
}

:root [data-frame-tone="juur"],
:root .altar-team-might--juur[data-frame] {
  --ui-frame-filter: sepia(1) saturate(2.4) hue-rotate(215deg) brightness(.9);
}

:root [data-rank-quad] {
  position: relative;
  isolation: isolate;
  width: fit-content;
  min-width: 48px;
  height: auto;
  min-height: 48px;
  aspect-ratio: 1;
  padding: 6px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 1px 2px #000;
}

:root [data-rank-quad]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/static/quad_1.png") center / contain no-repeat;
  filter: sepia(1) saturate(1.4) hue-rotate(165deg) brightness(.85);
}

:root [data-rank-quad="2"]::before { background-image: url("/static/quad_2.png"); }
:root [data-rank-quad="3"]::before { background-image: url("/static/quad_3.png"); }

.history-number { font-family: Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
:root .shop-grid, :root .inventory-grid { gap: 10px; }

/* Preserve the ritual's positioning and its existing arc layout. */
:root .altar-ritual-heading[data-frame] { position: absolute; }
:root .altar-sanctum[data-frame] { --ui-frame-padding: 0px; }
:root .altar-sanctum[data-frame]::after { content: none; }
:root .altar-phases[data-frame] { --ui-frame-padding: 18px; }
:root .altar-pillar[data-frame] { --ui-frame-padding: 30px 10px 24px; }

@media (max-width: 700px) {
  :root [data-frame="4"] { --ui-frame-padding: 36px 28px; }
  :root .altar-contributor-card[data-frame] { --ui-frame-padding: 30px 12px 24px; }
  :root .altar-pillar[data-frame] { --ui-frame-padding: 28px 6px 22px; }
  :root .altar-top-might[data-frame], :root .altar-team-might[data-frame] { --ui-frame-padding: 36px 20px; }
}