* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
        background-color: #000000;
        color: #FFFFFF;
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    overflow: hidden;
    transition: background-color 0.1s, color 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 游戏终端容器 */
#game-terminal {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 9/16;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 移动端适配 - 使用等比例缩放 */
@media (max-width: 600px) {
    #game-terminal {
        max-width: 100%;
        height: 100vh;
        aspect-ratio: unset;
    }

    /* 卡牌容器等比例缩放 */
    .card-container {
        transform: scale(0.85);
        transform-origin: center center;
    }

    /* 调整overlay文字 */
    .card-overlay {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    /* 调整统计显示 */
    .stats-display {
        font-size: 0.7rem;
        padding: 6px 10px;
        gap: 10px;
    }

    .stat-item {
        min-width: 50px;
    }

    /* 调整事件文字 */
    .event-text {
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    /* 调整按钮 */
    .control-btn {
        font-size: 1rem;
        padding: 0.8rem;
        min-height: 3rem;
    }

    /* 调整标题画面 */
    .title-content h1 {
        font-size: 1.6rem;
    }

    .title-content h2 {
        font-size: 0.9rem;
    }

    /* 调整进度条 */
    .progress-bar {
        width: 90%;
    }

    .progress-text {
        font-size: 16px;
    }
}

/* 启动画面样式 */
.boot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    opacity: 1;
    transition: opacity 1s ease;
}

