查看“︁Sandbox/2.0”︁的源代码

<div class="card_fullscreen-img">[[file:test卡面.jpg]]</div>
<div class="card_hero" style="height:100vh"></div>
<!--全屏大小--><div class="card_content-container">
<!--背景--><div class="card_content-background">
<!--居中包裹层--><div class="card_content-inner">
<!-- text area--><div class="card_content card_content--layout">

<!-- 0. 正文内容开始-->
<!--左栏sticky-->
<div class="card_content_left">
<!--1. 卡名-->
<div class="card_content_name-container">
<div class="card_content_name-row"><div class="card_content_name-icon">[[file:icon_class_特攻.png|32px]]</div><div class="card_content_name-classtext">特攻</div>
<div class="card_content_name-icon card_content_name-icon--ml">[[file:icon_class_特攻.png|32px]]</div><div class="card_content_name-classtext">我说这是私欲</div></div>
<div class="card_content_name-text">复仇童谣 <span class="card_accent">·</span> 幽灵</div>
</div>

<!--2. 情报-->
<div class="card_content-item-title card_content-item-title--mt">信息<span class="card_content-item-subtitle">Info</span></div>
<div class="card_content-item-hr"></div>
<div class="card_content_info">
<div class="card_content_info-item"><div>情报</div><div>※3</div></div>
<div class="card_content_info-item"><div>物资</div><div>※2</div></div>
<div class="card_content_info-item"><div>执行</div><div>※1</div></div>
<div class="card_content_info-item"><div>策略</div><div>※3</div></div>
</div>

<!--3. 满级属性-->
<div class="card_content-item-title card_content-item-title--mt">等级 100 <span class="card_content-item-subtitle">Lv. Max</span></div>
<div class="card_content-item-hr"></div>
<div class="card_content_attribute-item"><div class="card_content_attribute-title"><div class="card_content_attribute-icon"></div><div> 生命</div></div><div>150044</div></div>
<div class="card_content_attribute-item"><div class="card_content_attribute-title"><div class="card_content_attribute-icon"></div><div> 攻击</div></div><div>8655</div></div>
<div class="card_content_attribute-item"><div class="card_content_attribute-title"><div class="card_content_attribute-icon"></div><div> 防御</div></div><div>4875</div></div>
<div class="card_content_attribute-item"><div class="card_content_attribute-title"><div class="card_content_attribute-icon"></div><div> 暴击率</div></div><div>5%</div></div>
<div class="card_content_attribute-item"><div class="card_content_attribute-title"><div class="card_content_attribute-icon"></div><div> 暴击伤害</div></div><div>50%</div></div>
</div><!--左栏结束-->

<!--右栏-->
<div class="card_content_right">
<!--2-1. 技能-->
<div class="card_content-item-title card_content-item-title--mt">战斗技能<span class="card_content-item-subtitle">Tactical</span></div>
<div class="card_content-item-hr card_content-item-hr--mb12"></div>

<!--普攻-->
<div class="card_content_skill-card"><div class="card_content_skill-left"><div class="card_content_skill-title"><div class="card_content_skill-icon"></div><div class="card_content_skill-title-text"><div><span class="card_content_skill-name">复仇的低吟</span><span class="card_content_skill-type card_accent--type">「普通攻击」</span></div><div class="card_content_skill-meta">使用武器 <span class="card_content_skill-meta-val card_accent">炸弹</span></div></div></div><div class="card_content_skill_effect">对敌方造成<span class="card_accent">89%</span><sup>1</sup>伤害。</div></div><div class="card_content_skill-upgrade"><div class="card_content_skill-upgrade-grid card_content_skill-upgrade-grid--10"><div></div><div class="card_content_skill-upgrade-lv">2</div><div class="card_content_skill-upgrade-lv">3</div><div class="card_content_skill-upgrade-lv">4</div><div class="card_content_skill-upgrade-lv">5</div><div class="card_content_skill-upgrade-lv">6</div><div class="card_content_skill-upgrade-lv">7</div><div class="card_content_skill-upgrade-lv">8</div><div class="card_content_skill-upgrade-lv">9</div><div class="card_content_skill-upgrade-lv">10</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">1</span><span class="card_content_skill-upgrade-badge-text">伤害</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_accent">110%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">130%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">150%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">170%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">200%</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">2</span><span class="card_content_skill-upgrade-badge-text">持续伤害</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">附加</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">延长</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">强度↑</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">3</span><span class="card_content_skill-upgrade-badge-text">攻击次数</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">额外↑</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div></div></div></div>
<div class="card_content_skill-gap"></div>

