NOCNA ZMIANA — zgaś światła

<main><header><span class="eyebrow">Łamigłówka logiczna</span><h1>NOCNA<br>ZMIANA</h1></header><div class="desktop-split"><section><div id="board" class="board" aria-label="Przełączniki światła 5 na 5"></div></section><aside><div class="label">25 przełączników</div><p>Zgaś wszystkie światła.<br>Przycisk zmienia siebie oraz sąsiadów nad, pod i po bokach.</p><p id="score" class="metric">5 świateł</p><p id="status" class="status" role="status">Pierwszy układ: znajdź jeden dobry ruch.</p><button id="reset" type="button">Nowy układ</button><p>Strzałki wybierają pole. Enter przełącza światło.</p></aside></div></main>

*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--ink)}main{width:min(100% - 32px,980px);margin:32px auto}h1{font-size:clamp(32px,7vw,64px);line-height:1;margin:12px 0 20px;letter-spacing:-.045em}p{line-height:1.55}button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;cursor:pointer}button:hover{background:var(--ink);color:var(--bg)}button:disabled{cursor:default;opacity:.55}button:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}.eyebrow{font:12px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.status{min-height:48px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:8px}.metric{font:700 28px ui-monospace,monospace}small{line-height:1.5}canvas{display:block;width:100%;height:auto;border:1px solid currentColor;touch-action:none}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.controls button{min-width:54px;touch-action:none;user-select:none}.board{display:grid;gap:5px}.board button{padding:0;aspect-ratio:1;min-width:0;font-size:clamp(18px,5vw,30px)}@media(max-width:600px){main{width:calc(100% - 24px);margin:20px auto}h1{margin-bottom:16px}.desktop-split{display:block!important}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{--bg:#191b1c;--ink:#dfe2dd;--focus:#fff}h1{font-family:ui-monospace,monospace;letter-spacing:-.05em}.desktop-split{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:36px}#board{grid-template-columns:repeat(5,1fr);gap:10px;padding:14px;border:1px solid #72766f;background:#242828}#board button{background:#333b36;border:1px solid #72766f;color:#c9d5c9;min-height:38px}#board button[aria-pressed="true"]{background:#d7ef78;border-color:#d7ef78;color:#243110}#board button:hover{border-color:#fff}.label{background:#d7ef78;color:#243110;padding:8px;font:700 14px monospace;letter-spacing:.2em}.metric{color:#d7ef78}

function toggleLights(board,index){const next=board.slice(),row=Math.floor(index/5),column=index%5;for(const [dy,dx] of [[0,0],[-1,0],[1,0],[0,-1],[0,1]]){const r=row+dy,c=column+dx;if(r>=0&&r<5&&c>=0&&c<5)next[r*5+c]=!next[r*5+c];}return next;}
function newLights(random=Math.random){let board=Array(25).fill(false);for(let i=0;i<12;i++)board=toggleLights(board,Math.floor(random()*25));return board.some(Boolean)?board:toggleLights(board,12);}
$(function(){let board=toggleLights(Array(25).fill(false),12),moves=0,over=false;
    for(let i=0;i<25;i++)$('<button>',{type:'button','data-cell':i,tabindex:i===0?0:-1}).appendTo('#board');
    function render(){$('#board button').each(function(i){$(this).attr('aria-pressed',String(board[i])).attr('aria-label','Światło '+(i+1)+': '+(board[i]?'włączone':'wyłączone')).text(board[i]?'●':'·');});$('#score').text(board.filter(Boolean).length+' świateł');}
    $('#board').on('click','button',function(){if(over)return;board=toggleLights(board,Number($(this).attr('data-cell')));moves++;over=!board.some(Boolean);$('#status').text(over?'Wszystko zgaszone. Ruchy: '+moves+'.':'Ruchy: '+moves+'.');render();}).on('keydown','button',function(event){const i=Number($(this).attr('data-cell')),next={ArrowRight:Math.min(24,i+1),ArrowLeft:Math.max(0,i-1),ArrowDown:Math.min(24,i+5),ArrowUp:Math.max(0,i-5)}[event.key];if(next!==undefined){event.preventDefault();$('#board button').attr('tabindex',-1).eq(next).attr('tabindex',0).trigger('focus');}});
    $('#reset').on('click',function(){board=newLights();moves=0;over=false;$('#status').text('Nowy układ. Zgaś wszystkie światła.');render();});render();
});