/* ========================================
   如沐絮眠｜全站 CSS
======================================== */


/* ========================================
   01. 全站基本設定
======================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    background-color: #111111;
    color: white;
    font-family: Arial, sans-serif;
}


/* ========================================
   02. 導覽列
======================================== */

.navbar {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 4%;

    background: transparent;

    z-index: 1000;
}


/* Logo */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    text-decoration: none;
}

.logo img {
    width: auto;
    height: 120px;

    display: block;
}


/* 右側選單 */

.navbar nav {
    display: flex;
    align-items: center;

    gap: 20px;

    min-width: 0;
}

.navbar nav a {
    color: white;
    text-decoration: none;

    font-size: 16px;
    font-weight: 500;

    letter-spacing: 2px;

    white-space: nowrap;

    opacity: 0.95;

    transition: 0.3s;
}

.navbar nav a:visited {
    color: white;
}

.navbar nav a:hover {
    color: white;

    opacity: 0.55;
}


/* ========================================
   03. 首頁 Hero
======================================== */

.hero {
    width: 100%;
    min-height: 100vh;

    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 100px 20px 40px;

    text-align: center;

    color: white;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45)
        ),
        url("images/hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Hero 中央內容 */

.hero-content {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}


/* 小英文 */

.hero-small {
    margin: 0 0 15px;

    color: white;

    font-size: 11px;

    letter-spacing: 6px;

    opacity: 0.75;
}


/* 主標題 */

.hero h1 {
    margin: 0 0 20px;

    color: white;

    font-size: clamp(48px, 7vw, 90px);
    font-weight: 400;

    letter-spacing: 10px;
}


/* 首頁文字 */

.hero-text {
    margin: 0;

    color: white;

    font-size: 14px;

    line-height: 1.8;

    letter-spacing: 2px;

    opacity: 0.9;
}


/* ========================================
   04. 首頁作品按鈕
======================================== */

.hero-button {
    display: inline-block;

    margin-top: 28px;

    padding: 12px 28px;

    border: 1px solid white;
    border-radius: 30px;

    background: transparent;

    color: white;

    text-decoration: none;

    font-size: 14px;

    letter-spacing: 2px;

    transition: 0.3s;
}

.hero-button:visited {
    color: white;
}

.hero-button:hover {
    color: #4a3535;

    background: white;

    transform: translateY(-2px);
}


/* ========================================
   05. 關於我們
======================================== */

.about-page {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 120px 30px 80px;

    text-align: center;

    color: white;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.55)
        ),
        url("images/about-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* 關於我們內容寬度 */

.about-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* ABOUT US */

.section-small {
    margin: 0;

    color: white;

    font-size: 12px;

    letter-spacing: 6px;

    opacity: 0.5;
}


/* 如沐絮眠 */

.about-page h1 {
    margin: 20px 0;

    color: white;

    font-size: clamp(42px, 7vw, 80px);

    font-weight: 400;

    letter-spacing: 10px;
}


/* 沐浴於愛，沉眠於心 */

.about-slogan {
    margin: 0;

    color: white;

    font-size: 18px;

    letter-spacing: 4px;

    opacity: 0.9;
}


/* 中間小線 */

.about-line {
    width: 40px;
    height: 1px;

    margin: 40px auto;

    background: white;

    opacity: 0.5;
}


/* 關於我們內文 */

.about-text {
    margin: 0;

    color: white;

    font-size: 15px;

    line-height: 2.2;

    letter-spacing: 2px;

    opacity: 0.9;
}


/* ========================================
   06. MU & MIAN 雙主創
======================================== */

.creator-grid {
    margin-top: 10px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}


/* 卡片連結 */

.creator-link {
    display: block;

    color: white;

    text-decoration: none;
}

.creator-link:visited,
.creator-link:hover,
.creator-link:active {
    color: white;
}


/* 主創卡片 */

.creator-card {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    background: #1a1a1a;
}


/* 主創圖片 */

.creator-card img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* 下方漸層 */

.creator-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0, 0, 0, 0.85)
        );
}


/* 卡片文字 */

.creator-info {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    padding: 35px;

    text-align: left;

    color: white;

    z-index: 2;
}

