/* ==========================
   底部導覽列
========================== */

.bottom-nav {
    position: absolute;

    left: 50%;
    bottom: 2.5%;

    transform: translateX(-50%);

    z-index: 20;

    width: min(760px, 88vw);
    height: 74px;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    padding: 7px 12px;

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

    border-radius: 24px;

    background:
        rgba(255, 250, 240, 0.84);

    backdrop-filter: blur(12px);

    box-shadow:
        0 8px 25px rgba(55, 40, 25, 0.18);
}


/* 每個按鈕 */

.nav-item {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 3px;

    border: none;

    border-radius: 17px;

    background: transparent;

    color: #8a7d70;

    cursor: pointer;
	
	text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.nav-item:hover {
    transform: translateY(-3px);

    background:
        rgba(255, 255, 255, 0.6);
}


/* 首頁選取狀態 */

.nav-item.active {
    color: #574a3e;

    background:
        rgba(214, 195, 166, 0.35);
}


/* 圖示 */

.nav-icon {
    font-size: 23px;

    line-height: 1;
}

.nav-label {
    font-size: 12px;

    letter-spacing: 0.08em;
}


/* 通知紅點 */

.notification-dot {
    position: absolute;

    top: 8px;
    left: calc(50% + 9px);

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #b95f58;

    box-shadow:
        0 0 0 2px rgba(255, 250, 240, 0.9);
}

/* 僅在存檔受限時顯示，不遮住遊戲的操作按鈕。 */
.progress-warning {
    position: fixed;
    left: 50%;
    bottom: 112px;
    transform: translateX(-50%);
    z-index: 10010;
    width: min(520px, 88vw);
    padding: 10px 14px;
    border: 1px solid #b99370;
    border-radius: 12px;
    background: #fff7e8;
    color: #6c4932;
    font: 13px/1.6 "Microsoft JhengHei", sans-serif;
    box-shadow: 0 3px 15px rgba(60, 45, 30, .15);
    pointer-events: none;
}


.progress-warning button {
    pointer-events: auto;
    margin-left: 10px;
    border: 1px solid #b99370;
    border-radius: 8px;
    padding: 3px 8px;
    background: #fffdf7;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.bottom-nav { transition: opacity .3s ease, transform .3s ease, visibility .3s ease; }
.bottom-nav.explore-hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) translateY(25px);
}