/* BestWebComp dashboard popup + winner badges. Scoped class names only — safe to load on the dashboard. */
/* Light by default (site default); dark themes get the dark card. */
.bwcp-back, .bwcp {
  --p-bg1: #ffffff; --p-bg2: #f1ebff; --p-text: #170f3a; --p-dim: #55507a; --p-li: #2b2352; --p-chip: rgba(123,0,255,.07); --p-chipline: rgba(123,0,255,.2);
  --p-t1: #6d28d9; --p-t2: #0a86a8; --p-t3: #d61fc4; --p-t4: #c2570c; --p-tag: #0a86a8; --p-gold: #b45309; --p-overlay: radial-gradient(circle at 50% 40%, rgba(150,110,255,.35), rgba(30,15,70,.6)); --p-x: rgba(23,15,58,.08); --p-xline: rgba(23,15,58,.18); --p-shadow: rgba(123,0,255,.45);
}
:root[data-theme="dark"] .bwcp-back, :root[data-theme="dark"] .bwcp {
  --p-bg1: #1a0b45; --p-bg2: #0b0724; --p-text: #f4f2ff; --p-dim: #c9c3ec; --p-li: #e4e0ff; --p-chip: rgba(255,255,255,.06); --p-chipline: rgba(255,255,255,.12);
  --p-t1: #c4a1ff; --p-t2: #22d3ee; --p-t3: #ff3df2; --p-t4: #ffd24a; --p-tag: #22d3ee; --p-gold: #ffd24a; --p-overlay: radial-gradient(circle at 50% 40%, rgba(80,20,160,.55), rgba(3,1,14,.9)); --p-x: rgba(255,255,255,.08); --p-xline: rgba(255,255,255,.2); --p-shadow: rgba(139,61,255,.85);
}
@keyframes bw-shift { to { background-position: 220% 0; } }
/* ============ DASHBOARD POPUP: "The BestWebComp is here!!!" ============ */
.bwcp-back { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: var(--p-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: bwcp-fade .35s ease-out both; overflow: hidden; font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
@keyframes bwcp-fade { from { opacity: 0; } }
.bwcp-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bwcp-conf i { position: absolute; top: -20px; width: 9px; height: 16px; border-radius: 2px; animation: bwcp-fall linear infinite; }
@keyframes bwcp-fall { to { transform: translateY(110vh) rotate(720deg); } }
.bwcp { position: relative; width: min(94vw, 520px); max-height: 92vh; overflow: auto; text-align: center; color: var(--p-text); padding: 34px 26px 26px; border-radius: 30px; background: linear-gradient(165deg, var(--p-bg1) 0%, var(--p-bg2) 100%); isolation: isolate; box-shadow: 0 30px 120px -20px var(--p-shadow); animation: bwcp-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bwcp-pop { from { opacity: 0; transform: scale(.7) rotate(-3deg); } }
.bwcp::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 32px; background: conic-gradient(from var(--bwcp-x), #8b3dff, #22d3ee, #ff3df2, #ffd24a, #8b3dff); animation: bwcp-spin 4s linear infinite; }
.bwcp::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 28px; background: linear-gradient(165deg, var(--p-bg1) 0%, var(--p-bg2) 100%); }
@keyframes bwcp-spin { to { --bwcp-x: 360deg; } }
@property --bwcp-x { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bwcp-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--p-xline); background: var(--p-x); color: var(--p-text); font-size: 20px; line-height: 1; cursor: pointer; }
.bwcp-x:hover { background: var(--p-xline); }
.bwcp-trophy { font-size: 64px; line-height: 1; margin-bottom: 6px; animation: bwcp-trophy 1.8s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(255,210,74,.8)); }
@keyframes bwcp-trophy { 50% { transform: translateY(-8px) rotate(6deg) scale(1.08); } }
.bwcp-tag { display: inline-block; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: 2.4px; color: var(--p-tag); padding: 7px 12px; border: 1px solid var(--p-tag); border-radius: 999px; margin-bottom: 10px; }
.bwcp h2 { margin: 0 0 8px; font-size: clamp(27px, 7.4vw, 38px); line-height: 1.05; font-weight: 800; letter-spacing: -1px; background: linear-gradient(100deg, var(--p-t1), var(--p-t2), var(--p-t3), var(--p-t4)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bw-shift 4s linear infinite; }
.bwcp p.lead { margin: 0 0 16px; color: var(--p-dim); }
.bwcp-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.bwcp-prizes div { padding: 12px 4px; border-radius: 16px; background: var(--p-chip); border: 1px solid var(--p-chipline); }
.bwcp-prizes div:first-child { border-color: rgba(255,210,74,.6); background: rgba(255,210,74,.1); }
.bwcp-prizes b { display: block; font: 800 19px "JetBrains Mono", monospace; }
.bwcp-prizes span { font-size: 11px; color: var(--p-dim); }
.bwcp ul { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; display: grid; gap: 7px; font-size: 14.5px; color: var(--p-li); }
.bwcp ul li::before { content: "⚡"; margin-right: 8px; }
.bwcp-timer { font: 700 14px "JetBrains Mono", monospace; color: var(--p-gold); margin: 0 0 14px; }
.bwcp-go { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 20px; border-radius: 999px; font: 800 16px "Plus Jakarta Sans", sans-serif; color: #fff; text-decoration: none; background: linear-gradient(100deg, #8b3dff, #22d3ee 60%, #ff3df2); background-size: 200% 100%; box-shadow: 0 0 0 0 rgba(139,61,255,.7), 0 10px 34px -6px rgba(139,61,255,.8); animation: bwcp-btn 1.8s infinite, bw-shift 5s linear infinite; }
@keyframes bwcp-btn { 70% { box-shadow: 0 0 0 16px rgba(139,61,255,0), 0 10px 34px -6px rgba(139,61,255,.8); } }
.bwcp-later { margin-top: 10px; background: none; border: 0; color: var(--p-dim); font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; padding: 8px; }
.bwcp-later:hover { color: var(--p-text); }

/* ============ BADGES (1st / 2nd / 3rd in BestWebComp) ============ */
.inline-profile-badge.bwc1 { color: #d99a00; }
.inline-profile-badge.bwc2 { color: #94a3b8; }
.inline-profile-badge.bwc3 { color: #c2570c; }
#profile-modal-backdrop .profile-badge.bwc1,
#profile-modal-backdrop .profile-badge.bwc2,
#profile-modal-backdrop .profile-badge.bwc3 { font-weight: 800; }
#profile-modal-backdrop .profile-badge.bwc1 { color: #92400e; background: linear-gradient(135deg, #fff3b0, #ffc928 60%, #ff9f1a); border-color: transparent; }
#profile-modal-backdrop .profile-badge.bwc2 { color: #1e293b; background: linear-gradient(135deg, #f8fafc, #cbd5e1 60%, #94a3b8); border-color: transparent; }
#profile-modal-backdrop .profile-badge.bwc3 { color: #3b1700; background: linear-gradient(135deg, #ffd7b0, #fb923c 60%, #c2570c); border-color: transparent; }


@media (prefers-reduced-motion: reduce) {
  .bwcp-back *, .bwcp-back, .bwcp::before { animation: none !important; }
}