/* 1024 (pow2) game */
#pow2 {
  display: grid;
  margin: auto;  padding: 0.5em;
  grid-template-columns: auto auto auto;
  justify-content: center;
  position: relative;
  perspective: 500px;
}
#pow2 h1, #pow2 h2 {
  margin: auto;
  text-align: center;
}

/* triangle buttons */
#pow2 button {
  width: 0;  height: 0;
  margin: 10px;  padding: 0;
  box-sizing: content-box;
  border-style: solid;
  background-color: transparent;
  cursor: pointer;
  transition: 0.2s all;
}
#pow2 button:active { transform: scale(0.9); }
#pow2BtnUp    {
  border-width: 0 90px 40px 90px;
  border-color: transparent transparent hsl(206, 70%, 30%) transparent;
  place-self: center;
}
#pow2BtnDown  {
  border-width: 40px 90px 0 90px;
  border-color: hsl(206, 70%, 30%) transparent transparent transparent;
  place-self: center;
  grid-column-start: 2;
}
#pow2BtnLeft  {
  border-width: 90px 40px 90px 0;
  border-color: transparent hsl(206, 70%, 30%) transparent transparent;
  place-self: center;
}
#pow2BtnRight {
  border-width: 90px 0 90px 40px;
  border-color: transparent transparent transparent hsl(206, 70%, 30%) ;
  place-self: center;
}

#pow2Board {
  margin: auto;
  position: relative;
  width: 212px;  height: 212px;
  border: 6px ridge #bbada0;
  background-color: #cdc1b4;
  background-image:
    linear-gradient(to right, #bbada0 1px, transparent 1px),
    linear-gradient(to bottom, #bbada0 1px, transparent 1px);
  background-size: 50px 50px;
  cursor: grab;
  transition: 0.25s;
  transform-style: preserve-3d;
}

#pow2Board > div {
  display: inline-block;
  width: 50px;  height: 50px;
  line-height: 42px;
  position: absolute;
  text-align: center;
  user-select: none;
  border: 3px outset #776e65;
  transition-property: left, top;
  transition-duration: 250ms;
  color: hsl( 0, 50%, 13%);
  background-color: hsl(30, 37%, 89%);
}

#pow2Board > div.tile1    { color: hsl( 0, 50%, 13%); background: hsl(30, 37%, 89%); }
#pow2Board > div.tile2    { color: hsl( 0, 50%, 13%); background: hsl(39, 72%, 80%); }
#pow2Board > div.tile4    { color: hsl(34, 37%, 96%); background: hsl(28, 82%, 71%); }
#pow2Board > div.tile8    { color: hsl(34, 37%, 96%); background: hsl(21, 88%, 67%); }
#pow2Board > div.tile16   { color: hsl(34, 37%, 96%); background: hsl(12, 89%, 67%); }
#pow2Board > div.tile32   { color: hsl(34, 37%, 96%); background: hsl(11, 91%, 60%); }
#pow2Board > div.tile64   { color: hsl(34, 37%, 96%); background: hsl(45, 77%, 69%); }
#pow2Board > div.tile128  { color: hsl(34, 37%, 96%); background: hsl(46, 80%, 65%); }
#pow2Board > div.tile256  { color: hsl(34, 37%, 96%); background: hsl(46, 81%, 62%); }
#pow2Board > div.tile512  { color: hsl(34, 37%, 96%); background: hsl(46, 83%, 59%); }
#pow2Board > div.tile1024 { color: hsl(34, 37%, 96%); background: hsl(46, 84%, 55%); }
#pow2Board > div.tile2048 { color: hsl(34, 37%, 96%); background: hsl(48,  9%, 22%); }
#pow2Board > div.tile4096 { color: hsl(34, 37%, 96%); background: hsl(48, 30%, 20%); }
#pow2Board > div.tile8192 { color: hsl(34, 37%, 96%); background: hsl(48, 50%, 20%); }

#pow2Instr { text-align: center; }
#pow2Instr > #credit {
  color: darkgrey;
  font-size: 10pt;
}

#pow2GameOver { 
  font-size: 2.5em;
  animation: gameOverFlash 0.5s ease 0s 10 alternate;
}
@keyframes gameOverFlash {
  from { text-shadow: none; }
  to { text-shadow:
      0 0 10px red, 
      0 0 20px red,
      0 0 30px red,
      0 0 40px darkred,
      0 0 50px darkred,
      0 0 60px darkred,
      0 0 70px darkred;
  }
}

#pow2Scores {
  margin: 2em auto;
  border-collapse: collapse;
  white-space: nowrap;
}
#pow2Scores caption {
  font-size: 18pt;
  font-weight: bold;
  padding-bottom: 4px;
}
#pow2Scores th, #pow2Scores td {
  text-align: center;
  padding: 0 0.5em;
}
#pow2Scores th { color: lightgray; }
#pow2Scores td {
  background-color: #444;
  border: 1px solid;
}
#pow2Scores td:nth-child(2) { max-width: 10em; }