@font-face {
    /* * 1. 自訂一個字型家族名稱 
   * (建議跟您原本的 CSS 保持一致，例如 'jf-openhuninn-2.1')
   */
    font-family: 'jf-openhuninn-2.1';

    /* * 2. 指定字型檔的路徑 (請換成您在步驟 1 的路徑) 
   * format('woff2') 告訴瀏覽器這是 woff2 格式
   */
    src: url('../../fonts/subset-jf-openhuninn-21.woff2') format('woff2');

    /* * 3. (效能優化) 
   * font-display: swap; 
   * 意思是：字型載入時，先用系統預設字顯示，載入完再換掉。
   * 這可以避免文字在載入期間「隱形」。
   */
    font-display: swap;
    font-weight: 700;
    /* 對應您原本的 font-weight */
    font-style: normal;
}

@font-face {
    /* * 1. 自訂一個字型家族名稱 
   * (建議跟您原本的 CSS 保持一致，例如 'jf-openhuninn-2.1')
   */
    font-family: 'mantouSans';

    /* * 2. 指定字型檔的路徑 (請換成您在步驟 1 的路徑) 
   * format('woff2') 告訴瀏覽器這是 woff2 格式
   */
    src: url('../../fonts/subset-MantouSans.woff2') format('woff2');

    /* * 3. (效能優化) 
   * font-display: swap; 
   * 意思是：字型載入時，先用系統預設字顯示，載入完再換掉。
   * 這可以避免文字在載入期間「隱形」。
   */
    font-display: swap;
    font-weight: 400;
    /* 對應您原本的 font-weight */
    font-style: normal;
}

/* .image-container {
    position: relative;
    width: 625px;
    height: 560px;
} */
.image-container {
    position: relative;
}

.overlay-image {
    position: absolute;
    width: 85%;
    height: 95%;
    top: calc(3%);
    left: calc(10.8%);
    z-index: 10;
    opacity: 0.5;
    background-color: #0b0a0a80;
    /* 红色 */
    clip-path: polygon(50% 50%,
            /* 中心点 */
            99% 0,
            /* 顶部右侧 */
            110% 50%,
            90% 100%,
            50% 100%,
            3% 100%,
            0 50%,
            /* 左侧 */
            0% 0,
            /* 顶部左侧 */
            50% 0,
            /* 顶部中心 */
            50% 50%
            /* 回到中心 */
        );
    /* transition: transform 5s ease; */
    transition: transform 2s ease-out;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.cursor {
    cursor: pointer;
}

.centered-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    /* Bootstrap toast 建議的 z-index 值 */
    min-width: 300px;
    /* 可以根據需要調整最小寬度 */
}

.modal-lottery {
    inset: 0;
    opacity: 1;
    background-color: #161619CC;
    z-index: 999;
    /* display: block; */
    align-items: center;
    justify-content: center;
}

.modal-content-lottery {
    transition: all 0.8s ease;
    transform: scale(0.7);
    opacity: 0;
}

.modal-lottery.show .modal-content-lottery {
    transform: scale(1);
    opacity: 1;
}


.marquee {
    width: 100%;
    /* the plugin works for responsive layouts so width is not necessary */
    overflow: hidden;
    border: 1px solid #ccc;
}


/* 小於 375px 的手機裝置 */
@media (max-width: 375px) {
    .text-block {
        bottom: 170px;
    }
}

/* 中型手機到平板 */
@media (min-width: 376px) and (max-width: 390px) {
    .text-block {
        bottom: 150px;
    }
}

@media (min-width: 391px) and (max-width: 490px) {
    .text-block {
        bottom: 130px;
    }
}

/* 平板以上 */
@media (min-width: 768px) {
    .text-block {
        bottom: 120px;
    }
}

#phaser-container canvas {
    max-width: 430px;
    max-height: 932px;
}

