/* ============================================================
 * base.css —— 变量、重置、整体骨架、通用按钮
 * ============================================================ */

:root {
  --bg: #0b0c11;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-solid: #15171f;
  --line: rgba(255, 255, 255, 0.1);
  --txt: #eceef5;
  --dim: #98a0b4;
  --accent: #ff6b8b;
  --accent-2: #ffd678;
  --stage-bg: #0d0e13;
  --radius: 14px;
  --radius-sm: 10px;
  /* 用系统字体栈：不引入任何网络字体，离线也要能正常显示中文 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* hidden 属性必须赢过类选择器里的 display（例如 .overlay{display:flex}），
   否则元素 "隐藏" 了却还在屏幕上。全项目统一靠 hidden 属性做显隐。 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden; /* 整个应用是固定壳，内部区域各自滚动，避免游戏时页面跟着手指滑 */
  /* body 必须是 flex 列容器：否则 main 的高度是 auto，
     而 #stage-wrap 里只有绝对定位的画布 → 内容高度 0 → 舞台被算成 0 高、整块画布不可见。
     这一行是舞台能撑满剩余高度的前提。 */
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--txt);
  background: radial-gradient(1200px 800px at 50% -10%, #1b1d2b 0%, var(--bg) 60%);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }

/* ---------------- 顶部标题 ---------------- */

.topbar {
  flex: 0 0 auto;
  padding: 14px 20px 10px;
  text-align: center;
}

.topbar h1 {
  font-size: 22px;
  letter-spacing: 0.12em;
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar .slogan {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--dim);
}

.footer {
  flex: 0 0 auto;
  padding: 8px 16px 12px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(152, 160, 180, 0.7);
}

main {
  flex: 1 1 auto;
  min-height: 0; /* flex 子项默认 min-height:auto，会让内部 overflow 失效 */
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------------- 按钮 ---------------- */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, opacity 0.18s ease;
  min-height: 44px; /* 移动端可点区域下限 */
}

.btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn.primary {
  background: linear-gradient(94deg, var(--accent), #ff8f6b);
  border-color: transparent;
  color: #1a0d12;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(255, 107, 139, 0.28);
}

.btn.primary:hover:not(:disabled) {
  box-shadow: 0 10px 30px rgba(255, 107, 139, 0.4);
}

.btn.ghost { background: rgba(255, 255, 255, 0.03); }

.btn.small {
  font-size: 12.5px;
  padding: 7px 13px;
  min-height: 36px;
}

/* ---------------- 提示条 ---------------- */

.tip {
  min-height: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--accent-2);
  transition: opacity 0.2s ease;
}

.tip.error { color: #ff8b8b; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}