.creator-en {
    color: white;

    font-size: 11px;

    letter-spacing: 5px;

    opacity: 0.6;
}

.creator-info h2 {
    margin: 8px 0 15px;

    color: white;

    font-size: 32px;

    font-weight: 400;

    letter-spacing: 5px;
}

.creator-info p {
    margin: 0;

    color: white;

    font-size: 13px;

    line-height: 1.8;

    opacity: 0.8;
}


/* 滑鼠效果 */

.creator-card:hover img {
    transform: scale(1.05);
}


/* ========================================
   07. 駐點創作者頁
======================================== */

.creators-page {
    min-height: 100vh;

    padding: 140px 6% 80px;

    color: #453b38;

    background-image:
        linear-gradient(
            rgba(255, 250, 245, 0.45),
            rgba(255, 250, 245, 0.55)
        ),
        url("images/creators-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ========================================
   08. 駐點創作者標題
======================================== */

.creators-title {
    max-width: 1200px;

    margin: 0 auto 50px;

    text-align: center;

    color: #3f3532;
}

.creators-en {
    margin: 0 0 12px;

    color: #5a4a45;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 6px;

    opacity: 1;
}

.creators-title h1 {
    margin: 0 0 18px;

    color: #3f3532;

    font-size: clamp(38px, 5vw, 64px);
    font-weight: 500;

    letter-spacing: 8px;
}

.creators-subtitle {
    margin: 0;

    color: #5a4a45;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 2px;

    opacity: 1;
}


/* ========================================
   09. 駐點創作者排列
======================================== */

.creators-grid {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    gap: 25px;
}


/* 第一排 3 人 */

.creators-row-3 {
    grid-template-columns: repeat(3, 1fr);
}


/* 第二排 4 人 */

.creators-row-4 {
    grid-template-columns: repeat(4, 1fr);

    margin-top: 25px;
}


/* ========================================
   10. 駐點創作者卡片
======================================== */

.resident-link {
    display: block;

    color: white;

    text-decoration: none;
}

.resident-link:visited,
.resident-link:hover,
.resident-link:active {
    color: white;
}


/* 卡片 */

.resident-card {
    position: relative;

    height: 500px;

    overflow: hidden;

    background: #d8d0ca;
}


/* 圖片 */

.resident-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}


/* 漸層 */

.resident-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 45%,
            rgba(0, 0, 0, 0.75)
        );
}


/* 卡片文字 */

.resident-info {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    padding: 30px;

    color: white;

    z-index: 2;
}

.resident-info span {
    color: white;

    font-size: 10px;

    letter-spacing: 5px;

    opacity: 0.65;
}

.resident-info h2 {
    margin: 8px 0 10px;

    color: white;

    font-size: 26px;
    font-weight: 400;

    letter-spacing: 4px;
}

.resident-info p {
    margin: 0;

    color: white;

    font-size: 13px;

    line-height: 1.8;

    opacity: 0.8;
}


/* 卡片 Hover */

.resident-card:hover img {
    transform: scale(1.05);
}


/* ========================================
   伸縮式音樂播放器
======================================== */

.music-player {
    position: fixed;

    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;

    z-index: 9999;
}


/* 外層唱片按鈕 */

.music-toggle {
    width: 56px;
    height: 56px;

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    background: rgba(35, 28, 28, 0.58);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.22);

    z-index: 2;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.music-toggle:hover {
    transform: scale(1.06);

    background: rgba(55, 45, 45, 0.72);
}


/* 唱片 */

.music-disc {
    width: 44px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    color: white;

    font-size: 16px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.4) 0 7%,
            rgba(255, 255, 255, 0.10) 8% 26%,
            rgba(0, 0, 0, 0.38) 27% 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.18);
}


/* 播放時唱片旋轉 */

.music-disc.playing {
    animation: disc-spin 5s linear infinite;
}

@keyframes disc-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ========================================
   展開面板
======================================== */

