/* Paint layer only. Load after collection.css, combat-polish.css and button-art.css.
   The source art reserves its outer 26% on each side for fixed corner detail. */
:root {
  --painted-panel-art: url("./assets/ui/carved-archive-panel-v1.png");
}

:is(.archive-screen, .collection-modal, .reward-panel, .pause-panel, .result-panel) {
  --painted-corner: 31px;
  border-radius: 16px;
  border-color: #ad916b;
  background-color: #141f30;
  background-clip: padding-box;
  border-image: var(--painted-panel-art) 26% fill / var(--painted-corner) / 0 stretch;
  box-shadow: 0 24px 80px #04060cb8;
}

.archive-screen {
  --painted-corner: 37px;
}

/* Keep the stage's lighting gradient visible within the same physical rim. */
.reveal-modal.summon-playing {
  border-image-slice: 26%;
  box-shadow: 0 26px 100px #03050bd8;
}

.reveal-modal[data-phase=summary] .reveal-actions {
  background: linear-gradient(transparent, #141f30 24%);
}

@media (max-width: 700px), (max-height: 510px) {
  :is(.archive-screen, .collection-modal, .reward-panel, .pause-panel, .result-panel) {
    --painted-corner: 24px;
    border-radius: 13px;
  }
  .archive-screen { --painted-corner: 28px; }
}

@media (forced-colors: active) {
  :is(.archive-screen, .collection-modal, .reward-panel, .pause-panel, .result-panel) {
    border-image: none;
    border-color: CanvasText;
    box-shadow: none;
  }
}