/* ===== 1. 重置与整体 ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Microsoft YaHei',Arial,Helvetica,sans-serif;
  background:linear-gradient(135deg,#87CEEB 0%,#98D98E 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden;
  position:relative;
}

/* ===== 2. 游戏面板 ===== */
.game-container{
  background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(255,255,255,0.9));
  border-radius:25px;
  padding:20px;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
  max-width:900px;
  width:100%;
  max-height:90vh;
  overflow:hidden;
  transition:transform 0.3s ease;
  position:relative;
}
.game-container:hover{transform:translateY(-2px);}

/* ===== 3. 中空地洞 ===== */
.mole-hole{
  position:relative;
  width:100%;
  max-width:180px;
  height:160px;
  margin:0 auto;
}
.hole{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:140px;
  height:60px;
  background:linear-gradient(to top,#3a2211,#654321);
  border-radius:50%;
  box-shadow:inset 0 8px 15px rgba(0,0,0,.6);
  overflow:hidden;
  z-index:1;
}
/* 中空内圈 */
.hole::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:100px;
  height:40px;
  border-radius:50%;
  background:#1a1a1a;
  box-shadow:inset 0 0 10px rgba(0,0,0,.8);
}

/* ===== 4. 地鼠 ===== */
.mole{
  position:absolute;
  bottom:10px;left:50%;
  transform:translateX(-50%);
  width:120px;
  height:120px;
  background:linear-gradient(135deg,#d2691e,#b35915);
  border-radius:50% 50% 40% 40%;
  cursor: pointer;
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px;
  box-shadow:0 5px 15px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,0.1);
  z-index:2;
  border:2px solid rgba(0,0,0,0.1);
}
.mole.hidden{bottom:-150px;opacity:0;}
.mole-eyes{display:flex;gap:20px;margin-bottom:8px;}
.eye{width:16px;height:16px;background:#000;border-radius:50%;position:relative;animation:blink 5s infinite;}
@keyframes blink{0%,45%,55%,100%{height:16px;}50%{height:2px;}}
.eye::after{content:'';position:absolute;top:3px;left:3px;width:5px;height:5px;background:#fff;border-radius:50%;animation:shine 3s infinite;}
@keyframes shine{0%,100%{opacity:0.8;}50%{opacity:1;}}
.mole-meaning{background:linear-gradient(135deg,#fff,#f0f0f0);padding:6px 12px;border-radius:25px;font-weight:bold;color:#333;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.15);border:1px solid rgba(0,0,0,0.1);transition:all 0.2s ease;}
.mole:hover .mole-meaning{transform:scale(1.05);box-shadow:0 3px 12px rgba(0,0,0,.2);}

/* ===== 5. 锤击动画 ===== */
/* 锤子图标样式 - 从6.html中移植 */
.hammer {
    position: absolute;
    top: -40px;
    left: 95%;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 50% 100%;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

.hammer.visible {
    opacity: 1;
}

/* 逆时针敲击动画 */
.hammer.swing {
    animation: hammerSwing 0.4s ease-out;
}

@keyframes hammerSwing {
    0% {
        transform: translateX(-50%) rotate(0deg);
        top: -80px;
    }
    50% {
        transform: translateX(-50%) rotate(-45deg);
        top: -40px;
    }
    100% {
        transform: translateX(-50%) rotate(0deg);
        top: -80px;
    }
}

.hammer-head {
    width: 80px;
    height: 40px;
    background: #3498db;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hammer-head::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 40px;
    background: #e74c3c;
    border-radius: 4px;
    left: -15px;
}

.hammer-handle {
    width: 12px;
    height: 80px;
    background: #8e44ad;
    border-radius: 6px;
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
}

/* 敲击效果 */
.hit-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.3) 0%, transparent 70%);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
}

.hit-effect.active {
    animation: hit 0.5s ease;
}

@keyframes hit {
    0% {
        opacity: 0.8;
        transform: scale(0.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* 地鼠被击中效果 */
.mole.hit {
    animation: targetHit 0.3s ease;
}

@keyframes targetHit {
    0% {
        transform: translateY(0) translateX(-50%);
    }
    50% {
        transform: translateY(-10px) translateX(-50%);
    }
    100% {
        transform: translateY(0) translateX(-50%);
    }
}

.mole.shake{animation:shake 0.4s ease;}
@keyframes shake{0%,100%{transform:translateX(-50%);}25%{transform:translateX(-55%);}75%{transform:translateX(-45%);}}

/* ===== 6. 其余保留原样式 ===== */
h1{text-align:center;margin-bottom:15px;color:#333;font-size:2rem;font-weight:bold;text-shadow:0 2px 4px rgba(0,0,0,0.1);}
.score-board{display:flex;justify-content:space-between;margin-bottom:15px;font-size:1.2em;font-weight:bold;color:#555;padding:0 10px;}
.hammer-word{text-align:center;margin-bottom:20px;padding:12px 15px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;box-shadow:inset 0 2px 5px rgba(0,0,0,0.1);}
.hammer-word .word{font-size:2.2em;color:#2196f3;font-weight:bold;letter-spacing:1px;}
.moles-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px;cursor: pointer;}
.controls{position:absolute;top:20px;right:20px;margin:0;}
.btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:8px 20px;font-size:1em;font-weight:bold;border-radius:30px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,0.2);transition:all 0.3s ease;position:relative;overflow:hidden;}
.btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:0.5s;}
.btn:hover:before{left:100%;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.3);}
.btn:disabled{opacity:0.7;cursor:not-allowed;transform:none;}
.game-over{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;z-index:1000;}
.game-over-content{background:linear-gradient(135deg,#fff,#f8f9fa);padding:25px 30px;border-radius:25px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:popIn 0.3s ease;max-width:500px;display:flex;flex-direction:column;align-items:center;}

.wrong-words-list {
  margin:15px 0;
  text-align:left;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.wrong-words-list h3 {
  color:#e74c3c;
  margin-bottom:8px;
  text-align:center;
}

.wrong-words-list ul {
  list-style-type:disc;
  padding-left:20px;
  color:#555;
  width:100%;
  max-width:300px;
}

.wrong-words-list li {
  margin:4px 0;
  font-size:15px;
}

.celebration-video {
  margin:15px 0;
  text-align:center;
}

.celebration-video video {
  width:300px !important;
  height:225px !important;
  max-width:100%;
}
@keyframes popIn{0%{transform:scale(0.8);opacity:0;}100%{transform:scale(1);opacity:1;}}
.final-score{font-size:1.8em;color:#4caf50;margin:15px 0;font-weight:bold;letter-spacing:1px;}