TripleLog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
#win { --height: calc(9 * var(--block) + 2px * 9 + 10px + 2px * 2); --width: calc(9 * var(--block) + 2px * 9 + 10px + 2px * 2); } #win > div { width: calc(11 * var(--width)); } #n1:checked ~ #top > span:nth-child(1) { background: #AFA; } #n2:checked ~ #top > span:nth-child(2) { background: #AFA; } #n3:checked ~ #top > span:nth-child(3) { background: #AFA; } #n4:checked ~ #top > span:nth-child(4) { background: #AFA; } #n5:checked ~ #top > span:nth-child(5) { background: #AFA; } #n6:checked ~ #top > span:nth-child(6) { background: #AFA; } #n7:checked ~ #top > span:nth-child(7) { background: #AFA; } #n8:checked ~ #top > span:nth-child(8) { background: #AFA; } #n9:checked ~ #top > span:nth-child(9) { background: #AFA; } .cell { display: inline-block; position: absolute; width: var(--block); height: var(--block); border: 1px solid black; text-align: center; line-height: var(--block); } #n1:checked ~ #game .n-1 { z-index: 10; } #n2:checked ~ #game .n-2 { z-index: 10; } #n3:checked ~ #game .n-3 { z-index: 10; } #n4:checked ~ #game .n-4 { z-index: 10; } #n5:checked ~ #game .n-5 { z-index: 10; } #n6:checked ~ #game .n-6 { z-index: 10; } #n7:checked ~ #game .n-7 { z-index: 10; } #n8:checked ~ #game .n-8 { z-index: 10; } #n9:checked ~ #game .n-9 { z-index: 10; } #radio-1-1-2:checked ~ #game #cell-1-1-2::before { content: "🐩"; } #radio-1-1-2:checked ~ #game #cell-10-1-2 { z-index: -1; } #radio-1-2-9:checked ~ #game #cell-1-2-9::before { content: "🐩"; } #radio-1-2-9:checked ~ #game #cell-10-2-9 { z-index: -1; } #radio-1-3-4:checked ~ #game #cell-1-3-4::before { content: "🐩"; } #radio-1-3-4:checked ~ #game #cell-10-3-4 { z-index: -1; } #radio-1-4-7:checked ~ #game #cell-1-4-7::before { content: "🐩"; } #radio-1-4-7:checked ~ #game #cell-10-4-7 { z-index: -1; } #radio-1-5-5:checked ~ #game #cell-1-5-5::before { content: "🐩"; } #radio-1-5-5:checked ~ #game #cell-10-5-5 { z-index: -1; } #radio-1-6-1:checked ~ #game #cell-1-6-1::before { content: "🐩"; } #radio-1-6-1:checked ~ #game #cell-10-6-1 { z-index: -1; } #radio-1-7-3:checked ~ #game #cell-1-7-3::before { content: "🐩"; } #radio-1-7-3:checked ~ #game #cell-10-7-3 { z-index: -1; } #radio-1-8-8:checked ~ #game #cell-1-8-8::before { content: "🐩"; } #radio-1-8-8:checked ~ #game #cell-10-8-8 { z-index: -1; } #radio-1-9-6:checked ~ #game #cell-1-9-6::before { content: "🐩"; } #radio-1-9-6:checked ~ #game #cell-10-9-6 { z-index: -1; } #radio-2-1-1:checked ~ #game #cell-2-1-1::before { content: "🦊"; } #radio-2-1-1:checked ~ #game #cell-10-1-1 { z-index: -1; } #radio-2-2-8:checked ~ #game #cell-2-2-8::before { content: "🦊"; } #radio-2-2-8:checked ~ #game #cell-10-2-8 { z-index: -1; } #radio-2-3-6:checked ~ #game #cell-2-3-6::before { content: "🦊"; } #radio-2-3-6:checked ~ #game #cell-10-3-6 { z-index: -1; } #radio-2-4-4:checked ~ #game #cell-2-4-4::before { content: "🦊"; } #radio-2-4-4:checked ~ #game #cell-10-4-4 { z-index: -1; } #radio-2-5-2:checked ~ #game #cell-2-5-2::before { content: "🦊"; } #radio-2-5-2:checked ~ #game #cell-10-5-2 { z-index: -1; } #radio-2-6-9:checked ~ #game #cell-2-6-9::before { content: "🦊"; } #radio-2-6-9:checked ~ #game #cell-10-6-9 { z-index: -1; } #radio-2-7-5:checked ~ #game #cell-2-7-5::before { content: "🦊"; } #radio-2-7-5:checked ~ #game #cell-10-7-5 { z-index: -1; } #radio-2-8-3:checked ~ #game #cell-2-8-3::before { content: "🦊"; } #radio-2-8-3:checked ~ #game #cell-10-8-3 { z-index: -1; } #radio-2-9-7:checked ~ #game #cell-2-9-7::before { content: "🦊"; } #radio-2-9-7:checked ~ #game #cell-10-9-7 { z-index: -1; } #radio-3-1-5:checked ~ #game #cell-3-1-5::before { content: "🦬"; } #radio-3-1-5:checked ~ #game #cell-10-1-5 { z-index: -1; } #radio-3-2-7:checked ~ #game #cell-3-2-7::before { content: "🦬"; } #radio-3-2-7:checked ~ #game #cell-10-2-7 { z-index: -1; } #radio-3-3-2:checked ~ #game #cell-3-3-2::before { content: "🦬"; } #radio-3-3-2:checked ~ #game #cell-10-3-2 { z-index: -1; } #radio-3-4-3:checked ~ #game #cell-3-4-3::before { content: "🦬"; } #radio-3-4-3:checked ~ #game #cell-10-4-3 { z-index: -1; } #radio-3-5-9:checked ~ #game #cell-3-5-9::before { content: "🦬"; } #radio-3-5-9:checked ~ #game #cell-10-5-9 { z-index: -1; } #radio-3-6-4:checked ~ #game #cell-3-6-4::before { content: "🦬"; } #radio-3-6-4:checked ~ #game #cell-10-6-4 { z-index: -1; } #radio-3-7-6:checked ~ #game #cell-3-7-6::before { content: "🦬"; } #radio-3-7-6:checked ~ #game #cell-10-7-6 { z-index: -1; } #radio-3-8-1:checked ~ #game #cell-3-8-1::before { content: "🦬"; } #radio-3-8-1:checked ~ #game #cell-10-8-1 { z-index: -1; } #radio-3-9-8:checked ~ #game #cell-3-9-8::before { content: "🦬"; } #radio-3-9-8:checked ~ #game #cell-10-9-8 { z-index: -1; } #radio-4-1-7:checked ~ #game #cell-4-1-7::before { content: "🐷"; } #radio-4-1-7:checked ~ #game #cell-10-1-7 { z-index: -1; } #radio-4-2-1:checked ~ #game #cell-4-2-1::before { content: "🐷"; } #radio-4-2-1:checked ~ #game #cell-10-2-1 { z-index: -1; } #radio-4-3-5:checked ~ #game #cell-4-3-5::before { content: "🐷"; } #radio-4-3-5:checked ~ #game #cell-10-3-5 { z-index: -1; } #radio-4-4-9:checked ~ #game #cell-4-4-9::before { content: "🐷"; } #radio-4-4-9:checked ~ #game #cell-10-4-9 { z-index: -1; } #radio-4-5-4:checked ~ #game #cell-4-5-4::before { content: "🐷"; } #radio-4-5-4:checked ~ #game #cell-10-5-4 { z-index: -1; } #radio-4-6-2:checked ~ #game #cell-4-6-2::before { content: "🐷"; } #radio-4-6-2:checked ~ #game #cell-10-6-2 { z-index: -1; } #radio-4-7-8:checked ~ #game #cell-4-7-8::before { content: "🐷"; } #radio-4-7-8:checked ~ #game #cell-10-7-8 { z-index: -1; } #radio-4-8-6:checked ~ #game #cell-4-8-6::before { content: "🐷"; } #radio-4-8-6:checked ~ #game #cell-10-8-6 { z-index: -1; } #radio-4-9-3:checked ~ #game #cell-4-9-3::before { content: "🐷"; } #radio-4-9-3:checked ~ #game #cell-10-9-3 { z-index: -1; } #radio-5-1-6:checked ~ #game #cell-5-1-6::before { content: "🦩"; } #radio-5-1-6:checked ~ #game #cell-10-1-6 { z-index: -1; } #radio-5-2-2:checked ~ #game #cell-5-2-2::before { content: "🦩"; } #radio-5-2-2:checked ~ #game #cell-10-2-2 { z-index: -1; } #radio-5-3-7:checked ~ #game #cell-5-3-7::before { content: "🦩"; } #radio-5-3-7:checked ~ #game #cell-10-3-7 { z-index: -1; } #radio-5-4-8:checked ~ #game #cell-5-4-8::before { content: "🦩"; } #radio-5-4-8:checked ~ #game #cell-10-4-8 { z-index: -1; } #radio-5-5-3:checked ~ #game #cell-5-5-3::before { content: "🦩"; } #radio-5-5-3:checked ~ #game #cell-10-5-3 { z-index: -1; } #radio-5-6-5:checked ~ #game #cell-5-6-5::before { content: "🦩"; } #radio-5-6-5:checked ~ #game #cell-10-6-5 { z-index: -1; } #radio-5-7-1:checked ~ #game #cell-5-7-1::before { content: "🦩"; } #radio-5-7-1:checked ~ #game #cell-10-7-1 { z-index: -1; } #radio-5-8-4:checked ~ #game #cell-5-8-4::before { content: "🦩"; } #radio-5-8-4:checked ~ #game #cell-10-8-4 { z-index: -1; } #radio-5-9-9:checked ~ #game #cell-5-9-9::before { content: "🦩"; } #radio-5-9-9:checked ~ #game #cell-10-9-9 { z-index: -1; } #radio-6-1-4:checked ~ #game #cell-6-1-4::before { content: "🐊"; } #radio-6-1-4:checked ~ #game #cell-10-1-4 { z-index: -1; } #radio-6-2-3:checked ~ #game #cell-6-2-3::before { content: "🐊"; } #radio-6-2-3:checked ~ #game #cell-10-2-3 { z-index: -1; } #radio-6-3-9:checked ~ #game #cell-6-3-9::before { content: "🐊"; } #radio-6-3-9:checked ~ #game #cell-10-3-9 { z-index: -1; } #radio-6-4-1:checked ~ #game #cell-6-4-1::before { content: "🐊"; } #radio-6-4-1:checked ~ #game #cell-10-4-1 { z-index: -1; } #radio-6-5-6:checked ~ #game #cell-6-5-6::before { content: "🐊"; } #radio-6-5-6:checked ~ #game #cell-10-5-6 { z-index: -1; } #radio-6-6-8:checked ~ #game #cell-6-6-8::before { content: "🐊"; } #radio-6-6-8:checked ~ #game #cell-10-6-8 { z-index: -1; } #radio-6-7-7:checked ~ #game #cell-6-7-7::before { content: "🐊"; } #radio-6-7-7:checked ~ #game #cell-10-7-7 { z-index: -1; } #radio-6-8-2:checked ~ #game #cell-6-8-2::before { content: "🐊"; } #radio-6-8-2:checked ~ #game #cell-10-8-2 { z-index: -1; } #radio-6-9-5:checked ~ #game #cell-6-9-5::before { content: "🐊"; } #radio-6-9-5:checked ~ #game #cell-10-9-5 { z-index: -1; } #radio-7-1-8:checked ~ #game #cell-7-1-8::before { content: "🦖"; } #radio-7-1-8:checked ~ #game #cell-10-1-8 { z-index: -1; } #radio-7-2-5:checked ~ #game #cell-7-2-5::before { content: "🦖"; } #radio-7-2-5:checked ~ #game #cell-10-2-5 { z-index: -1; } #radio-7-3-3:checked ~ #game #cell-7-3-3::before { content: "🦖"; } #radio-7-3-3:checked ~ #game #cell-10-3-3 { z-index: -1; } #radio-7-4-6:checked ~ #game #cell-7-4-6::before { content: "🦖"; } #radio-7-4-6:checked ~ #game #cell-10-4-6 { z-index: -1; } #radio-7-5-1:checked ~ #game #cell-7-5-1::before { content: "🦖"; } #radio-7-5-1:checked ~ #game #cell-10-5-1 { z-index: -1; } #radio-7-6-7:checked ~ #game #cell-7-6-7::before { content: "🦖"; } #radio-7-6-7:checked ~ #game #cell-10-6-7 { z-index: -1; } #radio-7-7-2:checked ~ #game #cell-7-7-2::before { content: "🦖"; } #radio-7-7-2:checked ~ #game #cell-10-7-2 { z-index: -1; } #radio-7-8-9:checked ~ #game #cell-7-8-9::before { content: "🦖"; } #radio-7-8-9:checked ~ #game #cell-10-8-9 { z-index: -1; } #radio-7-9-4:checked ~ #game #cell-7-9-4::before { content: "🦖"; } #radio-7-9-4:checked ~ #game #cell-10-9-4 { z-index: -1; } #radio-8-1-3:checked ~ #game #cell-8-1-3::before { content: "🦋"; } #radio-8-1-3:checked ~ #game #cell-10-1-3 { z-index: -1; } #radio-8-2-4:checked ~ #game #cell-8-2-4::before { content: "🦋"; } #radio-8-2-4:checked ~ #game #cell-10-2-4 { z-index: -1; } #radio-8-3-8:checked ~ #game #cell-8-3-8::before { content: "🦋"; } #radio-8-3-8:checked ~ #game #cell-10-3-8 { z-index: -1; } #radio-8-4-2:checked ~ #game #cell-8-4-2::before { content: "🦋"; } #radio-8-4-2:checked ~ #game #cell-10-4-2 { z-index: -1; } #radio-8-5-7:checked ~ #game #cell-8-5-7::before { content: "🦋"; } #radio-8-5-7:checked ~ #game #cell-10-5-7 { z-index: -1; } #radio-8-6-6:checked ~ #game #cell-8-6-6::before { content: "🦋"; } #radio-8-6-6:checked ~ #game #cell-10-6-6 { z-index: -1; } #radio-8-7-9:checked ~ #game #cell-8-7-9::before { content: "🦋"; } #radio-8-7-9:checked ~ #game #cell-10-7-9 { z-index: -1; } #radio-8-8-5:checked ~ #game #cell-8-8-5::before { content: "🦋"; } #radio-8-8-5:checked ~ #game #cell-10-8-5 { z-index: -1; } #radio-8-9-1:checked ~ #game #cell-8-9-1::before { content: "🦋"; } #radio-8-9-1:checked ~ #game #cell-10-9-1 { z-index: -1; } #radio-9-1-9:checked ~ #game #cell-9-1-9::before { content: "🐡"; } #radio-9-1-9:checked ~ #game #cell-10-1-9 { z-index: -1; } #radio-9-2-6:checked ~ #game #cell-9-2-6::before { content: "🐡"; } #radio-9-2-6:checked ~ #game #cell-10-2-6 { z-index: -1; } #radio-9-3-1:checked ~ #game #cell-9-3-1::before { content: "🐡"; } #radio-9-3-1:checked ~ #game #cell-10-3-1 { z-index: -1; } #radio-9-4-5:checked ~ #game #cell-9-4-5::before { content: "🐡"; } #radio-9-4-5:checked ~ #game #cell-10-4-5 { z-index: -1; } #radio-9-5-8:checked ~ #game #cell-9-5-8::before { content: "🐡"; } #radio-9-5-8:checked ~ #game #cell-10-5-8 { z-index: -1; } #radio-9-6-3:checked ~ #game #cell-9-6-3::before { content: "🐡"; } #radio-9-6-3:checked ~ #game #cell-10-6-3 { z-index: -1; } #radio-9-7-4:checked ~ #game #cell-9-7-4::before { content: "🐡"; } #radio-9-7-4:checked ~ #game #cell-10-7-4 { z-index: -1; } #radio-9-8-7:checked ~ #game #cell-9-8-7::before { content: "🐡"; } #radio-9-8-7:checked ~ #game #cell-10-8-7 { z-index: -1; } #radio-9-9-2:checked ~ #game #cell-9-9-2::before { content: "🐡"; } #radio-9-9-2:checked ~ #game #cell-10-9-2 { z-index: -1; } .col-1 { left: calc(0 * var(--block) + 0px); border-left: 6px solid black; } .col-2 { left: calc(1 * var(--block) + 7px); } .col-3 { left: calc(2 * var(--block) + 9px); border-right: 2px solid black; } .col-4 { left: calc(3 * var(--block) + 12px); border-left: 2px solid black; } .col-5 { left: calc(4 * var(--block) + 15px); } .col-6 { left: calc(5 * var(--block) + 17px); border-right: 2px solid black; } .col-7 { left: calc(6 * var(--block) + 20px); border-left: 2px solid black; } .col-8 { left: calc(7 * var(--block) + 23px); } .col-9 { left: calc(8 * var(--block) + 25px); border-right: 6px solid black; } .row-1 { top: calc(0 * var(--block) + 0px); border-top: 6px solid black; } .row-2 { top: calc(1 * var(--block) + 7px); } .row-3 { top: calc(2 * var(--block) + 9px); border-bottom: 2px solid black; } .row-4 { top: calc(3 * var(--block) + 12px); border-top: 2px solid black; } .row-5 { top: calc(4 * var(--block) + 15px); } .row-6 { top: calc(5 * var(--block) + 17px); border-bottom: 2px solid black; } .row-7 { top: calc(6 * var(--block) + 20px); border-top: 2px solid black; } .row-8 { top: calc(7 * var(--block) + 23px); } .row-9 { top: calc(8 * var(--block) + 25px); border-bottom: 6px solid black; } .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ #n1 ~ #top > span:nth-child(1) { pointer-events: none; background: #DDD; } .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ #n2 ~ #top > span:nth-child(2) { pointer-events: none; background: #DDD; } .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ #n3 ~ #top > span:nth-child(3) { pointer-events: none; background: #DDD; } .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ #n4 ~ #top > span:nth-child(4) { pointer-events: none; background: #DDD; } .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ #n5 ~ #top > span:nth-child(5) { pointer-events: none; background: #DDD; } .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ #n6 ~ #top > span:nth-child(6) { pointer-events: none; background: #DDD; } .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ #n7 ~ #top > span:nth-child(7) { pointer-events: none; background: #DDD; } .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ #n8 ~ #top > span:nth-child(8) { pointer-events: none; background: #DDD; } .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ #n9 ~ #top > span:nth-child(9) { pointer-events: none; background: #DDD; } .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ .bn-1:checked ~ #win > div > span:nth-child(1) { display: none; } .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ .bn-2:checked ~ #win > div > span:nth-child(2) { display: none; } .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ .bn-3:checked ~ #win > div > span:nth-child(3) { display: none; } .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ .bn-4:checked ~ #win > div > span:nth-child(4) { display: none; } .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ .bn-5:checked ~ #win > div > span:nth-child(5) { display: none; } .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ .bn-6:checked ~ #win > div > span:nth-child(6) { display: none; } .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ .bn-7:checked ~ #win > div > span:nth-child(7) { display: none; } .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ .bn-8:checked ~ #win > div > span:nth-child(8) { display: none; } .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ .bn-9:checked ~ #win > div > span:nth-child(9) { display: none; } .bn-10:checked ~ .bn-10:checked ~ .bn-10:checked ~ #win > div > span:Not(:last-child) { display: none; } .puz { font-weight: bold; z-index: 5; }</style>
</head>
<body>
<div id="puzzle">
<input type="radio" class="bn-1 br-1 bc-2 bb-1" name="radio-1-2" id="radio-1-1-2" />
<input type="radio" class="bn-1 br-2 bc-9 bb-3" name="radio-2-9" id="radio-1-2-9" />
<input type="radio" class="bn-1 br-3 bc-4 bb-2" name="radio-3-4" id="radio-1-3-4" />
<input type="radio" class="bn-1 br-4 bc-7 bb-6" name="radio-4-7" id="radio-1-4-7" checked />
<input type="radio" class="bn-1 br-5 bc-5 bb-5" name="radio-5-5" id="radio-1-5-5" />
<input type="radio" class="bn-1 br-6 bc-1 bb-4" name="radio-6-1" id="radio-1-6-1" checked />
<input type="radio" class="bn-1 br-7 bc-3 bb-7" name="radio-7-3" id="radio-1-7-3" />
<input type="radio" class="bn-1 br-8 bc-8 bb-9" name="radio-8-8" id="radio-1-8-8" checked />
<input type="radio" class="bn-1 br-9 bc-6 bb-8" name="radio-9-6" id="radio-1-9-6" />
<input type="radio" class="bn-2 br-1 bc-1 bb-1" name="radio-1-1" id="radio-2-1-1" />
<input type="radio" class="bn-2 br-2 bc-8 bb-3" name="radio-2-8" id="radio-2-2-8" />
<input type="radio" class="bn-2 br-3 bc-6 bb-2" name="radio-3-6" id="radio-2-3-6" />
<input type="radio" class="bn-2 br-4 bc-4 bb-5" name="radio-4-4" id="radio-2-4-4" />
<input type="radio" class="bn-2 br-5 bc-2 bb-4" name="radio-5-2" id="radio-2-5-2" />
<input type="radio" class="bn-2 br-6 bc-9 bb-6" name="radio-6-9" id="radio-2-6-9" />
<input type="radio" class="bn-2 br-7 bc-5 bb-8" name="radio-7-5" id="radio-2-7-5" checked />
<input type="radio" class="bn-2 br-8 bc-3 bb-7" name="radio-8-3" id="radio-2-8-3" />
<input type="radio" class="bn-2 br-9 bc-7 bb-9" name="radio-9-7" id="radio-2-9-7" checked />
<input type="radio" class="bn-3 br-1 bc-5 bb-2" name="radio-1-5" id="radio-3-1-5" checked />
<input type="radio" class="bn-3 br-2 bc-7 bb-3" name="radio-2-7" id="radio-3-2-7" />
<input type="radio" class="bn-3 br-3 bc-2 bb-1" name="radio-3-2" id="radio-3-3-2" />
<input type="radio" class="bn-3 br-4 bc-3 bb-4" name="radio-4-3" id="radio-3-4-3" checked />
<input type="radio" class="bn-3 br-5 bc-9 bb-6" name="radio-5-9" id="radio-3-5-9" />
<input type="radio" class="bn-3 br-6 bc-4 bb-5" name="radio-6-4" id="radio-3-6-4" checked />
<input type="radio" class="bn-3 br-7 bc-6 bb-8" name="radio-7-6" id="radio-3-7-6" />
<input type="radio" class="bn-3 br-8 bc-1 bb-7" name="radio-8-1" id="radio-3-8-1" />
<input type="radio" class="bn-3 br-9 bc-8 bb-9" name="radio-9-8" id="radio-3-9-8" />
<input type="radio" class="bn-4 br-1 bc-7 bb-3" name="radio-1-7" id="radio-4-1-7" checked />
<input type="radio" class="bn-4 br-2 bc-1 bb-1" name="radio-2-1" id="radio-4-2-1" checked />
<input type="radio" class="bn-4 br-3 bc-5 bb-2" name="radio-3-5" id="radio-4-3-5" checked />
<input type="radio" class="bn-4 br-4 bc-9 bb-6" name="radio-4-9" id="radio-4-4-9" checked />
<input type="radio" class="bn-4 br-5 bc-4 bb-5" name="radio-5-4" id="radio-4-5-4" />
<input type="radio" class="bn-4 br-6 bc-2 bb-4" name="radio-6-2" id="radio-4-6-2" />
<input type="radio" class="bn-4 br-7 bc-8 bb-9" name="radio-7-8" id="radio-4-7-8" />
<input type="radio" class="bn-4 br-8 bc-6 bb-8" name="radio-8-6" id="radio-4-8-6" checked />
<input type="radio" class="bn-4 br-9 bc-3 bb-7" name="radio-9-3" id="radio-4-9-3" checked />
<input type="radio" class="bn-5 br-1 bc-6 bb-2" name="radio-1-6" id="radio-5-1-6" />
<input type="radio" class="bn-5 br-2 bc-2 bb-1" name="radio-2-2" id="radio-5-2-2" checked />
<input type="radio" class="bn-5 br-3 bc-7 bb-3" name="radio-3-7" id="radio-5-3-7" />
<input type="radio" class="bn-5 br-4 bc-8 bb-6" name="radio-4-8" id="radio-5-4-8" />
<input type="radio" class="bn-5 br-5 bc-3 bb-4" name="radio-5-3" id="radio-5-5-3" />
<input type="radio" class="bn-5 br-6 bc-5 bb-5" name="radio-6-5" id="radio-5-6-5" />
<input type="radio" class="bn-5 br-7 bc-1 bb-7" name="radio-7-1" id="radio-5-7-1" />
<input type="radio" class="bn-5 br-8 bc-4 bb-8" name="radio-8-4" id="radio-5-8-4" />
<input type="radio" class="bn-5 br-9 bc-9 bb-9" name="radio-9-9" id="radio-5-9-9" />
<input type="radio" class="bn-6 br-1 bc-4 bb-2" name="radio-1-4" id="radio-6-1-4" />
<input type="radio" class="bn-6 br-2 bc-3 bb-1" name="radio-2-3" id="radio-6-2-3" checked />
<input type="radio" class="bn-6 br-3 bc-9 bb-3" name="radio-3-9" id="radio-6-3-9" />
<input type="radio" class="bn-6 br-4 bc-1 bb-4" name="radio-4-1" id="radio-6-4-1" />
<input type="radio" class="bn-6 br-5 bc-6 bb-5" name="radio-5-6" id="radio-6-5-6" />
<input type="radio" class="bn-6 br-6 bc-8 bb-6" name="radio-6-8" id="radio-6-6-8" />
<input type="radio" class="bn-6 br-7 bc-7 bb-9" name="radio-7-7" id="radio-6-7-7" checked />
<input type="radio" class="bn-6 br-8 bc-2 bb-7" name="radio-8-2" id="radio-6-8-2" />
<input type="radio" class="bn-6 br-9 bc-5 bb-8" name="radio-9-5" id="radio-6-9-5" checked />
<input type="radio" class="bn-7 br-1 bc-8 bb-3" name="radio-1-8" id="radio-7-1-8" checked />
<input type="radio" class="bn-7 br-2 bc-5 bb-2" name="radio-2-5" id="radio-7-2-5" />
<input type="radio" class="bn-7 br-3 bc-3 bb-1" name="radio-3-3" id="radio-7-3-3" checked />
<input type="radio" class="bn-7 br-4 bc-6 bb-5" name="radio-4-6" id="radio-7-4-6" checked />
<input type="radio" class="bn-7 br-5 bc-1 bb-4" name="radio-5-1" id="radio-7-5-1" />
<input type="radio" class="bn-7 br-6 bc-7 bb-6" name="radio-6-7" id="radio-7-6-7" checked />
<input type="radio" class="bn-7 br-7 bc-2 bb-7" name="radio-7-2" id="radio-7-7-2" />
<input type="radio" class="bn-7 br-8 bc-9 bb-9" name="radio-8-9" id="radio-7-8-9" checked />
<input type="radio" class="bn-7 br-9 bc-4 bb-8" name="radio-9-4" id="radio-7-9-4" />
<input type="radio" class="bn-8 br-1 bc-3 bb-1" name="radio-1-3" id="radio-8-1-3" checked />
<input type="radio" class="bn-8 br-2 bc-4 bb-2" name="radio-2-4" id="radio-8-2-4" checked />
<input type="radio" class="bn-8 br-3 bc-8 bb-3" name="radio-3-8" id="radio-8-3-8" />
<input type="radio" class="bn-8 br-4 bc-2 bb-4" name="radio-4-2" id="radio-8-4-2" />
<input type="radio" class="bn-8 br-5 bc-7 bb-6" name="radio-5-7" id="radio-8-5-7" />
<input type="radio" class="bn-8 br-6 bc-6 bb-5" name="radio-6-6" id="radio-8-6-6" />
<input type="radio" class="bn-8 br-7 bc-9 bb-9" name="radio-7-9" id="radio-8-7-9" />
<input type="radio" class="bn-8 br-8 bc-5 bb-8" name="radio-8-5" id="radio-8-8-5" />
<input type="radio" class="bn-8 br-9 bc-1 bb-7" name="radio-9-1" id="radio-8-9-1" checked />
<input type="radio" class="bn-9 br-1 bc-9 bb-3" name="radio-1-9" id="radio-9-1-9" checked />
<input type="radio" class="bn-9 br-2 bc-6 bb-2" name="radio-2-6" id="radio-9-2-6" />
<input type="radio" class="bn-9 br-3 bc-1 bb-1" name="radio-3-1" id="radio-9-3-1" />
<input type="radio" class="bn-9 br-4 bc-5 bb-5" name="radio-4-5" id="radio-9-4-5" />
<input type="radio" class="bn-9 br-5 bc-8 bb-6" name="radio-5-8" id="radio-9-5-8" />
<input type="radio" class="bn-9 br-6 bc-3 bb-4" name="radio-6-3" id="radio-9-6-3" checked />
<input type="radio" class="bn-9 br-7 bc-4 bb-8" name="radio-7-4" id="radio-9-7-4" />
<input type="radio" class="bn-9 br-8 bc-7 bb-9" name="radio-8-7" id="radio-9-8-7" checked />
<input type="radio" class="bn-9 br-9 bc-2 bb-7" name="radio-9-2" id="radio-9-9-2" checked />
<input type="radio" class="bn-10 br-1 bc-1 bb-1" name="radio-1-1" id="radio-10-1-1" />
<input type="radio" class="bn-10 br-1 bc-2 bb-1" name="radio-1-2" id="radio-10-1-2" />
<input type="radio" class="bn-10 br-1 bc-4 bb-2" name="radio-1-4" id="radio-10-1-4" />
<input type="radio" class="bn-10 br-1 bc-6 bb-2" name="radio-1-6" id="radio-10-1-6" />
<input type="radio" class="bn-10 br-2 bc-5 bb-2" name="radio-2-5" id="radio-10-2-5" />
<input type="radio" class="bn-10 br-2 bc-6 bb-2" name="radio-2-6" id="radio-10-2-6" />
<input type="radio" class="bn-10 br-2 bc-7 bb-3" name="radio-2-7" id="radio-10-2-7" />
<input type="radio" class="bn-10 br-2 bc-8 bb-3" name="radio-2-8" id="radio-10-2-8" />
<input type="radio" class="bn-10 br-2 bc-9 bb-3" name="radio-2-9" id="radio-10-2-9" />
<input type="radio" class="bn-10 br-3 bc-1 bb-1" name="radio-3-1" id="radio-10-3-1" />
<input type="radio" class="bn-10 br-3 bc-2 bb-1" name="radio-3-2" id="radio-10-3-2" />
<input type="radio" class="bn-10 br-3 bc-4 bb-2" name="radio-3-4" id="radio-10-3-4" />
<input type="radio" class="bn-10 br-3 bc-6 bb-2" name="radio-3-6" id="radio-10-3-6" />
<input type="radio" class="bn-10 br-3 bc-7 bb-3" name="radio-3-7" id="radio-10-3-7" />
<input type="radio" class="bn-10 br-3 bc-8 bb-3" name="radio-3-8" id="radio-10-3-8" />
<input type="radio" class="bn-10 br-3 bc-9 bb-3" name="radio-3-9" id="radio-10-3-9" />
<input type="radio" class="bn-10 br-4 bc-1 bb-4" name="radio-4-1" id="radio-10-4-1" />
<input type="radio" class="bn-10 br-4 bc-2 bb-4" name="radio-4-2" id="radio-10-4-2" />
<input type="radio" class="bn-10 br-4 bc-4 bb-5" name="radio-4-4" id="radio-10-4-4" />
<input type="radio" class="bn-10 br-4 bc-5 bb-5" name="radio-4-5" id="radio-10-4-5" />
<input type="radio" class="bn-10 br-4 bc-8 bb-6" name="radio-4-8" id="radio-10-4-8" />
<input type="radio" class="bn-10 br-5 bc-1 bb-4" name="radio-5-1" id="radio-10-5-1" />
<input type="radio" class="bn-10 br-5 bc-2 bb-4" name="radio-5-2" id="radio-10-5-2" />
<input type="radio" class="bn-10 br-5 bc-3 bb-4" name="radio-5-3" id="radio-10-5-3" />
<input type="radio" class="bn-10 br-5 bc-4 bb-5" name="radio-5-4" id="radio-10-5-4" />
<input type="radio" class="bn-10 br-5 bc-5 bb-5" name="radio-5-5" id="radio-10-5-5" />
<input type="radio" class="bn-10 br-5 bc-6 bb-5" name="radio-5-6" id="radio-10-5-6" />
<input type="radio" class="bn-10 br-5 bc-7 bb-6" name="radio-5-7" id="radio-10-5-7" />
<input type="radio" class="bn-10 br-5 bc-8 bb-6" name="radio-5-8" id="radio-10-5-8" />
<input type="radio" class="bn-10 br-5 bc-9 bb-6" name="radio-5-9" id="radio-10-5-9" />
<input type="radio" class="bn-10 br-6 bc-2 bb-4" name="radio-6-2" id="radio-10-6-2" />
<input type="radio" class="bn-10 br-6 bc-5 bb-5" name="radio-6-5" id="radio-10-6-5" />
<input type="radio" class="bn-10 br-6 bc-6 bb-5" name="radio-6-6" id="radio-10-6-6" />
<input type="radio" class="bn-10 br-6 bc-8 bb-6" name="radio-6-8" id="radio-10-6-8" />
<input type="radio" class="bn-10 br-6 bc-9 bb-6" name="radio-6-9" id="radio-10-6-9" />
<input type="radio" class="bn-10 br-7 bc-1 bb-7" name="radio-7-1" id="radio-10-7-1" />
<input type="radio" class="bn-10 br-7 bc-2 bb-7" name="radio-7-2" id="radio-10-7-2" />
<input type="radio" class="bn-10 br-7 bc-3 bb-7" name="radio-7-3" id="radio-10-7-3" />
<input type="radio" class="bn-10 br-7 bc-4 bb-8" name="radio-7-4" id="radio-10-7-4" />
<input type="radio" class="bn-10 br-7 bc-6 bb-8" name="radio-7-6" id="radio-10-7-6" />
<input type="radio" class="bn-10 br-7 bc-8 bb-9" name="radio-7-8" id="radio-10-7-8" />
<input type="radio" class="bn-10 br-7 bc-9 bb-9" name="radio-7-9" id="radio-10-7-9" />
<input type="radio" class="bn-10 br-8 bc-1 bb-7" name="radio-8-1" id="radio-10-8-1" />
<input type="radio" class="bn-10 br-8 bc-2 bb-7" name="radio-8-2" id="radio-10-8-2" />
<input type="radio" class="bn-10 br-8 bc-3 bb-7" name="radio-8-3" id="radio-10-8-3" />
<input type="radio" class="bn-10 br-8 bc-4 bb-8" name="radio-8-4" id="radio-10-8-4" />
<input type="radio" class="bn-10 br-8 bc-5 bb-8" name="radio-8-5" id="radio-10-8-5" />
<input type="radio" class="bn-10 br-9 bc-4 bb-8" name="radio-9-4" id="radio-10-9-4" />
<input type="radio" class="bn-10 br-9 bc-6 bb-8" name="radio-9-6" id="radio-10-9-6" />
<input type="radio" class="bn-10 br-9 bc-8 bb-9" name="radio-9-8" id="radio-10-9-8" />
<input type="radio" class="bn-10 br-9 bc-9 bb-9" name="radio-9-9" id="radio-10-9-9" />
<input type="radio" name="number" id="n1" checked />
<input type="radio" name="number" id="n2" />
<input type="radio" name="number" id="n3" />
<input type="radio" name="number" id="n4" />
<input type="radio" name="number" id="n5" />
<input type="radio" name="number" id="n6" />
<input type="radio" name="number" id="n7" />
<input type="radio" name="number" id="n8" />
<input type="radio" name="number" id="n9" />
<div id="top">
<span><label for="n1">🐩</label></span>
<span><label for="n2">🦊</label></span>
<span><label for="n3">🦬</label></span>
<span><label for="n4">🐷</label></span>
<span><label for="n5">🦩</label></span>
<span><label for="n6">🐊</label></span>
<span><label for="n7">🦖</label></span>
<span><label for="n8">🦋</label></span>
<span><label for="n9">🐡</label></span>
</div>
<div id="game">
<label id="cell-1-1-2" class="cell row-1 col-2 blk-1 n-1 " for="radio-1-1-2"></label>
<label id="cell-1-2-9" class="cell row-2 col-9 blk-3 n-1 " for="radio-1-2-9"></label>
<label id="cell-1-3-4" class="cell row-3 col-4 blk-2 n-1 " for="radio-1-3-4"></label>
<label id="cell-1-4-7" class="cell row-4 col-7 blk-6 n-1 puz" for="radio-1-4-7"></label>
<label id="cell-1-5-5" class="cell row-5 col-5 blk-5 n-1 " for="radio-1-5-5"></label>
<label id="cell-1-6-1" class="cell row-6 col-1 blk-4 n-1 puz" for="radio-1-6-1"></label>
<label id="cell-1-7-3" class="cell row-7 col-3 blk-7 n-1 " for="radio-1-7-3"></label>
<label id="cell-1-8-8" class="cell row-8 col-8 blk-9 n-1 puz" for="radio-1-8-8"></label>
<label id="cell-1-9-6" class="cell row-9 col-6 blk-8 n-1 " for="radio-1-9-6"></label>
<label id="cell-2-1-1" class="cell row-1 col-1 blk-1 n-2 " for="radio-2-1-1"></label>
<label id="cell-2-2-8" class="cell row-2 col-8 blk-3 n-2 " for="radio-2-2-8"></label>
<label id="cell-2-3-6" class="cell row-3 col-6 blk-2 n-2 " for="radio-2-3-6"></label>
<label id="cell-2-4-4" class="cell row-4 col-4 blk-5 n-2 " for="radio-2-4-4"></label>
<label id="cell-2-5-2" class="cell row-5 col-2 blk-4 n-2 " for="radio-2-5-2"></label>
<label id="cell-2-6-9" class="cell row-6 col-9 blk-6 n-2 " for="radio-2-6-9"></label>
<label id="cell-2-7-5" class="cell row-7 col-5 blk-8 n-2 puz" for="radio-2-7-5"></label>
<label id="cell-2-8-3" class="cell row-8 col-3 blk-7 n-2 " for="radio-2-8-3"></label>
<label id="cell-2-9-7" class="cell row-9 col-7 blk-9 n-2 puz" for="radio-2-9-7"></label>
<label id="cell-3-1-5" class="cell row-1 col-5 blk-2 n-3 puz" for="radio-3-1-5"></label>
<label id="cell-3-2-7" class="cell row-2 col-7 blk-3 n-3 " for="radio-3-2-7"></label>
<label id="cell-3-3-2" class="cell row-3 col-2 blk-1 n-3 " for="radio-3-3-2"></label>
<label id="cell-3-4-3" class="cell row-4 col-3 blk-4 n-3 puz" for="radio-3-4-3"></label>
<label id="cell-3-5-9" class="cell row-5 col-9 blk-6 n-3 " for="radio-3-5-9"></label>
<label id="cell-3-6-4" class="cell row-6 col-4 blk-5 n-3 puz" for="radio-3-6-4"></label>
<label id="cell-3-7-6" class="cell row-7 col-6 blk-8 n-3 " for="radio-3-7-6"></label>
<label id="cell-3-8-1" class="cell row-8 col-1 blk-7 n-3 " for="radio-3-8-1"></label>
<label id="cell-3-9-8" class="cell row-9 col-8 blk-9 n-3 " for="radio-3-9-8"></label>
<label id="cell-4-1-7" class="cell row-1 col-7 blk-3 n-4 puz" for="radio-4-1-7"></label>
<label id="cell-4-2-1" class="cell row-2 col-1 blk-1 n-4 puz" for="radio-4-2-1"></label>
<label id="cell-4-3-5" class="cell row-3 col-5 blk-2 n-4 puz" for="radio-4-3-5"></label>
<label id="cell-4-4-9" class="cell row-4 col-9 blk-6 n-4 puz" for="radio-4-4-9"></label>
<label id="cell-4-5-4" class="cell row-5 col-4 blk-5 n-4 " for="radio-4-5-4"></label>
<label id="cell-4-6-2" class="cell row-6 col-2 blk-4 n-4 " for="radio-4-6-2"></label>
<label id="cell-4-7-8" class="cell row-7 col-8 blk-9 n-4 " for="radio-4-7-8"></label>
<label id="cell-4-8-6" class="cell row-8 col-6 blk-8 n-4 puz" for="radio-4-8-6"></label>
<label id="cell-4-9-3" class="cell row-9 col-3 blk-7 n-4 puz" for="radio-4-9-3"></label>
<label id="cell-5-1-6" class="cell row-1 col-6 blk-2 n-5 " for="radio-5-1-6"></label>
<label id="cell-5-2-2" class="cell row-2 col-2 blk-1 n-5 puz" for="radio-5-2-2"></label>
<label id="cell-5-3-7" class="cell row-3 col-7 blk-3 n-5 " for="radio-5-3-7"></label>
<label id="cell-5-4-8" class="cell row-4 col-8 blk-6 n-5 " for="radio-5-4-8"></label>
<label id="cell-5-5-3" class="cell row-5 col-3 blk-4 n-5 " for="radio-5-5-3"></label>
<label id="cell-5-6-5" class="cell row-6 col-5 blk-5 n-5 " for="radio-5-6-5"></label>
<label id="cell-5-7-1" class="cell row-7 col-1 blk-7 n-5 " for="radio-5-7-1"></label>
<label id="cell-5-8-4" class="cell row-8 col-4 blk-8 n-5 " for="radio-5-8-4"></label>
<label id="cell-5-9-9" class="cell row-9 col-9 blk-9 n-5 " for="radio-5-9-9"></label>
<label id="cell-6-1-4" class="cell row-1 col-4 blk-2 n-6 " for="radio-6-1-4"></label>
<label id="cell-6-2-3" class="cell row-2 col-3 blk-1 n-6 puz" for="radio-6-2-3"></label>
<label id="cell-6-3-9" class="cell row-3 col-9 blk-3 n-6 " for="radio-6-3-9"></label>
<label id="cell-6-4-1" class="cell row-4 col-1 blk-4 n-6 " for="radio-6-4-1"></label>
<label id="cell-6-5-6" class="cell row-5 col-6 blk-5 n-6 " for="radio-6-5-6"></label>
<label id="cell-6-6-8" class="cell row-6 col-8 blk-6 n-6 " for="radio-6-6-8"></label>
<label id="cell-6-7-7" class="cell row-7 col-7 blk-9 n-6 puz" for="radio-6-7-7"></label>
<label id="cell-6-8-2" class="cell row-8 col-2 blk-7 n-6 " for="radio-6-8-2"></label>
<label id="cell-6-9-5" class="cell row-9 col-5 blk-8 n-6 puz" for="radio-6-9-5"></label>
<label id="cell-7-1-8" class="cell row-1 col-8 blk-3 n-7 puz" for="radio-7-1-8"></label>
<label id="cell-7-2-5" class="cell row-2 col-5 blk-2 n-7 " for="radio-7-2-5"></label>
<label id="cell-7-3-3" class="cell row-3 col-3 blk-1 n-7 puz" for="radio-7-3-3"></label>
<label id="cell-7-4-6" class="cell row-4 col-6 blk-5 n-7 puz" for="radio-7-4-6"></label>
<label id="cell-7-5-1" class="cell row-5 col-1 blk-4 n-7 " for="radio-7-5-1"></label>
<label id="cell-7-6-7" class="cell row-6 col-7 blk-6 n-7 puz" for="radio-7-6-7"></label>
<label id="cell-7-7-2" class="cell row-7 col-2 blk-7 n-7 " for="radio-7-7-2"></label>
<label id="cell-7-8-9" class="cell row-8 col-9 blk-9 n-7 puz" for="radio-7-8-9"></label>
<label id="cell-7-9-4" class="cell row-9 col-4 blk-8 n-7 " for="radio-7-9-4"></label>
<label id="cell-8-1-3" class="cell row-1 col-3 blk-1 n-8 puz" for="radio-8-1-3"></label>
<label id="cell-8-2-4" class="cell row-2 col-4 blk-2 n-8 puz" for="radio-8-2-4"></label>
<label id="cell-8-3-8" class="cell row-3 col-8 blk-3 n-8 " for="radio-8-3-8"></label>
<label id="cell-8-4-2" class="cell row-4 col-2 blk-4 n-8 " for="radio-8-4-2"></label>
<label id="cell-8-5-7" class="cell row-5 col-7 blk-6 n-8 " for="radio-8-5-7"></label>
<label id="cell-8-6-6" class="cell row-6 col-6 blk-5 n-8 " for="radio-8-6-6"></label>
<label id="cell-8-7-9" class="cell row-7 col-9 blk-9 n-8 " for="radio-8-7-9"></label>
<label id="cell-8-8-5" class="cell row-8 col-5 blk-8 n-8 " for="radio-8-8-5"></label>
<label id="cell-8-9-1" class="cell row-9 col-1 blk-7 n-8 puz" for="radio-8-9-1"></label>
<label id="cell-9-1-9" class="cell row-1 col-9 blk-3 n-9 puz" for="radio-9-1-9"></label>
<label id="cell-9-2-6" class="cell row-2 col-6 blk-2 n-9 " for="radio-9-2-6"></label>
<label id="cell-9-3-1" class="cell row-3 col-1 blk-1 n-9 " for="radio-9-3-1"></label>
<label id="cell-9-4-5" class="cell row-4 col-5 blk-5 n-9 " for="radio-9-4-5"></label>
<label id="cell-9-5-8" class="cell row-5 col-8 blk-6 n-9 " for="radio-9-5-8"></label>
<label id="cell-9-6-3" class="cell row-6 col-3 blk-4 n-9 puz" for="radio-9-6-3"></label>
<label id="cell-9-7-4" class="cell row-7 col-4 blk-8 n-9 " for="radio-9-7-4"></label>
<label id="cell-9-8-7" class="cell row-8 col-7 blk-9 n-9 puz" for="radio-9-8-7"></label>
<label id="cell-9-9-2" class="cell row-9 col-2 blk-7 n-9 puz" for="radio-9-9-2"></label>
<label id="cell-10-1-1" class="cell row-1 col-1 blk-1 n-10 " for="radio-10-1-1"></label>
<label id="cell-10-1-2" class="cell row-1 col-2 blk-1 n-10 " for="radio-10-1-2"></label>
<label id="cell-10-1-4" class="cell row-1 col-4 blk-2 n-10 " for="radio-10-1-4"></label>
<label id="cell-10-1-6" class="cell row-1 col-6 blk-2 n-10 " for="radio-10-1-6"></label>
<label id="cell-10-2-5" class="cell row-2 col-5 blk-2 n-10 " for="radio-10-2-5"></label>
<label id="cell-10-2-6" class="cell row-2 col-6 blk-2 n-10 " for="radio-10-2-6"></label>
<label id="cell-10-2-7" class="cell row-2 col-7 blk-3 n-10 " for="radio-10-2-7"></label>
<label id="cell-10-2-8" class="cell row-2 col-8 blk-3 n-10 " for="radio-10-2-8"></label>
<label id="cell-10-2-9" class="cell row-2 col-9 blk-3 n-10 " for="radio-10-2-9"></label>
<label id="cell-10-3-1" class="cell row-3 col-1 blk-1 n-10 " for="radio-10-3-1"></label>
<label id="cell-10-3-2" class="cell row-3 col-2 blk-1 n-10 " for="radio-10-3-2"></label>
<label id="cell-10-3-4" class="cell row-3 col-4 blk-2 n-10 " for="radio-10-3-4"></label>
<label id="cell-10-3-6" class="cell row-3 col-6 blk-2 n-10 " for="radio-10-3-6"></label>
<label id="cell-10-3-7" class="cell row-3 col-7 blk-3 n-10 " for="radio-10-3-7"></label>
<label id="cell-10-3-8" class="cell row-3 col-8 blk-3 n-10 " for="radio-10-3-8"></label>
<label id="cell-10-3-9" class="cell row-3 col-9 blk-3 n-10 " for="radio-10-3-9"></label>
<label id="cell-10-4-1" class="cell row-4 col-1 blk-4 n-10 " for="radio-10-4-1"></label>
<label id="cell-10-4-2" class="cell row-4 col-2 blk-4 n-10 " for="radio-10-4-2"></label>
<label id="cell-10-4-4" class="cell row-4 col-4 blk-5 n-10 " for="radio-10-4-4"></label>
<label id="cell-10-4-5" class="cell row-4 col-5 blk-5 n-10 " for="radio-10-4-5"></label>
<label id="cell-10-4-8" class="cell row-4 col-8 blk-6 n-10 " for="radio-10-4-8"></label>
<label id="cell-10-5-1" class="cell row-5 col-1 blk-4 n-10 " for="radio-10-5-1"></label>
<label id="cell-10-5-2" class="cell row-5 col-2 blk-4 n-10 " for="radio-10-5-2"></label>
<label id="cell-10-5-3" class="cell row-5 col-3 blk-4 n-10 " for="radio-10-5-3"></label>
<label id="cell-10-5-4" class="cell row-5 col-4 blk-5 n-10 " for="radio-10-5-4"></label>
<label id="cell-10-5-5" class="cell row-5 col-5 blk-5 n-10 " for="radio-10-5-5"></label>
<label id="cell-10-5-6" class="cell row-5 col-6 blk-5 n-10 " for="radio-10-5-6"></label>
<label id="cell-10-5-7" class="cell row-5 col-7 blk-6 n-10 " for="radio-10-5-7"></label>
<label id="cell-10-5-8" class="cell row-5 col-8 blk-6 n-10 " for="radio-10-5-8"></label>
<label id="cell-10-5-9" class="cell row-5 col-9 blk-6 n-10 " for="radio-10-5-9"></label>
<label id="cell-10-6-2" class="cell row-6 col-2 blk-4 n-10 " for="radio-10-6-2"></label>
<label id="cell-10-6-5" class="cell row-6 col-5 blk-5 n-10 " for="radio-10-6-5"></label>
<label id="cell-10-6-6" class="cell row-6 col-6 blk-5 n-10 " for="radio-10-6-6"></label>
<label id="cell-10-6-8" class="cell row-6 col-8 blk-6 n-10 " for="radio-10-6-8"></label>
<label id="cell-10-6-9" class="cell row-6 col-9 blk-6 n-10 " for="radio-10-6-9"></label>
<label id="cell-10-7-1" class="cell row-7 col-1 blk-7 n-10 " for="radio-10-7-1"></label>
<label id="cell-10-7-2" class="cell row-7 col-2 blk-7 n-10 " for="radio-10-7-2"></label>
<label id="cell-10-7-3" class="cell row-7 col-3 blk-7 n-10 " for="radio-10-7-3"></label>
<label id="cell-10-7-4" class="cell row-7 col-4 blk-8 n-10 " for="radio-10-7-4"></label>
<label id="cell-10-7-6" class="cell row-7 col-6 blk-8 n-10 " for="radio-10-7-6"></label>
<label id="cell-10-7-8" class="cell row-7 col-8 blk-9 n-10 " for="radio-10-7-8"></label>
<label id="cell-10-7-9" class="cell row-7 col-9 blk-9 n-10 " for="radio-10-7-9"></label>
<label id="cell-10-8-1" class="cell row-8 col-1 blk-7 n-10 " for="radio-10-8-1"></label>
<label id="cell-10-8-2" class="cell row-8 col-2 blk-7 n-10 " for="radio-10-8-2"></label>
<label id="cell-10-8-3" class="cell row-8 col-3 blk-7 n-10 " for="radio-10-8-3"></label>
<label id="cell-10-8-4" class="cell row-8 col-4 blk-8 n-10 " for="radio-10-8-4"></label>
<label id="cell-10-8-5" class="cell row-8 col-5 blk-8 n-10 " for="radio-10-8-5"></label>
<label id="cell-10-9-4" class="cell row-9 col-4 blk-8 n-10 " for="radio-10-9-4"></label>
<label id="cell-10-9-6" class="cell row-9 col-6 blk-8 n-10 " for="radio-10-9-6"></label>
<label id="cell-10-9-8" class="cell row-9 col-8 blk-9 n-10 " for="radio-10-9-8"></label>
<label id="cell-10-9-9" class="cell row-9 col-9 blk-9 n-10 " for="radio-10-9-9"></label>
</div>
<div id="win">
<div>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span>
You solved the puzzle!</span><span>
Too many wrong guesses!</span>
</div>
</div>
</div>
</body>
</html>const fs = require('fs');
const nunjucks = require('nunjucks');
const prettify = require('html-prettify');
var emojis = ["❤️","🙂","🐈","🐕","🍕","🔥","🏈","⛄","🚀"];
var food = ["🍇","🍉","🍑","🥨","🍕","🌮","🍪","🍿","🌭"];
var flags = ["🇲🇽","🇨🇦","🇳🇮","🇵🇦","🇨🇼","🇹🇼","🇯🇵","🇦🇺","🇮🇹"];
var animals = ["🐩","🦊","🦬","🐷","🦩","🐊","🦖","🦋","🐡"];
var halloween = ["🎃","👻","🦇","⚰️","💀","🧙","🍭","🍫","😱"];
var digits = ["1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G"];
var numberMap = {};
for (var i=0;i<16;i++){
numberMap[digits[i]]=i+1;
}
var rawSolvedPuzzle = "..8.3.4794568.......7.4......3..71.4.........1.93..7......2.6.......4917894.6.2..,218635479456879321937142586683297154725416893149358762571923648362584917894761235,";
var rawPuzzle = rawSolvedPuzzle.split(",")[0];
var solvedPuzzle = rawSolvedPuzzle.split(",")[1];
var x = 3;
var y = 3;
console.log(x,y);
var puzzle = {cells: {},ignores:{},x:x,y:y,label:animals};
for (var i=0;i<rawPuzzle.length;i++){
if (rawPuzzle.at(i) != "."){
var inti = numberMap[rawPuzzle.at(i)];
var ii = inti * x * x * y * y;
ii += (Math.floor(i/(x * y))+1) * x * y;
ii += ((i%(x * y))+1);
puzzle.cells[ii]=true;
for (var iii=1;iii<x * y + 2;iii++){
var inti = numberMap[rawPuzzle.at(i)];
if (iii == inti ){continue;}
var ii = iii * x * x * y * y;
ii += (Math.floor(i/(x * y))+1) * x * y;
ii += ((i%(x * y))+1);
puzzle.ignores[ii]=true;
}
}
for (var iii=1;iii<x * y + 1;iii++){
var inti = numberMap[solvedPuzzle.at(i)];
if (iii == inti ){continue;}
var ii = iii * x * x * y * y;
ii += (Math.floor(i/(x * y))+1) * x * y;
ii += ((i%(x * y))+1);
puzzle.ignores[ii]=true;
}
}
console.log(puzzle);
var html = nunjucks.render('template.html', puzzle);
html = prettify(html);
fs.writeFileSync('index.html',html);
#puzzle {
position: relative;
display: block;
--block: 3rem;
height: calc(9 * var(--block));
}
#puzzle input {
display: none;
}
#top {
position: relative;
display: block;
top: 1rem;
left: 1rem;
height: var(--block);
}
#top > span {
display: inline-block;
height: var(--block);
width: var(--block);
border: 1px solid black;
}
#puzzle label {
cursor: pointer;
font-size: calc(3 * var(--block) / 5);
}
#top > span > label {
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
line-height: var(--block);
}
#game {
position: relative;
left: 1rem;
top: calc(var(--block) + 0.5rem);
}
#win {
position: absolute;
left: 1rem;
top: calc(var(--block) * 2 + 0.5rem);
height: var(--height);
width: var(--width);
padding: 0;
overflow: hidden;
z-index: 30;
pointer-events: none;
}
#win > div {
height: var(--height);
padding: 0;
}
#win > div > span {
display: inline-block;
background: transparent;
height: var(--height);
width: var(--width);
}
#win > div > span:last-child {
background: rgba(255,50,50,0.4);
text-align: center;
font-size: 2rem;
line-height: 3rem;
box-sizing: border-box;
padding: 1rem;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 1),2px -2px 3px rgba(255, 255, 255, 1),-2px 2px 3px rgba(255, 255, 255, 1),-2px -2px 3px rgba(255, 255, 255, 1),1px 1px 1px rgba(255, 255, 255, 1),1px -1px 1px rgba(255, 255, 255, 1),-1px 1px 1px rgba(255, 255, 255, 1),-1px -1px 1px rgba(255, 255, 255, 1),4px 4px 4px rgba(255, 255, 255, 1),4px -4px 4px rgba(255, 255, 255, 1),-4px 4px 4px rgba(255, 255, 255, 1),-4px -4px 4px rgba(255, 255, 255, 1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
#win {
--height: calc({{x * y}} * var(--block) + 2px * {{x * y}} + 10px + 2px * {{ y - 1 }});
--width: calc({{x * y}} * var(--block) + 2px * {{x * y}} + 10px + 2px * {{ x - 1 }});
}
#win > div {
width: calc({{x * y + 2}} * var(--width));
}
{% for i in range(1,x * y + 1) %}
#n{{i}}:checked ~ #top > span:nth-child({{i}}) {
background: #AFA;
}
{% endfor %}
.cell {
display: inline-block;
position: absolute;
width: var(--block);
height: var(--block);
border: 1px solid black;
text-align: center;
line-height: var(--block);
}
{% for i in range(1,x * y + 1) %}
#n{{i}}:checked ~ #game .n-{{i}} {
z-index: 10;
}
{% endfor %}
{% for i in range(1,x * y + 1) %}
{% for r in range(1,x * y + 1) %}
{% for c in range(1,x * y + 1) %}
{% if ignores[i * x * x * y * y + r * x * y + c] %}{% else %}
#radio-{{i}}-{{r}}-{{c}}:checked ~ #game #cell-{{i}}-{{r}}-{{c}}::before {
content: "{{ label[i - 1] }}";
}
#radio-{{i}}-{{r}}-{{c}}:checked ~ #game #cell-{{x * y + 1}}-{{r}}-{{c}} {
z-index: -1;
}
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
{% set border = 0 %}
{% set i = 1 %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-left: 6px solid black;
}
{% set border = border + 7 %}
{% set i = i + 1 %}
{% for ii in range(2,y) %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
}
{% set border = border + 2 %}
{% set i = i + 1 %}
{% endfor %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-right: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% for iii in range(2,x) %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-left: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% for ii in range(2,y) %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
}
{% set border = border + 2 %}
{% set i = i + 1 %}
{% endfor %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-right: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% endfor %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-left: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% for ii in range(2,y) %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
}
{% set border = border + 2 %}
{% set i = i + 1 %}
{% endfor %}
.col-{{i}} {
left: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-right: 6px solid black;
}
{% set border = 0 %}
{% set i = 1 %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-top: 6px solid black;
}
{% set border = border + 7 %}
{% set i = i + 1 %}
{% for ii in range(2,x) %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
}
{% set border = border + 2 %}
{% set i = i + 1 %}
{% endfor %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-bottom: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% for iii in range(2,y) %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-top: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% for ii in range(2,x) %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
}
{% set border = border + 2 %}
{% set i = i + 1 %}
{% endfor %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-bottom: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% endfor %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-top: 2px solid black;
}
{% set border = border + 3 %}
{% set i = i + 1 %}
{% for ii in range(2,x) %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
}
{% set border = border + 2 %}
{% set i = i + 1 %}
{% endfor %}
.row-{{i}} {
top: calc({{ i - 1 }} * var(--block) + {{border}}px);
border-bottom: 6px solid black;
}
{% for i in range(1,x * y + 1) %}
{% for ii in range(1,x * y + 1) %}.bn-{{i}}:checked ~ {% endfor %}#n{{i}} ~ #top > span:nth-child({{i}}) {
pointer-events: none;
background: #DDD;
}
{% endfor %}
{% for i in range(1,x * y + 1) %}
{% for ii in range(1,x * y + 1) %}.bn-{{i}}:checked ~ {% endfor %}#win > div > span:nth-child({{i}}) {
display: none;
}
{% endfor %}
{% for i in range(x * y + 1,x * y + 2) %}
{% for ii in range(1, 4) %}.bn-{{i}}:checked ~ {% endfor %}#win > div > span:Not(:last-child) {
display: none;
}
{% endfor %}
.puz {
font-weight: bold;
z-index: 5;
}
</style>
</head>
<body>
<div id="puzzle">
{% for i in range(1,x * y + 2) %}
{% for r in range(1,x * y + 1) %}
{% set b = (r - 1 - ((r - 1) % x)) + 1 %}
{% for c in range(1,x * y + 1) %}
{% if c % y == 1 and c > 1 %}{% set b = b + 1 %}{% endif %}
{% if ignores[ i * x * x * y * y + r * x * y + c] %}{% else %}
<input type="radio" class="bn-{{i}} br-{{r}} bc-{{c}} bb-{{b}}" name="radio-{{r}}-{{c}}" id="radio-{{ i }}-{{ r }}-{{ c }}" {% if cells[ i * x * x * y * y + r * x * y + c] %}checked{% endif %} />
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
{% for i in range(1,x * y + 1) %}
<input type="radio" name="number" id="n{{i}}" {% if i == 1 %}checked{% endif %}/>
{% endfor %}
<div id="top">
{% for i in range(1,x * y + 1) %}
<span><label for="n{{i}}">{{ label[i - 1] }}</label></span>
{% endfor %}
</div>
<div id="game">
{% for i in range(1,x * y + 2) %}
{% for r in range(1,x * y + 1) %}
{% set b = (r - 1 - ((r - 1) % x)) + 1 %}
{% for c in range(1,x * y + 1) %}
{% if c % y == 1 and c > 1 %}{% set b = b + 1 %}{% endif %}
{% if ignores[ i * x * x * y * y + r * x * y + c] %}{% else %}
<label id="cell-{{ i }}-{{ r }}-{{ c }}" class="cell row-{{ r }} col-{{c}} blk-{{b}} n-{{i}} {% if cells[ i * x * x * y * y + r * x * y + c] %}puz{% endif %}" for="radio-{{ i }}-{{ r }}-{{ c }}"></label>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</div>
<div id="win">
<div>
{% for i in range(1,x * y + 1) %}<span></span>{% endfor %}<span>
You solved the puzzle!
</span><span>
Too many wrong guesses!
</span>
</div>
</div>
</div>
</body>
</html>Create a sudoku game that is just one HTML/CSS file.
To view this on TripleLog, click here.
The index.html file is a generated file, so don't change it (any changes will be overwritten when you run script.js). Modify the template.html file.
A lot of CSS to run the game is included in the generated HTML file. Modify the style.css file to change the styling.
The script.js file generates the static file. You will need the nunjucks module and then just run node script.js to generate the index.html file.
The generated puzzles only include buttons for the correct number in each cell, making the game much smaller/faster. However, it does prevent accidental errors so the game is a bit different. If the user makes three wrong guesses, a message will appear over the board.
You do need to provide an unsolved puzzle and the solved puzzle. By default the format is one line of the form unsolved,solved.