html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #22173d; color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; }
#unity-canvas {
  width: 100%; height: 100%; display: block; outline: none;
  background: #22173d; touch-action: none;
}

/* ---------- 加载界面 ---------- */
#loader {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #3b2a78 0%, #22173d 60%, #150e28 100%);
  transition: opacity .5s ease;
  padding: 16px; box-sizing: border-box; text-align: center;
}
#loader.hidden { opacity: 0; pointer-events: none; }
#logo { width: min(520px, 70vw, 60vh * 2.2); height: auto; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
#bar {
  width: min(520px, 76vw); height: 18px; margin-top: 28px;
  background: rgba(0, 0, 0, .45); border-radius: 9px; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12);
}
#fill {
  height: 100%; width: 0; border-radius: 9px;
  background: linear-gradient(90deg, #ff8a1e, #ff4f9a, #7a5cff);
  transition: width .25s ease;
}
#percent { margin-top: 12px; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
#tip { margin-top: 10px; font-size: 14px; opacity: .75; max-width: min(620px, 90vw); line-height: 1.5; min-height: 2.6em; }
#error {
  display: none; margin-top: 16px; padding: 12px 18px; max-width: min(620px, 90vw);
  background: rgba(255, 80, 80, .18); border: 2px solid #ff7b7b; border-radius: 12px; line-height: 1.6;
}
.btn {
  display: none; margin-top: 20px; padding: 14px 40px; border: 4px solid #fff; border-radius: 40px;
  background: #ff8a1e; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .3); cursor: pointer; animation: pulse 1.4s ease-in-out infinite;
  font-family: inherit;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* 墨水装饰 */
.splat { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; }
.s1 { width: 34vmin; height: 30vmin; background: #ff8a1e; left: -8vmin; top: -6vmin; border-radius: 46% 54% 60% 40%; }
.s2 { width: 40vmin; height: 34vmin; background: #7a5cff; right: -10vmin; bottom: -8vmin; border-radius: 58% 42% 38% 62%; }
.s3 { width: 14vmin; height: 12vmin; background: #1fd1c8; right: 12vmin; top: 10vmin; border-radius: 40% 60% 52% 48%; }

/* ---------- 全屏按钮 ---------- */
.icon-btn {
  position: fixed; right: 10px; top: 10px; z-index: 20;
  width: 40px; height: 40px; border-radius: 10px; border: 0;
  background: rgba(0, 0, 0, .35); color: #fff; font-size: 22px; line-height: 40px;
  cursor: pointer; opacity: .55; padding: 0;
}
.icon-btn:hover { opacity: 1; }
body.mobile .icon-btn { width: 34px; height: 34px; font-size: 18px; line-height: 34px; right: 6px; top: 6px; }

/* ---------- 竖屏提示：只在手机竖屏时出现 ---------- */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 30;
  background: #22173d; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
#rotate p { font-size: 20px; margin: 22px 0 6px; }
#rotate small { opacity: .6; }
#rotate .phone {
  width: 56px; height: 96px; border: 5px solid #fff; border-radius: 12px;
  animation: turn 1.8s ease-in-out infinite;
}
@keyframes turn { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) {
  body.mobile #rotate { display: flex; }
}

/* 手机上全屏按钮加大点击范围 */
body.mobile .icon-btn { width: 44px; height: 44px; font-size: 22px; line-height: 44px; right: 8px; top: 8px; opacity: .7; }

/* 提示条 */
#toast {
  position: fixed; left: 50%; top: 14px; transform: translate(-50%, -140%); z-index: 40;
  max-width: min(560px, 88vw); padding: 12px 18px; border-radius: 14px;
  background: rgba(20, 12, 40, .92); color: #fff; font-size: 15px; line-height: 1.6; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .3s ease; pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); }