script.js

// ==========================================================
//   貓咪挖礦記 — Cat Block Breaker   |   script.js
// ==========================================================
'use strict';

// ===================== RESPONSIVE SCALING =====================
let gameScale = 1;
let bgWidth = 615;  
let bgHeight = 885; 

function canvasSize() {
    return { w: bgWidth, h: bgHeight };
}

function scaleGame() {
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const isPortrait = vh > vw;
    const { w: CW, h: CH } = canvasSize();

    gameScale = Math.min((vw - 40) / CW, (vh - 40) / CH);
    elGame.classList.toggle('portrait-layout', isPortrait);
    elGame.style.transform       = `translate(-50%, -50%) scale(${gameScale})`;
    elGame.style.transformOrigin = 'center center'; 
}

window.addEventListener('resize', scaleGame);
window.addEventListener('orientationchange', () => setTimeout(scaleGame, 150));

// ===================== CONSTANTS & DOM =====================
const GAME_DURATION = 60;
const GRID_COLS     = 5;
const GRID_ROWS     = 4;
const MIN_CLICKS    = 5;
const MAX_CLICKS    = 10;
const CAT_HOVER_GAP = 8;    

const elGame        = document.getElementById('game-container');
const elScore       = document.getElementById('score');
const elTimer       = document.getElementById('timer');
const elTimeDisp    = document.getElementById('time-display');
const elCat         = document.getElementById('cat');
const elCatBody     = document.getElementById('cat-body');
const elMineWrap    = document.getElementById('mine-bar-wrap');
const elMineBar     = document.getElementById('mine-bar');
const elBlockGrid   = document.getElementById('block-grid');
const elFX          = document.getElementById('effects-layer');
const elStatusRow   = document.getElementById('status-row');
const elColArrows   = document.getElementById('col-arrows');
const elMultiBadge  = document.getElementById('multiplier-badge');
const elMultiVal    = document.getElementById('multiplier-val');
const elStartScreen = document.getElementById('start-screen');
const elGameover    = document.getElementById('gameover-screen');
const elFinalScore  = document.getElementById('final-score-display');
const elFinalBlocks = document.getElementById('final-blocks-display');
const btnStart      = document.getElementById('start-btn');
const btnRestart    = document.getElementById('restart-btn');

const elVideoOverlay = document.getElementById('video-overlay');
const elVideo        = document.getElementById('meme-video');
const btnSkipVideo   = document.getElementById('skip-video-btn');

// ===================== REWARD POOL (一般方塊) =====================
const REWARD_POOL = [
    { type:'score', w:30, min:10,  max:50  },
    { type:'meme', w:5,  text:'STONKS!  +100',       score:100,  color:'#2d6a2d', flash:'flash-gold' },
    { type:'meme', w:5,  text:'Emotional Damage',    score:-50,  color:'#8b1a1a', flash:'flash-red'  },
    { type:'meme', w:5,  text:'Doge Approves  +80',  score:80,   color:'#7a5500', flash:'flash-gold' },
    { type:'meme', w:3,  text:'Wasted...',           score:0,    color:'#555544', flash:null         },
    { type:'meme', w:2,  text:'Bing Chilling!  +999',score:999,  color:'#00558b', flash:'flash-blue' },
    { type:'meme', w:5,  text:'Nani?!',              score:10,   color:'#7a1a5a', flash:null         },
    { type:'meme', w:3,  text:'GG no re',            score:-20,  color:'#8b3300', flash:'flash-red'  },
    { type:'meme', w:2,  text:'To the Moon!  +200',  score:200,  color:'#444444', flash:'flash-gold' },
    { type:'status', w:4, key:'SPEED_DIG',    label:'[速挖]',     desc:'下1格只需3下',  blocks:1, color:'#7a5500' },
    { type:'status', w:4, key:'DOUBLE_SCORE', label:'[雙倍分數]', desc:'接下來3格x2',  blocks:3, color:'#8b1a1a' },
    { type:'status', w:3, key:'SLOW_CURSE',   label:'[遲緩詛咒]', desc:'下2格需多5下', blocks:2, color:'#3a1a7a' },
    { type:'time', w:3,  delta:+10, text:'+10 秒',  color:'#2d6a2d' },
];

