/* =============================================================================
   my-style.css —— 你的自訂樣式（載入順序最後，所以這裡的設定會蓋過其他 css 檔）
   本次調整的三件事都集中在這裡，要改外觀先改這個檔案就对了：
     1. 顯示字體（標題／副標題）
     2. 聯絡我的四個卡片
     3. 搬到側欄的音樂播放器
     4. 導覽列（舊版外觀：純文字 + 光條）與右側小頁面（分頁）
     5. 作品網格固定一排 3 格
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. 顯示字體（全站）＝ jf open 粉圓 2.1
   ---------------------------------------------------------------------------
   來源：material/jf-openhuninn-2.1.ttf（4,911,464 B）
   網頁檔：assets/fonts/jf-openhuninn-2.1.woff2（2,180,556 B，用 tools\convert-font.py 轉的，只剩 44%）
   換字：把新字型丟進 assets/fonts/，改下面 @font-face 的 font-family 與 src，
         再把 --display-font 的第一項改成那個名字即可（要轉 woff2：python tools\convert-font.py 來源.ttf）。
   字重：這個字型只有一種字重。--display-weight 500 以下＝直接用原字（清晰）；
         600/700＝瀏覽器「合成假粗體」，大字容易糊，喜歡粗一点再改回去。
   想換回原本的字：--display-font 改成 'Noto Sans TC', 'Microsoft JhengHei', sans-serif
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'jf open 粉圓 2.1';
    src: url('../assets/fonts/jf-openhuninn-2.1.woff2') format('woff2');
    /* 需要支援很舊的瀏覽器才再加 TTF fallback（那份 4.9 MB，正常不用） */
    font-weight: 400;
    font-style: normal;
    font-display: swap;      /* 先讓文字出現，字型抓完再換（不會白屏） */
}

:root {
    --display-font: 'jf open 粉圓 2.1', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
    --display-weight: 500;
}

.title-card .title-wrap,
.subtitle-card .subtitle-wrap {
    font-family: var(--display-font);
}

.title-card .title-wrap {
    font-weight: var(--display-weight);
    letter-spacing: 2px;
}

.subtitle-card .subtitle-wrap {
    /* 只有一種字重：500 不會被合成假粗體（要粗改成 700，但大字會糊） */
    font-weight: 500;
    letter-spacing: 1px;
}

/* 標題裡那段英文（Xiaohu Server）用較窄的字重比較接近原設計 */
.subtitle-card .subtitle-name {
    font-weight: 500;
}

/* 全站内地与标题保持同一套繁体字体（思源黑體） */
body {
    font-family: var(--display-font);
}

/* -----------------------------------------------------------------------------
   2. 聯絡我：四個卡片（內容來自 site-data.js → contact_cards）
   -------------------------------------------------------------------------- */
.link-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.link-card,
a.link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    min-width: 0;
}

.link-card:hover,
.link-card:focus-visible {
    transform: translateY(-2px);   /* 只有位移（不影响别的元素位置），要完全不动就改成 0 */
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(var(--accent-rgb, 120, 190, 255), 0.45);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    outline: none;
}

.link-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.link-card-icon svg {
    width: 19px;
    height: 19px;
    display: block;
}

.link-card-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.link-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.link-card-label {
    font-size: 11px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.5);
}

