/* 幻牌交鋒 官網 — 手寫版面骨架（取代外包 900KB 三件套）。
   ponytail: 這是可看的版面骨架，非 pixel-perfect。視覺細修等 JP 素材到位後再調。 */

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --max: 1200px; --gap: 1rem; --ink: #fff; --bg: #0b0b12; --accent: #c9a24b;

  /* ── 幻靈介紹 調控區（數值＝直接照抄外包 game2 character 區）── */
  --eido-glow: #c96cff;                          /* 紫光暈色 */
  --eido-name-size: calc(14px + 1.88vw);         /* 名稱字級 */
  --eido-skill-size: calc(8px + 1.09vw);         /* 技能文字級 */
  --eido-thumb-h: calc(50px + 7.92vw);           /* 縮圖高（圖檔本身是菱形，寬自動） */
  --eido-thumb-overlap: -43px;                   /* 縮圖重疊（外包 spaceBetween:-43） */
  --eido-thumb-active-scale: 1.2822;             /* active 縮圖放大（外包 scale(128.22%)） */
  --eido-fade: .5s;                              /* 換頁淡入時間 */
}
/* iPhone Safari 會自動放大長文字塊（桌機重現不了的「跑版」主因之一），鎖 100% 關掉 */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: system-ui, "Noto Sans JP", sans-serif; background: var(--bg); color: var(--ink); }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Header — 照抄外包 game2：黑60%底＋紫影、logo 轉白、菱形 active 標記、捲動後 .fixed 吸頂 */
#header {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; background: rgba(0,0,0,.6); box-shadow: 0 5px 10px 0 rgba(91,0,144,.3);
}
#header.fixed { position: fixed; top: 0; }
/* logo 用素材原色（JP 正式 logo 本身是紫色設計；外包的轉白 filter 不套用） */
#header .logo img { max-width: 118px; max-height: 80px; width: 100%; object-fit: scale-down; margin: 10px 12px 10px 0; }
/* mbl-title：手機捲動後顯示目前區塊名（外包同款，前綴白色菱形 mark）；桌機不顯示 */
.mbl-title { display: none; align-items: center; padding-left: 10px; color: #fff; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.mbl-title::before { content: ""; display: block; width: 10px; height: 15px; margin-right: 5px;
  background: var(--deco-list-mark) 50% / contain no-repeat; filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; align-self: stretch; }
.nav a {
  position: relative; z-index: 1; display: flex; align-items: center; height: 100%;
  padding: 0 max(15px, 1.82vw); color: #fff; font-weight: 700; font-size: 1.125rem;
  font-family: "Taipei Sans TC", "Yu Gothic", "Meiryo", "Microsoft JhengHei", sans-serif;
  text-shadow: 0 5px 10px rgba(25,27,36,.65); transition: color .2s;
}
/* scroll-spy 菱形標記（外包精確值：clamp(90,8.33vw,100) 半透明藍紫漸層＋陰影，淡入 .3s） */
.nav a::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; opacity: 0;
  width: clamp(90px, 8.33vw, 100px); height: clamp(90px, 8.33vw, 100px);
  transform: translate(-50%, -50%) rotate(45deg);
  background-image: linear-gradient(90deg, rgba(143,156,255,.5) 0, rgba(207,132,255,.5));
  box-shadow: 0 5px 10px 0 rgba(0,0,0,.4); transition: opacity .3s;
}
.nav a.active::before { opacity: 1; }
.nav-toggle { display: none; flex-direction: column; background: none; border: 0; cursor: pointer; padding: 0 0 0 2em; }
.nav-toggle span { width: 35px; height: 4px; background: #fff; margin: 0 auto 5px; }
.nav-toggle span:last-child { margin-bottom: 0; }
.nav-close { display: none; }
.social-menu-mbl { display: none; }

/* Banner（外包 game2：圖滿版、影片絕對疊上、商店鈕 overlay 疊圖上＝無黑條） */
.banner { position: relative; }
.banner picture, .banner picture img { width: 100%; display: block; }
.banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 769px) {
  .banner { overflow: hidden; }
  .banner picture img { width: auto; height: 100%; max-height: 100dvh; position: relative; left: 50%; transform: translateX(-50%); object-fit: cover; }
}