// ===================== MEME VIDEOS POOL (客製化特效迷因) =====================
// ⭐ 這裡對應你提的 4 種特殊效果
const MEME_VIDEOS = [
    {
        // 1. 嚇人的東西 -> 負面效果
        img: 'scary.png',   // 替換成你的嚇人圖片
        vid: 'scary.mp4',   // 替換成你的嚇人影片
        reward: { type: 'scary' }
    },
    {
        // 2. 爆炸的 -> 炸開所有方塊
        img: 'bomb.png',
        vid: 'boom.mp4',
        reward: { type: 'explode' }
    },
    {
        // 3. 載走東西的車 -> 載走分數與時間
        img: 'car.png',
        vid: 'car.mp4',
        reward: { type: 'vehicle' }
    },
    {
        // 4. 毒藥 -> 嚴重減速負面狀態
        img: 'poison.png',
        vid: 'poison.mp4',
        reward: { type: 'poison' }
    },
    {
        // 5. RickRoll -> 超級大獎勵
        img: 'rickroll.png', 
        vid: 'rickroll.mp4', 
        reward: { type: 'rickroll' }
    },
    {
        // 7. 拉耳朵 -> 被逼著當苦力 (速挖增益)
        img: 'ear_pull.png',
        vid: 'ear_pull.mp4',
        reward: { type: 'ear_pull' }
    },
    {
        // 8. 跌倒 -> 摔傷腿瘸 (遲緩減益)
        img: 'fall.png',
        vid: 'fall.mp4',
        reward: { type: 'fall_down' }
    },
    {
        // 9. 騎慢一點啦 -> 時間大幅增加，但強制減速 (給予遲緩減益)
        img: 'ride_slow.png',
        vid: 'ride_slow.mp4',
        reward: { type: 'ride_slow' }
    },
    {
        // 10. 傑哥不要 -> 極度恐懼的超強減益
        img: 'jiege.png',
        vid: 'jiege.mp4',
        reward: { type: 'jiege' }
    }
];

// ===================== GAME STATE =====================
let G = {};

function createState() {
    return {
        phase: 'START',      
        score: 0,
        timeLeft: GAME_DURATION,
        blocksDestroyed: 0,
        scoreMultiplier: 1,
        activeEffects: [],    
        timerId: null,
        catRow: null,
        catCol: null,
        targetBlockEl: null,
        requiredClicks: 0,
        currentClicks: 0,
        grid: [],
    };
}

// ===================== BUILD GRID =====================
function buildGrid() {
    elBlockGrid.innerHTML = '';
    elColArrows.innerHTML = '';
    G.grid = [];

    for (let c = 0; c < GRID_COLS; c++) {
        const arrow = document.createElement('div');
        arrow.className = 'col-arrow';
        arrow.dataset.col = c;
        arrow.textContent = '▼';
        elColArrows.appendChild(arrow);
    }

    for (let r = 0; r < GRID_ROWS; r++) {
        G.grid[r] = [];
        for (let c = 0; c < GRID_COLS; c++) {
            const el = createBlockEl(r, c);
            el.style.animation = `popIn ${0.15 + (r * GRID_COLS + c) * 0.04}s both`;
            elBlockGrid.appendChild(el);
            G.grid[r][c] = { el, destroyed: false };
        }
    }
}

