:root {
    /* 定義拼圖總大小，這裡設為 600px，所以每片是 200px */
    --puzzle-size: 450px;
    /* 3x3 拼圖，每片大小是總長除以 3 */
    --piece-size: calc(var(--puzzle-size) / 3);
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.game-wrapper {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

#puzzle-container {
    width: var(--puzzle-size);
    height: var(--puzzle-size);
    display: grid;
    /* 建立 3x3 的網格 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 2px; /* 拼圖之間的細縫 */
    border: 5px solid #333;
    background-color: #333;
    margin: 20px auto;
}

/* 每一片拼圖的共同樣式 */
.puzzle-piece {
    width: var(--piece-size);
    height: var(--piece-size);
    cursor: pointer;
    /* 你的照片檔名 */
    background-image: url('puzzle.jpg');  
    background-size: var(--puzzle-size) var(--puzzle-size); /* 確保背景圖是完整大小 */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* 當滑鼠移上去時的效果 */
.puzzle-piece:hover {
    opacity: 0.9;
}

/* 當拼圖被選中時的效果 */
.puzzle-piece.selected {
    transform: scale(0.95);
    box-shadow: 0 0 15px yellow;
    z-index: 10;
    border: 2px solid yellow;
}

/* --- 切圖設定：3x3 版本 (0%, 50%, 100%) --- */

/* 第一排 */
[data-correct-pos="0"] { background-position: 0% 0%; }
[data-correct-pos="1"] { background-position: 50% 0%; }
[data-correct-pos="2"] { background-position: 100% 0%; }

/* 第二排 */
[data-correct-pos="3"] { background-position: 0% 50%; }
[data-correct-pos="4"] { background-position: 50% 50%; }
[data-correct-pos="5"] { background-position: 100% 50%; }

/* 第三排 */
[data-correct-pos="6"] { background-position: 0% 100%; }
[data-correct-pos="7"] { background-position: 50% 100%; }
[data-correct-pos="8"] { background-position: 100% 100%; }


/* 通關訊息樣式 */
.hidden {
    display: none;
}

#success-message {
    margin-top: 20px;
    color: #28a745;
}

#success-message button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a