/* ===== 精神避难所 v4 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #000;
  user-select: none; -webkit-user-select: none;
}

/* ===== 视图系统 ===== */
.view {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease;
}
.view.active { opacity: 1; pointer-events: auto; }

/* ===========================
   冥想视图 · 场景
   =========================== */
.scene {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.scene.active { opacity: 1; pointer-events: auto; }

/* 森林 */
.scene-forest {
  background-image: url('../images/forest.avif');
  background-size: cover; background-position: center;
}
.forest-layers { position: absolute; inset: 0; }
.forest-layer { position: absolute; bottom: 0; left: 0; right: 0; }
.layer-back {
  height: 40%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300'%3E%3Cpath d='M0 300 L0 150 Q80 80 160 120 Q240 60 320 100 Q400 40 480 90 Q560 50 640 100 Q720 60 800 120 L800 300 Z' fill='%230a1a0a'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 800px 300px; opacity: 0.6;
  animation: swayBack 18s ease-in-out infinite;
}
.layer-mid {
  height: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cpath d='M0 400 L0 200 Q60 140 120 170 Q200 80 280 140 Q360 60 440 120 Q520 70 600 130 Q680 80 760 140 L800 180 L800 400 Z' fill='%230d200d'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 1000px 400px; opacity: 0.7;
  animation: swayMid 14s ease-in-out infinite;
}
.layer-front {
  height: 70%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Cpath d='M0 500 L0 280 Q40 240 80 260 Q140 180 200 220 Q280 140 360 200 Q440 120 520 190 Q600 140 680 200 Q740 160 800 220 L800 500 Z' fill='%2312250e'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 1200px 500px; opacity: 0.8;
  animation: swayFront 10s ease-in-out infinite;
}
@keyframes swayBack  { 0%,100% { transform: translateX(0) scaleX(1); } 50% { transform: translateX(15px) scaleX(1.02); } }
@keyframes swayMid  { 0%,100% { transform: translateX(0) scaleX(1); } 50% { transform: translateX(-12px) scaleX(1.015); } }
@keyframes swayFront { 0%,100% { transform: translateX(0) scaleX(1); } 50% { transform: translateX(8px) scaleX(1.01); } }

.scene-forest .particles { position: absolute; inset: 0; }
.scene-forest .particle {
  position: absolute; width: 3px; height: 3px;
  background: #ccff88; border-radius: 50%;
  box-shadow: 0 0 8px #aaff66, 0 0 16px #88ff44;
  animation: firefly 8s ease-in-out infinite;
}
@keyframes firefly {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(30px, -60px); opacity: 0.9; }
  50%  { transform: translate(-20px, -140px); opacity: 0.5; }
  75%  { transform: translate(25px, -220px); opacity: 0.8; }
  90%  { opacity: 0.2; }
  100% { transform: translate(-10px, -300px); opacity: 0; }
}

