:root{--bg-body: #f3f3f3;--text-main: #222;--bg-menu: #fff;--border-menu: #ccc;--hover-menu: #e5f3ff;--border-hover: #cce8ff;--bg-toolbar: #f8f8f8;--bg-workspace: #cfd8dc;--btn-bg: #fff}body.dark-theme{--bg-body: #1a1a1a;--text-main: #ddd;--bg-menu: #2d2d2d;--border-menu: #444;--hover-menu: #3a3a3a;--border-hover: #555;--bg-toolbar: #252525;--bg-workspace: #111;--btn-bg: #333}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-body);color:var(--text-main);overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh}.menu-bar{display:flex;background-color:var(--bg-menu);border-bottom:1px solid var(--border-menu);font-size:13px;padding:0 4px}.menu-item{padding:6px 12px;cursor:pointer;position:relative;border:1px solid transparent}.menu-item:hover{background-color:var(--hover-menu);border:1px solid var(--border-hover)}.dropdown{display:none;position:absolute;top:100%;left:-1px;background:var(--bg-menu);border:1px solid var(--border-menu);box-shadow:0 4px 6px #0000004d;min-width:160px;z-index:100}.menu-item:hover .dropdown{display:block}.dropdown-item{display:block;padding:8px 16px;cursor:pointer;color:var(--text-main)}.dropdown-item:hover{background-color:var(--hover-menu)}.toolbar{display:flex;align-items:center;gap:12px;padding:8px 12px;background-color:var(--bg-toolbar);border-bottom:1px solid var(--border-menu);box-shadow:0 1px 3px #0000001a}.toolbar button{padding:4px 16px;background:var(--btn-bg);border:1px solid var(--border-menu);border-radius:3px;cursor:pointer;font-size:12px;color:var(--text-main)}.toolbar button:hover:not(:disabled){background:var(--hover-menu);border-color:var(--border-hover)}.toolbar button:disabled{color:#888;cursor:not-allowed;opacity:.6}.status-indicator{width:8px;height:8px;border-radius:50%;background-color:#777;box-shadow:inset 0 1px 2px #00000080}.status-indicator.running{background-color:#4caf50;box-shadow:0 0 5px #4caf50,inset 0 1px 2px #0000004d}#status-text{font-size:12px;color:var(--text-main);opacity:.8}.main-workspace{flex:1;display:flex;align-items:center;justify-content:center;background-color:var(--bg-workspace);box-shadow:inset 0 0 15px #0000004d}.screen-container{position:relative;background:#000;padding:8px;border-radius:4px;border:1px solid var(--border-menu);box-shadow:0 10px 30px #00000080}canvas#gbc-canvas{display:block;width:640px;height:576px;max-width:100%;max-height:60vh;object-fit:contain;aspect-ratio:160 / 144;image-rendering:pixelated;background:#000}.screen-container.crt-effect:after{content:" ";display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);background-size:100% 4px,6px 100%;pointer-events:none;z-index:10}#overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;letter-spacing:2px}#overlay.hidden{display:none}.login-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000}.login-box{background:var(--bg-menu);padding:40px;border-radius:12px;border:1px solid var(--border-menu);width:380px;box-shadow:0 15px 35px #0009;text-align:center;display:flex;flex-direction:column;gap:15px}.login-box h2{margin-bottom:10px;color:var(--text-main);font-weight:600;font-size:24px;letter-spacing:.5px}.login-box p.subtitle{color:var(--text-main);opacity:.7;font-size:14px;margin-top:-15px;margin-bottom:10px}.login-box input{width:100%;padding:14px;border:1px solid var(--border-menu);border-radius:6px;background:var(--bg-body);color:var(--text-main);font-size:14px;transition:border-color .2s,box-shadow .2s;outline:none}.login-box input:focus{border-color:#4da6ff;box-shadow:0 0 0 3px #4da6ff33}.login-buttons{display:flex;gap:15px;margin-top:10px}.login-buttons button{flex:1;padding:12px;cursor:pointer;background:var(--btn-bg);border:1px solid var(--border-menu);color:var(--text-main);border-radius:6px;font-weight:700;font-size:14px;transition:all .2s}.login-buttons button:hover{background:var(--hover-menu);border-color:var(--border-hover);transform:translateY(-1px)}.login-buttons button:active{transform:translateY(1px)}.login-box h2{margin-bottom:20px;color:var(--text-main)}.login-box input{width:100%;padding:12px;margin-bottom:15px;border:1px solid var(--border-menu);border-radius:4px;background:var(--bg-body);color:var(--text-main);outline:none}.login-box input:focus{border-color:#4da6ff}.login-buttons{display:flex;gap:10px}.login-buttons button{flex:1;padding:10px;cursor:pointer;background:var(--btn-bg);border:1px solid var(--border-menu);color:var(--text-main);border-radius:4px;font-weight:700}.login-buttons button:hover{background:var(--hover-menu);border-color:var(--border-hover)}#mobile-gamepad{display:none;justify-content:space-between;align-items:center;padding:20px;background:var(--bg-toolbar);border-top:1px solid var(--border-menu);user-select:none;-webkit-user-select:none}@media (max-width: 768px) and (orientation: portrait){#mobile-gamepad{display:flex;flex:1;align-items:flex-start;padding-top:40px;background:transparent;border-top:none}canvas#gbc-canvas{width:100vw;height:auto}.menu-bar{flex-wrap:wrap}.main-workspace{flex:0 0 auto;flex-direction:column;justify-content:flex-start}.screen-container{padding:4px;width:100%;box-sizing:border-box}.sys-btns{position:fixed!important;bottom:30px!important;left:50vw!important;transform:translate(-50%)!important;z-index:200}}@media (max-width: 950px) and (orientation: landscape){.menu-bar,.toolbar{display:none!important}#mobile-gamepad{display:flex;position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;border:none;align-items:center;padding:0 5vw;z-index:100;pointer-events:none}.dpad,.action-btns{pointer-events:auto;opacity:.6}.sys-btns{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;transform:none!important;pointer-events:none;z-index:200}#btn-select{position:absolute!important;left:5vw!important;top:15%!important;pointer-events:auto!important}#btn-start{position:absolute!important;right:5vw!important;top:15%!important;pointer-events:auto!important}.main-workspace{flex:1;width:100%;height:100%;overflow:hidden;padding:0;margin:0;display:flex;align-items:center;justify-content:center}.screen-container{height:100%;width:100%;padding:0;border:none;box-shadow:none;display:flex;align-items:center;justify-content:center}canvas#gbc-canvas{max-height:100%;max-width:100%;height:100%;width:100%;object-fit:contain}}.dpad{position:relative;width:120px;height:120px}.dpad-btn{position:absolute;background:#333;border:2px solid #555;border-radius:4px;width:35px;height:35px}.dpad-btn:active{background:#555}#dpad-up{top:0;left:42px}#dpad-down{bottom:0;left:42px}#dpad-left{top:42px;left:0}#dpad-right{top:42px;right:0}.action-btns{position:relative;width:100px;height:80px}.action-btn{position:absolute;background:#900;border:2px solid #cc0000;border-radius:50%;width:45px;height:45px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}.action-btn:active{background:#c00}#btn-b{bottom:0;left:0}#btn-a{top:0;right:0}.sys-btns{display:flex;gap:10px;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.sys-btn{background:#444;border:1px solid #666;color:#fff;border-radius:10px;padding:4px 12px;font-size:10px}.sys-btn:active{background:#666}@media (min-width: 769px){canvas#gbc-canvas{transition:width .3s,height .3s}.scale-2x canvas#gbc-canvas{width:320px;height:288px}.scale-3x canvas#gbc-canvas{width:480px;height:432px}.scale-4x canvas#gbc-canvas{width:640px;height:576px}.scale-5x canvas#gbc-canvas{width:800px;height:720px}}