@charset "utf-8";
/* ============================================================
   塔塔冒险队 台湾官网 · PC （1920 固定画布，复刻自海外站）
   ============================================================ */

/* ---- reset ---- */
* { 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 { display: block; border: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  --primary: #ffa51d;
  cursor: url("../img/common/consult/cursor.webp") 4 4, auto;
}

/* ---- 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-huhmlet { font-family: "huhmlet"; }
@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"; }

/* ============================================================
   Layer 0：缩放骨架（1920 固定画布 + 2500 overflow ground）
   ============================================================ */
#pc_container {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #000 url("../img/common/home/overflow_bg.webp") no-repeat center/cover;
}
#pc_container__wrap {
  aspect-ratio: 16 / 9;
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  --designW: 1920px;
  --designH: 1080px;
  --s: min(100vw / var(--designW), 100vh / var(--designH));
}
#pc_container__ground {
  width: 2500px;
  height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--s)) !important;
  overflow: hidden;
}
#pc_container__content {
  width: var(--designW);
  height: var(--designH);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
}
.pc_continer_overflow_bg,
.consult_wrapper {
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  transform: translate(-50%, 0);
  max-width: calc(100vw / var(--s));
  pointer-events: none;
}
.consult_wrapper { z-index: 99; }
.global_bg { display: block !important; }
.global_bg > * { pointer-events: all; }
.text-primary { color: var(--primary); }

/* ============================================================
   Header
   ============================================================ */
#header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  padding: 0 100px;
  padding-right: 60px;
  box-sizing: border-box;
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  z-index: 10;
}
#header .pc_continer_overflow_bg {
  background: url("../img/common/header/header_bg.webp") no-repeat;
  background-size: 2500px 84px;
  background-position: center bottom 6px;
  background-color: #ffa800;
  height: 100%;
}
#header_nav_wrapper { display: flex; align-items: center; gap: 64px; position: relative; }
#header__logo { width: 139px; height: 84px; transform: translateY(6px); }
#header__logo img { width: 100%; height: auto; }
#header_nav { display: flex; gap: 60px; align-items: center; }
.header_nav__item {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; transition: all 0.2s ease; position: relative; cursor: pointer;
}
.header_nav__item img { height: 31px; width: auto; opacity: 0; }
.header_nav__item.active img { height: 31px; }
.header_nav__item:not(.active) img:nth-of-type(1) { display: block; opacity: 1; }
.header_nav__item img:nth-of-type(2) {
  position: absolute; left: 50%; top: 50%; height: 42px; transform: translate(-50%, -50%);
}
.header_nav__item.active img:nth-of-type(2) { display: block; opacity: 1; }
.header_nav__item:not(.active):hover { transform: scale(1.1); }

#header_extra { display: flex; gap: 40px; align-items: center; }
#header_extra > div {
  width: 35px; height: 35px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; position: relative; cursor: pointer;
}
#header_extra > div > img { height: 100%; width: auto; }
#header_extra #header_subscribe {
  width: 221px; height: 60px;
  background: url("../img/zh_TW/header/subscribe_btn.webp") no-repeat center/contain;
  transition: all 0.1s ease;
  display: none;
}
#header_extra #header_subscribe:active { transform: scale(0.92); }

#header_lang_pop {
  position: absolute; top: 100%; left: 50%; margin-top: 10px;
  white-space: nowrap; z-index: 999; display: none; transform: translate(-50%, 11px);
}
#header_lang_pop.show { display: block; }
#header_lang_pop > div {
  background-color: rgba(26, 19, 23, 0.8);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 12px 23px 30px 15px; border-bottom-left-radius: 10px;
}
#header_lang_pop a {
  display: block; padding: 16px 12px 12px; color: var(--primary);
  font-size: 18px; text-align: center; transition: all 0.3s ease;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}
#header_lang_pop a:hover { color: #fff; }
#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; }
.hidden_store { display: none; }

/* ============================================================
   屏切换容器
   ============================================================ */
