/* Pip — общий стиль. Мятный фон, лисий оранжевый акцент, округлый детский шрифт для заголовков. */
:root{
  --bg:#E8F3EF; --surface:#FFFFFF; --ink:#16323A; --muted:#5C7A80; --line:#CFE2DC;
  --fox:#EE7A2E; --fox-deep:#C95A14; --leaf:#2F8F63; --leaf-soft:#D7EFE3; --sky:#DCEBF7; --warn:#C2473A; --warn-soft:#F8E1DD;
  --listen:#2F6FB0;
  --display:"Baloo 2","Comic Sans MS",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0F1E1F; --surface:#18292B; --ink:#E6F1EE; --muted:#93AFAF; --line:#2A4143;
  --fox:#F28A43; --fox-deep:#F7A46B; --leaf:#5CC491; --leaf-soft:#1E3A30; --sky:#1B2E3D; --warn:#EF7A6C; --warn-soft:#3A2220;
  --listen:#7DB3EC; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--fox);outline-offset:2px}
[hidden]{display:none!important}

.app{height:100%;display:flex;flex-direction:column;align-items:center;max-width:560px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 10px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px))}
.top{width:100%;display:flex;align-items:center;gap:10px}
.brand{font-family:var(--display);font-weight:800;font-size:22px;flex:1}
.brand span{color:var(--fox)}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none}

/* сцена */
.stage{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0}
.ring{position:relative;width:min(62vw,260px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;padding:0}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--surface);box-shadow:0 0 0 6px var(--line);transition:box-shadow .2s}
.ring.listening::before{box-shadow:0 0 0 calc(6px + var(--lv,0) * 26px) color-mix(in srgb,var(--listen) 35%,transparent),0 0 0 6px var(--listen)}
.ring.speaking::before{box-shadow:0 0 0 10px color-mix(in srgb,var(--fox) 30%,transparent),0 0 0 6px var(--fox)}
.ring svg{position:relative;width:78%;height:78%}
.pip .mouth{transform-origin:60px 85px;transform:scaleY(.6)}
.speaking .pip .mouth{animation:talk .26s infinite alternate}
.pip .lid{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:blink 5s infinite}
.thinking .pip .head{animation:tilt 1.2s ease-in-out infinite alternate;transform-origin:60px 100px}
.listening .pip .ear{animation:ear .8s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}
@keyframes talk{from{transform:scaleY(.4)}to{transform:scaleY(1.3)}}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
@keyframes tilt{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes ear{to{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.pip *{animation:none!important}}

.status{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-height:1.4em;text-align:center}
.status.listening{color:var(--listen)} .status.speaking{color:var(--fox-deep)}
.subtitle{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.3;text-align:center;text-wrap:balance;max-width:30ch;min-height:2.6em}
.heard{font-size:15px;color:var(--muted);text-align:center;max-width:34ch;min-height:1.4em}

.start{border:0;background:var(--fox);color:#fff;border-radius:999px;padding:16px 34px;font-family:var(--display);font-size:24px;font-weight:800;box-shadow:0 5px 0 var(--fox-deep)}
.start:active{transform:translateY(3px);box-shadow:0 2px 0 var(--fox-deep)}
.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.soft{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 16px;font-weight:800;font-size:15px}
.soft.on{border-color:var(--fox);color:var(--fox-deep)}
.bye{border-color:var(--warn);color:var(--warn)}
.tip{font-size:13px;color:var(--muted);text-align:center}
.err{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:10px 14px;font-size:14px;text-align:center;max-width:34ch}

/* настройка */
.setup{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px}
.setup input{font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.setup label{font-weight:700;font-size:14px;color:var(--muted)}

/* родитель */
.page{max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 16px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 32px) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.page h1{font-family:var(--display);font-size:28px;margin:0;flex:1}
.page h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.lvl{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lvl b{font-family:var(--display);font-size:44px;line-height:1;color:var(--fox-deep)}
.scale{position:relative;height:10px;border-radius:99px;background:var(--line);margin-top:12px}
.scale i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--leaf),var(--fox))}
.scale-l{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat b{display:block;font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
.words{display:flex;flex-wrap:wrap;gap:6px}
.w{border-radius:999px;padding:2px 10px;font-size:14px;background:var(--leaf-soft)}
.w.learn{background:var(--sky)} .w.miss{background:var(--warn-soft)}
.gap{border-top:1px solid var(--line);padding-block:10px;display:flex;flex-direction:column;gap:4px}
.gap:first-of-type{border-top:0;padding-top:0}
.gap .h{display:flex;gap:10px;align-items:baseline}
.gap .h b{flex:1}
.gap .n{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.ex{font-size:14px}.ex s{color:var(--warn)}.ex em{color:var(--leaf);font-style:normal;font-weight:700}
.bar2{height:6px;border-radius:9px;background:var(--leaf-soft);overflow:hidden}.bar2 i{display:block;height:100%;background:var(--warn)}
.session{border-top:1px solid var(--line);padding-block:12px;display:flex;flex-direction:column;gap:6px}
.session:first-of-type{border-top:0;padding-top:0}
.session ul{margin:0;padding-left:18px}
.session details{font-size:14px}
.t{font-size:13px;color:var(--muted)}
.note{font-size:14px;color:var(--muted)}
.chart{width:100%;height:120px;display:block}
.danger{border:1px solid var(--warn);color:var(--warn);background:transparent;border-radius:12px;padding:8px 14px;font-weight:700}