/* 宣传片合集页（public/films.html）。
壳和教程片合集页（guide.css）同一套：tokens.css 给色和字，home.css 给页眉
和品牌锁版，这一份只写这一页自己的东西。命名前缀 fl-，和那边的 gd- 分开——
两页的卡片长得不一样，共用一套类名会变成一堆覆盖。
## 和 /guide 的两处不同
- **封面里有戏，不是一张录屏。** 所以卡片更宽（360 起，那边 260），一排
两张；封面上压一条从下往上的暗角，片名和片长直接落在画面里——这是电影
海报的排法，而教程那边是「图 + 说明」的排法。
- **没有标签栏。** 五支片就是全部，分不出栏来；分栏只会让人以为还有别的栏。
双语显隐只管**静态那几块**（标题、引子、页脚、灯箱按钮）。网格里的卡片由
films.js 按当前语言整张重画，不靠 CSS 显隐——中日两版是两支片，封面、片长、
片名全都不一样，不是同一份 DOM 换个字符串就能切的（这也是 guide 那边至今
切语言不换封面的原因，那边封面是建的时候定死的）。 */
/* 只用属性选择器，**不要用 :lang()**：中文下 ，:lang(zh)
会命中每一个继承了语言的容器，整块内容 display:none，只剩页眉。规则也只限
定在内容区里——页眉的品牌「あのね」和语言开关的 JP 按钮自己带 lang="ja"，
挂到整页会把它们一起抹掉。灯箱是 的兄弟，得单列一份，否则「閉じる」
和「关闭」会一起印在按钮上。 */
.fl-main [lang="zh"], .fl-main [lang="en"],
.fl-box [lang="zh"], .fl-box [lang="en"] { display: none; }
:root[data-lang="zh"] .fl-main [lang="ja"], :root[data-lang="zh"] .fl-main [lang="en"],
:root[data-lang="zh"] .fl-box [lang="ja"], :root[data-lang="zh"] .fl-box [lang="en"] { display: none; }
:root[data-lang="zh"] .fl-main [lang="zh"],
:root[data-lang="zh"] .fl-box [lang="zh"] { display: revert; }
:root[data-lang="en"] .fl-main [lang="ja"], :root[data-lang="en"] .fl-main [lang="zh"],
:root[data-lang="en"] .fl-box [lang="ja"], :root[data-lang="en"] .fl-box [lang="zh"] { display: none; }
:root[data-lang="en"] .fl-main [lang="en"],
:root[data-lang="en"] .fl-box [lang="en"] { display: revert; }
.fl-main {
width: min(960px, 100%);
margin: 0 auto;
padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2rem) 4rem;
}
.fl-title-page {
margin: 0 0 6px;
font-family: var(--mincho);
font-weight: 500;
font-size: 1.35rem;
letter-spacing: 0.16em;
color: var(--ink);
}
.fl-lead {
margin: 0 0 6px;
font-size: 0.8rem;
line-height: 1.75;
color: var(--ink-3);
max-width: 42em;
}
.fl-note {
margin: 0 0 22px;
font-size: 0.72rem;
line-height: 1.7;
color: var(--ink-3);
max-width: 42em;
}
.fl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
/* 一张卡就是一支片：封面在上（片名和片长压在画面里），角色名和那一句在下。 */
.fl-card {
display: flex;
flex-direction: column;
padding: 0;
text-align: left;
font: inherit;
color: inherit;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
width: 100%;
}
.fl-card:hover,
.fl-card:focus-visible { border-color: var(--shu); outline: none; }
.fl-thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--paper-3) center / cover no-repeat;
}
/* 从下往上的暗角。片名要落在画面里，而画面下沿是什么颜色每支片都不一样——
不压这一层，白沙滩上的白字就没了。 */
.fl-thumb::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0.12) 46%, transparent 70%);
}
.fl-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: rgba(255, 253, 248, 0.92);
display: grid;
place-items: center;
transition: transform 180ms;
}
.fl-play::before {
content: "";
border-left: 0.7rem solid var(--shu);
border-top: 0.44rem solid transparent;
border-bottom: 0.44rem solid transparent;
margin-left: 0.16rem;
}
.fl-card:hover .fl-play { transform: translate(-50%, -50%) scale(1.08); }
/* 片名压在封面上。明朝体、留白宽——它是片名，不是一行说明。 */
.fl-film {
position: absolute;
left: 14px;
right: 14px;
bottom: 11px;
font-family: var(--mincho);
font-size: 1.02rem;
line-height: 1.45;
letter-spacing: 0.08em;
color: #fffdf8;
text-shadow: 0 1px 10px rgba(10, 8, 6, 0.7);
}
.fl-len {
position: absolute;
right: 10px;
top: 10px;
font-size: 0.68rem;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
color: rgba(255, 253, 248, 0.92);
background: rgba(10, 10, 12, 0.48);
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 999px;
padding: 2px 8px;
}
.fl-meta {
display: flex;
flex-direction: column;
gap: 5px;
padding: 12px 14px 14px;
flex: 1;
}
.fl-who {
font-family: var(--mincho);
font-size: 0.9rem;
letter-spacing: 0.1em;
color: var(--ink);
}
.fl-line {
font-size: 0.74rem;
line-height: 1.65;
color: var(--ink-3);
}
/* 还没传上去的那几支：和挑人墙上「未体验」、教程页「準備中」同一套处理。
盘上出了片 ≠ 页面上有——没传就只有 404，那是一格黑封面加一个点了不播的钮。 */
.fl-card[data-state="soon"] { cursor: default; }
.fl-card[data-state="soon"] .fl-meta { background: var(--paper-3); }
.fl-card[data-state="soon"] .fl-who { color: var(--ink-3); }
.fl-card[data-state="soon"] .fl-thumb { background: var(--paper-3); }
.fl-card[data-state="soon"] .fl-thumb::before { display: none; }
.fl-card[data-state="soon"] .fl-film { color: var(--ink-3); text-shadow: none; }
.fl-card[data-state="soon"]:hover { border-color: var(--rule); }
.fl-soon-tag {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 0.66rem;
letter-spacing: 0.1em;
color: var(--ink-3);
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 2px;
padding: 1px 6px;
}
/* 灯箱。和 guide.css 那一个同构，颜色同样钉死浅色：幕布是黑的，不跟主题走，
用 --paper-2 在暗色主题下会被翻成 #1c1a17，标题当场沉进幕布里。 */
.fl-box {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(10, 8, 6, 0.82);
}
.fl-box[hidden] { display: none; }
.fl-box-inner { width: min(1100px, 100%); display: grid; gap: 10px; }
.fl-box video {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
background: #131210;
border-radius: var(--radius-sm, 4px);
}
.fl-box-bar { display: flex; align-items: baseline; gap: 10px; color: #fffdf8; }
.fl-box-title { font-family: var(--mincho); font-size: 1rem; letter-spacing: 0.06em; }
.fl-box-sub { font-size: 0.74rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.fl-box-close {
margin-left: auto;
background: none;
border: 1px solid rgba(255, 253, 248, 0.4);
border-radius: 2px;
color: #fffdf8;
font: inherit;
font-size: 0.76rem;
letter-spacing: 0.08em;
padding: 3px 10px;
cursor: pointer;
}
.fl-box-close:hover { border-color: #fffdf8; background: rgba(255, 253, 248, 0.1); }
.fl-foot {
margin-top: 2.4rem;
padding-top: 1rem;
border-top: 1px solid var(--rule);
font-size: 0.76rem;
color: var(--ink-3);
line-height: 1.9;
display: grid;
gap: 0.3rem;
}
.fl-foot a { color: var(--shu); }
/* 手机端：一排一张。360 的列宽在小屏上会溢出，这里换成单列。 */
@media (max-width: 760px) {
.fl-grid { grid-template-columns: 1fr; }
}