@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

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

:root {
    --bg-dark: #0a0a0a;
    --bg-ink: #121212;
    --bg-card: rgba(20, 20, 20, 0.7);
    --blood: #c8102e;
    --blood-dark: #8b0000;
    --gold: #d4af37;
    --gold-light: #f0d060;
    --text-primary: #f5f0e6;
    --text-secondary: #b8a88a;
    --border: rgba(212, 175, 55, 0.2);
    --border-light: rgba(212, 175, 55, 0.4);
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Serif SC', serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    position: relative;
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(200, 16, 46, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(18, 18, 18, 1) 0%, #050505 100%);
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(212, 175, 55, 0.015) 2px,
            rgba(212, 175, 55, 0.015) 4px
        );
    pointer-events: none;
    z-index: 0;
}

.sakura {
    position: fixed;
    top: -10%;
    width: 12px;
    height: 12px;
    background: radial-gradient(ellipse at center, #f8b4c4 0%, #e89cb0 40%, transparent 70%);
    border-radius: 50% 0 50% 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: sakura-fall linear infinite;
}

.sakura:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; transform: scale(1); }
.sakura:nth-child(2) { left: 25%; animation-duration: 15s; animation-delay: 3s; transform: scale(0.8); }
.sakura:nth-child(3) { left: 40%; animation-duration: 10s; animation-delay: 1s; transform: scale(1.2); }
.sakura:nth-child(4) { left: 55%; animation-duration: 14s; animation-delay: 5s; transform: scale(0.9); }
.sakura:nth-child(5) { left: 70%; animation-duration: 11s; animation-delay: 2s; transform: scale(1.1); }
.sakura:nth-child(6) { left: 85%; animation-duration: 16s; animation-delay: 4s; transform: scale(0.7); }
.sakura:nth-child(7) { left: 95%; animation-duration: 13s; animation-delay: 6s; transform: scale(1); }
.sakura:nth-child(8) { left: 3%;  animation-duration: 17s; animation-delay: 7s; transform: scale(0.85); }

@keyframes sakura-fall {
    0% {
        top: -10%;
        opacity: 0;
        transform: translateX(0) rotate(0deg) scale(var(--s, 1));
    }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% {
        top: 110%;
        opacity: 0;
        transform: translateX(100px) rotate(540deg) scale(var(--s, 1));
    }
}

.container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hero {
    text-align: center;
    margin-bottom: 60px;
    animation: fade-in-up 1s ease-out;
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.logo-mark {
    width: 100px;
    height: 100px;
    margin: 0 auto 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--blood);
    transform: rotate(45deg);
    border-radius: 4px;
    animation: pulse-border 3s ease-in-out infinite;
}

.logo-mark::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
    border-radius: 2px;
    opacity: 0.6;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 20px rgba(200, 16, 46, 0.3), inset 0 0 20px rgba(200, 16, 46, 0.1); }
    50%      { box-shadow: 0 0 40px rgba(200, 16, 46, 0.6), inset 0 0 30px rgba(200, 16, 46, 0.2); }
}

.kanji {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 52px;
    color: var(--blood);
    text-shadow: 0 0 20px rgba(200, 16, 46, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
    line-height: 1;
    animation: kanji-glow 3s ease-in-out infinite;
}

@keyframes kanji-glow {
    0%, 100% { text-shadow: 0 0 20px rgba(200, 16, 46, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); }
    50%      { text-shadow: 0 0 35px rgba(200, 16, 46, 0.9), 0 0 60px rgba(200, 16, 46, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); }
}

.title {
    font-family: 'Noto Serif SC', serif;
    font-weight: 900;
    font-size: clamp(40px, 7vw, 68px);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.title-main {
    color: var(--text-primary);
    position: relative;
}

.title-main::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.title-accent {
    font-family: 'Ma Shan Zheng', cursive;
    color: var(--blood);
    font-weight: 400;
    text-shadow: 0 0 30px rgba(200, 16, 46, 0.5), 0 4px 8px rgba(0, 0, 0, 0.6);
    padding: 0 8px;
    position: relative;
}

.title-accent::before,
.title-accent::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0.6;
}

.title-accent::before { right: 100%; }
.title-accent::after { left: 100%; background: linear-gradient(90deg, transparent, var(--gold)); }

.subtitle {
    font-size: clamp(16px, 2.5vw, 20px);
    color: var(--text-secondary);
    letter-spacing: 0.3em;
    margin-bottom: 28px;
    font-weight: 400;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.divider::before,
.divider::after {
    content: '';
    width: 80px;
    max-width: 15vw;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}

.crest {
    font-size: 22px;
    color: var(--gold);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
    animation: crest-float 4s ease-in-out infinite;
}

@keyframes crest-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    margin-bottom: 48px;
    flex: 1;
}

.card {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 40px 32px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    animation: card-in 0.8s ease-out forwards;
}

.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.4s; }

@keyframes card-in {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blood), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    pointer-events: none;
    transition: border-color 0.4s ease;
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--border-light);
    background: rgba(25, 25, 25, 0.85);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(212, 175, 55, 0.1),
        inset 0 0 40px rgba(212, 175, 55, 0.03);
}

.card:hover::before { transform: scaleX(1); }
.card:hover::after { border-color: rgba(212, 175, 55, 0.15); }

.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--blood) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    filter: blur(40px);
}

.card:hover .card-glow {
    opacity: 0.08;
}

.card-cards .card-glow {
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
}

.card-inner {
    position: relative;
    z-index: 1;
}

.card-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    transition: all 0.4s ease;
}

.card-points .card-icon {
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.2), rgba(200, 16, 46, 0.05));
    color: var(--blood);
    border: 1px solid rgba(200, 16, 46, 0.3);
}

.card-cards .card-icon {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.card-icon svg {
    width: 32px;
    height: 32px;
}

.card:hover .card-icon {
    transform: scale(1.08) rotate(-3deg);
}

.card-points:hover .card-icon {
    box-shadow: 0 0 30px rgba(200, 16, 46, 0.4);
    border-color: var(--blood);
}

.card-cards:hover .card-icon {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    border-color: var(--gold);
}

.card-guide .card-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.card-guide:hover .card-icon {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.45);
    border-color: #818cf8;
}

.card-guide:hover .card-arrow {
    background: #6366f1;
    border-color: #6366f1;
}

