:root {
    /* 【燃烧系漫画调色板】更深、更烈 */
    --bg-sky-dark: #d35400;    /* 深橘红天空 */
    --bg-sky-light: #f39c12;   /* 金黄光辉 */
    --sun-core: #f1c40f;       /* 太阳核心亮黄 */
    --mountain-1: #a04000;     /* 远山焦褐 */
    --mountain-2: #6e2c00;     /* 近山深咖 */
    --forest-silhouette: #341f17; /* 前景森林剪影 */
    --ink-black: #1a0f0a;      /* 纯黑墨水描边 */
    --paper-texture: #fbebd6;  /* 纸张米黄 */
    --accent-fire: #e74c3c;    /* 强调色：火焰红 */
}

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

body {
    width: 100vw; height: 100vh; overflow: hidden;
    background-color: var(--ink-black);
    display: flex; justify-content: center; align-items: center;
    font-family: 'Noto Serif SC', serif;
    /* 全局应用强烈的手绘颤动滤镜 */
    filter: url(#intense-ink-filter);
}

/* =========================================
   场景层：极繁主义的漫画世界
   ========================================= */
.comic-world {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--bg-sky-dark), var(--bg-sky-light));
    border: 12px solid var(--ink-black); /* 超厚漫画边框 */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

/* 纹理层：半调网点 + 纸张噪点 */
.texture-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none; opacity: 0.3;
    /* 复杂的复合纹理 */
    background: 
        radial-gradient(var(--ink-black) 15%, transparent 16%) 0 0,
        radial-gradient(var(--ink-black) 15%, transparent 16%) 4px 4px;
    background-size: 8px 8px;
    mix-blend-mode: multiply;
}

/* 1. 背景：巨大的太阳与上帝之光 */
.sun-god {
    position: absolute; bottom: 30%; left: 50%;
    width: 60vw; height: 60vw;
    transform: translate(-50%, 50%);
    background: var(--sun-core);
    border-radius: 50%;
    border: 6px solid var(--ink-black);
    box-shadow: 0 0 100px var(--sun-core);
    z-index: 1;
}
/* 上帝之光：旋转的锥形渐变 */
.god-rays {
    position: absolute; top: 50%; left: 50%;
    width: 200vmax; height: 200vmax;
    background: conic-gradient(from 0deg, transparent 0%, var(--bg-sky-light) 10%, transparent 20%, var(--bg-sky-light) 30%, transparent 40%, var(--bg-sky-light) 50%, transparent 60%, var(--bg-sky-light) 70%, transparent 80%, var(--bg-sky-light) 90%, transparent 100%);
    transform: translate(-50%, -50%);
    opacity: 0.4;
    z-index: 2;
    mix-blend-mode: overlay;
    animation: rotate-slow 60s linear infinite;
}

/* 2. 中景：缓慢漂浮的云层色块 */
.clouds {
    position: absolute; width: 100%; height: 100%; z-index: 3;
}
.cloud-item {
    position: absolute; background: var(--paper-texture);
    border: 4px solid var(--ink-black); border-radius: 50px; opacity: 0.8;
    box-shadow: 8px 8px 0 var(--ink-black);
}
.c1 { top: 10%; left: -10%; width: 300px; height: 100px; animation: float-right 40s linear infinite; }
.c2 { top: 25%; right: -20%; width: 400px; height: 120px; animation: float-left 50s linear infinite; }
.c3 { top: 5%; right: 30%; width: 200px; height: 80px; animation: float-right 60s linear infinite reverse; }

/* 3. 远景：层叠山峦 */
.mountains-layer {
    position: absolute; bottom: -20px; width: 100%; height: 60%; z-index: 4;
}
.mnt { position: absolute; bottom: 0; width: 100%; border-top: 5px solid var(--ink-black); }
.m-back { height: 80%; background: var(--mountain-1); clip-path: polygon(0 100%, 0 40%, 30% 70%, 60% 30%, 100% 60%, 100% 100%); }
.m-mid { height: 60%; background: var(--mountain-2); clip-path: polygon(0 100%, 0 70%, 40% 40%, 70% 80%, 100% 50%, 100% 100%); }

/* 4. 前景：森林剪影与飞鸟 */
.foreground-forest {
    position: absolute; bottom: -50px; width: 110%; left: -5%;
    height: 40%; background: var(--forest-silhouette);
    z-index: 5;
    clip-path: polygon(0 100%, 5% 40%, 10% 60%, 15% 30%, 20% 70%, 25% 20%, 30% 60%, 35% 40%, 40% 80%, 45% 30%, 50% 70%, 55% 20%, 60% 60%, 65% 40%, 70% 80%, 75% 30%, 80% 70%, 85% 20%, 90% 60%, 95% 40%, 100% 80%, 100% 100%);
    border-top: 6px solid var(--ink-black);
}
.birds {
    position: absolute; top: 30%; left: 20%; z-index: 6;
    font-size: 2rem; color: var(--ink-black);
    animation: float-right 30s linear infinite;
}

/* =========================================
   UI层：藏宝图风格卡片 - 完全适配无滚动
   ========================================= */
