/* ================= 全局变量定义 ================= */
/* 默认浅色模式 */
:root {
    --bg-color: #f5f5f7;
    --text-color: #1d1d1f;
}

/* 核心更新：自动侦测系统暗色模式并覆盖颜色变量 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #f5f5f7;
    }
}

/* ================= 基础布局 ================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; 
    position: fixed; /* 彻底断绝由于内容溢出导致的滚动条 */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    /* 背景色和文字颜色切换时的平滑过渡 */
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ================= 字符与碎片样式 ================= */
.char {
    display: inline-block;
    font-size: 7vw; 
    font-weight: bold;
    position: absolute;
    will-change: transform, opacity;
    white-space: nowrap;
    /* 强烈的阴影带来悬浮感和景深 */
    text-shadow: 0px 15px 25px rgba(0,0,0,0.25);
    transform-origin: center center; 
}

/* 炮灰字符掉落得更深，阴影更小，增加空间纵深感 */
.decoy-char {
    text-shadow: 0px 5px 10px rgba(0,0,0,0.15);
}

.fragment {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--text-color);
    /* 裁剪成不规则多边形，模拟真实碎渣 */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    will-change: transform, opacity;
}

/* 适配 PC 端字体大小 */
@media (min-width: 1024px) {
    .char { font-size: 4rem; }
}