/* Cut paper edges, ink depth and warm metal details shared by the home actions. */
.dh-premium .dh-button,
.dh-premium .dh-button:hover {
  --action-cut: 9px;
  --action-depth: 4px;
  --action-surface: linear-gradient(165deg, #283e5a, #0d2037 72%);
  --action-line: #a2a48c;
  --action-text: #fff7e4;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--action-text);
  box-shadow: none;
  transform: none;
  translate: 0 0;
  scale: 1;
  text-shadow: 0 1px #06142850;
  letter-spacing: -.015em;
  transition: translate .16s ease, color .16s ease;
}
.dh-premium .dh-button::before,
.dh-premium .dh-button::after {
  content: '';
  position: absolute;
  pointer-events: none;
  transform: none;
  animation: none;
  clip-path: polygon(var(--action-cut) 0, 100% 0, 100% calc(100% - var(--action-cut)), calc(100% - var(--action-cut)) 100%, 0 100%, 0 var(--action-cut));
}
.dh-premium .dh-button::before { inset: 0 0 calc(-1 * var(--action-depth)); z-index: -2; background: #08172d; }
.dh-premium .dh-button::after { inset: 3px; z-index: -1; background: var(--action-surface); box-shadow: inset 0 0 0 1px var(--action-line); }
.dh-premium .dh-button:hover::after { animation: none; }
.dh-premium .dh-button > svg { transition: translate .16s ease; }
.dh-premium .dh-button > svg:last-child { stroke-width: 2.2; }
.dh-premium .dh-actions .dh-yellow,
.dh-premium .dh-actions .dh-yellow:hover {
  --action-surface: linear-gradient(170deg, #ffe9ab, #ffd35a 43%, #efb727);
  --action-text: #102038;
  --action-line: #fff0b2;
  text-shadow: 0 1px #fff1b66b;
}
.dh-premium .dh-actions .dh-yellow > svg:last-child { width: 27px; height: 27px; padding: 5px; background: #11243b; color: #ffe6a0; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.dh-premium .dh-actions .dh-outline,
.dh-premium .dh-actions .dh-outline:hover {
  --action-surface: linear-gradient(170deg, #fffcf0e8, #f0dfc0eb), url('/duel/hub-comic-v1/paper.webp') center / 320px;
  --action-line: #b9a57b;
  --action-text: #21354b;
  text-shadow: none;
}
.dh-premium .dh-chaos .dh-button,
.dh-premium .dh-chaos .dh-button:hover { --action-surface: linear-gradient(155deg, #45334f, #18273e 76%); --action-line: #b5a186; color: var(--action-text); }
.dh-premium .dh-mode .dh-button[aria-pressed="true"],
.dh-premium .dh-mode .dh-button[aria-pressed="true"]:hover { --action-surface: linear-gradient(165deg, #ffe8a3, #eec24e); --action-line: #fff1ba; --action-text: #11243b; background: transparent; box-shadow: none; text-shadow: none; }
.dh-premium .dh-utility .dh-button { --action-cut: 7px; padding-inline: 15px; }
.dh-premium .dh-utility .dh-button > svg:last-child { width: 24px; padding-left: 7px; border-left: 1px solid #b9a77a85; }
.dh-premium .dh-change,
.dh-premium .dh-change:hover { min-height: 30px; padding: 4px 1px; border: 0; border-bottom: 1px solid #ad966a; border-radius: 0; background: transparent; color: #23364b; translate: none; gap: 7px; }
.dh-premium .dh-change:hover { color: #8c571c; border-bottom-color: #8c571c; }
.dh-premium .dh-button:focus-visible { outline: 3px solid #1679b2; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .dh-premium .dh-button:hover,
  .dh-premium .dh-mode .dh-button:hover { --action-depth: 6px; translate: 0 -2px; }
  .dh-premium .dh-button:hover::after { filter: brightness(1.08); }
  .dh-premium .dh-button:hover > svg:last-child { translate: 2px 0; }
}
.dh-premium .dh-button:active,
.dh-premium .dh-mode .dh-button:active { --action-depth: 1px; translate: 0 3px; }
.dh-premium .dh-button:active::after { filter: brightness(.96); }
@media (max-width: 900px) {
  .dh-premium .dh-mode .dh-button { --action-cut: 0px; --action-depth: 0px; }
  .dh-premium .dh-mode .dh-button::after { inset: 2px 1px 3px; }
  .dh-premium .dh-coop-select::before { background: #183653; color: #e5edf0; box-shadow: inset 0 0 0 1px #9caeaf66; }
  .dh-premium .dh-coop-select[aria-pressed="true"]::before { background: #102c4d; color: #ffe7a6; border-bottom-color: #edc256; }
}
@media (max-width: 540px) {
  .dh-premium .dh-actions .dh-button { min-height: 46px; }
  .dh-premium .dh-button { --action-cut: 7px; }
  .dh-premium .dh-change { min-height: 32px; }
  .dh-premium .dh-utility .dh-button { min-height: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-premium .dh-button, .dh-premium .dh-button > svg { transition: none; }
  .dh-premium .dh-button:hover, .dh-premium .dh-button:active { translate: none; }
}