Daily Hard Crossword<\/title>\n\n<style>\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n min-height: 100vh;\n background: #111827;\n color: white;\n font-family: Arial, sans-serif;\n}\n\n.game {\n width: 100%;\n max-width: 1200px;\n margin: auto;\n padding: 25px;\n}\n\nh1 {\n text-align: center;\n margin: 0;\n}\n\n.subtitle {\n text-align: center;\n color: #9ca3af;\n margin: 6px 0 25px;\n}\n\n\/* =========================\n MAIN PUZZLE AREA\n========================= *\/\n\n.puzzle-area {\n width: 100%;\n display: grid;\n grid-template-columns: minmax(500px, 1fr) 340px;\n gap: 25px;\n align-items: start;\n}\n\n\/* =========================\n FULL SIZE CROSSWORD\n========================= *\/\n\n#grid {\n width: 100%;\n aspect-ratio: 1 \/ 1;\n\n display: grid;\n grid-template-columns: repeat(11, 1fr);\n grid-template-rows: repeat(11, 1fr);\n\n border: 4px solid #ffffff;\n\n background: #111827;\n}\n\n.cell {\n position: relative;\n\n width: 100%;\n height: 100%;\n\n background: white;\n\n border: 1px solid #6b7280;\n}\n\n.block {\n background: #111827;\n border-color: #111827;\n}\n\n.cell input {\n width: 100%;\n height: 100%;\n\n padding: 0;\n\n border: none;\n outline: none;\n\n background: transparent;\n\n text-align: center;\n text-transform: uppercase;\n\n font-size: clamp(\n 18px,\n 3vw,\n 34px\n );\n\n font-weight: bold;\n\n color: #111827;\n}\n\n.cell:focus-within {\n background: #bfdbfe;\n}\n\n.cell.correct {\n background: #bbf7d0;\n}\n\n.cell.wrong {\n background: #fecaca;\n}\n\n.number {\n position: absolute;\n\n top: 2px;\n left: 4px;\n\n font-size: clamp(\n 8px,\n 1vw,\n 13px\n );\n\n color: #111827;\n\n pointer-events: none;\n\n z-index: 2;\n}\n\n\/* =========================\n CLUES\n========================= *\/\n\n.clues {\n min-width: 0;\n}\n\n.clue-section {\n margin-bottom: 25px;\n}\n\n.clue-section h2 {\n margin: 0 0 10px;\n\n padding-bottom: 8px;\n\n border-bottom: 2px solid #4b5563;\n}\n\n.clue {\n padding: 8px;\n\n border-radius: 6px;\n\n cursor: pointer;\n\n line-height: 1.35;\n}\n\n.clue:hover {\n background: #374151;\n}\n\n.clue-number {\n font-weight: bold;\n margin-right: 6px;\n}\n\n\/* =========================\n BUTTONS\n========================= *\/\n\n.controls {\n text-align: center;\n margin-top: 25px;\n}\n\nbutton {\n border: none;\n\n padding: 13px 22px;\n\n margin: 5px;\n\n border-radius: 8px;\n\n font-size: 16px;\n font-weight: bold;\n\n cursor: pointer;\n}\n\n#checkBtn {\n background: #22c55e;\n color: white;\n}\n\n#newBtn {\n background: #374151;\n color: white;\n}\n\nbutton:hover {\n opacity: .85;\n}\n\n#status {\n min-height: 25px;\n\n margin-top: 10px;\n\n font-weight: bold;\n}\n\n\/* =========================\n TABLET\n========================= *\/\n\n@media (max-width: 850px) {\n\n .game {\n padding: 15px;\n }\n\n .puzzle-area {\n grid-template-columns: 1fr;\n }\n\n .clues {\n display: grid;\n\n grid-template-columns: 1fr 1fr;\n\n gap: 20px;\n }\n}\n\n\/* =========================\n PHONE\n========================= *\/\n\n@media (max-width: 600px) {\n\n .game {\n padding: 8px;\n }\n\n #grid {\n width: 100%;\n }\n\n .clues {\n display: block;\n }\n\n .clue-section {\n margin-bottom: 20px;\n }\n\n button {\n width: calc(50% - 15px);\n }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"game\">\n\n <h1>\ud83e\udde9 Daily Hard Crossword<\/h1>\n\n <div\n class=\"subtitle\"\n id=\"date\">\n <\/div>\n\n <div class=\"puzzle-area\">\n\n \n <div id=\"grid\"><\/div>\n\n <div class=\"clues\">\n\n <div class=\"clue-section\">\n\n <h2>Across<\/h2>\n\n <div id=\"across\"><\/div>\n\n <\/div>\n\n <div class=\"clue-section\">\n\n <h2>Down<\/h2>\n\n <div id=\"down\"><\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <div class=\"controls\">\n\n <button id=\"checkBtn\">\n Check Puzzle\n <\/button>\n\n <button id=\"newBtn\">\n Random Puzzle\n <\/button>\n\n <div id=\"status\"><\/div>\n\n <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =====================================================\n HARD WORD BANK\n===================================================== *\/\n\nconst WORDS = [\n\n[\"ABERRATION\",\"A departure from what is normal\"],\n[\"ABSTRUSE\",\"Difficult to understand\"],\n[\"ACRIMONY\",\"Bitter hostility\"],\n[\"ALACRITY\",\"Cheerful eagerness\"],\n[\"AMBIVALENT\",\"Having conflicting feelings\"],\n[\"ANACHRONISM\",\"Something from the wrong historical period\"],\n[\"APOCRYPHAL\",\"Of doubtful authenticity\"],\n[\"ASSIDUOUS\",\"Showing great care and persistence\"],\n[\"BELLICOSE\",\"Aggressive or warlike\"],\n[\"CACOPHONY\",\"A harsh mixture of sounds\"],\n[\"CAPRICIOUS\",\"Changing unpredictably\"],\n[\"CIRCUMSPECT\",\"Careful to avoid risk\"],\n[\"CLANDESTINE\",\"Kept secret\"],\n[\"CONUNDRUM\",\"A difficult problem\"],\n[\"COPIOUS\",\"Existing in large quantities\"],\n[\"CORROBORATE\",\"Confirm with evidence\"],\n[\"DELETERIOUS\",\"Causing harm\"],\n[\"DEMURE\",\"Reserved or modest\"],\n[\"DESULTORY\",\"Lacking a plan\"],\n[\"DIAPHANOUS\",\"Very delicate or translucent\"],\n[\"DIDACTIC\",\"Intended to teach\"],\n[\"DILATORY\",\"Designed to delay\"],\n[\"EBULLIENT\",\"Cheerful and energetic\"],\n[\"ECLECTIC\",\"Coming from many sources\"],\n[\"EFFERVESCENT\",\"Lively and enthusiastic\"],\n[\"ELUCIDATE\",\"Make something clear\"],\n[\"ENIGMA\",\"Something mysterious\"],\n[\"EPHEMERAL\",\"Lasting a very short time\"],\n[\"EQUIVOCATE\",\"Use ambiguous language\"],\n[\"ERUDITE\",\"Highly knowledgeable\"],\n[\"ESOTERIC\",\"Understood by only a small group\"],\n[\"EXACERBATE\",\"Make worse\"],\n[\"FASTIDIOUS\",\"Extremely careful\"],\n[\"GARRULOUS\",\"Excessively talkative\"],\n[\"ICONOCLAST\",\"One who challenges established beliefs\"],\n[\"IMPLACABLE\",\"Unable to be stopped\"],\n[\"INCHOATE\",\"Not fully developed\"],\n[\"INEFFABLE\",\"Too great to express in words\"],\n[\"INSOUCIANT\",\"Casually unconcerned\"],\n[\"INTRANSIGENT\",\"Unwilling to compromise\"],\n[\"IRASCIBLE\",\"Easily angered\"],\n[\"JUXTAPOSE\",\"Place side by side\"],\n[\"LACONIC\",\"Using very few words\"],\n[\"LOQUACIOUS\",\"Very talkative\"],\n[\"MAGNANIMOUS\",\"Generous toward a rival\"],\n[\"MALEVOLENT\",\"Desiring to cause harm\"],\n[\"MENDACIOUS\",\"Dishonest\"],\n[\"MELLIFLUOUS\",\"Pleasantly musical\"],\n[\"METICULOUS\",\"Extremely precise\"],\n[\"MOROSE\",\"Gloomy\"],\n[\"NEFARIOUS\",\"Wicked or criminal\"],\n[\"OBFUSCATE\",\"Make difficult to understand\"],\n[\"OBSEQUIOUS\",\"Excessively eager to please\"],\n[\"OSTENSIBLE\",\"Apparently true\"],\n[\"PARADIGM\",\"A typical model\"],\n[\"PARSIMONIOUS\",\"Very unwilling to spend money\"],\n[\"PELLUCID\",\"Extremely clear\"],\n[\"PERFUNCTORY\",\"Done with little care\"],\n[\"PERSPICACIOUS\",\"Having sharp insight\"],\n[\"PHLEGMATIC\",\"Calm and unemotional\"],\n[\"PLACATE\",\"Calm someone who is angry\"],\n[\"PREDILECTION\",\"A special preference\"],\n[\"PRESCIENT\",\"Knowing something beforehand\"],\n[\"PROCLIVITY\",\"A natural tendency\"],\n[\"PROSAIC\",\"Lacking imagination\"],\n[\"QUERULOUS\",\"Habitually complaining\"],\n[\"RECALCITRANT\",\"Resistant to authority\"],\n[\"RECONDITE\",\"Little known\"],\n[\"REDOLENT\",\"Strongly suggestive\"],\n[\"SAGACIOUS\",\"Having good judgment\"],\n[\"SALUBRIOUS\",\"Health-giving\"],\n[\"SANGUINE\",\"Optimistic\"],\n[\"SCRUPULOUS\",\"Very careful and ethical\"],\n[\"SOPORIFIC\",\"Causing sleepiness\"],\n[\"SPURIOUS\",\"False or fake\"],\n[\"STENTORIAN\",\"Extremely loud\"],\n[\"SUPERCILIOUS\",\"Behaving as though superior\"],\n[\"TACITURN\",\"Not inclined to talk\"],\n[\"TENACIOUS\",\"Persistent\"],\n[\"TENUOUS\",\"Weak or uncertain\"],\n[\"UBIQUITOUS\",\"Found everywhere\"],\n[\"UNCTUOUS\",\"Excessively flattering\"],\n[\"VACILLATE\",\"Alternate between choices\"],\n[\"VENERABLE\",\"Worthy of respect\"],\n[\"VERBOSE\",\"Using too many words\"],\n[\"VICARIOUS\",\"Experienced indirectly\"],\n[\"VITRIOLIC\",\"Bitterly critical\"],\n[\"ZEALOUS\",\"Extremely enthusiastic\"]\n\n];\n\n\n\/* =====================================================\n SEEDED RANDOM\n===================================================== *\/\n\nfunction randomGenerator(seed) {\n\n return function() {\n\n seed =\n (seed * 1664525 + 1013904223)\n % 4294967296;\n\n return seed \/ 4294967296;\n };\n}\n\n\n\/* =====================================================\n DATE SEED\n===================================================== *\/\n\nfunction getDateSeed() {\n\n const d = new Date();\n\n const text =\n d.getUTCFullYear() +\n \"-\" +\n (d.getUTCMonth() + 1) +\n \"-\" +\n d.getUTCDate();\n\n let seed = 0;\n\n for (let i = 0; i < text.length; i++) {\n\n seed =\n ((seed << 5) - seed) +\n text.charCodeAt(i);\n\n seed |= 0;\n }\n\n return Math.abs(seed);\n}\n\n\n\/* =====================================================\n DAILY WORD SELECTION\n===================================================== *\/\n\nfunction getDailyWords(seed) {\n\n const random =\n randomGenerator(seed);\n\n const words =\n [...WORDS];\n\n for (\n let i = words.length - 1;\n i > 0;\n i--\n ) {\n\n const j =\n Math.floor(\n random() * (i + 1)\n );\n\n [words[i], words[j]] =\n [words[j], words[i]];\n }\n\n return words.slice(0, 8);\n}\n\n\n\/* =====================================================\n CROSSWORD GRID\n===================================================== *\/\n\nconst SIZE = 11;\n\nfunction emptyGrid() {\n\n return Array.from(\n {length: SIZE},\n () => Array(SIZE).fill(\"#\")\n );\n}\n\n\nfunction canPlace(\n grid,\n word,\n row,\n col,\n direction\n) {\n\n for (\n let i = 0;\n i < word.length;\n i++\n ) {\n\n const r =\n row +\n (direction === \"down\"\n ? i\n : 0);\n\n const c =\n col +\n (direction === \"across\"\n ? i\n : 0);\n\n if (\n r < 0 ||\n r >= SIZE ||\n c < 0 ||\n c >= SIZE\n ) {\n return false;\n }\n\n if (\n grid[r][c] !== \"#\" &&\n grid[r][c] !== word[i]\n ) {\n return false;\n }\n }\n\n return true;\n}\n\n\nfunction placeWord(\n grid,\n word,\n row,\n col,\n direction\n) {\n\n for (\n let i = 0;\n i < word.length;\n i++\n ) {\n\n const r =\n row +\n (direction === \"down\"\n ? i\n : 0);\n\n const c =\n col +\n (direction === \"across\"\n ? i\n : 0);\n\n grid[r][c] = word[i];\n }\n}\n\n\n\/* =====================================================\n GENERATE CROSSWORD\n===================================================== *\/\n\nfunction generateCrossword(\n words,\n seed\n) {\n\n const random =\n randomGenerator(seed);\n\n const grid =\n emptyGrid();\n\n const placements = [];\n\n const sorted =\n [...words].sort(\n (a,b) =>\n b[0].length -\n a[0].length\n );\n\n const first =\n sorted[0][0];\n\n const direction =\n random() > .5\n ? \"across\"\n : \"down\";\n\n const row =\n direction === \"across\"\n ? Math.floor(SIZE \/ 2)\n : Math.floor(\n (SIZE - first.length) \/ 2\n );\n\n const col =\n direction === \"across\"\n ? Math.floor(\n (SIZE - first.length) \/ 2\n )\n : Math.floor(SIZE \/ 2);\n\n placeWord(\n grid,\n first,\n row,\n col,\n direction\n );\n\n placements.push({\n word: first,\n clue: sorted[0][1],\n row,\n col,\n direction\n });\n\n\n for (\n let w = 1;\n w < sorted.length;\n w++\n ) {\n\n const word =\n sorted[w][0];\n\n let placed = false;\n\n for (\n let r = 0;\n r < SIZE && !placed;\n r++\n ) {\n\n for (\n let c = 0;\n c < SIZE && !placed;\n c++\n ) {\n\n if (\n grid[r][c] === \"#\"\n ) continue;\n\n for (\n let i = 0;\n i < word.length;\n i++\n ) {\n\n if (\n word[i] !==\n grid[r][c]\n ) continue;\n\n const dir =\n placements.length % 2\n ? \"across\"\n : \"down\";\n\n const startRow =\n dir === \"down\"\n ? r - i\n : r;\n\n const startCol =\n dir === \"across\"\n ? c - i\n : c;\n\n if (\n canPlace(\n grid,\n word,\n startRow,\n startCol,\n dir\n )\n ) {\n\n placeWord(\n grid,\n word,\n startRow,\n startCol,\n dir\n );\n\n placements.push({\n word,\n clue: sorted[w][1],\n row: startRow,\n col: startCol,\n direction: dir\n });\n\n placed = true;\n break;\n }\n }\n }\n }\n }\n\n return {\n grid,\n placements\n };\n}\n\n\n\/* =====================================================\n START TODAY'S GAME\n===================================================== *\/\n\nlet seed =\n getDateSeed();\n\nlet words =\n getDailyWords(seed);\n\nlet crossword =\n generateCrossword(\n words,\n seed\n );\n\n\n\/* =====================================================\n CLUE NUMBERS\n===================================================== *\/\n\nfunction makeNumbers(placements) {\n\n const numbers = {};\n\n let number = 1;\n\n for (\n let r = 0;\n r < SIZE;\n r++\n ) {\n\n for (\n let c = 0;\n c < SIZE;\n c++\n ) {\n\n if (\n placements.some(\n p =>\n p.row === r &&\n p.col === c\n )\n ) {\n\n numbers[\n `${r},${c}`\n ] = number++;\n\n }\n }\n }\n\n return numbers;\n}\n\nlet numbers =\n makeNumbers(\n crossword.placements\n );\n\n\n\/* =====================================================\n DRAW GRID\n===================================================== *\/\n\nfunction drawGrid() {\n\n const grid =\n document.getElementById(\n \"grid\"\n );\n\n grid.innerHTML = \"\";\n\n for (\n let r = 0;\n r < SIZE;\n r++\n ) {\n\n for (\n let c = 0;\n c < SIZE;\n c++\n ) {\n\n const cell =\n document.createElement(\n \"div\"\n );\n\n cell.className =\n \"cell\";\n\n const letter =\n crossword.grid[r][c];\n\n if (letter === \"#\") {\n\n cell.classList.add(\n \"block\"\n );\n\n } else {\n\n const number =\n numbers[\n `${r},${c}`\n ];\n\n if (number) {\n\n const n =\n document.createElement(\n \"span\"\n );\n\n n.className =\n \"number\";\n\n n.textContent =\n number;\n\n cell.appendChild(n);\n }\n\n const input =\n document.createElement(\n \"input\"\n );\n\n input.maxLength = 1;\n\n input.dataset.row = r;\n input.dataset.col = c;\n\n input.addEventListener(\n \"input\",\n function() {\n\n this.value =\n this.value\n .replace(\n \/[^a-zA-Z]\/g,\n \"\"\n )\n .toUpperCase();\n\n cell.classList.remove(\n \"correct\",\n \"wrong\"\n );\n }\n );\n\n cell.appendChild(\n input\n );\n }\n\n grid.appendChild(\n cell\n );\n }\n }\n}\n\n\n\/* =====================================================\n DRAW CLUES\n===================================================== *\/\n\nfunction drawClues() {\n\n const across =\n document.getElementById(\n \"across\"\n );\n\n const down =\n document.getElementById(\n \"down\"\n );\n\n across.innerHTML = \"\";\n down.innerHTML = \"\";\n\n crossword.placements\n .forEach(item => {\n\n const div =\n document.createElement(\n \"div\"\n );\n\n div.className =\n \"clue\";\n\n const number =\n numbers[\n `${item.row},${item.col}`\n ];\n\n div.innerHTML =\n `<span class=\"clue-number\">\n ${number}.\n <\/span>\n ${item.clue}`;\n\n div.onclick = () => {\n\n const inputs =\n document.querySelectorAll(\n \".cell input\"\n );\n\n const index =\n item.row * SIZE +\n item.col;\n\n if (inputs[index]) {\n inputs[index].focus();\n }\n };\n\n if (\n item.direction ===\n \"across\"\n ) {\n across.appendChild(\n div\n );\n } else {\n down.appendChild(\n div\n );\n }\n });\n}\n\n\n\/* =====================================================\n CHECK\n===================================================== *\/\n\ndocument\n .getElementById(\"checkBtn\")\n .onclick = () => {\n\n const inputs =\n document.querySelectorAll(\n \".cell input\"\n );\n\n let correct = 0;\n let total = 0;\n\n inputs.forEach(input => {\n\n const r =\n Number(\n input.dataset.row\n );\n\n const c =\n Number(\n input.dataset.col\n );\n\n const answer =\n crossword.grid[r][c];\n\n const cell =\n input.parentElement;\n\n cell.classList.remove(\n \"correct\",\n \"wrong\"\n );\n\n total++;\n\n if (\n input.value.toUpperCase()\n === answer\n ) {\n\n correct++;\n\n cell.classList.add(\n \"correct\"\n );\n\n } else if (\n input.value !== \"\"\n ) {\n\n cell.classList.add(\n \"wrong\"\n );\n }\n });\n\n\n const status =\n document.getElementById(\n \"status\"\n );\n\n if (\n correct === total\n ) {\n\n status.textContent =\n \"\ud83c\udf89 You solved it!\";\n\n status.style.color =\n \"#4ade80\";\n\n } else {\n\n status.textContent =\n `${correct} \/ ${total} correct`;\n\n status.style.color =\n \"#fbbf24\";\n }\n };\n\n\n\/* =====================================================\n RANDOM PUZZLE\n===================================================== *\/\n\ndocument\n .getElementById(\"newBtn\")\n .onclick = () => {\n\n const newSeed =\n Math.floor(\n Math.random() *\n 2147483647\n );\n\n crossword =\n generateCrossword(\n getDailyWords(\n newSeed\n ),\n newSeed\n );\n\n numbers =\n makeNumbers(\n crossword.placements\n );\n\n drawGrid();\n drawClues();\n\n document.getElementById(\n \"status\"\n ).textContent = \"\";\n };\n\n\n\/* =====================================================\n DATE\n===================================================== *\/\n\ndocument.getElementById(\n \"date\"\n).textContent =\n new Date().toLocaleDateString(\n undefined,\n {\n weekday: \"long\",\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n }\n );\n\n\n\/* =====================================================\n START\n===================================================== *\/\n\ndrawGrid();\ndrawClues();\n\n<\/script>\n\n<\/body>\n<\/html>\n“`\n\nThe main change is the **responsive full-size grid**: on desktop it expands to fill the entire left side of the game, and on smaller screens it becomes full-width instead of leaving a large unused area.\n","protected":false},"excerpt":{"rendered":"<p>“`html Daily Hard Crossword \ud83e\udde9 Daily Hard Crossword Across Down Check Puzzle Random Puzzle “` The main change is the **responsive full-size grid**: on desktop it expands to fill the entire left side of the game, and on smaller screens it becomes full-width instead of leaving a large unused area.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-75","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":2,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages\/75\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages\/75\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/media?parent=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":75,"date":"2026-09-28T13:51:30","date_gmt":"2026-09-28T13:51:30","guid":{"rendered":"https:\/\/thenewsmark.org\/?page_id=75"},"modified":"2026-09-28T13:53:41","modified_gmt":"2026-09-28T13:53:41","slug":"crossword","status":"publish","type":"page","link":"https:\/\/thenewsmark.org\/index.php\/crossword\/","title":{"rendered":"Crossword"},"content":{"rendered":"\n

