: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:#bfe3ff}
[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}
#smug{padding:6px 14px;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center}
#smug i{display:block;width:120px;height:10px;border-radius:6px;background:#0002;overflow:hidden}
#smug b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),#7b5cff)}
#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}
@media (pointer:coarse){#joy{display:grid}#prompt{bottom:max(190px,calc(env(safe-area-inset-bottom) + 170px))}}
.talk #joy{display:none!important}
#novel{position:fixed;inset:0;display:grid;place-items:center;background:#2a1a2a66;pointer-events:none}
.page{width:min(86vw,380px);padding:20px 24px;font-family:Georgia,serif;line-height:1.55;transform:rotate(-1.5deg)}
.page h3{margin:0 0 8px;font-size:19px}.page p{margin:6px 0}
#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}
#title,#end{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:20px;background:linear-gradient(160deg,#ffd6e8ee,#fff1d6ee 60%,#d9f2ffee)}
#title h1,#end h2{margin:0;font:700 clamp(40px,10vw,76px)/1 Georgia,serif;letter-spacing:-.02em}
#title p,#end p{margin:0;font-size:20px}
#start{padding:14px 32px;font:inherit;font-size:20px;font-weight:700;color:var(--ink);background:var(--pink);cursor:pointer}
#title small{opacity:.65;max-width:440px}
#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)}
.talk #run{display:none}
@media (pointer:coarse){#run{bottom:max(40px,env(safe-area-inset-bottom));padding:18px 20px}}
.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}}
#mute{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));padding:8px 14px;font-size:18px;cursor:pointer;z-index:100}
.talk #mute{display:none}
#rotate{position:fixed;inset:0;display:grid;place-items:center;background:#fde8dc;z-index:9999;padding:20px;text-align:center}
#rotate .card{padding:24px 28px;max-width:340px}
#rotate h3{margin:0 0 10px;font-size:22px}
#rotate p{margin:0;font-size:16px;opacity:.7}
#c.shaking{animation:shake .2s}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(calc(var(--shake,6px) * -1),calc(var(--shake,6px) * .5))}50%{transform:translate(var(--shake,6px),calc(var(--shake,6px) * -.5))}75%{transform:translate(calc(var(--shake,6px) * .5),var(--shake,6px))}}
#stars{padding:6px 14px;font-size:20px;display:flex;gap:6px;align-items:center;min-height:34px}
#stars span{opacity:.25;transition:opacity .3s}
#stars span.on{opacity:1}
#fade{position:fixed;inset:0;pointer-events:none;opacity:0;background:#fff8ee;z-index:9998;transition:opacity .8s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bandit-end{font-size:52px;margin-top:18px;animation:fl 3s ease-in-out infinite alternate}
@keyframes bfloat{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.bandit-end{animation:bfloat 3s ease-in-out infinite alternate}