/* web-app-only styles, loaded AFTER the shared stylesheet (see index.html's two <link> tags and
   ../../shared/README.md).
 *
 * Everything in here targets a surface the desktop app genuinely does not have: the Patreon-backed
 * profile bling (bling.js is web-only), the Admin tab's overview tiles (admin.js is web-only), and
 * the Commander/Standard format switch (desktop builds Commander decks only). Nothing else belongs
 * here -- if both apps render it, it goes in shared/public/styles.css, because a rule that lives
 * only on this side is a rule the desktop app is silently missing. That failure mode is exactly
 * what splitting this file was meant to end: the two stylesheets used to be hand-mirrored, and the
 * desktop copy had drifted far enough that the whole Synergy Matrix tab rendered unstyled.
 *
 * Load order matters: these come second, so a rule here can extend or override its shared
 * counterpart (see .profile-chip below). None of these selectors are referenced by shared rules, so
 * moving them to the end of the cascade changed nothing.
 */

/* ===== Format toggle / badge -- Commander vs Standard, a web-only feature ===== */
/* Format toggle -- the Build/Edit Deck tab's Commander/Standard switch (#build-format-toggle) and
   My Decks' All/Commander/Standard filter (#decks-format-filter). Both reuse .mana-toggle-row for
   layout (flex + gap) but need a text-label pill rather than a round WUBRG pip, so this gets its
   own button style -- same look as .view-toggle-btn (List/Grid/Card) for visual consistency with
   that other toolbar toggle. */
.format-toggle {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.8571rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.format-toggle:hover { color: var(--text); border-color: var(--text-dim); }

.format-toggle.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Small format badge shown per-deck in My Decks (see decks.js's buildDeckMetaLine) -- distinct
   from the toggle buttons above, this is read-only labeling inline in a deck's meta row. */
.format-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7857rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.format-badge--standard {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== Profile bling: avatar frames, effects, tier badges (see bling.js) ===== */

/* Extends the shared .profile-chip. On desktop the chip holds nothing but the username, so the
   shared rule leaves it as plain inline text; here it wraps an avatar alongside the name (see
   bling.js's renderChip), which needs the flex row. */
.profile-chip {
  display: inline-flex;
  align-items: center;
}

.profile-chip-inner { display: flex; align-items: center; gap: 8px; }
.profile-chip-name { font-weight: 600; color: var(--text); }

/* ---------- Profile bling: avatar frame, border color/glow effects, tier badge (see
   public/bling.js) ---------- */

.avatar-frame {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
}

.avatar-frame-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-input);
  border: 2px solid var(--avatar-border-color, var(--mana-c));
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-frame-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.avatar-prefab-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.72);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}

/* "Soft Glow" (Playgroup+) -- a steady colored glow behind the border. */
.avatar-effect--glow .avatar-frame-inner {
  box-shadow:
    0 0 6px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 40%, transparent);
}

/* "Pulsing Glow" (Commander+) -- the same glow, breathing between soft and bright. */
.avatar-effect--pulse .avatar-frame-inner {
  animation: avatar-pulse 2.4s ease-in-out infinite;
}
@keyframes avatar-pulse {
  0%, 100% {
    box-shadow:
      0 0 6px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 55%, transparent),
      0 0 12px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 25%, transparent);
  }
  50% {
    box-shadow:
      0 0 14px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 90%, transparent),
      0 0 28px color-mix(in srgb, var(--avatar-border-color, var(--mana-c)) 55%, transparent);
  }
}

/* "Holo Foil" (Rules Committee) -- ignores the chosen color (see bling.js), always a spinning
   rainbow ring. Lives on a ::before pseudo-element rather than rotating .avatar-frame itself, so
   the avatar image/icon inside stays upright while only the ring spins. The mask cuts a thin band
   out of a solid circle so only the ring (not a full rainbow disc) is visible. */
.avatar-effect--holo .avatar-frame-inner { border-color: var(--bg-panel); }
.avatar-effect--holo::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 0;
  background: conic-gradient(from 0deg, #ff3b3b, #ff8c1a, #ffe066, #39ff6a, #2fb8ff, #b565ff, #ff3b3b);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: avatar-holo-spin 3s linear infinite;
}
@keyframes avatar-holo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .avatar-effect--pulse .avatar-frame-inner, .avatar-effect--holo::before { animation: none; }
}

.tier-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  min-width: 14px;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  line-height: 1;
  border: 1px solid var(--bg-panel);
}
.tier-badge--playgroup { background: #b08d57; color: #2a1f0f; }
.tier-badge--commander { background: #c7cbd4; color: #1a1a1a; }
.tier-badge--rules_committee {
  background: linear-gradient(135deg, #ffd700, #fff2a8);
  color: #3a2c00;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
}

.bling-preview { display: flex; justify-content: center; margin-bottom: var(--space-md); }

.bling-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 var(--space-lg);
}

.bling-avatar-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.bling-avatar-option:hover { border-color: var(--accent); }
.bling-avatar-option .avatar-prefab-icon { font-size: 1.2rem; }

.bling-color-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-sm) 0; }

.bling-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.bling-color-swatch.active { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent); }

.bling-effect-options { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-sm) 0; }
.bling-effect-option:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Admin tab overview tiles (see admin.js) ===== */
/* ---------- Admin tab (see public/admin.js) ---------- */

.admin-section-toolbar { margin-top: 24px; }

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.admin-stat-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-stat-value { font-size: 1.5rem; font-weight: 700; }

.admin-stat-label {
  font-size: 0.8571rem;
  color: var(--text-dim);
}

/* ===== Admin tab row actions (see admin.js) ===== */

.admin-row-actions { display: flex; gap: 6px; }