* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background: url('/images/bf_bg.png') no-repeat center center fixed;

    background-size: cover;

    overflow: hidden;

    height: 100vh;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    position: relative;

    /* 闁归潧顑嗗┃鈧紒鏃戝灟缁楁捇鎮介妸顭戝晭缂?*/

    max-width: 100vw;

    overflow-x: hidden;

}



/* 閹煎瓨娲熼崕鎾炊閸撗冾暬 - 闁归潧顑嗗┃鈧紒鏃戝灟缁楁捇鎮?*/

.bottom-image {

    position: absolute; /* 缂備焦绻傞顔锯偓瑙勭煯缂嶅懘鏁嶇仦鐣岀处缂佹柨顑呴鎰板闯閵娿倗鐟愬☉鎾愁儐閺?*/

    bottom: 122px;      /* 闁搞儱鎼悾鍓ф崉濠靛牜鐎查悘鐐茬箰缁犻攱鎯旈弴銏犲姤122闁稿秴绻掔粈?*/

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    max-width: 400px;

    height: auto;

    z-index: 5;

    box-sizing: border-box;

    padding: 0 20px;

}



.bottom-image img {

    width: 100%;

    height: auto;

    display: block;

    max-width: 100%;

}



/* 濡絾鐟ラ幏鎵焊韫囨洑绱戦柛蹇擃槸椤旀劙宕?- 闁烩晛鐡ㄧ敮鎾儎缁嬫鍤犲ù婊冪凹缁堕潧顩肩仦鐣屾毎濞?*/

.incense-stick-container {

    position: absolute;

    bottom: calc(122px + 100px); /* 濞撴碍绋掗、鎴炴償閺囥垹鍔?22px + 100px = 濞撴碍绋掗、鎴炪亜閸洖鍔ュ☉鎾愁儐閺?00px */

    left: 50%;

    transform: translateX(-50%);

    z-index: 100;

    width: 100px;

    height: 120px;

}



@keyframes smokeRise {

    0% {

        transform: translateX(-50%) scale(0.8);

        opacity: 0.3;

    }

    50% {

        transform: translateX(-50%) scale(1.2);

        opacity: 0.7;

    }

    100% {

        transform: translateX(-50%) scale(0.8) translateY(-20px);

        opacity: 0;

    }

}



/* 濞撴碍绋掗、鎴犫偓鍦嚀濞?*/

.altar-container {

    position: relative;

    width: 100%;

    height: auto;

    z-index: 5;

}



/* 闁炬熬绱曢崕褔宕仦鎯т壕闁稿绮屽ù姗€鎮ч崶褜鍟囬柛?- 闁归潧顑嗗┃鈧紒鏃戝灟缁楁捇鎮?*/

.candles-container {

    position: absolute;

    bottom: 130px; /* 闁轰胶绻濈紞瀣崉濠靛牜鐎查悘鐐茬箰缁犻攱鎯旈弴銏犲姤130px */

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: flex-end;

    justify-content: center; /* 婵ɑ娼欓柦鈺冧沪閸涱剝鍘?*/

    z-index: 20;

    width: 100%;

    max-width: 350px;

    margin-bottom: 0px;

}



/* 闁诡噮鍓欐禒鐘诲炊閸撗冾暬閻庡湱鎳撳▍?- 闁归潧顑嗗┃鈧紒鏃戝灟缁楁捇鎮?*/

.hover-images-container {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 0 5px;

    position: relative;

    top: -15px;

    z-index: 5;

}



/* 闁诡噮鍓欐禒鐘诲炊閸撗冾暬闁哄秴鍢茬槐?- 闁归潧顑嗗┃鈧紒鏃戝灟缁楁捇鎮?*/

.hover-image {

    width: 40px;

    height: 40px;

    cursor: pointer;

    margin-top: -8px;

    position: relative;

    z-index: 5;

}



.hover-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 6px;

}



/* 闁炬熬绱曢崕褔寮藉畡鎵 - 闁归潧顑嗗┃鈧紒鏃戝灟缁楁捇鎮?*/

.candle {

    position: relative;

    width: 50px;

    height: 140px;

    display: flex;

    align-items: flex-start;

}



/* 鐎归潻缂氶弲鍫曟憥閿涘嫬鍔?*/

.left-candle {

    margin-right: 5px;

}



/* 闁告瑥鍘栭弲鍫曟憥閿涘嫬鍔?*/

.right-candle {

    margin-left: 5px;

}



.candle img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



