body {
  font-family: Inter;
  background-color: #fbfaf9;
  font-size: 14px;
  line-height: 24px;
}

.purple {
  color: #9040F5;
}

body.dark {
  background-color: black;
  color: white;
}

body button {
  font-family: Inter;
  font-size: 16px;
  line-height: 24px;
}

a,
a:hover,
a:visited {
  color: #7937df;
  text-decoration: none;
}

.signed-in .signed-out {
  display: none !important;
}

.signed-out .signed-in {
  display: none !important;
}

.mobile .desktop {
  display: none !important;
}

.desktop .mobile {
  display: none !important;
}

.title {
  font-size: 21px;
  font-weight: 500;
}

.hidden {
  display: none;
}

.text-center {
  text-align: center;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.small {
  font-size: small;
  color: #333;
}

.bold {
  font-weight: 500;
}

.light {
  font-weight: 300;
}

.padded {
  padding: 24px;
}

.flex-1 {
  flex: 1;
}

.highlight {
  padding: 10px;
  background-color: #cff2f7;
  color: #28a2b4;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.vertical-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.content {
  width: 478px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header {
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  /* height: 30px; */
  overflow: visible;
  padding: 3px 90px 0 90px;
}

.header-title {
  font-variant: small-caps;
  font-weight: 300;
  width: 270px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 6px;
}

.header-title span {
  font-weight: 500;
}

.header-buttons {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: small;
}

.header-button {
  border-radius: 24px;
  padding: 9px 18px;
  text-align: center;
  cursor: pointer;
  color: #83808e;
}

.header-button.selected {
  background-color: #4D8CF3;
  color: white;
}

.network-buttons {
  display: flex;
  flex-direction: row;
  gap: 6px;
  border-radius: 24px;
  text-align: center;
  cursor: pointer;
  color: #83808e;
  background-color: #f2f1f0;
  padding: 0;
}

.network-buttons .network-button {
  border-radius: 24px;
  background-color: #f2f1f0;
  padding: 9px 12px;
}
 
.network-buttons .network-button.selected {
  background-color: #D6F1F6;
  color: #323541;
}

.header-address {
  display: flex;
  justify-content: end;
  position: relative;
  width: 270px;
}

#sui-address {
  background-color: white;
  padding: 3px;
  border-radius: 18px;
  box-shadow: 1px 1px 3px 1px #dfdfe0;
  font-size: small;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: -21px;
}

.sui-address-main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}

#sui-address .balance-and-address {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sui-address .menu > div {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  justify-items: start;
  text-align: left;
  gap: 12px;
}

#sui-address .menu button,
#sui-address .menu .link-button {
  border-radius: 12px;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  background-color: white;
  color: black;
  box-shadow: none;
  display: flex;
  justify-items: center;
  gap: 6px;
}

#sui-address .menu button:hover,
#sui-address .menu .link-button:hover {
  background-color: #6f53e4;
  color: white;
}

#sui-address .menu button:hover path,
#sui-address .menu .link-button:hover path {
  stroke: white;
}

#sui-address .menu button#logout:hover path {
  fill: white;
}

#sui-address:hover .menu {
  display: block;
}

.signed-in.signed-out #sui-address {
  padding: 12px;
}

#sui-address .sui-logo {
  margin: -1px 0 0 15px;
}

.signed-in.signed-out #sui-address svg {
  margin: 0;
  padding: 0 3px;
}

#ethos-start button {
  padding: 6px 15px 6px 3px;
  background-color: white;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

#sui-address #balance {
  padding: 6px 0;
}

#wallet-address {
  background-color: #f2f1f0;
  padding: 6px 15px;
  border-radius: 15px;
}

.sign-in {
  cursor: pointer;
}

.subtitle {
  font-size: large;
  font-weight: 500;
  margin-bottom: 12px;
}

.subsubtitle {
  margin-bottom: 6px;
}

.instructions {
  text-align: center;
  padding: 24px 0;
  font-weight: 300;
}

.instructions a {
  color: #7937df;
  font-weight: 500;
}

.stats {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: large;
}

.score-box {
  width: 132px;
  height: 75px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  align-items: center;
  background-color: #fce9d7;
  font-size: large;
  font-weight: 500;
  position: relative;
}