<!--被动-->
<div class="card_content_skill-card"><div class="card_content_skill-left"><div class="card_content_skill-title"><div class="card_content_skill-icon"></div><div class="card_content_skill-title-text"><div><span class="card_content_skill-name">奇袭战术</span><span class="card_content_skill-type card_accent--type">「被动」</span></div><div class="card_content_skill-meta">触发条件 <span class="card_content_skill-meta-val">每进行<span class="card_accent">15</span>次普攻</span></div></div></div>
<div class="card_content_skill-tags"><div class="card_content_skill-tag">单体</div><div class="card_content_skill-tag">持续伤害</div></div>
<div class="card_content_skill_effect">对当前目标方向投掷3把匕首，共造成<span class="card_accent">111%</span><sup>1</sup>伤害，若目标存在<span class="card_accent">[持续伤害]</span>效果，则本次伤害提升<span class="card_accent">80%</span><sup>2</sup></div></div><div class="card_content_skill-upgrade"><div class="card_content_skill-upgrade-grid card_content_skill-upgrade-grid--10"><div></div><div class="card_content_skill-upgrade-lv">2</div><div class="card_content_skill-upgrade-lv">3</div><div class="card_content_skill-upgrade-lv">4</div><div class="card_content_skill-upgrade-lv">5</div><div class="card_content_skill-upgrade-lv">6</div><div class="card_content_skill-upgrade-lv">7</div><div class="card_content_skill-upgrade-lv">8</div><div class="card_content_skill-upgrade-lv">9</div><div class="card_content_skill-upgrade-lv">10</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">1</span><span class="card_content_skill-upgrade-badge-text">触发次数</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_accent">12次</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">10次</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">8次</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">5次</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">2</span><span class="card_content_skill-upgrade-badge-text">伤害提升</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">+20%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">+40%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">+60%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">3</span><span class="card_content_skill-upgrade-badge-text">匕首数量</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">4把</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">5把</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div></div></div></div>
<div class="card_content_skill-gap"></div>

<!--终结技-->
<div class="card_content_skill-card"><div class="card_content_skill-left"><div class="card_content_skill-title"><div class="card_content_skill-icon"></div><div class="card_content_skill-title-text"><div><span class="card_content_skill-name">无名的阵列</span><span class="card_content_skill-type card_accent--type">「终结技」</span></div><div class="card_content_skill-meta">欲火消耗 <span class="card_content_skill-meta-val"><span class="card_accent">4</span></span></div></div></div>
<div class="card_content_skill-tags"><div class="card_content_skill-tag">群攻</div><div class="card_content_skill-tag">持续伤害</div></div>
<div class="card_content_skill_effect">对扇形范围内敌方造成<span class="card_accent">305%</span><sup>1</sup>伤害，若目标存在<span class="card_accent">[持续伤害]</span>，则本次伤害提升<span class="card_accent">50%</span><sup>2</sup>。每存在一层<span class="card_accent">[持续伤害]</span>，追加<span class="card_accent">13%</span><sup>3</sup>伤害</div></div><div class="card_content_skill-upgrade"><div class="card_content_skill-upgrade-grid"><div></div><div class="card_content_skill-upgrade-lv">2</div><div class="card_content_skill-upgrade-lv">3</div><div class="card_content_skill-upgrade-lv">4</div><div class="card_content_skill-upgrade-lv">5</div><div class="card_content_skill-upgrade-lv">6</div><div class="card_content_skill-upgrade-lv">7</div><div class="card_content_skill-upgrade-lv">8</div><div class="card_content_skill-upgrade-lv">9</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">1</span><span class="card_content_skill-upgrade-badge-text">伤害</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_accent">320%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">335%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">350%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">370%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">2</span><span class="card_content_skill-upgrade-badge-text">提升</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">55%</div><div class="card_content_skill-upgrade-val card_accent">60%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">65%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">70%</div><div class="card_content_skill-upgrade-row-label"><span class="card_content_skill-upgrade-badge">3</span><span class="card_content_skill-upgrade-badge-text">追加/层</span><span class="card_content_skill-upgrade-arrow">→</span></div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">16%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">19%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div><div class="card_content_skill-upgrade-val card_accent">22%</div><div class="card_content_skill-upgrade-val card_content_skill-upgrade-val--null">—</div></div></div></div>