.boot-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.code-waterfall {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.code-line {
    margin-bottom: 5px;
    white-space: pre;
    opacity: 0.8;
    color: #FFFFFF;
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
    font-size: 14px;
}

.loading-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.loading-container.active {
    display: flex;
}

.progress-bar {
    width: 80%;
    height: 20px;
    border: 1px solid white;
    margin: 20px 0;
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: #FFFFFF;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

.progress-text {
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
}

/* 标题画面样式 - 与 pixel-perfect-replica.html 一致 */
.title-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1500;
    overflow: hidden;
}

.title-screen.active {
    display: flex;
}

/* Glitch Text Animation for Title - 与 pixel-perfect-replica.html 一致 */
.game-title {
    position: relative;
    font-size: 5rem; /* Increased from 4rem to fill more space */
    font-weight: bold;
    margin-bottom: 1rem;
    letter-spacing: -0.05em; /* tracking-tighter */
    color: #fff;
    font-family: 'VT323', monospace;
    width: 100%;
    max-width: 30rem; /* Increased to match text size */
    text-align: center;
    line-height: 0.9; /* Adjust line height to prevent overflow */
}

/* Media query for desktop */
@media (min-width: 768px) {
    .game-title {
        font-size: 7.5rem; /* Increased from 6rem to fill more space */
        line-height: 0.9; /* Adjust line height to prevent overflow */
        max-width: 45rem; /* Increased to match text size on desktop */
    }
}

.subtitle {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 3rem; /* mb-12 */
    opacity: 0.8;
    font-family: 'VT323', 'Noto Sans SC', monospace; /* font-mono with fallback */
    text-align: center;
    width: 28rem; /* Fixed width instead of max-width */
    min-height: 4.5rem; /* Increased height to accommodate two lines */
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-line; /* Allow line breaks from \n characters */
}

/* Adjust Chinese text in subtitle to be smaller and lighter */
.subtitle:lang(zh),
.subtitle[data-lang="zh"] {
    font-size: 1.1rem; /* Slightly smaller for Chinese characters */
    font-weight: normal; /* Lighter font weight */
    height: 2.025rem; /* Match height of first line of English text (1.35rem * 1.5 line-height) */
    overflow: hidden; /* Hide any overflow */
    line-height: 1.5; /* Ensure consistent line height with English */
}

/* Adjust English text in subtitle to be larger */
.subtitle:not([data-lang="zh"]) {
    font-size: 1.35rem; /* Slightly larger for English text */
}

.game-title::before,
.game-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.game-title::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.game-title::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    4.166666667% { clip: rect(70px, 9999px, 19px, 0); }
    8.333333333% { clip: rect(6px, 9999px, 86px, 0); }
    12.5% { clip: rect(85px, 9999px, 28px, 0); }
    16.666666667% { clip: rect(42px, 9999px, 73px, 0); }
    20.833333333% { clip: rect(23px, 9999px, 88px, 0); }
    25% { clip: rect(58px, 9999px, 14px, 0); }
    29.166666667% { clip: rect(91px, 9999px, 39px, 0); }
    33.333333333% { clip: rect(17px, 9999px, 65px, 0); }
    37.5% { clip: rect(76px, 9999px, 31px, 0); }
    41.666666667% { clip: rect(49px, 9999px, 82px, 0); }
    45.833333333% { clip: rect(12px, 9999px, 57px, 0); }
    50% { clip: rect(63px, 9999px, 25px, 0); }
    54.166666667% { clip: rect(38px, 9999px, 71px, 0); }
    58.333333333% { clip: rect(84px, 9999px, 16px, 0); }
    62.5% { clip: rect(29px, 9999px, 94px, 0); }
    66.666666667% { clip: rect(55px, 9999px, 43px, 0); }
    70.833333333% { clip: rect(20px, 9999px, 78px, 0); }
    75% { clip: rect(67px, 9999px, 32px, 0); }
    79.166666667% { clip: rect(44px, 9999px, 89px, 0); }
    83.333333333% { clip: rect(15px, 9999px, 61px, 0); }
    87.5% { clip: rect(73px, 9999px, 27px, 0); }
    91.666666667% { clip: rect(36px, 9999px, 86px, 0); }
    95.833333333% { clip: rect(52px, 9999px, 19px, 0); }
    100% { clip: rect(65px, 9999px, 20px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(66px, 9999px, 60px, 0); }
    4.166666667% { clip: rect(21px, 9999px, 75px, 0); }
    8.333333333% { clip: rect(87px, 9999px, 33px, 0); }
    12.5% { clip: rect(13px, 9999px, 58px, 0); }
    16.666666667% { clip: rect(48px, 9999px, 91px, 0); }
    20.833333333% { clip: rect(72px, 9999px, 25px, 0); }
    25% { clip: rect(37px, 9999px, 69px, 0); }
    29.166666667% { clip: rect(81px, 9999px, 14px, 0); }
    33.333333333% { clip: rect(24px, 9999px, 53px, 0); }
    37.5% { clip: rect(59px, 9999px, 88px, 0); }
    41.666666667% { clip: rect(16px, 9999px, 42px, 0); }
    45.833333333% { clip: rect(73px, 9999px, 79px, 0); }
    50% { clip: rect(31px, 9999px, 64px, 0); }
    54.166666667% { clip: rect(68px, 9999px, 18px, 0); }
    58.333333333% { clip: rect(45px, 9999px, 85px, 0); }
    62.5% { clip: rect(22px, 9999px, 39px, 0); }
    66.666666667% { clip: rect(77px, 9999px, 72px, 0); }
    70.833333333% { clip: rect(14px, 9999px, 56px, 0); }
    75% { clip: rect(51px, 9999px, 83px, 0); }
    79.166666667% { clip: rect(28px, 9999px, 47px, 0); }
    83.333333333% { clip: rect(64px, 9999px, 90px, 0); }
    87.5% { clip: rect(19px, 9999px, 35px, 0); }
    91.666666667% { clip: rect(76px, 9999px, 61px, 0); }
    95.833333333% { clip: rect(43px, 9999px, 78px, 0); }
    100% { clip: rect(21px, 9999px, 61px, 0); }
}

/* 数字雨背景效果 */
#matrix-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 确保在标题页面内容下方，但在背景之上 */
    opacity: 0; /* 初始不可见 */
    pointer-events: none; /* 确保不影响鼠标事件 */
    transition: opacity 1s ease; /* 添加淡入效果 */
    /* 限制数字雨只在标题页面内显示 */
    overflow: hidden;
    display: none; /* 初始隐藏 */
}

#title-screen #matrix-rain.active {
    opacity: 0.2; /* 恢复透明度，只在标题页面显示 */
    display: block; /* 激活时显示 */
}

/* CRT Scanline Effect - 只在标题页面显示 */
.scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.2)
    );
    background-size: 100% 4px;
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1600;
    animation: scroll 10s linear infinite;
}

/* CRT Flicker - 只在标题页面显示 */
.crt-flicker {
    animation: flicker 0.15s infinite;
    pointer-events: none;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(255, 255, 255, 0.02);
    opacity: 0;
    z-index: 1550;
}

@keyframes scroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

@keyframes flicker {
    0% { opacity: 0.02; }
    5% { opacity: 0.05; }
    10% { opacity: 0.01; }
    15% { opacity: 0.05; }
    20% { opacity: 0.02; }
    50% { opacity: 0.02; }
    55% { opacity: 0.05; }
    60% { opacity: 0.02; }
    100% { opacity: 0.02; }
}

.control-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* gap-4 */
    width: 100%;
    max-width: 16rem; /* Reduced from 20rem to make buttons narrower */
}



