/* 一屏化通用布局 + 黄色主题 · 2026-04-21
 * 目标：所有页面无需滚动，电脑 1280x800 + 平板 iPad 1024x768 都能一眼看全
 * 色系：哲哲喜欢黄色，整套 UI 以黄/橙暖色调为主，成功用绿、错误用柔和红
 */

/* ============ 全局色系变量（黄色主题）============ */
:root {
  --primary: #FFB300;         /* 主色 · 温暖黄（偏橙一点不刺眼）*/
  --primary-dark: #FF8F00;    /* 深黄 · hover / active */
  --primary-light: #FFD54F;   /* 亮黄 · 高亮 / 背景 */
  --secondary: #FF9800;       /* 辅色 · 橙 */
  --accent: #F57C00;          /* 强调 · 深橙按钮 */

  --success: #8BC34A;         /* 答对 · 清新绿 */
  --warning: #FFC107;         /* 警告 · 亮黄 */
  --danger: #FF7043;          /* 答错 · 柔和红（不刺眼）*/

  --text-primary: #5D4037;    /* 主文本 · 深棕（跟黄色搭更温暖）*/
  --text-secondary: #8D6E63;  /* 次文本 · 浅棕 */

  --bg-gradient: linear-gradient(135deg, #FFD54F 0%, #FFB74D 100%);  /* 背景渐变 · 金黄 → 暖橙 */
  --card-bg: #FFFFFF;
  --border-soft: rgba(255, 179, 0, 0.15);
}

/* 锁住视口高度，禁止外层滚动（小孩用避免误触滑动）
 * 2026-04-21：同时给 100vh (老浏览器) 和 100svh (iOS Safari 16.4+ 支持，减去动态地址栏/工具栏后的可视高)
 * 这样平板底部"听发音/跟读"按钮不会被 Safari 工具栏遮挡 */
html, body {
  height: 100vh;
  height: 100svh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;  /* 平板点击不高亮 */
  touch-action: manipulation;                /* 禁双击缩放 */
  -webkit-user-select: none;                 /* 禁文字选中，避免 Chrome 手机"搜索此文字"气泡 */
  user-select: none;
  -webkit-touch-callout: none;               /* 禁 iOS 长按弹链接菜单 */
}
/* 输入框仍允许文字操作 */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* 页面容器：垂直列，header + 可滚 content + footer */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}

/* 顶部区：固定高度，不因内容变化压缩 */
.page-header {
  flex-shrink: 0;
  padding: 10px 16px;
}

/* 内容主区：自动占据剩余空间；**只有这一块内部可滚**（所有页面的万能 fallback） */
.page-content {
  flex: 1 1 auto;
  min-height: 0;                              /* flex 子项允许压缩关键 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;          /* iOS 平滑滚动 */
  padding: 12px 16px;
}

/* 隐藏滚动条保持干净（需要时小孩还能滚） */
.page-content::-webkit-scrollbar {
  width: 6px;
}
.page-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* 底部工具栏：吸底固定，操作按钮放这 */
.page-footer,
.bottom-toolbar {
  flex-shrink: 0;
  padding: 10px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 分类 Tab 标签栏：一行横滑，不换行不挤 */
.tab-bar {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 6px 0;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar > * {
  flex-shrink: 0;                             /* 子项不压缩 */
}

/* 学习模块 2×2 网格（首页用） */
.module-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 100%;
}

/* 紧凑卡片：默认 padding 缩小，给小孩大字还省空间 */
.compact-card {
  padding: 14px 16px;
  border-radius: 12px;
}

/* 答对答错反馈动画（全系统复用） */
@keyframes correct-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes star-float {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  20%  { transform: translateY(-10px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-80px) scale(0.6); opacity: 0; }
}
.fx-correct { animation: correct-pop 0.4s ease-out; }
.fx-wrong   { animation: wrong-shake 0.4s ease-in-out; }
.fx-star    { position: absolute; font-size: 32px; animation: star-float 1s ease-out forwards; pointer-events: none; }

/* 小朋友友好字号：顶部标题 + 分类 Tab + 底部按钮统一加大，便于 iPad 触摸 */
.top-bar h1 {
  font-size: 1.5rem !important;         /* 从 1.2 加大到 1.5 */
  font-weight: 900 !important;
}
.top-bar .back {
  font-size: 1rem !important;           /* 返回按钮加大 */
  padding: 7px 16px !important;
}
.top-bar .subtitle {
  font-size: 0.9rem !important;
}
.category-tab,
.sub-tab {
  font-size: 1rem !important;
  padding: 7px 16px !important;
  min-height: 38px;
}
.mode-switch button {
  font-size: 0.95rem !important;
  padding: 6px 16px !important;
}
.bottom-toolbar .btn,
.page-footer .btn {
  font-size: 1.1rem !important;
  padding: 12px 26px !important;
  font-weight: 800 !important;
  min-height: 50px;                     /* 触控区 ≥48px 符合移动端规范 */
}

/* 响应式断点 1：iPad 横屏（可视高 ≈ 688px，刨地址栏后的实际值） */
@media (max-height: 820px) {
  .page-header { padding: 6px 12px; }
  .page-content { padding: 8px 12px; }
  .compact-card { padding: 10px 12px; }
  .page-footer,
  .bottom-toolbar { padding: 8px 12px; }
  .top-bar h1 { font-size: 1.3rem !important; }
  .top-bar .back { font-size: 0.95rem !important; padding: 6px 14px !important; }
  .category-tab,
  .sub-tab { font-size: 0.92rem !important; padding: 6px 14px !important; min-height: 34px; }
  .bottom-toolbar .btn,
  .page-footer .btn {
    font-size: 1.02rem !important;
    padding: 10px 22px !important;
    min-height: 46px;
  }
}

/* 响应式断点 2：手机竖屏（≤500 宽） - 2026-04-21 */
@media (max-width: 500px) {
  .page-header { padding: 6px 10px; }
  .page-content { padding: 8px 10px; }
  .page-footer,
  .bottom-toolbar { padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
  .top-bar h1 { font-size: 1.15rem !important; }
  .top-bar .back {
    font-size: 0.85rem !important;
    padding: 5px 10px !important;
  }
  .top-bar .subtitle { display: none !important; }  /* 手机窄，副标题藏 */
  .category-tab,
  .sub-tab {
    font-size: 0.88rem !important;
    padding: 6px 12px !important;
    min-height: 34px;
  }
  .bottom-toolbar .btn,
  .page-footer .btn {
    font-size: 0.95rem !important;
    padding: 9px 14px !important;
    min-height: 44px;
    flex: 1 1 auto;                     /* 按钮平分宽度 */
  }
}

/* 响应式断点 3：手机横屏 / 超矮屏 */
@media (max-height: 500px) {
  .page-header { padding: 4px 10px; }
  .page-content { padding: 6px 10px; }
  .page-footer,
  .bottom-toolbar { padding: 4px 10px; gap: 6px; }
  .top-bar h1 { font-size: 1rem !important; }
  .bottom-toolbar .btn,
  .page-footer .btn { font-size: 0.9rem !important; padding: 6px 14px !important; min-height: 38px; }
}