#home, #roles, #game {
  height: 1080px !important;
  padding-top: 90px;
  box-sizing: border-box;
  display: none;
  position: relative;
}
#home { display: block; padding-top: 0; }
#footer { display: block !important; }

/* ============================================================
   第1屏 · 首页
   ============================================================ */
#home .pc_continer_overflow_bg { position: relative; }
#section_wrapper_home_bg_video {
  position: absolute; left: 50%; top: 0; width: 2500px; height: auto;
  object-fit: cover; z-index: 0; transform: translateX(-50%);
}
#home .slogan {
  position: absolute; bottom: 240px; left: 50%; z-index: 10;
  transform: translate(-50%, 0);
  width: 880px; height: auto;
  margin-bottom: -40px;
  background-image: url("../img/zh_TW/home/slogan.webp");
  background-size: 100% auto; background-repeat: no-repeat;
  aspect-ratio: 595/261;
}
#subscribe {
  position: absolute; bottom: 40px; left: 50%; z-index: 10;
  transform: translate(-50%, 0); margin-left: -12px;
  width: 395px; height: 110px;
  background: url("../img/zh_TW/header/subscribe_btn.webp"); background-size: contain;
  background-repeat: no-repeat; cursor: pointer; transition: all 0.1s ease;
  display: none;
}
#subscribe:active { transform: translate(-50%, 0) scale(0.92); }
#download {
  position: absolute; bottom: 60px; left: 50%; z-index: 10;
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 20px;
  padding: 14px 18px; box-sizing: border-box;
  background-color: #fffdf5;
  background-image: radial-gradient(#fbe6bd 2.2px, transparent 2.4px);
  background-size: 16px 16px;
  border: 3px solid #fbe4a4;
  border-radius: 26px;
}
#download a { display: block; cursor: pointer; transition: transform 0.15s ease; }
#download a:active { transform: scale(0.94); }
#download #pay_icon img { display: block; width: 124px; height: 124px; border-radius: 18px; }
#download .download_btns { display: flex; flex-direction: column; gap: 14px; }
#download .download_btns a img { display: block; width: 190px; height: auto; }
#download .download_qr img { display: block; width: 118px; height: 118px; }

/* ============================================================
   第2屏 · 角色
   ============================================================ */
#section_roles, #section_roles_content { width: 100%; height: 100%; position: relative; }
#section_roles_ani { position: relative; }
#section_roles .pc_continer_overflow_bg {
  background: url("../img/common/roles/section_roles_bg.webp") no-repeat center/cover;
}
#role_name { height: 181px; position: absolute; left: 76px; top: 99px; }
#role_name img { height: 100%; width: auto; }
#role_description {
  font-size: 24px; font-weight: 500; color: #6b3f00; line-height: 36px;
  width: 446px; position: absolute; left: 148px; top: 286px;
  font-family: "SourceHanSansTWHK", "siyuanhei", sans-serif;
}
#role_list_sub {
  position: absolute; top: 151px; right: 128px; display: flex; gap: 56px; align-items: center;
}
.role_list_sub_item { width: 118px; height: 121px; cursor: pointer; }
.role_list_sub_item img { width: 100%; height: auto; }
.role_list_sub_item.active { transform: scale(1.29); }
#role_main {
  width: 609px; height: 625px;
  background: url("../img/common/roles/role_center_bg.webp") no-repeat center/contain;
  position: absolute; top: 252px; left: 686px; z-index: 11;
}
#role_main > img {
  width: 702px; height: 553px; position: absolute; max-width: 100%; max-height: 100%;
  top: 20px; left: -20px; object-fit: contain;
}
#role_list { position: absolute; top: 591px; left: 120px; right: 113px; z-index: 10; height: 226px; }
.role_list_item { width: 264px; height: 226px; position: absolute; top: 0; transition: all 0.3s ease; cursor: pointer; }
.role_list_item img { width: 100%; height: auto; }
.role_list_item:active { transform: scale(0.9); }
.role_list_item:nth-of-type(1) { left: 0; }
.role_list_item:nth-of-type(2) { left: 241px; }
.role_list_item:nth-of-type(3) { left: 1185px; }
.role_list_item:nth-of-type(4) { left: 1425px; }

