:root {
  --sky: #0ea5e9; --sky-dark: #0284c7; --sun: #fbbf24; --sun-glow: #fde68a;
  --grass: #22c55e; --grass-dark: #16a34a; --berry: #f43f5e; --berry-light: #fda4af;
  --purple: #a855f7; --purple-light: #e9d5ff; --orange: #f97316; --teal: #14b8a6;
  --bg: #f0f9ff; --card: #ffffff; --text: #1e293b; --text-soft: #64748b;
  --border: #e2e8f0; --energy: #fbbf24; --radius: 20px;
  --shadow: 0 4px 20px rgba(0,0,0,0.1); --shadow-lg: 0 8px 40px rgba(0,0,0,0.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }

.sky-bg { position: fixed; inset: 0; background: linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 40%, #f0fdf4 100%); z-index: -2; }
.cloud { position: fixed; background: white; border-radius: 50px; opacity: 0.7; z-index: -1; animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: white; border-radius: 50%; }
.cloud:nth-child(1) { width:120px; height:40px; top:8%; animation-duration:35s; animation-delay:-5s; }
.cloud:nth-child(1)::before { width:60px; height:60px; top:-30px; left:20px; }
.cloud:nth-child(1)::after  { width:40px; height:40px; top:-20px; left:55px; }
.cloud:nth-child(2) { width:90px; height:30px; top:15%; animation-duration:50s; animation-delay:-20s; opacity:0.5; }
.cloud:nth-child(2)::before { width:45px; height:45px; top:-22px; left:15px; }
.cloud:nth-child(3) { width:150px; height:50px; top:5%; animation-duration:45s; animation-delay:-30s; opacity:0.6; }
.cloud:nth-child(3)::before { width:70px; height:70px; top:-35px; left:30px; }
.cloud:nth-child(3)::after  { width:55px; height:55px; top:-27px; left:75px; }
@keyframes drift { from { transform:translateX(-200px); } to { transform:translateX(calc(100vw + 200px)); } }

.app { max-width: 900px; margin: 0 auto; padding: 16px; }

header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:white; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.logo { font-family:'Fredoka One',cursive; font-size:1.8rem; background:linear-gradient(135deg,var(--sky),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo span { color:var(--sun); -webkit-text-fill-color:var(--sun); }
.header-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.energy-container { display:flex; align-items:center; gap:8px; background:#fffbeb; border:2px solid var(--sun); border-radius:50px; padding:6px 14px; }
.energy-icon { font-size:1.2rem; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.energy-label { font-weight:700; font-size:0.85rem; color:var(--text-soft); }
.energy-bar-wrap { width:80px; height:10px; background:#fde68a; border-radius:99px; overflow:hidden; }
.energy-bar-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#fbbf24); border-radius:99px; transition:width 0.5s cubic-bezier(.34,1.56,.64,1); }
.energy-num { font-weight:800; font-size:0.9rem; color:#b45309; min-width:35px; text-align:right; }
.score-pill { background:linear-gradient(135deg,var(--sky),#38bdf8); color:white; border-radius:50px; padding:6px 16px; font-weight:800; font-size:0.9rem; display:flex; align-items:center; gap:6px; }
.avatar-mini { width:44px; height:44px; border-radius:50%; border:3px solid var(--purple); display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:white; cursor:pointer; transition:transform 0.2s; }
.avatar-mini:hover { transform:scale(1.1); }

.tabs { display:flex; gap:4px; margin-bottom:20px; }
.tab { font-family:'Fredoka One',cursive; font-size:0.78rem; padding:8px 0; border-radius:50px; border:2px solid transparent; cursor:pointer; transition:all 0.2s; white-space:nowrap; background:white; color:var(--text-soft); flex:1; text-align:center; }
.tab:hover { transform:translateY(-2px); border-color:var(--sky); color:var(--sky-dark); }
.tab.active { background:linear-gradient(135deg,var(--sky),#38bdf8); color:white; box-shadow:0 4px 14px rgba(14,165,233,0.35); transform:translateY(-2px); }

#verifyBanner { display:flex; align-items:center; justify-content:space-between; background:#fef9c3; border:1px solid #fde047; border-radius:var(--radius); padding:10px 16px; margin-bottom:14px; font-size:0.85rem; font-weight:600; color:#854d0e; }

.screen { display:none; animation:fadeIn 0.3s ease; }
.screen.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.year-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.year-card { background:white; border-radius:var(--radius); padding:24px 16px; text-align:center; box-shadow:var(--shadow); cursor:pointer; border:3px solid transparent; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); }
.year-card:hover, .year-card.selected { border-color:var(--sky); transform:translateY(-6px) scale(1.03); box-shadow:var(--shadow-lg); }
.year-card.selected { background:linear-gradient(135deg,#eff6ff,#e0f2fe); }
.year-card .year-emoji { font-size:2.2rem; margin-bottom:8px; }
.year-card .year-num { font-family:'Fredoka One',cursive; font-size:1.3rem; color:var(--sky-dark); }
.year-card .year-label { font-size:0.8rem; color:var(--text-soft); margin-top:2px; }

.topic-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.topic-card { border-radius:var(--radius); padding:20px; cursor:pointer; border:3px solid transparent; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.topic-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-lg); }
.topic-icon { font-size:2rem; margin-bottom:10px; }
.topic-title { font-family:'Fredoka One',cursive; font-size:1.1rem; margin-bottom:4px; }
.topic-desc { font-size:0.8rem; opacity:0.85; }

.game-arena { background:white; border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; }
.game-header { background:linear-gradient(135deg,var(--sky-dark),var(--purple)); padding:20px 24px; color:white; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.game-title { font-family:'Fredoka One',cursive; font-size:1.4rem; }
.game-meta { font-size:0.9rem; opacity:0.85; }
.streak-badge { background:rgba(255,255,255,0.2); border-radius:50px; padding:6px 14px; font-weight:700; font-size:0.85rem; display:flex; align-items:center; gap:5px; }
.game-body { padding:32px 24px; }

.question-card { background:linear-gradient(135deg,#f8fafc,#f0f9ff); border:2px solid #bfdbfe; border-radius:18px; padding:32px; text-align:center; margin-bottom:28px; }
.q-number { font-size:0.8rem; color:var(--text-soft); margin-bottom:8px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.q-text { font-family:'Fredoka One',cursive; font-size:2.2rem; color:var(--text); line-height:1.3; }
.hint-btn { background:none; border:1.5px dashed var(--sky); color:var(--sky-dark); border-radius:50px; padding:5px 14px; font-size:0.8rem; font-weight:700; cursor:pointer; margin-top:10px; transition:all 0.2s; display:inline-flex; align-items:center; gap:5px; }
.hint-btn:hover { background:var(--sky); color:white; }
.q-hint { font-size:0.85rem; color:var(--sky-dark); background:#eff6ff; border-radius:10px; padding:8px 12px; margin-top:6px; display:none !important; }
.q-hint.visible { display:block !important; animation:fadeSlideUp 0.2s ease; }

.answers-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.answer-btn { background:white; border:3px solid var(--border); border-radius:16px; padding:18px 12px; font-family:'Fredoka One',cursive; font-size:1.5rem; cursor:pointer; transition:all 0.2s cubic-bezier(.34,1.56,.64,1); text-align:center; color:var(--text); }
.answer-btn:hover:not(:disabled) { border-color:var(--sky); background:#eff6ff; transform:scale(1.05); }
.no-energy .answer-btn { opacity:0.4; cursor:not-allowed; filter:grayscale(0.5); }
.no-energy .answer-btn:hover { transform:none; background:white; border-color:var(--border); }
.answer-btn.correct { background:#dcfce7; border-color:var(--grass); color:var(--grass-dark); animation:correctPop 0.4s cubic-bezier(.34,1.56,.64,1); }
.answer-btn.wrong { background:#ffe4e6; border-color:var(--berry); color:#be123c; animation:shake 0.4s; }
@keyframes correctPop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

.feedback-banner { border-radius:12px; padding:14px 20px; text-align:center; font-weight:700; font-size:1rem; margin-bottom:16px; display:none; animation:fadeIn 0.3s ease; }
.feedback-banner.show { display:block; }
.feedback-banner.correct { background:#dcfce7; color:#15803d; border:2px solid #86efac; }
.feedback-banner.wrong   { background:#ffe4e6; color:#be123c; border:2px solid #fda4af; }

.next-btn { width:100%; padding:16px; border-radius:50px; border:none; background:linear-gradient(135deg,var(--grass),#4ade80); color:white; font-family:'Fredoka One',cursive; font-size:1.2rem; cursor:pointer; transition:all 0.2s cubic-bezier(.34,1.56,.64,1); box-shadow:0 4px 14px rgba(34,197,94,0.4); display:none; }
.next-btn:hover { transform:translateY(-3px) scale(1.02); }
.next-btn.show { display:block; }

/* ── TIMER ── */
.timer-wrap { margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.timer-label { font-weight:800; font-size:1rem; min-width:32px; text-align:center; transition:color 0.3s; }
.timer-label.urgent { color:var(--berry); animation:pulse 0.6s infinite; }
.timer-bar-bg { flex:1; height:10px; background:#e2e8f0; border-radius:99px; overflow:hidden; }
.timer-bar-fill { height:100%; border-radius:99px; transition:width 1s linear, background 0.5s; background:linear-gradient(90deg,var(--grass),#4ade80); }
.timer-bar-fill.urgent { background:linear-gradient(90deg,#ef4444,var(--berry)); }

/* ── DIFFICULTY BADGE ── */
.diff-badge { display:inline-flex; align-items:center; gap:5px; border-radius:50px; padding:4px 12px; font-size:0.75rem; font-weight:800; margin-bottom:12px; }
.diff-badge.easy   { background:#dcfce7; color:#15803d; }
.diff-badge.medium { background:#fef9c3; color:#854d0e; }
.diff-badge.hard   { background:#fee2e2; color:#b91c1c; }

/* ── BONUS ROUND ── */
.bonus-banner { background:linear-gradient(135deg,#fef08a,#fbbf24); border:2px solid #f59e0b; border-radius:14px; padding:10px 18px; text-align:center; font-weight:800; font-size:0.95rem; color:#78350f; margin-bottom:14px; display:none; animation:fadeIn 0.4s ease; }
.bonus-banner.show { display:block; }
.game-arena.bonus-mode .game-header { background:linear-gradient(135deg,#d97706,#f59e0b); }
.game-arena.bonus-mode .question-card { background:linear-gradient(135deg,#fffbeb,#fef9c3); border-color:#fde68a; }

.progress-dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.dot { width:10px; height:10px; border-radius:50%; background:#e2e8f0; transition:all 0.3s; }
.dot.done { background:var(--grass); transform:scale(1.1); }
.dot.current { background:var(--sky); transform:scale(1.2); }
.dot.wrong-done { background:var(--berry); }

/* ── COLLECTION ── */
.collection-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.collection-title { font-family:'Fredoka One',cursive; font-size:1.5rem; color:var(--text); }
.energy-needed-tag { background:#fffbeb; border:2px solid var(--sun); border-radius:50px; padding:6px 14px; font-size:0.8rem; font-weight:700; color:#92400e; }

.collection-count { background:white; border-radius:12px; padding:10px 16px; margin-bottom:14px; font-size:0.85rem; color:var(--text-soft); box-shadow:var(--shadow); display:flex; align-items:center; gap:8px; }
.collection-count strong { color:var(--text); }

.rarity-filters { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.rarity-filter { padding:5px 14px; border-radius:50px; border:2px solid var(--border); background:white; font-size:0.78rem; font-weight:700; cursor:pointer; transition:all 0.2s; color:var(--text-soft); }
.rarity-filter:hover { border-color:var(--sky); color:var(--sky-dark); }
.rarity-filter.active                       { background:#475569; color:white; border-color:#475569; }
.rarity-filter[data-rarity="Starter"].active  { background:#78716c; border-color:#78716c; }
.rarity-filter[data-rarity="Common"].active   { background:var(--grass-dark); border-color:var(--grass-dark); }
.rarity-filter[data-rarity="Rare"].active     { background:var(--sky-dark); border-color:var(--sky-dark); }
.rarity-filter[data-rarity="Epic"].active     { background:var(--purple); border-color:var(--purple); }
.rarity-filter[data-rarity="Legendary"].active{ background:#d97706; border-color:#d97706; }
.rarity-filter[data-rarity="Diamond"].active  { background:linear-gradient(135deg,#67e8f9,#a5b4fc,#f0abfc); border-color:#a5b4fc; color:white; }

.characters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:14px; }
.char-card { background:white; border-radius:var(--radius); padding:16px 10px; text-align:center; box-shadow:var(--shadow); cursor:pointer; border:3px solid transparent; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); position:relative; overflow:hidden; }
.char-card::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:3px 3px 0 0; }
.char-card[data-rarity="Starter"]::after   { background:#a8a29e; }
.char-card[data-rarity="Common"]::after    { background:var(--grass); }
.char-card[data-rarity="Rare"]::after      { background:var(--sky); }
.char-card[data-rarity="Epic"]::after      { background:var(--purple); }
.char-card[data-rarity="Legendary"]::after { background:linear-gradient(90deg,#f59e0b,#ef4444,#a855f7); }
.char-card[data-rarity="Diamond"]::after   { background:linear-gradient(90deg,#67e8f9,#a5b4fc,#f0abfc,#67e8f9); background-size:200%; animation:diamondShimmer 2s linear infinite; height:5px; }
@keyframes diamondShimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* Diamond card gets a glittering background */
.char-card[data-rarity="Diamond"] { background:linear-gradient(160deg,#f0f9ff 0%,#e0f2fe 40%,#ede9fe 70%,#fdf4ff 100%); }
.char-card[data-rarity="Diamond"].unlocked { border-color:#a5b4fc; box-shadow:0 0 0 2px #a5b4fc40, 0 4px 20px rgba(165,180,252,0.3); }
.char-card[data-rarity="Diamond"].active   { border-color:#67e8f9; box-shadow:0 0 0 4px #a5b4fc50, 0 0 24px rgba(103,232,249,0.4), var(--shadow); }
.char-card[data-rarity="Diamond"]:not(.locked):hover { transform:translateY(-8px) scale(1.04); box-shadow:0 0 0 3px #a5b4fc, 0 12px 40px rgba(165,180,252,0.5); }

.char-card.locked        { filter:grayscale(0.7); opacity:0.7; cursor:not-allowed; }
.char-card.can-unlock    { cursor:pointer; opacity:0.85; filter:grayscale(0.2); }
.char-card.can-unlock:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.char-card.spin-only-card { cursor:pointer; border-color:#f59e0b; background:linear-gradient(160deg,#fffbeb,#fef3c7); animation:spinOnlyGlow 2.5s ease-in-out infinite alternate; }
.char-card.spin-only-card:hover { transform:translateY(-6px); box-shadow:0 0 0 3px #f59e0b, var(--shadow-lg); }
.char-cost.spin-only-cost { color:#b45309; font-weight:700; font-size:0.72rem; }
@keyframes spinOnlyGlow { from { box-shadow:0 0 6px rgba(245,158,11,0.3); } to { box-shadow:0 0 18px rgba(245,158,11,0.7); } }
.char-card.unlocked      { border-color:var(--grass); }
.char-card.active        { border-color:var(--purple); box-shadow:0 0 0 4px var(--purple-light),var(--shadow); }
.char-card:not(.locked):hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* ── ELITE SKINS ── */
.char-card.skin-silver { background:linear-gradient(160deg,#f8fafc,#e2e8f0,#f1f5f9); border-color:#94a3b8 !important; }
.char-card.skin-silver .char-emoji { filter:drop-shadow(0 0 6px rgba(148,163,184,0.9)); animation:silverPulse 2.5s ease-in-out infinite; }
@keyframes silverPulse { 0%,100%{filter:drop-shadow(0 0 4px rgba(148,163,184,0.7))} 50%{filter:drop-shadow(0 0 10px rgba(203,213,225,1)) brightness(1.1)} }
.char-card.skin-gold { background:linear-gradient(160deg,#fffbeb,#fef3c7,#fde68a30); border-color:#f59e0b !important; }
.char-card.skin-gold .char-emoji { filter:drop-shadow(0 0 8px rgba(251,191,36,1)); animation:goldPulse 2s ease-in-out infinite; }
@keyframes goldPulse { 0%,100%{filter:drop-shadow(0 0 5px rgba(251,191,36,0.8))} 50%{filter:drop-shadow(0 0 14px rgba(253,224,71,1)) brightness(1.15)} }
.skin-badge { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:0.58rem; font-weight:800; padding:2px 7px; border-radius:50px; white-space:nowrap; letter-spacing:0.3px; }
.skin-badge.silver { background:linear-gradient(90deg,#94a3b8,#cbd5e1); color:white; }
.skin-badge.gold   { background:linear-gradient(90deg,#f59e0b,#fbbf24); color:#78350f; }
.skin-dots { display:flex; justify-content:center; gap:4px; margin-top:3px; }
.skin-dot  { width:7px; height:7px; border-radius:50%; border:1.5px solid var(--border); background:#f1f5f9; cursor:pointer; transition:all 0.2s; }
.skin-dot.unlocked-skin { border-color:#94a3b8; background:#94a3b8; }
.skin-dot.unlocked-skin.gold { border-color:#f59e0b; background:#f59e0b; }
.skin-dot.active-skin  { transform:scale(1.3); box-shadow:0 0 0 2px white, 0 0 0 3px #a855f7; }

/* ── SKIN MODAL ── */
.skin-modal-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:18px 0; }
.skin-option { border-radius:16px; padding:14px 8px; text-align:center; border:3px solid var(--border); cursor:pointer; transition:all 0.2s cubic-bezier(.34,1.56,.64,1); position:relative; }
.skin-option:hover:not(.locked-skin-opt) { transform:translateY(-3px); }
.skin-option.active-skin-opt { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-light); }
.skin-option.locked-skin-opt { opacity:0.55; cursor:default; filter:grayscale(0.4); }
.skin-option.default-opt { background:#f8fafc; }
.skin-option.silver-opt  { background:linear-gradient(160deg,#f8fafc,#e2e8f0); border-color:#94a3b8; }
.skin-option.gold-opt    { background:linear-gradient(160deg,#fffbeb,#fef3c7); border-color:#f59e0b; }
.skin-opt-emoji { font-size:2.2rem; margin-bottom:6px; }
.skin-opt-name  { font-family:'Fredoka One',cursive; font-size:0.8rem; }
.skin-opt-req   { font-size:0.65rem; color:var(--text-soft); margin-top:3px; line-height:1.3; }
.char-emoji { font-size:2.6rem; margin-bottom:5px; line-height:1; }
.char-name { font-family:'Fredoka One',cursive; font-size:0.85rem; margin-bottom:2px; line-height:1.2; }
.char-rarity-label { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.char-rarity-label.Starter   { color:#78716c; }
.char-rarity-label.Common    { color:var(--grass-dark); }
.char-rarity-label.Rare      { color:var(--sky-dark); }
.char-rarity-label.Epic      { color:var(--purple); }
.char-rarity-label.Legendary { color:#d97706; }
.char-rarity-label.Diamond   { background:linear-gradient(90deg,#06b6d4,#818cf8,#d946ef); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:0.68rem; }
.char-card[data-rarity="Diamond"] .char-emoji { animation:diamondBob 3s ease-in-out infinite; filter:drop-shadow(0 0 6px rgba(103,232,249,0.8)); }
@keyframes diamondBob { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-4px) scale(1.05)} }
.char-cost { font-size:0.7rem; color:var(--text-soft); display:flex; align-items:center; justify-content:center; gap:3px; }
.char-cost.met { color:var(--grass-dark); font-weight:700; }
.lock-overlay { position:absolute; top:8px; right:8px; font-size:1rem; }
.active-badge { position:absolute; top:8px; left:8px; background:var(--purple); color:white; font-size:0.6rem; font-weight:800; padding:2px 6px; border-radius:50px; text-transform:uppercase; letter-spacing:0.5px; }
.char-level { display:flex; justify-content:center; gap:3px; margin-top:4px; }
.char-star { font-size:0.72rem; color:#d1d5db; }
.char-star.lit { color:var(--sun); }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background:white; border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow); }
.stat-icon { font-size:2rem; margin-bottom:8px; }
.stat-value { font-family:'Fredoka One',cursive; font-size:2rem; color:var(--sky-dark); }
.stat-label { font-size:0.8rem; color:var(--text-soft); margin-top:2px; }
.achievement-list { display:flex; flex-direction:column; gap:10px; }
.achievement { background:white; border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); border:2px solid transparent; }
.achievement.earned { border-color:var(--sun); background:#fffbeb; }
.achievement-icon { font-size:1.8rem; }
.achievement-text .ach-title { font-weight:800; font-size:0.95rem; }
.achievement-text .ach-desc { font-size:0.8rem; color:var(--text-soft); }
.achievement-check { margin-left:auto; font-size:1.2rem; }

.section-title { font-family:'Fredoka One',cursive; font-size:1.6rem; margin-bottom:6px; color:var(--text); }
.section-sub { font-size:0.9rem; color:var(--text-soft); margin-bottom:20px; }
.curriculum-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#ecfdf5,#d1fae5); border:1.5px solid #6ee7b7; border-radius:50px; padding:4px 12px; font-size:0.75rem; font-weight:700; color:#065f46; margin-bottom:16px; }

/* ── MODALS ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; backdrop-filter:blur(4px); display:none; }
.modal-overlay.show { display:flex; }
.modal { background:white; border-radius:24px; padding:36px 32px; max-width:420px; width:100%; text-align:center; animation:popIn 0.4s cubic-bezier(.34,1.56,.64,1); }
.modal-box { background:white; border-radius:24px; padding:36px 32px; max-width:420px; width:100%; animation:popIn 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.modal-emoji { font-size:4rem; margin-bottom:12px; }
.modal-title { font-family:'Fredoka One',cursive; font-size:1.8rem; margin-bottom:8px; }
.modal-body { color:var(--text-soft); margin-bottom:24px; font-size:0.95rem; line-height:1.6; }
.modal-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:50px; border:none; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:800; font-size:1rem; transition:all 0.2s cubic-bezier(.34,1.56,.64,1); }
.btn:hover { transform:translateY(-3px); }
.btn-primary  { background:linear-gradient(135deg,var(--sky),#38bdf8); color:white; box-shadow:0 4px 14px rgba(14,165,233,0.4); }
.btn-secondary{ background:white; color:var(--text); border:2px solid var(--border); }
.btn-success  { background:linear-gradient(135deg,var(--grass),#4ade80); color:white; box-shadow:0 4px 14px rgba(34,197,94,0.4); }
.btn-purple   { background:linear-gradient(135deg,var(--purple),#c084fc); color:white; box-shadow:0 4px 14px rgba(168,85,247,0.4); }
.btn-sun      { background:linear-gradient(135deg,var(--sun),#fde047); color:#78350f; box-shadow:0 4px 14px rgba(251,191,36,0.4); }

.particle { position:fixed; pointer-events:none; font-size:1.5rem; z-index:999; animation:flyUp 1.2s ease-out forwards; }
@keyframes flyUp { 0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)} 100%{opacity:0;transform:translateY(-120px) scale(1.5) rotate(20deg)} }

/* ── WORKED EXAMPLE ── */
.worked-overlay { position:absolute; inset:0; background:white; border-radius:var(--radius); z-index:10; display:flex; flex-direction:column; padding:20px; overflow-y:auto; }
.worked-overlay.hidden { display:none; }
.worked-tag { display:inline-flex; align-items:center; gap:6px; background:#eff6ff; color:var(--sky-dark); border-radius:50px; padding:4px 12px; font-size:0.75rem; font-weight:800; margin-bottom:12px; align-self:flex-start; }
.worked-title { font-family:'Fredoka One',cursive; font-size:1.1rem; margin-bottom:8px; }
.worked-body { font-size:0.9rem; line-height:1.7; color:var(--text); flex:1; }
.worked-visual { background:#f8fafc; border-radius:12px; padding:14px; margin:12px 0; font-family:monospace; font-size:0.9rem; line-height:1.6; white-space:pre-wrap; border-left:4px solid var(--sky); }
.worked-step { display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; }
.worked-step-num { background:var(--sky); color:white; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; flex-shrink:0; margin-top:2px; }
.worked-cta { background:linear-gradient(135deg,var(--grass),#4ade80); color:white; border:none; border-radius:50px; padding:12px 28px; font-family:'Fredoka One',cursive; font-size:1rem; cursor:pointer; width:100%; margin-top:14px; transition:all 0.2s; }
.worked-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(34,197,94,0.3); }

/* ── EXPLANATION PANEL ── */
.explanation-panel { display:none; background:linear-gradient(135deg,#eff6ff,#f0fdf4); border:2px solid var(--sky); border-radius:14px; padding:14px 16px; margin-top:10px; font-size:0.88rem; line-height:1.6; }
.explanation-panel.show { display:block; animation:fadeSlideUp 0.3s ease; }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.explanation-panel .exp-title { font-weight:800; color:var(--sky-dark); margin-bottom:6px; font-size:0.9rem; }
.explanation-visual { font-family:monospace; font-size:0.85rem; background:white; border-radius:8px; padding:8px 12px; margin-top:8px; white-space:pre; overflow-x:auto; border-left:3px solid var(--sky); }

/* ── VISUAL QUESTION ELEMENTS ── */
.q-visual { margin:10px 0; line-height:1.8; font-size:1rem; display:none !important; }
.q-visual.visible { display:block !important; animation:fadeSlideUp 0.2s ease; }
.q-visual.array { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.q-visual.number-line { font-family:monospace; font-size:0.85rem; background:#f8fafc; padding:10px; border-radius:10px; text-align:center; overflow-x:auto; }
.q-visual.fraction-bar { display:flex; height:28px; border-radius:6px; overflow:hidden; border:2px solid var(--border); }
.q-visual.coins { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.frac-filled { background:linear-gradient(135deg,var(--sky),#38bdf8); }
.frac-empty  { background:#f1f5f9; }
.coin-item   { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; }

/* ── SKILLS MATRIX ── */
.matrix-year-block { margin-bottom:28px; }
.matrix-year-label { font-family:'Fredoka One',cursive; font-size:1.05rem; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.matrix-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.matrix-cell { background:white; border-radius:14px; padding:12px 14px; border:2px solid var(--border); position:relative; overflow:hidden; transition:all 0.2s; }
.matrix-cell:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.matrix-cell.cell-new    { border-color:#e2e8f0; }
.matrix-cell.cell-weak   { border-color:#fca5a5; background:#fff5f5; }
.matrix-cell.cell-ok     { border-color:#fde68a; background:#fffbeb; }
.matrix-cell.cell-good   { border-color:#93c5fd; background:#eff6ff; }
.matrix-cell.cell-strong { border-color:#86efac; background:#f0fdf4; }
.matrix-cell-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.matrix-cell-icon { font-size:1.3rem; flex-shrink:0; }
.matrix-cell-title { font-weight:800; font-size:0.85rem; line-height:1.2; flex:1; }
.matrix-status { font-size:0.7rem; font-weight:800; padding:2px 8px; border-radius:50px; white-space:nowrap; }
.status-new    { background:#f1f5f9; color:#64748b; }
.status-weak   { background:#fee2e2; color:#dc2626; }
.status-ok     { background:#fef9c3; color:#854d0e; }
.status-good   { background:#dbeafe; color:#1d4ed8; }
.status-strong { background:#dcfce7; color:#15803d; }
.matrix-bar-wrap { height:6px; background:#f1f5f9; border-radius:99px; overflow:hidden; margin-bottom:6px; }
.matrix-bar-fill { height:100%; border-radius:99px; transition:width 0.6s ease; }
.fill-new    { background:#cbd5e1; width:0%; }
.fill-weak   { background:#f87171; }
.fill-ok     { background:#fbbf24; }
.fill-good   { background:#60a5fa; }
.fill-strong { background:#4ade80; }
.matrix-stats { display:flex; justify-content:space-between; align-items:center; }
.matrix-acc  { font-size:0.72rem; color:var(--text-soft); font-weight:700; }
.matrix-drill-btn { font-size:0.68rem; font-weight:800; background:var(--sky); color:white; border:none; border-radius:50px; padding:3px 10px; cursor:pointer; transition:all 0.15s; }
.matrix-drill-btn:hover { background:var(--sky-dark); transform:scale(1.05); }
.matrix-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.matrix-summary-card { background:white; border-radius:14px; padding:14px; text-align:center; box-shadow:var(--shadow); }
.matrix-summary-num { font-family:'Fredoka One',cursive; font-size:2rem; }
.matrix-summary-label { font-size:0.72rem; color:var(--text-soft); font-weight:700; margin-top:2px; }
.matrix-filter-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.matrix-filter { background:white; border:2px solid var(--border); border-radius:50px; padding:5px 14px; font-size:0.78rem; font-weight:800; cursor:pointer; transition:all 0.15s; }
.matrix-filter.active { border-color:var(--sky); background:var(--sky); color:white; }

/* ── SPACED REPETITION ── */
.revise-section { margin-bottom:18px; }
.revise-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-family:'Fredoka One',cursive; font-size:1rem; color:var(--berry); }
.topic-card { background:white; border-radius:14px; padding:14px 12px; text-align:center; cursor:pointer; border:2px solid transparent; transition:all 0.2s cubic-bezier(.34,1.56,.64,1); position:relative; }
.topic-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.challenge-section { margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.challenge-card { background:linear-gradient(135deg,#faf5ff,#ede9fe); border:2px solid #a78bfa; border-radius:var(--radius); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; position:relative; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); box-shadow:var(--shadow); }
.challenge-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(139,92,246,0.25); }
.locked-challenge { background:#f8fafc; border-color:#cbd5e1; cursor:default; }
.locked-challenge:hover { transform:none; box-shadow:var(--shadow); }
.challenge-badge { position:absolute; top:10px; right:10px; background:var(--purple); color:white; font-size:0.6rem; font-weight:800; padding:3px 8px; border-radius:50px; white-space:nowrap; letter-spacing:0.5px; }
.challenge-title { font-family:'Fredoka One',cursive; font-size:1.1rem; color:#1e293b; margin-bottom:3px; }
.challenge-desc { font-size:0.8rem; color:#6d28d9; font-weight:600; }
.challenge-pts-tag { background:#ede9fe; color:#7c3aed; font-size:0.7rem; font-weight:800; padding:3px 10px; border-radius:50px; white-space:nowrap; }
.challenge-timer { background:#fef3c7; color:#92400e; font-size:0.75rem; font-weight:800; padding:6px 14px; border-radius:50px; text-align:center; margin-bottom:10px; display:none; }
.challenge-timer.show { display:block; }
.mastery-weak   { background:#fee2e2; color:#dc2626; }
.mastery-ok     { background:#fef9c3; color:#854d0e; }
.mastery-good   { background:#dbeafe; color:#1d4ed8; }
.mastery-strong { background:#dcfce7; color:#15803d; }

/* ── PET COLLECTIBLES & SUPERPOWERS ── */
.pet-cabinet { background:white; border-radius:20px; padding:20px; box-shadow:var(--shadow); margin-bottom:20px; }
.cabinet-title { font-family:'Fredoka One',cursive; font-size:1.1rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.collectible-shelf { display:flex; flex-wrap:wrap; gap:10px; }
.collectible-item { width:56px; height:56px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.6rem; position:relative; border:2px solid transparent; transition:all 0.2s; cursor:default; }
.collectible-item.earned { border-color:var(--border); background:#f8fafc; }
.collectible-item.earned:hover { transform:scale(1.1); box-shadow:var(--shadow); }
.collectible-item.locked-slot { background:#f1f5f9; border:2px dashed #cbd5e1; filter:grayscale(1); opacity:0.4; }
.collectible-item .coll-label { font-size:0.45rem; font-weight:800; color:var(--text-soft); margin-top:1px; text-align:center; line-height:1.1; }
.coll-rarity-pip { position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; }
.pip-common   { background:#94a3b8; }
.pip-rare     { background:#60a5fa; }
.pip-epic     { background:#a78bfa; }
.pip-legendary{ background:#fbbf24; }
.outfit-display { font-size:3rem; text-align:center; margin:8px 0; position:relative; display:inline-block; }
.outfit-overlay { font-size:1.8rem; position:absolute; top:-4px; right:-8px; }

/* Superpower bar */
.power-section { background:white; border-radius:20px; padding:20px; box-shadow:var(--shadow); margin-bottom:20px; }
.power-locked-msg { font-size:0.82rem; color:var(--text-soft); text-align:center; padding:8px 0; }
.power-card { border-radius:14px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:14px; border:2px solid transparent; }
.power-card.unlocked { border-color:var(--purple); background:#faf5ff; }
.power-card.locked-power { border-color:var(--border); background:#f8fafc; opacity:0.5; }
.power-card.active-power { border-color:#7c3aed; background:linear-gradient(135deg,#faf5ff,#ede9fe); box-shadow:0 0 0 3px #ddd6fe; }
.power-icon { font-size:2rem; flex-shrink:0; }
.power-info { flex:1; }
.power-name { font-family:'Fredoka One',cursive; font-size:0.95rem; }
.power-desc { font-size:0.75rem; color:var(--text-soft); margin-top:2px; }
.power-req  { font-size:0.7rem; font-weight:700; color:var(--purple); margin-top:3px; }
.power-use-btn { background:linear-gradient(135deg,var(--purple),#7c3aed); color:white; border:none; border-radius:50px; padding:8px 16px; font-family:'Fredoka One',cursive; font-size:0.85rem; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.power-use-btn:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(168,85,247,0.4); }
.power-use-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

/* Power button in header */
.power-btn-hud { background:linear-gradient(135deg,var(--purple),#7c3aed); color:white; border:none; border-radius:50px; padding:5px 12px; font-family:'Fredoka One',cursive; font-size:0.78rem; cursor:pointer; display:none; animation:powerPulse 1.5s ease-in-out infinite; }
@keyframes powerPulse { 0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,0.6)} 50%{box-shadow:0 0 0 8px rgba(168,85,247,0)} }
.power-active-banner { background:linear-gradient(135deg,#7c3aed,var(--purple)); color:white; border-radius:12px; padding:8px 14px; font-size:0.82rem; font-weight:800; text-align:center; margin-bottom:12px; display:none; }
.power-active-banner.show { display:block; animation:fadeSlideUp 0.3s ease; }

/* Booster backpack button in header */
.backpack-btn { position:relative; background:linear-gradient(135deg,#f59e0b,#d97706); color:white; border:none; border-radius:50px; padding:8px 14px; font-size:1.25rem; cursor:pointer; line-height:1; flex-shrink:0; }
.backpack-btn:active { transform:scale(0.95); }
.backpack-badge { position:absolute; top:-6px; right:-6px; background:#ef4444; color:white; border-radius:50%; width:20px; height:20px; font-size:0.7rem; font-weight:800; align-items:center; justify-content:center; line-height:1; font-family:'Nunito',sans-serif; }

/* Active booster pill — shown in game arena while booster is running */
.active-booster-pill { background:linear-gradient(135deg,#7c3aed,#a855f7); color:white; border-radius:50px; padding:5px 14px; font-size:0.76rem; font-weight:800; text-align:center; margin:0 auto 10px; max-width:fit-content; }

/* Booster drawer (slide-up panel) */
.booster-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1200; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.booster-drawer-overlay.show { opacity:1; pointer-events:all; }
.booster-drawer-box { background:white; border-radius:20px 20px 0 0; width:100%; max-width:520px; padding-bottom:24px; transform:translateY(100%); transition:transform 0.3s cubic-bezier(.34,1.1,.64,1); max-height:80vh; overflow-y:auto; }
.booster-drawer-overlay.show .booster-drawer-box { transform:translateY(0); }
.booster-drawer-header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px 8px; font-family:'Fredoka One',cursive; font-size:1.1rem; color:#1e293b; border-bottom:1px solid #f1f5f9; }
.booster-drawer-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid #f8fafc; cursor:pointer; transition:background 0.15s; }
.booster-drawer-item:hover { background:#faf5ff; }
.booster-drawer-item:last-child { border-bottom:none; }
.booster-drawer-active { background:linear-gradient(135deg,#f0fdf4,#dcfce7); cursor:default; }
.booster-drawer-active:hover { background:linear-gradient(135deg,#f0fdf4,#dcfce7); }
.booster-drawer-icon { font-size:2rem; flex-shrink:0; width:40px; text-align:center; }
.booster-drawer-info { flex:1; }
.booster-drawer-name { font-weight:800; font-size:0.95rem; color:#1e293b; }
.booster-drawer-count { background:#7c3aed; color:white; border-radius:50px; padding:1px 7px; font-size:0.72rem; font-weight:700; margin-left:4px; vertical-align:middle; }
.booster-drawer-tag { background:#22c55e; color:white; border-radius:50px; padding:1px 7px; font-size:0.72rem; font-weight:700; margin-left:4px; vertical-align:middle; }
.booster-drawer-desc { font-size:0.8rem; color:#64748b; margin-top:2px; }
.booster-drawer-use { background:linear-gradient(135deg,#7c3aed,#a855f7); color:white; border-radius:50px; padding:6px 14px; font-size:0.78rem; font-weight:800; flex-shrink:0; white-space:nowrap; }
.booster-drawer-use-active { background:#22c55e; font-size:1rem; padding:6px 12px; }

/* Mastery unlock modal */
.mastery-modal-items { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.mastery-modal-item { display:flex; align-items:center; gap:14px; background:#f8fafc; border-radius:14px; padding:12px 16px; animation:rewardPop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
.mastery-modal-icon { font-size:2.2rem; }

/* ── PET COMPANION ── */
.pet-wrap { display:flex; align-items:center; gap:8px; background:#f0fdf4; border:2px solid #86efac; border-radius:50px; padding:5px 10px 5px 6px; cursor:pointer; transition:all 0.2s; position:relative; }
.pet-wrap:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(34,197,94,0.2); }
.pet-emoji { font-size:1.4rem; animation:petBounce 2s ease-in-out infinite; }
/* Avatar boxes — contain the pet emoji + outfit/hat overlays in a framed box */
.pet-avatar-sm { width:42px; height:42px; background:linear-gradient(135deg,#dcfce7,#bbf7d0); border:1.5px solid #6ee7b7; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.pet-avatar-lg { width:90px; height:90px; background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:2.5px solid #86efac; border-radius:22px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; box-shadow:0 3px 10px rgba(34,197,94,0.15); }
.pet-av-outfit-sm { position:absolute; bottom:-6px; right:-6px; font-size:0.95rem; line-height:1; pointer-events:none; z-index:2; }
.pet-av-hat-sm    { position:absolute; top:-7px; left:50%; transform:translateX(-50%); font-size:0.9rem; line-height:1; pointer-events:none; z-index:2; }
.pet-av-outfit-lg { position:absolute; bottom:-10px; right:-10px; font-size:1.9rem; line-height:1; pointer-events:none; z-index:2; }
.pet-av-hat-lg    { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:1.8rem; line-height:1; pointer-events:none; z-index:2; }
@keyframes petBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.pet-info { display:flex; flex-direction:column; }
.pet-name { font-weight:800; font-size:0.72rem; color:#15803d; line-height:1; }
.pet-stage { font-size:0.62rem; color:#16a34a; }
.pet-bar-wrap { width:40px; height:5px; background:#bbf7d0; border-radius:99px; overflow:hidden; margin-top:2px; }
.pet-bar-fill { height:100%; background:linear-gradient(90deg,#22c55e,#4ade80); border-radius:99px; transition:width 0.5s ease; }

/* ── TITLE BADGE ── */
.title-badge { display:inline-flex; align-items:center; gap:5px; border-radius:50px; padding:3px 10px; font-size:0.72rem; font-weight:800; }

/* ── SPIN WIN MODAL ── */
.spin-win-modal { background:linear-gradient(160deg,#1e1b4b,#312e81,#4c1d95); color:white; border:none; max-width:380px; }
.spin-win-burst { font-size:5rem; animation:spinBurstPop 0.6s cubic-bezier(.34,1.56,.64,1) both; display:block; }
.spin-win-label { font-family:'Fredoka One',cursive; font-size:2.4rem; letter-spacing:4px; color:#fbbf24; text-shadow:0 0 20px #fbbf24, 0 2px 0 #92400e; animation:spinLabelPulse 0.8s ease-in-out infinite alternate; margin:8px 0 4px; }
.spin-win-prize { font-family:'Fredoka One',cursive; font-size:1.6rem; color:white; margin:12px 0 4px; text-shadow:0 2px 8px rgba(0,0,0,0.4); }
.spin-win-sub   { font-size:0.9rem; color:#c4b5fd; font-weight:600; }
@keyframes spinBurstPop   { from { transform:scale(0) rotate(-20deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes spinLabelPulse { from { text-shadow:0 0 10px #fbbf24, 0 2px 0 #92400e; } to { text-shadow:0 0 30px #fbbf24, 0 0 60px #f59e0b, 0 2px 0 #92400e; } }

/* ── DAILY CHEST ── */
.chest-modal-rewards { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.chest-reward-item { display:flex; align-items:center; gap:12px; background:#f8fafc; border-radius:12px; padding:12px 16px; border:2px solid var(--border); animation:rewardPop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes rewardPop { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
.chest-reward-icon { font-size:2rem; }
.chest-reward-text { font-weight:800; font-size:1rem; }
.chest-reward-sub  { font-size:0.8rem; color:var(--text-soft); }
.streak-flames { display:flex; gap:2px; justify-content:center; margin:8px 0; }
.streak-flame { font-size:1.4rem; opacity:0.25; transition:all 0.3s; }
.streak-flame.lit { opacity:1; animation:flamePop 0.3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes flamePop { from{transform:scale(0)} to{transform:scale(1)} }

/* ── WEEKLY CHALLENGE ── */
.wc-card { background:white; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:3px solid var(--purple); margin-bottom:16px; }
.wc-title { font-family:'Fredoka One',cursive; font-size:1.1rem; color:var(--purple); margin-bottom:4px; }
.wc-desc { font-size:0.85rem; color:var(--text-soft); margin-bottom:12px; }
.challenge-progress-wrap { height:12px; background:#f1f5f9; border-radius:99px; overflow:hidden; margin-bottom:6px; }
.challenge-progress-fill { height:100%; background:linear-gradient(90deg,var(--purple),#c084fc); border-radius:99px; transition:width 0.5s ease; }
.challenge-progress-label { font-size:0.75rem; font-weight:700; color:var(--purple); display:flex; justify-content:space-between; }
.challenge-reward { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:0.8rem; font-weight:700; color:var(--text-soft); }
.wc-complete { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:var(--grass); }
.wc-complete .wc-title { color:var(--grass-dark); }

/* ── SEASONAL EVENT ── */
.season-banner { border-radius:var(--radius); padding:16px 20px; margin-bottom:20px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); }
.season-banner-icon { font-size:2.5rem; }
.season-banner-text .season-name { font-family:'Fredoka One',cursive; font-size:1.1rem; }
.season-banner-text .season-desc { font-size:0.8rem; opacity:0.85; margin-top:2px; }
.season-char-unlock { margin-top:10px; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.4); border-radius:12px; padding:8px 12px; }

/* ── PROGRESS MAP ── */
.progress-map { display:flex; flex-direction:column; gap:0; margin-bottom:24px; }
.map-node { display:flex; align-items:center; gap:14px; padding:12px 0; position:relative; }
.map-node:not(:last-child)::after { content:''; position:absolute; left:19px; top:52px; width:2px; height:calc(100% - 10px); background:var(--border); z-index:0; }
.map-node.reached:not(:last-child)::after { background:linear-gradient(180deg,var(--grass),var(--sky)); }
.map-dot { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:3px solid var(--border); background:#f8fafc; flex-shrink:0; z-index:1; transition:all 0.3s; }
.map-node.reached .map-dot { background:linear-gradient(135deg,var(--grass),#4ade80); border-color:var(--grass); box-shadow:0 0 0 4px #dcfce7; }
.map-node.current .map-dot { background:linear-gradient(135deg,var(--sky),#38bdf8); border-color:var(--sky); box-shadow:0 0 0 4px #bfdbfe; animation:currentPulse 2s infinite; }
@keyframes currentPulse { 0%,100%{box-shadow:0 0 0 4px #bfdbfe} 50%{box-shadow:0 0 0 8px #bfdbfe80} }
.map-node.locked .map-dot { filter:grayscale(1); opacity:0.5; }
.map-info { flex:1; }
.map-title { font-family:'Fredoka One',cursive; font-size:0.95rem; }
.map-sub { font-size:0.78rem; color:var(--text-soft); margin-top:1px; }
.map-reward { font-size:0.72rem; font-weight:700; color:var(--grass-dark); margin-top:3px; }

/* ── SHOP ── */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.shop-card { background:white; border-radius:var(--radius); padding:24px 18px; text-align:center; box-shadow:var(--shadow); border:3px solid transparent; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); position:relative; display:flex; flex-direction:column; }
.shop-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.shop-card.featured { border-color:var(--sun); background:linear-gradient(135deg,#fffbeb,#fef9c3); }
.shop-card.featured::before { content:'⭐ BEST VALUE'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--sun); color:#78350f; font-size:0.65rem; font-weight:800; padding:3px 10px; border-radius:50px; white-space:nowrap; }
.shop-card.booster { border-color:#ddd6fe; background:linear-gradient(135deg,#faf5ff,#ede9fe); }
.shop-card.booster::before { content:'🚀 BOOSTER'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--purple); color:white; font-size:0.65rem; font-weight:800; padding:3px 10px; border-radius:50px; white-space:nowrap; }
.shop-card.hat-card { border-color:#fde68a; background:linear-gradient(135deg,#fffbeb,#fef9c3); }
.hat-preview { font-size:2.6rem; margin-bottom:10px; line-height:1; }
.shop-category-label { font-family:'Fredoka One',cursive; font-size:0.75rem; color:var(--text-soft); text-transform:uppercase; letter-spacing:1px; margin:18px 0 8px; }
.shop-full-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-bottom:10px; }
.shop-cat-header { grid-column:1/-1; font-family:'Fredoka One',cursive; font-size:0.75rem; color:var(--text-soft); text-transform:uppercase; letter-spacing:1px; margin-top:10px; }
.shop-card.mystery { border-color:#c7d2fe; background:linear-gradient(135deg,#eef2ff,#e0e7ff); animation:mysteryGlow 2s ease-in-out infinite; }
@keyframes mysteryGlow { 0%,100%{box-shadow:var(--shadow)} 50%{box-shadow:0 0 20px rgba(99,102,241,0.35)} }
.shop-card.mystery::before { content:'🎲 MYSTERY'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#6366f1; color:white; font-size:0.65rem; font-weight:800; padding:3px 10px; border-radius:50px; white-space:nowrap; }
.shop-card-icon { font-size:2.8rem; margin-bottom:10px; }
.shop-card-name { font-family:'Fredoka One',cursive; font-size:1.1rem; margin-bottom:4px; }
.shop-card-desc { font-size:0.8rem; color:var(--text-soft); margin-bottom:10px; flex:1; }
.shop-card-cost { display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:1rem; margin-bottom:12px; }
.shop-card-cost .pts { color:var(--sky-dark); }
.shop-card-cost .gets { color:var(--text-soft); font-size:0.85rem; }
.shop-card-cost .energy-get { color:#d97706; }
.shop-btn { width:100%; padding:10px; border-radius:50px; border:none; font-family:'Nunito',sans-serif; font-weight:800; font-size:0.95rem; cursor:pointer; transition:all 0.2s cubic-bezier(.34,1.56,.64,1); margin-top:auto; }
.shop-btn:hover { transform:translateY(-2px); }
.shop-btn.can-afford { background:linear-gradient(135deg,var(--sun),#fde047); color:#78350f; box-shadow:0 4px 14px rgba(251,191,36,0.4); }
.shop-btn.cant-afford { background:#f1f5f9; color:var(--text-soft); cursor:not-allowed; }
.shop-btn.owned-btn { background:linear-gradient(135deg,#bbf7d0,#86efac); color:#166534; cursor:default; }
.shop-btn.purple-btn { background:linear-gradient(135deg,var(--purple),#7c3aed); color:white; box-shadow:0 4px 14px rgba(168,85,247,0.4); }
.shop-section-title { font-family:'Fredoka One',cursive; font-size:1.3rem; margin-bottom:6px; color:var(--text); }
.shop-section-sub { font-size:0.85rem; color:var(--text-soft); margin-bottom:20px; }
.shop-divider { border:none; border-top:2px dashed var(--border); margin:24px 0; }
.owned-badge { position:absolute; top:-12px; right:12px; background:#22c55e; color:white; font-size:0.6rem; font-weight:800; padding:3px 8px; border-radius:50px; }
.frame-preview { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 10px; }
.spin-result { font-size:1.2rem; font-weight:800; color:var(--purple); margin-top:8px; min-height:1.5rem; }
.ad-card { background:white; border-radius:var(--radius); padding:24px 18px; text-align:center; box-shadow:var(--shadow); border:3px solid #bfdbfe; position:relative; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); }
.ad-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.ad-card-icon { font-size:2.8rem; margin-bottom:10px; }
.ad-card-name { font-family:'Fredoka One',cursive; font-size:1.1rem; margin-bottom:4px; }
.ad-card-desc { font-size:0.8rem; color:var(--text-soft); margin-bottom:14px; }
.ad-card-reward { font-weight:800; font-size:1rem; color:var(--sky-dark); margin-bottom:14px; }
.ad-cooldown { font-size:0.75rem; color:var(--text-soft); margin-top:8px; }
.ad-progress { width:100%; height:6px; background:#e2e8f0; border-radius:99px; overflow:hidden; margin-top:6px; display:none; }
.ad-progress-fill { height:100%; background:linear-gradient(90deg,var(--sky),var(--purple)); border-radius:99px; transition:width 0.1s linear; }
.shop-balance { display:flex; align-items:center; gap:10px; background:white; border-radius:14px; padding:14px 20px; box-shadow:var(--shadow); margin-bottom:24px; }
.shop-balance-icon { font-size:1.6rem; }
.shop-balance-text { font-size:0.9rem; color:var(--text-soft); }
.shop-balance-text strong { font-size:1.2rem; color:var(--sky-dark); }

/* ── LEADERBOARD ── */
.lb-setup { background:white; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); text-align:center; max-width:420px; margin:0 auto 24px; }
.lb-setup-emoji { font-size:3rem; margin-bottom:8px; }
.lb-setup-title { font-family:'Fredoka One',cursive; font-size:1.3rem; margin-bottom:6px; }
.lb-setup-sub { font-size:0.85rem; color:var(--text-soft); margin-bottom:16px; }
.lb-nickname-input { width:100%; padding:12px 16px; border-radius:12px; border:2px solid var(--border); font-family:'Nunito',sans-serif; font-size:1rem; font-weight:700; text-align:center; outline:none; transition:border-color 0.2s; margin-bottom:12px; }
.lb-nickname-input:focus { border-color:var(--sky); }
.lb-tabs { display:flex; gap:8px; margin-bottom:20px; }
.lb-tab { flex:1; padding:8px; border-radius:50px; border:2px solid var(--border); background:white; font-weight:700; font-size:0.85rem; cursor:pointer; transition:all 0.2s; color:var(--text-soft); }
.lb-tab.active { background:linear-gradient(135deg,var(--sky),#38bdf8); color:white; border-color:var(--sky); }
.lb-table { background:white; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.lb-row { display:grid; grid-template-columns:40px 1fr auto auto; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); transition:background 0.15s; }
.lb-row:last-child { border-bottom:none; }
.lb-row.me { background:linear-gradient(90deg,#ede9fe,#dbeafe); border-left:4px solid var(--purple); font-weight:800; }
.lb-row.top1 { background:linear-gradient(90deg,#fffbeb,#fef9c3); }
.lb-row.top2 { background:linear-gradient(90deg,#f8fafc,#f1f5f9); }
.lb-row.top3 { background:linear-gradient(90deg,#fff7ed,#ffedd5); }
.lb-rank { font-family:'Fredoka One',cursive; font-size:1.1rem; text-align:center; }
.lb-player { display:flex; align-items:center; gap:8px; }
.lb-avatar { font-size:1.3rem; }
.lb-name { font-weight:800; font-size:0.9rem; }
.lb-name .you-tag { font-size:0.65rem; background:var(--purple); color:white; padding:1px 6px; border-radius:50px; margin-left:4px; font-weight:800; vertical-align:middle; }
.lb-score { font-family:'Fredoka One',cursive; font-size:1rem; color:var(--sky-dark); text-align:right; }
.lb-score-label { font-size:0.65rem; color:var(--text-soft); display:block; text-align:right; }
.lb-empty { text-align:center; padding:40px 20px; color:var(--text-soft); }
.lb-refresh { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.lb-refresh-btn { background:none; border:2px solid var(--border); border-radius:50px; padding:5px 14px; font-size:0.8rem; font-weight:700; cursor:pointer; color:var(--text-soft); transition:all 0.2s; }
.lb-refresh-btn:hover { border-color:var(--sky); color:var(--sky-dark); }
.lb-your-rank { font-size:0.85rem; color:var(--text-soft); }

/* ── AUTH ── */
.auth-header-btn { background:linear-gradient(135deg,var(--sky),#38bdf8); color:white; border:none; border-radius:50px; padding:6px 16px; font-family:'Nunito',sans-serif; font-weight:800; font-size:0.85rem; cursor:pointer; transition:all 0.2s; }
.auth-header-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(14,165,233,0.3); }
.auth-header-btn.signed-in { background:linear-gradient(135deg,var(--grass),#4ade80); }
.auth-input { width:100%; padding:12px 16px; border-radius:12px; border:2px solid var(--border); font-family:'Nunito',sans-serif; font-size:1rem; font-weight:600; outline:none; transition:border-color 0.2s; margin-bottom:10px; }
.auth-input:focus { border-color:var(--sky); }
.auth-error { color:var(--berry); font-size:0.85rem; font-weight:700; margin-bottom:10px; min-height:1.2rem; }
.auth-switch { font-size:0.85rem; color:var(--text-soft); margin-top:12px; }
.auth-switch span { color:var(--sky-dark); font-weight:700; cursor:pointer; text-decoration:underline; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:14px 0; color:var(--text-soft); font-size:0.8rem; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

@media (min-width:600px) {
  .topic-grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
}

@media (max-width:500px) {
  .q-text { font-size:1.6rem; }
  .answers-grid { gap:10px; }
  .answer-btn { font-size:1.2rem; padding:14px 8px; }
  .tabs { gap:6px; }
  .tab { padding:8px 14px; font-size:0.9rem; }
  .game-body { padding:20px 16px; }
  .characters-grid { grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); }
}

/* ── PARENTAL CONTROLS ── */
/* PIN digit boxes */
.pin-input-row {
  display:flex; gap:12px; justify-content:center; margin:0 0 4px;
}
.pin-digit {
  width:52px; height:58px;
  border:2px solid #d1d5db; border-radius:12px;
  font-size:1.6rem; font-weight:800; text-align:center;
  background:#fff; color:var(--text);
  outline:none; transition:border-color 0.15s;
  -moz-appearance:textfield;
}
.pin-digit:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,58,237,0.15); }
.pin-digit::-webkit-outer-spin-button,
.pin-digit::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Shake animation for wrong PIN */
@keyframes pinShake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-8px); }
  40%      { transform:translateX(8px); }
  60%      { transform:translateX(-6px); }
  80%      { transform:translateX(6px); }
}
.pin-shake { animation:pinShake 0.55s ease; }

/* Parent Zone card in Journey tab */
.parent-zone-card {
  background:#faf5ff;
  border:1.5px solid #ddd6fe;
  border-radius:16px;
  padding:18px 20px;
  margin-top:20px;
}