/* ===== 逐月揽月 · 中秋 2D 跑酷打怪记 ===== */
:root{
  --ink:#080b17;
  --panel:rgba(14,20,38,.92);
  --panel-2:rgba(22,30,54,.9);
  --gold:#f2cf8b;
  --gold-deep:#c99a4b;
  --jade:#9fd8c8;
  --cinnabar:#e0684f;
  --text:#eef3ff;
  --muted:#9aa6c4;
  --line:rgba(242,207,139,.28);
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #1b2340 0%, #0a0e1c 60%, #05070f 100%);
  color:var(--text);
  font-family:"Songti SC","STSong","Noto Serif SC","PingFang SC","Microsoft YaHei",serif;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;user-select:none;
}
#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:10px}
#stage{
  position:relative;width:min(100%,1180px);aspect-ratio:16/9;max-height:calc(100vh - 20px);
  border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(242,207,139,.16) inset;
  background:#070a14;
}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;pointer-events:none;font-size:14px}
.hud.hidden{display:none}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:12px 14px}
.hud-cell{display:flex;align-items:center;gap:8px}
.hud-left{background:linear-gradient(180deg,rgba(8,11,23,.78),rgba(8,11,23,.42));border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 6px;backdrop-filter:blur(6px)}
.moon-chip{width:30px;height:30px;display:block;border-radius:50%;box-shadow:0 0 14px rgba(242,207,139,.35)}
.hud-title{font-size:16px;letter-spacing:2px;color:var(--gold);line-height:1.1}
.hud-stars{font-size:11px;color:var(--gold-deep);letter-spacing:2px}
.hud-progress{flex:1;min-width:80px;flex-direction:column;align-items:stretch;gap:3px}
.pbar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--line);overflow:visible}
.pbar i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#7fb8ff,var(--gold));box-shadow:0 0 12px rgba(242,207,139,.5);transition:width .12s linear}
.pbar b{position:absolute;top:-5px;left:0;width:12px;height:20px;margin-left:-6px;border-radius:3px;background:var(--gold);box-shadow:0 0 10px rgba(242,207,139,.8)}
.ptext{font-size:11px;color:var(--muted);text-align:right;letter-spacing:1px}
.hud-right{margin-left:auto}
.icon-btn{pointer-events:auto;cursor:pointer;width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:rgba(8,11,23,.7);display:grid;place-items:center;transition:.18s}
.icon-btn svg{width:18px;height:18px;fill:var(--gold)}
.icon-btn:hover{background:rgba(242,207,139,.16);transform:translateY(-1px)}

.hud-boss{position:absolute;top:62px;left:50%;transform:translateX(-50%);width:min(62%,560px);text-align:center}
.hud-boss.hidden{display:none}
.boss-name{font-size:14px;letter-spacing:6px;color:#ffd9d0;text-shadow:0 0 12px rgba(224,104,79,.8);margin-bottom:4px}
.boss-bar{height:12px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(224,104,79,.5);overflow:hidden}
.boss-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8b2f2f,#e0684f,#ffb37f);transition:width .2s}

.hud-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:16px;padding:12px 16px}
.hud-label{font-size:10px;color:var(--muted);letter-spacing:2px;margin-bottom:3px}
.hearts{display:flex;gap:5px}
.hearts svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(242,207,139,.4))}
.ebar{width:110px;height:9px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--line);overflow:hidden}
.ebar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#9fd8c8,#7fb8ff)}
.ebar.full i{background:linear-gradient(90deg,var(--gold),#fff3d4)}
.items{display:flex;gap:6px}
.item-empty{color:rgba(255,255,255,.25)}
.item-pill{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:rgba(8,11,23,.7);animation:pop .25s ease}
.item-pill svg{width:14px;height:14px}
.hud-kills{margin-left:auto;text-align:right}
.kills{font-size:18px;color:var(--gold);letter-spacing:1px}
.hud-tip{position:absolute;left:50%;top:32%;transform:translateX(-50%);font-size:18px;letter-spacing:3px;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.8);opacity:0;transition:opacity .3s;white-space:nowrap}
.hud-tip.show{opacity:1}

/* ---------- 触屏按键 ---------- */
.touch{position:absolute;inset:0;pointer-events:none}
.touch.hidden{display:none}
.tpad{position:absolute;bottom:16px;display:flex;gap:10px;pointer-events:auto}
.tleft{left:16px}
.tright{right:16px;align-items:flex-end}
.tbtn{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--line);
  background:rgba(10,14,28,.55);color:var(--gold);font-size:16px;font-family:inherit;
  backdrop-filter:blur(4px);
}
.tbtn:active{background:rgba(242,207,139,.28)}
.tbtn-main{width:66px;height:66px;font-size:19px;border-color:rgba(242,207,139,.6)}
.tbtn-jump{width:62px;height:62px}

