.search-container {
    width: 90%;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 15px;
    margin-top: 15px;
    transition: all 0.3s;
}

.search-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(244, 143, 177, 0.3);
}

.search-container i {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-right: 10px;
}

#search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px !important;
    width: 100%;
}

#search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
}

body,
button,
.track-item,
input[type=range],
.progress-container {
    cursor: none !important;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 100000 !important;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform;
}
.confirm-modal, 
.confirm-btn, 
.toast-container {
    cursor: none !important; 
}

.paw-glow {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    filter: blur(15px);
    opacity: 0.5;
    border-radius: 50%;
    transition: all 0.3s;
}

.paw-icon {
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h2v2H5zM9 2h2v2H9zM2 5h2v2H2zM12 5h2v2h-2zM5 8h6v5H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h2v2H5zM9 2h2v2H9zM2 5h2v2H2zM12 5h2v2h-2zM5 8h6v5H5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    filter: drop-shadow(0 0 5px var(--primary-color));
    transition: all 0.2s;
}

#custom-cursor.hovering .paw-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--primary-color));
}

#custom-cursor.hovering .paw-glow {
    background: var(--primary-color);
    opacity: 0.8;
    transform: scale(1.2);
}

#custom-cursor.active .paw-icon {
    transform: scale(0.85);
    background-color: #ffffff !important;
    filter: drop-shadow(0 0 15px #ffffff) brightness(1.2) !important;
}

#custom-cursor.active .paw-glow {
    background: #ffffff !important;
    opacity: 1;
    transform: scale(1.6);
}

.mascot-container {
    position: absolute;
    top: -50px;
    left: 20px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    z-index: 5;
    pointer-events: auto;
}

#mascot {
    font-size: 40px;
    color: var(--primary-color);
    filter: drop-shadow(0 0 10px var(--primary-color));
    transition: all 0.3s;
}

@keyframes mascotBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-15px) scale(1.1);
    }
}

.music-playing #mascot {
    animation: mascotBounce 0.8s infinite ease-in-out;
}

.speech-bubble {
    background: white;
    color: #333;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-family: 'Press Start 2P', cursive;
    opacity: 0;
    transition: 0.3s;
    transform: translateY(10px);
}

.music-playing .speech-bubble {
    opacity: 1;
    transform: translateY(0);
}

.theme-switcher {
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: flex;
    gap: 15px;
    z-index: 100;
}

.theme-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

.theme-btn::after {
    content: attr(data-name);
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.6rem;
    font-family: 'Press Start 2P', cursive;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    border: 1px solid var(--secondary-color);
}

.theme-btn:hover::after {
    opacity: 1;
    bottom: 40px;
}

.theme-btn:hover {
    transform: scale(1.2);
}

.theme-btn.active {
    box-shadow: 0 0 10px #fff;
    transform: scale(1.2);
}

.theme-btn.default {
    background: #F48FB1;
}

.theme-btn.dark {
    background: #444;
}

.theme-btn.valorant {
    background: #FF4655;
}

:root {
    --primary-color: #F48FB1;
    --secondary-color: #7971E0;
    --bg-glass: rgba(30, 27, 50, 0.85);
    --text-color: #ffffff;
    --bg-color-1: #2A2548; /* 漸層色1 */
    --bg-color-2: #605788;
}

body {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(135deg, var(--bg-color-1), var(--bg-color-2));
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    overflow: hidden;
    position: relative;
    perspective: 1000px;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('https://grains-filter.com/noise.png'); /* 或是使用 base64 噪點 */
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
}


body.music-playing::before {
    animation-duration: 0.8s;
}


.app-container {
    width: 100vw;
    height: 100dvh !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
    position: relative;
}

.side-panel-wrapper {
    position: fixed;
    right: 0;
    top: 48%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 9999;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.side-panel-wrapper.collapsed {
    transform: translate(350px, -50%);
}

.side-content {
    width: 350px;
    height: 520px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-radius: 25px 0 0 25px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
}

.toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
    width: 40px;
    height: 80px;
    border-radius: 20px 0 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    margin-right: -1px;
}

.toggle-btn:hover {
    background: var(--primary-color);
    color: white;
}

.side-panel-wrapper.collapsed .toggle-btn i {
    transform: rotate(0deg);
}

.side-panel-wrapper:not(.collapsed) .toggle-btn i {
    transform: rotate(180deg);
}

.player-card {
    width: 380px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 30px;
    border: 1px solid var(--card-border);
    transition: all 0.5s ease;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
}

.img-container,
.song-info,
.controls,
.playlist,
.search-container {
    transform: translateZ(20px);
}

.img-container {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.album-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(121, 113, 224, 0.3);
    animation: rotate 20s linear infinite;
    animation-play-state: paused;
    border: 4px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.star-particle {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 20005;
    color: var(--primary-color);
    animation: starFade 0.8s ease-out forwards;
}

body.story-mode .star {
    display: none !important;
}
body.story-mode .star-particle.blood-drop {
    color: #990000 !important;
    font-size: 15px;
    filter: drop-shadow(0 0 8px rgba(153, 0, 0, 0.8));
    animation: starFade 0.8s ease-out forwards;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes bloodSplat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.8);
    }
}

@keyframes starFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.2) rotate(180deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 20px var(--secondary-color);
    }

    50% {
        box-shadow: 0 0 40px var(--secondary-color), 0 0 60px rgba(121, 113, 224, 0.4);
    }

    100% {
        box-shadow: 0 0 20px var(--secondary-color);
    }
}

.player-card.playing .album-art {
    animation-play-state: running;
    animation: rotate 20s linear infinite, pulseGlow 2s ease-in-out infinite;
}

.song-info {
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
}

h2 {
    margin: 10px 0;
    font-family: 'Playfair Display', cursive;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
    text-shadow: 2px 2px 0px rgba(121, 113, 224, 0.5);
    display: inline-block;
    white-space: nowrap;
}

.player-card.playing h2 {
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

p {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: #ccc;
}

.progress-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin: 10px 0;
    height: 6px;
    width: 100%;
}
.img-container,
.song-info,
.controls,
.playlist,
.search-container,
.progress-container { /* ★ 加入這一行 */
    transform: translateZ(20px);
}

.progress {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(244, 143, 177, 0.7);
}

.time-box {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #ccc;
    margin-bottom: 10px;
    width: 100%;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 15px;
}

.controls .btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.2s;
    opacity: 0.5;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn:hover {
    opacity: 1;
    transform: scale(1.1);
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
}

.btn.repeat-single::after {
    content: "1";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    font-size: 0.55rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    color: var(--primary-color);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.btn.active {
    opacity: 1;
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
}

.btn-big {
    opacity: 1;
    font-size: 2.5rem;
    color: var(--secondary-color);
    filter: drop-shadow(0 0 5px rgba(121, 113, 224, 0.6));
}

.volume-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 80%;
    margin: 0 auto 20px;
}

#vol-icon {
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.volume-container::after {
    content: "";
    width: 24px;
    display: block;
    flex-shrink: 0;
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}

.playlist {
    width: 100%;
    max-height: 450px;
    overflow-y: auto;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.playlist::-webkit-scrollbar {
    width: 5px;
}

.playlist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.track-item {
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    margin-bottom: 5px;
    color: #ddd;
}

.track-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.track-item.active-track {
    background: rgba(121, 113, 224, 0.25);
    color: #fff;
    font-weight: bold;
}

.track-item i {
    margin-right: 10px;
    font-size: 0.8rem;
    opacity: 0;
}

.track-item.active-track i {
    opacity: 1;
    color: var(--primary-color);
}

@keyframes breathingGlow {

    0%,
    100% {
        box-shadow: 0 0 5px var(--primary-color);
        border-color: rgba(244, 143, 177, 0.3);
    }

    50% {
        box-shadow: 0 0 15px var(--primary-color), 0 0 25px rgba(244, 143, 177, 0.4);
        border-color: var(--primary-color);
    }
}

.side-panel-wrapper:not(.collapsed) .toggle-btn {
    animation: breathingGlow 2.5s infinite ease-in-out;
    color: #fff;
    background: rgba(244, 143, 177, 0.2);
}


#theme-moon {
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-150px) rotate(-30deg);
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 1.0s ease-in;
}

body.dark-mode #theme-moon {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

#theme-moon i {
    font-size: 50px;
    color: #f1c40f;
    display: block;
    filter: drop-shadow(0 0 20px rgba(241, 196, 15, 0.8));
    animation: moonBreathe 3s infinite ease-in-out;
}

@keyframes moonBreathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

#user-info-panel {
    top: 14.5% !important;
    z-index: 10000;
}

#user-info-panel .toggle-btn i {
    transform: none !important;
    transition: none !important;
    color: var(--primary-color);
}

#user-info-panel.collapsed {
    transform: translate(350px, -50%) ;
}

#user-info-panel:not(.collapsed) .toggle-btn {
    animation: breathingGlow 2.5s infinite ease-in-out;
    background: rgba(244, 143, 177, 0.2);
}

#toggle-info {
    box-shadow: 0 0 10px rgba(244, 143, 177, 0.2);
    animation: infoBtnGlow 2s infinite ease-in-out;
}

@keyframes infoBtnGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}

.info-content p {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee;
}

.hearts-decoration {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 10px;
}

.hearts-decoration i {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px rgba(255, 70, 85, 0.4));
    transition: all 0.3s;
}

.heart-1 {
    color: #FF4655;
    animation: heartJump 1.2s infinite ease-in-out;
}

.heart-2 {
    color: var(--primary-color);
    animation: heartJump 1.2s infinite ease-in-out 0.2s;
}

.heart-3 {
    color: #7971E0;
    animation: heartJump 1.2s infinite ease-in-out 0.4s;
}

@keyframes heartJump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

#lyrics-panel {
    left: 0;
    right: auto;
    position: fixed;
    top: 50%;
    z-index: 9998;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#lyrics-panel .side-content {
    width: 350px;
    height: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#lyrics-panel.collapsed {
    transform: translate(-500px, -50%) !important;
}

#lyrics-panel:not(.collapsed) {
    transform: translate(0, -50%) !important;
}
#full-lyrics {
    flex: 1;                 
    overflow-y: auto;      
    white-space: pre-wrap;   
    word-wrap: break-word;    
    margin-top: 15px;
    padding-right: 10px;     
    font-size: 0.95rem;
    line-height: 1.8;         
    color: #eee;
}

#full-lyrics::-webkit-scrollbar {
    width: 4px;
}

#full-lyrics::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

/*愛貓*/
body.story-mode {
    --primary-color: #FF4655;
    --secondary-color: #000000;
    background: radial-gradient(circle, #220000 0%, #000000 100%) !important;
    transition: background 1s ease;

}


body.story-mode .player-card {
    border: 1px solid rgba(255, 70, 85, 0.5);
    box-shadow: 0 0 40px rgba(255, 70, 85, 0.2);
    background: rgba(10, 0, 0, 0.9);

    transform: translateZ(0);
    will-change: transform, box-shadow;
    animation: horrorPulse 2s infinite ease-in-out;
    border: 2px solid #FF4655 !important;
}


body.story-mode #mascot {
    color: #FF4655;
    filter: drop-shadow(0 0 15px #FF4655);
}


body.story-mode .progress {
    background: linear-gradient(90deg, #FF4655, #9B0000);
    box-shadow: 0 0 15px #FF4655;
}


body.story-mode .heart-1,
body.story-mode .heart-2,
body.story-mode .heart-3 {
    color: #FF4655 !important;
}


body.story-mode::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 20000 !important;
}

@keyframes cinematicHorror {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

body.story-mode #title {
    font-family: 'Creepster', cursive !important;
    color: #FF0000 !important;
    font-size: 2rem !important;
    letter-spacing: 4px;

    text-shadow:
        0 0 10px #ff0000,
        3px 3px 0px #330000,
        -1px -1px 0 #000,
        1px -1px 0 #000;
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.7));
    transition: all 0.5s ease;
}


