/* 首杀 · 选英雄（Cover Flow）。脚本是同目录 heroflow.js；依赖 tokens.css，和设计系统里的 fb-wash（淡滤镜）、fb-a-<cid>（名牌色）。
   一张卡就是一张游戏人物卡：深色圆角、底边一道她颜色的厚边（艺人页那套卡片），半身立绘套淡滤镜、下沿化进卡面，底下名牌。
   中间那张正对、最亮；两边斜着往后退、压暗（一层盖上去的暗，不用 filter，滑起来不掉帧）。 */
.hf { --hf-w: 252px; --hf-h: calc(var(--hf-w) * 1.32); position: relative; user-select: none; -webkit-user-select: none; }
.hf__stage { position: relative; height: calc(var(--hf-h) + 34px); perspective: 1100px; perspective-origin: 50% 42%; overflow: hidden; touch-action: pan-y; outline: 0; cursor: grab; -webkit-tap-highlight-color: transparent; }
.hf.is-drag .hf__stage { cursor: grabbing; }
.hf__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--fb-neon-cyan); border-radius: var(--fb-radius-lg); }
.hf__track { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }   /* 3D 里这一层在最前面，点击要穿过它落到卡上 */
.hf__card { --c: var(--a, var(--fb-neon-cyan)); --deep: color-mix(in srgb, var(--c) 42%, #000); --dim: 0;   /* --a 由 fb-a-<cid> 给，这里不能写默认值（会盖掉她的颜色） */
  position: absolute; left: 50%; top: 10px; width: var(--hf-w); height: var(--hf-h); margin-left: calc(var(--hf-w) / -2);
  border-radius: var(--fb-radius-xl); border: 1px solid color-mix(in srgb, var(--c) 40%, #0b0e12); overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--c) 46%, transparent), transparent 72%), color-mix(in srgb, var(--c) 10%, #0b0e12);
  box-shadow: 0 6px 0 var(--deep), 0 22px 40px rgba(0,0,0,.45); will-change: transform; backface-visibility: hidden; transform-origin: 50% 50%; pointer-events: auto; }
.hf__card::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #05060a; opacity: var(--dim); pointer-events: none; }
.hf__pic { position: absolute; inset: 0 0 18% 0; z-index: 1; --wash: var(--c); --wash-fade: 34%; }
.hf__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; -webkit-user-drag: none; }
.hf__plate { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: grid; justify-items: start; gap: 6px; }
.hf__plate b { font: 400 32px/36px var(--font-display); letter-spacing: .04em; color: var(--fb-tube); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.hf__plate i { --fb-n: 2px; padding: 1px 8px; font: 700 12px/18px var(--font-body); font-style: normal; background: var(--c); color: var(--a-ink, var(--fb-night));
  clip-path: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n))); }
.hf__card.is-on { border-color: var(--c); box-shadow: 0 6px 0 var(--deep), 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 26px 50px rgba(0,0,0,.5); }
/* 「全部」那张：一张店里的大图当底，名牌是夜色 */
.hf__card.is-all { --c: var(--fb-neon-cyan); }
.hf__card.is-all .hf__pic { inset: 0; --wash-fade: 46%; }
.hf__card.is-all .hf__pic img { object-position: 50% 50%; }

/* 两边的箭头：像素键 */
.hf__nav { position: absolute; z-index: 5; top: calc(10px + var(--hf-h) / 2 - 24px); display: grid; place-items: center; width: 44px; height: 48px; border: 0; padding: 0; background: rgba(5,6,8,.72); color: var(--fb-ink); cursor: pointer;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  transition: background var(--fb-dur-state), transform var(--fb-dur-press); -webkit-tap-highlight-color: transparent; }
.hf__nav--prev { left: max(8px, calc(50% - var(--hf-w) * 1.9)); } .hf__nav--next { right: max(8px, calc(50% - var(--hf-w) * 1.9)); }
.hf__nav i { width: 14px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 6' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h1v1H2zM1 2h1v2H1zM2 4h1v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 6' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h1v1H2zM1 2h1v2H1zM2 4h1v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hf__nav--next i { rotate: 180deg; }
@media (hover: hover) { .hf__nav:not(:disabled):hover { background: rgba(5,6,8,.92); } }
.hf__nav:active { transform: translateY(2px); }
.hf__nav:disabled { opacity: .3; cursor: default; }
.hf__nav:focus-visible { outline: 2px solid var(--fb-neon-cyan); outline-offset: 2px; }
/* 底下一排小方点：一张一颗，中间那张亮 */
.hf__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.hf__dots i { width: 6px; height: 6px; background: currentColor; opacity: .3; transition: opacity var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-pop); }
.hf__dots i.is-on { opacity: 1; transform: scale(1.5); }

/* 手机：一张卡要占得住 */
@media (max-width: 767px) { .hf { --hf-w: min(64vw, 270px); } .hf__nav { width: 38px; height: 44px; } .hf__plate b { font-size: 28px; line-height: 32px; } }
@media (min-width: 768px) and (max-height: 480px) { .hf { --hf-w: 178px; } .hf__plate b { font-size: 24px; line-height: 28px; } .hf__plate { left: 10px; bottom: 10px; } }
/* 矮的电脑屏（1280×720、1100×620 这一档）：卡小一号，底下那张信息卡的名字第一屏就露得出来 */
@media (min-width: 768px) and (min-height: 481px) and (max-height: 760px) { .hf { --hf-w: 212px; } .hf__plate b { font-size: 28px; line-height: 32px; } }

