:root{--edge: #15122a;--ink: #efe6ff;--dim: rgba(239, 230, 255, .6);--panel: rgba(12, 10, 24, .55);--line: rgba(239, 230, 255, .16);--accent: #ffd27a;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--edge);color:var(--ink);font-family:VT323,ui-monospace,monospace;overflow:hidden;transition:background-color 1.2s ease;-webkit-font-smoothing:none}#app{position:fixed;inset:0;display:grid;place-items:center}canvas.stage{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.hud{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(to top,rgba(8,6,18,.6),transparent);transition:opacity .6s ease;pointer-events:none}.hud>*{pointer-events:auto}body.idle .hud,body.idle .top{opacity:0}body.idle{cursor:none}.label{min-width:0;text-shadow:0 1px 0 rgba(0,0,0,.6)}.label .num{font-family:Silkscreen,monospace;font-size:12px;color:var(--accent);letter-spacing:1px}.label .title{font-family:Silkscreen,monospace;font-size:clamp(16px,2.4vw,22px);line-height:1.1;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label .mood{font-size:18px;color:var(--dim)}.controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);width:38px;height:38px;display:grid;place-items:center;cursor:pointer;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.btn:hover{border-color:#efe6ff73}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn.on{color:var(--accent);border-color:#ffd27a80}.btn svg{width:16px;height:16px;shape-rendering:crispEdges}.vol{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.vol input{-webkit-appearance:none;appearance:none;width:84px;height:4px;background:#efe6ff40;outline:none}.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:14px;background:var(--ink);border:none;cursor:pointer}.vol input::-moz-range-thumb{width:8px;height:14px;background:var(--ink);border:none;border-radius:0}.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 16px 0;font-family:Silkscreen,monospace;font-size:12px;letter-spacing:1px;color:var(--dim);pointer-events:none;transition:opacity .6s ease;text-shadow:0 1px 0 rgba(0,0,0,.6)}.hud>*,.top,.start .card,.gallery>*{zoom:var(--ui, 1)}.start{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#080612b8,#08061273 60%,#0806124d);z-index:5;cursor:pointer;transition:opacity .8s ease}.start.gone{opacity:0;pointer-events:none}.start .card{text-align:center;padding:16px}.start h1{font-family:Silkscreen,monospace;font-weight:400;font-size:clamp(34px,7vw,64px);margin:0;letter-spacing:2px;text-shadow:3px 3px 0 #000}.start p{font-size:clamp(18px,2.6vw,24px);color:var(--dim);margin:6px 0 26px}.start .play{display:inline-flex;align-items:center;gap:10px;font-family:Silkscreen,monospace;font-size:14px;letter-spacing:1px;color:#15122a;background:var(--accent);border:none;padding:12px 20px;cursor:pointer;box-shadow:4px 4px #000;white-space:nowrap}.start .play svg{width:14px;height:14px;shape-rendering:crispEdges}.start p,.start .hint{text-shadow:0 2px 0 #000}.start .play:active{transform:translate(2px,2px);box-shadow:2px 2px #000}.start .hint{display:block;margin-top:22px;font-size:17px;color:#efe6ff73}.gallery{position:fixed;inset:0;z-index:4;background:#080612e0;overflow-y:auto;padding:56px 16px 40px;opacity:0;pointer-events:none;transition:opacity .35s ease}.gallery.open{opacity:1;pointer-events:auto}.gallery h2{font-family:Silkscreen,monospace;font-weight:400;font-size:18px;letter-spacing:1px;margin:0 auto 18px;max-width:1200px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;max-width:1200px;margin:0 auto}.tile{appearance:none;border:1px solid var(--line);background:none;color:var(--ink);padding:0;text-align:left;cursor:pointer;font:inherit}.tile:hover,.tile.current{border-color:var(--accent)}.tile canvas{width:100%;aspect-ratio:16 / 9;display:block;image-rendering:pixelated}.tile .meta{padding:8px 10px 10px;display:flex;gap:10px;align-items:baseline}.tile .n{font-family:Silkscreen,monospace;font-size:11px;color:var(--accent)}.tile .t{font-family:Silkscreen,monospace;font-size:13px}.close{position:fixed;top:12px;right:16px}@media(max-width:560px){.vol{display:none}.hud{flex-direction:column;align-items:stretch}.controls{justify-content:flex-end}.label .mood{font-size:16px}}@media(prefers-reduced-motion:reduce){.hud,.top,.start,.gallery{transition:none}}