/* Load after combat-polish.css. Keep layout and input rules in their existing sheets. */
:root {
  --button-brass: #b4965e;
  --button-brass-light: #e6ca90;
  --button-body: #172533;
  --button-enamel: #35495c;
  --button-ink: #f4ebd9;
}

:is(.primary-button, .utility, .action-skill, .reward-card, .archive-close, .text-button, .modal-close,
    .wish-button, .sanctuary-actions button, .collection-tabs button, .collection-pagination button,
    .equip-options button, .form-history button, .touchpad button, .load-error button) {
  --edge: var(--button-brass);
  --edge-glint: #edce8f4c;
  --valley: #08121c;
  --face: var(--button-body);
  --crown: var(--button-enamel);
  --rivet: #d0ac7354;
  --button-relief: inset 0 1px var(--edge-glint), inset 0 0 0 3px #08111b52,
    0 2px 0 #080d15, 0 5px 11px #0005;
  color: var(--button-ink);
  border: 1px solid var(--edge);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 50% 0%, #c8d6df17, transparent 58%),
    linear-gradient(163deg, var(--crown), var(--face) 48%, var(--valley));
  box-shadow: var(--button-relief);
  text-decoration: none;
  text-shadow: 0 1px 2px #02050b;
  transition: border-color 140ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out, translate 100ms ease-out;
}

