@charset "utf-8";

/* ========== 基础样式 ========== */
/* 全局和基础样式 */
body {
  font-family: "HarmonyOS_Medium", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease
}

body.modal-open {
  overflow: hidden
}

/* 为所有模态框添加滚动抑制，防止滚动穿透到body */
#modal,
#filters-modal,
#help-modal,
#skill-type-help-modal,
#import-settings-modal,
#export-settings-modal,
#multi-select-modal,
#lb-talent-help-modal,
#summon-summary-modal {
  overscroll-behavior: contain
}

/* 容器布局 */
.main-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box
}

/* ========== 头部样式 ========== */
header {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline);
  position: relative;
  z-index: 20
}

.header-top-row {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 0.5rem
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  color: var(--md-sys-color-primary);
  font-weight: 700
}

header h1 a,
.header-info-content a {
  color: inherit;
  text-decoration: none
}

.header-info-content a:hover {
  text-decoration: underline
}

.header-buttons {
  /* 使用 grid 布局来实现每行5个 */
  display: grid;
  /* 设置每列的宽度，确保其在桌面端可以正确排列 */
  grid-template-columns: repeat(5, minmax(40px, 1fr));
  gap: 15px;
  /* 设置按钮之间的间距 */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translatey(-40%)
}


.header-info-container {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto
}

.header-info-content {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap
}

.header-info-footer {
  font-size: 0.8em;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 6px
}

header p {
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface);
  margin-top: 0.5rem
}

#last-updated {
  font-size: 0.8em;
  color: var(--md-sys-color-outline);
  margin-top: 0.8rem
}

/* ========== 按钮和切换控件 ========== */
.theme-toggle-btn,
.lang-toggle-btn {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15)
}

.theme-toggle-btn {
  font-size: 1.2rem
}

.lang-toggle-btn {
  font-size: 1.1rem;
  font-weight: bold
}

.lang-toggle-btn:hover,
.theme-toggle-btn:hover {
  background-color: var(--md-sys-color-primary-container)
}

body[data-lang="cn"] .lang-toggle-btn .lang-tc {
  display: none
}

body[data-lang="tc"] .lang-toggle-btn .lang-cn {
  display: none
}

html.dark-theme .sun-icon {
  display: none
}

html:not(.dark-theme) .moon-icon {
  display: none
}

.secondary-button {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant)
}

.secondary-button:hover {
  filter: brightness(0.9)
}

.action-button {
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container)
}

.action-button:hover {
  filter: brightness(0.9);
  transform: translatey(-1px)
}

.action-button-right {
  flex: 1;
  border: 1px solid var(--md-sys-color-outline);
  border-left: none;
  padding: 0 1rem;
  height: 37px;
  border-radius: 0 6px 6px 0;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  white-space: nowrap
}

.action-button-right:hover {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary)
}

.action-button.disabled {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-outline);
  cursor: not-allowed;
  pointer-events: none
}

.saved-team-row .action-button,
.saved-team-row .remove-team-btn {
  flex-shrink: 0;
  /* 核心修复：禁止按钮被压缩 */
}

/* ========== 筛选器样式 ========== */
.filters-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.filter-card {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 12px;
  background-color: var(--md-sys-color-surface);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  width: 100%
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: var(--md-sys-color-surface-variant);
  cursor: pointer;
  border-bottom: 1px solid var(--md-sys-color-outline);
  transition: background-color 0.2s ease
}

.filter-header:hover {
  background-color: var(--md-sys-color-primary-container)
}

.filter-title-container {
  display: flex;
  align-items: center;
  gap: 10px
}

.filter-header h2 {
  margin: 0;
  font-size: 1.3em;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600
}

.filter-content {
  padding: 1rem;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
  overflow: hidden;
  max-height: 1500px;
  opacity: 1
}

.filter-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem
}

.filter-item label {
  width: 200px;
  min-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-right: 0.5rem
}

.filter-item label[for="name-input"] {
  width: 70px;
  min-width: 70px;
}

.filter-item .input-with-help {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 8px
}

.filter-item .input-with-help select {
  flex-grow: 1
}

.filter-item input,
.filter-item select {
  flex-grow: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--md-sys-color-outline);
  font-size: 0.9em;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-background);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  height: 37px
}

.filter-item input:focus,
.filter-item select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
  outline: none
}

.filter-card select {
  text-align: center;
  text-align-last: center
}

.stat-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--md-sys-color-outline)
}

.filter-item-compact {
  display: flex;
  flex-direction: column;
  align-items: center
}

.filter-item-compact label {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant)
}

#power-input,
#attack-input,
#defense-input,
#health-input {
  text-align: center;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box
}

/* 隐藏数字输入框的上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type="number"] {
  -moz-appearance: textfield
}

.filter-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-bottom: 0.8rem
}

/* ========== 结果表格样式 ========== */
#results-wrapper {
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  scrollbar-gutter: stable;
  /* 【新增修复】为表格容器也预留滚动条空间，防止其跳动 */
}

.results-header {
  text-align: center;
  font-size: 1.4rem;
  color: var(--md-sys-color-primary);
  font-weight: 600;
  position: sticky;
  top: 0;
  background-color: var(--md-sys-color-background);
  z-index: 11;
  border-bottom: 1px solid var(--md-sys-color-outline);
  padding: 0.2rem 0
}

#results-count {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 1rem
}

#results-table-container {
  background-color: var(--md-sys-color-surface)
}

.empty-results-message {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1.1em
}

.manual-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed
}

.manual-table thead {
  position: sticky;
  z-index: 10
}

.manual-table th {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid var(--md-sys-color-outline);
  white-space: nowrap;
  position: relative;
  padding-right: 1.2em
}

.manual-table th:first-child,
.manual-table th:not(.sortable) {
  padding-right: 12px
}

.manual-table th.sortable {
  cursor: pointer;
  user-select: none
}

.manual-table th.sortable:hover {
  background-color: var(--md-sys-color-primary-container)
}

.manual-table th .sort-indicator {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 1em;
  text-align: left
}

.manual-table td {
  padding: 6px 10px;
  font-size: 13px;
  vertical-align: middle;
  word-break: break-word;
  border-bottom: 1px solid var(--md-sys-color-surface-variant)
}

.manual-table .table-row {
  cursor: pointer;
  transition: background-color 0.2s ease
}

.manual-table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02)
}

.manual-table .table-row:hover {
  background-color: var(--md-sys-color-primary-container)
}

.manual-table .hero-image {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: middle;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.3s ease
}

/* 表格列宽 */
.manual-table .col-fav {
  width: 3%;
  text-align: center
}

.manual-table .col-image {
  width: 4%;
  text-align: center
}

.manual-table .col-name {
  width: 11%;
  text-align: center
}

.manual-table .col-color {
  width: 5%;
  text-align: center
}

.manual-table .col-star {
  width: 4%;
  text-align: center
}

.manual-table .col-class {
  width: 6%;
  text-align: center
}

.manual-table .col-speed {
  width: 6%;
  text-align: center
}

.manual-table .col-power {
  width: 5%;
  text-align: center
}

.manual-table .col-attack {
  width: 5%;
  text-align: center
}

.manual-table .col-defense {
  width: 5%;
  text-align: center
}

.manual-table .col-health {
  width: 6%;
  text-align: center
}

.manual-table .col-types {
  width: 14%;
  white-space: normal;
  text-align: center
}

/* ========== 模态框样式 ========== */
#modal-overlay,
#filters-modal-overlay,
#help-modal-overlay,
#skill-type-help-modal-overlay,
#import-settings-modal-overlay,
#export-settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: opacity 0.3s ease
}

#help-modal-overlay,
#skill-type-help-modal-overlay,
#import-settings-modal-overlay,
#export-settings-modal-overlay {
  z-index: 1001;
}

#modal,
#filters-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-sys-color-surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 900px;
  width: 85%;
  max-height: 85vh;
  overflow-y: auto;
  transition: all 0.3s ease
}

#help-modal,
#skill-type-help-modal,
#import-settings-modal,
#export-settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-sys-color-surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 650px;
  width: 85%;
  max-height: 85vh;
  overflow-y: auto;
  transition: all 0.3s ease;
  padding: 2rem 2.5rem;
  box-sizing: border-box
}


#modal-content,
#filters-modal-content {
  padding: 0rem 2.5rem
}

.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden
}

#modal .details-header,
.filters-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline)
}

#modal .details-header h2,
.filters-modal-header h2 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--md-sys-color-primary);
  font-weight: 700
}

.details-header-buttons {
  display: flex;
  align-items: center
}

#modal .favorite-btn {
  background: var(--md-sys-color-surface-variant);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-right: 10px;
  padding: 0;
  line-height: 1;
  font-size: 1.5rem;
  color: var(--md-sys-color-on-surface-variant)
}

#modal .favorite-btn:hover {
  background-color: var(--md-sys-color-primary-container);
  transform: scale(1.1)
}

#modal .favorite-btn.favorited {
  background-color: #FFD700;
  color: var(--md-sys-color-on-primary)
}

#modal .favorite-btn.favorited:hover {
  filter: brightness(1.1)
}

#modal .share-btn {
  font-size: 1.2rem;
  background: var(--md-sys-color-surface-variant);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  transition: all 0.2s ease;
  margin-right: 10px
}

#modal .share-btn:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  transform: scale(1.1)
}

#modal .share-btn:disabled {
  background-color: var(--md-sys-color-secondary-container);
  cursor: default;
  transform: none
}

#modal .close-btn,
#filters-modal .close-btn,
#redeem-codes-modal .close-btn,
#import-settings-modal .close-btn,
#export-settings-modal .close-btn,
#multi-select-modal .close-btn {
  font-size: 1.2rem;
  background: var(--md-sys-color-surface-variant);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  transition: all 0.2s ease
}

#modal .close-btn:hover,
#filters-modal .close-btn:hover,
#redeem-codes-modal .close-btn:hover,
#import-settings-modal .close-btn:hover,
#export-settings-modal .close-btn:hover,
#multi-select-modal .close-btn:hover {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  transform: rotate(90deg)
}

/* 模态框内容样式 */
.hero-title-block {
  text-align: center;
  margin-bottom: 1.5rem
}

.hero-english-name {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 0 -0.25rem 0;
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: 0.5px
}

.hero-main-name {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--md-sys-color-primary);
  line-height: 1.2
}

.hero-alt-name {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0.1rem 0 0 0;
  color: var(--md-sys-color-on-surface-variant)
}

.hero-fancy-name {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--md-sys-color-on-secondary-container);
  margin: 0.5rem auto 0 auto;
  background-color: var(--md-sys-color-secondary-container);
  border: none;
  border-radius: 20px;
  padding: 0.4em 1.2em;
  display: table
}

#modal .details-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
  align-items: flex-start
}

#modal .details-top-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem
}

.details-core-settings-group .details-core-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  /* 微调内边距 */
  margin: -0.5rem -0.75rem 0.5rem -0.75rem;
  /* 利用负边距使其看起来像一个真正的头部 */
  border-bottom: 1px solid var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-variant)
}

.details-core-settings-group .details-core-settings-header h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600
}

/* 确保内容区域在折叠时正确隐藏 */
.details-core-settings-group .filter-content {
  padding: 0;
  /* 移除内边距，因为父元素已有 */
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
  overflow: hidden;
  max-height: 1500px;
  /* 足够大的高度 */
  opacity: 1
}

.details-core-settings-group .filter-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: -0.5rem;
  /* 折叠时移除间隙 */
}

#modal .hero-image-modal {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  border: 4px solid transparent;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out
}

.details-info-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  justify-content: flex-start
}

.hero-info-block {
  background-color: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.skill-types-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem
}

#modal .details-body h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--md-sys-color-primary-container)
}

#modal .details-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 1rem;
  background-color: var(--md-sys-color-surface-variant);
  padding: 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline)
}

#modal .details-stats-grid>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.2rem;
  border-radius: 6px;
  background-color: var(--md-sys-color-surface)
}

.details-core-settings-group {
  background-color: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  margin-top: 1rem;
  overflow: hidden
}

.details-core-settings-group h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  text-align: center
}

.details-core-settings-group .details-selectors {
  grid-template-columns: 1fr;
  gap: 0.25rem;
  margin-bottom: 0;
  margin-top: 0
}

.details-core-settings-group h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-align: center
}

#modal .metric-value-style {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  color: var(--md-sys-color-on-surface);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

#modal .details-selectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0;
  margin-top: 0
}

#modal .details-selector-item {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

#modal .details-selector-item label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
  text-align: left
}

#modal .details-selector-item select {
  background-color: var(--md-sys-color-background);
  /* 【修正】背景色与标准筛选框统一 */
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  text-align: center;
  text-align-last: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  /* 【修正】文字颜色也一并统一 */
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1em;
  cursor: pointer
}

html.dark-theme #modal .details-selector-item select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CCC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
}

#modal .details-selector-item select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
  outline: none
}

#modal .details-selector-item select:disabled {
  opacity: 0.5;
  cursor: not-allowed
}

/* 复用英雄详情页的样式以保持一致 */
.default-stat-selectors .details-selector-item {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

.default-stat-selectors {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
  text-align: center
}

.details-selector-item label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
  text-align: left
}

.default-stat-selectors .details-selector-item select {
  background-color: var(--md-sys-color-background);
  /* 【修正】背景色与标准筛选框统一 */
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  text-align: center;
  text-align-last: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  /* 【修正】文字颜色也一并统一 */
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1em;
  cursor: pointer
}

html.dark-theme .default-stat-selectors .details-selector-item select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CCC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
}

.default-stat-selectors .details-selector-item select:disabled {
  opacity: 0.5;
  cursor: not-allowed
}

/* 技能区域样式 */
#modal .details-bottom-section h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--md-sys-color-primary-container)
}

.skill-category-block {
  background-color: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem
}

.skill-category-block .uniform-style {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 0;
  margin-bottom: 0.75rem
}

.skill-category-block .uniform-style .skill-value {
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  font-style: normal
}

#modal .skill-list {
  margin: 0;
  padding-left: 10px;
  list-style: none;
  border-left: 3px solid var(--md-sys-color-primary-container)
}

#modal .skill-list li {
  padding: 0.5rem 0 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  word-break: break-word;
  list-style: none;
  border-bottom: 1px solid var(--md-sys-color-outline)
}

#modal .skill-list li:last-child {
  border-bottom: none
}

#modal .skill-list li i {
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9em
}

/* Container for the special skill icon and text */
.skill-header-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem
}

.special-skill-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0
}

.skill-name-speed-block .uniform-style {
  margin-top: 0;
  margin-bottom: 0.25rem
}

.skill-name-speed-block .uniform-style:last-child {
  margin-bottom: 0
}

.family-icon,
.class-icon,
.costume-icon,
.aether-power-icon,
.source-icon {
  height: 1.2em;
  width: 1.2em;
  object-fit: contain;
  vertical-align: -0.25em;
  /* 微调垂直对齐以更好地匹配文本 */
  margin-right: 2px;
  /* 图标与右侧文字的间距 */
}
.event-icon {
  height: 2em;
  width: 2em;
  object-fit: contain;
  vertical-align: -0.8em;
  /* 微调垂直对齐以更好地匹配文本 */
  margin-right: 2px;
  /* 图标与右侧文字的间距 */
}
.color-icon {
  height: 1.8em;
  width: 1.8em;
  object-fit: contain;
  vertical-align: -0.25em;
  /* 微调垂直对齐以更好地匹配文本 */
  margin-right: 2px;
  /* 图标与右侧文字的间距 */
}

.aether-power-icon,
.source-icon {
  margin-left: 2px
}

.costume-icon {
  height: 1.4em;
  width: 1.5em
}

.modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-sys-color-outline);
  padding-bottom: 2rem
}

.close-bottom-btn {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease
}

.close-bottom-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.05)
}

/* ========== 浮动操作按钮 ========== */
.floating-action-buttons {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px
}

#open-filters-btn {
  width: 60px;
  height: 60px;
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: 50%;
  border: none;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s ease
}

#open-filters-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.05)
}

/* ========== 页脚样式 ========== */
footer {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  padding: 15px 0;
  text-align: center;
  font-family: "Segoe UI", Roboto, sans-serif;
  margin-top: 2rem
}

footer div {
  max-width: 800px;
  margin: 0 auto
}

footer p {
  margin: 4px 0;
  font-size: 0.9em
}

footer .footer-credit {
  font-size: 0.8em;
  color: var(--md-sys-color-outline)
}



/* ========== 帮助模态框特定样式 ========== */
#help-modal h3,
#skill-type-help-modal h3 {
  font-size: 1.6rem;
  color: var(--md-sys-color-primary);
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center
}

#help-modal p,
#skill-type-help-modal p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--md-sys-color-on-surface)
}

#help-modal ul,
#skill-type-help-modal ul {
  list-style-type: none;
  padding: 0;
  margin-top: 1.5rem
}

#help-modal li,
#skill-type-help-modal li {
  margin-bottom: 1.2rem;
  padding: 0.8rem 0 0.8rem 1rem;
  border-left: 3px solid var(--md-sys-color-primary-container);
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 0 8px 8px 0
}

#help-modal code {
  background-color: var(--md-sys-color-surface);
  padding: 3px 7px;
  border-radius: 5px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.95em;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-tertiary)
}

#skill-type-help-modal strong {
  color: var(--md-sys-color-primary)
}

/* ========== 通缉任务表格特定样式 ========== */
.manual-table.wanted-mission-table {
  border-collapse: collapse;
  margin: 1.5rem auto;
  margin-top: 0;
  width: 95%;
  max-width: 850px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  table-layout: auto
}

.manual-table.wanted-mission-table th,
.manual-table.wanted-mission-table td {
  border: 1px solid var(--md-sys-color-outline);
  text-align: center;
  vertical-align: middle
}

.manual-table.wanted-mission-table th {
  font-size: 1.1rem;
  padding: 12px 8px;
  font-weight: 700
}

.manual-table.wanted-mission-table td {
  font-size: 1rem;
  padding: 12px 8px;
  line-height: 1.4
}

.manual-table.wanted-mission-table td:first-child,
.manual-table.wanted-mission-table th:first-child {
  font-weight: bold;
  background-color: var(--md-sys-color-surface-variant)
}

#show-farming-guide-btn {
  padding: 0;
  line-height: 1
}

#show-farming-guide-btn img {
  vertical-align: middle
}

/* ========== 材料指南表格样式 ========== */
.manual-table.farming-guide-table {
  width: 95%;
  max-width: 850px;
  margin: 1.5rem auto;
  margin-top: -1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-collapse: collapse;
  table-layout: auto
}

.manual-table.farming-guide-table th,
.manual-table.farming-guide-table td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  border-top: 1px solid var(--md-sys-color-outline);
  border-bottom: 1px solid var(--md-sys-color-outline);
  border-right: 1px solid var(--md-sys-color-outline);
  border-left: none
}

.manual-table.farming-guide-table th:first-child,
.manual-table.farming-guide-table td:first-child {
  position: sticky;
  left: -1px;
  z-index: 1;
  background-color: var(--md-sys-color-surface-variant)
}

.manual-table.farming-guide-table td.sticky-left.right-border-visible {
  border-right: 1px solid var(--md-sys-color-outline) !important
}

.manual-table.farming-guide-table th.sticky-left.right-border-visible {
  border-right: 1px solid var(--md-sys-color-outline) !important
}

.manual-table.farming-guide-table td {
  background-color: var(--md-sys-color-surface);
  padding: 10px 8px;
  font-size: 0.9rem
}

.manual-table.farming-guide-table thead th {
  z-index: 2;
  background-color: var(--md-sys-color-surface-variant);
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 8px
}

.manual-table.farming-guide-table td:first-child,
.manual-table.farming-guide-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--md-sys-color-surface-variant)
}

.manual-table.farming-guide-table thead th:first-child {
  z-index: 3
}

/* 材料指南表格悬浮高亮效果 */
.manual-table.farming-guide-table .highlight-cell {
  background-color: var(--md-sys-color-primary);
  color: #FFF;
  font-weight: bold
}

.manual-table.farming-guide-table th.highlight-axis,
.manual-table.farming-guide-table td.highlight-axis:first-child {
  background-color: var(--md-sys-color-primary);
  color: #FFF
}

.farm-item-image {
  height: 38px;
  object-fit: contain;
  vertical-align: middle
}

/* ========== 英雄头像辉光效果 ========== */
/* --- 红色发光 --- */
#modal .hero-avatar-container-modal.red-glow-border,
.manual-table .hero-avatar-container.red-glow-border,
.sim-hero-avatar-container.red-glow-border,
.saved-team-avatar-container.red-glow-border,
.featured-hero-slot .hero-avatar-container.red-glow-border,
#lottery-hero-display-area .summon-animation-element.red-glow-border,
.summary-hero-card.red-glow-border,
.summon-history-avatars .hero-avatar-container.red-glow-border {
  box-shadow: var(--hero-glow-red);
  border-color: var(--hero-color-red)
}

/* --- 蓝色发光 --- */
#modal .hero-avatar-container-modal.blue-glow-border,
.manual-table .hero-avatar-container.blue-glow-border,
.sim-hero-avatar-container.blue-glow-border,
.saved-team-avatar-container.blue-glow-border,
.featured-hero-slot .hero-avatar-container.blue-glow-border,
#lottery-hero-display-area .summon-animation-element.blue-glow-border,
.summary-hero-card.blue-glow-border,
.summon-history-avatars .hero-avatar-container.blue-glow-border {
  box-shadow: var(--hero-glow-blue);
  border-color: var(--hero-color-blue)
}

/* --- 绿色发光 --- */
#modal .hero-avatar-container-modal.green-glow-border,
.manual-table .hero-avatar-container.green-glow-border,
.sim-hero-avatar-container.green-glow-border,
.saved-team-avatar-container.green-glow-border,
.featured-hero-slot .hero-avatar-container.green-glow-border,
#lottery-hero-display-area .summon-animation-element.green-glow-border,
.summary-hero-card.green-glow-border,
.summon-history-avatars .hero-avatar-container.green-glow-border {
  box-shadow: var(--hero-glow-green);
  border-color: var(--hero-color-green)
}

/* --- 黄色发光 --- */
#modal .hero-avatar-container-modal.yellow-glow-border,
.manual-table .hero-avatar-container.yellow-glow-border,
.sim-hero-avatar-container.yellow-glow-border,
.saved-team-avatar-container.yellow-glow-border,
.featured-hero-slot .hero-avatar-container.yellow-glow-border,
#lottery-hero-display-area .summon-animation-element.yellow-glow-border,
.summary-hero-card.yellow-glow-border,
.summon-history-avatars .hero-avatar-container.yellow-glow-border {
  box-shadow: var(--hero-glow-yellow);
  border-color: var(--hero-color-yellow)
}

/* --- 紫色发光 --- */
#modal .hero-avatar-container-modal.purple-glow-border,
.manual-table .hero-avatar-container.purple-glow-border,
.sim-hero-avatar-container.purple-glow-border,
.saved-team-avatar-container.purple-glow-border,
.featured-hero-slot .hero-avatar-container.purple-glow-border,
#lottery-hero-display-area .summon-animation-element.purple-glow-border,
.summary-hero-card.purple-glow-border,
.summon-history-avatars .hero-avatar-container.purple-glow-border {
  box-shadow: var(--hero-glow-purple);
  border-color: var(--hero-color-purple)
}

/* --- 白色发光 --- */
#modal .hero-avatar-container-modal.white-glow-border,
.manual-table .hero-avatar-container.white-glow-border,
.sim-hero-avatar-container.white-glow-border,
.saved-team-avatar-container.white-glow-border,
.featured-hero-slot .hero-avatar-container.white-glow-border,
#lottery-hero-display-area .summon-animation-element.white-glow-border,
.summary-hero-card.white-glow-border,
.summon-history-avatars .hero-avatar-container.white-glow-border {
  box-shadow: var(--hero-glow-white);
  border-color: var(--hero-color-white)
}

/* --- 黑色发光 --- */
#modal .hero-avatar-container-modal.black-glow-border,
.manual-table .hero-avatar-container.black-glow-border,
.sim-hero-avatar-container.black-glow-border,
.saved-team-avatar-container.black-glow-border,
.featured-hero-slot .hero-avatar-container.black-glow-border,
#lottery-hero-display-area .summon-animation-element.black-glow-border,
.summary-hero-card.black-glow-border,
.summon-history-avatars .hero-avatar-container.black-glow-border {
  box-shadow: var(--hero-glow-black);
  border-color: var(--hero-color-black)
}

/* 亮色模式下为彩色文字添加黑色外描边以增加可读性 */
html:not(.dark-theme) .color-text-outlined {
  text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.4), 0.5px -0.5px 0 rgba(0, 0, 0, 0.4), -0.5px 0.5px 0 rgba(0, 0, 0, 0.4), 0.5px 0.5px 0 rgba(0, 0, 0, 0.4)
}

/* ========== 收藏按钮样式 ========== */
.favorite-toggle-icon {
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--md-sys-color-outline);
  transition: color 0.2s ease, transform 0.2s ease
}

.favorite-toggle-icon.favorited {
  color: #FFD700
}

.manual-table th.favorite-all-header.favorited {
  color: #FFD700
}

.favorite-toggle-icon:hover {
  transform: scale(1.2)
}

/* ========== 语言选择器样式 ========== */
.lang-selector-container {
  position: relative;
  display: inline-block
}

#lang-options {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 120px
}

#lang-options.hidden {
  display: none !important
}

.lang-option {
  padding: 10px 15px;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: 0.95rem;
  text-align: center;
  transition: background-color 0.2s ease
}

.lang-option:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container)
}

/* ========== 视觉上隐藏但对SEO和屏幕阅读器可见的文本 ========== */
.seo-text-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

/* ========== 模态框中可点击元素的悬浮/点击指示器样式 ========== */
h1.hero-main-name.skill-type-tag {
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 8px
}

h1.hero-main-name.skill-type-tag:hover {
  background-color: var(--md-sys-color-primary-container)
}

.uniform-style .skill-value.skill-type-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px
}

.hero-info-block.skill-type-tag,
.uniform-style .skill-type-tag,
.skill-types-container .skill-type-tag {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease
}

.hero-info-block.skill-type-tag:hover,
.uniform-style .skill-type-tag:hover,
.skill-types-container .skill-type-tag:hover {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  transform: translatey(-2px);
  box-shadow: 0 4px 8px var(--md-sys-color-shadow)
}

#modal .skill-list li.skill-type-tag {
  cursor: pointer;
  transition: background-color 0.2s ease
}

#modal .skill-list li.skill-type-tag:hover {
  background-color: var(--md-sys-color-primary-container)
}

/* ========== 重置筛选标签的样式 ========== */
.reset-tag {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle
}

.reset-tag:hover {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary);
  transform: translatey(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
}

/* ========== 用于堆叠模态框的更高层级 ========== */
#help-modal.stacked-modal,
#skill-type-help-modal.stacked-modal {
  z-index: 6003
}

#help-modal-overlay.stacked-modal-overlay,
#skill-type-help-modal-overlay.stacked-modal-overlay {
  z-index: 6002
}

/* ========== 日期筛选的容器和内联按钮/日期显示样式 ========== */
.input-with-right-button {
  display: flex;
  flex-grow: 1;
  align-items: center
}

.date-display-box {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--md-sys-color-outline);
  border-right: none;
  font-size: 0.9em;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-variant);
  text-align: center;
  box-sizing: border-box;
  height: 37px;
  line-height: 20px
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
  .main-container {
    padding: 0.5rem
  }

  .results-header {
    font-size: 1.1rem
  }

  header h1 {
    font-size: 1.6rem
  }

  .header-top-row {
    flex-direction: column;
    gap: 0.5rem
  }

  .header-buttons {
    position: static;
    transform: none
  }

  .filter-item {
    flex-direction: column;
    align-items: flex-start
  }

  .filter-item label {
    width: auto;
    min-width: auto;
    white-space: normal;
    margin-bottom: 5px
  }

  .filter-item .input-with-help {
    width: 100%
  }

  .filter-item .input-with-right-button {
    width: 100%
  }

  .default-stat-selectors {
    grid-template-columns: 1fr
  }

  #modal .details-selectors {
    grid-template-columns: 1fr
  }

  .manual-table .col-attack,
  .manual-table .col-defense,
  .manual-table .col-health,
  .manual-table .col-speed,
  .manual-table .col-class,
  .manual-table .col-types {
    display: none
  }

  .manual-table .col-fav {
    width: 10%
  }

  .manual-table .col-image {
    width: 15%
  }

  .manual-table .col-name {
    width: 35%;
    text-align: left
  }

  .manual-table .col-power {
    width: 15%
  }

  .manual-table .col-color {
    width: 15%
  }

  .manual-table .col-star {
    width: 10%
  }

  #modal,
  #filters-modal,
  #help-modal,
  #skill-type-help-modal {
    width: 90%
  }

  #modal-content,
  #filters-modal-content,
  #help-modal,
  #skill-type-help-modal {
    padding: 1.5rem 1rem
  }

  #modal .details-body {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  #modal .details-top-right {
    text-align: center
  }

  .details-info-line {
    justify-content: center
  }

  #modal .details-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  #modal .hero-image-modal {
    max-width: 150px;
    border-width: 3px
  }

  .skill-header-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem
  }

  /* 恢复技能类型标签容器为左对齐 */
  .skill-types-container {
    justify-content: center
  }

  .manual-table.wanted-mission-table {
    width: 100%;
    margin: 0.5rem auto;
    margin-top: 0;
    font-size: 0.8rem
  }

  .manual-table.wanted-mission-table th,
  .manual-table.wanted-mission-table td {
    padding: 8px 4px
  }

  .manual-table.wanted-mission-table th {
    font-size: 0.9rem
  }

  .manual-table.wanted-mission-table td {
    font-size: 0.85rem
  }

  .manual-table.wanted-mission-table th:first-child,
  .manual-table.wanted-mission-table td:first-child {
    width: 12%;
    min-width: 40px
  }

  .manual-table.farming-guide-table {
    width: 100%;
    margin: 0.5rem auto;
    margin-top: -1px
  }

  .manual-table.farming-guide-table td {
    padding: 6px 4px;
    font-size: 0.75rem
  }

  .manual-table.farming-guide-table th {
    padding: 8px 4px;
    font-size: 0.85rem
  }

  .farm-item-image {
    height: 28px
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.4rem
  }

  .filter-item label {
    font-size: 0.9em
  }

  .manual-table .hero-image {
    width: 28px;
    height: 28px
  }

  #modal h1.hero-name-modal {
    font-size: 1.8rem
  }

  #modal .stat-value {
    font-size: 1.5rem
  }
}

.filter-item label[for="name-input"] {
  text-align: center
}

