:root { color-scheme:dark; --paper:#cdd5e1;--muted:#7f8a9c;--accent:#ea6057;--metal:#202d3b;--control-scale:1;--control-opacity:1;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#060b12;color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:none;-webkit-user-select:none;user-select:none}
button:focus-visible{outline:2px solid #fff;outline-offset:3px}
button:disabled{opacity:.48;cursor:default}
.hidden{display:none!important}
.app{position:relative;display:flex;flex-direction:column;max-width:1280px;margin:0 auto;width:100%;height:100vh;height:100dvh;padding: max(8px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 32%, #142336 0%,#080f1a 53%,#060b12 100%)}
.app:before{content:"";pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 72px,#ffffff04 73px 74px);opacity:.4}
.header,.play-layout,.footer{position:relative;z-index:1}
.header{height:49px;min-height:49px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;border-bottom:1px solid #ffffff18}
.brand{display:flex;align-items:center;gap:9px}.brand-icon{background:linear-gradient(135deg,#e66960,#802d35);border:1px solid #f68c7980;border-radius:5px;box-shadow:0 0 12px #f4514050;color:white;font-size:22px;line-height:28px;width:31px;text-align:center}.brand-words{display:flex;flex-direction:column;line-height:1.15;gap:4px}.brand-words strong{font-size:13px;letter-spacing:.16em;font-weight:850}.brand-words small{color:#97a0ad;font-size:8px;letter-spacing:.15em;font-weight:750}
.header-actions{display:flex;align-items:center;gap:9px}.status{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.1em;font-weight:800;color:#d7c0b6}.status i,.led{display:inline-block;width:6px;height:6px;background:#efa05e;border-radius:50%;box-shadow:0 0 8px #ef9951}.status.ready i,.led{background:#83e4b0;box-shadow:0 0 8px #83e4b0}.status.error i{background:#f16868}
.hdr-button{height:33px;width:36px;border-radius:6px;background:#243142;border:1px solid #4c5a68;font-size:19px;font-weight:900}
.play-layout{display:flex;flex:1;min-height:0;flex-direction:column;align-items:stretch;justify-content:space-between;gap:3px}
.screen-region{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 0 0;gap:5px}
.screen-frame{position:relative;aspect-ratio:256/240;height:min(100%, calc(93.75vw - 35.625px));max-width:100%;background:#000;overflow:hidden;flex:0 1 auto;border:5px solid #273746;outline:1px solid #566172;border-radius:4px;box-shadow:0 9px 27px #000b, inset 0 0 0 2px #000}
.nes-output{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;background:#050507;overflow:hidden}
.nes-output canvas{width:100%!important;height:100%!important;display:block!important;image-rendering:pixelated!important;image-rendering:crisp-edges!important;object-fit:contain!important}
.scanlines{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,#00000013 4px);opacity:.35}
.start-overlay,.paused-overlay{z-index:4;position:absolute;inset:0;background:linear-gradient(180deg,#090e17f5,#080e18eb);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:16px;gap:8px}
.overlay-mark{font-size:30px;color:#ef605c;text-shadow:0 0 22px #dd5d5e7e}.start-overlay h1{margin:0;letter-spacing:.1em;font-size:clamp(15px,4vw,25px);font-weight:900}.start-overlay p{margin:0 0 5px;color:#abb5bf;max-width:250px;line-height:1.4;font-size:clamp(9px,2.5vw,13px)}
.primary-btn{border-radius:7px;background:linear-gradient(180deg,#d76f69,#a34240);font-size:12px;font-weight:900;letter-spacing:.12em;color:#fff;border:1px solid #ed9387;padding:12px 19px;box-shadow:0 3px 0 #5f2a30}
.overlay-hint{font-size:9px;color:#8c96a5;margin-top:5px}.paused-overlay{background:#070c16f0}.paused-overlay>strong{font-size:26px;letter-spacing:.19em}.paused-overlay>span{font-size:12px;color:#98a5b3}
.screen-caption{display:flex;justify-content:space-between;width:min(100%,500px);font-size:8px;letter-spacing:.08em;color:#778495;font-weight:800}.screen-caption b{vertical-align:1px;margin-right:4px}
.controls{height:clamp(150px,27dvh,215px);flex:0 0 auto;width:100%;max-width:760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:2px;touch-action:none}
.dpad-zone,.buttons-zone{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-width:0}
.dpad{width:min(calc(175px * var(--control-scale)), 100%, 25dvh);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;filter:drop-shadow(0 7px 9px #0007);opacity:var(--control-opacity);touch-action:none}
.padkey{border:1px solid #3f5266;background:linear-gradient(145deg,#2d4053,#192738);font-size:clamp(12px,3.8vw,18px);font-weight:bold;text-shadow:0 1px 1px #0005;box-shadow:inset 0 1px 1px #77839835;min-width:0;padding:0}
.padkey:nth-child(2){border-radius:8px 8px 0 0}.padkey:nth-child(4){border-radius:8px 0 0 8px}.padkey:nth-child(6){border-radius:0 8px 8px 0}.padkey:nth-child(8){border-radius:0 0 8px 8px}
.padkey.diagonal{background:#283746b5;color:#99a9b7;font-size:13px;opacity:.85}
.padkey.is-down{background:#b45453!important;color:white;box-shadow:inset 0 2px 8px #411f22}
.padcenter{background:linear-gradient(145deg,#26384a,#152333);border:1px solid #3f5266;display:grid;place-items:center}.padcenter span{width:30%;height:30%;border-radius:50%;background:#4e6379;box-shadow:0 0 0 1px #0007}
.controls-label{font-size:8px;letter-spacing:.17em;color:#697a8d;font-weight:850}
.utility-zone{align-self:center;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-width:84px}
.utility-row{display:flex;gap:7px;align-items:center;justify-content:center}.system-key{border:1px solid #506173;border-radius:30px;padding:9px 9px;background:linear-gradient(180deg,#354658,#1b293a);box-shadow:0 3px 0 #0c1521;font-size:8px;font-weight:900;letter-spacing:.04em}.system-key.is-down{background:#e36b66;color:white}
.quick-save{border-radius:5px;background:transparent;color:#8b9bad;font-size:9px;border:1px solid #4a5a6f;padding:8px 10px;letter-spacing:.09em;font-weight:850}
.action-pad{width:min(calc(178px * var(--control-scale)), 100%, 27dvh);height:min(calc(160px * var(--control-scale)), 25dvh);position:relative;opacity:var(--control-opacity)}
.action-btn{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:49%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 29% 24%,#da7771,#a33e42 70%,#71262c);border:3px solid #79363c;box-shadow:0 4px 0 #391921,0 7px 12px #0009,inset 0 3px 2px #ffffff55;text-shadow:0 2px 2px #000a;color:#fff}
.action-btn span{font-size:clamp(18px,5vw,26px);font-weight:950;line-height:1}.action-btn small{font-size:8px;letter-spacing:.1em;font-weight:850}
.action-btn.is-down{transform:translateY(3px);background:#67292c;box-shadow:inset 0 2px 10px #260e15}
.b-key{left:2%;bottom:2%}.a-key{right:2%;top:2%}
.footer{display:flex;justify-content:space-between;align-items:center;height:16px;min-height:16px;color:#607083;letter-spacing:.1em;font-size:8px;font-weight:800;border-top:1px solid #ffffff12;padding:3px 4px 0}
.shade{position:fixed;z-index:15;inset:0;background:#020408c9;backdrop-filter:blur(5px)}
.sheet{position:fixed;z-index:16;top:50%;left:50%;transform:translate(-50%,-50%);width:min(95vw,460px);max-height:min(89dvh,780px);display:flex;flex-direction:column;border-radius:13px;overflow:hidden;background:linear-gradient(155deg,#213144,#0e1a29);border:1px solid #566678;box-shadow:0 25px 70px #000d}
.sheet-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px;border-bottom:1px solid #ffffff16}.sheet-top small{color:#de8078;font-size:9px;letter-spacing:.17em;font-weight:850}.sheet-top h2{font-size:19px;margin:4px 0 0;letter-spacing:.08em}.close-btn{background:#344456;border:1px solid #596a7a;border-radius:6px;width:35px;height:35px}
.sheet-content{overflow:auto;overscroll-behavior:contain;padding:15px 18px 20px;touch-action:pan-y}.item-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.menu-item{background:#152438;border:1px solid #3e5064;border-radius:8px;text-align:left;padding:11px;display:flex;flex-direction:column;gap:4px}.menu-item b{font-size:17px;color:#e38c81}.menu-item strong{font-size:12px}.menu-item span{font-size:10px;color:#91a1b2}
.slots-heading{display:flex;justify-content:space-between;align-items:center;margin:19px 1px 8px}.slots-heading h3{margin:0;font-size:12px;letter-spacing:.11em}.slots-heading span{font-size:9px;color:#91a1b2}
.slots{display:grid;gap:7px}.slot{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;background:#111d2b;border:1px solid #334759;border-radius:7px;padding:9px}.slot-title{font-size:11px;font-weight:850}.slot-meta{font-size:9px;color:#8596a7;margin-top:4px}.slot button,.other-tools button{font-size:10px;border-radius:5px;border:1px solid #536374;background:#2b3d50;padding:10px;font-weight:850}.slot button.load{background:#a34b47;border-color:#d47870}.slot button:disabled{opacity:.4}
.other-tools{display:flex;gap:8px;margin-top:10px}.other-tools button{flex:1;background:#25364a}.settings{margin-top:13px;padding:12px;background:#121f2e;border-radius:7px}.settings label{display:block;font-size:11px;font-weight:850;margin-bottom:14px}.settings output{float:right;color:#e98b7d}.settings input{display:block;width:100%;margin-top:8px;accent-color:#dd6e65;touch-action:pan-x}
.menu-help{font-size:10px;line-height:1.6;color:#96a4b3;margin:14px 0 0}.notice{min-height:16px;margin-top:8px;color:#8fe1b6;font-size:11px}
@media(orientation:landscape) and (min-width:600px) {
  .app{padding: max(2px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
  .header{height:34px;min-height:34px;padding:0 9px}.brand-icon{height:23px;width:24px;line-height:21px;font-size:17px}.brand-words strong{font-size:10px}.brand-words small{font-size:7px}.hdr-button{height:28px}
  .play-layout{display:grid;grid-template-columns:minmax(110px,1fr) minmax(250px, min(90dvh, 550px)) minmax(110px,1fr);align-items:center;gap:4px;min-height:0}
  .screen-region{grid-column:2;grid-row:1;height:100%;padding:1px 0;min-height:0;justify-content:center;z-index:1;pointer-events:none}
  .screen-region .start-overlay,.screen-region .paused-overlay{pointer-events:auto}
  .screen-frame{width:100%;height:auto;max-width:100%;flex:0 1 auto;pointer-events:auto;border-width:3px}
  .screen-caption{font-size:7px}
  .controls{grid-column:1/-1;grid-row:1;height:100%;width:100%;max-width:none;margin:0;display:grid;grid-template-columns:minmax(110px,1fr) minmax(250px, min(90dvh, 550px)) minmax(110px,1fr);pointer-events:none;z-index:2}
  .controls>*{pointer-events:auto}
  .dpad-zone{grid-column:1;grid-row:1}.buttons-zone{grid-column:3;grid-row:1}.utility-zone{grid-column:2;grid-row:1;align-self:end;flex-direction:row;margin-bottom:2px;z-index:3}
  .dpad{width:min(calc(160px * var(--control-scale)), 95%, 42dvh)}
  .action-pad{width:min(calc(166px * var(--control-scale)), 95%, 43dvh);height:min(calc(145px * var(--control-scale)), 38dvh)}
  .utility-row{gap:8px}.system-key{padding:6px 11px;font-size:8px}.quick-save{padding:7px 8px}
  .controls-label{font-size:7px}.footer{display:none}
}
@media(max-height:650px) and (orientation:portrait){.header{height:42px;min-height:42px}.controls{height:clamp(124px,25dvh,168px)}.screen-caption{display:none}.dpad{width:min(calc(150px * var(--control-scale)),100%,24dvh)}.action-pad{width:min(calc(160px * var(--control-scale)),100%,25dvh);height:min(calc(145px * var(--control-scale)),23dvh)}.controls-label{display:none}.footer{height:11px;min-height:11px}}
@media(max-height:390px) and (orientation:landscape){.header{height:28px;min-height:28px}.brand-words small{display:none}.screen-caption{display:none}.utility-zone{margin-bottom:0}}