/* HUD / 层数横幅 / 提示 / 装备槽 / Buff
   拆分自 index.html（原第 69~282 行）· 修改后请勿跨文件重复定义同名选择器 */
/* ============================================================
   HUD
   ============================================================ */
#hud{
  position:absolute; inset:0; pointer-events:none; z-index:10;
  display:flex; flex-direction:column; justify-content:space-between; padding:12px;
  opacity:1; transition:opacity .4s ease;
}
#hud.off{ opacity:0; pointer-events:none; }
#hud.off *{ pointer-events:none !important; }
.hud-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hud-left{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; }

.panel{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--sh1), inset 0 1px 0 rgba(255,255,255,.05);
}

/* —— 玩家面板 —— */
.player-panel{
  min-width:238px; padding:9px 11px 10px;
  display:flex; flex-direction:column; gap:8px;
  transition:border-color .25s;
}
.player-panel.low{ border-color:rgba(255,92,82,.42); box-shadow:var(--sh1), 0 0 22px rgba(255,60,50,.16); }
.pp-head{ display:flex; align-items:center; gap:9px; }
.pp-badge{
  width:34px; height:34px; flex:none; border-radius:10px; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02));
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.4);
}
.pp-hp{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.hp-bar{
  position:relative; height:10px; border-radius:6px; overflow:hidden;
  background:#06090e; border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.bar-ghost{
  position:absolute; inset:0; width:100%; border-radius:5px;
  background:rgba(255,255,255,.26);
  transition:width .6s cubic-bezier(.3,.9,.3,1);
}
.bar-fill{
  position:absolute; inset:0; width:100%; border-radius:5px;
  background:linear-gradient(180deg,#ff8a80, var(--blood) 52%, var(--blood2));
  box-shadow:0 0 10px rgba(255,92,82,.55), inset 0 1px 0 rgba(255,255,255,.32);
  transition:width .16s ease-out;
}
.player-panel.low .bar-fill{ animation:hpPulse 1s ease-in-out infinite; }
@keyframes hpPulse{ 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.6);} }
.pp-hprow{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.pp-name{ font-size:11px; font-weight:800; color:var(--text2); letter-spacing:1.6px; }
#hpText{ font-size:11px; color:var(--muted); font-weight:700; font-family:var(--font-num); }

/* —— 数值芯片 —— */
.pp-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border-radius:7px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06);
  font-size:11px; font-weight:800; line-height:1.55;
}
.chip .k{ color:var(--dim); font-weight:600; font-size:10px; letter-spacing:.4px; }
.chip .v{ font-family:var(--font-num); }
.chip .v.bump{ animation:numBump .3s ease-out; }
@keyframes numBump{
  0%{ transform:translateY(-1px) scale(1.3); filter:brightness(1.7); }
  100%{ transform:none; filter:none; }
}
#cDepth .v{ color:var(--azure); }
#cGold .v{ color:var(--gold); }
#cKill .v{ color:var(--ember); }
/* 魂晶：Boss 专属货币，攒够一次祭坛消费（8）时点亮，提示"可以花了" */
#cCrystal .v{ color:#7fd8ff; }
#cCrystal.hot{
  background:linear-gradient(180deg,rgba(127,216,255,.18),rgba(127,216,255,.06));
  border-color:rgba(127,216,255,.45);
  box-shadow:0 0 0 1px rgba(127,216,255,.18), 0 0 14px rgba(127,216,255,.22);
}
#cCrystal.hot .v{ color:#c9f0ff; }
#cSkill .v{ font-size:10px; }
#cSkillQ .v{ font-size:10px; }
#cSkillQ .k{ color:#5fd6b4; }

/* —— Boss 血条（Boss 层专属 · 顶部居中三段式，参考原神） ——
   定位策略：左右都不许压到 HUD —— 左让左上角玩家面板（约 390px），右让按钮组（96px），
   在剩下的空间里用 margin:auto 居中，并封顶 620px。
   这样 1280 宽下血条是"居中的一条"，窄屏则自动变窄而不是被面板盖住；
   ≤820px 再整体改成"面板下方一整条"，见文件末尾的媒体查询。 */