// ===================== CAT POSITIONING =====================
function positionCatAbove(row, col) {
    const blockEl  = G.grid[row][col].el;
    const blockRect = blockEl.getBoundingClientRect();
    const contRect  = elGame.getBoundingClientRect();
    const catTotalH = 324; 

    const localX = (blockRect.left - contRect.left) / gameScale;
    const localY = (blockRect.top  - contRect.top)  / gameScale;
    const localBlockWidth = blockRect.width / gameScale;

    const catLeft = localX + (localBlockWidth / 2) - 200; 
    const catTop  = localY - catTotalH - CAT_HOVER_GAP;

    elCat.style.left = `${catLeft}px`;
    elCat.style.top  = `${catTop}px`;

    document.querySelectorAll('.col-arrow').forEach(a => a.classList.remove('active'));
    const arrow = elColArrows.querySelector(`[data-col="${col}"]`);
    if (arrow) arrow.classList.add('active');
}

function resetCatToCenter() {
    const { w: CW } = canvasSize();
    elCat.style.left = `${CW / 2 - 200}px`; 
    elCat.style.top  = '100px';
    document.querySelectorAll('.col-arrow').forEach(a => a.classList.remove('active'));
}

// ===================== BLOCK CLICK → MOVE CAT =====================
function onBlockClick(row, col) {
    if (G.phase !== 'PLAY') return;
    if (row !== 0) return;                    
    if (G.grid[row][col].destroyed) return;

    let targetCol = col;
    if (hasEffect('CHAOS')) {
        targetCol = (GRID_COLS - 1) - col;
        if (G.grid[row][targetCol].destroyed) targetCol = col; 
    }

    if (G.targetBlockEl) G.targetBlockEl.classList.remove('target-glow');

    G.catRow = row;
    G.catCol = targetCol;
    G.targetBlockEl = G.grid[row][targetCol].el;
    G.targetBlockEl.classList.add('target-glow');

    let base = Math.floor(Math.random() * (MAX_CLICKS - MIN_CLICKS + 1)) + MIN_CLICKS;
    
    // ⭐ 各種增減益狀態判斷
    if (hasEffect('SPEED_DIG'))    base = Math.min(base, 3);
    if (hasEffect('SLOW_CURSE'))   base += 5;
    if (hasEffect('SCARE_CURSE'))  base += 8;  // 驚嚇手抖
    if (hasEffect('POISON'))       base += 10; // 中毒極度遲緩
    if (hasEffect('JIEGE_CURSE'))  base += 15;

    G.requiredClicks = base;
    G.currentClicks  = 0;

    updateMineBar();
    elMineWrap.classList.add('visible');
    positionCatAbove(row, targetCol);
    triggerCatAnim('shake');
}

function updateMineBar() {
    if (G.requiredClicks === 0) return;
    const pct = (G.currentClicks / G.requiredClicks) * 100;
    elMineBar.style.width = `${pct}%`;
    elMineBar.className = '';
    if      (pct >= 66) elMineBar.classList.add('close');
    else if (pct >= 33) elMineBar.classList.add('warn');
}

// ===================== CAT CLICK → MINE =====================
elCat.addEventListener('click', onCatClick);

function onCatClick(e) {
    if (G.phase !== 'PLAY') return;
    if (!G.targetBlockEl || G.catRow === null) {
        spawnFloat('先點選方塊移動貓咪', e.clientX, e.clientY);
        return;
    }

    triggerCatAnim('clicked');
    G.currentClicks++;
    updateMineBar();

    const remaining = G.requiredClicks - G.currentClicks;

    if (G.currentClicks >= G.requiredClicks) {
        G.targetBlockEl.classList.remove('crack-1','crack-2','crack-3');
        destroyBlock(e);
    } else {
        G.targetBlockEl.classList.remove('crack-1','crack-2','crack-3');
        if      (remaining <= 1) G.targetBlockEl.classList.add('crack-3');
        else if (remaining <= 3) G.targetBlockEl.classList.add('crack-2');
        else                     G.targetBlockEl.classList.add('crack-1');

        const jitter = () => (Math.random() * 28) - 14;
        spawnFloat('*', e.clientX + jitter(), e.clientY + jitter());
    }
}

