:root {
  --gradient-proportion: 5%;
  /* 画面の高さの何%をブロック1個分の大きさにするか(vh=ビューポート高さ基準の相対単位) */
  --box-size: 6vh;
  /* --box-sizeから逆算するので、ここを直接いじる必要はない */
  --total-length: calc(var(--box-size) * 20);
  --total-wight: calc(var(--box-size) * 17);
  --box-gap: calc(var(--box-size) * -1.2);
}

body {
  margin: 0;
  background-color: #12121a;
  overflow: hidden;
}

/* テトリミノがゆっくり降ってくる背景アニメーション */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background-image:
    /*Oミノの色*/
    linear-gradient(#f4ee00 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f4ee00 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f4ee00 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f4ee00 var(--gradient-proportion), transparent var(--gradient-proportion)),
    /*Jミノの色*/
    linear-gradient(#1e90ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#1e90ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#1e90ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#1e90ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    /*Zミノの色*/
    linear-gradient(#f94246 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f94246 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f94246 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f94246 var(--gradient-proportion), transparent var(--gradient-proportion)),
    /*Sミノの色*/
    linear-gradient(#7ced77 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#7ced77 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#7ced77 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#7ced77 var(--gradient-proportion), transparent var(--gradient-proportion)),
    /*Tミノの色*/
    linear-gradient(#aa56ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#aa56ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#aa56ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#aa56ff var(--gradient-proportion), transparent var(--gradient-proportion)),
    /*Lミノの色*/
    linear-gradient(#f2b907 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f2b907 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f2b907 var(--gradient-proportion), transparent var(--gradient-proportion)),
    linear-gradient(#f2b907 var(--gradient-proportion), transparent var(--gradient-proportion));
  background-repeat: repeat-y;
  background-size: var(--box-size) var(--total-length);
  background-position:
    /*Oミノのスタート*/
    calc(var(--total-wight) * 0.12)  0,
    calc(var(--total-wight) * 0.19)  0,
    calc(var(--total-wight) * 0.12)  var(--box-gap),
    calc(var(--total-wight) * 0.19)  var(--box-gap),
    /*Jミノのスタート*/
    calc(var(--total-wight) * 0.37) calc(var(--total-length) * -0.35),
    calc(var(--total-wight) * 0.44) calc(var(--total-length) * -0.35),
    calc(var(--total-wight) * 0.51) calc(var(--total-length) * -0.35),
    calc(var(--total-wight) * 0.37) calc(var(--total-length) * -0.35 + var(--box-gap)),
    /*Zミノのスタート*/
    calc(var(--total-wight) * 0.74) calc(var(--total-length) * -0.65 - var(--box-gap)),
    calc(var(--total-wight) * 0.74) calc(var(--total-length) * -0.65),
    calc(var(--total-wight) * 0.81) calc(var(--total-length) * -0.65),
    calc(var(--total-wight) * 0.81) calc(var(--total-length) * -0.65 + var(--box-gap)),
    /*Sミノのスタート*/
    calc(var(--total-wight) * 1.29) calc(var(--total-length) * -0.15),
    calc(var(--total-wight) * 1.36) calc(var(--total-length) * -0.15),
    calc(var(--total-wight) * 1.22) calc(var(--total-length) * -0.15 + var(--box-gap)),
    calc(var(--total-wight) * 1.29) calc(var(--total-length) * -0.15 + var(--box-gap)),
    /*Tミノのスタート*/
    calc(var(--total-wight) * 1.59) calc(var(--total-length) * -0.5),
    calc(var(--total-wight) * 1.52) calc(var(--total-length) * -0.5 + var(--box-gap)),
    calc(var(--total-wight) * 1.59) calc(var(--total-length) * -0.5 + var(--box-gap)),
    calc(var(--total-wight) * 1.66) calc(var(--total-length) * -0.5 + var(--box-gap)),
    /*Lミノのスタート*/
    calc(var(--total-wight) * 1.92) calc(var(--total-length) * -0.85 - var(--box-gap)),
    calc(var(--total-wight) * 1.99) calc(var(--total-length) * -0.85 - var(--box-gap)),
    calc(var(--total-wight) * 1.92) calc(var(--total-length) * -0.85),
    calc(var(--total-wight) * 1.92) calc(var(--total-length) * -0.85 + var(--box-gap));
  animation: fallBlocks 25s linear infinite;
}

@keyframes fallBlocks {
  to {
    background-position:
      /*Oミノの終了*/
      calc(var(--total-wight) * 0.12)  var(--total-length),
      calc(var(--total-wight) * 0.19)  var(--total-length),
      calc(var(--total-wight) * 0.12)  calc(var(--total-length) + var(--box-gap)),
      calc(var(--total-wight) * 0.19)  calc(var(--total-length) + var(--box-gap)),
      /*Jミノの終了*/
      calc(var(--total-wight) * 0.37) calc(var(--total-length) * 0.65),
      calc(var(--total-wight) * 0.44) calc(var(--total-length) * 0.65),
      calc(var(--total-wight) * 0.51) calc(var(--total-length) * 0.65),
      calc(var(--total-wight) * 0.37) calc(var(--total-length) * 0.65 + var(--box-gap)),
      /*Zミノの終了*/
      calc(var(--total-wight) * 0.74) calc(var(--total-length) * 0.35 - var(--box-gap)),
      calc(var(--total-wight) * 0.74) calc(var(--total-length) * 0.35),
      calc(var(--total-wight) * 0.81) calc(var(--total-length) * 0.35),
      calc(var(--total-wight) * 0.81) calc(var(--total-length) * 0.35 + var(--box-gap)),
      /*Sミノの終了*/
      calc(var(--total-wight) * 1.29) calc(var(--total-length) * 0.85),
      calc(var(--total-wight) * 1.36) calc(var(--total-length) * 0.85),
      calc(var(--total-wight) * 1.22) calc(var(--total-length) * 0.85 + var(--box-gap)),
      calc(var(--total-wight) * 1.29) calc(var(--total-length) * 0.85 + var(--box-gap)),
      /*Tミノの終了*/
      calc(var(--total-wight) * 1.59) calc(var(--total-length) * 0.5),
      calc(var(--total-wight) * 1.52) calc(var(--total-length) * 0.5 + var(--box-gap)),
      calc(var(--total-wight) * 1.59) calc(var(--total-length) * 0.5 + var(--box-gap)),
      calc(var(--total-wight) * 1.66) calc(var(--total-length) * 0.5 + var(--box-gap)),
      /*Lミノの終了*/
      calc(var(--total-wight) * 1.92) calc(var(--total-length) * 0.15 - var(--box-gap)),
      calc(var(--total-wight) * 1.99) calc(var(--total-length) * 0.15 - var(--box-gap)),
      calc(var(--total-wight) * 1.92) calc(var(--total-length) * 0.15),
      calc(var(--total-wight) * 1.92) calc(var(--total-length) * 0.15 + var(--box-gap));
  }
}

/* ゲーム盤を画面中央に固定しつつ、その左にランキングパネルを配置する親要素 */
/* 両端のカラムを同じ幅(1fr)にすることで、中央カラム(盤面)が
   ランキングパネルの有無・幅に関係なく常に画面の真ん中に来るようにしている */
#game-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin-top: 10vh;
}

/* 左側のランキングパネル(1列目、盤面側=右寄せで配置) */
#ranking-panel {
  grid-column: 1;
  justify-self: end;
  margin-right: 2vh;
  position: relative;
  z-index: 1;
  width: 22vh;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.5vh;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #ffffff;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'MS ゴシック', sans-serif;
}

#ranking-panel h2 {
  margin: 0 0 1vh;
  font-size: 1.8vh;
  text-align: center;
}

#ranking-list {
  margin: 0;
  padding: 0;
  list-style: decimal inside;
  font-size: 1.6vh;
  line-height: 1.8;
}

#container {
  grid-column: 2;
  position: relative;
  z-index: 1;
  /* 位置合わせは親の#game-layout(grid)が担当するので、ここでは余白指定は不要 */
  margin: 0;
  /* 万一JS側の計算値が画面に収まりきらない場合の保険として、
     画面幅・高さを超えないよう上限を設けておく */
  max-width: 100vw;
  max-height: 100vh;
}

/* キャンバス自体もブラウザ幅より大きくならないようにしておく(保険) */
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}