/* ============================================================
   faces.css —— 表情页。网格 + 全屏查看层。
   查看层挂在 main 外面（base.css 里 main 是 z-index:1，写里面压不住吸顶导航）。
   层本身不透明 + 内框自己滚：半透明遮罩套超高子元素在 Chromium 上会留脏渲染。
   ============================================================ */

/* ---------- 属性筛选 ---------- */

/* 故意跟下面的角色名标签云长得不一样：名字是 4px 直角小块（.kx-index button，
   见 euphoria.css），属性做成胶囊 + 亮字，一眼能看出是两层不同的筛选 */
.fc-els {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}

.fc-els-label {
  flex: none;
  /* 按钮换行时标签要贴第一行，不然会飘到中间去 */
  padding-top: 7px;
  font-size: 12px;
  letter-spacing: .08em;
  color: #7f8c84;
}

.fc-els-btns { display: flex; flex-wrap: wrap; gap: 6px; }

.fc-el {
  padding: 5px 13px;
  font: inherit;
  font-size: 13px;
  color: #c9d3cc;
  background: transparent;
  border: 1px solid #3d443f;
  border-radius: 999px;
  cursor: pointer;
}

.fc-el:hover { border-color: #5c6b60; }
.fc-el:active { transform: translateY(1px); }
.fc-el[aria-pressed="true"] {
  color: #eef3ef;
  background: #2f3a33;
  border-color: #6f8175;
}

/* 名单里被点中的那个名字：亮字 + 双层描边。标签云里几十个小块挤在一起，
   只换底色扫不到，得靠外面那圈 box-shadow 把它「框」出来 */
.kx-index .kx-name.is-sel {
  color: #f2f6f3;
  background: #33413a;
  border-color: #93aa9c;
  box-shadow: 0 0 0 2px rgba(147, 170, 156, .28);
}

/* ---------- 角色网格 ---------- */

.fc-grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.fc-grid .state { grid-column: 1 / -1; }

.fc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  background: #141715;
  border: 1px solid #2b302d;
  color: inherit;
  font: inherit;
  cursor: pointer;
  width: 100%;
}

.fc-card:hover,
.fc-card:focus-visible { background: #1b201d; border-color: #3d443f; }

.fc-card img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  background: #0e100f;
}

.fc-card b { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; }

.fc-card small { font-size: 11px; color: #8d968f; }

/* 皮肤数标在右上角：不标的话没人知道点进去有东西 */
.fc-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 5px;
  font-size: 10px;
  background: #0e100fcc;
  border: 1px solid #3d443f;
  color: #c8d0c9;
}

/* 「无表情」放左上角，否则和皮肤数角标叠在一起 */
.fc-badge-l {
  right: auto;
  left: 4px;
  color: #9aa39d;
  border-color: #333a35;
}

.fc-note { margin-top: 18px; font-size: 12px; color: #8d968f; line-height: 1.7; }

/* ---------- 查看层 ---------- */

.fc-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #0e100f;            /* 不透明，别用半透明遮罩 */
  display: flex;
  flex-direction: column;
}

.fc-view-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #232825;
}

.fc-view-bar b { font-size: 15px; }
.fc-view-size { font-size: 11px; color: #8d968f; }
.fc-close { margin-left: auto; background: #1c201e; color: #e8e6e1; border: 1px solid #3a403c; padding: 5px 12px; cursor: pointer; }
/* 脸部 / 全身 切换靠右，关闭按钮再跟其后 */
[data-zoom] { margin-left: auto; }
[data-zoom] + .fc-close { margin-left: 6px; }
[data-zoom][aria-pressed="true"] { background: #2f3a33; border-color: #5c6b60; }

/* 舞台占满剩余高度，立绘又高又窄，canvas 自己等比 */
.fc-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;      /* canvas 会被 CSS 放大到超出，必须裁掉 */
}

.fc-stage canvas { display: block; width: 100%; height: 100%; }

.fc-poster { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fc-poster img { width: 96px; height: 96px; object-fit: cover; background: #141715; }
.fc-hint { font-size: 11px; color: #8d968f; }
.fc-loading {
  position: absolute;
  font-size: 13px;
  color: #b9c1ba;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* 条子故意做细：这层盖在立绘上面，做重了抢注意力 */
.fc-bar { display: block; width: 140px; height: 3px; background: #232825; overflow: hidden; }
.fc-bar i { display: block; height: 100%; width: 0; background: #b9c1ba; transition: width .2s linear; }

.fc-rows { flex: 0 0 auto; border-top: 1px solid #232825; }
.fc-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; }
.fc-row + .fc-row { border-top: 1px solid #1a1e1c; }
.fc-row-label { flex: 0 0 32px; font-size: 11px; color: #8d968f; padding-top: 6px; }
.fc-btns { display: flex; flex-wrap: wrap; gap: 6px; }

.fc-btns button {
  background: #1c201e;
  color: #e8e6e1;
  border: 1px solid #3a403c;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.fc-btns button[aria-pressed="true"] { background: #2f3a33; border-color: #5c6b60; }
.fc-btns button:disabled { opacity: .45; cursor: default; }

/* 皮肤按钮 = 要重新下几 MB，做成方框带体积；表情按钮 = 本地毫秒切换，做成圆角 */
[data-skins-btns] button { border-radius: 0; }
[data-skins-btns] button i { font-style: normal; font-size: 10px; color: #8d968f; margin-left: 4px; }
[data-exp-btns] button, [data-zoom-btns] button { border-radius: 14px; }
[data-exp-btns] button.unsure::after { content: '?'; font-size: 9px; color: #8d968f; margin-left: 3px; }

@media (max-width: 480px) {
  .fc-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .fc-card img { width: 58px; height: 58px; }
}