/* 通用组件 - 参考咸鱼之王风格的按钮、卡片等 */

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-panel-light);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-inset), var(--shadow-sm);
}

.btn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--grad-gold);
  border-color: var(--color-primary-dark);
  color: #1a1208;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  box-shadow: var(--shadow-inset), 0 2px 8px rgba(232,169,48,0.25);
}

.btn--primary:active {
  filter: brightness(0.85);
}

.btn--danger {
  background: var(--grad-red);
  border-color: #c0392b;
  color: #fff;
}

.btn--success {
  background: var(--grad-green);
  border-color: #2d8a3e;
  color: #fff;
}

.btn--sm { padding: 5px 10px; font-size: var(--text-sm); }
.btn--lg { padding: 12px 24px; font-size: var(--text-lg); }
.btn--block { width: 100%; }

/* === 卡片 === */
.card {
  background: var(--grad-card);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 12px;
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.card--clickable {
  cursor: pointer;
  transition: all var(--t-fast);
}

.card--clickable:active {
  transform: scale(0.98);
  background: var(--bg-card-hover);
}

/* === 角色卡片 === */
.char-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 2px solid var(--quality-n);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}

.char-card:active {
  transform: scale(0.97);
}

.char-card--r { border-color: var(--quality-r); box-shadow: 0 0 6px rgba(74,158,255,0.15); }
.char-card--sr { border-color: var(--quality-sr); box-shadow: 0 0 8px rgba(168,85,247,0.2); }
.char-card--ssr { border-color: var(--quality-ssr); box-shadow: 0 0 10px rgba(245,158,11,0.25); }
.char-card--ur { border-color: var(--quality-ur); box-shadow: 0 0 12px rgba(239,68,68,0.3); }

.char-card__portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, var(--bg-panel-light) 0%, var(--bg-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.char-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.char-card__placeholder {
  font-size: 28px;
  font-weight: bold;
  color: var(--text-muted);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.char-card__name {
  padding: 3px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid rgba(255,255,255,0.03);
}

.char-card__stars {
  position: absolute;
  top: 1px;
  left: 2px;
  display: flex;
  gap: 1px;
  font-size: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.char-card__level {
  position: absolute;
  top: 1px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  color: var(--text-gold);
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 2;
}

.char-card__faction {
  position: absolute;
  bottom: 18px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.5);
  z-index: 2;
}

.char-card__faction--wei { background: var(--faction-wei); }
.char-card__faction--shu { background: var(--faction-shu); }
.char-card__faction--wu { background: var(--faction-wu); }
.char-card__faction--qun { background: var(--faction-qun); }

/* === 进度条 === */
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.4);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 4px currentColor;
}

.progress-bar--hp .progress-bar__fill {
  background: linear-gradient(90deg, #c0392b, #ff6b6b);
  color: rgba(255,107,107,0.3);
}

.progress-bar--mp .progress-bar__fill,
.progress-bar--rage .progress-bar__fill {
  background: linear-gradient(90deg, #e67e22, #f39c12);
  color: rgba(243,156,18,0.3);
}

.progress-bar--exp .progress-bar__fill {
  background: var(--grad-gold);
  color: rgba(232,169,48,0.3);
}

/* === 模态框 === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(4px);
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn var(--t-base);
}

.modal {
  background: var(--grad-panel);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(232,169,48,0.2);
  padding: 20px;
  min-width: 280px;
  max-width: 92vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), var(--shadow-inset);
  animation: modalIn var(--t-base);
}

@keyframes modalIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal__title {
  font-size: var(--text-xl);
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  color: var(--color-primary-light);
  text-shadow: 0 0 8px rgba(232,169,48,0.3);
}

.modal__body { margin-bottom: 16px; }
.modal__footer {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* === Toast === */
.toast-container {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.toast {
  padding: 8px 16px;
  background: rgba(0,0,0,0.85);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: 1px solid rgba(255,255,255,0.08);
  animation: toastIn var(--t-base);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
}

.toast--success { border-color: var(--text-green); color: var(--text-green); }
.toast--error { border-color: var(--text-red); color: var(--text-red); }
.toast--info { border-color: var(--text-blue); color: var(--text-blue); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* === 标签页 === */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.tab.active {
  color: var(--color-primary-light);
  background: rgba(232,169,48,0.1);
  box-shadow: var(--shadow-inset);
}

/* === 空状态 === */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state__icon {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* === 加载 === */
.loading__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bg-panel-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* === 徽章 === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: bold;
}

/* === 分割线 === */
.divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 10px 0;
}

/* === 数值条 === */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--text-sm);
}

.stat-label { color: var(--text-muted); }
.stat-value { font-weight: 600; }

/* === 淬炼槽 === */
.refine-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all var(--t-fast);
  font-size: 11px;
  text-align: center;
}

