@charset 'utf-8';

/*
 * Theme 3 — super 設計稿
 * 白底亮色系：主色橘 #f46200（漸層 #ffbd7b→#f46200）、
 * 輔色紫 #8e6bf8、黃 #ffde7b、文字 #505052
 * 單位使用 rem（桌機 1rem = 18px，≤1000px 隨 html vw 自動縮放）
 */

:root {
    /* === 全站背景（設計稿為淡藍紫底 + 左上大圖） === */
    --color-bg: #eff2fc;

    /* === 公告藍（最新公告標題 / 更多鈕） === */
    --color-notice-blue: #2b57e8;
    --color-notice-cyan: #5aecff;

    /* === 文字主色 === */
    --color-text: #505052;

    /* === 主色：橘 === */
    --color-primary: #f46200;
    --grad-primary: linear-gradient(180deg, #ffbd7b 0%, #f46200 100%);

    /* === 輔色：紫（機種切換、卷軸、PLAY 按鈕、hover） === */
    --color-purple: #8e6bf8;

    /* === 輔色：黃（榜區切換） === */
    --color-yellow: #ffde7b;
    --color-yellow-border: #f8d366;

    /* === 導覽列黃漸層 === */
    --grad-nav: linear-gradient(180deg, #fff2c2 0%, #fbc535 100%);

    /* === 表格 === */
    --color-table-head: #e6e6e6;
    --color-table-zebra: #f6f6f6;

    /* === 淡橘 hover 背景 === */
    --color-hover-bg: #fff3e5;

    /* === JP 金額金色漸層字 === */
    --grad-gold-text: linear-gradient(180deg, #fff3ca 0%, #fff47f 44.7%, #cda400 52.4%, #ffda3f 77.4%);

    /* === 強調色（舊變數對應，維持其他頁面可用） === */
    --color-accent: #f46200;
    --color-accent2: #f9a825;
    --color-btn-action: #f46200;
    --color-card-dark: #ffffff;
    --color-input-bg: #ffffff;
    --color-tab-active-bg: #f46200;
    --color-info: #f46200;
    --color-highlight: #f46200;
    --color-news-bg: #ffffff;
    --color-pagination: #efefef;
    --color-pagination-active: #f46200;
    --color-danger: #ff4d4f;
    --color-success: #00b542;
    --color-service-shadow: #c24e00;
}

/* ===================================================
   全域：白底深字
   =================================================== */

body {
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

.wrapper {
    background: var(--color-bg) !important;
    color: var(--color-text);
}

/* 首頁：設計稿的左上大圖底紋（1920x1200，不重複） */
.index .wrapper {
    background:
        url('../images/index/page_bg.webp') left top / 1920px 1200px no-repeat,
        var(--color-bg) !important;
}

/* ===== 卷軸：紫色（設計稿表格卷軸） ===== */
::-webkit-scrollbar-track {
    background: #d9d9d9;
}

::-webkit-scrollbar-thumb {
    background: var(--color-purple) !important;
    border-radius: 999px;
}

/* ===================================================
   首頁：跑馬燈（淡藍色圓角列，位於 banner 上方）
   =================================================== */
.index .sub_text {
    margin: 0.667rem 0;
}

/* Component 2：1335x40 圓角膠囊、淡藍底圖、#c6fbff 細框 */
.index .marquee_tip_index {
    display: flex;
    align-items: center;
    height: 2.222rem;
    line-height: 2.222rem;
    padding: 0 0.833rem;
    background: url('../images/index/marquee_bg.webp') center / 100% 100% no-repeat;
    border: 1px solid #c6fbff;
    border-radius: 999px;
    color: #363636;
    font-size: 1rem;
}

.index .marquee_tip_index i {
    flex-shrink: 0;
    width: 1.889rem;
    height: 1.889rem;
    margin-right: 0.556rem;
    background: url('../images/common/speaker.webp') center / contain no-repeat;
}

.index .marquee_tip_action {
    color: var(--color-text);
}

/* ===================================================
   首頁：banner + 最新公告側欄
   =================================================== */
.index .banner>.container {
    display: flex;
    gap: 0.833rem;
    align-items: stretch;
}

.index .banner>.container>.banner {
    flex: 1 1 63.5%;
    min-width: 0;
}

.index .banner .slider .item img {
    border-radius: 0.556rem;
}

/* 輪播箭頭：白色半透明圓角方塊 + 白色 chevron（設計稿 Group 90/91） */
.index .banner .slick-prev,
.index .banner .slick-next {
    width: 2rem;
    height: 3.333rem;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.index .banner .slick-prev {
    left: 0;
    border-radius: 0 0.444rem 0.444rem 0;
}

.index .banner .slick-next {
    right: 0;
    border-radius: 0.444rem 0 0 0.444rem;
}

.index .banner .slick-prev:hover,
.index .banner .slick-next:hover {
    background: rgba(255, 255, 255, 0.75);
}

.index .banner .slick-prev .v-icon,
.index .banner .slick-next .v-icon {
    color: #ffffff;
    font-size: 2rem !important;
}

/* 側欄公告面板（設計稿 81:1493：470x325、radius 18、藍色系） */
.banner_side_notice {
    flex: 0 0 35.2%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1rem;
    padding: 0 0 0.556rem;
    box-shadow: 0 2px 4px rgba(39, 60, 158, 0.1);
}

/* 標題列：中央裝飾圖（圖層 11）+ 深藍粗體字 */
.bsn_title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.222rem;
    font-size: 1.111rem;
    font-weight: 700;
    color: var(--color-notice-blue);
    background: url('../images/index/notice_title_deco.webp') center top / 83.83% 2.222rem no-repeat;
}

.bsn_title svg,
.bsn_title i {
    display: none;
}

.bsn_list {
    flex: 1;
    overflow: hidden;
}

.bsn_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.667rem;
    height: 2.778rem;
    padding: 0 0.833rem;
    font-size: 1rem;
    color: var(--color-text);
}

.bsn_row:hover {
    background: #e4faff;
}

.bsn_row .bsn_num {
    flex-shrink: 0;
    width: 1.833rem;
}

.bsn_row .bsn_name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bsn_row .bsn_date {
    flex-shrink: 0;
    color: var(--color-text);
}

/* 更多：80x29 淺藍細框膠囊（Group 153） */
.bsn_more {
    display: block;
    width: 4.444rem;
    margin: 0.556rem auto 0;
    line-height: 1.611rem;
    text-align: center;
    background: transparent;
    border: 1px solid var(--color-notice-cyan);
    border-radius: 999px;
    color: var(--color-notice-cyan);
    font-size: 0.889rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.bsn_more:hover {
    background: var(--color-notice-cyan);
    color: #ffffff;
}

/* ===================================================
   首頁：資訊區（JACKPOT / 大獎資訊 / 榮耀榜單）
   =================================================== */
.index .home_info_section {
    position: relative;
    margin-top: 1.556rem;
    padding-bottom: 0.556rem;
}

/* 舊版滿版白色背景帶已不需要（面板改成 1336 置中卡），
   殘留的 100vw 空元素會撐出水平捲軸 */
.index .home_info_section::before {
    display: none;
}

.index .home_info_section>* {
    position: relative;
    z-index: 1;
}

/* 三顆切換鈕：199x56 圖片造型鈕（btn_on / btn_off），左右帶裝飾光條（圖層 10） */
.index .home_info_nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.944rem;
    height: 3.111rem;
}

.index .home_info_nav::before,
.index .home_info_nav::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16.389rem;
    height: 0.944rem;
    margin-top: -0.472rem;
    background: url('../images/index/tab_deco.webp') center / 100% 100% no-repeat;
    opacity: 0.7;
    pointer-events: none;
}

.index .home_info_nav::before {
    left: 0;
    transform: scaleX(-1);
}

.index .home_info_nav::after {
    right: 0;
}

.index .home_info_nav_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.278rem;
    /* index.css 的 flex:1 + max-width:320px 會把鈕撐大，需鎖回設計稿 199x56 */
    flex: 0 0 auto;
    max-width: none;
    width: 11.056rem;
    height: 3.111rem;
    border: none;
    border-radius: 0;
    background: url('../images/index/tab_off.webp') center / 100% 100% no-repeat;
    color: var(--color-text);
    /* 22px（Frame 162） */
    font-size: 1.222rem;
    font-weight: 700;
    text-decoration: none;
}

.index .home_info_nav_btn svg {
    width: 1.833rem;
    height: 1.833rem;
}

.index .home_info_nav_btn svg path {
    fill: var(--color-text);
}

/* index.css 的 .home_info_nav_btn.active 用 background 簡寫、同權重且後載入，
   會把 background-size 蓋回 auto（圖以原尺寸被裁 → 破圖），這裡要一起寫回來 */
.index .home_info_nav_btn.active {
    background: url('../images/index/tab_on.webp') center / 100% 100% no-repeat;
    color: #ffffff;
    font-weight: 500;
}

.index .home_info_nav_btn.active svg path {
    fill: #ffffff;
}

/* 移除 index.css 深色主題殘留的底線與分隔線 */
.index .home_info_nav_btn.active::after {
    display: none;
}

.index .home_info_nav_btn+.home_info_nav_btn::before {
    display: none;
}

.index .home_info_panel {
    display: none;
    padding: 1.111rem 0 0.333rem;
}

.index .home_info_panel.active {
    display: block;
}

/* ===== JACKPOT 面板（Frame 101：滿版帶 + 三顆 JP 同排） ===== */
.index #home_jppool {
    padding: 0.889rem 0 0;
}