.control-btn {
    width: 100%;
    padding: 1rem; /* py-4 */
    background: #000; /* 完全不透明黑色背景 */
    border: 2px solid #fff;
    color: #fff;
    font-family: 'VT323', 'Noto Sans SC', monospace; /* Add fallback for Chinese */
    font-size: 1.25rem; /* text-xl */
    font-weight: normal; /* Changed from bold to normal */
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
    box-shadow: 4px 4px 0px 0px rgba(255,255,255,1); /* 纯白色阴影，不受闪烁影响 */
    min-height: 3.5rem; /* Fixed height to prevent layout shift */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2; /* Ensure consistent line height */
    position: relative;
    overflow: hidden;
    transition: color 0.4s, border-color 0.4s;
}

.control-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.control-btn:hover {
    color: #000;
    border-color: #fff;
}

.control-btn:hover::before {
    width: 100%;
}

/* 防止按钮受到CRT闪烁效果影响 */
.control-btn, .lang-btn {
    position: relative;
    z-index: 1601; /* 高于crt-flicker */
}

.control-btn:active {
    transform: translate(4px, 4px); /* active:translate-x-1 active:translate-y-1 */
    box-shadow: none; /* active:shadow-none */
    transition: transform 0.1s, box-shadow 0.1s; /* 为active状态添加快速过渡 */
}

/* Adjust Chinese text in buttons to match English size */
.control-btn:lang(zh),
.control-btn[data-lang="zh"] {
    font-size: 1.15rem; /* 调整中文按钮字体大小，减少与英文的差异 */
}

.lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    padding: 0.5rem; /* py-2 */
    background: #000; /* 完全不透明黑色背景 */
    border: 1px solid #fff;
    color: #fff;
    font-family: 'VT323', 'Noto Sans SC', monospace; /* Add fallback for Chinese */
    font-size: 0.875rem; /* text-sm */
    cursor: pointer;
    min-height: 2.5rem; /* Fixed height to prevent layout shift */
    width: 100%; /* Ensure consistent width */
    line-height: 1.2; /* Ensure consistent line height */
    position: relative;
    overflow: hidden;
    transition: color 0.4s, border-color 0.4s;
}

.lang-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.lang-btn:hover {
    color: #000;
    border-color: #fff;
}

.lang-btn:hover::before {
    width: 100%;
}

/* Globe icon SVG - matching lucide-react Globe 16px */
.globe-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.version-footer {
    position: absolute;
    bottom: 2rem;
    font-size: 1rem;
    color: #555;
    font-family: 'VT323', monospace;
    letter-spacing: 0.1em;
}

