:root{--bg:#120c18;--panel:#1e1427;--ink:#efe6f5;--muted:#a493b5;--accent:#c9a8ff;--rose:#b5405e;--line:#3a2a48}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--ink);justify-content:center;margin:0;font-family:Pixelify Sans,ui-monospace,monospace;display:flex}main{width:100%;max-width:820px;padding:16px}header{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px;display:flex}h1{cursor:pointer;margin:0;font-size:26px;font-weight:600}h1 small{color:var(--muted);margin-left:6px;font-size:13px;font-weight:400}.spacer{flex:1}.chip{background:var(--panel);border:2px solid var(--line);padding:4px 10px;font-size:15px}.chip.bump{animation:.4s bump}@keyframes bump{50%{border-color:var(--rose);transform:scale(1.2)}}#stage{border:3px solid var(--line);line-height:0;position:relative}canvas{aspect-ratio:192/108;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;display:block}#bubble{color:#1a1020;pointer-events:none;opacity:0;background:#f3ecf8;border:3px solid #1a1020;width:max-content;max-width:min(300px,70%);padding:6px 10px;font-size:15px;line-height:1.25;transition:opacity .25s;position:absolute;transform:translate(-50%,calc(-100% - 10px));box-shadow:3px 3px #1a1020}#bubble.show{opacity:1}#bubble:after{content:"";border:6px solid #0000;border-top-color:#1a1020;margin-left:-6px;position:absolute;bottom:-11px;left:50%}nav{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}button{font:inherit;color:var(--ink);background:var(--panel);border:2px solid var(--line);cursor:pointer;padding:8px 14px;font-size:16px;box-shadow:3px 3px #000}button:hover:not(:disabled){border-color:var(--accent)}button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px #000}button:disabled{opacity:.45;cursor:default}#shop{background:var(--panel);border:2px solid var(--line);margin-top:14px;padding:12px}#shop h2{margin:0 0 8px;font-size:18px;font-weight:600}#shop h3{color:var(--muted);margin:12px 0 6px;font-size:14px;font-weight:400}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.item{border:2px solid var(--line);flex-direction:column;gap:6px;padding:8px;display:flex}.item b{font-weight:600}.item span{color:var(--muted);font-size:13px}.item button{padding:5px 8px;font-size:14px}.item.on{border-color:var(--accent)}footer{color:var(--muted);margin-top:12px;font-size:13px}body.app{height:100%}html:has(body.app){height:100%}body.app{height:100dvh;display:block;overflow:hidden}.app main{flex-direction:column;width:100%;max-width:none;height:100dvh;padding:0;display:flex;position:relative}.app header{z-index:5;pointer-events:none;background:linear-gradient(#120c18bf,#120c1800);flex-wrap:nowrap;gap:8px;margin:0;padding:12px 16px 28px;position:absolute;top:0;left:0;right:0}.app header>*{pointer-events:auto}.app h1{text-shadow:2px 2px #000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.app .chip{white-space:nowrap;background:#1e1427d9}.app #stage{background:var(--bg);border:0;flex:auto;min-height:0;overflow:hidden}.app #c{aspect-ratio:auto;max-width:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.app nav{background:var(--panel);border-top:2px solid var(--line);flex:none;order:3;margin:0;padding:10px 16px}.app #shop,.app main>.sf-panel{border-width:2px 0 0;flex:0 auto;order:2;max-height:45dvh;margin:0;overflow:auto}.app footer{display:none}