:root{
  --bg: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
  --text: #2c3e50;
  --accent: #667eea; /* purple */
  --accent2: #764ba2; /* deep purple */
  --accent-light: #f093fb;
  --card: #ffffff;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.15);
}

[data-theme="dark"]{
  --bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --text: #e4e4e7;
  --accent: #818cf8;
  --accent2: #a78bfa;
  --accent-light: #c084fc;
  --card: rgba(30,30,46,0.95);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
}

.theme-toggle{
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--card);
  border:2px solid rgba(128,128,128,0.2);
  border-radius:50%;
  width:48px;
  height:48px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  transition:all 0.3s ease;
  box-shadow:var(--shadow-md);
  z-index:1000;
}
.theme-toggle:hover{
  transform:scale(1.1) rotate(15deg);
  box-shadow:var(--shadow-lg);
}
.theme-toggle:active{
  transform:scale(0.95);
}
@media(max-width:640px){
  .theme-toggle{
    bottom:16px;
    right:16px;
    width:44px;
    height:44px;
    font-size:18px;
  }
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;background:var(--bg);background-attachment:fixed;color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6}
.container{max-width:760px;margin:0 auto;padding:24px}
.header{text-align:center;margin-bottom:18px}
.title{font-family: 'Playfair Display', Georgia, serif;font-size:32px;margin:8px 0;font-weight:800;background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{margin:0;color:var(--text);opacity:0.7}
.site-nav{display:flex;gap:8px;justify-content:center;margin-top:12px}
.nav-btn{background:var(--card);border:1px solid rgba(128,128,128,0.2);padding:10px 18px;border-radius:12px;cursor:pointer;font-weight:600;transition:all .25s ease;backdrop-filter:blur(8px);color:var(--text)}
.nav-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.nav-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:var(--shadow-md)}
.card{background:transparent;margin-bottom:12px}
.card-inner{background:var(--card);padding:28px;border-radius:20px;box-shadow:var(--shadow-lg);backdrop-filter:blur(12px);border:1px solid rgba(128,128,128,0.2);text-align:center;position:relative;overflow:hidden}
.card-inner::before{content:'';position:absolute;inset:0;opacity:0.12;pointer-events:none;transition:opacity 0.5s ease}

