/* Load last, after collection-growth.css. The rendered plate is a single image shared by all large buttons. */
:root {
  --painted-enamel: url('./assets/ui/enamel-button-v1.png');
  --painted-brass-filter: contrast(.82) sepia(.84) saturate(1.52) brightness(.94);
  --painted-dial-ring: url('./assets/ui/dial-ring.svg');
  --painted-wish-scene: url('./assets/summon/sanctuary-v1.png');
  --painted-ivory: #f0e6cf;
  --painted-subtitle: #cdd5e1;
  --painted-focus: #f7dfa5;
  --painted-return: 180ms;
  --painted-press: 80ms;
}

/* The painted sanctuary stays visible around the caption; its stair highlights
   should not pass through the small contract text or hide unopened positions. */
#wish-reveal .summon-caption {
  padding: 5px 12px 7px;
  border-radius: 14px;
  background: #071121d9;
  max-inline-size: min(100%, 390px);
  margin-inline: auto;
}
#wish-reveal .summon-caption :is(p, span) {
  color: #e5dfd1;
  font-size: 12px;
  line-height: 1.5;
  text-shadow: 0 1px 2px #030711;
}
#wish-reveal .summon-gem:disabled {
  opacity: 1;
  background: #111c2be6;
  border-color: #7b7a7699;
}
#wish-reveal .summon-gem:disabled i {
  border-color: #aeb9c9;
  background: #17263a;
  box-shadow: none;
}
@media (orientation: landscape) and (max-height: 600px) {
  #wish-reveal .summon-caption { padding-block: 3px; }
}

/* Include the existing ID-qualified evolution controls so older chrome cannot overpaint the plate. */
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)) {
  --plate-ink: var(--painted-ivory);
  --plate-subtitle: var(--painted-subtitle);
  --plate-fallback: #141d30;
  --plate-rim-light: #c6aa775e;
  --plate-rim-shadow: #5e4c33a1;
  --plate-round: 19px;
  --plate-effect: brightness(1);
  --plate-light: 1;
  --plate-top: 22px;
  --plate-side: 29px;
  --plate-inset-y: -6px;
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--plate-round);
  background: var(--plate-fallback);
  color: var(--plate-ink);
  text-shadow: none;
  box-shadow: none;
  filter: none;
  transform: none;
  translate: none;
  transition: translate var(--painted-return) ease-out, color 150ms ease-out;
}
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done))::before {
  content: '';
  position: absolute;
  inset: var(--plate-inset-y) -1px;
  z-index: -1;
  pointer-events: none;
  border: solid transparent;
  border-width: var(--plate-top) var(--plate-side);
  border-image: var(--painted-enamel) 294 300 296 300 fill / var(--plate-top) var(--plate-side) stretch;
  clip-path: inset(calc(-1 * var(--plate-inset-y)) 1px round calc(var(--plate-round) - 1px));
  filter: var(--plate-effect) brightness(var(--plate-light));
  transition: filter var(--painted-return) ease-out;
}
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done))::after {
  /* A one-pixel carved contour follows the cropped painting around its curved corners. */
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid;
  border-color: var(--plate-rim-light) var(--plate-rim-shadow) var(--plate-rim-shadow) var(--plate-rim-light);
  border-radius: calc(var(--plate-round) - 1px);
  background: none;
  pointer-events: none;
}
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)):hover:not(:disabled):not([aria-disabled=true]) {
  background: var(--plate-fallback);
  border-color: transparent;
  box-shadow: none;
  color: var(--plate-ink);
  filter: none;
}
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)):active:not(:disabled):not([aria-disabled=true]) {
  --plate-light: .92;
  translate: 0 1px;
  transform: none;
  filter: none;
  box-shadow: none;
  transition-duration: var(--painted-press);
}
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)):active::before { transition-duration: var(--painted-press); }
@media (hover: hover) {
  :is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)):hover:not(:active):not(:disabled):not([aria-disabled=true]) { --plate-light: 1.08; }
}

