/* 界面展示页：通用界面瀑布流 + 职业小界面分格。图片大小不一时由 showcase.js 自动排齐 */
.showcase-jump { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.showcase-jump a { padding: 9px 20px; border: 1px solid rgba(118, 173, 206, .3); border-radius: 999px; color: #c7d2d8; background: rgba(13, 24, 35, .68); font-family: "Microsoft YaHei", "微软雅黑", sans-serif; transition: color .18s, border-color .18s; }
.showcase-jump a:hover, .showcase-jump a:focus-visible { color: #fff; border-color: var(--amber); }
.showcase-jump a.showcase-jump--bianhua:hover, .showcase-jump a.showcase-jump--bianhua:focus-visible { border-color: #ff3b5c; }

.showcase-shell { min-height: 52vh; padding: 72px clamp(24px, 6vw, 110px) 110px; background: #07101a; }
.showcase-group { width: min(1440px, 100%); margin: 0 auto; scroll-margin-top: 24px; --accent: var(--amber); }
.showcase-group--bianhua { --accent: #ff3b5c; }
.showcase-group + .showcase-group { margin-top: 96px; }
.showcase-group > header { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.showcase-group h2 { margin: 0; padding-left: 14px; border-left: 3px solid var(--accent); font-family: var(--body); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; line-height: 1.1; }
.showcase-group > header span { color: #8fa3af; font-size: .86rem; letter-spacing: .1em; }
.showcase-subtitle { margin: 40px 0 0; color: #c7d2d8; font-family: var(--body); font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; }
.showcase-subtitle small { margin-left: 14px; color: #6f838f; font-size: .8rem; font-weight: 400; letter-spacing: .04em; }
.showcase-subtitle::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 10px; background: var(--accent); }

/* 通用界面：等宽列。无 JS 时是普通网格，JS 生效后按行跨度拼成瀑布流 */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; margin-top: 30px; }
.showcase-grid--class { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 18px; }
.showcase-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 24px; }
.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
.is-masonry > * { align-self: start; }

.showcase-shot { margin: 0; min-width: 0; }
.showcase-shot a { position: relative; display: block; overflow: hidden; border: 1px solid rgba(118, 173, 206, .22); border-radius: 10px; background: #04080d; cursor: zoom-in; transition: border-color .18s, transform .18s; }
.showcase-shot a:hover, .showcase-shot a:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.showcase-shot img { display: block; width: 100%; height: auto; }
.showcase-shot figcaption { margin-top: 10px; overflow-wrap: anywhere; color: #b3c0c8; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: .92rem; line-height: 1.5; }
/* 特别长的图只露出上半截，避免把一整列撑得过高；点击可看完整图 */
.showcase-shot.is-long a { aspect-ratio: 1 / 1.8; }
.showcase-shot.is-long img { height: 100%; object-fit: cover; object-position: top; }
.showcase-shot.is-long a::after { content: "点击查看完整长图"; position: absolute; right: 0; bottom: 0; left: 0; padding: 46px 12px 12px; background: linear-gradient(180deg, transparent, rgba(4, 8, 13, .92)); color: #c7d2d8; font-size: .82rem; text-align: center; }

/* 职业按钮：点哪个职业，下方才展开它的截图；没传图的职业置灰 */
.showcase-class-tab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid rgba(118, 173, 206, .22); border-radius: 10px; background: rgba(13, 22, 32, .6); font: 700 1rem "Microsoft YaHei", "微软雅黑", sans-serif; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.showcase-class-tab small { color: #8fa3af; font-size: .78rem; font-weight: 400; white-space: nowrap; }
.showcase-class-tab:hover:not(:disabled), .showcase-class-tab:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.showcase-class-tab[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, rgba(13, 22, 32, .6)); box-shadow: inset 0 -2px 0 var(--accent); }
.showcase-class-tab:disabled { border-style: dashed; background: transparent; cursor: default; }
.showcase-class-tab:disabled .wow-class { opacity: .45; }
.showcase-class-tab:disabled small { color: #56687a; }
.showcase-class-panel { margin-top: 22px; padding: 20px; border: 1px solid rgba(118, 173, 206, .18); border-radius: 12px; background: rgba(13, 22, 32, .5); scroll-margin-top: 24px; }
.showcase-class-panel[hidden] { display: none; }
.showcase-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.showcase-specs h4 { margin-right: 8px !important; }
.showcase-spec-tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border: 1px solid rgba(118, 173, 206, .26); border-radius: 999px; background: transparent; color: #c7d2d8; font: 700 .95rem "Microsoft YaHei", "微软雅黑", sans-serif; cursor: pointer; transition: color .18s, border-color .18s, background .18s; }
.showcase-spec-tab small { color: #8fa3af; font-size: .76rem; font-weight: 400; }
.showcase-spec-tab:hover:not(:disabled), .showcase-spec-tab:focus-visible { border-color: var(--accent); color: #fff; }
.showcase-spec-tab[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: #fff; }
.showcase-spec-tab:disabled { border-style: dashed; color: #5f737f; cursor: default; }
.showcase-spec-tab:disabled small { color: #56687a; }
.showcase-grid[hidden] { display: none; }
.showcase-class-panel h4 { margin: 0; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 1.1rem; }

/* 点击放大 */
.showcase-lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(2, 5, 9, .94); color: #c7d2d8; overflow: auto; }
.showcase-lightbox::backdrop { background: rgba(2, 5, 9, .94); }
.showcase-lightbox-body { display: grid; justify-items: center; align-content: start; gap: 14px; min-height: 100%; padding: 64px 20px 40px; cursor: zoom-out; }
.showcase-lightbox img { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.showcase-lightbox p { margin: 0; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
.showcase-lightbox button { position: fixed; top: 16px; right: 20px; width: 40px; height: 40px; border: 1px solid rgba(118, 173, 206, .35); border-radius: 50%; background: rgba(13, 24, 35, .9); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }

@media (max-width: 700px) {
  .showcase-shell { padding: 48px 16px 80px; }
  .showcase-group + .showcase-group { margin-top: 64px; }
  .showcase-grid { gap: 18px; }
  .showcase-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .showcase-class-tab { padding: 12px; }
  .showcase-class-panel { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .showcase-shot a, .showcase-class-tab, .showcase-spec-tab { transition: none; } }