/* Custom CSS for Inter font and general styling */
body {
   font-family: 'Inter', sans-serif;
    background-color: #f5dbc9; /* 背景色改為 #f5dbc9 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden; /* Prevent scrollbars due to mosquito movement */
}

.game-container {
    background-color: #f5dbc9;
    border: 8px solid #ccc;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 90vw; /* Responsive width */
    max-width: 800px; /* Max width for desktop */
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    position: relative;
    overflow: hidden; /* Keep mosquitoes within bounds */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.game-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    color: #333;
    font-weight: bold;
    font-size: 1.25rem; /* Larger font for score/timer */
}

#game-area {
    width: 100%;
    height: calc(100% - 80px); /* Adjust height to accommodate header/footer */
    position: relative;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand"><path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M10 9V3a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M6 8V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M2 12v5c0 2.76 2.24 5 5 5h6c2.76 0 5-2.24 5-5v-5"/></svg>') 16 16, auto; /* Custom cursor for game area */
}

.mosquito {
    position: absolute;
    font-size: 3rem; /* Larger emoji size */
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    will-change: transform; /* Optimize for animation */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add some depth */
    z-index: 10; /* Ensure mosquito is above other elements */
}

.mosquito.bloodsucker {
    color: red; /* 將蚊子 emoji 變為紅色 */
    /* 或者可以使用 filter: hue-rotate(90deg); 等來改變顏色，但直接 color 更簡單 */
}

.hit-effect {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    color: #ef4444; /* Red color for hit text */
    opacity: 0;
    animation: fadeOutUp 1s forwards; /* Animation for score pop-up */
    z-index: 20;
}

/* 新增：紅腫標記樣式 */
.blood-mark {
    position: absolute;
    background-color: #ff0000; /* 紅色 */
    width: 40px; /* 標記大小 */
    height: 40px;
    border-radius: 50%; /* 圓形 */
    opacity: 0;
    transform: translate(-50%, -50%); /* 確保標記中心位於指定座標 */
    animation: fadeInOutScale 2s forwards; /* 標記出現、放大、淡出的動畫 */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* 紅色光暈 */
    z-index: 5; /* 確保標記在蚊子下方但又可見 */
}

/* 紅腫標記動畫 */
@keyframes fadeInOutScale {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}


.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    text-align: center;
    z-index: 100; /* Ensure overlay is on top */
}

.game-overlay h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.game-overlay p {
    font-size: 2rem;
    margin-bottom: 30px;
}

.game-button {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(45deg, #4CAF50 0%, #66BB6A 100%);
}

.game-button:hover {
    background-color: #45a049;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background-image: linear-gradient(45deg, #45a049 0%, #5cb85c 100%);
}

.game-button:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.game-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: all 0.75s ease-out;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.game-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}