/* ═══════════════════════════════════════════════════════════════════════════
   Arcade — дизайн-система «Скоростных уровней».
   Плоский цвет, реальные нейтрали, шаг 4px, все состояния нарисованы.
   Правила: без градиентов в хроме, без свечений, без transition:all,
   локальные stacking-контексты, поддержка prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — Нейтрали: холодная почти-чёрная шкала, без #000 и без #fff — */
  --ink-950: #0b0d14;
  --ink-900: #121522;
  --ink-870: #161a2a;
  --ink-840: #1b2032;
  --ink-800: #21273c;
  --ink-700: #2d3550;
  --ink-600: #3c4565;
  --ink-520: #566288;
  --ink-400: #7c86a6;
  --ink-300: #9aa3bf;
  --ink-200: #bcc4da;
  --ink-050: #eef1f8;

  /* — Предметные акценты (плоские, одной температуры) — */
  --subj-math:    #7aa2ff;
  --subj-english: #5fd3a6;
  --subj-logic:   #f0a868;
  --subj-mix:     #c69bf0;

  --ok:     #4ade80;
  --ok-ink: #0d2a18;
  --warn:   #fbbf24;
  --bad:    #ff7a7a;
  --bad-ink:#2c1015;

  /* — Шкала отступов, база 4px — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* — Типографика: 5 размеров — */
  --fs-display: clamp(26px, 5.5vw, 42px);
  --fs-title:   clamp(19px, 3vw, 24px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* — Тени только для парящего: мягкие, слоистые, низкая альфа — */
  --lift-1: 0 1px 2px rgba(3, 5, 12, .38);
  --lift-2: 0 2px 4px rgba(3, 5, 12, .30), 0 8px 20px rgba(3, 5, 12, .34);
  --lift-3: 0 4px 8px rgba(3, 5, 12, .32), 0 18px 44px rgba(3, 5, 12, .44);

  /* — Одна задокументированная z-шкала для настоящих оверлеев — */
  --z-stage:   1;
  --z-sticky: 10;
  --z-panel:  20;
  --z-modal:  30;
  --z-toast:  40;

  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-in:  cubic-bezier(.6, .1, .9, .4);

  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ar {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink-950);
  color: var(--ink-050);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ── Каркас страницы ────────────────────────────────────────────────────── */

.ar-shell {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--s4);
  padding-block: var(--s4) var(--s8);
}

.ar-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  padding-top: max(var(--s2), env(safe-area-inset-top));
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-700);
}

.ar-topbar__spacer { flex: 0 0 0; }

/* Заголовок занимает остаток и ужимается многоточием — чипы всегда влезают */
.ar-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 800;
}
.ar-topbar .ar-chip { flex: none; }

.ar-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  margin-inline-start: calc(var(--s3) * -1);
  border-radius: var(--radius-sm);
  color: var(--ink-200);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ar-back:hover  { background: var(--ink-840); color: var(--ink-050); }
.ar-back:active { background: var(--ink-800); }
.ar-back:focus-visible { outline: 2px solid var(--subj-math); outline-offset: 2px; }

/* ── Типографика ────────────────────────────────────────────────────────── */

.ar-display { font-size: var(--fs-display); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ar-title   { font-size: var(--fs-title);   line-height: 1.2;  font-weight: 800; margin: 0; }
.ar-lede    { color: var(--ink-300); max-width: 62ch; margin: var(--s3) 0 0; }
.ar-muted   { color: var(--ink-400); font-size: var(--fs-small); }
.ar-num     { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── Кнопки: все состояния нарисованы ───────────────────────────────────── */

.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  color: var(--ink-050);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.ar-btn:hover  { background: var(--ink-700); }
.ar-btn:active { transform: translateY(1px); background: var(--ink-800); }
.ar-btn:focus-visible { outline: 2px solid var(--ink-050); outline-offset: 2px; }
.ar-btn[disabled], .ar-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--ink-870);
  color: var(--ink-520);
  border-color: var(--ink-800);
  transform: none;
}

.ar-btn--primary { background: var(--subj-math); color: #0a1226; }
.ar-btn--primary:hover  { background: #93b5ff; }
.ar-btn--primary:active { background: var(--subj-math); }

.ar-btn--ghost { background: transparent; border-color: var(--ink-700); color: var(--ink-200); }
.ar-btn--ghost:hover { background: var(--ink-870); color: var(--ink-050); }

.ar-btn--wide { width: 100%; }

/* ── Карточки ───────────────────────────────────────────────────────────── */

.ar-card {
  position: relative;
  isolation: isolate;
  display: block;
  padding: var(--s4);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  background: var(--ink-900);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
a.ar-card:hover  { background: var(--ink-870); border-color: var(--ink-600); transform: translateY(-2px); }
a.ar-card:active { transform: translateY(0); }
a.ar-card:focus-visible { outline: 2px solid var(--subj-math); outline-offset: 3px; }

/* Цветная метка предмета — тонкая полоса, а не свечение */
.ar-card::before {
  content: "";
  position: absolute;
  inset-block: var(--s4);
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--card-accent, var(--ink-600));
  z-index: 1;
}

.ar-card__icon { font-size: 28px; line-height: 1; }
.ar-card__name { font-size: var(--fs-body); font-weight: 800; margin: var(--s2) 0 var(--s1); }
.ar-card__desc { font-size: var(--fs-small); color: var(--ink-300); margin: 0; line-height: 1.45; }

.ar-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: var(--s4);
}

/* ── Чипы прогресса ─────────────────────────────────────────────────────── */

.ar-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  background: var(--ink-870);
  font-size: var(--fs-micro);
  font-weight: 800;
  color: var(--ink-200);
  white-space: nowrap;
}
.ar-chip b { color: var(--ink-050); font-variant-numeric: tabular-nums; }
.ar-chip--live { border-color: var(--subj-math); color: var(--subj-math); }

