Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <input type="checkbox" id="gfxmenu" />
<input type="radio" name="gfx" id="good" checked />
<input type="radio" name="gfx" id="poor" />
<x id="graphics">
  <label class="gfx" for="gfxmenu">Graphics Quality</label>
  <label class="gfx" for="good">Very Pretty</label>
  <label class="gfx" for="poor">Quite Pretty</label>
</x>

<sky><time>
    <sun></sun>
  </time></sky>
<stars><i></i></stars>

<sunset></sunset>
<colour>

  <input type="radio" name="r23" id="cb23" class="hs house row4 col1" />
  <input type="radio" name="r23" id="cb23s" class="hs shed row4 col1" />
  <input type="radio" name="r24" id="cb24" class="hs house row4 col2" />
  <input type="radio" name="r24" id="cb24s" class="hs shed row4 col2" />
  <input type="radio" name="r25" id="cb25" class="hs house row4 col3" />
  <input type="radio" name="r23" id="cb25s" class="hs shed row4 col3" />
  <input type="radio" name="r26" id="cb26" class="hs house row4 col4" />
  <input type="radio" name="r26" id="cb26s" class="hs shed row4 col4" />
  <br />
  <input type="radio" name="r19" id="cb19" class="hs house row3 col1" />
  <input type="radio" name="r19" id="cb19s" class="hs shed row3 col1" />
  <input type="radio" name="r20" id="cb20" class="hs house row3 col2" />
  <input type="radio" name="r20" id="cb20s" class="hs shed row3 col2" />
  <input type="radio" name="r21" id="cb21" class="hs house row3 col3" />
  <input type="radio" name="r21" id="cb21s" class="hs shed row3 col3" />
  <input type="radio" name="r22" id="cb22" class="hs house row3 col4" />
  <input type="radio" name="r22" id="cb22s" class="hs shed row3 col4" />
  <br />
  <input type="radio" name="r15" id="cb15" class="hs house row2 col1" />
  <input type="radio" name="r15" id="cb15s" class="hs shed row2 col1" />
  <input type="radio" name="r16" id="cb16" class="hs house row2 col2" />
  <input type="radio" name="r16" id="cb16s" class="hs shed row2 col2" />
  <input type="radio" name="r17" id="cb17" class="hs house row2 col3" />
  <input type="radio" name="r17" id="cb17s" class="hs shed row2 col3" checked />
  <input type="radio" name="r18" id="cb18" class="hs house row2 col4" />
  <input type="radio" name="r18" id="cb18s" class="hs shed row2 col4" />
  <br />
  <input type="radio" name="r11" id="cb11" class="hs house row1 col1" />
  <input type="radio" name="r11" id="cb11s" class="hs shed row1 col1" />
  <input type="radio" name="r12" id="cb12" class="hs house row1 col2" />
  <input type="radio" name="r12" id="cb12s" class="hs shed row1 col2" />
  <input type="radio" name="r13" id="cb13" class="hs house row1 col3" />
  <input type="radio" name="r13" id="cb13s" class="hs shed row1 col3" />
  <input type="radio" name="r14" id="cb14" class="hs house row1 col4" />
  <input type="radio" name="r14" id="cb14s" class="hs shed row1 col4" />
  <br />

  <input type="radio" name="r23" id="ncb23" class="row4 col1" title="ncb23" />
  <input type="radio" name="r24" id="ncb24" class="row4 col2" title="ncb24" />
  <input type="radio" name="r25" id="ncb25" class="row4 col3" title="ncb25" />
  <input type="radio" name="r26" id="ncb26" class="row4 col4" title="ncb26" />
  <br />
  <input type="radio" name="r19" id="ncb19" class="row3 col1" title="ncb19" />
  <input type="radio" name="r20" id="ncb20" class="row3 col2" title="ncb20" />
  <input type="radio" name="r21" id="ncb21" class="row3 col3" title="ncb21" />
  <input type="radio" name="r22" id="ncb22" class="row3 col4" title="ncb22" />
  <br />
  <input type="radio" name="r15" id="ncb15" class="row2 col1" title="ncb15" />
  <input type="radio" name="r16" id="ncb16" class="row2 col2" title="ncb16" />
  <input type="radio" name="r17" id="ncb17" class="row2 col3" title="ncb17" />
  <input type="radio" name="r18" id="ncb18" class="row2 col4" title="ncb18" />
  <br />
  <input type="radio" name="r11" id="ncb11" class="row1 col1" title="ncb11" />
  <input type="radio" name="r12" id="ncb12" class="row1 col2" title="ncb12" />
  <input type="radio" name="r13" id="ncb13" class="row1 col3" title="ncb13" />
  <input type="radio" name="r14" id="ncb14" class="row1 col4" title="ncb14" />
  <br />
  <input type="radio" id="done" />

  <div class="lh">
    <light></light>
  </div>
  <div>
    <div class="main">
      <island></island>

      <tree><i></i><i></i></tree>
      <tree><i></i><i></i></tree>

      <shed>
        <label class="row1 col1 shedlabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row1 col2 shedlabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row1 col3 shedlabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row1 col4 shedlabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>

        <label class="row2 col1 shedlabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row2 col2 shedlabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row2 col3 shedlabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row2 col4 shedlabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>

        <label class="row3 col1 shedlabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row3 col2 shedlabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row3 col3 shedlabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row3 col4 shedlabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
      </shed>

      <house>

        <label class="row1 col1 houselabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row1 col2 houselabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row1 col3 houselabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row1 col4 houselabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>

        <label class="row2 col1 houselabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row2 col2 houselabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row2 col3 houselabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row2 col4 houselabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>

        <label class="row3 col1 houselabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row3 col2 houselabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row3 col3 houselabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
        <label class="row3 col4 houselabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>

        <label class="row4 col1 houselabel" for="ncb23" title="Tap to build"><i></i><i></i><i></i><i></i></label>
        <label class="row4 col2 houselabel" for="ncb24" title="Tap to build"><i></i><i></i><i></i><i></i></label>
        <label class="row4 col3 houselabel" for="ncb25" title="Tap to build"><i></i><i></i><i></i><i></i></label>
        <label class="row4 col4 houselabel" for="ncb26" title="Tap to build"><i></i><i></i><i></i><i></i></label>
      </house>

      <hbtn>

        <label class="row1 col1 buttons" for="cb11" title="Tap to build"></label>
        <label class="row1 col2 buttons" for="cb12" title="Tap to build"></label>
        <label class="row1 col3 buttons" for="cb13" title="Tap to build"></label>
        <label class="row1 col4 buttons" for="cb14" title="Tap to build"></label>

        <label class="row2 col1 buttons" for="cb15" title="Tap to build"></label>
        <label class="row2 col2 buttons" for="cb16" title="Tap to build"></label>
        <label class="row2 col3 buttons" for="cb17" title="Tap to build"></label>
        <label class="row2 col4 buttons" for="cb18" title="Tap to build"></label>

        <label class="row3 col1 buttons" for="cb19" title="Tap to build"></label>
        <label class="row3 col2 buttons" for="cb20" title="Tap to build"></label>
        <label class="row3 col3 buttons" for="cb21" title="Tap to build"></label>
        <label class="row3 col4 buttons" for="cb22" title="Tap to build"></label>

        <label class="row4 col1 buttons" for="cb23" title="Tap to build"></label>
        <label class="row4 col2 buttons" for="cb24" title="Tap to build"></label>
        <label class="row4 col3 buttons" for="cb25" title="Tap to build"></label>
        <label class="row4 col4 buttons" for="cb26" title="Tap to build"></label>
      </hbtn>

      <sbtn>

        <label class="row1 col1 buttons" for="cb11s" title="Tap to build"></label>
        <label class="row1 col2 buttons" for="cb12s" title="Tap to build"></label>
        <label class="row1 col3 buttons" for="cb13s" title="Tap to build"></label>
        <label class="row1 col4 buttons" for="cb14s" title="Tap to build"></label>

        <label class="row2 col1 buttons" for="cb15s" title="Tap to build"></label>
        <label class="row2 col2 buttons" for="cb16s" title="Tap to build"></label>
        <label class="row2 col3 buttons" for="cb17s" title="Tap to build"></label>
        <label class="row2 col4 buttons" for="cb18s" title="Tap to build"></label>

        <label class="row3 col1 buttons" for="cb19s" title="Tap to build"></label>
        <label class="row3 col2 buttons" for="cb20s" title="Tap to build"></label>
        <label class="row3 col3 buttons" for="cb21s" title="Tap to build"></label>
        <label class="row3 col4 buttons" for="cb22s" title="Tap to build"></label>
      </sbtn>
      <grass></grass>
    </div>
  </div>
  <water><i></i></water>

  <div class="lh">
    <lens></lens>
  </div>

  <text>
    <welldone>
      <label for="done">✕</label>
      <p>NICE ONE!</p>
      <p>You built a lighthouse before nightfall!</p>
      <p>The ships and islanders are safe!</p>
    </welldone>
  </text>
  <text>
    <gameover>
      <label for="done">✕</label>
      <p>GAME OVER!</p>
      <p>I'm afraid I have some very bad news...</p>
      <p>A ship has crashed into your beautiful island.</p>
      <p>Everybody is dead!</p>
      <p>Soz! You should build a lighthouse.</p>
      <a href="" title="Try Again">Try Again</a>
    </gameover>
  </text>
</colour>
<div class="ss">
  <lens></lens>
</div>
<sig><i></i></sig>
!

CSS 

              
                // ## setup
$timer: 400s;