/* 游戏界面样式 */
.game-screen {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.game-screen.active {
    display: flex;
}

/* 顶部状态栏 (15%) - 液体图标系统 */
.stats-bar {
    height: 15%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- 统一的 SVG 样式系统 (The Design System) --- */
.stat-icon-container {
    width: 40px;
    height: 40px;
    position: relative;
}

.icon-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
}

/* 1. 统一的基础层样式 (Outline Layer) */
.layer-base { z-index: 1; }

/* ★核心：所有图标共享此样式，保证粗细绝对一致 */
.outline-shape {
    fill: none;
    stroke: #fff;
    stroke-width: 3;     /* 统一粗细 */
    stroke-linejoin: round; /* 圆角连接，防止尖角过长被切 */
    stroke-linecap: round;
}

.features { fill: #fff; stroke: #fff; } /* 基础层特征颜色 */

/* 2. 裁剪容器 (The Clipper) */
.fill-wrapper {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 50%; /* JS 控制 */
    overflow: hidden;
    z-index: 2;
    transition: height 0.1s linear; /* 顺滑动画 */
}

/* 3. 统一的填充层样式 (Fill Layer) */
.layer-fill {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 40px; /* 必须固定高度，匹配容器高度 */
}

.fill-shape {
    fill: #fff;
    stroke: none; /* 填充层不需要描边，只要填充色 */
}

.layer-fill .features { fill: #000; stroke: #000; } /* 填充层特征反色 */

/* 影响圆点样式 */
.impact-dot {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.2s ease-out;
}

.impact-dot.small {
    width: 6px;
    height: 6px;
    top: -20px; /* 底部对齐位置 */
}

.impact-dot.large {
    width: 12px;
    height: 12px;
    top: -26px; /* 底部对齐：大圆点比小圆点高6px (12px - 6px = 6px) */
}

/* 圆点下落动画 */
@keyframes dropInSmall {
    0% {
        top: -60px;
        opacity: 0;
    }
    60% {
        top: -20px;
        opacity: 1;
    }
    100% {
        top: -20px;
        opacity: 1;
    }
}

@keyframes dropInLarge {
    0% {
        top: -66px;
        opacity: 0;
    }
    60% {
        top: -26px;
        opacity: 1;
    }
    100% {
        top: -26px;
        opacity: 1;
    }
}

.impact-dot.small.dropping {
    animation: dropInSmall 0.3s ease-out forwards;
}

.impact-dot.large.dropping {
    animation: dropInLarge 0.3s ease-out forwards;
}

/* 核心交互区 (60%) */
.game-container {
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.event-text {
    text-align: center;
    margin-bottom: 15px;
    font-size: 16px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 初始时隐藏事件文本 */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 事件文本准备就绪时显示 */
.event-text.visible {
    opacity: 1;
}

/* 卡牌容器 */
.card-container {
    width: 100%;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 确保容器是正方形 */
    aspect-ratio: 1/1;
    max-width: 320px;
    max-height: 320px;
    margin: 0 auto;
    /* 初始时隐藏容器内容，防止出现线框 */
    visibility: hidden;
}

/* 卡牌容器准备就绪时显示 */
.card-container.ready {
    visibility: visible;
}

/* 装饰性方块 - 表示后面还有牌 */
.card-deck-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 320px;
    max-height: 320px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    /* --- 修改开始 --- */
    opacity: 1;             /* 始终可见 */
    visibility: visible;     /* 始终可见 */
    pointer-events: none;   /* 防止遮挡点击 */
    /* --- 修改结束 --- */
}

/* === 卡牌美术容器 (新增) === */
.card-art-visual {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid white;
    margin-bottom: 5px; /* Reduced from 10px to 5px to move text upward */
    overflow: hidden;
}

/* Art Type: Viral (播放按钮 + 波纹) */
.art-viral .play-icon {
    width: 0; height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid white;
    z-index: 2;
}
.art-viral .ripple {
    position: absolute;
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    animation: ripple-anim 2s infinite linear;
}
@keyframes ripple-anim { 0% {transform: scale(1); opacity:1;} 100% {transform: scale(3); opacity:0;} }

/* Art Type: Money (动态条形码) */
.art-money { display: flex; align-items: flex-end; gap: 4px; height: 50px; }
.art-money .bar {
    width: 6px; background: white;
    animation: bar-anim 0.5s infinite alternate;
}
@keyframes bar-anim { 0% {height: 20%;} 100% {height: 100%;} }

/* Art Type: Social (对话气泡) */
.art-social .bubble {
    width: 50px; height: 35px;
    border: 1px solid white;
    position: absolute;
}
.art-social .b1 { top: 25px; left: 35%; background: black; z-index: 2; }
.art-social .b2 { top: 40px; left: 50%; background: white; z-index: 1; }

/* Art Type: Human (面部扫描框) */
.art-human .scan-frame {
    width: 60px; height: 60px;
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
}
.art-human .scan-frame::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:2px;
    background: white;
    animation: scan-down 1.5s infinite linear;
}
@keyframes scan-down { 0% {top:0;} 100% {top:100%;} }

/* Art Type: Glitch (眼睛) */
.art-glitch .eye {
    width: 60px; height: 30px;
    border: 1px solid white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.art-glitch .pupil {
    width: 15px; height: 15px; background: white; border-radius: 50%;
    animation: look-around 0.5s infinite steps(3);
}
@keyframes look-around { 0% {transform: translate(0,0);} 25% {transform: translate(-10px,5px);} 50% {transform: translate(10px,-5px);} }

/* 卡牌样式 */
.card {
    width: 100%;
    height: 100%;
    max-width: 320px;
    max-height: 320px;
    border: 1px solid white;
    padding: 15px;
    background-color: #000000; /* 确保黑色背景 */
    opacity: 1; /* 确保100%不透明 */
    position: absolute;
    cursor: grab;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    /* 确保卡牌是正方形 */
    aspect-ratio: 1/1;
    /* 确保主卡牌在叠加卡牌之上 */
    z-index: 10;
    /* 设置变换原点为中心 */
    transform-origin: center center;
    /* 使用transform居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 确保这里面没有 animation 属性，或者被覆盖 */
    will-change: transform; /* 顺便开启GPU加速优化性能 */
}

.card:active {
    cursor: grabbing;
}

/* 卡牌入场动画 - 从左上角飞入 */
@keyframes slideInFromTopLeft {
    from {
        transform: translate(-100%, -100%) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* 为每张卡牌创建独立的动画，保持叠加效果 */
@keyframes slideInStack1 {
    from {
        transform: translate(-100%, -100%) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(-2px, -2px) rotate(-1deg);
        opacity: 1;
    }
}

@keyframes slideInStack2 {
    from {
        transform: translate(-100%, -100%) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(2px, -1px) rotate(0.5deg);
        opacity: 1;
    }
}

@keyframes slideInStack3 {
    from {
        transform: translate(-100%, -100%) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(-1px, 2px) rotate(-0.5deg);
        opacity: 1;
    }
}

@keyframes slideInStack4 {
    from {
        transform: translate(-100%, -100%) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(1px, 1px) rotate(1deg);
        opacity: 1;
    }
}

@keyframes slideInStack5 {
    from {
        transform: translate(-100%, -100%) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(0px, 3px) rotate(-0.8deg);
        opacity: 1;
    }
}

/* 卡牌入场动画 - 中轴反转 */
@keyframes flipInFromCenter {
    from {
        transform: translate(-50%, -50%) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) rotateY(0deg);
        opacity: 1;
    }
}

.card.entering {
    animation: slideInFromTopLeft 0.5s ease-out forwards;
}

/* 卡牌叠加效果 */
.card-stack {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 320px;
    max-height: 320px;
    pointer-events: none;
    /* 确保叠加容器也是正方形 */
    aspect-ratio: 1/1;
}

.card-stack-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #FFFFFF; /* 增加边框宽度并明确设置为白色 */
    background-color: #000000;
    opacity: 0; /* 初始完全透明，防止闪烁 */
    transform: translate(-100%, -100%) rotate(-15deg);
    visibility: hidden; /* 初始时隐藏，防止出现线框 */
}

/* 为每张叠加卡牌添加递增的延迟和位置偏移 */
.card-stack-item:nth-child(1) {
    opacity: 0; /* 确保初始隐藏 */
    visibility: hidden; /* 确保初始不可见 */
    transform: translate(-100%, -100%) rotate(-15deg); /* 保持初始隐藏位置 */
    animation-delay: 0.0s;
    z-index: 5;
}

.card-stack-item:nth-child(2) {
    opacity: 0; /* 确保初始隐藏 */
    visibility: hidden; /* 确保初始不可见 */
    transform: translate(-100%, -100%) rotate(-15deg); /* 保持初始隐藏位置 */
    animation-delay: 0.05s;
    z-index: 4;
}

.card-stack-item:nth-child(3) {
    opacity: 0; /* 确保初始隐藏 */
    visibility: hidden; /* 确保初始不可见 */
    transform: translate(-100%, -100%) rotate(-15deg); /* 保持初始隐藏位置 */
    animation-delay: 0.1s;
    z-index: 3;
}

.card-stack-item:nth-child(4) {
    opacity: 0; /* 确保初始隐藏 */
    visibility: hidden; /* 确保初始不可见 */
    transform: translate(-100%, -100%) rotate(-15deg); /* 保持初始隐藏位置 */
    animation-delay: 0.15s;
    z-index: 2;
}

.card-stack-item:nth-child(5) {
    opacity: 0; /* 确保初始隐藏 */
    visibility: hidden; /* 确保初始不可见 */
    transform: translate(-100%, -100%) rotate(-15deg); /* 保持初始隐藏位置 */
    animation-delay: 0.2s;
    z-index: 1;
}

/* 动画结束后保持叠加效果 - 使用更具体的选择器 */
.card-stack-item.entering {
    visibility: visible; /* 动画开始时显示 */
    opacity: 1; /* 动画开始时完全可见 */
}

/* 为每个子元素指定独立的动画 */
.card-stack-item:nth-child(1).entering {
    animation: slideInStack1 0.5s ease-out forwards;
}

.card-stack-item:nth-child(2).entering {
    animation: slideInStack2 0.5s ease-out forwards;
}

.card-stack-item:nth-child(3).entering {
    animation: slideInStack3 0.5s ease-out forwards;
}

.card-stack-item:nth-child(4).entering {
    animation: slideInStack4 0.5s ease-out forwards;
}

.card-stack-item:nth-child(5).entering {
    animation: slideInStack5 0.5s ease-out forwards;
}

/* 卡牌拖拽状态 */
.card.dragging {
    z-index: 100;
    box-shadow: 6px 6px 0 white;
}

/* 新增这个类，专门负责包裹内容 */
.card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 修改故障动画，应用在 inner 上，而不是 card 上 */
.card-inner.glitch {
    animation: glitch-anim 0.8s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(-50%, -50%) skew(0deg) scale(1);
        filter: hue-rotate(0deg) saturate(1);
        opacity: 1;
    }
    5% {
        transform: translate(-50%, -50%) skew(0.5deg) scale(1.01);
        filter: hue-rotate(90deg) saturate(1.2);
        opacity: 0.9;
    }
    10% {
        transform: translate(-50%, -50%) translateX(-2px) skew(-0.5deg) scale(0.99);
        filter: hue-rotate(180deg) saturate(0.8);
        opacity: 1;
    }
    15% {
        transform: translate(-50%, -50%) translateX(2px) translateY(-1px) skew(0.2deg) scale(1.02);
        filter: hue-rotate(270deg) saturate(1.5);
        opacity: 0.95;
    }
    20% {
        transform: translate(-50%, -50%) translateY(1px) skew(-0.3deg) scale(0.98);
        filter: hue-rotate(360deg) saturate(0.7);
        opacity: 1;
    }
    25% {
        transform: translate(-50%, -50%) translateX(-1px) translateY(2px) skew(0.4deg) scale(1.01);
        filter: hue-rotate(450deg) saturate(1.3);
        opacity: 0.9;
    }
    30% {
        transform: translate(-50%, -50%) translateX(1px) skew(-0.2deg) scale(0.99);
        filter: hue-rotate(540deg) saturate(1.1);
        opacity: 1;
    }
    35% {
        transform: translate(-50%, -50%) translateY(-2px) skew(0.3deg) scale(1.02);
        filter: hue-rotate(630deg) saturate(0.9);
        opacity: 0.95;
    }
    40% {
        transform: translate(-50%, -50%) translateX(2px) translateY(1px) skew(-0.4deg) scale(0.98);
        filter: hue-rotate(720deg) saturate(1.4);
        opacity: 1;
    }
    45% {
        transform: translate(-50%, -50%) translateX(-2px) skew(0.2deg) scale(1.01);
        filter: hue-rotate(810deg) saturate(0.8);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) translateY(-1px) skew(-0.3deg) scale(0.99);
        filter: hue-rotate(900deg) saturate(1.2);
        opacity: 1;
    }
    55% {
        transform: translate(-50%, -50%) translateX(1px) translateY(2px) skew(0.1deg) scale(1.02);
        filter: hue-rotate(990deg) saturate(0.7);
        opacity: 0.95;
    }
    60% {
        transform: translate(-50%, -50%) translateX(-1px) skew(-0.2deg) scale(0.98);
        filter: hue-rotate(1080deg) saturate(1.3);
        opacity: 1;
    }
    65% {
        transform: translate(-50%, -50%) translateY(1px) skew(0.3deg) scale(1.01);
        filter: hue-rotate(1170deg) saturate(0.9);
        opacity: 0.9;
    }
    70% {
        transform: translate(-50%, -50%) translateX(2px) translateY(-2px) skew(-0.1deg) scale(0.99);
        filter: hue-rotate(1260deg) saturate(1.1);
        opacity: 1;
    }
    75% {
        transform: translate(-50%, -50%) translateX(-1px) skew(0.4deg) scale(1.02);
        filter: hue-rotate(1350deg) saturate(0.8);
        opacity: 0.95;
    }
    80% {
        transform: translate(-50%, -50%) translateY(-1px) skew(-0.3deg) scale(0.98);
        filter: hue-rotate(1440deg) saturate(1.4);
        opacity: 1;
    }
    85% {
        transform: translate(-50%, -50%) translateX(1px) translateY(1px) skew(0.2deg) scale(1.01);
        filter: hue-rotate(1530deg) saturate(0.7);
        opacity: 0.9;
    }
    90% {
        transform: translate(-50%, -50%) translateX(-2px) skew(-0.1deg) scale(0.99);
        filter: hue-rotate(1620deg) saturate(1.2);
        opacity: 1;
    }
    95% {
        transform: translate(-50%, -50%) translateY(2px) skew(0.3deg) scale(1.01);
        filter: hue-rotate(1710deg) saturate(0.9);
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -50%) skew(0deg) scale(1);
        filter: hue-rotate(1800deg) saturate(1);
        opacity: 1;
    }
}

/* 元数据盒子 */
.metadata-box {
    border: 1px solid white;
    padding: 10px;
    margin-bottom: 10px; /* Reduced from 15px to 10px to move text upward */
    flex-shrink: 0;
}

.metadata-item {
    margin-bottom: 5px;
    font-size: 14px;
}

/* 描述文本 */
.description {
    flex: 1;
    line-height: 1.4;
    margin-bottom: 10px; /* Reduced from 15px to 10px to move text upward */
    overflow-y: auto;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 角色名称 */
.character-name {
    text-align: right;
    font-size: 14px;
    font-style: italic;
    opacity: 0.8;
}

/* 操作提示 */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 320px;
    max-height: 320px;
    display: flex;
    font-size: 16px;
    font-weight: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease; /* 统一过渡时间，使变化更平滑 */
    /* 初始时隐藏覆盖层 */
    visibility: hidden;
    /* 确保overlay是正方形 */
    aspect-ratio: 1/1;
    z-index: 15; /* 确保overlay显示在其他元素之上 */
}

/* 覆盖层准备就绪时显示 */
.card-overlay.ready {
    visibility: visible;
    opacity: 0; /* 保持透明，直到滑动时才显示 */
    transition: opacity 0.2s ease; /* 稍微增加过渡时间，使变化更平滑 */
}

.overlay-reject {
    color: #FFFFFF; /* 明确设置为白色 */
    opacity: 1; /* 确保100%不透明 */
    text-shadow: none;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 15px;
}

.overlay-accept {
    color: #FFFFFF; /* 明确设置为白色 */
    opacity: 1; /* 确保100%不透明 */
    text-shadow: none;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px;
}

/* 滑动提示 */
.swipe-hint {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* 初始时隐藏滑动提示 */
    visibility: hidden;
}

.swipe-hint.visible {
    opacity: 1;
    visibility: visible;
}

.swipe-arrow {
    font-size: 24px;
    animation: swipeHint 1.5s infinite;
}

.swipe-arrow.left {
    animation: swipeLeft 1.5s infinite;
}

.swipe-arrow.right {
    animation: swipeRight 1.5s infinite;
}

@keyframes swipeLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
}

