* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

body, html {
    width: 100vw;
    height: 100vh; height: 100dvh;
    overflow: hidden;
    background: url('images/background.webp') no-repeat center center fixed;
    background-size: cover;
    background-color: #0d4b75;
}

body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 30, 60, 0.4);
    z-index: 1;
    pointer-events: none;
}

#ui-layer {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 25px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.game-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    color: white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.2);
    width: 90%;
    max-width: 450px; 
}

.game-modal h1 { font-size: 2.2rem; margin-bottom: 10px; }
.game-modal p { font-size: 1rem; margin-bottom: 20px; color: #d1e8ff; line-height: 1.5; }

/* ✨ 難度按鈕樣式 */
.diff-selector { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; }
.diff-btn {
    background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8); padding: 8px 15px; border-radius: 20px; cursor: pointer;
    font-weight: bold; font-size: 1rem; transition: 0.3s;
}
.diff-btn.active-diff {
    background: rgba(77, 166, 255, 0.2); border-color: #4da6ff;
    box-shadow: 0 0 15px rgba(77, 166, 255, 0.6); transform: scale(1.1); color: white;
}

.btn-action {
    background: linear-gradient(135deg, #4da6ff, #0073e6);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 40px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 115, 230, 0.4);
    transition: 0.3s;
    margin: 5px;
}
.btn-secondary { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: none; }

#game-area {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    z-index: 10;
    overflow: hidden;
    transform: translateZ(0);
    cursor: crosshair; 
}

.game-target {
    position: absolute;
    top: -150px; 
    width: clamp(70px, 10vw, 100px); 
    height: clamp(70px, 10vw, 100px);
    cursor: crosshair;
    animation: dropDownGame linear forwards; 
    will-change: transform, opacity; 
    touch-action: none;
    -webkit-user-drag: none;
}
/* =========================================
   🐟 讓扣分的雙魚變得超級大 (修正版)
   ========================================= */
.game-target[data-type="fish"] {
    /* 直接修改寬高，避免與下墜動畫 (transform) 衝突，同時放大判定範圍 */
    width: clamp(175px, 25vw, 250px) !important; 
    height: clamp(175px, 25vw, 250px) !important;
    z-index: 50;
}

.game-target img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.camouflaged {
    opacity: 0.75;
    filter: brightness(0.7) sepia(0.3) hue-rotate(180deg);
}

.penalty-flash::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    background: rgba(255, 0, 0, 0.4);
    z-index: 150;
    animation: flash 0.3s ease-out forwards;
    pointer-events: none;
}

@keyframes flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes dropDownGame {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(120vh) rotate(360deg); } 
}

.shatter-effect {
    animation: shatterFade 0.6s ease-out forwards !important;
    pointer-events: none;
}

@keyframes shatterFade {
    0% { transform: scale(1.4) translateY(0); opacity: 1; filter: brightness(1.2); }
    100% { transform: scale(1) translateY(150px); opacity: 0; filter: brightness(1); }
}

.swim-away {
    animation: swimAway 0.4s ease-in forwards !important;
    pointer-events: none;
}

@keyframes swimAway {
    0% { transform: scale(1) translateX(0); opacity: 1; }
    100% { transform: scale(0.5) translateX(200px); opacity: 0; }
}

/* ✨ 彈藥補給貝殼特效 */
.ammo-shell {
    position: relative;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem; /* 👈 從原本的 3.5rem 改成 2rem */
    filter: drop-shadow(0 0 15px #00ffcc);
    animation: pulse-glow 0.8s infinite alternate;
}

.ammo-shell::after {
    content: attr(data-text);
    position: absolute;
    bottom: -15px;
    font-size: 1.3rem;
    color: #00ffcc;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

@keyframes pulse-glow {
    from { filter: drop-shadow(0 0 10px #00ffcc) scale(1); }
    to { filter: drop-shadow(0 0 35px #ffffff) scale(1.15); }
}
/* 👇 請在這裡加入這段「時間補給沙漏特效」 👇 */
.time-bonus {
    position: relative;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem;
    filter: drop-shadow(0 0 15px #facc15); /* 金黃色發光 */
    animation: pulse-glow-time 0.8s infinite alternate;
}

.time-bonus::after {
    content: attr(data-text);
    position: absolute;
    bottom: -15px;
    font-size: 1.3rem;
    color: #facc15;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

@keyframes pulse-glow-time {
    from { filter: drop-shadow(0 0 10px #facc15) scale(1); }
    to { filter: drop-shadow(0 0 35px #ffffff) scale(1.15); }
}

/* ✨ 排行榜列表專屬樣式 */
#leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

#leaderboard-list li {
    font-size: 1.2rem;
    margin: 12px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    padding-bottom: 8px;
    color: #00ffcc;
}

#leaderboard-list li span:first-child {
    font-weight: bold;
    color: #fff;
}

/* ✨ 右上角全域排行榜按鈕 */
#top-right-leaderboard {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 300; 
    padding: 10px 20px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
/* =========================================
   ✨ 暴力破解版：響應式設計 (RWD) ✨
   ========================================= */

@media (max-width: 768px) {
    /* 1. UI 狀態列強制縮小並允許換行 */
    #ui-layer {
        width: 95% !important;
        top: 10px !important;
        padding: 8px 10px !important;
        font-size: 0.95rem !important;
        gap: 10px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* 2. 避免右上角按鈕跟 UI 撞在一起，強制移到「右下角」並改成直排 */
    #top-right-controls {
        top: auto !important;     /* 解除原本的上方定位 */
        bottom: 20px !important;  /* 釘在距離底部 20px 的位置 */
        right: 15px !important;
        flex-direction: column !important; /* 改為上下直排 */
        align-items: flex-end !important;  /* 靠右對齊 */
        gap: 8px !important;
    }

    /* 3. 強制破壞 HTML 裡的 inline style，讓按鈕縮小 */
    #btn-lang, #top-right-leaderboard {
        font-size: 0.9rem !important;
        padding: 8px 15px !important;
        width: auto !important;
    }

    /* 4. 遊戲彈窗瘦身 */
    .game-modal {
        width: 92% !important;
        padding: 20px 15px !important;
    }
    
    .game-modal h1 { 
        font-size: 1.8rem !important; 
    }

    .diff-selector { 
        gap: 8px !important; 
        margin-bottom: 20px !important; 
    }
    
    .diff-btn {
        padding: 6px 12px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    /* 針對超小手機的終極壓縮 */
    #ui-layer {
        font-size: 0.85rem !important;
        padding: 5px 8px !important;
        gap: 5px !important;
    }
    /* 👇 找到這裡，把 .time-bonus 也加進去 */
    .ammo-shell, .time-bonus {
        font-size: 1.5rem !important; 
    }
    
    /* 彈藥補給貝殼特效縮小，增加手機版點擊難度 */
    .ammo-shell {
        font-size: 1.5rem !important; /* 👈 從原本的 2.2rem 改成 1.5rem */
    }
    
    .game-modal h1 { 
        font-size: 1.5rem !important; 
    }
}