<!--2-2. 觉醒-->
<div class="card_content-item-title card_content-item-title--mt">觉醒<span class="card_content-item-subtitle">Feat</span></div>
<div class="card_content-item-hr card_content-item-hr--mb12"></div>
<ul class="card_content_feat-ul">
<li class="card_content_feat-list"><div class="card_content_feat-row"><div class="card_content_feat-stage-wrap"><p><span class="card_content_feat-stage">STAGE</span></p><div class="card_content_feat-number">01</div></div><div><span class="card_accent">终结技对存在[持续伤害]的目标，伤害额外提升10%。</span><br/>攻击加成提升3.0%<span class="card_content_feat-stage-cn">「沉默是金Ⅰ」</span></div></div></li>
<li class="card_content_feat-list"><div class="card_content_feat-row"><div class="card_content_feat-stage-wrap"><p><span class="card_content_feat-stage">STAGE</span></p><div class="card_content_feat-number">02</div></div><div>攻击加成提升3.0%<span class="card_content_feat-stage-cn">「沉默是金Ⅱ」</span></div></div></li>
<li class="card_content_feat-list"><div class="card_content_feat-row"><div class="card_content_feat-stage-wrap"><p><span class="card_content_feat-stage">STAGE</span></p><div class="card_content_feat-number">03</div></div><div>攻击加成提升3.0%<span class="card_content_feat-stage-cn">「沉默是金Ⅲ」</span></div></div></li>
<li class="card_content_feat-list"><div class="card_content_feat-row"><div class="card_content_feat-stage-wrap"><p><span class="card_content_feat-stage">STAGE</span></p><div class="card_content_feat-number">04</div></div><div>攻击加成提升3.0%<span class="card_content_feat-stage-cn">「沉默是金Ⅳ」</span></div></div></li>
<li class="card_content_feat-list"><div class="card_content_feat-row"><div class="card_content_feat-stage-wrap"><p><span class="card_content_feat-stage">STAGE</span></p><div class="card_content_feat-number">05</div></div><div><span class="card_accent">情报适配度提升1级：※2 → ※3</span><br/>攻击加成提升3.0%<span class="card_content_feat-stage-cn">「沉默是金Ⅴ」</span></div></div></li>
</ul>

<!--2-3. 小传-->
<div class="card_content_story">
<div class="card_content_story-header"><div class="card_content_story-header-left"><div class="card_content-item-title card_content-item-title--mt">小传<span class="card_content-item-subtitle">Story</span></div>
<div class="card_content-item-hr card_content-item-hr--mb12"></div>
<div class="card_content_story-toggle" data-collapsed="false"><span class="story-toggle-text">收起</span><span class="story-toggle-icon">－</span></div></div>
<div class="card_content_story-header-spacer"></div>
<div class="card_timeline card_content_story-timeline">
<div class="card_timeline-line"></div>