body.story-mode #artist {
    font-family: 'Creepster', cursive !important;
    color: #8B0000 !important;
    text-shadow: 1px 1px 2px #000;
}

.horror-transition-active {
    animation: cinematicHorror 0.8s ease-in-out forwards !important;
}


@keyframes horrorPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 70, 85, 0.3);
        border-color: rgba(255, 70, 85, 0.5);
    }

    50% {
        box-shadow: 0 0 50px rgba(255, 70, 85, 0.6);
        border-color: rgba(255, 70, 85, 1);
    }
}


.flicker-transition {
    animation: lightFlicker 0.6s ease-in-out forwards;
}


body.story-mode::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 70, 85, 0.1) 0%, rgba(0, 0, 0, 0.4) 70%);
    animation: lightFlicker 4s infinite reverse;
    z-index: 1;

    transform: translateZ(0);
}

#horror-overlay {
    z-index: 20001 !important;
    pointer-events: none !important;
}

.track-item .add-btn:hover {
    color: var(--primary-color);
    opacity: 1 !important;
    transform: scale(1.2);
}

.playlist-controls input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

#playlist-selector:hover {
    background: #333;
}

#playlist-manager-panel {
    top: 78% !important;             
    bottom: 10% !important;        
    right: 0;
    transform: translateX(0) !important; 
    z-index: 9998;                    
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


#playlist-manager-panel.collapsed {
    transform: translateX(350px) !important;
}


#playlist-manager-panel .side-content {
    width: 350px;
    height: 350px;                   
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-radius: 25px 0 0 25px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
}


#playlist-manager-panel .toggle-btn {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);      
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.playlist-manager-ui input,
.playlist-manager-ui select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 8px !important;
    color: white !important;
    padding: 10px !important;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}


.playlist-manager-ui select option {
    background: #2A2548; 
    color: white;
}


.playlist-manager-ui input:focus,
.playlist-manager-ui select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 10px rgba(244, 143, 177, 0.3); 
    background: rgba(255, 255, 255, 0.1) !important;
}

.playlist-manager-ui .input-group button {
    border-radius: 8px !important;
    margin-left: 5px;
    background: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.playlist-manager-ui .del-btn {
    background: rgba(255, 70, 85, 0.1) !important;
    border: 1px solid rgba(255, 70, 85, 0.3) !important;
    color: #FF4655 !important;
    font-weight: 500;
    transition: all 0.3s;
}

.playlist-manager-ui .del-btn:hover {
    background: #FF4655 !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(255, 70, 85, 0.4);
}

.context-menu {
    position: fixed;
    display: none;
    z-index: 10000 !important;
    width: 140px;
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(244, 143, 177, 0.1);
    animation: menuBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top right;
}

@keyframes menuBounce {
    from { opacity: 0; transform: scale(0.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.sub-menu {
    position: absolute;
    right: 100%; 
    top: -5px;
    width: 180px;
    background: rgba(50, 45, 85, 0.8);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: none;
    padding: 6px 0;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.5);
    animation: subBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sub-menu::after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background: transparent;
}

@keyframes subBounce {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

#ctx-add:hover #sub-playlist-menu {
    display: block;
}

.sub-item {
    padding: 10px 15px;
    font-size: 0.8rem;
    color: #eee;
    cursor: pointer;
    transition: 0.2s;
}

.sub-item:hover {
    background: rgba(244, 143, 177, 0.2); 
    color: #fff;
}


.playlist, .sub-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.playlist::-webkit-scrollbar, .sub-menu::-webkit-scrollbar {
    display: none;
}

.custom-modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.6); 
    z-index: 20010; 
    align-items: center; 
    justify-content: center;
}
.modal-content {
    background: rgba(30, 27, 50, 0.9); 
    backdrop-filter: blur(20px);
    border: 1px solid var(--primary-color); 
    border-radius: 20px;
    padding: 25px; 
    width: 280px; 
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.modal-list { 
    margin: 15px 0; 
    max-height: 200px; 
    overflow-y: auto; 
}
.modal-item {
    padding: 12px; 
    margin-bottom: 8px; 
    background: rgba(255,255,255,0.05);
    border-radius: 10px; 
    cursor: pointer; 
    transition: 0.2s; 
    color: #ddd; 
    font-size: 0.85rem;
}
.modal-item:hover { 
    background: var(--primary-color); 
    color: white; 
    transform: scale(1.05); 
}
.modal-close-btn {
    width: 100%; 
    background: transparent; 
    border: 1px solid #555; 
    color: #aaa;
    padding: 8px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 0.7rem;
}

.is-all-list #ctx-remove { display: none; }

.is-custom-list #ctx-add { display: none; }
.playlist-modal {
    position: fixed;      
    top: 0;
    left: 0;
    width: 100vw;         
    height: 100vh;       
    background: rgba(0, 0, 0, 0.6); 
    z-index: 20010;        
    display: none;       
    align-items: center;   
    justify-content: center; 
    pointer-events: auto; 
}


.modal-content {
    position: relative;
    z-index: 20011;
    
}

.playlist, .modal-list, #modal-list, .sub-menu {
    -ms-overflow-style: none;  
    scrollbar-width: none;     
}

.playlist::-webkit-scrollbar, 
.modal-list::-webkit-scrollbar,
#modal-list::-webkit-scrollbar {
    display: none;             
}

.menu-item {
    width: 100%;               
    padding: 12px 0;           
    display: flex;             
    justify-content: center;   
    align-items: center;        
    text-align: center;        
    cursor: none !important;   
    color: #eee;
    font-size: 0.9rem;
    transition: 0.2s;
    position: relative;       
}

.menu-item:hover {
    background: rgba(244, 143, 177, 0.2); 
    color: #fff;
}


.menu-item i {
    margin-right: 8px;        
}

/*Toast*/
.toast-container { position: fixed; 
    top: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 200000; 
    pointer-events: none; }
.toast {
    background: rgba(45, 40, 75, 0.7); 
    backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid rgba(244, 143, 177, 0.6); 
    color: white;
    padding: 10px 20px; 
    border-radius: 50px; 
    margin-bottom: 10px;
    font-size: 0.85rem; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; 
    align-items: center; 
    gap: 10px;
    animation: toastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/*確認彈窗*/
.confirm-modal {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.6); 
    z-index: 50001;
    display: none; 
    align-items: center; 
    justify-content: center;
}
.confirm-content {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(30px) saturate(180%);
    border: 2px solid var(--primary-color); 
    border-radius: 20px;
    padding: 30px; 
    width: 300px; 
    text-align: center;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: menuBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.confirm-icon { 
    font-size: 2rem; 
    color: #FF4655; 
    margin-bottom: 15px; 
}
.confirm-btns { 
    display: flex; 
    gap: 15px; 
    margin-top: 20px; 
}
.confirm-btn {
    flex: 1; 
    padding: 10px; 
    border-radius: 8px; 
    border: none; 
    cursor: none !important;
    font-family: 'Poppins', sans-serif; 
    transition: 0.2s;
}
.confirm-btn.yes { 
    background: var(--primary-color); 
    color: var(--secondary-color) 
}
.confirm-btn.no { 
    background: rgba(255,255,255,0.1); 
    color: #ccc; 
}
.confirm-btn:hover { 
    transform: scale(1.05); 
    filter: brightness(1.2); 
}
/* 備份按鈕樣式 */
.sync-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--primary-color);
    color: white;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    cursor: none !important;
    transition: 0.2s;
    font-family: 'Press Start 2P', cursive;
}

.sync-btn:hover {
    background: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
}
.sync-group {
    display: flex;
    gap: 8px;
    margin-top: 5px;       
    margin-bottom: 10px;
}

/* 遮罩層 */
.prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
}

/* 彈窗主體 */
.prompt-box {
    background: rgba(50, 45, 85, 0.8);
    padding: 24px;
    border-radius: 12px;
    width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 1px solid #333;
    color: white;
    font-family: sans-serif;
}

/* 輸入框 */
#prompt-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    padding: 10px;
    color: white;
    margin: 15px 0;
    outline: none;
    box-sizing: border-box;
}

/* 按鈕容器 */
.prompt-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 按鈕樣式 */
.prompt-buttons button {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer; 
    font-weight: bold;
}
/* 設定超連結顏色 */
.info-link {
    color: var(--primary-color);
    text-decoration: none;  
    transition: 0.3s;
    font-weight: 500;
}


.info-link:hover {
    text-decoration: underline;  
    filter: brightness(1.2);
}
#prompt-confirm { 
    background: var(--primary-color); 
    color: var(--secondary-color); 
}
#prompt-cancel { 
    background: rgba(255,255,255,0.1); 
    color: #ccc; 
}






#funding-bubble-trigger {
    position: fixed;
    bottom: 20px; 
    left: 140px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;

    background: rgba(--secondary-color);
    backdrop-filter: blur(10px);
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(176, 168, 224, 0.4);

    animation: floatAndGlow 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

#funding-bubble-trigger:hover {
    transform: scale(1.05) translateY(-2px);
    background: rgba(176, 168, 224, 0.2);
    border-color: var(--text-color); 
    box-shadow: 0 6px 20px rgba(255, 133, 162, 0.6);
}

.cat-icon {
    font-size: 1.2rem;
}

.notification-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #ffffff;
    animation: pulseDot 1.5s infinite;
}


/*彈出視窗樣式*/
#funding-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}


#funding-modal.modal-show {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    position: relative;
    max-width: 600px;
    width: 100%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#funding-modal.modal-show .modal-container {
    transform: scale(1);
}

.modal-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 3px solid #B0A8E0;
    box-shadow: 0 0 30px rgba(176, 168, 224, 0.5);
}



.modal-hint {
    color: rgba(255,255,255,0.6);
    margin-top: 15px;
    font-size: 0.9rem;
}


@keyframes floatAndGlow {
    0%, 100% { 
        transform: translateY(0); 
        box-shadow: 0 4px 15px rgba(176, 168, 224, 0.4); 
    }
    50% { 
        transform: translateY(-6px); 
        box-shadow: 0 8px 25px rgba(176, 168, 224, 0.6); 
    }
}
@keyframes pulseDot {
    0% { 
        transform: scale(0.95); 
        opacity: 0.7; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 1; 
    }
    100% { 
        transform: scale(0.95);
        opacity: 0.7; 
    }
}
/* 彈窗指引箭頭樣式 */
.pointing-arrow-container {
    position: absolute;
    top: 14%; 
    right: 150px;
    transform: translateY(-50%);
    
    display: flex;
    align-items: center;
    gap: 10px;
    
    opacity: 0;
    pointer-events: none;
    z-index: 10001;
    transition: opacity 0.5s ease 0.3s; 
}

#funding-modal.modal-show .pointing-arrow-container {
    opacity: 1;
    animation: pointRightAnim 1.5s ease-in-out infinite;
}


.arrow-shape {
    width: 50px;
    height: 4px;
    background-color: var(--primary-color); 
    position: relative;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--primary-color); 
}

.arrow-shape::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid var(--primary-color);
    filter: drop-shadow(0 0 5px var(--primary-color)); 
}


/*箭頭旁的提示文字*/
.arrow-text {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}



@keyframes pointRightAnim {
    0%, 100% {

        transform: translateY(-50%) translateX(0); 
    }
    50% {
        transform: translateY(-50%) translateX(20px); 
    }
}