.card-guide .card-title { color: #e0e7ff; }
.card-guide .card-glow { background: radial-gradient(circle, #6366f1 0%, transparent 70%); }

/* ===== 下载地图：KK 主题（橙白）—— 升级：首卡大横幅 ===== */
.card-download {
    background: linear-gradient(160deg, #2a1704 0%, #120a04 100%);
    border-color: rgba(255, 146, 30, 0.35);
}
.card-download .card-icon {
    background: linear-gradient(135deg, rgba(255, 146, 30, 0.22), rgba(255, 90, 30, 0.08));
    color: #ffb466;
    border: 1px solid rgba(255, 146, 30, 0.35);
    box-shadow: inset 0 0 24px rgba(255, 146, 30, 0.15), 0 0 24px rgba(255, 146, 30, 0.08);
}
.card-download:hover .card-icon {
    background: linear-gradient(135deg, rgba(255, 146, 30, 0.38), rgba(255, 90, 30, 0.15));
    color: #ffe1b8;
    box-shadow: inset 0 0 30px rgba(255, 146, 30, 0.35), 0 0 35px rgba(255, 146, 30, 0.35);
}
.card-download .card-title { color: #ffd9a8; }
.card-download .card-glow { background: radial-gradient(circle, #ff921e 0%, transparent 70%); }
.card-download:hover .card-arrow {
    background: #ff921e;
    border-color: #ff921e;
}

/* 升级：首卡（大横幅）下载卡 - card-hero */
.cards {
    grid-template-columns: 1fr 1fr;
}
.cards > .card-hero {
    grid-column: 1 / -1;  /* 占满整行，宽度最大 */
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(255,146,30,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(212,175,55,0.18) 0%, transparent 50%),
        linear-gradient(155deg, #2a1504 0%, #150804 50%, #2a1a04 100%);
    border: 1px solid rgba(255, 170, 60, 0.45);
    box-shadow:
        0 18px 60px -18px rgba(255, 140, 30, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.cards > .card-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 95%, rgba(255,146,30,0.12) 100%),
        repeating-linear-gradient(45deg, rgba(255,146,30,0.03) 0 10px, transparent 10px 20px);
    pointer-events: none;
    border-radius: inherit;
}
.cards > .card-hero .card-inner {
    position: relative;
    padding: 38px 40px 34px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
}
.card-icon-hero {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    position: relative;
}
.card-icon-hero svg { width: 44px; height: 44px; }
.hero-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 12px rgba(239,68,68,0.45);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.cards > .card-hero .card-title {
    font-size: 32px;
    margin-bottom: 8px;
    color: #ffe8c8;
    text-shadow: 0 2px 18px rgba(255, 140, 30, 0.25);
}
.cards > .card-hero .card-desc {
    margin-bottom: 14px;
    font-size: 15.5px;
    color: #ffe6c0;
    opacity: 0.9;
}
.kk-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.kk-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Noto Serif SC', monospace;
    letter-spacing: 0.03em;
}
.kk-meta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.kk-meta-version {
    background: linear-gradient(135deg, rgba(255, 146, 30, 0.28), rgba(255, 90, 30, 0.14));
    border: 1px solid rgba(255, 160, 70, 0.55);
    color: #ffe3b8;
    box-shadow: inset 0 0 16px rgba(255, 146, 30, 0.15);
    font-weight: 600;
}
.kk-meta-version #kk-version-text {
    font-size: 14px;
}
.kk-meta-date {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #ffe9a0;
}
.cards > .card-hero .card-arrow-hero {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #ff921e, #ff5a1e);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 22px rgba(255, 90, 30, 0.4);
    color: #fff;
}
.cards > .card-hero .card-arrow-hero svg { color: #fff; width: 24px; height: 24px; }
.cards > .card-hero:hover .card-arrow-hero {
    transform: translateX(6px) rotate(-4deg);
    box-shadow: 0 12px 30px rgba(255, 90, 30, 0.55);
}
.card-glow-hero {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 146, 30, 0.45) 0%, transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(212, 175, 55, 0.35) 0%, transparent 55%) !important;
}

/* 备注：未及时更新时请加官方Q群下载 */
.kk-notice {
    margin-top: 10px;
    font-size: 12.5px;
    color: #ffce8a;
    opacity: 0.85;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kk-notice::before {
    content: '⚠';
    font-size: 13px;
    opacity: 0.9;
}
#kk-download-guide .kk-notice {
    font-size: 12.5px;
    color: #ffe1b8;
    opacity: 0.9;
    margin-top: 6px;
}

/* 指南页横幅也升级：版本号 + 更新日期 */
#kk-download-guide .kk-guide-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
#kk-guide-ver {
    padding: 3px 10px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    letter-spacing: 0.05em;
}
#kk-guide-date {
    padding: 3px 10px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    border-radius: 999px;
    background: rgba(255, 220, 120, 0.16);
    border: 1px solid rgba(255, 220, 120, 0.35);
    color: #fff4c8;
}
#kk-download-guide .kk-btn {
    position: relative;
}

/* 兼容：保留旧版小卡用的 .kk-version（目前已无 DOM，但防止破坏样式） */
.kk-version {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Noto Serif SC', monospace;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 146, 30, 0.22), rgba(255, 90, 30, 0.1));
    border: 1px solid rgba(255, 146, 30, 0.45);
    color: #ffd29c;
    letter-spacing: 0.05em;
}
.card-download.card-loading .kk-version,
.card-download.card-loading .kk-meta-version {
    background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
    border-color: rgba(212,175,55,0.4);
    color: #ffe39a;
}
.card-download.card-broken .kk-version,
.card-download.card-broken .kk-meta-version {
    background: linear-gradient(135deg, rgba(180,180,180,0.18), rgba(120,120,120,0.04));
    border-color: rgba(180,180,180,0.35);
    color: #d8d8d8;
}
.card-download.card-broken {
    cursor: not-allowed;
    opacity: 0.75;
    filter: grayscale(0.35);
    pointer-events: none;
}
.card-download.card-loading .card-desc::after {
    content: '…';
    animation: dots 1.2s steps(3, end) infinite;
}
@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '·'; }
    60% { content: '··'; }
    80%, 100% { content: '···'; }
}

/* 手机端：hero 卡改为竖排 */
@media (max-width: 780px) {
    .cards { grid-template-columns: 1fr; }
    .cards > .card-hero .card-inner {
        grid-template-columns: auto 1fr;
        padding: 28px 22px;
        gap: 16px;
    }
    .card-icon-hero { width: 64px; height: 64px; border-radius: 18px; }
    .card-icon-hero svg { width: 34px; height: 34px; }
    .cards > .card-hero .card-title { font-size: 24px; }
    .cards > .card-hero .card-arrow-hero {
        grid-column: 1 / -1;
        justify-self: end;
        width: 48px;
        height: 48px;
    }
    .cards > .card-hero .card-arrow-hero svg { width: 20px; height: 20px; }
}

.card-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-points .card-title { color: var(--text-primary); }
.card-cards .card-title { color: var(--gold-light); }

.card-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px;
    letter-spacing: 0.02em;
}

.card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.card:hover .card-arrow {
    background: var(--blood);
    border-color: var(--blood);
    transform: translateX(4px);
}

.card-cards:hover .card-arrow {
    background: var(--gold);
    border-color: var(--gold);
}

.card:hover .card-arrow svg {
    color: #0a0a0a;
    stroke-width: 2.5;
}

.community {
    margin-bottom: 60px;
    animation: fade-in-up 1s ease-out 0.6s both;
}

.qq-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(18, 133, 255, 0.15), rgba(18, 133, 255, 0.03));
    border: 1px solid rgba(18, 133, 255, 0.3);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.qq-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(18, 133, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.qq-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(18, 133, 255, 0.6);
    box-shadow:
        0 16px 40px rgba(18, 133, 255, 0.15),
        0 0 0 1px rgba(18, 133, 255, 0.2);
}

.qq-btn:hover::before { opacity: 1; }

.qq-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1285ff, #0066d4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 20px rgba(18, 133, 255, 0.35);
    transition: transform 0.4s ease;
}

.qq-btn:hover .qq-icon {
    transform: scale(1.05) rotate(-5deg);
}

.qq-icon svg {
    width: 32px;
    height: 32px;
    color: #ffffff;
}

.qq-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.qq-label {
    font-size: 18px;
    font-weight: 600;
    color: #e0f0ff;
    letter-spacing: 0.05em;
}

.qq-group {
    font-size: 14px;
    color: #7fbfff;
    letter-spacing: 0.08em;
}

.qq-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(18, 133, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.qq-arrow svg {
    width: 22px;
    height: 22px;
    color: #7fbfff;
    transition: transform 0.3s ease;
}

.qq-btn:hover .qq-arrow {
    background: #1285ff;
    transform: translateX(4px);
}

.qq-btn:hover .qq-arrow svg {
    color: #ffffff;
    transform: translateX(2px);
}

.footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    animation: fade-in-up 1s ease-out 0.8s both;
}

.footer p {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.7;
    letter-spacing: 0.08em;
}

