:root{--ink: #2b1d14;--paper: #fff8ec;--accent: #e8913a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#1b1622;overflow:hidden}body{display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;color:var(--ink)}#stage{position:relative;box-shadow:0 0 0 4px #000,0 20px 60px #0009}#game{width:100%;height:100%;display:block;image-rendering:pixelated}#bubbles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.bubble{position:absolute;transform:translate(-50%,-100%);max-width:280px;width:max-content;background:var(--paper);border:3px solid var(--ink);padding:6px 8px;font-size:10px;line-height:1.5;box-shadow:3px 3px #00000040;animation:pop .15s steps(3)}.bubble.cat{background:#fff}.bubble:after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink)}@keyframes pop{0%{transform:translate(-50%,-80%) scale(.6)}}#hud{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;font-size:10px;pointer-events:none}#hud-count{background:var(--ink);color:#ffd84a;padding:5px 8px}#hud .hint{background:#2b1d14b3;color:#fff;padding:5px 8px}#toasts{position:absolute;top:38px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.toast{background:var(--ink);color:#fff;padding:8px 12px;font-size:10px;border:3px solid #ffd84a;transition:opacity .5s,transform .5s;white-space:nowrap}.toast b{color:#ffd84a}.toast.voice{border-color:#9fd4ff;font-style:italic}.toast.out{opacity:0;transform:translateY(-8px)}.panel{position:absolute;top:6%;right:8%;bottom:6%;left:8%;background:var(--paper);border:4px solid var(--ink);padding:16px 20px;overflow:auto;box-shadow:6px 6px #0006}.panel[hidden]{display:none}.panel h1{margin:0 0 8px;color:var(--accent);font-size:22px;text-shadow:3px 3px 0 var(--ink)}.panel h2{margin:0 0 12px;font-size:14px}.panel p{font-size:10px;line-height:1.6}.dim{opacity:.6}#help-keys{display:flex;flex-direction:column;gap:4px;margin:10px 0}.kb-row{display:flex;gap:4px}.kb-key{min-width:0;min-height:34px;background:var(--ink);color:#fff;border-bottom:3px solid #000;padding:3px 4px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.kb-key b{font-size:9px;color:var(--accent)}.kb-key span{font-size:6px;line-height:1.3;word-break:break-word}.kb-key.unbound{opacity:.3}kbd{display:inline-block;min-width:22px;text-align:center;background:var(--ink);color:#fff;padding:3px 5px;margin-right:4px}#journal-list{columns:3 180px;font-size:9px;line-height:2;padding-left:0;list-style:none;margin:0}#journal-list li{opacity:.4}#journal-list li.got{opacity:1;color:#b8611f}body.has-kb{flex-direction:column;justify-content:flex-start;padding-top:4px}#touchkeys{position:fixed;left:0;right:0;bottom:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:#120e18;border-top:3px solid #000;user-select:none;-webkit-user-select:none;touch-action:none}#touchkeys[hidden]{display:none}.tk-row{display:flex;justify-content:center;gap:4px;margin-bottom:4px}.tk{flex:1 1 0;max-width:68px;min-width:0;height:48px;padding:2px 1px;border:0;border-bottom:3px solid #000;background:#3a2e48;color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;touch-action:none;-webkit-tap-highlight-color:transparent}.tk b{font-size:12px;font-weight:400}.tk small{font-size:6px;opacity:.7;white-space:nowrap;overflow:hidden;max-width:100%}.tk[data-k=A],.tk[data-k=D],.tk[data-k=W],.tk[data-k=S],.tk[data-k=Space]{background:#e8913a;color:var(--ink)}.tk[data-k=Space]{flex-grow:2.5;max-width:170px}.tk.down,.tk.on{background:#ffd84a!important;color:var(--ink);transform:translateY(2px);border-bottom-width:1px}#tk-toggle{position:fixed;right:8px;bottom:8px;z-index:5;width:40px;height:40px;border:3px solid #000;background:#fff8ec;font-size:20px;cursor:pointer}body.has-kb #tk-toggle{bottom:auto;top:8px}body.has-kb{justify-content:center;padding-bottom:var(--kb-h, 0px)}body.has-kb #hud .hint{display:none}@media (max-width: 500px){.tk b{font-size:11px}.tk small{font-size:5px;letter-spacing:-.5px}.tk[data-k=Shift] b,.tk[data-k=Tab] b,.tk[data-k=Enter] b{font-size:7px}}.bubble{font-size:clamp(6px,calc(3.4px * var(--s, 3)),11px);padding:calc(2px * var(--s, 3)) calc(2.6px * var(--s, 3));max-width:calc(95px * var(--s, 3));border-width:clamp(2px,var(--s, 3) * 1px,3px)}
