/*
 * 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 sanctioned-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(--green-positive, #3DBA6E);
    outline-offset: 0;
    border-color: var(--green-positive, #3DBA6E);
  }

}

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

/* ----------------------------------------------------------------------
   HEAD-TO-HEAD panel header wrap (AUD-35, SITE-AUDIT-2026-07-02 P1)
   core.css's sitewide fluid type-ramp rule
   (`.card-title,h2.card-title{font-size:var(--fs-fluid-h2,...)!important}`)
   lives inside `@layer components`; per the CSS cascade spec, layered
   !important beats unlayered !important, so a plain override here can't
   win. Match it in the SAME layer with higher specificity + !important
   so the duels-card header renders on one line at 390 instead of wrapping
   into "HEAD-TO-\nHEAD" beside a wrapped "NEW\nDUEL" button.
   ---------------------------------------------------------------------- */
@layer components {
  html[data-route="/duels"] .duels-card .card-title,
  html[data-route="/duels"] .duels-card h2.card-title {
    font-size: 18px !important;
  }
}