@media (max-width: 640px) {
    .container {
        padding: 40px 20px 30px;
    }

    .hero {
        margin-bottom: 40px;
    }

    .logo-mark {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .kanji {
        font-size: 40px;
    }

    .title {
        flex-direction: column;
        gap: 4px;
    }

    .title-accent::before,
    .title-accent::after {
        display: none;
    }

    .subtitle {
        letter-spacing: 0.2em;
    }

    .cards {
        gap: 20px;
        margin-bottom: 36px;
    }

    .card {
        padding: 32px 24px;
    }

    .qq-btn {
        padding: 20px;
        gap: 14px;
    }

    .qq-icon {
        width: 48px;
        height: 48px;
    }

    .qq-icon svg {
        width: 28px;
        height: 28px;
    }

    .qq-label {
        font-size: 16px;
    }

    .qq-arrow {
        width: 38px;
        height: 38px;
    }
}

/* ========================
   游戏手册 Guide Page
   ======================== */

.guide-page body { background: #0a0a0a; }

.guide-page .container { padding: 32px 24px 60px; }

.guide-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(14px);
    margin: -32px -24px 32px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.back-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.back-home:hover {
    color: var(--gold);
    border-color: var(--gold);
    transform: translateX(-2px);
}

.back-home svg {
    width: 16px;
    height: 16px;
}

.guide-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.toc-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--gold);
    opacity: 0.8;
    margin-right: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}

.toc-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}

.toc-link:hover {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
}

.guide-hero {
    text-align: center;
    padding: 40px 20px 50px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 60px;
    position: relative;
}

.guide-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blood), var(--gold), var(--blood), transparent);
}

.guide-tag {
    display: inline-block;
    padding: 6px 18px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.2), rgba(200, 16, 46, 0.05));
    color: #ff6b81;
    border: 1px solid rgba(200, 16, 46, 0.4);
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 0.3em;
    margin-bottom: 24px;
    font-weight: 600;
}

.guide-title {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(32px, 6vw, 54px);
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    line-height: 1.2;
}

.guide-title span {
    font-family: 'Ma Shan Zheng', cursive;
    font-weight: 400;
    color: var(--gold);
    margin-left: 8px;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
}

.guide-meta {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.meta-dot { opacity: 0.4; }

.alert-box {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.1), rgba(200, 16, 46, 0.02));
    border: 1px solid rgba(200, 16, 46, 0.4);
    border-radius: 10px;
    text-align: left;
}

.alert-icon {
    font-size: 24px;
    color: #ff5c6a;
    line-height: 1.4;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(200, 16, 46, 0.5));
}

.alert-content p {
    font-size: 14px;
    color: #f0d6d9;
    line-height: 1.85;
    letter-spacing: 0.02em;
}

.alert-content p + p { margin-top: 6px; }

.alert-content strong {
    color: var(--blood);
    background: rgba(200, 16, 46, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.guide-content {
    max-width: 960px;
    margin: 0 auto;
}

.guide-section {
    margin-bottom: 72px;
    scroll-margin-top: 100px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.section-num {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 48px;
    color: var(--blood);
    line-height: 1;
    opacity: 0.85;
    text-shadow: 0 0 20px rgba(200, 16, 46, 0.4);
}

.section-title {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold-light);
}

.section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.info-grid {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 0;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
}

.info-row {
    display: flex;
    padding: 14px 24px;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.1);
    font-size: 14.5px;
    line-height: 1.7;
}

.info-row:last-child { border-bottom: none; }

.info-key {
    flex-shrink: 0;
    width: 110px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.info-val {
    color: var(--text-primary);
    flex: 1;
}

.inline-link {
    color: #6cb4ff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(108, 180, 255, 0.4);
    transition: all 0.2s ease;
}

.inline-link:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.info-card {
    display: block;
    padding: 22px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.8));
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.35s ease;
}

.info-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.info-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.info-card-icon {
    font-size: 22px;
}

.info-card-head strong {
    font-size: 17px;
    color: var(--gold);
    letter-spacing: 0.05em;
}

.info-card p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.85;
}

.info-card p code {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}

.key-table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.key-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.08);
    transition: background 0.25s ease;
}

.key-row:last-child { border-bottom: none; }

.key-row:hover { background: rgba(212, 175, 55, 0.03); }

.key-row kbd {
    flex-shrink: 0;
    min-width: 110px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #2a2a2a, #181818);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--gold-light);
    font-family: 'Noto Serif SC', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.key-desc {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.8;
    padding-top: 4px;
}

.key-desc strong { color: var(--blood); }

.num-list {
    list-style: none;
    padding: 0;
    counter-reset: list-counter;
}

.num-list > li {
    counter-increment: list-counter;
    padding: 18px 20px 18px 64px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
    font-size: 14.5px;
    color: var(--text-primary);
    line-height: 1.9;
    margin-bottom: 14px;
    backdrop-filter: blur(10px);
}

.num-list > li::before {
    content: counter(list-counter);
    position: absolute;
    left: 20px;
    top: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blood), #7a0819);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    font-family: 'Noto Serif SC', serif;
    box-shadow: 0 4px 10px rgba(200, 16, 46, 0.35);
}

.num-list > li strong { color: var(--gold); }

.sub-block {
    margin-bottom: 32px;
}

.sub-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-left: 14px;
    border-left: 3px solid var(--blood);
}

.sub-block p {
    font-size: 14.5px;
    color: #e2d8c4;
    line-height: 1.9;
    margin-bottom: 12px;
}

.highlight-yellow {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-light);
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sub-list {
    font-size: 13.5px;
    color: var(--text-primary);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border-left: 2px solid rgba(212, 175, 55, 0.4);
    letter-spacing: 0.02em;
}

.sub-list strong { color: var(--gold); }

.boss-list {
    padding: 20px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.boss-tier {
    font-size: 14px;
    font-weight: 700;
    color: var(--blood);
    margin-bottom: 6px;
    margin-top: 8px;
    letter-spacing: 0.05em;
}

.boss-tier:first-child { margin-top: 0; }

.boss-list p {
    margin: 0 0 6px 14px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.8;
}

.rel-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.rel-card-item {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    font-size: 13.5px;
    color: #c7d2fe;
}

.deck-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deck-item {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.25s ease;
}

.deck-item:hover { border-color: var(--border-light); }

.deck-no {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blood), #7a0819);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.deck-body { flex: 1; min-width: 0; }

.deck-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.deck-body p {
    font-size: 13.5px;
    color: #e2d8c4;
    line-height: 1.85;
    margin: 0;
}

.deck-body strong {
    color: #ff9eb0;
    background: rgba(200, 16, 46, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.doro-block {
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.02));
    border: 1px dashed rgba(168, 85, 247, 0.45);
    border-radius: 10px;
}

.doro-block .sub-title {
    color: #e9d5ff;
    border-left-color: #a855f7;
}

.doro-block strong {
    color: #f0abfc;
    background: rgba(168, 85, 247, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
}

.build-basic {
    padding: 18px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 18px;
}

.build-basic p {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.9;
    margin-bottom: 8px;
    border-left: 3px solid rgba(212, 175, 55, 0.4);
}

.build-basic p:last-child { margin-bottom: 0; }

.build-basic p strong { color: var(--gold); }

.warn-box {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.1), rgba(200, 16, 46, 0.02));
    border-left: 3px solid var(--blood);
    border-radius: 8px;
    font-size: 13.5px;
    color: #f0d6d9;
    line-height: 1.9;
    margin-top: 16px;
}

.warn-box strong { color: #ff6b81; }

.build-card {
    padding: 24px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.build-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.build-tag {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.3), rgba(200, 16, 46, 0.1));
    color: #ff9eb0;
    border: 1px solid rgba(200, 16, 46, 0.5);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 14px;
}

.build-tag-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.08));
    color: var(--gold-light);
    border-color: rgba(212, 175, 55, 0.5);
}

.build-tag-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.05));
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.5);
}

