/* common */
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html,
body {
  height: 100%;
  background-color: var(--main-bg-color);
  overflow: hidden;
}
body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#app {
  margin: auto;
  width: 750px;
  display: grid;
  box-sizing: border-box;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

:root {
  --main-bg-color: #ffe;
  --sub-bg-color: #bbada0;
  --cell-default-bg: #cdc1b4;
  --cell-grid-width: 0;
  --cell-color: #776e65;
  --cell-l-color: #f9f6f2;
  --cell-width: 0;
  --cell-gap: 0;
}

/* cell-grid */
.cell-grid {
  background-color: var(--sub-bg-color);
  width: var(--cell-grid-width);
  height: var(--cell-grid-width);
  border-radius: 2%;
  padding: var(--cell-gap);
  position: relative;
  grid-column-start: span 2;
}
.cell-grid::before {
  content: "";
  display: block;
  width: var(--cell-width);
  height: var(--cell-width);
  border-radius: inherit;
  background-color: var(--cell-default-bg);
  box-shadow: calc(var(--cell-width) + var(--cell-gap)) 0 var(--cell-default-bg),
    calc(var(--cell-width) * 2 + var(--cell-gap) * 2) 0 var(--cell-default-bg),
    calc(var(--cell-width) * 3 + var(--cell-gap) * 3) 0 var(--cell-default-bg),
    0 calc(var(--cell-width) + var(--cell-gap)) var(--cell-default-bg),
    calc(var(--cell-width) + var(--cell-gap)) calc(var(--cell-width) + var(--cell-gap)) var(--cell-default-bg),
    calc(var(--cell-width) * 2 + var(--cell-gap) * 2) calc(var(--cell-width) + var(--cell-gap)) var(--cell-default-bg),
    calc(var(--cell-width) * 3 + var(--cell-gap) * 3) calc(var(--cell-width) + var(--cell-gap)) var(--cell-default-bg),
    0 calc(var(--cell-width) * 2 + var(--cell-gap) * 2) var(--cell-default-bg),
    calc(var(--cell-width) + var(--cell-gap)) calc(var(--cell-width) * 2 + var(--cell-gap) * 2) var(--cell-default-bg),
    calc(var(--cell-width) * 2 + var(--cell-gap) * 2) calc(var(--cell-width) * 2 + var(--cell-gap) * 2)
      var(--cell-default-bg),
    calc(var(--cell-width) * 3 + var(--cell-gap) * 3) calc(var(--cell-width) * 2 + var(--cell-gap) * 2)
      var(--cell-default-bg),
    0 calc(var(--cell-width) * 3 + var(--cell-gap) * 3) var(--cell-default-bg),
    calc(var(--cell-width) + var(--cell-gap)) calc(var(--cell-width) * 3 + var(--cell-gap) * 3) var(--cell-default-bg),
    calc(var(--cell-width) * 2 + var(--cell-gap) * 2) calc(var(--cell-width) * 3 + var(--cell-gap) * 3)
      var(--cell-default-bg),
    calc(var(--cell-width) * 3 + var(--cell-gap) * 3) calc(var(--cell-width) * 3 + var(--cell-gap) * 3)
      var(--cell-default-bg);
}

.cell-item {
  width: var(--cell-width);
  height: var(--cell-width);
  position: absolute;
  top: var(--cell-gap);
  left: var(--cell-gap);
  color: var(--cell-l-color);
  background: #3c3a32;
  border-radius: inherit;
  transition: all 0.1s ease-in-out;
}
.cell-item::before {
  content: attr(data-value);
  font-size: calc(var(--cell-width) / 3);
  text-align: center;
  width: 100%;
  display: block;
  font-weight: 900;
  line-height: var(--cell-width);
}
.cell-item[data-level="0"] {
  color: var(--cell-color);
  background-color: #eee4da;
}
.cell-item[data-level="1"] {
  color: var(--cell-color);
  background-color: #ede0c8;
}
.cell-item[data-level="2"] {
  background-color: #f2b179;
}
.cell-item[data-level="3"] {
  background-color: #f59563;
}
.cell-item[data-level="4"] {
  background-color: #f67c5f;
}
.cell-item[data-level="5"] {
  background-color: #f65e3b;
}
.cell-item[data-level="6"] {
  background-color: #edcf72;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
}
.cell-item[data-level="7"] {
  background-color: #edcc61;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
}
.cell-item[data-level="8"] {
  background-color: #edc850;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
}
.cell-item[data-level="9"] {
  background-color: #edc53f;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
}
.cell-item[data-level="10"] {
  background-color: #edc22e;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
}

.new-game-btn {
  background-color: #3c3a32;
  padding: 10px 20px;
  border-radius: 6px;
  margin-bottom: 40px;
  cursor: pointer;
  width: 200px;
  grid-column-start: span 2;
  text-align: center;
}
.new-game-btn:hover {
  opacity: 0.9;
}
.new-game-btn:active {
  opacity: 0.8;
}
.new-game-btn::before {
  content: attr(data-value);
  color: var(--cell-l-color);
  font-weight: 900;
  font-size: 20px;
}

.score-panel {
  background-color: #eee4da;
  padding: 10px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  width: 80%;
}
.score-panel::before {
  content: attr(data-value);
  color: var(--cell-color);
  font-weight: 900;
  font-size: 20px;
}
.score-panel::after {
  content: attr(data-level);
  color: var(--cell-color);
  font-weight: 900;
  font-size: 20px;
  margin-left: 20px;
}
.tips {
  position: fixed;
  bottom: 5px;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 800px) {
  #app {
    width: 100%;
  }
  .tips {
    bottom: 20px;
  }
  .score-panel {
    grid-column-start: span 2;
  }
}