/* ============================================================
   第3屏 · 玩法 KV 轮播
   ============================================================ */
#section_game { width: 100%; height: 100%; position: absolute; top: 0; }
#section_game .pc_continer_overflow_bg {
  background: url("../img/common/game/game_bg.webp") no-repeat center/cover;
}
#game_swiper {
  height: 707px; position: absolute; left: 50%; top: 199px;
  transform: translate(-50%, 0); box-sizing: border-box; width: calc(439px * 3);
}
.game_kv {
  width: 392px !important; height: 707px; position: relative;
}
#game_swiper .swiper-slide {
  width: 439px !important; display: flex; justify-content: center; align-items: center;
  transition: 300ms; transform: scale(0.92); opacity: 0;
}
#game_swiper .swiper-slide-prev { transform: translateY(8px) scale(0.85) rotate(-5deg); opacity: 1; }
#game_swiper .swiper-slide-next { transform: translateY(8px) scale(0.85) rotate(5deg); opacity: 1; }
#game_swiper .swiper-slide-active { transform: scale(1); opacity: 1; }
.game_kv img, .game_kv .img { width: 392px; height: 707px; position: absolute; top: 0; left: 0; background-size: cover; }
.swiper-slide-next .game_kv::after,
.swiper-slide-prev .game_kv::after {
  content: ""; display: block; position: absolute;
  top: 33px; left: 5px; right: 0; bottom: 0;
  width: 382px; height: 669px;
  background-color: rgba(0, 0, 0, 0.3); border-radius: 44px;
}
#game_swiper .game_button_next,
#game_swiper .game_button_prev { width: 81px; height: 86px; margin-top: 0; transition: all 0.3s ease; }
#game_swiper .game_button_next:active,
#game_swiper .game_button_prev:active { transform: scale(0.85); }
#game_swiper .game_button_next { right: -114px; background: url("../img/common/game/right.webp") no-repeat center/80px 84px; }
#game_swiper .game_button_prev { left: -114px; background: url("../img/common/game/left.webp") no-repeat center/80px 84px; }
#game_swiper .game_button_next:hover { background: url("../img/common/game/right_hover.webp") no-repeat center/80px 84px; }
#game_swiper .game_button_prev:hover { background: url("../img/common/game/left_hover.webp") no-repeat center/80px 84px; }
#game_swiper .game_button_next:after, #game_swiper .game_button_prev:after { font-size: 0; }
#game_swiper .swiper-pagination {
  left: 50%; bottom: 60px; top: unset; transform: translate(-50%, 0);
  display: flex; align-items: center; justify-content: center;
}
#game_swiper .swiper-pagination-bullet { background-color: #fff; width: 16px; height: 16px; margin-right: 32px; opacity: 1; }
#game_swiper .swiper-pagination-bullet-active { width: 30px; height: 31px; background: url("../img/common/game/active.webp") no-repeat; }
#game_swiper .swiper-horizontal > .swiper-pagination-bullets,
#game_swiper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -122px; }

/* ============================================================
   右侧社交 consult
   ============================================================ */