$none: rgba(#fff, 0);
$light: #fcf6a5;
$sun: #ff7700;
$base: #bc2f2f;
$shadow: #4f010e;
$smoke: #252529;
$smoke2: #6f6f7a;
$sky: #608b88;
$stone: #a19372;
$tre1: #683f44;
$tre2: #20112a;

.house.row3:checked,
.shed.row3:checked {
  & ~ div {
    filter: hue-rotate(-20deg);
  }
}

.house.row2:checked,
.shed.row2:checked {
  & ~ div {
    filter: hue-rotate(-35deg);
  }
}

.house.row1:checked,
.shed.row1:checked {
  & ~ div {
    filter: hue-rotate(-50deg);
  }
}

$r1: adjust-hue($base, random(50) + 5);
$r15: adjust-hue($base, random(50) + 10);
$r2: adjust-hue($base, random(50) - 30);
$r3: darken($r2, 20%);
$r4: adjust-hue($base, random(50) + 50);
$r41: adjust-hue($base, random(50) + 51);
$r42: adjust-hue($base, random(50) + 49);
$r43: darken($r42, 10%);
$shadow: rgba($shadow, 0.75);
$ls: rgba($shadow, 0.3);
$ds: rgba($shadow, 0.9);
$dark: darken($r2, 20%);
$background: lighten($base, 42%);
$b1: lighten($base, 4%);
$b2: lighten($r1, 4%);
$b3: lighten($r2, 4%);
$s1: lighten($stone, 4%);
$sd: darken($stone, 10%);

$tre3: lighten($tre1, 10%);
$vls: rgba($tre1, 0.1);

html {
  font-size: 0.97vh;
  width: 100%;
  height: 100%;
  background: $background;
  overflow: hidden;
}

body {
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba($sky, 0.5), rgba(#fff, 0.75), $none);
  box-shadow: inset 0 0 5rem 0 $smoke;

  &,
  *,
  *:before,
  *:after {
    display: block;
    top: 0;
    left: 0;
    box-sizing: border-box;
    position: absolute;
    content: "";
  }
}

div,
house,
shed,
hbtn,
sbtn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50rem;
  height: 50rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  label {
    width: calc(50rem / 4);
    height: calc(50rem / 4);
    position: relative;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    display: inline;
    cursor: pointer;
    box-shadow: 0 0 0 2rem $none;

    *,
    *:before,
    *:after {
      transform: translate3d(0, 0, 0);
      z-index: 1;
      left: 0;
      top: 0;
      background: none;
      border: none;
      box-shadow: none;
      pointer-events: none;
    }

    & > i:nth-of-type(1) {
      &:before,
      &:after {
        filter: blur(0.5rem);
        border: 1rem solid rgba($smoke2, 0.75);
        width: 5rem;
        height: 5rem;
        background: $smoke2;
        opacity: 0;
        border-radius: 50%;
        box-shadow: 2rem -1.5rem 0 1rem rgba($smoke2, 0.75),
          //
          3rem -2rem 0 1.5rem rgba($smoke2, 0.5);
      }
    }
  }
}

colour {
  width: 100%;
  height: 100%;

  input,
  br {
    position: relative;
    display: inline-block;
    opacity: 0.2;
    top: 1rem;
    left: 1rem;
    transform: scale(0.75);
    margin: -0.2rem;

    @media (max-width: 900px) {
      display: none;
    }
  }

  input:checked {
    opacity: 1;
  }

  br {
    display: block;
  }
}

input {
  display: none;
}

div.main {
  -webkit-box-reflect: below 4rem;
}

div.ss {
  pointer-events: none;
}

sbtn {
  height: calc(50rem - (50rem / 4));
  bottom: auto;

  label {
    border: solid 1px rgba(#747474, 0.1);

    &:nth-of-type(1) {
      border-radius: 3rem 0 0 0;
    }

    &:nth-of-type(4) {
      border-radius: 0 3rem 0 0;
    }

    &:hover {
      border-color: #555;
    }
  }
}

hbtn label:nth-of-type(n + 12) {
  border: solid 1px rgba(#747474, 0.1);

  &:hover {
    border-color: #555;
  }
}

@keyframes smoke {
  0% {
    transform: scale(0.2) translate3d(0, 0, 0) rotate(-15deg);
    opacity: 0.075;
  }

  50% {
    transform: scale(1) translate3d(2rem, -4rem, 0) rotate(0);
    opacity: 0.15;
  }

  100% {
    transform: scale(2) translate3d(5rem, -5rem, 0) rotate(10deg);
    opacity: 0;
  }
}

//pretty
island {
  position: absolute;
  top: 76rem;
  top: 49.25rem;
  left: -50%;
  right: -50%;
  margin: auto;
  width: 80rem;
  height: 5rem;
  background: $r42;
  border-radius: 55% 55% 45% 45%;
}

grass {
  position: absolute;
  z-index: 500;
  top: 76rem;
  top: 49.25rem;
  left: -50%;
  right: -50%;
  margin: auto;
  width: 80rem;
  height: 5rem;
  -webkit-box-reflect: below -5rem;
  transform: skewX(0);

  &:after,
  &:before {
    top: 0.75rem;
    left: 0.6rem;
    z-index: 100;
    width: 0.5rem;
    height: 1.75rem;
    transform: skewY(60deg);
    background: $r42;
    box-shadow: 1rem -1.6rem 0 $r42,
      //
      2.1rem -3.6rem 0 $r42,
      //
      2.9rem -4.8rem 0 $r42,
      //
      4rem -7rem 0 $r42;
    filter: drop-shadow(5rem -8.3rem 0 $r42) //
      drop-shadow(10rem -17.3rem 0 $r42) //
      drop-shadow(20rem -34.5rem 0 $r42) //
      drop-shadow(40rem -69rem 0 $r42);
  }

  &:before {
    transform: skewY(-60deg);
    box-shadow: 1rem 1.6rem 0 $r42,
      //
      2.1rem 3.6rem 0 $r42,
      //
      2.9rem 4.8rem 0 $r42,
      //
      4rem 7rem 0 $r42;
    filter: drop-shadow(5rem 8.3rem 0 $r42) //
      drop-shadow(10rem 17.3rem 0 $r42) //
      drop-shadow(20rem 34.5rem 0 $r42) //
      drop-shadow(40rem 69rem 0 $r42);
    left: 0;
    top: 1.5rem;
  }
}

@keyframes grass {
  100% {
    transform: skewX(5deg);
  }
}

input:focus ~ div > div {
  animation: thud 0.1s linear;
}

@keyframes thud {
  0% {
    transform: translate3d(0, 1rem, 0);
  }

  60% {
    transform: translate3d(0, -0.5rem, 0);
  }

  80% {
    transform: translate3d(0, 0.25rem, 0);
  }
}

sig {
  z-index: 500;
  opacity: 0.2;

  &,
  * {
    height: 9.25em;
    overflow: hidden;
    border-radius: 0.5em;
  }

  font-size: 0.5rem;
  color: #000;
  width: 10em;
  top: auto;
  left: auto;
  bottom: 1em;
  right: 1em;
  transform: skewX(10deg) scaleY(0.45) rotate(2deg);

  &:before,
  *:before {
    width: 5em;
    height: 5em;
    background: currentColor;
    transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
    box-shadow: -3em 3em 0 0 currentColor;
    border-radius: 0.5em 2em 0.5em 2em;
  }

  * {
    width: 5em;
    transform: translate3d(3.75em, 0, 0) scaleY(0.95);
    display: block !important;

    &:before {
      transform: translate3d(-3em, -2em, 0) rotate(-45deg);
      box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
      border-radius: 0.5em;
    }
  }
}

text {
  width: 95%;
  max-width: 70rem;
  bottom: 25%;
  color: lighten($r1, 30%);
  right: 0;
  margin: auto;
  height: 1rem;
  font-size: 2.5rem;
  text-align: center;
  font-family: Telefon, Sans-Serif;
  z-index: -1;
  transform: scale(0);
  font-weight: 100;
  letter-spacing: 0.1rem;
  opacity: 0;

  welldone,
  gameover {
    box-shadow: 0 0 5rem $sun, inset 0 0 0 0.5rem #fff;
    background: rgba($tre2, 0.95);
    padding: 5rem;
    border-radius: 5rem;
    border: 1rem solid $tre2;
  }

  welldone {
    display: none;
  }

  & * {
    position: static;
  }

  p:nth-of-type(1) {
    font-size: 4rem;
  }

  p:nth-of-type(odd) {
    color: $r2;
  }

  label {
    position: absolute;
    left: auto;
    right: 3rem;
    top: 3rem;
    color: $r2;
    padding: 2rem;
    border-radius: 2rem;
    box-shadow: 0 0 1rem $none;
    cursor: pointer;
    transition: box-shadow 0.25s ease-in-out;
    box-sizing: border-box;
    line-height: 1;

    &:hover,
    &:focus {
      box-shadow: 0 0 0.15rem #fff;
    }
  }

  a {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    text-decoration: none;
    background: $r2;
    color: $tre2;
    box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2);
    transition: all 0.2s ease-in-out;

    &:hover,
    &:focus {
      box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 3rem rgba(#fff, 0.2);
    }
  }
}

#done:checked ~ text {
  transform: scale(0) !important;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}
// ## sun
colour > *:not(.lh):not(text) {
  filter: hue-rotate(0deg) brightness(100%);
  animation: set $timer linear infinite;
}

@media screen and (max-device-width: 480px) {
  colour > *:not(.lh):not(text) {
    animation: none;
  }
}

@keyframes set {
  15%,
  85% {
    filter: hue-rotate(0deg) brightness(100%);
  }

  30%,
  70% {
    filter: hue-rotate(-20deg) brightness(10%);
  }

  40%,
  60% {
    filter: hue-rotate(-40deg) brightness(50%);
  }
}

@function stars($a) {
  $random2: #f9b9c8;
  $value: "#{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2;

  @for $i from 2 through $a {
    $random2: adjust-hue(#8beffc, random(360));
    $value: "#{$value} , #{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2;
  }

  @return unquote($value);
}

$stars: stars(50);

stars {
  width: 220rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: stars $timer linear infinite;
  -webkit-box-reflect: below -50rem;
  opacity: 0;
  z-index: 0;

  &:before {
    width: 0.5rem;
    height: 0.5rem;
    box-shadow: $stars;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 5rem;
    left: 5rem;
  }

  i {
    &:before,
    &:after {
      width: 0.5rem;
      height: 0.5rem;
      top: 40rem;
      left: 40rem;
      background: #fff;
      border-radius: 50%;
      animation: stars 1s linear infinite;
      opacity: 0.5;
      box-shadow: 0 0 1rem #fff;
    }

    &:after {
      top: 20rem;
      left: 180rem;
      animation: stars 1s 0.5s linear infinite;
      background: #f9b9c8;
    }
  }
}

sky {
  width: 100%;
  height: 78.5rem;
  overflow: hidden;
  -webkit-box-reflect: below 0;
  z-index: 0;

  &:before,
  &:after {
    width: 100%;
    height: 100%;
    background: linear-gradient(#323248 10%, #fbd447, #d8480f);
    opacity: 0;
    animation: sky $timer linear infinite;
  }

  &:after {
    background: linear-gradient(#19043f, #1a0f6c);
  }
}

time {
  pointer-events: none;

  &,
  sun {
    width: 170rem;
    height: 170rem;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -170%;
    margin: auto;
  }

  & sun {
    bottom: -100%;
    transform: rotate(0deg);
    z-index: 1;
    animation: sun $timer linear infinite;
    filter: blur(1rem) brightness(400%);

    &:before {
      width: 25rem;
      height: 25rem;
      border-radius: 50%;
      background: radial-gradient($r1, $base);
      right: 0;
      margin: auto;
      transform: rotate(0deg);
    }
    //moon
    &:after {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      box-shadow: inset 0 2rem 0 #5a4e38;
      background: rgba(#000, 0.1);
      left: 60%;
      top: auto;
      bottom: 0;
      transform: rotate(0deg);
      z-index: 1;
    }
  }
}

@media (max-width: 500px) {
  time,
  input {
    display: none;
  }
}

div.ss lens {
  top: 20rem;
  left: 70rem;
  animation: lensflair $timer linear infinite;
  width: 60rem;
  height: 60rem;
  filter: brightness(150%);
  transform: rotate(0);
  opacity: 0;

  &:before {
    width: 60rem;
    height: 60rem;
    border-radius: 50%;
    top: 0;
    right: -50%;
    left: -50%;
    margin: auto;
    box-shadow: 0 70rem 0 -20rem yellow,
      //
      0 50rem 0 -25rem yellow,
      //
      0 100rem 0 5rem #f437c5,
      //
      inset 0 0 3rem $sun;
    border: 1rem solid $sun;
  }

  &:after {
    width: 100rem;
    height: 100rem;
    border-radius: 50%;
    top: 140rem;
    right: -50%;
    left: -50%;
    margin: auto;
    border: 1rem solid yellow;
    box-shadow: 0 0 3rem red, inset 0 0 3rem blue;
  }
}

@keyframes lensflair {
  20%,
  30%,
  70%,
  80% {
    opacity: 0;
  }

  25%,
  75% {
    opacity: 0.05;
  }

  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes sun {
  20%,
  80% {
    filter: blur(1rem) brightness(390%);
  }

  27%,
  73% {
    filter: blur(1rem) brightness(200%);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes stars {
  50% {
    opacity: 1;
  }
}

@keyframes sky {
  20%,
  85% {
    filter: brightness(100%);
    opacity: 0;
  }

  30%,
  70% {
    filter: brightness(100%);
    opacity: 1;
  }

  40%,
  60% {
    filter: brightness(20%);
    opacity: 1;
  }
}

sunset {
  width: 150%;
  height: 20rem;
  left: -25%;
  top: 60rem;
  background: radial-gradient(farthest-side at 70% 100%, #ff6400, $none);
  filter: blur(1rem);
  -webkit-box-reflect: below 0;
  animation: sunset $timer linear infinite;
  opacity: 0;
  transform: translate3d(0, 20rem, 0);

  &:before {
    width: 100rem;
    height: 50rem;
    left: 55%;
    top: -10rem;
    border-radius: 50%;
    background: radial-gradient(#ff6400, $none);
    opacity: 0.1;
  }

  &:after {
    width: 50rem;
    height: 25rem;
    left: 65%;
    top: 5rem;
    border-radius: 50%;
    background: radial-gradient(#fffd91, $none);
    opacity: 0.1;
  }
}

@keyframes sunset {
  28%,
  75% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  20%,
  35%,
  70%,
  80% {
    opacity: 0;
    transform: translate3d(0, 20rem, 0);
  }
}

text:nth-of-type(2) {
  animation: gameover $timer linear;
}

@keyframes gameover {
  34.8% {
    transform: scale(0);
    z-index: 0;
    display: block;
    opacity: 0;
  }

  35%,
  100% {
    transform: scale(1);
    z-index: 410;
    transition: all 0.5s 1.5s ease-in-out;
    opacity: 1;
  }
}
// ## trees
tree:nth-of-type(1) {
  width: 10rem;
  height: 60.5rem;
  top: -10rem;
  transform: skew(-2deg);
  border-radius: 0 50% 2rem 0;
  box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2;

  &:before {
    left: 16rem;
    width: 10rem;
    height: 60.5rem;
    box-shadow: -2rem 0 0 $tre2, -3rem 0 0 $tre1, -4rem 0 0 $tre2;
    border-radius: 50% 0 0 2rem;
    transform: skew(4deg);
  }

  &:after {
    top: -4rem;
    width: 10rem;
    height: 5rem;
    border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
    background: $r4;
    box-shadow: inset -1rem -1rem 1rem $vls,
      //
      13rem 0 0 -0.2rem $vls,
      //
      9rem 1rem 0 -1rem $vls,
      //
      -2rem -3rem 0 1rem $vls,
      //
      5rem -5rem 0 -0.5rem $vls,
      //
      7rem -4rem 0 $vls,
      //
      11rem -2rem 0 -0.5rem $vls,
      //
      //
      12rem 0 0 -0.2rem $r42,
      //
      8rem 1rem 0 -1rem $r42,
      //
      -3rem -3rem 0 1rem $r41,
      //
      4rem -5rem 0 -0.5rem $r42,
      //
      6rem -4rem 0 $r41,
      //
      10rem -2rem 0 -0.5rem $r42; //
  }
}

tree:nth-of-type(2) {
  width: 10rem;
  height: 50.5rem;
  top: 0;
  left: 25rem;
  transform: skew(-3deg);
  border-radius: 0 50% 2rem 0;
  box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2;

  &:before {
    left: 16rem;
    width: 10rem;
    height: 50.5rem;
    box-shadow: -1.5rem 0 0 $tre2, -2.5rem 0 0 $tre1, -3rem 0 0 $tre2;
    border-radius: 50% 0 0 2rem;
    transform: skew(4deg);
  }

  &:after {
    top: -4rem;
    left: 17rem;
    width: 10rem;
    height: 5rem;
    border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
    background: $r4;
    box-shadow: inset -1rem -1rem 1rem $vls,
      //
      -19rem 1rem 0 -0.2rem $vls,
      //
      -14rem -4rem 0 -1rem $vls,
      //
      -13rem -1rem 0 1rem $vls,
      //
      -1rem -4rem 0 -0.5rem $vls,
      //
      -4rem -1rem 0 $vls,
      //
      -21rem -2rem 0 -0.5rem $vls,
      //
      -7rem -5rem 0 1rem $vls,
      //
      //
      -20rem 1rem 0 -0.2rem $r42,
      //
      -15rem -4rem 0 -1rem $r42,
      //
      -15rem -1rem 0 1rem $r41,
      //
      -2rem -4rem 0 -0.5rem $r42,
      //
      -5rem -1rem 0 $r41,
      //
      -22rem -2rem 0 -0.5rem $r42,
      //
      -8rem -5rem 0 1rem $r41; //
  }
}

tree i:nth-of-type(1) {
  &,
  &:before,
  &:after {
    width: 2.5rem;
    height: 0.5rem;
    background: lighten($r4, 10%);
    border-radius: 0 0 100% 100%;
    top: -5rem;
    filter: drop-shadow(3rem 1.5rem 0 $r43) drop-shadow(1.5rem 2.5rem 0 $r43);
    z-index: 1;
    left: -3rem;
    opacity: 0.5;
  }

  &:before {
    left: 6rem;
    top: -1rem;
    filter: drop-shadow(2rem 1.5rem 0 $r43);
  }

  &:after {
    left: 15rem;
    top: -1.5rem;
    filter: drop-shadow(2.5rem 0.5rem 0 $r43) drop-shadow(1rem 2rem 0 $r43);
  }
}

tree:nth-of-type(2) i:nth-of-type(1) {
  &:after {
    left: 20rem;
  }
}

tree i:nth-of-type(2) {
  &,
  &:before,
  &:after {
    width: 0.5rem;
    height: 0.25rem;
    background: $r41;
    border-radius: 100% 0 100% 0;
    top: -2rem;
  }

  &:before {
    left: 8rem;
    top: -1rem;
  }

  &:after {
    left: 20rem;
    top: 1.5rem;
  }
}

[type="radio"]:focus ~ div > div > tree {
  i:nth-of-type(1),
  &:after {
    animation: shake 0.3s ease-in-out;
  }
}

[type="radio"]:focus ~ div > div > tree > i:nth-of-type(2) {
  & {
    animation: fall 5s ease-in-out;
  }

  &:before {
    animation: fall 10s ease-in-out;
  }

  &:before {
    animation: fall 5s ease-in-out;
  }
}

@keyframes shake {
  40% {
    transform: translate3d(0, 0.5rem, 0);
  }

  60% {
    transform: translate3d(0, -0.25rem, 0);
  }

  80% {
    transform: translate3d(0, 0.15rem, 0);
  }
}

@keyframes fall {
  100% {
    transform: translate3d(0, 15rem, 0);
    opacity: 0;
  }
}
// ## water
$w: #040b27;

water {
  position: absolute;
  top: 78.5rem;
  bottom: 0;
  left: -100%;
  right: -100%;
  margin: auto;
  width: 100%;
  height: 25rem;
  background: linear-gradient(rgba($sky, 0.5), $background);
  z-index: 99;
  overflow: hidden;
  box-shadow: inset 0 0 5rem 0 rgba($smoke, 0.5);

  &:before,
  &:after,
  i {
    width: 80rem;
    height: 3rem;
    border-radius: 50%;
    opacity: 0.2;
    right: 0;
    margin: auto;
    transform: scaleX(1) scaleY(0);
    top: -1.5rem;
    border: 0.5rem solid #fff;
    box-shadow: 0 0 1rem 0.5rem $w, inset 0 0 1rem 1rem $w, inset 0 0 1rem #fff;
  }

  &:before {
    animation: waves 6s ease-in-out infinite;
  }

  &:after {
    animation: waves 8s 2s ease-in-out infinite;
  }
}

input:focus ~ water > i {
  animation: waves 3s 0.25s ease-out;
}

@keyframes waves {
  100% {
    transform: scaleX(1.5) scaleY(7);
    opacity: 0;
  }
}
// ## shed
//treehouse

shed > label {
  & > i:nth-of-type(5) {
    width: 100%;
    height: 100%;
    //ladder
    &:after {
      width: 2rem;
      border-left: 0.5rem solid $smoke;
      border-right: 0.5rem solid $smoke;
      background: repeating-linear-gradient(
        $none,
        $none 1.5rem,
        $smoke 1.5rem,
        $smoke 2rem
      );
      height: 325%;
      left: -1.5rem;
      transform: rotate(-1deg);
      top: 10.5rem;
      display: none;
    }
    //bridge
    &:before {
      width: 13rem;
      height: 3rem;
      top: 10.5rem;
      left: 12.5rem;
      border: 0.5rem dashed $none;
      border-bottom-color: $tre1;
      box-shadow: 0 0.25rem 0 $tre1;
      transform: rotate(-3deg);
      border-radius: 50%;
      display: none;
    }
  }

  &:nth-of-type(n + 5) > i:nth-of-type(5):after {
    height: 225%;
  }

  &:nth-of-type(n + 9) > i:nth-of-type(5):after {
    height: 15rem;
  }

  &:nth-of-type(even) > i:nth-of-type(5):after {
    left: 10rem;
    transform: rotate(2deg);
  }
}

$row: 1, 2, 3;

@each $i in $row {
  $col: 1, 2, 3, 4;

  @each $x in $col {
    .hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} {
      //back
      &:before {
        background: repeating-linear-gradient($r1 1rem, $tre1 2.3rem);
        width: 90%;
        height: 98%;
        left: 1.25rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 0 0 $tre2;
      }
      //roof
      &:after {
        width: 105%;
        height: 5rem;
        background: repeating-linear-gradient(
          to right,
          $tre1 1rem,
          $tre2 2.1rem
        );
        top: -2rem;
        border-bottom: solid 0.5rem $smoke;
        box-shadow: 0 1.5rem 0.5rem -1rem $ds;
        border-radius: 0.5rem;
        left: auto;
        right: -1rem;
      }
      //window
      & > i:nth-of-type(4) {
        width: 4rem;
        height: 4rem;
        right: 0;
        margin: auto;
        background: $ls;
        top: 3rem;
        border-radius: 0.5rem;
        box-shadow: inset 0 0.5rem 1rem $shadow;
        transform: scale(0.5);

        &:before {
          width: 3.4rem;
          height: 0.5rem;
          background: $smoke;
          left: 0.3rem;
          top: 0.4rem;
          border-radius: 0.25rem;
          box-shadow: 0 1.5rem 0 $smoke,
            //
            0
              3rem
              0
              $smoke,
            //
            0
              0.5rem
              0
              #000,
            //
            0
              1rem
              0
              $ds,
            //
            0
              2rem
              0
              $ds,
            //
            0
              2.5rem
              0
              $shadow; //
        }

        &:after {
          width: 0.5rem;
          height: 3.4rem;
          background: $smoke;
          left: 0.3rem;
          top: 0.4rem;
          border-radius: 0.25rem;
          box-shadow: 1.5rem 0 0 $smoke,
            //
            3rem
              0
              0
              $smoke; //
        }
      }
      //door / chimney / fence
      & > i:nth-of-type(3) {
        //door
        width: 4rem;
        height: 9rem;
        right: 0;
        margin: auto;
        background: $r1;
        top: 3rem;
        border-radius: 0.5rem;
        box-shadow: inset 0 0.5rem 1rem $shadow;
        //chimney
        &:after {
          left: -4rem;
          border: 1rem solid $none;
          top: -11rem;
          border-bottom-color: $smoke;
          transform: rotate(-3deg);
          height: 4rem;
          box-shadow: 0 3.7rem 0 -0.5rem $smoke;
          border-radius: 0 0 1rem 1rem;
        }
        //fence
        &:before {
          width: 14.5rem;
          height: 4.5rem;
          border-top: 0.5rem solid $tre2;
          border-bottom: 0.5rem solid $tre2;
          top: 5rem;
          left: -5rem;
          background: repeating-linear-gradient(
            to right,
            $tre1,
            $tre2 0.5rem,
            $none 0.5rem,
            $none 1.4rem
          );
          border-radius: 0.5rem;
        }
      }
      //props
      & > i:nth-of-type(2) {
        &:before {
          width: 1rem;
          height: 9rem;
          background: $tre2;
          top: -7rem;
        }
      }

      &:nth-of-type(odd) > i:nth-of-type(2) {
        width: 1rem;
        background: $tre2;
        height: 3rem;
        border-radius: 0.25rem;
        top: 18.5rem;
        left: 10rem;
        transform: rotate(5deg);

        &:before {
          transform: rotate(-45deg);
          left: -3rem;
          border-radius: 0 1rem 0 0;
        }

        &:after {
          width: 1rem;
          height: 4rem;
          transform: rotate(45deg);
          background: $tre2;
          top: -6.5rem;
          left: -2rem;
          border-radius: 1rem 0 0 0;
        }
      }

      &:nth-of-type(even) > i:nth-of-type(3) {
        //chimney
        &:after {
          left: 7rem;
          transform: rotate(3deg);
        }
      }
      //smoke
      &:nth-of-type(even) > i:nth-of-type(1) {
        left: 11rem;
      }

      &:nth-of-type(even) > i:nth-of-type(2) {
        &:before {
          transform: rotate(45deg);
          left: 5rem;
          border-radius: 1rem 0 0 0;
          top: 11rem;
        }
      }
      //smoke
      & > i:nth-of-type(1) {
        &:before,
        &:after {
          top: -7.5rem;
          left: -1rem;
          animation: smoke 8s linear infinite;
        }

        &:before {
          animation: smoke 7.25s 3.75s linear infinite;
        }
      }
      //ladder
      & > i:nth-of-type(5):after {
        display: block;
      }
    }
    //no roof
    .hs.row#{$i}.col#{$x}:checked ~ {
      div > div > shed > .row#{$i + 1}.col#{$x} {
        &:after,
        & > i:nth-of-type(3):after,
        & > i:nth-of-type(1) {
          display: none;
        }
      }
    }
    //no fence / door / window
    .hs.row#{$i}.col#{$x}:checked ~ {
      div > div > shed > .row#{$i - 1}.col#{$x} {
        & > i:nth-of-type(3):before,
        & > i:nth-of-type(2),
        & > i:nth-of-type(5):after {
          display: none;
        }

        & > i:nth-of-type(3) {
          height: 0;
        }

        & > i:nth-of-type(4) {
          transform: scale(1);
          right: #{random(2)}rem;
          left: #{random(2)}rem;
        }
      }
    }
    //chimney
    .hs.shed.row#{$i}.col#{$x
      -
      3}:not(:checked)
      ~ .hs.row#{$i}.col#{$x}:checked
      ~ .shed.hs.row#{$i}.col#{$x
      + 1}:not(:checked)
      ~ {
      .hs.row#{$i - 2}.col#{$x}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(3) {
            //chimney
            &:after {
              left: 7rem;
              transform: rotate(3deg);
            }
          }
          //smoke
          & > i:nth-of-type(1) {
            left: 11rem;
          }
        }
      }
    }
    //tall back
    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i - 1}.col#{$x}:checked ~ {
      div > div > shed > .row#{$i}.col#{$x} {
        &:before {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }

      div > div > shed > .row#{$i - 1}.col#{$x} {
        &:before {
          height: 12.5rem;
          box-shadow: none;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
    //random door
    .hs.row#{$i}.col#{$x}:checked ~ {
      .hs.row#{$i}.col#{$x + 1}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(3) {
            height: 0;
          }

          & > i:nth-of-type(4) {
            transform: scale(1);
            right: #{random(2)}rem;
            left: #{random(2)}rem;
          }

          & > i:nth-of-type(5):after {
            display: none;
          }
        }
      }
    }
    //ladder control
    .hs.row#{$i + 2}.col#{$x}:checked ~ {
      .hs.row#{$i}.col#{$x}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(5):after {
            display: none;
          }
        }
      }
    }

    .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ {
      div > div > shed > .row1.col2 {
        & > i:nth-of-type(5):after {
          display: none;
        }
      }
    }

    .hs.row#{$i + 1}.col#{$x - 1}:checked ~ {
      .hs.row#{$i}.col#{$x}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(5):after {
            display: none !important;
          }
        }
      }
    }

    .hs.row#{$i}.col#{$x}:checked ~ {
      .hs.row#{$i - 1}.col#{$x + 1}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(1),
          & > i:nth-of-type(3):after {
            display: none;
          }
        }
      }
    }
    //extended roof
    .hs.row#{$i}.col#{$x}:checked ~,
    .hs.row#{$i}.col#{$x + 1}:checked ~ {
      .hs.row#{$i - 1}.col#{$x + 1}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          &:after {
            width: 110%;
            right: -1.25rem;
          }
        }
      }
    }
  }
  //long back
  $house: 1, 2, 3;

  @each $x in $house {
    .hs.row#{$i}.col#{$x}:checked ~ {
      .hs.row#{$i}.col#{$x + 1}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          &:before {
            width: 110%;
          }
        }

        div > div > shed > .row#{$i}.col#{$x + 1} {
          //roof
          &:after {
            width: 120%;
            left: -1.25rem;
          }
        }
      }
    }
  }
  /////////////////////////////
  //chimney

  $house: 2, 4;

  @each $x in $house {
    .hs.row#{$i}.col#{$x}:checked ~ {
      .hs.shed.row#{$i}.col#{$x + 1}:not(:checked) ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(3) {
            //chimney
            &:after {
              left: 7rem;
              transform: rotate(3deg);
            }
          }
          //smoke
          & > i:nth-of-type(1) {
            left: 11rem;
          }
        }
      }
    }
  }

  $house: 2, 3;

  @each $x in $house {
    .hs.row#{$i}.col#{$x}:checked ~ {
      .hs.row#{$i}.col#{$x + 1}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          //chimney // smoke
          & > i:nth-of-type(3):after,
          & > i:nth-of-type(1) {
            display: none;
          }

          & > i:nth-of-type(3):before {
            width: 10.25rem;
          }
        }
      }
    }

    .hs.row#{$i}.col#{$x}:checked ~ {
      .hs.row#{$i}.col#{$x - 1}:checked ~ {
        div > div > shed > .row#{$i}.col#{$x} {
          & > i:nth-of-type(3) {
            //chimney
            &:after {
              left: 6rem;
              transform: rotate(3deg);
            }
          }
          //smoke
          & > i:nth-of-type(1) {
            left: 10rem;
          }

          & > i:nth-of-type(5):after {
            left: -2.5rem;
            transform: rotate(-3deg);
          }
        }
      }
    }

    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~,
    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 5}:checked ~ {
      div > div > shed > .row#{$i}.col#{$x} {
        //chimney // smoke
        & > i:nth-of-type(3):after,
        & > i:nth-of-type(1) {
          display: none;
        }
      }
    }

    //ladder
    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~ {
      div > div > shed > .row#{$i}.col#{$x} {
        & > i:nth-of-type(5):after {
          left: 10rem;
          transform: rotate(2deg);
        }
      }
    }
  }
  //bridge

  .hs.shed.row#{$i}.col1:checked
    ~ .hs.shed.row#{$i}.col2:not(:checked)
    ~ .hs.shed.row#{$i}.col3:not(:checked)
    ~ .hs.shed.row#{$i}.col4:checked
    ~ {
    div > div > shed > .row#{$i}.col1 {
      & > i:nth-of-type(5):before {
        display: block;
        width: 210%;
      }
    }
  }

  .hs.shed.row#{$i}.col1:checked
    ~ .hs.shed.row#{$i}.col2:not(:checked)
    ~ .hs.shed.row#{$i}.col3:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col1,
  .hs.shed.row#{$i}.col2:checked
    ~ .hs.shed.row#{$i}.col3:not(:checked)
    ~ .hs.shed.row#{$i}.col4:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col2 {
    & > i:nth-of-type(5):before {
      display: block;
      width: 110%;
    }
  }

  // change bridge to rope
  .hs.row#{$i
    + 1}.col2:checked
    ~ .hs.shed.row#{$i}.col1:checked
    ~ .hs.shed.row#{$i}.col2:not(:checked)
    ~ .hs.shed.row#{$i}.col3:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col1,
  .hs.row#{$i
    + 1}.col3:checked
    ~ .hs.shed.row#{$i}.col2:checked
    ~ .hs.shed.row#{$i}.col3:not(:checked)
    ~ .hs.shed.row#{$i}.col4:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col2,
  .hs.row#{$i
    + 1}.col3:checked
    ~ .hs.shed.row#{$i}.col1:checked
    ~ .hs.shed.row#{$i}.col2:not(:checked)
    ~ .hs.shed.row#{$i}.col3:not(:checked)
    ~ .hs.shed.row#{$i}.col4:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col1,
  .hs.row#{$i
    + 1}.col2:checked
    ~ .hs.shed.row#{$i}.col1:checked
    ~ .hs.shed.row#{$i}.col2:not(:checked)
    ~ .hs.shed.row#{$i}.col3:not(:checked)
    ~ .hs.shed.row#{$i}.col4:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col1,
  .hs.shed.row#{$i
    + 1}.col1:checked
    ~ .hs.shed.row#{$i}.col1:checked
    ~ .hs.shed.row#{$i}.col2:not(:checked)
    ~ .hs.shed.row#{$i}.col3:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col1,
  .hs.shed.row#{$i
    + 1}.col2:checked
    ~ .hs.shed.row#{$i}.col2:checked
    ~ .hs.shed.row#{$i}.col3:not(:checked)
    ~ .hs.shed.row#{$i}.col4:checked
    ~ div
    > div
    > shed
    > .row#{$i}.col2 {
    & > i:nth-of-type(5):before {
      top: 1rem;
      border: none;
    }
  }
}
// ## house
//house

