body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; 
    
    /* 1. 設定背景圖片 */
    background-image: url('../assets/03.png');
    
    /* 2. 加上這些設定，讓圖片可以完美填滿整個網頁 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 3. 把原本的漸層刪掉，或者改成備用的底色 (當圖片失效時顯示) */
    background-color: #ffe4e1; 
}

/* ====================
   新增：像商店一樣的排版
   ==================== */
.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 2px solid #fff0f3;
}

.leaderboard-title {
    color: #333;
    margin: 0;
    font-size: 24px;
    letter-spacing: 2px;
    font-weight: bold;
}

.leaderboard-body {
    flex: 1;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    background-color: transparent; /* 改為透明，讓外層毛玻璃透出來 */
    overflow: hidden; /* 🌟 加上這行，確保外層容器不會被內容撐開，進而觸發內部的滾動條 */
}

.leaderboard-box {
    width: 800px;
    height: 550px;
    
    /* 👇 主要修改這裡：改成 65% 透明度的白色，並加上毛玻璃效果 */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    /* 👆 修改結束 */
    
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 138, 166, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* 左側面板 */
.left-panel {
    width: 150px;
    background-color: #fff0f3; /* 淺粉色區塊 */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 20px;
}

.panel-title {
    margin-top: 90px;
    text-align: center;
    color: #ff6b81;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 5px;
    line-height: 1.5;
}

/* 右側面板 */
.right-panel {
    flex: 1;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    background-color: transparent; /* 改為透明 */
}

/* 列表標題 */
.list-header {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    color: #999;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
    padding: 0 15px 10px 15px;
    border-bottom: 2px solid #fff0f3;
}

.header-score {
    text-align: right;
}

/* 列表容器 */
.ranking-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 卡片之間的間距 */
}

/* 自訂捲軸 */
.ranking-list::-webkit-scrollbar { width: 6px; }
.ranking-list::-webkit-scrollbar-thumb { background: #ffd1dc; border-radius: 10px; }

/* 獨立卡片設計 */
.rank-card {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    padding: 12px 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: 0.2s;
}

.rank-card:hover {
    box-shadow: 0 5px 15px rgba(255, 183, 197, 0.3);
    border-color: #ffe4e8;
    transform: translateY(-2px); /* 滑鼠移過去微微浮起 */
}

/* 名次圈圈 */
.rank-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff0f3;
    color: #ff6b81;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    position: relative;
}

/* 前三名專屬顏色 */
.rank-1 { background-color: #ffd700; color: #fff; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
.rank-2 { background-color: #c0c0c0; color: #fff; }
.rank-3 { background-color: #cd7f32; color: #fff; }

/* 皇冠圖示 */
.crown-icon {
    position: absolute;
    top: -16px;
    font-size: 20px;
}

.username {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.score {
    color: #f39c12;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
}

/* =========================================
   地面與物件場景
   ========================================= */
.scene {
    position: fixed;
    bottom: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
    z-index: -1;
}
.ground-3d {
    position: absolute;
    bottom: 0; width: 100vw; height: 22vh;
    background: linear-gradient(to bottom, #5D4037 0%, #4E342E 30%, #3E2723 70%, #2D1A16 100%);
    border-top: 32px solid #81C784; 
    box-shadow: inset 0 25px 30px -15px rgba(0,0,0,0.6), 0 -8px 20px rgba(129, 199, 132, 0.5);
    z-index: 1;
}
.ground-3d::before {
    content: ''; position: absolute;
    top: -32px; left: 0; width: 100%; height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 50% 50% 0 0;
}
.ground-texture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
    mix-blend-mode: overlay; opacity: 0.6; z-index: 1;
}
.buried-rock {
    position: absolute; background: linear-gradient(135deg, #6D4C41, #4E342E);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.6), inset 2px 2px 5px rgba(255,255,255,0.1);
}
.rock-1 { width: 45px; height: 30px; top: 25%; left: 22%; transform: rotate(15deg); }
.rock-2 { width: 65px; height: 40px; top: 55%; left: 75%; transform: rotate(-10deg); }
.objects-container { position: absolute; bottom: 22vh; width: 100vw; height: 150px; z-index: 2; }
.sapling-container {
    position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
    display: flex; justify-content: center; align-items: flex-end;
}
.sapling-glow {
    position: absolute; bottom: 0; width: 140px; height: 35px;
    background: radial-gradient(ellipse, rgba(255, 235, 59, 0.8) 0%, rgba(139, 195, 74, 0.4) 40%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%; animation: pulseGlow 2.5s infinite alternate;
}
@keyframes pulseGlow { from { transform: scale(0.9); opacity: 0.7; } to { transform: scale(1.2); opacity: 1; } }
.sapling {
    width: 120px; height: 140px; z-index: 2;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
    animation: breathe 4s ease-in-out infinite; transform-origin: bottom center; margin-bottom: -5px;
}
@keyframes breathe { 0%, 100% { transform: scaleY(1) rotate(0deg); } 50% { transform: scaleY(1.03) rotate(2deg); } }
.butterfly-wrapper { position: absolute; bottom: 20%; left: 35%; z-index: 4; animation: flutterMove 15s ease-in-out infinite; }
.butterfly { width: 16px; height: 16px; position: relative; transform-style: preserve-3d; animation: flutterBob 3s ease-in-out infinite; }
.wing {
    position: absolute; top: 0; width: 10px; height: 15px;
    background: #FFB74D; border-radius: 50% 50% 0 50%; transform-origin: right center; opacity: 0.9;
}
.wing.right { left: 10px; border-radius: 50% 50% 50% 0; transform-origin: left center; background: #FF9800; animation: flapRight 0.12s infinite alternate; }
.wing.left { left: 0; animation: flapLeft 0.12s infinite alternate; }
@keyframes flapLeft { from { transform: rotateY(0deg); } to { transform: rotateY(70deg); } }
@keyframes flapRight { from { transform: rotateY(0deg); } to { transform: rotateY(-70deg); } }
@keyframes flutterMove {
    0% { transform: translate(0, 0) rotate(10deg); } 25% { transform: translate(60px, -60px) rotate(-10deg); }
    50% { transform: translate(120px, -20px) rotate(20deg); } 75% { transform: translate(40px, -80px) rotate(-15deg); }
    100% { transform: translate(0, 0) rotate(10deg); }
}
@keyframes flutterBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.magic-particle {
    position: absolute; background: white; border-radius: 50%; pointer-events: none; opacity: 0; animation: floatUp 2s ease-in forwards;
}
@keyframes floatUp { 0% { transform: translateY(0) scale(0); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-100px) scale(1.5); opacity: 0; } }