:is(.primary-button, .wish-button.featured) {
  --edge: #e9cc8b;
  --edge-glint: #fff1bd;
  --valley: #826034;
  --face: #bd985b;
  --crown: #e9cd92;
  --rivet: #6647268f;
  --button-relief: inset 0 1px #fff0c2ba, inset 0 0 0 3px #7c5d3357,
    0 3px 0 #4a351d, 0 7px 14px #0006;
  border-radius: 17px 17px 13px 13px;
  border-color: var(--edge);
  background: linear-gradient(173deg,var(--crown),var(--face) 55%,var(--valley));
  box-shadow: var(--button-relief);
  color: #241910;
  text-shadow: 0 1px #ffdfa45c;
}
.wish-button.featured span { color: #352613; }
:is(.primary-button, .action-skill, .wish-button, .sanctuary-actions button)::after {
  display: block;
  inset: 4px;
  border: 1px solid var(--rivet);
  border-radius: inherit;
}
.primary-button::after { border-radius: 12px 12px 9px 9px; }
.primary-button > #start-label { font-size: inherit; }
.wish-button.featured::after { border-color: var(--rivet); }

:is(.utility, .action-skill, .archive-close, .modal-close, .collection-pagination button, .touchpad button) {
  border-radius: 12px;
}
:is(.text-button, .collection-tabs button, .equip-options button, .form-history button) {
  --edge: #ab916775;
  --edge-glint: #cec29f3d;
  --crown: #263648;
  --face: #172635;
  border-radius: 11px;
}
.text-button { padding-inline: 10px; }
.summon-topline .text-button { padding-inline: 7px; }
:is(.sanctuary-actions button:first-child,.card-detail .equip-options button) {
  border: 1px solid var(--edge);
  border-radius: 13px;
  background: linear-gradient(163deg,var(--crown),var(--face) 48%,var(--valley));
  box-shadow: var(--button-relief);
}
.reward-card { border-radius: 16px; }
.reward-icon { border-radius: 45%; }
.modal-close { width: 44px; height: 44px; display: grid; place-items: center; }
.card-detail .modal-close { border-radius: 12px; border-color: var(--button-brass); background: linear-gradient(163deg,#35495c,#172533 48%,#08121c); }
.card-detail :is(#evolve-card,#evolution-retry,#evolution-done) { border-radius: 17px 17px 13px 13px; }
.card-detail :is(#evolve-card,#evolution-retry,#evolution-done)::after { border-radius: 12px 12px 9px 9px; }

:is(.utility, .action-skill, .archive-close, .text-button, .modal-close, .wish-button, .reward-card, .sanctuary-actions button,
    .collection-tabs button, .collection-pagination button, .equip-options button, .form-history button, .touchpad button,
    .load-error button):hover:not(:disabled):not([aria-disabled=true]) {
  color: var(--button-ink);
  border-color: var(--button-brass-light);
  box-shadow: var(--button-relief), 0 0 14px #d4ae632d;
  filter: brightness(1.07);
}
:is(.primary-button, .wish-button.featured):hover:not(:disabled):not([aria-disabled=true]) { color: #241910; }
:is(.primary-button, .utility, .action-skill, .reward-card, .archive-close, .text-button, .modal-close,
    .wish-button, .sanctuary-actions button, .collection-tabs button, .collection-pagination button,
    .equip-options button, .form-history button, .touchpad button, .load-error button):active:not(:disabled):not([aria-disabled=true]) {
  translate: 0 2px;
  filter: brightness(.92);
  box-shadow: inset 0 2px 7px #050b13bb, inset 0 0 0 3px #171b205c, 0 1px 0 #060b12;
}
:is(.utility, .text-button, .collection-tabs button, .equip-options button, .form-history button):is([aria-pressed=true], [aria-selected=true]) {
  --edge: #e2bc77;
  --crown: #45556a;
  --face: #26384a;
  --button-relief: inset 0 1px #fff0b061, inset 0 0 0 3px #b5935746,
    0 2px 0 #101018, 0 0 10px #cba75d24;
}
:is(.primary-button, .utility, .action-skill, .reward-card, .archive-close, .text-button, .modal-close,
    .wish-button, .sanctuary-actions button, .collection-tabs button, .collection-pagination button,
    .equip-options button, .form-history button, .touchpad button, .load-error button):is(:disabled,[aria-disabled=true]) {
  --edge: #626b74;
  --edge-glint: #d8e3ec26;
  --valley: #101821;
  --face: #1e2b39;
  --crown: #2c3b49;
  --rivet: #b4bdc52b;
  opacity: 1;
  color: #a5b1bf;
  border-color: var(--edge);
  background: linear-gradient(162deg,var(--crown),var(--face) 48%,var(--valley));
  box-shadow: inset 0 1px var(--edge-glint), inset 0 0 0 3px #08111b45;
  text-shadow: none;
}
.wish-button.featured:disabled span { color: #a5b1bf; }

/* Map nodes are small pieces of engraved brass on the original route. */
#stage-options .stage-card {
  border-radius: 43%;
  border-color: color-mix(in srgb, var(--stage) 50%, #857453);
  background: radial-gradient(ellipse at 44% 25%, #3f5166, #203144 52%, #0e1827 82%);
  box-shadow: inset 0 1px #eed3a35c, inset 0 0 0 3px #b7995c47, 0 2px #070c14, 0 4px 10px #0008;
}
#stage-options .stage-card:is(:hover,[aria-pressed=true]) { border-color: var(--button-brass-light); }
#stage-options .stage-card[aria-pressed=true] {
  background: radial-gradient(ellipse at 43% 25%, color-mix(in srgb,var(--stage) 31%,#40566d), #273349 56%, #111b2a 85%);
  box-shadow: inset 0 1px #ffedbc91, inset 0 0 0 3px #e4c38069, 0 2px #070c14,
    0 0 0 3px #e7bf693e, 0 0 15px color-mix(in srgb,var(--stage) 43%,transparent);
}
#stage-options .stage-card:active { box-shadow: inset 0 2px 8px #000c, inset 0 0 0 3px #ad95594f; }

/* Art-backed buttons use the same frame and offset without painting over the art. */
button:is(.collectible,.spirit-card,.flip-card), .combat-card-slot .skill-card, .contract-slot button.collectible {
  border-radius: 10px;
}
button:is(.collectible,.spirit-card,.flip-card) :is(.card-front,.card-back,.card-art),
.combat-card-slot .skill-card :is(.card-front,.card-art) { border-radius: inherit; }
.combat-card-slot .skill-card {
  border-color: color-mix(in srgb,var(--element) 50%,#ceb078);
  box-shadow: inset 0 0 0 2px #d9bb7b70, 0 0 0 2px #0c1622, 0 0 0 3px #af946484, 0 6px 13px #0009;
}
.combat-card-slot .skill-card.skill-ready { border-color: #fff1b6; box-shadow: 0 0 0 2px #d9b97fac, 0 0 16px #ffd7856b; }
.combat-card-slot .skill-card:disabled:not(.no-mana) { opacity: 1; }
button:is(.collectible,.spirit-card,.flip-card):active:not(:disabled) { filter: brightness(.93); }
button.summon-gem { border-radius: 12px; }
button.summon-gem::before {
  content: "";
  grid-area: 1 / 1;
  width: 33px;
  height: 33px;
  border: 1px solid #a78c5c59;
  border-radius: 10px;
  background: radial-gradient(circle at 43% 27%, #344455, #192431 58%, #0f1723);
  box-shadow: inset 0 1px #e5cc9c40, inset 0 0 0 3px #080e18a0, 0 2px 0 #080d15;
}
button.summon-gem > i { grid-area: 1 / 1; z-index: 1; }
button.summon-gem[aria-current=step]::before { border-color: var(--button-brass-light); }
button.summon-gem:active:not(:disabled)::before { box-shadow: inset 0 2px 7px #000b; }

button:focus-visible { outline: 2px solid #cdefff; outline-offset: 3px; }
.ui-glyph {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.1em;
  flex: none;
  pointer-events: none;
}
:is(.modal-close,.collection-pagination button,.reward-icon,.result-symbol,.brand-seal,.nova-orbit) .ui-glyph {
  width: 1.15em;
  height: 1.15em;
}
#close-archive .ui-glyph { width: 18px; height: 18px; }
.touchpad [data-move=KeyA] .ui-glyph { rotate: -90deg; }
.touchpad [data-move=KeyS] .ui-glyph { rotate: 180deg; }
.touchpad [data-move=KeyD] .ui-glyph { rotate: 90deg; }
@media (prefers-reduced-motion:reduce) {
  :is(.primary-button, .utility, .action-skill, .reward-card, .archive-close, .text-button, .modal-close,
      .wish-button, .sanctuary-actions button, .collection-tabs button, .collection-pagination button,
      .equip-options button, .form-history button, .touchpad button, .load-error button):active { translate: none; }
}