:root{--ink:#4a2e3f;--pink:#ff8fb8;--cream:#fff8ee}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;background:#cfe9f7}
[hidden]{display:none!important}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.card{background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 #4a2e3f44}
#hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
#toast{max-width:min(92vw,460px);padding:10px 16px;text-align:center;font-weight:700;opacity:0;transition:opacity .3s}
#toast.on{opacity:1}
#bubble{position:fixed;left:0;top:0;padding:5px 12px;font-weight:700;font-size:14px;width:max-content;max-width:min(78vw,300px);text-align:center;pointer-events:none;margin-top:-6px}
#prompt{position:fixed;left:50%;bottom:max(70px,calc(env(safe-area-inset-bottom) + 30px));transform:translateX(-50%);padding:12px 22px;font:inherit;font-size:17px;font-weight:700;color:var(--ink);background:var(--pink);cursor:pointer;white-space:nowrap}
#prompt:active{transform:translateX(-50%) translateY(3px)}
#joy{position:fixed;left:max(22px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:#ffffff66;border:3px solid #fffc;display:none;place-items:center;touch-action:none}
#knob{width:58px;height:58px;border-radius:50%;background:var(--pink);border:3px solid #fff;pointer-events:none}
#run{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));padding:12px 16px;font:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
#run.on{background:var(--pink)}
#ch{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;border:2px solid var(--ink);opacity:.7;pointer-events:none}
@media (pointer:coarse){#joy{display:grid}#prompt{bottom:max(190px,calc(env(safe-area-inset-bottom) + 170px))}#run{bottom:max(40px,env(safe-area-inset-bottom));padding:18px 20px}}
.talk #joy,.talk #run{display:none!important}
#dlg{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));width:min(94vw,640px);min-height:128px;padding:12px 18px 10px}
#who{display:inline-block;background:var(--pink);padding:2px 12px;border-radius:10px}
#dlg p{margin:6px 0;font-size:18px;line-height:1.45;min-height:3em}
#dlg small{float:right;opacity:.55}
.fx{position:fixed;left:0;top:0;font-size:26px;pointer-events:none;animation:fl 1.4s ease-out forwards}
@keyframes fl{from{transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(var(--x),calc(var(--y) - 90px)) translate(-50%,-50%) scale(1.25);opacity:0}}
#title{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:20px;background:linear-gradient(160deg,#d9f2ffee,#fff1d6ee 60%,#ffd6e8ee)}
#title h1{margin:0;font:700 clamp(40px,10vw,76px)/1 Georgia,serif;letter-spacing:-.02em}
#title p{margin:0;font-size:20px}
#title small{opacity:.65;max-width:440px}
#start{padding:14px 32px;font:inherit;font-size:20px;font-weight:700;color:var(--ink);background:var(--pink);cursor:pointer}