/* ---------- 覆盖层 ---------- */
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:18px;overflow:auto}
.overlay.show{display:flex}
.overlay::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 600px at 50% 40%, rgba(20,28,54,.86), rgba(4,6,14,.95));backdrop-filter:blur(7px)}
.screen{position:relative;width:100%;max-width:860px;animation:rise .28s cubic-bezier(.2,.8,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

.title{text-align:center;margin-bottom:14px}
.title h1{
  margin:0;font-size:clamp(26px,4.4vw,46px);letter-spacing:8px;
  background:linear-gradient(180deg,#fff6df,var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(242,207,139,.25);
}
.title p{margin:6px 0 0;color:var(--muted);letter-spacing:3px;font-size:13px}
.badge-row{display:flex;justify-content:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.badge{font-size:11px;letter-spacing:2px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:var(--gold);background:rgba(242,207,139,.08)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.panel + .panel{margin-top:12px}
.panel h3{margin:0 0 10px;font-size:15px;letter-spacing:4px;color:var(--gold);font-weight:normal}
.panel p{margin:0 0 10px;color:#cdd7f0;font-size:13px;line-height:1.9}
.muted{color:var(--muted);font-size:12px;line-height:1.8}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.btn{
  cursor:pointer;border-radius:12px;padding:11px 22px;font-size:15px;letter-spacing:3px;
  border:1px solid var(--line);background:rgba(242,207,139,.08);color:var(--gold);
  font-family:inherit;transition:.18s;
}
.btn:hover{background:rgba(242,207,139,.2);transform:translateY(-2px)}
.btn.primary{background:linear-gradient(180deg,rgba(242,207,139,.95),rgba(201,154,75,.9));color:#2a1c05;border-color:transparent;font-weight:bold}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* 关卡选择 */
.phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.phase-card{
  position:relative;cursor:pointer;border-radius:14px;padding:10px 8px;text-align:center;
  border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.2s;overflow:hidden;
}
.phase-card:hover{transform:translateY(-3px);background:rgba(242,207,139,.12)}
.phase-card.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.5)}
.phase-card.locked:hover{transform:none;background:rgba(255,255,255,.04)}
.phase-card.current{box-shadow:0 0 0 2px var(--gold) inset,0 0 24px rgba(242,207,139,.25)}
.pc-moon{width:46px;height:46px;margin:0 auto 6px;border-radius:50%;display:block}
.pc-name{font-size:13px;letter-spacing:1px;color:var(--gold)}
.pc-star{font-size:10px;color:var(--gold-deep);letter-spacing:1px;margin-top:2px}
.pc-seal{position:absolute;top:6px;right:6px;font-size:9px;color:#2a1c05;background:var(--gold);border-radius:999px;padding:2px 6px}
.pc-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:rgba(255,255,255,.5)}

/* 设置项 */
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt{
  cursor:pointer;border-radius:12px;padding:9px 14px;font-size:13px;border:1px solid var(--line);
  background:transparent;color:#cdd7f0;font-family:inherit;letter-spacing:1px;transition:.15s;
}
.opt small{display:block;color:var(--muted);font-size:10px;letter-spacing:0;margin-top:2px}
.opt.active{background:rgba(242,207,139,.18);color:var(--gold);border-color:var(--gold)}

/* 关卡说明卡 */
.brief{display:flex;gap:16px;align-items:center}
.brief .bmoon{width:96px;height:96px;flex:none}
.brief .btxt{flex:1}
.brief h2{margin:0 0 4px;font-size:22px;letter-spacing:4px;color:var(--gold);font-weight:normal}
.brief .sub{color:var(--jade);font-size:12px;letter-spacing:2px;margin-bottom:6px}
.goal-list{margin:8px 0 0;padding-left:18px;color:#cdd7f0;font-size:13px;line-height:1.9}
.goal-list li::marker{color:var(--gold)}

/* 结算 */
.result-stars{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}
.stat{text-align:center;min-width:78px}
.stat b{display:block;font-size:22px;color:var(--gold)}
.stat span{font-size:11px;color:var(--muted);letter-spacing:2px}
.seal-art{width:120px;height:120px;margin:6px auto 0;display:block;animation:sealIn .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes sealIn{from{transform:scale(.3) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}

/* 海报 */
.poster{position:relative;border-radius:18px;padding:22px;text-align:center;overflow:hidden;
  background:radial-gradient(400px 260px at 50% 20%, rgba(242,207,139,.22), transparent 70%), linear-gradient(180deg,#141d3c,#0a0e1c);
  border:1px solid var(--gold)}
.poster h2{margin:0;font-size:clamp(22px,3.6vw,34px);letter-spacing:10px;color:#fff6df}
.medal{width:130px;height:130px;margin:10px auto;display:block}

.bless-input{
  width:100%;margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--text);font-size:15px;font-family:inherit;letter-spacing:2px;text-align:center;
}
.bless-input::placeholder{color:rgba(255,255,255,.3)}

.kv{display:flex;justify-content:space-between;font-size:13px;color:#cdd7f0;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.kv:last-child{border-bottom:none}
.kv b{color:var(--gold);font-weight:normal}

.scroll{max-height:min(72vh,560px);overflow:auto;padding-right:4px}
.scroll::-webkit-scrollbar{width:6px}
.scroll::-webkit-scrollbar-thumb{background:rgba(242,207,139,.3);border-radius:99px}

.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reward{border-radius:14px;border:1px solid var(--line);padding:12px;text-align:center;background:rgba(255,255,255,.04)}
.reward.done{border-color:var(--gold);background:rgba(242,207,139,.12)}
.reward svg{width:44px;height:44px;margin-bottom:4px}
.reward .rn{font-size:13px;color:var(--gold);letter-spacing:1px}
.reward .rd{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.6}

@media (max-width:720px){
  .phase-grid{grid-template-columns:repeat(2,1fr)}
  .reward-grid{grid-template-columns:1fr}
  .hud{font-size:12px}
  .brief{flex-direction:column;text-align:center}
}
.rotate-tip{display:none}
@media (max-height:460px){
  .rotate-tip{display:block;position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}
}
body.zen .hud-top,body.zen .hud-bottom{opacity:.55}