div > div > house > label {
  & > i:nth-of-type(5) {
    width: 13rem;
    height: 3rem;
    top: 1rem;
    border-bottom-color: $tre1;
    box-shadow: 0 0.25rem 0 $tre1;
    border-radius: 50%;
    left: -0.5rem;
    z-index: 1;
    display: none;

    &:after {
      border: 0.5rem solid $none;
      border-top: 1rem solid $r1;
      top: 2.75rem;
      left: 1rem;
      transform: rotate(5deg);
      z-index: -1 !important;
      filter: drop-shadow(2rem 0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1);
    }

    &:before {
      border: 0.5rem solid $none;
      border-top: 1rem solid $r4;
      top: 3.25rem;
      left: 7rem;
      transform: rotate(-5deg);
      z-index: -1 !important;
      filter: drop-shadow(2rem -0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1);
    }
  }
}

$row: 1, 2, 3, 4;

@each $i in $row {
  $col: 1, 2, 3, 4;

  @each $x in $col {
    .hs.row#{$i}.col#{$x}:checked ~ {
      div > div > house > .row#{$i}.col#{$x} {
        //back
        &:before {
          width: 1.5rem;
          height: 1rem;
          background: currentColor;
          border-radius: 0.25rem;
          top: -1.35rem;
          left: 3rem;
          box-shadow: 2rem 2rem 0 currentColor;
          filter: hue-rotate(-10deg) brightness(1.1);
          opacity: 0.7;
        }
        //bricks
        &:after {
          filter: hue-rotate(-10deg) brightness(1.1);
          width: 2rem;
          height: 1rem;
          background: currentColor;
          border-radius: 0.25rem;
          top: 0.5rem;
          left: -0.15rem;
          box-shadow: 0 2rem 0 currentColor,
            //
            0
              4rem
              0
              currentColor,
            //
            0
              6rem
              0
              currentColor,
            //
            0
              8rem
              0
              currentColor,
            //
            0
              10rem
              0
              currentColor,
            //
            //
            10.75rem
              0
              0
              currentColor,
            //
            10.75rem
              2rem
              0
              currentColor,
            //
            10.75rem
              4rem
              0
              currentColor,
            //
            10.75rem
              6rem
              0
              currentColor,
            //
            10.75rem
              8rem
              0
              currentColor,
            //
            10.75rem
              10rem
              0
              currentColor;
        }
        //window
        & > i:nth-of-type(4) {
          //window
          width: 5rem;
          right: 0;
          margin: auto;
          top: 3.5rem;
          background: $ds;
          height: 5rem;
          border-radius: 0.3rem;
          box-shadow: inset 0 0 0 0.5rem $ls,
            //
            inset
              0
              0
              0.5rem
              $ds,
            //
            inset
              0
              0
              0
              0.5rem
              currentColor,
            //
            inset
              0
              0
              1rem
              1rem
              $ds,
            //
            inset
              1rem
              0
              0
              $r1,
            //
            inset -1.25rem
              0
              0
              $r1,
            //
            inset
              0 -2rem
              0
              #000,
            //
            inset
              0 -3.5rem
              0
              $tre2;

          &:after {
            width: 4.5rem;
            height: 0.25rem;
            left: 0.25rem;
            top: 2.4rem;
            background: currentColor;
            border-radius: 0.0001rem;
            box-shadow: inset 0 0 0 0.5rem $ls,
              //
              0
                3rem
                0
                0.3rem
                lighten($r15, 20%),
              //
              0
                3.5rem
                0.35rem
                0.25rem
                $ds;
          }

          &:before {
            width: 0.25rem;
            height: 4.5rem;
            left: 2.4rem;
            top: 0.25rem;
            background: currentColor;
            box-shadow: inset 0 0 0 0.5rem $ls;
          }
        }
        //random window
        &.col#{random(4)} > i:nth-of-type(4) {
          border-radius: 2.25rem 2.25rem 0.3rem 0.3rem;
        }
        //roof
        & > i:nth-of-type(2) {
          border: solid $none 1rem;
          border-bottom: solid $r3 4rem;
          width: calc(100% + 2.1rem);
          left: -1rem;
          top: -2.5rem;
          box-shadow: 0 0.25rem 0 $tre2, 0 1.5rem 1rem -1rem $shadow;

          &:before {
            width: 100%;
            height: 3rem;
            border-radius: 50%;
            background: repeating-linear-gradient(
              $none,
              $none 0.75rem,
              rgba($ds, 0.4),
              $none 1rem
            );
          }
          //chimney
          &:after {
            width: 3rem;
            height: 4rem;
            border: 0.5rem solid $none;
            border-top: 0.5rem solid $base;
            top: -2rem;
            box-shadow: inset 0 4rem 0 $base,
              //
              0 -0.5rem
                0 -0.2rem
                $dark,
              //
              0 -3rem
                0 -1rem
                $smoke;
            border-radius: 0.5rem;
            left: -0.25rem;
            filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(#000, 0.15));
          }
        }
        //smoke
        & > i:nth-of-type(1) {
          &:before,
          &:after {
            top: -8.5rem;
            left: -1rem;
            animation: smoke 8s linear infinite;
          }

          &:before {
            animation: smoke 7.25s 3.75s linear infinite;
          }
        }

        &:nth-of-type(even) {
          i:nth-of-type(2):after {
            left: 9.5rem;
          }
          //smoke
          & > i:nth-of-type(1) {
            left: 10rem;
          }
        }
      }
      //no roof
      div > div > house > .row#{$i + 1}.col#{$x} {
        i:nth-of-type(2),
        i:nth-of-type(1) {
          display: none;
        }
      }
    }

    //shedhouse
    .hs.house.row#{$i
      + 1}.col#{$x}:checked
      ~ .hs.shed.row#{$i}.col#{$x}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x} {
        border-bottom: 0.25rem dashed $base;
      }

      div > div > house > .row#{$i + 1}.col#{$x} {
        &:before {
          background: $r1;
        }
      }
    }

    .hs.shed.row#{$i
      + 1}.col#{$x}:checked
      ~ .hs.house.row#{$i}.col#{$x}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x} {
        border-bottom: 0.25rem dashed $r1;
      }

      div > div > house > .row#{$i + 1}.col#{$x} {
        &:before {
          background: $base;
        }
      }
    }
    //chimney
    .hs.house.row#{$i}.col#{$x
      -
      3}:not(:checked)
      ~ .hs.house.row#{$i}.col#{$x}:checked
      ~ .hs.house.row#{$i}.col#{$x
      + 1}:not(:checked)
      ~ .hs.house.row#{$i
      -
      2}.col#{$x}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x} {
        & > i:nth-of-type(2):after {
          //chimney
          left: 9.5rem;
        }
        //smoke
        & > i:nth-of-type(1) {
          left: 11rem;
        }
      }
    }
    //center chimney
    .hs.row#{$i
      -
      1}.col#{$x
      -
      1}:checked
      ~ .hs.row#{$i
      -
      1}.col#{$x}:not(:checked)
      ~,
    .hs.house.row#{$i
      -
      1}.col#{$x}:not(:checked)
      ~ .hs.house.row#{$i
      -
      2}.col#{$x}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x} {
        & > i:nth-of-type(2):after {
          //chimney
          left: 4.75rem;
          height: 3rem;
          box-shadow: inset 0 6rem 0 $base,
            //
            0 -0.5rem
              0 -0.2rem
              $dark,
            //
            0 -2.25rem
              0 -1rem
              $smoke;
          border-radius: 0 0 1rem 1rem;
        }
        //smoke
        & > i:nth-of-type(1) {
          left: 5rem;
        }
      }
    }
    //small roof
    .hs.row#{$i}.col#{$x
      -
      1}:checked
      ~ .hs.row#{$i}.col#{$x}:checked
      ~ .hs.house.row#{$i
      -
      1}.col#{$x
      -
      1}:not(:checked)
      ~ .hs.shed.row#{$i
      -
      1}.col#{$x
      -
      1}:not(:checked)
      ~ .hs.row#{$i
      -
      1}.col#{$x}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x} {
        i:nth-of-type(2) {
          display: block;
          left: -42%;
          width: 50%;
        }

        i:nth-of-type(1),
        i:nth-of-type(2):after {
          display: none;
        }
      }
    }
    // no chimney

    .row#{$i}.col2:checked ~ .row#{$i}.col3:checked ~ {
      div > div > house > .row#{$i}.col2 {
        i:nth-of-type(1),
        i:nth-of-type(2):after {
          display: none;
        }
      }

      div > div > house > .row#{$i}.col3 {
        & > i:nth-of-type(2):after {
          //chimney
          left: -1.5rem;
        }
        //smoke
        & > i:nth-of-type(1) {
          left: -1rem;
        }
      }
    }
  }
}