/* 深海 */
.scene-ocean {
  background-image: url('../images/ocean.avif');
  background-size: cover; background-position: center;
}
.scene-ocean .light-ray {
  position: absolute; top: -15%; width: 3px;
  background: linear-gradient(180deg, rgba(120,190,255,0.1), rgba(120,190,255,0));
  animation: raySway 10s ease-in-out infinite;
}
@keyframes raySway {
  0%,100% { transform: rotate(-4deg) translateX(0); }
  50%     { transform: rotate(4deg) translateX(20px); }
}
.scene-ocean .bubble {
  position: absolute; border-radius: 50%;
  background: rgba(170,215,255,0.18);
  animation: riseBubble 12s ease-in infinite;
}
@keyframes riseBubble {
  0%   { transform: translateY(115vh) scale(0.5); opacity: 0; }
  15%  { opacity: 0.5; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}
.fish {
  position: absolute; z-index: 2; pointer-events: none;
  animation: swimAcross 18s linear forwards;
}
.fish-body {
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 16px solid rgba(140,190,220,0.45);
  position: relative;
}
.fish-body::after {
  content: ''; position: absolute; left: -22px; top: -2px;
  width: 8px; height: 4px; background: rgba(140,190,220,0.3);
  border-radius: 2px; transform: rotate(-10deg);
}
@keyframes swimAcross {
  0%   { transform: translateX(-100px); }
  100% { transform: translateX(calc(100vw + 200px)); }
}
.whale { position: absolute; z-index: 3; pointer-events: none; animation: whalePass 28s ease-in-out forwards; }
.whale-body {
  width: 180px; height: 60px;
  background: radial-gradient(ellipse at 30% 50%, rgba(80,120,160,0.4), rgba(30,50,80,0.25));
  border-radius: 50%; position: relative;
}
.whale-body::before {
  content: ''; position: absolute; top: -18px; right: 15px;
  width: 0; height: 0; border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 20px solid rgba(60,90,130,0.25);
}
.whale-body::after {
  content: ''; position: absolute; bottom: -22px; left: 50%;
  width: 30px; height: 25px; background: rgba(50,80,110,0.2);
  border-radius: 0 0 50% 50%;
}
@keyframes whalePass {
  0%   { transform: translateX(-250px) translateY(0); }
  40%  { transform: translateX(40vw) translateY(-30px); }
  60%  { transform: translateX(60vw) translateY(-10px); }
  100% { transform: translateX(calc(100vw + 280px)) translateY(-50px); }
}

/* 极光 */
.scene-stars {
  background-image: url('../images/aurora.avif');
  background-size: cover; background-position: center;
}
#auroraCanvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.starfield { position: absolute; inset: 0; z-index: 0; }
.scene-stars .star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
.mountains {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30%; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 100 L80 50 L160 90 L240 20 L320 70 L400 30 L480 80 L560 10 L640 60 L720 25 L800 70 L880 15 L960 55 L1040 30 L1120 75 L1200 40 L1200 200 Z' fill='%230a0a20'/%3E%3Cpath d='M0 200 L0 130 L100 80 L200 110 L300 60 L400 100 L500 50 L600 95 L700 55 L800 90 L900 40 L1000 85 L1100 60 L1200 80 L1200 200 Z' fill='%23151530'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: cover; pointer-events: none;
}

/* 雨夜 */
.scene-rain {
  background-image: url('../images/rain.avif');
  background-size: cover; background-position: center;
}
.rain-bg { position: absolute; inset: 0; overflow: hidden; }
.rain-bg .drop {
  position: absolute; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(160,180,200,0.2));
  animation: rainFall 1.2s linear infinite;
}
@keyframes rainFall {
  0% { transform: translateY(-10vh); opacity: 0; }
  15% { opacity: 0.5; }
  100% { transform: translateY(115vh); opacity: 0; }
}
.window-frame { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.window-mullion { position: absolute; background: rgba(10,10,18,0.5); }
.v-left  { left: 0; top: 0; bottom: 0; width: 3px; }
.v-right { right: 0; top: 0; bottom: 0; width: 3px; }
.h-mid   { left: 0; right: 0; top: 50%; height: 2px; }
.window-sill { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: rgba(10,10,18,0.55); }
.window-glass { position: absolute; inset: 0; }
.window-glass .glass-drop {
  position: absolute; border-radius: 50%;
  background: rgba(200,215,230,0.22);
  animation: glassDrip 2.5s ease-in forwards;
}
@keyframes glassDrip {
  0%   { transform: scale(0); opacity: 0.7; }
  20%  { transform: scale(1); opacity: 0.5; }
  80%  { transform: translateY(60px) scale(0.85); opacity: 0.3; }
  100% { transform: translateY(100px) scale(0.6); opacity: 0; }
}

/* 中央内容 */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.clock {
  font-size: 3.5rem; font-weight: 200;
  color: rgba(255,255,255,0.65); letter-spacing: 6px; margin-bottom: 4px;
}
.date-text {
  font-size: 0.9rem; color: rgba(255,255,255,0.3);
  letter-spacing: 3px; margin-bottom: 44px;
}
.quote {
  font-size: 1.2rem; color: rgba(255,255,255,0.5);
  letter-spacing: 3px; text-align: center;
  max-width: 340px; line-height: 2.2;
  transition: opacity 1.8s ease;
}
.breath-circle {
  margin-top: 52px; width: 64px; height: 64px;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform: scale(1); border-color: rgba(255,255,255,0.1); }
  50%     { transform: scale(1.6); border-color: rgba(255,255,255,0.3); }
}

/* 冥想场景切换 */
.scene-switcher {
  position: absolute; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 20; display: flex; gap: 10px;
}
.scene-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.4); font-size: 1.15rem;
  cursor: pointer; transition: all 0.35s;
  backdrop-filter: blur(10px);
}
.scene-btn:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.8); }
.scene-btn.active { border-color: rgba(255,255,255,0.45); color: #fff; background: rgba(255,255,255,0.1); }

/* ===========================
   忧郁视图
   =========================== */
.melancholy-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d1020 0%, #151a2e 30%, #1a1f35 60%, #0d1020 100%);
}
.melancholy-particles { position: absolute; inset: 0; }
.melancholy-particles .mp {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(180,190,210,0.3);
  border-radius: 50%;
  animation: mpFall 12s linear infinite;
}
@keyframes mpFall {
  0%   { transform: translateY(-5vh) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  100% { transform: translateY(105vh) translateX(20px); opacity: 0; }
}
.melancholy-quote {
  color: rgba(200,210,230,0.45) !important;
  font-style: italic;
}
.melancholy-circle {
  border-color: rgba(180,190,210,0.1) !important;
}

/* ===========================
   助眠故事视图
   =========================== */
.stories-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #060612 0%, #0c0c1e 50%, #080816 100%);
}
.stories-screen {
  position: absolute; inset: 0; z-index: 10;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.stories-screen.active { display: flex; }

.stories-title {
  font-size: 2rem; font-weight: 300;
  color: rgba(255,255,255,0.75); letter-spacing: 4px;
  margin-bottom: 6px;
}
.stories-subtitle {
  font-size: 0.95rem; color: rgba(255,255,255,0.35);
  letter-spacing: 2px; margin-bottom: 40px;
}

/* 主题卡片 */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; max-width: 500px; width: 100%;
}
.topic-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 28px 20px;
  text-align: center; cursor: pointer;
  transition: all 0.3s;
}
.topic-card:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
.topic-card .topic-icon { font-size: 2rem; margin-bottom: 10px; }
.topic-card .topic-name {
  color: rgba(255,255,255,0.7); font-size: 1rem;
  letter-spacing: 2px;
}
.topic-card .topic-count {
  color: rgba(255,255,255,0.3); font-size: 0.8rem; margin-top: 4px;
}

