body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
  text-align: center;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

div, img {
  position: absolute;
  overflow: hidden;
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

img {
  object-fit: contain;
}

.center {
  position: absolute;
  left: 50%;
  top:  50%;
  transform: translate(-50%,-50%);
}

.text-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.horizontal-center {
  left: 50%;
  transform: translateX(-50%);
}

.rightcolumn-center {
  left: 88%;
  transform: translateX(-50%);
}

.bottomcolumn-center {
  top: 93.5%;  /* 92.5 -> */
  transform: translate(-50%,-50%);
}

#nextPuyo > img {
  left: 50%;
  transform: translate(-50%,-50%);
  height: 36%;  /* 1枚の高さを親の36%に固定（30〜38）*/
  width: auto;  /* 縦横比維持 */
  max-width: 100%;  /* 横方向のはみ出し */
  pointer-events: none;
}

.num {
  height: 60%;
  position: relative;
}

/*****************************************************************************/

/* 全体の背景 > コントローラーまで */
#contents {
  bottom: 0;
}
#contents::before {
  content: "";
  position: absolute;
  top:   0;
  left:  0;
  right: 0;
  bottom: 13.0%;
  background-image: url('../img/contents_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
  z-index: 0;
}

/* ゲームステージ */
#stage {
  overflow: visible;
  top:  0;
  left: 3.0%;     /*  8.0 -> */
  width:  69.0%;  /* 60.0 -> */
  height: 81.5%;  /* 80.0 -> */
}
#stageInner {
  top:  5.0%;
  left:   0;
  width:  100%;
  height: 100%;
}
#stageInner > img {
  pointer-events: none;
}

/* 吹き出し画像 */
#stage .balloon {
  z-index: 999;
  width:  40%;
  height: auto;
  pointer-events: none;
}

/* 全幅スコア */
#scoreDisplay {
  top:  0;
  left: 0;
  width:  100%;
  height: 4.0%;
  text-align: right;
  padding-right: 5.0%;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 0;
}
#scoreDisplay img {
  display: inline-block;
  pointer-events: none;
}

/* コントローラーの背景 */
#controllerBg {
  z-index: 0;
  bottom:  0;
  left:    0;
  width:   100%;
  height: 13.0%;
  background-image: url('../img/controller_bg.png');
  background-size: cover;
}

/* 複数の数字画像 */
img.num--default { height:  80% !important; }
img.num--timer   { height: 100% !important; }
img.num--score   { height: 100% !important; }

#timerNum img, #scoreNum img, #maxRensaNum img {
  pointer-events: none;
}

/* ゲームスタート確認画面 */
#coverStart {
  background-image: url('../img/gamestart_bg.png');
  left:   50.0%;
  top:    51.4%;
  width:  80.6%;
  height: 24.0%;
  transform: translate(-50%,-50%);
}

/* 結果発表画面 */
#gameover {
  background-image: url('../img/gameover_bg.png');
  left:   38.6%;
  top:    41.4%;
  width:  62.0%;
  height: 30.8%;
  transform: translate(-50%,-50%);
  overflow: visible;  /* btn_restart.pngの表示に対応 */
}
/* スコア、最大連鎖数 */
#gameoverScore, #gameoverMaxRensa {
  text-align: right;
  white-space: nowrap;
  line-height: 0;
}
#gameoverScore img, #gameoverMaxRensa img {
  display: inline-block;
  height: 100%;
  pointer-events: none;
}

/*　サイドキャラ　*/
#sideChara {
  --jumpHeight: -40%;
}

.jump {
  animation: jump 0.3s ease-in 1;
}
@keyframes jump {
  0%   { transform: translate(-50%, 0); }
  50%  { transform: translate(-50%, var(--jumpHeight)); }
  100% { transform: translate(-50%, 0); }
}

#gameover .gameover-restart {
  position: absolute;
  top: 103%;
  left: 50%;
  transform: translate(-50%, 0);
  display: block;
  width: 66%;
  max-width: 260px;
}
#gameover .gameover-restart img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ぷよ消去時のエフェクト */
.puyo--erase {
  animation-duration: var(--eraseDur, .35s);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
}
/* エフェクト */
.fx-bounce {
  animation-name: puyo-bounce;
  animation-timing-function: cubic-bezier(.215,.61,.355,1);
  transform-origin: center bottom;
}
@keyframes puyo-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
  40%, 43% { transform: translate3d(0, -30px, 0) scaleY(1.02); }
  70% { transform: translate3d(0, -15px, 0) scaleY(1.01); }
  90% { transform: translate3d(0, -4px, 0); }
}
.fx-blink {
  animation: puyo-blink 1.5s ease-in-out forwards;
}
@keyframes puyo-blink {
  0% { opacity: 1; }
  15% { opacity: 0; }
  30% { opacity: 1; }
  45% { opacity: 0; }
  60% { opacity: 1; }
  75% { opacity: 0; }
  85% { opacity: 0; }
  100% { opacity: 0; }
}
.fx-pop-fade {
  animation-name: puyo-pop-fade;
}
@keyframes puyo-pop-fade {
  0% { transform: scale(1); opacity:1; filter:blur(0); }
  60% { transform: scale(1.2); filter:blur(.5px); }
  100% { transform: scale(.65); opacity:0; filter:blur(1px); }
}
.fx-squash {
  animation-name: puyo-squash;
}
@keyframes puyo-squash {
  0% { transform: scale(1); opacity:1; }
  30% { transform: scale(1.2,.8); }
  60% { transform: scale(.85,1.15); }
  100% { transform: scale(.65,1.1) translateY(-6px); opacity:0; }
}