/* 社交面板：奶油色云朵底框（社媒底框）+ 3 个橙色图标；收起为奶油小页签（对齐官网 ref-1/ref-3） */
.consult {
  position: absolute; right: 0; top: 50%; z-index: 10;
  transform: translate(100%, -50%); width: 113px; height: 353px;
  background: url("../img/common/consult/social_bg.webp") no-repeat center/contain;
  transition: all 0.3s ease; margin-top: -25px;
}
.consult.show { transform: translate(0, -50%); }
.consult_item {
  position: absolute; width: 44px; height: 44px; left: 56%; transform: translateX(-50%);
  margin-left: 15px; margin-top: 20px;
  display: block; background-repeat: no-repeat; background-position: center;
}
.consult_item:nth-of-type(1) { top: 52px; background-image: url("../img/common/consult/social_fb.png"); background-size: 39px 38px; }
.consult_item:nth-of-type(1):hover { background-image: url("../img/common/consult/social_fb_a.png"); }
.consult_item:nth-of-type(2) { top: 138px; background-image: url("../img/common/consult/social_yt.png"); background-size: 39px 39px; }
.consult_item:nth-of-type(2):hover { background-image: url("../img/common/consult/social_yt_a.png"); }
.consult_item:nth-of-type(3) { top: 224px; background-image: url("../img/common/consult/social_baha.png"); background-size: 44px 34px; }
.consult_item:nth-of-type(3):hover { background-image: url("../img/common/consult/social_baha_a.png"); }
/* 展开态收起箭头 ▶：面板左侧凹口、垂直居中（官网原版 20×23 + hover） */
.consult_btn_close {
  width: 40px; height: 44px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  background: url("../img/common/consult/social_arrow.png") no-repeat 20px/20px 23px; cursor: pointer;
}
.consult_btn_close:hover { background: url("../img/common/consult/social_arrow_a.png") no-repeat 20px/20px 23px; }
/* 收缩态：官网「更多資訊」奶油页签（含 ◀ 箭头），点击展开 */
.consult_close {
  position: absolute; right: 0; top: 50%; z-index: 10; margin-top: -25px;
  transform: translate(100%, -50%); width: 66px; height: 144px;
  background: url("../img/zh_TW/consult/consult_close.webp") no-repeat center/contain;
  transition: all 0.3s ease; cursor: pointer;
}
.consult_close:hover { background-image: url("../img/zh_TW/consult/consult_close_active.webp"); }
.consult_close.show { transform: translate(0, -50%); }

/* ============================================================
   星形转场遮罩
   ============================================================ */
.star-mask {
  position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 999;
  pointer-events: none; transform: translate(-50%, -50%);
}

/* ============================================================
   页脚（台服）
   ============================================================ */