.boss-bar{
  position:absolute; top:10px; left:392px; right:96px;
  max-width:620px; margin:0 auto; z-index:7;
  padding:10px 18px 11px; border-radius:14px;
  background:linear-gradient(180deg,rgba(16,22,32,.93),rgba(7,10,16,.96));
  border:1px solid var(--line2);
  box-shadow:var(--sh3), inset 0 1px 0 rgba(255,255,255,.06);
  --boss-ac:#8aa0b8;
  pointer-events:none;
  transition:opacity .3s ease;
}
.boss-bar.hide{ display:none; }
.bb-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.bb-name{
  font-size:15px; font-weight:900; letter-spacing:1.2px; color:#fff;
  text-shadow:0 0 18px var(--boss-ac), 0 2px 6px rgba(0,0,0,.9);
}
.bb-title{ font-size:10.5px; font-weight:700; color:var(--boss-ac); letter-spacing:1.4px; opacity:.92; }
.bb-phase{
  margin-left:auto; font-size:10.5px; font-weight:800; color:var(--dim);
  letter-spacing:.8px; font-family:var(--font-num);
}
/* 3 个段位指示：必须"不看数字也能数出还剩几条命"。
   为什么这么重：1080 宽截图里原来的 height:4px + alpha .10 完全读不出来（评审否决项）。
     · 段高 8px、段间 gap 8px —— 缩略图上仍然是可数的实心块
     · now  ：主题色填充 + 外发光 + 左端 3px 亮竖条（"当前位置"锚点）
     · done ：纯黑底 + opacity .4 + 一道 2px 亮斜划痕（= 已打空，划掉）
     · 其他 ：rgba(255,255,255,.13)（未到达）
   done 那一段还会播一次 .25s 的"啪一下变暗"（bbSegSnap），阶段切换才有反馈 */
.bb-segs{ display:flex; gap:8px; margin-bottom:7px; }
.bb-segs i{
  position:relative; flex:1; height:8px; border-radius:3px;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.45);
  transition:background .2s, box-shadow .2s, opacity .2s;
}
/* 当前段：整条主题色 + 发光；左端竖条高出本体 2px，作为"读到第几段"的锚点 */
.bb-segs i.now{
  opacity:1;
  background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, var(--boss-ac) 26%, var(--boss-ac) 100%);
  box-shadow:0 0 12px var(--boss-ac), 0 0 3px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
.bb-segs i.now::before{
  content:''; position:absolute; left:0; top:-2px; bottom:-2px; width:3px;
  border-radius:2px; background:#fff;
  box-shadow:0 0 7px #fff, 0 0 13px var(--boss-ac);
}
/* 已打空：压到几乎看不见，再用一道斜划痕明确"这一段没了"
   评审复查：opacity .55 + rgba(255,255,255,.04) 和"未到达"的 13% 白
   在 1080 宽截图里几乎同色，数不出"哪一段丢了"。所以：
     · 底槽直接压成纯黑（rgba(0,0,0,.55) × .4 ≈ 0.02）——比 13% 白明显更暗
     · opacity 再降到 .4
     · 斜划痕加粗到 2px 并把颜色提回 rgba(255,255,255,.55)（2px 才在缩略图上留下实线）
   这样三态是三种完全不同的形状语言：暗槽+划痕 / 实心高亮 / 实心灰块 */
