:root{
  --deep:#0B3C49; --teal:#1597A5; --teal-deep:#0E7280; --aqua:#D4F0F2; --foam:#F2FBFB; --sand:#FFF6EA;
  --coral:#E4682E; --coral-deep:#B84C1A; --ink:#0B2B33; --ink-soft:#3D6672;
  --ok:#2F9A63; --ok-bg:#DFF4E8; --bad:#C6452C; --bad-bg:#FCE6E0;
  --shadow:0 6px 18px rgba(11,60,73,.16); --r:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--foam);color:var(--ink);
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:17px;line-height:1.4}
body{background:radial-gradient(120% 55% at 50% -10%,var(--aqua) 0%,var(--foam) 62%)}
#app{max-width:480px;margin:0 auto;min-height:100dvh;padding:14px 16px calc(24px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.top img{width:46px;height:46px;object-fit:cover;border-radius:50%;background:var(--aqua);box-shadow:0 3px 8px rgba(11,60,73,.25)}
.brand{font-weight:900;font-size:21px;letter-spacing:.2px}
.brand span{color:var(--teal-deep)}
.spacer{flex:1}
.chip{background:#fff;border-radius:999px;padding:5px 12px;font-weight:800;font-size:14px;box-shadow:var(--shadow);white-space:nowrap}
.chip b{color:var(--coral-deep)}
.card{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.hero{position:relative;margin:4px 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--aqua)}
.hero img{display:block;width:100%;height:auto;transform-origin:50% 60%;animation:bob 5s ease-in-out infinite}
.hero.small img{height:128px;object-fit:cover;object-position:50% 28%}
@keyframes bob{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.04) translateY(-5px)}}
.hero.jump img{animation:jump .7s ease-out}
@keyframes jump{0%{transform:scale(1.02)}35%{transform:scale(1.08) translateY(-8px) rotate(-1deg)}100%{transform:scale(1.02)}}
.hero.tilt img{animation:tilt .9s ease-in-out}
@keyframes tilt{0%{transform:scale(1.03) rotate(0)}35%{transform:scale(1.03) rotate(-1.6deg)}70%{transform:scale(1.03) rotate(1deg)}100%{transform:scale(1.03) rotate(0)}}
.bubble{position:relative;background:#fff;border-radius:20px;padding:12px 16px;margin:12px 8px 14px;font-weight:700;box-shadow:var(--shadow);text-align:center;min-height:50px;display:flex;align-items:center;justify-content:center}
.bubble::before{content:"";position:absolute;top:-9px;left:50%;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom:10px solid #fff}
.bubble.good{background:var(--ok-bg)}.bubble.good::before{border-bottom-color:var(--ok-bg)}
.bubble.bad{background:var(--bad-bg)}.bubble.bad::before{border-bottom-color:var(--bad-bg)}
.btn{display:block;width:100%;border:0;border-radius:18px;padding:15px 18px;font:inherit;font-weight:900;font-size:18px;color:#fff;
  background:linear-gradient(180deg,#F0793B,var(--coral));box-shadow:0 5px 0 var(--coral-deep),0 10px 16px rgba(184,76,26,.25);cursor:pointer;transition:transform .08s,box-shadow .08s;margin-bottom:12px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--coral-deep)}
.btn[disabled]{opacity:.5}
.btn.teal{background:linear-gradient(180deg,#25AEBC,var(--teal));box-shadow:0 5px 0 var(--teal-deep),0 10px 16px rgba(14,114,128,.25)}
.btn.teal:active{box-shadow:0 1px 0 var(--teal-deep)}
.btn.ghost{background:#fff;color:var(--teal-deep);box-shadow:0 4px 0 var(--aqua),var(--shadow)}
.row{display:flex;gap:10px}.row>*{flex:1}
.stat{text-align:center}
.stat .n{white-space:nowrap;font-size:24px;font-weight:900;color:var(--teal-deep)}
.stat .l{font-size:12px;font-weight:800;opacity:.7;text-transform:uppercase;letter-spacing:.5px}
.dots{display:flex;gap:5px;margin-bottom:12px}
.dots i{flex:1;height:8px;border-radius:6px;background:var(--aqua)}
.dots i.ok{background:var(--ok)}.dots i.no{background:var(--bad)}.dots i.sk{background:#b7c7cb}.dots i.cur{background:var(--teal)}
.topic{display:inline-block;background:var(--aqua);color:var(--teal-deep);font-weight:800;font-size:12px;border-radius:999px;padding:3px 10px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.topic b{color:var(--coral-deep)}
.q{font-size:21px;font-weight:800;line-height:1.3;margin-bottom:14px;word-break:break-word}
.choice{display:block;width:100%;text-align:left;margin-bottom:10px;border:2px solid var(--aqua);background:#fff;color:var(--ink);border-radius:16px;padding:13px 16px;font:inherit;font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 3px 0 var(--aqua)}
.choice:active{transform:translateY(2px);box-shadow:none}
.choice.no{border-color:var(--bad);background:var(--bad-bg)}
input.t,textarea.t{width:100%;border:2px solid var(--aqua);border-radius:16px;padding:13px 16px;font:inherit;font-weight:700;font-size:19px;color:var(--ink);background:#fff;margin-bottom:12px;outline:none}
input.t:focus,textarea.t:focus{border-color:var(--teal)}
textarea.t{min-height:150px;resize:none;font-size:17px}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.sol{margin:0 0 12px;font-size:16px}
.sol b{color:var(--coral-deep)}
.phrase{background:linear-gradient(135deg,var(--aqua),#fff);border:2px dashed var(--teal)}
.phrase .t{font-size:21px;font-weight:900}.phrase .x{font-weight:700;margin-top:2px}.phrase .n{font-size:14px;opacity:.75;margin-top:4px}
.small{font-size:14px;opacity:.78}
.list{margin:6px 0 0;padding:0;list-style:none}.list li{padding:8px 0;border-bottom:1px dashed var(--aqua);font-size:15px}.list li:last-child{border:0}
.lvl{display:inline-block;background:var(--deep);color:#fff;border-radius:999px;padding:2px 10px;font-weight:900;font-size:13px;letter-spacing:.5px}
.bars{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.bars div{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.bars span{width:30px}.bars em{flex:1;height:12px;border-radius:8px;background:var(--aqua);position:relative;overflow:hidden}
.bars em i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#25AEBC,var(--teal));border-radius:8px}
.err{text-align:center;padding:30px 10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}