/* ============================================================
   LCspax's Website
   字体：英文 Helvetica / 中文 思源黑体 (Noto Sans SC)

   栅格方案（详见文件末尾「栅格方案说明」）
   ─ 容器：最大宽 1280px，水平居中，四边留出 container-pad
   ─ 列数：8 栏（≥1280）/ 6 栏（900–1279）/ 4 栏（600–899）/ 1 栏（<600）
   ─ 栏间距：clamp(20px, 1.9vw, 32px)，列宽 : 栏间距 ≈ 4 : 1
   ─ 单元内边距：clamp(10px, 1vh, 18px) / clamp(12px, 1.15vw, 22px)
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
    /* ---- 配色（沿用原始方案） ---- */
    --color-bg:    #121212;
    --color-white: #ffffff;
    --color-green: #00b159;
    --color-red:   #d11141;
    --color-blue:  #00aedb;
    --color-orange:#f37735;
    --color-yellow:#ffc425;
    --color-mute:  rgba(255, 255, 255, 0.5);

    /* ---- 字体 ---- */
    --font-en: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-cn: "Noto Sans SC", "Source Han Sans SC", "思源黑体",
               "PingFang SC", "Microsoft YaHei", sans-serif;

    /* ---------- 间距基准体系（8px 为基准单位） ---------- */
    --unit: 8px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* ---------- 容器 ---------- */
    --container-max:  1280px;                     /* 容器最大宽度，超出后居中留白 */
    --container-pad-x: clamp(24px, 4.4vw, 72px);  /* 容器左右外边距 */
    --container-pad-y: clamp(28px, 5.2vh, 64px);  /* 容器上下外边距 */
    --nav-collapsed:   68px;                      /* 右侧导航条占位（收起宽度） */
    --nav-expanded:    max(200px, 25vw);          /* 导航条展开宽度 */

    /* ---------- 栅格 ---------- */
    --grid-cols:      8;                          /* 栏数（断点见第 13 节） */
    --grid-gutter:    clamp(20px, 1.9vw, 32px);   /* 栏间距（栏沟） */
    --grid-row-gap:   clamp(8px, 1.2vh, 16px);    /* 行间距（与单元上下内边距叠加） */
    --cell-pad-x:     clamp(12px, 1.15vw, 22px);  /* 栅格单元左右内边距 */
    --cell-pad-y:     clamp(10px, 1vh, 18px);     /* 栅格单元上下内边距 */

    /* ---------- 组件间距 ---------- */
    --card-pad:   clamp(12px, 1vw, 20px);         /* 卡片内部留白 */
    --gap-card:   clamp(24px, 2.6vw, 40px);       /* 卡片之间的间距 */
    --block-gap:  clamp(18px, 2.8vh, 40px);       /* 区块之间的垂直节奏 */
    --rule-gap:   clamp(14px, 2.2vh, 28px);       /* 水平规则线的单侧留白：线到上方内容 == 线到下方内容
                                                     （写进任何一个方案前先确认两侧都用了它，否则线会偏） */

    /* ---------- 网格线 ---------- */
    --grid-line:        rgba(255, 255, 255, 0.075);
    --grid-line-strong: rgba(255, 255, 255, 0.15);

    /* ---------- 其他 ---------- */
    --viewport-h: 100vh;
    --slide-index: 0;
}
@supports (height: 100dvh) {
    :root { --viewport-h: 100dvh; }
}

/* ============================================================
   2. 基础重置
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg);
}
body {
    font-family: var(--font-en), var(--font-cn);
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }
ul { list-style: none; }
img, video { max-width: 100%; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   3. 切屏容器
   ============================================================ */
.slides {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: var(--viewport-h);
    overflow: hidden;
}
.slides__track {
    position: relative;
    width: 100%;
    will-change: transform;
    transform: translateY(calc(var(--slide-index) * -1 * var(--viewport-h)));
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.slides__track.is-animating { pointer-events: none; }

.slide {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: var(--viewport-h);
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-white);
}

/* ============================================================
   4. 3D 背景画布
   ============================================================ */
#bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: var(--viewport-h);
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* ============================================================
   5. 栅格系统
   .frame      —— 画框：贴齐容器外边距，并把内容居中（容器最大宽）
   .container  —— 真正的栅格容器：最大宽度 + 居中
   .grid       —— 栅格（列数 / 栏间距 / 单元内边距全部走令牌）
   注：竖向分割线已整体移除，版面只保留水平规则线来划分区块。
   ============================================================ */
.frame {
    position: absolute;
    inset: var(--container-pad-y) calc(var(--container-pad-x) + var(--nav-collapsed))
           var(--container-pad-y) var(--container-pad-x);
    z-index: 2;
    min-height: 0;
    display: flex;
    justify-content: center;      /* 容器最大宽之外的空间均分，实现居中 */
}
.container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    min-height: 0;
}

.pane {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-row-gap);
}
/* 栅格单元内边距：任何内容都不再贴着竖向分割线（杜绝顶格） */
.grid > * { padding: var(--cell-pad-y) var(--cell-pad-x); }

/* ---------- 可复用的间距工具类 ---------- */
.stack > * + * { margin-top: var(--stack-gap, var(--sp-5)); }
.stack--sm { --stack-gap: var(--sp-3); }
.stack--lg { --stack-gap: var(--sp-7); }
.pad-cell  { padding: var(--cell-pad-y) var(--cell-pad-x); }
.pad-card  { padding: var(--card-pad); }
.gap-card  { column-gap: var(--gap-card); row-gap: var(--gap-card); }
.gap-sm    { gap: var(--sp-3); }
.gap-md    { gap: var(--sp-5); }

