/* Tetris — rides the math-stage chrome, centers the board in a box. */

html.math-page.tetris-page,
html.math-page.tetris-page body {
  height: 100%;
  overflow: hidden;
}

.tetris-stage {
  display: flex;
  align-items: stretch;
}

.tetris-board-wrap {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 24px 24px 24px 340px;
}

.tetris-frame {
  background: #0a0a0e;
  border: 1px solid #222228;
  border-image: linear-gradient(to bottom, #6cf0ff, #ff3d7a) 1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 10px;
}

.tetris-stage #tetris {
  display: block;
  background: #050508;
  image-rendering: pixelated;
}

.tetris-stage #next {
  display: block;
  margin: 0 auto;
  background: #0a0a0e;
  border: 1px solid #222228;
}

.tetris-stage select {
  width: 100%;
  height: 32px;
  border: 1px solid #2e2e36;
  background: #111114;
  color: var(--math-text);
  padding: 0 8px;
}

.tetris-stage .score-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #222228;
  background: #0a0a0e;
}

.tetris-stage .score-box .ctrl-head {
  margin: 0;
}

@media (max-width: 720px) {
  .tetris-board-wrap {
    padding: 12px 12px 52%;
  }
}