.music-panel {
    width: 0;

    margin-left: -28px;

    padding: 10px 0;

    display: flex;
    align-items: center;

    gap: 12px;

    overflow: hidden;

    opacity: 0;

    border-radius: 0 40px 40px 0;

    background: rgba(35, 28, 28, 0.55);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-left: none;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18);

    transition:
        width 0.45s ease,
        opacity 0.25s ease,
        padding 0.45s ease,
        margin-left 0.45s ease;
}


/* 展開狀態 */

.music-player.open .music-panel {
    width: 260px;

    margin-left: -22px;

    padding:
        10px
        18px
        10px
        38px;

    opacity: 1;
}


/* ========================================
   文字
======================================== */

.music-text {
    min-width: 92px;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.music-label {
    color: white;

    font-size: 8px;

    letter-spacing: 2.5px;

    opacity: 0.45;
}

.music-title {
    color: white;

    font-size: 12px;

    letter-spacing: 2px;

    white-space: nowrap;
}


/* ========================================
   播放鍵
======================================== */

.play-button {
    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;

    border:
        1px solid rgba(255, 255, 255, 0.28);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);

    color: white;

    font-size: 10px;

    cursor: pointer;

    transition: 0.3s;
}

.play-button:hover {
    background:
        rgba(255, 255, 255, 0.24);

    transform: scale(1.08);
}


/* ========================================
   音量條
======================================== */

#volumeControl {
    width: 72px;

    flex-shrink: 0;

    cursor: pointer;

    accent-color: white;
}


/* ========================================
   手機版
======================================== */

@media (max-width: 768px) {

    .music-player {
        right: 15px;
        bottom: 15px;
    }

    .music-toggle {
        width: 52px;
        height: 52px;
    }

    .music-disc {
        width: 40px;
        height: 40px;
    }

    .music-player.open .music-panel {
        width: 205px;

        padding:
            9px
            14px
            9px
            34px;
    }

    .music-text {
        min-width: 70px;
    }

    .music-title {
        font-size: 11px;

        letter-spacing: 1px;
    }

    #volumeControl {
        width: 50px;
    }

}

/* ========================================
   12. 手機版
======================================== */

@media (max-width: 768px) {

    /* 導覽列 */

    .logo img {
        height: 52px;
    }

    .navbar nav {
        display: none;
    }


    /* 首頁 */

    .hero {
        padding: 90px 20px 30px;
    }

    .hero h1 {
        font-size: 42px;

        letter-spacing: 5px;
    }

    .hero-text {
        font-size: 13px;
    }


    /* 關於我們 */

    .about-page {
        padding: 100px 20px 60px;
    }

    .about-page h1 {
        letter-spacing: 5px;
    }

    .about-slogan {
        font-size: 16px;

        letter-spacing: 2px;
    }


    /* 雙主創 */

    .creator-grid {
        grid-template-columns: 1fr;
    }

    .creator-card {
        min-height: 460px;
    }

    .creator-info {
        padding: 25px;
    }


    /* 駐點創作者 */

    .creators-page {
        padding: 120px 20px 60px;
    }

    .creators-row-3,
    .creators-row-4 {
        grid-template-columns: 1fr;
    }

    .resident-card {
        height: 460px;
    }


    /* 音樂播放器 */

    .music-player {
        right: 15px;
        bottom: 15px;

        padding: 8px 12px 8px 8px;
    }

    .music-title {
        display: none;
    }

}


/* =========================
   GACHA 彈出式介面
========================= */

.gacha-page {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 100vh;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.12)
        ),
        url("images/gacha-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 背景扭蛋機可點區 */

.background-machine-hotspot {
    position: absolute;

    width: 28%;
    height: 72%;

    right: 9%;
    top:47%;

    border: none;
    background: transparent;
    cursor: pointer;
}


/* 公告圓鍵 */

.notice-button {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 52px;
    height: 52px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.65);

    background: rgba(255,248,240,0.72);

    color: #765f55;

    font-size: 20px;
    font-family: serif;

    cursor: pointer;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 10px 30px rgba(80,60,50,0.18);

    z-index: 5000;
}


/* 公告彈窗 */

