/* ===== 掘金周赛排行榜 · 红金视觉 ===== */

:root{
  --red-deep:#6d040a;
  --red-mid:#a50f16;
  --red-bright:#c8161d;
  --card-a:#cf1c23;
  --card-b:#96101a;
  --gold:#ffd76e;
  --gold-2:#f2b73c;
  --gold-3:#fff6d8;
  --ink:#5a1400;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0}

body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#fff;
  background:
    radial-gradient(120% 70% at 50% -10%, #d62229 0%, #b4131a 32%, #8e0a11 60%, #62030a 100%) fixed,
    #62030a;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:480px;
  margin:0 auto;
  padding:0 14px calc(28px + env(safe-area-inset-bottom));
  position:relative;
}

/* ================= 顶部 ================= */
.hero{
  position:relative;
  padding:18px 4px 14px;
  text-align:center;
  overflow:hidden;
}

/* 金色星点 */
.stars{
  position:absolute;inset:-40px -20px 0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,214,110,.95) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 78% 14%, rgba(255,214,110,.85) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 32% 66%, rgba(255,236,180,.8) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 62% 52%, rgba(255,214,110,.9) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 90% 70%, rgba(255,214,110,.7) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 22% 88%, rgba(255,236,180,.6) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 50% 34%, rgba(255,214,110,.5) 0 1.2px, transparent 2px);
  animation:twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.hero-top{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.brand{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.brand svg{width:16px;height:16px;fill:var(--gold);filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

.switch-btn{
  display:flex;align-items:center;gap:2px;
  font-family:inherit;font-size:12.5px;color:#fff2cc;
  padding:6px 12px 6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,214,110,.55);
  background:linear-gradient(180deg, rgba(255,214,110,.22), rgba(255,214,110,.08));
  cursor:pointer;
  backdrop-filter:blur(2px);
}
.switch-btn:active{transform:scale(.96)}
.switch-btn svg{width:16px;height:16px;fill:currentColor}

.hero-title{
  position:relative;
  margin:2px 0 12px;
  font-size:36px;
  line-height:1.14;
  font-weight:900;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#fffbe8 4%,#ffe28f 42%,#ffc84a 68%,#e79a15 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 0 rgba(96,16,0,.45)) drop-shadow(0 0 16px rgba(255,190,60,.45));
}
.hero-title.no-season{
  font-size:20px;font-weight:700;
  filter:none;color:#ffe9a8;background:none;-webkit-text-fill-color:#ffe9a8;
}

.hero-date{
  position:relative;
  display:inline-block;
  padding:6px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#fffdf7,#ffeecd);
  color:#a5101a;
  font-size:14px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.32), inset 0 -2px 0 rgba(200,120,0,.18);
}

.hero-meta{
  position:relative;
  margin-top:11px;
  font-size:12.5px;letter-spacing:.03em;
  color:rgba(255,231,171,.85);
}

/* 团队业绩看板 */
.meta-box{
  display:inline-flex;align-items:center;
  max-width:100%;
  padding:9px 4px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,214,110,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.meta-item{padding:0 12px;text-align:center;min-width:0}
.meta-item b{
  display:block;
  font-size:21px;font-weight:900;line-height:1.15;
  color:var(--gold);
  text-shadow:0 2px 4px rgba(60,0,0,.55);
}
.meta-item em{
  display:block;margin-top:2px;
  font-style:normal;font-size:11px;
  color:rgba(255,255,255,.72);letter-spacing:.02em;
}
.meta-item.hi b{
  color:#fff3c4;
  text-shadow:0 0 14px rgba(255,200,60,.95), 0 2px 4px rgba(60,0,0,.6);
}
.meta-line{width:1px;height:28px;background:rgba(255,214,110,.3);flex:0 0 auto}

/* ================= 榜单 ================= */
.list{display:flex;flex-direction:column;gap:11px;margin-top:6px}

.loading,.empty{
  padding:48px 0;text-align:center;
  font-size:14px;color:rgba(255,255,255,.72);
}

.card{
  position:relative;
  display:flex;align-items:center;gap:13px;
  padding:13px 14px;
  border-radius:16px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%),
    linear-gradient(100deg, var(--card-a) 0%, #ab131b 55%, var(--card-b) 100%);
  border:1px solid rgba(255,214,110,.42);
  box-shadow:0 6px 16px rgba(40,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
  animation:cardIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* 前三名加强 */
.card.top1{
  border-color:rgba(255,236,170,.95);
  box-shadow:0 10px 26px rgba(30,0,0,.45), 0 0 22px rgba(255,190,60,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.card.top2{border-color:rgba(232,238,248,.8)}
.card.top3{border-color:rgba(238,175,120,.8)}

/* 角标 */
.ribbon{
  position:absolute;top:0;right:0;
  padding:3px 11px 4px 15px;
  font-size:11.5px;font-weight:900;letter-spacing:.04em;
  color:#6b1a00;
  border-radius:0 15px 0 13px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.ribbon.r1{background:linear-gradient(135deg,#fff5cc,#ffd24a 55%,#e8a412)}
.ribbon.r2{background:linear-gradient(135deg,#ffffff,#dfe6f0 55%,#b9c4d4)}
.ribbon.r3{background:linear-gradient(135deg,#ffe3c6,#e0a06a 55%,#c07b41)}

/* 头像 */
.avatar-box{position:relative;flex:0 0 auto;width:66px;height:66px}

.avatar{
  width:66px;height:66px;border-radius:50%;
  object-fit:cover;display:block;
  border:2px solid rgba(255,222,140,.9);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.25);
  background:#fff;
}
.avatar-text{
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}

/* 皇冠 */
.crown{
  position:absolute;top:-13px;right:-7px;
  width:26px;height:24px;
  transform:rotate(-16deg);
  pointer-events:none;
}
.crown svg{width:100%;height:100%;fill:currentColor}
.crown.c1{color:#ffcf3d;filter:drop-shadow(0 0 7px rgba(255,200,60,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.crown.c2{color:#e4e9f2;filter:drop-shadow(0 0 6px rgba(220,230,245,.85)) drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.crown.c3{color:#dd9a5f;filter:drop-shadow(0 0 6px rgba(220,150,90,.8)) drop-shadow(0 2px 2px rgba(0,0,0,.45))}

/* 第4名及以后：低调的排名序号 */
.rank-num{
  position:absolute;top:-5px;left:-6px;
  min-width:23px;height:23px;padding:0 5px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(76,6,10,.92);
  border:1px solid rgba(255,214,110,.34);
  color:rgba(255,231,171,.86);
  font-size:12px;font-weight:800;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  pointer-events:none;
}

/* 信息区 */
.info{flex:1 1 auto;min-width:0}

.name{
  font-size:18px;font-weight:800;letter-spacing:.02em;
  color:#fff;
  text-shadow:0 1px 3px rgba(60,0,0,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card.top1 .name{font-size:19px;color:#fff8dd}

/* 进度条 */
.progress{
  height:11px;margin:8px 0 7px;
  border-radius:999px;
  background:rgba(0,0,0,.44);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
  overflow:hidden;
}
.progress i{
  display:block;height:100%;width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#ffeaa7 0%,#ffcf4d 50%,#f5a623 100%);
  box-shadow:0 0 10px rgba(255,205,80,.8);
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}
.progress i.full{
  background:linear-gradient(90deg,#fff4c9,#ffd257 45%,#ff9d0a);
  box-shadow:0 0 14px rgba(255,180,40,1);
}

.stats{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:12.5px;letter-spacing:.02em;
}
.stats .done{color:var(--gold);font-weight:700}
.stats .done b{font-size:16px;font-weight:900;margin:0 2px}
.stats .target{color:rgba(255,255,255,.68)}

/* 完成 100% 流光 */
.card.finished .progress i::after{
  content:"";position:absolute;inset:0;
}

/* ================= 底部 ================= */
.foot{
  margin-top:22px;text-align:center;
  font-size:11.5px;letter-spacing:.08em;
  color:rgba(255,255,255,.4);
}

/* ================= 期次抽屉 ================= */
.sheet-mask{
  position:fixed;inset:0;z-index:20;
  background:rgba(30,0,0,.6);
  opacity:0;visibility:hidden;transition:.22s;
}
.sheet-mask.show{opacity:1;visibility:visible}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:21;
  max-width:480px;margin:0 auto;
  max-height:62vh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#8e0a11,#62030a);
  border-radius:18px 18px 0 0;
  border-top:1px solid rgba(255,214,110,.45);
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
  transform:translateY(102%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet.show{transform:none}

.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 10px;
  font-size:14px;font-weight:700;color:var(--gold);
  border-bottom:1px solid rgba(255,214,110,.2);
}
.sheet-close{
  border:0;background:none;color:rgba(255,255,255,.7);
  font-size:24px;line-height:1;cursor:pointer;padding:0 4px;
}
.sheet-body{overflow-y:auto;padding:8px 12px 16px;-webkit-overflow-scrolling:touch}

.sheet-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;margin:7px 0;
  border-radius:12px;
  background:linear-gradient(100deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border:1px solid rgba(255,214,110,.28);
  cursor:pointer;
}
.sheet-item:active{transform:scale(.99)}
.sheet-item.active{
  border-color:rgba(255,225,150,.95);
  box-shadow:0 0 14px rgba(255,190,60,.35) inset;
}
.sheet-item .t{font-size:14px;font-weight:700}
.sheet-item .d{font-size:11.5px;color:rgba(255,255,255,.65);margin-top:3px}
.sheet-item .tag{
  flex:0 0 auto;font-size:11px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(255,214,110,.5);color:var(--gold);
}
.sheet-item .tag.off{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.6)}

@media (max-width:380px){
  .hero-title{font-size:31px}
  .meta-item{padding:0 8px}
  .meta-item b{font-size:19px}
  .meta-item em{font-size:10.5px}
}