/* Badge Collection Dashboard — ChildSafe Online */

:root{
  --bg:#0F1923;--bg-card:#172A3A;--bg-input:#1E3648;
  --text:#E8F1F8;--text-dim:#8BA4B8;--text-faint:#3D5A6E;
  --cyan:#00E5FF;--green:#39FF14;--yellow:#FFD600;--orange:#FF9100;--red:#FF1744;--purple:#D500F9;
  --border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* BG */
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}
.bg-orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.12;pointer-events:none;z-index:0}
.bg-orb:nth-child(1){width:400px;height:400px;background:var(--cyan);top:-100px;left:-80px;animation:oF 22s ease-in-out infinite}
.bg-orb:nth-child(2){width:300px;height:300px;background:var(--purple);bottom:-60px;right:-80px;animation:oF 26s ease-in-out infinite reverse}
.bg-orb:nth-child(3){width:250px;height:250px;background:var(--yellow);top:40%;right:10%;animation:oF 20s ease-in-out infinite 5s}
@keyframes oF{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes unlockPop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 15px rgba(0,229,255,.15)}50%{box-shadow:0 0 30px rgba(0,229,255,.3)}}
@keyframes confetti{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(-100px) rotate(720deg);opacity:0}}

.container{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:24px 16px 40px}

/* Header */
.header{text-align:center;margin-bottom:28px;animation:fadeUp .5s}
.header-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.2);border-radius:50px;font-size:12px;font-weight:700;color:var(--cyan);margin-bottom:12px;letter-spacing:.5px}
.header-mascot{font-size:56px;animation:bounce 2.5s ease-in-out infinite;margin-bottom:8px}
.header h1{font-family:'Lilita One',cursive;font-size:36px;background:linear-gradient(135deg,var(--cyan),var(--green),var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.header p{font-size:15px;color:var(--text-dim);max-width:500px;margin:0 auto;line-height:1.5}

/* Hero Stats */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;animation:fadeUp .5s .1s both}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px 14px;text-align:center;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat-card:nth-child(1)::before{background:linear-gradient(90deg,var(--cyan),var(--green))}
.stat-card:nth-child(2)::before{background:linear-gradient(90deg,var(--yellow),var(--orange))}
.stat-card:nth-child(3)::before{background:linear-gradient(90deg,var(--purple),var(--cyan))}
.stat-num{font-family:'Lilita One',cursive;font-size:32px;line-height:1}
.stat-card:nth-child(1) .stat-num{color:var(--cyan)}
.stat-card:nth-child(2) .stat-num{color:var(--yellow)}
.stat-card:nth-child(3) .stat-num{color:var(--purple)}
.stat-label{font-size:11px;color:var(--text-dim);font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* Overall Progress */
.progress-section{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:28px;animation:fadeUp .5s .15s both}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.progress-title{font-family:'Lilita One',cursive;font-size:16px;color:var(--text)}
.progress-pct{font-family:'Lilita One',cursive;font-size:20px;color:var(--cyan)}
.progress-track{height:12px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.progress-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--green),var(--yellow));background-size:200% 100%;animation:shimmer 3s ease-in-out infinite;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.progress-rank{text-align:center;margin-top:12px}
.rank-label{font-size:13px;color:var(--text-dim)}
.rank-name{font-family:'Lilita One',cursive;font-size:18px;margin-top:2px}

/* Section Title */
.section-title{font-family:'Lilita One',cursive;font-size:20px;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* Tool Cards Grid */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:32px;animation:fadeUp .5s .2s both}
.tool-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;overflow:hidden;transition:all .3s;cursor:pointer;text-decoration:none;color:var(--text);display:block}
.tool-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.tool-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.tool-icon{font-size:32px}
.tool-status{padding:3px 10px;border-radius:50px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.status-done{background:rgba(57,255,20,.1);color:var(--green);border:1px solid rgba(57,255,20,.2)}
.status-new{background:rgba(0,229,255,.1);color:var(--cyan);border:1px solid rgba(0,229,255,.2)}
.status-todo{background:rgba(255,255,255,.05);color:var(--text-faint);border:1px solid rgba(255,255,255,.08)}
.tool-name{font-family:'Lilita One',cursive;font-size:16px;margin-bottom:4px}
.tool-desc{font-size:12px;color:var(--text-dim);line-height:1.5}
.tool-badge-row{display:flex;gap:4px;margin-top:10px;flex-wrap:wrap}
.mini-badge{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:all .3s}
.mini-badge.earned{background:rgba(255,214,0,.12);border-color:rgba(255,214,0,.25);animation:unlockPop .5s both}

/* Color-code each tool */
.tool-password::before{background:linear-gradient(90deg,var(--cyan),var(--green))}
.tool-phishing::before{background:linear-gradient(90deg,var(--cyan),var(--yellow))}
.tool-privacy::before{background:linear-gradient(90deg,var(--purple),var(--cyan))}
.tool-story::before{background:linear-gradient(90deg,var(--orange),var(--yellow))}
.tool-website::before{background:linear-gradient(90deg,var(--cyan),var(--green))}
.tool-scamguard::before{background:linear-gradient(90deg,var(--red),var(--orange))}
.tool-cyberbuddy::before{background:linear-gradient(90deg,var(--purple),var(--cyan))}

/* Badge Collection */
.badges-section{margin-bottom:32px;animation:fadeUp .5s .25s both}
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.badge-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center;transition:all .3s;position:relative}
.badge-card.locked{opacity:.35;filter:grayscale(1)}
.badge-card.unlocked{opacity:1;filter:none;border-color:rgba(255,214,0,.2);background:rgba(255,214,0,.03);animation:unlockPop .6s both}
.badge-card.unlocked:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,214,0,.1)}
.badge-icon{font-size:32px;margin-bottom:6px;display:block}
.badge-name{font-size:11px;font-weight:800;color:var(--text);line-height:1.3}
.badge-desc{font-size:9px;color:var(--text-dim);margin-top:2px;line-height:1.3}
.badge-card.locked .badge-icon{font-size:24px}
.badge-lock{position:absolute;top:6px;right:6px;font-size:10px;opacity:.5}