.score-title {
  font-size: small;
  color: #d9b38c;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

#top-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#top-tile-value {
  font-size: xx-large;
}

.footer {
  text-align: center;
}

#board {
  margin: auto;
  position: relative;
  background: white;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 15px;
  box-shadow: 3px 3px 24px 3px #dfdfe0;
}

#queue {
  position: absolute;
  top: 6px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 10;
}

#queue .queue-element {
  background-color: black;
  color: white;
  border: 1px solid #ccc;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  font-size: large;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.tile-wrapper {
  background-color: #fbfaf9;
  border-radius: 12px;
  width: 100px;
  height: 100px;
}

.tile,
.tile-result {
  width: 100px;
  height: 100px;
  background-color: #fbfaf9;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.signed-out .row-1 .tile {
  background-color: #49c5fa;
}

.signed-out .row-2 .tile {
  background-color: #4eb7f7;
}

.signed-out .row-3 .tile {
  background-color: #53a9f5;
}

.signed-out .row-4 .tile {
  background-color: #579af2;
}

.value {
  font-size: xx-large;
}

.left1,
.left2,
.left3,
.right1,
.right2,
.right3,
.up1,
.up2,
.up3,
.down1,
.down2,
.down3 {
  animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  position: relative;
}

.left1 {
  animation-name: left1;
}

.left2 {
  animation-name: left2;
}

.left3 {
  animation-name: left3;
}

.right1 {
  animation-name: right1;
}

.right2 {
  animation-name: right2;
}

.right3 {
  animation-name: right3;
}

.up1 {
  animation-name: up1;
}

.up2 {
  animation-name: up2;
}

.up3 {
  animation-name: up3;
}

.down1 {
  animation-name: down1;
}

.down2 {
  animation-name: down2;
}

.down3 {
  animation-name: down3;
}

.color-none {
  background-color: #fbfaf8;
}

.color1 {
  background-color: #97e0ff;
}

.color2 {
  background-color: #8cd0ff;
}

.color3 {
  background-color: #81bfff;
}

.color4 {
  background-color: #75afff;
}

.color5 {
  background-color: #6a9eff;
}

.color6 {
  background-color: #5f8eff;
}

.color7 {
  background-color: #547eff;
}

.color8 {
  background-color: #496dff;
}

.color9 {
  background-color: #3d5dff;
}

.color10 {
  background-color: #324cff;
}

.color11 {
  background-color: #273cff;
}

.color12 {
  background-color: #001aff;
}

.color13 {
  background-color: #ffc700;
}

.select-game {
  padding: 6px 12px;
  margin: 0 -18px;
}

.merge {
  animation-name: merge;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}

@keyframes left1 {
  to {
    margin-left: -106px;
  }
}

@keyframes left2 {
  to {
    margin-left: -212px;
  }
}

@keyframes left3 {
  to {
    margin-left: -318px;
  }
}

@keyframes right1 {
  to {
    margin-left: 106px;
  }
}

@keyframes right2 {
  to {
    margin-left: 212px;
  }
}

@keyframes right3 {
  to {
    margin-left: 318px;
  }
}

@keyframes up1 {
  to {
    margin-top: -106px;
  }
}

@keyframes up2 {
  to {
    margin-top: -212px;
  }
}

@keyframes up3 {
  to {
    margin-top: -318px;
  }
}

@keyframes down1 {
  to {
    margin-top: 106px;
  }
}

@keyframes down2 {
  to {
    margin-top: 212px;
  }
}

@keyframes down3 {
  to {
    margin-top: 318px;
  }
}

@keyframes merge {
  40% {
    width: 110px;
    height: 110px;
    margin: -5px;
  }
  75% {
    width: 80px;
    height: 80px;
    margin: 10px;
  }
  100% {
    width: 100px;
    height: 100px;
    margin: 0;
  }
}

.error {
  padding: 0 12px;
  background-color: #ffcccb;
  border-radius: 12px;
  /* color: white; */
  text-align: center;
}

#error-game-over {
  padding: 12px 0;
}

.modal {
  position: absolute;
  margin-left: auto;
  margin-right: auto;

  top: 10%;
  left: 0;
  right: 0;

  background-color: white;
  color: black;
  border-radius: 12px;
  z-index: 99;

  width: 390px;
  overflow: hidden;
}

