BONUS — salon gier w stylu retro

<header><a href="#start" class="logo">BONUS<span>arcade club</span></a><nav aria-label="Nawigacja"><a href="#gry">Automaty</a><a href="#refleks">Sprawdź refleks</a></nav><span class="coin">1 gracz / nieskończona frajda</span></header><main><section id="start" class="arcade-hero"><div class="retro-copy"><p>Jeszcze jedna runda?</p><h1>Mały reset.<br>Duży bonus.</h1><p>Odstaw telefon. Złap za joystick. Wracamy do czasów, gdy dobry wieczór mieścił się na kilku pikselach.</p><a href="#refleks" class="retro-button">Wciśnij start</a><div class="stripes" aria-hidden="true"><i></i><i></i><i></i><i></i></div></div><div class="cabinet"><div class="marquee">BONUS!</div><div class="screen"><p>PLAYER ONE</p><svg viewBox="0 0 220 150" role="img" aria-label="Pikselowi kosmici"><g fill="#ffd273" transform="translate(15 20)"><rect x="24" y="0" width="12" height="12"/><rect x="60" y="0" width="12" height="12"/><rect x="36" y="12" width="12" height="12"/><rect x="48" y="12" width="12" height="12"/><rect x="24" y="24" width="12" height="12"/><rect x="36" y="24" width="12" height="12"/><rect x="48" y="24" width="12" height="12"/><rect x="60" y="24" width="12" height="12"/><rect x="12" y="36" width="12" height="12"/><rect x="24" y="36" width="12" height="12"/><rect x="36" y="36" width="12" height="12"/><rect x="48" y="36" width="12" height="12"/><rect x="60" y="36" width="12" height="12"/><rect x="72" y="36" width="12" height="12"/><rect x="0" y="48" width="12" height="12"/><rect x="12" y="48" width="12" height="12"/><rect x="36" y="48" width="12" height="12"/><rect x="48" y="48" width="12" height="12"/><rect x="72" y="48" width="12" height="12"/><rect x="84" y="48" width="12" height="12"/><rect x="0" y="60" width="12" height="12"/><rect x="12" y="60" width="12" height="12"/><rect x="24" y="60" width="12" height="12"/><rect x="36" y="60" width="12" height="12"/><rect x="48" y="60" width="12" height="12"/><rect x="60" y="60" width="12" height="12"/><rect x="72" y="60" width="12" height="12"/><rect x="84" y="60" width="12" height="12"/><rect x="0" y="72" width="12" height="12"/><rect x="24" y="72" width="12" height="12"/><rect x="60" y="72" width="12" height="12"/><rect x="84" y="72" width="12" height="12"/><rect x="24" y="84" width="12" height="12"/><rect x="60" y="84" width="12" height="12"/></g><g fill="#ee9786" transform="translate(130 60) scale(.65)"><rect x="24" y="0" width="12" height="12"/><rect x="60" y="0" width="12" height="12"/><rect x="36" y="12" width="12" height="12"/><rect x="48" y="12" width="12" height="12"/><rect x="24" y="24" width="12" height="12"/><rect x="36" y="24" width="12" height="12"/><rect x="48" y="24" width="12" height="12"/><rect x="60" y="24" width="12" height="12"/><rect x="12" y="36" width="12" height="12"/><rect x="24" y="36" width="12" height="12"/><rect x="36" y="36" width="12" height="12"/><rect x="48" y="36" width="12" height="12"/><rect x="60" y="36" width="12" height="12"/><rect x="72" y="36" width="12" height="12"/><rect x="0" y="48" width="12" height="12"/><rect x="12" y="48" width="12" height="12"/><rect x="36" y="48" width="12" height="12"/><rect x="48" y="48" width="12" height="12"/><rect x="72" y="48" width="12" height="12"/><rect x="84" y="48" width="12" height="12"/><rect x="0" y="60" width="12" height="12"/><rect x="12" y="60" width="12" height="12"/><rect x="24" y="60" width="12" height="12"/><rect x="36" y="60" width="12" height="12"/><rect x="48" y="60" width="12" height="12"/><rect x="60" y="60" width="12" height="12"/><rect x="72" y="60" width="12" height="12"/><rect x="84" y="60" width="12" height="12"/><rect x="0" y="72" width="12" height="12"/><rect x="24" y="72" width="12" height="12"/><rect x="60" y="72" width="12" height="12"/><rect x="84" y="72" width="12" height="12"/><rect x="24" y="84" width="12" height="12"/><rect x="60" y="84" width="12" height="12"/></g></svg><p class="insert">READY TO PLAY</p></div><div class="controls" aria-hidden="true"><span class="joystick"></span><i></i><i></i></div><div class="cabinet-base">NO DOWNLOADS.<br>JUST GOOD TIMES.</div></div></section><section id="refleks" class="reaction"><div><span class="section-label">Rozgrzewka przed grą</span><h2>Jak szybki jest<br>Twój refleks?</h2><p>Uruchom próbę. Poczekaj, aż pole zmieni kolor i pojawi się „TERAZ!”. Wtedy kliknij je lub naciśnij spację.</p></div><div class="game"><button id="reaction-button" type="button">Rozpocznij próbę</button><p id="reaction-status" role="status">Gotowy? Rekord należy do Ciebie.</p></div></section><section class="game-list" id="gry"><h2>W co dziś gramy?</h2><details open><summary>Pixel Patrol <span>zręczność</span></summary><p>Unikaj przeszkód i szukaj bezpiecznej drogi przez pikselową galaktykę.</p></details><details><summary>Turbo Lane <span>wyścigi</span></summary><p>Jeden tor, ostre zakręty i kolejna szansa na lepszy czas.</p></details><details><summary>Block Party <span>logika</span></summary><p>Układaj klocki, planuj ruchy i zostaw sobie miejsce na niespodziankę.</p></details></section></main><footer><strong>BONUS arcade club</strong><span>Bez zapisu. Bez pośpiechu.</span></footer>

