/* ==========================================================================
   Мока — визуальные правила
   Спокойная палитра, крупные цели касания, никакого резкого контраста.
   ========================================================================== */
:root{
  --bg:      #E9EFEC;   /* мягкий мятно-серый фон */
  --surface: #F8FBF9;
  --ink:     #2E3A38;
  --ink-soft:#6D7C79;
  --line:    #D3DEDA;

  --moka:    #6FB3A0;   /* цвет персонажа */
  --moka-dk: #4E9585;
  --sun:     #E8B04B;   /* похвала */
  --lilac:   #A99BD1;

  --r-lg: 32px;
  --r-md: 20px;
  --tap: 96px;          /* минимальная цель касания */
  --dur: .32s;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:700;
  touch-action:manipulation;
  user-select:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}   /* иначе display:flex перебивает атрибут */

/* ===== Экраны ===== */
.screen{
  position:fixed;inset:0;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3vh,32px);
  padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
}
/* меню: карточки не должны залезать под персонажа и кнопку «назад» */
#screen-menu{
  justify-content:center;
  padding-top:max(84px,calc(env(safe-area-inset-top) + 84px));
  /* запас снизу под персонажа: он выше своей ширины (viewBox 200x210) */
  padding-bottom:calc(clamp(130px,26vw,210px) + env(safe-area-inset-bottom));
}
/* невысокий экран — Мока меньше, иначе карточкам не остаётся места */
@media (orientation:portrait) and (max-height:720px){
  .hero{width:clamp(88px,18vw,120px)}
  #screen-menu{
    padding-top:72px;
    padding-bottom:calc(124px + env(safe-area-inset-bottom));
  }
  /* высота карточек берётся из свободного места, а не из пропорции 1:1 */
  .cards{grid-auto-rows:1fr}
  .card{aspect-ratio:auto;height:100%}
}
.screen.is-active{display:flex}

.title{
  font-size:clamp(48px,12vw,96px);font-weight:900;letter-spacing:.02em;
  margin:0;color:var(--moka-dk);
}
.subtitle{margin:-16px 0 0;color:var(--ink-soft);font-size:clamp(16px,3.4vw,22px)}

.big-btn{
  min-width:min(70vw,340px);min-height:var(--tap);
  padding:0 40px;border-radius:var(--r-lg);
  background:var(--moka);color:#fff;
  font-size:clamp(24px,5vw,34px);font-weight:900;
  box-shadow:0 6px 0 var(--moka-dk);
  transition:transform var(--dur),box-shadow var(--dur);
}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--moka-dk)}

.parent-btn{
  position:fixed;bottom:14px;right:16px;
  padding:12px 18px;border-radius:var(--r-md);
  color:var(--ink-soft);font-size:14px;font-weight:700;
  background:rgba(255,255,255,.5);
}
.parent-btn small{display:block;font-size:11px;font-weight:400;opacity:.7}

.back-btn{
  position:fixed;top:14px;left:16px;z-index:50;
  width:64px;height:64px;border-radius:50%;
  background:var(--surface);color:var(--ink-soft);
  font-size:30px;line-height:1;
  box-shadow:0 2px 8px rgba(46,58,56,.08);
}

/* ===== Меню ===== */
/* Сетка, а не flex-wrap: пять карточек в столбик не помещались на телефоне
   и экран начинал прокручиваться. Колонок столько, сколько влезает. */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(10px,2.4vw,24px);
  width:100%;max-width:760px;
  align-content:center;
}
.card{
  aspect-ratio:1;min-height:0;
  border-radius:var(--r-lg);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.6vh,18px);padding:8px;
  box-shadow:0 4px 0 var(--line);
  transition:transform var(--dur);
}
.card:active{transform:scale(.97)}
.card-label{font-size:clamp(16px,3.6vw,26px);font-weight:900}
/* flex-shrink:0 обязателен: иначе иллюстрация схлопывается до нуля,
   и карточка выглядит пустой */
.card-art{
  display:flex;gap:8px;flex-shrink:0;
  font-size:clamp(26px,5.4vw,48px);font-weight:900;color:var(--moka);
}
.card-art--dots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex-shrink:0}
.card-art--dots i{width:clamp(14px,3.4vw,22px);aspect-ratio:1;border-radius:6px;background:var(--line)}
.card-art--dots i:nth-child(1){background:var(--moka)}
.card-art--dots i:nth-child(5){background:var(--sun)}
.card-art--dots i:nth-child(9){background:var(--lilac)}

