/* ==========================================================================
   TCY Server — EF2 核心层（终末地 v2 · 设计令牌 + 公共原语）
   --------------------------------------------------------------------------
   v2 全案的地基文件：只放【令牌变量】与【全站复用的原语类】，不放具体版面。
   加载顺序：extra.css → endfield.css(v1) → 本文件 → ef2-shell.css → ef2-home.css。
   契约：类名与 ef2-blueprint 蓝图逐字一致，HOME / JS 两侧直接引用，不得擅改。
   ========================================================================== */

:root {
    /* ---- 纸与墨 ---- */
    --ef2-paper: #ffffff;
    --ef2-paper-warm: #fff7fa;          /* 微粉纸 */
    --ef2-ink: #17191e;                 /* 终末地近黑 */
    --ef2-ink-soft: #3c4148;
    --ef2-gray: #8a9096;                /* 图标灰 */
    /* ---- 招牌粉（顶替终末地黄的一切职能：缎带/勾线/高亮块）---- */
    --ef2-pink: #f06292;
    --ef2-punch: #ec407a;
    --ef2-deep: #d81b60;
    --ef2-pink-soft: #fce4ec;
    --ef2-pink-ribbon: linear-gradient(180deg, #f8bbd0, #f06292);
    /* ---- CMYK 微装饰条（终末地 UI 自带的三原色小色块，原样保留）---- */
    --ef2-cmyk-m: #ff0090;
    --ef2-cmyk-c: #00e5ff;
    --ef2-cmyk-y: #ffee00;
    /* ---- 线 ---- */
    --ef2-line: rgba(23, 25, 30, .14);
    --ef2-line-soft: rgba(23, 25, 30, .08);
    /* ---- 字 ---- */
    --ef2-mono: 'Fira Code', 'Cascadia Code', Consolas, 'JetBrains Mono', monospace;
    --ef2-disp: 'Bahnschrift', 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    --ef2-hei: 'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    --ef2-ghost: 'Arial Black', 'Arial Narrow', Impact, sans-serif;
    /* ---- 布局 ---- */
    --ef2-rail-w: 76px;          /* 中屏收起态图标轨宽 */
    --ef2-rail-w-full: 272px;    /* 宽屏展开态轨宽（放宽以容下最长标签「异界战斗幻想2D」，防右缘裁字） */
    --ef2-cut: 10px;             /* 标准切角尺寸 */
}

/* =========================================================================
   1. 字头 / 标签 / 标题 原语
   ========================================================================= */

/* ▽// TCYMC SERVER 微字头（「▽//」由内容自带） */
.ef2-kicker {
    display: inline-block;
    font-family: var(--ef2-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ef2-gray);
    white-space: nowrap;
}

/* ↘ EN-LABEL 方框标签（「↘」由内容自带；左侧灰色实块由伪元素画） */
.ef2-tag {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    font-family: var(--ef2-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ef2-ink);
    background: var(--ef2-paper);
    border: 1px solid var(--ef2-line);
    border-radius: 0;
    padding: 3px 10px 3px 4px;
    white-space: nowrap;
}
.ef2-tag::before {
    content: '';
    display: inline-block;
    width: 8px;
    align-self: stretch;
    background: #c9cdd2;
}

/* 分区大 CN 标题 */
.ef2-title {
    font-family: var(--ef2-hei);
    font-weight: 900;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.25;
    color: var(--ef2-ink);
    letter-spacing: .01em;
}

/* 竖排 CMYK 微色条组：三个小矩形(m/c/y) + 一格灰点阵，多重渐变一次画完 */
.ef2-cmyk {
    flex: none;
    width: 12px;
    height: 44px;
    pointer-events: none;
    background:
        linear-gradient(var(--ef2-cmyk-m), var(--ef2-cmyk-m)) 0 0    / 8px 10px no-repeat,
        linear-gradient(var(--ef2-cmyk-c), var(--ef2-cmyk-c)) 0 12px / 8px 10px no-repeat,
        linear-gradient(var(--ef2-cmyk-y), var(--ef2-cmyk-y)) 0 24px / 8px 10px no-repeat,
        radial-gradient(rgba(23, 25, 30, .38) 1px, transparent 1.3px) 0 38px / 4px 4px repeat-x;
    background-size: 8px 10px, 8px 10px, 8px 10px, 4px 4px;
}

/* =========================================================================
   2. 按钮原语（「更多情報」式）
   ⚠️ 陷阱：.md-typeset a { background:none } (0,1,1) 会吃掉按钮化 <a> 的底色，
   所以 background / color 一律 !important。
   ========================================================================= */

/* 深色主按钮：墨底白字 + 左缘粉 tick + 右下切角 */
.ef2-btn-dark {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px 10px 26px;
    font-family: var(--ef2-hei);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: var(--ef2-ink) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ef2-cut)), calc(100% - var(--ef2-cut)) 100%, 0 100%);
    transition: background .2s ease, transform .2s ease;
}
.ef2-btn-dark::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ef2-pink);
    transition: width .2s ease;
}
.ef2-btn-dark:hover {
    background: #000 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.ef2-btn-dark:hover::before { width: 5px; }
.ef2-btn-dark:focus-visible {
    outline: 2px solid var(--ef2-punch);
    outline-offset: 2px;
}

/* 次级按钮：白底墨描边同切角 */
.ef2-btn-ghostline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px 9px 24px;
    font-family: var(--ef2-hei);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: var(--ef2-paper) !important;
    color: var(--ef2-ink) !important;
    text-decoration: none !important;
    border: 1px solid var(--ef2-ink);
    border-radius: 0;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ef2-cut)), calc(100% - var(--ef2-cut)) 100%, 0 100%);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ef2-btn-ghostline::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ef2-pink);
    transition: width .2s ease;
}
.ef2-btn-ghostline:hover {
    background: var(--ef2-ink) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.ef2-btn-ghostline:focus-visible {
    outline: 2px solid var(--ef2-punch);
    outline-offset: 2px;
}

/* =========================================================================
   3. 计数 / 幽灵巨字 / 斜纹 原语
   ========================================================================= */

/* 等宽分数计数：<span class="ef2-counter"><b>1</b> / 6</span> */
.ef2-counter {
    font-family: var(--ef2-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--ef2-gray);
}
.ef2-counter b {
    font-weight: 700;
    color: var(--ef2-ink);
}

/* 幽灵巨字（纯装饰，永不可交互） */
.ef2-ghostword {
    font-family: var(--ef2-ghost);
    font-weight: 900;
    font-style: normal;
    font-size: clamp(4rem, 14vw, 11rem);
    letter-spacing: -0.02em;
    line-height: .8;
    color: rgba(23, 25, 30, .05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* 45° 细斜纹（翻页胶囊 / 缎带内衬） */
.ef2-stripe {
    background-image: repeating-linear-gradient(45deg,
        rgba(23, 25, 30, .10) 0 4px, transparent 4px 9px);
}

/* =========================================================================
   4. 入场揭示（JS 在进入视口时加 .is-in）
   transition 挂在 .is-in 上：初始态没有过渡，避免任何回滚动画。
   ⚠️ 绝不给 <details> 或含 canvas/iframe 的容器加 .ef2-reveal。
   ========================================================================= */
.ef2-reveal {
    opacity: 0;
    transform: translateY(26px);
}
.ef2-reveal.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity .7s cubic-bezier(.2, .7, .2, 1),
        transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* =========================================================================
   5. 无障碍：减弱动态（一票直通，全部立即可见/静止）
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .ef2-reveal,
    .ef2-reveal.is-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ef2-btn-dark,
    .ef2-btn-dark::before,
    .ef2-btn-ghostline,
    .ef2-btn-ghostline::before {
        transition: none !important;
    }
}

/* =========================================================================
   6. 2K/4K 根缩放（视口自适应的全局底座）
   Material 自带的根字号是台阶式：125%(<1600px) → 137.5%(≥1600) → 150%(≥2000)，
   2000px 之后就封顶了，4K 下整站相对变小、构图松散。
   这里从 1920px 起接管为连续 vw 曲线：
     · 1.1458vw 在 1920px 处恰好 = 22px（137.5%），与 Material 的 1600–1920 档无缝衔接；
     · 2560(2K) ≈ 29px、3840(4K) 封顶 212%(≈34px)——排版随窗口等比放大，构图观感稳定；
     · 超宽带鱼屏(21:9)靠封顶值兜住，不至于只因横向宽就把字撑爆。
   所有 rem/em 排版（Material 正文 + ef2 标题/mono）自动跟随；px 写死的描边/切角等
   机械结构件刻意不跟缩，仅轨宽/切角这几个大结构量按同曲线放大（见下方 :root 覆写）。
   ========================================================================= */
@media screen and (min-width: 120em) {
    html {
        font-size: clamp(137.5%, 1.1458vw, 212%);
    }
    :root {
        /* 1920px 时与基准值逐像素相等（3.958vw=76px / 14.167vw=272px / .52vw=10px），
           往上按窗口宽度等比放大，封顶 ×1.54（与根字号封顶一致） */
        --ef2-rail-w: min(3.958vw, 117px);
        --ef2-rail-w-full: min(14.167vw, 419px);
        --ef2-cut: min(.52vw, 16px);
    }
}

/* =========================================================================
   §7 揭示变体（v2.6 动画系统）：不同分区按「材质」选不同开启动画
   机制不变（ef2-hud.js 的 .ef2-reveal + .is-in），变体只覆写材质表现：
   --wipe = 带状物左→右划开；--stamp = 铭牌盖章急停；默认 = 上浮 rise。
   缓动令牌 --efc-ease-* 定义在 ef2-content.css §0（var 求值时机无关文件顺序）。
   ========================================================================= */
/* 终态必须回落自然值（clip-path:none / transform:none）：clip-path 会永久裁掉
   元素自身的 box-shadow（胶片 panel / 日历 is-major 行实测受害），scale(1) 也会
   常驻 stacking context——故用一次性 keyframes + fill backwards，播完即撤（评审 H1/L1） */
/* 待命态绝不许挂 clip-path：Chromium 把目标自身 clip 算进 IntersectionObserver
   相交面积，inset(0 100% 0 0) = 相交恒为 0 → 永不触发 → 永远隐身（实测死锁）。
   隐藏交给基类 .ef2-reveal 的 opacity:0，裁切只活在关键帧里。 */
.ef2-reveal--wipe:not(.is-in) { transform: none; }
.ef2-reveal--wipe.is-in {
    transform: none;
    animation: ef2WipeIn .42s var(--efc-ease-mech, cubic-bezier(.4, 0, .2, 1)) backwards;
}
@keyframes ef2WipeIn {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}
.ef2-reveal--stamp:not(.is-in) { transform: scale(1.04); transform-origin: left bottom; }
.ef2-reveal--stamp.is-in {
    transform: none;
    transform-origin: left bottom;
    animation: ef2StampIn .32s var(--efc-ease-snap, cubic-bezier(.16, 1, .3, 1)) backwards;
}
@keyframes ef2StampIn {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ef2-reveal--wipe, .ef2-reveal--wipe:not(.is-in),
    .ef2-reveal--stamp, .ef2-reveal--stamp:not(.is-in) {
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
}