/* 减少动态效果：平铺横滑，不转不退 */
.hf--flat .hf__stage { height: auto; perspective: none; overflow: visible; cursor: default; touch-action: auto; }
.hf--flat .hf__track { position: static; pointer-events: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(16px, calc(50% - var(--hf-w) / 2)) 16px; scrollbar-width: none; }
.hf--flat .hf__track::-webkit-scrollbar { display: none; }
.hf--flat .hf__card { position: relative; left: auto; top: auto; margin: 0; flex: none; scroll-snap-align: center; will-change: auto; }
.hf--flat .hf__card:not(.is-on) { --dim: .35; }
.hf--flat .hf__nav { display: none; }

/* ───────── 中间那位的信息卡（回放、放映厅共用）：名字、称号、一句话人设、战绩、她最近一张会动的照片、两颗键。深色圆角卡（fb-card）放在主题色色块上 ───────── */
.hf-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px; align-items: center; margin-top: 14px; padding: 20px 24px; }
.hf-info__who { display: grid; gap: 8px; align-content: start; min-width: 0; }
.hf-info__kick { margin: 0; font: 700 12px/18px var(--font-body); letter-spacing: .14em; color: var(--theme); }
.hf-info__name { margin: 0; font: 400 52px/1.05 var(--font-display); letter-spacing: .04em; color: var(--fb-tube); }
.hf-info__line { margin: 0; font: 500 15px/24px var(--font-body); color: var(--fb-ink-2); max-width: 34em; }
.hf-info__stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 2px; padding: 0; list-style: none; }
.hf-info__stats li { display: grid; gap: 0; }
.hf-info__stats b { font: 400 26px/30px var(--font-latin); color: var(--fb-ink); }
.hf-info__stats span { font: 400 12px/16px var(--font-body); color: var(--fb-ink-3); }
.hf-info__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hf-info__moment { margin: 0; display: grid; gap: 10px; min-width: 0; }
.hf-info__moment[hidden] { display: none; }
.hf-info__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--fb-radius-md); background: #05060a; --wash-fade: 22%; }
.hf-info__media img, .hf-info__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-info__media video[hidden] { display: none; }
.hf-info__moment figcaption { display: grid; gap: 4px; }
.hf-info__moment q { quotes: "「" "」"; font: 500 15px/23px var(--font-body); color: var(--fb-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hf-info__moment q[hidden] { display: none; }
.hf-info__moment small { font: 500 12px/16px var(--font-mono); color: var(--fb-ink-3); }

/* 键：像素切角 + 厚底。「看她的局」是她的颜色，「看最新一局」是看的绿 */
.hf-key { --face: var(--fb-surface-2); --edge: var(--fb-line-strong); --key: #020304; --txt: var(--fb-ink); --fb-n: 4px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--fb-control-md); padding: 0 18px;
  border: 0; background: none; color: var(--txt); font: 700 14px/20px var(--font-body); white-space: nowrap; cursor: pointer; filter: drop-shadow(0 3px 0 var(--key)); transition: transform var(--fb-dur-press) var(--fb-ease-out), filter var(--fb-dur-state); -webkit-tap-highlight-color: transparent; }
.hf-key::before, .hf-key::after { content: ""; position: absolute; clip-path: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n))); }
.hf-key::before { inset: 0; z-index: -2; background: var(--edge); }
.hf-key::after { inset: 2px; z-index: -1; background: var(--face); }
.hf-key--go { --face: var(--theme); --edge: var(--theme); --key: var(--f-deep); --txt: var(--on); }
.hf-key--play { --face: var(--fb-neon-green); --edge: var(--fb-neon-green); --key: var(--fb-green-key); --txt: var(--fb-on-green); }
@media (hover: hover) { .hf-key:hover { transform: translateY(-2px); filter: drop-shadow(0 5px 0 var(--key)); } }
.hf-key:active { transform: translateY(3px); filter: none; }
.hf-key:focus-visible { outline: 2px solid var(--fb-neon-cyan); outline-offset: 3px; }


/* 信息卡在各尺寸下 */
@media (min-width: 768px) and (max-width: 1099px) { .hf-info { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .hf-info { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; padding: 16px; }
  .hf-info__name { font-size: 40px; }
  .hf-info__line { font-size: 14px; line-height: 22px; }
  .hf-info__stats { gap: 6px 16px; }
  .hf-info__stats b { font-size: 22px; line-height: 26px; }
  .hf-info__acts .hf-key { flex: 1; }
}
@media (min-width: 768px) and (max-height: 480px) {
  .hf-info { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 14px 16px; gap: 16px; margin-top: 8px; }
  .hf-info__name { font-size: 36px; } .hf-info__line { font-size: 13px; line-height: 20px; }
  .hf-info__stats b { font-size: 20px; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .hf-key, .hf-key::before, .hf-key::after { transition: none !important; } .hf-key:hover, .hf-key:active { transform: none; } }