.notice-popup {
    position: fixed;

    right: 28px;
    bottom: 92px;

    width: 320px;

    padding: 28px;

    border-radius: 22px;

    background: rgba(255,252,248,0.92);

    color: #65514a;

    box-shadow: 0 18px 50px rgba(80,60,50,0.18);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    opacity: 0;
    transform: translateY(15px) scale(0.96);

    pointer-events: none;

    transition: 0.3s ease;

    z-index: 4999;
}

.notice-popup.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notice-popup h2 {
    margin-top: 0;
    letter-spacing: 3px;
    font-weight: 400;
}

.notice-popup p {
    font-size: 13px;
    line-height: 1.8;
}

.notice-small {
    opacity: 0.65;
}


/* 扭蛋機彈出背景 */

.gacha-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(35,25,20,0.28);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    pointer-events: none;

    transition: 0.35s ease;

    z-index: 4000;
}

.gacha-modal.open {
    opacity: 1;
    pointer-events: auto;
}


/* 彈出機器 */

.gacha-modal-inner {
    position: relative;

    width: min(620px, 88vw);

    transform: translateY(40px) scale(0.88);

    transition: 0.45s cubic-bezier(.2,.8,.2,1.2);
}

.gacha-modal.open .gacha-modal-inner {
    transform: translateY(0) scale(1);
}

.popup-machine {
    width: 100%;
    height: auto;
    display: block;

    mix-blend-mode: multiply;

    filter:
        drop-shadow(0 25px 45px rgba(75,50,40,0.22));
}


/* 關閉鍵 */

.gacha-close {
    position: absolute;

    top: -10px;
    right: -10px;

    width: 42px;
    height: 42px;

    border-radius: 50%;
    border: none;

    background: rgba(255,255,255,0.9);

    color: #6b554c;

    font-size: 26px;

    cursor: pointer;

    z-index: 5;
}
/* 扭蛋機本體容器 */

.machine-wrap {
    position: relative;
    width: 100%;
}


/* 旋鈕按鈕 */

.gacha-knob-button {
    position: absolute;

    left:43.9%;
    top: 68%;

    width: 24%;
    aspect-ratio: 1 / 1;

    transform: translate(-50%, -50%);

    padding: 0;
    border: none;
    background: transparent;rgba(255,0,0,0.12);

    cursor: pointer;
    z-index: 20;
}


/* 旋鈕圖片 */

.gacha-knob {
    width: 100%;
    height: 100%;
    object-fit: contain;

    display: block;

    filter:
        drop-shadow(0 5px 12px rgba(89, 58, 35, 0.22));

    transition:
        filter 0.25s ease,
        transform 0.15s ease;
}


/* 滑過旋鈕 */

.gacha-knob-button:hover .gacha-knob {
    filter:
        brightness(1.08)
        drop-shadow(0 0 16px rgba(255, 220, 160, 0.65));
}


/* 按下的手感 */

.gacha-knob-button:active .gacha-knob {
    transform: scale(0.96);
}


/* 真正旋轉 */

.gacha-knob.turning {
    animation: gacha-knob-turn 1.15s ease-in-out;
}

