/* ===== 学习阶段切换抽屉（趣味 Tab + 设置页共用）=====
 * 设计：从底部滑入，含小鹿坐车动画区 + 年级/学科选择
 */

/* 抽屉遮罩：复用 modal-overlay 风格，独立 z-index */
.switch-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.switch-drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* 抽屉卡片 */
.switch-drawer {
  width: 100%;
  max-width: var(--gc-container-width);
  background: var(--gc-background);
  border-radius: 24px 24px 0 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.switch-drawer-overlay.show .switch-drawer {
  transform: translateY(0);
}

/* 抽屉头部：抓手 + 标题 + 关闭 */
.switch-drawer-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--gc-muted);
  margin: 0 auto 8px;
  opacity: 0.6;
}
.switch-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.switch-drawer-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--gc-foreground);
  display: flex;
  align-items: center;
  gap: 6px;
}
.switch-drawer-title i {
  width: 18px;
  height: 18px;
  color: var(--gc-primary);
}

/* ===== 小鹿坐车动画区 ===== */
.deer-car-stage {
  position: relative;
  height: 84px;
  margin: 8px 0 12px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #E8F4FF 0%, #FFF8E1 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}
/* 太阳 */
.deer-car-sun {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD166 0%, #FFA94D 100%);
  box-shadow: 0 0 12px rgba(255,209,102,0.6);
}
/* 草地 */
.deer-car-grass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(180deg, #9ED7A8 0%, #7FC58C 100%);
  border-radius: 0 0 16px 16px;
}
/* 小鹿 + 车容器 */
.deer-car {
  position: relative;
  width: 96px;
  height: 64px;
  z-index: 2;
}
/* 车身 */
.deer-car-body {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, #FF8A8A 0%, #F48FB1 100%);
  border-radius: 14px 14px 8px 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border: 2px solid rgba(255,255,255,0.6);
}
/* 车窗（小鹿坐的位置） */
.deer-car-window {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 28px;
  background: linear-gradient(180deg, #BBDEFB 0%, #E3F2FD 100%);
  border-radius: 14px 14px 4px 4px;
  border: 2px solid rgba(255,255,255,0.7);
  border-bottom: none;
}
/* 小鹿 */
.deer-car-deer {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
/* 车轮 */
.deer-car-wheel {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #555 0%, #222 100%);
  border: 2px solid #BBB;
  box-shadow: inset 0 0 3px rgba(255,255,255,0.3);
}
.deer-car-wheel.left { left: 12px; }
.deer-car-wheel.right { right: 12px; }
/* 车轮旋转（动画时触发） */
.deer-car.wobble .deer-car-wheel {
  animation: wheel-spin 0.5s linear infinite;
}
@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 小鹿坐车整体左右晃动 */
.deer-car.wobble {
  animation: deer-car-wobble 0.6s ease-in-out;
  transform-origin: center bottom;
}
@keyframes deer-car-wobble {
  0%   { transform: translateX(-30px) rotate(-4deg); }
  20%  { transform: translateX(18px)  rotate(4deg); }
  40%  { transform: translateX(-12px) rotate(-3deg); }
  60%  { transform: translateX(8px)   rotate(2deg); }
  80%  { transform: translateX(-4px)  rotate(-1deg); }
  100% { transform: translateX(0)     rotate(0); }
}
/* 小鹿头部点头 */
.deer-car.wobble .deer-car-deer {
  animation: deer-head-bob 0.6s ease-in-out;
}
@keyframes deer-head-bob {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-50%) rotate(-6deg); }
  70% { transform: translateX(-50%) rotate(4deg); }
}

/* ===== 年级选择行（紧凑版）===== */
.drawer-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gc-muted-foreground);
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.drawer-section-label i {
  width: 14px;
  height: 14px;
}
.drawer-grade-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.drawer-grade-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: 8px;
  background: var(--gc-card);
  border: 2px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.drawer-grade-btn:active { transform: scale(0.96); }
.drawer-grade-btn.active {
  background: linear-gradient(160deg, #4F8CFF 0%, #6366F1 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(79,140,255,0.35);
}
.drawer-grade-icon {
  font-size: 24px;
  line-height: 1;
}
.drawer-grade-name {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}
.drawer-grade-btn.active .drawer-grade-name { opacity: 1; }

/* ===== 学科选择行 ===== */
.drawer-subject-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.drawer-subject-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 8px;
  background: var(--gc-card);
  border: 2px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.drawer-subject-btn:active { transform: scale(0.96); }
.drawer-subject-btn.active {
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.drawer-subject-btn.active[data-subject="math"]    { background: linear-gradient(160deg, #4F8CFF, #3B6FD9); }
.drawer-subject-btn.active[data-subject="chinese"] { background: linear-gradient(160deg, #FF6B6B, #E85555); }
.drawer-subject-btn.active[data-subject="english"] { background: linear-gradient(160deg, #FFB347, #F59E0B); }

.drawer-subject-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer-subject-btn.active .drawer-subject-icon {
  background: rgba(255,255,255,0.25);
}
.drawer-subject-icon i { width: 22px; height: 22px; }
.drawer-subject-info { flex: 1; min-width: 0; width: 100%; }
.drawer-subject-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.drawer-subject-sub {
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.2;
  margin-top: 2px;
}

/* 当前选中提示 */
.drawer-current-hint {
  font-size: 12px;
  color: var(--gc-muted-foreground);
  text-align: center;
  margin: 4px 0 10px;
  padding: 6px 10px;
  background: var(--gc-muted);
  border-radius: 10px;
}
.drawer-current-hint b { color: var(--gc-primary); font-weight: 800; }

/* ===== 趣味 Tab 顶部紧凑学习状态条 ===== */
.fun-stage-bar {
  margin: 4px 16px 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--gc-card);
  box-shadow: var(--gc-shadow-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.fun-stage-bar:active { transform: scale(0.98); }
.fun-stage-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(79,140,255,0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.fun-stage-bar:active::before { transform: translateX(100%); }

.fun-stage-deer {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  flex-shrink: 0;
}
.fun-stage-info { flex: 1; min-width: 0; }
.fun-stage-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-muted-foreground);
  margin-bottom: 2px;
}
.fun-stage-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--gc-foreground);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fun-stage-value .stage-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gc-muted);
}
.fun-stage-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(79,140,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gc-primary);
  transition: transform 0.2s;
}
.fun-stage-bar:active .fun-stage-arrow { transform: rotate(180deg); }
.fun-stage-arrow i { width: 16px; height: 16px; }

/* 切换时状态条晃动反馈 */
.fun-stage-bar.shake {
  animation: stage-bar-shake 0.5s ease-in-out;
}
@keyframes stage-bar-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ===== 设置页"学习阶段"入口 ===== */
.setting-row.stage-entry {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(79,140,255,0.06), rgba(99,102,241,0.04));
  border: 1.5px solid rgba(79,140,255,0.15);
}
.setting-row.stage-entry:active { transform: scale(0.98); }
.stage-entry-current {
  font-size: 12px;
  font-weight: 700;
  color: var(--gc-primary);
  background: rgba(79,140,255,0.1);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}