upd

card/newCards/top1/detail3.html

@@ -41,269 +41,266 @@
             flex-direction: column;
         }
 
-        /* 顶部 Header */
+        /* 顶部 Header：高度减小，更紧凑 */
         .header-area {
-            height: 290px;
+            height: 250px; /* 原 290px -> 250px */
             background: url('./bgkt.jpg') center/cover no-repeat;
-            padding: 20px;
-            padding-top: max(25px, env(safe-area-inset-top));
+            padding: 15px 20px;
+            padding-top: max(20px, env(safe-area-inset-top));
             color: white;
-            border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
+            border-bottom-left-radius: 35px; border-bottom-right-radius: 35px;
             position: relative; flex-shrink: 0;
             z-index: 1; 
-            box-shadow: 0 10px 0 rgba(0,0,0,0.05);
-            overflow: hidden; /* 确保云朵不飞出去 */
+            box-shadow: 0 8px 0 rgba(0,0,0,0.05);
+            overflow: hidden; 
         }
 
-        /* 顶部背景遮罩 */
         .header-area::after {
             content: '';
             position: absolute;
             top: 0; left: 0; width: 100%; height: 100%;
             background: linear-gradient(to bottom, rgba(72, 219, 251, 0.4) 0%, rgba(255,255,255,0.1) 100%);
-            border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
+            border-bottom-left-radius: 35px; border-bottom-right-radius: 35px;
             z-index: -1;
         }
 
-        /* 导航栏：层级要最高，保证能点击 */
         .nav-bar { 
             display: flex; justify-content: space-between; align-items: center; 
-            margin-top: 5px; 
+            margin-top: 0px; 
             position: relative; 
-            z-index: 20; /* 提高层级 */
+            z-index: 20; 
         }
 
         .icon-btn {
-            width: 36px; height: 36px; 
+            width: 32px; height: 32px; /* 略微缩小按钮 */
             background: rgba(255,255,255,0.9); 
             border-radius: 50%; display: flex; align-items: center; justify-content: center;
             cursor: pointer; 
             border: 2px solid white;
-            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
+            box-shadow: 0 3px 0 rgba(0,0,0,0.1);
             color: var(--kid-blue-dark);
-            transition: transform 0.1s;
+            font-size: 14px;
         }
-        .icon-btn:active { transform: translateY(4px); box-shadow: none; }
+        .icon-btn:active { transform: translateY(3px); box-shadow: none; }
         
         .month-select { 
-            font-size: 18px; font-weight: 800; 
-            display: flex; align-items: center; gap: 8px; cursor: pointer; 
-            text-shadow: 2px 2px 0 rgba(0,0,0,0.1); 
-            background: rgba(255,255,255,0.25); padding: 5px 15px; border-radius: 20px;
+            font-size: 16px; font-weight: 800; 
+            display: flex; align-items: center; gap: 6px; cursor: pointer; 
+            text-shadow: 1px 1px 0 rgba(0,0,0,0.1); 
+            background: rgba(255,255,255,0.25); padding: 4px 12px; border-radius: 18px;
             backdrop-filter: blur(5px);
             border: 1px solid rgba(255,255,255,0.5);
         }
 
-        /* --- 新增：头部云朵动画 --- */
+        /* 云朵动画保持不变 */
         .cloud {
             position: absolute;
             background: #fff;
             border-radius: 50%;
-            z-index: 0; /* 在背景之上，文字之下 */
+            z-index: 0; 
             opacity: 0.9;
             box-shadow: 0 5px 10px rgba(0,0,0,0.05);
-            pointer-events: none; /* 让点击穿透 */
+            pointer-events: none; 
         }
-        
-        /* 云朵1：左侧大云 */
         .c1 { 
             width: 70px; height: 70px; top: 15%; left: -10px; 
             box-shadow: 25px 8px 0 #fff, -20px 12px 0 #fff; 
             animation: floatCloudHeader1 8s infinite ease-in-out alternate;
         }
