:root{--bg:#1d2330;--bg-deep:#0b0d12;--panel:#2a3242;--accent:#b33a3a;--accent-hover:#c94848;--text:#f2e9d8;--muted:#8b93a5;--line:#cfd6e4;--header-h:56px}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:ui-monospace,Cascadia Mono,Consolas,monospace}a{color:inherit}.site-header{height:var(--header-h);background:var(--bg-deep);border-bottom:2px solid var(--panel);justify-content:space-between;align-items:center;padding:0 16px;display:flex}.site-title{letter-spacing:1px;font-family:"Press Start 2P",ui-monospace,monospace;font-size:14px;text-decoration:none}.site-nav{gap:4px;display:flex}.site-nav a{color:var(--muted);border-radius:2px;padding:8px 12px;font-weight:700;text-decoration:none}.site-nav a:hover{color:var(--text);background:var(--panel)}.site-nav a[aria-current=page]{color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}.button{text-align:center;letter-spacing:2px;width:260px;max-width:100%;color:var(--text);background:var(--panel);border:2px solid var(--line);box-shadow:4px 4px 0 var(--bg-deep);padding:14px 0;font-size:20px;font-weight:700;text-decoration:none;transition:transform 60ms,box-shadow 60ms;display:block}.button:hover,.button:focus-visible{background:var(--accent);outline:none}.button:active{box-shadow:none;transform:translate(4px,4px)}.button.primary{background:var(--accent)}.button.primary:hover,.button.primary:focus-visible{background:var(--accent-hover)}.center-page{min-height:calc(100vh - var(--header-h));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px 16px;display:flex}.hero-title{text-shadow:4px 4px 0 var(--accent);margin:0 0 8px;font-family:"Press Start 2P",ui-monospace,monospace;font-size:clamp(28px,6vw,56px)}.tagline{color:var(--muted);margin:0 0 24px}.menu{flex-direction:column;align-items:center;gap:16px;display:flex}.note{color:var(--muted);margin:0 0 16px}body.play-page{flex-direction:column;height:100vh;display:flex;overflow:hidden}.game-frame{background:var(--bg-deep);flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.game-frame canvas{display:block}.play-bar{background:var(--bg-deep);border-top:2px solid var(--panel);align-items:center;gap:8px;padding:6px 16px;display:flex}.play-bar .small-button{flex:none;text-decoration:none}.play-bar .small-button[hidden]{display:none}.record-status{color:var(--muted);margin-right:auto;font-size:13px}.record-status .dot{color:var(--accent)}.record-status .warn{color:#e0b04a}body.editor-page{flex-direction:column;height:100vh;display:flex;overflow:hidden}.editor{flex:1;min-height:0;display:flex}.editor-panel{background:var(--bg-deep);border-right:2px solid var(--panel);flex-direction:column;flex:none;gap:16px;width:240px;padding:12px;display:flex;overflow-y:auto}.editor-panel h2{letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:12px}.editor-canvas{background:var(--bg-deep);flex:1;min-width:0;overflow:hidden}.editor-canvas canvas{display:block}.tools{flex-direction:column;gap:4px;display:flex}.tool{font:inherit;color:var(--text);background:var(--panel);cursor:pointer;text-align:left;border:2px solid #0000;align-items:center;gap:10px;padding:6px 8px;font-weight:700;display:flex}.tool:hover{border-color:var(--muted)}.tool[aria-checked=true]{border-color:var(--line);background:var(--accent)}.tool img,.tool .swatch-spawn,.tool .swatch-erase{width:24px;height:24px;image-rendering:pixelated;flex:none}.swatch-spawn{background:linear-gradient(var(--text), var(--text)) center / 15px 21px no-repeat}.swatch-erase{border:2px dashed var(--muted)}.tool kbd{font:inherit;color:var(--muted);margin-left:auto;font-size:11px}.tool[aria-checked=true] kbd{color:var(--text)}.row{align-items:center;gap:6px;margin-top:6px;display:flex}.row label{color:var(--muted);align-items:center;gap:4px;font-size:13px;display:flex}.row input{width:56px;font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--muted);padding:4px}.small-button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--muted);cursor:pointer;flex:1;padding:6px 8px;font-size:13px;font-weight:700}.small-button:hover:not(:disabled){border-color:var(--line);background:#343e52}.small-button:disabled{opacity:.4;cursor:default}.small-button.danger:hover{background:var(--accent)}.button.small{width:100%;padding:10px 0;font-size:16px}.button kbd{font:inherit;opacity:.7;margin-left:6px;font-size:11px}.hint{color:var(--muted);margin:6px 0 0;font-size:12px}.help ul{color:var(--muted);margin:0;padding-left:16px;font-size:12px;line-height:1.7}.help b{color:var(--text);font-weight:700}.status{color:var(--muted);min-height:1.5em;margin:auto 0 0;font-size:12px}@media (width<=640px){.editor{flex-direction:column}.editor-panel{border-right:none;border-bottom:2px solid var(--panel);width:auto;max-height:40vh}}.tool .caret{color:var(--muted);margin-left:auto}.tool .caret+kbd{margin-left:6px}#build-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker{width:min(560px,100vw - 32px);max-height:min(640px,100vh - 32px);color:var(--text);background:var(--bg-deep);border:2px solid var(--line);padding:0;box-shadow:6px 6px #000}.picker::backdrop{background:#0000008c}.picker[open]{flex-direction:column;display:flex}.picker-head{border-bottom:2px solid var(--panel);align-items:center;gap:8px;padding:10px 12px;display:flex}.picker-head h2{letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin:0;font-size:13px}.picker-head input{min-width:0;font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--muted);flex:1;padding:6px 8px}.picker-head .small-button{flex:none}.picker-quick{border-bottom:2px solid var(--panel);background:#11141b;flex-direction:column;gap:8px;padding:10px 12px;display:flex}.piece-bar h3,.picker-catalog h3{letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-size:11px}.piece-row{align-items:center;gap:6px;min-height:44px;display:flex;overflow-x:auto}.piece-row .empty{color:var(--muted);font-size:12px}.picker-catalog{flex-direction:column;gap:12px;padding:10px 12px 14px;display:flex;overflow-y:auto}.piece-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;display:grid}.piece{font:inherit;color:var(--text);background:var(--panel);cursor:pointer;border:2px solid #0000;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;font-size:12px;font-weight:700;display:flex}.piece:hover,.piece:focus-visible{border-color:var(--line);outline:none}.piece[aria-current=true]{border-color:var(--line);background:var(--accent)}.piece img{width:32px;height:32px;image-rendering:pixelated}.piece span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.piece-row .piece{flex-direction:row;flex:none;padding:4px 8px 4px 4px}.piece-row .piece img{width:24px;height:24px}