/*
 * duels/polish.css — interactive affordance polish for /duels
 * Scoped to html[data-route="/duels"] — no bleed to other routes.
 * Polish bundle 2026-06-09.
 */

/* ── Slide-up animation for duel-detail-overlay ── */
@keyframes duels-slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

html[data-route="/duels"] {

  /* ----------------------------------------------------------
     SMACK / CTA / SEND — :active scale + :focus-visible outline
     ---------------------------------------------------------- */
  .dm-smack,
  .dh-cta,
  .tt-send {
    transition: filter .15s ease, transform .1s ease;
  }

  .dm-smack:active,
  .dh-cta:active,
  .tt-send:active {
    transform: scale(0.96);
  }

  .dm-smack:focus-visible,
  .dh-cta:focus-visible,
  .tt-send:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* ----------------------------------------------------------
     DUEL DETAIL OVERLAY — slide-up entrance on show
     The overlay uses [hidden] / aria-hidden toggled by JS.
     When it becomes visible (hidden attr removed), the modal
     card gets the slideUp animation.
     ---------------------------------------------------------- */
  .duel-detail-overlay:not([hidden]) .duel-detail-modal {
    animation: duels-slideUp .3s cubic-bezier(.16,1,.3,1) both;
  }

  /* ----------------------------------------------------------
     CREATE-FORM INPUTS — replace outline:none with proper focus
     .cf-input and .cf-select: 2px nil-green outline + border
     ---------------------------------------------------------- */
  .cf-input,
  .cf-select {
    outline: none; /* cleared here so :focus-visible can override */
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .cf-input:focus,
  .cf-select:focus {
    outline: 2px solid var(--nil-green, #00C853);
    outline-offset: 0;
    border-color: var(--nil-green, #00C853);
  }

}

/* prefers-reduced-motion: disable slideUp */
@media (prefers-reduced-motion: reduce) {
  html[data-route="/duels"] .duel-detail-overlay:not([hidden]) .duel-detail-modal {
    animation: none;
  }
}