/* [Google Fonts] Montserrat — 英文按鈕 / 連結統一字體 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* ==============================================================
   檔案名稱：tcg-common-web.css
   功能說明：TC Gaming — Web 版全站共用樣式
   ──────────────────────────────────────────────────────────
   涵蓋範圍：
     1. CSS 變數（配色、間距）
     2. 重置、基本排版
     3. 共用容器 .tcg-container
     4. 圖片佔位 .tcg-img-placeholder
     5. 按鈕 .tcg-btn 系列
     6. Header 導覽列
     7. Footer 頁尾
   ──────────────────────────────────────────────────────────
   不包含：漢堡選單（各頁實作不同，留在各自的 *-style.css）
   載入順序：此檔案第一個載入，頁面 CSS 後載入可覆蓋
   ============================================================== */


/* ==============================================================
   [共用] CSS 變數、重置、基本排版
   ============================================================== */

/* CSS 變數：現代瀏覽器有效；IE11 忽略，將使用下方實際色碼 */
:root {
    --tcg-red: #E5222B;
    --tcg-red-dark: #B51520;
    --tcg-red-light: #FF5A64;
    --tcg-red-gradient: linear-gradient(135deg, #FF3B45 0%, #D2101C 100%);
    --tcg-white: #FFFFFF;
    --tcg-gray-bg: #F2F2F4;
    --tcg-gray-card: #FAFAFB;
    --tcg-gray-border: #E5E7EB;
    --tcg-text: #262626;
    --tcg-text-light: #6B6B6B;
    --tcg-text-muted: #9A9A9A;
    --tcg-container-max: 1720px;
    --tcg-container-min: 1366px;
    --tcg-container-padding: 60px;
}

/* 隱藏瀏覽器滾動條但保留滾動功能 */
html {
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE / Edge (舊版) */
}
html::-webkit-scrollbar {
    display: none;                   /* Chrome / Safari / Edge (新版) */
}

/* 基礎重置（scope 在 .tcg-wrapper 之下，不影響 WP 其他元素） */
.tcg-wrapper,
.tcg-wrapper *,
.tcg-wrapper *::before,
.tcg-wrapper *::after {
    box-sizing: border-box;
}

.tcg-scale-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    overflow-x: hidden;
}

.tcg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    font-family: "Helvetica Neue", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #262626;
    color: var(--tcg-text);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tcg-wrapper a {
    color: red;
    text-decoration: none;
}

.tcg-wrapper ul,
.tcg-wrapper ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tcg-wrapper h1,
.tcg-wrapper h2,
.tcg-wrapper h3,
.tcg-wrapper h4,
.tcg-wrapper h5,
.tcg-wrapper h6 {
    margin: 0;
    font-weight: bold;
    line-height: 1.2;
}

.tcg-wrapper p {
    margin: 0;
    /* margin-left: 0px; */
}

.tcg-wrapper button,
.tcg-wrapper input,
.tcg-wrapper select,
.tcg-wrapper textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

.tcg-wrapper button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tcg-wrapper *:focus {
    outline: none;
}
.tcg-wrapper *:focus-visible {
    outline: 2px solid rgba(229, 34, 43, 0.55);
    outline-offset: 2px;
}

.tcg-wrapper img {
    max-width: 100%;
    display: block;
    border: 0;
}

.tcg-wrapper table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 容器：最大 1920、置中，左右留白 */
.tcg-container {
    width: 100%;
    max-width: 1820px!important;
    max-width: 1920px;
    max-width: var(--tcg-container-max);
    margin: 0 auto;
    padding-left: 60px;
    padding-right: 60px;
    padding-left: var(--tcg-container-padding);
    padding-right: var(--tcg-container-padding);
    /* padding-left: 230px; */
    /* padding-right: 0px; */
    /* margin-left: 0; */
    /* margin-right: 108px; */
    margin-top: -1px;
}

/* 共用：圖片佔位區塊 */
.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: -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;
    color: #A0A0A8;
    font-size: 13px;
    letter-spacing: 0.05em;
}

/* 共用：文字強調色 */
.tcg-text-accent {
    color: #E5222B;
    color: var(--tcg-red);
}


/* ==============================================================
   [共用] 按鈕
   ============================================================== */
.tcg-wrapper .tcg-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: "Montserrat", sans-serif !important;
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 23px;
    border-radius: 999px;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
}

