/* Phishing Quiz — ChildSafe Online */

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

.bg-grid { position:fixed; inset:0; background-image:linear-gradient(rgba(0,229,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.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:0.12; pointer-events:none; z-index:0; }
.bg-orb:nth-child(1) { width:350px;height:350px;background:var(--accent-cyan);top:-80px;right:-80px;animation:orbF 20s ease-in-out infinite; }
.bg-orb:nth-child(2) { width:250px;height:250px;background:var(--accent-purple);bottom:-50px;left:-60px;animation:orbF 24s ease-in-out infinite reverse; }
@keyframes orbF { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px)} }

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

/* Header */
.header { text-align:center; margin-bottom:28px; }
.header-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 14px; background:rgba(0,229,255,0.1); border:1px solid rgba(0,229,255,0.2); border-radius:50px; font-size:12px; font-weight:700; color:var(--accent-cyan); margin-bottom:12px; letter-spacing:.5px; }
.header h1 { font-family:'Lilita One',cursive; font-size:40px; background:linear-gradient(135deg,var(--accent-cyan),var(--accent-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:460px; margin:0 auto; line-height:1.5; }

/* Progress */
.progress-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.progress-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent-cyan),var(--accent-green)); transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1); width:0%; }
.progress-text { font-size:13px; font-weight:700; color:var(--text-dim); white-space:nowrap; }
.score-display { display:flex; gap:16px; justify-content:center; margin-bottom:20px; }
.score-item { text-align:center; }
.score-num { font-family:'Lilita One',cursive; font-size:28px; line-height:1; }
.score-label { font-size:11px; color:var(--text-dim); font-weight:600; }
.score-correct .score-num { color:var(--accent-green); }
.score-wrong .score-num { color:var(--accent-red); }
.score-streak .score-num { color:var(--accent-yellow); }

/* Quiz Card */
.quiz-card { background:var(--bg-card); border-radius:16px; padding:0; border:1px solid rgba(255,255,255,0.06); overflow:hidden; margin-bottom:20px; }
.quiz-scenario { padding:24px 24px 0; }
.scenario-type { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.type-email { background:rgba(0,229,255,0.12); color:var(--accent-cyan); }
.type-sms { background:rgba(57,255,20,0.12); color:var(--accent-green); }
.type-website { background:rgba(213,0,249,0.12); color:var(--accent-purple); }
.type-social { background:rgba(255,214,0,0.12); color:var(--accent-yellow); }
.type-chat { background:rgba(255,145,0,0.12); color:var(--accent-orange); }

/* Fake message display */
.fake-message { background:var(--bg-input); border-radius:12px; padding:16px; margin-bottom:16px; border:1px solid rgba(255,255,255,0.04); }
.fake-header { display:flex; justify-content:space-between; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.06); }
.fake-from { font-size:12px; color:var(--accent-cyan); font-weight:700; }
.fake-to { font-size:11px; color:var(--text-dim); }
.fake-subject { font-size:14px; font-weight:800; margin-bottom:8px; color:var(--text); }
.fake-body { font-size:13px; line-height:1.6; color:var(--text-dim); }
.fake-body a, .fake-link { color:var(--accent-cyan); text-decoration:underline; cursor:default; font-weight:600; }
.fake-url { display:block; margin-top:8px; padding:6px 10px; background:rgba(0,0,0,0.3); border-radius:6px; font-family:monospace; font-size:12px; color:var(--accent-orange); word-break:break-all; }

/* Question area */
.quiz-question { padding:16px 24px; font-size:16px; font-weight:800; text-align:center; color:var(--text); }

/* Answer buttons */
.quiz-answers { display:flex; gap:10px; padding:0 24px 24px; }
.answer-btn { flex:1; padding:14px; border:2px solid rgba(255,255,255,0.1); border-radius:12px; background:rgba(255,255,255,0.03); font-family:'Nunito',sans-serif; font-size:15px; font-weight:800; color:var(--text); cursor:pointer; transition:all 0.2s; }
.answer-btn:hover { border-color:var(--accent-cyan); background:rgba(0,229,255,0.06); transform:translateY(-2px); }
.answer-btn:active { transform:translateY(0); }
.answer-btn.btn-real { }
.answer-btn.btn-fake { }
.answer-btn:disabled { cursor:default; transform:none; }
.answer-btn.correct { border-color:var(--accent-green); background:rgba(57,255,20,0.1); color:var(--accent-green); }
.answer-btn.wrong { border-color:var(--accent-red); background:rgba(255,23,68,0.1); color:var(--accent-red); }
.answer-btn.correct-reveal { border-color:var(--accent-green); opacity:0.5; }

