:root{--ink:#141414;--muted:#555;--yellow:#FFD23F;--yellow-h:#f5c400;--bg:#fff;--line:#eee;--btn:#f1f1ee}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}
body{font-family:'Kalam','Comic Sans MS',cursive;-webkit-text-size-adjust:100%}
a{color:var(--ink)}
.app{max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 8px}
.title{font-size:21px;font-weight:700;line-height:1.1}
.status{font-size:14px;color:var(--muted)}
.progress{height:6px;background:var(--line);margin:0 18px;border-radius:3px;overflow:hidden}
#bar{height:6px;background:var(--ink);width:0;transition:width .4s ease}
.stage{position:relative;height:clamp(150px,26dvh,232px);transition:height .3s ease;flex-shrink:0;border-bottom:3px solid var(--ink);display:flex;justify-content:center;align-items:flex-end}
#fig svg{height:clamp(140px,25dvh,226px);width:auto;display:block;transition:height .3s ease}
/* kroki z formularzem: mniejszy patyczak, żeby przycisk zawsze był widoczny */
.app.compact .stage{height:clamp(84px,13dvh,120px)}
.app.compact #fig svg{height:clamp(80px,12dvh,114px)}
.app.compact .typing{top:6px}
.typing{position:absolute;left:calc(50% + 70px);top:22px;padding:4px 14px;border:2.5px solid var(--ink);border-radius:16px 16px 16px 4px;background:#fff;font-size:26px;line-height:1;letter-spacing:2px}
.chat{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px}
.chat>*{flex-shrink:0}
.intro{display:flex;flex-direction:column;gap:10px;padding:4px 4px 8px}
.intro h1{margin:0;font-size:34px;line-height:1.1}
.intro .lead{margin:0;font-size:20px;line-height:1.3;color:#333}
/* czerwone podkreślenie „markerem” – powtarza się pod każdą linią tekstu */
.marker{padding-bottom:.18em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 6 S 180 4, 198 7' fill='none' stroke='%23e23a2e' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% .45em;background-position:0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.promise{margin:0;padding:8px 12px;background:var(--yellow);border:2.5px solid var(--ink);border-radius:12px;font-size:18px;line-height:1.3;font-weight:700}
.fine{margin:0;font-size:14px;color:var(--muted)}
.bot{align-self:flex-start;max-width:82%;padding:9px 14px;border:2.5px solid var(--ink);border-radius:18px 18px 18px 4px;background:#fff;font-size:18px;line-height:1.3}
.me{align-self:flex-end;max-width:78%;padding:9px 14px;border-radius:18px 18px 4px 18px;background:var(--ink);color:#fff;font-size:18px;line-height:1.3}
.card{align-self:flex-start;width:100%;max-width:320px;border:3px solid var(--ink);border-radius:16px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:19px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stats div{border:2px solid var(--ink);border-radius:10px;padding:4px 6px}
.stats div:first-child{background:var(--yellow)}
.stats b{display:block;font-size:17px;line-height:1.1}
.stats span{font-size:12px;line-height:1.1;display:block}
.small{font-size:13px;color:var(--muted);line-height:1.3}
.macro{font-size:14px;font-weight:700;line-height:1.3}
.row{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-top:1.5px dashed #bbb}
.row b{flex:0 0 42px;font-size:15px}
.row .what{flex:1 1 auto;min-width:0}
.row .k{font-size:14px;color:var(--muted);line-height:1.1}
.row .v{font-size:15px;line-height:1.25}
.row .kc{flex:0 0 auto;font-size:14px;font-weight:700}
.train{border:2px solid var(--ink);border-radius:10px;padding:6px 8px;background:var(--yellow);font-size:14px;line-height:1.3}
.reveal{align-self:flex-start;width:100%;max-width:300px;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff}
.reveal .pic{position:relative;aspect-ratio:2/3;background:#f4f1e8;overflow:hidden}
.reveal .pic img,.reveal .pic svg{width:100%;height:100%;object-fit:cover;display:block}
.reveal.blur .pic img{filter:blur(10px);transform:scale(1.06)}
.wm{position:absolute;right:10px;bottom:10px;padding:3px 10px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;border-radius:999px}
.lock{position:absolute;left:10px;right:10px;bottom:10px;padding:6px 8px;background:var(--ink);color:#fff;font-size:13px;border-radius:8px;text-align:center}
.reveal .lbl{padding:10px 12px 2px;font-size:18px;font-weight:700}
.reveal .sub{padding:0 12px 10px;font-size:13px;color:var(--muted)}
.answers{flex-shrink:0;min-height:clamp(170px,27dvh,236px);max-height:65dvh;overflow-y:auto;border-top:3px solid var(--ink);padding:12px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:#fff}
.opts{display:flex;flex-wrap:wrap;gap:8px}
button{font-family:inherit;color:var(--ink);cursor:pointer}
.btn{min-height:44px;padding:6px 14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--btn);font-size:17px;text-align:left}
.btn:hover,.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.primary{min-height:50px;border:2.5px solid var(--ink);border-radius:14px;background:var(--yellow);font-size:20px;font-weight:700;padding:0 18px}
.primary:hover{background:var(--yellow-h)}
.primary:disabled{opacity:.45;cursor:not-allowed}
.chip{min-height:44px;padding:4px 12px;border:2.5px solid var(--ink);border-radius:14px;background:var(--btn);font-size:17px}
.field{display:flex;gap:8px}
.field input{flex:1 1 auto;min-width:0;height:48px;padding:0 14px;border:2.5px solid var(--ink);border-radius:14px;font-family:inherit;font-size:19px}
.range-l{display:flex;justify-content:space-between;font-size:17px}
input[type=range]{width:100%;accent-color:var(--ink)}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.3}
.consent input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--ink)}
.wait{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fig .body,.fig .head,.fig .wavearm{transform-box:view-box}
.fig .body{transform-origin:100px 214px}.fig .head{transform-origin:100px 88px}.fig .wavearm{transform-origin:100px 104px}
@media (prefers-reduced-motion:no-preference){
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes jump{0%,100%{transform:translateY(0) scaleY(1)}20%{transform:scaleY(.92)}50%{transform:translateY(-22px) scaleY(1.04)}80%{transform:scaleY(.96)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes flex{0%,100%{transform:scale(1)}50%{transform:scale(1.05,.97)}}
@keyframes dots{0%,100%{opacity:.25}50%{opacity:1}}
.m-idle .body,.m-talk .body,.m-proud .body,.m-wave .body{animation:bob 2.2s ease-in-out infinite}
.m-happy .body,.m-pizza .body{animation:jump .7s ease-out 2}
.m-laugh .body{animation:shake .25s ease-in-out 5}
.m-wave .wavearm{animation:wave .5s ease-in-out infinite}
.m-think .head{animation:tilt 1.6s ease-in-out infinite}
.m-wow .body{animation:pop .5s ease-out 1}
.m-strong .body{animation:flex .6s ease-in-out 3}
.dot{animation:dots 1s ease-in-out infinite}.d2{animation-delay:.2s}.d3{animation-delay:.4s}
}