/*海報自定義文字樣式*/
.poster-description {
    margin-top: 20px;

    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(176, 168, 224, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.poster-title {
    color: #F48FB1 !important;
    font-size: 1.4rem !important;
    margin-bottom: 10px !important;
    text-shadow: 0 0 8px rgba(244, 143, 177, 0.5);
    font-family: 'Poppins', sans-serif;
}
.poster-text {
    color: #eee !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.poster-text strong {
    color: #B0A8E0;
    text-decoration: underline;
}

.mobile-menu-bar { display: none; }


@media (display-mode: standalone) {
    .mobile-nav-bar {
        bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }
    
    .comment-list {
        padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 600px) {
    #announcement-text {
        font-size: 0.9rem;
    }
    .nav-container {
        display: none !important;
    }
    .side-panel-wrapper:not(.collapsed) ~ .nav-container,
    #lyrics-panel:not(.collapsed) ~ .nav-container {
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }
    #funding-bubble-trigger {
        position: fixed;

        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        margin-left: 0px !important;
        left: 5% !important;
        z-index: 2000;
        transition: all 0.4s ease;
        top: auto !important;
    }


    #announcement-bar.collapsed {
        position: fixed;
        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        left: 82% !important;
        z-index: 9999 !important;
        animation: floatAndGlow 3s ease-in-out infinite;
        overflow: visible !important;
        transition: all 0.4s ease;
    }
    
    .announcement-bar.collapsed .notification-dot {
        top: 0 !important;
        right: 0 !important;
    }

    .pointing-arrow-container {
        position: absolute;
        top: 14%; 
        right: 80px;
        transform: translateY(-50%);
    }

    .info-link {
        padding: 5px 0;
        display: inline-block;
    }
    .theme-switcher {
        top: 25px;       
        bottom: auto;    
        left: 20px;
        z-index: 9998;  
        flex-direction: column; 
        gap: 10px;
    }

    
    .theme-btn::after {
        left: 45px;     
        bottom: 50%;
        transform: translateY(50%);
    }

    .theme-btn:hover::after {
        left: 50px;
        bottom: 50%;
    }

    #user-info-panel {
        top: 170px !important; 
    }

    #user-info-panel:not(.collapsed) {
        transform: translate(0, -50%) !important;
    }
    

    #user-info-panel.collapsed {
        transform: translate(77vw, -50%) !important;
    }

    #lyrics-panel .side-content {
        width: 60vw !important;
        height: 80dvh !important;
        background: rgba(10, 10, 20, 0.95);
        padding: 50px 20px !important;
        z-index: 10000;
    }

    #lyrics-panel.collapsed { transform: translate(-200vw, -50%) !important; }

    .side-content { width: 70vw !important; z-index: 10000; }
    .side-panel-wrapper.collapsed { transform: translate(100vw, -50%) !important; }

    .player-card { width: 80vw !important; padding: 12px 10px !important; }
    .img-container { width: 100px !important; height: 100px !important; }
    h2 { font-size: 0.85rem !important; }
    #custom-cursor { display: none !important; }
    
    body, 
    button, 
    .track-item, 
    .confirm-modal, 
    .confirm-btn,
    input,
    textarea { 
        cursor: default !important; 
    }
    /*手機版歌單面板調整*/
    #playlist-manager-panel {
        position: fixed !important;
        top: 20px !important;            
        left: auto !important;           
        right: auto !important;          
        bottom: auto !important;         
        transform: translate(0, 0) !important;      
        width: 85vw !important;          
        max-height: 70vh;                
        z-index: 10005 !important;     
        transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    
    #playlist-manager-panel.collapsed {
        transform: translate(100vw, 100vh) !important; 
    }


    #playlist-manager-panel .side-content {
        width: 100% !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }
    #playlist-manager-panel .toggle-btn {
        left: -1000px !important; 
    }


   
    .playlist-manager-ui .input-group {
        margin-bottom: 20px !important;
    }
    .nav-item {
        background: transparent ;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-size: 0.65rem;
        flex: 1;
    }
    /* 底部導航欄*/
    .mobile-nav-bar {
        display: flex;
        position: fixed;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom);
        height: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 94vw;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 35px;
        padding: 5px 5px 0 5px !important;
        justify-content: space-evenly;
        z-index: 10001;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    
    .mobile-nav-extended {
        display: flex;
        position: fixed;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        right: auto;
        transform: translateX(-50%) translateY(20px);
        width: auto; 
        min-width: 220px;
        background: rgba(255, 255, 255, 0.05); 
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50px;
        padding: 10px 0;
        justify-content: space-evenly;
        z-index: 10000;       
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    }


    .mobile-nav-extended.active {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .mobile-nav-extended .nav-item {
        text-decoration: none;
        color: white;
    }
    .bubble-hidden {
        opacity: 0 !important;
        transform: scale(0.8) translateY(20px) !important;
        pointer-events: none !important;
    }

    .nav-item i {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

    .nav-item span {
        color: var(--primary-color);
        font-size: 0.65rem;
        font-family: 'Poppins', sans-serif;
    }

    .nav-item:active i, 
    .nav-item:active span {
        color: var(--secondary-color) !important;
    }
    .pointing-arrow-container {
        position: absolute;
        top: 14.5%; 
        right: 13%;
        position: fixed
    }

    #funding-modal{
        width: auto;
        height: auto;
        top: auto;
        left: auto;
        padding: 50%;
    }  
}
/* 非手機版隱藏底欄 */
@media (min-width: 601px) {
    .mobile-nav-bar { 
        display: none !important; 
    }
    
    .mobile-nav-extended { 
        display: none !important; 
    }
}
/*debug*/
.side-panel-wrapper, 
#playlist-manager-panel {
    pointer-events: none !important;
}

.side-content, 
.toggle-btn {
    pointer-events: auto !important;
}
.toggle-btn {
    z-index: 10020 !important;
}


body.default {
    --primary-color: #F48FB1;
    --secondary-color: #7971E0;
    --bg-color-1: #0e0b22ff;
    --bg-color-2: #3f3869ff;
    --bg-glass: rgba(30, 27, 50, 0.85);
    --card-border: rgba(255, 255, 255, 0.1);
    --text-color: #ffffff;
}

/*dark*/
body.dark {
    --primary-color: #ffffff;
    --secondary-color: #444444; 
    --bg-color-1: #000000;
    --bg-color-2: #222121ff;
    --bg-glass: rgba(15, 15, 15, 0.95);
    --card-border: rgba(255, 255, 255, 0.1);
}

/*valorant*/
body.valorant {
    --primary-color: #FF4655;
    --secondary-color: #030000ff;
    --bg-color-1: #0F1923;
    --bg-color-2: #364049;
    --bg-glass: rgba(15, 25, 35, 0.95);
    --card-border: rgba(255, 70, 85, 0.3); 
}


/* 左上角導覽列容器 */
.nav-container {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    gap: 15px;
    z-index: 100;
}


.nav-link-btn {
    text-decoration: none;
    color: white;
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 30px; 
    display: flex;
    align-items: center;
    gap: 8px; 
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.nav-link-btn:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(244, 143, 177, 0.4);
    border-color: var(--primary-color);
}

.nav-link-btn i {
    font-size: 1.1rem;
}

.announcement-bar {
    position: fixed;
    top: calc(36px + env(safe-area-inset-top)); 
    left: 0; right: 0; margin: 0 auto;
    width: 85vw;           
    max-width: 450px;
    height: 40px;
    background: rgba(--secondary-color);
    backdrop-filter: blur(15px);
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 12px;
    
    z-index: 11000;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    cursor: pointer;
    animation: floatAndGlow 3s ease-in-out infinite;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}
.announcement-bar.collapsed {
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    bottom: 20px !important;  
    left: 300px !important;   
    width: 50px !important;
    height: 50px;
    padding: 0 !important;
    gap: 0 !important;
    border-color: var(--primary-color);
    background: rgba(--secondary-color);
    position: fixed !important; 
    z-index: 9990;
    box-shadow: 0 0 15px var(--primary-color);
}

.announcement-bar.collapsed:hover{
    transform: scale(1.05) translateY(-2px);
    background: rgba(176, 168, 224, 0.2);
    border-color: var(--text-color); 
    box-shadow: 0 6px 20px rgba(255, 133, 162, 0.6);
}

.announcement-bar.collapsed .announcement-content {
    max-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden;
}
.announcement-bar i {
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s;
}
.announcement-bar.collapsed i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}


.announcement-bar.collapsed:hover i {
    transform: scale(1.2) rotate(-10deg);

}

.announcement-content {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    max-width: 400px;
    opacity: 1;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


#announcement-text {
    white-space: nowrap;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: 100%;
    text-align: center;
}

.scroll-active {
    width: auto !important;
    text-align: left !important;
    display: inline-block !important;
    padding-left: 100%;
    animation: marquee-pause linear infinite;
}

@keyframes marquee-pause {
    0%, 10% { transform: translateX(0); } 
    90%, 100% { transform: translateX(-100%); }
}

@keyframes announcementPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.announcement-bar .notification-dot {
    opacity: 0;
    transition: opacity 0.3s;
}

.announcement-bar.collapsed .notification-dot {
    opacity: 1;
    position: absolute;
    top: 0; 
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #fff; 
    border-radius: 50%;  
    box-shadow: 0 0 5px #fff; 
    z-index: 20002;
    animation: pulseDot 2s infinite; 
}

@keyframes pulseDot {
    0% { 
        transform: scale(0.95); 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); 
    }
    70% { 
        transform: scale(1); 
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
    100% { 
        transform: scale(0.95); 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 
    }
}

body.music-playing #mascot {
    cursor: pointer !important;
}


#admin-announcement-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 20000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.admin-panel-content {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    animation: modalPopIn 0.3s ease-out;
}
/* 彈出動畫定義 */
@keyframes modalPopIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

.admin-panel-content h3 {
    margin-top: 0;
    color: var(--primary-color, );
    font-size: 1.5rem;
}

.admin-hint {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 25px;
}


.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #ddd;
}

#admin-msg-input,
#admin-expiry-select {
    width: 100% !important; 
    box-sizing: border-box; 
    padding: 15px !important;
    margin: 0 !important;     
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    resize: none;
    
}

#admin-msg-input {
    height: 100px;
    resize: none;
}

#admin-expiry-select option {
    background: #333;
    color: #fff;
}

#admin-msg-input:focus,
#admin-expiry-select:focus {
    border-color: var(--primary-color, #ff69b4);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
}

.admin-btn-group {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.admin-btn {
    flex: 1; 
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-btn.close {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.admin-btn.close:hover { background: rgba(255, 255, 255, 0.2); }


.admin-btn.publish {
    background: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}
.admin-btn.publish:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.6);
    filter: brightness(1.1);
}
.admin-btn:active { transform: scale(0.98); 

}



/* style.css - 絕美星空背景特效 */

/* 1. 背景容器：固定在最底層，不影響網頁捲動 */
.star-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, var(--bg-color-2) 0%, var(--bg-color-1) 100%); /* 深藍夜空底色 */
    z-index: -10; /* 放在最下面 */
    overflow: hidden; /* 防止星星飛出去產生卷軸 */
    pointer-events: none; /* 讓滑鼠點擊可以穿透背景 */
}

/* 2. 星星動畫定義 */
@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

