/* ===== pages.css: 菜单 / 选关 / 设置 / 结算 / 排行 ===== */

.page {
  width: 100%;
  max-width: 520px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: pop-in 0.3s ease;
}

/* ----- 主菜单 ----- */
.menu-page { justify-content: center; min-height: 100vh; }
.menu-logo {
  width: 120px;
  height: 120px;
  animation: float-y 3s ease-in-out infinite;
}
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 280px;
}
.menu-buttons .btn { width: 100%; padding: 16px; font-size: 1.15rem; }

.menu-stats {
  display: flex;
  gap: 14px;
}
.menu-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.8);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
}
.menu-stat img { width: 22px; height: 22px; }

.credit {
  margin-top: 20px;
  font-size: 0.72rem;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}

/* ----- 关卡选择 ----- */
.page-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
}
.level-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s;
  border: 3px solid transparent;
}
.level-card:not(.locked):hover { transform: translateY(-4px); border-color: var(--yellow); }
.level-card .lv-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--pink-deep);
}
.level-card .lv-score { font-size: 0.85rem; color: var(--text-soft); margin-top: 4px; }
.level-card .lv-stars { margin-top: 8px; display: flex; justify-content: center; gap: 2px; }
.level-card .lv-stars img { width: 22px; height: 22px; }
.level-card .lv-stars img.off { filter: grayscale(1) opacity(0.4); }
.level-card.locked {
  background: #d8d0d5;
  cursor: not-allowed;
  opacity: 0.8;
}
.level-card.locked .lv-num { color: #8a7a82; }
.level-card.soon {
  background: #ece6ea;
  cursor: default;
}

/* ----- 设置 ----- */
.setting-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.setting-row {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.setting-row .s-label { font-weight: 700; }
.setting-row input[type="range"] { width: 140px; accent-color: var(--pink); }
.switch {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s;
}
.switch.on { background: var(--green); }
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.switch.on::after { left: 27px; }
.difficulty-group { display: flex; gap: 8px; }
.diff-btn {
  border: 2px solid #e2d3da;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: var(--text-soft);
}
.diff-btn.active { background: var(--pink); color: #fff; border-color: var(--pink-deep); }

/* ----- 结算 ----- */
.result-page { justify-content: center; min-height: 90vh; }
.result-title { font-size: 2.2rem; font-weight: 900; }
.result-title.win { color: var(--green); }
.result-title.lose { color: #f07575; }
.result-stars { display: flex; gap: 10px; justify-content: center; }
.result-stars img {
  width: 64px;
  height: 64px;
  filter: grayscale(1) opacity(0.4);
}
.result-stars img.lit {
  filter: none;
  animation: pop-in 0.5s ease;
}
.result-score {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--pink-deep);
}
.result-coins {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #e0a020;
}
.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 260px;
}
.result-buttons .btn { width: 100%; }

/* ----- 排行榜 ----- */
.rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.rank-table th {
  text-align: left;
  color: var(--text-soft);
  font-size: 0.85rem;
  padding: 4px 12px;
}
.rank-table td {
  background: #fff;
  padding: 12px;
  font-weight: 700;
}
.rank-table tr td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.rank-table tr td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.rank-table .stars-cell { display: flex; gap: 2px; }
.rank-table .stars-cell img { width: 20px; height: 20px; }
.rank-table .stars-cell img.off { filter: grayscale(1) opacity(0.4); }
.rank-summary {
  display: flex;
  gap: 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 800;
}

/* 响应式 */
@media (max-width: 480px) {
  :root { --cell: 42px; font-size: 14px; }
  .game-title { font-size: 2rem; }
  .level-grid { gap: 10px; }
}