/* ===========================================================
   吸血鬼幸存者 — 样式
   暗色奇幻风格：分层渐变 + 描边 + 内阴影，
   面板带金边装饰，卡片按稀有度着色。
   所有视觉效果均用 CSS 实现，不引用任何外部图片。
   =========================================================== */

* { box-sizing: border-box; }

:root {
  --bg: #07090d;
  --panel-a: #161c27;
  --panel-b: #0b0f16;
  --edge: #2b3648;
  --edge-hi: #4a5f82;
  --gold: #ffd166;
  --purple: #b58cff;
  --cyan: #7ee0ff;
  --red: #ff6b6b;
  --green: #7ee787;
  --text: #e8eef5;
  --dim: #93a7bb;
  --dim2: #6f8296;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 整屏舞台：top 让开站点 BETA 条（高度由 /beta-notice.js 写到 --beta-h，条没装或没量到时为 0） */
#app { position: fixed; left: 0; right: 0; bottom: 0; top: var(--beta-h, 0px); }

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #0b0f14;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hidden { display: none !important; }

/* ===================== HUD ===================== */

#hud {
  position: absolute;
  left: 0; top: 0; right: 0;
  padding: 12px 16px;
  pointer-events: none;
}

.hud-top {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 640px;
}

/* --- 进度条通用外观 --- */
.bar {
  position: relative;
  height: 22px;
  padding-left: 30px;
  border-radius: 7px;
  background: linear-gradient(180deg, #0a0e15, #05070b);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .85),
    0 2px 8px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}

/* 条内高光，让填充看起来有体积 */
.bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events: none;
}

.bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  display: block;
  transition: width .12s linear;
}

.bar b {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  font-size: 11.5px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7);
}

/* 条前的图标（由 JS 把内嵌精灵设为背景图） */
.bar-ico {
  position: absolute;
  z-index: 2;
  left: 6px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.9));
}

.bar-hp { height: 24px; }
.bar-hp i {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ff8a8a, #c62828 70%, #8e1414);
  box-shadow: 0 0 12px rgba(255, 70, 70, .45);
}
.bar-hp.low i {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ff5252, #7d0f0f);
  animation: hp-pulse .5s infinite alternate;
}
.bar-hp b { line-height: 22px; }

@keyframes hp-pulse { from { opacity: .6; } to { opacity: 1; } }

.bar-xp { height: 15px; padding-left: 30px; }
.bar-xp i {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #8fe6ff, #2b8fd8 70%, #1a5f96);
  box-shadow: 0 0 12px rgba(90, 190, 255, .45);
}
.bar-xp b { line-height: 13px; font-size: 10.5px; }

/* --- 状态数值 --- */
.hud-stats {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20,26,36,.85), rgba(8,11,16,.85));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.45);
}