.build-attack::before { background: linear-gradient(180deg, var(--blood), #7a0819); }
.build-skill::before { background: linear-gradient(180deg, var(--gold), #8b701f); }
.build-support::before { background: linear-gradient(180deg, #10b981, #065f46); }
.build-support2::before { background: linear-gradient(180deg, #06b6d4, #0e7490); }

.build-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    margin-bottom: 14px;
    line-height: 1.5;
}

.build-note {
    padding: 12px 16px;
    background: rgba(212, 175, 55, 0.06);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: var(--gold-light);
    line-height: 1.8;
}

.build-note strong { color: #fff; }

.build-card > p {
    font-size: 14px;
    color: #e2d8c4;
    line-height: 1.9;
    margin-bottom: 16px;
}

.build-card > p strong {
    color: #ff6b81;
    background: rgba(200, 16, 46, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.scroll-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}

.build-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.build-list li {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 13.5px;
    color: #e2d8c4;
    line-height: 1.9;
    border-left: 2px solid rgba(99, 102, 241, 0.4);
}

.build-list li strong { color: #a5b4fc; }

.item-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.item-cat {
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-primary);
    transition: border-color 0.25s ease;
}

.item-cat:hover { border-color: var(--border-light); }

.item-cat-no {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #8b701f);
    color: #0a0a0a;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    margin-right: 10px;
    vertical-align: middle;
}

.item-cat strong {
    color: var(--gold-light);
    letter-spacing: 0.02em;
}

.item-desc { color: #c9bfa8; font-size: 13.5px; }

.item-cat-key {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
    border-color: rgba(16, 185, 129, 0.3);
}

.item-cat-key strong { color: #6ee7b7; }

.cook-order {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(251, 146, 60, 0.02));
    border: 1px dashed rgba(251, 146, 60, 0.4);
    border-radius: 8px;
    font-size: 13.5px;
    color: #fdba74;
    line-height: 1.9;
    font-weight: 500;
}

.video-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(236, 29, 36, 0.15), rgba(236, 29, 36, 0.02));
    border: 1px solid rgba(236, 29, 36, 0.4);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.video-card:hover {
    transform: translateY(-4px);
    border-color: rgba(236, 29, 36, 0.8);
    box-shadow: 0 16px 40px rgba(236, 29, 36, 0.2);
    background: linear-gradient(135deg, rgba(236, 29, 36, 0.22), rgba(236, 29, 36, 0.03));
}

.video-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec1d24, #b91218);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: 4px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(236, 29, 36, 0.4);
    transition: transform 0.3s ease;
}

.video-card:hover .video-icon { transform: scale(1.08); }

/* ===== 指南页 KK 下载大横幅 ===== */
.kk-banner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    margin-top: 18px;
    background:
        linear-gradient(135deg, rgba(255, 146, 30, 0.22) 0%, rgba(255, 90, 30, 0.04) 60%, rgba(46, 100, 255, 0.08) 100%),
        linear-gradient(160deg, #1d1104 0%, #140a04 100%);
    border: 1px solid rgba(255, 146, 30, 0.45);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}
.kk-banner-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 110%, rgba(46, 100, 255, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 10% -10%, rgba(255, 146, 30, 0.25) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.kk-banner-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 170, 60, 0.85);
    box-shadow: 0 18px 40px rgba(255, 146, 30, 0.25);
}
.kk-banner-left {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}
.kk-icon-wrap {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff921e, #ff5a1e);
    color: #120a04;
    box-shadow: 0 10px 24px rgba(255, 146, 30, 0.45);
}
.kk-icon-wrap svg { width: 28px; height: 28px; stroke-width: 2.2; }
.kk-banner-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff5e6;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kk-banner-ver {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 170, 60, 0.4);
    color: #ffd9a8;
    letter-spacing: 0.03em;
    font-weight: 500;
}
.kk-banner-sub {
    font-size: 13.5px;
    color: #f3c89a;
    opacity: 0.92;
    letter-spacing: 0.02em;
}
.kk-banner-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.kk-banner-btn {
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 15px;
    padding: 9px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff921e, #ff5a1e);
    color: #120a04;
    box-shadow: 0 8px 20px rgba(255, 146, 30, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kk-banner-card:hover .kk-banner-btn {
    transform: translateX(-2px);
    box-shadow: 0 10px 26px rgba(255, 146, 30, 0.55);
}
.kk-banner-right svg {
    width: 22px; height: 22px;
    color: #ffd9a8;
    transition: transform 0.25s ease;
}
.kk-banner-card:hover .kk-banner-right svg {
    transform: translateX(3px);
    color: #fff;
}
@media (max-width: 600px) {
    .kk-banner-card { flex-wrap: wrap; padding: 16px 18px; }
    .kk-banner-right { width: 100%; justify-content: space-between; }
}

.kk-banner-card.kk-loading { filter: saturate(0.8); }
.kk-banner-card.kk-loading .kk-banner-ver::before {
    content: '加载中 ';
    color: #ffe39a;
}
.kk-banner-card.kk-broken {
    opacity: 0.65;
    filter: grayscale(0.35);
    pointer-events: none;
    cursor: not-allowed;
}
.kk-banner-card.kk-broken .kk-banner-ver {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
    color: #c8c8c8;
}
.kk-banner-card.kk-broken .kk-banner-btn {
    background: linear-gradient(135deg, #555, #333);
    color: #bbb;
    box-shadow: none;
}

.video-info { flex: 1; min-width: 0; }

.video-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.video-url {
    font-size: 12.5px;
    color: #fda4af;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.video-arrow {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.video-card:hover .video-arrow {
    color: #fff;
    transform: translateX(4px);
}

.guide-footer {
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
    .guide-toc { display: none; }
    .guide-nav { justify-content: center; margin: -32px -24px 24px; }
    .section-num { font-size: 36px; }
    .section-header { gap: 12px; }
    .info-row { flex-direction: column; padding: 12px 20px; }
    .info-key { width: auto; margin-bottom: 2px; }
    .key-row { flex-direction: column; gap: 10px; padding: 16px 20px; }
    .key-row kbd { min-width: auto; }
    .video-card { padding: 18px; gap: 14px; }
    .video-icon { width: 46px; height: 46px; font-size: 16px; }
    .video-title { font-size: 15px; }
    .hero-arena-field { grid-template-columns: repeat(5, 1fr) !important; }
    .hero-arena-head { font-size: 14px; }
    .path-arrow-hint { display: none; }
}

/* ========================
   火影+魔兽 首页装饰元素
   ======================== */

.deco-konoha {
    position: fixed;
    font-size: 140px;
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
    animation: leaf-float 10s ease-in-out infinite;
}

.deco-tl { top: 30px; left: 30px; transform: rotate(-15deg); animation-delay: 0s; }
.deco-tr { top: 50px; right: 40px; transform: rotate(20deg); animation-delay: 2s; }
.deco-bl { bottom: 60px; left: 40px; transform: rotate(-25deg) scaleX(-1); animation-delay: 4s; }
.deco-br { bottom: 40px; right: 30px; transform: rotate(12deg) scaleX(-1); animation-delay: 6s; }

@keyframes leaf-float {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-15px) rotate(calc(var(--r, 0deg) + 6deg)); }
}
.deco-tl { --r: -15deg; }
.deco-tr { --r: 20deg; }
.deco-bl { --r: -25deg; }
.deco-br { --r: 12deg; }

.deco-cloud {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 48px;
    color: #c8102e;
    background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(40,0,0,0.4));
    border: 2px solid #c8102e;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.12;
    box-shadow: 0 0 30px rgba(200, 16, 46, 0.3), inset 0 0 20px rgba(200, 16, 46, 0.2);
}

.deco-cloud-1 { top: 180px; right: 10%; animation: cloud-drift 18s linear infinite; }
.deco-cloud-2 { bottom: 220px; left: 8%; animation: cloud-drift 22s linear infinite reverse; }

@keyframes cloud-drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -20px); }
}

.wc3-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    font-size: 13px;
    color: var(--gold-light);
    letter-spacing: 0.12em;
    font-weight: 600;
}

.wc3-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}

.konoha-spin {
    position: absolute;
    inset: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    color: var(--gold);
    animation: spin-slow 20s linear infinite;
    opacity: 0.55;
}

.konoha-ring {
    width: 124px;
    height: 124px;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.leaf-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #8b701f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 16px rgba(212, 175, 55, 0.4);
    border: 2px solid var(--bg-dark);
}

.hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 28px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12.5px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
}

.meta-chip:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.chip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #36d399;
    box-shadow: 0 0 8px rgba(54, 211, 153, 0.6);
}

