* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

body {
    position: relative;
    margin: 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	background-color:rgba(0, 0, 0, 1.00);
}

canvas {
    display: block;
    margin: 0 auto;
}

#gameArea {
	position: relative;
	margin:0px 0px;
	padding:0px;
	width:100%;
	height:100%;
	background-color:#000000; 
}

#loadingArea{
	position:absolute;
	z-index:10;
    display: none;
	top:100px;
	margin:auto;
	width: 100%;
	text-align:center;
}



/* ビューポートのベース */
#viewport {
  width: 100vw;
  height: 100vh;
}

/* 横長のときだけ中央寄せ（水平＋垂直のどちらもセンタリング） */
@media (orientation: landscape) {
  #viewport {
    display: flex;
    align-items: center;   /* 垂直中央 */
    justify-content: center; /* 水平中央 */
  }
}

/* 縦長（既定）：今まで通り。必要なら水平センターだけ入れる */
@media (orientation: portrait) {
  #viewport {
    display: block; /* 従来挙動を維持 */
  }
  //もし縦でも水平センターにしたい場合は以下の1行を有効化
  //#gameArea { margin-left: auto; margin-right: auto; }
  
}