POTĘGA — połącz do 2048

<main><header><span class="eyebrow">2048</span><h1>POTĘGA<span>²</span></h1><p>Ta sama liczba. Podwójna wartość.</p></header><div class="desktop-split"><section><div id="board" tabindex="0" aria-label="Plansza 2048, sterowanie strzałkami"></div><div class="controls" aria-label="Kierunek ruchu"><button type="button" data-move="left" aria-label="W lewo">←</button><button type="button" data-move="up" aria-label="W górę">↑</button><button type="button" data-move="down" aria-label="W dół">↓</button><button type="button" data-move="right" aria-label="W prawo">→</button></div></section><aside><span class="eyebrow">Suma połączeń</span><div id="score" class="metric">0</div><p id="status" class="status" role="status">Połącz dwa jednakowe kafelki.</p><button id="reset" type="button">Zacznij od 2</button><p>Każdy ruch przesuwa całą planszę. Po poprawnym ruchu pojawia się nowa liczba.</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:#281f36;--ink:#eee5f5;--focus:#f6ce70}h1{font-weight:400;font-family:Georgia,serif}h1 span{color:#f6ce70}.desktop-split{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:44px}#board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#3c304d;padding:8px}#board:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.tile{aspect-ratio:1;display:grid;place-items:center;background:#4b3c5d;color:#fff;font:700 clamp(22px,6vw,36px) Georgia,serif}.tile.filled{background:#e7cde9;color:#281f36}.tile.large{background:#f6ce70;color:#281f36}.metric{font-size:68px}.controls{justify-content:space-between}.controls button{flex:1}

function mergeLine(values){const nums=values.filter(Boolean),line=[],length=values.length;let score=0;for(let i=0;i<nums.length;i++){if(nums[i]===nums[i+1]){const value=nums[i]*2;line.push(value);score+=value;i++;}else line.push(nums[i]);}while(line.length<length)line.push(0);return {line,score};}
function mergeBoard(board,direction){const next=board.slice();let score=0;for(let n=0;n<4;n++){let indexes=Array.from({length:4},(_,i)=>direction==='left'||direction==='right'?n*4+i:i*4+n);if(direction==='right'||direction==='down')indexes.reverse();const merged=mergeLine(indexes.map(i=>board[i]));indexes.forEach((i,j)=>next[i]=merged.line[j]);score+=merged.score;}return {board:next,score,changed:next.some((v,i)=>v!==board[i])};}
function mergePossible(board){return board.includes(0)||['left','right','up','down'].some(d=>mergeBoard(board,d).changed);}
$(function(){let board,score,over;
    function spawn(){const empty=board.map((v,i)=>v===0?i:-1).filter(i=>i>=0);if(empty.length)board[empty[Math.floor(Math.random()*empty.length)]]=Math.random()<.9?2:4;}
    function render(){$('#board').empty();board.forEach(value=>$('<div>',{class:'tile '+(value?'filled':'')+(value>=32?' large':''),text:value||'', 'aria-label':value?String(value):'Puste pole'}).appendTo('#board'));$('#score').text(score);}
    function reset(){board=[2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0];score=0;over=false;$('#status').text('Połącz dwa jednakowe kafelki.');render();}
    function move(direction){if(over)return;const next=mergeBoard(board,direction);if(!next.changed){$('#status').text('W tym kierunku nie ma ruchu.');return;}board=next.board;score+=next.score;spawn();if(board.includes(2048)){over=true;$('#status').text('2048! Cel osiągnięty.');}else if(!mergePossible(board)){over=true;$('#status').text('Brak ruchów. Wynik: '+score+'.');}else $('#status').text(next.score?'Połączono! +'+next.score+' pkt.':'Ruch wykonany.');render();}
    $('[data-move]').on('click',function(){move($(this).attr('data-move'));});$('#board').on('keydown',function(event){const direction={ArrowLeft:'left',ArrowRight:'right',ArrowUp:'up',ArrowDown:'down'}[event.key];if(direction){event.preventDefault();move(direction);}});$('#reset').on('click',reset);reset();
});