.stat .k { font-size: 10.5px; color: var(--dim2); letter-spacing: 1.2px; }
.stat .v {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat.gold .v { color: var(--gold); }
.stat.cyan .v { color: var(--cyan); }
/* 关卡那一格：第二关起变成柠檬色，一眼能看出换图了（靠 :not 做不到，用属性选择器） */
.stat.stage .v { color: #b9cbdc; }
.stat.stage .v[data-stage="2"] { color: #e3d84a; text-shadow: 0 0 12px rgba(227, 216, 74, .55); }
.stat.stage .v[data-stage="3"] { color: #ff9ae0; text-shadow: 0 0 12px rgba(255, 154, 224, .55); }

.icon-btn {
  pointer-events: auto;
  width: 34px; height: 32px;
  font: inherit; font-size: 13px;
  color: #cfe0f0;
  background: linear-gradient(180deg, rgba(24,31,42,.9), rgba(10,14,20,.9));
  border: 1px solid var(--edge);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.45);
  transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: #223046; border-color: var(--edge-hi); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn.off { color: #5e7186; }

/* --- 武器栏 --- */
.weapon-strip {
  margin-top: 9px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.wslot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  background: linear-gradient(180deg, rgba(20,26,36,.85), rgba(8,11,16,.85));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.45);
}
.wslot .lv { color: var(--gold); font-weight: 700; }
.wslot .nm { color: #b9cbdc; }

/* 宠物那一格：左边一道宠物主色的竖条，跟武器区分开 */
.wslot.pet {
  border-color: var(--pet-accent, var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.45),
              inset 3px 0 0 -1px var(--pet-accent, var(--gold));
}
.wslot.pet .ico { font-size: 13px; line-height: 1; }
.wslot.pet .nm { color: var(--pet-accent, var(--gold)); font-weight: 700; }

/* 环绕骨刃那一格：把等级换成「形态 + E」，提示可以按 E 切换范围 */
.wslot.orbit .orbit-mode { color: #ffd166; font-weight: 700; }
.wslot.orbit .orbit-mode b {
  display: inline-block;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 9.5px;
  background: rgba(255, 209, 102, .18);
  border: 1px solid rgba(255, 209, 102, .5);
}

/* ===================== 覆盖层 ===================== */

#overlays {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  /* 根因修复：原来 align-items:center + overflow:auto，内容比视口高时**顶部那截永远够不到**
     （开始面板 1117px vs 可用 867px，标题被裁在 -92px）。用 flex-start + .panel{margin:auto}
     达到同样居中效果，但超高时从顶部开始排、整块都能滚到。 */
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  /* 整屏 backdrop-filter: blur(2px) 是「一开面板就掉到 30fps」的元凶：
     画布每帧在下面重绘，合成器就得每帧把整屏重新模糊一遍 —— 实测面板态 32 → 去掉后 51 → 再加上面板态降频 60fps。
     这里用略厚一点的渐变把「磨砂感」补回来，观感几乎一样、代价是零。 */
  background:
    radial-gradient(circle at 50% 45%, rgba(20,10,40,.62), rgba(3,5,9,.92) 70%);
}

#overlays.hidden { display: none; }

/* --- 面板外框 --- */
.panel {
  position: relative;
  width: min(780px, 100%);
  padding: 30px 32px 26px;
  /* margin:auto 在 flex 容器里做居中（见 #overlays 注释）；max-height + overflow 让超高的面板
     自己在框内滚动 —— 开始面板有 1100px 内容，不给它滚动的话底部的「全站榜」直接落在首屏外。 */
  margin: auto;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--edge-hi);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 28px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.07);
  text-align: center;
}

/* 面板内的滚动条：做得看得见（否则玩家不知道下面还有「云存档 / 共创留言板」） */
.panel { scrollbar-width: thin; scrollbar-color: rgba(126,224,255,.45) transparent; }
.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb {
  background: rgba(126,224,255,.3);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 9px;
}
.panel::-webkit-scrollbar-thumb:hover { background: rgba(126,224,255,.55); background-clip: padding-box; }

/* 四角金色装饰 */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--gold);
  opacity: .55;
  pointer-events: none;
}
.panel::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.panel::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.panel h1 {
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: 6px;
  color: #c9a6ff;
  text-shadow:
    0 0 30px rgba(150, 100, 255, .65),
    0 3px 0 rgba(0,0,0,.6);
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 25px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(126, 224, 255, .45), 0 2px 0 rgba(0,0,0,.6);
}
.panel h2.dead { color: #ff8a8a; text-shadow: 0 0 28px rgba(255, 80, 80, .55), 0 2px 0 rgba(0,0,0,.6); }
.panel h2.clear { color: #9ef7b0; text-shadow: 0 0 30px rgba(126, 231, 135, .6), 0 2px 0 rgba(0,0,0,.6); }
.panel h2 .lv { color: var(--gold); }

.panel .sub {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.75;
}

/* --- 开始面板 --- */
/* 开始面板要塞下：标题/最高纪录 + 玩法说明 + 阶段表 + 开始按钮 + 两个榜 + 云存档设置（内容 1100px+），
   而 1440×900 只有 835px。这里把上方固定装饰收紧一点（每处几像素），把「🌍 全站榜」留在首屏内；
   真放不下的部分由 .panel 自己的滚动条兜底（见 #overlays 注释）。 */
.best {
  display: inline-block;
  margin: 4px 0 14px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  color: #b9cbdc;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--edge);
}
.best b {
  color: var(--gold);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255,209,102,.5);
}

.keys {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 13px;
  line-height: 1.85;
  color: #a8bccf;
  text-align: left;
}
.keys b { color: var(--gold); }

kbd {
  display: inline-block;
  min-width: 23px;
  padding: 1px 7px;
  margin: 0 2px;
  font: 700 11px/1.7 Consolas, monospace;
  color: #e4eefa;
  background: linear-gradient(180deg, #26344a, #16202e);
  border: 1px solid #3d5273;
  border-bottom-width: 2px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* --- 按钮 --- */
.btn {
  min-width: 180px;
  margin: 5px;
  padding: 13px 28px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #cfdcea;
  background: linear-gradient(180deg, #22303f, #131b26);
  border: 1px solid #3d5273;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 16px rgba(0,0,0,.5);
  transition: transform .07s ease, filter .15s ease, border-color .15s ease;
}
.btn:hover { filter: brightness(1.15); border-color: var(--edge-hi); }
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

.btn.primary {
  color: #1b1030;
  background: linear-gradient(180deg, #d3b6ff, #9a6cf0 65%, #7a4fd0);
  border-color: #d3b6ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 26px rgba(150, 100, 255, .45),
    0 8px 22px rgba(0,0,0,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover { filter: brightness(1.08); }

.tip { margin: 12px 0 0; font-size: 12px; color: var(--dim2); }

/* --- 主角皮肤选择器 ---
   高度要省着用：开始面板本来就贴到 900px 视口的下沿，
   皮肤行多占 20px 就会把「全站榜」挤出首屏（探针 ⑦‴ 会挂）。
   所以做成紧凑一行：12px 字、4~10px 内边距、4px 间距。 */
.skins {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.skins-label {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--dim2);
}
.skins-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skin-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: #cfdcea;
  background: linear-gradient(180deg, #1d2836, #131b26);
  border: 1px solid #35486a;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .07s ease, border-color .15s ease, filter .15s ease;
}
.skin-chip:hover { filter: brightness(1.2); border-color: var(--edge-hi); }
.skin-chip:active { transform: translateY(1px); }
.skin-chip.on {
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 209, 102, .35), inset 0 1px 0 rgba(255,255,255,.12);
}
/* 色标：外圈是帽子色、内芯是斗篷色，一眼能分出四套皮肤 */
.skin-chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #444;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}

/* ===================== 升级卡片 ===================== */

.cards {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.card {
  position: relative;
  flex: 1 1 195px;
  max-width: 235px;
  padding: 18px 15px 15px;
  border-radius: 12px;
  background: linear-gradient(180deg, #182130, #0e141d);
  border: 1px solid #2f3d52;
  cursor: pointer;
  overflow: hidden;
  transition: transform .1s ease, border-color .15s ease, box-shadow .15s ease;
  text-align: center;
}

/* 卡片顶部的稀有度色条 */
.card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--card-accent, var(--purple));
  box-shadow: 0 0 14px var(--card-accent, var(--purple));
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--card-accent, var(--purple));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 24px -4px var(--card-accent, var(--purple));
}

.card .ico {
  width: 50px; height: 50px;
  margin: 0 auto 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.09), rgba(0,0,0,.45));
  border: 1px solid var(--card-accent, var(--purple));
  box-shadow: inset 0 0 18px -6px var(--card-accent, var(--purple));
  color: var(--card-accent, var(--purple));
}

.card .nm { font-size: 15px; font-weight: 700; margin-bottom: 7px; color: var(--text); letter-spacing: .5px; }
.card .ds { font-size: 12.5px; line-height: 1.65; color: var(--dim); min-height: 46px; }

.card .tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .8px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 209, 102, .12);
  border: 1px solid rgba(255, 209, 102, .35);
}
.card .tag.new { color: var(--cyan); background: rgba(126, 224, 255, .12); border-color: rgba(126, 224, 255, .35); }

/* 流派增益：金色描边 + 斜向条纹，和普通增益一眼分开 */
.card .tag.school {
  color: #ffe9a8;
  background: rgba(255, 209, 102, .16);
  border-color: rgba(255, 209, 102, .55);
}
.card.school {
  background:
    repeating-linear-gradient(135deg, rgba(255, 209, 102, .07) 0 8px, rgba(0, 0, 0, 0) 8px 16px),
    linear-gradient(180deg, #1d2130, #0e131c);
}
.card.school .nm { color: var(--card-accent, var(--gold)); }
.school-note { color: var(--dim2); font-size: 11.5px; }

/* 结算面板上"为什么没通关"那一行 */
.go-reason { color: #ffb4b4 !important; }

.card .key { margin-top: 9px; font-size: 10px; color: var(--dim2); letter-spacing: .5px; }

/* ===================== 宠物三选一 =====================
   复用升级卡片的样式，只把"图标更大、名字更亮"的差别做出来。 */

.pet-cards .card.pet {
  flex: 1 1 200px;
  max-width: 240px;
  background: linear-gradient(180deg, #1b2434, #0d1219);
}

.pet-cards .card.pet .ico {
  width: 62px; height: 62px;
  font-size: 30px;
  border-radius: 16px;
  animation: pet-float 2.2s ease-in-out infinite;
}

.pet-cards .card.pet .nm {
  font-size: 16px;
  color: var(--card-accent, var(--gold));
  text-shadow: 0 0 16px var(--card-accent, var(--gold));
}

.pet-cards .card.pet .ds { min-height: 60px; }

/* 图标轻轻上下浮动，暗示"这是一只跟班" */
@keyframes pet-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ===================== 结算 ===================== */

.result { margin: 10px 0 24px; }

.result .big {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 36px rgba(126, 224, 255, .5), 0 4px 0 rgba(0,0,0,.55);
}

.newbest {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,209,102,.7);
  animation: hp-pulse .7s infinite alternate;
}

.result .grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.result .grid > div {
  padding: 12px 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,26,36,.7), rgba(6,9,13,.7));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.result .grid span { display: block; font-size: 11px; color: var(--dim2); margin-bottom: 5px; letter-spacing: .8px; }
.result .grid b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); }