*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input{touch-action:manipulation}button,a{color:inherit}button{cursor:pointer}a{text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}button{min-height:44px}svg{display:block;max-width:100%}p{line-height:1.65;max-width:62ch}h1,h2,p,figure{margin:0}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px}nav{display:flex;flex-wrap:wrap;gap:24px}nav a{min-height:44px;display:flex;align-items:center}h2{font-size:clamp(28px,4vw,52px);line-height:1.12}section{scroll-margin-top:24px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:650px){header,footer{align-items:flex-start;flex-wrap:wrap}nav{gap:16px}}
body{background:#fff0d0;color:#432b20;font-family:"Courier New",monospace}header{padding:24px 6%;border-bottom:3px solid #432b20}.logo{font-family:Georgia,serif;font-size:44px;line-height:.85;font-weight:900;letter-spacing:-3px;text-decoration:none}.logo span{font:12px "Courier New",monospace;display:block;letter-spacing:3px;margin-top:10px}.coin{font-size:12px;max-width:150px}.arcade-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:7%;padding:64px 8% 55px;align-items:center}.retro-copy>p:first-child{font-weight:bold}.retro-copy h1{font-family:Georgia,serif;font-size:clamp(52px,6.8vw,100px);letter-spacing:-5px;line-height:1.03;margin:24px 0}.retro-copy p{font-size:16px;max-width:40ch}.retro-button{display:inline-block;background:#b64224;color:#fff5df;border:3px solid #432b20;box-shadow:5px 5px 0 #432b20;padding:17px 22px;text-decoration:none;font-weight:bold;margin-top:28px}.retro-button:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #432b20}.stripes{margin-top:35px;display:flex;height:20px}.stripes i{width:25%;background:#b64224}.stripes i:nth-child(2){background:#e38b38}.stripes i:nth-child(3){background:#cbb27d}.stripes i:nth-child(4){background:#54796d}.cabinet{background:#bb4b29;border:8px solid #432b20;transform:rotate(3deg);max-width:360px;width:100%;margin:auto;box-shadow:14px 14px 0 #e3c798}.marquee{background:#f8ca70;border-bottom:8px solid #432b20;font:bold 50px Georgia,serif;text-align:center;padding:16px}.screen{margin:20px;background:#273e36;color:#ffe19e;border:12px solid #432b20;padding:20px 12px;text-align:center}.screen p{font-size:12px;font-weight:bold}.screen svg{width:100%;height:150px;image-rendering:pixelated}.controls{display:flex;justify-content:flex-end;align-items:center;gap:14px;background:#f8ca70;border-top:7px solid #432b20;border-bottom:7px solid #432b20;height:70px;padding:15px}.controls i{height:24px;width:24px;border:4px solid #432b20;border-radius:50%;background:#bb4b29}.joystick{width:10px;height:36px;background:#432b20;position:relative;margin-right:auto;margin-left:35px}.joystick::before{content:"";position:absolute;width:25px;height:25px;border-radius:50%;background:#432b20;left:-8px;top:-10px}.cabinet-base{font-weight:bold;font-size:12px;line-height:1.8;text-align:center;padding:24px;color:#fff0d0}.reaction{background:#432b20;color:#fff0d0;display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:64px 8%}.section-label{font-size:12px}.reaction h2{font-family:Georgia,serif;margin:20px 0}.game{align-self:center}#reaction-button{width:100%;min-height:160px;border:4px solid #fff0d0;background:#f8ca70;color:#432b20;font-size:22px;font-weight:bold}#reaction-button[data-state="wait"]{background:#eacbb9}#reaction-button[data-state="go"]{background:#b4e5b0}#reaction-status{min-height:52px;margin-top:18px;font-size:14px}.game-list{padding:64px 8%}.game-list h2{font-family:Georgia,serif;margin-bottom:30px}.game-list details{border-top:2px solid #432b20;padding:20px 0}.game-list summary{cursor:pointer;font-weight:bold;font-size:22px;min-height:44px}.game-list summary span{float:right;font-size:13px;font-weight:normal}.game-list p{margin-top:15px}footer{padding:24px 6%;border-top:3px solid #432b20;font-size:13px}@media(max-width:700px){.arcade-hero,.reaction{grid-template-columns:1fr;gap:45px}.arcade-hero{padding:40px 7%}.retro-copy h1{letter-spacing:-3px;font-size:58px}.cabinet{max-width:285px}.coin{display:none}.game-list summary span{float:none;display:block;margin-top:8px}.reaction,.game-list{padding:44px 7%}}

$(function(){
let state='idle',timer=null,start=0;const button=$('#reaction-button'),status=$('#reaction-status');button.on('click',function(){if(state==='idle'){state='wait';button.attr('data-state','wait').text('Czekaj…');status.text('Czekaj na sygnał TERAZ!');timer=setTimeout(function(){state='go';start=performance.now();button.attr('data-state','go').text('TERAZ!');status.text('Kliknij pole lub naciśnij spację.');},1600+Math.random()*1700);}else if(state==='wait'){clearTimeout(timer);state='idle';button.attr('data-state','idle').text('Spróbuj ponownie');status.text('Falstart! Poczekaj na sygnał.');}else{const elapsed=Math.round(performance.now()-start);state='idle';button.attr('data-state','idle').text('Jeszcze raz');status.text('Twój czas: '+elapsed+' ms');}});document.addEventListener('visibilitychange',function(){if(document.hidden&&state!=='idle'){clearTimeout(timer);state='idle';button.attr('data-state','idle').text('Rozpocznij próbę');status.text('Próba wstrzymana. Możesz zacząć od nowa.');}});
});