html,
body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#111;

  touch-action:pan-y;
}

#stage{
  position:fixed;
  inset:0;
  overflow:hidden;
}

#canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
}

#overlayIcon{

  position:fixed;

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);

  font-size:64px;

  color:white;

  text-shadow:
    0 0 10px rgba(0,0,0,0.8),
    0 0 20px rgba(0,0,0,0.6);

  opacity:0;

  pointer-events:none;

  transition:opacity 0.0s;

  z-index:300;
}

#overlayIcon.show{
  opacity: 0.75;
}

#overlayIcon.fadeout{
  opacity: 0;
  transition: opacity 2.0s;
}


/*==============================================================
 UI
==============================================================*/

/*--------------------------------------------------------------
 左右バー（PC専用）
--------------------------------------------------------------*/
.navSide{
    position:fixed;

    top:0;
    bottom:0;

    width:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,0.2);

    opacity:0.1;

    transition:
        opacity 0.15s,
        background 0.15s;

    z-index:100;
}

.navSide:hover{
    opacity:0.4;
    background:rgba(0,0,0,0.4);
}

#navLeft{
    left:0;
}

#navRight{
    right:0;
}

/* 選択禁止 */
.navSide,
.navSide *{

    user-select:none;
    -webkit-user-select:none;

    -webkit-touch-callout:none;

    touch-action:manipulation;
}


/*--------------------------------------------------------------
 共通ボタン
--------------------------------------------------------------*/
.navButton{
    color:white;

    font-size:42px;
    font-weight:bold;

    pointer-events:none;

    text-shadow:
        0 0 10px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
 下部バー
--------------------------------------------------------------*/
#bottomBar{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:72px;

    display:flex;
    align-items:center;

    opacity:0.01;
    background:rgba(0,0,0,0.5);

    backdrop-filter:blur(8px);

    z-index:200;
}

#bottomBar:hover{
    opacity:0.8;
    background:rgba(0,0,0,0.5);
}

/*--------------------------------------------------------------
 下部バー左右
--------------------------------------------------------------*/
#bottomHelp,
#bottomStatus{

    width:220px;
    padding:0 16px;
    color:rgba(255,255,255,0.45);
    font-size:12px;
    white-space:nowrap;
}

#bottomStatus{
    text-align:right;
}

/*--------------------------------------------------------------
 下部バー中央
--------------------------------------------------------------*/
#bottomControls{

    flex:1;

    display:flex;

    justify-content:center;
    align-items:center;

    gap:12px;
}

/*--------------------------------------------------------------
 下部ボタン
--------------------------------------------------------------*/
#bottomBar button{

    width:56px;
    height:56px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,0.12);

    color:white;

    font-size:24px;

    cursor:pointer;

    transition:
        background 0.15s,
        transform 0.1s;
}

#bottomBar button:hover{
    background:rgba(255,255,255,0.25);
}

#bottomBar button:active{
    transform:scale(0.92);
}

/* 選択禁止 */
#bottomBar,
#bottomBar *{

    user-select:none;
    -webkit-user-select:none;

    -webkit-touch-callout:none;

    touch-action:manipulation;
}

/*--------------------------------------------------------------
 スマホ
	・左右バーを消す
	・下部バーの説明/ステータスを消す
--------------------------------------------------------------*/
@media (max-width: 768px){

    .navSide{
        display:none;
    }

    #bottomBar{
        bottom:12px;
    	opacity:0.05;
    }

    #bottomBar button{

        width:64px;
        height:64px;

        font-size:28px;
    }

    #bottomHelp,
    #bottomStatus{
        display:none;
    }
}