/* ===== Сортировка ===== */
.slots,.tiles{display:flex;gap:clamp(12px,3vw,28px);flex-wrap:wrap;justify-content:center}
.slot{
  width:clamp(96px,17vw,140px);aspect-ratio:1;
  border-radius:var(--r-md);
  border:4px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(44px,8vw,72px);font-weight:900;color:var(--line);
  background:rgba(255,255,255,.35);
  transition:transform var(--dur),border-color var(--dur),background var(--dur);
}
.slot.is-armed{border-color:var(--moka);color:var(--moka)}
.slot.is-done{
  border-style:solid;border-color:var(--moka);
  background:var(--surface);color:var(--moka-dk);
}
.slot.is-nope{animation:wobble .4s}

.tile{
  width:clamp(96px,17vw,140px);aspect-ratio:1;
  border-radius:var(--r-md);background:var(--surface);
  font-size:clamp(44px,8vw,72px);font-weight:900;color:var(--ink);
  box-shadow:0 4px 0 var(--line);
  transition:transform var(--dur),box-shadow var(--dur);
}
.tile.is-picked{transform:translateY(-10px) scale(1.06);box-shadow:0 10px 0 var(--moka-dk);background:var(--moka);color:#fff}
.tile.is-gone{visibility:hidden}

@keyframes wobble{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ===== Рисование линией ===== */
.canvas-wrap{display:flex;align-items:center;justify-content:center;flex:1;width:100%}
.tap-area{cursor:pointer}
.glyph-box{height:min(44vh,380px);aspect-ratio:100/140;max-width:88vw}
.glyph{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.g-guide{
  fill:none;stroke:var(--line);stroke-width:13;
  stroke-linecap:round;stroke-linejoin:round;
}
.g-ink{
  fill:none;stroke:var(--moka);stroke-width:13;
  stroke-linecap:round;stroke-linejoin:round;
}
.g-tip{fill:var(--moka);opacity:0;transition:opacity .2s}

.palette{display:flex;gap:clamp(10px,2.6vw,20px);flex-wrap:wrap;justify-content:center}
.swatch{
  width:clamp(56px,11vw,76px);aspect-ratio:1;border-radius:50%;
  box-shadow:0 3px 0 rgba(46,58,56,.14);
  transition:transform var(--dur);
}
.swatch.is-picked{transform:scale(1.18);outline:4px solid var(--ink);outline-offset:4px}

/* ===== Персонаж ===== */
.hero{
  position:fixed;left:50%;bottom:-6px;transform:translateX(-50%);
  width:clamp(120px,22vw,190px);pointer-events:none;z-index:40;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .4s;
}
.hero.is-hidden{opacity:0;transform:translate(-50%,60%)}
.hero.is-center{bottom:auto;top:50%;transform:translate(-50%,-58%) scale(1.25)}
.hero-svg{display:block;width:100%;height:auto;overflow:visible}

.hero-body{fill:var(--moka)}
.hero-arm,.hero-foot{fill:var(--moka-dk)}
.hero-shadow{fill:rgba(46,58,56,.10)}
.hero-cheek{fill:#fff;opacity:.24}
.hero-eye-w{fill:#fff}
.hero-pupil{fill:#2E3A38}
.hero-glint{fill:#fff}
.hero-smile{fill:none;stroke:#2E3A38;stroke-width:5;stroke-linecap:round}
.hero-open{fill:#33403D;opacity:0}
.hero-stalk{fill:none;stroke:var(--moka-dk);stroke-width:6;stroke-linecap:round}
.hero-tip{fill:var(--tip,#E8B04B);transition:fill .5s}

/* дыхание — на внешней группе, громкость — на внутренней, чтобы не спорили */
.hero-body-g{transform-origin:100px 180px;animation:breathe 3.6s ease-in-out infinite}
.hero-scale{transform-origin:100px 186px;transition:transform .08s linear}
.hero-eyes{transform-origin:100px 98px;animation:blink 5.4s infinite}
/* зрачки следят за тем, что сейчас важно на экране */
.hero-pupils{transform:translate(calc(var(--lx,0) * 4px),calc(var(--ly,0) * 3px));transition:transform .4s ease-out}

@keyframes breathe{50%{transform:scaleY(1.035) scaleX(.985)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}

/* отскок с растяжением-сжатием: живее, чем ровное увеличение */
.hero.is-happy .hero-body-g{animation:hop .62s cubic-bezier(.3,.8,.4,1) 2}
@keyframes hop{
  0%,100%{transform:translateY(0) scale(1,1)}
  18%{transform:translateY(6px) scale(1.1,.9)}
  50%{transform:translateY(-22px) scale(.93,1.09)}
  78%{transform:translateY(3px) scale(1.07,.94)}
}
.hero.is-happy .hero-arm--l{animation:wave-l .42s ease-in-out 3}
.hero.is-happy .hero-arm--r{animation:wave-r .42s ease-in-out 3}
@keyframes wave-l{50%{transform:rotate(-26deg)}}
@keyframes wave-r{50%{transform:rotate(26deg)}}
.hero-arm--l{transform-origin:44px 114px}
.hero-arm--r{transform-origin:156px 114px}
.hero.is-happy .hero-cheek{opacity:.45}
.hero.is-happy .hero-smile{d:path("M84 128q16 20 32 0")}

body.calm .hero-pupils{transition:none}
body.calm .hero.is-happy .hero-arm--l,
body.calm .hero.is-happy .hero-arm--r{animation:none}

/* ===== Голосовой момент ===== */
.voice-layer{
  position:fixed;inset:0;z-index:60;
  background:rgba(233,239,236,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:24px;
}
.voice-word{font-size:clamp(64px,20vw,180px);font-weight:900;color:var(--moka-dk);line-height:1}
.voice-ring{
  width:clamp(120px,26vw,180px);aspect-ratio:1;border-radius:50%;
  border:6px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.voice-ring span{
  display:block;width:100%;height:100%;border-radius:50%;
  background:var(--moka);transform:scale(.12);
  transition:transform .09s linear;
}
.voice-hint{margin:0;color:var(--ink-soft);font-weight:400;font-size:clamp(15px,3.2vw,20px)}
.voice-ok{
  min-height:72px;min-width:220px;padding:0 32px;border-radius:var(--r-lg);
  background:var(--surface);color:var(--moka-dk);font-size:22px;font-weight:900;
  box-shadow:0 4px 0 var(--line);
}

/* ===== Похвала ===== */
.praise{position:fixed;inset:0;z-index:70;pointer-events:none;display:flex;align-items:center;justify-content:center}
.praise-burst{position:relative;width:1px;height:1px}
.spark{
  position:absolute;width:16px;height:16px;border-radius:4px;
  animation:fly .9s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(180deg);opacity:0}}

/* ===== Настройки ===== */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(46,58,56,.35);display:flex;align-items:flex-end;justify-content:center}
.sheet-inner{
  width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:28px 24px max(28px,env(safe-area-inset-bottom));
}
.sheet-inner h2{margin:0 0 8px;font-size:24px;font-weight:900}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:17px;font-weight:700;
}
.row input[type=checkbox]{width:28px;height:28px;accent-color:var(--moka)}
.row input[type=range]{width:150px;accent-color:var(--moka)}
.row select,
.row input[type=text]{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit}
.row input[type=text]{width:150px;text-align:right;font-weight:700}
.sheet-note{color:var(--ink-soft);font-weight:400;font-size:14px;min-height:1em}
.voice-test{
  width:100%;min-height:52px;margin:14px 0 4px;border-radius:var(--r-md);
  background:var(--bg);color:var(--moka-dk);font-size:16px;font-weight:700;
}
.sheet-close{
  width:100%;min-height:64px;margin-top:16px;border-radius:var(--r-md);
  background:var(--moka);color:#fff;font-size:20px;font-weight:900;
}

/* ===== Доступность / спокойный режим ===== */
:focus-visible{outline:4px solid var(--lilac);outline-offset:4px}

body.calm .hero-body-g,
body.calm .hero-eyes,
body.calm .spark{animation:none!important}
body.calm .card,body.calm .big-btn,body.calm .tile{transition:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}
@media (orientation:portrait) and (max-height:700px){
  .hero{width:100px}
}

/* ===== Запись своего голоса ===== */
.rec-progress{margin:12px 0 4px;font-size:15px;font-weight:700;color:var(--moka-dk)}
.rec-group{margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em}
.rec-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.rec-word{flex:1;font-size:17px;font-weight:700}
.rec-row.is-done .rec-word{color:var(--moka-dk)}
.rec-btn{
  min-width:46px;height:46px;border-radius:14px;background:var(--bg);
  font-size:17px;font-weight:700;color:var(--ink-soft);
}
.rec-btn.is-rec{background:var(--moka);color:#fff;animation:recpulse 1s ease-in-out infinite}
@keyframes recpulse{50%{opacity:.6}}
.rec-btn[disabled]{opacity:.35}
body.calm .rec-btn.is-rec{animation:none}

/* ===== Посчитай ===== */
.card--count-art{gap:6px;font-size:clamp(26px,5.5vw,42px)}
.card--count-art b:last-child{color:var(--lilac)}

.count-row{display:flex;gap:clamp(8px,2.4vw,26px);flex-wrap:wrap;justify-content:center;align-items:center}
.count-cell{
  padding:clamp(8px,1.6vw,18px);border-radius:var(--r-md);
  background:var(--surface);box-shadow:0 3px 0 var(--line);
  transition:box-shadow var(--dur),opacity var(--dur);
}
.count-cell .glyph-box{height:clamp(90px,20vh,170px);max-width:22vw}
.count-cell.is-off{opacity:.5}
/* подсветка не сдвигает клетку: по движущейся мишени попасть труднее */
.count-cell.is-next{box-shadow:0 3px 0 var(--moka-dk),0 0 0 8px rgba(111,179,160,.28)}
.count-cell.is-wait{
  box-shadow:0 3px 0 var(--moka-dk),0 0 0 calc(6px + var(--vol,0) * 26px) rgba(111,179,160,.30);
  transition:box-shadow .08s linear;
}

/* ===== Восстановленные стили =====
   Часть правил была случайно вырезана при переходе от квадратов к линиям.
   Из-за этого иллюстрации на карточках схлопывались, а журнал и полоска
   уровня показывались без оформления. */

/* --- иллюстрации на карточках меню --- */
.card-art--wave{
  display:flex;align-items:flex-end;gap:5px;flex-shrink:0;
  height:clamp(30px,6.4vw,52px);
}
.card-art--wave i{width:clamp(8px,2vw,12px);border-radius:6px;background:var(--moka)}
.card-art--wave i:nth-child(1){height:40%}
.card-art--wave i:nth-child(2){height:75%}
.card-art--wave i:nth-child(3){height:100%}
.card-art--wave i:nth-child(4){height:60%}
.card-art--wave i:nth-child(5){height:30%}

.card-art--pair{display:flex;gap:8px;flex-shrink:0}
.card-art--pair i{
  width:clamp(22px,5vw,34px);height:clamp(28px,6.4vw,44px);
  border-radius:10px;background:var(--line);
}
.card-art--pair i:first-child{background:var(--lilac)}

/* --- голосовой режим --- */
.level-bar{display:flex;align-items:flex-end;gap:6px;height:clamp(34px,7vw,56px);flex-shrink:0}
.level-bar i{
  width:10px;height:8px;border-radius:5px;background:var(--line);
  transition:height .07s linear,background .07s linear;
}
.level-bar i.is-lit{background:var(--moka)}

.voice-tip{
  margin:0;color:var(--ink-soft);font-weight:400;
  font-size:clamp(13px,3vw,18px);min-height:1.4em;text-align:center;
}

.shelf{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  min-height:44px;align-items:center;max-width:92vw;
}
.shelf b{font-size:clamp(24px,5vw,34px);font-weight:900;line-height:1;animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{from{transform:scale(0)}}
body.calm .shelf b{animation:none}

/* --- покажи, где --- */
.ask{
  margin:0;font-size:clamp(20px,4.6vw,34px);font-weight:900;color:var(--ink);
  text-align:center;min-height:1.2em;
}
.choices{
  display:flex;gap:clamp(12px,4vw,44px);
  flex-wrap:wrap;justify-content:center;align-items:center;
}

/* --- журнал для взрослых --- */
.stats{padding:18px 0 4px;border-bottom:1px solid var(--line)}
.stats h3{
  margin:0 0 12px;font-size:15px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;
}
.stat-row{display:flex;gap:12px}
.stat{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 6px;border-radius:var(--r-md);background:var(--bg);
}
.stat b{font-size:30px;font-weight:900;line-height:1;color:var(--moka-dk)}
.stat small{font-size:12px;font-weight:400;color:var(--ink-soft)}
.stat-note{margin:10px 0 0;font-size:13px;font-weight:400;color:var(--ink-soft)}
.history{list-style:none;margin:12px 0 0;padding:0;font-size:14px;font-weight:400}
.history li{display:flex;justify-content:space-between;padding:6px 2px;color:var(--ink-soft)}
.history li b{font-weight:700;color:var(--ink)}
.stat-reset{
  margin:10px 0 4px;padding:8px 0;font-size:13px;font-weight:400;
  color:var(--ink-soft);text-decoration:underline;
}

/* --- горизонтальная ориентация телефона: меню в один ряд --- */
@media (orientation:landscape) and (max-height:480px){
  #screen-menu{padding-top:56px;padding-bottom:16px}
  .cards{grid-template-columns:repeat(5,1fr);max-width:96vw;gap:10px}
  .card{aspect-ratio:auto;height:calc(100vh - 96px);padding:6px}
  .card-label{font-size:15px}
  .hero{display:none}
}