/*-----------------------------------------------
    卡利茲傳說《暢享新世界》
    桌機前景以 1920 x 1080 舞台縮放置中（zoom，避免 Chrome 縮圖發糊）；背景獨立 cover 鋪滿視窗
    漂浮花、葉座標之後再補
-----------------------------------------------*/

:root { --fit: 1; --brown: #5c3a18; --gold: #f6cd3f; --cream: #fff8ea; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.seo h1,
.seo h2,
.seo p { margin: 0; }

button { cursor: pointer; }

/* 單色按鈕與導覽膠囊。hover 動態之後再補 */
.btn-reserve { display: block; width: 100%; height: 80px; border: 0; border-radius: 999px; background: var(--gold); color: var(--brown); font-size: 28px; font-weight: 900; letter-spacing: 0.12em; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.btn-reserve:hover { background: #fe4d4d; box-shadow: 0 6px 0 #ff2222; transform: translateY(-2px); color: #ffffff; }

.txt-link { padding: 0; border: 0; background: none; color: #2f7de1; font-size: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/*-----------------------------------------------
    固定層
-----------------------------------------------*/
.hud { position: fixed; z-index: 40; left: 50%; top: 50%; width: 1920px; height: 1080px; margin-left: -960px; margin-top: -550px; transform: scale(var(--fit)); transform-origin: center center; pointer-events: none; }

.hud a,
.hud button { pointer-events: auto; }

.gnb { position: absolute; top: 0; margin-top: -10px; left: 50%; width: 920px; margin-left: -450px; display: flex; align-items: center; justify-content: center; gap: 6px; transform: scale(calc(1 / var(--fit))); transform-origin: center top; }
.gnb::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 50%; height: 80px; margin-top: -38px; background: #fff6d2; border-radius: 9999px; pointer-events: none; }

.gnb ul { position: relative; z-index: 1; display: flex; align-items: center; gap:3px; flex: 0 0 auto; margin-top: 10px; }
.gnb-sun { position: relative; z-index: 1; width: auto; height: auto; display: block; flex: 0 0 auto;opacity: 0;  }

.gnb a { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; height: 54px; padding: 0 14px; border-radius: 999px; background: var(--cream); color: var(--brown); border: 3px solid #ffc955; line-height: 1; white-space: nowrap; transition: background-color 0.3s ease; }

.gnb a span { font-size: 19px; font-weight: 700; }

.gnb li:nth-child(1) a { width: 180px; }
.gnb li:nth-child(2) a { width: 200px; }
.gnb li:nth-child(3) a { width: 180px; }
.gnb li:nth-child(4) a { width: 154px; }
.gnb li:nth-child(5) a { width: 150px; }

.gnb a.is-active , .gnb a:hover { background: var(--brown); border-color: var(--brown); color: #ffc955; border: 3px solid #ffc955; }

.nav-ico { display: block; background-image: url("../images/nav_icon.png"); background-repeat: no-repeat; background-size: 148px 60px; height: 30px; flex: 0 0 auto; }
.nav-ico-0 { width: 30px; background-position: 0 0; }
.nav-ico-1 { width: 28px; background-position: -30px 0; }
.nav-ico-2 { width: 30px; background-position: -59px 0; }
.nav-ico-3 { width: 29px; background-position: -88px 0; }
.nav-ico-4 { width: 30px; background-position: -117px 0; }

.gnb a.is-active .nav-ico ,.gnb a:hover .nav-ico {
	background-position-y: -30px;
}

.socials { position: absolute; top: 24px; right: calc(960px - 50vw / var(--fit) + 50px); display: flex; gap: 15px; }

.social-avatar,
.social-fb { display: block; height: 60px; background: url("../images/social_btn.png") no-repeat; background-size:134px 60px; }

.social-avatar { width: 60px; background-position: 0 0; }
.social-fb { width: 60px; background-position: -75px 0; }

.top-btn { position: absolute; right: calc(996px - 50vw / var(--fit)); bottom: 28px; width: 101px; padding: 0; background: none; }

.top-btn img { width: 100%; height: auto; display: block; }
/*-----------------------------------------------
    fullPage 舞台
-----------------------------------------------*/
.section { overflow: hidden;background: #ffffff; }

.section > .bg {
	position: absolute; left: 0; top:0;   z-index: 0; width: 100%; height: 100%;  min-width: 0; min-height: 0; object-fit: cover; object-position: top center; pointer-events: none;
}

.stage { position: absolute; left: 50%; top: 50%; z-index: 1; width: 1920px; height: 1080px; margin-left: -960px; margin-top: -540px; zoom: var(--fit); }
.stage img { position: absolute; display: block; height: auto; user-select: none; pointer-events: none; }



/*-----------------------------------------------
    p00 主 KV
-----------------------------------------------*/
.hero-logo { left: calc(960px + (0px - 50vw - 10px) / var(--fit)); top: calc(540px + (0px - 50vh - 30px) / var(--fit)); width:367px; z-index: 5; }
.hero-fish { left: 1590px; top: 120px; width: 237px; z-index: 3; }
.hero-native { left: 20px; top: 470px; width: 173px; z-index: 3; }
.hero-rabbit { left: 1700px; top: 590px; width: 192px; z-index: 3; }
.hero-cat { left: 30px; top: 640px; width: 129px; z-index: 3; }
.hero-char { left: 250px; top:50px; width: 1349px; z-index: 4; }
.hero-slogan { left: 430px; top: 670px; width: 1050px; z-index: 5; }

.hero-ad { position: absolute; left: 200px; top: 700px; width: 220px; height: 258px; z-index: 6; }
.hero-ad img { pointer-events: none; }
.hero-ad .ad-bg { left: 8px; top: 48px; width: 210px; }
.hero-ad .ad-bird { left: 28px; top: 95px; width: 178px; }
.hero-ad .ad-text { left: 20px; top: 30px; width: 152px; }

/*-----------------------------------------------
    p01 新服預約
-----------------------------------------------*/
.reg-reward { left: 90px; top: 250px; width: 420px; z-index: 2; }
.reg-char { left: 1300px; top: 320px; width: 516px; z-index: 2; }
.reg-title { left: 555px; top: 150px; width: 750px; z-index: 4; }
.reg-sub { left: 550px; top: 770px; width: 803px; z-index: 3; }

.p01 .reg-panel { position: absolute; left: 620px; top: 310px; z-index: 3; width: 650px; height: 520px; padding: 54px 42px 28px; background: url("../images/register_box.png") center / 100% 100% no-repeat; }

.reg-form { height:95%; padding-top: 80px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }

.p01 .reg-form .btn-reserve { height: 90px; flex-shrink: 0; font-size: 28pt; font-weight: 900; }
.reg-form input,
.reg-form select { height: 80px; border: 5px solid #88cf8b; border-radius: 10px; background: #fff; color: var(--brown); font-size: 18pt; padding: 0 10px; }
.reg-form input::placeholder { color: #b3aa9e; }
.reg-form .js-phone,
.reg-form input[type="email"],
.reg-form select { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.reg-form .js-phone:hover,
.reg-form input[type="email"]:hover,
.reg-form select:hover { border-color: #ff8d74; box-shadow: 0 0 0 3px rgba(236, 133, 133, 0.28); }

.reg-line { display: flex; gap: 10px; }
.reg-line .reg-select { position: relative; width: 132px; flex: 0 0 auto; }
.reg-line .reg-select select { width: 100%; appearance: none; padding-right: 28px; }
.reg-line .reg-select::after { content: ""; position: absolute; z-index: 1; right: 20px; top: 50%; width: 0; height: 0; margin-top: -4px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid var(--brown); pointer-events: none; }
.reg-line .js-phone { flex: 1; min-width: 0; }

.reg-agree {display: flex; align-items: center; gap: 8px; color: #6d5838; font-size: 18pt; line-height: 1.4; word-break: normal;padding-left: 50px; }
.reg-agree span{ font-size: 18pt; color: #606e60;}
.reg-agree .txt-link { font-size: 18pt; color: #2dc266eb;}
.reg-agree input { width: 25px; height: 25px; flex: 0 0 auto; accent-color: #e0a020; }


/*-----------------------------------------------
    p02 福利輪播
-----------------------------------------------*/
.benefit-lion { left: 0px; top: 60px; width: 271px; z-index: 4;opacity: 0; }
.benefit-dog { right: 30px; top: 0px; width: 301px; z-index: 4; }
.benefit-title { left: 870px; top: 120px; width: 657px; z-index: 4; }
.benefit-char { left: 0px; top: 110px; width: 665px; z-index: 5; }

.benefit-board { position: absolute; left: 670px; top: 300px; width:1080px; height: 570px; z-index: 6; background: url("../images/benefit_cardbg.png") center / 100% 100% no-repeat; }

.benefit-tabs { position: absolute; left: 36px; right: 36px; top: -8px; height: 58px; z-index: 2; }
.benefit-tabs-bg { position: absolute; left: 3%; right: 0; bottom: 6px; width: 95%; height: 53px; border-radius: 0 0 40px 40px; background: #7c9f53; }
.p02 .benefit-tabs-bg { top: 16px; bottom: auto; }

.benefit-tabs-list { position: relative; z-index: 1; display: flex; align-items: flex-end; height: 100%; width: 90%; left: 5%; gap: 4px; }
.benefit-tab { flex: 1; height: 54px; border: 0; background: transparent; color: #e3ffd2; font-size: 28px; font-weight: 800; line-height: 1; transition: background-color 0.3s ease, color 0.3s ease; }
.benefit-tab.is-on { height: 54px; background: #f15a2a; color: #fff; }
.benefit-tab:hover { background: #f15a2a; color: #fff6e8; }
.benefit-tab.is-on:hover { background: #ff7c5c; color: #ffffff; }

.benefit-slides { position: absolute; left: 70px; right: 70px; top: 62px; bottom: 48px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.benefit-slides.is-dragging { cursor: grabbing; }
.benefit-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.benefit-slide.is-move { transition: transform 0.45s ease; }
.benefit-slide.is-far { visibility: hidden; }
.benefit-slides.is-dragging .benefit-slide { transition: none; }
.benefit-slide img { position: static; max-width: 100%; max-height: 100%; width: auto; height: auto; pointer-events: none; }
.benefit-slide .benefit-card-m { display: none; }

.benefit-arrow { position: absolute; top: 50%; width: 64px; height: 64px; margin-top: -32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	z-index: 5;box-shadow: 0 0 15px rgba(72, 135, 46, 0.8); background: #fff6e8;  transition: background-color 0.2s ease, transform 0.2s ease; }
.benefit-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; 
	border-right: 7px solid var(--brown); border-bottom: 7px solid var(--brown);  transition: border-color 0.2s ease; }
.benefit-prev { left: -20px; }
.benefit-prev::before { transform: translate(-18px, -18px) rotate(135deg);transform-origin: 12px 15px; }
.benefit-prev:hover { background:#ff7c5c; transform: translateX(-6px); }
.benefit-prev:hover::before { border-color: #ffffff; }
.benefit-next { right: -20px; }
.benefit-next::before { transform: translate(-18px, -18px) rotate(-45deg);transform-origin: 22px 7px; }
.benefit-next:hover { background: #ff7c5c; transform: translateX(6px); }
.benefit-next:hover::before { border-color: #ffffff; }

.benefit-dots { position: absolute; left: 4%; right: 0; bottom: 70px; display: flex; justify-content: center; gap: 20px; z-index: 3; }
.benefit-dot { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #d5e09a; }
.benefit-dot.is-on { background: #f0a31a; }

/*-----------------------------------------------
    p03 獵團召回
-----------------------------------------------*/
.recall-char { left: -130px; bottom: 0; width: 806px; z-index: 2; }
.recall-title { left: 400px; top: 50px; width: 800px; z-index: 2; }
.recall-board { left: 1100px; top: 180px; width: 543px; z-index: 3; }
.stage .recall-board-m { display: none; }
.recall-board-char { left: 1480px; top:50px; width: 140px; z-index: 2; }
.recall-reward { left: 500px; top: 520px; width: 1096px; z-index: 3; }

.recall-btn { position: absolute; left: 830px; top: 810px; z-index: 5; display: flex; align-items: center; justify-content: center;
	 width: 400px; height: 85px; border-radius: 999px; background: #d92b09; color: hsl(0, 0%, 100%); font-size: 28px; font-weight: 900; 
	 letter-spacing: 0.06em; line-height: 1; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.recall-btn::after { content: ""; position: absolute; right: 48px; top: 50%; width: 0; height: 0; margin-top: -11px;border-top: 11px solid transparent;
	  border-bottom: 11px solid transparent; border-left: 18px solid #fff200; transition: transform 0.2s ease; }

.recall-btn:hover { background: #fc3200; box-shadow: 0 6px 0 #711500; transform: translateY(-3px); color: #ffffff; }
.recall-btn:hover::after { transform: translateX(10px); }

.p03 .recall-front { left: 50%; bottom: 0; width: calc(100vw / var(--fit)); height: auto; margin-left: calc(-50vw / var(--fit)); z-index: 4; object-fit: cover; object-position: bottom center; pointer-events: none; }


/*-----------------------------------------------
    p04 好友邀請
-----------------------------------------------*/
.invite-title { left: 420px; top: 150px; width: 1037px; z-index: 2; }
.invite-rabbit { left: 40px; top: 150px; width: 327px; z-index: 2; }
.invite-cat { left: 280px; top: 150px; width: 178px; z-index: 4; opacity: 0; }
.invite-dragon { right: 100px; top: 360px; width: 300px; z-index: 2; }
.invite-ston { right: 390px; top: 210px; width: 116px; z-index: 3; opacity: 0;}
.invite-reward { left: 350px; top: 330px; width: 1207px; z-index: 2; }

.invite-btn { position: absolute; left: 770px; top: 615px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 380px; height: 81px; border-radius: 999px; background: #d92b09; color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 0.06em; line-height: 1; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.invite-btn::after { content: ""; position: absolute; right: 50px; top: 50%; width: 0; height: 0; margin-top: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid #fff200; transition: transform 0.2s ease; }
.invite-btn:hover { background: #fc3200; box-shadow: 0 6px 0 #711500; transform: translateY(-3px); color: #ffffff; }
.invite-btn:hover::after { transform: translateX(8px); }
/* 屏蔽點擊事件 */
.invite-btn.disabled {cursor: not-allowed;background-color:#414141 ;pointer-events: none;font-weight: 200 !important; }
.invite-btn.disabled::after {display: none !important; /* 強制隱藏偽元素 */}

.invite-kbn { left: 350px; top: 730px; width: 1212px; z-index: 5; }
.invite-kbtn { position: absolute; left: 1300px; top: 780px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 200px; height: 62px; border-radius: 999px; background: #d92b09; color: #ffffff; font-size: 22px; font-weight: 900; letter-spacing: 0.06em; line-height: 1; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.invite-kbtn::after { content: ""; position: absolute; right: 25px; top: 50%; width: 0; height: 0; margin-top: -7px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #fff200; transition: transform 0.2s ease; }
.invite-kbtn:hover { background: #fc3200; box-shadow: 0 6px 0 #711500; transform: translateY(-3px); color: #ffffff; }
.invite-kbtn:hover::after { transform: translateX(6px); }

/*-----------------------------------------------
    p05 老朋友歡迎禮
-----------------------------------------------*/
.friend-title { left: 70px; top: 150px; width: 760px; z-index: 2; }
.friend-wing { left: 90px; top: 330px; width: 672px; z-index: 2; }

.friend-char-l { left: 630px; top: 400px; width: 502px; z-index: 3;opacity: 0; }
.friend-char-r { right: 120px; top: 390px; width: 582px; z-index: 3;opacity: 0; }
.friend-bomb { right: 250px; top: 660px;width: 209px; z-index: 5; }

.friend-content { left: 900px; top: 170px; width: 646px; z-index: 4; }
.friend-btn { position: absolute; left: 1030px; top: 760px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 400px; height: 60px; border-radius: 999px; background: #d92b09; color: #ffffff; font-size: 24px; font-weight: 900; letter-spacing: 0.06em; line-height: 1; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.friend-btn::after { content: ""; position: absolute; right: 95px; top: 50%; width: 0; height: 0; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff200; transition: transform 0.2s ease; }
.friend-btn:hover { background: #fc3200; box-shadow: 0 6px 0 #711500; transform: translateY(-3px); color: #ffffff; }
.friend-btn:hover::after { transform: translateX(8px); }

/*-----------------------------------------------
    版權
-----------------------------------------------*/
.copyright { overflow: visible; background: #fff; text-align: center; padding: 28px 20px 36px; }
.copyright img { position: static; width: min(1520px, 94%); height: auto; margin: 0 auto; }
/*-----------------------------------------------
    彈窗
-----------------------------------------------*/
.pop { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; }
#pop-note,
#pop-alert { z-index: 90; }
#pop_ab { display: none; }
html.is-pop-lock,
html.is-pop-lock body { overflow: hidden !important; }

.pop.is-open,.pop.is-closing { visibility: visible; }
.pop.is-open { pointer-events: auto; }
.pop-mask { position: absolute; inset: 0; background: rgba(20, 24, 20, 0.873); opacity: 0; transition: opacity 0.28s ease; }
.pop.is-open .pop-mask { opacity: 1; }

.pop-box { position: absolute; left: 50%; top: 50%; color: #333; word-break: normal; opacity: 0; 
	transform: translate(-50%, -50%) scale(0.92); transition: transform 0.22s ease, opacity 0.22s ease; }
.pop.is-open .pop-box { opacity: 1; transform: translate(-50%, -50%) scale(1); 
	transition: transform 0.34s cubic-bezier(0.18, 1.15, 0.32, 1), opacity 0.28s ease; }

.pop-box-lg { width: min(905px, 94vw); aspect-ratio: 905 / 670; background: url("../images/pop_bg01.png") center / 100% 100% no-repeat; }
.pop-box-lg h2 { position: absolute; left: 0; right: 0; top: 6%; margin: 0; text-align: center; color: #5d9a61; font-size: 40px; font-weight: 900; }


.pop-box-sm { width: min(585px, 90vw); aspect-ratio: 585 / 463; background: url("../images/pop_bg02.png") center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; }
.pop-box-sm p { margin: 0; font-size: 25px; font-weight: 700; color: #222; word-break: normal; }

.pop-body { position: absolute; left: 8%; right: 8%; top: 18%; bottom: 7%; overflow: auto; font-size: 20px; line-height: 1.65; color: #444; word-break: normal; }
.pop-body ol { list-style: decimal; margin: 0; padding-left: 1.4em; }
.pop-body li { margin: 0 0 0.45em;font-size: 12pt; }
.pop-body li:last-child { margin-bottom: 0; }

.pop-body a { color: #c4553a; text-decoration: underline; word-break: break-all; }
.pop-close { position: absolute; z-index: 3; top: 2%; right: 3%; width: 60px; height: 60px; padding: 0; border: 0; cursor: pointer; 
	background: url("../images/btn_close.png") center / contain no-repeat; transition: transform 0.2s ease, filter 0.2s ease; }
.pop-close:hover { transform: scale(1.12); filter: brightness(1.15); }
.pop-close:active,
.pop-close.is-press { transform: scale(0.86); filter: brightness(0.92); }

.pop-ab-box { width: 98vw; aspect-ratio: 727 / 972; background: url("../images/pop_bg_ad.png") center / 100% 100% no-repeat; }
#pop_ab .pop-ab-close { top: -5%; right: 0.5%; width: 11%; height: auto; aspect-ratio: 1; background-image: url("../images/btn_close_p.png"); }
.pop-ab-form { position: absolute; z-index: 2; left: 8%; right: 10%; top: 69%; bottom: 7%; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pop-ab-line { display: flex; align-items: stretch; gap: 3%; height: 34%; }
.pop-ab-select { position: relative; flex: 0 0 32%; }
.pop-ab-select select,
.pop-ab-line .js-phone { width: 100%; height: 100%; border: 2px solid #8ed48f; border-radius: 10px; background: #fff; color: var(--brown); font-size: clamp(16px, 3.4vw, 20px); padding: 0 10px; }
.pop-ab-line .js-phone::placeholder { color: #b3aa9e; }
.pop-ab-select select { appearance: none; padding-right: 22px; }
.pop-ab-select::after { content: ""; position: absolute; z-index: 1; right: 10px; top: 50%; width: 0; height: 0; margin-top: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #333; pointer-events: none; }
.pop-ab-agree { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: #8d8d8d; font-size: clamp(11px, 3vw, 15px); line-height: 1.3; }
.pop-ab-agree input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #8ed48f; }
.pop-ab-agree .txt-link { color: #2f9a62; font-size: inherit; font-weight: 700; }
.pop-ab-submit { top: 5%;height: 36%; border: 0; border-radius: 999px; background: var(--gold); color: var(--brown); font-size: clamp(18px, 5vw, 26px); font-weight: 900; letter-spacing: 0.14em; }

/* 手機底圖與選單預設隱藏，1024 以下由 rwd.css 開啟 */
.mobile-bg,
.m-menu-btn,
.m-menu { display: none; }