/* ============================================================================
   Quibbo Theme — нео-брутализм / «стикер» UI kit
   Токены и общие компоненты, снятые 1:1 с исходников:
   «Quibbo Playful UI Kit.html» и «Quibbo Brand Playful.html».
   Рецепт наклейки: обводка 3px чернилами #292b31, четыре РАЗНЫХ радиуса по углам,
   жёсткая офсет-тень без размытия; при нажатии элемент «садится в тень» ровно на
   её величину. Заголовки/кнопки/бейджи — Nunito, текст — Inter. Без градиентов.
   Ошибки — НЕ красным.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* ── Палитра ─────────────────────────────────────────────────────────── */
  --bg:        #f3f5fe;   /* фон (neutral-100) */
  --surface:   #ffffff;
  --text:      #292b31;   /* neutral-900 */
  --muted:     #595d6c;   /* neutral-700 */
  --muted-2:   #75798c;   /* neutral-600 */
  --muted-3:   #9397ab;   /* neutral-500 */

  /* Нейтральная шкала */
  --neutral-100: #f3f5fe;
  --neutral-200: #e4e7f5;
  --neutral-300: #cfd3e5;
  --neutral-400: #b2b6ca;
  --neutral-500: #9397ab;
  --neutral-600: #75798c;
  --neutral-700: #595d6c;
  --neutral-800: #3f424d;
  --neutral-900: #292b31;

  /* Сиреневая шкала (акцент) */
  --lilac-50:  #f5f4ff;
  --lilac-100: #e7e5fe;
  --lilac-200: #d2cefd;
  --lilac-300: #b5abfc;
  --lilac-400: #968ae0;
  --lilac-500: #796cbf;   /* основной акцент (accent-600 кита) */
  --lilac-600: #5d5294;
  --lilac-700: #423a6a;
  --lilac-800: #2b2741;

  --accent:       var(--lilac-500);
  --accent-hover: var(--lilac-600);
  --accent-soft:  var(--lilac-100);

  /* Чернила: обводка/тень/текст — единый #292b31 (как в ките) */
  --ink: #292b31;

  /* Тёплые вторичные акценты (охра/терракота) — вместо «красной тревоги» */
  --ochre:     #e8a13a;
  --terracota: #c65d3b;

  /* ── Обводка ─────────────────────────────────────────────────────────── */
  --bd:      3px solid var(--ink);   /* объекты */
  --bd-2:    2.5px solid var(--ink); /* внутренние элементы */
  --bd-thin: 2px solid var(--ink);   /* строки */

  /* ── Жёсткие офсет-тени (без размытия) ───────────────────────────────── */
  --sh-s: 3px 3px 0 var(--ink);
  --sh-m: 4px 4px 0 var(--ink);
  --sh-l: 6px 6px 0 var(--ink);
  --sh-xl: 8px 8px 0 var(--ink);

  /* ── Радиусы. Ключевая деталь кита — четыре РАЗНЫХ радиуса по углам ───── */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --r-pill: 999px;
  --r-sticker:    18px 14px 20px 16px;  /* асимметричный M — «рукодельный» */
  --r-sticker-2:  14px 20px 16px 18px;  /* зеркальный (для соседних плиток) */
  --r-sticker-l:  24px 20px 26px 22px;  /* асимметричный L */
  --r-badge:      10px 8px 11px 9px;    /* бейдж буквы: скруглённый квадрат */

  /* ── Отступы ─────────────────────────────────────────────────────────── */
  --pad: 24px;
  --gap: 12px;
  --gap-block: 22px;

  /* ── Шрифты ──────────────────────────────────────────────────────────── */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Плитки ответов: светлые тинты, закреплённые за позицией ──────────── */
  /* A сиреневая → D серая (все тинты светлые, текст — чернильный). */
  --tile-a: var(--lilac-200);    /* #d2cefd */
  --tile-b: var(--lilac-100);    /* #e7e5fe */
  --tile-c: var(--neutral-200);  /* #e4e7f5 */
  --tile-d: var(--neutral-300);  /* #cfd3e5 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; color: var(--text); }

/* ── Кнопки-«наклейки» ─────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  padding: 11px 22px;
  border: var(--bd);
  border-radius: var(--r-sticker);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-m);
  transition: transform .06s ease, box-shadow .06s ease, background .12s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; box-shadow: var(--sh-m); transform: none; cursor: default; }

.btn.ghost { background: var(--surface); color: var(--ink); border-radius: var(--r-sticker-2); }
.btn.ghost:hover { background: var(--lilac-50); }

/* «Опасные» действия — тёплая терракота, НЕ красная тревога */
.btn.danger { background: var(--surface); color: var(--terracota); border-radius: var(--r-sticker-2); }
.btn.danger:hover { background: #fbeae3; }

.btn.small { padding: 7px 14px; font-size: 13px; box-shadow: var(--sh-s); border-radius: 12px 10px 13px 11px; }
.btn.small:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn.big { padding: 15px 30px; font-size: 20px; box-shadow: var(--sh-l); border-radius: var(--r-sticker-l); }
.btn.big:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }

/* ── Поля ввода — «вдавленная наклейка» (обводка есть, тень внутрь) ─────── */
.input, input.input, textarea.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: var(--bd-2);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--text);
}
.input:focus, input.input:focus, textarea.input:focus {
  outline: none;
  box-shadow: inset 3px 3px 0 rgba(41, 43, 49, .12);
  border-color: var(--accent);
}

/* ── Поверхность-карточка ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: var(--bd);
  border-radius: var(--r-sticker-l);
  box-shadow: var(--sh-l);
  padding: var(--pad);
}

/* ── Теги / чипы (солид-акцент, лёгкий наклон, без тени) ────────────────── */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border: var(--bd);
  border-radius: 14px 18px 12px 16px;
  background: var(--accent);
  color: var(--bg);
  transform: rotate(-2deg);
}
.tag.ghost { background: var(--surface); color: var(--ink); }
.tag:nth-child(even) { transform: rotate(2deg); border-radius: 18px 14px 16px 12px; }

/* ── Плитки ответов ────────────────────────────────────────────────────── */
/* Тинт закреплён за позицией (класс c0..c3 / a0..a3), текст — чернильный.   */
.tile-0, .c0, .a0 { background: var(--tile-a); color: var(--ink); }
.tile-1, .c1, .a1 { background: var(--tile-b); color: var(--ink); }
.tile-2, .c2, .a2 { background: var(--tile-c); color: var(--ink); }
.tile-3, .c3, .a3 { background: var(--tile-d); color: var(--ink); }

/* Бейдж буквы (A/B/C/D) — скруглённый квадрат, обводка, прозрачный фон */
.tile-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: var(--bd);
  border-radius: var(--r-badge);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

/* Состояния раскрытия ответа */
@keyframes tile-correct {
  0%,100% { transform: translateY(0); }
  30%     { transform: translateY(-12px); }
  60%     { transform: translateY(-5px); }
}
@keyframes tile-wrong {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}
.is-correct { animation: tile-correct .5s ease; }
.is-wrong   { animation: tile-wrong .4s ease; }