.chip-dot-gold { background: var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.6); }
.chip-dot-red { background: var(--blood); box-shadow: 0 0 8px rgba(200, 16, 46, 0.6); }
.chip-dot-purple { background: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, 0.6); }

/* ========================
   Guide 新元素：路径示意 + 英雄选择区
   ======================== */

.path-mockup {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.path-title {
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.03));
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.path-title strong { color: var(--gold); letter-spacing: 0.04em; }

.path-bar {
    padding: 10px 14px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.path-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.path-crumbs > span:first-child { color: #c9bfa8; font-weight: 500; }

.crumb-arrow {
    opacity: 0.4;
    font-size: 12px;
    margin: 0 2px;
}

.crumb-current {
    color: var(--gold);
    font-weight: 600;
    padding: 2px 10px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}

.path-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.win-btn {
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #242424;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.win-btn.search {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.25);
    color: var(--gold);
}

.path-col-head {
    display: grid;
    grid-template-columns: 1fr 180px 60px;
    gap: 12px;
    padding: 8px 14px;
    background: #181818;
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.path-folder {
    display: grid;
    grid-template-columns: 28px 1fr 180px 60px auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.2s ease;
}

.path-folder:hover { background: rgba(255,255,255,0.02); }

.path-folder:last-child { border-bottom: none; }

.folder-icon { font-size: 16px; text-align: center; }
.folder-name { font-weight: 500; }
.folder-date { color: var(--text-secondary); font-size: 12px; }
.folder-type { color: var(--text-secondary); font-size: 12px; text-align: center; }

.path-folder-target {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.02));
    border-left: 3px solid #6366f1;
    position: relative;
}

.path-folder-target .folder-name { color: #a5b4fc; font-weight: 700; }

.path-arrow-hint {
    color: #a5b4fc;
    font-size: 12.5px;
    white-space: nowrap;
    padding-left: 10px;
    animation: hint-wiggle 2s ease-in-out infinite;
}

.path-arrow-hint b { color: #fff; }

@keyframes hint-wiggle {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(6px); opacity: 0.75; }
}

.path-hint {
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent);
    border-top: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.path-hint strong { color: var(--gold); }

/* 英雄选择区（60忍者大合影） */
.hero-arena {
    background:
        radial-gradient(ellipse at center, rgba(30,50,30,0.7) 0%, rgba(10,15,10,0.95) 100%),
        repeating-linear-gradient(45deg, rgba(80,60,20,0.08) 0 12px, transparent 12px 24px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    overflow: hidden;
    padding: 20px;
    position: relative;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 0 80px rgba(0,0,0,0.5);
}

.hero-arena::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 10px;
    pointer-events: none;
}

.hero-arena-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 20px;
}

.hero-badge.konoha {
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    color: #dbeafe;
    border: 1px solid #3b82f6;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}

.hero-badge.akatsuki {
    background: linear-gradient(135deg, #991b1b, #450a0a);
    color: #fecaca;
    border: 1px solid #dc2626;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.35);
}

.hero-arena-field {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.hero-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 2.6vw, 22px);
    position: relative;
    cursor: default;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(135deg, rgba(40,40,40,0.6), rgba(20,20,20,0.6));
}

.hero-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-cell:hover {
    transform: translateY(-3px) scale(1.08);
    z-index: 3;
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 10px 22px rgba(0,0,0,0.7);
}

.hero-cell:hover::after { opacity: 1; }

/* 势力配色 */
.h-konoha { background: linear-gradient(135deg, rgba(30, 64, 175, 0.35), rgba(30, 58, 138, 0.2)); border-color: rgba(59, 130, 246, 0.25); }
.h-konoha:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.7), 0 0 18px rgba(59, 130, 246, 0.4); }

.h-kage { background: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(139, 112, 31, 0.2)); border-color: rgba(212, 175, 55, 0.3); }
.h-kage:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.7), 0 0 18px rgba(212, 175, 55, 0.5); }

.h-akatsuki { background: linear-gradient(135deg, rgba(153, 27, 27, 0.4), rgba(69, 10, 10, 0.2)); border-color: rgba(220, 38, 38, 0.3); }
.h-akatsuki:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.7), 0 0 18px rgba(220, 38, 38, 0.5); }

.h-suna { background: linear-gradient(135deg, rgba(217, 119, 6, 0.35), rgba(146, 64, 14, 0.2)); border-color: rgba(245, 158, 11, 0.3); }
.h-kumogakure { background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(107, 33, 168, 0.2)); border-color: rgba(192, 132, 252, 0.3); }

.h-uchiha { background: linear-gradient(135deg, rgba(220, 38, 38, 0.5), rgba(127, 29, 29, 0.25)); border-color: rgba(239, 68, 68, 0.4); }
.h-uchiha:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.7), 0 0 22px rgba(239, 68, 68, 0.55); }

.h-otutsuki { background: linear-gradient(135deg, rgba(126, 34, 206, 0.45), rgba(76, 29, 149, 0.25)); border-color: rgba(168, 85, 247, 0.45); color: #f3e8ff; }
.h-otutsuki:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.7), 0 0 22px rgba(168, 85, 247, 0.6); }

.h-kinkaku { background: linear-gradient(135deg, rgba(234, 179, 8, 0.35), rgba(133, 77, 14, 0.2)); border-color: rgba(250, 204, 21, 0.35); }
.h-jin { background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(180, 83, 9, 0.25)); border-color: rgba(251, 191, 36, 0.5); color: #fffbeb; }
.h-other { background: linear-gradient(135deg, rgba(75, 85, 99, 0.4), rgba(31, 41, 55, 0.2)); border-color: rgba(107, 114, 128, 0.25); }

.h-question {
    background: radial-gradient(circle, rgba(200, 16, 46, 0.55), rgba(88, 28, 135, 0.3));
    border: 2px solid #ff5c6a;
    box-shadow: 0 0 20px rgba(200, 16, 46, 0.5);
    animation: q-pulse 2s ease-in-out infinite;
    grid-column: 1;
    grid-row: 1;
}

.hero-q {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: clamp(20px, 3.2vw, 30px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.6), 0 0 20px rgba(200, 16, 46, 0.8);
}

@keyframes q-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(200, 16, 46, 0.5); transform: scale(1); }
    50% { box-shadow: 0 0 40px rgba(200, 16, 46, 0.85); transform: scale(1.06); }
}

.h-random {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px dashed rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.5);
}

.hero-arena-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 12px 14px 4px;
    border-top: 1px dashed rgba(212, 175, 55, 0.2);
    position: relative;
    z-index: 1;
}

.foot-tip {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.foot-tip b { color: var(--gold-light); }

/* 新的英雄卡片区：真实卡牌图网格 */
.hero-card-arena {
    background:
        radial-gradient(ellipse at 10% 0%, rgba(30, 58, 138, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 90% 0%, rgba(127, 29, 29, 0.2) 0%, transparent 45%),
        linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(15, 15, 15, 0.85));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    overflow: hidden;
    padding: 24px;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.hero-card-arena::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 10px;
    pointer-events: none;
}

.hca-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 20px;
}

.hca-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}

.hca-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.08em;
    margin: 0;
}

.hca-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 0.02em;
}

.hca-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.15);
}

.hca-tab {
    display: inline-block;
    padding: 7px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.28s ease;
    letter-spacing: 0.05em;
    user-select: none;
}

.hca-tab:hover {
    color: var(--gold-light);
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.06);
}

