/* =============================================
   王国塔防 · 官网中世纪奇幻主题
   ============================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Serif SC', 'Cinzel', 'Cormorant Garamond', serif;
    background-color: #0b0f1f;
    color: #e9d8a6;
    position: relative;
}

/* 全站羊皮纸 / 噪点纹理（叠加在最底层，制造质感） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(120, 53, 15, 0.25), transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(30, 27, 75, 0.5), transparent 60%),
        linear-gradient(180deg, #0b0f1f 0%, #1a1733 50%, #0f0a1e 100%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.08;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 滚动条：金属感 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #14102a; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4a017, #8b6914);
    border-radius: 4px;
    border: 1px solid #3a2e0a;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f0c040, #a67c1a); }

/* =============================================
   字体 / 标题
   ============================================= */
.font-fantasy {
    font-family: 'Cinzel', 'Noto Serif SC', serif;
    letter-spacing: 0.04em;
}

.title-gold {
    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 45%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.2);
}

/* 标题分隔装饰（两侧带剑形分隔） */
.title-ornament {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #d4a017;
}
.title-ornament::before,
.title-ornament::after {
    content: '';
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4a017, transparent);
}

/* =============================================
   通用：金边、徽章、按钮
   ============================================= */
.gold-border {
    border: 1px solid rgba(212, 160, 23, 0.5);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 130, 0.12),
        0 0 20px rgba(212, 160, 23, 0.08);
}

.parchment {
    background:
        linear-gradient(180deg, rgba(252, 234, 187, 0.97), rgba(232, 209, 156, 0.95));
    color: #3a2410;
    border: 1px solid rgba(120, 80, 30, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
}
.parchment::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(120, 80, 30, 0.08), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(120, 80, 30, 0.08), transparent 30%);
    border-radius: inherit;
}

