/* leaderboard.css —— 排行榜样式（选关页榜单条 + 两页共用的完整榜单弹窗）
 *
 * 单独一个文件、类名全部带 lb- / lbm- 前缀：这份样式要同时挂到 levels.html（levels.css）
 * 与 play.html（main.css）两套不同的页面样式里，自包含才不会互相干扰。
 *
 * 主题沿用点亮 Code 的深空底 + 紫青霓虹（#4338CA / #22D3EE / #F59E0B）。
 */

/* ================= 榜单条（选关页显眼位置） ================= */
/* 限宽居中：选关页正文宽 1320px，榜单条太宽时列会散开、眼睛要横扫一大片 */
.lb-strip{
  max-width:640px;margin:0 auto;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(165deg,#1A2246E6,#0B1020F2);
  border:1px solid #67E8F93D;
  box-shadow:0 16px 40px #00000066, inset 0 1px 0 #FFFFFF14, 0 0 0 1px #4338CA22;
  backdrop-filter:blur(12px);
}

.lb-strip-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 18px;
  background:linear-gradient(100deg,#4338CA33,#22D3EE1A 60%,#0000);
  border-bottom:1px solid #FFFFFF14;
}
.lb-strip-title{
  font-size:16px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(100deg,#FFFFFF,#C7D2FE 50%,#67E8F9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.lb-strip-tabs{display:flex;gap:6px}
.lb-strip-tab{
  font:12.5px/1.4 inherit;font-weight:600;color:#A9B7D0;cursor:pointer;
  padding:6px 14px;border-radius:100px;
  border:1px solid #FFFFFF1F;background:#FFFFFF0A;transition:.2s;
}
.lb-strip-tab:hover{background:#FFFFFF17;color:#E6ECFB}
.lb-strip-tab.on{
  color:#0B1020;border-color:#0000;
  background:linear-gradient(135deg,#67E8F9,#A5B4FC);
  box-shadow:0 4px 14px #22D3EE55;
}
.lb-strip-more{
  margin-left:auto;font:12.5px/1.4 inherit;font-weight:600;color:#A5B4FC;cursor:pointer;
  padding:6px 13px;border-radius:100px;white-space:nowrap;
  border:1px solid #818CF84D;background:#818CF81A;transition:.2s;
}
.lb-strip-more:hover{background:#818CF833;border-color:#818CF888;color:#E0E7FF}

.lb-strip-rule{
  padding:7px 18px;font-size:11.5px;color:#8A9AB5;
  background:#FFFFFF06;border-bottom:1px solid #FFFFFF0F;
}

.lb-strip-body{padding:6px 10px 10px}
.lb-strip-top{display:flex;flex-direction:column}

/* 条上的紧凑行：名次 / 姓名 / 星数 / 「N 行 · M 步」，一行看完前几名。
 * 条上刻意不放表格列头 —— 竖向空间要留给选关地图，完整表格在弹窗里。 */
.lb-srow{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;transition:background .18s;
}
.lb-srow:hover{background:#FFFFFF0A}
.lb-srow.me{
  background:linear-gradient(100deg,#22D3EE1F,#4338CA1A);
  box-shadow:inset 0 0 0 1px #22D3EE44;
}
.lb-srow-rank{flex:0 0 auto;display:flex}
.lb-srow-name{
  flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;color:#E8EEF9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.lb-srow-stars{flex:0 0 auto}
.lb-srow-meta{
  flex:0 0 auto;font-size:12.5px;color:#8A9AB5;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* 「我」掉出前三时补在下面，与上面几名用一条虚线隔开 */
.lb-strip-me{margin-top:6px;padding-top:6px;border-top:1px dashed #FFFFFF1A}
.lb-strip-n{
  padding:8px 10px 2px;font-size:12px;color:#7C8AA6;text-align:center;
}

/* ================= 榜单行（条与弹窗共用） ================= */
.lb-head,.lb-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 82px 104px 88px;
  align-items:center;gap:10px;
}
.lb-head{
  padding:8px 10px;font-size:11.5px;color:#7C8AA6;letter-spacing:.06em;
  border-bottom:1px solid #FFFFFF14;
}
.lb-row{
  padding:9px 10px;border-radius:12px;
  border-bottom:1px solid #FFFFFF0A;
  transition:background .18s;
}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:#FFFFFF0A}
/* 「我」那一行：整行发光，一眼能找到自己 */
.lb-row.me{
  background:linear-gradient(100deg,#22D3EE1F,#4338CA1A);
  box-shadow:inset 0 0 0 1px #22D3EE44;
}

.lb-c-rank{display:flex;justify-content:center}
.lb-rank{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#C3CCDD;background:#FFFFFF12;border:1px solid #FFFFFF1A;
}
/* 前三名：金银铜 */
.lb-rank.gold{
  color:#422006;border-color:#0000;
  background:linear-gradient(150deg,#FDE68A,#F59E0B);
  box-shadow:0 4px 14px #F59E0B66;
}
.lb-rank.silver{
  color:#1E293B;border-color:#0000;
  background:linear-gradient(150deg,#F1F5F9,#94A3B8);
  box-shadow:0 4px 14px #94A3B855;
}
.lb-rank.bronze{
  color:#431407;border-color:#0000;
  background:linear-gradient(150deg,#FDBA74,#C2410C);
  box-shadow:0 4px 14px #C2410C66;
}

.lb-c-name{
  font-size:14px;font-weight:600;color:#E8EEF9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.lb-me{
  flex:0 0 auto;font-size:10px;font-weight:700;color:#0B1020;
  background:linear-gradient(135deg,#67E8F9,#A5B4FC);
  border-radius:100px;padding:1px 8px;letter-spacing:.04em;
}

.lb-stars{font-size:13px;color:#FCD34D;white-space:nowrap}
.lb-stars b{font-variant-numeric:tabular-nums;font-size:15px}
.lb-c-lines,.lb-c-steps{
  font-size:13.5px;color:#C3CCDD;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lb-c-lines i,.lb-c-steps i{font-style:normal;font-size:11px;color:#7C8AA6}

.lb-msg{padding:22px 14px;text-align:center;font-size:13.5px;color:#93A3BD;line-height:1.7}
.lb-msg.bad{color:#FCA5A5}
.lb-sub{padding:9px 10px 3px;font-size:12px;color:#7C8AA6}
.lb-more{padding:10px;text-align:center;font-size:12px;color:#7C8AA6}

/* ================= 完整榜单弹窗 ================= */
/* z-index 600：要高过选关页的 #modal(100) 与闯关页的 .rmodal(500) */
.lbm{
  position:fixed;inset:0;z-index:600;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:#05060ECC;backdrop-filter:blur(5px);
}
.lbm.on{display:flex}
.lbm-box{
  width:100%;max-width:620px;max-height:86vh;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:18px;border:1px solid #FFFFFF1F;
  background:linear-gradient(165deg,#161D3D,#0B1020);
  box-shadow:0 30px 74px #000000aa, inset 0 1px 0 #FFFFFF14;
  animation:lbmIn .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lbmIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.lbm-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid #FFFFFF12;
  background:linear-gradient(100deg,#4338CA2E,#22D3EE14 60%,#0000);
}
.lbm-title{
  font-size:17px;font-weight:800;
  background:linear-gradient(100deg,#FFFFFF,#C7D2FE 50%,#67E8F9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.lbm-tabs{display:flex;gap:6px}
.lbm-tab{
  font:12.5px/1.4 inherit;font-weight:600;color:#A9B7D0;cursor:pointer;
  padding:6px 14px;border-radius:100px;
  border:1px solid #FFFFFF1F;background:#FFFFFF0A;transition:.2s;
}
.lbm-tab:hover{background:#FFFFFF17;color:#E6ECFB}
.lbm-tab.on{
  color:#0B1020;border-color:#0000;
  background:linear-gradient(135deg,#67E8F9,#A5B4FC);
  box-shadow:0 4px 14px #22D3EE55;
}
.lbm-close{
  margin-left:auto;width:32px;height:32px;flex:0 0 auto;cursor:pointer;
  font:15px/1 inherit;color:#A9B7D0;border-radius:9px;
  border:1px solid #FFFFFF1F;background:#FFFFFF0A;transition:.2s;
}
.lbm-close:hover{background:#F871711F;border-color:#F8717155;color:#FCA5A5}

.lbm-rule{
  padding:9px 18px;font-size:12px;color:#8A9AB5;line-height:1.6;
  background:#FFFFFF06;border-bottom:1px solid #FFFFFF0F;
}
.lbm-body{padding:10px 12px 16px;overflow-y:auto;flex:1;min-height:0}

/* ================= 响应式 ================= */
@media (max-width:760px){
  /* 窄屏：单位字藏起来、名次列收窄，把宽度让给姓名（否则中文名会被截） */
  .lb-head,.lb-row{grid-template-columns:34px minmax(0,1fr) 46px 56px 52px;gap:6px}
  .lb-c-lines i,.lb-c-steps i{display:none}
  .lb-head{font-size:10.5px;padding:8px 6px}
  .lb-row{padding:9px 6px}
  .lb-rank{width:24px;height:24px;font-size:12px;border-radius:7px}
  .lb-c-name{font-size:13px;gap:5px}
  .lb-c-lines,.lb-c-steps{font-size:12.5px}
  .lb-stars{font-size:12px}
  .lb-stars b{font-size:13.5px}
  .lb-strip-head{gap:8px;padding:11px 13px}
  .lb-strip-title{font-size:15px}
  .lb-strip-more{margin-left:0;width:100%;text-align:center}
  .lb-strip-rule{padding:7px 13px}
  .lb-srow{gap:8px;padding:9px 8px}
  .lb-srow-name{font-size:13.5px}
  .lb-srow-meta{font-size:12px}
  .lbm{padding:12px}
  .lbm-box{max-height:90vh}
  .lbm-body{padding:8px 8px 12px}
  .lbm-close{margin-left:0}
  .lbm-rule{padding:8px 13px}
}

@media (prefers-reduced-motion:reduce){
  .lbm-box{animation:none}
}