/* ====== 角色卡片列表 ====== */

.characters{
    padding: 3.5rem 0;
  }
  
  .characters-inner{
    width: min(1100px, 92vw);
    margin: 0 auto;
  }
  
  /* 自适应栅格：每列 1fr，均分宽度；根据屏幕宽度自动增减列数 */
  .char-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
  }
  
  /* 卡片外观 */
  .char-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    cursor: pointer;
  
    transition:
      border-color .16s ease,
      background-color .16s ease,
      transform .16s ease,
      box-shadow .16s ease;
  }
  
  .char-card:focus{
    outline: 2px solid rgba(255,255,255,.6);
    outline-offset: 2px;
  }
  
  .char-card:hover{
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.06);
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(0,0,0,.45);
  }
  
  /* 上半部：3:4 比例图片区域 */
  .char-card-image{
    position: relative;
    aspect-ratio: 3 / 5;
    overflow: hidden;
  }
  
  .char-card-image img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 渐变遮罩 */
  .char-card-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.70));
    opacity: 0;
    transition: opacity .18s ease;
  }
  
  .char-card:hover .char-card-overlay{
    opacity: 1;
  }
  
  /* 底部角色名/身份标签 */
  .char-card-label{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .75rem .9rem;
    text-align: left;
  }
  
  .char-name{
    margin: 0;
    color: rgba(255,255,255,.95);
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0,0,0,.7);
  }
  
  .char-role{
    margin: .15rem 0 0;
    font-size: .78rem;
    color: rgba(255,255,255,.7);
  }
  
  /* 下半部“查看详情 →” */
  .char-card-footer{
    padding: .6rem .9rem .7rem;
    text-align: left;
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    transition: color .16s ease;
  }
  
  .char-card:hover .char-card-footer{
    color: rgba(255,255,255,.96);
  }
  
  /* 小屏优化 */
  @media (max-width: 640px){
    .char-grid{
      gap: .75rem;
    }
    .char-card-footer{
      font-size: .82rem;
    }
  }
  
/* ====== 角色详情弹窗（characters-modal） ====== */

/* 只改角色弹窗的内部布局，不影响 information 那边的普通弹窗 */
.popup-layer.characters-modal{
  background: radial-gradient(circle at top, rgba(60,80,110,.7), rgba(0,0,0,.85));
}

/* 弹窗本体：改成 flex 容器，内部再控制滚动 */
.popup-layer.characters-modal .popup-dialog{
  width: min(1100px, 96vw);
  max-height: min(90vh, 980px);
  background: rgba(255, 255, 255, 0.5);
  color: #000000;
  border-radius: 1.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.8);
  position: relative;

  display: flex;
  flex-direction: column;
  overflow: hidden; /* 外层不滚，滚动交给内部容器 */
}

/* 右上角关闭按钮 */
.popup-layer.characters-modal .popup-close{
  position: absolute;
  top: .6rem;
  right: .75rem;
  font-size: 1.6rem;
  color: rgba(255,255,255,.85);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* 整体容器：占满弹窗剩余高度 */
.characters-info-container{
  position: relative;
  margin-top: 1.5rem;

  flex: 1 1 auto;
  min-height: 0;   /* flex 子元素必须有这个才能内部滚动 */
  overflow: hidden;
}

/* 左右箭头 */
.characters-info-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}

.characters-info-arrow svg{
  width: 20px;
  height: 20px;
}

.characters-info-arrow.prev{ left: .25rem; }
.characters-info-arrow.next{ right: .25rem; }

.characters-info-arrow:disabled{
  opacity: .35;
  cursor: default;
}

/* 主体布局：左侧立绘，右侧文字；右侧列可滚动 */
.characters-info{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 1.5rem 2rem;
  align-items: stretch;
  position: relative;

  height: 100%;
  min-height: 0;
}

/* ===== 左侧：立绘全高显示 ===== */
.characters-info .primary{
  position: relative;
  padding-right: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;  /* 防止图像溢出 */
}

/* stand 容器占满左侧列高度 */
.characters-info .primary .stand{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;   /* 高度由弹窗整体 90vh 限制 */
}

