/* 全局规则限定在 #tool 作用域，避免污染 v2 yst-shell */
#tool * { box-sizing: border-box;
} #tool { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #000000; color: #fff; padding: 28px 20px; border-radius: 12px; overflow: hidden;
}
#tool .game-area { display: flex; flex-direction: column; justify-content: center; align-items: center;
} .header { text-align: center; margin-bottom: 60px;
} .header h1 { font-size: 3em; color: #ff6b6b; font-weight: 300; letter-spacing: 8px; text-shadow: 2px 2px 8px rgba(255, 107, 107, 0.5);
} .merit-display { text-align: center; margin-bottom: 80px;
} .merit-label { color: #ffffff; font-size: 1.2em; margin-bottom: 15px; font-weight: 300; letter-spacing: 2px;
} .merit-count { color: #ffffff; font-size: 2em; font-weight: 300; letter-spacing: 4px;
} .wooden-fish-container { display: flex; justify-content: center; align-items: center; margin: 0; position: relative; min-height: 400px;
} .wooden-fish { cursor: url('hammer.svg') 16 16, pointer; position: relative; z-index: 1; transition: cursor 0.05s;
} /* 锤子动画状态 */
.wooden-fish.hammer-ready { cursor: url('hammer-ready.svg') 14 14, pointer;
} .wooden-fish.hammer-down { cursor: url('hammer-down.svg') 18 18, pointer;
} .wooden-fish.hammer-hitting { cursor: url('hammer-hit.svg') 20 20, pointer;
} .fish-image { width: 500px; height: auto; filter: none; transition: filter 0.2s ease; user-select: none; -webkit-user-drag: none; mix-blend-mode: screen;
} /* 点击动画 */
.wooden-fish.clicked { animation: bounce 0.2s ease;
} @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); }
} /* 功德+1飘字效果 */
.merit-popup-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
} .merit-popup { position: absolute; font-size: 2em; font-weight: 300; color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); animation: floatUp 1.2s ease-out forwards; pointer-events: none; z-index: 10;
} @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-80px) scale(1.3); }
} .footer { text-align: center; margin-top: 80px;
} .footer p { color: #666; font-size: 0.95em; font-weight: 300; letter-spacing: 1px;
} /* 响应式设计 */
@media (max-width: 768px) { .header h1 { font-size: 2.2em; letter-spacing: 4px; } .merit-display { margin-bottom: 60px; } .merit-label { font-size: 1em; } .merit-count { font-size: 1.6em; } .fish-image { width: 350px; } .wooden-fish-container { min-height: 300px; } .footer { margin-top: 60px; }
} @media (max-width: 480px) { .header h1 { font-size: 1.8em; letter-spacing: 3px; } .merit-display { margin-bottom: 50px; } .fish-image { width: 280px; } .wooden-fish-container { min-height: 250px; }
} /* 光晕效果 */
.fish-image.glow { animation: glowEffect 0.4s ease-out;
} @keyframes glowEffect { 0% { filter: none; } 50% { filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.6)) brightness(1.1); } 100% { filter: none; }
}