/* GATE-WAVE 守门波次 · 竖屏 UI（gdd-v0.1 / ART-UI-LOOK-001） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: #0b1220; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }

#stage {
  position: relative; width: 390px; height: 780px;
  transform-origin: center center;
  background: linear-gradient(180deg, #10233c 0%, #0d1a2e 55%, #0a1424 100%);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* ---------- 顶部 ---------- */
#hud-top {
  position: absolute; top: 0; left: 0; right: 0; height: 58px; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(6, 12, 22, 0.92), rgba(6, 12, 22, 0.55));
  color: #dfe8f5;
}
#chapter { font-weight: 700; letter-spacing: 1px; font-size: 16px; color: #ffd98a; }
#lvwrap { flex: 1; display: flex; align-items: center; gap: 8px; }
#lvbar { flex: 1; height: 10px; border-radius: 6px; background: #1d3050; border: 1px solid #34507c; overflow: hidden; }
#lvfill { width: 30%; height: 100%; background: linear-gradient(90deg, #49b6ff, #7fe3ff); }
#lvtext { font-size: 13px; color: #9fc2ef; }
#wave { font-size: 15px; font-weight: 700; color: #ffe9b8; }

/* ---------- 战场 ---------- */
#field { position: absolute; top: 58px; bottom: 0; left: 0; right: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 圆钮通用 ---------- */
.ctl {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid #3d5a8a; background: rgba(18, 32, 56, 0.88);
  color: #dfe8f5; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
}
.ctl:active { transform: scale(0.94); }

/* ---------- 左列 ---------- */
#col-left {
  position: absolute; left: 8px; top: 10px; bottom: 12px; width: 58px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.timebox { height: 30px; width: 58px; border-radius: 16px; font-size: 13px; letter-spacing: 1px; color: #bfe3ff; cursor: default; border: 1px solid #33507e; }
#btn-auto.on { border-color: #ffd257; color: #ffd257; box-shadow: 0 0 10px rgba(255, 210, 87, 0.45); }

#skills { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.skill {
  position: relative; width: 54px; height: 66px;
  background: none; border: none; cursor: pointer;
}
.skill .s-core {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid #46608c; background: rgba(20, 34, 58, 0.9);
  display: block;
}
.skill .s-num {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; color: #8fa8cc; white-space: nowrap;
}
.skill.lit .s-core { box-shadow: 0 0 14px 2px currentColor; border-color: currentColor; background: rgba(30, 44, 70, 0.95); }
.skill.lit .s-num { color: #ffe08a; }
.skill:disabled { cursor: default; }
.s-cyan { color: #4be1e8; }
.s-green { color: #6fe86b; }
.s-purple { color: #c07bff; }
.skill.lit.s-cyan .s-core { background: rgba(75, 225, 232, 0.28); }
.skill.lit.s-green .s-core { background: rgba(111, 232, 107, 0.28); }
.skill.lit.s-purple .s-core { background: rgba(192, 123, 255, 0.28); }

/* ---------- 右列 ---------- */
#col-right {
  position: absolute; right: 8px; top: 10px; width: 58px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ctl.word { font-size: 13px; }
.ctl.round { background: rgba(24, 40, 66, 0.85); }

/* ---------- 中央 ---------- */
#center { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#btn-start {
  pointer-events: auto;
  padding: 14px 44px; font-size: 24px; font-weight: 800; letter-spacing: 6px;
  color: #1d1305; background: linear-gradient(180deg, #ffd97a, #f0a93c);
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(240, 169, 60, 0.4);
}
#btn-start:active { transform: scale(0.96); }
#result { pointer-events: auto; text-align: center; }
#result.hidden, #btn-start.hidden, #modal.hidden { display: none; }
#result-text {
  font-size: 40px; font-weight: 900; letter-spacing: 8px; margin-bottom: 22px;
  color: #ffe9b8; text-shadow: 0 0 24px rgba(255, 200, 90, 0.65), 0 2px 4px rgba(0,0,0,0.8);
}
#result.lost #result-text { color: #ff9d9d; text-shadow: 0 0 24px rgba(255, 90, 90, 0.6), 0 2px 4px rgba(0,0,0,0.8); }
#btn-retry {
  padding: 12px 34px; font-size: 18px; font-weight: 800; letter-spacing: 4px;
  color: #10233c; background: linear-gradient(180deg, #bfe3ff, #6db5ef);
  border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(109, 181, 239, 0.4);
}
#btn-retry:active { transform: scale(0.96); }

/* ---------- 弹窗 ---------- */
#modal {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(4, 8, 16, 0.62);
  display: flex; align-items: center; justify-content: center;
}
#modal-box {
  padding: 26px 34px; border-radius: 14px; font-size: 18px; font-weight: 700; color: #e8f0fb;
  background: #16283f; border: 1px solid #3d5a8a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}