.bb-segs i.done{
  background:rgba(0,0,0,.55);
  opacity:.4;
  /* 空槽的框必须比"未到达"的灰块更亮才数得出来：1.5px × rgba(.8) × opacity .4 ≈ 0.32 实线 */
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.80);
  animation:bbSegSnap .25s ease-out;
}
.bb-segs i.done::after{
  content:''; position:absolute; left:-4%; right:-4%; top:50%; height:2px;
  margin-top:-1px; border-radius:1px;
  background:rgba(255,255,255,.55);
  transform:skewX(-30deg);
}
/* 阶段切换：刚变 done 的那一段从亮白"啪"地暗下去（0.25s，一次性） */
@keyframes bbSegSnap{
  0%{ opacity:1; filter:brightness(2.6) saturate(.2); transform:scaleY(1.5); }
  55%{ opacity:.66; filter:brightness(1.15); transform:scaleY(.9); }
  100%{ opacity:.4; filter:none; transform:none; }
}
.bb-track{
  position:relative; height:12px; border-radius:7px; overflow:hidden;
  background:#05080d; border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75), 0 0 18px -4px var(--boss-ac);
}
.bb-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg, var(--boss-ac), #fff 92%);
  box-shadow:0 0 14px var(--boss-ac), inset 0 1px 0 rgba(255,255,255,.45);
  transition:width .12s linear;
}
/* 阶段切换的"碎裂 → 回满"：血条先被压扁闪白再弹回（纯 CSS，不用图片） */
.boss-bar.shift .bb-track{ animation:bbCrack .55s ease-out; }
@keyframes bbCrack{
  0%{ filter:brightness(2.6) saturate(.25); transform:scaleY(.42) scaleX(1.03); }
  38%{ filter:brightness(1.7); transform:scaleY(1.18); }
  100%{ filter:none; transform:none; }
}
@media (max-width:820px){
  /* 窄屏：玩家面板会占满左上角（约 370×160），血条直接铺在它下方一整条，
     top 取 168px 保证任何宽度下都不会被面板压住（面板高度随 chips 换行变化，留足余量） */
  .boss-bar{
    left:8px; right:8px; top:168px; transform:none;
    max-width:none; margin:0;
    width:auto; min-width:0; padding:6px 10px 7px; border-radius:10px;
  }
  .bb-name{ font-size:12.5px; letter-spacing:.8px; }
  .bb-title{ display:none; }
  .bb-head{ margin-bottom:4px; }
  .bb-segs{ margin-bottom:5px; gap:5px; }
  /* 窄屏也不许把段位指示压扁：8→7px 仍然能数出"1 空 1 亮 1 未到" */
  .bb-segs i{ height:7px; border-radius:2.5px; }
  .bb-segs i.now::before{ top:-1.5px; bottom:-1.5px; width:2.5px; }
  .bb-track{ height:9px; border-radius:5px; }
}

/* —— 装备槽 —— */
.pp-gear{ display:flex; align-items:center; gap:8px; }
.gear{ display:flex; gap:5px; }
.gear-slot{
  width:38px; height:38px; border-radius:9px; font-size:16px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.35);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.gear-slot .lv{
  position:absolute; bottom:-4px; right:-4px; font-size:9px; font-weight:800;
  font-family:var(--font-num); background:var(--azure2); color:#fff;
  border-radius:6px; padding:1px 4px; box-shadow:0 1px 4px rgba(0,0,0,.65);
}
.gear-slot.empty{ opacity:.32; }
.gear-label{ font-size:9px; color:var(--dim); letter-spacing:2px; }