-        
-        /* 云朵2：右侧小云 */
         .c2 { 
             width: 50px; height: 50px; top: 25%; right: 5%; 
             box-shadow: 15px 6px 0 #fff, -10px 8px 0 #fff; 
             animation: floatCloudHeader2 6s infinite ease-in-out alternate-reverse; 
         }
-
-        /* 云朵3：中间远处的云 */
         .c3 {
             width: 40px; height: 40px; top: 40%; left: 40%;
             opacity: 0.6;
             box-shadow: 12px 5px 0 #fff, -8px 6px 0 #fff;
             animation: floatCloudHeader3 10s infinite linear;
         }
+        @keyframes floatCloudHeader1 { from { transform: translate(0, 0); } to { transform: translate(30px, 10px); } }
+        @keyframes floatCloudHeader2 { from { transform: translate(0, 0); } to { transform: translate(-25px, 15px); } }
+        @keyframes floatCloudHeader3 { 0% { transform: translateX(-20px); } 50% { transform: translateX(20px); } 100% { transform: translateX(-20px); } }
 
-        @keyframes floatCloudHeader1 {
-            from { transform: translate(0, 0); }
-            to { transform: translate(30px, 10px); } 
-        }
-        @keyframes floatCloudHeader2 {
-            from { transform: translate(0, 0); }
-            to { transform: translate(-25px, 15px); }
-        }
-        @keyframes floatCloudHeader3 {
-            0% { transform: translateX(-20px); }
-            50% { transform: translateX(20px); }
-            100% { transform: translateX(-20px); }
-        }
-        /* -------------------------- */
-
-        /* 领奖台容器 */
+        /* 领奖台容器：高度压缩 */
         .podium-wrap {
-            height: 160px; 
+            height: 130px; /* 原 160px -> 130px */
             display: flex; justify-content: center; align-items: flex-end; 
-            margin-top: -180px; 
+            margin-top: -145px; /* 上移调整 */
             position: relative; 
-            z-index: 10; /* 保证在云朵之上 */
+            z-index: 10; 
             padding-bottom: 0px; 
         }
         .p-col { display: flex; flex-direction: column; align-items: center; width: 30%; position: relative;}
         .p-2 { z-index: 2; margin-right: -10px; }
-        .p-1 { z-index: 3; margin-bottom: 12px; } 
+        .p-1 { z-index: 3; margin-bottom: 10px; } 
         .p-3 { z-index: 1; margin-left: -10px; }
         
-        .p-img { width: 50px; height: 50px; border-radius: 50%; border: 3px solid white; background: #eee; margin-bottom: -15px; position: relative; z-index: 2; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
-        .p-1 .p-img { width: 70px; height: 70px; border-color: var(--kid-yellow); margin-bottom: -18px;}
+        /* 头像压缩 */
+        .p-img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid white; background: #eee; margin-bottom: -12px; position: relative; z-index: 2; overflow: hidden; box-shadow: 0 3px 5px rgba(0,0,0,0.1);}
+        .p-1 .p-img { width: 60px; height: 60px; margin-bottom: -15px;}
         .p-img img { width: 100%; height: 100%; object-fit: cover; }
 
         .crown {
-            position: absolute; top: -30px; color: var(--kid-yellow); font-size: 34px;
-            filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
+            position: absolute; top: -24px; color: var(--kid-yellow); font-size: 28px;
+            filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.2));
             animation: crownFloat 2s ease-in-out infinite;
             z-index: 20; 
         }
 
+        /* 领奖台底座：高度压缩 */
         .p-box { 
             width: 100%; text-align: center; 
-            padding-top: 20px; padding-bottom: 8px; 
-            border-radius: 15px 15px 0 0; 
+            padding-top: 15px; padding-bottom: 5px; 
+            border-radius: 12px 12px 0 0; 
             color: white; 
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
             border: 2px solid rgba(255,255,255,0.6); 
             border-bottom: none;
         }
