/* ============================================================
   晶体板风格 (Crystal Grid Style)
   方块式学科选择器，玻璃质感光泽，响应式排列
   配合 theme-switcher.js 使用
   ============================================================ */

/* ---- 主题切换按钮 ---- */
.theme-toggle-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-right: 4px;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 100, 0.3);
  background: rgba(28, 22, 18, 0.5);
  color: rgba(245, 230, 200, 0.6);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  transition: all 0.2s ease;
  line-height: 1;
}

.theme-toggle-btn:hover {
  border-color: rgba(212, 175, 100, 0.6);
  color: rgba(245, 230, 200, 0.9);
  background: rgba(28, 22, 18, 0.7);
}

.theme-toggle-btn.active {
  border-color: rgba(212, 175, 100, 0.7);
  background: rgba(212, 175, 100, 0.2);
  color: #f5e6c8;
  box-shadow: 0 0 12px rgba(212, 175, 100, 0.15);
}

.tt-icon {
  font-size: 1rem;
}

.tt-label {
  font-size: 0.75rem;
}

/* ---- 晶体板舞台 ---- */
.crystal-stage {
  display: none;
  width: 100%;
  padding: 8px 0;
}

body.theme-crystal .crystal-stage {
  display: block;
}

body.theme-crystal .circle-stage {
  display: none;
}

/* ---- 晶体网格容器 ---- */
.crystal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  width: 100%;
}


/* ---- 晶体卡片 ---- */
.crystal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 22px;
  border-radius: 16px;
  min-height: 140px;
  cursor: pointer;
  text-decoration: none;
  color: #f5e6c8;
  transition: all 0.25s ease;
  overflow: hidden;

  /* 液态玻璃效果 */
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.2),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.2),
    inset 6px -6px 1px -6px rgba(255, 255, 255, 0.1),
    inset -6px 6px 1px -6px rgba(255, 255, 255, 0.1),
    inset 0 0 2px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 液态玻璃边缘高光 */
.crystal-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.4);
  filter: blur(8px);
  pointer-events: none;
}

/* 液态玻璃表面反光 */
.crystal-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  filter: blur(3px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.2) 100%
  );
  pointer-events: none;
}

.crystal-card > * {
  position: relative;
  z-index: 3;
}

.crystal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 100, 0.5);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.25),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.25),
    inset 6px -6px 1px -6px rgba(255, 255, 255, 0.15),
    inset -6px 6px 1px -6px rgba(255, 255, 255, 0.15),
    inset 0 0 2px rgba(0, 0, 0, 0.6),
    0 14px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 175, 100, 0.1);
}

.crystal-card:active {
  transform: translateY(-1px);
}

/* 晶体卡片图标 */
.crystal-card-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 100, 0.3));
}

/* 晶体卡片标题 */
.crystal-card h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(255, 241, 255, 0.4);
}

/* 晶体卡片描述 */
.crystal-card p {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.8;
  text-align: center;
  line-height: 1.4;
}

/* 晶体卡片按钮 */
.crystal-card .magic-btn {
  margin-top: 10px;
  padding: 6px 18px;
  font-size: 0.85rem;
  transform: scale(0.95);
}

.crystal-card .magic-btn:hover {
  transform: scale(1);
}

/* 学科主题色（可选） */
.crystal-card[data-subject="chinese"] { --card-accent: rgba(255, 100, 100, 0.3); }
.crystal-card[data-subject="math"] { --card-accent: rgba(100, 150, 255, 0.3); }
.crystal-card[data-subject="english"] { --card-accent: rgba(255, 200, 50, 0.3); }
.crystal-card[data-subject="politics"] { --card-accent: rgba(200, 100, 255, 0.3); }
.crystal-card[data-subject="history"] { --card-accent: rgba(255, 150, 50, 0.3); }
.crystal-card[data-subject="geography"] { --card-accent: rgba(50, 200, 150, 0.3); }

.crystal-card[data-subject] {
  border-color: rgba(212, 175, 100, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* ---- 响应式 ---- */
@media (min-width: 900px) {
  .crystal-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 899px) and (min-width: 700px) {
  .crystal-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 699px) and (min-width: 480px) {
  .crystal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .crystal-card {
    min-height: 120px;
    padding: 22px 12px 18px;
  }
  .crystal-card-icon {
    font-size: 2rem;
  }
  .crystal-card h2 {
    font-size: 1rem;
  }
}

@media (max-width: 479px) {
  .crystal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .crystal-card {
    min-height: 100px;
    padding: 18px 10px 14px;
  }
  .crystal-card-icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
  }
  .crystal-card h2 {
    font-size: 0.95rem;
  }
  .crystal-card p {
    font-size: 0.75rem;
  }
}

@media (max-width: 320px) {
  .crystal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .crystal-card {
    min-height: 85px;
    padding: 14px 8px 10px;
  }
  .crystal-card-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }
  .crystal-card h2 {
    font-size: 0.85rem;
  }
  .crystal-card p {
    display: none;
  }
}

