/* 奶蛙幸存者 —— 初始武器选择界面样式（v0.10.3）
 * 复用 css/char-select.css 的整页 / 顶栏 / 底部图标格（.select-overlay / .sel-top / .tile / .sel-go），
 * 这里只补「角色面板 + 武器详情 + 操作区」的布局。
 */
.wsel-shell {
  --accent: #ffd24a;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(6px, calc(var(--stage-h, 100vh) * 1.2 / 100), 12px);
  width: 100%;
  height: 100%;
  padding: clamp(8px, calc(var(--stage-h, 100vh) * 1.8 / 100), 20px) clamp(10px, calc(var(--stage-w, 100vw) * 2 / 100), 34px) clamp(6px, calc(var(--stage-h, 100vh) * 1.2 / 100), 14px);
  box-sizing: border-box;
}
.wsel-mini {
  font-size: clamp(11px, calc(var(--stage-h, 100vh) * 1.7 / 100), 15px);
  font-weight: 700;
  color: #9fb0c8;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ---------------- 中间：角色 + 武器详情 ---------------- */
.wsel-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(6px, calc(var(--stage-w, 100vw) * 1 / 100), 14px);
  min-height: 0;
}
.wsel-char,
.wsel-detail {
  min-height: 0;
  border-radius: 8px;
  box-sizing: border-box;
}
.wsel-char {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, calc(var(--stage-h, 100vh) * 1.2 / 100), 12px);
  padding: clamp(10px, calc(var(--stage-h, 100vh) * 2 / 100), 22px) clamp(12px, calc(var(--stage-w, 100vw) * 1.6 / 100), 24px);
  background: linear-gradient(180deg, rgba(38, 46, 66, .78), rgba(28, 34, 50, .82));
  border: 1px solid rgba(255, 255, 255, .07);
}
.wsel-char-name {
  margin: 0;
  text-align: center;
  font-size: clamp(20px, calc(var(--stage-h, 100vh) * 3.6 / 100), 38px);
  font-weight: 900;
  color: #f4f7fc;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 #10131b, 0 0 14px rgba(0, 0, 0, .55);
}
.wsel-char-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, calc(var(--stage-w, 100vw) * 2.2 / 100), 34px);
  min-height: 0;
  flex: 1 1 auto;
}
.wsel-portrait {
  flex: 0 0 clamp(132px, calc(var(--stage-h, 100vh) * 28 / 100), 274px);
  aspect-ratio: 1 / 1.02;
  display: grid;
  place-items: center;
  padding: 6px;
}
.wsel-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.wsel-stats {
  flex: 0 1 auto;
  max-width: 62%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 2px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, calc(var(--stage-h, 100vh) * 1.15 / 100), 12px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.wsel-forbid .stat-txt { color: #ff9a9a; }

/* 右：武器详情（参考 Brotato 的黑色详情卡） */
.wsel-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(var(--stage-h, 100vh) * 1.4 / 100), 16px);
  padding: clamp(10px, calc(var(--stage-h, 100vh) * 2 / 100), 22px) clamp(12px, calc(var(--stage-w, 100vw) * 1.6 / 100), 24px);
  background: linear-gradient(180deg, rgba(10, 12, 18, .92), rgba(8, 10, 15, .94));
  border: 1px solid rgba(255, 255, 255, .07);
  overflow-y: auto;
}
.wsel-detail-head { display: flex; align-items: center; gap: clamp(10px, calc(var(--stage-w, 100vw) * 1.4 / 100), 18px); }
.wsel-detail-icon {
  flex: 0 0 auto;
  width: clamp(56px, calc(var(--stage-h, 100vh) * 10 / 100), 96px);
  height: clamp(56px, calc(var(--stage-h, 100vh) * 10 / 100), 96px);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1e2638, #151a26);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
}
.wsel-detail-icon img { width: 82%; height: 82%; object-fit: contain; }
.wsel-detail-titles { min-width: 0; }
.wsel-detail-name {
  margin: 0 0 2px;
  font-size: clamp(18px, calc(var(--stage-h, 100vh) * 3 / 100), 30px);
  font-weight: 900;
  color: #f4f7fc;
}
.wsel-detail-cat {
  margin: 0;
  font-size: clamp(11px, calc(var(--stage-h, 100vh) * 1.7 / 100), 15px);
  color: #9fb0c8;
  letter-spacing: .08em;
}
.wsel-detail-stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .7vh, 7px);
}
.wrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: clamp(3px, .7vh, 7px) 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
  font-size: clamp(12px, calc(var(--stage-h, 100vh) * 1.9 / 100), 17px);
}
.wrow .wlab { color: #9fb0c8; }
.wrow .wval { color: #eef3fb; font-weight: 700; text-align: right; }
.wrow .wval i { font-style: normal; font-weight: 400; font-size: .84em; color: #9fb0c8; }
.wrow.hl .wval { color: #ffd24a; }
.wsel-detail-special {
  margin: 0;
  font-size: clamp(11px, calc(var(--stage-h, 100vh) * 1.7 / 100), 15px);
  line-height: 1.6;
  color: #b9c6da;
}

/* ---------------- 底部：武器图标 + 开始按钮 ---------------- */
.wsel-roster { flex: 0 0 auto; }
.wsel-tile.off { cursor: not-allowed; opacity: .38; filter: grayscale(.65); }
.wsel-tile.off:hover { border-color: rgba(255, 255, 255, .10); background: linear-gradient(180deg, #232b3d, #161b28); }
.wsel-off-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  font-size: clamp(8px, calc(var(--stage-h, 100vh) * 1.2 / 100), 11px);
  font-weight: 700;
  text-align: center;
  color: #ff9a9a;
  letter-spacing: .02em;
  pointer-events: none;
}
.wsel-actions { display: flex; justify-content: flex-end; }
.wsel-go { min-width: clamp(150px, calc(var(--stage-w, 100vw) * 18 / 100), 260px); }

/* ---------------- 窄屏 / 矮屏 ---------------- */
.select-overlay.is-short .wsel-char { gap: 4px; }
.select-overlay.is-short .wsel-portrait { flex-basis: 104px; }
.select-overlay.is-short .wsel-detail { gap: 6px; padding: 8px 12px; }
.select-overlay.is-short .wsel-detail-icon { width: 46px; height: 46px; }
.select-overlay.is-short .wsel-detail-name { font-size: clamp(15px, calc(var(--stage-h, 100vh) * 3.4 / 100), 22px); }
.select-overlay.is-short .wrow { padding: 2px 0; font-size: clamp(11px, calc(var(--stage-h, 100vh) * 2.2 / 100), 15px); }
.select-overlay.is-short .wsel-detail-special { display: none; }
.select-overlay.is-short .tile { width: clamp(40px, calc(var(--stage-h, 100vh) * 8.4 / 100), 62px); height: clamp(40px, calc(var(--stage-h, 100vh) * 8.4 / 100), 62px); }
.select-overlay.is-short .wsel-go { min-width: 150px; }

.select-overlay:not(.is-wide) .wsel-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.select-overlay.is-tiny .wsel-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.select-overlay.is-tiny .wsel-detail-special { display: none; }

/* v0.13.4：武器从 12 把扩到 20 把后，头像格改成可换行网格，避免新武器被挤到横向滚动条外 */
.wsel-roster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: clamp(5px, .6vw, 9px);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: clamp(96px, calc(var(--stage-h, 100vh) * 21 / 100), 190px);
  padding: 2px 4px 4px;
}
.wsel-roster .tile {
  width: clamp(42px, calc(var(--stage-h, 100vh) * 6.6 / 100), 70px);
  height: clamp(42px, calc(var(--stage-h, 100vh) * 6.6 / 100), 70px);
}

/* v0.16.1 武器卡面：羁绊档位 */
.wsel-bond {
  margin-top: clamp(4px, calc(var(--stage-h, 100vh) * 1 / 100), 8px);
  padding-top: clamp(4px, calc(var(--stage-h, 100vh) * 1 / 100), 8px);
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}
.wsel-bond[hidden] { display: none; }
.wsel-bond-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.wsel-bond-name { font-size: clamp(12px, calc(var(--stage-h, 100vh) * 2.3 / 100), 19px); font-weight: 800; }
.wsel-bond-hint { font-size: clamp(10px, calc(var(--stage-h, 100vh) * 1.5 / 100), 12px); color: #8fa0b4; }
.wsel-bond-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.wbrow { display: flex; align-items: baseline; gap: clamp(6px, calc(var(--stage-w, 100vw) * 0.9 / 100), 12px); }
.wbn { flex: 0 0 auto; min-width: 3.2em; font-size: clamp(10px, calc(var(--stage-h, 100vh) * 1.55 / 100), 13px); font-weight: 700; }
.wbt { font-size: clamp(10px, calc(var(--stage-h, 100vh) * 1.55 / 100), 13px); color: #cfd8d2; }