/*ゲームページのスタイル*/

:root {
  --gradient-proportion: 5%;
  --box-size: 6vh;
  --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));
  }
}

#game-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin-top: 10vh;
}

#game-layout.hidden {
  display: none;
}

#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;
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
}

canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

#retry-btn {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 1.2vh 3vh;
  font-size: 2vh;
  font-weight: bold;
  color: #ffffff;
  background: #aa56ff;
  border: 2px solid #ffffff;
  border-radius: 8px;
  cursor: pointer;
}

#retry-btn:hover {
  background: #c27dff;
}

.hidden {
  display: none;
}

#controls-guide {
  position: fixed;
  right: 2vh;
  bottom: 2vh;
  z-index: 1;
  width: 29vh;
  box-sizing: border-box;
  padding: 1.2vh 1.4vh;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #2f2f3d;
  border-radius: 8px;
  color: #8a8a9c;
  font-family: 'MS ゴシック', sans-serif;
  font-size: 1.4vh;
  pointer-events: none;
  user-select: none;
}

.guide-row {
  display: flex;
  align-items: center;
  gap: 1.2vh;
  padding: 0.5vh 0;
}

.guide-row .keys {
  display: flex;
  align-items: center;
  gap: 0.4vh;
  width: 10.5vh;
  flex: none;
}

.guide-row .or {
  color: #5c5c6c;
}

#controls-guide kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8vh;
  height: 2.8vh;
  box-sizing: border-box;
  padding: 0 0.6vh;
  font-family: inherit;
  font-size: 1.3vh;
  color: #a4a4b6;
  background: #262632;
  border: 1px solid #3c3c4e;
  border-bottom-width: 0.4vh;
  border-radius: 0.6vh;
}

#controls-guide kbd.wide {
  padding: 0 0.8vh;
  font-size: 1.1vh;
}

@media (max-aspect-ratio: 3/2) {
  #controls-guide {
    display: none;
  }
}