/* 竞猜系统导航栏样式 - 手机端专用设计 */

.main-nav {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

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

    backdrop-filter: blur(15px);

    border-bottom: 1px solid rgba(255, 123, 84, 0.3);

    z-index: 2000;

    padding: 0;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

}



.nav-container {

    width: 100%;

    margin: 0 auto;

    padding: 0 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 60px;

    box-sizing: border-box;

}



/* 左列：品牌 */

.nav-brand-column {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-shrink: 0;

    min-width: 80px;

}



.nav-brand {

    font-size: 18px;

    font-weight: bold;

    color: #ff7b54;

    text-decoration: none;

    line-height: 1.2;

    text-align: center;

    display: block;

}



/* 右列：导航类别 */

.nav-categories-column {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 6px;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

}



.nav-categories-column::-webkit-scrollbar {

    display: none;

}



.nav-category {

    flex-shrink: 0;

    display: flex;

    align-items: center;

}



.nav-link {

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 8px 10px;

    border-radius: 12px;

    text-decoration: none;

    color: #555;

    font-size: 13px;

    font-weight: 500;

    transition: all 0.2s ease;

    background: rgba(255, 123, 84, 0.05);

    border: 1px solid rgba(255, 123, 84, 0.1);

    white-space: nowrap;

    min-height: 36px;

    box-sizing: border-box;

}



.nav-link:hover,

.nav-link:active {

    background: rgba(255, 123, 84, 0.15);

    color: #ff7b54;

    border-color: rgba(255, 123, 84, 0.3);

    transform: translateY(-1px);

    box-shadow: 0 2px 8px rgba(255, 123, 84, 0.2);

}



.nav-link.logout {

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

    color: #ff7b54;

    border-color: rgba(255, 123, 84, 0.2);

}



.nav-link.logout:hover,

.nav-link.logout:active {

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

    border-color: rgba(255, 123, 84, 0.4);

}



.nav-icon {

    font-size: 14px;

    flex-shrink: 0;

}



/* 为导航栏留出空间 */

body {

    padding-top: 80px !important;

}



/* 调整原有容器位置 */

.gif-container {

    top: 121px !important;

}



/* 蜡烛容器现在基于供桌图片定位，不再需要固定底部位置 */



.bottom-image {

    bottom: 82px !important;

}



.altar-right-menu {

    top: calc(50% + 185px) !important;

}



/* ========== 手机端优化 ========== */



/* 中等屏幕手机 (375px - 480px) */

@media (max-width: 480px) {

    .nav-container {

        padding: 0 12px;

        height: 55px;

    }

    

    .nav-brand {

        font-size: 16px;

    }

    

    .nav-categories-column {

        gap: 5px;

    }

    

    .nav-link {

        padding: 7px 9px;

        font-size: 12px;

        gap: 3px;

        min-height: 34px;

    }

    

    .nav-icon {

        font-size: 13px;

    }

    

    body {

        padding-top: 75px !important;

    }

    

    .gif-container {

        top: 116px !important;

    }

    

    .candles-container {

        bottom: 365px !important;

    }

    

    .bottom-image {

        bottom: 87px !important;

    }

    

    .altar-right-menu {

        top: calc(50% + 190px) !important;

    }

}



/* 小屏手机 (320px - 375px) */

@media (max-width: 375px) {

    .nav-container {

        padding: 0 10px;

        height: 50px;

    }

    

    .nav-brand {

        font-size: 14px;

    }

    

    .nav-categories-column {

        gap: 4px;

    }

    

    .nav-link {

        padding: 6px 8px;

        font-size: 11px;

        gap: 2px;

        min-height: 32px;

        border-radius: 10px;

    }

    

    .nav-icon {

        font-size: 12px;

        display: none; /* 在小屏上隐藏图标 */

    }

    

    body {

        padding-top: 70px !important;

    }

    

    .gif-container {

        top: 111px !important;

    }

    

    .candles-container {

        bottom: 370px !important;

    }

    

    .bottom-image {

        bottom: 92px !important;

    }

    

    .altar-right-menu {

        top: calc(50% + 195px) !important;

    }

}



/* 超小屏手机 (小于320px) */

@media (max-width: 320px) {

    .nav-container {

        padding: 0 8px;

        height: 48px;

    }

    

    .nav-brand {

        font-size: 13px;

    }

    

    .nav-categories-column {

        gap: 3px;

    }

    

    .nav-link {

        padding: 5px 7px;

        font-size: 10px;

        min-height: 30px;

        border-radius: 8px;

    }

    

    body {

        padding-top: 68px !important;

    }

    

    .gif-container {

        top: 109px !important;

    }

    

    .candles-container {

        bottom: 372px !important;

    }

    

    .bottom-image {

        bottom: 94px !important;

    }

    

    .altar-right-menu {

        top: calc(50% + 197px) !important;

    }

}