@media (min-width: 769px) {
  #filters-modal .filters-grid {
    flex-direction: row;
    align-items: flex-start
  }

  #filters-modal .filter-card:first-child {
    flex: 0 0 40%
  }

  #filters-modal .filter-card:last-child {
    flex: 1
  }

  #filters-modal .toggle-button {
    display: none
  }

  #filters-modal .filter-header {
    cursor: default
  }

  #filters-modal .filter-header .filter-title-container {
    margin: 0 auto
  }

  #filters-modal .filter-header:hover {
    background-color: var(--md-sys-color-surface-variant)
  }

  #filters-modal .filter-content.collapsed {
    max-height: 1500px;
    opacity: 1;
    padding: 1rem;
    visibility: visible
  }

  /* 高级筛选 -> 列表默认属性设置: 桌面端改为3个一行，并调整比例 */
  .default-stat-selectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 新的2x2网格布局 */
    gap: 0.75rem;
    align-items: flex-start;
    /* 顶部对齐 */
  }

  #modal .details-selector-item label {
    text-align: center
  }

  .details-core-settings-group .details-selectors {
    grid-template-columns: 1fr
  }

  .details-core-settings-group .details-selectors .details-selector-item label {
    text-align: center;
    margin-right: 0
  }
}

/* ========== 分隔线 ========== */
hr.divider {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline);
  margin: 1.5rem 0
}

/* ========== 帮助按钮 ========== */
.help-btn {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  transition: all 0.2s ease;
  padding: 0
}

.help-btn:hover {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  transform: scale(1.1)
}

/* ========== 切换按钮 ========== */
.toggle-button {
  background: none;
  border: none;
  font-size: 1.1em;
  cursor: pointer;
  padding: 5px;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform 0.3s ease-in-out
}

.toggle-button.expanded {
  transform: rotate(180deg)
}

/* ========== 聊天模拟器 (Chat Simulator) 样式 (v3) ========== */
#chat-simulator-view {
  padding: 1rem;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden
}

.chat-simulator-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  height: 100%
}

.chat-simulator-panel {
  background-color: var(--md-sys-color-surface);
  border-radius: 12px;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease-in-out
}

.chat-simulator-panel h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--md-sys-color-primary);
  text-align: center;
  border-bottom: 1px solid var(--md-sys-color-outline);
  padding-bottom: 0.75rem;
  flex-shrink: 0;
  position: relative;
  user-select: none
}

/* --- 面板布局顺序 --- */
.chat-panel-io {
  order: 1;
  flex: 5;
  min-width: 320px
}

.chat-panel-colors {
  order: 2;
  flex: 3;
  min-width: 220px
}

.chat-panel-emojis {
  order: 3;
  flex: 4;
  min-width: 250px
}

/* --- 左侧 (新)：输入/输出面板 --- */
#chat-simulator-preview-wrapper {
  flex-grow: 1;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow-y: auto;
  padding: 1rem;
  box-sizing: border-box;
  min-height: 150px;
  /* 最小高度 */
  border: 1px solid var(--md-sys-color-outline);
  background: linear-gradient(to right, #2a557d, #2e5b81 50%, #2a557d)
}

#chat-simulator-preview {
  color: white;
  font-size: 14px;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.1rem;
  /* 添加黑色描边 */
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
}

#chat-simulator-input {
  height: 120px;
  resize: vertical;
  margin-bottom: 1rem;
  flex-shrink: 0
}

/* --- 中间 (新)：颜色选择器面板 --- */
#custom-color-picker {
  position: relative;
  width: 100%;
  padding-top: 75%;
  margin-bottom: 1rem;
  display: flex;
  user-select: none
}

#sv-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 30px;
  bottom: 0;
  cursor: crosshair;
  background-image: linear-gradient(to right, white, transparent), linear-gradient(to top, black, transparent)
}

#hue-slider {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  bottom: 0;
  cursor: pointer;
  background: linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)
}

#sv-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px black, inset 0 0 0 1.5px black;
  pointer-events: none;
  transform: translate(-50%, -50%)
}

#hue-cursor {
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0;
  border: 2px solid white;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transform: translatey(-50%);
  background-color: transparent;
  box-sizing: border-box
}

/* --- 颜色控件样式更新 (v3 - 均分宽度 & 样式统一) --- */
/* --- 颜色控件样式更新 (最终对齐修复版 v2) --- */
#color-controls-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 1rem
}

#color-preview-box {
  width: 40px;
  height: 40px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  flex-shrink: 0
}

#color-input-group {
  display: flex;
  flex-grow: 1;
  align-items: stretch
}

/* 核心修复：直接在所有子项上强制设定高度，消除歧义 */
#color-input-group>* {
  flex: 1;
  height: 40px;
  /* 强制所有项目高度一致 */
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline);
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

#color-hex-code {
  text-align: center;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  border-radius: 8px 0 0 8px;
  min-width: 60px
}

#insert-color-btn,
.chat-favorite-btn {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem;
  border-left: none;
  display: flex;
  justify-content: center;
  align-items: center
}

#insert-color-btn:hover,
.chat-favorite-btn:hover {
  background-color: var(--md-sys-color-primary-container)
}

#insert-color-btn {
  border-radius: 0
}

.chat-favorite-btn {
  border-radius: 0 8px 8px 0;
  font-size: 1.5rem
}

/* --- 已收藏颜色区域样式更新 (移除滚动条) --- */
#favorite-colors-container {
  margin-top: 1rem;
  border-top: 1px solid var(--md-sys-color-outline);
  padding-top: 1rem;
  width: 100%;
  /* 移除 flex-grow 和 overflow:hidden，允许其自由扩展高度 */
}

#favorite-colors-container h4 {
  margin: 0 0 0.75rem 0;
  text-align: center;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant)
}

#favorite-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  gap: 10px;
  padding: 5px;
  /* 移除 overflow-y: auto，不再出现滚动条 */
}

.favorite-color-item {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--md-sys-color-outline);
  transition: transform 0.2s
}

.favorite-color-item:hover {
  transform: scale(1.1)
}

.remove-favorite-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: scale(0.8);
  pointer-events: none
}

@media (min-width: 901px) {
  .favorite-color-item:hover .remove-favorite-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto
  }
}

.favorite-color-item.show-remove .remove-favorite-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto
}

/* --- 右侧 (新)：表情面板 --- */
#emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 12px;
  justify-items: center;
  overflow-y: auto;
  padding: 5px
}

#emoji-grid img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s
}

#emoji-grid img:hover {
  transform: scale(1.2)
}

/* --- 移动端折叠/展开功能 --- */
.panel-toggle-btn {
  display: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  background: none;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  transition: transform 0.3s ease
}

.panel-toggle-btn.expanded {
  transform: translatey(-50%) rotate(180deg)
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
  .chat-simulator-container {
    flex-direction: column;
    overflow-y: auto
  }

  .chat-simulator-panel {
    min-width: unset;
    min-height: auto;
    transition: all 0.3s ease-in-out;
    flex-shrink: 0;
    resize: none !important;
    /* 移动端禁用resize */
  }

  .chat-panel-io {
    order: 1;
    min-height: 300px
  }

  .chat-panel-colors {
    order: 2
  }

  .chat-panel-emojis {
    order: 3
  }

  /* 使标题栏可点击 */
  .chat-panel-colors>h3,
  .chat-panel-emojis>h3 {
    cursor: pointer
  }

  /* 显示折叠按钮 */
  .panel-toggle-btn {
    display: block
  }

  /* 核心修复：折叠状态下的样式 */
  .chat-simulator-panel.collapsed .panel-content {
    display: none;
    /* 直接隐藏内容包裹层 */
  }

  .chat-simulator-panel.collapsed {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 1px;
    /* 保持边框一致性 */
  }

  .chat-simulator-panel.collapsed>h3 {
    margin-bottom: 0;
    border-bottom: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
  }
}

#io-splitter {
  height: 6px;
  /* 分割条高度 */
  background-color: var(--md-sys-color-outline);
  /* 使用主题颜色 */
  border-radius: 3px;
  cursor: ns-resize;
  /* 显示南北向拖拽光标 */
  flex-shrink: 0;
  /* 防止被压缩 */
  margin: 5px 0;
  /* 上下留出一些间距 */
  transition: background-color 0.2s
}

#io-splitter:hover {
  background-color: var(--md-sys-color-primary);
  /* 悬浮时高亮 */
}

/* ==========================================================================
   新增：全局天赋筛选控件的布局微调
   ========================================================================== */
/* 确保在移动设备上，标签在控件上方显示 */
@media (max-width: 768px) {
  .global-talent-settings-wrapper .filter-item {
    flex-direction: column;
    align-items: flex-start
  }

  .global-talent-settings-wrapper .filter-item label {
    width: auto;
    min-width: auto;
    margin-bottom: 5px
  }
}

/* 在桌面端，让标签和控件在同一行对齐 */
@media (min-width: 769px) {
  .global-talent-settings-wrapper .filter-item {
    display: flex;
    align-items: center
  }

  .global-talent-settings-wrapper .filter-item label {
    width: 40%;
    /* 给予标签固定宽度比例 */
    flex-shrink: 0
  }

  .global-talent-settings-wrapper .details-selector-item,
  .global-talent-settings-wrapper .checkbox-container {
    width: 60%;
    /* 让控件占据剩余空间 */
  }
}

.details-selector-item .input-with-help {
  display: flex;
  align-items: center;
  gap: 8px
}

#lb-talent-help-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-sys-color-surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 6001;
  max-width: 650px;
  width: 85%;
  max-height: 85vh;
  overflow-y: auto;
  transition: all 0.3s ease;
  padding: 2rem 2.5rem;
  box-sizing: border-box
}

#lb-talent-help-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 6000;
  cursor: pointer;
  transition: opacity 0.3s ease
}

#lb-talent-help-modal.stacked-modal {
  z-index: 6003
}

#lb-talent-help-modal-overlay.stacked-modal-overlay {
  z-index: 6002
}

#lb-talent-help-modal h3 {
  font-size: 1.6rem;
  color: var(--md-sys-color-primary);
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center
}

#lb-talent-help-modal p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--md-sys-color-on-surface)
}

#lb-talent-help-modal a {
  color: var(--md-sys-color-primary);
  text-decoration: underline
}

/* ==========================================================================
   新增：自定义图片下拉框样式 (方案一)
   ========================================================================== */
/* 自定义下拉框的容器 */
.custom-select-container {
  position: relative;
  width: 100%;
  height: 37px;
  /* 与原生输入框高度保持一致 */
  user-select: none
}

/* 显示当前选中项的区域 */
.select-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--md-sys-color-background);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.select-selected.select-arrow-active {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container)
}

.select-selected .selected-text {
  flex-grow: 1;
  text-align: center
}

/* 选项列表 (默认隐藏) */
.select-items {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* right: 0; */
  /* <--- 移除 right: 0 */
  z-index: 1050;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 250px;
  overflow-y: auto;
  /* --- 新增/修改下面三行 --- */
  min-width: 100%;
  /* 最小宽度与父容器一致 */
  width: auto;
  /* 宽度由内容决定 */
  white-space: nowrap;
  /* 确保选项列表内的文本不换行 */
}

.select-hide {
  display: none
}

/* 单个选项 */
.select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s
}

.select-option:hover {
  background-color: var(--md-sys-color-primary-container)
}

.select-option.same-as-selected {
  background-color: var(--md-sys-color-secondary-container)
}

/* 选项中的图标样式 */
.option-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0
}

/* 原生select框隐藏样式 */
select.custom-select-hidden {
  display: none !important
}

/* ==========================================================================
   新增：多选模态框与筛选按钮样式
   ========================================================================== */
/* 筛选按钮样式 */
.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 8px 15px;
  /* 可以适当增加左右内边距 */
  box-sizing: border-box;
  background-color: var(--md-sys-color-background);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  /* 可以使用更圆润的胶囊形状 */
  color: var(--md-sys-color-on-surface);
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  /* 移除 width: 100%，让宽度由内容决定 */
  flex-shrink: 0;
  /* 防止按钮在 flex 布局中被压缩 */
  white-space: nowrap;
  /* 确保按钮内部文本不换行 */
}

.filter-button:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container)
}

/* 当有选项被选中时，按钮的高亮状态 */
.filter-button.active {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
  font-weight: bold
}

/* 多选模态框基础样式 (类似帮助模态框) */
#multi-select-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1010;
  /* 比主模态框高 */
}

#multi-select-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-sys-color-surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1011;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  /* --- ↓↓↓ 核心修改如下 ↓↓↓ --- */
  width: max-content;
  /* 关键属性：让宽度由其最长的内容决定 */
  min-width: 300px;
  /* 设置一个最小宽度，防止内容过短时变得太窄 */
  max-width: 700px;
  /* 保持最大宽度限制，防止内容过长时撑破屏幕 */
}

#multi-select-modal-content {
  padding: 1.5rem 2rem;
  overflow-y: auto;
  flex-grow: 1
}

/* 模态框内部样式 */
.multi-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem
}

.multi-select-header h3 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--md-sys-color-primary)
}

.multi-select-header .close-btn {
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px
}

.multi-select-options-grid {
  display: flex;
  /* 将布局从 grid 改为 flex */
  flex-wrap: wrap;
  /* 允许选项自动换行 */
  gap: 0.75rem;
  /* 保持选项之间的间距 */
  margin-bottom: 1.5rem
}

.multi-select-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--md-sys-color-surface-variant)
}

.multi-select-option:hover {
  border-color: var(--md-sys-color-primary)
}

.multi-select-option.selected {
  border-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary-container);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3)
}

.multi-select-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0
}

.multi-select-option span {
  font-weight: 500
}

.multi-select-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-sys-color-outline)
}

.multi-select-footer .action-button {
  padding: 0.8rem 1.5rem
}

.filter-buttons-container {
  display: grid;
  /* 关键：使用 Grid 布局 */
  gap: 10px;
  /* 按钮之间的间距 */
  /* 核心魔法：创建自适应列，并让它们自动填充可用空间 */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
}

.filter-buttons-container .filter-button.checkbox-wrapper {
  padding: 0;
  border: none;
  background-color: transparent
}

.filter-buttons-container .checkbox-container {
  width: 100%;
  height: 37px;
  /* 与其他筛选按钮高度保持一致 */
}

.filter-buttons-container .checkbox-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  /* 保持与 .filter-button 相同的内边距 */
  font-size: 0.9em;
  font-weight: normal;
  /* 默认状态下非粗体 */
}

.filter-buttons-container input[type="checkbox"]:checked+.checkbox-label {
  font-weight: bold;
  /* 仅在选中时加粗 */
}

/* 针对移动设备（屏幕宽度 <= 768px）的样式调整 */
@media (max-width: 768px) {
  .multi-select-options-grid {
    display: block;
    /* 恢复块级显示，让每个选项独占一行 */
  }

  #multi-select-modal {
    /* 在移动端，恢复为相对宽度，确保它不会超出屏幕 */
    width: 90%;
    min-width: unset;
    /* 取消最小宽度限制 */
  }

  .multi-select-option {
    display: flex;
    /* 保持内部元素的 flex 布局 */
    width: 100%;
    /* 让每个选项占据整行宽度 */
    margin-bottom: 5px;
    /* 可以添加一些垂直间距 */
  }
}

/* ========== 队伍抽奖模拟器样式 (修正版) ========== */
/* 队伍模拟器模式下浮动按钮的提示退出样式 */
#show-team-simulator-btn.simulator-exit-btn,
#show-lottery-simulator-btn.simulator-exit-btn {
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error)
}

#show-team-simulator-btn.simulator-exit-btn:hover,
#show-lottery-simulator-btn.simulator-exit-btn:hover {
  background-color: var(--md-sys-color-error-container);
  filter: brightness(1.1);
  transform: scale(1.05)
}

/* 修正：为最外层容器设置最小高度，以解决遮挡下方列表的问题 */
#team-simulator-display {
  width: 66.67%;
  margin-bottom: 1rem
}

