/* ===== 全局重置 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  /* ✅ 1. 强制根节点为你的主题深紫色，消灭白边 */

  
  /* ✅ 2. 彻底禁用滚动，页面将完全固定 */
  overflow: hidden; 
  
  /* 禁用 iOS 网页自带的回弹效果 (橡皮筋效果) */
  overscroll-behavior: none; 
}

/* ===== 页面整体 ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* ✅ A. 确保 Body 撑满全屏，填充整个屏幕高度，钻进去状态栏下方 */
  height: 100%;
  min-height: 100vh;
  overflow: hidden;

  /* ❌ Body 不再加 safe-area 的 padding-top，让 body 背景自然流到最顶部 */
  /* padding-top: env(safe-area-inset-top); */
  padding-bottom: env(safe-area-inset-bottom);
}


/* ===== ✅ 内容容器 (核心优化点) ===== */

.content {
  /* 使用你提供的 App 布局 */
  min-height: 100vh;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* ✅ E. 修正避开 Header 的 Padding */
  /* 原 Header 50px + 60px padding = 内容离顶部 110px，太远了。 */
  /* 新 Header 高度 = 44px + 动态刘海高度。 */
  /* 内容只需要垫高一个基础 Header 高度 + 一点间距即可。 */
  padding-top: calc(44px + 20px); 
}

/* ===== 标题 (霓虹霓虹！) ===== */
.title {
  font-size: clamp(30px, 9vw, 64px);
  /* 使用你提供的亮粉色 */
  color: #ee607e; 
  text-align: center;
  margin-bottom: 100px;
  /* D. 优化霓虹光晕效果 */
  text-shadow: 0 0 10px rgba(255, 128, 179, 0.8), 
               0 0 20px rgba(255, 128, 179, 0.6), 
               0 0 30px rgba(255, 128, 179, 0.4);
  animation: heartbeat 1.5s infinite;
  font-weight: 900;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== 副标题 ===== */
.subtitle {
  font-size: clamp(14px, 4vw, 22px);
  /* 确保副标题也是亮色 */
  color: rgba(255, 255, 255, 0.85); 
  margin-bottom: 30px;
}

/* ===== ✅ 卡片 (霓虹风格) ===== */
.card {
  width: min(92vw, 500px);
  padding: 18px;
  border-radius: 20px;
  /* F. 修正卡片背景：深色霓虹主题下，卡片背景通常是纯色深紫或亮灰半透明 */
  background: rgba(30, 20, 40, 0.4); /* 深紫色半透明 */
  backdrop-filter: blur(10px);
  /* 使用原霓虹光晕边框 */
  border: 1px solid rgba(255, 128, 179, 0.3);
  text-align: center;
  /* 强化卡片发光效果 */
  box-shadow: 0 8px 32px rgba(255, 128, 179, 0.2); 
}

.card h2 {
  /* G. 修正卡片内标题颜色：亮色调 */
  color: #ffb3d9; 
  margin-bottom: 20px;
}

/* ===== 文本 ===== */
p {
  font-size: clamp(14px, 3.8vw, 18px);
  margin: 10px 0;
  line-height: 1.5;
  /* H. 修正段落文字颜色：深紫背景必须变亮 */
  color: white; 
}

.highlight {
  display: inline-flex;
  align-items: center;
}

/* ===== 数字动画 ===== */
.number {
  color: #e74c3c;
  margin: 0 4px;
  font-weight: bold;
  animation: breathing 2s infinite;
}

@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ===== 单行文字 ===== */
.nowrap-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 备注 ===== */
.note {
  margin-top: 20px;
  padding: 10px;
  font-size: 14px;
  font-style: italic;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  border-top: 1px dashed #ddd;
}

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  .card {
    padding: 14px;
  }
}


/* ============================================================== */
/* ✅ 针对“手机横屏”的终极优化（高度受限且为横屏时触发） */
/* max-height: 600px 覆盖了绝大多数主流手机的横屏高度 */
/* max-width: 1000px 防止影响到小尺寸 PC 浏览器或 iPad 横屏 */
/* ============================================================== */

@media screen and (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  html, body {
    overflow: hidden; 
  }

  .content {
    flex-direction: row; 
    justify-content: center;
    /* ✅ 缩小左右之间的空隙，腾出空间 */
    gap: 3vw; 
    align-items: center;
    padding-left: calc(env(safe-area-inset-left) + 20px);
    padding-right: calc(env(safe-area-inset-right) + 20px);
    padding-top: calc(env(safe-area-inset-top) + 10px);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .title-group {
    text-align: left; 
    /* ✅ 压缩左侧标题区的最大宽度，比如降到 35% */
    max-width: 35%; 
  }

  .title {
    font-size: clamp(24px, 4.5vw, 36px); 
    margin-bottom: 8px;
  }
  
  .subtitle {
    margin-bottom: 0; 
  }

  .card {
    /* ✅ 显著增加卡片在横屏时的占比 */
    width: 100%; 
    max-width: 66%;
    margin-top: 0; 
    padding: 14px; 
  }
}