<!--Stage 1-->
<div class="card_timeline-item">
<div class="card_timeline-dot"></div>
<div class="card_timeline-unlock">Lv.20 解锁</div>
<div class="card_timeline-title"><span class="card_timeline-numeral">Ⅰ</span><span class="card_timeline-chapter">复仇童谣</span><span class="card_timeline-label">/ Story</span></div>
<div class="card_timeline-body">夜已经深了，静谧的黑暗中，模糊的光微弱地闪烁着。<br/>今年格外寒冷，还不到落雪的时候，霜就已经攀上窗户。<br/>壁炉熊熊燃烧着，身穿洁白睡衣的孩子们围在壁炉边，像一群染上橘色的雪人。幽灵被他们簇拥于中间，面上仍然平淡地维持笑意。<br/>这群新收容的孩子格外闹腾，没有半点面对新环境的不安，几分钟前甚至还吵着让幽灵念睡前故事。<br/>抵不过他们的强烈要求，幽灵叹了口气，打开故事书。<br/>《愿望精灵》是那种普通、平淡，但又能在畅销榜上占据一席的故事。大概讲述了一个出身凄苦的男孩，身边人救助他并将这种救助包装成\"精灵\"实现愿望，而长大后的男孩以同样的方式救助别人。<br/>\"最后，愿望精灵越来越多，大家都过上了幸福快乐的生活……\"<br/>基本上都是幽灵无法理解的内容。<br/>故事果然是故事，全是放现实里行不通的事。说到底，没有利益，怎么可能将人群联系到一起？<br/>这些孩子们却对这个故事充满向往。幽灵看着他们的笑脸，摇摇头。他们和故事里的男孩处境相似，然而现实里哪里有无条件的救助，不过是接纳、笼络、而后利用罢了。<br/>\"爱德华多哥哥，你也有愿望精灵吗？\"</div>
</div>

<!--Stage 2-->
<div class="card_timeline-item">
<div class="card_timeline-dot"></div>
<div class="card_timeline-unlock">Lv.40 解锁</div>
<div class="card_timeline-title"><span class="card_timeline-numeral">Ⅱ</span><span class="card_timeline-chapter">灰烬与火</span><span class="card_timeline-label">/ Story</span></div>
<div class="card_timeline-body">第二段小传正文……</div>
</div>

<!--Stage 3-->
<div class="card_timeline-item">
<div class="card_timeline-dot"></div>
<div class="card_timeline-unlock">Lv.60 解锁</div>
<div class="card_timeline-title"><span class="card_timeline-numeral">Ⅲ</span><span class="card_timeline-chapter">第三章标题</span><span class="card_timeline-label">/ Story</span></div>
<div class="card_timeline-body">第三段小传正文……</div>
</div>

<!--Stage 4-->
<div class="card_timeline-item">
<div class="card_timeline-dot"></div>
<div class="card_timeline-unlock">Lv.80 解锁</div>
<div class="card_timeline-title"><span class="card_timeline-numeral">Ⅳ</span><span class="card_timeline-chapter">第四章标题</span><span class="card_timeline-label">/ Story</span></div>
<div class="card_timeline-body">第四段小传正文……</div>
</div>

<!--Stage 5-->
<div class="card_timeline-item card_timeline-item--last">
<div class="card_timeline-dot"></div>
<div class="card_timeline-unlock">Lv.100 解锁</div>
<div class="card_timeline-title"><span class="card_timeline-numeral">Ⅴ</span><span class="card_timeline-chapter">终章标题</span><span class="card_timeline-label">/ Story</span></div>
<div class="card_timeline-body">第五段小传正文……</div>
</div>

</div>
</div>
</div>

<!--2-4. 邀约-->
<div style="height:12px;width:100%;"></div>
<div class="card_content-item-title card_content-item-title--mt">邀约<span class="card_content-item-subtitle">Date</span></div>
<div class="card_content-item-hr card_content-item-hr--mb12"></div>

