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


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


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

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

/* ================================================================
   [Hero] 首屏主視覺 — CSS 背景圖模式，高度 600px
   ================================================================ */
.tcg-wrapper .tcg-mg-hero {
    background: #F5F5F5 url('img/web/mini-games/gameproduct_img_00_minigame_banner.png') no-repeat right center;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
    margin-top: 111px;
}
.tcg-wrapper .tcg-mg-hero-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 600px;
    padding-top: 100px;
    padding-left: 226px;
}
.tcg-wrapper .tcg-mg-hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
}
.tcg-wrapper .tcg-mg-hero-title {
    font-size: 51px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 95px;
}
.tcg-wrapper .tcg-mg-hero-btn {
    /* hook：可獨立調整 hero Contact Us 按鈕 */
}


/* ================================================================
   [Mini Games Info] MINI GAMES in TC GAMING
   白底，大標題圖片 + 左紅標題右說明 + 2×3 旋轉卡片
   ================================================================ */
.tcg-wrapper .tcg-mg-info {
    background: #FFFFFF;
    padding: 106px 0 0px;
    padding-left: 219px;
    padding-right: 219px;
}
/* 內容容器（獨立 hook） */
.tcg-wrapper .tcg-mg-info-inner {padding-left: 80px;padding-right: 80px;}

/* 大標題圖片（719×205） */
.tcg-wrapper .tcg-mg-info-heading {
    margin-bottom: 65px;
}
.tcg-wrapper .tcg-mg-info-heading-img {
    display: block;
    width: 719px;
    height: 205px;
}

/* 左紅標題 + 右說明文字 */
.tcg-wrapper .tcg-mg-info-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
}
.tcg-wrapper .tcg-mg-info-intro-label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 360px;
    flex: 0 0 580px;
}
.tcg-wrapper .tcg-mg-info-intro-title {
    font-size: 50px;
    font-weight: 800;
    color: #262626;
    color: var(--tcg-text);
    line-height: 1.4;
}
.tcg-wrapper .tcg-mg-info-intro-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.tcg-wrapper .tcg-mg-info-intro-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 2;
    margin: 0 0 16px;
}


/* ================================================================
   [Cards] 2×3 旋轉卡片
   每張卡片有不同的旋轉角度，模擬設計圖中散落的視覺效果
   ── 調整卡片寬度：改 .tcg-mg-card 的 width ──
   ── 調整卡片間距：改 .tcg-mg-cards-row 的 gap ──
   ================================================================ */
/* 獨立 section，不受 info 的 padding 限制 */
.tcg-wrapper .tcg-mg-cards {
    background: #FFFFFF;
    padding: 72px 0 90px;
}
/* 內容容器（獨立 hook） */
.tcg-wrapper .tcg-mg-cards-inner { }
.tcg-wrapper .tcg-mg-cards-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 61px;                /* ← 卡片間距，改這裡 */
    margin-bottom: 57px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: left;
    padding-left: 81px;
}
.tcg-wrapper .tcg-mg-cards-row:last-child {
    margin-bottom: 0;
    margin-left: 197px;
}

/* 外殼：穩定的 hover 區域 + 傾斜角度（不做 3D 翻轉）
   ── 調整卡片寬度：改 width ──
   ── 調整卡片高度：改 min-height ── */
.tcg-wrapper .tcg-mg-card-wrap {
    width: 405px;             /* ← 卡片寬度，改這裡 */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 621px;
    position: relative;
    -webkit-perspective: 1200px;
    perspective: 1200px;
}
/* 各外殼獨立 hook（可單獨調整位置、間距） */
.tcg-wrapper .tcg-mg-card-wrap-1 { }
.tcg-wrapper .tcg-mg-card-wrap-2 { }
.tcg-wrapper .tcg-mg-card-wrap-3 { }
.tcg-wrapper .tcg-mg-card-wrap-4 { }
.tcg-wrapper .tcg-mg-card-wrap-5 { }
.tcg-wrapper .tcg-mg-card-wrap-6 { }