/* Only the most important action in each surface uses the brass finish. */
:is(#start, #archive-done, #summon-next, #evolution-done, #result-menu, #resume).primary-button, #draw-ten.wish-button {
  --plate-ink: #fff0cc;
  --plate-subtitle: #f1dec0;
  --plate-fallback: #34291f;
  --plate-rim-light: #e7c184ad;
  --plate-rim-shadow: #775b3aa3;
  --plate-effect: var(--painted-brass-filter);
}
#collection-root:has(#wish-tab[aria-selected=true]) #archive-done {
  --plate-ink: var(--painted-ivory);
  --plate-subtitle: var(--painted-subtitle);
  --plate-fallback: #141d30;
  --plate-rim-light: #c6aa775e;
  --plate-rim-shadow: #5e4c33a1;
  --plate-effect: brightness(1);
}
:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)):is(:disabled,[aria-disabled=true]) {
  --plate-ink: #b9bec5;
  --plate-subtitle: #aeb5bc;
  --plate-fallback: #161e28;
  --plate-rim-light: #706b5d6e;
  --plate-rim-shadow: #35352ee3;
  --plate-effect: grayscale(.85) brightness(.61);
  opacity: 1;
  background: var(--plate-fallback);
  border-color: transparent;
  color: var(--plate-ink);
  box-shadow: none;
  filter: none;
  translate: none;
  transform: none;
}
.primary-button > :is(#start-label, span:last-child) { font-size: inherit; }
.wish-actions { align-items: center; }
.wish-actions #draw-one { flex: 0 1 136px; min-block-size: 64px; }
.wish-actions #draw-ten { flex: 0 1 170px; min-block-size: 74px; }
.wish-actions .wish-button { gap: 5px; min-inline-size: 0; padding-inline: 9px; }
.wish-actions .wish-button span {
  color: var(--plate-subtitle);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sanctuary-actions button > span:nth-child(2) { min-inline-size: 0; }
.sanctuary-actions b { color: var(--plate-ink); }
.sanctuary-actions small { color: var(--plate-subtitle); }
.sanctuary-actions .sanctuary-glyph {
  aspect-ratio: 1;
  border-radius: 50%;
  color: inherit;
  background: #080f207a;
  box-shadow: inset 0 1px 3px #000a, inset 0 0 0 1px #8c755457;
  filter: none;
}
.sanctuary-actions .sanctuary-glyph svg { width: 76%; height: 76%; }
#card-detail .equip-options button { --plate-round: 13px; --plate-top: 13px; --plate-side: 11px; --plate-inset-y: -3px; }
#reward-screen .reward-card { --plate-round: 20px; }

#wish-panel .wish-feature { position: relative; isolation: isolate; }
#wish-panel .wish-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--painted-wish-scene) 28% 50% / cover no-repeat;
  opacity: .54;
  filter: brightness(.78) saturate(.84);
  mask-image: linear-gradient(90deg, #000 22%, #000c 42%, #0000 80%);
}
#wish-panel .wish-copy > p:not(.eyebrow) { color: #d8d5cc; }
#wish-panel .wish-copy .wish-hint.wish-error { color: #ffd4bb; }

/* Recessed tools sit inside the stone. They do not reuse the protruding plate. */
:is(.masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button) {
  --key-shadow: inset 0 2px 5px #030610d9, inset 0 -1px #93897628;
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 1px solid #64553c;
  border-radius: 8px;
  background: #121b2c;
  color: #e9ddc2;
  text-shadow: none;
  box-shadow: var(--key-shadow);
  backdrop-filter: none;
  filter: none;
  translate: none;
  transform: none;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out, box-shadow var(--painted-return) ease-out, translate var(--painted-return) ease-out;
}
:is(.masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button):hover:not(:disabled):not([aria-disabled=true]) {
  color: #e9ddc2;
  background: #121b2c;
  border-color: #64553c;
  box-shadow: var(--key-shadow);
  filter: none;
}
:is(.masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button):active:not(:disabled):not([aria-disabled=true]) {
  background: #0d1726;
  translate: 0 1px;
  transform: none;
  filter: none;
  box-shadow: inset 0 3px 6px #02040ddd;
  transition-duration: var(--painted-press);
}
:is(.masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button):is(:disabled,[aria-disabled=true]) {
  color: #a5acb4;
  border-color: #4b473e;
  background: #161e28;
  box-shadow: inset 0 1px 3px #06080d90;
}
.masthead .utility[aria-pressed=true]:not(:disabled) { color: #ffe9b6; border-color: #aa8d57; }
@media (hover: hover) {
  :is(.masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button):hover:not(:disabled):not([aria-disabled=true]) {
    color: #fff1cf;
    border-color: #9c8253;
  }
  .masthead .utility[aria-pressed=true]:hover:not(:disabled):not([aria-disabled=true]) { border-color: #cbb077; }
}

.collection-tabs { border: 0; border-bottom: 1px solid #6a59403d; border-radius: 0; background: none; }
.collection-tabs::before { display: none; }
.collection-tabs button:is(:active, :hover, [aria-selected]) {
  min-block-size: 44px;
  padding: 9px 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: #bfc7d0;
  text-shadow: none;
  box-shadow: none;
  filter: none;
  translate: none;
  transform: none;
}
.collection-tabs button[aria-selected=true] { color: #fae6b8; border-bottom-color: #c2a16c; box-shadow: inset 0 -1px #221b11; }
@media (hover: hover) {
  .collection-tabs button:hover:not([aria-selected=true]):not(:disabled) { color: #f4eada; }
}

/* Keep map positions fixed. Only the selected node receives the engraved dial. */
#stage-options .stage-card[aria-pressed] {
  border-color: #71644e;
  border-radius: 50%;
  background: #161b29;
  box-shadow: inset 0 2px 4px #0a101acf;
  transition: translate var(--painted-return) ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
#stage-options .stage-card .stage-symbol {
  color: color-mix(in srgb, var(--stage) 40%, #cabf9f);
  filter: none;
  text-shadow: none;
}
#stage-options .stage-card .stage-copy b { color: #d2cbbb; font-weight: 500; text-shadow: 0 1px 3px #040810; }
#stage-options .stage-card[aria-pressed=true] {
  border-color: #e4c78e;
  background: #252e48;
  box-shadow: inset 0 1px #f2d69f66, inset 0 -2px 0 #101724;
}
#stage-options .stage-card[aria-pressed=true]::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--painted-dial-ring) center / contain no-repeat;
  pointer-events: none;
}
#stage-options .stage-card[aria-pressed=true] .stage-symbol { color: color-mix(in srgb, var(--stage) 62%, #ffe9b8); }
#stage-options .stage-card[aria-pressed=true] .stage-copy b { color: #ffe6b1; font-weight: 600; }
#stage-options .stage-card[aria-pressed]:active { translate: 0 1px; box-shadow: inset 0 3px 6px #050a12ed; transition-duration: var(--painted-press); }
#stage-options .stage-endless .stage-copy {
  top: 50%;
  right: calc(100% + 7px);
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}
@media (hover: hover) { #stage-options .stage-card[aria-pressed=false]:hover { border-color: #baa277; } }

#test-stars-toggle.text-button { min-block-size: 44px; border: 0; background: none; box-shadow: none; text-shadow: none; color: #c9d5e2; text-decoration: underline; text-underline-offset: 4px; filter: none; }
.archive-screen { scrollbar-width: thin; scrollbar-color: #826e4d #101a27; }
.archive-footer { background-color: #101a27; }

:is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button, .collection-tabs button, #stage-options .stage-card):focus-visible {
  outline: 2px solid var(--painted-focus);
  outline-offset: 3px;
}
#stage-options .stage-card:focus-visible { outline-offset: 7px; }

@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) {
  :is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)) {
    --plate-top: 17px;
    --plate-side: 20px;
    --plate-inset-y: -5px;
    --plate-round: 16px;
  }
  :is(.departure .primary-button, .archive-footer .primary-button, .masthead .utility, .collection-tabs button, .wish-actions .wish-button span) { font-size: 12px; }
  #quality span { font-size: 12px; }
  :is(.departure .deck-summary p, .selection-label, .contract-slot > span, .route-note .stage-description, #stage-difficulty, .stage-heading > span:last-child, .archive-footer > span, .archive-close small, #test-stars-toggle.text-button) { font-size: 12px; }
  .departure .deck-summary > * { min-inline-size: 0; overflow-wrap: anywhere; }
  .archive-footer > span { min-inline-size: 0; }
  #stage-options .stage-card .stage-copy b { font-size: 12px; }
  .wish-actions #draw-one { min-block-size: 56px; }
  .wish-actions #draw-ten { min-block-size: 66px; }
  .wish-actions .wish-button strong { font-size: 14px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  #wish-panel .wish-feature::before {
    background-position: 50% 42%;
    mask-image: linear-gradient(#000 15%, #000b 36%, #0000 69%);
  }
}
@media (max-width: 380px) and (orientation: portrait) {
  :is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done)) { --plate-side: 17px; }
  .wish-actions { gap: 8px; }
  .wish-actions .wish-button { padding-inline: 6px; }
  .wish-actions .wish-button strong { letter-spacing: .045em; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done), .masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button, #stage-options .stage-card)[class]:active:not(:disabled) {
    translate: none;
    transition: none;
  }
  :is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done), .masthead .utility, .archive-close, .collection-modal .modal-close, .card-detail .modal-close, .collection-pagination button, .exchange-quantity .text-button, #stage-options .stage-card) { transition: color 120ms ease-out, border-color 120ms ease-out; }
  :is(.primary-button, .wish-button, .sanctuary-actions button, .card-detail .equip-options button, .reward-card, .card-detail :is(#evolve-card, #evolution-retry, #evolution-done))::before { transition: none; }
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 600px) {
  /* Leave room for the 44px close target, including its right inset. */
  #wish-reveal .summon-topline { padding-inline-end: 50px; gap: 8px; }
  #wish-reveal :is(.summon-mode, .summon-status, .summon-topline .text-button) {
    font-size: 12px;
    line-height: 1.45;
  }
  #wish-reveal :is(.summon-mode, .summon-topline .text-button) {
    min-inline-size: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #wish-reveal .summon-topline .text-button {
    min-block-size: 44px;
    text-align: end;
  }
}