@keyframes gacha-knob-turn {

    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(45deg);
    }

    42% {
        transform: rotate(120deg);
    }

    68% {
        transform: rotate(235deg);
    }

    88% {
        transform: rotate(330deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================
   扭蛋掉落動畫
========================= */

.gacha-ball-drop {
    position: absolute;

    left: 44%;
    top: 81%;

    width: 15%;
    aspect-ratio: 1 / 1;

    opacity: 0;
    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    z-index: 30;
}

.gacha-ball-drop img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;

    filter:
        drop-shadow(0 8px 10px rgba(90, 65, 45, 0.20));
}


/* 掉出來 + 停住後放大 */

.gacha-ball-drop.dropping {
    animation:
        elegant-gacha-drop 1.4s cubic-bezier(.22,.75,.25,1) forwards,
        gacha-reveal 0.75s ease-out 1.65s forwards;
}


/* 第一段：滾出來 */

@keyframes elegant-gacha-drop {

    0% {
        opacity: 0;
        left: 44%;
        top: 80%;

        transform:
            translate(-50%, -50%)
            scale(0.75)
            rotate(0deg);
    }

    20% {
        opacity: 1;
        left: 44%;
        top: 84%;

        transform:
            translate(-50%, -50%)
            scale(0.88)
            rotate(3deg);
    }

    45% {
        left: 45%;
        top: 94%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(7deg);
    }

    68% {
        left: 50%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(12deg);
    }

    85% {
        left: 54%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(6deg);
    }

    100% {
        opacity: 1;
        left: 56%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(0deg);
    }
}


/* 第二段：停住後放大 */

@keyframes gacha-reveal {

    0% {
        opacity: 1;

        left: 56%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            drop-shadow(0 10px 10px rgba(80, 55, 40, 0.22));
    }

    35% {
        opacity: 1;

        left: 50%;
        top: 72%;

        transform:
            translate(-50%, -50%)
            scale(1.45);

        filter:
            brightness(1.12)
            drop-shadow(0 0 18px rgba(255, 221, 155, 0.75));
    }

    100% {
        opacity: 1;

        left: 50%;
        top: 58%;

        transform:
            translate(-50%, -50%)
            scale(2.2);

        filter:
            brightness(1.05)
            drop-shadow(0 0 26px rgba(255, 224, 170, 0.60))
            drop-shadow(0 18px 24px rgba(80, 55, 40, 0.22));
    }
}
/* =========================
   扭蛋掉落動畫
========================= */

.gacha-ball-drop {
    position: absolute;

    left: 44%;
    top: 81%;

    width: 15%;
    aspect-ratio: 1 / 1;

    opacity: 0;
    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    z-index: 30;
}

.gacha-ball-drop img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;

    filter:
        drop-shadow(0 8px 10px rgba(90, 65, 45, 0.20));
}


/* 掉出來 + 停住後放大 */

.gacha-ball-drop.dropping {
    animation:
        elegant-gacha-drop 1.4s cubic-bezier(.22,.75,.25,1) forwards,
        gacha-reveal 0.75s ease-out 1.65s forwards;
}


/* 第一段：滾出來 */

@keyframes elegant-gacha-drop {

    0% {
        opacity: 0;
        left: 44%;
        top: 80%;

        transform:
            translate(-50%, -50%)
            scale(0.75)
            rotate(0deg);
    }

    20% {
        opacity: 1;
        left: 44%;
        top: 84%;

        transform:
            translate(-50%, -50%)
            scale(0.88)
            rotate(3deg);
    }

    45% {
        left: 45%;
        top: 94%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(7deg);
    }

    68% {
        left: 50%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(12deg);
    }

    85% {
        left: 54%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(6deg);
    }

    100% {
        opacity: 1;
        left: 56%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(0deg);
    }
}


/* 第二段：停住後放大 */

@keyframes gacha-reveal {

    0% {
        opacity: 1;

        left: 56%;
        top: 96%;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            drop-shadow(0 10px 10px rgba(80, 55, 40, 0.22));
    }

    35% {
        opacity: 1;

        left: 50%;
        top: 72%;

        transform:
            translate(-50%, -50%)
            scale(1.45);

        filter:
            brightness(1.12)
            drop-shadow(0 0 18px rgba(255, 221, 155, 0.75));
    }

    100% {
        opacity: 1;

        left: 50%;
        top: 58%;

        transform:
            translate(-50%, -50%)
            scale(2.2);

        filter:
            brightness(1.05)
            drop-shadow(0 0 26px rgba(255, 224, 170, 0.60))
            drop-shadow(0 18px 24px rgba(80, 55, 40, 0.22));
    }
}
/* =========================
   蛋放大後，扭蛋機退場
========================= */

.machine-wrap.focus-ball .popup-machine {
    opacity: 0;

    transform:
        scale(0.88)
        translateY(20px);

    filter: blur(6px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        filter 0.6s ease;

    pointer-events: none;
}


.machine-wrap.focus-ball .gacha-knob-button {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.8);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;

    pointer-events: none;
}


/* 蛋保持可見 */

.machine-wrap.focus-ball .gacha-ball-drop {
    opacity: 1;
    z-index: 100;
}


/* 背景進入 focus 模式 */

.gacha-modal.focus-mode {
    background: rgba(35, 25, 20, 0.48);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        background 0.6s ease,
        backdrop-filter 0.6s ease;
}
/* =========================
   打開後的蛋
========================= */