/* 鐎归潻缂氶弲鍫曟憥閿涘嫬鍔庨柣蹇ｅ亞閸旀瑧鈧湱鎳撳▍?- 濞撴碍绋掗、鎴濐潩閺夋垿鎸ù锝呯Ф閻ゅ棙绂掓惔鈥茬閺夊牆婀遍悾濠氭晬瀹€鍕垫禈闁告瑥鐤囩换鍐级?2px */

.candle-flame.left-flame {

    position: absolute;

    bottom: calc(122px + 250px); /* 濞撴碍绋掗、鎴炴償閺囥垹鍔?22px + 250px = 濞撴碍绋掗、鎴炪亜閸洖鍔ュù锝呯Ф閻?*/

    left: calc(50% - 175px + 42px); /* 濞撴碍绋掗、鎴炵▔椤撶偟濡囬柛姘灥娑?75px + 闁告碍鍨佃ぐ?2px */

    width: 20px;

    height: 40px;

    z-index: 1000;

    background-color: transparent; /* 缁绢収鍠曠换姘扁偓鍦嚀濞呮帡鎳楃仦鐐彲闂侇偄绻戝Σ?*/

}



/* 闁告瑥鍘栭弲鍫曟憥閿涘嫬鍔庨柣蹇ｅ亞閸旀瑧鈧湱鎳撳▍?- 閻庨潧婀辫ⅷ濞达絽绉堕悿?*/

.candle-flame.right-flame {

    position: absolute;

    bottom: calc(122px + 250px); /* 濞撴碍绋掗、鎴炴償閺囥垹鍔?22px + 250px = 濞撴碍绋掗、鎴炪亜閸洖鍔ュù锝呯Ф閻?*/

    left: calc(50% + 175px - 64px); /* 濞撴碍绋掗、鎴炵▔椤撶偟濡囬柛姘灥瑜?75px - 闁告碍鍨垫稊?4px */

    width: 20px;

    height: 40px;

    z-index: 1000;

    background-color: transparent; /* 缁绢収鍠曠换姘扁偓鍦嚀濞呮帡鎳楃仦鐐彲闂侇偄绻戝Σ?*/

}



/* 濞戞捁宕垫导鈧柣鎺撴緲閻?*/

.flame-main {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 16px;

    height: 35px;

    background: radial-gradient(ellipse at center, 

        rgba(255, 255, 200, 0.9) 0%, 

        rgba(255, 200, 100, 0.8) 20%, 

        rgba(255, 100, 0, 0.6) 40%, 

        rgba(200, 50, 0, 0.4) 60%, 

        rgba(150, 30, 0, 0.2) 80%, 

        transparent 100%);

    border-radius: 50% 50% 20% 20%;

    animation: flameFlicker 0.8s infinite ease-in-out alternate;

    filter: blur(0.5px);

}



/* 婵炲棴绱曟导鈧柣鎺撴緲閻?*/

.flame-secondary {

    position: absolute;

    top: 2px;

    left: 50%;

    transform: translateX(-50%);

    width: 12px;

    height: 25px;

    background: radial-gradient(ellipse at center, 

        rgba(255, 255, 220, 0.8) 0%, 

        rgba(255, 220, 120, 0.7) 30%, 

        rgba(255, 150, 50, 0.5) 50%, 

        rgba(220, 80, 20, 0.3) 70%, 

        transparent 100%);

    border-radius: 40% 40% 15% 15%;

    animation: flameFlicker2 1.2s infinite ease-in-out alternate;

    filter: blur(0.8px);

    /* 缂佸顭峰▍宸慽x-blend-mode闁挎稑鐭侀鈧☉鎾卞€撻柌婊堟倶椤愩倕濮嶉梺顔尖偓鐔峰幋闁哄嫬澧介妵?*/

    z-index: 1002; /* 缁绢収鍠曠换姘枎閿涘嫪绱戦柣鎺撴緲濠€顏呯▔閼姐倓绱戦柣鎺楊暒缁狅絾绋?*/

}



@keyframes flameFlicker {

    0%, 100% {

        transform: translateX(-50%) scale(1) translateY(0px);

        opacity: 0.9;

    }

    25% {

        transform: translateX(-50%) scale(1.1) translateY(-1px);

        opacity: 1;

    }

    50% {

        transform: translateX(-50%) scale(0.95) translateY(1px);

        opacity: 0.8;

    }

    75% {

        transform: translateX(-50%) scale(1.05) translateY(-2px);

        opacity: 0.95;

    }

}