.message {
  padding: 24px;
}

#container > #modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
  width: 100%;
  height: 100%;
}

#board > #modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

#close-modal > div,
.close-error {
  float: right;
  margin-top: -45px;
  margin-right: -45px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 15px;
  color: #2a4362;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
  cursor: pointer;
}

.close-error {
  margin: 6px -6px 0 0;
}

.spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 30px 0;
}

.dark .spinner_jCIR {
  color: white;
  fill: white;
}

#initial-spinner {
  display: none;
}

.signed-in.signed-out #initial-spinner {
  display: block;
  margin: auto;
}

#signed-out,
#mint-message {
  text-align: center;
}

.primary-button,
.secondary-button,
.sign-in,
#unpause,
#signed-out button,
#mint-message button,
.new-game,
#leaderboard-name button,
.potential-leaderboard-game,
#modal-submit-to-leaderboard,
#modal-view-leaderboard,
a.link-button,
a:hover.link-button,
a:visited.link-button {
  padding: 9px 18px;
  background-color: white;
  color: black;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.secondary-button,
.new-game,
.sign-in,
#mint-message button,
#copy-address,
#modal-submit-to-leaderboard,
#modal-view-leaderboard,
a.link-button,
a:hover.link-button,
a:visited.link-button {
  background-color: black;
  color: white;
  line-height: 18px;
  font-size: 14px;
}

.games-title,
.leader-title {
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e7;
  font-size: large;
  font-weight: 500;
}

.leader-title .title {
  display: flex;
  justify-content: start;
  gap: 6px;
  align-items: center;
}

.games-title .title {
  display: flex;
  justify-content: start;
  gap: 6px;
  align-items: center;
}

.games-title .new-game {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  align-items: center;
}

.potential-leaderboard-game {
  font-size: small;
  padding: 6px 12px;
}

#transactions {
  padding: 6px 0;
}

.transactions-header {
  margin-top: 24px;
  text-align: center;
  font-size: large;
  margin-bottom: 6px;
}

#transactions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.transaction {
  padding: 12px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
}

/* .transaction-count { */
/* font-size: large; */
/* } */

.transaction-direction {
  display: flex;
  justify-content: center;
  align-items: center;
  /* font-size: xlarge; */
}

.transaction-left {
  display: flex;
  gap: 12px;
}

.transaction-right {
  text-align: right;
  display: flex;
  justify-content: end;
  gap: 12px;
}

.transaction-small {
  font-size: small;
}

.split-panel {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 72vw;
}

.panel {
  width: calc(48% - 48px);
}

.panel-section {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  padding: 12px 48px;
  margin-bottom: 24px;
  border-radius: 12px;
}

#leaderboard-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* #leaderboard-name { */
/* padding: 6px; */
/* display: flex; */
/* flex-direction: column; */
/* gap: 6px; */
/* justify-content: center; */
/* align-items: center; */
/* background-color: #fff8e2; */
/* border-radius: 12px; */
/* margin-bottom: 12px; */
/* font-size: small; */
/* } */

#leaderboard-name input {
  padding: 6px;
}

.leader {
  padding: 12px;
  border-bottom: 1px solid #e5e5e7;
  width: 100%;
  cursor: pointer;
}

.leader:hover,
.leader.selected {
  background-color: #f2f1ef;
  border-radius: 12px;
}

.dark .leader:hover,
.dark .leader.selected {
  background-color:rgba(0, 0, 0, 0.4)
}

.leader .leader-listing {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.leader .leader-details {
  display: none;
}

.leader.selected .leader-details {
  display: block;
  padding: 15px;
  color: #726f80;
}

.leader-stats {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: small;
  font-weight: 600;
}

.leader-tile {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  font-size: small;
  color: white;
  margin-left: 24px;
}

.leader-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  font-size: small;
}

.leaderboard-name {
  font-size: small;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 6px;
}

.leaderboard-name .chevron {
  font-size: x-large;
  font-weight: 100;
  margin-top: -15px;
}

.leader-score {
  color: #726f80;
  font-weight: 400;
}

.leader-score span {
  font-weight: 500;
  margin-left: 3px;
  color: #333;
}

.dark .leader-score span {
  color: white;
}

