剑来大世界（超高还原度）低消耗

/* ===== 8-Bit 勇者面板 · 深紫浅内版 ===== */
/* 深紫像素边框 + 浅紫内芯，保留全部像素游戏元素 */

details {
    background: #f8f4ff;
    border: 4px solid #2a1a3e;
    box-shadow:
        0 0 0 2px #1a0d2a,
        0 0 0 6px #3e2a5a,
        inset 0 0 0 2px #f8f4ff,
        inset 0 0 0 6px #2a1a3e;
    border-radius: 0;
    margin: 16px 0;
    width: 100%;
    transition: all 0.2s step-end;
    position: relative;
    overflow: hidden;
    font-family: 'Courier New', 'Consolas', monospace;
    image-rendering: pixelated;
}

details::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.02) 0px,
        rgba(0, 0, 0, 0.02) 2px,
        transparent 2px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 0;
}

details[open] {
    border-color: #3e2a5a;
    box-shadow:
        0 0 0 2px #1a0d2a,
        0 0 0 6px #2a1a3e,
        inset 0 0 0 2px #f8f4ff,
        inset 0 0 0 6px #3e2a5a,
        0 0 16px rgba(42, 26, 62, 0.4);
}

summary {
    cursor: pointer;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #f8f4ff;
    user-select: none;
    list-style: none;
    font-weight: 700;
    background: #3e2a5a;
    border-bottom: 4px solid #2a1a3e;
    transition: all 0.1s;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

summary:hover {
    background: #4e3a6a;
    color: #ffd700;
    text-shadow: 0 0 8px #ffd700;
    border-bottom-color: #1a0d2a;
}

summary::-webkit-details-marker { display: none; }

summary::before {
    content: "▶";
    font-size: 0.8rem;
    color: #e0c8f0;
    text-shadow: 0 0 5px #e0c8f0;
    display: inline-block;
    transition: transform 0.1s step-end;
}

details[open] summary::before {
    content: "▼";
    color: #b8a0d8;
    transform: rotate(0);
}

details[open] summary {
    border-bottom-color: #2a1a3e;
    color: #b8a0d8;
}

/* 内部浅紫区 */
details div, details .panel, details .stats-panel {
    color: #2a1a3e;
    padding: 16px;
    line-height: 1.7;
    font-size: 0.8rem;
    background: #faf8ff;
    background-image: radial-gradient(rgba(42, 26, 62, 0.08) 1px, transparent 1px);
    background-size: 8px 8px;
    border: none;
    position: relative;
    z-index: 1;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 2px dotted #c8b8d8;
    image-rendering: pixelated;
}
.stat-row:last-child { border-bottom: none; }

.stat-row span:first-child {
    min-width: 100px;
    color: #4a2a5e;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.stat-row span:last-child {
    min-width: 50px;
    text-align: right;
    color: #2a1a3e;
    font-weight: 700;
    text-shadow: none;
}

/* 进度条 */
.progress-bar {
    background: #e8d8f0;
    border: 3px solid #2a1a3e;
    border-radius: 0;
    height: 10px;
    width: 55%;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}
.progress-fill {
    background: #9a7abf;
    height: 100%;
    border-radius: 0;
    transition: width 0.3s step-end;
    box-shadow: inset 0 0 6px rgba(255,255,255,0.4);
    position: relative;
}
.progress-fill[style*="width:1"],
.progress-fill[style*="width:2"],
.progress-fill[style*="width:3"] { background: #bf4a7a; }
.progress-fill[style*="width:4"],
.progress-fill[style*="width:5"] { background: #bf8a5a; }

.progress-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    background: rgba(255,255,255,0.3);
    animation: pixelShine 0.8s step-end infinite;
}
@keyframes pixelShine {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

/* 记忆表格 */
.memory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    margin-top: 8px;
    border: 3px solid #2a1a3e;
    background: #faf8ff;
}
.memory-table th {
    background: #3e2a5a;
    color: #e0c8f0;
    padding: 8px;
    text-align: left;
    font-weight: 700;
    border-bottom: 3px solid #2a1a3e;
    text-transform: uppercase;
}
.memory-table td {
    padding: 8px;
    border-bottom: 2px solid #c8b8d8;
    color: #2a1a3e;
}
.memory-table tr:last-child td { border-bottom: none; }
.memory-table tr:hover td {
    background: #efe4f8;
    color: #1a0d2a;
}

/* 长记忆卡片 */
.long-memory {
    background: #f0e4f8;
    border: 3px solid #2a1a3e;
    border-image: repeating-linear-gradient(
        45deg,
        #2a1a3e 0px,
        #2a1a3e 4px,
        #3e2a5a 4px,
        #3e2a5a 8px
    ) 4;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.78rem;
    color: #2a1a3e;
    line-height: 1.6;
    position: relative;
}
.long-memory::before {
    content: "★";
    position: absolute;
    top: -10px; left: 8px;
    color: #2a1a3e;
    font-size: 0.8rem;
    text-shadow: 0 0 6px rgba(0,0,0,0.3);
}

.value-up { color: #4a8a3e; font-weight: bold; }
.value-down { color: #bf4a6a; font-weight: bold; }

.cos-icon {
    font-size: 0.9rem;
    margin-right: 6px;
    filter: drop-shadow(0 0 2px #2a1a3e);
}
.glow-text {
    color: #7a4a8a;
    font-size: 0.65rem;
    margin-left: 6px;
    animation: pixelBlink 0.6s step-end infinite;
}
@keyframes pixelBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.divider {
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #2a1a3e 0px,
        #2a1a3e 6px,
        #3e2a5a 6px,
        #3e2a5a 12px
    );
    margin: 14px 0;
}

.heart-beat {
    animation: heartPixel 0.8s step-end infinite;
}
@keyframes heartPixel {
    0%, 100% { text-shadow: 0 0 4px #bf4a6a; }
    50% { text-shadow: 0 0 10px #bf4a6a; }
}

.star-twinkle {
    display: inline-block;
    animation: twinklePixel 1s step-end infinite;
}
@keyframes twinklePixel {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。