html,body{width:100%;height:100%}*{box-sizing:border-box;border:0;outline:0;margin:0;padding:0;font-family:Segoe UI,sans-serif}body{background-color:#111;grid-template-rows:5fr 4fr;grid-template-columns:1fr;display:grid}@media (width>=700px){body{grid-template-rows:1fr}}.gameCanvasContainer{border-radius:12px;justify-content:center;place-self:center;align-items:center;width:calc(100% - 64px);height:calc(100% - 64px);display:flex;position:relative}.gameCanvas{aspect-ratio:1;height:100%;image-rendering:pixelated;border:2px solid #fff;box-shadow:inset 0 4px 10px 2px #0008}.scoreBoard{color:#07f;font-family:monospace;font-size:24px;position:absolute;bottom:8px}.gameButtonContainer{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:".U.""L.R"".D.";place-self:center;width:192px;height:192px;display:grid}@media (width>=700px){.gameButtonContainer{display:none}}.directionalButton{color:#000;-webkit-user-select:none;user-select:none;background-color:#1cfe9c;border-radius:100%;place-self:center;width:100%;height:100%;font-size:150%;font-weight:700;line-height:30px;transform:translateY(-3px);box-shadow:0 6px #006839,inset 2px 2px 2px 2px #aff5}.directionalButton:active{background-color:#12a054;transform:translateY(0);box-shadow:0 3px #00351a}.floatingDisplay{color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute}.floatingDisplay h1,.floatingDisplay h2{text-shadow:0 1px #000,0 -1px #000,1px 0 #000,-1px 0 #000}.floatingDisplay{text-align:center;-webkit-user-select:none;user-select:none}.floatingDisplay button{color:#000;cursor:pointer;background-color:#80ffb5;border-radius:6px;padding:6px 16px;font-size:16px;font-weight:700;transform:translateY(-2px);box-shadow:0 4px #16854f}.floatingDisplay button:active{transform:translateY(0);box-shadow:0 2px #16853d}