/* ===== Квиз-Дуэль: дизайн-токены и база (стилистика Т-Банка) ===== */
:root {
  --yellow: #FFDD2D;
  --yellow-soft: #FFF7CC;
  --yellow-deep: #F5C800;
  --ink: #333333;
  --ink-soft: #767A80;
  --ink-faint: #A9ADB2;
  --bg: #F4F5F7;
  --card: #FFFFFF;
  --danger: #F5222D;
  --ok: #16A34A;
  --radius: 20px;
  --radius-s: 12px;
  --shadow: 0 8px 24px rgba(51, 51, 51, .08);
  --shadow-lg: 0 12px 32px rgba(51, 51, 51, .14);
  --font: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.45;
}
#app { max-width: 480px; margin: 0 auto; padding: 16px 16px 40px; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: .02em; }
h2 { font-size: 19px; font-weight: 800; }
.subtitle { color: var(--ink-soft); font-size: 14px; }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.muted { color: var(--ink-soft); font-size: 13px; }
.b { font-weight: 800; }
.yellow-text { color: var(--yellow-deep); }

/* --- Базовые блоки --- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  animation: fadeIn .25s ease;
}
.chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 13px;
}
.chip--ghost { background: #EEF0F3; color: var(--ink-soft); }

/* --- Кнопки --- */
.btn {
  display: block; width: 100%;
  border: none; border-radius: 16px; cursor: pointer;
  font-family: var(--font); font-weight: 800; font-size: 17px;
  padding: 16px 20px; transition: transform .08s ease, opacity .15s ease;
  text-align: center; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--primary { background: var(--yellow); color: var(--ink); animation: qd-pulse 1.8s infinite; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink-soft); font-weight: 700; padding: 10px; }
.btn--sm { width: auto; display: inline-block; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-s); }

/* --- Пульс (как в Квартале) --- */
@keyframes qd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 221, 45, .55); }
  50% { box-shadow: 0 0 0 10px rgba(255, 221, 45, 0); }
}

/* --- Анимации --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
.pop { animation: popIn .3s ease; }

/* --- Всплывающие очки (+300) --- */
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  25% { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { opacity: 0; transform: translateY(-42px) scale(1); }
}
.points-float {
  position: fixed; z-index: 60; pointer-events: none;
  font-weight: 800; font-size: 26px; color: var(--ink);
  background: var(--yellow); border-radius: 12px; padding: 4px 12px;
  box-shadow: var(--shadow-lg);
  animation: floatUp 1.3s ease forwards;
}

/* --- Баннеры --- */
.banner {
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-s); padding: 12px 14px;
  font-size: 14px; font-weight: 700;
}
.banner--warn { background: #FFF3F0; color: #C43A2F; }
.banner--info { background: var(--yellow-soft); color: var(--ink); }

/* --- Инпуты --- */
.input {
  width: 100%; border: 2px solid #E8EAEE; border-radius: var(--radius-s);
  padding: 14px 16px; font-family: var(--font); font-size: 16px; font-weight: 700;
  color: var(--ink); background: #fff; outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--yellow-deep); }
.input::placeholder { color: var(--ink-faint); font-weight: 500; }
.label { display: block; font-size: 13px; font-weight: 800; color: var(--ink-soft); margin: 0 0 6px 4px; text-transform: uppercase; letter-spacing: .04em; }

/* --- Тост --- */
#toast-box { position: fixed; left: 0; right: 0; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 100; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  border-radius: 12px; padding: 12px 18px; max-width: 90%;
  animation: popIn .25s ease;
}
.toast--err { background: var(--danger); }

/* --- Шапка экрана --- */
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.back-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; box-shadow: var(--shadow); font-size: 18px; font-weight: 800; color: var(--ink);
  flex: 0 0 auto;
}
.topbar .title { font-size: 18px; font-weight: 800; }