@keyframes flameFlicker2 {

    0%, 100% {

        transform: translateX(-50%) scale(0.9) translateY(0px);

        opacity: 0.7;

    }

    33% {

        transform: translateX(-50%) scale(1.05) translateY(-1px);

        opacity: 0.9;

    }

    66% {

        transform: translateX(-50%) scale(0.85) translateY(1px);

        opacity: 0.6;

    }

}



/* 濞撴碍绋掗、鎴﹀矗閸忓懏娅犻柛鏃傚枙閸忔ḿ鈧湱鎳撳▍?*/

.altar-right-menu {

    position: absolute;

    right: calc(5% + 55px);

    top: calc(50% + 200px);

    transform: translateY(-50%);

    display: flex;

    flex-direction: row;

    gap: 15px;

    z-index: 1001;

}



.menu-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: all 0.3s ease;

    cursor: pointer;

}



.menu-item:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateX(-5px);

}



.menu-icon {

    width: 24px;

    height: 24px;

    background: rgba(255, 255, 255, 0.8);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    color: #8B4513;

    font-weight: bold;

}



.menu-text {

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    font-weight: 500;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}



/* gif闁搞儲鍎抽鎰板闯閵婏妇澹夌€?- 濞戞挸顑呴惇浼存晬濮橆剚韬琤f_bg.png濞戞柨顑勭粭鍌炴晬鐏炶偐杩旀俊妤€鑻鎰板闯閵娿倗顓哄☉?*/

.gif-container {

    position: absolute;

    top: 100px; /* 閻犵儤绻勯‖鍥箥鐎ｎ偅绨氬鑸垫尦閸庢挳宕归崒婊勭函100px */

    left: 50%;

    transform: translateX(-50%);

    z-index: 5; /* 濞戞挸顑呴惇浼存晬濮橆偆绉靛ù婊冪凹缁堕潧顩肩仦绛嬪晣闁?z-index:20) */

}



.gif-image {

    width: 390px; /* 濞ｅ洦绻冪€垫棃宕㈤悢閿嬫閻?*/

    height: auto;

    margin-bottom: 20px;

    display: block;

    object-fit: contain; /* 缁绢収鍠曠换姝匩G闁搞儱澧芥晶鏍偓鐟版湰閺嗭綁寮伴崜褋浠?*/

}



/* 闁绘粠鍋嗙€涒晠鎳濋弻銉禈闁轰礁鐗婇悘?*/

