/* ─────────────────────────────────────────────────────────────────────────
   ДИЗАЙН-СИСТЕМА v1 — ЕДИНЫЙ ИСТОЧНИК токенов и кнопок (ДИЗАЙН_СИСТЕМА.md §2–4, §12).
   Подключается: приложение (index.html), игры, тренажёры, тесты:
     <link rel="stylesheet" href="/games/shared/ds.css">
   Менять ТОЛЬКО здесь. Старые токены (variables.css, logic.css) пока живут рядом.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ══════════════════════════════════════════════════
     ДИЗАЙН-СИСТЕМА v1 — ДОБАВОЧНЫЕ ТОКЕНЫ (23.10.2026, стейдж)
     Старые токены выше НЕ тронуты; на новые переносим экраны по одному.
     Источник: ДИЗАЙН_СИСТЕМА.md §2–4, §12.
  ══════════════════════════════════════════════════ */
  --primary:        #2E8B60;   /* утверждено §12; белый текст = 4.22 */
  --primary-press:  #236B4A;   /* = --td */
  --primary-soft:   #EDFAF4;   /* = --tl */
  --pay:            #FF8A3D;   /* ТОЛЬКО оплата/подписка */
  --pay-text:       #1A2E22;   /* ❓ белый на оранжевом 2.35 → тёмный текст 6.14 */
  --danger:         #C73636;   /* ❓ предложение: белый на нём 5.24 (на #E94B4B было 3.77) */
  --danger-soft:    #FDECEC;
  --reward:         #FFD66B;   /* награда, не оплата */
  --ink:            #1A2E22;
  --ink-mid:        #3D5C47;
  --ink-soft:       #8EAE98;
  --line:           #D8EDDE;

  /* Скругления (§3.1) */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* Шкала шрифта (§12) */
  --fs-caption: 12px;  --fs-small: 14px;  --fs-body: 16px;  --fs-sub: 18px;
  --fs-title: 22px;    --fs-big: 28px;    --fs-display: 40px;
  --fw-text: 700;  --fw-sub: 800;  --fw-head: 900;

  /* Кнопки: родитель L52/M44/S36, ребёнок L60, круглые 64, цель ≥56 */
  --btn-l: 52px;  --btn-m: 44px;  --btn-s: 36px;
  --btn-kid-l: 60px;  --btn-round: 64px;  --tap-kid: 56px;

  /* Фокус и состояния (один набор) */
  --focus-ring: 0 0 0 3px #fff, 0 0 0 6px #2E8B60;
  --disabled-opacity: .45;
  --press-scale: .97;
}

/* Общие UI-компоненты (дизайн-система v1). Токены — styles/variables.css */
.ui-btn{
  --h:var(--btn-l); --bg:var(--primary); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--h); padding:0 22px; box-sizing:border-box;
  border:2px solid var(--bd); border-radius:var(--r-sm);
  background:var(--bg); color:var(--fg);
  font:var(--fw-head) var(--fs-body)/1.1 var(--font-main,'Nunito',system-ui,sans-serif);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .08s, background .12s, box-shadow .12s;
}
.ui-btn--block{display:flex; width:100%}
.ui-btn--web{max-width:360px}
.ui-btn--m{--h:var(--btn-m); font-size:var(--fs-small); padding:0 18px}
.ui-btn--s{--h:var(--btn-s); font-size:var(--fs-small); padding:0 14px}
.ui-btn--kid{--h:var(--btn-kid-l); font-size:var(--fs-sub); min-width:var(--tap-kid)}
.ui-btn:active:not(:disabled){transform:scale(var(--press-scale)); background:var(--bg-press,var(--bg))}
.ui-btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:var(--disabled-opacity); cursor:default}
@media (hover:hover){.ui-btn:hover:not(:disabled){background:var(--bg-press,var(--bg))}}