/* ---- 顶部元信息栏（自带水平分割线） ---- */
.metabar {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--grid-gutter);
    align-items: baseline;
    flex: 0 0 auto;
    /* 规则线必须居中：线到上方内容 = 线到下方内容 = --rule-gap。
       上方由本栏 padding-bottom 提供；下方由紧随其后的栅格单元的 --cell-pad-y
       （.grid > * 的上内边距）＋ 这里的差额补足。
       只补差额、不写死数值，改 --rule-gap 或 --cell-pad-y 时自动跟随。
       （旧写法 margin-bottom: --block-gap 会在下方多叠一份，表现为「上大下小」） */
    padding: 0 var(--cell-pad-x) var(--rule-gap);
    border-bottom: 1px solid var(--grid-line-strong);
    margin-bottom: max(0px, calc(var(--rule-gap) - var(--cell-pad-y)));
}
.metabar__cell {
    font-family: var(--font-cn);
    font-weight: 500;
    font-size: clamp(10px, 0.76vw, 13px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.44);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metabar__cell--end { text-align: right; }
a.metabar__cell { transition: color 0.25s ease; }
a.metabar__cell:hover { color: var(--color-green); }
/* 没有可见规则线时不适用「线居中」，退回普通区块间距 */
.metabar--plain {
    border-bottom-color: transparent;
    margin-bottom: var(--block-gap);
}

/* ============================================================
   6. 右侧导航
   ============================================================ */
.nav {
    position: fixed;
    top: 0; right: 0;
    height: var(--viewport-h);
    width: var(--nav-collapsed);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 展开：桌面用 hover，触屏 / 键盘用 .is-open（两者视觉完全一致）。
   刻意不用 :focus-within —— 汉堡按钮自身在 .nav 内，点它收起时焦点仍留在按钮上，
   会让 :focus-within 生效而收不起来；键盘展开改由 JS 的 focusin/focusout 处理。 */
.nav:hover,
.nav.is-open { width: var(--nav-expanded); }

.nav__body {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 clamp(18px, 2.6vw, 48px);
    overflow: hidden;
}
.navlist {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.2vh, 28px);
    list-style: none;
}
.navlist__item a {
    display: block;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav:hover .navlist__item a,
.nav.is-open .navlist__item a { opacity: 1; transform: translateX(0); }
.nav:hover .navlist__item:nth-child(1) a,
.nav.is-open .navlist__item:nth-child(1) a { transition-delay: 0.16s; }
.nav:hover .navlist__item:nth-child(2) a,
.nav.is-open .navlist__item:nth-child(2) a { transition-delay: 0.23s; }
.nav:hover .navlist__item:nth-child(3) a,
.nav.is-open .navlist__item:nth-child(3) a { transition-delay: 0.30s; }
.nav:hover .navlist__item:nth-child(4) a,
.nav.is-open .navlist__item:nth-child(4) a { transition-delay: 0.37s; }

/* 中文字号抽成变量：下面英文的左移补偿要按它换算 */
.navlist__item a { --nav-cn-size: clamp(24px, 2.1vw, 36px); }
.navlist__cn {
    display: block;
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: var(--nav-cn-size);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    transition: color 0.25s ease;
}
.navlist__en {
    display: block;
    /* 中文字身自带约 3.3% 的侧边距、英文没有；两块文字左缘对齐后，
       英文的「墨迹」会比中文靠左约 1px。按中文字号折算补回来，两行才真正对齐 */
    margin-left: calc(var(--nav-cn-size) * 0.033);
    margin-top: 0.35em;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(9px, 0.66vw, 11px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.4);
}
.navlist__item a:hover .navlist__cn,
.navlist__item.is-active .navlist__cn { color: var(--color-green); }
.navlist__item.is-active .navlist__en { color: rgba(0, 177, 89, 0.7); }

.nav__toggle {
    height: var(--nav-collapsed);
    width: 100%;
    background: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: clamp(13px, 1.6vw, 22px);
    flex-shrink: 0;
}
.nav__toggle:focus-visible { outline: 3px solid #000; outline-offset: -5px; }
.hamburger { display: flex; flex-direction: column; gap: 6px; width: 24px; flex-shrink: 0; }
.hamburger span { display: block; width: 24px; height: 2.6px; background: #000; border-radius: 2px; }

/* ============================================================
   7. 第 1 屏：首页
   ============================================================ */
.home { background: transparent; }
.home .frame { z-index: 2; }

.home__body {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: end;
    /* 与页脚 .info 的上边线对称：补足规则线到内容的差额 */
    padding-bottom: max(0px, calc(var(--rule-gap) - var(--cell-pad-y)));
}
.home__brand { grid-column: 1 / 6; grid-row: 1; user-select: none; }
.home__aside { grid-column: 1 / 5; grid-row: 2; align-self: start; }

.brand__main {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(44px, 7.6vw, 112px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-left: -0.06em;
    color: var(--color-white);
}
.brand__sub {
    display: block;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(26px, 4.2vw, 60px);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-top: 0.1em;
    margin-left: -0.03em;
    color: var(--color-white);
}
.brand__cn {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 26px);
    line-height: 1.2;
    letter-spacing: 0.15em;
    margin-top: 0.3em;
    color: rgba(255, 255, 255, 0.85);
}

.home__lead {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(13px, 1.02vw, 17px);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: var(--sp-5);
}
.home__list { border-top: 1px solid var(--grid-line-strong); }
.home__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--grid-line);
    font-family: var(--font-cn);
    font-size: clamp(11px, 0.84vw, 14px);
    color: rgba(255, 255, 255, 0.8);
}
.home__list li span:last-child {
    font-family: var(--font-en);
    font-size: 0.82em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}
.home__scroll {
    margin-top: var(--sp-7);
    font-family: var(--font-en);
    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 700;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.4);
}

.info {
    flex: 0 0 auto;
    align-items: start;
    /* 上边线两侧等距：.info__item 自带 --cell-pad-y 上内边距，这里只补差额 */
    padding-top: max(0px, calc(var(--rule-gap) - var(--cell-pad-y)));
    border-top: 1px solid var(--grid-line-strong);
}
.info__item { grid-column: span 2; display: flex; flex-direction: column; gap: var(--sp-3); }
.info__label {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(10px, 0.74vw, 13px);
    letter-spacing: 0.16em;
    color: var(--color-mute);
}
.info__value {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: clamp(13px, 0.98vw, 17px);
    letter-spacing: 0.02em;
    color: var(--color-white);
}

/* ============================================================
   8. 第 2 屏：作品
   ============================================================ */
/* 正方形封面边长。三个分类 = 三行正方形，尺寸必须由「可用高度」反推，
   而不是写死某个 vh 比例——否则矮屏下第三行会被裁掉（封面高度 = 一行的全部高度）。
   402px 是与封面无关的固定开销（元信息栏＋标题区＋三行区间留白＋容器上下外边距），
   实测 1600×900 / 1440×900 / 1280×800 / 1100×800 均能一屏放下。 */
.works { --wcard: clamp(146px, min(18vw, calc((var(--viewport-h) - 402px) / 3)), 212px); }

.works .pane {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.works .pane::-webkit-scrollbar { display: none; }
.works .pane:focus-visible { outline: 2px solid var(--color-white); outline-offset: -4px; }

.works__head { flex: 0 0 auto; align-items: end; }
/* 标题区是夹在两条规则线之间的内容块：上内边距（--cell-pad-y，与 .metabar 的下外边距
   合起来等于 --rule-gap）与下内边距（--rule-gap，接到第一个分类区间的上边线）必须
   各占一侧，才能让标题/简介上下到横线的空余一致。
   旧写法下方只有 --cell-pad-y，比上方小一半，即「上大下小」 */
.works__head > * { padding-block: var(--cell-pad-y) var(--rule-gap); }
.works__title { grid-column: 1 / 4; }
.works__intro { grid-column: 4 / -1; }

.works__title, .games__title {
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--color-white);
}
.works__title-en, .games__title-en {
    display: block;
    margin-top: 0.7em;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(9px, 0.66vw, 11px);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}
.works__intro p, .games__intro p {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(12px, 0.9vw, 15px);
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.62);
}
.works__count, .games__count {
    margin-top: var(--sp-4);
    font-size: clamp(11px, 0.78vw, 13px) !important;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.42) !important;
}
.works__count b, .games__count b { color: var(--color-white); font-weight: 700; }