.hca-tab-active {
    background: linear-gradient(135deg, var(--blood), #7a0819);
    color: #fff;
    border-color: var(--blood);
    box-shadow: 0 6px 16px rgba(200, 16, 46, 0.35);
    font-weight: 600;
}

.hca-tab-active:hover {
    background: linear-gradient(135deg, var(--blood), #7a0819);
    color: #fff;
    border-color: var(--blood);
}

.hca-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.hca-grid-hidden { display: none; }

.hca-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #221a10 0%, #0e0a07 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.hca-card::before {
    content: attr(data-name);
    position: absolute;
    inset: 0 0 auto 0;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 14px 60px;
    font-family: 'Ma Shan Zheng', cursive, 'Noto Serif SC', serif;
    font-size: clamp(18px, 3.2vw, 28px);
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.4;
    color: var(--gold-light);
    text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 22px rgba(212, 175, 55, 0.3);
    z-index: 0;
    white-space: pre-wrap;
    word-break: break-all;
    background-repeat: no-repeat;
    background-size: 100% 100%, auto 58%, auto 22%;
    background-position: 0 0, 50% 28%, 50% 86%;
}

.hca-card-img-failed::before {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 30px rgba(255, 230, 150, 0.5);
    filter: saturate(1.05) contrast(1.02);
}

/* ===== 势力主题 SVG 卡底 (100% 本地，不依赖外部图) ===== */
/* 鸣人系：橙色火焰 + 九尾剪影 */
.hca-card[data-faction="naruto"]::before {
    color: #ffe0a8;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 24px rgba(255, 130, 30, 0.55);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gn' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%234a1e04'/><stop offset='0.55' stop-color='%231a0a02'/>\
<stop offset='1' stop-color='%230a0400'/></linearGradient>\
<radialGradient id='gg' cx='50%25' cy='22%25' r='55%25'>\
<stop offset='0' stop-color='%23ffb35c' stop-opacity='0.5'/>\
<stop offset='1' stop-color='%23ffb35c' stop-opacity='0'/></radialGradient>\
<pattern id='diag' width='16' height='16' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<rect width='16' height='16' fill='transparent'/><path d='M0 0h16' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gn)'/>\
<rect width='300' height='400' fill='url(%23diag)'/>\
<rect width='300' height='400' fill='url(%23gg)'/>\
<path d='M20 400 Q20 300 60 280 T120 260 Q100 320 140 320 T180 300 Q160 360 200 350 T260 320 Q240 380 280 400Z'\
 fill='%23ff6a00' fill-opacity='0.14'/>\
<path d='M0 400 Q10 340 50 340 T110 310 Q90 370 130 360 T190 330 T250 360 T300 340 L300 400Z'\
 fill='%23ffae00' fill-opacity='0.18'/>\
<rect x='0' y='0' width='300' height='3' fill='%23ff6a00'/>\
<rect x='0' y='397' width='300' height='3' fill='%23ffae00'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<g fill='none' stroke='%23ff8b1a' stroke-width='2.2' stroke-opacity='0.7'>\
<path d='M60 12 C28 12 14 42 34 74 C34 90 22 102 18 108 C28 104 42 98 54 98 C46 108 36 116 28 118 C48 112 72 112 92 118 C84 116 74 108 66 98 C78 98 92 104 102 108 C98 102 86 90 86 74 C106 42 92 12 60 12Z'/>\
<path d='M42 40 C38 44 38 52 42 56 M48 60 C50 62 50 66 48 68' stroke='%23ffb060' stroke-opacity='0.8'/>\
<path d='M78 40 C82 44 82 52 78 56 M72 60 C70 62 70 66 72 68' stroke='%23ffb060' stroke-opacity='0.8'/>\
</g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23ffae00' fill-opacity='0.55' letter-spacing='4'>漩涡·鸣人系</text>\
</svg>");
}

/* 火影：木叶 + 绿色斗笠 */
.hca-card[data-faction="hokage"]::before {
    color: #fff4bf;
    text-shadow: 0 2px 10px rgba(0,0,0,0.92), 0 0 24px rgba(140, 220, 120, 0.45);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gh' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%230d2a14'/><stop offset='0.6' stop-color='%2306140a'/>\
<stop offset='1' stop-color='%23020904'/></linearGradient>\
<radialGradient id='ggh' cx='50%25' cy='22%25' r='55%25'>\
<stop offset='0' stop-color='%2378e066' stop-opacity='0.42'/>\
<stop offset='1' stop-color='%2378e066' stop-opacity='0'/></radialGradient>\
<pattern id='dih' width='16' height='16' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<path d='M0 0h16' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gh)'/>\
<rect width='300' height='400' fill='url(%23dih)'/>\
<rect width='300' height='400' fill='url(%23ggh)'/>\
<path d='M0 300 L40 280 L80 310 L140 270 L200 305 L250 280 L300 300 L300 400 L0 400Z' fill='%231e6a2a' fill-opacity='0.22'/>\
<rect x='0' y='0' width='300' height='3' fill='%2355c04a'/>\
<rect x='0' y='397' width='300' height='3' fill='%23c0d044'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<g fill='none' stroke='%239ee08a' stroke-width='2' stroke-opacity='0.7'>\
<path d='M60 10 C30 10 18 30 18 52 C18 72 32 92 60 110 C88 92 102 72 102 52 C102 30 90 10 60 10Z' fill='%23224a1a' fill-opacity='0.35'/>\
<path d='M60 26 L52 44 L34 46 L48 60 L42 78 L60 68 L78 78 L72 60 L86 46 L68 44 Z'\
 fill='%239ee08a' fill-opacity='0.28' stroke='%23c0f0a0' stroke-opacity='0.7'/>\
</g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23a0e890' fill-opacity='0.6' letter-spacing='4'>千手·火影</text>\
</svg>");
}

/* 宇智波：写轮眼 + 团扇 + 红黑 */
.hca-card[data-faction="uchiha"]::before {
    color: #ffd4c2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 26px rgba(255, 50, 50, 0.5);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gu' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%232a0606'/><stop offset='0.6' stop-color='%23130202'/>\
<stop offset='1' stop-color='%23060000'/></linearGradient>\
<radialGradient id='ggu' cx='50%25' cy='25%25' r='55%25'>\
<stop offset='0' stop-color='%23ff4a4a' stop-opacity='0.38'/>\
<stop offset='1' stop-color='%23ff4a4a' stop-opacity='0'/></radialGradient>\
<pattern id='diu' width='18' height='18' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<path d='M0 0h18' stroke='%23ff3030' stroke-opacity='0.07' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gu)'/>\
<rect width='300' height='400' fill='url(%23diu)'/>\
<rect width='300' height='400' fill='url(%23ggu)'/>\
<path d='M30 400 L30 340 Q60 360 80 330 L100 360 Q130 350 150 380 L180 330 Q210 360 240 340 L270 400Z' fill='%23600' fill-opacity='0.45'/>\
<rect x='0' y='0' width='300' height='3' fill='%23c02020'/>\
<rect x='0' y='397' width='300' height='3' fill='%232a0606'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<circle cx='60' cy='60' r='44' fill='%23140000' stroke='%23a41414' stroke-width='2.5'/>\
<circle cx='60' cy='60' r='30' fill='%23c81010'/>\
<circle cx='60' cy='60' r='6' fill='%23140000'/>\
<g fill='%23140000'>\
<path d='M60 30 A30 30 0 0 1 85.98 75 L74 69 A18 18 0 0 0 60 42Z'/>\
<path d='M85.98 75 A30 30 0 0 1 34.02 75 L46 69 A18 18 0 0 0 74 69Z'/>\
<path d='M34.02 75 A30 30 0 0 1 60 30 L60 42 A18 18 0 0 0 46 69Z'/>\
</g>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23ff8888' fill-opacity='0.55' letter-spacing='4'>宇智波一族</text>\
</svg>");
}

