/* Ни Гуд — общие стили сайта.
   Токены и компоненты, одинаковые на всех страницах. Значения взяты
   из страниц как есть (см. DESIGN.md).
   Каркас страниц разведён классом на <body>: page-lesson (уроки),
   page-stub (заглушки разделов). Главная и список уроков держат свои
   уникальные блоки в собственном <style>. */

:root{
  /* цвета */
  --paper:#F7F1E4;
  --paper-2:#EFE6D2;
  --ink:#2B2621;
  --ink-soft:#6B5F52;
  --seal:#B5402F;
  --seal-dark:#8F3024;
  --jade:#5C7A63;
  --gold:#B8912C;
  --gold-dark:#8A6A1D;
  --card:#FFFDF8;
  --line: rgba(43,38,33,0.14);

  /* шрифты */
  --font-display:'Noto Serif SC', serif;
  --font-body:'Source Sans 3', sans-serif;
  --font-accent:'Zhi Mang Xing', cursive;

  /* радиусы */
  --radius-button:3px;
  --radius-seal:6px;
  --radius-card:8px;
  --radius-card-large:10px;
  --radius-modal:14px;
  --radius-pill:20px;

  /* отступы (шкала из DESIGN.md) */
  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:20px;
  --space-xl:32px;

  /* ширина контента и боковые отступы */
  --page-max-width: 1680px;
  --page-gutter: clamp(16px, 4vw, 64px);

  /* тени */
  --shadow-paper:0 1px 0 rgba(43,38,33,.05), 0 8px 20px -14px rgba(43,38,33,.35);
  --shadow-lifted:0 14px 26px -16px rgba(43,38,33,.45);
  --shadow-window:0 24px 60px -12px rgba(0,0,0,.45);
}

/* ---------- Основа (все страницы) ---------- */

*{box-sizing:border-box;}
html,body{margin:0;padding:0; overflow-x:hidden;}
.wrap,
.page-stub .stub,
.page-lesson footer,
.topnav-brand{
  width:min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width));
  margin-inline:auto;
}

body,
button,
input,
textarea,
select{
  font-family:var(--font-body);
}

/* ---------- Верхнее меню «Ни Гуд» (все страницы, кроме главной) ---------- */

.topnav{
  display:flex;align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  background: rgba(239,230,210,0.6);
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(4px);
}
.topnav-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
  font-family:var(--font-display);
  font-weight:700;font-size:16px;
  padding-inline:0;
}
.topnav-brand:hover{color:var(--seal);}
.topnav-seal{
  width:26px;height:26px;border:2px solid var(--seal);border-radius:4px;
  color:var(--seal);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex:none;
}

/* ---------- Заглушки разделов (HSK, «Курсы») ---------- */

