/* ================================================================
   AXIOM · 芒果帝国 —— 启程卡（镭射全息卡片 · Holo Card）样式
   v31.9 2026-09-16（与兑换券镭射票面「同一副面孔」）
   ----------------------------------------------------------------
   ★ 本版的核心变化：**卡面本体不再由本文件定义**。
     · 卡体尺寸/卡头/奖励大数字/数据栅格/卡脚/主按钮 —— 全部由
       inc/holo_card_view.php 直接使用票面的 .rr-* 版式类 + css/redeem_laser.css 提供；
       本文件只保留「启程卡特有」的部件（十档轨道 / 段内进度条 / 最新内容行 / 卡脚小链接 / 领取仪式）。
     · 因此不再有 .rr-stage/.rr-card/.rr-content 的尺寸覆盖 —— v31.1~v31.8 曾把舞台拉到
       min(980px,94vw) 横版并给卡体加 max-height + 内滚动条，与 400px 竖版票面不一致，已全部撤除。
     · 覆盖规则一律用「双类选择器」（如 .rr-notes.hc-ladder-wrap）压过票面同名类，不依赖加载顺序。
   ⚠️ 依赖：css/redeem_laser.css 必须与卡片同批加载（由 inc/footer.php 输出 <link>），
      否则本文件不含 .rr-* 基础样式 ⇒ 卡面「没有卡体」。
   ================================================================ */

/* ========== 遮罩与舞台（与票面 .rr-modal.is-open 同口径） ==========
   注意：本卡由 inc/footer.php 输出，位于 <main> 之外（footer.php 第 1 行即闭合 main）
   ⇒ 不落在 main 形成的层叠上下文里，z-index 能正常压过固定导航栏（z-index:1000）。
   ★ 显隐刻意**不写 display 规则**：由 HTML 内联 style="display:none" + JS 显式写 'flex'/'none' 控制。
     （若写成「CSS 藏 display:none + JS 用 style.display='' 显示」，内联值被清空后会回落到
       CSS 的 none 而永远不显示 —— 这是本站已登记过的必错组合，故此处采用双保险写法。） */
.hc-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    justify-content: center;
    /* 关键：从顶部开始排 + 遮罩自身可滚动 ——
       若用 align-items:center 作滚动容器，内容超高时顶部会被裁掉且不可达 */
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--nav-height, 70px) + 28px) 16px 44px;
}
.hc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 3, 6, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: hcFade 0.28s ease-out both;
}
.hc-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    animation: hcRise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ========== 小号烫金数字（卡片内金额；大号 .rr-value 由票面提供） ========== */
.hc-value-sm {
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1;
    font-family: 'Times New Roman', 'SimSun', serif;
    letter-spacing: 1px;
    background: linear-gradient(to bottom, #fff 0%, #ffe58f 45%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffe58f;
    filter: drop-shadow(0 3px 8px rgba(212, 175, 55, 0.35));
}

/* ========== 数据栅格第三行小字（招募进度等补充说明） ========== */
.hc-item-sub {
    color: rgba(255, 255, 255, 0.32);
    font-size: 8.5px;
    letter-spacing: 0.3px;
    line-height: 1.45;
    margin-top: 1px;
}

/* ========== 十档轨道（新人 / 访客：5 列 × 2 行，Lv + 银铢） ========== */
.rr-notes.hc-ladder-wrap { padding: 9px 12px 8px; margin-bottom: 12px; }
.hc-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 7px;
}
.hc-tier {
    flex: 0 0 calc(20% - 4.8px);
    min-width: 0;
    padding: 6px 2px 5px;
    text-align: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(212, 175, 55, 0.10);
}
.hc-tier-lv {
    display: block;
    font-size: 8.5px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}