.link-card-value {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 只剩一张卡时才整幅（两张以上交给第 13 节的 2 栏 / 手机单栏） */
.link-cards:has(.link-card:first-child:last-child) {
    grid-template-columns: 1fr;
}

@media (max-width: 620px) {
    .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .link-card { padding: 10px; }
    .link-card-icon { width: 32px; height: 32px; }
}

@media (max-width: 640px) {
    /* 手機／窄視窗：四個框框一排一個，網址就不會被掐斷 */
    .comms-grid--single .link-cards { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 420px) {
    .link-cards { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   3. 側欄版音樂播放器（原本是 fixed 在右下角的膠囊）
   -------------------------------------------------------------------------- */
.sidebar .music-player,
.music-player--side {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "cover info"
        "ctrl  ctrl"
        "bar   bar";
    gap: 10px 12px;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.sidebar .music-player:hover,
.music-player--side:hover {
    transform: none;
}

.music-player--side.show-progress {
    padding-bottom: 12px;
    border-radius: 16px;
}

.music-player--side .music-cover { grid-area: cover; }
.music-player--side .music-info { grid-area: info; align-self: center; }
.music-player--side .music-controls { grid-area: ctrl; justify-content: center; width: 100%; }

/* 進度條改為常駐，不再需要點擊才顯示 */
.music-player--side .music-progress-wrap {
    grid-area: bar;
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* 播放中讓封面轉動（原本只有右下角版有類似效果） */
.music-player--side.playing .music-cover img {
    animation: musicCoverSpin 8s linear infinite;
}

@media (max-width: 480px) {
    .sidebar .music-player,
    .music-player--side {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        padding: 12px;
        gap: 10px 12px;
    }
}
/* -----------------------------------------------------------------------------
   4. 導覽列樣式（舊版外觀：純文字 + 左側光條，但項目之間保留间距）
   --------------------------------------------------------------------------
   光條位置由 js/main.js 的 updateGlider() 計算，靠的是「每項高度相同」，
   所以這裡只用 padding 拉開距離，不要用 gap / margin。
   想完全回到原本的距離：把下面 label 的 padding 改回 1rem 即可。
   -------------------------------------------------------------------------- */
.radio-container {
    padding-left: 0.5rem;
}

.radio-container label {
    padding: 1.35rem 1rem;
    font-size: 15px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.52);
    transition: color 0.3s ease, transform 0.3s ease;
}

.radio-container label:hover {
    color: rgba(255, 255, 255, 0.85);
    transform: translateX(3px);
}

.radio-container input:checked + label {
    color: #fff;
}

/* 手機版維持直欄（光條是垂直定位，橫排會錯位） */
@media (max-width: 900px) {
    .radio-container {
        flex-direction: column;
        padding-left: 0.5rem;
    }
    .radio-container label {
        padding: 1rem;
        font-size: 14px;
    }
}
/* -----------------------------------------------------------------------------
   5. 右側小頁面（.tab-panel）：一次只显示一個
   -------------------------------------------------------------------------- */
.tab-panels {
    margin-top: 6px;
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
    animation: tabFadeIn 0.34s ease;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* （導覽在手機版也保持直欄，才能讓左側光條對準項目） */
/* -----------------------------------------------------------------------------
   6. 作品網格：一排 3 格（窄螢幕自動變 2 格 / 1 格）
   -------------------------------------------------------------------------- */
.projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}
/* -----------------------------------------------------------------------------
   7. 聯絡頁：電子郵件回覆已移除 → 聯絡方式改用整欄寬度，框框放大好點
   -------------------------------------------------------------------------- */
.comms-grid--single {
    grid-template-columns: 1fr !important;
}

.comms-grid--single .comms-divider {
    display: none;
}

/* 四個框框：寬的時候排 2×2（每格夠寬，網址不會被壓到換行醜醜）
   想改成一排四個：把下面 repeat(2, minmax(0, 1fr)) 改成 repeat(4, minmax(0, 1fr)) */
.comms-grid--single .link-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.comms-grid--single .link-card {
    min-width: 0;                 /* 讓格子可以被壓縮，長網址不會撐破欄位 */
}

.comms-grid--single .link-card-value {
    overflow-wrap: break-word;    /* 很長的網址才換行，不會把 username 這種字掐中斷 */
}

.link-card {
    padding: 14px 16px;
}

.link-card-value {
    font-size: 14px;
    white-space: normal;
    word-break: break-all;
}
/* -----------------------------------------------------------------------------
   8. 專案卡片圖示：改用各站台自己的圖示（favicon / icon.png）
   --------------------------------------------------------------------------
   產生規則：project/某專案/ 裡只要有 icon.png、favicon.ico、logo.png 之类，
   或 project.json 寫 "icon_img": "xxx.png"，「更新清單.bat」就會自動帶進去。
   圖檔不見時會自動退回內建的線條圖示（不會出現破圖）。
   -------------------------------------------------------------------------- */
.project-icon--img {
    background: transparent;
    border: none;
    box-shadow: none;
}

.project-icon--img img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    /* 深底上白底的 icon 也能看見 */
    background: rgba(255, 255, 255, 0.92);
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.project-item:hover .project-icon--img img {
    transform: translateY(-2px) scale(1.04);
    transition: transform 0.25s ease;
}

/* ---------------------------------------------------------------------------
   9. 音樂播放器 → 液態玻璃（Liquid Glass）
   ---------------------------------------------------------------------------
   想微调的地方：
   --lg-tint   玻璃本身的白度（越大越白、越看不清背景）
   --lg-blur   背后模糊强度（px）
   --lg-sat    背景色彩饱和（%），越大越艳
   --lg-border 边框高光
   --lg-radius 圆角
   浏览器不支持 backdrop-filter 时会自动退回「较不透明的深色玻璃」（见文末 @supports）
   --------------------------------------------------------------------------- */
.sidebar .music-player.music-player--side {
    --lg-tint: 0.16;
    --lg-blur: 20px;
    --lg-sat: 170%;
    --lg-border: rgba(255, 255, 255, 0.30);
    --lg-radius: 22px;

    position: relative;
    isolation: isolate;
    padding: 14px;
    gap: 12px;
    border-radius: var(--lg-radius);
    border: 1px solid var(--lg-border);
    background:
        linear-gradient(150deg,
            rgba(255, 255, 255, calc(var(--lg-tint) + 0.10)) 0%,
            rgba(255, 255, 255, calc(var(--lg-tint) - 0.04)) 42%,
            rgba(148, 197, 255, calc(var(--lg-tint) + 0.02)) 100%),
        rgba(18, 22, 34, 0.30);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 1px 0 0 rgba(255, 255, 255, 0.12),
        inset -1px 0 0 rgba(255, 255, 255, 0.12),
        0 12px 34px rgba(0, 0, 0, 0.38),
        0 2px 10px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 流动的高光（玻璃表面的反射） */
.sidebar .music-player.music-player--side::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 160%;
    background:
        radial-gradient(60% 45% at 18% 12%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(45% 40% at 82% 8%, rgba(170, 215, 255, 0.30) 0%, rgba(255, 255, 255, 0) 60%);
    filter: blur(6px);
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
    animation: lgSheen 9s ease-in-out infinite;
}

/* 底部一团慢慢游动的光晕，模拟玻璃折射 */
.sidebar .music-player.music-player--side::after {
    content: "";
    position: absolute;
    left: -25%;
    bottom: -55%;
    width: 80%;
    height: 120%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(120, 190, 255, 0.35) 0%, rgba(120, 190, 255, 0) 70%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
    animation: lgDrift 14s ease-in-out infinite;
}

.sidebar .music-player.music-player--side > * {
    position: relative;
    z-index: 3;
}

@keyframes lgSheen {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.8; }
    50%      { transform: translate3d(6%, 4%, 0) rotate(1.5deg); opacity: 1; }
}

@keyframes lgDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(55%, -12%, 0) scale(1.15); }
}

/* 封面：玻璃圆环 + 高光 */
.music-player--side .music-cover {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 2px 6px rgba(255, 255, 255, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.30);
}

.music-player--side .music-cover-placeholder {
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.05) 60%);
    color: rgba(255, 255, 255, 0.75);
}

/* 歌名 / 歌手 */
.music-player--side .music-title {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.music-player--side .music-artist {
    color: rgba(255, 255, 255, 0.72);
}

/* 控制钮：一颗颗小水珠玻璃 */
.music-player--side .music-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 4px rgba(0, 0, 0, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.22s ease, box-shadow 0.22s ease;
}

.music-player--side .music-btn:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.32),
        0 0 0 3px rgba(255, 255, 255, 0.08);
}