.ui-btn--primary{--bg:var(--primary); --bg-press:var(--primary-press); --fg:#fff}
.ui-btn--pay{--bg:var(--pay); --bg-press:#F07A2E; --fg:var(--pay-text)}
.ui-btn--white{--bg:#fff; --bg-press:var(--primary-soft); --fg:var(--primary)}
.ui-btn--ghost{--bg:transparent; --bg-press:var(--primary-soft); --fg:var(--primary)}
.ui-btn--danger{--bg:var(--danger); --bg-press:#A92B2B; --fg:#fff}
.ui-btn--danger-text{--bg:transparent; --bg-press:var(--danger-soft); --fg:var(--danger)}

.ui-btn.is-loading{pointer-events:none}
.ui-btn.is-loading::after{
  content:""; width:1em; height:1em; border-radius:50%;
  border:3px solid currentColor; border-right-color:transparent;
  animation:ui-spin .7s linear infinite;
}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* Круглые иконочные кнопки (картинки из public/icons/btn_*.webp) */
.ui-round{
  display:inline-grid; place-items:center; padding:0; border:0; background:none;
  width:var(--sz,var(--btn-round)); height:var(--sz,var(--btn-round));
  min-width:var(--tap-kid); min-height:var(--tap-kid);
  border-radius:var(--r-full); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .08s;
}
.ui-round img{width:100%; height:100%; display:block; pointer-events:none}
.ui-round:active:not(:disabled){transform:scale(var(--press-scale))}
.ui-round:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.ui-round:disabled{opacity:var(--disabled-opacity); cursor:default}

/* Крестик у родителя — слово */
.ui-close-word{
  min-height:var(--btn-m); padding:0 16px; border:0; background:none;
  color:var(--ink-mid); font:var(--fw-head) var(--fs-small) var(--font-main,'Nunito',system-ui,sans-serif); cursor:pointer;
  border-radius:var(--r-sm);
}
.ui-close-word:focus-visible{outline:none; box-shadow:var(--focus-ring)}

/* Назад: круглая картинка btn_back (ребёнок ≥56). Слева сверху. */
.ui-back{position:absolute;top:10px;left:10px;z-index:60;--sz:56px}
a.ui-btn,a.ui-round{text-decoration:none}

/* ── Chip (§5): ответ/выбор. Размеры: по умолчанию 15/800 pad 8×14; --filter высота 32, 13/800 ── */
.ui-chip{
  display:inline-flex; align-items:center; gap:6px; box-sizing:border-box;
  padding:8px 14px; border:2px solid var(--line); border-radius:var(--r-full);
  background:#fff; color:var(--ink);
  font:var(--fw-sub) 15px/1.1 var(--font-main,'Nunito',system-ui,sans-serif);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .08s,border-color .12s,background .12s;
}
.ui-chip--filter{min-height:32px; padding:0 12px; font-size:13px}
.ui-chip img{width:18px; height:18px}
.ui-chip:active:not(:disabled){transform:scale(var(--press-scale))}
.ui-chip:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.ui-chip:disabled{opacity:var(--disabled-opacity); cursor:default}
.ui-chip.is-selected{border-color:var(--primary); background:var(--primary-soft)}   /* ❓ §5: выбранный = зелёный (было оранжевый) */
.ui-chip.is-correct{border-color:var(--primary); background:#DDF6E8}                /* + иконка check_circle */
.ui-chip.is-wrong{border-color:#F3B3B5; background:var(--danger-soft)}              /* + иконка cross_circle */

/* ── Plate (§6): плашка/баннер. Цвет = функция. Плоская заливка + рамка 1.5px ── */
.ui-plate{
  display:flex; align-items:center; gap:12px; box-sizing:border-box;
  padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:#fff; color:var(--ink);
}
.ui-plate__icon{flex:none; width:44px; height:44px; object-fit:contain}
.ui-plate__body{flex:1; min-width:0}
.ui-plate__title{margin:0; font:var(--fw-sub) 15px/1.2 var(--font-main,'Nunito',system-ui,sans-serif)}
.ui-plate__text{margin:2px 0 0; font:var(--fw-text) var(--fs-caption)/1.3 var(--font-main,'Nunito',system-ui,sans-serif); color:var(--ink-mid)}
.ui-plate__action{flex:none}
.ui-plate--action{background:var(--primary-soft); border-color:var(--primary)}
.ui-plate--pay{background:#FFF0E6; border-color:var(--pay)}          /* ТОЛЬКО продажа/подписка */
.ui-plate--done{background:#DDF6E8; border-color:var(--primary)}    /* + check_circle */
.ui-plate--error{background:var(--danger-soft); border-color:#F3B3B5} /* + cross_circle/warning */
.ui-plate--reward{background:#FDF6E3; border-color:#FFE3A3}
.ui-plate--info{background:#fff; border-color:var(--line)}

/* ── Sheet (нижний шит) и Dialog (центр). Крестик — CloseButton; у ребёнка ещё свайп вниз ── */
.ui-scrim{position:fixed; inset:0; z-index:90; background:rgba(26,46,34,.55); display:flex; justify-content:center}
.ui-scrim--sheet{align-items:flex-end}
.ui-scrim--dialog{align-items:center; padding:16px}
.ui-sheet{
  position:relative; box-sizing:border-box; width:100%; max-width:680px; max-height:88vh; overflow:auto;
  background:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:20px 16px max(16px,env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(26,46,34,.22);
}
.ui-dialog{
  position:relative; box-sizing:border-box; width:min(420px,100%); max-height:88vh; overflow:auto;
  background:#fff; border-radius:var(--r-xl); padding:24px 20px 20px; box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.ui-sheet__close,.ui-dialog__close{position:absolute; top:8px; right:8px}
.ui-sheet__grip{display:block; width:44px; height:5px; border-radius:var(--r-full); background:var(--line); margin:-8px auto 12px}
.ui-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px}
.ui-head__title{margin:0; min-width:0; font:var(--fw-head) var(--fs-title)/1.15 var(--font-main,'Nunito',system-ui,sans-serif); color:var(--ink)}

/* прогресс темы: точки по числу уровней (закрашены пройденные); общий для «Найди пару» и игр на Logic */
.lv .dots{display:flex;gap:6px;align-items:center;flex:none;}
.lv .dots i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #B7D9C3;box-sizing:border-box;}
.lv .dots i.on{background:#2E8B60;border-color:#2E8B60;}