.gacha-ball-drop.opened {
    opacity: 1;
    pointer-events: none;

    animation:
        opened-ball-appear
        0.65s
        cubic-bezier(.2,.8,.2,1.1)
        forwards;
}

.gacha-ball-drop.opened img {
    opacity: 1;

    filter:
        brightness(1.05)
        drop-shadow(0 0 28px rgba(255, 225, 170, 0.65))
        drop-shadow(0 20px 28px rgba(80, 55, 40, 0.22));
}


@keyframes opened-ball-appear {

    0% {
        transform:
            translate(-50%, -50%)
            scale(1.7);

        opacity: 0;
    }

    55% {
        transform:
            translate(-50%, -50%)
            scale(2.35);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(2.2);

        opacity: 1;
    }
}
/* =========================
   點蛋閃光
========================= */

.gacha-ball-drop.flash img {
    animation: ball-flash 0.45s ease forwards;
}

@keyframes ball-flash {

    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }

    60% {
        opacity: 1;
        transform: scale(1.12);

        filter:
            brightness(2)
            drop-shadow(0 0 50px rgba(255, 240, 200, 1));
    }

    100% {
        opacity: 0;
        transform: scale(1.18);

        filter:
            brightness(2.5)
            drop-shadow(0 0 70px rgba(255, 245, 220, 1));
    }
}


/* =========================
   打開的蛋
========================= */

.gacha-ball-drop.opened {
    opacity: 1;
    pointer-events: none;
}

.gacha-ball-drop.opened img {
    opacity: 1;

    animation: opened-ball-show 0.6s ease-out forwards;

    filter:
        drop-shadow(0 0 25px rgba(255, 225, 170, 0.7))
        drop-shadow(0 18px 25px rgba(80, 55, 40, 0.22));
}


@keyframes opened-ball-show {

    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    60% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================
   開蛋後
========================= */

.gacha-ball-drop.opened {
    opacity: 1;
    pointer-events: none;
}

.gacha-ball-drop.opened img {
    opacity: 1;

    animation:
        opened-ball-show
        0.6s
        ease-out
        forwards;

    filter:
        drop-shadow(0 0 25px rgba(255, 225, 170, 0.7))
        drop-shadow(0 18px 25px rgba(80, 55, 40, 0.22));
}

@keyframes opened-ball-show {

    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    60% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================
   放大後蛋可點
========================= */

.gacha-ball-drop.ready {
    pointer-events: auto;
    cursor: pointer;
}

.gacha-ball-drop.ready img {
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.gacha-ball-drop.ready:hover img {
    transform: scale(1.06);

    filter:
        brightness(1.12)
        drop-shadow(0 0 20px rgba(255, 225, 170, 0.85))
        drop-shadow(0 0 38px rgba(255, 235, 205, 0.45));
}


/* =========================
   點蛋閃光
========================= */

.gacha-ball-drop.flash img {
    animation: ball-flash 0.45s ease forwards;
}

@keyframes ball-flash {

    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }

    60% {
        opacity: 1;
        transform: scale(1.12);

        filter:
            brightness(2)
            drop-shadow(0 0 50px rgba(255, 240, 200, 1));
    }

    100% {
        opacity: 0;
        transform: scale(1.18);

        filter:
            brightness(2.5)
            drop-shadow(0 0 70px rgba(255, 245, 220, 1));
    }
}


/* =========================
   打開後的蛋
========================= */

.gacha-ball-drop.opened {
    position: fixed;

    left: 50%;
    top: 52%;

    width: min(700px, 75vw);
    height: auto;
    aspect-ratio: auto;

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

    z-index: 9999;

    pointer-events: none;

    animation:
        opened-ball-appear
        0.7s
        cubic-bezier(.2,.8,.2,1.1)
        forwards;
}


.gacha-ball-drop.opened img {
    width: 100%;
    height: auto;

    display: block;
    object-fit: contain;

    opacity: 1;

    filter:
        brightness(1.05)
        drop-shadow(0 0 32px rgba(255, 225, 170, 0.7))
        drop-shadow(0 22px 34px rgba(80, 55, 40, 0.24));
}


@keyframes opened-ball-appear {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.72);
    }

    55% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.06);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