.works__groups {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* ---- 单个分类区间（左标签 1–2 栏 / 右横向列表 3–末栏） ---- */
.wgroup {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: center;
    /* 分类区间上下两侧都是规则线，留白取同一个值才能让线居中 */
    padding-block: var(--rule-gap);
    border-top: 1px solid var(--grid-line-strong);
}
.wgroup:last-child { border-bottom: 1px solid var(--grid-line-strong); }
.wgroup > * { padding-inline: var(--cell-pad-x); }

.wgroup__head {
    grid-column: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4em;
    min-width: 0;
}
.wgroup__idx {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(10px, 0.76vw, 13px);
    letter-spacing: 0.22em;
    color: var(--accent, #fff);
}
.wgroup__name {
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(17px, 1.4vw, 24px);
    line-height: 1.1;
    color: var(--color-white);
}
.wgroup__en {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(8px, 0.62vw, 10px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.36);
}
.wgroup__count {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(10px, 0.72vw, 12px);
    color: rgba(255, 255, 255, 0.34);
}
.wgroup__nav { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.hbtn {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.hbtn:hover { border-color: var(--accent, #fff); color: #fff; background: rgba(255, 255, 255, 0.07); }
.hbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hbtn[disabled] { opacity: 0.25; cursor: default; }
.hbtn[disabled]:hover { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); background: none; }

/* ---- 横向滚动列表 ---- */
.wlist {
    grid-column: 3 / -1;
    align-self: center;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-card);                 /* 卡片间距走 --gap-card 令牌 */
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0 var(--sp-3);
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* 必须同时允许纵向：竖屏下卡片列表几乎占满屏幕，只给 pan-x 会让
       「在卡片上上下滑」既滚不动列表也滚不动页面，整个作品页卡死 */
    touch-action: pan-x pan-y;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.wlist::-webkit-scrollbar { display: none; }
/* 吸附只留给触屏（原生手势下由浏览器处理，手感更整齐）。
   精确指针下必须关掉：scroll-snap 会把脚本设置的 scrollLeft 立刻弹回最近的吸附点，
   表现就是「鼠标滚轮/触控板怎么滚卡片列表都不动」 */
@media (hover: none) {
    .wlist {
        scroll-snap-type: x proximity;
        /* 关键：把吸附端口按内边距内缩。
           否则 scroll-snap-align: start 会把首张卡吸附到「内边距盒」左缘，
           把列表自身的 padding-left 吃掉 —— 可滚动的那两行首卡左移一个内边距，
           而恰好放得下的「游戏项目」行（无溢出、scrollLeft 恒为 0）保持原位，
           三行起始位置就对不齐了 */
        scroll-padding-inline: var(--cell-pad-x);
    }
}

/* ---- 正方形作品封面 ---- */
.wcard {
    flex: 0 0 auto;
    width: var(--wcard);
    scroll-snap-align: start;
}
.wcard__link {
    display: block;
    color: inherit;
    perspective: 900px;
    perspective-origin: 50% calc(var(--wcard) / 2);
}
.wcard__inner {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 3px;
    background: #1b1b1b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
    /* 静止态必须是「平的」——不能复用 --rx/--ry，否则鼠标移开后卡片会停在
       最后一次的倾斜角度上（移出不重置）。倾斜只在 .is-live 里生效。 */
    transform: translateZ(0);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.55s ease;
    will-change: transform;
    backface-visibility: hidden;
}
.wcard__img,
.wcard__vid {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wcard__vid { z-index: 1; opacity: 0; transition: opacity 0.4s ease; }
.wcard__inner--videoOnly .wcard__vid { opacity: 1; }

/* 悬浮：3D 凸起 */
.wcard.is-live .wcard__inner {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(30px) scale(1.035);
    box-shadow: 0 34px 56px -24px rgba(0, 0, 0, 0.92),
                0 0 0 1px rgba(255, 255, 255, 0.22);
    transition-duration: 0.14s, 0.4s;
}
.wcard.is-live .wcard__img,
.wcard.is-live .wcard__vid { filter: brightness(1.1) contrast(1.04) saturate(1.06); }
.wcard.is-live .wcard__vid { opacity: 1; }

/* 光效：随鼠标移动的高光 + 暗角 */
.wcard__sheen {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(58% 58% at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.22) 34%,
            rgba(255, 255, 255, 0) 68%),
        radial-gradient(88% 88% at var(--mx, 50%) var(--my, 50%),
            rgba(0, 0, 0, 0) 42%,
            rgba(0, 0, 0, 0.46) 100%);
    transition: opacity 0.3s ease;
}
.wcard.is-live .wcard__sheen {
    opacity: 1;
    mix-blend-mode: screen;   /* 仅当前悬浮的这一张参与混合，代价极低 */
}

.wcard__tag {
    position: absolute;
    top: var(--card-pad); left: var(--card-pad);
    z-index: 4;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.46);
    font-family: var(--font-en), var(--font-cn);
    font-weight: 700;
    font-size: clamp(8px, 0.56vw, 9.5px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wcard.is-live .wcard__tag { opacity: 0; transform: translateY(-6px); }

/* 底部弹出的「点击查看详情」按钮（内部留白走 --card-pad） */
.wcard__cta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--card-pad);
    background: #fff;
    color: #0d0d0d;
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(11px, 0.78vw, 13px);
    letter-spacing: 0.06em;
    white-space: nowrap;
    transform: translateY(102%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.wcard__cta::before {
    content: "";
    width: 6px; height: 6px;
    flex: 0 0 auto;
    background: var(--accent, #111);
}
.wcard__cta i { margin-left: auto; font-style: normal; font-size: 1.1em; }
.wcard.is-live .wcard__cta { transform: translateY(0); }

/* 作品信息叠在封面底部（内边距走 --card-pad），悬浮时让位给 CTA */
.wcard__meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    padding: calc(var(--card-pad) * 2) var(--card-pad) var(--card-pad);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.82) 100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.wcard.is-live .wcard__meta { transform: translateY(110%); opacity: 0; }
.wcard__name {
    display: block;
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(12px, 0.9vw, 15px);
    line-height: 1.25;
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcard__type {
    display: block;
    margin-top: var(--sp-1);
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(10px, 0.7vw, 12px);
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcard__link:hover .wcard__name { color: var(--accent, #fff); }
.wcard__link:focus-visible { outline: none; }
.wcard__link:focus-visible .wcard__inner { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.6); }

/* 列表末尾占位卡：吸收行内剩余宽度，让每一行都收在网格右缘 */
.wcard--end { flex: 1 1 var(--wcard); min-width: 120px; max-width: 440px; }
.wcard--end .wcard__inner { aspect-ratio: auto; height: var(--wcard); }
.wcard__inner--end {
    display: grid;
    place-items: center;
    padding: var(--card-pad);
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 6px, transparent 6px 12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.wcard__endtext {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: center;
    color: rgba(255, 255, 255, 0.32);
}

/* ============================================================
   9. 第 3 屏：游戏经历
   ============================================================ */
.games { background: var(--color-bg); }
.games .frame { z-index: 5; pointer-events: none; }
.games .metabar a.metabar__cell { pointer-events: auto; }

.games__head { flex: 0 0 auto; align-items: end; }
.games__title { grid-column: 1 / 4; }
.games__intro { grid-column: 4 / -1; }

/* 文字压在游戏封面墙上，需要黑色阴影把背景推开。
   注意：小字号不能堆太多层——层层深色阴影会盖住细笔画，白字反而显黑。
   所以大标题可以用两层，正文/信息栏只用一层贴身的 + 一层柔光。 */
.games__title {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.9),
        0 8px 26px rgba(0, 0, 0, 0.7);
}
.games__intro p,
.games .metabar__cell {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.92),
        0 0 14px rgba(0, 0, 0, 0.72);
}
/* 同时抬高文字自身的不透明度，别指望靠阴影救回低对比的文字 */
.games__intro p { color: rgba(255, 255, 255, 0.86); }
.games .metabar__cell { color: rgba(255, 255, 255, 0.74); }
.games__count { color: rgba(255, 255, 255, 0.72) !important; }

/* ---- 斜向循环游戏墙 ---- */
.game-wall {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    contain: layout paint style;
}
.game-wall::before,
.game-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
/* 顶部与底部各压一层深色渐变，给标题/正文留出可读的暗底 */
.game-wall::before {
    background:
        linear-gradient(180deg, rgba(18,18,18,0.96) 0%, rgba(18,18,18,0.78) 11%,
                        rgba(18,18,18,0.46) 24%, rgba(18,18,18,0.14) 36%, transparent 48%),
        linear-gradient(0deg, rgba(18,18,18,0.92) 0%, rgba(18,18,18,0.36) 9%, transparent 22%);
}
.game-wall::after {
    background: linear-gradient(90deg, rgba(18,18,18,0.7) 0%, transparent 16%, transparent 79%, rgba(18,18,18,0.74) 100%);
}
/* 半调网点：整面墙只有一层，不再逐卡混合 */
.game-wall__dots {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.14;
    background-image: radial-gradient(rgba(255, 255, 255, 0.85) 0.7px, transparent 0.8px);
    background-size: 4px 4px;
}
.game-wall__stage {
    position: absolute;
    top: -10%; left: -10%;
    width: 126%;
    height: 126%;
    transform: rotate(-9deg) scale(1.08);
    pointer-events: none;
}
.game-wall__track {
    display: flex;
    flex-direction: column;
    width: max-content;
    height: 100%;
    gap: var(--wall-gap, clamp(16px, 1.7vw, 30px));
    animation: game-wall-drift 44s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}
/* 只在切到本屏时运行；鼠标悬停不会暂停（悬停时暂停会导致滑过墙面时明显顿住） */
.game-wall__track.is-running { animation-play-state: running; }

.game-wall__row { display: flex; gap: var(--wall-gap, clamp(16px, 1.7vw, 30px)); flex-shrink: 0; }
/* 6 列 × 6 行：每行卡片更少、单卡更大，整体密度显著下降 */
.game-wall__set {
    display: grid;
    grid-template-columns: repeat(6, clamp(150px, 12vw, 220px));
    grid-template-rows: repeat(6, clamp(225px, 30vh, 330px));
    gap: var(--wall-gap, clamp(16px, 1.7vw, 30px));
    align-content: center;
    flex-shrink: 0;
}
.game-wall__cell { min-width: 0; min-height: 0; pointer-events: auto; }

/* ---- 游戏卡（仅封面，无背面、无 3D 上下文） ---- */
.game-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: transparent;
    contain: paint;
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.36s ease;
}
.game-card:hover,
.game-card:focus-visible {
    z-index: 4;
    transform: translate3d(0, -8px, 0) scale(1.04);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 18px 30px -10px rgba(0, 0, 0, 0.72);
}
.game-card__front {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(150deg, var(--cover-a, #262626), var(--cover-b, #3d3d3d));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.game-card__cover {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 封面载入失败 / 尚未载入时的配色兜底（沿用原 8 色主题，压暗一档） */
.game-card--ember  { --cover-a: #3d1216; --cover-b: #b03e22; }
.game-card--cobalt { --cover-a: #101a4a; --cover-b: #1e63a8; }
.game-card--lime   { --cover-a: #1a3524; --cover-b: #659c34; }
.game-card--violet { --cover-a: #2a1750; --cover-b: #813c97; }
.game-card--sunset { --cover-a: #47161b; --cover-b: #b56b26; }
.game-card--ocean  { --cover-a: #033744; --cover-b: #0b7f88; }
.game-card--rose   { --cover-a: #40122a; --cover-b: #a03360; }
.game-card--ash    { --cover-a: #202530; --cover-b: #646e78; }

@keyframes game-wall-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100% / 3), 0, 0); }   /* 3 组等宽循环 */
}

/* ============================================================
   10. 第 4 屏：联系方式
   ============================================================ */
.contact__body { flex: 1; min-height: 0; align-items: stretch; }
.contact__left {
    grid-column: 1 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-7);
    min-width: 0;
}
.contact__right { grid-column: 5 / -1; }
.contact__head { flex: 0 0 auto; }
.contact__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--block-gap);
    min-width: 0;
}
.contact__title {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(36px, 3vw, 52px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--color-white);
}
.contact__subtitle {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: clamp(18px, 1.3vw, 22px);
    line-height: 1.2;
    letter-spacing: 0.15em;
    margin-top: 0.35em;
    color: rgba(255, 255, 255, 0.85);
}
.contact__info {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--grid-line-strong);
}
.contact__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--grid-line);
}
.contact__label {
    flex: 0 0 auto;
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(11px, 0.78vw, 13px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.contact__val {
    font-family: var(--font-en), var(--font-cn);
    font-weight: 400;
    font-size: clamp(12px, 0.9vw, 15px);
    color: rgba(255, 255, 255, 0.88);
    overflow-wrap: anywhere;
    text-align: right;
    transition: color 0.25s ease;
}
.contact__val:hover { color: var(--color-green); }

.contact__qr {
    display: flex;
    gap: var(--gap-card);
    align-items: flex-start;
    min-width: 0;
}
.qr { flex: 1 1 0; max-width: 200px; min-width: 0; }
.qr__cap {
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-en), var(--font-cn);
    font-weight: 700;
    font-size: clamp(10px, 0.72vw, 12px);
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}
.qr__button {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    background: transparent;
}
.qr__button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.qr__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
/* 悬停不再放大（放大交给点击后的 .qr-preview 弹层，悬停放大只会盖住旁边的二维码） */

.contact__right {
    position: relative;
    min-width: 0;
    background: var(--color-bg);
    overflow: hidden;
}
#contact-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================
   11. 二维码放大预览
   ============================================================ */
.qr-preview {
    position: fixed;
    inset: 0;
    z-index: 280;
    display: grid;
    place-items: center;
    padding: var(--sp-9) var(--sp-5);
    background: rgba(18, 18, 18, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.qr-preview.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.qr-preview__image {
    width: min(82vw, 520px);
    max-height: min(72vh, 520px);
    object-fit: contain;
    background: #fff;
}
.qr-preview__close {
    position: absolute;
    top: var(--sp-5); right: var(--sp-5);
    width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

/* ============================================================
   12. 作品详情页（work.html）
   ============================================================ */
/* 详情页是长文，需要整页滚动。基础重置里的 `html { overflow: hidden }` 会挡住用户
   滚轮 / 触摸滚动（`overflow: hidden` 只允许脚本改 scrollTop，不响应用户输入），
   所以 html 与 body 两层都要放开 —— 只放开 body 是没用的，视口的滚动能力取自 html。 */
html.detail-html {
    overflow-y: auto;
    overflow-x: hidden;
}
body.detail-page {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
}
.detail {
    position: relative;
    min-height: 100vh;
    background: var(--color-bg);
    padding: var(--container-pad-y) calc(var(--container-pad-x) + var(--nav-collapsed))
             calc(var(--container-pad-y) * 1.6) var(--container-pad-x);
    display: flex;
    justify-content: center;
}
.detail__container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
}
.detail .pane { position: relative; z-index: 1; height: auto; }

/* 元信息栏已经提供了「规则线下方」的留白（margin-bottom 的差额补足），
   这里不再叠 --block-gap，否则详情页首屏也会出现上大下小 */
.detail__hero { align-items: stretch; }
.detail__cover { grid-column: 1 / 5; }
.detail__info  { grid-column: 5 / -1; }

.detail__cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 3px;
    background: #1b1b1b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.detail__cover img,
.detail__cover video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail__info { display: flex; flex-direction: column; gap: var(--sp-5); }
.detail__title {
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.05;
    color: var(--color-white);
}
.detail__desc {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(13px, 0.98vw, 16px);
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.66);
}
.detail__specs {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--grid-line-strong);
}
.detail__spec {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--grid-line);
    font-family: var(--font-cn);
    font-size: clamp(11px, 0.8vw, 13px);
}
.detail__spec dt { color: rgba(255, 255, 255, 0.4); letter-spacing: 0.12em; text-transform: uppercase; }
.detail__spec dd { color: rgba(255, 255, 255, 0.86); text-align: right; }

/* ---- 其余作品：顶部信息带 + 作品本体（原图 / 视频） ---- */
.detail__band { align-items: start; }
.detail__band-lead {
    grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.detail__band .detail__specs { grid-column: 6 / -1; }

.detail__stage {
    /* 上边线与上方信息带之间等距（同页面其它规则线：只补差额，见 --rule-gap 的说明） */
    margin-top: max(0px, calc(var(--rule-gap) - var(--cell-pad-y)));
    padding-top: var(--rule-gap);
    border-top: 1px solid var(--grid-line-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}
.detail__art {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.detail__art:focus-visible { outline: 2px solid var(--color-green); outline-offset: 6px; }
/* 原图按自然比例完整显示：宽高都不超过可用空间，不裁切 */
.detail__media {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: max(260px, calc(var(--viewport-h) - 340px));
    margin: 0 auto;
    border-radius: 3px;
    background: #1b1b1b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.detail__hint {
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(10px, 0.74vw, 12px);
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.34);
}
.detail__notfound { max-width: 46em; }
.detail__notfound .detail__desc { margin-top: var(--sp-4); }

/* ---- 「立即试玩」入口（表格里填了「试玩链接」才出现） ---- */
.detail__play {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding: 11px 24px;
    border: 1px solid var(--color-green);
    border-radius: 999px;
    background: rgba(0, 177, 89, 0.14);
    font-family: var(--font-cn);
    font-weight: 500;
    font-size: clamp(12px, 0.92vw, 15px);
    letter-spacing: 0.18em;
    color: var(--color-white);
    text-decoration: none;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.detail__play:hover,
.detail__play:focus-visible {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
}
.detail__play-arrow {
    font-style: normal;
    transition: transform 0.22s ease;
}
.detail__play:hover .detail__play-arrow,
.detail__play:focus-visible .detail__play-arrow { transform: translateX(4px); }

/* ---- 原图放大层 ----
   `display: flex` + 子项 `margin: auto` 而不是 justify-content: center：
   内容比视口大时，后者会把溢出部分裁掉（左上角够不到），前者仍能滚动到全部。 */
.art-preview {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    overflow: auto;
    padding: var(--sp-8) var(--sp-5);
    background: rgba(18, 18, 18, 0.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    overscroll-behavior: contain;
}
.art-preview.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
body.art-preview-open { overflow: hidden; }

.art-preview__stage { display: flex; margin: auto; }
/* 默认适应屏幕：完整看得见，且不放大到超过原始像素（width/height 为 auto 时不会上采样） */
.art-preview__image {
    display: block;
    width: auto;
    height: auto;
    /* 放大层铺满整个视口，不用给右侧导航条留位（详情页本来就没有导航条） */
    max-width: calc(100vw - var(--sp-5) * 2);
    max-height: calc(var(--viewport-h) - var(--sp-8) * 2);
    cursor: zoom-in;
}
/* 点一下切到原始像素：超出屏幕就靠容器滚动查看 */
.art-preview.is-actual .art-preview__image {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}
.art-preview__video {
    display: block;
    width: min(92vw, 1500px);
    max-height: 84vh;
    margin: auto;
    background: #000;
}
.art-preview__hint {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--sp-5);
    text-align: center;
    font-family: var(--font-cn);
    font-weight: 300;
    font-size: clamp(10px, 0.74vw, 12px);
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}
.art-preview__close {
    position: fixed;
    top: var(--sp-5); right: var(--sp-5);
    z-index: 1;
    width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.68);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.art-preview__close:hover { border-color: var(--color-green); color: var(--color-green); }

/* ---- 详情页内的长文（沿用原「核心项目」正文样式） ---- */
.detail__article {
    /* 上边线两侧等距：上方 = 首屏栅格单元的下内边距 + 这里的差额，下方 = padding-top */
    margin-top: max(0px, calc(var(--rule-gap) - var(--cell-pad-y)));
    padding-top: var(--rule-gap);
    border-top: 1px solid var(--grid-line-strong);
}
.detail__article .project-article__body { max-width: 820px; }
.detail__article .project-article__body p {
    margin: 0 0 1.45em;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--font-cn);
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 300;
    line-height: 2;
    text-align: justify;
    text-wrap: pretty;
}
.project-article__media {
    display: grid;
    width: 100%;
    place-items: center;
    margin: var(--sp-8) auto;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.72);
}
.project-article__media > img,
.project-article__media > video {
    display: block;
    width: 100%;
    max-height: min(64vh, 680px);
    object-fit: contain;
    background: #080808;
}
.project-article__media > video { aspect-ratio: 16 / 9; }
.project-article__media figcaption {
    box-sizing: border-box;
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-cn);
    font-size: clamp(13px, 0.96vw, 15px);
    letter-spacing: 0.06em;
    text-align: center;
}
.project-article__media--logo > img {
    width: min(100%, 500px);
    max-height: min(55vh, 560px);
    padding: var(--sp-8);
    box-sizing: border-box;
}
.project-article__link {
    color: var(--color-blue);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}
.project-article__link:hover,
.project-article__link:focus-visible { color: #5cd8ff; }
.detail__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 2px;
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: clamp(11px, 0.8vw, 13px);
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.detail__back:hover { border-color: var(--color-green); color: #fff; background: rgba(0, 177, 89, 0.1); }

/* ============================================================
   13. 响应式断点
   xs  <600      单列堆叠，隐藏网格线
   sm  600–899   4 栏
   md  900–1279  6 栏
   lg  ≥1280     8 栏（主栅格）
   xl  ≥1600     8 栏 + 栏间距 / 卡片间距取上限
   ============================================================ */

/* ---- xl ---- */
@media (min-width: 1600px) {
    :root {
        --grid-gutter: 32px;
        --gap-card: 40px;
        --cell-pad-x: 22px;
    }
}

/* ---- md：6 栏 ---- */
@media (max-width: 1279.98px) {
    :root { --grid-cols: 6; }

    .home__brand { grid-column: 1 / 5; }
    .home__aside { grid-column: 1 / 4; }
    .info__item  { grid-column: span 3; }      /* 4 项 → 2×2 */
    .works__title, .games__title { grid-column: 1 / 4; }
    .works__intro, .games__intro { grid-column: 4 / -1; }
    .contact__left  { grid-column: 1 / 4; }
    .contact__right { grid-column: 4 / -1; }
    .detail__cover  { grid-column: 1 / 4; }
    .detail__info   { grid-column: 4 / -1; }
    .detail__band-lead { grid-column: 1 / 4; }
    .detail__band .detail__specs { grid-column: 4 / -1; }
}

/* ---- sm：4 栏，内容基本拉通 ---- */
@media (max-width: 899.98px) {
    :root { --grid-cols: 4; }

    .home__brand, .home__aside,
    .works__title, .works__intro,
    .games__title, .games__intro,
    .contact__left, .contact__right,
    .detail__cover, .detail__info { grid-column: 1 / -1; }
    .detail__band-lead, .detail__band .detail__specs { grid-column: 1 / -1; }

    .home__body { align-content: start; align-items: start; row-gap: var(--sp-8); }
    .info__item { grid-column: span 2; }
    .works__intro, .games__intro { margin-top: var(--sp-4); }
    .works__head { align-items: start; }
}

/* ---- 平板及以下：导航保持与桌面完全一致的「白条 + 绿色方块」外观，
       只是收起宽度变窄；展开由点击（.is-open）触发而不是 hover。
       分类改为「标签在上 / 列表在下」的纵向堆叠。 ---- */
@media (max-width: 1024px) {
    :root { --nav-collapsed: 56px; }

    .wgroup { grid-template-columns: 1fr; row-gap: var(--sp-4); }
    .wgroup > * { padding-inline: var(--cell-pad-x); }
    /* 标签改为两栏网格：序号固定在左栏，名称/英文/数量统一落在右栏。
       原来用 flex 换行时，各分类内容长度不同会导致换行位置不同，
       三个分类的标签起始位置会相差 20–30px */
    .wgroup__head {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: var(--sp-4);
        row-gap: var(--sp-2);
    }
    .wgroup__idx   { grid-column: 1; grid-row: 1; }
    .wgroup__name  { grid-column: 2; grid-row: 1; justify-self: start; }
    .wgroup__en    { grid-column: 2; grid-row: 2; justify-self: start; }
    .wgroup__count { grid-column: 2; grid-row: 3; justify-self: start; }
    /* 箭头单独占一行并跟在右栏，避免它撑宽左栏（否则 768–1024 段
       左栏会被箭头撑到 68px，标签缩进与其他区间不一致） */
    .wgroup__nav   { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 0; }
    .wlist { grid-column: 1 / -1; align-self: stretch; }
    .works__groups { flex: 0 0 auto; }
    .contact__right { min-height: 34vh; }
}

@media (max-width: 768px) {
    .game-wall__stage {
        top: -9%;
        left: -34%;
        width: 174%;
        height: 118%;
        transform: rotate(-5deg) scale(1.04);
    }
    :root { --wall-gap: 14px; }
    .game-wall__set {
        grid-template-columns: repeat(6, clamp(104px, 26vw, 150px));
        grid-template-rows: repeat(6, clamp(160px, 27vh, 230px));
    }
    .game-wall__track { animation-duration: 58s; }
    .wgroup__nav { display: none; }
}

/* ---- xs：单列 ---- */
@media (max-width: 599.98px) {
    :root {
        --grid-cols: 1;
        --container-pad-x: 24px;
        --container-pad-y: 28px;
        --nav-collapsed: 52px;
        --nav-expanded: min(76vw, 300px);
    }
    #bg-canvas, .contact__right { display: none; }

    .info__item { grid-column: 1 / -1; }
    .home__list li:nth-child(n+3) { display: none; }

    .brand__main { font-size: clamp(42px, 15vw, 74px); }
    .brand__sub { font-size: clamp(26px, 9vw, 46px); }

    .works { --wcard: clamp(160px, 62vw, 240px); }

    .game-wall__set { grid-template-columns: repeat(6, 108px); grid-template-rows: repeat(6, 162px); }

    .qr-preview { padding: max(52px, env(safe-area-inset-top)) var(--sp-5) max(24px, env(safe-area-inset-bottom)); }

    .detail { padding: var(--container-pad-y) var(--container-pad-x) calc(var(--container-pad-y) * 1.5); }
}

/* ---- 矮屏：收紧容器上下留白与封面尺寸 ---- */
@media (max-height: 780px) {
    :root { --container-pad-y: clamp(20px, 3.6vh, 40px); }
    .works__title, .games__title { font-size: clamp(24px, 2.6vw, 36px); }
    .works { --wcard: clamp(150px, min(16vw, 19.5vh), 196px); }
    /* 收紧上下留白时标题区必须同步，否则第一个分类的上边线又不居中了 */
    .wgroup { padding-block: var(--sp-3); }
    .works__head > * { padding-bottom: var(--sp-3); }
}

/* ---- 超矮屏（横屏手机）：进一步收窄节奏，并把首页改成可滚动，
       保证内容都能触达，不会被裁掉 ---- */
@media (max-height: 560px) {
    :root {
        --container-pad-y: 16px;
        --block-gap: 14px;
        --rule-gap: 10px;
    }
    .home .pane, .games .pane {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .home .pane::-webkit-scrollbar, .games .pane::-webkit-scrollbar { display: none; }
    .home__body { row-gap: var(--sp-5); }
    .home__lead { margin-bottom: var(--sp-3); }
    .brand__main { font-size: clamp(36px, 13vh, 64px); }
    .brand__sub { font-size: clamp(22px, 8vh, 40px); }
    .works { --wcard: clamp(120px, 34vh, 170px); }
    .works__intro p, .games__intro p { display: none; }
    .contact__qr { display: none; }
    .wgroup { padding-block: var(--sp-2); }
    .works__head > * { padding-bottom: var(--sp-2); }
}

/* ============================================================
   14. 降低动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .slides__track, .nav { transition-duration: 0.01ms; }
    .game-wall__track { animation: none; }
    .game-wall__stage { transform: rotate(-7deg) scale(1.08); }
    .game-card, .wcard__inner { transition-duration: 0.01ms !important; }
    .wcard.is-live .wcard__inner { transform: none; }
}

/* ============================================================
   附：栅格方案说明
   ─ 列数：8 栏（lg）。参考站 juanmoraromero.com 用 12 栏 / ~13px 栏沟，
     本项目内容块更大，8 栏能在「对齐的严谨感」与「不显得拥挤」之间取得平衡。
   ─ 栏间距：clamp(20px, 1.9vw, 32px)，列宽 : 栏沟 ≈ 4 : 1（参考站约 8 : 1）。
     加大栏沟是降低单位面积元素数量的主要手段之一。
   ─ 容器：max-width 1280px，水平居中，四周 container-pad
     clamp(24px, 4.4vw, 72px)，右侧额外让出 68px 给导航条。
   ─ 单元内边距：cell-pad-x/y，保证任何文字与卡片都不贴竖向分割线。
   ─ 间距基准：8px 单位 → --sp-1…--sp-9，所有组件间距只引用令牌或语义别名
     （--gap-card / --block-gap / --rule-gap / --card-pad），不写魔法数字。
   ─ 断点：xs <600 / sm 600–899 / md 900–1279 / lg ≥1280 / xl ≥1600。
   ============================================================ */