/* ==========================================================================
   分页导航 + 底部标签栏
   ========================================================================== */

/* 页面容器：一次只显示一个 */
.page { display: none; }
.page.active { display: block; animation: pageIn .32s cubic-bezier(.34, 1.2, .64, 1); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 为固定标签栏留出底部空间 */
.app { padding-bottom: 84px; }

/* 首页第一个卡片收紧上边距 */
#page-home .card:first-of-type { margin-top: 12px; }

/* ---------------------- 顶栏（所有页面共用） ---------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 4px;
}
.topbar-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--pink-600);
  letter-spacing: .5px;
}

/* ---------------------- 首页紧凑化 ---------------------- */
/* 分页后首屏空间宝贵，压缩 Hero 的垂直占用 */
#page-home .hero { padding: 8px 0 4px; }
#page-home .melody { width: 96px; margin: 2px auto 0; }
#page-home .hero-title { font-size: 21px; }
#page-home .hero-date { font-size: 12.5px; }
#page-home .hero-progress { margin-top: 8px; }

/* 进度环缩小并横排文字，省一半高度 */
#page-home .progress-ring-wrap { width: 82px; height: 82px; }
#page-home .ring-label { font-size: 19px; }
#page-home .ring-label small { font-size: 11px; }
#page-home .ring-bg,
#page-home .ring-fg { stroke-width: 13; }
#page-home .progress-text { margin-top: 4px; font-size: 12.5px; }

/* Hero 内部改为「环 + 文案」一行布局 */
#page-home .hero-progress {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
#page-home .progress-text { margin-top: 0; max-width: 150px; text-align: left; line-height: 1.5; }

/* 首页卡片间距略收紧 */
#page-home .card { margin-top: 12px; }

/* ---------------------- 底部标签栏 ---------------------- */
.tabbar {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  display: flex;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-top: 1.5px solid var(--line);
  box-shadow: 0 -4px 20px rgba(255, 122, 179, .14);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 90;
}

.tab {
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px;
  border-radius: 14px;
  transition: background .2s, transform .16s;
  position: relative;
}
.tab:active { transform: scale(.92); }

.tab-icon {
  font-size: 21px;
  line-height: 1;
  transition: transform .22s cubic-bezier(.34, 1.6, .64, 1);
  filter: grayscale(.55) opacity(.6);
}
.tab-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-2);
  transition: color .2s;
}

.tab.active { background: var(--pink-50); }
.tab.active .tab-icon { transform: translateY(-2px) scale(1.12); filter: none; }
.tab.active .tab-label { color: var(--pink-600); }

/* 选中态顶部小圆点 */
.tab.active::before {
  content: '';
  position: absolute; top: 1px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  border-radius: 999px;
  background: var(--pink-400);
}

/* ---------------------- 页内二级切换（游戏） ---------------------- */
.game-tabs { position: sticky; top: 0; z-index: 5; }

/* ---------------------- 小屏适配 ---------------------- */
@media (max-width: 360px) {
  .tab-icon { font-size: 19px; }
  .tab-label { font-size: 10px; }
}

/* 大屏时标签栏跟随内容宽度居中 */
@media (min-width: 560px) {
  .tabbar { border-radius: 20px 20px 0 0; }
}