@charset "utf-8";

/* ==========================================================================
   ✦ 01. 全域與字體設定 (強制 PC 版原生等比縮放設計，無斷點) ✦
   ========================================================================== */
:root {
    --deep: #102f39;
    --deep2: #0b2028;
    --sea: #48c6c5;
    --sea2: #b8f0de;
    --sand: #f6e8c3;
    --ivory: #fffaf0;
    --gold: #e6bd62;
    --gold2: #fff1b9;
    --coral: #d96b59;
    --coral2: #a9473d;
    --ink: #24434a;
    --white: #fff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 18px; } 

body {
    margin: 0;
    padding: 0;
    width: 100%;

    min-width: 1050px;
    overflow-x: hidden;
    

    background-color: #151718; 
    background-image: url('images/kv.jpg');
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat; 
    
    font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
    font-weight: 500; 
    line-height: 1.6;
    color: #3d2514;
    letter-spacing: 0.03em;
}

a { color: #00aaff; font-weight: bold; text-decoration: none; }
a:hover { color: #6ff55b; }
img { max-width: 100%; height: auto; display: block; }

.yellow { color: #ffff00; }
.white { color: #FFFFFF; font-size: 1.1rem; line-height: 1.5; font-weight: 500; }

/* ==========================================================================
   ✦ 02. 版面佈局與基礎容器
   ========================================================================== */
#outer {
    width: 100%;
    background-image: none;
}

#weapper {
    width: 1050px;
    margin: 0 auto;
    position: relative;
}

#header {
    width: 1050px;
    position: relative;
    background: url('images/header.png') no-repeat center 90px;
    height: 390px; 

    margin: 0 auto -90px auto; 
    z-index: 10;
}

#logo {
    display: block;
    width: 136px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 3px;
    z-index: 9;
}
#logo a { display: block; width: 100%; height: 100%; }

#menu-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 1050px;
    height: 117px;
}

.icon01 { display: block; width: 152px; height: 47px; position: absolute; top: 16px; right: 337px; }
.icon01 a { display: block; width: 100%; height: 100%; background: url('images/icon_01.png') no-repeat center; background-size: contain; }
.icon01 a:hover { background-image: url('images/icon_01_2.png'); }

.icon02 { display: block; width: 152px; height: 47px; position: absolute; top: 16px; right: 180px; }
.icon02 a { display: block; width: 100%; height: 100%; background: url('images/icon_02.png') no-repeat center; background-size: contain; }
.icon02 a:hover { background-image: url('images/icon_02_2.png'); }

.icon03 { display: block; width: 152px; height: 47px; position: absolute; top: 16px; right: 23px; }
.icon03 a { display: block; width: 100%; height: 100%; background: url('images/icon_03.png') no-repeat center; background-size: contain; }
.icon03 a:hover { background-image: url('images/icon_03_2.png'); }

.title_w {
    margin: 0 auto; 
    text-align: center;
      padding: 158px 0 0 0;
    box-sizing: border-box;
    background-image: url('images/title_w1.png');
    background-repeat: no-repeat;
    background-position: center top;
    width: 650px;
    height: 320px;
    position: relative;
    z-index: 15;
}
.title_w img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    /* ✦ 確保數字高度為 100px ✦ */
    height: 100px; 
    margin: 0 -2px;
}

.marquee-box {
    position: relative;
    width: 620px;
    height: 60px;
    margin: 0 auto;
    z-index: 15;
}
canvas {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border-radius: 30px;
}
.marquee-content {
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 60px;
    font-size: 1.1rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
    white-space: nowrap;
    pointer-events: none; 
    z-index: 10; 
}

/* ==========================================================================
   ✦ 03. 登入選單區塊 
   ========================================================================== */

/* 1150px 的專屬選單底框 */
#menu-top-bg {
    position: relative;
    width: 1150px;
    height: 285px;
    left: 50%;
    margin-left: -575px;
    background: url('images/content_top.png') no-repeat top center;
    background-size: 100% 100%;
    z-index: 20;
}


#menu {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    text-align: center;
}


.menu-btn,
.menu-btn-wrap {
    display: inline-block !important;
    vertical-align: top;
    position: relative;
    margin: 0 15px;
    width: 277px !important;
    height: 102px !important;
}


.hidden,
.menu-btn a.hidden,
.menu-btn-wrap a.hidden { 
    display: none !important; 
}


.menu-btn a,
.menu-btn-wrap a {
    display: block !important;
    width: 277px !important;
    height: 102px !important;
    text-indent: -9999px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* ✦ 1. 天天登入送：鎖定 Hover 狀態圖，禁用互動 ✦ */
.but01 a { 
    background-image: url('images/but_01_1.png') !important; 
    cursor: default !important; 
    pointer-events: none !important; 
}

/* ✦ 2. 碎片兌換：常態圖與 Hover 切換 ✦ */
.but02 a { 
    background-image: url('images/but_02.png') !important; 
}
.but02 a:hover { 
    background-image: url('images/but_02_1.png') !important; 
}

/* ✦ 3. 登入/登出按鈕：常態圖與 Hover 切換 ✦ */
#btn-login { 
    background-image: url('images/btn_login.png') !important; 
}
#btn-login:hover { 
    background-image: url('images/btn_login_1.png') !important; 
}

#btn-logout { 
    background-image: url('images/btn_login_user.png') !important; 
}
#btn-logout:hover { 
    background-image: url('images/btn_login_user_1.png') !important; 
}