#footer { position: relative; color: #fff; background-color: #000; padding: 50px 0 70px; }
#footer .pc_continer_overflow_bg { background-color: #000; }
.footer { padding: 14px; position: relative; z-index: 100; margin: 0 auto; }
.footer span, .footer div { font-size: 14.5px; color: #999999; }
.footer-tw { display: flex; justify-content: center; align-items: center; }
.footer-tw .logo { height: 100px; display: flex; align-items: center; }
.footer-tw .logo img { display: block; width: auto; height: 80px; margin: 0 20px; }
.footer-tw .right { width: 745px; margin-left: 30px; font-size: 16px; text-align: left; }
.footer-tw .right .copyright { color: #999999; text-align: left; margin-top: 0; line-height: 1.7; white-space: pre-line; }
.footer-tw .right .footer-info { color: #999999; margin-top: 20px; text-align: left; display: flex; justify-content: flex-start; align-items: center; }
.footer-tw .right .footer-info a { color: #999999; text-decoration: none; }
.footer-tw .right .footer-info span { color: #999999; margin: 0 10px; }

/* ============================================================
   预约弹窗
   ============================================================ */
#subscribe_modal { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; }
#subscribe_modal_overlay { position: absolute; 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: 832px; min-height: 510px;
  transform: translate(-50%, -50%); border-radius: 40px; 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: 80px; background-color: #ffca49; display: flex; justify-content: center; align-items: center; position: relative; flex-shrink: 0; }
.subscribe_title { width: auto; height: 46px; display: block; }
.subscribe_title_success { width: auto; height: 48px; display: none; }
#subscribe_modal.success .subscribe_title { display: none; }
#subscribe_modal.success .subscribe_title_success { display: block; }
.subscribe_close { width: 41px; height: 41px; position: absolute; top: 16px; right: 20px; cursor: pointer; }
#subscribe_content { padding: 34px 64px; }
#subscribe_content a { color: inherit; text-decoration: underline; text-underline-offset: 12px; }
#subscribe_content form { display: flex; flex-direction: column; gap: 30px; 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: 24px; font-weight: 500; color: #6b3f00; height: 19px; width: 374px; margin: 0 auto; }
#subscribe_content label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
#subscribe_content label .checkbox { display: none; }
#subscribe_content label .checkbox + .check_icon { width: 19px; height: 19px; 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: 64px; border-radius: 1000px; background-color: #fff; border: 3px solid #ffe4a2; box-sizing: border-box; padding: 0 24px; line-height: 58px; color: #6b3f00; font-size: 24px; }
#subscribe_content .input::placeholder { color: #ada89d; }
.subscribe_code_wrap { width: 100%; display: flex; align-items: stretch; gap: 28px; }
.subscribe_code_wrap :first-child { flex: 1; }
.subscribe_code_wrap :last-child { width: 195px; transition: transform 0.2s ease; }
.subscribe_code_wrap :last-child:active { transform: scale(0.938); }
.code_btn {
  width: 195px; height: 64px; background: url("../img/common/subscribe/subcribe_code_btn.webp"); background-size: contain;
  font-family: "mianhuatang"; font-size: 24px; color: #fff;
  text-shadow: -2px 0px 0 #c56e09, -2px 2px 0 #c56e09, 0px 2px 0 #c56e09, 2px 2px 0 #c56e09, 2px 0px 0 #c56e09, 2px -2px 0 #c56e09, 0px -2px 0 #c56e09, -2px -2px 0 #c56e09;
  text-align: center; padding: 0 20px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; cursor: pointer;
}
.code_btn > span { display: inline-block; transform: translate(0, -0.125em); font-size: 17px; line-height: 18px; width: 100%; }
.subscribe_submit_wrapper { height: 64px; display: flex; flex-direction: column; align-items: center; position: relative; }
.subscribe_submit_wrapper .submit_btn { min-width: 195px; height: 64px; transition: transform 0.2s ease; cursor: pointer; }
.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: 24px; font-family: "siyuanhei"; color: #bb8605; }
.subscribe_error_toast {
  width: 617px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;
  font-family: "siyuanhei"; text-align: center; font-size: 30px; line-height: 40px; 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: 10px 80px;
}
.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; }
#subscribe_modal.success .subscribe_success { display: flex; }
.subscribe_success_text { margin-top: 14px; font-family: "SourceHanSansTWHK"; font-size: 37px; color: #ffc22f; text-align: center; }
.subscribe_success_icons {
  width: 457px; height: 231px; margin: 35px auto 0;
  background: url("../img/common/subscribe/subscribe_success_icons.webp") no-repeat center/contain; position: relative;
}
.subscribe_success_icons_item { position: absolute; width: 95px; height: 95px; left: -3px; top: 0; }
.subscribe_success_icons_item:nth-of-type(2) { left: 180px; }
.subscribe_success_icons_item:nth-of-type(3) { left: 360px; }
.subscribe_success_icons_item:nth-of-type(4) { top: 126px; }
.subscribe_success_icons_item:nth-of-type(5) { left: 180px; top: 126px; }
.subscribe_success_icons_item:nth-of-type(6) { left: 360px; top: 126px; }

/* ============================================================
   Cookie 提示
   ============================================================ */
.warn_container {
  display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 30px;
  width: 94%; max-width: 1800px; z-index: 9999;
  background-color: rgba(30, 30, 30, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; border-radius: 10px; padding: 12px 24px; box-sizing: border-box; font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.5;
}
.warn_content { display: flex; align-items: center; justify-content: space-between; }
.warn_text { flex: 1; padding-right: 20px; }
.warn_text a { color: #ffdf6e; text-decoration: underline; text-underline-offset: 3px; }
.warn_get { cursor: pointer; }
.warn_get img { width: 161px; height: 45px; }