@keyframes swipeRight {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

.swipe-text {
    font-size: 14px;
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
}

/* 底部信息栏 (25%) */
.info-bar {
    height: 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 10px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-item {
    font-size: 14px;
    font-family: 'Noto Sans SC', 'Helvetica Neue', sans-serif;
}

.buff-slots {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.buff-slot {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0.5;
}

/* === 1. 死亡背景：系统崩溃 === */
.death-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 纯黑背景 + 微弱的红色/灰色故障扫描线 */
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 0px,
        rgba(0, 0, 0, 1) 4px,
        rgba(20, 20, 20, 1) 5px
    );
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem; text-align: center;
    box-sizing: border-box;
    z-index: 2000;
}

.death-screen.active {
    display: flex;
}

/* === 2. 死亡图标 (故障几何) === */
.death-icon-container {
    width: 100px; height: 100px;
    margin-bottom: 2rem;
    position: relative;
}

.death-svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    /* 故障抖动动画 */
    animation: glitch-shake 0.3s infinite;
}

@keyframes glitch-shake {
    0% { transform: translate(0, 0); opacity: 1; }
    20% { transform: translate(-2px, 2px); opacity: 0.8; }
    40% { transform: translate(2px, -2px); opacity: 1; }
    60% { transform: translate(-2px, -2px); opacity: 0.8; }
    80% { transform: translate(2px, 2px); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 1; }
}