// ===================== DESTROY BLOCK =====================
function destroyBlock(e) {
    const blockEl = G.targetBlockEl;
    const row = G.catRow, col = G.catCol;
    const memeData = blockEl.memeData; 

    blockEl.classList.remove('crack-1','crack-2','crack-3','target-glow');
    blockEl.classList.add('destroyed', 'burst');
    G.grid[row][col].destroyed = true;
    G.blocksDestroyed++;

    elMineWrap.classList.remove('visible');
    G.catRow = null; G.catCol = null; G.targetBlockEl = null;

    tickBlockEffects();    

    // ⭐ 觸發隱藏迷因事件
    if (memeData) {
        G.phase = 'VIDEO';
        clearInterval(G.timerId); 

        // 1. 取得方塊的精確座標，生成一顆往上飛的圖片
        const bRect = blockEl.getBoundingClientRect();
        const cr = elGame.getBoundingClientRect();
        const startX = (bRect.left - cr.left) / gameScale;
        const startY = (bRect.top - cr.top) / gameScale;

        const floatImg = document.createElement('img');
        floatImg.src = memeData.img;
        floatImg.className = 'floating-meme-img';
        // 將中心點對齊方塊中心
        floatImg.style.left = `${startX + (bRect.width / 2)}px`;
        floatImg.style.top = `${startY + (bRect.height / 2)}px`;
        elFX.appendChild(floatImg);

        // 2. 經過 1.5 秒飛天動畫後，播放影片
        setTimeout(() => {
            floatImg.remove();
            playVideo(memeData, () => {
                applyMemeReward(memeData, blockEl, (skipRowCheck) => {
                    resumeAfterDestroy(row, skipRowCheck);
                });
            });
        }, 1500); 

    } else {
        // 一般方塊獎勵
        const bRect = blockEl.getBoundingClientRect();
        const cx = bRect.left + bRect.width  / 2;
        const cy = bRect.top;

        const pool = REWARD_POOL.flatMap(r => Array(r.w).fill(r));
        const pick  = pool[Math.floor(Math.random() * pool.length)];
        distributeRewardType(pick, cx, cy);
        resumeAfterDestroy(row, false);
    }
}

function resumeAfterDestroy(row, skipRowCheck = false) {
    if (!skipRowCheck) {
        checkRowClear(row);
    }
    setTimeout(resetCatToCenter, 250);
    document.querySelectorAll('.col-arrow').forEach(a => a.classList.remove('active'));

    if (G.phase !== 'OVER') {
        G.phase = 'PLAY';
        startTimer(); 
    }
}

// ===================== VIDEO PLAYER LOGIC =====================
function playVideo(memeData, callback) {
    elVideoOverlay.classList.remove('hidden');
    elVideo.src = memeData.vid;
    
    elVideo.play().catch(e => {
        console.warn("影片無法自動播放:", e);
        endVideo(callback);
    });

    elVideo.onended = () => endVideo(callback);
    btnSkipVideo.onclick = () => {
        elVideo.pause();
        endVideo(callback);
    };
}

function endVideo(callback) {
    elVideoOverlay.classList.add('hidden');
    elVideo.src = "";
    elVideo.onended = null;
    btnSkipVideo.onclick = null;
    if (callback) callback();
}

// ===================== BLOCK ELEMENT FACTORY =====================
function createBlockEl(r, c) {
    const el = document.createElement('div');
    el.className = 'block';
    el.dataset.row = r;
    el.dataset.col = c;

    // 給予迷因事件 (目前設定 15% 機率)
    if (Math.random() < 0.15 && MEME_VIDEOS.length > 0) {
        const memeData = MEME_VIDEOS[Math.floor(Math.random() * MEME_VIDEOS.length)];
        el.memeData = memeData;
    }

    el.addEventListener('click', () => {
        const row = parseInt(el.dataset.row);
        const col = parseInt(el.dataset.col);
        onBlockClick(row, col);
    });
    return el;
}