/* 3. 第一層星星 (小、慢) */
#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 405px 294px #FFF , 337px 395px #FFF , 1553px 166px #FFF , 1644px 65px #FFF , 167px 85px #FFF , 165px 1029px #FFF , 1050px 517px #FFF , 839px 86px #FFF , 1974px 1097px #FFF , 1199px 1514px #FFF , 734px 1287px #FFF , 1569px 725px #FFF , 307px 161px #FFF , 1077px 1253px #FFF , 858px 1499px #FFF , 175px 1304px #FFF , 959px 1651px #FFF , 1762px 463px #FFF , 745px 1228px #FFF , 1807px 993px #FFF , 268px 1890px #FFF , 39px 290px #FFF , 547px 1027px #FFF , 259px 724px #FFF , 23px 582px #FFF , 936px 1570px #FFF , 1473px 70px #FFF , 1597px 40px #FFF , 1534px 1149px #FFF , 1494px 1392px #FFF , 943px 1801px #FFF , 1057px 1736px #FFF , 877px 1030px #FFF , 1460px 910px #FFF , 234px 1277px #FFF , 1289px 1801px #FFF , 1448px 348px #FFF , 1033px 1558px #FFF , 1819px 1564px #FFF , 333px 1283px #FFF , 660px 1441px #FFF , 1242px 720px #FFF , 1551px 1326px #FFF , 1154px 1805px #FFF , 1314px 617px #FFF , 690px 1741px #FFF , 579px 861px #FFF , 1424px 1479px #FFF , 1228px 846px #FFF , 644px 432px #FFF , 52px 1305px #FFF , 1838px 746px #FFF , 1499px 201px #FFF , 1935px 674px #FFF , 4px 627px #FFF , 1985px 875px #FFF , 295px 382px #FFF , 688px 1263px #FFF , 1684px 1792px #FFF , 1706px 1072px #FFF , 1456px 473px #FFF , 1357px 452px #FFF , 131px 1249px #FFF , 898px 1901px #FFF , 1066px 1638px #FFF , 601px 391px #FFF , 1800px 149px #FFF , 1631px 1722px #FFF , 713px 986px #FFF , 901px 640px #FFF , 820px 533px #FFF , 907px 940px #FFF , 801px 59px #FFF , 1894px 1168px #FFF , 428px 46px #FFF , 1615px 787px #FFF , 288px 74px #FFF , 1534px 761px #FFF , 1653px 762px #FFF , 856px 1962px #FFF , 676px 1682px #FFF , 355px 1181px #FFF , 1906px 1834px #FFF , 467px 1419px #FFF , 209px 2000px #FFF , 89px 1029px #FFF , 1160px 1199px #FFF , 1285px 1847px #FFF , 1672px 639px #FFF , 92px 383px #FFF , 1529px 469px #FFF , 918px 1937px #FFF , 1280px 1035px #FFF , 472px 928px #FFF , 425px 1036px #FFF , 842px 633px #FFF , 195px 321px #FFF , 871px 826px #FFF , 1272px 155px #FFF , 1415px 1195px #FFF , 1275px 1860px #FFF , 612px 1775px #FFF , 473px 634px #FFF , 493px 886px #FFF , 952px 470px #FFF , 1138px 1642px #FFF , 68px 111px #FFF , 1569px 892px #FFF , 586px 1888px #FFF , 1369px 234px #FFF , 1933px 305px #FFF , 1392px 987px #FFF , 1905px 912px #FFF , 599px 801px #FFF , 109px 347px #FFF , 364px 1465px #FFF , 1007px 1725px #FFF , 438px 1477px #FFF , 1512px 837px #FFF , 1869px 1142px #FFF , 1600px 1268px #FFF , 1599px 704px #FFF , 1847px 814px #FFF , 566px 1790px #FFF , 323px 791px #FFF , 1691px 936px #FFF , 791px 1395px #FFF , 1161px 1971px #FFF , 694px 1430px #FFF , 1635px 1488px #FFF , 166px 839px #FFF , 178px 1068px #FFF , 119px 279px #FFF , 421px 920px #FFF , 156px 138px #FFF , 1968px 1350px #FFF , 1787px 431px #FFF , 159px 1666px #FFF , 1181px 1307px #FFF , 135px 1757px #FFF , 1460px 207px #FFF , 1037px 202px #FFF , 557px 1467px #FFF , 409px 1233px #FFF , 790px 89px #FFF , 1721px 716px #FFF , 1111px 1838px #FFF , 354px 1348px #FFF , 135px 1099px #FFF , 1993px 38px #FFF , 1771px 490px #FFF , 757px 1764px #FFF , 1343px 1545px #FFF , 874px 1039px #FFF , 344px 850px #FFF , 354px 1937px #FFF , 398px 1995px #FFF , 1793px 351px #FFF , 1262px 637px #FFF , 1852px 544px #FFF , 184px 1340px #FFF , 1725px 1706px #FFF , 118px 1823px #FFF , 280px 52px #FFF , 1729px 464px #FFF , 967px 1621px #FFF , 1042px 621px #FFF , 1599px 1367px #FFF , 173px 288px #FFF , 568px 1765px #FFF , 367px 717px #FFF , 1458px 918px #FFF , 1840px 463px #FFF , 212px 552px #FFF , 1898px 1613px #FFF , 962px 1901px #FFF , 626px 918px #FFF , 1266px 1043px #FFF , 1150px 342px #FFF , 456px 1500px #FFF , 1171px 1499px #FFF , 664px 913px #FFF , 1581px 1545px #FFF , 433px 1127px #FFF , 1534px 1007px #FFF , 209px 298px #FFF , 527px 748px #FFF , 1483px 1083px #FFF , 973px 518px #FFF , 565px 866px #FFF , 868px 1656px #FFF , 1435px 1432px #FFF , 481px 1368px #FFF , 1375px 924px #FFF , 291px 277px #FFF , 590px 1330px #FFF , 1218px 1858px #FFF , 428px 924px #FFF , 925px 1624px #FFF , 1394px 102px #FFF , 1360px 81px #FFF , 832px 64px #FFF , 570px 855px #FFF , 257px 783px #FFF , 1636px 1350px #FFF , 290px 732px #FFF , 323px 55px #FFF , 1068px 319px #FFF , 1798px 127px #FFF , 788px 804px #FFF , 1214px 1621px #FFF , 339px 705px #FFF , 1822px 806px #FFF , 1463px 753px #FFF , 1685px 1433px #FFF , 397px 1619px #FFF , 1598px 275px #FFF , 1059px 1766px #FFF , 400px 1293px #FFF , 1674px 693px #FFF , 1053px 733px #FFF , 549px 333px #FFF , 406px 1564px #FFF , 48px 166px #FFF , 827px 1096px #FFF , 574px 1203px #FFF , 602px 140px #FFF , 440px 1683px #FFF , 591px 616px #FFF , 1104px 938px #FFF , 621px 1374px #FFF , 515px 681px #FFF , 355px 873px #FFF , 1488px 1537px #FFF , 1379px 841px #FFF , 286px 608px #FFF , 850px 1054px #FFF , 325px 615px #FFF , 1186px 1911px #FFF , 798px 787px #FFF , 994px 655px #FFF , 1333px 1025px #FFF , 505px 883px #FFF , 13px 1574px #FFF , 1575px 1330px #FFF , 927px 126px #FFF , 958px 705px #FFF , 1939px 1617px #FFF , 1435px 1190px #FFF , 106px 1174px #FFF , 1718px 1648px #FFF , 1091px 1129px #FFF , 438px 1534px #FFF , 901px 235px #FFF , 1789px 1561px #FFF , 1267px 868px #FFF , 127px 492px #FFF , 360px 15px #FFF , 1503px 917px #FFF , 1792px 1352px #FFF , 107px 1516px #FFF , 689px 1085px #FFF , 551px 1772px #FFF , 1675px 1567px #FFF , 1089px 1808px #FFF , 1473px 710px #FFF , 464px 1498px #FFF , 1341px 779px #FFF , 897px 410px #FFF , 1056px 494px #FFF , 304px 598px #FFF , 1394px 960px #FFF , 462px 1184px #FFF , 859px 1729px #FFF , 1460px 1612px #FFF , 1229px 1891px #FFF , 1466px 692px #FFF , 851px 1409px #FFF , 116px 459px #FFF , 13px 476px #FFF , 1334px 281px #FFF , 180px 1223px #FFF , 219px 134px #FFF , 238px 913px #FFF , 32px 878px #FFF , 551px 1638px #FFF , 1961px 516px #FFF , 1192px 1158px #FFF , 1546px 1941px #FFF , 1563px 571px #FFF , 434px 1483px #FFF , 254px 1620px #FFF , 965px 1285px #FFF , 1850px 1709px #FFF , 1622px 118px #FFF , 412px 1364px #FFF , 586px 1738px #FFF , 353px 1560px #FFF , 1520px 1736px #FFF , 1146px 1739px #FFF , 946px 1947px #FFF , 1658px 1632px #FFF , 825px 1763px #FFF , 1930px 637px #FFF , 1082px 658px #FFF , 1274px 1574px #FFF , 1382px 444px #FFF , 1016px 923px #FFF , 876px 323px #FFF , 1894px 83px #FFF , 1630px 394px #FFF , 1142px 1868px #FFF , 334px 1471px #FFF , 1004px 207px #FFF , 1491px 762px #FFF , 725px 1894px #FFF , 1552px 1886px #FFF , 1341px 1234px #FFF , 1723px 848px #FFF , 991px 1326px #FFF , 1500px 95px #FFF , 1028px 1224px #FFF , 1385px 1323px #FFF , 714px 1171px #FFF , 1540px 310px #FFF , 158px 371px #FFF , 119px 1624px #FFF , 1635px 1496px #FFF , 526px 1655px #FFF , 1383px 1203px #FFF , 479px 421px #FFF , 1173px 1545px #FFF , 1711px 32px #FFF , 1840px 1251px #FFF , 1510px 864px #FFF , 281px 133px #FFF , 1819px 1866px #FFF , 655px 1944px #FFF , 926px 91px #FFF , 1402px 624px #FFF , 1551px 305px #FFF , 1590px 115px #FFF , 1047px 850px #FFF , 1096px 183px #FFF , 240px 836px #FFF , 1011px 409px #FFF , 184px 736px #FFF , 434px 165px #FFF , 22px 1715px #FFF , 486px 1780px #FFF , 813px 246px #FFF , 963px 1010px #FFF , 1405px 428px #FFF , 57px 1996px #FFF , 686px 1385px #FFF , 633px 1179px #FFF , 961px 1997px #FFF , 988px 503px #FFF , 50px 1865px #FFF , 1086px 1286px #FFF , 678px 1391px #FFF , 1068px 1846px #FFF , 360px 1933px #FFF , 572px 653px #FFF , 439px 979px #FFF , 496px 1149px #FFF , 1052px 928px #FFF , 1955px 267px #FFF , 980px 934px #FFF , 127px 443px #FFF , 555px 1188px #FFF , 1043px 146px #FFF , 726px 908px #FFF , 1944px 1729px #FFF , 45px 32px #FFF , 1460px 754px #FFF , 1881px 1853px #FFF , 1795px 991px #FFF , 1537px 203px #FFF , 1589px 1028px #FFF , 1016px 81px #FFF , 522px 1733px #FFF , 1460px 382px #FFF , 1207px 807px #FFF , 1691px 565px #FFF , 305px 1292px #FFF , 542px 580px #FFF , 798px 1950px #FFF , 888px 1585px #FFF , 1727px 411px #FFF , 1051px 561px #FFF , 623px 1990px #FFF , 449px 1410px #FFF , 1398px 1558px #FFF , 1239px 586px #FFF , 1230px 1898px #FFF , 1101px 1650px #FFF , 132px 1112px #FFF , 1646px 369px #FFF , 397px 1921px #FFF , 1023px 857px #FFF , 28px 399px #FFF , 1927px 105px #FFF , 1169px 123px #FFF , 1258px 788px #FFF , 1244px 1346px #FFF , 302px 1713px #FFF , 1567px 537px #FFF , 267px 1622px #FFF , 692px 1043px #FFF , 1680px 1176px #FFF , 1121px 697px #FFF , 1694px 1524px #FFF , 313px 1596px #FFF , 1729px 1777px #FFF , 821px 200px #FFF , 522px 1445px #FFF , 282px 1791px #FFF , 566px 1209px #FFF , 667px 1660px #FFF , 1413px 1034px #FFF , 931px 444px #FFF , 1363px 789px #FFF , 512px 455px #FFF , 233px 871px #FFF , 1220px 1757px #FFF , 1022px 1745px #FFF , 1117px 826px #FFF , 109px 1149px #FFF , 54px 312px #FFF , 65px 702px #FFF , 1881px 663px #FFF , 418px 602px #FFF , 813px 597px #FFF , 1910px 1156px #FFF , 1612px 1110px #FFF , 1103px 1684px #FFF , 103px 293px #FFF , 1095px 809px #FFF , 912px 858px #FFF , 1680px 564px #FFF , 849px 1652px #FFF , 1229px 1165px #FFF , 1656px 1483px #FFF , 586px 1367px #FFF , 1799px 1830px #FFF , 323px 1427px #FFF , 1640px 2px #FFF , 705px 1723px #FFF , 482px 15px #FFF , 1405px 1337px #FFF , 130px 816px #FFF , 129px 443px #FFF , 472px 932px #FFF , 590px 1709px #FFF , 914px 1213px #FFF , 1126px 536px #FFF , 1717px 25px #FFF , 1241px 1541px #FFF , 1048px 104px #FFF , 763px 1877px #FFF , 102px 808px #FFF , 374px 1652px #FFF , 1061px 1650px #FFF , 962px 607px #FFF , 1013px 1555px #FFF , 1537px 1520px #FFF , 1220px 137px #FFF , 79px 1758px #FFF , 374px 1227px #FFF , 851px 874px #FFF , 203px 1773px #FFF , 43px 898px #FFF , 1524px 1882px #FFF , 274px 1909px #FFF , 251px 953px #FFF , 1383px 1503px #FFF , 700px 1906px #FFF , 1436px 1254px #FFF , 620px 1365px #FFF , 1320px 449px #FFF , 665px 604px #FFF , 917px 1137px #FFF , 1986px 1160px #FFF , 1491px 1383px #FFF , 1705px 495px #FFF , 542px 180px #FFF , 206px 1836px #FFF , 1702px 1649px #FFF , 1413px 1436px #FFF , 1924px 1583px #FFF , 1422px 1104px #FFF , 1331px 7px #FFF , 399px 1994px #FFF , 1298px 83px #FFF , 1032px 974px #FFF , 556px 143px #FFF , 109px 325px #FFF , 256px 189px #FFF , 761px 1477px #FFF , 1727px 1136px #FFF , 735px 1731px #FFF , 1324px 1256px #FFF , 231px 1179px #FFF , 829px 61px #FFF , 1468px 1071px #FFF , 551px 557px #FFF , 1066px 1011px #FFF , 237px 1484px #FFF , 499px 1775px #FFF , 532px 186px #FFF , 1408px 1900px #FFF , 1790px 895px #FFF , 1271px 1154px #FFF , 656px 1686px #FFF , 1479px 1083px #FFF , 302px 1442px #FFF , 1530px 1884px #FFF , 466px 484px #FFF , 191px 1166px #FFF , 1090px 1343px #FFF , 1117px 460px #FFF , 1474px 1695px #FFF , 1909px 437px #FFF , 116px 583px #FFF , 1413px 1094px #FFF , 223px 416px #FFF , 46px 1759px #FFF , 1850px 1750px #FFF , 1831px 702px #FFF , 1988px 327px #FFF , 1597px 32px #FFF , 1396px 1310px #FFF , 594px 1165px #FFF , 486px 283px #FFF , 581px 766px #FFF , 1327px 618px #FFF , 1696px 1756px #FFF , 175px 1843px #FFF , 1011px 127px #FFF , 284px 1890px #FFF , 1590px 1618px #FFF , 1909px 263px #FFF , 690px 1394px #FFF , 706px 233px #FFF , 108px 1943px #FFF , 764px 59px #FFF , 1067px 1732px #FFF , 457px 1725px #FFF , 142px 1843px #FFF , 684px 587px #FFF , 647px 1527px #FFF , 1910px 1249px #FFF , 497px 1829px #FFF , 1534px 843px #FFF , 508px 1805px #FFF , 241px 1287px #FFF , 626px 802px #FFF , 1820px 396px #FFF , 1943px 1005px #FFF , 1774px 208px #FFF , 212px 1255px #FFF , 1771px 579px #FFF , 345px 466px #FFF , 1142px 899px #FFF , 599px 1411px #FFF , 1537px 1637px #FFF , 1980px 1254px #FFF , 1325px 1618px #FFF , 345px 228px #FFF , 1769px 1905px #FFF , 371px 874px #FFF , 38px 838px #FFF , 1067px 716px #FFF , 1728px 285px #FFF , 1710px 1667px #FFF , 1040px 554px #FFF , 1850px 1979px #FFF , 1990px 1308px #FFF , 974px 1713px #FFF , 864px 565px #FFF , 590px 1613px #FFF , 1192px 728px #FFF , 863px 1956px #FFF , 1865px 580px #FFF , 1065px 1254px #FFF , 1858px 1798px #FFF , 554px 369px #FFF , 1555px 759px #FFF , 1433px 506px #FFF , 1774px 600px #FFF , 1754px 458px #FFF , 1276px 1969px #FFF , 1242px 247px #FFF , 667px 961px #FFF , 49px 198px #FFF , 468px 637px #FFF , 654px 1468px #FFF , 1926px 933px #FFF , 591px 1027px #FFF , 1081px 352px #FFF , 586px 293px #FFF , 1292px 575px #FFF , 14px 1084px #FFF , 119px 465px #FFF , 1518px 872px #FFF , 974px 5px #FFF , 1611px 272px #FFF , 429px 145px #FFF , 1536px 653px #FFF , 1810px 1418px #FFF , 1872px 379px #FFF , 1343px 68px #FFF , 1941px 188px #FFF , 1739px 873px #FFF , 1987px 753px #FFF , 682px 1155px #FFF , 557px 595px #FFF , 319px 393px #FFF , 1150px 1905px #FFF , 275px 327px #FFF , 253px 1908px #FFF , 276px 30px #FFF , 1853px 27px #FFF , 238px 310px #FFF , 723px 328px #FFF , 1457px 1748px #FFF , 166px 1101px #FFF , 1908px 132px #FFF , 1350px 1240px #FFF , 1345px 1666px #FFF , 1796px 938px #FFF , 909px 1427px #FFF , 1291px 1734px #FFF , 925px 184px #FFF , 264px 886px #FFF , 1349px 1065px #FFF , 823px 1730px #FFF , 41px 228px #FFF , 736px 1444px #FFF , 973px 319px #FFF , 421px 198px #FFF , 483px 1850px #FFF , 549px 1610px #FFF , 843px 552px #FFF , 338px 850px #FFF , 1138px 34px #FFF , 1833px 491px #FFF , 1646px 21px #FFF , 419px 984px #FFF , 528px 1840px #FFF , 1270px 1444px #FFF , 896px 217px #FFF , 101px 603px #FFF , 241px 1335px #FFF , 175px 1312px #FFF , 1753px 279px #FFF , 1356px 1855px #FFF , 1121px 1946px #FFF , 966px 810px #FFF , 649px 529px #FFF , 382px 1911px #FFF , 923px 1411px #FFF , 1436px 858px #FFF , 74px 186px #FFF , 1534px 467px #FFF , 1445px 903px #FFF , 636px 350px #FFF , 527px 971px #FFF , 1336px 1056px #FFF , 1703px 812px #FFF , 1267px 229px #FFF , 1651px 1576px #FFF , 94px 536px #FFF , 461px 1907px #FFF , 1635px 2px #FFF , 1053px 507px #FFF , 1221px 255px #FFF , 800px 608px #FFF , 562px 1574px #FFF , 1085px 1011px #FFF , 206px 1883px #FFF , 829px 601px #FFF , 798px 101px #FFF , 243px 907px #FFF , 1888px 1367px #FFF , 83px 868px #FFF , 690px 531px #FFF , 1902px 765px #FFF , 354px 581px #FFF , 598px 1075px #FFF , 1183px 1840px #FFF , 899px 886px #FFF , 468px 1163px #FFF , 1365px 64px #FFF , 621px 842px #FFF , 765px 773px #FFF , 676px 746px #FFF , 1135px 755px #FFF , 1676px 828px #FFF;
    animation: animStar 70s linear infinite;
}
#stars:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 405px 294px #FFF , 337px 395px #FFF , 1553px 166px #FFF , 1644px 65px #FFF , 167px 85px #FFF , 165px 1029px #FFF , 1050px 517px #FFF , 839px 86px #FFF , 1974px 1097px #FFF , 1199px 1514px #FFF , 734px 1287px #FFF , 1569px 725px #FFF , 307px 161px #FFF , 1077px 1253px #FFF , 858px 1499px #FFF , 175px 1304px #FFF , 959px 1651px #FFF , 1762px 463px #FFF , 745px 1228px #FFF , 1807px 993px #FFF , 268px 1890px #FFF , 39px 290px #FFF , 547px 1027px #FFF , 259px 724px #FFF , 23px 582px #FFF , 936px 1570px #FFF , 1473px 70px #FFF , 1597px 40px #FFF , 1534px 1149px #FFF , 1494px 1392px #FFF , 943px 1801px #FFF , 1057px 1736px #FFF , 877px 1030px #FFF , 1460px 910px #FFF , 234px 1277px #FFF , 1289px 1801px #FFF , 1448px 348px #FFF , 1033px 1558px #FFF , 1819px 1564px #FFF , 333px 1283px #FFF , 660px 1441px #FFF , 1242px 720px #FFF , 1551px 1326px #FFF , 1154px 1805px #FFF , 1314px 617px #FFF , 690px 1741px #FFF , 579px 861px #FFF , 1424px 1479px #FFF , 1228px 846px #FFF , 644px 432px #FFF , 52px 1305px #FFF , 1838px 746px #FFF , 1499px 201px #FFF , 1935px 674px #FFF , 4px 627px #FFF , 1985px 875px #FFF , 295px 382px #FFF , 688px 1263px #FFF , 1684px 1792px #FFF , 1706px 1072px #FFF , 1456px 473px #FFF , 1357px 452px #FFF , 131px 1249px #FFF , 898px 1901px #FFF , 1066px 1638px #FFF , 601px 391px #FFF , 1800px 149px #FFF , 1631px 1722px #FFF , 713px 986px #FFF , 901px 640px #FFF , 820px 533px #FFF , 907px 940px #FFF , 801px 59px #FFF , 1894px 1168px #FFF , 428px 46px #FFF , 1615px 787px #FFF , 288px 74px #FFF , 1534px 761px #FFF , 1653px 762px #FFF , 856px 1962px #FFF , 676px 1682px #FFF , 355px 1181px #FFF , 1906px 1834px #FFF , 467px 1419px #FFF , 209px 2000px #FFF , 89px 1029px #FFF , 1160px 1199px #FFF , 1285px 1847px #FFF , 1672px 639px #FFF , 92px 383px #FFF , 1529px 469px #FFF , 918px 1937px #FFF , 1280px 1035px #FFF , 472px 928px #FFF , 425px 1036px #FFF , 842px 633px #FFF , 195px 321px #FFF , 871px 826px #FFF , 1272px 155px #FFF , 1415px 1195px #FFF , 1275px 1860px #FFF , 612px 1775px #FFF , 473px 634px #FFF , 493px 886px #FFF , 952px 470px #FFF , 1138px 1642px #FFF , 68px 111px #FFF , 1569px 892px #FFF , 586px 1888px #FFF , 1369px 234px #FFF , 1933px 305px #FFF , 1392px 987px #FFF , 1905px 912px #FFF , 599px 801px #FFF , 109px 347px #FFF , 364px 1465px #FFF , 1007px 1725px #FFF , 438px 1477px #FFF , 1512px 837px #FFF , 1869px 1142px #FFF , 1600px 1268px #FFF , 1599px 704px #FFF , 1847px 814px #FFF , 566px 1790px #FFF , 323px 791px #FFF , 1691px 936px #FFF , 791px 1395px #FFF , 1161px 1971px #FFF , 694px 1430px #FFF , 1635px 1488px #FFF , 166px 839px #FFF , 178px 1068px #FFF , 119px 279px #FFF , 421px 920px #FFF , 156px 138px #FFF , 1968px 1350px #FFF , 1787px 431px #FFF , 159px 1666px #FFF , 1181px 1307px #FFF , 135px 1757px #FFF , 1460px 207px #FFF , 1037px 202px #FFF , 557px 1467px #FFF , 409px 1233px #FFF , 790px 89px #FFF , 1721px 716px #FFF , 1111px 1838px #FFF , 354px 1348px #FFF , 135px 1099px #FFF , 1993px 38px #FFF , 1771px 490px #FFF , 757px 1764px #FFF , 1343px 1545px #FFF , 874px 1039px #FFF , 344px 850px #FFF , 354px 1937px #FFF , 398px 1995px #FFF , 1793px 351px #FFF , 1262px 637px #FFF , 1852px 544px #FFF , 184px 1340px #FFF , 1725px 1706px #FFF , 118px 1823px #FFF , 280px 52px #FFF , 1729px 464px #FFF , 967px 1621px #FFF , 1042px 621px #FFF , 1599px 1367px #FFF , 173px 288px #FFF , 568px 1765px #FFF , 367px 717px #FFF , 1458px 918px #FFF , 1840px 463px #FFF , 212px 552px #FFF , 1898px 1613px #FFF , 962px 1901px #FFF , 626px 918px #FFF , 1266px 1043px #FFF , 1150px 342px #FFF , 456px 1500px #FFF , 1171px 1499px #FFF , 664px 913px #FFF , 1581px 1545px #FFF , 433px 1127px #FFF , 1534px 1007px #FFF , 209px 298px #FFF , 527px 748px #FFF , 1483px 1083px #FFF , 973px 518px #FFF , 565px 866px #FFF , 868px 1656px #FFF , 1435px 1432px #FFF , 481px 1368px #FFF , 1375px 924px #FFF , 291px 277px #FFF , 590px 1330px #FFF , 1218px 1858px #FFF , 428px 924px #FFF , 925px 1624px #FFF , 1394px 102px #FFF , 1360px 81px #FFF , 832px 64px #FFF , 570px 855px #FFF , 257px 783px #FFF , 1636px 1350px #FFF , 290px 732px #FFF , 323px 55px #FFF , 1068px 319px #FFF , 1798px 127px #FFF , 788px 804px #FFF , 1214px 1621px #FFF , 339px 705px #FFF , 1822px 806px #FFF , 1463px 753px #FFF , 1685px 1433px #FFF , 397px 1619px #FFF , 1598px 275px #FFF , 1059px 1766px #FFF , 400px 1293px #FFF , 1674px 693px #FFF , 1053px 733px #FFF , 549px 333px #FFF , 406px 1564px #FFF , 48px 166px #FFF , 827px 1096px #FFF , 574px 1203px #FFF , 602px 140px #FFF , 440px 1683px #FFF , 591px 616px #FFF , 1104px 938px #FFF , 621px 1374px #FFF , 515px 681px #FFF , 355px 873px #FFF , 1488px 1537px #FFF , 1379px 841px #FFF , 286px 608px #FFF , 850px 1054px #FFF , 325px 615px #FFF , 1186px 1911px #FFF , 798px 787px #FFF , 994px 655px #FFF , 1333px 1025px #FFF , 505px 883px #FFF , 13px 1574px #FFF , 1575px 1330px #FFF , 927px 126px #FFF , 958px 705px #FFF , 1939px 1617px #FFF , 1435px 1190px #FFF , 106px 1174px #FFF , 1718px 1648px #FFF , 1091px 1129px #FFF , 438px 1534px #FFF , 901px 235px #FFF , 1789px 1561px #FFF , 1267px 868px #FFF , 127px 492px #FFF , 360px 15px #FFF , 1503px 917px #FFF , 1792px 1352px #FFF , 107px 1516px #FFF , 689px 1085px #FFF , 551px 1772px #FFF , 1675px 1567px #FFF , 1089px 1808px #FFF , 1473px 710px #FFF , 464px 1498px #FFF , 1341px 779px #FFF , 897px 410px #FFF , 1056px 494px #FFF , 304px 598px #FFF , 1394px 960px #FFF , 462px 1184px #FFF , 859px 1729px #FFF , 1460px 1612px #FFF , 1229px 1891px #FFF , 1466px 692px #FFF , 851px 1409px #FFF , 116px 459px #FFF , 13px 476px #FFF , 1334px 281px #FFF , 180px 1223px #FFF , 219px 134px #FFF , 238px 913px #FFF , 32px 878px #FFF , 551px 1638px #FFF , 1961px 516px #FFF , 1192px 1158px #FFF , 1546px 1941px #FFF , 1563px 571px #FFF , 434px 1483px #FFF , 254px 1620px #FFF , 965px 1285px #FFF , 1850px 1709px #FFF , 1622px 118px #FFF , 412px 1364px #FFF , 586px 1738px #FFF , 353px 1560px #FFF , 1520px 1736px #FFF , 1146px 1739px #FFF , 946px 1947px #FFF , 1658px 1632px #FFF , 825px 1763px #FFF , 1930px 637px #FFF , 1082px 658px #FFF , 1274px 1574px #FFF , 1382px 444px #FFF , 1016px 923px #FFF , 876px 323px #FFF , 1894px 83px #FFF , 1630px 394px #FFF , 1142px 1868px #FFF , 334px 1471px #FFF , 1004px 207px #FFF , 1491px 762px #FFF , 725px 1894px #FFF , 1552px 1886px #FFF , 1341px 1234px #FFF , 1723px 848px #FFF , 991px 1326px #FFF , 1500px 95px #FFF , 1028px 1224px #FFF , 1385px 1323px #FFF , 714px 1171px #FFF , 1540px 310px #FFF , 158px 371px #FFF , 119px 1624px #FFF , 1635px 1496px #FFF , 526px 1655px #FFF , 1383px 1203px #FFF , 479px 421px #FFF , 1173px 1545px #FFF , 1711px 32px #FFF , 1840px 1251px #FFF , 1510px 864px #FFF , 281px 133px #FFF , 1819px 1866px #FFF , 655px 1944px #FFF , 926px 91px #FFF , 1402px 624px #FFF , 1551px 305px #FFF , 1590px 115px #FFF , 1047px 850px #FFF , 1096px 183px #FFF , 240px 836px #FFF , 1011px 409px #FFF , 184px 736px #FFF , 434px 165px #FFF , 22px 1715px #FFF , 486px 1780px #FFF , 813px 246px #FFF , 963px 1010px #FFF , 1405px 428px #FFF , 57px 1996px #FFF , 686px 1385px #FFF , 633px 1179px #FFF , 961px 1997px #FFF , 988px 503px #FFF , 50px 1865px #FFF , 1086px 1286px #FFF , 678px 1391px #FFF , 1068px 1846px #FFF , 360px 1933px #FFF , 572px 653px #FFF , 439px 979px #FFF , 496px 1149px #FFF , 1052px 928px #FFF , 1955px 267px #FFF , 980px 934px #FFF , 127px 443px #FFF , 555px 1188px #FFF , 1043px 146px #FFF , 726px 908px #FFF , 1944px 1729px #FFF , 45px 32px #FFF , 1460px 754px #FFF , 1881px 1853px #FFF , 1795px 991px #FFF , 1537px 203px #FFF , 1589px 1028px #FFF , 1016px 81px #FFF , 522px 1733px #FFF , 1460px 382px #FFF , 1207px 807px #FFF , 1691px 565px #FFF , 305px 1292px #FFF , 542px 580px #FFF , 798px 1950px #FFF , 888px 1585px #FFF , 1727px 411px #FFF , 1051px 561px #FFF , 623px 1990px #FFF , 449px 1410px #FFF , 1398px 1558px #FFF , 1239px 586px #FFF , 1230px 1898px #FFF , 1101px 1650px #FFF , 132px 1112px #FFF , 1646px 369px #FFF , 397px 1921px #FFF , 1023px 857px #FFF , 28px 399px #FFF , 1927px 105px #FFF , 1169px 123px #FFF , 1258px 788px #FFF , 1244px 1346px #FFF , 302px 1713px #FFF , 1567px 537px #FFF , 267px 1622px #FFF , 692px 1043px #FFF , 1680px 1176px #FFF , 1121px 697px #FFF , 1694px 1524px #FFF , 313px 1596px #FFF , 1729px 1777px #FFF , 821px 200px #FFF , 522px 1445px #FFF , 282px 1791px #FFF , 566px 1209px #FFF , 667px 1660px #FFF , 1413px 1034px #FFF , 931px 444px #FFF , 1363px 789px #FFF , 512px 455px #FFF , 233px 871px #FFF , 1220px 1757px #FFF , 1022px 1745px #FFF , 1117px 826px #FFF , 109px 1149px #FFF , 54px 312px #FFF , 65px 702px #FFF , 1881px 663px #FFF , 418px 602px #FFF , 813px 597px #FFF , 1910px 1156px #FFF , 1612px 1110px #FFF , 1103px 1684px #FFF , 103px 293px #FFF , 1095px 809px #FFF , 912px 858px #FFF , 1680px 564px #FFF , 849px 1652px #FFF , 1229px 1165px #FFF , 1656px 1483px #FFF , 586px 1367px #FFF , 1799px 1830px #FFF , 323px 1427px #FFF , 1640px 2px #FFF , 705px 1723px #FFF , 482px 15px #FFF , 1405px 1337px #FFF , 130px 816px #FFF , 129px 443px #FFF , 472px 932px #FFF , 590px 1709px #FFF , 914px 1213px #FFF , 1126px 536px #FFF , 1717px 25px #FFF , 1241px 1541px #FFF , 1048px 104px #FFF , 763px 1877px #FFF , 102px 808px #FFF , 374px 1652px #FFF , 1061px 1650px #FFF , 962px 607px #FFF , 1013px 1555px #FFF , 1537px 1520px #FFF , 1220px 137px #FFF , 79px 1758px #FFF , 374px 1227px #FFF , 851px 874px #FFF , 203px 1773px #FFF , 43px 898px #FFF , 1524px 1882px #FFF , 274px 1909px #FFF , 251px 953px #FFF , 1383px 1503px #FFF , 700px 1906px #FFF , 1436px 1254px #FFF , 620px 1365px #FFF , 1320px 449px #FFF , 665px 604px #FFF , 917px 1137px #FFF , 1986px 1160px #FFF , 1491px 1383px #FFF , 1705px 495px #FFF , 542px 180px #FFF , 206px 1836px #FFF , 1702px 1649px #FFF , 1413px 1436px #FFF , 1924px 1583px #FFF , 1422px 1104px #FFF , 1331px 7px #FFF , 399px 1994px #FFF , 1298px 83px #FFF , 1032px 974px #FFF , 556px 143px #FFF , 109px 325px #FFF , 256px 189px #FFF , 761px 1477px #FFF , 1727px 1136px #FFF , 735px 1731px #FFF , 1324px 1256px #FFF , 231px 1179px #FFF , 829px 61px #FFF , 1468px 1071px #FFF , 551px 557px #FFF , 1066px 1011px #FFF , 237px 1484px #FFF , 499px 1775px #FFF , 532px 186px #FFF , 1408px 1900px #FFF , 1790px 895px #FFF , 1271px 1154px #FFF , 656px 1686px #FFF , 1479px 1083px #FFF , 302px 1442px #FFF , 1530px 1884px #FFF , 466px 484px #FFF , 191px 1166px #FFF , 1090px 1343px #FFF , 1117px 460px #FFF , 1474px 1695px #FFF , 1909px 437px #FFF , 116px 583px #FFF , 1413px 1094px #FFF , 223px 416px #FFF , 46px 1759px #FFF , 1850px 1750px #FFF , 1831px 702px #FFF , 1988px 327px #FFF , 1597px 32px #FFF , 1396px 1310px #FFF , 594px 1165px #FFF , 486px 283px #FFF , 581px 766px #FFF , 1327px 618px #FFF , 1696px 1756px #FFF , 175px 1843px #FFF , 1011px 127px #FFF , 284px 1890px #FFF , 1590px 1618px #FFF , 1909px 263px #FFF , 690px 1394px #FFF , 706px 233px #FFF , 108px 1943px #FFF , 764px 59px #FFF , 1067px 1732px #FFF , 457px 1725px #FFF , 142px 1843px #FFF , 684px 587px #FFF , 647px 1527px #FFF , 1910px 1249px #FFF , 497px 1829px #FFF , 1534px 843px #FFF , 508px 1805px #FFF , 241px 1287px #FFF , 626px 802px #FFF , 1820px 396px #FFF , 1943px 1005px #FFF , 1774px 208px #FFF , 212px 1255px #FFF , 1771px 579px #FFF , 345px 466px #FFF , 1142px 899px #FFF , 599px 1411px #FFF , 1537px 1637px #FFF , 1980px 1254px #FFF , 1325px 1618px #FFF , 345px 228px #FFF , 1769px 1905px #FFF , 371px 874px #FFF , 38px 838px #FFF , 1067px 716px #FFF , 1728px 285px #FFF , 1710px 1667px #FFF , 1040px 554px #FFF , 1850px 1979px #FFF , 1990px 1308px #FFF , 974px 1713px #FFF , 864px 565px #FFF , 590px 1613px #FFF , 1192px 728px #FFF , 863px 1956px #FFF , 1865px 580px #FFF , 1065px 1254px #FFF , 1858px 1798px #FFF , 554px 369px #FFF , 1555px 759px #FFF , 1433px 506px #FFF , 1774px 600px #FFF , 1754px 458px #FFF , 1276px 1969px #FFF , 1242px 247px #FFF , 667px 961px #FFF , 49px 198px #FFF , 468px 637px #FFF , 654px 1468px #FFF , 1926px 933px #FFF , 591px 1027px #FFF , 1081px 352px #FFF , 586px 293px #FFF , 1292px 575px #FFF , 14px 1084px #FFF , 119px 465px #FFF , 1518px 872px #FFF , 974px 5px #FFF , 1611px 272px #FFF , 429px 145px #FFF , 1536px 653px #FFF , 1810px 1418px #FFF , 1872px 379px #FFF , 1343px 68px #FFF , 1941px 188px #FFF , 1739px 873px #FFF , 1987px 753px #FFF , 682px 1155px #FFF , 557px 595px #FFF , 319px 393px #FFF , 1150px 1905px #FFF , 275px 327px #FFF , 253px 1908px #FFF , 276px 30px #FFF , 1853px 27px #FFF , 238px 310px #FFF , 723px 328px #FFF , 1457px 1748px #FFF , 166px 1101px #FFF , 1908px 132px #FFF , 1350px 1240px #FFF , 1345px 1666px #FFF , 1796px 938px #FFF , 909px 1427px #FFF , 1291px 1734px #FFF , 925px 184px #FFF , 264px 886px #FFF , 1349px 1065px #FFF , 823px 1730px #FFF , 41px 228px #FFF , 736px 1444px #FFF , 973px 319px #FFF , 421px 198px #FFF , 483px 1850px #FFF , 549px 1610px #FFF , 843px 552px #FFF , 338px 850px #FFF , 1138px 34px #FFF , 1833px 491px #FFF , 1646px 21px #FFF , 419px 984px #FFF , 528px 1840px #FFF , 1270px 1444px #FFF , 896px 217px #FFF , 101px 603px #FFF , 241px 1335px #FFF , 175px 1312px #FFF , 1753px 279px #FFF , 1356px 1855px #FFF , 1121px 1946px #FFF , 966px 810px #FFF , 649px 529px #FFF , 382px 1911px #FFF , 923px 1411px #FFF , 1436px 858px #FFF , 74px 186px #FFF , 1534px 467px #FFF , 1445px 903px #FFF , 636px 350px #FFF , 527px 971px #FFF , 1336px 1056px #FFF , 1703px 812px #FFF , 1267px 229px #FFF , 1651px 1576px #FFF , 94px 536px #FFF , 461px 1907px #FFF , 1635px 2px #FFF , 1053px 507px #FFF , 1221px 255px #FFF , 800px 608px #FFF , 562px 1574px #FFF , 1085px 1011px #FFF , 206px 1883px #FFF , 829px 601px #FFF , 798px 101px #FFF , 243px 907px #FFF , 1888px 1367px #FFF , 83px 868px #FFF , 690px 531px #FFF , 1902px 765px #FFF , 354px 581px #FFF , 598px 1075px #FFF , 1183px 1840px #FFF , 899px 886px #FFF , 468px 1163px #FFF , 1365px 64px #FFF , 621px 842px #FFF , 765px 773px #FFF , 676px 746px #FFF , 1135px 755px #FFF , 1676px 828px #FFF;
    animation: animStar 70s linear infinite;
}