/* === 3. 标题组 === */
.death-title-group {
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
    margin-bottom: 25px;
    width: 100%;
}

.ending-id {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 5px;
    display: block;
}

.ending-name {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px #333;
}

/* === 4. 日志文本 (讽刺文案) === */
.death-log {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    line-height: 2.4;
    color: #ccc;
    width: 100%;
    font-weight: 300;
    text-align: center;
}

.reason {
    color: #fff;
    font-weight: 500;
    border: 1px solid #fff;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 15px;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
}

/* === 5. 按钮 === */
.restart-btn {
    margin-top: 40px;
    padding: 12px 30px;
    background: #fff; /* 反色按钮，强调重启 */
    color: #000;
    border: none;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 700;
}
.restart-btn:hover {
    background: #ccc;
    transform: scale(1.05);
}

/* 反色背景动画 */
body.inverted {
    background-color: #FFFFFF;
    color: #000000;
}

/* === 1. 背景 === */
.void-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 0; overflow: hidden;
    display: none;
}
.void-background.active {
    display: block;
}
.stars {
    position: absolute;
    width: 2px; height: 2px; background: transparent;
    box-shadow: 100px 200px #333, 200px 500px #444, 300px 100px #222, 400px 300px #555, 50px 500px #333;
    animation: star-move 50s linear infinite;
}
@keyframes star-move { from { transform: translateY(0); } to { transform: translateY(-500px); } }