/* 晓：红云 + 黑风衣条纹 */
.hca-card[data-faction="akatsuki"]::before {
    color: #ffdede;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 26px rgba(240, 60, 80, 0.5);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='ga' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%23100608'/><stop offset='0.55' stop-color='%2317080a'/>\
<stop offset='1' stop-color='%23080002'/></linearGradient>\
<pattern id='dia' width='40' height='40' patternUnits='userSpaceOnUse'>\
<rect width='40' height='40' fill='transparent'/>\
<path d='M20 12 C10 12 6 20 14 28 L6 28 L6 34 L22 34 L22 30 C28 36 34 30 30 22 C36 22 36 12 20 12Z' fill='%23c02036' fill-opacity='0.23' stroke='%23ffffff' stroke-opacity='0.08'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23ga)'/>\
<rect width='300' height='400' fill='url(%23dia)'/>\
<rect x='0' y='0' width='300' height='6' fill='%238a1424' fill-opacity='0.8'/>\
<rect x='0' y='394' width='300' height='6' fill='%238a1424' fill-opacity='0.8'/>\
<rect x='0' y='0' width='300' height='3' fill='%23ffb0b0'/>\
<rect x='0' y='397' width='300' height='3' fill='%23ffb0b0'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<path d='M60 28 C40 28 32 44 46 60 L28 60 L28 72 L62 72 L62 66 C72 78 86 66 78 50 C90 50 90 28 60 28Z'\
 fill='%23c8102e' fill-opacity='0.68' stroke='%23ffe0e0' stroke-width='1.6' stroke-opacity='0.55'/>\
<path d='M14 100 L18 90 L26 96 L30 86 L38 94 L48 82 L50 92 L60 86 L60 100Z' fill='%23c8102e' fill-opacity='0.35'/>\
<path d='M70 100 L78 90 L86 98 L94 88 L102 96 L110 86 L110 100Z' fill='%23c8102e' fill-opacity='0.35'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23ff98a8' fill-opacity='0.6' letter-spacing='4'>「晓」组织</text>\
</svg>");
}

/* 五影：紫金斗笠 */
.hca-card[data-faction="kage"]::before {
    color: #ffe8a0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.92), 0 0 26px rgba(200, 140, 255, 0.42);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gk' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%23241034'/><stop offset='0.55' stop-color='%2311061e'/>\
<stop offset='1' stop-color='%2306020c'/></linearGradient>\
<radialGradient id='ggk' cx='50%25' cy='22%25' r='55%25'>\
<stop offset='0' stop-color='%23cc98ff' stop-opacity='0.35'/>\
<stop offset='1' stop-color='%23cc98ff' stop-opacity='0'/></radialGradient>\
<pattern id='dik' width='14' height='14' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<path d='M0 0h14' stroke='%23eec988' stroke-opacity='0.055' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gk)'/>\
<rect width='300' height='400' fill='url(%23dik)'/>\
<rect width='300' height='400' fill='url(%23ggk)'/>\
<path d='M0 0 L60 30 L150 14 L240 30 L300 0 L300 30 L240 44 L150 36 L60 44 Z'\
 fill='%23a06a28' fill-opacity='0.45'/>\
<rect x='0' y='0' width='300' height='3' fill='%23d4af37'/>\
<rect x='0' y='397' width='300' height='3' fill='%23d4af37'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<path d='M20 46 L60 22 L100 46 L100 64 L60 52 L20 64Z' fill='%239a6822' fill-opacity='0.72' stroke='%23eecb88' stroke-width='1.6'/>\
<path d='M50 54 L60 50 L70 54 L70 100 L50 100Z' fill='%235a3c14' fill-opacity='0.75'/>\
<circle cx='60' cy='34' r='4' fill='%23ffe6a0'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23f0d08a' fill-opacity='0.62' letter-spacing='4'>五影·村长</text>\
</svg>");
}

/* 大筒木 / BOSS：轮回眼 + 神树枝纹 */
.hca-card[data-faction="otutsuki"]::before {
    color: #e6e0ff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 28px rgba(180, 160, 255, 0.45);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='go' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%2315101f'/><stop offset='0.5' stop-color='%230a0614'/>\
<stop offset='1' stop-color='%23020105'/></linearGradient>\
<radialGradient id='ggo' cx='50%25' cy='25%25' r='55%25'>\
<stop offset='0' stop-color='%23a990ff' stop-opacity='0.36'/>\
<stop offset='1' stop-color='%23a990ff' stop-opacity='0'/></radialGradient></defs>\
<rect width='300' height='400' fill='url(%23go)'/>\
<rect width='300' height='400' fill='url(%23ggo)'/>\
<g stroke='%238870ff' stroke-opacity='0.2' fill='none' stroke-width='1'>\
<path d='M150 400 C150 340 110 320 120 260 C140 240 170 250 170 210 C150 180 110 160 130 120 L140 120 C140 180 180 200 170 240 C200 260 190 310 190 400Z'/>\
<path d='M40 400 C50 360 80 340 80 300 C50 290 50 260 70 240 C50 220 40 190 60 170'/>\
<path d='M260 400 C250 360 220 340 220 300 C250 290 250 260 230 240 C250 220 260 190 240 170'/>\
</g>\
<rect x='0' y='0' width='300' height='3' fill='%238870ff'/>\
<rect x='0' y='397' width='300' height='3' fill='%23382860'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<circle cx='60' cy='60' r='46' fill='%23100822' stroke='%23a990ff' stroke-width='2.2'/>\
<circle cx='60' cy='60' r='34' fill='none' stroke='%23b7a0ff' stroke-opacity='0.9' stroke-width='1.2'/>\
<circle cx='60' cy='60' r='22' fill='none' stroke='%23b7a0ff' stroke-opacity='0.7' stroke-width='1'/>\
<circle cx='60' cy='60' r='8' fill='%23a990ff'/>\
<g fill='%23a990ff' fill-opacity='0.85'>\
<path d='M52 60 a8 8 0 1 0 16 0 a8 8 0 1 0 -16 0 M60 34 A26 26 0 0 1 82.52 72 L76.48 68.96 A18 18 0 0 0 60 44Z'/>\
<path d='M82.52 72 A26 26 0 0 1 37.48 72 L43.52 68.96 A18 18 0 0 0 76.48 68.96Z'/>\
<path d='M37.48 72 A26 26 0 0 1 60 34 L60 44 A18 18 0 0 0 43.52 68.96Z'/>\
<path d='M60 32 A28 28 0 0 0 34.4 74.4 L43 70 A20 20 0 0 1 60 40Z'/>\
<path d='M34.4 74.4 A28 28 0 0 0 85.6 74.4 L77 70 A20 20 0 0 1 43 70Z'/>\
<path d='M85.6 74.4 A28 28 0 0 0 60 32 L60 40 A20 20 0 0 1 77 70Z'/>\
</g>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='21' fill='%23c8b8ff' fill-opacity='0.6' letter-spacing='3'>大筒木 · BOSS</text>\
</svg>");
}

/* 木叶十二小强：木叶叶片 + 绿色系 */
.hca-card[data-faction="konoha12"]::before {
    color: #e6ffd8;
    text-shadow: 0 2px 10px rgba(0,0,0,0.92), 0 0 24px rgba(150, 240, 120, 0.4);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gr' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%230f2218'/><stop offset='0.55' stop-color='%23050e09'/>\
<stop offset='1' stop-color='%23020503'/></linearGradient>\
<radialGradient id='ggr' cx='50%25' cy='22%25' r='55%25'>\
<stop offset='0' stop-color='%23a8e890' stop-opacity='0.38'/>\
<stop offset='1' stop-color='%23a8e890' stop-opacity='0'/></radialGradient>\
<pattern id='dir' width='16' height='16' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<path d='M0 0h16' stroke='%23c0ff9a' stroke-opacity='0.055' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gr)'/>\
<rect width='300' height='400' fill='url(%23dir)'/>\
<rect width='300' height='400' fill='url(%23ggr)'/>\
<path d='M30 0 Q40 30 20 60 T50 120 Q80 110 80 150 T50 210' fill='none' stroke='%2358a048' stroke-opacity='0.35' stroke-width='2'/>\
<path d='M270 0 Q260 30 280 60 T250 120 Q220 110 220 150 T250 210' fill='none' stroke='%2358a048' stroke-opacity='0.35' stroke-width='2'/>\
<rect x='0' y='0' width='300' height='3' fill='%238dd872'/>\
<rect x='0' y='397' width='300' height='3' fill='%234a7a38'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<path d='M60 14 C40 18 28 36 30 58 C30 80 46 100 60 108 C74 100 90 80 90 58 C92 36 80 18 60 14Z'\
 fill='%232a5020' fill-opacity='0.55' stroke='%23b8f0a0' stroke-width='1.6' stroke-opacity='0.75'/>\
<path d='M60 24 L56 48 L36 48 L50 62 L44 84 L60 72 L76 84 L70 62 L84 48 L64 48 Z'\
 fill='%23b8f0a0' fill-opacity='0.45' stroke='%23e6ffcf' stroke-opacity='0.6'/>\
<path d='M60 24 L60 90' stroke='%23e6ffcf' stroke-opacity='0.5' stroke-width='1.4'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23b0e898' fill-opacity='0.6' letter-spacing='4'>木叶十二小强</text>\
</svg>");
}

