:root{--primary:#FF9500;--success:#4CAF50;--error:#F44336;--bg:#F5F5F5;--accent:#FFF3E0;--muted:#757575;--card:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:#212121;overflow-x:hidden}
.screen{display:none;min-height:100vh;max-width:480px;margin:0 auto;padding:24px;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.screen.active{display:flex}
h1{font-size:28px;line-height:1.3}
h2{font-size:20px;margin-bottom:8px}
.muted{color:var(--muted);font-size:14px}
.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.logo{font-weight:700;font-size:18px}
.btn{background:var(--primary);color:#fff;border:0;border-radius:12px;padding:14px 28px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(255,149,0,.35);transition:all .2s;width:100%;max-width:320px}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,149,0,.4)}
.btn:active{transform:translateY(0)}
.btn-back{background:none;border:0;font-size:20px;cursor:pointer;padding:8px}
.spark{user-select:none;cursor:pointer;object-fit:contain}
.spark.md{width:140px;height:140px}
.spark.lg{width:280px;height:280px}
.spark-wrap{display:flex;flex-direction:column;align-items:flex-start}
.bubble{position:relative;background:var(--accent);border-radius:16px;padding:12px 16px;font-size:14px;max-width:240px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.12);animation:pop .3s ease}
.bubble::after{content:'';position:absolute;bottom:-8px;left:24px;border:8px solid transparent;border-top-color:var(--accent);border-bottom:0}
.hidden{display:none}
@keyframes pop{from{transform:scale(.85) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.shake{animation:shake .4s}
.bounce{animation:bounce .5s}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-bottom:16px}
.stat{background:var(--card);border-radius:16px;padding:16px 12px;box-shadow:0 2px 8px rgba(0,0,0,.08);text-align:center}
.stat b{display:block;font-size:24px;margin:4px 0}
.stat small{color:var(--muted);font-size:12px}
.progress{flex:1;height:8px;background:#e0e0e0;border-radius:99px;margin-left:16px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--success);transition:width .4s;border-radius:99px}
.answers{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.answers button{background:var(--card);border:2px solid #e0e0e0;border-radius:12px;padding:16px;font-size:16px;cursor:pointer;transition:all .2s;position:relative;text-align:left}
.answers button:hover{border-color:var(--primary);transform:translateX(4px)}
.answers button:disabled{cursor:not-allowed;opacity:.6}
.answers button.ok{border-color:var(--success);background:#E8F5E9;transform:translateX(4px)}
.answers button.bad{border-color:var(--error);background:#FFEBEE;animation:shake .4s}
.answers button .icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;opacity:0;transition:opacity .2s}
.answers button.ok .icon,.answers button.bad .icon{opacity:1}
.lesson-header{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.question-card{background:var(--card);border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08);width:100%;text-align:center;margin-bottom:8px}
.question-card h2{margin-bottom:0}
.vocab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-top:16px}
.vocab-card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.08);text-align:center}
.vocab-card b{display:block;font-size:16px;margin-bottom:4px}
.vocab-card small{color:var(--muted);font-size:13px}
.nav-tabs{display:flex;gap:8px;width:100%;margin-bottom:16px}
.nav-tab{flex:1;padding:10px;background:var(--card);border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s}
.nav-tab.active{border-color:var(--primary);background:var(--accent)}
.nav-tab:hover{border-color:var(--primary)}
.celebration{font-size:48px;animation:bounce 1s infinite}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.shake{animation:shake .4s}
.bounce{animation:bounce .5s}
.answers button{position:relative;text-align:left}
.answers button .icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;opacity:0}
.answers button.ok .icon,.answers button.bad .icon{opacity:1}
.answers button.ok{border-color:#4CAF50;background:#E8F5E9}
.answers button.bad{border-color:#F44336;background:#FFEBEE;animation:shake .4s}
.question-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08);width:100%}
.vocab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-top:16px}
.vocab-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.vocab-card b{display:block;margin-bottom:4px}
.vocab-card small{color:#757575}
.celebration{font-size:48px;animation:bounce 1s infinite}

/* Кнопка финала урока: оранжевая, по центру, с текстом */
.answers .btn{
  background:#FF9500 !important;
  color:#fff !important;
  text-align:center !important;
  border:0 !important;
  width:100%;
  max-width:320px;
  margin:8px auto 0;
  display:block;
}
/* Спарк — аккуратной карточкой, пока фон у картинок не прозрачный */
.spark{border-radius:16px}