/* 設計稿 81:1522：1336x365 置中面板（非滿版），內部元素以 % 定位 */
.jp3_banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1336 / 365;
    overflow: hidden;
}

.jp3_banner .jp3_bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.jp3_banner .jp3_char {
    position: absolute;
    height: auto;
    pointer-events: none;
}

.jp3_banner .jp3_char_left {
    left: 0;
    top: 0.27%;
    width: 44.99%;
}

.jp3_banner .jp3_char_right {
    right: 0;
    top: 0.55%;
    width: 42.66%;
}

.jp3_content {
    position: absolute;
    inset: 0;
    z-index: 2;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}

.jp3_title {
    position: absolute;
    left: 33.68%;
    top: 3.01%;
    width: 32.41%;
    max-width: none;
    display: block;
}

.jp3_items {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    margin: 0;
}

.jp3_item {
    position: absolute;
    width: 29.94%;
    max-width: none;
}

.jp3_item1 {
    left: 2.54%;
    top: 41.1%;
}

.jp3_item2 {
    left: 34.88%;
    top: 38.9%;
}

.jp3_item3 {
    left: 67.22%;
    top: 38.9%;
}

.jp3_item img {
    width: 100%;
    display: block;
}

/* 金額：金色漸層字 + 深色筆畫（Nunito Bold 40px）
   雙層疊字，寫法同 theme 2 的 .home_jp_num */
