*{box-sizing:border-box}:root{--game-width:256px;--game-height:352px;--gameboard-width:256px;--gameboard-height:256px;--pixel-size:1}html,body{font-family:Impact,sans-serif;font-size:11px;overflow:hidden}body{background:#c2b685}canvas{image-rendering:pixelated;-webkit-user-select:none;user-select:none;cursor:pointer;display:block}.game-container{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.game{width:var(--game-width);height:var(--game-height);transform:scale(var(--pixel-size))}.title-screen{flex-direction:column;justify-content:center;align-items:center;width:100%;height:75%;display:flex}.title{letter-spacing:-3px;margin-bottom:2rem;font-size:40px;text-decoration:underline}.gameboard{width:var(--gameboard-width);height:var(--gameboard-height);outline:2px solid #a08733;justify-content:center;align-items:center;margin-bottom:1rem;display:flex;position:relative;overflow:hidden}.camera-controls{flex-direction:column;display:flex;position:absolute;top:4px;left:4px}.camera-controls__zoom,.camera-controls__move{gap:4px;margin:2px 0;display:flex}.camera-controls button{font-size:inherit;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #000;padding:.25rem;font-family:inherit;box-shadow:1px 1px #000,2px 2px #fff}.camera-controls button:hover{color:#000;background:#fff}.camera-controls button:active{color:#000;background-color:#fff;transform:translate(2px,1px);box-shadow:0 0 #fff}.scoreboard{font-family:inherit;font-size:inherit;color:#fff;background:#000;border:1px solid #000;outline:2px solid #a08733;flex-direction:row;justify-content:space-between;margin-bottom:.25rem;padding:.25rem;display:flex}.scoreboard-panel{flex-direction:column;align-items:center;display:flex}.scoreboard-panel-final{margin-bottom:1rem}button{font-family:inherit;font-size:inherit;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #000;padding:.25rem;box-shadow:1px 1px #000,2px 2px #fff}.hidden{display:none}.animate__headShake{animation-name:headShake;animation-duration:1s;animation-timing-function:ease-in-out;animation-fill-mode:both}@media (width>=512px) and (height>=704px){:root{--pixel-size:2}}@media (width>=768px) and (height>=1056px){:root{--pixel-size:3}}@keyframes headShake{0%{transform:translate(0)}6.5%{transform:translate(-6px)rotateY(-9deg)}18.5%{transform:translate(5px)rotateY(7deg)}31.5%{transform:translate(-3px)rotateY(-5deg)}43.5%{transform:translate(2px)rotateY(3deg)}50%{transform:translate(0)}}.animate__headShake{animation-name:headShake;animation-timing-function:ease-in-out}