/* Дизайн «цветные карточки»: карточка во весь экран своим цветом, крупный шрифт, минимум рамок.
   Цвет карточки ставит app.js в --card-bg по id карточки; сводка и итог — на чёрном. Прежний дизайн — /a/. */
:root {
  --ink: #0B0B0B;
  --paper: #0B0B0B;
  --on-paper: #F4F1EA;
  --card-bg: #6FE07A;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper); color: var(--on-paper);
  font-family: var(--body); -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease;
}
body[data-screen="card"] { background: var(--card-bg); color: var(--ink); }

.wrap { min-height: 100svh; max-width: 34rem; margin: 0 auto; padding-inline: 24px; }
section[id^="screen-"]:not([hidden]) {
  min-height: 100svh; display: flex; flex-direction: column;
  padding-block: 28px calc(28px + env(safe-area-inset-bottom));
}

.eyebrow { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.meta { margin: 8px 0 0; font-size: 15px; opacity: .7; }

/* сводка и итог */
.hero { margin-top: 18vh; display: flex; flex-direction: column; }
.hero-num { font-family: var(--display); font-size: clamp(88px, 30vw, 140px); line-height: .9; font-weight: 700; letter-spacing: -.03em; }
.hero-label { font-family: var(--display); font-size: 28px; font-weight: 600; margin-top: 6px; }
.glados {
  margin: 28px 0 0; padding: 0; font-size: 15px; line-height: 1.5; opacity: .85;
  border: 0; font-style: italic;
}
/* подпись голоса — из lines.js экземпляра (window.VOICE); пустая — без подписи */
.glados[data-voice]:not([data-voice=""])::before { content: attr(data-voice) " — "; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* выбор колоды: плитка своим цветом на каждую колоду */
.decks { margin-top: 12vh; display: flex; flex-direction: column; gap: 14px; }
.deck {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; padding: 22px 22px; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--tile); color: var(--ink); text-align: left;
}
.deck-name { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
.deck-due { font: 500 14px var(--body); white-space: nowrap; opacity: .75; }
.back { align-self: flex-start; }

/* карточка */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.topbar .eyebrow { display: none; } /* название уже крупно в вопросе — наверху не дублируем (Антон, 14.09) */
.link { background: none; border: 0; padding: 6px 0; font: 500 14px var(--body); color: inherit; opacity: .7; }
.face { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.question {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 9.5vw, 48px); line-height: 1.05; letter-spacing: -.02em; white-space: pre-line;
}
.question.quote { font-family: var(--body); font-weight: 500; font-size: clamp(26px, 7vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
body[data-revealed="1"] .face { justify-content: flex-start; padding-top: 32px; }
body[data-revealed="1"] .question { font-size: clamp(24px, 6.5vw, 30px); }
.answer { margin-top: 20px; font-size: 21px; line-height: 1.35; font-weight: 500; }
.detail { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid rgba(0,0,0,.18); font-size: 15px; line-height: 1.5; }
.answer p, .detail p { margin: 0 0 10px; }
.answer ul, .detail ul { margin: 0 0 10px; padding-left: 1.1em; }
.answer img, .detail img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }

/* кнопки */
.bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.pill {
  width: 100%; height: 56px; border-radius: 999px; border: 1.5px solid currentColor;
  background: transparent; color: inherit; font: 500 16px var(--body); cursor: pointer;
}
.pill-solid { background: var(--on-paper); color: var(--paper); border-color: var(--on-paper); }
.grades:not([hidden]) { display: flex; justify-content: center; gap: 22px; }
.grade {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; color: inherit; font: 500 12px var(--body); cursor: pointer;
}
.grade .ico {
  width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid currentColor;
  display: grid; place-items: center; font-size: 24px; line-height: 1;
}
.grade[data-rating="3"] .ico { background: var(--ink); color: var(--card-bg); border-color: var(--ink); }
.grade:disabled, .pill:disabled { opacity: .4; }
.count { margin: 0; text-align: center; font-size: 12px; opacity: .55; min-height: 1em; }
[hidden] { display: none !important; }