/* —— 主题徽标（M3） —— */
.theme-chip{
  display:flex; align-items:center; gap:6px; margin-top:7px; padding:4px 8px;
  border-radius:8px; font-size:10px; font-weight:700; letter-spacing:.4px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  color:var(--text2); white-space:nowrap; overflow:hidden;
}
.theme-chip .ti{ font-size:12px; }
.theme-chip .tn{ font-weight:900; }
.theme-chip .th{ color:var(--dim); font-weight:600; font-size:9px; }
.theme-chip::before{
  content:''; width:4px; height:14px; border-radius:2px; background:var(--theme-ac, #6ea8fe);
  box-shadow:0 0 8px var(--theme-ac, #6ea8fe); flex:0 0 auto;
}
/* 套装：两件套起，槽位描边点亮 */
.gear-slot.set-on{
  border-color:var(--set-ac,#f0b429);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px var(--set-ac,#f0b429), 0 0 12px -2px var(--set-ac,#f0b429);
}
.set-tag{
  display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800;
  padding:1px 5px; border-radius:5px; letter-spacing:.3px;
  background:rgba(255,255,255,.06); border:1px solid currentColor;
}
.set-card{
  border-radius:10px; padding:9px 11px; margin-bottom:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line2); border-left:3px solid currentColor;
}
.set-card .sc-head{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:900; }
.set-card .sc-cnt{ margin-left:auto; font-family:var(--font-num); font-size:11px; color:var(--text2); }
.set-card .sc-row{ display:flex; gap:6px; align-items:flex-start; margin-top:6px; font-size:11px; }
.set-card .sc-lvl{ font-family:var(--font-num); font-weight:900; font-size:10px; padding:0 4px; border-radius:4px; }
.set-card .sc-on{ color:var(--text); }
.set-card .sc-off{ color:var(--dim); }
.set-card .sc-lvl.on{ background:rgba(255,255,255,.14); color:#fff; }
.set-card .sc-lvl.off{ background:rgba(255,255,255,.05); color:var(--dim); }

/* —— Buff / Debuff —— */
#buffBar{ display:flex; gap:5px; flex-wrap:wrap; max-width:290px; }
.buff-icon{
  position:relative; display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px 4px; border-radius:8px; overflow:hidden;
  font-size:11px; font-weight:800; border:1px solid;
  box-shadow:0 2px 8px rgba(0,0,0,.42);
  animation:buffIn .22s cubic-bezier(.2,1.5,.4,1);
}
.buff-icon .p{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  transition:width .2s linear; opacity:.95;
}
.buff-icon.buff{ color:#8ef0ac; border-color:rgba(140,240,172,.45); background:rgba(18,56,38,.66); }
.buff-icon.buff .p{ background:#8ef0ac; }
.buff-icon.debuff{ color:#ff8d84; border-color:rgba(255,141,132,.45); background:rgba(62,20,20,.66); }
.buff-icon.debuff .p{ background:#ff8d84; }
.buff-icon .t{ font-size:10px; opacity:.82; font-family:var(--font-num); font-weight:700; }
@keyframes buffIn{ from{ transform:translateY(-5px) scale(.86); opacity:0; } to{ transform:none; opacity:1; } }

/* —— 右上按钮 —— */
.hud-right{ display:flex; gap:7px; pointer-events:auto; }
.icon-btn{
  width:38px; height:38px; border-radius:11px; font-size:16px; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh1);
  transition:transform .12s, filter .18s, border-color .18s, color .18s;
}
.icon-btn:hover{ filter:brightness(1.25); border-color:var(--line3); color:#fff; }
.icon-btn:active{ transform:scale(.9); }
.icon-btn.hide{ display:none; }
/* 带文字的窄按钮（脱离卡死） */
.icon-btn.txt{
  width:auto; padding:0 10px; font-size:11.5px; letter-spacing:.6px;
  font-weight:600; color:var(--text2);
}
.icon-btn.txt:active{ transform:scale(.94); }

/* ============================================================
   层数横幅 / 提示
   ============================================================ */
#floorBanner{
  position:absolute; top:36%; left:50%; z-index:8;
  transform:translate(-50%,-50%) scale(.94);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; opacity:0;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.25);
}
#floorBanner.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
#floorBanner .fb-main{
  display:flex; align-items:center; gap:16px;
  font-size:clamp(24px,4.4vw,36px); font-weight:900; letter-spacing:7px;
  color:var(--gold);
  text-shadow:0 0 30px rgba(245,196,81,.55), 0 3px 12px rgba(0,0,0,.9);
}
#floorBanner .fb-main::before, #floorBanner .fb-main::after{
  content:""; width:clamp(22px,6vw,58px); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold2));
}
#floorBanner .fb-main::after{ background:linear-gradient(270deg,transparent,var(--gold2)); }
#floorBanner .fb-sub{
  font-size:11.5px; letter-spacing:2px; color:var(--text2); font-weight:700;
  background:rgba(6,10,15,.66); border:1px solid var(--line);
  border-radius:20px; padding:3px 13px;
}

#tip{
  position:absolute; bottom:16px; left:50%; z-index:8;
  transform:translate(-50%,7px);
  font-size:12.5px; color:var(--text2); white-space:nowrap;
  background:rgba(8,12,18,.96); border:1px solid var(--line);
  border-radius:10px; padding:7px 16px;
  box-shadow:var(--sh2);
  opacity:0; pointer-events:none;
  transition:opacity .28s, transform .28s;
  max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}
#tip.show{ opacity:1; transform:translate(-50%,0); }