.my-game-start-button {
    position: relative;
    width: 120px;
    height: 64px;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid var(--Primary-500, #66350A);
    /* background: var(--primary-300-branding-various, #FFA348); */
    background: #CC7327;
    /* fill: var(--Primary-400, #CC7327); */
    opacity: 0.4;
}

.my-game-start-btn-shadow {
    position: absolute;
    width: 111px;
    height: 56px;
    border-radius: 8px;
    background: #FFA348;
    left: 3.5px;
}

.my-game-start-btn-light {
    position: absolute;
    width: 104px;
    height: 2px;
    top: 2px;
    left: 8px;
    border-radius: 16px;
    opacity: 0.32;
    background: var(--Primary-100, #FFF1E6);
    flex-shrink: 0;
}

.my-game-start-btn-title {
    position: absolute;
    top: 10px;
    left: 28px;
    color: var(--Grey-White, #FFF);
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--Primary-500, #66350A);
    font-family: 'jf-openhuninn-2.1', sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    /* 100% */
    letter-spacing: 2px;
}

.my-game-prize-title-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.my-game-prize-title {
    color: #FFF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #572A14;
    font-family: "mantouSans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    /* 170% */
    letter-spacing: 4px;
}

.my-game-prize-wrapper {
    display: flex;
    width: 100%;
    max-width: 350px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.my-game-prize-list {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    justify-content: space-evenly;
}

.my-game-prize-content {
    display: flex;
    flex: 1;
    /* 讓 4 個項目均分寬度，自動縮小 */
    max-width: 86px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.my-game-prize-content img {
    max-width: 100%;
    height: auto;
}

.my-game-prize-content-text {
    color: var(--Grey-White, #FFF);
    text-align: center;
    font-family: "PingFang TC";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    /* 169.231% */
}

.my-dialog-footer {
    display: flex;
    width: 375px;
    padding: 32px 16px;
    justify-content: center;
    align-items: center;
    gap: 21px;
}

.my-victory-prize-title {
    color: #FFB54D;
    text-align: center;

    /* CH/PingFang TC/H3 20/Semibold */
    font-family: "PingFang TC";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 150% */
}

.my-victory-prize-conetnt-wrapper {
    position: relative;
    /* border-color: #572A14; */
    /* background: #E3F7FF; */
    width: 280px;
    padding: 4px;
    box-sizing: border-box;
}

.my-victory-prize-conetnt-show {
    position: relative;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.my-victory-prize-content {
    text-align: center;
    font-size: 14px;
    color: #FFF;
    line-height: 22px;
}

.my-game-dialog-wrapper {
    position: relative;
    display: flex;
    width: 300px;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    border: 1px solid var(--Primary-500, #66350A);
    background: var(--Primary-White, #FFF);
    /* Shadow-default/Level 2/Down */
    box-shadow: 0 0 1px 0 rgba(13, 23, 102, 0.05), 0 4px 8px 0 rgba(13, 23, 102, 0.10);
}

.my-game-dialog-img {
    width: 300px;
    height: 144px;
    /* border-radius-top: 16px; */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    /* border: 1px solid var(--Primary-500, #66350A); */
}

.my-game-dialog-content-wrapper {
    display: flex;
    padding: 24px 20px 0 20px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.my-game-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.my-game-dialog-content-title {
    color: var(--Grey-900, #33343B);
    text-align: center;
    font-family: "PingFang TC";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 150% */
}

.my-game-dialog-content-description {
    color: var(--Grey-900, #33343B);
    font-family: "PingFang TC";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.my-game-dialog-content-footer {
    display: flex;
    width: 271px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.my-game-dialog-content-button {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    border-radius: 8px;
    background: var(--neutral-800, #33343B);
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    cursor: pointer;
    color: var(--orange-500, #FF963B);
    text-align: center;
    font-weight: 500;
    font-family: jf-openhuninn-2.1;
    font-size: 14px;
    font-style: normal;
    line-height: 22px;
    /* 157.143% */
    letter-spacing: 2px;
    text-wrap: nowrap;
}

.my-dialog-bottom {
    position: relative;
    display: flex;
    width: 298px;
    justify-content: center;
    align-items: center;
    background: #FFF;
    height: 18px;
    flex-shrink: 0;
    border-radius: 0 0 12px 12px;
}

.my-dialog-close {
    position: absolute;
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    top: 10px;
    right: 10px;

}