.wanted-poster {
    position: relative; z-index: 20;
    background: var(--paper-texture);
    /* 更紧凑的内边距，确保内容适配 */
    padding: clamp(1rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
    text-align: center;
    border: 8px solid var(--ink-black);
    /* 更有张力的旋转和巨大的硬投影 */
    transform: rotate(-3deg) scale(1.05);
    box-shadow: 20px 20px 0 var(--ink-black);
    /* 响应式宽度和高度：确保完全适配视口 */
    width: clamp(300px, 85vw, 500px);
    max-height: 85vh;
    /* 移除滚动条，使用 flex 布局优化空间分配 */
    overflow: visible; /* 改为 visible 让图钉可见 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 卡片内部叠加一层旧纸纹理 */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px);
}

/* 装饰性图钉 - 响应式，确保可见 */
.pin {
    position: absolute; 
    width: clamp(20px, 4vw, 30px); 
    height: clamp(20px, 4vw, 30px);
    background: var(--accent-fire);
    border: 4px solid var(--ink-black);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--ink-black);
    z-index: 25; /* 确保在最上层 */
}
.pin-tl { 
    top: -12px; left: -12px; 
}
.pin-tr { 
    top: -12px; right: -12px; 
}

h1 {
    font-family: 'Bangers', cursive;
    /* 更紧凑的响应式字体大小 */
    font-size: clamp(2rem, 6vw, 3.5rem); 
    letter-spacing: clamp(1px, 0.3vw, 2px);
    color: var(--sun-core);
    /* 三重描边增加厚重感 */
    text-shadow: 
        4px 4px 0 var(--ink-black),
        -2px -2px 0 var(--accent-fire),
        2px -2px 0 var(--ink-black);
    margin-bottom: clamp(0.3rem, 1vw, 0.8rem);
    transform: skew(-5deg);
}

.subtitle {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(0.8rem, 2.5vw, 1.2rem); 
    color: var(--ink-black);
    margin-bottom: clamp(1rem, 2.5vw, 2rem);
    text-transform: uppercase;
}

/* 漫画行动按钮 - 更紧凑无滚动 */
.action-btn {
    display: block; width: 100%;
    padding: clamp(0.6rem, 1.5vw, 1rem); 
    margin-bottom: clamp(0.6rem, 1.2vw, 1rem);
    text-decoration: none;
    font-family: 'Bangers', cursive;
    font-size: clamp(1rem, 2.8vw, 1.6rem); 
    color: var(--ink-black);
    background: var(--sun-core);
    border: 5px solid var(--ink-black);
    box-shadow: 10px 10px 0 var(--ink-black);
    transition: all 0.1s ease;
    text-transform: uppercase;
    position: relative;
}
.action-btn::after {
    content: '>'; position: absolute; right: 20px;
    opacity: 0; transition: all 0.1s;
}

.action-btn:hover {
    transform: translate(5px, 5px);
    box-shadow: 5px 5px 0 var(--ink-black);
    background: var(--accent-fire); color: var(--sun-core);
}
.action-btn:hover::after { opacity: 1; right: 10px; }

.footer-links {
    margin-top: clamp(1rem, 2vw, 2rem); 
    display: flex; justify-content: center; 
    gap: clamp(10px, 2vw, 20px);
}
.footer-icon {
    color: var(--ink-black); 
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    transition: 0.3s; filter: drop-shadow(3px 3px 0 var(--ink-black));
}
.footer-icon:hover { color: var(--accent-fire); transform: scale(1.2) rotate(10deg); }

/* 缓慢的背景动画 */
@keyframes rotate-slow { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes float-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(100vw); } }
@keyframes float-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100vw); } }

/* =========================================
   新增：底部版权栏 (Comic Footer) - 紧凑无滚动
   ========================================= */
.comic-footer {
    margin-top: clamp(0.8rem, 1.5vw, 1.2rem);
    padding-top: clamp(0.8rem, 1.2vw, 1rem);
    /* 用虚线分割，模拟报纸排版 */
    border-top: 4px dashed var(--ink-black);
    font-size: clamp(0.5rem, 1.2vw, 0.65rem);
    font-weight: bold;
    color: var(--ink-black);
    line-height: 1.6;
    text-align: center;
}

/* 链接样式：默认黑色，悬停变红 */
.comic-footer a {
    color: var(--ink-black);
    text-decoration: none;
    margin: 0 clamp(1px, 0.5vw, 3px);
    position: relative;
    transition: all 0.2s;
}

.comic-footer a:hover {
    color: var(--accent-fire);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* 又拍云 Logo 处理：让它变成黑白墨水风 - 紧凑版 */
.upyun-logo {
    width: clamp(16px, 3vw, 24px);
    height: auto;
    vertical-align: middle;
    /* 关键：黑白滤镜+高对比度，模拟印刷质感 */
    filter: grayscale(100%) contrast(200%);
    transition: 0.3s;
}

.comic-footer a:hover .upyun-logo {
    /* 悬停时恢复一点颜色或动效 */
    transform: scale(1.2) rotate(-10deg);
    filter: none;
}

/* 移动设备优化 - 完全无滚动 */
@media (max-width: 768px) {
    body {
        overflow: hidden;
        height: 100vh;
        padding: 0;
    }
    
    .wanted-poster {
        transform: rotate(-1deg) scale(0.95);
        box-shadow: 8px 8px 0 var(--ink-black);
        margin: 0;
        width: 95vw;
        max-height: 90vh;
        padding: clamp(0.8rem, 2vw, 1.5rem) clamp(0.8rem, 1.5vw, 1.2rem);
    }
    
    .comic-world {
        border: 4px solid var(--ink-black);
    }
    
    .comic-footer {
        margin-top: clamp(0.5rem, 1vw, 0.8rem);
        padding-top: clamp(0.5rem, 1vw, 0.8rem);
    }
}