/* 黄金阅读课程 · 5段 — web host styles (desktop / mobile) */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #10151f;
  -webkit-tap-highlight-color: transparent;
}

#GameDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#GameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  /* 不要在这里设 visibility:hidden —— main.js 只清内联样式，页面规则会一直压住它。
     加载期间由 #splash 覆盖显示即可。 */
}

/* ---------- 启动 splash ---------- */

#splash {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: radial-gradient(circle at 50% 38%, #1d2a44 0%, #10151f 70%);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: #fff;
}

.splash-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  max-width: 460px;
  text-align: center;
}

.splash-title {
  font-size: 34px;
  letter-spacing: 6px;
  font-weight: 700;
  color: #ffd76a;
  text-shadow: 0 2px 12px rgba(255, 190, 60, .35);
}

.splash-sub {
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .62);
}

.progress-bar {
  margin-top: 34px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ffd76a, #ffa53c);
  transition: width .18s ease-out;
}

.splash-tip {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  letter-spacing: 1px;
}

/* ---------- 开始门（解锁音频 / 自动播放） ---------- */

#startGate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, #1d2a44 0%, #10151f 70%);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: #fff;
  text-align: center;
}

.gate-title {
  font-size: 40px;
  letter-spacing: 8px;
  font-weight: 700;
  color: #ffd76a;
  text-shadow: 0 2px 14px rgba(255, 190, 60, .35);
}

.gate-sub {
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, .62);
}

#startBtn {
  display: block;
  margin: 40px auto 0;
  padding: 14px 54px;
  font-size: 19px;
  letter-spacing: 3px;
  font-family: inherit;
  color: #3a2a05;
  background: linear-gradient(180deg, #ffe08a, #ffbf3c);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(255, 180, 50, .32);
  transition: transform .12s ease, box-shadow .12s ease;
}

#startBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 180, 50, .42); }
#startBtn:active { transform: translateY(0); }
#startBtn:focus-visible { outline: 3px solid rgba(255, 215, 106, .8); outline-offset: 3px; }

.gate-tip {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, .42);
  letter-spacing: 1px;
}

/* ---------- 触控设备适配 ---------- */

/* 触屏上禁掉滚动、双击缩放、长按菜单——这些在课件里都是干扰 */
.touch-device #GameCanvas {
  touch-action: none;
}

html.touch-device,
html.touch-device body {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html.touch-device #startBtn {
  touch-action: manipulation;
  /* 触屏上按钮做得更大更好按 */
  padding: 18px 64px;
  font-size: 21px;
}

/* iPad 圆角屏 / Home 指示条安全区 */
@supports (padding: env(safe-area-inset-bottom)) {
  .gate-inner,
  .splash-inner {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------- 竖屏提示 ---------- */

#rotateHint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #10151f;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #fff;
  text-align: center;
}

.rotate-icon {
  font-size: 56px;
  animation: rotateWobble 1.8s ease-in-out infinite;
}

@keyframes rotateWobble {
  0%, 40%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(90deg); }
}

.rotate-text {
  font-size: 17px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .75);
}

#rotateContinue {
  margin-top: 10px;
  padding: 12px 34px;
  font-size: 15px;
  font-family: inherit;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .82);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

#rotateContinue:active {
  background: rgba(255, 255, 255, .1);
}