/* === 2. 内容层 === */
.grand-finale {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    box-sizing: border-box;
    color: #fff;
    z-index: 3000;
    background: #000;
}

.grand-finale.active {
    display: flex;
    animation: fadeIn 2s ease-in;
}

/* === 3. 3D 陀螺仪皇冠 === */
.crown-wrapper {
    width: 120px;
    height: 120px;
    margin-bottom: 1rem;
    margin-top: 20px; /* 【改动】整体往下一点 */
    perspective: 800px;
}
.gyro-assembly {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: float-assembly 4s ease-in-out infinite;
}
@keyframes float-assembly { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-10px);} }
.ring-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    animation: spin-x 8s linear infinite;
}
.ring-inner {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: spin-y 6s linear infinite;
}
.core-diamond {
    position: absolute;
    top: 38%;
    left: 38%;
    width: 24%;
    height: 24%;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 0 0 15px rgba(255,255,255,0.8);
    animation: pulse-core 2s ease-in-out infinite;
}
@keyframes spin-x { 0% {transform: rotateX(0deg) rotateY(0deg);} 100% {transform: rotateX(360deg) rotateY(180deg);} }
@keyframes spin-y { 0% {transform: rotateY(0deg) rotateX(45deg);} 100% {transform: rotateY(-360deg) rotateX(45deg);} }
@keyframes pulse-core { 50% { transform: rotate(45deg) scale(1.1); opacity: 1; } }

