/* ===== Шрифты (локально, с запасными системными) ===== */

/* ===== Палитра стиля A ===== */
:root{
  --cream:#fbf6e9;
  --cream-2:#f4ecd6;
  --card:rgba(255,252,242,.94);
  --green-dark:#1f3d20;
  --green:#2e5b2b;
  --green-mid:#4f7d2e;
  --green-light:#e4eed6;
  --gold:#c49a3c;
  --gold-dark:#8a6a1f;
  --text:#2b2a24;
  --muted:#5b5a50;
  --ok:#2e6b2e;
  --ok-bg:#e1f0d8;
  --bad:#9a3b1e;
  --bad-bg:#fbe6dc;
  --radius:22px;
  --fs:20px;
  --shadow:0 6px 24px rgba(60,50,20,.14);
  --head:"Lora",Georgia,"Times New Roman",serif;
  --body:"Nunito","Segoe UI",Roboto,Arial,sans-serif;
}
html.fs-2{--fs:23px}
html.fs-3{--fs:26px}

*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--text);background:var(--cream);-webkit-tap-highlight-color:transparent}
.bg{position:fixed;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(251,246,233,.55) 0%,rgba(251,246,233,.82) 45%,rgba(251,246,233,.96) 100%),
  var(--bg-img-v) center top/cover no-repeat,var(--cream)}
@media (min-width:700px){.bg{background:
  linear-gradient(180deg,rgba(251,246,233,.45) 0%,rgba(251,246,233,.85) 60%,rgba(251,246,233,.97) 100%),
  var(--bg-img) center top/cover no-repeat,var(--cream)}}

.app{max-width:640px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.screen{display:none;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}*{transition:none!important}}

h1,h2,h3{font-family:var(--head);color:var(--green-dark);font-weight:700;line-height:1.2;margin:.2em 0 .3em}
h1{font-size:2rem;text-align:center}
h2{font-size:1.55rem}
h3{font-size:1.1rem;margin-top:1.1em}
p{margin:.5em 0 .8em}
.muted{color:var(--muted)}
.center{text-align:center}

.gold-line{width:110px;height:3px;background:var(--gold);border-radius:2px;margin:.6em auto .9em}
.gold-line.left{margin-left:0}

.hero{text-align:center;padding:10px 8px 6px}
.hero-icon{width:84px;height:84px;border-radius:50%;box-shadow:var(--shadow)}
.hero-sub{color:#6b4a22;font-weight:600;margin-top:0}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px;margin:14px 0;border:1px solid rgba(196,154,60,.25);backdrop-filter:blur(3px)}

.pill{display:inline-block;background:var(--green-dark);color:#fbf6e9;font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 16px;border-radius:999px}

/* Статистика */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat{display:flex;flex-direction:column}
.stat-num{font-family:var(--head);font-size:1.7rem;font-weight:700;color:var(--green-dark);line-height:1.1}
.stat-label{font-size:.82rem;color:var(--muted);font-weight:600}
.level-box{grid-column:1/-1;margin-top:8px;text-align:left}
.level-title{font-weight:800;color:var(--gold-dark)}
.progress{height:16px;background:var(--cream-2);border-radius:999px;overflow:hidden;border:1px solid rgba(196,154,60,.4);margin:6px 0}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--green-mid),var(--green));border-radius:999px;transition:width .6s ease}
.level-hint{font-size:.85rem;color:var(--muted)}