.hc-tier-amt {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}
.hc-tier.is-done { border-color: rgba(212, 175, 55, 0.45); background: rgba(212, 175, 55, 0.10); }
.hc-tier.is-done .hc-tier-lv,
.hc-tier.is-done .hc-tier-amt { color: #ffe58f; }
.hc-tier.is-next {
    border-color: rgba(255, 229, 143, 0.7);
    background: rgba(212, 175, 55, 0.18);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 240, 180, 0.18);
}
.hc-tier.is-next .hc-tier-lv { color: rgba(255, 255, 255, 0.72); }
.hc-tier.is-next .hc-tier-amt { color: #fff; font-weight: 700; }
.hc-ladder-hint {
    text-align: center;
    font-size: 9.5px;
    color: #8e8a82;
    letter-spacing: 0.4px;
}
.hc-ladder-hint b { color: #ffe58f; font-variant-numeric: tabular-nums; }

/* ========== 段内进度（老玩家：条 + 两端说明；百分比大数字在 hero 位） ========== */
.hc-seg { margin-bottom: 12px; }
.hc-seg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.hc-seg-title { font-size: 10.5px; color: #a89f91; letter-spacing: 0.5px; }
.hc-seg-count {
    font-size: 9px;
    color: rgba(212, 175, 55, 0.8);
    letter-spacing: 0.5px;
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    flex-shrink: 0;
}
/* 进度条：深色内凹轨 + 烫金填充 + 溢彩光泽 */
.hc-bar {
    position: relative;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.28), inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hc-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--hc-to, 0);
    border-radius: 7px;
    background: linear-gradient(135deg, #8c6b14 0%, #d4af37 50%, #ffe58f 100%);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-bar-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.7;
}
.hc-bar-ends {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: 0.4px;
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}
.hc-end-l { color: rgba(255, 255, 255, 0.4); }
.hc-end-r { color: #ffe58f; }

/* ========== 最新内容（3 条，点击直达单篇；深色条语言与票面 .rr-link 同源） ========== */
.hc-news-wrap { margin-bottom: 12px; }
.hc-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 9px;
    letter-spacing: 3px;
    color: #d4af37;
    opacity: 0.9;
}
/* 深色底必须显式声明链接颜色，否则吃 UA 默认蓝 */
.hc-news-more {
    color: #d4af37;
    text-decoration: none;
    font-size: 9.5px;
    letter-spacing: 0.3px;
    opacity: 0.9;
    transition: color 0.18s, opacity 0.18s;
}
.hc-news-more:hover { color: #ffe58f; opacity: 1; text-decoration: underline; }
.hc-news-list { display: flex; flex-direction: column; gap: 6px; }
.hc-news {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.18);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    min-width: 0;
}
.hc-news:hover {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.22);
    transform: translateX(2px);
}
.hc-news-tag {
    flex-shrink: 0;
    width: 74px;
    font-size: 8.5px;
    letter-spacing: 0.8px;
    font-weight: 600;
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}
.hc-news-tag.is-dev { color: #ffe58f; }
.hc-news-tag.is-patch { color: #9fd8ff; }
.hc-news-tag.is-letter { color: #f0b6d8; }
.hc-news-title {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: #b8b2a6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-news-date {
    flex-shrink: 0;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}
.hc-news-empty {
    padding: 9px;
    text-align: center;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.3);
}

/* ========== v31.4 新手见面礼（主按钮本体＝票面 .rr-btn，这里只加呼吸感与内容排版） ==========
   它是卡面上唯一「点了真能拿到东西」的动作，故比其他按钮更亮并持续呼吸 */
.rr-btn.hc-gift-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    font-size: 13.5px;
    letter-spacing: 1.5px;
    animation: hcGiftBreath 2.8s ease-in-out infinite;
}
.rr-btn.hc-gift-btn:hover { animation-play-state: paused; }
.hc-gift-ico { font-size: 15px; letter-spacing: 0; line-height: 1; }
.hc-gift-do { font-size: 12px; letter-spacing: 2px; opacity: 0.82; }
.hc-gift-amt { display: inline-flex; align-items: baseline; gap: 3px; }
/* 按钮内的金额改用「深墨字」：烫金渐变压在金底上会糊成一片，反而看不清面额 */
.rr-btn.hc-gift-btn .hc-value-sm {
    font-size: 1.15rem;
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
    background: none;
    filter: none;
}
.hc-gift-sub {
    margin-top: 7px;
    text-align: center;
    font-size: 9.5px;
    letter-spacing: 0.5px;
    color: #8e8a82;
}
/* 已领取：换成烫金印章态 —— 把那份仪式感留在卡上，同时给玩家一个可核对的凭证 */
.hc-gift.is-claimed .hc-gift-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.03) 100%);
    border: 1px solid rgba(212, 175, 55, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.14),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3),
                0 0 20px rgba(212, 175, 55, 0.18);
}
.hc-gift-star { color: #d4af37; font-size: 12px; opacity: 0.85; }
.hc-gift-done {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffe58f;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
/* v32.5 2026-09-17 CTA 与下方「领取说明」拉开间距 ——
   票面 .rr-actions 只有 margin-top:auto（推到底），无 margin-bottom，
   导致主按钮紧贴下面的 .rr-notes/HOW IT WORKS，视觉拥挤 */
.hc-laser .rr-actions { margin-bottom: 16px; }

/* ========== 领取瞬间的仪式感（三个图层由 js 动态创建并 append 到 #hcOverlay）==========
   为什么 append 到 overlay 而不是卡内：卡面有 overflow 裁剪 + 3D 变换，
   放卡内既会被裁掉、又会跟着倾斜 —— append 到 overlay 后这些层才是「全屏在卡之上的舞台」。
   ⚠️ 这三层的样式全部用类选择器、不依赖任何祖先 id / CSS 变量 ⇒ 移出原位置后作用域不丢（铁律 v4.10 的作业条件）。 */
/* ① 金光爆发（从中心炸开） */
.hc-burst {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 240, 180, 0.85) 0%, rgba(212, 175, 55, 0.45) 18%,
        rgba(212, 175, 55, 0.12) 38%, transparent 62%);
}
.hc-burst.is-on { animation: hcBurstOut 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ② 烫金印章（从大到小「盖」下来，带一点回弹） */
.hc-gift-seal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10002;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 12px;
    border: 2px solid rgba(255, 229, 143, 0.9);
    background: linear-gradient(135deg, rgba(140, 107, 20, 0.92), rgba(212, 175, 55, 0.92));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 175, 55, 0.85);
    color: #1a1408;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 3px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.1) rotate(-14deg);
}
.hc-gift-seal.is-on { animation: hcSealDrop 0.85s cubic-bezier(0.18, 1.5, 0.42, 1) 0.35s forwards; }

