CZTERY — pojedynek z komputerem

<main><header><span class="eyebrow">Cztery w rzędzie</span><h1>CZTERY<br>W RZĘDZIE.</h1><p>Ty grasz jasnymi. Komputer koralowymi.</p></header><div class="desktop-split"><section><div id="columns" aria-label="Wybierz kolumnę"></div><div id="board" aria-label="Plansza 6 na 7"></div><p id="status" class="status" role="status">Twój ruch. Wybierz kolumnę.</p></section><aside><p class="big">4</p><p>Żetony opadają na dół.<br>Połącz cztery w linii, zanim zrobi to komputer.</p><button type="button" id="reset">Nowa partia</button></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:#202bc7;--ink:#fffbe8;--focus:#f8d05a}h1{font-size:clamp(38px,7vw,76px);font-weight:900}.desktop-split{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:45px}#columns,#board{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}#columns button{padding:4px;font:16px ui-monospace,monospace;min-width:0;border:0;border-bottom:1px solid;margin-bottom:8px}#board{padding:10px;background:#141c83}.disc{aspect-ratio:1;border-radius:50%;background:#333cca;border:2px solid #141c83}.disc.you{background:#fffbe8}.disc.ai{background:#f08069}.big{font-size:150px;line-height:.8;margin:20px 0;font-weight:900;color:#f08069}@media(max-width:600px){.big{display:none}}

function dropToken(board,column,player){const next=board.slice();for(let r=5;r>=0;r--)if(!next[r*7+column]){next[r*7+column]=player;return next;}return null;}
function fourWinner(board){for(let r=0;r<6;r++)for(let c=0;c<7;c++){const p=board[r*7+c];if(!p)continue;for(const [dy,dx] of [[0,1],[1,0],[1,1],[1,-1]]){let matches=0;for(let n=0;n<4;n++){const y=r+dy*n,x=c+dx*n;if(y>=0&&y<6&&x>=0&&x<7&&board[y*7+x]===p)matches++;}if(matches===4)return p;}}return 0;}
function chooseColumn(board){const order=[3,2,4,1,5,0,6],available=order.filter(c=>dropToken(board,c,2));for(const p of [2,1])for(const c of available)if(fourWinner(dropToken(board,c,p))===p)return c;return available[0]??-1;}
$(function(){let board,waiting,over,timer;
    function render(){$('#board').empty();board.forEach((p,i)=>$('<div>',{class:'disc '+(p===1?'you':p===2?'ai':''),role:'img','aria-label':'Rząd '+(Math.floor(i/7)+1)+', kolumna '+(i%7+1)+': '+(p===1?'twój żeton':p===2?'komputer':'puste')}).appendTo('#board'));$('#columns button').each(function(i){$(this).prop('disabled',waiting||over||board[i]!==0);});}
    function check(){const winner=fourWinner(board);if(winner||board.every(Boolean)){over=true;$('#status').text(winner===1?'Wygrywasz! Cztery w rzędzie.':winner===2?'Komputer połączył cztery. Rewanż?':'Remis. Plansza pełna.');return true;}return false;}
    function reset(){clearTimeout(timer);board=Array(42).fill(0);waiting=false;over=false;$('#columns').empty();for(let c=0;c<7;c++)$('<button>',{type:'button','data-column':c,'aria-label':'Wrzuć do kolumny '+(c+1),text:'↓ '+(c+1)}).appendTo('#columns');$('#status').text('Twój ruch. Wybierz kolumnę.');render();}
    $('#columns').on('click','button',function(){if(waiting||over)return;const c=Number($(this).attr('data-column')),next=dropToken(board,c,1);if(!next)return;board=next;if(check()){render();$('#reset').trigger('focus');return;}waiting=true;$('#status').text('Ruch komputera…');render();timer=setTimeout(function(){const column=chooseColumn(board);if(column>=0)board=dropToken(board,column,2);waiting=false;if(!check())$('#status').text('Twój ruch. Wybierz kolumnę.');render();if(over)$('#reset').trigger('focus');else $('#columns button:not(:disabled)').first().trigger('focus');},350);});
    $('#reset').on('click',reset);reset();
});