@charset "utf-8";
/* ============================================================
   塔塔冒险队 台湾官网 · 移动端（rem，750 设计，复刻自海外站）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 全局禁止文本选中 + iOS 长按菜单（放行表单输入，避免预约弹窗输入框无法编辑） */
* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
img { width: 100%; height: auto; display: block; }

/* ---- fonts ---- */
@font-face { font-family: "mianhuatang"; src: url("../font/ERYaMianHuaTang.ttf"); font-weight: 400; font-style: normal; }
.font-mianhuatang { font-family: "mianhuatang"; }
@font-face { font-family: "huhmlet"; src: url("../font/ERYaMianHuaTang.ttf"); font-weight: 600; }
@font-face { font-family: "siyuanhei"; src: url("../font/SourceHanSansCN-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "siyuanhei"; src: url("../font/SourceHanSansCN-Medium.ttf"); font-weight: 500; }
@font-face { font-family: "siyuanhei"; src: url("../font/SourceHanSansCN-Bold.otf"); font-weight: 600; }
@font-face { font-family: "SourceHanSansTWHK"; src: url("../font/SourceHanSansTWHK.otf"); font-style: normal; font-weight: 600; }
.font-siyuanlei { font-family: "siyuanhei"; }

body { --primary: #ffa51d; height: auto; min-height: 17.7867rem; background: #000; overflow-x: hidden; }
#m_home_main { position: relative; }
.m_page, .page_slide { width: 100vw; min-height: 17.7867rem; position: relative; }
.page_slide_wrapper { position: absolute; left: 0; top: 0; box-sizing: content-box; width: 100vw; min-height: 17.7867rem; height: 100%; }
.page_slide_content { min-height: 17.7867rem; position: relative; z-index: 1; }

.page_slide:has(#section_wrapper_home) { margin-bottom: -2.8067rem; }
#section_wrapper_home { padding-bottom: 1.8667rem; position: relative; }
#section_wrapper_home_bg_video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#bg_cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.page_slide:has(#section_wrapper_role) { margin-bottom: -1.8rem; }
#section_wrapper_role { background: url("../img/m/common/home/section2.webp") no-repeat top/cover; height: 18.7733rem; }
/* 源站值：section3 背景比玩法内容高一截，-8.7rem 把 footer 上拉贴合玩法内容底（footer 覆盖 section3 空白底部） */
.page_slide:has(#section_wrapper_game) { margin-bottom: -8.7rem; height: 27.1467rem; }
#section_wrapper_game { background: url("../img/m/common/home/section3.webp") no-repeat top/cover; }

.star-mask { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 999; pointer-events: none; transform: translate(-50%, -50%); }

/* ============================================================
   Header
   ============================================================ */
#m_header {
  background: url("../img/m/common/header/m_header_bg.webp") no-repeat;
  background-size: 11.4267rem 1.5067rem; background-color: #ffa800; background-position: bottom 0.0533rem center;
  width: 100%; height: 1.2rem; position: fixed; left: 0; top: 0; z-index: 10;
}
.m_header_logo {
  width: 1.8267rem; height: 1.0933rem; position: absolute; left: 0.2933rem; bottom: -0.0267rem;
  background: url("../img/m/zh_TW/header/m_header_logo.webp") no-repeat center/contain;
}
.m_header_right { position: absolute; right: 0.6267rem; top: 0.32rem; display: flex; gap: 0.7733rem; align-items: center; }
#m_header_lang { position: relative; width: 0.4667rem; height: 0.4667rem; background: url("../img/m/common/header/m_header_language.webp") no-repeat center/cover; }
#m_header_lang_pop { position: absolute; top: 100%; left: 50%; margin-top: 0.13rem; padding: 0.08rem 0; white-space: nowrap; z-index: 999; display: none; transform: translate(-50%, 0.1467rem); width: 3.3rem; }
#m_header_lang_pop.show { display: block; }
#m_header_lang_pop > div { background-color: rgba(26, 19, 23, 0.8); display: flex; flex-direction: column; align-items: stretch; padding: 0 0.65rem 0.7rem 0.55rem; border-bottom-left-radius: 0.1333rem; }
#m_header_lang_pop a { display: block; color: var(--primary); text-align: center; border-bottom: 1px dotted rgba(255,255,255,0.3); height: 1.2267rem; font-size: 0.4133rem; line-height: 1; padding: 0.56rem 0.25rem 0.32rem; }
#m_header_share { width: 0.3467rem; height: 0.4533rem; position: relative; background: url("../img/m/common/header/m_header_share.webp") no-repeat center/cover; }
#share_pop { position: fixed; right: 0; top: 1.2rem; background: url("../img/m/common/header/share_bg.png") no-repeat center/contain; width: 1.5467rem; height: 4.2667rem; z-index: 11; display: none; }
#share_pop > a { position: absolute; width: 0.6267rem; height: 0.6267rem; left: 50%; transform: translateX(-50%); z-index: 11; background-repeat: no-repeat; background-position: center; background-size: contain; }
#share_pop > a:nth-child(1) { top: 0.62rem; background-image: url("../img/m/common/header/social_fb.png"); }
#share_pop > a:nth-child(2) { top: 1.72rem; background-image: url("../img/m/common/header/social_yt.png"); }
#share_pop > a:nth-child(3) { top: 2.82rem; background-image: url("../img/m/common/header/social_baha.png"); }
#music_toggle > img { width: 0.3733rem; height: 0.4533rem; }
#music_toggle #music_bg_play { display: none; }
#music_toggle #music_bg_pause { display: block; }
#music_toggle.playing #music_bg_play { display: block; }
#music_toggle.playing #music_bg_pause { display: none; }

/* ============================================================
   第1屏 · 首页
   ============================================================ */
#section_home { position: relative; overflow-x: hidden; }
#m_home_logo {
  background-image: url("../img/m/zh_TW/home/slogan.webp"); background-size: contain; background-repeat: no-repeat; background-position: center;
  width: 100%; height: 5rem; position: absolute; left: 0; top: 0.6rem; margin-top: 20px;
}
#subscribe {
  position: absolute; bottom: 1.4667rem; left: 50%; z-index: 10; transform: translate(-50%, 0);
  width: 5.84rem; height: 1.6133rem; background: url("../img/zh_TW/header/subscribe_btn.webp"); background-size: contain; background-repeat: no-repeat;
  transition: all 0.1s ease; display: none;
}
#subscribe:active { transform: translate(-50%, 0) scale(0.92); }
#creatorZone { position: absolute; top: 9rem; right: 0; z-index: 10; width: 2.52rem; height: 2.376rem; background: url("../img/m/zh_TW/home/creatorZone.webp"); background-size: contain; background-repeat: no-repeat; }
#download {
  position: absolute; bottom: 1.2733rem; left: 50%; z-index: 10; transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 0.22rem;
  padding: 0.16rem 0.2rem; box-sizing: border-box;
  background-color: #fffdf5;
  background-image: radial-gradient(#fbe6bd 0.032rem, transparent 0.036rem);
  background-size: 0.22rem 0.22rem;
  border: 0.04rem solid #fbe4a4; border-radius: 0.34rem;
}
#download a { display: block; }
#download a:active { transform: scale(0.94); }
#download #pay_icon img { display: block; width: 1.9rem; height: 1.9rem; border-radius: 0.24rem; }
#download .download_btns { display: flex; flex-direction: column; gap: 0.2rem; }
#download .download_btns a img { display: block; width: 2.9rem; height: auto; }
#download .download_qr img { display: block; width: 1.62rem; height: 1.62rem; }

/* 各屏标题图（3 层：小 icon / 文字 / 底纹）—— 复刻官网 cc.farlightgames.com mobile home.css */
.page_slide .slide_title_img { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 5.7467rem; height: 2.1467rem; margin: 0.28rem 0; position: absolute; left: 50%; margin-left: calc(-5.7467rem / 2); }
.role_section_title { top: 1.5467rem; }
.game_section_title { top: 2.0267rem; }
.slide_title_img_1 { mix-blend-mode: multiply; width: 1.26rem; }
.slide_title_img_2 { width: 5.0667rem; position: absolute; top: 0.64rem; z-index: 1; }
.slide_title_img_3 { mix-blend-mode: multiply; width: 5.7467rem; }

/* ============================================================
   第2屏 · 角色（横向 swiper，每主角色一屏 + 子头像切换）
   ============================================================ */
#role .swiper-container { overflow: hidden; }
#role .swiper-wrapper { height: 17.7867rem; }
#role .swiper-slide { width: 100vw; height: 17.7867rem; position: relative; flex-shrink: 0; box-sizing: border-box; }
.role_main_container { position: relative; margin-top: 4.3733rem; padding-left: 1.12rem; padding-right: 1.1467rem; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }
.role_main { width: 5.8933rem; height: 6.0533rem; background: url("../img/common/roles/role_center_bg.webp") no-repeat center/contain; display: flex; justify-content: center; align-items: center; }
.role_main img { width: auto; height: 4rem; position: relative; }
.role_list_sub { display: flex; flex-direction: column; align-items: center; gap: .4133rem; }
.role_list_sub_item { width: 1.4133rem; height: 1.4533rem; }
.role_list_sub_item.active { transform: scale(1.29); }
.role_title { width: 100%; height: 1.64rem; display: flex; justify-content: center; margin-top: .4rem; }
.role_title img { display: block; height: 100%; width: auto; }
.role_description { width: 8.6133rem; margin: .3rem auto 0; font-size: .32rem; font-weight: 500; color: #6b3f00; line-height: .48rem; font-family: "SourceHanSansTWHK", "siyuanhei", sans-serif; display: flex; justify-content: center; }
.role_description__text { text-align: left; }
#role .game_button_next:after, #role .game_button_prev:after { font-size: 0; }
#role .swiper-button-next, #role .swiper-button-prev { --swiper-navigation-sides-offset: 1.4rem; top: auto; bottom: 2.0467rem; width: 1.1467rem; height: auto; right: 1.4rem; transition: all 0.1s ease; }
#role .swiper-button-prev { left: 1.4rem; }
#role .swiper-button-next:active, #role .swiper-button-prev:active { transform: scale(0.9); }
#role .swiper-pagination { left: 50%; bottom: 2.56rem; top: unset; transform: translate(-50%, 0); display: flex; align-items: center; justify-content: space-around; width: 4.42rem; }
#role .swiper-pagination-bullet { background-color: #fff; width: 0.3067rem; height: 0.3067rem; opacity: 1; flex-shrink: 0; }
#role .swiper-pagination-bullet-active { width: 0.5867rem; height: 0.6133rem; background: url("../img/m/common/game/active.webp") no-repeat; background-size: 100%; }
#role .swiper-horizontal > .swiper-pagination-bullets, #role .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 2.3rem; }

/* ============================================================
   第3屏 · 玩法 KV
   ============================================================ */
#game { min-height: 17.7867rem; justify-content: center; align-items: center; }
.game_container_wrapper { width: 100%; max-width: 500px; }
#game .game_container { width: 100%; position: absolute; top: 4.8933rem; height: calc(17.7867rem - 1.3333rem); overflow: hidden; }
#game .swiper-container { width: 100%; position: relative; overflow: visible; }
#game .swiper-slide { width: 6.12rem; height: 11.04rem; position: relative; transition: all .3s ease; box-sizing: border-box; flex-shrink: 0; }
#game .swiper-slide-prev, #game .swiper-slide-next { transform: scale(0.9); }
#game .swiper-slide-prev::after, #game .swiper-slide-next::after { content: ""; display: block; position: absolute; left: .12rem; top: .12rem; right: .14rem; bottom: .12rem; width: 5.86rem; height: 10.8rem; border-radius: .7rem; background-color: rgba(0,0,0,0.3); }
.game_kv { width: 6.12rem; height: 11.04rem; }
.game_kv img, .game_kv .img { width: 100%; height: 100%; }
#game .game_button_next:after, #game .game_button_prev:after { font-size: 0; }
#game .swiper-button-next, #game .swiper-button-prev { top: auto; bottom: -1.5667rem; width: 1.1467rem; height: auto; right: 0.9rem; left: auto; --swiper-navigation-sides-offset: 0.9rem; transition: all 0.1s ease; }
#game .swiper-button-prev { left: 0.9rem; right: auto; }
#game .swiper-button-next:active, #game .swiper-button-prev:active { transform: scale(0.9); }
#game .swiper-pagination { left: 50%; bottom: 2.56rem; top: unset; transform: translate(-50%, 0); display: flex; align-items: center; justify-content: space-around; width: 5.5267rem; }
#game .swiper-pagination-bullet { background-color: #fff; width: 0.3067rem; height: 0.3067rem; opacity: 1; flex-shrink: 0; }
#game .swiper-pagination-bullet-active { width: 0.5867rem; height: 0.6133rem; background: url("../img/m/common/game/active.webp") no-repeat; background-size: 100%; }
#game .swiper-horizontal > .swiper-pagination-bullets, #game .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -1.2667rem; }

/* ============================================================
   页脚（台服）
   ============================================================ */
.footer { padding: 2.28rem 0 0.6667rem; font-family: "SourceHanSansTWHK", sans-serif; background: url("../img/m/common/footer/footer_bg.webp") no-repeat top/cover; position: relative; z-index: 1; height: 9.0667rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.footer-tw { padding: 0.5333rem; padding-top: 2.4667rem; }
.footer-tw .logo { height: 1.3333rem; display: flex; align-items: center; justify-content: center; }
.footer-tw .logo img { display: block; width: auto; height: 1.0667rem; margin: 0 0.2667rem; }
.footer-tw .right { font-size: 0.2133rem; margin-top: 0.2667rem; margin-left: 0.1333rem; }
.footer-tw .right .copyright { color: #fff; line-height: 1.7; text-align: left; white-space: pre-line; }
.footer-tw .right .footer-info { color: #fff; margin-top: 0.2667rem; font-size: 0.2667rem; display: flex; align-items: center; justify-content: center; }
.footer-tw .right .footer-info a { color: #fff; text-decoration: none; }
.footer-tw .right .footer-info span { color: #fff; margin: 0 0.1333rem; }

/* ============================================================
   预约弹窗
   ============================================================ */
#subscribe_modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; }
#subscribe_modal_overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
#subscribe_modal_wrapper { position: absolute; left: 50%; top: 50%; width: 8.96rem; min-height: 6.8rem; transform: translate(-50%, -50%); border-radius: .5333rem; overflow: hidden; background-color: #fffadf; background-image: url("../img/common/subscribe/subscribe_content_bg.webp"); background-size: cover; display: flex; flex-direction: column; }
#subscribe_header { height: 1.0667rem; background-color: #ffca49; display: flex; justify-content: center; align-items: center; position: relative; flex-shrink: 0; }
.subscribe_title { width: auto; height: .6133rem; display: block; }
.subscribe_title_success { width: 3.5333rem; height: .64rem; object-fit: contain; display: none; }
#subscribe_modal.success .subscribe_title { display: none; }
#subscribe_modal.success .subscribe_title_success { display: block; }
.subscribe_close { width: .5467rem; height: .5467rem; position: absolute; top: .2133rem; right: .2667rem; }
#subscribe_content { padding: 0.4533rem 0.4433rem; }
#subscribe_content a { color: inherit; text-decoration: underline; text-underline-offset: .16rem; }
#subscribe_content form { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; justify-content: center; }
#subscribe_modal.success form { display: none; }
.subscribe_platform_wrap { display: flex; justify-content: space-between; align-items: center; font-size: .32rem; font-weight: 500; color: #6b3f00; height: .2533rem; width: 4rem; margin: 0 auto; }
#subscribe_content label { display: flex; align-items: center; gap: .1333rem; }
#subscribe_content label .checkbox { display: none; }
#subscribe_content label .checkbox + .check_icon { width: .2533rem; height: .2533rem; background: url("../img/common/subscribe/unchecked.webp") no-repeat center/contain; }
#subscribe_content label .checkbox:checked + .check_icon { background: url("../img/common/subscribe/checked.webp") no-repeat center/contain; }
#subscribe_content .input { display: block; width: 100%; height: .8533rem; border-radius: 13.3333rem; background-color: #fff; border: .04rem solid #ffe4a2; box-sizing: border-box; padding: 0 .32rem; line-height: .7733rem; color: #6b3f00; font-size: .32rem; }
#subscribe_content .input::placeholder { color: #ada89d; }
.subscribe_code_wrap { width: 100%; display: flex; align-items: stretch; gap: .3733rem; }
.subscribe_code_wrap :first-child { flex: 1; }
.subscribe_code_wrap :last-child { width: 2.6rem; transition: transform 0.2s ease; }
.code_btn { width: 2.6rem; height: .8533rem; background: url("../img/common/subscribe/subcribe_code_btn.webp") no-repeat center/contain; font-family: "mianhuatang"; font-size: .32rem; color: #fff; text-shadow: .0267rem .0267rem 0 #c56e09, -0.0267rem -0.0267rem 0 #c56e09, -0.0267rem .0267rem 0 #c56e09, .0267rem -0.0267rem 0 #c56e09; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0 .2667rem; }
.code_btn > span { display: inline-block; transform: translate(0, -0.125em); font-size: .2267rem; line-height: .24rem; width: 100%; }
.subscribe_submit_wrapper { height: .8533rem; display: flex; flex-direction: column; align-items: center; position: relative; }
.subscribe_submit_wrapper .submit_btn { width: 2.6rem; height: .8533rem; transition: transform 0.2s ease; }
.subscribe_submit_wrapper .submit_btn > img { height: 100%; width: auto; object-fit: contain; }
.subscribe_submit_wrapper .submit_btn:active { transform: scale(0.938); }
.subscribe_protocol_wrapper { font-size: .32rem; font-family: "siyuanhei"; color: #bb8605; }
.subscribe_error_toast { width: 8.2267rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; font-family: "siyuanhei"; text-align: center; font-size: .4rem; line-height: .5333rem; color: #fff; background-image: linear-gradient(90deg, rgba(255,202,73,0), rgba(255,202,73,1) 30%, rgba(255,202,73,1) 70%, rgba(255,202,73,0)); box-sizing: border-box; padding: .1333rem 1.0667rem; }
.subscribe_error_toast > span { transform: translate(0, -0.125em); display: inline-block; word-break: break-word; line-height: 1; }
.subscribe_success { display: none; flex-direction: column; align-items: center; margin-top: -0.4rem; }
#subscribe_modal.success .subscribe_success { display: flex; }
.subscribe_success_text { margin-top: .64rem; font-family: "SourceHanSansTWHK"; font-size: .4933rem; color: #ffc22f; text-align: center; }
.subscribe_success_icons { width: 6.0933rem; height: 3.08rem; margin: .4267rem auto 0; background: url("../img/common/subscribe/subscribe_success_icons.webp") no-repeat center/contain; position: relative; }
.subscribe_success_icons_item { position: absolute; width: 1.2667rem; height: 1.2667rem; left: -0.0333rem; top: 0; }
.subscribe_success_icons_item:nth-of-type(2) { left: 2.4rem; }
.subscribe_success_icons_item:nth-of-type(3) { left: 4.8rem; }
.subscribe_success_icons_item:nth-of-type(4) { top: 1.68rem; }
.subscribe_success_icons_item:nth-of-type(5) { left: 2.4rem; top: 1.68rem; }
.subscribe_success_icons_item:nth-of-type(6) { left: 4.8rem; top: 1.68rem; }

/* ============================================================
   Cookie 提示
   ============================================================ */
.warn_container { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0.4267rem; width: 94%; z-index: 9999; background-color: rgba(30,30,30,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border-radius: 0.2133rem; padding: 0.2667rem 0.3733rem; box-sizing: border-box; font-size: 0.2667rem; line-height: 1.5; }
.warn_content { display: flex; flex-direction: column; align-items: stretch; }
.warn_text { padding-right: 0; }
.warn_text a { color: #ffdf6e; text-decoration: underline; }
.warn_get { margin-top: 0.16rem; text-align: center; }
.warn_get img { width: 3.2rem; height: 0.9rem; }

/* ========== 横屏提示遮罩（用 px，脱离 rem 体系保证横屏下稳定） ========== */
#landscape_tip { display: none; }
.landscape_tip_inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.landscape_tip_icon { width: 66px; height: 110px; display: flex; align-items: center; justify-content: center; }
.landscape_tip_svg { width: 100%; height: 100%; display: block; transform-origin: center; animation: ls_tip_flip 2.6s ease-in-out infinite; }
.landscape_tip_text { margin-top: 26px; max-width: 78vw; font-size: 16px; line-height: 1.6; color: #fff; }
@keyframes ls_tip_flip { 0%, 28% { transform: rotate(0deg); } 52%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media screen and (orientation: landscape) and (max-height: 500px) {
  #landscape_tip { display: flex; position: fixed; inset: 0; z-index: 100000; background: #101010; align-items: center; justify-content: center; }
  html, body { overflow: hidden !important; }
}