.leaderboard-board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-radius: 12px;
  background-color: white;
}

.dark .leaderboard-board {
  background-color: black;
}

.leaderboard-board-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  font-size: 12px;
}

.leaderboard-board-stats > div {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.leaderboard-board-row {
  display: flex;
  gap: 6px;
}

.leaderboard-board-tile {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 24px;
  border-radius: 12px;
  color: white;
}

.dark .leaderboard-board-tile {
  width: 60px;
  height: 60px;
  font-size: 21px;
  line-height: 21px;
  gap: 0;
}

.leaderboard-board-tile-name {
  font-size: 12px;
}

.more-leaderboard-area {
  padding: 24px;
  text-align: center;
}

.game-status {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

.game-status > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.game-status > div .game-status-active {
  color: #66a0a6;
  background-color: #c2ecf4;
  border-radius: 6px;
  padding: 0 6px;
}

.game-status > div .game-status-ended,
.game-over {
  color: #9360df;
  background-color: #e7deee;
  border-radius: 6px;
  padding: 0 6px;
}

.game-info,
.game-instructions {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-info {
  padding-top: 12px;
  border-top: 1px solid #e5e5e7;
}

.game-instructions {
  padding: 12px 0;
  border-top: 1px solid #e5e5e7;
}

.game-info > div,
.game-instructions > div {
  display: flex;
  gap: 3px;
}

.game-info .game-info-header {
  width: 90px;
}

.game-instructions .game-instructions-header {
  width: 150px;
}

.game-highlighted {
  padding: 0 6px;
  border-radius: 6px;
  background-color: #e5e3e4;
}

#game-links-area > div {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.game-preview {
  border-bottom: 1px solid #e5e5e7;
  cursor: pointer;
  padding: 12px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: small;
}

.for-developers {
  width: 480px;
  margin: 60px auto 30px auto;
  display: flex;
  justify-content: center;
}

.for-developers > div {
  background-color: white;
  box-shadow: 1px 1px 3px 1px #dfdfe0;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.for-developers .subsubtitle {
  font-weight: 600;
}

#score-diff {
  position: absolute;
  background-color: white;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  font-size: small;
}

.stationary {
  opacity: 0;
  top: 10px;
  transform: scale(0);
  left: 42px;
}

.floating {
  animation: float;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.game-image {
  display: block; 
  margin: auto;
}

.mobile-leaderboard {
  background-color: #1A1C26;
  border-radius: 24px;
  padding: 6px;
  margin: 48px 0;
}

#personal-high-score {
  margin-top: -6px;
}

@keyframes float {
  25% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    top: -60px;
    opacity: 0;
  }
}

.top-tile-display img {
  height: 150px;
  width: 150px;
}

#faucet,
#preapproval {
  padding: 6px;
  line-height: 16px;
}

.contest {
  padding-top: 12px;
}

.contest .contest-title {
  font-weight: 300;
}

.contest .contest-days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  color: #83808e;
  font-weight: 600;
}

.contest .contest-days .selected, span.contest-day {
  text-decoration: underline;
  color: #7937df;
  cursor: pointer;
}

.contest .contest-buttons {
  display: flex;
  flex-direction: row;
  gap: 6px;
  border-radius: 24px;
  text-align: center;
  cursor: pointer;
  color: #83808e;
  background-color: #f2f1f0;
  padding: 0;
  width: 27em;
  margin: auto;
}

.contest-button {
  display: flex; 
  flex-direction: row; 
  gap: 12px;
  align-items: center;
  height: 24px;
  cursor: pointer;
  color: #83808e;
}

.contest-button div {
  background-color: #D6E3F6;
  color: #4D8CF3; 
  border-radius: 6px; 
  padding: 3px 9px;
}

.contest-button.selected div {
  background-color: white;
  color: #4D8CF3;
}

.show-contest {
  display: none;
}

.contest .hide-contest {
  display: none;
}

.contest .show-contest {
  display: block;
}

.during-contest .get-started-message {
  background-color: #4D8CF2;
  color: white;
  padding: 0 12px 30px 12px;
  background-image: url("../8192_background_image.png");
  background-size: contain; 
}

.get-started-message {
  background-color: white;
  color: black;
  padding: 0 12px;
  background-image: url("../8192_background_image_white.png");
  background-position: bottom; 
  background-repeat: no-repeat; 
  background-size: cover; 
  aspect-ratio: 1;
}

