/* 画面全体 */
html,body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
  background:#000;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* タッチ操作中に文字選択（青ハイライト）や長押しメニューが出るのを防ぐ */
html, body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color: transparent;
}

/* 念のためアプリ領域も選択不可 */
#app, #app *{
  -webkit-user-select:none;
  user-select:none;
}
#app{
  position:relative;
  width:100%;
  height:100%;
}
#app canvas{
  opacity: 0;
  transition: opacity 0.45s ease;
}
#app.is-ready canvas{
  opacity: 1;
}
#app canvas{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
}

.universeLoading{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at top, rgba(67, 103, 155, 0.28), transparent 40%),
    radial-gradient(circle at bottom, rgba(15, 43, 78, 0.35), transparent 45%),
    #000;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.universeLoading::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(200, 232, 255, 0.22), rgba(200, 232, 255, 0.08) 12%, rgba(200, 232, 255, 0) 26%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), rgba(255,255,255,0) 40%);
  pointer-events:none;
  animation: universeLoadingGlow 3.2s ease-in-out infinite alternate;
}
.universeLoading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.universeLoading__inner{
  position:relative;
  z-index:2;
  width:min(420px, 100%);
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.2s ease, transform 0.24s ease;
  display:none;
}
.universeLoading.is-visible .universeLoading__inner{
  opacity:1;
  transform:translateY(0);
}
.universeLoading__warp{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.universeLoading__meteorField{
  position:relative;
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:visible;
  transform:rotate(45deg);
  transform-origin:center center;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.14));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px rgba(102, 186, 255, 0.14);
  display:none;
}
.universeLoading__meteor{
  display:block;
  position:relative;
  width:10%;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(196,230,255,0.58) 22%,
      rgba(248,253,255,0.95) 50%,
      rgba(196,230,255,0.58) 78%,
      rgba(255,255,255,0.04) 100%),
    linear-gradient(90deg,
      rgba(113,187,255,0) 0%,
      rgba(113,187,255,0.18) 10%,
      rgba(113,187,255,0.62) 28%,
      rgba(177,226,255,0.92) 72%,
      rgba(248,253,255,1) 100%);
  box-shadow:
    0 0 10px rgba(113, 187, 255, 0.40),
    0 0 22px rgba(113, 187, 255, 0.30);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.12) 7%, rgba(0,0,0,0.45) 14%, #000 28%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.12) 7%, rgba(0,0,0,0.45) 14%, #000 28%, #000 100%);
  transition:width 0.22s ease;
}
.universeLoading__meteor::before{
  content:none;
}
.universeLoading__meteor::after{
  content:none;
  pointer-events:none;
}
.universeLoading__star{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:2px;
  border-radius:50%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(196,231,255,0.68) 42%, rgba(255,255,255,0.98) 100%);
  box-shadow:
    0 0 6px rgba(255,255,255,0.65),
    0 0 14px rgba(120,190,255,0.28);
  transform-origin:100% 50%;
  opacity:0;
  will-change:transform, opacity, width, height;
}

@keyframes universeLoadingGlow{
  0%{
    transform:scale(0.96);
    opacity:0.72;
  }
  100%{
    transform:scale(1.04);
    opacity:1;
  }
}

/* 左下の戻るボタン（画像） */
.backButton{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:40;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  width:40px;
  height:40px;
  cursor:pointer;
}
.backButton img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
  animation: backlight 2s ease-in-out infinite alternate;
}
@keyframes backlight{
  0%{
      opacity: 20%;
  }  
  100%{
      opacity: 50%;
  }
}

/* イントロ時の全画面フェード */
.introFade{
  position:fixed;
  inset:0;
  background:#000000;
  opacity:0;
  pointer-events:none;
  z-index:55;
  transform:translateZ(0);
}

/* 3D 内のラベル用（いまは JS 側のテクスチャで表現するのでダミー） */
.spriteLabel{
  /* 空でOK */
}