.music-player--side .music-btn:active {
    transform: translateY(0) scale(0.96);
}

.music-player--side .music-play-btn {
    width: 42px;
    height: 42px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.14) 55%, rgba(150, 200, 255, 0.22));
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.75),
        inset 0 -3px 6px rgba(0, 0, 0, 0.20),
        0 6px 18px rgba(0, 0, 0, 0.34);
}

/* 进度条：玻璃凹槽 + 流动填充 */
.music-player--side .music-progress-wrap {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    margin-top: 2px;
}

.music-player--side .music-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #8ad6ff 0%, #a78bfa 55%, #ffd9a0 100%);
    box-shadow: 0 0 10px rgba(150, 200, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
}

/* 原本 ::after 是端点小白点 → 这里同时当流动光泽用 */
.music-player--side .music-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: lgFlow 2.6s linear infinite;
}

@keyframes lgFlow {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.music-player--side.playing .music-progress-bar::after {
    opacity: 1;
}

.music-player--side:not(.playing) .music-progress-bar::after {
    animation-play-state: paused;
    opacity: 0.25;
}

/* 悬停时玻璃更亮一点、微微浮起 */
.music-player--side:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
        0 16px 40px rgba(0, 0, 0, 0.44),
        0 3px 12px rgba(0, 0, 0, 0.26);
}

