*{box-sizing:border-box;margin:0;padding:0;border-radius:0!important}html{height:100%}body{color:#fff;-webkit-font-smoothing:antialiased;overflow:hidden;background:#000;width:100%;max-width:100vw;height:100%;font-family:IBM Plex Mono,JetBrains Mono,Fira Code,SF Mono,monospace;font-size:12px;line-height:1.4}#app{display:block;width:100%;height:100%}.app{background:#000;max-height:100vh;display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important}.header{display:flex;background:#000;border-bottom:2px solid #fff;flex:0 0 48px;justify-content:space-between;align-items: center;height:48px;padding:0}.header-left{display:flex;border-right:2px solid #fff;align-items: center;height:100%;padding:0 1.5rem}.logo{letter-spacing:.15em;color:#000;background:#0f8;margin-right:.75rem;padding:.25rem .5rem;font-size:18px;font-weight:900}.logo-sub{letter-spacing:.3em;color:#666;text-transform:uppercase;font-size:10px;font-weight:500}.header-center{display:flex;flex:1;justify-content:center;align-items: center}.status-indicator{display:flex;letter-spacing:.15em;text-transform:uppercase;border:1px solid #333;align-items: center;gap:.5rem;padding:.375rem .75rem;font-size:10px}.status-dot{animation:pulse 1.5s step-end infinite;background:#0f8;width:8px;height:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.status-text{color:#fff}.header-right{display:flex;border-left:2px solid #fff;align-items: center;height:100%;padding:0 .5rem}.main{overflow:hidden;flex:auto;height:calc(100vh - 80px);min-height:0;display:flex!important;flex-direction:row!important}.emulator-section{display:flex;overflow:hidden;background:#000;border-right:2px solid #fff;flex-direction:column;flex:auto;width:calc(100% - 320px);min-width:0}.screen-wrapper{display:flex;overflow:hidden;background:repeating-linear-gradient(0deg,#0000,#0000 1px,#ffffff05 1px 2px);flex:auto;justify-content:center;align-items: center;min-height:0;padding:1rem}.screen-bezel{position:relative;aspect-ratio:3/2;background:#000;border:2px solid #fff;flex-shrink:0;width:100%;max-width:calc(150vh - 300px);padding:4px}.screen-bezel:before{content:"SCREEN";position:absolute;letter-spacing:.2em;color:#666;background:#000;padding:0 4px;font-size:8px;top:-8px;left:12px}.screen-inner{position:relative;overflow:hidden;background:#0a0a1a}#emulator-canvas{display:block;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;background:#0a0a1a;width:100%;height:100%}.screen-overlay{position:absolute;display:flex;background:#000000e6;justify-content:center;align-items: center;transition:opacity .1s;inset:0}.screen-overlay.hidden{opacity:0;pointer-events:none}.empty-state{text-align:center;padding:2rem}.empty-icon{color:#666;opacity:.5;margin-bottom:1.5rem}.empty-title{letter-spacing:.3em;color:#fff;margin-bottom:.5rem;font-size:11px;font-weight:700}.empty-hint{color:#666;letter-spacing:.1em;font-size:10px}.controls-bar{display:flex;background:#000;border-top:2px solid #fff;flex:0 0 44px;justify-content:space-between;align-items: center;height:44px;padding:0}.controls-bar.disabled{opacity:.3;pointer-events:none}.controls-left,.controls-right{display:flex;align-items: center;height:100%}.controls-left{border-right:1px solid #333}.controls-center{display:flex;justify-content:center;align-items: center;gap:1rem;height:100%;padding:0 1rem}.btn{display:inline-flex;letter-spacing:.15em;text-transform:uppercase;color:#fff;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-right:1px solid #333;justify-content:center;align-items: center;gap:.5rem;height:100%;padding:0 1rem;font-family:inherit;font-size:10px;font-weight:600}.btn:hover{color:#000;background:#fff}.btn:active{color:#000;background:#0f8}.btn:disabled{opacity:.2;cursor:not-allowed}.btn:disabled:hover{color:#666;background:0 0}.btn-primary{color:#000;background:#0f8;font-weight:700}.btn-primary:hover{color:#000;background:#fff}.btn-sm{border:1px solid #333;height:28px;padding:0 .5rem;font-size:9px}.btn-icon{border-right:none;width:44px;padding:0}.btn.active,.btn-sm.active{color:#000;background:#0f8;border-color:#0f8}.volume-control{display:flex;align-items: center;gap:.5rem}.volume-control svg{color:#666}input[type=range]{-webkit-appearance:none;appearance:none;outline:none;background:#333;border:none;width:80px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:none;width:12px;height:12px}input[type=range]::-webkit-slider-thumb:hover{background:#0f8}.volume-value{color:#666;text-align:right;min-width:2.5rem;font-size:10px}.speed-control{display:flex;border-left:1px solid #333;align-items: center;gap:.5rem;height:100%;padding:0 1rem}.speed-control>span{color:#666;text-transform:uppercase;letter-spacing:.15em;font-size:10px}.speed-btns{display:flex;align-items: center;height:100%}.speed-btns .btn-sm{border-right:none}.speed-btns .btn-sm:first-child{border-left:1px solid #333}.sidebar{display:flex;overflow-y:auto;overflow-x:hidden;background:#000;flex-direction:column;flex:0 0 320px;width:320px;min-width:320px;max-width:320px;height:100%}.panel{border-bottom:2px solid #fff}.panel-header{display:flex;background:#333;justify-content:space-between;align-items: center;min-height:40px;padding:.75rem 1rem}.panel-header h2{letter-spacing:.25em;color:#fff;text-transform:uppercase;font-size:10px;font-weight:700}.panel-count{color:#fff;background:#000;padding:.125rem .375rem;font-size:10px;font-weight:600}.panel-toggle{cursor:pointer;user-select:none}.panel-toggle:hover{background:#666}.panel-toggle .chevron{color:#fff;transition:transform .1s}.panel-collapsed .panel-toggle .chevron{transform:rotate(-90deg)}.panel-collapsed .panel-content{display:none}.panel-content{background:#000;padding:1px}.rom-list{overflow-y:auto;max-height:200px}.rom-item{display:flex;cursor:pointer;background:#000;border-bottom:1px solid #333;align-items: center;gap:.75rem;padding:.625rem .75rem}.rom-item:hover{background:#333}.rom-item.active{background:#0f8;border-bottom:1px solid #0f8}.rom-item.active .rom-name{color:#000}.rom-item.active .rom-icon{color:#0f8;background:#000}.rom-icon{display:flex;color:#666;background:#333;flex-shrink:0;justify-content:center;align-items: center;width:28px;height:28px}.rom-info{flex:1;min-width:0}.rom-name{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:500}.no-roms{text-align:center;color:#666;letter-spacing:.1em;padding:2rem;font-size:11px}.loading-skeleton{padding:1px}.skeleton-item{animation:skeletonPulse 1.5s infinite;background:#333;border-bottom:1px solid #000;height:40px}@keyframes skeletonPulse{0%,to{opacity:.3}50%{opacity:.6}}.upload-zone{border-top:1px solid #333}.upload-label{display:flex;cursor:pointer;text-align:center;border:2px dashed #333;flex-direction:column;align-items: center;gap:.5rem;margin:.75rem;padding:1.25rem}.upload-label:hover{background:#00ff880d;border-color:#0f8}.upload-label:hover svg{color:#0f8}.upload-label svg{color:#666}.upload-label span{letter-spacing:.15em;color:#666;text-transform:uppercase;font-size:10px;font-weight:600}.save-slots{display:flex;flex-direction:column}.save-slot{display:flex;background:#000;border-bottom:1px solid #333;justify-content:space-between;align-items: center;padding:0}.save-slot:last-child{border-bottom:none}.slot-info{display:flex;align-items: center;gap:.75rem;padding:.625rem .75rem}.slot-number{display:flex;color:#fff;background:#333;justify-content:center;align-items: center;width:24px;height:24px;font-size:11px;font-weight:700}.slot-label{color:#fff;letter-spacing:.05em;font-size:11px}.slot-actions{display:flex}.slot-actions .btn-sm{background:0 0;border:none;border-left:1px solid #333}.slot-actions .btn-sm:hover{color:#000;background:#fff}.slot-actions .btn-sm:disabled{color:#333;background:0 0}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr)}.control-item{display:flex;background:#000;border-bottom:1px solid #333;justify-content:space-between;align-items: center;padding:.5rem .75rem}.control-item:nth-last-child(-n+2){border-bottom:none}.control-item:nth-child(odd){border-right:1px solid #333}.control-item .key{color:#0f8;letter-spacing:.1em;font-size:10px;font-weight:700}.control-item .action{color:#666;text-transform:uppercase;letter-spacing:.05em;font-size:10px}.footer{display:flex;color:#fff;letter-spacing:.15em;text-transform:uppercase;background:#333;border-top:2px solid #fff;flex:0 0 32px;justify-content:center;align-items: center;gap:.5rem;height:32px;font-size:10px}.footer .divider{color:#666;margin:0 .25rem}#touch-controls{display:none;position:fixed;pointer-events:none;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;z-index:1000;height:250px;bottom:0;left:0;right:0}#touch-controls.visible{display:block}.touch-controls-overlay{position:relative;touch-action:none;width:100%;height:100%}.touch-btn{position:absolute;display:flex;color:#fff;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#ffffff1a;border:2px solid #ffffff80;justify-content:center;align-items: center;width:56px;height:56px;font-family:inherit;font-size:14px;font-weight:700}.touch-btn.active{color:#000;background:#0f8;border-color:#0f8;transform:scale(.95)}.touch-shoulder{position:absolute;display:flex;justify-content:space-between;top:10px;left:20px;right:20px}.touch-l,.touch-r{width:64px;height:32px;font-size:11px}.touch-dpad{position:absolute;width:120px;height:120px;bottom:40px;left:30px}.touch-up{bottom:100%;left:50%;transform:translate(-50%)}.touch-down{top:100%;left:50%;transform:translate(-50%)}.touch-left{top:50%;right:100%;transform:translateY(-50%)}.touch-right{top:50%;left:100%;transform:translateY(-50%)}.touch-buttons{position:absolute;bottom:50px;right:30px}.touch-a{background:#0f83;border-color:#0f8;bottom:60px;right:0}.touch-b{bottom:0;right:60px}.touch-menu{position:absolute;display:flex;gap:20px;bottom:10px;left:50%;transform:translate(-50%)}.touch-select,.touch-start{width:70px;height:28px;font-size:10px}@media (max-width:900px){.main{flex:auto;height:auto;flex-direction:column!important}.emulator-section{border-bottom:2px solid #fff;border-right:none;flex:none;width:100%}.screen-wrapper{flex:none;min-height:auto;padding:1rem}#emulator-canvas{aspect-ratio:3/2;width:100%;max-width:480px;height:auto}.sidebar{flex:auto;width:100%;min-width:100%;max-width:100%;max-height:40vh}.controls-bar{flex-wrap:wrap;flex:none;height:auto;min-height:auto}.controls-left{border-right:none;order:1}.controls-right{border-left:1px solid #333;order:2}.controls-center{border-top:1px solid #333;order:3;justify-content:center;width:100%;height:auto;padding:.5rem}.speed-control{display:none}}@media (hover:none) and (pointer:coarse){html,body{overscroll-behavior:none}}:-webkit-full-screen{background:#000}:fullscreen{background:#000}:-webkit-full-screen .screen-wrapper{display:flex;justify-content:center;align-items: center;min-height:100vh;padding:0}:fullscreen .screen-wrapper{display:flex;justify-content:center;align-items: center;min-height:100vh;padding:0}:-webkit-full-screen .screen-bezel{border:none;max-width:100vw;max-height:100vh;padding:0}:fullscreen .screen-bezel{border:none;max-width:100vw;max-height:100vh;padding:0}:-webkit-full-screen .screen-bezel:before{display:none}:fullscreen .screen-bezel:before{display:none}:-webkit-full-screen #emulator-canvas{object-fit:contain;width:auto;max-width:100vw;height:auto;max-height:100vh}:fullscreen #emulator-canvas{object-fit:contain;width:auto;max-width:100vw;height:auto;max-height:100vh}:-webkit-full-screen .controls-bar{display:none}:fullscreen .controls-bar{display:none}:-webkit-full-screen .sidebar{display:none}:fullscreen .sidebar{display:none}:-webkit-full-screen .header{display:none}:fullscreen .header{display:none}:-webkit-full-screen .footer{display:none}:fullscreen .footer{display:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#000}::-webkit-scrollbar-thumb{background:#333}::-webkit-scrollbar-thumb:hover{background:#666}::selection{color:#000;background:#0f8}