/* 🌟 【全域變數調色盤】這裡定義了整個遊戲的主要顏色，換這裡的色號，整個網頁風格就會跟著變哦！ */
        :root {
            --primary-bg: #fff0f5; 
            --panel-bg: #ffffff;
            --card-bg: #fff9fa;
            --accent-color: #ffb6c1;
            --text-dark: #6b4c4a;
            --text-dim: #b89f9d;
            --border-color: #ffd1dc;
            --btn-hover: #ffedf0;
            --shadow-color: rgba(255, 182, 193, 0.4);
            
            /* 海兔預設的身體顏色變數 */
            --c-body: #ffffff;
            --c-outline: #3f2a2a;
            --c-ear-top: #3f2a2a;
            --c-tail: #3f2a2a;
            --c-spot: #3f2a2a;
            --c-blush: #fca5a5;
        }

        /* 🌟 基礎排版設定，不讓玩家反白選取文字 */
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            font-family: 'Nunito', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100dvh;
            overflow: hidden;
            background-color: var(--primary-bg);
            color: var(--text-dark);
        }

        /* 🌟 【多人連線區塊 UI】包含右上角的連線按鈕、房間代碼顯示 */
        .mp-panel {
            position: absolute;
            top: 75px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 90;   /* 下拉選單要蓋在下方操作面板（z-index 80）上面，最下面的按鈕才不會被擋住 */
            background: rgba(255, 255, 255, 0.85);
            padding: 15px;
            border-radius: 20px;
            border: 3px solid var(--border-color);
            box-shadow: 0 5px 15px var(--shadow-color);
            -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
        }
        .mp-info { font-size: 0.9rem; font-weight: 900; color: var(--text-dark); text-align: center; }
        .mp-btn { background: var(--text-dark); color: white; border: none; padding: 8px 15px; border-radius: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.15); transition: 0.1s; }
        .mp-btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
        .mp-btn.secondary { background: #ffffff; color: var(--text-dark); border: 2px solid var(--text-dark); box-shadow: 0 4px 0 var(--text-dark); }
        
        /* 🌟 【其他玩家與聊天泡泡】別人進來房間時的顯示設定 */
        /* 其他玩家的海兔：跟自己的海兔一樣大小的框、一樣的縮放（再小一點點），手機上才不會大得塞不下 */
        .other-player {
            position: absolute; width: 340px; height: 240px; pointer-events: none; z-index: 8;
            transform: scale(calc(var(--slug-scale, 1) * 0.85));
            transition: left 0.35s ease-out, top 0.35s ease-out;
        }
        .other-player .op-body { width: 100%; height: 100%; transition: transform 0.25s ease-out; }
        /* 海兔預設臉朝左，往右走就把身體翻過來（名字不跟著翻） */
        .other-player.face-right .op-body { transform: scaleX(-1); }
        /* 名字在縮放的框裡，手機上會被一起縮到看不清楚，所以把縮放除回來，維持正常字級 */
        .other-player .other-player-name { font-size: calc(1.05rem / (var(--slug-scale, 1) * 0.85)); }
        .other-player-name { position: absolute; top: -10px; width: 100%; text-align: center; font-weight: 900; font-size: 1.1rem; color: var(--text-dark); text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; z-index: 10; }  
        .chat-bubble { position: absolute; top: -65px; left: 50%; transform: translateX(-50%); background: white; padding: 8px 15px; border-radius: 20px; border: 2px solid var(--accent-color); font-weight: 900; font-size: 1rem; color: var(--text-dark); white-space: nowrap; box-shadow: 0 5px 15px rgba(255, 182, 193, 0.4); animation: chatPop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); z-index: 30; }
        .chat-bubble::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0; border-style: solid; border-color: white transparent transparent transparent; }
        .chat-bubble::before { content: ''; position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); border-width: 10px 10px 0; border-style: solid; border-color: var(--accent-color) transparent transparent transparent; z-index: -1; }
        @keyframes chatPop { 0% { transform: translateX(-50%) scale(0.5); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

        /* 🌟 【最頂端資訊列】返回按鈕、積分顯示、語言切換 */
        .top-bar {
            position: absolute;
            top: 0;
            width: 100%;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 50;
        }
        .points-display {
            background: #ffffff;
            padding: 8px 24px;
            border-radius: 30px;
            border: 3px solid var(--border-color);
            font-weight: 900;
            letter-spacing: 1px;
            color: var(--text-dark);
            box-shadow: 0 4px 0 var(--border-color);
            font-size: 1.1rem;   /* 底色本來就是不透明白，不需要 backdrop-filter（留著反而會在換背景時殘影） */
        }
        .lang-btn {
            background: #ffffff;
            border: 3px solid var(--border-color);
            color: var(--text-dark);
            padding: 10px 18px;   /* 連同邊框剛好 44px 高，平板用手指也點得到 */
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 900;
            font-size: 0.9rem;
            transition: 0.1s;
            box-shadow: 0 4px 0 var(--border-color);
        }
        .lang-btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }

        /* 📖 飼養手冊：跟右上角的「連線」對稱，固定在左上角，別壓到頂部資訊列 */
        #btnOpenManual {
            position: absolute;
            top: 75px;
            left: 20px;
            z-index: 60;
            background: #ffffff;
            border: 3px solid var(--border-color);
            color: var(--text-dark);
            padding: 10px 18px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            border-radius: 20px;
            font-weight: 900;
            font-size: 0.9rem;
            cursor: pointer;
            box-shadow: 0 4px 0 var(--border-color);
            transition: 0.1s;
        }
        #btnOpenManual:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }

        /* 🌟 【主要遊戲舞台】包含背景底色、網點、還有特效圖層 */
        .stage {
            position: absolute;
            top: 0; left: 0; 
            width: 100%; height: 58%; 
            background: #dbeafe; overflow: hidden; transition: background 1s ease;
        }
        .dot-pattern {
            position: absolute; width: 100%; height: 100%;
            background-image: radial-gradient(rgba(255,255,255,0.7) 3px, transparent 3px);
            background-size: 35px 35px; opacity: 0.9; pointer-events: none;
            box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.5); z-index: 2; transition: opacity 0.5s;
        }
        .effect-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 5; overflow: hidden; }
/* 🌟 海兔跳躍與名片專屬模式 */
        .slug-container.is-jumping {
            /* 加入超 Q 彈的果凍跳躍曲線 (cubic-bezier) */
            transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                        left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        
        .slug-container.card-mode {
            /* 跳進名片的證件照框框裡：位置和大小由 openIdCardModal 量相框後算好（--card-*），
               不跟魚缸裡的縮放比例走，平板、大螢幕上才不會超出框外；沒算到時退回畫面正中央 */
            top: var(--card-top, calc(50vh - 160px)) !important;
            left: var(--card-left, calc(50vw - 170px)) !important;
            transform: scale(var(--card-scale, calc(var(--slug-scale) * 0.65))) !important;
            z-index: 10005 !important;
            pointer-events: none !important; /* 拍照時乖乖不動，不能拖曳 */
        }
        /* 特效動畫：雨滴與泡泡 */
        .rain-drop { position: absolute; width: 2px; height: 20px; background: rgba(255, 255, 255, 0.7); top: -20px; animation: rainFall linear infinite; }
        @keyframes rainFall { to { transform: translateY(60vh); } }
        .bubble { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.2); bottom: -20px; animation: bubbleRise ease-in infinite; }
        @keyframes bubbleRise { to { transform: translateY(-60vh) scale(1.5); opacity: 0; } }
/* 🫧 水質髒污圖層（遮住海兔） */
        .water-dirt-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            touch-action: none; /* 🌟 禁止手機預設手勢，確保擦拭不卡頓 */
            z-index: 18;
            transition: opacity 0.3s ease;
            opacity: 0;
            background: radial-gradient(circle at 50% 50%, rgba(101, 163, 13, 0.55) 0%, rgba(63, 98, 18, 0.8) 60%, rgba(20, 45, 10, 0.96) 100%);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        }

        /* 🧽 擦玻璃抹布（跟隨滑鼠／手指移動） */
        .cleaning-cloth-item {
            position: fixed;
            width: 70px;
            height: 70px;
            pointer-events: none;
            z-index: 99999;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.3));
            animation: clothSway 0.25s infinite alternate ease-in-out;
        }
        @keyframes clothSway {
            0% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
            100% { transform: translate(-50%, -50%) rotate(12deg) scale(1.08); }
        }

        /* ✨ 抹布擦過時留下的乾淨透明水光圈 */
        .cloth-wipe-trail {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 19;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(56, 189, 248, 0.4) 40%, transparent 80%);
            animation: wipeSparkle 0.6s ease-out forwards;
        }
        @keyframes wipeSparkle {
            0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
        }
        /* 🏀 玩具水晶球（手持飛行與落地） */
        .exercise-ball-item {
            position: fixed;
            width: 58px; /* 🌟 稍微放大至 58px，看小魚更清楚 */
            height: 58px;
            pointer-events: none;
            touch-action: none;
            z-index: 99999;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 8px 16px rgba(14, 165, 233, 0.4));
            animation: ballPulse 0.4s infinite alternate ease-in-out;
        }
        @keyframes ballPulse {
            0% { transform: translate(-50%, -50%) scale(0.95); }
            100% { transform: translate(-50%, -50%) scale(1.08); }
        }

        .stage-landed-ball {
            position: absolute;
            width: 54px; /* 🌟 舞台上的球為 54px */
            height: 54px;
            pointer-events: none;
            z-index: 12;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
        }

/* 🥣 撿球目標小碗（出現在畫面下方，提升層級避免被擋） */
        .ball-return-bowl {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 50px;
            pointer-events: none;
            z-index: 15;
            filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
            animation: bowlPopIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        @keyframes bowlPopIn {
            0% { transform: translateX(-50%) scale(0); opacity: 0; }
            100% { transform: translateX(-50%) scale(1); opacity: 1; }
        }

        /* 😫 【飢餓虛弱狀態】整隻海兔癱軟、無精打采慢速喘息 */
        .slug-container.is-starving .slug-svg {
            filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.15)) grayscale(0.25) brightness(0.92);
            animation: slugStarvingSlump 2.2s infinite ease-in-out !important;
            transform-origin: center bottom;
        }
        @keyframes slugStarvingSlump {
            0%, 100% { transform: scale(1.04, 0.86) translateY(14px); }
            50% { transform: scale(0.96, 0.94) translateY(8px); }
        }

        /* 🫧 肚子咕嚕咕嚕飢餓氣泡字樣 */
        .starving-belly-grumble {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(254, 242, 242, 0.92);
            border: 2px dashed #ef4444;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 900;
            color: #dc2626;
            pointer-events: none;
            z-index: 25;
            box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
            animation: bellyGrumblePulse 1.4s infinite ease-in-out;
        }
        @keyframes bellyGrumblePulse {
            0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.85; }
            50% { transform: translate(-50%, -58%) scale(1.08); opacity: 1; filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4)); }
        }

        /* 拒絕運動時的無奈小搖頭 */
        .slug-container.is-refusing-exercise .slug-svg {
            animation: slugRefuseShake 0.4s ease-in-out !important;
        }
        @keyframes slugRefuseShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-12px) rotate(-4deg); }
            40% { transform: translateX(12px) rotate(4deg); }
            60% { transform: translateX(-8px) rotate(-2deg); }
            80% { transform: translateX(8px) rotate(2deg); }
        }

        /* 💦 狂奔時身邊飄出的小汗珠 */
        .exercise-sweat-drop {
            position: absolute;
            width: 22px;
            height: 22px;
            pointer-events: none;
            z-index: 25;
            animation: sweatFly 0.6s ease-out forwards;
        }
        @keyframes sweatFly {
            0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
            100% { transform: translate(var(--sw-dx), -35px) scale(1.2); opacity: 0; }
        }
        /* 🌟 愛心由下往上飄動與破掉的動畫 */
@keyframes heartFloatAndPop {
    0% {
        transform: translateY(0vh) scale(0.3);
        opacity: 0;
    }
    15% {
        opacity: 0.9;
        transform: translateY(-10vh) scale(1);
    }
    85% {
        opacity: 0.9;
        transform: translateY(-50vh) scale(1.1);
    }
    92% {
        opacity: 1;
        transform: translateY(-55vh) scale(1.3); /* 破裂前瞬間放大 */
        filter: brightness(2) drop-shadow(0 0 10px #fff);
    }
    100% {
        transform: translateY(-58vh) scale(0.2); /* 啵！縮小炸開消失 */
        opacity: 0;
    }
}
/* 📺 【阿嬤的舊電視】CRT 舊電視掃描線 + 噪點濾鏡 + 畫面閃爍效果 (清晰且柔和緩慢版) */
    .tv-filter-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none; z-index: 99;
        /* 加深掃描線的對比與網格感，讓濾鏡更清晰明顯 */
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.45) 50%), 
                    linear-gradient(90deg, rgba(255, 0, 0, 0.12), rgba(0, 255, 0, 0.04), rgba(0, 0, 255, 0.12));
        background-size: 100% 4px, 3px 100%;
        /* 提高不透明度，並將閃爍動畫時間拉長、採用柔和的呼吸漸變，避免太快造成不舒服 */
        opacity: 0.5;
        animation: flicker 0.8s infinite alternate ease-in-out;
    }
    @keyframes flicker {
        0% { opacity: 0.45; } 
        100% { opacity: 0.55; }
    }
    /* 🌟 【深海魚群專屬】中心透光深淵 ＋ 鯊魚漩渦風暴全域背景 */
.shark-vortex-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 100% 還原圖片：中心亮青藍透光，四周極致深海暗藍黑 */
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.45) 0%, rgba(2, 132, 199, 0.3) 25%, rgba(15, 23, 42, 0.75) 60%, rgba(2, 6, 23, 0.92) 100%);
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* 🌟 中心發光光柱核心 */
.shark-center-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(224, 242, 254, 0.8) 0%, rgba(56, 189, 248, 0.4) 45%, transparent 75%);
    filter: blur(15px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: centerGlowPulse 4s ease-in-out infinite alternate;
}
@keyframes centerGlowPulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1.0; }
}

/* 🌟 旋轉軌道環容器（同心圓旋轉） */
.shark-ring-track {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border-radius: 50%;
    transform-origin: center center;
}

/* 🌟 鯊魚本體：依照切線方向朝著圓周前方游動 */
.vortex-shark {
    position: absolute;
    pointer-events: none;
    transform-origin: center center;
}

/* 各層軌道旋轉動畫 */
@keyframes ringSpinClockwise {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ringSpinCounter {
    0% { transform: translate(-50%, -50%) rotate(360deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}
/* 🌟 【深海點擊泡泡】晶瑩透亮反光 ＋ 自然左右搖曳慢速上升 */
.deep-sea-click-bubble {
    position: absolute;
    pointer-events: none;
    z-index: 25;
    border-radius: 50%;
    /* 水晶泡泡高光與透光水藍漸層 */
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(224, 242, 254, 0.45) 25%, rgba(56, 189, 248, 0.15) 65%, rgba(255, 255, 255, 0.7) 100%);
    border: 1.2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
    animation: clickBubbleRise 2.8s cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
}

@keyframes clickBubbleRise {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
        opacity: 0;
    }
    12% {
        opacity: 0.95;
        transform: translate(-50%, -50%) translate(var(--drift-x), -25px) scale(1);
    }
    60% {
        opacity: 0.85;
        transform: translate(-50%, -50%) translate(calc(var(--drift-x) * -0.6), -90px) scale(1.08);
    }
    100% {
        transform: translate(-50%, -50%) translate(calc(var(--drift-x) * 1.4), -180px) scale(1.2);
        opacity: 0;
    }
}
/* 🌟 【蝴蝶翩翩專屬】微光幽境柔霧圖層 */
.butterfly-mist-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(192, 132, 252, 0.12) 0%, rgba(76, 29, 149, 0.18) 60%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* 🌟 影子蝴蝶本體容器 (自帶柔和發光與深色剪影) */
.shadow-butterfly {
    position: absolute;
    width: 32px; height: 32px;
    pointer-events: none;
    z-index: 4;
    perspective: 400px;
    transform-origin: center center;
}

/* 🌟 翅膀拍動（以 50px 中脊為軸心自然呼吸扇動） */
.butterfly-wing-l {
    transform-origin: 50px center;
    animation: wingFlapPureL 1.1s infinite alternate ease-in-out;
}
.butterfly-wing-r {
    transform-origin: 50px center;
    animation: wingFlapPureR 1.1s infinite alternate ease-in-out;
}

@keyframes wingFlapPureL {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0.72) skewY(-3deg); }
}
@keyframes wingFlapPureR {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0.72) skewY(3deg); }
}
/* 🌟 蝴蝶飛行時身後留下的微光星塵粒子 */
.butterfly-spark-trail {
    position: absolute;
    width: 4px; height: 4px;
    background: #e9d5ff;
    border-radius: 50%;
    box-shadow: 0 0 6px #c084fc, 0 0 10px #fbcfe8;
    pointer-events: none;
    z-index: 3;
    animation: sparkFade 1.2s ease-out forwards;
}

@keyframes sparkFade {
    0% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
    50% { opacity: 0.6; }
    100% { transform: translate(-50%, -50%) translateY(12px) scale(0.2); opacity: 0; }
}
/* 📐 【數學當機】清晰、正確且緩慢移動的數學公式與發光叉叉 */
    .math-formula {
        position: absolute; 
        color: #ffffff; /* 使用純白色，並加上深色陰影確保在任何背景都絕對清晰 */
        background: rgba(107, 76, 74, 0.85); /* 加上深色半透明膠囊底色，讓公式像教科書一樣超好辨識 */
        padding: 6px 14px;
        border-radius: 12px;
        border: 2px solid #ffd1dc;
        font-family: 'Courier New', monospace;
        font-weight: 900; 
        font-size: 1.4rem; 
        pointer-events: none; 
        z-index: 6;
        white-space: nowrap;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        animation: mathSprintVerySlow linear infinite;
    }
    @keyframes mathSprintVerySlow { 
        0% { transform: translateX(-300px) translateY(var(--start-y)); opacity: 0; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { transform: translateX(calc(100vw + 300px)) translateY(var(--end-y)); opacity: 0; }
    }

    .wrong-mark {
        position: absolute; 
        top: 0; left: 0; 
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
        color: rgba(244, 63, 94, 0.65); 
        font-size: 35vw; 
        font-weight: 900;
        z-index: 7; 
        pointer-events: none;
        /* 散發柔和光芒的滿版叉叉 */
        filter: drop-shadow(0 0 30px rgba(244, 63, 94, 0.9)) blur(0.5px);
        mix-blend-mode: overlay;
        animation: glowingMarkPulse 2s ease-in-out infinite;
    }
    @keyframes glowingMarkPulse {
        0% { transform: scale(1.05) rotate(-3deg); opacity: 0.5; filter: drop-shadow(0 0 20px rgba(244,63,94,0.6)) blur(1px); }
        50% { transform: scale(1) rotate(0deg); opacity: 0.9; filter: drop-shadow(0 0 50px rgba(244, 63, 94, 1)) blur(0px); }
        100% { transform: scale(1.05) rotate(3deg); opacity: 0.5; filter: drop-shadow(0 0 20px rgba(244,63,94,0.6)) blur(1px); }
    }
/* 🌟 【繁星閃爍專屬】四周淡淡金黃色光暈 + 背景明暗呼吸閃爍 */
.star-golden-vignette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 30%, rgba(254, 240, 138, 0.22) 65%, rgba(245, 158, 11, 0.38) 100%);
    pointer-events: none;
    z-index: 1;
    animation: goldenShimmerPulse 4s ease-in-out infinite alternate;
}
@keyframes goldenShimmerPulse {
    0% { opacity: 0.55; filter: brightness(0.95); }
    50% { opacity: 0.85; filter: brightness(1.15) drop-shadow(0 0 15px rgba(254, 240, 138, 0.4)); }
    100% { opacity: 0.65; filter: brightness(1.0); }
}