/* Leaderboard / Ranks */
.ranks-section{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:28px;animation:fadeUp .5s .3s both}
.ranks-title{font-family:'Lilita One',cursive;font-size:16px;color:var(--yellow);margin-bottom:14px}
.rank-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;margin-bottom:4px;transition:background .2s}
.rank-row.current{background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.15)}
.rank-icon{font-size:24px;width:32px;text-align:center;flex-shrink:0}
.rank-info{flex:1}
.rank-name-text{font-size:13px;font-weight:800}
.rank-req{font-size:11px;color:var(--text-dim)}
.rank-check{font-size:14px;flex-shrink:0}

/* Actions */
.actions{display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;animation:fadeUp .5s .35s both}
.action-btn{padding:10px 24px;border-radius:12px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s;border:none;display:flex;align-items:center;gap:6px}
.action-btn:hover{transform:translateY(-2px)}
.btn-reset{background:rgba(255,255,255,.06);color:var(--text-dim);border:1px solid var(--border)}
.btn-reset:hover{border-color:var(--red);color:var(--red)}
.btn-share{background:var(--purple);color:#fff}
.btn-share:hover{box-shadow:0 4px 16px rgba(213,0,249,.3)}

/* Footer */
.footer{text-align:center;padding:20px 0;font-size:12px;color:var(--text-faint);border-top:1px solid var(--border)}
.footer a{color:var(--text-dim);text-decoration:none}
.footer a:hover{color:var(--cyan)}
.credit{margin-top:8px;font-size:11px}
.credit a{color:var(--orange);font-weight:700}

/* Confetti */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:confetti 1.5s ease-out forwards}

@media(max-width:600px){
  .header h1{font-size:28px}
  .hero-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .stat-num{font-size:24px}
  .tools-grid{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
}