/* Quiz-specific backgrounds */
.card-inner.quiz-compat::before{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)}
.card-inner.quiz-crush::before{background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%)}
.card-inner.quiz-love::before{background:linear-gradient(135deg, #fa709a 0%, #fee140 100%)}
.card-inner.quiz-emotional::before{background:linear-gradient(135deg, #30cfd0 0%, #330867 100%)}
.card-inner.quiz-vibe::before{background:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)}
.card-inner.quiz-friendship::before{background:linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)}
.card-inner.quiz-physical::before{background:linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)}
.card-inner.quiz-toxicity::before{background:linear-gradient(135deg, #2d1b69 0%, #ff6b9d 100%)}
.card-inner.quiz-anxiety::before{background:linear-gradient(135deg, #434343 0%, #000000 100%)}
.card-inner.quiz-confidence::before{background:linear-gradient(135deg, #f2994a 0%, #f2c94c 100%)}
.card-inner.quiz-empathy::before{background:linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)}
.card-inner.quiz-optimism::before{background:linear-gradient(135deg, #56ab2f 0%, #a8e063 100%)}
.card-inner.quiz-jealousy::before{background:linear-gradient(135deg, #0f9b0f 0%, #000000 100%)}
.card-inner.quiz-resilience::before{background:linear-gradient(135deg, #4568dc 0%, #b06ab3 100%)}
#inputsContainer{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.label{display:block;font-size:12px;color:var(--text);opacity:0.7;margin-bottom:6px;text-align:center}
.input{padding:16px;font-size:24px;border-radius:14px;border:2px solid rgba(102,126,234,0.2);text-align:center;font-weight:700;transition:all .25s ease;background:var(--card);color:var(--text);-webkit-appearance:none;appearance:none}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(102,126,234,0.1);transform:scale(1.05)}
@media(max-width:640px){
  .input:focus{transform:scale(1.02)}
}
.cta{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);color:#fff;border:none;padding:14px 32px;border-radius:14px;font-weight:700;cursor:pointer;font-size:16px;transition:all .3s cubic-bezier(.2,.9,.3,1);box-shadow:var(--shadow-md);margin:0 auto;display:block;min-height:48px}
.cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cta:active{transform:scale(0.97)}
#beginBtn{margin-top:20px}
.btn-secondary{background:transparent;border:1px solid rgba(0,0,0,0.08);padding:10px 16px;border-radius:10px;cursor:pointer;min-height:44px;font-weight:600}
.btn-secondary:active{transform:scale(0.97)}
.btn-link{background:transparent;border:none;color:var(--text);text-decoration:underline;cursor:pointer;padding:8px;min-height:40px}
.btn-link:active{opacity:0.7}
.hidden{display:none}
.progress{font-size:13px;color:var(--text);opacity:0.7;margin-bottom:8px}
.question{margin:6px 0 12px}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{padding:16px 20px;border-radius:14px;border:2px solid rgba(128,128,128,0.2);cursor:pointer;background:var(--card);color:var(--text);transition:all .25s cubic-bezier(.2,.9,.3,1);font-weight:500;min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center}
.choice:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.choice:active{transform:scale(0.97)}
.choice.selected{background:linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.12));border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 20px rgba(102,126,234,0.25)}

/* visible quiz name inside start/quiz cards */
.quiz-name{display:block;font-size:15px;font-weight:700;color:var(--accent);margin-bottom:10px;text-align:center}
.quiz-name.small{font-size:13px;color:var(--text);opacity:0.65;font-weight:600}

/* quiz name change fade animation */
.name-fade { transition: opacity .32s ease, transform .32s ease; }
.name-fade.hide { opacity: 0; transform: translateY(-6px) scale(0.995); }
.name-fade.show { opacity: 1; transform: translateY(0) scale(1); }

/* Quizzes panel grid */
#quizzesList{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:8px}
#quizzesList .choice{padding:24px 20px;border-radius:16px;border:2px solid rgba(128,128,128,0.2);background:var(--card);color:var(--text);box-shadow:var(--shadow-md);text-align:center;font-weight:700;transition:all .3s cubic-bezier(.2,.9,.3,1);font-size:15px;position:relative;overflow:hidden}
#quizzesList .choice::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.1);opacity:0;transition:opacity .3s ease}
#quizzesList .choice:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg);border-color:var(--accent)}
#quizzesList .choice:hover::before{opacity:1}
#quizzesList .full-width-quiz{grid-column:1/-1;padding:32px 24px}
#quizzesList .full-width-quiz .quiz-card-emoji{font-size:48px}
#quizzesList .full-width-quiz .quiz-card-title{font-size:24px}
#quizzesList .full-width-quiz .quiz-card-desc{font-size:15px}
.quiz-card-emoji{font-size:36px;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));line-height:1}
.quiz-card-title{font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.3}
.quiz-card-desc{font-size:12px;opacity:0.9;font-weight:500;line-height:1.4}
.quiz-actions{display:flex;justify-content:space-between;margin-top:12px}
.result-screen{display:flex;flex-direction:column;gap:12px;align-items:center;animation:resultFadeIn 0.6s cubic-bezier(.2,.9,.3,1) both}
.result-card{background:var(--card);padding:50px 40px;border-radius:28px;box-shadow:var(--shadow-lg);text-align:center;width:100%;border:1px solid rgba(128,128,128,0.2);animation:cardEntrance 0.8s cubic-bezier(.2,.9,.3,1.1) 0.2s both;position:relative;overflow:hidden}
.result-card::before{content:'';position:absolute;inset:-50%;background:radial-gradient(circle, rgba(102,126,234,0.15) 0%, transparent 70%);animation:glowPulse 3s ease-in-out infinite}
.result-title{font-size:36px;margin:16px 0 12px 0;font-weight:800;color:var(--text);animation:titleSlide 0.7s cubic-bezier(.2,.9,.3,1) 0.4s both;text-shadow:0 2px 8px rgba(102,126,234,0.15)}
.result-blurb{color:var(--text);opacity:0.85;font-size:18px;line-height:1.7;margin:12px 0;animation:blurbFade 0.6s ease 0.6s both}
.big-score{font-size:96px;font-weight:900;margin:24px 0;background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,var(--accent-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-3px;filter:drop-shadow(0 4px 12px rgba(102,126,234,0.3))}
.result-actions{display:flex;gap:12px;justify-content:center;margin-top:8px;animation:actionsFade 0.5s ease 0.8s both}

@keyframes actionsFade {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: translateY(0) }
}

/* initials shown on result card */
.result-initials{font-size:36px;font-weight:800;margin:0 0 12px 0;letter-spacing:8px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* dramatic pop animation for score with bounce and glow */
@keyframes popIn {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; filter: blur(10px) drop-shadow(0 0 0 rgba(102,126,234,0)) }
  50% { transform: scale(1.25) rotate(3deg); opacity: 1; filter: blur(0) drop-shadow(0 8px 24px rgba(102,126,234,0.5)) }
  70% { transform: scale(0.95) rotate(-1deg); filter: drop-shadow(0 6px 18px rgba(102,126,234,0.4)) }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 4px 12px rgba(102,126,234,0.3)) }
}
.result-initials.pop { animation: popIn .75s cubic-bezier(.2,.9,.3,1.1) both }
.big-score.pop { animation: popIn .95s cubic-bezier(.2,.9,.3,1.2) 0.15s both }

@keyframes cardEntrance {
  0% { transform: scale(0.85) translateY(30px); opacity: 0; box-shadow: 0 0 0 rgba(102,126,234,0) }
  60% { transform: scale(1.02) translateY(-4px); box-shadow: 0 25px 70px rgba(102,126,234,0.3) }
  100% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 20px 60px rgba(102,126,234,0.25) }
}

@keyframes resultFadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes titleSlide {
  from { transform: translateY(-15px); opacity: 0 }
  to { transform: translateY(0); opacity: 1 }
}

@keyframes blurbFade {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: translateY(0) }
}

@keyframes glowPulse {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3 }
  50% { transform: translate(-10%, -10%) scale(1.2); opacity: 0.5 }
}

/* confetti canvas overlay */
#confetti-canvas{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999 }

.suggestions{margin-top:24px}
.suggestions h3{margin:0 0 20px 0;text-align:center;font-size:22px;font-weight:700;color:var(--text)}
.suggest-list{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.suggest-card{background:var(--card);padding:24px 20px;border-radius:18px;box-shadow:var(--shadow-md);width:200px;text-align:center;cursor:pointer;border:2px solid rgba(128,128,128,0.2);transition:all .3s cubic-bezier(.2,.9,.3,1);position:relative;overflow:hidden}
.suggest-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity .3s ease}
.suggest-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.suggest-card:hover::before{opacity:1}
.suggest-card h4{margin:8px 0 6px 0;font-size:20px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.suggest-card p{margin:0;color:var(--text);opacity:0.75;font-size:14px;line-height:1.5}

/* Mobile-first optimizations */
@media(max-width:640px){
  .container{padding:16px;max-width:100%}
  .title{font-size:24px;line-height:1.2}
  .subtitle{font-size:14px}
  .card-inner{padding:20px;border-radius:16px}
  .input{font-size:20px;padding:12px;width:100%;max-width:280px}
  .cta{padding:12px 24px;font-size:15px;width:100%;max-width:280px}
  #beginBtn{margin-top:16px}
  .choice{padding:14px 16px;font-size:15px;border-radius:12px}
  .choice:active{transform:scale(0.98)}
  #quizzesList{grid-template-columns:1fr;gap:10px}
  #quizzesList .choice{padding:20px 16px;font-size:14px}
  .result-card{padding:32px 24px;border-radius:20px}
  .result-title{font-size:26px;line-height:1.2}
  .result-blurb{font-size:15px;line-height:1.6}
  .big-score{font-size:64px;letter-spacing:-2px;margin:16px 0}
  .result-actions{flex-direction:column;gap:8px;width:100%}
  .result-actions button{width:100%;padding:12px}
  .suggestions h3{font-size:18px;margin-bottom:16px}
  .suggest-card{width:100%;max-width:100%;padding:20px 16px}
  .suggest-card h4{font-size:18px}
  .suggest-card p{font-size:13px}
  .nav-btn{padding:8px 14px;font-size:14px}
  .quiz-name{font-size:13px}
  .quiz-name.small{font-size:12px}
  .header{margin-bottom:12px}
}

@media(min-width:641px) and (max-width:899px){
  .container{padding:24px}
  .input{width:100px}
  .big-score{font-size:80px}
  .result-card{padding:40px 32px}
  .result-title{font-size:30px}
  #quizzesList{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

@media(min-width:900px){
  .container{padding:40px}
  .input{width:120px}
}

/* Light transition helpers used by JS */
.animated { transition: opacity .28s ease, transform .28s ease; }
.anim-enter { opacity: 0; transform: translateY(8px); }
.anim-enter.anim-active { opacity: 1; transform: translateY(0); }
.anim-leave { opacity: 1; transform: translateY(0); }
.anim-leave.anim-active { opacity: 0; transform: translateY(8px); }

/* Slight emphasis for question change */
.question.animate-pulse { animation: pulseIn .38s ease; }
@keyframes pulseIn { 0% { opacity: 0; transform: translateY(6px) scale(0.995) } 60% { opacity: 1; transform: translateY(-2px) scale(1.01) } 100% { transform: translateY(0) scale(1) } }

/* Ensure the result panel doesn't occupy space while hidden (fixes Chrome showing a blank card) */
.result-screen.hidden {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Defensive: also collapse suggestions when hidden */
.suggestions.hidden { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; }