/* 內層：3D 翻轉體 */
.tcg-wrapper .tcg-mg-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
}
/* 各卡片獨立 hook */
.tcg-wrapper .tcg-mg-card-1 { }
.tcg-wrapper .tcg-mg-card-2 { }
.tcg-wrapper .tcg-mg-card-3 { }
.tcg-wrapper .tcg-mg-card-4 { }
.tcg-wrapper .tcg-mg-card-5 { }
.tcg-wrapper .tcg-mg-card-6 { }

/* ★ hover 在外殼上觸發，翻轉內層 — hover 區域永遠穩定 ★ */
.tcg-wrapper .tcg-mg-card-wrap:hover .tcg-mg-card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* ------ 正面（標題 + 插圖）：3D backface hidden ------ */
.tcg-wrapper .tcg-mg-card-front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 40px 36px 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}
/* 正面繼承卡片底色 */
.tcg-wrapper .tcg-mg-card--light .tcg-mg-card-front {background: #eaecef;box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}
.tcg-wrapper .tcg-mg-card--red .tcg-mg-card-front {background: #E5222B;background: var(--tcg-red);box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}
.tcg-wrapper .tcg-mg-card--dark .tcg-mg-card-front {background: #1A1A2E;box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}
.tcg-wrapper .tcg-mg-card--dark-red .tcg-mg-card-front {background: #3A0E12;box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}

/* ------ 背面（hover 文字描述）：預設翻轉 180° 隱藏 ------ */
.tcg-wrapper .tcg-mg-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 40px 36px 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 2;
}
/* 背面繼承卡片底色 */
.tcg-wrapper .tcg-mg-card--light .tcg-mg-card-overlay {background: #eaecef;box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}
.tcg-wrapper .tcg-mg-card--red .tcg-mg-card-overlay {background: #E5222B;background: var(--tcg-red);box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}
.tcg-wrapper .tcg-mg-card--dark .tcg-mg-card-overlay {background: #1A1A2E;box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}
.tcg-wrapper .tcg-mg-card--dark-red .tcg-mg-card-overlay {background: #3A0E12;box-shadow: 0 8px 12px 0px rgb(0 0 0 / 18%);}

/* hover 描述文字 */
.tcg-wrapper .tcg-mg-card-desc {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}
/* 不同卡片顏色的描述文字色 */
.tcg-wrapper .tcg-mg-card--light .tcg-mg-card-desc {
    color: #262626;
    color: var(--tcg-text);
}
.tcg-wrapper .tcg-mg-card--red .tcg-mg-card-desc,
.tcg-wrapper .tcg-mg-card--dark .tcg-mg-card-desc,
.tcg-wrapper .tcg-mg-card--dark-red .tcg-mg-card-desc {
    color: #FFFFFF;
}

/* 卡片標題 */
.tcg-wrapper .tcg-mg-card-title {
    font-size: 37px;
    font-weight: 800;
    line-height: 1.2;
    /* margin-bottom: 20px; */
}

/* 卡片插圖區 */
.tcg-wrapper .tcg-mg-card-visual {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
/* 卡片插圖圖片（327×327 原始尺寸） */
.tcg-wrapper .tcg-mg-card-visual-img {
    display: block;
    width: 327px;
    height: 327px;
    margin-top: -80px;          /* icon 獨立偏移，不影響其他元素 */
}

/* 卡片右下角箭頭圖片（125×125 原始尺寸）— 正反面都可見 */
.tcg-wrapper .tcg-mg-card-action {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 3;
}
.tcg-wrapper .tcg-mg-card-arrow-img {
    display: block;
    width: 125px;
    height: 125px;
}
/* 紅色卡片：箭頭圖片轉白色 */
.tcg-wrapper .tcg-mg-card--red .tcg-mg-card-arrow-img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}


/* ------ 卡片顏色變體（文字色，背景色在 front/overlay 上） ------ */

.tcg-wrapper .tcg-mg-card--light {
    color: #262626;
    color: var(--tcg-text);
}
.tcg-wrapper .tcg-mg-card--light .tcg-mg-card-title {
    color: #262626;
    color: var(--tcg-text);
}
.tcg-wrapper .tcg-mg-card--red {
    color: #FFFFFF;
}
.tcg-wrapper .tcg-mg-card--red .tcg-mg-card-title {
    color: #FFFFFF;
}
.tcg-wrapper .tcg-mg-card--dark {
    color: #FFFFFF;
}
.tcg-wrapper .tcg-mg-card--dark .tcg-mg-card-title {
    color: #FFFFFF;
}
.tcg-wrapper .tcg-mg-card--dark-red {
    color: #FFFFFF;
}
.tcg-wrapper .tcg-mg-card--dark-red .tcg-mg-card-title {
    color: #FFFFFF;
}


/* ------ 外殼傾斜角度（還原設計圖中的傾斜效果） ------
   傾斜放在 .tcg-mg-card-wrap 上，hover 區域始終是完整矩形 */

/* 第一排 */
.tcg-wrapper .tcg-mg-card-wrap--rotate-1 {
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    transform: rotate(-6deg);
    margin-top: 17px;
}
.tcg-wrapper .tcg-mg-card-wrap--rotate-2 {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
    margin-top: 1px;
    margin-left: 39px;
}
.tcg-wrapper .tcg-mg-card-wrap--rotate-3 {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    margin-left: -10px;
    margin-top: 12px;
}

/* 第二排 */
.tcg-wrapper .tcg-mg-card-wrap--rotate-4 {
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
.tcg-wrapper .tcg-mg-card-wrap--rotate-5 {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
    margin-left: -10px;
}
.tcg-wrapper .tcg-mg-card-wrap--rotate-6 {
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
    margin-left: 37px;
}

/* ==============================================================
   [Mini Games] tcg-m-mg- 前綴
   頁面結構：Hero → Info（大標題 + 說明 + 插圖）→ Cards（6張傾斜卡片）→ Footer
   ============================================================== */

/* ── Hero：天成MINI GAMES 主視覺（Banner 圖片模式） ── */
.tcg-wrapper-mobile .tcg-m-mg-hero {
    position: relative;
}
.tcg-wrapper-mobile .tcg-m-mg-hero-bg img {
    display: block;
    width: 100%;
}
.tcg-wrapper-mobile .tcg-m-mg-hero-title {
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 52px;
    font-weight: 900;
    color: #262626;
}
.tcg-wrapper-mobile .tcg-m-mg-hero-btn-wrap {
    position: absolute;
    bottom: 68px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* ── Info：MINI GAMES in TC GAMING + 說明 + 插圖 ── */
.tcg-m-mg-info {
    background: #FFFFFF;
    padding: 123px 0 133px;
    padding-bottom: 97px;
}

/* 大標題圖片（MINI GAMES in TC GAMING）*/
.tcg-wrapper-mobile .tcg-m-mg-info-heading {
    margin-bottom: 105px;
}
.tcg-wrapper-mobile .tcg-m-mg-info-heading img {
    display: block;
    width: 100%;
}

/* 中文標題 + 說明文字 */
.tcg-wrapper-mobile .tcg-m-mg-info-title {
    font-size: 51px;
    font-weight: 900;
    color: #262626;
    line-height: 1.3;
    margin-bottom: 30px;
    padding-left: 33px;
    padding-right: 33px;
}
.tcg-wrapper-mobile .tcg-m-mg-info-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.6;
    margin-bottom: 0;
    padding-left: 33px;
    padding-right: 33px;
}
.tcg-wrapper-mobile .tcg-m-mg-info-desc + .tcg-m-mg-info-desc {
    margin-top: 36px;
}
/* 說明下方 3D 插圖 */
.tcg-m-mg-info-illust {
    margin-top: 40px;
}
.tcg-m-mg-info-illust .tcg-img-placeholder {
    min-height: 400px;
    border-radius: 0;
}


/* ── Cards：6 張傾斜遊戲特色卡片 ── */
.tcg-m-mg-cards {
    background: #FFFFFF;
    padding: 0 0 32px;
}
.tcg-m-mg-cards-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 63px;
}

/* 單張卡片外殼（撲克牌比例 ≈ 2:3，提供 3D 透視） */
.tcg-m-mg-card {
    width: 406px;
    height: 629px;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    position: relative;
}
/* 翻轉內殼 */
.tcg-m-mg-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
}
/* 翻轉狀態 */
.tcg-m-mg-card.is-flipped .tcg-m-mg-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
/* 正面 & 背面共用 */
.tcg-m-mg-card-front,
.tcg-m-mg-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    padding: 40px 43px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}
/* 背面預設翻轉 180 度 */
.tcg-m-mg-card-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
/* 背面繼承卡片底色 */
.tcg-m-mg-card--light .tcg-m-mg-card-front,
.tcg-m-mg-card--light .tcg-m-mg-card-back {
    background: #F5F5F5;
}
.tcg-m-mg-card--red .tcg-m-mg-card-front,
.tcg-m-mg-card--red .tcg-m-mg-card-back {
    background: #E5222B;
}
.tcg-m-mg-card--dark .tcg-m-mg-card-front,
.tcg-m-mg-card--dark .tcg-m-mg-card-back {
    background: #1A1A2E;
}
/* 卡片文字色 */
.tcg-m-mg-card--light { color: #262626; }
.tcg-m-mg-card--red { color: #FFFFFF; }
.tcg-m-mg-card--dark { color: #FFFFFF; }

/* 傾斜角度（每張卡片獨立旋轉） */
.tcg-m-mg-card--rotate-1 {
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(--6deg);
    transform: rotate(-6deg);
}
.tcg-m-mg-card--rotate-2 {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(4deg);
    transform: rotate(12deg);
}
.tcg-m-mg-card--rotate-3 {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(2deg);
}
.tcg-m-mg-card--rotate-4 {
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(3deg);
    transform: rotate(-4deg);
    margin-top: -30px;
}
.tcg-m-mg-card--rotate-5 {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-12deg);
}
.tcg-m-mg-card--rotate-6 {
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(2deg);
    transform: rotate(6deg);
}

/* 卡片標題 */
.tcg-wrapper-mobile .tcg-m-mg-card-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: 9px;
}
/* 深色卡標題白色 */
.tcg-wrapper-mobile .tcg-m-mg-card--red .tcg-m-mg-card-title,
.tcg-wrapper-mobile .tcg-m-mg-card--dark .tcg-m-mg-card-title {
    color: #FFFFFF;
}

/* 卡片插圖（以卡片高度為準，絕對定位垂直水平置中） */
.tcg-m-mg-card-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 79%;
}
.tcg-m-mg-card-visual img {
    display: block;
    width: 100%;
    height: auto;
}
.tcg-m-mg-card-visual .tcg-img-placeholder {
    min-height: 240px;
    border-radius: 16px;
}

/* 背面說明文字 */
.tcg-wrapper-mobile .tcg-m-mg-card-desc {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.8;
    margin: 0;
}

/* 箭頭按鈕（右下角空心圓圈 + 箭頭） */
.tcg-m-mg-card-arrow {
    position: absolute;
    bottom: 30px;
    right: 35px;
    width: 123px;
    height: 123px;
    border-radius: 50%;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
}
/* 灰色卡：紅色空心圓 + 紅色箭頭 */
.tcg-m-mg-card--light .tcg-m-mg-card-arrow {
    border: 3px solid #E5222B;
    color: #E5222B;
}
/* 紅色卡：白色空心圓 + 白色箭頭 */
.tcg-m-mg-card--red .tcg-m-mg-card-arrow {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}
/* 深色卡：白色空心圓 + 白色箭頭 */
.tcg-m-mg-card--dark .tcg-m-mg-card-arrow {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}

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