HASŁO Z ORBITY — odgadnij słowo

<main><header><span class="eyebrow">Gra słowna</span><h1>Hasło <br>z orbity.</h1><p>Odbieramy sygnał. Brakuje kilku liter.</p></header><section aria-label="Odgadywanie hasła"><div id="signal" aria-label="Pozostałe próby"></div><p id="word" aria-label="Ukryte hasło"></p><p id="hint"></p><div id="keyboard" aria-label="Wybierz literę"></div><p id="status" class="status" role="status">Wybierz literę. Masz 6 prób.</p><div class="actions"><button type="button" id="reset">Następny sygnał</button><span id="score">Pomyłki: 0 / 6</span></div><p>Użyj klawiatury A–Z lub przycisków. Każda błędna litera gasi fragment sygnału.</p></section></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:#f7f3e9;--ink:#372d60;--focus:#c73930}main{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;align-items:start;margin-top:60px}h1{font:italic clamp(56px,7vw,90px)/.95 Georgia,serif;letter-spacing:-.06em}header{border-top:2px solid;padding-top:16px}section{padding-top:20px}#signal{display:flex;gap:5px}#signal span{height:8px;flex:1;background:#7562a8}#signal span.lost{background:#d7d0c6}#word{font:700 clamp(17px,4vw,32px) ui-monospace,monospace;letter-spacing:.12em;margin:32px 0 8px;overflow-wrap:anywhere}#keyboard{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:24px}#keyboard button{padding:5px;font-family:monospace}#keyboard button.correct{background:#372d60;color:#fff;opacity:1}.actions{align-items:center}#score{font:14px monospace}@media(max-width:600px){main{display:block;margin-top:24px}h1 br{display:none}h1{font-size:56px}section{padding-top:8px}}

function wordState(word,guesses){const letters=[...new Set(guesses)],mistakes=letters.filter(c=>!word.includes(c)).length;return {mistakes,won:[...word].every(c=>letters.includes(c)),lost:mistakes>=6,display:[...word].map(c=>letters.includes(c)?c:'_').join(' ')};}
$(function(){const words=[['PLANETA','Krąży wokół gwiazdy.'],['KOMETA','Zostawia za sobą warkocz.'],['GALAKTYKA','Mieści miliardy gwiazd.'],['RAKIETA','Zabiera ładunek na orbitę.'],['SATELITA','Okrąża większe ciało.'],['TELESKOP','Pomaga dostrzec odległe światy.'],['ORBITA','Droga wokół ciała niebieskiego.'],['KOSMOS','Dalej niż sięga atmosfera.']];let round=0,guesses=[],over=false;
    function render(){const state=wordState(words[round][0],guesses);$('#word').text(state.display).attr('aria-label',state.display);$('#score').text('Pomyłki: '+state.mistakes+' / 6');$('#signal').empty().attr('aria-label','Pozostałe próby: '+(6-state.mistakes));for(let i=0;i<6;i++)$('<span>',{class:i<state.mistakes?'lost':''}).appendTo('#signal');$('#keyboard button').each(function(){const letter=$(this).text(),used=guesses.includes(letter);$(this).prop('disabled',used||over).toggleClass('correct',used&&words[round][0].includes(letter));});}
    function reset(){guesses=[];over=false;$('#keyboard').empty();for(const letter of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ')$('<button>',{type:'button',text:letter,'data-letter':letter}).appendTo('#keyboard');$('#hint').text(words[round][1]);$('#status').text('Wybierz literę. Masz 6 prób.');render();}
    function guess(letter){if(over||guesses.includes(letter))return;guesses.push(letter);const state=wordState(words[round][0],guesses);over=state.won||state.lost;$('#status').text(state.won?'Sygnał odczytany: '+words[round][0]+'.':state.lost?'Sygnał utracony. Hasło: '+words[round][0]+'.':words[round][0].includes(letter)?'Dobra litera!':'Brak tej litery. Pozostało prób: '+(6-state.mistakes)+'.');render();if(over)$('#reset').trigger('focus');else $('#keyboard button:not(:disabled)').first().trigger('focus');}
    $('#keyboard').on('click','button',function(){guess($(this).text());});$(document).on('keydown',function(event){if(!event.ctrlKey&&!event.metaKey&&!event.altKey&&/^[a-z]$/i.test(event.key)){event.preventDefault();guess(event.key.toUpperCase());}});$('#reset').on('click',function(){round=(round+1)%words.length;reset();});reset();
});