/* ==============================================================
   檔案名稱：sports-style.css
   功能說明：TC Gaming — 體育包網（Sports）頁面樣式表
   設計基準：1920px 固定寬度，透過 JS transform: scale() 等比縮放
   命名規則：
     - 共用元件：tcg- 前綴（與首頁一致）
     - 頁面專屬：tcg-sp- 前綴（sp = sports）
   瀏覽器支援：Chrome / Edge / Safari / Firefox，IE11 盡量相容
   ============================================================== */


/* ==============================================================
   [共用] 重置、變數、基本排版
   ※ 與首頁 style.css 相同的基礎樣式，獨立檔案所以需要重複
   ============================================================== */

/* CSS 變數 */

/* ★ Web 共用樣式已移至 tcg-common-web.css ★ */

.tcg-hamburger-desktop {
    font-size: 20px;
    cursor: pointer;
    color: #262626;
    color: var(--tcg-text);
}



/* ★ 漢堡選單已移至 tcg-common-web.css ★ */

/* [Page-Specific] Sports 頁面樣式（Web 版）
   所有 web 規則均帶 .tcg-wrapper 前綴，確保不影響手機版
   ============================================================== */

/* ================================================================
   Web 版圖片尺寸控制
   ================================================================ */
.tcg-wrapper .tcg-sp-ui-screenshot img,
.tcg-wrapper .tcg-sp-ui-card-bg img,
.tcg-wrapper .tcg-sp-ui-card-icon img,
.tcg-wrapper .tcg-sp-games-marquee-track img {
    max-width: 100%;
    height: auto;
}


/* ================================================================
   Hero Section（web 版 — background-image 模式）
   ================================================================ */
.tcg-wrapper .tcg-sp-hero {
    min-height: 600px;
    background-image: url('img/web/sports/solutions5_img_00_banner.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 111px;
}
.tcg-wrapper .tcg-sp-hero-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 600px;
    padding-top: 90px;
    padding-left: 222px;
}
.tcg-wrapper .tcg-sp-hero-content {
    max-width: 600px;
}
.tcg-wrapper .tcg-sp-hero-title {
    font-size: 53px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 100px;
}
.tcg-wrapper .tcg-sp-hero-btn {
    /* 可獨立調整 hero 按鈕 */
}


/* ================================================================
   UI Features（web 版）— 專業設計的極致體驗
   白底，標題 + 描述 + 左截圖 + 右 2×2 卡片
   ================================================================ */
.tcg-wrapper .tcg-sp-ui {
    background: #FFFFFF;
    padding: 109px 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 129px;
}
/* UI 區塊內容容器（獨立 hook，可調整 padding 等） */
.tcg-wrapper .tcg-sp-ui-inner { }
/* 獨立標題（僅 web） */
.tcg-wrapper .tcg-sp-ui-title {
    font-size: 51px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: #262626;
    color: var(--tcg-text);
}
.tcg-wrapper .tcg-sp-ui-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 2;
    text-align: center;
    max-width: 1210px;
    margin: 0 auto 84px;
}

/* 左截圖 + 右卡片佈局 */
.tcg-wrapper .tcg-sp-ui-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 28px;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding-left: 106px;
    padding-right: 106px;
}

/* 左側截圖 */
.tcg-wrapper .tcg-sp-ui-screenshot {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 48%;
    flex: 0 0 47.6%;
    border-radius: 32px;
    overflow: hidden;
}
.tcg-wrapper .tcg-sp-ui-screenshot img {
    display: block;
    width: 100%;
    height: auto;
}

/* 右側 2×2 卡片容器 */
.tcg-wrapper .tcg-sp-ui-cards {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
}

/* 單張功能卡（共用基底） */
.tcg-wrapper .tcg-sp-ui-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    position: relative;
    background: #F5F5F5;
    border-radius: 13px;
    overflow: hidden;
}
/* 各卡獨立 hook */
.tcg-wrapper .tcg-sp-ui-card-1 { }
.tcg-wrapper .tcg-sp-ui-card-2 { }
.tcg-wrapper .tcg-sp-ui-card-3 { }
.tcg-wrapper .tcg-sp-ui-card-4 { }

/* 卡片背景圖（absolute，右側定位） */
.tcg-wrapper .tcg-sp-ui-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.tcg-wrapper .tcg-sp-ui-card-bg img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
}
/* 各卡背景獨立 hook */
.tcg-wrapper .tcg-sp-ui-card-bg-1 { }
.tcg-wrapper .tcg-sp-ui-card-bg-2 { }
.tcg-wrapper .tcg-sp-ui-card-bg-3 { }
.tcg-wrapper .tcg-sp-ui-card-bg-4 { }

/* 卡片內容層 */
.tcg-wrapper .tcg-sp-ui-card-content {
    position: relative;
    z-index: 1;
    padding: 43px 44px;
}
.tcg-wrapper .tcg-sp-ui-card-content-1 { }
.tcg-wrapper .tcg-sp-ui-card-content-2 { }
.tcg-wrapper .tcg-sp-ui-card-content-3 { }
.tcg-wrapper .tcg-sp-ui-card-content-4 { }

