/* ═══════════════════════════════════════
   Cozy Autumn English — Styles
   Warm autumn palette: amber, brown, gold
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Nunito:wght@400;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#2b1a10;
  --bg2:#3c2415;
  --card:#4a2e1a;
  --card-hover:#5c3a22;
  --accent:#e8913a;
  --accent2:#d4a03c;
  --gold:#f5c542;
  --text:#f0e6d8;
  --text-dim:#c4a882;
  --red:#c0392b;
  --green:#27ae60;
  --radius:14px;
}

html,body{
  height:100%;
  overflow:hidden;
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ── Falling leaves ── */
.leaves-container{
  position:fixed;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:100;overflow:hidden;
}
.leaf{
  position:absolute;top:-40px;
  animation:leafFall linear forwards;
  opacity:.7;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
@keyframes leafFall{
  0%{transform:translateY(-40px) rotate(0deg) translateX(0);opacity:.8}
  25%{transform:translateY(25vh) rotate(90deg) translateX(30px)}
  50%{transform:translateY(50vh) rotate(180deg) translateX(-20px)}
  75%{transform:translateY(75vh) rotate(270deg) translateX(25px)}
  100%{transform:translateY(105vh) rotate(360deg) translateX(-10px);opacity:0}
}

/* ── Progress bar ── */
.progress-bar{
  position:fixed;top:0;left:0;right:0;height:4px;
  background:rgba(0,0,0,.3);z-index:200;
}
.progress-fill{
  height:100%;width:10%;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width .4s ease;
}

/* ── Navigation ── */
.nav-btn{
  position:fixed;top:50%;z-index:200;
  transform:translateY(-50%);
  width:48px;height:48px;border:none;border-radius:50%;
  background:rgba(74,46,26,.85);color:var(--text);
  font-size:24px;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .2s,transform .2s;
}
.nav-btn:hover{background:var(--accent);transform:translateY(-50%) scale(1.1)}
.nav-prev{left:12px}
.nav-next{right:12px}

.slide-counter{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:200;
  font-size:13px;color:var(--text-dim);
  background:rgba(43,26,16,.85);padding:4px 14px;border-radius:20px;
  backdrop-filter:blur(6px);
}

/* ── Slides wrapper ── */
.slides-wrapper{
  position:relative;width:100%;height:100vh;
}
.slide{
  position:absolute;inset:0;
  display:none;
  overflow-y:auto;
  padding:60px 40px 60px;
}
.slide.active{display:flex;justify-content:center}

.slide-content{
  max-width:960px;width:100%;
  padding:20px 0;
}

/* ── Typography ── */
h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;
  color:var(--gold);
  line-height:1.2;
}
h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,3.5vw,2.2rem);
  font-weight:700;
  color:var(--accent);
  margin:8px 0 20px;
}
.subtitle{
  font-size:1.05rem;line-height:1.7;
  color:var(--text-dim);margin-top:12px;
}
.hint{
  font-size:.85rem;color:var(--text-dim);
  margin-top:20px;opacity:.7;
}
.title-emoji{font-size:3.5rem;margin-bottom:12px}

/* ── Section badge ── */
.section-badge{
  display:inline-block;
  font-size:.82rem;font-weight:700;
  padding:4px 14px;border-radius:20px;
  background:var(--card);color:var(--accent);
  margin-bottom:8px;letter-spacing:.5px;
}

/* ── Word cards grid ── */
.word-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
.word-card{
  background:var(--card);
  border:1px solid rgba(232,145,58,.15);
  border-radius:var(--radius);
  padding:16px 18px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  cursor:default;
}
.word-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  border-color:var(--accent);
}
.word-card.featured{
  border-color:var(--gold);
  background:linear-gradient(135deg,var(--card),#5a3520);
}
.word-en{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;font-weight:700;
  color:var(--gold);margin-bottom:4px;
}
.word-ru{
  font-size:1rem;color:var(--text);margin-bottom:2px;
}
.word-phonetic{
  font-size:.78rem;color:var(--text-dim);
  font-style:italic;margin-bottom:6px;
}
.word-example{
  font-size:.85rem;color:var(--text-dim);
  line-height:1.5;
}
.word-example em{
  color:var(--accent);font-style:normal;font-weight:700;
}

/* ── Phrases ── */
.phrases-list{
  display:flex;flex-direction:column;gap:10px;
}
.phrase-item{
  background:var(--card);
  border-radius:var(--radius);
  padding:14px 18px;
  border-left:4px solid var(--accent);
  transition:background .2s;
}
.phrase-item:hover{background:var(--card-hover)}
.phrase-en{
  font-size:1.05rem;font-weight:700;
  color:var(--text);margin-bottom:3px;
}
.phrase-ru{
  font-size:.9rem;color:var(--text-dim);
}

/* ── Quiz ── */
.quiz-score{
  font-size:.9rem;color:var(--text-dim);
  margin-bottom:10px;
}
.quiz-text{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;font-weight:700;
  color:var(--gold);margin-bottom:18px;
}
.quiz-options{
  display:flex;flex-direction:column;gap:10px;
}
.quiz-opt{
  background:var(--card);
  border:2px solid rgba(232,145,58,.2);
  border-radius:var(--radius);
  padding:14px 18px;
  font-size:1rem;color:var(--text);
  cursor:pointer;
  transition:all .2s;
}
.quiz-opt:hover{
  border-color:var(--accent);
  background:var(--card-hover);
  transform:translateX(6px);
}
.quiz-opt.correct{
  border-color:var(--green);background:rgba(39,174,96,.2);
  color:#2ecc71;
}
.quiz-opt.wrong{
  border-color:var(--red);background:rgba(192,57,43,.2);
  color:#e74c3c;
}
.quiz-feedback{
  margin-top:14px;font-size:1rem;font-weight:700;
  min-height:24px;
}
.quiz-restart{
  margin-top:16px;
  background:var(--accent);color:#fff;
  border:none;border-radius:var(--radius);
  padding:10px 24px;font-size:1rem;font-weight:700;
  cursor:pointer;transition:background .2s;
}
.quiz-restart:hover{background:var(--gold);color:var(--bg)}

/* ── Scrollbar ── */
.slide::-webkit-scrollbar{width:6px}
.slide::-webkit-scrollbar-track{background:transparent}
.slide::-webkit-scrollbar-thumb{background:var(--card);border-radius:3px}

/* ── Mobile ── */
@media(max-width:640px){
  .slide{padding:50px 16px 50px}
  .word-grid{grid-template-columns:1fr}
  .nav-btn{width:40px;height:40px;font-size:20px}
}