/* Меню — полоса во всю ширину сверху, текст по центру оставшегося места */
body.page-stub{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.page-stub .stub{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.page-stub h1{font-family:var(--font-display);}
/* только внутри .stub: иначе перекрасит «Ни Гуд» в меню */
.page-stub .stub a{color:var(--seal);}

/* ---------- Урок Kuaile Hanyu: карточки, кнопки, тренажёр черт ---------- */

/* Каркас страницы урока. Под классом .page-lesson, потому что на главной
   header, footer, .wrap, .seal и .card — другие элементы. */
body.page-lesson{
  background:
    radial-gradient(1200px 600px at 10% -10%, #F4ECD8 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #EFE3C8 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  padding:32px 0 60px;
}
.page-lesson .wrap{
  max-width:none;
  width:min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width));
  margin-inline:auto;
}
.page-lesson header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  border-bottom:2px solid var(--ink);
  padding-bottom:18px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.page-lesson .seal{
  width:58px;height:58px;
  border:3px solid var(--seal);
  border-radius:var(--radius-seal);
  color:var(--seal);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  flex:none;
  transform:rotate(-3deg);
}
.page-lesson .card{
  perspective:1200px;
  height:230px;
}
.page-lesson footer{
  margin-top:34px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

.title-block h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px, 4vw, 40px);
  margin:0 0 6px;
  letter-spacing:0.01em;
}
.title-block .sub{
  font-size:15px;
  color:var(--ink-soft);
  font-family:var(--font-accent);
  font-size:20px;
}
.lesson-nav{
  display:flex; justify-content:space-between; gap:10px;
  margin:-6px 0 20px;
}
.lesson-nav-btn{
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--line);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  font-family:var(--font-body);
}
.lesson-nav-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.lesson-nav-spacer{min-width:1px;}
.controls{
  display:flex;
  gap:10px;
  margin-bottom:22px;
  flex-wrap:wrap;
  align-items:center;
}
button.ctrl{
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:10px 18px;
  border-radius:var(--radius-button);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  font-family:var(--font-body);
  transition:transform .12s ease, background .15s ease;
}
button.ctrl:hover{background:var(--seal);}
button.ctrl:active{transform:scale(0.96);}
button.ctrl.stop{background:var(--seal);}
button.ctrl.secondary{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
button.ctrl.secondary:hover{background:var(--ink);color:var(--paper);}
.progress{
  font-size:13px;
  color:var(--ink-soft);
  margin-left:auto;
  font-variant-numeric: tabular-nums;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.card-inner{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
  cursor:pointer;
}
.card.flipped .card-inner{transform:rotateY(180deg);}
/* backface-visibility + preserve-3d здесь и на .speak/.stroke-btn ниже —
   без этого в Safari иконки на обороте карточки зеркалятся и съезжают */
.face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  border-radius:var(--radius-card);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-align:center;
}
/* иероглиф прижат к фиксированной позиции сверху, а не центрирован:
   так он и пиньинь стоят на одном уровне во всех карточках,
   даже если длинный пиньинь переносится на вторую строку */
.face.front{
  padding-bottom:58px;
  padding-top:50px;
  justify-content:flex-start;
  background:
    linear-gradient(180deg, var(--card), var(--paper-2) 220%);
}
.hanzi{
  font-family:var(--font-display);
  font-weight:700;
  font-size:52px;
  line-height:1;
  margin-bottom:8px;
  white-space:nowrap;
  height:52px;
  display:flex;align-items:center;justify-content:center;
}
/* длинные слова уменьшаем, а не растягиваем карточку */
.hanzi.len3{font-size:42px;}
.hanzi.len4{font-size:34px;}
.pinyin-front{
  font-size:18px;
  color:var(--jade);
  font-weight:600;
  letter-spacing:.02em;
}
.face.back{
  transform:rotateY(180deg);
  padding-bottom:58px;
  background:linear-gradient(180deg, var(--card), #F1E9D8 260%);
}
.ru{
  font-size:26px;
  line-height:1.2;
  font-weight:700;
  color:var(--seal-dark);
  margin-bottom:6px;
}
.ru.long{font-size:21px;}
.pinyin-back{
  font-size:17px;
  color:var(--jade);
  font-weight:600;
  margin-bottom:6px;
}
.note{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.35;
  margin-top:4px;
}
.speak{
  position:absolute;
  bottom:10px;right:10px;
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--jade);
  background:var(--paper);
  color:var(--jade);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:15px;
  transition:background .15s ease, color .15s ease, transform .15s ease;
  z-index:2;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.speak:hover{background:var(--jade);color:var(--paper);}
.speak:active{transform:scale(0.9);}
.speak.playing{background:var(--seal);border-color:var(--seal);color:var(--paper);}
.stroke-btn{
  position:absolute;
  bottom:10px;left:10px;
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--gold-dark);
  background:var(--paper);
  color:var(--gold-dark);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:15px;
  transition:background .15s ease, color .15s ease, transform .15s ease;
  z-index:2;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.stroke-btn:hover{background:var(--gold-dark);color:var(--paper);}
.stroke-btn:active{transform:scale(0.9);}
.stroke-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line);
}
.stroke-nav-btn{
  font-size:13px; padding:8px 14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
  cursor:pointer; font-family:var(--font-body); font-weight:600;
}
.stroke-nav-btn:hover:not(:disabled){background:var(--ink); color:var(--paper);}
.stroke-nav-btn:disabled{opacity:.35; cursor:default;}
.stroke-nav-progress{font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.stroke-modal-overlay{
  position:fixed; inset:0;
  background:rgba(43,38,33,0.55);
  display:none;
  align-items:center;justify-content:center;
  z-index:200;
  padding:20px;
}
.stroke-modal-overlay.open{display:flex;}
.stroke-modal{
  background:var(--card);
  border-radius:var(--radius-modal);
  padding:24px;
  max-width:min(94vw, 700px);
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-window);
  animation:strokePop .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes strokePop{ from{transform:scale(.92); opacity:0;} to{transform:scale(1); opacity:1;} }
.stroke-modal-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:6px;
}
.stroke-modal-title{
  font-family:var(--font-display);
  font-size:34px;font-weight:700;
}
.stroke-modal-title-row{display:flex; align-items:center; gap:14px;}
.stroke-modal-speak{
  width:46px;height:46px; border-radius:50%;
  border:1.5px solid var(--jade); background:var(--paper); color:var(--jade);
  font-size:18px; cursor:pointer; flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.stroke-modal-speak:hover{background:var(--jade); color:var(--paper);}
.stroke-modal-speak:active{transform:scale(0.9);}
.stroke-modal-speak.playing{background:var(--seal); border-color:var(--seal); color:var(--paper);}
.stroke-modal-pinyin{
  color:var(--jade); font-size:26px; font-weight:600; letter-spacing:.02em;
  margin-top:8px;
}
.stroke-modal-ru{
  color:var(--seal-dark); font-size:24px; font-weight:700;
  margin:4px 0 18px;
}
.stroke-modal-close{
  background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft);
  line-height:1;padding:4px;
}
.stroke-modal-close:hover{color:var(--seal);}
.char-blocks{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
}
.char-block{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.char-target{
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 50%, 50% 100%;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
}
.char-controls{display:flex; gap:6px;}
.char-controls button{
  font-size:12px; padding:6px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--jade); background:var(--paper); color:var(--jade);
  cursor:pointer; font-family:var(--font-body);
}
.char-controls button:hover{background:var(--jade); color:var(--paper);}
.char-controls button.quiz-active{background:var(--seal); border-color:var(--seal); color:var(--paper);}
.voice-note{
  font-size:12px;
  color:var(--ink-soft);
  margin:-8px 0 20px;
}
@media (max-width:480px){
  .hanzi{font-size:44px;height:44px;}
  .face.front{padding-top:44px;}
  .page-lesson .card{height:210px;}
}