Pikselowe okno pauzy sterowane klawiaturą

<main class="pixel-game">
  <header><span>STACJA 09</span><b>PUNKTY <i id="pixel-score">02480</i></b></header>
  <section class="game-field" aria-label="Pikselowa plansza gry"><div class="moon"></div><div class="ship"><i></i><i></i><i></i></div><div class="tower t1"></div><div class="tower t2"></div><div class="tower t3"></div><div class="star a"></div><div class="star b"></div><div class="star c"></div><div class="star d"></div><p>SEKTOR: PÓŁNOC / FALA 03</p></section>
  <div class="game-actions"><button id="pause-open" type="button">PAUZA</button><p id="game-status" role="status">Gra trwa</p></div>
</main>
<dialog id="pause-dialog" aria-labelledby="pause-title" aria-describedby="pause-desc">
  <header><span>||</span><div><small>STAN GRY ZAPISANY</small><h2 id="pause-title" tabindex="-1">PAUZA</h2><p id="pause-desc">Wybierz opcję strzałkami lub klawiszem Tab i zatwierdź Enterem.</p></div></header>
  <nav aria-label="Menu pauzy"><button id="pause-resume" type="button" data-pause-action="resume">WZNÓW GRĘ <i>01</i></button><button id="pause-controls" type="button" data-pause-action="controls">STEROWANIE <i>02</i></button><button id="pause-restart" type="button" data-pause-action="restart">NOWA RUNDA <i>03</i></button></nav>
  <section id="controls-panel" hidden><b>RUCH: STRZAŁKI</b><b>AKCJA: SPACJA</b><b>PAUZA: ESC</b></section>
  <footer><span>↑ ↓ WYBÓR</span><span>ENTER AKCJA</span></footer>
</dialog>

