.puzzle .puzzle-top{align-items:center;display:flex}.puzzle .puzzle-top .msg{flex:1;font-size:1.5em;font-weight:700}.puzzle .puzzle-top .answer{background:no-repeat 50% 50%;background-size:cover;width:30%}.puzzle .puzzle-top .answer:before{content:"";display:block;padding-top:100%}.puzzle .puzzle-grid{border:2px solid #000;display:grid;grid-column-end:span 3;grid-gap:2px;background:#000;grid-template-areas:"A B C" "D E F" "G H I"}.puzzle .tile{background-size:300%;border:none;cursor:pointer;grid-area:var(--area,auto);height:0;padding-bottom:100%}.puzzle .tile.tile--empty{cursor:auto}.puzzle .tile:focus{outline:2px solid #b1382e}.puzzle .tile[disabled]{cursor:not-allowed}.puzzle .tile.tile--empty{background:transparent}.puzzle .tile.tile--1{background-position:0 0}.puzzle .tile.tile--2{background-position:top}.puzzle .tile.tile--3{background-position:100% 0}.puzzle .tile.tile--4{background-position:0}.puzzle .tile.tile--5{background-position:50%}.puzzle .tile.tile--6{background-position:100%}.puzzle .tile.tile--7{background-position:0 100%}.puzzle .tile.tile--8{background-position:bottom}