/* ═══════════════════════════════════════
   WOBAZI — Tier badges (public/js/tier-badge.js). Bump ?v= wherever this file is linked
   (head.ejs, app/index.html).

   Premium (html.wz-premium, set only from /api/me/entitlements): the member's own avatars get
   a rotating purple → pink → blue ring and a shimmering "PREMIUM" pill — on the header
   avatar (across its bottom edge), next to the name in the menu, and on the Settings photo.
   The ring is a gradient border (padding-box/border-box backgrounds), so it works on the
   header button, the menu <img> and the Settings frame alike. Reduced motion: static.
═══════════════════════════════════════ */

@property --wz-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --wz-p1: #a855f7; /* purple */
  --wz-p2: #ec4899; /* pink */
  --wz-p3: #3b82f6; /* blue */
}

@keyframes wz-spin { to { --wz-angle: 360deg; } }
@keyframes wz-shimmer { to { background-position: 200% 0; } }
@keyframes wz-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.45); }
  50% { box-shadow: 0 0 12px rgba(236, 72, 153, 0.55); }
}

/* ── Ring: header avatar, menu avatar, Settings photo ── */
html.wz-premium .nav-member-btn,
html.wz-premium .drawer-member-avatar,
html.wz-premium .portal-avatar-big {
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--bg, #07070f), var(--bg, #07070f)) padding-box,
    conic-gradient(from var(--wz-angle), var(--wz-p1), var(--wz-p2), var(--wz-p3), var(--wz-p1)) border-box;
  animation: wz-spin 4s linear infinite, wz-glow 3s ease-in-out infinite;
}
html.wz-premium .nav-member-btn { overflow: visible; }
html.wz-premium .nav-member-btn:hover { border-color: transparent; }
html.wz-premium .portal-avatar-big { overflow: visible; }
html.wz-premium .portal-avatar-big img { border-radius: 50%; }