/////////////////////////////

@each $i in $row {
  $col: 1, 2, 3, 4;

  @each $x in $col {
    //bunting
    .hs.row#{$i}.col#{$x}:checked
      ~ .hs.house.row#{$i}.col#{$x
      + 1}:not(:checked)
      ~ .hs.row#{$i}.col#{$x
      + 2}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x + 1} {
        & > i:nth-of-type(5) {
          display: block;
          width: 105%;
        }
      }
    }
    //house to shed bunting
    .hs.row#{$i}.col#{$x}:checked
      ~ .hs.house.row#{$i}.col#{$x
      + 1}:not(:checked)
      ~ .hs.shed.row#{$i}.col#{$x
      + 2}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x + 1} {
        & > i:nth-of-type(5) {
          display: block;
          width: 115%;
        }
      }
    }
  }

  //bunting
  $col: 1, 2, 3, 4;

  @each $x in $col {
    .hs.row#{$i}.col#{$x}:checked
      ~ .hs.house.row#{$i}.col#{$x
      + 1}:not(:checked)
      ~ .hs.house.row#{$i}.col#{$x
      + 2}:not(:checked)
      ~ .hs.row#{$i}.col#{$x
      + 3}:checked
      ~ {
      div > div > house > .row#{$i}.col#{$x + 1} {
        & > i:nth-of-type(5) {
          display: block;
          width: 205%;

          &:after {
            border: 0.5rem solid $none;
            border-top: 1rem solid $r1;
            top: 2.75rem;
            left: 3.5rem;
            transform: rotate(4deg);
            z-index: -1 !important;
            filter: drop-shadow(2.5rem 0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1);
          }

          &:before {
            border: 0.5rem solid $none;
            border-top: 1rem solid $r4;
            top: 3.25rem;
            left: 13.5rem;
            transform: rotate(-4deg);
            z-index: -1 !important;
            filter: drop-shadow(2.5rem -0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1);
          }
        }
      }
    }

    //bricks
    .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ {
      div > div > house > .row#{$i}.col#{$x} {
        //bricks
        &:after {
          box-shadow: 0 2rem 0 currentColor,
            //
            0
              4rem
              0
              currentColor,
            //
            0
              6rem
              0
              currentColor,
            //
            0
              8rem
              0
              currentColor,
            //
            0
              10rem
              0
              currentColor;
        }
      }
    }

    //fixed
    .hs.row#{$i}.col#{$x - 1}:checked ~ {
      .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ {
        div > div > house > .row#{$i}.col#{$x} {
          //bricks
          &:after {
            box-shadow: -2rem #{random(3) + 3}rem 0 rgba($b1, 0.5),
              //
              0
                #{random(3) +
                5}rem
                0
                currentColor;
          }
        }
      }
    }

    //bricks
    .hs.row#{$i}.col#{$x - 1}:checked ~ {
      .hs.row#{$i}.col#{$x}:checked ~ {
        div > div > house > .row#{$i}.col#{$x} {
          &:after {
            box-shadow: -2rem 3rem 0 rgba($b1, 0.5),
              //
              0
                5rem
                0
                currentColor,
              //
              //
              10.75rem
                0
                0
                currentColor,
              //
              10.75rem
                2rem
                0
                currentColor,
              //
              10.75rem
                4rem
                0
                currentColor,
              //
              10.75rem
                6rem
                0
                currentColor,
              //
              10.75rem
                8rem
                0
                currentColor,
              //
              10.75rem
                10rem
                0
                currentColor;
          }
        }
      }
    }
  }

  $row: 1, 2, 3;

  @each $i in $row {
    $col: 1, 2, 3, 4;

    @each $x in $col {
      //prop
      .hs.row#{$i}.col#{$x}:checked ~ {
        div > div > house > .row#{$i}.col#{$x} {
          border-bottom: 0.75rem solid $tre2;

          & > i:nth-of-type(3) {
            //prop
            width: 2rem;
            height: 325%;
            border-left: 0.75rem solid $tre2;
            border-right: 0.75rem solid $tre2;
            top: 12rem;
            background: repeating-linear-gradient(
              $none,
              $none 4rem,
              $tre2,
              $tre2 4.5rem
            );
            z-index: -200;

            &:before {
              width: 12rem;
              height: 12rem;
              border: 1.15rem dashed $none;
              border-bottom-color: $tre2;
              box-shadow: 0 0.75rem 0 $tre2, inset 0 -0.75rem 0 $tre2;
              top: 0.5rem;
              border-radius: 5rem;
              left: -0.5rem;
              transform: scaleY(-1);
            }

            &:after {
              width: 2rem;
              height: 100%;
              border-left: 0.75rem solid $tre2;
              border-right: 0.75rem solid $tre2;
              left: 9.8rem;
              background: repeating-linear-gradient(
                $none,
                $none 4rem,
                $tre2,
                $tre2 4.5rem
              );
            }
          }

          &:nth-of-type(n + 5) > i:nth-of-type(3) {
            height: 225%;
          }

          &:nth-of-type(n + 9) > i:nth-of-type(3) {
            height: 13.5rem;
          }
        }
      }

      .hs.row#{$i + 1}.col#{$x}:checked ~ {
        .hs.row#{$i}.col#{$x}:checked ~ {
          div > div > house > .row#{$i}.col#{$x} {
            border-bottom: none;

            & > i:nth-of-type(3) {
              display: none !important;
            }
          }
        }
      }
    }
  }
}
//bottom row
@for $i from 23 through 26 {
  [id^="cb#{$i}"]:checked ~ div > div > house > [for="ncb#{$i}"] {
    box-shadow: 0 0.5rem 0 $base;

    & > i:nth-of-type(3) {
      //door
      width: 4rem;
      height: 9rem;
      right: 0;
      margin: auto;
      top: 3.5rem;
      border-radius: 0.5rem;
      //bushes
      &:before {
        width: 7rem;
        height: 4rem;
        left: -8em;
        top: 6rem;
        border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
        background: $r4;
        box-shadow: 3rem 1rem 0 -1rem $r41,
          //
          14rem
            0.5rem
            0 -0.5rem
            $r42,
          //
          10rem
            1rem
            0 -1.25rem
            $r4;
      }
      //flowers
      &:after {
        width: 0.75rem;
        height: 0.75rem;
        background: #fff;
        border-radius: 50%;
        left: -5rem;
        top: 7rem;
        box-shadow: 2rem 0.5rem 0 -0.1rem #fff,
          //
          1rem
            1.5rem
            0 -0.05rem
            #fff,
          //
          15rem
            1.5rem
            0 -0.05rem
            #fff,
          //
          16rem
            1rem
            0 -0.1rem
            #fff;
      }
    }
    //differences
    &.col3 > i:nth-of-type(3) {
      //bushes
      &:before {
        height: 3rem;
        left: -8.5em;
        top: 7rem;
        background: $r4;
        box-shadow: 3rem 0.75rem 0 -1rem $r41,
          //
          14rem
            1rem
            0
            0.5rem
            $r4,
          //
          10rem
            0.5rem
            0 -0.5rem
            $r42;
      }
      //flowers
      &:after {
        left: -7rem;
      }
    }

    &.col2 > i:nth-of-type(3) {
      //bushes
      &:before {
        height: 3.5rem;
        width: 6rem;
        left: -7em;
        top: 6.5rem;
        background: $r4;
        box-shadow: 3rem 0.75rem 0 -1rem $r41,
          //
          13rem
            1rem
            0
            0.5rem
            $r42,
          //
          9rem
            0.5rem
            0 -0.5rem
            $r41;
      }
      //flowers
      &:after {
        left: -7rem;
      }
    }

    &.col1 > i:nth-of-type(3) {
      //bushes
      &:before {
        width: 6rem;
        height: 3rem;
        left: -6.5em;
        top: 7rem;
        border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem;
        background: $r41;
        box-shadow: 3rem 0.5rem 0 -0.75rem $r4,
          //
          9rem
            0.5rem
            0 -0.5rem
            $r4,
          //
          12rem -0.25rem
            0
            0.5rem
            $r42;
      }
      //flowers
      &:after {
        width: 0.75rem;
        height: 0.75rem;
        background: #fff;
        border-radius: 50%;
        left: -5rem;
        top: 7rem;
        box-shadow: 2rem 0.5rem 0 -0.1rem #fff,
          //
          1rem
            0.75rem
            0 -0.05rem
            #fff,
          //
          16rem
            1.5rem
            0 -0.05rem
            #fff,
          //
          15rem
            1rem
            0 -0.1rem
            #fff;
      }
    }
  }

  #cb#{$i}:checked
    ~ #cb#{$i
    + 1}:not(:checked)
    ~ div
    > div
    > house
    > [for="ncb#{$i}"],
  #cb23:checked
    ~ #cb24:checked
    ~ #cb25:checked
    ~ #cb26:checked
    ~ div
    > div
    > house
    > [for="ncb24"],
  #cb26:checked ~ div > div > house > [for="ncb26"] {
    & > i:nth-of-type(3) {
      //door
      background: radial-gradient(
          circle at 80% center,
          $r2 0.25rem,
          $none 0.25rem
        ),
        radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $r3;
      box-shadow: inset 0 0.5rem 1rem $shadow;
    }

    &.col#{random(2 + 2)} > i:nth-of-type(3) {
      //door
      background: radial-gradient(
          circle at 80% center,
          $r2 0.25rem,
          $none 0.25rem
        ),
        radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $tre1;
    }

    &.col#{random(2)} > i:nth-of-type(3) {
      //door
      background: radial-gradient(
          circle at 80% center,
          $r2 0.25rem,
          $none 0.25rem
        ),
        radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem),
        $smoke;
    }

    & > i:nth-of-type(4) {
      transform: scale(0.5);
      //window
      box-shadow: inset 0 0 0 0.5rem $ls,
        //
        inset
          0
          0
          0.5rem
          $ds,
        //
        inset
          0
          0
          0
          0.5rem
          $r3,
        //
        inset
          0
          0
          1rem
          1rem
          $ds,
        //
        inset
          0 -2rem
          0
          #000,
        //
        inset
          0 -3.5rem
          0
          $tre2;

      &:after {
        height: 0.5rem;
        top: 2.3rem;
        background: $r3;
        box-shadow: inset 0 0 0 0.5rem $ls;
      }

      &:before {
        width: 0.5rem;
        left: 2.3rem;
        background: $r3;
      }
    }
  }
}

