/* ============================================================
   catalog.css —— 资料库栏目样式（证物图鉴 / 监牢地图 / 表情包 / CG画廊）
   与 light.css 同一套设计语言：哥特紫罗兰 + var(--acc) 角色主色
   只在新增栏目页里加载，不影响既有 46 个页面
   ============================================================ */

/* —— 跳转索引（案件目录 / 楼层目录） —— */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.jump a {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    border: 1px solid #3a2b52; background: rgba(36,26,56,.55);
    color: #c3b6dc; font-size: 13px; border-bottom: none;
    transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.jump a:hover { border-color: var(--acc, #7b4fa1); color: #e3c8ff; background: rgba(58,43,82,.75); transform: translateY(-2px); }

/* —— 资料库导航：按本站栏目分组，不再沿用来源站的单行平铺 —— */
.navgroup { flex-direction: column; align-items: stretch; gap: 5px; margin: 14px 0 10px; }
.navgroup .jgrp { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.navgroup .glab {
    flex: 0 0 auto; min-width: 64px; color: #6f6188;
    font-size: 12px; letter-spacing: 2px;
}
@media (max-width: 640px) { .navgroup .glab { min-width: 100%; } }

/* —— 证物图鉴：图标 + 名称 + 说明 —— */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 18px 0; }
figure.clue {
    display: flex; gap: 12px; align-items: flex-start; margin: 0;
    border: 1px solid #3a2b52; border-radius: 12px; padding: 12px 14px;
    background: rgba(36,26,56,.45);
    transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
figure.clue:hover { border-color: var(--acc, #7b4fa1); background: rgba(58,43,82,.6); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(120,70,190,.3); }
figure.clue img {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px;
    border: 1px solid #4a3568; background: rgba(0,0,0,.25);
    object-fit: contain; image-rendering: auto; cursor: zoom-in;
}
figure.clue figcaption { flex: 1; min-width: 0; margin: 0; text-align: left; }
figure.clue .cname { display: block; color: var(--acc, #c9a7f5); font-size: 14px; font-weight: bold; letter-spacing: .5px; margin-bottom: 3px; }
figure.clue .cdesc { display: block; color: #a396be; font-size: 12.5px; line-height: 1.7; }

/* —— 监牢地图：楼层平面图 —— */
.floormap { margin: 18px 0; }
.floormap img { width: 100%; border-radius: 12px; border: 1px solid #3a2b52; cursor: zoom-in;
    box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.floormap figcaption { color: #8a7aa8; font-size: 12.5px; }

/* —— 场景卡：16:9 场景图 + 区域名 + 说明 —— */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 16px 0; }
figure.scene {
    margin: 0; border: 1px solid #3a2b52; border-radius: 12px; overflow: hidden;
    background: rgba(36,26,56,.45);
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
figure.scene:hover { border-color: var(--acc, #7b4fa1); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(120,70,190,.32); }
figure.scene img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0; border-bottom: 1px solid #3a2b52; cursor: zoom-in; }
figure.scene figcaption { margin: 0; padding: 10px 14px 12px; text-align: left; }
figure.scene .sname { display: block; color: var(--acc, #c9a7f5); font-size: 15px; font-weight: bold; margin-bottom: 3px; }
figure.scene .sdesc { display: block; color: #a396be; font-size: 12.5px; line-height: 1.7; }

/* —— 表情包墙 —— */
.stkwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 16px 0; }
.stkwall figure { margin: 0; }
.stkwall img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; cursor: zoom-in;
    border: 1px solid #33264a; background: rgba(0,0,0,.22); padding: 3px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.stkwall img:hover { transform: translateY(-3px) scale(1.05); border-color: var(--acc, #7b4fa1); box-shadow: 0 8px 20px rgba(0,0,0,.5); }

/* —— CG 画廊：2:1 原比例，列式排布 —— */
.cgwall { columns: 2; column-gap: 12px; margin: 18px 0; }
.cgwall figure { margin: 0 0 12px; break-inside: avoid; }
.cgwall img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px;
    border: 1px solid #33264a; cursor: zoom-in; transition: transform .3s, filter .3s; }
.cgwall img:hover { transform: scale(1.02); filter: saturate(1.12) brightness(1.08); }
@media (min-width: 700px) { .cgwall { columns: 3; } }
@media (min-width: 940px) { .cgwall { columns: 4; } }

/* —— 角色图鉴：头像卡片 —— */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; }
a.pcard {
    display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 16px 10px 14px;
    border: 1px solid #3a2b52; border-radius: 14px; background: rgba(36,26,56,.45);
    text-decoration: none; border-bottom: 1px solid #3a2b52;
    transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
a.pcard:hover { border-color: var(--acc, #7b4fa1); background: rgba(58,43,82,.6); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(120,70,190,.3); }
a.pcard img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #4a3568; background: rgba(0,0,0,.25); }
a.pcard:hover img { border-color: var(--acc, #c9a7f5); }
a.pcard .pname { color: #e3c8ff; font-size: 14.5px; font-weight: bold; letter-spacing: 1px; }
a.pcard .pjp { color: #8a7aa8; font-size: 11.5px; }

/* —— 资料出处标注 —— */
.srcnote {
    margin: 26px 0 0; padding: 12px 16px; border-radius: 10px;
    border: 1px dashed #3a2b52; background: rgba(36,26,56,.35);
    color: #7d6f9a; font-size: 12.5px; line-height: 1.8;
}
.srcnote a { color: #9c86c9; }

/* —— 小屏 —— */
@media (max-width: 640px) {
    .cgrid { grid-template-columns: 1fr; }
    .sgrid { grid-template-columns: 1fr; }
    .stkwall { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
    figure.clue img { flex-basis: 56px; width: 56px; height: 56px; }
}

/* —— 手机：单列 CG、贴纸更密、轻触热区 —— */
@media (max-width: 430px) {
    .cgwall { columns: 1; column-gap: 0; }
    .cgwall img:hover { transform: none; }
    .stkwall { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
    .srcnote { font-size: 12px; }
}