:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ink: rgba(255, 255, 255, 0.92);
  --ink-dim: rgba(255, 255, 255, 0.6);
  --glass: rgba(20, 24, 38, 0.34);
  --glass-line: rgba(255, 255, 255, 0.22);
  --ember: #f26a3d;
  --seal: #d4553e;
  --font-display: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-ui: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Helvetica Neue", sans-serif;
}

* {
  margin: 0; padding: 0; box-sizing: border-box;
  /* 禁用长按绿色选择框：点按高亮 + iOS 长按 callout + 文本选择（需全元素覆盖，仅 body 不够用） */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #8a64c8;
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#app, #app canvas { position: fixed; inset: 0; display: block; }

/* ---------- 覆盖层 ---------- */
#whiteout {
  position: fixed; inset: 0;
  background: #eef0fa;
  opacity: 0; pointer-events: none;
  z-index: 30;
}
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 62%, rgba(20, 16, 40, 0.16) 100%);
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#hud > * { pointer-events: auto; }

.round-btn {
  position: absolute;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.round-btn:active { transform: scale(0.92); }
#btn-mute { top: calc(var(--safe-t) + 14px); left: calc(var(--safe-l) + 14px); }
#btn-home { top: calc(var(--safe-t) + 14px); right: calc(var(--safe-r) + 14px); }
.fade-in-soft { animation: fadeIn 0.9s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 访问统计（顶部居中）---------- */
.visit-pill {
  position: absolute;
  top: calc(var(--safe-t) + 20px);
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0.6;
  pointer-events: none;
}

#btn-flame {
  position: absolute;
  right: calc(var(--safe-r) + 22px); bottom: calc(var(--safe-b) + 30px);
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ember);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: none;
  transition: box-shadow 0.25s ease, color 0.25s ease;
}
#btn-flame.burning {
  color: #ffd9a8;
  box-shadow: 0 0 34px 6px rgba(255, 166, 92, 0.45), inset 0 0 18px rgba(255, 166, 92, 0.35);
}
/* 方向板指示点：随推动方向偏移 */
#pad-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px 2px rgba(242, 106, 61, 0.8);
  opacity: 0;
  pointer-events: none;
}

/* ---------- 左手视角摇杆（固定圆圈，与火焰按钮对称）---------- */
#btn-stick {
  position: absolute;
  left: calc(var(--safe-l) + 22px); bottom: calc(var(--safe-b) + 30px);
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: none;
  transition: box-shadow 0.25s ease;
}
#btn-stick.active {
  box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.15), inset 0 0 12px rgba(255, 255, 255, 0.08);
}
/* 黄色圆点：随推动方向偏移 */
#stick-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #f26a3d;
  box-shadow: 0 0 10px 2px rgba(242, 106, 61, 0.7);
  pointer-events: none;
  transition: transform 0.08s ease;
}

.toast {
  position: absolute;
  left: 50%; bottom: calc(var(--safe-b) + 118px);
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.toast.show { opacity: 1; }

/* ---------- 按钮 ---------- */
.pill-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}
.pill-btn:active { transform: scale(0.96); }
.pill-btn .ember {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px 3px rgba(242, 106, 61, 0.85);
  animation: emberPulse 2.6s ease-in-out infinite;
}
@keyframes emberPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* ---------- 欢迎页 = 操作说明 ---------- */
#welcome {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 6, 18, 0.85); /* 半透黑蒙层：下方两个真实按钮可见但不可点 */
  transition: opacity 1s ease;
}
#welcome.hidden { opacity: 0; pointer-events: none; }

.w-guide {
  position: absolute;
  top: calc(var(--safe-t) + 9%);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  text-align: center;
}
.g-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: 0.28em;
  color: #e8c87a;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.g-spark { font-size: 0.55em; opacity: 0.9; }
.g-sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(232, 200, 122, 0.65);
}
.g-sub::before, .g-sub::after {
  content: "—";
  margin: 0 10px;
  opacity: 0.5;
}
.g-cols {
  margin-top: 34px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.g-col { flex: 1; min-width: 0; }
/* 右栏说明文字：整块宽度=最长行，块内左对齐 —— 每行起始点与"长按火焰"垂直对齐 */
.g-col.right .g-items { display: inline-block; text-align: left; } /* 右栏文字说明左对齐 */
.g-divider {
  width: 1px;
  margin: 6px 20px;
  background: linear-gradient(to bottom, transparent, rgba(232, 200, 122, 0.45), transparent);
}
.g-col-title {
  font-size: 17px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #e8c87a;
}
.g-col-title::before, .g-col-title::after {
  content: "✦";
  font-size: 0.7em;
  margin: 0 8px;
  opacity: 0.7;
}
.g-icon {
  position: relative;
  width: 78px; height: 78px;
  margin: 66px auto 44px; /* 上间距=标题↔图标 66px；下间距=图标↔说明文字 44px */
  border-radius: 50%;
  color: var(--ember);
}
.g-icon.stick { border: 1.5px solid rgba(232, 200, 122, 0.6); }
.g-icon.flame { border: 1.5px solid rgba(232, 200, 122, 0.55); }
.g-icon .g-dot {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px 3px rgba(242, 106, 61, 0.8);
}
.g-icon.flame svg {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(242, 106, 61, 0.7));
}
.g-arr { position: absolute; font-size: 16px; color: #f26a3d; }
.g-arr.up { top: -26px; left: 50%; transform: translateX(-50%); }
.g-arr.down { bottom: -26px; left: 50%; transform: translateX(-50%); }
.g-arr.left { left: -26px; top: 50%; transform: translateY(-50%); }
.g-arr.right { right: -26px; top: 50%; transform: translateY(-50%); }
.g-item {
  font-size: 12px;
  line-height: 3.15; /* 行距 +50%（2.1→3.15），阅读更舒适 */
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.85;
}
.g-item::before {
  content: "✦";
  font-size: 0.65em;
  margin-right: 7px;
  color: rgba(232, 200, 122, 0.7);
}

/* "我知道了"：底部居中金色描边胶囊（在两个真实按钮之间） */
.gotit-btn {
  position: absolute;
  bottom: calc(var(--safe-b) + 36px);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 42px;
  border-radius: 999px;
  border: 1px solid rgba(232, 200, 122, 0.75);
  background: rgba(232, 200, 122, 0.08);
  color: #e8c87a;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.gotit-btn:active { transform: translateX(-50%) scale(0.94); background: rgba(232, 200, 122, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .pill-btn .ember { animation: none; }
}