@media (max-width: 620px) {
  .result .grid { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 22px 18px; }
  .panel h1 { font-size: 26px; letter-spacing: 4px; }
  .result .big { font-size: 42px; }
}

/* ===================== 启动提示 ===================== */

#boot {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  color: #ffe08a;
  background: #3a2f10;
  border: 1px solid #6b5a1e;
  white-space: nowrap;
}

#noscript-warn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  padding: 16px 22px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #ffb4b4;
  background: #3b1418;
  border: 1px solid #6b2229;
}

/* ===================== 阶段配色 ===================== */

.stat.phase .v { color: #cfe0f0; }
.stat.phase .v.ph-normal { color: #cfe0f0; }
.stat.phase .v.ph-horde  { color: #ff8a5c; text-shadow: 0 0 12px rgba(255, 120, 60, .6); }
.stat.phase .v.ph-rest   { color: #7ee787; text-shadow: 0 0 12px rgba(126, 231, 135, .55); }
.stat.phase .v.ph-boss   { color: #ff5d5d; text-shadow: 0 0 14px rgba(255, 70, 70, .75); animation: hp-pulse .6s infinite alternate; }

/* ===================== Boss 血条 ===================== */

.boss-bar {
  margin-top: 14px;
  width: min(560px, 78vw);
  padding: 9px 12px 11px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(38,10,10,.92), rgba(14,5,7,.92));
  border: 1px solid #7a2b2b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 26px rgba(255, 40, 40, .28),
    0 8px 24px rgba(0,0,0,.6);
  animation: boss-in .35s ease-out;
}

.boss-bar[hidden] { display: none; }

@keyframes boss-in {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.boss-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.boss-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #ff9a9a;
  text-shadow: 0 0 14px rgba(255, 60, 60, .6);
}

.boss-hp {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #d8b0b0;
}

.boss-track {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #180607, #0b0304);
  border: 1px solid #5c1f1f;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.9);
  overflow: hidden;
}

.boss-track i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  display: block;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ff8080, #d02020 65%, #7a0d0d);
  box-shadow: 0 0 16px rgba(255, 50, 50, .6);
  transition: width .1s linear;
}

/* ===================== 阶段播报横幅 ===================== */

.banner {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;   /* 绝不拦截操作 */
  z-index: 5;
}

.banner[hidden] { display: none; }

.banner.show { animation: banner-play 2.6s ease-out forwards; }

@keyframes banner-play {
  0%   { opacity: 0; transform: translateX(-50%) scale(.82); }
  12%  { opacity: 1; transform: translateX(-50%) scale(1.04); }
  20%  { transform: translateX(-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.02); }
}

.banner-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #ffd166;
  text-shadow:
    0 0 34px rgba(255, 180, 60, .75),
    0 0 70px rgba(255, 100, 40, .45),
    0 4px 0 rgba(0,0,0,.7);
}

.banner-sub {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #e8d8c0;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
}

@media (max-width: 620px) {
  .banner-title { font-size: 26px; letter-spacing: 5px; }
  .boss-bar { width: 88vw; }
}

/* ===================== 开始面板的阶段说明 ===================== */

.phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}

.phases > div {
  padding: 7px 6px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--edge);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

.phases b {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--dim2);
}