/* ── PREMIUM pill ── */
.tier-tag-premium,
html.wz-premium .nav-member-btn::after,
html.wz-premium .portal-avatar-big::after {
  font-weight: 800; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; color: #fff;
  background: linear-gradient(90deg, var(--wz-p1), var(--wz-p2), var(--wz-p3), var(--wz-p2), var(--wz-p1));
  background-size: 200% 100%;
  border-radius: 999px;
  animation: wz-shimmer 3s linear infinite;
}
html.wz-premium .nav-member-btn::after,
html.wz-premium .portal-avatar-big::after {
  content: 'Premium';
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-size: 7px; padding: 2px 5px;
  box-shadow: 0 0 0 1.5px var(--bg, #07070f);
  pointer-events: none; z-index: 1;
}
html.wz-premium .portal-avatar-big::after { font-size: 9px; padding: 3px 7px; bottom: -10px; }
html[data-lang="zh"].wz-premium .nav-member-btn::after,
html[data-lang="zh"].wz-premium .portal-avatar-big::after { content: '高级'; letter-spacing: 0.1em; }
html[data-lang="th"].wz-premium .nav-member-btn::after,
html[data-lang="th"].wz-premium .portal-avatar-big::after { content: 'พรีเมียม'; letter-spacing: 0; }

/* ── Trial: countdown ring ── */
html.wz-trial .nav-member-btn,
html.wz-trial .drawer-member-avatar,
html.wz-trial .portal-avatar-big {
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--bg, #07070f), var(--bg, #07070f)) padding-box,
    conic-gradient(var(--wz-p1) 0, var(--wz-p2) calc(var(--wz-trial-left, 100%) / 2), var(--wz-p3) var(--wz-trial-left, 100%),
      rgba(255, 255, 255, 0.22) var(--wz-trial-left, 100%)) border-box;
  animation: wz-glow-soft 3s ease-in-out infinite;
}
@keyframes wz-glow-soft {
  0%, 100% { box-shadow: 0 0 4px rgba(168, 85, 247, 0.25); }
  50% { box-shadow: 0 0 9px rgba(236, 72, 153, 0.4); }
}

/* ── Free: silver ring ── */
html.wz-free .nav-member-btn,
html.wz-free .drawer-member-avatar,
html.wz-free .portal-avatar-big {
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--bg, #07070f), var(--bg, #07070f)) padding-box,
    linear-gradient(135deg, #f1f5f9, #94a3b8 45%, #e2e8f0 70%, #64748b) border-box;
}

html.wz-trial .nav-member-btn, html.wz-free .nav-member-btn,
html.wz-trial .portal-avatar-big, html.wz-free .portal-avatar-big { overflow: visible; }
html.wz-trial .nav-member-btn:hover, html.wz-free .nav-member-btn:hover { border-color: transparent; }
html.wz-trial .portal-avatar-big img, html.wz-free .portal-avatar-big img { border-radius: 50%; }

/* ── Guest: dashed ring on the menu button and the menu's ghost avatar ── */
.site-nav-toggle.tier-guest { position: relative; overflow: visible; border: 1px dashed rgba(255, 255, 255, 0.32); }
.drawer-guest-avatar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.32);
  background: var(--w07, rgba(255, 255, 255, 0.07));
  color: var(--muted, #9ca3af);
}
.drawer-guest-avatar .drawer-ico { width: 18px; height: 18px; margin: 0; }
.drawer-guest { margin-bottom: 12px; }

/* ── Pills on the avatar's bottom edge: TRIAL, FREE, GUEST ── */
html.wz-trial .nav-member-btn::after,
html.wz-trial .portal-avatar-big::after,
html.wz-free .nav-member-btn::after,
html.wz-free .portal-avatar-big::after,
.site-nav-toggle.tier-guest::after,
.drawer-guest-avatar::after {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-size: 7px; font-weight: 800; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 5px; border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--bg, #07070f);
  pointer-events: none; z-index: 1;
}
html.wz-trial .portal-avatar-big::after,
html.wz-free .portal-avatar-big::after { font-size: 9px; padding: 3px 7px; bottom: -10px; }

html.wz-trial .nav-member-btn::after,
html.wz-trial .portal-avatar-big::after {
  content: 'Trial';
  color: #f5d0fe;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg, #07070f), var(--bg, #07070f)) padding-box,
    linear-gradient(90deg, var(--wz-p1), var(--wz-p2), var(--wz-p3)) border-box;
}
html.wz-free .nav-member-btn::after,
html.wz-free .portal-avatar-big::after {
  content: 'Free';
  color: #1e293b;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc, #cbd5e1);
}
.site-nav-toggle.tier-guest::after,
.drawer-guest-avatar::after {
  content: 'Guest';
  color: rgba(255, 255, 255, 0.72);
  background: var(--bg, #07070f);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
html[data-lang="zh"].wz-trial .nav-member-btn::after,
html[data-lang="zh"].wz-trial .portal-avatar-big::after { content: '试用'; letter-spacing: 0.1em; }
html[data-lang="th"].wz-trial .nav-member-btn::after,
html[data-lang="th"].wz-trial .portal-avatar-big::after { content: 'ทดลอง'; letter-spacing: 0; }
html[data-lang="zh"].wz-free .nav-member-btn::after,
html[data-lang="zh"].wz-free .portal-avatar-big::after { content: '免费'; letter-spacing: 0.1em; }
html[data-lang="th"].wz-free .nav-member-btn::after,
html[data-lang="th"].wz-free .portal-avatar-big::after { content: 'ฟรี'; letter-spacing: 0; }
html[data-lang="zh"] .site-nav-toggle.tier-guest::after,
html[data-lang="zh"] .drawer-guest-avatar::after { content: '访客'; letter-spacing: 0.1em; }
html[data-lang="th"] .site-nav-toggle.tier-guest::after,
html[data-lang="th"] .drawer-guest-avatar::after { content: 'ผู้เยี่ยมชม'; letter-spacing: 0; }

/* Next to the name in the account menu */
.tier-tag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--gold, #f0c040);
}
.tier-tag[hidden] { display: none; }
.tier-tag.tier-tag-premium { color: #fff; font-size: 9.5px; padding: 3px 7px; vertical-align: 2px; letter-spacing: 0.06em; }
.tier-tag-trial,
.tier-chip {
  color: #f5d0fe;
  border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(var(--bg, #07070f), var(--bg, #07070f)) padding-box,
    linear-gradient(90deg, var(--wz-p1), var(--wz-p2), var(--wz-p3)) border-box;
}
.tier-tag-trial { padding: 2px 7px; }
.tier-tag.tier-tag-free {
  color: #1e293b; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; vertical-align: 2px; border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc, #cbd5e1);
}

/* Trial chip beside the avatar (header). Hidden on small phones — the menu shows it. */
.tier-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 5px 9px;
}
.tier-chip[hidden] { display: none; }
@media (max-width: 479px) { .tier-chip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html.wz-premium .nav-member-btn,
  html.wz-premium .drawer-member-avatar,
  html.wz-premium .portal-avatar-big,
  .tier-tag-premium,
  html.wz-premium .nav-member-btn::after,
  html.wz-premium .portal-avatar-big::after,
  html.wz-trial .nav-member-btn,
  html.wz-trial .drawer-member-avatar,
  html.wz-trial .portal-avatar-big { animation: none; }
}