{"id":821,"date":"2026-10-23T19:47:34","date_gmt":"2026-10-23T17:47:34","guid":{"rendered":"http:\/\/192.168.88.32\/wordpress\/index.php\/krzyzowka-wypelnianka\/"},"modified":"2026-10-23T19:51:09","modified_gmt":"2026-10-23T17:51:09","slug":"krzyzowka-wypelnianka","status":"publish","type":"page","link":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/krzyzowka-wypelnianka\/","title":{"rendered":"Krzy\u017c\u00f3wka Wype\u0142nianka \u2013 W stylu \u201e\u015awiata M\u0142odych\u201d"},"content":{"rendered":"\n\n<div class=\"wyp-wrapper\">\n  <style>\n    .wyp-wrapper {\n      --primary: #0284c7;\n      --primary-hover: #0369a1;\n      --starter-bg: #dbeafe;\n      --starter-text: #1e40af;\n      --active-word: #e0f2fe;\n      --active-cell: #fef08a;\n      --correct: #bbf7d0;\n      --incorrect: #fecaca;\n      --text-main: #0f172a;\n      --text-muted: #64748b;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif !important;\n      color: var(--text-main);\n      width: 100%;\n      margin: 10px 0 40px 0;\n    }\n\n    \/* Header *\/\n    .wyp-header {\n      background: #0a101d !important;\n      color: #ffffff !important;\n      padding: 24px 28px;\n      border-radius: 16px;\n      margin-bottom: 24px;\n      border-bottom: 3px solid var(--primary);\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .wyp-title-area h2 {\n      font-size: 24px !important;\n      font-weight: 800 !important;\n      color: #ffffff !important;\n      letter-spacing: -0.4px !important;\n      margin: 0 0 6px 0 !important;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .wyp-badge {\n      background: #0284c7;\n      color: #ffffff;\n      font-size: 11px;\n      font-weight: 800;\n      padding: 3px 10px;\n      border-radius: 999px;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .wyp-subtitle {\n      color: #94a3b8 !important;\n      font-size: 14px !important;\n      margin: 0 !important;\n    }\n\n    .wyp-tabs {\n      display: flex;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n\n    .wyp-tab-btn {\n      background: rgba(255, 255, 255, 0.1) !important;\n      color: #f1f5f9 !important;\n      border: 1.5px solid rgba(255, 255, 255, 0.25) !important;\n      padding: 9px 16px;\n      border-radius: 8px;\n      font-weight: 700;\n      font-size: 13.5px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .wyp-tab-btn:hover {\n      background: rgba(2, 132, 199, 0.35) !important;\n      border-color: var(--primary) !important;\n      color: #38bdf8 !important;\n    }\n\n    .wyp-tab-btn.active {\n      background: var(--primary) !important;\n      border-color: var(--primary) !important;\n      color: #ffffff !important;\n      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;\n    }\n\n    \/* Main layout *\/\n    .wyp-game-layout {\n      display: grid;\n      grid-template-columns: minmax(320px, auto) 1fr;\n      gap: 24px;\n      align-items: start;\n    }\n\n    @media (max-width: 950px) {\n      .wyp-game-layout {\n        grid-template-columns: 1fr;\n      }\n    }\n\n    .wyp-grid-card {\n      background: #ffffff !important;\n      padding: 22px;\n      border-radius: 16px;\n      border: 1.5px solid #cbd5e1;\n      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .wyp-info-bar {\n      width: 100%;\n      margin-bottom: 14px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 13.5px;\n      color: var(--text-muted);\n      border-bottom: 1px solid #e2e8f0;\n      padding-bottom: 10px;\n    }\n\n    .wyp-info-bar strong {\n      color: var(--text-main);\n    }\n\n    \/* Grid scroll wrapper *\/\n    .wyp-grid-scroll {\n      width: 100%;\n      overflow-x: auto;\n      padding: 4px 0 12px 0;\n      display: flex;\n      justify-content: center;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .wyp-crossword-grid {\n      display: grid;\n      gap: 1.5px;\n      background: #475569;\n      border: 2px solid #334155;\n      padding: 2px;\n      border-radius: 6px;\n      user-select: none;\n      width: fit-content;\n      margin: 0 auto;\n    }\n\n    .wyp-cell {\n      width: 36px;\n      height: 36px;\n      background: #ffffff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 17px;\n      font-weight: 800;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Consolas\", monospace !important;\n      color: var(--text-main);\n      cursor: pointer;\n      position: relative;\n      line-height: 1 !important;\n      transition: background-color 0.12s;\n    }\n\n    .wyp-cell.blocked {\n      background: #1e293b;\n      cursor: default;\n    }\n\n    .wyp-cell.starter {\n      background: var(--starter-bg);\n      color: var(--starter-text);\n      font-weight: 900;\n    }\n\n    .wyp-cell.in-active-word {\n      background: var(--active-word);\n    }\n\n    .wyp-cell.selected {\n      background: var(--active-cell) !important;\n      outline: 2px solid #ca8a04;\n      z-index: 2;\n    }\n\n    .wyp-cell.correct {\n      background: var(--correct) !important;\n    }\n\n    .wyp-cell.incorrect {\n      background: var(--incorrect) !important;\n      color: #991b1b !important;\n    }\n\n    \/* Controls bar *\/\n    .wyp-controls-bar {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      margin-top: 18px;\n      width: 100%;\n      justify-content: center;\n    }\n\n    .wyp-btn {\n      padding: 9px 16px;\n      border-radius: 8px;\n      font-weight: 700;\n      font-size: 13.5px;\n      cursor: pointer;\n      border: none;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .wyp-btn-primary {\n      background: var(--primary) !important;\n      color: #ffffff !important;\n      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);\n    }\n    .wyp-btn-primary:hover {\n      background: var(--primary-hover) !important;\n      transform: translateY(-1px);\n    }\n\n    .wyp-btn-outline {\n      background: #f8fafc !important;\n      color: var(--text-main) !important;\n      border: 1.5px solid #cbd5e1 !important;\n    }\n    .wyp-btn-outline:hover {\n      background: #e2e8f0 !important;\n    }\n\n    .wyp-btn-print {\n      background: #0f172a !important;\n      color: #ffffff !important;\n    }\n    .wyp-btn-print:hover {\n      background: #1e293b !important;\n    }\n\n    \/* Words sidebar *\/\n    .wyp-words-card {\n      background: #ffffff !important;\n      padding: 22px;\n      border-radius: 16px;\n      border: 1.5px solid #cbd5e1;\n      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);\n    }\n\n    .wyp-words-card-title {\n      font-size: 17px !important;\n      font-weight: 800 !important;\n      color: var(--text-main);\n      margin: 0 0 6px 0 !important;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .wyp-words-instruction {\n      font-size: 13px !important;\n      color: var(--text-muted) !important;\n      margin-bottom: 16px !important;\n      line-height: 1.4 !important;\n    }\n\n    .wyp-words-groups {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n      max-height: 530px;\n      overflow-y: auto;\n      padding-right: 6px;\n    }\n\n    .wyp-word-group {\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      border-radius: 10px;\n      padding: 10px 12px;\n    }\n\n    .wyp-group-label {\n      font-size: 12.5px;\n      font-weight: 800;\n      color: var(--primary);\n      margin-bottom: 8px;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .wyp-words-list {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .wyp-word-chip {\n      background: #ffffff;\n      border: 1px solid #cbd5e1;\n      padding: 4px 9px;\n      border-radius: 6px;\n      font-size: 12.5px;\n      font-weight: 700;\n      font-family: monospace;\n      color: #1e293b;\n      cursor: pointer;\n      user-select: none;\n      transition: all 0.15s ease;\n    }\n\n    .wyp-word-chip:hover {\n      border-color: var(--primary);\n      background: #f0fdf4;\n      color: #0c4a6e;\n    }\n\n    .wyp-word-chip.strikethrough {\n      text-decoration: line-through;\n      color: #94a3b8;\n      background: #f1f5f9;\n      border-color: #e2e8f0;\n      opacity: 0.65;\n    }\n\n    .wyp-word-chip.starter-chip {\n      border-color: var(--primary);\n      background: var(--starter-bg);\n      color: var(--starter-text);\n      font-weight: 800;\n    }\n\n    \/* Hint & Toast bar *\/\n    .wyp-toast {\n      margin-top: 14px;\n      padding: 10px 16px;\n      border-radius: 8px;\n      font-size: 13.5px;\n      font-weight: 700;\n      display: none;\n      text-align: center;\n      width: 100%;\n    }\n\n    .wyp-toast.success {\n      background: #dcfce7;\n      color: #166534;\n      border: 1px solid #86efac;\n    }\n\n    .wyp-toast.info {\n      background: #e0f2fe;\n      color: #075985;\n      border: 1px solid #7dd3fc;\n    }\n\n    \/* Print header & print stylesheet *\/\n    .wyp-print-header {\n      display: none;\n    }\n\n    @media print {\n      body, html {\n        background: #ffffff !important;\n        color: #000000 !important;\n        padding: 0 !important;\n      }\n      header.ct-header, footer.ct-footer, .ct-comments-container, .wyp-header, .wyp-controls-bar, .wyp-tabs, .wyp-btn, .wyp-toast {\n        display: none !important;\n      }\n      .wyp-print-header {\n        display: block !important;\n        text-align: center;\n        border-bottom: 2px solid #000000;\n        margin-bottom: 20px;\n        padding-bottom: 10px;\n      }\n      .wyp-print-header h1 {\n        font-size: 22pt;\n        font-family: \"Times New Roman\", serif;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n      }\n      .wyp-print-header p {\n        font-size: 10pt;\n        color: #333;\n      }\n      .wyp-game-layout {\n        display: flex !important;\n        flex-direction: row !important;\n        gap: 24px !important;\n      }\n      .wyp-grid-card, .wyp-words-card {\n        border: none !important;\n        box-shadow: none !important;\n        padding: 0 !important;\n        background: transparent !important;\n      }\n      .wyp-crossword-grid {\n        border: 2px solid #000000 !important;\n        background: #000000 !important;\n      }\n      .wyp-cell {\n        width: 32px !important;\n        height: 32px !important;\n        border: 1px solid #000000 !important;\n        color: #000000 !important;\n        font-size: 13pt !important;\n      }\n      .wyp-cell:not(.starter) {\n        color: transparent !important;\n      }\n      .wyp-cell.starter {\n        background: #eeeeee !important;\n        color: #000000 !important;\n        font-weight: bold !important;\n      }\n      .wyp-cell.blocked {\n        background: #000000 !important;\n      }\n      .wyp-words-groups {\n        max-height: none !important;\n        overflow: visible !important;\n      }\n      .wyp-word-chip {\n        border: none !important;\n        text-decoration: none !important;\n        font-size: 10pt !important;\n        padding: 2px 4px !important;\n        color: #000000 !important;\n        background: transparent !important;\n        opacity: 1 !important;\n      }\n      .wyp-word-group {\n        background: transparent !important;\n        border: 1px solid #888888 !important;\n        margin-bottom: 6px !important;\n        padding: 4px 8px !important;\n      }\n      .wyp-group-label {\n        color: #000000 !important;\n        font-size: 9.5pt !important;\n        border-bottom: 1px solid #ccc;\n        margin-bottom: 4px !important;\n      }\n    }\n  <\/style>\n\n  <!-- Print header -->\n  <div class=\"wyp-print-header\">\n    <h1>Wype\u0142nianka<\/h1>\n    <p>W stylu \u0142amig\u0142\u00f3wek z kultowego \u201e\u015awiata M\u0142odych\u201d | Plansza: <span id=\"wyp-print-title\"><\/span><\/p>\n    <p style=\"font-size: 9pt; margin-top: 4px; font-style: italic;\">Instrukcja: Wszystkie podane wyrazy nale\u017cy wpisa\u0107 do diagramu na podstawie liczby liter. Jedno s\u0142owo startowe zosta\u0142o ju\u017c wpisane.<\/p>\n  <\/div>\n\n  <!-- Web header -->\n  <header class=\"wyp-header\">\n    <div class=\"wyp-title-area\">\n      <h2>\n        <span>\ud83e\udde9 Krzy\u017c\u00f3wka Wype\u0142nianka<\/span>\n        <span class=\"wyp-badge\">\u015awiat M\u0142odych<\/span>\n      <\/h2>\n      <div class=\"wyp-subtitle\" id=\"wyp-board-desc\">Wpisz podane wyrazy do diagramu na podstawie ich d\u0142ugo\u015bci.<\/div>\n    <\/div>\n    <div class=\"wyp-tabs\" id=\"wyp-tabs-container\"><\/div>\n  <\/header>\n\n  <!-- Game workspace -->\n  <div class=\"wyp-game-layout\">\n    \n    <!-- Grid Card -->\n    <div class=\"wyp-grid-card\">\n      <div class=\"wyp-info-bar\">\n        <span>S\u0142owo startowe: <strong id=\"wyp-starter-label\"><\/strong><\/span>\n        <span>Kierunek: <strong id=\"wyp-dir-label\">POZIOMO \u2192<\/strong><\/span>\n      <\/div>\n\n      <div class=\"wyp-grid-scroll\">\n        <div class=\"wyp-crossword-grid\" id=\"wyp-grid\"><\/div>\n      <\/div>\n\n      <div class=\"wyp-toast\" id=\"wyp-toast\"><\/div>\n\n      <div class=\"wyp-controls-bar\">\n        <button class=\"wyp-btn wyp-btn-primary\" id=\"wyp-btn-check\">\u2713 Sprawd\u017a<\/button>\n        <button class=\"wyp-btn wyp-btn-outline\" id=\"wyp-btn-hint\">\ud83d\udca1 Podpowied\u017a<\/button>\n        <button class=\"wyp-btn wyp-btn-outline\" id=\"wyp-btn-reset\">\u21ba Wyczy\u015b\u0107<\/button>\n        <button class=\"wyp-btn wyp-btn-print\" id=\"wyp-btn-print\">\ud83d\udda8\ufe0f Drukuj (A4)<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Words Card -->\n    <div class=\"wyp-words-card\">\n      <div class=\"wyp-words-card-title\">\n        <span>Lista wyraz\u00f3w<\/span>\n        <span style=\"font-size: 13px; font-weight: normal; color: var(--primary);\" id=\"wyp-counter\"><\/span>\n      <\/div>\n      <div class=\"wyp-words-instruction\">\n        Kliknij wyraz, aby go skre\u015bli\u0107 lub odznaczy\u0107. S\u0142owa wpisane poprawnie w diagramie skre\u015blaj\u0105 si\u0119 same.\n      <\/div>\n      <div class=\"wyp-words-groups\" id=\"wyp-words-list\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  const BOARDS = [{\"id\": \"\u015bwiat_m\u0142odych_-_przygoda_i_kosmos\", \"title\": \"\u015awiat M\u0142odych - Przygoda i Kosmos\", \"subtitle\": \"Klimat dawnych \u0142amig\u0142\u00f3wek harcerskich i naukowych\", \"width\": 13, \"height\": 13, \"grid\": [\"            B\", \"W\u0118DR\u00d3WKA  A U\", \"Y R   O MOTOR\", \"P OGNISKO O Z\", \"R G   M C M A\", \"A A   O  H R \", \"W  PLANETA O \", \"A  U  A  R P \", \" K N  U  CZAS\", \" RAKIETA \u00d3  Z\", \" O T  A  W  U\", \" K       K  M\", \"  PRZYGODA   \"], \"starter\": {\"dir\": \"V\", \"r\": 1, \"c\": 6, \"word\": \"KOSMONAUTA\", \"len\": 10}, \"words_by_len\": {\"8\": [\"HARC\u00d3WKA\", \"PRZYGODA\", \"W\u0118DR\u00d3WKA\"], \"5\": [\"BURZA\", \"DROGA\", \"MOTOR\", \"PUNKT\"], \"7\": [\"OGNISKO\", \"PLANETA\", \"RAKIETA\", \"WYPRAWA\"], \"4\": [\"ATOM\", \"CZAS\", \"KROK\", \"ROPA\", \"SZUM\"], \"10\": [\"KOSMONAUTA\"], \"3\": [\"MOC\"]}, \"across\": [{\"dir\": \"H\", \"r\": 1, \"c\": 0, \"word\": \"W\u0118DR\u00d3WKA\", \"len\": 8}, {\"dir\": \"H\", \"r\": 2, \"c\": 8, \"word\": \"MOTOR\", \"len\": 5}, {\"dir\": \"H\", \"r\": 3, \"c\": 2, \"word\": \"OGNISKO\", \"len\": 7}, {\"dir\": \"H\", \"r\": 6, \"c\": 3, \"word\": \"PLANETA\", \"len\": 7}, {\"dir\": \"H\", \"r\": 8, \"c\": 9, \"word\": \"CZAS\", \"len\": 4}, {\"dir\": \"H\", \"r\": 9, \"c\": 1, \"word\": \"RAKIETA\", \"len\": 7}, {\"dir\": \"H\", \"r\": 12, \"c\": 2, \"word\": \"PRZYGODA\", \"len\": 8}], \"down\": [{\"dir\": \"V\", \"r\": 1, \"c\": 0, \"word\": \"WYPRAWA\", \"len\": 7}, {\"dir\": \"V\", \"r\": 8, \"c\": 1, \"word\": \"KROK\", \"len\": 4}, {\"dir\": \"V\", \"r\": 1, \"c\": 2, \"word\": \"DROGA\", \"len\": 5}, {\"dir\": \"V\", \"r\": 6, \"c\": 3, \"word\": \"PUNKT\", \"len\": 5}, {\"dir\": \"V\", \"r\": 1, \"c\": 6, \"word\": \"KOSMONAUTA\", \"len\": 10}, {\"dir\": \"V\", \"r\": 2, \"c\": 8, \"word\": \"MOC\", \"len\": 3}, {\"dir\": \"V\", \"r\": 5, \"c\": 9, \"word\": \"HARC\u00d3WKA\", \"len\": 8}, {\"dir\": \"V\", \"r\": 1, \"c\": 10, \"word\": \"ATOM\", \"len\": 4}, {\"dir\": \"V\", \"r\": 5, \"c\": 11, \"word\": \"ROPA\", \"len\": 4}, {\"dir\": \"V\", \"r\": 0, \"c\": 12, \"word\": \"BURZA\", \"len\": 5}, {\"dir\": \"V\", \"r\": 8, \"c\": 12, \"word\": \"SZUM\", \"len\": 4}], \"total_words\": 18}, {\"id\": \"elektronika_i_majsterkowanie\", \"title\": \"Elektronika i Majsterkowanie\", \"subtitle\": \"\u015awiat Arduino, mikrokontroler\u00f3w i sensor\u00f3w\", \"width\": 13, \"height\": 13, \"grid\": [\"EKRAN SZEREG \", \"   M K   A  P\", \"   PROGRAMY L\", \"  F  N      I\", \"  A STEROWNIK\", \"  Z  R     N \", \"  AUTOMATY T \", \"     L    LED\", \" PROCESOR  R \", \"  A  R   P N \", \"  D    SERWER\", \" KARTA   \u0104 T \", \"  R    KOD   \"], \"starter\": {\"dir\": \"H\", \"r\": 4, \"c\": 4, \"word\": \"STEROWNIK\", \"len\": 9}, \"words_by_len\": {\"5\": [\"EKRAN\", \"KARTA\", \"RADAR\"], \"6\": [\"SERWER\", \"SZEREG\"], \"8\": [\"AUTOMATY\", \"INTERNET\", \"PROCESOR\", \"PROGRAMY\"], \"9\": [\"KONTROLER\", \"STEROWNIK\"], \"3\": [\"AMP\", \"KOD\", \"LED\", \"RAM\"], \"4\": [\"FAZA\", \"PLIK\", \"PR\u0104D\"]}, \"across\": [{\"dir\": \"H\", \"r\": 0, \"c\": 0, \"word\": \"EKRAN\", \"len\": 5}, {\"dir\": \"H\", \"r\": 0, \"c\": 6, \"word\": \"SZEREG\", \"len\": 6}, {\"dir\": \"H\", \"r\": 2, \"c\": 3, \"word\": \"PROGRAMY\", \"len\": 8}, {\"dir\": \"H\", \"r\": 4, \"c\": 4, \"word\": \"STEROWNIK\", \"len\": 9}, {\"dir\": \"H\", \"r\": 6, \"c\": 2, \"word\": \"AUTOMATY\", \"len\": 8}, {\"dir\": \"H\", \"r\": 7, \"c\": 10, \"word\": \"LED\", \"len\": 3}, {\"dir\": \"H\", \"r\": 8, \"c\": 1, \"word\": \"PROCESOR\", \"len\": 8}, {\"dir\": \"H\", \"r\": 10, \"c\": 7, \"word\": \"SERWER\", \"len\": 6}, {\"dir\": \"H\", \"r\": 11, \"c\": 1, \"word\": \"KARTA\", \"len\": 5}, {\"dir\": \"H\", \"r\": 12, \"c\": 7, \"word\": \"KOD\", \"len\": 3}], \"down\": [{\"dir\": \"V\", \"r\": 3, \"c\": 2, \"word\": \"FAZA\", \"len\": 4}, {\"dir\": \"V\", \"r\": 8, \"c\": 2, \"word\": \"RADAR\", \"len\": 5}, {\"dir\": \"V\", \"r\": 0, \"c\": 3, \"word\": \"AMP\", \"len\": 3}, {\"dir\": \"V\", \"r\": 1, \"c\": 5, \"word\": \"KONTROLER\", \"len\": 9}, {\"dir\": \"V\", \"r\": 0, \"c\": 9, \"word\": \"RAM\", \"len\": 3}, {\"dir\": \"V\", \"r\": 9, \"c\": 9, \"word\": \"PR\u0104D\", \"len\": 4}, {\"dir\": \"V\", \"r\": 4, \"c\": 11, \"word\": \"INTERNET\", \"len\": 8}, {\"dir\": \"V\", \"r\": 1, \"c\": 12, \"word\": \"PLIK\", \"len\": 4}], \"total_words\": 18}];\n  let currentIdx = 0;\n  let activeBoard = BOARDS[0];\n  let userGrid = [];\n  let manualCrossed = new Set();\n  let selected = { r: 0, c: 0 };\n  let currentDir = 'H';\n\n  function init() {\n    renderTabs();\n    load(0);\n    bindEvents();\n  }\n\n  function renderTabs() {\n    const box = document.getElementById('wyp-tabs-container');\n    if (!box) return;\n    box.innerHTML = '';\n    BOARDS.forEach((b, i) => {\n      const btn = document.createElement('button');\n      btn.className = `wyp-tab-btn ${i === currentIdx ? 'active' : ''}`;\n      btn.innerText = b.title.split(' - ')[0];\n      btn.onclick = () => load(i);\n      box.appendChild(btn);\n    });\n  }\n\n  function load(idx) {\n    currentIdx = idx;\n    activeBoard = BOARDS[idx];\n    manualCrossed.clear();\n\n    document.getElementById('wyp-board-desc').innerText = activeBoard.subtitle;\n    document.getElementById('wyp-print-title').innerText = activeBoard.title;\n    document.getElementById('wyp-starter-label').innerText = activeBoard.starter.word;\n\n    document.querySelectorAll('.wyp-tab-btn').forEach((btn, i) => {\n      btn.classList.toggle('active', i === idx);\n    });\n\n    userGrid = [];\n    for (let r = 0; r < activeBoard.height; r++) {\n      const row = [];\n      for (let c = 0; c < activeBoard.width; c++) row.push('');\n      userGrid.push(row);\n    }\n\n    const st = activeBoard.starter;\n    for (let i = 0; i < st.word.length; i++) {\n      if (st.dir === 'H') userGrid[st.r][st.c + i] = st.word[i];\n      else userGrid[st.r + i][st.c] = st.word[i];\n    }\n    manualCrossed.add(st.word);\n\n    selected = { r: st.r, c: st.c };\n    currentDir = st.dir;\n\n    drawGrid();\n    drawWords();\n    hideToast();\n    updateDirText();\n  }\n\n  function drawGrid() {\n    const el = document.getElementById('wyp-grid');\n    if (!el) return;\n    el.style.gridTemplateColumns = `repeat(${activeBoard.width}, 36px)`;\n    el.innerHTML = '';\n\n    const stSet = getStarterCoords();\n\n    for (let r = 0; r < activeBoard.height; r++) {\n      for (let c = 0; c < activeBoard.width; c++) {\n        const cell = document.createElement('div');\n        cell.className = 'wyp-cell';\n        cell.dataset.r = r;\n        cell.dataset.c = c;\n\n        if (activeBoard.grid[r][c] === ' ') {\n          cell.classList.add('blocked');\n        } else {\n          if (stSet.has(`${r},${c}`)) cell.classList.add('starter');\n          cell.innerText = userGrid[r][c];\n\n          if (selected.r === r &#038;&#038; selected.c === c) {\n            cell.classList.add('selected');\n          } else if (inActiveWord(r, c)) {\n            cell.classList.add('in-active-word');\n          }\n\n          cell.onclick = () => onCell(r, c);\n        }\n        el.appendChild(cell);\n      }\n    }\n  }\n\n  function getStarterCoords() {\n    const s = new Set();\n    const st = activeBoard.starter;\n    for (let i = 0; i < st.word.length; i++) {\n      const cr = (st.dir === 'H' ? st.r : st.r + i);\n      const cc = (st.dir === 'H' ? st.c + i : st.c);\n      s.add(`${cr},${cc}`);\n    }\n    return s;\n  }\n\n  function inActiveWord(r, c) {\n    if (activeBoard.grid[selected.r][selected.c] === ' ') return false;\n    if (currentDir === 'H') {\n      if (r !== selected.r) return false;\n      let start = selected.c;\n      while (start > 0 && activeBoard.grid[r][start - 1] !== ' ') start--;\n      let end = selected.c;\n      while (end < activeBoard.width - 1 &#038;&#038; activeBoard.grid[r][end + 1] !== ' ') end++;\n      return (c >= start && c <= end);\n    } else {\n      if (c !== selected.c) return false;\n      let start = selected.r;\n      while (start > 0 && activeBoard.grid[start - 1][c] !== ' ') start--;\n      let end = selected.r;\n      while (end < activeBoard.height - 1 &#038;&#038; activeBoard.grid[end + 1][c] !== ' ') end++;\n      return (r >= start && r <= end);\n    }\n  }\n\n  function onCell(r, c) {\n    if (activeBoard.grid[r][c] === ' ') return;\n    if (selected.r === r &#038;&#038; selected.c === c) {\n      currentDir = (currentDir === 'H' ? 'V' : 'H');\n    } else {\n      selected = { r, c };\n    }\n    updateDirText();\n    drawGrid();\n  }\n\n  function updateDirText() {\n    const el = document.getElementById('wyp-dir-label');\n    if (el) el.innerText = (currentDir === 'H' ? 'POZIOMO \u2192' : 'PIONOWO \u2193');\n  }\n\n  function drawWords() {\n    const box = document.getElementById('wyp-words-list');\n    if (!box) return;\n    box.innerHTML = '';\n\n    const matched = getEnteredWords();\n    let total = 0;\n    let crossed = 0;\n\n    const lens = Object.keys(activeBoard.words_by_len).map(Number).sort((a,b) => a - b);\n    lens.forEach(l => {\n      const g = document.createElement('div');\n      g.className = 'wyp-word-group';\n\n      const lbl = document.createElement('div');\n      lbl.className = 'wyp-group-label';\n      lbl.innerHTML = `<span>${l} LITERY<\/span><span>${activeBoard.words_by_len[l].length} s\u0142\u00f3w<\/span>`;\n      g.appendChild(lbl);\n\n      const list = document.createElement('div');\n      list.className = 'wyp-words-list';\n\n      activeBoard.words_by_len[l].forEach(w => {\n        total++;\n        const chip = document.createElement('span');\n        chip.className = 'wyp-word-chip';\n        chip.innerText = w;\n\n        const isSt = (w === activeBoard.starter.word);\n        if (isSt) chip.classList.add('starter-chip');\n\n        const isX = isSt || matched.has(w) || manualCrossed.has(w);\n        if (isX) {\n          chip.classList.add('strikethrough');\n          crossed++;\n        }\n\n        chip.onclick = () => {\n          if (manualCrossed.has(w)) manualCrossed.delete(w);\n          else manualCrossed.add(w);\n          drawWords();\n        };\n        list.appendChild(chip);\n      });\n\n      g.appendChild(list);\n      box.appendChild(g);\n    });\n\n    const cnt = document.getElementById('wyp-counter');\n    if (cnt) cnt.innerText = `Dopasowano: ${crossed} \/ ${total}`;\n  }\n\n  function getEnteredWords() {\n    const s = new Set();\n    activeBoard.across.forEach(slot => {\n      let full = true;\n      let w = \"\";\n      for (let i = 0; i < slot.len; i++) {\n        const ch = userGrid[slot.r][slot.c + i];\n        if (!ch) { full = false; break; }\n        w += ch;\n      }\n      if (full &#038;&#038; w === slot.word) s.add(w);\n    });\n    activeBoard.down.forEach(slot => {\n      let full = true;\n      let w = \"\";\n      for (let i = 0; i < slot.len; i++) {\n        const ch = userGrid[slot.r + i][slot.c];\n        if (!ch) { full = false; break; }\n        w += ch;\n      }\n      if (full &#038;&#038; w === slot.word) s.add(w);\n    });\n    return s;\n  }\n\n  function bindEvents() {\n    window.addEventListener('keydown', onKey);\n\n    const checkBtn = document.getElementById('wyp-btn-check');\n    if (checkBtn) checkBtn.onclick = check;\n\n    const hintBtn = document.getElementById('wyp-btn-hint');\n    if (hintBtn) hintBtn.onclick = hint;\n\n    const resetBtn = document.getElementById('wyp-btn-reset');\n    if (resetBtn) resetBtn.onclick = () => {\n      if (confirm('Zresetowa\u0107 plansz\u0119 do stanu pocz\u0105tkowego ze s\u0142owem startowym?')) load(currentIdx);\n    };\n\n    const printBtn = document.getElementById('wyp-btn-print');\n    if (printBtn) printBtn.onclick = () => window.print();\n  }\n\n  function onKey(e) {\n    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;\n    const r = selected.r;\n    const c = selected.c;\n\n    if (e.key === 'ArrowRight') { move(0, 1); e.preventDefault(); }\n    else if (e.key === 'ArrowLeft') { move(0, -1); e.preventDefault(); }\n    else if (e.key === 'ArrowDown') { move(1, 0); e.preventDefault(); }\n    else if (e.key === 'ArrowUp') { move(-1, 0); e.preventDefault(); }\n    else if (e.key === ' ' || e.key === 'Spacebar') {\n      currentDir = (currentDir === 'H' ? 'V' : 'H');\n      updateDirText();\n      drawGrid();\n      e.preventDefault();\n    } else if (e.key === 'Backspace') {\n      const st = getStarterCoords();\n      if (!st.has(`${r},${c}`)) userGrid[r][c] = '';\n      stepWord(-1);\n      drawGrid();\n      drawWords();\n      e.preventDefault();\n    } else if (e.key.length === 1) {\n      const char = e.key.toUpperCase();\n      if (\/[A-Z\u0104\u0106\u0118\u0141\u0143\u00d3\u015a\u0179\u017b]\/.test(char)) {\n        const st = getStarterCoords();\n        if (!st.has(`${r},${c}`)) userGrid[r][c] = char;\n        stepWord(1);\n        drawGrid();\n        drawWords();\n        e.preventDefault();\n      }\n    }\n  }\n\n  function move(dr, dc) {\n    let nr = selected.r + dr;\n    let nc = selected.c + dc;\n    while (nr >= 0 && nr < activeBoard.height &#038;&#038; nc >= 0 && nc < activeBoard.width) {\n      if (activeBoard.grid[nr][nc] !== ' ') {\n        selected = { r: nr, c: nc };\n        drawGrid();\n        return;\n      }\n      nr += dr;\n      nc += dc;\n    }\n  }\n\n  function stepWord(delta) {\n    if (delta > 0) {\n      if (currentDir === 'H') {\n        if (selected.c + 1 < activeBoard.width &#038;&#038; activeBoard.grid[selected.r][selected.c + 1] !== ' ') selected.c++;\n      } else {\n        if (selected.r + 1 < activeBoard.height &#038;&#038; activeBoard.grid[selected.r + 1][selected.c] !== ' ') selected.r++;\n      }\n    } else {\n      if (currentDir === 'H') {\n        if (selected.c - 1 >= 0 && activeBoard.grid[selected.r][selected.c - 1] !== ' ') selected.c--;\n      } else {\n        if (selected.r - 1 >= 0 && activeBoard.grid[selected.r - 1][selected.c] !== ' ') selected.r--;\n      }\n    }\n  }\n\n  function check() {\n    let mistakes = 0;\n    let empty = 0;\n    let ok = 0;\n\n    const cells = document.querySelectorAll('.wyp-cell:not(.blocked)');\n    cells.forEach(el => {\n      const r = parseInt(el.dataset.r);\n      const c = parseInt(el.dataset.c);\n      const exp = activeBoard.grid[r][c];\n      const act = userGrid[r][c];\n\n      el.classList.remove('correct', 'incorrect');\n      if (!act) empty++;\n      else if (act === exp) { ok++; el.classList.add('correct'); }\n      else { mistakes++; el.classList.add('incorrect'); }\n    });\n\n    if (mistakes === 0 && empty === 0) {\n      toast('\ud83c\udf89 Gratulacje! Wype\u0142nianka rozwi\u0105zana w 100% poprawnie! Wszystkie s\u0142owa idealnie pasuj\u0105!', 'success');\n    } else if (mistakes === 0) {\n      toast(`Wszystkie dot\u0105d wpisane litery (${ok}) s\u0105 poprawne. Zosta\u0142o kratek: ${empty}.`, 'info');\n    } else {\n      toast(`Znaleziono ${mistakes} b\u0142\u0119dnych liter (zaznaczone na czerwono).`, 'info');\n    }\n  }\n\n  function hint() {\n    const r = selected.r;\n    const c = selected.c;\n    if (activeBoard.grid[r][c] === ' ') return;\n    userGrid[r][c] = activeBoard.grid[r][c];\n    drawGrid();\n    drawWords();\n    toast(`Odkryto liter\u0119: \"${activeBoard.grid[r][c]}\" w wierszu ${r + 1}, kolumnie ${c + 1}`, 'info');\n  }\n\n  function toast(msg, type) {\n    const t = document.getElementById('wyp-toast');\n    if (!t) return;\n    t.innerText = msg;\n    t.className = `wyp-toast ${type}`;\n    t.style.display = 'block';\n  }\n\n  function hideToast() {\n    const t = document.getElementById('wyp-toast');\n    if (t) t.style.display = 'none';\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Wype\u0142nianka W stylu \u0142amig\u0142\u00f3wek z kultowego \u201e\u015awiata M\u0142odych\u201d | Plansza: Instrukcja: Wszystkie podane wyrazy nale\u017cy wpisa\u0107 do diagramu na podstawie liczby liter. Jedno s\u0142owo startowe zosta\u0142o ju\u017c wpisane. \ud83e\udde9 Krzy\u017c\u00f3wka Wype\u0142nianka \u015awiat M\u0142odych Wpisz podane wyrazy do diagramu na podstawie ich d\u0142ugo\u015bci. S\u0142owo startowe: Kierunek: POZIOMO \u2192 \u2713 Sprawd\u017a \ud83d\udca1 Podpowied\u017a \u21ba Wyczy\u015b\u0107 \ud83d\udda8\ufe0f Drukuj [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-821","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=821"}],"version-history":[{"count":1,"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/821\/revisions"}],"predecessor-version":[{"id":823,"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/821\/revisions\/823"}],"wp:attachment":[{"href":"https:\/\/strona-1.tail4cb56f.ts.net\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}