:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;--bg-color: #242424;--text-color: rgba(255, 255, 255, .87)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--bg-color);color:var(--text-color)}.layout{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column}.toolbar{height:auto;min-height:60px;background-color:var(--bg-color);border-bottom:2px solid #555;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:10px 20px;gap:10px;z-index:10;box-shadow:0 4px 10px #00000080}.controls{display:flex;gap:15px;align-items:center}.group{display:flex;align-items:center;gap:5px;background:#2a2a2a;padding:4px;border-radius:6px;border:1px solid #444}.label{color:#aaa;font-size:.9rem;min-width:40px;text-align:center}.logo{font-weight:700;font-size:1.2rem;letter-spacing:1px;color:#fff;text-shadow:0 0 10px #ff00ff}.mode-btn{padding:8px 16px;background:#333;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer;font-family:inherit;transition:all .2s}.mode-btn:hover{background:#444;border-color:#f0f;box-shadow:0 0 8px #f0f}.viewport{flex:1;position:relative;background:#000}.viewport canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%}.viewport.editor{border:4px solid #00ffff}.viewport.play{border:4px solid #ff00ff}.canvas-editor,.canvas-play{border:none;outline:none}.tool-ribbon-container{position:absolute;bottom:0;left:0;width:100%;z-index:20;display:flex;flex-direction:column;align-items:center;padding-bottom:20px;pointer-events:none}.tool-ribbon{background:#1e1e1ee6;padding:10px 20px;border-radius:12px;border:1px solid #555;display:flex;gap:10px;pointer-events:auto;box-shadow:0 4px 12px #00000080;z-index:22;position:relative}.category-btn{padding:8px 16px;background:#2a2a2a;color:#fff;border:2px solid transparent;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s}.category-btn:hover{background:#3a3a3a;box-shadow:0 0 8px var(--cat-color)}.category-btn.active{background:#444;box-shadow:0 0 12px var(--cat-color);text-shadow:0 0 4px var(--cat-color)}.category-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.tool-tray{position:absolute;bottom:100%;left:50%;transform:translate(-50%);pointer-events:auto;background:#141414f2;border:1px solid #444;border-bottom:none;border-radius:12px 12px 0 0;padding:15px 12px 25px;margin-bottom:-15px;min-width:80px;display:flex;justify-content:center;animation:drawerSlideUp .3s cubic-bezier(.16,1,.3,1);z-index:21;transform-origin:bottom center}@keyframes drawerSlideUp{0%{opacity:0;transform:translate(-50%) translateY(50%)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tray-header{display:none}.tray-items{display:flex;flex-direction:column;gap:8px;width:100%}.item-btn{padding:10px 16px;background:#333;border:1px solid #555;color:#fff;border-radius:6px;cursor:pointer;white-space:nowrap;text-align:center;width:100%}.item-btn:hover{background:#444;border-color:#777;transform:translateY(-2px)}.item-btn.active{background:#555;border-color:#fff;box-shadow:0 0 8px #ffffff4d}.tooltip-container{position:relative}.tooltip-text{visibility:hidden;opacity:0;background-color:#0a0f19fa;color:#0ff;border:1px solid #00ffff;box-shadow:0 0 10px #0ff6;text-align:center;border-radius:4px;padding:6px 10px;font-size:.85rem;font-family:monospace;font-weight:700;white-space:nowrap;pointer-events:none;position:absolute;z-index:1000;top:50%;left:115%;transform:translateY(-50%) translate(10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}.tooltip-text:after{content:"";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgba(10,15,25,.98) transparent transparent}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1;transform:translateY(-50%) translate(0)}.close-btn{display:none}.action-btn{padding:6px 12px;background:#2a2a2a;border:1px solid #555;color:#eee;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px}.action-btn:hover{background:#333;border-color:#888;color:#fff;box-shadow:0 0 5px #fff3}.action-btn.primary{border-color:#0ff;color:#0ff}.action-btn.primary:hover{background:#00ffff1a;box-shadow:0 0 8px #0ff}.scanline-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;background:linear-gradient(#12101000 50%,#0000001a 50%),linear-gradient(90deg,#ff000008,#00ff0003,#0000ff08);background-size:100% 4px,6px 100%;opacity:.4;mix-blend-mode:overlay}.hud-score{font-family:Courier New,Courier,monospace;font-weight:800;font-size:2rem;color:#fff;text-shadow:2px 2px 0px #000,0 0 10px #00ffff;letter-spacing:2px}.hud-victory{animation:pulseVictory 1s infinite alternate}@keyframes pulseVictory{0%{transform:translate(-50%,-50%) scale(1);text-shadow:0 0 10px #0f0}to{transform:translate(-50%,-50%) scale(1.1);text-shadow:0 0 30px #0f0,0 0 60px #fff}}.vault-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;z-index:1000;display:flex;justify-content:center;align-items:center;font-family:Courier New,monospace}.vault-modal{width:500px;max-width:90%;background:#1a1a1a;border:2px solid #00ffff;border-radius:8px;box-shadow:0 0 20px #0ff3;display:flex;flex-direction:column}.vault-header{padding:15px;background:#222;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center}.vault-header h2{margin:0;color:#fff;text-shadow:0 0 5px #00ffff}.vault-modal .close-btn{background:#f33;border:1px solid #fff;border-radius:4px;color:#fff;font-weight:700;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center}.vault-modal .close-btn:hover{background:red}.vault-content{padding:20px;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.save-new-section{margin-bottom:15px;background:#222;padding:10px;border:1px dashed #555;border-radius:4px}.save-new-section form{display:flex;gap:10px}.vault-input{flex:1;padding:8px;background:#000;border:1px solid #444;color:#fff;font-family:inherit}.divider{text-align:center;font-size:.8rem;color:#666;margin-top:10px}.level-card{background:#333;padding:10px;border:1px solid #555;border-radius:4px;display:flex;justify-content:space-between;align-items:center;transition:all .2s}.level-card:hover{border-color:#0ff;background:#3a3a3a}.level-info{display:flex;flex-direction:column}.level-name{font-weight:700;color:#fff}.level-date{font-size:.8rem;color:#aaa}.action-btn.load{background:#0ff;color:#000;border:none;padding:5px 15px;border-radius:4px;font-weight:700;cursor:pointer}.action-btn.save{background:#fa0;color:#000;border:none;padding:5px 15px;border-radius:4px;font-weight:700;cursor:pointer}.save-btn{background:#3f3;color:#000;border:none;padding:5px 15px;border-radius:4px;font-weight:700;cursor:pointer}.save-btn:disabled{background:#555;color:#888;cursor:not-allowed}.delete-btn{background:none;border:none;cursor:pointer;font-size:1.2rem;margin-right:10px;opacity:.7;transition:opacity .2s}.delete-btn:hover{opacity:1;transform:scale(1.1)}.level-actions{display:flex;align-items:center}.loading,.empty-state{color:#888;text-align:center;padding:20px}.auth-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;z-index:2000;display:flex;justify-content:center;align-items:center;font-family:Courier New,monospace}.auth-modal{width:400px;background:#222;border:2px solid #ff00ff;border-radius:8px;box-shadow:0 0 20px #ff00ff4d}.auth-header{padding:15px;background:#333;border-bottom:1px solid #555;display:flex;justify-content:space-between}.auth-header h2{margin:0;color:#fff;text-shadow:0 0 5px #ff00ff}.auth-modal .close-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}.auth-content{padding:20px;color:#fff}.input-group{margin-bottom:15px}.input-group label{display:block;margin-bottom:5px;color:#aaa}.input-group input{width:100%;padding:8px;background:#111;border:1px solid #444;color:#fff;font-family:inherit}.input-group input:focus{border-color:#f0f;outline:none}.auth-btn{width:100%;padding:10px;font-weight:700;border:none;cursor:pointer;margin-top:10px}.auth-btn.login{background:#f0f;color:#000}.auth-btn.logout{background:#f33;color:#fff}.highlight{color:#0ff}.error-msg{color:#f33;margin-bottom:10px;text-align:center}.inspector-panel-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:950;font-family:Courier New,monospace}.inspector-panel{position:absolute;top:80px;right:20px;width:320px;background:#1a1a1af2;border:2px solid #00ffff;border-radius:8px;box-shadow:0 0 20px #00ffff40;pointer-events:auto;display:flex;flex-direction:column;animation:slideInRight .3s cubic-bezier(.16,1,.3,1)}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.inspector-header{padding:10px 15px;background:#222;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center}.inspector-header h3{margin:0;color:#fff;font-size:.95rem}.inspector-header .close-btn{background:none;border:none;color:#f33;font-size:1.5rem;font-weight:700;cursor:pointer}.inspector-content{padding:15px;color:#fff;display:flex;flex-direction:column;gap:12px}.tile-badge{background:#000;padding:8px;border-radius:4px;border:1px dashed #555;font-size:.8rem;color:#aaa;line-height:1.4}.tile-badge strong{color:#fff}.inspector-input{width:100%;padding:6px;background:#111;border:1px solid #444;color:#fff;font-family:inherit;margin-top:4px}.inspector-input:focus{border-color:#0ff;outline:none}.inspector-input.select{background:#111;color:#fff;cursor:pointer}.inspector-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.inspector-actions .action-btn{padding:6px 15px;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-size:.8rem;font-family:inherit}.inspector-actions .action-btn.cancel{background:#444;color:#fff}.inspector-actions .action-btn.apply{color:#000}