/* Shared cinnabar seal treatment for rectangular actions.  The buttons keep
   their original layout and wording; this only gives them the same hand-cut
   seal character as the name-card actions. */
:root {
  --seal-red: #a24d3d;
  --seal-red-dark: #8f3e30;
  --seal-paper: #f7edda;
}

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
) {
  --seal-tilt: -1.2deg;
  position: relative;
  border: 2px solid var(--seal-red) !important;
  border-radius: 3px 2px 4px 2px !important;
  background: var(--seal-paper) !important;
  color: var(--seal-red) !important;
  font-family: var(--brush, 'CoverBrush', 'KaiTi', 'STKaiti', serif);
  box-shadow:
    inset 0 0 0 2px var(--seal-paper),
    inset 0 0 0 3px rgb(162 77 61 / 28%),
    0 2px 0 rgb(92 48 37 / 14%);
  transform: rotate(var(--seal-tilt));
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
)::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 1px 3px 1px 2px;
  opacity: .55;
  pointer-events: none;
}

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
)::after {
  content: '';
  position: absolute;
  inset: 2px;
  pointer-events: none;
  opacity: .48;
  background: repeating-linear-gradient(9deg, transparent 0 7px, rgb(140 55 42 / 8%) 7px 8px);
  mix-blend-mode: multiply;
}

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
):hover:not(:disabled),
:is(.ending-actions a, .failure a):hover {
  color: var(--seal-red-dark) !important;
  background: #fff4df !important;
  box-shadow:
    inset 0 0 0 2px #fff4df,
    inset 0 0 0 3px rgb(162 77 61 / 36%),
    0 3px 0 rgb(92 48 37 / 17%);
  transform: translateY(-1px) rotate(var(--seal-tilt));
}

:is(.primary-action, .brush-action, .save-button, .ending-actions button, .ending-actions a) {
  --seal-tilt: -1.8deg;
  color: #fff4df !important;
  border-color: var(--seal-red-dark) !important;
  background-color: var(--seal-red) !important;
  background-image: repeating-linear-gradient(9deg, transparent 0 7px, rgb(255 243 220 / 7%) 7px 8px) !important;
  box-shadow:
    inset 0 0 0 2px var(--seal-red),
    inset 0 0 0 3px rgb(255 243 220 / 26%),
    0 2px 0 rgb(92 48 37 / 22%);
}

:is(.primary-action, .brush-action, .save-button, .ending-actions button, .ending-actions a)::before {
  opacity: .7;
}

:is(.primary-action, .brush-action, .save-button, .ending-actions button, .ending-actions a):hover:not(:disabled) {
  color: #fff9e9 !important;
  background-color: var(--seal-red-dark) !important;
  background-image: repeating-linear-gradient(9deg, transparent 0 7px, rgb(255 243 220 / 10%) 7px 8px) !important;
}

:is(.location-action, .location-back, .bounty-action, .npc-actions button, .companion-action) {
  --seal-tilt: -0.8deg;
}

.bounty-card .bounty-action {
  --seal-tilt: -3deg;
  border-width: 2px !important;
  box-shadow:
    inset 0 0 0 2px var(--seal-paper),
    inset 0 0 0 3px rgb(162 77 61 / 24%),
    0 2px 0 rgb(92 48 37 / 12%);
}

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
):disabled {
  opacity: .55;
  cursor: default;
  filter: saturate(.55);
}

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
) > * {
  position: relative;
  z-index: 1;
}

:is(.brush-action, .save-button) span { color: #fff4df !important; }

:is(
  .location-back,
  .location-action,
  .ink-action,
  .bounty-action,
  .battle-command button,
  .inventory-use,
  .pharmacy-buy,
  .relic-forge-action,
  .companion-action,
  .npc-actions button,
  .primary-action,
  .brush-action,
  .save-button,
  .tutorial-setting button,
  .ending-actions button,
  .ending-actions a,
  .retry-map,
  .failure button,
  .material-footer button
):focus-visible {
  outline: 2px solid var(--seal-red);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .location-back,
    .location-action,
    .ink-action,
    .bounty-action,
    .battle-command button,
    .inventory-use,
    .pharmacy-buy,
    .relic-forge-action,
    .companion-action,
    .npc-actions button,
    .primary-action,
    .brush-action,
    .save-button,
    .tutorial-setting button,
    .ending-actions button,
    .ending-actions a,
    .retry-map,
    .failure button,
    .material-footer button
  ) { transition: none; }
}