/* ==============================================================
   檔案名稱：tcg-common-mobile.css
   功能說明：TC Gaming — Mobile 版全站共用樣式
   ──────────────────────────────────────────────────────────
   涵蓋範圍：
     1. .tcg-wrapper-mobile 基礎設定 + Reset
     2. .tcg-m-container 容器
     3. 圖片佔位 .tcg-img-placeholder（手機版）
     4. .tcg-m-btn 膠囊按鈕系列
     5. .tcg-m-link-more 連結樣式
     6. .tcg-m-header 手機版頭部
     7. .tcg-m-footer 手機版頁尾
     8. RWD 內文字體控制（原 tcg-mobile-text.css）
   ──────────────────────────────────────────────────────────
   載入順序：在 tcg-common-web.css 之後、頁面 CSS 之前載入
   ============================================================== */

/* ==============================================================
   [手機版共用] Base / Reset / 按鈕 / Header / Footer
   ============================================================== */
/* ==============================================================
   [Base] 手機版 Wrapper 基礎
   ============================================================== */
.tcg-wrapper-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 750px;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
    font-size: 28px;
    line-height: 1.6;
    color: #262626;
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: none;  /* 預設隱藏，由 JS 控制 */
}

/* 手機版啟用時 */
.tcg-mobile-mode .tcg-wrapper-mobile {
    display: block;
}
.tcg-mobile-mode .tcg-wrapper {
    display: none;
}

/* Reset */
.tcg-wrapper-mobile, .tcg-wrapper-mobile *, .tcg-wrapper-mobile *::before, .tcg-wrapper-mobile *::after {
    box-sizing: border-box;
}
.tcg-wrapper-mobile a { color: inherit; text-decoration: none; }
.tcg-wrapper-mobile ul, .tcg-wrapper-mobile ol { list-style: none; padding: 0; margin: 0; }
.tcg-wrapper-mobile h1, .tcg-wrapper-mobile h2, .tcg-wrapper-mobile h3,
.tcg-wrapper-mobile h4, .tcg-wrapper-mobile h5, .tcg-wrapper-mobile h6 {
    margin: 0;
    line-height: 1;
    letter-spacing: 2px;
}
.tcg-wrapper-mobile p { margin: 0; }
.tcg-wrapper-mobile button {
    border: 0; background: transparent; cursor: pointer; padding: 0;
    font-family: inherit; font-size: inherit;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.tcg-wrapper-mobile img {max-width: 100%;display: block;border: 0;}

/* 容器 */
.tcg-m-container {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
}

/* 圖片佔位（與桌面版共用樣式） */
.tcg-wrapper-mobile .tcg-img-placeholder {
    width: 100%; height: 100%; min-height: 60px;
    background: linear-gradient(135deg, #F5F5F7 25%, #ECECEF 25%, #ECECEF 50%, #F5F5F7 50%, #F5F5F7 75%, #ECECEF 75%);
    background-size: 12px 12px; border: 1px dashed #C9C9D1; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #A0A0A8; font-size: 22px; letter-spacing: 0.05em;
}


/* ==============================================================
   [共用] 膠囊按鈕（About 卡片的 Learn More、CTA 的 Contact Us）
   ============================================================== */
.tcg-wrapper-mobile .tcg-m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 73px;
    font-family: "Montserrat", sans-serif !important;
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 26px;
    border-radius: 999px;
    transition: all 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
}
/* 按鈕色彩 variant：必須加 .tcg-wrapper-mobile 前綴（0,2,0）
   才能打贏 reset 的 .tcg-wrapper-mobile a { color: inherit; }（0,1,1） */
.tcg-wrapper-mobile .tcg-m-btn-primary {
    background: #E5222B;
    color: #FFFFFF;
}
.tcg-wrapper-mobile .tcg-m-btn-outline-white {
    background: #FFFFFF;
    color: #E5222B;
    border: 2px solid #FFFFFF;
    position: relative;
    bottom: 0px;
    top: 503px;
}
.tcg-wrapper-mobile .tcg-m-btn-outline-red {
    background: transparent;
    color: #E5222B;
    border: 2px solid #E5222B;
}
.tcg-m-btn .tcg-m-arrow {
    margin-left: 10px;
    font-size: 28px;
}


/* ==============================================================
   [共用] Learn More / View More 紅字連結樣式
   用於 Products / Advantages / Localization / Customization
   結構：紅字 + 紅色圓形箭頭
   ============================================================== */
.tcg-wrapper-mobile .tcg-m-link-more {
    display: inline-flex;
    align-items: center;
    gap: 44px;
    font-size: 28px;
    font-weight: 700;
    color: #E5222B;
    /* font-style: italic; */
}
.tcg-m-link-more-circle {
    width: 68px;
    height: 68px;
    background: #E5222B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 22px;
    font-style: normal;
}


/* 文字強調 */
.tcg-m-text-red { color: #E5222B; }
.tcg-m-text-white { color: #FFFFFF; }


/* ==============================================================
   [Section: Header] 手機版頂部導覽
   紅色背景，Logo 左 + 圖示右
   ============================================================== */
.tcg-m-header {
    background: #E5222B;
    padding: 24px 0;
    position: relative;
    z-index: 100;
}
.tcg-m-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tcg-m-header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tcg-m-header-logo-text {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: 0.05em;
}
.tcg-m-header-icons {
    display: flex;
    align-items: center;
    gap: 24px;
}
/* 加前綴打贏 .tcg-img-placeholder 的 width:100% */
.tcg-wrapper-mobile .tcg-m-header-icon {
    width: 44px;
    height: 44px;
    min-height: 44px;
}


/* ==============================================================
   [Section: Footer] 手機版頁尾
   Logo + 連結 grid + Copyright
   ============================================================== */
/* ── Footer ── */
.tcg-m-footer {
    background: #ffffff;
    padding: 123px 0 0;
}

/* 圓角外框卡片：白色→淺灰漸層 + 灰色邊框 */
.tcg-m-footer-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);
    border: 1px solid #D9D9D9;
    border-radius: 30px;
    padding: 89px 94px 100px;
}

/* Logo 圖片 — 置中 */
.tcg-m-footer-logo {
    text-align: center;
    margin-bottom: 50px;
}
.tcg-wrapper-mobile .tcg-m-footer-logo-img {
    display: block;
    margin: 0 auto;
}

/* 4 欄連結區域 */
.tcg-m-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 40px;
    padding-top: 44px;
}
.tcg-m-footer-col {
    flex: 0 0 50%;
    padding: 0 10px 0 0;
    margin-bottom: 70px;
}