//castle

.hs.house.row4.col2:not(:checked)
  ~ .hs.row4.col3:checked
  ~ .hs.house.row4.col4:not(:checked)
  ~ .hs.house.row3.col2:not(:checked)
  ~ .hs.row3.col3:checked
  ~ .hs.house.row3.col4:not(:checked)
  ~ .hs.house.row2.col2:not(:checked)
  ~ .hs.row2.col3:checked
  ~ .hs.house.row2.col4:not(:checked)
  ~ .hs.house.row1.col2:not(:checked)
  ~ .hs.row1.col3:checked
  ~ .hs.house.row1.col4:not(:checked)
  ~ {
  div > div > house > .row1.col3,
  div > div > house > .row2.col3,
  div > div > house > .row3.col3,
  div > div > house > .row4.col3 {
    background: $stone;
    color: $stone;
    z-index: 310;

    & > i:nth-of-type(4),
    & > i:nth-of-type(3) {
      border-radius: 50% 50% 0.3rem 0.3rem;
    }

    & > i:nth-of-type(3) {
      height: 10rem;
      width: 4.5rem;
      top: 2.5rem;

      &:before {
        top: 8rem;
      }

      &:after {
        top: 8rem;
      }
    }

    & > i:nth-of-type(4) {
      &:after {
        box-shadow: inset 0 0 0 0.5rem $ls;
      }
    }
  }

  div > div > house > .row1.col3 {
    & > i:nth-of-type(1) {
      display: none;
    }

    & > i:nth-of-type(2) {
      border: 1rem solid $none;
      border-left: 3rem solid $r1;
      top: -8.5rem;
      left: 4.25rem;
      box-shadow: none;

      &:before {
        top: 3.25rem;
        left: -8.25rem;
        background: $stone;
        width: 2.75rem;
        height: 5rem;
        border-radius: 0.25rem 0.25rem 50% 50%;
        box-shadow: 4rem 0 0 $stone,
          //
          8rem 0 0 $stone,
          //
          12rem 0 0 $stone;
      }

      &:after {
        width: 14.5rem;
        height: 3rem;
        top: 6.25rem;
        border-radius: 0 0 2rem 2rem;
        background: $stone;
        left: -8.25rem;
        filter: none;
        border: none;
        box-shadow: none;
      }
    }

    & > i:nth-of-type(4) {
      &:before {
        box-shadow: inset 0 0 0 0.5rem $ls,
          //
          -2rem -12.5rem 0 $tre2;
      }
    }
  }
}

//lighthouse

.hs.house.row4.col1:not(:checked)
  ~ .hs.house.row4.col2:checked
  ~ .hs.house.row4.col3:not(:checked)
  ~ .hs.house.row3.col1:not(:checked)
  ~ .hs.shed.row3.col2:checked
  ~ .hs.house.row3.col3:not(:checked)
  ~ .hs.house.row2.col1:not(:checked)
  ~ .hs.house.row2.col2:checked
  ~ .hs.house.row2.col3:not(:checked)
  ~ .hs.house.row1.col1:not(:checked)
  ~ .hs.shed.row1.col2:checked
  ~ .hs.house.row1.col3:not(:checked)
  ~ {
  div > div > house > .row1.col2,
  div > div > house > .row2.col2,
  div > div > house > .row3.col2,
  div > div > house > .row4.col2 {
    z-index: 310;
    background: none;
    border: none;
    //back
    &:before,
    &:after {
      width: 80%;
      height: 105%;
      background: linear-gradient(to right, $s1, currentColor);
      transform: skewX(-2deg);
      border-radius: 0.1rem 0.1rem 50% 50% / 50% 50% 0.25rem 0.25rem;
      top: 0;
      left: -1rem;
      box-shadow: none;
      filter: none;
      opacity: 1;
    }

    &:after {
      left: auto;
      right: -1rem;
      transform: skewX(2deg);
      background: linear-gradient(to right, $none, currentColor, $sd);
    }

    & > i:nth-of-type(4) {
      border-radius: 50%;
    }

    & > i:nth-of-type(3) {
      border-radius: 2rem 2rem 0.5rem 0.5rem;
    }

    & > i:nth-of-type(4) {
      &:after {
        box-shadow: inset 0 0 0 0.5rem $ls;
      }
    }
  }
  //light
  div > div > house > .row1.col2 {
    & > i:nth-of-type(1) {
      display: none;
    }

    & > i:nth-of-type(2) {
      width: 8rem;
      height: 12rem;
      border: 0.5rem solid $none;
      border-top: 1rem solid $smoke;
      border-bottom: 6rem solid $dark;
      border-radius: 0.5rem 0.5rem 0 0;
      top: -12rem;
      left: 0;
      right: 0;
      margin: auto;
      background: repeating-linear-gradient(
          to right,
          $smoke 0.5rem,
          $smoke 1rem,
          $none 1rem,
          $none 3.25rem
        ),
        //
        repeating-linear-gradient(
            45deg,
            $dark,
            $dark 0.2rem,
            $none 0.5rem,
            $none 1rem
          ),
        //
        repeating-linear-gradient(
            -45deg,
            $dark,
            $dark 0.2rem,
            $none 0.5rem,
            $none 1rem
          );
      box-shadow: inset 0 -1rem 0 $smoke;
      background-size: cover;

      &:before {
        border: 3rem solid $none;
        width: 6.5rem;
        box-shadow: inset 0 3rem 0 $dark;
        border-bottom-color: $tre2;
        top: -10rem;
        right: 0;
        margin: auto;
        height: 9rem;
        border-radius: 0;
        background: none;
      }

      &:after {
        width: 12.5rem;
        background: repeating-linear-gradient(
          to right,
          $smoke,
          $smoke 0.5rem,
          $none 0.5rem,
          $none 1.32rem
        );
        height: 5rem;
        top: 6rem;
        border-radius: 0.5rem;
        border: none;
        border-bottom: 1rem solid $smoke;
        border-top: 0.5rem solid $smoke;
        left: -10rem;
        right: -10rem;
        margin: auto;
        box-shadow: none;
        display: block;
      }
    }
  }

  div > div > house > .row3.col2 {
    //back
    color: $stone;

    &:before,
    &:after {
      left: -0.5rem;
    }

    &:after {
      left: auto;
      right: -0.5rem;
    }
  }

  div > div > house > .row2.col2 {
    //back
    &:before,
    &:after {
      left: 0;
    }

    &:after {
      left: auto;
      right: 0;
    }
  }

  div > div > house > .row1.col2 {
    color: $stone;
    //back
    &:before,
    &:after {
      left: 0.5rem;
    }

    &:after {
      left: auto;
      right: 0.5rem;
    }
  }

  text {
    transform: scale(1) !important;
    z-index: 410;
    transition: all 0.5s 1s ease-in-out;
    opacity: 1;

    welldone {
      display: block;
    }

    gameover {
      display: none;
    }
  }
}

.hs.row2.col2:checked ~ {
  div > div > house > .row2.col2 {
    & > i:nth-of-type(4) {
      border-radius: 50% !important;
    }

    & > i:nth-of-type(4) {
      &:after {
        box-shadow: inset 0 0 0 0.5rem $ls;
      }
    }
  }
}

