html,body{width:100vw;height:100vh}*{margin:0;padding:0;box-sizing:border-box;color:#fff;-webkit-user-select:none;user-select:none}#root{display:contents}@keyframes show{0%{transform:scale(.5);opacity:.5}80%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}html{background-color:#333}body{display:flex;flex-direction:column;align-items:center;justify-content:center}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.header{width:100%;display:flex;align-items:center;gap:10px}.header span b{font-family:monospace}.header .grow{flex-grow:1}button{color:#333;padding:5px 10px;font-weight:600;cursor:pointer}.game{--size: 100px;--padding: 20px;--length: 1;--color: #555;--x: 0;--y: 0;padding:var(--padding);border:10px solid #999}.game .map{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--padding);position:relative}.game .grid,.game .item{width:var(--size);height:var(--size)}.game .grid{background-color:#444}.game .item{font-family:monospace;position:absolute;text-align:center;line-height:var(--size);animation:.1s show linear;transition:top .3s,left .1s;background-color:var(--color);font-size:calc((12 - var(--length) * 2) * 6px);left:calc((var(--size) + var(--padding)) * var(--x));top:calc((var(--size) + var(--padding)) * var(--y))}.game .link{position:absolute;top:calc(100% + 20px);left:0;right:0;text-align:center;margin:auto}