/* 欄標題 + 紅色底線 */
.tcg-m-footer-col-title {
    font-size: 36px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 20px;
    padding-bottom: 38px;
    display: block;
}
.tcg-m-footer-col-line {
    display: block;
    width: 72px;
    height: 3px;
    background: #E5222B;
    border-radius: 2px;
    margin-top: 42px;
    /* margin-bottom: -25px; */
}

/* 連結列表 */
.tcg-m-footer-list li {
    margin-bottom: 11px;
}
.tcg-wrapper-mobile .tcg-m-footer-list a {
    font-size: 24px;
    color: #6B6B6B;
}

/* Follow Us 社交媒體區 — 置中 */
.tcg-m-footer-social {
    text-align: center;
    padding-top: 0px;
    margin-top: -58px;
}
.tcg-m-footer-social-title {
    font-size: 24px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 20px;
    padding-bottom: 31px;
}
.tcg-m-footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 39px;
}
.tcg-wrapper-mobile .tcg-m-footer-social-link {
    display: block;
}
.tcg-wrapper-mobile .tcg-m-footer-social-icon {
    display: block;
}

/* Copyright（卡片外面底部） */
.tcg-m-copyright {
    padding: 30px 0;
    text-align: center;
    font-size: 20px;
    color: #9A9A9A;
}




/* ==============================================================
   [RWD] 內文字體控制（≤1366px 時覆寫為 24px）
   原檔案：tcg-mobile-text.css（已合併至此）
   ============================================================== */
