:root{--bg: #0e1424;--fg: #e8ecf5;--accent: #f4a261;--panel: #1b2540;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;overscroll-behavior:none;touch-action:manipulation}.app{min-width:0;display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;max-width:100vw;overflow:hidden;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}header{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0;flex:none}.chip{background:var(--panel);color:var(--fg);border:1px solid #2c3a63;border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer;white-space:nowrap}.chip:hover{border-color:var(--accent)}main{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;padding-bottom:env(safe-area-inset-bottom)}.screen{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#000;border-radius:8px;overflow:hidden}.screen canvas{position:absolute;inset:0;max-width:100%;max-height:100%;width:100%!important;height:100%!important;object-fit:contain}.hint{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;gap:4px;color:#aab4d0}.msg{flex:none;margin:6px 0;color:var(--accent);font-size:14px}.touch{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 0;user-select:none;-webkit-user-select:none;touch-action:none}.tb{background:#26335a;color:var(--fg);border:1px solid #3a4a7c;border-radius:50%;width:52px;height:52px;font-size:16px;touch-action:none}.tb:active{background:var(--accent);color:#000}.dpad{display:grid;grid-template-areas:". up ." "left . right" ". down .";gap:2px;justify-self:start}.dpad .up{grid-area:up}.dpad .left{grid-area:left}.dpad .right{grid-area:right}.dpad .down{grid-area:down}.sys{display:flex;gap:8px}.sysb{border-radius:14px;width:74px;height:32px;font-size:11px}.act{display:flex;gap:10px;justify-self:end}@media(min-width:900px){.app{max-width:1100px;margin:0 auto}}@media(max-width:600px)and (orientation:portrait){.touch{grid-template-columns:auto auto;justify-content:space-between;row-gap:6px;padding:8px 0 14px}.sys{grid-column:1 / -1;grid-row:1;justify-self:center}.dpad{grid-row:2;grid-column:1}.act{grid-row:2;grid-column:2}}@media(max-width:480px){.tb{width:44px;height:44px}.act{gap:6px}.sysb{width:70px;height:30px}.hint{font-size:13px;padding:12px}}@media(max-height:480px)and (orientation:landscape){main{position:relative}.touch{position:absolute;left:0;right:0;bottom:8px;z-index:4;padding:0 8px;pointer-events:none}.touch>*{pointer-events:auto;opacity:.75}.hint{font-size:12px}}.debug{position:absolute;top:6px;left:6px;z-index:5;pointer-events:none;background:#000000a6;color:#7cfc9a;font:11px/1.4 monospace;padding:4px 8px;border-radius:4px}.guestv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:#000}.guestv.off{display:none}.home{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}.home h1{margin:0;font-size:2rem}.home p{margin:0;opacity:.8;line-height:1.6}.chip.big{font-size:1.1rem;padding:12px 24px}.lib{list-style:none;margin:8px 0;padding:0;max-height:40dvh;overflow:auto;display:flex;flex-direction:column;gap:6px;align-items:center}.lib li{display:flex;gap:8px;align-items:center}.libbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0}.modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:50}.modal .box{background:#1a2238;padding:20px 24px;border-radius:10px;text-align:center;max-width:90vw;display:flex;flex-direction:column;gap:10px;align-items:center}.modal small{opacity:.6;word-break:break-all}.badge.ok{background:#1f6f3d}.badge.one{background:#6b2b2b}.badge.link{background:#7a5a14}.badge.unk{background:#3a3f55}.spinner{width:28px;height:28px;border:3px solid #3a4468;border-top-color:#9fb4ff;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:6px}@keyframes spin{to{transform:rotate(360deg)}}.screen.dsbox{flex-direction:column;gap:10px}.screen.dsbox canvas.ds{position:static;flex:1 1 0;min-height:0;width:auto!important;height:auto!important;max-width:100%;max-height:50%;image-rendering:pixelated;object-fit:contain;touch-action:none;outline:2px solid #3a4468}.screen.dsbox.h{flex-direction:row}.screen.dsbox.h canvas.ds{max-width:50%;max-height:100%}.screen{margin-bottom:10px}.dropzone{border:2px dashed #2c3a63;border-radius:12px;padding:28px 12px;margin-bottom:12px;text-align:center;color:var(--fg);opacity:.8}.dropzone.on{border-color:#4af;background:#44aaff1f;opacity:1}header .grow{flex:1}header b{font-size:16px}.chip.icon{font-size:14px;padding:6px 13px}.dropzone{width:min(520px,100%);padding:36px 12px;font-size:15px}.drawer{position:fixed;inset:0;background:#0000008c;z-index:40;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}.drawer.open{visibility:visible;opacity:1}.drawer nav{position:absolute;top:0;right:0;bottom:0;width:min(300px,85vw);background:#141c33;padding:14px;display:flex;flex-direction:column;align-items:stretch;gap:8px;overflow:auto;transform:translate(100%);transition:transform .2s}.drawer.open nav{transform:none}.drawer nav .chip{border-radius:10px;padding:11px 14px;font-size:15px;text-align:left}h4{margin:10px 0 0;font-size:12px;opacity:.6;font-weight:600;letter-spacing:.04em}.dh{display:flex;justify-content:space-between;align-items:center}.modal .box.settings{align-items:stretch;text-align:left;width:min(440px,92vw);max-height:88dvh;overflow:auto}.settings .row{display:flex;align-items:center;gap:8px;font-size:14px}.settings .libbar{justify-content:flex-start;margin:2px 0}.settings p{margin:4px 0;font-size:13px;line-height:1.5}main.off{display:none}.select{flex:1;min-height:0;overflow:auto;padding:8px 0 24px}.sel-in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#aab4d0}.select h2{margin:4px 0;color:var(--fg)}.select h3{margin:12px 0 0;color:var(--fg);font-size:15px;align-self:flex-start}.lib.cards{width:100%;max-height:none;align-items:stretch}.lib.cards li{background:var(--panel);border:1px solid #2c3a63;border-radius:10px;padding:8px 10px;justify-content:space-between}.lib.cards li .chip:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;border:0;background:none;font-size:14px}.lib.cards li small{opacity:.6}.libfold{width:100%;text-align:left}.libfold summary{cursor:pointer;color:var(--fg);font-size:15px;font-weight:600;padding:8px 0}.screen{container-type:size}.screen[data-filter=sharp] canvas,.screen[data-filter=sharp] video{image-rendering:pixelated}.screen[data-filter=smooth] canvas,.screen[data-filter=smooth] video{image-rendering:auto}.screen canvas,.screen video{filter:brightness(var(--bright,1))}.screen[data-aspect="4:3"] canvas,.screen[data-aspect="4:3"] video{inset:0;margin:auto;width:min(100cqw,calc(100cqh*4/3))!important;height:min(100cqh,75cqw)!important;object-fit:fill}.screen[data-aspect=fill] canvas,.screen[data-aspect=fill] video{object-fit:fill}.screen[data-scan=low]:after,.screen[data-scan=mid]:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}.screen[data-scan=mid]:after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}.settings input[type=range]{flex:1}.touch{opacity:var(--tpo,1)}.touch .tb{transform:scale(var(--tps,1))}.touch.flip{direction:rtl}.touch.flip>*{direction:ltr}.padtest{display:flex;flex-direction:column;gap:4px;font-size:13px;background:#0e1424;border-radius:8px;padding:8px}.pb{display:inline-block;background:var(--accent);color:#000;border-radius:6px;padding:0 6px;margin-right:4px}.settings .row .row{display:inline-flex;margin-right:6px}.touch{--bs:52px}@media(max-width:480px){.touch{--bs:44px}}.touch .dpad{grid-template-areas:". up ." "left mid right" ". down .";gap:0;grid-template-columns:repeat(3,var(--bs))}.touch .dpad .tb{width:var(--bs);height:var(--bs);border-radius:8px;background:#2b2f3a;border-color:#4a5066;font-size:14px}.touch .dpad .tb:active{background:var(--accent);color:#000}.touch .dpad .dc{grid-area:mid;background:#2b2f3a}.touch .act{position:relative;display:block;width:calc(var(--bs)*var(--aw,2.5));height:calc(var(--bs)*var(--ah,2));justify-self:end}.touch .ab{position:absolute;left:calc(var(--bs)*var(--ax));top:calc(var(--bs)*var(--ay));width:var(--bs);height:var(--bs);font-weight:700;font-size:17px;background:#3a3f4f;border-color:#5a6078}.touch .sysb{width:calc(var(--bs)*1.5);height:calc(var(--bs)*.6);font-size:11px}.touch .sh{grid-column:1/-1;display:flex;justify-content:space-between;margin-bottom:6px}.touch .shb{width:calc(var(--bs)*1.7);height:calc(var(--bs)*.62);border-radius:12px 12px 5px 5px;font-weight:700;background:#2b2f3a}.touch .ab.red{background:#c8323c;border-color:#e8656d}.touch .ab.blue{background:#2f5fc4;border-color:#6d92e6}.touch .ab.green{background:#2e9c55;border-color:#66cf8b}.touch .ab.yellow{background:#d9b72b;border-color:#f1d86a;color:#000}.touch .ab.wine{background:#8b1e4a;border-color:#c0527f}.touch .ab.gray{background:#5a5f6e;border-color:#8a90a3}.touch .ab.tri{background:#1f7f6a;color:#6fe3c6}.touch .ab.sq{background:#8d3d72;color:#f2a3d6}.touch .ab.cir{background:#a83a34;color:#ff9c95}.touch .ab.cro{background:#2f5a9c;color:#9cc2ff}.touch[data-k=gb] .sys{transform:rotate(-20deg)}.touch[data-k=nes] .sysb,.touch[data-k=gb] .sysb{border-radius:12px;background:#4a4f60}.touch[data-k=snes] .sysb,.touch[data-k=nds] .sysb{border-radius:12px;background:#4a4f60;transform:rotate(-20deg)}.touch .tb.ab:active,.touch .tb.shb:active,.touch .tb.sysb:active{background:var(--accent);color:#000}@media(max-width:600px)and (orientation:portrait){.touch.hassh .sh{grid-row:1}.touch.hassh .sys{grid-row:2}.touch.hassh .dpad,.touch.hassh .act{grid-row:3}}.chip.on{border-color:var(--accent);color:var(--accent)}.plat{display:inline-block;font-size:10px;line-height:1;padding:2px 5px;margin-right:3px;border-radius:4px;background:#2c3a63;color:#9fb4ff;vertical-align:1px}.dkb{background:#111;padding:4px;user-select:none;-webkit-user-select:none;touch-action:manipulation}.dkb{display:block}.dfull{width:100%}.dkh{display:none}.dkb .dr{display:flex;justify-content:center;gap:3px;margin-bottom:3px}.dkey{flex:1 1 0;max-width:46px;min-width:0;height:36px;padding:0;background:#333;color:#fff;border:1px solid #666;border-radius:5px;font:13px sans-serif}.dkey.w{max-width:90px;flex-grow:2}.dkey.on{background:#2a5}@media(max-height:480px)and (orientation:landscape){.touch{position:fixed;inset:44px 0 0;display:block;padding:0;z-index:4;pointer-events:none}.touch>*{opacity:1;pointer-events:auto}.touch .dpad{position:absolute;left:max(8px,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}.touch .act{position:absolute;right:max(8px,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}.touch .sys{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:6px}.touch .sh{position:absolute;left:0;right:0;top:0;margin:0;padding:0 max(8px,env(safe-area-inset-left))}.touch.flip{direction:ltr}.touch.flip .dpad{left:auto;right:max(8px,env(safe-area-inset-right))}.touch.flip .act{right:auto;left:max(8px,env(safe-area-inset-left))}.touch.flip .sys{left:auto;right:max(8px,env(safe-area-inset-right))}.app:has(.touch) .screen{margin-left:184px;margin-right:214px}}@media(max-height:480px)and (orientation:landscape){.dkb{position:fixed;inset:44px 0 0;padding:0;background:none;z-index:4;pointer-events:none;display:block}.dkh{display:block;position:absolute;top:50%;transform:translateY(-50%);width:252px;pointer-events:auto}.dkh.l{left:max(6px,env(safe-area-inset-left))}.dkh.r{right:max(6px,env(safe-area-inset-right))}.dkb .dr{justify-content:flex-start}.dkh.r .dr{justify-content:flex-end}.dkey{max-width:40px}.dkey.w{max-width:80px}.app:has(.dkb) .screen{margin-left:258px;margin-right:258px}}@media(max-height:480px)and (orientation:landscape){.dkb[data-side=split] .dfull{display:none}.dkb[data-side=right]{left:auto;width:50vw;display:flex;align-items:center;padding:0 max(6px,env(safe-area-inset-right)) 0 4px}.dkb[data-side=right]{pointer-events:auto;background:#111}.dkb[data-side=right] .dr{justify-content:center}.dkb[data-side=right] .dfull{width:100%}.dkb[data-side=right] .dkey{max-width:30px;height:34px;font-size:11px}.dkb[data-side=right] .dkey.w{max-width:54px}.app:has(.dkb[data-side=right]) .screen{margin-left:0;margin-right:calc(50vw + 6px)}.dkb[data-side=right] .dkh{display:none}}@media(max-height:480px)and (orientation:landscape){.app:has(.dkb[data-side=right]) .libbar{margin-right:calc(50vw + 6px)}.dkb[data-side=right]{background:none}}.dlast{display:flex;align-items:flex-end;gap:6px}.dlast .dr{flex:1;margin-bottom:0}.dkb[data-arrow=l] .dlast{flex-direction:row-reverse}.darr{display:grid;grid-template-columns:repeat(3,minmax(0,40px));gap:3px;flex:none;justify-content:center}.darr .dkey{max-width:none;height:34px;font-size:15px}.dkh .darr{margin:6px auto 0}.dkh.r .darr{margin-left:auto}.dkh.l .darr{margin-right:auto}.dlr{flex:1;min-width:0}.dlr .dr:last-child{margin-bottom:0}.darr{grid-template-rows:repeat(2,36px)}.darr .dkey{height:36px}@media(max-height:480px)and (orientation:landscape){.dkh .dkey,.dkh+.dkh .dkey{height:30px}.dkh .darr{grid-template-rows:repeat(2,30px);margin-top:4px}.dkh .darr .dkey{height:30px}.dkb[data-side=right] .darr .dkey{height:34px}}