/* skin-layer.css — 小夜的皮肤层（2026-09-18）
   不改动原有样式，只在上面盖一层：换季皮肤 / 壁纸 / 窗口细节 */

:root {
    --hut-accent: #ff9cd6;
    --hut-accent-2: #b8a2ff;
    --hut-text: #e6e6f0;
}

body[data-skin='spring'] { --hut-accent: #a8e6a1; --hut-accent-2: #ffe6a7; --hut-text: #eaf7ea; }
body[data-skin='summer'] { --hut-accent: #7fd7ff; --hut-accent-2: #b8f2ff; --hut-text: #e6f6ff; }
body[data-skin='autumn'] { --hut-accent: #ffb37f; --hut-accent-2: #ffd9a0; --hut-text: #fff0e2; }
body[data-skin='winter'] { --hut-accent: #cfe8ff; --hut-accent-2: #ffffff; --hut-text: #eef6ff; }
body[data-skin='night']  { --hut-accent: #b48cff; --hut-accent-2: #7f9bff; --hut-text: #ded8f2; }

body { color: var(--hut-text); }

/* 标题与强调色跟着皮肤走 */
h1, h2, h3, .window-title, .song-title, .icon-label { color: var(--hut-accent) !important; }
.song-artist, .song-artist-info, small { color: var(--hut-accent-2) !important; }

/* 图标悬停：一圈光 */
.app-icon:hover, .desktop-icon:hover .icon-image {
    box-shadow: 0 0 0 1px var(--hut-accent), 0 0 16px rgba(255, 156, 214, 0.35) !important;
    border-radius: 12px;
}

/* 窗口：统一圆角 + 薄磨砂 + 打开时轻轻弹一下 */
.window {
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
    animation: hutHop 0.18s ease-out;
    border: 1px solid rgba(255, 156, 214, 0.25) !important;
}
.window-header {
    border-radius: 14px 14px 0 0 !important;
}
@keyframes hutHop {
    from { transform: scale(0.965); opacity: 0.55; }
    to   { transform: scale(1);     opacity: 1; }
}

/* 按钮：换成皮肤的描边色 */
button, .add-song-btn, .save-list-btn, .btn-primary, .btn-secondary, .action-btn {
    border-color: var(--hut-accent) !important;
}

/* ---------- 壁纸（右键桌面可换） ---------- */
body[data-wall='codelab'] { background: url('壁纸.png') center/cover no-repeat fixed !important; }
body[data-wall='lake']    { background: url('travel/travel_images/blue_lake.webp') center/cover no-repeat fixed !important; }
body[data-wall='garden']  { background: url('travel/travel_images/queens_gardens.webp') center/cover no-repeat fixed !important; }
body[data-wall='shrine']  { background: url('travel/travel_images/firelink_shrine.webp') center/cover no-repeat fixed !important; }
body[data-wall='peak']    { background: url('travel/travel_images/crystal_peak.webp') center/cover no-repeat fixed !important; }

/* ---------- 今天的小卡片 ---------- */
#today-card {
    position: fixed;
    right: 18px;
    top: 84px;
    width: 178px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(18, 14, 30, 0.72);
    border: 1px solid rgba(255, 156, 214, 0.28);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    color: var(--hut-text);
    font-size: 12.5px;
    line-height: 1.65;
    z-index: 5;
}
#today-card .today-date { color: var(--hut-accent); font-weight: bold; letter-spacing: 0.5px; }
#today-card img {
    margin-top: 10px;
    width: 100%;
    aspect-ratio: 948 / 1659;   /* 旅行配图是竖版，整张都露出来 */
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
#today-card .today-hint { margin-top: 8px; font-size: 11px; opacity: 0.55; text-align: center; }
#today-card:hover { border-color: var(--hut-accent); }
#today-card .today-line { margin-top: 6px; }

/* ---------- 画廊 ---------- */
.gallery-wrap { padding: 16px 18px 24px; height: 100%; overflow-y: auto; }
.gallery-hint { color: var(--hut-accent-2); font-size: 12.5px; margin-bottom: 12px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.gallery-item {
    margin: 0;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 156, 214, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); border-color: var(--hut-accent); }
.gallery-item img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.gallery-item figcaption { padding: 8px 10px 10px; font-size: 12.5px; color: var(--hut-text); }
.gallery-item figcaption b { display: block; color: var(--hut-accent); }
.gallery-item figcaption span { opacity: 0.7; font-size: 11.5px; }
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 14, 0.86);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 9999;
    cursor: zoom-out;
    backdrop-filter: blur(4px);
}
.gallery-lightbox img { max-width: min(88vw, 620px); max-height: 78vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.gallery-lightbox .gallery-cap { color: var(--hut-text); font-size: 13px; opacity: 0.85; }