<div class="card_content_date">
<div class="card_content_date-track">
<ul class="card_content_date-list">
<!-- 01｜方案A：左上角小方块 + 序号，无图，矮，margin-top偏大 -->
<li class="card_content_date-item card_content_date-item--style-a" style="margin-top:40px"><div class="card_content_date-body"><span class="card_content_date-num">01</span><span class="card_content_date-label">Story</span></div></li>
<!-- 02｜方案B：像素进度条，有图，高，margin-top小 -->
<li class="card_content_date-item card_content_date-item--style-b card_content_date-item--has-img" style="margin-top:0px"><div class="card_content_date-img">[[file:test卡面.jpg|nolink]]</div><div class="card_content_date-body"><span class="card_content_date-num">02</span><span class="card_content_date-label">Story</span><div class="card_content_date-pixels" aria-hidden="true"><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span></div></div></li>
<!-- 03｜方案C：两端色块夹文字，无图，矮，margin-top偏大 -->
<li class="card_content_date-item card_content_date-item--style-c" style="margin-top:55px"><div class="card_content_date-body"><div class="card_content_date-bracket"><span class="bracket-block bracket-block--l"></span><span class="bracket-num">03</span><span class="bracket-label">Story</span><span class="bracket-block bracket-block--r"></span></div></div></li>
<!-- 04｜方案D：右上角小方块，无图，矮，margin-top中等 -->
<li class="card_content_date-item card_content_date-item--style-d" style="margin-top:20px"><div class="card_content_date-body"><span class="card_content_date-num">04</span><span class="card_content_date-label">Story</span></div></li>
<!-- 05｜方案B：满格进度条END，有图，高，margin-top小 -->
<li class="card_content_date-item card_content_date-item--style-b card_content_date-item--has-img card_content_date-item--end" style="margin-top:10px"><div class="card_content_date-img">[[file:banner.jpg|nolink]]</div><div class="card_content_date-body"><span class="card_content_date-num">05</span><span class="card_content_date-label">END</span><div class="card_content_date-pixels" aria-hidden="true"><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span><span class="px on"></span></div></div></li>
</ul>
</div>
</div>

<!--2-4-story. 邀约故事区（点击卡片后凭空出现）-->
<div class="date_story-panel" id="date-story-panel" aria-live="polite">
  <div class="date_story-scene" id="date-story-scene"></div>
  <div class="date_story-body" id="date-story-body"></div>
</div>

<style>
/* ── 故事面板 ── */
.date_story-panel {
  display: none;
  margin-top: 28px;
  padding: 36px 28px 40px;
  background: #1a1a1f;
  border-top: 1px solid #2a2a35;
  animation: dateStoryFadeIn 0.45s ease;
}
.date_story-panel.is-visible {
  display: block;
}
@keyframes dateStoryFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 场景标签 ── */
.date_story-scene {
  text-align: center;
  color: #555;
  font-size: 11px;
  letter-spacing: 5px;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid #2a2a35;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}

/* ── 旁白 ── */
.date_story-narration {
  text-align: center;
  color: #6a6570;
  font-style: italic;
  font-size: 12.5px;
  margin: 24px 40px;
  line-height: 2.1;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}

/* ── 对话行 ── */
.date_story-dialogue {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
}
/* 右边（"我"）：整行反向排列，头像在最右 */
.date_story-dialogue--right {
  flex-direction: row-reverse;
}

/* ── 头像区域 ── */
.date_story-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  /* [[file:xxx.png|44px]] 插入后会生成 <img>，直接继承此尺寸 */
}
.date_story-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* 暂无图片时的占位圆圈 */
.date_story-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #252530;
  border: 1px solid #35353f;
}

/* ── 对话内容列 ── */
.date_story-dialogue-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 65%;
}
.date_story-dialogue--right .date_story-dialogue-content {
  align-items: flex-end;
}