*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#120d2d;color:#fff4cf;font:16px/1.4 "Courier New",monospace}.pixel-game{width:min(930px,100%);min-height:100vh;margin:auto;padding:22px}.pixel-game>header{display:flex;justify-content:space-between;border:4px solid #fff4cf;padding:12px 15px;background:#281d5a;font-weight:900}.pixel-game header b{font-style:normal}.pixel-game header i{color:#75f0bb;font-style:normal}.game-field{position:relative;height:500px;margin-top:13px;border:4px solid #fff4cf;background:#1c1544;overflow:hidden;image-rendering:pixelated}.game-field:before{content:"";position:absolute;left:0;right:0;bottom:0;height:66px;background:#5a358d;border-top:8px solid #75f0bb}.moon{position:absolute;right:11%;top:55px;width:94px;height:94px;background:#ffd34f;box-shadow:16px 0 0 #1c1544}.ship{position:absolute;left:27%;top:44%;width:88px;height:46px;background:#ef5e7a;box-shadow:-16px 16px 0 #75f0bb;animation:ship-hop 1.2s steps(2,end) infinite}.ship:before{content:"";position:absolute;left:25px;top:-24px;width:38px;height:24px;background:#fff4cf}.ship i{position:absolute;bottom:-15px;width:14px;height:15px;background:#ffd34f}.ship i:nth-child(1){left:7px}.ship i:nth-child(2){left:36px}.ship i:nth-child(3){right:7px}.tower{position:absolute;bottom:66px;width:52px;background:#34246c;border-top:10px solid #ef5e7a}.t1{left:7%;height:125px}.t2{right:29%;height:190px}.t3{right:8%;height:104px}.star{position:absolute;width:9px;height:9px;background:#fff4cf;box-shadow:9px 9px 0 #fff4cf}.star.a{left:13%;top:15%}.star.b{left:48%;top:12%}.star.c{right:18%;top:40%}.star.d{left:58%;top:61%}.game-field p{position:absolute;left:17px;bottom:14px;z-index:2;margin:0;color:#120d2d;font-size:12px;font-weight:900}.game-actions{display:flex;align-items:center;gap:17px;padding-top:15px}.game-actions p{margin:0}.game-actions button{background:#ffd34f;color:#120d2d}button{min-height:48px;padding:10px 16px;border:4px solid #fff4cf;border-radius:0;background:#281d5a;color:#fff4cf;font:900 15px "Courier New",monospace;cursor:pointer;box-shadow:6px 6px 0 #0b071c}button:hover{background:#75f0bb;color:#120d2d}button:focus-visible,[tabindex]:focus-visible{outline:5px solid #ffd34f;outline-offset:4px}dialog{width:min(570px,calc(100% - 24px));padding:0;border:6px solid #fff4cf;background:#281d5a;color:#fff4cf;box-shadow:12px 12px 0 #0b071c}dialog::backdrop{background:rgba(9,6,27,.86)}dialog[open]{animation:pixel-in .18s steps(3,end)}dialog>header{display:grid;grid-template-columns:76px 1fr;border-bottom:4px solid #fff4cf}dialog>header>span{display:grid;place-items:center;background:#ef5e7a;color:#120d2d;font-size:38px;font-weight:900;border-right:4px solid #fff4cf}dialog>header>div{padding:18px}dialog small{color:#75f0bb;font-weight:900}dialog h2{margin:3px 0 0;font-size:clamp(55px,12vw,90px);line-height:.82;letter-spacing:-.08em}dialog header p{margin:10px 0 0;font-size:12px}dialog nav button{display:flex;justify-content:space-between;width:100%;min-height:66px;border:0;border-bottom:4px solid #fff4cf;box-shadow:none;text-align:left;padding:15px 19px;font-size:18px}dialog nav button.is-selected,dialog nav button:focus{background:#ffd34f;color:#120d2d}dialog nav button i{font-style:normal}#controls-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:13px;background:#120d2d}#controls-panel[hidden]{display:none}#controls-panel b{padding:10px 8px;border:2px solid #75f0bb;color:#75f0bb;font-size:11px}dialog footer{display:flex;justify-content:space-between;padding:11px 17px;font-size:10px}@keyframes ship-hop{50%{transform:translateY(-12px)}}@keyframes pixel-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}@media(max-width:500px){.pixel-game{padding:10px}.game-field{height:480px}.pixel-game>header{font-size:12px}.ship{left:18%}.t2{right:24%}dialog>header{grid-template-columns:54px 1fr}dialog h2{font-size:61px}#controls-panel{grid-template-columns:1fr}dialog footer{align-items:flex-start;flex-direction:column;gap:4px}}@media(max-width:350px){.moon{right:7%}.game-field{height:430px}dialog nav button{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const dialog=$('#pause-dialog')[0],$dialog=$(dialog),opener=$('#pause-open')[0],$items=$('[data-pause-action]');let active=0,downOutside=false;const outside=e=>{const r=dialog.getBoundingClientRect();return e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom};const trap=event=>{if(event.key!=='Tab')return;const items=[...dialog.querySelectorAll('button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[href],[tabindex]:not([tabindex="-1"])')].filter(item=>item.getClientRects().length),first=items[0],last=items[items.length-1],current=document.activeElement;if(!first){event.preventDefault();dialog.focus()}else if(event.shiftKey&&(current===first||!items.includes(current))){event.preventDefault();last.focus()}else if(!event.shiftKey&&current===last){event.preventDefault();first.focus()}};function choose(index){active=(index+$items.length)%$items.length;$items.removeClass('is-selected').eq(active).addClass('is-selected').trigger('focus')}$('#pause-open').on('click',function(){$('#controls-panel').prop('hidden',true);dialog.showModal();choose(0);$('#game-status').text('Gra wstrzymana')});$items.on('focus',function(){active=$items.index(this);$items.removeClass('is-selected').eq(active).addClass('is-selected')}).on('click',function(){active=$items.index(this);const action=$(this).data('pause-action');if(action==='resume'){dialog.close('resume');$('#game-status').text('Gra wznowiona.')}if(action==='controls'){$('#controls-panel').prop('hidden',false);$('#game-status').text('Pokazano sterowanie.')}if(action==='restart'){$('#pixel-score').text('00000');dialog.close('restart');$('#game-status').text('Rozpoczęto nową rundę.')}});$dialog.on('keydown',function(event){if(event.key==='Tab'){trap(event)}else if(event.key==='ArrowDown'||event.key==='ArrowUp'){event.preventDefault();choose(active+(event.key==='ArrowDown'?1:-1))}}).on('cancel',function(event){event.preventDefault();dialog.close('cancel');$('#game-status').text('Gra wznowiona.')}).on('close',()=>opener.focus()).on('pointerdown',event=>{downOutside=outside(event)}).on('pointerup',event=>{if(downOutside&&outside(event)){dialog.close('backdrop');$('#game-status').text('Gra wznowiona.')}downOutside=false}).on('pointercancel',()=>{downOutside=false})});