@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: 'Roboto', 'Roboto Flex', 'Noto Sans CJK SC', 'HarmonyOSHans', 'Noto Sans SC', 'Segoe UI Variable Text', 'Roboto Flex', 'Roboto', 'Segoe UI', 'Inter', 'Sarasa UI SC', 'PingFang SC', 'Microsoft Yahei UI', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
}

#top-bar {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(30px) saturate(200%);
}

.btn-pink{
    /* 窄屏右上角的折叠按钮：原来用 #f069ac，色相偏品红（看着发紫），
       改成与导航「主页」按钮一致的珊瑚粉 #ff6685 */
    background-color: #ff6685 !important;
    border: none;
}

#what-can-i-do {
    background: linear-gradient(120deg, #EA5455 0, #FEB692 140%);
}

#pdtp {
    padding-top: 6rem !important;
}

#music-favorite {
    background-image: url("../../img/bg_music.jpg");
    background-size: 100%;
    background-repeat: space;
}

#game-favorite {
    background-image: url("../../img/panorama_0_legacy.jpg");
    background-size: 100%;
    background-repeat: space;
}

.text-pink {
    color: #e3599e;
}

#focus-favorite {
    background: linear-gradient(120deg, #2d6fbb 0, #4fd1ff 150%);
}

#my-isp {
    background: linear-gradient(120deg, #1f7d45 0, #38c16a 120%);
}

.btn-primary {
    background-color: #e3599e;
    border: #e3599e;
}

.btn-primary:hover {
    background-color: #7f1b83;
    border: #7f1b83;
}

/* 「表情包与皮肤包」下载区在手机上的内边距： 
   宽屏时是 col-md-12 → row(p-5) → col-md-6 → 小卡片(p-4)，每层都加一点边距，
   手机上累计吃掉近 220px，小卡片里的说明文字只剩 150px 左右，一行写不了几个字。
   窄屏（<768px）逐层收紧，并保持小卡片左右留白对称；宽屏外观不受影响。 */
@media (max-width: 767.98px) {
    #downloads .p-5 {
        padding: 1.25rem !important;
        /* p-5：3rem → 1.25rem */
    }

    #downloads .p-4 {
        padding: 1rem !important;
        /* p-4：1.5rem → 1rem */
    }

    #downloads .row.g-4 {
        /* 内层栅格行同时被 .row 的负 margin 和 .row > * 的栅格内边距各吃一次，
           手机上又少掉 16px，这里一起归零；卡片之间的间距交给 g-4 的纵向 gutter。
           1.5rem → 0，左右留白由外面大卡（.p-5）统一保证。 */
        --bs-gutter-x: 0;
        --bs-gutter-y: 1rem;
        margin-left: 0;
        margin-right: 0;
    }
}

/* 「表情包与皮肤包」卡片里的皮肤预览：
   源图是 64×64 的皮肤贴图，放大 2 倍并做像素化渲染，放大后依然清晰不糊。 */
#skin-preview {
    width: 128px;
    height: 128px;
    flex: none;
    image-rendering: pixelated;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 0.6rem;
    box-shadow: 0 1px 5px rgba(26, 29, 32, 0.2);
}