/* 不支持背景模糊的浏览器：改成较不透明的深色玻璃，保证文字可读 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .sidebar .music-player.music-player--side {
        background: linear-gradient(150deg, rgba(58, 66, 88, 0.94), rgba(24, 28, 40, 0.94));
    }
}

/* 减少动态偏好：停在静止状态 */
@media (prefers-reduced-motion: reduce) {
    .sidebar .music-player.music-player--side::before,
    .sidebar .music-player.music-player--side::after,
    .music-player--side .music-progress-bar::after,
    .music-player--side .music-btn {
        animation: none;
        transition: none;
    }

    /* 簽名本來靠 sigIn 淡入（基礎值 opacity:0）；動畫被關掉時要直接顯示出來 */
    .avatar-signature,
    .avatar-signature--mobile {
        opacity: 1;
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   10. 头像下方的手写字签名（文字 / 大小 / 角度 = site-data.js → avatar_signature）
   --------------------------------------------------------------------------- */
.avatar-signature {
    --sig-rotate: -4deg;
    font-family: 'Caveat', 'Ma Shan Zheng', 'Kaiti TC', 'DFKai-SB', cursive;
    font-size: 30px;
    line-height: 1.1;
    margin-top: 6px;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    transform: rotate(var(--sig-rotate));
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.5px;
    user-select: none;
    opacity: 0;
    animation: sigIn 1.1s 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* 中文笔画用 Ma Shan Zheng、英文数字用 Caveat：两个字型各取所需 */
.avatar-signature::after {
    content: "";
    display: block;
    width: 54%;
    height: 1px;
    margin: 4px auto 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes sigIn {
    from { opacity: 0; transform: rotate(var(--sig-rotate)) translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: rotate(var(--sig-rotate)) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-signature { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   11. 贴文空状态（posts 资料夹没有文件时）
   --------------------------------------------------------------------------- */
.posts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 42px 18px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
}

.posts-empty-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.posts-empty-icon svg {
    width: 24px;
    height: 24px;
}

.posts-empty-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.posts-empty-hint {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.posts-empty-hint code {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   12. 聯絡框框：占位时改成「点了复制」+ 待設定標記，以及复制成功的小提示
   --------------------------------------------------------------------------- */
.link-card--copy {
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: copy;
    -webkit-appearance: none;
    appearance: none;
}

.link-card--copy:hover {
    border-color: rgba(255, 255, 255, 0.34);
}

.link-card.is-placeholder {
    border-style: dashed;
}

.link-card-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 1px 7px;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    border-radius: 999px;
    color: rgba(255, 220, 150, 0.95);
    background: rgba(255, 180, 60, 0.14);
    border: 1px solid rgba(255, 200, 100, 0.35);
}

.link-card {
    position: relative;
}

.site-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 16px);
    z-index: 2000;
    max-width: 82vw;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    color: #fff;
    background: rgba(28, 32, 44, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 卡片類別改名緣由：範本 word.css 有一條 .contact-card, .contact-card:hover { padding:28px 0 0; border:none; ... }，
   與我的卡片撞名、而且載入順序在我後面，滑鼠移過去時兩套規則交替套用 → 就是你看到的「跑版」。
   現在我的卡片一律用 .link-card / .link-cards，範本那條規則再也碰不到。

   追加：avatar-card 原本是横排 flex，會把簽名挤到頭像右边 → 改成直排，簽名在正下方 */
.sidebar .avatar-card {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.avatar-signature {
    width: 100%;
    white-space: nowrap;      /* 阿孟Amon 保持在同一行 */
    margin-top: 2px;
}

@media (max-width: 900px) {
    /* 手機版侧栏隐藏时，签名跟着隐藏即可（行动版头像不重复显示签名） */
    .sidebar .avatar-signature { display: none; }
}
/* 行動版：頭像卡改成直排，讓手寫簽名排在頭像正下方 */
.mobile-avatar-card:has(.avatar-signature) {
    flex-direction: column;
    align-items: center;
}

.avatar-signature--mobile {
    margin-top: 4px;
    text-align: center;
}

@media (max-width: 900px) {
    /* 侧栏在手機版整块隐藏，改由上面这份签名显示 */
    .sidebar .avatar-signature { display: none; }
}
/* ---------------------------------------------------------------------------
   13. 聯絡框框的排列（寫在最後，一定覆蓋上面所有 grid 規則）
       想一排四個：把下面 repeat(2, minmax(0, 1fr)) 改成 repeat(4, minmax(0, 1fr))
--------------------------------------------------------------------------- */
@media (min-width: 641px) {
    .comms-grid--single .link-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 640px) {
    /* 手機／窄視窗：一排一個，網址就不會被掐成兩行 */
    .link-cards,
    .comms-grid--single .link-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ---------------------------------------------------------------------------
   14. 聯絡 / 其他連結 → 大方格（兩格一排的大卡片）
       想改回細長條：這一節在第 13 節之後，整段刪掉（或叫我改）就會變回原本長條
--------------------------------------------------------------------------- */
.comms-grid--single .link-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.comms-grid--single .link-card {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    min-height: 150px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.035) 60%,
        rgba(255, 255, 255, 0.055) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* hover 只有位移與顏色/光影，不會擠到旁邊的格子 */
.comms-grid--single .link-card:hover,
.comms-grid--single .link-card:focus-visible {
    transform: translateY(-3px);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(var(--accent-rgb, 120, 190, 255), 0.55);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
    outline: none;
}

/* 圖示放大、放左上 */
.comms-grid--single .link-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}
.comms-grid--single .link-card-icon svg { width: 28px; height: 28px; }
.comms-grid--single .link-card-icon img { width: 30px; height: 30px; }

/* 文字靠下、字級加大 */
.comms-grid--single .link-card-text { width: 100%; gap: 3px; }
.comms-grid--single .link-card-label {
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.comms-grid--single .link-card-value {
    font-size: 17px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右上角記號：有連結 = ↗（點了開新分頁）；純複製的格子 = 「複製」小膠囊
   用 absolute 定位，所以不會影響版面 */
.comms-grid--single .link-card:not(.link-card--copy)::after {
    content: "↗";
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 18px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.22s ease, transform 0.22s ease;
}
.comms-grid--single .link-card:not(.link-card--copy):hover::after {
    color: rgba(150, 205, 255, 0.95);
    transform: translate(2px, -2px);
}
.comms-grid--single .link-card--copy::after {
    content: "複製";
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* 「待設定」標記也在右上角，所以佔位時把複製膠囊讓位 */
.comms-grid--single .link-card.is-placeholder::after { display: none; }

/* 手機：仍是方格（兩格一排），只是縮小；很窄的螢幕才變一排一個 */
@media (max-width: 640px) {
    .comms-grid--single .link-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .comms-grid--single .link-card { min-height: 126px; padding: 14px; border-radius: 16px; }
    .comms-grid--single .link-card-icon { width: 44px; height: 44px; border-radius: 13px; }
    .comms-grid--single .link-card-icon svg { width: 22px; height: 22px; }
    .comms-grid--single .link-card-icon img { width: 24px; height: 24px; }
    .comms-grid--single .link-card-value {
        font-size: 13px;
        overflow-wrap: anywhere;   /* github.com/xxxx 這種長網址就自己在格子內換行 */
    }
    .comms-grid--single .link-card { min-height: 132px; }
    .comms-grid--single .link-card-label { font-size: 11px; letter-spacing: 0.8px; }
    .comms-grid--single .link-card--copy::after,
    .comms-grid--single .link-card:not(.link-card--copy)::after { display: none; }
}

@media (max-width: 380px) {
    .comms-grid--single .link-cards { grid-template-columns: 1fr; }
    .comms-grid--single .link-card { min-height: 108px; }
}

/* ---------------------------------------------------------------------------
   11. 背景防閃（JS 还没执行前不要露出作者範本的灰色斜纹）
   ---------------------------------------------------------------------------
   js/main.js 会把 .bg 填上 site-data.js 指定的背景图（桌機 4K／手機 1920）。
   在它做到之前，這裡先墊一個跟星夜圖同調的深藍色，視覺上就不會跳一下。
   要更貼圖本身的顏色，把 #0d1c3a 換成你从背景图取的色碼即可。
   --------------------------------------------------------------------------- */
.bg {
    background-color: #0d1c3a;
}

/* ---------------------------------------------------------------------------
   15. 窄螢幕（≤1024px）：導覽與音樂不能消失
       原範本在這裡把整條 .sidebar 藏掉，結果導覽列＋播放器一起跟著不見，
       小視窗／平板就變成「只能看不能換頁」。做法：
         導覽 → 貼在頂端的橫列膠囊（光條是垂直定位，這裡改用高亮膠囊）
         音樂 → 固定在底部的細長條，不吃掉閱讀空間
       想叫它回到「小螢幕也整條隱藏」：把這節整段刪掉即可。
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* .container 原本是 overflow:hidden，會讓 sticky 失效；實測各寬度都沒有橫向溢位，放開較安全 */
    .container {
        overflow: visible;
    }

    body {
        padding-bottom: 88px;   /* 預留底部播放器空間 */
    }

    .sidebar {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 60;
        width: auto;
        margin: 0 -12px 10px;
        padding: 8px 12px;
        /* ⚠ 這裡不能用 backdrop-filter / filter / transform：
           它們會把 .sidebar 變成 position:fixed 的參照容器，
           底部播放器就會以側欄為準則定位，實測跑到螢幕外（y=-46）。
           所以改用較不透明的底色，視覺上仍然是一條工具列。 */
        background: linear-gradient(180deg, rgba(9, 18, 38, 0.94), rgba(9, 18, 38, 0.86));
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* 頭像改由主內容上方的行動版頭像卡顯示，避免重複兩顆 */
    .sidebar .avatar-card {
        display: none;
    }

    /* 導覽：直欄改橫列，可換行 */
    .radio-container {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 6px;
        height: auto !important;
        padding: 0 !important;
    }
    .radio-container .glider-container {
        display: none !important;
    }
    .radio-container label {
        padding: 7px 13px !important;
        font-size: 14px !important;
        height: auto;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.70);
    }
    .radio-container label:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }
    .radio-container input:checked + label {
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }

    /* 播放器：改成貼底部的膠囊長條（原本 280x152 的方塊在小螢幕太佔空間） */
    .sidebar .music-player.music-player--side {
        position: fixed !important;
        left: 8px;
        right: 8px;
        bottom: 8px;
        top: auto !important;
        width: auto !important;
        height: auto;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        overflow: hidden;
        z-index: 70;
    }
    .sidebar .music-player--side::after {
        display: none;   /* 游動光暈是方塊版用的，長條裡會溢出 */
    }
    .sidebar .music-player--side .music-cover,
    .music-player--side .music-cover {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 auto;
    }
    .sidebar .music-player--side .music-info {
        flex: 1 1 auto;
        min-width: 0;
        order: 2;
    }
    .sidebar .music-player--side .music-title {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar .music-player--side .music-artist {
        display: none;
    }
    .sidebar .music-player--side .music-controls {
        order: 3;
        flex: 0 0 auto;
    }
    .sidebar .music-player--side .music-btn {
        width: 30px;
        height: 30px;
    }
    .sidebar .music-player--side .music-play-btn {
        width: 36px;
        height: 36px;
    }
    .sidebar .music-player--side .music-progress-wrap {
        position: static !important;
        order: 4;
        flex: 0 0 76px;
        width: 76px;
        margin: 0 !important;
    }
    /* 高度壓成一條：原本的 grid 行高與 ::before 光帶都會撐高 */
    .sidebar .music-player.music-player--side {
        grid-template-rows: none;
        grid-template-columns: none;
        grid-template-areas: none;
        min-height: 0;
        height: 50px;
        flex-wrap: nowrap;
    }
    .sidebar .music-player--side .music-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.25;
    }
    .sidebar .music-player--side .music-controls {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .sidebar .music-player--side audio {
        display: none;
    }

    /* ---- 底部長條實測修正（892px 量到：info 寬 0、controls 寬 834、progress x=919 被裁）----
       原範本的 .music-controls 是寫死 width:100%（方塊版要撐滿一整列），
       在橫列 flex 裡它會把歌名擠到 0 寬、進度條被推出膠囊外。這裡收回自動寬度。 */
    .sidebar .music-player--side .music-controls {
        width: auto !important;
        flex: 0 0 auto;
        gap: 6px;
    }
    .sidebar .music-player--side .music-info {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;   /* 歌名很長時用省略號，不要再把别人擠掉 */
    }
    /* 玻璃底（rgba(18,22,34,.3)）在亮光夜空背景下讓白字幾乎看不清 → 長條改用較深的底 */
    .sidebar .music-player.music-player--side {
        background: linear-gradient(180deg, rgba(9, 18, 38, 0.94), rgba(9, 18, 38, 0.88)) !important;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    .sidebar .music-player--side .music-title {
        color: #fff;
    }
}

/* 很窄的手機：底部長條把進度條收掉，只留封面＋歌名＋三個按鈕 */
@media (max-width: 430px) {
    .sidebar .music-player--side .music-progress-wrap {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   16. 背景影片（bg_mode: "video"）與「個人簡介內文對齊」修正
   --------------------------------------------------------------------------- */
/* 影片铺滿 .bg（.bg 本身是 position:fixed; inset:0; z-index:0）
   object-fit: cover → 16:9 的影片在任何螢幕比例都切齊邊、不變形 */
.bg .bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
    pointer-events: none;   /* 背景不能點，否則會擋住導覽與播放器 */
    filter: none;
}

/* 個人簡介那三行比標題往右縮一大段，不是 margin 的錯：
   範本把 .intro-text 設成 white-space: pre-wrap，等於「HTML 裡怎麼縮排
   就照抄幾個空格」。改成 pre-line：保留換行、但把每行開頭的空白吃掉，
   文字左緣就跟「個人簡介」標題齊平，你在 index.html 裡怎麼排版都不會跑位。 */
.intro-text {
    white-space: pre-line;
}