/* 修改 #team-display-grid 以容纳新的汇总行 */
#team-display-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto auto auto;
  /* 为汇总行增加第四行 */
  gap: 5px;
  position: relative
}

/* 英雄头像插槽样式 */
.team-hero-slot {
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: 8px;
  height: 62px;
  /* 固定头像区域高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 为交换图标定位 */
}

.team-hero-slot.filled {
  border-color: transparent
}

/* V形布局定位 */
.team-hero-slot[data-pos="1"] {
  grid-area: 1/1
}

.team-hero-slot[data-pos="2"] {
  grid-area: 2/2
}

.team-hero-slot[data-pos="3"] {
  grid-area: 3/3
}

.team-hero-slot[data-pos="4"] {
  grid-area: 2/4
}

.team-hero-slot[data-pos="5"] {
  grid-area: 1/5
}

/* 英雄信息卡片（名字、属性、技能）的容器 */
.team-info-slot {
  position: absolute;
  padding: 8px;
  cursor: pointer;
  width: calc(20% - 10px);
  z-index: 5
}

/* V形布局的绝对定位 */
.team-info-slot[data-info-pos="1"] {
  top: 65px;
  left: 0
}

.team-info-slot[data-info-pos="2"] {
  top: 130px;
  left: 20%
}

.team-info-slot[data-info-pos="3"] {
  top: 195px;
  left: 40%
}

.team-info-slot[data-info-pos="4"] {
  top: 130px;
  left: 60%
}

.team-info-slot[data-info-pos="5"] {
  top: 65px;
  left: 80%
}

/* 英雄头像图片 */
.team-hero-avatar {
  width: 60px;
  height: 60px;
  border-radius: 4px
}

/* 1. 英雄名字居中显示 */
.team-hero-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center
}

/* 2. 四项属性以2x2格式排列 */
.team-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 两列 */
  gap: 4px 10px;
  /* 行、列间距 */
  font-size: 12px;
  margin-bottom: 8px
}

.team-hero-stats span {
  text-align: left;
  /* 属性文字本身左对齐 */
}

/* 技能文本样式 */
.team-hero-skills {
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.4;
  text-align: left
}

/* 交换/移除图标样式 */
.hero-action-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10
}

.hero-action-icon:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1)
}

/* 新增：队伍标签汇总容器的定位和样式 */
#team-tags-summary-container {
  grid-column: 1/-1;
  /* 关键：使其横跨所有5列 */
  grid-row: 4;
  /* 关键：将其放置在第四行 */
  padding: 1rem;
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: 8px;
  min-height: 50px;
  /* 使用Flex布局来排列内部标签 */
  display: none;
  /* 初始隐藏，由JS在有英雄时显示 */
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center
}

/* 之前添加的、现在依然正确的单个标签样式 */
.team-tag-item {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
  display: inline-flex;
  align-items: center
}

.team-tag-item .tag-count {
  font-weight: bold;
  color: var(--md-sys-color-primary);
  font-size: 1.1em;
  margin-left: 4px
}

.no-tags-message {
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic
}

/* 针对移动设备（屏幕宽度 <= 768px）的样式调整 */
@media (max-width: 768px) {
  #team-simulator-display {
    width: 100%;
    margin-bottom: 1rem
  }

  /* 新增：让英雄名字在小屏幕上可以正常换行 */
  .team-hero-name {
    white-space: normal;
    /* 允许自动换行 */
    word-wrap: break-word;
    /* 强制长单词或无空格文本换行 */
  }

  /* 新增：将属性显示改为单列（一行一条） */
  .team-hero-stats {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 2px
  }

  /* 新增：在移动端调整汇总区域的上边距 */
  #team-tags-summary-container {
    /* 增加上边距，确保其显示在所有英雄信息卡片的下方 */
  }
}

/* 【新增】队伍模拟器最外层容器，使用Flex布局 */
#team-simulator-wrapper {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  /* 顶部对齐 */
}

/* 【修改】调整原 #team-simulator-display 样式以适应Flex布局 */
#team-simulator-display {
  flex: 2;
  /* 占据约2/3宽度 */
  min-width: 0;
  /* Flex item 必备 */
  width: auto;
  margin-bottom: 0
}

/* 【新增】右侧面板容器 */
#saved-teams-panel {
  flex: 1;
  /* 占据约1/3宽度 */
  min-width: 0;
  /* Flex item 必备 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 450px;
  /* 与左侧高度匹配 */
}

/* 【新增】右侧面板中的按钮容器 */
.saved-teams-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0
}

.saved-teams-actions .action-button {
  flex-grow: 1;
  /* 让两个按钮平分空间 */
}

/* 【新增】已存队伍列表容器 */
#saved-teams-list-container {
  flex-grow: 1;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  padding: 1rem;
  overflow-y: auto;
  background-color: var(--md-sys-color-surface);
  display: flex;
  flex-direction: column
}

#saved-teams-list-container h4 {
  margin-top: 0;
  text-align: center;
  border-bottom: 1px solid var(--md-sys-color-outline);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0
}

#saved-teams-list {
  overflow-y: auto;
  /* 仅内容区滚动 */
}

/* 【新增】已存队伍的每一行样式 */
.saved-team-row {
  display: flex;
  align-items: flex-end;
  /* 【关键修改】改为底部对齐 */
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background-color: var(--md-sys-color-surface-variant);
  transition: background-color 0.2s;
  /* 其他样式保持不变 */
}

.saved-team-row:hover {
  background-color: var(--md-sys-color-primary-container)
}

/* 【新增】队名样式 */
.saved-team-name {
  font-weight: bold;
  margin-right: auto;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px
}

/* 【新增】英雄头像组样式 */
.saved-team-avatars {
  display: flex;
  gap: 4px
}

.saved-team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background-color: var(--md-sys-color-surface)
}

/* 【新增】导入按钮样式 */
.import-team-btn {
  padding: 4px 12px;
  font-size: 0.8rem;
  margin-left: 10px;
  flex-shrink: 0;
  /* 防止按钮被压缩 */
}

/* 【新增】移除按钮样式 */
.remove-team-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--md-sys-color-error);
  margin-left: 10px;
  padding: 0 5px;
  opacity: 0.5;
  transition: opacity 0.2s;
  flex-shrink: 0
}

.saved-team-row:hover .remove-team-btn {
  opacity: 1
}

/* 【新增】当行可点击时，改变鼠标指针 */
.saved-team-row.is-clickable {
  cursor: pointer
}

/* 【修改】增强悬停效果 */
.saved-team-row:hover {
  background-color: var(--md-sys-color-primary-container)
}

/* 针对移动设备（屏幕宽度 <= 900px）的样式调整 */
@media (max-width: 768px) {
  #team-simulator-wrapper {
    flex-direction: column
  }

  #saved-teams-panel {
    width: 100%;
    height: auto;
    /* 高度自适应 */
  }
}

/* 【新增】标签页系统样式 */
.saved-teams-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  margin-bottom: 0.5rem
}

.tab-button {
  background: none;
  border: none;
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease-in-out
}

.tab-button:hover {
  background-color: var(--md-sys-color-surface-variant)
}

.tab-button.active {
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
  font-weight: bold
}

/* 【新增】队伍列表新布局样式 */
.saved-team-row {
  /* 修改为 flex 布局，以对齐内容和旁边的按钮 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* 内容和按钮之间的间距 */
}

.team-row-main-content {
  /* 这个新容器将用于容纳队名和头像 */
  flex-grow: 1;
  /* 让它占据所有可用空间 */
  display: flex;
  flex-direction: column;
  /* 设置为垂直（列）布局 */
  gap: 0.3rem;
  /* 队名和头像之间的垂直间距 */
  min-width: 0;
  /* 防止内容过长时破坏布局 */
}

.saved-team-name {
  /* 调整队名样式以适应新布局 */
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 移除旧的、不再需要的样式 */
  max-width: none;
  margin-right: 0
}

/* =================================== */
/* 折叠功能样式 (视觉优化版) */
/* =================================== */
.saved-teams-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.saved-teams-tabs {
  border-bottom: none;
  /* 移除标签页自身的边框，统一由header管理 */
  margin-bottom: 0
}

.collapse-arrow {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z' fill='%23666'%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  /* 默认在桌面端隐藏 */
  display: none;
  margin-right: 0.75rem;
  /* 给箭头一些右边距 */
  flex-shrink: 0;
  /* 防止箭头被压缩 */
  transform: rotate(-180deg)
}

/* 当列表收起时，箭头旋转朝上 */
#saved-teams-list-container.collapsed .collapse-arrow {
  transform: rotate(0deg)
}

/* =================================== */
/* 移动端响应式布局 (Mobile Responsive Layout) */
/* =================================== */
/* 在屏幕宽度小于 900px 时应用此样式 */
@media (max-width: 768px) {

  /* --- 已有的移动端堆叠布局 --- */
  #team-simulator-wrapper {
    flex-direction: column;
    gap: 1.5rem
  }

  #team-simulator-display {
    width: 100%;
    flex: none
  }

  #saved-teams-panel {
    width: 100%;
    height: auto;
    flex: none
  }

  /* -------------------------- */
  /* 【核心】让整个面板在移动端看起来像一个卡片 */
  #saved-teams-list-container {
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    overflow: hidden;
    /* 隐藏内部溢出的圆角 */
  }

  /* 【核心】让标题栏在移动端看起来像一个清晰的可点击区域 */
  .saved-teams-header {
    cursor: pointer;
    padding: 0.25rem 0;
    background-color: var(--md-sys-color-surface-container-high);
    /* 给它一个明确的背景色 */
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    transition: background-color 0.2s
  }

  /* 鼠标悬停时提供反馈 */
  .saved-teams-header:hover {
    background-color: var(--md-sys-color-surface-container-highest)
  }

  /* 在移动端显示箭头 */
  .collapse-arrow {
    display: block
  }

  /* 当折叠时，隐藏列表内容 */
  #saved-teams-list-container.collapsed #saved-teams-list {
    display: none
  }

  /* 当折叠时，标题栏的下边框也消失 */
  #saved-teams-list-container.collapsed .saved-teams-header {
    border-bottom-color: transparent
  }
}

/* =================================== */
/* 更新：阵容配置区与操作按钮联动折叠功能 */
/* =================================== */
/* 1. 默认在桌面端隐藏折叠头 */
#team-display-header {
  display: none
}

/* 2. 在移动端 (<= 900px) 应用折叠样式 */
@media (max-width: 768px) {

  /* 让主容器在移动端也是 flex-column，以便控制子元素 */
  #team-simulator-wrapper {
    flex-direction: column
  }

  /* 显示并设置折叠头样式 */
  #team-display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem 0.5rem;
    background-color: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 1rem;
    border-radius: 8px;
    user-select: none;
    width: 100%;
    /* 确保在 flex 布局中占满整行 */
    box-sizing: border-box;
    /* 包含内边距和边框 */
  }

  #team-display-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--md-sys-color-primary)
  }

  /* 箭头样式保持不变 */
  #team-display-header .collapse-arrow {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z' fill='%23666'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    transform: rotate(-180deg);
    /* 展开时，箭头朝上 */
  }

  /* 3. 【核心修改】折叠逻辑现在作用于 wrapper */
  #team-simulator-wrapper.collapsed #team-simulator-display,
  #team-simulator-wrapper.collapsed .saved-teams-actions {
    display: none
  }

  #team-simulator-wrapper.collapsed #team-display-header {
    margin-bottom: 0
  }

  #team-simulator-wrapper.collapsed #team-display-header .collapse-arrow {
    transform: rotate(0deg);
    /* 折叠时，箭头朝下 */
  }
}

/* =================================== */
/* 新增：阵容配置桌面/移动端标题控制 */
/* =================================== */
/* 1. 桌面端标题的样式：居中、设置字体和间距 */
.team-display-desktop-header {
  text-align: center;
  margin-bottom: 1rem
}

.team-display-desktop-header h3 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--md-sys-color-primary);
  font-weight: 600
}

/* 2. 响应式控制：在移动端 (<= 900px) 时 */
@media (max-width: 768px) {

  /* 隐藏桌面端标题 */
  .team-display-desktop-header {
    display: none
  }
}

/* --- 【更新】详情页天赋系统布局样式 --- */
/* 桌面端样式 (屏幕宽度大于 768px) */
@media (min-width: 769px) {

  /* 隐藏移动端专用的选项卡导航 */
  .mobile-tabs-container {
    display: none
  }

  /* 实现左右并排布局 */
  .desktop-side-by-side {
    display: flex;
    gap: 1rem
  }

  /* 让两个面板平分宽度 */
  .desktop-side-by-side>div {
    flex: 1;
    min-width: 0;
    /* 允许flex item收缩 */
  }

  /* 显示桌面版的区块标题 */
  .desktop-only-header {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--md-sys-color-outline)
  }
}

/* 移动端样式 (屏幕宽度小于等于 768px) */
@media (max-width: 768px) {

  /* 隐藏桌面版的区块标题 */
  .desktop-only-header {
    display: none
  }

  /* 显示并设置选项卡导航样式 */
  .mobile-tabs-container {
    display: flex;
    border-bottom: 1px solid var(--md-sys-color-outline)
  }

  .tab-link {
    flex: 1;
    padding: 0.75rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out
  }

  .tab-link.active {
    color: var(--md-sys-color-primary);
    border-bottom-color: var(--md-sys-color-primary);
    font-weight: 700
  }

  /* 默认隐藏所有选项卡内容 */
  .mobile-tab-content {
    display: none;
    padding-top: 1rem
  }

  /* 只显示激活的选项卡内容 */
  .mobile-tab-content.active {
    display: block
  }
}

/* 确保所有可折叠区块的标题样式统一 */
#modal-talent-system-wrapper .filter-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid var(--md-sys-color-outline)
}

#modal-talent-system-wrapper .filter-header h2 {
  flex-grow: 1;
  /* 让标题元素占据所有可用的弹性空间 */
  text-align: center;
  /* 将标题元素内部的文字居中 */
  margin: 0 1rem;
  /* 保证标题和两边的图标有一定间距 */
}

#modal-talent-system-wrapper .filter-header:first-child {
  border-top: none
}

#modal-talent-system-wrapper .filter-content.collapsed {
  display: none
}

/* --- 【新增】修复详情页内副标题（h3）不居中的问题 --- */
.desktop-only-header {
  text-align: center
}

/* --- 【新增】队伍模拟器换位模式下空槽位的样式 --- */
.team-hero-slot .empty-slot-target-icon {
  font-size: 2rem;
  color: var(--md-sys-color-primary);
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease
}

.team-hero-slot:hover .empty-slot-target-icon {
  opacity: 1
}

/* --- 动态DoT数值的高亮样式 --- */
.dynamic-value {
  color: #ff7800ff;
  font-weight: 700;
  /* 加粗显示 */
  padding: 1px 4px;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s
}

/* --- 模态框粘性头部和滚动按钮样式 --- */
#modal .details-header {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  top: 0;
  background-color: var(--md-sys-color-surface);
  z-index: 10;
  padding-top: 1.5rem;
  /* 增加顶部内边距，使其看起来不那么拥挤 */
}

.details-header-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 允许在小屏幕上换行 */
  gap: 1rem;
  flex-grow: 1
}

.details-header-main h2 {
  margin-right: auto;
  /* 将标题推到最左边 */
}

.scroll-to-section-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap
}

.scroll-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 16px;
  white-space: nowrap
}

