/* ============================================================
   自由犯罪元素风格 · 深夜街头 / 黑帮电影片头
   只替换CSS，HTML结构不变
   ============================================================ */

/* 卡片容器 —— 深夜街头的暗黑面板 */
.topic_wrap {
    position: relative;
    /* 深黑到暗蓝的渐变，像深夜的街道 */
    background:
        radial-gradient(ellipse at 15% 20%, rgba(200, 30, 30, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 80%, rgba(30, 60, 120, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(80, 20, 40, 0.08) 0%, transparent 60%),
        linear-gradient(175deg, #0a0a10 0%, #12101a 40%, #0d0b14 70%, #060608 100%);

    /* 暗红 + 冷蓝双色边框，像街头的霓虹灯管 */
    border: 1px solid rgba(180, 30, 30, 0.5);
    box-shadow:
        /* 内发光：暗红和冷蓝 */
        inset 0 0 40px rgba(180, 30, 30, 0.06),
        inset 0 0 80px rgba(30, 60, 120, 0.08),
        inset 0 0 120px rgba(0, 0, 0, 0.8);
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    perspective: 1000px;
}

/* 标题 —— 黑帮电影片头字体 */
.topic_wrap .title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    /* 粗黑无衬线，像黑帮电影标题 */
    font-family: 'Impact', 'Arial Black', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #e8e0d8;                     /* 灰白色，像老电影字幕 */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-shadow:
        0 0 10px rgba(200, 40, 40, 0.6),
        0 0 30px rgba(180, 30, 30, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(30, 60, 120, 0.2);
    /* 像霓虹灯一样微微闪烁 */
    animation: crime-neon 3s ease-in-out infinite;
    /* 底部暗红线，像血痕 */
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(180, 30, 30, 0.4);
    position: relative;
}

/* 标题下方的装饰线，像弹痕 */
.topic_wrap .title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 25%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c42020, #8a1010, #c42020, transparent);
    opacity: 0.7;
    box-shadow: 0 0 8px rgba(200, 40, 40, 0.6);
}

@keyframes crime-neon {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(200, 40, 40, 0.6),
            0 0 30px rgba(180, 30, 30, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.9),
            0 0 60px rgba(30, 60, 120, 0.2);
    }
    50% {
        text-shadow:
            0 0 15px rgba(220, 50, 50, 0.8),
            0 0 40px rgba(180, 30, 30, 0.5),
            0 2px 4px rgba(0, 0, 0, 0.9),
            0 0 80px rgba(30, 60, 120, 0.3);
    }
}

/* 打字机容器 */
.typewriter-container {
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

/* 顶部装饰 —— 像警戒线 */
.typewriter-container::before {
    content: '';
    display: block;
    height: 3px;
    background:
        repeating-linear-gradient(
            90deg,
            #c42020 0px,
            #c42020 12px,
            transparent 12px,
            transparent 20px
        );
    margin-bottom: 10px;
    opacity: 0.6;
    box-shadow: 0 0 6px rgba(200, 40, 40, 0.4);
}

/* 打字机核心 —— 犯罪电影字幕 */
.typewriter {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    /* 粗黑无衬线，像电影字幕 */
    font-family: 'Impact', 'Arial Black', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #f0e8e0;                     /* 灰白，像老电影字幕 */
    text-shadow:
        0 0 5px rgba(200, 40, 40, 0.5),
        0 0 15px rgba(180, 30, 30, 0.3),
        0 0 30px rgba(30, 60, 120, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.12em solid #c42020; /* 暗红光标，像血线 */
    width: 0;

    animation:
        typing 2.5s steps(10, end) forwards,
        blink-caret 0.8s step-end infinite,
        crime-flicker 4s ease-in-out infinite;
}

/* 打字动画 */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* 光标闪烁 —— 暗红色 */
@keyframes blink-caret {
    from, to { border-right-color: transparent; }
    50% { border-right-color: #c42020; }
}

/* 字幕闪烁 —— 像老电影胶片 */
@keyframes crime-flicker {
    0%, 100% {
        opacity: 1;
    }
    4% { opacity: 0.85; }
    6% { opacity: 1; }
    48% { opacity: 1; }
    49% { opacity: 0.75; }
    50% { opacity: 1; }
    82% { opacity: 1; }
    83% { opacity: 0.88; }
    84% { opacity: 1; }
}

/* 伪元素 —— 右上角"WANTED"印章 */
.topic_wrap::before {
    content: 'WANTED';
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: rgba(200, 40, 40, 0.55);
    transform: rotate(6deg);
    pointer-events: none;
    z-index: 0;
    border: 1px solid rgba(200, 40, 40, 0.35);
    padding: 2px 8px;
    box-shadow: 0 0 10px rgba(200, 40, 40, 0.2);
}

/* 伪元素 —— 左下角"NO. 0042"编号 */
.topic_wrap::after {
    content: 'CASE NO. 0042';
    position: absolute;
    bottom: 10px;
    left: 16px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: rgba(200, 40, 40, 0.35);
    pointer-events: none;
    z-index: 0;
}

/* 确保内容在伪元素之上 */
.topic_wrap > * {
    position: relative;
    z-index: 1;
}