.hs.house.row4.col2:checked ~ .hs.shed.row3.col2:checked ~ {
  div > div > house > .row3.col2 {
    & > i:nth-of-type(4) {
      border-radius: 50%;
    }

    & > i:nth-of-type(4) {
      &:after {
        box-shadow: inset 0 0 0 0.5rem $ls;
      }
    }
  }
}
// ## logic
//
//
//
//

house label,
shed label {
  opacity: 0;

  & *,
  &:after,
  &:before {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translate3d(0, -12rem, 0);
  }

  99% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes popup {
  0% {
    opacity: 0;
    transform: translate3d(0, 12rem, 0);
  }

  99% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

$row: 1, 2, 3, 4;

@each $i in $row {
  $col: 1, 2, 3, 4;
  //shed or house
  @each $x in $col {
    .shed.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x},
    .house.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} {
      opacity: 1;

      &:after,
      & *:after {
        animation: pop 0.1s linear forwards;
      }

      &:before,
      & *:before {
        animation: popup 0.1s linear forwards;
      }
    }

    .shed.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} {
      & > i:nth-of-type(5) {
        display: none !important;
      }
    }

    //right
    .house.row#{$i}.col#{$x}:checked
      ~ div
      > div
      > hbtn
      > .row#{$i}.col#{$x
      -
      1} {
      z-index: 100;
    }
    //left
    .house.row#{$i}.col#{$x}:checked
      ~ div
      > div
      > hbtn
      > .row#{$i}.col#{$x
      + 1} {
      z-index: 100;
    }
    //down
    .house.row#{$i}.col#{$x}:checked
      ~ div
      > div
      > hbtn
      > .row#{$i
      + 1}.col#{$x} {
      z-index: 100;
    }
    //up
    .house.row#{$i}.col#{$x}:checked
      ~ div
      > div
      > hbtn
      > .row#{$i
      -
      1}.col#{$x} {
      z-index: 100;
    }
  }
}

$row: 1, 2, 3, 4;

@each $i in $row {
  $col: 1, 2, 3, 4;

  @each $x in $col {
    .hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} {
      z-index: 300;
    }

    .hs.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} {
      background: $base;
      z-index: 300;
      color: $base;
    }

    .hs.shed.row#{$i}.col#{$x}:checked
      ~ div
      > div
      > house
      > .row#{$i}.col#{$x} {
      background: $r1;
      color: $r1;
    }
  }
}

$col: 1, 2, 3, 4;

