:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#fff;--grid-columns: 0;--grid-rows: 0;--map-background: #303030;--cell-red: #fc7171;--cell-green: #bde672;--cell-yellow: #f4e484;--cell-black: #6d6658;--cell-objective: #ff9fcc}body{font-family:Open Sans,sans-serif;margin:0;display:flex;max-height:100vh}main{display:flex;flex-grow:1;place-items:center;min-width:320px;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0}label{display:block;margin-left:2px;margin-bottom:2px;font-weight:500;font-size:.875rem}select{display:block;width:100%;border:2px solid #e0e4e9;padding:5px;border-radius:4px}ul{margin:0}aside{width:310px;background-color:#f5f7fa;border-right:1px solid #dcdee1}hr{border:none;border-top:1px solid #dcdee1}footer{font-size:.9rem;padding:0 8px 8px;text-align:center}.side-menu{padding:0 10px;height:calc(100vh - 44px);overflow-y:auto}.main{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}#container{background-color:var(--map-background);display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);grid-template-rows:repeat(var(--grid-rows),1fr);grid-column-gap:2px;grid-row-gap:2px;margin:10px;padding:5px;position:relative;border-radius:6px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.cell{background-color:#eee;width:50px;height:50px;border-radius:4px;outline:1px solid var(--map-background)}.red{background-color:var(--cell-red);animation:pop .5s ease-in-out}.green{background-color:var(--cell-green);animation:pop .5s ease-in-out}.yellow{background-color:var(--cell-yellow);animation:pop .5s ease-in-out}.black{background-color:var(--cell-black);animation:pop .5s ease-in-out}.objective{background-color:var(--cell-objective);animation:pop .5s ease-in-out}.obstacle{visibility:hidden}.checkpoint{animation:disappear .5s ease-in-out}#player{position:absolute;width:34px;height:34px;background-color:#2b3e50;border-radius:50%;transition:all 50ms ease-out}.moveButton{cursor:pointer;border:0;color:#fff;background-color:#2b3e50;padding:15px;display:inline-flex;justify-content:center;border-radius:10px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.moveButton:hover{background-color:#1e2831}.moveButtonIcon{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.gameInfoContainer{display:flex;justify-content:center}.gameInfo{color:#fff;background-color:#2b3e50;margin:0 3px;padding:10px;border-radius:10px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.title{margin:16px 0;text-align:center}.square{width:1rem;height:1rem}.bordered-square{fill:none;stroke:var(--map-background);stroke-width:5}.square-red{fill:var(--cell-red)}.square-green{fill:var(--cell-green)}.square-yellow{fill:var(--cell-yellow)}.square-black{fill:var(--cell-black)}.square-objective{fill:var(--cell-objective)}.color-legend{margin-top:8px}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes disappear{0%{transform:scale(1);background-color:var(--cell-objective)}50%{transform:scale(1.1)}to{transform:scale(0);background-color:var(--cell-objective)}}