/* 以高度为基准吃满列高，宽度自适应 */
.characters-info .primary .stand img{
  display:block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 台词图在左侧上方 */
.characters-info .primary .words{
  position:absolute;
  top: .75rem;
  left: .75rem;
  max-width: 60%;
}

/* ===== 右侧：文字 + 半透明 bustup 背景 ===== */
.characters-info .secondary{
  position: relative;
  font-size: .95rem;
  line-height: 1.7;
  z-index: 2;
  padding-right: 2.5rem;

  overflow-y: auto;   /* 右侧文字独立滚动 */
  min-height: 0;
}

/* 右侧半透明 bustup：在 secondary 背后、半透明占右半边 */
.bustup{
  position:absolute;
  top: 0;              /* 从弹窗内部顶部开始 */
  right: 0;            /* 右侧紧贴弹窗内侧 */
  height: 100%;        /* 跟随弹窗内部高度，全高 */
  width: auto;
  max-width: 70%;      /* 最多占右侧一半宽度，防止吃满全屏 */
  max-height: 100%;
  opacity: 0.32;
  pointer-events: none;
  z-index: 1;          /* 在文字下面，当背景 */
}

.bustup img{
  display:block;
  height:100%;         /* 图片按高度吃满 bustup 容器 */
  width:auto;
  object-fit: cover;   /* 如有必要裁掉左侧多余，保证右侧填满 */
}

/* 英文名固定在右上角，但保持在文字层上 */
.name-en{
  position:absolute;
  right:0.8rem;
  top:0.1rem;
  font-size:.9rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.9;
  z-index: 3;
}

/* 文字细节 */
.characters-info .catch{
  font-size: .9rem;
  opacity:.85;
  margin-bottom:.2rem;
}

.characters-info .name{
  font-size: 1.5rem;
  font-weight: 700;
  margin: .25rem 0 0;
}

.characters-info .name-ruby{
  font-size: .9rem;
  opacity:.8;
  margin-top:.1rem;
}

.characters-info .voice{
  margin-top:.8rem;
}

.characters-info .cv{
  font-size: .9rem;
  margin-bottom:.35rem;
}

.sample-voice{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.8rem;
}

.sample-voice .label{
  font-weight:600;
  letter-spacing:.06em;
}

.sample-voice .buttons{
  display:flex;
  gap:.5rem;
}

.voice-player{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  text-decoration:none;
  font-size:.8rem;
}

/* Status & Description */
.characters-category-heading{
  font-size:.9rem;
  margin:1rem 0 .4rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.85;
}

.status{
  display:flex;
  gap:1rem;
  font-size:.85rem;
}

.status table{
  border-collapse:collapse;
}

.status th{
  text-align:left;
  white-space:nowrap;
  padding-right:.5rem;
  opacity:.85;
}

.status td{
  text-align:left;
}

.desc{
  font-size:1rem;
  line-height:1.8;
  margin-top:.3rem;
}

/* 小屏：弹窗整体滚动，图在上字在下 */
@media (max-width: 768px){
  .popup-layer.characters-modal .popup-dialog{
    padding: 1.25rem 1.1rem 1rem;
    max-height: 95vh;
  }

  .characters-info-container{
    margin-top: 1.1rem;
    overflow-y: auto;  /* 小屏下由整个内容滚动 */
  }

  .characters-info{
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .characters-info .primary{
    padding-right:0;
    margin-bottom:.5rem;
    min-height: 260px;
  }

  .characters-info .primary .stand{
    height: 100%;
  }

  /* 小屏把 bustup 收进正文下方，以免挡字 */
  .bustup{
    position: static;
    max-width: 55%;
    max-height: none;
    margin: 0.5rem auto 0;
    opacity: 0.4;
  }

  .name-en{
    position: static;
    text-align:center;
    margin-bottom:.5rem;
  }

  .characters-info .secondary{
    padding-right: 0;
    overflow: visible; /* 小屏不要嵌套滚动 */
  }

  .characters-info-arrow{
    top:auto;
    bottom:.5rem;
  }
}