/* Меню */
.menu{display:grid;gap:14px;margin:14px 0}
.menu-card{display:flex;align-items:center;gap:14px;width:100%;min-height:96px;padding:10px;border:2px solid transparent;border-radius:var(--radius);background:var(--green-dark);color:#fbf6e9;text-align:left;cursor:pointer;box-shadow:var(--shadow);font:inherit}
.menu-card .menu-img{background-position:center;background-size:cover;background-repeat:no-repeat;display:block;width:118px;height:80px;object-fit:cover;border-radius:14px;flex:none}
.menu-text{display:flex;flex-direction:column}
.menu-title{font-family:var(--head);font-size:1.2rem;font-weight:700;line-height:1.2}
.menu-desc{font-size:.88rem;color:#e7dcb6;margin-top:4px}
.menu-card:hover{border-color:var(--gold)}
.menu-card:focus-visible,.btn:focus-visible,.herb-btn:focus-visible,.btn-back:focus-visible,.seg-btn:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.menu-card:active{transform:scale(.99)}

/* Кнопки */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:12px 22px;border-radius:16px;border:2px solid transparent;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center;line-height:1.25;transition:background .2s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-big{width:100%;margin-top:12px;font-size:1.05rem}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-secondary{background:var(--gold);color:#1f2a10}
.btn-secondary:hover{background:#b48a2e}
.btn-ghost{background:rgba(255,252,242,.9);color:var(--green-dark);border-color:var(--green-mid)}
.btn-danger{background:#fff;color:var(--bad);border-color:var(--bad)}
.row-buttons{display:flex;gap:12px}
.row-buttons .btn{flex:1}
.row-buttons.col{flex-direction:column;gap:0}

.btn-back{min-height:56px;padding:8px 18px;border-radius:14px;border:2px solid var(--green-mid);background:rgba(255,252,242,.92);color:var(--green-dark);font:inherit;font-weight:800;cursor:pointer}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.counter{font-weight:800;color:var(--green-dark);background:rgba(255,252,242,.92);padding:10px 16px;border-radius:999px}

/* Вопрос */
.question-card{text-align:center}
.q-text{font-size:1.45rem;margin:.7em 0 .2em}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-answer{min-height:76px;font-size:1.15rem}
.btn-true{background:var(--green);color:#fff}
.btn-false{background:#7a4a1c;color:#fff}
.btn-answer[disabled]{opacity:.45;cursor:default}
.btn-answer.chosen{opacity:1;outline:4px solid var(--gold);outline-offset:2px}
.feedback{margin-top:16px;text-align:left;border-radius:16px;padding:16px 16px 6px}
.feedback.ok{background:var(--ok-bg)}
.feedback.bad{background:var(--bad-bg)}
.feedback-head{font-family:var(--head);font-size:1.25rem;font-weight:700}
.feedback.ok .feedback-head{color:var(--ok)}
.feedback.bad .feedback-head{color:var(--bad)}
.big-result{font-family:var(--head);font-size:2.4rem;font-weight:700;color:var(--green-dark);margin:.2em 0}
.streak-msg{font-weight:700;color:var(--gold-dark)}

/* Травяной сбор */
.riddle-card{text-align:center}
.riddle{font-family:var(--head);font-size:1.35rem;font-weight:600;color:var(--green-dark);margin:.7em 0 .3em}
.hint{min-height:1.5em;color:var(--bad);font-weight:700}
.hint.ok{color:var(--ok)}
.jar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;min-height:34px;margin-bottom:8px}
.jar .leaf{width:30px;height:30px}
.herb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.herb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;padding:12px 8px;border-radius:18px;border:2px solid rgba(46,91,43,.35);background:var(--card);color:var(--green-dark);font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow);line-height:1.2}
.herb-btn svg{width:52px;height:52px}
.herb-btn:hover{border-color:var(--gold)}
.herb-btn.done{background:var(--ok-bg);border-color:var(--ok);opacity:.7;cursor:default}
.herb-btn.wrong{background:var(--bad-bg);border-color:var(--bad);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.herb-list{text-align:left;padding-left:1.1em;margin:.4em 0}
.herb-list li{margin:.45em 0}
.herb-list b{color:var(--green-dark)}

/* Совет дня */
.tip-text{font-size:1.1rem;text-align:left}

/* Настройки */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.seg-btn{min-height:60px;border-radius:14px;border:2px solid var(--green-mid);background:#fff;color:var(--green-dark);font:inherit;font-weight:800;cursor:pointer}
.seg-btn[aria-checked="true"]{background:var(--green);color:#fff}

.doctor-note{font-size:.9rem;color:#5c4a22;background:rgba(244,236,214,.9);border-left:4px solid var(--gold);border-radius:10px;padding:10px 14px;margin:16px 0;text-align:left}

.signature{text-align:center;margin:22px auto 6px;display:table;font-family:var(--head);font-weight:700;color:#fbf6e9;background:var(--green-dark);padding:8px 26px;border-radius:999px;font-size:.95rem}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--green-dark);color:#fff;padding:14px 22px;border-radius:16px;font-weight:700;box-shadow:var(--shadow);max-width:90vw;text-align:center;z-index:20}
.modal{position:fixed;inset:0;background:rgba(20,30,15,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:30}
.modal[hidden],.toast[hidden],.feedback[hidden]{display:none}
.modal-box{max-width:460px;width:100%}

@media (min-width:700px){
  .app{padding-top:28px}
  h1{font-size:2.4rem}
  .menu-card .menu-img{width:150px;height:100px}
}
[tabindex="-1"]:focus{outline:none}
.btn-answer.correct{opacity:1}
.btn-answer{flex-direction:column;gap:0}
.btn-answer.correct::after{content:"верный ответ";display:block;font-weight:600;font-size:.85em}

/* ---------- Установка игры ---------- */
.install-box{margin:4px 0 16px}
.install-box[hidden],[data-install-box][hidden]{display:none}
.btn-install{background:linear-gradient(180deg,#3d7a37,#2e5b2b);color:#fff;border:3px solid var(--gold);min-height:72px;font-size:1.25rem;border-radius:20px;box-shadow:0 6px 16px rgba(31,61,32,.28)}
.btn-install:hover{background:var(--green-dark)}
.btn-install:active{transform:scale(.98)}
.btn-install-ic{width:34px;height:34px;flex:none}
.install-note{margin:8px 4px 0;text-align:center;color:var(--muted,#6b6b5f);font-size:.95rem;line-height:1.4}
.ins{font-size:1.12rem;line-height:1.45}
.ins-lead{font-size:1.15rem}
.ins-warn{background:#fff7d6;border:2px solid var(--gold);border-radius:14px;padding:10px 12px}
.ins-steps{list-style:none;margin:10px 0 6px;padding:0;text-align:left}
.ins-step{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(196,154,60,.3)}
.ins-step:last-child{border-bottom:0}
.ins-n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--green-dark);color:#fff;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.ins-ic{flex:none;width:56px;height:56px;background:#fff;border-radius:14px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ins-ic.ins-inline{width:34px;height:34px;padding:3px;border-radius:9px;vertical-align:middle;display:inline-block;margin:0 2px}
.ins-app{flex:none;width:56px;height:56px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ins.center .ins-app{width:84px;height:84px;border-radius:20px;margin:6px auto 4px;display:block}
.ins-t b{color:var(--green-dark)}
.ins-small{display:block;margin-top:6px;font-size:.98rem;color:var(--muted,#6b6b5f)}
.ins-link{margin-top:6px}
.ins-url{background:#fff;border:2px dashed var(--gold);border-radius:12px;padding:10px 12px;font-weight:700;word-break:break-all;text-align:center;user-select:all;-webkit-user-select:all}