function rebuildDataAttrs() {
    for (let r = 0; r < G.grid.length; r++) {
        for (let c = 0; c < G.grid[r].length; c++) {
            G.grid[r][c].el.dataset.row = r;
            G.grid[r][c].el.dataset.col = c;
        }
    }
}

function updateBlockStates() {
    for (let r = 0; r < G.grid.length; r++) {
        for (let c = 0; c < G.grid[r].length; c++) {
            if (G.grid[r][c].destroyed) {
                G.grid[r][c].el.classList.add('destroyed');
            }
        }
    }
}

// ===================== ROW CLEAR & EXPLOSION =====================
function checkRowClear(row) {
    if (!G.grid[row]) return;
    if (!G.grid[row].every(cell => cell.destroyed)) return;

    setTimeout(() => {
        G.grid[row].forEach(cell => cell.el.remove());
        G.grid.splice(row, 1);

        const rowBonus = 50;
        addScore(rowBonus);
        const gridRect = elBlockGrid.getBoundingClientRect();
        
        const floatX = gridRect.left + (gridRect.width / 2);
        const floatY = gridRect.top - (10 * gameScale);
        spawnFloat(`+${rowBonus}  一排清除`, floatX, floatY, 'big');

        const newRowData = [];
        for (let c = 0; c < GRID_COLS; c++) {
            const el = createBlockEl(0, c);   
            el.style.animation = 'rowSlideInFromBottom 0.35s ease-out both';
            elBlockGrid.append(el);
            newRowData.push({ el, destroyed: false });
        }
        G.grid.push(newRowData);

        rebuildDataAttrs();
        updateBlockStates();
    }, 360);
}

// 💥 炸開所有方塊的專屬功能
function explodeAllBlocks(cx, cy) {
    let count = 0;
    
    // 將所有活著的方塊設為摧毀狀態
    G.grid.forEach(row => {
        row.forEach(cell => {
            if (!cell.destroyed) {
                count++;
                cell.el.classList.add('destroyed', 'burst');
                cell.destroyed = true;
                G.blocksDestroyed++;
            }
        });
    });

    let pts = count * 50; // 每顆算 50 分
    addScore(pts);
    flashContainer('flash-gold'); 
    spawnFloat(`💥 大爆炸！ 炸毀 ${count} 塊 +${pts}`, cx, cy, 'big', '#cc0000');

    // 短暫延遲後，清空 DOM 並重建物件
    setTimeout(() => {
        G.grid.forEach(row => row.forEach(c => c.el.remove()));
        G.grid = [];
        
        for (let r = 0; r < GRID_ROWS; r++) {
            const newRowData = [];
            for (let c = 0; c < GRID_COLS; c++) {
                const el = createBlockEl(r, c);
                el.style.animation = `rowSlideInFromBottom 0.3s ease-out both`;
                elBlockGrid.append(el);
                newRowData.push({ el, destroyed: false });
            }
            G.grid.push(newRowData);
        }
        rebuildDataAttrs();
    }, 600);
}