/* ============================================================
   药品栏（M3.5）
   ------------------------------------------------------------
   常驻 HUD 左下角，4 格。Tab 打开选择面板（打开时游戏暂停）。
   ============================================================ */
.potion-bar{
  position:absolute; left:16px; bottom:16px; z-index:7;
  display:flex; gap:6px; align-items:center;
  padding:7px 9px; border-radius:13px;
  background:linear-gradient(180deg,rgba(16,23,32,.9),rgba(8,12,18,.94));
  border:1px solid var(--line); box-shadow:var(--sh3);
}
.pb-slot{
  position:relative; width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--line2); cursor:pointer;
  transition:transform .1s, border-color .18s, box-shadow .18s;
}
.pb-slot.empty{ opacity:.32; cursor:default; border-style:dashed; }
.pb-slot:not(.empty){ border-color:var(--pc, var(--line2)); box-shadow:inset 0 0 12px -4px var(--pc,#fff); }
.pb-slot:not(.empty):hover{ transform:translateY(-2px); }
.pbs-icon{ font-size:19px; line-height:1; }
.pbs-n{
  position:absolute; right:3px; bottom:1px;
  font-family:var(--font-num); font-size:11px; font-weight:800;
  color:#fff; text-shadow:0 1px 3px #000;
}
.pb-key{
  margin-left:2px; padding:0 6px; height:20px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-num); font-size:10px; font-weight:800; letter-spacing:.5px;
  color:var(--muted); background:rgba(255,255,255,.06); border:1px solid var(--line);
}

/* —— 药品选择面板 —— */
.potion-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:30; width:min(560px, calc(100% - 32px));
  padding:18px 18px 14px; border-radius:18px;
  background:linear-gradient(180deg,rgba(20,28,38,.98),rgba(9,13,19,.99));
  border:1px solid var(--line2); box-shadow:0 26px 70px rgba(0,0,0,.7);
}
.potion-panel.hidden{ display:none; }
.pp-title{
  font-size:15px; font-weight:900; letter-spacing:1.5px; color:#e8f1fb;
  display:flex; align-items:baseline; gap:10px; margin-bottom:12px;
}
.pp-sub{ font-size:11px; font-weight:600; letter-spacing:0; color:var(--muted); }
.pp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.pp-cell{
  position:relative; padding:10px 8px 9px; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1.5px solid var(--line2); text-align:center;
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.pp-cell:hover{ transform:translateY(-2px); }
.pp-cell.sel{ border-color:#7fd8ff; box-shadow:0 0 0 2px rgba(127,216,255,.22), 0 8px 24px rgba(127,216,255,.18); }
.pp-cell.empty{ opacity:.28; cursor:default; border-style:dashed; }
.pp-cell.dim{ opacity:.45; }
.pp-cell.dim .ppc-desc{ color:#ff9a6b; }
.ppc-key{
  position:absolute; left:7px; top:6px;
  font-family:var(--font-num); font-size:10px; font-weight:800; color:var(--dim);
}
.ppc-icon{ font-size:26px; line-height:1.15; }
.ppc-name{ font-size:12px; font-weight:800; color:#e8f1fb; margin-top:2px; }
.ppc-desc{ font-size:10px; color:var(--muted); line-height:1.5; margin-top:3px; min-height:30px; }
.ppc-n{ font-family:var(--font-num); font-size:11px; font-weight:800; color:#f5c451; margin-top:2px; }
.ppc-empty{ font-size:11px; color:var(--dim); padding:20px 0; }
.pp-hint{
  margin-top:12px; text-align:center; font-size:11px; color:var(--dim); letter-spacing:.4px;
}

/* 窄屏：药品栏让开摇杆与技能键 */
@media (max-width:820px), (max-height:560px){
  .potion-bar{ left:auto; right:12px; bottom:170px; padding:5px 7px; gap:5px; }
  .pb-slot{ width:34px; height:34px; border-radius:8px; }
  .pbs-icon{ font-size:16px; }
  .pb-key{ display:none; }
  .pp-grid{ grid-template-columns:repeat(2,1fr); }
  .ppc-desc{ min-height:0; }
}