:root { color-scheme: dark; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #05070d;
}
#app { position: fixed; inset: 0; }
#app canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* 轻晕影，收拢视线，非交互层 */
.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(3,5,10,.55) 100%);
}

/* 载入纱幕：资源就绪后淡出消失 */
#veil {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: #05070d; display: flex; align-items: center; justify-content: center;
  transition: opacity 1.2s ease; opacity: 1;
}
#veil.gone { opacity: 0; }
#veil span {
  font: 300 12px/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .55em; text-indent: .55em; color: #5b6b85;
  animation: breathe 2.2s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

#nogl {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  color: #8fa1bd; font: 300 14px/1.8 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2em; text-align: center;
}