:root{--size: 100px;--tile: #342956;--correct: #6e50b4}html,body{background:#242424;margin:0;padding:0}.App{display:flex;justify-content:center;height:100vh;margin-top:10vh;font-family:sans-serif}.button-wrapper{display:flex;justify-content:center;margin-top:30px}button{border:0 transparent;background-color:var(--correct);color:#fff;padding:10px 20px;border-radius:10px;font-size:20px;cursor:pointer}button:hover{background-color:var(--tile)}.overlay{pointer-events:none;z-index:20}.number{position:absolute;width:var(--size);height:var(--size);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;background-color:var(--tile);font-size:50px;color:#fff;cursor:pointer;transition:left .2s,top .2s;-webkit-user-select:none;user-select:none;border:.1rem solid #ffffff}.number.slot--0{left:0;top:0}.number.slot--1{left:calc(var(--size));top:0}.number.slot--2{left:calc(2 * var(--size));top:0}.number.slot--3{left:calc(3 * var(--size));top:0}.number.slot--4{left:0;top:calc(var(--size))}.number.slot--5{left:calc(var(--size));top:calc(var(--size))}.number.slot--6{left:calc(2 * var(--size));top:calc(var(--size))}.number.slot--7{left:calc(3 * var(--size));top:calc(var(--size))}.number.slot--8{left:0;top:calc(2 * var(--size))}.number.slot--9{left:calc(var(--size));top:calc(2 * var(--size))}.number.slot--10{left:calc(2 * var(--size));top:calc(2 * var(--size))}.number.slot--11{left:calc(3 * var(--size));top:calc(2 * var(--size))}.number.slot--12{left:0;top:calc(3 * var(--size))}.number.slot--13{left:calc(var(--size));top:calc(3 * var(--size))}.number.slot--14{left:calc(2 * var(--size));top:calc(3 * var(--size))}.number.slot--15{left:calc(3 * var(--size));top:calc(3 * var(--size))}.number.empty-space{pointer-events:none;background-color:transparent;border:none}.winner{height:4rem;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-size:2rem}.game{position:relative}.board{display:grid;grid-template-columns:repeat(4,var(--size));grid-template-rows:repeat(4,var(--size));border-radius:10px;position:relative;overflow:hidden;border:10px solid #ffffff}.actions{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2rem}*{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}html,body{height:100%;margin:0;padding:0;overflow:hidden}