/* 故事列表 */
.back-btn {
  position: absolute; top: 24px; left: 24px;
  background: none; border: none;
  color: rgba(255,255,255,0.4); font-size: 1rem;
  cursor: pointer; letter-spacing: 1px; z-index: 5;
}
.back-btn:hover { color: rgba(255,255,255,0.7); }
.story-list { max-width: 420px; width: 100%; margin-top: 12px; }
.story-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 18px 20px;
  margin-bottom: 10px; cursor: pointer;
  transition: all 0.3s;
  display: flex; justify-content: space-between; align-items: center;
}
.story-item:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
}
.story-item .story-name {
  color: rgba(255,255,255,0.65); font-size: 0.95rem;
}
.story-item .story-dur {
  color: rgba(255,255,255,0.3); font-size: 0.8rem;
}

/* 播放器 */
.player-wrap {
  text-align: center; max-width: 360px; width: 100%;
}
.player-title {
  font-size: 1.4rem; font-weight: 300;
  color: rgba(255,255,255,0.7); letter-spacing: 2px;
  margin-bottom: 6px;
}
.player-time {
  font-size: 2.5rem; font-weight: 200;
  color: rgba(255,255,255,0.45); letter-spacing: 4px;
  margin-bottom: 24px; font-variant-numeric: tabular-nums;
}
.player-progress-wrap {
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px; margin-bottom: 28px;
}
.player-progress {
  height: 100%; width: 0%;
  background: rgba(255,255,255,0.4);
  border-radius: 1px; transition: width 0.3s linear;
}
.player-controls {
  display: flex; align-items: center;
  justify-content: center; gap: 28px;
  margin-bottom: 20px;
}
.player-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5); font-size: 1.1rem;
  cursor: pointer; transition: all 0.3s;
}
.player-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.player-btn-play {
  width: 56px; height: 56px; font-size: 1.3rem;
}
.player-volume {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; color: rgba(255,255,255,0.35); font-size: 0.85rem;
}
.player-volume input {
  -webkit-appearance: none; appearance: none;
  width: 100px; height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 1px; outline: none; cursor: pointer;
}
.player-volume input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.5); cursor: pointer;
}

/* ===========================
   控制器
   =========================== */
.controls {
  position: absolute; top: 20px; right: 20px;
  z-index: 30; display: flex; align-items: center; gap: 8px;
}
.ctrl-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.45); font-size: 1.05rem;
  cursor: pointer; transition: all 0.3s;
  backdrop-filter: blur(10px);
}
.ctrl-btn:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.8); }
.ctrl-btn.on { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.08); }
.volume-slider-wrap { display: none; }
.volume-slider-wrap.show { display: block; }
.volume-slider {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px; outline: none; cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,0.7); cursor: pointer;
}

/* ===========================
   底部 Tab 导航
   =========================== */
.tab-nav {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex; justify-content: center; gap: 0;
  padding: 10px 20px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}
.tab-btn {
  flex: 1; max-width: 120px;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 10px 0;
  background: none; border: none;
  color: rgba(255,255,255,0.3); cursor: pointer;
  transition: all 0.3s;
  border-radius: 10px;
}
.tab-btn:hover { color: rgba(255,255,255,0.55); }
.tab-btn.active { color: rgba(255,255,255,0.85); }
.tab-icon { font-size: 1.3rem; }
.tab-label { font-size: 0.75rem; letter-spacing: 2px; }

/* ===========================
   响应式
   =========================== */
@media (max-width: 600px) {
  .clock { font-size: 2.4rem; }
  .quote { font-size: 1rem; max-width: 260px; }
  .scene-btn { width: 38px; height: 38px; font-size: 0.95rem; }
  .whale-body { width: 120px; height: 40px; }
  .stories-title { font-size: 1.5rem; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .player-time { font-size: 2rem; }
  .tab-btn { max-width: 100px; }
}