/* 特殊 / 其他 + DORO：黑金神秘风 */
.hca-card[data-faction="special"]::before {
    color: #ffeaa0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 26px rgba(212, 175, 55, 0.5);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gs' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%23221710'/><stop offset='0.55' stop-color='%23100a05'/>\
<stop offset='1' stop-color='%23040200'/></linearGradient>\
<radialGradient id='ggs' cx='50%25' cy='22%25' r='55%25'>\
<stop offset='0' stop-color='%23d4af37' stop-opacity='0.38'/>\
<stop offset='1' stop-color='%23d4af37' stop-opacity='0'/></radialGradient>\
<pattern id='dis' width='18' height='18' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<path d='M0 0h18' stroke='%23ffd86b' stroke-opacity='0.055' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gs)'/>\
<rect width='300' height='400' fill='url(%23dis)'/>\
<rect width='300' height='400' fill='url(%23ggs)'/>\
<path d='M0 0 L300 0 L300 20 L240 30 L180 18 L120 28 L60 18 Z' fill='%23d4af37' fill-opacity='0.2'/>\
<rect x='0' y='0' width='300' height='3' fill='%23d4af37'/>\
<rect x='0' y='397' width='300' height='3' fill='%23d4af37'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<circle cx='60' cy='60' r='44' fill='none' stroke='%23d4af37' stroke-width='2.2' stroke-opacity='0.85'/>\
<circle cx='60' cy='60' r='30' fill='none' stroke='%23d4af37' stroke-opacity='0.6' stroke-width='1.2'/>\
<circle cx='60' cy='60' r='16' fill='%23d4af37' fill-opacity='0.22'/>\
<path d='M60 22 L60 98 M22 60 L98 60' stroke='%23d4af37' stroke-opacity='0.55' stroke-width='1.2'/>\
<path d='M33 33 L87 87 M87 33 L33 87' stroke='%23d4af37' stroke-opacity='0.4' stroke-width='1'/>\
<g fill='%23d4af37' fill-opacity='0.75'>\
<circle cx='60' cy='22' r='2.5'/><circle cx='60' cy='98' r='2.5'/>\
<circle cx='22' cy='60' r='2.5'/><circle cx='98' cy='60' r='2.5'/>\
<circle cx='33' cy='33' r='2'/><circle cx='87' cy='87' r='2'/>\
<circle cx='87' cy='33' r='2'/><circle cx='33' cy='87' r='2'/>\
</g>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='22' fill='%23ffd86b' fill-opacity='0.58' letter-spacing='4'>特殊 · 隐藏卡</text>\
</svg>");
}

.hca-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blood), var(--gold), var(--blood));
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.hca-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: var(--gold);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.65), 0 0 30px rgba(212, 175, 55, 0.22);
    z-index: 2;
}

.hca-card:hover::after { opacity: 1; }

.hca-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 2;
    background: transparent;
}

.hca-card:hover img { transform: scale(1.06); }

.hca-name {
    position: relative;
    z-index: 2;
    padding: 10px 12px 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.4;
}

.hca-tip {
    position: relative;
    z-index: 2;
    padding: 2px 12px 12px;
    font-size: 11.5px;
    color: #b3a684;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.hca-card-doro {
    background: linear-gradient(160deg, #2a1045 0%, #12062a 100%);
    border-color: rgba(168, 85, 247, 0.5);
}

.hca-card-doro::before {
    color: #f5deff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 30px rgba(220, 120, 255, 0.6) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'>\
<defs><linearGradient id='gd' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%232a1045'/><stop offset='0.55' stop-color='%23160830'/>\
<stop offset='1' stop-color='%2306021a'/></linearGradient>\
<radialGradient id='ggd' cx='50%25' cy='25%25' r='60%25'>\
<stop offset='0' stop-color='%23e879f9' stop-opacity='0.42'/>\
<stop offset='1' stop-color='%23e879f9' stop-opacity='0'/></radialGradient>\
<pattern id='did' width='16' height='16' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>\
<path d='M0 0h16' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1'/>\
</pattern></defs>\
<rect width='300' height='400' fill='url(%23gd)'/>\
<rect width='300' height='400' fill='url(%23did)'/>\
<rect width='300' height='400' fill='url(%23ggd)'/>\
<path d='M20 400 Q20 320 70 310 T150 300 Q120 360 160 350 T250 320 Q220 380 280 400Z'\
 fill='%23a855f7' fill-opacity='0.22'/>\
<rect x='0' y='0' width='300' height='3' fill='%23c084fc'/>\
<rect x='0' y='397' width='300' height='3' fill='%23f0abfc'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
<path d='M60 12 C38 12 26 24 26 42 C26 54 20 60 16 66 C24 66 34 62 42 60 C36 70 28 80 20 86 C36 80 56 78 72 86 C64 80 56 70 50 60 C58 62 68 66 76 66 C72 60 66 54 66 42 C66 24 54 12 60 12Z'\
 fill='none' stroke='%23e879f9' stroke-width='2.2' stroke-opacity='0.85'/>\
<path d='M60 18 L60 82 M32 50 L88 50' stroke='%23c084fc' stroke-opacity='0.6' stroke-width='1.4'/>\
<circle cx='60' cy='50' r='4' fill='%23f0abfc'/>\
<path d='M78 30 Q90 42 84 54 Q100 58 96 70 Q108 82 96 92' fill='none' stroke='%23f0abfc' stroke-opacity='0.55' stroke-width='1.6'/>\
</svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'>\
<text x='80' y='40' text-anchor='middle' font-family='Ma Shan Zheng,serif' font-size='24' fill='%23e879f9' fill-opacity='0.65' letter-spacing='5'>DORO</text>\
</svg>") !important;
    background-repeat: no-repeat;
    background-size: 100% 100%, auto 58%, auto 22%;
    background-position: 0 0, 50% 28%, 50% 86%;
}

.hca-card-doro::after {
    background: linear-gradient(90deg, #a855f7, #e879f9, #a855f7);
}

.hca-card-doro:hover {
    border-color: #c084fc;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.65), 0 0 30px rgba(168, 85, 247, 0.35);
}

.hca-card-doro .hca-name { color: #e9d5ff; }
.hca-card-doro .hca-tip { color: #c4b5fd; }

.hca-goto-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin-top: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.03));
    border: 1px dashed rgba(99, 102, 241, 0.5);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hca-goto-card:hover {
    border-style: solid;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(99, 102, 241, 0.06));
    transform: translateX(4px);
}

.hca-goto-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.hca-goto-main { flex: 1; min-width: 0; }

.hca-goto-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.hca-goto-sub {
    font-size: 12.5px;
    color: #a5b4fc;
    letter-spacing: 0.02em;
}

.hca-goto-arrow {
    font-size: 22px;
    color: #a5b4fc;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.hca-goto-card:hover .hca-goto-arrow {
    transform: translateX(6px);
    color: #fff;
}

@media (max-width: 560px) {
    .hero-card-arena { padding: 18px 14px; }
    .hca-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .hca-name { font-size: 12.5px; padding: 8px 8px 2px; }
    .hca-tip { font-size: 10.5px; padding: 2px 8px 10px; }
    .hca-goto-card { padding: 14px; gap: 12px; }
    .hca-goto-icon { width: 44px; height: 44px; font-size: 22px; }
    .hca-goto-title { font-size: 14px; }
    .hca-goto-sub { font-size: 11.5px; }
}