@each $c in $col {
  $row: 1, 2, 3;

  @each $r in $row {
    $hs: (
      0: "shed",
      1: "house"
    );

    @each $y, $z in $hs {
      //down fix
      .house.row#{$r - 1}.col#{$c}:checked ~ {
        div > div > #{$z} > .row#{$r}.col#{$c} {
          opacity: $y;
        }
      }

      .hs.row#{$r - 1}.col#{$c}:checked ~ {
        .house.row#{$r - 2}.col#{$c}:checked ~ {
          div > div > #{$z} > .row#{$r}.col#{$c} {
            opacity: $y;
          }
        }
      }

      //sh
      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        div > div > #{$z} > .row#{$r + 1}.col#{$c - 1},
        div > div > #{$z} > .row#{$r}.col#{$c - 1},
        div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
          opacity: $y;
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ {
        .house.row#{$r}.col#{$c}:checked ~ {
          //..s
          //.ssh
          //..s
          div > div > #{$z} > .row#{$r}.col#{$c - 2},
          div > div > #{$z} > .row#{$r + 1}.col#{$c - 1},
          div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r}.col#{$c - 2}:checked ~ {
        .hs.row#{$r}.col#{$c - 1}:checked ~ {
          .house.row#{$r}.col#{$c}:checked ~ {
            //.s
            //sssh
            //.s
            div > div > #{$z} > .row#{$r}.col#{$c - 3},
            div > div > #{$z} > .row#{$r + 1}.col#{$c - 2},
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 3}:checked ~ {
        .hs.row#{$r}.col#{$c - 2}:checked ~ {
          .hs.row#{$r}.col#{$c - 1}:checked ~ {
            .house.row#{$r}.col#{$c}:checked ~ {
              //s
              //sssh
              //s
              div > div > #{$z} > .row#{$r + 1}.col#{$c - 3},
              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
          //s
          //s
          //ssh
          div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
          .hs.row#{$r - 2}.col#{$c - 3}:checked ~ {
            //ss
            //s
            //sssh
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ {
            //sss
            //s
            //sssh
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ {
            //ssss
            //s
            //sssh
            div > div > #{$z} > .row#{$r - 2}.col#{$c} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
          .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
            //sss
            //.s
            //.ssh
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ {
            //.sss
            //.s
            //.ssh
            div > div > #{$z} > .row#{$r - 2}.col#{$c} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
          .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
            //..ss
            //..s
            //..sh
            div > div > #{$z} > .row#{$r - 2}.col#{$c},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ {
            //sss
            //s.s
            //..sh
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ {
            //sss
            //s.s
            //s.sh
            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
        .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
          //..sh
          //..s
          //..s
          div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
        .hs.row#{$r}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          1}:checked
          ~ .house.row#{$r}.col#{$c}:checked
          ~ {
          //.ssh
          //.s.
          //.s.
          div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
        .hs.row#{$r}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          1}:checked
          ~ .house.row#{$r}.col#{$c}:checked
          ~ {
          //sssh
          //s
          //s
          div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c - 3}:checked ~ {
        .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //sssh
            //s
            //ss
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //sssh
            //s
            //sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //sssh
            //s
            //ssss
            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c - 2}:checked ~ {
        .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //.ssh
            //.s
            //sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 3},
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 2},
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //.ssh
            //.s
            //.sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c - 1}:checked ~ {
        .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //..sh
            //..s
            //.sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 1},
            div > div > #{$z} > .row#{$r + 2}.col#{$c},
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //..sh
            //..s
            //sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c - 1}:checked ~ {
          .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //..sh
            //s.s
            //sss
            div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r
          + 1}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r
          + 1}.col#{$c
          -
          1}:checked
          ~ {
          .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //s.sh
            //s.s
            //sss
            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c - 2}:checked ~ {
        .hs.row#{$r
          + 1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          + 1}.col#{$c
          -
          1}:checked
          ~ {
          .hs.row#{$r}.col#{$c
            -
            1}:checked
            ~ .house.row#{$r}.col#{$c}:checked
            ~ {
            //..sh
            //.ss
            //ss
            div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r
          + 1}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r
          + 1}.col#{$c
          -
          1}:checked
          ~ .house.row#{$r
          + 1}.col#{$c}:checked
          ~ {
          //s
          //s.sh
          //sss
          div > div > #{$z} > .row#{$r}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          1}:checked
          ~ .house.row#{$r}.col#{$c}:checked
          ~ {
          .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
            //ss
            //s.sh
            //sss
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
          //.ss
          //..sh
          div > div > #{$z} > .row#{$r - 2}.col#{$c - 1},
          div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ {
          .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
            //ss
            //.ss
            //..sh
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ {
            .hs.row#{$r - 3}.col#{$c - 2}:checked ~ {
              //ss
              //.ss
              //..ss
              //...h
              div > div > #{$z} > .row#{$r - 3}.col#{$c - 2},
              div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r - 1}.col#{$c}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ {
            .hs.row#{$r - 3}.col#{$c + 2}:checked ~ {
              //..ss
              //sss
              //s
              //h
              div > div > #{$z} > .row#{$r - 3}.col#{$c + 3},
              div > div > #{$z} > .row#{$r - 3}.col#{$c + 2} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ {
          //s
          //sss
          //s.sh
          div > div > #{$z} > .row#{$r}.col#{$c - 3},
          div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
          div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          .hs.row#{$r
            -
            3}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            //s
            //sss
            //s.ss
            //...h
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
            div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ {
          //sss
          //s.sh
          //S
          div > div > #{$z} > .row#{$r}.col#{$c - 3},
          div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c - 3}:checked ~ {
        .hs.row#{$r}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          1}:checked
          ~ .house.row#{$r}.col#{$c}:checked
          ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ {
            //sss
            //s.sh
            //ss
            div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ {
            //sss
            //s.s
            //s.h
            div > div > #{$z} > .row#{$r}.col#{$c - 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          //sss
          //s.h
          //s
          div > div > #{$z} > .row#{$r}.col#{$c - 2},
          div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          //ssss
          //s..h
          //s
          div > div > #{$z} > .row#{$r}.col#{$c - 3},
          div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        -
        2}:checked
        ~ {
        .hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            //ssss
            //s..h
            //sss
            div > div > #{$z} > .row#{$r + 1}.col#{$c - 2},
            div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r}.col#{$c
        -
        1}:checked
        ~ .house.row#{$r}.col#{$c}:checked
        ~ {
        .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ {
            //ssss
            //s..s
            //ssh
            div > div > #{$z} > .row#{$r - 2}.col#{$c + 1},
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ {
            //ssss
            //s
            //sh
            div > div > #{$z} > .row#{$r - 2}.col#{$c + 1},
            div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ {
            //ssss
            //s..s
            //sh.s
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          //sss
          //h.ss
          //..s
          div > div > #{$z} > .row#{$r}.col#{$c + 3},
          div > div > #{$z} > .row#{$r}.col#{$c + 2},
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} {
            opacity: $y;
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 3}:checked
          ~ {
          //ssss
          //h.ss
          //...s
          div > div > #{$z} > .row#{$r}.col#{$c + 3},
          div > div > #{$z} > .row#{$r}.col#{$c + 2},
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        + 3}:checked
        ~ {
        .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 3}:checked
            ~ {
            //ssss
            //h..s
            //.sss
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
        .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 2}:checked
            ~ {
            //sss
            //h.s
            //.sss
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        + 2}:checked
        ~ {
        .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ {
          //hs
          //.sss
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} {
            opacity: $y;
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          //.sss
          //hs
          div > div > #{$z} > .row#{$r - 1}.col#{$c + 3},
          div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        + 3}:checked
        ~ {
        .house.row#{$r}.col#{$c}:checked
          ~ .hs.row#{$r}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r}.col#{$c
          + 3}:checked
          ~ {
          //...s
          //hs.s
          //.sss
          div > div > #{$z} > .row#{$r}.col#{$c + 3},
          div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
            opacity: $y;
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked
        ~ .hs.row#{$r}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r}.col#{$c
        + 3}:checked
        ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 3}:checked
          ~ {
          //.sss
          //hs.s
          //...s
          div > div > #{$z} > .row#{$r}.col#{$c + 3},
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        + 3}:checked
        ~ {
        .house.row#{$r}.col#{$c}:checked
          ~ .hs.row#{$r}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r}.col#{$c
          + 3}:checked
          ~ {
          .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
            //..ss
            //hs.s
            //.sss
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
        .house.row#{$r}.col#{$c}:checked
          ~ .hs.row#{$r}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r}.col#{$c
          + 3}:checked
          ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 3}:checked
            ~ {
            //.sss
            //hs.s
            //..ss
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 3}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 3}:checked
            ~ {
            //ssss
            //s..s
            //h.ss
            div > div > #{$z} > .row#{$r}.col#{$c + 3},
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ {
            //sss
            //s.s
            //h.ss
            div > div > #{$z} > .row#{$r}.col#{$c + 3},
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 3}:checked
          ~ {
          .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 3}:checked
            ~ {
            //.sss
            //ss.s
            //h.ss
            div > div > #{$z} > .row#{$r}.col#{$c + 3},
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c - 2}:checked ~ {
        .hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            //sss
            //s.h
            //ss
            div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
          //..sh
          //sss
          //.s.
          div > div > #{$z} > .row#{$r + 1}.col#{$c - 2},
          div > div > #{$z} > .row#{$r + 2}.col#{$c - 2},
          div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r
        + 1}.col#{$c
        -
        3}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        -
        2}:checked
        ~ .hs.row#{$r
        + 1}.col#{$c
        -
        1}:checked
        ~ {
        .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ {
          //s.sh
          //sss
          //s..
          div > div > #{$z} > .row#{$r}.col#{$c - 3},
          div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .house.row#{$r - 1}.col#{$c}:checked ~ {
          div > div > #{$z} > .row#{$r}.col#{$c + 1} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .house.row#{$r - 1}.col#{$c}:checked ~ {
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 1},
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .house.row#{$r - 1}.col#{$c}:checked ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
              div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r}.col#{$c + 3}:checked ~ {
              .house.row#{$r - 1}.col#{$c}:checked ~ {
                div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                  opacity: $y;
                }
              }
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r - 1}.col#{$c}:checked ~ {
          .house.row#{$r - 2}.col#{$c}:checked ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r - 1}.col#{$c}:checked ~ {
            .house.row#{$r - 2}.col#{$c}:checked ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 2} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r - 1}.col#{$c}:checked ~ {
              .house.row#{$r - 2}.col#{$c}:checked ~ {
                div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                  opacity: $y;
                }
              }
            }
          }
        }
      }

      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r}.col#{$c + 3}:checked ~ {
              .hs.row#{$r - 1}.col#{$c}:checked ~ {
                .house.row#{$r - 2}.col#{$c}:checked ~ {
                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                    opacity: $y;
                  }
                }
              }
            }
          }
        }
      }
      //h..s
      //s..s
      //ssss
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r}.col#{$c + 3}:checked ~ {
              .hs.row#{$r - 1}.col#{$c}:checked ~ {
                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  .house.row#{$r - 2}.col#{$c}:checked ~ {
                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                      opacity: $y;
                    }
                  }
                }
              }
            }
          }
        }
      }
      //h.s.
      //s.s.
      //sss.
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r - 1}.col#{$c}:checked ~ {
              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                .house.row#{$r - 2}.col#{$c}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                    opacity: $y;
                  }
                }
              }
            }
          }
        }
      }
      //h.ss
      //s..s
      //ssss
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r}.col#{$c + 3}:checked ~ {
              .hs.row#{$r - 1}.col#{$c}:checked ~ {
                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  .house.row#{$r - 2}.col#{$c}:checked ~ {
                    .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
                      div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                        opacity: $y;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      //h.ss
      //s.s.
      //sss.
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r - 1}.col#{$c}:checked ~ {
              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                .house.row#{$r - 2}.col#{$c}:checked ~ {
                  .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                      opacity: $y;
                    }
                  }
                }
              }
            }
          }
        }
      }
      //h...
      //s.ss
      //sss.
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r - 1}.col#{$c}:checked ~ {
              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                .house.row#{$r - 2}.col#{$c}:checked ~ {
                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                    opacity: $y;
                  }
                }
              }
            }
          }
        }
      }
      //h..s
      //s.ss
      //sss.
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            .hs.row#{$r - 1}.col#{$c}:checked ~ {
              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  .house.row#{$r - 2}.col#{$c}:checked ~ {
                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                      opacity: $y;
                    }
                  }
                }
              }
            }
          }
        }
      }
      //h...
      //ss..
      //.ss.
      .hs.row#{$r}.col#{$c}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }
      //h...
      //ss..
      //.sss
      .hs.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }
      //h...
      //ss.s
      //.sss
      .hs.row#{$r}.col#{$c}:checked
        ~ .hs.row#{$r}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r}.col#{$c
        + 2}:checked
        ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ {
          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }
      //h..s
      //ss.s
      //.sss
      .hs.row#{$r}.col#{$c}:checked
        ~ .hs.row#{$r}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r}.col#{$c
        + 2}:checked
        ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          .house.row#{$r - 2}.col#{$c - 1}:checked ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }
      //h.ss
      //ss.s
      //.sss
      .hs.row#{$r}.col#{$c}:checked
        ~ .hs.row#{$r}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r}.col#{$c
        + 2}:checked
        ~ {
        .hs.row#{$r
          -
          1}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          .house.row#{$r
            -
            2}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }
      //h.ss
      //sss
      //..ss
      //not done yet
      .hs.row#{$r}.col#{$c + 2}:checked ~ {
        .hs.row#{$r
          -
          1}.col#{$c}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          -
          1}.col#{$c
          + 2}:checked
          ~ {
          .house.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 3}:checked
            ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
              opacity: $y;
            }
            //experiment
            div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
              opacity: $y;
            }
          }
        }
      }

      .house.row#{$r}.col#{$c}:checked ~ {
        //hs
        div > div > #{$z} > .row#{$r}.col#{$c + 1} {
          opacity: $y;
        }
        //.s
        //hss
        //.s
        .hs.row#{$r}.col#{$c + 1}:checked ~ {
          div > div > #{$z} > .row#{$r}.col#{$c + 2},
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 1},
          div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
            opacity: $y;
          }
          //..s
          //hsss
          //..s
          .hs.row#{$r}.col#{$c + 2}:checked ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 3},
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
              opacity: $y;
            }
            //...s
            //hsss
            //...s
            .hs.row#{$r}.col#{$c + 3}:checked ~ {
              div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
        .house.row#{$r}.col#{$c}:checked ~ {
          .hs.row#{$r}.col#{$c + 1}:checked ~ {
            //hs
            //.ss
            //.s
            div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
            div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c + 1}:checked ~ {
        .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
          .house.row#{$r}.col#{$c}:checked ~ {
            .hs.row#{$r}.col#{$c + 1}:checked ~ {
              //hs
              //.s
              //sss
              div > div > #{$z} > .row#{$r + 2}.col#{$c},
              div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 2}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
          .house.row#{$r}.col#{$c}:checked ~ {
            .hs.row#{$r}.col#{$c + 1}:checked ~ {
              //hs
              //.s
              //.sss
              div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 3}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c + 1}:checked ~ {
          .house.row#{$r}.col#{$c}:checked ~ {
            .hs.row#{$r}.col#{$c + 1}:checked ~ {
              //hs
              //.s.s
              //.sss
              div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 3}:checked
        ~ {
        .hs.row#{$r
          + 1}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r
          + 1}.col#{$c
          + 3}:checked
          ~ {
          .house.row#{$r}.col#{$c}:checked ~ {
            .hs.row#{$r}.col#{$c + 1}:checked ~ {
              //hs.s
              //.s.s
              //.sss
              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                opacity: $y;
              }
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
        .house.row#{$r}.col#{$c}:checked
          ~ .hs.row#{$r}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r}.col#{$c
          + 2}:checked
          ~ {
          //hss
          //..ss
          //..s
          div > div > #{$z} > .row#{$r + 1}.col#{$c + 3},
          div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c + 2}:checked ~ {
        .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
          .house.row#{$r}.col#{$c}:checked
            ~ .hs.row#{$r}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ {
            //hss
            //..s
            //.sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c + 1},
            div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 2}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c + 2}:checked ~ {
          .house.row#{$r}.col#{$c}:checked
            ~ .hs.row#{$r}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ {
            //hss
            //..s
            //sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
        .house.row#{$r}.col#{$c}:checked
          ~ .hs.row#{$r}.col#{$c
          + 1}:checked
          ~ .hs.row#{$r}.col#{$c
          + 2}:checked
          ~ .hs.row#{$r}.col#{$c
          + 3}:checked
          ~ {
          //hsss
          //...s
          //...s
          div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} {
            opacity: $y;
          }
        }
      }

      .hs.row#{$r + 2}.col#{$c + 3}:checked ~ {
        .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
          .house.row#{$r}.col#{$c}:checked
            ~ .hs.row#{$r}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r}.col#{$c
            + 3}:checked
            ~ {
            //hsss
            //...s
            //..ss
            div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 3}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
          .house.row#{$r}.col#{$c}:checked
            ~ .hs.row#{$r}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r}.col#{$c
            + 3}:checked
            ~ {
            //hsss
            //...s
            //.sss
            div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} {
              opacity: $y;
            }
          }
        }
      }

      .hs.row#{$r
        + 2}.col#{$c
        + 1}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 2}:checked
        ~ .hs.row#{$r
        + 2}.col#{$c
        + 3}:checked
        ~ {
        .hs.row#{$r + 1}.col#{$c + 3}:checked ~ {
          .house.row#{$r}.col#{$c}:checked
            ~ .hs.row#{$r}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r}.col#{$c
            + 3}:checked
            ~ {
            //hsss
            //...s
            //ssss
            div > div > #{$z} > .row#{$r + 2}.col#{$c} {
              opacity: $y;
            }
          }
        }
      }

      ////////////////////////////////
      //UP
      //x...
      //x...
      //x...
      //x...
      .house.row#{$r + 1}.col#{$c}:checked ~ {
        div > div > #{$z} > .row#{$r}.col#{$c} {
          opacity: $y;
        }
        //RIGHT
        //xxx.
        //x.xx
        //xx.x
        //...x
        .hs.row#{$r}.col#{$c - 3}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c - 2} {
                opacity: $y;
              }
            }
          }
        }
        //RIGHT
        //xxx.
        //x.xx
        //xx.x
        //...x
        .hs.row#{$r}.col#{$c - 3}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c - 2} {
                opacity: $y;
              }
            }
          }
        }
        //RIGHT
        //....
        //.xxx
        //xx.x
        //...x
        .hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
              opacity: $y;
            }
          }
        }
        //RIGHT
        //.xxx
        //.x.x
        //xx.x
        //...x
        .hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
        }

        .hs.row#{$r}.col#{$c}:checked ~ {
          //RIGHT
          //....
          //xxxx
          //x..x
          //...x
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            div > div > #{$z} > .row#{$r}.col#{$c - 3} {
              opacity: $y;
            }
          }
          //RIGHT
          //....
          //.xxx
          //.x.x
          //...x
          .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            div > div > #{$z} > .row#{$r}.col#{$c - 2} {
              opacity: $y;
            }
          }
          //RIGHT
          //.xxx
          //.x.x
          //...x
          //...x
          .hs.row#{$r - 1}.col#{$c}:checked ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
                opacity: $y;
              }
            }
          }
          //RIGHT
          //.xxx
          //.x.x
          //.x.x
          //...x
          .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
                opacity: $y;
              }

              div > div > #{$z} > .row#{$r}.col#{$c - 2} {
                opacity: $y;
              }
            }
          }
          //RIGHT
          //.xxx
          //.x.x
          //xx.x
          //...x
          .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
            .hs.row#{$r
              -
              1}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              1}.col#{$c}:checked
              ~ {
              .hs.row#{$r
                -
                2}.col#{$c
                -
                2}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                -
                1}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c}:checked
                ~ {
                div > div > #{$z} > .row#{$r}.col#{$c - 4} {
                  opacity: $y;
                }
              }
            }
          }
          //RIGHT
          //.xxx
          //xx.x
          //x..x
          //...x
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
          //RIGHT
          //xxxx
          //x..x
          //...x
          //...x
          .hs.row#{$r - 1}.col#{$c}:checked ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
          //RIGHT
          //xxxx
          //x..x
          //x..x
          //...x
          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
        }
        //LEFT
        //....
        //....
        //xxxx
        //x...
        .hs.row#{$r}.col#{$c}:checked ~ {
          div > div > #{$z} > .row#{$r}.col#{$c + 1} {
            opacity: $y;
          }
          //new bit
          .hs.row#{$r}.col#{$c + 1}:checked ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 2},
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
              opacity: $y;
            }

            .hs.row#{$r
              -
              1}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
                opacity: $y;
              }
            }

            .hs.row#{$r - 1}.col#{$c + 1}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c + 1},
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
              div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} {
                opacity: $y;
              }
              //silly down
              .hs.row#{$r
                -
                1}.col#{$c
                + 3}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 1}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 2}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 3}:checked
                ~ {
                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                  opacity: $y;
                }
              }
              //backwards
              .hs.row#{$r
                -
                2}.col#{$c}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 1}:checked
                ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
                  opacity: $y;
                }
              }

              .hs.row#{$r
                -
                2}.col#{$c
                -
                1}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 1}:checked
                ~ {
                div > div > #{$z} > .row#{$r - 1}.col#{$c - 1},
                div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
                  opacity: $y;
                }
              }

              .hs.row#{$r
                -
                2}.col#{$c
                -
                2}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                -
                1}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 1}:checked
                ~ {
                div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
                  opacity: $y;
                }
              }

              .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2},
                div > div > #{$z} > .row#{$r - 2}.col#{$c},
                div > div > #{$z} > .row#{$r - 1}.col#{$c} {
                  opacity: $y;
                }

                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }

                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                      opacity: $y;
                    }
                  }
                }
              }
              //>
              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2},
                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                  opacity: $y;
                }

                .hs.row#{$r - 2}.col#{$c + 2}:checked ~,
                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }
                }

                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                    opacity: $y;
                  }
                }
              }
            }

            .hs.row#{$r}.col#{$c + 2}:checked ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 3},
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
                opacity: $y;
              }

              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2},
                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                  opacity: $y;
                }

                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }
                }

                .hs.row#{$r
                  -
                  2}.col#{$c}:checked
                  ~ .hs.row#{$r
                  -
                  2}.col#{$c
                  + 1}:checked
                  ~ .hs.row#{$r
                  -
                  2}.col#{$c
                  + 2}:checked
                  ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
                    opacity: $y;
                  }
                }

                .hs.row#{$r
                  -
                  2}.col#{$c
                  -
                  1}:checked
                  ~ .hs.row#{$r
                  -
                  2}.col#{$c}:checked
                  ~ .hs.row#{$r
                  -
                  2}.col#{$c
                  + 1}:checked
                  ~ .hs.row#{$r
                  -
                  2}.col#{$c
                  + 2}:checked
                  ~ {
                  div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
                    opacity: $y;
                  }
                }

                .hs.row#{$r
                  -
                  2}.col#{$c
                  + 1}:checked
                  ~ .hs.row#{$r
                  -
                  2}.col#{$c
                  + 2}:checked
                  ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c} {
                    opacity: $y;
                  }
                }

                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3},
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
                    opacity: $y;
                  }
                }
              }

              .hs.row#{$r}.col#{$c + 3}:checked ~ {
                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                  opacity: $y;
                }

                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }

                  .hs.row#{$r
                    -
                    2}.col#{$c
                    + 1}:checked
                    ~ .hs.row#{$r
                    -
                    2}.col#{$c
                    + 2}:checked
                    ~ .hs.row#{$r
                    -
                    2}.col#{$c
                    + 3}:checked
                    ~ {
                    div > div > #{$z} > .row#{$r - 2}.col#{$c} {
                      opacity: $y;
                    }
                  }

                  .hs.row#{$r
                    -
                    2}.col#{$c
                    + 2}:checked
                    ~ .hs.row#{$r
                    -
                    2}.col#{$c
                    + 3}:checked
                    ~ {
                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
                      opacity: $y;
                    }
                  }

                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
                    div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                      opacity: $y;
                    }
                  }
                }
              }
            }
          }
        }
        //RIGHT
        //....
        //....
        //xxxx
        //...x
        .hs.row#{$r}.col#{$c}:checked ~ {
          div > div > #{$z} > .row#{$r}.col#{$c - 1} {
            opacity: $y;
          }
        }

        .hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
          .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 2}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 2}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 2} {
                opacity: $y;
              }
            }
          }
        }

        .hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ {
          div > div > #{$z} > .row#{$r}.col#{$c - 2},
          div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
            opacity: $y;
          }

          .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 1}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 1}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
              div > div > #{$z} > .row#{$r}.col#{$c + 2} {
                opacity: $y;
              }
            }
          }

          .hs.row#{$r - 1}.col#{$c - 1}:checked ~ {
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
              opacity: $y;
            }

            .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2},
              div > div > #{$z} > .row#{$r - 2}.col#{$c} {
                opacity: $y;
              }

              .hs.row#{$r - 2}.col#{$c}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
                  opacity: $y;
                }

                .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 1},
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                    opacity: $y;
                  }

                  .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
                      opacity: $y;
                    }
                  }
                }
              }
            }
          }
        }
        //^
        .hs.row#{$r}.col#{$c
          -
          3}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r}.col#{$c}:checked
          ~ {
          div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
            opacity: $y;
          }

          .hs.row#{$r - 1}.col#{$c - 3}:checked ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
              opacity: $y;
            }

            .hs.row#{$r - 2}.col#{$c - 3}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
                opacity: $y;
              }

              .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
                  opacity: $y;
                }

                .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c} {
                    opacity: $y;
                  }
                }
              }
            }
          }
        }

        .hs.row#{$r}.col#{$c
          -
          2}:checked
          ~ .hs.row#{$r}.col#{$c
          -
          1}:checked
          ~ .hs.row#{$r}.col#{$c}:checked
          ~ {
          div > div > #{$z} > .row#{$r}.col#{$c - 3},
          div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} {
            opacity: $y;
          }

          .hs.row#{$r - 1}.col#{$c - 2}:checked ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2},
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
              opacity: $y;
            }

            .hs.row#{$r - 2}.col#{$c - 2}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 3},
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
                opacity: $y;
              }

              .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c} {
                  opacity: $y;
                }
              }
            }
          }
        }
        //^
        ///////
        ///////
        ///////
        .hs.row#{$r}.col#{$c}:checked ~ {
          div > div > #{$z} > .row#{$r - 1}.col#{$c} {
            opacity: $y;
          }
          //weirddown
          //....
          //xxx.
          //x.xx
          //x...
          .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 2}:checked
            ~ div
            > div
            > #{$z}
            > .row#{$r}.col#{$c
            + 3} {
            opacity: $y;
          }
          //wierd down
          //xxxx
          //x..x
          //x.xx
          //x...
          .hs.row#{$r}.col#{$c
            + 3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 3}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 3}:checked
            ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
          //wierd down
          //xxx.
          //x.x.
          //x.xx
          //x...
          .hs.row#{$r}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              + 1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 2}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                opacity: $y;
              }
            }
          }

          .hs.row#{$r}.col#{$c
            + 3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            + 3}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 1}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 2}:checked
            ~ .hs.row#{$r
            -
            2}.col#{$c
            + 3}:checked
            ~ {
            div > div > #{$z} > .row#{$r}.col#{$c + 2} {
              opacity: $y;
            }
          }
          //LEFT
          //....
          //xxxx
          //x...
          //x...
          .hs.row#{$r - 1}.col#{$c}:checked ~ {
            div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} {
              opacity: $y;
            }

            .hs.row#{$r - 1}.col#{$c + 1}:checked ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
              div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
                opacity: $y;
              }

              .hs.row#{$r
                -
                1}.col#{$c
                + 3}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 1}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 2}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 3}:checked
                ~ {
                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                  opacity: $y;
                }
              }

              .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                  opacity: $y;
                }

                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }

                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                      opacity: $y;
                    }
                  }
                }
              }

              .hs.row#{$r - 1}.col#{$c + 2}:checked ~ {
                div > div > #{$z} > .row#{$r - 1}.col#{$c + 3},
                div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                  opacity: $y;
                }

                .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 2},
                  div > div > #{$z} > .row#{$r + 1}.col#{$c + 2},
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }
                }
                //DOWN
                //....
                //xxx.
                //x.x.
                //x...
                div > div > #{$z} > .row#{$r}.col#{$c + 2} {
                  opacity: $y;
                }
                //DOWN
                //....
                //xxxx
                //x..x
                //x...
                .hs.row#{$r
                  -
                  1}.col#{$c
                  + 3}:checked
                  ~ div
                  > div
                  > #{$z}
                  > .row#{$r}.col#{$c
                  + 3} {
                  opacity: $y;
                }
              }
            }
          }
          //RIGHT
          //....
          //xxxx
          //...x
          //...x
          .hs.row#{$r - 1}.col#{$c}:checked ~ {
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} {
              opacity: $y;
            }
          }

          .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 2},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
              opacity: $y;
            }

            .hs.row#{$r - 2}.col#{$c - 1}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
                opacity: $y;
              }
            }

            .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
                opacity: $y;
              }
            }

            .hs.row#{$r
              -
              2}.col#{$c
              -
              3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }

          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            .hs.row#{$r
              -
              2}.col#{$c
              -
              3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c - 3} {
                opacity: $y;
              }
            }
          }
          ///////
          .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            div > div > #{$z} > .row#{$r - 1}.col#{$c - 3},
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
              opacity: $y;
            }
          }

          .hs.row#{$r
            -
            1}.col#{$c
            -
            3}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            2}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c
            -
            1}:checked
            ~ .hs.row#{$r
            -
            1}.col#{$c}:checked
            ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
              opacity: $y;
            }
          }
          /////////
          .hs.row#{$r - 1}.col#{$c}:checked ~ {
            div > div > #{$z} > .row#{$r - 2}.col#{$c} {
              opacity: $y;
            }
            //wierd down
            //xxx.
            //x.x.
            //x.x.
            //x...
            .hs.row#{$r
              -
              1}.col#{$c
              + 2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 2}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 2},
              div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                opacity: $y;
              }

              .hs.row#{$r - 1}.col#{$c + 3}:checked ~ {
                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                  opacity: $y;
                }
              }
            }

            .hs.row#{$r
              -
              1}.col#{$c
              + 2}:checked
              ~ .hs.row#{$r
              -
              1}.col#{$c
              + 3}:checked
              ~ {
              .hs.row#{$r
                -
                2}.col#{$c}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 1}:checked
                ~ .hs.row#{$r
                -
                2}.col#{$c
                + 2}:checked
                ~ {
                div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                  opacity: $y;
                }
              }
            }
            //wierd down
            //xxx.
            //x.x.
            //x.xx
            //x...
            .hs.row#{$r}.col#{$c
              + 2}:checked
              ~ .hs.row#{$r
              -
              1}.col#{$c
              + 2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 2}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                opacity: $y;
              }
            }
            //wierd down
            //xxxx
            //x..x
            //x..x
            //x...
            .hs.row#{$r
              -
              1}.col#{$c
              + 3}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              + 3}:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c + 3} {
                opacity: $y;
              }
            }
            //LEFT
            //xxxx
            //x...
            //x...
            //x...
            .hs.row#{$r - 2}.col#{$c}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} {
                opacity: $y;
              }

              .hs.row#{$r - 2}.col#{$c + 1}:checked ~ {
                div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} {
                  opacity: $y;
                }

                .hs.row#{$r - 2}.col#{$c + 2}:checked ~ {
                  div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} {
                    opacity: $y;
                  }
                  //DOWN
                  //xxx.
                  //x.x.
                  //x...
                  //x...
                  div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} {
                    opacity: $y;
                  }
                  //DOWN
                  //xxxx
                  //x..x
                  //x...
                  //x...
                  .hs.row#{$r - 2}.col#{$c + 3}:checked ~ {
                    div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} {
                      opacity: $y;
                    }
                  }
                }
              }
            }
            //RIGHT
            //xxxx
            //...x
            //...x
            //...x
            .hs.row#{$r - 2}.col#{$c}:checked ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} {
                opacity: $y;
              }
            }

            .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
                opacity: $y;
              }
            }

            .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} {
                opacity: $y;
              }
            }

            .hs.row#{$r
              -
              2}.col#{$c
              -
              2}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c
              -
              1}:checked
              ~ .hs.row#{$r
              -
              2}.col#{$c}:checked
              ~ {
              div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} {
                opacity: $y;
              }
            }
            //DOWN
            //xxxx
            //x..x
            //x..x
            //x...
            .hs.row#{$r - 2}.col#{$c}:checked ~ {
              div > div > #{$z} > .row#{$r - 1}.col#{$c} {
                opacity: $y;
              }
            }

            .hs.row#{$r
              -
              1}.col#{$c}:checked
              ~ .hs.row#{$r
              -
              2}.col4:checked
              ~ {
              div > div > #{$z} > .row#{$r}.col#{$c} {
                opacity: $y;
              }
            }
          }
        }
      }
    }
  }
}
// ## lights
$row: 1, 2, 3, 4;