/* =========================
   圖片版抽獎結果卡
========================= */

.gacha-result-card {
    position: fixed;

    left: 50%;
    top: 50%;

    width: min(400px, 85vw);

    opacity: 0;

    transform:
        translate(-50%, 80px)
        scale(0.65);

    pointer-events: none;

    z-index: 12000;
}


/* 卡片圖片 */

.result-card-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 30px
            rgba(70, 50, 40, 0.25)
        );
}


/* 卡片浮出 */

.gacha-result-card.show {
    animation:
        gacha-card-rise 1s cubic-bezier(.18,.8,.25,1.08) forwards,
        gacha-card-float 3.8s ease-in-out 1s infinite;
}


@keyframes gacha-card-rise {

    0% {
        opacity: 0;

        transform:
            translate(-50%, 100px)
            scale(0.55);
    }

    55% {
        opacity: 1;

        transform:
            translate(-50%, -30px)
            scale(1.05);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -60px)
            scale(1);
    }
}


/* =========================
   卡片上的文字
========================= */

.result-card-content {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 68%;

    transform:
        translate(-50%, -50%);
/* =========================
   結果卡輕微懸浮
========================= */

@keyframes gacha-card-float {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -5px;
    }

}
    text-align: center;

    color: #6b554c;
}


.result-card-content h2 {
    margin:
        0
        0
        12px;

    font-size: 17px;

    font-weight: 400;

    letter-spacing: 2px;
}


.result-card-content p {
    margin: 0;

    font-size: 13px;

    line-height: 1.8;

    letter-spacing: 0.5px;

    overflow-wrap: break-word;
}
/* =========================
   結果卡出現後，開蛋圖退場
========================= */

.gacha-ball-drop.hide-after-open {
    opacity: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(0.88) !important;

    transition:
        opacity 0.55s ease,
        transform 0.55s ease;

    pointer-events: none;
}
/* ==================================================
   扭蛋稀有度開蛋特效
================================================== */


/* ------------------------------
   普通：心靈小卡
------------------------------ */

.gacha-ball-drop.rarity-normal.flash img {
    animation: normal-ball-flash 0.45s ease-out;
}

@keyframes normal-ball-flash {

    0% {
        transform: scale(1);
        filter:
            brightness(1)
            drop-shadow(0 0 10px rgba(255,255,255,0.35));
    }

    45% {
        transform: scale(1.08);
        filter:
            brightness(1.45)
            drop-shadow(0 0 26px rgba(255,245,240,0.9));
    }

    100% {
        transform: scale(1);
        filter:
            brightness(1.05)
            drop-shadow(0 0 16px rgba(255,240,235,0.55));
    }

}



/* ------------------------------
   稀有：獎項 2∼4
------------------------------ */

.gacha-ball-drop.rarity-rare.flash img {
    animation: rare-ball-flash 0.5s ease-out;
}

@keyframes rare-ball-flash {

    0% {
        transform: scale(1);
        filter:
            brightness(1)
            drop-shadow(0 0 12px rgba(255,220,220,0.4));
    }

    35% {
        transform: scale(1.13);
        filter:
            brightness(1.65)
            saturate(1.25)
            drop-shadow(0 0 28px rgba(255,190,210,0.95))
            drop-shadow(0 0 42px rgba(255,225,170,0.7));
    }

    70% {
        transform: scale(1.06);
        filter:
            brightness(1.35)
            saturate(1.15)
            drop-shadow(0 0 24px rgba(255,210,225,0.75));
    }

    100% {
        transform: scale(1);
        filter:
            brightness(1.08)
            drop-shadow(0 0 18px rgba(255,220,220,0.55));
    }

}



/* ------------------------------
   傳說：頭獎金蛋
------------------------------ */

.gacha-ball-drop.rarity-legendary.flash img {
    animation: legendary-ball-flash 0.6s ease-out;
}

