:root{
  --bg:#faf6ee; --card:#ffffff; --ink:#2b2620; --muted:#6b6157;
  --green:#2e7d32; --green-bg:#e8f5e9; --red:#c62828; --red-bg:#fdecea;
  --blue:#1565c0; --blue-bg:#e7f0fb; --gold:#b7791f; --gold-bg:#fdf3e0;
  --line:#e5ddd0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:20px;}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55; padding:0 0 3rem;
}
.wrap{max-width:820px; margin:0 auto; padding:0 1rem;}
header{
  background:linear-gradient(135deg,#2e7d32,#1b5e20);
  color:#fff; padding:1.6rem 1rem 1.8rem; text-align:center;
}
header h1{font-size:1.7rem; line-height:1.2; margin-bottom:.4rem;}
header p{font-size:1rem; opacity:.95; max-width:640px; margin:0 auto;}
.topnav{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin-top:1rem;
}
.topnav a{
  background:rgba(255,255,255,.16); color:#fff; text-decoration:none;
  padding:.45rem .9rem; border-radius:999px; font-size:.95rem; font-weight:600;
}
.topnav a:active{background:rgba(255,255,255,.3);}
h2{
  font-size:1.5rem; margin:2.2rem 0 1rem; line-height:1.25;
  border-bottom:4px solid var(--green); padding-bottom:.4rem;
}
h3{font-size:1.15rem; margin:1.3rem 0 .5rem;}
p{margin:.7rem 0;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1.2rem 1.3rem; margin:1rem 0; box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.big-num{font-size:2.6rem; font-weight:800; line-height:1;}
.green{color:var(--green);} .red{color:var(--red);} .blue{color:var(--blue);}
.note{
  background:var(--blue-bg); border-left:6px solid var(--blue);
  border-radius:10px; padding:.9rem 1rem; margin:1rem 0; font-size:.95rem;
}
.warn{
  background:var(--red-bg); border-left:6px solid var(--red);
  border-radius:10px; padding:.9rem 1rem; margin:1rem 0;
}
.gold-box{
  background:var(--gold-bg); border-left:6px solid var(--gold);
  border-radius:10px; padding:.9rem 1rem; margin:1rem 0;
}
ul,ol{margin:.6rem 0 .6rem 1.4rem;}
li{margin:.45rem 0;}
table{border-collapse:collapse; width:100%; margin:1rem 0; background:#fff; border-radius:12px; overflow:hidden;}
th,td{border:1px solid var(--line); padding:.6rem .7rem; text-align:left; vertical-align:top;}
th{background:#f1ece2; font-size:.95rem;}
.food-ok{background:var(--green-bg);}
.food-no{background:var(--red-bg);}
.steps{counter-reset:step; list-style:none; margin-left:0;}
.steps>li{
  counter-increment:step; position:relative; padding-left:3.2rem;
  margin:1.1rem 0; min-height:2.4rem;
}
.steps>li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.money-table td:nth-child(2){font-weight:700; white-space:nowrap;}
.milestone{background:var(--gold-bg); font-weight:700;}
.phone-strip{display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0;}
.phone-strip div{
  flex:1 1 220px; background:#fff; border:2px solid var(--line);
  border-radius:12px; padding:.8rem; text-align:center;
}
.phone-strip b{display:block; font-size:1.05rem;}
.em{font-size:1.6rem; line-height:1;}
footer{text-align:center; margin-top:3rem; color:var(--muted); font-size:.9rem;}
svg text{font-family:inherit;}

/* --- интерактив --- */
.btn-big{
  background:var(--green); color:#fff; border:none; border-radius:14px;
  font-size:1.25rem; font-weight:800; padding:1rem 1.6rem; cursor:pointer;
  width:100%; margin:.4rem 0;
}
.btn-big:disabled{background:#9fbfa1; cursor:default;}
.week-actions{display:flex; flex-wrap:wrap; gap:1rem;}
.week-actions .wa{flex:1 1 260px; background:#f6f2e8; border-radius:14px; padding:1rem;}
#weight-input{
  font-size:1.4rem; width:7rem; padding:.5rem .6rem; border:2px solid var(--line);
  border-radius:10px; text-align:center;
}
.save-note{color:var(--green); font-weight:700; min-height:1.4rem; margin:.4rem 0 0;}
.muted-note{color:var(--muted); font-size:.92rem;}
.goal-input{
  display:block; width:100%; font-size:1.15rem; padding:.6rem .8rem; margin:.5rem 0;
  border:none; border-bottom:3px solid var(--line); background:transparent;
  font-family:inherit; color:var(--ink);
}
.goal-input:focus{outline:none; border-bottom-color:var(--green); background:#fff;}

/* --- дашборд --- */
.stat-row{display:flex; flex-wrap:wrap; gap:.8rem; text-align:center;}
.stat-row .st{flex:1 1 140px; background:#f6f2e8; border-radius:14px; padding:.9rem .5rem;}
.stat-row .num{font-size:2rem; font-weight:800; line-height:1.1;}
.stat-row .lbl{font-size:.9rem; color:var(--muted); margin-top:.25rem;}
.progress-track{
  background:#eee5d4; border-radius:999px; height:2rem; position:relative;
  margin:.9rem 0 .3rem; overflow:hidden;
}
.progress-fill{
  background:linear-gradient(90deg,#66bb6a,#2e7d32); height:100%;
  border-radius:999px; min-width:2rem;
  display:flex; align-items:center; justify-content:flex-end;
  color:#fff; font-weight:800; padding-right:.6rem; font-size:.95rem;
}
.progress-ends{display:flex; justify-content:space-between; font-size:.95rem; color:var(--muted);}
.praise{
  background:var(--green-bg); border-left:6px solid var(--green);
  border-radius:10px; padding:.9rem 1rem; margin:1rem 0; font-size:1.05rem;
}
.msg-box{
  background:var(--gold-bg); border-left:6px solid var(--gold);
  border-radius:10px; padding:.9rem 1rem; margin:1rem 0; font-size:1.05rem;
}
.medals{display:flex; flex-wrap:wrap; gap:.7rem;}
.medal{
  flex:1 1 150px; border:2px solid var(--line); border-radius:14px;
  padding:.8rem .5rem; text-align:center; background:#fff;
}
.medal .mi{font-size:2.2rem; line-height:1;}
.medal .mt{font-weight:700; font-size:.95rem; margin-top:.3rem;}
.medal .ms{font-size:.85rem; color:var(--muted);}
.medal.got{background:var(--gold-bg); border-color:var(--gold);}
.medal.locked{opacity:.45; filter:grayscale(1);}
.streak-box{
  display:flex; align-items:center; gap:1rem; background:#f6f2e8;
  border-radius:14px; padding:.9rem 1rem; margin:1rem 0;
}
.streak-box .fire{font-size:2.4rem; line-height:1;}
.mini-table td,.mini-table th{text-align:center; padding:.5rem .4rem;}
.nav-cards{display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0;}
.nav-cards a{
  flex:1 1 200px; background:#fff; border:2px solid var(--line); border-radius:14px;
  padding:1rem .8rem; text-align:center; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:1.05rem;
}
.nav-cards a:active{border-color:var(--green);}
.nav-cards .nc-em{display:block; font-size:1.8rem; margin-bottom:.3rem;}
.back-link{
  display:inline-block; margin:1rem 0 0; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.16); padding:.45rem 1rem; border-radius:999px; font-weight:600;
}

/* --- игра --- */
.day-checks{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
.day-btn{
  border:3px solid var(--line); background:#fff; border-radius:14px;
  font-size:1.05rem; font-weight:700; padding:.9rem .6rem; cursor:pointer;
  font-family:inherit; color:var(--ink); text-align:center; line-height:1.3;
}
.day-btn .de{display:block; font-size:1.7rem; margin-bottom:.15rem;}
.day-btn.on{background:var(--green-bg); border-color:var(--green);}
.day-btn.on::after{content:" ✔"; color:var(--green); font-weight:800;}
.perfect{
  background:var(--gold-bg); border:2px solid var(--gold); border-radius:12px;
  padding:.7rem 1rem; margin-top:.8rem; text-align:center; font-weight:800; font-size:1.1rem;
}
.rank-line{
  display:flex; align-items:center; gap:.9rem; background:var(--gold-bg);
  border-radius:14px; padding:.8rem 1rem; margin:1rem 0;
}
.rank-line .re{font-size:2.4rem; line-height:1;}
.fact-box{
  background:var(--blue-bg); border-left:6px solid var(--blue);
  border-radius:10px; padding:.9rem 1rem; margin:1rem 0; font-size:1rem;
}
.medal-h{margin:1.2rem 0 .5rem; font-size:1.05rem; color:var(--muted);}
.secret-line{color:var(--muted); font-size:.95rem; margin-top:.8rem;}
.confetti-piece{
  position:fixed; top:-3rem; font-size:2rem; z-index:999; pointer-events:none;
  animation:confall 2.8s linear forwards;
}
@keyframes confall{to{transform:translateY(115vh) rotate(400deg); opacity:.7;}}
.new-medal-banner{
  position:fixed; left:50%; top:18%; transform:translateX(-50%);
  background:#fff; border:4px solid var(--gold); border-radius:18px;
  padding:1.2rem 1.6rem; z-index:1000; text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.25); font-size:1.2rem; font-weight:800;
}

.ladder-row{
  display:flex; align-items:center; gap:.8rem; border:2px solid var(--line);
  border-radius:14px; padding:.7rem .9rem; margin:.5rem 0; background:#fff;
}
.ladder-row .le{font-size:1.9rem; line-height:1;}
.ladder-row .lt{flex:1;}
.ladder-row .lt b{display:block;}
.ladder-row .lt small{color:var(--muted);}
.ladder-row.done{background:var(--green-bg); border-color:var(--green);}
.ladder-row.locked{opacity:.45;}
.ladder-btn{
  background:var(--gold); color:#fff; border:none; border-radius:10px;
  font-size:.95rem; font-weight:800; padding:.6rem .9rem; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.mission-box{
  background:var(--gold-bg); border:2px dashed var(--gold); border-radius:12px;
  padding:.8rem 1rem; margin-top:.9rem; font-size:1rem;
}
.stars-line{
  text-align:center; font-size:1.15rem; font-weight:800; margin:.7rem 0 0;
}

@media (max-width:600px){
  html{font-size:18px;}
  header h1{font-size:1.45rem;}
}