.tcg-wrapper .tcg-btn .tcg-arrow {
    margin-left: 8px;
    font-size: 16px;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

.tcg-wrapper .tcg-btn:hover .tcg-arrow {
    -webkit-transform: translateX(4px);
    -ms-transform: translateX(4px);
    transform: translateX(4px);
}

.tcg-wrapper .tcg-btn-primary {
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 0px;
}

.tcg-wrapper .tcg-btn-primary:hover {
    background: #B51520;
    background: var(--tcg-red-dark);
}

.tcg-wrapper .tcg-btn-outline {
    background: transparent;
    color: #E5222B;
    color: var(--tcg-red);
    border: 1px solid #E5222B;
    border: 1px solid var(--tcg-red);
}

.tcg-wrapper .tcg-btn-outline:hover {
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
}

.tcg-wrapper .tcg-btn-white {
    background: #FFFFFF;
    color: #E5222B;
    color: var(--tcg-red);
    margin-left: 12px;
    margin-top: 79px;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.tcg-wrapper .tcg-btn-white:hover {
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
}

.tcg-wrapper .tcg-btn-sm {
    padding: 8px 20px;
    font-size: 13px;
}


/* ==============================================================
   [Section: Header] 頂部導覽列
   ============================================================== */
.tcg-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    padding: 20px 0;
}

.tcg-header-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.tcg-logo {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tcg-logo-text {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #E5222B;
    color: var(--tcg-red);
}

.tcg-nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tcg-nav-list > li {
    margin: 0 18px;
}

.tcg-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
    color: var(--tcg-text);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.tcg-nav-link:hover {
    color: #E5222B;
    color: var(--tcg-red);
}

.tcg-nav-link--active {
    color: #E5222B;
    color: var(--tcg-red);
}

.tcg-caret {
    font-size: 10px;
    margin-left: 2px;
}

.tcg-header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tcg-search-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #262626;
    color: var(--tcg-text);
    margin-right: 12px;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.tcg-search-btn:hover {
    color: #E5222B;
    color: var(--tcg-red);
}

.tcg-lang-switch {
    cursor: pointer;
    font-size: 14px;
}

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


/* ==============================================================
   [Section: Footer] 頁尾
   ============================================================== */
.footer-container {
    padding-left: 0px;
    padding-right: 0px;
    /* padding-bottom: 300px; */
}
.tcg-footer {
    background: #FFFFFF;
    padding: 60px 0 100px;
    height: 800px;
}
.tcg-footer-card {
    background: #fdfdfd;
    border: 2px solid #e6e6e6;
    border-radius: 24px;
    padding: 81px 111px 50px;
    height: 553px;
}
.tcg-footer-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0;
}
.tcg-footer-brand {
    min-width: 240px;
}
.tcg-footer-brand-logo {
    margin-bottom: 246px;
}
.tcg-footer-brand-img {
    display: block;
    height: auto;
}
.tcg-social { margin-top: 0; }
.tcg-social-label {font-size: 21px;color: #6f6f6f;display: block;margin-bottom: 6px;}
.tcg-social-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 31px;
}
.tcg-social-icon { display: block; width: 36px; height: 36px; border-radius: 50%; }

.tcg-footer-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 84px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-right: 12px;
}
.tcg-footer-col-title {
    font-size: 24px;
    color: #262626;
    padding-bottom: 27px;
    border-bottom: 3px solid #E5222B;
    display: inline-block;
    margin-bottom: 21px !important;
}
.tcg-footer-list li {margin-top: 3px !important;}
.tcg-footer-list a {font-size: 20px;color: #6B6B6B;transition: color .2s;line-height: 1.74;}
.tcg-footer-list a:hover { color: #E5222B; }

.tcg-copyright {
    padding: 24px 110px;
    text-align: center;
    padding-bottom: 24px;
    height: auto;
}
.tcg-copyright p {font-size: 13px;color: #9A9A9A;text-align: center;}


/* ==============================================================
   [Mobile Mode] 漢堡按鈕 + 全螢幕選單
   觸發條件：viewport ≤ 1366 時，JS 在 <body> 加上 .tcg-mobile-mode
   ============================================================== */

/* 漢堡按鈕：預設隱藏，tcg-mobile-mode 時才顯示 */
.tcg-hamburger {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    width: 40px;
    height: 40px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    background: #E5222B;
    background: var(--tcg-red);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

.tcg-mobile-mode .tcg-hamburger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tcg-hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
}

/* 全螢幕選單：預設隱藏 */
.tcg-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.92);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tcg-mobile-menu--open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tcg-mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.tcg-mobile-menu-list {
    text-align: center;
}

.tcg-mobile-menu-list li {
    margin-bottom: 24px;
}

.tcg-mobile-menu-link {
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.tcg-mobile-menu-link:hover {
    color: #FF5A64;
    color: var(--tcg-red-light);
}

/* Mobile 模式：隱藏桌機 nav 右側元素 */
body.tcg-mobile-mode .tcg-header-right {
    display: none;
}

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