/* =====================================================================
   皮肤布局：gallery —— 美术馆（留白 + 展厅横滑 + 编号索引）
   ---------------------------------------------------------------------
   骨架特征：极细横线导航、无卡片的图版、每层展厅左侧竖排编号、
   横向滑动的展品轨、年份做成斜杠索引。与影院/终端/杂志/街机/野兽都不同。
   ===================================================================== */

.gskin-header {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.gskin-nav {
    max-width: 1560px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 20px;
    padding: 18px 40px;
}
.gskin-logo {
    font-size: 15px; letter-spacing: .34em; text-transform: uppercase;
    font-weight: 500; color: var(--text);
}
.gskin-navlinks { display: flex; gap: 26px; justify-content: center; }
.gskin-navlinks a {
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--muted); padding: 4px 0; border-radius: 0; background: none;
}
.gskin-navlinks a::after { display: none; }
.gskin-navlinks a:hover { color: var(--text); background: none; }
.gskin-account { display: flex; gap: 14px; justify-content: flex-end; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.gskin-account a { color: var(--muted); }
.gskin-account a:hover { color: var(--text); }
.gskin-account .lang-switch { background: none; border: 0; padding: 0; gap: 8px; }
.gskin-account .lang-switch a { padding: 0; font-size: 10.5px; }
.gskin-account .lang-switch a.is-current { background: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.gskin-main { max-width: 1560px; padding: 0 40px 0; }

/* 首屏：整幅展品 */
.gskin-hero {
    position: relative;
    margin: 0 calc(50% - 50vw);
    height: 70vh; min-height: 480px;
    border-radius: 0;
    display: flex; align-items: flex-end;
    overflow: hidden;
}
.gskin-hero .hero-video { object-fit: cover; }
.gskin-hero-content {
    max-width: 900px;
    padding: 0 40px 54px;
    gap: 12px;
}
.gskin-hero-content h1 {
    font-size: 54px; font-weight: 300; line-height: 1.06;
    letter-spacing: -.02em; color: #fff;
}
.gskin-eyebrow {
    margin: 0; font-size: 10px; letter-spacing: .38em;
    text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.gskin-hero .hero-description { color: rgba(255, 255, 255, .72); font-size: 15px; max-width: 44ch; }

/* 展厅：左侧竖排编号 + 右侧横滑 */
.gskin-hall {
    display: grid; grid-template-columns: 132px minmax(0, 1fr);
    gap: 32px;
    padding: 56px 0;
    border-top: 1px solid var(--line);
}
.gskin-hall:first-of-type { border-top: 0; }
.gskin-hall-meta { display: flex; flex-direction: column; gap: 10px; }
.gskin-hall-no {
    font-size: 11px; letter-spacing: .3em; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.gskin-hall-title {
    margin: 0; font-size: 17px; font-weight: 400; line-height: 1.35;
    letter-spacing: .01em;
}
.gskin-hall-more {
    margin-top: 4px; font-size: 10.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line); padding-bottom: 2px; align-self: flex-start;
}
.gskin-hall-more:hover { color: var(--text); border-color: var(--text); }

.gskin-track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: 300px; gap: 26px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.gskin-track > * { scroll-snap-align: start; }

/* 展品卡：图 + 图注，无边框 */
.gx-card { display: flex; flex-direction: column; gap: 10px; }
.gx-art {
    display: block; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--bg-soft);
}
.gx-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.gx-card:hover .gx-art img { transform: scale(1.03); opacity: .92; }
.gx-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--muted); font-size: 34px; font-weight: 300;
}
.gx-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gx-title {
    margin: 0; font-size: 14px; font-weight: 400; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gx-meta {
    margin: 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); white-space: nowrap;
}
.gx-price { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.gx-price.is-free { color: var(--accent); }

/* 底部长索引：年份 / 厂商 斜杠分隔 */
.gskin-ledger { padding: 40px 0 8px; border-top: 1px solid var(--line); }
.gskin-ledger-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 6px 0; }
.gskin-ledger-label {
    min-width: 110px; font-size: 10px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--muted);
}
.gskin-ledger-items { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--text-soft); }
.gskin-ledger-items a { color: var(--text-soft); }
.gskin-ledger-items a:hover { color: var(--accent); }
.gskin-ledger-items span.sep { color: var(--line); }

