/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-primary:#6C5CE7;--c-primary-light:#A29BFE;--c-primary-dark:#5A4BD1;
  --c-green:#00B894;--c-green-light:#55EFC4;--c-green-dark:#00997B;
  --c-yellow:#FDCB6E;--c-yellow-dark:#F0A500;
  --c-red:#FF6B6B;--c-red-light:#FF8E8E;--c-red-dark:#EE5A24;
  --c-blue:#74B9FF;--c-blue-dark:#0984E3;
  --c-orange:#E17055;--c-pink:#FD79A8;--c-teal:#00CEC9;
  --c-bg-start:#667eea;--c-bg-end:#764ba2;
  --c-card:#FFFFFF;--c-text:#2D3436;--c-text-light:#636E72;--c-text-white:#FFF;
  --shadow:0 4px 15px rgba(0,0,0,.15);--shadow-lg:0 8px 30px rgba(0,0,0,.2);
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --font-main:'Nunito',system-ui,sans-serif;
  --font-code:'Fira Code',monospace;
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}
html{font-size:16px}
body{
  font-family:var(--font-main);color:var(--c-text);
  background:linear-gradient(135deg,var(--c-bg-start),var(--c-bg-end));
  min-height:100vh;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:var(--font-main);cursor:pointer;border:none;outline:none}
button:active{transform:scale(.96)}
#app{min-height:100vh;position:relative}
#toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}

/* ===== SCREEN ===== */
.screen{
  min-height:100vh;padding:0;display:none;flex-direction:column;
  animation:fadeIn .4s ease;
}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes confetti-fall{0%{transform:translateY(-100%) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ===== STATS BAR ===== */
.stats-bar{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  padding:10px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;border-bottom:2px solid rgba(108,92,231,.15);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.stats-bar__left{display:flex;align-items:center;gap:8px}
.stats-bar__back{
  width:36px;height:36px;border-radius:50%;background:var(--c-primary);
  color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);flex-shrink:0;
}
.stats-bar__back:hover{background:var(--c-primary-dark);transform:scale(1.1)}
.stats-bar__title{font-weight:800;font-size:1.1rem;color:var(--c-text)}
.stats-bar__stats{display:flex;gap:16px;align-items:center}
.stat-badge{
  display:flex;align-items:center;gap:5px;font-weight:700;font-size:.9rem;
  background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:4px 12px;
  border-radius:20px;white-space:nowrap;
}
.stat-badge.xp{color:var(--c-primary)}
.stat-badge.coins{color:var(--c-yellow-dark)}
.stat-badge.lives{color:var(--c-red)}
.stat-badge .icon{font-size:1.1rem}

/* ===== MAIN MENU ===== */
.menu-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:30px;min-height:100vh;
}
.menu-logo{font-size:4rem;animation:bounce 2s infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.menu-title{
  font-size:2.5rem;font-weight:900;color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.3);text-align:center;
}
.menu-subtitle{font-size:1.1rem;color:rgba(255,255,255,.85);text-align:center;margin-top:-15px}
.menu-buttons{display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px}
.menu-btn{
  padding:18px 30px;border-radius:var(--radius);font-size:1.2rem;font-weight:800;
  color:#fff;transition:var(--transition);display:flex;align-items:center;
  justify-content:center;gap:12px;box-shadow:var(--shadow);
}
.menu-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.menu-btn.play{background:linear-gradient(135deg,var(--c-green),var(--c-green-dark))}
.menu-btn.collection{background:linear-gradient(135deg,var(--c-blue),var(--c-blue-dark))}
.menu-btn.achievements{background:linear-gradient(135deg,var(--c-yellow),var(--c-yellow-dark))}
.menu-btn.settings{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark))}
.menu-btn .emoji{font-size:1.5rem}
.menu-stats-row{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-top:10px;
}
.menu-stat{
  background:rgba(255,255,255,.2);backdrop-filter:blur(5px);
  padding:8px 16px;border-radius:20px;color:#fff;font-weight:700;
  font-size:.9rem;display:flex;align-items:center;gap:6px;
}