/* ── 角色名（仅幽灵显示） ── */
.date_story-charname {
  font-size: 11px;
  letter-spacing: 2px;
  color: #c0392b;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}

/* ── 对话正文 ── */
.date_story-text {
  font-size: 14px;
  color: #d4d0c8;
  line-height: 1.95;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}
</style>

<script>
(function () {
  /* ── 每张邀约卡对应的故事数据 ──
     avatar_ghost : 幽灵头像，留空时显示占位圆圈
     avatar_me    : "我"的头像，留空时显示占位圆圈
     scene        : 场景文字
     lines        : 对话/旁白列表
       type: 'narration' | 'ghost' | 'me'
       text: 内容
  */
  var stories = [
    {
      /* 01 */
      scene: '夜，咖啡馆',
      avatar_ghost: '', /* 将来替换为文件名，如 'File:幽灵头像.png' */
      avatar_me:    '',
      lines: [
        { type: 'narration', text: '夜风从半开的窗缝钻进来，带着一点潮湿的气息。' },
        { type: 'ghost',     text: '「好久不见。」' },
        { type: 'me',        text: '「嗯……好久不见。」' },
        { type: 'narration', text: '沉默在两人之间蔓延，像溢出杯沿的咖啡。' },
        { type: 'ghost',     text: '「你还是一个人来吗？」' },
        { type: 'me',        text: '「……有时候吧。」' }
      ]
    },
    { scene: '待补充', avatar_ghost: '', avatar_me: '', lines: [{ type: 'narration', text: '故事内容待补充……' }] },
    { scene: '待补充', avatar_ghost: '', avatar_me: '', lines: [{ type: 'narration', text: '故事内容待补充……' }] },
    { scene: '待补充', avatar_ghost: '', avatar_me: '', lines: [{ type: 'narration', text: '故事内容待补充……' }] },
    { scene: '待补充', avatar_ghost: '', avatar_me: '', lines: [{ type: 'narration', text: '故事内容待补充……' }] }
  ];

  /* 构建头像 HTML */
  function buildAvatar(fileTitle) {
    if (fileTitle) {
      /* MediaWiki [[File:xxx|44px]] 渲染后是 <a><img></a>，
         这里用 img src 方式暂不可用，实际需 wikitext 渲染。
         此处占位，等 Rin 换成 wikitext [[file:]] 写法后生效。 */
      return '<div class="date_story-avatar"><div class="date_story-avatar-placeholder"></div></div>';
    }
    return '<div class="date_story-avatar"><div class="date_story-avatar-placeholder"></div></div>';
  }

  /* 构建整个故事 body HTML */
  function buildStoryHTML(story) {
    var html = '';
    story.lines.forEach(function (line) {
      if (line.type === 'narration') {
        html += '<div class="date_story-narration">' + line.text + '</div>';
      } else if (line.type === 'ghost') {
        html += '<div class="date_story-dialogue date_story-dialogue--left">'
              +   buildAvatar(story.avatar_ghost)
              +   '<div class="date_story-dialogue-content">'
              +     '<span class="date_story-charname">幽灵</span>'
              +     '<span class="date_story-text">' + line.text + '</span>'
              +   '</div>'
              + '</div>';
      } else if (line.type === 'me') {
        html += '<div class="date_story-dialogue date_story-dialogue--right">'
              +   buildAvatar(story.avatar_me)
              +   '<div class="date_story-dialogue-content">'
              +     '<span class="date_story-text">' + line.text + '</span>'
              +   '</div>'
              + '</div>';
      }
    });
    return html;
  }

  /* ── 绑定卡片点击 ── */
  var items   = document.querySelectorAll('.card_content_date-item');
  var panel   = document.getElementById('date-story-panel');
  var sceneEl = document.getElementById('date-story-scene');
  var bodyEl  = document.getElementById('date-story-body');
  var current = -1;

  items.forEach(function (item, index) {
    item.style.cursor = 'pointer';
    item.addEventListener('click', function () {

      /* 再次点击同一张卡：收起 */
      if (current === index) {
        panel.classList.remove('is-visible');
        item.classList.remove('is-active');
        current = -1;
        return;
      }

      /* 切换高亮 */
      items.forEach(function (el) { el.classList.remove('is-active'); });
      item.classList.add('is-active');
      current = index;

      /* 填充内容 */
      var story = stories[index] || stories[0];
      sceneEl.textContent = story.scene;
      bodyEl.innerHTML    = buildStoryHTML(story);

      /* 重新触发淡入动画 */
      panel.classList.remove('is-visible');
      void panel.offsetWidth; /* reflow */
      panel.classList.add('is-visible');

      /* 平滑滚动到故事区 */
      panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    });
  });
})();
</script>

</div><!--右栏结束-->
</div><!-- 正文内容结束-->
</div><!--inner结束-->
</div><!--背景结束-->
</div><!--容器结束-->
{{cardcss}}