/* ============================================================================
   Duel Hall Tools — shared UI polish
   Loaded AFTER each tool's own inline <style>, so these win on the classes
   they touch. Frosted-glass button language, matched to the games site
   (duelhall.com). Relies on the custom props every tool already declares:
   --text --muted --border --border-hover --accent --accent2 --accent-glow.

   Only standalone buttons are restyled here. Segmented / toggle controls
   (.mode-btn, .tab-btn, .nav-btn, .angle-btn) are deliberately left to each
   tool — they already read as modern and their layouts are hand-tuned.
   ========================================================================== */

/* ---- "← Tools" back link : frosted-glass pill ---- */
.back-link{
  border-radius:999px !important;
  padding:7px 15px 7px 12px !important;
  border:1px solid color-mix(in srgb, var(--text) 13%, transparent) !important;
  background:color-mix(in srgb, var(--text) 4%, transparent) !important;
  color:var(--muted) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.35);
  backdrop-filter:blur(10px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:background .16s, border-color .16s, color .16s;
}
.back-link:hover{
  background:color-mix(in srgb, var(--text) 9%, transparent) !important;
  border-color:color-mix(in srgb, var(--accent) 45%, transparent) !important;
  color:var(--text) !important;
}
.back-link svg{ transition:transform .16s ease; }
.back-link:hover svg{ transform:translateX(-2px); }

/* ---- primary action buttons : glassy accent ---- */
.btn-primary{
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             0 10px 28px -12px color-mix(in srgb, var(--accent) 60%, transparent) !important;
}

/* ---- outline / ghost / header auth buttons : frosted ---- */
.link-btn,
.btn-ghost,
.auth-btn,
.account-btn{
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent) !important;
  background:color-mix(in srgb, var(--text) 4%, transparent) !important;
  transition:background .16s, border-color .16s, color .16s;
}
.link-btn:hover,
.btn-ghost:hover,
.auth-btn:hover,
.account-btn:hover{
  background:color-mix(in srgb, var(--text) 9%, transparent) !important;
  border-color:color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

/* graceful fallback where color-mix is unsupported (older engines) */
@supports not (background: color-mix(in srgb, white, black)){
  .back-link,
  .link-btn, .btn-ghost, .auth-btn, .account-btn{
    background:var(--panel-solid, #fff) !important;
    border-color:var(--border) !important;
  }
}