/* 4. 第二層星星 (中等) */
#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 296px 1103px #FFF , 392px 1409px #FFF , 1698px 155px #FFF , 1801px 1883px #FFF , 354px 472px #FFF , 182px 795px #FFF , 1032px 1735px #FFF , 1978px 227px #FFF , 847px 871px #FFF , 103px 1660px #FFF , 954px 1569px #FFF , 1324px 1925px #FFF , 1096px 787px #FFF , 148px 417px #FFF , 1285px 917px #FFF , 510px 904px #FFF , 764px 1761px #FFF , 634px 987px #FFF , 1369px 562px #FFF , 1843px 1086px #FFF , 1004px 890px #FFF , 1189px 1996px #FFF , 1330px 1657px #FFF , 1428px 23px #FFF , 1193px 108px #FFF , 866px 636px #FFF , 1379px 1935px #FFF , 1729px 1311px #FFF , 1369px 233px #FFF , 291px 477px #FFF , 566px 35px #FFF , 1243px 954px #FFF , 1130px 46px #FFF , 132px 195px #FFF , 1737px 1989px #FFF , 536px 249px #FFF , 1584px 381px #FFF , 1642px 1870px #FFF , 724px 1822px #FFF , 613px 752px #FFF , 1437px 1053px #FFF , 906px 898px #FFF , 1121px 1741px #FFF , 809px 1270px #FFF , 145px 1239px #FFF , 227px 814px #FFF , 549px 938px #FFF , 90px 518px #FFF , 428px 1793px #FFF , 1401px 33px #FFF , 920px 109px #FFF , 127px 281px #FFF , 1966px 811px #FFF , 304px 1316px #FFF , 675px 1928px #FFF , 1363px 38px #FFF , 399px 1361px #FFF , 1029px 829px #FFF , 876px 1068px #FFF , 1522px 1477px #FFF , 337px 2000px #FFF , 1046px 1475px #FFF , 1489px 65px #FFF , 1875px 1247px #FFF , 1151px 631px #FFF , 867px 862px #FFF , 1346px 648px #FFF , 1862px 1189px #FFF , 900px 1065px #FFF , 1765px 1228px #FFF , 472px 341px #FFF , 354px 1191px #FFF , 889px 1719px #FFF , 1758px 1301px #FFF , 631px 1895px #FFF , 1597px 1468px #FFF , 1505px 1879px #FFF , 1323px 1335px #FFF , 401px 1915px #FFF , 1075px 62px #FFF , 1941px 1116px #FFF , 1138px 991px #FFF , 73px 472px #FFF , 163px 1374px #FFF , 148px 1712px #FFF , 1120px 257px #FFF , 1389px 1151px #FFF , 1452px 1001px #FFF , 181px 905px #FFF , 1956px 1475px #FFF , 175px 782px #FFF , 1196px 966px #FFF , 1867px 1028px #FFF , 1294px 1540px #FFF , 1005px 545px #FFF , 1604px 475px #FFF , 1040px 1734px #FFF , 358px 1172px #FFF , 1783px 1920px #FFF , 1584px 691px #FFF , 1617px 1402px #FFF , 1582px 1399px #FFF , 222px 607px #FFF , 1322px 1587px #FFF , 1472px 1353px #FFF , 1209px 1155px #FFF , 1299px 735px #FFF , 1987px 372px #FFF , 1189px 127px #FFF , 407px 139px #FFF , 977px 421px #FFF , 1685px 309px #FFF , 1893px 1539px #FFF , 672px 1640px #FFF , 1592px 645px #FFF , 1523px 1702px #FFF , 1629px 1319px #FFF , 1127px 1365px #FFF , 852px 653px #FFF , 1756px 1825px #FFF , 1123px 321px #FFF , 117px 1907px #FFF , 662px 61px #FFF , 209px 1016px #FFF , 391px 900px #FFF , 1695px 642px #FFF , 1639px 592px #FFF , 598px 32px #FFF , 1420px 821px #FFF , 296px 1106px #FFF , 1433px 1346px #FFF , 942px 633px #FFF , 119px 192px #FFF , 411px 1212px #FFF , 1733px 1063px #FFF , 870px 1048px #FFF , 254px 1153px #FFF , 905px 1206px #FFF , 363px 771px #FFF , 792px 100px #FFF , 1214px 472px #FFF , 1577px 420px #FFF , 1140px 1821px #FFF , 681px 881px #FFF , 1344px 1493px #FFF , 516px 743px #FFF , 1872px 1348px #FFF , 1156px 1919px #FFF , 1145px 1856px #FFF , 1217px 265px #FFF , 1999px 1707px #FFF , 427px 248px #FFF , 1079px 1173px #FFF , 424px 690px #FFF , 504px 536px #FFF , 202px 1051px #FFF , 236px 1432px #FFF , 755px 1551px #FFF , 232px 707px #FFF , 1893px 82px #FFF , 1675px 1057px #FFF , 1585px 1580px #FFF , 1500px 1614px #FFF , 1139px 1061px #FFF , 873px 493px #FFF , 1932px 1169px #FFF , 1898px 885px #FFF , 1883px 8px #FFF , 1455px 287px #FFF , 1059px 801px #FFF , 77px 1093px #FFF , 94px 1292px #FFF , 1692px 609px #FFF , 1449px 1861px #FFF , 517px 1828px #FFF , 1240px 1245px #FFF , 118px 973px #FFF , 510px 1230px #FFF , 1712px 1537px #FFF , 1218px 949px #FFF , 855px 1343px #FFF , 618px 1591px #FFF , 1533px 1937px #FFF , 587px 966px #FFF , 1929px 212px #FFF , 917px 738px #FFF , 1736px 262px #FFF , 1804px 1774px #FFF , 1109px 1955px #FFF , 724px 752px #FFF , 1558px 566px #FFF , 1739px 1551px #FFF , 1420px 701px #FFF , 1436px 1282px #FFF , 1459px 160px #FFF , 343px 1794px #FFF , 1976px 46px #FFF , 1694px 430px #FFF , 1848px 1381px #FFF , 207px 37px #FFF;
    animation: animStar 100s linear infinite;
}
#stars2:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 296px 1103px #FFF , 392px 1409px #FFF , 1698px 155px #FFF , 1801px 1883px #FFF , 354px 472px #FFF , 182px 795px #FFF , 1032px 1735px #FFF , 1978px 227px #FFF , 847px 871px #FFF , 103px 1660px #FFF , 954px 1569px #FFF , 1324px 1925px #FFF , 1096px 787px #FFF , 148px 417px #FFF , 1285px 917px #FFF , 510px 904px #FFF , 764px 1761px #FFF , 634px 987px #FFF , 1369px 562px #FFF , 1843px 1086px #FFF , 1004px 890px #FFF , 1189px 1996px #FFF , 1330px 1657px #FFF , 1428px 23px #FFF , 1193px 108px #FFF , 866px 636px #FFF , 1379px 1935px #FFF , 1729px 1311px #FFF , 1369px 233px #FFF , 291px 477px #FFF , 566px 35px #FFF , 1243px 954px #FFF , 1130px 46px #FFF , 132px 195px #FFF , 1737px 1989px #FFF , 536px 249px #FFF , 1584px 381px #FFF , 1642px 1870px #FFF , 724px 1822px #FFF , 613px 752px #FFF , 1437px 1053px #FFF , 906px 898px #FFF , 1121px 1741px #FFF , 809px 1270px #FFF , 145px 1239px #FFF , 227px 814px #FFF , 549px 938px #FFF , 90px 518px #FFF , 428px 1793px #FFF , 1401px 33px #FFF , 920px 109px #FFF , 127px 281px #FFF , 1966px 811px #FFF , 304px 1316px #FFF , 675px 1928px #FFF , 1363px 38px #FFF , 399px 1361px #FFF , 1029px 829px #FFF , 876px 1068px #FFF , 1522px 1477px #FFF , 337px 2000px #FFF , 1046px 1475px #FFF , 1489px 65px #FFF , 1875px 1247px #FFF , 1151px 631px #FFF , 867px 862px #FFF , 1346px 648px #FFF , 1862px 1189px #FFF , 900px 1065px #FFF , 1765px 1228px #FFF , 472px 341px #FFF , 354px 1191px #FFF , 889px 1719px #FFF , 1758px 1301px #FFF , 631px 1895px #FFF , 1597px 1468px #FFF , 1505px 1879px #FFF , 1323px 1335px #FFF , 401px 1915px #FFF , 1075px 62px #FFF , 1941px 1116px #FFF , 1138px 991px #FFF , 73px 472px #FFF , 163px 1374px #FFF , 148px 1712px #FFF , 1120px 257px #FFF , 1389px 1151px #FFF , 1452px 1001px #FFF , 181px 905px #FFF , 1956px 1475px #FFF , 175px 782px #FFF , 1196px 966px #FFF , 1867px 1028px #FFF , 1294px 1540px #FFF , 1005px 545px #FFF , 1604px 475px #FFF , 1040px 1734px #FFF , 358px 1172px #FFF , 1783px 1920px #FFF , 1584px 691px #FFF , 1617px 1402px #FFF , 1582px 1399px #FFF , 222px 607px #FFF , 1322px 1587px #FFF , 1472px 1353px #FFF , 1209px 1155px #FFF , 1299px 735px #FFF , 1987px 372px #FFF , 1189px 127px #FFF , 407px 139px #FFF , 977px 421px #FFF , 1685px 309px #FFF , 1893px 1539px #FFF , 672px 1640px #FFF , 1592px 645px #FFF , 1523px 1702px #FFF , 1629px 1319px #FFF , 1127px 1365px #FFF , 852px 653px #FFF , 1756px 1825px #FFF , 1123px 321px #FFF , 117px 1907px #FFF , 662px 61px #FFF , 209px 1016px #FFF , 391px 900px #FFF , 1695px 642px #FFF , 1639px 592px #FFF , 598px 32px #FFF , 1420px 821px #FFF , 296px 1106px #FFF , 1433px 1346px #FFF , 942px 633px #FFF , 119px 192px #FFF , 411px 1212px #FFF , 1733px 1063px #FFF , 870px 1048px #FFF , 254px 1153px #FFF , 905px 1206px #FFF , 363px 771px #FFF , 792px 100px #FFF , 1214px 472px #FFF , 1577px 420px #FFF , 1140px 1821px #FFF , 681px 881px #FFF , 1344px 1493px #FFF , 516px 743px #FFF , 1872px 1348px #FFF , 1156px 1919px #FFF , 1145px 1856px #FFF , 1217px 265px #FFF , 1999px 1707px #FFF , 427px 248px #FFF , 1079px 1173px #FFF , 424px 690px #FFF , 504px 536px #FFF , 202px 1051px #FFF , 236px 1432px #FFF , 755px 1551px #FFF , 232px 707px #FFF , 1893px 82px #FFF , 1675px 1057px #FFF , 1585px 1580px #FFF , 1500px 1614px #FFF , 1139px 1061px #FFF , 873px 493px #FFF , 1932px 1169px #FFF , 1898px 885px #FFF , 1883px 8px #FFF , 1455px 287px #FFF , 1059px 801px #FFF , 77px 1093px #FFF , 94px 1292px #FFF , 1692px 609px #FFF , 1449px 1861px #FFF , 517px 1828px #FFF , 1240px 1245px #FFF , 118px 973px #FFF , 510px 1230px #FFF , 1712px 1537px #FFF , 1218px 949px #FFF , 855px 1343px #FFF , 618px 1591px #FFF , 1533px 1937px #FFF , 587px 966px #FFF , 1929px 212px #FFF , 917px 738px #FFF , 1736px 262px #FFF , 1804px 1774px #FFF , 1109px 1955px #FFF , 724px 752px #FFF , 1558px 566px #FFF , 1739px 1551px #FFF , 1420px 701px #FFF , 1436px 1282px #FFF , 1459px 160px #FFF , 343px 1794px #FFF , 1976px 46px #FFF , 1694px 430px #FFF , 1848px 1381px #FFF , 207px 37px #FFF;
    animation: animStar 100s linear infinite;
}

