:root {
  --bg: #000;
  --card: #111;
  --card2: #1a1a1a;
  --accent: #93c5fd;    /* pastel blue — words */
  --accent2: #60a5fa;
  --pink: #f9a8d4;      /* pastel pink — verbs */
  --pink2: #f472b6;
  --slate: #94a3b8;     /* slate gray — match */
  --slate2: #64748b;
  --indigo: #a5b4fc;    /* soft indigo — sentences */
  --indigo2: #818cf8;
  --red: #fca5a5;       /* pastel rose — errors */
  --text: #e8eaed;
  --dim: #4a4a4a;
  --dim2: #777;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, 'Segoe UI', sans-serif;
  background: #000;
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
.container { max-width: 440px; margin: 0 auto; padding: 16px; }

/* === MENU === */
.menu-card {
  background: var(--card);
  border-radius: 24px; padding: 40px 20px 32px; text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 40px;
}
.menu-flag { font-size: 48px; margin-bottom: 12px; }
.menu-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.menu-sub { font-size: 13px; color: var(--dim2); margin-bottom: 28px; }
.menu-btn {
  display: block; width: 100%; padding: 16px; font-size: 17px; font-weight: 700;
  border: none; border-radius: 14px; cursor: pointer; margin-bottom: 12px;
  font-family: inherit; transition: transform .1s;
}
.menu-btn:active { transform: scale(.97); }
.menu-btn.words { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #0f1a2e; }
.menu-btn.verbs { background: linear-gradient(135deg, var(--pink), var(--pink2)); color: #2a0a1a; }
.menu-btn.table-btn {
  background: rgba(249,168,212,.08); color: var(--pink); border: 1px solid rgba(249,168,212,.18);
  font-size: 14px; padding: 12px; font-weight: 600;
}
.divider { height: 1px; background: rgba(255,255,255,.06); margin: 24px 0 16px; }
.verb-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.verb-chip {
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: rgba(249,168,212,.08); color: #f9a8d4;
  border: 1px solid rgba(249,168,212,.18); border-radius: 10px;
  cursor: pointer; font-family: inherit;
}
.verb-chip:active { background: rgba(249,168,212,.2); }

/* === QUIZ === */
.top-bar { display: flex; justify-content: space-between; margin-bottom: 6px; }
.progress-text { font-size: 14px; color: var(--dim2); font-weight: 500; }
.score-text { font-size: 14px; font-weight: 600; }
.score-words { color: var(--accent); }
.score-verbs { color: var(--pink); }
.progress-track { height: 4px; border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.progress-track.words { background: #222; }
.progress-track.verbs { background: #222; }
.progress-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.progress-fill.words { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.progress-fill.verbs { background: linear-gradient(90deg, var(--pink), var(--pink2)); }
.streak { font-size: 14px; color: var(--indigo); font-weight: 600; margin-bottom: 12px; text-align: center; }

.card {
  border-radius: 20px; padding: 32px 20px 24px; text-align: center; margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.card.words { background: var(--card); border: 1px solid rgba(147,197,253,.12); }
.card.verbs { background: var(--card); border: 1px solid rgba(249,168,212,.12); }
.card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 10px; }
.card-label.words { color: var(--accent); }
.card-label.verbs { color: var(--pink); }
.card-word { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.card-sub { font-size: 14px; color: var(--dim2); margin-bottom: 16px; }
.card-hint { font-size: 13px; color: var(--dim2); }

.pronoun-box {
  display: inline-block; padding: 8px 20px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(249,168,212,.1); border: 1px solid rgba(249,168,212,.2);
}
.pronoun-label { font-size: 17px; font-weight: 700; color: var(--pink); }
.neg-badge {
  display: inline-block; padding: 4px 14px; margin-bottom: 12px;
  background: rgba(252,165,165,.12); color: var(--red); border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  border: 1px solid rgba(252,165,165,.22);
}

.options { display: flex; flex-direction: column; gap: 10px; }
.opt-btn {
  width: 100%; padding: 15px 18px; font-size: 17px; font-weight: 500;
  border-radius: 14px; cursor: pointer; text-align: center;
  font-family: inherit; transition: all .15s ease; border: 1px solid;
}
.opt-btn.words { background: #1a1a1a; color: #d0dae4; border-color: rgba(147,197,253,.15); }
.opt-btn.verbs { background: #1a1a1a; color: #e8d0dc; border-color: rgba(249,168,212,.15); }
.opt-btn:disabled { cursor: default; }
.opt-btn.correct.words { background: rgba(147,197,253,.15); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.opt-btn.correct.verbs { background: rgba(249,168,212,.15); border-color: var(--pink); color: var(--pink); font-weight: 700; }
.opt-btn.wrong { background: rgba(252,165,165,.12); border-color: var(--red); color: var(--red); }
.opt-btn.faded { opacity: .4; }

/* === RESULT === */
.result-card {
  border-radius: 24px; padding: 40px 20px 28px; text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.3); margin-top: 20px;
}
.result-card.words { background: var(--card); border: 1px solid rgba(147,197,253,.12); }
.result-card.verbs { background: var(--card); border: 1px solid rgba(249,168,212,.12); }
.result-emoji { font-size: 48px; margin-bottom: 12px; }
.result-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.result-score { font-size: 44px; font-weight: 800; margin-bottom: 4px; }
.result-score.words { color: var(--accent); }
.result-score.verbs { color: var(--pink); }
.result-pct { font-size: 16px; color: var(--dim2); margin-bottom: 16px; }
.streak-badge {
  display: inline-block; padding: 6px 16px; background: rgba(165,180,252,.12);
  color: var(--indigo); border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 20px;
}
.mistakes-block { background: rgba(255,255,255,.03); border-radius: 14px; padding: 16px; margin-bottom: 20px; text-align: left; }
.mistakes-title { font-size: 13px; color: var(--dim2); margin-bottom: 10px; font-weight: 600; }
.mistake-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 14px; }
.mistake-sl { color: var(--accent); font-weight: 600; flex: 1; }
.mistake-sl.verbs { color: var(--pink); }
.mistake-arrow { color: #333; }
.mistake-ru { color: var(--text); flex: 1; text-align: right; }

.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-retry {
  padding: 14px 20px; font-size: 15px; font-weight: 600;
  background: transparent; color: var(--slate); border: 1.5px solid var(--slate);
  border-radius: 14px; cursor: pointer; font-family: inherit;
}
.btn-new {
  padding: 14px 20px; font-size: 15px; font-weight: 600;
  border: none; border-radius: 14px; cursor: pointer; font-family: inherit;
}
.btn-new.words { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #0f1a2e; }
.btn-new.verbs { background: linear-gradient(135deg, var(--pink), var(--pink2)); color: #2a0a1a; }
.btn-menu {
  padding: 14px 20px; font-size: 15px; font-weight: 600;
  background: transparent; color: var(--dim2); border: 1.5px solid #2a2a2a;
  border-radius: 14px; cursor: pointer; font-family: inherit;
}

/* === MATCHING === */
.match-cols { display: flex; gap: 12px; justify-content: center; }
.match-col { display: flex; flex-direction: column; gap: 10px; flex: 1; max-width: 200px; }
.match-tile {
  padding: 14px 10px; font-size: 15px; font-weight: 500; text-align: center;
  border-radius: 12px; cursor: pointer; font-family: inherit;
  transition: all .15s; user-select: none; -webkit-user-select: none;
  border: 2px solid; min-height: 48px; display: flex; align-items: center; justify-content: center;
}
.match-tile.sl { background: #1a1a1a; color: #d0dae4; border-color: rgba(147,197,253,.2); }
.match-tile.ru { background: #1a1a1a; color: #e8d0dc; border-color: rgba(249,168,212,.2); }
.match-tile.selected { border-width: 3px; }
.match-tile.sl.selected { border-color: var(--accent); background: rgba(147,197,253,.12); color: var(--accent); }
.match-tile.ru.selected { border-color: var(--pink); background: rgba(249,168,212,.12); color: var(--pink); }
.match-tile.correct-match { opacity: .25; pointer-events: none; border-color: transparent; }
.match-tile.wrong-match { border-color: var(--red); background: rgba(252,165,165,.12); color: var(--red); }
.match-tile:active { transform: scale(.95); }
.match-round { font-size: 13px; color: var(--dim2); text-align: center; margin-bottom: 16px; }
.menu-btn.match { background: linear-gradient(135deg, var(--slate), var(--slate2)); color: #0f1520; }
.score-match { color: var(--slate); }
.progress-track.match { background: #222; }
.progress-fill.match { background: linear-gradient(90deg, var(--slate), var(--slate2)); }
.result-card.match { background: var(--card); border: 1px solid rgba(148,163,184,.12); }
.result-score.match { color: var(--slate); }
.btn-new.match { background: linear-gradient(135deg, var(--slate), var(--slate2)); color: #0f1520; }

/* === SENTENCE BUILDER === */
.sent-card {
  background: var(--card);
  border-radius: 20px; padding: 28px 20px 24px; text-align: center; margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(165,180,252,.12);
}
.sent-label { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--indigo); font-weight: 600; margin-bottom: 12px; }
.sent-ru { font-size: 20px; color: #fff; font-weight: 600; margin-bottom: 8px; line-height: 1.4; }

.answer-area {
  min-height: 52px; border-bottom: 2px solid rgba(165,180,252,.25);
  margin: 16px 0; padding: 8px 4px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.answer-area .tile { background: rgba(165,180,252,.15); border-color: rgba(165,180,252,.35); }

.word-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 8px 0; }

.tile {
  padding: 10px 16px; font-size: 16px; font-weight: 500;
  background: #1a1a1a; color: #dde0f0;
  border: 1.5px solid rgba(165,180,252,.18); border-radius: 12px;
  cursor: pointer; font-family: inherit; transition: all .15s;
  user-select: none; -webkit-user-select: none;
}
.tile:active { transform: scale(.95); }
.tile.used { opacity: .2; pointer-events: none; }
.tile.correct-tile { background: rgba(165,180,252,.2); border-color: var(--indigo); color: var(--indigo); }
.tile.wrong-tile { background: rgba(252,165,165,.12); border-color: var(--red); color: var(--red); }

.sent-hint { font-size: 13px; color: var(--dim2); margin-top: 8px; }
.sent-correct-answer { font-size: 16px; color: var(--indigo); font-weight: 600; margin-top: 12px; }

.btn-check {
  display: block; width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg, var(--indigo), var(--indigo2)); color: #0f0f2a;
  border: none; border-radius: 14px; cursor: pointer; font-family: inherit; margin-top: 12px;
}
.btn-check:disabled { opacity: .4; cursor: default; }
.btn-next { background: linear-gradient(135deg, var(--indigo), var(--indigo2)); color: #0f0f2a; }
.btn-new.sents { background: linear-gradient(135deg, var(--indigo), var(--indigo2)); color: #0f0f2a; }
.score-sents { color: var(--indigo); }
.progress-track.sents { background: #222; }
.progress-fill.sents { background: linear-gradient(90deg, var(--indigo), var(--indigo2)); }
.result-card.sents { background: var(--card); border: 1px solid rgba(165,180,252,.12); }
.result-score.sents { color: var(--indigo); }
.menu-btn.sents { background: linear-gradient(135deg, var(--indigo), var(--indigo2)); color: #0f0f2a; }

/* === TABLE === */
.table-card {
  background: var(--card); border-radius: 24px;
  padding: 20px; text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(249,168,212,.12);
}
.back-btn { background: none; border: none; color: var(--pink); font-size: 14px; cursor: pointer; font-family: inherit; margin-bottom: 12px; font-weight: 600; }
.table-inf { font-size: 26px; font-weight: 700; }
.table-ru { font-size: 15px; color: var(--dim2); margin-bottom: 16px; }
.table-header { display: flex; justify-content: space-between; padding: 6px 14px; }
.table-header span { font-size: 11px; color: #444; }
.table-header .pos { color: var(--pink); }
.table-header .neg { color: var(--red); }
.table-row { display: flex; justify-content: space-between; padding: 8px 14px; border-radius: 8px; }
.table-row:nth-child(even) { background: rgba(255,255,255,.03); }
.table-pronoun { color: var(--dim2); font-size: 13px; font-weight: 500; flex: 1; }
.table-form { color: var(--pink); font-size: 15px; font-weight: 700; flex: 1; text-align: center; }
.table-neg { color: var(--red); font-size: 14px; flex: 1; text-align: right; }

/* === READING === */
.menu-btn.reading-btn { background: linear-gradient(135deg,rgba(252,211,77,.18),rgba(245,158,11,.1)); border: 1px solid rgba(252,211,77,.25); color: #fcd34d; }
.reading-card { background: var(--card); border: 1px solid rgba(252,211,77,.12); }
.reading-label { color: #fcd34d; }
.reading-result { background: var(--card); border: 1px solid rgba(252,211,77,.12); }
.reading-btn-solid { background: linear-gradient(135deg,#fcd34d,#f59e0b); color: #1a0f00; }
.progress-track.reading { background: #222; }
.progress-fill.reading { background: linear-gradient(90deg,#fcd34d,#f59e0b); transition: width .4s ease; height: 100%; border-radius: 2px; }
.opt-btn.reading { background: #1a1a1a; color: #e8d4b0; border-color: rgba(252,211,77,.15); }
.opt-btn.correct.reading { background: rgba(252,211,77,.12); border-color: #fcd34d; color: #fcd34d; font-weight: 700; }
.blank-chip { display: inline-block; padding: 1px 9px; border-radius: 6px; font-weight: 700; border: 1px solid; vertical-align: baseline; font-size: 14px; }
.blank-active { background: rgba(252,211,77,.12); border-color: rgba(252,211,77,.5); color: #fcd34d; }
.blank-empty { background: #1a1a1a; border-color: #333; color: #555; }
.blank-correct { background: rgba(147,197,253,.12); border-color: var(--accent); color: var(--accent); }
.blank-wrong { background: rgba(252,165,165,.1); border-color: var(--red); color: var(--red); }