body{display:block;overflow:auto}
  .nes-wrap{max-width:760px;margin:0 auto;padding:clamp(16px,4vw,32px) clamp(14px,4vw,24px) 120px;display:grid;gap:16px}
  .nes-h{font:600 15px/1.35 var(--sans);margin:0}
  .nes-h span{display:block;font:11px/1.6 var(--mono);color:var(--ink-faint);font-weight:400;margin-top:4px;letter-spacing:.02em}
  #drop{border:1px dashed var(--line);border-radius:6px;background:var(--paper-2);padding:clamp(28px,7vw,52px) 18px;
    text-align:center;color:var(--ink-soft);cursor:pointer;transition:border-color .18s,color .18s,background .18s}
  #drop.hot{border-color:var(--signal);color:var(--signal);background:color-mix(in srgb, var(--signal) 6%, var(--paper-2))}
  #drop b{color:var(--ink)}
  #drop .sm{display:block;margin-top:8px;font:11px/1.6 var(--mono);color:var(--ink-faint)}
  #screen{display:none;gap:10px;justify-items:center}
  #screen.on{display:grid}
  #cv{width:100%;max-width:640px;height:auto;aspect-ratio:256/240;object-fit:contain;
    background:#0b0b0e;border:1px solid var(--line);border-radius:4px;image-rendering:pixelated;touch-action:none}
  .nes-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
  .nes-row button{font:11px/1 var(--mono);padding:9px 12px;border:1px solid var(--line);background:var(--paper);
    color:var(--ink-soft);border-radius:3px;cursor:pointer;letter-spacing:.03em}
  .nes-row button:hover{border-color:var(--signal);color:var(--signal)}
  .nes-keys{font:11px/1.7 var(--mono);color:var(--ink-faint);text-align:center}
  .nes-pad{display:none}
  @media (hover:none) and (pointer:coarse){
    .nes-keys{display:none}
    .nes-pad{
      display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;
      justify-content:space-between;align-items:flex-end;pointer-events:none;
      padding:0 calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));
    }
    .nes-pad .wb-dpad{pointer-events:auto;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);opacity:.94}
    .nes-pad .ab{display:flex;gap:10px;pointer-events:auto;opacity:.94}
    .nes-pad .wb-btn{width:60px;height:60px;border-radius:50%;font-size:12px}
    .nes-wrap{padding-bottom:210px}
  }
  @media (orientation:landscape) and (hover:none) and (pointer:coarse){
    .nes-wrap{padding-bottom:20px;max-width:900px}
    #cv{max-width:min(100%, calc((100dvh - 150px) * 256/240))}
    .nes-pad .wb-dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}
    .nes-pad .wb-btn{width:54px;height:54px}
  }
.wb-brand{text-decoration:none;color:var(--ink)}
.nes-pad .wb-btn:nth-child(1){grid-area:2/1}
.nes-pad .wb-btn:nth-child(2){grid-area:1/2}
.nes-pad .wb-btn:nth-child(3){grid-area:2/3}
.nes-pad .wb-btn:nth-child(4){grid-area:3/2}

.wb-bar{min-height:46px;padding:0 clamp(12px,3.6vw,20px)}