.jp3_item .jp3_amount {
    position: absolute;
    left: 50%;
    top: 71%;
    transform: translate(-50%, -50%);
    display: block;
    font-size: 2.222rem;
    font-weight: 700;
    white-space: nowrap;
}

.jp3_item .jp3_amount span {
    display: block;
}

.jp3_item .jp3_amount span:first-child {
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.jp3_item1 .jp3_amount span:first-child {
    -webkit-text-stroke: 4px #a51600;
}

.jp3_item2 .jp3_amount span:first-child {
    -webkit-text-stroke: 4px #00259d;
}

.jp3_item3 .jp3_amount span:first-child {
    -webkit-text-stroke: 4px #44009d;
}

.jp3_item .jp3_amount span:last-child {
    position: relative;
    z-index: 2;
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ===== 大獎資訊 / 榮耀榜單：移除 index.css 深色主題殘留 ===== */
/* 深藍滿版漸層帶 */
.index #home_record::before,
.index #home_jackpot::before {
    display: none;
}

/* index.css 以 ID 選擇器設 padding: 0.3rem 0，需同權重蓋回 */
.index #home_record,
.index #home_jackpot {
    padding: 1.111rem 0 0.333rem;
}

/* 藍框圓角深底容器 */
.index .home_record {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* 奇數列深藍底（zebra 改為偶數列灰底，見下方表格區） */
.index .record_body .tr:nth-child(odd),
.index .jackpot_record_body .tr:nth-child(odd) {
    background: transparent;
}

/* 資料尚未載入時（JS 動態塞入），空的機種列不顯示紫框 */
.index .home_record_nav:not(:has(.home_record_btn)) {
    display: none;
}

/* ===== 大獎資訊 / 榮耀榜單：機種切換（紫色膠囊 46px） ===== */
.index .home_record_nav {
    display: flex;
    width: 100%;
    background: #ffffff;
    border: 2px solid var(--color-purple);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.556rem;
}

.index .home_record_btn {
    flex: 1;
    height: 2.333rem;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 1.111rem;
    cursor: pointer;
    position: relative;
}

.index .home_record_btn .btn-stroke {
    display: none;
}

.index .home_record_btn .btn-fill {
    position: static;
    color: inherit;
    -webkit-text-stroke: 0;
}

.index .home_record_btn.active {
    background: var(--color-purple);
    color: #ffffff;
    font-weight: 700;
}

/* 榜區切換（比1~3榜 / 比4~10榜：黃色膠囊 432x46） */
.index .home_rank_range_nav {
    display: flex;
    justify-content: center;
    margin: 0.556rem auto;
    width: 24rem;
    max-width: 100%;
    background: #ffffff;
    border: 2px solid var(--color-yellow-border);
    border-radius: 999px;
    overflow: hidden;
}

.index .home_rank_range_nav button,
.index .home_rank_range_nav a {
    flex: 1;
    height: 2.333rem;
    line-height: 2.333rem;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 1.111rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.index .home_rank_range_nav .active {
    background: var(--color-yellow);
    font-weight: 700;
}

/* ===== 表格 ===== */
.index .record_header {
    display: flex;
    align-items: center;
    height: 2.556rem;
    background: var(--color-table-head);
    color: var(--color-text);
    font-size: 1.111rem;
}

.index .record_header .th {
    flex: 1;
    text-align: center;
}

.index .record_body .tr,
.index #honor_items_container .tr {
    display: flex;
    align-items: center;
    min-height: 2.778rem;
    font-size: 1rem;
    color: var(--color-text);
}

.index .record_body .tr:nth-child(even),
.index #honor_items_container .tr:nth-child(even) {
    background: var(--color-table-zebra);
}