-        .p-1 .p-box { height: 105px; background: var(--kid-yellow); padding-top: 24px; }
-        .p-2 .p-box { height: 85px; background: var(--kid-blue); }
-        .p-3 .p-box { height: 75px; background: var(--kid-orange); }
+        /* 第一名高度 105 -> 85 */
+        .p-1 .p-box { height: 85px; background: var(--kid-yellow); padding-top: 20px; }
+        /* 第二名高度 85 -> 65 */
+        .p-2 .p-box { height: 65px; background: var(--kid-blue); }
+        /* 第三名高度 75 -> 55 */
+        .p-3 .p-box { height: 55px; background: var(--kid-orange); }
 
-        .p-name { font-size: 13px; margin-bottom: 6px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); white-space: nowrap; overflow: hidden; max-width: 70px; margin: 0 auto 6px auto; text-overflow: ellipsis;}
-        .p-score { font-size: 15px; font-weight: 900; background: rgba(0,0,0,0.1); display: inline-block; padding: 2px 8px; border-radius: 8px;}
+        .p-name { font-size: 11px; margin-bottom: 2px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); white-space: nowrap; overflow: hidden; max-width: 60px; margin: 0 auto 2px auto; text-overflow: ellipsis;}
+        .p-score { font-size: 13px; font-weight: 900; background: rgba(0,0,0,0.1); display: inline-block; padding: 1px 6px; border-radius: 6px;}
 
         /* 列表容器 */
         .list-container {
             flex: 1; 
             background: transparent; 
-            margin-top: 10px;
+            margin-top: 5px;
             display: flex; flex-direction: column;
             overflow: hidden; 
             position: relative; z-index: 8; 
         }
 
-        /* 仪表盘卡片 */
+        /* 仪表盘卡片：极致压缩，变为条状 */
         .dashboard-card {
-            margin: 0 15px 15px 15px;
+            margin: 0 15px 10px 15px;
             background: #fff;
-            border-radius: 20px;
-            padding: 10px 15px;
-            border: 3px solid var(--kid-blue); 
-            box-shadow: 0 5px 0 rgba(72, 219, 251, 0.3);
+            border-radius: 15px; /* 圆角减小 */
+            padding: 6px 12px; /* 内边距大幅减小 */
+            border: 2px solid var(--kid-blue); /* 边框减细 */
+            box-shadow: 0 3px 0 rgba(72, 219, 251, 0.3);
             position: relative;
             flex-shrink: 0; 
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
         }
 
-        .dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
-        .dash-title { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; color: var(--kid-text); }
-        .dash-icon { color: var(--kid-orange); font-size: 16px; animation: wiggle 2s infinite; }
+        /* 左侧标题区域 */
+        .dash-header { 
+            display: flex; flex-direction: column; justify-content: center; align-items: flex-start; 
+            margin-bottom: 0; margin-right: 10px; width: 80px; flex-shrink: 0;
+        }
+        .dash-title { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 4px; color: var(--kid-text); margin-bottom: 2px;}
+        .dash-icon { color: var(--kid-orange); font-size: 12px; }
         
         .dash-badge { 
             background: var(--kid-blue); color: white; 
-            font-size: 11px; font-weight: 800; padding: 4px 10px; 
-            border-radius: 12px; 
+            font-size: 9px; font-weight: 800; padding: 2px 6px; 
+            border-radius: 8px; width: fit-content;
         }
         .dash-badge.completed { background: var(--kid-green); }
 