/* Store overlay（外包 .store-wrap）：吸 banner 底部、寬 80% max 1352、每鈕 25% max 315 */
.store-wrap { position: absolute; left: 0; right: 0; bottom: .26vw; margin: 0 auto; width: 80%; max-width: 1352px; height: fit-content; z-index: 3; }
.store-cell { display: flex; justify-content: center; flex-wrap: wrap; }
.store-wrap .item { width: 25%; max-width: 315px; display: block; padding: 0 max(10px, 1.04vw); margin: clamp(2px, .65vw, 5px) 0; text-align: center; }
.store-wrap .item img { max-height: 100%; margin: 0 auto; }
@media (max-width: 766px) {
  .store-wrap .item { width: 50%; max-height: 45px; }
  .store-wrap .item img { max-height: 45px; }
}
/* 下捲提示＝外包 scroll.png */
.scroll-down { display: block; margin: 0 auto; width: fit-content; }
.scroll-down img { max-height: max(60px, 5.05vw); display: block; }

/* Side menu（外包 game2：右側垂直置中、容器底圖 sidemenu-bg 100%100% 拉伸包裹、寬 max(55px,4.06vw)）
   底圖由 site.js 從 ASSETS.sidemenu.bg 灌 inline backgroundImage */
.sidemenu {
  position: fixed; top: 0; bottom: 0; margin: auto 0; right: 0; height: fit-content; z-index: 40;
  width: max(55px, 4.06vw); overflow: hidden;
  background-repeat: no-repeat; background-size: 100% 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(15px + .52vw) max(5px, .52vw) calc(10px + .3vw);
}
.sidemenu a { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.sidemenu a:last-child { margin-bottom: 0; }
.sidemenu img { width: 100%; }
/* （icon 無圖時的 .x-ph 佔位已退役——現行社群 icon 全數有素材；未來新社群缺圖時再補佔位樣式） */

/* Sections（full-bleed：section 滿版、內容置中 max-width；padding 撐開兩側） */
main > section { padding: 4rem max(1rem, calc(50vw - var(--max) / 2)); }

/* Section 背景（圖與遮罩由 site.js 從 assets.js 的 ASSETS 設 inline backgroundImage；CSS 只留版型） */
.section-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Carousel（原生，無 Swiper）：只顯示 .active 那張，切換帶淡入 */
.carousel { position: relative; }
.carousel .slide { display: none; }
.carousel .slide.active { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; animation: slide-fade var(--eido-fade) ease; }
.carousel .slide img { margin: 0 auto; }
@keyframes slide-fade { from { opacity: 0; } to { opacity: 1; } }
/* 箭頭＝外包裝飾圖（--deco-arrow-next，由 site.js 從 assets.js 灌入；prev 水平翻轉；尺寸照外包 .swiper-arrow） */
.car-prev, .car-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: max(40px, 5.99vw); height: max(30px, 4.58vw); border: 0; cursor: pointer;
  background: none; padding: 0; filter: drop-shadow(3px 0 4px var(--eido-glow));
}
.car-prev { left: .5rem; } .car-next { right: .5rem; }
.car-prev::before, .car-next::before { content: ""; display: block; width: 100%; height: 100%; background: var(--deco-arrow-next) center / contain no-repeat; }
.car-prev::before { transform: scaleX(-1); }

/* Heroes（幻靈）— 版面/字級/擺位 直接照抄外包 game2 character 區（斷點 1199px 同外包）。
   桌機：左立繪超尺寸出血、右文字欄（上方留位給絕對定位縮圖列）；縮圖列吸右上。 */
