/* The approved light-blue visual direction; native transparent-frame playback. */
.animation-card .stage { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; overflow:hidden; }
.stage.white { background:#fff; }
.stage.black { background:#253442; }
.stage.checker { background:repeating-conic-gradient(#f7f9fb 0% 25%,#dee5eb 0% 50%) 0 / 24px 24px; }
.stage video.anim,.stage .poster { display:block; object-fit:contain; max-width:100%; max-height:100%; position:relative; z-index:1; background:transparent; }
.stage video.anim { transition:opacity .12s; pointer-events:none; }
.stage .poster { position:absolute; inset:0; margin:auto; }
.effect-layer { position:absolute; pointer-events:none; left:calc(50% - var(--css,100%) / 2); top:calc(50% - var(--css,100%) / 2); width:var(--css,100%); height:var(--css,100%); }
/* 画面居中（2026-09-28）：--dx / --dy 是这段要挪多少（按画面边长的比例），人物、封面、特效层一起挪；墙不挪（迷你系列不设 --dx） */
.stage .poster,.stage video.anim,.stage .effect-layer { translate:calc(var(--dx,0) * var(--css,0px)) calc(var(--dy,0) * var(--css,0px)); }
.effect-layer svg { display:block; width:100%; height:100%; }
/* 迷你系列的墙（屏幕外）：显示层，盖在人物画面上；按居中的人物画面（边长 --css）对齐，--wall 是墙左缘占画面宽度的比例 */
.stage .mini-wall { position:absolute; z-index:2; pointer-events:none; top:calc(50% - var(--css,100%) / 2); height:var(--css,100%); left:calc(50% - var(--css,100%) / 2 + var(--css,100%) * var(--wall)); right:calc(50% - var(--css,100%) / 2); background:linear-gradient(90deg,#d7e0e9,#edf0f5 15px); box-shadow:-2px 0 #b6c4d0; }
.stage.has-wall .new-label { z-index:3; }
.effect-behind { z-index:0; }
.effect-front { z-index:2; }
.stage .buf { display:none; position:absolute; z-index:3; top:14px; left:14px; font-size:11px; color:#7a8793; background:#ffffffeb; padding:5px 9px; border-radius:6px; }
.stage .buf.on { display:block; }
.stage .hint { display:none; position:absolute; z-index:4; inset:auto 15px 15px; padding:9px 11px; border:1px solid #e2eaf1; border-radius:9px; background:#fffffff2; color:#7590a5; gap:8px; font-size:10px; align-items:center; }
.stage .hint.err { color:#ac6e6e; overflow-wrap:anywhere; }
.hint button { flex-shrink:0; border:0; background:#e7eff6; border-radius:5px; color:#486f90; padding:6px 8px; font-size:11px; }
.open-frame { position:absolute; z-index:3; right:15px; bottom:15px; border:1px solid #e3ebf2; background:#fffffff0; border-radius:7px; padding:7px 9px; color:#64829a; font-size:11px; opacity:0; transition:opacity .2s; }
.animation-card:hover .open-frame,.animation-card:focus-within .open-frame { opacity:1; }
.card-actions .icon-button { width:auto; font-size:11px; min-width:34px; }
.card-kind { text-transform:uppercase; }
.card-caption { min-height:44px; }
.character-note { display:flex; align-items:center; gap:28px; padding:21px 33px; margin-top:35px; border:1px solid #e1eaf1; border-radius:18px; background:#eef4f9; position:relative; overflow:hidden; }
.character-note img { width:116px; height:116px; object-fit:contain; display:block; }
.character-note h2 { font-size:18px; letter-spacing:.5px; margin:10px 0; }
.character-note p { font-size:11px; color:#7d94a6; margin:0 0 10px; }
.character-note a { font-size:11px; color:#587e9d; }
.character-star { margin-left:auto; font-size:50px; font-weight:200; color:#c4d7e5; }
.archive-note { color:#8398a9; font-size:11px; line-height:1.9; margin:0 0 25px; padding:13px 17px; border-top:1px solid #e1eaf1; }
.archive-note summary { cursor:pointer; }
.archive-note a { text-decoration:underline; text-underline-offset:3px; }
.viewer-shell { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); }
.viewer-shell .stage { align-self:start; margin:auto 0; aspect-ratio:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; width:100%; }
.viewer-info { min-width:0; padding:52px 26px 26px; }
.viewer-info>p { margin:12px 0 19px; }
.viewer-controls { gap:8px; }
.viewer-controls button { font-size:11px; padding:8px 11px; }
.version-options { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0 8px; }
.version-options button { font-size:10px; line-height:1.5; text-align:left; color:#738ca0; background:#f6f9fc; border:1px solid #e1e9f1; border-radius:7px; padding:7px 9px; }
.version-options button[aria-pressed=true] { border-color:#7e9db6; color:#426c8c; background:#edf4f9; }
.variant-status { color:#a28479; font-size:10px; line-height:1.6; min-height:16px; }
.viewer-timeline { margin:16px 0 9px; }
.viewer-timeline .counter { width:auto; margin-right:auto; color:#9caeba; font-size:10px; }
.viewer-timeline output { width:auto; }
.player-tech { margin:19px 0 0; border-top:1px solid #edf1f5; padding-top:12px; font-size:10px; color:#8b9eac; line-height:1.8; }
.player-tech summary { cursor:pointer; }
.player-tech .res { margin:10px 0; }
.player-tech b { font-weight:500; color:#597b95; }
.player-tech a { display:block; margin-top:6px; color:#6085a0; }
.viewer-info .background-options { justify-content:flex-start; }
.viewer-info .options-label { display:none; }
.viewer-info .footnote { color:#9aabb8; font-size:10px; line-height:1.8; margin:16px 0 0; }
.sleep-collection { margin-top:58px; padding-top:45px; border-top:1px solid #dce7ef; }
.sleep-collection-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 28px; padding:26px 32px; border:1px solid #dfeaf2; border-radius:18px; background:linear-gradient(115deg,#edf5fa,#f8fbfd); }
.sleep-collection-intro h2 { font-size:26px; margin:10px 0 8px; }
.sleep-collection-intro p { margin:0; color:#7c92a5; font-size:12px; line-height:1.8; }
.sleep-collection-count { flex-shrink:0; color:#7797b0; font-size:30px; font-variant-numeric:tabular-nums; }
.sleep-collection-count small { display:block; color:#9aabb8; font-size:10px; text-align:center; }
.sleep-collection-note { margin:20px 0 0; color:#8da1b1; font-size:11px; line-height:1.8; }
/* 页眉两个栏目入口（睡眠序列、迷你系列）并排 */
.header-links { display:flex; align-items:center; gap:24px; }
@media (max-width:540px) { .header-links { gap:12px; } }
@media (max-width:760px) { .viewer-shell { grid-template-columns:1fr; }.viewer-shell .stage { aspect-ratio:auto; height:min(calc(100vw - 48px),48dvh); }.viewer-info { padding:23px; }.open-frame { opacity:1; }.card-caption { min-height:44px; }.character-note { gap:15px; padding:15px; }.character-note h2 { font-size:15px; }.character-star { display:none; } }
@media (max-width:540px) { .card-caption { min-height:0; }.character-note img { width:88px; height:100px; }.character-note .eyebrow { font-size:8px; letter-spacing:1px; }.character-note h2 { font-size:14px; line-height:1.7; }.character-note p { line-height:1.7; }.character-note { margin-top:22px; }.viewer-shell .stage { height:min(calc(100vw - 24px),44dvh); }.viewer-info { padding:20px; }.viewer-controls { gap:6px; }.viewer-controls button { min-height:39px; }.speed-control { margin-left:0; }.viewer-info h2 { margin:9px 0; }.viewer-info>p { margin:9px 0 15px; }.quiet-note { max-width:98px; }.filters { width:auto; }.collection-toolbar { gap:6px; }.filter { padding:8px 10px; }.global-actions { margin-left:0; }.background-options button { min-height:34px; }.sleep-collection { margin-top:38px; padding-top:30px; }.sleep-collection-intro { padding:20px; }.sleep-collection-intro h2 { font-size:21px; }.sleep-collection-intro p { font-size:11px; }.sleep-collection-count { font-size:23px; } }
/* CF 版手机上一行两张：放大按钮缩成角落里的小圆圈，别挡住人物（collection.css 在 gallery.css 之后加载，这条得放这里才生效） */
@media (max-width:540px) { .open-frame { right:7px; bottom:7px; width:28px; height:28px; padding:0; font-size:0; border-radius:50%; display:flex; align-items:center; justify-content:center; }.open-frame::after { content:"↗"; font-size:12px; line-height:1; } }

/* 2026-09-28：中文 / EN 切换（照哈希仙人），放在页头右边 */
.header-tools { display:flex; align-items:center; gap:24px; }
.header-link span.label,.filter span.label { font-size:inherit; margin-left:0; opacity:1; }
.lang-switch { display:flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.lang-switch button { border:0; background:transparent; color:#8e9eac; font-size:11px; line-height:1; letter-spacing:.5px; padding:6px 10px; min-height:26px; border-radius:999px; cursor:pointer; }
.lang-switch button[aria-pressed="true"] { background:#486f90; color:#fff; }
.lang-switch button:focus-visible { outline:2px solid #9fbad0; outline-offset:1px; }

/* 顶部圆圈里的报错小剧场：视频盖在静帧上，样子和静帧一样（微微歪、悬停抬一下） */
.hero-art .hero-video { position:absolute; inset:0; width:100%; height:100%; z-index:2; object-fit:contain; transform:rotate(-2deg); transition:transform .4s,opacity .25s; opacity:0; pointer-events:none; background:transparent; }
.hero-art .hero-video.on { opacity:1; }
.hero-art:hover .hero-video { transform:rotate(1deg) translateY(-4px); }

/* 版权与授权（照哈希仙人的「版权与授权」） */
.credits { padding:30px 0 34px; border-top:1px solid var(--line); color:#8494a3; font-size:11px; line-height:1.9; }
.credits h2 { margin:0 0 10px; font-size:13px; font-weight:600; letter-spacing:1px; color:#5f7c93; }
.credits p { margin:0 0 7px; max-width:900px; }
.credits a,.site-footer a { color:#4a789d; text-decoration:underline; text-decoration-color:#c5d5e2; text-underline-offset:2px; }
.site-footer a { color:inherit; }
.credits a:hover,.site-footer a:hover { text-decoration-color:currentColor; }
@media (max-width:540px) {
  /* 手机上页头放不下「品牌 + 两个栏目 + 语言」：栏目链接去掉箭头，每一块都不折行 */
  .header-link span[aria-hidden="true"] { display:none; }
  .header-link,.lang-switch button,.brand-sub { white-space:nowrap; }
  .brand-sub { letter-spacing:1.4px; }
  .header-tools { gap:10px; }
  .lang-switch button { font-size:10px; padding:5px 7px; min-height:24px; }
  .credits { padding:24px 0 26px; font-size:10.5px; line-height:1.85; }
}
/* 很窄的手机（≤370px）连两个栏目链接也放不下：只留品牌和语言切换，往下滑就能看到各栏 */
@media (max-width:370px) { .header-links { display:none; } }

/* 英文版：中文排版用的字距放在英文上太松，收紧一些 */
html[lang="en"] h1 { letter-spacing:0; }
html[lang="en"] .brand { letter-spacing:.5px; }
html[lang="en"] .hero .eyebrow { letter-spacing:1px; }
html[lang="en"] .hero-description { letter-spacing:.1px; }
html[lang="en"] .header-link { letter-spacing:.3px; }
html[lang="en"] h2 { letter-spacing:.2px; }
html[lang="en"] .collection-end p { letter-spacing:.5px; }

/* 页脚：仓库地址和作者（照哈希仙人，2026-09-28 鹿鹿：这个最终要上 clawd-themes 仓库） */
.site-footer .footer-links { flex-shrink:1; text-align:right; }
.nowrap { white-space:nowrap; }
@media (max-width:760px) { .site-footer .footer-links { text-align:left; } }