.phases span { color: #cfe0f0; font-weight: 600; }

.phases .ph-horde { border-color: rgba(255, 120, 60, .45); }
.phases .ph-horde span { color: #ff9a6c; }

.phases .ph-rest { border-color: rgba(126, 231, 135, .4); }
.phases .ph-rest span { color: var(--green); }

.phases .ph-boss { border-color: rgba(255, 80, 80, .5); }
.phases .ph-boss span { color: #ff7a7a; }

@media (max-width: 620px) {
  .phases { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== 云存档（开始面板里的那一行） =====================
   走站点账号库（/games/account.js）：登录后存档进你自己的私有 Gist。
   没登录/没装账号库时这一行要么置灰要么不出现，不影响玩。 */

.cloud {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(16,22,32,.72), rgba(6,9,13,.72));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
}

.cloud.working { border-color: var(--edge-hi); }

.cloud-head { display: flex; gap: 8px; align-items: center; }

.cloud-ico { font-size: 15px; color: var(--cyan); }

.cloud-status { font-size: 12px; color: var(--dim); letter-spacing: .3px; }
.cloud-status.s-ok { color: var(--green); }
.cloud-status.s-guest { color: var(--dim); }
.cloud-status.s-nocloud { color: #ffb86b; }
.cloud-status.s-nolib { color: var(--dim2); }

.cloud-btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

.cbtn {
  font: 600 11.5px/1 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #1a2231, #10161f);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  transition: filter .12s ease, border-color .12s ease;
}
.cbtn:hover { filter: brightness(1.18); border-color: var(--edge-hi); }
.cbtn:disabled { opacity: .45; cursor: default; filter: none; }
.cbtn.primary { border-color: rgba(181,140,255,.5); color: #e7ddff; }
.cbtn.ghost { background: transparent; color: var(--dim); }

.cloud-form { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 9px; }

.cloud-form input {
  font: 12px/1.4 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 6px 9px;
  min-width: 220px;
}

.cloud-link, .lb-link { font-size: 11.5px; color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.lb-link { white-space: nowrap; }

.cloud-msg { margin: 8px 0 0; font-size: 11.5px; min-height: 15px; color: var(--dim); }
.cloud-msg.ok { color: var(--green); }
.cloud-msg.warn { color: #ffb86b; }
.cloud-msg.bad { color: var(--red); }

.cloud-hint { margin: 6px 0 0; font-size: 11px; line-height: 1.6; color: var(--dim2); }

/* ===================== 共创留言板（两位共创者的 agent 之间留话） ===================== */

.notes-open { display: block; width: 100%; margin-top: 12px; }

.notes {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 40px));
  max-height: min(76vh, 620px);
  overflow: auto;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, #141a24, #0a0e14);
  border: 1px solid var(--edge-hi);
  box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 40;
  text-align: left;
}

.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notes-head b { font-size: 15px; letter-spacing: 2px; color: var(--gold); }

.notes-intro { margin: 10px 0 14px; font-size: 12px; line-height: 1.75; color: var(--dim); }

.notes-list { display: flex; flex-direction: column; gap: 10px; }

.note {
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--edge);
}

.note-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.note-meta b { font-size: 12px; color: var(--cyan); }
.note-meta span { font-size: 11px; color: var(--dim2); font-variant-numeric: tabular-nums; }
.note-text { margin: 0; font-size: 12px; line-height: 1.8; color: #d8e3ee; }

/* ===================== 个人纪录榜 ===================== */

.ranks {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(24,20,12,.66), rgba(8,7,4,.66));
  border: 1px solid #4a3c1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
}

.ranks-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.ranks-head b { font-size: 12.5px; color: var(--gold); letter-spacing: 1px; }
.ranks-sub { font-size: 11px; color: var(--dim2); }

.ranks-list { display: flex; flex-direction: column; gap: 5px; }

.rank-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.02);
  font-size: 11.5px;
  color: #d6e2ee;
  font-variant-numeric: tabular-nums;
}
.rank-row.rank-top { background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.3); }
.rank-no { color: var(--gold); font-weight: 700; min-width: 22px; }
.rank-empty { margin: 0; font-size: 11.5px; color: var(--dim2); }

.go-rank {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,209,102,.45);
}
/* 结算面板上的「全站第 N 名」：用全站榜那套青色，和个人榜（金色）区分开 */
.go-rank-world { color: var(--cyan); text-shadow: 0 0 14px rgba(126,224,255,.45); }

/* ===================== 全站榜 ===================== */

.lb {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(14,22,32,.72), rgba(5,8,12,.72));
  border: 1px solid #2b4a5f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
}

