@font-face{font-family:Unbounded;src:url(/static/fonts/unbounded-cyrillic.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:Onest;src:url(/static/fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#1d2a1b; --bg:#d9f2a6; --leaf:#c4e68a; --card:#fffdf4;
  --sun:#ffd23f; --go:#4cc35a; --fire:#ff8a3d; --bad:#ff5d5d;
  --shadow:0 5px 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:Onest,system-ui,sans-serif;color:var(--ink);min-height:100vh;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23c4e68a'%3E%3Cpath d='M20 70Q20 20 70 10Q60 60 20 70Z'/%3E%3Cpath d='M120 170Q110 120 165 105Q165 155 120 170Z'/%3E%3Cellipse cx='130' cy='40' rx='9' ry='11'/%3E%3Ccircle cx='117' cy='24' r='4.5'/%3E%3Ccircle cx='127' cy='19' r='4.5'/%3E%3Ccircle cx='138' cy='20' r='4.5'/%3E%3Ccircle cx='146' cy='28' r='4.5'/%3E%3Cellipse cx='45' cy='135' rx='7' ry='9'/%3E%3Ccircle cx='35' cy='122' r='3.6'/%3E%3Ccircle cx='43' cy='118' r='3.6'/%3E%3Ccircle cx='52' cy='120' r='3.6'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-user-select:none;user-select:none;
}
button{font:inherit;color:inherit;cursor:pointer}
.page{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) 16px 170px}

.top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mascot{width:92px;height:92px;flex:none;animation:bob 3s ease-in-out infinite}
.mascot svg,.rec-mascot svg,.ava svg{width:100%;height:100%;display:block;overflow:visible}
.hello{font-weight:700;font-size:17px;opacity:.75}
h1{font-family:Unbounded;font-weight:800;font-size:30px;line-height:1.05;margin:2px 0 0;letter-spacing:-.5px}
h2{font-family:Unbounded;font-weight:700;font-size:20px;margin:30px 4px 12px}

.read-all{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:64px;border:3px solid var(--ink);border-radius:20px;background:var(--sun);
  box-shadow:var(--shadow);font-weight:800;font-size:21px;margin-bottom:22px;
}
.read-all:active,.big:active,.card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.read-all.on{background:#fff}
.ico svg{width:30px;height:30px;display:block}

.list{display:flex;flex-direction:column;gap:14px}
.card{
  display:flex;align-items:center;gap:12px;padding:10px 10px 10px 8px;min-height:84px;position:relative;
  background:var(--card);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);
  transition:transform .12s;
}
.card:nth-child(odd){transform:rotate(-.6deg)} .card:nth-child(even){transform:rotate(.5deg)}
.card.talk .ava{animation:talk .35s ease-in-out infinite alternate}
.side{display:flex;flex-direction:column;align-items:center;flex:none;width:60px}
.ava{width:60px;height:60px;flex:none}
.wish{flex:1;font-weight:700;font-size:20px;line-height:1.25;min-width:0;overflow-wrap:break-word;padding:4px 0;background:none;border:0;text-align:left}
.more{width:56px;height:30px;margin:-2px 0 -8px;border:0;background:none;font-size:16px;font-weight:900;opacity:.3;letter-spacing:1px;padding:0}
.chk{
  width:54px;height:54px;flex:none;border-radius:50%;border:3px solid var(--ink);background:#fff;
  display:grid;place-items:center;
}
.chk svg{width:30px;height:30px;opacity:.18}
.done-box .card{background:#eef8dc;box-shadow:0 3px 0 var(--ink)}
.done-box .wish{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.done-box .chk{background:var(--go)} .done-box .chk svg{opacity:1}
.done-box h2 span{display:inline-block;background:var(--go);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:0 10px;font-size:17px;vertical-align:3px}

.empty{text-align:center;padding:26px 16px;background:var(--card);border:3px dashed var(--ink);border-radius:22px}
.empty .ava{width:110px;height:110px;margin:0 auto 6px}
.empty p{font-weight:700;font-size:20px;margin:6px 0 0;line-height:1.3}

.plus{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);
  width:88px;height:88px;border-radius:50%;border:4px solid var(--ink);background:var(--fire);
  box-shadow:0 6px 0 var(--ink);z-index:5;
}
.plus span{position:absolute;left:50%;top:50%;width:40px;height:9px;margin:-4.5px 0 0 -20px;background:#fff;border-radius:6px;box-shadow:0 0 0 3px var(--ink)}
.plus span+span{transform:rotate(90deg)}
.plus:active{transform:translateX(-50%) translateY(4px);box-shadow:0 2px 0 var(--ink)}

/* запись */
.rec{
  position:fixed;inset:0;z-index:20;background:#2ec4b6;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 64px) 22px calc(env(safe-area-inset-bottom) + 24px);overflow:auto;
  background-image:radial-gradient(circle at 50% 30%,#5ad9cc 0,#2ec4b6 60%);
}
.rec[hidden],.sheet[hidden],.shade[hidden],.toast[hidden],.heard[hidden],.typed[hidden]{display:none}
.x{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:14px;width:52px;height:52px;border-radius:50%;border:3px solid var(--ink);background:#fff;font-size:22px;font-weight:900;box-shadow:0 3px 0 var(--ink)}
.rec-mascot{width:130px;height:130px;animation:bob 2.4s ease-in-out infinite}
.rec.listening .rec-mascot{animation:talk .4s ease-in-out infinite alternate}
.rec-say{font-family:Unbounded;font-weight:700;font-size:22px;text-align:center;line-height:1.3;margin:18px 0 26px;color:#fff;text-shadow:0 2px 0 var(--ink);max-width:420px}
.mic{width:150px;height:150px;border-radius:50%;border:5px solid var(--ink);background:var(--bad);box-shadow:0 7px 0 var(--ink);display:grid;place-items:center;flex:none}
.mic .ico svg{width:64px;height:64px}
.rec.listening .mic{animation:pulse 1s ease-in-out infinite;background:#fff}
.rec.busy .mic{opacity:.5;animation:spin 1.2s linear infinite}
.rec-time{font-weight:800;font-size:20px;color:#fff;min-height:28px;margin-top:14px}
.heard,.typed{width:100%;max-width:440px;margin-top:6px}
.heard-text{background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:16px;font-weight:800;font-size:23px;line-height:1.3;text-align:center;box-shadow:var(--shadow);margin-bottom:18px}
.rec.has-result .mic,.rec.has-result .rec-time{display:none}
textarea{width:100%;font:700 19px Onest,sans-serif;color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:12px;min-height:96px;resize:none;margin-bottom:14px;background:#fff;-webkit-user-select:text;user-select:text}
.big{display:block;width:100%;min-height:58px;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);font-weight:800;font-size:20px;margin-bottom:14px}
.green{background:var(--go);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.white{background:#fff} .red{background:#fff;color:#c4302b}
.row{display:flex;gap:12px}.row .big{flex:1}

/* шторка */
.shade{position:fixed;inset:0;background:rgba(29,42,27,.45);z-index:30}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--bg);border-top:3px solid var(--ink);border-radius:26px 26px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom) + 12px);max-width:560px;margin:0 auto;animation:up .2s ease-out}

.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 14px);z-index:50;background:var(--ink);color:#fff;font-weight:700;padding:12px 18px;border-radius:14px;max-width:90vw;text-align:center}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
#confetti i{position:absolute;top:-20px;width:12px;height:16px;border:2px solid var(--ink);border-radius:3px;animation:fall 1.6s ease-in forwards}

@keyframes bob{50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes talk{to{transform:scale(1.08) rotate(3deg)}}
@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 7px 0 var(--ink),0 0 0 18px rgba(255,255,255,.35)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes up{from{transform:translateY(100%)}}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.big[hidden]{display:none}

/* монстрики-наклейки */
.mascot img,.rec-mascot img,.ava img{width:100%;height:100%;display:block;object-fit:contain;-webkit-user-drag:none;filter:drop-shadow(0 3px 0 rgba(29,42,27,.35))}
.ava{position:relative}
.ava{width:68px;height:68px}.side{width:68px}
.mascot{width:104px;height:104px}
.rec-mascot{width:170px;height:170px}
.empty .ava{width:140px;height:140px}
.done-box .ava img{filter:saturate(.75)}
.done-box .ava::after{content:"";position:absolute;right:-4px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;border:2.5px solid var(--ink)}
.mascot.jump{animation:jump .9s ease-out 2}
@keyframes jump{30%{transform:translateY(-22px) rotate(-8deg) scale(1.08)}60%{transform:translateY(0) rotate(4deg)}}
.card{gap:10px;padding-right:8px}
.wish{font-size:19px;overflow-wrap:normal;word-break:normal}
.chk{width:50px;height:50px}