// ===================== REWARDS & CUSTOM MEME EFFECTS =====================
function applyMemeReward(memeData, blockEl, callback) {
    const bRect = blockEl.getBoundingClientRect();
    const cx = bRect.left + bRect.width / 2;
    const cy = bRect.top;
    let skipRowCheck = false;

    // ⭐ 處理 4 種自訂的迷因效果
    switch (memeData.reward.type) {
        case 'scary':
            addScore(-500);
            flashContainer('flash-red');
            spawnFloat('😱 嚇死寶寶了！ -500', cx, cy, 'negative');
            applyStatusEffect({ key: 'SCARE_CURSE', label: '[驚嚇手抖]', desc: '下3格需多8下', blocks: 3, color: '#8b0000' });
            break;

        case 'explode':
            explodeAllBlocks(cx, cy);
            skipRowCheck = true; // 已經清盤重建過了，告訴系統不用再檢查單排
            break;

        case 'vehicle':
            // 偷走 30% 分數跟 10 秒時間
            let lostScore = Math.floor(G.score * 0.3);
            addScore(-lostScore);
            G.timeLeft = Math.max(1, G.timeLeft - 10);
            setTimerDisplay(G.timeLeft);
            flashContainer('flash-blue');
            spawnFloat(`🚗 滴滴！ 載走你的 ${lostScore}分 跟 10秒`, cx, cy, 'meme', '#00008b');
            break;

        case 'poison':
            flashContainer('flash-green');
            spawnFloat('🤢 嘔嘔嘔 中毒了', cx, cy, 'negative', '#32cd32');
            applyStatusEffect({ key: 'POISON', label: '[嚴重中毒]', desc: '接下來5格挖礦超費力', blocks: 5, color: '#32cd32' });
            break;
        
        case 'rickroll':
            addScore(1000); // 超大加分
            G.timeLeft += 15; // 額外加秒數
            setTimerDisplay(G.timeLeft);
            flashContainer('flash-gold');
            spawnFloat('🎵 Never gonna let you down! +1000分 +15秒', cx, cy, 'meme', '#d4af37');
            break;

        case 'crash':
            addScore(-300); // 痛失分數
            G.timeLeft = Math.max(1, G.timeLeft - 5); // 扣 5 秒
            setTimerDisplay(G.timeLeft);
            flashContainer('flash-red');
            spawnFloat('💥 犁田啦！ -300分 -5秒', cx, cy, 'negative');
            break;

        case 'ear_pull':
            flashContainer('flash-blue');
            spawnFloat('👂 痛痛痛！乖乖做苦力', cx, cy, 'meme', '#00008b');
            // 套用現有的速挖機制，但給 5 格
            applyStatusEffect({ key: 'SPEED_DIG', label: '[被逼速挖]', desc: '下5格只需3下', blocks: 5, color: '#00008b' });
            break;

        case 'fall_down':
            flashContainer('flash-red');
            spawnFloat('🤕 哎呀摔倒了...', cx, cy, 'negative');
            // 套用現有的遲緩機制
            applyStatusEffect({ key: 'SLOW_CURSE', label: '[跌倒腿瘸]', desc: '下3格需多5下', blocks: 3, color: '#8b0000' });
            break;

        case 'ride_slow':
            G.timeLeft += 20; // 阿嬤的愛心時間
            setTimerDisplay(G.timeLeft);
            flashContainer('flash-green');
            spawnFloat('👵 騎慢一點啦！時間+20秒', cx, cy, 'meme', '#32cd32');
            // 強制減速：雖然給你時間，但你必須慢慢挖
            applyStatusEffect({ key: 'SLOW_CURSE', label: '[強制慢行]', desc: '下4格需多5下', blocks: 4, color: '#32cd32' });
            break;
        
        case 'jiege':
            flashContainer('flash-red'); // 閃爍紅色警告
            spawnFloat('😱 傑哥不要啊啊啊！', cx, cy, 'negative');
            // 給予專屬的超強 Debuff
            applyStatusEffect({ 
                key: 'JIEGE_CURSE', 
                label: '[傑哥的壓迫]', 
                desc: '下3格需多15下', 
                blocks: 3, 
                color: '#4b0082' // 壓抑的深紫色
            });
            break;
            
        default:
            // 防呆，如果有其他一般的設定也照常發放
            distributeRewardType(memeData.reward, cx, cy);
            break;
    }

    if (callback) callback(skipRowCheck);
}