/* 确保右侧的功能按钮（收藏、分享、关闭）对齐 */
.details-header-buttons {
  align-self: flex-start
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
  .details-header-main {
    flex-direction: column;
    align-items: flex-start;
    /* 移动端改为左对齐 */
    width: 100%;
    gap: 0.75rem
  }

  .details-header-main h2 {
    margin-right: 0
  }

  #modal .details-header {
    /* 用负边距抵消父容器的内边距，消除顶部滚动空间 */
    margin-top: -1.5rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 1.5rem;
    /* 保持与下方内容的间距 */
    /* 将内边距重新应用到头部自身，以保持内容对齐 */
    padding-top: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    /* 保持底部内边距 */
    /* 确保粘性定位在最顶部 */
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    /* 以下是确保样式正确的其他属性 */
    background-color: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline);
    z-index: 10;
    flex-direction: column;
    align-items: flex-start
  }

  .details-header-buttons {
    position: absolute;
    /* 将按钮移动到右上角 */
    top: 1.5rem;
    right: 1rem
  }
}

/* --- 英雄头像容器和背景样式 --- */
/* 表格中的头像容器 */
.hero-avatar-container {
  position: relative;
  width: 40px;
  /* 包含2px边框 */
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  border: 2px solid transparent;
  /* 关键：为边框和辉光提供占位 */
}

/* 详情框中的头像容器 */
.hero-avatar-container-modal {
  position: relative;
  width: 100%;
  max-width: 200px;
  border-radius: 8px;
  border: 2px solid transparent;
  /* 关键：为边框和辉光提供占位 */
  margin: 0 auto
}

.hero-avatar-container-modal::before {
  content: "";
  display: block;
  padding-top: 100%
}

/* 通用背景层样式 */
.hero-avatar-background,
.hero-avatar-background-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: inherit;
  /* 继承父容器的圆角 */
}

/* 通用图片层样式 */
.hero-avatar-image,
.hero-avatar-image-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  object-fit: cover;
  border-radius: inherit;
  /* 继承父容器的圆角 */
}

/* --- 英雄详情页头像覆盖层 (Overlays) 样式 --- */
.hero-avatar-overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  /* 确保在背景和图片之上 */
  pointer-events: none;
  /* 允许点击穿透到图片（如果需要）*/
}

.hero-avatar-overlays>* {
  pointer-events: auto;
  /* 让覆盖层内的具体元素可以响应事件 */
}

/* --- 新增：避免覆盖层加载时跳动 --- */
.hero-avatar-overlays.overlays-hidden {
  visibility: hidden;
  opacity: 0
}

.hero-avatar-overlays.overlays-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  /* 平滑的淡入过渡效果 */
}

/* --- 优化：修复天赋切换时图标跳动/重复动画的问题 (v2) --- */
@keyframes fadeInRankElement {
  from {
    opacity: 0;
    transform: translateY(3px);
    /* 一个微妙的向上动画效果 */
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 【核心修改】
  将动画直接应用在容器本身，而不是其子元素(*)。
  这样可以确保容器在被定位到正确位置之前是不可见的。
*/
.hero-avatar-rank-container.animate-rank-in {
  animation: fadeInRankElement 0.35s ease-out forwards
}

/* --- 英雄详情页动态段位图标样式 --- */
.hero-avatar-rank-container {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column-reverse;
  /* 让突破条从下往上堆叠 */
  align-items: center;
  width: 55px
}

.ascension-bar {
  width: 60%;
  height: 100%;
  display: block;
  margin-bottom: -8px;
  /* 调整此值让突破条紧密重叠 */
}

.talent-node-container {
  position: relative;
  /* 为天赋数字提供定位基准 */
  width: 45px;
  /* 节点宽度 */
  height: auto;
  margin-bottom: -5px;
  /* 调整节点与最上方突破条的重叠 */
  z-index: 5;
  /* 确保节点在最上层 */
}

.talent-node-image {
  width: 100%;
  height: auto;
  display: block
}

.talent-node-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black
}

/* --- 新增：表格中英雄头像左上角的服装图标样式 --- */
.table-avatar-costume-icon {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 12px;
  z-index: 3;
  /* 确保图标在头像图片之上 */
}

/* --- 队伍模拟器头像样式 (修正版) --- */
/* 用于顶部5个英雄槽位的头像 */
.sim-hero-avatar-container {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  border: 2px solid transparent;
  /* <-- 【已添加】恢复边框以支持辉光 */
}

.sim-hero-avatar-container .hero-avatar-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 2px;
  /* 匹配容器圆角 */
}

.sim-hero-avatar-container .hero-avatar-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 2px
}

/* 用于右侧已存队伍列表的头像 */
.saved-team-avatar-container {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid transparent;
  /* <-- 【已添加】恢复边框以支持辉光 */
}

.saved-team-avatar-container .saved-team-avatar-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 2px
}

.saved-team-avatar-container .saved-team-avatar-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 2px
}

.saved-team-avatars .saved-team-avatar {
  width: 36px;
  height: 36px;
  display: inline-block
}

.hero-avatar-star {
  width: 30px;
  height: 30px
}

/* --- 英雄详情页头像角标图标定位 --- */
/* 【新位置】右上角: 星星 (从右向左排列) */
.hero-avatar-stars-container {
  position: absolute;
  top: 5px;
  right: 5px;
  left: auto;
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  /* 新增：使图标从右向左排列 */
  gap: 2px
}

/* 【新位置】左上角: 职业图标 */
.hero-avatar-class-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  right: auto;
  width: 30px;
  height: 30px;
  z-index: 4
}

/* 左侧 (上): 家族图标 (位置不变) */
.hero-avatar-family-icon {
  position: absolute;
  top: 37px;
  left: 5px;
  height: 30px;
  width: 30px;
  z-index: 4
}

/* 左侧 (下): 皮肤图标 (位置不变) */
.hero-avatar-costume-icon {
  position: absolute;
  top: 70px;
  left: 5px;
  height: 21px;
  width: 30px;
  z-index: 4
}

/* 左下角: 被动技能容器 (不变) */
.hero-avatar-passives-container {
  position: absolute;
  bottom: 5px;
  top: auto;
  left: 5px;
  right: auto;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* 单个被动技能的包裹容器 */
/* 作用: 提供一个 30x30 的相对定位基准 */
.hero-avatar-passive-wrapper {
  position: relative;
  width: 30px;
  height: 30px;
}

/* 修改: 基础图标 (盾牌 或 普通技能) */
/* 作用: 作为 Z-index 1 的底层 (30x30) */
.hero-avatar-passive-icon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 叠加的小图标 */
.hero-avatar-passive-overlay-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  z-index: 2;

  /* --- 居中对齐并上移 1px --- */
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 1px));

  /* 阴影，保持视觉统一 */
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
}

/* --- 新增：英雄详情页头像 Aether Power 图标样式 (含动态显示/定位) --- */
.hero-aether-power-icon-container {
  position: absolute;
  right: 7px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: none;
  /* 默认隐藏 */
  transition: bottom 0.3s ease-in-out;
  /* 为位置变化添加平滑过渡动画 */
}

/* 仅当头像容器有 .is-lb2 类时才显示 Aether Power 图标 */
.hero-avatar-container-modal.is-lb2 .hero-aether-power-icon-container {
  display: block
}

/* 默认位置：当没有天赋时 (位于进阶条上方) */
.hero-aether-power-icon-container {
  bottom: 60px
}

/* 当有天赋时 (.has-talents) 的位置：上移以避开天赋图标 */
.hero-avatar-container-modal.has-talents .hero-aether-power-icon-container {
  bottom: 100px
}

.hero-aether-power-frame,
.hero-aether-power-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.hero-aether-power-frame {
  z-index: 1
}

.hero-aether-power-image {
  z-index: 2;
  top: 4px;
  left: 4px;
  width: 80%;
  height: 80%;
  padding: 3px;
  box-sizing: border-box
}

/* ========== 抽奖模拟器布局样式 (弹性布局修正版 v3) ========== */
/* 1. 外层包装器: 确保其是一个flex容器 */
#lottery-simulator-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 60vh;
  /* 模拟器激活时的高度由 #results-wrapper 决定，这里不需要固定高度 */
}

/* 2. 内容显示区: 填满可用空间 */
#lottery-simulator-display {
  flex-grow: 1;
  display: flex;
  min-height: 0;
  overflow: hidden
}

/* 3. 主内容区 */
.lottery-main-content {
  display: flex;
  /* 让其子元素 (左侧列表, 右侧包装器) 水平排列 */
  flex-grow: 1;
  padding: 3px;
  gap: 10px;
  min-width: 0;
  min-height: 400px;
  /* 修正：设置最小高度 */
}

/* 4. 左侧活动列表: 限制高度并启用滚动 */
#lottery-activity-list-container {
  width: 250px;
  flex-shrink: 0;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  background-color: var(--md-sys-color-surface);
  /* 核心修正：移除 flex 布局，直接管理内部元素的滚动 */
  overflow-y: auto;
  /* 让容器自身处理垂直滚动 */
  height: 100%;
  /* 保持高度以填充父级 */
  padding: 0;
  /* 移除可能影响计算的内边距 */
  box-sizing: border-box;
  /* 确保边框和内边距包含在总高度内 */
}

/* 修改活动列表样式 */
#lottery-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  /* 启用垂直滚动 */
  flex-grow: 1;
  /* 使列表填满可用空间 */
  min-height: 0;
  /* 关键：允许在flex容器中缩小 */
}

#lottery-activity-list li {
  padding: 10px;
  border-bottom: 1px solid var(--md-sys-color-outline);
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-weight: bold;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0
}

#lottery-activity-list li:last-child {
  border-bottom: none
}

#lottery-activity-list li.active {
  box-shadow: inset 0 0 0 3px red, 0 0 10px yellow;
  filter: brightness(1.1)
}

/* 5. 【新增】右侧内容包装器：包裹中间和右侧面板 */
.lottery-center-right-wrapper {
  flex-grow: 1;
  /* 占据所有剩余的水平空间 */
  display: flex;
  /* 让其子元素 (中间区域, 右侧历史) 水平排列 */
  gap: 10px;
  min-width: 0
}

/* --- 抽奖模拟器中间区域样式 --- */
#lottery-portal-container {
  width: 400px;
  /* 防止在空间不足时被过度压缩 */
  flex-shrink: 0;
  /* 选择性添加，使其在最大宽度内自适应 */
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  position: relative;
  /* 为背景和内容层的绝对定位提供基准 */
  border-radius: 8px;
  overflow: hidden;
  color: white
}

#lottery-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.7);
  /* 稍微调暗背景以突出内容 */
  z-index: 1
}

.lottery-content-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box
}

#lottery-pool-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7)
}

.lottery-featured-area {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  gap: 1rem
}

.featured-heroes-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  width: 100px;
  /* 精选英雄列的宽度 */
}

.featured-hero-slot {
  position: relative;
  width: 80px;
  height: 80px;
  /* 调整为更接近游戏内截图的比例 */
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid #a0a0a0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
}

.featured-hero-slot:hover {
  transform: scale(1.05);
  border-color: #fff
}

.featured-hero-slot .hero-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px
}

.featured-hero-slot .action-icon {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  background-color: var(--md-sys-color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid white;
  box-shadow: 0 0 5px black;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.2s
}

.featured-hero-slot:hover .action-icon {
  opacity: 1;
  /* 悬停时显示 */
}

#lottery-hero-display-area {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

#summon-actions-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0.5rem;
  flex-shrink: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.summon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  border: 2px solid #ffd700;
  background: linear-gradient(to bottom, #4a6c9b, #2a4a7b);
  color: white;
  font-weight: bold;
  cursor: pointer;
  min-width: 90px;
  /* 减小最小宽度 */
  flex: 1;
  /* 弹性伸缩 */
  max-width: 120px;
  /* 限制最大宽度 */
  text-align: center;
  transition: all 0.2s ease;
}

.summon-btn.hidden {
  display: none;
}

.summon-btn .summon-amount {
  font-size: clamp(0.8rem, 2.5vw, 0.8rem);
  /* 响应式字体 */
  white-space: nowrap;
}

.summon-btn .summon-cost {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.summon-btn .summon-cost img {
  width: clamp(16px, 4vw, 20px);
  /* 响应式图标 */
  height: clamp(16px, 4vw, 20px);
  flex-shrink: 0;
  /* 防止图标被压缩 */
}

.summon-btn .gem-price {
  font-size: clamp(0.8rem, 2.5vw, 0.8rem);
  /* 响应式字体 */
  white-space: nowrap;
}

/* --- 抽奖历史记录面板 --- */
/* 1. 外层面板：这是您缺失的关键规则 */
#summon-history-panel {
  display: flex;
  /* 关键：将其设置为 flex 容器 */
  flex-direction: column;
  /* 关键：使其子元素垂直排列 */
  flex-grow: 1;
  /* 关键：使其填满右侧剩余空间 */
  min-width: 250px;
  /* 设置一个最小宽度 */
  min-height: 0;
  /* 关键：解决内部滚动条问题 */
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  background-color: var(--md-sys-color-surface);
  overflow: hidden
}

/* 2. 头部：修改为 flex 布局，以便对齐标题和按钮 */
.summon-history-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--md-sys-color-outline);
  flex-shrink: 0;
  /* 防止头部被压缩 */
  user-select: none;
  gap: 10px
}

/* 3. 让标题占据主要空间 */
.summon-history-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--md-sys-color-primary);
  flex-grow: 1;
  text-align: center
}

/* 4. 为清空按钮添加样式 */

#clear-history-btn {
  /* 布局样式 */
  padding: 4px 12px;
  font-size: 0.8rem;
  flex-shrink: 0;

  /* 最终样式：使用主题中的“主要”颜色以确保视觉效果 */
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);

  /* 保持与其他 action-button 一致的其余样式 */
  border: none;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#clear-history-btn:hover {
  filter: brightness(1.1);
  /* 主颜色通常使用提亮效果 */
  transform: translateY(-1px);
}

/* 5. 列表容器：启用垂直滚动条 */
#summon-history-list-container {
  flex-grow: 1;
  /* 占据所有剩余的垂直空间 */
  overflow-y: auto;
  /* 当内容超出时，显示垂直滚动条 */
  padding: 0.75rem;
  scrollbar-gutter: stable;
  /* 始终预留垂直滚动条的空间，防止其出现时挤压内容，从而确保容器宽度恒定不变 */
}

/* 6. 每一个召唤组的样式 */
.summon-history-group {
  margin-bottom: 1rem
}

.summon-history-group:last-child {
  margin-bottom: 0
}

.summon-history-group h5 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant)
}

/* 7. 头像容器：使用 flex-wrap 实现自动换行 */
.summon-history-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

/* 8. 头像大小修正 */
.summon-history-avatars img {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--md-sys-color-outline)
}

.summon-history-avatars .hero-avatar-container {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid transparent;
  /* 关键：为辉光提供占位 */
}

/* 9. “没有历史记录”的提示信息样式 */
#summon-history-list .feature-incomplete-message {
  text-align: center;
  padding: 2rem 0;
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic
}

/* ========== 抽奖概率说明图标样式 ========== */
.probability-info-icon,
.guide-button {
  position: absolute;
  top: 10px;
  z-index: 3;
  /* 确保在内容层之上 */
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none;
}
.probability-info-icon {
  left: 10px;
}

.probability-info-icon:hover {
  background-color: rgba(0, 0, 0, 0.8)
}

/* ========== 禁用的添加/收藏图标样式 ========== */
.favorite-toggle-icon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  /* 覆盖悬停时的放大效果 */
}

/* ========== 抽奖动画与结果样式 ========== */
/* 1. 动画效果的容器 (即 #lottery-hero-display-area) */
#lottery-hero-display-area {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5
}

/* 2. 动画元素的基础容器样式 (用于光效和头像) */
.summon-animation-element {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none
}

