/* ============================================================
   VBallStars - blocked.css (deferred, non-render-blocking CSS)
   Phase 1.1: externalized inline <style> blocks from header.php
   Loaded via <link media="print" onload="this.media='all'">
   Includes: Global Design Tokens, VBS component library,
   PWA install button styles, Global Premium Component Library.
   ============================================================ */

:root{--purple:#7c3aed;--purple-light:#a78bfa;--purple-dark:#5b21b6;--navy:#0f172a;--slate:#64748b;--border:#e2e8f0;--bg-light:#f8fafc;--radius:16px;--radius-sm:8px;--shadow:0 4px 16px rgba(0,0,0,.04);--shadow-lg:0 16px 32px rgba(0,0,0,.06);--font:system-ui,-apple-system,sans-serif}
.vbs-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:40px;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .25s;cursor:pointer;border:none}
.vbs-btn-primary{background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;box-shadow:0 4px 16px rgba(124,58,237,.25)}
.vbs-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.35)}
.vbs-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all .3s ease}
.vbs-card:hover{box-shadow:var(--shadow-lg);border-color:var(--purple-light);transform:translateY(-3px)}
.vbs-section-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--navy);margin:0 0 .5rem;letter-spacing:-.01em}
.vbs-tag{font-size:.6rem;text-transform:uppercase;letter-spacing:2.5px;color:var(--purple);font-weight:700}
.r{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rs{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.rv{opacity:1!important;transform:translateY(0)!important}
@media(max-width:640px){.r,.rs{transform:translateY(15px)}}
/* Global Hero Component */
.vbs-hero{background:linear-gradient(135deg,#0a1628 0%,#1e3a8a 50%,#0a1628 100%);padding:2.5rem 1.5rem;text-align:center;position:relative;overflow:hidden}
.vbs-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 30% 50%,rgba(139,92,246,.08) 0%,transparent 50%),radial-gradient(circle at 70% 50%,rgba(99,102,241,.06) 0%,transparent 50%);pointer-events:none}
.vbs-hero-content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.vbs-hero h1{font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800;color:#fff;margin:0 0 .5rem;letter-spacing:-.01em}
.vbs-hero p{font-size:clamp(.85rem,1.8vw,.95rem);color:rgba(255,255,255,.75);margin:0 0 1rem;line-height:1.5}
.vbs-hero .vbs-hb{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px}
.vbs-hb span{background:rgba(255,255,255,.12);backdrop-filter:blur(4px);padding:4px 12px;border-radius:100px;font-size:clamp(.5rem,1.2vw,.65rem);font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.06)}
.vbs-progress{max-width:400px;margin:.75rem auto 0}
.vbs-progress-track{height:4px;background:rgba(255,255,255,.2);border-radius:4px;overflow:hidden}
.vbs-progress-bar{height:100%;background:linear-gradient(90deg,#d4af37,#f9e076);border-radius:4px;transition:width .35s ease;width:0%}
.vbs-progress-lbl{display:flex;justify-content:space-between;margin-top:.35rem;font-size:.65rem;color:rgba(255,255,255,.55);font-weight:600}

#pwa-install-button {
display: none;
background: #d4af37;
color: #0a0a0a;
border: none;
padding: 0.5rem 1rem;
border-radius: 60px;
font-weight: 600;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.2s;
min-height: 44px;
}
#pwa-install-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(212,175,55,0.4);
}
#network-status {
display: none;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.network-status.online {
background: #10b981;
color: white;
}
.network-status.offline {
background: #ef4444;
color: white;
}
/* Global Premium Component Library */
.vbs-stat{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;transition:all .3s;position:relative;overflow:hidden}
.vbs-stat:hover{box-shadow:0 8px 24px rgba(0,0,0,.04);border-color:#c4b5fd;transform:translateY(-2px)}
.vbs-stat-num{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;background:linear-gradient(135deg,#1e3a8a,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.vbs-stat-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:#64748b;font-weight:600;margin-bottom:.25rem}
.vbs-card{border-radius:20px;padding:2rem;background:#fff;border:1px solid #e2e8f0;transition:all .35s;display:flex;flex-direction:column}
.vbs-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.04);border-color:#c4b5fd;transform:translateY(-4px)}
.vbs-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:40px;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .25s;cursor:pointer;border:none}
.vbs-btn-primary{background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff}
.vbs-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.25)}
.vbs-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#6d28d9;font-size:.65rem;font-weight:700;border:1px solid #e4d5f7}
.vbs-bar{height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}
.vbs-bar-fill{height:100%;background:linear-gradient(135deg,#7c3aed,#6366f1);border-radius:3px;transition:width .35s ease}
.vbs-accent-top{border-top:4px solid #7c3aed}
.vbs-accent-amber{border-top-color:#d97706}
.vbs-accent-gold{border-top-color:#b8860b}