/* ===== MAP SCREEN ===== */
.map-screen{padding:0 0 40px}
.map-header{
  text-align:center;padding:30px 20px 20px;color:#fff;
}
.map-header h2{font-size:1.8rem;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.map-header p{opacity:.85;margin-top:5px}
.map-path{
  display:flex;flex-direction:column;align-items:center;
  padding:0 20px;gap:0;position:relative;
}
.map-connector{
  width:4px;height:40px;background:rgba(255,255,255,.3);
  border-radius:2px;
}
.map-connector.active{background:var(--c-green);box-shadow:0 0 10px rgba(0,184,148,.5)}

/* ===== TOPIC CARD (MAP) ===== */
.topic-card{
  width:100%;max-width:420px;background:var(--c-card);
  border-radius:var(--radius);padding:20px;cursor:pointer;
  box-shadow:var(--shadow);transition:var(--transition);
  display:flex;align-items:center;gap:16px;position:relative;
  overflow:hidden;
}
.topic-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:6px;
  border-radius:3px;
}
.topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.topic-card.locked{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
.topic-card.locked:hover{transform:none;box-shadow:var(--shadow)}
.topic-card.completed{border:2px solid var(--c-green)}
.topic-card__icon{
  width:60px;height:60px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:2rem;
  flex-shrink:0;color:#fff;
}
.topic-card__info{flex:1;min-width:0}
.topic-card__title{font-weight:800;font-size:1.15rem;color:var(--c-text)}
.topic-card__desc{font-size:.85rem;color:var(--c-text-light);margin-top:3px}
.topic-card__progress{margin-top:8px;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}
.topic-card__progress-fill{height:100%;border-radius:3px;transition:width .5s ease}
.topic-card__stars{display:flex;gap:3px;margin-top:6px}
.topic-card__lock{
  width:40px;height:40px;border-radius:50%;background:#e9ecef;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;color:#adb5bd;
}

/* ===== GAME SCREEN ===== */
.game-screen{padding:0 0 40px}
.game-container{
  max-width:600px;margin:0 auto;padding:20px;
  display:flex;flex-direction:column;gap:20px;
  animation:slideUp .4s ease;
}
.game-header{text-align:center;padding:20px 0 0}
.game-header h3{font-size:1.4rem;font-weight:800;color:#fff}
.game-header .game-type-badge{
  display:inline-block;padding:4px 14px;border-radius:20px;
  font-size:.8rem;font-weight:700;color:#fff;margin-top:8px;
}
.game-progress-bar{
  width:100%;height:8px;background:rgba(255,255,255,.2);
  border-radius:4px;overflow:hidden;margin-top:12px;
}
.game-progress-fill{
  height:100%;background:var(--c-green);border-radius:4px;
  transition:width .4s ease;
}

/* ===== GAME CARD (shared) ===== */
.game-card{
  background:var(--c-card);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
  min-height:200px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}

/* ===== FLASHCARD ===== */
.flashcard-wrapper{perspective:1000px;width:100%;max-width:520px;height:320px;cursor:pointer}
.flashcard{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.flashcard.flipped{transform:rotateY(180deg)}
.flashcard__face{
  position:absolute;width:100%;height:100%;backface-visibility:hidden;
  border-radius:var(--radius);padding:30px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.flashcard__front{
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-light));
  color:#fff;
}
.flashcard__back{
  background:linear-gradient(135deg,var(--c-green),var(--c-green-light));
  color:#fff;transform:rotateY(180deg);
}
.flashcard__label{font-size:.8rem;opacity:.8;margin-bottom:10px;text-transform:uppercase;letter-spacing:2px}
.flashcard__text{font-size:1.2rem;font-weight:700;line-height:1.5}
.flashcard__hint{margin-top:15px;font-size:.85rem;opacity:.7}
.flashcard-buttons{display:flex;gap:12px;margin-top:16px;width:100%;max-width:400px}
.flashcard-btn{
  flex:1;padding:14px;border-radius:var(--radius-sm);font-size:1rem;
  font-weight:700;color:#fff;transition:var(--transition);
}
.flashcard-btn.known{background:var(--c-green)}
.flashcard-btn.known:hover{background:var(--c-green-dark)}
.flashcard-btn.unknown{background:var(--c-red)}
.flashcard-btn.unknown:hover{background:var(--c-red-dark)}
.flashcard-counter{
  color:rgba(255,255,255,.8);font-weight:600;text-align:center;margin-top:10px;
}

/* ===== TRUE/FALSE ===== */
.tf-statement{
  font-size:1.25rem;font-weight:700;text-align:center;
  padding:30px 20px;color:var(--c-text);line-height:1.5;
}
.tf-buttons{display:flex;gap:14px;width:100%;max-width:400px}
.tf-btn{
  flex:1;padding:18px;border-radius:var(--radius-sm);font-size:1.1rem;
  font-weight:800;color:#fff;transition:var(--transition);
}
.tf-btn.true{background:var(--c-green);color:#fff}
.tf-btn.false{background:var(--c-red);color:#fff}
.tf-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tf-btn.disabled{pointer-events:none;opacity:.5}

/* ===== QUIZ ===== */
.quiz-question{
  font-size:1.2rem;font-weight:700;text-align:center;
  padding:20px;color:var(--c-text);line-height:1.5;
}
.quiz-options{display:flex;flex-direction:column;gap:10px;width:100%}
.quiz-option{
  padding:16px 20px;border-radius:var(--radius-sm);
  background:#f1f2f6;font-weight:700;font-size:1rem;color:#1a1a2e;
  text-align:left;transition:var(--transition);
  border:3px solid transparent;
}
.quiz-option:hover{background:#dfe6e9;border-color:var(--c-primary-light)}
.quiz-option.correct{background:#d4edda;border-color:var(--c-green);color:var(--c-green-dark)}
.quiz-option.wrong{background:#f8d7da;border-color:var(--c-red);color:var(--c-red-dark)}
.quiz-option.disabled{pointer-events:none}
.quiz-option code{
  font-family:var(--font-code);background:rgba(0,0,0,.08);
  padding:2px 8px;border-radius:4px;font-size:.95rem;
}

/* ===== ALGORITHM BUILDER ===== */
.algo-area{width:100%;padding:10px 0}
.algo-step{
  padding:14px 18px;background:#f1f2f6;border-radius:var(--radius-sm);
  margin-bottom:8px;font-weight:700;display:flex;align-items:center;
  gap:12px;cursor:grab;user-select:none;transition:var(--transition);
  border:2px solid transparent;color:#1a1a2e;
}
.algo-step:active{cursor:grabbing;box-shadow:var(--shadow)}
.algo-step.dragging{opacity:.4}
.algo-step .step-num{
  width:28px;height:28px;border-radius:50%;background:var(--c-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}
.algo-step.correct{background:#d4edda;border-color:var(--c-green)}
.algo-step.wrong{background:#f8d7da;border-color:var(--c-red)}
.algo-step.selected{border-color:var(--c-primary);background:rgba(108,92,231,.1)}

/* ===== DRAG & MATCH ===== */
.match-area{display:flex;gap:20px;width:100%;justify-content:center;flex-wrap:wrap}
.match-column{display:flex;flex-direction:column;gap:10px;flex:1;max-width:250px}
.match-item{
  padding:14px;background:#f1f2f6;border-radius:var(--radius-sm);
  font-weight:700;text-align:center;cursor:pointer;
  transition:var(--transition);border:3px solid transparent;
  min-height:50px;display:flex;align-items:center;justify-content:center;color:#1a1a2e;
}
.match-item:hover{background:#dfe6e9}
.match-item.selected{border-color:var(--c-primary);background:rgba(108,92,231,.1);transform:scale(1.03)}
.match-item.matched{background:#d4edda;border-color:var(--c-green);pointer-events:none}
.match-item.wrong-match{background:#f8d7da;border-color:var(--c-red);animation:shake .4s}
.match-label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:1px;
  color:rgba(255,255,255,.7);font-weight:700;text-align:center;
  margin-bottom:4px;
}

/* ===== CONNECT PAIRS (canvas) ===== */
.pairs-container{position:relative;width:100%;min-height:300px}
.pairs-items{display:flex;justify-content:space-between;padding:0 10px}
.pairs-column{display:flex;flex-direction:column;gap:12px}
.pairs-item{
  padding:12px 18px;background:#f1f2f6;border-radius:var(--radius-sm);
  font-weight:700;cursor:pointer;transition:var(--transition);
  border:3px solid transparent;text-align:center;min-width:120px;
}
.pairs-item:hover{background:#dfe6e9}
.pairs-item.selected{border-color:var(--c-primary);background:rgba(108,92,231,.1)}
.pairs-item.connected{background:#d4edda;border-color:var(--c-green);pointer-events:none}
.pairs-item.wrong-conn{background:#f8d7da;border-color:var(--c-red);animation:shake .4s}
.pairs-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}

/* ===== CODE BUILDER ===== */
.code-lines{display:flex;flex-direction:column;gap:8px;width:100%}
.code-line{
  padding:12px 16px;background:#2d2d2d;color:#f8f8f2;
  border-radius:var(--radius-xs);font-family:var(--font-code);
  font-size:.95rem;cursor:grab;user-select:none;
  display:flex;align-items:center;gap:10px;
  transition:var(--transition);border:2px solid transparent;
}
.code-line:active{cursor:grabbing}
.code-line.dragging{opacity:.4}
.code-line .line-num{
  color:#6272a4;font-size:.8rem;width:24px;text-align:right;flex-shrink:0;
}
.code-line.selected{border-color:var(--c-yellow)}
.code-line.correct{border-color:var(--c-green);background:#1a3a1a}
.code-line.wrong{border-color:var(--c-red);background:#3a1a1a}

/* ===== FIND BUG ===== */
.bug-code{width:100%;background:#282a36;border-radius:var(--radius-sm);padding:16px;overflow-x:auto}
.bug-line{
  padding:8px 12px;font-family:var(--font-code);font-size:.9rem;
  color:#f8f8f2;cursor:pointer;transition:var(--transition);
  border-radius:4px;display:flex;align-items:center;gap:10px;
  border:2px solid transparent;
}
.bug-line:hover{background:rgba(255,255,255,.1)}
.bug-line.selected{border-color:var(--c-yellow);background:rgba(253,203,110,.15)}
.bug-line.correct{border-color:var(--c-green);background:rgba(0,184,148,.15)}
.bug-line.wrong{border-color:var(--c-red);background:rgba(255,107,107,.15)}
.bug-line .ln{color:#6272a4;min-width:28px;text-align:right}
.bug-line .kw{color:#ff79c6}.bug-line .str{color:#f1fa8c}
.bug-line .fn{color:#50fa7b}.bug-line .cm{color:#6272a4}

/* ===== FILL GAP ===== */
.fill-code{
  background:#282a36;border-radius:var(--radius-sm);padding:20px;
  font-family:var(--font-code);font-size:1rem;color:#f8f8f2;
  text-align:center;line-height:2;white-space:pre-wrap;
}
.fill-gap{
  display:inline-block;min-width:80px;padding:4px 12px;
  border-bottom:3px dashed var(--c-yellow);margin:0 4px;
  color:var(--c-yellow);font-weight:700;
}
.fill-gap.filled{border-bottom-style:solid;border-color:var(--c-primary);color:var(--c-primary)}
.fill-gap.correct{border-color:var(--c-green);color:var(--c-green)}
.fill-gap.wrong{border-color:var(--c-red);color:var(--c-red)}
.fill-options{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.fill-opt{
  padding:10px 20px;background:#f1f2f6;border-radius:var(--radius-sm);
  font-family:var(--font-code);font-weight:700;font-size:1rem;color:#1a1a2e;
  transition:var(--transition);border:2px solid transparent;
}
.fill-opt:hover{border-color:var(--c-primary-light);background:#dfe6e9}
.fill-opt.selected{border-color:var(--c-primary);background:rgba(108,92,231,.1)}
.fill-opt.correct{border-color:var(--c-green);background:#d4edda}
.fill-opt.wrong{border-color:var(--c-red);background:#f8d7da}
.fill-opt.disabled{pointer-events:none;opacity:.5}

/* ===== ODD ONE OUT ===== */
.odd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;width:100%}
.odd-item{
  padding:16px;background:#f1f2f6;border-radius:var(--radius-sm);
  text-align:center;font-weight:700;font-size:1.1rem;color:#1a1a2e;
  cursor:pointer;transition:var(--transition);border:3px solid transparent;
}
.odd-item:hover{background:#dfe6e9;transform:translateY(-2px)}
.odd-item.selected{border-color:var(--c-primary);background:rgba(108,92,231,.1)}
.odd-item.correct{border-color:var(--c-green);background:#d4edda}
.odd-item.wrong{border-color:var(--c-red);background:#f8d7da;animation:shake .4s}

/* ===== MYTH/TRUTH ===== */
.myth-card{
  background:linear-gradient(135deg,#ffeaa7,#fdcb6e);
  border-radius:var(--radius);padding:30px;text-align:center;
  box-shadow:var(--shadow);max-width:450px;width:100%;
}
.myth-card .myth-emoji{font-size:3rem;margin-bottom:12px}
.myth-card .myth-text{font-size:1.2rem;font-weight:700;line-height:1.5}

/* ===== FIX CODE ===== */
.fix-code{width:100%;background:#282a36;border-radius:var(--radius-sm);padding:16px}
.fix-line{
  padding:8px 12px;font-family:var(--font-code);font-size:.9rem;
  color:#f8f8f2;transition:var(--transition);
  border:2px solid transparent;border-radius:4px;
  display:flex;align-items:center;gap:10px;
}
.fix-line.wrong{border-color:var(--c-red);background:rgba(255,107,107,.1);cursor:pointer}
.fix-line.wrong:hover{background:rgba(255,107,107,.2)}
.fix-options{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.fix-opt{
  padding:10px 16px;background:#f1f2f6;border-radius:var(--radius-sm);
  font-family:var(--font-code);font-weight:600;font-size:.9rem;color:#1a1a2e;
  transition:var(--transition);border:2px solid transparent;cursor:pointer;
}
.fix-opt:hover{border-color:var(--c-primary-light)}
.fix-opt.selected{border-color:var(--c-primary)}
.fix-opt.correct{border-color:var(--c-green);background:#d4edda}
.fix-opt.wrong{border-color:var(--c-red);background:#f8d7da}
.fix-opt.disabled{pointer-events:none;opacity:.5}

/* ===== EXPLANATION ===== */
.explanation{
  background:linear-gradient(135deg,#dfe6e9,#b2bec3);
  border-radius:var(--radius-sm);padding:16px 20px;
  font-size:.95rem;line-height:1.6;color:var(--c-text);
  margin-top:10px;width:100%;
}
.explanation strong{color:var(--c-primary)}
.explanation .correct-text{color:var(--c-green-dark);font-weight:700}
.explanation .wrong-text{color:var(--c-red-dark);font-weight:700}
.explanation code{
  font-family:var(--font-code);background:rgba(0,0,0,.08);
  padding:1px 6px;border-radius:3px;
}

/* ===== NEXT BUTTON ===== */
.next-btn{
  padding:14px 40px;border-radius:var(--radius-sm);font-size:1.1rem;
  font-weight:800;color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-light));
  box-shadow:var(--shadow);transition:var(--transition);margin-top:10px;
}
.next-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ===== RESULTS SCREEN ===== */
.results-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:20px;min-height:100vh;text-align:center;
}
.results-emoji{font-size:5rem;animation:popIn .6s ease}
.results-title{font-size:1.8rem;font-weight:900;color:#fff}
.results-subtitle{font-size:1rem;color:rgba(255,255,255,.8)}
.results-stats{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
}
.result-stat{
  background:rgba(255,255,255,.2);backdrop-filter:blur(5px);
  padding:16px 24px;border-radius:var(--radius);text-align:center;
  min-width:100px;
}
.result-stat .value{font-size:1.8rem;font-weight:900;color:#fff}
.result-stat .label{font-size:.8rem;color:rgba(255,255,255,.8);margin-top:4px}
.results-stars{display:flex;gap:8px;font-size:2.5rem}
.results-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.results-btn{
  padding:14px 28px;border-radius:var(--radius-sm);font-size:1rem;
  font-weight:700;color:#fff;transition:var(--transition);
}
.results-btn.primary{background:var(--c-green)}
.results-btn.secondary{background:var(--c-primary)}
.results-btn.tertiary{background:rgba(255,255,255,.2)}

/* ===== COLLECTION SCREEN ===== */
.collection-screen{padding:20px}
.collection-header{
  text-align:center;padding:30px 20px;color:#fff;
}
.collection-header h2{font-size:1.8rem;font-weight:900}
.collection-topics{display:flex;flex-direction:column;gap:12px;max-width:500px;margin:0 auto;padding:0 20px}
.collection-topic{
  background:rgba(255,255,255,.95);border-radius:var(--radius-sm);
  padding:16px 20px;cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;gap:12px;
}
.collection-topic:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.collection-topic__icon{font-size:1.8rem}
.collection-topic__title{font-weight:700;flex:1}
.collection-topic__arrow{color:var(--c-text-light);font-size:1.2rem}
.collection-detail{padding:20px;max-width:500px;margin:0 auto}
.collection-detail h3{font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:16px}
.collection-cards{display:flex;flex-direction:column;gap:10px}
.collection-card-item{
  background:rgba(255,255,255,.95);border-radius:var(--radius-sm);
  padding:16px 20px;cursor:pointer;transition:var(--transition);
}
.collection-card-item:hover{box-shadow:var(--shadow)}
.collection-card-item .q{font-weight:700;margin-bottom:6px}
.collection-card-item .a{
  color:var(--c-text-light);font-size:.9rem;display:none;
  padding-top:8px;border-top:1px solid #eee;margin-top:8px;
}
.collection-card-item.open .a{display:block}
.collection-card-item.hard{border-left:4px solid var(--c-yellow)}

/* ===== ACHIEVEMENTS SCREEN ===== */
.achievements-screen{padding:20px}
.achievements-header{text-align:center;padding:30px 20px;color:#fff}
.achievements-header h2{font-size:1.8rem;font-weight:900}
.achievements-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;max-width:700px;margin:0 auto;padding:0 20px;
}
.achievement-card{
  background:rgba(255,255,255,.95);border-radius:var(--radius);
  padding:20px;display:flex;gap:14px;align-items:center;
  transition:var(--transition);
}
.achievement-card.locked{opacity:.4;filter:grayscale(.8)}
.achievement-card.unlocked{box-shadow:0 0 20px rgba(253,203,110,.3)}
.achievement-icon{font-size:2.2rem;flex-shrink:0}
.achievement-info{flex:1}
.achievement-name{font-weight:800;font-size:1rem}
.achievement-desc{font-size:.8rem;color:var(--c-text-light);margin-top:3px}
.achievement-reward{font-size:.75rem;color:var(--c-primary);font-weight:700;margin-top:4px}

/* ===== SETTINGS SCREEN ===== */
.settings-screen{padding:20px}
.settings-header{text-align:center;padding:30px 20px;color:#fff}
.settings-header h2{font-size:1.8rem;font-weight:900}
.settings-list{
  max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:12px;
  padding:0 20px;
}
.setting-item{
  background:rgba(255,255,255,.95);border-radius:var(--radius-sm);
  padding:18px 20px;display:flex;align-items:center;justify-content:space-between;
}
.setting-label{font-weight:700}
.setting-toggle{
  width:52px;height:28px;border-radius:14px;background:#dfe6e9;
  position:relative;cursor:pointer;transition:var(--transition);
}
.setting-toggle.on{background:var(--c-green)}
.setting-toggle::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;transition:var(--transition);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.setting-toggle.on::after{left:27px}
.setting-btn-danger{
  background:var(--c-red);color:#fff;padding:14px 24px;border-radius:var(--radius-sm);
  font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition);
  margin-top:10px;text-align:center;
}
.setting-btn-danger:hover{background:var(--c-red-dark)}
.settings-xp-info{
  background:rgba(255,255,255,.95);border-radius:var(--radius-sm);
  padding:18px 20px;text-align:center;
}
.settings-xp-info .big{font-size:2rem;font-weight:900;color:var(--c-primary)}

/* ===== TOAST ===== */
.toast{
  background:rgba(255,255,255,.95);border-radius:var(--radius-sm);
  padding:14px 20px;box-shadow:var(--shadow-lg);display:flex;
  align-items:center;gap:10px;font-weight:700;
  animation:slideUp .3s ease;min-width:200px;max-width:350px;
}
.toast.achievement{border-left:4px solid var(--c-yellow)}
.toast.xp{border-left:4px solid var(--c-primary)}
.toast.coin{border-left:4px solid var(--c-yellow-dark)}
.toast.error{border-left:4px solid var(--c-red)}
.toast .toast-icon{font-size:1.5rem}
.toast .toast-text{flex:1;font-size:.9rem}

/* ===== CONFETTI ===== */
.confetti-piece{
  position:fixed;top:-10px;width:10px;height:10px;z-index:9998;
  animation:confetti-fall linear forwards;pointer-events:none;
}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .menu-title{font-size:1.8rem}
  .menu-btn{padding:14px 20px;font-size:1.05rem}
  .stats-bar{padding:8px 12px;gap:8px}
  .stats-bar__title{font-size:.95rem}
  .stat-badge{padding:3px 8px;font-size:.8rem}
  .topic-card{padding:16px}
  .game-card{padding:18px}
  .tf-statement,.quiz-question{font-size:1.1rem;padding:20px 16px}
  .flashcard__face{padding:20px}
  .flashcard__text{font-size:1rem}
  .results-title{font-size:1.4rem}
  .achievements-grid{grid-template-columns:1fr}
  .match-area{flex-direction:column;align-items:center}
  .match-column{max-width:100%;width:100%}
}
@media(min-width:601px) and (max-width:900px){
  .game-container{max-width:520px}
}