/* 3. 【核心修正】为英雄头像/立绘容器定义通用基础样式 */
.summon-animation-element.anim-hero-art {
  max-width: 100px;
  /* 默认尺寸 (用于小头像) */
  max-height: 100px;
  border-radius: 8px;
  border: 2px solid transparent;
  /* 为辉光效果提供占位边框 */
  animation: hero-reveal-local 1.2s ease-out forwards
}

/* 4. 【核心修正】当显示高清立绘时的覆盖样式 */
.summon-animation-element.anim-hero-art.is-avatar {
  max-width: 365px;
  /* 确保立绘放大 */
  max-height: 365px;
  background: none !important;
  border: none !important;
  box-shadow: none !important
}

/* 4. 跳过动画按钮 */
#skip-animation-btn {
  position: absolute;
  /* 使用绝对定位来实现悬浮 */
  z-index: 999;
  /* 确保层级高于遮罩层(998)和之前的按钮(20) */
  /* left 和 top 会由 JS 动态设置 */
}

/* ▼▼▼ 添加新的遮罩层样式 ▼▼▼ */
#animation-blocker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  /* 一个几乎透明的背景，几乎不影响视觉 */
  z-index: 998;
  /* 关键：必须低于跳过按钮的 z-index (999) */
  cursor: not-allowed;
  /* 鼠标悬停时显示“禁止”光标，提供反馈 */
}

/* 5. 最终总结弹窗 (样式保持不变) */
#summon-summary-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1300px;
  background-color: var(--md-sys-color-surface);
  border-radius: 12px;
  padding: 1.5rem;
  z-index: 2000;
  text-align: center
}

#summon-summary-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1999
}

/* Keyframes 动画 (部分微调) */
@keyframes light-grow-local {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  50% {
    transform: scale(8);
  }

  100% {
    transform: scale(16);
    opacity: 0;
  }
}

@keyframes hero-reveal-local {
  0% {
    /* 开始时：在下方40px处，尺寸为0.5倍，完全透明 */
    transform: translateY(40px) scale(0.5);
    opacity: 0;
  }

  50% {
    /* 动画中途：在下方40px处，尺寸放大到1.1倍，完全不透明 */
    transform: translateY(40px) scale(1.1);
    opacity: 1;
  }

  100% {
    /* 结束时：在下方40px处，尺寸继续放大到1.3倍，完全透明 */
    transform: translateY(40px) scale(1.3);
    opacity: 0;
  }
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 特效图片动画样式 ========== */
.anim-light-img {
  animation: light-img-pulse 1.2s ease-out forwards
}

@keyframes light-img-pulse {
  0% {
    transform: translateY(40px) scale(1);
    opacity: 0;
  }

  50% {
    /* ▼▼▼ 将放大倍数从中途就开始显著增加 ▼▼▼ */
    transform: translateY(40px) scale(1.5);
    opacity: 1;
  }

  100% {
    /* ▼▼▼ 最终放大到一个非常大的倍数再消失 ▼▼▼ */
    transform: translateY(40px) scale(3);
    opacity: 0;
  }
}

/* ========== 总结弹窗英雄卡片样式 (v2 - 卡片式、可换行) ========== */
/* 1. 结果的滚动/换行容器 */
#summon-summary-scroll-container {
  display: flex;
  flex-wrap: wrap;
  /* 核心：允许内容换行 */
  justify-content: center;
  /* 居中对齐所有卡片 */
  gap: 15px;
  /* 卡片之间的间距 */
  padding: 1rem 5px;
  border-top: 1px solid var(--md-sys-color-outline);
  border-bottom: 1px solid var(--md-sys-color-outline);
  margin-bottom: 1rem;
  max-height: 60vh;
  /* 增加一个最大高度，内容过多时容器自身出现滚动条 */
  overflow-y: auto;
  /* 垂直滚动 */
}

/* 2. 单个英雄卡片的外层容器 */
.summary-hero-card {
  position: relative;
  /* 为内部的绝对定位元素提供基准 */
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  /* 隐藏溢出的部分 */
  /* 关键：为边框和辉光提供占位 */
  border: 3px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  font-size: 1rem;
  /* <-- 新增这一行，恢复字体大小 */
}

/* 修正：在亮色模式下，为彩色文字添加黑色外描边以增加可读性 */
html:not(.dark-theme) .color-text-outlined {
  text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.4), 0.5px -0.5px 0 rgba(0, 0, 0, 0.4), -0.5px 0.5px 0 rgba(0, 0, 0, 0.4), 0.5px 0.5px 0 rgba(0, 0, 0, 0.4)
}

/* 3. 英雄头像 (作为背景图) */
.summary-hero-card .summary-avatar {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center
}

.summary-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0
}

/* 4. 信息叠加层 */
.summary-hero-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  /* 叠加层高度 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  /* 底部渐变，突出星星 */
  pointer-events: none
}

/* 5. 星星的样式 (自适应修改版) */
.summary-hero-stars {
  position: absolute;
  bottom: 5%;
  /* 修改为百分比定位 */
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1%;
  /* 间距也修改为百分比 */
}

.summary-hero-stars img {
  height: 18%;
  /* 高度修改为百分比 */
  width: 18%;
  /* 宽度自动以保持比例 */
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.9));
}


/* 6. 颜色图标的样式 */
.summary-color-icon {
  position: absolute;
  top: 5px;
  /* 距离卡片顶部的距离 */
  left: 5px;
  /* 距离卡片左侧的距离 */
  width: 30%;
  /* 颜色图标的宽度 */
  height: auto;
  /* 颜色图标的高度 */
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8))
}

/* --- 召唤模拟器最终布局 (桌面端) --- */
/* 1. 主内容区在桌面端是水平排列的 */
.lottery-main-content {
  display: flex;
  flex-direction: row;
  /* 水平排列 */
  gap: 10px
}

/* 2. 为桌面端的三个面板分配宽度 */
#lottery-activity-list-container {
  width: 250px;
  flex-shrink: 0
}

#lottery-portal-container {
  width: 400px;
  flex-shrink: 0;
  /* 防止被压缩 */
}

#summon-history-panel {
  flex-grow: 1;
  /* 占据所有剩余空间 */
  min-width: 250px
}

/* --- 召唤模拟器移动端分页样式 (修正版) --- */
/* 1. 移动端分页标签栏 (默认在桌面端隐藏) */
.lottery-mobile-tabs {
  display: none;
  width: 100%;
  border-bottom: 1px solid var(--md-sys-color-outline);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  /* 确保标签栏不会被压缩 */
}

.lottery-mobile-tabs .tab-button {
  flex: 1;
  padding: 0.75rem 0.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out
}

.lottery-mobile-tabs .tab-button.active {
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
  font-weight: 700
}

/* 2. 响应式断点 (当屏幕宽度小于等于 900px 时生效) */
/* --- 召唤模拟器移动端分页样式 (最终修正版) --- */
@media (max-width: 1000px) {

  /* 1. 显示分页标签栏 */
  .lottery-mobile-tabs {
    display: flex
  }

  /* 2. 修改主内容区为垂直布局 */
  .lottery-main-content {
    flex-direction: column;
    height: 100%
  }

  /* 3. 【核心修正】使用 ID 选择器来强制控制面板的显示/隐藏 */
  /* a. 默认情况下，隐藏所有三个面板 */
  #lottery-activity-list-container,
  #lottery-portal-container,
  #summon-history-panel {
    display: none !important;
    /* 使用 !important 确保最高优先级 */
    width: 100%;
    flex-grow: 1;
    min-height: 0
  }

  /* b. 只显示那个拥有 .active 类的面板 */
  #lottery-activity-list-container.active,
  #lottery-portal-container.active,
  #summon-history-panel.active {
    display: flex !important;
    /* 使用 !important 确保最高优先级 */
  }
}

/* 抽奖概率说明图标样式 */
.probability-info-icon {
  position: relative;
  /* 修正：添加相对定位，以便子元素可以绝对定位 */
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s
}

.probability-info-icon:hover {
  background-color: rgba(0, 0, 0, 0.8)
}

/* 新增：概率详情悬浮提示（Tooltip）样式 */
/* 概率提示框容器 - 确保背景可见 */
.probability-tooltip {
  position: absolute;
  top: calc(100%);
  left: 0;
  z-index: 1005;
  background-color: #020f25;
  /* 深蓝色不透明背景 */
  border: 2px solid #3a8cff;
  /* 亮蓝色边框 */
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  width: max-content;
  max-width: 350px;
  /* 设置最大宽度，防止溢出父容器 */
  box-sizing: border-box;
  /* 确保内边距和边框被计算在宽度内 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease
}

/* 标题样式 - 提高可读性 */
.probability-tooltip h4 {
  color: #fff;
  font-size: 0.9em;
  border-bottom: 1px solid #3a8cff;
  margin: 5px
}

/* 描述文本 */
.probability-tooltip p {
  color: #e0e0e0;
  font-size: 0.8em;
  line-height: 1.5;
  margin: 10px
}

/* 概率列表 */
.probability-tooltip ul {
  list-style: none;
  padding: 0;
  margin: 10px
}

/* 列表项 - 增强对比度 */
.probability-tooltip li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(223, 70, 70, 0.5)
}

/* 英雄类型名称 */
.probability-tooltip li span:first-child {
  color: #fff;
  white-space: nowrap;
  font-size: 0.7em;
  padding: 2px
}

/* 概率数值 - 突出显示 */
.probability-tooltip li span:last-child {
  color: #5699f8;
  font-weight: bold;
  font-size: 0.7em;
  padding: 2px
}

/* 小箭头样式 */
.probability-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 15px;
  border: 8px solid transparent;
  border-bottom-color: #1a2b4a
}

/* 显示状态 */
.probability-info-icon:hover .probability-tooltip {
  opacity: 1;
  visibility: visible
}

/* 叹号图标样式 */
.probability-info-icon {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 28px;
  height: 28px;
  background-color: rgba(26, 43, 74, 0.8);
  border: 1px solid #3a8cff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s
}

.probability-info-icon:hover {
  background-color: rgba(58, 140, 255, 0.3)
}

/* ========== 抽奖模拟器新增样式 (修正版) ========== */
/* 1. 额外抽奖的“叠加”动画效果 */
.bonus-summon-overlay {
  position: absolute;
  z-index: 0;
  /* 层级低于英雄(z-index:10)，高于背景光效 */
  opacity: 0;
  /* 动画只负责淡入，不再淡出 */
  animation: bonus-fade-in 0.4s ease-out forwards
}

@keyframes bonus-fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 2. 汇总弹窗和历史记录中的 "Ex" 标签样式 (这部分不变) */
.summary-hero-card .summary-ex-label,
.summon-history-avatars .history-ex-label {
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: rgba(220, 20, 60, 0.85);
  /* 深红色背景 */
  color: white;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 5;
  line-height: 1;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5)
}

.summary-hero-card .summary-ex-label {
  font-size: 14px
}

.summon-history-avatars .history-ex-label {
  font-size: 11px;
  top: 1px;
  right: 1px
}

/* ========== 超级元素人选择模态框样式 ========== */
#elemental-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  /* 更暗的背景以示强制性 */
  z-index: 2000;
  /* 确保在最顶层 */
}

#elemental-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-sys-color-surface-container-high);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 2001;
  padding: 1rem;
  text-align: center;
  max-width: 90vw;
  /* 核心修正：最大宽度为视口宽度的90% */
  box-sizing: border-box;
  /* 确保内边距被计算在宽度之内 */
}

#elemental-modal h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--md-sys-color-primary);
  font-size: 1.5rem
}

.elemental-selection-container {
  display: flex;
  gap: 1.5rem;
  justify-content: center
}

.elemental-icon {
  width: 64px;
  height: 64px;
  cursor: pointer;
  border-radius: 0;
  border: 3px solid transparent;
  transition: all 0.2s ease-in-out
}
@media (max-width: 768px) {
  .elemental-selection-container {
    gap: 0.8rem;
  }
  .elemental-icon {
    width: 56px;
    height: 56px;
  }
}
.elemental-icon:hover {
  transform: scale(1.1);
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 15px var(--md-sys-color-primary)
}

/* ========== 新增：移动端布局修正 ========== */
/* 1. 为新的父容器设置Flex布局 */
#main-content-area {
  display: flex;
  flex-direction: column;
  /* 确保子元素垂直排列 */
  gap: 1rem;
  /* 在模拟器和表格之间增加一些间距 */
}

/* 2. 移除抽奖模拟器的高度限制，让其自适应内容 */
#lottery-simulator-wrapper {
  height: 600px;
  flex-shrink: 1;
  /* 防止在空间不足时被压缩 */
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
  #lottery-activity-list-container {
    width: 100%;
    flex-shrink: 1
  }
}

/* ▼▼▼ 新增：抽奖历史记录中英雄星星角标的样式 ▼▼▼ */
.history-hero-stars {
  position: absolute;
  /* 绝对定位，相对于父容器 .hero-avatar-container */
  bottom: 1px;
  /* 定位到右下角 */
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明黑色背景 */
  color: white;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  z-index: 4;
  /* 确保在头像图片之上 */
  text-shadow: 1px 1px 1px black;
  /* 为文字添加一点阴影以增加可读性 */
}

/* ▼▼▼ 移动端抽奖结果样式调整 (最终版) ▼▼▼ */
@media (max-width: 768px) {

  /* 1. 缩小卡片本身的尺寸 */
  .summary-hero-card {
    width: 48px;
    height: 48px
  }

  .summary-color-icon {
    position: absolute;
    top: 0;
    /* 距离卡片顶部的距离 */
    left: 0;
    /* 距离卡片左侧的距离 */
    width: 30%;
    /* 颜色图标的宽度 */
    height: auto;
    /* 颜色图标的高度 */
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8))
  }

  /* 2. 修改 .summary-hero-stars 容器的样式，使其变为右下角的角标 */
  .summary-hero-stars {
    /* 移除桌面端的 flex 布局和间距 */
    display: block;
    gap: 0;
    /* 应用角标样式 */
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    font-size: 11px;
    font-weight: bold;
    line-height: 1
  }
}

/* ▼▼▼ 新增：根据星级为星星角标设置不同颜色 ▼▼▼ */
/* 3星: 白色 */
.summary-hero-stars.star-level-3,
.history-hero-stars.star-level-3 {
  color: #FFF
}

/* 4星: 黄色 (使用醒目的金黄色) */
.summary-hero-stars.star-level-4,
.history-hero-stars.star-level-4 {
  font-size: 13px;
  color: #00ff37
}

/* 5星: 红色 */
.summary-hero-stars.star-level-5,
.history-hero-stars.star-level-5 {
  font-size: 15px;
  color: #ff0d00
}

/* --- 新增：抽奖动画中显示立绘时的特殊样式 --- */
.summon-animation-element.anim-hero-art.is-avatar {
  width: 150% !important;
  height: 150% !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important
}

/* --- 英雄详情页头像可点击状态 --- */
.hero-avatar-container-modal.is-clickable {
  cursor: pointer;
  transition: transform 0.2s ease-in-out
}

.hero-avatar-container-modal.is-clickable:hover {
  transform: scale(1.03);
  /* 鼠标悬浮时轻微放大，提供反馈 */
}

/* --- 为英雄立绘展示调整图片模态框的尺寸 --- */
#image-modal.show-hero-portrait #image-modal-content {
  width: auto;
  height: auto;
  max-height: 85vh;
  /* 确保不会超出屏幕高度 */
}

/* --- 图片模态框通用样式 --- */
/* (这里的样式将适用于所有使用 #image-modal 的地方, 包括您的材料指南) */
#image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1000
}

#image-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  max-width: 90vw;
  /* 通用最大宽度 */
  max-height: 90vh;
  /* 通用最大高度 */
}

#image-modal-content {
  max-width: 100%;
  max-height: 100%;
  display: block
}

