/* QUIZAR — панк-минимализм: чёрное по белому. Вопрос — страница книги. */

:root {
  --bg: #ffffff;          /* оболочка приложения */
  --ink: #0d0d0d;         /* текст и жирные линии */
  --surface: #f1efe9;     /* плашки: люди, результаты, разбор */
  --paper: #faf6ec;       /* страница книги, чуть теплее плашек */
  --soft: #d7d3c6;        /* тонкие линейки на бумаге */
  --empty: #dcd8cc;       /* незакрашенный прогресс */
  --grey: #6b6862;
  --acid: #e9ff3d;
  --pink: #ff1f5a;
  --pink-ink: #c40038;    /* тот же акцент, но читаемый как текст на белом */
  --cyan: #23e0d0;
  --ok: #14803c;
  --bad: #b3003c;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --punk: "Haas Grot Display", "Helvetica Neue", Impact, "Arial Black", system-ui, sans-serif;
  --book: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--punk);
  overscroll-behavior-y: none;
}

body::before { /* ксерокс-шум: чёрные волоски по белому */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* на белом сетка заметнее, чем была на чёрном: реже и слабее */
  opacity: .035;
  background-image:
    repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 7px);
}

.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding:
    calc(var(--safe-t) + 14px)
    calc(var(--safe-r) + 16px)
    calc(var(--safe-b) + 18px)
    calc(var(--safe-l) + 16px);
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.boot { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }

/* ------------------------------------------------------------------ типографика */

