body{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.container{display:flex;width:100vw;min-height:100vh}
@font-face{font-family:"JetBrains Mono";src:url(assets/7f9e93f2a12b4e3eb262.ttf)}@font-face{font-family:"Major Mono Display";src:url(assets/68a265ac783795c7bcc1.ttf)}.game{--animation-time: 0;--rows: 0;--columns: 0;--stars-speed-modifier: 1;--game-height: 0px;--box-width: 700px;--box-padding: calc(var(--box-width) * 0.05);--board-width: calc(var(--box-width) * 0.9);--cell-size: calc(var(--board-width) / (1.1 * var(--columns) - 0.1));--gap-size: calc(var(--cell-size) / 10);--cell-font-size-basis: calc(var(--cell-size) / 3.5);--border-radius-size: calc(var(--box-width) / 150);--main-font-size-basis: calc(var(--box-width) / 50);font-family:"JetBrains Mono";color:#fff;background:linear-gradient(hsl(220deg, 25%, 5%) 0%, hsl(220deg, 25%, 5%) 50%, hsl(220deg, 33%, 16%) 100%);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%}@media screen and (max-width: 700px){.game{--box-width: 100vw}}.game__stars{background:rgba(0,0,0,0);position:absolute;top:0;left:0}@-webkit-keyframes starsMove{0%{transform:translateY(0)}100%{transform:translateY(calc(var(--game-height) * -1))}}@keyframes starsMove{0%{transform:translateY(0)}100%{transform:translateY(calc(var(--game-height) * -1))}}.game__stars--after{top:var(--game-height)}.game__stars--small{height:1px;width:1px;-webkit-animation:starsMove calc(180s*var(--stars-speed-modifier)) linear infinite;animation:starsMove calc(180s*var(--stars-speed-modifier)) linear infinite}.game__stars--medium{height:2px;width:2px;-webkit-animation:starsMove calc(90s*var(--stars-speed-modifier)) linear infinite;animation:starsMove calc(90s*var(--stars-speed-modifier)) linear infinite}.game__stars--large{height:3px;width:3px;-webkit-animation:starsMove calc(60s*var(--stars-speed-modifier)) linear infinite;animation:starsMove calc(60s*var(--stars-speed-modifier)) linear infinite}.game__box{box-sizing:border-box;padding:var(--box-padding);display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:var(--box-width)}.game__header{box-sizing:border-box;margin-bottom:var(--box-padding);display:flex;justify-content:space-between;width:100%}.game__scores{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.game__score{font-size:calc(var(--main-font-size-basis)*2);margin:0;display:flex;position:relative}.game__score--best{font-size:calc(var(--main-font-size-basis)*3.5)}.game__scoreLabel{margin-right:var(--main-font-size-basis)}.game__scoreValue--add{-webkit-animation:scoreValueAdd calc(var(--animation-time)*2) ease-in;animation:scoreValueAdd calc(var(--animation-time)*2) ease-in}@-webkit-keyframes scoreValueAdd{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes scoreValueAdd{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}.game__scoreAmount{--xDirrection: 1;--yDirrection: 1;--xDistance: 0;--yDistance: 0;font-size:calc(var(--main-font-size-basis)*2);opacity:0;position:absolute}.game__scoreAmount--add{-webkit-animation:scoreAmountAdd calc(var(--animation-time)*2) ease-in;animation:scoreAmountAdd calc(var(--animation-time)*2) ease-in}@-webkit-keyframes scoreAmountAdd{0%{opacity:0;top:calc((var(--main-font-size-basis)*1.5 + var(--main-font-size-basis)*var(--xDistance)*1.5)*var(--xDirrection));right:calc((var(--main-font-size-basis)*1.5 + var(--main-font-size-basis)*var(--yDistance)*1.5)*var(--yDirrection))}5%{opacity:1}100%{opacity:0;top:0;right:0}}@keyframes scoreAmountAdd{0%{opacity:0;top:calc((var(--main-font-size-basis)*1.5 + var(--main-font-size-basis)*var(--xDistance)*1.5)*var(--xDirrection));right:calc((var(--main-font-size-basis)*1.5 + var(--main-font-size-basis)*var(--yDistance)*1.5)*var(--yDirrection))}5%{opacity:1}100%{opacity:0;top:0;right:0}}.game__headerButton{font-family:"Major Mono Display";font-size:calc(var(--main-font-size-basis)*5);line-height:calc(var(--main-font-size-basis)*5);text-align:end;font-weight:bold;display:flex;align-items:center;justify-content:center;width:calc(var(--cell-size)*1.5);border-radius:var(--border-radius-size);cursor:pointer}.game__headerButton--click{-webkit-animation:headerButtonClick var(--animation-time) ease-in;animation:headerButtonClick var(--animation-time) ease-in}@-webkit-keyframes headerButtonClick{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes headerButtonClick{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.game__boardWrapper{position:relative}.game__board{touch-action:none;position:relative;display:grid;grid-template-rows:repeat(var(--rows), var(--cell-size));grid-template-columns:repeat(var(--columns), var(--cell-size));gap:var(--gap-size);border-radius:var(--border-radius-size);transition:opacity var(--animation-time) linear}.game__board--notification{opacity:.2}.game__board--right{-webkit-animation:boardRight var(--animation-time) ease-in var(--animation-time);animation:boardRight var(--animation-time) ease-in var(--animation-time)}@-webkit-keyframes boardRight{0%{left:0}5%{left:calc(var(--box-padding)/2)}100%{left:0}}@keyframes boardRight{0%{left:0}5%{left:calc(var(--box-padding)/2)}100%{left:0}}.game__board--left{-webkit-animation:boardLeft var(--animation-time) ease-in var(--animation-time);animation:boardLeft var(--animation-time) ease-in var(--animation-time)}@-webkit-keyframes boardLeft{0%{left:0}5%{left:calc(-1*var(--box-padding)/2)}100%{left:0}}@keyframes boardLeft{0%{left:0}5%{left:calc(-1*var(--box-padding)/2)}100%{left:0}}.game__board--top{-webkit-animation:boardTop var(--animation-time) ease-in var(--animation-time);animation:boardTop var(--animation-time) ease-in var(--animation-time)}@-webkit-keyframes boardTop{0%{top:0}5%{top:calc(-1*var(--box-padding)/2)}100%{top:0}}@keyframes boardTop{0%{top:0}5%{top:calc(-1*var(--box-padding)/2)}100%{top:0}}.game__board--bottom{-webkit-animation:boardBottom var(--animation-time) ease-in var(--animation-time);animation:boardBottom var(--animation-time) ease-in var(--animation-time)}@-webkit-keyframes boardBottom{0%{top:0}5%{top:calc(var(--box-padding)/2)}100%{top:0}}@keyframes boardBottom{0%{top:0}5%{top:calc(var(--box-padding)/2)}100%{top:0}}.game__notification{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--border-radius-size);top:0;left:0;background-color:rgba(85,113,170,.1)}.game__notification--appear{-webkit-animation:notificationAppear var(--animation-time) linear;animation:notificationAppear var(--animation-time) linear}@-webkit-keyframes notificationAppear{0%{opacity:0}100%{opacity:1}}@keyframes notificationAppear{0%{opacity:0}100%{opacity:1}}.game__notification--remove{-webkit-animation:notificationRemove var(--animation-time) linear;animation:notificationRemove var(--animation-time) linear}@-webkit-keyframes notificationRemove{0%{opacity:1}100%{opacity:0}}@keyframes notificationRemove{0%{opacity:1}100%{opacity:0}}.game__notificationTitle{font-size:calc(var(--main-font-size-basis)*5.5);font-family:"Major Mono Display"}.game__notificationButtons{display:flex;justify-content:space-evenly;width:100%}.game__notificationButton{font-size:calc(var(--main-font-size-basis)*3);display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-size);width:calc(var(--cell-size)*1.7);height:calc(var(--cell-size)/1.5);cursor:pointer;transition:transform var(--animation-time) ease-in-out,text-shadow var(--animation-time) ease-in-out}.game__notificationButton--select{transform:scale(1.1)}.game__cell{background-color:rgba(85,113,170,.1);border-radius:var(--border-radius-size)}.game__tile{--row: 0;--column: 0;--tile-background-color: hsla(220, 60%, 20%, 0.9);--tile-text-color: white;font-size:var(--cell-font-size-basis);color:var(--tile-text-color);background-color:var(--tile-background-color);position:absolute;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-size);width:var(--cell-size);height:var(--cell-size);top:calc(var(--gap-size)*var(--row) + var(--cell-size)*var(--row));left:calc(var(--gap-size)*var(--column) + var(--cell-size)*var(--column));transition:top var(--animation-time) ease-in,left var(--animation-time) ease-in,background-color var(--animation-time) ease-in}.game__tile--appear{opacity:0;-webkit-animation:tileAppear calc(var(--animation-time)*2) ease-in;animation:tileAppear calc(var(--animation-time)*2) ease-in}@-webkit-keyframes tileAppear{0%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}75%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}@keyframes tileAppear{0%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}75%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.game__tile--upgrade{z-index:2;-webkit-animation:tileUpgrade calc(var(--animation-time)*2) ease-in;animation:tileUpgrade calc(var(--animation-time)*2) ease-in}@-webkit-keyframes tileUpgrade{0%{transform:scale(1)}50%{transform:scale(1)}75%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes tileUpgrade{0%{transform:scale(1)}50%{transform:scale(1)}75%{transform:scale(1.1)}100%{transform:scale(1)}}.game__tile--remove{-webkit-animation:tileRemove calc(var(--animation-time)*2) ease-in;animation:tileRemove calc(var(--animation-time)*2) ease-in}@-webkit-keyframes tileRemove{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes tileRemove{0%{opacity:1}50%{opacity:1}100%{opacity:0}}.game__tileValue{opacity:1}.game__tileValue--upgrade{-webkit-animation:tileValueUpgrade calc(var(--animation-time)*2) ease-in;animation:tileValueUpgrade calc(var(--animation-time)*2) ease-in}@-webkit-keyframes tileValueUpgrade{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@keyframes tileValueUpgrade{0%{opacity:1}50%{opacity:0}100%{opacity:1}}.game__tileValue--remove{-webkit-animation:tileValueRemove calc(var(--animation-time)*2) ease-in;animation:tileValueRemove calc(var(--animation-time)*2) ease-in}@-webkit-keyframes tileValueRemove{0%{opacity:1}50%{opacity:0}100%{opacity:0}}@keyframes tileValueRemove{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