@each $i in $row {
  $col: 1, 2, 3, 4;

  @each $x in $col {
    .hs.row#{$i}.col#{$x}:checked ~ {
      div > div > house > .row#{$i}.col#{$x} {
        //window
        &.col#{random(4)} > i:nth-of-type(4) {
          //window
          background: $sun;
          box-shadow: inset 0 0 0 0.5rem $ls,
            //
            inset
              0
              0
              0.5rem
              $ds,
            //
            inset
              0
              0
              0
              0.5rem
              $tre2,
            //
            inset
              0
              0
              1rem
              1rem
              $ds,
            //
            inset
              1rem
              0
              0
              $r1,
            //
            inset -1.25rem
              0
              0
              $r1,
            //
            inset
              0 -2rem
              0
              yellow,
            //
            inset
              0 -3.5rem
              0
              #ffa200,
            //
            0
              0
              2rem
              yellow;

          &:after,
          &:before {
            background: $tre2;
          }
        }
      }
    }
  }
}

.lh {
  pointer-events: none;
  perspective: 30rem;
  perspective-origin: 50% -5rem;
  transform: translate3d(0, 0, -100rem) scale(0);
  opacity: 0;
}

.hs.house.row4.col1:not(:checked)
  ~ .hs.house.row4.col2:checked
  ~ .hs.house.row4.col3:not(:checked)
  ~ .hs.house.row3.col1:not(:checked)
  ~ .hs.shed.row3.col2:checked
  ~ .hs.house.row3.col3:not(:checked)
  ~ .hs.house.row2.col1:not(:checked)
  ~ .hs.house.row2.col2:checked
  ~ .hs.house.row2.col3:not(:checked)
  ~ .hs.house.row1.col1:not(:checked)
  ~ .hs.shed.row1.col2:checked
  ~ .hs.house.row1.col3:not(:checked)
  ~ {
  div.lh {
    transform: translate3d(0, 0, -100rem) scale(1);
    /* animation: lightson $timer linear infinite;*/
    light {
      top: -12rem;
      left: -6.25rem;
      transform: scaleX(3) rotateY(0);
      /*   animation: light 8s linear infinite;*/
      filter: blur(0.1rem);
      opacity: 0.5;

      &,
      &:before,
      &:after {
        background: linear-gradient(to right, $none, rgba(#fff466, 0.5), $none);
        width: 100%;
        height: 5rem;
      }

      &:before {
        transform: rotate(15deg) rotateY(-5deg);
      }

      &:after {
        transform: rotate(-15deg) rotateY(5deg);
      }
    }

    lens {
      top: -12rem;
      left: -6.25rem;
      width: 100%;
      height: 5rem;

      &:before,
      &:after {
        height: 5rem;
        border-radius: 50%;
        right: 0;
        margin: auto;
      }

      &:before {
        background: linear-gradient(to right, $none, rgba($light, 0.5), $none);
        width: 100%;
        transform: scaleX(3) rotateY(0);
        opacity: 0.25;
        filter: blur(0.1rem);
      }

      &:after {
        width: 5rem;
        background: radial-gradient($light, $none);
        opacity: 0.75;
        box-shadow: 60rem 0 15rem $light, -60rem 0 15rem $light, 0 0 3rem $light,
          inset 0 0 0 $light;
      }
    }
  }
}

div.lh {
  animation: lightson $timer linear infinite;

  light {
    animation: light 8s linear infinite;
  }

  lens {
    &:before {
      animation: light 8s linear infinite;
    }

    &:after {
      animation: light2 8s ease-in-out infinite;
    }
  }
}

@keyframes light {
  100% {
    transform: scaleX(3) rotateY(-360deg);
  }
}

@keyframes lightson {
  20%,
  80% {
    opacity: 0;
  }

  25%,
  75% {
    opacity: 1;
  }
}

@keyframes light2 {
  22%,
  27%,
  72%,
  77% {
    box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light, 0 0 3rem $light,
      inset 0 0 0 0 $light;
  }

  24%,
  74% {
    box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light,
      0 0 5rem 40rem rgba($light, 0.25), inset 0 0 0 2.5rem $light;
  }

  50% {
    box-shadow: -60rem 0 15rem $light, 60rem 0 15rem $light, 0 0 3rem $light,
      inset 0 0 0 0 $light;
  }
}
// ## gfx
#graphics {
  top: 1rem;
  left: auto;
  right: 1rem;
  font-family: Telefon, Sans-Serif;
  font-size: 1.4rem;
  z-index: 1000;
  letter-spacing: 0.1rem;
  color: #fff;
  line-height: 1.5;
  max-height: 2.5rem;
  overflow: hidden;

  label {
    display: flex;
    align-content: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2);

    &:not(:nth-of-type(1)):hover {
      box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 2rem rgba(#fff, 0.2);
    }
  }

  * {
    position: static;
  }
}

#gfxmenu:checked ~ #graphics {
  max-height: 10rem;
}

#poor:checked ~ colour > div > div > house > label > i:nth-of-type(1),
#poor:checked ~ colour > div > div > shed > label > i:nth-of-type(1),
#poor:checked ~ colour > div > lens,
#poor:checked ~ colour > water:before,
#poor:checked ~ colour water:after {
  display: none;
}

#poor:checked ~ colour > div > div.main {
  -webkit-box-reflect: none;
}

#poor:checked ~ sky > time {
  opacity: 0;
}

#poor:checked ~ text > welldone,
#poor:checked ~ text > gameover {
  box-shadow: none;
}

#good:checked ~ x > [for="good"],
#poor:checked ~ x > [for="poor"] {
  box-shadow: 0 0 0 0 rgba(#fff, 0.1), inset 0 0 0 2rem rgba(#fff, 0.1);

  &:before {
    content: "✓";
    position: static;
  }
}

#poor:checked ~ colour > div > div > shed > label,
#poor:checked ~ colour > div > div > house > label {
  &:after,
  & *:after {
    animation: none !important;
  }

  &:before,
  & *:before {
    animation: none !important;
  }
}

[for="gfxmenu"]:after {
  border-bottom: 0.1rem solid #fff;
  border-right: 0.1rem solid #fff;
  transform: rotate(45deg) scaleY(1);
  position: relative;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.4rem;
  top: 0.5rem;
  transition: all 0.2s ease-in-out;
}

#gfxmenu:checked ~ x > [for="gfxmenu"]:after {
  transform: rotate(-45deg) scaleY(-1);
}
script {
  display: none;
}
!

JS 

              
                // 100% CSS. No artificial colours or ingredients.

// First person to screenshot a lighthouse wins!

// Your time starts now...
!
999px

Console