/* --- 【核心修正】仅用于英雄立绘展示的特定样式 --- */
/* (这里的样式只会在点击英雄头像时生效) */
#image-modal.show-hero-portrait {
  /* 当显示立绘时，我们可能不需要背景或边框 */
  background: none;
  border: none;
  box-shadow: none
}

#image-modal.show-hero-portrait #image-modal-content {
  width: auto;
  height: auto
}

/* ========== 模态框层级 (z-index) 统一修正 ========== */
/* 基础弹窗层 (详情, 筛选器) */
#filters-modal-overlay {
  z-index: 5000
}

#filters-modal {
  z-index: 5001
}

/* 第二层弹窗 (在基础之上，例如多选、帮助) */
#multi-select-modal-overlay,
#help-modal-overlay,
#skill-type-help-modal-overlay,
#lb-talent-help-modal-overlay {
  z-index: 6000
}

#multi-select-modal,
#help-modal,
#skill-type-help-modal,
#lb-talent-help-modal {
  z-index: 6001
}

/* 最高层弹窗 (在所有之上，例如图片、导入/导出、抽奖总结) */
#import-settings-modal-overlay,
#export-settings-modal-overlay,
#summon-summary-modal-overlay,
#elemental-modal-overlay,
#probability-modal-overlay {
  z-index: 7000
}

#import-settings-modal,
#export-settings-modal,
#summon-summary-modal,
#elemental-modal,
#probability-modal {
  z-index: 7001
}

#modal-overlay,
#modal,
#image-modal-overlay,
#image-modal {
  z-index: 7002
}

/* --- 新增：抽奖概率弹窗内的规则开关样式 --- */
.probability-toggle-rule {
  padding: 5px 10px;
  margin: 0 5px 10px 5px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em
}

.probability-toggle-rule label {
  cursor: pointer
}

/* --- 抽奖音效开关按钮样式 --- */
#toggle-animation-btn,
#toggle-sound-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-color: rgba(26, 43, 74, 0.8);
  border: 1px solid #3a8cff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s
}

#toggle-sound-btn:hover {
  background-color: rgba(58, 140, 255, 0.3)
}

/* 默认状态下，显示“开启”图标，隐藏“关闭”图标 */
#toggle-sound-btn .sound-off-icon {
  display: none;
}

#toggle-sound-btn .sound-on-icon {
  display: inline;
}

/* 当按钮有 .sound-off 类时，反转图标的显示 */
#toggle-sound-btn.sound-off .sound-on-icon {
  display: none;
}

#toggle-sound-btn.sound-off .sound-off-icon {
  display: inline;
}

#toggle-animation-btn {
  right: 55px;
  /* 定位在声音按钮左侧 */
}

/* --- 不可移除的精选英雄卡槽样式 --- */
.featured-hero-slot.non-removable {
  cursor: not-allowed;
  /* 鼠标指针变为“禁止”图标 */
  border-style: solid;
  /* 边框从虚线变为实线 */
  border-color: #ffd700;
  /* 边框变为金色以示特殊 */
  box-shadow: 0 0 10px #ffd700;
  /* 添加金色辉光 */
}

/* --- 抽奖历史记录视图切换开关 --- */
.history-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  /* 将开关推到标题和清空按钮之间 */
}

.toggle-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.toggle-switch-label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 20px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}

.toggle-switch-label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

.toggle-switch-checkbox:checked+.toggle-switch-label {
  background: var(--md-sys-color-primary);
}

.toggle-switch-checkbox:checked+.toggle-switch-label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.toggle-label-text {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  user-select: none;
}


/* --- 历史记录中的概率信息图标和悬浮窗 (样式统一修正版) --- */
.history-probability-icon {
  /* 完全复用主图标的样式 */
  position: relative;
  width: 28px;
  height: 28px;
  background-color: rgba(26, 43, 74, 0.8);
  border: 1px solid #3a8cff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
  margin-right: 10px;
  /* 与标题保持间距 */
  flex-shrink: 0;
  /* 防止被压缩 */
}

.history-probability-icon:hover {
  background-color: rgba(58, 140, 255, 0.3);
}

.history-probability-icon .probability-tooltip::before {
  margin-left: 0;
  /* 核心修正：调整定位以适应列表环境 */
  top: calc(100% + 8px);
  /* 增加与图标的距离 */
  left: 50%;
  /* 从图标中心点开始 */
  transform: translateX(-50%);
  /* 将自身向左移动50%，实现居中 */
  max-width: 350px;
  /* 保持与主提示框一致的最大宽度 */
}

/* 确保箭头正确定位 */
.history-probability-icon .probability-tooltip::before {
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

.history-probability-icon:hover .probability-tooltip {
  opacity: 1;
  visibility: visible;
  font-size: 1.2em;
  padding: 2px
}

/* --- 抽奖历史记录主标题栏布局 --- */
.summon-history-header {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 在元素间添加间距 */
}

/* 主标题元素 */
#summon-history-title {
  flex-grow: 1;
  /* 让标题自动占据可用空间 */
  text-align: center;
  /* 标题文字居中 */
  margin: 0;
  /* 移除默认边距 */
}

/* 视图切换开关 */
.history-view-toggle {
  margin-left: auto;
  /* 将开关推向右侧，但在清空按钮之前 */
}

/* 历史记录中每个抽奖组的标题 */
.summon-history-group h5 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  /* 确保组标题左对齐 */
}

/* --- 5星英雄动态半透明固定彩虹扫光效果 (优化性能) --- */

/* 为包含跑马灯效果的父元素设置基础样式 */
.summary-hero-card.star-5-marquee,
.hero-avatar-container.star-5-marquee {
  position: relative;
  overflow: hidden;
}

/* 定义扫光伪元素 */
.summary-hero-card.star-5-marquee::before,
.hero-avatar-container.star-5-marquee::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  z-index: 3;

  /* 
   *
   * 增加 opacity 属性来设置整体的半透明效果。
   * 0.6 代表 60% 的不透明度。
   * 你可以按喜好调整这个值 (例如 0.4 会更透明, 0.8 会更实)。
   * =======================================================
  */
  opacity: 0.6;

  /* 
   *
   * 调整为固定的7色彩虹渐变，并移除 background-size 的 300% 设置。
   * 移除 background-position 动画，降低性能消耗。
   * 
   * 为了让7种颜色均匀分布在扫光条的宽度上，我们将每种颜色设置为扫光条宽度的约1/7。
   * 例如，第一个颜色到 1/7 处，第二个颜色从 1/7 到 2/7 处，以此类推。
   *
   * =======================================================
  */
  background: linear-gradient(90deg,
      #ff0000 0%,
      /* Red 0% - 14.28% */
      #ff7f00 14.28%,
      /* Orange 14.28% - 28.56% */
      #ffff00 28.56%,
      /* Yellow 28.56% - 42.84% */
      #00ff00 42.84%,
      /* Green 42.84% - 57.12% */
      #0000ff 57.12%,
      /* Blue 57.12% - 71.4% */
      #8b00ff 71.4%,
      /* Violet 71.4% - 85.68% */
      #ff0000 85.68%
      /* Red (for seamless transition at end, although not strictly needed here as it's not looping) */
    );
  background-size: 100% 100%;
  /* 确保渐变只在扫光条的宽度内显示一次 */

  /* 倾斜光束 */
  transform: skewX(-25deg);
  animation: marquee-light-sweep 1.5s infinite ease-in-out;
}

/* 定义【移动】动画的关键帧 */
@keyframes marquee-light-sweep {
  0% {
    left: -100%;
  }

  40% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

/* --- 抽奖历史记录控件包裹容器 --- */
.summon-history-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- 移动端历史记录标题栏布局修正 (最终 Block 布局强制版) --- */
@media (max-width: 768px) {

  /* 1. 父容器仅作为定位基准和内边距容器 */
  #summon-history-panel .summon-history-header {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 42px;
    /* 为悬浮图标和边缘留出空间 */
    box-sizing: border-box;
  }

  /* 2. 隐藏箭头 */
  #summon-history-panel .collapse-arrow {
    display: none;
  }

  /* 3. 图标依然悬浮，完全脱离布局流 */
  #summon-history-panel .history-probability-icon {
    position: absolute;
    left: 8px;
    top: 15px;
  }

  /* 4. 【核心】强制标题和控件组使用最基础的 block 布局 */
  #summon-history-header>#summon-history-title,
  #summon-history-header>.summon-history-controls {
    display: block;
    /* 强制每个元素占据独立的一行 */
    width: 100%;
    /* 确保它们撑满宽度 */
    text-align: center;
    /* 居中文本 */
    margin-bottom: 0.5rem;
    /* 添加一些垂直间距 */
  }

  /* 5. 修正控件组内部的对齐（控件组自身还是flex容器） */
  #summon-history-header>.summon-history-controls {
    display: flex;
    justify-content: center;
    /* 居中其内部的按钮和开关 */
    width: auto;
    /* 宽度由flex子项决定 */
  }
}

/* --- 移动端历史记录标题栏布局修正 (最终版) --- */
@media (max-width: 768px) {

  /* 1. 设置header为flex容器, 允许内容换行并提供定位上下文 */
  #summon-history-panel .summon-history-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* 允许项目换行 */
    justify-content: center;
    /* 将第二行的控件居中 */
    padding: 0.75rem 1rem 0.75rem 45px;
    /* 左侧留出空间给绝对定位的图标 */
    box-sizing: border-box;
  }

  /* 2. 叹号图标通过绝对定位固定在左上角, 脱离布局流 */
  #summon-history-panel .history-probability-icon {
    position: absolute;
    left: 8px;
    top: 15px;
    /* 垂直对齐到标题的大致位置 */
  }

  /* 3. 标题占据第一整行, 强制控件换行 */
  #summon-history-header>#summon-history-title {
    width: 100%;
    /* 占据整行宽度 */
    text-align: center;
    /* 文本居中 */
    margin-bottom: 0.5rem;
    /* 与第二行控件的间距 */
  }

  /* 4. 控件组将自动换到第二行, 并由父容器的 justify-content 居中 */
  #summon-history-header .summon-history-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  /* 5. 在移动端隐藏折叠箭头 */
  #summon-history-panel .collapse-arrow {
    display: none;
  }
}

/* --- 新增：为抽奖结果和历史记录中可点击的英雄头像添加交互样式 --- */
.summary-hero-card.is-clickable,
.summon-history-avatars .hero-avatar-container.is-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-hero-card.is-clickable:hover,
.summon-history-avatars .hero-avatar-container.is-clickable:hover {
  transform: scale(1.05);
  /* 鼠标悬浮时轻微放大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  /* 添加阴影提升层次感 */
  z-index: 5;
  /* 确保放大时不会被其他元素遮挡 */
}

.soul-exchange-group {
  width: 100%;
  margin-bottom: 1.5rem;
}

.soul-exchange-group-title {
  text-align: center;
  font-size: 1.2rem;
  color: var(--md-sys-color-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--md-sys-color-outline);
}

.soul-exchange-heroes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

/* --- 灵魂交换分隔线样式 --- */
.soul-exchange-separator {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline);
  margin: 1rem auto;
  /* 分隔线上下的间距 */
  width: 90%;
  /* 分隔线宽度 */
}

/* (可选) 如果您想让英雄列表之间的间距更紧凑，可以调整这个 */
.soul-exchange-heroes-container {
  padding-top: 0.5rem;
  /* 调整容器与分隔线之间的距离 */
}

/* --- 抽奖结果弹窗专属网格布局 --- */

/* 桌面端 (默认): 10列网格 */
/* 仅当 #summon-summary-modal 拥有 .summon-result-view 类时，此规则才生效 */
#summon-summary-modal.summon-result-view #summon-summary-scroll-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  /* 10列时，间距可以适当减小 */
}

/* 同样，只针对抽奖结果弹窗内的卡片，使其自适应网格 */
#summon-summary-modal.summon-result-view .summary-hero-card {
  width: 100%;
  /* 宽度自动填满网格单元 */
  height: auto;
  /* 高度自适应 */
  aspect-ratio: 1 / 1;
  /* 保持1:1的正方形比例 */
  max-width: 120px;
  /* 可以设置一个最大宽度防止过大 */
}

/* --- 新增：灵魂交换弹窗移动端5列网格布局 --- */
@media (max-width: 768px) {

  /* 仅当弹窗是灵魂交换视图时，应用以下网格布局 */
  #summon-summary-modal.soul-exchange-view .soul-exchange-heroes-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 核心：创建5个等宽的列 */
    gap: 8px;
    /* 调整英雄卡片之间的间距 */
  }

  /* 使英雄卡片自适应网格单元格的大小 */
  #summon-summary-modal.soul-exchange-view .summary-hero-card {
    width: 100%;
    /* 宽度占满单元格 */
    height: auto;
    /* 高度自动调整 */
    aspect-ratio: 1 / 1;
    /* 保持1:1的正方形比例 */
  }
}

#summon-summary-modal.soul-exchange-view #summon-summary-scroll-container {
  display: block;
  /* 将布局从 flex 更改为 block */
}

/* 当任何模态框打开时，禁止body滚动 */
body.modal-open {
  overflow: hidden;
}

/* --- 新增：抽奖与队伍模拟器模式下禁用标签点击视觉效果 --- */
.lottery-mode-active #modal .skill-type-tag,
.team-mode-active #modal .skill-type-tag {
  cursor: default !important;
}

.lottery-mode-active #modal .skill-type-tag:hover,
.team-mode-active #modal .skill-type-tag:hover {
  background-color: inherit !important;
  color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- 新增：为右侧动作按钮添加禁用状态的样式 --- */
.action-button-right:disabled {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-outline);
  cursor: not-allowed;
  border-color: var(--md-sys-color-outline);
}

/* 确保在禁用状态下，悬浮效果也被覆盖 */
.action-button-right:disabled:hover {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-outline);
}


/* --- 为兑换码模态框添加遮罩层与核心样式 (修正版) --- */
#redeem-codes-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 7000;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#redeem-codes-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--md-sys-color-surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 7001;

  /* --- 核心宽度修正 --- */
  width: auto;
  /* 宽度由内容自适应 */
  min-width: 320px;
  /* 最小宽度 */
  max-width: 90vw;
  /* 最大宽度不超过屏幕的90% */

  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* --- 兑换码模态框美化样式 --- */

/* 标题居中 */
#redeem-codes-modal .filters-modal-header h2 {
  flex-grow: 1;
  text-align: center;
  padding-left: 36px;
}

/* 内容区域 */
#redeem-codes-content {
  padding: 0 1rem;
  /* 移动端减少内边距 */
  max-height: 60vh;
  overflow-y: auto;
}

/* 兑换码模态框升级样式 */
.redeem-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--md-sys-color-outline);
  gap: 0.5rem;
  min-height: 60px;
  /* 确保最小高度，避免内容被压缩 */
}

.redeem-code-row:last-child {
  border-bottom: none;
}

.rewards-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.3rem;
  overflow: hidden;
  /* 防止内容溢出 */
}

.reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 防止奖励项被压缩 */
  min-width: 40px;
  /* 最小宽度 */
}

.reward-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  background-color: var(--md-sys-color-surface-variant);
  padding: 4px;transition: all 0.2s ease;
}

.reward-count {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--md-sys-color-on-surface);
  margin-top: 2px;
  white-space: nowrap;
  /* 防止数量文本换行 */
}

.redeem-code-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  /* 防止按钮区域被压缩 */
  min-width: 80px;
  /* 最小宽度 */
}

.code-text {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--md-sys-color-on-surface);
  word-break: break-all;
  text-align: center;
  width: 100%;
  line-height: 1.2;
}

.redeem-btn {
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
  width: 100%;
  min-width: 60px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 0.85rem;
}