/* ---- 不支持 backdrop-filter 的降级 ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .crystal-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 12, 20, 0.85);
  }
}

/* ---- 魔法阵模式：移除玻璃效果 ---- */
body.theme-magic .glass-stage {
  filter: none;
}

body.theme-magic .glass-stage::before {
  display: none;
}

body.theme-magic .circle-stage .magic-circle-core {
  filter: drop-shadow(0 18px 36px rgba(15, 23, 42, 0.9));
}

/* 魔法阵模式下，学科卡片去掉玻璃效果 */
body.theme-magic .subject-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(219, 234, 254, 0.45);
}

body.theme-magic .subject-card::before,
body.theme-magic .subject-card::after {
  display: none;
}

/* 魔法阵模式下，header去掉玻璃效果 */
body.theme-magic .magic-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(15, 12, 20, 0.7);
}

body.theme-magic .magic-header::before,
body.theme-magic .magic-header::after {
  display: none;
}

/* 魔法阵模式下，welcome-panel去掉玻璃效果 */
body.theme-magic .welcome-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(15, 12, 20, 0.6);
  border: 1px solid rgba(244, 219, 255, 0.35);
}

body.theme-magic .welcome-panel::before,
body.theme-magic .welcome-panel::after {
  display: none;
}

/* 魔法阵模式下，所有二级页面方框去掉玻璃效果 */
body.theme-magic .review-section,
body.theme-magic .entry-section,
body.theme-magic .exam-card,
body.theme-magic .points-card,
body.theme-magic .shop-item,
body.theme-magic .task-item,
body.theme-magic .records-section,
body.theme-magic .user-card,
body.theme-magic .admin-section,
body.theme-magic .modal-card,
body.theme-magic .exam-form,
body.theme-magic .exam-item,
body.theme-magic .review-detail,
body.theme-magic .block-item,
body.theme-magic .modal-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 12, 20, 0.6) !important;
  border: 1px solid rgba(212, 175, 100, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ---- 晶体板模式下，二级菜单也使用玻璃效果 ---- */
body.theme-crystal .magic-header {
  /* 保留玻璃效果 */
}

/* 晶体板模式下，所有功能面板使用玻璃效果 */
body.theme-crystal .review-section,
body.theme-crystal .entry-section,
body.theme-crystal .exam-card,
body.theme-crystal .region-section,
body.theme-crystal .owner-tip,
body.theme-crystal .points-card,
body.theme-crystal .shop-item,
body.theme-crystal .task-item,
body.theme-crystal .tasks-card,
body.theme-crystal .records-section,
body.theme-crystal .user-card,
body.theme-crystal .admin-section,
body.theme-crystal .modal-card,
body.theme-crystal .exam-form,
body.theme-crystal .exam-item,
body.theme-crystal .review-detail,
body.theme-crystal .block-item,
body.theme-crystal .modal-box,
/* 英语页面 */
body.theme-crystal .subject-detail,
body.theme-crystal .english-item,
body.theme-crystal .english-checkin-form,
body.theme-crystal .english-checkin-item,
/* 学习圈 */
body.theme-crystal .study-circle-card,
body.theme-crystal .study-feed-item,
body.theme-crystal .study-feed-form,
/* 站长管理页面 */
body.theme-crystal .manage-section,
body.theme-crystal .manage-card,
body.theme-crystal .invite-card,
body.theme-crystal .upload-section,
body.theme-crystal .upload-card,
body.theme-crystal .verify-section,
body.theme-crystal .verify-card,
body.theme-crystal .quota-card,
body.theme-crystal .record-card,
body.theme-crystal .daily-card,
body.theme-crystal .user-manage-card,
body.theme-crystal .points-manage-card,
body.theme-crystal .exam-manage-card,
body.theme-crystal .question-manage-card,
body.theme-crystal .question-review-card,
body.theme-crystal .question-catalog-card,
/* 做题页面（金色玻璃效果在下方单独定义） */
/* 时间轴页面 */
body.theme-crystal .timeline-section,
body.theme-crystal .timeline-card,
body.theme-crystal .timeline-detail,
/* 回顾空间 */
body.theme-crystal .review-space-card,
body.theme-crystal .review-space-section,
body.theme-crystal .error-book-card,
body.theme-crystal .error-book-section {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.2),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.2),
    inset 0 0 2px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 语文/历史页面 - 晶体板模式下使用和主页 crystal-card 一样的玻璃效果（调暗白色） */