/* 玩家狀態列絕對定位於中間按鈕正下方 */
.user-status-box {
    position: absolute;
    top: 110%;
    left: 50%;
    margin-left: -120px; 
    width: 240px;
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 0;
    border-radius: 30px;
    border: 2px solid rgba(216, 168, 73, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 30;
}

.user-greeting { font-size: 1.1rem; font-weight: 700; color: #ffffff; }

/* ==========================================================================
   ✦ 04. 內容面板與裝飾系統
   ========================================================================== */
.content {
    width: 1050px;
    margin: -30px auto 0 auto;
    padding-top: 30px; 
    padding-bottom: 0;
    position: relative;
    background: url('images/content_bg.png') repeat-y top center;
    z-index: 10;
}


.panel-gold-wrapper {
    background: linear-gradient(135deg, #f5d78a 0%, #d8a849 50%, #b38222 100%);
    padding: 4px; 
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    width: 86%; 
    max-width: 900px; 
    margin: 0 auto 30px auto; 
}

.panel-gold-wrapper:last-child {
    margin-bottom: 0; 
}

.panel-inner-stroke { 
    background-color: #ab7329; 
    padding: 2px; 
    border-radius: 11px; 
    height: 100%; 
}
.panel-content-cream { background: linear-gradient(to bottom, #fff9e6, #f2e8cf); border-radius: 9px; color: #5c3a21; height: 100%; }
.panel-content-teal { background: linear-gradient(to bottom, #178a85, #0f6864); border-radius: 9px; color: #fff9e6; height: 100%; }

.panel-header-teal {
    background: linear-gradient(to bottom, #178a85, #0f6864);
    border-bottom: 3px solid #d8a849;
    color: #f5d78a;
    text-align: center;
    padding: 16px 20px;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
}

/* 同步內縮標題 */
.panel-bar {
    padding: 18px 24px;
    color: white;
    background: linear-gradient(90deg, #102f39, #18525b);
    border-radius: 9px;
    width: 86%; 
    max-width: 900px;
    margin: 0 auto 20px auto;
}
.panel-bar h3 { margin: 0; font-size: 1.4rem; letter-spacing: 0.05em; font-weight: 900; display: inline-block; vertical-align: middle;}
.panel-bar span { font-size: 1rem; color: #c9f5ee; font-weight: 700; display: inline-block; vertical-align: middle; margin-left: 15px;}

.deco-line {
    text-align: center;
    color: #8c6a4a; font-size: 1.1rem; font-weight: 700; margin: 24px 0;
}

/* ==========================================================================
   ✦ 05. 卡片列表 (還原 Table 寫法)
   ========================================================================== */
/* 同步內縮列表 */
.gift_funtown {
    width: 86%; 
    max-width: 900px;
    margin: 30px auto;
}
.gift_funtown table td { padding: 5px; text-align: center; }
.gift_funtow_img { transition: transform 0.3s; display: inline-block; }
.gift_funtow_img:hover { transform: translateY(-4px); }
.gift_funtow_img img { width: 100%; max-width: 180px; margin: 0 auto; display: block; }

/* 按鈕與提示 */
.action-buttons-wrapper { text-align: center; padding: 30px; }
.action-buttons-wrapper > div { display: inline-block; vertical-align: middle; margin: 10px; }
.action-btn-relative { position: relative; }
.discount-tag { position: absolute; top: -15px; right: -15px; background-color: #cc4a45; color: #fff; font-size: 13px; font-weight: bold; padding: 3px 8px; border-radius: 4px; border: 1px solid #fff; z-index: 10; }
.btn-primary {
    background: linear-gradient(180deg, #f5d78a 0%, #d8a849 100%);
    border: 2px solid #fff; color: #3d2514; font-weight: 900;
    border-radius: 12px; padding: 15px 30px; font-size: 1.2rem;
    display: inline-block; transition: 0.2s;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-exchange-text {
    background: linear-gradient(180deg, #f5d78a 0%, #d8a849 100%);
    border: 2px solid #fff; color: #3d2514; font-weight: 900;
    border-radius: 12px; padding: 15px 30px; font-size: 1.2rem;
    display: inline-block; transition: 0.2s;
}
.btn-exchange-text:hover { filter: brightness(1.1); }

.btn-red-gradient { background: linear-gradient(180deg, #dc2626, #991b1b); color: #fff; border-color: #fca5a5; }
.rate-up-notice { color: #f5d78a; font-size: 1rem; font-weight: 700; display: block; margin-top: 8px; }
.links-wrapper { display: inline-block; text-align: center; }
.links-wrapper a { display: block; margin: 5px 0;}
.link-gold { color: #f5d78a; font-size: 1.1rem; text-decoration: underline; }

/* ==========================================================================
   ✦ 06. 規則與紀錄排版
   ========================================================================== */
.rule-section-padding { padding: 40px 30px; }
.rule-header { text-align: center; border-bottom: 2px solid rgba(216,168,73,0.3); padding-bottom: 25px; margin-bottom: 25px; }
.rule-title { font-size: 1.8rem; font-weight: 900; color: #0f6864; margin: 0 0 15px 0; }
.rule-date { color: #cc4a45; font-size: 1.5rem; font-weight: 900; margin: 0; }

.rule-subtitle { font-size: 1.4rem; font-weight: 900; color: #0f6864; text-align: center; margin: 0 0 15px 0; }
.rule-description { color: #3d2514; font-size: 1.2rem; text-align: center; font-weight: 700; margin-bottom: 25px; }
.rule-highlight { background-color: rgba(245,215,138,0.5); padding: 4px 10px; border-radius: 6px; }

/* ✦ 滿版任務方塊 ✦ */
.rules-grid { text-align: center; }
.rule-box { 
    display: block; 
    width: 100%; 
    margin: 0 0 20px 0; 
    background: rgba(15,104,100,0.05); 
    border: 2px solid rgba(216,168,73,0.3); 
    border-radius: 12px; 
    padding: 25px; 
    text-align: left; 
    box-sizing: border-box;
}
.rule-box:last-child { margin-bottom: 0; }

.rule-box-title { font-size: 1.3rem; font-weight: 900; color: #0f6864; margin: 0 0 15px 0; border-bottom: 2px solid rgba(216,168,73,0.2); padding-bottom: 10px;}
.rule-box-badge { background-color: #178a85; color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 1.1rem; display: inline-block; margin-bottom: 8px;}
.rule-box-desc { font-weight: 700; font-size: 1.1rem; margin: 0 0 15px 0; color: #3d2514;}
.rule-box-list { padding-left: 20px; margin: 0; }
.rule-box-list li { font-size: 1.1rem; color: #3d2514; margin-bottom: 10px; font-weight: 500;}
.rule-list-heading { color: #0f6864; font-weight: 900; display: block; margin-bottom: 5px; }

.rule-footer-notice { background-color: rgba(23,138,133,0.1); padding: 20px; border-radius: 12px; border: 2px solid rgba(216,168,73,0.3); margin-top: 30px; }
.rule-footer-notice p { color: #0f6864; font-weight: 700; font-size: 1.1rem; margin: 0 0 12px 0; }

/* ✦ 大獎紀錄 (UI 單行對齊優化) ✦ */
.panel-title { text-align: center; font-size: 1.6rem; font-weight: 900; color: #fceabb; text-shadow: 1px 2px 3px rgba(0,0,0,0.8); margin: 0 0 20px 0; }
.record-container { height: 250px; overflow-y: hidden; padding: 0 10px; }
.record-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    border-bottom: 1px dashed rgba(255,255,255,0.2); 
    padding-bottom: 10px; 
    color: #e5f2f1; 
    font-weight: 500;
    font-size: 1.1rem;
}
.record-item .record-info { text-align: left; }
.record-item .player { color: #ffb74d; font-weight: 900; margin: 0 4px;}
.record-item .prize { color: #ffeb3b; font-weight: 900; font-size: 1.2rem;}
.record-item .time { font-size: 1rem; color: #80cbc4; letter-spacing: 0.05em; white-space: nowrap; }

/* ==========================================================================
   ✦ 07. 日曆與簽到 ✦
   ========================================================================== */
.calendar-padding { padding: 30px; }
.calendar-grid { background-color: rgba(216, 168, 73, 0.15); border: 2px solid rgba(216, 168, 73, 0.3); border-radius: 12px; padding: 15px; }

.calendar-header-row .cal-col, .calendar-body-row .calendar-cell { display: inline-block; width: 13.5%; text-align: center; vertical-align: top;}
.calendar-header-row { font-weight: 900; color: #0f6864; font-size: 1.2rem; border-bottom: 2px solid rgba(216,168,73,0.3); padding-bottom: 10px; margin-bottom: 10px;}
.calendar-header-row .sunday { color: #cc4a45; }

/* ✦ 基礎格子設定：固定高度，並使用 flex 排列上下區塊 ✦ */
.calendar-cell { 
    background-color: #fffceb; 
    border: 2px solid #b57600; 
    border-radius: 8px; 
    height: 105px; 
    margin-bottom: 10px;
    box-sizing: border-box;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    padding: 0 !important; 
}

/* ✦ 上半部：標題列 ✦ */
.cal-date-header { 
    background-color: #b57600; 
    color: #ffffff;
    font-size: 1.1rem; 
    font-weight: 900; 
    text-align: center;
    padding: 4px 0;
    width: 100%;
    margin: 0;
}

/* ✦ 下半部：內容區塊 ✦ */
.cal-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent; 
    width: 100%;
}

/* ✦ 仿印章樣式：傾斜並增加對比 ✦ */
.stamp-claimed { 
    border: 2px solid #b57600; 
    color: #b57600; 
    border-radius: 50%; 
    width: 48px; 
    height: 48px; 
    line-height: 44px; 
    text-align: center; 
    font-size: 1.1rem; 
    font-weight: 900; 
    margin: 0 auto; 
    background-color: rgba(181, 118, 0, 0.05); 
    transform: rotate(-15deg); 
}

/* ✦ 防呆設計：尚未開放/無需簽到之灰階狀態 ✦ */
.calendar-cell.cell-disabled { 
    border-color: #cccccc; 
    background-color: #f5f5f5; /* ✦ 底色移到外層 ✦ */
}
.calendar-cell.cell-disabled .cal-date-header { 
    background-color: #cccccc;
    color: #777777; 
}

/* ✦ 當日高亮：維持主視覺青綠色 ✦ */
.calendar-cell.active { 
    border-color: #0f6864; 
    background-color: #e5f2f1; /* ✦ 底色移到外層 ✦ */
}
.calendar-cell.active .cal-date-header {
    background-color: #0f6864;
    color: #f7d56a;
}
.calendar-cell.active .stamp-claimed { 
    border-color: #0f6864; 
    color: #0f6864; 
    background-color: transparent; 
}

/* ✦ 補簽按鈕樣式 ✦ */
.btn-makeup {
    background: linear-gradient(180deg, #178a85 0%, #0f6864 100%);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 900;
    padding: 2px 12px;
    border-radius: 12px;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-makeup:hover {
    filter: brightness(1.1);
    color: #fff;
}
.makeup-cost {
    color: #cc4a45;
    font-size: 0.8rem;
    font-weight: 900;
    margin-top: 2px;
}

.rewards-header { text-align: center; padding: 25px 0; border-bottom: 2px solid rgba(216,168,73,0.3); background: rgba(0,0,0,0.2); }
.rewards-header h2 { font-size: 1.6rem; font-weight: 900; color: #f5d78a; margin: 0; }
.rewards-container { text-align: center; padding: 30px; }
.reward-item, .reward-item-max { display: inline-block; vertical-align: top; width: 22%; margin: 0 1%; box-sizing: border-box;}
.reward-item { background: rgba(23,138,133,0.5); border: 2px solid rgba(216,168,73,0.5); border-radius: 12px; padding: 15px; }
.reward-badge { background-color: #0f6864; color: #f5d78a; padding: 5px; border-radius: 6px; font-weight: 900; margin-bottom: 15px; font-size: 1.1rem;}
.reward-desc { background-color: #fff9e6; color: #3d2514; font-weight: 900; font-size: 1.1rem; padding: 8px 0; border-radius: 6px; }
.reward-item-max { background: linear-gradient(180deg, #b38222, #d8a849); border: 2px solid #fff9e6; border-radius: 12px; padding: 15px; position: relative; }
.reward-max-tag { position: absolute; top: -10px; right: -10px; background-color: #cc4a45; color: #fff; font-size: 1rem; font-weight: 900; padding: 4px 10px; border-radius: 6px; border: 2px solid #fff; }
.rewards-footer-notice { text-align: center; font-size: 1.1rem; font-weight: 700; color: #f5d78a; padding-bottom: 30px; }

/* 底部裝飾容器 */
.bottom { 
    max-width: 1150px;
    height: 180px; 
    margin: 0 auto; 
    background: url('images/content_bottom.png') no-repeat top center; 
    padding-top: 40px;
}



/* 累積簽到獎勵：4 格禮物圖樣式 */
.rewards-image-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 26px;
    padding: 30px 24px 24px;
    flex-wrap: nowrap;
}

.reward-image-item {
    display: block;
    width: 150px;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.reward-image-item:hover {
    transform: translateY(-4px);
}

.reward-day-label {
    display: inline-block;
    min-width: 88px;
    margin: 0 auto 12px;
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe9a9 0%, #e8bd59 52%, #c98d28 100%);
    color: #5e2d0c;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.reward-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    min-height: 112px;
    margin: 0 auto;
    padding: 8px;
    border-radius: 20px;
    background: rgba(255, 248, 227, 0.08);
    border: 1px solid rgba(245, 215, 138, 0.16);
}

.reward-image-item img {
    display: block;
    width: 104px;
    height: auto;
    margin: 0 auto;
}

@media screen and (max-width: 1050px) {
    .rewards-image-container {
        gap: 18px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .reward-image-item {
        width: 135px;
    }

    .reward-image-frame {
        width: 118px;
        min-height: 102px;
    }

    .reward-image-item img {
        width: 96px;
    }
}


/* ========================================================================== 
   ✦ 08. style(5).css 合併補充：共用工具、Modal、注意事項頁 ✦
   ========================================================================== */

/* 隱藏捲軸工具 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* AVATAR 浮動動態特效 */
@keyframes float-avatar {
    0% { transform: translateY(0); filter: drop-shadow(0 15px 15px rgba(0,0,0,0.4)); }
    50% { transform: translateY(-15px); filter: drop-shadow(0 25px 15px rgba(0,0,0,0.2)); }
    100% { transform: translateY(0); filter: drop-shadow(0 15px 15px rgba(0,0,0,0.4)); }
}
.animate-avatar { animation: float-avatar 3.5s ease-in-out infinite; }

/* 補充卡片效果 */
.gift-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    background: linear-gradient(to bottom, #b52924, #73130f);
    border: 2px solid #d8a849;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.gift-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border-color: #f5d78a;
}
.exchange-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.exchange-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.exchange-card:hover .item-image-wrapper { border-color: #f5d78a; }

.btn-disabled {
    background: #505050;
    border: 1px solid #7b7b7b;
    color: #919191;
    font-weight: 700;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    cursor: not-allowed;
}

/* Modal 彈窗 */
.modal {
    display: none;
    position: fixed;
    z-index: 50;
    inset: 0;
    overflow: auto;
    background-color: rgba(15,104,100,0.85);
    backdrop-filter: blur(4px);
}
.modal-content {
    background: linear-gradient(145deg, #0f6864, #1a2b2b);
    margin: 10% auto;
    padding: 24px;
    border: 2px solid #d8a849;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    position: relative;
    color: #fff9e6;
}
.modal-close {
    color: #d8a849;
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-close:hover { color: #f5d78a; }

/* ========================================================================== 
   ✦ 09. 注意事項頁：沿用 INDEX 版頭與 1050px 內容排版 ✦
   ========================================================================== */
.notice-page .notice-content-cap {
    position: relative;
    width: 1150px;
    height: 245px;
    left: 50%;
    margin-left: -575px;
    background: url('images/content_top.png') no-repeat top center;
    background-size: 100% 100%;
    z-index: 20;
}

.notice-page .notice-heading-wrap {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    width: 900px;
    text-align: center;
}

.notice-page .notice-page-title {
    margin: 0;
    color: #f5d78a;
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-shadow: 0 3px 0 rgba(61,37,20,0.65), 0 5px 12px rgba(0,0,0,0.55);
}

.notice-page .notice-back-home {
    display: inline-block;
    margin-top: 14px;
    padding: 7px 20px;
    border: 1px solid rgba(245,215,138,0.75);
    border-radius: 24px;
    background: rgba(15,104,100,0.88);
    color: #fff9e6;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.notice-page .notice-back-home:hover {
    color: #f5d78a;
    background: rgba(23,138,133,0.95);
}

.notice-page .notice-content {
    margin-top: -30px;
    padding-top: 40px;
    padding-bottom: 20px;
}

.notice-page .notice-panel-content {
    padding: 42px 46px 48px;
}

.notice-page .notice-deco-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 82%;
    margin: 0 auto 34px;
    color: #f5d78a;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
}
.notice-page .notice-deco-line::before,
.notice-page .notice-deco-line::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, #f5d78a, transparent);
}

.notice-page .notice-rules-list {
    counter-reset: notice-rule-counter;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.notice-page .notice-rules-list li {
    position: relative;
    padding: 0 0 22px 46px;
    border-bottom: 1px dashed rgba(245,215,138,0.26);
    color: #fff9e6;
    font-size: 1.05rem;
    line-height: 1.9;
    text-align: justify;
    letter-spacing: 0.035em;
}

.notice-page .notice-rules-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.notice-page .notice-rules-list li::before {
    counter-increment: notice-rule-counter;
    content: counter(notice-rule-counter) ".";
    position: absolute;
    left: 0;
    top: -2px;
    min-width: 32px;
    color: #f5d78a;
    font-family: Arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: 900;
    text-align: right;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.notice-page .policy-link-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 42px;
    padding-top: 30px;
    border-top: 1px dashed rgba(216,168,73,0.4);
}

.notice-page .btn-policy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 260px;
    padding: 12px 26px;
    border: 1px solid #d8a849;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(216,168,73,0.12), rgba(0,0,0,0.18));
    color: #f5d78a;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
    transition: all 0.2s ease;
}

.notice-page .btn-policy:hover {
    transform: translateY(-2px);
    border-color: #f5d78a;
    color: #fff;
    background: linear-gradient(180deg, rgba(216,168,73,0.2), rgba(0,0,0,0.35));
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.45);
}

.notice-page .notice-top-link {
    display: block;
    width: 62px;
    height: 62px;
    margin: 10px auto 0;
    border: 2px solid rgba(216,168,73,0.45);
    border-radius: 50%;
    background: linear-gradient(180deg, #178a85, #0f6864);
    color: #f5d78a;
    text-align: center;
    line-height: 56px;
    font-size: 1.5rem;
    box-shadow: 0 5px 12px rgba(0,0,0,0.28);
}
.notice-page .notice-top-link:hover { color: #fff9e6; transform: translateY(-2px); }

/* ==========================================================================
   ✦ 10. 兌換頁：沿用 INDEX 版頭與 1050px 內容排版
   ========================================================================== */

.exchange-page .exchange-content-cap {
    position: relative;
    width: 1150px;
    height: 285px;
    left: 50%;
    margin-left: -575px;
    background: url('images/content_top.png') no-repeat top center;
    background-size: 100% 100%;
    z-index: 20;
}
.exchange-page .exchange-heading-wrap {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 900px;
    text-align: center;
}
.exchange-page .exchange-page-title {
    margin: 0;
    color: #f5d78a;
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-shadow: 0 3px 0 rgba(61,37,20,0.65), 0 5px 12px rgba(0,0,0,0.55);
}
.exchange-page .exchange-page-subtitle {
    margin-top: 10px;
    color: #fff9e6;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.exchange-page .exchange-subtitle-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 12px 4px;
    border: 1px solid rgba(245,215,138,0.75);
    border-radius: 18px;
    background: rgba(0,0,0,0.28);
    color: #f5d78a;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.exchange-page .exchange-back-home {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 20px;
    border: 1px solid rgba(245,215,138,0.75);
    border-radius: 24px;
    background: rgba(15,104,100,0.88);
    color: #fff9e6;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.exchange-page .exchange-back-home:hover {
    color: #f5d78a;
    background: rgba(23,138,133,0.95);
}
.exchange-page .exchange-content {
    margin-top: -30px;
    padding-top: 40px;
    padding-bottom: 20px;
}
.exchange-page .exchange-balance-panel { margin-bottom: 24px; }
.exchange-page .exchange-balance-content {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 22px 32px;
}
.exchange-page .exchange-balance-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, #178a85, #0f6864);
    border: 2px solid #d8a849;
    color: #f5d78a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.exchange-page .exchange-balance-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.35;
}
.exchange-page .exchange-balance-label {
    color: #8b6a43;
    font-size: 0.9rem;
    font-weight: 700;
}
.exchange-page .exchange-balance-copy strong {
    margin-top: 3px;
    color: #0f6864;
    font-size: 1.5rem;
    font-weight: 900;
}
.exchange-page .exchange-balance-number { color: #cc4a45; margin-left: 8px; }
.exchange-page .exchange-panel-content { padding: 32px 28px 34px; }
.exchange-page .exchange-section-header {
    text-align: center;
    padding: 0 0 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(245,215,138,0.35);
}
.exchange-page .exchange-section-header h2 {
    margin: 0;
    color: #f5d78a;
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
.exchange-page .exchange-series-name {
    margin: 8px 0 0;
    color: #fff9e6;
    font-size: 1.1rem;
    font-weight: 900;
}
.exchange-page .exchange-date {
    margin: 7px 0 0;
    color: #f5d78a;
    font-size: 0.95rem;
    font-weight: 700;
}
.exchange-page .exchange-limit-tag {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 12px;
    border: 1px solid rgba(245,215,138,0.35);
    border-radius: 16px;
    background: rgba(0,0,0,0.2);
    color: rgba(255,249,230,0.78);
    font-size: 0.78rem;
    font-weight: 700;
}
.exchange-page .exchange-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.exchange-page .exchange-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    border: 1px solid rgba(216,168,73,0.55);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(23,138,133,0.72), rgba(15,104,100,0.74));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.14);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.exchange-page .exchange-card:hover {
    transform: translateY(-4px);
    border-color: #f5d78a;
    box-shadow: 0 10px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
}
.exchange-page .exchange-card h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 900;
    text-align: center;
}
.exchange-page .exchange-meta {
    min-height: 40px;
    margin: 0 0 10px;
    color: #f5d78a;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
}
.exchange-page .item-image-wrapper {
    width: 100%;
    height: 150px;
    margin-bottom: 12px;
    border: 1px solid rgba(216,168,73,0.4);
    border-radius: 8px;
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: border-color 0.25s ease;
}
.exchange-page .exchange-card:hover .item-image-wrapper { border-color: #f5d78a; }
.exchange-page .exchange-btn {
    width: 100%;
    min-height: 45px;
    padding: 8px;
    border: 2px solid #fff4ce;
    border-radius: 9px;
    background: linear-gradient(180deg, #f5d78a 0%, #d8a849 100%);
    color: #3d2514;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.25;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.25), inset 0 2px 4px rgba(255,255,255,0.4);
    transition: transform 0.2s ease, filter 0.2s ease;
}
.exchange-page .exchange-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.exchange-page .exchange-notice-box {
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid rgba(216,168,73,0.4);
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    color: #fff9e6;
}
.exchange-page .exchange-notice-box h3 {
    margin: 0 0 8px;
    color: #f5d78a;
    font-size: 1rem;
    font-weight: 900;
}
.exchange-page .exchange-notice-box p {
    margin: 4px 0;
    color: rgba(255,249,230,0.9);
    font-size: 0.9rem;
    line-height: 1.65;
    font-weight: 500;
}
.exchange-page .exchange-top-image-link { display: inline-block; }
.exchange-page .exchange-top-image-link img { margin: 0 auto; }


/* ==========================================================================
   ✦ Exchange page revision: keep the three large INDEX buttons on top
   ========================================================================== */
.exchange-page #menu-top-bg {
    margin-bottom: 0;
}

.exchange-page .exchange-content {
    margin-top: -30px;
    padding-top: 34px;
}

.exchange-page .exchange-title-bar {
    width: 86%;
    max-width: 900px;
    margin: 0 auto 24px auto;
    padding: 18px 28px;
    background: linear-gradient(90deg, #102f39, #18525b);
    border-radius: 10px;
    color: #fff9e6;
    text-align: center;
}

.exchange-page .exchange-title-bar h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #f5d78a;
}

.exchange-page .exchange-title-bar p {
    margin: 6px 0 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #c9f5ee;
}

.exchange-page .login-section {
    display: inline-block;
}

.exchange-page .exchange-card {
    min-height: 360px;
}

.exchange-page .exchange-top-nav-note {
    text-align: center;
    color: #8c6a4a;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

/* ✦ Exchange page tab state: 周年碎片兌換為目前頁 ✦ */

.exchange-page .but01 a {
    background-image: url('images/but_01.png') !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
.exchange-page .but01 a:hover {
    background-image: url('images/but_01_1.png') !important;
}

/* 右側「週年碎片兌換」在目前頁固定為選取／亮起狀態 */
.exchange-page .but02 a,
.exchange-page .but02 a:hover {
    background-image: url('images/but_02_1.png') !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ==========================================================================
   ✦ Exchange 兌換卡片修正版：250x300 圖框 
   ========================================================================== */


.exchange-page .exchange-main-panel {
    width: 94%;
    max-width: 980px;
}

.exchange-page .exchange-panel-content {
    padding: 34px 28px 36px;
}


.exchange-page .exchange-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.exchange-page .exchange-card {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.exchange-page .exchange-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.exchange-page .exchange-card h3 {
    min-height: 32px;
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* 商品資訊：維持一行，避免「賣價 / 金幣」被拆得零碎 */
.exchange-page .exchange-meta {
    min-height: 26px;
    margin: 0 0 12px;
    color: #f5d78a;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}

/* 250 x 300 圖片專用比例框 */
.exchange-page .item-image-wrapper {
    width: 250px;
    height: 300px;
    max-width: 100%;
    margin: 0 auto 14px;
    padding: 0;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid rgba(216,168,73,0.55);
    border-radius: 8px;
    background: rgba(0,0,0,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 圖片完整落在 250x300 框內，不拉伸、不裁切、不溢出 */
.exchange-page .item-image-wrapper .fashion-thumb {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
}

/* 兌換按鈕與系列提示維持相同底部高度，使卡片列整齊 */
.exchange-page .exchange-btn,
.exchange-page .exchange-series-note {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
}

.exchange-page .exchange-series-note {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid rgba(245,215,138,0.5);
    border-radius: 9px;
    background: rgba(0,0,0,0.18);
    color: #fff1b9;
    font-size: 0.84rem;
    line-height: 1.3;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

/* 系列卡的長標題稍微縮小，仍維持單行易讀 */
.exchange-page .exchange-card-series h3 {
    font-size: 0.98rem;
}

/* 保持每列卡片的視覺高度一致 */
.exchange-page .exchange-card:hover .item-image-wrapper {
    border-color: #f5d78a;
}



/* ==========================================================================
   ✦ Exchange 面板寬度修正 v2
   ========================================================================== */
.exchange-page .exchange-main-panel {
    width: 86%;
    max-width: 900px;
}

.exchange-page .exchange-panel-content {
    padding: 32px 20px 34px;
}

.exchange-page .exchange-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.exchange-page .exchange-card {
    padding: 10px;
}

.exchange-page .item-image-wrapper {
    width: 250px;
    height: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.exchange-page .fashion-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}


/* ==========================================================================
   ✦ 06-A. 大獎紀錄（圖文版本／套用指定三張底圖）
   ========================================================================== */
.bigprize-record-section {
    width: 600px;
    max-width: 600px;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.bigprize-record-inner {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.bigprize-record-board {
    width: 600px;
    margin: 0 auto;
}


.record-graphic-container {
    height: auto;
    overflow: visible;
    padding: 0;
}

/* 黃色底專用高對比文字：避免淺黃/金色文字吃掉 */
.record-graphic-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    margin: 0;
    border-bottom: 1px dashed rgba(140, 100, 45, 0.38);
    color: #4f351f;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
}

.record-graphic-item:last-child {
    border-bottom: none;
    padding-bottom: 10px;
}

.record-graphic-item .record-info {
    flex: 1;
    text-align: left;
    color: #4f351f;
}

.record-graphic-item .player {
    color: #0f6864;
    font-weight: 900;
    margin: 0 4px;
}

.record-graphic-item .prize {
    color: #8f3d23;
    font-weight: 900;
    font-size: 1.18rem;
    text-shadow: none;
}

.record-graphic-item .time {
    flex: 0 0 auto;
    min-width: 170px;
    text-align: right;
    font-size: 0.98rem;
    color: #236b72;
    font-weight: 900;
    letter-spacing: 0.03em;
    white-space: nowrap;
}


/* ==========================================================================
   ✦ 今日免費抽標題：
   ========================================================================== */
.panel-bar.panel-bar-title-image {
    background: transparent;
    padding: 0 24px 12px;
    text-align: center;
    box-shadow: none;
}

.panel-bar.panel-bar-title-image .today-free-title-img {
    display: block;
    width: 520px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 4px;
}

.panel-bar.panel-bar-title-image span {
    display: block;
    margin: 0;
    color: #5c3a21;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

/* ==========================================================================
   ✦ 注意事項頁
   ========================================================================== */
.notice-page .notice-heading-wrap.notice-heading-wrap-image {
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.notice-page .notice-page-title-image {
    width: 264px;
    height: 70px;
    margin: 0 auto;
    background: url('images/title3_1.png') no-repeat center center;
    background-size: contain;
}

.notice-page .notice-back-home-image {
    display: block;
    width: 250px;
    height: 91px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url('images/return_bt.png') no-repeat center center;
    background-size: contain;
    box-shadow: none;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.notice-page .notice-back-home-image:hover {
    background-image: url('images/return_bt2.png');
    transform: translateY(-2px);
    filter: none;
}

.notice-page .notice-back-home-image span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   ✦ 11. 圖片版操作按鈕：10連抽 / 碎片兌換
   ========================================================================== */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 三區橫向排列：10連抽／碎片兌換／右側文字連結 */
.action-buttons-wrapper-image {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 26px 20px 22px;
    text-align: center;
}

.action-buttons-wrapper-image > div {
    display: block;
    margin: 0;
    vertical-align: middle;
}

.action-btn-relative-image {
    position: relative;
    flex: 0 0 auto;
}

/* 清除舊文字按鈕外觀，完全由 PNG 圖片呈現 */
.action-buttons-wrapper-image .btn-primary {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    line-height: 0;
}

/* 圖片按鈕：直接用 <img> 顯示，避免 background-image 路徑失效時整顆按鈕空白 */
.btn-image-draw10,
.btn-image-exchange {
    position: relative;
    display: block;
    overflow: visible;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.btn-image-draw10 {
    width: 350px;
    height: 89px;
}

.btn-image-exchange {
    width: 225px;
    height: 66px;
}

.image-swap-btn .btn-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.image-swap-btn .btn-img-hover {
    opacity: 0;
    pointer-events: none;
}

.image-swap-btn:hover .btn-img-normal { opacity: 0; }
.image-swap-btn:hover .btn-img-hover { opacity: 1; }
.image-swap-btn:hover { transform: translateY(-2px); }

/* 稀有機率提示固定在 10 連抽正下方 */
.action-btn-relative-image .rate-up-notice {
    display: block;
    margin-top: 6px;
    color: #f5d78a;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* 右側兩個文字連結維持直排 */
.action-buttons-wrapper-image .links-wrapper {
    flex: 0 0 110px;
    width: 110px;
    text-align: left;
}

.action-buttons-wrapper-image .links-wrapper a {
    display: block;
    margin: 4px 0;
    white-space: nowrap;
}

/* ========================================================================== 
   ✦ 12. 大獎紀錄新版三段底圖：900px 寬

   ========================================================================== */
.bigprize-record-section {
    width: 900px !important;
    max-width: 900px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bigprize-record-inner,
.bigprize-record-board {
    width: 900px !important;
    max-width: 900px !important;
}

.bigprize-record-top {
    width: 900px !important;
    height: 110px !important;
    background-image: url('images/gift_funtown_bigwin01.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 900px 110px !important;
}

.bigprize-record-middle {
    width: 900px !important;
    background-image: url('images/gift_funtown_bigwin02.png') !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: 900px 118px !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
}

.bigprize-record-bottom {
    width: 900px !important;
    height: 90px !important;
    background-image: url('images/gift_funtown_bigwin03.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 900px 90px !important;
}

/* 900px 版：完整保留中獎文字與時間於同一行 */
.record-graphic-item {
    flex-wrap: nowrap !important;
    gap: 22px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.record-graphic-item .record-info {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.record-graphic-item .time {
    flex: 0 0 178px !important;
    min-width: 178px !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   ✦ 13. 兌換專區圖片標題
   ========================================================================== */
.exchange-page .exchange-section-header .panel-bar.panel-bar-title-image {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 10px;
    padding: 0;
}

.exchange-page .exchange-section-header .exchange-title-img {
    width: 262px !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    object-fit: contain;
}


/* ==========================================================================
   ✦ 14. PC / MOBILE 統一斷點控制
   --------------------------------------------------------------------------
   PC：1051px 以上
       - 完整保留原本 PC 版設定
       - 1050px 主內容
       - 1150px content_top / content_bottom 裝飾可向左右延伸

   MOBILE：1050px 以下
       - 保留原本 1050px 桌機構圖，不重新排版、不縮卡片、不改文字尺寸
       - 僅將會撐寬頁面的 1150px 容器限制在 1050px 畫布內
       - 1150px 背景圖仍維持原尺寸並置中裁切，因此不會破壞原視覺比例
       - 搭配目前 HTML：
         <meta name="viewport" content="width=1050">
   ========================================================================== */

/* ------------------------------
   PC 專用：1051px 以上
   原始 PC 規則已在上方定義，
   此區僅明確宣告 PC 不做額外縮版。
   ------------------------------ */
@media screen and (min-width: 1051px) {
    #outer {
        overflow-x: visible;
    }

    #menu-top-bg {
        width: 1150px;
        left: 50%;
        margin-left: -575px;
        background-size: 100% 100%;
        overflow: visible;
    }

    .notice-page .notice-content-cap,
    .exchange-page .exchange-content-cap {
        width: 1150px;
        left: 50%;
        margin-left: -575px;
        background-size: 100% 100%;
        overflow: visible;
    }

    .bottom {
        max-width: 1150px;
    }
}


/* ------------------------------
   MOBILE 專用：1050px 以下
   修正手機瀏覽器因 1150px 元件造成的
   右側多餘背景 / 空白 / 橫向延伸。
   ------------------------------ */
@media screen and (max-width: 1050px) {

    /* 手機仍使用 1050px 設計畫布，由 viewport 等比例縮放 */
    html,
    body {
        width: 1050px;
        min-width: 1050px;
        max-width: 1050px;
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden !important;
    }

    body {
        position: relative;
        background-position: top center;
    }

    /* 最外層不可再被 1150px 子元素撐寬 */
    #outer {
        width: 1050px;
        max-width: 1050px;
        margin: 0;
        overflow-x: hidden !important;
    }

    #weapper,
    #header,
    #content,
    .content {
        width: 1050px;
        max-width: 1050px;
    }

    /* 首頁 content_top：
       容器改為 1050，但背景仍保留原本 1150 視覺尺寸，
       由中央裁掉左右各約 50px，避免破壞中央 UI。 */
    #menu-top-bg {
        width: 1050px !important;
        max-width: 1050px !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        background-position: top center !important;
        background-size: 1150px 285px !important;

        overflow: hidden !important;
    }

    /* 注意事項頁頂部同樣處理 */
    .notice-page .notice-content-cap {
        width: 1050px !important;
        max-width: 1050px !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        background-position: top center !important;
        background-size: 1150px 245px !important;

        overflow: hidden !important;
    }

    /* 兌換頁頂部同樣處理 */
    .exchange-page .exchange-content-cap {
        width: 1050px !important;
        max-width: 1050px !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        background-position: top center !important;
        background-size: 1150px 285px !important;

        overflow: hidden !important;
    }

    /* 底部原本 max-width:1150px，
       手機限制在 1050px，但背景仍置中保留 1150px 視覺。 */
    .bottom {
        width: 1050px !important;
        max-width: 1050px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        background-position: top center !important;
        background-size: 1150px auto !important;

        overflow: hidden !important;
    }

    /* 全站頂部 / 底部 iframe 不得產生額外水平寬度 */
    .global-top-bar,
    .global-bottom-bar {
        width: 1050px !important;
        max-width: 1050px !important;
        overflow-x: hidden !important;
    }

    .global-top-bar iframe,
    .global-bottom-bar iframe {
        width: 1050px !important;
        max-width: 1050px !important;
    }
}

/* ==========================================================================
   ✦ 15. 累積簽到獎勵 UI 優化
   說明：沿用既有青綠＋金色 UI 語彙，只補齊獎勵文案並重新整理資訊層級。
   ========================================================================== */
.rewards-image-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    padding: 28px 26px 26px;
    flex-wrap: nowrap;
}

.reward-image-item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    width: auto;
    max-width: 185px;
    min-height: 210px;
    padding: 16px 14px 14px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(245, 215, 138, 0.42);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 12px rgba(0,0,0,0.14);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.reward-image-item:hover {
    transform: translateY(-4px);
    border-color: #f5d78a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 16px rgba(0,0,0,0.22);
}

.reward-day-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 34px;
    margin: 0 auto 12px;
    padding: 6px 15px;
    border: 1px solid rgba(255, 241, 185, 0.85);
    border-radius: 18px;
    background: linear-gradient(180deg, #f7dc91 0%, #d7a844 100%);
    color: #5a3416;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    box-shadow: 0 3px 7px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}

.reward-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 92px;
    min-height: 92px;
    margin: 0 auto 12px;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.reward-image-item img {
    display: block;
    width: 86px;
    max-height: 86px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.22));
}

/* 獎勵文案：固定成同一資訊塊，避免不同字數造成視覺跳動 */
.reward-copy {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: 8px 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(245, 215, 138, 0.55);
    border-radius: 9px;
    background: linear-gradient(180deg, #fff8df 0%, #f3e2b4 100%);
    color: #4f351f;
    line-height: 1.15;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.reward-copy-name {
    color: #4f351f;
    font-size: 0.93rem;
    font-weight: 800;
    white-space: nowrap;
}

.reward-copy-amount {
    color: #a9473d;
    font-size: 1.05rem;
    font-weight: 900;
    white-space: nowrap;
}

/* 1050px 固定畫布下維持四格橫排，不套用舊版縮窄卡片尺寸 */
@media screen and (max-width: 1050px) {
    .rewards-image-container {
        gap: 18px;
        padding: 28px 26px 26px;
    }

    .reward-image-item {
        width: auto;
        max-width: 185px;
        min-height: 210px;
    }

    .reward-image-frame {
        width: 116px;
        min-height: 92px;
        height: 92px;
    }

    .reward-image-item img {
        width: 86px;
    }
}



/* ==========================================================================
   ✦ 16. 0916 內容調整補充
   ========================================================================== */
/* 活動期間外的前後日期不顯示，但保留日曆欄位對齊 */
.calendar-cell.calendar-cell-empty {
    visibility: hidden;
}

/* 男女 AVATAR 合併為同一兌換品項：兩張圖共用一個大框與一個兌換按鈕 */
.exchange-page .item-image-wrapper-pair {
    gap: 8px;
    padding: 6px;
}

.exchange-page .item-image-wrapper-pair .fashion-thumb {
    width: calc(50% - 4px);
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   ✦ 17. 兌換頁 UI 專業重排版（0916）
   --------------------------------------------------------------------------
   設計目標：
   1. 標題 / 活動日期 / 持有碎片集中於第一視覺層級
   2. 系列預覽、造型兌換、遊戲幣兌換分區，降低資訊混雜
   3. 男女 AVATAR 合併為同一卡片、同一兌換按鈕
   4. 同類遊戲幣的 x25 / x250 合併呈現，縮短頁面長度
   5. 僅作用於 exchange-page，不影響 INDEX 與注意事項頁
   ========================================================================== */

.exchange-page .exchange-redesign {
    padding-top: 26px;
    padding-bottom: 28px;
}

/* ---------- 頁首資訊 / 餘額 ---------- */
.exchange-page .exchange-overview-panel {
    width: 86%;
    max-width: 900px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 16px;
    align-items: stretch;
}

.exchange-page .exchange-overview-title,
.exchange-page .exchange-wallet {
    position: relative;
    overflow: hidden;
    border: 2px solid #d8a849;
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.42);
}

.exchange-page .exchange-overview-title {
    min-height: 152px;
    padding: 22px 26px 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(250,239,205,0.96)),
        linear-gradient(90deg, #fff9e6, #f2e8cf);
}

.exchange-page .exchange-overview-title::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -58px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(216,168,73,0.22);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(216,168,73,0.05), 0 0 0 45px rgba(23,138,133,0.035);
    pointer-events: none;
}

.exchange-page .exchange-overview-title-img {
    position: relative;
    z-index: 2;
    display: block;
    width: 270px;
    height: auto;
    margin: 0 0 8px 0;
}

.exchange-page .exchange-overview-copy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.exchange-page .exchange-overview-copy strong {
    color: #0f6864;
    font-size: 1.08rem;
    font-weight: 900;
}

.exchange-page .exchange-overview-copy span {
    color: #6f563d;
    font-size: 0.88rem;
    font-weight: 700;
}

.exchange-page .exchange-overview-tag {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 13px;
    border: 1px solid rgba(15,104,100,0.3);
    border-radius: 999px;
    background: rgba(15,104,100,0.08);
    color: #0f6864;
    font-size: 0.82rem;
    font-weight: 900;
}

.exchange-page .exchange-wallet {
    min-height: 152px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: linear-gradient(145deg, #178a85 0%, #0f6864 66%, #0b514f 100%);
    color: #fff9e6;
}

.exchange-page .exchange-wallet::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(245,215,138,0.23);
    border-radius: 11px;
    pointer-events: none;
}

.exchange-page .exchange-wallet-icon {
    position: relative;
    z-index: 2;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f5d78a;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    color: #f5d78a;
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.04);
}

.exchange-page .exchange-wallet-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.exchange-page .exchange-wallet-copy > span {
    color: rgba(255,249,230,0.72);
    font-size: 0.78rem;
    font-weight: 700;
}

.exchange-page .exchange-wallet-copy strong {
    margin-top: 3px;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 900;
    white-space: nowrap;
}

.exchange-page .exchange-wallet-copy em {
    margin-left: 6px;
    color: #ffe36e;
    font-style: normal;
    font-size: 1.28rem;
}

.exchange-page .exchange-wallet-copy small {
    margin-top: 5px;
    color: rgba(255,249,230,0.68);
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- 共用內容分區 ---------- */
.exchange-page .exchange-ui-section,
.exchange-page .exchange-ui-notice {
    width: 86%;
    max-width: 900px;
    margin: 0 auto 24px;
}

.exchange-page .exchange-ui-section {
    padding: 24px;
    border: 3px solid #d8a849;
    border-radius: 18px;
    background: linear-gradient(180deg, #126f6b 0%, #0f605e 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}

.exchange-page .exchange-ui-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
    padding: 0 2px 17px;
    border-bottom: 1px solid rgba(245,215,138,0.34);
}

.exchange-page .exchange-ui-section-header > div {
    min-width: 0;
}

.exchange-page .exchange-ui-kicker {
    display: block;
    margin-bottom: 3px;
    color: rgba(245,215,138,0.72);
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.exchange-page .exchange-ui-section-header h2 {
    margin: 0;
    color: #fff6d7;
    font-size: 1.42rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 3px rgba(0,0,0,0.22);
}

.exchange-page .exchange-ui-section-header p {
    max-width: 420px;
    margin: 0;
    color: rgba(255,249,230,0.72);
    font-size: 0.78rem;
    line-height: 1.55;
    font-weight: 500;
    text-align: right;
}

/* ---------- 系列預覽 ---------- */
/* v3 微調：預覽圖改為依原始比例顯示，避免被寬框視覺壓扁 */
.exchange-page .exchange-preview-section {
    padding-bottom: 22px;
}

.exchange-page .exchange-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.exchange-page .exchange-preview-card {
    min-height: 225px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 18px;
    border: 1px solid rgba(245,215,138,0.56);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.exchange-page .exchange-preview-copy {
    align-self: center;
}

.exchange-page .exchange-preview-badge {
    display: inline-flex;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f0c962;
    color: #57320f;
    font-size: 0.72rem;
    font-weight: 900;
}

.exchange-page .exchange-preview-copy h3 {
    margin: 10px 0 6px;
    color: #fff;
    font-size: 1.04rem;
    line-height: 1.35;
    font-weight: 900;
}

.exchange-page .exchange-preview-copy p {
    margin: 0;
    color: rgba(255,249,230,0.70);
    font-size: 0.8rem;
    font-weight: 700;
}

.exchange-page .exchange-preview-image {
    height: 195px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0,0.14);
    overflow: hidden;
}

.exchange-page .exchange-preview-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---------- 造型 / 裝備卡片 ---------- */
.exchange-page .exchange-avatar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.exchange-page .exchange-product-card {
    position: relative;
    min-width: 0;
    min-height: 405px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid rgba(245,215,138,0.52);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff8e5 0%, #efe1bb 100%);
    color: #4b3424;
    box-shadow: 0 5px 12px rgba(0,0,0,0.18), inset 0 1px 0 #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.exchange-page .exchange-product-card:hover {
    transform: translateY(-3px);
    border-color: #fff1b9;
    box-shadow: 0 9px 18px rgba(0,0,0,0.26), inset 0 1px 0 #fff;
}

.exchange-page .exchange-product-card-featured {
    background: linear-gradient(180deg, #fff5d6 0%, #ead39b 100%);
}

.exchange-page .exchange-product-head {
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.exchange-page .exchange-product-head > div {
    min-width: 0;
}

.exchange-page .exchange-product-type {
    display: block;
    margin-bottom: 3px;
    color: #0f6864;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.exchange-page .exchange-product-head h3 {
    margin: 0;
    color: #51341e;
    font-size: 1.12rem;
    line-height: 1.3;
    font-weight: 900;
}

.exchange-page .exchange-gender-auto,
.exchange-page .exchange-product-meta {
    flex: 0 0 auto;
    max-width: 150px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.25;
    font-weight: 900;
    text-align: center;
}

.exchange-page .exchange-gender-auto {
    background: rgba(15,104,100,0.10);
    border: 1px solid rgba(15,104,100,0.22);
    color: #0f6864;
}

.exchange-page .exchange-product-meta {
    background: rgba(169,71,61,0.08);
    border: 1px solid rgba(169,71,61,0.16);
    color: #8f4638;
}

.exchange-page .exchange-pair-stage,
.exchange-page .exchange-single-stage {
    flex: 1 1 auto;
    min-height: 245px;
    margin-bottom: 14px;
    border: 1px solid rgba(181,118,0,0.26);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(244,228,188,0.55));
    overflow: hidden;
}

.exchange-page .exchange-pair-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

.exchange-page .exchange-pair-stage figure {
    position: relative;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 7px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(216,168,73,0.20);
}

.exchange-page .exchange-pair-stage img {
    width: 100%;
    height: 185px;
    object-fit: contain;
    object-position: center bottom;
}

.exchange-page .exchange-gender-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0f6864;
    color: #fff6d7;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 2px 5px rgba(0,0,0,0.16);
}

.exchange-page .exchange-pair-stage figcaption {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    color: #5b3c25;
    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 900;
    text-align: center;
}

.exchange-page .exchange-single-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.exchange-page .exchange-single-stage img {
    width: 100%;
    height: 225px;
    object-fit: contain;
}

.exchange-page .exchange-action-btn {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 14px;
    border: 2px solid #fff6d9;
    border-radius: 11px;
    background: linear-gradient(180deg, #f8dc86 0%, #d6a13d 100%);
    color: #4b2c10;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(88,55,13,0.22), inset 0 1px 0 rgba(255,255,255,0.75);
    transition: transform 0.16s ease, filter 0.16s ease;
}

.exchange-page .exchange-action-btn span {
    font-size: 0.76rem;
    font-weight: 900;
    opacity: 0.76;
}

.exchange-page .exchange-action-btn strong {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.exchange-page .exchange-action-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
}

/* 5 個造型品項：最後一張卡置中，避免單獨靠左造成版面失衡 */
.exchange-page .exchange-avatar-grid > .exchange-product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
}

/* ---------- 遊戲幣區 ---------- */
.exchange-page .exchange-currency-section {
    background: linear-gradient(180deg, #135f66 0%, #0e4d55 100%);
}

.exchange-page .exchange-currency-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.exchange-page .exchange-currency-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(245,215,138,0.48);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(0,0,0,0.15));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.exchange-page .exchange-currency-visual {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.14);
}

.exchange-page .exchange-currency-visual img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,0.2));
}

.exchange-page .exchange-currency-visual h3 {
    margin: 6px 0 0;
    color: #fff8dc;
    font-size: 1rem;
    font-weight: 900;
}

.exchange-page .exchange-currency-options {
    display: grid;
    gap: 8px;
}

.exchange-page .exchange-coin-option {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid rgba(255,241,185,0.84);
    border-radius: 9px;
    background: linear-gradient(180deg, #fff0b7 0%, #dcb254 100%);
    color: #4e3017;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 3px 6px rgba(0,0,0,0.18);
    transition: transform 0.16s ease, filter 0.16s ease;
}

.exchange-page .exchange-coin-option-large {
    background: linear-gradient(180deg, #f8d98a 0%, #c78c2d 100%);
}

.exchange-page .exchange-coin-option:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.exchange-page .exchange-coin-qty {
    font-size: 1.02rem;
    font-weight: 900;
}

.exchange-page .exchange-coin-cost {
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.exchange-page .exchange-coin-cost strong {
    color: #a9473d;
    font-size: 0.9rem;
    font-weight: 900;
}

/* ---------- 注意事項 ---------- */
.exchange-page .exchange-ui-notice {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 22px 26px;
    border: 2px solid #d8a849;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff9e9 0%, #eee1bd 100%);
    color: #523821;
    box-shadow: 0 7px 16px rgba(0,0,0,0.20), inset 0 1px 0 #fff;
}

.exchange-page .exchange-ui-notice h2 {
    margin: 0;
    color: #0f6864;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.exchange-page .exchange-ui-notice > div {
    padding-left: 20px;
    border-left: 2px solid rgba(15,104,100,0.18);
}

.exchange-page .exchange-ui-notice p {
    margin: 0 0 7px;
    color: #5b412c;
    font-size: 0.88rem;
    line-height: 1.7;
    font-weight: 600;
}

.exchange-page .exchange-ui-notice p:last-child {
    margin-bottom: 0;
}

/* ---------- 1050 固定畫布：維持原專案手機縮放策略 ---------- */
@media screen and (max-width: 1050px) {
    .exchange-page .exchange-overview-panel,
    .exchange-page .exchange-ui-section,
    .exchange-page .exchange-ui-notice {
        width: 86%;
        max-width: 900px;
    }
}


/* ==========================================================================
   ✦ Exchange UI Relayout v2：背景 / 秘境海灣、動態吉祥物 / 祕境花貓
   --------------------------------------------------------------------------
   UI 調整原則：
   1. 男女合併 AVATAR 卡維持目前大卡資訊量。
   2. 背景與吉祥物回到上一版 250 x 300 商品展示框。
   3. 兩個單品置中並排，避免被放進過大的 2 欄商品格。
   4. 頭飾作為第三張男女配對卡，獨立置中收尾，再進入單品列。
   ========================================================================== */

/* 第三張男女配對卡（頭飾）置中，讓 3 組 AVATAR 的閱讀節奏完整 */
.exchange-page .exchange-product-card-pair-center {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
}

/* 背景與吉祥物：獨立成 compact row，不參與大型 2 欄格子的等高拉伸 */
.exchange-page .exchange-compact-products-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    width: 100%;
    margin-top: 2px;
    padding-top: 20px;
    border-top: 1px dashed rgba(216,168,73,0.38);
}

.exchange-page .exchange-product-card-compact {
    flex: 0 0 320px;
    width: 320px;
    min-height: 0;
    padding: 14px 15px 16px;
}

.exchange-page .exchange-product-head-compact {
    min-height: 54px;
    margin-bottom: 10px;
}

.exchange-page .exchange-product-head-compact h3 {
    font-size: 1.08rem;
}

.exchange-page .exchange-product-head-compact .exchange-product-meta {
    max-width: 132px;
    padding: 5px 8px;
    font-size: 0.66rem;
}

/* 關鍵：恢復上一版商品圖框尺寸 250 x 300 */
.exchange-page .exchange-single-stage-compact {
    flex: 0 0 auto;
    width: 250px;
    height: 300px;
    min-height: 300px;
    margin: 0 auto 14px;
    padding: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.62);
}

.exchange-page .exchange-single-stage-compact img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
}

.exchange-page .exchange-product-card-compact .exchange-action-btn {
    min-height: 50px;
}

/* 覆蓋舊版「最後一張奇數卡置中」規則，compact row 已自行控制版型 */
.exchange-page .exchange-avatar-grid > .exchange-product-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
}

/* 1050px 固定畫布 / 手機等比縮放模式下，同樣維持 250x300 視覺框 */
@media screen and (max-width: 1050px) {
    .exchange-page .exchange-product-card-pair-center {
        width: calc(50% - 8px);
    }

    .exchange-page .exchange-compact-products-row {
        gap: 24px;
    }

    .exchange-page .exchange-product-card-compact {
        flex-basis: 320px;
        width: 320px;
    }

    .exchange-page .exchange-single-stage-compact {
        width: 250px;
        height: 300px;
        min-height: 300px;
    }
}


/* ========================================================================== 
   ✦ Exchange UI Relayout v5
   --------------------------------------------------------------------------
   1. 保留 v3 的「秘境海灣 / 祕境花貓」尺寸與排版，不修改這兩張卡。
   2. 男女系列預覽改為同樣 320px 卡寬 + 250x300 展示框。
   3. 遊戲幣拆回 6 張獨立單品卡：一張卡 = 一個數量 = 一個兌換按鈕。
   ========================================================================== */

/* 系列預覽：比照秘境海灣 / 祕境花貓的 compact 單品卡比例 */
.exchange-page .exchange-preview-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: nowrap;
}

.exchange-page .exchange-preview-card {
    flex: 0 0 320px;
    width: 320px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 15px 16px;
}

.exchange-page .exchange-preview-copy {
    min-height: 72px;
    margin-bottom: 10px;
    text-align: left;
}

.exchange-page .exchange-preview-copy h3 {
    margin: 9px 0 4px;
    font-size: 1.05rem;
    line-height: 1.35;
}

.exchange-page .exchange-preview-copy p {
    font-size: 0.75rem;
}

.exchange-page .exchange-preview-image {
    flex: 0 0 auto;
    width: 250px;
    height: 300px;
    margin: 0 auto;
    padding: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(216,168,73,0.24);
}

.exchange-page .exchange-preview-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
}

/* 遊戲幣：改成與單品卡相同的一卡一操作邏輯 */
.exchange-page .exchange-currency-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 320px);
    justify-content: center;
    gap: 20px 24px;
}

.exchange-page .exchange-currency-product-card {
    width: 320px;
    min-height: 0;
    margin: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(0,0,0,0.15));
    border-color: rgba(245,215,138,0.48);
}

.exchange-page .exchange-currency-product-card .exchange-product-type {
    color: #fff1b9;
}

.exchange-page .exchange-currency-product-card .exchange-product-head h3 {
    color: #fff8dc;
}

.exchange-page .exchange-currency-product-card .exchange-product-meta {
    background: rgba(245,215,138,0.12);
    border-color: rgba(245,215,138,0.28);
    color: #fff1b9;
}

.exchange-page .exchange-currency-product-card-large {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(245,215,138,0.08);
}

.exchange-page .exchange-single-stage-currency {
    flex: 0 0 auto;
    width: 250px;
    height: 220px;
    min-height: 220px;
    margin: 0 auto 14px;
    padding: 16px;
    border-radius: 10px;
    background: rgba(0,0,0,0.14);
    border: 1px solid rgba(245,215,138,0.20);
}

.exchange-page .exchange-single-stage-currency img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,0.20));
}

@media screen and (max-width: 1050px) {
    .exchange-page .exchange-preview-grid {
        gap: 24px;
    }

    .exchange-page .exchange-preview-card {
        flex-basis: 320px;
        width: 320px;
    }

    .exchange-page .exchange-preview-image {
        width: 250px;
        height: 300px;
    }

    .exchange-page .exchange-currency-products-grid {
        grid-template-columns: repeat(2, 320px);
        gap: 20px 24px;
    }
}