/* ③ 卡面轻震（有「收到东西」的触感，幅度克制：卡片有 3D 倾斜，震太大会晕） */
.rr-card.hc-card.is-celebrate { animation: hcCardShake 0.5s ease-out; }

@keyframes hcGiftBreath {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 18px rgba(212, 175, 55, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.85),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}
@keyframes hcBurstOut {
    0%   { opacity: 0; transform: scale(0.55); }
    18%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.9); }
}
@keyframes hcSealDrop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.1) rotate(-14deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(0.94) rotate(-3deg); }
    80%  { transform: translate(-50%, -50%) scale(1.04) rotate(-6deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
}
@keyframes hcCardShake {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-3px, 1px); }
    30% { transform: translate(3px, -1px); }
    45% { transform: translate(-2px, -1px); }
    60% { transform: translate(2px, 1px); }
    80% { transform: translate(-1px, 0); }
}

/* ========== CTA 与 HOW IT WORKS 之间的间距
   v32.5 加了 margin-bottom:16px；v32.8 提到 28px（实测 v32.5~v32.7 截图仍偏紧） */
.hc-laser .rr-actions { margin-bottom: 28px; }

/* ========== 卡脚操作（关闭 / 不再自动弹出）
   v32.6 药丸 chip → v32.8 纯文字链接 → v33.1 gap 调 18px → 还是反复反馈
   根因：**这个位置天生不适合放文字** —— 卡脚空间有限、文字形态无论怎么挤都既大又挤。
   v33.3 用户直接要求「不需要字了」→ 改成**24×24 圆标签 + SVG 图标**（✕ 关闭 / ⊘ 禁符号）。
   原生 `title` 提供悬停 tooltip（用户原话：「悬停时显示 关闭 和 不再自动弹出」）。
   同时站内 @media (hover:none),(max-width:767px){ button{ min-height:44px } } 规则仍会把裸 button
   顶成 44px —— 类选择器 0,1,0 压过元素 0,0,1 的 min-height:0 始终保留。 */
.hc-foot-links { display: inline-flex; align-items: center; gap: 10px; transform: translateY(-4px); }
.hc-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
/* v33.4 2026-09-18 图标色彩改为**金色体系**（与卡脚 .af 同行的金色 hint 呼应）：
   1px 淡金描边 + 极淡金雾底 + 淡金 SVG；hover 时描边/底色/图标同步提亮 + 微光晕。
   配色参考 redeem_laser.css .rr-btn 烫金渐变 + .rr-footer .af rgba(212,175,55,0.45)。 */
.hc-mini-icon {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.05);
    color: rgba(212, 175, 55, 0.72);
}
.hc-mini-icon:hover {
    color: #ffe58f;
    border-color: rgba(212, 175, 55, 0.60);
    background: rgba(212, 175, 55, 0.14);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.22);
}
.hc-mini-icon:active { opacity: 0.65; }
.hc-mini-icon .hc-mi-svg {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
}

/* v33.3 2026-09-18 移动端图标再缩一档（22×22 / SVG 12px） */
@media (max-width: 480px) {
    .hc-mini-icon { width: 22px; height: 22px; }
    .hc-mini-icon .hc-mi-svg { width: 12px; height: 12px; }
    .hc-foot-links { gap: 8px; transform: translateY(-3px); }
}

/* ========== 无障碍：尊重减少动态偏好 ========== */
@media (prefers-reduced-motion: reduce) {
    .hc-backdrop, .hc-wrap { animation: none; }
    .hc-bar-fill { transition: none; }
    .hc-news:hover, .hc-mini:hover { transform: none; }
    /* 仪式感全部静态化 —— 结果照样看得见，但不晃不闪 */
    .rr-btn.hc-gift-btn { animation: none; }
    .hc-burst { display: none; }
    .hc-gift-seal.is-on { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(-5deg); }
    .rr-card.hc-card.is-celebrate { animation: none; }
}