/* levels.css —— 选关地图页样式（游戏化关卡选择） */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:#E8EEF9;overflow-x:hidden;
  font:15px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:#05060E;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ================= 背景 ================= */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg-img{
  position:absolute;inset:0;
  background:url('../assets-welcome/levels-bg.jpg') center center / cover no-repeat;
  animation:drift 70s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:scale(1.05) translate3d(-1%,0,0)}
  to  {transform:scale(1.11) translate3d(1%,-1%,0)}
}
.bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, #05060E22 0%, #05060Ebb 70%, #05060Eee 100%),
    linear-gradient(180deg,#05060Ecc 0%,#05060E33 26%,#05060EAA 78%,#05060E 100%);
}
#stars{position:absolute;inset:0;width:100%;height:100%}
.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.42;pointer-events:none}
.g1{width:44vw;height:44vw;left:-12vw;top:-8vw;background:#4338CA77;animation:f1 24s ease-in-out infinite}
.g2{width:40vw;height:40vw;right:-12vw;bottom:-10vw;background:#0E749066;animation:f2 28s ease-in-out infinite}
@keyframes f1{50%{transform:translate3d(5vw,4vh,0) scale(1.1)}}
@keyframes f2{50%{transform:translate3d(-5vw,-4vh,0) scale(1.1)}}

/* ================= 顶栏 ================= */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:18px;
  padding:14px 24px;
  background:linear-gradient(180deg,#05060Eee,#05060Ebb);
  backdrop-filter:blur(12px);border-bottom:1px solid #FFFFFF14;
}
.back{
  font-size:13px;color:#A5B4FC;padding:6px 12px;border-radius:9px;
  border:1px solid #818CF833;background:#FFFFFF0A;transition:.2s;white-space:nowrap;
}
.back:hover{background:#818CF81F;border-color:#818CF866;color:#E0E7FF}
.brand{
  font-size:16px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(100deg,#FFFFFF,#A5B4FC 45%,#67E8F9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.spacer{flex:1}

.progress-box{display:flex;align-items:center;gap:14px}
.pg-num{font-size:13px;color:#9BABC7;white-space:nowrap}
.pg-num b{font-size:19px;font-weight:700;color:#F1F5FF;font-variant-numeric:tabular-nums}
.pg-bar{width:150px;height:7px;border-radius:5px;background:#FFFFFF1A;overflow:hidden}
.pg-bar>i{
  display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#4338CA,#22D3EE);
  box-shadow:0 0 12px #22D3EE88;transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.pg-stars{font-size:12.5px;color:#FCD34D;white-space:nowrap}
.pg-stars b{font-variant-numeric:tabular-nums}
.userbox{font-size:12.5px;color:#8A9AB5;white-space:nowrap}
.userbox a{color:#818CF8;border-bottom:1px solid #818CF866}

/* ================= 地图主体 ================= */
.mapwrap{position:relative;z-index:1;padding:34px 24px 70px;max-width:1320px;margin:0 auto}
.map-head{text-align:center;margin-bottom:26px}
.map-head h1{
  margin:0;font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:.01em;
  background:linear-gradient(100deg,#FFFFFF 0%,#C7D2FE 34%,#67E8F9 68%,#FFFFFF 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px #4338CA88);
  animation:sheen 8s linear infinite;
}
@keyframes sheen{to{background-position:200% 0}}
.map-sub{margin:8px 0 0;font-size:13.5px;color:#93A3BD}

/* 地图标题下的动作区（目前只有「重置本机进度」，仅未登录时出现） */
.map-actions{display:flex;justify-content:center;margin-top:14px}
.map-actions:empty{display:none}

/* 排行榜容器：比地图更靠上，拉开与标题、地图的间距 */
.lb-slot{margin:26px 0 6px}
.btn-reset{
  font:13px/1.4 inherit;color:#C3CCDD;cursor:pointer;
  padding:7px 15px;border-radius:100px;
  border:1px solid #FFFFFF1F;background:#FFFFFF0A;
  backdrop-filter:blur(6px);transition:.2s;
}
.btn-reset:hover{background:#F871711F;border-color:#F8717155;color:#FCA5A5}
.btn-reset:active{transform:translateY(1px)}
.btn-reset:disabled{opacity:.6;cursor:default;transform:none}

/* 阶段分组标题 */
.stage-sep{
  display:flex;align-items:center;gap:14px;margin:34px 0 18px;
}
.stage-sep::before,.stage-sep::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,#0000,#818CF844,#0000);
}
.stage-sep span{
  font-size:13px;font-weight:600;letter-spacing:.16em;color:#A5B4FC;
  background:#818CF81A;border:1px solid #818CF833;border-radius:100px;padding:5px 16px;
  backdrop-filter:blur(6px);
}

/* 关卡节点网格 */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  gap:16px;
}

.node{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:16px 10px 14px;border-radius:16px;cursor:pointer;
  background:linear-gradient(165deg,#151C3Acc,#0B1020dd);
  border:1px solid #FFFFFF1A;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px #00000055, inset 0 1px 0 #FFFFFF12;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s;
  animation:pop .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.node:hover{transform:translateY(-6px) scale(1.03);border-color:#67E8F966;
  box-shadow:0 20px 44px #00000088, 0 0 0 1px #67E8F933, inset 0 1px 0 #FFFFFF22}
.node:active{transform:translateY(-2px) scale(1.0)}

/* 状态样式 */
.node.locked{
  cursor:not-allowed;opacity:.55;filter:grayscale(.7);
  border-color:#FFFFFF0F;background:linear-gradient(165deg,#10152Acc,#080B16dd);
}
.node.locked:hover{transform:none;border-color:#FFFFFF0F;box-shadow:0 10px 26px #00000055}

/* 序号圆盘 */
.disc{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#312E81,#1E1B4B);color:#C7D2FE;
  border:2px solid #818CF855;box-shadow:0 0 0 4px #4338CA1F, 0 6px 16px #00000066;
  transition:.28s;
}
.node:hover .disc{box-shadow:0 0 0 6px #67E8F92E, 0 0 22px #22D3EE66, 0 6px 16px #00000066}
.node.locked .disc{background:linear-gradient(160deg,#1F2937,#111827);color:#6B7280;border-color:#4B556344}

/* 通关态：金色 */
.node.cleared .disc{
  background:linear-gradient(160deg,#B45309,#78350F);color:#FDE68A;border-color:#FBBF2455;
  box-shadow:0 0 0 4px #F59E0B22, 0 0 18px #F59E0B44;
}
/* 当前推荐关（前沿）：呼吸光环 */
.node.frontier{border-color:#22D3EE88}
.node.frontier .disc{
  background:linear-gradient(160deg,#0E7490,#155E75);color:#CFFAFE;border-color:#22D3EEAA;
  animation:halo 2.1s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{box-shadow:0 0 0 4px #22D3EE33, 0 0 18px #22D3EE88}
  50%    {box-shadow:0 0 0 10px #22D3EE11, 0 0 30px #22D3EEcc}
}
.node.frontier::after{
  content:"从这里开始";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:10px;white-space:nowrap;color:#0B1020;background:#22D3EE;
  border-radius:100px;padding:2px 9px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 3px 10px #22D3EE66;
}

.node-label{font-size:12px;color:#B7C3D8;margin-top:9px;font-weight:600;letter-spacing:.02em}
.node-stage{font-size:10px;color:#6B7280;margin-top:2px;font-family:ui-monospace,Consolas,monospace}
.node-stars{margin-top:7px;font-size:12px;letter-spacing:1.5px;height:15px}
.node-stars .on{color:#F59E0B;text-shadow:0 0 8px #F59E0B66}
.node-stars .off{color:#3A4356}
.node-lock{margin-top:7px;font-size:11px;color:#6B7280;height:15px}

/* ================= 弹窗 ================= */
.modal{position:fixed;inset:0;background:#05060ECC;display:none;align-items:center;
  justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(4px)}
.modal.on{display:flex}
.modalbox{
  background:linear-gradient(165deg,#161D3D,#0B1020);
  border:1px solid #FFFFFF1F;border-radius:18px;
  min-width:400px;max-width:520px;width:100%;max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 26px 70px #000000aa, inset 0 1px 0 #FFFFFF14;
  animation:modalIn .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modalhead{padding:17px 22px;font-size:16px;font-weight:700;color:#F1F5FF;
  border-bottom:1px solid #FFFFFF12}
.modalbody{padding:20px 22px;overflow-y:auto;flex:1;color:#C3CCDD;font-size:14px;line-height:1.75}
.modalbody .lock-art{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:14px;
  opacity:.9;border:1px solid #FFFFFF14}
.modalfoot{padding:14px 22px;border-top:1px solid #FFFFFF12;display:flex;gap:10px;justify-content:flex-end}
.mbtn{font:14px/1.4 inherit;padding:9px 18px;border-radius:10px;cursor:pointer;font-weight:600;
  border:1px solid #FFFFFF1F;background:#FFFFFF0F;color:#D5DDEE;transition:.2s}
.mbtn:hover{background:#FFFFFF1A}
.mbtn.primary{background:linear-gradient(135deg,#4338CA,#7C3AED);border-color:#818CF866;color:#fff}
.mbtn.primary:hover{filter:brightness(1.12)}

/* ================= 轻提示（重置进度后的反馈） ================= */
.toast{
  position:fixed;left:50%;bottom:38px;transform:translate(-50%,14px);
  z-index:120;pointer-events:none;
  padding:13px 22px;border-radius:13px;font-size:14px;color:#DCFCE7;
  background:linear-gradient(165deg,#0F2A22ee,#0B1020ee);
  border:1px solid #34D39944;
  box-shadow:0 18px 42px #000000aa, 0 0 0 1px #34D39922;
  backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ================= 响应式 ================= */
@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .progress-box{width:100%;justify-content:space-between}
  .pg-bar{flex:1;width:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:12px}
  .node{padding:13px 8px 11px}
  .disc{width:46px;height:46px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .bg-img,.glow,.map-head h1,.node,.node.frontier .disc{animation:none!important}
  .modalbox{animation:none}
}