/* src/index.css */
:root {
  --cell-size: 4rem;
  --cell-spacing: .5rem;
  --board-size: calc(var(--cell-size) * 4 + var(--cell-spacing) * 5);
  --margin-0: var(--cell-spacing);
  --margin-1: calc(2 * var(--cell-spacing)  + var(--cell-size));
  --margin-2: calc(3 * var(--cell-spacing)  + 2 * var(--cell-size));
  --margin-3: calc(4 * var(--cell-spacing)  + 3 * var(--cell-size));
  --text-color: lch(15% 50 140);
  --background: lch(98% 5 140);
  --buttonground: lch(95% 50 140);
  --middleground: lch(35% 50 140 / .3);
  --color-0: lch(95% 50 140);
  --color-1: lch(92% 60 134);
  --color-2: lch(89% 70 128);
  --color-3: lch(86% 80 122);
  --color-4: lch(83% 90 116);
  --color-5: lch(80% 100 110);
  --color-6: lch(77% 110 104);
  --color-7: lch(74% 120 98);
  --color-8: lch(71% 130 92);
  --color-9: lch(68% 140 86);
  --color-10: lch(65% 150 80);
  --color-11: lch(62% 160 74);
  --color-12: lch(59% 170 68);
  --color-13: lch(56% 180 62);
  --button-border-color: var(--color-3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: lch(15% 50 140);
    --text-color: lch(98% 5 140);
    --buttonground: lch(35% 50 140);
    --middleground: lch(95% 50 140 / .3);
    --color-0: lch(25% 50 140);
    --color-1: lch(30% 60 134);
    --color-2: lch(35% 70 128);
    --color-3: lch(40% 80 122);
    --color-4: lch(45% 90 116);
    --color-5: lch(50% 100 110);
    --color-6: lch(55% 110 104);
    --color-7: lch(60% 120 98);
    --color-8: lch(65% 130 92);
    --color-9: lch(70% 140 86);
    --color-10: lch(75% 150 80);
    --color-11: lch(80% 160 74);
    --color-12: lch(85% 170 68);
    --color-13: lch(90% 180 62);
    --button-border-color: var(--color-3);
  }
}

* {
  color: var(--text-color);
}

body {
  background-color: var(--background);
  height: 100dvh;
  margin-left: auto;
  margin-right: auto;
  font-family: sans-serif;
}

html, body {
  overscroll-behavior-y: none;
  height: calc(100dvh - 2em);
}

h1 {
  text-align: center;
}

#board {
  border: .25em solid var(--color-3);
  width: var(--board-size);
  height: var(--board-size);
  position: relative;
  user-select: none;
  border-radius: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#end {
  background-color: var(--middleground);
  width: var(--board-size);
  height: var(--board-size);
  position: absolute;
  z-index: 1;
  text-align: center;
  display: flex;
  border-radius: .75em;
  flex-direction: column;
  justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  position: absolute;
  line-height: var(--cell-size);
  text-align: center;
  border-radius: .5rem;
  max-width: 90%;
  transition: opacity .1s, left .1s, top .1s;
  font-size: x-large;
}

.invisible {
  opacity: 0;
  transition: opacity .1s, left .1s, top .1s;
}

.removed {
  opacity: 0;
  z-index: -1;
  transition: opacity .1s, left .1s, top .1s;
}

.left-0 {
  left: var(--margin-0);
}

.left-1 {
  left: var(--margin-1);
}

.left-2 {
  left: var(--margin-2);
}

.left-3 {
  left: var(--margin-3);
}

.top-0 {
  top: var(--margin-0);
}

.top-1 {
  top: var(--margin-1);
}

.top-2 {
  top: var(--margin-2);
}

.top-3 {
  top: var(--margin-3);
}

.value-1 {
  background: var(--color-1);
}

.value-2 {
  background: var(--color-2);
}

.value-4 {
  background: var(--color-3);
}

.value-8 {
  background: var(--color-4);
}

.value-16, .value-32 {
  background: var(--color-5);
}

.value-64 {
  background: var(--color-6);
}

.value-128 {
  background: var(--color-7);
}

.value-256 {
  background: var(--color-8);
}

.value-512 {
  background: var(--color-9);
}

.value-1024 {
  background: var(--color-10);
}

.value-2048 {
  background: var(--color-11);
}

.value-4096 {
  background: var(--color-12);
}

.value-8192 {
  background: var(--color-13);
}

.scoreboard {
  width: var(--board-size);
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

.scoreboard > * {
  flex-grow: 1;
  flex-basis: 0;
}

.scoreboard > :first-child {
  text-align: left;
}

.scoreboard > :nth-child(2) {
  text-align: right;
}

.result, .restart {
  width: var(--board-size);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

button#restart {
  cursor: pointer;
  background: var(--buttonground);
  border-color: var(--button-border-color);
  color: var(--text-color);
  border-style: ridge;
  border-radius: 1em;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}