html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #071a2b;
  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(1200px 700px at 50% 30%, #0d3050 0%, #071a2b 65%),
    #050f1c;
}

/* letterbox 区域装饰：细微对角纹理，避免纯黑边显脏 */
#stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -35deg,
    rgba(15, 163, 177, 0.028) 0 2px,
    transparent 2px 14px
  );
  pointer-events: none;
}

#game {
  position: relative;
  display: block;
  background: #071a2b;
  box-shadow:
    0 0 0 1px rgba(63, 212, 228, 0.18),
    0 10px 60px rgba(15, 163, 177, 0.28),
    0 2px 24px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}

/* ---------------- 品牌闪屏 ---------------- */
#boot-splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(700px 420px at 50% 42%, #10456e 0%, #0b2740 55%, #06192b 100%);
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index: 5;
}

#boot-splash.hide { opacity: 0; }

.splash-ball {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb35c 0%, #ff7a1c 55%, #e0540a 100%);
  box-shadow: 0 0 34px rgba(255, 122, 28, 0.55);
  position: relative;
  animation: splash-bounce 0.9s cubic-bezier(0.36, 0, 0.64, 1) infinite alternate;
}

.splash-ball::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(transparent 46%, rgba(90, 44, 14, 0.85) 46%, rgba(90, 44, 14, 0.85) 54%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(90, 44, 14, 0.85) 46%, rgba(90, 44, 14, 0.85) 54%, transparent 54%);
}

@keyframes splash-bounce {
  from { transform: translateY(-14px); }
  to   { transform: translateY(10px) scaleX(1.06) scaleY(0.94); }
}

.splash-title {
  margin-top: 14px;
  font: 900 44px/1.2 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #fff;
  letter-spacing: 6px;
  text-shadow:
    0 0 2px #1668a8, 0 0 6px #1668a8,
    0 4px 26px rgba(63, 212, 228, 0.5);
}

.splash-sub {
  font: 900 17px/1 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #fff;
  letter-spacing: 10px;
  padding: 8px 22px 8px 32px;
  border-radius: 999px;
  background: linear-gradient(#ffa14e, #e0540a);
  box-shadow: 0 4px 18px rgba(224, 84, 10, 0.45);
}

.splash-brand {
  margin-top: 16px;
  font: 700 13px/1.5 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #7fd7e0;
  letter-spacing: 2px;
}