.index .record_body .tr .td,
.index #honor_items_container .tr .td {
    flex: 1;
    text-align: center;
}

/* 名次數字：橘色粗體 */
.index #honor_items_container .tr .td.prize_rank,
.index #honor_items_container .tr .td:first-child {
    color: var(--color-primary);
    font-weight: 700;
}

/* 表身可捲動 + 紫色細卷軸（設計稿 8px） */
.index .record_body,
.index .jackpot_record_body {
    max-height: 11.111rem;
    overflow-y: auto;
}

.index .record_body::-webkit-scrollbar,
.index .jackpot_record_body::-webkit-scrollbar {
    width: 0.444rem;
}

.index .record_body::-webkit-scrollbar-track,
.index .jackpot_record_body::-webkit-scrollbar-track {
    background: #d9d9d9;
    border-radius: 999px;
}

.index .record_body::-webkit-scrollbar-thumb,
.index .jackpot_record_body::-webkit-scrollbar-thumb {
    background: var(--color-purple) !important;
    border-radius: 999px;
}

/* 收合按鈕 */
/* 桌機設計稿沒有「收起」條，僅行動版保留 */
@media (min-width: 1001px) {
    .index .home_info_toggle {
        display: none !important;
    }
}

.index .home_info_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.333rem;
    margin: 0.667rem auto 0;
    padding: 0.333rem 1.222rem;
    background: #efefef;
    border: none;
    border-radius: 999px;
    color: var(--color-text);
    cursor: pointer;
}

.index .home_info_toggle .home_info_toggle_text {
    color: var(--color-text);
}

.index .home_info_toggle svg path {
    stroke: var(--color-text);
}

/* ===================================================
   首頁：遊戲分類標題 + 卡片（白卡、紫 PLAY）
   =================================================== */
/* 共用 index.css 的 .game_item_full 兩側各外推 1.5rem（給卡片陰影留空間），
   視窗寬度接近容器寬時會撐出水平捲軸，這裡裁掉水平溢出（clip 不會變成捲動容器） */
.index .game_warpper {
    overflow-x: clip;
}

/* Component 3~8：750x76，水墨橫幅底 + 英文水印 + 置中 icon/中文 */
.index .game_title {
    position: relative;
    display: block;
    height: 4.222rem;
    margin: 1.667rem 0 0;
    padding: 0;
    text-align: center;
    line-height: normal;
}