body.theme-crystal .history-intro,
body.theme-crystal .history-module,
body.theme-crystal .history-card {
  position: relative;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.15),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.15),
    inset 6px -6px 1px -6px rgba(255, 255, 255, 0.08),
    inset -6px 6px 1px -6px rgba(255, 255, 255, 0.08),
    inset 0 0 2px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* 边缘高光（和主页 crystal-card 一样） */
body.theme-crystal .history-intro::before,
body.theme-crystal .history-module::before,
body.theme-crystal .history-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.4);
  filter: blur(8px);
  pointer-events: none;
}

/* 表面反光（调暗版，和主页 crystal-card 一样但白色更淡） */
body.theme-crystal .history-intro::after,
body.theme-crystal .history-module::after,
body.theme-crystal .history-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  filter: blur(3px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
}

/* 确保内容在伪元素之上 */
body.theme-crystal .history-intro > *,
body.theme-crystal .history-module > *,
body.theme-crystal .history-card > * {
  position: relative;
  z-index: 3;
}

/* ===== 做题页面 - 金色玻璃效果 ===== */
body.theme-crystal .topic-select-panel,
body.theme-crystal .topic-card,
body.theme-crystal .exam-container,
body.theme-crystal .question-panel,
body.theme-crystal .answer-panel,
body.theme-crystal .review-panel,
body.theme-crystal .random-panel,
body.theme-crystal .exam-start-panel,
body.theme-crystal .exam-result-panel,
body.theme-crystal .comprehensive-panel,
body.theme-crystal .mock-panel,
body.theme-crystal .gaokao-panel,
body.theme-crystal .recite-panel,
body.theme-crystal .game-panel {
  position: relative;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(212, 175, 100, 0.03);
  border: 1px solid rgba(212, 175, 100, 0.15);
  box-shadow:
    inset 2px -2px 1px -1px rgba(212, 175, 100, 0.12),
    inset -2px 2px 1px -1px rgba(212, 175, 100, 0.12),
    inset 6px -6px 1px -6px rgba(212, 175, 100, 0.06),
    inset -6px 6px 1px -6px rgba(212, 175, 100, 0.06),
    inset 0 0 2px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* 金色边缘高光 */
body.theme-crystal .topic-select-panel::before,
body.theme-crystal .topic-card::before,
body.theme-crystal .exam-container::before,
body.theme-crystal .question-panel::before,
body.theme-crystal .answer-panel::before,
body.theme-crystal .review-panel::before,
body.theme-crystal .random-panel::before,
body.theme-crystal .exam-start-panel::before,
body.theme-crystal .exam-result-panel::before,
body.theme-crystal .comprehensive-panel::before,
body.theme-crystal .mock-panel::before,
body.theme-crystal .gaokao-panel::before,
body.theme-crystal .recite-panel::before,
body.theme-crystal .game-panel::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.4);
  filter: blur(8px);
  pointer-events: none;
}

/* 金色表面反光 */
body.theme-crystal .topic-select-panel::after,
body.theme-crystal .topic-card::after,
body.theme-crystal .exam-container::after,
body.theme-crystal .question-panel::after,
body.theme-crystal .answer-panel::after,
body.theme-crystal .review-panel::after,
body.theme-crystal .random-panel::after,
body.theme-crystal .exam-start-panel::after,
body.theme-crystal .exam-result-panel::after,
body.theme-crystal .comprehensive-panel::after,
body.theme-crystal .mock-panel::after,
body.theme-crystal .gaokao-panel::after,
body.theme-crystal .recite-panel::after,
body.theme-crystal .game-panel::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  filter: blur(3px);
  background: linear-gradient(
    135deg,
    rgba(212, 175, 100, 0.15) 0%,
    transparent 30%,
    transparent 70%,
    rgba(212, 175, 100, 0.08) 100%
  );
  pointer-events: none;
}

/* 确保内容在伪元素之上 */
body.theme-crystal .topic-select-panel > *,
body.theme-crystal .topic-card > *,
body.theme-crystal .exam-container > *,
body.theme-crystal .question-panel > *,
body.theme-crystal .answer-panel > *,
body.theme-crystal .review-panel > *,
body.theme-crystal .random-panel > *,
body.theme-crystal .exam-start-panel > *,
body.theme-crystal .exam-result-panel > *,
body.theme-crystal .comprehensive-panel > *,
body.theme-crystal .mock-panel > *,
body.theme-crystal .gaokao-panel > *,
body.theme-crystal .recite-panel > *,
body.theme-crystal .game-panel > * {
  position: relative;
  z-index: 3;
}

/* 晶体板模式下，gate卡片保留玻璃效果 */
body.theme-crystal .gate-card,
body.theme-crystal .login-card,
body.theme-crystal .invite-card {
  /* 保留原有玻璃效果 */
}

/* 晶体板模式下，gate模式按钮使用玻璃效果 */
body.theme-crystal .gate-mode-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}