/* ============================================================
   story.css —— 只服务 story.html（剧情立绘）。
   卡片外壳沿用 list.css，筛选区 / 名单 / 收起按钮沿用 euphoria.css，
   这里只加这一页独有的：缩略图横排、大图查看层。

   为什么缩略图要横向滚动而不是换行铺满：立绘是又高又窄的整身像，
   同一个角色最多 5 张。竖着堆会把一张卡片拉到三四屏高，横排一行
   高度固定，滚动的方向也和「翻看同一个人的几张图」这件事一致。
   ============================================================ */

/* 卡片本身要允许被压窄。grid 项的 min-width 默认是 auto，会被里面那排
   flex: none 的缩略图顶开，整页就多出一条横向滚动条（手机上表现为
   页面能左右晃、顶栏文字被切）。min-width: 0 把决定权交回给
   .st-shots 自己的 overflow-x。 */
.st-list { padding-block: 12px 8px; }
.st-list .item { min-width: 0; }

/* 张数：跟在名字后面，一眼知道这人有几张，不用点开数。
   推到最右边——名字和「确定上线！」角标要挨在一起，别被均分挤开 */
.st-count {
  flex: none; margin-left: auto;
  font-size: 11px; letter-spacing: .06em; color: var(--ink-mute);
}

/* 缩略图横排。左右留负边距让图能贴到卡片边缘再滚出去，
   视觉上暗示「这一行还能往右拉」 */
.st-shots {
  display: flex; gap: 8px;
  min-width: 0;
  margin-inline: -15px; padding-inline: 15px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.st-shots::-webkit-scrollbar { display: none; }

/* 每张缩略图是个按钮：点开看大图。用 button 而不是 div，
   键盘和读屏都能用，不用自己补 tabindex 和回车键 */
.st-shot {
  flex: none;
  padding: 0;
  background: var(--bg-sink);
  border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.st-shot:active { transform: translateY(1px); }
.st-shot img {
  display: block;
  height: 168px; width: auto;
  /* 立绘是白底透明 PNG 转的 WebP，深色底上直接放会糊在背景里，
     给一点极淡的底色把人物托出来 */
  background: #14171500;
}

/* ---------- 大图查看层 ---------- */

.st-view {
  position: fixed; inset: 0; z-index: 9;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 46px 14px 18px;
  background: color-mix(in srgb, var(--bg-sink) 94%, transparent);
  backdrop-filter: blur(6px);
}
.st-view img {
  max-width: 100%;
  /* 高度吃满可用空间：立绘竖长，限高比限宽更能看清脸 */
  max-height: calc(100vh - 110px);
  object-fit: contain;
}
.st-view-cap {
  margin: 0;
  font-family: var(--serif); font-size: 14px; letter-spacing: .06em;
  color: var(--ink-dim);
}

/* 关闭按钮固定在右上：全屏看图时手指最容易到的地方是边角，
   点背景也能关（见 story.js），这个按钮是给不知道能点背景的人 */
.st-close {
  position: absolute; top: 10px; right: 12px;
  padding: 6px 12px; min-height: 34px;
  font-family: inherit; font-size: 12px; letter-spacing: .08em;
  color: var(--ink-dim);
  background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
}

/* ---------- 确定上线的角色 ---------- */

/* 换色不新增颜色变量，借 base.css 的 --live（生效中那个绿），
   兑上一点旧纸白提亮：原色在深底上太闷，名字要能从一排白名字里跳出来。
   刻意没用 --gold：金色在站里是链接色，名字变金会像可以点。 */
.st-list .item-name.is-live,
.kx-index button.is-live {
  color: color-mix(in srgb, var(--live) 62%, var(--ink));
}
/* 名单里还要加个同色描边：标签云里几十个小块，只换字色扫不到 */
.kx-index button.is-live {
  border-color: color-mix(in srgb, var(--live) 55%, var(--line));
}

/* 「确定上线！」角标：只出现在卡片里，名单里不挂（见 story.js 的注释）。
   放在名字后面、张数前面，读的顺序就是「谁 → 上不上线 → 有几张」 */
.st-live {
  flex: none;
  padding: 1px 7px;
  font-size: 11px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--live) 62%, var(--ink));
  border: 1px solid currentColor; border-radius: 3px;
}

/* 缺项说明：放页面最后，是给「我家角色怎么没有」的人看的 */
.st-note {
  margin: 18px 0 0;
  font-size: 12px; color: var(--ink-mute);
}
.st-note b { color: var(--ink-dim); font-weight: 600; }

@media (min-width: 768px) {
  .st-shots { margin-inline: -18px; padding-inline: 18px; }
  .st-shot img { height: 200px; }
}