.index .game_title .icon {
    display: none;
}

/* 水墨橫幅（huaban）：寬 750、top 24、opacity .69 */
.index .game_title::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 1.333rem;
    transform: translateX(-50%);
    width: 41.667rem;
    max-width: 100%;
    height: 2.889rem;
    background: url('../images/index/sec_line.webp') center / 100% 100% no-repeat;
    opacity: 0.69;
    pointer-events: none;
}

/* 英文水印：36px 空心描邊字（雙層疊字，寫法同 theme 2 的 .home_jp_num）
   下層做白色筆畫、上層填白色漸層 */
.index .game_title .game_title_en {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: block;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
}

.index .game_title .game_title_en span {
    display: block;
}

.index .game_title .game_title_en span:first-child {
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #9fedff;
}

.index .game_title .game_title_en span:last-child {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.12) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.index .game_title .title {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.278rem;
    margin-top: 1.222rem;
    padding-left: 0;
}

.index .game_title .title::before {
    content: '';
    flex-shrink: 0;
    width: 1.889rem;
    height: 1.889rem;
    background: center / contain no-repeat;
}

.index #index1 .title::before {
    background-image: url('../images/common/nav_1_h.webp');
}

.index #index5 .title::before {
    background-image: url('../images/common/nav_2_h.webp');
}

.index #index8 .title::before {
    background-image: url('../images/common/nav_3_h.webp');
}

.index #index6 .title::before {
    background-image: url('../images/common/nav_4_h.webp');
}

.index #index7 .title::before {
    background-image: url('../images/common/nav_5_h.webp');
}

.index #index_sport .title::before {
    background-image: url('../images/common/nav_6_h.webp');
}

.index .game_title .title .tit {
    color: #363636;
    font-size: 1.222rem;
    font-weight: 700;
}

/* 卡片：白底圓角 20px、陰影（Group 125） */
.index .game_list .item:before {
    background: #ffffff;
    border: none;
    border-radius: 1.111rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    top: 6%;
}

.index .game_list .item .pic img {
    border-radius: 1.111rem;
}

/* 名稱列：icon 左、名稱中、PLAY 右（白色漸層壓底） */
.index .game_list .item .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.444rem 0.444rem 0.556rem;
    color: var(--color-text);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%);
    border-radius: 0 0 1.111rem 1.111rem;
}

.index .game_list .name {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 700;
    gap: 0.333rem;
    min-width: 0;
}

.index .game_list .name .name_text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 取消深色描邊文字（雙 span 疊字），名稱為黑色粗體 */
.index .game_list .name .name_text span:first-child {
    display: none;
}

.index .game_list .name .name_text span+span {
    color: #000000;
}

.index .game_list .text img {
    width: 2.222rem;
    background-color: #E8E8E8;
    border-radius: 50%;
}

/* PLAY 鈕：紫色膠囊 46x28 */
.index .game_list .item .text:after {
    content: 'PLAY';
    flex-shrink: 0;
    width: 2.556rem;
    line-height: 1.556rem;
    margin-top: 0;
    background: var(--color-purple);
    color: #ffffff;
    font-size: 0.833rem;
    font-weight: 400;
    border-radius: 999px;
}

/* 桌機：一列 5 張卡（設計稿 220px / 1336px） */
@media screen and (min-width: 1000px) {
    .index .game_warpper .game_list .item {
        min-width: 18.34%;
        width: 18.34%;
        margin: 0 0.83% 0.667rem;
    }
}

/* ===================================================
   底部導航（手機）：白底、灰字、橘色 active
   =================================================== */
.bottom_btn {
    background: #ffffff;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.10);
}

.bottom_btn a {
    color: #9aa5b4;
}

.bottom_btn3_page .bottom_btn3 i svg path {
    fill: var(--color-primary) !important;
}

.bottom_btn3_page .bottom_btn3 {
    color: var(--color-primary);
}

.bottom_btn2_page .bottom_btn2 i svg path {
    fill: var(--color-primary) !important;
}

.bottom_btn2_page .bottom_btn2 {
    color: var(--color-primary);
}

