:root {
    --accent-color: #37a7ca;
    --default-bg-color: linear-gradient(180deg, #0f172a 0%, #000000 100%);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.environment-bg{
    background-color: var(--theme-color, var(--default-bg-color));
}

.btn {    
    transition: all 0.1s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover {    
    transform: scale(1.1);
}
.btn:active {
    transform: scale(0.9);
}

.page{
    width: 100%;
    min-height: 100vh; 
    height: auto;
    position: relative;
    container-type: inline-size;
}
.page,main{
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.catalog-nav {
    width: 100%;
    aspect-ratio: 1170 / 120;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    padding: 0 4cqw;
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn {
    color: white;
    text-decoration: none;
    font-size: 3cqw;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 2cqw;
    .icon{
        font-size: 4cqw;
        padding-bottom: 8%;
    }
}
.back-btn:active{
    color: rgb(66, 66, 66);
}
.nav-title {
    flex: 1;
    text-align: center;
    color: white;
    font-size: 5cqw;
    letter-spacing: 2px;
    margin-right: 12cqw; 
}

.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5cqw;
}
/* ========== SHADOW BUTTON 帶陰影的按鈕&動態 ========== */
.shadow-btn {
    width: 85cqw;
    padding: 3cqw;
    background-color: white;
    border: 0.26cqw solid #333;
    border-radius: 1cqw;
    color: #555;
    font-size: 3.2cqw;
    font-weight: bold;
    cursor: pointer;
    
    /* 1. 進入動畫：使用 forwards 停在有陰影的狀態 */
    animation: shadow-pop-br-custom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    
    /* 2. 只保留背景變色的 transition，移除對 transform 的干擾 */
    transition: background-color 0.1s ease;
    
    /* 3. 確保點擊時不會有藍色高亮 */
    -webkit-tap-highlight-color: transparent;
    
    /* 4. 繼承主題延遲 */
    animation-delay: var(--theme-animation-delay);
}

/* 移除重複的 :hover 定義，改為簡單的視覺回饋 */
.shadow-btn:hover {
    background-color: #fafafa;
}

/* 點擊瞬間的回饋：強制取消動畫，瞬間壓平按鈕 */
.shadow-btn:active {
    animation: none !important; 
    
    transform: translate(0, 0) !important;
    box-shadow: 0 0 transparent !important;

    background-color: #e6e6e6;
}

@keyframes shadow-pop-br-custom {
  0% {
    box-shadow: 0 0 var(--theme-color);
    transform: translate(0, 0);
  }
  100% {
    /* 使用 cqw 確保在不同寬度下比例一致 */
    box-shadow: 1.5cqw 1.5cqw 0px var(--theme-color); 
    transform: translate(-1.5cqw, -1.5cqw);
  }
}



/* ========== 主題設定 ========== */
.theme-a { --theme-color: #70c4c7;} /* 水藍色 */
.theme-b { --theme-color: #abc636;} /* 嫩綠色 */
.theme-c { --theme-color: #ea7725;} /* 暖橘色 */