@media screen and (max-width: 1366px) {

    /* ==========================================================
       [通用] 段落文字
       ========================================================== */
    .tcg-wrapper p {
        font-size: 24px;
    }


    /* ==========================================================
       [各頁面] 內容描述 / 副標題 / 答案 / 資訊值
       ========================================================== */

    /* --- contact_us --- */
    .tcg-wrapper .tcg-cu-info-subtitle,
    .tcg-wrapper .tcg-cu-info-value,
    .tcg-wrapper .tcg-cu-joinus-desc,
    .tcg-wrapper .tcg-cu-joinus-email {
        font-size: 24px;
    }

    /* --- FAQ --- */
    .tcg-wrapper .tcg-fq-item-answer p {
        font-size: 24px;
    }

    /* --- about-TCG --- */
    .tcg-wrapper .tcg-ab-about-card-desc,
    .tcg-wrapper .tcg-ab-market-desc,
    .tcg-wrapper .tcg-ab-why-desc,
    .tcg-wrapper .tcg-ab-why-item-desc {
        font-size: 24px;
    }

    /* --- other-services --- */
    .tcg-wrapper .tcg-os-card-desc {
        font-size: 24px;
    }

    /* --- mini-games --- */
    .tcg-wrapper .tcg-mg-info-intro-desc,
    .tcg-wrapper .tcg-mg-card-desc {
        font-size: 24px;
    }

    /* --- lottery --- */
    .tcg-wrapper .tcg-lt-popular-intro-desc {
        font-size: 24px;
    }

    /* --- gameAPIs --- */
    .tcg-wrapper .tcg-ga-info-desc,
    .tcg-wrapper .tcg-ga-stats-desc {
        font-size: 24px;
    }

    /* --- turnkey_solutions --- */
    .tcg-wrapper .tcg-ts-savings-desc,
    .tcg-wrapper .tcg-ts-savings-card-desc,
    .tcg-wrapper .tcg-ts-why-desc,
    .tcg-wrapper .tcg-ts-feature-desc,
    .tcg-wrapper .tcg-ts-product-desc,
    .tcg-wrapper .tcg-ts-partner-desc,
    .tcg-wrapper .tcg-ts-custom-desc {
        font-size: 24px;
    }

    /* --- self-service --- */
    .tcg-wrapper .tcg-ss-adv-subtitle,
    .tcg-wrapper .tcg-ss-adv-list-item,
    .tcg-wrapper .tcg-ss-adv-grid-item,
    .tcg-wrapper .tcg-ss-team-subtitle,
    .tcg-wrapper .tcg-ss-team-desc,
    .tcg-wrapper .tcg-ss-tech-col-desc {
        font-size: 24px;
    }

    /* --- live-stream --- */
    .tcg-wrapper .tcg-ls-what-desc,
    .tcg-wrapper .tcg-ls-feature-label {
        font-size: 24px;
    }

    /* --- sports --- */
    .tcg-wrapper .tcg-sp-ui-desc,
    .tcg-wrapper .tcg-sp-ui-card-desc,
    .tcg-wrapper .tcg-sp-games-desc {
        font-size: 24px;
    }

    /* --- white-label --- */
    .tcg-wrapper .tcg-wl-whatwlp-desc,
    .tcg-wrapper .tcg-wl-partner-desc,
    .tcg-wrapper .tcg-wl-security-label,
    .tcg-wrapper .tcg-wl-feature-desc,
    .tcg-wrapper .tcg-wl-friendly-desc,
    .tcg-wrapper .tcg-wl-tenmin-desc {
        font-size: 24px;
    }

    /* --- 首頁 index --- */
    .tcg-wrapper .tcg-hero-desc,
    .tcg-wrapper .tcg-wlp-subtitle,
    .tcg-wrapper .tcg-wlp-desc,
    .tcg-wrapper .tcg-about-card-desc,
    .tcg-wrapper .tcg-adv-card-title,
    .tcg-wrapper .tcg-adv-card-desc,
    .tcg-wrapper .tcg-locl-desc,
    .tcg-wrapper .tcg-cust-desc,
    .tcg-wrapper .tcg-cta-text-desc {
        font-size: 24px;
    }

}

/* ==============================================================
   [English Override] 英文版手機版全局行距 & 字距覆蓋
   WPML 切換語言時 <html lang="en-US">，以下樣式自動生效
   ============================================================== */
html[lang="en-US"] .tcg-wrapper-mobile,
html[lang="en-US"] .tcg-wrapper-mobile h1,
html[lang="en-US"] .tcg-wrapper-mobile h2,
html[lang="en-US"] .tcg-wrapper-mobile h3,
html[lang="en-US"] .tcg-wrapper-mobile h4,
html[lang="en-US"] .tcg-wrapper-mobile h5,
html[lang="en-US"] .tcg-wrapper-mobile p,
html[lang="en-US"] .tcg-wrapper-mobile a,
html[lang="en-US"] .tcg-wrapper-mobile li,
html[lang="en-US"] .tcg-wrapper-mobile span,
html[lang="en-US"] .tcg-wrapper-mobile label,
html[lang="en-US"] .tcg-wrapper-mobile input,
html[lang="en-US"] .tcg-wrapper-mobile select,
html[lang="en-US"] .tcg-wrapper-mobile textarea,
html[lang="en-US"] .tcg-wrapper-mobile button {
    line-height: 1.5;
    letter-spacing: 0;
}
/* 數字滾輪排除：不受英文版 line-height 覆蓋影響 */
html[lang="en-US"] .tcg-wrapper-mobile .tcg-roller,
html[lang="en-US"] .tcg-wrapper-mobile .tcg-roller-strip span,
html[lang="en-US"] .tcg-wrapper-mobile .tcg-roller-suffix {
    line-height: 1;
    letter-spacing: 0;
}