function distributeRewardType(pick, cx, cy) {
    switch (pick.type) {
        case 'score': {
            let pts = Math.floor(Math.random() * (pick.max - pick.min + 1 || 0)) + (pick.min || pick.score);
            pts = Math.round(pts * G.scoreMultiplier);
            addScore(pts);
            spawnFloat(pick.text || `+${pts}`, cx, cy, 'normal', pick.color);
            break;
        }
        case 'meme': {
            let pts = Math.round(pick.score * G.scoreMultiplier);
            addScore(pts);
            const style = pts < 0 ? 'negative' : 'meme';
            spawnFloat(pick.text, cx, cy, style, pick.color);
            if (pick.flash) flashContainer(pick.flash);
            break;
        }
        case 'status': {
            applyStatusEffect(pick);
            spawnFloat(pick.label, cx, cy, 'big');
            break;
        }
        case 'time': {
            G.timeLeft = Math.max(0, Math.min(99, G.timeLeft + pick.delta));
            setTimerDisplay(G.timeLeft);
            flashContainer(pick.delta > 0 ? 'flash-blue' : 'flash-red');
            spawnFloat(pick.text, cx, cy, 'big', pick.color);
            break;
        }
        
    }
}

function addScore(delta) {
    G.score = Math.max(0, G.score + delta);
    elScore.textContent = G.score;
}

// ===================== STATUS EFFECTS =====================
function applyStatusEffect(pick) {
    const existing = G.activeEffects.find(e => e.key === pick.key);
    if (existing) { existing.blocksLeft = pick.blocks; refreshBadge(existing); return; }

    const badge = document.createElement('div');
    badge.className = 'status-badge';
    badge.style.borderColor = pick.color;
    badge.style.color = pick.color;

    const eff = { key: pick.key, label: pick.label, color: pick.color, el: badge, blocksLeft: pick.blocks };
    refreshBadge(eff);
    G.activeEffects.push(eff);
    elStatusRow.appendChild(badge);

    if (pick.key === 'DOUBLE_SCORE') { G.scoreMultiplier = 2; showMultiBadge(); }
}

function hasEffect(key) { return G.activeEffects.some(e => e.key === key); }

function tickBlockEffects() {
    G.activeEffects.forEach(eff => { eff.blocksLeft--; refreshBadge(eff); });
    G.activeEffects = G.activeEffects.filter(eff => {
        if (eff.blocksLeft <= 0) {
            eff.el.remove();
            if (eff.key === 'DOUBLE_SCORE') { G.scoreMultiplier = 1; showMultiBadge(); }
            return false;
        }
        return true;
    });
}

function refreshBadge(eff) {
    eff.el.textContent = `${eff.label} [${eff.blocksLeft}]`;
}

function showMultiBadge() {
    if (G.scoreMultiplier > 1) {
        elMultiVal.textContent = G.scoreMultiplier;
        elMultiBadge.classList.remove('hidden');
    } else {
        elMultiBadge.classList.add('hidden');
    }
}

// ===================== TIMER DISPLAY =====================
function setTimerDisplay(n) {
    const digits = String(n).split('');
    elTimer.innerHTML = digits.map(d => `<img src="${d}.png" class="digit-img" alt="${d}">`).join('');
}

// ===================== TIMER =====================
function startTimer() {
    clearInterval(G.timerId);
    G.timerId = setInterval(() => {
        if (G.phase !== 'PLAY') return; 
        G.timeLeft--;
        setTimerDisplay(G.timeLeft);
        if (G.timeLeft <= 10) elTimeDisp.classList.add('danger');
        if (G.timeLeft <= 0)  endGame();
    }, 1000);
}

// ===================== GAME LIFECYCLE =====================
function startGame() {
    G = createState();
    G.phase = 'PLAY';

    elScore.textContent  = '0';
    setTimerDisplay(GAME_DURATION);
    elTimeDisp.classList.remove('danger');
    elMineWrap.classList.remove('visible');
    elStatusRow.innerHTML = '';
    elMultiBadge.classList.add('hidden');
    elFX.innerHTML = '';
    elVideoOverlay.classList.add('hidden');

    const oldBanner = document.getElementById('clear-banner');
    if (oldBanner) oldBanner.remove();

    buildGrid();
    resetCatToCenter();
    startTimer();

    elStartScreen.classList.add('hidden');
    elGameover.classList.add('hidden');
}