/* 卡片 icon */
.tcg-wrapper .tcg-sp-ui-card-icon {
    margin-bottom: 30px;
}
.tcg-wrapper .tcg-sp-ui-card-icon img {
    display: block;
}
.tcg-wrapper .tcg-sp-ui-card-icon-1 { }
.tcg-wrapper .tcg-sp-ui-card-icon-2 { }
.tcg-wrapper .tcg-sp-ui-card-icon-3 { }
.tcg-wrapper .tcg-sp-ui-card-icon-4 { }

/* 卡片標題 */
.tcg-wrapper .tcg-sp-ui-card-title {
    font-size: 27px;
    font-weight: 700;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 30px;
}
.tcg-wrapper .tcg-sp-ui-card-title-1 { }
.tcg-wrapper .tcg-sp-ui-card-title-2 { }
.tcg-wrapper .tcg-sp-ui-card-title-3 { }
.tcg-wrapper .tcg-sp-ui-card-title-4 { }

/* 卡片說明文字 */
.tcg-wrapper .tcg-sp-ui-card-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
}
.tcg-wrapper .tcg-sp-ui-card-desc-1 { }
.tcg-wrapper .tcg-sp-ui-card-desc-2 { }
.tcg-wrapper .tcg-sp-ui-card-desc-3 { }
.tcg-wrapper .tcg-sp-ui-card-desc-4 { }


/* ================================================================
   Sports Games（web 版）— 最豐富的體育遊戲
   灰底，標題 + 描述 + 兩排體育圖片
   ================================================================ */
.tcg-wrapper .tcg-sp-games {
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    padding: 80px 0;
    padding-bottom: 114px;
    margin-bottom: 23px;
}
/* Games 區塊內容容器（獨立 hook，可調整 padding 等） */
.tcg-wrapper .tcg-sp-games-inner { }
/* 獨立標題（僅 web） */
.tcg-wrapper .tcg-sp-games-title {
    font-size: 52px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: #262626;
    color: var(--tcg-text);
    padding-top: 39px;
}
.tcg-wrapper .tcg-sp-games-text {
    max-width: 1200px;
    margin: 0 auto 60px;
    text-align: center;
}
.tcg-wrapper .tcg-sp-games-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 2;
    margin: 0 auto 16px;
}

/* 無限滾動長條圖 marquee */
.tcg-wrapper .tcg-sp-games-marquee-wrap {
    margin-top: 40px;
    overflow: hidden;
}
.tcg-wrapper .tcg-sp-games-marquee {
    overflow: hidden;
    width: 100%;
    margin-bottom: -6px;
    /* 左右虛化遮罩 */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 80px,
        #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, #000 80px,
        #000 calc(100% - 80px), transparent 100%);
}
.tcg-wrapper .tcg-sp-games-marquee-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}
.tcg-wrapper .tcg-sp-games-marquee-track img {
    display: block;
    height: auto;
}

/* 第一排：向左滾動 */
.tcg-wrapper .tcg-sp-games-marquee--left .tcg-sp-games-marquee-track {
    -webkit-animation: tcg-sp-marquee-left 30s linear infinite;
    animation: tcg-sp-marquee-left 30s linear infinite;
}
/* 第二排：向右滾動 */
.tcg-wrapper .tcg-sp-games-marquee--right .tcg-sp-games-marquee-track {
    -webkit-animation: tcg-sp-marquee-right 30s linear infinite;
    animation: tcg-sp-marquee-right 30s linear infinite;
}