.refine-slot.empty {
  color: var(--text-muted);
  justify-content: center;
}

.refine-slot:active {
  transform: scale(0.96);
  background: rgba(0,0,0,0.5);
}


/* === 背包格子 === */
.inv-slot{aspect-ratio:1;background:var(--grad-card);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast);position:relative;overflow:hidden;}
.inv-slot:active{transform:scale(0.92);}
.inv-slot--empty{background:rgba(0,0,0,0.2);border:1px dashed rgba(255,255,255,0.04);cursor:default;}
.inv-count{position:absolute;bottom:1px;right:2px;font-size:9px;font-weight:bold;color:var(--text-gold);text-shadow:0 1px 2px #000;background:rgba(0,0,0,0.6);padding:0 3px;border-radius:2px;}
.inv-name{font-size:8px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}


/* === 特权卡标签 === */
.card-tab{flex:1;padding:6px 4px;text-align:center;font-size:11px;color:var(--text-muted);cursor:pointer;transition:all var(--t-fast);border-radius:4px;border-bottom:2px solid transparent;}
.card-tab.active{color:var(--color-primary-light);}
.card-tab:active{transform:scale(0.95);}


/* === 武将详情视图（G1：列表/详情两态，渲染在 #screen-character 内部） === */
.char-detail-view {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.char-detail-view__hero {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.char-detail-view__tabs {
  margin-bottom: 8px;
}

.char-detail-view__section {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

/* === 阵容两列纵排（F2：前排 1/2 靠敌，后排 3/4/5 靠己方；下标=position） === */
.team-cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
}

.team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 96px;
}

.team-col__label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.team-col__arrow {
  color: var(--text-gold);
  font-size: 16px;
  align-self: center;
  margin-top: 26px;
}

.team-cols__ops {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.team-slot-v2 {
  position: relative;
  width: 92px;
  height: 74px;
  border-radius: 8px;
  background: #101826;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.team-slot-v2:active { transform: scale(0.95); }

.team-slot-v2.empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.18);
  background: transparent;
}

.team-slot-v2__pos {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 9px;
  color: var(--text-muted);
}

.team-slot-v2__ava {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.team-slot-v2.empty .team-slot-v2__ava { color: #4a5568; font-weight: 400; }

.team-slot-v2__name {
  max-width: 86px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-slot-v2.empty .team-slot-v2__name { color: #4a5568; }

.team-slot-v2__meta { font-size: 9px; color: var(--text-gold); }

/* 换位模式：可选槽位提示 + 第一个选中槽位高亮 */
.team-slot-v2--swapping { outline: 1px dashed var(--text-gold); outline-offset: 1px; }

.team-slot-v2--pick {
  border-color: var(--text-gold);
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

/* 详情“上阵”选位弹窗里的缩小号位块 */
.team-slot-v2--mini { width: 84px; height: 52px; }
.team-slot-v2--mini .team-slot-v2__ava { font-size: 15px; }
.team-slot-v2--mini .team-slot-v2__name { font-size: 10px; color: var(--text-primary); }
.team-slot-v2--mini .team-slot-v2__meta { font-size: 8px; color: var(--text-muted); }

/* 选位弹窗层级高于详情页（详情已内嵌在 #screen-character，非浮层） */
.modal-overlay--above { z-index: calc(var(--z-modal) + 20); }