/* ==========================================================================
   NOCTURNE —— 古堡吸血鬼主题
   主题全部通过 CSS 变量驱动；多站点可在 Blade 中覆盖 --accent
   ========================================================================== */

:root {
    --noir:        #0B0B0D;  /* 黑 */
    --blood:       #6E0B14;  /* 深红 */
    --blood-bright:#A3121F;
    --gold:        #C9A227;  /* 暗金 */
    --violet:      #3A2E4A;  /* 灰紫 */
    --bone:        #E9E2D2;  /* 骨白正文 */
    --ash:         #9B93A6;  /* 灰紫浅色文字 */
    --accent:      var(--gold);

    --font-gothic: 'Pirata One', 'Cinzel Decorative', 'Noto Serif SC', serif;
    --font-title:  'Cinzel', 'Noto Serif SC', serif;
    --font-body:   'Noto Serif SC', 'Songti SC', serif;

    --text-base: 17px;
}

html {
    background: var(--noir);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--bone);
    background: var(--noir);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--blood);
    color: var(--bone);
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }

/* ---------- 字体工具类 ---------- */
.font-gothic { font-family: var(--font-gothic); }
.font-title  { font-family: var(--font-title); }

/* ---------- 缓慢淡入 ---------- */
@keyframes fadeSlow {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-slow   { animation: fadeSlow 1.6s ease both; }
.fade-slow-2 { animation: fadeSlow 1.6s ease .5s both; }
.fade-slow-3 { animation: fadeSlow 1.6s ease 1s both; }

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 烛火 ---------- */
.candle {
    position: relative;
    width: 14px;
    height: 44px;
    background: linear-gradient(180deg, #efe6cf 0%, #d8c9a3 60%, #b3a17c 100%);
    border-radius: 3px 3px 2px 2px;
    box-shadow: inset -2px 0 4px rgba(0,0,0,.35);
}
.candle::before { /* 蜡泪 */
    content: '';
    position: absolute;
    top: 6px; left: -3px;
    width: 5px; height: 12px;
    background: #e6dcc2;
    border-radius: 3px;
}
.candle .wick {
    position: absolute;
    top: -6px; left: 50%;
    width: 2px; height: 6px;
    background: #2a2119;
    transform: translateX(-50%);
}
.candle .flame {
    position: absolute;
    top: -26px; left: 50%;
    width: 16px; height: 24px;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    background: radial-gradient(ellipse at 50% 78%,
        #fff8e0 0%, #ffd873 32%, #f79b1d 58%, var(--blood-bright) 82%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    filter: blur(.4px);
    animation: flicker 2.4s ease-in-out infinite;
}
.candle .flame::after { /* 内焰 */
    content: '';
    position: absolute;
    bottom: 3px; left: 50%;
    width: 6px; height: 11px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 80%, #fff 0%, #ffe9a8 60%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.candle .halo {
    position: absolute;
    top: -42px; left: 50%;
    width: 90px; height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,190,80,.28) 0%, rgba(255,150,40,.10) 45%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: haloPulse 2.4s ease-in-out infinite;
}
@keyframes flicker {
    0%, 100% { transform: translateX(-50%) scale(1) rotate(-1.5deg); }
    20%      { transform: translateX(-52%) scale(1.04, .96) rotate(2deg); }
    40%      { transform: translateX(-48%) scale(.96, 1.06) rotate(-2.5deg); }
    60%      { transform: translateX(-50%) scale(1.03, .97) rotate(1deg); }
    80%      { transform: translateX(-51%) scale(.98, 1.03) rotate(-1deg); }
}
@keyframes haloPulse {
    0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}

/* ---------- 烟雾 ---------- */
.smoke-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.smoke {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58,46,74,.5) 0%, rgba(58,46,74,.18) 45%, transparent 70%);
    filter: blur(18px);
    animation: drift linear infinite;
}
@keyframes drift {
    from { transform: translate3d(-12vw, 8vh, 0) scale(1);   opacity: 0; }
    12%  { opacity: .8; }
    85%  { opacity: .5; }
    to   { transform: translate3d(60vw, -14vh, 0) scale(1.6); opacity: 0; }
}