function endGame() {
    G.phase = 'OVER';
    clearInterval(G.timerId);
    if (G.targetBlockEl) G.targetBlockEl.classList.remove('target-glow');
    G.targetBlockEl = null;

    elFinalScore.textContent  = G.score;
    elFinalBlocks.textContent = `破壞方塊：${G.blocksDestroyed} 個`;
    elGameover.classList.remove('hidden');
}

btnStart.addEventListener('click',   startGame);
btnRestart.addEventListener('click', startGame);

// ===================== KEYBOARD CONTROLS =====================
document.addEventListener('keydown', (e) => {
    if (G.phase !== 'PLAY') return; 

    if (e.code === 'Space') {
        e.preventDefault();
        const catRect = elCat.getBoundingClientRect();
        elCat.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            clientX: catRect.left + catRect.width  / 2,
            clientY: catRect.top  + catRect.height / 2,
        }));
        return;
    }

    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && G.catCol !== null) {
        e.preventDefault();
        let dir = e.key === 'ArrowLeft' ? -1 : 1;
        if (hasEffect('CHAOS')) dir = -dir;
        const newCol = Math.max(0, Math.min(GRID_COLS - 1, G.catCol + dir));
        if (newCol !== G.catCol && !G.grid[G.catRow][newCol].destroyed) {
            onBlockClick(G.catRow, newCol);
        }
        return;
    }

    if (['1','2','3','4','5'].includes(e.key)) {
        e.preventDefault();
        const col = parseInt(e.key) - 1;
        for (let r = 0; r < GRID_ROWS; r++) {
            if (!G.grid[r][col].destroyed) { onBlockClick(r, col); break; }
        }
    }
});

// ===================== VISUAL HELPERS =====================
function triggerCatAnim(cls) {
    elCat.classList.remove('clicked', 'shake');
    void elCat.offsetWidth;
    elCat.classList.add(cls);
    if (cls === 'clicked') {
        elCatBody.src = 'Cat2.png';
        setTimeout(() => { elCatBody.src = 'Cat1.png'; }, 280);
    }
    setTimeout(() => elCat.classList.remove(cls), 320);
}

function flashContainer(cls) {
    elGame.classList.remove('flash-red','flash-gold','flash-blue','flash-green');
    void elGame.offsetWidth;
    elGame.classList.add(cls);
    setTimeout(() => elGame.classList.remove(cls), 420);
}

function spawnFloat(text, clientX, clientY, style = 'normal', color = null) {
    const el = document.createElement('div');
    el.className = 'floating-text';
    if (style === 'big')      el.classList.add('big');
    if (style === 'meme')     el.classList.add('meme');
    if (style === 'negative') el.classList.add('negative');
    el.textContent = text;
    if (color) el.style.color = color;

    const cr = elGame.getBoundingClientRect();
    el.style.left = `${(clientX - cr.left) / gameScale}px`;
    el.style.top  = `${(clientY - cr.top)  / gameScale}px`;
    elFX.appendChild(el);
    setTimeout(() => el.remove(), 1450);
}

// ===================== INITIAL RENDER =====================
elStartScreen.classList.remove('hidden');
elGameover.classList.add('hidden');

const bgImg = new Image();
bgImg.src = 'bg.jpg'; 

bgImg.onload = () => {
    const imgRatio = bgImg.naturalWidth / bgImg.naturalHeight;
    bgHeight = 885;
    bgWidth = Math.round(bgHeight * imgRatio);
    document.documentElement.style.setProperty('--game-w', `${bgWidth}px`);
    document.documentElement.style.setProperty('--game-h', `${bgHeight}px`);
    scaleGame(); 
};

bgImg.onerror = () => { scaleGame(); };