/* Explanation */
.explanation { padding:0 24px 24px; display:none; animation:fadeIn 0.3s; }
.explanation.visible { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.explain-box { padding:14px 16px; border-radius:10px; font-size:13px; line-height:1.6; }
.explain-correct { background:rgba(57,255,20,0.08); border-left:3px solid var(--accent-green); color:var(--text-dim); }
.explain-wrong { background:rgba(255,23,68,0.08); border-left:3px solid var(--accent-red); color:var(--text-dim); }
.explain-box strong { color:var(--text); }
.next-btn { display:block; width:100%; padding:12px; margin-top:12px; border:none; border-radius:10px; background:var(--accent-cyan); font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; color:var(--bg); cursor:pointer; transition:all 0.2s; }
.next-btn:hover { filter:brightness(1.2); transform:translateY(-1px); }

/* Start screen */
.start-screen { text-align:center; padding:40px 24px; }
.start-screen .emoji-big { font-size:64px; margin-bottom:16px; animation:bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.start-screen h2 { font-family:'Lilita One',cursive; font-size:26px; color:var(--accent-cyan); margin-bottom:8px; }
.start-screen p { font-size:14px; color:var(--text-dim); margin-bottom:24px; line-height:1.6; max-width:400px; margin-left:auto; margin-right:auto; }
.start-btn { display:inline-block; padding:14px 40px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--accent-cyan),var(--accent-green)); font-family:'Lilita One',cursive; font-size:20px; color:var(--bg); cursor:pointer; transition:all 0.2s; }
.start-btn:hover { transform:translateY(-2px); filter:brightness(1.1); box-shadow:0 8px 30px rgba(0,229,255,0.3); }

/* Results screen */
.results-screen { text-align:center; padding:30px 24px; display:none; }
.results-screen.visible { display:block; animation:fadeIn 0.5s; }
.result-badge { font-size:72px; margin-bottom:12px; }
.result-title { font-family:'Lilita One',cursive; font-size:32px; margin-bottom:4px; }
.result-subtitle { font-size:14px; color:var(--text-dim); margin-bottom:20px; }
.result-stats { display:flex; gap:16px; justify-content:center; margin-bottom:24px; }
.stat-box { background:var(--bg-input); padding:14px 20px; border-radius:12px; text-align:center; min-width:80px; }
.stat-num { font-family:'Lilita One',cursive; font-size:24px; }
.stat-label { font-size:11px; color:var(--text-dim); font-weight:600; margin-top:2px; }
.result-breakdown { text-align:left; margin-bottom:24px; }
.breakdown-title { font-size:14px; font-weight:800; margin-bottom:8px; color:var(--text-dim); }
.breakdown-item { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.04); }
.breakdown-item:last-child { border:none; }
.bi-icon { font-size:14px; }
.bi-correct { color:var(--accent-green); }
.bi-wrong { color:var(--accent-red); }
.bi-text { flex:1; color:var(--text-dim); }
.restart-btn { display:inline-block; padding:12px 32px; border:2px solid var(--accent-cyan); border-radius:12px; background:transparent; font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; color:var(--accent-cyan); cursor:pointer; transition:all 0.2s; margin-right:8px; }
.restart-btn:hover { background:rgba(0,229,255,0.1); }
.share-btn { display:inline-block; padding:12px 32px; border:none; border-radius:12px; background:var(--accent-purple); font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; color:white; cursor:pointer; transition:all 0.2s; }
.share-btn:hover { filter:brightness(1.2); }

.footer { text-align:center; padding:20px; font-size:12px; color:var(--text-dim); }
.footer a { color:var(--accent-cyan); text-decoration:none; }
.footer a:hover { text-decoration:underline; }

@media(max-width:500px) {
  .header h1 { font-size:30px; }
  .quiz-answers { flex-direction:column; }
  .result-stats { flex-wrap:wrap; }
  .fake-header { flex-direction:column; gap:2px; }
}