/* =========================================
   Pikakko Viewer 样式表
   ========================================= */

/* --- 全局配置变量 (在这里修改配色最方便) --- */
:root {
    /* 背景颜色 */
    --bg-color: #121212;
    --status-bar-bg: rgba(255, 255, 255, 0.05);
    
    /* 文本颜色 */
    --text-color: #666;

    /* 按钮样式 (默认粉色系) */
    --btn-bg-pink: #ffecf0;
    --btn-text-pink: #ff6b81;
    --btn-shadow-pink: #ffc1cc;

    /* 按钮样式 (蓝色系) */
    --btn-bg-blue: #e3f2fd;
    --btn-text-blue: #42a5f5;
    --btn-shadow-blue: #bbdefb;

    /* 布局尺寸 */
    --img-max-height: 80vh; /* 图片最大高度 */
    --nav-width: 20%;       /* 左右点击区域宽度 */
}

/* === 核心布局 === */
body { 
    margin: 0; 
    background: var(--bg-color); 
    /* 最小高度设为屏幕高度 */
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    font-family: sans-serif; 
}

/* 1. 图片容器：占据所有剩余空间 */
#content-wrapper {
    flex: 1; /* 自动拉伸，推到底部 */
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 100%;
    padding: 20px 0;
}

/* 图片样式 */
img.main-img { 
    max-width: 100%; 
    max-height: var(--img-max-height); 
    object-fit: contain; 
    user-select: none; 
    opacity: 0; 
    transition: opacity 0.2s; 
    box-shadow: 0 0 20px rgba(0,0,0,0.3); 
}

img.loaded { 
    opacity: 1; 
}

/* 2. 底部区域容器 */
#footer-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px; 
    /* 渐变背景，防止文字在纯黑背景上突兀 */
    background: linear-gradient(to top, var(--bg-color) 20%, transparent); 
    z-index: 60;
}

/* 左右导航 (隐形点击区) */
.nav { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    width: var(--nav-width); 
    z-index: 50; 
    cursor: pointer; 
}
.nav:hover { background: rgba(255,255,255,0.02); }
.left { left: 0; } 
.right { right: 0; }

/* 状态栏 */
#status-bar {
    color: var(--text-color); 
    font-size: 12px;
    user-select: none;
    margin-bottom: 15px; 
    background: var(--status-bar-bg);
    padding: 4px 12px;
    border-radius: 10px;
}

/* 按钮容器 */
#link-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 可爱按钮通用样式 */
.cute-btn {
    display: inline-block;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
    font-family: "Varela Round", "Comic Sans MS", "YouYuan", sans-serif;
    border: 2px solid transparent;
    
    /* 默认使用粉色变量 */
    background: var(--btn-bg-pink); 
    color: var(--btn-text-pink);
    box-shadow: 0 4px 0 var(--btn-shadow-pink);
}

.cute-btn:hover { 
    transform: translateY(-3px); 
    background: #fff; 
    box-shadow: 0 6px 0 var(--btn-shadow-pink); 
}

.cute-btn:active { 
    transform: translateY(2px); 
    box-shadow: 0 2px 0 var(--btn-shadow-pink); 
}

/* 蓝色变体按钮 */
.btn-blue { 
    background: var(--btn-bg-blue); 
    color: var(--btn-text-blue); 
    box-shadow: 0 4px 0 var(--btn-shadow-blue); 
}

.btn-blue:hover { 
    background: #fff; 
    box-shadow: 0 6px 0 var(--btn-shadow-blue); 
}

/* 工具类 */
.hidden { display: none !important; }