*{box-sizing:border-box}html,body{margin:0;overflow-x:hidden}
body{font-family:"Comic Sans MS","Comic Neue","Chalkboard SE",system-ui,sans-serif;background:#ffd23f radial-gradient(#e0a800 1.5px,transparent 1.6px) 0 0/14px 14px;color:#111;min-height:100vh}
.top{text-align:center;padding:12px 12px 4px}
.top h1{margin:0;font-size:clamp(1.2rem,4.5vw,2.2rem);letter-spacing:1px;color:#e63946;-webkit-text-stroke:1px #111;text-shadow:3px 3px 0 #111}
.top h1 span{font-size:.6em;color:#111;-webkit-text-stroke:0;text-shadow:none}
.progress{height:10px;max-width:700px;margin:8px auto 2px;background:#fff;border:3px solid #111;border-radius:6px;overflow:hidden}
#bar{height:100%;background:#1d9a8a;transition:width .3s}.count{margin:2px;font-weight:700}
.stage{max-width:min(960px,calc((100vh - 300px) * 4 / 3 + 24px));min-width:min(100%,340px);margin:0 auto;overflow:hidden;touch-action:pan-y;outline:none}
.track{display:flex;transition:transform .4s ease}
.panel{flex:0 0 100%;padding:8px 12px;min-width:0}
.frame{position:relative;background:#fff;border:5px solid #111;box-shadow:8px 8px 0 #111;overflow:hidden}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.bubble{position:relative;background:#fff;border:3px solid #111;border-radius:22px;padding:10px 14px;margin:14px 6px 4px;font-size:clamp(.95rem,2.4vw,1.15rem);box-shadow:4px 4px 0 #111}
.bubble:before{content:"";position:absolute;top:-16px;left:40px;border:8px solid transparent;border-bottom:10px solid #111}
.bubble b{color:#e63946}
.cap{display:inline-block;background:#ffd23f;border:3px solid #111;padding:2px 8px;font-weight:700;margin:0 6px;transform:rotate(-1deg)}
.ctrls{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;flex-wrap:wrap}
.ctrls button,.choice button{font:inherit;font-weight:700;background:#e63946;color:#fff;border:3px solid #111;border-radius:10px;padding:8px 14px;box-shadow:3px 3px 0 #111;cursor:pointer}
.ctrls button:disabled{opacity:.4;cursor:default}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.dots button{width:14px;height:14px;padding:0;border-radius:50%;background:#fff;box-shadow:none;border:2px solid #111}
.dots button[aria-current=true]{background:#1d9a8a}
.hint{text-align:center;margin:0;font-size:.85rem}
.choice{background:#fff;border:5px solid #111;box-shadow:8px 8px 0 #111;padding:20px;text-align:center}
.choice .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.ending{font-size:1.1rem;min-height:3em}
.egg{position:absolute;right:8px;bottom:8px;background:#ffd23f;border:2px solid #111;border-radius:50%;width:34px;height:34px;font-size:18px;cursor:pointer}
.secret{position:absolute;inset:auto 8px 50px 8px;background:#111;color:#7CFC00;font-family:monospace;padding:10px;border-radius:8px}
.ftr{text-align:center;padding:16px;font-size:.85rem}.ftr a{color:#111}