/* 5. 第三層星星 (大、極慢) */
#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 1812px 705px #FFF , 1784px 3px #FFF , 82px 39px #FFF , 122px 1209px #FFF , 1762px 1354px #FFF , 225px 516px #FFF , 1341px 195px #FFF , 1263px 253px #FFF , 454px 52px #FFF , 1669px 1056px #FFF , 1716px 731px #FFF , 1385px 1898px #FFF , 985px 334px #FFF , 1574px 380px #FFF , 610px 294px #FFF , 1195px 992px #FFF , 266px 193px #FFF , 1703px 1529px #FFF , 42px 765px #FFF , 549px 1574px #FFF , 1932px 1368px #FFF , 562px 1778px #FFF , 356px 1548px #FFF , 653px 839px #FFF , 457px 436px #FFF , 1497px 726px #FFF , 21px 552px #FFF , 1438px 1183px #FFF , 1px 138px #FFF , 1664px 27px #FFF , 862px 484px #FFF , 513px 1581px #FFF , 1474px 463px #FFF , 1001px 1317px #FFF , 178px 1525px #FFF , 75px 130px #FFF , 841px 153px #FFF , 1163px 421px #FFF , 1389px 59px #FFF , 1899px 159px #FFF , 647px 866px #FFF , 705px 1892px #FFF , 1534px 175px #FFF , 990px 1398px #FFF , 942px 232px #FFF , 92px 1563px #FFF , 286px 1989px #FFF , 1572px 160px #FFF , 1831px 1588px #FFF , 1766px 1958px #FFF , 1833px 245px #FFF , 695px 282px #FFF , 1621px 337px #FFF , 550px 1633px #FFF , 1850px 332px #FFF , 1061px 856px #FFF , 1999px 43px #FFF , 1657px 1619px #FFF , 87px 336px #FFF , 1333px 1561px #FFF , 1894px 1334px #FFF , 1649px 781px #FFF , 1644px 131px #FFF , 68px 82px #FFF , 454px 1217px #FFF , 1457px 1707px #FFF , 1529px 609px #FFF , 1085px 1363px #FFF , 425px 1523px #FFF , 41px 1574px #FFF , 2px 1563px #FFF , 1300px 1028px #FFF , 293px 1519px #FFF , 1516px 140px #FFF , 1998px 1103px #FFF , 645px 219px #FFF , 1006px 800px #FFF , 1460px 892px #FFF , 1117px 967px #FFF , 1343px 636px #FFF , 1419px 717px #FFF , 1257px 467px #FFF , 1405px 1410px #FFF , 540px 1639px #FFF , 1358px 419px #FFF , 896px 1446px #FFF , 1423px 264px #FFF , 1186px 137px #FFF , 1904px 618px #FFF , 1775px 1653px #FFF , 744px 470px #FFF , 102px 1389px #FFF , 1505px 1171px #FFF , 1700px 373px #FFF , 175px 398px #FFF , 1754px 329px #FFF , 75px 115px #FFF , 1373px 860px #FFF , 1774px 1512px #FFF , 1968px 1750px #FFF;
    animation: animStar 150s linear infinite;
}
#stars3:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 1812px 705px #FFF , 1784px 3px #FFF , 82px 39px #FFF , 122px 1209px #FFF , 1762px 1354px #FFF , 225px 516px #FFF , 1341px 195px #FFF , 1263px 253px #FFF , 454px 52px #FFF , 1669px 1056px #FFF , 1716px 731px #FFF , 1385px 1898px #FFF , 985px 334px #FFF , 1574px 380px #FFF , 610px 294px #FFF , 1195px 992px #FFF , 266px 193px #FFF , 1703px 1529px #FFF , 42px 765px #FFF , 549px 1574px #FFF , 1932px 1368px #FFF , 562px 1778px #FFF , 356px 1548px #FFF , 653px 839px #FFF , 457px 436px #FFF , 1497px 726px #FFF , 21px 552px #FFF , 1438px 1183px #FFF , 1px 138px #FFF , 1664px 27px #FFF , 862px 484px #FFF , 513px 1581px #FFF , 1474px 463px #FFF , 1001px 1317px #FFF , 178px 1525px #FFF , 75px 130px #FFF , 841px 153px #FFF , 1163px 421px #FFF , 1389px 59px #FFF , 1899px 159px #FFF , 647px 866px #FFF , 705px 1892px #FFF , 1534px 175px #FFF , 990px 1398px #FFF , 942px 232px #FFF , 92px 1563px #FFF , 286px 1989px #FFF , 1572px 160px #FFF , 1831px 1588px #FFF , 1766px 1958px #FFF , 1833px 245px #FFF , 695px 282px #FFF , 1621px 337px #FFF , 550px 1633px #FFF , 1850px 332px #FFF , 1061px 856px #FFF , 1999px 43px #FFF , 1657px 1619px #FFF , 87px 336px #FFF , 1333px 1561px #FFF , 1894px 1334px #FFF , 1649px 781px #FFF , 1644px 131px #FFF , 68px 82px #FFF , 454px 1217px #FFF , 1457px 1707px #FFF , 1529px 609px #FFF , 1085px 1363px #FFF , 425px 1523px #FFF , 41px 1574px #FFF , 2px 1563px #FFF , 1300px 1028px #FFF , 293px 1519px #FFF , 1516px 140px #FFF , 1998px 1103px #FFF , 645px 219px #FFF , 1006px 800px #FFF , 1460px 892px #FFF , 1117px 967px #FFF , 1343px 636px #FFF , 1419px 717px #FFF , 1257px 467px #FFF , 1405px 1410px #FFF , 540px 1639px #FFF , 1358px 419px #FFF , 896px 1446px #FFF , 1423px 264px #FFF , 1186px 137px #FFF , 1904px 618px #FFF , 1775px 1653px #FFF , 744px 470px #FFF , 102px 1389px #FFF , 1505px 1171px #FFF , 1700px 373px #FFF , 175px 398px #FFF , 1754px 329px #FFF , 75px 115px #FFF , 1373px 860px #FFF , 1774px 1512px #FFF , 1968px 1750px #FFF;
}
/* style.css - 修正愛貓模式背景與星星顏色 */

