/* 奶蛙幸存者 —— 初始武器选择界面样式（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, 1.2vh, 12px);
  width: 100%;
  height: 100%;
  padding: clamp(8px, 1.8vh, 20px) clamp(10px, 2vw, 34px) clamp(6px, 1.2vh, 14px);
  box-sizing: border-box;
}
.wsel-mini {
  font-size: clamp(11px, 1.7vh, 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, 1vw, 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, 1.2vh, 12px);
  padding: clamp(10px, 2vh, 22px) clamp(12px, 1.6vw, 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, 3.6vh, 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, 2.2vw, 34px);
  min-height: 0;
  flex: 1 1 auto;
}
.wsel-portrait {
  flex: 0 0 clamp(132px, 28vh, 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, 1.15vh, 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, 1.4vh, 16px);
  padding: clamp(10px, 2vh, 22px) clamp(12px, 1.6vw, 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, 1.4vw, 18px); }
.wsel-detail-icon {
  flex: 0 0 auto;
  width: clamp(56px, 10vh, 96px);
  height: clamp(56px, 10vh, 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, 3vh, 30px);
  font-weight: 900;
  color: #f4f7fc;
}
.wsel-detail-cat {
  margin: 0;
  font-size: clamp(11px, 1.7vh, 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, 1.9vh, 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, 1.7vh, 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, 1.2vh, 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, 18vw, 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, 3.4vh, 22px); }
.select-overlay.is-short .wrow { padding: 2px 0; font-size: clamp(11px, 2.2vh, 15px); }
.select-overlay.is-short .wsel-detail-special { display: none; }
.select-overlay.is-short .tile { width: clamp(40px, 8.4vh, 62px); height: clamp(40px, 8.4vh, 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; }