/* ============================================================
   Components — buttons, badges, chips, cards, tags
   ============================================================ */

/* --- Buttons --- */
.btn {
  --_bg: var(--surface-2);
  --_fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: -0.01em;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--hair-strong);
  transition: transform var(--dur-1) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
  will-change: transform;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(0.97); }
.btn .ico { width: 18px; height: 18px; }

.btn--primary {
  --_bg: var(--gold);
  --_fg: var(--on-primary);
  border-color: transparent;
  box-shadow: var(--sh-gold);
  font-weight: 680;
}
.btn--primary:hover { --_bg: var(--gold-2); box-shadow: 0 16px 56px -16px oklch(0.72 0.15 70 / 0.6); }

.btn--ghost { --_bg: transparent; border-color: var(--line); }
.btn--ghost:hover { --_bg: var(--surface); border-color: var(--line); }

.btn--lg { padding: 1.02rem 1.7rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn__price {
  font-family: var(--font-mono);
  font-size: 0.82em;
  opacity: 0.85;
  padding-left: 0.55rem;
  margin-left: 0.15rem;
  border-left: 1px solid currentColor;
}

/* --- Badge / pill --- */
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.32rem 0.72rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.badge--gold { color: var(--gold); border-color: oklch(0.66 0.15 62 / 0.4); background: oklch(0.66 0.15 62 / 0.10); }
.badge--arcane { color: var(--arcane); border-color: oklch(0.6 0.13 235 / 0.4); background: oklch(0.6 0.13 235 / 0.12); }
.badge--arcane .dot { background: var(--arcane); }
.badge--ember { color: var(--ember); border-color: oklch(0.6 0.2 34 / 0.4); background: oklch(0.6 0.2 34 / 0.12); }
.badge--ember .dot { background: var(--ember); }

/* --- Chip (tag) --- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.66rem;
  border-radius: var(--r-1);
  font-size: 0.8rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

/* --- Panel / card base --- */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.02), transparent 40%),
    var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
}
.panel--pad { padding: clamp(1.3rem, 2.5vw, 1.9rem); }

/* interactive card lift */
.lift {
  transition: transform var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              background-color var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lift:hover {
    transform: translateY(-4px);
    border-color: var(--line);
    box-shadow: var(--sh-3);
  }
}

/* rune / emblem circle for icons */
.rune {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: var(--gold);
  background: radial-gradient(120% 120% at 30% 20%, oklch(0.66 0.15 62 / 0.22), transparent 70%), var(--bg-2);
  border: 1px solid oklch(0.66 0.15 62 / 0.35);
  flex: none;
}
.rune svg { width: 22px; height: 22px; }
.rune--arcane { color: var(--arcane); border-color: oklch(0.6 0.13 230 / 0.4); background: radial-gradient(120% 120% at 30% 20%, oklch(0.6 0.13 230 / 0.22), transparent 70%), var(--bg-2); }

/* number tag */
.num-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  letter-spacing: 0.04em;
}

/* price display */
.price {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.price s { color: var(--faint); text-decoration-thickness: 1px; margin-right: 0.4rem; font-weight: 400; }
.price .cur { font-size: 0.7em; color: var(--muted); }

/* divider dot */
.dot-sep { color: var(--line); padding-inline: 0.5rem; }

/* tooltip-ish helper text */
.hint { color: var(--faint); font-size: var(--step--1); }