/* 🌟 背景定點一閃一閃的微光星芒 */
.background-twinkle-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
    animation: backgroundTwinkleBlink ease-in-out infinite;
}
@keyframes backgroundTwinkleBlink {
    0% { transform: scale(0.2); opacity: 0; filter: drop-shadow(0 0 0px #fff); }
    50% { transform: scale(1.15); opacity: 0.95; filter: drop-shadow(0 0 8px #fef08a); }
    100% { transform: scale(0.2); opacity: 0; filter: drop-shadow(0 0 0px #fff); }
}

/* 🌟 飄落流星與星星的滑落動畫 */
.twinkling-golden-star {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    transform-origin: center center;
    animation: starGlissando linear infinite;
}
@keyframes starGlissando {
    0% { transform: translateY(-5vh) translateX(0px) rotate(0deg) scale(0.3); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(108vh) translateX(var(--star-drift)) rotate(360deg) scale(0.9); opacity: 0; }
}

/* 🌟 滑鼠劃過殘留的流星與星星粒子動畫 */
.star-cursor-trail {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    transform-origin: center center;
    animation: cursorStarPop 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes cursorStarPop {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.4) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #fff);
    }
    40% {
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.1) rotate(45deg);
        opacity: 0.95;
        filter: drop-shadow(0 0 10px #fef08a);
    }
    100% {
        transform: translate(-50%, -50%) translate(calc(var(--tx) * 1.6), calc(var(--ty) * 1.6 + 15px)) scale(0.1) rotate(90deg);
        opacity: 0;
        filter: drop-shadow(0 0 0px transparent);
    }
}
        /* 🌟 【海兔本體的容器與動畫】 */
        .slug-container {
            position: absolute !important;
            width: 340px !important; height: 240px !important;
            cursor: -webkit-grab !important;
            cursor: grab !important;
            z-index: 10 !important; touch-action: none !important;
            left: calc(50% - 170px); top: calc(50% - 120px);
            user-select: none !important; -webkit-user-select: none !important; -webkit-user-drag: none !important;
            perspective: 800px; /* 解鎖 3D 側翻視覺 */
            /* --slug-scale 由 JS 依舞台大小算出，螢幕越大海兔越大 */
            --slug-scale: 1;
            transform: scale(var(--slug-scale));
            transition: transform 0.25s ease-out;
        }
        body.is-dragging-global, body.is-dragging-global * { 
            cursor: -webkit-grabbing !important;
            cursor: grabbing !important; 
            user-select: none !important; -webkit-user-select: none !important; 
        }
        .slug-container.is-petting .slug-svg { transform: scale(1.06, 0.92) translateY(12px); filter: drop-shadow(0 5px 8px rgba(0,0,0,0.25)); }

        /* 🖐️ 摸摸與抓取海兔專屬手掌 (標準游標風格，符合人體工學的手指比例) */
        .pet-interactive-hand {
            position: fixed;
            top: 0;
            left: 0;
            width: 54px;
            height: 54px;
            pointer-events: none;
            z-index: 999999;
            transform: translate(-30%, -28%);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.12s ease, visibility 0.12s;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .pet-interactive-hand.is-visible {
            opacity: 1;
            visibility: visible;
        }

        /* 抓取時讓拳心落在游標，也就是海兔被抓住的位置 */
        .pet-interactive-hand.is-grabbing {
            transform: translate(-50%, -58%);
        }

        .pet-interactive-hand .pet-hand-svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .pet-interactive-hand .pet-hand-open,
        .pet-interactive-hand .pet-hand-grab {
            display: none;
        }

        /* 撫摸狀態（以手腕為軸心輕柔搖擺） */
        .pet-interactive-hand.is-petting .pet-hand-open {
            display: block;
            animation: handPetSway 0.42s infinite alternate ease-in-out;
            transform-origin: 50% 88%;
        }

        /* 抓取狀態（圓潤手掌捏抓彈性反饋） */
        .pet-interactive-hand.is-grabbing .pet-hand-grab {
            display: block;
            animation: handGrabElastic 0.26s cubic-bezier(0.18, 1.25, 0.32, 1) forwards;
            transform-origin: 50% 50%;
        }

        @keyframes handPetSway {
            0% { transform: rotate(-8deg) translateY(-2px); }
            100% { transform: rotate(7deg) translateY(3px); }
        }

        @keyframes handGrabElastic {
            0% { transform: scale(1.16) rotate(-4deg); }
            65% { transform: scale(0.92) rotate(2deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        /* 手機版：手掌縮小並移到指尖上方，否則整隻手掌會被手指蓋住看不見 */
        @media screen and (max-width: 768px) {
            .pet-interactive-hand {
                width: 44px;
                height: 44px;
                /* 手掌下緣稍微高於指尖：看得到又不會跟手指脫節 */
                transform: translate(-38%, -105%);
            }
            .pet-interactive-hand.is-grabbing {
                /* 抓取時拳心貼著手指上方，海兔就在拳頭下面 */
                transform: translate(-50%, -88%);
            }
        }

        /* 🌟 【餵食互動：拖曳海藻、咀嚼特效與碎屑動畫】 */
        .drag-algae-item {
            position: fixed;
            width: 55px;
            height: 55px;
            pointer-events: none;
            z-index: 99999;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 6px 12px rgba(22, 101, 52, 0.4));
            animation: algaeWobble 0.6s infinite alternate ease-in-out;
        }
        @keyframes algaeWobble {
            0% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
            100% { transform: translate(-50%, -50%) rotate(8deg) scale(1.1); }
        }

        .slug-container.is-chasing-food .slug-svg {
            animation: slugHungryHop 0.35s infinite alternate ease-in-out !important;
        }
        @keyframes slugHungryHop {
            0% { transform: translateY(0) scale(1.08, 0.88); }
            100% { transform: translateY(-32px) scale(0.92, 1.12); }
        }

        /* 😋 嚼嚼嚼本體：腮幫子快速一鼓一縮、上下 Q 彈搖晃 */
        .slug-container.is-eating-munch .slug-svg {
            animation: slugChewingShake 0.16s infinite alternate ease-in-out !important;
        }
        @keyframes slugChewingShake {
            0% { transform: scale(1.1, 0.9) translateY(4px) rotate(-1.5deg); }
            100% { transform: scale(0.95, 1.08) translateY(-4px) rotate(1.5deg); }
        }

        
        /* 😋 吃到海藻時：連續 Q 彈咀嚼（嚼嚼嚼！Nom Nom Nom） */
        .slug-container.is-eating-munch .slug-svg {
            animation: slugNomNomMunch 0.22s infinite alternate ease-in-out !important;
        }
        @keyframes slugNomNomMunch {
            0% { transform: scale(1.08, 0.92) translateY(4px); }
            100% { transform: scale(0.96, 1.05) translateY(-2px); }
        }

        /* 🌟 幸福瞇瞇眼與咀嚼動畫強制覆蓋（摸摸海兔與進食時切換） */
        .slug-container.is-petting .normal-eye,
        .slug-container.is-eating-munch .normal-eye {
            display: none !important;
        }
        .happy-eye {
            display: none;
        }
        .slug-container.is-petting .happy-eye,
        .slug-container.is-eating-munch .happy-eye {
            display: block !important;
        }
        /* 🤡 小丑海兔：原本的眼睛藏起來，改用 jokerExtraSVG 畫的異色瞳（才會疊在紅菱形上面） */
        .slug-container.is-joker .normal-eye:not(.joker-eye),
        .slug-container.is-joker .happy-eye:not(.joker-eye) {
            display: none !important;
        }
        /* 🤡 小丑海兔肚子餓：換成垂下來的沒精神眼睛（摸摸／吃東西時上面的規則一樣會換成瞇瞇眼） */
        .joker-sad-eye { display: none; }
        /* 🤡 小丑海兔吃東西：原本的「、」撇嘴先藏起來，換成嚼嚼嚼的嘴巴（位置在 completeFeedingAction 的 mouthDy） */
        .slug-container.is-eating-munch .joker-mouth { display: none; }
        .slug-container.is-joker.is-starving .joker-eye.normal-eye:not(.joker-sad-eye) { display: none !important; }
        .slug-container.is-joker.is-starving .joker-sad-eye { display: block; }
        /* 🌟 細緻線條嘴巴：咀嚼時一開一張閉合動畫 */
        #chewingLineMouth {
            transform-box: fill-box;
            transform-origin: center center;
            animation: mouthLineChew 0.16s infinite alternate ease-in-out !important;
        }
        @keyframes mouthLineChew {
            0% { 
                /* 閉合咬下：壓平成一條細直小扁線 */
                transform: scale(1.1, 0.2) translateY(1px); 
            }
            100% { 
                /* 嚼開張嘴：拉伸成圓潤的微笑開口弧線 */
                transform: scale(0.85, 1.6) translateY(-1px); 
            }
        }

        /* 🌿 嘴邊柔軟水草：隨嘴巴咀嚼自然波浪甩動、一軟一飄被吸進去 */
        #chewingAlgaePiece {
            transform-box: fill-box;
            transform-origin: 0px 4px; /* 以嘴巴銜接處為旋轉支點 */
            animation: algaeSoftWiggle 0.28s infinite alternate ease-in-out, algaeSuckIn 1.8s forwards ease-in-out !important;
        }
        @keyframes algaeSoftWiggle {
            0% { 
                /* 咬下時：水草尾端受力向左下柔軟彎垂 */
                transform: rotate(-18deg) skewX(-12deg) scale(1, 0.95); 
            }
            50% {
                transform: rotate(-4deg) skewX(6deg) scale(0.98, 1.02);
            }
            100% { 
                /* 嚼開時：水草隨嘴唇向上彈起波浪飄揚 */
                transform: rotate(14deg) skewX(16deg) scale(0.95, 1.05); 
            }
        }
        @keyframes algaeSuckIn {
            0% { 
                opacity: 1; 
                clip-path: inset(0 0 0 0);
            }
            50% { 
                opacity: 0.95; 
            }
            85% { 
                opacity: 0.7; 
            }
            100% { 
                /* 像吃麵條一樣，整根水草被完全吸進嘴中消失 */
                transform: scale(0.15, 0.1) translate(12px, -8px); 
                opacity: 0; 
            }
        }

        /* 水草分叉葉片各自的微波浪晃動 */
        .algae-soft-blade-1 {
            transform-origin: 0% 0%;
            animation: bladeWiggle1 0.22s infinite alternate ease-in-out;
        }
        .algae-soft-blade-2 {
            transform-origin: 0% 0%;
            animation: bladeWiggle2 0.3s infinite alternate ease-in-out;
        }
        @keyframes bladeWiggle1 {
            0% { transform: rotate(-8deg); }
            100% { transform: rotate(10deg); }
        }
        @keyframes bladeWiggle2 {
            0% { transform: rotate(12deg); }
            100% { transform: rotate(-10deg); }
        }

        /* 🌟 嘴邊叼著的海藻：從嘴邊慢慢嚼進肚子裡縮小消失 */
        .eating-algae-prop {
            display: none;
            position: absolute;
            width: 36px;
            height: 36px;
            left: 105px;
            top: 145px;
            z-index: 25;
            pointer-events: none;
        }
        .slug-container.is-eating-munch .eating-algae-prop {
            display: block !important;
            animation: algaeGetEaten 1.4s forwards ease-in-out !important;
        }
        @keyframes algaeGetEaten {
            0% { transform: scale(1.1) rotate(-15deg); opacity: 1; }
            30% { transform: scale(0.85) rotate(10deg); opacity: 1; }
            60% { transform: scale(0.55) rotate(-8deg); opacity: 0.9; }
            85% { transform: scale(0.25) rotate(5deg); opacity: 0.7; }
            100% { transform: scale(0) rotate(0deg); opacity: 0; }
        }

        /* 🌟 嘴裡咬著的海藻漸漸被吃掉縮小動畫 */
        .eating-algae-prop {
            display: none;
            position: absolute;
            width: 32px;
            height: 32px;
            left: 112px;
            top: 148px;
            z-index: 15;
            pointer-events: none;
            transform-origin: right bottom;
        }
        .slug-container.is-eating-munch .eating-algae-prop {
            display: block !important;
            animation: algaeDisappear 1.2s forwards ease-in-out;
        }
        @keyframes algaeDisappear {
            0% { transform: scale(1) rotate(-15deg); opacity: 1; }
            50% { transform: scale(0.6) rotate(10deg); opacity: 0.9; }
            90% { transform: scale(0.2) rotate(-5deg); opacity: 0.8; }
            100% { transform: scale(0) rotate(0deg); opacity: 0; }
        }
/* 🌟 細緻線條嘴巴：咀嚼時一開一張閉合動畫 */
        #chewingLineMouth {
            transform-box: fill-box;
            transform-origin: center center;
            animation: mouthLineChew 0.16s infinite alternate ease-in-out !important;
        }
        @keyframes mouthLineChew {
            0% { transform: scale(1.1, 0.2) translateY(1px); } 
            100% { transform: scale(0.85, 1.6) translateY(-1px); } 
        }

        /* 🌿 嘴邊柔軟水草：以嘴巴中心為支點自然擺動並被吸入 */
        #chewingAlgaePiece {
            transform-box: fill-box;
            transform-origin: center top;
            animation: algaeSoftWiggle 0.28s infinite alternate ease-in-out, algaeSuckIn 1.8s forwards ease-in-out !important;
        }
        @keyframes algaeSoftWiggle {
            0% { transform: rotate(-18deg) skewX(-12deg) scale(1, 0.95); }
            50% { transform: rotate(-4deg) skewX(6deg) scale(0.98, 1.02); }
            100% { transform: rotate(14deg) skewX(16deg) scale(0.95, 1.05); }
        }
        @keyframes algaeSuckIn {
            0% { opacity: 1; }
            50% { opacity: 0.95; }
            85% { opacity: 0.7; }
            100% { transform: scale(0.15, 0.1) translate(12px, -8px); opacity: 0; }
        }

        /* 水草分叉葉片微幅飄動 */
        .algae-soft-blade-1 {
            transform-origin: 0% 0%;
            animation: bladeWiggle1 0.22s infinite alternate ease-in-out;
        }
        .algae-soft-blade-2 {
            transform-origin: 0% 0%;
            animation: bladeWiggle2 0.3s infinite alternate ease-in-out;
        }
        @keyframes bladeWiggle1 {
            0% { transform: rotate(-8deg); }
            100% { transform: rotate(10deg); }
        }
        @keyframes bladeWiggle2 {
            0% { transform: rotate(12deg); }
            100% { transform: rotate(-10deg); }
        }
        /* 🐰 【雙擊召喚】一跳一跳慢慢過來，以及點擊處的漣漪記號 */

        /* 被叫到時先愣一下、耳朵往上提，像是「欸？在叫我？」 */
        .slug-container.is-summon-perk .slug-svg { animation: summonPerk 0.26s ease-out; }
        @keyframes summonPerk {
            0% { transform: scale(1, 1) translateY(0); }
            55% { transform: scale(0.95, 1.07) translateY(-5px); }
            100% { transform: scale(1, 1) translateY(0); }
        }

        /* 每一小跳：蹲下 → 騰空 → 落地壓一下，時間由 JS 的 --hop-ms 控制 */
        .slug-container.is-hop-step .slug-svg { animation: summonHopStep var(--hop-ms, 430ms) ease-in-out; }
        @keyframes summonHopStep {
            0% { transform: scale(1, 1) translateY(0); }
            18% { transform: scale(1.13, 0.87) translateY(7px); }
            48% { transform: scale(0.93, 1.09) translateY(-24px); }
            78% { transform: scale(1.09, 0.91) translateY(3px); }
            100% { transform: scale(1, 1) translateY(0); }
        }
        .summon-ripple {
            position: fixed;
            width: 48px; height: 48px;
            margin: -24px 0 0 -24px;
            border: 4px solid var(--accent-color);
            border-radius: 50%;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.7);
            pointer-events: none;
            opacity: 0;                 /* 關閉動畫時就不要留下一個靜止的圈圈 */
            z-index: 60;
            animation: summonRipple 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }
        @keyframes summonRipple {
            0% { opacity: 0; transform: scale(0.3); }
            12% { opacity: 1; transform: scale(0.6); }
            100% { opacity: 0; transform: scale(3.4); }
        }
        @media (prefers-reduced-motion: reduce) {
            .slug-container.is-hop-step .slug-svg,
            .slug-container.is-summon-perk .slug-svg,
            .summon-ripple { animation: none; }
        }

        /* 🐰 【日常小動作】沒事做的時候，海兔會自己呼吸、眨眼、東張西望 */
        .slug-breath { width: 100%; height: 100%; animation: slugBreathe 4.2s ease-in-out infinite; }
        @keyframes slugBreathe {
            0%, 100% { transform: scale(1, 1) translateY(0); }
            50% { transform: scale(1.02, 0.985) translateY(1.5px); }
        }

        /* 眨眼：眼睛快速壓扁再打開 */
        .normal-eye { transform-box: fill-box; transform-origin: center; }
        .slug-container.idle-blink .normal-eye { animation: slugBlink 0.32s ease-in-out; }
        @keyframes slugBlink {
            0%, 100% { transform: scaleY(1); }
            45%, 60% { transform: scaleY(0.12); }
        }

        /* 耳朵抽動：沿用原本以耳根為軸的設定（旋轉軸在下面 .anim-earL/R 的規則裡），
           keyframes 另外取名，才不會蓋掉平常那個持續擺動的動畫 */
        .slug-container.idle-ear .anim-earL { animation: idleEarFlickL 0.85s ease-in-out !important; }
        .slug-container.idle-ear .anim-earR { animation: idleEarFlickR 0.85s ease-in-out 0.1s !important; }
        @keyframes idleEarFlickL { 0%, 100% { transform: rotate(-6deg); } 35% { transform: rotate(-13deg); } 65% { transform: rotate(-2deg); } }
        @keyframes idleEarFlickR { 0%, 100% { transform: rotate(6deg); } 35% { transform: rotate(13deg); } 65% { transform: rotate(1deg); } }

        /* 東張西望：身體微微左右轉 */
        .slug-container.idle-look .slug-svg { animation: slugLook 2.2s ease-in-out; }
        @keyframes slugLook {
            0%, 100% { transform: rotate(0) translateX(0); }
            25% { transform: rotate(-4deg) translateX(-5px); }
            60% { transform: rotate(4deg) translateX(5px); }
        }

        /* 左右輕輕搖擺 */
        .slug-container.idle-sway .slug-svg { animation: slugSway 2.4s ease-in-out; }
        @keyframes slugSway {
            0%, 100% { transform: rotate(0); }
            25% { transform: rotate(-3deg) translateY(-2px); }
            75% { transform: rotate(3deg) translateY(-2px); }
        }

        /* 伸懶腰：先壓扁再拉長 */
        .slug-container.idle-stretch .slug-svg { animation: slugStretch 1.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes slugStretch {
            0%, 100% { transform: scale(1, 1) translateY(0); }
            30% { transform: scale(1.1, 0.88) translateY(6px); }
            65% { transform: scale(0.93, 1.12) translateY(-10px); }
        }

        /* 打哈欠：慢慢脹大再縮回去 */
        .slug-container.idle-yawn .slug-svg { animation: slugYawn 2s ease-in-out; }
        @keyframes slugYawn {
            0%, 100% { transform: scale(1, 1) rotate(0); }
            35% { transform: scale(1.04, 1.08) rotate(-2deg) translateY(-4px); }
            55% { transform: scale(1.06, 1.1) rotate(2deg) translateY(-5px); }
        }
        .slug-container.idle-yawn .normal-eye { animation: slugBlink 1.1s ease-in-out; }

        /* 原地小跳 */
        .slug-container.idle-hop .slug-svg { animation: slugHop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes slugHop {
            0%, 100% { transform: translateY(0) scale(1, 1); }
            20% { transform: translateY(2px) scale(1.08, 0.92); }
            55% { transform: translateY(-22px) scale(0.94, 1.08); }
            80% { transform: translateY(0) scale(1.05, 0.95); }
        }

        /* 抖抖身體 */
        .slug-container.idle-shake .slug-svg { animation: slugShake 0.7s ease-in-out; }
        @keyframes slugShake {
            0%, 100% { transform: translateX(0) rotate(0); }
            15% { transform: translateX(-5px) rotate(-3deg); }
            40% { transform: translateX(5px) rotate(3deg); }
            65% { transform: translateX(-3px) rotate(-2deg); }
            85% { transform: translateX(2px) rotate(1deg); }
        }

        /* 系統關閉動畫時就別自己動了 */
        @media (prefers-reduced-motion: reduce) {
            .slug-breath, .slug-container[class*="idle-"] .slug-svg,
            .slug-container[class*="idle-"] .normal-eye,
            .slug-container[class*="idle-"] .anim-earL,
            .slug-container[class*="idle-"] .anim-earR { animation: none; }
        }

        .slug-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 15px 15px rgba(0,0,0,0.15)); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2), filter 0.3s ease; pointer-events: none !important; }
        
        /* 兔子的耳朵與尾巴自動擺動動畫 */
        @keyframes earTwitchL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
        @keyframes earTwitchR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } }
        @keyframes tailFluff { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(3deg); } }
        .anim-earL { animation: earTwitchL 3s infinite ease-in-out; transform-origin: 100px 95px; }
        .anim-earR { animation: earTwitchR 3.5s infinite ease-in-out; transform-origin: 145px 90px; }
        .anim-tail { animation: tailFluff 4s infinite ease-in-out; transform-origin: 240px 120px; }

       /* 🌟 【底部操作面板】餵食互動、切換商店與圖鑑 */
        .ui-panel {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 45%;
            background: var(--panel-bg); border-top: 3px solid white; display: flex; flex-direction: column;
            padding: 30px 20px 20px 20px; z-index: 80; border-radius: 40px 40px 0 0; box-shadow: 0 -10px 40px var(--shadow-color);
            /* 🪄 以下是新增的抽屜動畫魔法 */
            transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); 
        }
        
        /* 🌟 當面板被呼叫展開時的樣式 */
        .ui-panel.open {
            transform: translateY(0); /* 回到原位 */
        }
        .interaction-group { display: flex; gap: 15px; margin-bottom: 25px; }
        .btn-interact { flex: 1; background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 22px; padding: 16px 0; color: var(--text-dark); cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: 0.1s; box-shadow: 0 5px 0 var(--border-color); }
        .btn-interact:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0px 0 transparent; background: var(--btn-hover); }
        .btn-interact:disabled { opacity: 0.6; cursor: not-allowed; background: #f1f5f9; border-color: #cbd5e1; box-shadow: 0 5px 0 #cbd5e1; color: #94a3b8; }
        .btn-title { font-size: 1.05rem; font-weight: 900; margin-bottom: 6px; }
        .btn-desc { font-size: 0.8rem; color: var(--text-dim); font-weight: 800;}
/* 🌟 餵食按鈕專屬：膠囊飽食進度條 */
        .hunger-bar-container {
            width: 78%;
            height: 6px;
            background: #e2e8f0;
            border-radius: 10px;
            margin: 2px auto 4px auto;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        }
        .hunger-bar-fill {
            height: 100%;
            width: 100%;
            border-radius: 10px;
            background: linear-gradient(90deg, #4ade80, #22c55e);
            transition: width 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28), background 0.4s ease;
        }
        /* 🌊 【水變髒的提醒】只動外框、光暈和右上角的小圓點，不動 transform，
              才不會跟按下去時往下沉的動畫打架 */
        #btnClean { position: relative; }
        #btnClean.water-warn { border-color: #f59e0b; box-shadow: 0 5px 0 #f59e0b; }
        #btnClean.water-alert { border-color: #ef4444; background: #fff1f2; box-shadow: 0 5px 0 #ef4444; }
        /* 光暈另外畫在 ::after 上：手機版按鈕的 box-shadow 有 !important，直接動按鈕會被蓋掉 */
        #btnClean::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: inherit;
            pointer-events: none;
        }
        #btnClean.water-warn::after { animation: cleanWarnGlow 2.4s ease-in-out infinite; }
        #btnClean.water-alert::after { animation: cleanAlertRing 1.1s ease-out infinite; }
        @keyframes cleanWarnGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
            50% { box-shadow: 0 0 14px 3px rgba(245, 158, 11, 0.5); }
        }
        @keyframes cleanAlertRing {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); }
            100% { box-shadow: 0 0 0 13px rgba(239, 68, 68, 0); }
        }
        /* 右上角的「!」小圓點 */
        .clean-alert-badge {
            display: none;
            position: absolute;
            top: -9px; right: -7px;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: #f59e0b;
            color: #fff;
            font-size: 14px; font-weight: 900; line-height: 22px; text-align: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            pointer-events: none;
        }
        #btnClean.water-warn .clean-alert-badge,
        #btnClean.water-alert .clean-alert-badge { display: block; animation: cleanBadgeBob 1.2s ease-in-out infinite; }
        #btnClean.water-alert .clean-alert-badge { background: #ef4444; }
        @keyframes cleanBadgeBob {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-3px) scale(1.12); }
        }
        @media (prefers-reduced-motion: reduce) {
            #btnClean::after, .clean-alert-badge { animation: none !important; }
        }

        /* 面板標籤與商品網格 */
        .tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 3px solid var(--border-color); padding-bottom: 10px; padding-left: 5px; align-items: center; }
        .tab { background: transparent; border: none; color: var(--text-dim); font-size: 1.1rem; font-weight: 900; cursor: pointer; padding: 8px 16px; border-radius: 15px; transition: 0.2s; }
        .tab:hover { background: var(--btn-hover); }
        .tab.active { color: white; background: var(--text-dark); box-shadow: 0 3px 10px rgba(107, 76, 74, 0.2); }
        .shop-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; overflow-y: auto; padding: 5px 5px 20px 5px; }
        .shop-grid::-webkit-scrollbar { width: 0; }
        .item-card { background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 22px; padding: 18px 10px; text-align: center; cursor: pointer; transition: 0.1s; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 0 var(--border-color); }
        .item-card:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
        .item-card.equipped { border-color: var(--text-dark); background: #ffffff; box-shadow: 0 4px 0 var(--text-dark); }
        .item-color-preview { width: 45px; height: 45px; border-radius: 15px; margin: 0 auto 15px auto; border: 3px solid rgba(0,0,0,0.08); }
        .item-name { font-size: 0.85rem; font-weight: 900; margin-bottom: 10px; color: var(--text-dark); line-height: 1.3;}
        .item-cost { font-size: 0.9rem; font-weight: 900; color: white; background: var(--accent-color); padding: 4px 8px; border-radius: 12px; display: inline-block; margin: 0 auto; }
        .item-cost.owned { background: #e2e8f0; color: var(--text-dim); }
        .item-card.equipped .item-cost.owned { background: var(--text-dark); color: white; }
        /* 🏆 翻牌對決勝場獎勵（小丑海兔）：還沒拿到時顯示要贏幾場 */
        .item-cost.reward-lock { background: #fef3c7; color: #a16207; font-size: 0.78rem; }
        .item-card.is-reward-lock .item-color-preview { opacity: 0.55; filter: grayscale(0.4); }
        /* 還沒拿到的小丑海兔：預覽是問號神秘盒，不露出配色 */
        .item-card.is-reward-lock .item-color-preview.is-mystery {
            opacity: 1; filter: none;
            display: flex; align-items: center; justify-content: center;
            background: radial-gradient(circle at 35% 30%, #4c1d95, #1e1b4b 70%);
            border: 3px solid #a78bfa; color: #fde68a; font-size: 1.4rem; font-weight: 900;
            box-shadow: 0 0 10px rgba(167, 139, 250, 0.55);
        }

        /* 🤡 小丑海兔的神秘介紹（openJokerTeaser）：要蓋過翻牌對決視窗（z-index 9000）和百寶袋（10000） */
        .joker-teaser-overlay { z-index: 10060; }
        .joker-teaser {
            position: relative; max-width: 380px; width: 88%; padding: 22px 0 0;
            max-height: 90vh; max-height: 90dvh; overflow: hidden;
            display: flex; flex-direction: column;
            background: linear-gradient(#fffbeb, #fff); border-color: #c4b5fd;
            box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.35), 0 20px 50px rgba(76, 29, 149, 0.3);
        }
        /* 上面這區可以捲（剪影、介紹、特色），下面固定（進度、按鈕） */
        .joker-teaser-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 4px; }
        .joker-teaser-foot { flex: none; padding: 10px 20px 20px; border-top: 2px solid #ede9fe; background: #fff; }
        .joker-teaser-x {
            position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; border: none; border-radius: 50%;
            background: #ede9fe; color: #6d28d9; font-size: 1rem; font-weight: 900; cursor: pointer;
        }
        .joker-teaser-pic { display: block; width: 130px; margin: 0 auto 2px; filter: drop-shadow(0 6px 10px rgba(30, 27, 75, 0.35)); }
        .joker-teaser-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 900; color: #5b21b6; }
        .joker-teaser-sub { margin: 0 0 10px; font-size: 0.88rem; font-weight: 800; color: #7c6a6a; line-height: 1.5; }
        .joker-teaser-perks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; text-align: left; }
        .joker-teaser-perks li {
            display: flex; gap: 10px; align-items: flex-start; padding: 6px 10px; border-radius: 12px;
            background: #f5f3ff; font-size: 0.78rem; font-weight: 700; color: #6b5f78; line-height: 1.45;
        }
        .joker-teaser-perks b { display: block; font-size: 0.88rem; color: #4c1d95; }
        .joker-teaser-icon { font-size: 1.2rem; line-height: 1.2; }
        .joker-teaser-progress { display: grid; gap: 6px; margin-bottom: 10px; font-size: 0.85rem; font-weight: 900; color: #a16207; }
        .joker-teaser-bar { height: 10px; border-radius: 999px; background: #fef3c7; overflow: hidden; }
        .joker-teaser-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #a78bfa); }
        .joker-teaser-how { margin: 0 0 6px; font-size: 0.82rem; font-weight: 800; color: #7c6a6a; }
        .joker-teaser-ok {
            width: 100%; min-height: 46px; border: none; border-radius: 20px; cursor: pointer;
            background: #8b5cf6; color: #fff; font-size: 1.05rem; font-weight: 900; box-shadow: 0 5px 0 #6d28d9;
        }
        .joker-teaser-ok:active { transform: translateY(5px); box-shadow: none; }

        /* 🌊 【開場動畫】掉進海裡 → 盲盒沉下來 → 打開 */
        #introOverlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            overflow: hidden;
            background: #06355c;
            /* 不給跳過，所以不要有「可以點」的游標 */
            cursor: default;
            /* 離場不再寫死在動畫裡：要等資料載完，由 JS 加上 .is-leaving 才走 */
            animation: blastShake 0.5s 3.2s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        }
        #introOverlay.is-leaving { animation: introOut 0.8s ease-in forwards; }
        /* 整個水下世界一起往上跑，做出鏡頭往下沉的感覺 */
        .intro-world {
            position: absolute;
            left: 0; right: 0; top: 0;
            height: 300vh; height: 300dvh;
            animation: introDive 2.2s cubic-bezier(0.5, 0, 0.3, 1) forwards;
        }
        /* 上面 100vh 是天空，下面 200vh 是越來越深的海 */
        .intro-sea {
            position: absolute; left: 0; right: 0; top: 100vh; height: 200vh; height: 200dvh;
            background: linear-gradient(180deg, #a7e4ff 0%, #4fb4e8 12%, #2a90cf 30%, #1a6fae 52%, #0d4c80 76%, #06355c 100%);
        }
        .intro-sky {
            position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh;
            background: linear-gradient(180deg, #eaf8ff 0%, #cdeeff 55%, #a7e4ff 100%);
        }
        /* 海面那條亮線 */
        .intro-surface {
            position: absolute; left: -10%; right: -10%; top: 100vh;
            height: 12px; margin-top: -6px;
            background: linear-gradient(90deg, rgba(255,255,255,0), #ffffff, rgba(255,255,255,0));
            filter: blur(2px);
            opacity: 0.95;
        }
        .intro-ray {
            position: absolute; top: 100vh;
            width: 12%; height: 120vh; height: 120dvh;
            background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
            transform: skewX(-10deg);
            filter: blur(6px);
            opacity: 0;
            animation: introRay 2.6s ease-in-out infinite;
        }
        /* 入水的水花圈 */
        .intro-splash {
            position: absolute; left: 50%; top: 100vh;
            width: 14vmin; height: 14vmin;
            margin: -7vmin 0 0 -7vmin;
            border: 4px solid rgba(255,255,255,0.9);
            border-radius: 50%;
            opacity: 0;
            animation: introSplash 0.9s 0.62s ease-out forwards;
        }
        .intro-bubbles { position: absolute; inset: 0; pointer-events: none; }
        .intro-bubbles span {
            position: absolute;
            bottom: -8%;
            background: rgba(255,255,255,0.55);
            border: 1px solid rgba(255,255,255,0.8);
            border-radius: 50%;
            animation: introBubble 3.4s linear infinite;
        }
        /* 漂流瓶：落水後緩緩下沉、慢慢脹大，最後整個炸開 */
        .intro-bottle {
            position: absolute; left: 50%; top: 50%;
            width: 34vmin; height: 34vmin;
            margin: -17vmin 0 0 -17vmin;
            animation: bottleFall 1.25s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
        }
        .bottle-bob { width: 100%; height: 100%; animation: bottleBob 2.4s 1.25s ease-in-out infinite; }
        /* 慢慢脹大，越大代表裡面越擠、快撐不住了 */
        .bottle-grow {
            width: 100%; height: 100%;
            animation: bottleGrow 1.6s 1.6s cubic-bezier(0.5, 0, 0.7, 0) forwards,
                       bottleBlast 0.26s 3.16s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }
        .bottle-shake {
            width: 100%; height: 100%; position: relative;
            transform: rotate(-14deg);
            animation: bottleTremble 0.5s 1.9s ease-in-out 4;
        }
        .bottle-glass {
            position: absolute; left: 50%; top: 50%;
            width: 58%; height: 100%;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 8px 18px rgba(3, 40, 70, 0.45));
        }
        .bottle-cork {
            position: absolute; left: 50%; top: 3%;
            width: 12%; height: 8%;
            margin-left: -6%;
            background: linear-gradient(180deg, #d9a86a, #b3773c);
            border: 2px solid #8d5a28;
            border-radius: 4px;
        }
        /* 瓶子裡的問號海兔：隔著玻璃晃來晃去，越接近爆炸越不安分 */
        .bunny-inside {
            position: absolute; left: 50%; top: 60%;
            width: 47%; height: auto;
            transform: translate(-50%, -50%);
            transform-origin: 50% 60%;
            opacity: 0.95;
            animation: bunnyWriggle 0.9s 1.4s ease-in-out 5;
        }

        /* 爆炸瞬間的滿版白閃 */
        .blast-white {
            position: absolute; inset: 0;
            background: #ffffff;
            opacity: 0;
            pointer-events: none;
            animation: blastWhite 0.42s 3.22s ease-out forwards;
        }
        /* 爆炸：白光、衝擊波、碎玻璃與水花 */
        .blast { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
        .blast-flash {
            position: absolute; left: 50%; top: 50%;
            width: 26vmin; height: 26vmin; margin: -13vmin 0 0 -13vmin;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, rgba(214,246,255,0.92) 38%, rgba(140,220,255,0) 72%);
            opacity: 0;
            animation: blastFlash 0.55s 3.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
        }
        .blast-ring {
            position: absolute; left: 50%; top: 50%;
            width: 16vmin; height: 16vmin; margin: -8vmin 0 0 -8vmin;
            border: 4px solid rgba(255,255,255,0.9);
            border-radius: 50%;
            opacity: 0;
            animation: blastRing 0.65s 3.21s cubic-bezier(0.05, 0.85, 0.2, 1) forwards;
        }
        .blast-ring.delay { animation-delay: 3.32s; border-width: 2px; }
        .shard {
            position: absolute; left: 50%; top: 50%;
            width: 4.4vmin; height: 5.8vmin; margin: -2.9vmin 0 0 -2.2vmin;
            background: linear-gradient(140deg, #f2ffff 0%, #b6e8e6 45%, #5aa9ad 100%);
            clip-path: polygon(50% 0%, 100% 62%, 62% 100%, 8% 74%);
            filter: drop-shadow(0 2px 5px rgba(2, 30, 55, 0.55));
            opacity: 0;
            animation: shardFly 0.95s 3.2s cubic-bezier(0.05, 0.85, 0.2, 1) forwards;
        }

        .debris {
            position: absolute; left: 50%; top: 50%;
            aspect-ratio: 1;
            margin: -0.5vmin 0 0 -0.5vmin;
            background: #eafcff;
            border-radius: 50%;
            opacity: 0;
            animation: debrisFly 0.7s 3.2s cubic-bezier(0.05, 0.9, 0.2, 1) forwards;
        }

        /* 炸出來的問號海兔：從中心往外飛，邊轉邊淡掉 */
        .q-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
        .q-fly {
            position: absolute; left: 0; top: 0;
            height: auto;
            transform: translate(-50%, -50%) scale(0.2);
            opacity: 0;
            filter: drop-shadow(0 4px 10px rgba(0, 25, 45, 0.45));
            animation: qFly 1.5s cubic-bezier(0.05, 0.88, 0.18, 1) forwards;
        }

        @keyframes bottleFall {
            0% { transform: translateY(-95vh) rotate(-30deg) scale(0.82); }
            55% { transform: translateY(6vh) rotate(-8deg) scale(1.02); }
            75% { transform: translateY(-2vh) rotate(-18deg) scale(1); }
            100% { transform: translateY(0) rotate(-12deg) scale(1); }
        }
        @keyframes bottleBob {
            0%, 100% { transform: translateY(0) rotate(-3deg); }
            50% { transform: translateY(-2.4vmin) rotate(3deg); }
        }
        @keyframes bottleGrow {
            0% { transform: scale(1); }
            70% { transform: scale(1.55); }
            100% { transform: scale(2.05); }
        }
        /* 炸開的瞬間再撐一下就整個不見 */
        @keyframes bottleBlast {
            0% { transform: scale(2.05); opacity: 1; }
            18% { transform: scale(1.72); opacity: 1; }
            42% { transform: scale(3.6); opacity: 0.55; }
            100% { transform: scale(4.6); opacity: 0; }
        }
        @keyframes bottleTremble {
            0%, 100% { transform: rotate(-14deg) translateX(0); }
            25% { transform: rotate(-19deg) translateX(-0.9vmin); }
            75% { transform: rotate(-9deg) translateX(0.9vmin); }
        }
        @keyframes bunnyWriggle {
            0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
            35% { transform: translate(-50%, -52%) scale(0.94, 1.08) rotate(6deg); }
            70% { transform: translate(-50%, -48%) scale(1.08, 0.92) rotate(-4deg); }
        }
        @keyframes blastFlash {
            0% { opacity: 0; transform: scale(0.2); }
            8% { opacity: 1; transform: scale(1.9); }
            100% { opacity: 0; transform: scale(4.2); }
        }
        @keyframes blastRing {
            0% { opacity: 1; transform: scale(0.2); }
            100% { opacity: 0; transform: scale(5.5); }
        }
        @keyframes blastWhite {
            0% { opacity: 0; }
            10% { opacity: 0.92; }
            100% { opacity: 0; }
        }
        @keyframes blastShake {
            0%, 100% { transform: translate(0, 0); }
            12% { transform: translate(1.6vmin, -1.2vmin); }
            26% { transform: translate(-1.8vmin, 1vmin); }
            40% { transform: translate(1.2vmin, 1.4vmin); }
            56% { transform: translate(-1vmin, -0.8vmin); }
            72% { transform: translate(0.6vmin, 0.5vmin); }
            88% { transform: translate(-0.3vmin, -0.2vmin); }
        }
        @keyframes debrisFly {
            0% { opacity: 1; transform: translate(0, 0) scale(1); }
            100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
        }
        @keyframes shardFly {
            0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.5); }
            55% { opacity: 1; transform: translate(calc(var(--sx) * 0.8), calc(var(--sy) * 0.8)) rotate(calc(var(--sr) * 0.7)) scale(1.05); }
            100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0.9); }
        }
        @keyframes qFly {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15) rotate(0); }
            5% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(calc(var(--rot) * 0.1)); }
            65% { opacity: 1; transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) scale(var(--s, 1)) rotate(calc(var(--rot) * 0.8)); }
            100% { opacity: 0; transform: translate(calc(var(--tx) * 1.25 - 50%), calc(var(--ty) * 1.25 - 50%)) scale(var(--s, 0.9)) rotate(var(--rot)); }
        }

        .intro-title {
            position: absolute; left: 0; right: 0; top: 74%;
            text-align: center;
            font-size: clamp(1.6rem, 6vmin, 2.6rem);
            font-weight: 900;
            color: #ffffff;
            letter-spacing: 3px;
            text-shadow: 0 4px 18px rgba(0, 60, 110, 0.6);
            opacity: 0;
            animation: introTitle 1s 3.9s ease-out forwards;
        }
        /* 載入進度：動畫底下那條，讓玩家知道這幾秒不是在發呆 */
        .intro-loading {
            position: absolute; left: 0; right: 0;
            bottom: calc(6% + env(safe-area-inset-bottom, 0px));
            padding: 0 24px;
            text-align: center;
            opacity: 0;
            animation: introLoadIn 0.6s 1.4s ease-out forwards;
        }
        .intro-bar {
            width: min(260px, 64vw);
            height: 8px;
            margin: 0 auto 10px;
            border-radius: 99px;
            background: rgba(255, 255, 255, 0.22);
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
        }
        .intro-bar-fill {
            width: 0;
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg, #8ee3ff, #ffffff);
            box-shadow: 0 0 12px rgba(160, 230, 255, 0.85);
            transition: width 0.3s ease-out;
        }
        .intro-load-text {
            font-size: 0.85rem;
            font-weight: 900;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 2px 8px rgba(0, 40, 75, 0.6);
        }

        @keyframes introDive {
            0% { transform: translateY(-40vh); }
            22% { transform: translateY(-52vh); }
            52% { transform: translateY(-118vh); }
            100% { transform: translateY(-190vh); }
        }
        @keyframes introRay { 0%, 100% { opacity: 0; } 45% { opacity: 0.45; } }
        @keyframes introSplash {
            0% { opacity: 0.95; transform: scale(0.2); }
            100% { opacity: 0; transform: scale(2.6); }
        }
        @keyframes introBubble {
            0% { transform: translateY(0) scale(0.7); opacity: 0; }
            15% { opacity: 0.8; }
            100% { transform: translateY(-115vh) scale(1.1); opacity: 0; }
        }
        @keyframes introTitle {
            0% { opacity: 0; transform: translateY(14px) scale(0.92); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes introLoadIn { 0% { opacity: 0; } 100% { opacity: 1; } }
        @keyframes introOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

        /* 系統關掉動畫時，不做任何位移；離場一樣等資料載完才由 JS 觸發 */
        @media (prefers-reduced-motion: reduce) {
            #introOverlay { animation: none; }
            #introOverlay.is-leaving { animation: introOut 0.4s ease-in forwards; }
            .intro-loading { animation: none; opacity: 1; }
            .intro-bar-fill { transition: none; }
            .intro-world, .intro-ray, .intro-splash, .intro-bubbles span,
            .intro-bottle, .bottle-bob, .bottle-grow, .bottle-shake,
            .bunny-inside, .blast-white, .blast-flash, .blast-ring, .shard, .debris, .q-fly { animation: none; }
        }

        /* ✨ 【敬請期待卡】流光掃過、星星上浮，讓人期待下一次更新 */
        .item-card.coming-soon {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border-style: dashed;
            border-color: #c7b2f5;
            box-shadow: 0 4px 0 #c7b2f5;
            background: linear-gradient(180deg, #fffdf7 0%, #f6f0ff 100%);
            animation: csBreathe 2.8s ease-in-out infinite;
        }
        /* 斜斜的一道光每隔幾秒掃過卡片 */
        .item-card.coming-soon::after {
            content: "";
            position: absolute;
            top: -60%;
            left: -140%;
            width: 60%;
            height: 220%;
            background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
            transform: rotate(14deg);
            animation: csSweep 3.6s ease-in-out infinite;
            pointer-events: none;
        }
        .coming-soon-box {
            position: relative;
            overflow: visible;
            border: 3px dashed rgba(139, 92, 246, 0.35) !important;
            background: linear-gradient(120deg, #ffd6ec, #d7c4ff, #bfe6ff, #ffe6b8, #ffd6ec);
            background-size: 320% 320%;
            animation: csFlow 6s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .coming-soon-box .cs-mark {
            font-size: 1.75rem;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 2px 6px rgba(124, 58, 237, 0.45);
            animation: csBob 1.9s ease-in-out infinite;
        }
        /* 小星星用 CSS 畫出來，畫面上不出現任何符號字元 */
        .coming-soon-box .cs-spark {
            position: absolute;
            bottom: -2px;
            width: 10px;
            height: 10px;
            background: #ffffff;
            clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
            filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.8));
            opacity: 0;
            animation: csRise 2.9s ease-in-out infinite;
            pointer-events: none;
        }
        .item-cost.coming-soon-tag {
            background: linear-gradient(135deg, #a78bfa, #f0abfc);
            color: #ffffff;
            letter-spacing: 0.5px;
            box-shadow: 0 3px 10px rgba(167, 139, 250, 0.45);
        }
        /* 被點到時彈一下，像在說「還沒好啦～」 */
        .item-card.coming-soon.cs-poke { animation: csPoke 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

        @keyframes csBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
        @keyframes csSweep { 0%, 62% { left: -140%; } 100% { left: 160%; } }
        @keyframes csFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        @keyframes csBob { 0%, 100% { transform: translateY(0) scale(1) rotate(-4deg); } 50% { transform: translateY(-4px) scale(1.12) rotate(4deg); } }
        @keyframes csRise {
            0% { opacity: 0; transform: translateY(0) scale(0.6); }
            25% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-62px) scale(1.2); }
        }
        @keyframes csPoke {
            0%, 100% { transform: translateY(0) rotate(0); }
            25% { transform: translateY(-6px) rotate(-3deg) scale(1.04); }
            60% { transform: translateY(0) rotate(3deg) scale(0.99); }
        }
        @media (prefers-reduced-motion: reduce) {
            .item-card.coming-soon, .item-card.coming-soon::after,
            .coming-soon-box, .coming-soon-box .cs-mark, .coming-soon-box .cs-spark { animation: none; }
        }

        /* 🌟 【第一次玩的新手抽獎畫面】 */
        .gacha-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background: rgba(255, 240, 245, 0.95); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s; }
        .gacha-box { width: 160px; height: 160px; background: white; border: 5px dashed var(--accent-color); border-radius: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 40px; transition: 0.2s; color: var(--accent-color); font-size: 1.4rem; font-weight: 900; box-shadow: 0 15px 35px rgba(255, 182, 193, 0.3); animation: breatheBox 2s infinite ease-in-out; }
        @keyframes breatheBox { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
        .gacha-box:active { transform: scale(0.95); animation: none; }
        .gacha-title { font-size: 2.2rem; margin-bottom: 30px; font-weight: 900; color: var(--text-dark); text-shadow: 0 4px 10px rgba(255,255,255,0.8); }
        .start-btn { background: var(--text-dark); color: white; border: none; padding: 16px 50px; border-radius: 35px; font-weight: 900; font-size: 1.3rem; cursor: pointer; display: none; box-shadow: 0 6px 0 rgba(0,0,0,0.15); transition: 0.1s; }
        .start-btn:active { transform: translateY(6px); box-shadow: 0 0 0 transparent; }

        /* 🌟 【全域浮動通知文字：清晰停留版】
           所有提示都放在這一層裡，同時出現時會由上往下排隊，不會互相蓋住 */
        #floatTextLayer {
            position: fixed;
            top: 16%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            width: max-content;
            max-width: min(88vw, 560px);
            pointer-events: none;
            z-index: 999999;
        }
        .float-text {
            position: relative;
            max-width: 100%;
            color: var(--text-dark);
            background: rgba(255, 255, 255, 0.96);
            border: 3px solid var(--border-color);
            padding: 12px 28px;
            border-radius: 30px;
            font-weight: 900;
            font-size: 1.2rem;
            line-height: 1.45;
            text-align: center;
            pointer-events: none;
            box-shadow: 0 8px 25px var(--shadow-color);
            /* 這裡刻意不用 backdrop-filter：底色本來就接近不透明，
               但換背景的瞬間 backdrop-filter 會殘留上一張背景的取樣，
               在畫面上留下一塊顏色明顯偏掉的方形，直到提示消失 */
            white-space: normal;
            word-break: break-word;
            animation: floatNoticeStay 2.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
        }
        /* 進場快、退場慢，中間九成的時間都停在原地讓人看完 */
        @keyframes floatNoticeStay {
            0% { opacity: 0; transform: translateY(14px) scale(0.78); }
            6% { opacity: 1; transform: translateY(0) scale(1.05); }
            11% { transform: translateY(0) scale(1); }
            88% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-18px) scale(0.94); }
        }
        @media (max-width: 768px) {
            #floatTextLayer { top: 23%; max-width: 90vw; gap: 8px; }
            .float-text { font-size: 1rem; padding: 10px 18px; border-width: 2px; }
        }

        /* 🌟 14天簽到網格樣式 */
        .checkin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 15px 0; max-height: 40vh; max-height: 40dvh; overflow-y: auto; padding-right: 5px; }
        .checkin-grid::-webkit-scrollbar { width: 4px; }
        .checkin-grid::-webkit-scrollbar-thumb { background: #ffd1dc; border-radius: 4px; }
        
        .checkin-day { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 10px 4px; text-align: center; color: #94a3b8; font-weight: 900; transition: 0.3s; position: relative; }
        
        /* 🌟 簽到過的格子會亮黃色並打勾 */
        .checkin-day.claimed { background: #fef08a; border-color: #fde047; color: #ca8a04; }
        .checkin-day.claimed::after { content: '✔️'; position: absolute; top: -8px; right: -5px; font-size: 1.1rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }
        
        /* 🌟 今天該簽到的那格會跳動提示 */
        .checkin-day.today { border-color: #f43f5e; background: #fff1f2; color: #e11d48; animation: pulseDay 1.5s infinite; cursor: pointer; box-shadow: 0 0 10px rgba(244, 63, 94, 0.3); }
        @keyframes pulseDay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

        /* 🌟 只有純禮物盒的透明按鈕 */
        .btn-pure-gift { background: transparent; border: none; padding: 0; margin-left: 10px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; }
        .btn-pure-gift:active { transform: scale(0.92); }
        
        /* 🌟 禮物盒 SVG 動畫設定 */
        .gift-svg { width: 38px; height: 38px; filter: drop-shadow(0px 3px 5px rgba(244,63,94,0.4)); overflow: visible; }
        
        /* 蓋子的旋轉中心點設在右下角，這樣打開時會往右上方翻 */
        .gift-lid { transform-origin: 80% 40%; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        
        /* 當被加上 is-opening 類別時，播放蓋子飛走的動畫 */
        @keyframes lidPopOff {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            40% { transform: translateY(-15px) rotate(15deg); opacity: 1; }
            100% { transform: translateY(-35px) translateX(10px) rotate(35deg); opacity: 0; }
        }
        .gift-svg.is-opening .gift-lid { animation: lidPopOff 0.5s forwards ease-in; }

        /* 🌟 以下是新增的：禮物盒的呼吸發光誘惑 */
        @keyframes giftBreathe {
            0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0px 3px 5px rgba(244,63,94,0.4)); }
            50% { transform: scale(1.08) translateY(-3px); filter: drop-shadow(0px 8px 15px rgba(244,63,94,0.8)); }
        }
        /* 當按鈕被加上 needs-attention 標籤時，禮物盒就會開始呼吸 */
        .btn-pure-gift.needs-attention .gift-svg { animation: giftBreathe 2s infinite ease-in-out; }

        /* 🌟 以下是新增的：無法抗拒的靈魂小紅點 */
        .gift-noti-dot { position: absolute; top: -2px; right: -5px; width: 12px; height: 12px; background: #ef4444; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); display: none; z-index: 10; }
        /* 只有沒領獎時，小紅點才會出現並跳動 */
        .btn-pure-gift.needs-attention .gift-noti-dot { display: block; animation: pulseDay 1.5s infinite; }
        @keyframes floatUp { 0% { opacity: 1; transform: translate(-50%, 0) scale(0.5); } 50% { transform: translate(-50%, -50px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1); } }
/* 🌟 隱蔽在左下角角落的精緻色系小方塊列 */
    #paintPalettePanel {
        position: absolute;
        bottom: 47%;
        left: 20px;
        display: none;
        gap: 8px;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.75);
        padding: 8px;
        border-radius: 15px;
        border: 2px solid var(--border-color);
        box-shadow: 0 4px 12px var(--shadow-color);
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .palette-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 2px solid #ffffff;
        cursor: pointer;
        transition: 0.2s;
        padding: 0;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(0,0,0,0.15);
    }
    .palette-btn:hover {
        transform: scale(1.12);
    }
    .palette-btn.active {
        border-color: var(--text-dark);
        transform: scale(1.18);
        box-shadow: 0 0 15px var(--accent-color), 0 0 5px rgba(0,0,0,0.3);
    }
    .palette-btn:nth-child(1) {
        background: linear-gradient(135deg, #ff3b30, #ffcc00);
    }
    .palette-btn:nth-child(2) {
        background: linear-gradient(135deg, #007aff, #38bdf8);
    }
    .palette-btn:nth-child(3) {
        background: linear-gradient(135deg, #ec4899, #c084fc);
    }
        /* 🌟 【寵物名字標籤與命名彈窗】 */
        .pet-name-tag { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); background: transparent; border: none; padding: 0; font-weight: 900; color: var(--text-dark); font-size: 1.35rem; letter-spacing: 2px; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, 2px 0px 0 #fff, -2px 0px 0 #fff, 0px 5px 10px rgba(0,0,0,0.2); white-space: nowrap; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); z-index: 20; }
       /* 🌟 讓取好名字的標籤依然可以點擊，用來觸發警告 */
        .pet-name-tag.named { cursor: pointer; }
        .pet-name-tag:hover:not(.named) { transform: translateX(-50%) scale(1.1); text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, 2px 0px 0 #fff, -2px 0px 0 #fff, 0px 6px 15px rgba(255, 182, 193, 0.8); }
        .pet-name-tag:active:not(.named) { transform: translateX(-50%) scale(0.95); }

        .name-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background: rgba(255, 240, 245, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 10000; display: none; align-items: center; justify-content: center; }
        .name-modal { background: #fff; width: 85%; max-width: 340px; border-radius: 35px; border: 4px solid var(--border-color); padding: 30px 25px; text-align: center; box-shadow: 0 20px 50px rgba(255, 182, 193, 0.4); animation: popIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
        @keyframes popIn { 0% { transform: scale(0.8) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
        .name-input { width: 100%; padding: 14px 15px; border: 3px solid var(--border-color); border-radius: 20px; font-size: 1.1rem; font-weight: 900; color: var(--text-dark); margin: 15px 0 20px 0; text-align: center; outline: none; transition: 0.2s; background: var(--card-bg); }
        .name-input:focus { border-color: var(--accent-color); background: #fff; }
        .modal-btns { display: flex; gap: 12px; justify-content: center; }
        .modal-btn { flex: 1; padding: 14px 0; min-height: 48px; border: none; border-radius: 20px; font-weight: 900; font-size: 1.1rem; cursor: pointer; transition: 0.1s; }
        .btn-cancel { background: #f1f5f9; color: var(--text-dim); }
        .btn-confirm { background: var(--text-dark); color: white; box-shadow: 0 5px 0 rgba(0,0,0,0.15); }
        .btn-confirm:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }
        .btn-random { background: var(--accent-color); color: white; margin-bottom: 5px; width: 100%; box-shadow: 0 5px 0 rgba(255, 182, 193, 0.8); }
        .btn-random:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }

        /* 🚪 【加入房間】邀請碼輸入視窗 */
        .join-room-modal { padding-top: 24px; }
        .join-room-modal.shake { animation: joinShake 0.4s ease-in-out; }
        @keyframes joinShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-8px); }
            40% { transform: translateX(7px); }
            60% { transform: translateX(-5px); }
            80% { transform: translateX(3px); }
        }
        .join-room-icon { width: 56px; height: 56px; display: block; margin: 0 auto 6px; }
        .join-room-title { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--text-dark); }
        .join-room-sub { margin: 6px 0 0; font-size: 0.92rem; font-weight: 800; color: var(--text-dim); }

        /* 6 格邀請碼：一個透明的輸入框蓋在 6 個格子上面 */
        .join-code { position: relative; display: flex; justify-content: center; gap: 8px; margin: 20px 0 6px; cursor: text; }
        .join-code input {
            position: absolute; inset: 0; width: 100%; height: 100%;
            z-index: 2; border: none; outline: none; background: transparent;
            color: transparent; caret-color: transparent; text-shadow: none;
            font-size: 16px;   /* 小於 16px 的話 iPhone 一點下去就會自動放大畫面 */
            letter-spacing: 0; padding: 0; cursor: text;
        }
        .join-code input::selection { background: transparent; }
        .join-code-slot {
            flex: 1 1 0; min-width: 0; max-width: 46px; aspect-ratio: 4 / 5;
            display: flex; align-items: center; justify-content: center;
            border: 3px solid var(--border-color); border-radius: 14px;
            background: var(--card-bg);
            font-size: 1.55rem; font-weight: 900; color: var(--text-dark);
            transition: border-color 0.15s, background 0.15s, transform 0.15s;
        }
        .join-code-slot.filled { border-color: var(--accent-color); background: #fff; }
        /* 正在打的那一格：外框變深，底部有一條會閃的游標 */
        .join-code.focused .join-code-slot.active { border-color: var(--text-dark); background: #fff; transform: translateY(-2px); position: relative; }
        .join-code.focused .join-code-slot.active::after {
            content: ''; position: absolute; bottom: 9px; width: 40%; height: 3px; border-radius: 3px;
            background: var(--text-dark); animation: joinCaret 1s steps(1) infinite;
        }
        @keyframes joinCaret { 50% { opacity: 0; } }
        .join-code.error .join-code-slot { border-color: #ef4444; }

        .join-room-error { min-height: 1.4em; margin-bottom: 14px; font-size: 0.9rem; font-weight: 800; color: #ef4444; }
        #btnJoinConfirm:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
        @media (prefers-reduced-motion: reduce) {
            .join-room-modal.shake, .join-code-slot.active::after { animation: none; }
        }

        /* 🌟 【懸浮挑釁按鈕】裝備回城特效時才會顯示 */
        #floatingRecallBtn { position: absolute; display: none; z-index: 25; background: #fef08a; color: #78350f; border: 3px solid #f59e0b; padding: 8px 16px; border-radius: 20px; font-weight: 900; font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4); transition: transform 0.1s; white-space: nowrap; }
        #floatingRecallBtn:active { transform: scale(0.95); }
        @keyframes trueHorizontalFlip { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
        .slug-svg.is-spinning-taunt { animation: trueHorizontalFlip 0.6s ease-in-out; }
#customTauntBtn {
        position: fixed;
        bottom: 48%; /* 讓它安全懸浮在下方商店面板的上方，絕不掉進選單裡！ */
        right: 25px;
        z-index: 999999;
        background: linear-gradient(135deg, #38bdf8, #0284c7);
        color: white;
        border: 3px solid #e0f2fe;
        padding: 12px 20px;
        border-radius: 25px;
        font-weight: 900;
        font-size: 0.95rem;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(56, 189, 248, 0.6);
        transition: 0.1s;
        pointer-events: auto !important;
    }
    #customTauntBtn:active { transform: scale(0.95); }
/* 🌟 踩水生成的水波漣漪（高圖層、晶瑩透亮擴散版） */
.duck-step-ripple {
    position: absolute;
    width: 65px; 
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* 提升至高於濾鏡層的 z-index，保證不被水坑霧氣吃掉！ */
    z-index: 10 !important;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7), inset 0 0 6px rgba(186, 230, 253, 0.6);
    animation: stepRippleExpand 1.1s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes stepRippleExpand {
    0% { 
        transform: translate(-50%, -50%) scale(0.3); 
        opacity: 0.95; 
        border-width: 2.5px; 
    }
    60% { 
        opacity: 0.6; 
    }
    100% { 
        transform: translate(-50%, -50%) scale(2.2); 
        opacity: 0; 
        border-width: 1px; 
    }
}

/* 🌟 抱花小鴨本體容器 */
.giant-roaming-duck {
    position: absolute;
    width: 165px; height: 165px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 12;
    transform-origin: center bottom;
    transition: transform 0.15s ease-out;
}
.giant-roaming-duck:active {
    transform: scale(1.25) rotate(-12deg) !important;
}

/* 🌟 經典小鴨呆萌搖擺走姿 (身體大幅度左右搖晃 + 上下 Q 彈跳動) */
.duck-waddle-body {
    width: 100%; height: 100%;
    transform-origin: 50% 90%;
    animation: duckCuteWaddle 0.6s infinite alternate ease-in-out;
}
@keyframes duckCuteWaddle {
    0% { transform: rotate(-9deg) translateY(-8px) scale(0.97, 1.03); }
    50% { transform: rotate(0deg) translateY(0px) scale(1.04, 0.96); }
    100% { transform: rotate(9deg) translateY(-8px) scale(0.97, 1.03); }
}

/* 🌟 左右橘色腳蹼一上一下交替抬起與踩地 */
.duck-foot-left {
    transform-origin: 50% 10%;
    animation: duckStepL 0.6s infinite alternate ease-in-out;
}
.duck-foot-right {
    transform-origin: 50% 10%;
    animation: duckStepR 0.6s infinite alternate ease-in-out;
}
@keyframes duckStepL {
    0% { transform: translateY(-14px) rotate(-22deg) scale(0.9); }
    50% { transform: translateY(0px) rotate(0deg) scale(1); }
    100% { transform: translateY(3px) rotate(8deg) scale(1.05); }
}
@keyframes duckStepR {
    0% { transform: translateY(3px) rotate(-8deg) scale(1.05); }
    50% { transform: translateY(0px) rotate(0deg) scale(1); }
    100% { transform: translateY(-14px) rotate(22deg) scale(0.9); }
}

/* 鴨子兩側手繪動態搖擺線微震動 */
.duck-vibe-lines {
    animation: duckVibeShake 0.3s infinite alternate ease-in-out;
}
@keyframes duckVibeShake {
    0% { opacity: 0.3; transform: scale(0.95); }
    100% { opacity: 0.9; transform: scale(1.05); }
}

/* 🌟 鴨子身邊到處飄落的浪漫小花瓣 */
.duck-flower-petal {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 900;
    pointer-events: none;
    z-index: 20;
    animation: petalFloatUp 1.4s ease-out forwards;
}
@keyframes petalFloatUp {
    0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
    20% { opacity: 1; transform: translate(var(--ndx), -15px) scale(1.2) rotate(15deg); }
    80% { opacity: 0.9; }
    100% { transform: translate(calc(var(--ndx) * 1.8), -65px) scale(0.8) rotate(-20deg); opacity: 0; }
}
/* 🌟 魔法 2：手機版專屬響應式排版 (當螢幕寬度小於 768px 時自動發動) */
        @media screen and (max-width: 768px) {
            /* 讓底板在手機上長高一點，才裝得下滿滿的特效商品 */
            .ui-panel {
                height: 55%; 
                padding: 20px 15px 15px 15px; /* 把留白縮小，擠出更多實用空間 */
                border-radius: 30px 30px 0 0; 
            }
            
            /* 上半部舞台稍微縮小一點點，把空間讓給下面的面板 */
            .stage {
                height: 50%;
            }

            /* 讓上方的互動按鈕變緊湊一點 */
            .interaction-group {
                margin-bottom: 15px; 
                gap: 10px;
            }
            .btn-interact {
                padding: 12px 0;
                border-radius: 18px;
            }
            .btn-title {
                font-size: 0.95rem;
                margin-bottom: 4px;
            }

            /* 手機版讓海兔往上站一點，才不會被底部按鈕擋住臉；
               大小交給 JS 算出的 --slug-scale，不在這裡寫死 */
            .slug-container {
                top: calc(42% - 120px);
            }

            /* 商店網格縮小間距，一排可以塞下更多商品，滑動更順暢 */
            .shop-grid {
                gap: 10px;
                grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
            }
        }
        /* 🌟 極窄螢幕（iPhone SE 之類的 320px）：把底部那排按鈕再縮一點 */
        @media screen and (max-width: 360px) {
            .interaction-group { width: calc(100% - 16px); gap: 4px !important; }
            .btn-interact { padding: 9px 1px !important; }
            .btn-title { font-size: 0.68rem !important; letter-spacing: -0.3px; }
            #btnOpenShop, #uiPanel.open > button[onclick="toggleShopPanel()"] {
                width: 48px !important; height: 48px !important;
                bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        /* 🌟 矮螢幕（手機橫放）：商店彈窗要縮短，不然格線會掉出畫面外 */
        @media screen and (max-height: 520px) {
            .ui-panel.open .tabs { padding: 12px 15px 8px 15px; }
            .ui-panel.open .shop-grid {
                max-height: calc(100vh - 150px);
                max-height: calc(100dvh - 150px);
                padding-bottom: 56px;
            }
            #btnOpenShop, #uiPanel.open > button[onclick="toggleShopPanel()"] {
                bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
            }
            .interaction-group { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
            .name-modal { max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
        }

        /* 🌟 小手機（320～360 寬）：分頁字縮小，英文「Species / Background / Effects」放不下時換行，不會跑出畫面 */
        @media screen and (max-width: 360px) {
            .tabs { flex-wrap: wrap; row-gap: 6px; gap: 6px; }
            .tab { font-size: 0.85rem; padding: 6px 10px; }
            .ui-panel.open .tabs { justify-content: safe center; }
        }
        /* 🌟 矮螢幕：彈出視窗最高到畫面高度，內容太多就在視窗裡捲動（每日任務、簽到日曆在小手機上會超出畫面） */
        @media screen and (max-height: 700px) {
            .name-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
        }

        /* 🌟 一般筆電高度的桌機版面：抽屜只有 45% 高時放不下一整張商品卡（卡片會被切掉一半）
           → 按鈕、分頁、卡片都緊湊一點，抽屜至少留到放得下一排卡片再多露一點點 */
        @media screen and (min-width: 769px) and (max-height: 1000px) {
            .ui-panel { height: max(45%, 370px); padding-top: 20px; padding-bottom: 12px; }
            .interaction-group { margin-bottom: 14px; }
            .btn-interact { padding: 11px 0; }
            .tabs { margin-bottom: 10px; padding-bottom: 6px; }
            .shop-grid { gap: 12px; padding-bottom: 12px; }
            .item-card { padding: 12px 8px; }
            .item-color-preview { width: 38px; height: 38px; margin-bottom: 8px; }
            .item-name { margin-bottom: 6px; }
        }
        /* 桌機版的商品格線露出細捲軸，看得出下面還有東西可以滑 */
        @media screen and (min-width: 769px) {
            .shop-grid { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
            .shop-grid::-webkit-scrollbar { width: 8px; }
            .shop-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 8px; }
        }

        /* 🌟 矮螢幕但走桌機版面（手機橫放、小筆電）：把抽屜整個壓扁，格線才不會掉出畫面 */
        @media screen and (min-width: 769px) and (max-height: 560px) {
            .stage { height: 40%; }
            .ui-panel {
                height: 60%;
                padding: 14px 18px 12px 18px;
                border-radius: 26px 26px 0 0;
            }
            .interaction-group { margin-bottom: 10px; gap: 10px; }
            .btn-interact { padding: 8px 0; }
            .btn-title { font-size: 0.9rem; margin-bottom: 2px; }
            .btn-desc { display: none; }
            .tabs { margin-bottom: 10px; padding-bottom: 6px; }
            .tab { font-size: 0.95rem; padding: 6px 12px; }
            .shop-grid { gap: 10px; padding-bottom: 10px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
            .item-card { padding: 12px 8px; }
            .item-color-preview { width: 36px; height: 36px; margin-bottom: 8px; }
        }

        /* 🌟 觸控裝置（含 iPad 這種寬度 >768px 的平板）：小按鈕一律至少 44px 高 */
        @media (pointer: coarse) {
            .lang-btn, #btnOpenManual, #btnToggleMp {
                min-height: 44px;
                display: inline-flex;
                align-items: center;
            }
        }

/* ========================================= */
        /* 🌟 手機版與電腦版的分水嶺魔法開始 */
        /* ========================================= */

        /* 1. 預設電腦版：隱藏那兩顆召喚抽屜的按鈕 */
        #btnOpenShop, 
        #uiPanel > button[onclick="toggleShopPanel()"] {
            display: none !important;
        }

        /* 2. 手機版專屬魔法 (螢幕寬度小於 768px 時自動發動) */
        @media screen and (max-width: 768px) {
            
            /* 手機版背景拉滿 100% */
            .stage { height: 100%; }

            /* --- 🌟 頂部資訊列瘦身（解決重疊問題） --- */
            .top-bar { padding: calc(10px + env(safe-area-inset-top, 0px)) 15px 10px; }
            .points-display { padding: 8px 14px; font-size: 0.95rem; }
            /* 手指點得到：小按鈕最少 44px 高 */
            .lang-btn { padding: 10px 14px; font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; }
            #btnOpenManual { top: calc(72px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); padding: 10px 14px; font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; }
            #btnToggleMp { top: calc(72px + env(safe-area-inset-top, 0px)) !important; right: calc(10px + env(safe-area-inset-right, 0px)) !important; padding: 10px 14px !important; font-size: 0.85rem !important; min-height: 44px; display: inline-flex !important; align-items: center; }

            /* --- 🌟 互動小按鈕 + 置中商店彈窗 完美排版 --- */

            /* 把原本的底部抽屜變成「全螢幕的隱形容器」，方便定位裡面的東西 */
            .ui-panel {
                position: fixed !important;
                top: 0; left: 0; width: 100%;
                height: 100vh;
                height: 100dvh;   /* 手機瀏覽器工具列會縮高度，dvh 才是真正看得到的範圍 */
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                transform: none !important; /* 關閉原本的上下滑動動畫 */
                pointer-events: none; /* 讓點擊能穿透隱形背景 */
                z-index: 80;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            /* 當點擊打開商店時，加上黑色半透明遮罩 */
            .ui-panel.open {
                background: rgba(0, 0, 0, 0.6) !important;
                pointer-events: auto; /* 擋住背後的點擊 */
            }

            /* --- 🔘 底部常駐互動小按鈕 --- */
            .interaction-group {
                position: absolute;
                bottom: calc(15px + env(safe-area-inset-bottom, 0px));
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 30px);
                flex-direction: row !important;
                justify-content: space-between;
                gap: 5px !important;
                margin: 0 !important;
                pointer-events: auto; /* 恢復按鈕點擊 */
                z-index: 85;
            }
            .btn-interact {
                padding: 10px 2px !important;
                border-radius: 16px !important;
                background: rgba(255, 255, 255, 0.95) !important;
                box-shadow: 0 4px 10px rgba(0,0,0,0.1), 0 4px 0 var(--border-color) !important;
                -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
            }
            /* 水變髒的提醒：手機版按鈕的底色和底邊陰影是 !important，這裡要跟著蓋過去 */
            #btnClean.water-warn { box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25), 0 4px 0 #f59e0b !important; }
            #btnClean.water-alert {
                background: #fff1f2 !important;
                box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3), 0 4px 0 #ef4444 !important;
            }
            .btn-desc { display: none !important; }
            /* 冷卻中：說明文字變成浮在按鈕上方的小標籤（不佔按鈕裡的空間，按鈕高度不會跳），按鈕名稱稍微變淡 */
            .btn-interact { position: relative; }
            .btn-interact.is-cooling .btn-desc {
                display: block !important;
                position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
                padding: 1px 7px; border-radius: 999px;
                background: #64748b; color: #fff !important;
                font-size: 0.62rem; font-weight: 900; line-height: 1.6; white-space: nowrap;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                pointer-events: none;
            }
            .btn-interact.is-cooling .btn-title { opacity: 0.55; }
            .btn-title { font-size: 0.75rem !important; margin-bottom: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            /* 按鈕可以被壓縮，字太長就縮小，不要把整排撐到畫面外 */
            .btn-interact { flex: 1 1 0; min-width: 0; }
            .hunger-bar-container { width: 85% !important; height: 4px !important; margin-top: 4px !important; }

            /* --- 🛒 置中滑動商店彈窗 --- */
            /* 沒打開商店時，隱藏標籤、網格和關閉按鈕 */
            .ui-panel:not(.open) .tabs,
            .ui-panel:not(.open) .shop-grid,
            .ui-panel:not(.open) > button[onclick="toggleShopPanel()"] {
                display: none !important;
            }

            /* 商店的分類標籤 (彈窗的上半部) */
            .ui-panel.open .tabs {
                display: flex !important;
                width: 85%;
                background: #fff;
                border-radius: 25px 25px 0 0; /* 只有上方圓角 */
                padding: 25px 15px 10px 15px;
                margin: 0;
                border-bottom: 2px dashed #eee;
                justify-content: center;
                pointer-events: auto;
            }

            /* 商店的商品列表 (彈窗的下半部，可滑動) */
            .ui-panel.open .shop-grid {
                display: grid !important;
                width: 85%;
                max-height: 55vh; max-height: 55dvh; /* 限制高度，超過就滾動 */
                background: #fff;
                border-radius: 0 0 25px 25px; /* 只有下方圓角 */
                padding: 15px 15px 78px 15px;   /* 下方留白讓最後一排不會被右下角的關閉鈕蓋住 */
                overflow-y: auto;
                pointer-events: auto;
                gap: 10px; 
                grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            }

            /* --- ❌ 商店的獨立叉叉按鈕 (與購物袋原位置重疊版) --- */
            #uiPanel.open > button[onclick="toggleShopPanel()"] {
                display: flex !important;
                position: absolute !important;
                bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important; /* 🌟 對齊購物袋，同樣避開安全區 */
                right: 15px !important;   /* 🌟 對齊原本的購物袋右距 */
                top: auto !important;
                left: auto !important;
                transform: none !important;
                margin: 0 !important;
                width: 55px !important;   /* 🌟 與購物袋一樣大 */
                height: 55px !important;  /* 🌟 與購物袋一樣大 */
                padding: 0 !important;
                border-radius: 50% !important;
                background: #ffffff !important; 
                font-size: 0 !important; 
                color: transparent !important;
                border: 3px solid #ffd1dc !important;
                box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4) !important;
                align-items: center;
                justify-content: center;
                z-index: 9999 !important;
                pointer-events: auto !important;
            }
            
            /* 畫出柔和深咖啡色的叉叉符號 */
            #uiPanel.open > button[onclick="toggleShopPanel()"]::before {
                content: '✖';
                color: #6b4c4a;
                font-size: 1.5rem; /* 🌟 字體稍微放大一點配合大按鈕 */
                font-weight: 900;
                position: absolute;
            }
/* --- 🛑 商店打開時，禁用底部互動按鈕 --- */
            #uiPanel.open .interaction-group {
                pointer-events: none !important; /* 徹底禁止點擊與拖曳 */
                opacity: 0.4 !important;         /* 變暗一點，明確提示現在不能按 */
            }
            /* --- 🛒 喚醒商店的懸浮按鈕 (專屬粉紅風格與菜籃 SVG) --- */
            #btnOpenShop {
                display: flex !important;
                align-items: center;
                justify-content: center;
                position: absolute !important;
                bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important; /* 浮在互動按鈕上方，並避開手機底部安全區 */
                right: 15px !important;
                left: auto !important;
                transform: none !important;
                width: 55px !important;
                height: 55px !important;
                padding: 0 !important;
                border-radius: 50% !important;
                font-size: 0 !important; 
                
                /* 保持遊戲專屬的粉紅底色與白邊！ */
                background: var(--accent-color) !important; 
                border: 3px solid #ffffff !important;
                box-shadow: 0 4px 15px rgba(255, 182, 193, 0.6) !important;
                z-index: 70 !important;
            }
            
            /* 🌟 使用手繪感 SVG 購物菜籃取代原本的圖案 */
            #btnOpenShop::after {
                content: '';
                width: 28px;
                height: 28px;
                /* 精緻的白色菜籃 SVG，格紋透出底部的粉紅色 (#ffb6c1) */
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 30 40 C 30 10, 70 10, 70 40" fill="none" stroke="%23ffffff" stroke-width="8" stroke-linecap="round"/><path d="M 15 40 L 85 40 L 75 90 L 25 90 Z" fill="%23ffffff" stroke="%23ffffff" stroke-width="4" stroke-linejoin="round"/><path d="M 35 40 L 35 90 M 50 40 L 50 90 M 65 40 L 65 90 M 20 56 L 80 56 M 22 73 L 78 73" fill="none" stroke="%23ffb6c1" stroke-width="4" stroke-linecap="round"/></svg>');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            }
            
            /* 點擊時的可愛小動畫 */
            #btnOpenShop:active::after {
                transform: scale(0.85);
            }
        }
        /* --- 🤤 手機版專屬：餵食時原地流口水 --- */
            .slug-container.is-chasing-food::after {
                content: '';
                position: absolute;
                width: 10px;
                height: 16px;
                background: #bae6fd; /* 水藍色口水 */
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* 水滴形狀 */
                left: 126px; /* 對齊嘴巴的相對 X 座標 */
                top: 155px;  /* 對齊嘴巴的相對 Y 座標 */
                opacity: 0;
                animation: droolDripMobile 0.7s infinite;
                z-index: 20;
                box-shadow: inset -2px -2px 4px rgba(2, 132, 199, 0.3);
                pointer-events: none;
            }
            
            @keyframes droolDripMobile {
                0% { transform: translateY(0) scale(0.6); opacity: 0.9; }
                80% { transform: translateY(18px) scale(1.1); opacity: 0.9; }
                100% { transform: translateY(22px) scale(0.8); opacity: 0; }
            }

/* 🌟 連線加載畫面（假的進度條，3 秒） */
.room-loading-slug { font-size: 3rem; animation: roomLoadingHop 0.6s ease-in-out infinite alternate; }
.room-loading-text { margin: 10px 0 18px; font-size: 1.1rem; font-weight: 900; color: var(--text-dark); }
.room-loading-track { width: 100%; height: 16px; border-radius: 10px; background: var(--card-bg); border: 3px solid var(--border-color); overflow: hidden; }
.room-loading-bar { width: 0%; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--accent-color), #ff8fab); }
.room-loading-percent { margin-top: 8px; font-weight: 900; color: var(--text-dim); }
@keyframes roomLoadingHop { from { transform: translateY(0); } to { transform: translateY(-8px); } }

        /* ==================================================
           🧜 【飼養手冊＝互動教學】小助理帶著玩家實際操作
           ================================================== */
        #tourLayer { position: fixed; inset: 0; z-index: 20000; pointer-events: none; }
        #tourLayer[hidden] { display: none; }
        /* 只看說明的步驟擋住點擊；要動手做的步驟加上 .off，玩家才碰得到遊戲 */
        .tour-blocker { position: absolute; inset: 0; pointer-events: auto; }
        .tour-blocker.off { display: none; }

        /* 聚光燈：本身透明，外面用超大的陰影把整個畫面壓暗 */
        .tour-spot {
            position: fixed;
            border-radius: 22px;
            border: 3px solid #fff;
            box-shadow: 0 0 0 9999px rgba(45, 26, 52, 0.58), 0 0 0 7px rgba(255, 182, 193, 0.75);
            pointer-events: none;
            transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
            animation: tourSpotPulse 1.8s ease-in-out infinite;
        }
        .tour-spot.none { border-width: 0; animation: none; box-shadow: 0 0 0 9999px rgba(45, 26, 52, 0.58); }
        @keyframes tourSpotPulse {
            0%, 100% { box-shadow: 0 0 0 9999px rgba(45, 26, 52, 0.58), 0 0 0 6px rgba(255, 182, 193, 0.8); }
            50% { box-shadow: 0 0 0 9999px rgba(45, 26, 52, 0.58), 0 0 0 12px rgba(255, 182, 193, 0.25); }
        }

        /* 右上角的退出按鈕 */
        .tour-exit {
            position: fixed;
            top: calc(14px + env(safe-area-inset-top, 0px));
            right: calc(14px + env(safe-area-inset-right, 0px));
            z-index: 3;
            pointer-events: auto;
            /* 退出要一眼就找得到：實心粉紅、白字、比較大 */
            min-height: 52px;
            padding: 10px 24px;
            border-radius: 999px;
            border: 3px solid #fff;
            background: #f43f5e;
            color: #fff;
            font-size: 1.08rem;
            font-weight: 900;
            letter-spacing: 1px;
            cursor: pointer;
            box-shadow: 0 5px 0 #be123c, 0 8px 22px rgba(244, 63, 94, 0.45);
            animation: tourExitIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        .tour-exit:hover { background: #e11d48; }
        .tour-exit:active { transform: translateY(5px); box-shadow: 0 0 0 #be123c, 0 3px 10px rgba(244, 63, 94, 0.35); }
        .tour-exit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
        @keyframes tourExitIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

        /* 小助理 + 對話泡泡 */
        .tour-card {
            position: fixed;
            z-index: 2;
            width: min(390px, calc(100vw - 24px));
            display: flex;
            align-items: flex-end;
            gap: 4px;
            pointer-events: auto;
            transition: left 0.3s ease, top 0.3s ease;
        }
        .tour-guide { flex: 0 0 78px; height: 84px; animation: tourGuideBob 3s ease-in-out infinite; }
        .tour-guide svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); }
        @keyframes tourGuideBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        .tg-line { stroke: #1a4c6d; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
        .tg-tail { fill: #7ac2c4; }
        .tg-fin { fill: #50b4ba; }
        .tg-cat, .tg-paw { fill: #fcfdfe; }
        .tg-red { stroke: #b83e33; stroke-width: 3.5; stroke-linecap: round; fill: none; }
        .tg-blush { fill: #ffbaba; }
        .tg-bubble { fill: #e0f2f5; stroke: #1a4c6d; stroke-width: 2.5; }
        .tg-dolphin { fill: #9bcbf1; }
        .tg-wave { animation: tgPawWave 1.8s ease-in-out infinite; transform-origin: 75px 48px; }
        @keyframes tgPawWave {
            0%, 100% { transform: rotate(0deg); }
            20% { transform: rotate(-12deg); }
            40% { transform: rotate(8deg); }
            60% { transform: rotate(-10deg); }
            80% { transform: rotate(6deg); }
        }

        .tour-bubble {
            position: relative;
            flex: 1;
            min-width: 0;
            background: #fff;
            border: 4px solid var(--border-color);
            border-radius: 24px;
            padding: 14px 16px 12px;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
        }
        /* 泡泡的小尾巴指向小助理 */
        .tour-bubble::before {
            content: '';
            position: absolute;
            left: -13px; bottom: 22px;
            width: 18px; height: 18px;
            background: #fff;
            border-left: 4px solid var(--border-color);
            border-bottom: 4px solid var(--border-color);
            border-radius: 0 0 0 6px;
            transform: rotate(45deg);
        }
        .tour-progress { display: flex; gap: 5px; margin-bottom: 8px; }
        .tour-progress span { flex: 1; height: 5px; border-radius: 5px; background: #fde2e8; }
        .tour-progress span.on { background: var(--accent-color); }
        .tour-title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 900; color: var(--text-dark); }
        .tour-text { margin: 0; font-size: 0.92rem; line-height: 1.6; font-weight: 700; color: var(--text-dim); }

        /* 要玩家動手做的事 */
        .tour-task { margin-top: 10px; padding: 9px 12px; border-radius: 14px; font-size: 0.9rem; font-weight: 900; line-height: 1.45; }
        .tour-task:empty { display: none; }
        .tour-task.todo { background: #fff4e5; color: #c2410c; border: 2px dashed #fdba74; }
        .tour-task.hint { background: #fff1f2; color: #be123c; border: 2px dashed #fda4af; }
        .tour-task.done { background: #ecfdf5; color: #047857; border: 2px solid #6ee7b7; }
        .tour-task.note { background: #f1f5f9; color: #475569; border: 2px solid #e2e8f0; }

        .tour-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
        .tour-btn { min-height: 40px; padding: 8px 14px; border-radius: 14px; border: none; font-size: 0.9rem; font-weight: 900; cursor: pointer; }
        .tour-btn[hidden] { display: none; }
        .tour-btn.primary { background: var(--text-dark); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }
        .tour-btn.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
        .tour-btn.primary:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
        .tour-btn.primary.ready { animation: tourReady 0.9s ease-in-out infinite; }
        @keyframes tourReady { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
        .tour-btn.ghost { background: #f1f5f9; color: var(--text-dim); }
        .tour-btn.link { margin-right: auto; padding: 8px 2px; background: none; color: var(--text-dim); text-decoration: underline; }

        @media (max-width: 420px) {
            /* 手機上縮小一點、往角落靠，才不會壓到中間的「積分」 */
            .tour-exit { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); padding: 8px 16px; font-size: 0.95rem; min-height: 46px; }
        }
        @media (max-width: 370px) {
            .tour-exit { padding: 7px 12px; font-size: 0.88rem; right: calc(6px + env(safe-area-inset-right, 0px)); }
        }
        @media (max-width: 420px) {
            .tour-guide { flex-basis: 62px; height: 68px; }
            .tour-bubble { padding: 12px 13px 10px; border-radius: 20px; }
            .tour-title { font-size: 1.02rem; }
            .tour-text { font-size: 0.86rem; }
            .tour-btn { padding: 8px 11px; font-size: 0.85rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .tour-spot, .tour-guide, .tg-wave, .tour-btn.primary.ready { animation: none; }
            .tour-spot, .tour-card { transition: none; }
        }

        /* ==================================================
           📖 【文字版飼養手冊】以前這裡完全沒有樣式，手冊只是一段文字埋在頁面最底下，
              打開了也看不到。現在做成跟其他彈窗同一套的置中視窗，內容太長就在裡面捲動
           ================================================== */
        .manual-overlay {
            position: fixed;
            inset: 0;
            z-index: 10060;
            display: none;               /* 由 openManualText() 打開 */
            align-items: center;
            justify-content: center;
            padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
            background: rgba(255, 240, 245, 0.82);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .manual-box {
            width: min(470px, 100%);
            max-height: min(86vh, 780px);
            max-height: min(86dvh, 780px);
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 4px solid var(--border-color);
            border-radius: 30px;
            box-shadow: 0 20px 50px rgba(255, 182, 193, 0.45);
            overflow: hidden;
            animation: popIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        .manual-header {
            flex: 0 0 auto;
            padding: 20px 20px 12px;
            text-align: center;
            font-size: 1.35rem;
            font-weight: 900;
            letter-spacing: 2px;
            color: var(--text-dark);
            border-bottom: 2px dashed #ffe4ec;
        }
        .manual-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .manual-section {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 12px 14px;
            border-radius: 18px;
            background: var(--card-bg);
            border: 2px solid #ffe4ec;
        }
        .manual-img { flex: 0 0 48px; height: 48px; }
        .manual-img svg { width: 100%; height: 100%; display: block; }
        .manual-text { min-width: 0; }
        .manual-text h3 { margin: 2px 0 4px; font-size: 1.02rem; font-weight: 900; }
        .manual-text p { margin: 0; font-size: 0.9rem; line-height: 1.6; font-weight: 700; color: var(--text-dim); }
        .manual-footer {
            flex: 0 0 auto;
            display: flex;
            gap: 10px;
            padding: 12px 16px 16px;
            border-top: 2px dashed #ffe4ec;
        }
        .manual-footer .modal-btn { font-size: 0.98rem; }
        @media (max-width: 420px) {
            .manual-box { border-radius: 24px; }
            .manual-header { font-size: 1.2rem; padding: 16px 16px 10px; }
            .manual-content { padding: 12px; }
            .manual-section { gap: 10px; padding: 10px 12px; }
            .manual-img { flex-basis: 40px; height: 40px; }
            .manual-text p { font-size: 0.86rem; }
            .manual-footer { padding: 10px 12px 14px; }
            .manual-footer .modal-btn { font-size: 0.9rem; min-height: 46px; }
        }

        /* 📖 飼養手冊：先選文字版或實作教學 */
        .manual-pick { width: min(440px, 100%); }
        .manual-pick-list { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
        .manual-pick-sub { margin: 0 0 2px; text-align: center; font-size: 0.95rem; font-weight: 800; color: var(--text-dim); }
        .manual-pick-card {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 16px;
            text-align: left;
            border-radius: 22px;
            border: 3px solid #ffe4ec;
            background: var(--card-bg);
            color: var(--text-dark);
            font: inherit;
            cursor: pointer;
            box-shadow: 0 5px 0 #ffe4ec;
            transition: transform 0.1s, border-color 0.15s;
        }
        .manual-pick-card.is-tour { border-color: #fbcfe8; box-shadow: 0 5px 0 #fbcfe8; }
        .manual-pick-card.is-text { border-color: #bae6fd; box-shadow: 0 5px 0 #bae6fd; }
        .manual-pick-card:hover { transform: translateY(-2px); }
        .manual-pick-card:active { transform: translateY(5px); box-shadow: none; }
        .manual-pick-card:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
        .manual-pick-icon {
            flex: 0 0 54px;
            height: 54px;
            display: grid;
            place-items: center;
            font-size: 1.8rem;
            border-radius: 18px;
            background: #fff;
        }
        .manual-pick-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .manual-pick-name { font-size: 1.12rem; font-weight: 900; }
        .manual-pick-card.is-tour .manual-pick-name { color: #db2777; }
        .manual-pick-card.is-text .manual-pick-name { color: #0284c7; }
        .manual-pick-desc { font-size: 0.88rem; line-height: 1.5; font-weight: 700; color: var(--text-dim); }
        @media (max-width: 420px) {
            .manual-pick-list { padding: 12px; gap: 10px; }
            .manual-pick-card { padding: 13px 12px; gap: 11px; border-radius: 20px; }
            .manual-pick-icon { flex-basis: 46px; height: 46px; font-size: 1.5rem; border-radius: 15px; }
            .manual-pick-name { font-size: 1.02rem; }
            .manual-pick-desc { font-size: 0.84rem; }
        }

        /* 互動教學讓位：玩家打開身份證、任務等視窗時整層先藏起來 */
        #tourLayer.tour-paused { visibility: hidden; }
        /* 正在餵食、擦玻璃、丟球：暗幕和對話框先收起來，只留右上角的退出 */
        #tourLayer.tour-busy .tour-spot,
        #tourLayer.tour-busy .tour-card,
        #tourLayer.tour-busy .tour-blocker { visibility: hidden; }
        .tour-task { white-space: pre-line; }

        /* ==================================================
           💬 【聊天列】從底部滑上來，不擋住魚缸中間，邊聊邊看對話泡泡
           ================================================== */
        .chat-bar {
            position: fixed;
            left: 50%;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            z-index: 10040;
            width: min(560px, calc(100vw - 24px));
            transform: translateX(-50%);
            padding: 10px 12px 12px;
            background: #fff;
            border: 4px solid var(--border-color);
            border-radius: 26px;
            box-shadow: 0 14px 34px rgba(255, 182, 193, 0.45), 0 4px 12px rgba(0, 0, 0, 0.08);
            animation: chatBarIn 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        .chat-bar[hidden] { display: none; }
        @keyframes chatBarIn {
            from { opacity: 0; transform: translate(-50%, 24px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }

        /* 快捷語：點一下直接送出 */
        .chat-quick {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding: 0 2px 8px;
            scrollbar-width: none;
        }
        .chat-quick::-webkit-scrollbar { display: none; }
        .chat-chip {
            flex: 0 0 auto;
            padding: 6px 12px;
            border: 2px solid #ffe4ec;
            border-radius: 999px;
            background: var(--card-bg);
            color: var(--text-dark);
            font-size: 0.85rem;
            font-weight: 900;
            cursor: pointer;
            transition: transform 0.1s, border-color 0.15s;
        }
        .chat-chip:hover { border-color: var(--accent-color); }
        .chat-chip:active { transform: scale(0.94); }

        .chat-row { display: flex; align-items: center; gap: 8px; }
        .chat-field { position: relative; flex: 1; min-width: 0; }
        .chat-field input {
            width: 100%;
            box-sizing: border-box;
            height: 46px;
            padding: 0 54px 0 16px;
            border: 3px solid var(--border-color);
            border-radius: 18px;
            background: var(--card-bg);
            color: var(--text-dark);
            font-size: 16px;   /* 小於 16px 的話 iPhone 一點下去會自動放大畫面 */
            font-weight: 800;
            outline: none;
            transition: border-color 0.15s, background 0.15s;
        }
        .chat-field input::placeholder { color: #c9a9ae; font-weight: 700; }
        .chat-field input:focus { border-color: var(--accent-color); background: #fff; }
        .chat-count {
            position: absolute;
            right: 12px; top: 50%;
            transform: translateY(-50%);
            font-size: 0.72rem;
            font-weight: 900;
            color: #c9a9ae;
            pointer-events: none;
        }
        .chat-count.full { color: #ef4444; }

        .chat-send {
            flex: 0 0 auto;
            height: 46px;
            padding: 0 18px;
            border: none;
            border-radius: 18px;
            background: var(--accent-color);
            color: #fff;
            font-size: 1rem;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 4px 0 rgba(255, 140, 160, 0.75);
            transition: transform 0.1s, opacity 0.15s;
        }
        .chat-send:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
        .chat-send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
        .chat-close {
            flex: 0 0 auto;
            width: 40px; height: 40px;
            border: none;
            border-radius: 50%;
            background: #f1f5f9;
            color: var(--text-dim);
            font-size: 1rem;
            font-weight: 900;
            cursor: pointer;
        }
        @media (max-width: 420px) {
            .chat-bar { padding: 8px 10px 10px; border-radius: 22px; }
            .chat-send { padding: 0 14px; font-size: 0.95rem; }
            .chat-close { width: 36px; height: 36px; }
        }
        @media (prefers-reduced-motion: reduce) { .chat-bar { animation: none; } }

        /* 💬 浮在畫面上的對話泡泡：不放進海兔裡，海兔翻面時字才不會跟著變成鏡像 */
        .chat-bubble.floating {
            position: fixed;
            top: 0; left: 0;
            transform: translate(-50%, -100%);
            z-index: 55;
            pointer-events: none;
            width: max-content;   /* 靠近畫面右邊時也照內容寬度排，不會被擠成一個字一行 */
            max-width: min(260px, 80vw);
            white-space: normal;
            text-align: center;
            animation: chatFloatPop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        @keyframes chatFloatPop {
            0% { transform: translate(-50%, -100%) scale(0.5); opacity: 0; }
            100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
        }
        /* 海兔在畫面最上面、泡泡放不下時：改到海兔下面，尾巴朝上 */
        .chat-bubble.floating.is-below { transform: translate(-50%, 0); animation-name: chatFloatPopBelow; }
        .chat-bubble.floating.is-below::after { bottom: auto; top: -8px; border-width: 0 8px 8px; border-color: transparent transparent white transparent; }
        .chat-bubble.floating.is-below::before { bottom: auto; top: -11px; border-width: 0 10px 10px; border-color: transparent transparent var(--accent-color) transparent; }
        @keyframes chatFloatPopBelow {
            0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
            100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) { .chat-bubble.floating { animation: none; } }

        /* 💬 【聊天紀錄】聊天列上方，列出這次房間裡的訊息和留言時間 */
        .chat-log-wrap { position: relative; margin-bottom: 8px; }
        /* 🛡️ 聊天列頂端的安全提示：遊戲沒有自動過濾髒話，提醒大家可以封鎖、檢舉 */
        .chat-safety {
            display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px 6px 12px;
            border-radius: 12px; background: #f0f9ff; border: 2px solid #bae6fd;
        }
        .chat-safety-text { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 800; color: #0369a1; line-height: 1.4; }
        .chat-safety-btn {
            flex: none; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 2px solid #7dd3fc;
            background: #fff; color: #0369a1; font-family: inherit; font-size: 0.78rem; font-weight: 900; cursor: pointer;
        }
        .chat-safety-btn:active { transform: translateY(2px); }
        .chat-log {
            max-height: min(240px, 32vh); max-height: min(240px, 32dvh);
            min-height: 64px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 8px 6px;
            border-radius: 18px;
            background: #fff7f9;
            border: 2px solid #ffe4ec;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .chat-empty { margin: auto; font-size: 0.85rem; font-weight: 800; color: #c9a9ae; }
        .chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
        .chat-msg.mine { align-self: flex-end; align-items: flex-end; }
        .chat-msg-name { font-size: 0.72rem; font-weight: 900; color: var(--text-dim); margin: 0 6px 2px; }
        .chat-msg-line { display: flex; align-items: flex-end; gap: 5px; }
        .chat-msg.mine .chat-msg-line { flex-direction: row-reverse; }
        .chat-msg-text {
            padding: 7px 12px;
            border-radius: 16px 16px 16px 4px;
            background: #fff;
            border: 2px solid #ffe4ec;
            color: var(--text-dark);
            font-size: 0.9rem;
            font-weight: 800;
            line-height: 1.45;
            word-break: break-word;
        }
        .chat-msg.mine .chat-msg-text { border-radius: 16px 16px 4px 16px; background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
        .chat-msg-time { flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; color: #c9a9ae; white-space: nowrap; }
        .chat-msg.system { align-self: center; max-width: 92%; align-items: center; }
        .chat-msg.system .chat-msg-text { padding: 3px 10px; border: none; background: transparent; color: #b8a1a5; font-size: 0.75rem; font-weight: 800; }

        /* 往上翻舊訊息時有人講話：不強制拉回最下面，改成顯示這顆讓玩家自己點 */
        .chat-newmsg {
            position: absolute;
            left: 50%; bottom: 8px;
            transform: translateX(-50%);
            padding: 5px 12px;
            border: none;
            border-radius: 999px;
            background: var(--text-dark);
            color: #fff;
            font-size: 0.78rem;
            font-weight: 900;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
            cursor: pointer;
        }
        .chat-newmsg[hidden] { display: none; }

        /* 未讀數量：用 data-unread 顯示，切換語言改按鈕文字時才不會被洗掉 */
        #btnChat { position: relative; }
        #btnChat[data-unread]::after,
        #btnToggleMp[data-unread]::after {
            content: attr(data-unread);
            position: absolute;
            top: -8px; right: -6px;
            min-width: 20px; height: 20px;
            padding: 0 5px;
            box-sizing: border-box;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 20px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        }
        @media (max-width: 420px) { .chat-log { max-height: 28vh; max-height: 28dvh; } }

        /* 💬 手機版：別人的對話泡泡可以點，點了直接打開聊天列 */
        .chat-bubble.floating.tappable {
            pointer-events: auto;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .chat-bubble.floating.tappable:active { filter: brightness(0.96); }
        /* 小小的提示：讓人知道這個泡泡可以點來回覆 */
        .chat-bubble.floating.tappable > span:last-child::after {
            content: '  ›';
            color: var(--accent-color);
            font-weight: 900;
        }

        /* ==================================================
           📋 【房間公告板】大家正在找人一起玩的房間（資料來自 /announcements）
           ================================================== */
        .board-modal {
            width: min(480px, 92vw) !important;
            max-width: none !important;
            max-height: min(86vh, 760px);
            max-height: min(86dvh, 760px);
            display: flex;
            flex-direction: column;
            padding: 18px 16px 14px !important;
            text-align: left !important;
        }
        .board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .board-title { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--text-dark); }
        .board-sub { margin: 4px 0 0; font-size: 0.82rem; font-weight: 800; color: var(--text-dim); }
        .board-close { flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 50%; background: #f1f5f9; color: var(--text-dim); font-size: 1rem; font-weight: 900; cursor: pointer; }

        .board-list {
            flex: 1 1 auto;
            min-height: 120px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 2px 2px 8px;
        }
        .board-empty { margin: auto; padding: 24px 12px; text-align: center; font-size: 0.9rem; font-weight: 800; line-height: 1.6; color: #c9a9ae; }

        .board-post { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--card-bg); border: 2px solid #ffe4ec; }
        .board-post.mine { border-color: var(--accent-color); background: #fff1f4; }
        /* 頭像：API 沒有寵物顏色，用名字的第一個字 */
        .board-avatar {
            flex: 0 0 auto;
            width: 40px; height: 40px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem; font-weight: 900; color: #fff;
        }
        .board-main { flex: 1; min-width: 0; }
        .board-who { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
        .board-name { font-size: 0.92rem; font-weight: 900; color: var(--text-dark); }
        .board-time { font-size: 0.72rem; font-weight: 800; color: #c9a9ae; }
        .board-msg { margin: 3px 0 6px; font-size: 0.92rem; font-weight: 800; line-height: 1.5; color: var(--text-dark); word-break: break-word; }
        .board-msg:empty { display: none; }
        .board-meta { display: flex; gap: 6px; flex-wrap: wrap; }
        .board-tag { padding: 2px 8px; border-radius: 999px; background: #fff; border: 2px solid #ffe4ec; font-size: 0.72rem; font-weight: 900; color: var(--text-dim); }
        .board-tag.code { letter-spacing: 1px; color: var(--text-dark); }
        .board-tag.full { border-color: #fecaca; color: #ef4444; }
        .board-tag.me { border-color: var(--accent-color); color: #db2777; }
        .board-tag.soon { border-color: #fde68a; color: #b45309; }

        .board-btn { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: none; border-radius: 14px; font-size: 0.9rem; font-weight: 900; cursor: pointer; }
        .board-btn.primary { background: var(--accent-color); color: #fff; box-shadow: 0 4px 0 rgba(255, 140, 160, 0.75); }
        .board-btn.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
        .board-btn.primary.confirm { background: var(--text-dark); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
        .board-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

        .board-compose { flex: 0 0 auto; margin-top: 6px; padding-top: 12px; border-top: 2px dashed #ffe4ec; }
        .board-compose[hidden] { display: none; }
        .board-compose-label { margin-bottom: 6px; font-size: 0.85rem; font-weight: 900; color: var(--text-dim); }
        .board-compose-label b { color: var(--text-dark); letter-spacing: 1px; }
        .board-compose textarea {
            width: 100%;
            box-sizing: border-box;
            resize: none;
            padding: 10px 14px;
            border: 3px solid var(--border-color);
            border-radius: 16px;
            background: var(--card-bg);
            color: var(--text-dark);
            font-family: inherit;
            font-size: 16px;   /* 小於 16px 的話 iPhone 一點下去會自動放大畫面 */
            font-weight: 800;
            line-height: 1.5;
            outline: none;
        }
        .board-compose textarea:focus { border-color: var(--accent-color); background: #fff; }
        .board-compose-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
        .board-count { margin-right: auto; font-size: 0.75rem; font-weight: 900; color: #c9a9ae; }
        .board-count.full { color: #ef4444; }
        .board-note { margin-top: 6px; font-size: 0.75rem; font-weight: 800; color: #c9a9ae; }
        .board-error { min-height: 1.2em; margin-top: 2px; font-size: 0.82rem; font-weight: 800; color: #ef4444; }
        .board-error.ok { color: #059669; }
        .board-compose.lobby { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 800; color: var(--text-dim); }
        .board-compose.lobby[hidden] { display: none; }
        .board-compose.lobby span { flex: 1; }
        @media (max-width: 420px) {
            .board-post { gap: 10px; padding: 10px; }
            .board-avatar { width: 34px; height: 34px; border-radius: 12px; font-size: 0.95rem; }
            .board-btn { padding: 0 12px; font-size: 0.85rem; }
        }

/* 🎮 【連線小遊戲】房間裡才出現，填在原本商店的位置 */
        .mp-games { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
        .mp-games[hidden] { display: none; }
        .mp-games-head { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; }
        .mp-games-title { font-size: 1.05rem; font-weight: 900; color: var(--text-dark); }
        .mp-games-sub { font-size: 0.82rem; font-weight: 800; color: var(--text-dim); }
        .mp-games-list { flex: 1; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 15px; }

        .game-card {
            position: relative; display: flex; align-items: center; gap: 18px;
            border-radius: 22px; padding: 14px 22px; min-height: 0; text-align: left;
            font-family: inherit; color: var(--text-dark);
        }
        button.game-card { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
        button.game-card:disabled { cursor: not-allowed; opacity: 0.55; }

        /* 🃏 翻牌對決：藍色條紋牌背 + 粉紅牌面，跟對決裡的牌同一套顏色 */
        .game-memory {
            background: linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%);
            border: 3px solid #93c5fd;
            box-shadow: 0 5px 0 #93c5fd;
        }
        .game-memory:hover:not(:disabled) { border-color: #f472b6; box-shadow: 0 5px 0 #f472b6; }
        .game-memory:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 transparent; }

        .gc-art { position: relative; flex: 0 0 auto; width: 104px; height: 82px; }
        .gm-card {
            position: absolute; left: 50%; top: 50%; width: 46px; height: 58px; margin: -29px 0 0 -23px;
            border-radius: 9px; box-sizing: border-box; transition: transform 0.25s ease;
        }
        .gm-back {
            border: 3px solid #93c5fd;
            background: repeating-linear-gradient(45deg, #dbeafe 0 6px, #bfdbfe 6px 12px);
        }
        .gm-left { transform: translateX(-26px) rotate(-14deg); }
        .gm-right { transform: translateX(26px) rotate(14deg); }
        .gm-front {
            display: flex; align-items: center; justify-content: center;
            border: 3px solid #f9a8d4; background: #fff; transform: translateY(-4px);
        }
        .gm-front svg { width: 34px; height: 28px; }
        .game-memory:hover:not(:disabled) .gm-left { transform: translateX(-32px) rotate(-20deg); }
        .game-memory:hover:not(:disabled) .gm-right { transform: translateX(32px) rotate(20deg); }
        .game-memory:hover:not(:disabled) .gm-front { animation: gm-flip 0.6s ease; }
        @keyframes gm-flip {
            0% { transform: translateY(-4px) rotateY(0); }
            50% { transform: translateY(-10px) rotateY(90deg); }
            100% { transform: translateY(-4px) rotateY(0); }
        }

        .gc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
        .gc-title { font-size: 1.2rem; font-weight: 900; color: #1e3a8a; }
        .gc-desc { font-size: 0.85rem; font-weight: 800; color: #64748b; }
        .gc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .gc-tags span {
            font-size: 0.72rem; font-weight: 900; padding: 2px 9px; border-radius: 999px;
            background: #fff; border: 2px solid #bfdbfe; color: #2563eb;
        }
        .gc-tags span + span { border-color: #fbcfe8; color: #db2777; }
        .gc-go {
            flex: 0 0 auto; padding: 9px 18px; border-radius: 999px;
            background: #f472b6; color: #fff; font-weight: 900; font-size: 0.95rem;
            box-shadow: 0 3px 0 #db2777;
        }

        .game-soon {
            justify-content: center; flex-direction: column; gap: 6px;
            border: 3px dashed #e2e8f0; background: #f8fafc; color: #94a3b8;
            font-size: 0.85rem; font-weight: 800; text-align: center;
        }
        .gc-soon-icon { font-size: 1.5rem; filter: grayscale(0.6); opacity: 0.7; }

        @media (prefers-reduced-motion: reduce) {
            .gm-card { transition: none; }
            .game-memory:hover:not(:disabled) .gm-front { animation: none; }
        }

        /* 電腦但畫面矮：面板也矮，小遊戲排緊一點 */
        @media screen and (min-width: 769px) and (max-height: 560px) {
            .mp-games { gap: 8px; }
            .mp-games-sub { display: none; }
            .game-card { padding: 8px 16px; }
            .gc-art { transform: scale(0.8); margin: -8px -10px; }
            .gc-desc { display: none; }
        }

        /* 手機橫放（寬但很矮）的連線房間：下方面板只放兩顆按鈕＋一條扁扁的小遊戲卡，把高度讓給房間裡的海兔 */
        @media screen and (min-width: 769px) and (max-height: 560px) {
            .ui-panel:has(.mp-games:not([hidden])) { height: auto; max-height: 48%; padding-top: 10px; padding-bottom: 8px; }
            body:has(.mp-games:not([hidden])) .stage { height: 66%; }   /* 魚缸一路延伸到壓扁後的面板上緣 */
            .ui-panel:has(.mp-games:not([hidden])) .interaction-group { margin-bottom: 8px; }
            .ui-panel:has(.mp-games:not([hidden])) .btn-interact { padding: 6px 0; }
            .mp-games-head, .game-soon, .gc-tags { display: none; }
            .mp-games-list { grid-template-columns: 1fr; }
            .game-card { padding: 4px 14px 4px 6px; }
            .gc-art { transform: scale(0.6); margin: -16px -18px; }
        }

        /* 平板寬度：說明太長就換行，不擠掉按鈕 */
        @media screen and (min-width: 769px) and (max-width: 1100px) {
            .mp-games-list { grid-template-columns: 1fr; }
            .game-soon { display: none; }
        }

        /* 📱 手機：面板是隱形容器，小遊戲變成一條浮在底部按鈕上方的長條，右邊讓給購物籃按鈕 */
        @media screen and (max-width: 768px) {
            .mp-games {
                position: absolute;
                left: 15px; right: 82px;
                bottom: calc(76px + env(safe-area-inset-bottom, 0px));
                flex: none; gap: 0;
                pointer-events: auto;
                z-index: 85;
            }
            .ui-panel.open .mp-games { display: none; }
            .mp-games-head, .game-soon { display: none; }
            .mp-games-list { display: block; }
            .game-card { width: 100%; gap: 10px; padding: 7px 10px 7px 6px; border-radius: 18px; }
            .game-memory { box-shadow: 0 4px 10px rgba(0,0,0,0.1), 0 4px 0 #93c5fd; }
            .game-memory:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
            .gc-art { width: 64px; height: 46px; }
            .gm-card { width: 28px; height: 36px; margin: -18px 0 0 -14px; border-radius: 6px; border-width: 2px; }
            .gm-back { background: repeating-linear-gradient(45deg, #dbeafe 0 4px, #bfdbfe 4px 8px); }
            .gm-left { transform: translateX(-16px) rotate(-14deg); }
            .gm-right { transform: translateX(16px) rotate(14deg); }
            .gm-front { transform: translateY(-2px); }
            .gm-front svg { width: 22px; height: 18px; }
            .gc-text { gap: 2px; }
            .gc-title { font-size: 0.95rem; }
            .gc-desc { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .gc-tags { display: none; }
            .gc-go { padding: 7px 13px; font-size: 0.85rem; }
        }
        /* 橫向手機：底部按鈕往下貼，小遊戲跟著往下 */
        @media screen and (max-width: 768px) and (max-height: 520px), screen and (max-height: 520px) and (pointer: coarse) {
            .mp-games { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
            .gc-desc { display: none; }
        }

/* 🎮 翻牌對決進行中：按鈕左上角亮一個 LIVE 小紅點 */
.game-card.is-live::after {
    content: 'LIVE'; position: absolute; top: -9px; left: 16px;
    padding: 1px 8px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.5px;
    box-shadow: 0 2px 0 #b91c1c;
    animation: game-live-pulse 1.4s ease-in-out infinite;
}
@keyframes game-live-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .game-card.is-live::after { animation: none; } }

/* 📋 公告板：多久前更新＋刷新按鈕 */
        .board-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 8px; }
        .board-updated { font-size: 0.75rem; font-weight: 800; color: var(--text-dim); }
        .board-updated.is-failed { color: #dc2626; }
        .board-refresh {
            flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 12px; border: 2px solid #fbcfe8; border-radius: 999px;
            background: #fff; color: #db2777; font-family: inherit; font-size: 0.82rem; font-weight: 900; cursor: pointer;
        }
        .board-refresh:disabled { opacity: 0.7; cursor: default; }
        .board-refresh-icon { display: inline-block; }
        .board-refresh.is-loading .board-refresh-icon { animation: board-spin 0.8s linear infinite; }
        @keyframes board-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) { .board-refresh.is-loading .board-refresh-icon { animation: none; } }

/* 🪪 別人的海兔可以點：只有畫出來的身體算，透明的空白處讓點擊穿過去 */
        .other-player .op-body svg { pointer-events: none; }
        .other-player .op-body svg :is(path, ellipse, circle) { pointer-events: visiblePainted; cursor: pointer; }
        .other-player .other-player-name { pointer-events: auto; cursor: pointer; }
        .other-player.is-blocked .other-player-name::before { content: '🚫 '; }
        .other-player.is-blocked .op-body { opacity: 0.55; }

/* 🪪 玩家小卡 */
        .pc-modal { position: relative; width: min(380px, calc(100vw - 32px)); text-align: left; }
        .pc-close { position: absolute; top: 14px; right: 14px; }
        .pc-head { display: flex; align-items: center; gap: 12px; margin: 0 40px 14px 0; }
        .pc-avatar { flex: 0 0 auto; width: 72px; height: 56px; }
        .pc-avatar svg { width: 100%; height: 100%; }
        .pc-who { min-width: 0; }
        .pc-name { margin: 0; font-size: 1.2rem; font-weight: 900; color: var(--text-dark); overflow-wrap: anywhere; }
        .pc-species { margin: 2px 0 0; font-size: 0.82rem; font-weight: 800; color: var(--text-dim); }
        .pc-view { display: flex; flex-direction: column; gap: 10px; }
        .pc-view[hidden] { display: none; }
        .pc-action {
            width: 100%; padding: 12px 14px; border-radius: 16px; text-align: left;
            border: 3px solid var(--border-color); background: #fff; color: var(--text-dark);
            font-family: inherit; font-size: 1rem; font-weight: 900; cursor: pointer;
        }
        .pc-action.chat { border-color: #bfdbfe; color: #1d4ed8; }
        .pc-action.block { border-color: #e2e8f0; color: #475569; }
        .pc-action.report { border-color: #fecaca; color: #b91c1c; }
        .pc-action:active { transform: translateY(2px); }
        .pc-text { margin: 0; font-size: 0.9rem; font-weight: 700; line-height: 1.6; color: var(--text-dark); }
        .pc-reasons { display: flex; flex-direction: column; gap: 6px; }
        .pc-reason {
            display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
            border: 2px solid var(--border-color); font-weight: 800; font-size: 0.9rem; cursor: pointer;
        }
        .pc-reason.is-checked { border-color: #f87171; background: #fef2f2; }
        .pc-reason input { accent-color: #ef4444; }
        #pcDetail {
            width: 100%; box-sizing: border-box; resize: none; padding: 10px 12px; border-radius: 12px;
            border: 2px solid var(--border-color); font-family: inherit; font-size: 0.9rem;
        }
        .pc-count { margin-top: -6px; text-align: right; font-size: 0.75rem; font-weight: 800; color: var(--text-dim); }
        .pc-row { display: flex; justify-content: flex-end; gap: 8px; }
        .board-btn.danger { background: #ef4444; border-color: #ef4444; color: #fff; }
        .board-btn.danger:disabled { opacity: 0.5; }
        .pc-notice { min-height: 0; margin-top: 8px; font-size: 0.85rem; font-weight: 800; color: #dc2626; }
        .pc-notice:empty { display: none; }
        .pc-notice.ok { color: #059669; }

/* 🚫 封鎖名單 */
        .bl-modal { width: min(440px, calc(100vw - 32px)); text-align: left; }
        .bl-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
        .bl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--border-color); background: #fff; }
        .bl-who { min-width: 0; }
        .bl-name { font-weight: 900; color: var(--text-dark); overflow-wrap: anywhere; }
        .bl-when { font-size: 0.75rem; font-weight: 800; color: var(--text-dim); }

/* 🎁 右上角的兌換碼按鈕（語言按鈕旁邊）＋跳出來的視窗 */
        .top-right { display: flex; align-items: center; gap: 10px; }
        .redeem-open-btn { gap: 6px; }
        /* .name-modal 預設最寬 340px，會把輸入框擠到提示字被裁掉，這裡放寬 */
        .redeem-modal {
            position: relative; width: min(440px, calc(100vw - 32px)); max-width: 440px;
            max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;   /* 再高也不會超出螢幕 */
        }
        .redeem-close { position: absolute; top: 14px; right: 14px; }
        @media (max-width: 480px) {
            /* 手機上空間不夠：只留禮物圖示 */
            .top-right { gap: 6px; }
            .redeem-open-text { display: none; }
        }
        .redeem-box {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 8px 4px 4px;
            text-align: center; color: var(--text-dark);
            overflow-wrap: anywhere;   /* 英文長字、活動名稱太長時自動換行，不會超出框外 */
        }
        .redeem-icon { font-size: 2.2rem; line-height: 1; }
        .redeem-title { margin: 0; font-size: 1.1rem; font-weight: 900; }
        .redeem-sub { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--text-dim); max-width: 420px; }
        .redeem-form { display: flex; gap: 8px; width: min(420px, 100%); }
        .redeem-input {
            flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--border-color);
            font-family: inherit; font-size: 1.05rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
            color: var(--text-dark); text-overflow: ellipsis;
        }
        /* 提示字不用加粗、不用字距，才放得下「例如：SEABUNNY2026」 */
        .redeem-input::placeholder {
            font-size: 0.9rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #b8a2a6;
        }
        .redeem-input:focus { outline: none; border-color: #f472b6; }
        /* 📋 貼上按鈕放在輸入框裡面靠右，輸入框右邊留位置給它 */
        .redeem-field { position: relative; flex: 1; min-width: 0; display: flex; }
        .redeem-field .redeem-input { width: 100%; padding-right: 84px; }
        .redeem-paste {
            position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
            padding: 5px 10px; border-radius: 10px; border: 2px solid #fbcfe8; background: #fdf2f8;
            color: #db2777; font-family: inherit; font-size: 0.8rem; font-weight: 900; white-space: nowrap; cursor: pointer;
        }
        .redeem-paste:hover { background: #fce7f3; }
        .redeem-paste:active { transform: translateY(-50%) scale(0.95); }
        .redeem-btn {
            flex: 0 0 auto; padding: 10px 18px; border: none; border-radius: 14px;
            background: #f472b6; color: #fff; font-family: inherit; font-size: 1rem; font-weight: 900; cursor: pointer;
            box-shadow: 0 4px 0 #db2777;
        }
        .redeem-btn:disabled { opacity: 0.5; cursor: default; }
        .redeem-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
        .redeem-result { width: min(420px, 100%); font-size: 0.9rem; font-weight: 800; }
        .redeem-result:empty { display: none; }
        .redeem-result.is-error { color: #dc2626; }
        .redeem-result.is-ok { padding: 12px 14px; border-radius: 14px; background: #f0fdf4; border: 2px solid #86efac; color: #166534; text-align: left; }
        .redeem-ok-title { font-weight: 900; margin-bottom: 6px; }
        .redeem-ok-count { font-size: 0.78rem; font-weight: 800; color: #15803d; margin-bottom: 8px; }
        /* 獎勵一多就會比螢幕還高：改成小標籤自動換行，清單本身可以捲動 */
        .redeem-rewards {
            list-style: none; margin: 0; padding: 2px;
            display: flex; flex-wrap: wrap; gap: 6px;
            max-height: min(38vh, 240px); max-height: min(38dvh, 240px); overflow-y: auto;
            overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        }
        .redeem-rewards li {
            margin: 0; padding: 5px 10px; border-radius: 999px;
            background: #fff; border: 1.5px solid #bbf7d0;
            font-size: 0.82rem; line-height: 1.3;
        }
        .redeem-rewards li.is-coin { background: #fef9c3; border-color: #fde047; color: #854d0e; }
        .redeem-owned { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 0.72rem; }
        /* 📱 手機：視窗內距縮小，輸入框和按鈕改上下排、都拉滿寬，比較好按 */
        @media (max-width: 480px) {
            .redeem-modal { padding: 26px 16px 20px; border-radius: 28px; }
            .redeem-close { top: 10px; right: 10px; width: 44px; height: 44px; }
            .redeem-sub { padding: 0 8px; }
            .redeem-form { flex-direction: column; }
            .redeem-input { min-height: 48px; text-align: center; }
            /* 置中的字左右留一樣的空間，才不會被貼上按鈕擠歪 */
            .redeem-field .redeem-input { padding-left: 84px; }
            .redeem-btn { width: 100%; min-height: 48px; }
        }

/* 📜 【遊戲公約】slug_social.js 的 openRules：上面可以捲動，下面的按鈕固定 */
        .rules-modal {
            position: relative; width: min(400px, calc(100vw - 32px)); max-width: 400px; padding: 22px 0 0;
            max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
            display: flex; flex-direction: column; overflow: hidden; text-align: left;
        }
        .rules-close { position: absolute; top: 12px; right: 12px; z-index: 1; }
        .rules-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 6px; }
        .rules-icon { font-size: 2.2rem; text-align: center; line-height: 1; }
        .rules-title { margin: 6px 0 4px; text-align: center; font-size: 1.2rem; font-weight: 900; color: var(--text-dark); }
        .rules-sub { margin: 0 0 12px; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--text-dim); line-height: 1.55; }
        .rules-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
        .rules-list li {
            display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px;
            background: #fff7f9; font-size: 0.8rem; font-weight: 700; color: var(--text-dim); line-height: 1.5;
        }
        .rules-list b { display: block; font-size: 0.9rem; color: var(--text-dark); }
        .rules-li-icon { font-size: 1.2rem; line-height: 1.3; }
        .rules-help { padding: 10px 12px; border-radius: 14px; background: #f0f9ff; border: 2px solid #bae6fd; margin-bottom: 14px; }
        .rules-list-title { margin: 0 0 6px; font-size: 0.85rem; font-weight: 900; color: var(--text-dark); }
        .rules-help-title { font-size: 0.9rem; font-weight: 900; color: #0369a1; margin-bottom: 4px; }
        .rules-help-text { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; color: #075985; }
        .rules-help-list { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 4px; font-size: 0.8rem; font-weight: 700; color: #075985; line-height: 1.5; }
        .rules-note { margin: 0 0 4px; font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-align: center; }
        .rules-ok {
            flex: none; margin: 10px 20px 20px; min-height: 48px; border: none; border-radius: 20px; cursor: pointer;
            background: #ec4899; color: #fff; font-family: inherit; font-size: 1.05rem; font-weight: 900;
            box-shadow: 0 5px 0 #be185d;
        }
        .rules-ok:active { transform: translateY(5px); box-shadow: none; }

/* ⚠️ 【遊戲提醒彈窗】取代瀏覽器的 alert；翻牌對決中途離開的處罰用橘色（is-penalty） */
        .game-alert {
            width: min(360px, calc(100vw - 32px)); max-width: 360px; padding: 28px 22px 22px;
            max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;   /* 手機橫放也不會超出螢幕 */
        }
        .game-alert.is-penalty { border-color: #fdba74; }
        .game-alert-icon {
            width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 2rem; font-weight: 900; line-height: 1;
            background: #ffe4ec; color: var(--accent-color);
        }
        .game-alert.is-penalty .game-alert-icon { background: #ffedd5; color: #ea580c; }
        .game-alert-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 900; color: var(--text-dark); }
        .game-alert-msg { margin: 0 0 16px; font-size: 0.95rem; font-weight: 700; line-height: 1.6; color: var(--text-dim); overflow-wrap: anywhere; }
        .game-alert-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -4px 0 18px; }
        .game-alert-chips:empty { display: none; }
        .game-alert-chip { padding: 6px 12px; border-radius: 999px; background: #fff7ed; border: 2px solid #fed7aa; color: #9a3412; font-size: 0.85rem; font-weight: 900; }
        .game-alert-chip.is-coin { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
        .game-alert-ok { width: 100%; }
        .game-alert.is-penalty .game-alert-ok { background: #f97316; box-shadow: 0 5px 0 #c2410c; }
        .game-alert.is-penalty .game-alert-ok:active { box-shadow: 0 0 0 transparent; }
        /* 📱 手機直放：留白縮小、說明文字靠左比較好讀、按鈕放大好按 */
        @media (max-width: 480px) {
            .game-alert {
                width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
                padding: 24px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 28px;
            }
            .game-alert-icon { width: 56px; height: 56px; font-size: 1.7rem; margin-bottom: 10px; }
            .game-alert-title { font-size: 1.1rem; }
            .game-alert-msg { font-size: 0.9rem; line-height: 1.65; text-align: left; }
            .game-alert-chips { gap: 6px; }
            .game-alert-chip { padding: 6px 10px; font-size: 0.8rem; }
            .game-alert-ok { min-height: 52px; font-size: 1.05rem; }
        }
        /* 📱 超窄螢幕（320px 左右）：標籤再縮一點，三個才不會各占一排 */
        @media (max-width: 360px) {
            .game-alert { padding: 20px 14px 16px; }
            .game-alert-chip { padding: 5px 8px; font-size: 0.74rem; }
        }
        /* 📱 手機橫放（很矮）：圖示和留白縮小，整個視窗擠得進螢幕 */
        @media (max-height: 520px) {
            .game-alert { padding: 16px 20px 14px; }
            .game-alert-icon { width: 44px; height: 44px; font-size: 1.4rem; margin-bottom: 6px; }
            .game-alert-title { margin-bottom: 4px; }
            .game-alert-msg { margin-bottom: 10px; line-height: 1.5; }
            .game-alert-chips { margin-bottom: 12px; }
            .game-alert-ok { min-height: 44px; }
        }

/* 😴 【待機畫面】跟論壇主頁同一套樣式（slug_idle.js），中間換成玩家自己睡覺的海兔 */
.slug-idle {
  position: fixed;
  inset: 0;
  z-index: 2000000; /* 蓋過遊戲裡所有視窗、提示 */
  container-type: size;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  background: radial-gradient(
    ellipse at 50% 40%,
    #1d4063 0%,
    #13304c 55%,
    #0c2238 100%
  );
  color: #e6f1fa;
  font-family: "PingFang TC", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: slug-idle-in 0.5s ease;
}
@keyframes slug-idle-in {
  from {
    opacity: 0;
  }
}
.slug-idle.leaving {
  animation: slug-idle-out 0.35s ease forwards;
}
@keyframes slug-idle-out {
  to {
    opacity: 0;
  }
}

.slug-idle-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6cqh 6cqw 14cqh;
  box-sizing: border-box;
}
.slug-idle-time {
  font-size: clamp(36px, 19cqmin, 120px);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.slug-idle-date {
  margin-top: 1.6cqh;
  font-size: clamp(12px, 4.2cqmin, 22px);
  color: #9fc3dd;
  letter-spacing: 0.1em;
}
.slug-idle-pet {
  width: 42cqmin;
  height: auto;
  margin-top: 4cqh;
  transform-origin: 50% 90%;
  animation: slug-idle-breathe 3.2s ease-in-out infinite;
}
@keyframes slug-idle-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03, 0.98);
  }
}
.slug-idle-zzz {
  fill: #e6f1fa;
  font-family: sans-serif;
  font-weight: 700;
  animation: slug-idle-zzz 3s linear infinite;
}
.slug-idle-zzz-2 {
  animation-delay: 1.5s;
}
@keyframes slug-idle-zzz {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(-14px);
    opacity: 0;
  }
}
.slug-idle-title {
  margin-top: 2cqh;
  max-width: 88cqw;   /* 名字長或英文標題（例如小丑的 fell asleep backstage…）在手機上要能換行，不要超出畫面 */
  text-align: center;
  font-size: clamp(14px, 5cqmin, 26px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.slug-idle-quote {
  margin-top: 1.2cqh;
  max-width: 80cqw;
  text-align: center;
  font-size: clamp(12px, 3.9cqmin, 19px);
  line-height: 1.7;
  color: #b8d3e8;
}
.slug-idle-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(6cqh + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  text-align: center;
  font-size: clamp(12px, 3.8cqmin, 18px);
  letter-spacing: 0.12em;
  animation: slug-idle-hint 2.8s ease-in-out infinite;
}
@keyframes slug-idle-hint {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

/* 遠處漂浮的泡泡瓶：大小由 font-size 決定，木塞與瓶口照首頁 .post-card 的比例 */
.slug-idle-bottle {
  position: absolute;
  z-index: 1;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(224, 242, 254, 0.75),
    rgba(125, 211, 252, 0.45)
  );
  border: max(1px, 0.014em) solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0.1em rgba(255, 255, 255, 0.6);
  animation: slug-idle-drift ease-in-out infinite alternate;
}
.slug-idle-bottle::before {
  content: "";
  position: absolute;
  top: -0.17em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.32em;
  height: 0.18em;
  background: #a67c52;
  border-radius: 0.04em 0.04em 0 0;
}
.slug-idle-bottle::after {
  content: "";
  position: absolute;
  top: -0.04em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.39em;
  height: 0.085em;
  background: rgba(224, 242, 254, 0.9);
  border-radius: 0.07em;
}
.slug-idle-bottle.far {
  filter: blur(1px);
}
@keyframes slug-idle-drift {
  from {
    transform: translate(0, 0) rotate(-8deg);
  }
  to {
    transform: translate(3cqw, -3cqh) rotate(8deg);
  }
}

/* 往上冒的氣泡 */
.slug-idle-bubble {
  position: absolute;
  z-index: 1;
  bottom: -4cqh;
  border-radius: 50%;
  border: 1px solid rgba(216, 236, 250, 0.45);
  background: rgba(216, 236, 250, 0.12);
  animation: slug-idle-rise linear infinite;
}
@keyframes slug-idle-rise {
  to {
    transform: translateY(-115cqh);
  }
}
@media (prefers-reduced-motion: reduce) {
  .slug-idle,
  .slug-idle * {
    animation: none !important;
  }
}
.slug-idle-pet { width: 46cqmin; }

/* 🤡 小丑海兔專屬待機畫面「馬戲團之夜」（slug_idle.js 的 is-joker）：深紫舞台、聚光燈、帳篷布簾、飄撲克牌和星星 */
.slug-idle.is-joker {
  background: radial-gradient(ellipse at 50% 45%, #3b1a63 0%, #241046 55%, #140a2b 100%);
  color: #f5ecff;
}
.slug-idle.is-joker .slug-idle-date { color: #d8c4f5; }
.slug-idle.is-joker .slug-idle-quote { color: #e3d4fa; }
.slug-idle.is-joker .slug-idle-zzz { fill: #fde68a; }
/* 聚光燈：從上方照到中間的海兔 */
.slug-idle-spot {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 70cqmin;
  height: 100cqh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 32% at 50% 64%, rgba(253, 230, 138, 0.22), transparent 70%),
    linear-gradient(to bottom, rgba(253, 230, 138, 0.16), rgba(253, 230, 138, 0.03) 70%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
/* 頂部的帳篷布簾 */
.slug-idle-curtain {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(36px, 9cqh, 80px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
/* 四周慢慢轉著飄的撲克牌：大小由 font-size 決定 */
.slug-idle-card {
  position: absolute;
  z-index: 1;
  width: 1.44em;   /* 字級是花色的大小，牌是它的 1.44 × 2 倍 */
  height: 2em;
  border-radius: 0.16em;
  background: #fffaf0;
  box-shadow: 0 0.08em 0.24em rgba(0, 0, 0, 0.35);
  color: #1e1b4b;
  font-size: 4.5cqmin;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI Symbol", sans-serif;
  text-indent: 0;
  animation: slug-idle-card ease-in-out infinite alternate;
}
.slug-idle-card.is-red { color: #dc2626; }
/* 窄螢幕（直放手機）：左右中間那兩張牌會疊到標題文字，藏起來 */
@container (max-width: 480px) {
  .slug-idle-card.is-mid { display: none; }
}
@keyframes slug-idle-card {
  0% { transform: translateY(0) rotate(-14deg); }
  100% { transform: translateY(-3cqh) rotate(14deg); }
}
/* 閃爍的小星星 */
.slug-idle-star {
  position: absolute;
  z-index: 1;
  color: #fde68a;
  line-height: 1;
  animation: slug-idle-star ease-in-out infinite;
}
@keyframes slug-idle-star {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 0.95; transform: scale(1.15); }
}

/* 🌟 極窄螢幕（320px）：底部按鈕每顆只剩約 57px，英文「Purify Water」一行放不下，
   英文模式允許在空格處折成兩行（中文四個字放得下，維持一行），不要被切成「Purify Wate…」（這條要放在最後，才蓋得過上面手機版的不換行設定） */
@media screen and (max-width: 360px) {
    html:lang(en) .btn-title {
        font-size: 0.7rem !important;
        line-height: 1.15;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        letter-spacing: -0.2px;
    }
}

/* 🌟 極窄螢幕（320px）：最上面一排（返回、積分、兌換碼、EN）放不下會被折成「返／回」，縮一點、不換行 */
@media screen and (max-width: 360px) {
    .top-bar { padding-left: 8px !important; padding-right: 8px !important; }
    .top-bar .lang-btn { white-space: nowrap; padding: 8px 10px !important; }
    .points-display { white-space: nowrap; font-size: 0.82rem !important; padding-left: 10px !important; padding-right: 10px !important; }
}

/* ==================================================
   🐰 【貼圖】聊天列裡的貼圖面板＋像彈幕一樣飄過畫面
   ================================================== */
.chat-sticker-toggle {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 3px;
    border: 3px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.chat-sticker-toggle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 10px; display: block; }
.chat-sticker-toggle:hover { border-color: var(--accent-color); }
.chat-sticker-toggle:active { transform: scale(0.92); }
.chat-sticker-toggle.is-on { border-color: var(--accent-color); background: #ffe4ec; }

.chat-stickers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
    max-height: 196px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 8px 0;
    padding: 6px;
    border-radius: 18px;
    background: #fff7f9;
    border: 2px solid #ffe4ec;
}
.chat-stickers[hidden] { display: none; }
.chat-sticker {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, opacity 0.2s;
}
.chat-sticker img { width: 100%; aspect-ratio: 370 / 320; object-fit: contain; display: block; }
.chat-sticker:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.chat-sticker:active { transform: scale(0.92); }
.chat-sticker:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 1px; }
/* 剛送出一張：等一下才能再送 */
.chat-stickers.is-cooling .chat-sticker { opacity: 0.45; pointer-events: none; }
/* 貼圖面板打開時，聊天紀錄縮矮一點，整條聊天列才不會蓋滿畫面 */
.chat-bar.has-stickers .chat-log { max-height: min(130px, 18vh); max-height: min(130px, 18dvh); }
.chat-bar.has-stickers .chat-quick { display: none; }

/* 聊天紀錄裡的貼圖 */
.chat-msg-text.is-sticker { padding: 2px !important; background: transparent !important; box-shadow: none !important; border: none !important; }
.chat-msg-text.is-sticker img { width: 92px; height: auto; display: block; }

/* 飄過畫面的貼圖 */
.sticker-fly {
    position: fixed;
    left: 100vw;
    z-index: 10030;            /* 在遊戲畫面上面、聊天列和各種視窗下面 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    will-change: transform;
    animation: stickerFly var(--fly-dur, 7s) linear forwards;
}
/* 透明背景，只加一點陰影，在各種魚缸背景上都看得清楚 */
.sticker-fly img {
    width: 132px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 10px rgba(120, 60, 80, 0.25));
    animation: stickerPop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.4), stickerBob 1.2s ease-in-out 0.45s infinite alternate;
}
.sticker-fly-name {
    max-width: 130px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid #ffd1dc;
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sticker-fly.mine .sticker-fly-name { background: #ffe4ec; border-color: var(--accent-color); }
@keyframes stickerFly { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 100%)); } }
@keyframes stickerPop { from { transform: scale(0.3); } to { transform: scale(1); } }
@keyframes stickerBob { from { transform: translateY(-4px) rotate(-3deg); } to { transform: translateY(4px) rotate(3deg); } }
@media (max-width: 600px) {
    .sticker-fly img { width: 96px; }
    .sticker-fly-name { font-size: 0.7rem; max-width: 100px; }
    .chat-stickers { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); max-height: 168px; }
    .chat-sticker-toggle { flex-basis: 42px; width: 42px; height: 42px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .sticker-fly img { animation: none; }
}

/* 🐰 一般房間：貼圖放在海兔頭上的對話泡泡裡 */
.chat-bubble.floating.is-sticker { padding: 6px 8px 4px !important; }
.chat-bubble-sticker { display: block; width: 116px; height: auto; margin: 2px auto 0; }
@media (max-width: 600px) { .chat-bubble-sticker { width: 88px; } }

/* 🎮 連線小遊戲裡：右上角的貼圖按鈕＋只有貼圖的面板（遊戲裡不能打字） */
.mg-sticker-btn {
    flex: none;
    width: 44px; height: 40px;
    padding: 2px;
    border: 3px solid #fbcfe8; border-radius: 14px;
    background: #fff1f6;
    cursor: pointer;
    box-shadow: 0 3px 0 #fbcfe8;
}
.mg-sticker-btn[hidden] { display: none; }
.mg-sticker-btn img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 9px; display: block; }
.mg-sticker-btn:active { transform: translateY(3px); box-shadow: none; }
.mg-sticker-btn.is-open { background: #fbcfe8; border-color: #f9a8d4; }
.mg-sticker-tray {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 6px;
    max-height: min(46%, 300px);
    padding: 8px 10px 10px;
    border: 3px solid #fbcfe8; border-radius: 20px;
    background: rgba(255, 250, 245, 0.97);
    box-shadow: 0 -6px 20px rgba(120, 60, 80, 0.18);
    animation: mgTrayIn 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.mg-sticker-tray[hidden] { display: none; }
@keyframes mgTrayIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mg-sticker-head { display: flex; align-items: center; gap: 8px; }
.mg-sticker-hint { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 900; color: #be185d; }
.mg-sticker-close { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-weight: 900; cursor: pointer; }
.mg-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mg-sticker-tray.is-cooling .chat-sticker { opacity: 0.45; pointer-events: none; }
@media (max-width: 600px) {
    .mg-sticker-tray { left: 6px; right: 6px; bottom: 6px; max-height: 44%; }
    .mg-sticker-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
    .mg-sticker-btn { width: 40px; }
}