/* ── Таймер-кольцо ──────────────────────────────────────────────────────── */

.ar-timer { position: relative; isolation: isolate; width: 92px; height: 92px; flex: none; }
.ar-timer svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ar-timer__track { fill: none; stroke: var(--ink-800); stroke-width: 7; }
.ar-timer__fill {
  fill: none;
  stroke: var(--subj-math);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 120ms linear, stroke var(--dur) var(--ease-out);
}
.ar-timer[data-state="warn"]   .ar-timer__fill { stroke: var(--warn); }
.ar-timer[data-state="urgent"] .ar-timer__fill { stroke: var(--bad); }
.ar-timer__value {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-050);
}
.ar-timer__unit { display: block; text-align: center; font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }

/* ── Панель вопроса ─────────────────────────────────────────────────────── */

.ar-quiz {
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  background: var(--ink-900);
  padding: var(--s4);
}
.ar-quiz__head { display: flex; align-items: center; gap: var(--s4); }
.ar-quiz__q {
  flex: 1;
  min-width: 0;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.ar-quiz__hint { margin: var(--s2) 0 0; font-size: var(--fs-small); color: var(--ink-400); }

.ar-answers {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: var(--s4);
}

.ar-answer {
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  background: var(--ink-840);
  color: var(--ink-050);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.ar-answer:hover  { background: var(--ink-800); border-color: var(--ink-600); }
.ar-answer:active { transform: scale(.98); }
.ar-answer:focus-visible { outline: 2px solid var(--subj-math); outline-offset: 2px; }
.ar-answer[disabled] { cursor: default; }
/* Верно/неверно: цвет + значок, цвет не единственный носитель смысла */
.ar-answer[data-mark="ok"]  { background: var(--ok);  border-color: var(--ok);  color: var(--ok-ink); }
.ar-answer[data-mark="bad"] { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
.ar-answer[data-mark]::after { content: attr(data-sign); margin-inline-start: var(--s2); font-size: 15px; }
.ar-answer[data-mark="dim"] { opacity: .4; }

/* ── Сцена с канвой ─────────────────────────────────────────────────────── */

.ar-stage {
  position: relative;
  isolation: isolate;
  z-index: var(--z-stage);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  background: var(--ink-900);
  overflow: hidden;
}
.ar-stage canvas { display: block; width: 100%; height: auto; touch-action: none; }

/* ── Оверлей результата уровня ──────────────────────────────────────────── */

.ar-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: rgba(11, 13, 20, .86);
}
.ar-overlay[hidden] { display: none; }
.ar-overlay__card {
  width: min(420px, 100%);
  padding: var(--s6) var(--s5);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  background: var(--ink-900);
  box-shadow: var(--lift-3);
  text-align: center;
  animation: ar-rise var(--dur-slow) var(--ease-out) both;
}
.ar-overlay__badge { font-size: 44px; line-height: 1; }
.ar-overlay__actions { display: grid; gap: var(--s2); margin-top: var(--s5); }

@keyframes ar-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Тост ───────────────────────────────────────────────────────────────── */

.ar-toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--s5), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  background: var(--ink-840);
  box-shadow: var(--lift-2);
  font-size: var(--fs-small);
  font-weight: 800;
  animation: ar-rise var(--dur) var(--ease-out) both;
}
.ar-toast[hidden] { display: none; }
.ar-toast[data-tone="ok"]  { border-color: var(--ok);  color: var(--ok); }
.ar-toast[data-tone="bad"] { border-color: var(--bad); color: var(--bad); }

/* ── Полоса прогресса уровня ────────────────────────────────────────────── */

.ar-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-800);
  overflow: hidden;
}
.ar-bar__fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--subj-math);
  transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

/* ── Служебное ──────────────────────────────────────────────────────────── */

.ar-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Аркада: дублирующие кнопки ответов (клавиатура и читалки) ─────────── */

.ar-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}
.ar-keybtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  background: var(--ink-870);
  color: var(--ink-200);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ar-keybtn:hover { background: var(--ink-800); color: var(--ink-050); }
.ar-keybtn:active { background: var(--ink-840); }
.ar-keybtn:focus-visible { outline: 2px solid var(--subj-math); outline-offset: 2px; }
.ar-keybtn kbd {
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid var(--ink-600);
  border-radius: 5px;
  background: var(--ink-840);
  color: var(--ink-300);
  font-family: var(--font-num);
  font-size: 11px;
}

/* ── Аркада: витрина по разделам ──────────────────────────────────────── */

.ar-pack { margin-top: var(--s7); }
.ar-pack__head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.ar-pack__count { font-size: var(--fs-small); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.ar-card__foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.ar-card__lvl { font-size: var(--fs-micro); font-weight: 800; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.ar-card__lvl b { color: var(--card-accent, var(--subj-math)); }

/* Витрина: первая карточка раздела крупнее — ритм вместо одинаковых плиток */
.ar-grid > .ar-card--lead { grid-column: 1 / -1; }
@media (min-width: 720px) { .ar-grid > .ar-card--lead { grid-column: span 2; } }
.ar-card--lead .ar-card__icon { font-size: 40px; }
.ar-card--lead .ar-card__name { font-size: var(--fs-title); }