/* ============================================
   封神与哪吒 - 全局样式
   仙侠水墨国风主题
   ============================================ */

/* ---------- Google Fonts 引入 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=ZCOOL+XiaoWei&display=swap');

/* ---------- CSS 变量（主题色） ---------- */
:root {
    /* 基础色 */
    --color-bg:          #f5efe0;          /* 暖米色底 */
    --color-bg-dark:     #e8e0cc;          /* 深米色（纸纹叠层） */
    --color-ink:         #2c2c2c;          /* 墨色文字 */
    --color-ink-light:   #5a5a5a;          /* 浅墨色（次要文字） */
    --color-gold:        #d4a853;          /* 金色点缀 */
    --color-gold-light:  #e8c97a;          /* 浅金色 */
    --color-gold-dark:   #b08a3a;          /* 深金色 */
    --color-purple:      #9b8ec4;          /* 淡紫仙气 */
    --color-purple-dark: #7a6ba3;          /* 深紫 */
    --color-red:         #c03c3c;          /* 朱红色（主按钮） */
    --color-red-dark:    #a03030;          /* 深朱红 */
    --color-red-glow:    rgba(192, 60, 60, 0.4);  /* 朱红辉光 */

    /* 功能色 */
    --color-success:     #5a9e6f;
    --color-warning:     #d4a853;
    --color-info:        #6a9fb5;

    /* 文字 */
    --font-body:         'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-title:        'ZCOOL XiaoWei', 'Noto Sans SC', serif;

    /* 圆角 */
    --radius-sm:         4px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-pill:       999px;

    /* 阴影 */
    --shadow-ink:        0 2px 8px rgba(44, 44, 44, 0.15);
    --shadow-gold:       0 2px 12px rgba(212, 168, 83, 0.3);
    --shadow-ink-heavy:   0 4px 20px rgba(44, 44, 44, 0.25);

    /* 过渡 */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* 安全区域 */
    --safe-bottom:       env(safe-area-inset-bottom, 0px);
}

/* ---------- 基础重置 ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- HTML & Body ---------- */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-ink);
    background-color: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    /* 纸张纹理叠加 */
    background-image:
        /* 细微噪点纹理 */
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0,
            rgba(44, 44, 44, 0.01) 1px,
            transparent 2px
        ),
        /* 纤维纹理 */
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(232, 224, 204, 0.3) 50%,
            transparent 100%
        );
    background-attachment: fixed;
}

/* ---------- 通用排版 ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 400;
    line-height: 1.3;
}

a {
    color: var(--color-gold-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-gold);
}

/* ---------- 容器（手机竖屏居中） ---------- */
.app-container {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-height: 667px;
    margin: 0 auto;
    background-color: var(--color-bg);
    overflow: hidden;
    box-shadow: var(--shadow-ink-heavy);
}

/* ---------- 通用按钮基础 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-normal),
        background-color var(--transition-normal);
    position: relative;
    overflow: hidden;
}

/* 按压反馈 */
.btn:active {
    transform: scale(0.96);
}

/* ---------- 通用图标占位符 ---------- */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(44, 44, 44, 0.15);
    border-radius: 2px;
}

/* ---------- 工具类 ---------- */
.text-gold     { color: var(--color-gold); }
.text-ink-light { color: var(--color-ink-light); }
.text-purple   { color: var(--color-purple); }
.text-center   { text-align: center; }
.text-center-h { text-align: center; }

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 入场动画 ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 数字闪光动画 */
@keyframes shimmer {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
        text-shadow: 0 0 6px var(--color-gold-light);
    }
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 375px) {
    html {
        font-size: 14px;
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 18px;
    }
}