:root{--paint-bg: #008080;--ugly-yellow: #ffff00;--ugly-magenta: #ff00ff;--panel: #c0c0c0;--ink: #000;--stage-w: min(960px, 96vw, calc((100dvh - 200px) * 16 / 9));font-size:16px}*{box-sizing:border-box;user-select:none;-webkit-user-select:none}html,body{margin:0;padding:0;height:100%;background:var(--paint-bg);font-family:Comic Sans MS,Comic Neue,Chalkboard SE,Segoe Print,cursive;color:var(--ink);overflow:hidden;touch-action:manipulation}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;gap:6px;padding:8px}#topbar{width:var(--stage-w);display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:3px solid var(--ink);padding:2px 10px;font-weight:700;font-size:.9rem;box-shadow:4px 4px #000}#scene-title{text-transform:uppercase;letter-spacing:1px}#topbar-right{display:flex;align-items:center;gap:10px}#stats{color:maroon;white-space:nowrap}#btn-hint{font-family:inherit;font-weight:700;font-size:.8rem;background:var(--ugly-yellow);border:2px solid var(--ink);box-shadow:2px 2px #000;padding:0 8px;cursor:pointer}#btn-hint:active{transform:translate(1px,1px);box-shadow:0 0 #000}.hints [data-hs]{animation:hintpulse .6s infinite alternate}@keyframes hintpulse{0%{filter:drop-shadow(0 0 3px #ff0) brightness(1.08)}to{filter:drop-shadow(0 0 12px #f0f) brightness(1.3)}}#stage{position:relative;width:var(--stage-w);aspect-ratio:16 / 9;border:4px solid var(--ink);background:#fff;box-shadow:6px 6px #000;overflow:hidden}#use-banner{position:absolute;top:6px;left:50%;transform:translate(-50%) rotate(-1deg);background:var(--ugly-magenta);color:#fff;border:2px solid var(--ink);padding:1px 10px;font-size:.8rem;font-weight:700;white-space:nowrap;display:none;z-index:29;pointer-events:none}#viewport,#viewport svg{width:100%;height:100%;display:block}[data-hs]{cursor:pointer}[data-hs]:hover{filter:brightness(1.12) saturate(1.3)}.busy [data-hs]{cursor:default;pointer-events:none}#tooltip{position:absolute;pointer-events:none;background:var(--ugly-yellow);border:2px solid var(--ink);padding:1px 8px;font-size:.85rem;font-weight:700;display:none;z-index:30;white-space:nowrap;transform:rotate(-1.5deg)}#carried{position:absolute;pointer-events:none;width:40px;height:40px;display:none;z-index:31;filter:drop-shadow(2px 2px 0 #000)}#carried svg{width:100%;height:100%}#hud{width:var(--stage-w);display:flex;flex-direction:column;gap:6px}#textbox{position:relative;background:#fff;border:3px solid var(--ink);box-shadow:4px 4px #000;min-height:74px;padding:6px 12px 10px;cursor:pointer}#textbox.hidden{visibility:hidden}#tb-speaker{font-weight:700;text-transform:uppercase;font-size:.8rem;color:#fff;background:#d00;display:inline-block;padding:0 8px;border:2px solid var(--ink);transform:rotate(-1deg);margin-bottom:2px}#tb-speaker:empty{display:none}#tb-text{font-size:1.05rem;line-height:1.35;min-height:2.7em}#tb-more{position:absolute;right:10px;bottom:2px;animation:bobble .6s infinite alternate;display:none}@keyframes bobble{0%{transform:translateY(0)}to{transform:translateY(4px)}}#inventory{display:flex;gap:6px;background:var(--panel);border:3px solid var(--ink);padding:5px;min-height:58px;box-shadow:4px 4px #000}.inv-item{width:46px;height:46px;background:#fff;border:2px solid var(--ink);cursor:pointer;padding:2px}.inv-item:hover{background:var(--ugly-yellow)}.inv-item.selected{background:var(--ugly-magenta);outline:3px dashed var(--ink);animation:jitter .15s infinite}.inv-item svg{width:100%;height:100%}@keyframes jitter{0%{transform:translate(0) rotate(0)}25%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,1px) rotate(-1deg)}75%{transform:translate(1px,1px) rotate(.5deg)}to{transform:translate(-1px,-1px) rotate(-.5deg)}}#overlay{position:absolute;inset:0;z-index:40;display:none}#overlay.active{display:block}.dlg{position:absolute;inset:0;background:#0000008c;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;gap:8px}.dlg-status{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.dlg-nerves{background:var(--panel);border:3px solid var(--ink);padding:2px 10px;font-weight:700;font-size:.9rem}.dlg-boss{flex:1;max-width:420px;background:var(--panel);border:3px solid var(--ink);padding:2px 8px}.dlg-boss-name{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:2px}.dlg-boss-bar{height:14px;border:2px solid var(--ink);background:#fff}.dlg-boss-fill{height:100%;background:repeating-linear-gradient(45deg,#d00,#d00 8px,#f55 8px 16px);transition:width .4s}.dlg-main{display:flex;gap:10px;align-items:flex-end}.dlg-portrait{width:130px;height:130px;background:#fff;border:3px solid var(--ink);flex-shrink:0;box-shadow:4px 4px #000}.dlg-portrait svg{width:100%;height:100%}.dlg-portrait.talking{animation:jitter .2s infinite}.dlg-box{flex:1;background:#fff;border:3px solid var(--ink);box-shadow:4px 4px #000;padding:6px 12px;min-height:100px;cursor:pointer}.dlg-name{font-weight:700;text-transform:uppercase;font-size:.8rem;color:#fff;background:#00a;display:inline-block;padding:0 8px;border:2px solid var(--ink);transform:rotate(1deg)}.dlg-text{font-size:1.02rem;line-height:1.3;margin-top:3px}.dlg-choices{display:flex;flex-direction:column;gap:5px;margin-top:8px}.dlg-choice{text-align:left;font-family:inherit;font-size:.95rem;background:var(--ugly-yellow);border:2px solid var(--ink);padding:4px 10px;cursor:pointer;box-shadow:3px 3px #000}.dlg-choice:hover{background:var(--ugly-magenta);color:#fff;transform:translate(1px,1px) rotate(-.5deg);box-shadow:1px 1px #000}.death{position:absolute;inset:0;background:#5a0000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;cursor:pointer;animation:deathfade .8s}@keyframes deathfade{0%{opacity:0}to{opacity:1}}.death h1{font-size:4rem;margin:0;color:#f22;text-shadow:4px 4px 0 #000;transform:rotate(-2deg);animation:jitter .3s infinite}.death p{font-size:1.1rem;max-width:70%}.death small{opacity:.7}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}.screen.title-screen{background:var(--paint-bg)}.logo{font-size:3.2rem;font-weight:700;line-height:1;color:var(--ugly-yellow);text-shadow:5px 5px 0 #d00,8px 8px 0 #000;transform:rotate(-3deg);margin:0}.logo small{display:block;font-size:1.1rem;color:#fff;text-shadow:2px 2px 0 #000}.btn{font-family:inherit;font-size:1.2rem;font-weight:700;background:var(--panel);border:3px solid var(--ink);box-shadow:5px 5px #000;padding:8px 26px;cursor:pointer}.btn:hover{background:var(--ugly-yellow);transform:translate(2px,2px) rotate(-1deg);box-shadow:2px 2px #000}.screen .note{color:#fff;font-size:.85rem;opacity:.85;max-width:75%}.shake{animation:jitter .25s infinite}.sway{animation:sway 2.4s ease-in-out infinite alternate;transform-origin:bottom center}@keyframes sway{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}.flicker{animation:flicker 1.7s steps(2) infinite}@keyframes flicker{0%,92%{opacity:1}93%,95%{opacity:.3}96%,to{opacity:1}}@media(max-width:700px){:root{--stage-w: 100vw}#app{padding:0;gap:4px;justify-content:flex-start}#topbar{border-left:none;border-right:none;box-shadow:none;font-size:.72rem;padding:2px 6px}#stage{border-left:none;border-right:none;box-shadow:none}#hud{padding:0 4px 6px;flex:1}#textbox{min-height:96px}#tb-text{font-size:1rem}.inv-item{width:54px;height:54px}#inventory{flex-wrap:wrap;min-height:66px}#overlay.active{position:fixed;inset:0;z-index:100}.dlg{background:#000000c7;padding:8px}.dlg-portrait{width:92px;height:92px}.dlg-box{min-height:80px;padding:6px 10px}.dlg-text{font-size:.98rem}.dlg-choice{font-size:.95rem;padding:9px 10px}.dlg-nerves,.dlg-boss-name{font-size:.75rem}.death h1{font-size:2.6rem}.death p{font-size:1rem;max-width:88%}.logo{font-size:2.1rem}.screen .note{font-size:.8rem;max-width:88%}.btn{font-size:1.05rem;padding:10px 22px}}@media(max-height:540px){:root{--stage-w: min(960px, 96vw, calc((100dvh - 148px) * 16 / 9))}#textbox{min-height:56px;padding:4px 10px 8px}#tb-text{font-size:.85rem;min-height:2em}.inv-item{width:38px;height:38px}#inventory{min-height:48px;padding:3px}#topbar{font-size:.7rem}#overlay.active{position:fixed;inset:0;z-index:100}.dlg-portrait{width:84px;height:84px}}