.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lb-head b { font-size: 12.5px; color: var(--cyan); letter-spacing: 1px; }
.lb-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }

.lb-list { display: flex; flex-direction: column; gap: 5px; max-height: 132px; overflow-y: auto; }
/* 榜满 10 行时列表自己滚（≈5 行可见）：不然榜单越长，开始面板越被顶出首屏 */
.lb-list::-webkit-scrollbar { width: 8px; }
.lb-list::-webkit-scrollbar-thumb { background: rgba(126,224,255,.25); border-radius: 8px; }
.lb-list { scrollbar-width: thin; scrollbar-color: rgba(126,224,255,.35) transparent; }

.lb-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.02);
  font-size: 11.5px;
  color: #d6e2ee;
  font-variant-numeric: tabular-nums;
}
.lb-row.lb-me { background: rgba(126,224,255,.12); border: 1px solid rgba(126,224,255,.35); }
.lb-no { color: var(--cyan); font-weight: 700; min-width: 24px; }
.lb-name { min-width: 90px; color: #eaf3fb; }
.lb-score { color: var(--dim); }
.lb-empty { margin: 0; font-size: 11.5px; color: var(--dim2); }

.lb-msg { margin: 8px 0 0; font-size: 11.5px; min-height: 15px; color: var(--dim); }
.lb-msg.ok { color: var(--green); }
.lb-msg.warn { color: #ffb86b; }
.lb-msg.bad { color: var(--red); }

.notes-tip { margin: 14px 0 0; font-size: 11px; line-height: 1.7; color: var(--dim2); }