.heroes { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.heroes .carousel .slide.active { display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: 0; overflow: hidden; }
/* 桌機立繪：外包原用 147.74% 超尺寸出血，但我們的幻靈動圖特效延伸到畫面邊緣、會被硬截 →
   改為 contain 完整顯示（截斷修正，非照抄值）；容器高沿用外包 max(550px,52.92vw)。 */
.heroes .slide .hero-media { width: 100%; height: max(550px, 52.92vw); display: flex; align-items: flex-end; justify-content: center; }
.hero-video { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* 文字欄（外包 .txt-wrap：padding-top:max(180px,25vw)＋紫光暈；子項 max-width:676px） */
.hero-info { text-align: center; padding-top: max(180px, 25vw); filter: drop-shadow(0 0 7px var(--eido-glow)); }
.hero-info > * { max-width: 676px; display: block; margin-left: 10px; margin-right: 10px; }
/* 名稱（外包 .title）：裝飾線 bottom repeat-x、兩端菱形 mark 轉白、字級 calc(14px+1.88vw) */
.hero-info h3 {
  position: relative; width: 100%; margin: 0 auto max(15px, 2.86vw);
  padding: max(40px, 2.6vw) 0 max(15px, 1.56vw);
  font-family: "Taipei Sans TC", "Yu Gothic", "Meiryo", "Microsoft JhengHei", sans-serif;
  font-size: var(--eido-name-size); font-weight: 900; line-height: 1.4; color: #fff;
  background-image: var(--deco-title-line); background-position: bottom; background-repeat: repeat-x;
}
.hero-info h3::before, .hero-info h3::after {
  content: ""; display: block; position: absolute; bottom: 0; transform: translateY(46%);
  width: max(14px, 1.2vw); height: max(19px, 1.46vw);
  background: var(--deco-list-mark) 50% / contain no-repeat;
  filter: brightness(0) invert(1);
}
.hero-info h3::before { right: 100%; }
.hero-info h3::after { left: 100%; }
/* 技能文（外包 .txt-wrap p）：calc(8px+1.09vw)、粗體 */
.hero-info p { margin: 0 auto; padding: 0 max(5px, 1.56vw); font-family: "Taipei Sans TC", "Yu Gothic", "Meiryo", "Microsoft JhengHei", sans-serif; font-size: var(--eido-skill-size); font-weight: 700; line-height: 1.6; }

/* 縮圖列（外包 .sub-slide-wrap）：吸右上 right:8.33% top:max(100px,11.46vw)；縮圖圖檔本身是菱形金框，
   inactive 壓暗 brightness(.5)、active 放大 scale(1.2822)、-43px 重疊 */
.heroes .thumbs {
  position: absolute; right: 8.333333%; top: max(100px, 11.46vw); margin: 0; z-index: 6;
  width: max(185px, 26.93vw); display: flex; justify-content: center; align-items: center;
  filter: drop-shadow(-3px 0 3px rgba(0,0,0,.4));
}
.thumbs .thumb { padding: 0; flex: none; background: none; border: 0; cursor: pointer; position: relative; }
.thumbs .thumb + .thumb { margin-left: var(--eido-thumb-overlap); }
.thumbs .thumb img { height: var(--eido-thumb-h); width: auto; display: block; margin: max(15px, 1.46vw) 0; filter: brightness(.5); transition: transform .3s, filter .3s; }
.thumbs .thumb.active { z-index: 2; }
.thumbs .thumb.active img { filter: brightness(1); transform: scale(var(--eido-thumb-active-scale)); }
/* 無縮圖素材的幻靈 → 名稱文字佔位 */
.thumbs .thumb .thumb-txt { display: flex; align-items: center; justify-content: center; height: var(--eido-thumb-h); width: calc(var(--eido-thumb-h) * .8); padding: 8px; font-size: .58rem; line-height: 1.2; text-align: center; color: #ccc; background: #1a1a24cc; }

/* 幻靈區箭頭（外包 .sub .swiper-arrow）：絕對定位在縮圖列外側、垂直置中 */
.heroes .thumbs .car-prev, .heroes .thumbs .car-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: max(46px, 4.01vw); height: max(30px, 4.58vw);
}
.heroes .thumbs .car-prev { left: min(-23px, -2.6vw); }
.heroes .thumbs .car-next { right: min(-23px, -2.6vw); }

/* 幻靈區 RWD（外包斷點 1199px）：直向堆疊、立繪 70svh 置中、縮圖列疊在立繪上（top:60svh）、文字置中 */
@media (max-width: 1199px) {
  .heroes { min-height: 0; }
  .heroes .carousel .slide.active { grid-template-columns: 1fr; }
  /* 圖到字距離（外包公式為 calc(25px+6.51vw)；實測視覺仍偏大，收緊為下值，要再調就改這行） */
  .heroes .slide .hero-media { height: fit-content; margin-bottom: calc(10px + 4.5vw); }
  /* width:100%＋contain（承 .hero-video 基本規則）：舊寫法 width:auto 在高瘦手機上比螢幕寬，
     被 .slide.active 的 overflow:hidden 裁掉特效邊緣 → 同桌機的「contain 完整顯示」截斷修正 */
  .hero-video { height: 70svh; width: 100%; margin-top: 15px; object-position: center bottom; }
  .hero-info { padding-top: 0; padding-bottom: 70px; }
  .hero-info > * { margin: 0 auto; width: fit-content; max-width: calc(100% - 30px); min-width: 230px; }
  /* 分線長度＝貼文字寬（外包窄版效果：fit-content、最小 230px），不再攤滿整欄 */
  .hero-info h3 { padding-top: 0; width: fit-content; min-width: 230px; max-width: calc(100% - 30px); padding-left: .6em; padding-right: .6em; }
  .heroes .thumbs { right: 50%; transform: translateX(50%); top: 60svh; }
}

/* Features（遊戲特徵）— 版面/字級/輪播規範 直接照抄外包 game2 gameInfo 區（斷點 1199px 同外包）。
   右欄＝三張同見傾斜輪播（prev -7°/active ×1.125/next +7°、-117px 重疊）；左欄文字帶紫光暈。 */
.features { display: grid; grid-template-columns: 4fr 6fr; gap: 0; align-items: center; overflow: hidden;
  padding-top: max(50px, 12.19vw); padding-bottom: 30px; color: #fff; }
/* 左欄文字（外包 .tab-content）：max-width 500、置中、紫光暈、往左偏 11% */
.feature-text { max-width: 500px; margin: 0 10px; padding-top: max(40px, 6.98vw); text-align: center;
  width: 100%; min-height: calc(80px + 6.61vw); filter: drop-shadow(0 0 7px var(--eido-glow)); transform: translateX(-11%);
  font-family: "Taipei Sans TC", "Yu Gothic", "Meiryo", "Microsoft JhengHei", sans-serif; }
.feat-pane { display: none; }
.feat-pane.active { display: block; }
/* 標題（外包 .title）：calc(18px+1.88vw)、裝飾線 repeat-x＋兩端菱形轉白 */
.feat-pane h4 { position: relative; width: fit-content; margin: 0 auto; padding: max(10px, .78vw) .4em;
  font-size: calc(18px + 1.88vw); font-weight: 900; line-height: 1.4; color: #fff;
  background-image: var(--deco-title-line); background-position: bottom; background-repeat: repeat-x; }
.feat-pane h4::before, .feat-pane h4::after { content: ""; display: block; position: absolute; bottom: 0;
  transform: translateY(46%); width: max(14px, 1.2vw); height: max(19px, 1.46vw);
  background: var(--deco-list-mark) 50% / contain no-repeat; filter: brightness(0) invert(1); }
.feat-pane h4::before { right: 100%; }
.feat-pane h4::after { left: 100%; }
.feat-pane p { margin-top: .8em; font-size: calc(8px + .94vw); font-weight: 700; line-height: 1.6; }

/* 右欄輪播（外包 .slide-wrap .cell）：寬 max(562px,35.94vw)、左偏 12%、三張同見 */
.features .carousel { width: max(562px, 35.94vw); transform: translateX(-12.03%); }
/* 三位置絕對定位＋transform 過渡＝Swiper 式滑動動畫（外包 spaceBetween:-117 → 相鄰中心距＝slide寬-117px） */
.features .slides { position: relative; height: calc(max(320px, 26.25vw) * 1.125 + 74px); }
.features .slides .slide {
  display: flex; justify-content: center; align-items: center; padding: 0;
  position: absolute; left: 50%; top: 0; height: 100%;
  width: calc(100% / 3);  /* slide 寬＝容器 1/3（Swiper slidesPerView:3 同義）；-117px 位移以此為基準，圖窄也能露出左右預覽 */
  transform: translateX(-50%) scale(.8); opacity: 0; pointer-events: none; z-index: 0;
  transition: transform .5s ease, opacity .4s ease; animation: none; transform-origin: 50% 0;
}
.features .slides .slide img { height: max(320px, 26.25vw); width: auto; margin: 37px 0;
  border: 2px solid #7d6beb; filter: brightness(.25); transition: filter .3s linear, border-color .3s linear; }
.features .slides .slide.prev   { transform: translateX(calc(-150% + 117px)) rotate(-7deg) translateY(6%); opacity: 1; pointer-events: auto; }
.features .slides .slide.active { transform: translateX(-50%) scale(1.125); opacity: 1; pointer-events: auto; z-index: 1; }
.features .slides .slide.next   { transform: translateX(calc(50% - 117px)) rotate(7deg) translateY(6%); opacity: 1; pointer-events: auto; }
.features .slides .slide.active img { filter: none; border: 2px solid #f2e0ff; }
/* 箭頭（外包 gameInfo）：top 60%、尺寸 max(50px,3.85vw)×max(34px,5vw) */
.features .car-prev, .features .car-next { top: 60%; width: max(50px, 3.85vw); height: max(34px, 5vw); }

/* 圓點提示（外包 game2 pagination）：7×7 菱形紫漸層、active/hover 白漸層、置中＋紫光暈 */
.car-dots { width: fit-content; margin: auto; display: flex; padding-top: 15px; filter: drop-shadow(0 0 7px var(--eido-glow)); }
.car-dots .car-dot {
  width: 7px; height: 7px; margin: 7px; border: 0; padding: 0; cursor: pointer; border-radius: 0;
  transform: rotate(45deg); background-color: transparent;
  background-image: linear-gradient(315deg, #a975d6, rgba(169,117,214,.55));
}
.car-dots .car-dot.active, .car-dots .car-dot:hover { background-image: linear-gradient(0deg, #fff 0, hsla(0,0%,100%,.55)); }

/* 商店連結（外包 .store-link）：上距 max(30px,4.9vw)、圖高 max(37px,3.75vw) */
.store-link { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; padding-top: max(30px, 4.9vw); }
.store-link a { margin: 0 10px 10px; }
.store-link img { height: max(37px, 3.75vw); width: auto; }

/* 遊戲特徵 RWD（外包斷點 1199px）：直向堆疊、文字 fit-content 置中、輪播置中放大 118.8%、箭頭移內側 */
@media (max-width: 1199px) {
  .features { grid-template-columns: 1fr; }
  .feature-text { margin: 0 auto; padding-top: 0; min-width: 200px; width: fit-content; max-width: 100%; transform: none; }
  .features .carousel { position: relative; left: 50%; transform: translateX(-50%); width: 118.8%; max-width: max(562px, 35.94vw); }
  .features .car-prev, .features .car-next { top: 45%; }
  .features .car-prev { left: 14%; }
  .features .car-next { right: 14%; }
}

/* Footer */
footer { text-align: center; padding: 3rem 1rem; background: #06060a; font-size: .85rem; color: #aaa; }
/* wrap：iOS 日文字型較寬，320px 機種三連結會超寬，允許換行防擠爆 */
.footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.footer-menu a { color: var(--accent); white-space: nowrap; }  /* 禁詞內斷行（CJK 會在任意字元斷）→ 整顆連結換行 */
.legal { max-width: 720px; margin: .8rem auto; line-height: 1.6; }

/* 問題回報 modal（照搬 redeem-code legal_modal：fixed 遮罩 + 置中視窗 + iframe） */
.report-modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.report-modal[hidden] { display: none; }
.report-modal-window { display: flex; flex-direction: column; width: min(90vw, 720px); max-height: 85vh; background: #1a1a24; border: 2px solid var(--accent); }
.report-modal-window.modal-mode-form { width: min(95vw, 640px); }
.report-modal-toolbar { display: flex; justify-content: flex-end; padding: 8px 12px; background: #12121a; border-bottom: 1px solid rgba(201,162,75,.4); }
.report-modal-toolbar button { min-width: 40px; height: 32px; border: 1px solid rgba(201,162,75,.55); background: rgba(201,162,75,.12); color: var(--accent); font-size: 18px; font-weight: 700; cursor: pointer; }
.report-modal-toolbar button:hover { background: rgba(201,162,75,.25); }
/* 內容一律 iframe（文件＝站內 legal 頁深色版；表單＝Google Form 白底） */
.report-modal-body { padding: 0; overflow: hidden; }
.report-iframe { display: block; width: 100%; height: 70vh; border: 0; background: #1a1a24; }
.report-modal-window.modal-mode-form .report-iframe { background: #fff; }
@media (max-width: 600px) {
  .report-modal-window, .report-modal-window.modal-mode-form { width: 100vw; height: 100vh; max-height: 100vh; border: 0; }
  .report-iframe { height: calc(100vh - 49px); }
}

/* Cookie */
#cookie-consent { position: fixed; inset: auto 0 0 0; z-index: 60; background: #1a1a24; padding: 1rem; text-align: center; }
#cookie-consent button { margin: .3rem; padding: .4rem 1.2rem; }

/* Responsive — NavBar/側欄（外包斷點 1199px：手機選單＝右側滑入全屏黑75%面板） */
@media (max-width: 1199px) {
  .sidemenu { display: none; }
  .nav-toggle { display: flex; }
  #header.fixed .mbl-title { display: flex; }  /* 捲動後顯示目前區塊名 */
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; align-content: center;
    background: rgba(0,0,0,.75); overflow-y: auto; z-index: 999;
    transform: translateX(100%); transition: transform .3s ease;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav a { padding: 30px 15px; width: 100%; height: auto; justify-content: center; text-align: center; font-size: clamp(24px, 3.92vw, 30px); }
  .nav a::before { display: none; }  /* 全屏選單內不顯示菱形標記（外包同） */
  .nav-close { display: flex; justify-content: center; align-items: center; order: 99; width: 120px; height: 51px; margin: 10px auto 0; background: none; border: 0; cursor: pointer; }
  .nav-close img { max-width: 100%; max-height: 100%; }
  /* 全屏選單內的社群列（外包 .social-menu：margin 0 auto 15px、icon 高 clamp(80,7.92vw,95)） */
  .social-menu-mbl { display: flex; justify-content: center; align-items: center; width: auto; margin: 0 auto 15px; order: 98; }
  .social-menu-mbl a { margin: 0 5px; padding: 0; width: auto; }
  .social-menu-mbl img { height: clamp(80px, 7.92vw, 95px); width: auto; }
}