#upper-menu .Chinese {
    color: #EEE9DB;
    font-family: "ChillDINGothic";
    font-size: 29.538px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -1.477px;
    margin: 0;

    /* font-family: FZJunHeiS-B-GB; */
}

#upper-menu .English {
    color: #EEE9DB;
    font-family: "Barlow Condensed";
    font-size: 21.846px;
    font-style: normal;
    font-weight: 600;
    /* 253.521% */
    letter-spacing: -0.437px;
    margin: 0;
}

#upper-menu p {
    color: #392F17;
    font-family: "Barlow Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    /* 253.521% */
    letter-spacing: -0.437px;
}

#side-menu {
    --menu-min-width-default: 366px;
    --menu-gap-default: 12px;
    --menu-align-default: center;
    --menu-min-width: var(--menu-min-width-default);
    --menu-gap: var(--menu-gap-default);
    --menu-align: var(--menu-align-default);
    position: fixed;
    left: 3vw;
    bottom: 2.8vh;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: var(--menu-align);
    z-index: 11000;
    gap: var(--menu-gap);
    min-width: var(--menu-min-width);
    user-select: none;
    position: fixed;
}

#side-menu::before {
    content: "";
    position: absolute;
    top: -36px;
    right: -36px;
    bottom: -36px;
    left: -36px;
    pointer-events: none;
}

#side-menu.menu-compact {
    --menu-min-width: auto;
    --menu-gap: 0;
    --menu-align: flex-start;
    width: auto;
    /* align-items: flex-start; */
}

/* #side-menu #buttons {
    transition: opacity 0.45s ease, transform 0.45s ease;
} */

#side-menu .menu-part {
    transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    transform: translateY(0);
    opacity: 1;
}

#side-menu.menu-compact .menu-part {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transform: translateY(8px);
}

#side-menu.menu-compact:hover {
    --menu-min-width: var(--menu-min-width-default);
    --menu-gap: var(--menu-gap-default);
    --menu-align: var(--menu-align-default);
    width: auto;
}

#side-menu.menu-compact:hover #buttons {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
}

#side-menu.menu-compact:hover #lower-menu {
    opacity: 1;
    pointer-events: auto;
    height: 37px;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
}

#side-menu.menu-compact:hover #year-menu {
    opacity: 1;
    pointer-events: none;
    height: 37px;
    margin: 8px 0 0;
    padding: 0;
    overflow: visible;
    transform: none;
}

#side-menu.menu-compact .menu-part.menu-part--keep {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    margin: initial;
    padding: initial;
    overflow: visible;
    transform: none;
}




#language-icon{
    width: 22px;
    height: 22px;
    margin: 0 0 0 0;
    cursor: pointer;
    transition: filter 0.2s;
}
#shuffle-icon{
    width: 24px;
    height: 24px;
    margin: 0 0 0 0;
    cursor: pointer;
    transition: filter 0.2s;
}
#search-icon{
    width: 18px;
    height: 18px;
    margin: 0 0 0 0;
    cursor: pointer;
    transition: filter 0.2s;
}


#upper-menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* 左右贴边 */
    align-items: center;
    /* 垂直居中 */
}

#dunes-icon {
    display: flex;
    flex-direction: column;
}



#upper-menu .small-icon {
    width: 36px;
    height: 36px;
    background-color: #EEE9DB;
    border-radius: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
}

#upper-menu #about-button {
    width: 66px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 22.733px;
    background: #EEE9DB;

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

    text-align: center;
    /* 文字水平居中（备用） */
}


#buttons {
    display: flex;
    gap: 8px;
    flex-direction: row;
}



#lower-menu {
    width: 366px;
    height: 37px;
    display: flex;
    gap:20px;
    align-items: center;
    justify-content: center;
    border-radius: 22.733px;
    background: #EEE9DB;
}

#scaleContainer {
    position: relative;
    width: 255px;
    height: 32px;
    flex-shrink: 0;
}

.scale-line {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    height: 1.37px;
    background-color: #392F17;
    transform: translateY(-50%);
}

.scale-numbers,
.scale-ticks {
    position: absolute;
    top: 28%;
    /* 对数字可调 */
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.scale-numbers span {
    position: absolute;
    top: -30%;
    transform: translateX(-50%);
    /* 让数字中心对齐刻度线 */
    color: #392F17;
    text-align: center;
    font-family: "Barlow Condensed";
    font-size: 13.778px;
    font-style: normal;
    font-weight: 500;
    /* 900% */
}

.scale-indicator {
    position: absolute;
    top: 80%;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: #392F17;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}

.scale-ticks div {
    position: absolute;
    width: 1.37px;
    height: 8px;
    background-color: black;
    top: 50%;
    /* 放在横线上方 */
    transform: translateX(-50%) translateY(-100%);
    /* 中心对齐 */
}

#indicator {
    cursor: grab;
}

#indicator.dragging {
    cursor: grabbing;
}



/* Year Filter Slide Bar */
#year-menu {
    width: 366px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22.733px;
    background: #EEE9DB;
    margin-top: 8px; 
}

#yearContainer {
    position: relative;
    width: 366px;
    height: 37px;
    flex-shrink: 0;
    border-radius: 37px;
    overflow: hidden;
}

.year-segments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

.year-segment {
    flex: 1;
    height: 100%;
    transition: opacity 0.3s ease;
}

.year-segment:nth-child(1) { background-color: #F9D67A; } /* 空白 - Light blue */
.year-segment:nth-child(2) { background-color: #FADD91; } /* 1700 - Blue */
.year-segment:nth-child(3) { background-color: #FAE2A5; } /* 1800 - Medium blue */
.year-segment:nth-child(4) { background-color: #FAE8BA; } /* 1850 - Teal blue */
.year-segment:nth-child(5) { background-color: #FAEED0; } /* 1900 - Dark teal */
.year-segment:nth-child(6) { background-color: #F9F3E3; } /* 1950 - Darker teal */

.year-segment.faded {
    opacity: 0.3;
}

/* Vertical tick marks */
.year-ticks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.year-ticks div {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #392F17;
    top: 0;
    transform: translateX(-50%);
}

/* Year numbers */
.year-numbers {
    position: absolute;
    top: 1px;
    left: -14px;
    width: 100%;
    height: 20px;
    pointer-events: none;
}

.year-numbers span {
    position: absolute;
    transform: translateX(-50%);
    color: #392F17;
    text-align: center;
    font-family: "Barlow Condensed";
    font-size: 13.778px;
    font-style: normal;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.year-numbers span.faded {
    opacity: 0.3;
}

/* Year indicator */
.year-indicator {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    background-color: #392F17;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.year-indicator:hover {
    background-color: #2C2419;
}

.year-indicator.dragging {
    cursor: grabbing;
}

#yearIndicator {
    cursor: grab;
}

/* Match small buttons hover cursor */
#upper-menu #about-button,
#upper-menu #about-button * {
    cursor: pointer;
}