\n\n\n\n“`html\n\n\n\n\n\n\nDaily Hard Crossword<\/title>\n\n<style>\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n min-height: 100vh;\n background: #111827;\n color: white;\n font-family: Arial, sans-serif;\n}\n\n.game {\n width: 100%;\n max-width: 1200px;\n margin: auto;\n padding: 25px;\n}\n\nh1 {\n text-align: center;\n margin: 0;\n}\n\n.subtitle {\n text-align: center;\n color: #9ca3af;\n margin: 6px 0 25px;\n}\n\n\/* =========================\n MAIN PUZZLE AREA\n========================= *\/\n\n.puzzle-area {\n width: 100%;\n display: grid;\n grid-template-columns: minmax(500px, 1fr) 340px;\n gap: 25px;\n align-items: start;\n}\n\n\/* =========================\n FULL SIZE CROSSWORD\n========================= *\/\n\n#grid {\n width: 100%;\n aspect-ratio: 1 \/ 1;\n\n display: grid;\n grid-template-columns: repeat(11, 1fr);\n grid-template-rows: repeat(11, 1fr);\n\n border: 4px solid #ffffff;\n\n background: #111827;\n}\n\n.cell {\n position: relative;\n\n width: 100%;\n height: 100%;\n\n background: white;\n\n border: 1px solid #6b7280;\n}\n\n.block {\n background: #111827;\n border-color: #111827;\n}\n\n.cell input {\n width: 100%;\n height: 100%;\n\n padding: 0;\n\n border: none;\n outline: none;\n\n background: transparent;\n\n text-align: center;\n text-transform: uppercase;\n\n font-size: clamp(\n 18px,\n 3vw,\n 34px\n );\n\n font-weight: bold;\n\n color: #111827;\n}\n\n.cell:focus-within {\n background: #bfdbfe;\n}\n\n.cell.correct {\n background: #bbf7d0;\n}\n\n.cell.wrong {\n background: #fecaca;\n}\n\n.number {\n position: absolute;\n\n top: 2px;\n left: 4px;\n\n font-size: clamp(\n 8px,\n 1vw,\n 13px\n );\n\n color: #111827;\n\n pointer-events: none;\n\n z-index: 2;\n}\n\n\/* =========================\n CLUES\n========================= *\/\n\n.clues {\n min-width: 0;\n}\n\n.clue-section {\n margin-bottom: 25px;\n}\n\n.clue-section h2 {\n margin: 0 0 10px;\n\n padding-bottom: 8px;\n\n border-bottom: 2px solid #4b5563;\n}\n\n.clue {\n padding: 8px;\n\n border-radius: 6px;\n\n cursor: pointer;\n\n line-height: 1.35;\n}\n\n.clue:hover {\n background: #374151;\n}\n\n.clue-number {\n font-weight: bold;\n margin-right: 6px;\n}\n\n\/* =========================\n BUTTONS\n========================= *\/\n\n.controls {\n text-align: center;\n margin-top: 25px;\n}\n\nbutton {\n border: none;\n\n padding: 13px 22px;\n\n margin: 5px;\n\n border-radius: 8px;\n\n font-size: 16px;\n font-weight: bold;\n\n cursor: pointer;\n}\n\n#checkBtn {\n background: #22c55e;\n color: white;\n}\n\n#newBtn {\n background: #374151;\n color: white;\n}\n\nbutton:hover {\n opacity: .85;\n}\n\n#status {\n min-height: 25px;\n\n margin-top: 10px;\n\n font-weight: bold;\n}\n\n\/* =========================\n TABLET\n========================= *\/\n\n@media (max-width: 850px) {\n\n .game {\n padding: 15px;\n }\n\n .puzzle-area {\n grid-template-columns: 1fr;\n }\n\n .clues {\n display: grid;\n\n grid-template-columns: 1fr 1fr;\n\n gap: 20px;\n }\n}\n\n\/* =========================\n PHONE\n========================= *\/\n\n@media (max-width: 600px) {\n\n .game {\n padding: 8px;\n }\n\n #grid {\n width: 100%;\n }\n\n .clues {\n display: block;\n }\n\n .clue-section {\n margin-bottom: 20px;\n }\n\n button {\n width: calc(50% - 15px);\n }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"game\">\n\n <h1>\ud83e\udde9 Daily Hard Crossword<\/h1>\n\n <div\n class=\"subtitle\"\n id=\"date\">\n <\/div>\n\n <div class=\"puzzle-area\">\n\n \n <div id=\"grid\"><\/div>\n\n <div class=\"clues\">\n\n <div class=\"clue-section\">\n\n <h2>Across<\/h2>\n\n <div id=\"across\"><\/div>\n\n <\/div>\n\n <div class=\"clue-section\">\n\n <h2>Down<\/h2>\n\n <div id=\"down\"><\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <div class=\"controls\">\n\n <button id=\"checkBtn\">\n Check Puzzle\n <\/button>\n\n <button id=\"newBtn\">\n Random Puzzle\n <\/button>\n\n <div id=\"status\"><\/div>\n\n <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =====================================================\n HARD WORD BANK\n===================================================== *\/\n\nconst WORDS = [\n\n[\"ABERRATION\",\"A departure from what is normal\"],\n[\"ABSTRUSE\",\"Difficult to understand\"],\n[\"ACRIMONY\",\"Bitter hostility\"],\n[\"ALACRITY\",\"Cheerful eagerness\"],\n[\"AMBIVALENT\",\"Having conflicting feelings\"],\n[\"ANACHRONISM\",\"Something from the wrong historical period\"],\n[\"APOCRYPHAL\",\"Of doubtful authenticity\"],\n[\"ASSIDUOUS\",\"Showing great care and persistence\"],\n[\"BELLICOSE\",\"Aggressive or warlike\"],\n[\"CACOPHONY\",\"A harsh mixture of sounds\"],\n[\"CAPRICIOUS\",\"Changing unpredictably\"],\n[\"CIRCUMSPECT\",\"Careful to avoid risk\"],\n[\"CLANDESTINE\",\"Kept secret\"],\n[\"CONUNDRUM\",\"A difficult problem\"],\n[\"COPIOUS\",\"Existing in large quantities\"],\n[\"CORROBORATE\",\"Confirm with evidence\"],\n[\"DELETERIOUS\",\"Causing harm\"],\n[\"DEMURE\",\"Reserved or modest\"],\n[\"DESULTORY\",\"Lacking a plan\"],\n[\"DIAPHANOUS\",\"Very delicate or translucent\"],\n[\"DIDACTIC\",\"Intended to teach\"],\n[\"DILATORY\",\"Designed to delay\"],\n[\"EBULLIENT\",\"Cheerful and energetic\"],\n[\"ECLECTIC\",\"Coming from many sources\"],\n[\"EFFERVESCENT\",\"Lively and enthusiastic\"],\n[\"ELUCIDATE\",\"Make something clear\"],\n[\"ENIGMA\",\"Something mysterious\"],\n[\"EPHEMERAL\",\"Lasting a very short time\"],\n[\"EQUIVOCATE\",\"Use ambiguous language\"],\n[\"ERUDITE\",\"Highly knowledgeable\"],\n[\"ESOTERIC\",\"Understood by only a small group\"],\n[\"EXACERBATE\",\"Make worse\"],\n[\"FASTIDIOUS\",\"Extremely careful\"],\n[\"GARRULOUS\",\"Excessively talkative\"],\n[\"ICONOCLAST\",\"One who challenges established beliefs\"],\n[\"IMPLACABLE\",\"Unable to be stopped\"],\n[\"INCHOATE\",\"Not fully developed\"],\n[\"INEFFABLE\",\"Too great to express in words\"],\n[\"INSOUCIANT\",\"Casually unconcerned\"],\n[\"INTRANSIGENT\",\"Unwilling to compromise\"],\n[\"IRASCIBLE\",\"Easily angered\"],\n[\"JUXTAPOSE\",\"Place side by side\"],\n[\"LACONIC\",\"Using very few words\"],\n[\"LOQUACIOUS\",\"Very talkative\"],\n[\"MAGNANIMOUS\",\"Generous toward a rival\"],\n[\"MALEVOLENT\",\"Desiring to cause harm\"],\n[\"MENDACIOUS\",\"Dishonest\"],\n[\"MELLIFLUOUS\",\"Pleasantly musical\"],\n[\"METICULOUS\",\"Extremely precise\"],\n[\"MOROSE\",\"Gloomy\"],\n[\"NEFARIOUS\",\"Wicked or criminal\"],\n[\"OBFUSCATE\",\"Make difficult to understand\"],\n[\"OBSEQUIOUS\",\"Excessively eager to please\"],\n[\"OSTENSIBLE\",\"Apparently true\"],\n[\"PARADIGM\",\"A typical model\"],\n[\"PARSIMONIOUS\",\"Very unwilling to spend money\"],\n[\"PELLUCID\",\"Extremely clear\"],\n[\"PERFUNCTORY\",\"Done with little care\"],\n[\"PERSPICACIOUS\",\"Having sharp insight\"],\n[\"PHLEGMATIC\",\"Calm and unemotional\"],\n[\"PLACATE\",\"Calm someone who is angry\"],\n[\"PREDILECTION\",\"A special preference\"],\n[\"PRESCIENT\",\"Knowing something beforehand\"],\n[\"PROCLIVITY\",\"A natural tendency\"],\n[\"PROSAIC\",\"Lacking imagination\"],\n[\"QUERULOUS\",\"Habitually complaining\"],\n[\"RECALCITRANT\",\"Resistant to authority\"],\n[\"RECONDITE\",\"Little known\"],\n[\"REDOLENT\",\"Strongly suggestive\"],\n[\"SAGACIOUS\",\"Having good judgment\"],\n[\"SALUBRIOUS\",\"Health-giving\"],\n[\"SANGUINE\",\"Optimistic\"],\n[\"SCRUPULOUS\",\"Very careful and ethical\"],\n[\"SOPORIFIC\",\"Causing sleepiness\"],\n[\"SPURIOUS\",\"False or fake\"],\n[\"STENTORIAN\",\"Extremely loud\"],\n[\"SUPERCILIOUS\",\"Behaving as though superior\"],\n[\"TACITURN\",\"Not inclined to talk\"],\n[\"TENACIOUS\",\"Persistent\"],\n[\"TENUOUS\",\"Weak or uncertain\"],\n[\"UBIQUITOUS\",\"Found everywhere\"],\n[\"UNCTUOUS\",\"Excessively flattering\"],\n[\"VACILLATE\",\"Alternate between choices\"],\n[\"VENERABLE\",\"Worthy of respect\"],\n[\"VERBOSE\",\"Using too many words\"],\n[\"VICARIOUS\",\"Experienced indirectly\"],\n[\"VITRIOLIC\",\"Bitterly critical\"],\n[\"ZEALOUS\",\"Extremely enthusiastic\"]\n\n];\n\n\n\/* =====================================================\n SEEDED RANDOM\n===================================================== *\/\n\nfunction randomGenerator(seed) {\n\n return function() {\n\n seed =\n (seed * 1664525 + 1013904223)\n % 4294967296;\n\n return seed \/ 4294967296;\n };\n}\n\n\n\/* =====================================================\n DATE SEED\n===================================================== *\/\n\nfunction getDateSeed() {\n\n const d = new Date();\n\n const text =\n d.getUTCFullYear() +\n \"-\" +\n (d.getUTCMonth() + 1) +\n \"-\" +\n d.getUTCDate();\n\n let seed = 0;\n\n for (let i = 0; i < text.length; i++) {\n\n seed =\n ((seed << 5) - seed) +\n text.charCodeAt(i);\n\n seed |= 0;\n }\n\n return Math.abs(seed);\n}\n\n\n\/* =====================================================\n DAILY WORD SELECTION\n===================================================== *\/\n\nfunction getDailyWords(seed) {\n\n const random =\n randomGenerator(seed);\n\n const words =\n [...WORDS];\n\n for (\n let i = words.length - 1;\n i > 0;\n i--\n ) {\n\n const j =\n Math.floor(\n random() * (i + 1)\n );\n\n [words[i], words[j]] =\n [words[j], words[i]];\n }\n\n return words.slice(0, 8);\n}\n\n\n\/* =====================================================\n CROSSWORD GRID\n===================================================== *\/\n\nconst SIZE = 11;\n\nfunction emptyGrid() {\n\n return Array.from(\n {length: SIZE},\n () => Array(SIZE).fill(\"#\")\n );\n}\n\n\nfunction canPlace(\n grid,\n word,\n row,\n col,\n direction\n) {\n\n for (\n let i = 0;\n i < word.length;\n i++\n ) {\n\n const r =\n row +\n (direction === \"down\"\n ? i\n : 0);\n\n const c =\n col +\n (direction === \"across\"\n ? i\n : 0);\n\n if (\n r < 0 ||\n r >= SIZE ||\n c < 0 ||\n c >= SIZE\n ) {\n return false;\n }\n\n if (\n grid[r][c] !== \"#\" &&\n grid[r][c] !== word[i]\n ) {\n return false;\n }\n }\n\n return true;\n}\n\n\nfunction placeWord(\n grid,\n word,\n row,\n col,\n direction\n) {\n\n for (\n let i = 0;\n i < word.length;\n i++\n ) {\n\n const r =\n row +\n (direction === \"down\"\n ? i\n : 0);\n\n const c =\n col +\n (direction === \"across\"\n ? i\n : 0);\n\n grid[r][c] = word[i];\n }\n}\n\n\n\/* =====================================================\n GENERATE CROSSWORD\n===================================================== *\/\n\nfunction generateCrossword(\n words,\n seed\n) {\n\n const random =\n randomGenerator(seed);\n\n const grid =\n emptyGrid();\n\n const placements = [];\n\n const sorted =\n [...words].sort(\n (a,b) =>\n b[0].length -\n a[0].length\n );\n\n const first =\n sorted[0][0];\n\n const direction =\n random() > .5\n ? \"across\"\n : \"down\";\n\n const row =\n direction === \"across\"\n ? Math.floor(SIZE \/ 2)\n : Math.floor(\n (SIZE - first.length) \/ 2\n );\n\n const col =\n direction === \"across\"\n ? Math.floor(\n (SIZE - first.length) \/ 2\n )\n : Math.floor(SIZE \/ 2);\n\n placeWord(\n grid,\n first,\n row,\n col,\n direction\n );\n\n placements.push({\n word: first,\n clue: sorted[0][1],\n row,\n col,\n direction\n });\n\n\n for (\n let w = 1;\n w < sorted.length;\n w++\n ) {\n\n const word =\n sorted[w][0];\n\n let placed = false;\n\n for (\n let r = 0;\n r < SIZE && !placed;\n r++\n ) {\n\n for (\n let c = 0;\n c < SIZE && !placed;\n c++\n ) {\n\n if (\n grid[r][c] === \"#\"\n ) continue;\n\n for (\n let i = 0;\n i < word.length;\n i++\n ) {\n\n if (\n word[i] !==\n grid[r][c]\n ) continue;\n\n const dir =\n placements.length % 2\n ? \"across\"\n : \"down\";\n\n const startRow =\n dir === \"down\"\n ? r - i\n : r;\n\n const startCol =\n dir === \"across\"\n ? c - i\n : c;\n\n if (\n canPlace(\n grid,\n word,\n startRow,\n startCol,\n dir\n )\n ) {\n\n placeWord(\n grid,\n word,\n startRow,\n startCol,\n dir\n );\n\n placements.push({\n word,\n clue: sorted[w][1],\n row: startRow,\n col: startCol,\n direction: dir\n });\n\n placed = true;\n break;\n }\n }\n }\n }\n }\n\n return {\n grid,\n placements\n };\n}\n\n\n\/* =====================================================\n START TODAY'S GAME\n===================================================== *\/\n\nlet seed =\n getDateSeed();\n\nlet words =\n getDailyWords(seed);\n\nlet crossword =\n generateCrossword(\n words,\n seed\n );\n\n\n\/* =====================================================\n CLUE NUMBERS\n===================================================== *\/\n\nfunction makeNumbers(placements) {\n\n const numbers = {};\n\n let number = 1;\n\n for (\n let r = 0;\n r < SIZE;\n r++\n ) {\n\n for (\n let c = 0;\n c < SIZE;\n c++\n ) {\n\n if (\n placements.some(\n p =>\n p.row === r &&\n p.col === c\n )\n ) {\n\n numbers[\n `${r},${c}`\n ] = number++;\n\n }\n }\n }\n\n return numbers;\n}\n\nlet numbers =\n makeNumbers(\n crossword.placements\n );\n\n\n\/* =====================================================\n DRAW GRID\n===================================================== *\/\n\nfunction drawGrid() {\n\n const grid =\n document.getElementById(\n \"grid\"\n );\n\n grid.innerHTML = \"\";\n\n for (\n let r = 0;\n r < SIZE;\n r++\n ) {\n\n for (\n let c = 0;\n c < SIZE;\n c++\n ) {\n\n const cell =\n document.createElement(\n \"div\"\n );\n\n cell.className =\n \"cell\";\n\n const letter =\n crossword.grid[r][c];\n\n if (letter === \"#\") {\n\n cell.classList.add(\n \"block\"\n );\n\n } else {\n\n const number =\n numbers[\n `${r},${c}`\n ];\n\n if (number) {\n\n const n =\n document.createElement(\n \"span\"\n );\n\n n.className =\n \"number\";\n\n n.textContent =\n number;\n\n cell.appendChild(n);\n }\n\n const input =\n document.createElement(\n \"input\"\n );\n\n input.maxLength = 1;\n\n input.dataset.row = r;\n input.dataset.col = c;\n\n input.addEventListener(\n \"input\",\n function() {\n\n this.value =\n this.value\n .replace(\n \/[^a-zA-Z]\/g,\n \"\"\n )\n .toUpperCase();\n\n cell.classList.remove(\n \"correct\",\n \"wrong\"\n );\n }\n );\n\n cell.appendChild(\n input\n );\n }\n\n grid.appendChild(\n cell\n );\n }\n }\n}\n\n\n\/* =====================================================\n DRAW CLUES\n===================================================== *\/\n\nfunction drawClues() {\n\n const across =\n document.getElementById(\n \"across\"\n );\n\n const down =\n document.getElementById(\n \"down\"\n );\n\n across.innerHTML = \"\";\n down.innerHTML = \"\";\n\n crossword.placements\n .forEach(item => {\n\n const div =\n document.createElement(\n \"div\"\n );\n\n div.className =\n \"clue\";\n\n const number =\n numbers[\n `${item.row},${item.col}`\n ];\n\n div.innerHTML =\n `<span class=\"clue-number\">\n ${number}.\n <\/span>\n ${item.clue}`;\n\n div.onclick = () => {\n\n const inputs =\n document.querySelectorAll(\n \".cell input\"\n );\n\n const index =\n item.row * SIZE +\n item.col;\n\n if (inputs[index]) {\n inputs[index].focus();\n }\n };\n\n if (\n item.direction ===\n \"across\"\n ) {\n across.appendChild(\n div\n );\n } else {\n down.appendChild(\n div\n );\n }\n });\n}\n\n\n\/* =====================================================\n CHECK\n===================================================== *\/\n\ndocument\n .getElementById(\"checkBtn\")\n .onclick = () => {\n\n const inputs =\n document.querySelectorAll(\n \".cell input\"\n );\n\n let correct = 0;\n let total = 0;\n\n inputs.forEach(input => {\n\n const r =\n Number(\n input.dataset.row\n );\n\n const c =\n Number(\n input.dataset.col\n );\n\n const answer =\n crossword.grid[r][c];\n\n const cell =\n input.parentElement;\n\n cell.classList.remove(\n \"correct\",\n \"wrong\"\n );\n\n total++;\n\n if (\n input.value.toUpperCase()\n === answer\n ) {\n\n correct++;\n\n cell.classList.add(\n \"correct\"\n );\n\n } else if (\n input.value !== \"\"\n ) {\n\n cell.classList.add(\n \"wrong\"\n );\n }\n });\n\n\n const status =\n document.getElementById(\n \"status\"\n );\n\n if (\n correct === total\n ) {\n\n status.textContent =\n \"\ud83c\udf89 You solved it!\";\n\n status.style.color =\n \"#4ade80\";\n\n } else {\n\n status.textContent =\n `${correct} \/ ${total} correct`;\n\n status.style.color =\n \"#fbbf24\";\n }\n };\n\n\n\/* =====================================================\n RANDOM PUZZLE\n===================================================== *\/\n\ndocument\n .getElementById(\"newBtn\")\n .onclick = () => {\n\n const newSeed =\n Math.floor(\n Math.random() *\n 2147483647\n );\n\n crossword =\n generateCrossword(\n getDailyWords(\n newSeed\n ),\n newSeed\n );\n\n numbers =\n makeNumbers(\n crossword.placements\n );\n\n drawGrid();\n drawClues();\n\n document.getElementById(\n \"status\"\n ).textContent = \"\";\n };\n\n\n\/* =====================================================\n DATE\n===================================================== *\/\n\ndocument.getElementById(\n \"date\"\n).textContent =\n new Date().toLocaleDateString(\n undefined,\n {\n weekday: \"long\",\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n }\n );\n\n\n\/* =====================================================\n START\n===================================================== *\/\n\ndrawGrid();\ndrawClues();\n\n<\/script>\n\n<\/body>\n<\/html>\n“`\n\nThe main change is the **responsive full-size grid**: on desktop it expands to fill the entire left side of the game, and on smaller screens it becomes full-width instead of leaving a large unused area.\n","protected":false},"excerpt":{"rendered":"<p>“`html Daily Hard Crossword \ud83e\udde9 Daily Hard Crossword Across Down Check Puzzle Random Puzzle “` The main change is the **responsive full-size grid**: on desktop it expands to fill the entire left side of the game, and on smaller screens it becomes full-width instead of leaving a large unused area.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-75","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":2,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages\/75\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/pages\/75\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/thenewsmark.org\/index.php\/wp-json\/wp\/v2\/media?parent=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}