.gskin-foot {
    max-width: 1560px; margin: 0 auto;
    padding: 26px 40px 60px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    border-top: 1px solid var(--line); flex-wrap: wrap;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.gskin-foot-links { display: flex; gap: 18px; }
.gskin-foot-links a { color: var(--muted); }
.gskin-foot-links a:hover { color: var(--text); }

/* 内页：图录化（无卡片底、图在上、说明在下的密排） */
.skin-gallery .section { padding: 40px 0; }
.skin-gallery .section-heading {
    align-items: baseline; border-bottom: 1px solid var(--line);
    padding-bottom: 12px; margin-bottom: 26px;
}
.skin-gallery .section-heading h1,
.skin-gallery .section-heading h2 { font-size: 22px; font-weight: 400; letter-spacing: .02em; }
.skin-gallery .section-kicker { font-size: 10px; letter-spacing: .3em; color: var(--accent); }
.skin-gallery .game-grid,
.skin-gallery .rank-list { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 34px 24px; }
.skin-gallery .game-card,
.skin-gallery .rank-item .game-card {
    display: flex; flex-direction: column; gap: 10px;
    background: transparent; border: 0; padding: 0;
}
.skin-gallery .game-card:hover { background: transparent; box-shadow: none; border: 0; }
.skin-gallery .game-card-icon,
.skin-gallery .rank-item .game-card-icon {
    width: 100%; aspect-ratio: 4 / 5; border-radius: 0;
    box-shadow: none; background: var(--bg-soft);
}
.skin-gallery .game-card-body { padding: 0; gap: 4px; }
.skin-gallery .game-card-title { font-size: 13.5px; font-weight: 400; min-height: 0; -webkit-line-clamp: 1; }
.skin-gallery .game-card-meta { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.skin-gallery .game-card-price {
    background: transparent; border: 0; padding: 0;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.skin-gallery .game-card-badge {
    left: 0; top: 0; bottom: auto; border-radius: 0;
    background: var(--text); color: var(--bg); letter-spacing: .14em; font-size: 9.5px;
}
.skin-gallery .rank-item { padding-left: 0; }
.skin-gallery .rank-no {
    top: 8px; left: 8px; transform: none; font-size: 22px; font-weight: 300;
    color: var(--bg); text-shadow: 0 0 10px rgba(0, 0, 0, .55);
}
.skin-gallery .filter-bar { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 18px; }
.skin-gallery .content-page, .skin-gallery .auth-card, .skin-gallery .detail-hero { border-radius: 0; }

@media (max-width: 1080px) {
    .gskin-hall { grid-template-columns: 1fr; gap: 18px; }
    .gskin-hall-meta { flex-direction: row; align-items: baseline; gap: 14px; }
    .gskin-track { grid-auto-columns: 260px; }
    .gskin-hero-content h1 { font-size: 40px; }
}

@media (max-width: 720px) {
    .gskin-nav { grid-template-columns: auto 1fr auto; padding: 12px 16px; gap: 12px; }
    .gskin-navlinks {
        display: none; position: absolute; z-index: 2;
        top: calc(100% + 1px); left: 12px; right: 12px;
        flex-direction: column; gap: 0; padding: 6px 14px;
        background: var(--bg); border: 1px solid var(--line);
    }
    .gskin-navlinks.is-open { display: flex; }
    .gskin-navlinks a { padding: 12px 0; font-size: 11px; border-top: 1px solid var(--line-soft); }
    .gskin-navlinks a:first-child { border-top: 0; }
    .gskin-header { position: relative; }
    .gskin-main { padding: 0 16px; }
    .gskin-hero { height: 62vh; min-height: 380px; }
    .gskin-hero-content { padding: 0 16px 32px; }
    .gskin-hero-content h1 { font-size: 30px; }
    .gskin-track { grid-auto-columns: 62vw; gap: 14px; }
    .gskin-ledger-label { min-width: 76px; }
    .gskin-foot { padding: 20px 16px 44px; flex-direction: column; gap: 12px; }
    .skin-gallery .game-grid,
    .skin-gallery .rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}