.bottom_btn4_page .bottom_btn4 i svg path,
.bottom_btn4_page .bottom_btn4 i svg rect {
    fill: var(--color-primary) !important;
}

.bottom_btn4_page .bottom_btn4 {
    color: var(--color-primary);
}

.bottom_btn5_page .bottom_btn5 i svg path {
    fill: var(--color-primary) !important;
}

.bottom_btn5_page .bottom_btn5 {
    color: var(--color-primary);
}

/* ===== 側滑選單：白底深字 ===== */
.menu_box {
    background: #f7f7f7;
}

.menu_box .menu li a {
    background: #ffffff;
    color: var(--color-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.menu_box .menu>li:last-child a {
    color: var(--color-danger);
}

/* ===== 首頁 top_btn 卡片項目 ===== */
.top_btn .item {
    color: #444;
}

/* ===== 公告彈窗 ===== */
.news_box .bottom {
    background: #ffffff !important;
    border: 4px solid var(--color-primary) !important;
}

.news_box .news_box_tit {
    background: var(--grad-primary) !important;
    color: #ffffff;
}

.news_box .member_menu2 li a {
    color: #888;
}

.news_box .member_menu2 li.ui-tabs-active a {
    color: var(--color-highlight) !important;
    border-bottom: 8px solid var(--color-highlight) !important;
}

.news_box .news_list_box {
    background: #faf7f2;
}

.news_box .news_tit_title {
    color: var(--color-info) !important;
}

.news_box .news_tit_title::before {
    color: var(--color-info) !important;
}

.news_box .news_tit .news_tag {
    background: var(--color-info) !important;
}

.news_box .member_menu2 {
    border-bottom: 1px solid #eadfce;
}

/* ===== 分頁 ===== */
.pagination>li>a {
    background-color: var(--color-pagination);
    color: #444;
}

.pagination>li>a:hover {
    background-color: var(--color-hover-bg);
    color: var(--color-primary);
}

.pagination>li>a.disabled {
    background-color: #f0f0f0;
    color: #bbb;
}

/* ===== 遊戲轉點彈窗 gamePopBox（樣式集中在檔尾的區塊） ===== */

/* ===== 會員 Tab ===== */
.member_tab .active .v-tab {
    background-color: var(--color-tab-active-bg) !important;
    color: #ffffff;
}

.member_conternt .border-box {
    background: linear-gradient(to bottom, #ffe6cd 0%, #ffcf9e 100%);
    border: solid 1px var(--color-primary);
    color: var(--color-text);
}

/* ===== 各類按鈕 ===== */
.btn.btn-member1 {
    background-color: var(--color-primary) !important;
    color: #ffffff;
}

.btn.btn-member2 {
    background-color: #ffe4cb;
    color: var(--color-primary);
}

.btn-store {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.bank-list li a {
    background: var(--color-primary);
    color: #ffffff;
}

.bank-list li a.active {
    background: #c95100;
}

.bottom-box .btn {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.bottom-box .btn:nth-child(2) {
    background-color: #c95100;
    border-color: #c95100;
}

/* ===== 固定客服按鈕 ===== */
.fixed_chat {
    background: var(--color-accent2) !important;
}

/* ===== 訊息提示框 ===== */
.black_box {
    background: #ffffff;
    color: var(--color-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ===== 框架 (accordion) ===== */
.frame {
    border-color: #f0dfc8;
}

.frame dt {
    color: #444;
}

.frame.active {
    border-color: var(--color-primary);
}

.frame.active dt {
    color: var(--color-primary);
}

dd.content {
    color: #333;
}

/* ===== 頁尾 ===== */
.site-footer {
    color: #888;
}

/* ===== 會員中心 ===== */
.member_conternt {
    color: var(--color-text);
}

.m_li .m_txt,
.m_li .line,
.m_li #url {
    color: #666;
}

/* ===== 大螢幕子選單 ===== */
@media screen and (min-width: 550px) {
    .fix_header {
        background: var(--grad-primary);
    }
}

/* ===================================================
   響應式：版面結構調整（尺寸縮放交給 rem）
   =================================================== */
@media screen and (max-width: 1000px) {

    /* 公告面板移到 banner 下方全寬 */
    .index .banner>.container {
        flex-direction: column;
    }

    .banner_side_notice {
        flex-basis: auto;
        width: 100%;
    }

    .index .home_info_nav {
        gap: 0.667rem;
    }

    /* 寬度不足，收起左右裝飾光條 */
    .index .home_info_nav::before,
    .index .home_info_nav::after {
        display: none;
    }

    .index .home_info_nav {
        height: auto;
    }

    .index .home_info_nav_btn {
        width: auto;
        flex: 1;
        max-width: 11.056rem;
        /* 寬度改為彈性，高度要跟著等比，否則造型圖會被壓扁 */
        height: auto;
        aspect-ratio: 199 / 56;
        /* index.css 的上下 padding 會把高度撐過等比值，這裡歸零 */
        padding: 0 0.444rem;
        /* PAD / APP 設計稿（Group 170）：字 20px、icon 25px */
        font-size: 1.111rem;
    }

    .index .home_info_nav_btn svg {
        width: 1.389rem;
        height: 1.389rem;
    }
}

/* APP：JP 改三角排列（設計稿 APP_首頁 81:2616，面板 529x244） */
@media screen and (max-width: 550px) {
    .jp3_banner {
        aspect-ratio: 529 / 244;
    }

    .jp3_banner .jp3_char_left {
        left: 0;
        top: 0;
        width: 62.76%;
    }

    .jp3_banner .jp3_char_right {
        right: 0;
        top: 0;
        width: 58.79%;
    }

    /* APP 設計稿沒有 JACKPOT 標題圖 */
    .jp3_title {
        display: none;
    }

    .jp3_item {
        width: 45.37%;
    }

    .jp3_item1 {
        left: 27.03%;
        top: 3.28%;
    }

    .jp3_item2 {
        left: 2.84%;
        top: 45.49%;
    }

    .jp3_item3 {
        left: 53.12%;
        top: 45.49%;
    }

    .jp3_item .jp3_amount {
        font-size: 1.333rem;
    }
}
/* ===================================================
   遊戲轉點彈窗 gamePopBox：改成 theme 1 亮色系
   主圖去除深色漸層遮罩，改為浮在白卡上方（參考設計圖）
   關閉鈕位置與內容結構維持共用版
   =================================================== */
.gamePopBox {
    border-radius: 1.111rem;
    overflow: visible;
}

.gamePopBox .game-pop-img {
    min-height: 0;
}

/* 設計不需要主圖下方的深色漸層 */
.gamePopBox .game-pop-img:before {
    display: none;
}

.gamePopBox .game-pop-img img {
    width: 62%;
    margin: 0 auto;
}

/* 白卡上移壓住主圖下緣（主圖浮在卡片上方） */
.gamePopBox .game-transfer {
    margin-top: -2.222rem;
    padding: 3.333rem 1.667rem 1.111rem;
    background-color: #ffffff !important;
    border-radius: 1.111rem;
    box-shadow: 0 4px 16px rgba(39, 60, 158, 0.18);
}

.gamePopBox .pop-wallet-label {
    color: #8a8a8c;
    font-size: 0.889rem;
}

.gamePopBox .pop-wallet-amount {
    color: var(--color-primary) !important;
    font-size: 1.333rem;
}

.gamePopBox .center .form-control {
    background: #ffffff !important;
    border: 1px solid #d9d9d9;
    border-radius: 0.556rem;
    color: var(--color-text) !important;
}

.gamePopBox .bottom .number_btn {
    color: var(--color-primary) !important;
    background: var(--color-hover-bg) !important;
    box-shadow: 0 2px 4px rgba(244, 98, 0, 0.15);
}

.gamePopBox .center .form-control::placeholder {
    color: #b1b1b1;
}

/* 主要動作：橘漸層；次要動作：灰底、hover 紫（Section 1 元件規範） */
.gamePopBox .pop-btn-row .btn,
.gamePopBox .btn.btn-pop-enter {
    background: var(--grad-primary) !important;
    color: #ffffff !important;
}

.gamePopBox .pop-btn-row .btn-pop-return,
.gamePopBox .btn-pop-return {
    background: #e6e6e6 !important;
    color: var(--color-text) !important;
}

.gamePopBox .pop-btn-row .btn-pop-return:hover,
.gamePopBox .btn-pop-return:hover {
    background: var(--color-purple) !important;
    color: #ffffff !important;
}