/* components.css – Shared Button & Pill Styles (extracted)
   Lightweight layer to reduce inline duplication in play.php wrappers.
*/
:root {
  --sc-btn-bg: var(--ds-color-primary, #3b82f6);
  --sc-btn-bg-hover: var(--ds-color-primary-hover, #2563eb);
  --sc-btn-text: #fff;
  --sc-pill-bg: #1f2937;
  --sc-pill-text: #fff;
}

.sc-btn, .sc-btn-primary { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:12px; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; border:0; background:var(--sc-btn-bg); color:var(--sc-btn-text); transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.sc-btn:hover, .sc-btn-primary:hover { background:var(--sc-btn-bg-hover); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.sc-btn-secondary { background:#64748b; color:#fff; }
.sc-btn-secondary:hover { background:#4b5563; }
.sc-btn-danger { background:#dc2626; color:#fff; }
.sc-btn-danger:hover { background:#b91c1c; }
.sc-pill { background:var(--sc-pill-bg); color:var(--sc-pill-text); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:500; display:inline-flex; align-items:center; }
.sc-pill[data-variant="success"] { background:#16a34a; }
.sc-pill[data-variant="warn"] { background:#d97706; }
.sc-pill[data-variant="info"] { background:#0ea5e9; }

/* Responsive reductions */
@media (max-width:480px){ .sc-pill { display:none; } }