/* ============================================================
   css/archive-wall.css - 角色档案卡墙样式
   ------------------------------------------------------------
   从 archive.php 的 <head> 内联 <style> 抽出：约 19.9KB 的内联样式会随每次页面请求重下，
   外置后可缓存 30 天；文件位于 <head>，仍是渲染阻塞加载，不会造成样式闪烁。
   ============================================================ */
        /* 卡牌数据库：恢复常规文档流滚动（全局 style.css 将 body 锁定为整屏 SPA 模式） */
        body.cards-page { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: 100vh; }
        .font-lcd { font-family: 'Orbitron', 'Microsoft YaHei', sans-serif; }
        .font-mono, .cards-page code { font-family: 'Share Tech Mono', monospace; }

        .gl-clip { clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
        .gl-clip-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

        /* ============ 卡牌墙 ============ */
        #cards-grid {
            display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
        }
        @media (min-width: 640px) { #cards-grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
        @media (min-width: 1280px) { #cards-grid { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); } }

        .tcard { position: relative; perspective: 1000px; }
        .tcard-inner {
            position: relative; width: 100%; aspect-ratio: 63 / 88; /* 与实体印刷卡 63x88mm 同比例 */
            transform-style: preserve-3d; transform: translateZ(0);
            transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s;
            will-change: transform;
            /* 屏幕外的卡片跳过样式/布局/绘制（118 张卡全量布局实测 334ms） */
            content-visibility: auto;
            contain-intrinsic-size: auto 240px;
        }
        /* 悬停全息倾斜（JS 写入 --tx/--ty） */
        @media (hover: hover) {
            .tcard:hover .tcard-inner {
                transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-8px) scale(1.03);
                filter: drop-shadow(0 18px 34px rgba(var(--rc), .28));
            }
            .tcard:hover .tcard-art { transform: scale(1.06); }
            .tcard:hover .tcard-name { text-shadow: 0 0 14px rgba(var(--rc), .95); }
        }

        .tcard-front, .tcard-shade, .tcard-frame { position: absolute; inset: 0; }
        .tcard-front {
            overflow: hidden; background: #060606;
            border: 1px solid rgba(var(--rc), .5);
            box-shadow: inset 0 0 34px rgba(var(--rc), .14), inset 0 0 2px rgba(var(--rc), .5);
            clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
        }
        .tcard-art {
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; object-position: 50% 18%;
            transition: transform .6s cubic-bezier(.2,.8,.2,1);
            will-change: transform;
        }
        /* 卡面 Logo（每张卡可见）与「立绘待补充」标签 */
        .card-logo { position:absolute; z-index:7; pointer-events:none; opacity:.92; border-radius:3px;
            filter: drop-shadow(0 0 6px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(var(--rc),.4)); }
        .tcard-logo { top:52px; right:8px; height:16px; }
        .tcard-facimg { position:absolute; top:6px; right:6px; z-index:6; width:36px; height:36px; object-fit:contain;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)) drop-shadow(0 0 8px rgba(var(--rc),.4));
            pointer-events:none; animation: fac-glow 3.2s ease-in-out infinite; }
        @keyframes fac-glow { 0%,100% { filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)) drop-shadow(0 0 5px rgba(var(--rc),.3)); transform:translateY(0); }
            50% { filter: drop-shadow(0 2px 8px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(var(--rc),.65)); transform:translateY(-1.5px); } }
        .cv-logo { right:14px; bottom:14px; height:30px; }
        img.tcard-art.is-fac { filter: brightness(.62) saturate(1.05); }
        img.cv-art.is-fac { filter: brightness(.6) saturate(1.05); }
        .na-tag { position:absolute; top:46px; right:8px; z-index:5; font-family:'Share Tech Mono',monospace;
            font-size:8px; letter-spacing:1px; color:rgba(var(--rc),.95); background:rgba(0,0,0,.72);
            border:1px solid rgba(var(--rc),.45); padding:2px 6px; }
        .cv-na-tag { top:52px; right:12px; font-size:10px; padding:3px 8px; }
        /* 底部压暗，保证文字可读；底部与两侧双渐变 */
        .tcard-shade { background:
            linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.86) 26%, rgba(0,0,0,.25) 52%, rgba(0,0,0,0) 68%),
            radial-gradient(140% 90% at 50% 0%, rgba(var(--rc), .10) 0%, transparent 60%); }
        /* 扫描线 */
        .tcard-shade::after {
            content:''; position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:screen;
            background: repeating-linear-gradient(to bottom, rgba(var(--rc), .5) 0 1px, transparent 1px 4px);
        }
        /* 全息烫箔流光 */
        .tcard-frame {
            pointer-events: none; mix-blend-mode: color-dodge; opacity: .10;
            background: linear-gradient(115deg, transparent 30%, rgba(var(--rc),.9) 45%, #fff 50%, rgba(var(--rc),.9) 55%, transparent 70%);
            background-size: 250% 100%; background-position: 0% 50%;
            animation: foilShine 7s linear infinite;
        }
        /* 稀有度能量边框（SSR/UR 才显示）
           动画只给真正显示的稀有度：整墙 100+ 张卡若都跑旋转动画，
           既白耗移动端 GPU/电量，旋转后的包围盒还会把文档撑宽（偶发横向抖动）。 */
        .tcard-flow {
            position:absolute; inset:-1px; pointer-events:none; opacity:0; transition: opacity .4s;
            background: conic-gradient(from 0deg, transparent 0 55%, rgba(var(--rc),.85) 72%, #fff 76%, rgba(var(--rc),.85) 80%, transparent 88% 100%);
            clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px;
        }
        .tcard[data-rarity="SSR"] .tcard-flow, .tcard[data-rarity="UR"] .tcard-flow { opacity: .95; animation: spin 5s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        .tcard-rarity {
            position:absolute; top:0; left:0; z-index:4; padding: 4px 12px 5px 12px;
            font-family:'Orbitron',sans-serif; font-weight:900; font-size: 12px; letter-spacing: 1.5px;
            color:#050505; background: rgb(var(--rc)); box-shadow: 0 0 16px rgba(var(--rc), .8);
            clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
        }
        .tcard-stars {
            position:absolute; top:32px; left:12px; z-index:4; font-size: 11px; letter-spacing: 1px;
            color: rgb(var(--rc)); text-shadow: 0 0 8px rgba(var(--rc), .95);
        }
        .tcard-body { position:absolute; left:0; right:0; bottom:0; z-index:4; padding: 9px 12px 12px; }
        .tcard-name { font-family:'Orbitron','Microsoft YaHei',sans-serif; font-weight:900; font-size: 19px; line-height:1.1;
            color:#fff; letter-spacing:.5px; transition: text-shadow .3s; }
        .tcard-en { font-family:'Share Tech Mono',monospace; font-size: 10px; letter-spacing: 2.5px; margin-top:2px;
            color: rgba(var(--rc), .9); text-transform: uppercase; }
        .tcard-title { font-size: 11.5px; color:#d0d8de; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .tcard-fac { display:flex; align-items:center; gap:4px; font-size:10.5px; font-family:'Share Tech Mono',monospace;
            color: rgba(var(--rc), .85); margin-top:5px; letter-spacing:.5px; }
        .tstat { display:flex; align-items:center; gap:5px; margin-top:3px; }
        .tstat-ico { width:11px; text-align:center; color: rgba(var(--rc), .85); font-size:10px; }
        .tstat-bar { flex:1; height:4px; background: rgba(255,255,255,.10); position:relative; overflow:hidden; }
        .tstat-bar > i { position:absolute; left:0; top:0; bottom:0; width:0; background: linear-gradient(90deg, rgba(var(--rc), .5), rgb(var(--rc)));
            box-shadow: 0 0 8px rgba(var(--rc), .8); transition: width 600ms cubic-bezier(.2,.8,.2,1); }
        .tstat-num { width:18px; text-align:right; font-family:'Share Tech Mono',monospace; font-size:10.5px; color:#eef3f7; }
        .tcard-stats { margin-top:6px; }
        .tcard-idx { position:absolute; bottom:6px; right:8px; z-index:5; font-family:'Share Tech Mono',monospace;
            font-size:8px; color: rgba(255,255,255,.35); letter-spacing:1px; }

        /* ============ 动态信息层（2026-10-16 D5 卡面升级） ============
           全息光标追踪辉光 + 悬停扫光 + HUD 角框；JS tilt 写入 --mx/--my */
        .tcard-holo { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .35s;
            mix-blend-mode:screen;
            background: radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(var(--rc),.34), rgba(255,255,255,.10) 34%, transparent 68%); }
        .tcard:hover .tcard-holo { opacity:1; }
        .tcard-sweep { position:absolute; inset:-20%; z-index:5; pointer-events:none; opacity:0; mix-blend-mode:screen;
            background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%);
            transform: translateX(-70%); }
        .tcard:hover .tcard-sweep { opacity:1; animation: tcSweep .9s cubic-bezier(.4,0,.2,1) .05s; }
        @keyframes tcSweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
        .tcard-corners { position:absolute; inset:10px; z-index:6; pointer-events:none; opacity:0; transition:opacity .3s;
            background:
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) left 0 top 0/13px 2px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) left 0 top 0/2px 13px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) right 0 top 0/13px 2px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) right 0 top 0/2px 13px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) left 0 bottom 0/13px 2px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) left 0 bottom 0/2px 13px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) right 0 bottom 0/13px 2px,
                linear-gradient(rgb(var(--rc)),rgb(var(--rc))) right 0 bottom 0/2px 13px;
            background-repeat:no-repeat; filter: drop-shadow(0 0 5px rgba(var(--rc),.8)); }
        .tcard:hover .tcard-corners { opacity:.95; }
        @media (prefers-reduced-motion: reduce) { .tcard-sweep { animation: none !important; } }

        /* 搜索框 */
        .cyber-input { background: rgba(0,0,0,.55); border:1px solid rgb(var(--color-main) / .3); color:#fff;
            padding: 9px 14px; border-radius:8px; width:100%; transition: all .3s ease; }
        .cyber-input:focus { border-color: rgb(var(--color-main)); box-shadow: 0 0 15px rgb(var(--color-main) / .2); outline:none; }

        .chip {
            display:inline-flex; align-items:center; gap:6px; padding: 7px 13px; cursor:pointer; white-space:nowrap;
            font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1px;
            color: rgba(var(--cc, var(--color-main)), .85); background: rgba(0,0,0,.5);
            border:1px solid rgba(var(--cc, var(--color-main)), .28);
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
            transition: all .25s cubic-bezier(.2,.8,.2,1);
        }
        .chip:hover { background: rgba(var(--cc, var(--color-main)), .14); border-color: rgb(var(--cc, var(--color-main))); color:#fff; }
        .chip.on { background: rgb(var(--cc, var(--color-main))); color:#050505; border-color: rgb(var(--cc, var(--color-main)));
            box-shadow: 0 0 14px rgba(var(--cc, var(--color-main)), .6); font-weight:bold; }
        .chip .dot { width:7px; height:7px; border-radius:50%; background: rgb(var(--cc, var(--color-main))); box-shadow: 0 0 6px rgb(var(--cc, var(--color-main))); }

        /* ============ 3D 鉴赏视图 ============ */
        #cv-modal { position:fixed; inset:0; z-index:9999; display:none; }
        #cv-modal.open { display:flex; }
        #cv-backdrop { position:absolute; inset:0; background: radial-gradient(circle at 50% 40%, rgb(var(--color-main) / .10), rgba(0,0,0,.96) 60%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
        #cv-layout { position:absolute; inset:0; z-index:2; display:flex; align-items:stretch; justify-content:center;
            gap:10px; padding: 64px 14px 70px; }
        #cv-stage { flex:1 1 auto; min-width:0; perspective: 1500px; touch-action: none; cursor: grab;
            display:flex; align-items:center; justify-content:center; }
        #cv-stage.dragging { cursor: grabbing; }
        #cv-card {
            position:relative; height:min(100%, 520px); aspect-ratio: 63 / 88; /* 与实体印刷卡 63x88mm 同比例 */
            transform-style: preserve-3d; transition: none;
            transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--zs, 1));
            will-change: transform;
        }
        #cv-card.glide { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
        #cv-stage.dragging #cv-card { transition: none; }
        .cv-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
            border:1.5px solid rgba(var(--cvr), .6); box-shadow: 0 0 40px rgba(var(--cvr), .28), inset 0 0 40px rgba(var(--cvr), .12);
            clip-path: polygon(0 22px, 22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
            overflow:hidden; background:#060606; }
        .cv-front .cv-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
        .cv-shade { position:absolute; inset:0; background:
            linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 72%),
            radial-gradient(150% 90% at 50% 0%, rgba(var(--cvr), .12), transparent 62%); }
        .cv-hud { position:absolute; left:0; right:0; bottom:0; padding: 16px 18px 18px; }
        /* 3D 鉴赏卡面 HUD：稀有度/星级改为文档流，避免遮挡角色名（卡墙内仍为角标定位） */
        .cv-hud .tcard-rarity { position:static; display:inline-block; }
        .cv-hud .tcard-stars { position:static; display:block; margin-top:6px; }
        /* 3D 鉴赏卡面：随拖拽旋转移动的镜面高光（JS applyTransform 写入 --sx/--sy） */
        .cv-spec { position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
            background: radial-gradient(340px 340px at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.20), rgba(var(--cvr),.10) 38%, transparent 70%); }
        /* 背面 = 单独一张完整立绘卡 */
        .cv-back { transform: rotateY(180deg); background:#060606; }
        .cv-back-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
        img.cv-back-art.is-fac { filter: brightness(.72); }
        .cv-back-veil { position:absolute; inset:0; background:
            linear-gradient(to top, rgba(0,0,0,.5), transparent 32%),
            radial-gradient(130% 80% at 50% 100%, rgba(var(--cvr), .14), transparent 62%); }
        .cv-back-frame { position:absolute; inset:10px; border:1px solid rgba(var(--cvr), .55);
            box-shadow: inset 0 0 26px rgba(var(--cvr), .14); pointer-events:none; }
        /* 右侧信息栏（原卡背属性全部移到这里）—— 无边框文字悬浮效果 */
        #cv-info { flex:0 0 auto; width:min(410px, 37vw); align-self:center; max-height:100%; overflow-y:auto;
            padding:24px 28px; background:none; border:none; position:relative;
            text-shadow: 0 2px 16px rgba(0,0,0,.95), 0 0 44px rgba(0,0,0,.75);
            animation: ip-in .55s cubic-bezier(.2,.8,.2,1); }
        /* 科技面板 HUD 角标（保留无边框悬浮美学，仅点缀对角括线） */
        #cv-info::before, #cv-info::after { content:''; position:absolute; width:20px; height:20px; pointer-events:none; opacity:.5; }
        #cv-info::before { top:8px; left:8px; border-top:1.5px solid rgba(var(--cvr),.9); border-left:1.5px solid rgba(var(--cvr),.9);
            filter: drop-shadow(0 0 4px rgba(var(--cvr),.7)); }
        #cv-info::after { bottom:8px; right:8px; border-bottom:1.5px solid rgba(var(--cvr),.9); border-right:1.5px solid rgba(var(--cvr),.9);
            filter: drop-shadow(0 0 4px rgba(var(--cvr),.7)); }
        @keyframes ip-in { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
        /* 战力雷达图（详情科技面板核心图表） */
        .ip-radar-wrap { margin-top:16px; padding-top:12px; border-top:1px dashed rgba(var(--rc),.3); }
        .ip-radar-label { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px;
            color:rgba(var(--rc),.85); margin-bottom:4px; }
        .ip-radar { display:block; width:100%; max-width:300px; height:auto; margin:0 auto; }
        .ip-row-top { display:flex; align-items:center; gap:8px; font-family:'Share Tech Mono',monospace; }
        .ip-rar { font-family:'Orbitron',sans-serif; font-weight:900; font-size:15px; padding:3px 12px; letter-spacing:1px; }
        .ip-stars { color:rgb(var(--rc)); font-size:17px; letter-spacing:2px; text-shadow:0 0 12px rgba(var(--rc),.85); }
        .ip-rlab { color:rgba(255,255,255,.55); font-size:11px; letter-spacing:2px; }
        .ip-id { margin-left:auto; color:rgba(255,255,255,.4); font-size:11px; letter-spacing:1px; }
        .ip-name { font-family:'Orbitron','Microsoft YaHei',sans-serif; font-weight:900; font-size:clamp(26px,3vw,38px);
            color:#fff; margin-top:12px; line-height:1.15; }
        .ip-en { font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:4px; color:rgba(var(--rc),.95); text-transform:uppercase; margin-top:4px; }
        .ip-title { font-size:15px; color:#d5dde4; margin-top:7px; }
        .ip-fac { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
        .ip-facimg { width:56px; height:56px; object-fit:contain; flex:none;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(var(--rc),.5)); }
        .ip-fac b { display:block; font-size:16px; color:#fff; font-weight:600; }
        .ip-fac i { display:block; font-style:normal; font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:2px; color:rgba(var(--rc),.9); margin-top:2px; }
        .ip-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:14px; font-size:13.5px; color:#aab4bd; }
        .ip-grid b { color:#eef3f7; font-weight:normal; }
        .ip-stats { margin-top:14px; }
        .ip-stats .tstat { margin-top:7px; }
        .ip-desc { font-size:14px; line-height:1.75; color:#cdd6de; margin-top:14px; }
        .ip-desc b { color:rgba(var(--rc),.95); font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:2px; }
        .ip-hint { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.4);
            margin-top:14px; padding-top:11px; border-top:1px dashed rgba(var(--rc),.35); }
        @media (max-width: 900px) {
            #cv-layout { flex-direction:column; padding: 56px 10px 64px; gap:8px; }
            #cv-stage { flex:0 0 auto; height:50%; }
            #cv-card { height:100%; }
            #cv-info { flex:1 1 auto; width:100%; max-height:none; align-self:stretch; }
            .cv-logo { height:22px; right:10px; bottom:10px; }
        }
        .cv-btn { display:inline-flex; align-items:center; gap:7px; padding: 9px 15px; cursor:pointer;
            font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:1px; color: rgb(var(--cvr));
            background: rgba(0,0,0,.6); border:1px solid rgba(var(--cvr), .5);
            clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
            transition: all .25s; white-space:nowrap; }
        .cv-btn:hover { background: rgba(var(--cvr), .16); box-shadow: 0 0 16px rgba(var(--cvr), .5); color:#fff; }
        .cv-btn:disabled { opacity:.3; cursor:not-allowed; box-shadow:none; }

        .tag-ur { background-color:#ff55ff; color:#000; }
        .tag-ssr { background-color:#ffcc00; color:#000; }
        .tag-ss { background-color:#ff4444; color:#000; }
        .tag-s { background-color:#00ffff; color:#000; }
        .tag-r { background-color:#cccccc; color:#000; }

        /* 移动端筛选 chip 由 JS 注入：先按 3 行预留高度，避免注入后把卡墙整体下推（CLS 0.033 → ~0） */
        @media (max-width:767px){
            #cv-factions, #cv-rarities { min-height:114px; }
        }

        /* 触屏/窄屏关闭卡面持续动画
           卡墙同时渲染 100+ 张卡，烫箔流光（背景位移 + color-dodge 混合）、阵营纹章辉光、
           稀有度旋转边框都是"每帧重绘"，实测把滚动帧率压掉近一半，并且旋转边框撑大包围盒
           还会偶发横向抖动。这些效果在手机屏幕上几乎看不出来，因此只在触屏/窄屏改为静态。 */
        @media (hover: none), (max-width: 1024px) {
            .tcard-frame, .tcard-facimg, .tcard-flow { animation: none !important; }
        }