:root {
    --floor: snow;
    --wall: BurlyWood;
    --shadow: 0 2px rgba(0,0,0,.25);
    --wood: #995D3E;
    --skewY: 0deg;
    --skewY-left: 30deg;
    --skewY-right: 30deg;
}

* {
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--floor);
}

main {
    width: 32rem; /* 512px */
    height: 32rem;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 2rem);
    grid-template-rows:    repeat(var(--rows), 2rem);
    margin: auto;
}
.grid > *  {
    min-width: 2rem;
    min-height: 2rem;
    text-align: center;
    font-size: var(--size, 1rem);
    grid-column-start: var(--x, 1);
    grid-column-end: span var(--w, 1);
    grid-row-start: var(--y, 1);
    grid-row-end: span var(--h, 1);
}

/* House */
.house {
    background: var(--wall);
    background-image: repeating-linear-gradient(to top, #633424, var(--wood));
    background-size: 4px 4px;
    background-color: var(--wood);
}

/* Roof */
.roof {
    height: 100%;
}
.roof::before,
.roof::after {
    content: '';
    position: absolute;
    top: -50%;
    bottom: 50%;
    width: 50%;
    box-shadow: var(--shadow);
}
.roof::before {
    --skewY-left: inherit;
    left: 0;
    background: hsl(10, 0%, 60%);
    transform: skewY(calc(var(--skewY-left) * -1));
}
.roof::after {
    --skewY-right: inherit;
    right: 0;
    background: hsl(10, 0%, 40%);
    transform: skewY(var(--skewY-right));
}
.roof::before {
    box-shadow: var(--shadow), -2px 0px hsl(10, 0%, 60%)
}
.roof::after {
    box-shadow: var(--shadow), 2px 0px hsl(10, 0%, 40%);
}
.roof--left::before,
.roof--right::after  {
    width: 100%;
}
.roof--left::after,
.roof--right::before  {
    display: none;
}
.roof--middle::before,
.roof--middle::after {
    --skewY-left: 0deg;
    --skewY-right: 0deg;
    transform: translateY(var(--top, -30%));
    background: hsl(10, 0%, 50%);
    box-shadow: var(--shadow);
}

/* Chimmey */
.chimney {
    --w: .5rem;
    display: block;
    position: absolute;
    top: -50%;
    width: var(--w);
    height: .5rem;
    background: DimGray;
    transform: skewY(var(--skewY));
    z-index: 10;
}
.chimney::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 75%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, black, DimGray); ;
    outline: 1px solid grey;
    outline-offset: -1px;
    transform: skewY(calc(var(--skewY) * -1));
}
.chimney--middle {
    top: -75%;
    left: calc(50% - var(--w) / 2);
}
.chimney--right {
    right: 25%;
    transform: skewY(var(--skewY-right));
}
.chimney--right::before {
    transform: skewY(calc(var(--skewY-right) * -1));
}
.chimney--left {
    left: 25%;
    transform: skewY(calc(var(--skewY-left) * -1));
}
.chimney--left::before {
    transform: skewY(calc(var(--skewY-left)));
}

/* Door */
.door {
    appearance: none;
    display: block;
    position: absolute;
    height: 1rem;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: .75rem;
    cursor: pointer;
}
.door::before {
    content: '🚪';
    display: block;
    position: absolute;
    bottom: 0;
    top: 0;
    width: .75rem;
    left: 50%;
    transform: translateX(-50%);
}
.door:hover ~ label {
    display: block;
}
.door:checked::before {
    content: '';
    background: linear-gradient(to top, var(--floor), black);
    background-size: 50%;
}
label, caption {
    display: none;
    position: absolute;
    z-index: 1;
    background: white;
    border: 1px solid black;
    padding: 0.25em 0.5em 0.25em;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: small;
    font-family: monospace;
    top: -50%;
    z-index: 999;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    line-height: 0;
}
table tr {
    border: none;
}
table td {
    border: none;
    display: inline-block;
    vertical-align: top;
}
table tbody td {
    width: 100%;
    height: 1rem;
    background: var(--wood);
}
table tfoot td {
    width: 25%;
    height: 0.5rem;
    /*background: rgba(0,0,0,.2);*/
}
table tfoot td:nth-child(1) {
    border-right: 4px solid var(--wood);
}
table tfoot td:nth-child(4) {
    border-left: 4px solid var(--wood);
}
table tfoot td:nth-child(1)::after,
table tfoot td:nth-child(4)::after {
    content: '';
    position: absolute;
    bottom: 100%;
    height: 100%;
    width: 4px;
    box-shadow: var(--shadow);
}
table tfoot td:nth-child(1)::after {
    right: -4px;
}
table tfoot td:nth-child(4)::after {
    left: -4px;
}
table:hover caption {
    display: block;
    top: -125%;
    line-height: initial;
}

/* Tree */
.tree {
    transform: translateY(-50%);
}
.tree::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12.5%;
    border-radius: .125rem;
    height: 75%;
    z-index: -1;
    background: var(--wood);
}
.tree::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 33%;
    height: 75%;
    border-radius: 50% 50% 33% 33%;
    background: forestgreen;
    width: 50%;
    height: 75%;
}

.pigsty {
    background-color: #9b7653;
    z-index: -1;
}
.pigsty::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-top: 3px double var(--wood);
    border-bottom: 3px double var(--wood);
    border-right: 2px solid var(--wood);
    transform: translateY(-6px);
    margin-bottom: -2px;
    z-index: 2;
}

/* Water */
.water {
    background: LightSeaGreen;
    border-radius: 1rem;
    overflow: hidden;
}
.water::after {
    content: '. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .';
    color: transparent;
    display: inline;
    position: absolute;
    inset: 0;
    text-decoration: DarkCyan wavy underline;
    text-align: center;
    line-height: .5;
    margin-top: -.25em;
}

.reverse {
    transform-origin: center;
    transform: scaleX(-1);
}

.emoji {
    position: absolute;
}