[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:"Comic Sans MS","Chalkboard SE","Trebuchet MS",system-ui,sans-serif;background:linear-gradient(160deg,#fff7d6,#ffe1ec 55%,#dff3ff);color:#2b2d42;display:flex;flex-direction:column;min-height:100dvh;user-select:none}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 18px;font-size:18px;font-weight:700;color:#6b6f8a}
main,.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 16px;text-align:center}
.letter{font-size:clamp(110px,30vw,190px);font-weight:900;line-height:1;color:#ff5d8f;text-shadow:4px 4px 0 #ffd23f}
.letter small{font-size:.55em;color:#3a86ff;text-shadow:3px 3px 0 #bde0fe;margin-left:.08em}
.pic{font-size:clamp(100px,28vw,170px);line-height:1.1;min-height:1.1em;display:flex;align-items:center;justify-content:center}
.pic svg{height:.9em;width:auto}
.pic img{height:1.5em;width:auto;margin:-.15em 0 .05em}
.word{font-size:clamp(30px,8vw,44px);font-weight:800;letter-spacing:1px}
.say{margin-top:10px;font:inherit;font-size:24px;font-weight:800;border:0;border-radius:999px;padding:14px 30px;background:#3a86ff;color:#fff;box-shadow:0 6px 0 #2667cc;cursor:pointer}
.say:active{transform:translateY(4px);box-shadow:0 2px 0 #2667cc}
.answer{display:flex;gap:18px;padding:18px 18px calc(22px + env(safe-area-inset-bottom))}
.btn{flex:1;font-size:56px;font-weight:900;border:0;border-radius:26px;padding:16px 0;color:#fff;cursor:pointer}
.no{background:#ef476f;box-shadow:0 8px 0 #b8304f}
.yes{background:#06d6a0;box-shadow:0 8px 0 #049a73}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.done .big{font-size:120px}
.done h1{margin:0;font-size:44px;color:#ff5d8f}
.done p{font-size:22px;margin:4px 0 8px}
.mode{font:inherit;font-size:16px;font-weight:800;border:0;border-radius:999px;padding:8px 14px;background:#8338ec;color:#fff;box-shadow:0 4px 0 #5f22b5;cursor:pointer}
.mode:active{transform:translateY(3px);box-shadow:0 1px 0 #5f22b5}