.redeem-btn.redeemed {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  cursor: not-allowed;
  opacity: 0.7;
}

/* 移动端适配 - 重点优化 */
@media (max-width: 768px) {
  #redeem-codes-content {
    padding: 0 0.5rem;
    /* 移动端进一步减少内边距 */
  }

  .redeem-code-row {
    flex-direction: row;
    /* 确保水平排列 */
    align-items: center;
    padding: 0.6rem 0.3rem;
    gap: 0.3rem;
  }

  .rewards-container {
    width: 70%;
    /* 奖励占70%宽度 */
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* 防止换行 */
    overflow-x: auto;
    /* 如果奖励太多允许横向滚动 */
    -webkit-overflow-scrolling: touch;
    /* iOS平滑滚动 */
  }

  /* 奖励图标自适应缩放 */
  .reward-item {
    flex: 0 0 auto;
    /* 不伸缩，不收缩，自动基础大小 */
    min-width: 35px;
    /* 更小的最小宽度 */
  }

  .reward-icon {
    width: 30px;
    /* 固定宽度 */
    height: 30px;
    /* 固定高度 */
    max-width: none;
    /* 覆盖之前的max-width */
  }

  .reward-count {
    font-size: 0.7rem;
    /* 更小的字体 */
  }

  .redeem-code-actions {
    width: 28%;
    /* 按钮区域占28% */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 70px;
    /* 更小的最小宽度 */
  }

  .code-text {
    font-size: 0.65rem;
    /* 更小的字体 */
    line-height: 1.1;
  }

  .redeem-btn {
    min-width: 50px;
    /* 更小的最小宽度 */
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    height: 28px;
  }
}


/* --- 新增：单抽结果专属模态框样式 --- */

/* 1. 模态框本身：自适应宽度 */
#summon-summary-modal.single-pull-result-view {
  width: auto;
  /* 宽度由内容决定 */
  max-width: 90vw;
  /* 在移动端不超过屏幕宽度 */
}

/* 2. 内容容器：使用flex布局水平居中英雄卡片 */
#summon-summary-modal.single-pull-result-view #summon-summary-scroll-container {
  display: flex;
  flex-wrap: wrap;
  /* 允许多个英雄（如触发奖励时）换行 */
  justify-content: center;
  /* 水平居中 */
  gap: 0rem;
  /* 卡片之间的间距 */
}

/* 3. 英雄卡片：设置一个合适的基础尺寸 */
#summon-summary-modal.single-pull-result-view .summary-hero-card {
  max-width: 92px;
  max-height: 92px;
}

/* 4. 移动端优化：在小屏幕上缩小卡片尺寸 */
@media (max-width: 768px) {

  /* 【核心修正】强制模态框在移动端使用大部分屏幕宽度 */
  #summon-summary-modal.single-pull-result-view {
    width: 80vw;
  }

  #summon-summary-modal.single-pull-result-view .summary-hero-card {
    width: 60px;
    height: 60px;
  }
}


/* ▼▼▼ 移动端抽奖结果样式调整 (最终版) ▼▼▼ */
@media (max-width: 768px) {

  /* 核心修复: 确保滚动容器在内容溢出时产生滚动条 */
  #summon-summary-modal #summon-summary-scroll-container {
    /* 设置一个最大高度，确保容器在垂直方向上不会无限延伸。
       这个值需要根据你的页面布局来调整，以保证模态框的标题和底部按钮有足够空间。*/
    max-height: 60vh;
    /* 当内容超出 max-height 时，自动添加一个垂直滚动条 */
    overflow-y: auto;
    /* 确保在iPad上显示时可以平滑滚动 */
    -webkit-overflow-scrolling: touch;
  }

  /* 这是关键修复。我们确保当模态框是“召唤结果视图”时，其内容容器被明确设置为5列的网格布局。 */
  #summon-summary-modal.summon-result-view #summon-summary-scroll-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    /* 创建新的堆叠上下文，以修复iPad上的渲染bug */
    transform: translateZ(0);
  }

  /* 这确保了网格中的每个卡片都能完全填充其单元格，并保持正方形，从而防止堆叠问题。 */
  #summon-summary-modal.summon-result-view .summary-hero-card {
    width: 100%;
    /* 让卡片宽度填满所在的网格列 */
    aspect-ratio: 1;
    /* 维持1:1的正方形宽高比 */
    margin-bottom: 0;
    /* 移除可能干扰布局的底部外边距 */
  }

  /* 之前固定卡片尺寸的规则可以被移除或注释掉，因为现在的网格布局更稳健。我们保留其他针对图标和星星的移动端样式。 */
  .summary-hero-card {
    /* 在网格布局下，不再需要固定的宽高。 */
    /* width: 48px; */
    /* height: 48px; */
  }

  .summary-color-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: auto;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
  }

  .summary-hero-stars {
    display: block;
    gap: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
  }
}

/* ▼▼▼ iPad 专属修复 (Flexbox 布局) ▼▼▼ */
/* 当UA检测到是iPad时应用此样式 */
/* 1. 将模态框本身转换为 Flexbox 容器，实现垂直排列 */
html.is-ios #summon-summary-modal {
  /* 确保模态框自身能够居中并覆盖全屏，具体样式取决于你的整体布局，这里只给出核心部分 */
  display: flex;
  flex-direction: column;
  /* 让子元素垂直堆叠 */
  justify-content: space-between;
  /* 顶部标题和底部按钮分列两端 */

  /* 示例：如果你需要让模态框固定居中，可以使用以下属性 */
  /* position: fixed; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */

  /* 确保模态框有最大高度，但不要限制内容容器的高度 */
  max-height: 90vh;
  /* 模态框的最大高度，留出顶部和底部空间 */
}

/* 2. 确保滚动容器占据模态框内所有可用空间 */
html.is-ios #summon-summary-scroll-container {
  flex-grow: 1;
  /* 让它占据所有剩余空间 */
  overflow-y: auto;
  /* 确保它能滚动 */
  -webkit-overflow-scrolling: touch;
  /* 修复iOS平滑滚动 */

  /* 移除之前固定的高度限制，让它动态计算 */
  max-height: none;
}

/* 3. 在可滚动容器内部使用 Flexbox 或 Grid 布局 */
/* 这里我们继续使用你想要的 Flexbox 布局 */
html.is-ios #summon-summary-modal.summon-result-view #summon-summary-scroll-container {
  display: flex;
  flex-wrap: wrap;
  /* 允许项目换行 */
  gap: 8px;
  /* 保持项目间距 */
  align-content: flex-start;
  /* 确保内容从顶部开始对齐 */

  /* 确保 Flex 容器内部有足够的空间来计算内容，防止溢出 */
  min-height: 0;
  min-width: 0;
}

/* 4. 为每个卡片设置 Flexbox 宽度 */
html.is-ios #summon-summary-modal.summon-result-view .summary-hero-card {
  width: 60px;
  aspect-ratio: 1;
  position: relative;
  /* 确保内部绝对定位元素正确显示 */
  margin-bottom: 0;
}

html.is-ios #summon-summary-modal.summon-result-view #summon-summary-scroll-container {
  display: flex;
  /* 强制使用 Flexbox 布局 */
  flex-wrap: wrap;
  /* 允许项目换行 */
  gap: 8px;
  /* 保持项目间距 */

  /* 移除Grid相关的属性，确保不冲突 */
  grid-template-columns: unset;
  transform: unset;
}

html.is-ios #summon-summary-modal.summon-result-view .summary-hero-card {
  width: 60px;
}

/* 确保iPad上也保留滚动条和最大高度 */
html.is-ios #summon-summary-modal #summon-summary-scroll-container {
  max-height: 60vh;
  /* 确保有最大高度 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.header-buttons #show-redeem-codes-btn {
  position: relative;
  /* 确保徽章定位 */
}

#redeem-code-count {
  position: absolute;
  top: 30px;
  right: 16px;
  color: var(--md-sys-color-tertiary-container);
  font-size: 15px;
  font-weight: bold;
  /* ▼▼▼ 稍微柔和的文本描边效果 ▼▼▼ */
  text-shadow:
    -1px -1px 2px rgba(0, 0, 0, 0.5),
    /* 左上角带一点模糊的黑色阴影 */
    1px -1px 2px rgba(0, 0, 0, 0.5),
    /* 右上角带一点模糊的黑色阴影 */
    -1px 1px 2px rgba(0, 0, 0, 0.5),
    /* 左下角带一点模糊的黑色阴影 */
    1px 1px 2px rgba(0, 0, 0, 0.5);
  /* 右下角带一点模糊的黑色阴影 */
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(50%, -50%);
  /* 调整位置使其悬浮在右上角 */
  pointer-events: none;
}

/* 当徽章数量为0时隐藏 */
#redeem-code-count.hidden {
  display: none;
}

/* 捐赠者名单样式 */
.donation-list-container {
  display: flex;
  /* 使用 Flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐 */
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: 8px;
  padding: 10px;
  max-width: 900px;
  /* 保持最大宽度，防止超出屏幕 */
  margin: 1rem auto 0 auto;
  /* 居中显示 */
}

.donation-list-title {
  font-size: 0.9em;
  font-weight: 600;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  flex-shrink: 0;
  /* 确保标题不收缩，保留固定宽度 */
  white-space: nowrap;
  /* 防止标题换行 */
  padding-right: 12px;
}

.donation-list-wrapper {
  flex: 1;
  /* 占据剩余的所有空间 */
  overflow: hidden;
  /* 隐藏超出容器的内容 */
  position: relative;
  height: 24px;
  /* 设置固定高度，确保和内部元素对齐 */
}

.donation-list {
  display: inline-block;
  /* 确保所有名字都在一行 */
  white-space: nowrap;
}

.donation-item {
  font-weight: 600;
  color: var(--md-sys-color-error);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-right: 12px;
  /* 增加名字之间的间距 */
  display: inline-block;
  /* 确保元素可以有 margin */
}

/* 定义从右向左的滚动动画 */
@keyframes scroll-left {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}

/* 用于触发动画的类 */
#donation-list-box.is-scrolling {
  animation: scroll-left linear infinite;
}

/* 英雄立绘容器样式 */
.hero-portrait-container {
  position: relative;
  display: inline-block;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: 85vw;
  max-height: 85vh;
}

/* 光效背景样式 */
.rays-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.7;
  pointer-events: none;
  transition: filter 0.3s ease;
  max-width: 85vw;
  max-height: 85vh;
}

/* 英雄立绘样式 - 预加载状态 */
.hero-portrait-image {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 85vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  transition: opacity 0.3s ease;
}

/* 加载完成后的样式 */
.hero-portrait-image.loaded {
  opacity: 1 !important;
}

/* 光效动画 */
.rays-background {
  animation: rotate-rays 20s linear infinite;
}

@keyframes rotate-rays {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 模态框样式 */
#image-modal.show-hero-portrait #image-modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 20px;
  overflow: visible !important;
}

/* 添加加载中的旋转动画 */
.hero-portrait-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--md-sys-color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-portrait-container.loading::before {
  opacity: 1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 自动完成样式 - 基于MD3配色方案 */
.autocomplete-container {
  position: relative;
  width: 100%;
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px var(--md-sys-color-shadow);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--md-sys-color-on-surface);
  min-height: 40px;
}

.autocomplete-item:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  transform: translateY(-1px);
}

.autocomplete-item.selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-left: 3px solid var(--md-sys-color-primary);
}

.autocomplete-item:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.autocomplete-item:first-child {
  border-radius: 0;
}

.autocomplete-highlight {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--md-sys-color-tertiary);
}

/* 搜索输入框的焦点状态与候选列表联动 */
#name-input:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

#name-input:focus+.autocomplete-list {
  border-color: var(--md-sys-color-primary);
  border-top-color: var(--md-sys-color-outline);
}

/* 滚动条样式 - 匹配MD3设计 */
.autocomplete-list::-webkit-scrollbar {
  width: 6px;
}

.autocomplete-list::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface-variant);
  border-radius: 3px;
}

.autocomplete-list::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: 3px;
}

.autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-primary);
}

/* 空状态提示 */
.autocomplete-empty {
  padding: 16px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
  font-size: 14px;
}

/* 加载状态 */
.autocomplete-loading {
  padding: 16px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}

.autocomplete-loading::after {
  content: "...";
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {

  0%,
  20% {
    content: ".";
  }

  40% {
    content: "..";
  }

  60%,
  100% {
    content: "...";
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .autocomplete-list {
    max-height: 150px;
    border-radius: 0 0 4px 4px;
  }

  .autocomplete-item {
    padding: 10px 12px;
    font-size: 16px;
    /* 移动端字体稍大 */
  }
}

/* 暗色主题微调 */
html.dark-theme .autocomplete-list {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .autocomplete-item:hover {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

html.dark-theme .autocomplete-item.selected {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
}

/* 英雄头像样式 */
.autocomplete-avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-right: 10px;
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.autocomplete-text {
  flex: 1;
  min-width: 0;
  /* 防止文本溢出 */
}

.match-position-hint {
  font-size: 0.8em;
  color: var(--md-sys-color-on-surface-variant);
  margin-left: 4px;
  font-style: italic;
}

/* 英雄颜色主题的候选提示变体 - 修改为头像底色 */
.autocomplete-item.hero-red .autocomplete-avatar {
  background-color: var(--hero-color-red);
  box-shadow: 0 0 0 2px var(--hero-color-red);
}

.autocomplete-item.hero-blue .autocomplete-avatar {
  background-color: var(--hero-color-blue);
  box-shadow: 0 0 0 2px var(--hero-color-blue);
}

.autocomplete-item.hero-green .autocomplete-avatar {
  background-color: var(--hero-color-green);
  box-shadow: 0 0 0 2px var(--hero-color-green);
}

.autocomplete-item.hero-yellow .autocomplete-avatar {
  background-color: var(--hero-color-yellow);
  box-shadow: 0 0 0 2px var(--hero-color-yellow);
}

.autocomplete-item.hero-purple .autocomplete-avatar {
  background-color: var(--hero-color-purple);
  box-shadow: 0 0 0 2px var(--hero-color-purple);
}

/* 头像加载失败时的默认样式 */
.autocomplete-avatar[src=""],
.autocomplete-avatar:not([src]) {
  background-color: var(--md-sys-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
  font-weight: bold;
}

.autocomplete-avatar[src=""]::after,
.autocomplete-avatar:not([src])::after {
  content: "?";
}

/* 头像容器样式 */
.autocomplete-avatar-container {
  position: relative;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .autocomplete-avatar {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .autocomplete-avatar-container {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .autocomplete-item {
    padding: 6px 10px;
    min-height: 36px;
  }

  .match-position-hint {
    font-size: 0.7em;
    margin-left: 6px;
  }
}

/* 头像悬停效果 */
.autocomplete-item:hover .autocomplete-avatar {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* 选中状态的头像效果 */
.autocomplete-item.selected .autocomplete-avatar {
  box-shadow: 0 0 0 3px var(--md-sys-color-primary);
}

/* 头像底色与边框的过渡效果 */
.autocomplete-avatar {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 清除按钮样式 */
.clear-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.clear-button:hover {
  background-color: var(--md-sys-color-on-surface-variant);
  color: var(--md-sys-color-surface);
}

.clear-button:active {
  transform: translateY(-50%) scale(0.9);
}

.autocomplete-container {
  display: flex;
  position: relative;
  align-items: center;
  gap: 5px;
  /* 间距 */
}

/* 语言选择器样式 */
.search-lang-select {
  width: 8px;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  height: 40px;
  /* 确保与输入框高度一致 */
}

#name-input {
  flex-grow: 1;
  /* 输入框占据剩余空间 */
}