/* 王国按钮：金色压印 */
.btn-royal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2rem;
    font-weight: 700;
    font-family: 'Cinzel', 'Noto Serif SC', serif;
    letter-spacing: 0.06em;
    color: #2a1810;
    background: linear-gradient(180deg, #fde68a 0%, #f0b429 45%, #b45309 100%);
    border: 1px solid #8b5a0a;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        0 6px 0 #5c3a08,
        0 10px 25px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(245, 158, 11, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-royal:hover {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        0 4px 0 #5c3a08,
        0 6px 18px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(245, 158, 11, 0.4);
}
.btn-royal:active {
    transform: translateY(5px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 #5c3a08,
        0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 次要按钮：石质 */
.btn-stone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2rem;
    font-weight: 700;
    font-family: 'Cinzel', 'Noto Serif SC', serif;
    letter-spacing: 0.06em;
    color: #fde68a;
    background: linear-gradient(180deg, #2a2745 0%, #1a1733 100%);
    border: 1px solid rgba(212, 160, 23, 0.5);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 130, 0.15),
        0 6px 0 #0a0820,
        0 10px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-stone:hover {
    transform: translateY(2px);
    color: #fff7d6;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 130, 0.25),
        0 4px 0 #0a0820,
        0 6px 14px rgba(245, 158, 11, 0.2);
}

/* =============================================
   盾牌徽章卡片（核心卖点）
   ============================================= */
.shield-card {
    position: relative;
    padding: 2.5rem 1.75rem 2rem;
    text-align: center;
    background:
        linear-gradient(180deg, #1f1b3d 0%, #14102a 100%);
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 4px 4px 50% 50% / 4px 4px 18% 18%;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 130, 0.15),
        inset 0 0 60px rgba(212, 160, 23, 0.05),
        0 12px 35px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.shield-card::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: inherit;
    background: linear-gradient(180deg, #d4a017, transparent 30%, transparent 70%, #8b6914);
    z-index: -1;
    opacity: 0.6;
}
.shield-card:hover {
    transform: translateY(-6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 130, 0.2),
        inset 0 0 60px rgba(212, 160, 23, 0.1),
        0 18px 45px rgba(212, 160, 23, 0.2);
}

.shield-icon {
    width: 78px; height: 78px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle, #fde68a 0%, #d4a017 60%, #8b6914 100%);
    border: 2px solid #5c3a08;
    border-radius: 50%;
    color: #2a1810;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(245, 158, 11, 0.5);
}

/* =============================================
   画廊金框
   ============================================= */
.gold-frame {
    position: relative;
    padding: 6px;
    background: linear-gradient(135deg, #fde68a, #b45309, #fde68a, #8b6914);
    border-radius: 6px;
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(212, 160, 23, 0.15);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gold-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(245, 158, 11, 0.35);
}
.gold-frame > .frame-inner {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    background: #0b0f1f;
}

/* 四角钉装饰 */
.gold-frame::before,
.gold-frame::after,
.gold-frame .corner-tl,
.gold-frame .corner-tr {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: radial-gradient(circle, #fde68a 0%, #8b6914 70%, #3a2410 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.5);
    z-index: 2;
}
.gold-frame::before { top: 10px; left: 10px; }
.gold-frame::after { top: 10px; right: 10px; }
.gold-frame .corner-tl { bottom: 10px; left: 10px; }
.gold-frame .corner-tr { bottom: 10px; right: 10px; }

/* =============================================
   手机模型
   ============================================= */
.phone-frame {
    position: relative;
    border-radius: 2.2rem;
    border: 10px solid #1a1733;
    background: #000;
    box-shadow:
        0 0 0 2px rgba(212, 160, 23, 0.6),
        0 0 50px rgba(245, 158, 11, 0.35),
        0 25px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

/* =============================================
   城堡剪影 / 山脉背景
   ============================================= */
.hero-skyline {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 200px;
    pointer-events: none;
    opacity: 0.55;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

/* 火把光斑 */
.torch-glow {
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, transparent 65%);
    filter: blur(20px);
    animation: flicker 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes flicker {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* =============================================
   导航
   ============================================= */
.navbar-royal {
    background: linear-gradient(180deg, rgba(11, 15, 31, 0.92) 0%, rgba(11, 15, 31, 0.78) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 160, 23, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.nav-link {
    position: relative;
    color: #cbb682;
    font-family: 'Cinzel', 'Noto Serif SC', serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: color 0.2s ease;
}
.nav-link:hover { color: #fde68a; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -6px;
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #f0b429, transparent);
    transition: width 0.3s ease, left 0.3s ease;
}
.nav-link:hover::after { width: 100%; left: 0; }

/* =============================================
   标签 / pill
   ============================================= */
.banner-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(180deg, #4a1818 0%, #2a0808 100%);
    border: 1px solid rgba(212, 160, 23, 0.6);
    color: #fde68a;
    font-family: 'Cinzel', 'Noto Serif SC', serif;
    letter-spacing: 0.08em;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 130, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(245, 158, 11, 0.15);
}

.tag-crest {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    background: linear-gradient(180deg, rgba(252, 234, 187, 0.1), rgba(120, 80, 30, 0.1));
    border: 1px solid rgba(212, 160, 23, 0.45);
    color: #fde68a;
    font-family: 'Cinzel', 'Noto Serif SC', serif;
    border-radius: 2px;
}

/* =============================================
   动画
   ============================================= */
.hover-scale { transition: transform 0.25s ease; }
.hover-scale:hover { transform: scale(1.03); }

@keyframes ember {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-200px) translateX(40px); opacity: 0; }
}
.ember {
    position: absolute;
    width: 4px; height: 4px;
    background: #fde68a;
    border-radius: 50%;
    box-shadow: 0 0 8px #f59e0b;
    animation: ember 6s ease-out infinite;
}

/* =============================================
   响应式
   ============================================= */
@media (max-width: 768px) {
    .title-ornament::before,
    .title-ornament::after { width: 32px; }
}