/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; font-size: 20px;}
#gametitle{
  font-size: 48px; 
  line-height: 1;
  padding: 2rem 1rem;
  color: #ffffff;
  text-align: center;
  
}
#p1{
  color: #ffffff;
  text-align: center;
}
#footer-links{
  /* 设置背景色渐变 */
  background: linear-gradient(to bottom, #365f4e, #3d5047);
  /* background: linear-gradient(160deg, #e8f5e9 0%, #f0f4c3 100%); */
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-family:'Noto Sans SC', sans-serif;

}
body,html {
  width:100%; height:100%;
  background:#E8F5E9;
  font-family:"Comic Sans MS",cursive;
  color:#333;
}
h2,h3 { color:#2E7D32; }

/* ---- 生态游戏布局 ---- */
.game-container {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:20px;
  max-width:1400px;
  margin:20px auto;
  padding:0 20px;
}
@media(max-width:767px){ .game-container{grid-template-columns:1fr;} }

.info-panel {
  background: linear-gradient(160deg, #e8f5e9 0%, #f0f4c3 100%);
  border-radius:20px;
  box-shadow:0 6px 12px rgba(0,0,0,0.1);
}
.panel-title {
  text-align: center;
  background:#A5D6A7;
  padding:16px;
  font-size:1.5rem;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}
.panel-content { padding:16px; }
.reset-btn,.hint-btn {
  width:100%; padding:12px; margin-top:16px;
  border:none; border-radius:25px;
  font-size:1rem; cursor:pointer;
  transition:transform .2s;
}
.reset-btn { background:#A5D6A7; color:#2e7d32;font-family:'Comic Sans MS', Courier;font-size: 1.2rem;
    /* 加粗 */
    font-weight: bold;
}
.reset-btn:hover{transform:scale(1.05);background:#FF7043;}
.hint-btn { background:#FF8A65; color:#fff; }
.hint-btn:hover{transform:scale(1.05);background:#FF7043;}

.game-main{display:grid;gap:20px;}
.habitat-zone {
  position:relative;
  height:60vh; min-height:400px;
  border:4px solid #4CAF50;
  border-radius:20px;
  background:linear-gradient(to bottom,#81D4FA 30%,#FFCC80 70%);
  overflow:hidden;
}
.zone-overlay{position:absolute;width:100%;height:100%;pointer-events:none;}
.zone-line {
  position:absolute;left:0;width:100%;
  border-top:1px dashed #FFFFFFAA;
  display:flex;align-items:center;
}
.zone-line span {
  background:#FFFFFFCC;
  padding:2px 8px;
  font-size:0.9rem;
  margin-left:8px;
  border-radius:4px;
}

.animal-pool {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:15px;
  padding:15px;
  background: linear-gradient(160deg, #e8f5e9 0%, #f0f4c3 100%);
  border-radius: 20px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 奖励面板 */
.reward-board {
  position:fixed;bottom:20px;right:20px;
  background:#FFFFFFDD; padding:15px;
  border-radius:10px;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
}
.reward-title{font-size:1.2rem;}


.mangrove-puzzle {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
  background: linear-gradient(160deg, #e8f5e9 0%, #f0f4c3 100%);
  border-radius: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.sidebar {
  flex: 0 0 280px;
  background: linear-gradient(145deg, #E8F5E9 0%, #F1F8E9 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: inset 0 0 10px rgba(165,214,167,0.2);
}
.sidebar img {
  width:100%;
  border:1px solid #A5D6A7;
  border-radius:8px;
  object-fit:cover;
}
#info-content {
  background: #FFF;
  padding: 18px;
  border: 2px dashed #4CAF50;
  border-radius: 8px;
  color: #2E7D32;
  font-size: 23px;
  line-height: 1.6;
  margin-top: 20px;
}
.puzzle-area {
  flex: 1;
  display: flex;
  /* flex-direction: column; */
  gap: 25px;
}
.puzzle-grid,
.piece-pool {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  width:100%;max-width:400px;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:8px;
}
.puzzle-grid{background:#A5D6A7;padding:2px;margin: auto; width: 420px;}
.piece-pool{background:#E0F2F1;padding:2px;margin: auto; width: 420px;}

.puzzle-cell {
  background:#C8E6C9;
  border:1px dashed #A5D6A7;
}
.puzzle-cell.filled{border-color:#4CAF50;}

.puzzle-piece {
  background-repeat:no-repeat;
  background-size:400px 400px;
  border:1px solid #FFF;
  border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  cursor:grab;
  width:100px; height:100px;
}
.puzzle-piece.dragging{opacity:0.6;}
/* 响应式布局 */
@media (max-width: 768px) {
  .mangrove-puzzle {
    flex-direction: column;
    padding: 20px;
  }
  
  .sidebar {
    flex: none;
    width: 100%;
  }
  
  .puzzle-grid, .piece-pool {
    max-width: 100%;
  }
  .puzzle-area {
    flex-direction: column;
  }
}
/* 弹窗 & 动画 */
.quiz-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:3000;}
.hidden{display:none;}
@keyframes happyJump{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}100%{transform:translateX(0)}}
.info-popup {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  z-index: 9999;
  animation: fadein 0.3s ease, fadeout 0.3s ease 2.7s;
}

/* 动画可选 */
@keyframes fadein {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeout {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ===== 生态生物池 样式 ===== */
#animal-pool .puzzle-piece {
  width: 100%;
  aspect-ratio: 1;
  max-width: 140px;
  margin: 0 auto;
  background: #FFFDE7;
  border: 4px solid #FFF;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: grab;
  transition: transform 0.3s;
}
#animal-pool .puzzle-piece:hover {
  transform: scale(1.07);
}
#animal-pool .puzzle-piece.dragging {
  z-index: 9999 !important;
  opacity: 0.6;
}
#animal-pool .puzzle-piece.correct {
  animation: happyJump 0.6s;
  border-color: #4CAF50 !important;
  box-shadow: 0 0 20px #4CAF50;
}
#animal-pool .puzzle-piece.wrong {
  animation: shake 0.6s;
  border-color: #FF5722 !important;
}

/* ===== 问答弹窗 样式 ===== */
.quiz-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}
.quiz-modal.hidden {
  display: none;
}

.quiz-content {
  background: #FFF;
  padding: 24px;
  border-radius: 16px;
  max-width: 90%;
  width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  text-align: center;
  animation: happyJump 0.4s ease-out;
}
.quiz-content h3 {
  margin-bottom: 16px;
  font-size: 1.25rem;
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.quiz-option-btn {
  padding: 12px;
  background: #81D4FA;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.1s;
}
.quiz-option-btn:hover {
  transform: scale(1.05);
  background: #4FC3F7;
}
.quiz-option-btn.correct {
  background: #A5D6A7;
}
.quiz-option-btn.wrong {
  background: #FFAB91;
  color: #333;
}
.quiz-close {
  padding: 10px 20px;
  background: #FF8A65;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.quiz-close:hover {
  background: #FF7043;
}
/* 让放到主区域（habitat-zone）里的生物也保留美观样式 */
.habitat-zone .puzzle-piece,
#animal-pool .puzzle-piece {
  width: 100%;
  aspect-ratio: 1;
  max-width: 140px;
  margin: 0 auto;
  background: #FFFDE7;
  border: 4px solid #FFF;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: grab;
  transition: transform 0.3s;
}
.habitat-zone .puzzle-piece:hover,
#animal-pool .puzzle-piece:hover {
  transform: scale(1.07);
}
.habitat-zone .puzzle-piece.dragging,
#animal-pool .puzzle-piece.dragging {
  z-index: 9999 !important;
  opacity: 0.6;
}
.habitat-zone .puzzle-piece.correct,
#animal-pool .puzzle-piece.correct {
  animation: happyJump 0.6s;
  border-color: #4CAF50 !important;
  box-shadow: 0 0 20px #4CAF50;
}
.habitat-zone .puzzle-piece.wrong,
#animal-pool .puzzle-piece.wrong {
  animation: shake 0.6s;
  border-color: #FF5722 !important;
}


/* ===== 动画关键帧（如无请一并添加） =====*/
@keyframes happyJump {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-12px); }
  75%  { transform: translateX(12px); }
  100% { transform: translateX(0); }
} 
section.eco-journal {
      max-width: 1200px;
      margin: 40px auto;
      padding: 30px 40px;
      background: linear-gradient(160deg, #e8f5e9 0%, #f0f4c3 100%);
      border-radius: 20px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    /* 标题样式 */
    .eco-journal header {
      text-align: center;
      margin-bottom: 30px;
    }
    .eco-journal header h2 {
      font-size: 2.4rem;
      color: #2e7d32;
      margin-bottom: 12px;
      text-shadow: 2px 2px 4px rgba(46,125,50,0.1);
    }
    .eco-journal header p {
      font-size: 1.1rem;
      line-height: 1.7;
      color: #4a6855;
      max-width: 600px;
      margin: 0 auto;
    }

    /* 内容布局 */
    .eco-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    /* ===== 原始书本结构 ===== */
    /* 左侧：绘本展示 */
    .eco-content .storybook {
      position: relative;
      perspective: 630px;
      width: 100%;
      max-width: 420px;
      margin: -100px auto 0; 
      transform-style: preserve-3d;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
    }
    .eco-content .storybook .title {
      position: absolute;
      top: -50px; left: 50%;
      transform: translateX(-50%);
      font-size: 1.4rem; color: #00695c;
    }
    /* 保留原有翻书样式 */
    .storybook .book    { position: relative; width:210px; height:300px; margin:0 auto; }
    .pages, .flips      { transform-style: preserve-3d; }
    /* 预加载图片 */
        .imgLoader {
            position: fixed;
            animation: preLoad 1s steps(1);
            width: 0;
            height: 0;
        }

        @keyframes preLoad {
            0% {
                background-image: url("../img/1.jpg");
            }

            10% {
                background-image: url("../img/2.jpg");
            }

            20% {
                background-image: url("../img/3.webp");
            }

            30% {
                background-image: url("../img/4.webp");
            }

            40% {
                background-image: url("../img/5.webp");
            }

            100% {
                display: none;
            }
        }

        .container {
            position: relative;
            width: 780px;
            height: 780px;
        }

        .book {
            position: relative;
            perspective: 630px;
            perspective-origin: center -100px;
            transform: scale(1.4);
            filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.25));
        }

        .page {
            width: 210px;
            height: 300px;
            background-color: #f5f5f5;
            position: absolute;
            top: 0px;
            right: 50%;
            transform-origin: 100% 100%;
            border: solid #ddd 1px;
            background-size: 420px 300px;
            background-position: center;
            transform-style: preserve-3d;
        }

        .page:nth-child(1) {
            transform: rotateX(60deg) rotateY(3deg);
        }

        .page:nth-child(2) {
            transform: rotateX(60deg) rotateY(4.5deg);
        }

        .page:nth-child(3) {
            transform: rotateX(60deg) rotateY(6deg);
            animation: nextPage 25s infinite -24s steps(1);
            background-size: 420px 300px;
            background-position: -2px -2px;
        }

        .page:nth-child(4) {
            transform: rotateX(60deg) rotateY(177deg);
        }

        .page:nth-child(5) {
            transform: rotateX(60deg) rotateY(175.5deg);
        }

        .page:nth-child(6) {
            transform: rotateX(60deg) rotateY(174deg);
            overflow: hidden;
        }

        .page:nth-child(6)::after {
            content: "";
            width: 210px;
            height: 300px;
            position: absolute;
            top: 0px;
            right: 0%;
            transform-origin: center;
            transform: rotateY(180deg);
            animation: nextPage 25s -20s infinite steps(1);
            background-size: 420px 300px;
            background-position: 100% -2px;
        }

        @keyframes nextPage {
            0% {
                background-image: url("../img/1.jpg");
            }

            20% {
                background-image: url("../img/2.jpg");
            }

            40% {
                background-image: url("../img/3.webp");
            }

            60% {
                background-image: url("../img/4.webp");
            }

            80% {
                background-image: url("../img/5.webp");
            }
        }

        .gap {
            width: 10px;
            height: 300px;
            background: none;
            transform: rotateX(60deg);
            transform-origin: bottom;
            position: absolute;
            top: 0px;
            left: calc(50% - 5px);
        }

        .gap::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%);
            background-color: #555;
            width: 10px;
            height: 5px;
            border-radius: 50%;
        }

        .pages,
        .flips {
            transform-style: preserve-3d;
        }

        .flip {
            width: 32px;
            height: 300px;
            position: absolute;
            top: 0px;
            transform-origin: 100% 100%;
            right: 100%;
            border: solid #ddd;
            border-width: 1px 0px;
            perspective: 4200px;
            perspective-origin: center;
            transform-style: preserve-3d;
            background-size: 420px 300px;
        }

        .flip::after {
            content: "";
            position: absolute;
            top: 0px;
            right: 0%;
            width: 100%;
            height: 100%;
            transform-origin: center;
            background-size: 420px 300px;
        }

        .flip.flip1 {
            right: 50%;
            animation: flip1 5s infinite ease-in-out;
            border-width: 2px 2px 2px 0;
        }

        .flip.flip1::after {
            animation: nextFlip1 25s -20s infinite steps(1);
        }

        .flip:not(.flip1) {
            right: calc(100% - 2px);
            top: -2px;
            transform-origin: right;
            animation: flip2 5s ease-in-out infinite;
        }

        .flip.flip2::after {
            animation: nextFlip2 25s -20s infinite steps(1);
        }

        .flip.flip3::after {
            animation: nextFlip3 25s -20s infinite steps(1);
        }

        .flip.flip4::after {
            animation: nextFlip4 25s -20s infinite steps(1);
        }

        .flip.flip5::after {
            animation: nextFlip5 25s -20s infinite steps(1);
        }

        .flip.flip6::after {
            animation: nextFlip6 25s -20s infinite steps(1);
        }

        .flip.flip7::after {
            animation: nextFlip7 25s -20s infinite steps(1);
        }

        .flip.flip7 {
            width: 30px;
            border-width: 2px 0px 2px 2px;
        }

        .flip.flip7::after {
            animation: nextFlip7 25s -20s infinite steps(1);
        }

        @keyframes flip1 {

            0%,
            20% {
                transform: rotateX(60deg) rotateY(6deg);
            }

            80%,
            100% {
                transform: rotateX(60deg) rotateY(174deg);
            }
        }

        @keyframes flip2 {

            0%,
            20% {
                transform: rotateY(0deg) translateY(0px);
            }

            50% {
                transform: rotateY(-15deg) translateY(0px);
            }
        }

        @keyframes nextFlip1 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            10% {
                background-image: url("../img/2.jpg");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            30% {
                background-image: url("../img/3.webp");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            50% {
                background-image: url("../img/4.webp");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            70% {
                background-image: url("../img/5.webp");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            90% {
                background-image: url("../img/1.jpg");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip2 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            10.5% {
                background-image: url("../img/2.jpg");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            30.5% {
                background-image: url("../img/3.webp");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            50.5% {
                background-image: url("../img/4.webp");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            70.5% {
                background-image: url("../img/5.webp");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            90.5% {
                background-image: url("../img/1.jpg");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip3 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            11% {
                background-image: url("../img/2.jpg");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            31% {
                background-image: url("../img/3.webp");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            51% {
                background-image: url("../img/4.webp");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            71% {
                background-image: url("../img/5.webp");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            91% {
                background-image: url("../img/1.jpg");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip4 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            11.5% {
                background-image: url("../img/2.jpg");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            31.5% {
                background-image: url("../img/3.webp");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            51.5% {
                background-image: url("../img/4.webp");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            71.5% {
                background-image: url("../img/5.webp");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            91.5% {
                background-image: url("../img/1.jpg");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip5 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            12% {
                background-image: url("../img/2.jpg");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            32% {
                background-image: url("../img/3.webp");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            52% {
                background-image: url("../img/4.webp");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            72% {
                background-image: url("../img/5.webp");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            92% {
                background-image: url("../img/1.jpg");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip6 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            12.5% {
                background-image: url("../img/2.jpg");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            32.5% {
                background-image: url("../img/3.webp");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            52.5% {
                background-image: url("../img/4.webp");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            72.5% {
                background-image: url("../img/5.webp");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            92.5% {
                background-image: url("../img/1.jpg");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip7 {
            0% {
                background-image: url("../img/1.jpg");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            13% {
                background-image: url("../img/2.jpg");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("../img/2.jpg");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            33% {
                background-image: url("../img/3.webp");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("../img/3.webp");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            53% {
                background-image: url("../img/4.webp");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("../img/4.webp");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            73% {
                background-image: url("../img/5.webp");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("../img/5.webp");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            93% {
                background-image: url("../img/1.jpg");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }
        }
    /* 右侧：科普内容 */
    .eco-content aside {
      display:flex; flex-direction:column; gap:16px;
    }
    .eco-content aside h3 {
      color:#2E7D32; font-size:1.2rem; margin-bottom:8px;
    }
    .eco-content aside ul {
      list-style: disc inside;
      line-height:1.5; color:#555;
    }
    .eco-content aside img {
      width:100%; border-radius:8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
    }
    /* 右侧内容区 */
    .eco-content aside {
      padding: 25px;
      background: rgba(255,255,255,0.95);
      border-radius: 10px;
      border: 1px solid #c8e6c9;
    }
    .eco-content aside h3 {
      color: #2e7d32;
      font-size: 1.4rem;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #c8e6c9;
    }
    .eco-content aside ul {
      list-style: none;
      line-height: 1.8;
      color: #4a6855;
    }
    .eco-content aside li {
      margin-bottom: 15px;
      padding-left: 28px;
      position: relative;
    }
    .eco-content aside li::before {
      content: '🌿';
      position: absolute;
      left: 0;
      top: 2px;
    }

    /* 响应式布局 */
    @media (max-width: 768px) {
      .eco-journal { padding: 25px; }
      .eco-content { grid-template-columns: 1fr; }
      .storybook { margin: -20px auto 0 !important; }
    }