h1.logo {
  margin: 6px 0 2px;
  font-size: clamp(44px, 17vw, 78px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  font-weight: 900;
  font-stretch: condensed;
}
h1.logo span {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 0 .06em;
  margin-right: 2px;
}
h1.logo span:nth-child(2) { background: var(--acid); color: var(--ink); transform: rotate(-4deg); }
h1.logo span:nth-child(4) { background: var(--pink); color: var(--bg); transform: rotate(3deg); }
h1.logo span:nth-child(5) { transform: rotate(-2deg); }
h1.logo span:nth-child(6) { background: var(--cyan); color: var(--ink); transform: rotate(2deg); }

.kicker {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 18px;
}
.kicker b { background: var(--acid); color: var(--ink); font-weight: 800; padding: 1px 4px; }

h2.section {
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 26px 0 10px;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
}
h2.section:first-child { margin-top: 0; }

.tape {
  display: inline-block;
  background: var(--acid);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 3px 10px;
  transform: rotate(-1.4deg);
}

/* ---------------------------------------------------------------------- кнопки */

button { font-family: var(--punk); cursor: pointer; }

.btn {
  display: block;
  width: 100%;
  min-height: 54px;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 16px;
  margin: 10px 0 0;
  transition: transform .06s ease;
}
.btn:active { transform: translate(2px, 2px); }
.btn.primary { background: var(--acid); color: var(--ink); }
.btn.pink { background: var(--pink); color: var(--bg); }
.btn.ghost {
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 14px;
  min-height: 46px;
  letter-spacing: .16em;
}
.btn[disabled] { opacity: .4; pointer-events: none; }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

/* ------------------------------------------------------------------ люди / чипсы */

.people { display: grid; gap: 10px; }
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 14px 16px;
  min-height: 62px;
  text-align: left;
  border-left: 6px solid var(--ink);
}
.person:nth-child(3n+1) { border-left-color: var(--ink); }
.person:nth-child(3n+2) { border-left-color: var(--pink); }
.person:nth-child(3n) { border-left-color: var(--cyan); }
.person:active { transform: translate(2px, 2px); }
.person > span:first-child { display: block; }
.person .name { display: block; font-size: 25px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.person .meta { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-top: 2px; }
.person .last { margin-left: auto; text-align: right; font-size: 11px; letter-spacing: .1em; color: var(--grey); text-transform: uppercase; }
.person.remembered .name::after { content: " ←"; color: var(--pink-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 13px;
  min-height: 44px;
}
.chip small { color: var(--grey); font-weight: 400; margin-left: 5px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] small { color: #b8b5ad; }

/* ------------------------------------------------------------------ книга (вопрос) */

.book {
  background: var(--paper);
  color: var(--ink);
  padding: 26px 24px 22px;
  margin: 4px 0 0;
  border: 2px solid var(--ink);
  border-left-width: 4px;
  box-shadow: 9px 9px 0 var(--ink), inset 14px 0 22px -16px rgba(0, 0, 0, .22);
  margin-bottom: 14px;   /* чтобы жёсткая тень не слипалась с чёрной кнопкой ниже */
  min-height: 44vh;
  display: flex;
  flex-direction: column;
}
.book .folio {
  font-family: var(--book);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--soft);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.book .qtext {
  font-family: var(--book);
  font-size: clamp(21px, 5.4vw, 27px);
  line-height: 1.45;
  letter-spacing: .005em;
  margin: 0 0 8px;
  hyphens: auto;
  text-indent: 1.1em;
}
.book .foot {
  margin-top: 16px;
  font-family: var(--book);
  font-size: 13px;
  color: var(--grey);
  border-top: 1px solid var(--soft);
  padding-top: 10px;
}

.answer {
  width: 100%;
  font-family: var(--book);
  font-size: 24px;
  padding: 14px 12px;
  margin-top: auto;
  border: 0;
  border-bottom: 3px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  text-align: center;
}
.answer:focus { outline: 0; background: #fffdf4; }
.answer::placeholder { color: #b3a992; }

.verdict {
  font-family: var(--punk);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 22px;
  margin-top: auto;
}
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.verdict .sub { display: block; font-size: 15px; letter-spacing: .04em; font-weight: 700; margin-top: 6px; color: var(--ink); }
.verdict .why { display: block; font-family: var(--book); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 10px; line-height: 1.4; color: #3f3b33; }

.progressbar { display: flex; gap: 3px; margin: 14px 0 0; }
.progressbar i { flex: 1; height: 6px; background: var(--empty); }
.progressbar i.ok { background: var(--ok); }
.progressbar i.bad { background: var(--bad); }
.progressbar i.skip { background: var(--grey); }
.progressbar i.now { background: var(--acid); box-shadow: inset 0 0 0 1px var(--ink); }

/* --------------------------------------------------------------------- результаты */

.score {
  font-size: clamp(60px, 22vw, 96px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
}
.score small { font-size: .28em; letter-spacing: .1em; line-height: 1.35; color: var(--grey); display: block; text-transform: uppercase; margin-top: 10px; }

.bars { display: flex; gap: 8px; margin: 14px 0 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.bars div { flex: 1; padding: 8px 6px; text-align: center; background: var(--surface); }
.bars div b { display: block; font-size: 24px; letter-spacing: 0; }
.bars .c b { color: var(--ok); }
.bars .w b { color: var(--bad); }
.bars .s b { color: var(--grey); }

.feed { display: grid; gap: 8px; }
.rec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  border: 0;
  border-left: 4px solid var(--soft);
  background: var(--surface);
  color: var(--ink);
  padding: 11px 12px;
  text-align: left;
  font-size: 13px;
}
.rec.mine { border-left-color: var(--ink); }
.rec .who { font-weight: 900; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; min-width: 74px; }
.rec .what { color: var(--grey); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.rec .sc { margin-left: auto; font-weight: 900; font-size: 16px; white-space: nowrap; }
.rec .sc s { text-decoration: none; color: var(--grey); font-weight: 400; font-size: 12px; }

.review { display: grid; gap: 6px; }
.item {
  background: var(--surface);
  border-left: 4px solid var(--soft);
  padding: 10px 12px;
  font-size: 14px;
}
.item.ok { border-left-color: var(--ok); }
.item.bad { border-left-color: var(--bad); }
.item.skip { border-left-color: var(--grey); }
.item .q { font-family: var(--book); font-size: 15px; line-height: 1.35; }
.item .a { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-top: 6px; }
.item .a b { color: var(--ink); }

.note { font-size: 12px; line-height: 1.5; color: #4a4740; letter-spacing: .02em; }
.note b { background: var(--acid); color: var(--ink); font-weight: 800; padding: 1px 4px; }

/* ---------------------------------------------------------------------- родители */

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pinpad button {
  min-height: 62px;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
}
.pinpad button:active { background: var(--ink); color: var(--bg); }
.pindots { display: flex; gap: 12px; justify-content: center; margin: 20px 0 6px; }
.pindots i { width: 16px; height: 16px; border: 2px solid var(--ink); }
.pindots i.on { background: var(--acid); }

.field { display: block; margin-top: 12px; }
.field span { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  font-family: var(--punk);
  font-size: 17px;
  padding: 13px 12px;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
}

.adminrow { display: flex; align-items: center; gap: 8px; background: var(--surface); padding: 10px 12px; margin-bottom: 6px; }
.adminrow > span:first-child { display: block; flex: 1; min-width: 0; }
.adminrow .nm { display: block; font-weight: 900; text-transform: uppercase; }
.adminrow .lv { display: block; font-size: 11px; color: var(--grey); letter-spacing: .12em; text-transform: uppercase; }
.adminrow button { margin-left: 0; flex: 0 0 auto; background: var(--bg); border: 2px solid var(--ink); color: var(--pink-ink); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; }

.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.topbar .back {
  background: var(--bg);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 12px;
  min-height: 42px;
}
.topbar .who2 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.topbar .who2 b { color: var(--ink); }

.spacer { flex: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 22px);
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 18px;
  z-index: 50;
  max-width: 88vw;
  text-align: center;
  box-shadow: 5px 5px 0 var(--pink);
}

/* ------------------------------------------------------- поддержка и медали */

.cheer {
  border: 2px solid var(--ink);
  border-left-width: 8px;
  background: var(--acid);
  padding: 12px 14px;
  margin: 0 0 16px;
}
.cheer b {
  display: block;
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.cheer span {
  display: block;
  margin-top: 7px;
  font-family: var(--book);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}

.stamps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 20px 10px;
}
.stamp {
  text-align: center;
  transform: rotate(var(--tilt, 0deg));
}
.stamp .disc {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 7px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--acid);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.stamp .ttl {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}
.stamp .nte {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--grey);
  line-height: 1.2;
}
.stamp.locked { transform: none; opacity: .45; }
.stamp.locked .disc { background: var(--bg); border-style: dashed; box-shadow: none; color: var(--grey); }

.person .streak {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  padding: 2px 6px;
}
.person .last .medalcount { color: var(--ink); font-weight: 900; letter-spacing: .02em; }

/* ------------------------------------------- подчёркнутые слова и объяснения */

.term {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-bottom: 2px dashed var(--pink-ink);
  cursor: pointer;
}
.term::after { content: "?"; font-size: .62em; vertical-align: super; color: var(--pink-ink); font-weight: 700; margin-left: 1px; }
.term:active { background: var(--acid); }

.termbox {
  border: 2px solid var(--ink);
  border-left-width: 6px;
  background: var(--bg);
  padding: 12px 14px;
  margin: 14px 0 4px;
}
.termbox b {
  display: block;
  font-family: var(--punk);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.termbox span {
  display: block;
  margin-top: 7px;
  font-family: var(--book);
  font-size: 16px;
  line-height: 1.4;
}
.termclose {
  margin-top: 10px;
  border: 2px solid var(--ink);
  background: var(--acid);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 12px;
  min-height: 38px;
}

/* -------------------------------------------------------------- попытки */

.tries { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.tries i {
  width: 9px;
  height: 9px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: inline-block;
}
.tries i.spent { background: var(--pink); border-color: var(--pink); }
.book .foot.warn { color: var(--pink-ink); font-weight: 700; }

/* ------------------------------------------------- картинка внутри вопроса */

.art {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}
.art svg { max-width: 100%; height: auto; }

/* ------------------------------------- разбор: каждая строка кликабельна */

.item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 4px solid var(--soft);
  font-family: var(--punk);
  cursor: pointer;
}
.item .q { display: block; font-family: var(--book); font-size: 15px; line-height: 1.35; }
.item .a { display: block; }
.item .go {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.item:active { transform: translate(2px, 2px); }

/* Недоигранная игра: видно и на домашнем экране, и на экране выбора */
.person .last .resume { color: var(--pink-ink); font-weight: 900; letter-spacing: .02em; }