/* ---------- 古堡背景（Hero） ---------- */
.castle-hero {
    position: relative;
    min-height: 100svh;
    background:
        radial-gradient(ellipse 90% 55% at 50% -8%, rgba(110,11,20,.35) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 78% 18%, rgba(58,46,74,.55) 0%, transparent 65%),
        linear-gradient(180deg, #050507 0%, var(--noir) 42%, #14101c 78%, var(--noir) 100%);
    overflow: hidden;
}
.castle-hero .moon {
    position: absolute;
    top: 9vh; right: 12vw;
    width: clamp(90px, 13vw, 170px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #f4ead0 0%, #d9c9a0 45%, #b7a678 75%, #8f8262 100%);
    box-shadow: 0 0 60px 18px rgba(201,162,39,.22), 0 0 160px 60px rgba(201,162,39,.10);
    animation: haloPulse 6s ease-in-out infinite;
}
.castle-hero .castle {
    position: absolute;
    bottom: 0; left: 50%;
    width: min(1200px, 130vw);
    transform: translateX(-50%);
    pointer-events: none;
}
.castle-hero .fog {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34vh;
    background: linear-gradient(180deg, transparent 0%, rgba(11,11,13,.55) 55%, var(--noir) 100%);
    pointer-events: none;
}

/* 蝙蝠 */
.bat {
    position: absolute;
    fill: #050505;
    animation: batFly linear infinite;
    opacity: .85;
}
@keyframes batFly {
    from { transform: translate3d(-12vw, 0, 0); }
    to   { transform: translate3d(118vw, -9vh, 0); }
}

/* ---------- 烛光卡片 ---------- */
.candle-card {
    position: relative;
    background: linear-gradient(165deg, rgba(58,46,74,.34) 0%, rgba(11,11,13,.9) 55%),
                var(--noir);
    border: 1px solid rgba(201,162,39,.28);
    border-radius: 6px;
    padding: 3.2rem 1.6rem 1.8rem;
    text-align: center;
    transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.candle-card:hover, .candle-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 18px 44px -12px rgba(110,11,20,.55), 0 0 30px -6px rgba(201,162,39,.25);
}
.candle-card .candle {
    position: absolute;
    top: -26px; left: 50%;
    transform: translateX(-50%);
}
.candle-card h3 {
    font-family: var(--font-title);
    color: var(--accent);
    letter-spacing: .12em;
}

/* ---------- 地窖游戏库卡片 ---------- */
.vault-card {
    position: relative;
    display: block;
    background: linear-gradient(165deg, rgba(58,46,74,.34) 0%, rgba(11,11,13,.9) 55%),
                var(--noir);
    border: 1px solid rgba(201,162,39,.28);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.vault-card:hover, .vault-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 18px 44px -12px rgba(110,11,20,.55), 0 0 30px -6px rgba(201,162,39,.25);
}
/* 古堡徽章：替代封面 —— 图标 + 金色标题 */
.vault-emblem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 180px;
    padding: 2.4rem 1.6rem 1.8rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(110, 11, 20, .38) 0%, transparent 64%),
        linear-gradient(180deg, rgba(22, 18, 30, .92), rgba(11, 11, 13, .96));
    border-bottom: 1px solid rgba(201, 162, 39, .25);
}
.vault-emblem::after {
    content: '†';
    margin-top: .2rem;
    font-size: .85rem;
    color: rgba(201, 162, 39, .5);
    letter-spacing: .5em;
}
.vault-icon {
    font-size: 3.1rem;
    line-height: 1;
    color: var(--gold, #C9A227);
    text-shadow: 0 0 18px rgba(201, 162, 39, .45), 0 2px 10px rgba(0, 0, 0, .8);
    filter: drop-shadow(0 0 12px rgba(110, 11, 20, .6));
    transition: transform .5s ease, filter .5s ease;
}
.vault-card:hover .vault-icon, .vault-card:focus-visible .vault-icon {
    transform: translateY(-4px) scale(1.08);
    filter: drop-shadow(0 0 18px rgba(201, 162, 39, .65));
}
.vault-card h3 {
    font-family: var(--font-title);
    color: var(--accent);
    letter-spacing: .12em;
}

/* ---------- 哥特排行榜 ---------- */
.gothic-table-frame {
    border: 1px solid rgba(201,162,39,.35);
    background: linear-gradient(180deg, rgba(58,46,74,.22), rgba(11,11,13,.92));
    box-shadow: inset 0 0 60px rgba(0,0,0,.7), 0 24px 60px -24px rgba(110,11,20,.5);
    border-radius: 4px;
    position: relative;
}
.gothic-table-frame::before,
.gothic-table-frame::after {
    content: '❧';
    position: absolute;
    top: -14px;
    color: var(--accent);
    font-size: 22px;
    background: var(--noir);
    padding: 0 10px;
}
.gothic-table-frame::before { left: 24px; }
.gothic-table-frame::after  { right: 24px; transform: scaleX(-1); }

.gothic-table th {
    font-family: var(--font-title);
    color: var(--accent);
    letter-spacing: .18em;
    font-weight: 600;
    border-bottom: 1px solid rgba(201,162,39,.4);
}
.gothic-table td {
    border-bottom: 1px solid rgba(58,46,74,.45);
}
.gothic-table tbody tr {
    transition: background .4s ease;
}
.gothic-table tbody tr:hover {
    background: rgba(110,11,20,.22);
}
.rank-medal { font-family: var(--font-title); font-weight: 700; }
.rank-1 { color: var(--gold); text-shadow: 0 0 12px rgba(201,162,39,.7); }
.rank-2 { color: #c9c9d4; }
.rank-3 { color: #b08a4a; }

/* ---------- 尖拱金属框（游玩页） ---------- */
.metal-frame {
    position: relative;
    padding: 14px;
    border-radius: 190px 190px 14px 14px / 170px 170px 14px 14px; /* 尖拱顶 */
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
        linear-gradient(160deg, #4b4456 0%, #221d2b 30%, #17131e 50%, #2f2838 74%, #0f0c14 100%);
    box-shadow:
        inset 0 0 0 1px rgba(201,162,39,.5),
        inset 0 0 0 4px rgba(11,11,13,.9),
        inset 0 0 28px rgba(0,0,0,.85),
        0 30px 70px -20px rgba(0,0,0,.9);
}
.metal-frame::before { /* 铆钉纹理 */
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background-image: radial-gradient(circle, rgba(201,162,39,.5) 1.4px, transparent 1.8px);
    background-size: 34px 34px;
    background-position: 8px 8px;
    opacity: .35;
    pointer-events: none;
}
.metal-frame .arch-crown {
    position: absolute;
    top: -34px; left: 50%;
    transform: translateX(-50%);
    color: var(--accent);
    font-size: 30px;
    text-shadow: 0 0 16px rgba(201,162,39,.55);
}
.game-stage {
    position: relative;
    border-radius: 176px 176px 8px 8px / 158px 158px 8px 8px;
    overflow: hidden;
    background: #050507;
    box-shadow: inset 0 0 90px rgba(0,0,0,.85);
    touch-action: none;
}
#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.game-stage:fullscreen {
    border-radius: 0;
    height: 100vh !important;
    height: 100dvh !important;
}

/* 游玩页控制按钮 —— 触控目标 >= 44px */
.btn-gothic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    min-width: 44px;
    padding: .55rem 1.15rem;
    font-family: var(--font-title);
    letter-spacing: .1em;
    color: var(--bone);
    background: linear-gradient(180deg, rgba(110,11,20,.85), rgba(70,7,13,.95));
    border: 1px solid rgba(201,162,39,.55);
    border-radius: 3px;
    box-shadow: 0 6px 18px -6px rgba(110,11,20,.8), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    user-select: none;
}
.btn-gothic:hover, .btn-gothic:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 8px 22px -6px rgba(163,18,31,.9), 0 0 18px -4px rgba(201,162,39,.5);
    transform: translateY(-2px);
}
.btn-gothic:active { transform: translateY(0) scale(.97); }

.btn-ghost {
    background: linear-gradient(180deg, rgba(58,46,74,.55), rgba(28,22,38,.9));
}

/* 游戏覆盖层（暂停 / 结束） */
.game-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5,5,7,.78);
    backdrop-filter: blur(3px);
    z-index: 20;
}
.overlay-panel {
    width: min(92%, 430px);
    text-align: center;
    padding: 2rem 1.6rem;
    border: 1px solid rgba(201,162,39,.45);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(58,46,74,.4), rgba(11,11,13,.96));
    box-shadow: 0 24px 60px -18px rgba(0,0,0,.9), 0 0 40px -10px rgba(110,11,20,.6);
}

/* ---------- 分隔与装饰 ---------- */
.ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--accent);
}
.ornament::before, .ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,162,39,.6), transparent);
}

.section-title {
    font-family: var(--font-title);
    letter-spacing: .22em;
    color: var(--accent);
    text-shadow: 0 0 22px rgba(201,162,39,.28);
}

/* 窗格微光动画 */
@keyframes windowGlow {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.castle-window { animation: windowGlow 3.4s ease-in-out infinite; }

/* ---------- 移动端强化（深色高对比 + 大字号） ---------- */
@media (max-width: 640px) {
    :root { --text-base: 18px; }
    .castle-hero .moon { right: 6vw; top: 7vh; }
    .metal-frame {
        padding: 8px;
        border-radius: 90px 90px 10px 10px / 80px 80px 10px 10px;
    }
    .game-stage {
        border-radius: 76px 76px 6px 6px / 66px 66px 6px 6px;
    }
    .gothic-table-frame::before, .gothic-table-frame::after { display: none; }
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .fade-slow, .fade-slow-2, .fade-slow-3, .reveal { animation: none; transition: none; opacity: 1; transform: none; }
    .smoke, .bat, .candle .flame, .candle .halo, .castle-window, .castle-hero .moon { animation: none; }
}