@-webkit-keyframes tcg-sp-marquee-left {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes tcg-sp-marquee-left {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@-webkit-keyframes tcg-sp-marquee-right {
    0%   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes tcg-sp-marquee-right {
    0%   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}

/* ── [共用元件] 手機版無縫滾動帶 Marquee ── */
/* ==============================================================
   [Marquee] 手機版無縫滾動帶（國旗 / 功能圖示）
   ──────────────────────────────────────────────────────────
   原理：兩份相同長條圖並排（200% 寬），CSS animation 從 0 → -50%
         滾完一份後瞬間跳回 0%，視覺上無縫循環
   虛化：.tcg-m-marquee 加 mask-image 左右漸層遮罩
   ============================================================== */
.tcg-m-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: -7px;
    /* 左右虛化遮罩（白色漸層，兩端 60px 淡出） */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 60px,
        #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, #000 60px,
        #000 calc(100% - 60px), transparent 100%);
}
.tcg-m-marquee-track {
    display: flex;
    width: 200%;
    height: 100%;
    -webkit-animation: tcgMMarquee 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee-slide {
    flex: 0 0 50%;
    height: 100%;
}
.tcg-m-marquee-slide .tcg-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

/* 國旗帶：高度 70px */
.tcg-m-marquee--flags {
    height: 70px;
}

/* 功能圖示帶：高度 100px */
.tcg-m-marquee--icons {
    height: 100px;
}

/* 從右往左滾動（預設）：translateX(0%) → translateX(-50%) */
@-webkit-keyframes tcgMMarquee {
    from { -webkit-transform: translateX(0%); transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes tcgMMarquee {
    from { -webkit-transform: translateX(0%); transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* 從左往右滾動（反向）：translateX(-50%) → translateX(0%) */
@-webkit-keyframes tcgMMarqueeRight {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
@keyframes tcgMMarqueeRight {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%); transform: translateX(0%); }
}

/* 雙行 marquee 方向控制（用於國旗帶等左右雙向滾動場景） */
.tcg-m-marquee--flags-left,
.tcg-m-marquee--flags-right {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.tcg-m-marquee--flags-left .tcg-m-marquee-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-animation: tcgMMarquee 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee--flags-right .tcg-m-marquee-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-animation: tcgMMarqueeRight 20s linear infinite;
    animation: tcgMMarqueeRight 20s linear infinite;
}


/* ================================================================
   Sports 頁面（sports.html）專用樣式
   前綴：tcg-m-sp-
   ================================================================ */

/* ── Hero：整張合成底圖 + 按鈕覆蓋 ── */
.tcg-m-sp-hero {
    position: relative;
}
.tcg-m-sp-hero-bg {
    width: 100%;
}
.tcg-m-sp-hero-bg img {
    display: block;
    width: 100%;
}
/* Hero 標題 — absolute 定位在 banner 上方 */
.tcg-wrapper-mobile .tcg-m-sp-hero-title {
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 54px;
    font-weight: 900;
    color: #262626;
}
.tcg-m-sp-hero-btn-wrap {
    position: absolute;
    bottom: 68px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* ── UI：專業設計的極致體驗（標題 + 說明 + 截圖） ── */
.tcg-m-sp-ui {
    background: #FFFFFF;
    padding: 122px 0;
    padding-bottom: 60px;
}
.tcg-wrapper-mobile .tcg-m-sp-ui-title {
    font-size: 57px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    line-height: 1.20;
    margin-bottom: 38px;
}
.tcg-wrapper-mobile .tcg-m-sp-ui-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 101px;
    padding-left: 44px;
    padding-right: 44px;
}
.tcg-m-sp-ui-screenshot img {
    display: block;
    width: 100%;
}


/* ── Features：4 個獨立圓角功能卡片（背景底圖 + icon + 標題/說明） ── */
.tcg-m-sp-features {
    background: #FFFFFF;
    padding: 20px 0 60px;
    padding-bottom: 169px;
}

/* 單張卡片：圓角 + 灰底 + 陰影，position:relative 讓背景底圖覆蓋 */
.tcg-m-sp-feature-card {
    position: relative;
    background: #F5F5F5;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 24px;
    /* padding-left: 10px; */
    width: 569px;
    margin: 0 auto;
    margin-bottom: 26px;
    height: 421px;
}
.tcg-m-sp-feature-card:last-child {
    margin-bottom: 0;
}

/* 背景底圖（absolute 鋪滿，之後替換佔位圖為實際圖片） */
.tcg-m-sp-feature-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.tcg-m-sp-feature-card-bg img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
}

/* 內容層：icon 左上，標題 + 說明下方 */
.tcg-m-sp-feature-card-content {
    position: relative;
    z-index: 1;
    padding: 40px 40px 40px;
}
.tcg-wrapper-mobile .tcg-m-sp-feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 29px;
}
.tcg-wrapper-mobile .tcg-m-sp-feature-icon img {
    display: block;
    width: 100%;
    height: 100%;
}
.tcg-wrapper-mobile .tcg-m-sp-feature-title {
    font-size: 30px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 32px;
}
.tcg-wrapper-mobile .tcg-m-sp-feature-desc {
    font-size: 22px;
    color: #6B6B6B;
    line-height: 1.8;
}


/* ── Games：最豐富的體育遊戲（灰色背景） ── */
.tcg-m-sp-games {
    background: #F5F5F5;
    padding: 129px 0 129px;
    margin-bottom: 12px;
}
.tcg-wrapper-mobile .tcg-m-sp-games-title {
    font-size: 56px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 40px;
}
.tcg-wrapper-mobile .tcg-m-sp-games-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: center;
    margin-bottom: -14px;
    padding-left: 57px;
    padding-right: 57px;
}
.tcg-wrapper-mobile .tcg-m-sp-games-desc + .tcg-m-sp-games-desc {
    margin-top: 48px;
}
/* 雙行無限滾動長條圖容器 */
.tcg-m-sp-games-marquees {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 64px;
}
.tcg-m-sp-games-row .tcg-m-marquee-track {
    width: 4412px;
}
.tcg-m-sp-games-row .tcg-m-marquee-slide {
    flex: 0 0 2206px;
}
.tcg-m-sp-games-row .tcg-m-marquee-slide img {
    display: block;
    width: 2206px;
    height: 207px;
}

/* ★ Mobile 共用樣式已移至 tcg-common-mobile.css ★ */