/* 1. 當進入 Story Mode 時，強制改變星空容器的背景色 */
body.story-mode .star-background {
    background: radial-gradient(circle, #220000 0%, #000000 100%) !important;
    transition: background 1s ease;
}

/* 2. 讓原本白色的星星變成「血紅色」 */
body.story-mode #stars,
body.story-mode #stars2,
body.story-mode #stars3 {
    /* 使用濾鏡把白星染紅，不用重寫 box-shadow */
    filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(0.8);
    transition: filter 1s ease;
}





/* style.css - Gallery 3D 相簿主題樣式 */

#theme-overlay-gallery {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #000;
    z-index: 99999;
    overflow: hidden;
}

#gallery-canvas-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

.gallery-welcome-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    pointer-events: none; /* 讓滑鼠穿透 */
    z-index: 10;
    text-shadow: 0 0 20px rgba(0,0,0,0.8);
    opacity: 0;
    animation: galleryTextFadeIn 1s ease 0.5s forwards;
}

.gallery-sub {
    font-size: 1.2rem;
    letter-spacing: 5px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    color: rgba(255,255,255,0.7);
}

.gallery-name {
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive; /* 沿用你的像素字體 */
    color: #fff;
}

.gallery-white-fade {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity 1s ease;
}

@keyframes galleryTextFadeIn {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}