-        .trophy-track-container { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
-        .track-line-bg { position: absolute; top: 50%; left: 10px; right: 10px; height: 6px; background: #eee; border-radius: 10px; transform: translateY(-50%); z-index: 0; }
+        /* 右侧进度条区域 */
+        .trophy-track-container { 
+            position: relative; display: flex; justify-content: space-between; align-items: center; 
+            flex: 1; padding: 0 5px; 
+        }
+        .track-line-bg { position: absolute; top: 50%; left: 5px; right: 5px; height: 4px; background: #eee; border-radius: 4px; transform: translateY(-50%); z-index: 0; }
         .track-line-active { 
-            position: absolute; top: 50%; left: 10px; width: 25%; height: 6px; 
+            position: absolute; top: 50%; left: 5px; width: 25%; height: 4px; 
             background: linear-gradient(90deg, var(--kid-yellow), var(--kid-orange)); 
-            border-radius: 10px; transform: translateY(-50%); z-index: 0; 
+            border-radius: 4px; transform: translateY(-50%); z-index: 0; 
             transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
         }
 
+        /* 图标压缩 */
         .trophy-item { 
-            position: relative; z-index: 1; width: 28px; height: 28px; 
+            position: relative; z-index: 1; 
+            width: 20px; height: 20px; /* 缩小图标 */
             background: #fff; border: 2px solid #eee; border-radius: 50%; 
             display: flex; justify-content: center; align-items: center; 
-            color: #b2bec3; font-size: 11px; transition: all 0.4s;
+            color: #b2bec3; font-size: 9px; transition: all 0.4s;
         }
         .trophy-item.active { background: #fff; border-color: var(--kid-green); color: var(--kid-green); transform: scale(1.1); }
-        .trophy-item.final { width: 34px; height: 34px; font-size: 14px; border-color: var(--kid-yellow); }
-        .trophy-item.final.active { background: var(--kid-yellow); color: white; border-color: #fff; transform: scale(1.2); box-shadow: 0 0 0 3px var(--kid-yellow); animation: pulseTrophy 2s infinite; }
+        .trophy-item.final { width: 26px; height: 26px; font-size: 11px; border-color: var(--kid-yellow); }
+        .trophy-item.final.active { background: var(--kid-yellow); color: white; border-color: #fff; transform: scale(1.2); box-shadow: 0 0 0 2px var(--kid-yellow); animation: pulseTrophy 2s infinite; }
 
         /* 滚动区域 */
         .rank-scroll-area {
             flex: 1;
             background: white;
-            border-radius: 25px 25px 0 0;
-            padding: 0 20px 120px 20px; 
+            border-radius: 20px 20px 0 0;
+            padding: 0 15px 120px 15px; 
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
-            box-shadow: 0 -5px 10px rgba(0,0,0,0.03);
+            box-shadow: 0 -4px 8px rgba(0,0,0,0.03);
         }
 
         .tabs { 
-            display: flex; justify-content: center; gap: 15px; 
+            display: flex; justify-content: center; gap: 10px; 
             position: sticky; top: 0; background: white; z-index: 9;
-            padding-top: 15px; padding-bottom: 10px;
+            padding-top: 12px; padding-bottom: 8px;
         }
-        .tab { padding: 6px 20px; border-radius: 18px; font-size: 13px; color: #b2bec3; background: #f1f2f6; cursor: pointer; transition: 0.2s; font-weight: bold; border: 2px solid transparent;}
-        .tab.active { background: var(--kid-blue); color: white; border-color: var(--kid-blue-dark); box-shadow: 0 3px 0 var(--kid-blue-dark); transform: translateY(-1px);}
+        .tab { padding: 5px 16px; border-radius: 15px; font-size: 12px; color: #b2bec3; background: #f1f2f6; cursor: pointer; transition: 0.2s; font-weight: bold; border: 2px solid transparent;}
+        .tab.active { background: var(--kid-blue); color: white; border-color: var(--kid-blue-dark); box-shadow: 0 2px 0 var(--kid-blue-dark); transform: translateY(-1px);}
 
-        .list-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 2px dashed #f1f2f6; }
-        .rank { width: 30px; text-align: center; font-weight: 900; color: var(--kid-blue-dark); font-style: italic; font-size: 16px;}
-        .avatar { width: 40px; height: 40px; border-radius: 50%; margin: 0 12px; background: #eee; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
+        .list-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 2px dashed #f1f2f6; }
+        .rank { width: 25px; text-align: center; font-weight: 900; color: var(--kid-blue-dark); font-style: italic; font-size: 14px;}
+        .avatar { width: 36px; height: 36px; border-radius: 50%; margin: 0 10px; background: #eee; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
         .avatar img { width: 100%; height: 100%; object-fit: cover;}
         .info { flex: 1; }
-        .name { font-size: 14px; color: var(--kid-text); font-weight: 800; }
-        .team { font-size: 11px; color: #a4b0be; display: flex; align-items: center; gap: 4px; background: #f1f2f6; display: inline-block; padding: 2px 6px; border-radius: 6px; margin-top: 2px;}
-        .score { font-size: 16px; font-weight: 900; color: var(--kid-orange); }
+        .name { font-size: 13px; color: var(--kid-text); font-weight: 800; }
+        .team { font-size: 10px; color: #a4b0be; display: flex; align-items: center; gap: 4px; background: #f1f2f6; display: inline-block; padding: 1px 5px; border-radius: 5px; margin-top: 2px;}
+        .score { font-size: 15px; font-weight: 900; color: var(--kid-orange); }
 
         /* 底部我的排名 */
         .my-rank-bar {
             position: fixed; bottom: 0; left: 0; width: 100%;
             background: var(--footer-bg); color: white;
             display: flex; align-items: center; 
-            padding: 0 20px;
-            padding-top: 10px;
-            padding-bottom: calc(10px + env(safe-area-inset-bottom));
+            padding: 0 15px;
+            padding-top: 8px;
+            padding-bottom: calc(8px + env(safe-area-inset-bottom));
             box-sizing: border-box;
-            border-radius: 30px 30px 0 0; 
-            box-shadow: 0 -5px 20px rgba(255, 107, 107, 0.3); z-index: 99; 
-            border-top: 4px solid rgba(255,255,255,0.2);
+            border-radius: 20px 20px 0 0; 
+            box-shadow: 0 -4px 15px rgba(255, 107, 107, 0.3); z-index: 99; 
+            border-top: 3px solid rgba(255,255,255,0.2);
         }
         @supports (-webkit-touch-callout: none) {
-            .my-rank-bar { padding-top: 8px !important; padding-bottom: env(safe-area-inset-bottom) !important; }
+            .my-rank-bar { padding-top: 6px !important; padding-bottom: env(safe-area-inset-bottom) !important; }
         }
 
-        .my-rank-bar .rank { font-size: 20px; color: white; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
-        .my-rank-bar .avatar { width: 38px; height: 38px; border: 2px solid white; box-shadow: none; }
-        .my-rank-bar .name { font-size: 15px; color: white; }
-        .my-rank-bar .team { background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); }
-        .my-score { font-size: 20px; font-weight: 900; color: #fff !important; margin-left: auto; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
+        .my-rank-bar .rank { font-size: 18px; color: white; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
+        .my-rank-bar .avatar { width: 34px; height: 34px; border: 2px solid white; box-shadow: none; }
+        .my-rank-bar .name { font-size: 14px; color: white; }
+        .my-score { font-size: 18px; font-weight: 900; color: #fff !important; margin-left: auto; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
 
-        .dropdown { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 220px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: none; flex-direction: column; overflow: hidden; z-index: 200; border: 4px solid var(--kid-blue); }
+        .dropdown { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 200px; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: none; flex-direction: column; overflow: hidden; z-index: 200; border: 3px solid var(--kid-blue); }
         .dropdown.show { display: flex; animation: dropIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-        .dd-item { padding: 15px; color: var(--kid-text); font-size: 15px; text-align: center; border-bottom: 2px dashed #f1f2f6; cursor: pointer; font-weight: bold;}
+        .dd-item { padding: 12px; color: var(--kid-text); font-size: 14px; text-align: center; border-bottom: 2px dashed #f1f2f6; cursor: pointer; font-weight: bold;}
         .dd-active { color: var(--kid-blue-dark); background: #e0f7fa; }
 
         .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(4px); }
         .modal-mask.show { opacity: 1; pointer-events: auto; }
-        .modal-body { width: 85%; max-width: 340px; background: white; border-radius: 30px; padding: 25px; text-align: center; transform: scale(0.8); transition: transform 0.3s; border: 5px solid var(--kid-blue); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
+        .modal-body { width: 85%; max-width: 300px; background: white; border-radius: 25px; padding: 20px; text-align: center; transform: scale(0.8); transition: transform 0.3s; border: 4px solid var(--kid-blue); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
         .modal-mask.show .modal-body { transform: scale(1); }
-        .m-close { background: var(--kid-yellow); color: #fff; padding: 10px 25px; border-radius: 25px; border: none; font-weight: 900; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 0 #f39c12; }
-        .m-close:active { transform: translateY(4px); box-shadow: none; }
-        .rule-box { text-align: left; background: #fff8e1; border: 2px dashed #ffeaa7; border-radius: 15px; padding: 15px; color: #d35400; font-size: 14px; line-height: 1.6; }
+        .m-close { background: var(--kid-yellow); color: #fff; padding: 8px 20px; border-radius: 20px; border: none; font-weight: 900; cursor: pointer; margin-top: 15px; box-shadow: 0 3px 0 #f39c12; }
+        .m-close:active { transform: translateY(3px); box-shadow: none; }
+        .rule-box { text-align: left; background: #fff8e1; border: 2px dashed #ffeaa7; border-radius: 12px; padding: 12px; color: #d35400; font-size: 13px; line-height: 1.5; }
         
-        .demo-section { margin-top: 15px; border-top: 2px dashed #eee; padding-top: 15px; }
-        .demo-btn { background: #f1f2f6; border: none; padding: 6px 12px; border-radius: 12px; font-weight: bold; color: #576574; }
+        .demo-section { margin-top: 15px; border-top: 2px dashed #eee; padding-top: 10px; }
+        .demo-btn { background: #f1f2f6; border: none; padding: 5px 10px; border-radius: 10px; font-weight: bold; color: #576574; font-size: 12px;}
 
         .loading-mask { position: fixed; inset: 0; background: rgba(255,255,255,0.6); display: none; align-items: center; justify-content: center; z-index: 300; color: var(--kid-blue-dark); font-weight: bold; backdrop-filter: blur(5px); }
-        .loading-spinner { border: 5px solid #eee; border-top-color: var(--kid-blue); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-right: 10px; }
+        .loading-spinner { border: 4px solid #eee; border-top-color: var(--kid-blue); border-radius: 50%; width: 32px; height: 32px; animation: spin 1s linear infinite; margin-right: 10px; }
 
         @keyframes wiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
         @keyframes dropIn { from{opacity:0; transform:translateX(-50%) translateY(-20px) scale(0.9);} to{opacity:1; transform:translateX(-50%) translateY(0) scale(1);} }
@@ -315,9 +312,8 @@
 </head>
 <body>
 
-    <!-- 头部：包含背景、云朵、导航按钮 -->
+    <!-- 头部 -->
     <div class="header-area">
-        <!-- 云朵装饰（在背景之上，文字之下） -->
         <div class="cloud c1"></div>
         <div class="cloud c2"></div>
         <div class="cloud c3"></div>
@@ -331,21 +327,23 @@
         </div>
     </div>
 
-    <!-- 领奖台 -->
+    <!-- 领奖台 (高度压缩) -->
     <div class="podium-wrap" id="podiumWrap"></div>
 
     <!-- 列表区 -->
     <div class="list-container">
         
-        <!-- 仪表盘卡片 -->
+        <!-- 仪表盘卡片 (高度减半，紧凑布局) -->
         <div class="dashboard-card">
+            <!-- 左侧：文字和徽章 -->
             <div class="dash-header">
                 <div class="dash-title">
-                    <i class="fa-solid fa-map-marked-alt dash-icon"></i> 我的任务
+                    <i class="fa-solid fa-map-marked-alt dash-icon"></i> 任务
                 </div>
-                <div class="dash-badge" id="dashBadge">挑战 1 / 4</div>
+                <div class="dash-badge" id="dashBadge">1 / 4</div>
             </div>
 
+            <!-- 右侧：细长的进度条 -->
             <div class="trophy-track-container">
                 <div class="track-line-bg"></div>
                 <div class="track-line-active" id="progressLine"></div>
@@ -367,7 +365,6 @@
         </div>
     </div>
 
-    <!-- 底部我的排名 -->
     <div class="my-rank-bar">
         <div class="rank" id="myRankNum">--</div>
         <div class="avatar" id="myAvatar" style="border:2px solid #fff; overflow:hidden;"></div>
@@ -377,19 +374,18 @@
 
     <div class="dropdown" id="dropdown"></div>
 
-    <!-- 模态框 -->
     <div class="modal-mask" id="infoModal">
         <div class="modal-body">
-            <h3 style="color:var(--kid-blue-dark); margin-bottom:15px; font-size:20px;">📜 探险指南</h3>
+            <h3 style="color:var(--kid-blue-dark); margin-bottom:10px; font-size:18px;">📜 探险指南</h3>
             <div id="ruleContent" class="rule-box">
-                <div class="rule-item"><i class="fa-solid fa-bullseye"></i><div><strong>怎么玩：</strong> 在公园找到宝藏打卡点，时间越短越厉害！</div></div>
+                <div class="rule-item"><i class="fa-solid fa-bullseye"></i><div><strong>怎么玩：</strong> 在公园找到打卡点，时间越短越厉害！</div></div>
                 <div class="rule-item"><i class="fa-solid fa-map-location-dot"></i><div><strong>比什么：</strong> 看看谁探索的公园最多。</div></div>
                 <div class="rule-item"><i class="fa-solid fa-star"></i><div><strong>拿奖杯：</strong> 完成4次挑战，点亮所有星星！</div></div>
             </div>
 
             <div class="demo-section">
-                <div class="demo-label" style="font-size:12px;color:#aaa;margin-bottom:8px">测试小工具</div>
-                <div class="demo-controls" style="display:flex;justify-content:center;gap:10px">
+                <div class="demo-label" style="font-size:11px;color:#aaa;margin-bottom:5px">测试小工具</div>
+                <div class="demo-controls" style="display:flex;justify-content:center;gap:8px">
                     <button class="demo-btn" onclick="demoProgress(1);closeModal()">1/4</button>
                     <button class="demo-btn" onclick="demoProgress(3);closeModal()">3/4</button>
                     <button class="demo-btn" onclick="demoProgress(4);closeModal()">通关</button>
@@ -406,7 +402,7 @@
     </div>
 
     <script>
-        // ------------------ JS 逻辑 ------------------
+        // ------------------ JS 逻辑 (保持不变) ------------------
         const dropdown = document.getElementById('dropdown');
         const rankListEl = document.getElementById('rankList');
         const trackLine = document.getElementById('progressLine');
@@ -490,7 +486,7 @@
             const percent = Math.max(0, Math.min(1, ratio)) * 100;
             trackLine.style.width = percent + '%';
             const textReal = safeReal >= safeTarget ? safeTarget : safeReal;
-            badge.innerText = safeReal >= safeTarget ? '🎉 挑战成功' : `挑战 ${textReal} / ${safeTarget}`;
+            badge.innerText = safeReal >= safeTarget ? '成功' : `${textReal} / ${safeTarget}`;
             badge.classList.toggle('completed', safeReal >= safeTarget);
             function setIconActive(el, active) {
                 if (active) {