/* STEEL WING · 钢铁之翼 — 页面样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #05070d;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #0d1526 0%, #05070d 70%);
}

#game {
  display: block;
  background: #05070d;
  image-rendering: auto;
  box-shadow: 0 0 80px rgba(40, 130, 255, 0.12), 0 0 8px rgba(0,0,0,.8);
  border-radius: 2px;
  cursor: crosshair;
}

/* ---------- 启动画面 ---------- */
#loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: #05070d;
  transition: opacity .5s ease;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  z-index: 10;
}
#loading.hide { opacity: 0; pointer-events: none; }

.ld-logo { text-align: center; }
.ld-mark {
  width: 72px; height: 72px; margin: 0 auto 16px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, #1b2c4d 0%, #0b1020 60%),
    radial-gradient(circle at 50% 60%, #37c6ff 0%, transparent 55%);
  position: relative;
  box-shadow: inset 0 0 24px rgba(55,198,255,.25), 0 4px 24px rgba(0,0,0,.6);
}
.ld-mark::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #eaffff 0%, #37c6ff 45%, rgba(55,198,255,0) 72%);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.9 } 50% { transform: translate(-50%,-50%) scale(1.25); opacity: 1 } }
.ld-title {
  color: #eaf6ff; font-size: 30px; font-weight: 800; letter-spacing: .38em; text-indent: .38em;
  text-shadow: 0 0 22px rgba(55,198,255,.55);
}
.ld-sub { color: #7fa8c9; font-size: 14px; letter-spacing: .9em; text-indent: .9em; margin-top: 8px; }

.ld-bar {
  width: 240px; height: 4px; border-radius: 2px;
  background: #14203a; overflow: hidden;
}
.ld-bar i {
  display: block; height: 100%; width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, #1f8fe0, #37c6ff);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide { 0% { margin-left: -40% } 100% { margin-left: 100% } }

.ld-tip { color: #5d7296; font-size: 12px; letter-spacing: .2em; }

/* ---------- 竖屏提示 ---------- */
#rotate-hint {
  position: absolute; inset: 0; z-index: 20;
  display: none; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  background: #05070dee;
  color: #9fc3e8; font-family: inherit; font-size: 15px; letter-spacing: .1em;
  text-align: center; padding: 24px;
}
.rh-icon { font-size: 42px; animation: spin 2.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}