<ul id="menu">
<li><label><b><input id="game1" type="radio" name="game" checked=""><span>Game 1</span></b></label></li>
<li><label><b><input id="game2" type="radio" name="game"><span>Game 2</span></b></label></li>
<li><label><b><input id="game3" type="radio" name="game"><span>Game 3</span></b></label></li>
<li><label><b><input id="game4" type="radio" name="game"><span>Game 4</span></b></label></li>
<li><label><b><input id="game5" type="radio" name="game"><span>Game 5</span></b></label></li>
<li><label><b><input id="game6" type="radio" name="game"><span>Game 6</span></b></label></li>
<li><label><b><input id="game7" type="radio" name="game"><span>Game 7</span></b></label></li>
<li><label><b><input id="game8" type="radio" name="game"><span>Game 8</span></b></label></li>
<li><label><b><input id="game9" type="radio" name="game"><span>Game 9</span></b></label></li>
<li><label><b><input id="game10" type="radio" name="game"><span>Game 10</span></b></label></li>
</ul>
<main id="boards">
<section id="board1" class="board">
<h1>Game 1</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX1" id="a0X1" class="X0 X"><input type="radio" name="aX1" id="a1X1" class="X1 X"><input type="radio" name="aX1" id="a2X1" class="X2 X"><input type="radio" name="aX1" id="a3X1" class="X3 X" checked="">
<input
type="radio" name="aY1" id="a0Y1" class="Y0 Y"><input type="radio" name="aY1" id="a1Y1" class="Y1 Y"><input type="radio" name="aY1" id="a2Y1" class="Y2 Y" checked=""><input type="radio" name="aY1" id="a3Y1" class="Y3 Y"></div>
<div class="inner"><label for="a0X1" class="X0"></label><label for="a1X1" class="X1"></label><label for="a2X1" class="X2"></label><label for="a3X1" class="X3"></label><label for="a0Y1" class="Y0"></label><label for="a1Y1" class="Y1"></label><label for="a2Y1"
class="Y2"></label><label for="a3Y1" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX1" id="b0X1" class="X0 X"><input type="radio" name="bX1" id="b1X1" class="X1 X"><input type="radio" name="bX1" id="b2X1" class="X2 X" checked=""><input type="radio" name="bX1" id="b3X1" class="X3 X">
<input
type="radio" name="bY1" id="b0Y1" class="Y0 Y" checked=""><input type="radio" name="bY1" id="b1Y1" class="Y1 Y"><input type="radio" name="bY1" id="b2Y1" class="Y2 Y"><input type="radio" name="bY1" id="b3Y1" class="Y3 Y"></div>
<div class="inner"><label for="b0X1" class="X0"></label><label for="b1X1" class="X1"></label><label for="b2X1" class="X2"></label><label for="b3X1" class="X3"></label><label for="b0Y1" class="Y0"></label><label for="b1Y1" class="Y1"></label><label for="b2Y1"
class="Y2"></label><label for="b3Y1" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX1" id="c0X1" class="X0 X" checked=""><input type="radio" name="cX1" id="c1X1" class="X1 X"><input type="radio" name="cX1" id="c2X1" class="X2 X"><input type="radio" name="cX1" id="c3X1" class="X3 X">
<input
type="radio" name="cY1" id="c0Y1" class="Y0 Y"><input type="radio" name="cY1" id="c1Y1" class="Y1 Y"><input type="radio" name="cY1" id="c2Y1" class="Y2 Y"><input type="radio" name="cY1" id="c3Y1" class="Y3 Y" checked=""></div>
<div class="inner"><label for="c0X1" class="X0"></label><label for="c1X1" class="X1"></label><label for="c2X1" class="X2"></label><label for="c3X1" class="X3"></label><label for="c0Y1" class="Y0"></label><label for="c1Y1" class="Y1"></label><label for="c2Y1"
class="Y2"></label><label for="c3Y1" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX1" id="d0X1" class="X0 X"><input type="radio" name="dX1" id="d1X1" class="X1 X"><input type="radio" name="dX1" id="d2X1" class="X2 X"><input type="radio" name="dX1" id="d3X1" class="X3 X" checked="">
<input
type="radio" name="dY1" id="d0Y1" class="Y0 Y"><input type="radio" name="dY1" id="d1Y1" class="Y1 Y" checked=""><input type="radio" name="dY1" id="d2Y1" class="Y2 Y"><input type="radio" name="dY1" id="d3Y1" class="Y3 Y"></div>
<div class="inner"><label for="d0X1" class="X0"></label><label for="d1X1" class="X1"></label><label for="d2X1" class="X2"></label><label for="d3X1" class="X3"></label><label for="d0Y1" class="Y0"></label><label for="d1Y1" class="Y1"></label><label for="d2Y1"
class="Y2"></label><label for="d3Y1" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX1" id="e0X1" class="X0 X"><input type="radio" name="eX1" id="e1X1" class="X1 X"><input type="radio" name="eX1" id="e2X1" class="X2 X"><input type="radio" name="eX1" id="e3X1" class="X3 X" checked="">
<input
type="radio" name="eY1" id="e0Y1" class="Y0 Y" checked=""><input type="radio" name="eY1" id="e1Y1" class="Y1 Y"><input type="radio" name="eY1" id="e2Y1" class="Y2 Y"><input type="radio" name="eY1" id="e3Y1" class="Y3 Y"></div>
<div class="inner"><label for="e0X1" class="X0"></label><label for="e1X1" class="X1"></label><label for="e2X1" class="X2"></label><label for="e3X1" class="X3"></label><label for="e0Y1" class="Y0"></label><label for="e1Y1" class="Y1"></label><label for="e2Y1"
class="Y2"></label><label for="e3Y1" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX1" id="f0X1" class="X0 X"><input type="radio" name="fX1" id="f1X1" class="X1 X" checked=""><input type="radio" name="fX1" id="f2X1" class="X2 X"><input type="radio" name="fX1" id="f3X1" class="X3 X">
<input
type="radio" name="fY1" id="f0Y1" class="Y0 Y"><input type="radio" name="fY1" id="f1Y1" class="Y1 Y"><input type="radio" name="fY1" id="f2Y1" class="Y2 Y" checked=""><input type="radio" name="fY1" id="f3Y1" class="Y3 Y"></div>
<div class="inner"><label for="f0X1" class="X0"></label><label for="f1X1" class="X1"></label><label for="f2X1" class="X2"></label><label for="f3X1" class="X3"></label><label for="f0Y1" class="Y0"></label><label for="f1Y1" class="Y1"></label><label for="f2Y1"
class="Y2"></label><label for="f3Y1" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX1" id="g0X1" class="X0 X"><input type="radio" name="gX1" id="g1X1" class="X1 X"><input type="radio" name="gX1" id="g2X1" class="X2 X" checked=""><input type="radio" name="gX1" id="g3X1" class="X3 X">
<input
type="radio" name="gY1" id="g0Y1" class="Y0 Y"><input type="radio" name="gY1" id="g1Y1" class="Y1 Y"><input type="radio" name="gY1" id="g2Y1" class="Y2 Y" checked=""><input type="radio" name="gY1" id="g3Y1" class="Y3 Y"></div>
<div class="inner"><label for="g0X1" class="X0"></label><label for="g1X1" class="X1"></label><label for="g2X1" class="X2"></label><label for="g3X1" class="X3"></label><label for="g0Y1" class="Y0"></label><label for="g1Y1" class="Y1"></label><label for="g2Y1"
class="Y2"></label><label for="g3Y1" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX1" id="h0X1" class="X0 X"><input type="radio" name="hX1" id="h1X1" class="X1 X"><input type="radio" name="hX1" id="h2X1" class="X2 X" checked=""><input type="radio" name="hX1" id="h3X1" class="X3 X">
<input
type="radio" name="hY1" id="h0Y1" class="Y0 Y"><input type="radio" name="hY1" id="h1Y1" class="Y1 Y" checked=""><input type="radio" name="hY1" id="h2Y1" class="Y2 Y"><input type="radio" name="hY1" id="h3Y1" class="Y3 Y"></div>
<div class="inner"><label for="h0X1" class="X0"></label><label for="h1X1" class="X1"></label><label for="h2X1" class="X2"></label><label for="h3X1" class="X3"></label><label for="h0Y1" class="Y0"></label><label for="h1Y1" class="Y1"></label><label for="h2Y1"
class="Y2"></label><label for="h3Y1" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX1" id="i0X1" class="X0 X"><input type="radio" name="iX1" id="i1X1" class="X1 X" checked=""><input type="radio" name="iX1" id="i2X1" class="X2 X"><input type="radio" name="iX1" id="i3X1" class="X3 X">
<input
type="radio" name="iY1" id="i0Y1" class="Y0 Y"><input type="radio" name="iY1" id="i1Y1" class="Y1 Y" checked=""><input type="radio" name="iY1" id="i2Y1" class="Y2 Y"><input type="radio" name="iY1" id="i3Y1" class="Y3 Y"></div>
<div class="inner"><label for="i0X1" class="X0"></label><label for="i1X1" class="X1"></label><label for="i2X1" class="X2"></label><label for="i3X1" class="X3"></label><label for="i0Y1" class="Y0"></label><label for="i1Y1" class="Y1"></label><label for="i2Y1"
class="Y2"></label><label for="i3Y1" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX1" id="j0X1" class="X0 X"><input type="radio" name="jX1" id="j1X1" class="X1 X" checked=""><input type="radio" name="jX1" id="j2X1" class="X2 X"><input type="radio" name="jX1" id="j3X1" class="X3 X">
<input
type="radio" name="jY1" id="j0Y1" class="Y0 Y"><input type="radio" name="jY1" id="j1Y1" class="Y1 Y"><input type="radio" name="jY1" id="j2Y1" class="Y2 Y"><input type="radio" name="jY1" id="j3Y1" class="Y3 Y" checked=""></div>
<div class="inner"><label for="j0X1" class="X0"></label><label for="j1X1" class="X1"></label><label for="j2X1" class="X2"></label><label for="j3X1" class="X3"></label><label for="j0Y1" class="Y0"></label><label for="j1Y1" class="Y1"></label><label for="j2Y1"
class="Y2"></label><label for="j3Y1" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX1" id="k0X1" class="X0 X" checked=""><input type="radio" name="kX1" id="k1X1" class="X1 X"><input type="radio" name="kX1" id="k2X1" class="X2 X"><input type="radio" name="kX1" id="k3X1" class="X3 X">
<input
type="radio" name="kY1" id="k0Y1" class="Y0 Y" checked=""><input type="radio" name="kY1" id="k1Y1" class="Y1 Y"><input type="radio" name="kY1" id="k2Y1" class="Y2 Y"><input type="radio" name="kY1" id="k3Y1" class="Y3 Y"></div>
<div class="inner"><label for="k0X1" class="X0"></label><label for="k1X1" class="X1"></label><label for="k2X1" class="X2"></label><label for="k3X1" class="X3"></label><label for="k0Y1" class="Y0"></label><label for="k1Y1" class="Y1"></label><label for="k2Y1"
class="Y2"></label><label for="k3Y1" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX1" id="l0X1" class="X0 X" checked=""><input type="radio" name="lX1" id="l1X1" class="X1 X"><input type="radio" name="lX1" id="l2X1" class="X2 X"><input type="radio" name="lX1" id="l3X1" class="X3 X">
<input
type="radio" name="lY1" id="l0Y1" class="Y0 Y"><input type="radio" name="lY1" id="l1Y1" class="Y1 Y" checked=""><input type="radio" name="lY1" id="l2Y1" class="Y2 Y"><input type="radio" name="lY1" id="l3Y1" class="Y3 Y"></div>
<div class="inner"><label for="l0X1" class="X0"></label><label for="l1X1" class="X1"></label><label for="l2X1" class="X2"></label><label for="l3X1" class="X3"></label><label for="l0Y1" class="Y0"></label><label for="l1Y1" class="Y1"></label><label for="l2Y1"
class="Y2"></label><label for="l3Y1" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX1" id="m0X1" class="X0 X"><input type="radio" name="mX1" id="m1X1" class="X1 X"><input type="radio" name="mX1" id="m2X1" class="X2 X" checked=""><input type="radio" name="mX1" id="m3X1" class="X3 X">
<input
type="radio" name="mY1" id="m0Y1" class="Y0 Y"><input type="radio" name="mY1" id="m1Y1" class="Y1 Y"><input type="radio" name="mY1" id="m2Y1" class="Y2 Y"><input type="radio" name="mY1" id="m3Y1" class="Y3 Y" checked=""></div>
<div class="inner"><label for="m0X1" class="X0"></label><label for="m1X1" class="X1"></label><label for="m2X1" class="X2"></label><label for="m3X1" class="X3"></label><label for="m0Y1" class="Y0"></label><label for="m1Y1" class="Y1"></label><label for="m2Y1"
class="Y2"></label><label for="m3Y1" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX1" id="n0X1" class="X0 X" checked=""><input type="radio" name="nX1" id="n1X1" class="X1 X"><input type="radio" name="nX1" id="n2X1" class="X2 X"><input type="radio" name="nX1" id="n3X1" class="X3 X">
<input
type="radio" name="nY1" id="n0Y1" class="Y0 Y"><input type="radio" name="nY1" id="n1Y1" class="Y1 Y"><input type="radio" name="nY1" id="n2Y1" class="Y2 Y" checked=""><input type="radio" name="nY1" id="n3Y1" class="Y3 Y"></div>
<div class="inner"><label for="n0X1" class="X0"></label><label for="n1X1" class="X1"></label><label for="n2X1" class="X2"></label><label for="n3X1" class="X3"></label><label for="n0Y1" class="Y0"></label><label for="n1Y1" class="Y1"></label><label for="n2Y1"
class="Y2"></label><label for="n3Y1" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX1" id="o0X1" class="X0 X"><input type="radio" name="oX1" id="o1X1" class="X1 X" checked=""><input type="radio" name="oX1" id="o2X1" class="X2 X"><input type="radio" name="oX1" id="o3X1" class="X3 X">
<input
type="radio" name="oY1" id="o0Y1" class="Y0 Y" checked=""><input type="radio" name="oY1" id="o1Y1" class="Y1 Y"><input type="radio" name="oY1" id="o2Y1" class="Y2 Y"><input type="radio" name="oY1" id="o3Y1" class="Y3 Y"></div>
<div class="inner"><label for="o0X1" class="X0"></label><label for="o1X1" class="X1"></label><label for="o2X1" class="X2"></label><label for="o3X1" class="X3"></label><label for="o0Y1" class="Y0"></label><label for="o1Y1" class="Y1"></label><label for="o2Y1"
class="Y2"></label><label for="o3Y1" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success1" class="success">Success!</div><input id="targetShow1" class="targetShow" type="checkbox"><label class="target" for="targetShow1"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/mullermarc-k7bQqdUf954-unsplash.webp" alt="VW van"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@mullermarc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">müllermarc</a> on <a href="https://unsplash.com/photos/grey-volkswagen-type-2-photography-during-day-time-k7bQqdUf954?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board2" class="board">
<h1>Game 2</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX2" id="a0X2" class="X0 X"><input type="radio" name="aX2" id="a1X2" class="X1 X" checked=""><input type="radio" name="aX2" id="a2X2" class="X2 X"><input type="radio" name="aX2" id="a3X2" class="X3 X">
<input
type="radio" name="aY2" id="a0Y2" class="Y0 Y"><input type="radio" name="aY2" id="a1Y2" class="Y1 Y"><input type="radio" name="aY2" id="a2Y2" class="Y2 Y" checked=""><input type="radio" name="aY2" id="a3Y2" class="Y3 Y"></div>
<div class="inner"><label for="a0X2" class="X0"></label><label for="a1X2" class="X1"></label><label for="a2X2" class="X2"></label><label for="a3X2" class="X3"></label><label for="a0Y2" class="Y0"></label><label for="a1Y2" class="Y1"></label><label for="a2Y2"
class="Y2"></label><label for="a3Y2" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX2" id="b0X2" class="X0 X"><input type="radio" name="bX2" id="b1X2" class="X1 X" checked=""><input type="radio" name="bX2" id="b2X2" class="X2 X"><input type="radio" name="bX2" id="b3X2" class="X3 X">
<input
type="radio" name="bY2" id="b0Y2" class="Y0 Y"><input type="radio" name="bY2" id="b1Y2" class="Y1 Y"><input type="radio" name="bY2" id="b2Y2" class="Y2 Y"><input type="radio" name="bY2" id="b3Y2" class="Y3 Y" checked=""></div>
<div class="inner"><label for="b0X2" class="X0"></label><label for="b1X2" class="X1"></label><label for="b2X2" class="X2"></label><label for="b3X2" class="X3"></label><label for="b0Y2" class="Y0"></label><label for="b1Y2" class="Y1"></label><label for="b2Y2"
class="Y2"></label><label for="b3Y2" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX2" id="c0X2" class="X0 X"><input type="radio" name="cX2" id="c1X2" class="X1 X" checked=""><input type="radio" name="cX2" id="c2X2" class="X2 X"><input type="radio" name="cX2" id="c3X2" class="X3 X">
<input
type="radio" name="cY2" id="c0Y2" class="Y0 Y" checked=""><input type="radio" name="cY2" id="c1Y2" class="Y1 Y"><input type="radio" name="cY2" id="c2Y2" class="Y2 Y"><input type="radio" name="cY2" id="c3Y2" class="Y3 Y"></div>
<div class="inner"><label for="c0X2" class="X0"></label><label for="c1X2" class="X1"></label><label for="c2X2" class="X2"></label><label for="c3X2" class="X3"></label><label for="c0Y2" class="Y0"></label><label for="c1Y2" class="Y1"></label><label for="c2Y2"
class="Y2"></label><label for="c3Y2" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX2" id="d0X2" class="X0 X"><input type="radio" name="dX2" id="d1X2" class="X1 X"><input type="radio" name="dX2" id="d2X2" class="X2 X" checked=""><input type="radio" name="dX2" id="d3X2" class="X3 X">
<input
type="radio" name="dY2" id="d0Y2" class="Y0 Y"><input type="radio" name="dY2" id="d1Y2" class="Y1 Y"><input type="radio" name="dY2" id="d2Y2" class="Y2 Y"><input type="radio" name="dY2" id="d3Y2" class="Y3 Y" checked=""></div>
<div class="inner"><label for="d0X2" class="X0"></label><label for="d1X2" class="X1"></label><label for="d2X2" class="X2"></label><label for="d3X2" class="X3"></label><label for="d0Y2" class="Y0"></label><label for="d1Y2" class="Y1"></label><label for="d2Y2"
class="Y2"></label><label for="d3Y2" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX2" id="e0X2" class="X0 X"><input type="radio" name="eX2" id="e1X2" class="X1 X"><input type="radio" name="eX2" id="e2X2" class="X2 X"><input type="radio" name="eX2" id="e3X2" class="X3 X" checked="">
<input
type="radio" name="eY2" id="e0Y2" class="Y0 Y"><input type="radio" name="eY2" id="e1Y2" class="Y1 Y" checked=""><input type="radio" name="eY2" id="e2Y2" class="Y2 Y"><input type="radio" name="eY2" id="e3Y2" class="Y3 Y"></div>
<div class="inner"><label for="e0X2" class="X0"></label><label for="e1X2" class="X1"></label><label for="e2X2" class="X2"></label><label for="e3X2" class="X3"></label><label for="e0Y2" class="Y0"></label><label for="e1Y2" class="Y1"></label><label for="e2Y2"
class="Y2"></label><label for="e3Y2" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX2" id="f0X2" class="X0 X" checked=""><input type="radio" name="fX2" id="f1X2" class="X1 X"><input type="radio" name="fX2" id="f2X2" class="X2 X"><input type="radio" name="fX2" id="f3X2" class="X3 X">
<input
type="radio" name="fY2" id="f0Y2" class="Y0 Y"><input type="radio" name="fY2" id="f1Y2" class="Y1 Y"><input type="radio" name="fY2" id="f2Y2" class="Y2 Y" checked=""><input type="radio" name="fY2" id="f3Y2" class="Y3 Y"></div>
<div class="inner"><label for="f0X2" class="X0"></label><label for="f1X2" class="X1"></label><label for="f2X2" class="X2"></label><label for="f3X2" class="X3"></label><label for="f0Y2" class="Y0"></label><label for="f1Y2" class="Y1"></label><label for="f2Y2"
class="Y2"></label><label for="f3Y2" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX2" id="g0X2" class="X0 X"><input type="radio" name="gX2" id="g1X2" class="X1 X"><input type="radio" name="gX2" id="g2X2" class="X2 X" checked=""><input type="radio" name="gX2" id="g3X2" class="X3 X">
<input
type="radio" name="gY2" id="g0Y2" class="Y0 Y" checked=""><input type="radio" name="gY2" id="g1Y2" class="Y1 Y"><input type="radio" name="gY2" id="g2Y2" class="Y2 Y"><input type="radio" name="gY2" id="g3Y2" class="Y3 Y"></div>
<div class="inner"><label for="g0X2" class="X0"></label><label for="g1X2" class="X1"></label><label for="g2X2" class="X2"></label><label for="g3X2" class="X3"></label><label for="g0Y2" class="Y0"></label><label for="g1Y2" class="Y1"></label><label for="g2Y2"
class="Y2"></label><label for="g3Y2" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX2" id="h0X2" class="X0 X"><input type="radio" name="hX2" id="h1X2" class="X1 X"><input type="radio" name="hX2" id="h2X2" class="X2 X"><input type="radio" name="hX2" id="h3X2" class="X3 X" checked="">
<input
type="radio" name="hY2" id="h0Y2" class="Y0 Y"><input type="radio" name="hY2" id="h1Y2" class="Y1 Y"><input type="radio" name="hY2" id="h2Y2" class="Y2 Y" checked=""><input type="radio" name="hY2" id="h3Y2" class="Y3 Y"></div>
<div class="inner"><label for="h0X2" class="X0"></label><label for="h1X2" class="X1"></label><label for="h2X2" class="X2"></label><label for="h3X2" class="X3"></label><label for="h0Y2" class="Y0"></label><label for="h1Y2" class="Y1"></label><label for="h2Y2"
class="Y2"></label><label for="h3Y2" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX2" id="i0X2" class="X0 X" checked=""><input type="radio" name="iX2" id="i1X2" class="X1 X"><input type="radio" name="iX2" id="i2X2" class="X2 X"><input type="radio" name="iX2" id="i3X2" class="X3 X">
<input
type="radio" name="iY2" id="i0Y2" class="Y0 Y"><input type="radio" name="iY2" id="i1Y2" class="Y1 Y"><input type="radio" name="iY2" id="i2Y2" class="Y2 Y"><input type="radio" name="iY2" id="i3Y2" class="Y3 Y" checked=""></div>
<div class="inner"><label for="i0X2" class="X0"></label><label for="i1X2" class="X1"></label><label for="i2X2" class="X2"></label><label for="i3X2" class="X3"></label><label for="i0Y2" class="Y0"></label><label for="i1Y2" class="Y1"></label><label for="i2Y2"
class="Y2"></label><label for="i3Y2" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX2" id="j0X2" class="X0 X" checked=""><input type="radio" name="jX2" id="j1X2" class="X1 X"><input type="radio" name="jX2" id="j2X2" class="X2 X"><input type="radio" name="jX2" id="j3X2" class="X3 X">
<input
type="radio" name="jY2" id="j0Y2" class="Y0 Y"><input type="radio" name="jY2" id="j1Y2" class="Y1 Y" checked=""><input type="radio" name="jY2" id="j2Y2" class="Y2 Y"><input type="radio" name="jY2" id="j3Y2" class="Y3 Y"></div>
<div class="inner"><label for="j0X2" class="X0"></label><label for="j1X2" class="X1"></label><label for="j2X2" class="X2"></label><label for="j3X2" class="X3"></label><label for="j0Y2" class="Y0"></label><label for="j1Y2" class="Y1"></label><label for="j2Y2"
class="Y2"></label><label for="j3Y2" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX2" id="k0X2" class="X0 X"><input type="radio" name="kX2" id="k1X2" class="X1 X" checked=""><input type="radio" name="kX2" id="k2X2" class="X2 X"><input type="radio" name="kX2" id="k3X2" class="X3 X">
<input
type="radio" name="kY2" id="k0Y2" class="Y0 Y"><input type="radio" name="kY2" id="k1Y2" class="Y1 Y" checked=""><input type="radio" name="kY2" id="k2Y2" class="Y2 Y"><input type="radio" name="kY2" id="k3Y2" class="Y3 Y"></div>
<div class="inner"><label for="k0X2" class="X0"></label><label for="k1X2" class="X1"></label><label for="k2X2" class="X2"></label><label for="k3X2" class="X3"></label><label for="k0Y2" class="Y0"></label><label for="k1Y2" class="Y1"></label><label for="k2Y2"
class="Y2"></label><label for="k3Y2" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX2" id="l0X2" class="X0 X"><input type="radio" name="lX2" id="l1X2" class="X1 X"><input type="radio" name="lX2" id="l2X2" class="X2 X" checked=""><input type="radio" name="lX2" id="l3X2" class="X3 X">
<input
type="radio" name="lY2" id="l0Y2" class="Y0 Y"><input type="radio" name="lY2" id="l1Y2" class="Y1 Y" checked=""><input type="radio" name="lY2" id="l2Y2" class="Y2 Y"><input type="radio" name="lY2" id="l3Y2" class="Y3 Y"></div>
<div class="inner"><label for="l0X2" class="X0"></label><label for="l1X2" class="X1"></label><label for="l2X2" class="X2"></label><label for="l3X2" class="X3"></label><label for="l0Y2" class="Y0"></label><label for="l1Y2" class="Y1"></label><label for="l2Y2"
class="Y2"></label><label for="l3Y2" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX2" id="m0X2" class="X0 X" checked=""><input type="radio" name="mX2" id="m1X2" class="X1 X"><input type="radio" name="mX2" id="m2X2" class="X2 X"><input type="radio" name="mX2" id="m3X2" class="X3 X">
<input
type="radio" name="mY2" id="m0Y2" class="Y0 Y" checked=""><input type="radio" name="mY2" id="m1Y2" class="Y1 Y"><input type="radio" name="mY2" id="m2Y2" class="Y2 Y"><input type="radio" name="mY2" id="m3Y2" class="Y3 Y"></div>
<div class="inner"><label for="m0X2" class="X0"></label><label for="m1X2" class="X1"></label><label for="m2X2" class="X2"></label><label for="m3X2" class="X3"></label><label for="m0Y2" class="Y0"></label><label for="m1Y2" class="Y1"></label><label for="m2Y2"
class="Y2"></label><label for="m3Y2" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX2" id="n0X2" class="X0 X"><input type="radio" name="nX2" id="n1X2" class="X1 X"><input type="radio" name="nX2" id="n2X2" class="X2 X"><input type="radio" name="nX2" id="n3X2" class="X3 X" checked="">
<input
type="radio" name="nY2" id="n0Y2" class="Y0 Y" checked=""><input type="radio" name="nY2" id="n1Y2" class="Y1 Y"><input type="radio" name="nY2" id="n2Y2" class="Y2 Y"><input type="radio" name="nY2" id="n3Y2" class="Y3 Y"></div>
<div class="inner"><label for="n0X2" class="X0"></label><label for="n1X2" class="X1"></label><label for="n2X2" class="X2"></label><label for="n3X2" class="X3"></label><label for="n0Y2" class="Y0"></label><label for="n1Y2" class="Y1"></label><label for="n2Y2"
class="Y2"></label><label for="n3Y2" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX2" id="o0X2" class="X0 X"><input type="radio" name="oX2" id="o1X2" class="X1 X"><input type="radio" name="oX2" id="o2X2" class="X2 X" checked=""><input type="radio" name="oX2" id="o3X2" class="X3 X">
<input
type="radio" name="oY2" id="o0Y2" class="Y0 Y"><input type="radio" name="oY2" id="o1Y2" class="Y1 Y"><input type="radio" name="oY2" id="o2Y2" class="Y2 Y" checked=""><input type="radio" name="oY2" id="o3Y2" class="Y3 Y"></div>
<div class="inner"><label for="o0X2" class="X0"></label><label for="o1X2" class="X1"></label><label for="o2X2" class="X2"></label><label for="o3X2" class="X3"></label><label for="o0Y2" class="Y0"></label><label for="o1Y2" class="Y1"></label><label for="o2Y2"
class="Y2"></label><label for="o3Y2" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success2" class="success">Success!</div><input id="targetShow2" class="targetShow" type="checkbox"><label class="target" for="targetShow2"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/raphael-wicker-P6JRr7-FxLw-unsplash.webp" alt="horses"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@grafx6?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Raphael Wicker</a> on <a href="https://unsplash.com/photos/selective-focus-photography-of-two-brown-horses-P6JRr7-FxLw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board3" class="board">
<h1>Game 3</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX3" id="a0X3" class="X0 X"><input type="radio" name="aX3" id="a1X3" class="X1 X"><input type="radio" name="aX3" id="a2X3" class="X2 X" checked=""><input type="radio" name="aX3" id="a3X3" class="X3 X">
<input
type="radio" name="aY3" id="a0Y3" class="Y0 Y"><input type="radio" name="aY3" id="a1Y3" class="Y1 Y"><input type="radio" name="aY3" id="a2Y3" class="Y2 Y"><input type="radio" name="aY3" id="a3Y3" class="Y3 Y" checked=""></div>
<div class="inner"><label for="a0X3" class="X0"></label><label for="a1X3" class="X1"></label><label for="a2X3" class="X2"></label><label for="a3X3" class="X3"></label><label for="a0Y3" class="Y0"></label><label for="a1Y3" class="Y1"></label><label for="a2Y3"
class="Y2"></label><label for="a3Y3" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX3" id="b0X3" class="X0 X"><input type="radio" name="bX3" id="b1X3" class="X1 X"><input type="radio" name="bX3" id="b2X3" class="X2 X"><input type="radio" name="bX3" id="b3X3" class="X3 X" checked="">
<input
type="radio" name="bY3" id="b0Y3" class="Y0 Y" checked=""><input type="radio" name="bY3" id="b1Y3" class="Y1 Y"><input type="radio" name="bY3" id="b2Y3" class="Y2 Y"><input type="radio" name="bY3" id="b3Y3" class="Y3 Y"></div>
<div class="inner"><label for="b0X3" class="X0"></label><label for="b1X3" class="X1"></label><label for="b2X3" class="X2"></label><label for="b3X3" class="X3"></label><label for="b0Y3" class="Y0"></label><label for="b1Y3" class="Y1"></label><label for="b2Y3"
class="Y2"></label><label for="b3Y3" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX3" id="c0X3" class="X0 X" checked=""><input type="radio" name="cX3" id="c1X3" class="X1 X"><input type="radio" name="cX3" id="c2X3" class="X2 X"><input type="radio" name="cX3" id="c3X3" class="X3 X">
<input
type="radio" name="cY3" id="c0Y3" class="Y0 Y"><input type="radio" name="cY3" id="c1Y3" class="Y1 Y" checked=""><input type="radio" name="cY3" id="c2Y3" class="Y2 Y"><input type="radio" name="cY3" id="c3Y3" class="Y3 Y"></div>
<div class="inner"><label for="c0X3" class="X0"></label><label for="c1X3" class="X1"></label><label for="c2X3" class="X2"></label><label for="c3X3" class="X3"></label><label for="c0Y3" class="Y0"></label><label for="c1Y3" class="Y1"></label><label for="c2Y3"
class="Y2"></label><label for="c3Y3" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX3" id="d0X3" class="X0 X"><input type="radio" name="dX3" id="d1X3" class="X1 X"><input type="radio" name="dX3" id="d2X3" class="X2 X" checked=""><input type="radio" name="dX3" id="d3X3" class="X3 X">
<input
type="radio" name="dY3" id="d0Y3" class="Y0 Y" checked=""><input type="radio" name="dY3" id="d1Y3" class="Y1 Y"><input type="radio" name="dY3" id="d2Y3" class="Y2 Y"><input type="radio" name="dY3" id="d3Y3" class="Y3 Y"></div>
<div class="inner"><label for="d0X3" class="X0"></label><label for="d1X3" class="X1"></label><label for="d2X3" class="X2"></label><label for="d3X3" class="X3"></label><label for="d0Y3" class="Y0"></label><label for="d1Y3" class="Y1"></label><label for="d2Y3"
class="Y2"></label><label for="d3Y3" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX3" id="e0X3" class="X0 X"><input type="radio" name="eX3" id="e1X3" class="X1 X"><input type="radio" name="eX3" id="e2X3" class="X2 X" checked=""><input type="radio" name="eX3" id="e3X3" class="X3 X">
<input
type="radio" name="eY3" id="e0Y3" class="Y0 Y"><input type="radio" name="eY3" id="e1Y3" class="Y1 Y"><input type="radio" name="eY3" id="e2Y3" class="Y2 Y" checked=""><input type="radio" name="eY3" id="e3Y3" class="Y3 Y"></div>
<div class="inner"><label for="e0X3" class="X0"></label><label for="e1X3" class="X1"></label><label for="e2X3" class="X2"></label><label for="e3X3" class="X3"></label><label for="e0Y3" class="Y0"></label><label for="e1Y3" class="Y1"></label><label for="e2Y3"
class="Y2"></label><label for="e3Y3" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX3" id="f0X3" class="X0 X" checked=""><input type="radio" name="fX3" id="f1X3" class="X1 X"><input type="radio" name="fX3" id="f2X3" class="X2 X"><input type="radio" name="fX3" id="f3X3" class="X3 X">
<input
type="radio" name="fY3" id="f0Y3" class="Y0 Y"><input type="radio" name="fY3" id="f1Y3" class="Y1 Y"><input type="radio" name="fY3" id="f2Y3" class="Y2 Y" checked=""><input type="radio" name="fY3" id="f3Y3" class="Y3 Y"></div>
<div class="inner"><label for="f0X3" class="X0"></label><label for="f1X3" class="X1"></label><label for="f2X3" class="X2"></label><label for="f3X3" class="X3"></label><label for="f0Y3" class="Y0"></label><label for="f1Y3" class="Y1"></label><label for="f2Y3"
class="Y2"></label><label for="f3Y3" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX3" id="g0X3" class="X0 X"><input type="radio" name="gX3" id="g1X3" class="X1 X" checked=""><input type="radio" name="gX3" id="g2X3" class="X2 X"><input type="radio" name="gX3" id="g3X3" class="X3 X">
<input
type="radio" name="gY3" id="g0Y3" class="Y0 Y" checked=""><input type="radio" name="gY3" id="g1Y3" class="Y1 Y"><input type="radio" name="gY3" id="g2Y3" class="Y2 Y"><input type="radio" name="gY3" id="g3Y3" class="Y3 Y"></div>
<div class="inner"><label for="g0X3" class="X0"></label><label for="g1X3" class="X1"></label><label for="g2X3" class="X2"></label><label for="g3X3" class="X3"></label><label for="g0Y3" class="Y0"></label><label for="g1Y3" class="Y1"></label><label for="g2Y3"
class="Y2"></label><label for="g3Y3" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX3" id="h0X3" class="X0 X"><input type="radio" name="hX3" id="h1X3" class="X1 X" checked=""><input type="radio" name="hX3" id="h2X3" class="X2 X"><input type="radio" name="hX3" id="h3X3" class="X3 X">
<input
type="radio" name="hY3" id="h0Y3" class="Y0 Y"><input type="radio" name="hY3" id="h1Y3" class="Y1 Y" checked=""><input type="radio" name="hY3" id="h2Y3" class="Y2 Y"><input type="radio" name="hY3" id="h3Y3" class="Y3 Y"></div>
<div class="inner"><label for="h0X3" class="X0"></label><label for="h1X3" class="X1"></label><label for="h2X3" class="X2"></label><label for="h3X3" class="X3"></label><label for="h0Y3" class="Y0"></label><label for="h1Y3" class="Y1"></label><label for="h2Y3"
class="Y2"></label><label for="h3Y3" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX3" id="i0X3" class="X0 X"><input type="radio" name="iX3" id="i1X3" class="X1 X" checked=""><input type="radio" name="iX3" id="i2X3" class="X2 X"><input type="radio" name="iX3" id="i3X3" class="X3 X">
<input
type="radio" name="iY3" id="i0Y3" class="Y0 Y"><input type="radio" name="iY3" id="i1Y3" class="Y1 Y"><input type="radio" name="iY3" id="i2Y3" class="Y2 Y"><input type="radio" name="iY3" id="i3Y3" class="Y3 Y" checked=""></div>
<div class="inner"><label for="i0X3" class="X0"></label><label for="i1X3" class="X1"></label><label for="i2X3" class="X2"></label><label for="i3X3" class="X3"></label><label for="i0Y3" class="Y0"></label><label for="i1Y3" class="Y1"></label><label for="i2Y3"
class="Y2"></label><label for="i3Y3" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX3" id="j0X3" class="X0 X"><input type="radio" name="jX3" id="j1X3" class="X1 X"><input type="radio" name="jX3" id="j2X3" class="X2 X" checked=""><input type="radio" name="jX3" id="j3X3" class="X3 X">
<input
type="radio" name="jY3" id="j0Y3" class="Y0 Y"><input type="radio" name="jY3" id="j1Y3" class="Y1 Y" checked=""><input type="radio" name="jY3" id="j2Y3" class="Y2 Y"><input type="radio" name="jY3" id="j3Y3" class="Y3 Y"></div>
<div class="inner"><label for="j0X3" class="X0"></label><label for="j1X3" class="X1"></label><label for="j2X3" class="X2"></label><label for="j3X3" class="X3"></label><label for="j0Y3" class="Y0"></label><label for="j1Y3" class="Y1"></label><label for="j2Y3"
class="Y2"></label><label for="j3Y3" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX3" id="k0X3" class="X0 X" checked=""><input type="radio" name="kX3" id="k1X3" class="X1 X"><input type="radio" name="kX3" id="k2X3" class="X2 X"><input type="radio" name="kX3" id="k3X3" class="X3 X">
<input
type="radio" name="kY3" id="k0Y3" class="Y0 Y" checked=""><input type="radio" name="kY3" id="k1Y3" class="Y1 Y"><input type="radio" name="kY3" id="k2Y3" class="Y2 Y"><input type="radio" name="kY3" id="k3Y3" class="Y3 Y"></div>
<div class="inner"><label for="k0X3" class="X0"></label><label for="k1X3" class="X1"></label><label for="k2X3" class="X2"></label><label for="k3X3" class="X3"></label><label for="k0Y3" class="Y0"></label><label for="k1Y3" class="Y1"></label><label for="k2Y3"
class="Y2"></label><label for="k3Y3" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX3" id="l0X3" class="X0 X"><input type="radio" name="lX3" id="l1X3" class="X1 X"><input type="radio" name="lX3" id="l2X3" class="X2 X"><input type="radio" name="lX3" id="l3X3" class="X3 X" checked="">
<input
type="radio" name="lY3" id="l0Y3" class="Y0 Y"><input type="radio" name="lY3" id="l1Y3" class="Y1 Y"><input type="radio" name="lY3" id="l2Y3" class="Y2 Y" checked=""><input type="radio" name="lY3" id="l3Y3" class="Y3 Y"></div>
<div class="inner"><label for="l0X3" class="X0"></label><label for="l1X3" class="X1"></label><label for="l2X3" class="X2"></label><label for="l3X3" class="X3"></label><label for="l0Y3" class="Y0"></label><label for="l1Y3" class="Y1"></label><label for="l2Y3"
class="Y2"></label><label for="l3Y3" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX3" id="m0X3" class="X0 X"><input type="radio" name="mX3" id="m1X3" class="X1 X" checked=""><input type="radio" name="mX3" id="m2X3" class="X2 X"><input type="radio" name="mX3" id="m3X3" class="X3 X">
<input
type="radio" name="mY3" id="m0Y3" class="Y0 Y"><input type="radio" name="mY3" id="m1Y3" class="Y1 Y"><input type="radio" name="mY3" id="m2Y3" class="Y2 Y" checked=""><input type="radio" name="mY3" id="m3Y3" class="Y3 Y"></div>
<div class="inner"><label for="m0X3" class="X0"></label><label for="m1X3" class="X1"></label><label for="m2X3" class="X2"></label><label for="m3X3" class="X3"></label><label for="m0Y3" class="Y0"></label><label for="m1Y3" class="Y1"></label><label for="m2Y3"
class="Y2"></label><label for="m3Y3" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX3" id="n0X3" class="X0 X"><input type="radio" name="nX3" id="n1X3" class="X1 X"><input type="radio" name="nX3" id="n2X3" class="X2 X"><input type="radio" name="nX3" id="n3X3" class="X3 X" checked="">
<input
type="radio" name="nY3" id="n0Y3" class="Y0 Y"><input type="radio" name="nY3" id="n1Y3" class="Y1 Y" checked=""><input type="radio" name="nY3" id="n2Y3" class="Y2 Y"><input type="radio" name="nY3" id="n3Y3" class="Y3 Y"></div>
<div class="inner"><label for="n0X3" class="X0"></label><label for="n1X3" class="X1"></label><label for="n2X3" class="X2"></label><label for="n3X3" class="X3"></label><label for="n0Y3" class="Y0"></label><label for="n1Y3" class="Y1"></label><label for="n2Y3"
class="Y2"></label><label for="n3Y3" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX3" id="o0X3" class="X0 X" checked=""><input type="radio" name="oX3" id="o1X3" class="X1 X"><input type="radio" name="oX3" id="o2X3" class="X2 X"><input type="radio" name="oX3" id="o3X3" class="X3 X">
<input
type="radio" name="oY3" id="o0Y3" class="Y0 Y"><input type="radio" name="oY3" id="o1Y3" class="Y1 Y"><input type="radio" name="oY3" id="o2Y3" class="Y2 Y"><input type="radio" name="oY3" id="o3Y3" class="Y3 Y" checked=""></div>
<div class="inner"><label for="o0X3" class="X0"></label><label for="o1X3" class="X1"></label><label for="o2X3" class="X2"></label><label for="o3X3" class="X3"></label><label for="o0Y3" class="Y0"></label><label for="o1Y3" class="Y1"></label><label for="o2Y3"
class="Y2"></label><label for="o3Y3" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success3" class="success">Success!</div><input id="targetShow3" class="targetShow" type="checkbox"><label class="target" for="targetShow3"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/randy-fath-SQ20tWzxXO0-unsplash.webp" alt="breakfast"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@randyfath?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Randy Fath</a> on <a href="https://unsplash.com/photos/food-photography-of-strawberries-oranges-and-pancakes-on-plates-SQ20tWzxXO0?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board4" class="board">
<h1>Game 4</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX4" id="a0X4" class="X0 X"><input type="radio" name="aX4" id="a1X4" class="X1 X"><input type="radio" name="aX4" id="a2X4" class="X2 X" checked=""><input type="radio" name="aX4" id="a3X4" class="X3 X">
<input
type="radio" name="aY4" id="a0Y4" class="Y0 Y"><input type="radio" name="aY4" id="a1Y4" class="Y1 Y" checked=""><input type="radio" name="aY4" id="a2Y4" class="Y2 Y"><input type="radio" name="aY4" id="a3Y4" class="Y3 Y"></div>
<div class="inner"><label for="a0X4" class="X0"></label><label for="a1X4" class="X1"></label><label for="a2X4" class="X2"></label><label for="a3X4" class="X3"></label><label for="a0Y4" class="Y0"></label><label for="a1Y4" class="Y1"></label><label for="a2Y4"
class="Y2"></label><label for="a3Y4" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX4" id="b0X4" class="X0 X"><input type="radio" name="bX4" id="b1X4" class="X1 X"><input type="radio" name="bX4" id="b2X4" class="X2 X"><input type="radio" name="bX4" id="b3X4" class="X3 X" checked="">
<input
type="radio" name="bY4" id="b0Y4" class="Y0 Y" checked=""><input type="radio" name="bY4" id="b1Y4" class="Y1 Y"><input type="radio" name="bY4" id="b2Y4" class="Y2 Y"><input type="radio" name="bY4" id="b3Y4" class="Y3 Y"></div>
<div class="inner"><label for="b0X4" class="X0"></label><label for="b1X4" class="X1"></label><label for="b2X4" class="X2"></label><label for="b3X4" class="X3"></label><label for="b0Y4" class="Y0"></label><label for="b1Y4" class="Y1"></label><label for="b2Y4"
class="Y2"></label><label for="b3Y4" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX4" id="c0X4" class="X0 X"><input type="radio" name="cX4" id="c1X4" class="X1 X"><input type="radio" name="cX4" id="c2X4" class="X2 X" checked=""><input type="radio" name="cX4" id="c3X4" class="X3 X">
<input
type="radio" name="cY4" id="c0Y4" class="Y0 Y" checked=""><input type="radio" name="cY4" id="c1Y4" class="Y1 Y"><input type="radio" name="cY4" id="c2Y4" class="Y2 Y"><input type="radio" name="cY4" id="c3Y4" class="Y3 Y"></div>
<div class="inner"><label for="c0X4" class="X0"></label><label for="c1X4" class="X1"></label><label for="c2X4" class="X2"></label><label for="c3X4" class="X3"></label><label for="c0Y4" class="Y0"></label><label for="c1Y4" class="Y1"></label><label for="c2Y4"
class="Y2"></label><label for="c3Y4" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX4" id="d0X4" class="X0 X" checked=""><input type="radio" name="dX4" id="d1X4" class="X1 X"><input type="radio" name="dX4" id="d2X4" class="X2 X"><input type="radio" name="dX4" id="d3X4" class="X3 X">
<input
type="radio" name="dY4" id="d0Y4" class="Y0 Y" checked=""><input type="radio" name="dY4" id="d1Y4" class="Y1 Y"><input type="radio" name="dY4" id="d2Y4" class="Y2 Y"><input type="radio" name="dY4" id="d3Y4" class="Y3 Y"></div>
<div class="inner"><label for="d0X4" class="X0"></label><label for="d1X4" class="X1"></label><label for="d2X4" class="X2"></label><label for="d3X4" class="X3"></label><label for="d0Y4" class="Y0"></label><label for="d1Y4" class="Y1"></label><label for="d2Y4"
class="Y2"></label><label for="d3Y4" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX4" id="e0X4" class="X0 X"><input type="radio" name="eX4" id="e1X4" class="X1 X" checked=""><input type="radio" name="eX4" id="e2X4" class="X2 X"><input type="radio" name="eX4" id="e3X4" class="X3 X">
<input
type="radio" name="eY4" id="e0Y4" class="Y0 Y"><input type="radio" name="eY4" id="e1Y4" class="Y1 Y"><input type="radio" name="eY4" id="e2Y4" class="Y2 Y" checked=""><input type="radio" name="eY4" id="e3Y4" class="Y3 Y"></div>
<div class="inner"><label for="e0X4" class="X0"></label><label for="e1X4" class="X1"></label><label for="e2X4" class="X2"></label><label for="e3X4" class="X3"></label><label for="e0Y4" class="Y0"></label><label for="e1Y4" class="Y1"></label><label for="e2Y4"
class="Y2"></label><label for="e3Y4" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX4" id="f0X4" class="X0 X"><input type="radio" name="fX4" id="f1X4" class="X1 X"><input type="radio" name="fX4" id="f2X4" class="X2 X"><input type="radio" name="fX4" id="f3X4" class="X3 X" checked="">
<input
type="radio" name="fY4" id="f0Y4" class="Y0 Y"><input type="radio" name="fY4" id="f1Y4" class="Y1 Y" checked=""><input type="radio" name="fY4" id="f2Y4" class="Y2 Y"><input type="radio" name="fY4" id="f3Y4" class="Y3 Y"></div>
<div class="inner"><label for="f0X4" class="X0"></label><label for="f1X4" class="X1"></label><label for="f2X4" class="X2"></label><label for="f3X4" class="X3"></label><label for="f0Y4" class="Y0"></label><label for="f1Y4" class="Y1"></label><label for="f2Y4"
class="Y2"></label><label for="f3Y4" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX4" id="g0X4" class="X0 X" checked=""><input type="radio" name="gX4" id="g1X4" class="X1 X"><input type="radio" name="gX4" id="g2X4" class="X2 X"><input type="radio" name="gX4" id="g3X4" class="X3 X">
<input
type="radio" name="gY4" id="g0Y4" class="Y0 Y"><input type="radio" name="gY4" id="g1Y4" class="Y1 Y"><input type="radio" name="gY4" id="g2Y4" class="Y2 Y" checked=""><input type="radio" name="gY4" id="g3Y4" class="Y3 Y"></div>
<div class="inner"><label for="g0X4" class="X0"></label><label for="g1X4" class="X1"></label><label for="g2X4" class="X2"></label><label for="g3X4" class="X3"></label><label for="g0Y4" class="Y0"></label><label for="g1Y4" class="Y1"></label><label for="g2Y4"
class="Y2"></label><label for="g3Y4" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX4" id="h0X4" class="X0 X"><input type="radio" name="hX4" id="h1X4" class="X1 X" checked=""><input type="radio" name="hX4" id="h2X4" class="X2 X"><input type="radio" name="hX4" id="h3X4" class="X3 X">
<input
type="radio" name="hY4" id="h0Y4" class="Y0 Y"><input type="radio" name="hY4" id="h1Y4" class="Y1 Y" checked=""><input type="radio" name="hY4" id="h2Y4" class="Y2 Y"><input type="radio" name="hY4" id="h3Y4" class="Y3 Y"></div>
<div class="inner"><label for="h0X4" class="X0"></label><label for="h1X4" class="X1"></label><label for="h2X4" class="X2"></label><label for="h3X4" class="X3"></label><label for="h0Y4" class="Y0"></label><label for="h1Y4" class="Y1"></label><label for="h2Y4"
class="Y2"></label><label for="h3Y4" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX4" id="i0X4" class="X0 X"><input type="radio" name="iX4" id="i1X4" class="X1 X" checked=""><input type="radio" name="iX4" id="i2X4" class="X2 X"><input type="radio" name="iX4" id="i3X4" class="X3 X">
<input
type="radio" name="iY4" id="i0Y4" class="Y0 Y"><input type="radio" name="iY4" id="i1Y4" class="Y1 Y"><input type="radio" name="iY4" id="i2Y4" class="Y2 Y"><input type="radio" name="iY4" id="i3Y4" class="Y3 Y" checked=""></div>
<div class="inner"><label for="i0X4" class="X0"></label><label for="i1X4" class="X1"></label><label for="i2X4" class="X2"></label><label for="i3X4" class="X3"></label><label for="i0Y4" class="Y0"></label><label for="i1Y4" class="Y1"></label><label for="i2Y4"
class="Y2"></label><label for="i3Y4" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX4" id="j0X4" class="X0 X"><input type="radio" name="jX4" id="j1X4" class="X1 X"><input type="radio" name="jX4" id="j2X4" class="X2 X" checked=""><input type="radio" name="jX4" id="j3X4" class="X3 X">
<input
type="radio" name="jY4" id="j0Y4" class="Y0 Y"><input type="radio" name="jY4" id="j1Y4" class="Y1 Y"><input type="radio" name="jY4" id="j2Y4" class="Y2 Y"><input type="radio" name="jY4" id="j3Y4" class="Y3 Y" checked=""></div>
<div class="inner"><label for="j0X4" class="X0"></label><label for="j1X4" class="X1"></label><label for="j2X4" class="X2"></label><label for="j3X4" class="X3"></label><label for="j0Y4" class="Y0"></label><label for="j1Y4" class="Y1"></label><label for="j2Y4"
class="Y2"></label><label for="j3Y4" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX4" id="k0X4" class="X0 X"><input type="radio" name="kX4" id="k1X4" class="X1 X"><input type="radio" name="kX4" id="k2X4" class="X2 X"><input type="radio" name="kX4" id="k3X4" class="X3 X" checked="">
<input
type="radio" name="kY4" id="k0Y4" class="Y0 Y"><input type="radio" name="kY4" id="k1Y4" class="Y1 Y"><input type="radio" name="kY4" id="k2Y4" class="Y2 Y" checked=""><input type="radio" name="kY4" id="k3Y4" class="Y3 Y"></div>
<div class="inner"><label for="k0X4" class="X0"></label><label for="k1X4" class="X1"></label><label for="k2X4" class="X2"></label><label for="k3X4" class="X3"></label><label for="k0Y4" class="Y0"></label><label for="k1Y4" class="Y1"></label><label for="k2Y4"
class="Y2"></label><label for="k3Y4" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX4" id="l0X4" class="X0 X"><input type="radio" name="lX4" id="l1X4" class="X1 X"><input type="radio" name="lX4" id="l2X4" class="X2 X" checked=""><input type="radio" name="lX4" id="l3X4" class="X3 X">
<input
type="radio" name="lY4" id="l0Y4" class="Y0 Y"><input type="radio" name="lY4" id="l1Y4" class="Y1 Y"><input type="radio" name="lY4" id="l2Y4" class="Y2 Y" checked=""><input type="radio" name="lY4" id="l3Y4" class="Y3 Y"></div>
<div class="inner"><label for="l0X4" class="X0"></label><label for="l1X4" class="X1"></label><label for="l2X4" class="X2"></label><label for="l3X4" class="X3"></label><label for="l0Y4" class="Y0"></label><label for="l1Y4" class="Y1"></label><label for="l2Y4"
class="Y2"></label><label for="l3Y4" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX4" id="m0X4" class="X0 X"><input type="radio" name="mX4" id="m1X4" class="X1 X" checked=""><input type="radio" name="mX4" id="m2X4" class="X2 X"><input type="radio" name="mX4" id="m3X4" class="X3 X">
<input
type="radio" name="mY4" id="m0Y4" class="Y0 Y" checked=""><input type="radio" name="mY4" id="m1Y4" class="Y1 Y"><input type="radio" name="mY4" id="m2Y4" class="Y2 Y"><input type="radio" name="mY4" id="m3Y4" class="Y3 Y"></div>
<div class="inner"><label for="m0X4" class="X0"></label><label for="m1X4" class="X1"></label><label for="m2X4" class="X2"></label><label for="m3X4" class="X3"></label><label for="m0Y4" class="Y0"></label><label for="m1Y4" class="Y1"></label><label for="m2Y4"
class="Y2"></label><label for="m3Y4" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX4" id="n0X4" class="X0 X" checked=""><input type="radio" name="nX4" id="n1X4" class="X1 X"><input type="radio" name="nX4" id="n2X4" class="X2 X"><input type="radio" name="nX4" id="n3X4" class="X3 X">
<input
type="radio" name="nY4" id="n0Y4" class="Y0 Y"><input type="radio" name="nY4" id="n1Y4" class="Y1 Y"><input type="radio" name="nY4" id="n2Y4" class="Y2 Y"><input type="radio" name="nY4" id="n3Y4" class="Y3 Y" checked=""></div>
<div class="inner"><label for="n0X4" class="X0"></label><label for="n1X4" class="X1"></label><label for="n2X4" class="X2"></label><label for="n3X4" class="X3"></label><label for="n0Y4" class="Y0"></label><label for="n1Y4" class="Y1"></label><label for="n2Y4"
class="Y2"></label><label for="n3Y4" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX4" id="o0X4" class="X0 X" checked=""><input type="radio" name="oX4" id="o1X4" class="X1 X"><input type="radio" name="oX4" id="o2X4" class="X2 X"><input type="radio" name="oX4" id="o3X4" class="X3 X">
<input
type="radio" name="oY4" id="o0Y4" class="Y0 Y"><input type="radio" name="oY4" id="o1Y4" class="Y1 Y" checked=""><input type="radio" name="oY4" id="o2Y4" class="Y2 Y"><input type="radio" name="oY4" id="o3Y4" class="Y3 Y"></div>
<div class="inner"><label for="o0X4" class="X0"></label><label for="o1X4" class="X1"></label><label for="o2X4" class="X2"></label><label for="o3X4" class="X3"></label><label for="o0Y4" class="Y0"></label><label for="o1Y4" class="Y1"></label><label for="o2Y4"
class="Y2"></label><label for="o3Y4" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success4" class="success">Success!</div><input id="targetShow4" class="targetShow" type="checkbox"><label class="target" for="targetShow4"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/juvian-duff-x_mdcjGHnUI-unsplash.webp" alt="remains of a dead tree"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@xtruh_terrestrial?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Juvian Duff</a> on <a href="https://unsplash.com/photos/brown-old-leafless-tree-x_mdcjGHnUI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board5" class="board">
<h1>Game 5</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX5" id="a0X5" class="X0 X"><input type="radio" name="aX5" id="a1X5" class="X1 X"><input type="radio" name="aX5" id="a2X5" class="X2 X" checked=""><input type="radio" name="aX5" id="a3X5" class="X3 X">
<input
type="radio" name="aY5" id="a0Y5" class="Y0 Y"><input type="radio" name="aY5" id="a1Y5" class="Y1 Y"><input type="radio" name="aY5" id="a2Y5" class="Y2 Y"><input type="radio" name="aY5" id="a3Y5" class="Y3 Y" checked=""></div>
<div class="inner"><label for="a0X5" class="X0"></label><label for="a1X5" class="X1"></label><label for="a2X5" class="X2"></label><label for="a3X5" class="X3"></label><label for="a0Y5" class="Y0"></label><label for="a1Y5" class="Y1"></label><label for="a2Y5"
class="Y2"></label><label for="a3Y5" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX5" id="b0X5" class="X0 X"><input type="radio" name="bX5" id="b1X5" class="X1 X" checked=""><input type="radio" name="bX5" id="b2X5" class="X2 X"><input type="radio" name="bX5" id="b3X5" class="X3 X">
<input
type="radio" name="bY5" id="b0Y5" class="Y0 Y" checked=""><input type="radio" name="bY5" id="b1Y5" class="Y1 Y"><input type="radio" name="bY5" id="b2Y5" class="Y2 Y"><input type="radio" name="bY5" id="b3Y5" class="Y3 Y"></div>
<div class="inner"><label for="b0X5" class="X0"></label><label for="b1X5" class="X1"></label><label for="b2X5" class="X2"></label><label for="b3X5" class="X3"></label><label for="b0Y5" class="Y0"></label><label for="b1Y5" class="Y1"></label><label for="b2Y5"
class="Y2"></label><label for="b3Y5" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX5" id="c0X5" class="X0 X"><input type="radio" name="cX5" id="c1X5" class="X1 X" checked=""><input type="radio" name="cX5" id="c2X5" class="X2 X"><input type="radio" name="cX5" id="c3X5" class="X3 X">
<input
type="radio" name="cY5" id="c0Y5" class="Y0 Y"><input type="radio" name="cY5" id="c1Y5" class="Y1 Y"><input type="radio" name="cY5" id="c2Y5" class="Y2 Y" checked=""><input type="radio" name="cY5" id="c3Y5" class="Y3 Y"></div>
<div class="inner"><label for="c0X5" class="X0"></label><label for="c1X5" class="X1"></label><label for="c2X5" class="X2"></label><label for="c3X5" class="X3"></label><label for="c0Y5" class="Y0"></label><label for="c1Y5" class="Y1"></label><label for="c2Y5"
class="Y2"></label><label for="c3Y5" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX5" id="d0X5" class="X0 X"><input type="radio" name="dX5" id="d1X5" class="X1 X"><input type="radio" name="dX5" id="d2X5" class="X2 X" checked=""><input type="radio" name="dX5" id="d3X5" class="X3 X">
<input
type="radio" name="dY5" id="d0Y5" class="Y0 Y"><input type="radio" name="dY5" id="d1Y5" class="Y1 Y" checked=""><input type="radio" name="dY5" id="d2Y5" class="Y2 Y"><input type="radio" name="dY5" id="d3Y5" class="Y3 Y"></div>
<div class="inner"><label for="d0X5" class="X0"></label><label for="d1X5" class="X1"></label><label for="d2X5" class="X2"></label><label for="d3X5" class="X3"></label><label for="d0Y5" class="Y0"></label><label for="d1Y5" class="Y1"></label><label for="d2Y5"
class="Y2"></label><label for="d3Y5" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX5" id="e0X5" class="X0 X" checked=""><input type="radio" name="eX5" id="e1X5" class="X1 X"><input type="radio" name="eX5" id="e2X5" class="X2 X"><input type="radio" name="eX5" id="e3X5" class="X3 X">
<input
type="radio" name="eY5" id="e0Y5" class="Y0 Y" checked=""><input type="radio" name="eY5" id="e1Y5" class="Y1 Y"><input type="radio" name="eY5" id="e2Y5" class="Y2 Y"><input type="radio" name="eY5" id="e3Y5" class="Y3 Y"></div>
<div class="inner"><label for="e0X5" class="X0"></label><label for="e1X5" class="X1"></label><label for="e2X5" class="X2"></label><label for="e3X5" class="X3"></label><label for="e0Y5" class="Y0"></label><label for="e1Y5" class="Y1"></label><label for="e2Y5"
class="Y2"></label><label for="e3Y5" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX5" id="f0X5" class="X0 X" checked=""><input type="radio" name="fX5" id="f1X5" class="X1 X"><input type="radio" name="fX5" id="f2X5" class="X2 X"><input type="radio" name="fX5" id="f3X5" class="X3 X">
<input
type="radio" name="fY5" id="f0Y5" class="Y0 Y"><input type="radio" name="fY5" id="f1Y5" class="Y1 Y"><input type="radio" name="fY5" id="f2Y5" class="Y2 Y" checked=""><input type="radio" name="fY5" id="f3Y5" class="Y3 Y"></div>
<div class="inner"><label for="f0X5" class="X0"></label><label for="f1X5" class="X1"></label><label for="f2X5" class="X2"></label><label for="f3X5" class="X3"></label><label for="f0Y5" class="Y0"></label><label for="f1Y5" class="Y1"></label><label for="f2Y5"
class="Y2"></label><label for="f3Y5" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX5" id="g0X5" class="X0 X" checked=""><input type="radio" name="gX5" id="g1X5" class="X1 X"><input type="radio" name="gX5" id="g2X5" class="X2 X"><input type="radio" name="gX5" id="g3X5" class="X3 X">
<input
type="radio" name="gY5" id="g0Y5" class="Y0 Y"><input type="radio" name="gY5" id="g1Y5" class="Y1 Y"><input type="radio" name="gY5" id="g2Y5" class="Y2 Y"><input type="radio" name="gY5" id="g3Y5" class="Y3 Y" checked=""></div>
<div class="inner"><label for="g0X5" class="X0"></label><label for="g1X5" class="X1"></label><label for="g2X5" class="X2"></label><label for="g3X5" class="X3"></label><label for="g0Y5" class="Y0"></label><label for="g1Y5" class="Y1"></label><label for="g2Y5"
class="Y2"></label><label for="g3Y5" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX5" id="h0X5" class="X0 X" checked=""><input type="radio" name="hX5" id="h1X5" class="X1 X"><input type="radio" name="hX5" id="h2X5" class="X2 X"><input type="radio" name="hX5" id="h3X5" class="X3 X">
<input
type="radio" name="hY5" id="h0Y5" class="Y0 Y"><input type="radio" name="hY5" id="h1Y5" class="Y1 Y" checked=""><input type="radio" name="hY5" id="h2Y5" class="Y2 Y"><input type="radio" name="hY5" id="h3Y5" class="Y3 Y"></div>
<div class="inner"><label for="h0X5" class="X0"></label><label for="h1X5" class="X1"></label><label for="h2X5" class="X2"></label><label for="h3X5" class="X3"></label><label for="h0Y5" class="Y0"></label><label for="h1Y5" class="Y1"></label><label for="h2Y5"
class="Y2"></label><label for="h3Y5" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX5" id="i0X5" class="X0 X"><input type="radio" name="iX5" id="i1X5" class="X1 X"><input type="radio" name="iX5" id="i2X5" class="X2 X"><input type="radio" name="iX5" id="i3X5" class="X3 X" checked="">
<input
type="radio" name="iY5" id="i0Y5" class="Y0 Y" checked=""><input type="radio" name="iY5" id="i1Y5" class="Y1 Y"><input type="radio" name="iY5" id="i2Y5" class="Y2 Y"><input type="radio" name="iY5" id="i3Y5" class="Y3 Y"></div>
<div class="inner"><label for="i0X5" class="X0"></label><label for="i1X5" class="X1"></label><label for="i2X5" class="X2"></label><label for="i3X5" class="X3"></label><label for="i0Y5" class="Y0"></label><label for="i1Y5" class="Y1"></label><label for="i2Y5"
class="Y2"></label><label for="i3Y5" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX5" id="j0X5" class="X0 X"><input type="radio" name="jX5" id="j1X5" class="X1 X"><input type="radio" name="jX5" id="j2X5" class="X2 X"><input type="radio" name="jX5" id="j3X5" class="X3 X" checked="">
<input
type="radio" name="jY5" id="j0Y5" class="Y0 Y"><input type="radio" name="jY5" id="j1Y5" class="Y1 Y"><input type="radio" name="jY5" id="j2Y5" class="Y2 Y" checked=""><input type="radio" name="jY5" id="j3Y5" class="Y3 Y"></div>
<div class="inner"><label for="j0X5" class="X0"></label><label for="j1X5" class="X1"></label><label for="j2X5" class="X2"></label><label for="j3X5" class="X3"></label><label for="j0Y5" class="Y0"></label><label for="j1Y5" class="Y1"></label><label for="j2Y5"
class="Y2"></label><label for="j3Y5" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX5" id="k0X5" class="X0 X"><input type="radio" name="kX5" id="k1X5" class="X1 X" checked=""><input type="radio" name="kX5" id="k2X5" class="X2 X"><input type="radio" name="kX5" id="k3X5" class="X3 X">
<input
type="radio" name="kY5" id="k0Y5" class="Y0 Y"><input type="radio" name="kY5" id="k1Y5" class="Y1 Y" checked=""><input type="radio" name="kY5" id="k2Y5" class="Y2 Y"><input type="radio" name="kY5" id="k3Y5" class="Y3 Y"></div>
<div class="inner"><label for="k0X5" class="X0"></label><label for="k1X5" class="X1"></label><label for="k2X5" class="X2"></label><label for="k3X5" class="X3"></label><label for="k0Y5" class="Y0"></label><label for="k1Y5" class="Y1"></label><label for="k2Y5"
class="Y2"></label><label for="k3Y5" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX5" id="l0X5" class="X0 X"><input type="radio" name="lX5" id="l1X5" class="X1 X" checked=""><input type="radio" name="lX5" id="l2X5" class="X2 X"><input type="radio" name="lX5" id="l3X5" class="X3 X">
<input
type="radio" name="lY5" id="l0Y5" class="Y0 Y"><input type="radio" name="lY5" id="l1Y5" class="Y1 Y"><input type="radio" name="lY5" id="l2Y5" class="Y2 Y"><input type="radio" name="lY5" id="l3Y5" class="Y3 Y" checked=""></div>
<div class="inner"><label for="l0X5" class="X0"></label><label for="l1X5" class="X1"></label><label for="l2X5" class="X2"></label><label for="l3X5" class="X3"></label><label for="l0Y5" class="Y0"></label><label for="l1Y5" class="Y1"></label><label for="l2Y5"
class="Y2"></label><label for="l3Y5" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX5" id="m0X5" class="X0 X"><input type="radio" name="mX5" id="m1X5" class="X1 X"><input type="radio" name="mX5" id="m2X5" class="X2 X" checked=""><input type="radio" name="mX5" id="m3X5" class="X3 X">
<input
type="radio" name="mY5" id="m0Y5" class="Y0 Y"><input type="radio" name="mY5" id="m1Y5" class="Y1 Y"><input type="radio" name="mY5" id="m2Y5" class="Y2 Y" checked=""><input type="radio" name="mY5" id="m3Y5" class="Y3 Y"></div>
<div class="inner"><label for="m0X5" class="X0"></label><label for="m1X5" class="X1"></label><label for="m2X5" class="X2"></label><label for="m3X5" class="X3"></label><label for="m0Y5" class="Y0"></label><label for="m1Y5" class="Y1"></label><label for="m2Y5"
class="Y2"></label><label for="m3Y5" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX5" id="n0X5" class="X0 X"><input type="radio" name="nX5" id="n1X5" class="X1 X"><input type="radio" name="nX5" id="n2X5" class="X2 X"><input type="radio" name="nX5" id="n3X5" class="X3 X" checked="">
<input
type="radio" name="nY5" id="n0Y5" class="Y0 Y"><input type="radio" name="nY5" id="n1Y5" class="Y1 Y" checked=""><input type="radio" name="nY5" id="n2Y5" class="Y2 Y"><input type="radio" name="nY5" id="n3Y5" class="Y3 Y"></div>
<div class="inner"><label for="n0X5" class="X0"></label><label for="n1X5" class="X1"></label><label for="n2X5" class="X2"></label><label for="n3X5" class="X3"></label><label for="n0Y5" class="Y0"></label><label for="n1Y5" class="Y1"></label><label for="n2Y5"
class="Y2"></label><label for="n3Y5" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX5" id="o0X5" class="X0 X"><input type="radio" name="oX5" id="o1X5" class="X1 X"><input type="radio" name="oX5" id="o2X5" class="X2 X" checked=""><input type="radio" name="oX5" id="o3X5" class="X3 X">
<input
type="radio" name="oY5" id="o0Y5" class="Y0 Y" checked=""><input type="radio" name="oY5" id="o1Y5" class="Y1 Y"><input type="radio" name="oY5" id="o2Y5" class="Y2 Y"><input type="radio" name="oY5" id="o3Y5" class="Y3 Y"></div>
<div class="inner"><label for="o0X5" class="X0"></label><label for="o1X5" class="X1"></label><label for="o2X5" class="X2"></label><label for="o3X5" class="X3"></label><label for="o0Y5" class="Y0"></label><label for="o1Y5" class="Y1"></label><label for="o2Y5"
class="Y2"></label><label for="o3Y5" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success5" class="success">Success!</div><input id="targetShow5" class="targetShow" type="checkbox"><label class="target" for="targetShow5"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/cfphotosin-photography-mf70VKCjZjk-unsplash.webp" alt="rugby scrum"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@cfphotosin?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">CFPhotosin Photography</a> on <a href="https://unsplash.com/photos/group-of-women-in-white-and-black-stripe-shirt-mf70VKCjZjk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board6" class="board">
<h1>Game 6</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX6" id="a0X6" class="X0 X"><input type="radio" name="aX6" id="a1X6" class="X1 X" checked=""><input type="radio" name="aX6" id="a2X6" class="X2 X"><input type="radio" name="aX6" id="a3X6" class="X3 X">
<input
type="radio" name="aY6" id="a0Y6" class="Y0 Y"><input type="radio" name="aY6" id="a1Y6" class="Y1 Y"><input type="radio" name="aY6" id="a2Y6" class="Y2 Y"><input type="radio" name="aY6" id="a3Y6" class="Y3 Y" checked=""></div>
<div class="inner"><label for="a0X6" class="X0"></label><label for="a1X6" class="X1"></label><label for="a2X6" class="X2"></label><label for="a3X6" class="X3"></label><label for="a0Y6" class="Y0"></label><label for="a1Y6" class="Y1"></label><label for="a2Y6"
class="Y2"></label><label for="a3Y6" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX6" id="b0X6" class="X0 X"><input type="radio" name="bX6" id="b1X6" class="X1 X"><input type="radio" name="bX6" id="b2X6" class="X2 X" checked=""><input type="radio" name="bX6" id="b3X6" class="X3 X">
<input
type="radio" name="bY6" id="b0Y6" class="Y0 Y"><input type="radio" name="bY6" id="b1Y6" class="Y1 Y"><input type="radio" name="bY6" id="b2Y6" class="Y2 Y"><input type="radio" name="bY6" id="b3Y6" class="Y3 Y" checked=""></div>
<div class="inner"><label for="b0X6" class="X0"></label><label for="b1X6" class="X1"></label><label for="b2X6" class="X2"></label><label for="b3X6" class="X3"></label><label for="b0Y6" class="Y0"></label><label for="b1Y6" class="Y1"></label><label for="b2Y6"
class="Y2"></label><label for="b3Y6" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX6" id="c0X6" class="X0 X"><input type="radio" name="cX6" id="c1X6" class="X1 X"><input type="radio" name="cX6" id="c2X6" class="X2 X"><input type="radio" name="cX6" id="c3X6" class="X3 X" checked="">
<input
type="radio" name="cY6" id="c0Y6" class="Y0 Y"><input type="radio" name="cY6" id="c1Y6" class="Y1 Y" checked=""><input type="radio" name="cY6" id="c2Y6" class="Y2 Y"><input type="radio" name="cY6" id="c3Y6" class="Y3 Y"></div>
<div class="inner"><label for="c0X6" class="X0"></label><label for="c1X6" class="X1"></label><label for="c2X6" class="X2"></label><label for="c3X6" class="X3"></label><label for="c0Y6" class="Y0"></label><label for="c1Y6" class="Y1"></label><label for="c2Y6"
class="Y2"></label><label for="c3Y6" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX6" id="d0X6" class="X0 X" checked=""><input type="radio" name="dX6" id="d1X6" class="X1 X"><input type="radio" name="dX6" id="d2X6" class="X2 X"><input type="radio" name="dX6" id="d3X6" class="X3 X">
<input
type="radio" name="dY6" id="d0Y6" class="Y0 Y"><input type="radio" name="dY6" id="d1Y6" class="Y1 Y"><input type="radio" name="dY6" id="d2Y6" class="Y2 Y" checked=""><input type="radio" name="dY6" id="d3Y6" class="Y3 Y"></div>
<div class="inner"><label for="d0X6" class="X0"></label><label for="d1X6" class="X1"></label><label for="d2X6" class="X2"></label><label for="d3X6" class="X3"></label><label for="d0Y6" class="Y0"></label><label for="d1Y6" class="Y1"></label><label for="d2Y6"
class="Y2"></label><label for="d3Y6" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX6" id="e0X6" class="X0 X" checked=""><input type="radio" name="eX6" id="e1X6" class="X1 X"><input type="radio" name="eX6" id="e2X6" class="X2 X"><input type="radio" name="eX6" id="e3X6" class="X3 X">
<input
type="radio" name="eY6" id="e0Y6" class="Y0 Y"><input type="radio" name="eY6" id="e1Y6" class="Y1 Y" checked=""><input type="radio" name="eY6" id="e2Y6" class="Y2 Y"><input type="radio" name="eY6" id="e3Y6" class="Y3 Y"></div>
<div class="inner"><label for="e0X6" class="X0"></label><label for="e1X6" class="X1"></label><label for="e2X6" class="X2"></label><label for="e3X6" class="X3"></label><label for="e0Y6" class="Y0"></label><label for="e1Y6" class="Y1"></label><label for="e2Y6"
class="Y2"></label><label for="e3Y6" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX6" id="f0X6" class="X0 X"><input type="radio" name="fX6" id="f1X6" class="X1 X"><input type="radio" name="fX6" id="f2X6" class="X2 X" checked=""><input type="radio" name="fX6" id="f3X6" class="X3 X">
<input
type="radio" name="fY6" id="f0Y6" class="Y0 Y" checked=""><input type="radio" name="fY6" id="f1Y6" class="Y1 Y"><input type="radio" name="fY6" id="f2Y6" class="Y2 Y"><input type="radio" name="fY6" id="f3Y6" class="Y3 Y"></div>
<div class="inner"><label for="f0X6" class="X0"></label><label for="f1X6" class="X1"></label><label for="f2X6" class="X2"></label><label for="f3X6" class="X3"></label><label for="f0Y6" class="Y0"></label><label for="f1Y6" class="Y1"></label><label for="f2Y6"
class="Y2"></label><label for="f3Y6" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX6" id="g0X6" class="X0 X"><input type="radio" name="gX6" id="g1X6" class="X1 X"><input type="radio" name="gX6" id="g2X6" class="X2 X"><input type="radio" name="gX6" id="g3X6" class="X3 X" checked="">
<input
type="radio" name="gY6" id="g0Y6" class="Y0 Y" checked=""><input type="radio" name="gY6" id="g1Y6" class="Y1 Y"><input type="radio" name="gY6" id="g2Y6" class="Y2 Y"><input type="radio" name="gY6" id="g3Y6" class="Y3 Y"></div>
<div class="inner"><label for="g0X6" class="X0"></label><label for="g1X6" class="X1"></label><label for="g2X6" class="X2"></label><label for="g3X6" class="X3"></label><label for="g0Y6" class="Y0"></label><label for="g1Y6" class="Y1"></label><label for="g2Y6"
class="Y2"></label><label for="g3Y6" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX6" id="h0X6" class="X0 X"><input type="radio" name="hX6" id="h1X6" class="X1 X" checked=""><input type="radio" name="hX6" id="h2X6" class="X2 X"><input type="radio" name="hX6" id="h3X6" class="X3 X">
<input
type="radio" name="hY6" id="h0Y6" class="Y0 Y" checked=""><input type="radio" name="hY6" id="h1Y6" class="Y1 Y"><input type="radio" name="hY6" id="h2Y6" class="Y2 Y"><input type="radio" name="hY6" id="h3Y6" class="Y3 Y"></div>
<div class="inner"><label for="h0X6" class="X0"></label><label for="h1X6" class="X1"></label><label for="h2X6" class="X2"></label><label for="h3X6" class="X3"></label><label for="h0Y6" class="Y0"></label><label for="h1Y6" class="Y1"></label><label for="h2Y6"
class="Y2"></label><label for="h3Y6" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX6" id="i0X6" class="X0 X"><input type="radio" name="iX6" id="i1X6" class="X1 X"><input type="radio" name="iX6" id="i2X6" class="X2 X" checked=""><input type="radio" name="iX6" id="i3X6" class="X3 X">
<input
type="radio" name="iY6" id="i0Y6" class="Y0 Y"><input type="radio" name="iY6" id="i1Y6" class="Y1 Y" checked=""><input type="radio" name="iY6" id="i2Y6" class="Y2 Y"><input type="radio" name="iY6" id="i3Y6" class="Y3 Y"></div>
<div class="inner"><label for="i0X6" class="X0"></label><label for="i1X6" class="X1"></label><label for="i2X6" class="X2"></label><label for="i3X6" class="X3"></label><label for="i0Y6" class="Y0"></label><label for="i1Y6" class="Y1"></label><label for="i2Y6"
class="Y2"></label><label for="i3Y6" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX6" id="j0X6" class="X0 X" checked=""><input type="radio" name="jX6" id="j1X6" class="X1 X"><input type="radio" name="jX6" id="j2X6" class="X2 X"><input type="radio" name="jX6" id="j3X6" class="X3 X">
<input
type="radio" name="jY6" id="j0Y6" class="Y0 Y" checked=""><input type="radio" name="jY6" id="j1Y6" class="Y1 Y"><input type="radio" name="jY6" id="j2Y6" class="Y2 Y"><input type="radio" name="jY6" id="j3Y6" class="Y3 Y"></div>
<div class="inner"><label for="j0X6" class="X0"></label><label for="j1X6" class="X1"></label><label for="j2X6" class="X2"></label><label for="j3X6" class="X3"></label><label for="j0Y6" class="Y0"></label><label for="j1Y6" class="Y1"></label><label for="j2Y6"
class="Y2"></label><label for="j3Y6" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX6" id="k0X6" class="X0 X"><input type="radio" name="kX6" id="k1X6" class="X1 X"><input type="radio" name="kX6" id="k2X6" class="X2 X"><input type="radio" name="kX6" id="k3X6" class="X3 X" checked="">
<input
type="radio" name="kY6" id="k0Y6" class="Y0 Y"><input type="radio" name="kY6" id="k1Y6" class="Y1 Y"><input type="radio" name="kY6" id="k2Y6" class="Y2 Y" checked=""><input type="radio" name="kY6" id="k3Y6" class="Y3 Y"></div>
<div class="inner"><label for="k0X6" class="X0"></label><label for="k1X6" class="X1"></label><label for="k2X6" class="X2"></label><label for="k3X6" class="X3"></label><label for="k0Y6" class="Y0"></label><label for="k1Y6" class="Y1"></label><label for="k2Y6"
class="Y2"></label><label for="k3Y6" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX6" id="l0X6" class="X0 X" checked=""><input type="radio" name="lX6" id="l1X6" class="X1 X"><input type="radio" name="lX6" id="l2X6" class="X2 X"><input type="radio" name="lX6" id="l3X6" class="X3 X">
<input
type="radio" name="lY6" id="l0Y6" class="Y0 Y"><input type="radio" name="lY6" id="l1Y6" class="Y1 Y"><input type="radio" name="lY6" id="l2Y6" class="Y2 Y"><input type="radio" name="lY6" id="l3Y6" class="Y3 Y" checked=""></div>
<div class="inner"><label for="l0X6" class="X0"></label><label for="l1X6" class="X1"></label><label for="l2X6" class="X2"></label><label for="l3X6" class="X3"></label><label for="l0Y6" class="Y0"></label><label for="l1Y6" class="Y1"></label><label for="l2Y6"
class="Y2"></label><label for="l3Y6" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX6" id="m0X6" class="X0 X"><input type="radio" name="mX6" id="m1X6" class="X1 X"><input type="radio" name="mX6" id="m2X6" class="X2 X" checked=""><input type="radio" name="mX6" id="m3X6" class="X3 X">
<input
type="radio" name="mY6" id="m0Y6" class="Y0 Y"><input type="radio" name="mY6" id="m1Y6" class="Y1 Y"><input type="radio" name="mY6" id="m2Y6" class="Y2 Y" checked=""><input type="radio" name="mY6" id="m3Y6" class="Y3 Y"></div>
<div class="inner"><label for="m0X6" class="X0"></label><label for="m1X6" class="X1"></label><label for="m2X6" class="X2"></label><label for="m3X6" class="X3"></label><label for="m0Y6" class="Y0"></label><label for="m1Y6" class="Y1"></label><label for="m2Y6"
class="Y2"></label><label for="m3Y6" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX6" id="n0X6" class="X0 X"><input type="radio" name="nX6" id="n1X6" class="X1 X" checked=""><input type="radio" name="nX6" id="n2X6" class="X2 X"><input type="radio" name="nX6" id="n3X6" class="X3 X">
<input
type="radio" name="nY6" id="n0Y6" class="Y0 Y"><input type="radio" name="nY6" id="n1Y6" class="Y1 Y"><input type="radio" name="nY6" id="n2Y6" class="Y2 Y" checked=""><input type="radio" name="nY6" id="n3Y6" class="Y3 Y"></div>
<div class="inner"><label for="n0X6" class="X0"></label><label for="n1X6" class="X1"></label><label for="n2X6" class="X2"></label><label for="n3X6" class="X3"></label><label for="n0Y6" class="Y0"></label><label for="n1Y6" class="Y1"></label><label for="n2Y6"
class="Y2"></label><label for="n3Y6" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX6" id="o0X6" class="X0 X"><input type="radio" name="oX6" id="o1X6" class="X1 X" checked=""><input type="radio" name="oX6" id="o2X6" class="X2 X"><input type="radio" name="oX6" id="o3X6" class="X3 X">
<input
type="radio" name="oY6" id="o0Y6" class="Y0 Y"><input type="radio" name="oY6" id="o1Y6" class="Y1 Y" checked=""><input type="radio" name="oY6" id="o2Y6" class="Y2 Y"><input type="radio" name="oY6" id="o3Y6" class="Y3 Y"></div>
<div class="inner"><label for="o0X6" class="X0"></label><label for="o1X6" class="X1"></label><label for="o2X6" class="X2"></label><label for="o3X6" class="X3"></label><label for="o0Y6" class="Y0"></label><label for="o1Y6" class="Y1"></label><label for="o2Y6"
class="Y2"></label><label for="o3Y6" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success6" class="success">Success!</div><input id="targetShow6" class="targetShow" type="checkbox"><label class="target" for="targetShow6"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/haydn-golden-LfT2t-E08kw-unsplash.webp" alt="bouquet of flowers"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@goldensson?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Haydn Golden</a> on <a href="https://unsplash.com/photos/white-and-purple-petaled-flower-arrangement-on-white-vase-LfT2t-E08kw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board7" class="board">
<h1>Game 7</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX7" id="a0X7" class="X0 X"><input type="radio" name="aX7" id="a1X7" class="X1 X" checked=""><input type="radio" name="aX7" id="a2X7" class="X2 X"><input type="radio" name="aX7" id="a3X7" class="X3 X">
<input
type="radio" name="aY7" id="a0Y7" class="Y0 Y"><input type="radio" name="aY7" id="a1Y7" class="Y1 Y" checked=""><input type="radio" name="aY7" id="a2Y7" class="Y2 Y"><input type="radio" name="aY7" id="a3Y7" class="Y3 Y"></div>
<div class="inner"><label for="a0X7" class="X0"></label><label for="a1X7" class="X1"></label><label for="a2X7" class="X2"></label><label for="a3X7" class="X3"></label><label for="a0Y7" class="Y0"></label><label for="a1Y7" class="Y1"></label><label for="a2Y7"
class="Y2"></label><label for="a3Y7" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX7" id="b0X7" class="X0 X" checked=""><input type="radio" name="bX7" id="b1X7" class="X1 X"><input type="radio" name="bX7" id="b2X7" class="X2 X"><input type="radio" name="bX7" id="b3X7" class="X3 X">
<input
type="radio" name="bY7" id="b0Y7" class="Y0 Y"><input type="radio" name="bY7" id="b1Y7" class="Y1 Y"><input type="radio" name="bY7" id="b2Y7" class="Y2 Y" checked=""><input type="radio" name="bY7" id="b3Y7" class="Y3 Y"></div>
<div class="inner"><label for="b0X7" class="X0"></label><label for="b1X7" class="X1"></label><label for="b2X7" class="X2"></label><label for="b3X7" class="X3"></label><label for="b0Y7" class="Y0"></label><label for="b1Y7" class="Y1"></label><label for="b2Y7"
class="Y2"></label><label for="b3Y7" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX7" id="c0X7" class="X0 X"><input type="radio" name="cX7" id="c1X7" class="X1 X"><input type="radio" name="cX7" id="c2X7" class="X2 X" checked=""><input type="radio" name="cX7" id="c3X7" class="X3 X">
<input
type="radio" name="cY7" id="c0Y7" class="Y0 Y"><input type="radio" name="cY7" id="c1Y7" class="Y1 Y"><input type="radio" name="cY7" id="c2Y7" class="Y2 Y" checked=""><input type="radio" name="cY7" id="c3Y7" class="Y3 Y"></div>
<div class="inner"><label for="c0X7" class="X0"></label><label for="c1X7" class="X1"></label><label for="c2X7" class="X2"></label><label for="c3X7" class="X3"></label><label for="c0Y7" class="Y0"></label><label for="c1Y7" class="Y1"></label><label for="c2Y7"
class="Y2"></label><label for="c3Y7" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX7" id="d0X7" class="X0 X"><input type="radio" name="dX7" id="d1X7" class="X1 X" checked=""><input type="radio" name="dX7" id="d2X7" class="X2 X"><input type="radio" name="dX7" id="d3X7" class="X3 X">
<input
type="radio" name="dY7" id="d0Y7" class="Y0 Y" checked=""><input type="radio" name="dY7" id="d1Y7" class="Y1 Y"><input type="radio" name="dY7" id="d2Y7" class="Y2 Y"><input type="radio" name="dY7" id="d3Y7" class="Y3 Y"></div>
<div class="inner"><label for="d0X7" class="X0"></label><label for="d1X7" class="X1"></label><label for="d2X7" class="X2"></label><label for="d3X7" class="X3"></label><label for="d0Y7" class="Y0"></label><label for="d1Y7" class="Y1"></label><label for="d2Y7"
class="Y2"></label><label for="d3Y7" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX7" id="e0X7" class="X0 X" checked=""><input type="radio" name="eX7" id="e1X7" class="X1 X"><input type="radio" name="eX7" id="e2X7" class="X2 X"><input type="radio" name="eX7" id="e3X7" class="X3 X">
<input
type="radio" name="eY7" id="e0Y7" class="Y0 Y"><input type="radio" name="eY7" id="e1Y7" class="Y1 Y" checked=""><input type="radio" name="eY7" id="e2Y7" class="Y2 Y"><input type="radio" name="eY7" id="e3Y7" class="Y3 Y"></div>
<div class="inner"><label for="e0X7" class="X0"></label><label for="e1X7" class="X1"></label><label for="e2X7" class="X2"></label><label for="e3X7" class="X3"></label><label for="e0Y7" class="Y0"></label><label for="e1Y7" class="Y1"></label><label for="e2Y7"
class="Y2"></label><label for="e3Y7" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX7" id="f0X7" class="X0 X"><input type="radio" name="fX7" id="f1X7" class="X1 X"><input type="radio" name="fX7" id="f2X7" class="X2 X"><input type="radio" name="fX7" id="f3X7" class="X3 X" checked="">
<input
type="radio" name="fY7" id="f0Y7" class="Y0 Y" checked=""><input type="radio" name="fY7" id="f1Y7" class="Y1 Y"><input type="radio" name="fY7" id="f2Y7" class="Y2 Y"><input type="radio" name="fY7" id="f3Y7" class="Y3 Y"></div>
<div class="inner"><label for="f0X7" class="X0"></label><label for="f1X7" class="X1"></label><label for="f2X7" class="X2"></label><label for="f3X7" class="X3"></label><label for="f0Y7" class="Y0"></label><label for="f1Y7" class="Y1"></label><label for="f2Y7"
class="Y2"></label><label for="f3Y7" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX7" id="g0X7" class="X0 X"><input type="radio" name="gX7" id="g1X7" class="X1 X"><input type="radio" name="gX7" id="g2X7" class="X2 X"><input type="radio" name="gX7" id="g3X7" class="X3 X" checked="">
<input
type="radio" name="gY7" id="g0Y7" class="Y0 Y"><input type="radio" name="gY7" id="g1Y7" class="Y1 Y"><input type="radio" name="gY7" id="g2Y7" class="Y2 Y" checked=""><input type="radio" name="gY7" id="g3Y7" class="Y3 Y"></div>
<div class="inner"><label for="g0X7" class="X0"></label><label for="g1X7" class="X1"></label><label for="g2X7" class="X2"></label><label for="g3X7" class="X3"></label><label for="g0Y7" class="Y0"></label><label for="g1Y7" class="Y1"></label><label for="g2Y7"
class="Y2"></label><label for="g3Y7" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX7" id="h0X7" class="X0 X"><input type="radio" name="hX7" id="h1X7" class="X1 X"><input type="radio" name="hX7" id="h2X7" class="X2 X" checked=""><input type="radio" name="hX7" id="h3X7" class="X3 X">
<input
type="radio" name="hY7" id="h0Y7" class="Y0 Y"><input type="radio" name="hY7" id="h1Y7" class="Y1 Y" checked=""><input type="radio" name="hY7" id="h2Y7" class="Y2 Y"><input type="radio" name="hY7" id="h3Y7" class="Y3 Y"></div>
<div class="inner"><label for="h0X7" class="X0"></label><label for="h1X7" class="X1"></label><label for="h2X7" class="X2"></label><label for="h3X7" class="X3"></label><label for="h0Y7" class="Y0"></label><label for="h1Y7" class="Y1"></label><label for="h2Y7"
class="Y2"></label><label for="h3Y7" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX7" id="i0X7" class="X0 X" checked=""><input type="radio" name="iX7" id="i1X7" class="X1 X"><input type="radio" name="iX7" id="i2X7" class="X2 X"><input type="radio" name="iX7" id="i3X7" class="X3 X">
<input
type="radio" name="iY7" id="i0Y7" class="Y0 Y"><input type="radio" name="iY7" id="i1Y7" class="Y1 Y"><input type="radio" name="iY7" id="i2Y7" class="Y2 Y"><input type="radio" name="iY7" id="i3Y7" class="Y3 Y" checked=""></div>
<div class="inner"><label for="i0X7" class="X0"></label><label for="i1X7" class="X1"></label><label for="i2X7" class="X2"></label><label for="i3X7" class="X3"></label><label for="i0Y7" class="Y0"></label><label for="i1Y7" class="Y1"></label><label for="i2Y7"
class="Y2"></label><label for="i3Y7" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX7" id="j0X7" class="X0 X"><input type="radio" name="jX7" id="j1X7" class="X1 X" checked=""><input type="radio" name="jX7" id="j2X7" class="X2 X"><input type="radio" name="jX7" id="j3X7" class="X3 X">
<input
type="radio" name="jY7" id="j0Y7" class="Y0 Y"><input type="radio" name="jY7" id="j1Y7" class="Y1 Y"><input type="radio" name="jY7" id="j2Y7" class="Y2 Y"><input type="radio" name="jY7" id="j3Y7" class="Y3 Y" checked=""></div>
<div class="inner"><label for="j0X7" class="X0"></label><label for="j1X7" class="X1"></label><label for="j2X7" class="X2"></label><label for="j3X7" class="X3"></label><label for="j0Y7" class="Y0"></label><label for="j1Y7" class="Y1"></label><label for="j2Y7"
class="Y2"></label><label for="j3Y7" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX7" id="k0X7" class="X0 X"><input type="radio" name="kX7" id="k1X7" class="X1 X"><input type="radio" name="kX7" id="k2X7" class="X2 X" checked=""><input type="radio" name="kX7" id="k3X7" class="X3 X">
<input
type="radio" name="kY7" id="k0Y7" class="Y0 Y"><input type="radio" name="kY7" id="k1Y7" class="Y1 Y"><input type="radio" name="kY7" id="k2Y7" class="Y2 Y"><input type="radio" name="kY7" id="k3Y7" class="Y3 Y" checked=""></div>
<div class="inner"><label for="k0X7" class="X0"></label><label for="k1X7" class="X1"></label><label for="k2X7" class="X2"></label><label for="k3X7" class="X3"></label><label for="k0Y7" class="Y0"></label><label for="k1Y7" class="Y1"></label><label for="k2Y7"
class="Y2"></label><label for="k3Y7" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX7" id="l0X7" class="X0 X"><input type="radio" name="lX7" id="l1X7" class="X1 X"><input type="radio" name="lX7" id="l2X7" class="X2 X"><input type="radio" name="lX7" id="l3X7" class="X3 X" checked="">
<input
type="radio" name="lY7" id="l0Y7" class="Y0 Y"><input type="radio" name="lY7" id="l1Y7" class="Y1 Y" checked=""><input type="radio" name="lY7" id="l2Y7" class="Y2 Y"><input type="radio" name="lY7" id="l3Y7" class="Y3 Y"></div>
<div class="inner"><label for="l0X7" class="X0"></label><label for="l1X7" class="X1"></label><label for="l2X7" class="X2"></label><label for="l3X7" class="X3"></label><label for="l0Y7" class="Y0"></label><label for="l1Y7" class="Y1"></label><label for="l2Y7"
class="Y2"></label><label for="l3Y7" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX7" id="m0X7" class="X0 X"><input type="radio" name="mX7" id="m1X7" class="X1 X"><input type="radio" name="mX7" id="m2X7" class="X2 X" checked=""><input type="radio" name="mX7" id="m3X7" class="X3 X">
<input
type="radio" name="mY7" id="m0Y7" class="Y0 Y" checked=""><input type="radio" name="mY7" id="m1Y7" class="Y1 Y"><input type="radio" name="mY7" id="m2Y7" class="Y2 Y"><input type="radio" name="mY7" id="m3Y7" class="Y3 Y"></div>
<div class="inner"><label for="m0X7" class="X0"></label><label for="m1X7" class="X1"></label><label for="m2X7" class="X2"></label><label for="m3X7" class="X3"></label><label for="m0Y7" class="Y0"></label><label for="m1Y7" class="Y1"></label><label for="m2Y7"
class="Y2"></label><label for="m3Y7" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX7" id="n0X7" class="X0 X" checked=""><input type="radio" name="nX7" id="n1X7" class="X1 X"><input type="radio" name="nX7" id="n2X7" class="X2 X"><input type="radio" name="nX7" id="n3X7" class="X3 X">
<input
type="radio" name="nY7" id="n0Y7" class="Y0 Y" checked=""><input type="radio" name="nY7" id="n1Y7" class="Y1 Y"><input type="radio" name="nY7" id="n2Y7" class="Y2 Y"><input type="radio" name="nY7" id="n3Y7" class="Y3 Y"></div>
<div class="inner"><label for="n0X7" class="X0"></label><label for="n1X7" class="X1"></label><label for="n2X7" class="X2"></label><label for="n3X7" class="X3"></label><label for="n0Y7" class="Y0"></label><label for="n1Y7" class="Y1"></label><label for="n2Y7"
class="Y2"></label><label for="n3Y7" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX7" id="o0X7" class="X0 X"><input type="radio" name="oX7" id="o1X7" class="X1 X" checked=""><input type="radio" name="oX7" id="o2X7" class="X2 X"><input type="radio" name="oX7" id="o3X7" class="X3 X">
<input
type="radio" name="oY7" id="o0Y7" class="Y0 Y"><input type="radio" name="oY7" id="o1Y7" class="Y1 Y"><input type="radio" name="oY7" id="o2Y7" class="Y2 Y" checked=""><input type="radio" name="oY7" id="o3Y7" class="Y3 Y"></div>
<div class="inner"><label for="o0X7" class="X0"></label><label for="o1X7" class="X1"></label><label for="o2X7" class="X2"></label><label for="o3X7" class="X3"></label><label for="o0Y7" class="Y0"></label><label for="o1Y7" class="Y1"></label><label for="o2Y7"
class="Y2"></label><label for="o3Y7" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success7" class="success">Success!</div><input id="targetShow7" class="targetShow" type="checkbox"><label class="target" for="targetShow7"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/gary-bendig-lpzcjbzsUmI-unsplash.webp" alt="birds"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@kris_ricepees?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Gary Bendig</a> on <a href="https://unsplash.com/photos/selective-focus-photography-of-yellow-and-black-lovebirds-lpzcjbzsUmI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board8" class="board">
<h1>Game 8</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX8" id="a0X8" class="X0 X"><input type="radio" name="aX8" id="a1X8" class="X1 X"><input type="radio" name="aX8" id="a2X8" class="X2 X"><input type="radio" name="aX8" id="a3X8" class="X3 X" checked="">
<input
type="radio" name="aY8" id="a0Y8" class="Y0 Y"><input type="radio" name="aY8" id="a1Y8" class="Y1 Y"><input type="radio" name="aY8" id="a2Y8" class="Y2 Y" checked=""><input type="radio" name="aY8" id="a3Y8" class="Y3 Y"></div>
<div class="inner"><label for="a0X8" class="X0"></label><label for="a1X8" class="X1"></label><label for="a2X8" class="X2"></label><label for="a3X8" class="X3"></label><label for="a0Y8" class="Y0"></label><label for="a1Y8" class="Y1"></label><label for="a2Y8"
class="Y2"></label><label for="a3Y8" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX8" id="b0X8" class="X0 X"><input type="radio" name="bX8" id="b1X8" class="X1 X" checked=""><input type="radio" name="bX8" id="b2X8" class="X2 X"><input type="radio" name="bX8" id="b3X8" class="X3 X">
<input
type="radio" name="bY8" id="b0Y8" class="Y0 Y"><input type="radio" name="bY8" id="b1Y8" class="Y1 Y" checked=""><input type="radio" name="bY8" id="b2Y8" class="Y2 Y"><input type="radio" name="bY8" id="b3Y8" class="Y3 Y"></div>
<div class="inner"><label for="b0X8" class="X0"></label><label for="b1X8" class="X1"></label><label for="b2X8" class="X2"></label><label for="b3X8" class="X3"></label><label for="b0Y8" class="Y0"></label><label for="b1Y8" class="Y1"></label><label for="b2Y8"
class="Y2"></label><label for="b3Y8" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX8" id="c0X8" class="X0 X"><input type="radio" name="cX8" id="c1X8" class="X1 X"><input type="radio" name="cX8" id="c2X8" class="X2 X" checked=""><input type="radio" name="cX8" id="c3X8" class="X3 X">
<input
type="radio" name="cY8" id="c0Y8" class="Y0 Y"><input type="radio" name="cY8" id="c1Y8" class="Y1 Y"><input type="radio" name="cY8" id="c2Y8" class="Y2 Y" checked=""><input type="radio" name="cY8" id="c3Y8" class="Y3 Y"></div>
<div class="inner"><label for="c0X8" class="X0"></label><label for="c1X8" class="X1"></label><label for="c2X8" class="X2"></label><label for="c3X8" class="X3"></label><label for="c0Y8" class="Y0"></label><label for="c1Y8" class="Y1"></label><label for="c2Y8"
class="Y2"></label><label for="c3Y8" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX8" id="d0X8" class="X0 X"><input type="radio" name="dX8" id="d1X8" class="X1 X"><input type="radio" name="dX8" id="d2X8" class="X2 X" checked=""><input type="radio" name="dX8" id="d3X8" class="X3 X">
<input
type="radio" name="dY8" id="d0Y8" class="Y0 Y"><input type="radio" name="dY8" id="d1Y8" class="Y1 Y"><input type="radio" name="dY8" id="d2Y8" class="Y2 Y"><input type="radio" name="dY8" id="d3Y8" class="Y3 Y" checked=""></div>
<div class="inner"><label for="d0X8" class="X0"></label><label for="d1X8" class="X1"></label><label for="d2X8" class="X2"></label><label for="d3X8" class="X3"></label><label for="d0Y8" class="Y0"></label><label for="d1Y8" class="Y1"></label><label for="d2Y8"
class="Y2"></label><label for="d3Y8" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX8" id="e0X8" class="X0 X"><input type="radio" name="eX8" id="e1X8" class="X1 X" checked=""><input type="radio" name="eX8" id="e2X8" class="X2 X"><input type="radio" name="eX8" id="e3X8" class="X3 X">
<input
type="radio" name="eY8" id="e0Y8" class="Y0 Y" checked=""><input type="radio" name="eY8" id="e1Y8" class="Y1 Y"><input type="radio" name="eY8" id="e2Y8" class="Y2 Y"><input type="radio" name="eY8" id="e3Y8" class="Y3 Y"></div>
<div class="inner"><label for="e0X8" class="X0"></label><label for="e1X8" class="X1"></label><label for="e2X8" class="X2"></label><label for="e3X8" class="X3"></label><label for="e0Y8" class="Y0"></label><label for="e1Y8" class="Y1"></label><label for="e2Y8"
class="Y2"></label><label for="e3Y8" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX8" id="f0X8" class="X0 X"><input type="radio" name="fX8" id="f1X8" class="X1 X" checked=""><input type="radio" name="fX8" id="f2X8" class="X2 X"><input type="radio" name="fX8" id="f3X8" class="X3 X">
<input
type="radio" name="fY8" id="f0Y8" class="Y0 Y"><input type="radio" name="fY8" id="f1Y8" class="Y1 Y"><input type="radio" name="fY8" id="f2Y8" class="Y2 Y" checked=""><input type="radio" name="fY8" id="f3Y8" class="Y3 Y"></div>
<div class="inner"><label for="f0X8" class="X0"></label><label for="f1X8" class="X1"></label><label for="f2X8" class="X2"></label><label for="f3X8" class="X3"></label><label for="f0Y8" class="Y0"></label><label for="f1Y8" class="Y1"></label><label for="f2Y8"
class="Y2"></label><label for="f3Y8" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX8" id="g0X8" class="X0 X" checked=""><input type="radio" name="gX8" id="g1X8" class="X1 X"><input type="radio" name="gX8" id="g2X8" class="X2 X"><input type="radio" name="gX8" id="g3X8" class="X3 X">
<input
type="radio" name="gY8" id="g0Y8" class="Y0 Y" checked=""><input type="radio" name="gY8" id="g1Y8" class="Y1 Y"><input type="radio" name="gY8" id="g2Y8" class="Y2 Y"><input type="radio" name="gY8" id="g3Y8" class="Y3 Y"></div>
<div class="inner"><label for="g0X8" class="X0"></label><label for="g1X8" class="X1"></label><label for="g2X8" class="X2"></label><label for="g3X8" class="X3"></label><label for="g0Y8" class="Y0"></label><label for="g1Y8" class="Y1"></label><label for="g2Y8"
class="Y2"></label><label for="g3Y8" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX8" id="h0X8" class="X0 X" checked=""><input type="radio" name="hX8" id="h1X8" class="X1 X"><input type="radio" name="hX8" id="h2X8" class="X2 X"><input type="radio" name="hX8" id="h3X8" class="X3 X">
<input
type="radio" name="hY8" id="h0Y8" class="Y0 Y"><input type="radio" name="hY8" id="h1Y8" class="Y1 Y"><input type="radio" name="hY8" id="h2Y8" class="Y2 Y" checked=""><input type="radio" name="hY8" id="h3Y8" class="Y3 Y"></div>
<div class="inner"><label for="h0X8" class="X0"></label><label for="h1X8" class="X1"></label><label for="h2X8" class="X2"></label><label for="h3X8" class="X3"></label><label for="h0Y8" class="Y0"></label><label for="h1Y8" class="Y1"></label><label for="h2Y8"
class="Y2"></label><label for="h3Y8" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX8" id="i0X8" class="X0 X"><input type="radio" name="iX8" id="i1X8" class="X1 X" checked=""><input type="radio" name="iX8" id="i2X8" class="X2 X"><input type="radio" name="iX8" id="i3X8" class="X3 X">
<input
type="radio" name="iY8" id="i0Y8" class="Y0 Y"><input type="radio" name="iY8" id="i1Y8" class="Y1 Y"><input type="radio" name="iY8" id="i2Y8" class="Y2 Y"><input type="radio" name="iY8" id="i3Y8" class="Y3 Y" checked=""></div>
<div class="inner"><label for="i0X8" class="X0"></label><label for="i1X8" class="X1"></label><label for="i2X8" class="X2"></label><label for="i3X8" class="X3"></label><label for="i0Y8" class="Y0"></label><label for="i1Y8" class="Y1"></label><label for="i2Y8"
class="Y2"></label><label for="i3Y8" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX8" id="j0X8" class="X0 X"><input type="radio" name="jX8" id="j1X8" class="X1 X"><input type="radio" name="jX8" id="j2X8" class="X2 X" checked=""><input type="radio" name="jX8" id="j3X8" class="X3 X">
<input
type="radio" name="jY8" id="j0Y8" class="Y0 Y" checked=""><input type="radio" name="jY8" id="j1Y8" class="Y1 Y"><input type="radio" name="jY8" id="j2Y8" class="Y2 Y"><input type="radio" name="jY8" id="j3Y8" class="Y3 Y"></div>
<div class="inner"><label for="j0X8" class="X0"></label><label for="j1X8" class="X1"></label><label for="j2X8" class="X2"></label><label for="j3X8" class="X3"></label><label for="j0Y8" class="Y0"></label><label for="j1Y8" class="Y1"></label><label for="j2Y8"
class="Y2"></label><label for="j3Y8" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX8" id="k0X8" class="X0 X"><input type="radio" name="kX8" id="k1X8" class="X1 X"><input type="radio" name="kX8" id="k2X8" class="X2 X" checked=""><input type="radio" name="kX8" id="k3X8" class="X3 X">
<input
type="radio" name="kY8" id="k0Y8" class="Y0 Y"><input type="radio" name="kY8" id="k1Y8" class="Y1 Y" checked=""><input type="radio" name="kY8" id="k2Y8" class="Y2 Y"><input type="radio" name="kY8" id="k3Y8" class="Y3 Y"></div>
<div class="inner"><label for="k0X8" class="X0"></label><label for="k1X8" class="X1"></label><label for="k2X8" class="X2"></label><label for="k3X8" class="X3"></label><label for="k0Y8" class="Y0"></label><label for="k1Y8" class="Y1"></label><label for="k2Y8"
class="Y2"></label><label for="k3Y8" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX8" id="l0X8" class="X0 X" checked=""><input type="radio" name="lX8" id="l1X8" class="X1 X"><input type="radio" name="lX8" id="l2X8" class="X2 X"><input type="radio" name="lX8" id="l3X8" class="X3 X">
<input
type="radio" name="lY8" id="l0Y8" class="Y0 Y"><input type="radio" name="lY8" id="l1Y8" class="Y1 Y"><input type="radio" name="lY8" id="l2Y8" class="Y2 Y"><input type="radio" name="lY8" id="l3Y8" class="Y3 Y" checked=""></div>
<div class="inner"><label for="l0X8" class="X0"></label><label for="l1X8" class="X1"></label><label for="l2X8" class="X2"></label><label for="l3X8" class="X3"></label><label for="l0Y8" class="Y0"></label><label for="l1Y8" class="Y1"></label><label for="l2Y8"
class="Y2"></label><label for="l3Y8" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX8" id="m0X8" class="X0 X" checked=""><input type="radio" name="mX8" id="m1X8" class="X1 X"><input type="radio" name="mX8" id="m2X8" class="X2 X"><input type="radio" name="mX8" id="m3X8" class="X3 X">
<input
type="radio" name="mY8" id="m0Y8" class="Y0 Y"><input type="radio" name="mY8" id="m1Y8" class="Y1 Y" checked=""><input type="radio" name="mY8" id="m2Y8" class="Y2 Y"><input type="radio" name="mY8" id="m3Y8" class="Y3 Y"></div>
<div class="inner"><label for="m0X8" class="X0"></label><label for="m1X8" class="X1"></label><label for="m2X8" class="X2"></label><label for="m3X8" class="X3"></label><label for="m0Y8" class="Y0"></label><label for="m1Y8" class="Y1"></label><label for="m2Y8"
class="Y2"></label><label for="m3Y8" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX8" id="n0X8" class="X0 X"><input type="radio" name="nX8" id="n1X8" class="X1 X"><input type="radio" name="nX8" id="n2X8" class="X2 X"><input type="radio" name="nX8" id="n3X8" class="X3 X" checked="">
<input
type="radio" name="nY8" id="n0Y8" class="Y0 Y"><input type="radio" name="nY8" id="n1Y8" class="Y1 Y" checked=""><input type="radio" name="nY8" id="n2Y8" class="Y2 Y"><input type="radio" name="nY8" id="n3Y8" class="Y3 Y"></div>
<div class="inner"><label for="n0X8" class="X0"></label><label for="n1X8" class="X1"></label><label for="n2X8" class="X2"></label><label for="n3X8" class="X3"></label><label for="n0Y8" class="Y0"></label><label for="n1Y8" class="Y1"></label><label for="n2Y8"
class="Y2"></label><label for="n3Y8" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX8" id="o0X8" class="X0 X"><input type="radio" name="oX8" id="o1X8" class="X1 X"><input type="radio" name="oX8" id="o2X8" class="X2 X"><input type="radio" name="oX8" id="o3X8" class="X3 X" checked="">
<input
type="radio" name="oY8" id="o0Y8" class="Y0 Y" checked=""><input type="radio" name="oY8" id="o1Y8" class="Y1 Y"><input type="radio" name="oY8" id="o2Y8" class="Y2 Y"><input type="radio" name="oY8" id="o3Y8" class="Y3 Y"></div>
<div class="inner"><label for="o0X8" class="X0"></label><label for="o1X8" class="X1"></label><label for="o2X8" class="X2"></label><label for="o3X8" class="X3"></label><label for="o0Y8" class="Y0"></label><label for="o1Y8" class="Y1"></label><label for="o2Y8"
class="Y2"></label><label for="o3Y8" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success8" class="success">Success!</div><input id="targetShow8" class="targetShow" type="checkbox"><label class="target" for="targetShow8"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/k-mitch-hodge-HMYKFEgrC6M-unsplash.webp" alt="abandoned farmhouse"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@kmitchhodge?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">K. Mitch Hodge</a> on <a href="https://unsplash.com/photos/brown-wooden-house-on-green-grass-field-during-daytime-HMYKFEgrC6M?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board9" class="board">
<h1>Game 9</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX9" id="a0X9" class="X0 X" checked=""><input type="radio" name="aX9" id="a1X9" class="X1 X"><input type="radio" name="aX9" id="a2X9" class="X2 X"><input type="radio" name="aX9" id="a3X9" class="X3 X">
<input
type="radio" name="aY9" id="a0Y9" class="Y0 Y" checked=""><input type="radio" name="aY9" id="a1Y9" class="Y1 Y"><input type="radio" name="aY9" id="a2Y9" class="Y2 Y"><input type="radio" name="aY9" id="a3Y9" class="Y3 Y"></div>
<div class="inner"><label for="a0X9" class="X0"></label><label for="a1X9" class="X1"></label><label for="a2X9" class="X2"></label><label for="a3X9" class="X3"></label><label for="a0Y9" class="Y0"></label><label for="a1Y9" class="Y1"></label><label for="a2Y9"
class="Y2"></label><label for="a3Y9" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX9" id="b0X9" class="X0 X"><input type="radio" name="bX9" id="b1X9" class="X1 X" checked=""><input type="radio" name="bX9" id="b2X9" class="X2 X"><input type="radio" name="bX9" id="b3X9" class="X3 X">
<input
type="radio" name="bY9" id="b0Y9" class="Y0 Y"><input type="radio" name="bY9" id="b1Y9" class="Y1 Y" checked=""><input type="radio" name="bY9" id="b2Y9" class="Y2 Y"><input type="radio" name="bY9" id="b3Y9" class="Y3 Y"></div>
<div class="inner"><label for="b0X9" class="X0"></label><label for="b1X9" class="X1"></label><label for="b2X9" class="X2"></label><label for="b3X9" class="X3"></label><label for="b0Y9" class="Y0"></label><label for="b1Y9" class="Y1"></label><label for="b2Y9"
class="Y2"></label><label for="b3Y9" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX9" id="c0X9" class="X0 X"><input type="radio" name="cX9" id="c1X9" class="X1 X"><input type="radio" name="cX9" id="c2X9" class="X2 X" checked=""><input type="radio" name="cX9" id="c3X9" class="X3 X">
<input
type="radio" name="cY9" id="c0Y9" class="Y0 Y"><input type="radio" name="cY9" id="c1Y9" class="Y1 Y" checked=""><input type="radio" name="cY9" id="c2Y9" class="Y2 Y"><input type="radio" name="cY9" id="c3Y9" class="Y3 Y"></div>
<div class="inner"><label for="c0X9" class="X0"></label><label for="c1X9" class="X1"></label><label for="c2X9" class="X2"></label><label for="c3X9" class="X3"></label><label for="c0Y9" class="Y0"></label><label for="c1Y9" class="Y1"></label><label for="c2Y9"
class="Y2"></label><label for="c3Y9" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX9" id="d0X9" class="X0 X"><input type="radio" name="dX9" id="d1X9" class="X1 X"><input type="radio" name="dX9" id="d2X9" class="X2 X" checked=""><input type="radio" name="dX9" id="d3X9" class="X3 X">
<input
type="radio" name="dY9" id="d0Y9" class="Y0 Y"><input type="radio" name="dY9" id="d1Y9" class="Y1 Y"><input type="radio" name="dY9" id="d2Y9" class="Y2 Y" checked=""><input type="radio" name="dY9" id="d3Y9" class="Y3 Y"></div>
<div class="inner"><label for="d0X9" class="X0"></label><label for="d1X9" class="X1"></label><label for="d2X9" class="X2"></label><label for="d3X9" class="X3"></label><label for="d0Y9" class="Y0"></label><label for="d1Y9" class="Y1"></label><label for="d2Y9"
class="Y2"></label><label for="d3Y9" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX9" id="e0X9" class="X0 X" checked=""><input type="radio" name="eX9" id="e1X9" class="X1 X"><input type="radio" name="eX9" id="e2X9" class="X2 X"><input type="radio" name="eX9" id="e3X9" class="X3 X">
<input
type="radio" name="eY9" id="e0Y9" class="Y0 Y"><input type="radio" name="eY9" id="e1Y9" class="Y1 Y"><input type="radio" name="eY9" id="e2Y9" class="Y2 Y" checked=""><input type="radio" name="eY9" id="e3Y9" class="Y3 Y"></div>
<div class="inner"><label for="e0X9" class="X0"></label><label for="e1X9" class="X1"></label><label for="e2X9" class="X2"></label><label for="e3X9" class="X3"></label><label for="e0Y9" class="Y0"></label><label for="e1Y9" class="Y1"></label><label for="e2Y9"
class="Y2"></label><label for="e3Y9" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX9" id="f0X9" class="X0 X"><input type="radio" name="fX9" id="f1X9" class="X1 X"><input type="radio" name="fX9" id="f2X9" class="X2 X" checked=""><input type="radio" name="fX9" id="f3X9" class="X3 X">
<input
type="radio" name="fY9" id="f0Y9" class="Y0 Y"><input type="radio" name="fY9" id="f1Y9" class="Y1 Y"><input type="radio" name="fY9" id="f2Y9" class="Y2 Y"><input type="radio" name="fY9" id="f3Y9" class="Y3 Y" checked=""></div>
<div class="inner"><label for="f0X9" class="X0"></label><label for="f1X9" class="X1"></label><label for="f2X9" class="X2"></label><label for="f3X9" class="X3"></label><label for="f0Y9" class="Y0"></label><label for="f1Y9" class="Y1"></label><label for="f2Y9"
class="Y2"></label><label for="f3Y9" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX9" id="g0X9" class="X0 X" checked=""><input type="radio" name="gX9" id="g1X9" class="X1 X"><input type="radio" name="gX9" id="g2X9" class="X2 X"><input type="radio" name="gX9" id="g3X9" class="X3 X">
<input
type="radio" name="gY9" id="g0Y9" class="Y0 Y"><input type="radio" name="gY9" id="g1Y9" class="Y1 Y"><input type="radio" name="gY9" id="g2Y9" class="Y2 Y"><input type="radio" name="gY9" id="g3Y9" class="Y3 Y" checked=""></div>
<div class="inner"><label for="g0X9" class="X0"></label><label for="g1X9" class="X1"></label><label for="g2X9" class="X2"></label><label for="g3X9" class="X3"></label><label for="g0Y9" class="Y0"></label><label for="g1Y9" class="Y1"></label><label for="g2Y9"
class="Y2"></label><label for="g3Y9" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX9" id="h0X9" class="X0 X"><input type="radio" name="hX9" id="h1X9" class="X1 X" checked=""><input type="radio" name="hX9" id="h2X9" class="X2 X"><input type="radio" name="hX9" id="h3X9" class="X3 X">
<input
type="radio" name="hY9" id="h0Y9" class="Y0 Y"><input type="radio" name="hY9" id="h1Y9" class="Y1 Y"><input type="radio" name="hY9" id="h2Y9" class="Y2 Y" checked=""><input type="radio" name="hY9" id="h3Y9" class="Y3 Y"></div>
<div class="inner"><label for="h0X9" class="X0"></label><label for="h1X9" class="X1"></label><label for="h2X9" class="X2"></label><label for="h3X9" class="X3"></label><label for="h0Y9" class="Y0"></label><label for="h1Y9" class="Y1"></label><label for="h2Y9"
class="Y2"></label><label for="h3Y9" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX9" id="i0X9" class="X0 X"><input type="radio" name="iX9" id="i1X9" class="X1 X"><input type="radio" name="iX9" id="i2X9" class="X2 X"><input type="radio" name="iX9" id="i3X9" class="X3 X" checked="">
<input
type="radio" name="iY9" id="i0Y9" class="Y0 Y"><input type="radio" name="iY9" id="i1Y9" class="Y1 Y" checked=""><input type="radio" name="iY9" id="i2Y9" class="Y2 Y"><input type="radio" name="iY9" id="i3Y9" class="Y3 Y"></div>
<div class="inner"><label for="i0X9" class="X0"></label><label for="i1X9" class="X1"></label><label for="i2X9" class="X2"></label><label for="i3X9" class="X3"></label><label for="i0Y9" class="Y0"></label><label for="i1Y9" class="Y1"></label><label for="i2Y9"
class="Y2"></label><label for="i3Y9" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX9" id="j0X9" class="X0 X"><input type="radio" name="jX9" id="j1X9" class="X1 X"><input type="radio" name="jX9" id="j2X9" class="X2 X" checked=""><input type="radio" name="jX9" id="j3X9" class="X3 X">
<input
type="radio" name="jY9" id="j0Y9" class="Y0 Y" checked=""><input type="radio" name="jY9" id="j1Y9" class="Y1 Y"><input type="radio" name="jY9" id="j2Y9" class="Y2 Y"><input type="radio" name="jY9" id="j3Y9" class="Y3 Y"></div>
<div class="inner"><label for="j0X9" class="X0"></label><label for="j1X9" class="X1"></label><label for="j2X9" class="X2"></label><label for="j3X9" class="X3"></label><label for="j0Y9" class="Y0"></label><label for="j1Y9" class="Y1"></label><label for="j2Y9"
class="Y2"></label><label for="j3Y9" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX9" id="k0X9" class="X0 X" checked=""><input type="radio" name="kX9" id="k1X9" class="X1 X"><input type="radio" name="kX9" id="k2X9" class="X2 X"><input type="radio" name="kX9" id="k3X9" class="X3 X">
<input
type="radio" name="kY9" id="k0Y9" class="Y0 Y"><input type="radio" name="kY9" id="k1Y9" class="Y1 Y" checked=""><input type="radio" name="kY9" id="k2Y9" class="Y2 Y"><input type="radio" name="kY9" id="k3Y9" class="Y3 Y"></div>
<div class="inner"><label for="k0X9" class="X0"></label><label for="k1X9" class="X1"></label><label for="k2X9" class="X2"></label><label for="k3X9" class="X3"></label><label for="k0Y9" class="Y0"></label><label for="k1Y9" class="Y1"></label><label for="k2Y9"
class="Y2"></label><label for="k3Y9" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX9" id="l0X9" class="X0 X"><input type="radio" name="lX9" id="l1X9" class="X1 X"><input type="radio" name="lX9" id="l2X9" class="X2 X"><input type="radio" name="lX9" id="l3X9" class="X3 X" checked="">
<input
type="radio" name="lY9" id="l0Y9" class="Y0 Y"><input type="radio" name="lY9" id="l1Y9" class="Y1 Y"><input type="radio" name="lY9" id="l2Y9" class="Y2 Y" checked=""><input type="radio" name="lY9" id="l3Y9" class="Y3 Y"></div>
<div class="inner"><label for="l0X9" class="X0"></label><label for="l1X9" class="X1"></label><label for="l2X9" class="X2"></label><label for="l3X9" class="X3"></label><label for="l0Y9" class="Y0"></label><label for="l1Y9" class="Y1"></label><label for="l2Y9"
class="Y2"></label><label for="l3Y9" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX9" id="m0X9" class="X0 X"><input type="radio" name="mX9" id="m1X9" class="X1 X" checked=""><input type="radio" name="mX9" id="m2X9" class="X2 X"><input type="radio" name="mX9" id="m3X9" class="X3 X">
<input
type="radio" name="mY9" id="m0Y9" class="Y0 Y"><input type="radio" name="mY9" id="m1Y9" class="Y1 Y"><input type="radio" name="mY9" id="m2Y9" class="Y2 Y"><input type="radio" name="mY9" id="m3Y9" class="Y3 Y" checked=""></div>
<div class="inner"><label for="m0X9" class="X0"></label><label for="m1X9" class="X1"></label><label for="m2X9" class="X2"></label><label for="m3X9" class="X3"></label><label for="m0Y9" class="Y0"></label><label for="m1Y9" class="Y1"></label><label for="m2Y9"
class="Y2"></label><label for="m3Y9" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX9" id="n0X9" class="X0 X"><input type="radio" name="nX9" id="n1X9" class="X1 X" checked=""><input type="radio" name="nX9" id="n2X9" class="X2 X"><input type="radio" name="nX9" id="n3X9" class="X3 X">
<input
type="radio" name="nY9" id="n0Y9" class="Y0 Y" checked=""><input type="radio" name="nY9" id="n1Y9" class="Y1 Y"><input type="radio" name="nY9" id="n2Y9" class="Y2 Y"><input type="radio" name="nY9" id="n3Y9" class="Y3 Y"></div>
<div class="inner"><label for="n0X9" class="X0"></label><label for="n1X9" class="X1"></label><label for="n2X9" class="X2"></label><label for="n3X9" class="X3"></label><label for="n0Y9" class="Y0"></label><label for="n1Y9" class="Y1"></label><label for="n2Y9"
class="Y2"></label><label for="n3Y9" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX9" id="o0X9" class="X0 X"><input type="radio" name="oX9" id="o1X9" class="X1 X"><input type="radio" name="oX9" id="o2X9" class="X2 X"><input type="radio" name="oX9" id="o3X9" class="X3 X" checked="">
<input
type="radio" name="oY9" id="o0Y9" class="Y0 Y" checked=""><input type="radio" name="oY9" id="o1Y9" class="Y1 Y"><input type="radio" name="oY9" id="o2Y9" class="Y2 Y"><input type="radio" name="oY9" id="o3Y9" class="Y3 Y"></div>
<div class="inner"><label for="o0X9" class="X0"></label><label for="o1X9" class="X1"></label><label for="o2X9" class="X2"></label><label for="o3X9" class="X3"></label><label for="o0Y9" class="Y0"></label><label for="o1Y9" class="Y1"></label><label for="o2Y9"
class="Y2"></label><label for="o3Y9" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success9" class="success">Success!</div><input id="targetShow9" class="targetShow" type="checkbox"><label class="target" for="targetShow9"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/devin-avery-5NiS3YcEsi8-unsplash.webp" alt="tree and low sun"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@devintavery?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Devin Avery</a> on <a href="https://unsplash.com/photos/the-sun-is-setting-behind-a-tree-in-a-field-5NiS3YcEsi8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
<section id="board10" class="board">
<h1>Game 10</h1>
<div class="frame">
<div class="bg"></div>
<div class="tile a">
<div class="control"><input type="radio" name="aX10" id="a0X10" class="X0 X"><input type="radio" name="aX10" id="a1X10" class="X1 X"><input type="radio" name="aX10" id="a2X10" class="X2 X" checked=""><input type="radio" name="aX10" id="a3X10" class="X3 X">
<input
type="radio" name="aY10" id="a0Y10" class="Y0 Y"><input type="radio" name="aY10" id="a1Y10" class="Y1 Y"><input type="radio" name="aY10" id="a2Y10" class="Y2 Y" checked=""><input type="radio" name="aY10" id="a3Y10" class="Y3 Y"></div>
<div class="inner"><label for="a0X10" class="X0"></label><label for="a1X10" class="X1"></label><label for="a2X10" class="X2"></label><label for="a3X10" class="X3"></label><label for="a0Y10" class="Y0"></label><label for="a1Y10" class="Y1"></label>
<label
for="a2Y10" class="Y2"></label><label for="a3Y10" class="Y3"></label>
<div>A</div>
</div>
</div>
<div class="tile b">
<div class="control"><input type="radio" name="bX10" id="b0X10" class="X0 X"><input type="radio" name="bX10" id="b1X10" class="X1 X"><input type="radio" name="bX10" id="b2X10" class="X2 X" checked=""><input type="radio" name="bX10" id="b3X10" class="X3 X">
<input
type="radio" name="bY10" id="b0Y10" class="Y0 Y"><input type="radio" name="bY10" id="b1Y10" class="Y1 Y" checked=""><input type="radio" name="bY10" id="b2Y10" class="Y2 Y"><input type="radio" name="bY10" id="b3Y10" class="Y3 Y"></div>
<div class="inner"><label for="b0X10" class="X0"></label><label for="b1X10" class="X1"></label><label for="b2X10" class="X2"></label><label for="b3X10" class="X3"></label><label for="b0Y10" class="Y0"></label><label for="b1Y10" class="Y1"></label>
<label
for="b2Y10" class="Y2"></label><label for="b3Y10" class="Y3"></label>
<div>B</div>
</div>
</div>
<div class="tile c">
<div class="control"><input type="radio" name="cX10" id="c0X10" class="X0 X" checked=""><input type="radio" name="cX10" id="c1X10" class="X1 X"><input type="radio" name="cX10" id="c2X10" class="X2 X"><input type="radio" name="cX10" id="c3X10" class="X3 X">
<input
type="radio" name="cY10" id="c0Y10" class="Y0 Y"><input type="radio" name="cY10" id="c1Y10" class="Y1 Y"><input type="radio" name="cY10" id="c2Y10" class="Y2 Y"><input type="radio" name="cY10" id="c3Y10" class="Y3 Y" checked=""></div>
<div class="inner"><label for="c0X10" class="X0"></label><label for="c1X10" class="X1"></label><label for="c2X10" class="X2"></label><label for="c3X10" class="X3"></label><label for="c0Y10" class="Y0"></label><label for="c1Y10" class="Y1"></label>
<label
for="c2Y10" class="Y2"></label><label for="c3Y10" class="Y3"></label>
<div>C</div>
</div>
</div>
<div class="tile d">
<div class="control"><input type="radio" name="dX10" id="d0X10" class="X0 X"><input type="radio" name="dX10" id="d1X10" class="X1 X" checked=""><input type="radio" name="dX10" id="d2X10" class="X2 X"><input type="radio" name="dX10" id="d3X10" class="X3 X">
<input
type="radio" name="dY10" id="d0Y10" class="Y0 Y"><input type="radio" name="dY10" id="d1Y10" class="Y1 Y"><input type="radio" name="dY10" id="d2Y10" class="Y2 Y"><input type="radio" name="dY10" id="d3Y10" class="Y3 Y" checked=""></div>
<div class="inner"><label for="d0X10" class="X0"></label><label for="d1X10" class="X1"></label><label for="d2X10" class="X2"></label><label for="d3X10" class="X3"></label><label for="d0Y10" class="Y0"></label><label for="d1Y10" class="Y1"></label>
<label
for="d2Y10" class="Y2"></label><label for="d3Y10" class="Y3"></label>
<div>D</div>
</div>
</div>
<div class="tile e">
<div class="control"><input type="radio" name="eX10" id="e0X10" class="X0 X"><input type="radio" name="eX10" id="e1X10" class="X1 X"><input type="radio" name="eX10" id="e2X10" class="X2 X"><input type="radio" name="eX10" id="e3X10" class="X3 X" checked="">
<input
type="radio" name="eY10" id="e0Y10" class="Y0 Y"><input type="radio" name="eY10" id="e1Y10" class="Y1 Y" checked=""><input type="radio" name="eY10" id="e2Y10" class="Y2 Y"><input type="radio" name="eY10" id="e3Y10" class="Y3 Y"></div>
<div class="inner"><label for="e0X10" class="X0"></label><label for="e1X10" class="X1"></label><label for="e2X10" class="X2"></label><label for="e3X10" class="X3"></label><label for="e0Y10" class="Y0"></label><label for="e1Y10" class="Y1"></label>
<label
for="e2Y10" class="Y2"></label><label for="e3Y10" class="Y3"></label>
<div>E</div>
</div>
</div>
<div class="tile f">
<div class="control"><input type="radio" name="fX10" id="f0X10" class="X0 X" checked=""><input type="radio" name="fX10" id="f1X10" class="X1 X"><input type="radio" name="fX10" id="f2X10" class="X2 X"><input type="radio" name="fX10" id="f3X10" class="X3 X">
<input
type="radio" name="fY10" id="f0Y10" class="Y0 Y" checked=""><input type="radio" name="fY10" id="f1Y10" class="Y1 Y"><input type="radio" name="fY10" id="f2Y10" class="Y2 Y"><input type="radio" name="fY10" id="f3Y10" class="Y3 Y"></div>
<div class="inner"><label for="f0X10" class="X0"></label><label for="f1X10" class="X1"></label><label for="f2X10" class="X2"></label><label for="f3X10" class="X3"></label><label for="f0Y10" class="Y0"></label><label for="f1Y10" class="Y1"></label>
<label
for="f2Y10" class="Y2"></label><label for="f3Y10" class="Y3"></label>
<div>F</div>
</div>
</div>
<div class="tile g">
<div class="control"><input type="radio" name="gX10" id="g0X10" class="X0 X"><input type="radio" name="gX10" id="g1X10" class="X1 X"><input type="radio" name="gX10" id="g2X10" class="X2 X"><input type="radio" name="gX10" id="g3X10" class="X3 X" checked="">
<input
type="radio" name="gY10" id="g0Y10" class="Y0 Y"><input type="radio" name="gY10" id="g1Y10" class="Y1 Y"><input type="radio" name="gY10" id="g2Y10" class="Y2 Y" checked=""><input type="radio" name="gY10" id="g3Y10" class="Y3 Y"></div>
<div class="inner"><label for="g0X10" class="X0"></label><label for="g1X10" class="X1"></label><label for="g2X10" class="X2"></label><label for="g3X10" class="X3"></label><label for="g0Y10" class="Y0"></label><label for="g1Y10" class="Y1"></label>
<label
for="g2Y10" class="Y2"></label><label for="g3Y10" class="Y3"></label>
<div>G</div>
</div>
</div>
<div class="tile h">
<div class="control"><input type="radio" name="hX10" id="h0X10" class="X0 X"><input type="radio" name="hX10" id="h1X10" class="X1 X" checked=""><input type="radio" name="hX10" id="h2X10" class="X2 X"><input type="radio" name="hX10" id="h3X10" class="X3 X">
<input
type="radio" name="hY10" id="h0Y10" class="Y0 Y"><input type="radio" name="hY10" id="h1Y10" class="Y1 Y" checked=""><input type="radio" name="hY10" id="h2Y10" class="Y2 Y"><input type="radio" name="hY10" id="h3Y10" class="Y3 Y"></div>
<div class="inner"><label for="h0X10" class="X0"></label><label for="h1X10" class="X1"></label><label for="h2X10" class="X2"></label><label for="h3X10" class="X3"></label><label for="h0Y10" class="Y0"></label><label for="h1Y10" class="Y1"></label>
<label
for="h2Y10" class="Y2"></label><label for="h3Y10" class="Y3"></label>
<div>H</div>
</div>
</div>
<div class="tile i">
<div class="control"><input type="radio" name="iX10" id="i0X10" class="X0 X"><input type="radio" name="iX10" id="i1X10" class="X1 X" checked=""><input type="radio" name="iX10" id="i2X10" class="X2 X"><input type="radio" name="iX10" id="i3X10" class="X3 X">
<input
type="radio" name="iY10" id="i0Y10" class="Y0 Y"><input type="radio" name="iY10" id="i1Y10" class="Y1 Y"><input type="radio" name="iY10" id="i2Y10" class="Y2 Y" checked=""><input type="radio" name="iY10" id="i3Y10" class="Y3 Y"></div>
<div class="inner"><label for="i0X10" class="X0"></label><label for="i1X10" class="X1"></label><label for="i2X10" class="X2"></label><label for="i3X10" class="X3"></label><label for="i0Y10" class="Y0"></label><label for="i1Y10" class="Y1"></label>
<label
for="i2Y10" class="Y2"></label><label for="i3Y10" class="Y3"></label>
<div>I</div>
</div>
</div>
<div class="tile j">
<div class="control"><input type="radio" name="jX10" id="j0X10" class="X0 X"><input type="radio" name="jX10" id="j1X10" class="X1 X" checked=""><input type="radio" name="jX10" id="j2X10" class="X2 X"><input type="radio" name="jX10" id="j3X10" class="X3 X">
<input
type="radio" name="jY10" id="j0Y10" class="Y0 Y" checked=""><input type="radio" name="jY10" id="j1Y10" class="Y1 Y"><input type="radio" name="jY10" id="j2Y10" class="Y2 Y"><input type="radio" name="jY10" id="j3Y10" class="Y3 Y"></div>
<div class="inner"><label for="j0X10" class="X0"></label><label for="j1X10" class="X1"></label><label for="j2X10" class="X2"></label><label for="j3X10" class="X3"></label><label for="j0Y10" class="Y0"></label><label for="j1Y10" class="Y1"></label>
<label
for="j2Y10" class="Y2"></label><label for="j3Y10" class="Y3"></label>
<div>J</div>
</div>
</div>
<div class="tile k">
<div class="control"><input type="radio" name="kX10" id="k0X10" class="X0 X" checked=""><input type="radio" name="kX10" id="k1X10" class="X1 X"><input type="radio" name="kX10" id="k2X10" class="X2 X"><input type="radio" name="kX10" id="k3X10" class="X3 X">
<input
type="radio" name="kY10" id="k0Y10" class="Y0 Y"><input type="radio" name="kY10" id="k1Y10" class="Y1 Y"><input type="radio" name="kY10" id="k2Y10" class="Y2 Y" checked=""><input type="radio" name="kY10" id="k3Y10" class="Y3 Y"></div>
<div class="inner"><label for="k0X10" class="X0"></label><label for="k1X10" class="X1"></label><label for="k2X10" class="X2"></label><label for="k3X10" class="X3"></label><label for="k0Y10" class="Y0"></label><label for="k1Y10" class="Y1"></label>
<label
for="k2Y10" class="Y2"></label><label for="k3Y10" class="Y3"></label>
<div>K</div>
</div>
</div>
<div class="tile l">
<div class="control"><input type="radio" name="lX10" id="l0X10" class="X0 X" checked=""><input type="radio" name="lX10" id="l1X10" class="X1 X"><input type="radio" name="lX10" id="l2X10" class="X2 X"><input type="radio" name="lX10" id="l3X10" class="X3 X">
<input
type="radio" name="lY10" id="l0Y10" class="Y0 Y"><input type="radio" name="lY10" id="l1Y10" class="Y1 Y" checked=""><input type="radio" name="lY10" id="l2Y10" class="Y2 Y"><input type="radio" name="lY10" id="l3Y10" class="Y3 Y"></div>
<div class="inner"><label for="l0X10" class="X0"></label><label for="l1X10" class="X1"></label><label for="l2X10" class="X2"></label><label for="l3X10" class="X3"></label><label for="l0Y10" class="Y0"></label><label for="l1Y10" class="Y1"></label>
<label
for="l2Y10" class="Y2"></label><label for="l3Y10" class="Y3"></label>
<div>L</div>
</div>
</div>
<div class="tile m">
<div class="control"><input type="radio" name="mX10" id="m0X10" class="X0 X"><input type="radio" name="mX10" id="m1X10" class="X1 X"><input type="radio" name="mX10" id="m2X10" class="X2 X" checked=""><input type="radio" name="mX10" id="m3X10" class="X3 X">
<input
type="radio" name="mY10" id="m0Y10" class="Y0 Y"><input type="radio" name="mY10" id="m1Y10" class="Y1 Y"><input type="radio" name="mY10" id="m2Y10" class="Y2 Y"><input type="radio" name="mY10" id="m3Y10" class="Y3 Y" checked=""></div>
<div class="inner"><label for="m0X10" class="X0"></label><label for="m1X10" class="X1"></label><label for="m2X10" class="X2"></label><label for="m3X10" class="X3"></label><label for="m0Y10" class="Y0"></label><label for="m1Y10" class="Y1"></label>
<label
for="m2Y10" class="Y2"></label><label for="m3Y10" class="Y3"></label>
<div>M</div>
</div>
</div>
<div class="tile n">
<div class="control"><input type="radio" name="nX10" id="n0X10" class="X0 X"><input type="radio" name="nX10" id="n1X10" class="X1 X"><input type="radio" name="nX10" id="n2X10" class="X2 X"><input type="radio" name="nX10" id="n3X10" class="X3 X" checked="">
<input
type="radio" name="nY10" id="n0Y10" class="Y0 Y" checked=""><input type="radio" name="nY10" id="n1Y10" class="Y1 Y"><input type="radio" name="nY10" id="n2Y10" class="Y2 Y"><input type="radio" name="nY10" id="n3Y10" class="Y3 Y"></div>
<div class="inner"><label for="n0X10" class="X0"></label><label for="n1X10" class="X1"></label><label for="n2X10" class="X2"></label><label for="n3X10" class="X3"></label><label for="n0Y10" class="Y0"></label><label for="n1Y10" class="Y1"></label>
<label
for="n2Y10" class="Y2"></label><label for="n3Y10" class="Y3"></label>
<div>N</div>
</div>
</div>
<div class="tile o">
<div class="control"><input type="radio" name="oX10" id="o0X10" class="X0 X"><input type="radio" name="oX10" id="o1X10" class="X1 X"><input type="radio" name="oX10" id="o2X10" class="X2 X" checked=""><input type="radio" name="oX10" id="o3X10" class="X3 X">
<input
type="radio" name="oY10" id="o0Y10" class="Y0 Y" checked=""><input type="radio" name="oY10" id="o1Y10" class="Y1 Y"><input type="radio" name="oY10" id="o2Y10" class="Y2 Y"><input type="radio" name="oY10" id="o3Y10" class="Y3 Y"></div>
<div class="inner"><label for="o0X10" class="X0"></label><label for="o1X10" class="X1"></label><label for="o2X10" class="X2"></label><label for="o3X10" class="X3"></label><label for="o0Y10" class="Y0"></label><label for="o1Y10" class="Y1"></label>
<label
for="o2Y10" class="Y2"></label><label for="o3Y10" class="Y3"></label>
<div>O</div>
</div>
</div>
</div>
<div class="options"><label class="viewmode" for="barebones"><span>Show Barebones</span><span>Show Pictures</span></label>
<div id="success10" class="success">Success!</div><input id="targetShow10" class="targetShow" type="checkbox"><label class="target" for="targetShow10"><span>Show Target Image</span><img src="https://alohci.net/image/dev.to/slidergame/thao-lee-WRfgYQWezh8-unsplash.webp" alt="splash of drink"></label></div>
<div
class="credit">Photo by <a href="https://unsplash.com/@h4x0r3?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Thao LEE</a> on <a href="https://unsplash.com/photos/splash-of-water-in-drinking-glass-with-sliced-lemon-WRfgYQWezh8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div>
</section>
</main><input id="barebones" type="checkbox">
@font-face {
font-family: 'Game';
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oxygen/v15/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
}
:root {
--bgcolor: antiquewhite;
font-family: Game;
@media (prefers-color-scheme: dark) {
--bgcolor: rebeccapurple;
}
}
.frame, .target, .viewmode {
background-color: var(--bgcolor);
max-height: 80vh;
box-sizing: border-box;
position: relative;
}
.frame {
margin-block-start: 1em;
margin-inline: auto;
border: min(4vw, calc(4vh - 16px)) ridge tan;
aspect-ratio: 1;
}
.frame .bg {
background-size: 100%;
position:absolute;
inset: 0;
opacity: 0;
transition: 0s opacity;
&:is(body:has(#barebones:checked) *) {
opacity: 0;
transition: 0s opacity;
}
}
.tile {
position:absolute;
box-sizing: border-box;
width: 25%;
aspect-ratio: 1;
background-size: 400%;
transition: 0.5s transform;
@media (prefers-reduced-motion) {
transition: none;
}
.control {
position:absolute;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(5, auto);
input:is(body:not(:has(#barebones:checked)) *) {
visibility: hidden;
}
input {
width: 60%;
}
input:nth-child(1 of .X) {
grid-column: 2;
}
input.Y {
grid-column: 1;
}
}
.inner {
position: relative;
display: grid;
place-items: center;
border: 0.2vw solid silver;
width: 100%;
aspect-ratio: 1;
box-sizing: border-box;
label {
position: absolute;
inset: 0;
pointer-events:none;
}
div:is(body:not(:has(#barebones:checked)) *) {
display: none;
}
}
}
#menu {
padding: 0;
text-wrap: balance;
text-align: center;
line-height: 1.8em;
li {
display:inline-block;
margin-block-end: 0.3em;
label {
display:block;
padding-inline: 1ch;
text-wrap:nowrap;
background-color: var(--bgcolor);
border: 3px outset tan;
border-radius: 0.5em;
b {
text-wrap:nowrap;
display:grid;
font-weight: normal;
&::before {
content: 'Game 10';
grid-area: 1 / 1;
visibility: hidden;
line-height: 1.3;
}
span {
line-height: 1.3;
grid-area: 1 / 1;
}
}
input:is(body:not(:has(#barebones:checked)) *) {
display:none;
}
&:has(:checked) {
background-color: oklch(from var(--bgcolor) calc(l + 0.25) c h);
border-style: inset;
}
}
}
}
#barebones {
display: none;
}
.options {
display: flex;
justify-content: space-between;
align-items: start;
.success {
display:none;
margin-block-start: 28px;
font-size: 1.3em;
}
.target, .viewmode {
margin-block-start: 20px;
width: fit-content;
padding: 0.5em;
border: 3px outset tan;
border-radius: 0.5em;
}
.target {
text-align: center;
img {
display: none;
}
}
.targetShow:checked + .target {
aspect-ratio: 1;
width: 40%;
padding: 0em;
background-size: 100%;
color:transparent;
img {
width: 100%;
display: block;
}
span {
display:none;
}
}
.targetShow {
display: none;
}
.viewmode {
display: grid;
span {
text-align: center;
grid-area: 1 / 1;
}
:nth-child(1):is(body:has(#barebones:checked) *),
:nth-child(2):is(body:not(:has(#barebones:checked)) *) {
visibility:hidden;
}
}
}
.credit {
margin-block-start: 0.7em;
text-align: center;
&:is(body:has(#barebones:checked) *) {
display: none;
}
}
html {
padding-inline: 0.5em;
}
body {
max-width: 80vh;
margin-inline: auto;
}
@media (prefers-color-scheme: dark) {
body {
background-color:#111;
color: #FFF;
}
}
body:has(#barebones:checked) .target {
visibility:hidden;
}
h1 {
display: none
}
#menu:not(:has(> :nth-child(1) :checked)) + #boards #board1 {
display: none;
}
#board1 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/mullermarc-k7bQqdUf954-unsplash.webp");
}
.a {
background-position: 0% 0%;
}
.b {
background-position: 33.333333333333336% 0%;
}
.c {
background-position: 66.66666666666667% 0%;
}
.d {
background-position: 100% 0%;
}
.e {
background-position: 0% 33.333333333333336%;
}
.f {
background-position: 33.333333333333336% 33.333333333333336%;
}
.g {
background-position: 66.66666666666667% 33.333333333333336%;
}
.h {
background-position: 100% 33.333333333333336%;
}
.i {
background-position: 0% 66.66666666666667%;
}
.j {
background-position: 33.333333333333336% 66.66666666666667%;
}
.k {
background-position: 66.66666666666667% 66.66666666666667%;
}
.l {
background-position: 100% 66.66666666666667%;
}
.m {
background-position: 0% 100%;
}
.n {
background-position: 33.333333333333336% 100%;
}
.o {
background-position: 66.66666666666667% 100%;
}
.tile:has(.X0:checked ~ .Y0:checked) {
transform: translate(0%, 0%);
}
.frame:not(:has(.tile .X0:checked ~ .Y0:checked)) {
:is(
.tile:has(.X0:checked ~ .Y1:checked) label.Y0,
.tile:has(.X1:checked ~ .Y0:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X0:checked ~ .Y1:checked) {
transform: translate(0%, 100%);
}
.frame:not(:has(.tile .X0:checked ~ .Y1:checked)) {
:is(
.tile:has(.X0:checked ~ .Y0:checked) label.Y1,
.tile:has(.X0:checked ~ .Y2:checked) label.Y1,
.tile:has(.X1:checked ~ .Y1:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X0:checked ~ .Y2:checked) {
transform: translate(0%, 200%);
}
.frame:not(:has(.tile .X0:checked ~ .Y2:checked)) {
:is(
.tile:has(.X0:checked ~ .Y1:checked) label.Y2,
.tile:has(.X0:checked ~ .Y3:checked) label.Y2,
.tile:has(.X1:checked ~ .Y2:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X0:checked ~ .Y3:checked) {
transform: translate(0%, 300%);
}
.frame:not(:has(.tile .X0:checked ~ .Y3:checked)) {
:is(
.tile:has(.X0:checked ~ .Y2:checked) label.Y3,
.tile:has(.X1:checked ~ .Y3:checked) label.X0
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y0:checked) {
transform: translate(100%, 0%);
}
.frame:not(:has(.tile .X1:checked ~ .Y0:checked)) {
:is(
.tile:has(.X1:checked ~ .Y1:checked) label.Y0,
.tile:has(.X0:checked ~ .Y0:checked) label.X1,
.tile:has(.X2:checked ~ .Y0:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y1:checked) {
transform: translate(100%, 100%);
}
.frame:not(:has(.tile .X1:checked ~ .Y1:checked)) {
:is(
.tile:has(.X1:checked ~ .Y0:checked) label.Y1,
.tile:has(.X1:checked ~ .Y2:checked) label.Y1,
.tile:has(.X0:checked ~ .Y1:checked) label.X1,
.tile:has(.X2:checked ~ .Y1:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y2:checked) {
transform: translate(100%, 200%);
}
.frame:not(:has(.tile .X1:checked ~ .Y2:checked)) {
:is(
.tile:has(.X1:checked ~ .Y1:checked) label.Y2,
.tile:has(.X1:checked ~ .Y3:checked) label.Y2,
.tile:has(.X0:checked ~ .Y2:checked) label.X1,
.tile:has(.X2:checked ~ .Y2:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X1:checked ~ .Y3:checked) {
transform: translate(100%, 300%);
}
.frame:not(:has(.tile .X1:checked ~ .Y3:checked)) {
:is(
.tile:has(.X1:checked ~ .Y2:checked) label.Y3,
.tile:has(.X0:checked ~ .Y3:checked) label.X1,
.tile:has(.X2:checked ~ .Y3:checked) label.X1
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y0:checked) {
transform: translate(200%, 0%);
}
.frame:not(:has(.tile .X2:checked ~ .Y0:checked)) {
:is(
.tile:has(.X2:checked ~ .Y1:checked) label.Y0,
.tile:has(.X1:checked ~ .Y0:checked) label.X2,
.tile:has(.X3:checked ~ .Y0:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y1:checked) {
transform: translate(200%, 100%);
}
.frame:not(:has(.tile .X2:checked ~ .Y1:checked)) {
:is(
.tile:has(.X2:checked ~ .Y0:checked) label.Y1,
.tile:has(.X2:checked ~ .Y2:checked) label.Y1,
.tile:has(.X1:checked ~ .Y1:checked) label.X2,
.tile:has(.X3:checked ~ .Y1:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y2:checked) {
transform: translate(200%, 200%);
}
.frame:not(:has(.tile .X2:checked ~ .Y2:checked)) {
:is(
.tile:has(.X2:checked ~ .Y1:checked) label.Y2,
.tile:has(.X2:checked ~ .Y3:checked) label.Y2,
.tile:has(.X1:checked ~ .Y2:checked) label.X2,
.tile:has(.X3:checked ~ .Y2:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X2:checked ~ .Y3:checked) {
transform: translate(200%, 300%);
}
.frame:not(:has(.tile .X2:checked ~ .Y3:checked)) {
:is(
.tile:has(.X2:checked ~ .Y2:checked) label.Y3,
.tile:has(.X1:checked ~ .Y3:checked) label.X2,
.tile:has(.X3:checked ~ .Y3:checked) label.X2
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y0:checked) {
transform: translate(300%, 0%);
}
.frame:not(:has(.tile .X3:checked ~ .Y0:checked)) {
:is(
.tile:has(.X3:checked ~ .Y1:checked) label.Y0,
.tile:has(.X2:checked ~ .Y0:checked) label.X3
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y1:checked) {
transform: translate(300%, 100%);
}
.frame:not(:has(.tile .X3:checked ~ .Y1:checked)) {
:is(
.tile:has(.X3:checked ~ .Y0:checked) label.Y1,
.tile:has(.X3:checked ~ .Y2:checked) label.Y1,
.tile:has(.X2:checked ~ .Y1:checked) label.X3
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y2:checked) {
transform: translate(300%, 200%);
}
.frame:not(:has(.tile .X3:checked ~ .Y2:checked)) {
:is(
.tile:has(.X3:checked ~ .Y1:checked) label.Y2,
.tile:has(.X3:checked ~ .Y3:checked) label.Y2,
.tile:has(.X2:checked ~ .Y2:checked) label.X3
) {
pointer-events: auto;
}
}
.tile:has(.X3:checked ~ .Y3:checked) {
transform: translate(300%, 300%);
}
.frame:not(:has(.tile .X3:checked ~ .Y3:checked)) {
:is(
.tile:has(.X3:checked ~ .Y2:checked) label.Y3,
.tile:has(.X2:checked ~ .Y3:checked) label.X3
) {
pointer-events: auto;
}
}
.frame:has(.a .X0:checked ~ .Y0:checked):has(.b .X1:checked ~ .Y0:checked):has(
.c .X2:checked ~ .Y0:checked
):has(.d .X3:checked ~ .Y0:checked):has(.e .X0:checked ~ .Y1:checked):has(
.f .X1:checked ~ .Y1:checked
):has(.g .X2:checked ~ .Y1:checked):has(.h .X3:checked ~ .Y1:checked):has(
.i .X0:checked ~ .Y2:checked
):has(.j .X1:checked ~ .Y2:checked):has(.k .X2:checked ~ .Y2:checked):has(
.l .X3:checked ~ .Y2:checked
):has(.m .X0:checked ~ .Y3:checked):has(.n .X1:checked ~ .Y3:checked):has(
.o .X2:checked ~ .Y3:checked
)
~ .options
.success {
display: block;
}
.frame:has(.a .X0:checked ~ .Y0:checked):has(.b .X1:checked ~ .Y0:checked):has(
.c .X2:checked ~ .Y0:checked
):has(.d .X3:checked ~ .Y0:checked):has(.e .X0:checked ~ .Y1:checked):has(
.f .X1:checked ~ .Y1:checked
):has(.g .X2:checked ~ .Y1:checked):has(.h .X3:checked ~ .Y1:checked):has(
.i .X0:checked ~ .Y2:checked
):has(.j .X1:checked ~ .Y2:checked):has(.k .X2:checked ~ .Y2:checked):has(
.l .X3:checked ~ .Y2:checked
):has(.m .X0:checked ~ .Y3:checked):has(.n .X1:checked ~ .Y3:checked):has(
.o .X2:checked ~ .Y3:checked
)
.bg {
opacity: 1;
transition: 5s opacity;
}
#menu:not(:has(> :nth-child(2) :checked)) + #boards #board2 {
display: none;
}
#board2 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/raphael-wicker-P6JRr7-FxLw-unsplash.webp");
}
#menu:not(:has(> :nth-child(3) :checked)) + #boards #board3 {
display: none;
}
#board3 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/randy-fath-SQ20tWzxXO0-unsplash.webp");
}
#menu:not(:has(> :nth-child(4) :checked)) + #boards #board4 {
display: none;
}
#board4 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/juvian-duff-x_mdcjGHnUI-unsplash.webp");
}
#menu:not(:has(> :nth-child(5) :checked)) + #boards #board5 {
display: none;
}
#board5 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/cfphotosin-photography-mf70VKCjZjk-unsplash.webp");
}
#menu:not(:has(> :nth-child(6) :checked)) + #boards #board6 {
display: none;
}
#board6 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/haydn-golden-LfT2t-E08kw-unsplash.webp");
}
#menu:not(:has(> :nth-child(7) :checked)) + #boards #board7 {
display: none;
}
#board7 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/gary-bendig-lpzcjbzsUmI-unsplash.webp");
}
#menu:not(:has(> :nth-child(8) :checked)) + #boards #board8 {
display: none;
}
#board8 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/k-mitch-hodge-HMYKFEgrC6M-unsplash.webp");
}
#menu:not(:has(> :nth-child(9) :checked)) + #boards #board9 {
display: none;
}
#board9 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/devin-avery-5NiS3YcEsi8-unsplash.webp");
}
#menu:not(:has(> :nth-child(10) :checked)) + #boards #board10 {
display: none;
}
#board10 :is(.frame .bg, .tile:is(body:not(:has(#barebones:checked)) *)) {
background-image: url("https://alohci.net/image/dev.to/slidergame/thao-lee-WRfgYQWezh8-unsplash.webp");
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.