/* === 4. 标题组 === */
.title-group {
    margin-bottom: 0px; /* 减少底部间距 */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.achievement-label {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: #888;
    letter-spacing: 3px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.scramble-title {
    font-family: 'Noto Sans SC', monospace;
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: 4px;
    height: 45px;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.4);
    margin-top: 0px;

    position: relative;
    display: inline-block;
    width: fit-content;
}

.scramble-title::after {
    content: '_';
    position: absolute;
    right: -25px;
    top: 0;
    animation: blink 0.8s infinite;
    font-weight: 100;
    opacity: 0.5;
}
@keyframes blink { 50% {opacity: 0;} }

.title-subtitle {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.75rem;
    color: #555;
    letter-spacing: 1px;
    margin-top: 20px;
    font-weight: 300;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    animation-delay: 1.2s;
}
@keyframes fadeIn { to { opacity: 1; } }

/* === 5. 100% 数据环 (整体上移) === */
.prediction-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto 20px; /* 【改动】减少上边距，往上提 */
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}
.progress-ring__circle {
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: #fff;
    stroke-width: 1.5;
    fill: transparent;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.prediction-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.8rem;
    font-weight: 300;
    color: #fff;
    z-index: 2;
}
.prediction-label {
    position: absolute;
    bottom: -20px;
    font-size: 0.7rem;
    color: #666;
    font-family: 'VT323', monospace;
    letter-spacing: 2px;
}

/* === 6. 日志文本 === */
.finale-log {
    font-size: 0.9rem;
    line-height: 2.0;
    color: #bbb;
    width: 100%;
    font-weight: 300;
}
.dim {
    color: #444;
    font-size: 0.85em;
    display: block;
    line-height: 1.2;
    margin-bottom: 12px;
}

.system-status-box {
    border-top: 1px solid #333;
    margin-top: 25px;
    padding-top: 15px;
    font-family: 'VT323', monospace;
    color: #666;
    font-size: 1rem;
}

/* === 7. 按钮 (Wipe Animation 恢复) === */
.restart-branch-btn {
    margin-top: 25px;
    padding: 10px 25px;
    background: transparent;
    color: #888;
    border: 1px solid #333;
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.4s; /* 只过渡颜色，背景由伪元素处理 */
    position: relative; /* 关键：定位基准 */
    overflow: hidden;   /* 关键：隐藏溢出的背景 */
    z-index: 1;         /* 关键：确保内容在背景之上 */
}

/* 伪元素做背景滑块 */
.restart-branch-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* 初始宽度为0 */
    height: 100%;
    background-color: #fff;
    z-index: -1; /* 放在文字后面 */
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* 平滑过渡 */
}

/* 悬浮状态 */
.restart-branch-btn:hover {
    color: #000; /* 文字变黑 */
    border-color: #fff;
}

.restart-branch-btn:hover::before {
    width: 100%; /* 背景填满 */
}