@keyframes legendary-ball-flash {

    0% {
        transform: scale(1);
        filter:
            brightness(1)
            drop-shadow(0 0 14px rgba(255,210,90,0.4));
    }

    20% {
        transform: scale(1.08);
        filter:
            brightness(1.7)
            saturate(1.3)
            drop-shadow(0 0 26px rgba(255,215,110,0.9));
    }

    45% {
        transform: scale(1.18);
        filter:
            brightness(2.2)
            saturate(1.45)
            drop-shadow(0 0 40px rgba(255,225,120,1))
            drop-shadow(0 0 70px rgba(255,195,70,0.9));
    }

    70% {
        transform: scale(1.1);
        filter:
            brightness(1.7)
            saturate(1.3)
            drop-shadow(0 0 36px rgba(255,215,100,0.9));
    }

    100% {
        transform: scale(1);
        filter:
            brightness(1.15)
            drop-shadow(0 0 24px rgba(255,205,90,0.65));
    }

}



/* ==================================================
   開蛋後持續光暈
================================================== */

.gacha-ball-drop.rarity-normal.opened img {
    filter:
        brightness(1.05)
        drop-shadow(0 0 28px rgba(255,235,225,0.55))
        drop-shadow(0 22px 34px rgba(80,55,40,0.22));
}


.gacha-ball-drop.rarity-rare.opened img {
    filter:
        brightness(1.1)
        saturate(1.08)
        drop-shadow(0 0 34px rgba(255,200,220,0.72))
        drop-shadow(0 0 48px rgba(255,225,180,0.5))
        drop-shadow(0 22px 34px rgba(80,55,40,0.22));
}


.gacha-ball-drop.rarity-legendary.opened img {
    animation: legendary-open-glow 2.2s ease-in-out infinite;

    filter:
        brightness(1.16)
        saturate(1.15)
        drop-shadow(0 0 34px rgba(255,220,110,0.9))
        drop-shadow(0 0 58px rgba(255,195,70,0.65))
        drop-shadow(0 24px 36px rgba(80,55,40,0.25));
}


@keyframes legendary-open-glow {

    0%,
    100% {
        filter:
            brightness(1.12)
            saturate(1.1)
            drop-shadow(0 0 28px rgba(255,215,100,0.72))
            drop-shadow(0 0 46px rgba(255,190,70,0.5))
            drop-shadow(0 24px 36px rgba(80,55,40,0.24));
    }

    50% {
        filter:
            brightness(1.28)
            saturate(1.22)
            drop-shadow(0 0 42px rgba(255,225,120,1))
            drop-shadow(0 0 72px rgba(255,195,70,0.8))
            drop-shadow(0 24px 36px rgba(80,55,40,0.24));
    }

}
/* ==================================================
   扭蛋頁音樂播放器
================================================== */

.music-player {
    position: fixed;
    left: 28px;
    bottom: 28px;

    display: flex;
    align-items: center;
    gap: 12px;

    z-index: 5000;
}


.music-toggle {
    position: relative;

    width: 58px;
    height: 58px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.82);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 10px 26px
        rgba(70, 50, 40, 0.18);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.music-toggle:hover {
    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        0 14px 32px
        rgba(70, 50, 40, 0.24);
}


/* 唱片 */

.music-disc {
    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            #f7eee8 0 9%,
            #312b29 10% 17%,
            #171413 18% 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,0.08);
}


/* 播放圖示 */

#musicIcon {
    position: relative;

    z-index: 2;

    color: white;

    font-size: 13px;

    text-shadow:
        0 1px 5px
        rgba(0,0,0,0.5);

    pointer-events: none;
}


/* 唱片旋轉 */

.music-disc.playing {
    animation:
        music-disc-spin
        5s linear infinite;
}


@keyframes music-disc-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* 音樂文字 */

.music-info {
    display: flex;
    flex-direction: column;

    padding:
        8px 14px;

    border-radius: 14px;

    background:
        rgba(255,255,255,0.76);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 22px
        rgba(70,50,40,0.12);

    pointer-events: none;
}


.music-label {
    font-size: 9px;

    letter-spacing: 2px;

    opacity: 0.55;
}


.music-title {
    margin-top: 2px;

    font-size: 13px;

    letter-spacing: 1px;

    color: #66534b;
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}