.rose-incense-stick {

    position: absolute;

    width: 4px;

    height: 70px;

    background: linear-gradient(to bottom, #E75480 0%, #FF69B4 50%, #FFB6C1 100%);

    border-radius: 2px;

    z-index: 1000;

    left: calc(50% - 2px);

    transform: translateX(-50%);

    bottom: 60px; /* 闁烩晝枪椤曨喗绂嶆惔顭戞禈闁告粌鑻惃顒勬倶椤愩垹甯ㄩ悗鍦嚀濞呮帗鎯旈弴銏犲姤 */

}



/* 閻忓繐绻掓导鈧柤楦块哺閺呫儵寮?*/

.incense-spark {

    position: absolute;

    width: 4.8px;

    height: 7.2px;

    background: radial-gradient(ellipse at center, 

        rgba(255, 200, 255, 1) 0%, 

        rgba(230, 150, 255, 0.9) 25%, 

        rgba(200, 100, 255, 0.8) 50%, 

        rgba(170, 50, 255, 0.6) 75%, 

        transparent 100%);

    border-radius: 50% 50% 30% 30%;

    animation: sparkFlicker 1s infinite ease-in-out alternate;

    filter: blur(0.3px);

    z-index: 1001;

    left: calc(50% - 4px);

    bottom: 128px; /* 闁烩晝枪椤曨喗绂嶆惔顭戞禈闁告粌鑻惃顒勬倶椤愩垹甯ㄩ悗鍦嚀濞呮帗鎯旈弴銏犲姤 */

    box-shadow: 0 0 4px rgba(200, 100, 255, 0.8);

}



@keyframes sparkFlicker {

    0%, 100% {

        transform: scale(0.9) translateY(0px);

        opacity: 0.8;

    }

    50% {

        transform: scale(1.2) translateY(-2px);

        opacity: 1;

    }

}

/* Kb:gO\妤?N鐟曞P
NMOn閸?*N鐠?_姒??*/
.floating-nav {
    position: fixed;
    bottom: 150px;
    right: 15px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 60px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: 2px solid #FF8C00;
    border-radius: 12px;
    text-decoration: none;
    color: #8B0000;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


.nav-item:hover {
    transform: scale(1.1);
    color: #FFF;
    box-shadow: 0 6px 12px rgba(255, 140, 0, 0.5);
    background: linear-gradient(135deg, #FF6347, #FFD700);
}

.nav-icon {
    font-size: 18px;
    margin-bottom: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-text {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}


/* yr婵?h_ */
.nav-you {
    background: linear-gradient(135deg, #4169E1, #00BFFF);
    border-color: #1E90FF;
}

.nav-you:hover {
    background: linear-gradient(135deg, #00BFFF, #87CEEB);
}

.nav-sheng {
    background: linear-gradient(135deg, #32CD32, #00FF00);
    border-color: #228B22;
}

.nav-sheng:hover {
    background: linear-gradient(135deg, #00FF00, #90EE90);
}


/* 閳?uHe濞?*/
.nav-item {
    animation: navPulse 2s ease-in-out infinite;
}

.nav-item:nth-child(2) {
    animation-delay: 1s;
}

@keyframes navPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 閾撴垶鎽?_缁躲儺鏀?*/
@media screen and (max-width: 768px) {
    .floating-nav {
        bottom: 140px;
        right: 10px;
    }
    
    .nav-item {
        width: 45px;
        height: 55px;
        font-size: 12px;
    }
    
    .nav-icon {
        font-size: 16px;
    }
    
    .nav-text {
        font-size: 10px;
    }
}


@media screen and (max-width: 480px) {
    .floating-nav {
        bottom: 120px;
        right: 8px;
        gap: 6px;
    }
    
    .nav-item {
        width: 40px;
        height: 50px;
        font-size: 11px;
    }
    
    .nav-icon {
        font-size: 14px;
    }
    
    .nav-text {
        font-size: 9px;
    }
}


/* 闁归潧顑嗗┃鈧悘鐐茬箰瑜板憡绋夌€ｎ収娼￠柛瀣箣缁楀倹鎷呭鍥╂瀭闁?濞戞搩浜為悵顐㈩嚕韫囨搩鍤ら柤?- 閻忓繐绻愬〒鎹愩亹閵徛ょ獥闁艰鐓￠ˉ鎾诲冀?*/
/* 手机版浮动导航 - 移除桌面版，只针对手机设计 */
/* 浮动导航独立容器样式 */
.floating-nav-top {
    position: fixed;
    z-index: 10000;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.floating-nav-bottom {
    position: fixed;
    z-index: 10000;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 保留原有样式以防兼容性问题 */
.floating-nav {
    position: fixed;
    z-index: 1000;
    display: flex !important;
    flex-direction: column;
    gap: 35px; /* "游"和"胜"之间增加更明显间距 */
    /* 位置由JavaScript动态设置，确保与福报菜单完全水平对齐 */
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; /* 增加20%：28px * 1.2 = 33.6px ≈ 34px */
    height: 34px; /* 增加20%：28px * 1.2 = 33.6px ≈ 34px */
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px; /* 相应增大字体：12px * 1.2 = 14.4px ≈ 14px */
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-weight: 300;
}

.nav-item:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(124, 252, 0, 0.3), rgba(144, 238, 144, 0.4));
    border-color: rgba(124, 252, 0, 0.6);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(124, 252, 0, 0.3);
}

/* 闁告ḿ绮敮鈧柣妤勵潐閻ｂ晜锛愬⿰鍡楊棌闁挎稑鐬肩划鐑樼▔閳ь剚鎷呯捄銊︽殢婵烇饥銈咁棌闂侇偄绻戝Σ鎴烆槹鎼淬垻澹?- 默认草绿色背景，悬停透明效果 */
.nav-you, .nav-sheng {
    background: linear-gradient(135deg, rgba(124, 252, 0, 0.3), rgba(144, 238, 144, 0.4));
    border-color: rgba(124, 252, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

.nav-you:hover, .nav-sheng:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* 缂佺姭鍋撻柛鏍ㄧ墪婵晠鎮界紒妯绘珡闁?*/
.nav-item {
    animation: navGlow 3s ease-in-out infinite;
}

.nav-item:nth-child(2) {
    animation-delay: 1.5s;
}

@keyframes navGlow {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* 浮动导航已优化为手机版，移除了桌面版和响应式断点 */


/* ȷ�����������������豸�϶���ʾ */
@media screen and (max-width: 768px) {
    .floating-nav, .floating-nav-top, .floating-nav-bottom {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .nav-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 480px) {
    .floating-nav, .floating-nav-top, .floating-nav-bottom {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .nav-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}