.during-contest .get-started-message .header {
  padding: 12px 0 6px 0;
  color: white;
}

.get-started-message .header {
  padding: 6px 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: black;
}

.get-started-message .header div:first-child {
  width: 24px;
}

.get-started-message h1 {
  font-weight: 500;
}


.get-started-message .header .close {
  font-size: 36px;
  font-weight: 300;
  margin-top: -6px;
}

.get-started-message .start-content {
  padding: 18px 12px 0 12px;
  text-align: center;
}

ul {
  padding: 6px 12px;
}

.prizes li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

li {
  padding: 6px;
}

li:nth-child(even) {
  background-color: #F2F1F0;
}

#verify-section {
  padding: 12px;
  background-color: #D6E3F6;
  border-radius: 12px;
  margin: 6px;
}

#verify-email, #verify-address, #view-verification {
  text-decoration: underline;
  color: #4D8CF3;
  cursor: pointer;
}

#verify-email-form div {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

#verify-email-form input {
  flex-grow: 1;
  border: none;
  border-radius: 12px;
  padding: 12px;
}

#pause-message {
  text-align: center;
  color: white;
}

.contest-banner {
  padding: 30px;
  background-color: #4D8CF3;
  color: white;
  text-align: center;
  background-image: url("../8192_background_image_left.png"), url("../8192_background_image_right.png");
  background-position: left bottom, right bottom;
  background-repeat: no-repeat, no-repeat;
}

.contest-text {
  width: 450px; 
  margin: auto; 
  padding: 30px 0;
}

#countdown {
  padding: 60px;
  background-color: #2F41E2;
  color: white;
  height: 450px;
}

.countdown-values {
  margin: auto;
  width: 450px;
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  align-items: start;
}

.countdown-values div {
  width: 90px;
  text-align: center;
}

.countdown-values .colon div {
  width: 30px;
  text-align: center;
  font-size: 45px;
}

.countdown-values .value {
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 15px;
}

.countdown-values .value:last-child {
  padding-right: 30px;
}

#pause-message {
  background-color: #4D8CF3;
}

@media only screen and (max-width: 1300px) {
  .split-panel {
    width: 90vw;
  }
}

@media only screen and (max-width: 1200px) {
  .split-panel {
    width: 96vw;
  }
}

@media only screen and (max-width: 1100px) {
  .split-panel {
    width: 98vw;
  }
}

@media only screen and (max-width: 950px) {
  .wide {
    display: none !important;
  }
  
  .header {
    padding: 0;
  }

  .header-buttons {
    padding-top: 24px;
    gap: 12px;
  }

  .content {
    width: 96%;
    margin: auto;
  }

  .tile,
  .tile-result,
  .tile-wrapper {
    width: 60px;
    height: 60px;
    font-size: small;
  }

  .value {
    font-size: medium;
  }

  .modal {
    width: 100%;
  }

  .split-panel {
    flex-direction: column-reverse;
    width: 90vw;
  }

  .panel {
    width: 100%;
    margin-bottom: 30px;
  }

  .for-developers {
    width: 360px;
  }

  .leader-title {
    display: block;
  }

  .games-title {
    flex-direction: column;
    justify-content: space-around;
    height: 75px;
  }

  .leaderboard-board-tile {
    width: 51px;
    height: 51px;
    font-size: 15px;
  }

  .contest-text {
    width: auto;
  }

  #countdown {
    padding: 0;
    height: 510px;
  }

  #countdown h1 {
    line-height: normal;
  }
    
  .countdown-values div {
    width: 66px;
    text-align: center;
  }

  .countdown-values .value {
    font-size: 45px;
  }

  .panel-section {
    padding: 12px;
  }
  
  #leaderboard-panel {
    width: calc(100% - 24px);
  }

  @keyframes merge {
    40% {
      width: 70px;
      height: 70px;
      margin: -2px;
    }
    75% {
      width: 50px;
      height: 50px;
      margin: 5px;
    }
    100% {
      width: 60px;
      height: 60px;
      margin: 0;
    }
  }
}

@media only screen and (min-width: 600px) {
  .narrow {
    display: none !important;
  }
}