/* =========================================================
   GACHA PAGE
========================================================= */

.gacha-page {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f5eee9;
}


/* =========================================================
   主場景
========================================================= */

.gacha-scene {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
}

.gacha-scene-bg {
    position: absolute;
    inset: 0;

    background-image: url("images/gacha-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   背景扭蛋機點擊區
========================================================= */

.gacha-hotspot {
    position: absolute;
    z-index: 20;

    left: 55%;
    top: 18%;

    width: 34%;
    height: 70%;

    padding: 0;
    border: 0;
    background: transparent;

    cursor: pointer;
}

.gacha-hotspot span {
    opacity: 0;
}


/* =========================================================
   公告球
========================================================= */

.notice-orb {
    position: fixed;
    z-index: 500;

    left: 28px;
    bottom: 28px;

    width: 68px;
    height: 68px;

    border: 1px solid rgba(180, 145, 125, 0.3);
    border-radius: 50%;

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

    box-shadow:
        0 12px 30px
        rgba(70, 50, 42, 0.15);

    cursor: pointer;
}

.notice-orb-small {
    display: block;

    font-size: 6px;
    letter-spacing: 0.2em;

    color: #b19a8e;
}

.notice-orb-main {
    display: block;

    margin-top: 3px;

    font-size: 13px;

    color: #79675e;
}


/* =========================================================
   hidden
========================================================= */

.notice-modal[hidden],
.gacha-modal[hidden],
.serial-modal[hidden],
.gacha-result[hidden],
.gacha-ball[hidden] {
    display: none !important;
}


/* =========================================================
   公告 Modal
========================================================= */

.notice-modal {
    position: fixed;
    z-index: 7000;

    inset: 0;

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

    padding: 20px;

    box-sizing: border-box;
}

.notice-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(55, 43, 37, 0.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.notice-panel {
    position: relative;
    z-index: 1;

    width: 620px;
    max-width: 92vw;
    max-height: 82vh;

    overflow-y: auto;

    box-sizing: border-box;

    padding: 44px 46px 36px;

    background: rgba(255, 250, 246, 0.98);

    box-shadow:
        0 28px 70px
        rgba(60, 43, 36, 0.22);
}

.notice-close {
    position: absolute;

    top: 12px;
    right: 16px;

    border: 0;
    background: transparent;

    font-size: 26px;

    color: #917d73;

    cursor: pointer;
}

.notice-eyebrow {
    margin: 0 0 8px;

    text-align: center;

    font-size: 7px;
    letter-spacing: 0.3em;

    color: #b29b8f;
}

.notice-panel h2 {
    margin: 0 0 10px;

    text-align: center;

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

    color: #6e5a51;
}

.notice-intro {
    margin: 0 0 26px;

    text-align: center;

    font-size: 10px;
    line-height: 1.8;

    color: #99877d;
}

.notice-prize {
    padding: 14px 0;

    border-bottom:
        1px solid
        rgba(160, 130, 115, 0.14);
}

.notice-prize-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notice-prize-head span {
    width: 28px;

    font-size: 7px;

    color: #b19a8e;
}

.notice-prize-head h3 {
    flex: 1;

    margin: 0;

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

    color: #68564d;
}

.notice-prize-head strong {
    font-size: 10px;
    font-weight: 400;

    color: #947c6f;
}

.notice-prize > p {
    margin: 7px 0 0 40px;

    font-size: 9px;
    line-height: 1.8;

    color: #948178;
}

.notice-ball-guide {
    margin-top: 20px;
}

.notice-ball-guide p {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 9px;

    color: #8c7a71;
}

.ball-dot {
    width: 11px;
    height: 11px;

    border-radius: 50%;
}

.ball-dot.gold {
    background: #d7b371;
}

.ball-dot.mixed {
    background:
        linear-gradient(
            90deg,
            #b8cce7 50%,
            #ecc1cf 50%
        );
}

.ball-dot.white {
    background: white;

    border: 1px solid #d5cbc5;
}


/* =========================================================
   扭蛋機 Modal
========================================================= */

.gacha-modal {
    position: fixed;
    z-index: 6000;

    inset: 0;

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

    box-sizing: border-box;

    padding: 20px;
}

.gacha-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(55, 43, 37, 0.25);

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

.gacha-modal-panel {
    position: relative;
    z-index: 1;

    width: 620px;
    max-width: 95vw;

    box-sizing: border-box;

    padding: 20px 20px 30px;
}

.gacha-modal-close {
    position: fixed;
    z-index: 100;

    top: 90px;
    right: 35px;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 50%;

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

    font-size: 24px;

    color: #7c6960;

    cursor: pointer;
}


/* =========================================================
   扭蛋機舞台
========================================================= */

.gacha-machine-stage {
    position: relative;

    width: 500px;
    max-width: 86vw;

    margin: 0 auto;
}

.gacha-machine-wrap {
    position: relative;

    width: 100%;

    filter:
        drop-shadow(
            0 24px 32px
            rgba(70, 50, 40, 0.18)
        );
}

.gacha-machine-image {
    display: block;

    width: 100%;
    height: auto;

    user-select: none;
}


/* =========================================================
   序號牌
========================================================= */

.gacha-unlock-sign {
    position: absolute;
    z-index: 40;

    left: 7%;
    top: 49%;

    width: 27%;

    box-sizing: border-box;

    padding: 10px 8px;

    border:
        1px solid
        rgba(170, 134, 109, 0.28);

    background:
        rgba(255, 248, 239, 0.96);

    box-shadow:
        0 7px 16px
        rgba(70, 50, 42, 0.13);

    transform: rotate(-5deg);

    text-align: center;

    color: #735f55;

    cursor: pointer;
}

.gacha-unlock-small {
    display: block;

    margin-bottom: 4px;

    font-size: 5px;
    letter-spacing: 0.17em;

    color: #b19a8f;
}

.gacha-unlock-sign strong {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 400;
}

.gacha-unlock-sign > span:last-child {
    display: block;

    font-size: 7px;

    color: #968278;
}


/* =========================================================
   旋鈕
========================================================= */

.gacha-knob {
    position: absolute;
    z-index: 45;

    left: 43.8%;
    top: 64%;

    width: 23%;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent !important;

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

    cursor: pointer;
}

.gacha-knob-image {
    display: block;

    width: 100%;
    height: auto;

    background: transparent;

    pointer-events: none;

    transform-origin: center;
}

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

@keyframes knob-turn {

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

    55% {
        transform: rotate(130deg);
    }

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


/* =========================================================
   機台震動
========================================================= */

.gacha-machine-wrap.shake {
    animation:
        machine-shake
        0.7s ease;
}

@keyframes machine-shake {

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

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}


/* =========================================================
   機台退場
========================================================= */

.gacha-machine-wrap.machine-exit {
    animation:
        machine-exit
        0.55s ease
        forwards;
}

@keyframes machine-exit {

    from {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            translateY(-25px)
            scale(0.95);
    }
}


/* =========================================================
   扭蛋
========================================================= */

.gacha-ball {
    position: absolute;
    z-index: 100;

    left: 50%;
    bottom: -10%;

    width: 27%;

    padding: 0 !important;
    margin: 0;

    border: 0 !important;
    outline: 0;

    background: transparent !important;

    box-shadow: none !important;

    transform:
        translateX(-50%);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

#gachaBallImage {
    display: block;

    width: 100%;
    height: auto;

    border: 0;

    background: transparent !important;

    box-shadow: none;

    object-fit: contain;

    pointer-events: none;
}


/* =========================================================
   球滾出來
========================================================= */

.gacha-ball.roll-out {
    animation:
        ball-roll-out
        0.9s
        cubic-bezier(
            0.18,
            0.78,
            0.24,
            1
        );
}

@keyframes ball-roll-out {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -80px)
            rotate(-160deg)
            scale(0.5);
    }

    70% {
        opacity: 1;

        transform:
            translate(-50%, 8px)
            rotate(15deg)
            scale(1.08);
    }

    100% {
        opacity: 1;

        transform:
            translateX(-50%)
            rotate(0)
            scale(1);
    }
}


/* =========================================================
   開球
========================================================= */

.gacha-ball.opening {
    z-index: 200;

    animation:
        ball-open
        0.7s ease
        forwards;
}

@keyframes ball-open {

    0% {
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

    55% {
        transform:
            translateX(-50%)
            translateY(-65px)
            scale(2);
    }

    100% {
        transform:
            translateX(-50%)
            translateY(-70px)
            scale(1.8);
    }
}


/* =========================================================
   提示
========================================================= */

.gacha-guide {
    margin: 60px 0 0;

    text-align: center;

    font-size: 10px;
    letter-spacing: 0.1em;

    color: #806d64;
}


/* =========================================================
   序號 Modal
========================================================= */

.serial-modal {
    position: fixed;
    z-index: 9000;

    inset: 0;

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

    padding: 20px;

    box-sizing: border-box;
}

.serial-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(55, 42, 36, 0.36);

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

.serial-panel {
    position: relative;
    z-index: 1;

    width: 400px;
    max-width: 90vw;

    box-sizing: border-box;

    padding: 44px 36px 34px;

    background:
        rgba(255, 249, 245, 0.98);

    box-shadow:
        0 26px 70px
        rgba(65, 46, 38, 0.24);

    text-align: center;
}

.serial-close {
    position: absolute;

    top: 11px;
    right: 15px;

    border: 0;

    background: transparent;

    font-size: 25px;

    color: #917d72;

    cursor: pointer;
}

.serial-eyebrow {
    margin: 0 0 8px;

    font-size: 7px;
    letter-spacing: 0.3em;

    color: #b0998d;
}

.serial-panel h2 {
    margin: 0 0 10px;

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

    color: #6b584f;
}

.serial-description {
    margin: 0 0 22px;

    font-size: 10px;
    line-height: 1.8;

    color: #99867c;
}

.serial-input {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border:
        1px solid
        rgba(157, 124, 107, 0.28);

    outline: none;

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

    text-align: center;

    font-size: 13px;
    letter-spacing: 0.15em;

    color: #69574e;
}

.serial-message {
    min-height: 18px;

    margin: 9px 0 0;

    font-size: 9px;

    color: #a46d6d;
}

.serial-submit {
    margin-top: 9px;

    padding: 10px 20px;

    border:
        1px solid
        rgba(126, 96, 83, 0.25);

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

    color: #6e5a51;

    cursor: pointer;
}


/* =========================================================
   結果便簽
========================================================= */

.gacha-result {
    position: fixed;
    z-index: 10000;

    inset: 0;

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

    padding: 20px;

    box-sizing: border-box;
}

.gacha-result-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(55, 42, 36, 0.36);

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

.gacha-note {
    position: relative;
    z-index: 1;

    width: 620px;
    max-width: 94vw;

    filter:
        drop-shadow(
            0 24px 40px
            rgba(65, 45, 38, 0.2)
        );
}

.gacha-note > img {
    display: block;

    width: 100%;
    height: auto;
}

.gacha-note-content {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 55%;

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

    text-align: center;
}

.gacha-note-small {
    margin: 0 0 10px;

    font-size: 7px;
    letter-spacing: 0.27em;

    color: #a98d82;
}

.gacha-note-content h2 {
    margin: 0 0 13px;

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

    color: #705a50;
}

.gacha-result-text {
    margin: 0;

    font-size: 11px;
    line-height: 1.9;

    color: #765f56;
}

.gacha-note-content button {
    margin-top: 17px;

    padding: 9px 17px;

    border:
        1px solid
        rgba(118, 91, 78, 0.25);

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

    color: #715d53;

    cursor: pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .gacha-scene {
        height: 100svh;

        min-height: 620px;
    }

    .gacha-scene-bg {
        background-image:
            url("images/gacha-bg-mobile.jpg");

        background-position:
            center top;
    }

    .gacha-hotspot {
        left: 43%;
        top: 20%;

        width: 54%;
        height: 62%;
    }

    .notice-orb {
        left: 16px;
        bottom: 16px;

        width: 60px;
        height: 60px;
    }

    .gacha-machine-stage {
        width: 82vw;

        max-width: 430px;
    }

    .gacha-unlock-sign {
        left: 5%;
        top: 49%;

        width: 29%;
    }

    .gacha-knob {
        left: 43.8%;
        top: 64%;

        width: 23%;
    }

    .gacha-ball {
        bottom: -8%;

        width: 30%;
    }

    @keyframes ball-open {

        0% {
            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }

        55% {
            transform:
                translateX(-50%)
                translateY(-50px)
                scale(2);
        }

        100% {
            transform:
                translateX(-50%)
                translateY(-55px)
                scale(1.8);
        }
    }

    .gacha-guide {
        margin-top: 55px;
    }

    .notice-panel {
        padding:
            40px 24px 28px;
    }

    .notice-prize > p {
        margin-left: 0;
    }

    .serial-panel {
        width: 90vw;

        padding:
            40px 25px 28px;
    }

    .gacha-note {
        width: 96vw;
    }

    .gacha-note-content h2 {
        font-size: 17px;
    }

    .gacha-result-text {
        font-size: 9px;
    }
}